/* fonts are self-hosted (SIL OFL 1.1, from @fontsource 5.3.0; licences in vendor/fonts/) so the page makes no outside requests */
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 500 900; src: url(vendor/fonts/fraunces-latin-soft-opsz-wght500-900.woff2) format("woff2-variations"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(vendor/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Anton"; font-style: normal; font-display: swap; font-weight: 400; src: url(vendor/fonts/anton-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --paper: #EDF0EE;
  --panel: #FFFFFF;
  --ink: #1C2428;
  --muted: #56636A;
  --line: #C9D1CF;
  --soft: #E2E7E5;
  --yellow: #FFC61A;
  --yellow-ink: #1C2428;
  --blue: #2450C8;
  --local: #1B7347;
  --server: #8F5300;
  --live: #1C2428;
  --shadow: 0 1px 0 rgba(28, 36, 40, .08), 0 8px 24px -12px rgba(28, 36, 40, .25);
  --card-shadow: 0 1px 2px rgba(28, 36, 40, .06), 0 4px 12px -4px rgba(28, 36, 40, .14);
  --card-lift: 0 2px 4px rgba(28, 36, 40, .06), 0 14px 28px -10px rgba(28, 36, 40, .28);
  --blue-soft: #E3E9FB;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --display: "Fraunces", Georgia, serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151A1D; --panel: #1D2428; --ink: #E7ECEA; --muted: #9AA7AD;
    --line: #333E43; --soft: #252D31; --blue: #8AA8FF; --local: #62CE95;
    --server: #E4AE5C; --live: #FFC61A;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.7);
    --card-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px -4px rgba(0,0,0,.5);
    --card-lift: 0 2px 4px rgba(0,0,0,.4), 0 16px 32px -10px rgba(0,0,0,.7);
    --blue-soft: #25304F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151A1D; --panel: #1D2428; --ink: #E7ECEA; --muted: #9AA7AD;
  --line: #333E43; --soft: #252D31; --blue: #8AA8FF; --local: #62CE95;
  --server: #E4AE5C; --live: #FFC61A;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.7);
  --card-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px -4px rgba(0,0,0,.5);
  --card-lift: 0 2px 4px rgba(0,0,0,.4), 0 16px 32px -10px rgba(0,0,0,.7);
  --blue-soft: #25304F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--yellow-ink); padding: 8px 12px; z-index: 9; }
.skip:focus { left: 16px; }

/* ── header ─────────────────────────────────────────── */
.chrome { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
/* one height whatever shows in it (the header search appears while scrolling): a header that changes
   height mid-scroll makes the page jump, and on iPhones it can flip back and forth every frame */
.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; height: 64px; box-sizing: border-box;
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
}

/* ── section nav: the main way in ───────────────────── */
.sections {
  max-width: 1240px; margin: 0 auto; padding: 16px 24px 0;
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px;
}
.sec {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; background: none; border-radius: 12px; padding: 10px 6px; cursor: pointer;
  font: 650 17px/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); text-align: center;
  transition: background-color .15s ease, transform .12s ease-out;
}
.sec .ic { width: 30px; height: 30px; stroke-width: 1.7; color: var(--sec-color, currentColor); }
/* the categories' colours (sections.js sectionColor): Images, PDF & docs, Video & audio, Text, Files & data,
   Web & code, Numbers, Health & sport, Maps, 3D, Office. Dark enough for icons on light paper, lighter in the dark theme. */
:root { --cat-0: #2450C8; --cat-1: #C0362C; --cat-2: #8A3FC4; --cat-3: #0E7C86; --cat-4: #A86A00; --cat-5: #4A5A66; --cat-6: #1B7347; --cat-7: #C2286E; --cat-8: #5F7F16; --cat-9: #C2570C; --cat-10: #8C5A2B; }
:root[data-theme="dark"] { --cat-0: #7EA6F0; --cat-1: #F07A6E; --cat-2: #C29BF0; --cat-3: #5FCFD8; --cat-4: #E8B24F; --cat-5: #A7B4BD; --cat-6: #62CE95; --cat-7: #F08AB8; --cat-8: #A9CF5A; --cat-9: #F59A57; --cat-10: #D9A066; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cat-0: #7EA6F0; --cat-1: #F07A6E; --cat-2: #C29BF0; --cat-3: #5FCFD8; --cat-4: #E8B24F; --cat-5: #A7B4BD; --cat-6: #62CE95; --cat-7: #F08AB8; --cat-8: #A9CF5A; --cat-9: #F59A57; --cat-10: #D9A066; } }
@media (hover: hover) and (pointer: fine) { .sec:hover { background: var(--soft); } }
.sec:active { transform: scale(.97); }
/* the open category: grey like a hover, with a bar in its own colour along the bottom */
.sec[aria-pressed="true"] { background: var(--soft); color: var(--ink); box-shadow: inset 0 -3px 0 var(--sec-color, var(--yellow)); border-radius: 12px 12px 4px 4px; }
.sec:disabled { opacity: .35; cursor: default; }
/* scrolled past the drop zone: a slim, label-only copy hangs under the header */
.mini {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; gap: 4px; justify-content: space-between; padding: 6px max(24px, calc((100% - 1192px) / 2)) 8px;
  background: var(--paper); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.mini .sec { flex: 1 0 auto; padding: 7px 12px; font-size: 16px; border-radius: 9px; white-space: nowrap; }
/* It doesn't pop in: the bar is unrolled from the header's edge and the titles settle into it, and it rolls
   back up the same way. Transitions, so scrolling back and forth turns it around mid-way. Hidden, it
   stays laid out (for the transition) but can't be seen, clicked or tabbed to. */
.mini { transition: clip-path .22s var(--ease-out), visibility 0s; clip-path: inset(0); }
.mini .sec { transition: background-color .15s ease, opacity .2s var(--ease-out), transform .22s var(--ease-out); }
.mini[hidden] { display: flex !important; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0);
  transition: clip-path .16s var(--ease-out), visibility 0s linear .16s; }
.mini[hidden] .sec { opacity: 0; transform: translateY(-8px); transition-duration: .15s, .12s, .16s; }
.topsearch {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; margin: 0 auto;
  border: 2px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--panel);
}
.topsearch:focus-within { border-color: var(--ink); }
.topsearch svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.topsearch { height: 40px; box-sizing: border-box; min-width: 0; }
.topsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0; outline: none; font-size: 15px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 12px; }
.tag {
  border: 0; background: none; border-radius: 6px; padding: 2px 4px;
  font-size: 14px; cursor: pointer; color: var(--muted);
}
.tag::before, .tagchip::before { content: "#"; color: var(--muted); margin-right: 1px; }
.tag:hover { color: var(--ink); }
.tag[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tag[aria-pressed="true"]::before { color: inherit; opacity: .6; }
.brand {
  display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: 750 22px/1 var(--display); letter-spacing: -.02em;
}
.brand svg { width: 30px; height: 30px; }
.brand { margin-right: auto; }
.tabs { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 10px; }
.tab {
  border: 0; background: none; padding: 7px 16px; border-radius: 7px; cursor: pointer;
  font-weight: 600; color: var(--muted);
}
.tab[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.theme { border: 0; background: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.theme:hover { background: var(--soft); color: var(--ink); }
.theme svg { width: 20px; height: 20px; }

.privacy-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--local); background: color-mix(in srgb, var(--local) 12%, transparent); white-space: nowrap;
}
.privacy-badge .ic { width: 16px; height: 16px; }
.privacy-badge.alert { color: #C0362C; background: color-mix(in srgb, #C0362C 14%, transparent); }
.privacy-note { max-width: 46em; margin-top: 12px; }
.privacy-note h2 { font: 700 17px var(--display); margin: 0 0 4px; color: var(--ink); }
/* the offline copy (offline.js): its block in the footer, and the note when a tool isn't saved yet */
.offline-note progress { display: block; width: 100%; max-width: 24em; margin: 8px 0; }
.offline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.offline-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; max-width: min(92vw, 34em);
  padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
@media (max-width: 560px) { .privacy-badge span { display: none; } .privacy-badge { padding: 6px; } }

/* language menu (flags), top right */
.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; border: 0; background: none; height: 40px; padding: 0 8px; border-radius: 10px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; }
.lang-btn:hover { background: var(--soft); color: var(--ink); }
.flag { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 180px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--card-lift); }
.lang-list button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--ink); text-align: left; }
.lang-list button:hover, .lang-list button:focus-visible { background: var(--soft); }
.lang-list button[aria-checked="true"] { font-weight: 700; }
.lang-list button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--local); }
@media (max-width: 560px) { .lang-code { display: none; } }

/* ── home: one question, centered; pinned + popular on the right ── */
.home {
  max-width: 1320px; margin: 0 auto; padding: 44px 24px 36px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); gap: 32px; align-items: start;
}
.home-main { grid-column: 2; text-align: center; }
.home .lede { margin: 0 auto 26px; }
.home-h { font: 700 21px/1.2 var(--display); letter-spacing: -.01em; margin: 34px 0 14px; }
/* the big apps: three tiles under the drop box, each with a small drawing of what it does */
.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: left; }
@media (max-width: 900px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 14px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); text-align: left;
  transition: border-color .15s ease, transform .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .app:hover { border-color: var(--ink); } }
.app:active { transform: scale(.98); }
.app:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.app-art { display: block; border-radius: 10px; background: var(--soft); }
.app-art svg { display: block; width: 100%; height: auto; max-height: 120px; margin: 0 auto; }
.app-txt { display: flex; flex-direction: column; gap: 3px; padding: 0 4px; }
.app-txt b { font: 700 19px/1.15 var(--display); letter-spacing: -.01em; }
.app-txt span { font-size: 14px; line-height: 1.35; color: var(--muted); }
.app-art .a-paper { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.app-art .a-ink { fill: var(--ink); }
.app-art .a-line { fill: var(--line); }
.app-art .a-mark { fill: var(--yellow); opacity: .85; }
.app-art .a-pen { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-art .a-fold { stroke: var(--line); stroke-width: 1.5; }
.app-art .a-photo1 { fill: var(--blue); }
.app-art .a-photo2 { fill: var(--yellow); }
.app-art .a-photo3 { fill: var(--ink); opacity: .75; }
.app-art .a-star { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.app-art .a-cube { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2.2; stroke-linejoin: round; }
.app-art .a-edge { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linejoin: round; }
.app-art .a-grid { fill: none; stroke: var(--blue); stroke-width: 1; opacity: .45; }
.app-art .a-trail { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 6; }
.app-art .a-plane { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.app-art .a-dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.2; }
@media (max-width: 640px) {
  .apps { grid-template-columns: 1fr; gap: 8px; }
  .app { flex-direction: row; align-items: center; padding: 8px; gap: 12px; }
  .app-art { flex: none; width: 104px; }
  .app-txt b { font-size: 17px; }
}
.tasks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.task {
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px;
  padding: 9px 16px; font: 600 16px/1.2 var(--body); cursor: pointer;
  transition: border-color .15s ease, transform .12s ease-out;
}
@media (hover: hover) and (pointer: fine) { .task:hover { border-color: var(--ink); } }
.task:active { transform: scale(.97); }
.task.hot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.task[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.task-answer { margin: 14px auto 0; max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.answer-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.answer-tool, .rail-tool {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none;
  border-radius: 10px; padding: 8px 10px; font: 600 15px/1.25 var(--body); color: var(--ink); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .answer-tool:hover, .rail-tool:hover { background: var(--soft); } }
.answer-tool .c-ic, .rail-tool .c-ic { width: 32px; height: 32px; flex: none; }
.rail { grid-column: 3; justify-self: start; width: 100%; max-width: 270px; position: sticky; top: 96px; display: grid; gap: 22px; }
.rail-box h2 { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--display); margin: 0 0 8px; }
.rail-box h2 .ic { width: 18px; height: 18px; }
.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail-tool { font-size: 14px; padding: 6px 8px; }
.rail-n { width: 16px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.rail-empty { border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px; font-size: 14px; color: var(--muted); }
.rail-empty p { margin: 0 0 6px; }
.rail-empty .linkish { background: none; border: 0; padding: 0; font: 600 14px var(--body); }
.more-tasks { display: none; }
@media (max-width: 560px) {
  .tasks:not(.all) .task:nth-child(n+6):not(.more-tasks) { display: none; }
  .tasks:not(.all) .more-tasks { display: inline-block; border-style: dashed; }
  .home { padding: 20px 16px 28px; gap: 24px; }
  .home-h { margin-top: 26px; }
}
/* the short text generated pages carry for search engines (scripts/build_pages.mjs); quiet, under everything */
.about-page { max-width: 760px; margin: 0 auto; padding: 8px 24px 48px; color: var(--muted); font-size: 15px; }
.about-page h2 { font: 700 20px/1.2 var(--display); color: var(--ink); margin: 0 0 6px; }
.about-page h3 { font: 700 16px/1.2 var(--display); color: var(--ink); margin: 18px 0 6px; }
.about-page ol { margin: 0 0 10px; padding-left: 20px; }
/* first-visit welcome (tour.js): a quiet card at the bottom, nothing dimmed, the page stays usable */
.welcome-card { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.welcome-card h2 { font: 700 22px/1.2 var(--display); margin: 0 0 6px; }
.welcome-card p { margin: 0 0 14px; color: var(--muted); }
.welcome-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.welcome-card.in-rail { position: static; transform: none; width: auto; padding: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.10); }
.welcome-card.in-rail h2 { font-size: 19px; }
.welcome-card.in-rail p { font-size: 14px; }
.welcome-card.in-rail .welcome-acts { flex-direction: column; }
.welcome-card.in-rail .welcome-acts .btn { width: 100%; }
@media (max-width: 560px) { .welcome-card { bottom: 12px; padding: 14px 16px; } .welcome-card h2 { font-size: 19px; } .welcome-card p { font-size: 15px; margin-bottom: 10px; } }
@media (prefers-reduced-motion: no-preference) { .welcome-card { animation: welcome-in .28s cubic-bezier(.23, 1, .32, 1); } }
@keyframes welcome-in { from { opacity: 0; translate: 0 12px; } }
/* How it works (header link and page) */
.how-link { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .how-link:hover { background: var(--soft); } }
.how { max-width: 860px; margin: 0 auto; padding: 36px 24px 64px; }
.how h1 { margin-bottom: 12px; }
.how h2 { font: 700 26px/1.15 var(--display); letter-spacing: -.01em; margin: 44px 0 10px; }
.how-intro .lede { margin: 0 0 18px; }
.how-steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.how-steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 60px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.how-steps li::before { content: counter(step); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: grid; place-items: center; font: 700 16px var(--display); }
.how-steps h3 { margin: 2px 0 4px; font: 700 17px/1.25 var(--display); }
.how-steps p, .how-home p { margin: 0; color: var(--muted); }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.pack { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.pack h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 17px/1.25 var(--display); }
.pack h3 .ic { width: 18px; height: 18px; }
.pack p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.pack ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pack a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.pack a .ic { width: 16px; height: 16px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pack a:hover { background: var(--soft); } }
.how-devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.how-devices > div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.how-devices h3 { margin: 0 0 6px; font: 700 17px/1.25 var(--display); }
.how-devices ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
/* a section, a search or a file: the tools list right under the drop area, the task chips step aside */
body:not(.at-home) #apps-h, body:not(.at-home) #apps, body:not(.at-home) #tasks-h, body:not(.at-home) #tasks, body:not(.at-home) #task-answer, body:not(.at-home) #rail { display: none; }
body:not(.at-home) .home { padding-bottom: 8px; }
.acct-chip { border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 6px 12px; font: 600 14px var(--body); cursor: pointer; }
.planned-block { margin-top: 40px; }
.planned-block h3 { display: flex; align-items: baseline; gap: 8px; font: 700 22px/1.2 var(--display); margin: 0; }
.planned-block h3 small { font: 500 14px var(--body); color: var(--muted); }
@media (max-width: 1100px) {
  .home { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .home-main, .rail { grid-column: 1; }
  .rail { position: static; max-width: 640px; justify-self: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
h1 {
  font: 800 clamp(40px, 6vw, 76px)/.95 var(--display); letter-spacing: -.035em;
  margin: 0 0 22px; font-variation-settings: "opsz" 96; text-wrap: balance;
}
.lede { font-size: 18px; color: var(--muted); max-width: 34em; margin: 0; }

/* the one loud thing: hazard-tape drop zone */
.dock {
  --stripe: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, #1C2428 14px 28px);
  position: relative; padding: 10px; border-radius: 22px; background: var(--stripe);
  background-size: 40px 40px;
}
.dock.over { animation: march .6s linear infinite; }
@keyframes march { to { background-position: 40px 0; } }
/* dropfx.js: the file flies in, the box catches it, tools pop out (motion only; the reduced-motion rule below turns chips off, dropfx.js checks itself) */
.fx-layer { position: absolute; left: 0; top: 0; width: 100%; z-index: 40; pointer-events: none; overflow: hidden; }
.fx-file {
  position: absolute; width: 44px; height: 56px; border-radius: 6px 14px 6px 6px; background: var(--panel);
  border: 2px solid var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.25);
  background-image: linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0);
  background-size: 24px 3px, 24px 3px, 16px 3px; background-position: 8px 16px, 8px 25px, 8px 34px; background-repeat: no-repeat;
}
.fx-under { position: absolute; inset: -2px; z-index: -1; box-shadow: none; }
.fx-ring { position: absolute; inset: -4px; border-radius: 26px; border: 4px solid var(--yellow); pointer-events: none; }
.fx-tool {
  position: absolute; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.fx-tool.fx-blue { background: var(--blue); color: #fff; }
.fx-tool .ic { width: 22px; height: 22px; }
.file-chip.fresh { animation: chip-in .34s cubic-bezier(.23, 1, .32, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms + 180ms); }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.dock-inner {
  background: var(--panel); border-radius: 14px; padding: 34px 32px 28px; text-align: center;
}
.dock-icon { width: 44px; height: 44px; color: var(--ink); }
.dock-title { font: 700 26px/1.1 var(--display); margin: 10px 0 4px; letter-spacing: -.02em; }
.dock-sub { margin: 0 0 22px; color: var(--muted); }
.linkish { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.search {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 2px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--paper);
}
.search:focus-within { border-color: var(--ink); }
.search svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 14px 0; font-size: 17px; outline: none; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
kbd { font: 500 12px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; color: var(--muted); }
.dropped { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.file-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--yellow); color: var(--yellow-ink);
  border-radius: 999px; padding: 6px 8px 6px 14px; font-weight: 600; font-size: 14px; max-width: 100%;
}
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { border: 0; background: rgba(0,0,0,.12); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; display: grid; place-items: center; color: inherit; flex: none; }
.dropveil {
  position: fixed; inset: 0; z-index: 20; background: rgba(21, 26, 29, .72); display: grid; place-items: center;
}
.dropveil p { font: 800 clamp(28px, 5vw, 56px)/1 var(--display); color: var(--yellow); letter-spacing: -.03em; padding: 0 24px; text-align: center; }

/* Lucide line icons from vendor/icons.svg; stroke comes from here so they follow the theme */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── results ────────────────────────────────────────── */
.results { max-width: 860px; margin: 0 auto; padding: 18px 24px 64px; scroll-margin-top: 124px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.count { margin: 0; font-weight: 600; }
.count .clear { margin-left: 10px; border: 0; background: none; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.toggles { display: flex; gap: 20px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 15px; user-select: none; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 38px; height: 22px; border-radius: 11px; background: var(--line); position: relative; transition: background .15s; flex: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--local); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

.group { margin: 36px 0 10px; }
.group h3 { font: 700 21px/1.2 var(--display); margin: 0 0 12px; letter-spacing: -.015em; }
.group h3 small { font: 500 14px var(--body); color: var(--muted); margin-left: 8px; font-variant-numeric: tabular-nums; }

/* ── tool cards ─────────────────────────────────────── */
/* tools as one list, top to bottom: icon, name and a line of description per row */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cards > li { display: flex; }
/* favorite star: a sibling of the card button, sitting in its top-right corner */
.cardwrap { position: relative; }
.fav {
  position: absolute; top: 5px; right: 5px; z-index: 1; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: opacity .15s ease, transform .12s var(--ease-out);
}
.fav .ic { width: 16px; height: 16px; }
.fav:active { transform: scale(.9); }
.fav.on, .fav-h.on { color: #B8860B; }
.fav.on .ic, .fav-h.on .ic { fill: var(--yellow); stroke: #8A6400; }
@media (hover: hover) and (pointer: fine) {
  .fav:not(.on) { opacity: 0; }
  .cardwrap:hover .fav, .fav:focus-visible { opacity: 1; }
  .fav:hover { background: var(--soft); color: var(--ink); }
}
.card {
  position: relative; width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  text-align: left; padding: 9px 44px 9px 12px; min-height: 60px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--card-shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-2px); box-shadow: var(--card-lift); border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
}
.card:active { transform: scale(.98); }
.c-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; color: var(--ink); }
.c-ic .ic { width: 22px; height: 22px; }
.r-name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.c-text { display: grid; gap: 1px; min-width: 0; }
/* AI tools: a small red badge (the model runs on this device) */
.ai-badge { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: #D92D20; color: #fff;
  font: 800 10px/1.4 var(--body); letter-spacing: .04em; }
.r-title { display: flex; align-items: center; min-width: 0; }
.ph-name { display: flex; align-items: center; gap: 2px; }
/* the "i" next to a tool's name, and what it opens: the tool's description and fixed explanations (tips.js) */
.ph-info { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 6px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ph-info .ic { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .ph-info:hover { color: var(--ink); border-color: var(--ink); } }
.ph-info.on { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.ph-info:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ph-tips { margin: 10px 0 2px; padding: 12px 16px; border-radius: 12px; background: var(--soft); font-size: 14.5px; line-height: 1.5; color: var(--ink); display: grid; gap: 8px; max-width: 760px; }
.ph-tips > * { margin: 0; }
.ph-tips .note, .ph-tips .sheet-desc { color: inherit; }
.ph-tips .blk-notice { margin: 0; background: none; padding: 0; border: 0; }
.ph-name .ai-badge { font-size: 12px; padding: 2px 6px; }
.r-desc { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-soon { font-size: 13px; color: var(--muted); white-space: nowrap; }
.fav { top: 50%; margin-top: -14px; right: 8px; }
.card.soon { box-shadow: none; background: color-mix(in srgb, var(--panel) 55%, var(--paper)); }
.card.soon .c-ic { color: var(--muted); }
.card.soon .r-name { font-weight: 500; }

/* ── top 10 and trending ────────────────────────────── */
.shelf { margin: 8px 0 44px; }
.shelf h2, .all-h { display: flex; align-items: center; gap: 10px; font: 750 28px/1.1 var(--display); letter-spacing: -.02em; margin: 0; }
.shelf h2 .ic { width: 26px; height: 26px; }
.shelf-sub { margin: 4px 0 16px; color: var(--muted); }
.all-h { margin: 0 0 12px; }
.cards.top { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 14px; padding-top: 8px; }
.card.ranked .c-ic { background: var(--yellow); color: var(--yellow-ink); }
.c-rank {
  position: absolute; top: -9px; left: -9px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  display: grid; place-items: center; background: var(--ink); color: var(--paper);
  font: 700 13px/1 var(--display); font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) { .cards.top { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); } }

.more {
  display: block; margin: 28px auto 0; border: 2px solid var(--ink); background: none; border-radius: 10px;
  padding: 11px 26px; font-weight: 600; cursor: pointer;
}
.more:hover { background: var(--ink); color: var(--paper); }
.empty { padding: 40px 0; color: var(--muted); max-width: 40em; }
.empty b { color: var(--ink); }

/* ── skills ─────────────────────────────────────────── */
.skills-head { max-width: 1240px; margin: 0 auto; padding: 40px 24px 12px; }
.skill-list { max-width: 1240px; margin: 0 auto; padding: 0 24px 64px; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.skill { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.skill h3 { font: 700 20px/1.2 var(--display); margin: 0 0 4px; }
.skill .area { font-size: 13px; font-weight: 600; color: var(--local); margin: 0 0 10px; }
.skill p { margin: 0; color: var(--muted); font-size: 15px; }
.skill code { font: 500 13px var(--mono); background: var(--soft); padding: 2px 6px; border-radius: 5px; display: inline-block; margin-top: 12px; color: var(--ink); }

.foot { max-width: 1240px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 4px 0 0; }
/* the tagline and the legal links close the page, centred under the two notes */
.foot-base { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.foot-base p { margin: 0 0 4px; }
.version-note { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-variant-numeric: tabular-nums; }
.version-note .btn { padding: 6px 12px; font-size: 14px; }
/* "nothing is uploaded" on the left, "works offline" beside it at the same height */
@media (min-width: 760px) {
  .foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .foot > .foot-base { grid-column: 1 / -1; }
  .foot > #privacy { grid-column: 1; } .foot > #offline { grid-column: 2; }
}
.foot-links a { color: inherit; }
.foot-links a:hover { color: var(--ink); }
/* unknown address (404): a note above the home page */
.notfound { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; }

/* ── panel (tool sheet) ─────────────────────────────── */
dialog {
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; padding: 0;
  border-radius: 18px; background: var(--panel); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
dialog[open] { animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
dialog::backdrop { background: rgba(21, 26, 29, .55); }
/* the workbench is a column: tab bar, panes (each scrolls on its own), results tray */
dialog.bench[open] { display: flex; flex-direction: column; overflow: hidden; }
.bench-bar { flex: none; }
.bench-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); }
.pane { overflow: auto; min-width: 0; background: var(--panel); overscroll-behavior: contain; }
/* one standard size whatever is open (a tool, the PDF builder, two tools side by side), so switching
   tabs never makes it jump; it only follows the screen. Phones get the whole screen. */
dialog.bench, dialog.bench.wide, dialog.bench.split {
  width: min(1320px, calc(100vw - 48px)); height: min(920px, calc(100dvh - 48px)); max-width: none; max-height: none;
}
.split .bench-panes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pane.focus .pane-head { box-shadow: inset 0 3px 0 var(--yellow); }
.pane-head { padding: 18px 26px 10px; }
.ph-row { display: flex; gap: 14px; align-items: center; }
.ph-title { flex: 1; min-width: 0; }
.ph-title h2 { margin: 2px 0 0; font: 750 28px/1.1 var(--display); letter-spacing: -.02em; }
.split .ph-title h2 { font-size: 22px; }
.ph-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.pbtn-h {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 10px; padding: 8px 12px; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background-color .15s ease, transform .12s var(--ease-out);
}
.pbtn-h .ic { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .pbtn-h:hover { border-color: var(--ink); } }
.pbtn-h:active { transform: scale(.97); }
.pbtn-h.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.picker { margin-top: 12px; padding: 12px 14px; background: var(--soft); border-radius: 12px; }
.picker .note { margin: 0 0 8px; }
.picker .chip { background: var(--panel); }
.pane-body { padding: 4px 26px 26px; }
.split .pane-head { padding: 16px 20px 8px; }
.split .pane-body { padding: 4px 20px 22px; }
.p-chain { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 14px; color: var(--blue); }
.p-chain .ic { width: 16px; height: 16px; }
.sheet-desc { margin-top: 0; }

/* ── workbench: tabs for open tools ─────────────────── */
.bench-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px 0 10px; background: var(--soft); border-bottom: 1px solid var(--line);
}
.bench-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 0 1 auto; min-width: 0; scrollbar-width: none; }
.bench-count { margin-left: auto; }
.btab { display: flex; align-items: center; flex: none; border-radius: 10px 10px 0 0; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; }
.btab.on { background: var(--panel); border-color: var(--line); }
.btab-open {
  display: flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer;
  padding: 9px 4px 10px 12px; font-weight: 600; font-size: 14px; color: var(--muted); max-width: 230px;
}
.btab.on .btab-open { color: var(--ink); }
.btab-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btab-open .ic { width: 16px; height: 16px; }
.btab-x { border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; margin-right: 4px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.btab-x:hover { background: var(--soft); color: var(--ink); }
.btab-x .ic { width: 14px; height: 14px; }
/* "+" after the tabs, and the tool finder it opens */
.btab-add { flex: none; align-self: center; width: 32px; height: 32px; margin: 0 0 6px 4px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.btab-add:hover, .btab-add.on { background: var(--panel); color: var(--ink); }
.btab-add .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.launcher { flex: none; max-height: min(420px, 55vh); overflow: auto; padding: 14px 20px 16px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .4); }
.lsearch { display: flex; align-items: center; gap: 10px; border: 2px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--paper); }
.lsearch:focus-within { border-color: var(--ink); }
.lsearch .ic { color: var(--muted); }
.lsearch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 11px 0; font-size: 16px; }
.lresults h3 { font: 700 14px var(--body); color: var(--muted); margin: 16px 0 6px; }
.lresults h3:empty { display: none; }
.lresults ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.lrow { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 6px 34px 6px 6px; cursor: pointer; font-weight: 600; font-size: 14px; }
.lrow:hover { border-color: var(--ink); }
.lrow .c-ic { width: 32px; height: 32px; }
.lrow .c-ic .ic { width: 18px; height: 18px; }
.lrow .r-soon { margin-left: auto; }
.fav-h { background: none; }
.fav-h .ic { width: 18px; height: 18px; }
.bench-count { font-size: 13px; color: var(--muted); white-space: nowrap; align-self: center; }
.bench-bar .x { align-self: center; margin-bottom: 6px; background: none; }
.bench-bar .x:hover { background: var(--panel); }
.x .ic { width: 18px; height: 18px; }

/* Results: a drawer on the right edge of every page (in the tool window too). Collapsed it's a tab;
   open it slides in from the right. What tools saved waits here, ready for the next tool. */
.drawer { position: fixed; z-index: 40; top: 96px; right: 0; bottom: 24px; width: min(360px, calc(100vw - 56px));
  transform: translateX(100%); transition: transform .24s cubic-bezier(.23, 1, .32, 1); pointer-events: none; }
.drawer.open { transform: none; }
.drawer-tab { pointer-events: auto; position: absolute; right: 100%; top: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; background: var(--panel); color: var(--ink);
  padding: 12px 8px; cursor: pointer; box-shadow: -6px 6px 18px -10px rgba(0, 0, 0, .35); font: 600 13px var(--body); }
.drawer-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.drawer-tab b { min-width: 20px; height: 20px; border-radius: 10px; background: var(--yellow); color: var(--yellow-ink); display: grid; place-items: center; font-size: 12px; padding: 0 5px; }
.drawer-tab .ic { width: 18px; height: 18px; }
.tray { pointer-events: auto; height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-right: 0;
  border-radius: 14px 0 0 14px; padding: 14px 16px; box-shadow: -12px 0 30px -18px rgba(0, 0, 0, .4); }
.drawer:not(.open) .tray { visibility: hidden; }
.tray-head { display: flex; gap: 10px; align-items: center; }
.tray-head b { flex: 1; font: 700 18px/1.2 var(--display); }
.tray-close { width: 30px; height: 30px; }
.tray .note { margin: 4px 0 0; font-size: 13px; }
.tray-list { list-style: none; display: grid; gap: 6px; margin: 12px 0 0; padding: 0; }
.tchip {
  display: flex; align-items: center; gap: 6px; min-width: 0; cursor: grab;
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 4px;
}
.tchip.on { border-color: var(--ink); }
.tchip img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; background: conic-gradient(#d9dedc 25%, #fff 0 50%, #d9dedc 0 75%, #fff 0) 0 0 / 10px 10px; }
.tchip > .ic { width: 22px; height: 22px; margin: 7px; color: var(--muted); flex: none; }
.tchip-name { flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tchip-x { border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; color: var(--muted); display: grid; place-items: center; flex: none; }
.tchip-x .ic { width: 13px; height: 13px; }
.tray-next { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
/* results from the other open tools, offered under a tool's drop area */
.feed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.feed .note { margin-right: 2px; }
.feed-chip { padding: 3px 12px 3px 4px; max-width: 240px; }
.feed-chip img { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; flex: none; }
.feed-chip, .open-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tools already open, in the tray's "Use it in" */
.open-chip { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.btab.drop, .btab.drop-target { outline: 2px dashed var(--blue); outline-offset: -2px; background: var(--blue-soft); }
/* a tool that will take the result being dragged */
.pane.drop-target { box-shadow: inset 0 0 0 3px var(--blue); background: color-mix(in srgb, var(--blue-soft) 45%, var(--panel)); }
.chip .ic { width: 15px; height: 15px; }

/* minimized workbench */
.bench-dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 15; display: flex; align-items: center; gap: 9px;
  border: 0; border-radius: 999px; padding: 12px 14px 12px 18px; cursor: pointer;
  background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55);
  transition: transform .2s var(--ease-out), opacity .2s ease;
}
@starting-style { .bench-dock { opacity: 0; transform: translateY(10px); } }
.bench-dock:active { transform: scale(.97); }
.bench-dock b { background: var(--yellow); color: var(--yellow-ink); border-radius: 999px; min-width: 24px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.p-crumb { margin: 0; color: var(--muted); font-size: 14px; }
.x { border: 0; background: var(--soft); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; flex: none; }
.x svg { width: 18px; height: 18px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.planned { background: var(--soft); border-radius: 12px; padding: 16px 18px; margin-top: 18px; }
.planned b { display: block; margin-bottom: 2px; }
.related { margin-top: 22px; }
.related h3 { font: 700 16px var(--display); margin: 0 0 8px; }
.related .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 14px; }
.chip:hover { border-color: var(--ink); }

/* ── live tool UI ───────────────────────────────────── */
.tool { display: grid; gap: 14px; }
.tool label.f { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.tool input[type=text], .tool input[type=number], .tool select, .tool textarea {
  border: 2px solid var(--line); background: var(--paper); border-radius: 10px; padding: 9px 11px; font-weight: 400; width: 100%;
}
.tool textarea { min-height: 170px; font: 14px/1.5 var(--mono); resize: vertical; }
.tool input:focus, .tool select:focus, .tool textarea:focus { border-color: var(--ink); outline: none; }
.tool .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool .inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.tool .check { display: inline-flex; gap: 7px; align-items: center; font-size: 15px; cursor: pointer; }
.btn {
  border: 0; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 11px 18px;
  font-weight: 600; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center;
}
.btn.alt { background: var(--soft); color: var(--ink); }
.btn.go { background: var(--yellow); color: #1C2428; }
.tool > .btn, .tool > button { justify-self: start; }
.tool input[type=range] { accent-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.fileslot {
  border: 2px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); cursor: pointer;
}
.fileslot:hover, .fileslot.over { border-color: var(--ink); color: var(--ink); }
.stage {
  position: relative; border-radius: 12px; overflow: auto; max-height: 52vh; display: grid; place-items: center;
  background: conic-gradient(#d9dedc 25%, #fff 0 50%, #d9dedc 0 75%, #fff 0) 0 0 / 20px 20px;
}
.stage canvas, .stage img { max-width: 100%; height: auto; display: block; }
.stage.pick canvas { cursor: crosshair; }
.note { font-size: 14px; color: var(--muted); margin: 0; }
.out {
  background: var(--soft); border-radius: 10px; padding: 12px 14px; font: 14px/1.5 var(--mono);
  white-space: pre-wrap; word-break: break-all; min-height: 44px;
}
.bigout { font: 700 34px/1.1 var(--display); letter-spacing: -.02em; word-break: break-all; }
.err { color: #C0362C; font-weight: 600; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { font-weight: 600; color: var(--muted); }
table.t td.mono { font: 13px var(--mono); word-break: break-all; }
table.t tr.clash td { color: #C0362C; }
/* rename in place (rename-inplace.js): the browser notice, the folder button beside the drop area, the preview */
.ip-notice { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }
.ip-notice p { margin: 0; font-size: 14px; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.ip-notice p.on { color: var(--ink); background: color-mix(in srgb, var(--yellow) 22%, var(--panel)); box-shadow: inset 3px 0 0 #C99400; }
.ip-you { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); vertical-align: 1px; }
.ip-src { display: grid; grid-template-columns: 1fr minmax(220px, 280px); gap: 12px; align-items: stretch; }
.ip-src > div:first-child { display: grid; }
.ip-src .fileslot { display: grid; place-items: center; }
.ip-pick { display: grid; gap: 8px; align-content: center; justify-items: start; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; }
.ip-pick .note { font-size: 13px; }
.ip-panel { display: grid; gap: 10px; }
.ip-sum { margin: 0; font-size: 15px; }
.ip-table tr.same td { color: var(--muted); }
.ip-table td .mono { font: 13px var(--mono); word-break: break-all; }
.ip-why { display: block; font-size: 13px; margin-top: 2px; }
.ip-table tr:not(.clash) .ip-why { color: var(--muted); }
.ip-panel progress { width: min(260px, 100%); accent-color: var(--ink); }
.ip-result { display: grid; gap: 10px; }
.ip-done { margin: 0; font-weight: 600; }
.ip-fails { margin: 0; padding-left: 20px; font-size: 14px; color: #C0362C; }
@media (max-width: 640px) { .ip-src { grid-template-columns: 1fr; } }
.swatch { width: 100%; height: 90px; border-radius: 12px; border: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: max-content 1fr auto; gap: 6px 14px; align-items: center; }
.kv b { font-weight: 600; }
.kv code { font: 14px var(--mono); }
.copy { border: 0; background: var(--soft); border-radius: 7px; padding: 4px 10px; cursor: pointer; font-size: 13px; }

/* ── standard blocks ───────────────────────────────── */
.blocks { gap: 16px; }
.blk-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; align-items: start; }
.blk-opts [hidden] { display: none; }
.blk-opts .check { align-self: end; padding-bottom: 10px; }
.blk-opts .note { font-weight: 400; }
.unit { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); }
.unit:focus-within { border-color: var(--ink); }
.tool .unit input { border: 0; background: none; min-width: 0; flex: 1; }
.unit span { padding: 0 11px 0 4px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.blk-out { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 16px; }
.blk-big .bigout { margin: 0; }
.blk-big .note { margin-top: 2px; }
.blk-text { display: grid; gap: 8px; }
.blk-text textarea { min-height: 140px; }
.blk-table { display: grid; gap: 8px; justify-items: start; }
.tscroll { width: 100%; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tscroll table.t th { position: sticky; top: 0; background: var(--panel); }
.tscroll table.t td, .tscroll table.t th { font-variant-numeric: tabular-nums; }

.blk-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #C99400 45%, var(--line)); background: color-mix(in srgb, var(--yellow) 14%, var(--panel)); }
.blk-notice .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #8A6400; }
.blk-notice p { margin: 0; font-size: 14px; }
:root[data-theme="dark"] .blk-notice .ic { color: var(--yellow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blk-notice .ic { color: var(--yellow); } }

/* line chart: series colours validated with the dataviz checker (light and dark) */
:root { --series-0: #2450C8; --series-1: #A87A00; }
:root[data-theme="dark"] { --series-0: #6A8AEA; --series-1: #BF8733; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-0: #6A8AEA; --series-1: #BF8733; } }
.chartbox { position: relative; margin: 0; max-width: 760px; } /* the SVG scales with its box; capped so 12px labels stay about 12px in the wide workbench */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; opacity: .6; }
.chart .base { stroke: var(--muted); stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 12px var(--body); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .s0 { stroke: var(--series-0); } .chart .s1 { stroke: var(--series-1); }
.chart .dot { stroke: var(--panel); stroke-width: 2; } .chart .dot.s0 { fill: var(--series-0); } .chart .dot.s1 { fill: var(--series-1); }
.chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .hit { fill: transparent; cursor: crosshair; }
.charttip {
  position: absolute; top: 6px; pointer-events: none; display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--card-shadow); font-size: 13px; white-space: nowrap;
}
.charttip .tk::before, .legend .key::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.tk.s0::before, .key.s0::before { background: var(--series-0); } .tk.s1::before, .key.s1::before { background: var(--series-1); }
.legend { display: flex; gap: 16px; margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* ── onboarding tour ───────────────────────────────── */
/* the lit element sits above a page-wide dim made from its own shadow */
.tour-lit { position: relative; z-index: 31; border-radius: 14px; box-shadow: 0 0 0 4px var(--yellow), 0 0 0 100vmax rgba(21, 26, 29, .62); }
#sections.tour-lit, #dock.tour-lit { background: var(--paper); }
.bench-bar.tour-lit, .drawer.tour-lit { z-index: 45; }
.tour-card {
  position: fixed; z-index: 40; width: min(360px, calc(100vw - 24px)); padding: 18px 20px 16px; border-radius: 16px;
  background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); border: 1px solid var(--line);
  transition: top .25s var(--ease-out), left .25s var(--ease-out);
}
@starting-style { .tour-card { opacity: 0; transform: translateY(6px); } }
.tour-card h2 { font: 750 22px/1.15 var(--display); margin: 2px 0 6px; letter-spacing: -.015em; }
.tour-card p { margin: 0 0 14px; }
.tour-card .tour-count { font-size: 13px; color: var(--muted); margin: 0; }
.tour-acts { display: flex; justify-content: space-between; gap: 10px; }
/* on a phone: what a ZIP is and how to open it (live.js zipNote, the renamer) */
.zip-phone { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: .92em; }
.zip-phone p { margin: 0; }
.zip-phone p + p { margin-top: 6px; color: var(--muted); }
/* opening a tool, category or recipe by its address: the home page's content stays hidden until app.js shows the
   right page (manifest-link.js); it shows anyway after 3 s, should the app fail to start */
html.ts-wait #tools-view, html.ts-wait .foot { visibility: hidden; animation: ts-show 0s 3s forwards; }
@keyframes ts-show { to { visibility: visible; } }
.foot .linkish { background: none; border: 0; padding: 0; font: inherit; }

/* ── small screens ──────────────────────────────────── */
@media (max-width: 900px) {
  .split .bench-panes { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
  .sections { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mini { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .top { height: 56px; padding: 0 12px; gap: 6px; }
  /* "How it works" becomes a round "?" so the header never wraps */
  .how-link { font-size: 0; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; }
  .how-link::before { content: "?"; font: 700 16px var(--display); color: var(--ink); }
  .topsearch { height: 36px; }
  .brand { font-size: 19px; }
  .tab { padding: 7px 11px; }
  .sections { padding-left: 10px; padding-right: 10px; padding-top: 8px; gap: 2px; }
  .mini { padding-left: 12px; padding-right: 12px; }
  .mini .sec { flex: none; font-size: 15px; padding: 6px 10px; }
  /* a long word (Dutch "Gezondheid") breaks with a hyphen instead of widening the page */
  .sec { font-size: 14px; padding: 8px 2px; gap: 4px; hyphens: auto; overflow-wrap: break-word; }
  .sec .ic { width: 26px; height: 26px; }
  .hero, .results, .skills-head, .skill-list, .foot { padding-left: 16px; padding-right: 16px; }
  .dock { padding: 7px; }
  .dock-inner { padding: 24px 16px 18px; }
  .skill-list { grid-template-columns: 1fr; }
  .pane-head, .pane-body { padding-left: 16px; padding-right: 16px; }
  .drawer { top: 72px; bottom: 16px; }
  .ph-row { flex-wrap: wrap; }
  .ph-row > .c-ic { display: none; }
  .pbtn-h span { display: none; }
  .bench-count { display: none; }
  .card { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 8px 40px 8px 10px; min-height: 56px; }
  .c-ic { width: 34px; height: 34px; }
  .shelf h2, .all-h { font-size: 24px; }
  .bench-dock { right: 16px; bottom: 16px; }
  .tool .grid2, .tool .grid3 { grid-template-columns: 1fr; }
  .search input { font-size: 16px; }
  .topsearch input { font-size: 16px; }
  .top .brand span, .brand { font-size: 0; gap: 0; }
  .brand svg { width: 32px; height: 32px; }
  kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── PDF builder ────────────────────────────────────── */
/* dialog.wide (set by the PDF builder) no longer changes the workbench size; see dialog.bench */
.ptools { align-items: center; }
.pcount { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.pboard {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
  min-height: 150px; padding: 12px; border-radius: 12px; background: var(--soft); align-content: start;
}
.pboard.over { outline: 3px dashed var(--ink); outline-offset: -3px; }
.pempty { grid-column: 1 / -1; align-self: center; text-align: center; }
.pcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  cursor: grab; display: grid; gap: 6px; position: relative; user-select: none;
}
.pcard.sel { border-color: var(--ink); }
.pcard.dragging { opacity: .35; }
.pcard.drop-before::before, .pcard.drop-after::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--blue);
}
.pcard.drop-before::before { left: -9px; }
.pcard.drop-after::after { right: -9px; }
.pthumb { height: 170px; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.pthumb canvas { max-width: 100%; max-height: 170px; box-shadow: 0 1px 4px rgba(0,0,0,.25); background: #fff; }
.pmeta { display: flex; gap: 6px; font-size: 13px; min-width: 0; align-items: baseline; }
.pmeta b { font-variant-numeric: tabular-nums; }
.pmeta span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pacts { display: flex; flex-wrap: wrap; gap: 4px; }
.pbtn { border: 0; background: var(--soft); border-radius: 6px; min-width: 28px; height: 28px; cursor: pointer; font-size: 14px; padding: 0 6px; }
.pbtn:hover { background: var(--line); }
.pbtn.place { background: var(--yellow); color: #1C2428; font-weight: 600; margin-left: auto; }
.peditor { border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.pedit-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pedit-stage { display: grid; place-items: center; background: var(--soft); border-radius: 10px; padding: 16px; overflow: auto; }
.pedit { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); overflow: hidden; touch-action: none; }
.pmargin { position: absolute; border: 1px dashed #9aa7ad; pointer-events: none; }
.pitem { position: absolute; cursor: move; outline: 2px solid transparent; outline-offset: 1px; }
.pitem:hover { outline-color: #9aa7ad; }
.pitem.sel, .pitem:focus-visible { outline: 2px solid var(--blue); }
.pitem img { width: 100%; height: 100%; display: block; pointer-events: none; }
.phandle { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; background: var(--blue); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; }
.peditor select { max-width: 320px; }
@media (max-width: 560px) {
  .pboard { grid-template-columns: repeat(2, 1fr); padding: 8px; gap: 10px; }
  .pthumb { height: 130px; }
  .pthumb canvas { max-height: 130px; }
}

/* phones: the workbench takes the whole screen (kept last so it wins over the standard size) */
@media (max-width: 560px) {
  dialog.bench, dialog.bench.wide, dialog.bench.split { width: 100vw; height: 100dvh; margin: 0; inset: 0; border-radius: 0; }
}