/* The shared kit every site option loads: the legal dialogs, the accessibility panel,
   the demo switcher, and the interactive mock of the idk window with its first-run tour.
   Everything here is scoped (.idk-*, .idkw, .w-*) so an option's own styles cannot
   reach it and it cannot reach them. Colours an option may want to match are tokens
   (--idk-dlg-*, --idk-ui-*), with defaults that read on light and dark. */

/* The app's name in the page's text, wrapped by boxName in kit.js. Black in both themes, like the
   logo's tile. An inline-block with line-height 1 is as tall as the word in any font, where an
   inline box takes the font's whole height and runs into the lines around a tight headline. The
   border is the fill's colour so the tile keeps an edge where forced colours remove the fill. */
.idk-word { display: inline-block; line-height: 1; padding: .01em .2em .03em; margin-inline: .03em; border: clamp(1px, .035em, 2.5px) solid #000; border-radius: .18em; background: #000; color: #fff; letter-spacing: 0; white-space: nowrap; }

:root {
  --idk-ui-bg: #FFFFFF; --idk-ui-fg: #191C22; --idk-ui-soft: #5A6270; --idk-ui-rule: #D9DDE3;
  --idk-ui-accent: #1F5673; --idk-ui-accent-ink: #FFFFFF; --idk-ui-shadow: 0 18px 50px rgba(9,11,15,.22);
  --idk-ui-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --idk-dlg-bg: var(--idk-ui-bg); --idk-dlg-fg: var(--idk-ui-fg); --idk-dlg-soft: var(--idk-ui-soft);
  --idk-dlg-rule: var(--idk-ui-rule); --idk-dlg-accent: var(--idk-ui-accent); --idk-dlg-accent-ink: var(--idk-ui-accent-ink);
  --idk-dlg-font: var(--idk-ui-font); --idk-dlg-head: var(--idk-ui-font); --idk-dlg-radius: 14px;
  --idk-ph-bg: #FFF1BF; --idk-ph-fg: #5B4300;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --idk-ui-bg: #1B1F25; --idk-ui-fg: #E7EAEF; --idk-ui-soft: #A0A8B5; --idk-ui-rule: #333A44;
    --idk-ui-accent: #8FBEDA; --idk-ui-accent-ink: #0E1A22; --idk-ui-shadow: 0 18px 50px rgba(0,0,0,.5);
    --idk-ph-bg: #4A3C0E; --idk-ph-fg: #FFE7A3;
  }
}
:root[data-theme="dark"] {
  --idk-ui-bg: #1B1F25; --idk-ui-fg: #E7EAEF; --idk-ui-soft: #A0A8B5; --idk-ui-rule: #333A44;
  --idk-ui-accent: #8FBEDA; --idk-ui-accent-ink: #0E1A22; --idk-ui-shadow: 0 18px 50px rgba(0,0,0,.5);
  --idk-ph-bg: #4A3C0E; --idk-ph-fg: #FFE7A3;
}

/* ───────── utilities */
.idk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.idk-ph { background: var(--idk-ph-bg); color: var(--idk-ph-fg); border-radius: 3px; padding: 0 .25em; font: inherit; }

/* The reader's own choices from the accessibility panel. They win over every option's styles. */
html.idk-still *, html.idk-still *::before, html.idk-still *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.idk-ul a, html.idk-ul [data-legal] { text-decoration: underline !important; text-underline-offset: .18em !important; }
html.idk-plain body, html.idk-plain body *:not(.idkw *):not(svg *) {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif !important; letter-spacing: normal !important;
}
html.idk-spaced body *:not(.idkw *) { line-height: 1.75 !important; letter-spacing: .02em !important; word-spacing: .08em !important; }
/* Grayscale and inverted colours are filters on the root, the one element whose filter does not
   become the containing block of what is fixed, so the accessibility button stays in its corner.
   Inverted, pictures are turned back, or a photo would show as its negative. High contrast is a
   set of tokens instead, here for the panel and the dialogs and in each option's own styles for
   the page, because a filter cannot choose which colours to raise. */
html.idk-gray { filter: grayscale(1); }
html.idk-invert { filter: invert(1) hue-rotate(180deg); }
html.idk-invert.idk-gray { filter: invert(1) hue-rotate(180deg) grayscale(1); }
html.idk-invert :is(img, video, picture) { filter: invert(1) hue-rotate(180deg); }
/* A modal dialog is drawn in the top layer, beside the root rather than inside it, so the root's
   filter misses it and it takes its own. Its backdrop is left alone: a dark veil inverted would
   be a light one over a dark page. */
html.idk-gray dialog[open] { filter: grayscale(1); }
html.idk-invert dialog[open] { filter: invert(1) hue-rotate(180deg); }
html.idk-invert.idk-gray dialog[open] { filter: invert(1) hue-rotate(180deg) grayscale(1); }
html.idk-contrast:root {
  --idk-ui-bg: #000; --idk-ui-fg: #fff; --idk-ui-soft: #fff; --idk-ui-rule: #fff;
  --idk-ui-accent: #ffe500; --idk-ui-accent-ink: #000; --idk-ui-shadow: none;
}

/* ───────── legal dialogs */
.idk-dlg { border: 0; padding: 0; margin: auto; width: min(720px, calc(100vw - 32px)); max-height: min(86vh, 900px);
  background: var(--idk-dlg-bg); color: var(--idk-dlg-fg); border-radius: var(--idk-dlg-radius); box-shadow: var(--idk-ui-shadow);
  font-family: var(--idk-dlg-font); overflow: hidden; }
.idk-dlg[open] { display: flex; flex-direction: column; }
.idk-dlg::backdrop { background: rgba(9,11,15,.55); backdrop-filter: blur(3px); }
.idk-dlg-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--idk-dlg-rule); }
.idk-dlg-head h2 { margin: 0; flex: 1; font-family: var(--idk-dlg-head); font-size: 1.35rem; line-height: 1.25; font-weight: 650; text-wrap: balance; }
.idk-dlg-x { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--idk-dlg-soft); font-size: 22px; line-height: 1; }
.idk-dlg-x:hover { background: color-mix(in oklab, var(--idk-dlg-fg) 8%, transparent); color: var(--idk-dlg-fg); }
.idk-dlg-x:focus-visible { outline: 2px solid var(--idk-dlg-accent); outline-offset: 2px; }
.idk-dlg-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 22px 26px; font-size: 1rem; line-height: 1.6; }
.idk-dlg-body h3 { font-family: var(--idk-dlg-head); font-size: 1.05rem; margin: 1.4em 0 .4em; }
.idk-dlg-body h3:first-child { margin-top: 0; }
.idk-dlg-body p, .idk-dlg-body li { max-width: 68ch; color: var(--idk-dlg-fg); }
.idk-dlg-body p { margin: 0 0 .75em; }
.idk-dlg-body ul { margin: 0 0 .9em; padding-inline-start: 1.25em; display: grid; gap: .35em; }
.idk-dlg-body .idk-meta { color: var(--idk-dlg-soft); font-size: .9rem; }
.idk-dlg-body a { color: var(--idk-dlg-accent); }
.idk-dlg-body .idk-note { border: 1px dashed var(--idk-dlg-rule); border-radius: 10px; padding: 10px 14px; color: var(--idk-dlg-soft); font-size: .9rem; margin-top: 1.4em; }
.idk-dlg-tabs { flex: none; display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--idk-dlg-rule); overflow-x: auto; }
.idk-dlg-tabs button { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 12px 9px; font-size: .9rem; color: var(--idk-dlg-soft); border-bottom: 2px solid transparent; white-space: nowrap; }
.idk-dlg-tabs button[aria-selected="true"] { color: var(--idk-dlg-fg); border-bottom-color: var(--idk-dlg-accent); font-weight: 600; }
.idk-dlg-tabs button:focus-visible { outline: 2px solid var(--idk-dlg-accent); outline-offset: -2px; border-radius: 6px; }

/* ───────── accessibility panel (bottom start corner) */
.idk-a11y-btn { all: unset; box-sizing: border-box; position: fixed; z-index: 9000; inset-inline-start: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--idk-ui-accent); color: var(--idk-ui-accent-ink); box-shadow: 0 6px 20px rgba(9,11,15,.28); }
.idk-a11y-btn svg { width: 28px; height: 28px; }
.idk-a11y-btn:focus-visible { outline: 3px solid var(--idk-ui-fg); outline-offset: 3px; }
.idk-a11y-btn[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in oklab, var(--idk-ui-accent) 35%, transparent); }
.idk-a11y { position: fixed; z-index: 9001; inset-inline-start: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: min(320px, calc(100vw - 32px));
  background: var(--idk-ui-bg); color: var(--idk-ui-fg); border: 1px solid var(--idk-ui-rule); border-radius: 14px; box-shadow: var(--idk-ui-shadow);
  font-family: var(--idk-ui-font); font-size: 15px; padding: 14px; display: grid; gap: 10px;
  /* Enlarged text, or a short screen, would otherwise push its top out of reach. */
  max-height: calc(100dvh - 92px - env(safe-area-inset-bottom, 0px)); overflow: auto; }
.idk-a11y[hidden] { display: none; }
.idk-a11y h2 { margin: 0; font-size: 16px; font-weight: 650; }
.idk-a11y .idk-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.idk-a11y .idk-tog { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 11px; border: 1px solid var(--idk-ui-rule); border-radius: 10px; font-size: 14.5px; }
.idk-a11y .idk-tog::after { content: ""; width: 34px; height: 20px; border-radius: 10px; flex: none;
  background: var(--idk-ui-rule) radial-gradient(circle 8px at 10px 50%, var(--idk-ui-bg) 98%, transparent) no-repeat; transition: background-position .15s; }
.idk-a11y .idk-tog[aria-pressed="true"]::after { background-color: var(--idk-ui-accent); background-image: radial-gradient(circle 8px at 24px 50%, var(--idk-ui-accent-ink) 98%, transparent); }
.idk-a11y .idk-size { display: flex; gap: 6px; }
.idk-a11y .idk-size button, .idk-a11y .idk-reset { all: unset; box-sizing: border-box; cursor: pointer; min-width: 40px; height: 36px; padding: 0 10px; display: grid; place-items: center;
  border: 1px solid var(--idk-ui-rule); border-radius: 9px; font-size: 14px; }
/* The letter grows with the size it sets, by class: the site's policy refuses a style attribute. */
.idk-a11y .idk-size .s0 { font-size: 9.5px; } .idk-a11y .idk-size .s1 { font-size: 11px; } .idk-a11y .idk-size .s2 { font-size: 13.5px; }
.idk-a11y .idk-size .s3 { font-size: 16px; } .idk-a11y .idk-size .s4 { font-size: 18.5px; }
.idk-a11y .idk-size button { min-width: 36px; }
.idk-a11y .idk-size button[aria-pressed="true"] { background: var(--idk-ui-accent); color: var(--idk-ui-accent-ink); border-color: var(--idk-ui-accent); }
.idk-a11y button:focus-visible { outline: 2px solid var(--idk-ui-accent); outline-offset: 2px; }
.idk-a11y .idk-links { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.idk-a11y .idk-links a { color: var(--idk-ui-accent); }
.idk-a11y .idk-fine { margin: 0; font-size: 12.5px; color: var(--idk-ui-soft); line-height: 1.45; }

/* ───────── live region for announcements */
.idk-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ═════════ the idk window mock ═════════ */
.idkw {
  --ground:#F5F6F8; --surface:#FFFFFF; --surface-2:#EEF0F4;
  --ink:#191C22; --ink-soft:#5A6270; --ink-faint:#858C99;
  --rule:#D9DDE3; --rule-soft:#E7EAEF;
  --accent:#1F5673; --accent-soft:#E3EDF2; --accent-line:#9FC0D2;
  --flag:#8A5510; --flag-soft:#F6ECDD; --flag-line:#D8B683;
  --warn:#973F31; --warn-soft:#F7E4E0; --warn-line:#D8A398;
  --revised:#4A5A3E; --revised-soft:#E9EEE3; --revised-line:#AEBC9E;
  --violet:#7E52A8; --violet-soft:#EEE8F5; --violet-line:#BFA9D8;
  --plum:#6B2F4C; --plum-soft:#F4E5EB; --plum-line:#D3A2B8;
  --armed:#3F7A5A; --armed-glow:rgba(63,122,90,.20);
  --claude:#C2603A; --codex:#6A55D8; --opencode:#14897F;
  --perm-edits:#7A4FD0; --perm-edits-soft:#EFE8FB; --perm-edits-line:#C3AEEC;
  --perm-plan:#2F7D73; --perm-plan-soft:#E2F1EE; --perm-plan-line:#9DCAC2;
  --perm-auto:#8A6A00; --perm-auto-soft:#FBF1D2; --perm-auto-line:#E0C46A;
  --found:rgba(242,201,76,.42); --found-now:#F2B61B;
  --merged:#B392F0; --chrome-warn:#E09384;
  --busy:#E97C3F; --busy-glow:rgba(233,124,63,.5);
  --need:#D9A21B; --need-glow:rgba(217,162,27,.4);
  --unread:#3D8BE0;
  --chrome:#20242B; --chrome-2:#2A2F38; --chrome-ink:#C9CFD9; --chrome-faint:#7F8798;
  --term:#14171C; --term-ink:#D6DBE3;
  --shade:rgba(9,11,15,.58);
  /* the reading pane's four grounds, one a level, as the app's stack draws them: the page, the
     anatomy, its Architecture half and a flow. g is the ground, s the surface, u the second surface,
     r the rule and q the soft rule; .w-centre blends them as the reader scrolls. */
  --g1:#F5F6F8; --s1:#FFFFFF; --u1:#EEF0F4; --r1:#D9DDE3; --q1:#E7EAEF;
  --g2:#EFE9DB; --s2:#FBF8F0; --u2:#E6DECB; --r2:#D0C4AB; --q2:#DFD5C0;
  --g4:#E8ECE2; --s4:#FAFBF6; --u4:#DEE3D5; --r4:#C4CCB8; --q4:#D7DECD;
  --g3:#EAF0F5; --s3:#FFFFFF; --u3:#DDE5ED; --r3:#C5D0DB; --q3:#D6DFE8;
  /* the reading: the three kinds of view, the player's Play and its stop line, a
     value's type and its light, and the flows' lines on the map */
  --k-work:#945600; --k-call:#1F6FA8; --k-rally:#1E7A50;
  --p-accent:#E8961A; --p-accent-ink:#1A1200; --p-warn:#C2410C;
  --v-lit:#FFD98A; --v-lit-ink:#2A1E00;
  --v-list:#1F6FA8; --v-dict:#7E52A8; --v-rec:#8A5510; --v-text:#3F7A5A; --v-num:#A4522F; --v-yn:#2C7A7A;
  --m1:#1F6FA8; --m2:#945600; --m3:#1E7A50; --m4:#7E52A8; --m5:#A4522F;
  /* the change and demo pages' box (diffs.css, the app's): a fix's green, a process's amber, a
     sequence's violet, and the player's three kinds by the views' own */
  --fix:#1E7A50; --fix-soft:#DFF0E7; --fix-line:#97CBB0; --proc:#945600;
  --seq:#7E52A8; --seq-soft:#EEE8F5; --seq-line:#BFA9D8; --seq-ground:#FAF8FC; --seqkey:#7E52A8; --seqkey-ink:#FFFFFF; --seqkey-hi:#9466C2;
  --p-work:var(--k-work); --p-call:var(--k-call); --p-rally:var(--k-rally);
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --coach-font: var(--sans); --coach-head: var(--serif);
  position: relative; display: block; width: 100%; color: var(--ink); text-align: start;
}
.idkw.is-dark, :root[data-theme="dark"] .idkw.is-auto {
  --ground:#15181D; --surface:#1B1F25; --surface-2:#232830;
  --ink:#E7EAEF; --ink-soft:#A0A8B5; --ink-faint:#767E8C;
  --rule:#333A44; --rule-soft:#2A303A;
  --accent:#8FBEDA; --accent-soft:#1D2B36; --accent-line:#3C5A6E;
  --flag:#D9AE6C; --flag-soft:#2E2519; --flag-line:#5E4A29;
  --warn:#E09384; --warn-soft:#33201C; --warn-line:#6B403A;
  --revised:#A9BE95; --revised-soft:#212819; --revised-line:#48573A;
  --violet:#9A80D8; --violet-soft:#241F33; --violet-line:#4B4270;
  --plum:#D0708F; --plum-soft:#321E27; --plum-line:#683A4C;
  --armed:#7FBE9B; --armed-glow:rgba(127,190,155,.22);
  --claude:#E58A62; --codex:#A898F0; --opencode:#4FD1C1;
  --perm-edits:#AF87FF; --perm-edits-soft:#261E38; --perm-edits-line:#574683;
  --perm-plan:#5CB5A8; --perm-plan-soft:#18292A; --perm-plan-line:#2F5F59;
  --perm-auto:#FFC107; --perm-auto-soft:#2F2710; --perm-auto-line:#6E5A1D;
  --found:rgba(242,201,76,.30); --found-now:#C9961A;
  --busy:#F28A4C; --busy-glow:rgba(242,138,76,.55);
  --need:#F2C94C; --need-glow:rgba(242,201,76,.45);
  --unread:#5AA9FF;
  --chrome:#101317; --chrome-2:#181C22; --chrome-ink:#B4BCC8; --chrome-faint:#6E7686;
  --term:#0C0E12; --shade:rgba(0,0,0,.64);
  --g1:#15181D; --s1:#1B1F25; --u1:#232830; --r1:#333A44; --q1:#2A303A;
  --g2:#1A1712; --s2:#221D16; --u2:#2B251C; --r2:#463C2B; --q2:#382F23;
  --g4:#15190F; --s4:#1C2117; --u4:#252B1F; --r4:#3C4532; --q4:#2F3627;
  --g3:#11171E; --s3:#171E26; --u3:#1F2831; --r3:#30404E; --q3:#26323E;
  --k-work:#FFB340; --k-call:#6CB6FF; --k-rally:#7FE0B0;
  --p-accent:#FFB340; --p-accent-ink:#1A1200; --p-warn:#FF7A59;
  --v-lit:#FFB340; --v-lit-ink:#1A1200;
  --v-list:#6CC5F0; --v-dict:#D59BFF; --v-rec:#F0C36C; --v-text:#9FDCAE; --v-num:#F3A683; --v-yn:#8AD4D4;
  --m1:#6CB6FF; --m2:#FFB340; --m3:#7FE0B0; --m4:#D59BFF; --m5:#F3A683;
  --fix:#7FE0B0; --fix-soft:#14281E; --fix-line:#2F5E46; --proc:#FFB340;
  --seq:#B9A3EE; --seq-soft:#241F33; --seq-line:#4B4270; --seq-ground:#16141D; --seqkey:#9A80D8; --seqkey-ink:#14111C; --seqkey-hi:#B39CF0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .idkw.is-auto {
    --ground:#15181D; --surface:#1B1F25; --surface-2:#232830;
    --ink:#E7EAEF; --ink-soft:#A0A8B5; --ink-faint:#767E8C;
    --rule:#333A44; --rule-soft:#2A303A;
    --accent:#8FBEDA; --accent-soft:#1D2B36; --accent-line:#3C5A6E;
    --flag:#D9AE6C; --flag-soft:#2E2519; --flag-line:#5E4A29;
    --warn:#E09384; --warn-soft:#33201C; --warn-line:#6B403A;
    --revised:#A9BE95; --revised-soft:#212819; --revised-line:#48573A;
    --violet:#9A80D8; --violet-soft:#241F33; --violet-line:#4B4270;
    --plum:#D0708F; --plum-soft:#321E27; --plum-line:#683A4C;
    --armed:#7FBE9B; --armed-glow:rgba(127,190,155,.22);
    --claude:#E58A62; --codex:#A898F0; --opencode:#4FD1C1;
    --perm-edits:#AF87FF; --perm-edits-soft:#261E38; --perm-edits-line:#574683;
    --perm-plan:#5CB5A8; --perm-plan-soft:#18292A; --perm-plan-line:#2F5F59;
    --perm-auto:#FFC107; --perm-auto-soft:#2F2710; --perm-auto-line:#6E5A1D;
    --found:rgba(242,201,76,.30); --found-now:#C9961A;
    --busy:#F28A4C; --busy-glow:rgba(242,138,76,.55);
    --need:#F2C94C; --need-glow:rgba(242,201,76,.45);
    --unread:#5AA9FF;
    --chrome:#101317; --chrome-2:#181C22; --chrome-ink:#B4BCC8; --chrome-faint:#6E7686;
    --term:#0C0E12; --shade:rgba(0,0,0,.64);
    --g1:#15181D; --s1:#1B1F25; --u1:#232830; --r1:#333A44; --q1:#2A303A;
    --g2:#1A1712; --s2:#221D16; --u2:#2B251C; --r2:#463C2B; --q2:#382F23;
    --g4:#15190F; --s4:#1C2117; --u4:#252B1F; --r4:#3C4532; --q4:#2F3627;
    --g3:#11171E; --s3:#171E26; --u3:#1F2831; --r3:#30404E; --q3:#26323E;
    --k-work:#FFB340; --k-call:#6CB6FF; --k-rally:#7FE0B0;
    --p-accent:#FFB340; --p-accent-ink:#1A1200; --p-warn:#FF7A59;
    --v-lit:#FFB340; --v-lit-ink:#1A1200;
    --v-list:#6CC5F0; --v-dict:#D59BFF; --v-rec:#F0C36C; --v-text:#9FDCAE; --v-num:#F3A683; --v-yn:#8AD4D4;
    --m1:#6CB6FF; --m2:#FFB340; --m3:#7FE0B0; --m4:#D59BFF; --m5:#F3A683;
    --fix:#7FE0B0; --fix-soft:#14281E; --fix-line:#2F5E46; --proc:#FFB340;
    --seq:#B9A3EE; --seq-soft:#241F33; --seq-line:#4B4270; --seq-ground:#16141D; --seqkey:#9A80D8; --seqkey-ink:#14111C; --seqkey-hi:#B39CF0;
  }
}
.idkw, .idkw * { box-sizing: border-box; }
.idkw :where(button) { all: unset; box-sizing: border-box; cursor: pointer; }
.idkw :where(button):focus-visible { outline: 2px solid #8FBEDA; outline-offset: 2px; border-radius: 4px; }
.idkw :where(code) { font-family: var(--mono); font-size: .88em; }
.idkw :where(p, h1, h2, h3, h4, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
.idkw :where(ol, ul) { padding: 0; }
@keyframes idkw-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }

.idkw .w-fit { position: relative; width: 100%; max-width: 100%; margin-inline: auto; overflow: hidden; border-radius: 12px; }
/* The window is 640 tall and at least 1000 wide. The sidebar and the chat keep their widths and the
   reading pane takes the rest, the way the app's columns do; a window wide enough gets the app's
   full-size columns. */
.idkw .w-win { --railw: 220px; --chatw: 272px;
  position: absolute; left: 0; top: 0; width: 1000px; height: 640px; transform-origin: 0 0; background: var(--chrome); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; font-family: var(--sans); font-size: 13px; line-height: 1.35; direction: ltr; text-align: left; color: var(--ink); }
.idkw .w-win.wide { --railw: 322px; --chatw: 360px; }
.idkw .w-win.mid { --railw: 270px; --chatw: 316px; }
.idkw.has-shadow .w-fit { box-shadow: 0 24px 60px -12px rgba(9,11,15,.45), 0 0 0 1px rgba(255,255,255,.04); }
.idkw .w-sp { flex: 1; }
.idkw .w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ───── the strip: always the dark of the dark theme, whatever the window's theme */
.idkw .w-strip { --sc: #101317; --sc2: #181C22; --sink: #B4BCC8; --sfaint: #6E7686;
  position: relative; flex: none; height: 36px; display: flex; align-items: flex-end; gap: 2px; padding: 0 8px 0 84px; background: var(--sc); box-shadow: inset 0 -1px 0 rgba(255,255,255,.07); }
.idkw .w-lights { position: absolute; left: 14px; top: 12px; display: flex; gap: 8px; }
.idkw .w-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.idkw .w-lights i:nth-child(2) { background: #FEBC2E; } .idkw .w-lights i:nth-child(3) { background: #28C840; }
.idkw .w-tabs { display: flex; align-items: flex-end; gap: 2px; min-width: 0; }
.idkw .w-wgroup { display: flex; align-items: flex-end; }
.idkw .w-wtab { position: relative; display: flex; align-items: center; gap: 7px; max-width: 220px; padding: 7px 9px 8px 11px; border-radius: 6px 6px 0 0; font-size: 11.5px; color: var(--sfaint); white-space: nowrap; }
.idkw .w-wtab:hover { color: var(--sink); }
.idkw .w-wtab.on { z-index: 1; background: var(--sc2); color: #fff; font-weight: 600; }
.idkw .w-wtab.has-wt { max-width: 300px; }
.idkw .w-wtab .w-nm { font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.idkw .w-wtab .w-bm { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1.5px; opacity: .7; }
.idkw .w-wt { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: rgba(180,188,200,.12); color: #9AA3B2; }
.idkw .w-wtab .w-dot { width: 7px; height: 7px; border-radius: 50%; background: #5AA9FF; box-shadow: 0 0 0 2px rgba(90,169,255,.18); flex: none; }
.idkw .w-bang { width: 14px; height: 14px; border-radius: 50%; background: #F2C94C; color: #241C04; font-size: 10px; font-weight: 800; font-style: normal; display: grid; place-items: center; flex: none; }
.idkw .w-mk { display: inline-flex; align-items: center; gap: 3px; font: 600 10.5px var(--mono); }
.idkw .w-mk svg { width: 13px; height: 13px; }
.idkw .w-mk.dirty { color: #D5DCE6; } .idkw .w-mk.ahead { color: #5FCB8A; } .idkw .w-mk.conflict { color: #F0716A; } .idkw .w-mk.merged { color: #B392F0; }
.idkw .w-wtab .w-x { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 3px; color: var(--sfaint); font-size: 13px; font-weight: 400; opacity: 0; }
.idkw .w-wtab:hover .w-x, .idkw .w-wtab.on .w-x { opacity: 1; }
.idkw .w-wtab .w-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.idkw .w-wtab.busy { color: #fff; }
.idkw .w-wtab.busy::after, .idkw .w-wtab.need::after, .idkw .w-wtab.done::after { content: ""; position: absolute; inset: 0; border-radius: 6px 6px 0 0; pointer-events: none; }
.idkw .w-wtab.busy::after { box-shadow: inset 0 0 0 1.5px #F28A4C, 0 0 12px rgba(242,138,76,.55); animation: idkw-breathe 2.2s ease-in-out infinite; }
/* Claude Code working in the shell in front: the shell's tab and the shell are one outline. The tab
   draws its three sides, the rim the row's foot either side of it, and the shell its other three. */
.idkw .w-wtab.sh.joined::after { content: ""; position: absolute; inset: 0; border: 1.5px solid #F28A4C; border-bottom: 0; border-radius: 6px 6px 0 0; pointer-events: none; animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-strip .w-rim { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: #F28A4C; pointer-events: none; animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-wtab.need::after { box-shadow: inset 0 0 0 2px #F2C94C, 0 0 14px rgba(242,201,76,.45); }
.idkw .w-wtab.done .w-nm { opacity: .55; }
.idkw .w-wtab.done::after { box-shadow: inset 0 0 0 1.5px #B392F0; }
.idkw .w-wtab.sh { gap: 6px; padding-left: 9px; }
.idkw .w-wtab .w-pr { font: 600 10px var(--mono); color: var(--sfaint); }
.idkw .w-wtab .w-pr.cm { color: inherit; display: inline-flex; }
.idkw .w-wtab .w-pr.cm svg { width: 12px; height: 12px; }
.idkw .w-wtab.sh .w-nm { font-size: 11px; }
.idkw .w-wgroup.pair > .w-wtab:first-child { padding-right: 14px; }
.idkw .w-wgroup.pair > .w-wtab.sh { padding-left: 14px; }
.idkw .w-wgroup.pair > .w-wtab:not(.on) { color: var(--sfaint); font-weight: 400; }
.idkw .w-joint { align-self: center; z-index: 2; width: 20px; height: 20px; margin: 0 -6px; display: grid; place-items: center; border-radius: 50%; background: var(--sc); border: 1px solid rgba(255,255,255,.2); color: #D5DCE6; }
.idkw .w-wgroup.pair.on .w-joint { background: #232831; }
.idkw .w-joint svg { width: 12px; height: 12px; }
.idkw .w-wtab.set { font-weight: 400; }
.idkw .w-wtab.set.on { font-weight: 600; }
.idkw .w-wtab.set svg.w-gearic { width: 13px; height: 13px; }
.idkw .w-pinsep { width: 1px; height: 16px; margin: 0 6px 0 4px; background: rgba(255,255,255,.14); align-self: center; }
.idkw .w-plus { align-self: center; margin-left: 2px; color: var(--sfaint); font-size: 15px; line-height: 1; padding: 2px 9px 3px; border-radius: 5px; }
.idkw .w-plus:hover, .idkw .w-plus[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.07); }
/* The ↻ that reads the tab's .idk/ again: the first thing pushed right, just left of the repo button. */
.idkw .w-reload { flex: none; margin-left: auto; margin-right: 6px; align-self: center; display: flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border-radius: 5px; color: var(--sfaint); }
.idkw .w-reload svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.idkw .w-reload:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.07); }
.idkw .w-reload:disabled { opacity: .35; cursor: default; }
.idkw .w-reload.reading svg { animation: idkw-spin .8s linear infinite; }
.idkw .w-reload + .w-repo { margin-left: 0; }
.idkw .w-repo { position: relative; align-self: center; margin-left: auto; display: flex; align-items: center; gap: 7px; max-width: 260px; padding: 4px 9px 4px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.idkw .w-repo:hover, .idkw .w-repo[aria-expanded="true"] { border-color: rgba(255,255,255,.3); }
.idkw .w-repo > svg { width: 13px; height: 13px; color: var(--sink); flex: none; }
.idkw .w-repo .w-chev { color: var(--sfaint); font-weight: 400; font-size: 10px; }
.idkw .w-others { display: inline-flex; align-items: center; gap: 4px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.12); }
.idkw .w-od { width: 7px; height: 7px; border-radius: 50%; }
.idkw .w-od.busy { background: #F28A4C; box-shadow: 0 0 6px rgba(242,138,76,.55); animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-od.unread { background: #5AA9FF; }
.idkw .w-od.need { background: #F2C94C; }
.idkw .w-repo.busy::after, .idkw .w-repo.need::after { content: ""; position: absolute; inset: -1px; border-radius: 6px; pointer-events: none; }
.idkw .w-repo.busy::after { box-shadow: inset 0 0 0 1.5px #F28A4C, 0 0 12px rgba(242,138,76,.55); animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-repo.need::after { box-shadow: inset 0 0 0 2px #F2C94C, 0 0 14px rgba(242,201,76,.45); }

/* a menu hanging from + or the repo button, drawn as the platform draws one */
.idkw .w-menu { position: absolute; top: 34px; z-index: 30; min-width: 250px; padding: 5px; border-radius: 8px; background: #2B3038; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.45); color: #E6E9EE; font-size: 12.5px; display: grid; gap: 1px; }
.idkw .w-menu.right { right: 8px; }
.idkw .w-menu button { display: flex; align-items: center; gap: 8px; padding: 4px 9px; border-radius: 5px; white-space: pre; }
.idkw .w-menu button:hover { background: #3D6E8F; color: #fff; }
.idkw .w-menu kbd { margin-left: auto; padding-left: 18px; font-family: var(--sans); font-size: 11.5px; color: #9AA2AF; }
.idkw .w-menu .w-tick { width: 12px; display: grid; place-items: center; flex: none; }
.idkw .w-menu .w-mdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.idkw .w-mdot.busy { background: rgb(242,138,76); } .idkw .w-mdot.need { background: rgb(242,201,76); }
.idkw .w-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 4px 6px; }

.idkw .w-body { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--railw) minmax(0,1fr) var(--chatw); position: relative; background: var(--ground); }

/* ───── the rail: the chrome of the window's theme */
.idkw .w-rail { position: relative; background: var(--chrome); color: var(--chrome-ink); font-family: var(--sans); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.idkw .w-brand { position: relative; display: flex; align-items: center; gap: 8px; padding: 13px 10px 13px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.idkw .w-who { flex: 1; min-width: 0; }
.idkw .w-brand .w-n { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.idkw .w-brand .w-r { margin-top: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--chrome-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idkw .w-brand .w-r svg { width: 10.5px; height: 10.5px; margin-right: 3px; vertical-align: -1px; }
.idkw .w-brand .w-gwt { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: rgba(127,190,155,.16); color: #7FBE9B; }
.idkw .w-sync { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--chrome-faint); }
.idkw .w-sync svg { width: 24px; height: 24px; overflow: visible; }
.idkw .w-sync .arm { fill: none; stroke: currentColor; stroke-width: 7.8; stroke-linecap: round; stroke-linejoin: round; }
.idkw .w-sync circle { fill: currentColor; }
.idkw .w-sync .w-sdot { display: none; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #D9AE6C; box-shadow: 0 0 0 2px var(--chrome); }
.idkw .w-sync.idle { opacity: .4; }
.idkw .w-sync.live, .idkw .w-sync.waiting { color: #fff; background: rgba(255,255,255,.08); }
.idkw .w-sync.live:hover { background: rgba(255,255,255,.14); }
.idkw .w-sync.live .w-sdot { display: block; }
.idkw .w-sync.busy { color: #fff; background: rgba(233,124,63,.14); box-shadow: 0 0 12px var(--busy-glow); animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-sync.busy .w-body1 { animation: idkw-shrug 1.1s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes idkw-shrug { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-4deg); } 75% { transform: translateY(-3px) rotate(4deg); } }
.idkw .w-synccard { display: none; position: absolute; z-index: 40; top: calc(100% - 4px); left: 8px; right: 8px; padding: 10px 12px 9px; background: var(--chrome-2); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.idkw .w-sync:hover + .w-synccard, .idkw .w-sync:focus-visible + .w-synccard, .idkw .w-synccard.shown { display: block; }
.idkw .w-synch { font-size: 12.5px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.idkw .w-syncl { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--chrome-ink); }
.idkw .w-syncl .k { flex: 0 0 58px; color: var(--chrome-faint); }
.idkw .w-synccard.busy .w-syncl .k { flex-basis: 64px; }
.idkw .w-syncf { font-size: 11px; line-height: 1.45; color: var(--chrome-faint); }
.idkw .w-syncl + .w-syncf { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); }
.idkw .w-sgbar { flex: 1; align-self: center; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; display: block; }
.idkw .w-sgbar i { display: block; height: 100%; width: 0; background: var(--busy); transition: width .4s; }
.idkw .w-sgn { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.idkw .w-rtabs { display: flex; gap: 2px; padding: 9px 9px 0; }
.idkw .w-rtab { flex: 1; text-align: center; padding: 7px 0 8px; font-size: 11.5px; letter-spacing: .03em; color: var(--chrome-faint); border-radius: 4px 4px 0 0; }
.idkw .w-rtab:hover { color: var(--chrome-ink); }
.idkw .w-rtab.on { color: #fff; background: var(--chrome-2); font-weight: 600; }
.idkw .w-rbody { flex: 1; min-height: 0; overflow: auto; padding: 11px 9px 16px; background: var(--chrome-2); scrollbar-width: thin; }
.idkw .w-rfoot { padding: 7px 9px 9px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 2px; background: var(--chrome); }
.idkw .w-tb { position: relative; width: 30px; height: 28px; display: grid; place-items: center; border-radius: 5px; color: var(--chrome-faint); }
.idkw .w-tb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.idkw .w-tb:hover, .idkw .w-tb[aria-expanded="true"] { background: rgba(255,255,255,.08); color: #fff; }
.idkw .w-tb[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.06); }
.idkw .w-tb .lit { display: none; }
.idkw .w-tb[aria-pressed="true"] .lit { display: inline; }
.idkw .w-gearpop { position: absolute; z-index: 30; left: 9px; bottom: 46px; width: 270px; padding: 5px; background: var(--chrome-2); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.idkw .w-gearrow { display: flex; gap: 10px; width: 100%; padding: 6px 9px; border-radius: 4px; font-size: 12.5px; color: var(--chrome-ink); }
.idkw .w-gearrow:hover { background: rgba(255,255,255,.07); color: #fff; }
.idkw .w-gearrow .k { margin-left: auto; font-size: 11px; color: var(--chrome-faint); }
.idkw .w-gearsep { height: 1px; margin: 5px 4px; background: rgba(255,255,255,.08); }

/* pips, group heads and the rail's buttons */
.idkw .w-grp { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-faint); padding: 12px 7px 6px; }
.idkw .w-pip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 3px; font-size: 9.5px; letter-spacing: .05em; font-weight: 600; white-space: nowrap; }
.idkw .w-pip.ok { background: rgba(143,190,218,.13); color: #8FBEDA; }
.idkw .w-pip.old { background: var(--flag-soft); color: var(--flag); }
.idkw .w-pip.quiet { background: rgba(255,255,255,.05); color: var(--chrome-faint); }
.idkw .w-pip.hand { background: rgba(169,190,149,.16); color: #B9CBA6; }
.idkw .w-railcta { display: block; width: 100%; margin: 0 0 8px; padding: 9px 0; border-radius: 5px; border: 1px solid var(--accent); background: var(--accent); color: var(--ground); font-size: 12px; letter-spacing: .02em; text-align: center; }
.idkw .w-railcta.quiet { border: 1px dashed rgba(255,255,255,.18); background: none; color: var(--chrome-ink); }
.idkw .w-railcta.quiet:hover { border-color: rgba(255,255,255,.3); }
.idkw .w-quietbtn { text-align: left; padding: 5px 9px; border-radius: 4px; font-size: 11px; color: var(--chrome-faint); }
.idkw .w-quietbtn:hover { color: #fff; background: rgba(255,255,255,.04); }
/* The parts nobody has written under one row, as one faint line that lists them (logicrail.ts). */
.idkw .w-moresug { flex: 1; min-width: 0; display: block; text-align: start; padding: 4px 8px; border-radius: 5px; font-size: 12px; font-style: italic; line-height: 1.35; color: var(--chrome-faint); }
.idkw .w-moresug:hover, .idkw .w-moresug:focus-visible { color: var(--chrome-ink); background: rgba(255,255,255,.05); }

/* the Flows tab: a tree. A key feature is a row with a chevron that folds the flows filed under it;
   a first-level flow hangs off it on a guide with its number; a deeper flow branches off its own. */
.idkw .w-row { display: flex; align-items: flex-start; --gw: 20px; --gx: 10px; --gy: 14px; --guide: rgba(255,255,255,.13); --dot: rgba(255,255,255,.30); }
.idkw .w-guides { display: flex; flex: none; align-self: stretch; }
.idkw .w-g { position: relative; flex: 0 0 var(--gw); }
.idkw .w-g.thru::before, .idkw .w-g.tee::before { content: ""; position: absolute; left: var(--gx); top: 0; bottom: 0; width: 1px; background: var(--guide); }
.idkw .w-g.end::before { content: ""; position: absolute; left: var(--gx); top: 0; height: var(--gy); width: 1px; background: var(--guide); }
.idkw .w-g.tee::after, .idkw .w-g.end::after { content: ""; position: absolute; left: var(--gx); top: var(--gy); width: calc(var(--gw) - var(--gx) + 4px); height: 1px; background: var(--guide); }
.idkw .w-row.leaf .w-g.tee::after, .idkw .w-row.leaf .w-g.end::after { width: calc(var(--gw) - var(--gx) + 22px); }
.idkw .w-mk2 { position: relative; flex: 0 0 var(--gw); align-self: stretch; }
.idkw .w-mk2.stem::after { content: ""; position: absolute; left: var(--gx); width: 1px; top: calc(var(--gy) + 3px); bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--dot) 0 1px, transparent 1px 3px); }
.idkw .w-tw { flex: 0 0 var(--gw); width: var(--gw); height: 20px; margin-top: calc(var(--gy) - 10px); border-radius: 4px; color: var(--chrome-faint); display: flex; align-items: center; justify-content: center; }
.idkw .w-tw::before { content: ""; width: 5px; height: 5px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateX(-2px) rotate(-45deg); transition: transform .14s ease; }
.idkw .w-tw[aria-expanded="true"]::before { transform: translateY(-2px) rotate(45deg); }
.idkw .w-tw:hover { color: #fff; background: rgba(255,255,255,.08); }
.idkw .w-tw.none { display: block; cursor: default; }
.idkw .w-tw.none::before { content: none; }
.idkw .w-row .w-ord { flex: none; width: 16px; padding-top: 7px; text-align: right; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--chrome-faint); }
.idkw .w-node { flex: 1; min-width: 0; display: block; text-align: start; padding: 6px 8px; border-radius: 5px; font-size: 12.5px; line-height: 1.35; color: var(--chrome-ink); }
.idkw .w-node:hover { background: rgba(255,255,255,.05); }
.idkw .w-node.on { background: var(--chrome-2); color: #fff; }
.idkw .w-rbody .w-node.on { background: rgba(255,255,255,.09); }
.idkw .w-node .w-ttl { text-wrap: pretty; }
.idkw .w-node .w-sub { display: flex; gap: 5px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.idkw .w-node.suggested .w-ttl, .idkw .w-node.writing .w-ttl { color: var(--chrome-faint); font-style: italic; }
.idkw .w-node.suggested:hover .w-ttl { color: var(--chrome-ink); }
.idkw .w-node.feature .w-ttl { font-weight: 600; }
.idkw .w-node.here { box-shadow: inset 2px 0 0 #8FBEDA; }
.idkw .w-node .w-evid { margin-top: 4px; font-size: 10.5px; line-height: 1.4; color: rgba(255,255,255,.28); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The rail in edit mode, as the app's (editrail.ts): a grip on every flow that moves, an × on its
   right that shows on hover, the line where a dragged flow would land, and the two questions a
   removal or a drop onto a flow asks at the head of the rail. A row that does not move keeps a
   grip's room, so the tree's guides stay in line. */
.idkw .w-grip { flex: none; align-self: center; width: 12px; margin-inline-end: 2px; color: var(--chrome-faint); font-size: 11px; cursor: grab; user-select: none; -webkit-user-select: none; }
.idkw .w-grip.none { cursor: default; }
.idkw .w-row.editable { position: relative; }
.idkw .w-railx { flex: none; align-self: center; width: 20px; height: 20px; border-radius: 50%; color: var(--chrome-faint); font-size: 13px; line-height: 1; opacity: 0; }
.idkw .w-row:hover .w-railx, .idkw .w-railx:focus-visible { opacity: 1; }
.idkw .w-railx:hover { background: rgba(255,255,255,.08); color: #E09384; }
.idkw .lifted { opacity: .4; }
.idkw .w-row.drop-before { box-shadow: 0 -2px 0 #8FBEDA; }
.idkw .w-row.drop-after { box-shadow: 0 2px 0 #8FBEDA; }
.idkw .w-row.drop-under { background: rgba(143,190,218,.14); box-shadow: inset 0 0 0 1px rgba(143,190,218,.55); border-radius: 5px; }
.idkw .w-railsheet { margin: 4px 4px 10px; padding: 10px 11px; border: 1px solid rgba(143,190,218,.4); border-radius: 6px; background: var(--chrome-2); color: var(--chrome-ink); font-size: 12px; line-height: 1.45; }
.idkw .w-railsheet .q { margin: 0 0 8px; font-weight: 600; color: #fff; }
.idkw .w-railsheet .note { margin: 6px 0 0; color: var(--chrome-faint); font-size: 11.5px; }
.idkw .w-railsheet ul.gone { margin: 0; padding-inline-start: 18px; }
.idkw .w-railsheet label { display: block; margin: 0 0 6px; color: var(--chrome-faint); }
.idkw .w-railsheet select { max-width: 100%; margin-inline-start: 4px; font: inherit; font-size: 11.5px; }
.idkw .w-railsheet .btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.idkw .w-railsheet .w-sbtn, .idkw .w-railsheet .w-savebtn { padding: 3px 10px; font-size: 11.5px; }
.idkw .w-treefoot { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.idkw .w-outline { margin-top: 14px; }
.idkw .w-outrow { display: flex; gap: 7px; width: 100%; text-align: start; padding: 4px 9px; border-radius: 4px; color: var(--chrome-faint); font-size: 11.5px; line-height: 1.4; }
.idkw .w-outrow:hover { background: rgba(255,255,255,.05); color: var(--chrome-ink); }
.idkw .w-outrow .n { flex: none; width: 1.4em; text-align: end; font-variant-numeric: tabular-nums; opacity: .7; }
.idkw .w-outrow .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idkw .w-outrow.here { color: #fff; background: rgba(255,255,255,.08); }

/* the Tests tab */
.idkw .w-way { position: relative; margin-bottom: 2px; }
.idkw .w-way .w-x2 { position: absolute; top: -5px; left: -5px; z-index: 2; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--chrome-faint); font-size: 11px; line-height: 1; opacity: 0; }
.idkw .w-way:hover .w-x2 { opacity: 1; }
.idkw .w-way .w-wbody { display: block; width: 100%; text-align: left; padding: 8px 9px; border-radius: 5px; color: var(--chrome-ink); font-size: 12.5px; line-height: 1.4; }
.idkw .w-way .w-wbody:hover { background: rgba(255,255,255,.05); }
.idkw .w-way .w-railcta { text-align: left; padding: 9px 11px; }
.idkw .w-way.run .w-railcta { opacity: .8; }
.idkw .w-way code { font-family: var(--mono); font-size: 11.5px; background: none; padding: 0; color: inherit; }
.idkw .w-way .w-sub { display: flex; gap: 6px; align-items: baseline; margin-top: 5px; font-size: 10.5px; color: var(--chrome-faint); flex-wrap: wrap; }
.idkw .w-way .w-sub .why { flex: 1 1 8rem; line-height: 1.4; }
.idkw .w-way .w-railcta .w-sub { color: rgba(255,255,255,.75); }
.idkw .w-way .w-railcta .w-sub .w-pip.old { background: rgba(255,255,255,.16); color: #fff; }
.idkw .w-testhead { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 0 7px 11px; font-size: 10.5px; color: var(--chrome-faint); }
.idkw .w-testhead .cmd { flex-basis: 100%; font-family: var(--mono); font-size: 10px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idkw .w-turn { display: block; width: 100%; text-align: left; padding: 11px 12px; border-radius: 6px; color: var(--chrome-ink); border-bottom: 1px solid rgba(255,255,255,.05); }
.idkw .w-turn:hover { background: rgba(255,255,255,.04); }
.idkw .w-turn .said { font-size: 12.5px; line-height: 1.45; }
.idkw .w-turn .sub { display: flex; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--chrome-faint); }
.idkw .w-turn .line { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: #D9AE6C; }

/* the Changes tab: the git bar, then the ledger down a spine */
.idkw .w-gitbar { border: 1px solid rgba(255,255,255,.10); border-radius: 7px; padding: 9px 10px 8px; margin: 0 0 10px; background: rgba(255,255,255,.025); }
.idkw .w-gtop { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--chrome-ink); white-space: nowrap; }
.idkw .w-gtop svg { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }
.idkw .w-gbr { overflow: hidden; text-overflow: ellipsis; }
.idkw .w-garrow { color: var(--chrome-faint); }
.idkw .w-gcounts { margin-left: auto; display: flex; gap: 7px; }
.idkw .w-gin { color: #D9AE6C; } .idkw .w-gout { color: #8FBEDA; } .idkw .w-gzero { color: var(--chrome-faint); }
.idkw .w-grow { position: relative; display: flex; gap: 6px; margin-top: 9px; }
.idkw .w-ggo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 7px 10px; border-radius: 5px; border: 1px solid var(--accent); background: var(--accent); color: var(--ground); font-size: 12px; letter-spacing: .02em; }
.idkw .w-ggo.quiet { border: 1px dashed rgba(255,255,255,.18); background: none; color: var(--chrome-ink); }
.idkw .w-ggo.busy { border-color: rgba(233,124,63,.5); background: rgba(233,124,63,.16); color: #fff; }
.idkw .w-cmpbtn { padding: 4px 9px; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); color: var(--chrome-ink); font-size: 11.5px; text-align: center; white-space: nowrap; }
.idkw .w-cmpbtn:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.idkw .w-gitbar .w-cmpbtn { display: grid; place-items: center; padding: 0 10px; }
.idkw .w-cmpbtn.go { border-color: rgba(217,174,108,.55); color: #E9C893; }
.idkw .w-cmpbtn.go:hover { background: rgba(217,174,108,.12); color: #fff; }
.idkw .w-gmore { width: 30px; display: grid; place-items: center; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); font-size: 14px; line-height: 1; color: var(--chrome-ink); }
.idkw .w-gmenu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 236px; padding: 4px; background: var(--chrome-2); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.idkw .w-gitem { display: block; width: 100%; padding: 6px 8px; border-radius: 5px; color: var(--chrome-ink); }
.idkw .w-gitem:hover { background: rgba(255,255,255,.07); color: #fff; }
.idkw .w-gitem .t { display: block; font-size: 12px; }
.idkw .w-gitem .d { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--chrome-faint); }
.idkw .w-gnote { margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--chrome-faint); }
.idkw .w-gnote.ok { color: #7FBE9B; }
.idkw .w-spine { position: relative; padding-left: 15px; }
.idkw .w-spine::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: rgba(255,255,255,.10); }
.idkw .w-commit { position: relative; display: flex; align-items: center; gap: 7px; width: 100%; min-height: 27px; text-align: left; padding: 0 7px 0 10px; margin-bottom: 1px; border-radius: 5px; color: var(--chrome-ink); cursor: default; }
.idkw button.w-commit { cursor: pointer; }
.idkw button.w-commit:hover { background: rgba(255,255,255,.05); }
.idkw .w-commit.on { background: rgba(255,255,255,.08); }
.idkw .w-commit .w-cdot { position: absolute; left: -15px; top: 9px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--chrome-faint); background: var(--chrome); }
.idkw .w-sg .w-commit .w-cdot { left: -15px; }
.idkw .w-commit.documented .w-cdot { border-color: var(--accent-line); background: var(--accent-line); }
.idkw .w-commit.described .w-cdot { border-color: var(--accent-line); background: var(--chrome); border-width: 2px; }
.idkw .w-commit.undescribed .w-cdot { border-color: #D9AE6C; background: var(--chrome); border-style: dashed; }
.idkw .w-commit.incidental .w-cdot { left: -13px; top: 11px; width: 5px; height: 5px; border-color: transparent; background: rgba(255,255,255,.22); }
.idkw .w-commit.before .w-cdot { border-color: rgba(255,255,255,.20); background: none; }
.idkw .w-commit.new .w-cdot { box-shadow: 0 0 0 2px rgba(143,190,218,.25); }
.idkw .w-commit .said { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.45; }
.idkw .w-commit.incidental .said, .idkw .w-commit.before .said { color: var(--chrome-faint); }
.idkw .w-commit .w { flex: none; min-width: 34px; text-align: right; font-size: 11px; color: var(--chrome-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idkw .w-nw { flex: none; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; color: #8FBEDA; background: rgba(143,190,218,.16); }
.idkw .w-sg { position: relative; margin: 2px 0; }
.idkw .w-sgtop { position: relative; display: flex; align-items: center; gap: 6px; }
.idkw .w-sgtop::before { content: ""; position: absolute; left: -11px; top: 13px; width: 7px; height: 1px; background: rgba(255,255,255,.25); }
.idkw .w-sghead { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 27px; padding: 0 7px 0 0; border-radius: 5px; color: var(--chrome-ink); }
.idkw .w-sghead:hover { background: rgba(255,255,255,.05); }
.idkw .w-sghead:hover .lbl, .idkw .w-sghead:hover .w-chv { color: #fff; }
.idkw .w-chv { display: inline-block; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; color: var(--chrome-faint); transition: transform .15s; }
.idkw .w-chv::before { content: ""; display: block; width: 4px; height: 4px; margin: 1px 0 0 0; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(-45deg); }
.idkw .w-sg:not(.shut) > .w-sgtop .w-chv { transform: rotate(90deg); }
.idkw .w-sghead .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.idkw .w-sg.task > .w-sgtop .lbl { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.idkw .w-sg.task.on > .w-sgtop .lbl { color: #fff; }
.idkw .w-sg.nosummary > .w-sgtop .lbl { color: #D9AE6C; }
.idkw .w-sg.nosummary.busy > .w-sgtop .lbl { color: var(--busy); }
.idkw .w-sghead .cnt { font-size: 11px; color: var(--chrome-faint); font-variant-numeric: tabular-nums; }
.idkw .w-sg.shut > .w-rows { display: none; }
/* The Changes tab in edit mode (ledger.ts): a grip on every summary and task, the box a drop would
   land in, a category's name as a field, and the categories made and still empty at the top. */
.idkw .w-sumrow { position: relative; }
.idkw .w-sumrow > .w-commit { padding-left: 24px; }
.idkw .w-sumrow > .w-grip { position: absolute; z-index: 1; left: 8px; top: 50%; transform: translateY(-50%); }
.idkw .w-sgtop > .w-grip { margin-inline-start: -2px; }
.idkw .w-sg.drop-in { background: rgba(143,190,218,.10); box-shadow: inset 0 0 0 1px rgba(143,190,218,.55); border-radius: 6px; }
.idkw .w-newcat { margin: 2px 0 8px; padding: 6px 0; font-size: 11.5px; }
.idkw .w-sg.category > .w-sgtop .lbl { color: var(--chrome-faint); }
.idkw .w-sg.category > .w-sgtop .w-sghead:hover .lbl { color: var(--chrome-ink); }
.idkw .w-sg.category > .w-rows { padding-left: 10px; }
.idkw .w-sg.category > .w-sgtop .w-ed { flex: 1 1 auto; min-width: 4em; color: var(--chrome-ink); font-size: 12px; font-weight: 600; }
.idkw .w-sghead.fold { flex: 0 0 auto; width: 20px; padding: 0; justify-content: center; }
.idkw .w-sg.made { margin: 0 0 8px; padding: 6px 8px; border: 1px dashed rgba(143,190,218,.4); border-radius: 6px; }
.idkw .w-sg.made .w-sgtop::before { content: none; }
.idkw .w-sg.made .cnt, .idkw .w-sg.category > .w-sgtop > .cnt { flex: none; color: var(--chrome-faint); font-size: 11px; }
.idkw .w-sgsub { padding: 0 0 4px 18px; font-size: 11px; line-height: 1.4; color: var(--chrome-faint); }
.idkw .w-era { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 12px 0 8px; padding: 0 9px 0 10px; }
.idkw .w-era::before { content: ""; position: absolute; left: -11px; top: 7px; width: 7px; height: 1px; background: rgba(255,255,255,.18); }
.idkw .w-era .l { font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--chrome-faint); }
.idkw .w-era .why { font-size: 11px; line-height: 1.4; color: var(--chrome-faint); opacity: .8; }

/* the Demos tab */
.idkw .w-dgrp + .w-dgrp { margin-top: 6px; }
.idkw .w-dgrp .w-grp .cnt { margin-left: 4px; letter-spacing: 0; }
/* A draft or shelved demo's ×, and the question it asks, hanging beside the row over the reading pane. */
.idkw .w-dway { position: relative; }
.idkw .w-dway .w-x2 { position: absolute; top: -5px; left: -5px; z-index: 2; width: 17px; height: 17px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--chrome-faint); font-size: 11px; line-height: 1; opacity: 0; transition: opacity .09s ease; cursor: pointer; }
.idkw .w-dway:hover .w-x2, .idkw .w-dway .w-x2:focus-visible { opacity: 1; }
.idkw .w-dway .w-x2:hover { color: #fff; border-color: var(--warn-line); background: var(--warn-soft); }
.idkw .w-wayconfirm { position: absolute; z-index: 30; display: flex; gap: 7px; align-items: center; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); box-shadow: 0 8px 24px rgba(0,0,0,.45); font-family: var(--sans); font-size: 11.5px; color: var(--chrome-ink); white-space: nowrap; }
.idkw .w-wayconfirm button { padding: 3px 9px; border-radius: 4px; font: 11px var(--sans); cursor: pointer; background: none; border: 1px solid var(--rule); color: var(--chrome-ink); }
.idkw .w-wayconfirm button.go { border-color: var(--warn-line); color: var(--warn); }
.idkw .w-wayconfirm button:hover { color: #fff; border-color: rgba(255,255,255,.45); }
.idkw .w-dconfirm { flex-wrap: wrap; width: max-content; max-width: 280px; }
.idkw .w-dconfirm .why { flex-basis: 100%; margin: 0; white-space: normal; font-size: 11px; line-height: 1.4; color: var(--chrome-faint); }
.idkw .w-drow { display: block; width: 100%; text-align: start; padding: 8px 9px 8px 10px; margin-bottom: 1px; border-radius: 5px; color: var(--chrome-ink); }
.idkw .w-drow:hover { background: rgba(255,255,255,.05); }
.idkw .w-drow.on { background: rgba(255,255,255,.08); }
.idkw .w-drow .said { display: block; font-size: 12.5px; line-height: 1.45; }
.idkw .w-drow.shelved .said { color: var(--chrome-faint); }
.idkw .w-drow .sub { display: flex; flex-wrap: wrap; gap: 4px 7px; align-items: baseline; margin-top: 5px; font-size: 10.5px; color: var(--chrome-faint); }
.idkw .w-st { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.idkw .w-st.draft { color: #9FC0D2; } .idkw .w-st.building { color: #F28A4C; } .idkw .w-st.merged { color: #B392F0; }

/* ───── the reading pane: the page, the anatomy and one flow on one scroll, each on its own ground,
   blended as the reader scrolls from one to the next, as the app's stack is. */
.idkw .w-centre { --t1: 0; --ta: 0; --t2: 0;
  --ground: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--g1) calc((1 - var(--t1)) * 100%), var(--g2)) calc((1 - var(--ta)) * 100%), var(--g4)) calc((1 - var(--t2)) * 100%), var(--g3));
  --surface: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--s1) calc((1 - var(--t1)) * 100%), var(--s2)) calc((1 - var(--ta)) * 100%), var(--s4)) calc((1 - var(--t2)) * 100%), var(--s3));
  --surface-2: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--u1) calc((1 - var(--t1)) * 100%), var(--u2)) calc((1 - var(--ta)) * 100%), var(--u4)) calc((1 - var(--t2)) * 100%), var(--u3));
  --rule: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--r1) calc((1 - var(--t1)) * 100%), var(--r2)) calc((1 - var(--ta)) * 100%), var(--r4)) calc((1 - var(--t2)) * 100%), var(--r3));
  --rule-soft: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--q1) calc((1 - var(--t1)) * 100%), var(--q2)) calc((1 - var(--ta)) * 100%), var(--q4)) calc((1 - var(--t2)) * 100%), var(--q3));
  position: relative; overflow: auto; background: var(--ground); color: var(--ink); font-family: var(--serif); min-width: 0; scrollbar-width: thin; }
.idkw .w-centre.ismap { overflow: hidden; display: flex; flex-direction: column; }
.idkw .w-viewbar { position: sticky; top: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 16px; background: var(--ground); border-bottom: 1px solid var(--rule-soft); font-family: var(--sans); }
/* Back, over the pane's top-left corner as the app pins it, over the start of the bar, which leaves it
   room; on a change or demo page, over the page's own margin. */
.idkw .w-back { position: sticky; top: 7px; z-index: 8; flex: none; align-self: flex-start; display: grid; place-items: center; width: 30px; height: 28px; margin: 7px 0 -35px 12px; padding: 0; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface); color: var(--ink-soft); }
.idkw .w-back:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); }
.idkw .w-back:disabled { color: var(--ink-faint); opacity: .5; cursor: default; }
.idkw .w-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.idkw .w-back + .w-viewbar { padding-inline-start: 54px; }
.idkw .w-viewtitle { margin: 0; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idkw .w-viewsegs { flex: none; display: flex; gap: 8px; }
.idkw .w-viewseg { flex: none; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.idkw .w-viewbtn { border-radius: 6px; padding: 4px 12px; font-size: 11.5px; letter-spacing: .02em; color: var(--ink-soft); }
.idkw .w-viewbtn:hover:not(.on) { color: var(--ink); background: var(--surface-2); }
.idkw .w-viewbtn.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; cursor: default; }
.idkw .w-editbtn { display: flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink-soft); font-size: 11.5px; font-weight: 600; }
.idkw .w-editbtn:hover { color: var(--accent); border-color: var(--accent-line); }
.idkw .w-pencil { font-size: 13px; line-height: 1; }
/* What Save said, for six seconds: it hangs under the bar, because the window's pane is too narrow
   for it beside the title and the switches, and a note that pushed Edit out of sight would hide it. */
.idkw .w-viewnote { position: absolute; left: 16px; top: calc(100% + 8px); font-size: 11.5px; padding: 2px 9px; border-radius: 99px; background: var(--revised-soft); color: var(--revised); border: 1px solid var(--revised-line); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.idkw .w-viewbar.editing { justify-content: flex-start; flex-wrap: wrap; row-gap: 6px; background: color-mix(in oklab, var(--accent-soft) 55%, var(--ground)); border-bottom-color: var(--accent-line); }
.idkw .w-ebhead { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--accent); }
.idkw .w-ebhead b { font-weight: 650; }
.idkw .w-ebhead .cnt { color: var(--ink-soft); font-weight: 400; }
.idkw .w-ebmsg { flex: 1; font-size: 12px; color: var(--ink-soft); }
.idkw .w-ebbtns { display: flex; gap: 6px; margin-inline-start: auto; }
.idkw .w-sbtn { padding: 5px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); font-size: 12.5px; color: var(--ink-soft); }
.idkw .w-sbtn.danger { color: var(--warn); border-color: var(--warn-line); }
.idkw .w-sbtn:disabled, .idkw .w-savebtn:disabled { opacity: .55; cursor: default; }
.idkw .w-ebmsg.warn { color: var(--warn); }
.idkw .w-ebmsg.wait { color: var(--ink-faint); }
.idkw .w-savebtn { padding: 5px 14px; border-radius: 6px; background: var(--accent); color: var(--surface); font-size: 12.5px; font-weight: 600; }
.idkw .w-level + .w-level { margin-top: 56px; border-top: 1px solid var(--rule); }
.idkw .w-half + .w-half { margin-top: 40px; border-top: 1px solid var(--rule); }
.idkw .w-level:last-of-type { padding-bottom: 40px; min-height: calc(100% - 44px); }
.idkw .w-dhead { padding: 34px 32px 6px; max-width: 48rem; margin-inline: auto; }
.idkw .w-eyebrow { margin: 0 0 8px; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.idkw .w-dhead h1, .idkw .w-dhead h2.w-halftitle { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 650; color: var(--ink); text-wrap: balance; }
.idkw .w-standfirst { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }
.idkw .w-stream { max-width: 48rem; padding: 18px 32px 40px; margin-inline: auto; }
.idkw .w-label { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 26px 0 10px; font-weight: 600; }
.idkw .w-label:first-child { margin-top: 6px; }
.idkw .w-prose p { font-size: 15px; line-height: 1.6; margin: 0 0 10px; color: var(--ink); }
.idkw .w-chev { display: inline-block; width: .62em; height: .62em; margin-inline-end: .42em; vertical-align: .02em; background: currentColor; color: var(--ink-faint); transition: transform .15s, color .15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.8 L6.9 5 L3.5 8.2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.8 L6.9 5 L3.5 8.2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.idkw [aria-expanded="true"] .w-chev, .idkw details[open] > summary .w-chev { transform: rotate(90deg); color: var(--accent); }
.idkw .w-slide { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.idkw .w-slide.open { grid-template-rows: 1fr; }
.idkw .w-slide > .w-clip { min-height: 0; overflow: hidden; }

/* the page */
.idkw .w-section { padding: 0 0 6px; }
.idkw .w-section .w-hit { display: block; width: 100%; text-align: start; border-radius: 5px; color: var(--ink); }
.idkw .w-section .w-lead { font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; font-weight: 600; }
.idkw .w-section .w-hit .w-lead { display: block; }
.idkw .w-section.sel .w-hit { box-shadow: -8px 0 0 0 var(--accent-soft), 8px 0 0 0 var(--accent-soft); background: var(--accent-soft); }
.idkw .w-sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px 2px; margin: 0 0 10px; }
.idkw .w-chips { margin: 0 0 18px; }
.idkw .w-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.idkw .w-chip { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 11px; }
.idkw .w-chip[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.idkw .w-meaning { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 8px 12px; }
.idkw .w-meaning b { color: var(--ink); margin-right: 5px; }
.idkw .w-kw { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 7px 14px; font-size: 14px; line-height: 1.45; }
.idkw .w-kw dt { font-weight: 600; } .idkw .w-kw dd { color: var(--ink-soft); }

/* the anatomy */
.idkw .w-parts { display: grid; gap: 6px; list-style: none; }
.idkw .w-part { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.idkw .w-part.side-below, .idkw .w-part.side-once { border-inline-start: 3px solid var(--flag-line); }
.idkw .w-part.side-above, .idkw .w-part.side-door { border-inline-start: 3px solid var(--accent-line); }
.idkw .w-part.sel { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent-line); }
.idkw .w-part.lit { background: var(--accent-soft); border-color: var(--accent-line); }
.idkw .w-part > .w-hit { display: block; width: 100%; padding: 9px 12px 4px; text-align: start; }
.idkw .w-part .w-num { font-family: var(--sans); font-size: 13.5px; font-weight: 650; color: var(--ink); }
.idkw .w-part .w-num .side { display: inline; font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.idkw .w-part .w-ptitle { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink-soft); margin: 2px 0 6px; }
.idkw .w-part .w-hit .w-num, .idkw .w-part .w-hit .w-ptitle { display: block; }
.idkw .w-psheet .w-kw { font-size: 12.5px; }
.idkw .w-part .w-psheet { padding: 0 12px 8px 26px; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.idkw .w-part .w-psheet p { margin: 0 0 6px; }
.idkw .w-part .w-behind { margin: 6px 0 4px; font-size: 12.5px; color: var(--ink-faint); }
.idkw .w-linkbtn { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.idkw .w-alsothere { margin: 22px 0 0; }
.idkw .w-alsothere > summary { cursor: pointer; font-family: var(--sans); font-size: 12px; color: var(--ink-faint); list-style: none; }
.idkw .w-alsothere > summary::-webkit-details-marker { display: none; }
.idkw .w-alsothere > summary::before { content: "▸"; display: inline-block; width: 1em; margin-inline-end: 4px; font-size: 16px; line-height: 1; text-align: center; vertical-align: -1px; transition: transform .15s; }
.idkw .w-alsothere[open] > summary::before { transform: rotate(90deg); }
.idkw .w-alsothere summary .w-alabel { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.idkw .w-alsothere > ol { margin-top: 12px; }
.idkw .w-embed { margin: 6px 0 10px; }

/* the replica: the shop's own page, drawn at the size the app draws it and scaled to the column */
.idkw .w-replica { margin: 6px 0 22px; }
.idkw .w-rbox { position: relative; aspect-ratio: 1280 / 800; border: 1px solid var(--rule); border-radius: 8px; background: #fbf8f2; overflow: hidden; }
.idkw .w-rpage { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; font: 16px/1.5 Georgia, 'Times New Roman', serif; color: #2f2a26; background: #fbf8f2; display: flex; flex-direction: column; pointer-events: auto; }
.idkw .w-rpage header { padding: 24px 32px; border-bottom: 1px solid #e4ddd2; display: flex; align-items: baseline; gap: 24px; }
.idkw .w-rpage header h3 { margin: 0; font-size: 28px; color: #c0283a; font-weight: 700; }
.idkw .w-rpage header p { margin: 0; flex: 1; font-style: italic; }
.idkw .w-rpage nav span { margin-left: 16px; color: #5d7b5a; text-decoration: underline; }
.idkw .w-rpage main { flex: 1; padding: 24px 32px; display: grid; grid-template-columns: 1fr 360px; gap: 24px 32px; align-content: start; }
.idkw .w-rpage .w-rg { border-radius: 8px; }
.idkw .w-rbq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-content: start; }
.idkw .w-rbqi { border: 1px solid #e4ddd2; border-radius: 8px; padding: 16px; background: #fff; }
.idkw .w-rbqi h4 { margin: 12px 0 0; font-size: 19px; }
.idkw .w-rbqi p { margin: 4px 0; }
.idkw .w-rbqi .pr { font-weight: bold; }
.idkw .w-rcol { display: flex; height: 108px; border-radius: 6px; overflow: hidden; }
.idkw .w-rcol span { flex: 1; }
.idkw .w-rbtn { display: inline-block; margin-top: 4px; padding: 3px 12px; border: 1px solid #b8ad9f; border-radius: 4px; background: #f3efe8; font: 14px system-ui, sans-serif; }
.idkw .w-rform { grid-row: span 2; border: 1px solid #e4ddd2; border-radius: 8px; padding: 20px; background: #fff; align-self: start; }
.idkw .w-rform h4 { margin: 0 0 4px; font-size: 22px; }
.idkw .w-rform .lb { margin: 10px 0; }
.idkw .w-rform .fld { display: inline-block; min-width: 150px; padding: 2px 6px; border: 1px solid #b8ad9f; border-radius: 3px; background: #fff; font: 14px system-ui, sans-serif; }
.idkw .w-rform fieldset { margin: 10px 0; border: 1px solid #d8d0c4; padding: 6px 10px 10px; }
.idkw .w-rform legend { padding: 0 4px; }
.idkw .w-rslot { display: inline-flex; flex-direction: column; margin: 4px 8px 4px 0; padding: 8px 12px; border: 1px solid #b8ad9f; border-radius: 4px; background: #f3efe8; font: 14px system-ui, sans-serif; vertical-align: top; }
.idkw .w-rslot small { font-size: 12px; opacity: .8; }
.idkw .w-rslot.off { opacity: .45; }
.idkw .w-rslot.picked { background: #5d7b5a; border-color: #5d7b5a; color: #fff; }
.idkw .w-rslot.new { box-shadow: 0 0 0 3px #f2c230; }
.idkw .w-rpay { display: inline-block; margin-top: 8px; padding: 6px 16px; border-radius: 4px; background: #5d7b5a; color: #fff; font: 600 15px system-ui, sans-serif; }
.idkw .w-rhours ul { margin: 6px 0 0; padding-left: 22px; }
.idkw .w-rhours h4, .idkw .w-rcontact h4 { margin: 0; font-size: 22px; }
.idkw .w-rcontact p { margin: 6px 0; }
.idkw .w-rpage [data-rpart] { outline: 0 solid transparent; transition: outline-color .15s; cursor: pointer; }
.idkw .w-rpage [data-rpart].lit { outline: 4px solid #1F6FA8; outline-offset: 6px; }
.idkw .w-rcap { display: flex; align-items: baseline; gap: 12px; margin-top: 7px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); min-height: 1.4em; }
.idkw .w-rcap .said { flex: 1; min-width: 0; }
.idkw .w-rcap .hint { color: var(--ink-faint); }
.idkw .w-rcap .part { font-weight: 600; color: var(--ink); }
.idkw .w-rsize { flex: none; color: var(--accent); font-size: 12.5px; }
.idkw .w-replica.large { position: absolute; z-index: 8; inset: 12px; margin: 0; padding: 12px; background: var(--ground); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.25); }
/* the copy opened large stands over the reading pane alone, as the app's does */
.idkw .w-over { position: absolute; top: 0; bottom: 0; left: var(--railw); right: var(--chatw); z-index: 8; }

/* a flow: numbered sentences on a trunk, the selected one large with its player open under it */
.idkw .w-flow4 { --st-bg: var(--ground); --st-surface: var(--surface); --st-ink: var(--ink); --st-soft: var(--ink-soft); --st-faint: var(--ink-faint); --st-rule: var(--rule-soft);
  --st-accent: #945600; --st-warn: #C2410C; --k-work: #945600; --k-call: #1F6FA8; --k-rally: #1E7A50; }
.idkw .w-headswitch { display: flex; margin: 0 0 10px; }
.idkw .w-branchedoff { position: relative; margin: 0 0 14px; }
.idkw .w-backto { font-family: var(--sans); font-size: 12.5px; color: var(--st-soft); }
.idkw .w-backto .k { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--st-faint); }
.idkw .w-backto .n { color: var(--st-ink); font-weight: 600; }
.idkw .w-backto:hover .n { text-decoration: underline; }
.idkw .w-flowline { position: relative; padding-left: var(--gut); --gut: 34px; --tx: 11px; --bl: 40px; --trunk: color-mix(in oklab, var(--ink-faint) 55%, var(--rule)); }
.idkw .w-flowline .w-trunk { position: absolute; left: calc(var(--tx) - var(--gut) - 1px); width: 2px; top: var(--t0, 0px); bottom: var(--b0, 0px); background: var(--trunk); }
.idkw .w-flowline .first > .w-trunk { top: var(--ny); }
.idkw .w-flowline .tail > .w-trunk { bottom: auto; height: calc(var(--ny) - var(--t0, 0px)); }
.idkw .w-flowline .first.tail > .w-trunk { display: none; }
/* a deeper flow hangs off its parent's step: the line comes down to its first step dashed */
.idkw .w-branchedoff > .w-trunk { top: 1.2em; bottom: -14px; background: repeating-linear-gradient(to bottom, var(--trunk) 0 4px, transparent 4px 8px); }
.idkw .w-steps.joined .first > .w-trunk { top: 0; }
.idkw .w-flowline .w-knot { position: absolute; z-index: 1; border-radius: 50%; }
.idkw .w-flowline .w-knot.dot { width: 10px; height: 10px; left: calc(var(--tx) - var(--gut) - 5px); top: calc(var(--ny) - 5px); background: var(--st-faint); }
.idkw .w-steps { list-style: none; margin: 0; padding: 0; }
.idkw .w-step { position: relative; --ny: 24px; padding: 12px 0; border-top: 1px solid var(--st-rule); }
.idkw .w-step.first { border-top: 0; }
.idkw .w-step.sel > .w-knot.dot { background: var(--st-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-accent) 30%, transparent); }
.idkw .w-step > .w-hit { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 2px 8px; align-items: baseline; width: 100%; color: var(--st-soft); border-radius: 6px; text-align: start; }
.idkw .w-step > .w-hit:hover { color: var(--st-ink); }
.idkw .w-step .w-n { font: 600 13px var(--mono); }
.idkw .w-step .w-title { grid-column: 2; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
.idkw .w-step.sel > .w-hit { color: var(--st-ink); }
.idkw .w-step.sel > .w-hit .w-n { color: var(--st-accent); }
.idkw .w-step.sel > .w-hit .w-title { font-size: 20px; font-weight: 650; line-height: 1.25; }
.idkw .w-step.out > .w-hit .w-n { color: var(--st-warn); }
.idkw .w-hintk { grid-column: 2; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--st-faint); }
.idkw .w-hintk.k-work { color: var(--k-work); } .idkw .w-hintk.k-call { color: var(--k-call); } .idkw .w-hintk.k-rally { color: var(--k-rally); }
.idkw .w-step > :not(.w-hit, .w-trunk, .w-knot) { margin-inline-start: 52px; }
.idkw .w-step > .w-player { margin-top: 14px; margin-bottom: 6px; }
.idkw .w-step > .w-at { margin-top: 4px; font-family: var(--sans); font-size: 12.5px; color: var(--st-faint); }
.idkw .w-step > .w-noneopen { margin-top: 10px; max-width: 62ch; font-family: var(--sans); font-size: 14px; color: var(--st-soft); }
.idkw .w-stepfoot { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--rule-soft); color: var(--st-soft); }
.idkw .w-src { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 3px; padding: 0 6px; margin-inline-end: 6px; }
.idkw .w-src.found { background: var(--accent-soft); color: var(--accent); }
.idkw .w-src.inferred { border: 1px dashed var(--ink-faint); color: var(--ink-soft); }
.idkw .w-readfrom { font-size: 11.5px; color: var(--st-faint); }
.idkw .w-readfrom .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-inline-end: 4px; }
.idkw .w-anchor { font-family: var(--mono); font-size: 11px; color: var(--k-call); border-bottom: 1px solid color-mix(in oklab, var(--k-call) 45%, transparent); }
.idkw .w-stepacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.idkw .w-godeeper { padding: 5px 10px; border: 1px dashed var(--st-rule); border-radius: 5px; font-family: var(--sans); font-size: 11.5px; color: var(--st-soft); }
.idkw .w-godeeper:hover { color: var(--st-accent); border-color: var(--st-accent); }
.idkw .w-outofdate { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 9px 0 0; padding: 7px 10px; border-radius: 3px; background: var(--flag-soft); font-family: var(--sans); font-size: 11.5px; }
.idkw .w-flagline { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--flag); font-weight: 600; }
.idkw .w-outofdate .why { color: var(--ink-soft); flex: 1 1 12rem; }
.idkw .w-outofdate button { padding: 4px 10px; border-radius: 4px; font-size: 11px; color: var(--accent); border: 1px solid var(--accent-line); }
.idkw .w-outofdate button[disabled] { color: var(--ink-faint); border-color: var(--rule); cursor: default; }
.idkw .w-handrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0; font-family: var(--sans); font-size: 12px; color: var(--revised); }
.idkw .w-handrow .w-flagline { color: inherit; }
.idkw .w-handrow .why { color: var(--ink-soft); }
/* A step's edit mode: an × to take it out, a row after it to add one, and, on a step added by hand,
   the line that says no code is tied to it yet. */
.idkw .w-step > div.w-hit { padding-inline-end: 30px; }
.idkw .w-step > .w-stepx { position: absolute; top: 12px; right: 0; margin: 0; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink-soft); font-size: 13px; line-height: 1; opacity: 0; }
.idkw .w-step:hover > .w-stepx, .idkw .w-step > .w-stepx:focus-visible { opacity: 1; }
.idkw .w-step > .w-stepx:hover { color: var(--warn); border-color: var(--warn-line); }
.idkw .w-addrow { position: relative; list-style: none; }
.idkw .w-addstep { margin: 2px 0 2px 52px; padding: 2px 8px; border: 1px dashed transparent; border-radius: 6px; font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint); opacity: .6; }
.idkw .w-addstep:hover, .idkw .w-addstep:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent-line); }
.idkw .w-handrow.untied { color: var(--flag); }
.idkw [data-ph]:empty::before { content: attr(data-ph); color: var(--ink-faint); font-style: italic; font-weight: 400; }

/* Version 5. The page ends with the way to Application; Application's features are cards that open
   their Logic and light their part of the window; a Logic part has a breadcrumb over its head, and is
   either an overview of cards or a run of numbered steps whose processes open in place, with the
   words they mark explained in a panel beside them (LOGIC.md §3.6): 190px here, where the app's
   window is wider and gives it 200 to 220, with a dashed rule, blank
   until a word is pointed at. Where the pane is too narrow for the panel it goes, and the card opens
   under its word, as it does on the page, Application and an overview. */
.idkw .w-level { position: relative; }
.idkw .w-pagenext { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.idkw .w-nextpage { display: grid; gap: 2px; width: 100%; padding: 10px 14px; text-align: start; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); font-family: var(--sans); }
.idkw .w-nextpage .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.idkw .w-nextpage .n { font-size: 15px; font-weight: 650; color: var(--accent); }
.idkw .w-nextpage .sub { font-size: 12.5px; color: var(--ink-soft); }
.idkw .w-nextpage:hover { border-color: var(--accent-line); }

.idkw .w-feats { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.idkw .w-feat { background: var(--surface); border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent-line); border-radius: 6px; transition: background .15s, border-color .15s; }
.idkw .w-feat:not(.side-above):not(.side-door) { border-inline-start-color: var(--flag-line); }
.idkw .w-feat.lit, .idkw .w-feat.sel { background: var(--accent-soft); border-color: var(--accent-line); }
.idkw .w-fhit { display: block; width: 100%; padding: 9px 12px 8px; text-align: start; font-family: var(--sans); }
.idkw .w-fhit .w-num { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.idkw .w-fhit .w-num .side { display: inline; font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.idkw .w-fhit .w-ptitle { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.idkw .w-frow { display: flex; align-items: flex-start; }
.idkw .w-frow > .w-fhit { flex: 1; min-width: 0; }
.idkw .w-ffold { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; padding: 12px 0 0 6px; }
.idkw .w-ffold .w-chev { margin: 0; transform: scale(.8); }
.idkw .w-ffold[aria-expanded="true"] .w-chev { transform: rotate(90deg) scale(.8); }
.idkw .w-ffold:hover .w-chev { color: var(--accent); }
.idkw .w-fhit .w-num .meta { display: inline; font-weight: 400; font-style: italic; color: var(--ink-faint); font-size: 12px; }
.idkw .w-fhit:hover .w-num { color: var(--accent); }
.idkw .w-fhit.unwritten .w-num { font-style: italic; color: var(--ink-faint); }
.idkw .w-fbody { padding: 0 12px 10px 44px; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.idkw .w-fbody p { margin: 0 0 6px; }
.idkw .w-feat > .w-outofdate { margin: 0 10px 10px; }
.idkw .w-connect { margin-top: 24px; }
.idkw .w-connect p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.idkw .w-clink { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.idkw .w-clink.unwritten { font-weight: 400; font-style: italic; color: var(--ink-soft); text-decoration-style: dashed; }
.idkw .w-tm { text-decoration: underline dotted; text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }

.idkw .w-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; max-width: 48rem; margin-inline: auto; padding: 18px 32px 0; font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint); }
.idkw .w-crumb { color: var(--ink-soft); }
.idkw .w-crumb:hover { color: var(--accent); text-decoration: underline; }
.idkw .w-crumbs + .w-dhead { padding-top: 14px; }
.idkw .w-eyebrow .w-pip { margin-inline-start: 8px; vertical-align: 1px; text-transform: none; letter-spacing: .04em; }
.idkw .w-pip.chip { background: var(--surface-2); color: var(--ink-soft); }
.idkw .w-rail .w-pip.chip { background: rgba(143,190,218,.13); color: #8FBEDA; }
.idkw .w-node.part.here { box-shadow: inset 2px 0 0 #8FBEDA; }

/* a marked word: one the reader can point at or tap */
.idkw .w-term { display: inline; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; }
.idkw .w-term:hover, .idkw .w-term.on { color: var(--accent); text-decoration-color: var(--accent); }
.idkw .w-term.pinned { background: var(--accent-soft); border-radius: 2px; }

/* an overview: the parts it is made of, as cards */
.idkw .w-cards { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.idkw .w-ocard { padding: 10px 14px 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.idkw .w-ocard.sel { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.idkw .w-ocard.unwritten { background: transparent; border-style: dashed; }
.idkw .w-ochead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--sans); }
.idkw .w-oname { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.idkw .w-oname:hover { color: var(--accent); }
.idkw .w-ocard.unwritten .w-oname { font-style: italic; font-weight: 500; color: var(--ink-soft); }
.idkw .w-ocard .w-lrow { display: block; margin: 4px 0 0 34px; }
.idkw .w-ocard .w-ltext { font-size: 14.5px; }
.idkw .w-open { margin: 6px 0 0 34px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--accent); }
.idkw .w-open:hover { text-decoration: underline; }
.idkw .w-ocard > .w-outofdate, .idkw .w-ocard > .w-handrow, .idkw .w-ocard > .w-stepacts { margin-inline-start: 34px; }

/* a steps part: numbered sentences, a process under the one that hides real work, the panel beside */
.idkw .w-lbody { container-type: inline-size; }
.idkw .w-lgrid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 0 14px; }
.idkw .w-tpanel { position: relative; border-inline-start: 1px dashed var(--rule); }
/* edit mode has no words to explain, only sentences to type: the steps take the whole width */
.idkw .w-lgrid.editing { grid-template-columns: minmax(0, 1fr); }
.idkw .w-lgrid.editing .w-tpanel { display: none; }
@container (max-width: 469px) {
  .idkw .w-lgrid { grid-template-columns: minmax(0, 1fr); }
  .idkw .w-tpanel { display: none; }
}
.idkw .w-lsteps { list-style: none; margin: 0; padding: 0; }
.idkw .w-lstep { position: relative; padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.idkw .w-lstep:first-child { border-top: 0; padding-top: 2px; }
.idkw .w-lrow { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; cursor: pointer; }
.idkw .w-ln { justify-self: start; padding: 0 2px; border-radius: 3px; font: 600 13px var(--mono); color: var(--k-work); }
.idkw .w-ln:hover, .idkw .w-ln[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.idkw .w-ltext { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.idkw .w-lstep.sel .w-ltext { font-weight: 600; }
.idkw .w-lstep.out .w-ln { color: var(--flag); }
.idkw .w-lstep > :not(.w-lrow, .w-stepx) { margin-inline-start: 34px; }
.idkw .w-prochint { display: block; margin-top: 3px; font: 11.5px var(--mono); letter-spacing: .02em; color: var(--k-work); }
.idkw .w-prochint .w-chev { color: var(--k-work); transform: scale(.75); }
.idkw .w-prochint[aria-expanded="true"] .w-chev { transform: rotate(90deg) scale(.75); color: var(--k-work); }
.idkw .w-prochint:hover { text-decoration: underline; }
.idkw .w-proc { margin: 8px 0 4px; padding: 10px 14px 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.idkw .w-prochead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--sans); font-size: 13px; color: var(--ink); }
.idkw .w-pchip { padding: 1px 6px; border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: color-mix(in oklab, var(--k-work) 16%, transparent); color: var(--k-work); }
.idkw .w-psteps { margin: 0; padding-inline-start: 22px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.idkw .w-psteps > li { margin: 0 0 7px; padding-inline-start: 2px; }
.idkw .w-psteps > li::marker { font: 12px var(--mono); color: var(--ink-faint); }
.idkw .w-proc code, .idkw .w-tcard code { font: .86em var(--mono); padding: 0 3px; border-radius: 3px; background: var(--surface-2); word-break: break-word; }
.idkw .w-opens { display: inline-block; margin-top: 4px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--accent); }
.idkw .w-opens.unwritten { font-style: italic; font-weight: 400; color: var(--ink-soft); }
.idkw .w-lstep > .w-stepx { position: absolute; top: 10px; right: 0; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink-faint); }
.idkw .w-lstep > .w-stepx:hover { color: var(--warn); border-color: var(--warn-line); }
.idkw .w-lstep [contenteditable] { display: block; padding: 2px 30px 2px 8px; outline: none; border-radius: 3px; box-shadow: 0 0 0 1px var(--accent-line); background: var(--surface); }
.idkw .w-lsteps .w-addstep { margin-inline-start: 34px; }

/* a word's card: in the panel level with its word, or under it */
.idkw .w-tcard { position: absolute; left: 12px; right: 0; z-index: 5; padding: 10px 12px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.12); font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.idkw .w-tcard.pop { right: auto; width: 270px; max-width: calc(100% - 8px); }
.idkw .w-tname { margin: 0 0 3px; font-family: var(--serif); font-size: 14.5px; font-weight: 650; color: var(--accent); }
.idkw .w-twhat { margin: 0; }
.idkw .w-tfacts { margin: 8px 0 0; }
.idkw .w-tfacts dt { margin-top: 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.idkw .w-tfacts dd { margin: 1px 0 0; color: var(--ink-soft); }

/* the Flow view: the other flows filed under the same feature, and where this one is filed */
.idkw .w-flowpick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; max-width: 48rem; margin-inline: auto; padding: 16px 32px 0; font-family: var(--sans); font-size: 12px; }
.idkw .w-flowpick .k { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); margin-inline-end: 4px; }
.idkw .w-flowpick button { padding: 2px 9px; border: 1px solid var(--rule); border-radius: 99px; color: var(--ink-soft); background: var(--surface); }
.idkw .w-flowpick button.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 600; }
.idkw .w-flowpick button.unwritten { font-style: italic; border-style: dashed; background: transparent; }
.idkw .w-flowpick + .w-dhead { padding-top: 14px; }
.idkw .w-branchedoff.filed > .w-trunk { display: none; }

/* Flows as routes across features (FLOW-ROUTES.md §1), with the app's values from draft 7. The
   first tab names the panel showing in full and the other after a slash, so it is wider than its
   neighbours to hold both words. */
.idkw .w-rtab.twin { flex: 1.35; }
.idkw .w-rtab .w-tabalt { color: var(--chrome-faint); font-weight: 400; opacity: .85; }
.idkw .w-rtab.on .w-tabalt { color: rgba(255,255,255,.5); }
/* In the window's narrowest rail the four tabs only just fit beside the wider first one. */
.idkw .w-rtabs { container-type: inline-size; }
@container (max-width: 240px) {
  .idkw .w-rtab { letter-spacing: 0; font-size: 11px; }
  .idkw .w-rtab.twin { flex: 1.5; }
}

/* A route: the features a flow runs through, in order, the one the reader came from in the accent.
   One drawing for the rail, the list's cards and a flow's head, each with its own ink. The arrow
   points the way the route reads. */
.idkw .w-route { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
.idkw .w-route .arrow { color: var(--ink-faint); font-size: 11px; }
.idkw .w-route:dir(rtl) .arrow { transform: scaleX(-1); }
.idkw .w-route .stop.here { color: var(--accent); font-weight: 600; }
.idkw .w-route button.stop { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.idkw .w-route button.stop:hover, .idkw .w-route button.stop:focus-visible { text-decoration-color: currentColor; }
.idkw .w-route.inrail { font-size: 11px; gap: 1px 5px; color: var(--chrome-faint); }
.idkw .w-route.inrail .arrow { color: var(--chrome-faint); opacity: .7; }
.idkw .w-route.inrail .stop.here { color: var(--chrome-ink); font-weight: 600; }
.idkw .w-route.inflow { font-size: inherit; color: inherit; }
.idkw .w-route.inflow .stop.here { color: var(--flag); }

/* The Flows panel: the line at its head from a feature, and each row's route. */
.idkw .w-flowsnote { margin: 0; padding: 10px 7px 0; font-size: 11px; color: var(--chrome-faint); }
.idkw .w-node .w-routeof { margin: 3px 0 0; line-height: 1.35; }
.idkw .w-node.flow .w-sub { gap: 4px; }

/* Flow on a feature: the list of the flows through it, or the page that says there is none, the
   mark and one ask in the middle of the pane. */
.idkw .w-flowpage { max-width: 48rem; margin-inline: auto; padding: 44px 32px 40px; display: flex; flex-direction: column; min-height: calc(100% - 44px); }
.idkw .w-flowhead { margin: 0 0 10px; }
.idkw .w-featurehead { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--ink); text-wrap: balance; }
.idkw .w-featurekind { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); vertical-align: 3px; margin-inline-end: 6px; }
.idkw .w-askflow { padding: 6px 12px; border: 1px solid var(--accent-line); border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: 500 12.5px var(--sans); white-space: nowrap; }
.idkw .w-askflow:hover { border-color: var(--accent); }
.idkw .w-noflowbox { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 0 12vh; text-align: center; }
.idkw .w-idkmark { display: block; width: 72px; color: var(--ink-faint); margin-bottom: 4px; }
.idkw .w-idkmark svg { display: block; width: 100%; height: auto; }
.idkw .w-noflow { margin: 0; font-size: 22px; line-height: 1.35; color: var(--ink); }
.idkw .w-noflowbox .w-askflow { margin: 2px 0 0; padding: 8px 18px; font-size: 14px; border-radius: 7px; }
.idkw .w-flowslabel { margin: 26px 0 8px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.idkw .w-flowslabel.gap { margin-top: 30px; }
.idkw .w-flowshead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 8px; }
.idkw .w-flowshead .w-flowslabel { margin: 0; }
.idkw .w-flowshead .w-askflow { padding: 3px 10px; font-size: 12px; }
.idkw .w-fcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.idkw .w-fcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; background: var(--surface); border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent-line); border-radius: 6px; }
.idkw .w-fcard:hover { border-color: var(--accent-line); border-inline-start-color: var(--accent); }
.idkw .w-fcard.sug { border-inline-start-color: var(--rule); background: transparent; }
.idkw .w-fchit { display: flex; flex-direction: column; gap: 7px; padding: 11px 16px; text-align: start; color: var(--ink); }
.idkw .w-fctop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--sans); }
.idkw .w-fcname { font-size: 14px; font-weight: 650; color: var(--ink); }
.idkw .w-fcard.sug .w-fcname { color: var(--ink-soft); font-style: italic; font-weight: 600; }
.idkw .w-fcmeta, .idkw .w-fccovers { font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint); }
.idkw .w-fccovers { font-size: 12px; }
.idkw .w-fcroute { display: flex; }
.idkw .w-fcgo { margin: 11px 16px 0 0; color: var(--accent); font: 400 12px var(--sans); white-space: nowrap; }
.idkw .w-fcgo:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Under a Logic step, the flows that follow it, and ↳ the deeper ones inside them that follow it too. */
.idkw .w-followedin { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 6px; font-family: var(--sans); font-size: 12px; }
.idkw .w-ocard > .w-followedin { margin-inline-start: 34px; }
.idkw .w-followedin .k { color: var(--ink-faint); margin-inline-end: 2px; }
.idkw .w-followlink { color: var(--accent); text-align: start; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.idkw .w-followlink:hover, .idkw .w-followlink:focus-visible { text-decoration-color: var(--accent); }
.idkw .w-followlink.deeper { font-style: italic; }
.idkw .w-followedin .dot, .idkw .w-followedin .deeperk { color: var(--ink-faint); }
.idkw .w-followedin .deeperk { margin-inline-start: 4px; }

/* A flow's head: the route it runs, each stop a way to its Logic; or, for a deeper flow, the steps
   of its parent it expands. */
.idkw .w-runs { display: inline-block; margin-inline-start: -8px; padding: 3px 8px; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--st-soft); }
.idkw .w-runs .k { color: var(--st-faint); }
.idkw .w-branchedoff.expandsof .w-backto .k { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.idkw .w-branchedoff.expandsof .w-backto .n { color: var(--flag); }

/* The step a press landed on, and the words saying why it is that one. They go once the reader
   moves on. */
.idkw .w-step.landstep > .w-hit { background: var(--accent-soft); border-radius: 6px; box-shadow: 0 0 0 1px var(--accent-line); color: var(--st-ink); }
.idkw .w-landlabel { display: block; margin: 0 0 6px 52px; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.idkw .w-viewbtn.off { opacity: .45; cursor: help; }
.idkw .w-viewbtn.off:hover { background: none; color: var(--ink-soft); }
.idkw .w-viewnote.why { background: var(--surface); color: var(--ink-soft); border-color: var(--rule); white-space: normal; max-width: calc(100% - 32px); }
.idkw .w-rail [data-ph]:empty::before { color: var(--chrome-faint); font-style: normal; }
.idkw .w-offshoot { position: relative; list-style: none; --ny: 12px; --b0: -14px; margin: -4px 0 14px; padding-left: calc(var(--tx) - var(--gut) + var(--bl) + 13px); }
.idkw .w-offshoot .w-elbow { position: absolute; left: calc(var(--tx) - var(--gut)); top: calc(var(--ny) - 1px); width: var(--bl); height: 2px; background: var(--st-accent); }
.idkw .w-offshoot .w-knot.leaf { width: 12px; height: 12px; left: calc(var(--tx) - var(--gut) + var(--bl) - 6px); top: calc(var(--ny) - 6px); background: var(--st-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-accent) 25%, transparent); }
.idkw .w-offshoot.planned .w-elbow { height: 0; background: none; border-top: 2px dashed var(--st-faint); }
.idkw .w-offshoot.planned .w-knot.leaf { background: var(--st-bg); border: 2px dashed var(--st-faint); box-shadow: none; }
.idkw .w-shoot { display: grid; gap: 1px; width: 100%; margin-left: -10px; padding: 2px 10px 5px; border-radius: 6px; text-align: start; font-family: var(--sans); }
.idkw .w-shoot:hover { background: var(--surface); }
.idkw .w-shoot .name { font-size: 14.5px; line-height: 20px; font-weight: 650; color: var(--st-accent); }
.idkw .w-shoot .name.working { font-style: italic; font-weight: 600; color: var(--ink-soft); }
.idkw .w-shoot .span { font-size: 11.5px; letter-spacing: .02em; color: var(--st-soft); }
.idkw .w-shoot .why { margin-top: 3px; max-width: 38rem; font-size: 12.5px; line-height: 1.45; color: var(--st-soft); }
.idkw .w-afterflow { margin: 34px 0 0; }
.idkw .w-afterflow h2 { font-family: var(--sans); font-size: 12.5px; font-weight: 650; letter-spacing: .01em; margin: 22px 0 7px; color: var(--ink); }
.idkw .w-afterflow > p.sub { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.idkw .w-check { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px; margin-bottom: 9px; }
.idkw .w-check > p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.idkw .w-check summary { cursor: pointer; font-family: var(--sans); font-size: 12.5px; color: var(--accent); }
.idkw .w-check details p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.idkw .w-endofflow { margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); }
.idkw .w-endofflow .lede { font-family: var(--sans); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.idkw .w-endofflow .lede.deadend { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.idkw .w-endofflow .sub { margin: 0 0 14px; font-size: .95rem; color: var(--ink-soft); }
.idkw .w-onwards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.idkw .w-onwards button { flex: 1 1 14rem; text-align: left; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--rule); }
.idkw .w-onwards button:hover { border-color: var(--accent-line); }
.idkw .w-onwards .k { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.idkw .w-onwards .n { display: block; margin-top: 3px; font-size: .95rem; color: var(--ink); }
.idkw .w-onwards .at { display: block; margin-top: 3px; font-family: var(--sans); font-size: 11px; color: var(--ink-faint); }
.idkw .w-onwards .back { flex: 0 1 12rem; }
.idkw [contenteditable="plaintext-only"] { outline: 1px dashed var(--accent-line); outline-offset: 2px; border-radius: 3px; cursor: text; }
.idkw [contenteditable="plaintext-only"]:focus { outline: 2px solid var(--accent); background: var(--surface); }

/* the player, ported from the app's style.css. Its own width decides its layout; the reading column
   is always narrow, so a call is drawn stacked: one message on the wire at a time. */
.idkw .w-player { --p-ground: var(--surface); --p-deep: var(--ground); --p-ink: var(--ink); --p-soft: var(--ink-soft); --p-faint: var(--ink-faint); --p-rule: var(--rule); --p-edge: var(--rule-soft);
  --p-accent: #E8961A; --p-accent-ink: #1A1200; --p-warn: #C2410C; --p-work: #945600; --p-call: #1F6FA8; --p-rally: #1E7A50; --p-kind: var(--p-work);
  container-type: inline-size; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--p-edge); border-radius: 14px;
  background: var(--p-ground); color: var(--p-ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.idkw .w-player[data-kind="call"] { --p-kind: var(--p-call); }
.idkw .w-player[data-kind="rally"] { --p-kind: var(--p-rally); }
.idkw .w-ptop { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 20px; }
.idkw .w-pwords { min-width: 0; }
.idkw .w-phead { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--p-faint); }
.idkw .w-pkind { font-weight: 600; color: var(--p-kind); }
.idkw .w-pline { margin-top: 6px; max-width: 56ch; font-size: 17px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.idkw .w-pctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.idkw .w-pbtn { padding: 5px 13px; border: 1px solid var(--p-rule); border-radius: 99px; font: 600 13px var(--sans); color: var(--p-ink); text-align: center; }
.idkw .w-pbtn:hover { border-color: var(--p-faint); }
.idkw .w-pbtn.w-pgo { min-width: 60px; border-color: transparent; background: var(--p-accent); color: var(--p-accent-ink); }
.idkw .w-pdots { display: flex; flex-wrap: wrap; gap: 5px; }
.idkw .w-pdot { width: 20px; height: 7px; border-radius: 4px; background: var(--p-rule); }
.idkw .w-pdot.past { background: color-mix(in oklab, var(--p-accent) 40%, var(--p-rule)); }
.idkw .w-pdot.on { background: var(--p-accent); }
.idkw .w-player button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.idkw .w-pstage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.idkw .w-pstop { padding: 6px 10px; border: 1px solid color-mix(in oklab, var(--p-warn) 45%, transparent); border-radius: 8px; background: color-mix(in oklab, var(--p-warn) 12%, transparent); font-size: 13px; }
.idkw .w-pstop b { font-weight: 600; }
@container (max-width: 720px) {
  .idkw .w-ptop { grid-template-columns: minmax(0,1fr); }
  .idkw .w-pctl { justify-content: flex-start; }
}
.idkw .w-cstage { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
.idkw .w-cparty { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--p-rule); border-radius: 10px; background: var(--p-deep); }
.idkw .w-cparty > b { font-size: 15px; font-weight: 700; }
.idkw .w-cparty.on { border-color: var(--p-call); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-call) 22%, transparent); }
.idkw .w-clbl { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--p-faint); }
.idkw .w-clbl.w-cstep { color: var(--p-call); }
.idkw .w-cdim { font-size: 12.5px; color: var(--p-faint); }
.idkw .w-cmsg { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; margin-inline-start: 18px; border-inline-start: 1.5px dashed var(--p-rule); }
.idkw .w-cmsg.on { border-inline-start: 2px solid var(--p-call); background: color-mix(in oklab, var(--p-call) 10%, transparent); }
.idkw .w-cdir { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-faint); }
.idkw .w-cmsg.on .w-cdir { color: var(--p-call); }
.idkw .w-cnothing { font: 400 12.5px var(--mono); color: var(--p-faint); }
/* One message on the wire, sliding in from its sender's side: the ask from the asker above, the answer from below. */
.idkw .w-cwire { min-width: 0; overflow: hidden; padding: 4px 0; }
.idkw .w-cmsg.arrive.ask { animation: idkw-call-from-above .34s cubic-bezier(.2,.8,.2,1); }
.idkw .w-cmsg.arrive.answer { animation: idkw-call-from-below .34s cubic-bezier(.2,.8,.2,1); }
@keyframes idkw-call-from-above { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes idkw-call-from-below { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.idkw .w-rlanes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 4px 6px; border-bottom: 1.5px solid var(--p-rule); font-weight: 700; }
.idkw .w-rlanes b:last-child { text-align: end; }
.idkw .w-rturns { display: flex; flex-direction: column; gap: 8px; }
.idkw .w-rturn { display: flex; }
.idkw .w-rturn.rb { justify-content: flex-end; }
.idkw .w-rturn.later { opacity: .38; }
.idkw .w-rbub { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: min(86%, 560px); padding: 8px 10px; border: 1.5px solid var(--p-rule); border-radius: 12px; background: var(--p-deep); cursor: pointer; }
.idkw .w-rturn.ra .w-rbub { border-bottom-left-radius: 2px; }
.idkw .w-rturn.rb .w-rbub { border-bottom-right-radius: 2px; }
.idkw .w-rturn.on .w-rbub { border-color: var(--p-rally); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-rally) 22%, transparent); }
.idkw .w-rlabel { align-self: flex-start; font: 600 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; text-align: start; color: var(--p-faint); }
.idkw .w-rturn.rb .w-rlabel { align-self: flex-end; text-align: end; }
.idkw .w-rturn.on .w-rlabel { color: var(--p-rally); }
.idkw .w-rhold { font-size: 12.5px; color: var(--p-soft); }
.idkw .w-rflow { color: var(--p-rally); text-decoration: underline dotted; text-underline-offset: 3px; }
.idkw .w-rloop { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 9px 9px; border-inline: 2px solid color-mix(in oklab, var(--p-rally) 55%, transparent); border-radius: 10px; }
.idkw .w-rlooptext { position: absolute; top: 4px; inset-inline: 0; text-align: center; font: 500 10.5px var(--mono); letter-spacing: .06em; color: var(--p-rally); }
.idkw .w-rloopic { width: 11px; height: 11px; margin-inline-end: 5px; vertical-align: -1.5px; }
.idkw .w-rends { font-size: 12.5px; text-align: center; color: var(--p-soft); }

/* values, drawn as what they are: a block is one line a part; one level down a value is a run of
   parts on one line that wraps between them. Six hues tell the types apart. */
.idkw .w-v4 { --v-ink: var(--ink); --v-faint: var(--ink-faint); --v-rule: var(--rule); --v-box: var(--surface-2); }
.idkw .w-vset { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; min-width: 0; }
.idkw .w-vnamed { min-width: 0; max-width: 100%; border: 1px solid var(--v-rule); border-radius: 8px; background: var(--v-box); color: var(--v-ink); font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.idkw .w-vhead { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid var(--v-rule); }
.idkw .w-vname { font-weight: 600; }
.idkw .w-vtype { font-size: 11px; }
.idkw .w-vbody { padding: 6px 8px; overflow-x: auto; }
.idkw .w-vblk { display: flex; flex-direction: column; align-items: flex-start; border-radius: 4px; }
.idkw .w-vbr { font-weight: 600; padding: 0 2px; }
.idkw .w-vrow { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; padding: 1px 8px 1px 16px; border-radius: 4px; }
.idkw .w-vrow:has(> .w-vix) { flex-wrap: nowrap; }
.idkw .w-vinl { display: inline-flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; }
.idkw .w-vpair { border-radius: 3px; padding: 0 2px; }
.idkw .w-vix, .idkw .w-varr, .idkw .w-vcm, .idkw .w-vmore { color: var(--v-faint); }
.idkw .w-vix { min-width: 1.1em; flex: none; }
.idkw .w-vcm { margin-inline-start: -5px; }
.idkw .w-vfield, .idkw .w-vset [data-type="record"] { color: var(--v-rec); }
.idkw .w-vkey, .idkw .w-vset [data-type="dict"] { color: var(--v-dict); }
.idkw .w-vset [data-type="list"] { color: var(--v-list); }
.idkw .w-vtext, .idkw .w-vset [data-type="text"] { color: var(--v-text); }
.idkw .w-vnum, .idkw .w-vset [data-type="number"] { color: var(--v-num); }
.idkw .w-vyn, .idkw .w-vset [data-type="yesno"] { color: var(--v-yn); }
.idkw .w-vbig { display: inline-block; padding: 0 4px; border-radius: 3px; font-size: 15px; font-weight: 600; }
.idkw .w-vset .w-lit { background: var(--v-lit); color: var(--v-lit-ink); }
.idkw .w-vset .w-lit * { color: inherit; }

/* ───── what the change page and the demo page add to the app's (diffs.css): a summary's words as
   fields in edit mode (editpages.ts), what the agent wrote under a corrected one, and Review */
.idkw .w-ed { border-radius: 3px; white-space: pre-wrap; }
.idkw .w-ed.changed { background: var(--revised-soft); }
.idkw .w-ed.changed:not(:focus) { outline: 1px solid var(--revised-line); }
.idkw .w-corrected { margin-top: 8px; }
.idkw .w-agentwords { margin: 8px 0 0; padding: 8px 12px; border-inline-start: 2px solid var(--rule); font-family: var(--sans); font-size: 12.5px; }
.idkw .w-agentwords dt { margin: 6px 0 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.idkw .w-agentwords dt:first-child { margin-top: 0; }
.idkw .w-agentwords dd { margin: 2px 0 0; color: var(--ink-soft); }
.idkw .w-review { padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.idkw .w-bigbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--ground); }
.idkw .w-bigbtn.busy { background: var(--surface-2); color: var(--ink-soft); border-color: var(--rule); cursor: default; }
.idkw .w-review .hint { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); flex: 1 1 16rem; line-height: 1.55; }
.idkw .w-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--accent); animation: idkw-spin .8s linear infinite; }
@keyframes idkw-spin { to { transform: rotate(360deg); } }
.idkw .w-act { padding: 6px 13px; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.idkw .w-act.go { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.idkw .w-blank { font-family: var(--sans); color: var(--ink-soft); padding: 60px 24px 0; text-align: center; font-size: 13px; }
.idkw .w-blank h3 { font-family: var(--serif); color: var(--ink); font-size: 18px; font-weight: 600; margin: 0 0 6px; }

/* the map view fills the pane under the bar */
.idkw .w-mapwrap { flex: 1; min-height: 0; display: flex; }
.idkw .w-mapwrap > .w-mp { flex: 1; min-width: 0; }

/* ───── the Settings tab: a page of its own under the strip */
.idkw .w-set { position: absolute; inset: 0; z-index: 7; display: grid; grid-template-columns: 200px minmax(0,1fr); font-family: var(--sans); background: var(--ground); color: var(--ink); }
.idkw .w-setnav { display: flex; flex-direction: column; gap: 2px; padding: 22px 12px; border-right: 1px solid var(--rule); background: var(--surface-2); overflow: auto; }
.idkw .w-setnav .h { padding: 0 10px 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.idkw .w-setnav button { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-soft); }
.idkw .w-setnav button:hover { color: var(--ink); }
.idkw .w-setnav button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.idkw .w-setmain { overflow: auto; display: grid; gap: 14px; align-content: start; padding: 26px 40px 48px; scrollbar-width: thin; }
.idkw .w-setmain h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.idkw .w-ssec { display: grid; gap: 10px; max-width: 640px; padding: 14px 18px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.idkw .w-ssec.outlined { border-color: color-mix(in oklab, var(--accent) 62%, var(--surface)); box-shadow: 0 0 0 3px var(--accent-soft); }
.idkw .w-snotice { font-size: 12px; line-height: 1.45; color: var(--warn); margin: -2px 0 2px; }
.idkw .w-ssec h2 { font-size: 14px; font-weight: 700; margin: 0 0 2px; }
.idkw .w-sfine { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.idkw .w-sstatus { margin: 0; font-size: 13px; color: var(--ink-soft); }
.idkw .w-sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--claude); }
.idkw .w-sdot.codex { background: var(--codex); }
.idkw .w-sdot.opencode { background: var(--opencode); }
.idkw .w-sfine code, .idkw .w-ssw .d code, .idkw .w-sline code { font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); padding: 1px 4px; border-radius: 3px; }
.idkw .w-spicks { display: flex; flex-wrap: wrap; gap: 6px; }
.idkw .w-spick { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); font-size: 12.5px; color: var(--ink-soft); }
.idkw .w-spick.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.idkw .w-spick .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--claude); margin-right: 7px; }
.idkw .w-sradio, .idkw .w-scheck { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--ink); }
.idkw .w-sradio:hover, .idkw .w-scheck:hover { background: var(--surface-2); }
.idkw .w-sradio::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); box-sizing: border-box; }
.idkw .w-sradio.on::before { border: 4.5px solid var(--accent); }
.idkw .w-scheck::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 3.5px; border: 1.5px solid var(--rule); box-sizing: border-box; }
.idkw .w-scheck.on::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; border-color: var(--accent); }
.idkw .w-sswgroup { display: grid; gap: 6px; }
.idkw .w-sswlabel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.idkw .w-sswgroup + .w-sswgroup .w-sswlabel { font-size: 10px; }
.idkw .w-ssw { display: flex; gap: 12px; width: 100%; padding: 10px 0 0; border-top: 1px solid var(--rule-soft); font-size: 13px; text-align: start; color: var(--ink); }
.idkw .w-ssw .d { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-faint); }
.idkw .w-ssw .tog { position: relative; flex: none; width: 30px; height: 17px; border-radius: 9px; background: var(--rule); margin-left: auto; }
.idkw .w-ssw .tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.idkw .w-ssw.on .tog { background: #5E9BBD; }
.idkw .w-ssw.on .tog::after { transform: translateX(13px); }
.idkw .w-ssw.sub { padding-left: 26px; }
.idkw .w-ssw.off > * { opacity: .45; }
.idkw .w-ssw[disabled] { cursor: default; }
.idkw .w-sline { display: flex; gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule-soft); font-size: 13px; }
.idkw .w-sline .d { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-faint); }
.idkw .w-strow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 10px; border-top: 1px solid var(--rule-soft); font-size: 13px; }
.idkw .w-strow .note { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.idkw .w-sel { flex: none; font-size: 12px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 5px; background: var(--surface); color: var(--ink); white-space: nowrap; }
.idkw .w-sel::after { content: " ▾"; color: var(--ink-faint); }
.idkw .w-sact { justify-self: start; padding: 6px 14px; border: 1px solid var(--warn); color: var(--warn); border-radius: 6px; font-size: 12.5px; }
.idkw .w-sact:hover { background: var(--warn); color: var(--surface); }

/* ───── the chat: on the window's own surface, light or dark */
.idkw .w-chat { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); color: var(--ink); border-left: 1px solid var(--rule); font-family: var(--serif); }
.idkw .w-chat.busy::after, .idkw .w-chat.need::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.idkw .w-chat.busy::after { box-shadow: inset 0 0 0 1.5px var(--busy), inset 0 0 18px var(--busy-glow); animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-chat.need::after { box-shadow: inset 0 0 0 2px var(--need); }
.idkw .w-chead { display: flex; align-items: center; gap: 10px; padding: 13px 17px; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--rule-soft); }
.idkw .w-chead .w-ctitle { white-space: nowrap; }
.idkw .w-chead .w-ctitle.flag { color: var(--flag); }
.idkw .w-hist { font-size: 9px; letter-spacing: .14em; color: var(--ink-faint); }
.idkw .w-hist:hover { color: var(--ink); }
.idkw .w-perm { margin-left: auto; border: 1px solid var(--rule); border-radius: 9px; padding: 2px 7px; font-size: 9px; letter-spacing: .1em; color: var(--ink-faint); white-space: nowrap; }
.idkw .w-perm.edits { color: var(--perm-edits); border-color: var(--perm-edits-line); background: var(--perm-edits-soft); }
.idkw .w-perm.plan { color: var(--perm-plan); border-color: var(--perm-plan-line); background: var(--perm-plan-soft); }
.idkw .w-perm.auto { color: var(--perm-auto); border-color: var(--perm-auto-line); background: var(--perm-auto-soft); }
.idkw .w-log { flex: 1; min-height: 0; overflow: auto; padding: 17px; font-size: 13.5px; line-height: 1.6; scrollbar-width: thin; display: flex; flex-direction: column; gap: 12px; }
.idkw .w-log .w-quiet { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.idkw .w-you { font-style: italic; color: var(--ink-soft); padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
.idkw .w-you .where { display: block; margin-top: 3px; font: normal 10.5px var(--mono); color: var(--ink-faint); }
.idkw .w-you.waiting { color: var(--ink-faint); border-bottom: 0; }
.idkw .w-you .stopped { display: block; margin-top: 3px; font: normal 10.5px var(--sans); color: var(--ink-faint); }
.idkw .w-said p { margin: 0 0 8px; } .idkw .w-said p:last-child { margin: 0; }
.idkw .w-said b { font-weight: 600; }
.idkw .w-said .w-note { color: var(--ink-faint); font-family: var(--sans); font-size: 12px; }
.idkw .w-work { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); }
.idkw .w-work .t { font-family: var(--mono); font-size: 10.5px; color: var(--accent); margin-right: 6px; }
.idkw .w-work .no { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); }
.idkw .w-vibing { font-family: var(--sans); font-style: italic; font-size: 11.5px; color: var(--ink-faint); }
.idkw .w-cnote { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); background: var(--surface-2); border-radius: 4px; padding: 6px 9px; }
/* A message held while a sync runs: what it waits for, the message, and what can be done with it, on one line when it fits. */
.idkw .w-queued { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 14px 8px; padding: 7px 9px; border-radius: 5px; background: var(--armed-glow); border: 1px solid var(--armed); font-family: var(--sans); font-size: 11.5px; }
.idkw .w-queued .w { color: var(--armed); flex: 0 1 auto; }
.idkw .w-queued .q { color: var(--ink-soft); font-style: italic; flex: 1 1 16em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idkw .w-queued button { background: none; border: 0; padding: 0; color: var(--ink-faint); font-size: 11.5px; flex: none; cursor: pointer; }
.idkw .w-queued button:hover { color: var(--warn); }
.idkw .w-queued button[hidden] { display: none; }
/* What the agent stopped to ask, as the app's box: a command, a question with its options, or a plan. */
.idkw .w-permbox { margin: 0 14px 10px; padding: 13px 14px; border: 1px solid var(--flag-line); background: var(--flag-soft); border-radius: 5px; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; display: grid; gap: 7px; }
.idkw .w-permbox > b { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--flag); }
.idkw .w-permbox code { font-family: var(--mono); font-size: 11.5px; }
.idkw .w-permbox .btns { display: flex; gap: 8px; margin-top: 3px; }
.idkw .w-permbox button:not(.option) { flex: 1; padding: 6px 0; text-align: center; border-radius: 4px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.idkw .w-permbox button.no { background: none; color: var(--ink-soft); border-color: var(--rule); }
.idkw .w-permbox button:disabled { opacity: .45; cursor: default; }
.idkw .w-permbox .said { color: var(--ink-soft); } .idkw .w-permbox q { color: var(--ink); }
.idkw .w-permbox > code { display: block; padding: 8px 10px; border-radius: 4px; background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; }
.idkw .w-permbox .fine { font-size: 11px; line-height: 1.5; color: var(--ink-faint); margin: 1px 0 0; }
.idkw .w-permbox .header { justify-self: start; display: inline-block; font: 9.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--flag-line); color: var(--flag); }
.idkw .w-permbox .asked { font-size: 12.5px; color: var(--ink); margin: 6px 0 8px; }
.idkw .w-permbox .options { display: flex; flex-direction: column; gap: 5px; }
.idkw .w-permbox .option { display: block; width: 100%; text-align: start; padding: 7px 9px; border-radius: 5px; border: 1px solid var(--rule); background: none; color: var(--ink); cursor: pointer; }
.idkw .w-permbox .option:hover { border-color: var(--accent-line); }
.idkw .w-permbox .option.on { border-color: var(--accent-line); background: var(--accent-soft); }
.idkw .w-permbox .option .label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.idkw .w-permbox .option.on .label { color: var(--accent); }
.idkw .w-permbox .option .why { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.idkw .w-permbox .other { width: 100%; padding: 6px 9px; border-radius: 5px; border: 1px solid var(--rule); background: var(--ground); font: 12px var(--sans); color: var(--ink); outline: none; }
.idkw .w-permbox .other:focus { border-color: var(--accent-line); }
.idkw .w-permbox .plan { padding: 10px 12px; max-height: 38vh; overflow-y: auto; background: var(--surface-2); border-radius: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.idkw .w-permbox .plan p { margin: 0 0 8px; }
.idkw .w-permbox .plan ol, .idkw .w-permbox .plan ul { margin: 0; padding-inline-start: 20px; }
.idkw .w-permbox .plan li { margin-bottom: 3px; }
.idkw .w-permbox .plan code { padding: 1px 4px; border-radius: 3px; background: var(--surface); }
.idkw .w-composer > * { min-width: 0; }
.idkw .w-composer.stopping .w-box { padding-right: 64px; }
.idkw .w-composer { position: relative; padding: 12px 14px 14px; border-top: 1px solid var(--rule); font-family: var(--sans); display: grid; gap: 8px; }
.idkw .w-locrow { display: flex; align-items: center; gap: 8px; }
.idkw .w-loc { min-width: 0; font: 10.5px var(--mono); padding: 2px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idkw .w-loc.none { background: none; color: var(--ink-faint); border-color: var(--rule); }
.idkw .w-pick { margin-left: auto; flex: none; font: 10.5px var(--mono); padding: 2px 7px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink-faint); }
.idkw .w-box { display: block; width: 100%; min-height: 64px; resize: none; margin: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 7px; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.45; outline: none; }
.idkw .w-box::placeholder { color: var(--ink-faint); }
.idkw .w-box:focus-visible { border-color: var(--accent-line); }
.idkw .w-box.flash { animation: idkw-flash 1.1s ease-out; }
@keyframes idkw-flash { 0% { box-shadow: 0 0 0 3px var(--accent-line); } 100% { box-shadow: 0 0 0 0 transparent; } }
.idkw .w-box[disabled] { opacity: .55; }
.idkw .w-stop { position: absolute; right: 22px; bottom: 44px; padding: 3px 10px; border-radius: 5px; border: 1px solid var(--rule); background: var(--surface); font-size: 11.5px; color: var(--ink-soft); }
.idkw .w-stop:hover { color: var(--warn); border-color: var(--warn-line); }
.idkw .w-hint { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ink-faint); }
.idkw .w-hint > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.idkw .w-hint button { white-space: nowrap; flex: none; margin-left: auto; color: var(--accent); font-size: 11px; }
.idkw .w-hint button:hover { text-decoration: underline; }
.idkw .w-hint button[disabled] { opacity: .45; text-decoration: none; }
.idkw .w-chatoff { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; background: #16191E; color: #B4BCC8; font-family: var(--sans); font-size: 12.5px; text-align: center; }
.idkw .w-chatoff .light { width: 12px; height: 12px; border-radius: 50%; background: #F28A4C; box-shadow: 0 0 10px rgba(242,138,76,.55); animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-chatoff button { padding: 5px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: #fff; font: 600 12px var(--sans); }
.idkw .w-chatoff .fine { font-size: 11.5px; color: #6E7686; }
.idkw .w-chatoff .t { max-width: 24ch; font-size: 14px; font-weight: 600; line-height: 1.4; color: #fff; }
.idkw .w-chatoff .w-pr { font-family: var(--mono); font-size: 11px; color: #B4BCC8; margin-inline-end: 4px; }

/* ───── the shell */
.idkw .w-shell { position: absolute; z-index: 6; display: flex; flex-direction: column; background: #16191E; min-width: 0; box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
.idkw .w-shell[data-dock="drawer"] { left: var(--railw); right: var(--chatw); bottom: 0; height: 47%; }
.idkw .w-shell[data-dock="reading"] { left: var(--railw); right: var(--chatw); top: 0; bottom: 0; }
.idkw .w-shell[data-dock="chat"] { right: 0; width: var(--chatw); top: 0; bottom: 0; }
.idkw .w-shell[data-dock="rail"] { left: 0; width: var(--railw); top: 0; bottom: 0; }
.idkw .w-shell[data-dock="tab"] { inset: 0; }
.idkw .w-shell.busy::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--busy), inset 0 0 18px var(--busy-glow); animation: idkw-breathe 2.2s ease-in-out infinite; }
.idkw .w-shell[data-dock="tab"].busy::after { box-shadow: inset 1.5px 0 0 var(--busy), inset -1.5px 0 0 var(--busy), inset 0 -1.5px 0 var(--busy), inset 0 0 18px var(--busy-glow); }
.idkw .w-shbar { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; background: var(--chrome); color: var(--chrome-faint); font-size: 11px; flex: none; min-width: 0; }
.idkw .w-shbar .w-what { font-family: var(--mono); color: var(--chrome-ink); flex: none; white-space: nowrap; }
.idkw .w-shbar .w-doing { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chrome-ink); }
.idkw .w-shagent { flex: none; padding: 2px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; color: var(--chrome-ink); font-size: 11px; white-space: nowrap; }
.idkw .w-shagent:hover { background: rgba(255,255,255,.08); color: #fff; }
.idkw .w-docks { display: flex; gap: 1px; flex: none; }
.idkw .w-dk { width: 24px; height: 22px; border-radius: 4px; color: var(--chrome-faint); display: grid; place-items: center; }
.idkw .w-dk svg { width: 15px; height: 15px; }
.idkw .w-dk .frame { fill: none; stroke: currentColor; stroke-width: 1.6; }
.idkw .w-dk .fill { fill: currentColor; opacity: .45; }
.idkw .w-dk:hover, .idkw .w-dk[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.09); }
.idkw .w-shx { color: var(--chrome-faint); font-size: 15px; width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; flex: none; }
.idkw .w-shx:hover { color: #fff; background: rgba(255,255,255,.08); }
.idkw .w-screen { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: #D6DBE3; white-space: pre-wrap; }
.idkw .w-screen .dim { color: #6E7686; } .idkw .w-screen .or { color: #E58A62; } .idkw .w-screen .gr { color: #7FBE9B; }
.idkw .w-cur { display: inline-block; width: 7px; height: 13px; background: #D6DBE3; vertical-align: -2px; animation: idkw-blink 1s steps(1) infinite; }
@keyframes idkw-blink { 50% { opacity: 0; } }

/* ───── sheets */
/* The app blurs 1.5px behind this sheet as well. Here Chrome samples that blur from the wrong place once the window is
   scaled, and draws mirrored copies of the window behind the sheet, so the mock keeps only the dimming. */
.idkw .w-veil { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px; background: rgba(16,19,23,.42); }
.idkw .w-veil.frost { right: var(--chatw); place-items: start center; padding-top: 72px; background: color-mix(in oklab, var(--ground) 66%, transparent); backdrop-filter: blur(3px); }
.idkw .w-veil.search { place-items: start center; padding-top: 48px; background: rgba(16,19,23,.32); backdrop-filter: none; }
.idkw .w-card { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.3); font-family: var(--sans); font-size: 12.5px; line-height: 1.45; overflow: hidden; }
.idkw .w-card.two { width: 540px; border-color: var(--warn-line); }
.idkw .w-band { background: var(--warn-soft); color: var(--warn); font-size: 15px; font-weight: 700; padding: 11px 18px; border-bottom: 1px solid var(--warn-line); }
.idkw .w-sb { padding: 14px 18px 16px; display: grid; gap: 8px; }
.idkw .w-sb p { color: var(--ink-soft); }
.idkw .w-sb ul { margin: 0; padding-left: 18px; color: var(--ink-soft); display: grid; gap: 2px; }
.idkw .w-sofar { padding: 6px 10px; border-radius: 6px; background: var(--armed-glow); color: var(--ink); border: 1px solid color-mix(in oklab, var(--armed) 40%, transparent); }
.idkw .w-bname { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.idkw .w-field { width: 200px; font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--rule); border-radius: 5px; padding: 4px 7px; background: var(--ground); }
.idkw .w-small { font-size: 11.5px; color: var(--ink-faint); }
.idkw .w-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.idkw .w-btns button { font-size: 12.5px; border-radius: 6px; padding: 6px 13px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); text-align: center; }
.idkw .w-btns button.go, .idkw .w-btns button.first { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
.idkw .w-btns button.plum { background: var(--plum-soft); color: var(--plum); border-color: transparent; box-shadow: inset 0 0 0 1px var(--plum-line); }
.idkw .w-btns.col { flex-direction: column; align-items: stretch; }
.idkw .w-card.merged { width: 360px; padding: 22px 22px 18px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.idkw .w-card.merged .mark { width: 44px; height: 44px; border-radius: 10px; background: var(--chrome); color: #B392F0; display: grid; place-items: center; }
.idkw .w-card.merged .mark svg { width: 22px; height: 22px; }
.idkw .w-card.merged h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.idkw .w-card.merged p { color: var(--ink-soft); }
.idkw .w-card.merged .quiet { color: var(--ink-faint); font-size: 11.5px; }
.idkw .w-card.merged .w-btns { width: 100%; }
.idkw .w-restore { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: var(--ground); }
.idkw .w-rcard { width: 544px; display: grid; gap: 12px; padding: 22px 20px 16px; text-align: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(0,0,0,.12); font-family: var(--sans); color: var(--ink); }
.idkw .w-rcard .mark { justify-self: center; width: 44px; height: 44px; border-radius: 10px; background: var(--chrome); color: var(--chrome-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.idkw .w-rcard h2 { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.idkw .w-rcard .sub { margin: -6px 0 0; font-size: 12px; color: var(--ink-faint); }
.idkw .w-rlist { text-align: left; border: 1px solid var(--rule-soft); border-radius: 8px; background: var(--ground); }
.idkw .w-rsrow { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 7px 12px; }
.idkw .w-rsrow + .w-rsrow { border-top: 1px solid var(--rule-soft); }
.idkw .w-rsrow .face { font: 11.5px var(--mono); color: var(--ink); white-space: nowrap; }
.idkw .w-rsrow .face svg { width: 11px; height: 11px; opacity: .6; margin-right: 4px; vertical-align: -1px; }
.idkw .w-rsrow .rname { font-size: 12.5px; font-weight: 600; }
.idkw .w-rsrow .tag { margin-left: 6px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--surface-2); color: var(--ink-faint); }
.idkw .w-rsrow .what { display: flex; gap: 6px; margin-top: 2px; font-size: 11.5px; color: var(--ink-soft); }
.idkw .w-rsrow .rmark { width: 14px; flex: none; font: 700 9.5px var(--mono); color: var(--ink-faint); }
.idkw .w-rsrow .rmark svg { width: 11px; height: 11px; color: var(--claude); }
.idkw .w-rchip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--flag-soft); color: var(--flag); border: 1px solid var(--flag-line); }
.idkw .w-rcard .w-btns { justify-content: center; }
.idkw .w-rcard .keep { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; color: var(--ink-soft); }
.idkw .w-rcard .keep i { width: 13px; height: 13px; border: 1.5px solid var(--rule); border-radius: 3px; }
.idkw .w-rcard .fine { font-size: 11px; color: var(--ink-faint); }
.idkw .w-rsheet { width: 540px; max-height: calc(100% - 20px); border-radius: 12px; background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 20px 50px rgba(0,0,0,.35); font-family: var(--sans); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.idkw .w-shead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }
.idkw .w-shead svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-linecap: round; }
.idkw .w-shead .q { font-size: 14px; }
.idkw .w-shead input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-family: var(--sans); }
.idkw .w-rscroll { overflow: auto; padding: 12px 14px 14px; display: grid; gap: 14px; }
.idkw .w-slbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.idkw .w-slbl .ct { font-weight: 400; color: var(--ink-faint); margin-left: 6px; }
.idkw .w-hopts { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.idkw .w-hopt { display: grid; gap: 3px; width: 100%; text-align: start; padding: 8px 10px; }
.idkw .w-hopt + .w-hopt { border-top: 1px solid var(--rule-soft); }
.idkw .w-hopt:hover { background: var(--surface-2); }
.idkw .w-hopt .hname { font-size: 12.5px; font-weight: 600; }
.idkw .w-hopt .sctx { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idkw .w-hopt mark { background: var(--found); color: inherit; border-radius: 2px; }
.idkw .w-hopt .hnote { font-size: 11px; color: var(--ink-faint); }

/* ───── the tour overlay, inside the window */
.idkw .w-tour { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.idkw .w-blk { position: absolute; background: var(--shade); pointer-events: auto; transition: all .28s cubic-bezier(.3,.7,.2,1); }
.idkw .w-ring { position: absolute; border-radius: 8px; box-shadow: 0 0 0 2px #8FBEDA, 0 0 0 6px rgba(143,190,218,.25); pointer-events: none; animation: idkw-pulse 2.2s ease-in-out infinite; transition: all .28s cubic-bezier(.3,.7,.2,1); }
.idkw .w-ring.act { box-shadow: 0 0 0 2px #7FBE9B, 0 0 0 6px rgba(127,190,155,.28); animation-name: idkw-pulse2; }
@keyframes idkw-pulse { 50% { box-shadow: 0 0 0 2px #8FBEDA, 0 0 0 10px rgba(143,190,218,.1); } }
@keyframes idkw-pulse2 { 50% { box-shadow: 0 0 0 2px #7FBE9B, 0 0 0 10px rgba(127,190,155,.1); } }
.idkw .w-tag { position: absolute; pointer-events: none; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: #8FBEDA; color: #0E1A22; border-radius: 4px; padding: 3px 7px; transform: translate(-50%, -50%); }
.idkw .w-tag.t-rail { left: calc(var(--railw) / 2); top: 330px; }
.idkw .w-tag.t-read { left: calc(var(--railw) + (100% - var(--railw) - var(--chatw)) / 2); top: 140px; }
.idkw .w-tag.t-chat { right: calc(var(--chatw) / 2); top: 160px; transform: translate(50%, -50%); }

/* the coach card: inside the window when it is drawn large enough to read, under it otherwise */
.idkw .w-coach { position: absolute; width: 276px; pointer-events: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35); overflow: hidden; transition: left .26s ease, top .26s ease; font-family: var(--coach-font); text-align: start; }
.idkw .w-coach.center { width: 340px; }
.idkw .w-coach.last { width: 380px; text-align: center; }
.idkw .w-bar { height: 3px; background: var(--surface-2); }
.idkw .w-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.idkw .w-in { padding: 12px 15px 13px; display: grid; gap: 8px; }
.idkw .w-coach h4 { margin: 0; font-family: var(--coach-head); font-size: 17px; font-weight: 600; line-height: 1.25; }
.idkw .w-coach.center h4, .idkw .w-coach.last h4 { font-size: 21px; }
.idkw .w-coach p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.idkw .w-coach p b { color: var(--ink); font-weight: 600; }
.idkw .w-coach kbd { font-family: var(--mono); font-size: .85em; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--surface); color: var(--ink); }
.idkw .w-do { font-size: 12.5px; color: var(--accent); font-weight: 600; display: flex; gap: 7px; align-items: center; text-align: start; }
.idkw .w-do::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7FBE9B; box-shadow: 0 0 0 3px rgba(127,190,155,.25); flex: none; }
.idkw .w-do:hover { text-decoration: underline; }
.idkw .w-nav { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.idkw .w-coach.last .w-nav { justify-content: center; }
.idkw .w-coach.choose .w-nav { justify-content: center; flex-wrap: wrap; gap: 8px; }
.idkw .w-nav .w-sp { flex: 1; }
.idkw .w-nav button { font-size: 12px; border-radius: 6px; padding: 6px 11px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); }
.idkw .w-nav button.go { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
.idkw .w-nav button.skip { border-color: transparent; background: none; color: var(--ink-soft); padding: 6px 2px; }
/* The page has a skip link called .skip, fixed and pushed off the top until focused; the coach's
   Skip tour shares the name, and without this it was drawn off screen. */
.idkw .w-nav button.skip { position: static; transform: none; z-index: auto; font-weight: 400; }
.idkw .w-nav button.again { width: 30px; padding: 6px 0; text-align: center; }
.idkw .w-nav button:hover { filter: brightness(1.06); }
.idkw .w-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.idkw .w-key li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.idkw .w-key b { color: var(--ink); font-weight: 600; }
.idkw .w-key .w-kdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; border: 1px solid var(--accent); }
.idkw .w-key .w-kdot.documented { background: var(--accent); }
.idkw .w-key .w-kdot.described { border-width: 2px; }
.idkw .w-key .w-kdot.undescribed { border-color: var(--flag); border-style: dashed; }
.idkw .w-key .w-chip2 { font-size: 9px; letter-spacing: .1em; border: 1px solid var(--rule); color: var(--ink-faint); border-radius: 9px; padding: 1px 6px; white-space: nowrap; margin-top: 2px; font-family: var(--sans); }
.idkw .w-key .w-chip2.edits { color: var(--perm-edits); border-color: var(--perm-edits-line); background: var(--perm-edits-soft); }
.idkw .w-key .w-chip2.plan { color: var(--perm-plan); border-color: var(--perm-plan-line); background: var(--perm-plan-soft); }
.idkw .w-key .w-chip2.auto { color: var(--perm-auto); border-color: var(--perm-auto-line); background: var(--perm-auto-soft); }
.idkw .w-fig { background: #101317; border-radius: 7px; padding: 10px; color: #B4BCC8; display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; align-items: center; font-size: 11.5px; direction: ltr; }
.idkw .w-coach[dir="rtl"] .w-fig { direction: rtl; }
.idkw .w-fig.chrome { display: block; background: var(--chrome-2); color: var(--chrome-ink); padding: 8px 4px 2px; }
.idkw .w-fig.chrome .w-turn { cursor: default; border-bottom: 0; }
.idkw .w-mt { position: relative; display: inline-flex; align-items: center; gap: 6px; background: #181C22; color: #fff; border-radius: 6px 6px 0 0; padding: 4px 10px; font: 600 11px var(--mono); white-space: nowrap; justify-self: start; direction: ltr; }
.idkw .w-mt.busy::after, .idkw .w-mt.need::after, .idkw .w-mt.merged::after { content: ""; position: absolute; inset: 0; border-radius: 6px 6px 0 0; }
.idkw .w-mt.busy::after { box-shadow: inset 0 0 0 1.5px #F28A4C, 0 0 12px rgba(242,138,76,.55); }
.idkw .w-mt.need::after { box-shadow: inset 0 0 0 2px #F2C94C, 0 0 14px rgba(242,201,76,.45); }
.idkw .w-mt.merged::after { box-shadow: inset 0 0 0 1.5px #B392F0; }
.idkw .w-mt.merged { color: rgba(255,255,255,.55); }
.idkw .w-mt .w-dot { width: 7px; height: 7px; border-radius: 50%; background: #5AA9FF; }
.idkw .w-fig .w-w { color: #B4BCC8; }
.idkw .w-fig .w-figwide { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 3px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); }
.idkw .w-mt .w-bm { width: 11px; height: 11px; opacity: .7; }
.idkw .w-mt.cup svg { width: 15px; height: 15px; }
.idkw .w-mt .w-dot { flex: none; }

/* coach under the window, at text size the reader chose */
.idkw .w-out { margin-top: 14px; }
.idkw .w-out .w-coach { position: relative; left: auto !important; top: auto !important; width: auto !important; box-shadow: none; transition: none; }
.idkw .w-out .w-coach h4 { font-size: 1.15rem; }
.idkw .w-out .w-coach p, .idkw .w-out .w-do, .idkw .w-out .w-key { font-size: .95rem; }
.idkw .w-out .w-nav button { font-size: .9rem; padding: 9px 14px; }
.idkw.coach-out .w-tour .w-coach { display: none; }

@media (prefers-reduced-motion: reduce) {
  .idkw .w-ring, .idkw .w-ring.act, .idkw .w-cur, .idkw .w-box.flash, .idkw .w-wtab.busy::after, .idkw .w-wtab.sh.joined::after, .idkw .w-strip .w-rim, .idkw .w-od.busy, .idkw .w-repo.busy::after, .idkw .w-sync.busy, .idkw .w-sync.busy .w-body1,
  .idkw .w-chat.busy::after, .idkw .w-shell.busy::after, .idkw .w-chatoff .light, .idkw .w-spin, .idkw .w-cmsg.arrive, .idkw .w-reload.reading svg { animation: none; }
  .idkw .w-reload.reading { color: #fff; }
  .idkw .w-coach, .idkw .w-bar i, .idkw .w-chev, .idkw .w-blk, .idkw .w-ring, .idkw .w-slide, .idkw .w-tw::before, .idkw .w-chv, .idkw .w-ssw .tog::after, .idkw .w-sgbar i { transition: none; }
}
html.idk-still .idkw *, html.idk-still .idkw *::before, html.idk-still .idkw *::after { animation: none !important; transition: none !important; }

/* the language menu: every language in its own name, two columns, under (or over) its button */
.idk-langs { position: fixed; z-index: 9002; background: var(--idk-ui-bg); color: var(--idk-ui-fg); border: 1px solid var(--idk-ui-rule); border-radius: 12px;
  box-shadow: var(--idk-ui-shadow); padding: 6px; font-family: var(--idk-ui-font); max-height: calc(100vh - 24px); overflow: auto; }
.idk-langs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(8, auto); grid-auto-flow: column; gap: 2px 4px; }
.idk-langs button { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; min-width: 128px; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; line-height: 1.3;
  color: var(--idk-ui-soft); white-space: nowrap; text-align: start; }
.idk-langs button:hover { background: color-mix(in oklab, var(--idk-ui-rule) 45%, transparent); color: var(--idk-ui-fg); }
.idk-langs button[aria-current="true"] { color: var(--idk-ui-fg); font-weight: 600; background: color-mix(in oklab, var(--idk-ui-accent) 14%, transparent); }
.idk-langs button:focus-visible { outline: 2px solid var(--idk-ui-accent); outline-offset: -2px; }
/* An English control name inside right-to-left text stays one unit rather than being reordered across a line break. */
[dir="rtl"] :is(b, code, kbd) { unicode-bidi: isolate; }
/* In a tour card those are always English, and a key name like ⌃` or ⌘⇧F is all symbols, which right-to-left text would read backwards. */
[dir="rtl"] .w-coach :is(b, code, kbd) { direction: ltr; }