@layer components {
  /* Business header: logo (or initials) and name */
  .business-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .logo {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font: 800 1.35rem/1 var(--font-display);
    object-fit: cover;
  }

  .logo--large { inline-size: 5rem; font-size: 2.25rem; }
  /* Two initials fit the same circle a little smaller. */
  .logo--pair { font-size: 1.1rem; letter-spacing: -0.02em; }
  .logo--large.logo--pair { font-size: 1.85rem; }

  .business-header__name { font-size: 1.5rem; }
  .business-header__sub { font-size: 0.875rem; color: var(--muted); }

  /* Card surface shared by the card, the join form and owner panels */
  .panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  /* Stamp grid: five per row like the paper card */
  .stamp-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    padding: 0;
    list-style: none;
  }

  .stamp {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 2px dashed var(--line);
    border-radius: 50%;
    color: var(--line);
  }

  .stamp-icon { inline-size: 55%; block-size: 55%; }

  .stamp--on {
    border: 2px solid var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
    transform: rotate(-8deg);
  }

  /* A stamp or reward that just arrived (stamp_pop_controller.js). It ends
     at the stamp's own tilt, so it lines up with the others. */
  .stamp--new { animation: stamp-pop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
  .card-reward--new { animation: reward-pop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }

  @keyframes stamp-pop {
    0% { transform: scale(0.3) rotate(-28deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(-4deg); opacity: 1; }
    100% { transform: scale(1) rotate(-8deg); }
  }

  @keyframes reward-pop {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
  }

  .stamp--goal {
    border-style: solid;
    border-color: var(--brand);
    color: var(--brand);
  }

  .program-reward {
    font: 700 1.125rem/1.3 var(--font-display);
  }

  /* Hours, address, contact */
  .info-list {
    display: grid;
    gap: var(--space-2);
    padding-block-start: var(--space-4);
    border-block-start: 1px dashed var(--line);
    font-size: 0.9375rem;
  }

  .info-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .info-list dt { color: var(--muted); }
  .info-list dd { text-align: end; }

  /* Our own site on the bare domain */
  .hero {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-8) var(--space-4);
  }
}

@layer components {
  /* Forms: one column, roomy targets for thumbs */
  .form { display: grid; gap: var(--space-4); }

  .field { display: grid; gap: var(--space-1); }
  .field__label { font-size: 0.875rem; color: var(--muted); }
  .field__hint { font-size: 0.8125rem; color: var(--muted); }
  .field__error { font-size: 0.8125rem; color: var(--danger); }

  .field__input {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 1rem; /* 16px keeps iOS from zooming in */
  }

  .field--error .field__input { border-color: var(--danger); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .btn--ghost { background: var(--lane); color: var(--fg); }
  .btn--danger { background: var(--danger); color: var(--on-danger); }
  /* Black, like Apple's and Google's Wallet badges. */
  .btn--wallet { background: #000000; color: #ffffff; }
  form.button_to { display: contents; }

  .flash {
    inline-size: min(100% - 2rem, 28rem);
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--fg);
  }

  .flash--alert { background: var(--danger-soft); }

  .list { display: grid; gap: var(--space-3); list-style: none; }
  /* Only lists lose their indent; a .panel.list keeps the panel padding. */
  :where(ul, ol).list { padding-inline-start: 0; }
  .list__item { gap: var(--space-4); }
}

@layer components {
  .check { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; }

  .logo-preview { display: flex; align-items: center; gap: var(--space-4); }
  .logo-preview__image { inline-size: 4rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }

  /* Counter sign: fills a sheet of paper when printed */
  .sign {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    border: 3px solid var(--brand);
    border-radius: var(--radius);
    background: #ffffff;
    color: #1d1c2b;
    text-align: center;
  }

  .sign__name { font-size: clamp(2rem, 9vw, 3rem); }
  .sign__qr { inline-size: min(100%, 16rem); block-size: auto; padding: var(--space-2); background: #ffffff; }
  /* Rows of stamps centered under the reward, however many the card has. */
  .sign .stamp-grid { display: flex; flex-wrap: wrap; justify-content: center; inline-size: min(100%, 18rem); gap: var(--space-2); }
  .sign .stamp { inline-size: 3rem; }
  /* Empty stamps in a tint of the brand, so the sign reads as the card. */
  .sign .stamp:not(.stamp--goal) { border-color: color-mix(in srgb, var(--brand) 40%, #ffffff); color: color-mix(in srgb, var(--brand) 50%, #ffffff); }
  .sign__cta { font-weight: 700; font-size: 1.125rem; }
  .sign__url { font: 0.8125rem var(--font-mono); color: #5d5b72; overflow-wrap: anywhere; }
}

@media print {
  @page { margin: 1.5cm; }
  body { background: #ffffff; }
  .no-print, .flash, .locale-switch { display: none; }
  .page { inline-size: 100%; padding: 0; }
  /* The card background and the brand border print too. */
  .sign { border-width: 4px; min-block-size: 24cm; align-content: center; gap: 0.4cm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* Up to 10 a row, so 20 stamps take two rows and the sheet stays one page. */
  .sign .stamp-grid { inline-size: 16cm; gap: 0.2cm; }
  .sign .stamp { inline-size: 1.2cm; }
  .sign__name { font-size: 3.5rem; }
  .sign .program-reward, .sign__cta { font-size: 1.5rem; }
  .sign__qr { inline-size: 10cm; }
  .sign .logo--large { inline-size: 2.5cm; font-size: 3.5rem; }
  .sign .logo--large.logo--pair { font-size: 2.6rem; }
  /* Browsers drop background colors when printing; the logo circle keeps its own. */
  .logo { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

@layer components {
  /* Day / month / year selects share one row */
  .field__row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: var(--space-2); }

  .check input { inline-size: 1.25rem; block-size: 1.25rem; flex: none; accent-color: var(--brand); }
  .check { align-items: flex-start; }

  .center { text-align: center; }
  .link { color: var(--brand); font-weight: 600; text-decoration: none; }

  .welcome-note { color: var(--brand); font-weight: 700; }
  .info-list--plain { padding-block-start: 0; border-block-start: 0; }

  /* Collapsible sections under the join page and the card (.accordion), and
     one fold inside a panel on the team's pages (.disclosure). */
  .accordion { display: grid; border-block-start: 1px solid var(--line); }
  .accordion details { border-block-end: 1px solid var(--line); padding-block: var(--space-3); }
  .accordion summary, .disclosure summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
  .accordion details[open] summary, .disclosure[open] summary { margin-block-end: var(--space-3); }

  .copy-link { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius); background: var(--lane); }
  .copy-link__hint { font-size: 0.875rem; color: var(--muted); text-align: center; }
  .copy-link__url { font: 0.8125rem var(--font-mono); }
  .copy-link__done { min-height: 1.25em; font-size: 0.875rem; color: var(--muted); text-align: center; }

  .card-owner { font-weight: 600; color: var(--muted); }
  .card-left { font-weight: 700; }
  .card-qr { display: grid; justify-items: center; gap: var(--space-2); margin: 0; padding-block-start: var(--space-4); border-block-start: 1px dashed var(--line); }
  .card-qr__code { inline-size: min(70%, 14rem); block-size: auto; padding: var(--space-2); border-radius: var(--radius-sm); background: #ffffff; }
  .card-qr figcaption { font-size: 0.875rem; color: var(--muted); text-align: center; }

  .who h1 { font-size: 1.5rem; }

  .prose { line-height: 1.6; }
  .prose h2 { margin-block-start: var(--space-6); font-size: 1.125rem; }
  .prose ul { padding-inline-start: 1.25rem; }
  .prose li + li { margin-block-start: var(--space-1); }
}

@layer components {
  .btn--big { min-block-size: 3.5rem; font-size: 1.125rem; }

  .scanner { justify-items: center; }
  .scanner__view { position: relative; inline-size: 100%; }
  .scanner__video { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: #15151c; }
  .scanner__video[hidden] { display: none; }
  .scanner__frame { position: absolute; inset: 18%; border: 3px solid rgb(255 255 255 / 0.85); border-radius: var(--radius); pointer-events: none; }
  .scanner__video[hidden] + .scanner__frame { display: none; }

  .today { text-align: center; font-weight: 700; color: var(--muted); }

  .prize, .card-reward, .card-birthday {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
  }

  .card-panel { display: grid; gap: var(--space-4); }
  .history { font-size: 0.875rem; }
  #card_history h3 { font-size: 1rem; margin: 0; }

  .result { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); color: var(--fg); text-decoration: none; }
  .result__main { display: grid; gap: var(--space-1); }
  .namesakes { display: grid; gap: var(--space-3); }
}

@layer components {
  .btn--small { inline-size: auto; min-block-size: 2.25rem; padding-inline: var(--space-3); font-size: 0.875rem; }
  .prize { display: grid; gap: var(--space-3); }

  .social-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
  /* Round icon links (Instagram, Facebook, the website); the name is for screen readers. */
  .social-link { display: inline-grid; place-items: center; inline-size: 2.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--lane); color: var(--fg); }
  .social-link:hover { background: var(--brand-soft); color: var(--brand); }
  .social-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
  .btn .social-icon { margin-inline-end: var(--space-2); }

  .plan-usage { display: grid; gap: var(--space-2); margin: 0; }
  .plan-usage dt { font-weight: 700; }
  .plan-usage dd { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); }
  .plan-usage meter { inline-size: 100%; block-size: 0.75rem; }
  .stamp-log__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 0.9375rem; }
}

@layer components {
  .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .tile { display: grid; gap: 0.125rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--lane); }
  .tile__value { font: 800 1.75rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
  .tile__label { font-size: 0.875rem; color: var(--muted); }
  .tile__note { font-size: 0.75rem; color: var(--muted); }

  .activity { gap: 0; }
  .activity__item { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--lane); font-size: 0.9375rem; }
  .activity__item a { color: var(--fg); }
  .activity__when { flex: none; color: var(--muted); font: 0.8125rem var(--font-mono); }
}

@layer components {
  .onboarding__steps { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
  .onboarding__step { display: flex; gap: var(--space-3); align-items: flex-start; }
  .onboarding__step > span:last-child { display: grid; gap: var(--space-1); }
  .onboarding__check { display: grid; place-items: center; flex: none; inline-size: 1.5rem; block-size: 1.5rem; border: 2px dashed var(--line); border-radius: 50%; color: var(--brand); font-weight: 800; }
  .onboarding__step--done .onboarding__check { border: 2px solid var(--brand); background: var(--brand-soft); }
  .onboarding__step--done strong { color: var(--muted); text-decoration: line-through; }
  .onboarding__hint { font-size: 0.875rem; color: var(--muted); }
}

@layer components {
  .members__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--lane); }
  .members__item > span { display: grid; }
}

@layer components {
  .customer-limit { display: grid; gap: var(--space-2); border-inline-start: 4px solid var(--brand); }
  .customer-limit--full { border-inline-start-color: var(--danger); background: var(--danger-soft); }
}

@layer components {
  /* Both languages as pills; the one showing is filled. */
  .locale-switch { display: flex; justify-content: center; gap: var(--space-2); padding-block: var(--space-4) var(--space-8); font-size: 0.875rem; }
  .locale-switch > * { display: inline-grid; place-items: center; min-block-size: 2.25rem; padding-inline: var(--space-4); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; }
  .locale-switch a:hover { border-color: var(--brand); color: var(--brand); }
  .locale-switch [aria-current] { border-color: var(--brand); background: var(--brand); color: var(--on-brand); font-weight: 700; }
}

@layer components {
  /* Card backgrounds (Business::CARD_THEMES), drawn with the brand tint. */
  .card-theme--soft { background: linear-gradient(160deg, var(--brand-soft), var(--surface) 70%); }
  .card-theme--dots { background: radial-gradient(var(--brand-soft) 2.5px, transparent 3px) 0 0 / 18px 18px, var(--surface); }
  .card-theme--stripes { background: repeating-linear-gradient(135deg, var(--brand-soft) 0 6px, var(--surface) 6px 18px); }

  /* The owner's photo (Business::CardBackground) behind the panel's content,
     under a veil of the page color so stamps and text keep their contrast. */
  .has-card-photo { position: relative; isolation: isolate; overflow: hidden; }
  .card-photo { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .has-card-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--surface) 82%, transparent); }
}

@layer components {
  /* "Diseño de la tarjeta" */
  .design-field { display: grid; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
  .swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .swatch { inline-size: 2.5rem; aspect-ratio: 1; border: 3px solid var(--surface); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
  .color-picker { display: flex; align-items: center; gap: var(--space-3); }
  .icon-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: var(--space-2); }
  .icon-choice, .theme-choice { position: relative; display: grid; place-items: center; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--brand); }
  .icon-choice { aspect-ratio: 1; }
  .icon-choice .stamp-icon { inline-size: 60%; block-size: 60%; }
  .icon-choice input, .theme-choice input { position: absolute; opacity: 0; }
  .icon-choice:has(:checked), .theme-choice:has(:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
  .icon-choice:has(:focus-visible), .theme-choice:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .theme-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .theme-choice { min-block-size: 4.5rem; color: var(--fg); font-weight: 600; }
  .theme-choice:has(:disabled) { opacity: 0.5; cursor: not-allowed; }
}

@layer components {
  /* Business page cover, in the brand color */
  .cover { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand); text-align: center; }
  .cover .logo { box-shadow: 0 0 0 4px var(--on-brand); }
  .cover__name { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .cover__summary { font-weight: 600; }
  .cover .btn { background: var(--on-brand); color: var(--brand); }
  /* Without a logo, the initials would vanish into the cover: swap their colors. */
  .cover span.logo { background: var(--on-brand); color: var(--brand); }
  .steps { display: grid; gap: var(--space-4); padding: 0; list-style: none; counter-reset: step; }
  .steps li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); align-items: start; counter-increment: step; }
  /* The 2rem number centered on the first 1.5rem line, however long the step. */
  .steps li::before { content: counter(step); display: grid; place-items: center; inline-size: 2rem; aspect-ratio: 1; margin-block-start: -0.25rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
}

@layer components {
  /* The signed-in shell (layouts/_shell), admin and owner: on phones the bar,
     the sections as a row of links, then the page; a shell with tabs swaps the
     row for a bottom bar. On desktops the sections run down the left. */
  .shell { display: grid; min-block-size: 100dvh; grid-template-rows: auto auto 1fr; }
  .shell__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); background: var(--surface); }
  .shell__home { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; color: var(--fg); font-weight: 700; text-decoration: none; }
  .shell__account { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 0.875rem; color: var(--muted); }
  .shell__email { overflow-wrap: anywhere; }
  .shell__nav { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-4); overflow-x: auto; border-block-end: 1px solid var(--line); background: var(--surface); }
  .shell__nav a { flex: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--fg); font-weight: 600; text-decoration: none; }
  .shell__nav a:hover { background: var(--lane); }
  .shell__nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
  .shell__group { display: contents; }
  .shell__heading { display: none; }
  .shell__main { display: grid; align-content: start; gap: var(--space-6); min-inline-size: 0; padding: var(--space-6) var(--space-4) var(--space-8); }
  .shell__main > h1 { margin: 0; }
  .shell__home .logo { inline-size: 2.25rem; font-size: 0.875rem; }
  /* The Más page: each section with a line on what it's for. */
  .menu__item { display: grid; gap: 0.125rem; padding: var(--space-2) 0; color: var(--fg); text-decoration: none; }
  .menu__item:hover strong { color: var(--brand); }
  /* Pages written for the phone column fill the shell's width on phones. */
  .shell__main > .page { inline-size: 100%; margin-inline: 0; padding-block: 0; }

  /* Support mode (owner/_support_banner): impossible to miss, above the bar. */
  .support-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--warn-soft); color: var(--warn); font-weight: 700; }
  .shell--banner { grid-template-rows: auto auto auto 1fr; }

  /* Phones with tabs: the bottom bar, its middle action in the brand color. */
  .shell--tabs .shell__nav { display: none; }
  /* The page ends clear of the bottom bar: its height, in one place. */
  .shell--tabs { --tabs-block-size: 4.5rem; }
  .shell--tabs .shell__main { padding-block-end: calc(var(--space-8) + var(--tabs-block-size) + env(safe-area-inset-bottom)); }
  .shell__tabs { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); background: var(--surface); min-block-size: calc(var(--tabs-block-size) + env(safe-area-inset-bottom)); }
  .shell__tabs a { display: grid; place-items: center; min-block-size: 3rem; padding: var(--space-1); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.8125rem; font-weight: 700; text-align: center; text-decoration: none; }
  .shell__tabs a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
  .shell__tabs .shell__action { background: var(--brand); color: var(--on-brand); }
  .shell__tabs .shell__action[aria-current="page"] { background: var(--brand); color: var(--on-brand); }

  /* Screens only: a wide window printing the sign would otherwise print the
     sidebar, whose rules here outrank the print ones below. */
  @media screen and (min-width: 64rem) {
    .shell { grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "bar bar" "nav main"; }
    .shell--banner { grid-template-rows: auto auto 1fr; grid-template-areas: "banner banner" "bar bar" "nav main"; }
    .support-banner { grid-area: banner; padding-inline: var(--space-6); }
    .shell__bar { grid-area: bar; padding-inline: var(--space-6); }
    .shell__nav, .shell--tabs .shell__nav { grid-area: nav; display: flex; flex-direction: column; padding: var(--space-6) var(--space-3); overflow: visible; border-block-end: 0; border-inline-end: 1px solid var(--line); }
    .shell__group { display: flex; flex-direction: column; gap: var(--space-1); }
    .shell__group + .shell__group { margin-block-start: var(--space-4); }
    .shell__heading { display: block; padding: var(--space-2) var(--space-3) var(--space-1); color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
    .shell__nav .shell__action { background: var(--brand); color: var(--on-brand); }
    .shell__nav .shell__action:hover, .shell__nav .shell__action[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
    .shell__main, .shell--tabs .shell__main { grid-area: main; padding: var(--space-8); }
    .shell__main > .page { inline-size: min(100%, 36rem); }
    .shell__main > .page--wide { inline-size: 100%; }
    .shell__main .tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
    .shell__tabs { display: none; }
  }

  /* Printing (the sign): only the page. */
  @media print {
    /* As specific as the layout's rules, whatever media they're under. */
    .shell__bar, .shell__nav, .shell--tabs .shell__nav, .shell__tabs { display: none; }
    .shell, .shell__main, .shell--tabs .shell__main { display: block; min-block-size: 0; padding: 0; }
  }

  .admin-business { display: grid; gap: var(--space-2); }
  /* Label and value per line, on a business's admin page. */
  .admin-details { display: grid; gap: var(--space-2); margin: 0; }
  .admin-details div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); padding-block-end: var(--space-2); border-block-end: 1px solid var(--lane); }
  .admin-details dt { color: var(--muted); }
  .admin-details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .admin-business h3 { margin: 0; }
  .admin-business__meta { margin: 0; font-size: 0.875rem; color: var(--muted); overflow-wrap: anywhere; }
  .admin-business__numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-2); margin: 0; }
  .admin-business__numbers dt { font-size: 0.75rem; color: var(--muted); }
  .admin-business__numbers dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
  .admin-business__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .admin-business__features { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
  .admin-business__features li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .admin-promotion { display: grid; gap: var(--space-2); padding-block: var(--space-2); border-block-end: 1px solid var(--lane); }
  .admin-promotion__body { margin: var(--space-2) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
  .admin-promotion__meta { margin: 0; font-size: 0.875rem; color: var(--muted); overflow-wrap: anywhere; }

  /* A state at a glance: on in green, off in red, not in the plan in amber. */
  .status { display: inline-block; padding: 0.125rem var(--space-2); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; }
  .status--on { background: var(--ok-soft); color: var(--ok); }
  .status--off { background: var(--danger-soft); color: var(--danger); }
  .status--not_in_plan { background: var(--warn-soft); color: var(--warn); }

  /* Wide dashboards (.page--wide): side-by-side panels on desktops. */
  .admin-columns { display: grid; gap: var(--space-6); }
  .dashboard__main { display: grid; gap: var(--space-6); }
  .admin-businesses { margin-block-start: var(--space-3); }

  @media (min-width: 64rem) {
    /* Five tiles (birthdays on) still fit one row of the owner's main column. */
    .page--wide .tiles { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
    .admin-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .admin-businesses { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); align-items: start; }
    /* The activity runs down the right. */
    .dashboard { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-8); align-items: start; }
  }
}