/* =====================================================================
   Editorial Task Manager — Mini App design system
   Modern Slate · Dark only · Space Grotesk + DM Sans
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:           #0B1220;
  --bg-grad:      radial-gradient(1200px 600px at 100% -10%, rgba(59,130,246,.08), transparent 60%),
                  radial-gradient(900px 500px at -10% 100%, rgba(96,165,250,.05), transparent 60%),
                  #0B1220;
  --surface:      #111827;
  --surface-2:    #1E293B;
  --surface-3:    #243044;
  --hover:        rgba(255,255,255,.04);
  --hover-strong: rgba(255,255,255,.07);

  /* Lines */
  --line:         rgba(255,255,255,.07);
  --line-strong:  rgba(255,255,255,.12);

  /* Text */
  --text:         #E2E8F0;
  --text-strong:  #F1F5F9;
  --muted:        #94A3B8;
  --subtle:       #64748B;

  /* Accent */
  --accent:        #3B82F6;
  --accent-hover:  #60A5FA;
  --accent-soft:   rgba(59,130,246,.14);
  --accent-line:   rgba(59,130,246,.35);
  --ring:          0 0 0 3px rgba(59,130,246,.25);

  /* Status */
  --new:          #3B82F6;
  --new-soft:     rgba(59,130,246,.12);
  --work:         #F59E0B;
  --work-soft:    rgba(245,158,11,.13);
  --done:         #10B981;
  --done-soft:    rgba(16,185,129,.13);
  --important:    #EF4444;
  --important-soft: rgba(239,68,68,.13);
  --extra:        #A78BFA;
  --extra-soft:   rgba(167,139,250,.14);
  --danger:       #F87171;
  --danger-soft:  rgba(248,113,113,.12);

  /* Shape */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(15,23,42,.8);
  --shadow-glow: 0 0 0 1px rgba(59,130,246,.45), 0 8px 28px -10px rgba(59,130,246,.45);

  /* Motion */
  --t-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --t-med:  200ms cubic-bezier(.2,.7,.3,1);

  /* Type */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
  -webkit-text-fill-color: currentColor;
}
*::before,
*::after {
  -webkit-text-fill-color: currentColor;
}
*::selection { background: var(--accent-soft); color: var(--text-strong); }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-grad);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
button { background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { background: transparent; border: 0; outline: 0; }
option {
  background: var(--surface);
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}
a { color: var(--accent-hover); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent); }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

/* hidden attribute must always win over display rules */
[hidden] { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Layout ---------- */
.app {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 14px 14px 40px;
  min-height: 100dvh;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

.app-drawer,
.metric,
.summary,
.today-reset,
.scope-toggle,
.toggle-line,
.highlight-card,
.task,
.meta,
.ai-match,
.load-more,
.empty,
.shifts-view,
.shift-state-group,
.shift-card,
.day,
.day-chip,
.journal-view,
.journal-date,
.journal-metric,
.journal-filter,
.journal-event,
.event-list li,
.user-form,
.shift-form,
.ai-settings-form,
.user-card,
.danger-zone,
.ai-prompt-panel,
.ai-meta-panel,
.task-detail-panel,
.detail-meta {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px 18px;
}
.topbar > div:first-child {
  min-width: 0;
}
.topbar h1 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--subtle);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Icon buttons */
.icon-button,
.admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 17px;
  transition: all var(--t-fast);
  position: relative;
}
.icon-button:hover,
.admin-button:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--line-strong);
}
.icon-button:active { transform: translateY(1px); }
.icon-button.is-active,
.admin-button.is-active {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: var(--accent-line);
}

.archive-picker { cursor: pointer; }
.archive-picker input[type="date"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  color-scheme: dark;
}

/* ---------- Drawer ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 60;
  animation: fadeIn .2s ease;
}
.app-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(320px, 86vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  z-index: 70;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.6);
  animation: slideInRight .22s cubic-bezier(.2,.7,.3,1);
  padding-top: max(18px, env(safe-area-inset-top));
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.drawer-head strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-strong);
  display: block;
  margin-top: 4px;
}
.drawer-close {
  width: 34px; height: 34px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.drawer-link {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  color: #E2E8F0 !important;
  -webkit-text-fill-color: #E2E8F0 !important;
  border: 1px solid transparent;
  transition: all var(--t-fast);
  display: block;
}
.app-drawer .drawer-nav .drawer-link,
.app-drawer .drawer-nav .drawer-link:link,
.app-drawer .drawer-nav .drawer-link:visited,
.app-drawer .drawer-nav .drawer-link:active,
.app-drawer .drawer-nav .drawer-link:focus {
  color: #E2E8F0 !important;
  -webkit-text-fill-color: #E2E8F0 !important;
}
.drawer-link * {
  color: #E2E8F0 !important;
  -webkit-text-fill-color: #E2E8F0 !important;
}
.drawer-link strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.drawer-link:hover {
  background: var(--hover);
  color: #F1F5F9 !important;
  -webkit-text-fill-color: #F1F5F9 !important;
}
.drawer-link.is-active {
  background: var(--accent-soft);
  color: #60A5FA !important;
  -webkit-text-fill-color: #60A5FA !important;
  border-color: var(--accent-line);
}
.drawer-link.is-active,
.drawer-link.is-active * {
  color: #60A5FA !important;
  -webkit-text-fill-color: #60A5FA !important;
}

@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes slideInRight { from {transform: translateX(20px); opacity: 0;} to {transform: translateX(0); opacity: 1;} }

/* ---------- Metrics (status filters) ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 14px 14px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
  transition: all var(--t-fast);
  position: relative;
  overflow: hidden;
}
.metric::before {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--muted);
  opacity: .6;
}
.metric[data-status="new"]::before        { background: var(--new); }
.metric[data-status="in_progress"]::before { background: var(--work); }
.metric[data-status="done"]::before        { background: var(--done); }

.metric:hover { background: var(--surface-2); border-color: var(--line-strong); }
.metric.is-active {
  background: var(--surface-2);
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 4px rgba(59,130,246,.07);
}
.metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.metric-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Summary line ---------- */
.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 8px;
  font-size: 12px;
  color: var(--muted);
}
.summary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
}
.summary-actions span {
  text-align: right;
  font-size: 11px;
  color: var(--subtle);
}
.today-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.today-reset:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--accent-hover); }

/* ---------- Tools (search + scope) ---------- */
.tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: space-between;
}
.tools:has(.search.is-collapsed) {
  display: none;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: all var(--t-fast);
  overflow: hidden;
}
.search:focus-within {
  border-color: var(--accent-line);
  background: var(--surface-2);
  box-shadow: var(--ring);
}
.search input {
  flex: 1;
  width: 100%;
  color: var(--text-strong);
  font-size: 14px;
}
.search input::placeholder { color: var(--subtle); }
.search.is-collapsed {
  flex: 0 0 0;
  padding: 0;
  width: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.scope-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
}

/* Switch (toggle) */
.scope-toggle,
.toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.summary-actions .scope-toggle {
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 12px;
}
.summary-actions .scope-toggle > span {
  color: inherit;
  font-size: 12px;
}
.scope-toggle:hover { border-color: var(--line-strong); }
.scope-toggle.is-disabled { opacity: .5; pointer-events: none; }
.scope-toggle > span {
  white-space: nowrap;
  font-weight: 600;
}
.scope-toggle input,
.toggle-line input { position: absolute; opacity: 0; pointer-events: none; }
.scope-toggle i,
.toggle-line::after {
  content: "";
  display: inline-block;
  width: 32px; height: 18px;
  border-radius: 999px;
  background: var(--surface-3);
  position: relative;
  transition: background var(--t-fast);
  flex: none;
}
.scope-toggle i::before,
.toggle-line::after { box-sizing: border-box; }
.scope-toggle i::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-strong);
  transition: transform var(--t-fast);
}
.summary-actions .scope-toggle i {
  width: 18px;
  height: 18px;
  background: transparent;
  border: 1px solid var(--line-strong);
}
.summary-actions .scope-toggle i::before {
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: transparent;
  transform: translate(-50%, -50%);
}
.scope-toggle:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--surface-2);
}
.scope-toggle:has(input:checked) i { background: var(--accent); }
.scope-toggle:has(input:checked) i::before { transform: translateX(14px); }
.summary-actions .scope-toggle:has(input:checked) {
  color: var(--accent-hover);
}
.summary-actions .scope-toggle:has(input:checked) i::before {
  background: var(--surface);
  transform: translate(-50%, -50%);
}

.toggle-line {
  position: relative;
  padding-right: 50px;
  background: transparent;
  border: 0;
}
.toggle-line::after {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
}
.toggle-line:has(input:checked)::after { background: var(--accent); }
.toggle-line::before {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-strong);
  transform: translate(-16px, -50%);
  transition: transform var(--t-fast);
  z-index: 1;
}
.toggle-line:has(input:checked)::before { transform: translate(0, -50%); }

/* ---------- Highlight cards (Important / Stale) above metrics ---------- */
.dashboard-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.highlight-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}
.highlight-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--line-strong);
  transition: background var(--t-fast);
}
.highlight-card:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.highlight-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
}
.highlight-icon svg { width: 18px; height: 18px; }
.highlight-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.highlight-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.highlight-hint {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.highlight-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  line-height: 1;
  padding-left: 6px;
}

/* tone: important — accent red/orange */
.highlight-card.tone-important { background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.02)); border-color: rgba(239,68,68,.32); }
.highlight-card.tone-important::before { background: #EF4444; }
.highlight-card.tone-important .highlight-icon { background: rgba(239,68,68,.14); color: #FCA5A5; }
.highlight-card.tone-important .highlight-value { color: #FCA5A5; }
.highlight-card.tone-important.is-active { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }

/* tone: warn — stale */
.highlight-card.tone-warn { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02)); border-color: rgba(245,158,11,.32); }
.highlight-card.tone-warn::before { background: #F59E0B; }
.highlight-card.tone-warn .highlight-icon { background: rgba(245,158,11,.14); color: #FCD34D; }
.highlight-card.tone-warn .highlight-value { color: #FCD34D; }
.highlight-card.tone-warn.is-active { background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.55); box-shadow: 0 0 0 3px rgba(245,158,11,.12); }

/* tone: muted — counter is zero */
.highlight-card.tone-muted { opacity: .7; }
.highlight-card.tone-muted::before { background: var(--line); }

/* ---------- Task list ---------- */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task {
  position: relative;
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.task::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--surface-3);
  transition: background var(--t-fast);
}
.task:has(.status.new)::before          { background: var(--new); }
.task:has(.status.in_progress)::before  { background: var(--work); }
.task:has(.status.published)::before    { background: var(--done); }
.task:has(.status.cancelled)::before    { background: var(--subtle); }
.task.is-important::before              { background: var(--important); }

.task:hover { border-color: var(--line-strong); }
.task.is-stale { background: linear-gradient(180deg, var(--surface), rgba(239,68,68,.04)); }
.task.is-carryover-risk { background: linear-gradient(180deg, var(--surface), rgba(245,158,11,.06)); border-color: rgba(245,158,11,.24); }

.task-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

/* Status pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--line);
  text-transform: uppercase;
}
.status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status.new          { color: var(--accent-hover); background: var(--new-soft);  border-color: rgba(59,130,246,.25); }
.status.in_progress  { color: #FCD34D;             background: var(--work-soft); border-color: rgba(245,158,11,.3); }
.status.published    { color: #34D399;             background: var(--done-soft); border-color: rgba(16,185,129,.3); }
.status.cancelled    { color: var(--subtle);       background: var(--surface-3); }

.important {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  color: #FCA5A5;
  background: var(--important-soft);
  border: 1px solid rgba(239,68,68,.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.important::before {
  content: "";
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v13h-2zM11 19h2v2h-2z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v13h-2zM11 19h2v2h-2z' fill='black'/></svg>") center/contain no-repeat;
}
.stale-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  color: #F59E0B;
  background: var(--work-soft);
  border: 1px solid rgba(245,158,11,.3);
  text-transform: uppercase;
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  color: #C4B5FD;
  background: var(--extra-soft);
  border: 1px solid rgba(167,139,250,.3);
  text-transform: uppercase;
}
.carryover-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  color: #93C5FD;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
}
.carryover-badge.is-risk {
  color: #FCD34D;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.32);
}

.task-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.icon-utility-button svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.icon-utility-button:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
}
.icon-utility-button:hover svg { transform: scale(1.06); }
.icon-utility-button:active svg { transform: scale(0.94); }

/* Important toggle on the task card */
.star-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.star-toggle svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.star-toggle:hover:not(:disabled) {
  color: #FCA5A5;
  background: rgba(239,68,68,.08);
}
.star-toggle:hover:not(:disabled) svg { transform: scale(1.1); }
.star-toggle:active:not(:disabled) svg { transform: scale(0.9); }
.star-toggle.is-on {
  color: #EF4444;
  background: var(--important-soft);
  border-color: rgba(239,68,68,.35);
  cursor: pointer;
}
.star-toggle.is-on:hover { color: #EF4444; }
.star-toggle:disabled { cursor: default; }

.task-ai-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-strong);
  display: block;
  margin-bottom: 4px;
}
.task-text {
  display: block;
  cursor: pointer;
}
.task-body {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-inline-link {
  color: var(--accent-hover);
  border-bottom: 1px dashed rgba(96,165,250,.4);
}

/* Meta block */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  padding: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meta-row strong { color: var(--subtle); font-weight: 500; }
.meta-value { color: var(--text); font-weight: 500; }
.user-link { color: var(--accent-hover); }

/* AI match callout */
.ai-match {
  background: var(--extra-soft);
  border: 1px solid rgba(167,139,250,.25);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-match strong { font-family: var(--font-display); color: #C4B5FD; }
.ai-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ai-match-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ai-match-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.ai-match-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(15, 23, 42, .22);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: all var(--t-fast);
}
.ai-match-chip:hover {
  border-color: rgba(167,139,250,.42);
  background: rgba(167,139,250,.12);
}
.ai-match-chip.is-confirm {
  color: #A7F3D0;
  border-color: rgba(16,185,129,.34);
  background: rgba(16,185,129,.12);
}
.ai-match-link,
.ai-match-link:link,
.ai-match-link:visited {
  font-family: var(--font-display);
  color: #C4B5FD;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ai-match-link:hover {
  color: #DDD6FE;
  text-decoration: underline;
}
.ai-match.is-compact {
  padding: 9px 12px;
  gap: 6px;
}
.ai-match.is-compact .ai-match-head > span {
  font-size: 11px;
}
.ai-match.is-compact .ai-match-link {
  font-size: 13px;
}

.ai-feature-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ai-tool-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ai-feature-card {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ai-tool-card {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.5));
  box-shadow: var(--shadow-sm);
}

.ai-feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ai-feature-head strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-strong);
}

.ai-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ai-tool-head strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-strong);
}

.ai-feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-tool-card p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-feature-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(148, 163, 184, .08);
}

.ai-feature-stage.is-live {
  color: #A7F3D0;
  border-color: rgba(16,185,129,.3);
  background: rgba(16,185,129,.12);
}

.ai-feature-stage.is-foundation {
  color: #BFDBFE;
  border-color: rgba(59,130,246,.28);
  background: rgba(59,130,246,.12);
}

.ai-feature-stage.is-planned {
  color: #E9D5FF;
  border-color: rgba(168,85,247,.28);
  background: rgba(168,85,247,.1);
}

.ai-tool-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid var(--line);
}

.ai-tool-badge.is-readonly {
  color: #BFDBFE;
  border-color: rgba(59,130,246,.28);
  background: rgba(59,130,246,.12);
}

.ai-tool-badge.is-mutate {
  color: #FDE68A;
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.12);
}

.ai-tool-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 11px;
}

.ai-tool-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(148,163,184,.08);
}

/* Action buttons */
/* ---------- Action buttons (icon-first) ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: all var(--t-fast);
  /* hide text labels — only icon will show */
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: visible;
}
/* Keep symbol-spans (aria-hidden) hidden too — we draw our own icon */
.action > span { display: none; }

/* Icon glyph drawn via mask so we can recolor with currentColor */
.action::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* fallback icon (dot) — overridden per data-action below */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='black'/></svg>");
}

/* Tooltip on hover — content per data-action */
.action::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  background: #0f172a;
  color: #E2E8F0;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 5;
  box-shadow: var(--shadow-md);
}
.action:hover::after,
.action:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.action:hover { background: var(--surface-3); border-color: var(--line-strong); }
.action:active { transform: translateY(1px); }

/* Variant colors — keep visual hierarchy */
.action.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.action.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 0 0 4px rgba(59,130,246,.14); }
.action.secondary { background: var(--surface-2); color: var(--text); }
.action.secondary:hover { color: var(--text-strong); }
.action.success {
  background: var(--done-soft);
  border-color: rgba(16,185,129,.35);
  color: #6EE7B7;
}
.action.success:hover { background: rgba(16,185,129,.2); color: #A7F3D0; }
.action.danger {
  background: var(--danger-soft);
  border-color: rgba(248,113,113,.3);
  color: #FCA5A5;
}
.action.danger:hover { background: rgba(248,113,113,.18); color: #FECACA; }
.action.link {
  background: transparent;
  border-color: var(--line);
  color: var(--accent-hover);
}
.action.link:hover { background: var(--surface-2); }

/* ---------- Per-action icons + tooltips ---------- */
.action[data-action="take"]::before        { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>"); }
.action[data-action="publish"]::before     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='M22 4 12 14.01l-3-3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='M22 4 12 14.01l-3-3'/></svg>"); }
.action[data-action="reopen"]::before      { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4 3 8l4 4'/><path d='M3 8h13a5 5 0 0 1 5 5'/><path d='M17 20l4-4-4-4'/><path d='M21 16H8a5 5 0 0 1-5-5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4 3 8l4 4'/><path d='M3 8h13a5 5 0 0 1 5 5'/><path d='M17 20l4-4-4-4'/><path d='M21 16H8a5 5 0 0 1-5-5'/></svg>"); }
.action[data-action="important"]::before   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v9'/><path d='M12 19h.01'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v9'/><path d='M12 19h.01'/></svg>"); }
.action[data-action="ai-confirm"]::before  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v3M12 19v3M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M2 12h3M19 12h3M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12'/><circle cx='12' cy='12' r='3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v3M12 19v3M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M2 12h3M19 12h3M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12'/><circle cx='12' cy='12' r='3'/></svg>"); }
.action[data-action="ai-assignees"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v4'/><path d='M12 17v4'/><path d='M4.9 4.9l2.8 2.8'/><path d='M16.3 16.3l2.8 2.8'/><path d='M3 12h4'/><path d='M17 12h4'/><path d='M4.9 19.1l2.8-2.8'/><path d='M16.3 7.7l2.8-2.8'/><circle cx='12' cy='12' r='4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v4'/><path d='M12 17v4'/><path d='M4.9 4.9l2.8 2.8'/><path d='M16.3 16.3l2.8 2.8'/><path d='M3 12h4'/><path d='M17 12h4'/><path d='M4.9 19.1l2.8-2.8'/><path d='M16.3 7.7l2.8-2.8'/><circle cx='12' cy='12' r='4'/></svg>"); }
.action[data-action="ai-dismiss"]::before  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>"); }
.action[data-action="delete"]::before      { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6M14 11v6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6M14 11v6'/></svg>"); }
.action[data-native-link]::before,
.action.link::before                       { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M8 7h9v9'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M8 7h9v9'/></svg>"); }

/* Tooltip text per action (since JS doesn't set title we use a data-tip via attr selectors) */
.action[data-action="take"]       { --tip: "Взяти в роботу"; }
.action[data-action="publish"]    { --tip: "Завершити"; }
.action[data-action="reopen"]     { --tip: "Передати / повернути"; }
.action[data-action="important"]  { --tip: "Важливо"; }
.action[data-action="ai-confirm"] { --tip: "Підтвердити AI збіг"; }
.action[data-action="ai-assignees"] { --tip: "AI призначення"; }
.action[data-action="ai-dismiss"] { --tip: "Не воно"; }
.action[data-action="delete"]     { --tip: "Видалити"; }
.action.link                      { --tip: "Відкрити"; }
.action::after { content: var(--tip, "Дія"); }

/* Detail-modal actions: a bit more breathing room */
.detail-actions.actions { gap: 8px; padding-top: 12px; }

/* Keep generic form/admin actions readable; icon-only mode is only for task action rows. */
.action {
  width: auto;
  min-height: 36px;
  height: auto;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  color: var(--text);
  overflow: hidden;
}
.action > span {
  display: inline;
}
.action::before,
.action::after {
  content: none;
  display: none;
}
.actions .action {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: var(--text);
  overflow: visible;
}
.actions .action > span {
  display: none;
}
.actions .action::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.actions .action::after {
  content: var(--tip, "Дія");
  display: block;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  background: #0f172a;
  color: #E2E8F0;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 5;
  box-shadow: var(--shadow-md);
}
.actions .action:hover::after,
.actions .action:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.actions .action.primary { color: #fff; }
.actions .action.secondary { color: var(--text); }
.actions .action.success { color: #6EE7B7; }
.actions .action.danger { color: #FCA5A5; }
.actions .action.link { color: var(--accent-hover); }

/* Load-more */
.load-more {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--muted);
  font-weight: 500;
  transition: all var(--t-fast);
}
.load-more:hover { background: var(--surface-2); color: var(--text-strong); border-color: var(--accent-line); }

/* Empty / skeleton */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--subtle);
  font-size: 14px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.skeleton {
  height: 78px;
  margin: 0 0 10px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- Shifts view ---------- */
.shifts-view { display: flex; flex-direction: column; gap: 14px; }
.shift-date { min-width: 42px; }

.shift-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}
.shift-tool {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all var(--t-fast);
}
.shift-tool svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.shift-tool:hover,
.shift-tool.is-active {
  color: var(--accent-hover);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.shift-tool-date input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  color-scheme: dark;
}
.shift-date-tool {
  width: 100%;
  padding: 0 12px;
  gap: 8px;
  justify-content: flex-start;
}
.shift-date-tool.is-dormant {
  visibility: hidden;
  pointer-events: none;
}
.shift-date-tool span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.shift-toolbar-menu {
  position: relative;
}
.shift-toolbar-menu summary {
  list-style: none;
}
.shift-toolbar-menu summary::-webkit-details-marker {
  display: none;
}
.shift-toolbar-menu[open] > summary {
  color: var(--accent-hover);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.shift-toolbar-menu-sheet {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(240px, calc(100vw - 32px));
  padding: 8px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
  display: grid;
  gap: 6px;
  z-index: 8;
}
.shift-menu-item {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-strong);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.shift-menu-item:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.shift-request-form,
.shift-request-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-actions {
  display: flex;
  gap: 8px;
}
.form-actions .submit-user,
.form-actions .action {
  flex: 1;
}
.shift-request-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--t-fast);
}
.shift-request-link:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.shift-request-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.shift-request-card.pending {
  border-color: color-mix(in oklab, var(--accent) 32%, var(--line));
}
.shift-request-card.approved {
  border-color: color-mix(in oklab, var(--success) 26%, var(--line));
}
.shift-request-card.rejected {
  opacity: .72;
}
.shift-request-card > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.shift-request-card strong {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 13px;
}
.shift-request-card span,
.shift-request-meta {
  color: var(--muted);
  font-size: 12px;
}
.shift-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.shift-request-meta span {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.shift-request-note {
  overflow-wrap: anywhere;
}
.shift-request-card-actions {
  display: flex;
  gap: 6px;
}
.shift-request-card-actions .action {
  padding: 7px 10px;
}
.shift-request-status {
  justify-self: end;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 11px;
  font-weight: 700;
}
.shift-request-status.pending {
  color: var(--accent-hover);
  background: var(--accent-soft);
}
.shift-request-status.approved {
  color: var(--success);
  background: color-mix(in oklab, var(--success) 12%, transparent);
}
.shift-request-status.rejected {
  color: var(--muted);
}

.current-shifts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.shift-state-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.shift-state-head strong {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.shift-signals { display: flex; gap: 6px; flex-wrap: wrap; }
.shift-signals > span {
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
}
.shift-signals > span.ok      { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.shift-signals > span.warn    { background: color-mix(in oklab, var(--danger) 14%, transparent);  color: var(--danger);  border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.shift-signals > span.extra   { background: color-mix(in oklab, var(--accent) 14%, transparent);  color: var(--accent);  border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.shift-signals > span.muted   { background: var(--surface-3); color: var(--muted); }

.shift-today-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shift-today-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.shift-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--muted) 12%, transparent);
}
.shift-status-dot.ok { background: var(--success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 14%, transparent); }
.shift-status-dot.missing { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 14%, transparent); }
.shift-status-dot.extra,
.shift-status-dot.planned { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent); }
.shift-status-dot.away { background: #A78BFA; box-shadow: 0 0 0 4px rgba(167, 139, 250, .16); }
.shift-today-person,
.shift-today-state {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shift-today-person strong,
.shift-today-state strong {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}
.shift-today-person span,
.shift-today-state span {
  color: var(--muted);
  font-size: 12px;
}
.shift-today-state {
  align-items: flex-end;
  text-align: right;
}
.shift-today-row.missing { border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); }
.shift-today-row.ok { border-color: color-mix(in oklab, var(--success) 28%, var(--line)); }
.shift-today-row.away { border-color: rgba(167, 139, 250, .38); }
.shift-today-row.extra,
.shift-today-row.planned { border-color: color-mix(in oklab, var(--accent) 28%, var(--line)); }
.shift-today-state button {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.shift-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.shift-state-group {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.shift-state-group > p {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.shift-state-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shift-state-group > div > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.shift-state-group > div > span.is-empty {
  color: var(--muted);
  font-style: normal;
  background: transparent;
  border-style: dashed;
}
.shift-state-group > div > span.is-unscheduled { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
.shift-state-group > div > span.is-approved { background: color-mix(in oklab, var(--success) 12%, var(--surface)); border-color: color-mix(in oklab, var(--success) 35%, var(--line)); color: var(--text-strong); }
.shift-state-group > div > span.is-inactive { opacity: 0.6; }
.shift-state-group > div > span button {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.shift-state-group.warn { border-color: color-mix(in oklab, var(--danger) 30%, var(--line)); }
.shift-state-group.extra { border-color: color-mix(in oklab, var(--accent) 25%, var(--line)); }
.shift-state-group.muted { opacity: .85; }

.day-filter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.day-chip,
.day {
  padding: 8px 4px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  transition: all var(--t-fast);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.day:hover, .day-chip:hover { background: var(--hover); color: var(--text-strong); }
.day.is-active, .day-chip.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.shift-list { display: flex; flex-direction: column; gap: 8px; }
.shift-calendar-panel,
.shift-add-panel,
.shift-schedule-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shift-day-plan,
.shift-exception-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shift-plan-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shift-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.shift-plan-row > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shift-plan-row strong {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.shift-plan-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.shift-plan-row > span {
  flex: 0 0 auto;
  max-width: 42%;
  text-align: right;
}
.shift-plan-row.is-exception {
  border-color: color-mix(in oklab, var(--accent) 28%, var(--line));
}
.shift-plan-row.is-away {
  border-color: rgba(167, 139, 250, .38);
}
.shift-exception-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line));
  border-radius: var(--r-md);
  min-width: 0;
}
.shift-exception-card > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.shift-exception-card strong {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 13px;
}
.shift-exception-card span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.section-title.compact { margin: 2px 0; }
.empty.compact { padding: 16px; }
.shift-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: all var(--t-fast);
}
.shift-card:hover { border-color: var(--line-strong); }
.shift-card.is-now {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--surface), var(--accent-soft));
}
.shift-card.is-unscheduled { opacity: .7; }
.shift-card.is-exception {
  border-color: color-mix(in oklab, var(--accent) 34%, var(--line));
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
}
.shift-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.shift-main strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-strong);
  font-size: 14px;
}
.shift-main span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shift-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.shift-edit { padding: 6px 10px; font-size: 12px; }

/* Role pill */
.role-pill {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--accent-line);
}

/* ---------- Journal view ---------- */
.journal-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.journal-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
.journal-date input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer; color-scheme: dark;
}

.journal-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.journal-metric {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.journal-metric strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.journal-metric span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.journal-filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 0;
}
.journal-filter {
  min-width: 0;
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all var(--t-fast);
}
.journal-filter:hover { color: var(--text-strong); background: var(--hover); }
.journal-filter.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.journal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  min-width: 0;
}
.journal-event {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
  transition: all var(--t-fast);
}
.journal-event::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--surface-3);
}
.journal-event:has(.journal-event-type.created)::before          { background: var(--new); }
.journal-event:has(.journal-event-type.taken)::before            { background: var(--work); }
.journal-event:has(.journal-event-type.published)::before        { background: var(--done); }
.journal-event:has(.journal-event-type.marked_important)::before { background: var(--important); }
.journal-event:has(.journal-event-type.cancelled)::before,
.journal-event:has(.journal-event-type.deleted)::before          { background: var(--subtle); }
.journal-event:has(.journal-event-type.reopened)::before         { background: var(--accent); }
.journal-event:has(.journal-event-type.carried_over)::before     { background: #60A5FA; }
.journal-event.is-clickable { cursor: pointer; }
.journal-event.is-clickable:hover { border-color: var(--accent-line); }

.journal-event-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.journal-event-main strong,
.journal-event-main p {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.journal-event-main p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}
.journal-event-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 40%;
  font-size: 11px;
  color: var(--subtle);
}
.journal-event-side time {
  min-width: 0;
  overflow-wrap: anywhere;
}
.journal-event-type {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-3);
  color: var(--muted);
}
.journal-event-type.created          { background: var(--new-soft);       color: var(--accent-hover); }
.journal-event-type.taken            { background: var(--work-soft);      color: #FCD34D; }
.journal-event-type.published        { background: var(--done-soft);      color: #34D399; }
.journal-event-type.marked_important { background: var(--important-soft); color: #FCA5A5; }
.journal-event-type.reopened         { background: var(--new-soft);       color: var(--accent-hover); }
.journal-event-type.cancelled,
.journal-event-type.deleted          { background: var(--surface-3);      color: var(--muted); }
.journal-event-type.carried_over     { background: rgba(59,130,246,.12);  color: #93C5FD; }

.event-link {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.event-list li {
  display: flex; justify-content: space-between; gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  border: 1px solid var(--line);
}
.event-list strong,
.event-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.event-list strong { color: var(--text-strong); font-weight: 600; }
.event-list span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Forms (team / shifts / AI) ---------- */
.user-form,
.shift-form,
.ai-settings-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}
.user-form > *,
.shift-form > *,
.ai-settings-form > *,
.team-view > * {
  min-width: 0;
  max-width: 100%;
}
.form-wide { grid-column: 1 / -1; }
.user-form label,
.shift-form label,
.ai-settings-form label,
.ai-settings-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.user-form input,
.user-form select,
.shift-form input,
.shift-form select,
.ai-settings-form input,
.ai-settings-form select,
.ai-settings-form textarea {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-strong);
  font-size: 14px;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  transition: all var(--t-fast);
  color-scheme: dark;
}
.user-form input:focus,
.shift-form input:focus,
.shift-form select:focus,
.user-form select:focus,
.ai-settings-form input:focus,
.ai-settings-form select:focus,
.ai-settings-form textarea:focus {
  border-color: var(--accent-line);
  box-shadow: var(--ring);
  background: var(--surface);
}
.submit-user {
  grid-column: 1 / -1;
  padding: 12px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-sm);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--t-fast);
}
.submit-user:hover { background: var(--accent-hover); box-shadow: 0 0 0 4px rgba(59,130,246,.14); }
.form-title { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.form-title strong { font-family: var(--font-display); font-size: 16px; color: var(--text-strong); font-weight: 600; }
.form-title span { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Team list */
.team-view { display: flex; flex-direction: column; gap: 10px; }
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 0;
}
.user-card strong { font-family: var(--font-display); color: var(--text-strong); font-weight: 600; }
.user-card span { font-size: 12px; color: var(--muted); }
.user-card.is-muted { opacity: .55; }
.user-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.user-controls select,
.user-controls button {
  min-width: 0;
  max-width: 100%;
}

.danger-zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--danger-soft);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--r-md);
  margin-top: 8px;
}
.danger-zone strong { color: #FCA5A5; font-family: var(--font-display); display: block; }
.danger-zone span { font-size: 12px; color: var(--muted); }

/* AI panel specifics */
.ai-settings-form { display: flex; flex-direction: column; }
.ai-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.ai-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ai-prompt-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.ai-meta-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.ai-log-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.ai-prompt-panel summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-prompt-panel summary::after {
  content: "+";
  color: var(--muted);
  transition: transform var(--t-fast);
}
.ai-prompt-panel[open] summary::after { content: "−"; }
.ai-meta-panel summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-meta-panel summary::after {
  content: "+";
  color: var(--muted);
  transition: transform var(--t-fast);
}
.ai-meta-panel[open] summary::after { content: "−"; }
.ai-log-panel summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-log-panel summary::after {
  content: "+";
  color: var(--muted);
  transition: transform var(--t-fast);
}
.ai-log-panel[open] summary::after { content: "−"; }
.ai-meta-panel .ai-feature-catalog,
.ai-meta-panel .ai-tool-catalog {
  padding-top: 10px;
  margin-bottom: 0;
}
.ai-log-panel .ai-run-panel {
  padding-top: 10px;
}
.ai-prompt-panel textarea {
  width: 100%;
  margin-top: 10px;
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}
.ai-settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-settings-actions .submit-user { flex: 1; }
.ai-settings-actions .action { flex: 1; justify-content: center; }
.ai-run-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}
.section-title strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-strong);
}
.section-title .event-link {
  width: auto;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
}
.ai-run-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-run-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
}
.ai-run-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--surface-3);
}
.ai-run-card.is-success::before { background: var(--done); }
.ai-run-card.is-running::before { background: var(--accent); }
.ai-run-card.is-skipped::before { background: var(--work); }
.ai-run-card.is-failed::before { background: var(--danger); }
.ai-run-card.is-denied::before { background: #A78BFA; }
.ai-run-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-run-main strong {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 14px;
}
.ai-run-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.ai-run-main .ai-run-debug {
  color: var(--subtle);
  font-size: 11px;
}
.ai-debug-details {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.ai-debug-details summary {
  cursor: pointer;
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 700;
  outline: 0;
  border-radius: var(--r-xs);
}
.ai-debug-details summary:focus-visible {
  box-shadow: var(--ring);
}
.ai-debug-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0 0;
}
.ai-debug-row strong {
  font-size: 12px;
  line-height: 1.35;
}
.ai-debug-row span,
.ai-debug-row em {
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}
.ai-debug-row em { color: var(--muted); }
.ai-run-status {
  width: fit-content;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-run-status.success { background: var(--done-soft); color: #34D399; }
.ai-run-status.running { background: var(--new-soft); color: var(--accent-hover); }
.ai-run-status.skipped { background: var(--work-soft); color: #FCD34D; }
.ai-run-status.failed { background: var(--danger-soft); color: #FCA5A5; }
.ai-run-status.denied { background: rgba(168,85,247,.12); color: #C4B5FD; }
.ai-run-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  color: var(--subtle);
  font-size: 11px;
  min-width: 96px;
}

/* ---------- Task detail modal ---------- */
.task-detail {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn .2s ease;
}
.task-detail-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 24px 18px 28px;
  box-shadow: 0 -20px 60px -10px rgba(0,0,0,.6);
  animation: sheetUp .26s cubic-bezier(.2,.7,.3,1);
}
@media (min-width: 720px) {
  .task-detail { align-items: center; padding: 24px; }
  .task-detail-panel { border-radius: var(--r-xl); }
}
.task-detail-panel::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  border-radius: 4px;
  background: var(--surface-3);
}
@keyframes sheetUp { from {transform: translateY(20px); opacity: 0;} to {transform: translateY(0); opacity: 1;} }

.detail-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.detail-close:hover { color: var(--text-strong); background: var(--surface-3); }

.detail-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}
.detail-edit-button {
  flex: 0 0 auto;
}
.detail-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.detail-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.detail-status.new {
  background: var(--new-soft);
  border-color: rgba(59,130,246,.25);
  color: var(--accent-hover);
}
.detail-status.in_progress {
  background: var(--work-soft);
  border-color: rgba(245,158,11,.3);
  color: #FCD34D;
}
.detail-status.published {
  background: var(--done-soft);
  border-color: rgba(16,185,129,.3);
  color: #34D399;
}
.detail-status.cancelled {
  color: var(--subtle);
}
.detail-ai-title {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.detail-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px;
  word-break: break-word;
}
.detail-text br {
  content: "";
}
.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 14px;
}
.detail-meta-row {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.detail-meta-row span {
  color: var(--muted);
}
.detail-meta-row strong {
  min-width: 0;
  color: var(--text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.detail-actions { padding: 10px 0 14px; border-top: 1px solid var(--line); margin-top: 6px; }
.assignee-rec-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,23,42,.84), rgba(15,23,42,.64));
  display: grid;
  gap: 12px;
}
.assignee-rec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.assignee-rec-head strong {
  display: block;
  color: var(--text-strong);
  font-size: 15px;
}
.assignee-rec-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.assignee-rec-refresh {
  border: 1px solid var(--line-strong);
  background: rgba(59,130,246,.14);
  color: #BFDBFE;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}
.assignee-rec-body,
.assignee-rec-list {
  display: grid;
  gap: 10px;
}
.assignee-rec-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(15,23,42,.5);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.assignee-rec-card.is-on-shift {
  border-color: rgba(16,185,129,.25);
}
.assignee-rec-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.assignee-rec-card-head strong {
  color: var(--text-strong);
  display: block;
}
.assignee-rec-card-head span {
  color: var(--muted);
  font-size: 12px;
}
.assignee-rec-score {
  min-width: 38px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,.28);
  background: rgba(59,130,246,.12);
  color: #BFDBFE;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
}
.assignee-rec-meta,
.assignee-rec-chips,
.assignee-rec-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assignee-rec-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}
.assignee-rec-chip.is-good {
  color: #A7F3D0;
  border-color: rgba(16,185,129,.28);
  background: rgba(16,185,129,.12);
}
.assignee-rec-chip.is-risk,
.assignee-rec-chip.is-warn {
  color: #FDE68A;
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.12);
}
.assignee-rec-chip.is-neutral {
  color: var(--muted);
  background: rgba(148,163,184,.08);
}
.assignee-rec-actions {
  display: flex;
  justify-content: flex-end;
}
.assignee-rec-assign {
  min-height: 34px;
}
.assignee-rec-note {
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.45;
}
.task-editor-panel { max-width: 720px; }
.owner-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.owner-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px;
  display: grid;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.owner-card-wide {
  grid-column: 1 / -1;
}
.owner-card-head {
  display: grid;
  gap: 4px;
}
.owner-card-head strong {
  color: var(--text-strong);
  font-size: 16px;
}
.owner-card-head span {
  color: var(--muted);
  font-size: 13px;
}
.owner-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}
.owner-stats-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.owner-stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  color: var(--text);
  min-width: 0;
  padding: 12px 10px;
  display: grid;
  gap: 4px;
  text-align: left;
}
.owner-stat strong {
  color: var(--text-strong);
  font-size: 22px;
  line-height: 1;
}
.owner-stat span {
  color: var(--muted);
  font-size: 12px;
}
.owner-list {
  display: grid;
  gap: 8px;
}
.owner-list-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  color: var(--text);
  padding: 12px 13px;
  text-align: left;
  display: grid;
  gap: 4px;
}
.owner-list-item strong {
  color: var(--text-strong);
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.owner-list-item span {
  color: var(--muted);
  font-size: 12px;
}
.owner-list-preview {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.owner-list-item.tone-danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
}
.owner-list-item.tone-ok {
  border-color: rgba(16, 185, 129, 0.3);
}
.owner-risk-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.owner-risk-item.tone-warn {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
}
.owner-risk-item.tone-danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
}
.owner-risk-item.tone-ok {
  border-color: rgba(16, 185, 129, 0.3);
}
.task-editor-form {
  display: grid;
  gap: 16px;
}
.task-editor-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.task-editor-form textarea,
.task-editor-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
}
.task-editor-form textarea {
  min-height: 180px;
  resize: vertical;
}
.task-editor-form textarea:focus,
.task-editor-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
.task-editor-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.task-editor .detail-close { z-index: 2; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .app { padding: 12px 12px 32px; }
  .topbar h1 { font-size: 20px; }
  .metric { padding: 12px; }
  .metric-value { font-size: 22px; }
  .shift-toolbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }
  .shift-tool {
    width: 40px;
    height: 40px;
  }
  .shift-request-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .shift-request-card-actions,
  .shift-request-status {
    justify-self: stretch;
  }
  .shift-request-card-actions .action {
    flex: 1;
  }
  .user-form, .shift-form { grid-template-columns: 1fr; }
  .ai-settings-grid { grid-template-columns: 1fr; }
  .journal-metrics { grid-template-columns: repeat(2, 1fr); }
  .owner-dashboard-grid { grid-template-columns: 1fr; }
  .owner-card-wide { grid-column: auto; }
  .owner-stats-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .metrics { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .metric { padding: 10px 8px; }
  .metric-value { font-size: 20px; }
  .metric-label { font-size: 10px; }
}