[data-settings-backdrop].ui-settings-backdrop {
  isolation: isolate;
  background: var(--ss-color-backdrop);
}

[data-ui-settings].ui-settings-surface {
  width: min(45em, calc(100% - 2.25em));
  max-height: min(51.25em, calc(100% - 2.25em));
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
  font-family:var(--ss-font-chrome);
  font-size: var(--ss-text-base);
}

[data-ui-settings].ui-settings-surface :where(h1, h2, p, small, strong, span, button, input, select, option, output) { font-family:var(--ss-font-chrome); }
/* The main button keeps the pixel title face, words and all (house style, 17 Oct). */
[data-ui-settings].ui-settings-surface .ui-control-button--primary, [data-ui-settings].ui-settings-surface .ui-control-button--primary :where(span:not([lang="ja"]), strong, small) { font-family:var(--ss-font-pixel-title); }

[data-ui-settings] .ui-settings-header {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  padding: 1.125em 1.25em .875em;
  border-bottom: 1px solid var(--ss-color-border-soft);
}
[data-ui-settings] .ui-settings-header > div { display: grid; gap: .25em; }
[data-ui-settings] .ui-settings-header :is(h1, h2) { margin: 0; font: 700 var(--ss-text-title)/1.2 var(--ss-font-chrome); }
[data-ui-settings] .ui-settings-header p { margin: 0; color: var(--ss-color-ink-soft); font: 400 var(--ss-text-xs)/1.385 var(--ss-font-chrome); }
[data-ui-settings] .ui-settings-header > button { display: grid; flex: none; width: 32px; min-width: 32px; height: 32px; min-height: 32px; place-items: center; padding: 0; border: 1px solid var(--ss-color-tan-border); color: var(--ss-color-ink); background: var(--ss-color-input); }

/* The tabs share the title's line, right-aligned beside the close button; a tight header wraps them to their own row under the title. */
[data-ui-settings] .ui-settings-header > .ui-settings-heading { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: flex-start; gap: .5em 1em; min-width: 0; }
[data-ui-settings] .ui-settings-heading > .ui-settings-title { display: grid; flex: 1 1 auto; gap: .25em; min-width: 0; }
[data-ui-settings] .ui-settings-tabs { flex: 0 1 auto; min-width: 0; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5em; margin-inline-start: auto; padding: 0; overflow: visible; }
[data-ui-settings] .ui-settings-tabs[hidden] { display: none; }
[data-ui-settings] .ui-settings-tabs > button { min-width: 0; min-height: 2.5em; height: auto; padding: .45em .75em; font-size: var(--ss-text-xs); line-height: 1.15; white-space: normal; text-wrap: balance; }
[data-ui-settings] .ui-settings-scroll { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: max-content; align-content: start; gap: 0; padding: 0 1.25em 1em; overflow: auto; }

[data-ui-settings] .ui-settings-group { display: grid; }
[data-ui-settings] .ui-settings-group + .ui-settings-group { margin-top: .5em; }
[data-ui-settings] .ui-settings-group > h2,
[data-ui-settings] .ui-settings-group > h2,
[data-ui-settings] .ui-settings-section__heading h2 { margin: 0; padding: 1em 0 .375em; color: var(--ss-color-ink-soft); font: 700 var(--ss-text-xs)/1.385 var(--ss-font-chrome); letter-spacing: normal; text-transform: none; }
[data-ui-settings] .ui-settings-section { padding: 0; border: 0; }
[data-ui-settings] .ui-settings-section__heading { margin: 0; }
[data-ui-settings] .ui-settings-section__description { margin: 0; color: var(--ss-color-ink-soft); font: 400 var(--ss-text-xs)/1.385 var(--ss-font-chrome); }

.ui-settings-credits { margin-top: .75em; padding-top: .75em; border-top: 1px solid var(--ss-color-border-soft); color: var(--ss-color-ink-soft); font-size: var(--ss-text-xs); }
.ui-settings-credits summary { width: fit-content; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.ui-settings-credits ul { display: grid; gap: .5em; margin: .75em 0 0; padding-inline-start: 1.25em; }
.ui-settings-credits a { color: var(--ss-color-ink); }
.ui-settings-credits a:focus-visible { outline: 2px solid var(--ss-color-pink-strong); outline-offset: 2px; }

[data-ui-settings] .ui-settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15em, auto); align-items: center; gap: .75em 1.25em; min-height: 4em; padding: .625em 0; }
[data-ui-settings] .ui-settings-row__copy { display: grid; gap: .125em; min-width: 0; }
[data-ui-settings] .ui-settings-row__copy strong { overflow-wrap: anywhere; text-wrap: pretty; font: 700 var(--ss-text-base)/1.25 var(--ss-font-chrome); }
[data-ui-settings] .ui-settings-row__copy small { color: var(--ss-color-ink-soft); overflow-wrap: anywhere; text-wrap: pretty; font: 400 var(--ss-text-xs)/1.385 var(--ss-font-chrome); }
[data-ui-settings] .ui-settings-scope { display: none; }
[data-ui-settings] .ui-settings-row__control { justify-self: end; display: flex; align-items: center; justify-content: flex-end; min-width: 0; max-width: 100%; }

[data-ui-settings] :is(.ui-settings-action, .ui-settings-choice > button, .ui-settings-native-text) { box-sizing: border-box; height: auto; min-height: 2.5em; font-size: var(--ss-text-xs); line-height: 1.15; }
[data-ui-settings] .ui-settings-action { padding: .5em .75em; white-space: normal; text-wrap: balance; }
[data-ui-settings] button.ui-settings-google-signin { width: auto; min-width: 0; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; --ui-press-transform: none; --ui-press-shadow: none; }
[data-ui-settings] button.ui-settings-google-signin:hover:not(:disabled) { filter: none; transform: none; }
[data-ui-settings] .ui-settings-google-signin > img { display: block; }
/* Settings selects are the shared compact box and drawn list (primitives.css); Settings keeps only their width. */
[data-ui-settings] .ui-select.ui-settings-select { min-width: 11.25em; max-width: 18.75em; }
/* Settings selects sit at the row's right edge, so their drawn list lines up with the select's right edge and opens leftwards, inside the panel;
   only a flip above is allowed (the browser's own fallbacks would slide it back rightwards). */
@supports (appearance: base-select) {
  [data-ui-settings] .ui-settings-select::picker(select) { position-area: block-end span-inline-start; position-try-fallbacks: flip-block; }
}
/* The Skin picker: the compact select's box holding the current skin's mini window, name and chevron; it opens a list of
   every skin, each with its own mini window. The preview colours are each skin's own (skins/palettes.css). */
[data-ui-settings] .ui-skin-picker { position: relative; }
[data-ui-settings] .ui-select.ui-skin-picker__button { min-width: 13.5em; max-width: 18.75em; gap: .625em; justify-content: flex-start; color: var(--ss-color-ink); cursor: pointer; }
/* The skin's name is never cut: the box grows to fit it instead. */
.ui-skin-picker__name { flex: 1 0 auto; text-align: start; }
.ui-skin-picker__chevron { flex: none; width: .75em; height: .5em; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ui-skin-picker__list { position: absolute; z-index: 5; inset-inline-end: 0; top: calc(100% + 4px); box-sizing: border-box; min-width: 100%; max-height: none; margin: 0; padding: 4px; overflow-y: auto; list-style: none; 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-shadow-soft); font: var(--ss-text-xs)/1.3 var(--ss-font-chrome); outline: none; animation: ui-skin-picker-open 120ms ease-out; }
.ui-skin-picker[data-placement="above"] .ui-skin-picker__list { top: auto; bottom: calc(100% + 4px); }
.ui-skin-picker__list[hidden] { display: none; }
.ui-skin-picker__list:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: 2px; }
.ui-skin-picker__option { display: flex; align-items: center; gap: .625em; min-height: calc(36px * var(--ss-text-scale, 1)); padding: 4px 10px 4px 6px; border: 1px solid transparent; border-radius: var(--ss-radius-xs); white-space: nowrap; cursor: pointer; }
.ui-skin-picker__option.is-active { border-color: var(--ss-role-hover-edge, var(--ss-color-purple-dark)); background: var(--ss-role-hover, var(--ss-color-purple-soft)); }
.ui-skin-picker__option[aria-selected="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)); }
.ui-skin-picker__option[aria-selected="true"].is-active { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: -3px; }
@keyframes ui-skin-picker-open { from { opacity: 0; transform: translateY(-4px); } }
.ui-skin-picker[data-placement="above"] .ui-skin-picker__list { animation-name: ui-skin-picker-open-above; }
@keyframes ui-skin-picker-open-above { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ui-skin-picker__list { animation: none; } }
/* A mini window: the bar across the top, a panel with its header strip, and a choice pill, on the skin's ground. */
.ui-skin-preview { position: relative; flex: none; display: block; box-sizing: border-box; width: 2.75em; height: 1.625em; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ss-color-ink) 45%, transparent); background: var(--ui-skin-preview-ground); }
.ui-skin-preview__bar { position: absolute; inset: 0 0 auto; height: 28%; background: var(--ui-skin-preview-bar); }
.ui-skin-preview__panel { position: absolute; top: 40%; left: 8%; width: 48%; height: 50%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ss-color-ink) 25%, transparent); background: var(--ui-skin-preview-paper); }
.ui-skin-preview__strip { position: absolute; inset: 0 0 auto; height: 38%; background: var(--ui-skin-preview-strip); }
.ui-skin-preview__pill { position: absolute; top: 44%; right: 8%; width: 28%; height: 24%; border: 1px solid color-mix(in srgb, var(--ss-color-ink) 35%, transparent); background: var(--ui-skin-preview-choice); }
/* A text field is the house field (house style, 17 Oct): paper, a 2px plum edge, 6px corners, no inner bevel. */
[data-ui-settings] .ui-settings-native-text { min-width: 11.25em; max-width: 18.75em; padding: .35em 2em .35em .65em; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: none; }
[data-ui-settings] .ui-settings-choice { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .375em; min-width: 0; max-width: 100%; }
[data-ui-settings] .ui-settings-choice > button { flex: 0 1 auto; min-width: 0; padding: .5em .75em; border: 1px solid var(--ss-color-border-soft); white-space: normal; text-wrap: balance; }
[data-ui-settings] .ui-settings-choice > button + button { border-left: 1px solid var(--ss-color-border-soft); }
[data-ui-settings] .ui-settings-choice > button[aria-pressed="true"] { border-color: var(--ss-color-pink-strong); color: var(--ss-role-on-selected, var(--ss-color-ink)); background: var(--ss-color-pink); }

/* iOS Safari zooms the page when a focused field's text is under 16px; on touch screens the text field takes the field role (input. outranks the :is() rule above). */
@media (pointer: coarse) {
  [data-ui-settings] input.ui-settings-native-text { font-size: var(--ss-text-field); }
}

@container (max-width: 32.5em) {
  [data-settings-backdrop].ui-settings-backdrop { place-items: end center; padding: 0; }
  [data-ui-settings].ui-settings-surface { width: 100%; max-width: none; max-height: 100%; border-inline: 0; border-bottom: 0; }
  [data-ui-settings] .ui-settings-header { padding: .875em 1em .75em; }
  [data-ui-settings] .ui-settings-tabs { flex-basis: 100%; justify-content: flex-start; margin-inline-start: 0; }
  [data-ui-settings] .ui-settings-scroll { padding-inline: 1em; }
  [data-ui-settings].ui-settings-surface .ui-settings-row { grid-template-columns: minmax(0, 1fr); gap: .5em; padding: .75em 0; }
  [data-ui-settings].ui-settings-surface .ui-settings-row__control { grid-column: 1; width: 100%; justify-self: stretch; justify-content: flex-start; }
  [data-ui-settings].ui-settings-surface .ui-settings-choice { width: 100%; justify-content: flex-start; }
  [data-ui-settings].ui-settings-surface :is(.ui-settings-select, .ui-settings-native-text) { width: 100%; max-width: none; }
  [data-ui-settings].ui-settings-surface .ui-skin-picker, [data-ui-settings].ui-settings-surface .ui-select.ui-skin-picker__button { width: 100%; max-width: none; }
}

[data-skin="room"] [data-ui-settings].ui-settings-surface { border: 2px solid var(--ss-window-outline); border-radius: 5px 5px 3px 3px; background: var(--ss-color-shell); box-shadow: var(--ss-window-bevel), var(--ss-shadow-hard); }
[data-skin="room"] [data-ui-settings] .ui-settings-header { border-bottom-color: var(--ss-color-purple-dark); color: var(--ss-color-title); background: var(--ss-color-purple); box-shadow: var(--ss-titlebar-bevel); }
[data-skin="room"] [data-ui-settings] .ui-settings-header :is(h1, h2) { color: var(--ss-color-title); }
[data-skin="room"] [data-ui-settings] .ui-settings-header p { color: var(--ss-bevel-light); }
[data-skin="room"] [data-ui-settings] :is(.ui-settings-header > button, .ui-settings-action, .ui-settings-choice > button, .ui-settings-native-text) { border: 2px solid var(--ss-window-outline); color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard); }
[data-skin="room"] [data-ui-settings] button.ui-settings-google-signin { border: 0; background: transparent; box-shadow: none; }
[data-skin="room"] [data-ui-settings] .ui-settings-choice > button[aria-pressed="true"] { border-color: var(--ss-color-pink-strong); background: var(--ss-color-pink); }

@media (max-width: 560px) {
  [data-settings-backdrop].ui-settings-backdrop { place-items: end center; padding: 0; }
  [data-ui-settings].ui-settings-surface { width: 100%; max-width: none; max-height: 100%; border-inline: 0; border-bottom: 0; }
  [data-ui-settings] .ui-settings-header { padding: .875em 1em .75em; }
  [data-ui-settings] .ui-settings-tabs { flex-basis: 100%; justify-content: flex-start; margin-inline-start: 0; }
  [data-ui-settings] .ui-settings-scroll { padding-inline: 1em; }
  [data-ui-settings].ui-settings-surface .ui-settings-row { grid-template-columns: minmax(0, 1fr); gap: .5em; padding: .75em 0; }
  [data-ui-settings].ui-settings-surface .ui-settings-row__control { grid-column: 1; width: 100%; justify-self: stretch; justify-content: flex-start; }
  [data-ui-settings].ui-settings-surface .ui-settings-choice { width: 100%; justify-content: flex-start; }
  [data-ui-settings].ui-settings-surface :is(.ui-settings-select, .ui-settings-native-text) { width: 100%; max-width: none; }
  [data-ui-settings].ui-settings-surface .ui-skin-picker, [data-ui-settings].ui-settings-surface .ui-select.ui-skin-picker__button { width: 100%; max-width: none; }
}

/* Settings on a phone (owner's picks, 27 Sep): a full-screen sheet, rounded and plain. The tabs and every choice row draw as
   the pill switch (primitives.css, .ui-pill-switch): one rounded track, the chosen part on the selected pink. An on/off row
   is one line, its label at the start and the switch at the end. Selects and actions are flat. Rows that only mean
   something on a desktop (the room's background, the window layout) are hidden. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 900px) {
  [data-settings-backdrop].ui-settings-backdrop { place-items: stretch; padding: 0; }
  [data-ui-settings].ui-settings-surface { width: 100%; height: 100%; max-width: none; max-height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  [data-ui-settings] [data-settings-desktop-only] { display: none; }
  [data-ui-settings] .ui-settings-tabs, [data-ui-settings].ui-settings-surface .ui-settings-choice { box-sizing: border-box; flex-wrap: nowrap; gap: 2px; width: 100%; min-height: 0; padding: 3px; border: 1px solid var(--ss-color-border-soft); border-radius: 999px; background: var(--ss-color-paper); }
  [data-ui-settings] :is(.ui-settings-tabs, .ui-settings-choice) > button, [data-ui-settings] :is(.ui-settings-tabs, .ui-settings-choice) > button + button { --ui-press-transform: none; --ui-press-shadow: none; flex: 1 1 0; min-width: 0; height: auto; min-height: calc(36px * var(--ss-text-scale)); padding: calc(2px * var(--ss-text-scale)) calc(4px * var(--ss-text-scale)); border: 0; border-radius: 999px; color: var(--ss-color-ink-soft); background: transparent; box-shadow: none; font: var(--ss-text-xs)/1.1 var(--ss-font-chrome); white-space: normal; text-wrap: balance; }
  /* A choice keeps its label on one line ("Extra large" too): each part takes its label's width, then shares what is left. */
  [data-ui-settings].ui-settings-surface .ui-settings-choice > button { flex: 1 1 auto; white-space: nowrap; }
  [data-ui-settings] :is(.ui-settings-tabs, .ui-settings-choice) > button[aria-pressed="true"] { color: var(--ss-role-on-selected, var(--ss-color-ink)); background: var(--ss-role-selected, var(--ss-color-pink)); box-shadow: none; }
  [data-ui-settings].ui-settings-surface .ui-settings-row:has(> .ui-settings-row__control > .ui-switch) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  [data-ui-settings].ui-settings-surface .ui-settings-row:has(> .ui-settings-row__control > .ui-switch) > .ui-settings-row__control { grid-column: 2; width: auto; justify-self: end; }
  [data-ui-settings] :is(.ui-select, .ui-settings-action, .ui-settings-native-text) { border: 1px solid var(--ss-color-border-soft); border-radius: calc(10px * var(--ss-text-scale)); box-shadow: none; }
}

[data-ui-settings][data-shortcut-list] .ui-settings-scroll { gap: .75em; }
[data-ui-settings][data-shortcut-list] .ui-shortcut-list__group { margin: 0; padding: 1em 0 0; color: var(--ss-color-ink-soft); font: 700 var(--ss-text-xs)/1.385 var(--ss-font-chrome); letter-spacing: .04em; }
.ui-shortcut-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; margin: 0; padding: 0; list-style: none; }
.ui-shortcut-list > li { display: flex; min-width: 0; align-items: center; gap: var(--ss-space-2); padding: .5em; border: 1px solid var(--ss-color-border-soft); color: var(--ss-color-ink); background: var(--ss-color-paper); }
.ui-shortcut-list > li > kbd { flex: none; white-space: nowrap; }
.ui-shortcut-list > li > span { min-width: 0; overflow-wrap: anywhere; }

@container (max-width: 32.5em) {
  [data-ui-settings][data-shortcut-list] .ui-shortcut-list { grid-template-columns: minmax(0, 1fr); }
}

/* v94's Settings on a phone: a page opened on top of the app: the plum bar with its name in the pixel title face and the close
   square at its start; each setting its own raised row box, 12 px apart, on the cream page. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 900px) {
  [data-ui-settings].ui-settings-surface { background: var(--ss-color-bg); }
  [data-ui-settings].ui-settings-surface > .ui-settings-header { position: relative; min-height: calc(var(--ui-phone-nav-top, 11px) * 2 + var(--ui-phone-nav-size, 36px)); padding: env(safe-area-inset-top) 8px 0; border: 0; color: var(--ss-color-title); background: linear-gradient(90deg, var(--ss-color-purple-dark), var(--ss-color-purple)); }
  [data-ui-settings].ui-settings-surface > .ui-settings-header { display: flex; align-items: center; justify-content: center; }
  [data-ui-settings].ui-settings-surface > .ui-settings-header > .ui-settings-heading { flex: 1; display: grid; place-items: center; margin: 0; padding: 0; }
  [data-ui-settings].ui-settings-surface > .ui-settings-header .ui-settings-title { width: 100%; margin: 0; padding: 0; text-align: center; }
  [data-ui-settings].ui-settings-surface > .ui-settings-header .ui-settings-title > h2 { margin: 0; color: inherit; font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  /* phone build v94: the bar's name at the base size, and ‹ the same paper square with the plum lift as ⊞ */
  :root:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) [data-ui-settings].ui-settings-surface > .ui-settings-header .ui-settings-title > h2 { font-size: var(--ss-text-base); }
  :root:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) [data-ui-settings].ui-settings-surface > .ui-settings-header > [data-settings-close] { border: 2px solid var(--ss-color-paper); border-bottom-color: var(--ss-lock-raise); border-radius: 6px; color: var(--ss-color-purple-dark); background: var(--ss-color-paper); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), inset -1px -1px 0 rgba(31, 37, 80, .55), 2px 3px 0 var(--ss-lock-raise); }
  [data-ui-settings].ui-settings-surface > .ui-settings-header .ui-settings-title > p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-ui-settings].ui-settings-surface > .ui-settings-header > [data-settings-close]::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
  [data-ui-settings].ui-settings-surface > .ui-settings-header > [data-settings-close] { position: absolute; inset-inline-start: var(--ui-phone-nav-edge, 8px); top: calc(env(safe-area-inset-top) + var(--ui-phone-nav-top, 11px)); --ui-icon-button-size: var(--ui-phone-nav-size, 36px); color: var(--ss-v94-icon-ink, var(--ss-color-ink)); }
  [data-ui-settings].ui-settings-surface .ui-settings-scroll { gap: 12px; padding: 16px; }
  [data-ui-settings].ui-settings-surface .ui-settings-row { padding: 16px; border: 1px solid var(--ss-color-tan-border); border-radius: var(--ss-radius-button, 6px); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard, none); }
}

/* v94's Settings page on a phone (modules/shell/system-settings.mjs, renderPhone): each group under a band in the look's
   strip colour, its rows one-line raised boxes 8 px apart; a ▸ row shows its value and opens a page or a sheet; the sheet
   rises from the foot with its grip, name and ×, each choice a row with its box (filled when chosen) on a tinted line. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 900px) {
  [data-ui-settings][data-settings-phone] .ui-settings-scroll { gap: 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  [data-ui-settings][data-settings-phone] .ui-settings-groups { display: grid; gap: 18px; }
  [data-ui-settings][data-settings-phone] .ui-settings-app-part,
  [data-ui-settings][data-settings-phone] .ui-settings-app-part > .ui-settings-groups { display: grid; gap: 18px; }
  [data-ui-settings][data-settings-phone] .ui-settings-group { display: grid; gap: 8px; }
  [data-ui-settings][data-settings-phone] .ui-settings-group + .ui-settings-group { margin-top: 0; }
  [data-ui-settings][data-settings-phone] .ui-settings-group > h2 { margin: 0 0 -8px; padding: 10px 16px; border-radius: 8px 8px 0 0; color: var(--ss-strip-calendar-ink, var(--ss-color-ink)); background: var(--ss-strip-calendar, var(--ss-color-tan-border-soft)); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  [data-ui-settings][data-settings-phone] .ui-settings-row { min-height: 56px; padding: 10px 16px; gap: 4px 12px; }
  /* phone build v94: a list shows its choice and a ▸ at the row's end and opens a sheet; a two-way switch (Speed's
     Normal | Slow) sits small at the row's end. Longer choices keep the full width under the label. */
  [data-ui-settings][data-settings-phone] select.ui-settings-select[data-settings-select-ready] { display: none; }
  [data-ui-settings][data-settings-phone] .ui-settings-select-link { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px; min-height: 36px; padding: 0; border: 0; color: var(--ss-color-ink-soft); background: none; font: 400 var(--ss-text-base)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); text-align: end; cursor: pointer; }
  [data-ui-settings][data-settings-phone] .ui-settings-select-link::after { content: ""; border-block: 7px solid transparent; border-inline-start: 7px solid var(--ss-v94-icon-ink, var(--ss-color-ink)); }
  /* Japanese voice while the phone is still listing its voices: "Finding voices…" sits where the chosen voice will. */
  [data-ui-settings][data-settings-phone] .ui-settings-row[data-settings-row="device.japaneseVoice"]:has(.ui-settings-info) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  [data-ui-settings][data-settings-phone] [data-settings-row="device.japaneseVoice"] > .ui-settings-row__control:has(> .ui-settings-info) { grid-column: 2; grid-row: 1; width: auto; justify-self: end; }
  [data-ui-settings][data-settings-phone] [data-settings-row="device.japaneseVoice"] .ui-settings-info { color: var(--ss-color-ink-soft); font: 400 var(--ss-text-base)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-row:is(:has(> .ui-settings-row__control > [data-settings-select-ready]), :has(> .ui-settings-row__control > .ui-segmented-choice > button:nth-child(2):last-child)) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  [data-ui-settings][data-settings-phone] .ui-settings-row:is(:has(> .ui-settings-row__control > [data-settings-select-ready]), :has(> .ui-settings-row__control > .ui-segmented-choice > button:nth-child(2):last-child)) > .ui-settings-row__control { grid-column: 2; grid-row: 1; width: auto; justify-self: end; }
  /* a single command (Passcode's Change) is a ▸ link at the row's end, as v94 draws it */
  [data-ui-settings][data-settings-phone] .ui-settings-row:has(> .ui-settings-row__control > .ui-settings-action:only-child):not(:has([data-settings-action^="account-"], [data-settings-action="reset-desktop"])) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  [data-ui-settings][data-settings-phone] .ui-settings-row:has(> .ui-settings-row__control > .ui-settings-action:only-child):not(:has([data-settings-action^="account-"], [data-settings-action="reset-desktop"])) > .ui-settings-row__control { grid-column: 2; grid-row: 1; width: auto; justify-self: end; }
  [data-ui-settings][data-settings-phone] .ui-settings-row:has(> .ui-settings-row__control > .ui-settings-action:only-child):not(:has([data-settings-action^="account-"], [data-settings-action="reset-desktop"])) .ui-settings-action { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px; min-height: 36px; padding: 0; border: 0; color: var(--ss-color-ink-soft); background: none; box-shadow: none; font: 400 var(--ss-text-base)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-row:has(> .ui-settings-row__control > .ui-settings-action:only-child):not(:has([data-settings-action^="account-"], [data-settings-action="reset-desktop"])) .ui-settings-action::after { content: ""; border-block: 7px solid transparent; border-inline-start: 7px solid var(--ss-v94-icon-ink, var(--ss-color-ink)); }
  [data-ui-settings][data-settings-phone] .ui-settings-row:has(> .ui-settings-row__control > .ui-segmented-choice > button:nth-child(2):last-child) .ui-segmented-choice > button { min-width: 64px; min-height: 30px; padding: 0 10px; font-size: var(--ss-text-xs); }
  [data-ui-settings][data-settings-phone] .ui-settings-row__copy strong { font: 400 var(--ss-text-base)/1.3 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-row__copy small { font: 400 var(--ss-text-xs)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-link { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; width: 100%; color: var(--ss-color-ink); text-align: start; cursor: pointer; }
  [data-ui-settings][data-settings-phone] .ui-settings-link::after { content: ""; grid-column: 3; justify-self: end; border-block: 7px solid transparent; border-inline-start: 7px solid var(--ss-v94-icon-ink, var(--ss-color-ink)); }
  [data-ui-settings][data-settings-phone] .ui-settings-link.is-plain::after { content: none; }
  [data-ui-settings][data-settings-phone] .ui-settings-link.has-mark { grid-template-columns: 44px minmax(0, 1fr) auto 14px; }
  [data-ui-settings][data-settings-phone] .ui-settings-link.has-mark::after { grid-column: 4; }
  [data-ui-settings][data-settings-phone] .ui-settings-app-mark { color: var(--ss-v94-icon-ink, var(--ss-color-ink)); font: 400 var(--ss-text-title)/1 var(--ss-font-study-japanese, var(--ss-font-reading)); }
  [data-ui-settings][data-settings-phone] .ui-settings-app-mark.is-icon > .ui-icon { display: block; width: 1em; height: 1em; }
  [data-ui-settings][data-settings-phone] .ui-settings-link__value { color: var(--ss-color-ink-soft); font: 400 var(--ss-text-base)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); white-space: nowrap; }
  [data-ui-settings][data-settings-phone] .ui-settings-aa { color: var(--ss-color-ink); font: 600 var(--ss-text-base)/1 var(--ss-font-chrome); white-space: nowrap; }
  [data-ui-settings][data-settings-phone] .ui-settings-aa > span { font-weight: 400; }
  [data-ui-settings][data-settings-phone] .ui-settings-aa[data-text-size-sample="small"] { font-size: calc(1rem * 0.875); }
  [data-ui-settings][data-settings-phone] .ui-settings-aa[data-text-size-sample="standard"] { font-size: 1rem; }
  [data-ui-settings][data-settings-phone] .ui-settings-aa[data-text-size-sample="large"] { font-size: calc(1rem * 1.125); }
  [data-ui-settings][data-settings-phone] .ui-settings-aa[data-text-size-sample="extra-large"] { font-size: calc(1rem * 1.3); }
  [data-ui-settings][data-settings-phone] .ui-settings-page { display: grid; align-content: start; gap: 12px; color: var(--ss-color-ink); }
  [data-ui-settings][data-settings-phone] .ui-settings-credits-page ul { display: grid; gap: 12px; margin: 0; padding-inline-start: 1.25em; font: 400 var(--ss-text-base)/1.45 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-credits-page a { color: inherit; }
  [data-ui-settings][data-settings-phone="name"] .ui-settings-scroll { display: flex; flex-direction: column; }
  [data-ui-settings][data-settings-phone]:is([data-settings-phone="kana"]) .ui-settings-scroll { display: flex; flex-direction: column; }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page { flex: 1 0 auto; grid-template-rows: repeat(6, auto) 1fr; }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page > h2 { margin: 8px 0 0; font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page > p { margin: 0 0 8px; color: var(--ss-color-ink-soft); font: 400 var(--ss-text-base)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page > :is(label, .ui-settings-name-page__label) { font: 700 var(--ss-text-base)/1.2 var(--ss-font-chrome); }
  /* v81 (owner, 12 Oct): the name in Japanese in its own box under the name, Change beside it. */
  [data-ui-settings][data-settings-phone] .ui-settings-name-page__label { margin-top: 6px; }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page__kana { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page__kana-value { display: flex; align-items: center; box-sizing: border-box; min-height: 50px; padding: 0 14px; border: 2px solid var(--ss-v94-icon-ink, var(--ss-color-border)); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); font: 500 var(--ss-text-title)/1.2 var(--ss-font-jp); }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page__kana > button { min-height: 50px; padding: 0 18px; }
  /* In Japanese › Change: the spellings, Write it myself, then Cancel and Use … on the foot bar. */
  [data-ui-settings][data-settings-phone] .ui-settings-kana { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
  [data-ui-settings][data-settings-phone] .ui-settings-kana > h2 { margin: 8px 0 0; font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  [data-ui-settings][data-settings-phone] .ui-settings-kana > p { margin: 0; color: var(--ss-color-ink-soft); font: 400 var(--ss-text-base)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-kana__write > input { min-height: 50px; padding: 0 14px; border: 2px solid var(--ss-v94-icon-ink, var(--ss-color-border)); border-radius: 6px; background: var(--ss-color-paper); }
  [data-ui-settings][data-settings-phone] .ui-settings-kana > .ui-settings-page__bar { align-self: stretch; margin-top: auto; }
  [data-ui-settings][data-settings-phone] .ui-settings-name-page > input { min-height: 50px; padding: 0 14px; border: 2px solid var(--ss-v94-icon-ink, var(--ss-color-border)); border-radius: 6px; background: var(--ss-color-paper); font: 400 var(--ss-text-field)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-page__bar { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin: 0 -16px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ss-color-tan-border-soft); }
  [data-ui-settings][data-settings-phone] .ui-settings-page__bar > button { min-height: 50px; }
  /* Profile data on a phone (boards D019–D025 in v94's controls): the bar names the page, so its heading is only read
     aloud; Export my data and Import share a line under the plain sentence and What's included folds open like a row.
     The export or import form then takes the page, with Cancel and the main button on its foot bar. */
  [data-ui-settings][data-settings-phone="data"] .ui-settings-scroll { display: flex; flex-direction: column; }
  [data-ui-settings][data-settings-phone="data"] .ui-settings-page { flex: 1 0 auto; display: flex; flex-direction: column; }
  [data-ui-settings][data-settings-phone] [data-profile-data] { --profile-data-ink: var(--ss-v94-icon-ink, var(--ss-lock-ground)); flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
  [data-ui-settings][data-settings-phone] [data-profile-data] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-ui-settings][data-settings-phone] .ui-profile-data-lede { margin: 4px 0 0; font: 400 var(--ss-text-base)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-ui-settings][data-settings-phone] [data-profile-data] .ui-control-button { gap: 8px; min-height: 50px; padding-inline: 12px; white-space: nowrap; }
  [data-ui-settings][data-settings-phone] [data-profile-data] :is(.ui-profile-data-pass, .ui-profile-data-file__card) > button { min-height: 36px; padding-inline: 12px; }
  [data-ui-settings][data-settings-phone] .ui-profile-data-included { border: 1px solid var(--ss-color-tan-border); border-radius: var(--ss-radius-button, 6px); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard, none); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-included > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; list-style: none; font: 400 var(--ss-text-base)/1.3 var(--ss-font-reading, var(--ss-font-chrome)); cursor: pointer; }
  [data-ui-settings][data-settings-phone] .ui-profile-data-included > summary::-webkit-details-marker { display: none; }
  [data-ui-settings][data-settings-phone] .ui-profile-data-included > summary::after { content: ""; border-inline: 7px solid transparent; border-top: 7px solid var(--profile-data-ink); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-included[open] > summary::after { border-top: 0; border-bottom: 7px solid var(--profile-data-ink); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-included > .ui-profile-data-list { padding: 0 16px 16px; }
  [data-ui-settings][data-settings-phone] .ui-profile-data-note { margin: 0; color: var(--ss-color-ink-soft); font: 400 var(--ss-text-xs)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] [data-profile-data]:has(> form:not([hidden])) > :is(.ui-profile-data-lede, .ui-profile-data-actions, .ui-profile-data-included, .ui-profile-data-note) { display: none; }
  [data-ui-settings][data-settings-phone] [data-profile-data] > form:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
  [data-ui-settings][data-settings-phone] [data-profile-data] > form > h3 { margin: 8px 0 0; font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-label { font: 700 var(--ss-text-base)/1.2 var(--ss-font-chrome); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-pass > input { min-height: 50px; font: 400 var(--ss-text-field)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-hint { color: var(--ss-color-ink-soft); font: 400 var(--ss-text-xs)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-profile-data-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin: auto -16px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ss-color-tan-border-soft); }
  [data-ui-settings][data-settings-phone] [data-profile-data] > [data-profile-data-action]:is([data-profile-data-action="reload"], [data-profile-data-action="done"]) { justify-self: stretch; }
  [data-ui-settings][data-settings-phone] .ui-settings-sheet-scrim { position: absolute; inset: 0; z-index: 4; background: color-mix(in srgb, var(--ss-color-ink) 40%, transparent); }
  [data-ui-settings][data-settings-phone] .ui-settings-sheet { position: absolute; inset: auto 0 0; z-index: 5; display: grid; max-height: 80%; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); overflow: auto; border-top: 2px solid var(--ss-v94-icon-ink, var(--ss-color-border)); border-radius: 18px 18px 0 0; background: var(--ss-color-bg); }
  [data-ui-settings][data-settings-phone] .ui-settings-sheet > header { position: relative; display: grid; justify-items: center; gap: 10px; padding: 4px 0 12px; }
  [data-ui-settings][data-settings-phone] .ui-settings-sheet__grip { width: 40px; height: 5px; border-radius: 3px; background: var(--ss-strip-calendar, var(--ss-color-tan-border-soft)); }
  [data-ui-settings][data-settings-phone] .ui-settings-sheet > header > h2 { margin: 0; font: 400 var(--ss-text-base)/1.4 var(--ss-font-pixel-title, var(--ss-font-display)); }
  [data-ui-settings][data-settings-phone] .ui-settings-sheet > header > button { position: absolute; inset-inline-end: -8px; bottom: 6px; border: 0; background: none; box-shadow: none; }
  [data-ui-settings][data-settings-phone] .ui-settings-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ss-strip-calendar, var(--ss-color-tan-border-soft)); border-radius: 0; color: var(--ss-color-ink); background: none; text-align: start; font: 400 var(--ss-text-base)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); cursor: pointer; }
  [data-ui-settings][data-settings-phone] .ui-settings-pick:last-child { border-bottom: 0; }
  /* One of many is picked with the house pick box (primitives.css .ui-tick): filled plum with its tick; the row gets no wash. */
  [data-ui-settings][data-settings-phone] .ui-settings-pick__label { flex: 1 1 auto; min-width: 0; }
  [data-ui-settings][data-settings-phone] .ui-settings-pick > .ui-skin-preview { flex: none; }
  /* A switch is the shared one (primitives.css, house style 17 Oct): Off or On beside its square, tan when on. */
}
@media (max-width: 767px), (pointer: coarse) and (max-width: 900px) {
  /* v94: a choice is a row of square boxes, the chosen one filled. */
  [data-ui-settings][data-settings-phone].ui-settings-surface .ui-settings-choice { padding: 0; gap: 0; overflow: hidden; border: 2px solid var(--ss-v94-icon-ink, var(--ss-color-border)); border-radius: 4px; }
  [data-ui-settings][data-settings-phone].ui-settings-surface .ui-settings-choice > button, [data-ui-settings][data-settings-phone].ui-settings-surface .ui-settings-choice > button + button { min-height: 40px; border-radius: 0; }
  [data-ui-settings][data-settings-phone].ui-settings-surface .ui-settings-choice > button + button { border-inline-start: 2px solid var(--ss-v94-icon-ink, var(--ss-color-border)); }
}

/* Groups split into columns on a computer stay one list everywhere else. */
.ui-settings-columns > .ui-settings-column { display: contents; }

/* v94's Settings window on a computer (the desktop's D014 and D076): a window like the apps' (870 x 780 at most) with its
   plum title bar, "Settings" in the pixel face and the close square; the tabs in one order under it with "Saved to …" at the
   right; the cream page holds the groups as raised cards in two columns, each with its band (the pixel name only: groups
   don't move, so no grip dots) and its rows on paper; switches say On (tan, the navy square at the right) or Off (paper,
   the square at the left); a joined Normal | Slow; Done at the bottom right of an app's tab; Profile data and Credits
   under the Pocket Study tab. */
@media (min-width: 901px), (min-width: 768px) and (pointer: fine) {
  #pocket-study-settings-dialog.ui-settings-surface { --settings-hair: rgba(81, 71, 111, .25); --settings-raise: var(--ss-v94-raise, inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(81, 71, 111, .2), 2px 3px 0 rgba(81, 71, 111, .42)); --settings-raise-on: inset 1px 1px 0 rgba(255, 255, 255, .28), inset -1px -1px 0 rgba(31, 37, 80, .55), 2px 3px 0 var(--ss-lock-raise); width: min(870px, calc(100% - 36px)); height: min(780px, calc(100% - 36px)); max-height: none; border: 1px solid var(--ss-lock-raise); border-radius: 10px; color: var(--ss-color-ink); background: var(--ss-color-bg); box-shadow: 0 22px 44px -14px rgba(42, 31, 34, .55); }
  #pocket-study-settings-dialog > .ui-settings-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title close" "tabs saved"; align-items: center; gap: 0 12px; position: relative; z-index: 1; padding: 0 0 10px; border: 0; color: var(--ss-color-ink); background: linear-gradient(var(--ss-lock-ground) 0 56px, var(--ss-color-bg) 56px); box-shadow: none; transition: box-shadow 120ms ease-out; }
  #pocket-study-settings-dialog > .ui-settings-header > .ui-settings-heading,
  #pocket-study-settings-dialog > .ui-settings-header .ui-settings-title { display: contents; }
  #pocket-study-settings-dialog > .ui-settings-header .ui-settings-title > h2 { grid-area: title; display: flex; align-items: center; min-height: 56px; margin: 0; padding: 0 16px; color: var(--ss-lock-ink); font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  #pocket-study-settings-dialog > .ui-settings-header .ui-settings-title > p { grid-area: saved; justify-self: end; margin: 0; padding: 14px 14px 0; color: var(--ss-lock-ground); font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  #pocket-study-settings-dialog > .ui-settings-header > [data-settings-close] { grid-area: close; justify-self: end; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 6px 6px 6px 0; padding: 0; border: 1px solid var(--ss-lock-raise); border-radius: 6px; color: var(--ss-lock-ground); background: var(--ss-color-paper); box-shadow: var(--settings-raise); }
  #pocket-study-settings-dialog > .ui-settings-header > [data-settings-close] > .ui-icon { width: 20px; height: 20px; }
  #pocket-study-settings-dialog .ui-settings-tabs { grid-area: tabs; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 0; padding: 14px 14px 0; }
  #pocket-study-settings-dialog .ui-settings-tabs > button { min-height: 38px; height: auto; padding: 4px 16px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-lock-ground); background: var(--ss-color-paper); box-shadow: var(--settings-raise); font: 400 var(--ss-text-base)/1.1 var(--ss-font-pixel-title, var(--ss-font-display)); white-space: nowrap; }
  #pocket-study-settings-dialog .ui-settings-tabs > button[aria-pressed="true"] { color: var(--ss-v94-tab-ink, var(--ss-lock-ink)); background: var(--ss-v94-tab, var(--ss-lock-ground)); box-shadow: var(--settings-raise-on); }
  #pocket-study-settings-dialog > .ui-settings-scroll { display: flex; flex-direction: column; gap: 12px; padding: 2px 14px 14px; scroll-padding: 12px 0 26px; background: transparent; }
  /* Rows scrolled up fade out under the tabs instead of showing as cut slivers. */
  #pocket-study-settings-dialog > .ui-settings-scroll { padding-top: 12px; mask-image: linear-gradient(to bottom, transparent, var(--ss-color-ink) 12px); }
  /* The tab row keeps 10px of cream under its buttons, and once the page scrolls it ends in a hairline with a soft fall,
     so a card running under it reads as scrolled, never sliced against the tabs. */
  #pocket-study-settings-dialog[data-settings-scrolled] > .ui-settings-header { box-shadow: 0 1px 0 var(--settings-hair), 0 8px 10px -8px color-mix(in srgb, var(--ss-color-ink) 35%, transparent); }
  #pocket-study-settings-dialog .ui-settings-groups.ui-settings-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
  #pocket-study-settings-dialog .ui-settings-columns > .ui-settings-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  #pocket-study-settings-dialog .ui-settings-group { display: flex; flex-direction: column; overflow: hidden; margin: 0; border: 1px solid var(--settings-hair); border-radius: 8px; background: var(--ss-color-paper); box-shadow: inset 1px 1px 0 var(--ss-color-paper), 2px 3px 0 var(--settings-hair), 0 12px 22px -12px rgba(59, 43, 46, .35); }
  #pocket-study-settings-dialog .ui-settings-group > h2 { display: flex; align-items: center; min-height: 34px; margin: 0; padding: 4px 12px; 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, var(--ss-font-display)); }
  #pocket-study-settings-dialog .ui-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 12px; }
  #pocket-study-settings-dialog .ui-settings-group > .ui-settings-row + .ui-settings-row { border-top: 1px solid var(--settings-hair); }
  #pocket-study-settings-dialog .ui-settings-row__copy { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
  #pocket-study-settings-dialog .ui-settings-row__copy strong { font: 700 var(--ss-text-base)/1.25 var(--ss-font-reading); }
  #pocket-study-settings-dialog .ui-settings-row__copy small { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
  #pocket-study-settings-dialog .ui-settings-row__control { flex: none; justify-content: flex-end; }
  /* the Pocket Study tab's groups: each row its own raised box on the cream inside the card (D014) */
  #pocket-study-settings-dialog .ui-settings-group:is([data-settings-group="look"], [data-settings-group="computer"], [data-settings-group="you"]) { gap: 8px; padding-bottom: 8px; background: var(--ss-color-bg); }
  #pocket-study-settings-dialog .ui-settings-group:is([data-settings-group="look"], [data-settings-group="computer"], [data-settings-group="you"]) > .ui-settings-row { margin: 0 8px; border: 1px solid var(--settings-hair); border-radius: 6px; background: var(--ss-color-paper); box-shadow: var(--settings-raise); }
  #pocket-study-settings-dialog .ui-settings-group:is([data-settings-group="look"], [data-settings-group="computer"], [data-settings-group="you"]) > h2 { margin-bottom: 0; }
  #pocket-study-settings-dialog :is([data-settings-row="display.textSize"], [data-settings-row="profile.displayName"]) { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 8px; }
  /* Any app's row with a joined choice of four or more parts does the same, so its label keeps one line (Decks' Say the Japanese aloud). */
  #pocket-study-settings-dialog .ui-settings-row:has(> .ui-settings-row__control > :is(.ui-segmented-choice, .ui-settings-choice) > button:nth-child(4)) { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 8px; }
  #pocket-study-settings-dialog .ui-settings-row:has(> .ui-settings-row__control > :is(.ui-segmented-choice, .ui-settings-choice) > button:nth-child(4)) > .ui-settings-row__control { justify-content: stretch; }
  #pocket-study-settings-dialog :is([data-settings-row="display.textSize"], [data-settings-row="profile.displayName"]) > .ui-settings-row__control { justify-content: stretch; }
  /* controls */
  #pocket-study-settings-dialog .ui-settings-choice { flex-wrap: nowrap; gap: 0; }
  #pocket-study-settings-dialog .ui-settings-choice > button { min-height: 30px; height: 30px; padding: 0 14px; border: 2px solid var(--ss-lock-ground); border-radius: 0; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--settings-raise); font: 700 var(--ss-text-xs)/1 var(--ss-font-reading); white-space: nowrap; }
  #pocket-study-settings-dialog .ui-settings-choice > button + button { margin-inline-start: -2px; border-left: 2px solid var(--ss-lock-ground); }
  #pocket-study-settings-dialog .ui-settings-choice > button:first-child { border-radius: 6px 0 0 6px; }
  #pocket-study-settings-dialog .ui-settings-choice > button:last-child { border-radius: 0 6px 6px 0; }
  #pocket-study-settings-dialog .ui-settings-choice > button[aria-pressed="true"] { color: var(--ss-v94-tab-ink, var(--ss-lock-ink)); background: var(--ss-v94-tab, var(--ss-lock-ground)); box-shadow: var(--settings-raise-on); }
  #pocket-study-settings-dialog [data-settings-row="display.textSize"] .ui-settings-choice { width: 100%; gap: 6px; }
  #pocket-study-settings-dialog [data-settings-row="display.textSize"] .ui-settings-choice > button { flex: 1 1 auto; margin: 0; border-radius: 6px; }
  #pocket-study-settings-dialog :is(.ui-select, .ui-settings-action, .ui-select.ui-skin-picker__button) { min-height: 34px; padding: 4px 14px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background-color: var(--ss-color-paper); box-shadow: var(--settings-raise); font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  #pocket-study-settings-dialog .ui-select { min-width: 200px; font-weight: 500; }
  #pocket-study-settings-dialog .ui-settings-native-text { width: 100%; max-width: none; min-height: 40px; padding: 6px 12px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; background: var(--ss-color-paper); box-shadow: none; font: 500 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  /* Profile data and Credits: one raised row each under the groups (D014); Profile data's row is its name with Export my
     data in plum and Import at its end (D019). Under them What's included folds open as on the phone (Emily: same features
     on both sizes), with the line on tabs and media; the export or import form then takes their place. */
  #pocket-study-settings-dialog [data-profile-data] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding: 8px 14px; border: 1px solid var(--settings-hair); border-radius: 8px; background: var(--ss-color-paper); box-shadow: var(--settings-raise); }
  #pocket-study-settings-dialog [data-profile-data] > h2 { flex: 1 1 auto; margin: 0; font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  #pocket-study-settings-dialog [data-profile-data] > h2 + p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #pocket-study-settings-dialog [data-profile-data] > .ui-profile-data-included { flex-basis: 100%; margin: 0; border-top: 1px solid var(--settings-hair); }
  #pocket-study-settings-dialog .ui-profile-data-included > summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding-top: 4px; list-style: none; color: var(--ss-color-ink); font: 600 var(--ss-text-sm)/1.2 var(--ss-font-reading); cursor: pointer; }
  #pocket-study-settings-dialog .ui-profile-data-included > summary::-webkit-details-marker { display: none; }
  #pocket-study-settings-dialog .ui-profile-data-included > summary::after { content: ""; width: 7px; height: 7px; margin: 0 4px 4px 0; border: solid var(--ss-lock-ground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  #pocket-study-settings-dialog .ui-profile-data-included[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
  #pocket-study-settings-dialog .ui-profile-data-included > .ui-profile-data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin: 2px 0 8px; padding-inline-start: 20px; color: var(--ss-color-ink); font: 500 var(--ss-text-sm)/1.4 var(--ss-font-reading); }
  #pocket-study-settings-dialog [data-profile-data] > .ui-profile-data-note { flex-basis: 100%; margin: 0 0 2px; color: var(--ss-color-ink-soft); font: 400 var(--ss-text-xs)/1.4 var(--ss-font-reading); }
  #pocket-study-settings-dialog [data-profile-data]:has(> form:not([hidden])) > :is(.ui-profile-data-included, .ui-profile-data-note) { display: none; }
  #pocket-study-settings-dialog .ui-profile-data-actions { display: flex; gap: 10px; }
  #pocket-study-settings-dialog [data-profile-data] .ui-control-button { gap: 8px; min-height: 34px; padding: 4px 14px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--settings-raise); font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); --ui-icon-size: 18px; }
  #pocket-study-settings-dialog [data-profile-data] .ui-control-button--primary { color: var(--ss-lock-ink); background: var(--ss-lock-ground); box-shadow: var(--settings-raise-on); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title); }
  #pocket-study-settings-dialog [data-profile-data] > form { flex-basis: 100%; }
  #pocket-study-settings-dialog [data-profile-data] > :is(.ui-profile-data-status, [data-profile-data-action="reload"], [data-profile-data-action="done"]) { flex-basis: 100%; margin: 0; }
  #pocket-study-settings-dialog [data-profile-data] > :is([data-profile-data-action="reload"], [data-profile-data-action="done"]) { flex: none; margin-inline-start: auto; }
  #pocket-study-settings-dialog .ui-settings-credits { margin: 0; padding: 0 14px; border: 1px solid var(--settings-hair); border-radius: 8px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--settings-raise); }
  #pocket-study-settings-dialog .ui-settings-credits > summary { display: flex; align-items: center; justify-content: space-between; width: auto; min-height: 44px; list-style: none; text-decoration: none; font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  #pocket-study-settings-dialog .ui-settings-credits > summary::-webkit-details-marker { display: none; }
  #pocket-study-settings-dialog .ui-settings-credits > summary::after { content: ""; width: 8px; height: 8px; margin: 0 4px 4px 0; border: solid var(--ss-lock-ground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  #pocket-study-settings-dialog .ui-settings-credits[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
  #pocket-study-settings-dialog .ui-settings-credits > ul { margin: 0 0 12px; font: 500 var(--ss-text-xs)/1.4 var(--ss-font-reading); }
  /* Done */
  #pocket-study-settings-dialog > .ui-settings-footer { display: flex; justify-content: flex-end; padding: 0 14px 14px; border: 0; background: transparent; }
  #pocket-study-settings-dialog > .ui-settings-footer[hidden] { display: none; }
  #pocket-study-settings-dialog > .ui-settings-footer > [data-settings-done] { min-height: 40px; padding: 4px 22px; border: 2px solid var(--ss-lock-raise); border-radius: 6px; color: var(--ss-lock-ink); background: var(--ss-lock-ground); box-shadow: var(--settings-raise-on); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  #pocket-study-settings-dialog :is(button, select, input, summary):focus-visible { outline: 3px solid var(--ss-crane-sky); outline-offset: 2px; }
}

/* The switch is the shared one (primitives.css, house style 17 Oct); on a computer Settings only gives it the raise its
   other buttons have. */
#pocket-study-settings-dialog:not([data-settings-phone]) .ui-switch { box-shadow: var(--settings-raise); }
#pocket-study-settings-dialog:not([data-settings-phone]) .ui-switch[aria-checked="true"] { box-shadow: var(--settings-raise-on); }
@media (min-width: 901px), (min-width: 768px) and (pointer: fine) {
  /* Profile data's export and import form under its row (D020, D022, D023): its title, then Cancel at the start and the
     main button at the end. */
  #pocket-study-settings-dialog [data-profile-data] > form:not([hidden]) { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--settings-hair); }
  #pocket-study-settings-dialog [data-profile-data] > form > h3 { margin: 0; color: var(--ss-lock-ground); font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  #pocket-study-settings-dialog [data-profile-data] .ui-profile-data-goes-in { border-color: var(--settings-hair); box-shadow: var(--settings-raise); }
  #pocket-study-settings-dialog [data-profile-data] .ui-profile-data-foot > button { min-height: 36px; padding: 4px 18px; }
}

/* Profile data's own controls wherever it shows (modules/shell/profile-data.mjs, boards D019–D025): the browser's file
   button stays out of sight behind Choose a backup file, a dashed box that turns into the file's card with Change; the
   passphrase has Show inside its field; what a backup holds is a list in two columns with small squares; a refusal is a
   brick strip with its square, and the passphrase it blames is outlined in brick. */
[data-profile-data] { --profile-data-ink: var(--ss-lock-ground); }
[data-profile-data] [hidden] { display: none; }
[data-profile-data] .ui-control-button > .ui-icon { --ui-icon-size: 18px; }
[data-profile-data] .ui-profile-data-import { display: grid; gap: 12px; }
[data-profile-data] .ui-profile-data-import[hidden] { display: none; }
[data-profile-data] .ui-profile-data-file { position: relative; display: grid; place-items: center; box-sizing: border-box; min-height: 76px; padding: 12px 16px; border: 1px dashed var(--profile-data-ink); border-radius: 6px; }
[data-profile-data] .ui-profile-data-file__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
[data-profile-data] .ui-profile-data-file__card:not([hidden]) { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; }
[data-profile-data] .ui-profile-data-file__card > .ui-icon { --ui-icon-size: 28px; color: var(--profile-data-ink); }
[data-profile-data] .ui-profile-data-file__card > span { display: grid; flex: 1 1 auto; min-width: 0; }
[data-profile-data] .ui-profile-data-file__card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--ss-text-base)/1.3 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-file__card small { color: var(--profile-data-ink); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-check { display: flex; align-items: center; gap: 12px; font: 500 var(--ss-text-base)/1.3 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-check > input { flex: none; }
[data-profile-data] .ui-profile-data-label { margin-bottom: -4px; font: 700 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-pass { display: grid; align-items: center; }
[data-profile-data] .ui-profile-data-pass > * { grid-area: 1 / 1; }
[data-profile-data] .ui-profile-data-pass > input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 6px 84px 6px 14px; border: 2px solid var(--profile-data-ink); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); font: 500 var(--ss-text-base)/1.2 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-pass > input[aria-invalid="true"] { border-color: var(--ss-role-destructive); }
[data-profile-data] .ui-profile-data-pass > button { position: relative; z-index: 1; justify-self: end; min-height: 30px; margin-inline-end: 6px; padding: 2px 10px; }
[data-profile-data] .ui-profile-data-hint { margin: 0; color: var(--profile-data-ink); font: 500 var(--ss-text-xs)/1.4 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-goes-in { padding: 12px 16px; border: 1px solid var(--ss-color-tan-border); border-radius: 8px; background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard, none); }
[data-profile-data] .ui-profile-data-goes-in[hidden] { display: none; }
[data-profile-data] .ui-profile-data-goes-in > h4 { margin: 0 0 8px; color: var(--profile-data-ink); font: 400 var(--ss-text-base)/1.3 var(--ss-font-pixel-title, var(--ss-font-display)); }
[data-profile-data] .ui-profile-data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin: 0; padding: 0; list-style: none; font: 500 var(--ss-text-base)/1.4 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-list > li { display: flex; align-items: center; gap: 12px; }
[data-profile-data] .ui-profile-data-list > li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--profile-data-ink); }
[data-profile-data] .ui-profile-data-foot { display: flex; justify-content: space-between; gap: 10px; }
[data-profile-data] .ui-profile-data-status { margin: 0; font: 500 var(--ss-text-base)/1.4 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-status:empty { display: none; }
[data-profile-data] form .ui-profile-data-status:not([data-tone]) { padding: 0; border: 0; color: var(--profile-data-ink); background: none; }
[data-profile-data] .ui-profile-data-status[data-tone="error"] { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--ss-role-destructive); border-radius: 6px; color: var(--ss-color-ink); background: color-mix(in srgb, var(--ss-role-destructive) 10%, var(--ss-color-paper)); }
[data-profile-data] .ui-profile-data-status[data-tone="error"]::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .4em; background: var(--ss-role-destructive); }
[data-profile-data] .ui-profile-data-status[data-tone="done"] { padding: 10px 12px; border: 1px solid var(--ss-color-tan-border); border-left: 4px solid var(--ss-crane-sage); border-radius: 6px; background: var(--ss-color-paper); }
/* A finished export or import (D021, D024): a sage tick before its short title, the sentence under it. Kept for recovery
   (D025) is calm: no tick and no colour, only the title and its sentence. */
[data-profile-data] .ui-profile-data-status:is([data-tone="done"], [data-tone="kept"]) { display: grid; gap: 4px; }
[data-profile-data] .ui-profile-data-status[data-tone="kept"] { padding: 10px 12px; border: 1px solid var(--ss-color-tan-border); border-radius: 6px; background: var(--ss-color-paper); }
[data-profile-data] .ui-profile-data-status__title { display: flex; align-items: center; gap: 8px; font: 700 var(--ss-text-base)/1.3 var(--ss-font-reading); }
[data-profile-data] .ui-profile-data-status[data-tone="done"] > .ui-profile-data-status__title::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; color: var(--ss-color-ink); background: var(--ss-crane-sage); font: 700 var(--ss-text-sm)/1 var(--ss-font-reading); }
@media (min-width: 901px), (min-width: 768px) and (pointer: fine) {
  /* The Account row (D016, D017) opens with a small sage square, as drawn. */
  #pocket-study-settings-dialog [data-settings-row="account"]::before { content: ""; flex: none; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid var(--settings-hair); border-radius: 4px; background: var(--ss-crane-sage); }
}

/* In Japanese › Change wherever it shows (modules/shell/system-settings.mjs): each spelling a row with its square, the
   katakana and how it sounds; the chosen one's square filled. Write it myself opens a field for kana or letters. */
.ui-settings-kana { --kana-ink: var(--ss-v94-icon-ink, var(--ss-lock-ground)); color: var(--ss-color-ink); }
.ui-settings-kana__picks { display: grid; }
.ui-settings-kana__pick { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--ss-color-tan-border-soft); border-radius: 0; color: var(--ss-color-ink); background: none; text-align: start; font: 500 var(--ss-text-base)/1.2 var(--ss-font-reading, var(--ss-font-chrome)); cursor: pointer; }
.ui-settings-kana__pick:last-child { border-bottom: 0; }
.ui-settings-kana__spelling[lang="ja"] { font: 500 var(--ss-text-title)/1.2 var(--ss-font-jp); }
.ui-settings-kana__pick > small { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading, var(--ss-font-chrome)); }
.ui-settings-kana__write { display: grid; gap: 6px; }
.ui-settings-kana__write[hidden] { display: none; }
.ui-settings-kana__write > label { font: 700 var(--ss-text-base)/1.2 var(--ss-font-chrome); }
.ui-settings-kana__write > input { font: 500 var(--ss-text-field)/1.2 var(--ss-font-jp); }
.ui-settings-kana__write > small { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading, var(--ss-font-chrome)); }
@media (min-width: 901px), (min-width: 768px) and (pointer: fine) {
  /* The desktop board's You panel: the katakana, then Change; Change opens the spellings in a box under the row. */
  #pocket-study-settings-dialog .ui-settings-action-value { margin-inline-end: 12px; color: var(--ss-color-ink); font: 500 var(--ss-text-field)/1.2 var(--ss-font-jp); }
  #pocket-study-settings-dialog .ui-settings-kana { display: grid; gap: 8px; margin: 0 8px; padding: 10px 12px; border: 1px solid var(--settings-hair); border-radius: 6px; background: var(--ss-color-paper); box-shadow: var(--settings-raise); }
  #pocket-study-settings-dialog .ui-settings-kana > h3 { margin: 0; font: 700 var(--ss-text-base)/1.25 var(--ss-font-reading); }
  #pocket-study-settings-dialog .ui-settings-kana > p { display: none; }
  #pocket-study-settings-dialog .ui-settings-kana .ui-settings-page__bar { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; }
  #pocket-study-settings-dialog .ui-settings-kana .ui-settings-page__bar > button { min-height: 36px; padding: 4px 18px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; box-shadow: var(--settings-raise); font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  #pocket-study-settings-dialog .ui-settings-kana .ui-settings-page__bar > .ui-control-button--primary { color: var(--ss-lock-ink); background: var(--ss-lock-ground); box-shadow: var(--settings-raise-on); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title); }
}

/* Help (modules/shell/feedback.mjs, Emily 18 Oct): Send feedback shows the team's address with Copy and Write an email;
   Report a bug is a small form (what happened, what she expected, device details on by default) with Copy report beside
   Send. On a computer they are one raised card under Profile data, the form opening inside it; on a phone each is its own
   page under Help. */
[data-settings-help] { --help-ink: var(--ss-v94-icon-ink, var(--ss-lock-ground)); }
[data-settings-help] [hidden] { display: none; }
.ui-settings-help-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ui-settings-help-row__copy { display: grid; flex: 1 1 14em; gap: 2px; min-width: 0; }
.ui-settings-help-row__copy > strong { font: 700 var(--ss-text-base)/1.25 var(--ss-font-reading); }
.ui-settings-help-row__copy > small { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.4 var(--ss-font-reading); }
.ui-settings-help-address { color: var(--ss-color-ink); font: 700 var(--ss-text-xs)/1.4 var(--ss-font-reading); overflow-wrap: anywhere; user-select: all; }
.ui-settings-help-row__actions { display: flex; flex: none; gap: 8px; }
.ui-settings-help-row__actions > a.ui-control-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ui-settings-bug { display: grid; gap: 8px; }
/* The form's title is for screen readers: Report a bug's own row (computer) or the page title (phone) already says it. */
.ui-settings-bug > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-settings-bug__label { margin-top: 4px; font: 700 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
.ui-settings-bug__optional { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
.ui-settings-bug__text { box-sizing: border-box; width: 100%; min-height: 4.5em; padding: 8px 12px; resize: vertical; border: 2px solid var(--help-ink); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); font: 500 var(--ss-text-field)/1.4 var(--ss-font-reading); }
.ui-settings-bug__text[aria-invalid="true"] { border-color: var(--ss-role-destructive); }
.ui-settings-bug__text:focus-visible { outline: 3px solid var(--ss-crane-sky); outline-offset: 2px; }
.ui-settings-bug__check { display: flex; align-items: center; gap: 12px; margin-top: 4px; font: 500 var(--ss-text-base)/1.3 var(--ss-font-reading); }
.ui-settings-bug__what > summary { width: fit-content; color: var(--help-ink); font: 600 var(--ss-text-xs)/1.4 var(--ss-font-reading); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ui-settings-bug__what > p { margin: 4px 0 0; color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.4 var(--ss-font-reading); }
.ui-settings-bug__status { margin: 0; font: 500 var(--ss-text-base)/1.4 var(--ss-font-reading); }
.ui-settings-bug__status:empty { display: none; }
.ui-settings-bug__status[data-tone] { padding: 10px 12px; border: 1px solid var(--ss-color-tan-border); border-radius: 6px; background: var(--ss-color-paper); }
.ui-settings-bug__status[data-tone="done"] { border-left: 4px solid var(--ss-crane-sage); }
.ui-settings-bug__status[data-tone="error"] { border-color: var(--ss-role-destructive); background: color-mix(in srgb, var(--ss-role-destructive) 10%, var(--ss-color-paper)); }
.ui-settings-bug__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.ui-settings-bug__foot > [data-settings-help-action="copy-report"] { margin-inline-end: auto; }
@media (min-width: 901px), (min-width: 768px) and (pointer: fine) {
  #pocket-study-settings-dialog [data-settings-help] { display: grid; gap: 10px; padding: 10px 14px; border: 1px solid var(--settings-hair); border-radius: 8px; background: var(--ss-color-paper); box-shadow: var(--settings-raise); }
  #pocket-study-settings-dialog [data-settings-help] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #pocket-study-settings-dialog [data-settings-help] > :is(.ui-settings-help-row + .ui-settings-help-row, [data-settings-bug-slot]) { padding-top: 10px; border-top: 1px solid var(--settings-hair); }
  #pocket-study-settings-dialog [data-settings-help] .ui-control-button { gap: 8px; min-height: 34px; padding: 4px 14px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--settings-raise); font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  #pocket-study-settings-dialog [data-settings-help] .ui-control-button--primary { color: var(--ss-lock-ink); background: var(--ss-lock-ground); box-shadow: var(--settings-raise-on); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title); }
  #pocket-study-settings-dialog [data-settings-help] .ui-settings-bug__foot > button { min-height: 36px; padding: 4px 18px; }
}
@media (max-width: 767px), (pointer: coarse) and (max-width: 900px) {
  [data-ui-settings][data-settings-phone] [data-settings-help] { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
  [data-ui-settings][data-settings-phone] [data-settings-help] .ui-settings-help-row__copy > strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-ui-settings][data-settings-phone] .ui-settings-help-row { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 4px; }
  [data-ui-settings][data-settings-phone] .ui-settings-help-row__copy { flex: none; }
  [data-ui-settings][data-settings-phone] .ui-settings-help-row__copy > small { font: 400 var(--ss-text-base)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-help-address { display: block; margin-top: 4px; font: 700 var(--ss-text-base)/1.4 var(--ss-font-reading, var(--ss-font-chrome)); }
  [data-ui-settings][data-settings-phone] .ui-settings-help-row__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-ui-settings][data-settings-phone] [data-settings-help] .ui-control-button { gap: 8px; min-height: 50px; padding-inline: 12px; white-space: nowrap; }
  [data-ui-settings][data-settings-phone] .ui-settings-bug { flex: 1 0 auto; align-content: start; gap: 10px; }
  [data-ui-settings][data-settings-phone] .ui-settings-bug__label { font: 700 var(--ss-text-base)/1.2 var(--ss-font-chrome); }
  [data-ui-settings][data-settings-phone] .ui-settings-bug__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin-top: 4px; }
  [data-ui-settings][data-settings-phone] .ui-settings-bug__foot > [data-settings-help-action="copy-report"] { margin: 0; }
}