/* Brand v1.6 P3 — CANONICAL COMPONENT LAYER (.c-*). One tokenized control per family, shared by
   the app, admin, and (build-time synced, Phase 4) mobile. Authored ONLY against tokens.css
   component tokens + the alias shim below (the three surfaces speak divergent semantic dialects —
   never reference one surface's semantics directly). Linked AFTER /tokens.css and BEFORE each
   surface's local <style> so local rules win during migration. The brand lint scans this file:
   radii must be var(--radius-*)/50%/0; no raw hex beyond white/black; 0.5px/2px borders;
   font-weight 400/500; no fill gradients. Spec: brand guidelines §02b (the authority). */

/* ---- alias shim: resolve per-surface semantics with cross-dialect fallbacks (app --surface/--text, admin --bg-surface/--text-primary, mobile --card/--ink; v1.6 P3 Phase 4 added the mobile chain) ---- */
:root{
  --c-surface:var(--surface, var(--bg-surface, var(--card, #fff)));
  --c-surface2:var(--surface2, var(--bg-sunken, var(--field, var(--slate-50))));
  --c-border:var(--border, var(--hair, var(--slate-200)));
  --c-border2:var(--border2, var(--border-strong, var(--hair2, var(--slate-300))));
  --c-text:var(--text, var(--text-primary, var(--ink, var(--slate-900))));
  --c-text2:var(--text2, var(--text-secondary, var(--ink2, var(--slate-600))));
  --c-text3:var(--text3, var(--text-tertiary, var(--ink3, var(--slate-600))));
  --c-font:var(--font, var(--font-sans, 'Inter', system-ui, sans-serif));
}

/* ---- BUTTON ---- */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-h);padding:0 13px;border-radius:var(--radius-md);border:var(--control-border-w) solid transparent;background:var(--c-surface2);color:var(--c-text2);font-family:var(--c-font);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,opacity .15s}
.c-btn:hover{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border)}
.c-btn:active{transform:translateY(1px)}
.c-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.c-btn:focus-visible{outline:var(--focus-outline);outline-offset:2px}
.c-btn--primary{background:var(--control-accent);color:var(--slate-900);border-color:transparent}
.c-btn--primary:hover{background:var(--gold-500);color:var(--slate-900);border-color:transparent}
.c-btn--secondary{background:transparent;color:var(--c-text2);border-color:var(--c-border2)}
.c-btn--secondary:hover{background:var(--c-surface2);color:var(--c-text)}
.c-btn--ghost{background:transparent;color:var(--c-text3);border-color:var(--c-border)}
.c-btn--ghost:hover{background:var(--c-surface2);color:var(--c-text2)}
.c-btn--danger{background:transparent;color:var(--red, var(--danger));border-color:var(--red, var(--danger))}
.c-btn--danger:hover{background:var(--red-lt, var(--c-surface2));color:var(--red, var(--danger))}
.c-btn--icon{width:var(--control-h);padding:0}
.c-btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:11px}
.c-btn--sm.c-btn--icon{width:var(--control-h-sm)}
.c-btn--full{width:100%}

/* ---- FIELD (input / textarea / select) ---- */
.c-field{display:block;width:100%;height:var(--control-h);padding:0 10px;border-radius:var(--radius-md);border:var(--control-border-w) solid var(--c-border);background:var(--c-surface);color:var(--c-text);font-family:var(--c-font);font-size:13px;font-weight:400;transition:border-color .15s,box-shadow .15s}
textarea.c-field{height:auto;min-height:calc(var(--control-h)*2);padding:8px 10px;resize:vertical}
.c-field::placeholder{color:var(--deco, var(--slate-400))}
.c-field:focus{outline:none;border-color:var(--control-accent);box-shadow:var(--focus-ring)}
.c-field:disabled{background:var(--c-surface2);color:var(--c-text3);cursor:not-allowed}
.c-field--sm{height:var(--control-h-sm);font-size:12px}
.c-field--invalid{border-color:var(--red, var(--danger))}
.c-field--invalid:focus{border-color:var(--red, var(--danger));box-shadow:none}

/* ---- SWITCH (the one track/knob toggle) ---- */
.c-switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--c-font);font-size:12.5px;font-weight:500;color:var(--c-text)}
.c-switch input{position:absolute;opacity:0;width:0;height:0}
.c-switch .c-switch__track{width:38px;height:22px;border-radius:var(--radius-pill);background:var(--c-border2);transition:background .15s;flex-shrink:0;position:relative}
.c-switch .c-switch__track::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--c-surface);transition:transform .15s}
.c-switch input:checked + .c-switch__track{background:var(--control-accent)}
.c-switch input:checked + .c-switch__track::after{transform:translateX(16px);background:var(--slate-900)}
.c-switch:has(input:focus-visible){outline:var(--focus-outline);outline-offset:2px;border-radius:var(--radius-sm)}
.c-switch:has(input:disabled){opacity:.5;cursor:not-allowed}

/* ---- CHECK / RADIO (custom pair; native accent fallback = var(--control-accent)) ---- */
.c-check,.c-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--c-font);font-size:12.5px;font-weight:400;color:var(--c-text)}
.c-check input,.c-radio input{position:absolute;opacity:0;width:0;height:0}
.c-check .c-check__box{width:16px;height:16px;border-radius:var(--radius-sm);border:var(--control-border-w) solid var(--c-border2);background:var(--c-surface);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.c-radio .c-radio__dot{width:16px;height:16px;border-radius:50%;border:var(--control-border-w) solid var(--c-border2);background:var(--c-surface);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.c-check input:checked + .c-check__box{background:var(--control-accent);border-color:var(--control-accent)}
.c-check input:checked + .c-check__box::after{content:'';width:9px;height:5px;border-left:2px solid var(--slate-900);border-bottom:2px solid var(--slate-900);transform:rotate(-45deg) translate(1px,-1px)}
.c-radio input:checked + .c-radio__dot{border-color:var(--control-accent)}
.c-radio input:checked + .c-radio__dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--control-accent)}
.c-check:has(input:focus-visible),.c-radio:has(input:focus-visible){outline:var(--focus-outline);outline-offset:2px;border-radius:var(--radius-sm)}
.c-check:has(input:disabled),.c-radio:has(input:disabled){opacity:.5;cursor:not-allowed}

/* ---- CHIP / PILL ---- */
.c-chip{display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-pill);background:var(--fill-neutral, var(--c-surface2));color:var(--c-text2);font-family:var(--c-font);font-size:10.5px;font-weight:500;padding:3px 10px;white-space:nowrap}
.c-chip--sm{font-size:9.5px;padding:2px 8px}
.c-chip--ok{background:var(--green-lt, var(--c-surface2));color:var(--green, var(--success))}
.c-chip--warn{background:var(--amber-lt, var(--c-surface2));color:var(--warning-text, var(--c-text2))}
.c-chip--err{background:var(--red-lt, var(--c-surface2));color:var(--red, var(--danger))}
.c-chip--info{background:var(--c-surface2);color:var(--c-text2)}
.c-chip--new{background:var(--teal-50, var(--c-surface2));color:var(--teal-700, var(--c-text2))} /* v1.9 P5: T5 what's-new badge - THE canonical teal badge */
.c-chip--count{min-width:16px;height:16px;padding:0 5px;justify-content:center;font-size:9.5px;background:var(--red, var(--danger));color:var(--slate-50)}
/* --stage: the SHELL only — stage fills/inks come from STAGE_COLORS via inline style (parity-pinned) */
.c-chip--stage{font-size:9.5px;font-weight:500;padding:2px 8px;border-radius:var(--radius-lg)}

/* ---- FILTER CHIP (selectable) ---- */
.c-fchip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-pill);border:var(--control-border-w) solid var(--c-border2);background:var(--c-surface);color:var(--c-text2);font-family:var(--c-font);font-size:11px;font-weight:500;padding:4px 11px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.c-fchip:hover{border-color:var(--control-accent);color:var(--c-text)}
.c-fchip:focus-visible{outline:var(--focus-outline);outline-offset:2px}
.c-fchip.is-on{background:var(--c-text);color:var(--c-surface);border-color:var(--c-text)}

/* ---- SEGMENTED (sliding-indicator; geometry via CSS vars set by JS: --seg-n, --seg-i) ---- */
.c-seg{position:relative;display:inline-flex;background:var(--c-surface2);border:var(--control-border-w) solid var(--c-border);border-radius:var(--radius-pill);padding:2px}
.c-seg::before{content:'';position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/var(--seg-n,2));border-radius:var(--radius-pill);background:var(--c-surface);border:var(--control-border-w) solid var(--c-border);transform:translateX(calc(var(--seg-i,0)*100%));transition:transform .18s}
@media (prefers-reduced-motion:reduce){.c-seg::before{transition:none}}
.c-seg .c-seg__btn{position:relative;z-index:1;border:none;background:none;color:var(--c-text3);font-family:var(--c-font);font-size:11.5px;font-weight:500;padding:4px 12px;border-radius:var(--radius-pill);cursor:pointer}
.c-seg .c-seg__btn.is-active{color:var(--c-text)}
.c-seg .c-seg__btn:focus-visible{outline:var(--focus-outline);outline-offset:-2px}

/* ---- TAB (underline) ---- */
.c-tab{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-lg);padding:0 13px;border:none;border-bottom:var(--control-border-w-active) solid transparent;background:none;color:var(--c-text3);font-family:var(--c-font);font-size:12.5px;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s}
.c-tab:hover{color:var(--c-text2);background:var(--c-surface2)}
.c-tab:focus-visible{outline:var(--focus-outline);outline-offset:-2px}
.c-tab.is-active,.c-tab[aria-selected="true"]{color:var(--c-text);border-bottom-color:var(--control-accent)}
.c-tab--compact{height:var(--control-h);font-size:12px;padding:0 11px}

/* ---- MENU / POPOVER ---- */
.c-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--c-surface);border:var(--control-border-w) solid var(--c-border);border-radius:var(--radius-lg);padding:5px;z-index:2000;display:none}
.c-menu.is-open{display:block}
.c-menu--fixed{position:fixed;top:auto;right:auto}
.c-menu__item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:none;border-radius:var(--radius-sm);color:var(--c-text);font-family:var(--c-font);font-size:12.5px;font-weight:400;text-align:left;cursor:pointer}
.c-menu__item:hover,.c-menu__item.is-focus{background:var(--c-surface2)}
.c-menu__item:focus-visible{outline:var(--focus-outline);outline-offset:-2px}
.c-menu__sep{height:1px;background:var(--c-border);margin:5px 2px;border:none}
.c-menu__section{font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--c-text3);padding:7px 10px 3px}

/* ---- mobile hit-target floor ---- */
@media (max-width:640px){
  .c-btn,.c-field,.c-tab--compact{min-height:var(--control-h-lg)}
  .c-fchip,.c-seg .c-seg__btn{min-height:40px}
}