/*
 * The whole Preplet stylesheet.
 *
 * Extracted verbatim from the <style> block that used to sit in index.html;
 * the only edits are the relative url() paths, which now resolve from
 * styles/ rather than from the document root.
 */
  @font-face {
    font-family: 'Foldit'; font-weight: 100 900; font-style: normal; font-display: swap;
    src: url('../fonts/Foldit-variable.woff2') format('woff2-variations');
  }
  @font-face {
    font-family: 'Stack Sans Notch'; font-weight: 200 700; font-style: normal; font-display: swap;
    src: url('../fonts/StackSansNotch-variable.woff2') format('woff2-variations');
  }
  @font-face {
    font-family: 'Stack Sans Text'; font-weight: 200 700; font-style: normal; font-display: swap;
    src: url('../fonts/StackSansText-variable.woff2') format('woff2-variations');
  }
  @font-face {
    font-family: 'Coral Pixels'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('../fonts/CoralPixels-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
  }

  :root {
    --paper: #EDEEE9;
    --card: #F8F7F3;
    --card-hi: #FCFBF7;
    --ink: #1B1D22;
    --muted: #63666F;
    --ink-soft: #45474E;
    --gloss: #292C32;
    --rule: #C9CAC2;
    --slot: #D5D6CD;
    --s1: #293F8F;
    --s2: #8B5E14;
    --s3: #963D74;
    --s4: #186352;
    --accent: #3B4149;
    --accent-ink: #FFFFFF;
    --lift: 0 1px 0 rgba(27, 29, 34, .04), 0 6px 14px -14px rgba(27, 29, 34, .4);
    --r-lg: 0px;
    --r-md: 0px;
    --r-sm: 0px;
    --font-brand: 'Foldit', system-ui, sans-serif;
    --font-display: 'Stack Sans Notch', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-ui: 'Stack Sans Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --w-brand: 600;
    --w-label: 400;
    --w-tile: 400;
    --w-button: 600;
    --w-body: 400;
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #131418;
      --card: #1C1E24;
      --card-hi: #23262D;
      --ink: #E8E7E1;
      --muted: #8B8F98;
      --ink-soft: #C7C9CD;
      --gloss: #D5D7DB;
      --rule: #2C2F37;
      --slot: #262931;
      --s1: #9DAEF2;
      --s2: #DDBA6A;
      --s3: #DA9BD4;
      --s4: #7ACBA0;
      --accent: #C7CCD3;
      --accent-ink: #15131F;
      --lift: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 16px -14px rgba(0, 0, 0, .7);
      color-scheme: dark;
    }
  }

  :root[data-theme="dark"] {
    --paper: #131418;
    --card: #1C1E24;
    --card-hi: #23262D;
    --ink: #E8E7E1;
    --muted: #8B8F98;
    --ink-soft: #C7C9CD;
    --gloss: #D5D7DB;
    --rule: #2C2F37;
    --slot: #262931;
    --s1: #9DAEF2;
    --s2: #DDBA6A;
    --s3: #DA9BD4;
    --s4: #7ACBA0;
    --accent: #C7CCD3;
    --accent-ink: #15131F;
    --lift: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 16px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: var(--w-body);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
  }

  .page {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 48px) clamp(18px, 4vw, 32px) calc(56px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 40px);
  }

  .masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 20px;
  }

  /* The existing wordmark is the document heading without acquiring browser
     heading margins or typography of its own. */
  .site-title { margin: 0; font: inherit; }

  /* One arm per sense colour, so the wordmark's glyph says what the board
     says. The two files bake in the two palettes and CSS picks between them,
     rather than the SVG answering prefers-color-scheme itself -- an SVG loaded
     as an image cannot see the manual theme toggle on <html>. */
  .mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .26em;
    flex: none;
    background: url('../icon/knot-light.svg') center / contain no-repeat;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mark { background-image: url('../icon/knot-dark.svg'); }
  }

  :root[data-theme="dark"] .mark { background-image: url('../icon/knot-dark.svg'); }

  .wordmark {
    font-family: var(--font-brand);
    font-size: clamp(2.4rem, 8vw, 3.8rem);
    letter-spacing: 0;
    line-height: 1;
    font-weight: var(--w-brand);
    display: inline-flex;
    /* Centred, not baseline-aligned: an empty box takes its bottom margin edge
       as its baseline, which stands the mark on the baseline and towers it over
       the caps. */
    align-items: center;
  }

  .head-right { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .masthead-nav { display: flex; gap: 14px; align-items: baseline; }

  .dateline {
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .linkbtn {
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .linkbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 32px;
    min-height: 32px;
    padding: 7px;
    margin: -7px;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .14s ease, transform .18s ease;
  }

  .icon-btn:active { transform: rotate(-6deg); }
  .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .tagline {
    margin: 0;
    flex-basis: 100%;
    color: var(--muted);
    font-size: clamp(.9rem, 2.2vw, 1rem);
  }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 52px);
  }

  @media (min-width: 820px) {
    .layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  }

  .layout[data-state="unavailable"] { grid-template-columns: minmax(0, 1fr); }

  .board-col, .entry-col { display: flex; flex-direction: column; min-width: 0; }
  .board-col { gap: 30px; }
  .entry-col { gap: 22px; }

  .board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(9px, 2.2vw, 14px);
  }

  .tile {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--lift);
    font-family: var(--font-display);
    font-weight: var(--w-tile);
    font-size: clamp(.82rem, 3.4vw, 1.3rem);
    letter-spacing: -.01em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s ease, color .14s ease, transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  }

  .tile:has(.marks) { background: var(--card-hi); }
  .tile:active:not(:disabled):not([aria-pressed="true"]) { transform: translateY(0); }
  .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .tile[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    transform: translateY(-3px) scale(1.03);
  }

  .tile:disabled { cursor: default; }
  .tile-label {
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .marks {
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: clamp(10px, .5em, 13px);
    vertical-align: super;
    line-height: 1;
    margin-left: .14em;
    letter-spacing: .05em;
  }

  .m1 { color: var(--s1); }
  .m2 { color: var(--s2); }
  .m3 { color: var(--s3); }
  .m4 { color: var(--s4); }

  .tile[aria-pressed="true"] .m1,
  .tile[aria-pressed="true"] .m2,
  .tile[aria-pressed="true"] .m3,
  .tile[aria-pressed="true"] .m4 { color: var(--accent-ink); }

  .valence {
    position: absolute;
    top: 4px;
    right: 6px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    color: var(--muted);
  }

  .tile[aria-pressed="true"] .valence {
    color: var(--accent-ink);
    opacity: 1;
  }

  @keyframes nudge {
    0%, 100% { translate: 0; }
    20% { translate: -5px; }
    45% { translate: 4px; }
    70% { translate: -2px; }
  }

  .board.wrong .tile[aria-pressed="true"] { animation: nudge .34s ease; }

  @keyframes settle {
    0% { transform: translateY(-8px) scale(.88); }
    55% { transform: translateY(2px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
  }

  .tile.just-solved { animation: settle .46s cubic-bezier(.34, 1.56, .64, 1); }

  /* The meters and the changing game message own separate rows. That keeps
     every message the full board width and reserves its slot from the start,
     so feedback never pushes the controls down or gets squeezed by the meters. */
  .statusline {
    min-height: calc(2.9em + 8px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1.45em;
    align-items: start;
    gap: 8px;
  }

  .message {
    grid-row: 2;
    height: 1.45em;
    min-height: 1.45em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--muted);
  }
  .message.alert, .message.good { color: var(--ink); font-weight: 600; }
  .meters {
    grid-row: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    white-space: nowrap;
  }

  .lives, .meter {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .meter b { color: var(--ink); font-weight: var(--w-button); font-variant-numeric: tabular-nums; }

  .pip {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink);
    transition: background .2s ease, transform .2s ease;
  }

  .pip.spent { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); transform: scale(.8); }
  .controls { display: flex; flex-wrap: wrap; gap: 10px; }

  button.act {
    font-family: var(--font-ui);
    font-size: .875rem;
    font-weight: var(--w-body);
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s ease, border-color .14s ease, opacity .14s ease;
  }

  button.act:active:not(:disabled) { transform: translateY(0); }
  button.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  button.act:disabled { opacity: .4; cursor: default; transform: none; }
  /* "Resno?!" and "Kopirano" are one-off confirmations, not normal actions, so
     they keep the pixel register. The action-button unification deliberately
     covers the resting labels ("Predam se", "Kopiraj rezultat") and not these. */
  button.act.funky { font-family: 'Coral Pixels', var(--font-display); letter-spacing: .01em; }
  .pixel-flourish { font-family: 'Coral Pixels', var(--font-display); font-size: 1.05em; letter-spacing: .01em; }

  .entry {
    border: 1px solid var(--rule);
    background: var(--card);
    padding: clamp(20px, 3vw, 28px);
    box-shadow: var(--lift);
  }

  .entry-label {
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }

  .headword {
    font-family: var(--font-display);
    font-weight: var(--w-button);
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    display: flex;
    align-items: baseline;
    gap: .4em;
    flex-wrap: wrap;
  }

  .headword .redacted {
    width: 3.6em;
    height: .72em;
    background: repeating-linear-gradient(-45deg, var(--slot), var(--slot) 5px, var(--card) 5px, var(--card) 9px);
  }

  .headword-note {
    font-family: var(--font-ui);
    font-size: .74rem;
    color: var(--muted);
    font-style: normal;
  }

  .entry-rule { height: 1px; background: var(--rule); margin: 18px 0 4px; }
  .senses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

  .sense {
    display: grid;
    grid-template-columns: 1.6em minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
  }

  .sense:last-child { border-bottom: 0; padding-bottom: 2px; }

  .num {
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .8rem;
    line-height: 1.4;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .sense-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .slots { display: flex; align-items: center; gap: 6px; font-size: .8rem; min-height: 1.4em; }
  .slot { width: 34px; height: 9px; background: var(--slot); }

  .field {
    font-family: var(--font-display); font-weight: var(--w-button);
    font-size: .8rem;
    line-height: 1.4;
    letter-spacing: .06em;
  }

  .gloss { font-size: .95rem; line-height: 1.45; color: var(--gloss); }
  .sense-words { font-family: var(--font-ui); font-size: .78rem; color: var(--muted); }
  .sense.s1 .num, .sense.s1 .field { color: var(--s1); }
  .sense.s2 .num, .sense.s2 .field { color: var(--s2); }
  .sense.s3 .num, .sense.s3 .field { color: var(--s3); }
  .sense.s4 .num, .sense.s4 .field { color: var(--s4); }
  .sense.revealed .gloss { opacity: 1; }

  @keyframes writein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  .sense.fresh .sense-body { animation: writein .42s ease both; }

  .rsheet {
    padding: clamp(20px, 4vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .rsheet h2 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 4vw, 1.4rem);
    font-weight: var(--w-button);
    margin: 0;
    text-wrap: balance;
  }

  .rsheet h3 {
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }

  .rlead { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--muted); }
  .rlead b { color: var(--ink); font-weight: 600; }
  .facts { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .fact { font-size: .95rem; line-height: 1.55; padding-left: 14px; border-left: 1px solid var(--rule); }
  .sharebox { display: flex; flex-direction: column; gap: 12px; }

  .sharegrid {
    font-family: var(--font-mono); font-weight: var(--w-body);
    font-size: .85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow-x: auto;
  }

  /* A diagram of the solved board in its canonical 1+4+4 layout: every cell
     carries one colour bar per sense the word belongs to, so the centre shows
     four bars, each corner two and each edge one. It is the same information
     the shared emoji squares carry, in the geometry the board actually has. */
  .rboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

  .rcell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 8px 6px 7px;
    background: var(--card);
    border: 1px solid var(--rule);
  }

  .rcell.centre { background: var(--card-hi); border-color: var(--muted); }

  .rword {
    font-family: var(--font-display); font-weight: var(--w-tile);
    font-size: .72rem;
    line-height: 1.2;
    text-align: center;
    color: var(--ink);
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .rbars { display: flex; gap: 2px; height: 4px; }
  .rbar { flex: 1 1 0; }
  .rbar.b1 { background: var(--s1); }
  .rbar.b2 { background: var(--s2); }
  .rbar.b3 { background: var(--s3); }
  .rbar.b4 { background: var(--s4); }

  /* The leaderboard borrows the archive's row rhythm so the two dialogs read
     as the same kind of list rather than as two different designs. */
  .lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

  .lb-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 2px;
    min-height: 40px;
    border-bottom: 1px solid var(--rule);
  }

  .lb-list li:last-child { border-bottom: 0; }
  .lb-list li.me { font-weight: 600; }
  .lb-list li.gap { border-top: 1px dashed var(--rule); }

  .lb-rank {
    flex: none;
    min-width: 2.4em;
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .lb-list li.me .lb-rank { color: var(--ink); }

  .lb-name {
    flex: 1;
    min-width: 0;
    font-size: .95rem;
    overflow-wrap: anywhere;
  }

  .lb-value {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
  }

  .lb-sub {
    flex: none;
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--muted);
    white-space: nowrap;
  }

  .lb-empty { margin: 0; padding: 18px 2px; color: var(--muted); }

  .stats { display: flex; gap: 22px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 14px; }
  .stat { display: flex; flex-direction: column; }
  .stat b { font-family: var(--font-display); font-weight: var(--w-button); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
  .stat span { font-family: var(--font-ui); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

  dialog {
    width: min(620px, calc(100vw - 24px));
    max-height: min(86vh, 780px);
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--ink);
    overflow: auto;
    overscroll-behavior: contain;
  }

  dialog::backdrop { background: rgba(12, 13, 16, .6); }
  .sheet { padding: clamp(18px, 4vw, 28px); display: flex; flex-direction: column; gap: 14px; }
  .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .sheet h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--w-button); margin: 0; }

  .closebtn {
    flex: none;
    width: 44px; height: 44px;
    margin: -10px -10px 0 0;
    display: grid; place-items: center;
    border: 0; border-radius: var(--r-md);
    background: none; color: var(--muted);
    font-family: var(--font-ui); font-size: 1.6rem; line-height: 1;
    cursor: pointer;
  }

  .closebtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .sheet h3 {
    font-family: var(--font-display); font-weight: var(--w-label); font-size: .68rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); margin: 8px 0 -7px;
  }

  .sheet p, .sheet li { font-size: .93rem; line-height: 1.6; margin: 0; }
  .sheet ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
  .sheet a { color: inherit; text-underline-offset: 2px; }

  .inlink {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .inlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* Only a wrapper so one attribute can hide the whole section; display: contents
     hands the heading and paragraph back to the sheet's own flex spacing, which
     the h3's negative bottom margin is tuned against. [hidden] still wins,
     because it is !important. */
  #suggestEntry { display: contents; }
  .lic { font-family: var(--font-display); font-weight: var(--w-label); font-size: .7rem; color: var(--muted); }
  .rsheet p { margin: 0; }

  .note, .sheet .note, .rsheet .note {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--muted);
    border: 1px dashed var(--rule);
    border-radius: var(--r-md);
    padding: 10px 12px;
  }

  /* Suggestion form. Fields borrow the sheet's palette so the dialog stays one
     surface in both themes; the honeypot sits off-canvas rather than display: none
     because bots skip fields the UA never renders. */
  .form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
  .field { display: flex; flex-direction: column; gap: 6px; }

  .field > span {
    font-family: var(--font-display); font-weight: var(--w-label);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .field input, .field textarea {
    font-family: var(--font-ui);
    font-size: .93rem;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
  }

  .field textarea { min-height: 92px; resize: vertical; }
  .field input:focus-visible, .field textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .field ::placeholder { color: var(--muted); opacity: 1; }

  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

  .form-status {
    margin: 0;
    min-height: 1.45em;
    font-family: var(--font-ui);
    font-size: .85rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--muted);
  }

  .form-status.good, .form-status.alert { color: var(--ink); font-style: normal; font-weight: 600; }

  .archive-actions { margin-top: 2px; }
  .archive { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .archive li { display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
  .archive li:last-child { border-bottom: 0; }

  .archive a {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
  }

  .archive a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .archive a[aria-current="page"] .arch-day { font-weight: 600; }
  .archive a[aria-disabled="true"] { opacity: .48; cursor: default; }
  .arch-day { font-size: .95rem; }
  .arch-no { font-family: var(--font-display); font-weight: var(--w-label); font-size: .7rem; color: var(--muted); margin-right: .6em; }
  .arch-state { font-family: var(--font-display); font-weight: var(--w-label); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

  .unavailable {
    grid-column: 1 / -1;
    margin: 0;
    padding: 28px 18px;
    border: 1px dashed var(--rule);
    color: var(--muted);
    text-align: center;
  }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* Narrow screens read the masthead as one block -- wordmark, the day it is,
     then the navigation -- rather than as three wrapped flex rows each a full
     gap apart. The grid replaces the wrapping so the rows can be spaced by
     what they are instead of all alike, and the theme toggle rides up beside
     the wordmark, the one row with width to spare. The column gaps shrink with
     it: the desktop rhythm is generous because it has a second column to
     balance, and stacked into one it just reads as drift. */
  @media (max-width: 620px) {
    .masthead {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 0 12px;
      padding-bottom: 16px;
    }

    /* .head-right is only a desktop grouping box; dissolving it lets the three
       controls take masthead rows of their own. */
    .head-right { display: contents; }
    .site-title { grid-column: 1; grid-row: 1; justify-self: start; }
    #themeBtn { grid-column: 2; grid-row: 1; justify-self: end; }
    .dateline { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }

    .masthead-nav {
      grid-column: 1 / -1;
      grid-row: 3;
      flex-wrap: wrap;
      gap: 0 16px;
      /* Cancel the links' own side padding so the row starts on the same
         vertical as the wordmark and the dateline. */
      margin: 2px 0 0 -4px;
    }

    /* The links carry the whole navigation here, so they get a full-size
       target rather than the inline one they have beside the wordmark. */
    .masthead-nav .linkbtn { min-height: 44px; padding: 6px 4px; }

    .tagline { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; }

    .page { gap: 22px; }
    .layout { gap: 24px; }
    .board-col { gap: 20px; }
    .entry-col { gap: 18px; }
  }

  @media (hover: hover) and (pointer: fine) {
    .linkbtn:hover { color: var(--ink); }
    .icon-btn:hover { color: var(--ink); }
    .tile:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--card-hi); transform: translateY(-1px); box-shadow: 0 3px 8px -8px rgba(0,0,0,.22); }
    button.act:hover:not(:disabled) { background: var(--card-hi); border-color: var(--muted); }
    .closebtn:hover { color: var(--ink); background: var(--paper); }
    .archive a:not([aria-disabled="true"]):hover { color: var(--ink); background: var(--paper); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }