/* ============================================================
   Morrigan design system — variant B (Pine v2)
   Component patterns only. Every value is a token; the tokens
   themselves live in :root in ../styles.css, which must be loaded
   alongside this file. Prefix: mg-
   Source artifact: design/source-artifact.html
   ============================================================ */

/* Morrigan — component patterns. Loaded after tokens.css; every value is a token. Prefix: mg- */

.mg-page { background: var(--surface); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.mg-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.mg-measure { max-width: var(--measure); }

/* Focus — one ring for everything interactive */
.mg-btn:focus-visible, .mg-nav a:focus-visible, .mg-link:focus-visible, .mg-header__menu:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* Links */
.mg-link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 150ms; }
.mg-link:hover { text-decoration-thickness: 1.5px; }

/* Button */
.mg-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-4); min-height: 40px;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--radius-sm); border: var(--stroke-control) solid transparent; cursor: pointer;
  text-decoration: none; transition: background-color 150ms, border-color 150ms, color 150ms;
}
.mg-btn--primary { background: var(--pine); color: var(--on-pine); border-color: var(--pine); }
.mg-btn--primary:hover { background: color-mix(in srgb, var(--pine) 88%, var(--ink)); border-color: color-mix(in srgb, var(--pine) 88%, var(--ink)); }
.mg-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.mg-btn--secondary:hover { border-color: var(--ink); }
.mg-btn--quiet { background: transparent; color: var(--pine); border-color: transparent; padding-inline: var(--space-2); }
.mg-btn--quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.mg-btn[disabled], .mg-btn[aria-disabled="true"] { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }
.mg-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
.mg-header { background: var(--surface-raised); border-bottom: var(--stroke-hairline) solid var(--line); }
.mg-header__row { display: flex; align-items: center; justify-content: space-between; min-height: var(--space-7); gap: var(--space-4); }
.mg-header__logo { display: block; height: 32px; }
.mg-header__logo img { height: 32px; width: auto; display: block; }
.mg-nav { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.mg-nav a { color: var(--ink-secondary); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; padding-block: var(--space-1); border-bottom: 2px solid transparent; transition: color 150ms, border-color 150ms; }
.mg-nav a:hover { color: var(--ink); }
.mg-nav a[aria-current="true"] { color: var(--pine); border-bottom-color: var(--pine); }
.mg-header__menu { display: none; background: none; border: var(--stroke-control) solid var(--line-strong); border-radius: var(--radius-sm); width: 40px; height: 40px; color: var(--ink); }
.mg-sheet { background: var(--surface-raised); box-shadow: var(--shadow-sheet); border-top: var(--stroke-hairline) solid var(--line); padding: var(--space-4) var(--gutter); }
.mg-sheet .mg-nav { flex-direction: column; gap: var(--space-3); }

/* Section heading block */
.mg-section { padding-block: var(--space-7); }
.mg-section--sunken { background: var(--surface-sunken); }
.mg-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.mg-heading { font-family: var(--font-serif); font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); margin: 0; text-wrap: balance; }
.mg-heading--display { font-size: 44px; line-height: 50px; letter-spacing: -0.01em; }
/* Pine v2 adds an upper-case treatment for the hero heading. */
.mg-heading--caps { text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.mg-lead { font-family: var(--font-sans); font-size: 19px; line-height: 28px; color: var(--ink-secondary); margin: var(--space-5) 0 0; max-width: var(--measure); }
.mg-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--ink); margin: var(--space-6) 0 0; max-width: var(--measure); }
.mg-body + .mg-body { margin-top: var(--space-4); }

/* Stat tile */
.mg-stats { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
/* Four tiles: 2 x 2 rather than the 3 + 1 that auto-fit produced on tablets. */
@media (min-width: 480px)  { .mg-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mg-stats { grid-template-columns: repeat(4, 1fr); } }
.mg-stat { background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); }
.mg-stat__value { font-family: var(--font-serif); font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0; }
.mg-stat__value small { font-size: 22px; font-weight: 500; letter-spacing: 0; margin-left: 2px; }
.mg-stat__label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-secondary); margin: var(--space-2) 0 0; }

/* Card */
.mg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
/* Without an explicit rule auto-fit lays five cards out as 4 + 1. The artifact
   defines the 1024px case at the end of its stylesheet; the 768px step is ours. */
@media (min-width: 768px)  { .mg-cards--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .mg-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mg-card { background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); transition: border-color 150ms; }
.mg-card:hover { border-color: var(--line-strong); }
.mg-card__title { font-family: var(--font-serif); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); margin: 0; }
.mg-card__text { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-secondary); margin: var(--space-2) 0 0; }
.mg-card__meta { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }

/* Ladder (A → D) */
.mg-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; position: relative; }
/* The connector is a single absolute line, so it is only truthful when every
   step sits on one row. Below 1024px the ladder wraps and the line is hidden. */
.mg-ladder::before { content: none; }
@media (min-width: 1024px) {
  .mg-ladder { grid-template-columns: repeat(5, 1fr); }
  .mg-ladder::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: var(--stroke-control); background: var(--line-strong); }
}
.mg-ladder__step { position: relative; padding-top: var(--space-6); }
.mg-ladder__marker { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--surface); border: var(--stroke-control) solid var(--line-strong); color: var(--ink-secondary); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; display: grid; place-items: center; }
.mg-ladder__step[aria-current="step"] .mg-ladder__marker { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.mg-ladder__step--then .mg-ladder__marker { border-style: dashed; }
.mg-ladder__title { font-family: var(--font-serif); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); margin: 0; }
.mg-ladder__text { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-secondary); margin: var(--space-1) 0 0; }

/* Table */
.mg-table-wrap { overflow-x: auto; }
.mg-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
.mg-table caption { text-align: left; font-family: var(--font-serif); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); padding-bottom: var(--space-3); }
.mg-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); padding: var(--space-3); border-bottom: var(--stroke-hairline) solid var(--line-strong); white-space: nowrap; }
.mg-table td { padding: var(--space-3); border-bottom: var(--stroke-hairline) solid var(--line); vertical-align: top; }
.mg-table td.num, .mg-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-table tr:hover td { background: var(--surface-raised); }
.mg-table tfoot td { font-weight: 600; color: var(--ink); border-bottom: none; border-top: var(--stroke-hairline) solid var(--line-strong); }

/* Badge (status word with colour) */
.mg-badge { display: inline-block; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: var(--stroke-control) solid currentColor; background: transparent; }
.mg-badge--neutral { color: var(--ink-secondary); }
.mg-badge--realised { color: var(--moss); }
.mg-badge--pending { color: var(--ochre); }
.mg-badge--withdrawn { color: var(--brick); }

/* Note box */
.mg-note { background: var(--pine-soft); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); max-width: var(--measure); }
.mg-note strong { color: var(--pine); font-weight: 600; }

/* Footer */
.mg-footer { border-top: var(--stroke-hairline) solid var(--line); padding-block: var(--space-6); font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mg-footer__row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.mg-footer__mark { height: 24px; width: auto; display: block; }
.mg-footer a { color: var(--ink-secondary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mg-footer a:hover { color: var(--pine); }
.mg-footer__sep { color: var(--line-strong); }

/* Copy-e-mail confirmation */
.mg-copied { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pine); background: var(--pine-soft); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) { .mg-btn, .mg-nav a, .mg-card, .mg-link { transition: none; } }

.mg-section{padding-block:var(--space-7)}
@media (min-width:768px){.mg-section{padding-block:var(--space-8)}}
@media (min-width:1024px){.mg-section{padding-block:var(--space-9)}}
.mg-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.mg-header__logo,.mg-header__logo img{height:30px}
@media (min-width:768px){.mg-header__logo,.mg-header__logo img{height:36px}}
.mg-header__menu{display:inline-grid;place-items:center}
.mg-header__nav{display:none}
@media (min-width:768px){.mg-header__nav{display:block}.mg-header__menu{display:none}}
.mg-sheet[hidden]{display:none}
.mg-sheet .mg-nav a{display:block;border-bottom:none;font-size:16px;line-height:24px}

/* Tabbed carousel — the four "how we work" sections share one panel.
   Ported from the Pine v2 artifact; its rules referenced --slate, a token that
   variant B replaced with --pine, so the selected tab had no accent colour there. */
/* Tabbed panel */
.tabs{background:var(--surface-sunken);border-top:var(--stroke-hairline) solid var(--line);border-bottom:var(--stroke-hairline) solid var(--line)}
.tabs__bar{position:sticky;top:calc(var(--space-7) + env(safe-area-inset-top,0px));z-index:4;background:var(--surface-raised);border-bottom:var(--stroke-hairline) solid var(--line)}
.tabs__row{display:flex;align-items:stretch;justify-content:space-between;gap:var(--space-4);min-height:56px}
.tabs__list{display:flex;gap:var(--space-5);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
.tabs__list::-webkit-scrollbar{display:none}
@media (min-width:768px){.tabs__list{margin-inline:0;padding-inline:0}}
.tabs__tab{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;padding:var(--space-4) 0 calc(var(--space-4) - 2px);font-family:var(--font-sans);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.01em;color:var(--ink-secondary);cursor:pointer;white-space:nowrap;transition:color 150ms,border-color 150ms}
.tabs__tab:hover{color:var(--ink)}
.tabs__tab[aria-selected="true"]{color:var(--pine);border-bottom-color:var(--pine)}
.tabs__tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--radius-sm)}
.tabs__arrows{display:none;align-items:center;gap:var(--space-2);flex:0 0 auto}
@media (min-width:768px){.tabs__arrows{display:flex}}
.tabs__arrow{display:inline-grid;place-items:center;width:36px;height:36px;background:transparent;border:var(--stroke-control) solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink);cursor:pointer;transition:border-color 150ms}
.tabs__arrow:hover{border-color:var(--ink)}
.tabs__arrow:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tabs__count{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;color:var(--ink-muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:center}
.tabs__panel{padding-block:var(--space-7);animation:tabin 200ms ease-out}
@media (min-width:768px){.tabs__panel{padding-block:var(--space-8)}}
@media (min-width:1024px){.tabs__panel{padding-block:var(--space-9)}}
.tabs__panel[hidden]{display:none}
@keyframes tabin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabs__panel{animation:none}}