/* Pocket Study controls shared by every app surface. App CSS may size or place these
   primitives, but color, focus, state, and interaction language live here. */

.ui-control-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-2, 8px);
  line-height: 1.25;
  min-height: var(--ss-control-height, 40px);
  padding: var(--ss-space-2, 8px) var(--ss-space-4, 16px);
  border: var(--ui-control-border, var(--ss-border, 2px solid #755c62));
  border-radius: var(--ui-control-radius, var(--ss-radius-button, 2px));
  color: var(--ui-control-color, var(--ss-color-ink, #3b2b2e));
  background: var(--ui-control-background, var(--ss-color-paper, #fffaf4));
  box-shadow: var(--ui-control-shadow, var(--ss-control-shadow-soft));
  font-family: var(--ss-font-reading);
  cursor: pointer;
}

/* One slim pixel scrollbar wherever Pocket Study scrolls (Emily, 8 Oct): 6px, a square thumb, no track and no arrows, on the
   phone and the computer alike: the room and its Home card, Settings, the shop, Journal and Decks. Chrome and Safari draw it from
   the pseudo-elements, which a standard scrollbar-color or scrollbar-width would switch off, so those are set only where the
   pseudo-elements are missing. An app may name its own thumb colour in --scroll-thumb.
   It is out of sight until that area scrolls (Emily, 18 Oct): scrollbar.mjs fades --ui-scrollbar-shown from 0 to 1 while it
   scrolls and back about 900 ms later. On a computer, pointing at the bar's own strip shows it too, so it can be grabbed.
   Each area keeps its own number (it isn't inherited), so a card scrolling inside a scrolling column shows only its own bar. */
@property --ui-scrollbar-shown { syntax: "<number>"; inherits: false; initial-value: 0; }
:is(.ui-desktop, [data-ui-settings], .journal-app, .decks-app) ::-webkit-scrollbar { width: 6px; height: 6px; }
:is(.ui-desktop, [data-ui-settings], .journal-app, .decks-app) ::-webkit-scrollbar-track,
:is(.ui-desktop, [data-ui-settings], .journal-app, .decks-app) ::-webkit-scrollbar-corner { background: transparent; }
:is(.ui-desktop, [data-ui-settings], .journal-app, .decks-app) ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:is(.ui-desktop, [data-ui-settings], .journal-app, .decks-app) ::-webkit-scrollbar-thumb { --ui-scrollbar-shown: inherit; border: 0; border-radius: 0; background: color-mix(in srgb, var(--scroll-thumb, var(--ss-color-border-soft)) calc(var(--ui-scrollbar-shown) * 100%), transparent); box-shadow: none; }
/* Written out one area at a time: Chrome never matches a scrollbar part's :hover behind :is(). */
@media (hover: hover) {
  .ui-desktop ::-webkit-scrollbar-thumb:hover, .ui-desktop ::-webkit-scrollbar-thumb:active,
  [data-ui-settings] ::-webkit-scrollbar-thumb:hover, [data-ui-settings] ::-webkit-scrollbar-thumb:active,
  .journal-app ::-webkit-scrollbar-thumb:hover, .journal-app ::-webkit-scrollbar-thumb:active,
  .decks-app ::-webkit-scrollbar-thumb:hover, .decks-app ::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb, var(--ss-color-border-soft)); }
}
@supports not selector(::-webkit-scrollbar) {
  :is(.ui-desktop, [data-ui-settings], .journal-app, .decks-app), :is(.ui-desktop, [data-ui-settings], .journal-app, .decks-app) * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--scroll-thumb, var(--ss-color-border-soft)) calc(var(--ui-scrollbar-shown) * 100%), transparent) transparent; }
}

/* Author display rules must not expose a control marked hidden by its owner. */
.ui-control-button[hidden] { display: none; }

@media (hover: hover) { .ui-control-button:hover:not(:disabled) { filter: brightness(1.02); transform: translateY(-1px); } }
.ui-control-button:disabled { filter: none; transform: none; }
/* One disabled look in Keepsake and Clean, from the skin's --ss-disabled-* tokens (Room has its own rule below; unskinned apps such as Arcade are untouched); bare quiet and glyph controls only mute their ink. The answer look stays its own. */
:is([data-skin="keepsake"], [data-skin="clean"]) .ui-control-button:not(.ui-answer-choice, .ui-answer-box, .ui-control-button--primary):disabled { cursor: default; border-color: var(--ss-disabled-outline); color: var(--ss-disabled-ink); background: var(--ss-disabled-face); }
:is([data-skin="keepsake"], [data-skin="clean"]) .ui-control-button:is(.ui-control-button--quiet, .ui-control-button--glyph):not(.ui-answer-choice, .ui-answer-box):disabled { border-color: transparent; background: transparent; }
/* The main button: one per screen, in the pixel title face (house style, 17 Oct); Jersey 15 has one weight, so it is never
   drawn bold. */
.ui-control-button--primary { font-family: var(--ss-font-pixel-title); font-synthesis-weight: none; border-color: var(--ui-primary-border, var(--ss-color-accent, #b85876)); color: var(--ui-primary-color, var(--ss-color-on-accent)); background: var(--ui-primary-background, var(--ss-color-accent)); box-shadow: var(--ui-primary-shadow, var(--ui-control-shadow, var(--ss-control-shadow-soft))); }
/* A main button that can't be pressed yet stays the plum one, dimmed, so it never passes for an ordinary white button. */
.ui-control-button--primary:disabled { box-shadow: none; opacity: .45; cursor: default; }
.ui-control-button--selected { border-color: var(--ui-selected-border, var(--ss-color-purple-dark, #51476f)); color: var(--ui-selected-color, #fffaf4); background: var(--ui-selected-background, var(--ss-color-purple, #6f719f)); box-shadow: var(--ui-selected-shadow, var(--ui-control-shadow, var(--ss-control-shadow-soft))); }
/* A pill-shaped button (the phone's plain, rounded look, owner 27 Sep): fully round ends, no drop shadow. */
.ui-control-button--pill { --ui-control-radius: 999px; --ui-primary-shadow: none; border-radius: 999px; box-shadow: none; }
.ui-control-button--quiet { --ui-press-transform: none; --ui-press-color: var(--ss-color-ink); min-height: auto; padding: calc(2px * var(--ss-text-scale)) calc(4px * var(--ss-text-scale)); border-color: transparent; color: var(--ss-color-muted, #856e70); background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .ui-control-button--quiet:hover:not(:disabled) { background: var(--ss-role-hover, var(--ss-color-accent-soft, #f5e5e2)); transform: none; } }
/* A glyph control is its icon alone: no box on hover, press or mouse focus. The glyph goes from soft ink to ink on hover and to the accent while pressed, nudged toward a previous or next step through the shared press; keyboard focus draws a ring without fill. */
.ui-control-button--glyph { --ui-press-transform: none; --ui-press-color: var(--ss-role-pressed-glyph, var(--ss-color-accent)); --ui-press-shadow: none; border-color: transparent; color: var(--ss-color-ink-soft); background: transparent; box-shadow: none; transition: color 120ms ease, transform 120ms ease; }
.ui-control-button--glyph[data-ui-role="previous"] { --ui-press-transform: translateX(calc(-2 * var(--ss-press-shift-sm))); }
.ui-control-button--glyph[data-ui-role="next"] { --ui-press-transform: translateX(calc(2 * var(--ss-press-shift-sm))); }
.ui-control-button--glyph:is(:hover, :focus) { border-color: transparent; background: transparent; box-shadow: none; filter: none; }
@media (hover: hover) { .ui-control-button--glyph:hover:not(:disabled) { color: var(--ss-color-ink); filter: none; transform: none; } }
.ui-control-button--glyph:focus:not(:focus-visible) { outline: 0; }
/* A glyph button that is a word and a toggle (the phone reader's English) is underlined in the selected pink while it's on. */
.ui-control-button--glyph[aria-pressed="true"] { text-decoration: underline 2px var(--ss-role-selected-edge, var(--ss-color-pink-strong)); text-underline-offset: .4em; }
.ui-control-button--glyph:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-accent)); outline-offset: -2px; border-radius: var(--ss-radius-button); }
@media (prefers-reduced-motion: reduce) { .ui-control-button--glyph { --ui-press-transform: none; } }

/* Every small control shares the same restrained down-right press. */
:is(
  button:not(.ui-control-button--primary):not(.ui-control-button--quiet):not(.home-vocab-text-link):not(.text-button),
  .ui-control-button:not(.ui-control-button--primary),
  [role="button"],
  summary,
  .ui-segmented-choice button,
  [data-component="nav"] > button,
  [data-component="language"] button,
  [data-component="toolbar"] > button,
  [data-component="calendar-grid"] button,
  .home-calendar-dates button,
  .home-calendar-nav button,
  .journal-feeling-trigger,
  .journal-feeling-options > button,
  .home-vocab-card button:not(.ui-control-button--primary),
  .ui-audio-control:not(.ui-control-button--primary),
  .ui-workspace-controls button,
  .ui-workspace-tab,
  .ui-switch,
  .ui-dock button,
  [data-ui-settings] button,
  .settings-surface button,
  [data-action="detach-panel"],
  .deck-action-menu > summary,
  .journal-deck-action,
  .text-button
):is(:active, .is-pressed):not(:disabled):not([aria-disabled="true"]) {
  color: var(--ui-press-color, currentColor);
  transform: var(--ui-press-transform, translate(var(--ss-press-shift-sm), var(--ss-press-shift-sm)));
  box-shadow: var(--ui-press-shadow);
  transition: transform 80ms ease-out;
}

/* Primary actions make the larger, deeper click. */
:is(
  .ui-control-button--primary,
  [data-component="nav"] > button,
  [data-component="language"] button,
  [data-action="save-entry"],
  [data-vocab-known],
  [data-week-play],
  [data-kit-action="continue"],
  .decks-app .library-nav > button,
  .decks-app .deck-mode-tabs button,
  .decks-app .import-source-tabs button,
  .decks-app .test-direction-control button
):is(:active, .is-pressed):not(:disabled):not([aria-disabled="true"]) {
  transform: translate(var(--ss-press-shift-lg), var(--ss-press-shift-lg));
  box-shadow: var(--ss-button-shadow-pressed);
  transition: transform 80ms ease-out;
}

.ui-icon {
  display: inline-block;
  width: var(--ui-icon-size, 1.25em);
  height: var(--ui-icon-size, 1.25em);
  flex: 0 0 auto;
  overflow: visible;
  fill: currentColor;
  vertical-align: -.2em;
}

.ui-icon--lucide {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-icon-button {
  display: inline-grid;
  width: var(--ui-icon-button-size, var(--ss-secondary-icon-button-size, 32px));
  min-width: var(--ui-icon-button-size, var(--ss-secondary-icon-button-size, 32px));
  height: var(--ui-icon-button-size, var(--ss-secondary-icon-button-size, 32px));
  min-height: var(--ui-icon-button-size, var(--ss-secondary-icon-button-size, 32px));
  place-items: center;
  padding: 0;
}

.ui-secondary-icon-button {
  --ui-press-transform: none;
  --ui-press-shadow: var(--ss-button-shadow-pressed);
  box-sizing: border-box;
  display: inline-grid;
  width: var(--ss-secondary-icon-button-size);
  min-width: var(--ss-secondary-icon-button-size);
  height: var(--ss-secondary-icon-button-size);
  min-height: var(--ss-secondary-icon-button-size);
  place-items: center;
  padding: 0;
  border: var(--ss-border-weight-inner) solid var(--ss-color-border);
  border-radius: var(--ss-radius-xs);
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
  box-shadow: var(--ss-button-shadow-secondary);
}

@media (hover: hover) {
  .ui-secondary-icon-button:hover:not(:disabled) {
    color: var(--ss-color-ink);
    background: var(--ss-role-hover, var(--ss-color-pink-soft));
    filter: none;
    transform: none;
  }
}

.ui-secondary-icon-button :is(.ui-icon, .journal-pixel-icon) {
  width: var(--ss-text-base);
  height: var(--ss-text-base);
}

.ui-icon-bookmark-fill,
.is-filled .ui-icon-bookmark-outline {
  display: none;
}

.is-filled .ui-icon-bookmark-fill {
  display: block;
}

.ui-select {
  min-height: var(--ss-control-height, 42px);
  padding: var(--ss-space-2, 10px) var(--ss-space-3, 14px);
  border: var(--ss-border, 2px solid var(--ss-color-border, #70565b));
  border-radius: var(--ss-radius-button, 3px);
  color: var(--ss-color-ink, #3b2b2e);
  background: var(--ss-color-paper, #fffaf4);
  box-shadow: var(--ss-control-shadow-soft, inset 2px 2px 0 var(--ss-color-input, #fff), inset -2px -2px 0 var(--ss-color-tan-border, #9a7777), 2px 3px 0 rgba(73, 51, 48, 0.42));
  font: inherit;
}

.ui-select:focus-visible {
  outline: 3px solid var(--ss-color-purple, #6f719f);
  outline-offset: 2px;
}

/* One home for the small closed select and its app-drawn open list. --compact is the small box;
   --drawn opens a list the app draws, only on wide screens with a pointer (the native picker elsewhere).
   Either way it stays a real select, so keys and screen readers behave natively. */
.ui-select.ui-select--compact { box-sizing: border-box; width: auto; min-width: 0; height: calc(var(--ui-select-height, 32px) * var(--ss-text-scale, 1)); min-height: calc(var(--ui-select-height, 32px) * var(--ss-text-scale, 1)); display: inline-flex; align-items: center; justify-content: space-between; gap: calc(var(--ui-select-gap, 6px) * var(--ss-text-scale, 1)); padding: 0 calc(var(--ui-select-inline, 8px) * var(--ss-text-scale, 1)); border: var(--ss-border-weight-inner) solid var(--ss-color-border); border-radius: var(--ss-radius-xs); background-color: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-secondary); font: var(--ss-text-xs)/1 var(--ss-font-chrome); white-space: nowrap; }
.ui-select--compact::picker-icon { flex: 0 0 auto; margin: 0; }
@supports (appearance: base-select) {
  .ui-select--compact { appearance: base-select; }
  @media (hover: hover) and (min-width: 600px) {
    .ui-select--drawn::picker(select) { appearance: base-select; }
  }
  .ui-select--drawn::picker(select) { min-width: var(--ui-select-list-min-width, anchor-size(width)); margin-block: var(--ui-select-list-gap, 4px); padding: var(--ui-select-list-padding, 4px); border: var(--ui-select-list-edge, var(--ss-border-weight-inner)) solid var(--ss-color-border); border-radius: var(--ui-select-list-radius, var(--ss-radius-xs)); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ui-select-list-shadow, var(--ss-shadow-soft)); font: var(--ui-select-list-font, var(--ss-text-xs)/1.3 var(--ss-font-chrome)); }
  .ui-select--drawn option { min-height: var(--ui-select-option-height, calc(32px * var(--ss-text-scale, 1))); padding: var(--ui-select-option-padding, 6px 10px); gap: var(--ui-select-option-gap, 8px); border: var(--ui-select-option-edge, 1px) solid transparent; border-radius: var(--ui-select-option-radius, var(--ss-radius-xs)); }
  .ui-select--drawn option:checked { color: var(--ui-select-option-chosen-ink, var(--ss-color-ink)); background: var(--ui-select-option-chosen, var(--ss-role-selected, var(--ss-color-pink))); border-color: var(--ss-role-selected-edge, var(--ss-color-pink-strong)); outline: none; }
  /* A drawn list keeps its chosen option marked. */
  .ui-select--drawn option:not(:checked):is(:hover, :focus-visible) { color: var(--ss-color-ink); background: var(--ui-select-option-hover, var(--ss-role-hover, var(--ss-color-purple-light))); border-color: var(--ss-role-hover-edge, transparent); outline: none; }
  .ui-select--drawn hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--ss-color-tan-border-soft); }
}

.ui-toolbar { --ss-control-height: 40px; }
.ui-toolbar .ui-control-button { min-height: calc(40px * var(--ss-text-scale)); padding: var(--ss-space-1) var(--ss-space-2); font-size: var(--ss-text-base); white-space: normal; text-wrap: balance; }
.ui-toolbar .ui-icon { width: 20px; height: 20px; }

.ui-settings-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--ss-space-2, 8px); }
.ui-settings-trigger .ui-icon { --ui-icon-size: 18px; }

.ui-star-action { color: var(--ss-color-accent, #b85876); }
.ui-star-action .ui-icon { fill: transparent; stroke: currentColor; stroke-linejoin: round; stroke-width: 2px; }
.ui-star-action[data-state="pending"] { cursor: progress; opacity: .72; }
.ui-star-action:is([data-state="starred"], [aria-pressed="true"]) { color: var(--ss-color-purple-dark, #51476f); background: var(--ss-color-accent-soft, #f7b5c5); }
.ui-star-action:is([data-state="starred"], [aria-pressed="true"]) .ui-icon { fill: currentColor; filter: drop-shadow(1px 1px 0 #fffaf4); }

.ui-continuous-player { display: inline-flex; align-items: center; gap: var(--ss-space-2, 8px); }
.ui-continuous-player__control { flex: none; }
.ui-continuous-player[data-state="loading"] .ui-continuous-player__control { cursor: progress; }
.ui-continuous-player[data-state="playing"] .ui-continuous-player__control { color: #fffaf4; background: var(--ss-color-purple, #6f719f); }

/* Shared study surfaces. These classes own the visual language only. Each app
   still owns its prompt content, answer logic, feedback timing, and layout. */
.ui-study-surface {
  border: 2px solid var(--ui-study-border, var(--ss-color-border-soft));
  background: var(--ui-study-background, var(--ss-color-paper, #fffaf4));
  box-shadow: var(--ui-study-shadow, var(--ss-panel-shadow-soft));
}

.ui-study-prompt-card {
  border: 1px solid var(--ui-study-border, var(--ss-color-border-soft));
  background: var(--ui-study-prompt-background, var(--ss-color-paper, #fffaf4));
  box-shadow: var(--ui-study-shadow, var(--ss-panel-shadow-soft));
}

.ui-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(62px, auto);
  gap: 11px 14px;
}

.ui-answer-choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 62px;
  padding: 8px 14px 8px 9px;
  border: 1px solid var(--ui-answer-border, var(--ss-color-border-soft));
  color: var(--ui-answer-color, var(--ss-color-ink, #3b2b2e));
  background: var(--ui-answer-background, var(--ss-color-paper, #fffaf4));
  box-shadow: var(--ui-answer-shadow, var(--ss-shadow-soft));
  text-align: left;
}

.ui-answer-choice__number {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: var(--ss-radius-sm);
  color: var(--ui-answer-accent-color, var(--ss-color-ink, #3b2b2e));
  background: var(--ui-answer-accent-background, var(--ss-color-accent-soft, #f7b5c5));
  box-shadow: none;
  font-weight: 700;
}

.ui-answer-choice__label { min-width: 0; line-height: 1.35; }

/* The answer look (the --ss-answer-* tokens): a box that shows an answer, plain, right or wrong, and answer text
   in the right or wrong ink. Right and wrong look like this everywhere; never a tinted pill or a side bar. */
.ui-answer-box,
.ui-answer-choice:is(.ui-answer-choice--correct, .ui-answer-choice--revealed, .ui-answer-choice--incorrect) {
  --ui-answer-look-ink: var(--ss-answer-box-ink);
  --ui-answer-look-edge: var(--ss-answer-box-edge);
  --ui-answer-look-paper: var(--ss-answer-box-paper);
  --ui-answer-look-bevel: var(--ss-answer-box-bevel);
  border: var(--ss-answer-edge-width) solid var(--ui-answer-look-edge);
  border-radius: var(--ss-answer-radius);
  background: var(--ui-answer-look-paper);
  box-shadow: var(--ss-answer-bevel, inset 2px 2px var(--ss-answer-bevel-light), inset -2px -2px var(--ui-answer-look-bevel));
}

.ui-answer-box--right,
.ui-answer-choice.ui-answer-choice--correct,
.ui-answer-choice.ui-answer-choice--revealed {
  --ui-answer-look-ink: var(--ss-answer-right-ink);
  --ui-answer-look-edge: var(--ss-answer-right-edge);
  --ui-answer-look-paper: var(--ss-answer-right-paper);
  --ui-answer-look-bevel: var(--ss-answer-right-bevel);
}

.ui-answer-box--wrong,
.ui-answer-choice.ui-answer-choice--incorrect {
  --ui-answer-look-ink: var(--ss-answer-wrong-ink);
  --ui-answer-look-edge: var(--ss-answer-wrong-edge);
  --ui-answer-look-paper: var(--ss-answer-wrong-paper);
  --ui-answer-look-bevel: var(--ss-answer-wrong-bevel);
}

/* A graded choice is the answer box in its answer's ink; its number sits on paper inside the answer's edge. */
.ui-answer-choice:is(.ui-answer-choice--correct, .ui-answer-choice--revealed, .ui-answer-choice--incorrect) { color: var(--ui-answer-look-ink); }
.ui-answer-choice:is(.ui-answer-choice--correct, .ui-answer-choice--revealed, .ui-answer-choice--incorrect) .ui-answer-choice__number {
  border: 1px solid var(--ui-answer-look-edge);
  color: var(--ui-answer-look-ink);
  background: var(--ss-answer-box-paper);
  box-shadow: none;
}

.ui-answer-ink { --ui-answer-look-mark: var(--ss-answer-box-edge); color: var(--ss-answer-box-ink); }
.ui-answer-ink--right { --ui-answer-look-mark: var(--ss-answer-right-edge); color: var(--ss-answer-right-ink); }
.ui-answer-ink--wrong { --ui-answer-look-mark: var(--ss-answer-wrong-edge); color: var(--ss-answer-wrong-ink); }
/* A marked change: the changed characters underlined in the answer's edge colour. */
.ui-answer-ink--marked { text-decoration: underline 2px var(--ui-answer-look-mark); text-underline-offset: .2em; }

/* A typed answer is the house field (house style, 17 Oct): paper, a 2px plum edge, 6px corners, no inner bevel. */
.ui-answer-field {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ui-answer-field-height, 54px);
  padding: 10px 13px;
  border: 2px solid var(--ui-answer-border, var(--ss-lock-ground));
  border-radius: var(--ss-radius-control);
  color: var(--ui-answer-color, var(--ss-color-ink));
  background: var(--ss-color-paper);
  box-shadow: none;
  font-size: var(--ss-text-lg, 1.25rem);
}

.ui-settings-host { container-type: size; }

.ui-settings-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(64,48,55,.48);
}
.ui-settings-backdrop[hidden] { display: none; }

.ui-settings-surface {
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100% - 36px));
  min-height: 0;
  max-height: min(760px, calc(100% - 36px));
  overflow: hidden;
  border: 2px solid var(--ss-color-border, #80666d);
  color: var(--ss-color-ink, #3b2b2e);
  background: var(--ss-color-paper, #fffaf4);
  box-shadow: var(--ss-panel-shadow, inset 2px 2px #fff, inset -2px -2px #c3aaa4, 6px 7px rgba(45,29,35,.38));
}

.ui-settings-header,
.ui-settings-footer { flex: none; }
.ui-settings-scroll { display: flex; min-height: 0; flex-direction: column; overflow: auto; }
.ui-settings-section { display: grid; order: 30; }
.ui-settings-section[data-settings-section="display"] { order: 10; }
.ui-settings-section[data-settings-section="audio"] { order: 20; }
.ui-settings-section[data-settings-section="behavior"] { order: 30; }
.ui-settings-section[data-settings-section="controls"] { order: 40; }
.ui-settings-section__heading { display: flex; align-items: center; gap: var(--ss-space-2, 8px); }
.ui-settings-section__heading .ui-icon { color: var(--ss-color-purple-dark, #51476f); }
.ui-settings-row {
  display: grid;
  grid-template-columns: 40px minmax(190px, 1fr) minmax(190px, auto);
  align-items: center;
  gap: 10px 14px;
  min-height: 68px;
  padding: 9px 4px;
}
.ui-settings-row__icon { display: grid; place-items: center; width: 38px; height: 38px; color: #765261; background: var(--ss-color-accent-soft, #f5e5e2); }
.ui-settings-row__copy { display: grid; gap: 3px; min-width: 0; }
.ui-settings-row__copy small { color: var(--ss-color-muted, #856e70); font-family: var(--ss-font-reading, sans-serif); line-height: 1.45; }
.ui-settings-scope { width: max-content; padding: 2px 5px; border: 1px solid var(--ss-color-border-soft, #c7aaa7); color: var(--ss-color-purple-dark, #51476f); background: var(--ss-color-purple-soft, #e4e1ef); font: 700 var(--ss-text-xs, .75rem)/1.2 var(--ss-font-pixel, monospace); }
.ui-settings-row__control { justify-self: end; min-width: 0; }

/* The switch (house style, Emily 17 Oct): Off or On written beside a small square in a plum frame; when on, the track fills
   tan and the square crosses to the word's other side. The same switch at every size and in every app (Settings drew it first). */
.ui-switch { display: inline-flex; flex: none; flex-direction: row; align-items: center; justify-content: space-between; gap: calc(8px * var(--ss-text-scale)); box-sizing: border-box; width: max-content; min-width: calc(84px * var(--ss-text-scale)); height: calc(30px * var(--ss-text-scale)); min-height: calc(30px * var(--ss-text-scale)); padding: 0 calc(8px * var(--ss-text-scale)); border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink-soft); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard); font: 700 var(--ss-text-xs)/1 var(--ss-font-reading); white-space: nowrap; }
/* The switch is as wide as its word needs (Emily's iPhone, 18 Oct: Safari's rounded face cut "On" and "Off" off at a fixed
   width), never narrower than the house 84 px; the word's box always holds "Off", so turning it on or off never resizes it. */
.ui-switch > span { display: grid; flex: none; }
.ui-switch > span::before { content: "Off"; height: 0; overflow: hidden; visibility: hidden; }
.ui-switch > i { display: block; flex: none; box-sizing: border-box; width: calc(14px * var(--ss-text-scale)); height: calc(14px * var(--ss-text-scale)); border: 1px solid var(--ss-color-tan-border); border-radius: 3px; background: var(--ss-color-bg); }
.ui-switch[aria-checked="true"] { flex-direction: row-reverse; border-color: var(--ss-lock-ground); color: var(--ss-switch-on-mark); background: var(--ss-switch-on); box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--ss-color-input) 28%, transparent), inset -1px -1px 0 color-mix(in srgb, var(--ss-lock-raise) 55%, transparent), 2px 3px 0 var(--ss-lock-raise); }
.ui-switch[aria-checked="true"] > i { border-color: var(--ss-switch-on-mark); background: var(--ss-switch-on-mark); }

.ui-segmented-choice { display: flex; align-items: stretch; }
/* The joined choice (house style, 17 Oct): one track with a plum frame, 1px plum lines between its parts, the chosen part
   solid plum with paper words, the reading face. */
.ui-segmented-choice button { flex: 1; min-height: var(--ss-control-height, 40px); padding: var(--ss-space-1, 6px) var(--ss-space-2, 10px); border: 2px solid var(--ss-lock-ground); color: var(--ss-color-ink); background: var(--ss-color-paper); font-family: var(--ss-font-reading); font-weight: 700; }
.ui-segmented-choice button:first-child { border-radius: var(--ss-radius-control) 0 0 var(--ss-radius-control); }
.ui-segmented-choice button:last-child { border-radius: 0 var(--ss-radius-control) var(--ss-radius-control) 0; }
.ui-segmented-choice button:only-child { border-radius: var(--ss-radius-control); }
.ui-segmented-choice button + button { border-left-width: 1px; margin-left: -1px; }
.ui-segmented-choice button[aria-pressed="true"] { color: var(--ui-selected-color, var(--ss-color-paper)); border-color: var(--ui-selected-border, var(--ss-lock-ground)); background: var(--ui-selected-background, var(--ss-lock-ground)); box-shadow: var(--ui-selected-shadow, none); }

.ui-audio-control {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ss-radius-button, 2px);
  color: var(--ss-color-purple-dark); /* a plain plum icon (house style, 17 Oct) */
  background: transparent;
  box-shadow: none;
  line-height: 1;
  vertical-align: middle;
}
.ui-audio-control .ui-icon { --ui-icon-size: 20px; }
@media (hover: hover) { .ui-audio-control:hover { color: var(--ss-color-purple-dark); background: var(--ss-role-hover, color-mix(in srgb, var(--ss-color-purple-dark) 10%, transparent)); } }
.ui-audio-control[aria-pressed="true"] { color: var(--ss-color-paper); background: var(--ss-color-purple-dark); }
.ui-audio-control--labelled { display: inline-flex; align-items: center; justify-content: center; gap: var(--ss-space-2, 8px); width: auto; max-width: 100%; min-width: var(--ss-control-height, 40px); height: auto; min-height: var(--ss-control-height, 40px); padding: 8px var(--ss-space-3, 12px); border: var(--ss-border, 2px solid #755c62); background: var(--ss-color-paper, #fffaf4); box-shadow: var(--ss-control-shadow-soft, inset 2px 2px #fff, inset -2px -2px #b99d95); line-height: 1.25; text-align: center; white-space: normal; }
.ui-audio-control--labelled > span { min-width: 0; overflow-wrap: anywhere; }

.ui-listening-prompt { display: grid; justify-items: center; gap: 14px; width: min(480px, 100%); padding: 12px 4px; border: 0; color: var(--ss-color-purple, #77749f); background: transparent; font: 16px/1.4 var(--ss-font-ui, monospace); cursor: pointer; }

/* Room control paint: bevels and hard shadows sit inside the existing metrics. */
:where(.journal-app[data-skin="room"]) .ui-control-button:not(.ui-answer-choice),
:where(.decks-app[data-skin="room"]) .ui-control-button:not(.ui-answer-choice) {
  border: 2px solid var(--ss-window-outline);
  border-radius: var(--ss-radius-sm);
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
  box-shadow: var(--ss-button-shadow-hard);
  font-family: var(--ss-font-retro);
}
.journal-app[data-skin="room"] .ui-control-button:not(.ui-answer-choice):disabled,
.decks-app[data-skin="room"] .ui-control-button:not(.ui-answer-choice):disabled { border-color: var(--ss-disabled-outline); color: var(--ss-disabled-ink); background: var(--ss-disabled-face); box-shadow: none; }
.journal-app[data-skin="room"] :is(.ui-control-button--primary, .ui-control-button--selected),
.decks-app[data-skin="room"] :is(.ui-control-button--primary, .ui-control-button--selected) { border-color: var(--ss-color-pink-strong); color: var(--ss-color-ink); background: var(--ss-color-pink); box-shadow: var(--ss-button-shadow-hard); }
.journal-app[data-skin="room"] .ui-control-button--quiet,
.decks-app[data-skin="room"] .ui-control-button--quiet { border-color: transparent; background: transparent; box-shadow: none; transform: none; }

.journal-app[data-skin="room"] .ui-segmented-choice,
.decks-app[data-skin="room"] .ui-segmented-choice { border: 2px solid var(--ss-window-outline); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard); }
.journal-app[data-skin="room"] .ui-segmented-choice button,
.decks-app[data-skin="room"] .ui-segmented-choice button { border: 0; border-right: 2px solid var(--ss-window-outline); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: inset 1px 1px 0 var(--ss-bevel-light), inset -1px -1px 0 var(--ss-bevel-shade); font-family: var(--ss-font-retro); }
.journal-app[data-skin="room"] .ui-segmented-choice button:last-child,
.decks-app[data-skin="room"] .ui-segmented-choice button:last-child { border-right: 0; }
.journal-app[data-skin="room"] .ui-segmented-choice button[aria-pressed="true"],
.decks-app[data-skin="room"] .ui-segmented-choice button[aria-pressed="true"] { color: var(--ss-color-ink); background: var(--ss-color-pink); box-shadow: inset 1px 1px 0 var(--ss-bevel-light), inset -1px -1px 0 var(--ss-color-pink-strong); }

.journal-app[data-skin="room"] .ui-select,
.decks-app[data-skin="room"] .ui-select { appearance: none; border: 2px solid var(--ss-window-outline); background-color: var(--ss-color-paper); background-image: linear-gradient(45deg, transparent 50%, var(--ss-select-chevron) 50%), linear-gradient(135deg, var(--ss-select-chevron) 50%, transparent 50%); background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; box-shadow: var(--ss-field-bevel); font-family: var(--ss-font-retro); }
.ui-listening-prompt__visual { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; }
.ui-listening-prompt__speaker { width: 88px; height: 88px; padding: 18px; }
.ui-listening-prompt__speaker .ui-icon { width: 42px; height: 42px; }
.ui-listening-prompt__wave { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 3px; opacity: .45; overflow: hidden; }
.ui-listening-prompt__wave--right { flex-direction: row-reverse; }
.ui-listening-prompt__wave i { flex: 1 0 2px; max-width: 4px; height: var(--voice-height); background: currentColor; transform: scaleY(.55); }
@media (hover: hover) { .ui-listening-prompt:hover .ui-listening-prompt__speaker { filter: brightness(1.06); } }
.ui-listening-prompt.is-playing .ui-listening-prompt__wave { opacity: 1; }
.ui-listening-prompt.is-playing .ui-listening-prompt__wave i { animation: ui-voice-activity 620ms ease-in-out var(--voice-delay) infinite alternate; }
@keyframes ui-voice-activity { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ui-listening-prompt.is-playing .ui-listening-prompt__wave i { animation: none; transform: none; } }

.ui-shortcut-badge {
  display: inline-grid;
  min-width: 17px;
  min-height: 15px;
  place-items: center;
  padding: 1px 3px;
  border: 1px solid var(--ss-color-purple-dark); /* a paper keycap with the house edge (house style, 17 Oct) */
  border-radius: 3px;
  color: var(--ss-color-purple-dark);
  background: var(--ss-color-paper);
  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ss-color-purple-dark) 35%, transparent);
  font: inherit;
}

@container (max-width: 760px) {
  .ui-settings-backdrop { padding: 5px; }
  .ui-settings-surface { width: calc(100% - 20px); max-height: calc(100% - 16px); }
  .ui-settings-row { grid-template-columns: 38px 1fr auto; gap: 9px 11px; }
  .ui-settings-row__control { grid-column: 2 / -1; justify-self: stretch; }
}

@container (max-height: 500px) {
  .ui-settings-backdrop { padding: 5px; }
  .ui-settings-surface { max-height: calc(100% - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    button,
    .ui-control-button,
    [role="button"],
    summary,
    .ui-segmented-choice button,
    [data-component="nav"] > button,
    [data-component="language"] button,
    [data-component="toolbar"] > button,
    [data-component="calendar-grid"] button,
    .home-calendar-dates button,
    .home-calendar-nav button,
    .journal-feeling-trigger,
    .journal-feeling-options > button,
    .home-vocab-card button,
    .ui-audio-control,
    .ui-workspace-controls button,
    .ui-workspace-tab,
    .ui-switch,
    .ui-dock button,
    [data-ui-settings] button,
    .settings-surface button,
    [data-action="detach-panel"],
    .deck-action-menu > summary
  ) { transition: none !important; }
}

/* Zone page tabs (Journal's Today / Entries, Decks' Decks / Starters): one look for the row that switches a zone's pages. */
.ui-zone-tabs { display: flex; align-items: center; gap: var(--ss-space-2, 8px); min-height: calc(52px * var(--ss-text-scale)); }
.ui-zone-tab { --ui-press-transform: none; --ui-press-shadow: var(--ss-button-shadow-pressed); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: 0; height: auto; min-height: calc(36px * var(--ss-text-scale)); padding: var(--ss-space-1) var(--ss-space-2); border: var(--ss-border-weight-inner) solid var(--ss-color-border); border-radius: var(--ss-radius-xs); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-secondary); font: var(--ss-text-base)/1.15 var(--ss-font-chrome); letter-spacing: 0; text-transform: none; white-space: normal; text-wrap: balance; }
@media (hover: hover) { .ui-zone-tab:hover:not(:disabled, [aria-pressed="true"]) { color: var(--ss-color-ink); background: var(--ss-role-hover, var(--ss-color-pink-soft)); filter: none; transform: none; } }
.ui-zone-tab[aria-pressed="true"] { border-color: var(--ss-role-selected-edge, var(--ss-color-pink-strong)); color: var(--ss-role-on-selected, var(--ss-color-ink)); background: var(--ss-role-selected, var(--ss-color-pink)); }
/* A pressed tab stays level under the pointer, so its label keeps its neighbours' baseline. */
.ui-zone-tab[aria-pressed="true"]:hover { filter: none; transform: none; }
.ui-zone-tab:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-pink-strong)); outline-offset: 3px; }

/* A whole view that could not finish loading, drawn large (owner, 30 Sep). It follows Journal's empty state: the icon, line,
   sentence and one main action sit centred on both axes. The icon takes the notice role; the
   only pink is the main button. */
.ui-load-failure { box-sizing: border-box; width: 100%; height: 100%; min-height: 100%; display: grid; align-content: center; justify-items: center; gap: var(--ss-space-3); padding: var(--ss-space-5); overflow: auto; text-align: center; }
.ui-load-failure__icon { display: grid; place-items: center; width: calc(60px * var(--ss-text-scale)); height: calc(60px * var(--ss-text-scale)); border: 1px solid var(--ss-role-notice-edge, var(--ss-color-purple, #6f719f)); border-radius: 50%; color: var(--ss-role-notice-edge, var(--ss-color-purple, #6f719f)); background: var(--ss-role-notice, #f1eef8); }
.ui-load-failure__icon .ui-icon { width: calc(30px * var(--ss-text-scale)); height: calc(30px * var(--ss-text-scale)); }
.ui-load-failure__title { max-width: 24em; margin: 0; color: var(--ss-color-ink); font-size: var(--ss-text-title); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.ui-load-failure__body { max-width: 34em; margin: 0; color: var(--ss-color-ink-soft); font-size: var(--ss-text-base); line-height: 1.5; text-wrap: balance; }
/* Buttons speak in the UI face (Courier Prime in Keepsake), as Journal's and the window titles do; the sentences stay in the reading face. */
.ui-load-failure .ui-control-button { margin-top: var(--ss-space-2); }
/* One panel of a window that still works: the same pieces, smaller, centred in the panel, and a neutral action so it is never the loudest thing in the window. */
.ui-load-failure--panel { height: auto; min-height: calc(160px * var(--ss-text-scale)); gap: var(--ss-space-1); padding: var(--ss-space-3); }
.ui-load-failure--panel .ui-load-failure__icon { width: calc(32px * var(--ss-text-scale)); height: calc(32px * var(--ss-text-scale)); }
.ui-load-failure--panel .ui-load-failure__icon .ui-icon { width: calc(16px * var(--ss-text-scale)); height: calc(16px * var(--ss-text-scale)); }
.ui-load-failure--panel .ui-load-failure__title { max-width: 22em; font-size: var(--ss-text-base); }
.ui-load-failure--panel .ui-load-failure__body { max-width: 26em; font-size: var(--ss-text-xs); line-height: 1.45; }
.ui-load-failure--panel .ui-control-button { margin-top: var(--ss-space-1); }
/* Something still on its way (owner, 30 Sep; the look is the owner's pick, 16 Oct): the brand plum, a square folding step by
   step into the crane in cream ("Five folds in a row"), and "Opening <App>…" under it in the pixel title face, centred where
   the thing will appear. The finished crane, still, under reduced motion. */
/* The little Pocket Study computer: the profile picker's monitor. Its screen holds what it shows. */
.ui-pocket-computer { display: grid; width: 96px; justify-items: center; filter: drop-shadow(3px 4px 0 rgb(83 55 57 / 24%)); }
.ui-pocket-computer__monitor { position: relative; box-sizing: border-box; width: 92px; height: 67px; padding: 8px; border: 3px solid #725667; border-radius: 5px; background: #f1d8c8; box-shadow: inset 3px 3px #fff8ee, inset -5px -5px #dcaeb6; }
.ui-pocket-computer__monitor::after { position: absolute; right: 5px; bottom: 4px; width: 4px; height: 4px; border: 1px solid #7e3e5c; background: #f18caf; box-shadow: 0 0 0 1px #ffdce6; content: ""; }
.ui-pocket-computer__screen { position: relative; box-sizing: border-box; display: grid; height: 100%; overflow: hidden; place-items: center; border: 3px solid #463a5b; color: #ffdce6; background: #303753; box-shadow: inset 2px 2px #22283e, inset -2px -2px #616b8d; font: 700 12px/1 var(--ss-font-pixel); text-shadow: 1px 1px #7c3c5b; }
.ui-pocket-computer__screen::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 46%, rgb(255 255 255 / 12%) 48% 52%, transparent 54%); animation: ui-pocket-computer-scan 1.8s steps(5, end) infinite; content: ""; pointer-events: none; }
.ui-pocket-computer__neck { box-sizing: border-box; width: 18px; height: 7px; border-right: 3px solid #725667; border-left: 3px solid #725667; background: #e5bdba; }
.ui-pocket-computer__base { box-sizing: border-box; width: 55px; height: 9px; border: 3px solid #725667; border-radius: 2px 2px 5px 5px; background: #f1d8c8; box-shadow: inset 2px 2px #fff8ee, inset -3px -3px #dcaeb6; }
@keyframes ui-pocket-computer-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .ui-pocket-computer__screen::after { animation: none; } }

.ui-opening { --ui-opening-scale: 3; box-sizing: border-box; color: var(--ss-crane-cream); background: var(--ss-lock-ground); width: 100%; height: 100%; min-height: 100%; display: grid; align-content: center; justify-items: center; gap: var(--ss-space-3); padding: var(--ss-space-5); overflow: hidden; text-align: center; }
.ui-opening--small { --ui-opening-scale: 2; }
/* The owner's pick (16 Oct): the Library's "Five folds in a row" on the brand plum, the square folding step by step into
   the crane: 16 frames of 112 x 32 art pixels (assets/opening-folds-strip.png, scripts/recolour-opening-folds.py), shown at a
   whole-pixel scale. */
.ui-opening__folds { display: block; width: calc(112px * var(--ui-opening-scale)); height: calc(32px * var(--ui-opening-scale)); background: url("./assets/opening-folds-strip.png") 0 0 / calc(1792px * var(--ui-opening-scale)) calc(32px * var(--ui-opening-scale)) no-repeat; image-rendering: pixelated; animation: ui-opening-folds 4.2s steps(16) infinite; }
.ui-opening__text { max-width: 24em; margin: 0; color: var(--ss-crane-cream); font-family: var(--ss-font-pixel-title, var(--ss-font-pixel)); font-size: var(--ss-text-base); line-height: 1.5; }
@keyframes ui-opening-folds { to { background-position-x: calc(-1792px * var(--ui-opening-scale)); } }
/* Reduce Motion: the finished crane, still. */
@media (prefers-reduced-motion: reduce) { .ui-opening__folds { animation: none; background-position-x: calc(-1680px * var(--ui-opening-scale)); } }

/* The small pill switch (owner's phone pick, 27 Sep): one rounded track holding two or three short choices, the chosen one
   on the selected pink. One control for Today's English / 日本語, Read · Focus · Shadowing and the phone Settings tabs.
   segmentedChoiceMarkup({ variant: "pill" }) draws it; a row of buttons marked aria-pressed or aria-selected takes it too. */
.ui-pill-switch { box-sizing: border-box; display: inline-flex; align-items: stretch; gap: 2px; width: max-content; max-width: 100%; padding: 3px; border: 1px solid var(--ss-color-border-soft, #c7aaa7); border-radius: 999px; background: var(--ss-color-paper, #fffaf4); }
.ui-pill-switch > button { --ui-press-transform: none; --ui-press-shadow: none; box-sizing: border-box; flex: 0 1 auto; min-width: 0; min-height: calc(32px * var(--ss-text-scale)); display: inline-flex; align-items: center; justify-content: center; gap: .35em; margin: 0; padding: 0 calc(14px * var(--ss-text-scale)); border: 0; border-radius: 999px; color: var(--ss-color-ink-soft, #725661); background: transparent; box-shadow: none; font: var(--ss-text-xs, 13px)/1.1 var(--ss-font-chrome, monospace); white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .ui-pill-switch > button:hover:not(:disabled, [aria-pressed="true"], [aria-selected="true"]) { color: var(--ss-color-ink, #3b2b2e); background: var(--ss-role-hover, var(--ss-color-pink-soft, #f6dfe2)); } }
.ui-pill-switch > button:is([aria-pressed="true"], [aria-selected="true"]) { color: var(--ss-role-on-selected, var(--ss-color-ink, #3b2b2e)); background: var(--ss-role-selected, var(--ss-color-pink, #f4b6c4)); box-shadow: none; }
.ui-pill-switch > button:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark, #51476f)); outline-offset: 1px; }

/* The phone tab bar: a room's sections along the bottom of a phone, icon over label, the current tab's icon on the soft
   pink pill. No line above it; the bar keeps clear of the home indicator. phoneTabBarMarkup() draws it. */
.ui-phone-tabs { box-sizing: border-box; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); border: 0; color: var(--ss-color-ink-soft, #725661); background: var(--ss-color-paper, #fffaf4); }
.ui-phone-tabs__tab { --ui-press-transform: none; --ui-press-shadow: none; position: relative; box-sizing: border-box; min-width: 0; min-height: calc(54px * var(--ss-text-scale)); display: grid; justify-items: center; align-content: center; gap: 3px; margin: 0; padding: 4px 2px; border: 0; border-radius: var(--ss-radius-md, 6px); color: inherit; background: transparent; box-shadow: none; font: var(--ss-text-xs, 13px)/1.1 var(--ss-font-chrome, monospace); cursor: pointer; }
.ui-phone-tabs__icon { display: grid; place-items: center; width: 52px; height: 28px; border-radius: 999px; transition: background 120ms ease; }
.ui-phone-tabs__icon .ui-icon { --ui-icon-size: 22px; }
.ui-phone-tabs__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-phone-tabs__tab:is([aria-pressed="true"], [aria-current="page"]) { color: var(--ss-color-ink, #3b2b2e); }
.ui-phone-tabs__tab:is([aria-pressed="true"], [aria-current="page"]) .ui-phone-tabs__icon { background: var(--ss-role-selected-soft, var(--ss-color-pink-soft, #f6dfe2)); }
@media (hover: hover) { .ui-phone-tabs__tab:hover:not([aria-pressed="true"], [aria-current="page"]) { color: var(--ss-color-ink, #3b2b2e); } }
.ui-phone-tabs__tab:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark, #51476f)); outline-offset: -2px; }
/* A count (Mail's unread letters) hangs off the icon's top right corner, in the tag colours. */
/* The tab's count is the house count badge (house style, 17 Oct): a tan square with a navy number. */
.ui-phone-tabs__badge { position: absolute; top: 1px; left: calc(50% + 9px); min-width: 18px; min-height: 18px; box-sizing: border-box; display: grid; place-items: center; padding: 0 3px; border: 1px solid var(--ss-lock-raise); border-radius: 4px; color: var(--ss-lock-raise); background: var(--ss-guide-tan); box-shadow: 0 0 0 2px var(--ss-color-purple-dark); font: 700 var(--ss-text-xs)/1 var(--ss-font-reading); font-variant-numeric: tabular-nums; pointer-events: none; }
.ui-phone-tabs__badge[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-phone-tabs__icon { transition: none; } }

/* The progress strip (house style, 17 Oct; progressStripMarkup in semantic-controls.mjs): one segment per question, 8px
   tall with a 1px edge and 2px corners; the ones done are filled in the edge colour, the one you are on in the look's band
   colour (sand in Room), the rest paper. The same on phone and computer, in every app. */
.ui-progress-strip { display: flex; gap: 4px; min-width: 0; }
.ui-progress-strip > i { flex: 1 1 0; min-width: 0; height: 8px; box-sizing: border-box; border: 1px solid var(--ss-color-purple-dark); border-radius: 2px; background: var(--ss-color-paper); }
.ui-progress-strip > i.is-done { background: var(--ss-color-purple-dark); }
.ui-progress-strip > i.is-now { background: var(--ss-strip-calendar, var(--ss-color-pink-soft)); }

/* ── House style pieces (Emily, 17 Oct) ─────────────────────────────────────────────────────────────────────────────────
   One look per piece, named here so every app draws it the same way; packages/ui/README.md lists them. Colours come from
   the look's tokens, corners from --ss-radius-control / -dialog / -sheet, the raise from the look's --ss-button-shadow-hard,
   and a filled control's raise from --ui-house-raise-filled below. A screen places and sizes a piece; it doesn't repaint it. */
:root { --ui-house-raise-filled: inset 1px 1px 0 color-mix(in srgb, var(--ss-color-input) 28%, transparent), inset -1px -1px 0 color-mix(in srgb, var(--ss-lock-raise) 55%, transparent), 2px 3px 0 var(--ss-lock-raise); }

/* The brick button, for delete, archive, remove and reset: the main button's shape and face, in brick. With --quiet it is
   a brick underlined link, for a secondary one (the phone's Delete entry). */
.ui-control-button--danger { border-color: var(--ss-role-destructive-edge); color: var(--ss-color-paper); background: var(--ss-role-destructive); box-shadow: var(--ui-house-raise-filled); font-family: var(--ss-font-pixel-title); font-synthesis-weight: none; }
.ui-control-button--quiet.ui-control-button--danger { border-color: transparent; color: var(--ss-role-destructive); background: transparent; box-shadow: none; font-family: var(--ss-font-reading); text-decoration: underline; text-underline-offset: 2px; }

/* The pick box, for a tick or a one-of-many pick: a 24px square with a 2px plum edge; picked, it fills plum with a paper
   tick (always drawn, so the pick never rests on colour alone). It is picked inside a control with aria-checked="true" or
   aria-selected="true", or with .is-on; the row itself gets no wash. */
.ui-tick { position: relative; flex: none; display: inline-block; box-sizing: border-box; width: calc(24px * var(--ss-text-scale)); height: calc(24px * var(--ss-text-scale)); border: 2px solid var(--ss-lock-ground); border-radius: 4px; background: var(--ss-color-paper); vertical-align: middle; }
:is([aria-checked="true"], [aria-selected="true"]) > .ui-tick, .ui-tick.is-on { background: var(--ss-lock-ground); }
/* A real checkbox takes it too (<input type="checkbox" class="ui-tick">), never the browser's own box. */
input[type="checkbox"].ui-tick { appearance: none; margin: 0; cursor: pointer; }
input[type="checkbox"].ui-tick:checked { background: var(--ss-lock-ground); }
input[type="checkbox"].ui-tick:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-lock-ground)); outline-offset: 2px; }
input[type="checkbox"].ui-tick:checked::after,
:is([aria-checked="true"], [aria-selected="true"]) > .ui-tick::after, .ui-tick.is-on::after { content: ""; position: absolute; left: 30%; top: 12%; width: 28%; height: 52%; border: solid var(--ss-color-paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* The pop-up that comes from a control (add to deck, a menu, a filter): white paper, 2px plum edge, 6px corners, the hard
   2 x 3 navy shadow, and a caret joined to the control it came from; no title bar and no lines between rows, each row a
   plain button. The same on phone and computer. The screen places it; --ui-popover-caret-x moves the caret along the top
   edge (from the start), and .ui-popover--above puts the caret on the bottom edge for a pop-up that opens upwards. */
.ui-popover { --ui-popover-caret: calc(10px * var(--ss-text-scale)); position: absolute; z-index: 30; box-sizing: border-box; min-width: calc(180px * var(--ss-text-scale)); display: grid; gap: 2px; padding: calc(8px * var(--ss-text-scale)); border: 2px solid var(--ss-color-purple-dark); border-radius: var(--ss-radius-control); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: 2px 3px 0 var(--ss-lock-raise); text-align: start; }
.ui-popover::before { content: ""; position: absolute; top: calc(var(--ui-popover-caret) / -2 - 1px); left: calc(var(--ui-popover-caret-x, 24px) - var(--ui-popover-caret) / 2); box-sizing: border-box; width: var(--ui-popover-caret); height: var(--ui-popover-caret); border: inherit; border-width: 2px 0 0 2px; border-radius: 0; background: var(--ss-color-paper); transform: rotate(45deg); pointer-events: none; }
.ui-popover--above::before { top: auto; bottom: calc(var(--ui-popover-caret) / -2 - 1px); transform: rotate(225deg); }
.ui-popover > :is(button, a) { display: flex; align-items: center; gap: calc(8px * var(--ss-text-scale)); width: 100%; min-height: calc(40px * var(--ss-text-scale)); padding: 0 calc(10px * var(--ss-text-scale)); border: 0; border-radius: 4px; color: var(--ss-color-ink); background: transparent; box-shadow: none; font: 500 var(--ss-text-base)/1.25 var(--ss-font-reading); text-align: start; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .ui-popover > :is(button, a):hover:not(:disabled) { background: var(--ss-role-hover, var(--ss-color-purple-soft)); } }
.ui-popover > :is(button, a):focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: -2px; }

/* The dialog on a computer: a plain pop-up, never a window (Settings alone is a window). White paper, a 1px plum edge,
   10px corners, a 2 x 4 plum shadow; the title at the left in the pixel title face, a small paper ✕ square at the right;
   the words; then the buttons in one row, the quiet one at the left and the main one at the right. It sits on a backdrop
   of 34% ink. */
.ui-dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ss-color-ink) 34%, transparent); }
.ui-dialog { box-sizing: border-box; width: min(calc(480px * var(--ss-text-scale)), 100%); max-height: calc(100% - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--ss-lock-ground) 45%, transparent); border-radius: var(--ss-radius-dialog); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: inset 1px 1px 0 var(--ss-color-input), 2px 4px 0 color-mix(in srgb, var(--ss-lock-ground) 42%, transparent), 0 22px 44px -14px color-mix(in srgb, var(--ss-color-ink) 55%, transparent); text-align: start; }
.ui-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.ui-dialog__title { margin: 0; color: var(--ss-lock-ground); font: 400 var(--ss-text-title)/1.25 var(--ss-font-pixel-title); font-synthesis-weight: none; }
.ui-dialog__close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid color-mix(in srgb, var(--ss-lock-ground) 55%, transparent); border-radius: 5px; color: var(--ss-lock-ground); background: var(--ss-color-paper); box-shadow: 1px 2px 0 color-mix(in srgb, var(--ss-lock-ground) 22%, transparent); cursor: pointer; }
.ui-dialog__close > .ui-icon { width: 14px; height: 14px; }
.ui-dialog__body { margin: 0; font: 500 var(--ss-text-base)/1.45 var(--ss-font-reading); }
.ui-dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ui-dialog__foot > :only-child { margin-inline-start: auto; }

/* The sheet on a phone: the same question from the bottom edge. Cream, 16px top corners, a 2px plum top edge and a grab bar;
   the title centred in the pixel title face with a 44px ✕; the words; the buttons full width. */
.ui-sheet-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--ss-color-ink) 45%, transparent); }
.ui-sheet { box-sizing: border-box; width: 100%; max-height: calc(100% - 24px); overflow: auto; display: grid; gap: 14px; padding: 12px 20px max(20px, env(safe-area-inset-bottom)); border-radius: var(--ss-radius-sheet) var(--ss-radius-sheet) 0 0; color: var(--ss-color-ink); background: var(--ss-crane-cream); box-shadow: 0 -2px 0 var(--ss-lock-ground); font: 400 var(--ss-text-base)/1.5 var(--ss-font-reading); }
.ui-sheet__grab { justify-self: center; width: 40px; height: 6px; border-radius: 3px; background: var(--ss-guide-tan); }
.ui-sheet__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.ui-sheet__title { grid-column: 2; margin: 0; text-align: center; font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title); font-synthesis-weight: none; }
.ui-sheet__close { grid-column: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--ss-lock-ground); background: none; box-shadow: none; cursor: pointer; }
.ui-sheet__foot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.ui-sheet__foot > .ui-control-button { min-height: 48px; }

/* The wait pop-up, for a wait long enough to need one (Translating…, Checking…, Reading your file…): a small plum box with
   a moving picture, its line in paper, and Cancel. The picture and the line are the screen's. */
.ui-wait-box { box-sizing: border-box; width: min(100%, calc(260px * var(--ss-text-scale))); display: grid; justify-items: center; gap: calc(10px * var(--ss-text-scale)); padding: calc(18px * var(--ss-text-scale)) calc(20px * var(--ss-text-scale)); border: 2px solid var(--ss-color-purple-dark); border-radius: var(--ss-radius-control); color: var(--ss-color-paper); background: var(--ss-color-purple-dark); box-shadow: var(--ui-house-raise-filled); text-align: center; }
.ui-wait-box > p { margin: 0; max-width: 32ch; font: var(--ss-text-xs)/1.3 var(--ss-font-reading); }

/* The error note: its own line, never glued onto a box: a small brick square, then the words in brick with the first words
   bold. The strip is the same note in a paper box with a 1px brick edge, for an error with a Try again at its right. A
   field in error takes the brick edge (.ui-field) and its note on the line kept under it. */
.ui-error-note { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; color: var(--ss-role-destructive); font: 500 var(--ss-text-xs)/1.4 var(--ss-font-reading); }
.ui-error-note::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--ss-role-destructive); translate: 0 1px; }
.ui-error-note > b, .ui-error-note > strong { font-weight: 700; }
.ui-error-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 4px 4px 4px 12px; border: 1px solid var(--ss-role-destructive); border-radius: var(--ss-radius-control); color: var(--ss-role-destructive); background: var(--ss-color-paper); font: 600 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
.ui-error-strip > span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 8px; background: var(--ss-role-destructive); vertical-align: -1px; }
.ui-error-strip > .ui-control-button { flex: none; min-height: 32px; padding: 0 12px; }

/* The empty state: centred, a small picture (a scene up to 128px, or an icon), a title in the pixel title face, one plain
   line, and at most one action. The same on phone and computer; inside a narrow panel, just the icon and the line. */
.ui-empty { display: grid; justify-items: center; align-content: center; gap: calc(8px * var(--ss-text-scale)); padding: calc(24px * var(--ss-text-scale)) calc(16px * var(--ss-text-scale)); color: var(--ss-color-ink); text-align: center; }
.ui-empty__art { display: block; max-width: 128px; max-height: 128px; image-rendering: pixelated; }
.ui-empty__art.ui-icon, .ui-empty__art > .ui-icon { width: 48px; height: 48px; color: var(--ss-color-purple-dark); }
.ui-empty__title { margin: calc(4px * var(--ss-text-scale)) 0 0; color: var(--ss-color-purple-dark); font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title); font-synthesis-weight: none; }
.ui-empty__line { margin: 0; max-width: 36ch; color: var(--ss-color-ink-soft); font: 400 var(--ss-text-base)/1.45 var(--ss-font-reading); }
.ui-empty > .ui-control-button { margin-top: calc(6px * var(--ss-text-scale)); }

/* The panel (a card or tile): white paper on the cream page, a 1px soft plum edge, 6px corners and the gentle raise; a
   panel with a title has the look's sand band. Items in a list are each their own panel, 6 to 8px apart, with no container
   and no lines between. */
.ui-panel { box-sizing: border-box; min-width: 0; border: 1px solid color-mix(in srgb, var(--ss-color-purple-dark) 45%, transparent); border-radius: var(--ss-radius-control); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard); }
.ui-panel__band { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; padding: 6px 14px; border-radius: calc(var(--ss-radius-control) - 1px) calc(var(--ss-radius-control) - 1px) 0 0; color: var(--ss-strip-calendar-ink, var(--ss-color-ink)); background: var(--ss-strip-calendar, var(--ss-color-bg)); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title); font-synthesis-weight: none; }

/* The field: white paper, a 2px plum edge, 6px corners, 44px tall (50px on a phone), no inner bevel, a plum ring while
   typing; in error a brick edge. A typed answer in a study mode is the same box. */
.ui-field { box-sizing: border-box; width: 100%; min-width: 0; min-height: calc(44px * var(--ss-text-scale)); padding: 0 12px; border: 2px solid var(--ss-lock-ground); border-radius: var(--ss-radius-control); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: none; font: 500 var(--ss-text-field)/1.3 var(--ss-font-reading); }
textarea.ui-field { padding-block: 10px; line-height: 1.5; resize: vertical; }
.ui-field:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-lock-ground)); outline-offset: 2px; }
.ui-field:is([aria-invalid="true"], .is-error) { border-color: var(--ss-role-destructive); }
@media (max-width: 767px), (pointer: coarse) and (max-width: 900px) { .ui-field { min-height: 50px; } }

/* The count badge: an 18px tile with 4px corners, a 1px navy edge and a plum ring, tan, its number in navy (the mail count).
   A count in a sentence stays words ("Cards · 20"). */
.ui-count-badge { box-sizing: border-box; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border: 1px solid var(--ss-lock-raise); border-radius: 4px; color: var(--ss-lock-raise); background: var(--ss-guide-tan); box-shadow: 0 0 0 2px var(--ss-color-purple-dark); font: 700 var(--ss-text-xs)/1 var(--ss-font-reading); font-style: normal; font-variant-numeric: tabular-nums; }