/* Sentinel v2 - report.css
   Report: decision strip, serif memo, outline + scroll-spy, copy summary, print.
   Owned by the 'report' area of the v2 redesign; tokens come from v2/tokens.css (old names are aliased there, so
   every colour below is a token: no literal hex, and every theme gets its own hero).

   Loaded after styles.css: rules here are scoped under `.rpt` so they win over the legacy Report rules without
   !important. Motion follows the v2 rules: one count-up on arrival (an @property integer in ::after, the real value
   in a screen-reader span, never written per frame), productive fades on the menu, nothing loops, the memo body
   never moves. */

/* ---- the page and the reading column ------------------------------------ */
.report-layout.rpt {
  --rpt-brand: var(--brand, var(--accent-ink));
  /* the text ON the brand fill (tokens.css `--on-brand`); `--brand-ink` is the brand AS text - on the Export button
     it painted the label in the fill's own colour, an empty blue pill */
  --rpt-brand-ink: var(--on-brand, var(--text-inverse));
  --rpt-e1: 0 1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
  --rpt-e2: 0 8px 22px -14px color-mix(in srgb, var(--text-primary) 38%, transparent);
  --rpt-e3: 0 14px 34px -16px color-mix(in srgb, var(--text-primary) 42%, transparent);
  --rpt-ease: cubic-bezier(.22, 1, .36, 1);
  max-width: 820px;
  padding: 24px 28px 88px;
  counter-reset: memo-sec;
}
.rpt .rpt-outline { display: none; }

/* ---- the hero: a verdict, one sentence, a decision strip (<= 320 px) ---- */
.rpt .rpt-hero {
  --hero-tone: var(--severity-medium);
  position: relative;
  padding: 16px 20px 12px 22px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--hero-tone);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hero-tone) 7%, var(--bg-doc)) 0%, var(--bg-doc) 72%);
  color: var(--text-primary);
  box-shadow: var(--rpt-e1);
  overflow: visible;
}
.rpt .rpt-hero.risk-severe { --hero-tone: var(--severity-critical); }
.rpt .rpt-hero.risk-high   { --hero-tone: var(--severity-high); }
.rpt .rpt-hero.risk-medium { --hero-tone: var(--severity-medium); }
.rpt .rpt-hero.risk-low,
.rpt .rpt-hero.risk-clear  { --hero-tone: var(--severity-success); }
.rpt .rpt-hero-top {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.rpt .rpt-eyebrow { color: var(--rpt-brand); font-weight: 700; opacity: 1; }
.rpt .rpt-doc {
  color: var(--text-muted); opacity: 1; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 500; min-width: 0; overflow-wrap: anywhere;
}
.rpt .rpt-hero-advice { margin: 2px 0 8px; font-size: 11.5px; line-height: 16px; color: var(--text-muted); opacity: 1; }
.rpt .rpt-hero-grid { display: block; }
.rpt .rpt-hero-verdict { min-width: 0; }
.rpt .rpt-hero-verdict h1 {
  margin: 0 0 4px; font-family: var(--font-doc); font-size: 28px; line-height: 36px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text-primary); text-wrap: balance;
}
.rpt .rpt-hero-verdict p { color: var(--text-secondary); opacity: 1; max-width: 72ch; }
.rpt .rpt-hero-line { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--text-secondary); }
.rpt .rhl-k { color: var(--text-primary); font-weight: 600; }
.rpt .rhl-t { color: var(--text-primary); }
.rpt .rhl-w { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); white-space: normal; }
.rpt .rpt-hero-more { margin: 2px 0 0; }
.rpt .rpt-hero-more > summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 550; color: var(--rpt-brand); border-radius: 4px;
}
.rpt .rpt-hero-more > summary::-webkit-details-marker { display: none; }
.rpt .rpt-hero-more > summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--rpt-ease);
}
.rpt .rpt-hero-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.rpt .rpt-hero-more p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); max-width: 72ch; }
.rpt .rpt-hero-count { opacity: 1; }

/* the decision strip: What needs fixing's groups, counted - each a jump to its group */
.rpt .rpt-decide {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 12px 0 0;
}
.rpt .rds-item {
  --tone: var(--severity-critical);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  padding: 8px 12px 9px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--border-subtle));
  background: color-mix(in srgb, var(--tone) 9%, var(--bg-doc));
  color: var(--text-primary); font-family: var(--font-ui);
  transition: border-color 120ms var(--rpt-ease), background-color 120ms var(--rpt-ease), transform 16ms;
}
.rpt .rds-item.is-later { --tone: var(--severity-medium); }
.rpt .rds-item.is-monitor { --tone: var(--severity-low); }
.rpt .rds-item.is-not_yet_in_force { --tone: var(--text-muted); }
.rpt .rds-item:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--tone) 55%, var(--border-subtle));
  background: color-mix(in srgb, var(--tone) 14%, var(--bg-doc));
}
.rpt .rds-item:active:not(:disabled) { transform: translateY(1px); }
.rpt .rds-item:focus-visible { outline: 2px solid var(--rpt-brand); outline-offset: 2px; }
.rpt .rds-item:disabled { cursor: default; opacity: .6; }
.rpt .rds-l { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
@property --rds-v { syntax: "<integer>"; inherits: false; initial-value: 0; }
.rpt .rds-n {
  --rds-v: var(--n);
  counter-reset: rds var(--rds-v);
  font-size: 22px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tone) 70%, var(--text-primary));
}
.rpt .rds-n::after { content: counter(rds); }
.rpt .rds-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rpt .rds-n { animation: rdsCount 560ms var(--rpt-ease, ease-out) both; }
@keyframes rdsCount { from { --rds-v: 0; } to { --rds-v: var(--n); } }

/* the counts strip (glyph, number, label) and the facts row, on one line */
.rpt .rpt-hero-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle);
}
/* THE SEVERITY LEGEND: glyph, count, word - "◆ 1 Critical · ▲ 3 High · ● 3 Medium · ○ 3 Low", the way the Findings
   filter and the contract header write a level (glyph first, colour second, the count in the ink). The label stays
   before the number in the markup (both files print it so); the number is drawn first by `order`. The count is never
   a white digit in a filled square: shell.css's unscoped `.sev-critical > b` paints every such <b> with the severity
   colour, so the reset below names background and colour outright. */
.rpt .rpt-hero-stats, .app:not(.dx) .rpt .rpt-hero-stats {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; width: auto; flex: 0 1 auto;
}
.rpt .rpt-tile, .app:not(.dx) .rpt .rpt-tile {
  display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px;
  min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none;
  white-space: nowrap;
}
.rpt .rpt-tile b {
  order: -1; display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 14px; line-height: 20px; font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.rpt .rpt-tile span {
  margin: 0; font-size: 12.5px; line-height: 20px; text-transform: none; letter-spacing: 0;
  color: var(--text-secondary); opacity: 1;
}
/* THE SEPARATORS SIT IN AN 18px GUTTER on each item's left, and the strip is pulled 18px out of the row, which clips:
   the "·" shows between two items on a line and is cut away from an item that starts one (a phone wraps "10 Total"
   under the levels - it must not open with a dot). The facts row below does the same. */
.rpt .rpt-hero-row { overflow: hidden; }
.rpt .rpt-hero-stats, .app:not(.dx) .rpt .rpt-hero-stats { margin-left: -18px; }
.rpt .rpt-tile, .app:not(.dx) .rpt .rpt-tile { position: relative; padding-left: 18px; }
.rpt .rpt-tile::before, .rpt .rpt-hero-facts .rhf::before {
  content: "·"; position: absolute; left: 7px; top: 0; color: var(--text-muted); font-size: 13px; line-height: 20px;
}
.rpt .rpt-tile.sev-critical b::before, .rpt .rpt-tile.sev-high b::before,
.rpt .rpt-tile.sev-medium b::before, .rpt .rpt-tile.sev-low b::before {
  display: inline-block; font-size: 11px; font-weight: 400; line-height: 1; transform: translateY(-1px);
}
.rpt .rpt-tile.sev-critical b::before { content: "◆"; color: var(--severity-critical); }
.rpt .rpt-tile.sev-high b::before { content: "▲"; color: var(--severity-high); }
.rpt .rpt-tile.sev-medium b::before { content: "●"; color: var(--severity-medium); }
.rpt .rpt-tile.sev-low b::before { content: "○"; color: var(--severity-low); }
.rpt .rpt-tile.hot, .rpt .rpt-tile.hot b { background: none; border-color: transparent; }
/* a level with nothing in it is still printed (the files' strip has all four columns) but reads quieter */
.rpt .rpt-tile.is-zero b, .rpt .rpt-tile.is-zero span, .rpt .rpt-tile.is-zero b::before { color: var(--text-muted); font-weight: 500; }
.rpt .rpt-hero-facts {
  flex: 1 1 auto; justify-content: flex-end; margin: 0 0 0 -18px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0;
  font-size: 12.5px; line-height: 20px; color: var(--text-secondary);
}
.rpt .rpt-hero-facts .rhf { position: relative; padding-left: 18px; }
.rpt .rpt-hero-facts .rhf:first-child::before { content: none; }
.rpt .rhf-sep { color: var(--text-muted); padding: 0 6px; }
.rpt .rhf-k { color: var(--text-muted); }
.rpt .rhf-v { color: var(--text-primary); font-weight: 550; }
.rpt .rhf.is-state .rhf-v { color: var(--text-muted); font-weight: 400; font-style: italic; }
.rpt .rpt-hero-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); opacity: 1; }
/* what the review did not assess or price: said once, quietly (it was two tiles that held no figure) */
.rpt .rpt-hero-states { display: flex; flex-wrap: wrap; align-items: baseline; margin: 6px 0 0; font-size: 12.5px; line-height: 20px; color: var(--text-muted); }

/* the document type, on the page's surfaces now (it was white on the old gradient) */
.rpt .rpt-doctype { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); gap: 6px 12px; }
.rpt .rpt-dt-k { color: var(--text-muted); opacity: 1; font-size: 11px; }
.rpt .rpt-dt-v { font-size: 13.5px; color: var(--text-primary); }
.rpt .rpt-dt-conf, .rpt .rpt-dt-src {
  font-size: 11px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.rpt .rpt-dt-conf.is-low { opacity: 1; }
.rpt .rpt-dt-conf.is-high { background: var(--bg-sunken); color: var(--text-primary); }
.rpt .rpt-dt-note { color: var(--text-secondary); opacity: 1; }
.rpt .rpt-dt-ctl select {
  height: 30px; border: 1px solid var(--border-subtle); background: var(--bg-doc); color: var(--text-primary);
}
.rpt .rpt-dt-ctl .rpt-tool { background: var(--bg-doc); border-color: var(--border-subtle); color: var(--text-secondary); }
.rpt .rpt-dt-ctl .rpt-tool:hover:not(:disabled) { background: var(--bg-sunken); color: var(--text-primary); }

/* ---- the memorandum: serif, <= 72ch, numbered sections ----------------- */
.rpt .memo-block > h3,
.rpt .memo-steps-head h3,
.rpt .memo-group-h {
  font-family: var(--font-doc); font-size: 20px; line-height: 28px; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none; color: var(--text-primary);
}
.rpt .memo-block > h3::before,
.rpt .memo-steps-head h3::before {
  counter-increment: memo-sec; content: counter(memo-sec) ".";
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-muted);
  margin-right: 10px; letter-spacing: 0;
}
.rpt .memo-group-h { font-size: 17px; line-height: 24px; flex-wrap: wrap; }
.rpt .memo-group-h > span { font-family: var(--font-ui); font-size: 12.5px; line-height: 18px; font-weight: 400; color: var(--text-muted); }
.rpt .memo-prose,
.rpt .rc-block p,
.rpt .rc-tl-text {
  font-family: var(--font-doc); font-size: 15.5px; line-height: 1.62; color: var(--text-primary); max-width: 72ch;
}
.rpt .rc-block.rc-example p { color: var(--text-secondary); }
.rpt .rc-quote blockquote { font-size: 15px; line-height: 1.6; max-width: 72ch; }
.rpt .memo-sub { max-width: 72ch; }
.rpt .memo-made { color: var(--text-muted); white-space: nowrap; }
/* the Term cell is one wrapping line of two items; each item carries its separator in a 14px gutter on its left, and
   the line is pulled 14px out of a clipping cell - so the "·" shows between the range and "made" on one line and is
   cut away when "made" wraps to the start of the next (never a line that opens with a dot) */
.rpt .memo-term-dd { overflow: hidden; }
.rpt .memo-term-line { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: -14px; }
.rpt .memo-term-line > * { position: relative; padding-left: 14px; min-width: 0; }
.rpt .memo-term-line > .memo-made::before { content: "·"; position: absolute; left: 4px; top: 0; }
/* a date never breaks inside itself ("1 March / 2026"); a range breaks only at its dash */
.rpt .rpt-date { white-space: nowrap; }
.rpt .rpt-time { white-space: nowrap; }

/* What needs fixing: the risk's one number, and its level as a glyph */
.rpt .msg-list .ms-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- the lens bar: opaque, inside the column, one row when pinned ------- */
.rpt .rpt-controls,
.app:not(.dx) .rpt .rpt-controls {
  margin: 22px 0 14px; padding: 10px 12px;
  background: var(--bg-app);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--border-subtle); border-radius: 12px;
}
.rpt .rpt-controls.is-pinned {
  padding-top: 8px; padding-bottom: 8px;
  border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent;
  box-shadow: var(--rpt-e2);
}
.rpt .rpt-controls-inner { gap: 8px; }
.rpt .rpt-controls-top .rpt-control-tools { margin-left: 0; flex: 1 1 auto; justify-content: flex-start; }
.rpt .rpt-controls-top .rpt-chips-sub { padding-left: 10px; }
.rpt .rpt-filter-row { gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
/* the reading level and the exports are one cluster at the row's end: when the row does not fit (long Russian
   labels), the cluster moves under the chips as a whole - the Export button never wraps away on its own */
.rpt .rpt-filter-row > .rpt-chips { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
.rpt .rpt-filter-row .rpt-chip { flex: none; padding: 0 9px; }
.rpt .rpt-filter-row .rpt-count { flex: none; }
.rpt .rpt-filter-row .rpt-langmode, .rpt .rpt-filter-row .rpt-export { flex: none; }
.rpt .rpt-lm { padding: 0 9px; }
.rpt .rpt-filter-row .rpt-count { margin-left: 0; }
.rpt .rpt-lens-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.rpt .rpt-chip { height: 28px; }
.rpt .rpt-chip.is-on { border-color: var(--rpt-brand); color: var(--rpt-brand); background: color-mix(in srgb, var(--rpt-brand) 9%, transparent); }
.rpt .rpt-chip.is-on .rpt-chip-n { color: var(--rpt-brand); }
.rpt .rpt-export { position: relative; }
.rpt .rpt-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rpt-brand); border-color: transparent; color: var(--rpt-brand-ink);
}
.rpt .rpt-export-btn:hover { background: color-mix(in srgb, var(--rpt-brand) 86%, var(--text-primary)); color: var(--rpt-brand-ink); }
.rpt .rpt-export-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.rpt .rpt-export-btn svg { transition: transform 120ms var(--rpt-ease); }
.rpt .rpt-export-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 184px; padding: 4px;
  background: var(--bg-doc); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: var(--rpt-e3);
  animation: rptMenuIn 120ms var(--rpt-ease) both;
}
.rpt .rpt-export-menu[hidden] { display: none; }
@keyframes rptMenuIn { from { opacity: 0; } to { opacity: 1; } }
.rpt .rpt-menu-item {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  text-align: left; font-family: var(--font-ui); font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.rpt .rpt-menu-item:hover, .rpt .rpt-menu-item:focus-visible { background: var(--bg-sunken); outline: none; }

/* ---- the finding card: title, hook, one meta row; actions at the foot --- */
.rpt .rpt-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px; }
.rpt .rc-num {
  width: auto; min-width: 26px; padding: 0 6px; font-family: var(--font-mono); font-size: 12px;
}
.rpt .rc-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rpt .rc-title { font-family: var(--font-doc); font-size: 16.5px; line-height: 23px; font-weight: 600; color: var(--text-primary); }
.rpt .rc-oneliner { font-size: 13.5px; line-height: 20px; color: var(--text-secondary); }
.rpt .rc-pills {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px;
  max-width: none; width: auto; padding: 4px 0 0; flex: none;
}
.rpt .rc-pill { font-size: 11.5px; min-height: 22px; padding: 1px 9px; white-space: nowrap; overflow: visible; text-overflow: clip; max-width: 100%; }
.rpt .rc-pill.rc-who { max-width: 100%; white-space: normal; }
.rpt .rc-who .rcp-v { overflow: visible; text-overflow: clip; }
.rpt .rc-glyph { margin-right: 2px; font-size: 10px; }
.rpt .rc-conf { background: var(--bg-sunken); color: var(--text-secondary); }
.rpt .rc-conf.is-sure { background: color-mix(in srgb, var(--severity-success) 12%, transparent); color: var(--severity-success); }
.rpt .rc-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
}
.rpt .rc-act, .rpt .rc-cite {
  height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 550;
  border: 1px solid var(--border-subtle); background: var(--bg-doc); color: var(--text-primary);
  transition: background-color 120ms var(--rpt-ease), border-color 120ms var(--rpt-ease);
}
.rpt .rc-act-play { border-color: color-mix(in srgb, var(--rpt-brand) 40%, var(--border-subtle)); color: var(--rpt-brand); }
.rpt .rc-act:hover, .rpt .rc-cite:hover { background: var(--bg-sunken); }
.rpt .rc-act-k { margin-left: 6px; font-size: 12px; color: var(--text-muted); }
.rpt .rc-cite { height: 26px; padding: 0 9px; font-family: var(--font-mono); font-size: 12px; border-radius: 6px; }

/* ---- >= 1280: the sticky outline beside a <= 72ch memo ----------------- */
@media (min-width: 1280px) {
  .report-layout.rpt {
    max-width: 1080px;
    display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 40px; align-items: start;
  }
  .report-layout.rpt > * { grid-column: 2; min-width: 0; }
  .rpt .rpt-outline {
    display: flex; flex-direction: column; gap: 1px;
    grid-column: 1; grid-row: 1 / span 40; align-self: start;
    position: sticky; top: 16px; max-height: calc(100vh - 140px); overflow: auto;
    padding: 4px 0 8px 14px; font-family: var(--font-ui);
  }
  .rpt .rpt-jump { display: none; }
}
.rpt .rpt-ol-progress {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: var(--border-subtle); overflow: hidden;
}
.rpt .rpt-ol-progress i {
  position: absolute; inset: 0; background: var(--rpt-brand); transform: scaleY(0); transform-origin: top;
}
.rpt .rol-sec {
  display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  text-align: left; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--text-secondary);
  transition: color 120ms var(--rpt-ease), background-color 120ms var(--rpt-ease);
}
.rpt .rol-sec:hover { color: var(--text-primary); background: var(--bg-sunken); }
.rpt .rol-sec.is-current { color: var(--rpt-brand); }
.rpt .rol-rows { list-style: none; margin: 0 0 4px; padding: 0 0 0 6px; display: flex; flex-direction: column; }
.rpt .rol-row {
  display: grid; grid-template-columns: 12px 20px minmax(0, 1fr); align-items: baseline; gap: 4px; width: 100%;
  padding: 4px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
  font-size: 12.5px; line-height: 17px; color: var(--text-secondary);
}
.rpt .rol-row:hover { background: var(--bg-sunken); color: var(--text-primary); }
.rpt .rol-g { font-size: 9px; color: var(--text-muted); }
.rpt .rol-row.sev-critical .rol-g { color: var(--severity-critical); }
.rpt .rol-row.sev-high .rol-g { color: var(--severity-high); }
.rpt .rol-row.sev-medium .rol-g { color: var(--severity-medium); }
.rpt .rol-row.sev-low .rol-g { color: var(--severity-low); }
.rpt .rol-n { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.rpt .rol-t { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rpt .rpt-outline :focus-visible { outline: 2px solid var(--rpt-brand); outline-offset: 1px; }

/* ---- phones ------------------------------------------------------------- */
@media (max-width: 720px) {
  .report-layout.rpt { padding: 14px 16px 64px; }
  .rpt .rpt-controls, .app:not(.dx) .rpt .rpt-controls { margin-left: 0; margin-right: 0; padding: 8px 10px; }
  .rpt .rpt-hero { padding: 14px 14px 10px 16px; }
  .rpt .rpt-hero-verdict h1 { font-size: 22px; line-height: 30px; }
  .rpt .rpt-decide { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
  .rpt .rds-item { padding: 7px 10px 8px; }
  .rpt .rds-l { font-size: 11.5px; }
  .rpt .rpt-controls.is-pinned .rpt-count { display: none; }
  .rpt .rpt-hero-facts { justify-content: flex-start; }
  .rpt .rpt-card-head { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px; }
  .rpt .rc-pills { padding-left: 0; }
  .rpt .rpt-filter-row { flex-wrap: wrap; }
  .rpt .rpt-filter-row > .rpt-chips { flex: 1 1 100%; }
  .rpt .rpt-lens-tools { margin-left: 0; flex-wrap: wrap; }
  .rpt .rpt-search { max-width: none; }
}

/* a finding measured as it prints (report.js, just before a print): open, and laid out even off screen */
.report-layout.rpt.paper-measure .rpt-card { content-visibility: visible !important; }
.report-layout.rpt.paper-measure .rpt-card-body { display: block !important; }
.report-layout.rpt.paper-measure .rpt-card-inner { overflow: visible !important; padding: 2px 18px 18px !important; }
.report-layout.rpt.paper-measure .rc-oneliner, .report-layout.rpt.paper-measure .rc-actions { display: none !important; }

/* ---- print, and the exported PDF: the Report as the page shows it (the owner, 2026-10-15) -----------------------
   The paper is the website: the same type, hero, cards, rails, pills and colours, in the parchment theme whatever the
   screen's (v2/report.js switches it for the print and back), every finding open as Expand all shows it. Only what does
   nothing on paper goes: the outline, the controls and the export menu, a card's buttons and chevrons, the filters'
   shortcut. The server's PDF (backend/report_paper.py) is Chromium printing this very page, so the downloaded file and
   a browser's print are one design.
   PAGE BREAKS fall between the findings and between a finding's blocks - never inside a block, a row of the key terms,
   a step, a fact or a heading's first line; a finding short enough to sit on a page is never split (.paper-whole,
   report.js), and a split finding is drawn as a card on both pages (box-decoration-break: clone).
   THE COLUMN keeps the page's own width (776 px) and is set at .9, so it fits A4 and wraps its lines where the screen
   does. Every ancestor of the stage is unwrapped (block, auto height, visible overflow) and every sibling on the way
   down - rail, library, mode bar, sidebar, dock, toasts, ambient canvases - is not printed. */
@media print {
  @page { size: A4; margin: 14mm 12mm 16mm; }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  *:has(#modeStage) {
    display: block !important; position: static !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; overflow: visible !important; transform: none !important; background: #fff !important;
  }
  *:has(#modeStage) > :not(:has(#modeStage)):not(#modeStage) { display: none !important; }
  #modeStage { display: block !important; position: static !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  .rpt-outline, .rpt-controls, .rpt-sticky-sentinel, .rpt-export, .rc-actions, .rpt-dt-ctl, .rcw-more, .rc-chev,
  .msf-quick, .ms-go, .rpt-explainer-loading, .memo-loading, .rpt-hero-more > summary, [data-ambient], canvas, .sfx-beam { display: none !important; }
  .report-layout.rpt {
    display: block !important; width: 776px !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
    zoom: .9; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .rpt * { animation: none !important; transition: none !important; }
  .rpt .rds-n { --rds-v: var(--n); }
  .rpt .msg-list li.is-folded { display: flex !important; }
  /* every finding open, a card on each page it reaches */
  .rpt .rpt-findings { display: block !important; }
  .rpt .rpt-findings > * + * { margin-top: 12px; }
  .rpt .rpt-card { overflow: visible; box-shadow: none !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .rpt .rpt-card-body { display: block !important; }
  .rpt .rpt-card-inner { overflow: visible !important; padding: 2px 18px 18px !important; }
  .rpt .rc-oneliner { display: none !important; }
  .rpt .rpt-hero, .rpt .memo-head, .rpt .memo-step-group { box-shadow: none !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* where a page may break, and where it may not */
  .rpt .rpt-hero, .rpt .memo-particular, .rpt .memo-side, .rpt .memo-table tr, .rpt .msg-head, .rpt .msg-list li,
  .rpt .rpt-card-head, .rpt .rc-where, .rpt .rc-verdictline, .rpt .rc-block:not(:has(.rc-tl)), .rpt .rc-fact, .rpt .rc-quote,
  .rpt .rc-tl li, .rpt .rpt-card.paper-whole, .rpt .rpt-findings > p, .rpt .rpt-disclaimer { break-inside: avoid; }
  .rpt h3, .rpt h4, .rpt .memo-group-h, .rpt .memo-steps-head, .rpt .msg-head, .rpt .msg-note, .rpt .rpt-card-head,
  .rpt .rc-where, .rpt .rc-verdictline { break-after: avoid; }
  .rpt p, .rpt li, .rpt blockquote { orphans: 3; widows: 3; }
}
/* the memorandum could not be built: said so, with Try again (app.js memoFailedHtml) */
.memo-loading.is-failed { color: var(--text-secondary, inherit); }
.memo-loading.is-failed .btn { margin-left: 2px; }