/* PEGShare's look, from the "PEGShare Client Design" mockups (Miles, Sep 28, 2026).
   Light and dark themes: the system setting by default, or the choice from the theme button
   (html[data-theme], remembered in localStorage by pegshare/theme.js). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #edf1f7;
  --surface: #ffffff;
  --surface2: #f5f8fb;
  --ink: #132437;
  --ink2: #42566b;
  --muted: #6b7b91;
  --border: #e1e8f0;
  --line: #e9eef4;
  --field: #d8e0ea;
  --tint: #eaf1f9;
  --folder: #d9a441;
  --pdf: #c8372d;
  --accent: #13477a;
  --accent-text: #13477a;
  --on-accent: #ffffff;
  --banner: #fff4d6;
  --banner-border: #e8c766;
  --error: #b42318;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a121d;
    --surface: #101b29;
    --surface2: #152233;
    --ink: #e8eef6;
    --ink2: #b4c0d1;
    --muted: #8391a6;
    --border: #223247;
    --line: #1a2a3d;
    --field: #2e4560;
    --tint: #152b44;
    --folder: #e8c161;
    --pdf: #f08072;
    --accent: #2e6db4;
    --accent-text: #7db5ee;
    --banner: #3a3117;
    --banner-border: #7a6428;
    --error: #f97066;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a121d;
  --surface: #101b29;
  --surface2: #152233;
  --ink: #e8eef6;
  --ink2: #b4c0d1;
  --muted: #8391a6;
  --border: #223247;
  --line: #1a2a3d;
  --field: #2e4560;
  --tint: #152b44;
  --folder: #e8c161;
  --pdf: #f08072;
  --accent: #2e6db4;
  --accent-text: #7db5ee;
  --banner: #3a3117;
  --banner-border: #7a6428;
  --error: #f97066;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent-text); }
h1 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; }
h2 { margin: 0; font-size: 16px; font-weight: 600; }
p { margin: 0; }
input, select, button { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.muted { color: var(--ink2); }
.error { color: var(--error); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar */
.top { height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 600; }
.logo { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.top .spacer { flex-grow: 1; }

/* Top bar search with suggestions (typeahead.js) */
.searchwrap { position: relative; flex: 1 1 auto; min-width: 0; max-width: 620px; margin: 0 auto; }
.searchbox { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 10px; background: var(--surface2); color: var(--ink2); font-weight: 400; }
.searchbox:focus-within { border-color: var(--accent-text); background: var(--surface); }
.searchbox input:not([type=checkbox]) { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; outline: none; color: var(--ink); }
.kbd { font-size: 11px; font-weight: 500; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); }
.suggest { position: absolute; left: 0; right: 0; top: 50px; z-index: 30; max-height: min(70vh, 560px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(10, 18, 29, 0.18); }
.sgroup { padding: 6px 6px 8px; }
.sgroup + .sgroup { border-top: 1px solid var(--line); }
.sgroup h3 { margin: 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink2); }
.sitem { display: flex; flex-direction: column; min-height: 40px; justify-content: center; padding: 4px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.sitem:hover, .sitem.active { background: var(--tint); }
.sitem strong { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem > span { font-size: 12px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem .close-match { margin-left: 6px; padding: 0 7px; border: 1px dashed var(--field); border-radius: 99px; color: var(--ink2); font-size: 11px; font-weight: 500; }
.smore { padding: 2px 8px; font-size: 12px; color: var(--ink2); }
.suggest-empty { padding: 16px 14px; font-size: 14px; color: var(--ink2); }
.suggest-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.icon-button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--ink2); cursor: pointer; padding: 0; }
.icon-button.bare { border: 0; background: transparent; }
.icon-button.bare:hover { background: var(--surface2); color: var(--ink); }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

.account { position: relative; }
.account summary { list-style: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px; border-radius: 99px; background: var(--surface2); cursor: pointer; }
.account summary::-webkit-details-marker { display: none; }
.avatar { width: 32px; height: 32px; border-radius: 16px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.account-name { line-height: 1.25; text-align: left; }
.account-name strong { display: block; font-size: 14px; font-weight: 600; }
.account-name span { display: block; font-size: 12px; color: var(--ink2); }
.account-menu { position: absolute; right: 0; top: 52px; z-index: 10; min-width: 220px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(10, 18, 29, 0.14); }
.account-menu a, .account-menu button { display: flex; width: 100%; min-height: 40px; align-items: center; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 14px; text-decoration: none; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--surface2); }
.account-menu form { margin: 0; }

.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; background: var(--banner); border-bottom: 1px solid var(--banner-border); font-size: 14px; }
.banner form { margin: 0; }

/* Page */
main { max-width: 1240px; margin: 0 auto; padding: 28px 40px 48px; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; align-items: center; gap: 14px; }
.page-head > div { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.page-head .sub { font-size: 14px; color: var(--ink2); }

.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.messages li { padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.messages li.warning { border-color: var(--banner-border); background: var(--banner); }

/* Controls */
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
select, input:not([type=checkbox]) { height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 400; }
select:disabled { color: var(--muted); background: var(--surface2); }
input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.button { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.button.small { height: 40px; padding: 0 16px; }
.button.link { height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--accent-text); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 16px; align-items: end; padding: 20px; }
.filters .wide { grid-column: 1 / -1; }
.filters .hint { font-size: 13px; font-weight: 400; color: var(--muted); }

#results { display: flex; flex-direction: column; gap: 20px; }

/* Selection bar (zip) */
.selbar { min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 8px 6px 20px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.selbar.has-sel { background: var(--tint); border-color: var(--tint); }
.selbar .grow { flex-grow: 1; }
.selbar .when-sel { display: none; }
.selbar.has-sel .when-sel { display: inline-flex; }
.selbar.has-sel .when-none { display: none; }
.selbar .count { font-size: 14px; font-weight: 600; }
.selbar .hint { font-size: 14px; color: var(--ink2); }

/* Result groups: community › lot */
.group { overflow: hidden; }
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px; background: var(--surface2); }
.group-head .sep { color: var(--muted); font-weight: 400; }
.group-head .meta { font-size: 13px; color: var(--ink2); }
.folder-icon { color: var(--folder); }
.cols, .row { display: grid; grid-template-columns: 28px minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) 130px 44px; gap: 16px; align-items: center; padding: 0 20px; }
.cols { height: 40px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink2); }
.row { min-height: 60px; border-top: 1px solid var(--line); font-size: 14px; }
.row:has(input:checked) { background: var(--tint); }
.row .cell { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; }
.row > .meta-small { display: none; }
.file { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.file .name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file .name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file .name span { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file:hover strong { text-decoration: underline; }
.doc-icon .page { fill: var(--surface); stroke: var(--pdf); }
.doc-icon text { fill: var(--pdf); }

/* Folders (browse.html): the left tree, breadcrumbs, and the division, community, building, lot and folder lists */
main:has(.browse) { max-width: 1440px; }
.browse { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 32px; align-items: start; }
.browse-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tree { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.tree nav { display: flex; flex-direction: column; gap: 2px; }
.tree-title { padding: 0 10px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); }
.tree a { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; color: var(--ink); font-size: 14px; text-decoration: none; }
.tree a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree a:hover { background: var(--surface2); }
.tree a[aria-current="page"] { background: var(--tint); color: var(--accent-text); font-weight: 600; }
.tree .depth-0 { padding-left: 4px; }
.tree .depth-1 { padding-left: 18px; }
.tree .depth-2 { padding-left: 32px; }
.tree .depth-3 { padding-left: 46px; }
.tree .depth-4 { padding-left: 60px; }
.tree .depth-5 { padding-left: 74px; }
.tree a .twist { width: 16px; flex-shrink: 0; display: flex; color: var(--muted); }
.tree a .twist svg { width: 14px; height: 14px; transition: transform 0.12s; }
.tree a.open .twist svg { transform: rotate(90deg); }
.tree a .l { flex: 1 1 auto; min-width: 0; }
.tree a .c { flex-shrink: 0; overflow: visible; padding-left: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.building-icon { color: var(--accent-text); }
.division-icon { color: var(--ink2); }

/* "Show" chips: folder types, each with its count in the page's scope */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
.filterbar .lbl { min-width: 44px; font-size: 13px; color: var(--ink2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--field); border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--accent-text); }
.chip .n { font-variant-numeric: tabular-nums; color: var(--ink2); font-weight: 400; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip.on .n { color: var(--on-accent); opacity: 0.85; }
.tree-more { padding-top: 12px; border-top: 1px solid var(--border); }
.tree-help { padding: 0 10px; font-size: 13px; color: var(--ink2); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--ink2); }
.actions .grow { flex-grow: 1; }
.actions form, .trow form { margin: 0; }
.hint { font-size: 14px; color: var(--ink2); }
.sectionlabel { margin-bottom: -8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.browse-main .note { margin: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); font-size: 14px; color: var(--ink2); }
.browse-main .note a { color: var(--accent-text); font-weight: 600; }

.recent h2 { margin-bottom: 10px; font-size: 14px; color: var(--ink2); }
.recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.recent-item { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.recent-item .name, .name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-item .name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-item .name span, .name-text span { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-item:hover strong { text-decoration: underline; }

.table { overflow: hidden; }
.thead, .trow { display: grid; gap: 16px; align-items: center; padding: 0 20px; }
.thead { height: 44px; background: var(--surface2); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink2); }
.trow { min-height: 56px; border-top: 1px solid var(--line); font-size: 14px; }
.trow:hover { background: var(--surface2); }
.trow .name { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.trow .name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .name:hover strong { text-decoration: underline; }
.trow .cell { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow > .meta-small { display: none; }
.num { text-align: right; }
.divisions .thead, .divisions .trow { grid-template-columns: minmax(0, 2.4fr) 120px 80px 110px 130px; }
.division-communities .thead, .division-communities .trow, .buildings .thead, .buildings .trow { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 110px 130px; }
.lots .thead, .lots .trow { grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) 110px 130px; }
.folders .thead, .folders .trow { grid-template-columns: minmax(0, 1fr) 110px 130px 44px; }
.folders .trow { min-height: 64px; }
.files .cols, .files .row { grid-template-columns: 28px minmax(0, 1fr) 130px 44px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 56px; padding: 6px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.pager .grow { flex-grow: 1; }

.empty { padding: 40px 24px; text-align: center; color: var(--ink2); }
.empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; font-weight: 600; }

/* Document preview (preview.html): a toolbar, the pages on a dark stage, details on the right */
.viewer { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.vbar { min-height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.vback { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-size: 14px; text-decoration: none; white-space: nowrap; }
.vback:hover { background: var(--surface2); }
.vsep { width: 1px; height: 28px; flex-shrink: 0; background: var(--border); }
.vtitle { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.vtitle h1 { font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtitle span { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vgroup { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink2); white-space: nowrap; }
.vgroup[hidden] { display: none; }
.vgroup .icon-button { color: var(--ink); }
.vgroup .off { opacity: 0.35; cursor: default; }
.vlevel { min-width: 44px; text-align: center; }
.vbody { flex-grow: 1; display: flex; min-height: 0; }
.vstage { flex-grow: 1; min-width: 0; overflow: auto; background: #3b4250; }
:root[data-theme="dark"] .vstage { background: #05090f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vstage { background: #05090f; } }
.vpages { width: max-content; min-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; }
.vpage { flex-shrink: 0; background: #ffffff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
.vpage canvas { display: block; width: 100%; height: 100%; }
.vstatus { padding: 48px 24px; text-align: center; color: #dbe2ee; }
.vnote { max-width: 440px; margin: 48px auto; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vnote[hidden] { display: none; }
.vnote strong { font-size: 16px; font-weight: 600; }
.vnote p { color: var(--ink2); font-size: 14px; }
.vnote .button { margin-top: 6px; }
.vside { width: 360px; flex-shrink: 0; overflow: auto; display: flex; flex-direction: column; gap: 24px; padding: 24px; background: var(--surface); border-left: 1px solid var(--border); }
.vside section { display: flex; flex-direction: column; gap: 12px; }
.vside section + section { padding-top: 24px; border-top: 1px solid var(--border); }
.vside h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); }
.vdetails { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.vdetails dt { color: var(--ink2); }
.vdetails dd { margin: 0; overflow-wrap: anywhere; }
.vothers { display: flex; flex-direction: column; gap: 2px; }
.vothers a { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.vothers a:hover { background: var(--surface2); }
.vothers strong { font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Narrow cards (view as, sign-in problem) */
.narrow { width: 100%; max-width: 480px; margin: 24px auto; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.narrow form { display: flex; flex-direction: column; gap: 16px; }

/* Sign in */
.signin { min-height: 100vh; display: flex; }
.signin .hero { width: 560px; flex-shrink: 0; padding: 56px 64px; display: flex; flex-direction: column; gap: 40px; color: #ffffff; background: linear-gradient(rgba(13, 49, 89, 0.86), rgba(13, 49, 89, 0.96)), #13477a; }
.signin .hero .brand { color: #ffffff; font-size: 22px; }
.signin .hero .logo { width: 48px; height: 48px; border-radius: 10px; background: #ffffff; color: #13477a; font-size: 15px; }
.signin .pitch { margin-top: 96px; display: flex; flex-direction: column; gap: 28px; }
.signin .pitch h1 { font-size: 40px; line-height: 1.15; }
.signin .pitch ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; font-size: 16px; color: #dbe2ee; }
.signin .pitch li { display: flex; gap: 12px; align-items: center; }
.signin .note { margin-top: auto; padding: 16px 18px; border-radius: 10px; background: #0d3159; font-size: 14px; line-height: 1.5; color: #dbe2ee; }
.signin .panel { flex-grow: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 88px 24px 48px; }
.signin .panel .theme-toggle { position: absolute; top: 24px; right: 24px; }
.signin form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.signin .intro { display: flex; flex-direction: column; gap: 6px; }
.signin .intro p { font-size: 15px; color: var(--ink2); }
.signin .help { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink2); }
.signin .button.primary { height: 48px; font-size: 15px; }

@media (max-width: 1080px) {
  .signin .hero { width: 420px; padding: 40px; }
  .signin .pitch { margin-top: 48px; }
  .signin .pitch h1 { font-size: 32px; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The breadcrumbs carry the navigation when there's no room for the tree. */
  .browse { grid-template-columns: minmax(0, 1fr); }
  .tree { display: none; }
  /* Preview: the page scrolls as a whole, the stage first and the details below it. */
  .viewer { height: auto; min-height: 100vh; }
  .vbar { position: sticky; top: 0; z-index: 5; flex-wrap: wrap; padding: 8px 12px; }
  .vbody { flex-direction: column; }
  .vstage { height: 75vh; height: 75dvh; flex-grow: 0; }
  .vside { width: auto; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .top { padding: 0 16px; gap: 10px; }
  .kbd { display: none; }
  .brand .word, .account-name { display: none; }
  main { padding: 20px 16px 40px; }
  h1 { font-size: 24px; }
  .filters { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .signin { flex-direction: column; }
  .signin .hero { width: auto; padding: 24px 16px; gap: 20px; }
  .signin .pitch { margin-top: 0; gap: 16px; }
  .signin .pitch h1 { font-size: 24px; }
  .signin .pitch ul, .signin .note { display: none; }
  .signin .panel { padding: 72px 16px 40px; align-items: flex-start; }
  .cols { display: none; }
  .row { grid-template-columns: 28px minmax(0, 1fr) 44px; grid-template-areas: "check file dl" ". meta meta"; row-gap: 2px; padding: 10px 16px; }
  .row > input { grid-area: check; }
  .row > .file { grid-area: file; }
  .row > .icon-button { grid-area: dl; }
  .row > .cell { display: none; }
  .row > .meta-small { grid-area: meta; display: block; font-size: 12px; color: var(--ink2); }
  .group-head { padding: 8px 16px; }
  .files .row { grid-template-columns: 28px minmax(0, 1fr) 44px; }
  .thead { display: none; }
  .table .trow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 10px 16px; }
  .trow > .cell { display: none; }
  .trow > .meta-small { display: block; grid-column: 1; padding-left: 34px; font-size: 12px; color: var(--ink2); }
  .pager { padding: 6px 16px; }
  .vbar { gap: 6px; }
  .vback span, .vbar > .vsep, .vbar > .doc-icon, .vcount-long, .vdownload span, .vbar > .theme-toggle, .vclose { display: none; }
  .vback { padding: 0 8px; }
  .vtitle { order: -1; flex-basis: 100%; padding: 2px 4px 4px; }
  .vdownload { margin-left: auto; padding: 0 12px; }
}