/* =========================================================
   CareOS — Components
   Motion philosophy:
     • Hover/press/focus/toggle    -> fast (80–200ms)
     • Reveal/sort/filter/expand   -> medium (280–420ms)
     • Entrance/route/showcase     -> cinematic (720–1600ms)
   ========================================================= */

/* ---------- Buttons ---------- */
.btn {
  --bg-btn: var(--ink);
  --fg-btn: var(--bone-50);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  background: var(--bg-btn);
  color: var(--fg-btn);
  border: 1px solid var(--bg-btn);
  border-radius: var(--r-3);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out-expo),
    color var(--t-fast) var(--ease-out-expo),
    transform var(--t-fast) var(--ease-out-expo),
    box-shadow var(--t-fast) var(--ease-out-expo),
    border-color var(--t-fast) var(--ease-out-expo);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); transition-duration: var(--t-instant); }
.btn:focus-visible { outline: 2px solid var(--sage-400); outline-offset: 2px; }

.btn .arrow {
  display: inline-block;
  transition: transform var(--t-quick) var(--ease-out-expo);
}
.btn:hover .arrow { transform: translateX(3px); }

.btn--secondary {
  --bg-btn: transparent; --fg-btn: var(--ink);
  border-color: var(--line-strong);
}
.btn--secondary:hover { background: var(--surface-2); border-color: var(--ink); }

.btn--ghost {
  --bg-btn: transparent; --fg-btn: var(--text-soft);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn--sage {
  --bg-btn: var(--sage-600); --fg-btn: var(--bone-50);
  border-color: var(--sage-600);
}
.btn--sage:hover { background: var(--sage-700); border-color: var(--sage-700); }

.btn--sm { padding: 6px 10px; font-size: var(--fs-xs); }
.btn--lg { padding: 14px 22px; font-size: var(--fs-md); border-radius: var(--r-4); }

/* ---------- Inputs ---------- */
.field {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
}
.field label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--muted);
}
.input, .select, .textarea {
  font-family: var(--font-ui); font-size: var(--fs-base);
  background: var(--bone-50);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--r-3);
  transition:
    border-color var(--t-fast) var(--ease-out-expo),
    box-shadow var(--t-fast) var(--ease-out-expo),
    background var(--t-fast) var(--ease-out-expo);
}
.input:hover, .select:hover { border-color: var(--bone-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--sage-300) 45%, transparent);
}
.input::placeholder { color: var(--bone-500); }

/* Search ↗ icon affordance */
.search {
  position: relative; width: 100%;
}
.search .input { padding-left: 36px; }
.search::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 14px; height: 14px; transform: translateY(-50%);
  border: 1.5px solid var(--bone-500); border-radius: 50%;
}
.search::after {
  content: ""; position: absolute; left: 22px; top: 22px;
  width: 7px; height: 1.5px; background: var(--bone-500); transform: rotate(45deg);
}

/* ---------- Toggle ---------- */
.toggle {
  --w: 36px; --h: 20px;
  position: relative; display: inline-block;
  width: var(--w); height: var(--h);
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track {
  position: absolute; inset: 0;
  background: var(--bone-300); border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease-out-expo);
}
.toggle .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--bone-50); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15,18,24,0.18);
  transition: transform var(--t-quick) var(--ease-out-expo);
}
.toggle input:checked + .track { background: var(--sage-600); }
.toggle input:checked + .track + .thumb { transform: translateX(16px); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--line);
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: 0.7;
}
.badge--live { color: var(--sage-700); background: var(--sage-50); border-color: var(--sage-200); }
.badge--live::before { background: var(--sage-500); animation: livePulse 1.8s var(--ease-out-expo) infinite; }
.badge--critical { color: var(--coral-600); background: oklch(96% 0.025 30); border-color: oklch(88% 0.05 30); }
.badge--caution  { color: oklch(45% 0.10 75); background: oklch(96% 0.04 75); border-color: oklch(88% 0.06 75); }
.badge--off { color: var(--plum-500); background: oklch(96% 0.012 320); border-color: oklch(90% 0.02 320); }

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--sage-500) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Avatar ---------- */
.av {
  --d: 32px;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  background: var(--bone-200); color: var(--bone-800);
  border: 1px solid var(--line);
  letter-spacing: -0.02em;
}
.av--lg { --d: 48px; font-size: 14px; }

.av-stack { display: inline-flex; }
.av-stack .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); }
.av-stack .av:first-child { margin-left: 0; }

/* ---------- Stat ---------- */
.stat {
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform var(--t-base) var(--ease-out-expo), border-color var(--t-base) var(--ease-out-expo);
}
.stat:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.stat .stat-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--muted); }
.stat .stat-value { font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: var(--tr-display); color: var(--ink); }
.stat .stat-delta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--sage-700); }
.stat .stat-delta.down { color: var(--coral-600); }

/* ---------- Shift cell (rostering primitive) ---------- */
.shift {
  position: relative;
  padding: 10px 12px;
  border-radius: var(--r-3);
  background: var(--bone-100);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bone-400);
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-sm);
  cursor: grab;
  transition:
    background var(--t-fast) var(--ease-out-expo),
    border-color var(--t-fast) var(--ease-out-expo),
    transform var(--t-fast) var(--ease-out-expo),
    box-shadow var(--t-base) var(--ease-out-expo);
}
.shift:hover { background: var(--bone-50); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.shift:active { cursor: grabbing; }
.shift .shift-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.shift .shift-who  { font-weight: 500; letter-spacing: -0.01em; }
.shift--day   { border-left-color: var(--sage-500); }
.shift--night { border-left-color: var(--plum-400); background: oklch(96% 0.01 320); }
.shift--oncall { border-left-color: var(--amber-500); background: oklch(97% 0.025 75); }
.shift--conflict { border-left-color: var(--coral-500); background: oklch(97% 0.02 30); }
.shift--open {
  background: repeating-linear-gradient(135deg, var(--bone-100) 0 6px, var(--bone-200) 6px 12px);
  border-style: dashed; color: var(--muted);
}

/* ---------- Table ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tbl th, .tbl td {
  text-align: left;
  padding: 12px var(--s-5);
  border-bottom: 1px solid var(--line);
}
.tbl th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--muted);
  font-weight: 500;
}
.tbl tbody tr {
  transition: background var(--t-fast) var(--ease-out-expo);
}
.tbl tbody tr:hover { background: var(--surface-2); }

/* ---------- Tabs ---------- */
.tabs {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.tabs button {
  font-family: var(--font-ui); font-size: var(--fs-sm);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: transparent; border: 0; color: var(--text-soft);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out-expo), background var(--t-fast) var(--ease-out-expo);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

/* ---------- Progress / Ring ---------- */
.ring {
  --p: 72;
  width: 56px; height: 56px;
  border-radius: 50%;
  background:
    conic-gradient(var(--sage-500) calc(var(--p) * 1%), var(--bone-200) 0);
  display: grid; place-items: center;
  position: relative;
}
.ring::before {
  content: ""; position: absolute; inset: 4px;
  background: var(--bg); border-radius: 50%;
}
.ring span {
  position: relative;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em;
}

/* ---------- Divider ---------- */
.hr { height: 1px; background: var(--line); border: 0; margin: var(--s-7) 0; }
.hr--dashed { background: transparent; border-top: 1px dashed var(--line); }

/* ---------- Kbd ---------- */
.kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--r-2);
  color: var(--text-soft);
}