/* Laptops: a smaller, denser look in the style of the Supabase dashboard.
   The Geist font, 14px text, quiet grey panels with thin borders, and the
   accent colour kept for the main buttons, ticks and links rather than big
   filled blocks. Loaded last on each page, so these win on wide screens.
   Phones keep their own look (theme.css). */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/geist-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/geist-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(fonts/geist-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media (min-width: 960px) {
  /* rem sizes across the app shrink with this too. */
  html { font-size: 14px; }
  :root {
    --bg: #fcfcfc; --card: #ffffff; --text: #171717; --muted: #707070;
    --line: #e4e4e4; --chip: #eef1fc; --side: #f8f8f8; --hover: #f1f1f1; --picked: #ececec;
  }
  body {
    font: 14px/1.45 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  main { max-width: 900px; padding: 20px 28px 48px; }
  h1 { font-size: 1.43rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }
  h2 { font-weight: 600; }
  .card { border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
  label { font-size: 13px; margin-bottom: 4px; }

  /* Boxes and buttons: 32px tall, 6px corners. */
  input, select, textarea { padding: 6px 10px; font-size: 14px; border-radius: 6px; background: var(--card); }
  input:focus, textarea:focus, select:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 0; border-color: var(--accent);
  }
  select:not([multiple]) { padding-right: 30px; background-position: right 10px center; background-size: 12px; }
  button { padding: 6px 12px; font-size: 13px; font-weight: 500; border-radius: 6px; }
  button.link { font-size: inherit; }
  .action { padding: 5px 10px; gap: 6px; font-size: 13px; font-weight: 500; border-radius: 6px; }
  .action svg { width: 15px; height: 15px; }
  .action:hover { background: var(--hover); }
  .action[aria-expanded="true"], .action[aria-current="page"] {
    background: var(--picked); color: var(--text); border-color: var(--line);
  }
  .action.add { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
  .action.add:hover { filter: brightness(1.08); }
  .page-bar { gap: 6px; margin-bottom: 14px; }
  .bar { margin: 10px 0 6px; }
  .msg { font-size: 13px; }

  /* The menu: a narrow grey sidebar, the current page a light grey strip. */
  html.menu-docked { --side-w: 220px; }
  .menu { width: 220px; gap: 1px; padding: 12px 8px; background: var(--side); }
  .menu-head { padding: 0 2px 10px 8px; font-size: 14px; font-weight: 600; }
  .menu-close { padding: 5px; border-radius: 6px; }
  .menu-close svg, .menu-open svg { width: 16px; height: 16px; }
  .menu-close:hover, .menu-close:focus-visible { background: var(--hover); }
  .menu-open { top: 14px; padding: 6px; border-radius: 6px; }
  .menu .menu-item { gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
  .menu .menu-item svg { width: 16px; height: 16px; }
  .menu .menu-chevron { width: 14px; height: 14px; }
  .menu .menu-item:hover, .menu .menu-item:focus-visible { background: var(--hover); color: var(--text); }
  .menu .menu-item[aria-current="page"] { background: var(--picked); color: var(--text); }
  .menu .menu-item[aria-current="page"] svg { color: var(--text); }
  /* An open group with one of its sections picked: just the section shows it. */
  .menu-group:has(.menu-sub:not([hidden]) [aria-current="true"]) > .menu-item[aria-current="page"] { background: none; }
  .menu-group { gap: 1px; }
  .menu-group + .menu-group, .menu-item + .menu-group { margin-top: 6px; }
  .menu-sub { gap: 0; padding: 1px 0 4px; }
  .menu-sub-item { gap: 8px; padding: 5px 10px 5px 12px; border-radius: 6px; font-size: 13px; }
  .menu-sub-row { border-radius: 6px; }
  .menu-sub-row .menu-sub-item { padding-left: calc(12px + var(--depth, 0) * 18px); }
  .menu-sub-item svg { width: 14px; height: 14px; }
  .menu-sub-row:hover, .menu-sub-row:focus-within, .menu-sub-item:hover { background: var(--hover); }
  .menu-sub-item[aria-current="true"] { color: var(--text); font-weight: 500; background: var(--picked); }
  .menu-sub-row:has(> [aria-current="true"]) { background: var(--picked); }
  .menu-sub-item[aria-current="true"] .section-count { color: var(--text); }
  .menu-sub-add svg { width: 13px; height: 13px; }
  .section-count { font-size: 12px; }
  .menu-sub-row .section-count { right: 10px; }
  .menu .menu-sub-new { font-size: 13px; padding: 5px 6px; }
  .menu-sub-actions, .tree-actions, .section-choices, .qa-hints { border-radius: 8px; padding: 3px; }
  .menu .menu-sub-actions button { padding: 5px 8px; font-size: 13px; }
  .section-naming input { padding: 4px 8px; font-size: 13px; border-radius: 6px; }

  /* Page headings for a section. */
  h1.section-title { column-gap: 8px; }
  h1.section-title .section-path { font-size: 12px; }

  /* The task list: tighter rows, small ticks. */
  .card:has(> #list) { padding: 0 14px; }
  li.item { padding: 8px 0; gap: 10px; align-items: flex-start; }
  li.item .title { font-weight: 500; }
  .check { width: 16px; height: 16px; margin-top: 2px; }
  .pick { width: 16px; height: 16px; margin-top: 2px; border-width: 1.5px; }
  .pick svg { width: 10px; height: 10px; margin: 1.5px; }
  .meta, .notes, .snippet { font-size: 12px; }
  .meta { gap: 2px 10px; }
  li.item > div:has(> .meta:empty:last-child) { min-height: calc(1lh + 12px * 1.45); }
  .due svg, .subs svg, .section-tag svg { width: 12px; height: 12px; }
  li.item:hover { background: color-mix(in srgb, var(--hover) 60%, var(--card)); box-shadow: -14px 0 0 color-mix(in srgb, var(--hover) 60%, var(--card)), 14px 0 0 color-mix(in srgb, var(--hover) 60%, var(--card)); }
  body.picking li.item.picked { box-shadow: -14px 0 0 var(--chip), 14px 0 0 var(--chip); }
  .move svg { width: 15px; height: 15px; }
  /* Partition headings in a section's list. */
  li.part-head { padding: 12px 0 4px; }
  li.part-head:first-child { padding-top: 8px; }
  li.item + li.part-head { margin-top: 4px; }
  .part-fold { gap: 4px; font-size: 13px; }
  .part-fold svg { width: 14px; height: 14px; }
  .part-count { font-size: 12px; }
  .part-btn { padding: 4px; }
  .part-btn svg { width: 15px; height: 15px; }
  .part-btn:hover, .part-btn:focus-visible, .part-btn.more[aria-expanded="true"] { background: var(--hover); }
  .part-actions { border-radius: 8px; padding: 3px; min-width: 130px; }
  .part-actions button { padding: 5px 8px; font-size: 13px; }
  .part-actions button:hover, .part-actions button:focus-visible { background: var(--hover); }
  .part-naming { padding: 4px 8px; font-size: 13px; }
  .part-empty { padding: 6px 0 8px 18px; font-size: 12px; }
  .new-part { margin-top: 8px; padding: 5px 8px; gap: 6px; font-size: 13px; font-weight: 500; }
  .new-part svg { width: 14px; height: 14px; }
  #more { margin: 8px 0; }

  /* The notes list. */
  li.note a { padding: 8px 0; }
  li.note .title { font-weight: 500; }
  .bin svg { width: 15px; height: 15px; }
  .bin { margin-top: 8px; }

  /* Drawers and the Add pop-up. */
  .drawer { width: 360px; padding: 16px; box-shadow: 0 0 0 1px var(--line), 0 8px 30px rgba(0, 0, 0, .08); }
  #filters { border-radius: 0 8px 8px 0; }
  #add-form, #task-drawer { border-radius: 8px 0 0 8px; }
  .drawer h2 { font-size: 15px; }
  .fields { gap: 10px; }
  .pair { gap: 10px; }
  #task-drawer .drawer-head { gap: 10px; }
  #t-title { font-size: 15px; font-weight: 600; }
  .t-close { padding: 4px; margin: -4px -4px -4px 0; border-radius: 6px; }
  .t-close svg { width: 18px; height: 18px; }
  .t-close:hover, .t-close:focus-visible { background: var(--hover); }
  #t-notes-view { padding: 6px 10px; border-radius: 6px; min-height: 52px; }
  #t-notes { min-height: 150px; }
  #t-meta, .remind-hint { font-size: 12px; }
  #t-subs li { gap: 8px; padding: 0; }
  #t-subs input:not(.check), #t-sub-new { padding: 5px 2px; }
  .sub-add { gap: 8px; }
  .sub-add svg { width: 16px; height: 16px; }
  .section-choose { padding: 6px 10px; border-radius: 6px; gap: 8px; }
  .section-choose svg, .section-choices svg { width: 14px; height: 14px; }
  .section-choices button { padding: 5px 8px 5px calc(8px + var(--depth, 0) * 14px); border-radius: 6px; }
  #add-form { width: min(520px, calc(100vw - 48px)); border-radius: 10px; gap: 8px; padding: 14px; }
  .add-done { padding: 6px 14px; }
  .add-opts { gap: 6px; }
  .opt { padding: 3px 10px; gap: 5px; font-size: 12px; }
  .opt svg { width: 14px; height: 14px; }
  .qa-wrap { border-radius: 6px; background: var(--card); }
  .qa-mirror { padding: 6px 10px; }
  .qa-chip, button.qa-chip.qa-off { font-size: 12px; }
  .qa-chip > svg { width: 14px; height: 14px; }
  .qa-undo svg { width: 12px; height: 12px; }
  .qa-hint { padding: 6px 8px; gap: 8px; }
  .qa-hint svg { width: 14px; height: 14px; }
  .pick-bar { padding: 6px 6px 6px 12px; border-radius: 8px; gap: 6px; }
  .pick-bar button { padding: 5px 8px; }
  .pick-bar .quiet svg { width: 16px; height: 16px; }

  /* The note editor. */
  #note-title { font-size: 18px; }
  #note-section { padding: 4px 28px 4px 10px; font-size: 13px; border-radius: 6px; }
  #body .cm-editor { line-height: 1.6; }
  #body .cm-line { padding: 0 14px; }

  /* Home. */
  .stat { padding: 12px 14px; border-radius: 8px; }
  .stat .num { font-size: 2rem; font-weight: 600; }
  .stat .label { font-size: 12px; }
  #reminders h2 { font-size: 14px; }

  /* The delete question. */
  dialog.confirm { padding: 16px; border-radius: 10px; width: 320px; }
  dialog.confirm p { font-size: 14px; margin-bottom: 14px; }
  .confirm-actions button { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; }

  /* Icon picker. */
  .icon-picker { grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); border-radius: 8px; padding: 4px; }
  .icon-picker button { height: 28px; border-radius: 6px; }
  .icon-picker button svg { width: 15px; height: 15px; }
  .icon-picker .icon-colours button { width: 18px; height: 18px; }

  .md { font-size: 14px; }
  .md h1 { font-size: 1.43rem; }
  .md h2 { font-size: 1.21rem; }
  .md h3 { font-size: 1.07rem; }
}

@media (min-width: 960px) and (prefers-color-scheme: dark) {
  :root {
    --bg: #171717; --card: #1c1c1c; --text: #ededed; --muted: #a0a0a0;
    --line: #2e2e2e; --chip: #232838; --side: #1c1c1c; --hover: #232323; --picked: #2a2a2a;
  }
  .card { box-shadow: none; }
  .drawer { box-shadow: 0 0 0 1px var(--line), 0 8px 30px rgba(0, 0, 0, .4); }
}