/* Mobile app refinement. Desktop deliberately keeps its own layout and palette. */
.mobile-next-action { display: none; }
@media (max-width: 999px) {
  :root {
    --ink: #1d2d44;
    --muted: #5e6d82;
    --teal: #4e6b91;
    --teal-light: #eef2f7;
    --line: #e1e6ee;
    --bg: #f4f6f9;
    --green: #507263;
    --red: #a34743;
    --mobile-blue-hover: #3f5c81;
    --mobile-blue-line: #9aaec7;
  }

  /* A restrained app shell, with one consistent accent for actions and choices. */
  .app-topbar { background: #fff; border-color: #edf0f4; }
  .app-topbar-title,
  body[data-step="0"][data-view="booking"] .app-topbar-title { color: #4c5d73; }
  .app-topbar-actions button,
  .app-topbar-actions a,
  .app-header-back {
    color: var(--teal);
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
  }
  .app-topbar-actions button { background: #f3f5f8; }
  .app-topbar-actions button:hover,
  .app-topbar-actions a:hover,
  .app-header-back:hover { color: var(--mobile-blue-hover); background: #eef2f7; }
  .app-demo-label { color: var(--muted); }
  .app-navigation { background: #fff; border-color: var(--line); }
  .mobile-progress { color: var(--muted); font-size: 14px; }
  .mobile-progress strong { color: var(--ink); font-weight: 600; }
  .step-button.active { background: var(--teal-light); color: var(--teal); }
  .step-button.complete { color: var(--teal); }
  .step-button.complete .step-number {
    color: var(--teal);
    background: var(--teal-light);
    border-color: #d6dfeb;
  }
  .step-button::after { background: #e5eaf1; }
  .step-button.active::after { background: var(--teal); }
  .step-button.complete::after { background: #9cacc2; }
  .app-scroll { background: var(--bg); }
  .page-heading,
  .entry-main .page-heading,
  .detail-heading h1 { color: var(--ink); letter-spacing: -.65px; }
  .page-intro,
  .detail-intro,
  .eyebrow,
  .detail-device,
  .detail-footnote,
  .prototype-note,
  .entry-demo-note,
  .entry-assurance,
  .model-category,
  .field-hint,
  .optional-label,
  .accessory-saving { color: var(--muted); }
  .page-intro { line-height: 1.5; }
  .eyebrow { font-weight: 500; letter-spacing: .04em; }
  .text-link,
  .back-link,
  .terms-link { color: var(--teal); }
  .text-link:hover,
  .back-link:hover { color: var(--mobile-blue-hover); }
  .btn { border-radius: 12px; min-height: 46px; }
  .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
  .btn-primary:hover:not(:disabled) {
    background: var(--mobile-blue-hover);
    border-color: var(--mobile-blue-hover);
  }
  .btn-secondary { color: var(--teal); background: #fff; border-color: #d5deea; }
  .btn-secondary:hover:not(:disabled) { background: #eef2f7; border-color: #9aaec7; }
  .btn-ghost { color: var(--muted); }
  button:focus-visible,
  a:focus-visible,
  summary:focus-visible { outline: 2px solid #6c85a6; outline-offset: 3px; }
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    border-color: #7892b3;
    box-shadow: 0 0 0 3px rgb(78 107 145 / 10%);
  }
  input::placeholder,
  textarea::placeholder { color: #65738a; }

  /* Entry: two clear groups, without a card nested inside another outline. */
  .entry-heading { margin-bottom: 22px; }
  .entry-grid { gap: 14px; }
  .entry-card {
    border: 1px solid #e7ebf1;
    border-radius: 16px;
    background: #fff;
    padding: 17px;
    box-shadow: 0 2px 5px rgb(29 45 68 / 2%);
  }
  .entry-card .section-top { margin-bottom: 12px; }
  .entry-card .section-heading { font-size: 16px; font-weight: 600; }
  .entry-card .section-top > .icon { color: #7e92ac; }
  .entry-card .model-picker-trigger {
    padding: 11px 12px;
    min-height: 84px;
    background: #f4f6fa;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: none;
  }
  .entry-card .model-picker-trigger.selected {
    background: #eef2f7;
    border-color: transparent;
    box-shadow: none;
  }
  .model-picker-trigger > .entry-device-visual { background: transparent; }
  .model-picker-trigger > .icon { color: var(--teal); }
  .entry-device-label .model-name { color: var(--ink); font-size: 17px; }
  .entry-device-label .model-meta { color: var(--muted); }
  .entry-card .model-help { margin-top: 6px; color: var(--muted); }
  .entry-card .model-help summary { color: var(--teal); min-height: 44px; padding: 5px 0; }
  .entry-card .model-help p { margin: 2px 0 0; }
  .model-help summary > .icon,
  .entry-assurance > .icon { color: #7288a3; }
  .entry-postcode .field-label { color: #4e5e74; font-weight: 500; }
  .postcode-input { min-height: 52px; background: #f8f9fb; border-color: #dce3ed; }
  .input-wrap > .icon { color: #7f91aa; }
  .service-result { color: var(--muted); }
  .service-result.success { background: #f0f5f2; color: #496c5b; }
  .postcode-check { color: #507263; }
  .service-result.error { background: #fbefed; color: var(--red); }
  .entry-assurance { margin-top: 12px; }
  .entry-demo-note { margin-top: 15px; }

  /* The catalog reads as one grouped list instead of a wall of separate cards. */
  .model-search-controls { background: var(--bg); padding-top: 8px; }
  .model-search-wrap { border-color: #dce3ed; border-radius: 13px; }
  .model-search-wrap:focus-within {
    border-color: #7892b3;
    box-shadow: 0 0 0 3px rgb(78 107 145 / 10%);
  }
  .model-search-wrap > .icon,
  .model-search-clear { color: #71849f; }
  .model-series-filters { gap: 7px; padding: 10px 1px 5px; }
  .model-series-filters button {
    min-height: 44px;
    padding-inline: 14px;
    border-color: #e0e5ed;
    border-radius: 22px;
    color: #60728b;
  }
  .model-series-filters button[aria-pressed="true"] {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
    font-weight: 600;
  }
  .model-results-meta,
  .model-series-group > h2 > span { color: var(--muted); font-size: 14px; }
  .model-search-help summary { color: var(--teal); }
  .model-series-group > h2 { margin: 0 2px 10px; font-size: 16px; }
  .model-series-group { margin-bottom: 24px; }
  .catalog-model { border-color: var(--line); background: #fff; }
  .catalog-model:hover { background: #f8f9fc; border-color: #b7c4d5; }
  .catalog-model.selected { border-color: #a0b1c8; background: #eef2f7; }
  .catalog-model-label strong { color: var(--ink); }
  .catalog-model-label > span { color: var(--muted); font-size: 14px; }
  .catalog-model-end > .icon { color: #8b9bb1; }
  .catalog-model.selected .catalog-model-end > .icon { color: var(--teal); }
  .model-empty { color: var(--muted); }
  .model-empty > .icon { color: #8194ad; }
  .model-pricing-note {
    margin-bottom: 13px;
    padding: 9px 11px;
    border-radius: 9px;
    background: #eaf0f6;
    color: #536983;
    font-size: 14px;
  }

  /* Repairs: a clear hierarchy between the device, the choice, and the price. */
  .device-banner {
    border-color: #e4e9f0;
    border-radius: 13px;
    background: #fff;
    gap: 11px;
    padding: 10px 12px;
    margin-bottom: 17px;
  }
  .device-banner-content strong { font-size: 16px; }
  .device-banner-content .muted { color: var(--muted); }
  .repair-toolbar { min-height: 44px; margin: 0 0 9px; color: var(--muted); }
  .repair-selection-count { color: var(--teal); font-weight: 600; }
  .vat-toggle { min-height: 44px; color: var(--muted); gap: 6px; }
  .vat-toggle input { width: 17px; height: 17px; }
  .repair-list { gap: 10px; }
  .repair-card {
    border-color: #e2e7ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(29 45 68 / 2%);
  }
  .repair-card.selected {
    background: #fff;
    border-color: var(--mobile-blue-line);
    box-shadow: inset 3px 0 0 var(--teal);
  }
  .repair-trigger { min-height: 82px; padding: 12px; gap: 10px; }
  .icon-box,
  .detail-repair-icon {
    background: #eef2f7;
    color: var(--teal);
    border-radius: 11px;
  }
  .repair-title { font-size: 16px; font-weight: 650; color: var(--ink); }
  .repair-caption { color: var(--muted); font-size: 14px; line-height: 1.35; }
  .repair-card.selected .repair-caption { color: #536d8c; }
  .repair-caption .icon { color: var(--teal); }
  .repair-price { font-size: 17px; color: var(--ink); letter-spacing: -.25px; }
  .repair-price small { color: var(--muted); }
  .repair-chevron { color: #8c9bb0; }
  .repair-card.selected .repair-chevron {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
  }
  .repair-card.selected .repair-chevron .icon { width: 13px; height: 13px; }
  .show-more { margin-top: 7px; }
  .combo-note {
    background: #eef2f7;
    border: 0;
    border-radius: 12px;
    padding: 13px;
    color: var(--muted);
  }
  .combo-note > .icon { color: var(--teal); }
  .combo-note strong { color: #45617f; font-weight: 600; }
  .repair-support { color: var(--muted); border-color: var(--line); padding-top: 15px; margin-top: 17px; }

  /* Quality lives on its own compact screen. The selected option stays explicit. */
  .detail-device { margin-bottom: 15px; color: var(--muted); }
  .detail-heading { gap: 11px; margin-bottom: 10px; }
  .detail-heading .eyebrow { color: var(--muted); }
  .detail-intro { margin-bottom: 17px; }
  .quality-grid { gap: 12px; }
  .quality-card {
    border-color: #e0e6ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 5px rgb(29 45 68 / 2%);
  }
  .quality-card.selected {
    border-color: #94aac6;
    background: #f8fafd;
    box-shadow: inset 3px 0 0 var(--teal);
  }
  .quality-top { align-items: baseline; margin-bottom: 8px; }
  .quality-name,
  .quality-price { font-size: 18px; color: var(--ink); }
  .quality-description,
  .quality-secondary,
  .quality-info { color: var(--muted); font-size: 14px; }
  .quality-info summary { color: var(--teal); min-height: 44px; }
  .quality-info[open] { padding-bottom: 3px; }
  .quality-info li::marker { color: #8a9cb4; }
  .quality-card > .btn { border-radius: 10px; min-height: 44px; font-weight: 600; }
  .quality-compare,
  .repair-deselect { color: var(--muted); }
  .repair-list > .colour-section {
    margin: -2px 3px 3px;
    padding: 15px 13px;
    border: 1px solid #dbe3ee;
    border-radius: 13px;
    background: #fff;
  }
  .repair-list > .colour-section .section-heading { font-size: 16px; margin-bottom: 8px; }
  .repair-list > .colour-section > .muted { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
  .colour-options { gap: 9px; }
  .colour-button { color: #53647c; border-color: #dce3ed; border-radius: 11px; min-height: 44px; }
  .colour-button.selected { color: #3f5c81; border-color: #9aaec7; background: #eef2f7; }

  /* Accessories retain useful image space while the controls stay quiet. */
  .accessory-card { border-color: #e0e6ee; border-radius: 15px; }
  .accessory-card.selected { border-color: #9aaec7; background: #f8fafd; }
  .accessory-image { background: #eef1f5; }
  .accessory-content { padding: 14px; }
  .accessory-description { color: var(--muted); }
  .accessory-badge { border-color: #dce4ef; border-radius: 6px; color: #526b8b; }
  .accessory-skip { color: var(--teal); margin-top: 10px; }

  /* Calendar: the only solid blue tile is the chosen day. */
  .location-options,
  .customer-tabs {
    padding: 4px;
    gap: 4px;
    border: 0;
    border-radius: 13px;
    background: #e8edf4;
  }
  .location-option,
  .customer-tab {
    min-height: 44px;
    border-radius: 10px;
    color: #64748b;
    font-size: 14px;
  }
  .location-option.selected,
  .customer-tab.active {
    color: #3f5c81;
    background: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgb(29 45 68 / 7%);
  }
  .time-service-note { color: var(--muted); }
  .time-service-note strong { color: #4e6380; }
  .date-navigation { margin-top: 12px; }
  .calendar-arrow { color: var(--teal); border-color: #e0e6ef; border-radius: 11px; width: 44px; min-height: 44px; }
  .date-card {
    border-color: #e0e6ef;
    background: #fff;
    color: #425875;
    border-radius: 12px;
    min-height: 82px;
  }
  .date-card.selected { border-color: var(--teal); background: var(--teal); color: #fff; }
  .date-weekday,
  .date-month { color: #607088; font-size: 14px; }
  .date-card.selected .date-weekday,
  .date-card.selected .date-month { color: #edf2f8; }
  .date-availability { background: #859bb7; }
  .date-card.selected .date-availability { background: #eef2f7; }
  .time-slot {
    min-height: 52px;
    padding: 12px;
    border-color: #dfe6ef;
    border-radius: 12px;
    color: #4e617d;
    font-size: 16px;
    font-weight: 500;
  }
  .time-slot > .icon { color: #8799b2; }
  .time-slot.selected { color: #3d587b; border-color: #91a7c2; background: #eef2f7; }
  .time-slot.selected > .icon { color: var(--teal); }
  .time-slot.selected .slot-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    background: var(--teal);
  }
  .time-slot.selected .slot-check > .icon { width: 12px; height: 12px; }
  .calendar-selection { padding: 12px; border-color: #dfe6ef; border-radius: 12px; color: var(--muted); }
  .arrival-note { background: #edf1f6; border: 0; border-radius: 12px; color: var(--muted); padding: 13px; }
  .arrival-note strong { color: #4d637f; }
  .arrival-note > .icon { color: #69829f; }

  /* Contact: clear field labels and one calm group per screen. */
  .contact-substeps { margin-bottom: 18px; }
  .contact-substeps > span:not(.substep-line) { color: #718198; }
  .contact-substeps > span.active { color: var(--teal); }
  .contact-substeps > span.complete { color: #5c7698; }
  .contact-substeps .substep-line { background: #d8e0eb; }
  #customer-form .form-grid {
    padding: 17px 15px;
    border: 1px solid #e4e9f0;
    border-radius: 16px;
    background: #fff;
    gap: 17px 12px;
  }
  .field-label { color: #40536d; font-weight: 550; font-size: 14px; }
  .input,
  .select,
  .textarea {
    border-color: #dce3ed;
    border-radius: 11px;
    background: #f8f9fc;
    color: var(--ink);
    font-size: 16px;
    min-height: 50px;
  }
  .locked-postcode .input { background: #edf1f6; color: #566b87; }
  .address-more { color: #5b7190; border-color: #e5eaf1; }
  .address-more summary { min-height: 48px; line-height: 1.4; }
  .demo-form-note { background: #eaf0f6; color: #536983; border-radius: 11px; padding: 8px 12px; }
  .field-error { color: var(--red); }
  .input[aria-invalid="true"],
  .postcode-input[aria-invalid="true"],
  .select[aria-invalid="true"],
  .textarea[aria-invalid="true"] { border-color: #c98c83; background: #fff8f6; }

  /* Review and editable summary share the same readable visual language. */
  .review-section,
  .order-card,
  .confirmation-card { border-color: #e0e6ef; border-radius: 16px; background: #fff; }
  .review-section { padding: 15px; margin-top: 13px; }
  .review-heading { margin-bottom: 10px; }
  .review-heading h2 { font-size: 16px; }
  .review-heading h2 > .icon { color: #6b83a1; }
  .review-heading > .text-link { min-width: 44px; justify-content: center; }
  .review-device { padding-bottom: 3px; }
  .review-device span { color: var(--muted); }
  .review-row,
  .review-accessories-heading,
  .order-line > div span,
  .review-value { color: var(--muted); border-color: #e9edf3; }
  .review-row > div > strong,
  .review-row > strong,
  .review-value strong,
  .order-appointment strong { color: #344b68; }
  .review-row > .text-link { min-height: 44px; }
  .review-row.discount,
  .review-row.discount > strong,
  .order-discount { color: #4d688a; }
  .review-payment {
    padding: 14px;
    border: 0;
    border-radius: 13px;
    background: #eaf0f6;
    color: #536983;
  }
  .review-payment strong { color: #476281; }
  .consent-group { margin-top: 18px; gap: 0; }
  .check-row { color: #52637b; min-height: 48px; padding: 8px 0; gap: 10px; font-size: 14px; }
  .check-row input { width: 20px; height: 20px; flex-basis: 20px; }
  .check-row small { color: var(--muted); margin-top: 5px; }
  .terms-detail { background: #edf2f7; border-color: #e0e6ef; color: var(--muted); }
  .terms-detail strong { color: #4e6787; }
  .order-status { color: #6b83a0; }
  .order-empty { background: #f8f9fb; color: var(--muted); border-color: #dce4ee; }
  .order-empty > .icon { color: #7b91ad; }
  .order-location,
  .order-appointment,
  .order-vat,
  .order-foot,
  .footer-help { color: var(--muted); border-color: #e5eaf1; }
  .order-location .icon,
  .order-appointment .icon,
  .order-foot .icon { color: #758ba7; }
  .order-remove { color: #7a8da6; }
  .edit-context { color: #5e738d; border-color: #dce4ee; background: #fff; border-radius: 12px; }
  .utility-list { border-color: #e0e6ef; border-radius: 16px; }
  .utility-list button,
  .utility-list a { border-color: #e9edf3; color: #6c83a0; }
  .utility-list strong { color: #3d5573; }
  .utility-list small { color: var(--muted); }
  .confirmation-icon { background: #edf4f0; border-color: #d9e7df; color: #527561; }
  .confirmation-device span,
  .confirmation-details,
  .confirmation-next ol { color: var(--muted); }
  .confirmation-details strong { color: #47617e; }
  .empty-state { color: var(--muted); border-color: #dce4ee; }

  /* The fixed dock is the one consistent next action throughout the app. */
  .app-dock {
    background: #fff;
    border-top: 1px solid #e2e7ef;
    box-shadow: 0 -3px 14px rgb(29 45 68 / 3%);
  }
  body[data-detail="true"] .app-dock,
  body[data-view="models"] .app-dock,
  body[data-view="menu"] .app-dock { display: none; }
  .mobile-next-action { display: inline-flex; }
  .mobile-next-fallback,
  #mobile-actions > .dock-guidance { display: none; }
  .mobile-bar { gap: 13px; padding-top: 11px; padding-bottom: max(11px, env(safe-area-inset-bottom)); }
  .mobile-bar > .btn { min-height: 50px; font-size: 16px; font-weight: 600; border-radius: 13px; }
  .mobile-total strong { color: var(--ink); font-size: 21px; font-weight: 650; white-space: normal; overflow-wrap: anywhere; }
  .mobile-total > span,
  .mobile-total > small { color: var(--muted); font-size: 14px; }
  .mobile-total > span .icon { color: var(--teal); }
  .dock-guidance { color: #5d718c; font-size: 14px; background: #fff; }
  .dock-guidance > .icon { color: #6d86a5; }
  body[data-step="0"] .mobile-total strong { font-size: 16px; }
  .app-dock .single-action { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }

  @media (max-width: 640px) {
    .app-frame { grid-template-rows: 58px minmax(0, 1fr) auto; }
    .app-topbar { padding-inline: 12px; gap: 8px; }
    .app-topbar-title { font-size: 16px; }
    .app-brand { gap: 4px; }
    .app-header-back { min-width: 44px; padding: 5px; margin-left: -4px; }
    .app-topbar-actions button { min-width: 44px; min-height: 44px; }
    /* Labels and navigation share one row while step buttons keep a full touch target. */
    .app-navigation { display: grid; grid-template-areas: "progress"; padding: 0 18px; }
    .mobile-progress { grid-area: progress; align-self: start; width: 100%; margin: 6px 0 0; min-height: 18px; font-size: 13px; pointer-events: none; z-index: 1; }
    .mobile-progress strong { font-size: 13px; }
    .mobile-progress > span:last-child { display: inline; }
    .progress-nav { grid-area: progress; gap: 6px; }
    .step-button { min-height: 48px; height: 48px; }
    .step-button:focus-visible { outline-offset: -3px; }
    .step-button.active { background: transparent; }
    .step-button::after { inset: 36px 0 auto; height: 3px; }
    .booking-layout { padding: 22px 18px 28px; }
    .page-heading,
    .entry-main .page-heading,
    .detail-heading h1,
    .model-picker-heading .page-heading,
    .confirmation .page-heading { font-size: 27px; line-height: 1.18; }
    .page-intro { font-size: 15px; margin-bottom: 19px; }
    .entry-main { padding: 23px 18px 26px; }
    .entry-card { padding: 16px; }
    .entry-heading .page-intro { font-size: 15px; line-height: 1.5; }
    .entry-heading { margin-bottom: 20px; }
    .model-picker-screen { padding: 23px 18px 27px; }
    .model-results-grid {
      grid-template-columns: 1fr;
      gap: 0;
      border: 1px solid #e1e6ee;
      border-radius: 15px;
      background: #fff;
      overflow: hidden;
    }
    .catalog-model {
      min-height: 82px;
      border: 0;
      border-bottom: 1px solid #e9edf3;
      border-radius: 0;
      padding: 10px 13px;
      gap: 13px;
    }
    .catalog-model:last-child { border-bottom: 0; }
    .catalog-model.selected { box-shadow: inset 3px 0 0 var(--teal); }
    .catalog-model:hover { border-bottom-color: #e9edf3; }
    .catalog-model-image { background: #fff; border-radius: 9px; }
    .icon-box { width: 38px; height: 43px; flex-basis: 38px; }
    .detail-repair-icon { width: 41px; height: 45px; flex-basis: 41px; }
    .quality-card { padding: 15px 14px; column-gap: 12px; }
    .quality-description { line-height: 1.45; margin-bottom: 7px; }
    .quality-card > .btn { padding: 10px 12px; min-width: 146px; font-size: 15px; }
    .detail-footnote { margin-top: 14px; }
    .date-grid { gap: 5px; }
    .date-number { font-size: 22px; }
    .date-card { padding-inline: 2px; }
    .time-slot { padding-inline: 11px; }
    .slots-section .section-top { margin-bottom: 12px; }
    .accessory-card { grid-template-columns: 90px minmax(0, 1fr); }
    .accessory-content > .btn { border-radius: 10px; }
    .summary-screen,
    .menu-screen { padding: 23px 18px 28px; }
    .app-dock .mobile-bar { grid-template-columns: minmax(0, 1fr) minmax(164px, 1.05fr); padding-inline: 17px; }
    .app-dock .mobile-bar.single-action { grid-template-columns: 1fr; }
    body[data-keyboard="true"] .dock-guidance { min-height: 32px; padding-top: 5px; }
    body[data-keyboard="true"] .app-navigation { display: none; }
    body[data-keyboard="true"] .app-workspace { grid-template-rows: minmax(0, 1fr); }
  }

  @media (max-width: 374px) {
    .booking-layout,
    .entry-main,
    .model-picker-screen,
    .summary-screen,
    .menu-screen { padding-inline: 14px; }
    .page-heading,
    .entry-main .page-heading,
    .detail-heading h1 { font-size: 26px; }
    .entry-card { padding: 13px; }
    .repair-trigger { padding: 12px 10px; gap: 8px; }
    .icon-box { width: 32px; flex-basis: 32px; height: 39px; }
    .repair-title { font-size: 15px; }
    .repair-price { font-size: 16px; }
    .repair-card.selected .repair-chevron { width: 18px; height: 18px; flex-basis: 18px; }
    .quality-card { padding: 13px 12px; column-gap: 7px; }
    .quality-name,
    .quality-price { font-size: 17px; }
    .quality-info summary { font-size: 14px; }
    .quality-card > .btn { min-width: 129px; padding-inline: 9px; font-size: 14px; }
    .date-card { min-width: 45px; }
    #customer-form .form-grid { padding: 15px 12px; gap: 16px 10px; }
    .accessory-card { grid-template-columns: 76px minmax(0, 1fr); }
    .accessory-content { padding: 12px; }
    .time-slot { padding-inline: 9px; }
    .time-slot > .icon { display: none; }
    .app-dock .mobile-bar { grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr); gap: 9px; padding-inline: 13px; }
    .app-dock .mobile-bar > .btn { font-size: 15px; padding-inline: 10px; gap: 5px; }
    .mobile-total strong { font-size: 19px; }
    .edit-context,
    .edit-context [data-action="cancel-edit"] { font-size: 14px; }
  }
}