/* 취향의 조각 (Pieces of Taste, P.O.T): the design tokens and the shared components of every screen (design canvas
   B0 brand, B2 list, B3 coffee, B5 records, B6 desktop), as pot-* classes. Markup for most of them comes from POT.ui
   (ui.js); a screen's own layout (the explore grid of B1/B6, the coffee page's order) lives in its shell.
   Mobile first: one column with 16 px gutters, the desktop layout from 980 px (32 px gutters). One light theme, no
   dark mode. Text is ink or the muted grey only, at 4.5:1 or more on paper, card and the wheel's board; colour is for
   dots, chips, wheel cells and bars (PRD "브랜드 규칙"). No text under 11 px. Pressed states read in forced colours.
   Contract: docs/redesign/architecture.md, sections 3 (tokens) and 7 (classes). */
:root {
  /* base (section 3) */
  --paper: #F6F5F3;      /* the screen */
  --card: #FFFFFF;       /* cards, the wheel's centre */
  --wheel: var(--card);  /* the wheel's board: the card's white (owner's call, 2026-10-25; it was #F3F3F3) */
  --line: #E3E0DB;       /* card borders, rules */
  --muted: #6B655F;      /* secondary text, labels, placeholders (5.3:1 on paper) */
  --ink: #1C1916;        /* text, the main button, the dot when nothing is picked */
  --dead: #DDDAD5;       /* a wheel cell no coffee on sale has */
  --dead-text: #9B948C;  /* its label: deliberately faint, the one exception to 4.5:1 with --rest-text */
  --rest-text: #A8A19A;  /* the other cells' labels while notes are picked */
  --symbol: #BDB6AE;     /* arrows and separators; never text */
  --on-ink-muted: rgb(255 255 255 / .72);  /* secondary text on ink (a pressed chip's number, a button's aside) */
  /* families, the wheel's inner ring only */
  --fam-floral: #C0488A; --fam-fruity: #D14141; --fam-sour: #D9B43A; --fam-green: #5E9A4B;
  --fam-roasted: #AA6337; --fam-spices: #7F5BA6; --fam-nutty: #926D51; --fam-sweet: #E8903A;
  /* subcategories: the outer rings, dots, chips and bars */
  --sub-tea: #B07AA8; --sub-floralg: #D8609F; --sub-berry: #B8405F; --sub-dried: #9E5A3C; --sub-otherfruit: #E35B47;
  --sub-citrus: #F2A32E; --sub-sourg: #D4C64A; --sub-alcohol: #8E4C8E; --sub-olive: #8BA05A; --sub-greenveg: #5E9A4B;
  --sub-pipetobacco: #7D5A3F; --sub-tobacco: #936D49; --sub-burnt: #757575; --sub-cereal: #C9A96A; --sub-pungent: #6F5E9E;
  --sub-brownspice: #9E5A8F; --sub-nuttyg: #B38A62; --sub-cocoa: #7E5642; --sub-brownsugar: #C98A3E;
  --sub-vanilla: #E9D39B; --sub-overallsweet: #F0B45A; --sub-sweetaro: #E89B5C;
  /* type: IBM Plex Sans KR and Mono (one Google Fonts link in each shell); Hangul inside Mono falls to Plex Sans KR */
  --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, Menlo, Consolas, "Apple SD Gothic Neo", monospace;
  /* shape */
  --gutter: 16px;
  --gl: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gr: max(var(--gutter), env(safe-area-inset-right, 0px));
  --r-card: 14px;
  --r-board: 18px;
  color-scheme: light;
}
@media (min-width: 980px) { :root { --gutter: 32px; --r-board: 24px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 14px/1.5 var(--font);
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::placeholder { color: var(--muted); opacity: 1; }
/* the hidden attribute always wins, so a component's display (the quarter controls' flex, which wheel.js hides on
   the whole wheel) never brings back an element a script has hidden */
[hidden] { display: none !important; }

/* ---------- utilities the screens lean on ---------- */
.pot-page { padding-inline: var(--gl) var(--gr); }
.pot-box { background: var(--card); border: 1px solid transparent; border-radius: var(--r-card); padding: 14px 16px; }
.pot-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.pot-label { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--muted); }
.pot-muted { color: var(--muted); }
.pot-h1 { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.pot-h1--lg { font-size: 30px; line-height: 1.2; }
.pot-sub { font-size: 13px; color: var(--muted); }
.pot-link { color: var(--ink); font-size: 13px; text-decoration: underline; white-space: nowrap; }
.pot-link:hover { color: var(--muted); }
.pot-empty { padding: 24px 0; color: var(--muted); font-size: 14px; text-align: center; }
.pot-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- dots and the wordmark ---------- */
/* a dot in a subcategory's colour (ui.dotHtml: --dot, --d); light ones get a 1 px ink ring (decision 16) */
.pot-dot { display: inline-block; flex: none; width: var(--d, 8px); height: var(--d, 8px); border-radius: 50%;
  background: var(--dot, var(--ink)); }
.pot-dot--ring { box-shadow: inset 0 0 0 1px var(--ink); }
/* "취향의 조각": the B0 wordmark as an image (wordmark.svg, IBM Plex Sans KR SemiBold outlines, tracking -0.03em) whose
   full stop is a circle of its own, 46% of the type, coloured like every header dot (ui.setMark: --dot, ring) */
.pot-wm { display: inline-flex; align-items: center; font-size: 17px; line-height: 1; }
.pot-wm-img { display: block; width: auto; height: .974em; overflow: visible; }  /* the outlines' box: 17 px type, 16.6 px tall */
.pot-wm-dot { fill: var(--dot, var(--ink)); }
.pot-wm-dot.pot-dot--ring { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* P.O.T: its two full stops are the same dot at 22% of the type */
.pot-pot { display: inline-flex; align-items: baseline; font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1; white-space: nowrap; }
.pot-pot__mark { display: inline-flex; align-items: baseline; }
.pot-pot .pot-dot { width: .22em; height: .22em; width: round(.22em, 1px); height: round(.22em, 1px); margin-inline: .12em; }  /* 17 px: 4 px */

/* ---------- top bar (header.html) ---------- */
/* the wordmark and the language menu: a 44 px row on phones (B1), over a rule from 980 px (B6). The menu went on
   2026-10-25 (owner's calls: the site is one page, the presets are tabs on it, Discord is in the footer) and the
   language menu came up from the footer. The preset screen shows its own .pot-bar on phones instead. */
.pot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  min-height: 44px; padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gr) 0 var(--gl); }
.pot-top__brand { display: flex; align-items: center; gap: 4px 18px; min-width: 0; }
.pot-home { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.pot-home .pot-pot { display: none; }  /* Korean screens: 취향의 조각; every other language: P.O.T (PRD "영문 표기") */
:root:not(:lang(ko)) .pot-home .pot-wm { display: none; }
:root:not(:lang(ko)) .pot-home .pot-pot { display: inline-flex; }
.pot-top__end { display: flex; align-items: center; gap: 4px 20px; }
@media (max-width: 979px) {
  /* the preset shell: its screen's own top line replaces the header on phones */
  .pot-top--desk, body[data-page="preset"] .pot-top { display: none; }
}
@media (min-width: 980px) {
  .pot-top { padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gr) 16px var(--gl); border-bottom: 1px solid transparent; }
  .pot-top .pot-wm, .pot-top .pot-pot { font-size: 19px; }
}

/* ---------- mobile top line of a screen (.pot-bar: back, title, action) and 44 px icon buttons ---------- */
.pot-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 44px; }
.pot-bar__title { flex: 1; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--muted); }
.pot-bar__title.pot-mono { font-size: 11px; letter-spacing: 0; }
.pot-bar__spacer { flex: none; width: 44px; }
.pot-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink);
  text-decoration: none; }
.pot-icon:hover { background: var(--card); }
.pot-icon svg { width: 22px; height: 22px; }

/* ---------- chips ---------- */
.pot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* one row that slides sideways (the preset chips on phones), bleeding into the gutters; the inner padding keeps the
   focus ring of the first and last chip and of every chip's top and bottom inside the clipped row */
.pot-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: -4px calc(-1 * var(--gr)) -4px calc(-1 * var(--gl)); padding: 4px var(--gr) 4px var(--gl); scroll-padding-inline: var(--gl); }
.pot-chips--scroll::-webkit-scrollbar { display: none; }
.pot-chip { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: 36px;
  margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; }
/* a preset (B1): white with a rule, ink when on; its number in Mono */
.pot-chip--preset { background: var(--card); border-color: var(--line); }
.pot-chip--preset:hover { border-color: var(--ink); }
.pot-chip--preset .pot-mono { font-size: 11px; letter-spacing: 0; color: var(--muted); }
.pot-chip--preset[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.pot-chip--preset[aria-pressed="true"] .pot-mono { color: var(--on-ink-muted); }
.pot-chip__long { display: none; }
/* a picked note (B1 panel): its subcategory colour, the text white or ink by contrast (ui.fgOn) */
.pot-chip--note { gap: 4px; border-radius: 10px; background: var(--chip, var(--ink)); color: var(--chip-fg, #FFFFFF);
  font-size: 14px; font-weight: 600; }
button.pot-chip--note:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.pot-chip__x { font-weight: 400; }
.pot-chip--sm { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; }

/* ---------- the all/any toggle (B1, B6) ---------- */
.pot-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 8px; background: var(--paper); }
.pot-seg button { position: relative; height: 28px; margin: 0; padding: 0 10px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.pot-seg button::after { content: ""; position: absolute; inset: -9px -1px; }
.pot-seg button:hover { color: var(--ink); }
.pot-seg button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }

/* ---------- buttons ---------- */
/* .pot-btn--ink: the main action (56 px, ink); .pot-btn--line: the second one (52 px, ink rule); .pot-btn--sm: the
   records file row (44 px). A .pot-btn__aside on the right holds the count ("57종 →") or an arrow */
.pot-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 0;
  padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-card); background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; }
.pot-btn--ink { justify-content: space-between; min-height: 56px; background: var(--ink); color: #FFFFFF; font-weight: 600; text-align: start; }
.pot-btn--ink:hover { background: #33302C; }
.pot-btn--line { border-color: var(--ink); }
.pot-btn--line:hover { background: var(--card); }
.pot-btn__aside { flex: none; font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); }
.pot-btn--ink .pot-btn__aside { color: var(--on-ink-muted); }
.pot-btn--sm { gap: 6px; width: auto; min-height: 44px; padding: 0 14px; border-color: var(--line); border-radius: 12px;
  background: var(--card); font-size: 13px; }
.pot-btn--sm:hover { border-color: var(--ink); }
.pot-btn svg { flex: none; width: 16px; height: 16px; }
.pot-btn:disabled, .pot-btn[aria-disabled="true"] { cursor: default; opacity: 1; border-style: dashed; color: var(--muted); }

/* ---------- list head: "N종 · 로스터리 n곳", sort, hide sold out (B2, B6) ---------- */
.pot-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px;
  padding-bottom: 2px; border-bottom: 1px solid transparent; font-size: 12px; color: var(--muted); }
.pot-listhead strong { color: var(--ink); font-weight: 600; }
.pot-listhead__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
@media (min-width: 980px) {
  .pot-listhead { padding-bottom: 4px; font-size: 14px; color: var(--ink); }
  .pot-listhead__tools { font-size: 13px; color: var(--muted); }
}
/* the sort menu: text with a chevron, no box; a 44 px target */
.pot-select { appearance: none; -webkit-appearance: none; min-width: 0; max-width: 100%; min-height: 44px; margin: 0;
  padding: 0 18px 0 0; border: 0; border-radius: 0; color: var(--ink); font-size: inherit; text-overflow: ellipsis; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231C1916' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 12px 12px; }
/* the list's filters ("품절 빼기", "디카페인"): a square box before the label with a white tick on ink while on (owner's
   call, 2026-10-25: B2's round dot read as a radio button). The box's rule is the muted colour, 3:1 and more on the
   paper and on a card */
.pot-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.pot-check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--muted); border-radius: 5px; background: var(--card) center / 12px 12px no-repeat; cursor: pointer;
  transition: background-color .12s ease-out, border-color .12s ease-out; }
.pot-check:hover input { border-color: var(--ink); }
.pot-check input:checked { border-color: var(--ink); background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pot-check input:checked + span { color: var(--ink); }
.pot-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pot-check input { transition: none; } }

/* ---------- coffee card (B2, B6): everything the coffee screen used to show, and the way to the shop ---------- */
.pot-cards { display: grid; gap: 10px; }
@media (min-width: 980px) { .pot-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } }
.pot-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 12px; background: var(--card);
  border: 1px solid transparent; border-radius: var(--r-card); color: var(--ink); }
/* the head: the name and the Mono line on the left, the coffee's small wheel on the right (decorative) */
.pot-card__head { display: flex; align-items: flex-start; gap: 12px; }
.pot-card__id { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.pot-card__wheel { display: block; flex: none; width: 72px; height: 72px;
  background: var(--pot-wheel-plate, none) center / contain no-repeat; }
.pot-card--out .pot-card__wheel { opacity: .5; }
.pot-card__top { order: -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px;  /* after the name in the markup; the price goes under the line when they do not fit side by side */
  font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--muted); }
.pot-card__meta { min-width: 0; }
.pot-card__right { display: inline-flex; flex: none; align-items: baseline; gap: 8px; white-space: nowrap; }
.pot-card__out { padding: 0 5px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font-weight: 500; letter-spacing: .08em; }
.pot-card__name { font-size: 16px; font-weight: 600; line-height: 1.35; }
/* the name is the way to the shop (a new tab, the arrow says so): ink like the heading, underlined on hover; padded
   to a 44 px target without moving anything (the padding sits over the Mono line and the head's empty space) */
.pot-card__link { display: block; margin: -11px 0; padding: 11px 0; color: inherit; text-decoration: none; }
.pot-card__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pot-card__ext { color: var(--muted); font-weight: 400; }
/* region and variety, when the shop gives them */
.pot-card__more { font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--muted); }
/* the roaster's own words, quoted */
.pot-card__desc { font-size: 13px; line-height: 1.6; color: var(--muted); }
.pot-card__desc q { quotes: "\201C" "\201D"; }
/* sold out: the paper shows through, so the card reads as set aside (text keeps its contrast) */
.pot-card--out { background: transparent; }
@media (min-width: 980px) {
  .pot-card { gap: 12px; min-height: 170px; padding: 18px 18px 14px; }
  .pot-card__name { font-size: 17px; }
  .pot-card > .pot-chain { flex-grow: 1; align-content: flex-start; }
}

/* ---------- notes: each with its dot, texture words at the right; the picked ones as if marked with a highlighter ---------- */
.pot-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; line-height: 1.4; }
.pot-note { display: inline-flex; align-items: center; gap: 5px; padding-block: 1px; }
/* a picked note: a band of its own colour behind the word (--hl: that colour mixed into the card, ui.js), a little
   uneven at the ends like a marker stroke; the ink text keeps its contrast on it */
.pot-note--hit .pot-note__t { margin-inline: -.2em; padding: 0 .2em; border-radius: .25em .45em .3em .5em / .45em .25em .5em .3em;
  background: var(--hl, #F6E3A2); font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pot-chain__tex { margin-inline-start: auto; padding-inline-start: 4px; font-family: var(--mono);
  font-size: 11px; font-weight: 400; color: var(--muted); }
.pot-chain__none { color: var(--muted); font-size: 13px; }
/* a set: one line per component, its name in Mono first */
.pot-chain--parts { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.pot-chain__part { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pot-chain__name { margin-inline-end: 2px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- match line and dots (B2 card foot) ---------- */
.pot-match { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pot-match__dots { display: inline-flex; flex: none; gap: 3px; }
.pot-mdot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--dot); }
.pot-mdot--on { background: var(--dot); }
.pot-mdot--ring { box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 2px var(--dot); }  /* a light outline: open half its width */
.pot-mdot--on.pot-mdot--ring { box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- first-note bars (B4: ui.barsHtml) ---------- */
.pot-bars { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr) auto; gap: 10px; align-items: center; list-style: none; }
.pot-bars__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
@supports not (grid-template-columns: subgrid) { .pot-bars__row { grid-template-columns: 84px minmax(0, 1fr) 28px; gap: 10px; } }
.pot-bars__label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 600; }
.pot-bars__track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--paper); }
.pot-bars__fill { display: block; width: var(--w, 0%); height: 100%; background: var(--bar, var(--ink)); }
.pot-bars__n { min-width: 28px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: end; }

/* ---------- footer (footer.html) ---------- */
.pot-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 40px;
  padding: 16px var(--gr) calc(env(safe-area-inset-bottom, 0px) + 28px) var(--gl); border-top: 1px solid transparent;
  font-size: 13px; color: var(--muted); }
.pot-lang { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding-inline: 12px 4px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; }
.pot-lang:hover { border-color: var(--ink); }
.pot-lang svg { flex: none; width: 16px; height: 16px; }
.pot-lang select { min-height: 42px; padding: 0 8px 0 4px; border: 0; background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; }
.pot-lang:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.pot-lang select:focus-visible { outline: 0; }
.pot-foot__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-size: 12px; text-decoration: underline; }
.pot-foot__link:hover { color: var(--muted); }
.pot-foot__link svg { flex: none; width: 16px; height: 16px; }
.pot-foot__credit { font-size: 12px; }  /* the Discord link sits beside it (owner's call, 2026-10-28) */
.pot-foot__credit a { color: inherit; }

/* ---------- forced colours (Windows high contrast) ---------- */
/* the page's colours give way to the system's: pressed chips and the toggle keep their state as Highlight, dots,
   bars and the sold-out dot keep their own colour (their meaning is the colour) */
@media (forced-colors: active) {
  .pot-chip--preset, .pot-seg button { forced-color-adjust: none; background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .pot-chip--preset .pot-mono { color: ButtonText; }
  .pot-chip--preset[aria-pressed="true"], .pot-seg button[aria-pressed="true"] {
    background: Highlight; color: HighlightText; border-color: Highlight; }
  .pot-chip--preset[aria-pressed="true"] .pot-mono { color: HighlightText; }
  .pot-chip--note { border-color: ButtonText; }
  .pot-dot, .pot-mdot, .pot-bars__track, .pot-bars__fill { forced-color-adjust: none; }
  .pot-check input { forced-color-adjust: none; border-color: CanvasText; background-color: Canvas; }
  .pot-check input:checked { border-color: Highlight; background-color: Highlight; }
  .pot-note--hit .pot-note__t { outline: 1px solid CanvasText; }  /* the highlighter's colour is gone here: a frame says it */
  .pot-btn--ink, .pot-btn--line, .pot-btn--sm { border-color: ButtonText; }
}