/* SemaAudit - the look of the approved mock-up (sema_audit\mockup.html). */
:root { --bg:#f4f5f7; --card:#fff; --ink:#1d2430; --soft:#5b6576; --line:#dde1e7; --blue:#1f5fbf; --blue-soft:#e8f0fc; --red:#c0392b; --green:#1e8a4c; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { background:var(--ink); color:#fff; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
header b { font-size:18px; }
header .who { font-size:14px; opacity:.85; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
header button { background:transparent; color:#fff; border-color:#5b6576; min-height:36px; padding:6px 12px; font-size:14px; }
main { display:grid; grid-template-columns: 1fr 380px; gap:16px; padding:16px; max-width:1300px; margin:0 auto; }
.pane { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0; }
.pane h2 { margin:0 0 4px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.crumbs { font-size:18px; font-weight:600; margin:4px 0 12px; overflow-wrap:anywhere; }
.crumbs a { color:var(--blue); text-decoration:none; cursor:pointer; }
.crumbs a:hover { text-decoration:underline; }
.bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
button { font:inherit; color:inherit; border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 14px; cursor:pointer; min-height:44px; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible, a:focus-visible, li:focus-visible, .tree div:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
button.main { background:var(--blue); color:#fff; border-color:var(--blue); }
button.rec { background:var(--red); color:#fff; border-color:var(--red); font-weight:600; }
button.danger { color:var(--red); }
button.small { padding:6px 10px; min-height:36px; font-size:14px; }
button.wide { width:100%; }
.files { list-style:none; padding:0; margin:0 0 16px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.files li { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.files li:last-child { border-bottom:0; }
.files li:hover { background:#f8f9fb; }
.files li.sel { background:var(--blue-soft); outline:2px solid var(--blue); outline-offset:-2px; }
.files li.empty { color:var(--soft); cursor:default; justify-content:center; }
.files .ico { width:34px; height:34px; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; flex:none; }
.xls { background:#1e7a45; } .doc { background:#2b5bb8; } .pdf { background:#c0392b; } .img { background:#8e44ad; } .fold { background:#d9a520; } .oth { background:#6b7686; } .aud { background:#0f7b8a; } .zip { background:#7a5d00; }
.files .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { font-size:13px; background:#eef0f3; border-radius:20px; padding:2px 10px; color:var(--soft); white-space:nowrap; }
.doc-box { border:2px solid var(--blue); border-radius:12px; padding:14px; }
.doc-box h3 { margin:0 0 2px; font-size:18px; overflow-wrap:anywhere; }
.meta { font-size:13px; color:var(--soft); margin-bottom:12px; overflow-wrap:anywhere; }
.hint { color:var(--soft); font-size:15px; padding:12px; border:1px dashed var(--line); border-radius:10px; text-align:center; }
.notes { list-style:none; padding:0; margin:0 0 12px; max-height:520px; overflow-y:auto; }
.notes li { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; }
.notes li.none { color:var(--soft); text-align:center; border-style:dashed; }
.notes .top { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.notes .top b { font-size:15px; overflow-wrap:anywhere; }
.notes .top i { color:var(--soft); font-weight:400; }
.notes .top span { white-space:nowrap; color:var(--soft); }
.player { display:flex; align-items:center; gap:8px; margin:8px 0 6px; }
.play { width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; border:0; font-size:15px; padding:0; min-height:0; flex:none; }
.player progress { flex:1; height:8px; appearance:none; -webkit-appearance:none; border:0; border-radius:4px; background:#d4dbe6; overflow:hidden; cursor:pointer; }
.player progress::-webkit-progress-bar { background:#d4dbe6; border-radius:4px; }
.player progress::-webkit-progress-value { background:var(--blue); border-radius:4px; }
.player progress::-moz-progress-bar { background:var(--blue); border-radius:4px; }
.player .time { font-size:13px; color:var(--soft); white-space:nowrap; min-width:80px; text-align:right; }
.acts { display:flex; gap:6px; flex-wrap:wrap; }
.recording { background:#fdecea; border:1px solid #f3b8b1; border-radius:10px; padding:10px; display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.recording .grow { flex:1; }
.dot { width:12px; height:12px; border-radius:50%; background:var(--red); animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.25; } }
.tree { list-style:none; padding:0; margin:6px 0 16px; font-size:15px; }
.tree ul { list-style:none; padding-left:20px; margin:0; }
.tree li > div { padding:6px 8px; border-radius:8px; display:flex; gap:6px; align-items:center; cursor:pointer; min-height:36px; }
.tree li > div:hover { background:#f3f5f8; }
.tree li > div.here { background:var(--blue-soft); font-weight:600; color:var(--blue); }
.tree .tname { overflow-wrap:anywhere; }
.tree .cnt { margin-left:auto; font-size:12px; color:var(--soft); white-space:nowrap; }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.toast { position:fixed; left:50%; top:12px; pointer-events:none; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px; max-width:min(92vw, 560px); z-index:50; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.toast.bad { background:var(--red); }
.progress-line { font-size:14px; color:var(--soft); margin:-4px 0 12px; }
dialog { border:1px solid var(--line); border-radius:12px; padding:18px; width:min(92vw, 480px); color:var(--ink); }
dialog::backdrop { background:rgba(20,26,36,.45); }
dialog h3 { margin:0 0 10px; font-size:18px; }
dialog p { margin:0 0 10px; color:var(--soft); }
dialog input[type=text], dialog input[type=password] { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; min-height:44px; }
dialog .row { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.pick { list-style:none; padding:0; margin:0; max-height:50vh; overflow-y:auto; border:1px solid var(--line); border-radius:10px; }
.pick li { padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; overflow-wrap:anywhere; }
.pick li:last-child { border-bottom:0; }
.pick li:hover { background:#f3f5f8; }
.pick li.sel { background:var(--blue-soft); color:var(--blue); font-weight:600; }
.pick li.off { color:#aab1bd; cursor:not-allowed; }
.bin { list-style:none; padding:0; margin:0; }
.bin li { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bin li .what { flex:1; min-width:200px; overflow-wrap:anywhere; }
.bin li .what small { display:block; color:var(--soft); }
.admin { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
/* sign-in page */
.login-wrap { max-width:420px; margin:8vh auto; padding:0 16px; }
.login-wrap .pane { padding:24px; }
.login-wrap h1 { font-size:22px; margin:0 0 6px; }
.login-wrap p { color:var(--soft); margin:0 0 16px; }
.login-wrap label { display:block; font-weight:600; margin:12px 0 6px; }
.login-wrap input { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; min-height:48px; }
.login-wrap button { width:100%; margin-top:18px; }
.login-wrap .err { color:var(--red); margin-top:12px; min-height:1.4em; }
@media (max-width: 820px) {
  main { grid-template-columns: 1fr; padding:12px; }
  .right { order:-1; }   /* on a phone the folders and global notes come first, then the open folder */
  .notes { max-height:none; }
}
dialog.wide { width:min(94vw, 720px); }
.recording canvas.level { flex:1 0 100%; width:100%; height:48px; background:#fff; border:1px solid #f3b8b1; border-radius:6px; display:block; }
.howto { margin-top:16px; text-align:center; }
.howto h2 { margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.howto button.big { width:100%; font-size:18px; min-height:56px; }
.howto video, video.howto-video { width:100%; border-radius:10px; background:#000; display:block; margin-top:8px; }
dialog.video-box { width:min(1100px, 96vw); max-width:96vw; max-height:96vh; padding:12px; background:#111821; color:#fff; border:0; }
dialog.video-box .video-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:8px; }
dialog.video-box .video-head button { background:#fff; color:var(--ink); }
dialog.video-box video { width:100%; max-height:calc(96vh - 80px); display:block; background:#000; border-radius:8px; }