/* ==========================================================================
   Margins Dealer Portal — global stylesheet

   Derived from the printed programme documents (MRG-DP-2026-01,
   MRG-WS-2026-01, MRG-PR-2026-01), not invented. Every colour below was
   sampled from rendered pages of those PDFs.

   One stylesheet, no bundler — matching Margins-OS-V2's house convention.
   ========================================================================== */

:root {
  /* --- Palette, sampled from the documents ------------------------------ */
  --paper:  #ffffff;   /* page ground. White, not cream */
  --ink:    #111111;   /* cover, section bars, code pills, table figures */
  --ink-2:  #575757;   /* secondary prose */
  --ink-3:  #8a8a8a;   /* micro-labels, column headers */
  --panel:  #f6f6f6;   /* product image ground */
  --shade:  #f2f2f2;   /* the shaded best-tier column */
  --rule:   #d8d8d8;   /* hairlines */
  --rule-2: #eaeaea;   /* lighter row separators */
  --alert:  #c51717;   /* the ONLY colour in the system. Documents use it
                          for CONFIDENTIAL; the portal uses it for states
                          that change what a dealer pays. Nothing else. */
  --alert-bg: #fdf4f4;

  /* --- Type -------------------------------------------------------------
     The documents are set in a grotesk and a mono. System stacks match them
     closely, cost no network round-trip, and render instantly on a slow
     connection — which matters more here than a signature typeface. */
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter,
          "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
          Menlo, Consolas, monospace;

  --fs-micro: 10.5px;  /* tracked micro-labels, as printed */
  --fs-meta:  12px;
  --fs-body:  13.5px;
  --fs-sect:  17px;    /* section headings */
  --fs-lg:    22px;
  --fs-fig:   40px;    /* the big numeral */
  --fs-fig-l: 56px;

  --tracking: 0.14em;  /* the documents' micro-label tracking */

  /* --- Space ------------------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --nav-w: 232px;
}

/* The documents have no rounded corners anywhere. Neither does this. */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-body)/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ==========================================================================
   Micro-label — the documents' most-used device.
   Tracked uppercase mono, grey. Carries the NAME of a value; the value
   itself always sits beside or beneath it.
   ========================================================================== */
.ml {
  font: var(--fs-micro)/1.4 var(--mono);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ml--ink { color: var(--ink); }

/* ==========================================================================
   Shell
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; }

.nav {
  border-right: 1px solid var(--rule);
  padding: var(--sp-5) 0 var(--sp-6);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.wordmark { padding: 0 var(--sp-5) var(--sp-7); }
.wordmark b {
  display: block;
  font: 300 var(--fs-lg)/1 var(--sans);
  letter-spacing: 0.22em;
}
.wordmark span {
  display: block; margin-top: 7px;
  font: var(--fs-micro)/1 var(--mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}

.nav-group { margin-bottom: var(--sp-5); }
.nav-group > .ml { padding: 0 var(--sp-5) var(--sp-2); display: block; }

.nav a {
  display: block; padding: 7px var(--sp-5);
  color: var(--ink-2);
  border-left: 2px solid transparent;
}
.nav a:hover { background: var(--panel); text-decoration: none; }
.nav a[aria-current="page"] {
  color: var(--ink); border-left-color: var(--ink); font-weight: 500;
}

.nav-foot { margin-top: auto; padding: var(--sp-4) var(--sp-5) 0; border-top: 1px solid var(--rule); }
.nav-foot b { display: block; font-weight: 500; font-size: var(--fs-meta); }

.main { min-width: 0; padding: var(--sp-5) var(--sp-7) var(--sp-8); }
.main > header { display: flex; justify-content: space-between;
                 align-items: flex-start; gap: var(--sp-5);
                 padding-bottom: var(--sp-5); }
h1 { margin: 0; font: 500 var(--fs-lg)/1.2 var(--sans); }

/* Document meta block — top right, exactly as the price list prints it */
.docmeta { text-align: right; display: grid; gap: 3px; }
.docmeta div { font: var(--fs-micro)/1.4 var(--mono); letter-spacing: 0.1em;
               text-transform: uppercase; color: var(--ink-3); }
.docmeta b { color: var(--ink); font-weight: 500; }
.docmeta .is-alert, .docmeta .is-alert b { color: var(--alert); }

/* ==========================================================================
   Section bar — black, white tracked mono. The documents' divider.
   ========================================================================== */
.bar {
  background: var(--ink); color: var(--paper);
  padding: 9px var(--sp-4); margin: var(--sp-7) 0 var(--sp-5);
  font: var(--fs-micro)/1.4 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.main > .bar:first-of-type { margin-top: var(--sp-5); }

/* Section heading row: name left, context right */
.sect { display: flex; align-items: baseline; gap: var(--sp-4);
        border-bottom: 1px solid var(--ink); padding-bottom: var(--sp-2);
        margin: var(--sp-6) 0 var(--sp-4); }
.sect h2 { margin: 0; font: 700 var(--fs-sect)/1.2 var(--sans);
           text-transform: uppercase; letter-spacing: 0.02em; }
.sect .ml { margin-left: auto; }

/* ==========================================================================
   Code pill — black, white mono. For SKU codes and bands.
   ========================================================================== */
.pill {
  display: inline-block; white-space: nowrap; background: var(--ink); color: var(--paper);
  padding: 4px 9px;
  font: var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.12em;
}
.pill--out { background: transparent; color: var(--ink);
             border: 1px solid var(--ink); }

/* ==========================================================================
   Figure — micro-label, large numeral, caption. The documents' price block.
   ========================================================================== */
.fig { border: 1px solid var(--ink); padding: var(--sp-4) var(--sp-5); }
.fig .n { display: block; font: 500 var(--fs-fig)/1 var(--sans);
          margin: var(--sp-3) 0 var(--sp-1); font-variant-numeric: tabular-nums; }
.fig .cap { font-size: var(--fs-meta); color: var(--ink-2); }
.fig--lead .n { font-size: var(--fs-fig-l); }
.fig--quiet { border-color: var(--rule); }

.figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
          gap: var(--sp-4); }

/* ==========================================================================
   Dotted leader rows — the profile pages' spec treatment.
   Label left, value right, joined by a dotted rule.
   ========================================================================== */
.leaders { display: grid; gap: 0; }
.leaders > div {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: var(--sp-2);
  padding: 7px 0; border-bottom: 1px dotted var(--rule);
}
.leaders dt, .leaders .k {
  font: var(--fs-micro)/1.4 var(--mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-3);
}
.leaders .fill { border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.leaders dd, .leaders .v {
  margin: 0; font: var(--fs-meta)/1.4 var(--mono); color: var(--ink);
}

/* ==========================================================================
   Data table — mono tabular figures, hairline rules, shaded best column.
   ========================================================================== */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { padding: 9px var(--sp-3); text-align: right; }
.ptable th:first-child, .ptable td:first-child,
.ptable th.l, .ptable td.l { text-align: left; }
.ptable thead th {
  font: var(--fs-micro)/1.5 var(--mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  border-bottom: 1px solid var(--ink); vertical-align: bottom;
}
.ptable thead th b { display: block; color: var(--ink); font-weight: 500; }
.ptable tbody td { border-bottom: 1px solid var(--rule-2);
                   font: var(--fs-meta)/1.5 var(--mono); }
.ptable tbody td.name { font-family: var(--sans); font-size: var(--fs-body);
                        color: var(--ink-2); }
.ptable tbody td.code { color: var(--ink); font-weight: 500; white-space: nowrap; }
.ptable tbody tr:hover td { background: #fafafa; }

/* The shaded column: the rate this account actually gets. */
.ptable .is-yours { background: var(--shade); }
.ptable thead .is-yours { background: var(--shade); color: var(--ink); }
.ptable tbody td.is-yours { font-weight: 500; }

.tnote { font-size: var(--fs-meta); color: var(--ink-3);
         margin: var(--sp-3) 0 0; max-width: 78ch; }

/* ==========================================================================
   Notice — the documents' one colour, used only where money changes.
   ========================================================================== */
.notice { border-left: 2px solid var(--ink); background: var(--panel);
          padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0;
          font-size: var(--fs-meta); color: var(--ink-2); }
.notice b { color: var(--ink); font-weight: 500; }
.notice--alert { border-left-color: var(--alert); background: var(--alert-bg); }
.notice--alert b { color: var(--alert); }

/* ==========================================================================
   Catalog
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
         gap: var(--sp-5); }
.card { border: 1px solid var(--rule); display: flex; flex-direction: column; }
.card:hover { border-color: var(--ink); }
.card .art { background: var(--panel); aspect-ratio: 4/3; position: relative;
             display: grid; place-items: center; }
.card .art .pill { position: absolute; left: 0; bottom: 0; }
/* .band also matches the rule above, so it inherits left/bottom. Unset them
   explicitly or the element is pinned on all four edges and fills the panel. */
.card .art .band { left: auto; bottom: auto; right: 0; top: 0; }
.card .body { padding: var(--sp-4); display: flex; flex-direction: column;
              gap: var(--sp-2); flex: 1; }
.card h3 { margin: 0; font: 700 var(--fs-body)/1.3 var(--sans);
           text-transform: uppercase; letter-spacing: 0.02em; }
.card p { margin: 0; font-size: var(--fs-meta); color: var(--ink-2); }
.card .price { margin-top: auto; padding-top: var(--sp-3);
               border-top: 1px solid var(--rule-2);
               display: flex; align-items: baseline; justify-content: space-between; }
.card .price .n { font: 500 var(--fs-lg)/1 var(--sans); }
.card .price .was { font: var(--fs-meta)/1 var(--mono); color: var(--ink-3);
                    text-decoration: line-through; }

/* Profile cross-section placeholder — a drawn reveal, not a grey box */
.xsec { width: 112px; height: 78px; }
.xsec rect { fill: var(--ink); }
.xsec .gap { fill: var(--panel); }

/* ==========================================================================
   Quote builder
   ========================================================================== */
.builder { display: grid; grid-template-columns: 1fr 312px;
           gap: var(--sp-7); align-items: start; }
.qty { width: 74px; font: var(--fs-meta) var(--mono); text-align: right;
       padding: 5px 7px; border: 1px solid var(--rule); background: var(--paper);
       color: var(--ink); }
.qty:focus { border-color: var(--ink); outline: none; }

.summary { border: 1px solid var(--ink); position: sticky; top: var(--sp-5); }
.summary .head { background: var(--ink); color: var(--paper);
                 padding: 9px var(--sp-4);
                 font: var(--fs-micro)/1.4 var(--mono);
                 letter-spacing: 0.2em; text-transform: uppercase; }
.summary .body { padding: var(--sp-4); }
.summary .total { display: flex; align-items: baseline;
                  justify-content: space-between; padding-top: var(--sp-3);
                  margin-top: var(--sp-3); border-top: 1px solid var(--ink); }
.summary .total .n { font: 500 28px/1 var(--sans); }

/* The tier ladder in the summary: where the account sits, and what is next. */
.ladder { display: grid; gap: 0; margin: var(--sp-3) 0; }
.ladder > div { display: grid; grid-template-columns: auto 1fr auto;
                gap: var(--sp-2); align-items: baseline; padding: 6px 0;
                border-bottom: 1px dotted var(--rule);
                font: var(--fs-meta)/1.3 var(--mono); color: var(--ink-3); }
.ladder .is-at { color: var(--ink); }
.ladder .is-at .mark { font-weight: 700; }
.ladder .mark { width: 1ch; }

/* The one orchestrated moment in the product: the basket crosses a
   threshold, the account re-prices. Everything else here is still. */
@keyframes tier-change {
  0%   { background: var(--shade); }
  100% { background: transparent; }
}
.tier-changed { animation: tier-change 1100ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tier-changed { animation: none; }
}

/* ==========================================================================
   Responsive — the table is the thing that must survive
   ========================================================================== */
@media (max-width: 1080px) {
  .builder { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; flex-direction: row;
         flex-wrap: wrap; align-items: center; gap: var(--sp-3);
         border-right: 0; border-bottom: 1px solid var(--rule);
         padding: var(--sp-3) var(--sp-4); }
  .wordmark { padding: 0; }
  .nav-group { margin: 0; display: flex; gap: var(--sp-2); }
  .nav-group > .ml { display: none; }
  .nav a { padding: 4px var(--sp-2); border-left: 0; border-bottom: 2px solid transparent; }
  .nav a[aria-current="page"] { border-left: 0; border-bottom-color: var(--ink); }
  /* The account block must not eat the top of a phone screen: one line,
     name and sign-out side by side, tier dropped (it is on the rate card). */
  .nav-foot { margin: 0 0 0 auto; border: 0; padding: 0;
              display: flex; align-items: baseline; gap: var(--sp-3); }
  .nav-foot b { font-size: var(--fs-micro); }
  .nav-foot > .ml { display: none; }
  .nav-foot form { margin: 0 !important; }
  .main { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  .main > header { flex-direction: column; }
  .docmeta { text-align: left; }
  .tablewrap { overflow-x: auto; }
  .tablewrap .ptable { min-width: 620px; }
}

@media print {
  .nav, .qty { display: none; }
  .shell { grid-template-columns: 1fr; }
}