/* ============================================================
   Compliance Roadmap Engine — client-facing page
   Restyled 2026-08-31 to match the real platform design system
   (prov.css) instead of its original dark "engineering test stand"
   look — that first pass reused prov.css's color tokens correctly
   but kept a dense, monospace, pill-badge "console" aesthetic that
   reads as a different product from the rest of the hub (portal
   cards, buttons, section labels). This pass changes typography,
   spacing and shape (radius) to match; the color tokens were
   already correct and are unchanged.
   Design spec (prov.css's own header comment): EU Commission style —
   neutral, data-first, Inter/IBM Plex Sans, no shadows, no gradients,
   no rounded corners (border-radius: 0 throughout prov.css, often
   !important) — pill-shaped chips/badges and heavy monospace body
   text were the biggest mismatches, both dropped here.
   All classes stay rm-prefixed (unchanged) to avoid collisions with
   prov.css's own .btn/.chip and main.css's .wrap — this is a restyle,
   not a rename, since the JS in prov/index.html generates markup
   against these exact class names. ============================================================ */

:root{
  --rm-card:#ffffff;
  --rm-border-soft:#ececec;
  --rm-success:#16a34a;   /* prov.css uses this exact green for status/success elsewhere */
  --rm-danger:#dc2626;    /* prov.css uses this exact red for danger/error states */
  --rm-warning:#b45309;   /* amber-700: --accent (#FFB81C) is a bright CTA-yellow, too low-contrast for label/body text on white */
  --rm-radius:0;          /* prov.css's design spec: "no shadows, no gradients" — cards/buttons/chips/badges stay square, matching border-radius:0 (often !important) throughout prov.css */
}

/* Kept as an opt-in utility (the assessment-date <input> uses it
   deliberately — a date field reads fine in a tabular/mono face) but no
   longer applied broadly across labels/badges/citations the way the first
   pass did — see the header comment. */
.rm-mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* Real bug fix, not just a style pass: every rm-chip/rm-opt/rm-btn/
   rm-linkish is a genuine <button> element (see the JS: b.type='button'),
   and main.css has a *global* `button { background: var(--gradient-btn);
   border-radius: 1.4em; box-shadow: ...; } button:hover { background:
   linear-gradient(...) }` rule. Class selectors beat that on the
   properties this file already sets at the base state (background,
   border-radius, padding, ...) — but box-shadow/margin-top were never set
   here at all, and *no* rule below ever set a hover-state background, so
   main.css's gradient hover silently leaked through on every one of these
   buttons (the dark-blue-to-white gradient the user reported on chip
   hover). Blanket reset up front so no individual rule has to remember to
   fight this on every state. */
.rm-chip,.rm-opt,.rm-btn,.rm-linkish{box-shadow:none;margin-top:0}
.rm-chip:hover,.rm-opt:hover{background:#fff}
.rm-chip[aria-pressed="true"]:hover{background:var(--blue)}
.rm-opt[aria-pressed="true"]:hover{background:#EEF2FB}
.rm-linkish:hover{background:none}

/* Hero/section-label/container/.hero h1/.subhead are prov.css's own real
   classes (reused directly, not re-implemented) — see .hero in prov.css. */

/* Real layout bug, not a style choice: <main> is display:flex;flex-direction:
   column (main.css) — every other <section class="container"> on this page
   stretches to the expected 1200px via the flex column's default
   align-items:stretch, except this one, which was measured shrinking to
   ~762px (fit-content of .rm-app-shell's inner content) instead. align-self:
   stretch on the section does NOT fix it (tested); an explicit width:100%
   does. Root cause not fully identified (some interaction between the
   nested flex contexts introduced by .rm-wrap below and the flex column's
   auto-stretch resolution) — scoped fix via its own class rather than
   touching the shared .container rule everything else already relies on. */
.rm-section{width:100%}

/* ---------- the engine itself: a bordered card, same weight as the
   platform's other content cards (.guide-card, .path-card) ---------- */
.rm-app-shell{
  background:var(--rm-card);
  border:1px solid var(--border);
  margin-bottom:var(--s4);
}
.rm-app-toolbar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  padding:16px 24px;border-bottom:1px solid var(--border);background:var(--rm-card);
  font-size:14px;color:var(--text);
}
.rm-app-toolbar label{display:flex;align-items:center;gap:8px}

/* Internal-only: the engineering changelog, rule/coverage QA buttons and
   the rulebase/rule-count/iteration counters. Not for clients — kept in
   the DOM (rather than deleted) because the render loop writes to some of
   these elements unconditionally on every run, and deleting them would
   throw. "Who you need" and "Inference trace" further down use the same
   class for the same reason. */
.rm-debug-hidden{display:none!important;}

/* Stacked, not side-by-side (changed 2026-08-31 per user feedback): the
   two-column layout left a permanently visible, empty gray results column
   next to the input for the entire time a visitor is answering questions —
   read as broken, not "waiting for input". Input stays on top at its own
   comfortable reading width (unchanged from the old left column's ~2fr
   share, not stretched to the container's full width); the roadmap/results
   section renders below it, full width, only once there's something to
   show it (see the JS's own hidden-until-populated panels, unchanged). */
.rm-wrap{
  display:flex;flex-direction:column;gap:var(--s3);
  background:var(--rm-card);
}
.rm-col{padding:var(--s3)}
.rm-col.rm-left{max-width:980px;width:100%;margin:0 auto}
.rm-col.rm-right{border-top:1px solid var(--border)}

/* Entry selector and the current question side by side — entry stays a
   fixed, compact width (it's a one-time choice, doesn't need to grow); the
   question column takes the rest and is what should draw the eye, since
   it's the thing that changes on every step. Stacks on narrow viewports
   (matches .rm-wrap's own <880px breakpoint further down). */
.rm-input-row{display:flex;gap:var(--s3);align-items:flex-start}
.rm-entry-panel{flex:0 0 320px}
.rm-qcol{flex:1 1 auto;min-width:0}

/* ---------- "Where to start": icon tiles, not flat pill chips ---------- */
.rm-entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:0}
.rm-entry-tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--text-dark);text-align:left;
  background:#fff;border:1px solid var(--border);border-radius:var(--rm-radius);
  padding:16px;cursor:pointer;
}
.rm-entry-icon{font-size:22px;line-height:1}
.rm-entry-tile:hover{border-color:var(--blue)}
.rm-entry-tile[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- Breadcrumb trail of answered questions (renderAnswers()) —
   each one reverts to that point via revertTo() when clicked. Horizontal,
   scrolls rather than wraps once it gets long: this is "how you got here",
   glanceable, not a report to read top-to-bottom. ---------- */
.rm-trail{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:var(--s2);border-bottom:1px solid var(--rm-border-soft)}
.rm-trail-item{
  flex:0 0 auto;display:flex;flex-direction:column;gap:2px;text-align:left;
  font-family:inherit;background:#fff;border:1px solid var(--border);border-left:3px solid var(--blue);
  border-radius:var(--rm-radius);padding:8px 12px;cursor:pointer;max-width:220px;
}
.rm-trail-item:hover{border-color:var(--blue)}
.rm-trail-num{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.rm-trail-q{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-trail-a{font-size:13.5px;font-weight:600;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Matches .section-label exactly (prov.css) — same uppercase small-caps
   label used for every section eyebrow on the rest of the page. */
.rm-eyebrow{
  font-size:13px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text);margin:0 0 var(--s1);
}
.rm-panel{background:var(--rm-card);border:1px solid var(--border);border-radius:var(--rm-radius);padding:var(--s2);margin-bottom:var(--s2)}
.rm-panel h2{font-size:18px;font-weight:700;margin:0 0 6px;color:var(--text-dark)}
.rm-panel p.rm-lede{margin:0 0 var(--s2);font-size:14px;color:var(--text)}

.rm-fixnote{border:1px solid var(--border);border-radius:var(--rm-radius);margin-bottom:var(--s2);background:var(--rm-card)}
.rm-fixnote summary{padding:14px 16px;cursor:pointer;font-size:13.5px;color:var(--text);font-weight:600}
.rm-fixnote summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rm-fixnote .rm-fixnote-body{padding:0 16px 16px;font-size:13.5px;color:var(--text)}
.rm-fixnote .rm-fixnote-body b{color:var(--rm-success)}

/* ---------- entry selector ---------- */
.rm-entry{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.rm-chip{
  font-size:14px;padding:8px 16px;border:1px solid var(--border);background:transparent;
  border-radius:var(--rm-radius);cursor:pointer;font-family:inherit;color:var(--text);font-weight:500;
}
.rm-chip:hover{border-color:var(--blue);color:var(--blue)}
.rm-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.rm-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- question — its own distinct card, not just a ruled-off
   section of the input panel (previously just border-top+padding, easy to
   miss as "the current step"). ---------- */
.rm-qbox{background:#fff;border:1px solid var(--border);border-top:3px solid var(--blue);border-radius:var(--rm-radius);padding:var(--s3);margin-top:0}
.rm-qnum{font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue)}
.rm-qtext{font-size:19px;font-weight:700;margin:8px 0 4px;line-height:1.35;color:var(--text-dark)}
.rm-qhelp{font-size:14px;color:var(--text);margin:0 0 var(--s2)}
.rm-opts{display:flex;flex-direction:column;gap:10px}
.rm-opt{
  text-align:left;font-family:inherit;font-size:15px;font-weight:600;color:var(--text-dark);
  background:#fff;border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--rm-radius);
  padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.rm-opt:hover{border-color:var(--blue);border-left-color:var(--blue)}
.rm-opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rm-opt .rm-tick{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--bg-alt);color:var(--text);
  font-size:13px;display:flex;align-items:center;justify-content:center;
}
.rm-opt:hover .rm-tick{background:var(--blue);color:#fff}
/* "Don't know" / skip-style options — visually secondary (dashed, no left
   accent, muted) so they read as an escape hatch, not an equal-weight
   choice next to the substantive answers. */
.rm-opt.rm-unsure{font-weight:500;color:var(--text);border-style:dashed;border-left-style:solid;border-left-color:var(--rm-border-soft)}
.rm-opt[aria-pressed="true"]{border-color:var(--blue);border-left-color:var(--blue);background:#EEF2FB}
.rm-opt[aria-pressed="true"] .rm-tick{background:var(--blue);color:#fff}

.rm-progress{display:flex;align-items:center;gap:10px;margin-top:var(--s2);font-size:13px;font-weight:600;color:var(--text)}
.rm-bar{flex:1;height:4px;background:var(--border);position:relative;overflow:hidden}
.rm-bar span{position:absolute;inset:0 auto 0 0;background:var(--blue);transition:width .35s ease}

.rm-answers{margin-top:var(--s2);border-top:1px solid var(--rm-border-soft);padding-top:14px}
.rm-answers ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rm-answers li{font-size:14px;display:flex;justify-content:space-between;gap:12px;color:var(--text)}
.rm-answers li b{font-weight:600;color:var(--text-dark);text-align:right}
.rm-linkish{background:none;border:none;padding:0;font-family:inherit;font-size:14px;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ---------- results ---------- */
.rm-regrow{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rm-border-soft)}
.rm-regrow:last-child{border-bottom:none}
.rm-regcode{font-weight:600;font-size:14px;min-width:104px;color:var(--text-dark)}
.rm-regname{font-size:14.5px;flex:1;overflow-wrap:anywhere;min-width:0}
.rm-regstate{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;min-width:0;overflow-wrap:anywhere;text-align:right}
.rm-s-applicable{color:var(--rm-success)}
.rm-s-superseded{color:var(--text)}
.rm-s-possible{color:var(--rm-warning)}
.rm-cite{font-size:13px;color:var(--text)}

/* ---------- roadmap: the signature element ---------- */
.rm-route{position:relative;margin-top:6px;padding-left:56px}
.rm-route::before{content:"";position:absolute;left:27px;top:6px;bottom:14px;width:1px;background:var(--border)}
.rm-stage{position:relative;padding:0 0 var(--s2)}
/* Phase group heading (Testing / Notified body / Documentation / ...) — a
   normal-flow line above its group of stages, not a side label in the
   narrow dot-line gutter: phase names vary a lot in length and a fixed
   42px-wide absolute label couldn't fit "Quality management" etc. */
.rm-band{
  margin:0 0 8px;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:600;
}
.rm-band:not(:first-child){margin-top:var(--s2)}
.rm-dot{position:absolute;left:-30px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--text-dark);border:1px solid var(--text-dark)}
.rm-stage.rm-nb .rm-dot{background:var(--rm-danger);border-color:var(--rm-danger)}
.rm-stage.rm-cond .rm-dot{background:var(--rm-card);border-color:var(--rm-warning)}
.rm-stitle{font-size:16px;font-weight:700;margin:0;line-height:1.3;color:var(--text-dark)}
.rm-sdesc{font-size:14px;color:var(--text);margin:4px 0 10px}
.rm-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rm-badge{
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--border);padding:3px 9px;border-radius:var(--rm-radius);color:var(--text);background:#fff;
}
.rm-badge.rm-mod{border-color:var(--blue);color:var(--blue)}
.rm-badge.rm-nb{border-color:var(--rm-danger);color:var(--rm-danger)}
.rm-badge.rm-self{border-color:var(--rm-success);color:var(--rm-success)}
.rm-badge.rm-assume{border-color:var(--rm-warning);color:var(--rm-warning)}
.rm-badge.rm-prov{border-color:var(--text-dark);color:var(--text-dark)}
.rm-scite{margin-top:9px}

.rm-callout{border:1px solid var(--rm-danger);border-radius:var(--rm-radius);padding:var(--s2);margin-bottom:var(--s2);background:#fff}
.rm-callout h3{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--rm-danger)}
.rm-callout.rm-warn{border-color:var(--rm-warning)}
.rm-callout.rm-warn h3{color:var(--rm-warning)}
.rm-trackhead{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:0 0 var(--s1)}
.rm-trackhead+.rm-route{margin-bottom:var(--s2)}
.rm-callout p{margin:0 0 8px;font-size:14.5px;color:var(--text-dark)}

.rm-trace{font-size:13px}
.rm-trace div{padding:4px 0;border-bottom:1px solid var(--rm-border-soft);display:flex;gap:10px;justify-content:space-between}
.rm-trace div:last-child{border-bottom:none}
.rm-trace .rm-fired{color:var(--rm-success)}
.rm-trace .rm-pend{color:var(--rm-warning)}
.rm-trace small{color:var(--text)}
.rm-trace span,.rm-trace small{overflow-wrap:anywhere;min-width:0}

.rm-tests div{padding:5px 0;border-bottom:1px solid var(--rm-border-soft);font-size:13px;display:flex;gap:10px;justify-content:space-between}
.rm-tests div>span,.rm-tests div>small{overflow-wrap:anywhere;min-width:0}
.rm-tests .rm-pass{color:var(--rm-success)}
.rm-tests .rm-fail{color:var(--rm-danger)}
.rm-tests .rm-why{font-size:13px;color:var(--rm-danger);padding:2px 0 6px}

/* Matches .btn-blue (prov.css) in color/weight — kept more compact than
   the hero-scale .btn (14px 32px / 17px) since this is used for many
   inline actions (reset, "find on portal") inside the tool, not a primary
   page CTA. */
.rm-btn{
  font-family:inherit;font-weight:600;font-size:14px;padding:9px 18px;border:1px solid var(--blue);
  background:var(--blue);color:#fff;border-radius:var(--rm-radius);cursor:pointer;
  text-decoration:none;display:inline-block;
}
.rm-btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;text-decoration:none}
.rm-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rm-empty{font-size:14.5px;color:var(--text);font-style:italic}

@media (max-width:880px){
  .rm-wrap{grid-template-columns:minmax(0,1fr)}
  .rm-col.rm-left{border-right:none;border-bottom:1px solid var(--border);min-height:0}
}
@media (prefers-reduced-motion:reduce){.rm-bar span,.rm-chip{transition:none!important}}