/* The admin, in the manner of Apple's own pages (decision 0019), on the same
   foundation as Hotori's back ends: the system font, large titles, white cards
   on a soft gray, blue for what can be clicked, green switches, and a dark
   version that follows the device unless someone picks one in the bar on top.
   Every screen is built from the kit's partials (app/views/admin/kit/); a
   screen never styles itself. */

/* Each color in its light and its dark version; the device picks, unless
   someone chose in the bar (data-theme on the page). */
:root {
  color-scheme: light dark;
  --page: light-dark(#f5f5f7, #1c1c1e);
  --card: light-dark(#fff, #2c2c2e);
  --text: light-dark(#1d1d1f, #f5f5f7);
  --muted: light-dark(#6e6e73, #a1a1a6);
  --faint: light-dark(#86868b, #8e8e93);
  --line: light-dark(#e5e5ea, #424245);
  --field: light-dark(#fff, #3a3a3c);
  --field-line: light-dark(#d2d2d7, #545458);
  --hover: light-dark(#f5f5f7, #3a3a3c);
  --chosen: light-dark(rgb(0 110 184 / 0.09), rgb(140 195 220 / 0.16));
  /* Wada's Azure, the blue of the Shibui Sites icon (decision 0043). */
  --accent: light-dark(#006eb8, #8cc3dc);
  /* Blue behind white text: a little deeper in dark mode, so the text stays readable. */
  --accent-fill: light-dark(#006eb8, #006eb8);
  --accent-fill-hover: light-dark(#005b8d, #1a7cc0);
  --focus: light-dark(rgb(0 110 184 / 0.3), rgb(140 195 220 / 0.4));
  --good: light-dark(#e9f6ec, #12301b);
  --good-text: light-dark(#1d7a35, #6fd08c);
  --bad: light-dark(#fdeceb, #3a1614);
  --bad-text: light-dark(#c9302c, #ff6961);
  --fair: light-dark(#fff4e5, #3a2a12);
  --fair-text: light-dark(#a35200, #ffb35c);
  --bar: light-dark(rgb(251 251 253 / 0.8), rgb(28 28 30 / 0.8));
  --shadow-color: light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.25));
  --shadow: 0 1px 2px var(--shadow-color), 0 4px 16px var(--shadow-color);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}

:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A link to a part of a page (#export) lands below the frosted bar. */
html:has(body.admin) { scroll-padding-top: 4.5rem; }

body.admin {
  -webkit-font-smoothing: antialiased;
  background: var(--page);
  color: var(--text);
  font: 15px/1.47 var(--font);
  letter-spacing: -0.01em;
  margin: 0;
}

.admin {
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  h1, h2, p { margin: 0; }
  :focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); border-radius: 6px; }

  .icon { flex-shrink: 0; height: 1.15rem; width: 1.15rem; }
  .note { color: var(--muted); font-size: 0.8125rem; }

  /* The frame: a frosted bar on top, the page below it. */
  .kit-bar {
    align-items: center;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: var(--bar);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1rem 2rem;
    justify-content: space-between;
    padding: 0.6rem max(1.5rem, calc((100% - 60rem) / 2 + 1.5rem));
    position: sticky;
    top: 0;
    view-transition-name: bar;
    z-index: 10;
  }

  .kit-brand { align-items: center; display: flex; gap: 0.5rem; color: var(--text); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
  .kit-brand:hover { text-decoration: none; }
  .kit-brand__icon { border-radius: 5px; }

  /* The page's name, small, once its large title scrolls away (large_title_controller). */
  .kit-bar__title {
    flex: 1 1 0; font-size: 0.9rem; font-weight: 600; margin-inline: 1rem; min-width: 0;
    opacity: 0; overflow: hidden; pointer-events: none; text-align: center; text-overflow: ellipsis;
    transform: translateY(0.3rem); transition: opacity 0.2s, transform 0.2s; white-space: nowrap;
  }
  .kit-bar.scrolled .kit-bar__title { opacity: 1; transform: none; }

  .kit-bar__tools { align-items: center; display: flex; font-size: 0.8125rem; gap: 1.25rem; }
  .kit-bar__who { color: var(--muted); }
  .kit-bar__who:hover { color: var(--text); text-decoration: none; }
  /* Help from Shibui, or Shibui's requests: always there, even on a phone. */
  .kit-bar__help { color: var(--muted); white-space: nowrap; }
  .kit-bar__help:hover { color: var(--text); text-decoration: none; }

  /* The person's language: a small menu in the bar, the size of the controls beside it. */
  .kit-bar .kit-language select.kit-field__input { background-color: var(--hover); border: 0; border-radius: 980px; font-size: 0.8125rem; padding-block: 0.25rem; }

  /* Auto, light, dark: a small segmented control, as in the Mac's settings. */
  .kit-theme { background: var(--hover); border-radius: 980px; display: flex; padding: 2px; }
  .kit-theme button {
    background: none; border: 0; border-radius: 980px; color: var(--muted); cursor: pointer;
    display: flex; padding: 0.25rem 0.45rem;
    &:hover { color: var(--text); }
    &[aria-pressed=true] { background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); color: var(--text); }
    .icon { height: 0.95rem; width: 0.95rem; }
  }

  .kit-main { display: grid; gap: 2.25rem; margin: 0 auto; max-width: 60rem; padding: 0.5rem 1.5rem 5rem; }
  .kit-main:focus { outline: none; }
  .kit-solo { display: grid; min-height: 100dvh; padding: 1.5rem; place-content: center; }

  /* The large title: the page's name, and its main action beside it. */
  .kit-page-header { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 1.25rem; }
  .kit-page-header__title { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
  .kit-page-header__subtitle { color: var(--muted); font-size: 0.9375rem; margin-top: 0.5rem; }
  .kit-page-header__actions { display: flex; gap: 0.75rem; }

  /* A column of sections inside one screen element. */
  .kit-stack { display: grid; gap: 2.25rem; }

  /* Grouped rows on a white card, as in the iPhone's Settings. */
  .kit-section { display: grid; gap: 0.5rem; }
  .kit-section__title { color: var(--muted); font-size: 0.8125rem; font-weight: 600; padding-inline: 1rem; }
  .kit-section__group { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .kit-section__footer { color: var(--muted); font-size: 0.8125rem; padding-inline: 1rem; }

  .kit-row {
    align-items: center; color: var(--text); display: flex; gap: 0.75rem;
    min-height: 3rem; padding: 0.55rem 1rem;
    & + & { box-shadow: inset 0 1px 0 var(--line); }
    > .icon { color: var(--faint); height: 0.95rem; width: 0.95rem; }
  }
  a.kit-row:hover { background: var(--hover); text-decoration: none; }
  .kit-row__text { display: grid; flex: 1; min-width: 0; }
  .kit-row__label { overflow-wrap: anywhere; }
  .kit-row__detail { color: var(--muted); font-size: 0.8125rem; }
  .kit-row__value { color: var(--muted); font-variant-numeric: tabular-nums; text-align: end; }
  .kit-row__controls { align-items: center; display: flex; gap: 0.5rem; }

  /* Start pages are tiles, like widgets on an iPad: a colored icon with its count beside it, a name, and
     two lines that say what is behind it. */
  .kit-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
  .kit-tile {
    background: var(--card); border-radius: 20px; box-shadow: var(--shadow); color: var(--text);
    display: grid; align-content: start; gap: 0.2rem; min-height: 9.5rem; padding: 1.15rem 1.25rem 1.2rem;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
    &:hover { box-shadow: 0 2px 4px var(--shadow-color), 0 14px 36px var(--shadow-color); text-decoration: none; transform: translateY(-2px); }
    &:active { transform: scale(0.98); }
    &:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.022em; }
    .note { display: -webkit-box; line-height: 1.4; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  }
  .kit-tile__top { align-items: start; display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; }
  .kit-tile__icon {
    align-items: center; border-radius: 11px; color: #fff; display: flex; flex-shrink: 0; height: 2.5rem; justify-content: center; width: 2.5rem;
    background-image: linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0)); box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
    .icon { height: 1.4rem; width: 1.4rem; }
  }
  .kit-tile__value {
    background: var(--hover); border-radius: 980px; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums;
    font-weight: 500; overflow: hidden; padding: 0.2rem 0.6rem; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem;
  }

  .blue { background-color: #0a7aff; }
  /* A site's sections each keep one of Wada's deep colors, so the eye finds them again (decision 0043). */
  .kit-tile__icon {
    &.azure { background-color: #006eb8; } &.jade { background-color: #00756f; } &.moss { background-color: #437742; }
    &.terracotta { background-color: #ae5224; } &.cinnabar { background-color: #a62c37; } &.rose { background-color: #b73f74; }
    &.iris { background-color: #6450a1; } &.ochre { background-color: #8a6326; } &.graphite { background-color: #34454c; }
    &.petrol { background-color: #064f6e; }
  }

  /* A site's overview (decision 0126), in the look of the Shibui Sites icon: a deep Azure top with windows
     fanned from a corner, the changes not online yet and the button that publishes them; below it what needs
     the person, the pages as small windows in the menu's order, and one quiet list for the rest. */
  .overview-hero {
    align-items: center; background: light-dark(#006eb8, #051230); border-radius: 30px; color: #fff;
    display: flex; flex-wrap: wrap; gap: 2.5rem; overflow: hidden; padding: 2rem;
    a { color: inherit; }
    h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
  }
  .overview-hero__art { flex: 0 0 21rem; height: 14.75rem; max-width: 100%; position: relative; }
  .overview-hero__window { border-radius: 14px; height: 11.25rem; position: absolute; width: 17rem; }
  .overview-hero__window--back { background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.28); left: 2.75rem; top: 0.5rem; transform: rotate(7deg); }
  .overview-hero__window--middle { background: rgb(255 255 255 / 0.2); border: 1px solid rgb(255 255 255 / 0.34); left: 1.6rem; top: 1.1rem; transform: rotate(3deg); }
  .overview-hero__window--front {
    background: rgb(255 255 255 / 0.94); box-shadow: 0 18px 40px rgb(0 0 0 / 0.28); display: flex; flex-direction: column;
    height: 12rem; left: 0.25rem; overflow: hidden; top: 2.25rem; width: 17.5rem;
    img { flex: 1; min-height: 0; object-fit: cover; object-position: top; width: 100%; }
  }
  .overview-window__bar {
    align-items: center; background: light-dark(#f2f2f4, #3a3a3c); display: flex; flex: none; gap: 4px; height: 1.1rem; padding: 0 0.5rem;
    i { background: light-dark(#d1d1d6, #636366); border-radius: 50%; height: 6px; width: 6px; }
  }
  .overview-hero__window--front .overview-window__bar { background: rgb(0 0 0 / 0.04); i { background: #c9cdd3; } }
  .overview-window__paper { background: linear-gradient(#f3efe7 22%, #d9cfbd 22% 26%, #f3efe7 26% 34%, #e3dccd 34% 88%, #f3efe7 88%); flex: 1; }
  .overview-hero__body { display: grid; flex: 1 1 19rem; gap: 1.1rem; min-width: 0; }
  .overview-hero__top { align-items: center; display: flex; font-size: 0.8125rem; justify-content: space-between; margin: 0 0 -0.6rem; color: rgb(255 255 255 / 0.85); }
  .overview-hero__help {
    align-items: center; background: rgb(255 255 255 / 0.16); border-radius: 50%; display: inline-flex; font-size: 0.875rem;
    font-weight: 600; height: 1.75rem; justify-content: center; width: 1.75rem;
  }
  .overview-hero__meta {
    display: flex; flex-wrap: wrap; font-size: 0.9375rem; gap: 0.35rem 0.9rem; margin: -0.6rem 0 0; color: rgb(255 255 255 / 0.85);
    a:first-child { align-items: center; color: #fff; display: inline-flex; font-weight: 500; gap: 0.2rem; }
    .icon { height: 0.85rem; width: 0.85rem; }
  }
  .overview-changes {
    background: rgb(255 255 255 / 0.13); border: 1px solid rgb(255 255 255 / 0.22); border-radius: 18px; padding: 0.25rem 1rem 0.35rem;
    ul { list-style: none; margin: 0; padding: 0; }
    li { align-items: center; border-top: 1px solid rgb(255 255 255 / 0.16); display: flex; gap: 0.6rem; min-height: 2.75rem; }
    li > a { align-items: baseline; display: flex; flex: 1; flex-wrap: wrap; font-size: 0.875rem; gap: 0.15rem 0.6rem; min-width: 0; padding: 0.4rem 0; }
    li > a span { color: rgb(255 255 255 / 0.9); flex: 1 1 auto; }
    li > a small { color: rgb(255 255 255 / 0.85); font-size: 0.8125rem; white-space: nowrap; }
  }
  .overview-changes__title {
    align-items: center; display: flex; font-size: 0.9375rem; gap: 0.5rem; margin: 0; padding: 0.6rem 0 0.4rem;
    &::before { background: #e2b540; border-radius: 50%; content: ""; flex: none; height: 0.5rem; width: 0.5rem; }
    strong { flex: 1; font-weight: 600; }
    a { color: rgb(255 255 255 / 0.88); font-size: 0.875rem; }
  }
  .overview-changes__undo {
    align-items: center; background: rgb(255 255 255 / 0.12); border: 0; border-radius: 50%; color: #fff; cursor: pointer;
    display: inline-flex; flex: none; height: 2rem; justify-content: center; width: 2rem;
    &:hover { background: rgb(255 255 255 / 0.24); }
    .icon { height: 1rem; width: 1rem; }
  }
  .overview-changes--calm {
    align-items: center; display: flex; gap: 0.75rem; padding: 0.85rem 1rem;
    p { color: rgb(255 255 255 / 0.88); font-size: 0.875rem; margin: 0; }
    strong { color: #fff; display: block; font-size: 0.9375rem; font-weight: 600; }
  }
  .overview-changes__check {
    align-items: center; background: #fff; border-radius: 50%; color: light-dark(#006eb8, #051230); display: inline-flex;
    flex: none; height: 1.75rem; justify-content: center; width: 1.75rem;
    .icon { height: 1rem; stroke-width: 3; width: 1rem; }
  }
  .overview-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; .kit-button-form { display: contents; } }
  .overview-hero__primary, .overview-hero__secondary {
    align-items: center; border: 0; border-radius: 980px; cursor: pointer; display: inline-flex; font: inherit; font-size: 0.9375rem;
    height: 2.75rem; padding: 0 1.4rem; transition: transform 0.15s;
    &:active { transform: scale(0.97); }
    &:hover { text-decoration: none; }
  }
  .overview-hero__primary { background: #fff; color: light-dark(#006eb8, #051230) !important; font-weight: 600; }
  .overview-hero__secondary { background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.26); font-weight: 500; }
  .overview-hero__note { color: rgb(255 255 255 / 0.85); font-size: 0.8125rem; margin: -0.35rem 0 0; }

  @media (width <= 765px) {
    .overview-hero { border-radius: 24px; padding: 1.5rem 1.25rem; }
    .overview-hero__art { display: none; }
    .overview-hero h1 { font-size: 1.875rem; }
  }

  .overview-label { color: var(--muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0 0.25rem; text-transform: uppercase; }
  .overview-needs { display: grid; gap: 0.6rem; }
  .overview-needs__item {
    align-items: center; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; padding: 1rem 1.25rem;
    p { display: grid; flex: 1 1 18rem; gap: 0.1rem; margin: 0; }
    p span { color: var(--muted); font-size: 0.875rem; }
  }
  .overview-needs__icon {
    align-items: center; background: rgb(226 181 64 / 0.22); border-radius: 10px; color: light-dark(#8a6326, #e2b540); display: inline-flex;
    flex: none; height: 2.1rem; justify-content: center; width: 2.1rem;
    .icon { height: 1.15rem; width: 1.15rem; }
  }

  .overview-pages { display: grid; gap: 0.9rem; }
  .overview-pages__header {
    align-items: center; display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; padding: 0 0.25rem;
    h2 { flex: 1 0 auto; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
  }
  .overview-pages__search {
    align-items: center; background: light-dark(#e8e8ed, #2c2c2e); border-radius: 980px; color: var(--muted); display: flex;
    flex: 0 1 14rem; gap: 0.4rem; height: 2.25rem; min-width: 9rem; padding: 0 0.75rem;
    input { background: none; border: 0; color: var(--text); font: inherit; font-size: 0.875rem; min-width: 0; outline: none; padding: 0; width: 100%; }
    &:focus-within { box-shadow: 0 0 0 3px var(--focus); }
    .icon { flex: none; height: 0.95rem; width: 0.95rem; }
  }
  .overview-pages__note { color: var(--muted); font-size: 0.875rem; margin: -0.4rem 0.25rem 0; }
  .overview-pages__grid {
    display: grid; gap: 1.1rem 0.9rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); list-style: none; margin: 0; padding: 0;
    a { color: var(--text); display: grid; gap: 0.15rem; }
    a:hover { text-decoration: none; .overview-window { transform: translateY(-2px); } }
    strong { font-size: 0.875rem; font-weight: 600; margin-top: 0.35rem; }
  }
  .overview-window {
    aspect-ratio: 16 / 11.5; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; overflow: hidden; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    img { flex: 1; height: auto; min-height: 0; object-fit: cover; object-position: top; width: 100%; }
  }
  .overview-pages__state {
    align-items: center; color: var(--muted); display: flex; font-size: 0.75rem; gap: 0.3rem;
    &.overview-pages__state--waiting { color: light-dark(#8a6326, #e2b540); }
    &.overview-pages__state--waiting::before { background: #e2b540; border-radius: 50%; content: ""; height: 6px; width: 6px; }
  }
  .overview-more { align-items: center; display: inline-flex; font-size: 0.9375rem; gap: 0.2rem; justify-self: start; margin-left: 0.25rem; .icon { height: 0.9rem; width: 0.9rem; } }

  .overview-lists {
    align-items: start; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    section { display: grid; gap: 0.75rem; }
    h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0 0.25rem; }
  }
  /* Its rows are the kit's tiles drawn as a list, so a module's row (SiteModule site_rows) fits in unchanged. */
  .overview-list {
    background: var(--card); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; padding: 0.25rem 0;
    .kit-tile {
      align-items: center; background: none; border-radius: 0; box-shadow: none; column-gap: 0.85rem; display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto; min-height: 3.4rem; padding: 0 1.1rem; transform: none !important;
      &:hover { background: var(--hover); box-shadow: none; }
      &::after { background: var(--faint); content: ""; grid-column: 4; grid-row: 1; height: 0.8rem; width: 0.5rem;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
      & + .kit-tile { box-shadow: inset 3.1rem 1px 0 0 var(--card), inset 0 1px 0 0 var(--line); }
      strong { font-size: 0.9375rem; font-weight: 400; grid-column: 2; grid-row: 1; letter-spacing: 0; }
      .note { display: none; }
    }
    .kit-tile__top { display: contents; }
    .kit-tile__icon { background-color: light-dark(#006eb8, #1c4286) !important; background-image: none; border-radius: 8px; grid-column: 1; grid-row: 1; height: 1.9rem; width: 1.9rem; .icon { height: 1.1rem; width: 1.1rem; } }
    .kit-tile__value { background: none; font-size: 0.875rem; grid-column: 3; grid-row: 1; justify-self: end; max-width: 100%; padding: 0; }
    .kit-tile--warn .kit-tile__value { color: light-dark(#8a6326, #e2b540); }
  }

  /* Buttons: blue pills for the main action, gray pills beside them, plain blue text for the quiet ones. */
  .kit-button-form { display: contents; }
  .kit-button {
    align-items: center; border: none; border-radius: 980px; cursor: pointer; display: inline-flex; gap: 0.35rem;
    font: inherit; font-size: 0.875rem; font-weight: 500; justify-content: center;
    padding: 0.5rem 1.1rem; text-decoration: none; transition: transform 0.15s, background 0.2s; white-space: nowrap;
    &:hover { text-decoration: none; }
    &:active { transform: scale(0.97); }
    &:disabled { cursor: default; opacity: 0.5; }
    .icon { height: 1rem; width: 1rem; }
  }
  .kit-button--primary { background: var(--accent-fill); color: #fff; &:hover { background: var(--accent-fill-hover); } }
  .kit-button--secondary { background: light-dark(#e8e8ed, #3a3a3c); color: var(--text); &:hover { background: light-dark(#dedee3, #48484a); } }
  .kit-button--destructive { background: var(--bad); color: var(--bad-text); }
  .kit-button--plain { background: none; color: var(--accent); padding-inline: 0; &:hover { text-decoration: underline; } }
  .kit-button--plain[data-danger] { color: var(--bad-text); }
  .kit-button--wide { min-height: 2.75rem; width: 100%; }

  /* On/off settings are switches, as on an iPhone: green when on. */
  .kit-switch-form { display: contents; }
  input[type=checkbox][role=switch] {
    appearance: none; background: light-dark(#e9e9eb, #39393d); border-radius: 980px; cursor: pointer;
    flex-shrink: 0; height: 1.55rem; margin: 0; position: relative; transition: background 0.25s; width: 2.55rem;
    &::before {
      background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
      content: ""; height: 1.35rem; inset-inline-start: 0.1rem; position: absolute; top: 0.1rem;
      transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.6, 1); width: 1.35rem;
    }
    &:checked { background: #34c759; }
    &:checked::before { transform: translateX(1rem); }
    &:checked:dir(rtl)::before { transform: translateX(-1rem); }
    &:disabled { cursor: default; opacity: 0.5; }
  }

  /* A choice of a few, side by side: the languages of a page being edited. */
  .kit-segments { background: light-dark(#e8e8ed, #2c2c2e); border-radius: 9px; display: inline-flex; flex-wrap: wrap; gap: 2px; justify-self: start; padding: 2px; }
  .kit-segments__item {
    border-radius: 7px; color: var(--text); font-size: 0.875rem; padding: 0.3rem 0.9rem;
    &:hover { text-decoration: none; }
    &[aria-current], &[aria-pressed="true"], &[aria-selected="true"] { background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); font-weight: 600; }
  }
  button.kit-segments__item { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.875rem; }

  .kit-form__default { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  /* Fields: rounded, with Apple's blue glow when in use. */
  .kit-form { display: grid; gap: 1.5rem; }
  .kit-form__fields { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 1.1rem; padding: 1.75rem; }
  /* Short fields side by side, as many as fit. */
  .kit-form__fields--columns { align-items: start; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); > .kit-field { align-content: start; } }
  .kit-form__actions { display: flex; gap: 0.75rem; justify-content: end; }
  .kit-section__group > .kit-form__fields { border-radius: 0; box-shadow: none; }
  /* Save stays in reach at the bottom of long pages, on the frosted glass of the bar. */
  .kit-form__actions--sticky {
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: var(--bar); border-radius: 980px; bottom: 1rem; box-shadow: var(--shadow); justify-self: end;
    padding: 0.5rem; position: sticky; z-index: 5;
  }
  .kit-field__input--compact { max-width: 12rem; padding-block: 0.35rem; }
  .kit-field__required { color: var(--faint); }
  .kit-row--form { flex-wrap: wrap; }
  .kit-row .kit-field__input--compact { max-width: 14rem; width: auto; }
  .kit-field { display: grid; gap: 0.35rem; }
  /* The words that confirm a deletion to the client, ready to copy. */
  .deletion-confirmation { line-height: 1.5; margin: 0.25rem 0; max-inline-size: 42rem; }
  /* A box to tick before something that cannot be undone. */
  .kit-check { align-items: start; display: flex; gap: 0.6rem; line-height: 1.4;
    input { accent-color: var(--accent); block-size: 1.1rem; flex: none; inline-size: 1.1rem; margin: 0.12rem 0 0; }
  }
  .kit-field__label { font-size: 0.875rem; font-weight: 500; }
  .kit-field__input {
    background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; color: var(--text);
    font: inherit; max-width: min(28rem, 100%); padding: 0.55rem 0.75rem; transition: border-color 0.15s, box-shadow 0.15s; width: 100%;
    &:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); outline: none; }
  }
  /* Menus draw their own chevron, set in from the edge like the text, as on Apple's menus. */
  select.kit-field__input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 0.7rem center; background-repeat: no-repeat; background-size: 0.75rem; padding-inline-end: 2.1rem;
    &:dir(rtl) { background-position: left 0.7rem center; }
  }
  .kit-field__hint { color: var(--muted); font-size: 0.8125rem; }
  .kit-field__hint--unchecked { color: light-dark(#a05a00, #ffb340); }
  .kit-field__error { color: var(--bad-text); font-size: 0.8125rem; }
  .kit-field--invalid .kit-field__input { border-color: var(--bad-text); }

  /* Messages: saved, added, removed slides in under the bar and fades away; errors stay. */
  .kit-notice { border-radius: 12px; font-size: 0.9rem; padding: 0.8rem 1.1rem; }
  .kit-notice--alert { background: var(--bad); color: var(--bad-text); }
  .kit-notice--info { background: var(--chosen); color: var(--text); display: grid; gap: 0.6rem; justify-items: start; p { margin: 0; } }
  .kit-notice--notice {
    animation: toast-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), toast-out 0.5s 4s forwards;
    background: var(--good); box-shadow: 0 4px 24px rgb(0 0 0 / 0.12); color: var(--good-text);
    left: 50%; max-width: min(32rem, calc(100% - 2rem)); position: fixed; top: 4rem; transform: translateX(-50%); z-index: 20;
  }

  /* An empty list: one line, and what to do about it. */
  .kit-empty { color: var(--faint); display: grid; gap: 0.6rem; justify-items: center; padding: 3rem 1rem; text-align: center; }
  .kit-empty__title { color: var(--text); font-size: 1rem; font-weight: 600; }
  .kit-empty__text { max-width: 34ch; }

  /* Variants come after the base rules they adjust. */
  .kit-field.kit-field--switch { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; > .kit-field__hint { flex-basis: 100%; } }
  .kit-field__input.kit-field__input--text { max-width: none; resize: vertical; }
  .kit-field__input:not(.kit-field__input--compact) { max-width: min(36rem, 100%); }
  .kit-field__input.kit-field__input--text { max-width: none; }

  /* Running text with links (decision 0091): the link button under the text, and its small form. */
  .kit-running-text { display: grid; gap: 0.35rem; }
  .kit-running-text__tools { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
  .kit-running-text__link { background: var(--hover); border-radius: var(--radius); display: grid; gap: 0.35rem; padding: 0.75rem; }
  .kit-running-text__words { min-height: calc(var(--rows) * 1.5em + 1.1rem); white-space: pre-wrap; overflow-wrap: anywhere; }
  .kit-running-text__linked { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
  .kit-running-text__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.35rem; }

  /* The media library: pictures as a grid of rounded thumbnails. */
  .kit-media-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); list-style: none; margin: 0; padding: 0; }
  .kit-media-grid__page { display: contents; }
  .kit-media-grid__page[src]:not([complete]) { display: block; grid-column: 1 / -1; min-height: 1px; }
  .kit-media-grid--small { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .kit-media-grid__item {
    background: var(--card); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); cursor: pointer;
    display: grid; font: inherit; gap: 0.4rem; padding: 0.5rem; position: relative; text-align: start; width: 100%;
    transition: transform 0.2s;
    &:hover { text-decoration: none; transform: translateY(-2px); }
    img { aspect-ratio: 4 / 3; border-radius: 9px; height: auto; object-fit: cover; width: 100%; background: var(--hover); }
  }
  .kit-media-grid__name { font-size: 0.8125rem; overflow: hidden; padding-inline: 0.25rem; text-overflow: ellipsis; white-space: nowrap; }
  .kit-media-grid__mark { background: #ff9500; border-radius: 980px; color: #fff; font-size: 0.6875rem; font-weight: 600; inset-block-start: 0.9rem; inset-inline-start: 0.9rem; padding: 0.1rem 0.5rem; position: absolute; }

  /* Uploading: the button is a label for a hidden file field. */
  .kit-upload { display: contents; }
  .kit-upload__status { color: var(--muted); font-size: 0.8125rem; margin: 0; }
  .kit-upload__input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
  .kit-upload label:focus-within { box-shadow: 0 0 0 4px var(--focus); }

  /* A sound in the library: the browser's own player, to listen before it goes on a page. */
  .kit-player { box-sizing: border-box; display: block; height: 3.375rem; margin: 1rem; width: calc(100% - 2rem); }
  .kit-player--film { aspect-ratio: auto; background: #000; height: auto; }

  /* A document's first page, as pages show it, before its download button. */
  .kit-document { border: 1px solid var(--line); border-radius: 4px; display: block; height: auto; margin: 1rem 1rem 0; max-width: 14rem; width: calc(100% - 2rem); }

  /* The focal point: a ring on the picture where its subject is. */
  .kit-focal { padding: 1rem; }
  .kit-focal__frame { display: inline-block; max-width: 100%; position: relative; }
  .kit-focal img { border-radius: 10px; cursor: crosshair; display: block; height: auto; max-height: 28rem; max-width: 100%; }
  .kit-focal__mark {
    border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.3);
    height: 1.75rem; pointer-events: none; position: absolute; transform: translate(-50%, -50%); width: 1.75rem;
  }
  /* The phone's focal point: the same mark, drawn as a ring. */
  .kit-focal__mark--phone { border-style: dashed; }
  .kit-focal { display: grid; gap: 1rem; }
  /* A place's pin on its map (decision 0119), dragged without scrolling the page. */
  .kit-place img { cursor: grab; touch-action: none; }
  .kit-place__mark { background: rgb(255 59 48 / 0.85); }
  .places-state { color: var(--muted); font-size: 0.9375rem; margin: -0.5rem 0 1.5rem; max-width: 42rem; }
  /* What a computer and a phone show of the picture: a wide and a tall crop. */
  .kit-focal__previews { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; }
  .kit-focal__preview { display: grid; gap: 0.35rem; margin: 0;
    img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); cursor: default; display: block; max-height: none; object-fit: cover; }
    figcaption { color: var(--muted); font-size: 0.8125rem; }
  }
  .kit-focal__preview--computer img { aspect-ratio: 16 / 9; inline-size: min(22rem, 70vw); }
  .kit-focal__preview--phone img { aspect-ratio: 9 / 19.5; inline-size: 7rem; }

  /* Choosing a picture for a slot. */
  .kit-picker { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .kit-picker__preview { aspect-ratio: 4 / 3; border-radius: 8px; height: 3rem; object-fit: cover; width: auto; }
  .kit-picker__name { color: var(--muted); font-size: 0.875rem; }
  .kit-picker__dialog {
    background: var(--page); border: 0; border-radius: 18px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.25); color: var(--text);
    max-height: min(40rem, 85dvh); padding: 1.25rem; width: min(46rem, calc(100% - 2rem));
    &::backdrop { backdrop-filter: blur(4px); background: rgb(0 0 0 / 0.3); }
  }
  .kit-picker__head { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1rem; }
  /* Uploading from the picker: a link-like label over a hidden file field. */
  .kit-picker__upload { color: var(--accent); cursor: pointer; &:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } }
  .kit-picker__upload input { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; }
  .kit-picker__problem { color: var(--bad-text); font-size: 0.875rem; margin: 0 0 1rem; }
  .kit-picker__describe:not([hidden]) { display: grid; gap: 1rem; }
  .kit-picker__describe-picture { border-radius: 10px; max-height: 14rem; max-width: 100%; object-fit: contain; justify-self: start; }
  .kit-picker__actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

  /* Signing in: the app's icon, its name, one sentence, one button. */
  .kit-welcome { display: grid; gap: 1.25rem; justify-items: center; justify-self: center; text-align: center; width: min(22rem, 100%); }
  /* The app's icon: its rounded tile is part of the picture. */
  .kit-welcome__icon { filter: drop-shadow(0 4px 12px rgb(0 40 120 / 0.25)); height: 5rem; width: 5rem; }
  .kit-welcome__title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
  .kit-welcome__text { color: var(--muted); }
  .kit-welcome .kit-form { width: 100%; }
  .kit-welcome .kit-field__input { max-width: none; }
  .kit-welcome__secondary { font-size: 0.875rem; }

  /* Setting up a first site: one question to a screen, dots for the way left. */
  .kit-setup { width: min(26rem, calc(100vw - 3rem)); }
  .kit-setup__progress { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
  .kit-setup__dot { background: light-dark(#d1d1d6, #48484a); border-radius: 50%; block-size: 0.5rem; inline-size: 0.5rem; }
  .kit-setup__dot--done { background: var(--accent); }
  .kit-setup__hello { font-size: clamp(3rem, 14vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .kit-setup__hello--second { color: var(--muted); font-size: clamp(2rem, 9vw, 3rem); margin-block-start: -0.75rem; }
  .kit-setup__choices { display: grid; gap: 0.75rem; width: 100%; }
  .kit-setup__big { font-size: 1.25rem; text-align: center; }
  .kit-setup__list { border: 0; display: grid; gap: 0.5rem; margin: 0; padding: 0; text-align: start; }
  .kit-setup__option { align-items: center; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; display: flex; gap: 0.75rem; padding: 0.85rem 1rem; &:has(:checked) { background: var(--chosen); box-shadow: inset 0 0 0 2px var(--accent); } }
  .kit-setup .kit-form { text-align: start; }

  /* A color's label, with a dot in that color. */
  .kit-color__chip { white-space: nowrap; &::before { background: var(--chip); border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(128 128 128 / 0.45); content: ""; display: inline-block; block-size: 0.7em; inline-size: 0.7em; margin-inline-end: 0.3em; } }
  /* A color typed in, with the system color picker beside it. */
  .kit-color-field { align-items: center; display: flex; gap: 0.5rem; }
  .kit-color-field__picker { background: none; block-size: 2.25rem; border: 0; border-radius: 8px; cursor: pointer; flex: none; inline-size: 2.75rem; padding: 0; }

  /* The color library: a swatch per palette, its accent and companion
     color beside a dark tile with its dark accent. */
  .kit-row--block { display: block; }
  /* Choosing an icon: a grid of them, the chosen one ringed. */
  .kit-icons { border: 0; margin: 0; padding: 0; }
  .kit-icons__choices { display: grid; gap: 0.375rem; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); }
  .kit-icons__choice { display: grid; place-items: center; block-size: 2.5rem; border-radius: 10px; background: var(--field); box-shadow: inset 0 0 0 1px var(--field-line); cursor: pointer; position: relative;
    &:has(:checked) { box-shadow: 0 0 0 2px var(--accent); color: var(--accent); } &:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
    input { appearance: none; inset: 0; margin: 0; position: absolute; } }
  .kit-icons__choice--default { font-size: 0.75rem; grid-column: span 3; padding-inline: 0.5rem; }
  .kit-icons__icon { block-size: 1.25rem; inline-size: 1.25rem; }
  .visually-hidden { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  .kit-fieldset { display: grid; gap: 0.5rem; > .kit-field__label:not(legend) { margin-block-start: 0.5rem; } }
  fieldset.kit-fieldset { border: 0; margin: 0; padding: 0; }
  .kit-row.kit-fieldset { gap: 1rem; }
  .kit-inline-form { display: inline-flex; }
  .palette-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); padding-block: 0.5rem; }
  .palette {
    align-items: center; background: none; border: 0; border-radius: 12px; color: inherit; cursor: pointer; text-decoration: none; display: flex; font: inherit; gap: 0.625rem; padding: 0.5rem; text-align: start;
    &:hover { background: var(--fill, rgb(120 120 128 / 0.08)); }
    &[aria-pressed="true"], &[aria-current="true"], &:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent, #0071e3); }
    &:has(input:focus-visible) { outline: 4px solid var(--focus); }
    input { position: absolute; opacity: 0; pointer-events: none; }
  }
  .palette__swatch { display: grid; flex: none; grid-template-columns: 1fr 0.55fr 0.9fr; block-size: 2rem; border-radius: 8px; inline-size: 3.75rem; overflow: hidden; outline: 1px solid rgb(128 128 128 / 0.35); outline-offset: -1px;
    > span { display: grid; place-items: center; }
    i { block-size: 0.6rem; border-radius: 50%; inline-size: 0.6rem; }
  }
  .palette__text { display: grid; min-inline-size: 0; }
  .palette__name { font-size: 0.9375rem; font-weight: 500; line-height: 1.25; }
  .palette__source { color: var(--muted); font-size: 0.75rem; line-height: 1.3; }

  /* Pages to start from: each a small page, the chosen one in the accent.
     Pointed at, the page glides down to its end. */
  .starters { border: 0; margin: 0; min-inline-size: 0; padding: 0; }
  .starters__grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); padding-block-start: 0.25rem; }
  .starter {
    align-content: start; border-radius: 12px; cursor: pointer; display: grid; gap: 0.15rem; padding: 0.5rem;
    &:hover { background: var(--hover); }
    &:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); .starter__name { color: var(--accent); } .drawing { color: var(--accent); } }
    &:has(input:focus-visible) { outline: 4px solid var(--focus); }
    input { opacity: 0; pointer-events: none; position: absolute; }
  }
  .starter__page {
    aspect-ratio: 3 / 4; background: var(--page); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); container-type: size; margin-block-end: 0.4rem; overflow: hidden;
    > .drawing { aspect-ratio: auto; background: none; border-radius: 0; transition: translate 2.4s ease-in-out; }
  }
  .starter:hover .drawing--page { translate: 0 min(0px, calc(100cqh - 100%)); }
  .starter__name { font-size: 0.9375rem; font-weight: 500; line-height: 1.25; }
  .starter__about { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
  .drawing__ground { fill: currentColor; opacity: 0.08; }
  .drawing__ground--contrast { opacity: 0.22; }

  /* Looks: the site's home page small and live in a voice, a typeface or a
     palette (decision 0080), drawn 1280 pixels wide and shown at 3/16. The
     name beneath opens it; the whole tile answers. */
  .looks { display: grid; gap: 1rem 0.75rem; grid-template-columns: repeat(auto-fill, 240px); justify-content: start; padding-block: 0.5rem; }
  .look {
    display: grid; gap: 0.125rem; position: relative;
    &:hover .look__picture { box-shadow: 0 0 0 1px var(--line), 0 4px 14px rgb(0 0 0 / 0.12); }
    &:has(.look__name:focus-visible) .look__picture { outline: 4px solid var(--focus); }
  }
  .look__picture { background: var(--page); block-size: 150px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); display: block; inline-size: 240px; margin-block-end: 0.375rem; overflow: hidden;
    iframe { block-size: 800px; border: 0; inline-size: 1280px; pointer-events: none; transform: scale(0.1875); transform-origin: 0 0; }
  }
  .look--current .look__picture, .look--current:hover .look__picture { box-shadow: 0 0 0 2px var(--accent); }
  .look__name { color: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.25; text-decoration: none;
    &:focus-visible { outline: none; }
    &::after { content: ""; inset: 0; position: absolute; }
  }
  .look__note { color: var(--muted); font-size: 0.75rem; line-height: 1.3; }

  /* The design previews: the same small page in each mode the site shows. */
  .design-sample { block-size: min(44rem, 75dvh); border: 0; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); display: block; inline-size: 100%; }
  .design-previews { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .design-preview {
    background: var(--p-background); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--p-text); margin: 0; overflow: hidden; padding: 1.5rem 1.5rem 0;
    p { margin: 0 0 0.75rem; }
    a { color: var(--p-accent); }
  }
  .design-preview__mode { color: var(--p-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 1rem; text-transform: uppercase; }
  .design-preview__mini { color: var(--p-accent); font-size: 0.8125rem; font-weight: 600; }
  .design-preview__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
  .design-preview__text { font-size: 0.9375rem; line-height: 1.5; .quiet { color: var(--p-muted); } }
  .design-preview__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .design-preview__button { border-radius: 980px; font-size: 0.875rem; font-weight: 500; padding: 0.45rem 1rem; }
  .design-preview__band { background: var(--p-text); color: var(--p-background); font-size: 0.875rem; font-weight: 600; margin: 1.25rem -1.5rem 0; padding: 1rem 1.5rem; }

  /* The central view: each site's state as small colored labels, in
     Lighthouse's colors (good, fair, poor). */
  .overview-facts { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }
  .overview-fact {
    border-radius: 980px; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; white-space: nowrap;
    &.is-good { background: light-dark(#e3f6e8, #12331b); color: light-dark(#1f7a35, #30d158); }
    &.is-fair { background: light-dark(#fff3e0, #3a2a10); color: light-dark(#a35a00, #ff9f0a); }
    &.is-poor { background: light-dark(#fde8e7, #3d1414); color: light-dark(#c4271d, #ff6961); }
  }

  /* A search field and choices above a list (the visits of every site). */
  .kit-filters { align-items: end; display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .kit-filters__search {
    align-items: center; display: flex; flex: 1 1 16rem; position: relative;
    .icon { color: var(--faint); inset-inline-start: 0.75rem; position: absolute; }
    .kit-field__input { max-width: none; padding-inline-start: 2.4rem; }
  }
  .kit-filters__choice { display: grid; gap: 0.25rem; }
  .kit-filters__label { color: var(--muted); font-size: 0.75rem; font-weight: 600; padding-inline: 0.25rem; }

  /* Large figures side by side, each on its own card. */
  .kit-figures { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
  .kit-figure { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 0.15rem; padding: 0.9rem 1.1rem; }
  .kit-figure dd { margin: 0; }
  .kit-figure__label { color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
  .kit-figure__value { font-size: 1.75rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
  .kit-figure__detail {
    color: var(--muted); font-size: 0.8125rem;
    &.is-up { color: var(--good-text); }
    &.is-down { color: var(--bad-text); }
  }

  /* A table on a card; figures line up at the end, and it scrolls sideways on a phone. */
  .kit-table {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto;
    table { border-collapse: collapse; min-width: 100%; }
    caption { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; }
    th, td { padding: 0.65rem 1rem; text-align: start; vertical-align: top; white-space: nowrap; }
    thead th { color: var(--muted); font-size: 0.75rem; font-weight: 600; a { color: inherit; } }
    tbody tr { box-shadow: inset 0 1px 0 var(--line); }
    tbody th { font-weight: 500; white-space: normal; min-width: 12rem; }
    .is-number { font-variant-numeric: tabular-nums; text-align: end; }
    .note { display: block; font-weight: 400; }
  }

  /* A small bar chart of days, on a card. */
  .kit-bars {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0; padding: 1rem 1rem 0.75rem;
    ol { align-items: end; block-size: 9rem; display: flex; gap: min(2px, 0.25%); list-style: none; margin: 0; padding: 0; }
    li { block-size: 100%; display: flex; align-items: end; flex: 1; min-inline-size: 1px; }
    figcaption { color: var(--muted); display: flex; font-size: 0.75rem; justify-content: space-between; margin-top: 0.5rem; }
  }
  .kit-bars__bar { background: var(--accent); block-size: calc(var(--share) * 100%); border-radius: 3px 3px 0 0; display: block; inline-size: 100%; min-block-size: 1px; }
  .kit-bars__text { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; }

  /* The unit after a usage limit, as wide for every row so the fields line up. */
  .usage-unit { min-width: 4.5rem; text-align: start; }

  /* Messages from a site's forms: new and unchecked ones marked as small labels, and the message itself as written. */
  .messages-new, .messages-unchecked { border-radius: 980px; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; white-space: nowrap; }
  .messages-new { background: var(--chosen); color: var(--accent); }
  .messages-unchecked { background: var(--fair); color: var(--fair-text); }
  .messages-text { overflow-wrap: anywhere; p { margin: 0 0 0.75em; } p:last-child { margin-block-end: 0; } }

  /* The booking module: the hours of a day as a span of two times, the weekdays a stay may begin on, a feed's state, and the week's navigation above the appointments. */
  .booking-hours__span { font-variant-numeric: tabular-nums; }
  .booking-weekdays { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
  .booking-weekdays__day { align-items: center; display: inline-flex; gap: 0.375rem; }
  .booking-feed__state { overflow-wrap: anywhere; }
  .booking-week { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.5rem; }
  .booking-week__range { font-weight: 600; }
  .booking-calendar-name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }

  /* A DNS record to copy into the domain provider, with whether it is found. */
  .domain-record { align-items: center; display: grid; gap: 1rem; grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
  .domain-record__state {
    border-radius: 980px; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; text-align: center;
    &.is-found { background: light-dark(#e3f6e8, #12331b); color: light-dark(#1f7a35, #30d158); }
    &.is-waiting { background: light-dark(#fff3e0, #3a2a10); color: light-dark(#a35a00, #ff9f0a); }
  }
  .domain-record__fields {
    display: grid; gap: 0.25rem 1.5rem; grid-template-columns: 4rem 8.5rem minmax(0, 1fr); margin: 0;
    dt { color: var(--muted); font-size: 0.75rem; }
    dd { margin: 0; overflow-wrap: anywhere; }
    code { font: 500 0.9375rem ui-monospace, SFMono-Regular, Menlo, monospace; }
  }
  .domain-record__purpose { grid-column: 1 / -1; }
  .domain-step { margin: 0; }
  .domain-checked { color: var(--muted); font-size: 0.875rem; margin: -0.75rem 0 0; padding-inline: 1rem; }

  /* A new token's secret, shown once to be copied. */
  .site-token__secret { font: 500 0.9375rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; user-select: all; }

  /* The link that skips past the bar, shown only when reached with the keyboard. */
  .kit-skip-link {
    background: var(--accent-fill); border-radius: 0 0 10px 10px; color: #fff; inset-inline-start: 1rem;
    padding: 0.5rem 1rem; position: absolute; top: -3rem; z-index: 100;
    &:focus { top: 0; }
  }
}

/* On a phone: the bar wraps, the name in it goes, titles get smaller. */
/* The editor (issue #105): three columns under the bar, each scrolling on
   its own. The page's scenes on the left, the page in the middle as
   visitors see it, and what is chosen on the right. */
body.admin:has(.kit-main--editor) { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; overflow: hidden; }
/* The bar spans the editor's width, so its ends line up with the columns. */
body.admin:has(.kit-main--editor) .kit-bar { padding-inline: 1.25rem; }
.admin {
  .kit-main--editor { display: block; margin: 0; max-width: none; min-height: 0; padding: 0; }
  /* In the editor a message rises from below the page, clear of its tools. */
  .kit-main--editor .kit-notice--notice { bottom: 1.5rem; top: auto; }
  .kit-main--editor .kit-notice--alert { bottom: 1.5rem; box-shadow: 0 4px 24px rgb(0 0 0 / 0.12); left: 50%; max-width: min(36rem, calc(100% - 2rem)); position: fixed; transform: translateX(-50%); z-index: 20; }
  .editor { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr) 21.5rem; height: 100%; }
  .editor__outline, .editor__inspector { background: var(--card); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .editor__outline { border-inline-end: 1px solid var(--line); display: grid; align-content: start; gap: 1rem; padding: 1rem 0.75rem 2rem; }
  .editor__inspector { border-inline-start: 1px solid var(--line); display: grid; align-content: start; gap: 1.25rem; padding: 1.25rem 1.25rem 3rem; }

  .editor__head { display: grid; gap: 0.2rem; padding-inline: 0.5rem; }
  .editor__back { align-items: center; display: inline-flex; font-size: 0.8125rem; gap: 0.25rem; margin-bottom: 0.4rem; .icon { height: 0.85rem; transform: scaleX(-1); width: 0.85rem; } }
  .editor__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
  .editor__address { color: var(--faint); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .editor__head .kit-button--plain { font-size: 0.75rem; justify-self: start; padding-block: 0.25rem; }

  .editor__parts { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
  /* Where a dragged scene will go: a thin line in the gap between two rows. */
  .editor__part {
    border-radius: 9px; position: relative;
    &.is-dragged { opacity: 0.4; }
    &.is-drop-before::before, &.is-drop-after::after { background: var(--accent); border-radius: 2px; content: ""; block-size: 2px; inset-inline: 0.5rem; pointer-events: none; position: absolute; }
    &.is-drop-before::before { inset-block-start: -2px; }
    &.is-drop-after::after { inset-block-end: -2px; }
  }
  /* Every part leads with a small picture of itself: the page an icon, a
     scene its arrangement, the library each scene's first arrangement. */
  .editor__part-button:has(> .drawing, > .editor__part-icon) {
    align-items: center; column-gap: 0.7rem; grid-template-columns: 3rem minmax(0, 1fr);
    > .drawing, > .editor__part-icon { grid-row: span 3; }
  }
  .editor__part-icon { align-items: center; aspect-ratio: 3 / 2; background: var(--page); border-radius: 5px; color: var(--muted); display: grid; justify-items: center; .icon { height: 1.1rem; width: 1.1rem; } }
  .editor__part[draggable="true"] .editor__part-button { cursor: grab; }
  /* Held on a touch screen, a scene lifts instead of selecting its words. */
  [data-move-url], [data-scene-type] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .editor__part-button, .editor__scene-type {
    appearance: none; background: none; border: 0; border-radius: 9px; color: var(--text); cursor: pointer; display: grid; font: inherit;
    gap: 0.05rem; padding: 0.5rem 0.65rem; text-align: start; width: 100%;
    &:hover { background: var(--hover); }
    /* The part chosen: a quiet wash of the accent, its picture in the accent. */
    &[aria-current="true"] { background: var(--chosen); .editor__part-name { color: var(--accent); font-weight: 600; } .drawing, .editor__part-icon { color: var(--accent); } }
  }
  .editor__part-name { font-size: 0.875rem; font-weight: 500; }
  .editor__part-detail { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
  .editor__part-flag { color: var(--fair-text); font-size: 0.75rem; font-weight: 500; }
  .editor__empty, .editor__hint { color: var(--muted); font-size: 0.8125rem; padding-inline: 0.65rem; }
  .editor__library { border-top: 1px solid var(--line); padding-top: 0.75rem; }
  .editor__library-title { align-items: center; color: var(--accent); cursor: pointer; display: flex; font-size: 0.875rem; font-weight: 500; gap: 0.4rem; list-style: none; padding: 0.35rem 0.65rem; &::-webkit-details-marker { display: none; } }
  .editor__library[open] .editor__hint { margin-block: 0.25rem 0.5rem; }
  /* The library: each scene a tile, its drawing above its name; what it is
     for shows on hover, and on the right once it is added. */
  .editor__scene-types { display: grid; gap: 0.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
  .editor__scene-type.editor__scene-type {
    align-content: start; box-shadow: inset 0 0 0 1px var(--line); gap: 0.35rem; padding: 0.4rem 0.4rem 0.5rem;
    &:hover { box-shadow: inset 0 0 0 1px var(--field-line); }
    .editor__part-name { font-size: 0.75rem; line-height: 1.3; }
    &:disabled { cursor: default; opacity: 0.45; &:hover { background: none; box-shadow: inset 0 0 0 1px var(--line); } }
  }
  .editor__scene-types [draggable="true"] .editor__scene-type { cursor: grab; }

  .editor__stage { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
  .editor__toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.6rem 1rem; }
  .editor__toolbar-end { display: flex; gap: 0.5rem; margin-inline-start: auto; }
  .editor__toolbar [data-view] { align-items: center; display: inline-flex; gap: 0.35rem; .icon { height: 1rem; width: 1rem; } }
  .editor__canvas { display: grid; justify-items: center; min-height: 0; padding: 0 1rem 1rem; }
  .editor__computer { display: grid; justify-items: center; min-height: 0; min-width: 0; width: 100%; }
  .editor__frame { background: #fff; border: 0; border-radius: 10px; box-shadow: var(--shadow); height: 100%; width: 100%; }
  /* The phone view: the page as a phone shows it, tall, so phone pictures and
     the phone's place for text over a picture apply (decision 0032). */
  .editor__stage[data-view="phone"] .editor__frame, .editor__frame--phone { border-radius: 28px; max-height: 52rem; max-width: 100%; width: 24.375rem; }
  /* Both views: the computer's page, drawn at a computer's width and scaled
     to the room it has (--scale, set by the editor), beside the phone's. */
  .editor__frame--phone { display: none; }
  .editor__stage[data-view="both"] .editor__canvas { gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; }
  .editor__stage[data-view="both"] .editor__computer { border-radius: 10px; box-shadow: var(--shadow); justify-items: start; overflow: hidden; }
  .editor__stage[data-view="both"] .editor__computer .editor__frame { border-radius: 0; box-shadow: none; height: calc(100% / var(--scale, 0.5)); transform: scale(var(--scale, 0.5)); transform-origin: 0 0; width: 1280px; }
  .editor__stage[data-view="both"] .editor__frame--phone { display: block; }

  .inspector__head { display: grid; gap: 0.35rem; }
  .inspector__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; }
  .inspector__lead, .inspector__hint { color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
  .inspector__tools { display: flex; flex-wrap: wrap; font-size: 0.8125rem; gap: 0.25rem 1rem; margin-top: 0.15rem; .kit-button { font-size: 0.8125rem; padding: 0; } [data-danger] { margin-inline-start: auto; } }
  .inspector__notice { background: var(--fair); border-radius: 9px; color: var(--text); font-size: 0.8125rem; line-height: 1.45; padding: 0.6rem 0.75rem; }
  .inspector__tabs { justify-self: stretch; > .kit-segments__item { flex: 1; text-align: center; } }
  .inspector__group { display: grid; gap: 1.1rem; }
  .inspector__group--end { border-top: 1px solid var(--line); padding-top: 1rem; }
  .inspector__choice { display: grid; gap: 0.4rem; }
  /* Choices fill the column in equal steps; four or more go two by two. */
  .inspector__choice > .kit-segments:not(.kit-segments--drawn) {
    display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; justify-self: stretch;
    &:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    > .kit-segments__item { font-size: 0.8125rem; overflow: hidden; padding-inline: 0.4rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  }
  .inspector__group[data-tab="design"] > .inspector__choice + .inspector__choice { border-top: 1px solid var(--line); padding-top: 1.1rem; }
  .inspector__label { font-size: 0.8125rem; font-weight: 600; }
  .inspector__danger { color: var(--bad-text); justify-self: start; padding: 0; }
  /* Arrangements as small drawings, two to a row, the chosen one in the accent. */
  .kit-segments--drawn {
    background: none; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; padding: 0;
    > .kit-segments__item {
      align-content: start; background: var(--card); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); display: grid; font-size: 0.75rem;
      gap: 0.4rem; line-height: 1.3; padding: 0.4rem 0.4rem 0.5rem; text-align: start; white-space: normal;
      &:hover { box-shadow: inset 0 0 0 1px var(--field-line); }
      &[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
    }
  }
  .drawing { aspect-ratio: 3 / 2; background: var(--page); border-radius: 5px; color: var(--muted); display: block; overflow: hidden; width: 100%; }
  .kit-segments__item[aria-pressed="true"] .drawing { background: var(--chosen); color: var(--accent); }
  .drawing__picture { fill: currentColor; opacity: 0.3; }
  .drawing__heading { fill: currentColor; opacity: 0.85; }
  .drawing__text { fill: currentColor; opacity: 0.45; }
  .drawing__over { fill: #fff; }
  .drawing__button { fill: currentColor; }
  .drawing__card { fill: var(--card); stroke: currentColor; stroke-opacity: 0.45; stroke-width: 0.6; }
  .drawing__band { fill: currentColor; opacity: 0.12; }
  .drawing__rule { stroke: currentColor; stroke-opacity: 0.45; stroke-width: 0.6; }
  .scene-items { border: 0; display: grid; gap: 0.75rem; margin: 0; padding: 0; > legend { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.4rem; padding: 0; } }
  .scene-item { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 0.75rem; padding: 0.75rem; }
  .scene-item__head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: space-between; }
  .scene-item__title { font-size: 0.8125rem; font-weight: 600; }
  .scene-item__tools { display: flex; flex-wrap: wrap; gap: 0.75rem; .kit-button { font-size: 0.8125rem; padding: 0; } }
}

/* A smaller screen keeps the three columns, narrower. */
@media (max-width: 80rem) {
  .admin .editor { grid-template-columns: 14.5rem minmax(0, 1fr) 19rem; }
}

/* On a narrow screen one column shows at a time, the whole width: the
   scenes, the page, or what is chosen, switched above them. */
.admin .editor__panes { display: none; }
@media (max-width: 64rem) {
  .admin {
    .editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .editor__panes { border-bottom: 1px solid var(--line); display: flex; justify-self: stretch; margin: 0; padding: 0.5rem 1rem; > .kit-segments__item { flex: 1; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } }
    .editor__outline, .editor__inspector { border: 0; }
    .editor:not([data-pane="outline"]) .editor__outline,
    .editor[data-pane="outline"] .editor__stage, .editor[data-pane="inspector"] .editor__stage,
    .editor:not([data-pane="inspector"]) .editor__inspector { display: none; }
    .editor__canvas { padding-inline: 0.5rem; }
    /* No room for both views: the computer's page alone, at the width there is. */
    .editor__toolbar [data-view="both"], .editor__stage[data-view="both"] .editor__frame--phone { display: none; }
    .editor__stage[data-view="both"] .editor__canvas { grid-template-columns: minmax(0, 1fr); }
    .editor__stage[data-view="both"] .editor__computer { border-radius: 0; box-shadow: none; overflow: visible; }
    .editor__stage[data-view="both"] .editor__computer .editor__frame { border-radius: 10px; box-shadow: var(--shadow); height: 100%; transform: none; width: 100%; }
  }
}

@media (max-width: 40rem) {
  /* The central view's labels go beneath the site's name on a phone. */
  .kit-row:has(.overview-facts) {
    flex-wrap: wrap;
    .kit-row__text { flex: 1 1 calc(100% - 2rem); }
    .kit-row__value { order: 3; flex-basis: 100%; text-align: start; }
    .overview-facts { justify-content: flex-start; }
  }
  /* A row with more than one control puts them beneath its text, so the
     text keeps the full width. */
  .kit-row:has(.kit-row__controls > :nth-child(2)) {
    flex-wrap: wrap;
    .kit-row__text { flex-basis: 100%; }
    .kit-row__controls { flex-wrap: wrap; }
  }
  .admin {
    .kit-bar { flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 1rem; }
    .kit-bar__title, .kit-bar__who { display: none; }
    .kit-main { padding: 0.5rem 1rem 4rem; }
    .kit-page-header__title { font-size: 2rem; }
    .domain-record { grid-template-columns: minmax(0, 1fr) auto; }
    .domain-record__state { justify-self: start; }
    .domain-record__fields { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 3.5rem minmax(0, 1fr); }
    .domain-record__fields > div:last-child { grid-column: 1 / -1; }
  }
}

/* On touch screens, small controls get a fingertip's room. */
@media (pointer: coarse) {
  .admin .kit-button { min-height: 2.75rem; }
}

@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -1rem); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -0.5rem); visibility: hidden; } }

/* Alerts that ask before something can't be undone (app/javascript/alert.js). */
dialog.alert-dialog {
  animation: alert-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  background: light-dark(rgb(255 255 255 / 0.9), rgb(44 44 46 / 0.92));
  backdrop-filter: blur(30px);
  border: none; border-radius: 16px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: light-dark(#1d1d1f, #f5f5f7);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  padding: 0; text-align: center; width: min(19rem, calc(100% - 3rem));

  &::backdrop { backdrop-filter: blur(4px); background: rgb(0 0 0 / 0.3); }
  p { font-weight: 600; margin: 0; padding: 1.25rem 1.25rem 1.1rem; }
  .choices { border-top: 1px solid light-dark(rgb(60 60 67 / 0.2), rgb(84 84 88 / 0.6)); display: flex; }
  button { background: none; border: none; color: light-dark(#0071e3, #2997ff); cursor: pointer; flex: 1; font: inherit; padding: 0.8rem; }
  button + button { border-inline-start: 1px solid light-dark(rgb(60 60 67 / 0.2), rgb(84 84 88 / 0.6)); }
  button:hover, button:focus-visible { background: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.06)); outline: none; }
  .destructive { color: light-dark(#ff3b30, #ff453a); font-weight: 600; }
}

@keyframes alert-in { from { opacity: 0; transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .admin *, dialog.alert-dialog { animation: none !important; transition: none !important; }
}

/* The list of pages: a grid of the pages themselves, or a list. A snapshot
   is the page at four times the card's width, shown at a quarter, so it is
   always a computer's page; it loads when it scrolls into view. */
.admin {
  .page-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
  .page-tools__search { flex: 1 1 16rem; .kit-field__input { max-width: none; } }
  .page-list { display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
  .page-list--grid { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .page-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr) auto; padding: 1rem 1.25rem; }
  .page-list--grid .page-card { align-content: start; grid-template-columns: minmax(0, 1fr); padding: 0 0 1rem; overflow: clip; }
  .page-list--grid .page-card > :not(.page-card__snapshot) { padding-inline: 1rem; }
  .page-card__snapshot { aspect-ratio: 16 / 10; background: var(--field); container-type: inline-size; display: block; overflow: hidden; position: relative; }
  .page-card__snapshot iframe { block-size: 400%; border: 0; inline-size: 400%; pointer-events: none; position: absolute; inset: 0 auto auto 0; transform: scale(0.25); transform-origin: 0 0; }
  .page-card__snapshot img { block-size: 100%; inline-size: 100%; object-fit: cover; object-position: top; }
  .page-card__snapshot:focus-visible { outline-offset: -3px; }
  .page-card__title { font-weight: 600; margin: 0; a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } }
  .page-card__address { color: var(--muted); font-size: 0.875rem; margin: 0.125rem 0 0; overflow-wrap: anywhere; }
  .page-card__states { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0 0; }
  .page-state { background: var(--field); border-radius: 980px; color: var(--muted); font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; }
  .page-state--online { background: var(--good); color: var(--good-text); }
  .page-state--changed, .page-state--draft { background: var(--fair); color: var(--fair-text); }
  .page-state--offline, .page-state--deleted { background: var(--bad); color: var(--bad-text); }
  .page-card__actions { align-items: start; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .page-card__more { position: relative; > summary { list-style: none; cursor: pointer; } > summary::-webkit-details-marker { display: none; } }
  .page-card__menu { background: var(--card); border-radius: 14px; box-shadow: 0 12px 40px rgb(0 0 0 / 0.18), 0 0 0 1px var(--line); display: grid; gap: 1rem; inline-size: min(22rem, 90vw); inset-inline-end: 0; padding: 1rem; position: absolute; top: calc(100% + 0.5rem); z-index: 30; }
  .page-list--grid .page-card__more .page-card__menu { inset-inline: 0 auto; }
  .page-quick { display: grid; gap: 0.75rem; }
  .page-quick__title { font-weight: 600; margin: 0; }
  .page-quick__buttons { border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding-block: 0.75rem; }
}


/* The menu's order on the pages list: one row per page, Up and Down beside it. */
.menu-order { list-style: none; margin: 0; padding: 0; }
.menu-order__page { display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 1rem; border-block-start: 1px solid var(--line); }
.menu-order__page:first-child { border-block-start: 0; }
.menu-order__title { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }

/* Writing an email (decision 0132): the fields, and beside them on a wide
   screen the email as it arrives, in plain text, as it is sent. */
.email-editor { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; margin-block-end: 1.25rem; }
.email-editor__text { font-family: inherit; min-block-size: 18rem; }
.email-editor__when { color: var(--muted); flex: 1 1 16rem; margin: 0; }
.email-preview .kit-section__title { margin-block-start: 0; }
.email-preview__mail { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; }
.email-preview__subject { border-block-end: 1px solid var(--line); font-weight: 600; margin: 0 0 1rem; padding-block-end: 0.75rem; overflow-wrap: anywhere; }
.email-preview__text { overflow-wrap: anywhere; white-space: pre-wrap; }
.email-preview__problem { color: var(--bad-text); font-size: 0.8125rem; margin: 0 0 0.75rem; }