/* The app's two tools (kit.js), on the app's own tokens and components.
   What they share with مسیر نوآوری is used as is -- .opening, .pick, .histwrap,
   .seg, .chip, .mini, .btn, .rocell, .fnote -- and what is new here is only
   what those screens never needed: a step rail, fields, lists, a score table.
   Class names are prefixed k- so nothing here can collide with the app's own
   .fld / .note / .chips, which exist and mean something else. */

/* canvas icons from /assets/img/dt-icons.svg */
.dti{inline-size:1em; block-size:1em; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.15em}
bdi.en{unicode-bidi:isolate; direction:ltr; color:var(--d-mute); font-family:var(--y-sans);
  font-size:.62em; font-weight:400; letter-spacing:.01em}

/* ── home ─────────────────────────────────────────────────────────────────── */
.homepicks{margin-block-start:30px}
.pick.big{min-block-size:132px; padding:26px 26px; gap:18px}
.pick.big .ic{inline-size:62px; block-size:62px; border-radius:16px; background:var(--d-accent-soft)}
.pick.big .ic svg{inline-size:30px; block-size:30px}
.pick.big b{font-size:clamp(28px,6.4vw,34px)}
.homediv{margin-block-start:30px}
/* THREE TOOLS, THREE COLUMNS (2026-10-09). Under 600px two columns, and the
   third tile lies along the whole row instead of sitting beside an empty
   column — never one orphan, the rule the tools page learned. */
.kittiles{grid-template-columns:repeat(3,minmax(0,1fr)); margin-block-start:14px; grid-auto-rows:auto}
/* Smaller tiles, and a sans label: Lalezar is display type and never goes
   under 28px, which a two-column tile on a phone cannot give it. */
.pick.small{flex-direction:column; align-items:flex-start; gap:12px; min-block-size:118px; padding:18px}
.pick.small b{font-family:var(--y-sans); font-weight:700; font-size:15.5px; line-height:1.6}
.pick.small .ic{inline-size:42px; block-size:42px; font-size:21px}
.kittiles .pick:nth-child(2){animation-duration:12.5s; animation-delay:-6s}
.kittiles .pick:nth-child(3){animation-duration:13.5s; animation-delay:-9s}
@media (max-width:599px){
  .kittiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kittiles .pick:nth-child(3){grid-column:1 / -1; flex-direction:row; align-items:center; min-block-size:0; padding-block:16px}
}
@media (max-width:360px){ .kittiles{grid-template-columns:minmax(0,1fr)} .kittiles .pick:nth-child(3){grid-column:auto} }
.testtiles{grid-template-columns:repeat(4,minmax(0,1fr)); margin-block-start:14px; grid-auto-rows:auto}
a.pick{text-decoration:none; color:inherit}
.testtiles .pick:nth-child(2){animation-duration:11.5s; animation-delay:-3s}
.testtiles .pick:nth-child(3){animation-duration:12.5s; animation-delay:-7s}
.testtiles .pick:nth-child(4){animation-duration:13.5s; animation-delay:-10s}
@media (max-width:899px){ .testtiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:360px){ .testtiles{grid-template-columns:minmax(0,1fr)} }

/* ── a tool's step ────────────────────────────────────────────────────────── */
.kitstep{padding-block:18px 0}
/* The step count comes from the tool (`--n` on the element): five for the
   two canvases, four for the random-input tool. */
.kitrail{display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:6px}
.kitrail button{display:flex; flex-direction:column; align-items:center; gap:6px; min-inline-size:0;
  padding:4px 2px; min-block-size:44px; color:var(--d-mute); font-size:11.5px; line-height:1.45;
  text-align:center; transition:color .16s}
.kitrail .d{position:relative; inline-size:42px; block-size:42px; border-radius:11px; display:grid;
  place-items:center; font-size:19px; background:var(--d-raise); border:1px solid var(--d-line2);
  transition:background .16s, border-color .16s, color .16s}
.kitrail button:hover .d{border-color:var(--d-accent); color:var(--d-accent)}
.kitrail .now{color:var(--d-accent); font-weight:700}
.kitrail .now .d{background:var(--d-accent-soft); border-color:var(--d-accent); color:var(--d-accent)}
.kitrail .done{color:var(--d-ink2)}
.kitrail .done .d{background:var(--d-ok-soft); border-color:var(--d-ok); color:var(--d-ok)}
/* a finished step keeps its icon and gains a tick: state is not colour alone */
.kitrail .done .d::after{content:"✓"; position:absolute; inset-block-start:-6px; inset-inline-end:-6px;
  inline-size:17px; block-size:17px; border-radius:50%; background:var(--d-ok); color:#0F0D0C;
  font-size:10px; line-height:17px; font-weight:700; text-align:center}
@media (max-width:420px){ .kitrail .l{font-size:10.5px} }
.kith{margin-block-start:26px}
.kitlead{color:var(--d-mute); margin:8px 0 0; font-size:14.5px; line-height:1.9}

.kbox{margin-block-start:14px; background:var(--d-panel); border:1px solid var(--d-line);
  border-radius:var(--d-r); padding:16px}
.kbox h3{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:16px}
.kbox h3 .dti{font-size:19px; color:var(--d-accent)}
.kbox h3.ok .dti{color:var(--d-ok)}
.kbox h3.no .dti{color:var(--d-no)}
.kq{color:var(--d-mute); font-size:13.5px; margin:4px 0 10px; line-height:1.8}
.kgrid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.kgrid2 .kbox{margin-block-start:14px}
@media (max-width:640px){ .kgrid2{grid-template-columns:minmax(0,1fr); gap:0} }

.klab{display:flex; align-items:center; gap:8px; margin:16px 0 8px; font-size:14.5px; font-weight:700; color:var(--d-ink2)}
.klab .dti{font-size:17px; color:var(--d-accent)}
.klab small{font-weight:400; color:var(--d-mute); font-size:13px}
.kin{direction:rtl; text-align:start; inline-size:100%; background:var(--d-bg); color:var(--d-ink);
  border:1px solid var(--d-control); border-radius:var(--d-r-sm); padding:10px 13px; line-height:1.8;
  font-size:15.5px; min-block-size:46px; transition:border-color .16s, box-shadow .16s}
.kin::placeholder{color:var(--d-mute); opacity:1}
.kin:focus{outline:none; border-color:var(--d-accent); box-shadow:0 0 0 3px rgba(233,95,35,.16)}
textarea.kin{resize:vertical; min-block-size:76px}
.krow{display:flex; align-items:center; gap:8px; margin-block-start:8px}
.kx{flex:0 0 auto; inline-size:44px; block-size:44px; border-radius:12px; border:1px solid var(--d-line2);
  color:var(--d-mute); font-size:20px; line-height:1; transition:border-color .16s, color .16s}
.kx:hover{border-color:var(--d-no); color:var(--d-no)}
.kno{flex:0 0 auto; inline-size:30px; block-size:30px; border-radius:9px; background:var(--d-raise);
  color:var(--d-ink2); display:grid; place-items:center; font-size:13.5px; font-weight:700}
.kadd{margin-block-start:12px}
.kflag{margin-block-start:8px; background:var(--d-accent-soft); border-inline-start:3px solid var(--d-accent);
  border-radius:10px; padding:9px 12px; font-size:13.5px; line-height:1.8; color:#F3B79A}
.kflag b{color:#F6C9AF}
/* ── پنج دام نوشتن بیانیه ──────────────────────────────────────────────────
   A reference fold over the form it is about. NOTHING HERE IS CARRIED BY
   COLOUR ALONE: each example says «این‌طور نه» / «این‌طور بله» in words, and
   the green and the red are a start bar on the line the word already labels —
   a filled shape, judged by area, which is the 3:1 a rule owes rather than the
   4.5 a glyph does. */
.kguide{margin-block-start:16px; border:1px solid var(--d-line2); border-radius:var(--d-r-sm);
  background:var(--d-raise)}
.kguide>summary{display:flex; align-items:center; gap:9px; min-block-size:46px; padding:10px 14px;
  cursor:pointer; font-weight:700; font-size:14.5px; color:var(--d-ink2); list-style:none}
.kguide>summary::-webkit-details-marker{display:none}
/* «›» is bidi-mirrored, so on this rtl page it points LEFT, which is forward.
   Open, it has to point DOWN, at what it just revealed — and from pointing
   left that is rotate(-90deg). rotate(90deg) reads correct and points UP, back
   at the summary. Rendered both ways before choosing; CSS rotation is
   clockwise, so the sign is not guessable from the word «quarter turn». */
.kguide>summary::after{content:"›"; margin-inline-start:auto; font-size:19px; line-height:1;
  color:var(--d-mute); transition:transform .18s}
.kguide[open]>summary::after{transform:rotate(-90deg)}
.kguide>summary .dti{font-size:17px; color:var(--d-accent)}
.kguide>summary:hover{color:var(--d-ink)}
.kgbody{padding:0 14px 12px}
.kgitem{padding-block:12px; border-block-start:1px solid var(--d-line2)}
.kgitem>b{display:block; font-size:14px; color:var(--d-ink); margin-block-end:9px}
.kgx,.kgv{margin:0 0 7px; padding:8px 11px; border-radius:9px; font-size:13.5px; line-height:1.9;
  color:var(--d-ink2); background:var(--d-bg)}
.kgx{border-inline-start:3px solid var(--d-no)}
.kgv{border-inline-start:3px solid var(--d-ok)}
.kgx>span,.kgv>span{display:inline-block; margin-inline-end:8px; font-weight:700; font-size:12.5px}
.kgx>span{color:#F1A99D}
.kgv>span{color:#8AD8A9}
.kgwhy{margin:0; font-size:13px; line-height:1.9; color:var(--d-mute)}
.kgbody .fnote{margin-block-start:12px}

.kevtop{display:flex; align-items:center; gap:10px; justify-content:space-between; margin-block-end:10px}
.kev.fact{border-inline-start:3px solid var(--d-ok)}
.kev.assumption{border-inline-start:3px solid var(--d-no)}
.seg button .dti{font-size:16px; margin-inline-end:6px}
.seg button.on.okc{background:var(--d-ok); border-color:var(--d-ok); color:#0F0D0C}
.seg button.on.noc{background:var(--d-no); border-color:var(--d-no); color:#0F0D0C}
.seg.kwrap button{text-align:start; line-height:1.7; border-radius:14px}
.kcounts{display:flex; flex-wrap:wrap; gap:8px; margin-block-start:14px}
.kcounts .chip{background:var(--d-raise); color:var(--d-ink2)}
.kcounts .chip.ok{background:var(--d-ok-soft); color:#8AD8A9}
.kcounts .chip.fix{background:var(--d-accent-soft); color:#F09A6B}
.chip.no{background:rgba(224,108,90,.15); color:#F1A99D}
.kchecks label{display:flex; align-items:flex-start; gap:10px; min-block-size:44px; padding:6px 0;
  font-size:14.5px; color:var(--d-ink2); cursor:pointer; line-height:1.8}
.kchecks input{inline-size:18px; block-size:18px; margin-block-start:5px; accent-color:var(--d-accent)}
.ksay{margin-block-start:12px; background:var(--d-raise); border-radius:var(--d-r-sm); padding:13px 15px;
  font-weight:700; line-height:1.95; color:var(--d-ink)}
.ksay.ph{font-weight:400; color:var(--d-mute)}

/* the one-page canvas: nine cells, right to left, as on the session's slide */
.kcanvash{margin-block-start:28px}
.kcanvas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-block-start:12px}
@media (max-width:640px){ .kcanvas{grid-template-columns:minmax(0,1fr)} }
.kcanvas .rocell{padding:12px 13px; border-radius:var(--d-r-sm); min-inline-size:0}
.kcanvas .rocell .h{align-items:center}
.kcanvas .rocell .h .dti{font-size:15px; color:var(--d-accent)}
.kcanvas .rocell .t{font-size:14px}
.kcanvas .rocell p,.kcanvas .rocell ul{font-size:13px; line-height:1.8; margin:6px 0 0; color:var(--d-ink2)}
.kcanvas .rocell ul{padding-inline-start:16px}
.kcanvas .rocell.hot{border-color:var(--d-accent); background:var(--d-accent-soft)}

/* ── prioritisation ───────────────────────────────────────────────────────
   The AHP screens are gone (pairwise gauge, consistency bar, ranked list) and
   what replaces them is the workshop's instrument on the APP's dark ramp:
   every colour here is a --d-* token, so this tool cannot drift from the
   screens around it. Nothing is carried by colour alone — a rated row prints
   the anchor it chose, and every quadrant is captioned in the chart AND in the
   key beneath it. */

/* The group a set of criteria belongs to. It is a heading, not a control:
   pressing it would do nothing, and the caregiver-grid rule says a thing that
   cannot be pressed must not look pressable. */
.kaxhd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-block:22px 10px; padding-block-end:8px; border-block-end:1px solid var(--d-line)}
.kaxhd b{font-size:15.5px; color:var(--d-ink)}
.kaxhd span{font-size:12.5px; color:var(--d-mute); line-height:1.7}

/* a criterion, and its anchors behind a disclosure */
.kcrit{padding:10px 12px}
.kcrit + .kcrit{margin-block-start:8px}
.kexp{font-size:14px; line-height:1}
.kanch{margin-block-start:10px; padding-block-start:10px; border-block-start:1px solid var(--d-line)}
.kanch .klab{margin-block:10px 6px}
.kanch .klab:first-child{margin-block-start:0}
.kno.sm{inline-size:26px; block-size:26px; font-size:12.5px}

/* ── the weight sliders ───────────────────────────────────────────────────
   0..10 IN ELEVEN STOPS, which is already more positions than anybody holds
   opinions about; the workshop reached the same number from 0..100 in fives.
   The value sits beside the thumb and the percentage in the title row: two
   numbers because they are two facts, and a screen showing only the second
   makes the control feel like it is guessing. */
.kw{padding-block:11px; border-block-end:1px solid var(--d-line)}
.kw:last-of-type{border-block-end:0}
.kwt{display:flex; align-items:baseline; gap:10px}
.kwt b{font-size:14.5px; font-weight:700; line-height:1.7; min-inline-size:0}
.kwpc{margin-inline-start:auto; flex:0 0 auto; font-size:13.5px; font-weight:700;
  color:var(--d-accent); font-variant-numeric:tabular-nums}
.kwr{display:flex; align-items:center; gap:12px; margin-block-start:8px}
.kwv{flex:0 0 auto; inline-size:34px; text-align:center; font-size:14px; font-weight:700;
  color:var(--d-ink2); font-variant-numeric:tabular-nums;
  background:var(--d-raise); border:1px solid var(--d-line2); border-radius:8px; padding:3px 0}
.kw input[type=range]{flex:1; min-inline-size:0; block-size:34px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer}
.kw input[type=range]::-webkit-slider-runnable-track{block-size:6px; border-radius:999px; background:var(--d-line2)}
.kw input[type=range]::-moz-range-track{block-size:6px; border-radius:999px; background:var(--d-line2)}
/* 26px of thumb: this is dragged with a thumb on a phone, and the app's own
   control floor is 44px of touch target, which the 34px track height gives. */
.kw input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  inline-size:26px; block-size:26px; margin-block-start:-10px; border-radius:50%;
  background:var(--d-accent); border:3px solid var(--d-bg); box-shadow:0 1px 4px rgba(0,0,0,.5)}
.kw input[type=range]::-moz-range-thumb{inline-size:20px; block-size:20px; border-radius:50%;
  background:var(--d-accent); border:3px solid var(--d-bg)}
.kw input[type=range]:focus-visible{outline:2px solid var(--d-accent); outline-offset:4px; border-radius:999px}
/* the share bar: one segment per criterion, in the order they are listed */
.kbarh{display:flex; block-size:10px; border-radius:999px; overflow:hidden;
  margin-block-start:14px; background:var(--d-line)}
.kbarh i{display:block; transition:inline-size .18s cubic-bezier(.2,.8,.2,1)}

/* ── the scoring step ─────────────────────────────────────────────────────
   The criterion's name and its two END anchors ride at the top, because that
   is the rubric at the moment of every decision on a screen this long. */
.kcrithd{margin-block:16px 12px; padding:14px 15px; border:1px solid var(--d-line2);
  border-radius:var(--d-r); background:var(--d-raise)}
.kcn{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-block-end:8px}
.kcstep{margin-inline-start:auto; font-size:12.5px; color:var(--d-mute)}
.kcrithd h3{margin:0; font-size:17px; line-height:1.6}
.kchint{margin:5px 0 0; font-size:13px; color:var(--d-mute); line-height:1.75}
.kends{display:flex; justify-content:space-between; gap:12px; margin-block-start:11px;
  padding-block-start:10px; border-block-start:1px solid var(--d-line);
  font-size:12.5px; color:var(--d-ink2); line-height:1.7}
.kends span{flex:1 1 0; min-inline-size:0}
.kends span:last-child{text-align:end}
.kends b{color:var(--d-accent); margin-inline-end:4px}
.ksrow{padding-block:13px; border-block-end:1px solid var(--d-line)}
.ksrow:last-child{border-block-end:0}
.kst{margin:0 0 10px; font-size:14px; line-height:1.85; color:var(--d-ink2)}
.kst b{color:var(--d-ink)}
.rungs{display:flex; gap:7px}
.rungs button{flex:1 1 0; min-inline-size:0; block-size:44px; border-radius:var(--d-r-sm);
  border:1px solid var(--d-line2); background:var(--d-raise); color:var(--d-ink2);
  font-size:16px; font-weight:700; transition:.16s}
.rungs button:hover{border-color:var(--d-accent); color:var(--d-accent)}
/* THE GLYPH ON THE ACCENT IS THE DARK GROUND, not white: white on #E95F23
   measures 3.0:1, which fails at this size. */
.rungs button.on{background:var(--d-accent); border-color:var(--d-accent); color:#14100E}
.ksaid{margin:8px 0 0; font-size:12.5px; color:var(--d-mute); line-height:1.7}
.ksrow.rated .ksaid{color:var(--d-ink2)}
.kcnav{display:flex; gap:10px; margin-block-start:16px}
.kcnav .mini{flex:1 1 0}
/* THE APP ALREADY HAS A DISABLED TREATMENT and it is the better one: .btn
   [disabled] goes muted-on-raised rather than translucent. At opacity .4 this
   button measured 3.53:1 at the rendered pixel — a disabled control is exempt
   under WCAG, but the app does not need the exemption to look right, and
   inventing a second convention for the same state is how two things that
   mean one thing end up looking different. */
.kcnav .mini:disabled{background:var(--d-raise); color:var(--d-mute);
  border-color:var(--d-line); cursor:not-allowed}

/* ── the matrix ───────────────────────────────────────────────────────────
   The four washes are the only colours in this file that are not tokens: a
   quadrant is a region of a chart rather than a surface, and the system has no
   token for one. They are the workshop's meanings in the app's own hues, at
   the strength a dark ground needs — on #0E1013 the 20% washes the paper
   version uses disappear. */
.plotwrap{--q-drive:rgba(233,95,35,.20); --q-research:rgba(79,168,192,.17);
  --q-known:rgba(192,145,47,.18); --q-park:rgba(154,143,135,.09);
  margin-block-start:16px}
/* CAPPED NEAR ITS OWN VIEWBOX. An SVG font-size is in user units, so how big
   the chart's text lands on screen is decided by this number and the viewBox
   together — uncapped at `inline-size:100%` a wide column blew the captions up
   and a phone column shrank them to six pixels. 460 against a 400-unit viewBox
   keeps the scale between roughly 0.88 and 1.15 everywhere. */
.plot{display:block; inline-size:100%; max-inline-size:460px; margin-inline:auto;
  block-size:auto; border-radius:var(--d-r);
  border:1px solid var(--d-line); background:var(--d-panel)}
.yax{margin:0 0 7px; font-size:12.5px; color:var(--d-mute)}
.yax b,.axlab b{color:var(--d-ink2)}
/* «تناسب بیشتر» IS THE FIRST CHILD and that is not a preference: this is a
   flex row on a right-to-left page, so the first child lands on the RIGHT —
   which is the side the chart's x axis grows towards. Written the other way
   round it names the low end on the side used for the high one. */
/* THE LEGEND IS AS WIDE AS THE CHART, not as wide as the column. With the plot
   capped and centred, a full-width legend put «تناسب بیشتر» and «تناسب کمتر»
   outside the picture whose ends they name. */
.axlab{display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-inline-size:460px; margin:9px auto 0; font-size:12.5px; color:var(--d-mute)}
.axlab span{flex:0 0 auto}
.qkey{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-block-start:16px}
.qkey div{border:1px solid var(--d-line); border-radius:var(--d-r-sm); padding:11px 13px;
  font-size:12.5px; line-height:1.8; color:var(--d-ink2)}
.qkey b{display:block; color:var(--d-ink); font-size:14px; margin-block-end:3px}
.qkey .drive{background:rgba(233,95,35,.14)}
.qkey .known{background:rgba(192,145,47,.13)}
.qkey .research{background:rgba(79,168,192,.12)}
.qkey .park{background:rgba(154,143,135,.07)}
@media (max-width:560px){ .qkey{grid-template-columns:1fr} }

.kscroll{overflow-x:auto; margin-block-start:16px; border:1px solid var(--d-line); border-radius:var(--d-r);
  background:var(--d-panel)}
.kmx{border-collapse:collapse; inline-size:100%; min-inline-size:560px}
.kmx th,.kmx td{padding:10px 10px; border-block-end:1px solid var(--d-line); vertical-align:middle}
.kmx tbody tr:last-child td{border-block-end:0}
.kmx th{background:var(--d-raise); font-size:13px; font-weight:700; color:var(--d-ink); text-align:center}
.kmx th:nth-child(2){text-align:start}
.kmx td{text-align:center; font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--d-ink2)}
.kmx td.st{text-align:start; font-size:13.5px; line-height:1.8; min-inline-size:220px}

/* ═══ ایده‌پردازی با کلمهٔ تصادفی ═══════════════════════════════════════════ */
.richips{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block-start:10px}
.richips > span{color:var(--d-mute); font-size:13px}
.richips .chip{background:var(--d-raise); color:var(--d-ink2); border:1px solid var(--d-line2); text-align:start; line-height:1.7}
.richips .chip:hover{border-color:var(--d-accent); color:var(--d-ink)}

/* the dial: de Bono's watch, sixty ticks and a seconds hand */
.ridial{display:grid; justify-items:center; margin-block-start:18px}
.ridial svg{inline-size:min(78vw,280px); block-size:auto; overflow:visible}
.ridial .tk{stroke:var(--d-line2); stroke-width:2; stroke-linecap:round}
.ridial .tk.q{stroke:var(--d-control); stroke-width:2.6}
.ridial .tk.on{stroke:var(--d-accent); stroke-width:3.4}
.ridial .num{fill:var(--d-mute); font:500 12.5px var(--y-sans)}
.ridial .face{fill:var(--d-raise); stroke:var(--d-line)}
.ridial .hand line{stroke:var(--d-accent); stroke-width:3; stroke-linecap:round}
.ridial .hand.idle line{stroke:var(--d-control)}
.ridial .hub{fill:var(--d-accent)}
/* The hand is drawn at 12 and turned; the spin is two whole turns easing into
   the drawn second. Nothing waits on it: the word below is already there. */
.ridial .hand{transform-box:view-box; transform-origin:150px 150px; transform:rotate(var(--deg,0deg))}
.ridial .hand.spin{animation:ri-spin 1.5s cubic-bezier(.16,.72,.2,1)}
@keyframes ri-spin{from{transform:rotate(calc(var(--deg,0deg) - 720deg))}}
.riword{margin-block-start:10px; text-align:center}
.riword b{display:block; font-family:var(--y-display); font-weight:400; font-size:clamp(40px,11vw,56px); line-height:1.25; color:var(--d-ink)}
.riword.wait b{color:var(--d-mute)}
.riword small{display:block; color:var(--d-mute); font-size:13px; margin-block-start:4px}
/* A BADGE MAY NEVER DEPEND ON AN ANIMATION HAVING RUN: a background tab's
   clock does not advance, so this starts at .4, never at 0 — the word is
   readable even where the animation never plays. */
.riword.late b, .rilock.late{animation:ri-pop .45s 1.3s both}
@keyframes ri-pop{from{opacity:.4; transform:scale(.94)}}
.rilock{display:flex; align-items:center; justify-content:center; gap:8px; margin:14px auto 0; max-inline-size:460px;
  background:var(--d-raise); border:1px solid var(--d-line2); border-radius:var(--d-r-sm);
  padding:10px 14px; color:var(--d-ink2); font-size:13.5px; line-height:1.8}
.rilock svg{inline-size:17px; block-size:17px; color:var(--d-accent); flex:0 0 auto}

/* the word's first associations */
.riassoc{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px}
.riassoc li{display:flex; gap:10px; align-items:flex-start; background:var(--d-raise); border-radius:12px;
  padding:10px 12px; color:var(--d-ink); font-size:14.5px; line-height:1.85}
.riassoc.sk li{min-block-size:46px; background:linear-gradient(90deg,var(--d-raise),var(--d-panel),var(--d-raise));
  background-size:200% 100%; animation:ri-sk 1.4s linear infinite}
@keyframes ri-sk{to{background-position:-200% 0}}
.riprob{margin-block-start:12px; font-size:14px; color:var(--d-ink2); line-height:1.9}
.riprob b{color:var(--d-mute); font-weight:500; margin-inline-end:6px}

/* the ideas */
.ritabs{display:flex; gap:8px; flex-wrap:wrap; margin-block-start:20px}
.ritabs button{min-block-size:42px; padding:6px 18px; border-radius:999px; border:1px solid var(--d-line2);
  color:var(--d-ink2); font-size:14.5px; transition:border-color .16s, background .16s}
.ritabs button.on{background:var(--d-accent-soft); border-color:var(--d-accent); color:var(--d-ink); font-weight:700}
.ritool{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-block-start:14px}
.ritool .ct{color:var(--d-ink2); font-size:14px}
.ricards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-block-start:12px}
@media (max-width:760px){ .ricards{grid-template-columns:minmax(0,1fr)} }
.ricard{display:flex; flex-direction:column; gap:9px; min-inline-size:0; background:var(--d-panel); border:1px solid var(--d-line);
  border-radius:var(--d-r); padding:15px 16px}
.ricard.fi{border-style:dashed; border-color:var(--d-line2); background:transparent}
.ricards.sk .ricard{min-block-size:190px; background:linear-gradient(90deg,var(--d-panel),var(--d-raise),var(--d-panel));
  background-size:200% 100%; animation:ri-sk 1.4s linear infinite}
.ricard .top{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.ritag{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  background:var(--d-raise); color:var(--d-ink2); font-size:12.5px; line-height:1.7}
.ritag.mv{background:var(--d-accent-soft); color:#F3B79A}
.ritag.k{margin-inline-start:auto}
.ricard h3{font-size:17px; line-height:1.6; color:var(--d-ink)}
.ricard .id{margin:0; color:var(--d-ink); font-size:14.5px; line-height:1.95}
.rirow{display:flex; gap:9px; align-items:flex-start; margin:0; font-size:13.5px; line-height:1.85; color:var(--d-ink2)}
.rirow > b{flex:0 0 auto; color:var(--d-mute); font-weight:500; min-inline-size:76px}
@media (max-width:460px){ .rirow{flex-direction:column; gap:2px} .rirow > b{min-inline-size:0} }
.rirate{display:flex; gap:8px; flex-wrap:wrap; margin-block-start:auto; padding-block-start:10px; border-block-start:1px solid var(--d-line)}
.rirate button{display:inline-flex; align-items:center; gap:6px; min-block-size:44px; padding:6px 14px;
  border-radius:999px; border:1px solid var(--d-line2); color:var(--d-ink2); font-size:13.5px;
  transition:border-color .16s, background .16s, color .16s}
.rirate button:hover{border-color:var(--d-accent)}
.rirate button.on{background:var(--d-accent-soft); border-color:var(--d-accent); color:var(--d-ink)}
.rirate .st{color:var(--d-mute)}
.rirate button.on .st{color:var(--d-accent)}
.riown{margin-block-start:18px}
.riown .ricard{background:var(--d-raise)}
.riown h3 .you{font-size:12.5px; font-weight:500; color:var(--d-mute); margin-inline-start:8px}
.ricon{display:grid; gap:8px; margin-block-start:12px}
.ricon div{background:var(--d-bg); border-radius:10px; padding:9px 12px; font-size:14px; color:var(--d-ink); line-height:1.85}
.ricon small{display:block; color:var(--d-mute); font-size:12.5px}
.ripits{margin:12px 0 0; padding-inline-start:20px; color:var(--d-ink2); font-size:13.5px; line-height:2}
@media (prefers-reduced-motion:reduce){
  .ridial .hand.spin, .riword.late b, .rilock.late, .riassoc.sk li, .ricards.sk .ricard{animation:none}
}