/* Handbook body — the rendered form of one tool entry.
 *
 * Lifted verbatim out of site/tools/library/index.html so the library and the
 * static entry pages under /library/<id>/ cannot drift apart: they are the same
 * content and they must read identically. The library links this file now and
 * carries no copy of its own.
 *
 * site/tools/advisor/index.html still has its own copy, and it is NOT the same
 * -- it runs tighter (16px block-start against 20px here, 14px headings against
 * 14.5px, and five more small differences). The comment in the library claimed
 * the two matched; they had already drifted. Unifying them changes the density
 * of one of the two pages, which is a design decision, not a refactor, so it is
 * left alone deliberately. If you settle that question, delete the advisor's
 * block and link this file instead.
 *
 * Every colour here is a token, so an entry inherits whichever surface it is
 * mounted on. Nothing in this file paints a ground.
 */

.hb{margin-block-start:20px;padding-block-start:18px;border-block-start:1px dashed var(--line)}
.hb h4{font-size:14.5px;color:var(--navy);margin:24px 0 8px}
.hb h4:first-child{margin-block-start:0}
.hb p{margin:0 0 9px;line-height:1.95}
.hb ul,.hb ol{margin:0;padding-inline-start:20px;line-height:1.9}
.hb li{margin-block-end:7px}
.hbsteps li b{color:var(--navy)}
.hbsteps .t{color:var(--muted);font-size:12.5px}
.hbsteps p{margin:4px 0 0}
.hbins{background:var(--cream-deep);border-inline-start:3px solid var(--teal);
 padding:11px 15px;border-radius:0 var(--r) var(--r) 0;font-size:14px}
.hbatt{margin-block-end:12px}
.hbatt .q{margin:3px 0;font-weight:700;color:var(--navy)}
.hbatt .v{margin:0;color:var(--muted);font-size:13.5px}
/* #8a5a12, a brown from the palette this site no longer uses, measured 2.97:1
   once the library went dark — and every page that loads this file is the
   library or one of its 49 entry pages, so there is no longer a light surface
   to weigh against. The accent is the label colour; the pitfalls are the half
   of an entry a team most needs to see. */
.hbpit li b{color:var(--y-accent)}
.hbsrc{margin-block-start:18px;padding-block-start:12px;border-block-start:1px solid var(--line);
 color:var(--muted);font-size:12.5px}

/* ---- chrome for a standalone entry page ----------------------------------
 * Only the generated pages use these; the library renders an entry inside its
 * own reading pane and brings its own frame. */

.lentry{max-inline-size:74ch;margin-inline:auto;padding-block:26px 60px}

.lcrumb{font-size:12.5px;color:var(--muted);margin-block-end:18px}
.lcrumb a{color:var(--muted);text-decoration:none;border-block-end:1px solid transparent}
.lcrumb a:hover,.lcrumb a:focus-visible{color:var(--navy);border-block-end-color:currentColor}
.lcrumb span[aria-current]{color:var(--ink)}

.lhead{margin-block-end:6px}
.lhead h1{font-size:clamp(24px,4.4vw,34px);line-height:1.25;margin:0}
/* The printed translation is a second real name for the tool, not a subtitle:
   teams hear one in class and read the other here, and both have to be on the
   page in words a reader (and a crawler) can see. */
.lhead .alt{display:block;margin-block-start:6px;color:var(--muted);font-size:14px}
.lhead .en{color:var(--muted);font-size:13.5px;font-style:normal}

.lmeta{display:flex;flex-wrap:wrap;gap:8px;margin-block:14px 0}
.lmeta .tag{font-size:12px;border:1px solid var(--line);border-radius:999px;
 padding:4px 12px;color:var(--muted);background:var(--paper)}
.lmeta .tag.ph{color:var(--y-on-accent,#fff);border-color:transparent}

.lsum{margin-block-start:18px;font-size:15.5px;line-height:1.9}
.lsum dt{font-weight:700;color:var(--navy);font-size:13px;margin-block-start:12px}
.lsum dd{margin:3px 0 0}
.lsum dt:first-child{margin-block-start:0}

.lrel{margin-block-start:34px;padding-block-start:16px;border-block-start:1px solid var(--line)}
.lrel h2{font-size:14.5px;color:var(--navy);margin:0 0 10px}
.lrel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lrel a{display:inline-block;font-size:13.5px;text-decoration:none;color:var(--navy);
 border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--paper)}
.lrel a:hover,.lrel a:focus-visible{border-color:var(--navy)}

.lback{display:inline-block;margin-block-start:30px;font-size:14px;color:var(--navy)}

/* ══════════════════════════════════════════════════════════════════════════
   THE ENTRY PAGE, REWORKED (Amin, 2026-09-06: «the details of each item in the
   library is not styled and not customized to their use and not easy to read.
   also not good on desktop»).

   All of it was true. Every section was a 14.5px grey label over a paragraph,
   in one narrow column, so a timed procedure, a warning list and a worked
   example were typographically the same thing -- and on a 1280px screen the
   column was a ribbon with half the viewport empty beside it.

   Each section is styled for its job now: the steps are a numbered procedure
   with the clock on each one, the pitfalls are warnings, the example is
   somebody's attempt and its verdict, and the facts sit in a rail because they
   are looked UP rather than read through.
   ══════════════════════════════════════════════════════════════════════════ */

.lentry{max-inline-size:1120px}
.lgrid{display:grid;gap:34px;align-items:start;margin-block-start:26px}
@media (min-width:1000px){
  /* minmax(0,…) on the reading track: a long unbroken Persian word would
     otherwise set its floor and push the rail off the grid. */
  .lgrid{grid-template-columns:minmax(0,1fr) 320px;gap:44px}
  .lrail{position:sticky;inset-block-start:24px}
}
.lbody{min-inline-size:0}
/* ON A PHONE THE FACTS COME FIRST. Source order puts the body first because
   that is the right order for a crawler and for the two-column layout, where
   the rail is beside it rather than after it. Stacked, that order asks
   somebody to read «why this tool» before «what it does». */
@media (max-width:999px){
  .lgrid{display:flex;flex-direction:column}
  .lrail{order:-1}
}
.lbody>.hb{margin-block-start:0;padding-block-start:0;border-block-start:0}

/* ---- the facts, as a card you look things up in ---- */
.lcard{background:var(--y-panel);border:1px solid var(--y-rule);
  border-radius:14px;padding:20px 22px}
.lcard>h2{font-size:13px;font-weight:700;color:var(--y-muted);margin:0 0 14px;
  letter-spacing:.02em}
.lcard .lsum{margin:0;font-size:14.5px;line-height:1.85}
.lcard .lsum dt{font-weight:700;color:var(--y-text);font-size:13px;
  margin-block-start:16px}
.lcard .lsum dt:first-child{margin-block-start:0}
.lcard .lsum dd{margin:5px 0 0;color:var(--y-muted)}

/* ---- section headings in the body ---- */
.hb h4{font-size:clamp(17px,2vw,20px);font-weight:700;color:var(--y-text);
  margin:38px 0 14px;padding-block-end:10px;border-block-end:1px solid var(--y-rule)}
.hb h4:first-child{margin-block-start:0}
.hb p{margin:0 0 12px;line-height:2.05;font-size:15.5px}

/* ---- the steps: a procedure, and it should look like one ----
   Numbered by CSS rather than by a marker, so the number can be a disc beside
   the step instead of a digit hanging in the margin -- and so the clock can
   sit on the same line as the heading without the two competing. */
.hbsteps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:12px}
.hbsteps li{counter-increment:st;position:relative;margin:0;
  background:var(--y-panel);border:1px solid var(--y-rule);border-radius:12px;
  padding:16px 18px 16px 18px;padding-inline-start:58px}
.hbsteps li::before{content:counter(st);position:absolute;inset-block-start:16px;
  inset-inline-start:16px;inline-size:28px;block-size:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--y-accent);color:var(--y-on-accent,#160B04);
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hbsteps li b{display:block;color:var(--y-text);font-size:15.5px;line-height:1.6}
.hbsteps .t{display:inline-block;margin-block-start:6px;color:var(--y-muted);
  font-size:12.5px;border:1px solid var(--y-rule);border-radius:999px;padding:2px 10px;
  font-variant-numeric:tabular-nums}
.hbsteps p{margin:8px 0 0;color:var(--y-muted);font-size:14.5px;line-height:1.9}

/* ---- the worked example: an attempt, and what it was worth ---- */
.hbins{font-size:15.5px;line-height:2;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--y-rule);margin-block-end:14px}
.hbatt{border-inline-start:3px solid var(--y-rule);padding-inline-start:16px;
  margin-block-end:16px}
.hbatt b{display:block;font-size:12.5px;color:var(--y-muted);font-weight:700}
.hbatt .q{margin:6px 0 0;font-weight:700;color:var(--y-text);font-size:15.5px;
  line-height:1.8}
.hbatt .v{margin:6px 0 0;color:var(--y-muted);font-size:14px;line-height:1.85}

/* ---- pitfalls: warnings, and they read as warnings ---- */
.hbpit{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hbpit li{margin:0;padding:14px 16px;border-radius:12px;font-size:14.5px;line-height:1.9;
  background:rgba(233,95,35,.07);border:1px solid rgba(233,95,35,.24)}
.hbpit li b{display:block;color:var(--y-accent);margin-block-end:4px}

.hbsrc{color:var(--y-muted);font-size:12.5px;line-height:1.9}

/* ── a barrier whose tool has not been written yet ────────────────────────
   The wall on «دیوار موانع نوآوری» lists all fifteen barriers, because the
   diagnosis is only complete at fifteen — but six of the sixteen chapters were
   never delivered, so those six say «به‌زودی» instead of linking to a 404.
   Quiet, and NOT the accent: it is a gap being admitted, not a thing to click. */
.hb .soon{font-size:.86em;color:var(--y-muted);border:1px solid var(--y-rule);
  border-radius:999px;padding:1px 8px;white-space:nowrap}