/* HYPER Learn — what every free tool shares (hyperfocus.life/learn/tools/).
   Loaded only on tool pages, after site.css, and built from its tokens alone:
   no new hues. Each tool's own styles live in css/tools/<tool>.css. Tool
   content never wears .reveal or .tilt: everything is on screen, and in the
   HTML for crawlers, from the first paint. */

/* ── A tool page is a tool first (2026-10-18) ─────────────────────────────
   A short hero, the tool in a console, its promises as pills, HYPER's card,
   then the page's words folded into questions. The rail starts folded. */
.kb-tool > main.tool-main { max-width: none; padding: 28px clamp(18px, 4vw, 56px) 88px; }
.tool-hero { max-width: 780px; margin: 0 auto 28px; text-align: center; }
.tool-hero .crumbs { margin: 0 0 20px; }
.tool-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px !important; padding: 6px 13px;
  border-radius: 999px; border: 1px solid rgba(95, 224, 207, 0.26); background: rgba(29, 181, 165, 0.09);
  color: var(--teal-bright) !important; font-size: 11px !important; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.tool-kicker .ico { width: 14px; height: 14px; }
.tool-main h1 { font-size: clamp(38px, 6.2vw, 66px); font-weight: 200; line-height: 1.08; letter-spacing: 0.005em; margin: 0 0 14px; }
.article .tool-dek { color: var(--dim); font-size: clamp(16px, 2.2vw, 19px); max-width: 54ch; margin: 0 auto; }

/* The console: the instrument itself. */
.article .tool.tool-console {
  position: relative; max-width: 940px; margin: 0 auto; padding: 0; overflow: hidden;
  border-radius: 28px; border: 1px solid rgba(199, 217, 209, 0.16);
  background:
    radial-gradient(110% 70% at 50% -8%, rgba(29, 181, 165, 0.17), rgba(5, 5, 6, 0) 62%),
    radial-gradient(60% 50% at 100% 100%, rgba(123, 108, 246, 0.07), rgba(5, 5, 6, 0) 70%),
    linear-gradient(180deg, rgba(16, 16, 20, 0.94), rgba(8, 8, 10, 0.96));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 90px rgba(29, 181, 165, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tool-console::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(95, 224, 207, 0), rgba(95, 224, 207, 0.7), rgba(95, 224, 207, 0));
}
.console-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px clamp(16px, 3vw, 24px); border-bottom: 1px solid var(--line);
}
.console-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.article .console-chips li {
  display: flex; align-items: center; gap: 7px; margin: 0;
  color: var(--dim); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.console-chips .ico { width: 14px; height: 14px; color: var(--teal-bright); }
.article .console-mark {
  flex: none; display: flex; align-items: center; gap: 8px;
  color: var(--dim); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.console-mark img { width: 22px; height: 22px; filter: drop-shadow(0 0 8px rgba(29, 181, 165, 0.5)); }
.article .console-mark:hover, .article .console-mark:focus-visible { color: var(--glow); }
.tool-console > :not(.console-bar) { padding: clamp(22px, 4.4vw, 46px); }
@media (max-width: 560px) { .console-mark span { display: none; } }

/* HYPER's card: the real mark, turning, and the way to the stores. */
.app-card {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 30px; align-items: center;
  max-width: 940px; margin: 64px auto 0; padding: 32px clamp(20px, 4vw, 42px);
  border-radius: 26px; border: 1px solid rgba(95, 224, 207, 0.2);
  background: radial-gradient(70% 120% at 0% 50%, rgba(29, 181, 165, 0.15), rgba(5, 5, 6, 0) 62%), rgba(10, 10, 13, 0.72);
}
.app-card-mark img { display: block; width: 112px; height: 112px; filter: drop-shadow(0 0 34px rgba(29, 181, 165, 0.5)); }
.article .app-card .eyebrow { text-align: left; margin: 0 0 6px; }
.article .app-card h2 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 28px); }
.article .app-card p { font-size: 15.5px; }
.article .app-card .store-row { justify-content: flex-start; margin: 18px 0 4px; }
@media (max-width: 640px) {
  .app-card { grid-template-columns: 1fr; gap: 14px; }
  .app-card-mark img { width: 72px; height: 72px; }
}

/* About: the answer assistants quote, then the questions, folded. */
.tool-about { max-width: 780px; margin: 64px auto 0; }
.article .tool-about-h { margin: 0 0 18px; font-size: clamp(20px, 2.6vw, 24px); }
.qa { border-top: 1px solid var(--line); }
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.article .qa summary h3 { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.4; color: var(--ink); transition: color 0.4s var(--ease-out); }
.qa summary:hover h3, .qa summary:focus-visible h3 { color: var(--glow); }
.qa summary:focus-visible { outline: 1px solid var(--glow); outline-offset: 2px; border-radius: 6px; }
.qa-ico { color: var(--dim); transition: transform 0.45s var(--ease-out); }
.qa[open] .qa-ico { transform: rotate(90deg); color: var(--teal-bright); }
.qa-body { padding: 0 2px 20px; }


.tool-more { max-width: 940px; margin: 64px auto 0; }
.article .tool-more .eyebrow { text-align: left; }
.tool-more ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.article .tool-more li { margin: 0; }
.article .tool-more a {
  display: flex; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 15px 16px;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
  color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 1.35;
  transition: border-color 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.article .tool-more a:hover, .article .tool-more a:focus-visible { border-color: rgba(95, 224, 207, 0.38); background: rgba(29, 181, 165, 0.06); }
.tool-more .ico { color: var(--teal-bright); }

/* The /learn/tools/ gallery. */
.tool-tiles { list-style: none; padding: 0; margin: 30px 0 34px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.article .tool-tile { margin: 0; }
.tool-tile a {
  display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; padding: 24px 22px 20px;
  border-radius: 22px; border: 1px solid rgba(199, 217, 209, 0.14); text-decoration: none;
  background: radial-gradient(90% 70% at 0% 0%, var(--tile-glow, rgba(29, 181, 165, 0.16)), rgba(5, 5, 6, 0) 60%), rgba(10, 10, 13, 0.75);
  transition: transform 0.6s var(--ease-out), border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.tool-tile a:hover, .tool-tile a:focus-visible { transform: translateY(-3px); border-color: rgba(95, 224, 207, 0.42); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.tile-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(29, 181, 165, 0.13); color: var(--teal-bright); }
.tile-ico .ico { width: 24px; height: 24px; }
.article .tool-tile b { color: var(--ink); font-weight: 300; font-size: 21px; }
.article .tool-tile span { color: var(--dim); font-size: 14.5px; }
.tool-tile em { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 6px; font-style: normal; color: var(--glow) !important; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; }
.tool-tile em .ico { width: 15px; height: 15px; }
.tile-note a { --tile-glow: rgba(199, 217, 209, 0.12); }
.tile-menu a { --tile-glow: rgba(183, 92, 232, 0.16); }
.tile-menu .tile-ico { background: rgba(183, 92, 232, 0.14); color: var(--glow); }
@media (prefers-reduced-motion: reduce) { .tool-tile a, .qa-ico { transition: none; } }

/* Buttons that carry an icon (copy, print, share, mail, …). */
.tool-btn .ico { width: 16px; height: 16px; margin-right: 8px; }
.tool-link .ico { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }

.tool-note-line { color: var(--dim) !important; font-size: 13.5px !important; margin: 14px 0 0 !important; }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.tool-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.tool-field label, .tool-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glow);
}
.tool-input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; min-height: 48px;
  border-radius: 14px; border: 1px solid var(--line-active);
  background: var(--abyss); color: var(--ink);
  font-family: var(--disp); font-size: 16px; font-weight: 300; line-height: 1.45;
  transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
textarea.tool-input { resize: vertical; min-height: 96px; }
.tool-input::placeholder { color: var(--ghost); }
.tool-input:focus { outline: none; border-color: rgba(199, 217, 209, 0.5); box-shadow: 0 0 0 3px rgba(199, 217, 209, 0.08); }

/* ── Buttons: one glowing way forward, quiet ways around it ─────────────── */
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid rgba(95, 224, 207, 0.4);
  background: rgba(29, 181, 165, 0.12); color: var(--ink);
  font-family: var(--disp); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.5s var(--ease-out), background 0.5s var(--ease-out), color 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.tool-btn:hover { border-color: var(--teal-bright); background: rgba(29, 181, 165, 0.2); }
.tool-btn.ghost { border-color: var(--line-active); background: transparent; color: var(--dim); }
.tool-btn.ghost:hover { border-color: rgba(255, 255, 255, 0.24); color: var(--ink); }
/* Asleep is not "disabled": it is dim, still focusable, and says what wakes it
   (the app's Echo seal, EchoRitual.tsx). */
.tool-btn[aria-disabled="true"] { opacity: 0.38; cursor: default; }
.tool-btn[aria-disabled="true"]:hover { border-color: rgba(95, 224, 207, 0.4); background: rgba(29, 181, 165, 0.12); }
.tool-link {
  background: none; border: none; padding: 10px 2px; min-height: 44px;
  color: var(--dim); font-family: var(--disp); font-size: 13px; letter-spacing: 0.08em;
  text-decoration: underline; text-decoration-color: var(--line-active); text-underline-offset: 4px;
  cursor: pointer;
}
.tool-link:hover { color: var(--glow); }

/* Spoken, not shown: the live regions that say "copied" or "set down". */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tool-said { min-height: 1.5em; margin: 10px 0 0 !important; color: var(--glow) !important; font-size: 13px !important; }

/* ── The bridge: where the tool's limit meets the app. Inline, never a modal ─ */
.tool-bridge {
  margin: 26px 0 0; padding: 22px 22px 18px;
  border-radius: 20px; border: 1px solid rgba(199, 217, 209, 0.14);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%), rgba(10, 10, 13, 0.6);
}
.tool-bridge[hidden] { display: none; }
.tool-bridge p { color: var(--dim); font-size: 15px; margin: 0 0 12px; }
.tool-bridge p b { color: var(--ink); font-weight: 400; }
.tool-bridge .store-row { justify-content: flex-start; margin: 16px 0 6px; }
.tool-bridge .tool-shortcut, .article .tool-shortcut { margin: 10px 0 0; font-size: 14px; }
.tool-bridge a:not(.store-badge), .article .tool-shortcut a { color: var(--glow); }
.tool-bridge-side { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 14px; }
/* The badges are a size container (site.css): beside the QR plate they need a
   width of their own, or they collapse under it. */
.tool-bridge-side .store-row { flex: 1 1 250px; min-width: 240px; max-width: 360px; margin: 0; justify-content: flex-start; }
.tool-bridge .tool-price { color: var(--dim); font-size: 14px; }
.tool-bridge .tool-price b { color: var(--glow); font-weight: 400; }

/* The QR plate: light, so a phone camera reads it off a dark screen. */
.qr-plate { display: flex; align-items: center; gap: 16px; margin: 0; }
.qr-plate img { display: block; width: 132px; height: 132px; padding: 10px; border-radius: 14px; background: var(--ink); }
.qr-plate figcaption { color: var(--dim); font-size: 14px; max-width: 30ch; }

/* ── Print: the dark site prints as near-blank paper, so a tool with
   something to print prints only its own sheet, black on white. The sheet is
   a direct child of <body>, filled on beforeprint; body.has-print is set only
   while a tool has content for it, so with nothing to print, ⌘P prints the
   page as it always did. */
.print-sheet { display: none; }
@media print {
  @page { margin: 18mm; }
  body.has-print { background: #fff !important; color: #000 !important; }
  body.has-print > *:not(.print-sheet) { display: none !important; }
  body.has-print > .print-sheet {
    display: block !important;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 12pt; line-height: 1.5; color: #000;
  }
  .print-sheet h1, .print-sheet h2, .print-sheet h3 { color: #000; font-weight: 600; margin: 0 0 6pt; }
  .print-sheet h1 { font-size: 18pt; }
  .print-sheet h2 { font-size: 10.5pt; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 14pt; }
  .print-sheet p, .print-sheet li { color: #000; margin: 0 0 5pt; white-space: pre-line; }
  .print-sheet ul { margin: 0 0 6pt; padding-left: 16pt; }
  .print-sheet .print-foot { margin-top: 18pt; font-size: 9pt; color: #555; white-space: normal; }
}

.tool-optional { margin-left: 8px; color: var(--dim); font-weight: 300; letter-spacing: 0.08em; text-transform: none; }

/* ── The action dock: a tool's ways out, on one quiet shelf ─────────────── */
.tool-dock { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.tool-dock .tool-label { display: block; margin: 0 0 12px; }

/* ── Where I left off: three numbered lines ─────────────────────────────── */
.leftoff-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.article .leftoff-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; align-items: start; margin: 0; }
.leftoff-n {
  padding-top: 31px; color: var(--teal-bright); font-size: 22px; font-weight: 200; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(95, 224, 207, 0.45);
}
.leftoff .tool-field { margin-bottom: 12px; }
.leftoff .tool-input { font-size: 17px; }
@media (max-width: 520px) {
  .article .leftoff-step { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; }
  .leftoff-n { font-size: 17px; }
}

/* HYPER's card, short: a pitch, three points, the stores. */
.app-card-points { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.article .app-card-points li { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink); font-size: 15.5px; }
.app-card-points .ico {
  width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 10px;
  background: rgba(29, 181, 165, 0.12); color: var(--teal-bright);
}
/* About: the short list, then the folded questions. */
.about-short { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.article .about-short li { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--dim); font-size: 15px; }
.about-short .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--teal-bright); }
.tool-about .answer p { font-size: clamp(16px, 2vw, 18px) !important; }
.kb .article.tools-index { max-width: 1040px; }
@media (max-width: 520px) {
  .tool-kicker { font-size: 9.5px !important; letter-spacing: 0.12em; padding: 6px 11px; }
  .console-bar { padding: 11px 14px; }
}

/* Labels stay labels: '.article p' would otherwise make them body-size grey. */
.article .app-card .eyebrow, .article .tool-more .eyebrow, .article p.tool-label { font-size: 12px; color: var(--glow); }
.article .console-mark { min-height: 44px; min-width: 44px; justify-content: flex-end; }
/* After a seal or a kept note/menu, the bridge in the console already offers the
   stores: the card below would only repeat it. */
.tool-console:has(.tool-bridge:not([hidden])) ~ .app-card { display: none; }
/* Questions, then sources (kept open: the footnotes point into them). */
.tool-qa { max-width: 780px; margin: 56px auto 0; }
.qa-sources { margin-top: 26px; }
.article .qa-sources h3 { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glow); }
.tool-qa .byline { margin: 24px 0 0; }
@media (max-width: 520px) {
  .console-chips { gap: 6px 12px; }
  .article .console-chips li { font-size: 10px; letter-spacing: 0.1em; gap: 5px; }
  .console-chips .ico { width: 12px; height: 12px; }
}