/* 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, #000);
  --card: light-dark(#fff, #1c1c1e);
  --text: light-dark(#1d1d1f, #f5f5f7);
  --muted: light-dark(#6e6e73, #a1a1a6);
  --faint: light-dark(#86868b, #8e8e93);
  --line: light-dark(#e5e5ea, #38383a);
  --field: light-dark(#fff, #2c2c2e);
  --field-line: light-dark(#d2d2d7, #48484a);
  --hover: light-dark(#f5f5f7, #2c2c2e);
  --accent: light-dark(#0071e3, #2997ff);
  /* Blue behind white text: a little deeper in dark mode, so the text stays readable. */
  --accent-fill: light-dark(#0071e3, #0a6fd6);
  --accent-fill-hover: light-dark(#0077ed, #1a7be0);
  --focus: light-dark(rgb(0 113 227 / 0.3), rgb(41 151 255 / 0.4));
  --good: light-dark(#e9f6ec, #12301b);
  --good-text: light-dark(#1d7a35, #6fd08c);
  --bad: light-dark(#fdeceb, #3a1614);
  --bad-text: light-dark(#c9302c, #ff6961);
  --bar: light-dark(rgb(251 251 253 / 0.8), rgb(22 22 23 / 0.8));
  --shadow-color: light-dark(rgb(0 0 0 / 0.05), transparent);
  --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; }

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; }

  /* 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: rounded, each with a colored icon, like the iPhone's Settings. */
  .kit-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .kit-tile {
    align-items: center; background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
    color: var(--text); display: flex; gap: 1rem; padding: 1rem 1.1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    &:hover { box-shadow: 0 2px 4px var(--shadow-color), 0 12px 32px var(--shadow-color); text-decoration: none; transform: translateY(-2px); }
    &:active { transform: scale(0.97); }
    strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
    .note { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }
  .kit-tile__text { min-width: 0; }
  .kit-tile__icon {
    align-items: center; border-radius: 11px; color: #fff; display: flex; flex-shrink: 0;
    height: 2.6rem; justify-content: center; width: 2.6rem;
    .icon { height: 1.45rem; width: 1.45rem; }
  }

  .blue { background: linear-gradient(#3b9bff, #0a7aff); }
  .green { background: linear-gradient(#4cd964, #28c840); }
  .orange { background: linear-gradient(#ffb340, #ff9500); }
  .indigo { background: linear-gradient(#7d7aff, #5856d6); }
  .gray { background: linear-gradient(#a1a1a6, #8e8e93); }

  /* 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"] { 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; }

  /* A section's heading with its tools at the end (a scene's move and remove). */
  .kit-section__head { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; padding-inline-end: 0.5rem; }
  .kit-section__tools { display: flex; gap: 1rem; font-size: 0.8125rem; }
  .kit-form__default { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .scene-style { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0 1rem 0.75rem; }
  .kit-section__tools .kit-button { font-size: 0.8125rem; padding-block: 0; }

  /* 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; }
  .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; }
  .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--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; gap: 0.75rem; }
  .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; }

  /* 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--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__input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
  .kit-upload label:focus-within { box-shadow: 0 0 0 4px var(--focus); }

  /* 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;
  }

  /* 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; }

  /* Signing in: the app's icon, its name, one sentence, one button. */
  .kit-welcome { display: grid; gap: 1.25rem; justify-items: 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; }

  /* A colour: the system picker as a round swatch, its value beside it. */
  .kit-colour { align-items: center; cursor: pointer; display: inline-flex; gap: 0.5rem; }
  .kit-colour input[type="color"] {
    appearance: none; background: none; block-size: 1.75rem; border: 0; cursor: pointer; inline-size: 1.75rem; padding: 0;
    &::-webkit-color-swatch-wrapper { padding: 0; }
    &::-webkit-color-swatch { border: 1px solid rgb(0 0 0 / 0.12); border-radius: 50%; }
    &::-moz-color-swatch { border: 1px solid rgb(0 0 0 / 0.12); border-radius: 50%; }
    &:focus-visible { border-radius: 50%; box-shadow: 0 0 0 4px var(--focus); outline: none; }
  }
  .kit-colour__value { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
  .kit-colour__chip { white-space: nowrap; &::before { background: var(--chip); border-radius: 50%; content: ""; display: inline-block; block-size: 0.7em; inline-size: 0.7em; margin-inline-end: 0.3em; } }

  /* The design previews: the same small page in each mode the site shows. */
  .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; }

  /* 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 6rem 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-step { margin: 0; }
  .domain-checked { color: var(--muted); font-size: 0.875rem; margin: -0.75rem 0 0; padding-inline: 1rem; }

  /* 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. */
@media (max-width: 40rem) {
  .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: 4rem 3.5rem minmax(0, 1fr); }
  }
}

/* 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; }
}