/* LTT components: the page (header, footer, section, column), buttons, link states, the table, the sticker stack. Load after tokens.css, type.css and space.css;
   the sticker stack also needs stack.js, the theme button theme.js.
   Hover only for a pointer that can hover; keyboard focus looks like hover. */

:root {
  /* Height of every button */
  --control-h: 32px;
  /* Header and footer: --edge from the top, the bottom and the right. The wordmark's letters start 23 px below the header top,
     so 22 px from the left puts them square in their corner too. On phones they line up with the text instead */
  --edge: var(--space-12);
  --mark-inset: 22px;
}
@media (max-width: 640px) { :root { --mark-inset: var(--space-16); } }

/* Page: .site holds the header, main.page and the footer; a short page keeps the footer at the bottom of the screen.
   Sections 128 apart, the same above the first and below the last (64 on phones); --gutter at the sides */
* { box-sizing: border-box; }
html, body { background: var(--color-bg-page); }
/* Computers (mouse, trackpad): no rubber-band bounce at the top and the bottom, so the header and the footer stay put on a hard scroll.
   Phones keep it: their pull to refresh is the same bounce at the top */
@media (hover: hover) and (pointer: fine) { html, body { overscroll-behavior: none; } }
/* Anchors land below the sticky header */
html { scroll-padding-top: calc(var(--control-h) + 2 * var(--edge)); }
body { margin: 0; }
.site { min-height: 100dvh; display: flex; flex-direction: column; }
.page {
  --gutter: max(var(--space-16), env(safe-area-inset-left, 0px));
  flex: 1; display: flex; flex-direction: column; gap: var(--space-128); padding: var(--space-128) var(--gutter);
}

/* Section: one part of the page. Its blocks (a column, a sticker stack) stand 64 apart (48 on phones) */
.section { display: flex; flex-direction: column; gap: var(--space-64); }
/* The closed stack keeps 28 px of room around the stickers (stack.js P.pad) for the hover motion and the shadow;
   the stickers themselves stand the block gap from the blocks around them */
.section > .stickers { margin-block: -28px; }

@media (max-width: 640px) {
  .page { gap: var(--space-64); padding-block: var(--space-64); }
  .section { gap: var(--space-48); }
}

/* Column: the reading column, centred, text width. Paragraphs, lists and a table 16 apart; a heading to its text 8;
   a label to its heading 12 (.heading-group); a link on its own line is a paragraph; buttons 32 below the text (.actions); a heading after text starts a group 32 below */
.column { width: 100%; max-width: var(--width-text); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.heading-group { display: flex; flex-direction: column; gap: var(--space-12); }
.column > :is(h1, h2, .heading-group) + :is(p, ul) { margin-top: calc(var(--space-8) - var(--space-16)); }
.column > :is(p, ul) + :is(h2, .heading-group) { margin-top: calc(var(--space-32) - var(--space-16)); }
.column > .actions { margin-top: calc(var(--space-32) - var(--space-16)); }
.column ul { margin: 0; padding-inline-start: 1.25em; display: flex; flex-direction: column; gap: var(--space-8); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-32); }

/* Header: edge to edge, stays on top while scrolling. The wordmark (a.wordmark.link-nav, the name in natural case, set in lowercase) on the left,
   buttons on the right 8 apart */
.header, .footer {
  font-size: var(--text-small); line-height: var(--text-small--line-height); letter-spacing: var(--text-small--letter-spacing); font-weight: var(--font-weight-medium);
}
.header {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-8); background: var(--color-bg-page);
  padding: var(--edge) max(var(--edge), env(safe-area-inset-right, 0px)) var(--edge) max(var(--mark-inset), env(safe-area-inset-left, 0px));
}
.wordmark { margin-inline-end: auto; text-transform: lowercase; }

/* Footer: the header's measures, no rule. A row one button tall with --edge above and below; links elsewhere on the left where the wordmark starts,
   the pages and the year (.footer-end) on the right, ending where the header button's text ends (--edge + the button's 12) */
.footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-32); min-height: calc(var(--control-h) + 2 * var(--edge));
  padding: var(--edge) max(calc(var(--edge) + var(--space-12)), env(safe-area-inset-right, 0px)) var(--edge) max(var(--mark-inset), env(safe-area-inset-left, 0px));
}
.footer :is(nav, .footer-end) { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
.footer-end { margin-inline-start: auto; }

/* Theme button (theme.js): no transitions while the theme swaps */
.no-transitions, .no-transitions * { transition: none !important; }

/* Buttons: one size, 13 / 20 text, 12 px at the sides. An icon alone makes the button square (32 × 32, a 14 px icon) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: var(--control-h); padding: 0 var(--space-12);
  font-family: inherit; font-size: var(--text-small); line-height: 1; letter-spacing: var(--text-small--letter-spacing); font-weight: var(--font-weight-medium);
  border: 1px solid transparent; border-radius: var(--radius-2); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out;
}
.btn:has(> svg:only-child) { width: var(--control-h); padding: 0; }
.btn svg { display: block; width: 14px; height: 14px; flex: none; }
/* Primary: filled */
.btn-primary { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
/* Secondary: a grey fill */
.btn-secondary { background: var(--color-bg-secondary); color: var(--color-text-primary); }
/* Ghost: no fill; hover takes the secondary fill */
.btn-ghost { background: transparent; color: var(--color-text-primary); }

/* Hover and keyboard focus */
@media (hover: hover) {
  .btn-primary:hover { background: var(--color-bg-inverse-hover); }
  .btn-secondary:hover { background: var(--color-bg-secondary-hover); }
  .btn-ghost:hover { background: var(--color-bg-secondary); }
}
.btn:focus-visible { outline: none; }
.btn-primary:focus-visible { background: var(--color-bg-inverse-hover); }
.btn-secondary:focus-visible { background: var(--color-bg-secondary-hover); }
.btn-ghost:focus-visible { background: var(--color-bg-secondary); }

/* Table: one fact per row, its label then its value, a line between rows (none above the first or below the last). Small text, tabular digits.
   Label text-secondary, value text-primary; a comparison goes in brackets after the value. Rows 8 above and below the text */
.table {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  font-size: var(--text-small); line-height: var(--text-small--line-height); letter-spacing: var(--text-small--letter-spacing); font-weight: var(--font-weight-medium);
}
.table :is(th, td) { padding: var(--space-8) 0; text-align: start; vertical-align: baseline; font-weight: inherit; }
.table tr + tr :is(th, td) { border-top: 1px solid var(--color-border); }
.table tr:first-child :is(th, td) { padding-top: 0; }
.table tr:last-child :is(th, td) { padding-bottom: 0; }
/* A note under a table stands 24 below it: more than the 16 between rows, so it reads as the table's note, not one more row */
.column > .table + p { margin-top: calc(var(--space-24) - var(--space-16)); }
.table th { width: 50%; padding-inline-end: var(--space-32); color: var(--color-text-secondary); }
.table td { color: var(--color-text-primary); }

/* Sticker stack (stack.js). The area runs to the page edges (--gutter: the page's side padding); the stickers line up on the
   text column's centre. Closed it keeps room for the stack; open, it grows to hold the stickers */
.stickers { position: relative; margin-inline: calc(-1 * var(--gutter, 0px)); z-index: 5; overflow-x: clip; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.stickers-layer { position: absolute; left: 0; top: 0; transition: opacity 150ms ease-out; }

/* A sticker: square, 55% of the text column, at least 17rem (stack.js). From 272 px wide the text is at the DS sizes (--u = 1):
   kind 13 / 20, bubble 13 / 20, reply 20 / 28; a narrower sticker scales everything inside it, nothing under --text-floor.
   Black text and bubble on every colour, a soft shadow. Padding, optical: 16 at the sides, 14 at the top (the room above the label's
   capitals adds a little), 13 at the bottom (the room under the reply's last line adds a little more).
   Fit (stack.js checks it and warns in the console): the kind one line; the bubble at most 75% of the inner width; the reply the full
   width and at most 3 lines, its messages joined by " / " in the same colour; 16 or more between the kind and the bubble.
   Too long means shorten the text; the type never shrinks */
.sticker {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; overflow: hidden; transform-origin: 50% 50%;
  user-select: none; -webkit-user-select: none; cursor: pointer;
  padding: calc(14px * var(--u)) calc(16px * var(--u)) calc(13px * var(--u)); border-radius: var(--radius-2);
  background: var(--sticker); color: var(--color-sticker-text); box-shadow: var(--shadow-sticker);
}
/* Forced colours drop the shadow and the fill: an edge keeps the sticker visible */
@media (forced-colors: active) { .sticker { border: 1px solid CanvasText; } }
.sticker .kind, .sticker .you { font-weight: var(--font-weight-medium); }
.sticker .kind {
  margin: 0; font-size: max(var(--text-floor), calc(var(--text-small) * var(--u))); line-height: var(--text-small--line-height);
  letter-spacing: var(--text-small--letter-spacing); opacity: var(--kind-o, 1); white-space: nowrap;
}
.sticker.kind-end .kind { align-self: flex-end; }
.sticker .push { margin-top: auto; display: flex; flex-direction: column; gap: calc(16px * var(--u)); }
.sticker .you {
  margin: 0; align-self: flex-end; max-width: 75%; padding: calc(6px * var(--u)) calc(12px * var(--u)); text-wrap: pretty;
  font-size: max(var(--text-floor), calc(var(--text-small) * var(--u))); line-height: var(--text-small--line-height); letter-spacing: var(--text-small--letter-spacing);
  border-radius: calc(var(--radius-16) * var(--u)); border-end-end-radius: calc(var(--radius-6) * var(--u));
  background: var(--color-sticker-bubble); color: var(--color-sticker-bubble-text);
}
.sticker .msg {
  margin: 0; font-size: max(var(--text-floor), calc(var(--text-heading) * var(--u))); line-height: var(--text-heading--line-height);
  letter-spacing: var(--text-heading--letter-spacing); font-weight: var(--font-weight-medium); text-wrap: pretty;
}