/* ============================================================
   Resto OS, APPLIED SYSTEM  (Apple design language, our palette)
   Sits on rg-theme.css + rg-components.css.
   Direction: Apple. Pill CTAs + ghost-pill secondary, FLAT hairline
   chrome (no decorative shadows), 17px body with editorial leading,
   negative-tracking weight-700 headings, big 18px radii, pill search,
   scale(0.95) press, conic comet loader. Typeface stays Satoshi and
   the palette stays Petrol Blue (the two brand locks). Money is tabular,
   data is row-based, and primary actions live in the page head, never
   in the top-right utility corner.
   ============================================================ */

:root {
  --ctrl-radius: 999px;     /* Apple pill CTAs */
  --ctrl-h: 44px; --ctrl-h-sm: 34px; --ctrl-px: 22px;
  --radius: 18px;           /* Apple utility-card radius */
  --radius-md: 12px; --radius-sm: 9px;
}

/* Apple reads body at 17px with generous leading */
body { font-size: 17px; line-height: 1.47; }

/* ---- Flat chrome: no decorative shadows. Hairline + radius do the work. ---- */
.card { box-shadow: none; border: 1px solid var(--hairline); border-radius: var(--radius); }
[data-theme="dark"] .card { box-shadow: none; }
.card-head { padding: 22px 26px 6px; border-bottom: none; }
.card-body { padding: 20px 26px 26px; }
.card-body.flush { padding: 0; }
.rg-metric { box-shadow: none; }

/* ---- Headlines: Satoshi 700 (Apple sits at 600; 700 is the nearest weight),
   tight tracking. Not the 900 display weight. ---- */
.page-head h1 { font-weight: 700; letter-spacing: -0.022em; }
.card-head h3 { font-weight: 700; letter-spacing: -0.01em; font-size: 17px; }

/* ---- Buttons: full pill, scale press, no shadow. Primary navy filled,
   secondary ghost pill (single navy accent carries every action). ---- */
.btn { border-radius: 999px; box-shadow: none; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn:active { transform: scale(.95); }
.btn-primary { box-shadow: none; }
.btn-secondary { background: transparent; border-color: var(--navy); color: var(--navy); }
[data-theme="dark"] .btn-secondary { border-color: var(--accent-line); color: var(--accent-ink); }
.btn-ghost { border-radius: 999px; }

/* ---- Inputs: soft rect; search is a pill (Apple search) ---- */
.input, .select, .textarea { border-radius: 12px; }
.search .input { border-radius: 999px; padding-left: 42px; }
.nav-item { border-radius: 999px; }

/* ---- Money / data: tabular figures, roomy Apple rows ---- */
table.data td, table.data td.num, .rg-metric .v, .tnum { font-variant-numeric: tabular-nums; }
table.data td { padding: 15px 16px; }
table.data th { padding: 12px 16px; }

/* ---- Entrance motion: gentle fade-up, stagger via --i ---- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(12px); animation: rise .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i,0) * 55ms); }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- Conic comet loader (Apple) ---- */
.spinner { width: 28px; height: 28px; border-radius: 50%; border: none; background: conic-gradient(from 90deg, transparent 8%, var(--navy)); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0); mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0); animation: rg-spin .9s linear infinite; flex: none; }
[data-theme="dark"] .spinner { background: conic-gradient(from 90deg, transparent 8%, #ffffff); }
.spinner.sm { width: 18px; height: 18px; }
@keyframes rg-spin { to { transform: rotate(360deg); } }

/* ---- Slide-over (sheets may carry elevation; chrome may not) ---- */
.scrim { position: fixed; inset: 0; background: rgba(7,22,31,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 80; }
.scrim.open { opacity: 1; pointer-events: auto; }
.slideover { position: fixed; top: 0; right: 0; height: 100vh; width: min(540px, 94vw); background: var(--surface); border-left: 1px solid var(--hairline); box-shadow: 0 0 60px -20px rgba(7,22,31,.4); transform: translateX(100%); transition: transform .4s cubic-bezier(.32,.72,0,1); z-index: 81; overflow-y: auto; }
.slideover.open { transform: none; }
.slideover-head { position: sticky; top: 0; background: var(--surface); display: flex; align-items: center; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--hairline); z-index: 1; }
.slideover-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink-strong); }
.slideover-head .x { margin-left: auto; }
.slideover-body { padding: 20px 24px 30px; }

/* ---- Kanban board (work orders): flat cards, Apple hairline + lift, no shadow ---- */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .board { grid-template-columns: repeat(2, 1fr); } }
.col { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px; min-height: 120px; transition: outline .2s var(--ease), background .2s var(--ease); }
.col.drop { outline: 2px dashed var(--accent-line); outline-offset: -4px; background: var(--accent-soft); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; font-size: 13px; font-weight: 700; color: var(--ink-strong); }
.col-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.col-head .ct { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 8px; }
.wo { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 13px; cursor: grab; box-shadow: none; transition: border-color .18s var(--ease), transform .15s var(--ease); }
.wo:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.wo.dragging { opacity: .55; border-color: var(--accent-line); cursor: grabbing; }
.wo + .wo { margin-top: 10px; }

/* ---- Recipe card grid (kept available; flat) ---- */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 16px; }
.recipe { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: none; transition: transform .25s var(--ease), border-color .25s var(--ease); }
.recipe:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.recipe .band { height: 90px; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px; background: linear-gradient(135deg, var(--surface-2), var(--bg-2)); border-bottom: 1px solid var(--hairline); }

/* ---- Food-cost badge (status by threshold) ---- */
.cost { font-weight: 700; font-variant-numeric: tabular-nums; }
.cost.good { color: var(--green); } .cost.warn { color: var(--amber); } .cost.bad { color: var(--red); }
.costpill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; border: 1px solid var(--hairline-2); }
.costpill.good { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
.costpill.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--sev-warn-tint); }
.costpill.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--sev-crit-tint); }

/* ---- Priority tag ---- */
.prio { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.prio.high { color: var(--red); background: var(--sev-crit-tint); border: 1px solid var(--sev-crit-line); }
.prio.med { color: var(--amber); background: var(--sev-warn-tint); border: 1px solid var(--sev-warn-line); }
.prio.low { color: var(--ink-dim); background: var(--surface-2); border: 1px solid var(--hairline-2); }

/* ---- small avatar ---- */
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--steel); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
[data-theme="dark"] .av { background: var(--ice); color: var(--navy-deep); }