/* ============================================================
   Resto Group DRC, Command-Center design system (shared)
   Used by the hub and every linked report page.
   Light + dark via [data-theme].
   Brand identity (2026-06-13): Petrol Blue #0E2A3C navy +
   white + cool gray. No decorative gold or brass anywhere; one muted functional amber is allowed only for status/warning states (warn, aging, open items).
   Satoshi (primary, all type) + Spectral (italics and quotes only).
   No em dashes anywhere in rendered content.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;1,400;1,500&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");

:root {
  --paper: #F7F8FA;        /* cool off-white base */
  --paper-deep: #ECEFF3;   /* cool light gray */
  --navy: #0E2A3C;         /* Resto Petrol Blue, the brand navy */
  --navy-deep: #0A1F2D;
  --steel: #5E7891;        /* Muted Steel accent */
  --ice: #7FA9C9;          /* Ice Blue accent */

  /* HSL-triple companions of the mode-constant brand colors, for consumers that
     need "H S% L%" rather than hex (e.g. shadcn/ui wraps them as hsl(var(--x))).
     Keep in lockstep with the hexes above. */
  --navy-hsl: 203 62% 14.5%;
  --navy-deep-hsl: 204 64% 11%;
  --steel-hsl: 209 21% 47%;
  --ice-hsl: 206 41% 64.3%;

  /* One radius scale across every tile, card and chip. */
  --radius: 16px;     /* cards, panels, large surfaces */
  --radius-md: 13px;  /* tiles, list rows, inset blocks */
  --radius-sm: 9px;   /* chips, tags, small insets */
  --maxw: 1180px;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* status (data encoding only, both modes) */
  --red: #c2453a;
  --amber: #a9762e;
  --green: #3f7d52;
}

[data-theme="light"] {
  --bg: var(--paper);
  --bg-2: var(--paper-deep);
  --surface: #ffffff;
  --surface-2: #F2F5F8;
  --ink: #0E2A3C;
  --ink-strong: #0A1F2D;
  --ink-dim: #5a6b7a;
  --ink-faint: #8a93a0;
  --hairline: rgba(14,42,60,0.11);
  --hairline-2: rgba(14,42,60,0.20);
  --accent: var(--steel);
  --accent-ink: #46637F;
  --accent-soft: rgba(94,120,145,0.12);
  --accent-line: rgba(94,120,145,0.55);
  --shadow: 0 18px 48px -24px rgba(14,42,60,0.30);
  --shadow-sm: 0 6px 18px -12px rgba(14,42,60,0.28);
  --red: #c2453a; --amber: #a9762e; --green: #357046;
  /* HSL-triple companions (light) for hsl(var()) consumers like shadcn. The
     -border-hsl is an opaque stand-in for the translucent --hairline, used by
     controls that need a solid border value. */
  --bg-hsl: 220 23% 97.5%; --bg-2-hsl: 214 27% 94%;
  --surface-hsl: 0 0% 100%; --surface-2-hsl: 210 30% 96.1%;
  --ink-hsl: 203 62% 14.5%; --ink-dim-hsl: 208 15% 42%;
  --border-hsl: 213 24% 91%;
  --red-hsl: 5 54% 49%; --amber-hsl: 35 57% 42%; --green-hsl: 137 36% 32%;
  /* Severity surfaces (tile tints + tag fills), tuned for AA text on top. */
  --sev-crit-ink: #8f3127; --sev-crit-tint: rgba(194,69,58,0.07); --sev-crit-line: rgba(194,69,58,0.30);
  --sev-warn-ink: #8a5f24; --sev-warn-tint: rgba(169,118,46,0.08); --sev-warn-line: rgba(169,118,46,0.32);
  --sev-info-ink: #5a6b7a; --sev-info-tint: transparent;           --sev-info-line: var(--hairline);
}
[data-theme="dark"] {
  --bg: var(--navy-deep);
  --bg-2: #07161F;
  --surface: #0E2A3C;
  --surface-2: #14324A;
  --ink: #EDF1F5;
  --ink-strong: #ffffff;
  --ink-dim: #9fb3c6;
  --ink-faint: #6f8497;
  --hairline: rgba(255,255,255,0.10);
  --hairline-2: rgba(255,255,255,0.18);
  --accent: var(--ice);
  --accent-ink: #9CC4E0;
  --accent-soft: rgba(127,169,201,0.16);
  --accent-line: rgba(127,169,201,0.5);
  --shadow: 0 24px 60px -30px rgba(0,0,0,0.7);
  --shadow-sm: 0 10px 26px -16px rgba(0,0,0,0.6);
  --red: #e0685c; --amber: #d6a85e; --green: #5aa472;
  /* HSL-triple companions (dark) for hsl(var()) consumers like shadcn. */
  --bg-hsl: 204 64% 11%; --bg-2-hsl: 202 64% 7%;
  --surface-hsl: 203 62% 14.5%; --surface-2-hsl: 207 57% 18.4%;
  --ink-hsl: 210 29% 94.5%; --ink-dim-hsl: 209 26% 70%;
  --border-hsl: 205 33% 25%;
  --red-hsl: 5 68% 62%; --amber-hsl: 35 50% 63%; --green-hsl: 137 30% 50%;
  /* Severity surfaces, lifted for legibility on the navy surface. */
  --sev-crit-ink: #f0a59c; --sev-crit-tint: rgba(224,104,92,0.13); --sev-crit-line: rgba(224,104,92,0.34);
  --sev-warn-ink: #e6c89a; --sev-warn-tint: rgba(214,168,94,0.12); --sev-warn-line: rgba(214,168,94,0.34);
  --sev-info-ink: #9fb3c6; --sev-info-tint: transparent;           --sev-info-line: var(--hairline);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  transition: background .4s var(--ease), color .4s var(--ease);
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(120% 80% at 90% -8%, rgba(127,169,201,0.07), transparent 52%),
    radial-gradient(90% 70% at 0% 0%, rgba(40,70,120,0.18), transparent 55%);
  background-attachment: fixed;
}
[data-theme="light"] body {
  background-image: radial-gradient(120% 80% at 92% -10%, rgba(94,120,145,0.07), transparent 50%);
  background-attachment: fixed;
}

.rg-wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 3.5vw, 44px) clamp(18px, 4vw, 48px) clamp(40px, 5vw, 72px); }

/* ---------- Typography ----------
   Satoshi carries everything. Spectral is italics and quotes only. */
.rg-serif, h1.rg, h2.rg, h3.rg { font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; color: var(--ink-strong); letter-spacing: -0.01em; line-height: 1.08; }
h1.rg { font-size: clamp(34px, 4.6vw, 56px); font-weight: 900; letter-spacing: -0.025em; }
h2.rg { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.018em; }
h3.rg { font-size: clamp(20px, 2vw, 25px); }
.rg-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-ink); }
.rg-muted { color: var(--ink-dim); }
.rg-faint { color: var(--ink-faint); }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
em, i { font-family: "Spectral", Georgia, serif; font-style: italic; }

/* ---------- Masthead ---------- */
.rg-mast {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-bottom: clamp(14px, 1.8vw, 22px); margin-bottom: clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--hairline);
}
.rg-mast .lhs { display: flex; flex-direction: column; gap: 3px; }
.rg-mast .back { font-size: 13px; font-weight: 600; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.rg-mast .back:hover { text-decoration: none; opacity: .8; }
.rg-mast .title { font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1.06; }
.rg-mast .rhs { display: flex; align-items: center; gap: 16px; }
.rg-clock { text-align: right; line-height: 1.15; }
.rg-clock .t { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.rg-clock .d { font-size: 12px; color: var(--ink-dim); }
.rg-clock .d b { color: var(--accent-ink); font-weight: 600; }

/* ---------- Theme toggle ---------- */
.rg-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline-2); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; font-size: 18px; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.rg-toggle:hover { border-color: var(--accent-line); color: var(--accent-ink); transform: rotate(-12deg); }
[data-theme="light"] .rg-toggle .ph-sun { display: none; }
[data-theme="dark"] .rg-toggle .ph-moon { display: none; }

/* ---------- Surfaces / cards ---------- */
.rg-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: clamp(18px, 1.8vw, 26px);
}
.rg-card.pad-sm { padding: 16px 18px; }
.rg-panel { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(16px,1.6vw,22px); }

/* ---------- Metrics ---------- */
.rg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rg-metric { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; }
.rg-metric .v { font-family: "Satoshi", system-ui, sans-serif; font-weight: 900; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1; }
.rg-metric .l { font-size: 12px; color: var(--ink-dim); margin-top: 6px; letter-spacing: 0.02em; }

/* ---------- Tables ---------- */
table.rg { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rg th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding: 10px 12px; border-bottom: 1px solid var(--hairline-2); }
table.rg td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); color: var(--ink); }
table.rg tr:last-child td { border-bottom: none; }
table.rg td.num, table.rg th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Status ---------- */
.rg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; margin-right: 8px; background: var(--ink-faint); }
.rg-dot.red { background: var(--red); } .rg-dot.amber { background: var(--amber); } .rg-dot.green { background: var(--green); } .rg-dot.brass { background: var(--accent); }
.rg-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline-2); color: var(--ink-dim); }
.rg-badge.red { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.rg-badge.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.rg-badge.green { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }

/* ---------- Severity tag (shared) ----------
   The single severity affordance across every module. A short text label in a
   tinted, fully-bordered pill: no colored side-stripes, no decorative dots.
   Severity is carried by the word plus a restrained accent, which stays legible
   for colour-blind readers and passes contrast. */
.rg-sev {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  border: 1px solid var(--sev-line, var(--hairline-2));
  background: var(--sev-tint, transparent); color: var(--sev-ink, var(--ink-dim));
  white-space: nowrap;
}
.rg-sev::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none; opacity: .85;
}
.rg-sev.crit { --sev-ink: var(--sev-crit-ink); --sev-tint: var(--sev-crit-tint); --sev-line: var(--sev-crit-line); }
.rg-sev.warn { --sev-ink: var(--sev-warn-ink); --sev-tint: var(--sev-warn-tint); --sev-line: var(--sev-warn-line); }
.rg-sev.info { --sev-ink: var(--sev-info-ink); --sev-tint: var(--sev-info-tint); --sev-line: var(--hairline-2); }

/* ---------- Concern tile (shared) ----------
   Used by the concerns rail in every function module. Hierarchy: severity tag +
   title lead, project and detail are quieter supporting lines. Critical and
   high-severity tiles carry a full background tint and a full 1px border in the
   severity hue (no side-stripe). Low-severity tiles stay flat and group under a
   hairline so they do not all shout at once. */
.rg-concern {
  border: 1px solid var(--sev-line, var(--hairline)); border-radius: var(--radius-md);
  padding: 13px 15px 14px; background: var(--sev-tint, var(--surface));
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.rg-concern + .rg-concern { margin-top: 10px; }
.rg-concern.crit { --sev-line: var(--sev-crit-line); --sev-tint: var(--sev-crit-tint); }
.rg-concern.warn { --sev-line: var(--sev-warn-line); --sev-tint: var(--sev-warn-tint); }
.rg-concern.info { --sev-line: var(--hairline); --sev-tint: var(--surface); }
.rg-concern.is-link { cursor: pointer; }
.rg-concern.is-link:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.rg-concern .ct-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.rg-concern .ct-proj { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-dim); text-transform: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-concern .ct-title { font-size: 14px; font-weight: 700; color: var(--ink-strong); line-height: 1.35; }
.rg-concern .ct-detail { font-size: 12px; color: var(--ink-dim); margin-top: 6px; line-height: 1.45; }
.rg-concern .ct-tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.rg-concern .ct-oi { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-dim); border: 1px solid var(--hairline-2); border-radius: 6px; padding: 1px 6px; font-variant-numeric: tabular-nums; }

/* The rail header: a count of open concerns, not a legend of coloured dots. */
.rg-concern-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rg-concern-head h3 { font-family: "Satoshi", system-ui, sans-serif; font-weight: 700; font-size: 23px; letter-spacing: -0.015em; color: var(--ink-strong); }
.rg-concern-head .ct { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Pills / chips / buttons ---------- */
.rg-pill { display: inline-block; text-decoration: none; color: var(--ink-dim); font-size: 13px; font-weight: 500; border: 1px solid var(--hairline-2); border-radius: 999px; padding: 7px 15px; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.rg-pill:hover { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); text-decoration: none; }
.rg-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; transition: background .25s var(--ease); }
.rg-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); text-decoration: none; }

/* ---------- Segmented tabs ---------- */
.rg-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 999px; }
.rg-tabs button { border: none; background: transparent; color: var(--ink-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.rg-tabs button[aria-selected="true"], .rg-tabs button.active { background: var(--surface); color: var(--ink-strong); box-shadow: var(--shadow); }

/* ---------- Quote / verbatim (Spectral italic) ---------- */
.rg-quote { border-left: 2px solid var(--accent-line); padding: 4px 0 4px 16px; color: var(--ink); font-family: "Spectral", Georgia, serif; font-style: italic; font-size: 20px; line-height: 1.4; }
.rg-quote .by { display: block; font-family: "Satoshi", system-ui, sans-serif; font-style: normal; font-size: 12px; color: var(--ink-faint); margin-top: 6px; }

/* ---------- Section divider ---------- */
.rg-section { margin-top: clamp(30px, 3.6vw, 48px); }
.rg-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }

hr.rg { border: none; border-top: 1px solid var(--hairline); margin: clamp(24px,3vw,40px) 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body, .rg-toggle, .rg-pill, .rg-card { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
  .rg-mast { flex-wrap: wrap; }
  .rg-mast .rhs { gap: 12px; }
}