/* Phone companion layout. Activated by data-form="phone" on <html> (set by
   app.js from the viewport width). One thing per screen, bottom tab bar,
   phone-sized type. The iPad kiosk is untouched. */
:root[data-form="phone"] {
  --fs-body: 18px; --fs-title: 22px; --fs-clock: 40px; --fs-small: 15px; --row-h: 52px; --radius: 14px;
}
:root[data-form="phone"][data-size="xsmall"] { --fs-body: 15px; --fs-title: 18px; --fs-clock: 32px; --fs-small: 13px; --row-h: 44px; }
:root[data-form="phone"][data-size="small"] { --fs-body: 16px; --fs-title: 20px; --fs-clock: 36px; --fs-small: 14px; --row-h: 48px; }
:root[data-form="phone"][data-size="large"] { --fs-body: 20px; --fs-title: 24px; --fs-clock: 44px; --fs-small: 16px; --row-h: 56px; }
:root[data-form="phone"][data-size="huge"]  { --fs-body: 22px; --fs-title: 26px; --fs-clock: 48px; --fs-small: 17px; --row-h: 60px; }

:root[data-form="phone"] body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
:root[data-form="phone"] #dimmer { display: none; }
:root[data-form="phone"] .sticky-layer { display: none; }
:root[data-form="phone"] .divider { display: none; }

/* top bar: greeting + date on one row, clock + weather on the next */
:root[data-form="phone"] .topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date clock" "weather actions";
  gap: 8px 10px; padding: 10px 14px 8px;
}
:root[data-form="phone"] .date-block { grid-area: date; min-width: 0; }
:root[data-form="phone"] .date { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-form="phone"] .topbar-actions { grid-area: actions; align-self: center; }
:root[data-form="phone"] .clock { grid-area: clock; justify-self: end; align-self: center; font-size: 30px; letter-spacing: 0; }
:root[data-form="phone"] .clock small { font-size: 14px; margin-left: 2px; }
:root[data-form="phone"] .weather-chip { grid-area: weather; justify-self: stretch; min-width: 0; min-height: 48px; padding: 6px 12px; }
:root[data-form="phone"] .w-icon { font-size: 28px; }
:root[data-form="phone"] .w-temp { font-size: 22px; }
:root[data-form="phone"] .w-text { min-width: 0; }
:root[data-form="phone"] .w-desc { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-form="phone"] .icon-btn { width: 44px; height: 44px; }
:root[data-form="phone"] .icon-btn svg { width: 22px; height: 22px; }
:root[data-form="phone"] #btn-notes, :root[data-form="phone"] #btn-brightness { display: none; }

/* main area: single column; the side column's cards follow the agenda */
:root[data-form="phone"] .grid { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
:root[data-form="phone"] .col { padding: 10px 14px; flex: none; }
:root[data-form="phone"] .col-today { border: 0; }
:root[data-form="phone"] .col-upcoming { border: 0; padding-top: 0; }
:root[data-form="phone"] .agenda, :root[data-form="phone"] .upcoming { flex: none; overflow: visible; }
:root[data-form="phone"] .col-title { font-size: 14px; }
:root[data-form="phone"] .ev .title { font-size: 19px; }
:root[data-form="phone"] .up .title { font-size: 17px; }
:root[data-form="phone"] .up .sub { font-size: 14px; }
:root[data-form="phone"] .big-btn { min-height: 56px; font-size: 20px; margin-top: 6px; }
:root[data-form="phone"] .list-card { min-height: 72px; padding: 10px 14px; }
:root[data-form="phone"] .card-grip { display: none; }
:root[data-form="phone"] .list-card.panel { padding-top: 10px; }
:root[data-form="phone"] .card-body { max-height: none; overflow: visible; }
:root[data-form="phone"] .list-card-preview { font-size: 17px; white-space: normal; }
:root[data-form="phone"] .view-bar .seg { width: 100%; }
:root[data-form="phone"] .seg.small button { min-height: 42px; font-size: 16px; }
:root[data-form="phone"] .nav-btn { min-height: 42px; font-size: 18px; padding: 0 12px; }
:root[data-form="phone"] .week { min-height: 60vh; }
:root[data-form="phone"] .month { min-height: 60vh; }
:root[data-form="phone"] .mo-grid { grid-auto-rows: 64px; }
:root[data-form="phone"] .mo-num { font-size: 15px; }

/* on the Today tab the calendar switcher is hidden; on the Calendar tab the upcoming/cards are hidden */
:root[data-form="phone"][data-tab="today"] .view-bar .seg, :root[data-form="phone"][data-tab="today"] #view-nav { display: none; }
:root[data-form="phone"][data-tab="calendar"] .col-upcoming { display: none; }
:root[data-form="phone"][data-tab="calendar"] #btn-add { display: none; }

/* sheets become full-screen pages that sit above the content but below the tab bar */
:root[data-form="phone"] .sheet { padding: 0; align-items: stretch; background: var(--bg); bottom: calc(68px + env(safe-area-inset-bottom)); }
:root[data-form="phone"] .sheet-card { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 12px 14px 16px; gap: 10px; }
:root[data-form="phone"] .sheet-card.tall { height: 100%; }
:root[data-form="phone"] .sheet-head h2 { font-size: 22px; }
:root[data-form="phone"] .icon-btn.close { width: 44px; height: 44px; font-size: 28px; }
:root[data-form="phone"] .field input, :root[data-form="phone"] .field textarea, :root[data-form="phone"] .add-row input { min-height: 48px; font-size: 18px; padding: 8px 12px; }
:root[data-form="phone"] .btn { min-height: 48px; font-size: 17px; padding: 0 14px; }
:root[data-form="phone"] .toggle { min-height: 44px; font-size: 16px; }
:root[data-form="phone"] .toggle input { width: 26px; height: 26px; }
:root[data-form="phone"] .row { flex-wrap: wrap; }
:root[data-form="phone"] .shop-item { min-height: 50px; grid-template-columns: 40px 1fr 48px; }
:root[data-form="phone"] .shop-item .text { font-size: 18px; }
:root[data-form="phone"] .shop-item .check { width: 30px; height: 30px; font-size: 20px; }
:root[data-form="phone"] .popover { top: auto; bottom: 80px; }
:root[data-form="phone"] .swatch { width: 44px; height: 44px; }
:root[data-form="phone"] .palettes { grid-template-columns: repeat(3, 1fr); }
:root[data-form="phone"] .palette { font-size: 14px; min-height: 52px; }
:root[data-form="phone"] .seg button { min-height: 46px; font-size: 16px; min-width: 80px; }
:root[data-form="phone"] #size-seg button { min-width: 100px; font-size: 15px; }
:root[data-form="phone"] #sheet-settings .sheet-actions { bottom: -16px; padding-bottom: 16px; margin-bottom: -16px; }

/* weather on a phone */
:root[data-form="phone"] .wx-tabs { width: 100%; }
:root[data-form="phone"] .wx-main { gap: 10px; }
:root[data-form="phone"] .wx-big-icon { font-size: 54px; }
:root[data-form="phone"] .wx-big-temp { font-size: 46px; }
:root[data-form="phone"] .wx-big-desc { font-size: 18px; }
:root[data-form="phone"] .wx-facts { grid-template-columns: 1fr 1fr; gap: 6px; }
:root[data-form="phone"] .wx-facts dd { font-size: 16px; }
:root[data-form="phone"] .wx-hour { flex: 0 0 66px; }
:root[data-form="phone"] .wx-hour .t { font-size: 17px; }
:root[data-form="phone"] .wx-day { grid-template-columns: 54px 32px minmax(0, 1fr) 70px 92px; gap: 6px; padding: 0 4px; font-size: 16px; min-height: 48px; }
:root[data-form="phone"] .wx-day .desc { font-size: 15px; }
:root[data-form="phone"] .wx-day .pop small { display: none; }
:root[data-form="phone"] .wx-day .hl { padding-right: 0; }
:root[data-form="phone"] .wx-day .hl small { font-size: 14px; }
:root[data-form="phone"] .radar-map { min-height: 300px; }
:root[data-form="phone"] .radar-bar { flex-wrap: wrap; row-gap: 6px; }
:root[data-form="phone"] .radar-bar input[type=range] { flex: 1 1 100%; order: 3; }
:root[data-form="phone"] .radar-time { min-width: 0; font-size: 16px; white-space: nowrap; flex: 1; text-align: left; order: 2; }
:root[data-form="phone"] #radar-play { order: 1; }
:root[data-form="phone"] #radar-recenter { order: 2; }
:root[data-form="phone"] .radar-legend { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "title bar" ". scale" "swatches swatches"; gap: 4px 10px; font-size: 14px; }
:root[data-form="phone"] .lg-title { grid-area: title; }
:root[data-form="phone"] .lg-bar { grid-area: bar; width: 100%; }
:root[data-form="phone"] .lg-scale { grid-area: scale; width: 100%; margin: 0; font-size: 12px; }
:root[data-form="phone"] .lg-sep { display: none; }
:root[data-form="phone"] .radar-legend .lg-swatch.snow { grid-area: swatches; }
:root[data-form="phone"] .radar-legend .lg-swatch, :root[data-form="phone"] .radar-legend .lg-label { grid-area: swatches; }
:root[data-form="phone"] .radar-legend .lg-swatch.snow { justify-self: start; }
:root[data-form="phone"] .radar-legend .lg-swatch.snow + .lg-label { justify-self: start; margin-left: 32px; }
:root[data-form="phone"] .radar-legend .lg-swatch.mix { justify-self: start; margin-left: 96px; }
:root[data-form="phone"] .radar-legend .lg-swatch.mix + .lg-label { justify-self: start; margin-left: 128px; }
:root[data-form="phone"] .place-row { gap: 6px; }
:root[data-form="phone"] .weather-card .sheet-actions { flex-wrap: wrap; }
:root[data-form="phone"] .weather-card .sheet-actions .btn { flex: 1 1 45%; }
:root[data-form="phone"] .weather-card .sheet-actions .spacer { display: none; }
:root[data-form="phone"] .weather-card .sheet-actions .hint { flex-basis: 100%; text-align: center; }
:root[data-form="phone"] #sheet-notes .sheet-actions .hint { display: none; }
:root[data-form="phone"] #sheet-notes .sheet-actions .btn { flex: 1; }
:root[data-form="phone"] .pill { min-height: 40px; font-size: 15px; padding: 0 12px; }

/* notes on a phone: the stack is the whole screen */
:root[data-form="phone"] .notes-grid { grid-template-columns: 1fr; }
:root[data-form="phone"] .stack-open .sn-text { font-size: 19px; }
:root[data-form="phone"] .note-colors { gap: 8px; }
:root[data-form="phone"] .note-swatch { width: 40px; height: 40px; }
:root[data-form="phone"] #note-card textarea { font-size: 22px; min-height: 140px; }
:root[data-form="phone"] .draw-box { height: 260px; }
:root[data-form="phone"] .pen, :root[data-form="phone"] .pen-size { width: 40px; height: 40px; }
:root[data-form="phone"] .note-foot .seg { width: 100% !important; }

/* tab bar */
.tabbar { display: none; }
:root[data-form="phone"] .tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
  height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--card); border-top: 1px solid var(--line);
}
.tabbar button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--text-low); }
.tabbar button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button[aria-selected="true"] { color: var(--accent-ink); }
.tabbar button[aria-selected="true"] svg { stroke-width: 2.5; }


/* ---- phone pages scroll as one page: no inner scroll areas, no clipped bottoms ---- */
:root[data-form="phone"] .sheet-card, :root[data-form="phone"] .sheet-card.tall { height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
:root[data-form="phone"] .wx-pane, :root[data-form="phone"] .radar-pane { flex: none; }
:root[data-form="phone"] .wx-daily { flex: none; min-height: 0; overflow: visible; }
:root[data-form="phone"] .wx-hourly { flex: none; }
:root[data-form="phone"] .shop-list, :root[data-form="phone"] .notes-grid, :root[data-form="phone"] #routine-list, :root[data-form="phone"] .day-list, :root[data-form="phone"] .place-results, :root[data-form="phone"] .mycal-list { flex: none; max-height: none; overflow: visible; }
:root[data-form="phone"] .sheet-actions { flex: none; margin-top: 8px; padding-bottom: 8px; }
:root[data-form="phone"] #sheet-settings .sheet-actions { position: static; margin-bottom: 0; }
:root[data-form="phone"] .radar-map { flex: none; height: 320px; min-height: 0; }
:root[data-form="phone"] form { flex: none; }
:root[data-form="phone"] .weather-card .sheet-actions .btn { flex: 1 1 100%; }

:root[data-form="phone"] .sheet-actions .btn { white-space: nowrap; }
:root[data-form="phone"] .sheet-actions .hint { font-size: 14px; }