/* Hacppify html3 — shared component layer on top of Tailwind CDN.
   Design goal: idiot-proof kitchen UI. Big targets, instant color feedback,
   zero typing on staff paths. See ../DESIGN.md */

:root {
  --ink: #14140f;
  --ink2: #44443c;
  --muted: #8a897f;
  --line: #e7e5dc;
  --paper: #f6f5f1;
  --brand: #0b6b5b;
  --brand-soft: #e3efeb;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --bad: #b91c1c;
  --bad-soft: #fee2e2;
  --spec: #1d4ed8;
  --spec-soft: #dbeafe;
}

body { font-family: 'Noto Sans Georgian', system-ui, sans-serif; background: var(--paper); color: var(--ink); }

/* prototype bar (matches v3 convention, labelled html3) */
.proto { background:#fff8e6; border-bottom:1px solid #f2e5ba; padding:7px 16px; font-size:11px; color:#6b5215; display:flex; align-items:center; gap:14px; font-family:ui-monospace,monospace; }
.proto a { color:#6b5215; text-decoration:none; }
.proto a:hover { text-decoration:underline; }

/* cards */
.h3-card { background:#fff; border:1px solid var(--line); border-radius:18px; }

/* buttons — nothing tappable under 56px on staff pages */
.h3-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 22px; border-radius:16px; font-weight:700; font-size:17px; border:1px solid transparent; cursor:pointer; transition:transform .06s, background .12s; user-select:none; }
.h3-btn:active { transform:scale(.97); }
.h3-btn-primary { background:var(--brand); color:#fff; }
.h3-btn-primary:hover { background:#08594a; }
.h3-btn-ok { background:var(--ok); color:#fff; }
.h3-btn-bad { background:var(--bad); color:#fff; }
.h3-btn-ghost { background:#fff; border-color:var(--line); color:var(--ink); }
.h3-btn-ghost:hover { background:var(--paper); }
.h3-btn-xl { min-height:72px; font-size:20px; border-radius:20px; }

/* selectable chips (answers, dishes, reasons) */
.h3-chip { display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 18px; border-radius:999px; border:2px solid var(--line); background:#fff; font-size:16px; font-weight:600; cursor:pointer; transition:all .12s; user-select:none; }
.h3-chip:hover { border-color:#cfcdc2; }
.h3-chip.on { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }

/* status chips (read-only) */
.h3-status { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:700; }
.h3-status-ok { background:var(--ok-soft); color:var(--ok); }
.h3-status-warn { background:var(--warn-soft); color:var(--warn); }
.h3-status-bad { background:var(--bad-soft); color:var(--bad); }
.h3-status-spec { background:var(--spec-soft); color:var(--spec); }
.h3-status-muted { background:#eeede7; color:var(--muted); }

/* legal-honesty tags */
.h3-tag-legal { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:6px; font-size:11.5px; font-weight:700; letter-spacing:.02em; background:var(--ink); color:#fff; }
.h3-tag-rec { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:6px; font-size:11.5px; font-weight:700; letter-spacing:.02em; background:#eeede7; color:var(--ink2); border:1px solid var(--line); }

/* legal banner */
.h3-banner { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:12px; padding:14px 16px; font-size:13.5px; color:var(--ink2); line-height:1.55; }

/* giant stepper */
.h3-stepper { display:flex; align-items:center; gap:8px; }
.h3-stepper button { width:64px; height:64px; border-radius:18px; border:2px solid var(--line); background:#fff; font-size:30px; font-weight:800; color:var(--ink); cursor:pointer; transition:all .1s; flex-shrink:0; }
.h3-stepper button:active { transform:scale(.94); background:var(--paper); }
.h3-stepper .val { min-width:110px; text-align:center; font-size:40px; font-weight:800; font-variant-numeric:tabular-nums; }
.h3-stepper .val.ok { color:var(--ok); }
.h3-stepper .val.bad { color:var(--bad); }

/* full-width toggle rows for checklists: label + ✓ / ✗ buttons */
.h3-toggle-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:#fff; }
.h3-toggle-row:last-child { border-bottom:0; }
.h3-toggle-row .lbl { flex:1; font-size:17px; font-weight:600; line-height:1.4; }
.h3-toggle-row .yn { display:flex; gap:8px; flex-shrink:0; }
.h3-toggle-row .yn button { width:58px; height:58px; border-radius:16px; border:2px solid var(--line); background:#fff; font-size:24px; cursor:pointer; transition:all .1s; }
.h3-toggle-row .yn button:active { transform:scale(.94); }
.h3-toggle-row.is-ok { background:linear-gradient(0deg,var(--ok-soft),var(--ok-soft)); }
.h3-toggle-row.is-ok .yes { background:var(--ok); border-color:var(--ok); color:#fff; }
.h3-toggle-row.is-bad { background:linear-gradient(0deg,var(--bad-soft),var(--bad-soft)); }
.h3-toggle-row.is-bad .no { background:var(--bad); border-color:var(--bad); color:#fff; }

/* person tile (PIN switch screen, team page) */
.h3-person { display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 12px; border-radius:20px; border:2px solid var(--line); background:#fff; cursor:pointer; transition:all .12s; }
.h3-person:hover { border-color:var(--brand); }
.h3-person .ava { width:64px; height:64px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; background:var(--brand-soft); color:var(--brand); }
.h3-person .nm { font-weight:700; font-size:16px; }
.h3-person .rl { font-size:12.5px; color:var(--muted); }

/* PIN pad */
.h3-pinpad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:300px; margin:0 auto; }
.h3-pinpad button { height:72px; border-radius:18px; border:1px solid var(--line); background:#fff; font-size:26px; font-weight:700; cursor:pointer; transition:all .1s; }
.h3-pinpad button:active { transform:scale(.94); background:var(--paper); }
.h3-pindots { display:flex; gap:14px; justify-content:center; margin:18px 0; }
.h3-pindots span { width:16px; height:16px; border-radius:999px; border:2px solid var(--line); background:#fff; }
.h3-pindots span.full { background:var(--brand); border-color:var(--brand); }

/* collaboration feed */
.h3-feed { display:flex; flex-direction:column; gap:14px; }
.h3-msg { max-width:78%; border-radius:16px; padding:12px 15px; font-size:14.5px; line-height:1.55; }
.h3-msg .who { font-size:11.5px; font-weight:700; margin-bottom:3px; opacity:.75; }
.h3-msg-owner { align-self:flex-end; background:var(--brand-soft); border:1px solid #cfe3dd; }
.h3-msg-spec { align-self:flex-start; background:var(--spec-soft); border:1px solid #c6d8f7; }
.h3-msg-event { align-self:center; background:#fff; border:1px dashed var(--line); font-size:12.5px; color:var(--muted); padding:6px 14px; border-radius:999px; }
.h3-finding { align-self:stretch; background:#fff; border:1px solid var(--line); border-left:4px solid var(--warn); border-radius:14px; padding:14px 16px; }
.h3-finding.sev-high { border-left-color:var(--bad); }
.h3-finding.done { border-left-color:var(--ok); opacity:.75; }

/* task cards on staff today */
.h3-task { display:flex; align-items:center; gap:14px; padding:18px; border-radius:20px; border:2px solid var(--line); background:#fff; cursor:pointer; transition:all .12s; }
.h3-task:hover { border-color:#cfcdc2; }
.h3-task .emo { font-size:34px; width:52px; text-align:center; flex-shrink:0; }
.h3-task .t { flex:1; min-width:0; }
.h3-task .t .nm { font-size:18px; font-weight:800; }
.h3-task .t .meta { font-size:13px; color:var(--muted); margin-top:2px; }
.h3-task.done { border-color:var(--ok); background:var(--ok-soft); }
.h3-task.overdue { border-color:var(--bad); background:var(--bad-soft); }

/* offline indicator */
.h3-net { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ok); }
.h3-net::before { content:''; width:8px; height:8px; border-radius:999px; background:var(--ok); }
.h3-net.off { color:var(--warn); }
.h3-net.off::before { background:var(--warn); animation:h3blink 1.2s infinite; }
@keyframes h3blink { 50% { opacity:.3; } }

/* toast */
#h3-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 22px; border-radius:14px; font-size:15px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s; z-index:90; max-width:92vw; text-align:center; }
#h3-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* inspection-pack print ledger */
.h3-ledger { width:100%; border-collapse:collapse; font-size:12.5px; }
.h3-ledger th, .h3-ledger td { border:1px solid #bbb; padding:6px 8px; text-align:left; }
.h3-ledger th { background:#f0efe9; font-weight:700; }
@media print {
  .no-print, .proto { display:none !important; }
  body { background:#fff; }
  .print-page { box-shadow:none !important; border:none !important; margin:0 !important; width:100% !important; }
}