/* Pleasantville UFSD: AI for teachers. Typography carries the design: Figtree, weights 400-600.
   Colours are the district palette: Ink, Slate, Silver, Cloud and the greens (Forrest, Leaf, Lime, Citrus, Hunter).
   Large type, hairlines instead of boxes, one accent, short purposeful motion. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/Figtree-latin.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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/Figtree-latin-ext.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+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@property --tx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ty { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tr { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #ffffff;
  --surface: #f4f4f3;
  --fg: #1e1e1e;
  --muted: #5c5c5b;
  --line: #e6e6e5;
  --line-strong: #c6c6c5;
  --accent: #2e6a42;
  --accent-soft: rgb(46 106 66 / 0.1);
  --accent-ink: #ffffff;
  --danger: #b3261e;
  --ok: #2e6a42;
  --lift: 0 1px 2px rgb(12 14 16 / 0.05), 0 12px 32px -12px rgb(12 14 16 / 0.18);
  --rest: 0 1px 1px rgb(12 14 16 / 0.03), 0 6px 18px -10px rgb(12 14 16 / 0.12);
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --sheets: 0 4px 0 -2px var(--bg), 0 4px 0 -1px var(--line);
  --drop: 0 1px 2px rgb(16 24 40 / 0.04), 0 10px 24px -16px rgb(16 24 40 / 0.16);
  --drop-up: 0 1px 2px rgb(16 24 40 / 0.03), 0 18px 44px -28px rgb(16 24 40 / 0.2);
  --raise: 0 2px 4px rgb(16 24 40 / 0.04), 0 18px 36px -20px rgb(16 24 40 / 0.22);
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23dcdcdb'/%3E%3C/svg%3E");
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure: 46rem;
  --page: 72rem;
  --r: 10px;
  --r-lg: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1710; --surface: #0f2418; --fg: #eeeded; --muted: #a9b3ac; --line: #1d3526; --line-strong: #2f4c39;
    --accent: #b7cf67; --accent-soft: rgb(183 207 103 / 0.14); --accent-ink: #112d1c; --danger: #ff8a80; --ok: #7fb75a;
    --lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 36px -12px rgb(0 0 0 / 0.7); --rest: 0 1px 1px rgb(0 0 0 / 0.3), 0 8px 22px -10px rgb(0 0 0 / 0.6); --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1' cy='1' r='1' fill='%231a3123'/%3E%3C/svg%3E"); --edge: inset 0 1px 0 rgb(255 255 255 / 0.06); --drop: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 24px -16px rgb(0 0 0 / 0.7); --raise: 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 36px -20px rgb(0 0 0 / 0.85); --drop-up: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 44px -28px rgb(0 0 0 / 0.8); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1710; --surface: #0f2418; --fg: #eeeded; --muted: #a9b3ac; --line: #1d3526; --line-strong: #2f4c39;
  --accent: #b7cf67; --accent-soft: rgb(183 207 103 / 0.14); --accent-ink: #112d1c; --danger: #ff8a80; --ok: #7fb75a;
  --lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 36px -12px rgb(0 0 0 / 0.7); --rest: 0 1px 1px rgb(0 0 0 / 0.3), 0 8px 22px -10px rgb(0 0 0 / 0.6); --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1' cy='1' r='1' fill='%231a3123'/%3E%3C/svg%3E"); --edge: inset 0 1px 0 rgb(255 255 255 / 0.06); --drop: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 24px -16px rgb(0 0 0 / 0.7); --raise: 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 36px -20px rgb(0 0 0 / 0.85); --drop-up: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 44px -28px rgb(0 0 0 / 0.8); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-optical-sizing: auto;
  font-size: 17px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* The same feature set everywhere, including controls and dialogs. */
button, input, select, textarea, dialog, summary { font: inherit; font-feature-settings: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Chrome: no bar. A wordmark on inner pages and one floating menu button. ---------- */
.chrome { position: absolute; inset: 0 0 auto; z-index: 30; height: 0; }
.brand { position: absolute; top: 18px; left: 28px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.brand { color: var(--fg); transition: background 0.3s var(--ease); }
.brand .icon { transition: transform 0.4s var(--ease); }
.brand:hover { background: var(--surface); }
.brand:hover .icon { transform: scale(1.08); }
@media (min-width: 720px) { .is-home .brand { display: none; } } /* on phones the logo shows on every page */
body.menu-open .brand { display: grid; position: fixed; z-index: 46; } /* above the open menu, on every page */
.menu-toggle {
  position: fixed; top: 20px; right: 24px; z-index: 45; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--rest);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s var(--ease), background 0.2s ease;
}
.menu-toggle .icon { grid-area: 1 / 1; transition: opacity 0.25s ease, rotate 0.45s var(--ease), scale 0.45s var(--ease); }
.menu-toggle .icon-close { opacity: 0; rotate: -90deg; scale: 0.6; }
.menu-toggle[aria-expanded="true"] .icon-menu { opacity: 0; rotate: 90deg; scale: 0.6; }
.menu-toggle[aria-expanded="true"] .icon-close { opacity: 1; rotate: 0deg; scale: 1; }
.menu-toggle:hover { border-color: var(--fg); box-shadow: var(--lift); }
.menu-toggle:active { transform: scale(0.92); }
.chrome.scrolled .menu-toggle, .menu-toggle:focus-visible { box-shadow: var(--lift); }
.menu-open .menu-toggle { box-shadow: none; border-color: var(--line); }
body.menu-open { overflow: hidden; }

#nav {
  position: fixed; inset: 0; z-index: 40; background: var(--bg); display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: 6vw;
  padding: 120px max(40px, 8vw) 40px; visibility: hidden; opacity: 0; pointer-events: none; /* taps pass through while it fades out */
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
#nav.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.3s ease; }
.nav-links { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.nav-links a {
  font-size: clamp(40px, 7vw, 84px); font-weight: 500; letter-spacing: -0.05em; line-height: 1.08; text-decoration: none;
  display: inline-flex; align-items: center; gap: 18px; transition: color 0.25s ease, translate 0.45s var(--ease);
  opacity: 0; translate: 0 18px;
}
#nav.open .nav-links a { opacity: 1; translate: 0 0; transition: opacity 0.55s var(--ease), translate 0.6s var(--ease), color 0.25s ease; }
#nav.open .nav-links a:nth-child(2) { transition-delay: 0.04s; } #nav.open .nav-links a:nth-child(3) { transition-delay: 0.08s; }
#nav.open .nav-links a:nth-child(4) { transition-delay: 0.12s; } #nav.open .nav-links a:nth-child(5) { transition-delay: 0.16s; }
#nav.open .nav-links a:nth-child(6) { transition-delay: 0.2s; }
.nav-links:has(a:hover) a:not(:hover) { color: var(--muted); }
.nav-links a:hover { translate: 12px 0; }
.nav-links a[aria-current="page"]::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.nav-links a:last-child:not(:nth-child(-n+5)) { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em; margin-top: 18px; color: var(--muted); }
.nav-search { align-self: center; opacity: 0; translate: 0 18px; transition: opacity 0.4s ease, translate 0.5s var(--ease); }
#nav.open .nav-search { opacity: 1; translate: 0 0; transition-delay: 0.18s; }
.nav-search label { display: block; font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.nav-search .search { height: 60px; }
.nav-foot { grid-column: 1 / -1; display: flex; gap: 28px; align-items: center; font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 22px; }
.nav-foot a, .nav-foot button { color: var(--muted); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; transition: color 0.2s ease; }
.nav-foot a:hover, .nav-foot button:hover { color: var(--fg); }

/* ---------- Home ---------- */
.hero { position: relative; min-height: max(100svh, 640px); background: var(--dots) center / 28px 28px; display: grid; place-items: center; overflow: hidden; padding: 104px 20px 80px; }
.center { position: relative; z-index: 2; width: min(600px, max(460px, 40vw), 100%); text-align: center; }
.center > * { animation: rise 0.8s var(--ease) backwards; }
.center > :nth-child(2) { animation-delay: 0.08s; } .center > :nth-child(3) { animation-delay: 0.16s; } .center > :nth-child(4) { animation-delay: 0.24s; } .center > :nth-child(5) { animation-delay: 0.32s; }
.hero h1 { font-size: clamp(56px, min(7.4vw, 12vh), 112px); font-weight: 500; letter-spacing: -0.055em; line-height: 0.92; margin-bottom: 48px; }
.hero h1 span { display: inline-block; animation: rise 1s var(--ease) backwards; }
.hero h1 span + br + span { animation-delay: 0.08s; }
/* The full stop lights up once, a moment after the heading lands. */
.hero h1 .dot { display: inline; animation: dot-glow 2.4s ease 1.1s both; }
@keyframes dot-glow { 0% { color: inherit; } 18% { color: var(--accent); text-shadow: 0 0 22px var(--accent-soft), 0 0 2px var(--accent); } 100% { color: inherit; text-shadow: none; } }
/* A click on empty background sends out a soft ring (js/orbit.js). */
.ripple { position: absolute; z-index: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 1.5px solid var(--accent); pointer-events: none; animation: ripple 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes ripple { from { opacity: 0.55; } to { opacity: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .dot, .ripple { animation: none; } .ripple { display: none; } }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--rest); padding: 7px 7px 7px 24px; background: var(--bg); height: 68px; transition: border-color 0.2s ease, box-shadow 0.3s var(--ease); }
.search:hover { border-color: var(--muted); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft), var(--lift); }
.search input[type="search"] { flex: 1; min-width: 0; border: 0; border-radius: 0; background: none; outline: none; box-shadow: none; font-size: 19px; height: 100%; padding: 0; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input[type="search"]:hover, .search input[type="search"]:focus-visible { outline: none; box-shadow: none; border: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 10px 18px; font-size: 15px; font-weight: 500; background: var(--bg); line-height: 1.2; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.btn:hover { border-color: var(--fg); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-quiet { border-color: transparent; color: var(--muted); padding-inline: 8px; }
.btn-quiet:hover { color: var(--fg); border-color: transparent; background: var(--surface); }
.btn-danger { color: var(--danger); }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }
.search .btn-primary { height: 100%; padding-inline: 26px; font-size: 16px; border-radius: 10px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }

/* Resource constellation. On wider screens js/orbit.js moves each card around tilted orbits by
   setting `translate`, a depth scale (--ds), a depth opacity (--do) and z-index. Hover and focus
   bring a card to the front, straighten it and show its publisher. */
.constellation { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.orbit-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.shelf-head { display: none; }
.orbit-paths ellipse { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 7; opacity: 0.6; animation: fade 2s ease 0.4s backwards; }
.orbit-card {
  position: absolute; left: 0; top: 0; width: clamp(150px, 11.5vw, 188px); pointer-events: auto;
  display: block; padding: 16px 18px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); text-decoration: none; text-align: left;
  rotate: var(--r, 0deg); scale: var(--ds, 1); will-change: translate, scale, rotate, transform; opacity: 0;
  transform: perspective(900px) rotateX(calc(var(--lean, 0deg) + var(--rx, 0deg))) rotateY(calc(var(--turn, 0deg) + var(--ry, 0deg))) rotateZ(var(--spin, 0deg));
  filter: blur(var(--blur, 0px));
  /* the shadow widens and drops as the card comes forward */
  box-shadow: var(--edge), var(--sheets), 0 1px 2px rgb(16 24 40 / 0.04),
    0 calc(4px + var(--d, 0.5) * 14px) calc(10px + var(--d, 0.5) * 26px) calc(-8px - var(--d, 0.5) * 10px) rgb(16 24 40 / calc(0.08 + var(--d, 0.5) * 0.14));
  transition: filter 0.4s ease, scale 0.5s var(--ease), rotate 0.45s var(--ease), transform 0.35s var(--ease), opacity 0.5s ease, border-color 0.2s ease, box-shadow 0.35s var(--ease);
}
/* While the cards move, js/orbit.js sets scale, rotate and tilt every frame and eases hover itself;
   CSS transitions on those would restart each frame, lag behind the position and shake the card. */
.constellation.moving .orbit-card, .constellation.moving .orbit-card.held { transition: opacity 0.5s ease, border-color 0.2s ease; }
.orbit-card > * { opacity: var(--do, 1); transition: opacity 0.5s ease; } /* fog the content, keep the card opaque */
.orbit-card:is(:hover, :focus-visible) > * { opacity: 1; }
.constellation.ready .orbit-card { opacity: 1; animation: appear 1s var(--ease) calc(0.2s + var(--n, 0) * 40ms) backwards; }
.orbit-card .name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.32; font-weight: 500; letter-spacing: -0.014em; }
.orbit-card .pub { display: grid; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.orbit-card .pub .src { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.orbit-card .pub .date { font-variant-numeric: tabular-nums; }
/* Lift and dim only where there is a pointer to hover with; on touch a tap simply opens the card. */
@media (hover: hover), (min-width: 720px) {
  .orbit-card:not(.held):is(:hover, :focus-visible) { opacity: 1; scale: 1.12; rotate: 0deg; z-index: 300 !important; filter: none; border-color: var(--line-strong); outline-offset: 4px;
    box-shadow: var(--edge), var(--sheets), 0 2px 4px rgb(16 24 40 / 0.04), var(--gx, 0px) calc(16px + var(--gy, 0px)) 32px -20px rgb(16 24 40 / 0.24); }
  .constellation:not(.moving) .orbit-card:is(:hover, :focus-visible) { --lean: 0deg !important; --turn: 0deg !important; }
  .constellation:not(.holding):has(.orbit-card:is(:hover, :focus-visible)) .orbit-card:not(:is(:hover, :focus-visible)) { opacity: 0.45; }
}
@keyframes appear { from { opacity: 0; scale: calc(var(--ds, 1) * 0.85); } }
/* Cards can be picked up and thrown (js/orbit.js). A held card lifts, keeps its wobble, and casts
   a longer shadow; the others stay lit so the bumps are visible. */
@media (min-width: 720px) {
  .orbit-card { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-user-drag: none; }
  .orbit-card.held { cursor: grabbing; scale: calc(var(--ds, 1) * 1.08); rotate: 0deg; transition: scale 0.25s var(--ease), box-shadow 0.25s var(--ease);
    box-shadow: var(--edge), var(--sheets), 0 4px 8px rgb(16 24 40 / 0.06), 0 34px 60px -24px rgb(16 24 40 / 0.35); }
  .holding { cursor: grabbing; }
}
@keyframes drift {
  from { --tx: calc(var(--dx) * -1); --ty: calc(var(--dy) * -1); --tr: calc(var(--dr) * -1); }
  to { --tx: var(--dx); --ty: var(--dy); --tr: var(--dr); }
}

/* Small screens get their own composition: heading and search first, then a loose two-column
   field of cards that scrolls with the page and drifts in place. */
@media (max-width: 719px) {
  .brand { left: 10px; top: 12px; }
  .menu-toggle { top: 14px; right: 14px; }
  #nav { padding: 96px 24px 28px; grid-template-columns: 1fr; }
  .nav-search { display: none; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 96px 20px 40px; overflow-x: clip; }
  .center { order: 1; width: 100%; }
  .hero { background: none; }
  .constellation { order: 2; }
  .hero h1 { font-size: 54px; margin-bottom: 28px; }
  .search { height: 60px; padding-left: 18px; }
  .search input { font-size: 17px; }
  /* Phones: a clean shelf. A small header, then one straight row of equal cards that scrolls
     sideways and snaps; the first card lines up with the page edge and the next one peeks in. */
  .orbit-paths { display: none; }
  .shelf-head { order: 2; align-self: stretch; display: flex; align-items: baseline; justify-content: space-between; margin: 40px 0 12px; }
  .shelf-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); margin: 0; }
  .browse-all { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; }
  .constellation { order: 3; align-self: stretch; position: static; display: flex; gap: 12px; margin: 0 -20px; padding: 2px 20px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; pointer-events: auto; }
  .constellation::-webkit-scrollbar { display: none; }
  .orbit-card { position: relative; flex: 0 0 min(72%, 260px); width: auto; min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 16px 14px; scroll-snap-align: start; translate: none; rotate: none; transform: none; filter: none; border-radius: 16px; box-shadow: var(--edge), 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 20px -14px rgb(16 24 40 / 0.18); -webkit-tap-highlight-color: transparent; }
  .orbit-card > * { opacity: 1; }
  .orbit-card .name { font-size: 16px; line-height: 1.35; }
  .constellation.ready .orbit-card { animation: appear 0.7s var(--ease) calc(0.1s + var(--n, 0) * 40ms) backwards; }
  .orbit-card:active { scale: 0.97; transition: scale 0.15s ease; }
  .orbit-card:nth-child(n + 11) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-card, .constellation.ready .orbit-card { animation: none; transition: none; }
  .center > *, .page, .row { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Pages ---------- */
main:focus { outline: none; }
.page { width: min(var(--page), 100% - 80px); margin: 0 auto; padding: 108px 0 120px; animation: rise 0.55s var(--ease) backwards; }
.page > header { margin-bottom: 28px; }
.page > header:has(> h1.sr:only-child) { margin: 0; }
.page h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.03; outline: none; }
.page h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
.page .lede { color: var(--muted); font-size: 19px; line-height: 1.5; max-width: var(--measure); }
.page .inline-links { margin: 16px 0 6px; }
.section { margin-top: 56px; }
.section > h2 { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.status { font-size: 15px; color: var(--muted); margin: 22px 0 8px; min-height: 1.5em; }
.status:empty { min-height: 0; }
select, input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], textarea {
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); padding: 10px 12px; font-size: 15px; max-width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease);
}
select:hover, input:hover, textarea:hover { border-color: var(--muted); }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
.inline-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.inline-links a, .inline-links button, .link { color: var(--accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color 0.2s ease; }
.inline-links a:hover, .inline-links button:hover, .link:hover { text-decoration-color: currentColor; }

/* Resource rows: an archive list, not a card grid. */
.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 24px; padding: 30px 0; border-top: 1px solid var(--line); animation: rise 0.6s var(--ease) backwards; }
.row:nth-child(2) { animation-delay: 0.04s; } .row:nth-child(3) { animation-delay: 0.08s; } .row:nth-child(4) { animation-delay: 0.12s; }
.row:nth-child(5) { animation-delay: 0.16s; } .row:nth-child(n+6) { animation-delay: 0.2s; }
.row:last-child { border-bottom: 1px solid var(--line); }
.row::before { content: ""; position: absolute; inset: 0 -20px; border-radius: var(--r-lg); background: var(--surface); opacity: 0; transition: opacity 0.25s ease; z-index: -1; }
.row:hover::before, .row:focus-within::before { opacity: 1; }
.row h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.028em; line-height: 1.2; }
.row h3 button { text-align: left; transition: color 0.2s ease; }
.row h3 button::after { content: "\2192"; display: inline-block; margin-left: 10px; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.35s var(--ease); }
.row:hover h3 button::after, .row h3 button:focus-visible::after { opacity: 1; transform: none; }
.row h3 button:hover { color: var(--accent); }
.row .by { color: var(--muted); font-size: 15px; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.row .by .date { display: inline-flex; align-items: center; gap: 10px; }
.row .by .pub { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row .by .date::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.save { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); position: relative; z-index: 1; transition: color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease); }
.save:hover { color: var(--fg); background: var(--surface); }
.save:active { transform: scale(0.9); }
.save[aria-pressed="true"] { color: var(--accent); }
.save[aria-pressed="true"] svg { fill: currentColor; }
.row .save { opacity: 0.55; }
.row:hover .save, .row:focus-within .save, .row .save[aria-pressed="true"] { opacity: 1; }
.flag { color: var(--danger); }
.more { margin-top: 36px; }
.empty { padding: 48px 0; color: var(--muted); font-size: 19px; max-width: var(--measure); }
.empty-state { padding: 36px 0 12px; max-width: var(--measure); color: var(--muted); }
.empty-state .empty-title { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.empty-state > p { margin: 0 0 8px; }
.empty-state .empty-sub { margin: 26px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.empty-state .pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.empty-state .rows { margin-top: 0; }
.empty-state > .btn { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; }
.error { padding: 28px 0; color: var(--danger); }
.error button { color: var(--accent); margin-left: 8px; }
div.error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-width: var(--measure); }
div.error > .icon { flex: none; }
div.error p { margin: 0; flex: 1 1 16rem; color: var(--fg); }
div.error .btn { margin-left: 0; display: inline-flex; align-items: center; gap: 6px; }

/* Answer panel */
.answer { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 26px 28px 26px; margin: 26px 0 10px; max-width: var(--measure); animation: rise 0.5s var(--ease) backwards; }
.answer h2 { font-size: 14px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 12px; }
.answer p { margin-bottom: 14px; }
.answer h3 { font-size: 14px; font-weight: 600; margin: 20px 0 8px; }
.answer ul { margin: 0; padding-left: 20px; }
.answer li { margin-bottom: 8px; }
.answer .fine { font-size: 13px; color: var(--muted); }
.cite { font-size: 13px; margin-left: 4px; white-space: nowrap; }
.cite button { color: var(--accent); display: inline-block; min-width: 26px; min-height: 26px; padding: 2px 5px; text-align: center; line-height: 1.2; border-radius: 6px; transition: background 0.2s ease; }
.cite button:hover { background: var(--accent-soft); }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { border-top: 1px solid var(--line); animation: rise 0.5s var(--ease) backwards; }
.list-plain li:last-child { border-bottom: 1px solid var(--line); }
.list-plain a, .list-plain button { display: block; padding: 20px 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; transition: color 0.2s ease, padding 0.35s var(--ease); }
.list-plain a:hover, .list-plain button:hover { color: var(--accent); padding-left: 10px; }

/* Dialog */
dialog { width: min(740px, calc(100% - 24px)); max-height: min(90svh, 960px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--fg); padding: 36px 40px 40px; box-shadow: var(--edge), var(--drop-up); }
dialog[open] { animation: pop 0.38s var(--ease); }
dialog::backdrop { background: rgb(17 45 28 / 0.45); }
dialog[open]::backdrop { animation: fade 0.3s ease; }
@keyframes pop { from { opacity: 0; transform: perspective(1400px) rotateX(10deg) translateY(28px) scale(0.96); } }
.dlg-close { position: sticky; top: 0; float: right; margin: -14px -18px 0 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--bg); transition: color 0.2s ease, background 0.2s ease; z-index: 2; }
.dlg-close:hover, .dlg-close:focus-visible { color: var(--fg); background: var(--surface); }
.detail > .by { font-size: 16px; color: var(--muted); margin: -14px 0 26px; }
.detail h2 { font-size: 36px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; margin: 4px 0 26px; outline: none; }
/* Resource view: kicker, title, meta, then the brief and the actions. */
.detail .kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; font-size: 14px; color: var(--muted); max-width: none; }
.detail .kicker .icon { color: var(--accent); }
.detail .kicker > span:first-of-type { color: var(--fg); font-weight: 500; }
.detail .kicker-pub { min-width: 0; overflow-wrap: anywhere; }
.detail .kicker-pick { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--fg); font-size: 13px; font-weight: 500; }
.detail .kicker-pick .icon { color: var(--accent); }
.detail .law-status { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 18px; color: var(--muted); }
.detail .law-status .icon { flex: none; margin-top: 3px; }
.detail .law-status.checked .icon { color: var(--ok); }
.detail .law-status.stale { color: var(--fg); }
.detail .law-status.stale .icon { color: var(--danger); }
.detail .topic-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.detail .topic-links .icon { color: var(--muted); }
.detail .topic-links a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.detail .topic-links a:hover { text-decoration-color: currentColor; }
#detail h2 { font-size: 32px; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 10px; text-wrap: balance; }
.detail .meta { font-size: 15px; color: var(--muted); margin: 0 0 22px; }
.brief { position: relative; margin: 0 0 18px; padding: 18px 20px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.detail .brief h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.ai-chip { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); text-transform: none; }
.detail .brief-text { font-size: 18px; line-height: 1.55; color: var(--fg); margin: 0; max-width: none; }
.detail .brief-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; max-width: none; }
.brief.loading .brief-text { display: grid; gap: 9px; padding: 4px 0; }
.skel { display: block; height: 12px; border-radius: 6px; background: var(--line-strong); animation: breathe 1.4s ease-in-out infinite alternate; }
.skel.short { width: 62%; }
@keyframes breathe { from { opacity: 0.35; } to { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.detail .actions .btn .icon { flex: none; }
.btn-icon { width: 44px; padding: 10px 0; }
#detail > .actions { margin-top: 0; }
.detail .sec { margin-top: 28px; }
.detail .sec > h3:first-child { margin-top: 0; }
.detail .why p { font-size: 16px; margin: 0; }
.detail .why .best { margin-top: 6px; color: var(--muted); font-size: 15px; }
.detail .why .best span { color: var(--fg); font-weight: 500; }
.detail .unreviewed { margin-top: 26px; }

.detail h3 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 28px 0 6px; }
.detail p { font-size: 17px; max-width: 40rem; }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 28px; margin: 30px 0 0; font-size: 15px; padding-top: 22px; border-top: 1px solid var(--line); }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; }
.detail .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.detail ul { list-style: none; padding: 0; margin: 0; }
.detail .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.detail .rel { min-width: 0; max-width: 100%; }
.pill {
  display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 14px; font-weight: 500; color: var(--fg); text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.pill:hover, .pill:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pill:active { transform: scale(0.97); }
.fine { font-size: 13px; color: var(--muted); }

/* Forms */
.field { display: grid; gap: 8px; margin: 16px 0; }
.field label { font-size: 14px; color: var(--muted); }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 18px 0; }
.form-row .field { margin: 0; }
.note-box { margin-top: 28px; }
.detail .note-box .fine { margin-top: 6px; font-size: 13px; }
.note-box textarea { min-height: 52px; resize: vertical; }

@media (max-width: 899px) {
  .page { width: calc(100% - 40px); padding-top: 96px; }
  .brand { left: 12px; }
}
@media (max-width: 719px) {
  body { font-size: 16px; }
  .row { gap: 4px 12px; padding: 24px 0; }
  .row::before { inset: 0 -12px; }
  .row h3 { font-size: 23px; }
  dialog { padding: 22px 20px 28px; border-radius: 16px; }
  .detail h2 { font-size: 28px; }
  .detail dl { grid-template-columns: 1fr; gap: 0; }
  .detail dd { margin-bottom: 10px; }
}
details > summary { cursor: pointer; list-style-position: outside; padding: 8px 0; transition: color 0.2s ease; }
details > summary:hover { color: var(--fg); }
details[open] > summary { margin-bottom: 6px; }

/* ---------- Result bar and layout toggle ---------- */
.result-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 22px 0 10px; }
.result-bar .status { margin: 0; }
.layout-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 12px; position: relative; flex: none; }
.layout-toggle button { width: 38px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); position: relative; z-index: 1; transition: color 0.2s ease; }
.layout-toggle button:hover { color: var(--fg); }
.layout-toggle button[aria-pressed="true"] { color: var(--fg); }
.layout-toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 38px; height: 34px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: translate 0.4s var(--ease); }
[data-layout="grid"] .layout-toggle::before { translate: 38px 0; }
details > summary { cursor: pointer; padding: 8px 0; width: max-content; }
details[open] > summary { margin-bottom: 4px; }

/* ---------- Grid layout: the same rows as cards ---------- */
[data-layout="grid"] .rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; padding-top: 8px; }
[data-layout="grid"] .row {
  grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 20px 14px 20px 22px; min-height: 132px; align-content: space-between;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg); box-shadow: var(--edge), var(--sheets), var(--drop);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: translate 0.4s var(--ease), transform 0.35s var(--ease), box-shadow 0.4s var(--ease), border-color 0.25s ease;
}
[data-layout="grid"] .row:last-child { border-bottom: 1px solid var(--line); }
[data-layout="grid"] .row::before { display: none; }
[data-layout="grid"] .row:hover, [data-layout="grid"] .row:focus-within { translate: 0 -6px; border-color: var(--line-strong); box-shadow: var(--edge), var(--sheets), 0 2px 4px rgb(16 24 40 / 0.04), var(--gx, 0px) calc(16px + var(--gy, 0px)) 32px -20px rgb(16 24 40 / 0.24); }
[data-layout="grid"] .rows { gap: 26px 20px; padding-bottom: 12px; }
[data-layout="grid"] .row h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
[data-layout="grid"] .row h3 button::after { display: none; }
[data-layout="grid"] .row h3 button { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-layout="grid"] .row h3 button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card opens the resource */

::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
details > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; transition: rotate 0.3s var(--ease); }
details[open] > summary::before { rotate: 45deg; }

/* Grid page: sort beside the layout switch; filters live in the palette. */
.bar-tools { display: flex; align-items: center; gap: 14px; }
.sort-slot label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.sort-slot select { height: 42px; padding-block: 0; }
[data-layout="grid"] .row h3 button:hover { color: inherit; }
[data-layout="grid"] .row:hover h3 { color: var(--fg); }
@media (max-width: 719px) {
  .bar-tools { gap: 8px; min-width: 0; }
  .sort-slot { min-width: 0; }
  .sort-slot select { max-width: 9.5rem; }
}

[data-layout="grid"] .row .by { display: grid; gap: 2px; }
[data-layout="grid"] .row .by .date::before { display: none; }

/* ---------- Filter palette (grid page) ---------- */
.palette { position: relative; z-index: 20; margin-top: 4px; }
.pal-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 64px; padding: 10px 12px 10px 20px;
  border: 1px solid var(--line-strong); border-radius: 18px; background: var(--bg); box-shadow: var(--edge), var(--rest); cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.3s var(--ease), border-radius 0.3s var(--ease);
}
.pal-bar:hover { border-color: var(--muted); }
.palette.open .pal-bar { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft), var(--lift); }
.pal-icon { color: var(--muted); display: grid; place-items: center; margin-right: 4px; transition: color 0.2s ease; }
.palette.open .pal-icon { color: var(--accent); }
.pal-tokens { display: contents; }
.pal-token {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 12px; border-radius: 10px; font-size: 15px;
  background: var(--accent-soft); color: var(--fg); animation: token-in 0.35s var(--ease) backwards; max-width: 100%;
}
.pal-token .k { color: var(--accent); font-weight: 500; }
.pal-token .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pal-token .v:empty { display: none; }
.pal-token button { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); transition: background 0.2s ease, color 0.2s ease; }
.pal-token button:hover { background: var(--bg); color: var(--fg); }
@keyframes token-in { from { opacity: 0; scale: 0.85; } }
.palette input[role="combobox"] { flex: 1 1 12rem; min-width: 8rem; height: 42px; border: 0; padding: 0 4px; background: none; font-size: 18px; box-shadow: none; outline: none; }
.palette input[role="combobox"]::placeholder { color: var(--muted); opacity: 1; }
.pal-kbd { font: 500 13px/1 var(--font); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 8px; transition: opacity 0.2s ease; }
.palette.open .pal-kbd, .palette.has-tokens .pal-kbd { display: none; }
.pal-clear { display: none; width: 36px; height: 36px; border-radius: 10px; place-items: center; color: var(--muted); transition: background 0.2s ease, color 0.2s ease; }
.palette.has-tokens .pal-clear { display: grid; }
.pal-clear:hover { background: var(--surface); color: var(--fg); }
.pal-done { display: none; }
.pal-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); max-height: min(62vh, 560px); overflow: auto; overscroll-behavior: contain;
  padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); box-shadow: var(--edge), var(--raise);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 4px 10px; align-items: start;
  visibility: hidden; opacity: 0; translate: 0 -6px; transition: opacity 0.18s ease, translate 0.3s var(--ease), visibility 0s linear 0.18s;
}
.palette.open .pal-list { visibility: visible; opacity: 1; translate: 0 0; transition: opacity 0.2s ease, translate 0.35s var(--ease); }
.pal-group { padding: 6px 0 8px; min-width: 0; }
.pal-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); padding: 4px 12px 6px; }
.pal-more { font-size: 12px; color: var(--accent); padding: 2px 6px; border-radius: 6px; }
.pal-more:hover { background: var(--accent-soft); }
.pal-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 15px; transition: background 0.12s ease; }
.pal-opt .pal-k { display: none; }
.pal-opt .pal-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-opt .pal-n { font-size: 13px; color: var(--muted); }
.pal-opt[aria-selected="true"] { background: var(--surface); }
.pal-opt:hover { background: var(--surface); }
.pal-search { grid-template-columns: auto minmax(0, 1fr); align-items: center; color: var(--accent); }
.pal-group:has(.pal-search) { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
.pal-empty { padding: 14px 12px; color: var(--muted); grid-column: 1 / -1; }
.loading { opacity: 0.5; transition: opacity 0.2s ease; }

/* ---------- Saved: the encrypted library ---------- */
.vault {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding: 26px 28px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--bg); box-shadow: var(--edge), var(--sheets), var(--drop); animation: rise 0.5s var(--ease) backwards;
}
.vault-glyph { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.vault-glyph.on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.vault-main { min-width: 0; }
.vault h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
.vault-main > p { color: var(--muted); margin-top: 8px; max-width: 40rem; }
.vault-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vault-alt { margin-top: 14px; font-size: 15px; }
.vault-msg { margin-top: 12px; font-size: 15px; color: var(--ok); }
.vault-msg.bad { color: var(--danger); }
.vault-status { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.vault-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(78 148 74 / 0.18); }
.vault-status[data-status="syncing"] .dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 1s ease-in-out infinite alternate; }
.vault-status[data-status="offline"] .dot, .vault-status[data-status="idle"] .dot { background: var(--muted); box-shadow: none; }
.vault-status[data-status="error"] .dot { background: var(--danger); box-shadow: none; }
@keyframes pulse { to { opacity: 0.35; } }
.vault-device { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); animation: rise 0.4s var(--ease) backwards; }
.vault-device h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.vault-device p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.vault-device .fine { margin-top: 14px; }
.qr-frame { padding: 8px; border-radius: 16px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--line); }
.qr { display: block; width: 100%; height: auto; }
.qr-bg { fill: #ffffff; }
.qr-fg { fill: #1e1e1e; }
.vault-more { margin-top: 16px; font-size: 15px; color: var(--muted); }
.vault-manage { padding-top: 4px; }
.vault-manage .vault-actions { margin-top: 12px; }
.row-note { margin-top: 10px; font-size: 15px; color: var(--muted); padding-left: 12px; border-left: 2px solid var(--accent-soft); max-width: 40rem; }
.saved-empty { display: flex; align-items: center; gap: 14px; }
.saved-empty svg { flex: none; color: var(--line-strong); }
.saved-empty p { margin: 0; }
.saved-empty .saved-next { margin-top: 8px; font-size: 16px; }
/* Sharing a saved list, and the page a shared link opens. */
.share-box { margin: 26px 0 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.share-box > summary { display: flex; width: auto; align-items: center; gap: 8px; padding: 14px 18px; margin: 0; cursor: pointer; font-size: 15px; font-weight: 500; list-style: none; }
.share-box > summary::before { order: 2; margin-left: auto; } /* the open/close caret sits at the right edge */
.share-box[open] > summary { margin: 0; }
.share-box > summary::-webkit-details-marker { display: none; }
.share-box[open] > summary { border-bottom: 1px solid var(--line); }
.share-body { display: grid; gap: 8px; padding: 16px 18px 18px; max-width: 34rem; }
.share-body label { font-size: 14px; color: var(--muted); }
.share-body label.check { display: flex; align-items: center; gap: 10px; color: var(--fg); font-size: 15px; margin-top: 4px; }
.share-body .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.share-out { overflow-wrap: anywhere; }
.kicker-line { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.page h1.shared-title { font-size: clamp(32px, 4vw, 48px); }
.shared-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 22px; }
@media (max-width: 719px) { .saved-empty { align-items: flex-start; gap: 12px; } .saved-empty p { font-size: 15px; line-height: 1.5; } .saved-empty svg { width: 22px; height: 22px; } }
.export { margin-top: 28px; }
.save.pop svg { animation: pop-save 0.45s var(--ease); }
@keyframes pop-save { 40% { scale: 1.35; } }

/* ---------- Dock: phones only ---------- */
.dock { display: none; }
@media (max-width: 719px) {
  .menu-toggle { display: none; }
  .dock {
    position: fixed; z-index: 45; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); translate: -50% 0;
    display: flex; align-items: stretch; gap: 2px; padding: 6px; width: min(100% - 24px, 420px);
    border: 1px solid var(--line); border-radius: 24px; background: var(--bg); box-shadow: var(--edge), 0 2px 6px rgb(16 24 40 / 0.06), 0 18px 40px -16px rgb(16 24 40 / 0.3);
    animation: dock-in 0.6s var(--ease) 0.15s backwards;
  }
  @keyframes dock-in { from { translate: -50% 140%; } }
  .dock a, .dock button {
    position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 56px; border-radius: 18px; color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background 0.25s ease, scale 0.2s var(--ease);
  }
  .dock a:active, .dock button:active { scale: 0.92; }
  .dock [aria-current="page"], .dock [aria-expanded="true"] { color: var(--fg); background: var(--surface); }
  .dock [aria-current="page"] .icon-bookmark { fill: currentColor; }
  .dock-label { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; line-height: 1; }
  .dock .badge {
    position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--bg);
  }
  .dock a.bump .icon { animation: pop-save 0.5s var(--ease); }
  .dock a.bump .badge { animation: pop-save 0.5s var(--ease) 0.05s; }
  body.palette-open .dock { translate: -50% 160%; transition: translate 0.3s var(--ease); }
  #nav { padding: 72px 24px calc(110px + env(safe-area-inset-bottom)); z-index: 44; }
  .nav-links a { font-size: 44px; }
  main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .brand { top: 10px; left: 8px; }

  /* Pages: tighter frame, comfortable type. */
  .page { width: calc(100% - 32px); padding: 72px 0 40px; }
  .result-bar { margin-top: 16px; }
  [data-layout="grid"] .rows { grid-template-columns: 1fr; gap: 14px; }
  [data-layout="grid"] .row { min-height: 0; padding: 18px 10px 18px 18px; border-radius: 16px; gap: 0 4px; }
  [data-layout="grid"] .row h3 { font-size: 18px; }
  [data-layout="grid"] .row:hover, [data-layout="grid"] .row:focus-within { translate: none; }
  [data-layout="grid"] .row:active { scale: 0.985; transition: scale 0.15s ease; }
  .row .save { opacity: 1; }
  .search { height: 56px; border-radius: 14px; }
  .search .btn-primary { padding-inline: 18px; }

  /* The open palette becomes a full-screen sheet with the field on top. */
  .palette.open { position: fixed; inset: 0; margin: 0; z-index: 60; background: var(--bg); padding: calc(10px + env(safe-area-inset-top)) 12px 0; display: flex; flex-direction: column; animation: sheet-in 0.3s var(--ease); }
  @keyframes sheet-in { from { opacity: 0; translate: 0 16px; } }
  .palette.open .pal-bar { box-shadow: none; border-radius: 14px; padding-left: 14px; flex: none; }
  .palette.open .pal-done { display: block; font-weight: 500; color: var(--accent); padding: 8px 6px 8px 10px; }
  .palette.open .pal-list { position: static; flex: 1; max-height: none; border: 0; box-shadow: none; padding: 8px 0 calc(24px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; margin-top: 4px; }
  .pal-opt { padding: 13px 12px; font-size: 16px; }
  .palette input[role="combobox"] { font-size: 17px; }
  .pal-kbd { display: none; }
  /* Browse header on phones: one quiet line, the count on the left and the sort as plain text on
     the right. Phones always get the card layout, so the layout switch is hidden. */
  .result-bar { margin: 14px 0 12px; }
  .result-bar .status { white-space: nowrap; font-size: 14px; }
  .layout-toggle { display: none; }
  .sort-slot label { font-size: 0; gap: 0; }
  .sort-slot select { height: 32px; font-size: 14px; font-weight: 500; color: var(--fg); border: 0; background-color: transparent; padding: 0 22px 0 6px; background-position: right 0 center; box-shadow: none; text-align: right; text-align-last: right; }
  .sort-slot select:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 8px; }
  .kinds { gap: 6px; margin-top: 12px; }
  .kinds button { height: 34px; padding: 0 12px; font-size: 14px; gap: 6px; }
  .kinds button .icon { width: 15px; height: 15px; }
  .kinds button .n { font-size: 11px; }
  .pal-bar { min-height: 56px; border-radius: 16px; padding: 8px 8px 8px 14px; }
  body.palette-open { overflow: hidden; }

  /* Saved */
  .vault { grid-template-columns: 1fr; gap: 14px; padding: 20px; border-radius: 20px; }
  .vault-glyph { width: 40px; height: 40px; border-radius: 12px; }
  .vault h2 { font-size: 21px; }
  .vault-actions .btn { flex: 1 1 auto; }
  .vault-device { grid-template-columns: 1fr; justify-items: start; }
  .qr-frame { width: 200px; }

  /* Dialogs float 6px from every edge of the screen and scroll inside; the page behind stays put. */
  dialog, dialog.panel { position: fixed; inset: 6px; margin: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 18px; padding: 14px 18px 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* They slide up from below the screen to open and back down to close (see js/slide.js). */
  dialog[open] { animation: slide-up 0.42s var(--ease); }
  dialog.closing { animation: slide-down 0.28s cubic-bezier(0.4, 0, 1, 1) forwards; }
  dialog.closing::backdrop { animation: fade-out 0.28s ease forwards; }
  @keyframes slide-up { from { translate: 0 calc(100% + 12px); } }
  @keyframes slide-down { to { translate: 0 calc(100% + 12px); } }
  @keyframes fade-out { to { opacity: 0; } }
  .dlg-close { margin: -4px -8px 0 12px; }
  html:has(dialog[open]) { overflow: hidden; }
  .detail .actions { position: sticky; bottom: -20px; background: var(--bg); padding: 12px 0; margin-bottom: -12px; border-top: 1px solid var(--line); z-index: 1; }
  .detail .actions .btn { flex: 1 1 auto; }
  .detail .actions .btn-icon { flex: none; }
  #detail > .actions { margin: 0 0 4px; border-top: 0; }
  #detail h2 { font-size: 26px; }
  .detail .brief-text { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock, .palette.open, dialog[open], dialog.closing, dialog.closing::backdrop { animation: none; }
}

/* ---------- Kinds: what a resource is, when it is not an article ---------- */
.row .by .tagline { display: inline-flex; align-items: center; gap: 8px; }
.row .by .pick, .orbit-card .pick { display: inline-flex; align-items: center; color: var(--accent); }
.row .by .kind, .orbit-card .kind { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); font-weight: 500; }
.row .by .kind .icon { color: var(--accent); }
[data-layout="grid"] .row .by .kind { margin-bottom: 4px; }
/* The type row scrolls sideways on narrow screens; a soft fade on whichever side has more to show. */
@property --fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
.kinds { display: flex; gap: 8px; margin: 16px 0 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-inline: -2px; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  transition: --fade-start 0.25s var(--ease), --fade-end 0.25s var(--ease); }
.kinds[data-fade-start] { --fade-start: 40px; }
.kinds[data-fade-end] { --fade-end: 56px; }
/* Browse sits on the same dotted paper as the home page. */
body:has(.page.browse) { background-image: var(--dots); background-size: 28px 28px; background-position: center top; }
.kinds::-webkit-scrollbar { display: none; }
.kinds button {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 19px; font-size: 15px; color: var(--muted);
  border: 1px solid var(--line); background: var(--bg); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.kinds button:hover { color: var(--fg); border-color: var(--line-strong); }
.kinds button:active { transform: scale(0.96); }
.kinds button .n { font-size: 12px; color: var(--muted); }
.kinds button[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.kinds button[aria-pressed="true"] .n, .kinds button[aria-pressed="true"] .icon { color: inherit; opacity: 0.75; }
@media (max-width: 719px) { .kinds { margin-inline: -16px; padding-inline: 16px; } }

/* About and weekly digest: a narrower, quieter dialog than the resource view. */
@media (min-width: 720px) { dialog.panel { width: min(640px, calc(100% - 24px)); } }
/* About and Privacy: a short document in a modal. Icon, title and lede, then the body. */
.doc-head { margin: 4px 0 22px; }
.doc-glyph { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); margin-bottom: 16px; }
dialog.panel .doc-head h2 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 8px; }
.detail .doc-lede { font-size: 17px; line-height: 1.5; color: var(--muted); margin: 0; }
.byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; margin-bottom: 18px; border-block: 1px solid var(--line); }
.byline .avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.byline > span:last-child { display: grid; gap: 1px; font-size: 15px; }
.byline .role { color: var(--muted); font-size: 14px; }
.byline-name { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; }
.byline-name:hover { text-decoration-color: currentColor; }
.detail .doc-body p { font-size: 16px; line-height: 1.65; color: var(--fg); margin: 0 0 12px; }
.points { list-style: none; display: grid; gap: 14px; margin: 22px 0 0 !important; padding: 18px 20px !important; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.points li > span:last-child { display: grid; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.points strong { color: var(--fg); font-size: 15px; font-weight: 600; }
.point-icon { display: inline-grid; place-items: center; color: var(--accent); }
.points .point-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.doc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 22px 0 4px !important; font-size: 15px; color: var(--muted); }
.callout { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px !important; padding: 14px 16px; border-radius: 14px; font-size: 15px !important; line-height: 1.5; color: var(--fg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.callout .icon { flex: none; margin-top: 2px; color: var(--accent); }
.doc-sections { display: grid; gap: 0; }
.doc-sec { padding: 18px 0; border-top: 1px solid var(--line); }
.doc-sec:last-child { padding-bottom: 6px; }
.detail .doc-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--fg); }
.detail .doc-sec p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 8px; }
.detail .doc-sec p:last-child { margin-bottom: 0; }
.about-link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.donate-frame { position: fixed; inset: 0; z-index: 2147483000; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; }
.digest-open { margin: 0 auto 26px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--fg); padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.2s ease, background 0.2s ease; }
.digest-open .icon { color: var(--muted); transition: translate 0.25s var(--ease), color 0.2s ease; }
.digest-open:hover, .digest-open:focus-visible { border-color: var(--line-strong); background: var(--bg); }
.digest-open:hover .icon, .digest-open:focus-visible .icon { translate: 3px 0; color: var(--fg); }
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: live 2.8s ease-out 1.6s infinite; }
@keyframes live { 0% { opacity: 0.6; scale: 0.6; } 70%, 100% { opacity: 0; scale: 1.7; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }
/* Reading paths: one row of quiet pills under the digest button, and a numbered list in the modal. */
/* Reading paths: one joined bar of roles under the search, each with its own icon. */
.start-paths { display: inline-flex; align-items: center; gap: 2px; margin: 18px auto 0; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: var(--rest); }
.start-path { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 500; transition: color 0.2s ease, background 0.2s ease; }
.start-path .icon { color: var(--accent); }
.start-path:hover, .start-path:focus-visible { color: var(--fg); background: var(--surface); }
.start-path[data-last] { color: var(--fg); }
/* The plain way into Browse from the home page, under the reading paths. */
.home-browse { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 20px auto 0; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: var(--bg); font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.home-browse .icon:last-child { transition: translate 0.25s var(--ease); }
.home-browse:hover, .home-browse:focus-visible { background: var(--accent); color: var(--accent-ink); }
.home-browse:hover .icon:last-child, .home-browse:focus-visible .icon:last-child { translate: 3px 0; }
@media (max-width: 719px) {
  .digest-open { margin-bottom: 20px; }
  .start-paths { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .start-path { justify-content: center; padding: 10px 8px; }
}
.path-steps { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 22px; }
.path-step { display: flex; align-items: center; gap: 10px; margin: 0 0 6px !important; font-size: 15px !important; font-weight: 600; color: var(--fg); }
.path-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600; }
.digest-kicker { font-size: 13px; color: var(--muted); margin: 2px 0 6px; }
.detail .digest-lede { font-size: 17px; line-height: 1.6; color: var(--fg); margin-bottom: 12px; }
.digest-picks { margin-top: 24px; }
.digest-picks h3 { color: var(--fg); font-size: 16px; margin: 0 0 8px; }
.digest-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.digest-items li { border-bottom: 1px solid var(--line); }
.digest-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 2px; background: none; border: 0; cursor: pointer; }
.digest-item .name { font-size: 16px; line-height: 1.35; }
.digest-item .src { font-size: 13px; color: var(--muted); }
.digest-item .why { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.digest-item:hover .name, .digest-item:focus-visible .name { text-decoration: underline; text-underline-offset: 3px; }
.digest-sub { margin: 30px 0 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.digest-sub p { font-size: 15px; margin-bottom: 12px; }
.digest-sub .actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.digest-sub .btn { display: inline-flex; align-items: center; gap: 8px; }
.digest-wait { animation: fade 1.2s ease infinite alternate; }
.ai-note { color: var(--muted); margin: 0; }
/* The search in play on the browse page. */
.query { margin: 18px 0 4px; display: grid; gap: 6px; }
.query-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 17px; }
.query-label { color: var(--muted); }
.query-text { font-weight: 500; overflow-wrap: anywhere; }
.query-clear { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.query-clear:hover, .query-clear:focus-visible { color: var(--fg); border-color: var(--line-strong); background: var(--surface); }
.query .fine { margin: 0; }
@media (prefers-reduced-motion: reduce) { .digest-wait { animation: none; } }
.detail .digest-sub .actions { position: static; padding: 0; margin: 0; border: 0; background: none; }
.detail .digest-sub .actions .btn-quiet { display: inline-flex; }