/* Case Builder -- the dashboard's semantic token system (vendored from D:\AI Projects\LTB Files\assets\dashboard.css :root + assets\skins.css [data-skin=dark] @ 9c553f6) with Case Builder's own values. Light and dark only: the Lego / LCARS / Disco skins are internal to the firm (Shaun, 2026-09-11). The script sets data-skin before first paint; the media query below only covers a no-JS visitor. Breakpoints are the dashboard's (RESPONSIVE.md): 900 / 720 / 640 / 560. */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-1: #f6f8fa; --surface-2: #eef1f4; --border: #e2e5ea; --border-strong: #c5cbd3; --text: #1c2b3a; --text-muted: #46607a; --text-faint: #8590a2; --muted: #666666; --strong: #1c2b3a; --on-strong: #ffffff; --on-strong-muted: #cfe0ef; --brand: #14477a; --brand-active: #0d2f52; --bar-bg: var(--brand); --bar-bg-active: var(--brand-active); --bar-fg: #cfe0ef; --bar-fg-strong: #ffffff; --accent: #2f6690; --accent-2: #b5651d; --link: #2563a8; --good: #226a35; --good-bg: #e3f3e6; --good-border: #b7e0c3; --warn: #7a5a00; --warn-bg: #fff3cd; --warn-border: #f0dfae; --bad: #a02f2f; --bad-bg: #fbe4e4; --bad-bg-soft: #fbecea; --bad-border: #e6c3c3; --info: #14477a; --info-bg: #e0ecf8; --info-border: #c5d9ec; --mark: #ffe58f; } /* Noir (opt-in, "just for fun"): a 1940s courtroom. Sepia paper, ink, brass, typewriter headings, a smoky vignette. */ :root[data-skin="noir"] { color-scheme: dark; --bg: #1b1713; --surface: #26201a; --surface-1: #2d261f; --surface-2: #372e25; --border: #4a3d31; --border-strong: #6b5a48; --text: #ecdcc3; --text-muted: #c2ad90; --text-faint: #8e7b64; --muted: #b39d80; --strong: #3d2f22; --on-strong: #f6ead6; --on-strong-muted: #d5c1a3; --brand: #8a5a24; --brand-active: #6b4419; --bar-bg: #120e0b; --bar-bg-active: #2a1f16; --bar-fg: #cdb897; --bar-fg-strong: #f6ead6; --accent: #d7a24a; --accent-2: #b34f3a; --link: #e2b56a; --good: #9cc98a; --good-bg: #26311f; --good-border: #4a5f3c; --warn: #e3c06a; --warn-bg: #3a2f14; --warn-border: #6b5a22; --bad: #e39a8a; --bad-bg: #3f231d; --bad-bg-soft: #33201b; --bad-border: #6e3e34; --info: #d7a24a; --info-bg: #33291a; --info-border: #5c4a2a; --mark: #6b5310; } :root[data-skin="noir"] body { background-image: radial-gradient(ellipse at center, rgba(255,235,200,.05), rgba(0,0,0,.55) 90%); background-attachment: fixed; } :root[data-skin="noir"] h1, :root[data-skin="noir"] h2, :root[data-skin="noir"] h3, :root[data-skin="noir"] .wm, :root[data-skin="noir"] .tabno { font-family: "Courier New", Courier, "Lucida Console", monospace; letter-spacing: .02em; text-transform: uppercase; } :root[data-skin="noir"] h1 { font-size: 24px; } :root[data-skin="noir"] .card, :root[data-skin="noir"] .modal-card, :root[data-skin="noir"] .viewer-card, :root[data-skin="noir"] .preview-card { box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.25); } :root[data-skin="noir"] .btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .04em; font-family: "Courier New", Courier, monospace; } :root[data-skin="noir"] .hero h1::before { content: "EXHIBIT A \2014 "; color: var(--accent); } :root[data-skin="dark"] { color-scheme: dark; --bg: #0f151c; --surface: #171f29; --surface-1: #1b2430; --surface-2: #243040; --border: #2d3a49; --border-strong: #46586c; --text: #e6edf3; --text-muted: #a7b4c3; --text-faint: #7c8a9a; --muted: #9aa5b1; --strong: #2a3b50; --on-strong: #ffffff; --on-strong-muted: #b9c8d8; --brand: #3b7dc4; --brand-active: #2a5f99; --bar-bg: #0b1420; --bar-bg-active: #16283d; --bar-fg: #b7c6d6; --bar-fg-strong: #ffffff; --accent: #6fa8dc; --accent-2: #e0955a; --link: #8ab8ff; --good: #6fd196; --good-bg: #17352a; --good-border: #2c5e44; --warn: #f0c674; --warn-bg: #3a2f10; --warn-border: #6b5a22; --bad: #f19191; --bad-bg: #3f1d1d; --bad-bg-soft: #331a1a; --bad-border: #6e3434; --info: #8ab8ff; --info-bg: #172a44; --info-border: #2d4a70; --mark: #6b5a10; } @media (prefers-color-scheme: dark) { :root:not([data-skin]) { color-scheme: dark; --bg: #0f151c; --surface: #171f29; --surface-1: #1b2430; --surface-2: #243040; --border: #2d3a49; --border-strong: #46586c; --text: #e6edf3; --text-muted: #a7b4c3; --text-faint: #7c8a9a; --muted: #9aa5b1; --strong: #2a3b50; --on-strong: #ffffff; --on-strong-muted: #b9c8d8; --brand: #3b7dc4; --brand-active: #2a5f99; --bar-bg: #0b1420; --bar-bg-active: #16283d; --bar-fg: #b7c6d6; --bar-fg-strong: #ffffff; --accent: #6fa8dc; --accent-2: #e0955a; --link: #8ab8ff; --good: #6fd196; --good-bg: #17352a; --good-border: #2c5e44; --warn: #f0c674; --warn-bg: #3a2f10; --warn-border: #6b5a22; --bad: #f19191; --bad-bg: #3f1d1d; --bad-bg-soft: #331a1a; --bad-border: #6e3434; --info: #8ab8ff; --info-bg: #172a44; --info-border: #2d4a70; --mark: #6b5a10; } } :root[data-skin="dark"] input[type="text"], :root[data-skin="dark"] input[type="search"], :root[data-skin="dark"] input[type="email"], :root[data-skin="dark"] input[type="password"], :root[data-skin="dark"] input:not([type]), :root[data-skin="dark"] textarea, :root[data-skin="dark"] select { background-color: var(--surface-1); color: var(--text); border-color: var(--border-strong); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } a { color: var(--link); } img, svg { max-width: 100%; } .svg-icon { display: inline-block; vertical-align: -3px; } .wrap { max-width: 64rem; margin: 0 auto; padding: 0 20px; } .wrap.wide { max-width: 80rem; } .wrap.full { max-width: none; padding: 0 24px; } /* the Evidence Manager: the whole window (Shaun, 2026-09-12) */ .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .sp { flex: 1; } /* ---- master bar (the dashboard's .master-bar pattern) -------------------- */ .top { background: var(--bar-bg); color: var(--bar-fg); } .master-bar { display: flex; align-items: stretch; gap: 0; min-height: 52px; } .brand { color: var(--bar-fg-strong); text-decoration: none; font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; margin-right: 18px; flex-shrink: 0; } .brand .mark { display: block; width: 26px; height: 30px; } .master-tab-toggle { display: none; } .tabmenu-toggle { display: none; } .master-tab-btn { color: var(--bar-fg); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; border-bottom: 3px solid transparent; white-space: nowrap; } .master-tab-btn .mtb-icon { display: inline-flex; width: 16px; height: 16px; } .master-tab-btn .mtb-icon svg { width: 16px; height: 16px; display: block; } .master-tab-btn:hover { color: var(--bar-fg-strong); background: rgba(255,255,255,.08); } .master-tab-btn.active { color: var(--bar-fg-strong); border-bottom-color: var(--bar-fg-strong); } .acct { display: flex; gap: 12px; align-items: center; position: relative; } .acct a, .acct .linklike { color: var(--bar-fg-strong); white-space: nowrap; } /* the dashboard's gear + account split */ .gear-btn { display: flex; align-items: center; align-self: stretch; padding: 0 10px; color: var(--bar-fg); } .gear-btn:hover { background: rgba(255,255,255,0.08); color: var(--bar-fg-strong); } .gear-btn svg { width: 18px; height: 18px; display: block; } .acctwrap { position: relative; display: flex; align-self: stretch; } .acct-btn { display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: var(--bar-fg); cursor: pointer; padding: 0 12px; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; } .acct-btn:hover, .acct-btn[aria-expanded="true"] { background: rgba(255,255,255,0.08); color: var(--bar-fg-strong); } .acct-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .acct-btn .caret { font-size: 9px; opacity: .8; } .acct-flags { display: inline-flex; gap: 4px; align-items: center; } .acct-flags .flag { width: 18px; height: 9px; display: block; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); } .acct-item.danger { color: var(--bad); } .acct-form { margin: 0; } .acct-form .acct-item { width: 100%; } .acct-menu .acct-head b { color: var(--text); } .acct-menu .acct-head .muted { text-transform: none; letter-spacing: 0; font-weight: 400; } /* the menu sits on a light surface: outrank `.acct a` (bar colours) for link rows */ .acct .acct-menu a.acct-item { color: var(--text); text-decoration: none; } .acct .acct-menu a.acct-item:hover { color: var(--text); } .acct .btn { background: var(--bar-fg-strong); color: var(--brand); } /* look-and-feel menu (the dashboard's .skin / .acct-menu) */ .skin { position: relative; display: flex; align-items: stretch; } .skin-btn { border: none; cursor: pointer; background: transparent; color: var(--bar-fg); display: flex; align-items: center; padding: 0 10px; } .skin-btn:hover, .skin-btn[aria-expanded="true"] { background: rgba(255,255,255,0.08); color: var(--bar-fg-strong); } .acct-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 250px; padding: 6px; } .acct-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 10px 6px; } .acct-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 14px; background: none; border: none; color: var(--text); padding: 9px 10px; border-radius: 6px; cursor: pointer; } .acct-item:hover { background: var(--surface-2); } .skin-menu .skin-check { width: 14px; flex-shrink: 0; text-align: center; color: var(--good); } .skin-menu .acct-item[aria-checked="true"] .skin-check::before { content: "\2713"; } .skin-menu .muted { font-size: 11.5px; } /* ---- page ------------------------------------------------------------------ */ main { padding: 28px 20px 60px; } h1 { font-size: 26px; margin: 0 0 12px; line-height: 1.25; } h2 { font-size: 18px; margin: 26px 0 8px; } .lead { font-size: 17px; color: var(--text-muted); max-width: 46rem; } .muted { color: var(--text-muted); } .err { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-border); padding: 8px 12px; border-radius: 6px; } .warn { color: var(--warn); } .flash { background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info); padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; } .draft, .dev { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); padding: 6px 10px; border-radius: 6px; display: inline-block; } .btn { display: inline-block; font: inherit; font-weight: 600; background: var(--brand); color: var(--on-strong); border: 1px solid var(--brand); padding: 8px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--brand-active); } .btn.danger { background: var(--bad); border-color: var(--bad); } .btn.oauth { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .linklike { font: inherit; background: none; border: none; color: var(--link); cursor: pointer; padding: 0; text-decoration: underline; } form.inline { display: inline; } .searchbar { display: flex; gap: 8px; margin: 14px 0 6px; } .searchbar input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); } .hero { padding: 18px 0 10px; } .explainer { margin-top: 22px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .explainer h2 { margin: 0 0 12px; } .explainer-grid { display: grid; grid-template-columns: minmax(280px, 3fr) minmax(220px, 2fr); gap: 20px; align-items: start; } .explainer-player { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: 10px; overflow: hidden; } .explainer-player img, .explainer-player video, .explainer-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .explainer-player .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--brand); color: #fff; font-size: 28px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); padding-left: 6px; } .explainer-player .play:hover { background: var(--brand-active); } .explainer-steps { margin: 0; padding-left: 20px; } .explainer-steps li { margin: 0 0 10px; } @media (max-width: 720px) { .explainer-grid { grid-template-columns: 1fr; } } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; } .card h2 { margin-top: 0; } /* the two big doors-in on the signed-in home page (Shaun, 2026-09-12): "scaled for the device" -- auto-fit stacks to one column on a phone */ .home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; max-width: 920px; } .home-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px 28px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; } .home-tile:hover, .home-tile:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .home-tile-ico { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--info-bg); color: var(--brand); flex-shrink: 0; } .home-tile-ico svg { width: 28px; height: 28px; } .home-tile h2 { margin: 0; font-size: 21px; } .home-tile p { margin: 0; color: var(--text-muted); font-size: 14.5px; } @media (max-width: 600px) { .home-tile { padding: 24px 20px; } } /* tables: the dashboard's .table-scroll; results tables are no-stack (horizontal scroll on a phone), like Research Tools' */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } table.results { width: 100%; border-collapse: collapse; } table.results th, table.results td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } table.results tr:last-child td { border-bottom: none; } table.results th { background: var(--surface-1); color: var(--text-muted); font-weight: 600; font-size: 13px; } td.snippet { color: var(--text-muted); font-size: 14px; } table.results td:nth-child(2) { white-space: nowrap; } mark { background: var(--mark); padding: 0 1px; border-radius: 2px; } .form { display: grid; gap: 12px; max-width: 26rem; margin-top: 12px; } .form label { display: grid; gap: 4px; font-weight: 600; } .form input[type="text"], .form input[type="email"], .form input[type="password"], .form textarea, .form select { font: inherit; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); min-width: 0; } .form label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; } .form.two { max-width: none; grid-template-columns: 1fr 1fr; } .oauth-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; } /* provider-branded sign-in buttons (Google and Meta branding guidelines) */ .btn-google, .btn-facebook { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 4px; font: 500 14px/1 Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .25px; text-decoration: none; cursor: pointer; white-space: nowrap; } .btn-google { background: #ffffff; color: #1f1f1f; border: 1px solid #747775; } .btn-google:hover { background: #f2f2f2; } :root[data-skin="dark"] .btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; } :root[data-skin="dark"] .btn-google:hover { background: #1f1f20; } .btn-facebook { background: #1877f2; color: #ffffff; border: 1px solid #1877f2; } .btn-facebook:hover { background: #166fe5; } .btn-google .pl, .btn-facebook .pl { flex: 0 0 auto; } .or { color: var(--text-faint); margin: 6px 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; } .kv dt { color: var(--text-muted); } .kv dd { margin: 0; } .saved { padding-left: 18px; } /* the search page's mode bar (flat .tabs, pattern 2) */ .mode-bar { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid var(--border); margin: 6px 0 14px; } .mode-bar .tab-btn { color: var(--text-muted); text-decoration: none; padding: 9px 14px; font-size: 14px; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; } .mode-bar .tab-btn:hover { background: var(--surface-2); color: var(--text); } .mode-bar .tab-btn.active { color: #fff; background: var(--brand); border-bottom-color: var(--brand-active); } /* Shaun, 2026-09-12: the active tab must stand out */ .mode-bar .tab-btn.active:hover { background: var(--brand-active); color: #fff; } .sub-toggle { display: none; } /* the master-bar dropdown pattern, reused for .mode-bar.sub at narrow widths -- see @media (max-width: 600px) */ /* settings: the Credentials-page layout (category heads,
sections, badges, side menu) */ .st-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 14px; } .st-side { position: sticky; top: 72px; display: grid; gap: 14px; } .st-cat { display: grid; } .st-cat-link { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-decoration: none; padding: 4px 10px; } .st-cat-link:hover, .st-cat-link.active { color: var(--text); } .st-link { display: block; font-size: 14px; color: var(--text); text-decoration: none; padding: 7px 10px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; } .st-link:hover { background: var(--surface-2); } .st-link.active { border-left-color: var(--accent); background: var(--surface-2); font-weight: 600; } .st-main { padding: 6px 18px 18px; } .st-cat-head { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--border); } .st-cat-head:first-child { border-top: none; padding-top: 8px; margin-top: 4px; } .st-sec { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin: 8px 0; } .st-sec[open] { border-color: var(--strong); } .st-sec summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 11px 14px; font-weight: 600; font-size: 14px; } .st-sec summary::-webkit-details-marker { display: none; } .st-sec summary:hover { background: var(--surface-2); border-radius: 8px; } .st-sec .st-title { flex: 1; } .st-sec .st-chev { color: var(--text-muted); font-size: 11px; transition: transform .15s; } .st-sec[open] > summary .st-chev { transform: rotate(180deg); } .st-sec .st-body { padding: 4px 14px 16px; border-top: 1px solid var(--border); } .st-sec.danger { border-color: var(--bad-border); } .st-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .st-badge.ok { background: var(--good-bg); color: var(--good); border-color: var(--good-border); } .st-badge.off { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); } .st-badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); } .st-badge.info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); } .st-badge.bad { background: var(--bad-bg-soft); color: var(--bad); border-color: var(--bad-border); } .st-menu .tabmenu-toggle { display: none; } @media (max-width: 899px) { .st-layout { grid-template-columns: 1fr; gap: 0; } .st-side { position: static; } .st-menu .tabmenu-toggle { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 11px 13px; margin: 0 0 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .tabmenu-toggle .tm-burger { color: var(--text-muted); font-size: 14px; } .tabmenu-toggle .tm-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabmenu-toggle .tm-caret { color: var(--text-muted); transition: transform .15s; } .tabmenu-toggle[aria-expanded="true"] { border-color: var(--strong); border-radius: 8px 8px 0 0; margin-bottom: 0; } .tabmenu-toggle[aria-expanded="true"] .tm-caret { transform: rotate(180deg); } .st-menu:not(.topen) .st-side { display: none; } .st-menu.topen .st-side { display: grid; gap: 0; border: 1px solid var(--strong); border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; margin-bottom: 16px; padding: 6px 0; } .st-menu.topen .st-link { border-radius: 0; } .st-main { padding: 4px 12px 14px; } } .qr { background: #fff; display: inline-block; padding: 8px; border-radius: 8px; border: 1px solid var(--border); } .qr svg { width: 200px; height: 200px; display: block; } code.secret { font-size: 15px; letter-spacing: .08em; word-break: break-all; } pre.codes { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; font-size: 15px; letter-spacing: .05em; } .skin-inline { display: grid; gap: 8px; margin-top: 8px; } .skin-inline .check { display: flex; gap: 8px; align-items: center; } /* evidence book */ .dropzone { border: 2px dashed var(--border-strong); border-radius: 10px; padding: 28px; text-align: center; color: var(--text-muted); cursor: pointer; background: var(--surface-1); } .dropzone.over { border-color: var(--brand); background: var(--info-bg); } .dropzone-sm { padding: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; cursor: default; } .items { list-style: none; padding: 0; margin: 12px 0; } .items .item { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* a long-press opens the tab menu, not the phone's own text-select (Shaun, 2026-09-12) */ .items .item .fields, .items .item .fields input { -webkit-user-select: text; user-select: text; } /* the description/date/note fields still type and select normally */ .items .item.bad { border-color: var(--bad-border); background: var(--bad-bg-soft); } .items .tabno { font-weight: 700; color: var(--brand); margin-right: 4px; } .items .drag-handle { cursor: grab; color: var(--text-muted); padding: 0 6px 0 0; user-select: none; touch-action: none; } .items .drag-handle:active { cursor: grabbing; } .items .section { border: 1px solid var(--strong); border-left: 4px solid var(--brand); border-radius: 8px; padding: 8px 12px; margin: 14px 0 8px; background: var(--surface-1); } .items .section .secno { font-weight: 700; color: var(--brand); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; } .items .section .sec-title { flex: 1; min-width: 160px; font: inherit; font-weight: 600; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); } .items .section.dragging, .items .item.dragging { opacity: .5; } .items .section.drop-before { box-shadow: 0 -3px 0 0 var(--accent); } .items .section.drop-after { box-shadow: 0 3px 0 0 var(--accent); } #numbering-row label { display: flex; gap: 8px; align-items: center; } /* the page organizer: one tile per page, coloured by tab (the dashboard's Advanced organizer) */ .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 12px 0; } .tile { position: relative; border: 3px solid var(--border); border-radius: 8px; background: var(--surface); padding: 6px; cursor: grab; user-select: none; } .tile:active { cursor: grabbing; } .tile.dragging { opacity: .35; } .tile.drop-before { box-shadow: -4px 0 0 var(--accent); } .tile.drop-after { box-shadow: 4px 0 0 var(--accent); } .tile .thumb { width: 100%; aspect-ratio: 8.5 / 11; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 11px; font-weight: 700; } .tile .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .15s; } .tile .badge { font-size: 10.5px; font-weight: 700; margin-top: 5px; text-align: center; } .tile .pno { font-size: 11px; color: var(--text-muted); text-align: center; } .tile .sub { font-size: 11px; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile .tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s; } .tile:hover .tools, .tile:focus-within .tools { opacity: 1; } .tile .tools button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 4px; width: 24px; height: 24px; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; } .tile .tools button:hover { background: var(--surface-2); } @media (hover: none) { .tile .tools { opacity: 1; } } .modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; } .modal[hidden] { display: none; } [hidden] { display: none !important; } /* 2026-09-12: any element's own display rule (e.g. .btn) must never beat the hidden attribute -- "Convert to MP3" showed on every file */ .setting-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); } .setting-row:last-child { border-bottom: none; } .setting-field input, .setting-field select, .setting-field textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); } .setting-label .muted { font-size: 12.5px; } .pager { gap: 12px; align-items: center; } @media (max-width: 720px) { .setting-row { grid-template-columns: 1fr; } } .consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; font-size: 13.5px; max-width: 900px; margin: 0 auto; } .consent p { margin: 0; flex: 1; min-width: 240px; } /* the Document Manager's viewer: a phone-sized frame on a desktop, a little smaller on a phone */ .viewer-card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.35); display: flex; flex-direction: column; width: 400px; max-width: 96vw; } .viewer-card.landscape { width: 760px; } .viewer-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); cursor: move; user-select: none; touch-action: none; } /* Shaun, 2026-09-12: the windows can be scaled by hand from their bottom-right corner */ .viewer-card, .preview-card { resize: both; overflow: auto; min-width: 280px; min-height: 260px; } .viewer-card.sized .viewer-frame { flex: 1 1 auto; height: auto; max-height: none; min-height: 120px; } .viewer-card.sized .viewer-frame img.sideways { max-width: 100%; max-height: 100%; } .viewer-card.max, .preview-card.max { width: 98vw !important; height: 96vh !important; max-width: 98vw; transform: none !important; border-radius: 8px; } .viewer-card.max .viewer-frame { flex: 1; height: auto !important; max-height: none; } .viewer-card.max .viewer-frame img { max-width: 100%; max-height: 100%; } .viewer-card.max .viewer-frame img.sideways { max-width: 90vh; max-height: 90vw; } .viewer-title { flex: 1; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viewer-x { border: none; background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; } .viewer-x:hover { background: var(--surface-2); color: var(--text); } .viewer-frame { position: relative; background: #2b2f36; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 720px; max-height: 76vh; } .viewer-card.landscape .viewer-frame { height: 420px; } .viewer-frame img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s; display: block; transform-origin: center center; } .viewer-frame img.sideways { max-width: 720px; max-height: 400px; width: auto; height: auto; } .viewer-card.landscape .viewer-frame img.sideways { max-width: 420px; max-height: 760px; } .viewer-msg { color: #fff; font-size: 13px; padding: 20px; text-align: center; } .viewer-attach { padding: 8px 12px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.5; background: var(--surface-2, var(--surface)); } .viewer-attach button.linklike { font-size: 13px; } .import-address code { font-size: 1.1em; padding: 6px 10px; background: var(--surface-2, #f3f5f8); border: 1px solid var(--border); border-radius: 6px; user-select: all; } .sender-list { list-style: none; padding: 0; margin: 6px 0 10px; } .sender-list li { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; } .sender-list .sender { font-weight: 600; } .modal.preview { padding: 0; } .preview-card { background: var(--surface); color: var(--text); width: min(1100px, 98vw); height: 96vh; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.35); } .preview-card iframe { flex: 1; border: none; width: 100%; background: #2b2f36; } .preview-card .viewer-bar .row { gap: 12px; align-items: center; } .viewer-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 8px 10px; border-top: 1px solid var(--border); } .vw-group { display: inline-flex; align-items: center; gap: 4px; } .vw-group button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 6px; min-width: 32px; height: 30px; padding: 0 8px; font: inherit; font-size: 15px; cursor: pointer; } .vw-group button:hover { background: var(--surface-2); } .vw-actions { margin-left: auto; } .vw-group button.primary { background: var(--accent, #1f5fa8); color: #fff; border-color: transparent; font-size: 14px; } .vw-group button.primary:disabled { opacity: .45; cursor: default; } .vw-group button.primary:hover:not(:disabled) { background: var(--accent-hover, #17497f); } .vw-group button:disabled { opacity: .4; cursor: default; } #vw-page { font-size: 12.5px; color: var(--text-muted); min-width: 44px; text-align: center; } @media (max-width: 899px) { .viewer-card { width: 86vw; } .viewer-card.landscape { width: 96vw; } .viewer-frame { height: 64vh; } .viewer-card.landscape .viewer-frame { height: 46vh; } .viewer-frame img.sideways { max-width: 60vh; max-height: 80vw; } } /* display:flex would otherwise beat the hidden attribute (seen on prod 2026-09-11) */ .modal-card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; max-width: 460px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .modal-card h3 { margin: 0 0 8px; } .items .srcs { font-size: 12px; color: var(--text-muted); } /* the Document Manager: a file tree + a detail panel */ .dm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-top: 12px; } .dm-toolbar { gap: 8px; margin-bottom: 8px; } .dm-toolbar input { flex: 1; min-width: 160px; font: inherit; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); } .tree, .tree ul { list-style: none; margin: 0; padding: 0; } .tree li { margin: 2px 0; } /* the tree is a table (Shaun, 2026-09-11): the same columns at every depth, indentation only in the name cell */ .tree-head, .tree .node { display: grid; grid-template-columns: 26px var(--w-docid, 54px) var(--w-name, minmax(200px, 1.4fr)) var(--w-book, 46px) var(--w-desc, minmax(120px, 1fr)) var(--w-date, 118px) var(--w-tags, minmax(120px, 1fr)) var(--w-type, 58px) var(--w-meta, minmax(150px, .9fr)); gap: 8px; align-items: center; } .tree-head > span { position: relative; } .tree-head .rs { position: absolute; right: -6px; top: -4px; bottom: -4px; width: 10px; cursor: col-resize; } .tree-head .rs::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--border); } .tree-head .rs:hover::after, .tree-head.resizing .rs::after { background: var(--accent); } .tree-head.resizing { cursor: col-resize; user-select: none; } /* column-header sort (Shaun, 2026-09-12): click a header to sort by it, "just like a standard windows interface" */ .tree-head [data-sort] { cursor: pointer; } .tree-head [data-sort]:hover { color: var(--text); } .tree-head [data-sort].sort-asc::after, .tree-head [data-sort].sort-desc::after { font-size: 9px; margin-left: 3px; } .tree-head [data-sort].sort-asc::after { content: "\25B2"; } .tree-head [data-sort].sort-desc::after { content: "\25BC"; } .tree .node .c-docid { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tree .node .c-book { display: flex; gap: 2px; justify-content: center; } .tree .bk.none { color: var(--text-faint); } .tree .bk.na { color: var(--text-faint); font-size: 12px; } .tree-head { padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; } .tree .node { padding: 5px 8px; border-radius: 6px; cursor: pointer; min-width: 0; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* a long-press opens our own menu, not Android's text-select (Shaun, 2026-09-12) */ .tree .node > span { min-width: 0; } .tree .node .c-name { display: flex; align-items: center; gap: 6px; padding-left: calc(var(--d, 0) * 20px); min-width: 0; } .tree .node .c-desc, .tree .node .c-date { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree .node .c-tags { display: flex; flex-wrap: wrap; gap: 4px; } .tree .node .c-type { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); text-transform: uppercase; cursor: help; } .tree .node .c-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; } .tree .node .c-check input { margin: 0; width: 15px; height: 15px; cursor: pointer; } .tree li.empty { padding: 4px 8px; padding-left: calc(var(--d, 1) * 20px + 52px); font-size: 12.5px; } .tree .bk { font-size: 14px; flex-shrink: 0; } .tree .bk sup { font-size: 9px; } .legend { margin-top: 6px; font-size: 12.5px; } details.legend summary { cursor: pointer; color: var(--text-muted); font-weight: 600; } .legend-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; } .legend-list li { display: flex; align-items: center; gap: 6px; } @media (max-width: 600px) { .legend-list { display: block; } .legend-list li { padding: 4px 0; border-bottom: 1px solid var(--border); } } .phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; } .phone-btn { display: flex; align-items: center; gap: 12px; padding: 16px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer; min-height: 72px; font-size: 15px; } .phone-btn:active { background: var(--surface-2); } .phone-btn .pb-ico { font-size: 30px; flex-shrink: 0; } @media (max-width: 480px) { .phone-grid { grid-template-columns: 1fr; } } .pq-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 420px; } .pq-files li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .pq-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .pq-badge.queued, .pq-badge.uploading { background: var(--surface-2); color: var(--text-muted); } .pq-badge.done { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-border); } .pq-badge.error, .pq-badge.timeout { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); } .dm-selbar { gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 8px; background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 8px; } .dm-selbar select { font: inherit; padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); max-width: 320px; } /* "view only items that have a specified tag" (Shaun, 2026-09-12): a row of the account's own tags, click to toggle which ones narrow the tree; the clear button only appears once something is picked, so it never sits there doing nothing, but is unmissable the moment a filter is on. */ .dm-tagfilter { gap: 8px; align-items: center; padding: 6px 10px; margin-bottom: 8px; flex-wrap: wrap; } .dm-tagfilter .chips { display: flex; flex-wrap: wrap; gap: 6px; } .dm-tagfilter .btn.danger { padding: 5px 12px; font-size: 13px; } /* the case picker (Shaun, 2026-09-12): "manage evidence over multiple cases" */ .case-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .case-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .case-row .case-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; } .case-row .case-open:hover b { text-decoration: underline; } .case-row .case-dates { font-size: 12.5px; } .case-row-ops { display: flex; gap: 10px; flex-shrink: 0; } /* the "Case: " bar above the Document Manager / Book Builder tabs */ .case-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; } .case-bar-title { font-size: 15px; } .case-bar #case-bar-edit { margin-left: auto; font-size: 13px; } @media (max-width: 899px) { .dm-layout { grid-template-columns: minmax(0, 1fr); } /* the tree can never widen the page; it scrolls inside its own box */ .dm-tree-wrap { min-width: 0; max-width: 100%; overflow-x: auto; } .tree-head, .tree .node { grid-template-columns: 26px 40px minmax(160px, 1.6fr) 46px minmax(110px, 1fr) 50px minmax(120px, .9fr); } .tree-head > span:nth-child(5), .tree-head > span:nth-child(6), .tree .node .c-desc, .tree .node .c-date { display: none; } } @media (max-width: 600px) { /* Shaun, 2026-09-12: a scrollable row isn't discoverable -- nothing tells a visitor they can swipe it. Same collapsed-dropdown pattern the master bar already uses on a phone (nav.js initMasterBar/.master-bar.mopen): one visible row showing the current view + a caret, tap to expand the full list inline (not a floating overlay), tap a choice to collapse back down. */ .sub-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; margin: 6px 0 2px; cursor: pointer; } .sub-toggle .stt-caret { transition: transform .15s; } .sub-toggle[aria-expanded="true"] .stt-caret { transform: rotate(180deg); } .mode-bar.sub { display: none; flex-direction: column; gap: 0; flex-wrap: nowrap; border: 1px solid var(--border); border-radius: 8px; margin: 0 0 2px; overflow: hidden; } .mode-bar.sub.subopen { display: flex; } .mode-bar.sub .tab-btn { white-space: normal; flex-shrink: 0; border-radius: 0; box-shadow: none; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); margin-bottom: 0; } .mode-bar.sub .tab-btn:last-child { border-bottom: none; } /* each file is two lines: the name on its own line, size and status under it, the book icon at the right */ .tree-head { display: none; } .tree .node { grid-template-columns: 24px 26px minmax(0, 1fr) 36px; grid-template-areas: "check docid name book" "check meta meta book"; row-gap: 2px; } .tree .node .c-check { grid-area: check; } .tree .node .c-docid { grid-area: docid; align-self: start; padding-top: 3px; font-size: 10.5px; } .tree .node .c-name { grid-area: name; } .tree .node .c-book { grid-area: book; align-self: center; } .tree .node .c-meta { grid-area: meta; white-space: normal; padding-left: calc(var(--d, 0) * 12px + 2px); font-size: 11.5px; } .tree .node .c-name .nm { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; } /* a phone (Shaun's screenshot, 2026-09-12): checkbox, name, book, size only; description, date and tags live in the panel */ .tree .node { gap: 6px; } .tree-head > span:nth-child(7), .tree .node .c-tags, .tree .node .c-type { display: none; } .tree .node .c-name { padding-left: calc(var(--d, 0) * 12px); gap: 4px; } .tree .node .grip, .tree .node .cstate.orig, .tree .tn { display: none; } /* no drag on touch, no thumbnails: the name needs the room */ .tree .tn + .ico { display: inline; } .tree .node .vw { margin-left: auto; } .tree .tn { width: 28px; height: 36px; } .tree .node .ico.folder-ico { width: 28px; } .dm-toolbar input { min-width: 0; } .dm-toolbar { flex-wrap: wrap; } } .tree .node:hover { background: var(--surface-2); } .tree .node.selected { background: var(--info-bg); outline: 1px solid var(--info-border); } .tree .node.drop-target { outline: 2px solid var(--accent); } .tree .node .ico { width: 18px; text-align: center; color: var(--text-muted); flex-shrink: 0; } /* a real folder icon (Shaun, 2026-09-12), the same width as a file's thumbnail slot (.tn, 36px) so folder names and file names start at the same left edge at a given depth -- the old 18px triangle-only icon sat 18px narrower than a file's thumbnail, which made sibling files look like they nested under a folder above them. */ .tree .node .ico.folder-ico { width: 36px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 2px; color: var(--accent); } .tree .node .folder-ico .caret { display: inline-block; flex-shrink: 0; font-size: 11px; color: var(--text-muted); transition: transform .12s; } .tree .node .folder-ico .caret.open { transform: rotate(90deg); } .tree .node .folder-ico .svg-icon { flex-shrink: 0; } .tree .node .grip { width: 14px; color: var(--text-muted); cursor: grab; flex-shrink: 0; font-size: 13px; opacity: .55; } .tree .node:hover .grip { opacity: 1; } .tree .node .grip.blank { cursor: default; opacity: 0; } .tree .node[draggable="true"] { cursor: grab; } .tree .node[draggable="true"]:active { cursor: grabbing; } .tree .node .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree .node .mt { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .tree .node .mt.desc { white-space: normal; overflow: hidden; text-overflow: ellipsis; max-width: 40%; font-style: italic; } .tree .node .tag { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--c, var(--border)); border: none; font-weight: 600; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .tag.big { font-size: 13px; padding: 2px 10px; border-radius: 999px; border: 1px solid; font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; } .chip { border: 1px solid var(--c, var(--border)); color: var(--c, var(--text)); background: var(--surface); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .chip.on { background: var(--c, var(--brand)); color: #fff; } .chip .chip-x { border: none; background: rgba(255,255,255,.25); color: inherit; border-radius: 999px; width: 18px; height: 18px; line-height: 1; font-size: 14px; cursor: pointer; margin-left: 2px; padding: 0; vertical-align: middle; } .chip .chip-x:hover { background: rgba(0,0,0,.25); } .tagbox { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; } .tagbox-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; } .tagbox-label { font-size: 12px; font-weight: 700; color: var(--text-muted); width: 92px; flex-shrink: 0; padding-top: 4px; } .tagbox input { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); } .mode-bar.sub { margin-top: 2px; } #tag-new { gap: 8px; flex-wrap: wrap; } #tag-new input[type=text], #tag-new input:not([type]) { font: inherit; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); } #tag-new #tag-name { flex: 1; min-width: 140px; } #tag-new #tag-note { flex: 2; min-width: 180px; } #tag-color { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); } td.nowrap { white-space: nowrap; } .tree .node.inbook .ico { color: var(--good); } .tree .node .exp { width: 18px; height: 18px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .tree span.exp { border: none; background: none; } .tree .node .vw { flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: 12px; line-height: 1; cursor: pointer; padding: 2px 5px; } .tree .node .vw:hover { color: var(--text); background: var(--surface-2); border-color: var(--accent); } .items .vw { border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: 12px; line-height: 1; cursor: pointer; padding: 2px 5px; margin-left: 6px; } .items .vw:hover { color: var(--text); background: var(--surface-2); border-color: var(--accent); } .tree .node .exp:hover { color: var(--text); background: var(--surface-2); } .tree .tn { width: 36px; height: 46px; object-fit: cover; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-1); flex-shrink: 0; } .tree .tn.blank { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-muted); } .tree .tn.broken { visibility: hidden; } .tree.no-thumbs .tn { display: none; } .tree .tn + .ico { display: none; } .tree.no-thumbs .tn + .ico { display: inline; } .tree .cstate { font-size: 12px; flex-shrink: 0; } .tree .cstate.comp { color: var(--info); } .tree .cstate.orig { color: var(--text-faint); font-size: 8px; } .cstate.noh { color: var(--accent); font-size: 14px; } /* the Notice of Hearing call-out in the panel (Shaun, 2026-09-12: "needs to be way more clear") */ .noh-box { border: 1px solid var(--info-border); background: var(--info-bg); border-radius: 8px; padding: 10px 12px; margin: 10px 0; } .noh-box .noh-head { font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .noh-box .noh-head .cstate.noh { font-size: 20px; } .noh-box .noh-toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); } .noh-box .noh-toggle input { width: 18px; height: 18px; margin: 0; cursor: pointer; } .noh-box .noh-toggle:has(input:checked) { border-color: var(--good); background: var(--good-bg, #e8f5e9); } .noh-box p.muted { margin: 8px 0 0; font-size: 12.5px; } .btn.oauth.danger { color: #b3261e; border-color: #e0b4b0; } .btn.oauth.danger:hover { background: #fbecea; } .tree .cstate.bad, .legend .cstate.bad { color: #d62828; font-size: 14px; font-weight: 700; } /* Shaun, 2026-09-12: red, not the emoji's yellow */ .tree ul.variants { margin: 0; } .tree .node.variant { cursor: default; font-size: 13px; color: var(--text-muted); } .tree .node.variant:hover { background: transparent; } .tree .node.variant .nm { font-style: italic; } .tree .folder > .node .nm { font-weight: 600; } .tree .node .fo { display: none; gap: 2px; } .tree .node:hover .fo { display: inline-flex; } .tree .node .fo button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0 4px; } .tree .node .fo button:hover { color: var(--text); } /* right-click / long-press menu on a file (Shaun, 2026-09-12) -- one flat list, no flyout submenus, so the same menu works the same way with a mouse or a finger. */ .ctx-menu { position: fixed; z-index: 90; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 4px; min-width: 210px; font-size: 14px; } .ctx-menu button { display: block; width: 100%; padding: 7px 10px; border: none; background: none; text-align: left; border-radius: 5px; cursor: pointer; color: var(--text); font: inherit; } .ctx-menu button:hover, .ctx-menu button:focus-visible { background: var(--surface-2); } .ctx-menu button:disabled { color: var(--text-faint); cursor: default; } .ctx-menu button:disabled:hover { background: none; } .ctx-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 2px; } .ctx-menu .ctx-label { padding: 5px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .ctx-menu button[data-act="close"] { text-align: center; color: var(--text-muted); } .ctx-menu button.danger { color: var(--bad); } .ctx-menu button.danger:hover { background: var(--bad-bg); } /* a menu row that opens the native colour picker instead of acting on click (the Book Builder's tab menu, Shaun, 2026-09-12) */ .ctx-menu label.ctx-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 5px; cursor: pointer; } .ctx-menu label.ctx-color:hover { background: var(--surface-2); } .ctx-menu label.ctx-color input[type="color"] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; cursor: pointer; background: none; } .dm-panel { position: sticky; top: 72px; padding: 14px 16px; } .dm-panel h3 { margin: 0 0 4px; word-break: break-word; } .dm-panel .form label { display: grid; gap: 4px; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; } .dm-panel .form input, .dm-panel .form select, .dm-panel .form textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); } .dm-panel .row.two { gap: 10px; } .dm-panel .row.two label { flex: 1; } .linklike.danger { color: var(--bad); } @media (max-width: 899px) { .dm-layout { grid-template-columns: 1fr; } .dm-panel { position: static; } } .warnbox { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 10px 14px; margin: 6px 0 12px; font-size: 13.5px; } .warnbox p { margin: 6px 0 8px; } #build-retention { font: inherit; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); } table.results tr.bad td { color: var(--bad); } #numbering { font: inherit; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); } .items .item.drop-before { box-shadow: 0 -3px 0 0 var(--accent); } .items .item.drop-after { box-shadow: 0 3px 0 0 var(--accent); } .items .fields { margin-top: 6px; gap: 10px; } .items .fields label { display: grid; gap: 2px; font-size: 13px; color: var(--text-muted); flex: 1; min-width: 160px; } .items .fields input { font: inherit; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--text); min-width: 0; } .foot { border-top: 1px solid var(--border); margin-top: 40px; padding: 20px 0 40px; color: var(--text-muted); font-size: 13px; } /* the order page: paper stays paper (the vendored builder carries its own inline CSS) */ body.orderpage { background: #f4f5f7; color: #1a1a1a; } .notice { background: #fff8e6; border-bottom: 1px solid #f0dfae; color: #5a4200; padding: 10px 20px; font-size: 13px; } .op-plain { white-space: pre-wrap; word-wrap: break-word; font: 14px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #fff; border: 1px solid #e0e3e7; padding: 20px; border-radius: 8px; } /* ---- breakpoints (the dashboard's three + the 560 wordmark rule) ----------- */ @media (max-width: 900px) { .wrap.wide { max-width: none; } /* tablet: four tabs + account still fit on one line */ .master-bar { padding: 0 12px; } .brand { margin-right: 10px; } .master-tab-btn { padding: 0 9px; gap: 6px; font-size: 13px; } .acct { gap: 8px; } .acct .btn { padding: 6px 10px; font-size: 13px; } .acct-btn .acct-name, .acct-btn .acct-flags { display: none; } /* the name and flags go; the person icon, gear and palette stay */ .acct-btn { padding: 0 10px; } } @media (max-width: 720px) { .form.two { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; } main { padding: 20px 16px 48px; } h1 { font-size: 23px; } } @media (max-width: 640px) { /* master bar collapses into a tap-to-open menu: [mark] [☰ current ▾] [account] */ .master-bar { flex-wrap: wrap; padding: 0 12px; align-items: center; } .brand { padding: 8px 12px 8px 0; margin-right: 0; } .master-tab-toggle { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; border: none; background: rgba(255,255,255,.1); color: var(--bar-fg-strong); cursor: pointer; border-radius: 7px; padding: 9px 12px; margin: 6px 0; font: inherit; font-size: 14px; font-weight: 700; } .master-tab-toggle .mtt-burger { color: var(--bar-fg); font-size: 15px; } .master-tab-toggle .mtt-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .master-tab-toggle .mtt-caret { color: var(--bar-fg); transition: transform .15s; } .master-tab-toggle[aria-expanded="true"] .mtt-caret { transform: rotate(180deg); } .master-bar .sp { display: none; } .master-bar .acct { margin-left: 8px; } .master-bar:not(.mopen) .master-tab-btn { display: none; } .master-bar.mopen .master-tab-btn { flex-basis: 100%; text-align: left; padding: 13px 14px; font-size: 14px; border-bottom: none; border-left: 3px solid transparent; } .master-bar.mopen .master-tab-btn.active { border-left-color: var(--bar-fg-strong); background: rgba(255,255,255,.06); } /* Shaun, 2026-09-12 (phone): with the menu open, the palette / gear / person icons become labelled rows in the same list, under a thin divider, instead of a stray icon row */ .master-bar.mopen .acct { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 4px 0 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.2); } .master-bar.mopen .acct > * { width: 100%; } .master-bar.mopen .skin, .master-bar.mopen .acctwrap { display: block; } .master-bar.mopen .skin-btn, .master-bar.mopen .gear-btn, .master-bar.mopen .acct-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--bar-fg-strong); border-left: 3px solid transparent; } .master-bar.mopen .skin-btn::after { content: "Look and feel"; } .master-bar.mopen .gear-btn::after { content: "Settings"; } .master-bar.mopen .acct-btn .acct-name { display: inline; } .master-bar.mopen .acct-btn .caret { margin-left: auto; } .master-bar.mopen .acct > a.btn, .master-bar.mopen .acct > a:not(.gear-btn) { display: block; margin: 6px 14px; text-align: center; } .acct .btn { padding: 6px 10px; font-size: 13px; } body { font-size: 16px; } .cards { grid-template-columns: 1fr; } .items .fields label { min-width: 100%; } .items .row > .linklike { padding: 6px 4px; } .searchbar { flex-wrap: wrap; } .searchbar .btn { flex: 1; } .oauth-row .btn-google, .oauth-row .btn-facebook { width: 100%; justify-content: center; } } @media (max-width: 560px) { /* icon-only brand on phones so the tab menu gets the width; the account name goes too (Sign out and the palette stay) */ .brand .wm { display: none; } .acct .btn { padding: 6px 8px; font-size: 12.5px; } /* the account and look-and-feel dropdowns: pinned to the viewport on a phone so they can never run off the left edge (Shaun, 2026-09-12, phone screenshot via Wren); this is the last rule for them, so it wins */ .acct-menu, .skin-menu { position: fixed; left: 8px; right: 8px; top: 58px; width: auto; min-width: 0; max-width: none; box-sizing: border-box; } } /* viewer zoom (Shaun, 2026-09-11): past 100 % the page is sized as a percentage of the frame and the frame scrolls; these come last so they beat the fit-to-frame and sideways rules above, including the phone-width ones */ .viewer-frame.zoomed { overflow: auto; display: block; } .viewer-frame.zoomed img, .viewer-frame.zoomed img.sideways { max-width: none; max-height: none; margin: 0 auto; } /* the "Added" confirmation (Shaun, 2026-09-12): a big green tick in a green ring, briefly, with the word in green */ #cb-toast { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 80; opacity: 0; transition: opacity .25s; } #cb-toast.show { opacity: 1; } #cb-toast.show .cb-toast-card { animation: cb-pop .35s cubic-bezier(.2,1.4,.4,1); } .cb-toast-card { background: var(--surface); border: 1px solid var(--good-border); border-radius: 18px; padding: 26px 34px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.28); } .cb-toast-ring { width: 110px; height: 110px; margin: 0 auto 10px; border-radius: 50%; border: 7px solid #1f9d3a; color: #1f9d3a; display: flex; align-items: center; justify-content: center; } .cb-toast-ring svg { width: 64px; height: 64px; } .cb-toast-text { font-size: 30px; font-weight: 800; color: #1f9d3a; letter-spacing: .01em; } .cb-toast-sub { margin-top: 4px; color: var(--text-muted); font-size: 14px; } @keyframes cb-pop { from { transform: scale(.6); } to { transform: scale(1); } }