/* ==========================================================================
   BasketGo -- explainer diagrams
   Shared stylesheet for the customer-facing figures: the five install steps,
   the panel anatomy, the gate, the pipeline and the method.

   Same aesthetic contract as site.css: laboratory instrumentation, not forex
   marketing. Amber is the instrument lamp (attention / your action), cyan is
   measured data, red is a limit or an error. Nothing is filled with colour.

   Every figure is HTML+CSS, not SVG, so Arabic shapes correctly, stays
   selectable, survives translation and prints from Chrome without embedding
   a single glyph by hand. SVG appears only where a line has to be drawn.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink-900: #08090B;
  --ink-800: #0D0F13;
  --ink-700: #12151A;
  --ink-600: #181C23;
  --line:    #232932;
  --line-hi: #333B47;

  --text:    #E4E9EE;
  --dim:     #93A0AD;
  --faint:   #5C6774;

  --amber:   #FFB000;
  --amber-8: rgba(255, 176, 0, 0.08);
  --amber-2: rgba(255, 176, 0, 0.22);

  --probe:   #5FD3E4;
  --probe-8: rgba(95, 211, 228, 0.08);
  --probe-2: rgba(95, 211, 228, 0.22);

  --limit:   #E8674C;
  --limit-8: rgba(232, 103, 76, 0.08);
  --limit-2: rgba(232, 103, 76, 0.26);

  --ok:      #6FD08C;

  --sans: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --rule: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Figure shell
   -------------------------------------------------------------------------- */

.fig {
  position: relative;
  direction: rtl;
  font-family: var(--sans);
  color: var(--text);
  background: var(--ink-800);
  border: var(--rule);
  border-radius: 3px;
  padding: 30px 30px 26px;
  line-height: 1.7;
  overflow: hidden;
}

/* graph paper, barely there -- the substrate of the whole brand */
.fig::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.020) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.020) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 120% 90% at 80% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 80% 0%, #000 0%, transparent 78%);
}

.fig > * { position: relative; }

.fig-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: var(--rule);
}

.fig-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--faint);
  direction: ltr;
  unicode-bidi: isolate;
  text-transform: uppercase;
  white-space: nowrap;
}
.fig-tag b { color: var(--amber); font-weight: 600; }

.fig-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.fig-sub {
  margin: -12px 0 22px;
  color: var(--dim);
  font-size: 13.5px;
  max-width: 62ch;
}

.fig-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: var(--rule);
  color: var(--faint);
  font-size: 12px;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.k {                       /* a keyboard / menu token, e.g. Tools */
  font-family: var(--mono);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 0.88em;
  padding: 2px 7px;
  border: 1px solid var(--line-hi);
  border-radius: 3px;
  background: var(--ink-600);
  color: var(--text);
  white-space: nowrap;
}

.hot  { color: var(--amber); }
.cool { color: var(--probe); }
.bad  { color: var(--limit); }
.good { color: var(--ok);    }
.dim  { color: var(--dim);   }

/* --------------------------------------------------------------------------
   Path trail -- step 01, where the file goes
   -------------------------------------------------------------------------- */

.trail {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  direction: rtl;
}

.trail-node {
  flex: 0 0 auto;
  min-width: 118px;
  padding: 14px 16px;
  border: var(--rule);
  background: var(--ink-700);
  text-align: center;
}
.trail-node + .trail-node { border-right: 0; }

.trail-node .lvl {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
  direction: ltr;
  unicode-bidi: isolate;
  margin-bottom: 6px;
}
.trail-node .nm {
  font-family: var(--mono);
  font-size: 13px;
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--text);
  display: block;
}
.trail-node .ar { font-family: var(--sans); font-size: 11.5px; color: var(--dim); display: block; margin-top: 4px; }

.trail-node.target {
  border-color: var(--amber-2);
  background: var(--amber-8);
  box-shadow: inset 0 0 0 1px var(--amber-2);
}
.trail-node.target .nm { color: var(--amber); font-weight: 600; }

.trail-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--faint);
  font-family: var(--mono);
  padding: 0 9px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   MetaTrader dialog recreation -- step 02
   Drawn, not screenshotted: a screenshot cannot be annotated in Arabic, cannot
   be re-rendered for a new build, and goes stale the day the platform reskins.
   -------------------------------------------------------------------------- */

.mtwin {
  direction: ltr;
  max-width: 560px;
  margin-inline: auto;
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  background: var(--ink-700);
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}

.mtwin-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--ink-600);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.mtwin-bar .dots { display: flex; gap: 5px; margin-inline-start: auto; }
.mtwin-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-hi); display: block; }

.mttabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  background: var(--ink-700);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.mttabs span {
  padding: 8px 11px;
  font-size: 11px;
  color: var(--faint);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.mttabs span.on {
  color: var(--text);
  border-bottom-color: var(--amber);
  background: var(--ink-600);
}

.mtbody { padding: 16px 16px 18px; }

.mtcheck {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 12px;
}
.mtcheck .box {
  width: 15px; height: 15px;
  border: 1px solid var(--amber);
  background: var(--amber-8);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  border-radius: 2px;
  flex: 0 0 auto;
}

.mtlist {
  border: 1px solid var(--line-hi);
  background: var(--ink-900);
  border-radius: 3px;
  padding: 9px 11px;
  min-height: 74px;
}
.mtlist .row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 2px;
}
.mtlist .row.sel {
  background: var(--amber-8);
  box-shadow: inset 0 0 0 1px var(--amber-2);
}
.mtlist .row .url { color: var(--amber); font-size: 12.5px; letter-spacing: 0.01em; }
.mtlist .row .cur { color: var(--faint); }

.mtfoot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--ink-600);
}
.mtbtn {
  padding: 5px 18px;
  font-size: 11.5px;
  border: 1px solid var(--line-hi);
  border-radius: 3px;
  color: var(--dim);
  background: var(--ink-700);
}
.mtbtn.pri { color: var(--text); border-color: var(--amber-2); background: var(--amber-8); }

/* the four traps, as a verdict table */
.traps {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
  font-size: 13px;
}
.traps th {
  text-align: right;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--faint);
  font-family: var(--sans);
  padding: 0 12px 9px;
  border-bottom: var(--rule);
}
.traps th.c-url { width: 42%; }
.traps th.c-why { width: 46%; }
.traps td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(35,41,50,0.6);
  vertical-align: middle;
}
.traps tr:last-child td { border-bottom: 0; }
.traps .v { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; font-size: 12.5px; white-space: nowrap; }
.traps .x { color: var(--limit); text-decoration: line-through; text-decoration-color: var(--limit-2); }
.traps .why { color: var(--dim); font-size: 12.5px; }
.traps .mark { font-family: var(--mono); width: 1px; white-space: nowrap; padding-inline-end: 4px; }

/* --------------------------------------------------------------------------
   Inputs table -- step 03
   -------------------------------------------------------------------------- */

.inputs {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: var(--rule);
}
.inputs caption {
  caption-side: top;
  text-align: right;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--faint);
  padding-bottom: 9px;
}
.inputs tr { border-bottom: 1px solid rgba(35,41,50,0.7); }
.inputs tr:last-child { border-bottom: 0; }
.inputs tr.grp {
  background: var(--ink-600);
}
.inputs tr.grp td {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--amber);
  padding: 7px 14px;
  direction: ltr;
  unicode-bidi: isolate;
}
.inputs td { padding: 11px 14px; vertical-align: top; }
.inputs td.nm { width: 34%; color: var(--text); }
.inputs td.nm .var {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  direction: ltr;
  unicode-bidi: isolate;
  margin-top: 2px;
}
.inputs td.val {
  font-family: var(--mono);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 12.5px;
  color: var(--probe);
  width: 34%;
  word-break: break-all;
}
.inputs td.note { color: var(--dim); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Terminal log block -- what "it worked" looks like
   -------------------------------------------------------------------------- */

.logs { display: grid; gap: 12px; }
@media (min-width: 720px) { .logs { grid-template-columns: 1fr 1fr; } }

.log {
  direction: ltr;
  border: var(--rule);
  border-radius: 3px;
  background: var(--ink-900);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.85;
}
.log .hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
}
.log .hdr i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.log.ok  .hdr i { background: var(--ok);    box-shadow: 0 0 8px rgba(111,208,140,0.6); }
.log.err .hdr i { background: var(--limit); box-shadow: 0 0 8px rgba(232,103,76,0.6); }
.log .ts { color: var(--faint); }
.log .ok-t  { color: var(--ok); }
.log .err-t { color: var(--limit); }
.log .fix {
  direction: rtl;
  font-family: var(--sans);
  color: var(--dim);
  font-size: 12px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   The panel -- an honest recreation of what sits on the chart
   -------------------------------------------------------------------------- */

.fgpanel {
  direction: ltr;
  width: 320px;
  flex: 0 0 320px;
  border: 1px solid var(--line-hi);
  border-radius: 3px;
  background: rgba(6,7,9,0.94);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  overflow: hidden;
}
.fgpanel .p-title {
  padding: 7px 10px;
  color: var(--amber);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  background: rgba(255,176,0,0.05);
}
.fgpanel .p-sec {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.fgpanel .p-sec:last-child { border-bottom: 0; }
.fgpanel .p-lbl {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--faint);
  margin-bottom: 6px;
}

/* currency strength rows */
.ccy { display: flex; align-items: center; gap: 6px; padding: 2.5px 0; }
.ccy .sym { width: 30px; color: var(--text); }
.ccy .bar {
  flex: 1;
  height: 7px;
  position: relative;
  background: linear-gradient(to right, transparent 49.6%, var(--line-hi) 49.6%, var(--line-hi) 50.4%, transparent 50.4%);
}
.ccy .bar i {
  position: absolute;
  top: 0; bottom: 0;
  display: block;
  background: var(--probe);
  opacity: 0.85;
}
.ccy.n .bar i { left: 50%; }
.ccy.r .bar i { right: 50%; background: var(--limit); }
.ccy .pts { width: 46px; text-align: right; color: var(--dim); font-size: 10px; }
.ccy .go {
  width: 40px;
  text-align: center;
  font-size: 9.5px;
  padding: 1px 0;
  border-radius: 2px;
  border: 1px solid transparent;
}
.ccy .go.on   { color: var(--amber); border-color: var(--amber-2); background: var(--amber-8); }
.ccy .go.off  { color: var(--faint); }
.ccy .go.in   { color: var(--ok);    border-color: rgba(111,208,140,0.3); background: rgba(111,208,140,0.07); }

/* ---- the 28-pair basket block: the thing you actually enter ------------- */

.p28 { background: rgba(95,211,228,0.045); }
.p28 .dirrow {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; font-size: 11.5px;
}
.p28 .dirrow .lbl { width: 62px; color: var(--faint); font-size: 10px; letter-spacing: .1em; }
.p28 .dirrow .val { width: 62px; text-align: right; }
.p28 .dirrow.win .val { color: var(--probe); font-weight: 600; }
.p28 .dirrow.opp .val { color: var(--limit); }
.p28 .dirrow .tail { flex: 1; text-align: left; color: var(--faint); font-size: 9.5px; }

.p-go {
  margin-top: 8px;
  display: block;
  text-align: center;
  padding: 6px 0;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--amber);
  border: 1px solid var(--amber-2);
  background: var(--amber-8);
  border-radius: 2px;
}
.p-go.off { color: var(--faint); border-color: var(--line); background: none; }
.p-go small { display: block; font-size: 9px; letter-spacing: 0; color: var(--dim); margin-top: 2px; }

/* state headline */
.p-state {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.p-state.waiting { color: var(--faint); }
.p-state.prep    { color: var(--amber); }
.p-state.locked  { color: var(--probe); }
/* Arabic in a Latin-only mono face falls back and renders loose, so the one
   Arabic string inside the panel gets the sans face back */
.p-state small { font-size: 10px; font-weight: 400; letter-spacing: 0; color: var(--dim); font-family: var(--sans); }

.p-gauge {
  position: relative;
  height: 8px;
  margin: 9px 0 5px;
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.p-gauge > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(to right, rgba(95,211,228,0.25), var(--probe));
}
.p-gauge > b {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 1px;
  background: var(--amber);
}
.p-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--faint);
}

.p-line { display: flex; justify-content: space-between; gap: 8px; }
.p-line + .p-line { margin-top: 3px; }
.p-line span:last-child { color: var(--text); }
.p-line span:first-child { color: var(--faint); }

/* callouts beside the panel */
.fgpanel-wrap {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.fgcallouts { flex: 1 1 300px; min-width: 280px; display: grid; gap: 0; align-self: stretch; }
.fgcallout {
  display: flex;
  gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(35,41,50,0.7);
}
.fgcallout:last-child { border-bottom: 0; }
.fgcallout .idx {
  flex: 0 0 24px;
  height: 24px;
  border: 1px solid var(--amber-2);
  color: var(--amber);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--amber-8);
}
.fgcallout h4 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.fgcallout p  { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; }

/* --------------------------------------------------------------------------
   The gate -- WAITING / PREP / LOCKED as a measured scale
   -------------------------------------------------------------------------- */

.gate { margin-top: 4px; }
.gate-scale {
  position: relative;
  height: 46px;
  border: var(--rule);
  border-radius: 3px;
  background: var(--ink-700);
  overflow: hidden;
  direction: ltr;
}
.gate-scale .zone {
  position: absolute;
  top: 0; bottom: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
}
.gate-scale .z1 { left: 0;   width: 62%; color: var(--faint); background: rgba(255,255,255,0.012); }
.gate-scale .z2 { left: 62%; width: 26%; color: var(--amber); background: var(--amber-8); border-left: 1px solid var(--amber-2); }
.gate-scale .z3 { left: 88%; width: 12%; color: var(--probe); background: var(--probe-8); border-left: 1px solid var(--probe-2); }

.gate-axis {
  position: relative;
  height: 24px;
  direction: ltr;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}
.gate-axis span { position: absolute; top: 5px; transform: translateX(-50%); white-space: nowrap; }
.gate-axis span::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 1px; height: 4px;
  background: var(--line-hi);
}
/* the two edge labels must not hang off the figure */
.gate-axis span.e-start { transform: none; }
.gate-axis span.e-start::before { left: 0; }
.gate-axis span.e-end {
  transform: none; left: auto !important; right: 0;
  direction: rtl; font-family: var(--sans); font-size: 11.5px;
}
.gate-axis span.e-end::before { display: none; }

/* LTR so the three cards sit under the zone they describe */
.gate-legend { display: grid; gap: 0; margin-top: 20px; direction: ltr; }
.gate-legend .gl { direction: rtl; }
@media (min-width: 760px) { .gate-legend { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.gl {
  padding: 14px 16px;
  border: var(--rule);
}
.gate-legend .gl + .gl { border-right: 0; }
.gl .st {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
  display: block;
}
.gl.a .st { color: var(--faint); }
.gl.b .st { color: var(--amber); }
.gl.c .st { color: var(--probe); }
.gl p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.gl p strong { color: var(--text); font-weight: 500; }

/* --------------------------------------------------------------------------
   Pipeline -- the six stages
   -------------------------------------------------------------------------- */

.fgpipe { display: grid; gap: 0; }
@media (min-width: 700px)  { .fgpipe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .fgpipe { grid-template-columns: repeat(3, 1fr); } }

.fgstage {
  padding: 20px 20px 18px;
  border: var(--rule);
  margin: -0.5px;
  position: relative;
  background: var(--ink-800);
}
.fgstage .top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.fgstage .no {
  font-family: var(--mono);
  font-size: 20px;
  color: var(--line-hi);
  line-height: 1;
  direction: ltr;
}
.fgstage .tg {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--amber);
  direction: ltr;
  unicode-bidi: isolate;
}
.fgstage h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.fgstage p  { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.65; }
.fgstage .spec {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  direction: rtl;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   The method -- a day, drawn
   -------------------------------------------------------------------------- */

.method-chart { direction: ltr; width: 100%; }
.method-chart svg { display: block; width: 100%; height: auto; }

.mlegend { display: grid; gap: 0; margin-top: 20px; }
@media (min-width: 820px) { .mlegend { grid-template-columns: repeat(3, 1fr); } }
.ml { padding: 14px 16px; border: var(--rule); }
.mlegend .ml + .ml { border-right: 0; }
.ml .t {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; margin-bottom: 5px;
}
.ml .t i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: block; }
.ml p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Steps list -- the five-step method, and de-gross conditions
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: 0; counter-reset: s; }
.stp {
  display: flex;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: var(--rule);
}
.stp:last-child { border-bottom: 0; }
.stp .sn {
  flex: 0 0 34px;
  height: 34px;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dim);
  direction: ltr;
}
.stp.key .sn { border-color: var(--amber-2); color: var(--amber); background: var(--amber-8); }
.stp h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; }
.stp p  { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.7; }
.stp .tail {
  margin-top: 9px;
  padding: 9px 12px;
  border-right: 2px solid var(--amber-2);
  background: var(--amber-8);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.65;
}
.stp .tail.cold { border-right-color: var(--probe-2); background: var(--probe-8); }

/* --------------------------------------------------------------------------
   Reading -- a number carrying its own conditions. The site's signature.
   -------------------------------------------------------------------------- */

.fgreadings { display: grid; gap: 0; }
@media (min-width: 700px)  { .fgreadings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .fgreadings.four { grid-template-columns: repeat(4, 1fr); } }

.fgreading {
  padding: 18px 18px 16px;
  border: var(--rule);
  margin: -0.5px;
  background: var(--ink-800);
}
.fgreading .v {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 500;
  color: var(--probe);
  line-height: 1.1;
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
}
.fgreading.warn .v { color: var(--limit); }
.fgreading .w { font-size: 13px; color: var(--text); margin-top: 7px; display: block; line-height: 1.5; }
.fgreading .c {
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: block;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Plate -- a wide instrument photograph with a caption.
   Cropped to a band on purpose: these are atmosphere, not evidence, and a
   full-height photo would outweigh the figure it sits next to.
   -------------------------------------------------------------------------- */

.plate { margin: 0 0 22px; }
.plate img {
  width: 100%;
  height: clamp(150px, 22vw, 260px);
  object-fit: cover;
  object-position: center 55%;
  display: block;
  border: var(--rule);
  border-radius: 3px;
}
.plate figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--faint);
  line-height: 1.65;
  padding-inline-start: 13px;
  border-inline-start: 2px solid var(--amber-2);
}

/* --------------------------------------------------------------------------
   Limits / warning block -- the honesty that the whole brand rests on
   -------------------------------------------------------------------------- */

.limit-box {
  border: 1px solid var(--limit-2);
  background: var(--limit-8);
  border-radius: 3px;
  padding: 18px 20px;
}
.limit-box .lt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--limit);
  margin-bottom: 9px;
  direction: ltr;
  unicode-bidi: isolate;
}
.limit-box p { margin: 0 0 0.7em; font-size: 13px; line-height: 1.7; }
.limit-box p:last-child { margin-bottom: 0; }

/* an unresolved clause on the legal page: visible on purpose while the page is
   marked draft, so a gap can never ship disguised as settled text */
.legal-todo {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--limit-2);
  border-radius: 3px;
  background: var(--limit-8);
  color: var(--dim);
  font-size: 13px;
  line-height: 1.65;
}
.legal-todo .tag {
  display: inline-block;
  margin-inline-end: 8px;
  color: var(--limit);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.note-box {
  border: var(--rule);
  border-right: 2px solid var(--amber-2);
  background: var(--ink-700);
  padding: 15px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
}
.note-box strong { color: var(--text); font-weight: 600; }