/* Deck Compare — "The Memo"
   One world, one file, linked by the three extension pages (popup, results, pool).
   The two injected in-page buttons keep their own black-on-site treatment inside a
   shadow root (inject-button.js, inject-archetype.js): they sit on other people's pages
   and are not this world. The compare panel the first one opens IS this world — its
   tokens are copied into inject-button.js's shadow stylesheet; keep them in step.

   The surface is a one-page brief read at a desk in daylight: cream paper, warm ink,
   white sheets laid on it, the logo's teal for the one action, one deep red for the alarm.
   Consequences, not decoration:
   - the ground is paper, never grey; elevation is a sheet resting on the desk — a soft,
     wide, downward shadow — never a glow, never a halo;
   - controls are pills, panels are sheets with a hairline, and figures that decide
     something are set in the serif, large; everything else is the sheet's sans;
   - the deck colours are roles (side A, side B, shared), never accents sprinkled on. */

:root {
  /* paper */
  --bg:       #f8f5f2;   /* the desk: cream paper */
  --bg-deep:  #efe9e3;   /* a well pressed into the paper: tracks, wells, quiet fills */
  --elev:     #ffffff;   /* a white sheet laid on the paper */

  /* ink */
  --ink:   #241c18;
  --ink-2: #5e524b;
  --ink-3: #7a6d64;      /* 4.6:1 on paper, 5.0:1 on a sheet */

  /* hairlines */
  --line:        #e8dfd8;
  --line-strong: #d6c9bf;

  /* the two decks and their common ground — roles, not accents. Warm card, cool card,
     green in between: the icon's own encoding, deepened to read on paper (≥ 4.9:1). */
  --a:     #a8540f;
  --b:     #137083;
  --match: #1e7a4c;
  --a-wash:     rgba(168,84,15,0.10);
  --b-wash:     rgba(19,112,131,0.10);
  --match-wash: rgba(30,122,76,0.10);

  /* The logo's two inks do the interface's work: teal is everything you press, pick or
     focus (the primary pill, the selected segment, the focus ring, the caret); orange is
     the warm side and the charts. Red is the alarm only: errors, mismatches, exclusions. */
  --brand:        #8a1f16;
  --brand-btn:    #137083;
  --brand-btn-hi: #0f5d6d;
  --brand-wash:   rgba(138,31,22,0.10);
  --warn:  var(--brand);
  --warn-hi: var(--brand-btn-hi);

  /* sheets on a desk, lit from above: every shadow falls down and spreads */
  --lift-1: 0 1px 2px rgba(36,28,24,.06), 0 2px 6px rgba(36,28,24,.04);
  --lift-2: 0 2px 4px rgba(36,28,24,.05), 0 10px 28px rgba(36,28,24,.08);
  --lift-3: 0 6px 12px rgba(36,28,24,.06), 0 24px 56px rgba(36,28,24,.14);
  --press:  inset 0 1px 2px rgba(36,28,24,.06);
  --brand-lift: 0 2px 10px rgba(19,112,131,.30);

  /* corners: pills for controls, sheets rounded like the paper they are */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* type ramp — 11→56px, eight steps */
  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-md:    15px;
  --fs-lg:    18px;
  --fs-xl:    24px;
  --fs-2xl:   34px;
  --fs-3xl:   56px;

  --font-display: "Beleren","Iowan Old Style",Georgia,serif;            /* the figures that decide: the card face itself */
  --font-mark:    "Bricolage Grotesque","Archivo",system-ui,sans-serif;          /* the wordmark only */
  --font-ui:      "Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;
  --font-mono:    "Geist Mono",ui-monospace,SFMono-Regular,monospace;

  --unit: 8px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* Beleren — the face printed on every Magic card, bundled with the extension (fonts/), so the
   figures that decide are set in the game's own lettering. One weight ships; it answers every
   weight the display rules ask for, so nothing is faux-bolded. */
@font-face {
  font-family: "Beleren";
  src: url("fonts/Beleren2016-Bold.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* The three interface faces, bundled too (fonts/, their SIL Open Font License beside them):
   loaded from Google Fonts, every page's first paint waited on a stylesheet from the network,
   and each open told Google so. The files are Google Fonts' own variable subsets. Archivo
   ships Latin Extended as well, for deck and player names beyond Latin-1; the wordmark and
   the figures only ever need Latin. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight: 700 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The paper. Flat and matte: no grain, no vignette — a sheet is only a sheet because the
   desk under it is plain. Painted on html so the compositor owns it. */
html { background-color: var(--bg); }

/* Beleren's contextual forms swash a word's first or last letter ("Ħouse", "Aragorŋ"): right on a
   card's title bar, wrong on a player's deck name. Off for the page (Chrome ignores the setting
   inside @font-face); Archivo and Geist Mono do not rely on them. */
html { font-feature-settings: "calt" 0; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

/* --- browser surfaces ------------------------------------------------------------
   The parts we did not draw still carry the world. */
::selection { background: var(--b-wash); color: var(--ink); }
:root { accent-color: var(--b); caret-color: var(--b); color-scheme: light; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
a { color: var(--ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
/* Counts, quantities and deltas are measurements: they line up in columns. */
.num, .qty, output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--b);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --- printed marks ---------------------------------------------------------------
   A zone is an area of the sheet with a printed name over a hairline. It has no fill and
   no box; it is the memo's running head, not a container. */
.zone { padding-top: calc(var(--unit) * 2); }
.zone + .zone { margin-top: calc(var(--unit) * 5); }
.sides > .zone + .zone { margin-top: 0; }
.zone-mark {
  display: flex; align-items: center; gap: calc(var(--unit) * 1.5);
  padding-bottom: calc(var(--unit) * 1.25);
  border-bottom: 1px solid var(--line);
  margin-bottom: calc(var(--unit) * 2);
}
.zone-name {
  font-family: var(--font-ui);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.zone-count {
  margin-left: auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3);
}
/* A side's own zone takes that side's ink. */
.side-a .zone-name, .side-a .zone-count { color: var(--a); }
.side-b .zone-name, .side-b .zone-count { color: var(--b); }
.side-a .zone-mark { border-bottom-color: var(--a-wash); }
.side-b .zone-mark { border-bottom-color: var(--b-wash); }

/* --- the one button component -----------------------------------------------------
   A pill. Default is a white pill with a hairline; --go is the teal one and the only
   thing on the page that casts a coloured shadow; --flat has no edge until reached for. */
.mat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--unit) * 0.9);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1; white-space: nowrap; cursor: pointer;
  padding: calc(var(--unit) * 1.3) calc(var(--unit) * 2.2);
  color: var(--ink); background: var(--elev);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  box-shadow: none;
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s, background .16s, border-color .16s;
}
.mat-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--lift-1); border-color: var(--b); }
.mat-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.mat-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.mat-btn svg { width: 15px; height: 15px; flex: none; }

.mat-btn--go { background: var(--brand-btn); border-color: var(--brand-btn); color: #fff; box-shadow: var(--brand-lift); }
.mat-btn--go:hover:not(:disabled) { background: var(--brand-btn-hi); border-color: var(--brand-btn-hi); box-shadow: 0 4px 14px rgba(19,112,131,.36); }
.mat-btn--go:active:not(:disabled) { box-shadow: var(--brand-lift); }

.mat-btn--flat { background: transparent; border-color: transparent; color: var(--ink-2); }
.mat-btn--flat:hover:not(:disabled) { background: var(--bg-deep); color: var(--ink); border-color: transparent; box-shadow: none; transform: none; }

.mat-btn--icon { padding: calc(var(--unit) * 1.2); }
.mat-btn--icon svg { width: 16px; height: 16px; }

/* --- fields ------------------------------------------------------------------------ */
.mat-field {
  width: 100%; padding: calc(var(--unit) * 1.3) calc(var(--unit) * 1.75);
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink);
  background: var(--elev); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.mat-field::placeholder { color: var(--ink-3); }
.mat-field:focus { border-color: var(--b); box-shadow: inset 0 0 0 1px var(--b); }

/* --- selectable segments ----------------------------------------------------------
   A pill group. The selected segment is teal, and says so with aria-pressed. */
.segments { display: inline-flex; gap: 2px; padding: 3px; background: var(--elev); border: 1px solid var(--line); border-radius: var(--r-pill); }
.segment {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  padding: calc(var(--unit) * 0.9) calc(var(--unit) * 1.75);
  color: var(--ink-3); background: transparent; border: 0; border-radius: var(--r-pill); cursor: pointer;
  transition: color .12s, background .12s;
}
.segment:hover { color: var(--ink); background: var(--bg-deep); }
.segment[aria-pressed="true"] { color: #fff; background: var(--b); }

/* --- the wordmark ------------------------------------------------------------------
   Locked: the icon, and "Deck" + bold "Compare" in Bricolage, warm then cool. */
.wordmark { display: inline-flex; align-items: center; gap: calc(var(--unit) * 1.3); }
.wordmark img { width: 26px; height: 26px; border-radius: var(--r-xs); }
.wordmark span {
  font-family: var(--font-mark); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: -0.01em; color: var(--a);
}
.wordmark b { color: var(--b); font-weight: 800; }

/* --- utility ---------------------------------------------------------------------- */
.hide { display: none !important; }
.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 (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}