/* ---------- Phones (640px and under): the office in your hand ----------
   The counter scene stays (window, rain, smoke), but the ledger lies flat and fills the screen: a narrow binding, a
   slim margin inside the red rules, and the room tabs along the top as one row of folder tabs that slides sideways
   (the open room's tab is always brought into view). The brass hush and sound-board buttons move up into the
   window's corner, so nothing sits over the page. Rooms' own phone rules live with each room (css/tabs/*.css). */

@media (max-width: 640px) {
  :root { --phone-top: calc(env(safe-area-inset-top, 0px) + 96px); }

  /* The book: flat, nearly edge to edge, from under the tabs to the foot of the screen. */
  .ledger-stage { padding: var(--phone-top) 6px calc(8px + env(safe-area-inset-bottom, 0px)) 12px; perspective: 1400px; }
  .ledger { transform: none; width: 100%; }
  .ledger-cover { inset: -7px -5px -8px -11px; border-radius: 4px 7px 7px 4px; }
  .ledger-cover::after { left: 4px; width: 12px; top: 6px; bottom: 6px; }
  .ledger-block { inset: 2px -3px -4px 0; }
  .lpage .sheet {
    --m: 32px;
    padding: 16px 14px 36px var(--m);
    scroll-padding-top: 12px;
    overscroll-behavior: contain;
  }
  .lpage .sheet::-webkit-scrollbar { width: 4px; }

  /* Room tabs: one sliding row, fading out at either end where there are more. */
  .ledger-tabs {
    left: -6px;
    right: -4px;
    bottom: calc(100% + 6px);
    height: 46px;
    padding: 0 10px;
    gap: 3px;
    scroll-snap-type: x proximity;
    scroll-padding: 0 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .ltab { height: 33px; padding: 0 11px; scroll-snap-align: center; transform: translateY(7px); }
  .ltab.active { height: 39px; transform: none; }
  .ltab:hover { transform: translateY(7px); filter: brightness(0.76) saturate(0.9); } /* no hover on a touch screen */
  .ltab.active:hover { transform: none; filter: none; }
  .ltab span { font-size: 0.72rem; letter-spacing: 0.06em; padding: 2px 7px 1px; margin-top: 7px; }

  /* The head of each page: the room's name over its subtitle, both a size down. */
  .sheet-head { gap: 8px 12px; padding-bottom: 8px; margin-bottom: 16px; }
  .sheet-head h1 { font-size: 1.32rem; letter-spacing: 0.07em; line-height: 1.15; }
  .sheet-head .sub { font-size: 0.64rem; letter-spacing: 0.12em; line-height: 1.5; }
  .sheet-head .actions { gap: 6px; }
  .lpage .sheet .sec-title:not(:first-child) { margin-top: 22px; }

  /* Pencil lines a little smaller, so a whole field fits on a line. */
  .line-input, .line-select { font-size: 1.32rem; }
  .btn { font-size: 0.8rem; }

  /* The duty tag in the window's top right corner, the brass buttons in its top left. */
  .duty-tag { top: calc(env(safe-area-inset-top, 0px) + 8px); right: 6px; }
  .duty-menu { top: calc(env(safe-area-inset-top, 0px) + 64px); right: 8px; min-width: 0; width: min(240px, calc(100vw - 16px)); }
  #mute, #sound-knob { top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: auto; width: 38px; height: 38px; }
  #mute { left: 10px; right: auto; }
  #mute svg { width: 20px; height: 20px; }
  #sound-knob { left: 54px; right: auto; }
  #sound-knob svg { width: 19px; height: 19px; }
  #soundboard { top: calc(env(safe-area-inset-top, 0px) + 56px); bottom: auto; left: 10px; right: auto; width: min(300px, calc(100vw - 20px)); transform-origin: 12% 0; }
  @keyframes sb-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }

  /* Notes slide in at the foot of the screen, the width of it. */
  #notes { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* Memos and other papers laid over the page fill the screen's width. */
  .memo { max-width: calc(100vw - 20px); }
}

/* Very narrow phones (360px and under): the tags and tabs a touch smaller again. */
@media (max-width: 360px) {
  .ltab span { font-size: 0.66rem; }
  .duty-tag { max-width: 136px; }
  .sheet-head h1 { font-size: 1.18rem; }
}

/* ---------- A table laid out as a list of entries (rooms opt in with table.pstack) ----------
   On a phone a wide ruled table becomes one entry per row: the heads go, each row is a small grid, and a cell can
   carry its own typed label (data-label, from the column head). Each room sets its rows' grid areas itself. */
@media (max-width: 640px) {
  .lpage .sheet table.pstack { display: block; overflow: visible; max-width: 100%; }
  table.pstack thead { display: none; }
  table.pstack tbody, table.pstack tfoot { display: block; }
  table.pstack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; padding: 10px 4px; border-bottom: 1px dashed rgba(40, 30, 20, 0.3); }
  table.pstack td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  table.pstack td:empty { display: none; }
  table.pstack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    font: 400 0.56rem/1.3 var(--font-type);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
}

/* ---------- A phone on its side (a short, wide screen) ----------
   The height is what's scarce: the brass buttons, the room tabs and the duty tag share one strip across the top,
   and the book takes everything under it. */
@media (max-height: 500px) and (min-width: 641px) {
  .ledger-stage { padding: calc(env(safe-area-inset-top, 0px) + 50px) max(10px, env(safe-area-inset-right, 0px)) 6px max(18px, env(safe-area-inset-left, 0px)); perspective: 1400px; }
  .ledger { transform: none; width: 100%; }
  .ledger-cover { inset: -7px -5px -8px -11px; border-radius: 4px 7px 7px 4px; }
  .ledger-cover::after { left: 4px; width: 12px; top: 6px; bottom: 6px; }
  .ledger-block { inset: 2px -3px -4px 0; }
  .lpage .sheet { padding-top: 14px; overscroll-behavior: contain; }
  .ledger-tabs {
    left: 78px;
    right: 150px;
    bottom: calc(100% + 6px);
    height: 42px;
    padding: 0 10px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .ltab { height: 31px; scroll-snap-align: center; }
  .ltab.active { height: 37px; }
  .ltab:hover { transform: translateY(8px); filter: brightness(0.76) saturate(0.9); }
  .ltab.active:hover { transform: none; filter: none; }
  .sheet-head { margin-bottom: 14px; }
  .duty-tag { top: 4px; right: 6px; max-width: 150px; padding: 4px 10px 5px 21px; }
  .duty-tag::before { left: 11px; }
  .duty-tag .rank { font-size: 0.5rem; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .duty-tag .who { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .duty-tag .shift { font-size: 0.54rem; }
  .duty-menu { top: 52px; }
  #mute, #sound-knob { top: 7px; bottom: auto; width: 32px; height: 32px; }
  #mute { left: max(10px, env(safe-area-inset-left, 0px)); right: auto; }
  #mute svg { width: 18px; height: 18px; }
  #sound-knob { left: calc(max(10px, env(safe-area-inset-left, 0px)) + 38px); right: auto; }
  #sound-knob svg { width: 17px; height: 17px; }
  #soundboard { top: 46px; bottom: auto; left: 10px; right: auto; max-height: calc(100vh - 56px); overflow: auto; transform-origin: 12% 0; }
  @keyframes sb-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
  .memo { max-height: 92vh; }
}

/* ---------- Tablets (641-900px, upright) ----------
   The tabs are already one sliding row (ledger.css); here it stops short of the duty tag instead of running under
   it, and fades at its ends like the phone's. */
@media (min-width: 641px) and (max-width: 900px) and (min-height: 501px) {
  .ledger-tabs {
    right: 196px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .ltab { scroll-snap-align: center; }
}
/* A small tablet, or a big phone on its side, 641-760px: slimmer margins, so the rooms' full tables still fit. */
@media (min-width: 641px) and (max-width: 760px) {
  .ledger-stage { padding-left: 16px; padding-right: 8px; }
  .lpage .sheet { --m: 38px; padding-right: 14px; }
}