/* ============================================================
   MK TOKENS v1.0  ·  Universal UI and UX Standard
   Do not add colours. Do not alter hex values. Swap the accent
   only through --mk-accent and --mk-accent-ink.
   ============================================================ */

/* Fallback faces with metric overrides so the swap to the web
   font does not shift layout. */
@font-face {
  font-family: 'EB Garamond Fallback';
  src: local('Iowan Old Style'), local('Georgia'), local('Times New Roman');
  size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback';
  src: local('SF Mono'), local('Menlo'), local('Consolas');
  size-adjust: 101%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

:root {
  /* Raw palette, locked */
  --mk-paper:      #F5F2EA;
  --mk-ink:        #14110E;
  --mk-navy:       #1B2A4A;
  --mk-gold:       #C5A55A;
  --mk-gold-print: #B8924A;
  --mk-signal:     #FF6A00;   /* the sole signal colour */
  --mk-error:      #621C1B;   /* errors only, never red */
  --mk-slate:      #6B4A4A;   /* negative data, unstamped figures */

  /* Derived neutrals, tinted from ink */
  --mk-ink-90: color-mix(in srgb, var(--mk-ink) 90%, var(--mk-paper));
  --mk-ink-70: color-mix(in srgb, var(--mk-ink) 70%, var(--mk-paper));
  --mk-ink-50: color-mix(in srgb, var(--mk-ink) 50%, var(--mk-paper));
  --mk-ink-30: color-mix(in srgb, var(--mk-ink) 30%, var(--mk-paper));
  --mk-ink-12: color-mix(in srgb, var(--mk-ink) 12%, var(--mk-paper));
  --mk-ink-06: color-mix(in srgb, var(--mk-ink) 6%,  var(--mk-paper));

  /* Semantic roles */
  --mk-surface:       var(--mk-paper);
  --mk-raised:        color-mix(in srgb, var(--mk-paper) 94%, #ffffff);
  --mk-rule:          var(--mk-ink-12);
  --mk-rule-strong:   var(--mk-ink-30);
  --mk-rule-control:  var(--mk-ink-50);   /* borders of inputs and controls: 3.4:1 on paper, 4.4:1 dark (WCAG 1.4.11) */
  --mk-text:          var(--mk-ink);
  --mk-text-2:        var(--mk-ink-70);
  --mk-text-disabled: var(--mk-ink-50);
  --mk-accent:        var(--mk-navy);
  --mk-accent-ink:    var(--mk-paper);
  --mk-accent-hover:  color-mix(in srgb, var(--mk-accent) 88%, var(--mk-ink));
  --mk-accent-press:  color-mix(in srgb, var(--mk-accent) 76%, var(--mk-ink));
  --mk-positive:      var(--mk-navy);
  --mk-negative:      var(--mk-slate);
  --mk-warning:       var(--mk-gold);
  --mk-focus:         var(--mk-navy);
  --mk-selection:     color-mix(in srgb, var(--mk-gold) 35%, var(--mk-paper));
  --mk-scrim:         color-mix(in srgb, var(--mk-ink) 55%, transparent);

  /* Type */
  --mk-display: 'EB Garamond', 'EB Garamond Fallback', 'Iowan Old Style', Georgia, serif;
  --mk-utility: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;
  --mk-t-xs:   0.6875rem;  /* 11px */
  --mk-t-sm:   0.8125rem;  /* 13px */
  --mk-t-base: 1rem;       /* 16px */
  --mk-t-md:   1.1875rem;  /* 19px */
  --mk-t-lg:   1.4375rem;  /* 23px */
  --mk-t-xl:   1.75rem;    /* 28px */
  --mk-t-2xl:  2.0625rem;  /* 33px */
  --mk-t-3xl:  2.5rem;     /* 40px */
  --mk-lh-body: 1.5;
  --mk-lh-head: 1.25;
  --mk-lh-display: 1.05;
  --mk-lh-dense: 1.35;
  --mk-measure: 68ch;
  --mk-track-label: 0.08em;
  --mk-track-eyebrow: 0.12em;

  /* Space, 4px base */
  --mk-u: 4px;
  --mk-s1: 4px;  --mk-s2: 8px;  --mk-s3: 12px; --mk-s4: 16px; --mk-s5: 20px;
  --mk-s6: 24px; --mk-s8: 32px; --mk-s10: 40px; --mk-s12: 48px; --mk-s16: 64px; --mk-s20: 80px;
  --mk-row: 32px;
  --mk-row-compact: 24px;
  --mk-gutter: 20px;
  --mk-section: 64px;
  --mk-container: 1280px;

  /* Radius, border, elevation */
  --mk-r-0: 0; --mk-r-1: 2px; --mk-r-2: 4px; --mk-r-3: 8px; --mk-r-pill: 999px;
  --mk-b-1: 1px; --mk-b-2: 2px;
  --mk-el-2: 0 1px 2px color-mix(in srgb, var(--mk-ink) 12%, transparent);
  --mk-el-3: 0 8px 24px color-mix(in srgb, var(--mk-ink) 18%, transparent);
  --mk-el-4: 0 24px 60px color-mix(in srgb, var(--mk-ink) 30%, transparent);

  /* Motion */
  --mk-fast: 90ms; --mk-base: 160ms; --mk-slow: 260ms;
  --mk-ease: cubic-bezier(0.2, 0, 0.13, 1);
  --mk-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Targets */
  --mk-tap-min: 44px; --mk-tap-gap: 8px;
  --mk-btn-h: 40px; --mk-btn-h-mobile: 48px; --mk-input-h: 44px;
  --mk-icon: 20px;

  /* Layers */
  --z-sticky: 10; --z-dropdown: 20; --z-actionbar: 30; --z-sheet: 40;
  --z-modal: 50; --z-toast: 60; --z-skip: 100;

  /* Safe areas (T14) */
  --mk-safe-top:    env(safe-area-inset-top, 0px);
  --mk-safe-right:  env(safe-area-inset-right, 0px);
  --mk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mk-safe-left:   env(safe-area-inset-left, 0px);

  color-scheme: light dark;
}

[data-theme="dark"] {
  --mk-paper:  #0F1115;
  --mk-ink:    #E8E4DA;
  --mk-navy:   #9FB4D8;
  --mk-error:  #D9A19C;
  --mk-slate:  #B89A9A;
  --mk-raised: #171A20;
  --mk-accent-ink: #0F1115;
  --mk-focus:  var(--mk-signal);   /* orange reaches 6.5:1 on the dark ground */
  color-scheme: dark;
}

@media (max-width: 640px) {
  :root { --mk-section: 40px; --mk-gutter: 16px; }
}

/* Same canonical dark roles for the host app class convention. */
.dark {
  --mk-paper:  #0F1115;
  --mk-ink:    #E8E4DA;
  --mk-navy:   #9FB4D8;
  --mk-error:  #D9A19C;
  --mk-slate:  #B89A9A;
  --mk-raised: #171A20;
  --mk-accent-ink: #0F1115;
  --mk-focus:  var(--mk-signal);   /* orange reaches 6.5:1 on the dark ground */
  color-scheme: dark;
}

/* Gate presentation consumes the canonical declarations prepended from kit/mk-tokens.css.
   The document head establishes root tokens; an embedded gate inherits host foundations. */
:host {
  display: block;
  min-height: 100svh;
  color: var(--mk-text);
  font-family: var(--mk-utility);
  font-size: var(--mk-t-base);
  line-height: var(--mk-lh-body);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  isolation: isolate;
}
*, *::before, *::after { box-sizing: border-box; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: var(--mk-b-2) solid var(--mk-focus); outline-offset: 2px; scroll-margin-block: var(--mk-s6); }
input:focus-visible { border-color: var(--mk-focus); }
::selection { background: var(--mk-selection); color: var(--mk-text); }
.scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--mk-surface); }
.shell {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--mk-s6) + var(--mk-safe-top)) calc(var(--mk-s10) + var(--mk-safe-right)) calc(var(--mk-s6) + var(--mk-safe-bottom)) calc(var(--mk-s10) + var(--mk-safe-left));
}
.skip-link { position: absolute; inset-block-start: var(--mk-s2); inset-inline-start: var(--mk-s4); z-index: var(--z-skip); min-height: var(--mk-tap-min); display: flex; align-items: center; padding: var(--mk-s2) var(--mk-s3); background: var(--mk-accent); color: var(--mk-accent-ink); transform: translateY(calc(-100% - var(--mk-s6))); }
.skip-link:focus { transform: none; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s4); flex-wrap: wrap; }
.private { color: var(--mk-text-2); font-size: var(--mk-t-sm); letter-spacing: var(--mk-track-eyebrow); text-transform: uppercase; overflow-wrap: anywhere; }
.brand { display: flex; align-items: center; flex-direction: row-reverse; order: 2; gap: var(--mk-s3); margin-left: auto; min-width: 0; }
.wordmark { font-family: var(--mk-display); font-size: var(--mk-t-lg); line-height: var(--mk-lh-head); overflow-wrap: anywhere; }
.emblem { position: relative; display: block; flex: none; width: var(--mk-s10); height: var(--mk-s10); border-radius: var(--mk-r-pill); overflow: hidden; isolation: isolate; }
.emblem img { position: absolute; display: block; width: 114.285714%; max-width: none; height: auto; left: -7.142857%; top: -2.857143%; }
.emblem img[hidden] { display: none; }
.emblem.unavailable { border: var(--mk-b-1) solid var(--mk-rule); background: var(--mk-ink-06); }
main { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding-block: var(--mk-s10); }
.composition { width: min(100%, 30rem); min-width: 0; }
.card { padding: var(--mk-s6); border: var(--mk-b-1) solid var(--mk-rule); border-radius: var(--mk-r-3); background: var(--mk-raised); box-shadow: var(--mk-el-2); }
h1 { margin: 0 0 var(--mk-s6); font-family: var(--mk-display); font-size: var(--mk-t-xl); line-height: var(--mk-lh-head); font-weight: 400; }
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mk-s4); align-items: end; }
.code-group, .action-group { display: grid; gap: var(--mk-s2); min-width: 0; }
label { font-size: var(--mk-t-sm); line-height: var(--mk-lh-body); color: var(--mk-text); overflow-wrap: anywhere; }
.required { color: var(--mk-text-2); }
input { min-width: 0; width: 100%; min-height: var(--mk-input-h); padding: var(--mk-s2) var(--mk-s3); border: var(--mk-b-1) solid var(--mk-rule-control); border-radius: var(--mk-r-1); background: var(--mk-raised); color: var(--mk-text); caret-color: var(--mk-text); font-family: var(--mk-utility); font-size: var(--mk-t-base); line-height: var(--mk-lh-body); }
input::placeholder { color: var(--mk-text-2); opacity: 1; }
input[aria-invalid="true"] { border-color: var(--mk-error); border-width: var(--mk-b-2); }
/* Caption remains in normal flow, never under the translating thumb. */
.slide-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-s2); min-height: calc(var(--mk-t-base) * var(--mk-lh-body)); color: var(--mk-text); font-size: var(--mk-t-base); line-height: var(--mk-lh-body); overflow-wrap: anywhere; }
.action-text { min-width: 0; }
.chevrons { color: var(--mk-text-2); }
.track { --progress: 0; --travel: 0px; position: relative; min-height: var(--mk-btn-h-mobile); border: var(--mk-b-1) solid var(--mk-rule-control); border-radius: var(--mk-r-2); background: var(--mk-ink-06); overflow: visible; touch-action: pan-y; user-select: none; }
.track::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--mk-ink-12); transform: scaleX(var(--progress)); transform-origin: left; pointer-events: none; }
.thumb { position: absolute; left: 1px; top: 1px; width: var(--mk-tap-min); height: var(--mk-tap-min); min-width: var(--mk-tap-min); min-height: var(--mk-tap-min); border: var(--mk-b-1) solid var(--mk-accent); border-radius: var(--mk-r-1); background: var(--mk-accent); color: var(--mk-accent-ink); display: grid; place-items: center; touch-action: none; transform: translateX(var(--travel)); z-index: 1; }
@media (hover: hover) and (pointer: fine) { .thumb:not(:disabled):hover { background: var(--mk-accent-hover); border-color: var(--mk-accent-hover); } }
.thumb:not(:disabled):active, .track.pressed .thumb:not(:disabled) { background: var(--mk-accent-press); border-color: var(--mk-accent-press); }
.thumb:disabled { background: var(--mk-ink-06); color: var(--mk-text-disabled); border-color: var(--mk-rule-control); cursor: not-allowed; }
.thumb svg { width: var(--mk-icon); height: var(--mk-icon); stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.track.returning .thumb { transition: transform var(--mk-base) var(--mk-ease); }
.check, .verification-mark { display: none; }
.verification-mark { stroke: none; fill: currentColor; }
.feedback { display: grid; align-content: start; gap: var(--mk-s2); min-height: calc(var(--mk-t-base) * var(--mk-lh-body) * 3 + var(--mk-s4)); padding-top: var(--mk-s4); }
.status { margin: 0; color: var(--mk-error); font-size: var(--mk-t-base); line-height: var(--mk-lh-body); overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; }
.status:not(:empty)::before { content: '⚠ '; }
.verification-skeleton { display: none; gap: var(--mk-s2); width: 100%; }
.verification-skeleton span { display: block; height: var(--mk-s4); border-radius: var(--mk-r-1); background: var(--mk-ink-12); }
.verification-skeleton span:last-child { width: 75%; }
.powered { margin-top: var(--mk-s4); color: var(--mk-text-2); font-family: var(--mk-utility); font-size: var(--mk-t-sm); line-height: var(--mk-lh-body); text-align: right; overflow-wrap: anywhere; }
.confirmation-check { display: none; flex: none; width: var(--mk-icon); height: var(--mk-icon); color: var(--mk-positive); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:host(.busy:not(.success)) .verification-skeleton { display: grid; }
:host(.busy:not(.success)) .verification-mark { display: block; }
:host(.busy:not(.success)) .arrow { display: none; }
:host(.busy) input { background: var(--mk-ink-06); }
/* The two static checks appear only after the existing server and redirect checks. */
:host(.success) .thumb { background: var(--mk-positive); color: var(--mk-accent-ink); border-color: var(--mk-positive); }
:host(.success) .confirmation-check, :host(.success) .check { display: block; }
:host(.success) .arrow, :host(.success) .chevrons { display: none; }
:host(.success) .status { color: var(--mk-positive); }
:host(.success) .status::before { content: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .shell { padding: calc(var(--mk-s4) + var(--mk-safe-top)) calc(var(--mk-s4) + var(--mk-safe-right)) calc(var(--mk-s4) + var(--mk-safe-bottom)) calc(var(--mk-s4) + var(--mk-safe-left)); }
  .masthead { align-items: flex-start; }
  .private { flex-basis: 100%; order: 3; }
  .card { padding: var(--mk-s4); }
  .entry-row { grid-template-columns: minmax(0, 1fr); gap: var(--mk-s4); }
  .thumb { width: var(--mk-btn-h-mobile); height: var(--mk-btn-h-mobile); }
  .track { min-height: calc(var(--mk-btn-h-mobile) + var(--mk-s1)); }
}
@media (prefers-reduced-motion: reduce) { .track.returning .thumb { transition: none; } }
@media (forced-colors: active) {
  .thumb, :host(.success) .thumb { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .thumb:disabled { color: GrayText; border-color: GrayText; }
  .track, input { border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
  .verification-skeleton span { border: var(--mk-b-1) solid CanvasText; }
  .confirmation-check, .status, :host(.success) .status { color: CanvasText; }
}