/* css/app.css — the iPad shell and screen layout for Diet Requests (834 × 1194 portrait, 1194 × 834 landscape).
   The components themselves are the Antz Diet and Kitchen module components in css/modules.css; this file places them.
   Colours only as tokens; text takes a .t-* class from app/type.css. */

/* ---------- stage (prototype only, outside the iPad) ---------- */
body { margin: 0; background: var(--md3-displaybg-secondary); }
.stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-24); }
.stage__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24); padding: var(--sp-8) var(--sp-16); border-radius: 999px; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.stage__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.stage__link { border: 0; background: none; padding: 0; color: var(--md3-on-primary-container); text-decoration: underline; cursor: pointer; font: inherit; }
.stage__me { color: var(--md3-on-surface); }
.device-slot { position: relative; flex: none; }
body.fill .stage { padding: 0; gap: 0; }
body.fill .stage__bar { display: none; }

/* ---------- the iPad: status bar · head · main · foot ---------- */
.device {
  position: absolute; top: 0; left: 0; transform-origin: top left; width: 834px; height: 1194px;
  display: grid; grid-template: "sbar" 24px "head" auto "main" 1fr "foot" auto / 1fr; overflow: hidden;
  border-radius: 24px; background: var(--md3-background); color: var(--ink);
  box-shadow: 0 0 0 10px var(--md3-neutral-primary), 0 8px 32px var(--md3-neutral-primary-a20); -webkit-font-smoothing: antialiased;
}
.device.land { width: 1194px; height: 834px; }
body.fill .device { position: relative; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; grid-template: "head" auto "main" 1fr "foot" auto / 1fr; }
body.fill .sbar { display: none; }
:where(.device) *, :where(.device) *::before, :where(.device) *::after { box-sizing: border-box; margin: 0; padding: 0; }
:where(.device) a { color: inherit; text-decoration: none; }
:where(.device) button { font-family: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
:where(.device) input, :where(.device) textarea, :where(.device) select { font-family: inherit; }
.device .btn { width: auto; }   /* app/components.css fixes .btn at 78 wide (the Figma admit pair) */
.sbar { grid-area: sbar; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-24); background: var(--md3-on-primary); color: var(--md3-neutral-primary); white-space: pre; }
.sb-r { display: flex; align-items: center; gap: var(--sp-8); }
#head { grid-area: head; position: relative; z-index: 2; }
#main { grid-area: main; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0; }
#foot { grid-area: foot; }
#foot:empty { display: none; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink); }
.head-c { color: var(--head); }
.empty { padding: var(--sp-32) var(--sp-24); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); background: var(--white); border-radius: var(--radius); color: var(--ink); }
.empty .ei { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--md3-background); color: var(--md3-outline); }
.empty b { color: var(--head); }

/* ---------- list (the Diet module queue) ---------- */
.dlist { padding: 0 var(--sp-16) var(--sp-32); }
#main.has-fab .dlist { padding-bottom: 112px; }
.seg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kattn { margin-top: var(--sp-12); }
.hdcard { cursor: pointer; }
.hd-text + .hdx__prop, .hdx__prop + .hdx__prop { margin-top: -2px; }
.land .rqcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* create: the Antz speed dial, pinned to the iPad */
.fab.gfab { position: absolute; z-index: 15; right: var(--sp-24); bottom: var(--sp-24); width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--md3-secondary), var(--md3-primary)); color: var(--md3-on-primary); box-shadow: 0 4px 14px var(--md3-neutral-primary-a20); }
.fab.gfab.open { z-index: 27; background: var(--md3-primary-container); color: var(--md3-neutral-primary); }
.tdial { position: absolute; inset: 0; z-index: 26; background: color-mix(in srgb, var(--md3-on-primary) 88%, transparent); backdrop-filter: blur(2px); }
.tdial-items { position: absolute; right: var(--sp-24); bottom: 112px; z-index: 27; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-16); }
.tdial-it { display: flex; align-items: center; gap: var(--sp-24); color: var(--md3-on-surface); }
.tdial-b { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--md3-surface-variant); color: var(--md3-on-primary-container); box-shadow: 0 4px 12px var(--md3-neutral-primary-a20); }

/* ---------- request page ---------- */
.land .rqd__cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.wcard .wh { display: flex; align-items: center; gap: var(--sp-12); }
.wcard .wh h2 { flex: 1; }
.wcard .when { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--sp-12); border-radius: 999px; background: var(--md3-background); color: var(--md3-on-primary-container); white-space: nowrap; }
/* old → new inside the items table */
.dtab .was { color: var(--ink); text-decoration: line-through; }
.dtab .new { font-weight: 600; }
.dtab .op { display: block; margin-top: 2px; color: var(--md3-neutral-secondary); font-size: 13px; }
.dtab td.act { width: 1%; white-space: nowrap; padding: 6px 8px; vertical-align: middle; }
.dtab tr.chg td:not(.time) { background: #FFFBEB; }
.dtab tr.addrow td { padding: 4px 8px; }
.dtab .ci { display: block; line-height: 1.7; }
.dtab .ci.gone { color: var(--ink); text-decoration: line-through; }
.dtab .ci.diff { font-weight: 600; }
.dtab td.st { width: 1%; white-space: nowrap; }
.skipday { display: flex; align-items: center; gap: var(--sp-16); }
.leaf { width: 76px; flex: none; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--md3-outline-variant); background: var(--white); }
.leaf > :first-child { width: 100%; text-align: center; background: var(--md3-on-primary-container); color: var(--white); padding: 3px 0; }
.leaf .d { font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--head); }
.leaf > :last-child { color: var(--ink); padding-bottom: 6px; }
.curdiet .linkbtn, .alert .linkbtn, .rnote .linkbtn { min-height: 0; }
.files { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-4); }
.file { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--md3-surface-variant); background: var(--white); color: var(--md3-on-primary-container); }

/* ---------- new request ---------- */
.kopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.kopts .prio { flex-direction: column; min-height: 112px; }
.kopts .prio .ki { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.cbrow { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px; color: var(--head); justify-self: start; }
.cbrow .app-icon { color: var(--md3-on-primary-container); }
.port .prisel { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- sheets: bottom sheet in portrait, centred in landscape ---------- */
.land .scrim { align-items: center; }
.land .sheet { border-radius: 16px; max-height: 90%; }
.land .sheet .grab { display: none; }
.sheet .opts { display: grid; gap: var(--sp-8); }
.sheet .srch { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-radius: 8px; background: var(--neutral05); color: var(--md3-neutral-secondary); }
.sheet .srch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--head); font: inherit; }
.sheet .dp .ic { width: 40px; height: 40px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.qty { display: flex; align-items: center; gap: var(--sp-8); }
.qty input { width: 140px; text-align: center; }
.qbtn { width: 48px; height: 48px; flex: none; border-radius: 8px; border: 1px solid var(--md3-outline-variant); display: grid; place-items: center; color: var(--md3-on-primary-container); background: var(--white); }
.qty select { width: 96px; }

/* ---------- request page, cleaned: the hero leads with the request, one table, one activity list ---------- */
.dhero { gap: var(--sp-8); }
.dhero__k { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75); }
.dhero__t { color: var(--white); padding-right: 72px; }
.dhero__meta { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.9); }
.dhero__who { margin-top: var(--sp-8); }
.wcard .wh { align-items: flex-start; }
.wcard .wh h2 + p { margin-top: 2px; }
.dtab.cmp td { vertical-align: middle; }
.dtab.cmp td.time { vertical-align: top; }
.dtab .ft { display: block; margin-top: 2px; color: var(--md3-neutral-secondary); font-weight: 400; font-size: 13px; }
.dtab.cmp b { font-weight: 600; color: var(--head); }
.dtab .kst { margin-left: 6px; height: 24px; }
.rqd__foot .now b.cs.ok, .rqd__foot .now b.cs.done { color: var(--md3-on-surface); }
.rqd__foot .now b.cs.bad { color: var(--md3-error); }
.rqd__foot .now b.cs.none { color: var(--ink); }
/* activity: events on a thin line, comments as bubbles */
.alog { list-style: none; display: grid; gap: var(--sp-12); }
.alog .ae { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
.alog .ae .dot { width: 10px; height: 10px; margin: 6px 0 0 15px; border-radius: 50%; background: var(--md3-outline-variant); }
.alog .ae .dot.approved { background: var(--md3-primary); } .alog .ae .dot.delayed { background: var(--md3-moderate-secondary); } .alog .ae .dot.rejected { background: var(--md3-error); }
.alog .ae small { color: var(--md3-neutral-secondary); }
.alog .ac { display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
.alog .ac .bub { justify-self: start; max-width: 100%; background: var(--md3-background); border-radius: 0 12px 12px 12px; padding: 10px 12px; color: var(--head); }
.alog .ac.me .bub { background: var(--md3-displaybg-primary); }
.alog .ac .meta { color: var(--md3-neutral-secondary); font-size: 12px; margin-bottom: 4px; }