* { box-sizing: border-box; }

:root {
  --home-bg: #faf9f5;
  --home-surface: #ffffff;
  --home-surface-sunken: #f4f2ec;
  --home-sidebar: #f7f6f1;
  --home-border: #e4e2d8;
  --home-text: #17181b;
  --home-text-2: #45494f;
  --home-muted: #6b7079;
  --home-accent: #9c4a21;
  --home-accent-hover: #7d3a19;
  --home-accent-soft: #f4ebe4;
  --home-accent-border: #c6bfb4;
  --home-accent-contrast: #ffffff;
  --home-accent-on-soft: #7d3a19;
  --home-error: #8c3a2c;
  --home-error-soft: #f7e9e5;
  --home-error-border: #e6cdc6;
  --font-sans: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif: 'Source Serif 4', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

:root[data-theme="dark"] {
  --home-bg: #000000;
  --home-surface: #0e0e12;
  --home-surface-sunken: #000000;
  --home-sidebar: #0a0a0a;
  --home-border: #54545f;
  --home-text: #f0f0fa;
  --home-text-2: #c7c7d1;
  --home-muted: #8a8a96;
  --home-accent: #ff4d00;
  --home-accent-hover: #cc3d00;
  --home-accent-soft: #2a1206;
  --home-accent-border: #8a4322;
  --home-accent-contrast: #0a0a0a;
  --home-accent-on-soft: #ff4d00;
  --home-error: #ff5c4d;
  --home-error-soft: #2a0e0b;
  --home-error-border: #5c1f16;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --home-bg: #000000;
    --home-surface: #0e0e12;
    --home-surface-sunken: #000000;
    --home-sidebar: #0a0a0a;
    --home-border: #54545f;
    --home-text: #f0f0fa;
    --home-text-2: #c7c7d1;
    --home-muted: #8a8a96;
    --home-accent: #ff4d00;
    --home-accent-hover: #cc3d00;
    --home-accent-soft: #2a1206;
    --home-accent-border: #8a4322;
    --home-accent-contrast: #0a0a0a;
    --home-accent-on-soft: #ff4d00;
    --home-error: #ff5c4d;
    --home-error-soft: #2a0e0b;
    --home-error-border: #5c1f16;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background: var(--home-bg);
  color: var(--home-text);
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* ---- App shell: persistent left sidebar + scrolling content column,
   the same shape as every authenticated screen in the DocFox design.
   Mounted by sidebar.js on every page except landing.html (pre-auth,
   has no shell to show). ---- */
.app-sidebar {
  width: 216px;
  flex: none;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--home-sidebar);
  border-right: 1px solid var(--home-border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px 12px;
  transition: width 0.15s ease;
}
/* Collapsed: the same icon-only rail as the document workspace in the
   design (TDoc/Diff screens) — width down to just the icons, text
   labels and the recent-searches list hidden rather than trying to
   cram them into 56px. */
.app-sidebar.collapsed { width: 56px; padding: 16px 8px 12px; }

.sidebar-brand-row { display: flex; align-items: center; gap: 4px; padding: 2px 8px 18px; }
.app-sidebar.collapsed .sidebar-brand-row { flex-direction: column; gap: 10px; padding: 2px 0 16px; }
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
  color: var(--home-text);
  text-decoration: none;
}
.sidebar-brand-lockup { height: 60px; width: auto; display: block; }
/* `img.` (not just `.`) on every rule below: these theme-toggle rules
   must always outrank any plain single-class sizing rule (e.g.
   .landing-brand-lockup) regardless of where that rule sits in the
   file, or a same-specificity/later-wins accident hides the wrong
   variant — bit us once already on the landing-page lockup. */
img.sidebar-brand-lockup-dark { display: none; }
:root[data-theme="dark"] img.sidebar-brand-lockup-light { display: none; }
:root[data-theme="dark"] img.sidebar-brand-lockup-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.sidebar-brand-lockup-light { display: none; }
  :root:not([data-theme="light"]) img.sidebar-brand-lockup-dark { display: block; }
}
.sidebar-brand-mark { display: none; width: 36px; height: 36px; border-radius: 7px; flex: none; }
.app-sidebar.collapsed img.sidebar-brand-lockup-light,
.app-sidebar.collapsed img.sidebar-brand-lockup-dark { display: none; }
.app-sidebar.collapsed .sidebar-brand-mark { display: block; }
.app-sidebar.collapsed .sidebar-brand { flex: none; }

.sidebar-collapse-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--home-muted);
  cursor: pointer;
}
.sidebar-collapse-btn:hover { background: var(--home-surface-sunken); color: var(--home-text); }
.sidebar-collapse-btn svg { transition: transform 0.15s ease; }
.app-sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--home-text-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.sidebar-nav-item svg { flex-shrink: 0; }
.sidebar-nav-item:hover { background: var(--home-surface-sunken); }
.sidebar-nav-item.active {
  background: var(--home-accent-soft);
  color: var(--home-accent-hover);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--home-accent);
}
.app-sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: 8px 0; }
.app-sidebar.collapsed .sidebar-nav-item span { display: none; }

.sidebar-recent { margin-top: 22px; padding: 0 2px; }
.sidebar-recent[hidden] { display: none; }
.app-sidebar.collapsed .sidebar-recent { display: none; }
.sidebar-recent-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-muted);
  padding: 0 8px 7px;
}
.sidebar-recent-item {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--home-text-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-recent-item:hover { background: var(--home-surface-sunken); color: var(--home-text); }
.sidebar-spacer { flex: 1; }
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 2px;
  margin-top: 8px;
  border-top: 1px solid var(--home-border);
}
.app-sidebar.collapsed .sidebar-profile { flex-direction: column; gap: 8px; padding: 10px 0 2px; }
.sidebar-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #2f3742;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-profile-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar.collapsed .sidebar-profile-name { display: none; }
.sidebar-signout, .sidebar-theme-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--home-text-2);
  cursor: pointer;
}
.sidebar-signout:hover, .sidebar-theme-toggle:hover { background: var(--home-surface-sunken); border-color: var(--home-accent-border); }

.app-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Search's two-pane list/preview layout manages its own inner scrolling
   (each pane scrolls independently), which is what the flex column +
   the base `main{flex:1;min-height:0}` rule below are for. The plain
   single-column pages (home, account, bookmarks, admin) don't want any
   of that: as flex items, header/main/footer would be squeezed to fit
   the viewport height with overflow staying visible, so a `main` taller
   than its shrunk box overlapped the footer instead of pushing it down.
   Plain block flow sizes each one to its real content instead, and the
   whole column scrolls as one piece. */
.app-content.app-content-scroll { display: block; overflow-y: auto; }

.page-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

header {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid var(--home-border);
  background: var(--home-surface);
}

header h1 {
  font-size: 16px;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--home-accent);
  text-decoration: none;
}
.home-link:hover { color: var(--home-accent-hover); text-decoration: underline; }
.home-link-icon { display: flex; flex-shrink: 0; }

.searchbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.searchbar input, .searchbar select, .searchbar button {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  color: var(--home-text);
  font-family: inherit;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 13px;
}

.searchbar select:disabled { opacity: 0.5; cursor: not-allowed; }

#q { flex: 1; min-width: 200px; }
#source { width: 140px; }

.searchbar button.secondary {
  background: var(--home-surface);
  border-color: var(--home-border);
  color: var(--home-text);
}
.searchbar button.secondary:hover { background: var(--home-surface-sunken); border-color: var(--home-accent-border); }

.searchbar button {
  background: var(--home-accent);
  border-color: var(--home-accent);
  cursor: pointer;
  font-weight: 600;
  color: var(--home-accent-contrast);
}

.searchbar button:hover { background: var(--home-accent-hover); border-color: var(--home-accent-hover); }

main {
  flex: 1;
  display: flex;
  min-height: 0;
}

#listPane {
  width: 50%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Draggable divider between the two panes. A fixed 5px visual/hit
   width rather than a wider invisible grab zone overlapping the panes
   either side — that trick widens the target but also eats a sliver of
   normal clicks/scrolling right along the boundary, which isn't worth
   it for a bar this easy to aim at already. */
.pane-resizer {
  flex: none;
  width: 5px;
  cursor: col-resize;
  background: var(--home-border);
  transition: background 0.1s ease;
}
.pane-resizer:hover,
.pane-resizer:focus-visible,
.pane-resizer.dragging {
  background: var(--home-accent);
  outline: none;
}
/* While actively dragging: the PDF preview is an <iframe> — its own
   document would otherwise capture mousemove/mouseup once the cursor
   crosses into it, silently ending the drag. Disabling its pointer
   events for the duration routes every drag event to the page instead. */
body.resizing-panes { cursor: col-resize; user-select: none; }
body.resizing-panes .pdfv-frame { pointer-events: none; }

#listMeta {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--home-muted);
}

/* CSS Grid, not an HTML <table> — a table split into per-row
   display:table blocks (needed so only the body scrolls, header stays
   put) computes each row's column widths independently, so the header
   and every body row can each land on different column boundaries.
   Grid uses one shared column template for the header and every row,
   so they're always aligned regardless of content length. */
#resultsTable {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-size: 13px;
}

.results-grid-row {
  display: grid;
  grid-template-columns: 28px 100px 1fr 110px 70px 85px;
  column-gap: 8px;
}

.results-header {
  padding: 7px 8px;
  color: var(--home-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--home-surface-sunken);
  border-bottom: 1px solid var(--home-border);
}

#resultsBody {
  flex: 1;
  overflow-y: auto;
}

.result-row {
  padding: 6px 8px;
  border-bottom: 1px solid var(--home-border);
  cursor: pointer;
}
.result-row > div { overflow-wrap: break-word; min-width: 0; }
/* Titles are the one column long enough to wrap to three or four lines
   and make the rows wildly uneven, so they clip to one line with an
   ellipsis. The full text stays reachable via the cell's title
   attribute (set in renderResults) and in the preview pane. */
.result-row > .result-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-row:hover { background: var(--home-surface-sunken); }
.result-row.selected { background: var(--home-accent-soft); }

.tdoc-id { color: var(--home-accent); font-family: var(--font-mono); font-weight: 500; }
.status-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  background: var(--home-surface-sunken);
  color: var(--home-muted);
}

#pager {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--home-border);
  font-size: 12px;
}

#pager button {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  color: var(--home-text);
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}
#pager button:hover:not(:disabled) { background: var(--home-surface-sunken); border-color: var(--home-accent-border); }
#pager button:disabled { opacity: 0.4; cursor: default; }

#compareBtn {
  margin: 8px 12px;
  padding: 6px 10px;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  color: var(--home-text);
  font-family: inherit;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}
#compareBtn:hover:not(:disabled) { background: var(--home-surface-sunken); border-color: var(--home-accent-border); }
#compareBtn:disabled { opacity: 0.4; cursor: default; }

#previewPane {
  flex: 1;
  min-width: 280px;
  overflow-y: auto;
  padding: 16px;
}

#previewEmpty { color: var(--home-muted); font-size: 13px; margin-top: 40px; text-align: center; }

.detail-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.detail-meta { font-size: 12px; color: var(--home-muted); margin-bottom: 12px; line-height: 1.7; }
.detail-meta b { color: var(--home-text); font-weight: 600; }
.detail-actions { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-actions a {
  color: var(--home-accent-contrast);
  background: var(--home-accent);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}
.detail-actions a:hover { background: var(--home-accent-hover); }
.bookmark-toggle-btn,
.revoke-token,
.revoke-sessions,
.toggle-mcp-access,
.toggle-status,
.remove-bookmark {
  color: var(--home-text);
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  font-family: inherit;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.bookmark-toggle-btn:hover,
.revoke-token:hover,
.revoke-sessions:hover,
.toggle-mcp-access:hover,
.toggle-status:hover,
.remove-bookmark:hover { background: var(--home-surface-sunken); border-color: var(--home-accent-border); }

/* Segmented Original/Diff control (DocFox's mode-toggle track) — two
   real buttons, both always visible, the active one raised on a white
   pill. Replaces a single button whose label used to swap between
   "Diff" and "View". */
.mode-toggle {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--home-border);
  border-radius: 6px;
  background: var(--home-surface-sunken);
}
.mode-toggle-seg {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--home-muted);
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.mode-toggle-seg:hover { color: var(--home-text); }
.mode-toggle-seg.is-active {
  background: var(--home-surface);
  color: var(--home-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(23, 24, 27, 0.08);
}
.mode-toggle-seg:disabled { opacity: 0.65; cursor: default; }
.diff-error {
  margin-top: 8px;
  color: var(--home-error);
  background: var(--home-error-soft);
  border: 1px solid var(--home-error-border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 12px;
  font-style: normal;
}
.detail-text {
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 5px;
  padding: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.no-text { color: var(--home-muted); font-size: 13px; }

.pdfv-frame {
  width: 100%;
  height: 65vh;
  border: 1px solid var(--home-border);
  border-radius: 5px;
  background: var(--home-surface);
}

.admin-main { padding: 20px; max-width: 720px; margin: 0 auto; }
.admin-section { margin-bottom: 28px; }
.admin-section h2 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; margin: 0 0 10px 0; }
.admin-create-form { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-create-form input {
  border: 1px solid var(--home-border);
  border-radius: 5px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
}
.admin-create-form button {
  background: var(--home-accent);
  color: var(--home-accent-contrast);
  border: none;
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
}
.admin-create-form button:hover { background: var(--home-accent-hover); }
.admin-error { color: var(--home-error); font-size: 13px; margin-top: 8px; }
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-users-table thead th {
  color: var(--home-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--home-surface-sunken);
}
.admin-users-table th, .admin-users-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--home-border);
}
.admin-users-table td .tdoc-id { font-weight: 500; }
.account-hint { color: var(--home-muted); font-size: 13px; line-height: 1.6; max-width: 520px; }
#newTokenBtn {
  background: var(--home-accent);
  color: var(--home-accent-contrast);
  border: none;
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
}
#newTokenBtn:hover { background: var(--home-accent-hover); }
.account-token-box {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--home-accent-soft);
  border: 1px solid var(--home-accent-border);
  border-radius: 6px;
}
.account-token-warning { color: var(--home-error); font-size: 12px; margin-bottom: 6px; }
.account-token-box code {
  font-family: var(--font-mono);
  word-break: break-all;
  font-size: 12.5px;
}
.account-token-box-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-token-box-row code { flex: 1; min-width: 0; }
.copy-btn {
  background: var(--home-surface);
  color: var(--home-text);
  border: 1px solid var(--home-border);
  border-radius: 5px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.copy-btn:hover { background: var(--home-surface); border-color: var(--home-accent-border); }
.account-feature-list {
  margin: 10px 0 0 0;
  padding-left: 18px;
  max-width: 520px;
  color: var(--home-muted);
  font-size: 13px;
  line-height: 1.7;
}

.meeting-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.meeting-toolbar[hidden] { display: none; }
.meeting-toolbar label { font-size: 12px; color: var(--home-muted); }
.meeting-toolbar input[type="text"] {
  width: 190px;
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--home-border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px;
}
.agenda-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Reads as a label but behaves as the dropdown trigger it is, which is
   why it carries the caret and a hover state rather than being plain
   text next to the "+" button. */
.agenda-filter-label-btn {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--home-muted);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.agenda-filter-label-btn:hover { color: var(--home-text); }
/* Wraps rather than scrolls: a long selection pushes the toolbar taller
   instead of hiding chips off the end of the row, so every active
   filter stays visible and removable. */
.agenda-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.agenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--home-accent-border);
  border-radius: 3px;
  background: var(--home-accent-soft);
  color: var(--home-accent-hover);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.agenda-chip-x {
  border: none;
  background: none;
  color: var(--home-accent-hover);
  opacity: 0.7;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}
.agenda-chip-x:hover { opacity: 1; }
.agenda-add-btn {
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  color: var(--home-text);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 3px 8px;
  flex-shrink: 0;
}
.agenda-add-btn:hover { background: var(--home-surface-sunken); border-color: var(--home-accent-border); }
.agenda-filter-btn:hover { background: var(--home-surface-sunken); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 24, 27, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 8px;
  width: min(640px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(23, 24, 27, 0.16);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--home-border);
}
.modal-header h2 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; margin: 0; }
.modal-header-actions { display: flex; gap: 8px; }
.icon-btn {
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
}
.icon-btn:hover { background: var(--home-surface-sunken); }
#agendaModalConfirm { color: #1c5b41; }
#agendaModalClose { color: var(--home-error); }
.modal-list { overflow-y: auto; padding: 6px 0; }
.agenda-modal-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
}
.agenda-modal-row:hover { background: var(--home-surface-sunken); }
.agenda-modal-item { font-family: var(--font-mono); font-weight: 600; flex-shrink: 0; }
.agenda-modal-desc { color: var(--home-muted); flex: 1; min-width: 0; }
.agenda-modal-count { color: var(--home-muted); font-family: var(--font-mono); flex-shrink: 0; }

.compare-grid { display: flex; gap: 12px; }
.compare-col { flex: 1; min-width: 0; background: var(--home-surface); border: 1px solid var(--home-border); border-radius: 6px; padding: 10px; }

/* --- Homepage: same light theme as the search page above (shared
   :root tokens at the top of this file), plus the row-list layout —
   hero, stats strip, popular searches, Upcoming/Previous columns — that
   don't exist on the search page. Structural ideas here are inspired by
   a reference screenshot the user shared of a similar tool; the copy,
   stats, and brand name are all our own, not copied. --- */

/* landing.html is the one page with no app shell (pre-auth, nothing to
   put in a sidebar yet) — it opts out of the base body's sidebar-row
   layout and scrolls as a plain single column instead. Every other
   page's content lives in the shared .app-content(-scroll) wrapper
   (app shell, above), which the base `body{display:flex}` rule already
   fits without an override. */
body.landing {
  display: block;
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
}

.home-header {
  /* .home-header is still a <header> element, so it inherits the base
     `header { border-bottom; padding }` above — reset here since the
     hero has its own internal padding and the topbar owns its own
     border instead. */
  padding: 0;
  border-bottom: none;
}

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--home-border);
}

.brand { display: flex; align-items: center; gap: 10px; }
.landing-brand-lockup { height: 66px; width: auto; display: block; }

/* The textured backdrop behind the sign-in card: a faint graph-paper
   grid plus a soft heat-colored glow. Landing-only — nowhere else in
   the app uses this, so the pattern lives scoped here rather than as
   new global tokens. */
.landing-stage {
  padding: 64px 24px 60px;
  background-image:
    linear-gradient(rgba(10, 10, 15, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 15, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
}
:root[data-theme="dark"] .landing-stage {
  background-image:
    linear-gradient(rgba(240, 240, 250, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 240, 250, 0.05) 1px, transparent 1px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-stage {
    background-image:
      linear-gradient(rgba(240, 240, 250, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(240, 240, 250, 0.05) 1px, transparent 1px);
  }
}

.landing-hero-wrap { position: relative; max-width: 620px; margin: 0 auto; }

.landing-ghost-card {
  position: absolute;
  inset: 0;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 16px;
}
.landing-ghost-card-1 { transform: translate(16px, -14px); z-index: 1; }
.landing-ghost-card-2 { transform: translate(-16px, 14px); z-index: 0; opacity: 0.6; }

.landing-hero-card {
  position: relative;
  z-index: 2;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 16px;
  box-shadow: 0 0 130px 34px rgba(255, 77, 0, 0.16);
}

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 24px 8px;
  text-align: center;
}
.landing-hero-card.hero { padding: 40px 36px 32px; }
.landing-hero-card .eyebrow { margin-bottom: 8px; }
.landing-hero-card h1 { margin-bottom: 8px; }
.landing-hero-card .tagline { margin-bottom: 14px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--home-muted);
}

.hero h1 {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--home-text);
}
.hero h1 em { color: var(--home-accent); font-style: italic; }

.tagline {
  margin: 0 0 26px;
  color: var(--home-muted);
  font-size: 15px;
}

.hero-search {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto;
}

.hero-search input {
  flex: 1;
  background: var(--home-surface);
  border: 1px solid var(--home-accent-border);
  color: var(--home-text);
  font-family: inherit;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.hero-search button {
  background: var(--home-accent);
  border: 1px solid var(--home-accent);
  color: var(--home-accent-contrast);
  font-family: inherit;
  padding: 13px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hero-search button:hover { background: var(--home-accent-hover); border-color: var(--home-accent-hover); }

.landing-auth-card {
  margin: 16px auto 0;
  max-width: 340px;
  background: var(--home-surface-sunken);
  border: 1px solid var(--home-border);
  border-radius: 12px;
  padding: 14px 22px 12px;
  text-align: left;
}

.landing-auth-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.landing-auth-label svg { flex-shrink: 0; }

.landing-login-form { display: flex; flex-direction: column; gap: 8px; }

.landing-input-wrap { position: relative; display: flex; align-items: center; }
.landing-input-icon {
  position: absolute;
  left: 12px;
  color: var(--home-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.landing-login-form input {
  width: 100%;
  background: var(--home-surface);
  border: 1px solid var(--home-accent-border);
  color: var(--home-text);
  font-family: inherit;
  padding: 11px 14px 11px 36px;
  border-radius: 8px;
  font-size: 14px;
}
.landing-login-form input[name="password"] { padding-right: 38px; }

.landing-password-toggle {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 4px;
  color: var(--home-muted);
  cursor: pointer;
}
.landing-password-toggle:hover { color: var(--home-text); }

.landing-submit {
  margin-top: 4px;
  width: 100%;
  background: var(--home-accent);
  border: 1px solid var(--home-accent);
  color: var(--home-accent-contrast);
  font-family: inherit;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.landing-submit:hover { background: var(--home-accent-hover); border-color: var(--home-accent-hover); }

.landing-login-error { margin: 10px 0 0; color: var(--home-error); font-size: 13px; text-align: center; }
.landing-auth-note { margin: 8px 0 0; color: var(--home-muted); font-size: 12px; text-align: center; }

.stats-strip {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--home-border);
}
.stat { display: flex; flex-direction: column; }
.stat strong { font-family: var(--font-mono); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.stat span { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--home-muted); }

.home-main {
  /* Overrides the generic `main { display: flex }` above (meant for the
     search page's two-pane layout) — without this, .tsg-tabs stretches
     into a full-height sidebar instead of a row of pills. */
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 24px;
}

.tsg-tabs {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--home-border);
}

.tsg-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--home-muted);
  font-family: inherit;
  padding: 8px 2px;
  margin-bottom: -1px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tsg-tab:hover { color: var(--home-text); }
.tsg-tab.active { color: var(--home-text); border-bottom-color: var(--home-accent); }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.section-heading h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.section-heading p { margin: 4px 0 0; font-size: 13px; color: var(--home-muted); }

.section-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--home-muted);
  white-space: nowrap;
}
.section-meta a { color: var(--home-accent); font-weight: 600; text-decoration: none; }
.section-meta a:hover { color: var(--home-accent-hover); text-decoration: underline; }

.wg-list { display: flex; flex-direction: column; gap: 10px; }
.wg-loading { color: var(--home-muted); font-size: 13px; padding: 16px 0; }

.wg-row {
  display: grid;
  grid-template-columns: 32px minmax(160px, 220px) 1fr 1fr 100px 56px;
  gap: 18px;
  align-items: center;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 0;
  padding: 14px 20px;
}

.wg-icon {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--home-accent-soft);
  color: var(--home-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wg-row-title { font-size: 14.5px; font-weight: 600; }
.wg-row-desc { font-size: 12px; color: var(--home-muted); margin-top: 2px; line-height: 1.35; }

.wg-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.cell-label { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--home-muted); }
.cell-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--home-text);
  overflow: hidden;
}
.cell-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cell-sub { font-size: 12px; color: var(--home-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-count { font-family: var(--font-mono); font-size: 11px; color: var(--home-muted); margin-top: 1px; }
.cell-empty { font-size: 13px; color: var(--home-muted); }
.wg-cell-link:hover .cell-title { color: var(--home-accent); text-decoration: underline; }

.status-badge.status-past { background: var(--home-surface-sunken); color: var(--home-muted); }
.status-badge.status-ongoing { background: #e6f1eb; color: #1c5b41; }
.status-badge.status-upcoming { background: var(--home-accent-soft); color: var(--home-accent-on-soft); }

.wg-cell-count { display: flex; flex-direction: column; }
.wg-cell-count strong { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.wg-cell-count span { font-size: 11px; color: var(--home-muted); }

.wg-view {
  color: var(--home-accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  justify-self: end;
}
.wg-view:hover { color: var(--home-accent-hover); text-decoration: underline; }

.home-footer {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 20px 24px 32px;
  text-align: center;
  font-size: 12px;
  color: var(--home-muted);
  border-top: 1px solid var(--home-border);
}
body.landing .home-footer { margin-top: 8px; padding: 12px 24px 16px; }

@media (max-width: 860px) {
  .wg-row {
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "icon name"
      "upcoming upcoming"
      "previous previous"
      "count view";
    row-gap: 10px;
  }
  .wg-icon { grid-area: icon; }
  .wg-row-name { grid-area: name; }
  .wg-cell-upcoming { grid-area: upcoming; }
  .wg-cell-previous { grid-area: previous; }
  .wg-cell-count { grid-area: count; }
  .wg-view { grid-area: view; justify-self: start; }
}