/* =====================================================================
   60-guide — in-app documentation (views/guide.js)
   /app/tutorial (Bangla, schematic screen illustrations) and
   /app/calculations (formulas, tables, references).
   Same reading-page pattern as the public /docs guide: contents on the
   left (shared .toc.sticky, scroll-spy by ui.js [data-toc]) and the
   article on the right; when the page is narrower than ~920px the
   contents fold into the shared details.toc-m above the article.
   Shared components (03-components.css) carry the parts: .section-head,
   .alert-prose, ol.steps.bn, .link-tile, .table-plain, .contact-card,
   .show-sm, .no-print. This file keeps the page layout, the prose rhythm,
   figures, formulas, references and the illustration kit (.ill/.il-*).
   Type: page title 22 (--fs-2xl), section title 18 (--fs-xl),
   sub-heading 16 (--fs-lg), Bangla body 15 (--fs-md).
   ===================================================================== */

/* the layout follows the width of the page column (sidebar or drawer), not the window */
.guide{--g-prose:660px;--g-article:820px;--g-toc:224px;--g-gap:56px;container:guide/inline-size;font-size:var(--fs-md)}
/* calculations: no figures, so prose, formulas, tables, dividers and cards all share one 720px right edge */
.guide-calc{--g-prose:720px;--g-article:720px}

/* ---------------- header ---------------- */
.guide-head{max-width:calc(var(--g-toc) + var(--g-gap) + var(--g-article));align-items:flex-end;padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--border)}
.guide-head .eyebrow{margin:0 0 6px}
.guide-head .page-title{letter-spacing:0}
.guide-head .page-sub{max-width:64ch;margin-top:8px;font-size:var(--fs-md);line-height:1.7;color:var(--text-3)}
.guide-meta{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:var(--fs-sm);color:var(--text-4)}
.guide-meta .i{color:var(--text-4)}

/* ---------------- contents left, article right (as on /docs) ---------------- */
.guide-doc{display:grid;grid-template-columns:var(--g-toc) minmax(0,var(--g-article));gap:var(--g-gap);align-items:start}
.guide-side{align-self:stretch;min-width:0}  /* full row height, so the sticky .toc inside can travel */
.guide-main{min-width:0}
.guide-main>details.toc-m{display:none}
/* back to top, under the contents list (outside the [data-toc] list, so the scroll-spy never marks it) */
.toc .guide-top{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;padding:4px 10px 4px 14px}
.toc .guide-top .i{color:var(--text-4)}

/* ---------------- sections ---------------- */
.guide-sec{padding:40px 0 12px;border-top:1px solid var(--border)}
.guide-sec:first-child{padding-top:0;border-top:0}
/* shared .section-head: the number sits on the title's baseline; the one-line lead reads at body size */
.guide-sec>.section-head{margin:0 0 20px}
.guide-sec .section-title{align-items:baseline;gap:10px}
.guide-sec .section-sub{max-width:var(--g-prose);margin-top:6px;font-size:var(--fs-md);line-height:1.7}
.guide-num{flex:0 0 auto;min-width:1.25em;font-weight:400;color:var(--text-4);font-variant-numeric:tabular-nums}

/* ---------------- prose: only the section's own flow, so shared components keep their type ---------------- */
.guide-sec>:is(p,ul,ol,.table-plain),.guide-body .alert-prose{max-width:var(--g-prose)}
.guide-sec>p{margin:0 0 14px;font-size:var(--fs-md);line-height:1.75;color:var(--text-2)}
.guide-sec>h3{margin:28px 0 10px;font-size:var(--fs-lg);font-weight:600;line-height:1.5;color:var(--text)}
.guide-sec>ul{margin:0 0 18px;padding-left:1.25em}
.guide-sec>ul>li,.guide-sec>ol.steps>li{font-size:var(--fs-md);line-height:1.75;color:var(--text-2)}
.guide-sec>ul>li{margin:0 0 6px;padding-left:4px}
.guide-sec>ul>li::marker{color:var(--text-4)}
.guide-body strong{color:var(--text);font-weight:600}
.guide-body a:not(.btn,.link-tile,.contact-phone){text-decoration:underline;text-decoration-color:var(--primary-soft-border);text-underline-offset:.3em}
.guide-body a:not(.btn,.link-tile,.contact-phone):hover{text-decoration-color:currentColor}
.guide-body code{font-size:.84em;color:var(--text)}
.gsep{color:var(--text-4);vertical-align:-.15em;margin:0 1px}
.guide-cols{columns:2;column-gap:32px}
.guide-cols>li{break-inside:avoid}
.guide-cta{margin-top:8px}
.guide-cta .btn .i{margin:0 -2px 0 0}

/* ---------------- figures ---------------- */
.guide-fig{margin:4px 0 28px}
.guide-stage{padding:20px;border:1px solid var(--border-subtle);border-radius:var(--r-xl);background:var(--bg-sunken)}
.guide-stage>svg{display:block;width:100%;height:auto;overflow:visible}
.guide-fig figcaption{margin:12px 2px 0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-3)}
.guide-fig .fig-no{margin-right:10px;font-weight:500;color:var(--text-2);white-space:nowrap}
.guide-fig .fig-hint{align-items:center;gap:6px;margin-top:4px;color:var(--text-4)}  /* phones only (.show-sm.flex) */
.guide-fig .fig-hint .i{color:var(--text-4)}

/* ---------------- help links (shared .link-tile) ---------------- */
.guide-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:var(--g-prose);margin:0 0 20px}

/* ---------------- calculations: formula card ---------------- */
.guide .fx,.guide .fx span{font-family:var(--font-mono)}
.fx{max-width:var(--g-prose);margin:12px 0 18px;padding:14px 18px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-base);line-height:1.85;color:var(--text-2);white-space:pre;overflow-x:auto;tab-size:4;font-variant-numeric:tabular-nums;letter-spacing:0}
.fx-v{color:var(--text);font-weight:600}
.fx-op{color:var(--text-4)}
.fx-n{color:var(--text-2)}
.guide .fx .fx-c{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;color:var(--text-3)}
/* a note under the formula: new line + 6px, instead of a full empty line */
.guide .fx .fx-note{display:inline-block;margin-top:6px}

/* ---------------- calculations: tables (shared .table-plain) + column kinds set by tbl() ---------------- */
.guide-body .table-plain td:first-child{color:var(--text);white-space:nowrap}
.guide-body .table-plain :is(th,td):is(.num,.rng,.key){white-space:nowrap;font-variant-numeric:tabular-nums}
.guide-body .table-plain td.num{color:var(--text)}
.guide-body .table-plain .u{margin-left:4px;font-size:var(--fs-sm);color:var(--text-3)}
/* decimal alignment: the fraction lives in a fixed slot, so the points line up in a right-aligned column */
.guide-body .table-plain .dec-f{display:inline-block;min-width:2.1em;text-align:left}
/* two-column label / value tables stay compact so the value sits close to its label */
.guide-body .guide-tbl-kv{max-width:420px}
/* numeric key column on the left (PAL): narrow, right-aligned, then the description */
.guide-tbl-lead :is(th,td):first-child{width:7.5em;padding-right:24px}

/* ---------------- references ---------------- */
.guide-body .grefs{list-style:none;margin:14px 0 22px;padding:0;border-top:1px solid var(--border)}
.guide-body .grefs>li{display:grid;grid-template-columns:2.25em minmax(0,1fr);gap:10px;margin:0;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.grefs-n{font-size:var(--fs-sm);font-weight:500;color:var(--text-4);font-variant-numeric:tabular-nums;line-height:1.7}
.grefs-n::before{content:"["}.grefs-n::after{content:"]"}
.grefs-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.grefs-title{font-size:var(--fs-md);line-height:1.6;color:var(--text)}
.grefs-meta{font-size:var(--fs-sm);line-height:1.6;color:var(--text-3)}
.grefs-meta a{color:var(--text-2)}
/* the entry a citation jumped to: soft tint that bleeds 10px past the text, without shifting the hairlines */
.grefs>li:target{background:var(--primary-soft);box-shadow:-10px 0 0 var(--primary-soft),10px 0 0 var(--primary-soft)}
.grefs>li:target .grefs-n{color:var(--primary-text)}
/* un-numbered foundations list (section ১): one column, citation marker links into the numbered list */
.guide-body .grefs-plain>li{grid-template-columns:minmax(0,1fr)}
.guide-body a.gcite{margin-left:2px;font-size:var(--fs-sm);font-weight:500;color:var(--link);font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
.guide-body a.gcite:hover{text-decoration:underline;text-decoration-color:currentColor}

/* ---------------- closing contact (shared .contact-card): as on /docs, the number on the left and the call button on the right ---------------- */
.guide-call{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}

/* =====================================================================
   Illustration kit (inline SVG). One unit ≈ 1px at desktop width.
   ===================================================================== */
.ill .il-t{font-family:var(--font-sans);font-size:11.5px;font-weight:400;fill:var(--text);letter-spacing:0}
.ill .il-t.il-mono{font-family:var(--font-mono)}
.ill .il-s8{font-size:9px}.ill .il-s9{font-size:9.5px}.ill .il-s10{font-size:10px}.ill .il-s105{font-size:10.5px}.ill .il-s11{font-size:11px}
.ill .il-s12{font-size:12px}.ill .il-s125{font-size:12.5px}.ill .il-s13{font-size:13px}.ill .il-s15{font-size:15px}
.ill .il-s18{font-size:18px}.ill .il-s20{font-size:20px}
.ill .il-w5{font-weight:500}.ill .il-w6{font-weight:600}
.ill .il-tn{font-variant-numeric:tabular-nums}
.ill .il-c2{fill:var(--text-2)}.ill .il-c3{fill:var(--text-3)}.ill .il-c4{fill:var(--text-4)}
.ill .il-con{fill:var(--on-primary)}.ill .il-cp{fill:var(--primary-text)}.ill .il-clink{fill:var(--link)}.ill .il-cbg{fill:var(--bg)}
.ill .il-cok{fill:var(--ok-tx)}.ill .il-cwarn{fill:var(--warn-tx)}.ill .il-chigh{fill:var(--high-tx)}.ill .il-cacc{fill:var(--accent-strong)}
/* fills */
.ill .il-f-bg{fill:var(--bg)}.ill .il-f-sunken{fill:var(--bg-sunken)}.ill .il-f-card{fill:var(--surface)}
.ill .il-f-2{fill:var(--surface-2)}.ill .il-f-3{fill:var(--surface-3)}.ill .il-f-none{fill:none}
.ill .il-f-pri{fill:var(--primary)}.ill .il-f-psoft{fill:var(--primary-soft)}.ill .il-f-psoft2{fill:var(--primary-soft-2)}
.ill .il-f-ink{fill:var(--text)}.ill .il-f-onink{fill:var(--bg);fill-opacity:.18}
.ill .il-f-ok{fill:var(--ok-bg)}.ill .il-f-warn{fill:var(--warn-bg)}.ill .il-f-high{fill:var(--high-bg)}.ill .il-f-acc{fill:var(--accent-soft)}
.ill .il-f-okdot{fill:var(--ok-sig)}.ill .il-f-bar{fill:var(--chart-bar)}
.ill .il-f-mp{fill:var(--mac-protein)}.ill .il-f-mc{fill:var(--mac-carb)}.ill .il-f-mf{fill:var(--mac-fat)}.ill .il-f-mfb{fill:var(--mac-fiber)}
.ill .il-f-logo-arc{fill:var(--logo-arc)}.ill .il-f-logo-l{fill:var(--logo-leaf-l)}.ill .il-f-logo-r{fill:var(--logo-leaf-r)}.ill .il-f-logo-h{fill:var(--logo-heart)}
/* hairlines stay 1px at any scale */
.ill .il-b,.ill .il-b-sub,.ill .il-b-in,.ill .il-b-psoft,.ill .il-b-pri,.ill .il-b-ok,.ill .il-b-warn,.ill .il-b-high,.ill .il-b-acc,.ill .il-b-grid{stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
.ill .il-b{stroke:var(--border)}.ill .il-b-sub{stroke:var(--border-subtle)}.ill .il-b-in{stroke:var(--border-input)}
.ill .il-b-psoft{stroke:var(--primary-soft-border)}.ill .il-b-pri{stroke:var(--primary-active)}
.ill .il-b-ok{stroke:var(--ok-bd)}.ill .il-b-warn{stroke:var(--warn-bd)}.ill .il-b-high{stroke:var(--high-bd)}.ill .il-b-acc{stroke:var(--accent-soft-border)}
.ill .il-b-grid{stroke:var(--chart-grid)}
/* icons (nested Lucide svgs use currentColor) */
.ill .il-ic{color:var(--text-3)}
.ill .il-ic.il-i2{color:var(--text-2)}.ill .il-ic.il-i3{color:var(--text-3)}.ill .il-ic.il-i4{color:var(--text-4)}
.ill .il-ic.il-ion{color:var(--on-primary)}.ill .il-ic.il-ipri{color:var(--primary)}.ill .il-ic.il-ip{color:var(--primary-text)}
.ill .il-ic.il-iok{color:var(--ok-tx)}.ill .il-ic.il-iwarn{color:var(--warn-tx)}.ill .il-ic.il-ihigh{color:var(--high-tx)}.ill .il-ic.il-iacc{color:var(--accent-strong)}

/* ---------------- responsive ---------------- */
/* page column under ~920px (sidebar + window below 1240px, tablets, phones): one column, the contents fold into details.toc-m */
@container guide (max-width:919.98px){
  .guide-head{max-width:var(--g-article)}
  .guide-doc{grid-template-columns:minmax(0,1fr);gap:0;max-width:var(--g-article)}
  .guide-side{display:none}
  .guide-main>details.toc-m{display:block}
}
@media (max-width:640px){
  .guide-head{padding-bottom:20px;margin-bottom:24px}
  .guide-head .page-actions{width:100%}
  .guide-sec{padding-top:32px}

  /* figures keep a legible scale (0.8x: 11px labels render at ~9px) and scroll sideways in their own box */
  .guide-stage{padding:8px;border-radius:var(--r-lg);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .guide-stage>svg{width:640px;max-width:none}

  .guide-cols{columns:1}
  .guide-tiles{grid-template-columns:minmax(0,1fr)}
  .fx{padding:12px 14px;font-size:var(--fs-xs);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
  /* denser cells so the three-column tables fit a phone */
  .guide-body .table-plain th{padding:8px 12px}
  .guide-body .table-plain td{padding:9px 12px}
  .guide-tbl-lead :is(th,td):first-child{width:auto;padding-right:16px}
  .guide-call .btn{width:100%}  /* full-width call button, like /docs */
}
@media (prefers-reduced-motion:no-preference){html:has(.guide){scroll-behavior:smooth}}
/* contents, page actions, the call button and the scroll hint carry .no-print */
@media print{
  .guide-doc{display:block}
  .guide-stage{background:none;border:0;padding:0}
  .guide-sec,.guide-fig,.fx,.guide-body .table-plain{break-inside:avoid}
}