/* Raznameh Clinics — journey and role blueprints
 * Diagram components shared by journeys.html and the four view-*.html pages.
 * Loaded after guides.css and architecture.css, and built only from their
 * tokens: the page rhythm (.ov-section, .ov-head), the cards (.tile, .kpi)
 * and the tables come from there, and everything below is the drawing.
 *
 * Every diagram is HTML and CSS rather than an image, so it reflows, stays
 * selectable and searchable, and can be corrected by editing a line of text.
 * The wide ones scroll inside their own box; the page itself never does.
 *
 * Each page sets --role on <body>. That single value drives the rules,
 * the numbers, the lane headers and the section markers, so a page is
 * recoloured by changing one declaration.
 */

body { --role: var(--color-brand-500); --role-soft: var(--color-brand-50); --role-line: var(--color-brand-200); --role-deep: var(--color-brand-800); }
body.role-client     { --role: var(--color-accent-500);  --role-soft: var(--color-accent-50);  --role-line: var(--color-accent-200);  --role-deep: var(--color-accent-800); }
body.role-expert     { --role: var(--color-magenta-500); --role-soft: #f8e9f7;                 --role-line: #e6bfe4;                  --role-deep: var(--color-magenta-600); }
body.role-admin      { --role: var(--color-brand-500);   --role-soft: var(--color-brand-50);   --role-line: var(--color-brand-200);   --role-deep: var(--color-brand-800); }
body.role-accountant { --role: var(--color-brand-800);   --role-soft: #eef2f8;                 --role-line: #c6d3e6;                  --role-deep: var(--color-brand-900); }
body.role-security   { --role: var(--color-brand-700);   --role-soft: var(--color-brand-50);   --role-line: var(--color-brand-200);   --role-deep: var(--color-brand-900); }

.ov-num { color: var(--role); }

/* ------------------------------------------------------------------ hero */
/* The role pages open on the dark band the guide hero uses, so they read as
   part of the same site rather than as a slide deck someone pasted in. */
.bp-head { background: var(--color-dark-800); color: #fff; padding-block: clamp(var(--space-12), 6vw, var(--space-20)); position: relative; overflow: hidden; }
.bp-head::after { content: ''; position: absolute; inset: auto 0 0; height: 4px; background: var(--gradient-brand); }
.bp-head .crumbs, .bp-head .crumbs a { color: rgba(255,255,255,.62); }
.bp-head .crumbs a:hover { color: var(--color-accent-300); }
.bp-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: var(--tracking-tighter); max-width: 20ch; }
.bp-head .lede { color: rgba(255,255,255,.78); font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 60ch; margin: var(--space-5) 0 0; }
.bp-head .eyebrow { color: var(--color-accent-300); }

/* who the page is for, stated before anything else */
.whofor { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.whofor span {
  font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.86);
}

/* ------------------------------------------------------------- swimlanes */
/* Rows are people, columns are phases. Wide by nature, so it scrolls in its
   own box; the sticky first column keeps the actor visible while it does. */
.lanes-wrap { overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; }
.lanes { min-width: 940px; display: grid; grid-template-columns: 132px repeat(var(--phases, 6), minmax(140px, 1fr)); }
.lane-phase {
  padding: var(--space-4) var(--space-3); text-align: center; background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-border-strong); border-left: 1px solid var(--color-border-default);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-text-secondary);
}
.lane-phase.corner { background: #fff; border-left: 0; }
.lane-actor {
  position: sticky; left: 0; z-index: 2; background: #fff;
  padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border-default);
  border-right: 1px solid var(--color-border-strong);
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
}
.lane-actor b { font-size: var(--text-sm); font-weight: 700; }
.lane-actor em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.lane-actor::before { content: ''; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--lane-accent, var(--color-neutral-300)); margin-bottom: var(--space-2); }
.lane-client { --lane-accent: var(--color-accent-500); }
.lane-expert { --lane-accent: var(--color-magenta-500); }
.lane-staff  { --lane-accent: var(--color-brand-500); }
.lane-system { --lane-accent: var(--color-neutral-400); }

.cell { padding: var(--space-3); border-bottom: 1px solid var(--color-border-default); border-left: 1px solid var(--color-border-default); display: grid; align-content: start; gap: var(--space-2); }
.act {
  border: 1px solid var(--color-border-default); border-left: 3px solid var(--lane-accent, var(--color-neutral-300));
  border-radius: var(--radius-md); background: var(--color-neutral-50);
  padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: var(--leading-snug);
}
.act b { display: block; font-weight: 700; color: var(--color-text-primary); }
.act span { color: var(--color-text-secondary); }
.act.is-auto { background: #fff; border-style: dashed; }
.act.is-key { background: var(--role-soft); border-color: var(--role); }
.cell.is-empty { background: repeating-linear-gradient(45deg, transparent, transparent 7px, var(--color-neutral-50) 7px, var(--color-neutral-50) 14px); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-secondary); }
.legend i { font-style: normal; display: inline-flex; align-items: center; gap: var(--space-2); }
.legend i::before { content: ''; width: 16px; height: 10px; border-radius: 3px; border: 1px solid var(--color-border-strong); background: var(--color-neutral-50); }
.legend i.k-auto::before { background: #fff; border-style: dashed; }
.legend i.k-key::before { background: var(--role-soft); border-color: var(--role); }
.legend i.k-none::before { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--color-neutral-100) 4px, var(--color-neutral-100) 8px); }

/* ---------------------------------------------------------------- ribbon */
/* One chain of phases, read left to right, wrapping on a narrow screen. */
.ribbon { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.rib {
  flex: 1 1 130px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
  background: #fff; padding: var(--space-4); position: relative; min-width: 130px;
}
.rib::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--role); opacity: .35; }
.rib.is-now::before { opacity: 1; height: 4px; }
.rib b { display: block; font-size: var(--text-sm); font-weight: 700; margin-top: var(--space-2); }
.rib span { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 4px; line-height: var(--leading-snug); }
.rib em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--role); font-weight: 700; }

/* -------------------------------------------------------------- the fork */
/* Online and on the premises, drawn as two columns off one shared spine. */
.fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.fork-col { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; overflow: hidden; }
.fork-top { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border-default); background: var(--color-neutral-50); }
.fork-top h4 { font-size: var(--text-lg); font-weight: 700; }
.fork-top p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.fork-col.is-online .fork-top, .fork-col.is-warm .fork-top { background: var(--color-accent-50); }
.fork-col.is-onsite .fork-top, .fork-col.is-cool .fork-top { background: var(--color-brand-50); }
.fork-steps { list-style: none; margin: 0; padding: var(--space-5) var(--space-6); display: grid; gap: 0; counter-reset: forkstep; }
.fork-steps li { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-4); padding-bottom: var(--space-5); position: relative; }
.fork-steps li:last-child { padding-bottom: 0; }
.fork-steps li::before {
  counter-increment: forkstep; content: counter(forkstep);
  width: 26px; height: 26px; border-radius: var(--radius-full); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  background: var(--color-neutral-100); color: var(--color-text-secondary);
}
.fork-steps li::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: 8px; width: 1px; background: var(--color-border-strong); }
.fork-steps li:last-child::after { display: none; }
.fork-steps li.is-diff::before { background: var(--gradient-cta); color: #fff; }
.fork-steps b, .fork-steps span { grid-column: 2; }
.fork-steps b { display: block; font-size: var(--text-sm); font-weight: 700; }
.fork-steps span { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); margin-top: 2px; }

/* ---------------------------------------------------------- screen frames */
/* A wireframe of what the role opens, drawn rather than screenshotted so it
   stays true when a screen is restyled and needs no image pipeline. */
.screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.frame { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-5); }
.frame > h4 { font-size: var(--text-base); font-weight: 700; }
.frame > p { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.wf { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-50); }
.wf-bar { display: flex; align-items: center; gap: 5px; padding: var(--space-2) var(--space-3); background: var(--color-neutral-100); border-bottom: 1px solid var(--color-border-default); }
.wf-bar i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-neutral-300); }
.wf-bar small { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--color-text-muted); }
.wf-body { padding: var(--space-3); display: grid; gap: var(--space-2); }
.wf-row { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.wf-row::before { content: ''; width: 5px; height: 5px; border-radius: 1px; background: var(--role); flex: none; }
.wf-block { border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border-default); padding: var(--space-2) var(--space-3); font-size: 11px; }
.wf-block b { display: block; font-family: var(--font-display); font-size: var(--text-sm); color: var(--role-deep); }
.wf-block span { color: var(--color-text-muted); }
/* Grid items default to min-width:auto and so refuse to shrink below their
   longest word, which pushes the wireframe wider than the frame that clips it.
   Longer languages hit this first, but it was always latent. */
.wf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--space-2); }
.wf-grid > * { min-width: 0; }
.wf-block { min-width: 0; overflow-wrap: anywhere; }
.wf-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--role-soft); color: var(--role-deep); }

/* -------------------------------------------------------- control levers */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-4); }
.ctrl { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-5); display: grid; gap: var(--space-3); }
.ctrl-top { display: flex; align-items: center; gap: var(--space-3); }
.ctrl-dot { width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--role-soft); border: 1px solid var(--role-line); display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--role-deep); }
.ctrl-top b { font-size: var(--text-sm); font-weight: 700; }
.ctrl > p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); }
.ctrl-eff { border-top: 1px dashed var(--color-border-strong); padding-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.ctrl-eff b { color: var(--role-deep); font-weight: 700; display: block; text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: 10px; margin-bottom: 2px; }

/* -------------------------------------------------------- before / after */
.baw { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); overflow: hidden; background: #fff; }
.baw-head, .baw-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; }
.baw-head > div { padding: var(--space-3) var(--space-5); background: var(--color-neutral-50); border-bottom: 1px solid var(--color-border-strong); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-text-secondary); }
.baw-row > div { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-default); font-size: var(--text-sm); line-height: var(--leading-snug); }
.baw-row:last-child > div { border-bottom: 0; }
.baw-row .b-task { font-weight: 600; }
.baw-row .b-was { color: var(--color-text-secondary); background: var(--color-neutral-50); }
.baw-row .b-now { color: var(--role-deep); background: var(--role-soft); }
.baw-row .b-now b { font-weight: 700; }

/* ------------------------------------------------------------ money leaks */
.leaks { display: grid; gap: var(--space-3); }
.leak { display: grid; grid-template-columns: 190px 1fr; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.leak-where { padding: var(--space-4) var(--space-5); background: var(--color-neutral-50); border-right: 1px solid var(--color-border-default); }
.leak-where b { display: block; font-size: var(--text-sm); font-weight: 700; }
.leak-where span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.leak-fix { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); }
.leak-fix b { color: var(--role-deep); }
.leak-fix code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-brand-700); }

/* ------------------------------------------------------- satisfaction bars */
.sat { display: grid; gap: var(--space-4); }
.satrow { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-5); align-items: start; }
.satrow > b { font-size: var(--text-sm); font-weight: 700; }
.satrow > b small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
/* The meter carries the weight and the sentence carries the meaning, so the
   caption sits under the bar rather than on top of a saturated gradient. */
.satbar { position: relative; padding-top: 10px; }
.satbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; border-radius: var(--radius-full); background: var(--color-neutral-100); }
.satbar i { position: absolute; top: 0; left: 0; height: 10px; width: var(--w, 60%); border-radius: var(--radius-full); background: var(--gradient-cta); }
.satbar span { display: block; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); }

/* ----------------------------------------------------------- design notes */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); counter-reset: princ; }
.princ { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-6); position: relative; }
.princ::before { counter-increment: princ; content: counter(princ, decimal-leading-zero); position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--color-neutral-100); }
.princ h4 { font-size: var(--text-base); font-weight: 700; padding-right: var(--space-10); }
.princ p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); }
.princ p + p { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border-strong); color: var(--role-deep); }

/* ------------------------------------------------------------- day clock */
.clock { display: grid; gap: 0; border-left: 2px solid var(--color-border-strong); margin-left: var(--space-4); }
.tick { position: relative; padding: 0 0 var(--space-6) var(--space-8); }
.tick:last-child { padding-bottom: 0; }
.tick::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: var(--radius-full); background: #fff; border: 2px solid var(--role); }
.tick time { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--role); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.tick b { display: block; font-size: var(--text-base); font-weight: 700; margin: 2px 0 var(--space-1); }
.tick p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); max-width: 68ch; }

/* --------------------------------------------------------------- pill nav */
.bp-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.bp-jump a { font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.86); }
.bp-jump a:hover { border-color: var(--color-accent-400); color: var(--color-accent-300); }

/* ------------------------------------------------------------ cross links */
.crossnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.cross { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-5); display: block; color: inherit; transition: transform var(--transition-fast), box-shadow var(--transition-normal), border-color var(--transition-fast); }
.cross:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--role); color: inherit; }
.cross em { font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); }
.cross b { display: block; font-size: var(--text-base); font-weight: 700; margin: var(--space-2) 0 var(--space-1); }
.cross span { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-snug); }
.cross.is-here { border-color: var(--role); background: var(--role-soft); }

/* --------------------------------------------------- jurisdiction matrix */
/* A tick table needs the tick to read at a glance and the caveat to read on
   inspection, so the mark carries a label for screen readers and a title. */
.jur { font-variant-numeric: tabular-nums; }
.jur td b { font-weight: 700; color: var(--color-text-primary); }
/* Four states, and they mean four different things. "Partly built" and
   "you set this per deployment" were one mark for a while, which read as one
   kind of shortfall when only the first of them is a shortfall at all. */
.mark-yes, .mark-part, .mark-cfg, .mark-law, .mark-no {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 700; line-height: 1;
}
.mark-yes  { background: var(--color-accent-100); color: var(--color-accent-800); }
/* partly built — something is genuinely missing, and the row names it */
.mark-part { background: var(--color-brand-100);  color: var(--color-brand-800); }
/* built, and the value is yours to set. Not a gap. */
.mark-cfg  { background: #fdf0da; color: #8a5300; }
/* nothing missing: that regime's law asks for something narrower, or nothing */
.mark-law  { background: #f8e9f7; color: var(--color-magenta-600); }
.mark-no   { background: var(--color-neutral-100); color: var(--color-text-muted); }

/* the legend under a table that uses them */
.markkey { margin-top: var(--space-4); display: grid;
           grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3) var(--space-6);
           font-size: var(--text-sm); color: var(--color-text-secondary); }
.markkey > span { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3);
                  align-items: start; }
.markkey b { color: var(--color-text-primary); font-weight: 700; }
.markkey i { font-style: normal; display: block; color: var(--color-text-muted); }

/* ----------------------------------------------------------- scope notice */
/* The limits of what software can do belong on the page, not in a footnote. */
.scope {
  border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-brand-500);
  border-radius: var(--radius-xl); background: var(--color-neutral-50); padding: var(--space-6);
}
.scope h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-3); }
.scope p { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.scope li { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); padding-left: var(--space-6); position: relative; }
.scope li::before { content: '—'; position: absolute; left: 0; color: var(--color-text-muted); }
.scope li b { color: var(--color-text-primary); }

/* ------------------------------------------------------- module catalogue */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* The search bar follows the reader down a long list, so it sits under the
   76px nav rather than scrolling away with the hero. */
.modtools {
  position: sticky; top: 76px; z-index: 30;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-default);
}
.modtools-inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; }
.modsearch-wrap { flex: 1 1 260px; display: block; }
.modsearch {
  width: 100%; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong); background: #fff;
  padding-inline: var(--space-5); font: inherit; font-size: var(--text-sm); color: var(--color-text-primary);
}
.modsearch:focus { outline: 2px solid var(--color-accent-400); outline-offset: 1px; border-color: var(--color-accent-500); }
.modcount { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

.mgroup + .mgroup { border-top: 1px solid var(--color-border-default); }
.mgroup:nth-of-type(even) { background: var(--color-bg-subtle); }
.mgroup .ov-num { color: var(--color-accent-600); }

.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--space-5); }
.mcard {
  border: 1px solid var(--color-border-default); border-radius: var(--radius-xl);
  background: #fff; padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start;
  position: relative; overflow: hidden;
}
.mcard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gradient-cta); opacity: .5; }
.mcard-top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.mcard h3 { font-size: var(--text-lg); font-weight: 700; }
.mcard code {
  font-family: var(--font-mono); font-size: 11px; color: var(--color-brand-700);
  background: var(--color-brand-50); border-radius: var(--radius-full); padding: 2px var(--space-3);
}
.mcard > p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.mfeat {
  list-style: none; margin: 0; padding: var(--space-4) 0 0; display: grid; gap: var(--space-2);
  border-top: 1px dashed var(--color-border-strong);
}
.mfeat li { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); padding-left: var(--space-5); position: relative; }
.mfeat li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent-400); }

/* Licence: free to run, or part of what we build and a clinic pays for. */
.mtags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mtag {
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase;
  padding: 3px var(--space-3); border-radius: var(--radius-full); border: 1px solid transparent;
  white-space: nowrap;
}
.mtag.is-free { background: var(--color-accent-50); color: var(--color-accent-800); border-color: var(--color-accent-200); }
.mtag.is-dev  { background: var(--color-brand-50); color: var(--color-brand-700); border-color: var(--color-brand-200); }
.mtag.is-paid { background: var(--gradient-cta); color: #fff; }

/* Tags above, sentence below. A two-column version looked tidier in English
   and fell apart in Turkish, where "Özelleştirildi ve geliştirildi" is twice
   the width — so the layout does not depend on how long a label happens to be. */
.licence-key { display: grid; gap: var(--space-5); margin-top: var(--space-8); max-width: 82ch; }
.licence-key > div { display: grid; gap: var(--space-2); }
.lk-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lk-text { font-size: var(--text-sm); color: rgba(255,255,255,.74); line-height: var(--leading-snug); }

/* Which applications in the deployment's Apps list a card accounts for. */
.mcovers { margin: 0; padding-top: var(--space-3); border-top: 1px dashed var(--color-border-strong); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mcovers span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.mcovers b {
  font-weight: 600; font-size: 11px; color: var(--color-neutral-700);
  background: var(--color-neutral-100); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full); padding: 2px var(--space-3);
}

/* The jump chips on this page carry a count, so they need a little more room. */
.bp-jump b { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent-300); margin-left: var(--space-1); }

/* These pages carry no language strip, so the mobile menu opens under the
   76px bar rather than the 112px the guide pages leave room for. */
@media (max-width: 1040px) {
  .nav-links { top: 76px; }
}

@media (max-width: 720px) {
  .leak { grid-template-columns: 1fr; }
  .leak-where { border-right: 0; border-bottom: 1px solid var(--color-border-default); }
  .satrow { grid-template-columns: 1fr; gap: var(--space-2); }
  .baw-head { display: none; }
  .baw-row { grid-template-columns: 1fr; }
  .baw-row > div { border-bottom: 0; }
  .baw-row { border-bottom: 1px solid var(--color-border-strong); }
  .baw-row .b-was::before { content: 'Before — '; font-weight: 700; color: var(--color-text-muted); }
  .baw-row .b-now::before { content: 'Now — '; font-weight: 700; }
}

/* ---------------------------------------------------------------------------
   Jurisdiction pages (usa.html, gdpr-eu.html, gdpr-uk.html, germany.html,
   australia.html, canada.html)
   --------------------------------------------------------------------------- */
body.role-us { --role: var(--color-brand-600);   --role-soft: var(--color-brand-50);   --role-line: var(--color-brand-200);   --role-deep: var(--color-brand-900); }
body.role-eu { --role: var(--color-accent-600);  --role-soft: var(--color-accent-50);  --role-line: var(--color-accent-200);  --role-deep: var(--color-accent-800); }
body.role-uk { --role: var(--color-magenta-500); --role-soft: #f8e9f7;                 --role-line: #e6bfe4;                  --role-deep: var(--color-magenta-600); }
body.role-de { --role: var(--color-brand-800);   --role-soft: #eef2f8;                 --role-line: #c6d3e6;                  --role-deep: var(--color-brand-900); }
body.role-au { --role: var(--color-accent-700);  --role-soft: #e6f6ef;                 --role-line: #a8dcc6;                  --role-deep: var(--color-accent-900); }
body.role-ca { --role: #b0142e;                  --role-soft: #fceef0;                 --role-line: #eec3cb;                  --role-deep: #7d0d20; }

/* requirement → status → where tables */
.req { font-variant-numeric: tabular-nums; }
.req th:first-child, .req td:first-child { width: 30%; }
.req th:nth-child(2), .req td:nth-child(2) { width: 96px; text-align: center; white-space: nowrap; }
.req td:first-child b { font-weight: 700; color: var(--color-text-primary); }
.req td cite { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); display: block; margin-top: 2px; }
.req td code { font-size: 11px; }

/* legend under a requirement table */
.reqkey { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-4);
          font-size: var(--text-sm); color: var(--color-text-muted); align-items: center; }
.reqkey span { display: inline-flex; align-items: center; gap: var(--space-2); }

/* "not built yet" variant of the scope block */
.scope.is-gap { border-left-color: var(--color-magenta-500); background: #fdf7fd; }
.scope.is-gap li::before { content: '○'; font-size: 11px; top: 2px; }

/* jurisdiction chooser on the security page */
/* .jpick moved to guides.css: the landing page loads only that stylesheet,
   and the country picker now appears there too. */

/* ---------------------------------------------------------------------------
   Step-by-step flows (usa.html) — what happens inside the software, in order,
   written for somebody who will never open the code.
   --------------------------------------------------------------------------- */
.stepflows { display: grid; gap: var(--space-8); }

.stepflow { border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl);
        background: var(--color-surface); overflow: hidden; }
.stepflow-top { padding: var(--space-5) var(--space-6);
            background: var(--role-soft); border-bottom: 1px solid var(--role-line); }
.stepflow-top > em { font-style: normal; display: block; font-family: var(--font-mono); font-size: 11px;
               text-transform: uppercase; letter-spacing: var(--tracking-widest);
               color: var(--color-text-muted); margin-bottom: var(--space-1); }
.stepflow-top b { display: block; font-family: var(--font-display); font-size: var(--text-lg);
              color: var(--role-deep); line-height: var(--leading-snug); }
.stepflow-top span { display: block; margin-top: var(--space-2); font-size: var(--text-sm);
                 color: var(--color-text-secondary); line-height: var(--leading-relaxed); }

.stepflow ol { list-style: none; margin: 0; padding: var(--space-6); display: grid;
           gap: var(--space-5); counter-reset: flowstep; }
.stepflow li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-4);
           position: relative; }
.stepflow li::before { counter-increment: flowstep; content: counter(flowstep);
                   grid-column: 1; width: 30px; height: 30px; border-radius: var(--radius-full);
                   display: grid; place-items: center; font-family: var(--font-mono);
                   font-size: var(--text-xs); font-weight: 700;
                   background: var(--role-soft); border: 1px solid var(--role-line);
                   color: var(--role-deep); }
/* the connector between steps */
.stepflow li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 34px;
                                   bottom: calc(var(--space-5) * -1 + 4px); width: 1px;
                                   background: var(--color-border-strong); }
.stepflow li b, .stepflow li p { grid-column: 2; }
.stepflow li b { font-size: var(--text-sm); color: var(--color-text-primary); align-self: center; }
.stepflow li p { margin: var(--space-2) 0 0; font-size: var(--text-sm);
             color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.stepflow li cite { grid-column: 2; font-style: normal; display: block; margin-top: var(--space-2);
                font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }

/* a step where the software refuses something */
.stepflow li.is-stop::before { background: #fdecec; border-color: #f0b8b8; color: #a02020; content: '✕'; }
.stepflow li.is-stop b { color: #a02020; }
/* a step that is a decision the person makes, not the software */
.stepflow li.is-human::before { background: var(--color-neutral-100); border-color: var(--color-border-strong);
                            color: var(--color-text-muted); }

.stepflow-foot { padding: var(--space-5) var(--space-6); border-top: 1px dashed var(--color-border-strong);
             background: var(--color-neutral-50); font-size: var(--text-sm);
             color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.stepflow-foot b { color: var(--color-text-primary); }

/* legend above the flows */
.stepflowkey { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center;
           margin-bottom: var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); }
.stepflowkey span { display: inline-flex; align-items: center; gap: var(--space-2); }
.stepflowkey i { font-style: normal; width: 24px; height: 24px; border-radius: var(--radius-full);
             display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px;
             font-weight: 700; flex: none; }
.stepflowkey i.k-auto { background: var(--role-soft); border: 1px solid var(--role-line); color: var(--role-deep); }
.stepflowkey i.k-stop { background: #fdecec; border: 1px solid #f0b8b8; color: #a02020; }
.stepflowkey i.k-human { background: var(--color-neutral-100); border: 1px solid var(--color-border-strong);
                     color: var(--color-text-muted); }