/* ============================================================
   KITCHEN FEED — rotating live view
   Inherits the Glisco design tokens from style.css.
   Load AFTER assets/css/style.css.
============================================================ */

/* ─── INTRO COPY ─── */
.kf-intro { max-width:600px; }
.kf-intro p + p { margin-top:20px; }
.kf-claim {
  font-family:'Syne',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  padding-left:16px; border-left:2px solid var(--saffron); line-height:1.7;
}

/* ─── CARD ───
   Deliberately small. The source is 640x360, so 400px shows at roughly
   two-thirds scale: enough to see a kitchen working, not enough to study a
   face or read a label. Fullscreen and picture-in-picture are disabled to
   match, and the whole card is capped rather than fluid. */
.kf-card {
  width:400px; max-width:100%; margin:40px 0 0; padding:0;
  background:#fff; border:1px solid var(--border); border-top:3px solid var(--saffron);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:box-shadow .3s ease;
}
.kf-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.07); }

.kf-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--bgdark); }
.kf-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s ease; pointer-events:none;
}
.kf-video.on { opacity:1; }
.kf-video::-webkit-media-controls { display:none !important; }

/* ─── OVERLAY (replaces the picture; never sits over a live one) ─── */
.kf-overlay {
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:12px; padding:24px; text-align:center; background:var(--bgdark);
  opacity:1; transition:opacity .35s ease;
}
[data-state="live"] .kf-overlay { opacity:0; pointer-events:none; }
.kf-msg { font-family:'Syne',sans-serif; font-size:.68rem; font-weight:600;
  letter-spacing:.05em; line-height:1.65; color:rgba(255,255,255,.66); max-width:28ch; }
.kf-spinner { width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.15); border-top-color:var(--turmeric);
  animation:kf-spin .8s linear infinite; }
[data-state="down"] .kf-spinner { display:none; }
@keyframes kf-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .kf-spinner { animation:none; }
  .kf-video { transition:none; }
}

/* ─── STATUS TABLE ───
   Below the frame, never on it: the cameras stamp the time top-left and their
   own name top-right, and covering those removes the evidence it is live. */
.kf-table { display:grid; grid-template-columns:auto 1fr auto; border-top:1px solid var(--border); }
.kf-cell { padding:11px 14px; min-width:0; }
.kf-cell + .kf-cell { border-left:1px solid var(--border); }
.kf-th {
  display:block; font-family:'Syne',sans-serif; font-size:.53rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); margin-bottom:5px;
}
.kf-td {
  display:flex; align-items:center; gap:7px;
  font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kf-view { font-family:'DM Sans',sans-serif; font-weight:400; color:var(--ink2); letter-spacing:0; }

.kf-status em { font-style:normal; }
.kf-status i { width:6px; height:6px; border-radius:50%; background:var(--ink3); flex-shrink:0; }
[data-state="live"] .kf-status { color:var(--chili); }
[data-state="live"] .kf-status i { background:var(--chili); animation:kf-pulse 2s ease-in-out infinite; }
[data-state="down"] .kf-status { color:var(--ink3); }
@keyframes kf-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@media (prefers-reduced-motion:reduce) { .kf-status i { animation:none; } }

/* ─── EVERYTHING AT ONCE ───
   Under the card: the whole operation, not the one camera. It carries the page
   when the kitchen on screen happens to be quiet. */
.kf-total {
  max-width:400px; margin:16px 0 0;
  font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.01em; line-height:1.5; color:var(--ink);
}

/* ─── FOOTNOTE UNDER THE CARD ───
   The outage caveat only matters once you are looking at a feed, so it sits
   under the card rather than in the intro. Card width, so the column edge
   stays clean. */
.kf-note {
  max-width:400px; margin:8px 0 0;
  font-family:'DM Sans',sans-serif; font-size:.66rem; font-weight:300;
  line-height:1.6; color:var(--ink3);
}

/* ─── LIVE ORDER COUNT ───
   Sits below the table, in the card's own voice: a line of type, not a badge.
   It is a statement about the kitchen, not a label on the picture -- the camera
   shows one corner, and a figure pinned to the frame invites a viewer to count
   what is on screen and conclude it does not match.
   Hidden entirely when the data is missing or stale; see kitchen-feed.js. */
/* Floor the height rather than let content set it: the card swaps kitchens every
   10s, and a line that wrapped on one camera but not the next would make the card
   grow and shove the page around mid-rotation. Every copy variant is one line
   down to 320px -- verified across all six states -- so this is the natural
   height, kept as a floor in case the wording ever grows. */
.kf-orders {
  padding:12px 14px; border-top:1px solid var(--border);
  min-height:62px; box-sizing:border-box;
}
.kf-orders-head {
  margin:0; font-family:'Syne',sans-serif; font-size:.76rem; font-weight:700;
  letter-spacing:.02em; line-height:1.45; color:var(--ink);
}
.kf-orders-sub {
  margin:3px 0 0; font-family:'DM Sans',sans-serif; font-size:.67rem;
  font-weight:300; line-height:1.55; color:var(--ink3);
}

/* ─── ACTION ─── */
.kf-shuffle {
  display:block; width:100%; padding:14px 16px;
  border:0; border-top:1px solid var(--border); background:transparent;
  font-family:'Syne',sans-serif; font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); cursor:none;
  transition:background .2s, color .2s;
}
.kf-shuffle:hover { background:var(--saffron); color:#fff; }
@media (pointer:coarse) { .kf-shuffle { cursor:pointer; } }


@media (max-width:480px) {
  .kf-table { grid-template-columns:1fr 1fr; }
  .kf-cell:first-child { grid-column:1 / -1; border-bottom:1px solid var(--border); }
  .kf-cell:nth-child(2) { border-left:0; }
}