/* Shared app design. Print keeps the dedicated paper layout in index.html. */
@media screen {
  :root {
    --app-bg: #f3f6f4;
    --app-surface: #ffffff;
    --app-ink: #203a31;
    --app-muted: #5b6d61;
    --app-line: #dce5de;
    --app-green: #21634e;
    --app-forest: #173e37;
    --app-tint: #e8f2ec;
    --app-orange: #ee872a;
    --app-shadow: 0 4px 18px #173e3706;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', sans-serif;
    color: var(--app-ink);
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
  }
  html, body { touch-action: manipulation; }
  body { min-height: 100vh; min-height: 100dvh; background: var(--app-bg); color: var(--app-ink); }
  button, input, textarea, select { font-family: inherit; -webkit-tap-highlight-color: transparent; }
  button, a, input, textarea { touch-action: manipulation; }
  button { min-height: 44px; border-color: var(--app-line); border-radius: 12px; font-size: 13px; font-weight: 550; color: var(--app-green); transition: background-color 140ms ease, border-color 140ms ease; }
  button:active { background-color: #dfebe3; }
  button.primary { background: var(--app-green); color: white; }
  button:disabled { cursor: default; opacity: .4; }
  button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid #75b49a;
    outline-offset: 3px;
  }
  h1, h2, h3 { letter-spacing: -.35px; }
  main { max-width: 1180px; margin: 24px auto; padding: 0 24px; }
  .layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .layout > .card { min-width: 0; border: 1px solid var(--app-line); border-radius: 20px; padding: 20px; box-shadow: var(--app-shadow); }
  #entry { padding: 0; border: 0; background: transparent; box-shadow: none; }
  #roomPlan { min-width: 0; margin-bottom: 0; }

  /* Date belongs to the workspace heading; daily work stays below it. */
  #workspaceHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 12px;
    margin: 0 0 12px;
    padding: 16px;
    border-radius: 20px;
    background: var(--app-forest);
    color: #fff;
  }
  #workspaceHeader .workspace-brand { display: block; min-width: 0; }
  #workspaceHeader small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c4d7cf;
    opacity: 1;
    font-size: 9px;
    font-weight: 550;
    line-height: 1.5;
    letter-spacing: .6px;
  }
  #workspaceHeader h1 { margin: 3px 0 0; font-size: 22px; font-weight: 650; line-height: 1.25; }
  #workspaceHeader #openSettings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ffffff26;
    border-radius: 13px;
    background: #ffffff10;
    color: white;
    font-size: 0;
  }
  #openSettings::before {
    content: '';
    width: 21px;
    height: 21px;
    background: currentColor;
    -webkit-mask: var(--settings-icon) center / contain no-repeat;
    mask: var(--settings-icon) center / contain no-repeat;
  }
  #openSettings { --settings-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 3-1 3-3 1-2 3 2 2v3l3 2 1 3h4l1-3 3-2v-3l2-2-2-3-3-1-1-3z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
  #workspaceHeader .room-plan-heading {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    gap: 12px;
    margin: 0;
  }
  #workspaceHeader .room-plan-heading #dateLabel { color: #d5e3dc; font-size: 12px; font-weight: 500; }
  #workspaceHeader .room-plan-heading #date {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    background: #f0f6f2;
    color: var(--app-ink);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color-scheme: light;
  }
  #date::-webkit-date-and-time-value { text-align: left; }

  /* A horizontal room rail, with persistent color meanings. */
  .room-selection { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 6px; }
  .room-selection #roomStrip { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; padding: 3px 2px 5px; scrollbar-width: none; scroll-padding-inline: 2px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  #roomStrip::-webkit-scrollbar { display: none; }
  .room-selection #roomStrip button {
    flex: 0 0 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #eaf0eb;
    color: #465e50;
    font-size: 16px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .room-selection #roomStrip button.has-work { background: #e7f2e9; color: var(--app-green); border-color: #bad1c2; }
  .room-selection #roomStrip button.active { background: var(--app-green); color: #fff; border-color: var(--app-green); box-shadow: 0 2px 5px #21634e20; }
  .room-selection #roomStrip button.waiting-checkout { background: #fff0d8; color: #854908; border-color: #dfae6e; }
  .room-selection #roomStrip button.waiting-checkout.active { background: #f7bd68; color: #573000; border-color: #a16e28; box-shadow: 0 0 0 2px #a16e2828; }
  .room-selection #roomStrip button.room-completed { background: var(--app-orange); color: #4f2602; border-color: #d46b10; font-size: 14px; }
  .room-selection #roomStrip button.room-completed.active { background: var(--app-orange); color: #4f2602; border-color: #a44a06; box-shadow: 0 0 0 2px #a44a0633; }
  .room-selection #chooseRooms { flex: 0 0 auto; min-height: 44px !important; margin: 0; padding: 8px 10px; border: 1px solid var(--app-line); background: #fff; font-size: 12px; white-space: nowrap; }
  #roomStrip.empty-plan { padding-block: 8px; font-size: 12px; line-height: 1.5; color: var(--app-muted); }
  #roomWaitingNote { margin: 3px 2px 6px; font-size: 12px; line-height: 1.45; color: #854908; }
  #roomWaitingNote.room-completed { color: #964807; }
  #roomActionBar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
  .roomActionLeft, .roomActionRight { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .roomActionLeft { flex: 0 0 auto; }
  .roomActionLeft button { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px !important; padding: 0; border: 0; border-radius: 12px; background: #eaf0eb; font-size: 0; }
  .roomActionLeft button::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--action-icon) center / contain no-repeat; mask: var(--action-icon) center / contain no-repeat; }
  #refreshView { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5M6 7a7 7 0 0 1 12-1l2 2M4 16l2 2a7 7 0 0 0 12-1'/%3E%3C/svg%3E"); }
  #undoChange { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 4 9l5 5M4 9h9a6 6 0 0 1 0 12'/%3E%3C/svg%3E"); }
  .roomActionRight { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roomActionRight #toggleRoomWaiting, .roomActionRight #toggleRoomCompleted, .roomActionRight #viewTotals { width: 100%; min-width: 0; height: 44px; min-height: 44px !important; margin: 0; padding: 6px 8px; border-radius: 12px; font-size: 12px; line-height: 1.2; white-space: normal; }
  .roomActionRight #toggleRoomWaiting { color: #52675b; background: #fff; border-color: var(--app-line); }
  .roomActionRight #toggleRoomWaiting.waiting-checkout { background: #fff0d8; color: #854908; border-color: #dfae6e; }
  .roomActionRight #toggleRoomCompleted { background: var(--app-orange); color: #4f2602; border-color: #d46b10; font-weight: 650; }
  .roomActionRight #toggleRoomCompleted.room-completed { background: #fff0e0; color: #8f4208; border-color: #e7c3a2; }
  .roomActionRight #viewTotals { color: var(--app-green); background: #e7efe9; border: 1px solid transparent; }

  /* A stable context line anchors every count to the selected room. */
  #recordingContext { padding: 16px 0 12px; }
  .recording-heading, .recording-room { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .recording-heading { justify-content: space-between; }
  .recording-room { flex-wrap: wrap; gap: 6px 9px; }
  #currentRoomTitle { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.3; }
  #currentRoomStatus { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 7px; background: #e7eee9; color: #496756; font-size: 11px; font-weight: 550; line-height: 1.2; white-space: nowrap; }
  #currentRoomStatus::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  #currentRoomStatus[data-state='waiting'] { background: #fff0d8; color: #854908; }
  #currentRoomStatus[data-state='completed'] { background: #ffebd7; color: #8f4208; }
  #currentRoomStatus[data-state='completed']::before { width: 9px; height: 6px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; border-radius: 0; background: none; transform: translateY(-1px) rotate(-45deg); }
  #reorderItems { flex: 0 0 auto; min-height: 44px; padding: 7px 9px; border: 0; background: transparent; font-size: 12px; color: var(--app-muted); }
  #reorderItems[aria-pressed='true'] { color: var(--app-green); background: #e7efe9; font-weight: 650; }
  .recording-feedback { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 17px; margin-top: 0; }
  #recordingHint { flex: 0 0 auto; color: var(--app-muted); font-size: 11px; line-height: 17px; }
  #notice { min-height: 17px; margin: 0; color: var(--app-green); font-size: 11px; line-height: 17px; text-align: right; overflow-wrap: anywhere; }
  .recording-feedback #notice:empty { display: block; }

  /* 96px cards: names above a separate 44px control area. */
  #items, .is-mobile #items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  #items .item.item-tile { position: relative; display: block; min-width: 0; padding: 0; border: 1px solid #dce6de; border-radius: 14px; background: #fff; overflow: hidden; isolation: isolate; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
  #items .item.item-tile.has-count { background: #e8f3ec !important; border-color: #9dbea9 !important; }
  #items .item.item-tile .item-add { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; height: 96px; min-height: 96px; padding: 8px 9px 44px; border: 0; border-radius: 0; background: transparent; text-align: left; color: var(--app-ink); }
  .item-add .tile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0; font-size: 13px; font-weight: 600; line-height: 15px; overflow-wrap: anywhere; }
  .item-add small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 2px 0 0; padding: 0; color: var(--app-muted); opacity: 1; font-size: 11px; font-weight: 400; line-height: 12px; }
  .item-add .tile-count { position: absolute; left: 10px; bottom: 10px; color: #697e6f; font-size: 21px; font-weight: 650; line-height: 24px; font-variant-numeric: tabular-nums; }
  .has-count .item-add .tile-count { color: var(--app-green); }
  #items .tile-minus, #items .tile-drag { position: absolute; right: 0; bottom: 0; top: auto; width: 44px; height: 44px; min-height: 44px !important; padding: 0; border: 0; border-radius: 11px 0 13px 0; background: transparent; font-size: 22px; font-weight: 400; line-height: 44px; transform: none; }
  #items .tile-minus { z-index: 2; }
  #items .tile-minus::before { content: ''; position: absolute; width: 30px; height: 30px; inset: 7px; border: 1px solid #d6e2d9; border-radius: 10px; background: #fff; z-index: -1; }
  #items .tile-drag { display: none; z-index: 3; color: #5d7a68; cursor: grab; touch-action: none; }
  .is-reordering #items .tile-drag { display: block; }
  .is-reordering #items .tile-minus { display: none; }
  .is-reordering #items .item.item-tile { border-style: dashed; }
  .is-reordering #items .item-add:disabled { opacity: 1; }
  #items .tile-drag:active { cursor: grabbing; background: #d9eadd; }
  #items .catalog-add-tile { display: grid; place-items: center; align-self: stretch; width: 100%; height: 100%; min-height: 98px !important; margin: 0 !important; padding: 0; border: 1px dashed #b2c9bb; border-radius: 14px; background: #f6faf7; color: #58816b; font-size: 30px; font-weight: 300; }
  #items .item-remove { position: relative; z-index: 4; width: 100%; min-height: 44px !important; padding: 8px; border: 0; border-top: 1px solid #e5d9d6; border-radius: 0; background: #fff6f3; color: #a23e32; font-size: 12px; }
  #items .item-tile:has(.item-remove) .tile-minus { bottom: 44px; }
  #items .item-tile:has(.item-remove) .tile-count { bottom: 54px; }
  #items .item-tile.item-tapped { animation: item-tap 180ms ease-out; }
  @keyframes item-tap { from { box-shadow: inset 0 0 0 2px #21634e66; } to { box-shadow: inset 0 0 0 2px #21634e00; } }
  #items .item.tile-dragging { opacity: .35; outline: 1px dashed #6c9a7e; }
  #items .item.tile-drop-target { outline: 2px solid var(--app-green); outline-offset: -2px; background: #dceee2 !important; box-shadow: 0 0 0 3px #21634e16; }
  .tile-drop-target::after { bottom: 7px; border-radius: 6px; font-size: 10px; padding: 3px 6px; }
  .tile-drag-preview { border-radius: 14px !important; box-shadow: 0 14px 28px #173e3730 !important; }
  #itemManagerActions { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 8px 10px 8px 14px; border: 1px solid #b2c9bb; border-radius: 14px; background: #f6faf7; box-shadow: 0 4px 14px #173e3714; }
  #itemManagerActions[hidden] { display: none; }
  #itemManagerTitle { font-size: 14px; font-weight: 600; }
  #itemManagerActions #manageItems { flex: 0 0 auto; min-width: 80px; min-height: 44px; margin: 0; padding: 10px 18px; border: 0; background: var(--app-green); color: #fff; font-size: 14px; font-weight: 650; }
  #entry #custom { display: none; gap: 8px; margin-top: 12px; }
  .is-managing-items #entry #custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #custom input { width: 100%; min-width: 0; font-size: 16px; }
  #custom #addCustom { grid-column: 1 / -1; background: var(--app-green); color: white; border: 0; }
  #hiddenItems { gap: 6px; margin-bottom: 8px; }
  #hiddenItems:empty { display: none; }
  .restore-item { min-height: 44px; font-size: 12px; }
  #noteLabel { display: block; margin: 16px 1px 6px; font-size: 12px; font-weight: 550; color: var(--app-muted); }
  #note { min-height: 68px; width: 100%; margin: 0; padding: 12px; border: 1px solid var(--app-line); border-radius: 14px; background: #fff; color: var(--app-ink); font-size: 16px; line-height: 1.45; resize: vertical; }
  #note::placeholder { color: #6b7c71; font-size: 13px; }
  #draftSummary { padding: 9px 2px 0; color: var(--app-muted); font-size: 11px; line-height: 1.5; }
  #draftSummary:empty { display: none; }

  /* Restocking reads as a work list rather than another entry form. */
  #listTitle { margin-bottom: 14px; font-size: 20px; font-weight: 650; }
  .layout > .card:last-child > .toolbar { display: flex; gap: 3px; margin: 0 0 14px; padding: 4px; border-radius: 12px; background: #edf2ee; }
  #pending, #completed { flex: 1; min-height: 40px; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--app-muted); font-size: 13px; }
  #pending[aria-pressed='true'], #completed[aria-pressed='true'] { background: #fff; color: var(--app-green); box-shadow: 0 1px 3px #203b3410; font-weight: 650; }
  #totals { padding: 12px 14px; border-radius: 12px; background: #eaf3ed; color: #355e47; font-size: 13px; line-height: 1.7; }
  .task { margin: 12px 0 0; padding: 14px; border: 1px solid var(--app-line); border-radius: 15px; background: #fff; }
  .task header { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 8px; padding: 0; margin: 0; background: none; color: inherit; }
  .task h3 { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.4; }
  .task .badge { flex: 0 0 auto; margin-top: 1px; padding: 4px 7px; background: #edf3ee; color: #496756; font-size: 10px; white-space: nowrap; }
  .task ul { margin: 8px 0; }
  .task li { min-height: 44px; padding: 0; border-top: 1px solid #f0f3ef; font-size: 14px; }
  .task li:first-child { border-top: 0; }
  .task-item-label { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; cursor: pointer; line-height: 1.4; }
  .task-item-label input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--app-green); }
  .task p { margin: 10px 0; color: #566c5e; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .task .actions { gap: 7px; }
  .task .actions button { min-height: 44px; padding: 8px 11px; font-size: 12px; }
  .task .actions button:not(.primary) { color: #9a4739; border-color: #e9dcd7; background: #fff; }
  .task.waiting-checkout { border-color: #dfae6e; }
  .task.waiting-checkout h3 { color: #854908; }
  .task.done { opacity: 1; background: #f6f8f5; }
  .empty { padding: 32px 16px; color: var(--app-muted); font-size: 14px; line-height: 1.6; }

  /* Settings and native sheets share the same typographic and spacing system. */
  dialog { width: min(480px, calc(100% - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid var(--app-line); border-radius: 22px; background: white; color: var(--app-ink); box-shadow: 0 20px 64px #173e3720; overflow-y: auto; overscroll-behavior-y: contain; }
  dialog::backdrop { background: #10251b55; }
  dialog h2 { font-size: 20px; font-weight: 650; line-height: 1.3; }
  .settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
  #settingsTitle { margin: 0; }
  #closeSettings, #closeTotals { min-height: 44px; padding: 8px 12px; border: 0; background: #edf3ee; font-size: 13px; }
  .settings-section-title { margin: 18px 2px 8px; color: var(--app-muted); font-size: 12px; font-weight: 550; letter-spacing: 0; }
  .settings-preferences, #settingsDialog #mobileUtilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #settingsDialog #mobileUtilities { margin: 0; padding: 0; border: 0; }
  .settings-preferences button, #settingsDialog #mobileUtilities button { width: 100%; min-height: 46px; padding: 10px 8px; border: 1px solid var(--app-line); border-radius: 12px; background: #f8faf8; font-size: 13px; }
  #settingsDialog #local, #settingsDialog #installHelp { grid-column: 1 / -1; }
  #settingsDialog #local { margin: 5px 2px; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
  #settingsDialog #installHelp { margin: 0; padding: 11px 12px; border-color: #dde7df; border-radius: 12px; background: #eff5f0; color: #536c5d; font-size: 12px; line-height: 1.6; }
  #settingsDialog #myMusic { display: flex; align-items: center; min-height: 46px; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 12px; color: var(--app-green); font-size: 13px; text-decoration: none; }
  #settingsDialog #myMusic::after { content: '↗'; margin-left: auto; }
  #roomsDialog > .actions { gap: 7px; }
  #roomsDialog > .actions button { padding: 8px 12px; background: #f0f5f1; border: 0; }
  #roomCheckboxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
  #roomCheckboxes .room-choice { min-width: 0; border: 1px solid var(--app-line); border-radius: 13px; background: #f7faf7; overflow: hidden; }
  #roomCheckboxes .room-choice label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 7px; border: 0; font-size: 16px; font-weight: 600; }
  #roomCheckboxes input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--app-green); }
  #roomCheckboxes .room-wait-toggle { min-height: 44px !important; padding: 6px 2px; border-color: #e0e8e1; font-size: 10px; line-height: 1.3; }
  #roomCheckboxes .room-choice.waiting-checkout { background: #fff0d8; border-color: #dfae6e; }
  .sheet-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #roomsDialog .sheet-footer button { min-height: 48px; margin: 0; font-size: 14px; font-weight: 600; }
  #cancelRooms { grid-column: 1; grid-row: 1; background: #edf2ed; border: 0; }
  #applyRooms { grid-column: 2; grid-row: 1; }
  .sheet-toolbar { display: flex; justify-content: flex-end; position: sticky; top: 0; z-index: 3; padding-bottom: 8px; background: #fff; }
  #closeTotals { float: none; }
  .total-section { padding: 14px; margin: 12px 0; border-radius: 13px; background: #f1f6f2; }
  .total-section h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
  .total-line { padding: 8px 0; font-size: 14px; line-height: 1.4; }
  .total-line > span { min-width: 0; overflow-wrap: anywhere; }
  .total-line > b { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  #roomActionsDescription { margin: 0 0 18px; color: var(--app-muted); font-size: 14px; line-height: 1.6; }
  .room-actions-buttons { display: grid; gap: 8px; }
  .room-actions-buttons button { min-height: 48px; font-size: 14px; font-weight: 600; }
  .room-actions-buttons .destructive { color: #a6382f; background: #fff1ee; border-color: #efd8d2; }
  #cancelRoomActions { background: #edf2ed; }

  /* Phone layout is a single canvas, with a reachable two-tab bar. */
  body.is-mobile { overflow-x: clip; padding-bottom: 0; }
  .is-mobile main { max-width: 560px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 12px calc(110px + env(safe-area-inset-bottom)); }
  .is-mobile .layout { display: block; }
  .is-mobile .card, .is-mobile #entry { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .is-mobile #workspaceHeader { padding: 14px; gap: 12px; margin-bottom: 10px; border-radius: 19px; }
  .is-mobile #workspaceHeader h1 { font-size: 19px; }
  .is-mobile #workspaceHeader small { font-size: 8px; letter-spacing: .5px; }
  .is-mobile #currentRoomTitle { font-size: 17px; }
  .is-mobile #recordingContext { padding-top: 10px; }
  .is-mobile .layout > .card:last-child { margin-top: 12px; padding: 16px; border: 1px solid #e0e8e1; border-radius: 18px; background: #fff; }
  .is-mobile[data-section='entry'] .layout > .card:last-child { display: none; }
  .is-mobile[data-section='tasks'] #entry { display: block; }
  .is-mobile[data-section='tasks'] #entry > :not(#roomPlan) { display: none !important; }
  .is-mobile #mobileNav {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 80;
    gap: 4px;
    width: min(536px, calc(100% - 24px));
    padding: 4px;
    border: 1px solid #dce5df;
    border-radius: 22px;
    background: #fffffff5;
    box-shadow: 0 6px 24px #173e3714;
  }
  .is-mobile #mobileNav button { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 5px 8px; border: 0; border-radius: 17px; background: transparent; color: #66796c; font-size: 11px; font-weight: 550; line-height: 1.2; }
  .is-mobile #mobileNav button::before { content: ''; display: block; width: 21px; height: 21px; background: currentColor; -webkit-mask: var(--tab-icon) center / contain no-repeat; mask: var(--tab-icon) center / contain no-repeat; }
  #navEntry { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='17' rx='3'/%3E%3Cpath d='M9 3h6v4H9zM8 12h8m-8 4h5'/%3E%3C/svg%3E"); }
  #navTasks { --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 1.5 1.5L7 5m-4 7 1.5 1.5L7 11m-4 7 1.5 1.5L7 17M11 6h10M11 12h10M11 18h10'/%3E%3C/svg%3E"); }
  .is-mobile #mobileNav button.active { color: var(--app-green); background: var(--app-tint); font-weight: 650; }
  .is-mobile dialog[open] { position: fixed; inset: auto 0 0; width: min(560px, 100%); max-width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 24px); margin: 0 auto; padding: 24px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 48px #173e3720; -webkit-overflow-scrolling: touch; animation: sheet-appear 180ms ease-out; }
  .is-mobile dialog::before { content: ''; display: block; width: 32px; height: 4px; margin: -13px auto 19px; border-radius: 4px; background: #cbd5cd; }
  .is-mobile .sheet-footer { position: sticky; bottom: 0; z-index: 3; margin: 0 -16px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #e5ebe5; background: #fff; }
  .is-mobile #roomActionsTitle, .is-mobile #roomActionsDescription { text-align: center; }
  @keyframes sheet-appear { from { opacity: .5; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

  @media (min-width: 1100px) {
    #items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    main { padding-inline: 12px; }
  }
  @media (max-width: 370px) {
    .is-mobile main { padding-inline: 10px; }
    .roomActionLeft, .roomActionRight { gap: 4px; }
    #roomActionBar { gap: 6px; }
    .roomActionRight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .roomActionRight #toggleRoomWaiting, .roomActionRight #toggleRoomCompleted, .roomActionRight #viewTotals { padding-inline: 4px; font-size: 11px; }
  }
  @media (max-width: 340px) {
    .is-mobile #items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #workspaceHeader h1, .is-mobile #workspaceHeader h1 { font-size: 17px; }
    #workspaceHeader small { font-size: 7px; }
    .recording-feedback { flex-direction: column; gap: 0; }
    #notice { text-align: left; }
  }
  @media (hover: hover) {
    button:not(:disabled):hover { border-color: #a9c4b3; }
    #items .item-add:not(:disabled):hover { background: #eaf3ed; }
    #items .tile-minus:not(:disabled):hover, #items .tile-drag:hover { background: #daeade; }
    #workspaceHeader #openSettings:hover { background: #ffffff22; }
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .is-mobile #mobileNav { -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
    dialog::backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  @media (prefers-contrast: more) {
    #items .item.item-tile, button, #roomCheckboxes .room-choice { border-color: #809b89; }
    #mobileNav { background: white; border-color: #809b89; }
  }
}

/* Compact restock summary: room and supplies stay together at every width. */
#totalsDialog { width: min(460px, calc(100% - 16px)); box-sizing: border-box; padding: 12px; }
#totalsDialog #totalsTitle { font-size: 16px; margin: 2px 0 12px; }
#totalsDialog .total-section { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 10px 8px; margin: 0; border-radius: 0; border-bottom: 1px solid #dce5dd; background: transparent; }
#totalsDialog .total-section:last-child { border-bottom: 0; }
#totalsDialog .total-section h3 { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#totalsDialog .total-items { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 14px; min-width: 0; }
#totalsDialog .total-line { display: inline-flex; justify-content: flex-start; align-items: baseline; gap: 3px; border: 0; padding: 0; font-size: 14px; line-height: 1.6; max-width: 100%; }
#totalsDialog .total-line > b { white-space: nowrap; }
#totalsDialog .total-line > b::before { content: '×'; font-weight: 400; margin-right: 2px; }

/* Manually collapse the heading/date, leaving the controls reachable. */
#workspaceHeader .workspace-header-actions { display: flex; align-items: center; gap: 6px; }
#workspaceHeader #toggleHeader { min-height: 44px; padding: 6px 9px; background: #ffffff10; border: 1px solid #ffffff26; color: white; font-size: 12px; white-space: nowrap; }
#workspaceHeader.header-collapsed { padding: 6px 10px; gap: 0; }
#workspaceHeader.header-collapsed .workspace-brand, #workspaceHeader.header-collapsed .room-plan-heading { display: none; }
#workspaceHeader.header-collapsed .workspace-header-actions { grid-column: 1 / -1; justify-content: space-between; }
#workspaceHeader.header-collapsed #toggleHeader { border-color: transparent; background: transparent; }

#totalsDialog { overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }

/* Waiting rooms remain visible, but cannot be entered until released in Choose rooms. */
.room-selection #roomStrip button.waiting-checkout:disabled { background: #e5e7e6; color: #929a96; border-color: #d8ddda; box-shadow: none; opacity: 1; cursor: not-allowed; }
#roomCheckboxes .room-choice-controls { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 2px; }
#roomCheckboxes .room-choice-controls label { flex: 0 1 auto; padding: 4px 2px; gap: 3px; font-size: 14px; }
#roomCheckboxes .room-choice-controls input { width: 16px; height: 16px; }
#roomCheckboxes .room-wait-toggle { flex: 0 0 auto; width: auto; min-height: 44px !important; padding: 4px 2px; border: 0; border-radius: 6px; font-size: 10px; line-height: 1.2; background: transparent; }
#roomCheckboxes .room-wait-toggle[aria-pressed="true"] { background: #dde2df; color: #53645b; box-shadow: inset 0 0 0 1px #99a79f; }
#roomCheckboxes .room-choice.waiting-checkout { background: #f0f2f1; border-color: #ccd3ce; }

.workspace-collapsed #roomPlan .room-selection, .workspace-collapsed #roomActionBar, .workspace-collapsed #roomWaitingNote { display: none !important; }
#roomNavigation { display: flex; gap: 3px; margin-left: 0; flex: 0 0 auto; }
#roomNavigation button { width: 32px; min-height: 44px; padding: 0; font-size: 24px; line-height: 1; border: 0; background: #e7eee9; color: #24664f; }
#roomNavigation button:disabled { opacity: .3; }
.recording-heading { flex-wrap: wrap; gap: 6px; }

.recording-heading #reorderItems { margin-left: auto; }

#itemViewTools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
#itemViewTools button { min-height: 36px; padding: 4px 9px; font-size: 12px; }
.item-zoom { display: flex; align-items: center; gap: 6px; }
#itemZoomLabel { min-width: 38px; text-align: center; font-size: 12px; }
#itemViewTools button:disabled { opacity: .35; }
#items, .is-mobile #items { grid-template-columns: repeat(var(--item-view-columns, 4), minmax(0, 1fr)); gap: 6px; }
#items .item-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 3px 0; color: #496756; font-size: 13px; font-weight: 600; }
#items .item-divider::after { content: ''; flex: 1; height: 1px; background: #cbd8ce; }
#items .item.item-tile .item-add { height: calc(96px * var(--item-view-scale, 1)); min-height: calc(96px * var(--item-view-scale, 1)); padding: 6px 6px 36px; }
#items .item-add .tile-title { font-size: calc(13px * var(--item-view-scale, 1)); line-height: 1.15; }
#items .item-add small { font-size: calc(11px * var(--item-view-scale, 1)); line-height: 1.15; }
#items .item-add .tile-count { font-size: calc(20px * var(--item-view-scale, 1)); left: 6px; bottom: 7px; }
#items .tile-minus, #items .tile-drag { width: 32px; height: 36px; min-height: 36px !important; line-height: 36px; }
#items .tile-minus::before { width: 26px; height: 26px; inset: 5px 3px; }
.divider-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; margin-bottom: 10px; }
.divider-editor input, .divider-editor select { width: 100%; min-width: 0; font-size: 14px; padding: 8px 5px; }
.divider-editor button { padding: 4px 6px; }
.divider-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.recording-heading #expandRoomChoice { margin-left: auto; width: 32px; min-height: 44px; flex: 0 0 auto; padding: 0; border: 0; background: #e7eee9; color: #24664f; font-size: 24px; line-height: 1; }
.recording-heading #reorderItems { margin-left: 0; }

/* The section switch lives in the header, also when the heading is collapsed. */
#workspaceHeader #mobileNav { position: static; inset: auto; display: flex; flex: 1 1 auto; align-items: center; gap: 2px; width: auto; max-width: none; margin: 0; padding: 2px; border: 0; border-radius: 10px; box-shadow: none; background: #ffffff10; transform: none; backdrop-filter: none; }
#workspaceHeader #mobileNav button { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 40px; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: #d3e3dc; font-size: 11px; font-weight: 550; line-height: 1.2; white-space: nowrap; }
#workspaceHeader #mobileNav button::before { display: none; }
#workspaceHeader #mobileNav button.active { background: #e7f1eb; color: #24664f; font-weight: 650; }
#workspaceHeader .workspace-header-actions { flex-wrap: wrap; }
#workspaceHeader:not(.header-collapsed) .workspace-header-actions { grid-column: 1 / -1; grid-row: 2; }
#workspaceHeader .room-plan-heading { grid-row: 3; }
#workspaceHeader.header-collapsed .workspace-header-actions { flex-wrap: nowrap; gap: 5px; }
#workspaceHeader.header-collapsed #toggleHeader { font-size: 11px; padding: 4px; }
#workspaceHeader.header-collapsed #openSettings { width: 36px; height: 40px; flex: 0 0 auto; }
body[data-section='entry'] .layout > .card:last-child { display: none; }
body[data-section='tasks'] #entry > :not(#roomPlan) { display: none !important; }
body[data-section='tasks'] .layout > .card:last-child { display: block; }