/* Pernod Ricard Global Command Centre.

   Sampled from pernod-ricard.com, which is the authoritative source; the
   supplied artwork agrees with it to within about 4%, the drift you would
   expect from a screenshot:
     --navy       #14366a  their deep blue
     --periwinkle #7fa5d0  the light blue band
     --ink        #222d38  their body text, which is charcoal and not navy
     --ground     #f9f8f7  their off-white
     --brand-mid  #39598a  the logo gradient's bottom

   The rest are extensions this interface needs and the artwork does not supply:
   --navy-deep for the foot of the rail, --chrome for the medallion's metal,
   --ground for a page you can read a dense table on, --pewter for secondary
   text. --gold and --flag are functional, not brand: gold marks a medal, red
   marks a date already missed. Nothing else gets a colour. */

:root {
  --navy: #123f75;
  --navy-deep: #0d2c55;
  --ground: #f9f8f7;
  --surface: #ffffff;
  --gold: #b98f3e;
  --gold-text: #7d5f22;
  --flag-deep: #7a2418;
  --periwinkle: #76a0cd;
  --flag: #b23a2b;
  --pewter: #6b7a91;
  --chrome: #c9ced6;
  --brand-mid: #39598a;
  --ink: #222d38;

  --rule: rgba(18, 63, 117, 0.14);
  --rule-strong: rgba(18, 63, 117, 0.3);
  --wash: rgba(18, 63, 117, 0.04);

  --display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --ui: Archivo, "Helvetica Neue", Arial, sans-serif;

  --rail-w: 208px;
  --gutter: 40px;
  /* One content measure. The hero band is full-bleed but its contents are
     capped to this, so its right edge lines up with the panels below. */
  --measure: 1560px;
  --measure-inner: calc(var(--measure) - (2 * var(--gutter)));

  /* The rail and the banded headers are the only surfaces the two looks
     disagree about, so they read from their own tokens and nothing else in the
     sheet needs to know which look is on. */
  --rail-bg: var(--periwinkle);
  --rail-ink: var(--navy);
  --rail-ink-quiet: var(--navy);
  --rail-hover-bg: rgba(255, 255, 255, 0.3);
  --rail-active-bg: rgba(255, 255, 255, 0.62);
  --rail-rule: rgba(18, 63, 117, 0.26);

  --band-bg: var(--surface);
  --band-ink: var(--ink);
  --band-strong: var(--navy);
  --band-quiet: rgba(34, 45, 56, 0.72);
  --band-rule: rgba(18, 63, 117, 0.28);
  --band-rule-soft: rgba(18, 63, 117, 0.12);
  --band-bar: var(--navy);
  --band-edge: 1px solid var(--rail-rule);
}

/* The second look: the command centre as an operations tool rather than a
   corporate page. Same palette, different surfaces. */
[data-theme="deep"] {
  --rail-bg: var(--navy-deep);
  --rail-ink: rgba(231, 237, 246, 0.85);
  --rail-ink-quiet: rgba(231, 237, 246, 0.75);
  --rail-hover-bg: rgba(255, 255, 255, 0.07);
  --rail-active-bg: rgba(255, 255, 255, 0.11);
  --rail-rule: rgba(255, 255, 255, 0.15);

  --band-bg: var(--navy);
  --band-ink: #e7edf6;
  --band-strong: #ffffff;
  --band-quiet: rgba(231, 237, 246, 0.7);
  --band-rule: rgba(231, 237, 246, 0.28);
  --band-rule-soft: rgba(231, 237, 246, 0.14);
  --band-bar: rgba(231, 237, 246, 0.55);
  --band-edge: 0;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.55 var(--ui);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: 40px; line-height: 1.04; }
h2 { font-size: 28px; line-height: 1.12; }
h3 { font-size: 21px; line-height: 1.18; }
p { margin: 0 0 0.8em; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 20;
}
.skip:focus { left: 0; }

/* ---------- the rail ---------- */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  background: var(--rail-bg);
  color: var(--rail-ink);
  border-right: 1px solid var(--rail-rule);
  display: flex;
  flex-direction: column;
  padding: 0 0 22px;
  z-index: 10;
}

/* The lockup is supplied as artwork with its own blue gradient, so it sits as a
   plate across the full width of the rail rather than floating on it. */
.mark { display: block; margin-bottom: 22px; }
.mark img { display: block; width: 100%; height: auto; }

.rail-powered { display: block; width: 100%; height: auto; margin-bottom: 14px; opacity: 0.85; }

.rail-nav { list-style: none; margin: 0; padding: 0; }
.rail-nav a {
  display: block;
  padding: 9px 24px 9px 21px;
  border-left: 3px solid transparent;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--rail-ink-quiet);
}
.rail-nav a:hover { color: var(--rail-ink); background: var(--rail-hover-bg); }
.rail-nav a[aria-current] {
  color: var(--rail-ink);
  border-left-color: var(--periwinkle);
  background: var(--rail-active-bg);
}

.rail-foot {
  margin-top: auto;
  padding: 20px 24px 0;
  border-top: 1px solid var(--rail-rule);
  font-size: 12px;
}
.rail-foot a { display: inline-block; margin-right: 14px; color: var(--rail-ink-quiet); }

/* ---------- page furniture ---------- */

main { margin-left: var(--rail-w); min-height: 100vh; }

.page {
  padding: 34px var(--gutter) 64px;
  max-width: var(--measure);
}

.page-head { margin-bottom: 26px; }
.page-head p { max-width: 62ch; color: var(--pewter); margin: 8px 0 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--rule);
}
.panel-head h2, .panel-head h3 { font-size: 21px; }
.panel-note { color: var(--pewter); font-size: 13px; }
.panel-body { padding: 18px 20px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
}

.empty { color: var(--pewter); font-size: 13px; padding: 18px 20px; }

/* ---------- the horizon ---------- */

.horizon {
  background: var(--band-bg);
  color: var(--band-ink);
  border-bottom: var(--band-edge);
  padding: 30px var(--gutter) 0;
  margin: 0 0 26px;
}

.horizon-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.horizon-head h1 { color: var(--band-strong); font-size: 40px; }
.horizon-head p { color: var(--band-quiet); margin: 6px 0 0; font-size: 15px; }

.horizon-alarm {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  color: #fff;
  background: var(--flag);
  border: 1px solid var(--flag);
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
}
.horizon-alarm b { font-size: 17px; font-weight: 600; }

.horizon-plot {
  position: relative;
  height: 206px;
  margin-top: 22px;
}
.horizon-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80px;
  border-bottom: 1px solid var(--band-rule);
}

/* Months are drawn as faint full-height guides with the label at the top, so the
   whole area under the axis belongs to the deadlines themselves. */
.horizon-month {
  position: absolute;
  top: 0;
  bottom: 80px;
  border-left: 1px solid var(--band-rule-soft);
  padding-left: 7px;
  font-size: 12px;
  color: var(--band-bar);
}
.horizon-now {
  position: absolute;
  top: 0;
  bottom: 80px;
  left: 0;
  border-left: 2px solid var(--band-strong);
  padding-left: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--band-strong);
  white-space: nowrap;
}

.stem {
  position: absolute;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transform: translateX(-50%);
  transform-origin: bottom center;
}
.stem-count {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  color: var(--band-strong);
  margin-bottom: 6px;
}
.stem-bar {
  width: 3px;
  flex: 1;
  background: var(--band-bar);
}
.stem:hover .stem-bar { background: var(--band-strong); }
.stem-near .stem-bar { width: 5px; background: var(--gold); }
.stem-near .stem-count { color: var(--periwinkle); }
.stem:hover .stem-count { color: var(--band-strong); }

.stem-label {
  position: absolute;
  top: calc(100% + 14px);
  width: 138px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--band-quiet);
}
.stem-label b { display: block; font-weight: 500; color: var(--band-strong); }
.anchor-mid .stem-label { left: 50%; transform: translateX(-50%); text-align: center; }
.anchor-start .stem-label { left: 0; text-align: left; }
.anchor-end .stem-label { right: 0; text-align: right; }

.horizon-head,
.horizon-plot,
.horizon-key { max-width: var(--measure-inner); }

.horizon-key {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  padding: 16px 0 20px;
  border-top: 1px solid var(--band-rule-soft);
  margin-top: 8px;
  font-size: 13px;
  color: var(--band-quiet);
}
.horizon-key a { color: var(--band-strong); }

/* ---------- ledger (counters) ---------- */

.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger li:last-child { border-bottom: 0; padding-bottom: 0; }
.ledger-label { font-size: 13px; color: var(--pewter); }
.ledger-value { font-family: var(--display); font-size: 28px; line-height: 1; }
.ledger-late .ledger-value { color: var(--flag); }
.ledger-won .ledger-value { color: var(--gold); }

.strike {
  padding: 16px 20px;
  border-top: 1px solid var(--rule);
  background: var(--wash);
}
.strike-value { font-family: var(--display); font-size: 56px; line-height: 1; }
.strike p { margin: 4px 0 0; font-size: 13px; color: var(--pewter); }

/* ---------- tables and the tracker ---------- */

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--pewter);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.table tbody tr:hover { background: var(--wash); }
.table .num { text-align: right; }
.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }

/* The left rule on each row encodes where the entry sits in the process,
   so state is readable down the column without reading a single word. */
.rail-cell { border-left: 3px solid transparent; }
.fam-scoping { border-left-color: var(--pewter); }
.fam-writing { border-left-color: var(--navy); }
.fam-filed { border-left-color: #4d7ab5; }
.fam-placed { border-left-color: var(--gold); }
.fam-closed { border-left-color: var(--band-rule-soft); }

.when { white-space: nowrap; font-weight: 600; font-size: 13px; }
.when::before {
  content: "\25C2";
  display: inline-block;
  margin-right: 7px;
  font-size: 11px;
  vertical-align: 1px;
}
.when-past { color: var(--flag); }
.when-near { color: var(--gold-text); }
.when-far { color: var(--pewter); font-weight: 500; }
.when-none { color: var(--pewter); font-weight: 400; }
.when-none::before { content: ""; margin: 0; }

.brand { font-weight: 600; }
.muted { color: var(--pewter); }
.small { font-size: 13px; }

.state { font-size: 13px; }
.medal {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6d5423;
  background: rgba(185, 143, 62, 0.16);
  border: 1px solid rgba(185, 143, 62, 0.4);
  padding: 1px 8px 2px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  padding-bottom: 8px;
}

/* ---------- filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}
.chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--navy);
  font-size: 13px;
  text-decoration: none;
  border-radius: 2px;
}
.chip:hover { border-color: var(--navy); }
.chip b { font-weight: 600; }
.chip-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip-count { color: var(--pewter); margin-left: 6px; }
.chip-on .chip-count { color: rgba(255, 255, 255, 0.6); }

select, input[type="text"] {
  font: 400 13px var(--ui);
  padding: 5px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--navy);
}

.button {
  font: 500 13px var(--ui);
  padding: 7px 14px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
}
.button:hover { background: #26497f; }
.button-quiet { background: transparent; color: var(--navy); }
.button-quiet:hover { background: var(--wash); }

/* ---------- entry detail ---------- */

.detail-head {
  background: var(--band-bg);
  color: var(--band-ink);
  border-bottom: var(--band-edge);
  padding: 28px var(--gutter) 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
}
.detail-head h1 { color: var(--band-strong); }
.detail-head .crumb { color: var(--band-quiet); font-size: 13px; text-decoration: none; }
.detail-head .meta { color: var(--band-quiet); font-size: 13px; margin: 10px 0 0; }
.detail-clock { text-align: right; }
.detail-clock .value { font-family: var(--display); font-size: 56px; line-height: 0.92; color: var(--band-strong); }
.detail-clock .value-past { color: var(--flag-deep); }
.detail-clock .value-near { color: var(--gold-text); }
.detail-clock .label { font-size: 13px; color: var(--band-quiet); }

/* The pipeline genuinely is a sequence, so it is the one thing that gets a
   numbered, ordered track. Nothing else in the interface is numbered. */
.track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.track li {
  flex: 1 1 108px;
  padding: 12px 12px 14px;
  border-top: 3px solid var(--rule);
  position: relative;
}
.track .step { font-size: 12px; color: var(--pewter); display: block; margin-bottom: 3px; }
.track .name { font-size: 13px; line-height: 1.25; color: var(--pewter); }
.track .done { border-top-color: var(--navy); }
.track .done .name { color: var(--navy); }
.track .now { border-top-color: var(--gold); background: rgba(185, 143, 62, 0.07); }
.track .now .name { color: var(--navy); font-weight: 600; }
.track .now .step { color: var(--gold); font-weight: 600; }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.facts li:last-child { border-bottom: 0; }
.facts dt, .facts .k { color: var(--pewter); }
.facts .v { text-align: right; font-weight: 500; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--rule-strong); }
.timeline li { position: relative; padding: 0 0 16px 16px; font-size: 13px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--surface);
  border: 1px solid var(--navy);
  border-radius: 50%;
}
.timeline li:first-child::before { background: var(--gold); border-color: var(--gold); }
.timeline time { color: var(--pewter); display: block; font-size: 12px; }

.move { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- drafting review ---------- */

.answer { border-bottom: 1px solid var(--rule); padding: 20px; }
.answer:last-child { border-bottom: 0; }
.answer-q {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  margin-bottom: 10px;
}
.answer-q h3 { font-family: var(--ui); font-size: 15px; font-weight: 600; line-height: 1.35; }
.answer-text {
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
  margin: 0 0 14px;
  white-space: pre-wrap;
}
.answer-foot { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 13px; }

/* Award forms are won and lost on word limits, so the limit is a physical
   gauge rather than a number in brackets. */
.gauge { width: 132px; height: 6px; background: rgba(18, 63, 117, 0.12); position: relative; }
.gauge span { position: absolute; inset: 0 auto 0 0; background: var(--navy); }
.gauge-over span { background: var(--flag); }
.gauge-over + .gauge-note { color: var(--flag); font-weight: 600; }
.gauge-note { color: var(--pewter); }

.approved { color: #2c5d9b; font-weight: 600; }
.pending { color: var(--pewter); }

.progress { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.progress-bar { flex: 1; height: 5px; background: rgba(18, 63, 117, 0.12); }
.progress-bar span { display: block; height: 100%; background: var(--gold); }

/* ---------- manifest ---------- */

.manifest { border-collapse: collapse; width: 100%; }
.manifest th { text-align: left; font-size: 12px; color: var(--pewter); padding: 10px 14px; border-bottom: 1px solid var(--rule-strong); }
.manifest td { padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 13px; }
.manifest tbody tr:hover { background: var(--wash); }
.line { font-size: 13px; }
.line-spec { color: var(--pewter); font-size: 12px; }
.docs { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.docs li { color: var(--pewter); }
.docs .have { color: var(--navy); }
.docs .want { color: var(--flag); }

/* ---------- competitor matrix ---------- */

.matrix { border-collapse: collapse; width: 100%; }
.matrix th {
  font-size: 12px;
  font-weight: 500;
  color: var(--pewter);
  padding: 10px 6px;
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
  text-align: center;
}
.matrix th.row-head { text-align: left; width: 30%; padding-left: 14px; }
.matrix td { padding: 5px 3px; border-bottom: 1px solid var(--rule); text-align: center; }
.matrix td.row-head { text-align: left; padding: 11px 14px; font-size: 13px; }
.matrix .cell {
  display: block;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  border-radius: 2px;
}
.matrix .cell-0 { color: rgba(18, 63, 117, 0.22); font-weight: 400; }
.matrix .ours { color: var(--gold); }
.matrix .absent { color: var(--flag); font-weight: 500; font-size: 12px; }
.cell-sub {
  display: block;
  font-size: 11px;
  color: var(--pewter);
  padding-bottom: 6px;
}
.matrix tbody tr:hover { background: var(--wash); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed .src { color: var(--pewter); font-size: 12px; }

.notice {
  border-left: 3px solid var(--gold);
  background: rgba(185, 143, 62, 0.08);
  padding: 14px 18px;
  font-size: 13px;
  margin-bottom: 20px;
  max-width: 78ch;
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- one orchestrated moment ----------
   The stems rise left to right on load: the drawing builds along the time axis
   it represents. Nothing else on the page animates on arrival. */

@media (prefers-reduced-motion: no-preference) {
  .stem {
    animation: rise 520ms cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
  @keyframes rise {
    from { transform: translateX(-50%) scaleY(0); opacity: 0; }
    to { transform: translateX(-50%) scaleY(1); opacity: 1; }
  }
  .horizon-now { animation: sweep 420ms ease-out backwards; }
  @keyframes sweep {
    from { transform: scaleY(0); transform-origin: bottom; }
  }
  .flash { animation: flash 1.1s ease-out; }
  @keyframes flash {
    0% { background: rgba(185, 143, 62, 0.38); }
    100% { background: transparent; }
  }
}

/* Between tablet and desktop the plot is too narrow for a 138px label to sit
   under a stem without hitting its neighbour, so the labels drop out and the
   space they reserved goes with them. The stems still carry their counts, and
   hovering one still names the award. */
@media (max-width: 1180px) {
  .stem-label { display: none; }
  .horizon-plot { height: 168px; }
  .horizon-axis,
  .horizon-month,
  .horizon-now,
  .stem { bottom: 30px; }
}

/* ---------- narrow screens ---------- */

@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  :root { --gutter: 18px; }
  main { margin-left: 0; }
  .rail {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 18px;
    gap: 6px 20px;
  }
  .mark { margin: 0; width: 190px; flex: 0 0 auto; }
  .rail-nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .rail-nav a { padding: 6px 10px; border-left: 0; border-bottom: 3px solid transparent; }
  .rail-nav a[aria-current] { border-left: 0; border-bottom-color: var(--gold); }
  .rail-foot { margin: 0; padding: 0; border: 0; width: 100%; }
  .rail-powered { display: none; }
  h1, .horizon-head h1 { font-size: 28px; }
  /* No room for labels under the axis, so the plot loses the space they needed. */
  .horizon-plot { height: 148px; }
  .horizon-axis, .horizon-month, .horizon-now, .stem { bottom: 26px; }
  .horizon-month, .horizon-now { font-size: 11px; padding-left: 5px; }
  .now-date { display: none; }
  .stem-label { display: none; }
  .stem-count { font-size: 15px; }
  .horizon-key { gap: 6px 18px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .detail-clock { text-align: left; }
  .detail-clock .value { font-size: 40px; }
  .table-scroll { overflow-x: auto; }
  .table, .manifest, .matrix { min-width: 640px; }
}
@media (max-width: 700px) {
  .podium-row { grid-template-columns: 1fr; gap: 4px; }
  .podium-count { order: -1; }
}

/* ---- Competitors: tiles, podium, medal feed ------------------------------
   Gold belongs to our numbers and our bar; rivals stay navy-quiet.
   Palette pair #2f4f80 / #b98f3e validated (CVD dE 20.2, contrast >=3:1). */
.intel-tiles { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 980px) { .intel-tiles { grid-template-columns: 1fr 1fr; } }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px 16px; }
.tile-value { display: block; font-family: var(--display); font-size: 40px; line-height: 1; }
.tile-value.ours { color: var(--gold); }
.tile-label { display: block; margin-top: 7px; font-size: 13px; color: var(--pewter); }
.tile-label strong { color: var(--navy); font-weight: 600; }
.tile-hero .tile-value { font-size: 56px; }
.podium { display: flex; flex-direction: column; gap: 6px; }
.podium-row { display: grid; grid-template-columns: 232px 1fr 132px; align-items: center; gap: 14px; padding: 3px 0; }
.podium-name { font-size: 13px; line-height: 1.25; }
.podium-track { background: var(--wash); border-radius: 4px; height: 24px; }
.podium-bar { display: block; height: 100%; background: #2f4f80; border-radius: 0 4px 4px 0; min-width: 3px; transition: filter 0.15s; }
.podium-row.us .podium-bar { background: var(--gold); }
.podium-row.us .podium-name { font-weight: 600; }
.podium-row:hover .podium-bar { filter: brightness(1.2); }
.podium-us-chip { font: 700 11px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid currentColor; border-radius: 4px; padding: 2px 5px; margin-left: 6px; vertical-align: 1px; }
.podium-count { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; text-align: right; }
.podium-gold { color: var(--pewter); font-weight: 400; font-size: 12px; }
.podium-table { margin-top: 16px; }
.podium-table summary { font-size: 12px; color: var(--pewter); cursor: pointer; }
.podium-table table { margin-top: 10px; }
.medal-feed { list-style: none; margin: 0; padding: 0; }
.medal-feed li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.medal-feed li:last-child { border-bottom: 0; }
.medal-chip { flex: 0 0 auto; margin-top: 1px; font: 600 11px/1 var(--ui); letter-spacing: 0.03em; color: var(--pewter); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px 9px; }
.medal-chip.gold { color: var(--gold); border-color: var(--gold); }
.medal-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.medal-what { font-weight: 500; }
.medal-where { color: var(--pewter); font-size: 12px; }

/* ---------- award score ----------
   0-100, how much an award is worth entering. Three bands, so a reader ranks
   two awards without doing arithmetic. Deliberately not the medal gold: this
   is a judgement about the award, not a result we won. */

.score {
  display: inline-block;
  min-width: 36px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 600 12px/1 var(--ui);
  text-align: center;
}
.score-high { background: var(--navy); color: #fff; }
.score-mid { background: rgba(118, 160, 205, 0.32); color: var(--navy); border-color: var(--band-rule-soft); }
.score-low { color: var(--pewter); border-color: var(--rule-strong); }
.score-unscored { color: var(--pewter); border-color: transparent; font-weight: 400; }
.th-score { text-align: center; }

/* ---------- brand marks ----------
   The official SVG lockup, in the colourway the current look needs. */

/* Transparent artwork now, so the marks sit on the rail rather than on a
   plate of their own. The lockup's wordmark is white, which is why the rail
   stays a coloured surface in both looks and never goes white. */
.mark { display: block; padding: 20px 20px 4px; }
.mark img { display: block; width: 100%; height: auto; }

.rail-agency { display: block; width: 100%; height: auto; margin-bottom: 12px; }

.look-toggle {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 7px 10px;
  font: 500 12px/1 var(--ui);
  color: var(--rail-ink-quiet);
  background: transparent;
  border: 1px solid var(--rail-rule);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
}
.look-toggle:hover { background: var(--rail-hover-bg); }

/* ---------- submission review ----------
   Thirteen mostly one-line answers, so the reviewer sees the whole submission
   at once and spends their attention on the rows that need it rather than
   scrolling past eleven that do not. */

.review td { vertical-align: top; padding-top: 13px; padding-bottom: 13px; }
.review-q { width: 30%; }
.review-label { display: block; font-weight: 600; font-size: 14px; }
.review-label em { color: var(--flag); font-style: normal; }
.review-help {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pewter);
}
.review-a { width: 34%; font-size: 15px; }
.review-prose { white-space: pre-wrap; line-height: 1.55; }
.review-a .gauge { margin-top: 8px; }
.review-a .gauge-note { display: block; margin-top: 4px; font-size: 12px; }
.review td form { margin: 0; }
.review .button { white-space: nowrap; }

/* An answer the agent could not source is the only thing here worth stopping
   for, so it is the only thing that gets a colour. */
.review .needs-you td:first-child { box-shadow: inset 3px 0 0 var(--flag); }
.review .needs-you { background: rgba(178, 58, 43, 0.045); }
.needs-you-note { color: var(--flag); font-weight: 500; }

/* RIC is the agent's own mark, so the Submissions screen is titled with it
   rather than with the word. The chrome artwork reads on the page's off-white
   in both looks, because the page ground does not change between them. */
.ric-mark { margin: 0 0 4px; line-height: 0; }
.ric-mark img { display: block; width: 320px; max-width: 100%; height: auto; }

/* ---------- landing ----------
   The deck's notched frame, with the four quadrants around the mark. Each
   corner is a disc filled in the page colour and bordered on its inner two
   sides, so it cuts a concave curve out of the rectangle rather than adding
   one to it. */

.landing { max-width: 1180px; padding-top: 48px; }
.landing-eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-mid);
}
.landing-title {
  font-size: 40px;
  line-height: 1.1;
  max-width: 20ch;
  margin: 0 0 34px;
  color: var(--navy);
}

.frame {
  --corner: 30px;
  position: relative;
  border: 1px solid var(--navy);
  padding: 46px 40px;
}
.frame-corner {
  position: absolute;
  width: calc(var(--corner) * 2);
  height: calc(var(--corner) * 2);
  background: var(--ground);
  border: 1px solid transparent;
  border-radius: 50%;
}
.frame-tl { top: calc(var(--corner) * -1); left: calc(var(--corner) * -1); border-bottom-color: var(--navy); border-right-color: var(--navy); }
.frame-tr { top: calc(var(--corner) * -1); right: calc(var(--corner) * -1); border-bottom-color: var(--navy); border-left-color: var(--navy); }
.frame-bl { bottom: calc(var(--corner) * -1); left: calc(var(--corner) * -1); border-top-color: var(--navy); border-right-color: var(--navy); }
.frame-br { bottom: calc(var(--corner) * -1); right: calc(var(--corner) * -1); border-top-color: var(--navy); border-left-color: var(--navy); }

.quadrants {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 250px) 1fr;
  grid-template-rows: auto auto;
  gap: 30px 34px;
  align-items: stretch;
}
.quadrant-1 { grid-area: 1 / 1; }
.quadrant-2 { grid-area: 1 / 3; }
.quadrant-3 { grid-area: 2 / 1; }
.quadrant-4 { grid-area: 2 / 3; }
.hub { grid-area: 1 / 2 / 3 / 3; }

.quadrant {
  display: block;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
}
.quadrant:hover { border-color: var(--navy); }
.quadrant-number {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  color: var(--brand-mid);
  margin-bottom: 8px;
}
.quadrant-name {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.15;
  color: var(--navy);
}

.hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  color: var(--navy);
}
.hub-disc {
  display: block;
  width: 100%;
  max-width: 196px;
  aspect-ratio: 1;
  padding: 14px;
  background: var(--navy);
  border-radius: 50%;
}
.hub-disc img { display: block; width: 100%; height: auto; }
.hub-go { font-size: 13.5px; font-weight: 600; }
.hub:hover .hub-go { text-decoration: underline; }

.landing-foot { margin: 26px 0 0; font-size: 14px; color: var(--pewter); }
.landing-foot a { margin-left: 8px; color: var(--navy); }

@media (max-width: 900px) {
  .landing-title { font-size: 28px; }
  .frame { --corner: 20px; padding: 30px 20px; }
  .quadrants { grid-template-columns: 1fr; }
  .quadrant-1, .quadrant-2, .quadrant-3, .quadrant-4, .hub { grid-area: auto; }
  .hub { order: -1; }
  .hub-disc { max-width: 140px; }
}

/* The landing runs without the rail, so it centres on the page instead of
   sitting beside one. */
.main-full { margin-left: 0; }
.landing { margin: 0 auto; text-align: center; }
.landing-title { margin-left: auto; margin-right: auto; }
.frame { text-align: left; }

/* ---------- sign in ---------- */

.signin { max-width: 360px; margin: 0 auto; padding-top: 72px; text-align: center; }
.signin-mark { display: block; width: 120px; height: auto; margin: 0 auto 20px; background: var(--navy); border-radius: 50%; padding: 10px; }
.signin-title { font-size: 28px; color: var(--navy); margin: 0 0 26px; }
.signin-form { text-align: left; }
.signin-form label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--navy); }
.signin-form input[type="text"], .signin-form input[type="password"] {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: 9px 11px;
  font: 400 15px var(--ui);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
}
.signin-form .button { width: 100%; padding: 11px; font-size: 15px; }
.signin-error {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--flag);
  background: rgba(178, 58, 43, 0.06);
  font-size: 13.5px;
  color: var(--flag-deep);
}
.signin-foot { margin-top: 22px; font-size: 13px; color: var(--pewter); }