/* The flat ui: the basic elements in 2D, with no light, no shadow and no texture. The ui page shows each one.
 * Each element reads the tokens of src/tokens.css, and its sizes are in --u.
 * Two shapes, for contrast: a soft element (pocket) is fully round, a hard element (factory) has square corners. */

/* ---------- type ---------- */
.ui-display { margin: 0; font: 300 calc(6 * var(--u)) / .9 var(--font); letter-spacing: -.045em; }
.ui-h1 { margin: 0; font: 600 calc(2.6 * var(--u)) / 1 var(--font); letter-spacing: -.035em; }
.ui-title { margin: 0; font: 600 calc(1.3 * var(--u)) / 1.15 var(--font); letter-spacing: -.015em; }
.ui-h1 span, .ui-title span { color: var(--ink-soft); }
.ui-body { margin: 0; font: 400 calc(1 * var(--u)) / 1.35 var(--font); }
.ui-caption { margin: 0; font: 400 calc(.8 * var(--u)) / 1.3 var(--font); color: var(--ink-soft); }
.ui-num { font: 400 calc(1 * var(--u)) / 1 var(--font); color: var(--ink-soft); }

/* ---------- buttons ---------- */
.ui-btn { display: inline-flex; align-items: center; gap: calc(.5 * var(--u)); height: calc(2.6 * var(--u)); padding: 0 calc(1.1 * var(--u));
  border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper);
  font: 500 calc(.85 * var(--u)) / 1 var(--font); white-space: nowrap; cursor: pointer; }
.ui-btn.accent { border-color: var(--accent); background: var(--accent); }
.ui-btn.soft { border-radius: 999px; }
.ui-btn.line { background: none; color: var(--ink); }
.ui-btn.text { padding: 0; border-color: transparent; background: none; color: var(--ink); }
.ui-btn:disabled { opacity: .35; cursor: default; }
.ui-icon { display: inline-grid; place-items: center; width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.ui-btn .pf-icon, .ui-icon .pf-icon { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); fill: currentColor; }

/* ---------- a choice: the input is the control, so a key and a screen reader work as usual ---------- */
.ui-check, .ui-radio, .ui-switch, .ui-dots input { appearance: none; flex: none; margin: 0; cursor: pointer; }
.ui-check, .ui-radio { display: inline-grid; place-content: center; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u));
  border-radius: 0; background: var(--line); }
.ui-radio { border-radius: 50%; }
.ui-check::before, .ui-radio::before { content: ''; width: calc(.8 * var(--u)); height: calc(.8 * var(--u)); background: var(--paper); transform: scale(0); }
.ui-check::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
.ui-radio::before { width: calc(.55 * var(--u)); height: calc(.55 * var(--u)); border-radius: 50%; }
.ui-check:checked, .ui-radio:checked { background: var(--ink); }
.ui-check:checked::before, .ui-radio:checked::before { transform: scale(1); }

.ui-switch { position: relative; width: calc(2.8 * var(--u)); height: calc(1.6 * var(--u)); border-radius: 0; background: var(--line); transition: background .15s; }
.ui-switch::before { content: ''; position: absolute; top: calc(.2 * var(--u)); left: calc(.2 * var(--u)); width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u));
  border-radius: 0; background: var(--paper); transition: transform .15s; }
.ui-switch:checked { background: var(--ink); }
.ui-switch:checked::before { transform: translateX(calc(1.2 * var(--u))); }

/* A segmented control and the tabs: a label round a hidden radio. */
.ui-seg { display: inline-flex; padding: calc(.3 * var(--u)); border-radius: 0; background: var(--ink); }
.ui-seg label, .ui-tabs label { position: relative; font: 500 calc(.85 * var(--u)) / 1 var(--font); cursor: pointer; }
.ui-seg label { padding: calc(.75 * var(--u)) calc(2 * var(--u)); border-radius: 0; color: var(--paper); }
.ui-seg label:has(:checked) { background: var(--paper); color: var(--ink); }
.ui-tabs { display: inline-flex; gap: calc(1.4 * var(--u)); }
.ui-tabs label { padding: calc(.4 * var(--u)) 0; color: var(--ink-soft); }
.ui-tabs label:has(:checked) { color: var(--accent); }
.ui-seg input, .ui-tabs input, .ui-dropdown input { appearance: none; position: absolute; inset: 0; margin: 0; }

/* ---------- marks ---------- */
.ui-tag, .ui-badge { display: inline-flex; align-items: center; height: calc(1.7 * var(--u)); padding: 0 calc(.75 * var(--u)); border-radius: 999px; white-space: nowrap; }
.ui-tag { border: 1px solid var(--ink); font: 400 calc(.75 * var(--u)) / 1 var(--font); }
.ui-badge { background: var(--accent); color: var(--paper); font: 600 calc(.65 * var(--u)) / 1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.ui-badge.ink { background: var(--ink); }

/* ---------- fields ---------- */
.ui-input { width: 100%; height: calc(2.6 * var(--u)); padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none;
  background: none; color: var(--ink); font: 400 calc(1 * var(--u)) / 1 var(--font); }
.ui-input::placeholder { color: var(--ink-soft); }
.ui-input:focus { border-color: var(--ink); }
.ui-select { position: relative; display: inline-flex; }
.ui-select :is(select, button) { appearance: none; height: calc(2.6 * var(--u)); padding: 0 calc(2.8 * var(--u)) 0 calc(1 * var(--u)); border: 0;
  border-radius: 0; background: var(--paper); color: var(--ink); font: 400 calc(.85 * var(--u)) / 1 var(--font); cursor: pointer; }
.ui-select::after { content: ''; position: absolute; right: calc(1.1 * var(--u)); top: 50%; width: calc(.4 * var(--u)); height: calc(.4 * var(--u));
  border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
/* A color: a round swatch with a hairline ring, an input or a button with --c. */
.ui-color { appearance: none; flex: none; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--c, none); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.ui-color::-webkit-color-swatch-wrapper { padding: 0; }
.ui-color::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ui-color::-moz-color-swatch { border: 0; border-radius: 50%; }

/* A dropdown and a color picker: a button opens a popover list of radios, under the button or over it when there is no room below.
 * The button of a dropdown is in a .ui-select, the button of a color picker is a .ui-color. ui.js shows a pick on the button and closes the list,
 * and flips a list up where the browser does not. */
.ui-dropdown, .ui-palette { inset: auto; margin: calc(.3 * var(--u)) 0; padding: calc(.3 * var(--u)) 0; border: 1px solid var(--line);
  border-radius: 0; background: var(--paper); color: var(--ink); position-area: bottom span-right; position-try-fallbacks: flip-block; }
.ui-dropdown { min-width: anchor-size(width); }
.ui-dropdown label { position: relative; display: block; padding: calc(.7 * var(--u)) calc(1 * var(--u)); font: 400 calc(.85 * var(--u)) / 1 var(--font); cursor: pointer; }
.ui-dropdown label:hover { background: var(--desk); }
.ui-dropdown label:has(:checked) { color: var(--accent); }
/* Five swatches of 1.6 in a row, with four gaps of .7 and some room to spare.
 * A wrapping flex box, not a grid: WebKit 26 stretches a grid in a popover to the height of the screen. */
.ui-palette:popover-open { display: flex; flex-wrap: wrap; box-sizing: content-box; width: calc(11 * var(--u)); gap: calc(.7 * var(--u)); padding: calc(.9 * var(--u)); }
.ui-palette :checked { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
/* The last swatch is the color input of the browser, for any color: a ring of all hues. */
.ui-palette [type=color]::-webkit-color-swatch { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.ui-palette [type=color]::-moz-color-swatch { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }

/* ---------- a value ---------- */
/* The range: a hairline, black up to the thumb. ui.js sets --v. */
.ui-range { appearance: none; display: block; width: 100%; height: calc(1.6 * var(--u)); margin: 0; cursor: pointer;
  background: linear-gradient(var(--ink) 0 0) 0 50% / var(--v, 50%) 2px no-repeat, linear-gradient(var(--line) 0 0) 0 50% / 100% 2px no-repeat; }
.ui-range::-webkit-slider-thumb { appearance: none; width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); border: 0; border-radius: 0; background: var(--ink); }
.ui-range::-moz-range-thumb { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); border: 0; border-radius: 0; background: var(--ink); }
.ui-range::-moz-range-track { background: none; }

/* The progress bar: black up to --v, hatched up to --b, then the rest; a hairline marks the head. */
.ui-progress { position: relative; height: calc(.9 * var(--u));
  background: linear-gradient(var(--ink) 0 0) 0 0 / var(--v) 100% no-repeat,
    repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 0 4px) 0 0 / var(--b, 0) 100% no-repeat, var(--line); }
.ui-progress::after { content: ''; position: absolute; left: var(--v); top: calc(-.6 * var(--u)); bottom: calc(-.6 * var(--u)); width: 1px; background: var(--ink); }
.ui-progress > .ui-badge { position: absolute; left: var(--v); top: calc(1.8 * var(--u)); transform: translateX(-50%); }

/* The knob: a flat disc with a dot. ui.js sets --a, from -135deg to 135deg. */
.ui-knob { position: relative; flex: none; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--ink); cursor: ns-resize; touch-action: none; }
.ui-knob::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(.7 * var(--u)); height: calc(.7 * var(--u)); margin: calc(-.35 * var(--u));
  border-radius: 50%; background: var(--accent); transform: rotate(var(--a, 0deg)) translateY(calc(-2.1 * var(--u))); }

/* ---------- lists ---------- */
/* Each row has a hairline the full length of the list. A page sets --gutter to line the text up with its own. */
.ui-list { margin: 0; padding: 0; list-style: none; }
.ui-list > li { display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--u));
  padding: calc(1.3 * var(--u)) var(--gutter, 0); border-bottom: 1px solid var(--line); }
.ui-list .ui-title { font-weight: 500; margin-bottom: calc(.6 * var(--u)); }
.ui-menu { margin: 0; padding: 0; list-style: none; font: 500 calc(.85 * var(--u)) / 1 var(--font); }
.ui-menu a { display: block; padding: calc(.35 * var(--u)) 0; color: var(--ink); text-decoration: none; }
.ui-menu a.done { color: var(--ink-soft); }
.ui-menu a[aria-current] { color: var(--accent); }

/* ---------- code ---------- */
/* A code block: the text as it is, in the mono font. A long line scrolls in the block, not the page. */
.ui-code { max-width: 100%; margin: 0; padding: calc(1 * var(--u)) calc(1.2 * var(--u)); overflow-x: auto; border-radius: 0;
  background: var(--paper); color: var(--ink); font: 400 calc(.8 * var(--u)) / 1.5 var(--mono); tab-size: 2; }
.ui-code code { font: inherit; }

/* ---------- the side nav: a panel of settings, with a hairline under each row ----------
 * The header holds the title and a close button, a plus turned 45°. Each row is a name with its control on the right.
 * The page puts the panel in its place: the components page sets it at the left edge, and at the bottom on a phone. */
.ui-sidenav { width: calc(18.5 * var(--u)); overflow: auto; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.ui-sidenav[hidden] { display: none; }
.ui-sidenav > * { display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--u));
  min-height: calc(3.4 * var(--u)); padding: calc(.4 * var(--u)) calc(1.4 * var(--u)); border-bottom: 1px solid var(--line);
  font: 500 calc(.85 * var(--u)) / 1 var(--font); }
.ui-sidenav > header { min-height: calc(4.2 * var(--u)); }
.ui-sidenav > header .pf-icon { rotate: 45deg; }
.ui-sidenav > :last-child { border-bottom: 0; }
/* The name of a group of rows. */
.ui-sidenav > h3 { min-height: 0; margin: 0; padding-top: calc(1.6 * var(--u)); font-weight: 400; color: var(--ink-soft); }
.ui-sidenav .ui-select :is(select, button) { background: var(--desk); }
.ui-sidenav [popover] { position-area: bottom span-left; }
/* The code is the last row: on the panel, with no box. Its lines wrap at the width of the panel, so it grows down. */
.ui-sidenav > .ui-code { display: block; min-height: 0; margin: 0; padding: calc(1 * var(--u)) calc(1.4 * var(--u)); border-radius: 0;
  background: none; font: 400 calc(.8 * var(--u)) / 1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- where you are ---------- */
.ui-dots { display: inline-flex; gap: calc(.45 * var(--u)); }
.ui-dots.v { flex-direction: column; }
.ui-dots input { width: calc(.5 * var(--u)); height: calc(.5 * var(--u)); border-radius: 999px; background: var(--line); transition: width .2s, height .2s; }
.ui-dots input:checked { width: calc(1.6 * var(--u)); background: var(--ink); }
.ui-dots.v input:checked { width: calc(.5 * var(--u)); height: calc(1.6 * var(--u)); }

/* ---------- the dot matrix: ui.js puts one <i> in it for each dot ---------- */
.ui-matrix { display: grid; grid-template-columns: repeat(var(--cols), auto); gap: calc(.35 * var(--u)); width: max-content; }
.ui-matrix i { width: calc(.55 * var(--u)); height: calc(.55 * var(--u)); border-radius: 50%; background: var(--line); }
.ui-matrix i.on { background: var(--ink); }

/* ---------- the steps of a manual: a numbered row of hairline drawings, in the color of the text, on the page ----------
 * Each <li> holds an <svg><use href="assets/line-art.svg#id"></svg>. The frame cuts a drawing that runs past its edge. */
.ui-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(10 * var(--u)), 1fr)); gap: calc(1.6 * var(--u)) calc(1 * var(--u));
  margin: 0; padding: 0; list-style: none; font: 300 calc(2.2 * var(--u)) / 1 var(--font); }
.ui-steps li::before { content: counter(list-item) '.'; display: block; margin-bottom: calc(1 * var(--u)); }
/* One width for the frame and for every stroke of a drawing. The frame is a shadow, as a border of .5px becomes 1px. */
.ui-steps svg { --hair: .5px; display: block; width: 100%; height: auto; aspect-ratio: 842 / 861; stroke-width: var(--hair); box-shadow: inset 0 0 0 var(--hair); overflow: hidden; }

.ui-btn:focus-visible, .ui-icon:focus-visible, .ui-check:focus-visible, .ui-radio:focus-visible, .ui-switch:focus-visible, .ui-dots input:focus-visible,
.ui-select :is(select, button):focus-visible, .ui-color:focus-visible, .ui-range:focus-visible, .ui-knob:focus-visible, .ui-menu a:focus-visible,
.ui-seg label:has(:focus-visible), .ui-tabs label:has(:focus-visible), .ui-dropdown label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }