/* Enfermatiko.net Dashboard - dark theme, restrained red and gold accents. No inline styles (CSP). */
:root {
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --color-bg: oklch(0.145 0.006 285);
  --color-surface: oklch(0.175 0.007 285);
  --color-surface-2: oklch(0.205 0.008 285);
  --color-surface-3: oklch(0.245 0.009 285);
  --color-sunk: oklch(0.12 0.005 285);
  --color-border: oklch(1 0 0 / 0.09);
  --color-border-strong: oklch(1 0 0 / 0.16);
  --color-divider: oklch(1 0 0 / 0.06);
  --color-text: oklch(0.95 0.004 285);
  --color-text-muted: oklch(0.74 0.01 285);
  --color-text-faint: oklch(0.58 0.01 285);
  --color-primary: oklch(0.63 0.25 28);
  --color-primary-hover: oklch(0.69 0.23 30);
  --color-primary-active: oklch(0.56 0.23 28);
  --color-primary-soft: oklch(0.63 0.25 28 / 0.14);
  --color-gold: oklch(0.82 0.12 85);
  --color-gold-soft: oklch(0.82 0.12 85 / 0.13);
  --color-steel: oklch(0.72 0.1 252);
  --color-steel-soft: oklch(0.72 0.1 252 / 0.15);
  --color-success: oklch(0.76 0.14 150);
  --color-success-soft: oklch(0.76 0.14 150 / 0.14);
  --color-warn: oklch(0.8 0.14 70);
  --color-warn-soft: oklch(0.8 0.14 70 / 0.14);
  --cut: 10px;
  --radius: 6px;
  --sidebar-w: 248px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; color-scheme: dark; }
body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; color: var(--color-text); background: var(--color-bg); }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration-color: oklch(1 0 0 / .25); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--color-primary); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-steel); outline-offset: 2px; }
::selection { background: oklch(0.63 0.25 28 / .35); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-3); z-index: 100; }
.skip:focus { left: var(--space-2); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.red { color: var(--color-primary); }
.gold { color: var(--color-gold); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
pre, code { font-family: var(--font-mono); font-size: var(--text-xs); }
pre { background: var(--color-sunk); border: 1px solid var(--color-border); padding: var(--space-3); overflow: auto; white-space: pre-wrap; word-break: break-word; max-height: 420px; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--color-divider); margin: var(--space-4) 0; }

/* shell */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--color-sunk); border-right: 1px solid var(--color-divider); padding: var(--space-4) var(--space-3); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; padding: var(--space-1) var(--space-2) var(--space-5); }
.brand img { width: 34px; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; font-size: .95rem; }
.brand__sub { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .32em; color: var(--color-primary); margin-top: 3px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: var(--space-3); padding: .5rem var(--space-3); min-height: 38px; text-decoration: none; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; border-radius: var(--radius); }
.nav a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { background: var(--color-surface); color: var(--color-text); }
.nav a[aria-current="page"] { background: var(--color-surface-2); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-primary); }
.badge { margin-left: auto; font-family: var(--font-mono); font-size: .6875rem; min-width: 22px; text-align: center; padding: 1px 6px; background: var(--color-surface-3); color: var(--color-text-muted); border-radius: 999px; }
.badge--red { background: var(--color-primary-soft); color: oklch(0.8 0.14 28); }
.badge--gold { background: var(--color-gold-soft); color: var(--color-gold); }
.sidebar__foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: var(--space-2); }
.me { display: flex; gap: var(--space-3); align-items: center; text-decoration: none; padding: var(--space-2); }
.me strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.me small { display: block; font-size: var(--text-xs); color: var(--color-gold); }
.avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; font-family: var(--font-mono); font-size: .7rem; background: var(--color-surface-3); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.avatar--agent { background: var(--color-steel-soft); color: var(--color-steel); }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); background: oklch(0.145 0.006 285 / .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-divider); }
.search { flex: 1 1 auto; max-width: 560px; }
.search input { width: 100%; }
.icon-btn { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--color-surface-2); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notif { margin-left: auto; }
.dot-count { position: absolute; top: -6px; right: -6px; font-family: var(--font-mono); font-size: .625rem; background: var(--color-primary); color: #fff; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; padding: 0 4px; }
.nav-toggle { display: none; }
.content { padding: var(--space-6); width: 100%; max-width: 1440px; }

/* page header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-head h1 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.eyebrow { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-1); }
.crumbs { font-size: var(--text-sm); color: var(--color-text-faint); margin-bottom: var(--space-1); }
.crumbs a { color: var(--color-text-muted); }

/* cards */
.card { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-5); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); min-width: 0; }
.card--flush { padding: 0; }
.card--sunk { background: var(--color-sunk); }
.card--warn { border-color: oklch(0.8 0.14 70 / .4); background: linear-gradient(var(--color-warn-soft), var(--color-warn-soft)), var(--color-surface); }
.card--danger { border-color: oklch(0.63 0.25 28 / .45); }
.card--gold { border-color: oklch(0.82 0.12 85 / .35); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.card__head h2, .card__head h3 { display: flex; align-items: center; gap: var(--space-2); }
.card--flush .card__head { padding: var(--space-4) var(--space-5) 0; }
.count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 400; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-4); text-decoration: none; display: block; }
.stat:hover { border-color: var(--color-border-strong); }
.stat__n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__l { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); text-transform: uppercase; letter-spacing: .1em; }
.stat--red .stat__n { color: var(--color-primary); }
.stat--gold .stat__n { color: var(--color-gold); }
.empty { color: var(--color-text-faint); font-size: var(--text-sm); padding: var(--space-4) 0; }
.empty--box { border: 1px dashed var(--color-border-strong); padding: var(--space-6); text-align: center; }

/* lists */
.list { list-style: none; }
.list > li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); min-width: 0; }
.list > li:first-child { border-top: 0; }
.list__main { flex: 1 1 auto; min-width: 0; }
.list__title { font-weight: 500; overflow-wrap: anywhere; }
.list__meta { font-size: var(--text-xs); color: var(--color-text-faint); display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin-top: 2px; }
.time-col { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); width: 78px; flex: none; padding-top: 2px; }

/* tables */
.table-wrap { position: relative;  overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { text-align: left; font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-faint); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
td { padding: var(--space-3); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
tr:hover td { background: oklch(1 0 0 / .015); }
td.key, .key { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
td a.title { font-weight: 500; text-decoration: none; }
td a.title:hover { text-decoration: underline; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 500; padding: 2px 8px; border-radius: 4px; background: var(--color-surface-3); color: var(--color-text-muted); white-space: nowrap; line-height: 1.5; }
.chip::before { content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); flex: none; }
.chip--plain::before { display: none; }
.s-backlog { color: var(--color-text-faint); }
.s-ready { color: var(--color-steel); background: var(--color-steel-soft); }
.s-progress { color: var(--color-gold); background: var(--color-gold-soft); }
.s-blocked { color: oklch(0.75 0.17 28); background: var(--color-primary-soft); }
.s-awaiting { color: var(--color-warn); background: var(--color-warn-soft); }
.s-review { color: oklch(0.78 0.11 300); background: oklch(0.78 0.11 300 / .14); }
.s-done { color: var(--color-success); background: var(--color-success-soft); }
.s-canceled { color: var(--color-text-faint); text-decoration: line-through; }
.p-urgent { color: oklch(0.75 0.17 28); background: var(--color-primary-soft); }
.p-high { color: var(--color-warn); background: var(--color-warn-soft); }
.p-normal::before, .p-low::before { display: none; }
.p-normal { display: none; }
.p-low { color: var(--color-text-faint); background: transparent; }
.state-online, .state-available, .state-implemented, .state-sent, .state-acknowledged, .state-approved, .state-succeeded { color: var(--color-success); background: var(--color-success-soft); }
.state-working, .state-active, .state-delivered, .state-submitted, .state-queued, .state-pending, .state-running { color: var(--color-gold); background: var(--color-gold-soft); }
.state-blocked, .state-failed, .state-expired, .state-revoked, .state-rejected, .state-unsupported, .state-changes_requested, .state-stale { color: oklch(0.75 0.17 28); background: var(--color-primary-soft); }
.state-unconfigured, .state-disconnected, .state-manual, .state-idle, .state-skipped, .state-released, .state-completed { color: var(--color-text-muted); }
.tag { display: inline-block; font-size: .7rem; padding: 0 6px; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); border-radius: 3px; }
.overdue { color: oklch(0.75 0.17 28); }
.who { display: inline-flex; align-items: center; gap: 6px; }
.who--agent { color: var(--color-steel); }

/* buttons + forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: .5rem 1rem; font-weight: 600; font-size: var(--text-sm); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background .15s var(--ease); }
.btn--sm { min-height: 34px; padding: .35rem .8rem; font-size: var(--text-xs); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:active { background: var(--color-primary-active); }
.btn--gold { background: var(--color-gold); color: oklch(0.2 0.02 85); }
.btn--ghost { background: var(--color-surface-2); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.btn--ghost:hover { background: var(--color-surface-3); }
.btn--quiet { background: transparent; color: var(--color-text-muted); clip-path: none; }
.btn--quiet:hover { color: var(--color-text); background: var(--color-surface); }
.btn--danger { background: transparent; color: oklch(0.75 0.17 28); box-shadow: inset 0 0 0 1px oklch(0.63 0.25 28 / .5); }
.btn--danger:hover { background: var(--color-primary-soft); }
.btn--link { background: none; border: 0; padding: 0; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: var(--text-xs); min-height: 0; }
.btn--link:hover { color: var(--color-text); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { width: 100%; background: var(--color-sunk); border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: .55rem .7rem; min-height: 40px; font-size: var(--text-sm); }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
select[multiple] { min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-steel); box-shadow: 0 0 0 3px var(--color-steel-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); width: 16px; height: 16px; }
input[type=file] { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .field > label, .label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; letter-spacing: .02em; }
.field .help, .help { font-size: var(--text-xs); color: var(--color-text-faint); }
.field .err, .err { font-size: var(--text-xs); color: oklch(0.75 0.17 28); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.check input { margin-top: 3px; flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--space-5); }
.inline-form { display: inline; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2) var(--space-4); }
.checks ul { list-style: none; display: contents; }
.checks li label { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
fieldset { border: 0; min-width: 0; }
legend { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; margin-bottom: var(--space-2); }

/* tabs + segmented */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: .6rem .9rem; text-decoration: none; font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--color-text); }
.tabs a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-primary); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--color-sunk); border: 1px solid var(--color-border); border-radius: var(--radius); width: fit-content; max-width: 100%; }
.seg a, .seg label span { display: block; padding: .3rem .7rem; font-size: var(--text-xs); text-decoration: none; color: var(--color-text-muted); border-radius: 4px; cursor: pointer; }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg a[aria-current="page"], .seg label input:checked + span { background: var(--color-surface-3); color: var(--color-text); }
.seg label input:focus-visible + span { outline: 2px solid var(--color-steel); }
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.filters select, .filters input { width: auto; min-width: 140px; }

/* flash */
.flash { padding: var(--space-4) var(--space-6) 0; display: grid; gap: var(--space-2); }
.flash__item { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-left: 3px solid var(--color-steel); background: var(--color-surface); }
.flash--success { border-color: var(--color-success); }
.flash--error { border-color: var(--color-primary); }
.flash--warning { border-color: var(--color-warn); }
.notice { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-left: 3px solid var(--color-gold); background: var(--color-gold-soft); }
.notice--red { border-color: var(--color-primary); background: var(--color-primary-soft); }
.notice--steel { border-color: var(--color-steel); background: var(--color-steel-soft); }
.secret { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-sunk); border: 1px dashed var(--color-gold); padding: var(--space-3); word-break: break-all; user-select: all; }

/* modal */
.modal { margin: auto; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); width: min(560px, calc(100vw - 24px)); padding: var(--space-5); max-height: calc(100dvh - 24px); }
.modal::backdrop { background: oklch(0 0 0 / .6); backdrop-filter: blur(2px); }
.modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.capture > * + * { margin-top: var(--space-3); }
.hint { font-size: var(--text-xs); color: var(--color-text-faint); }

/* board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--space-3); overflow-x: auto; position: relative; overscroll-behavior-x: contain; padding-bottom: var(--space-4); }
.board__col { background: var(--color-sunk); border: 1px solid var(--color-divider); padding: var(--space-3); min-height: 200px; }
.board__col h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-3); display: flex; justify-content: space-between; }
.bcard { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-3); margin-bottom: var(--space-2); }
.bcard:hover { border-color: var(--color-border-strong); }
.bcard a { text-decoration: none; font-weight: 500; font-size: var(--text-sm); display: block; overflow-wrap: anywhere; }
.bcard__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.bcard select { margin-top: var(--space-2); min-height: 30px; padding: .2rem .4rem; font-size: var(--text-xs); }

/* calendar */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--color-divider); border-top: 1px solid var(--color-divider); }
.month__wd { font-size: var(--text-xs); color: var(--color-text-faint); padding: var(--space-2); text-transform: uppercase; letter-spacing: .08em; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.day { min-height: 112px; padding: 6px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); min-width: 0; }
.day--out { background: oklch(0 0 0 / .18); }
.day--out .day__n { color: var(--color-text-faint); }
.day__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); display: inline-block; margin-bottom: 4px; text-decoration: none; }
.day--today .day__n { background: var(--color-primary); color: #fff; padding: 0 6px; }
.ev { display: block; font-size: .72rem; padding: 2px 6px; margin-bottom: 3px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid currentColor; background: var(--color-surface-2); }
.ev__t { font-family: var(--font-mono); color: var(--color-text-faint); margin-right: 4px; }
.t-meeting { color: var(--color-steel); }
.t-reminder { color: var(--color-gold); }
.t-activity { color: var(--color-success); }
.t-block { color: var(--color-text-muted); }
.t-deadline { color: oklch(0.75 0.17 28); }
.ev span:last-child { color: var(--color-text); }
.ev--cancelled { text-decoration: line-through; opacity: .55; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; background: currentColor; display: inline-block; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.week--day { grid-template-columns: 1fr; }
.week__day { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-3); min-height: 260px; min-width: 0; }
.week__day--today { border-color: oklch(0.63 0.25 28 / .55); }
.week__head { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.week__day .ev { white-space: normal; padding: 4px 6px; }

/* item detail */
.timeline { list-style: none; }
.timeline > li { position: relative; padding: 0 0 var(--space-4) var(--space-5); border-left: 1px solid var(--color-divider); margin-left: 6px; }
.timeline > li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; background: var(--color-surface-3); transform: rotate(45deg); }
.timeline > li.t-comment::before { background: var(--color-steel); }
.timeline > li.t-agent::before { background: var(--color-gold); }
.tl-head { font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: 4px; }
.tl-head strong { color: var(--color-text-muted); font-weight: 600; }
.tl-body { background: var(--color-surface-2); border: 1px solid var(--color-border); padding: var(--space-3); font-size: var(--text-sm); }
.tl-act { font-size: var(--text-sm); color: var(--color-text-muted); }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.kv dt { color: var(--color-text-faint); font-size: var(--text-xs); padding-top: 2px; }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
details > summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); list-style: none; display: flex; align-items: center; gap: var(--space-2); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; font-family: var(--font-mono); color: var(--color-primary); }
details[open] > summary::before { content: "-"; }
details[open] > summary { margin-bottom: var(--space-3); }
progress { width: 100%; height: 6px; appearance: none; border: 0; background: var(--color-surface-3); }
progress::-webkit-progress-bar { background: var(--color-surface-3); }
progress::-webkit-progress-value { background: var(--color-gold); }
progress::-moz-progress-bar { background: var(--color-gold); }

/* chat */
.chat { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 0; height: calc(100dvh - 63px - var(--space-6) * 2); min-height: 480px; border: 1px solid var(--color-border); background: var(--color-surface); }
.chat__list { border-right: 1px solid var(--color-border); overflow-y: auto; padding: var(--space-3); }
.chat__list a { display: flex; justify-content: space-between; gap: var(--space-2); padding: .45rem .6rem; font-size: var(--text-sm); text-decoration: none; color: var(--color-text-muted); border-radius: 4px; }
.chat__list a:hover { background: var(--color-surface-2); color: var(--color-text); }
.chat__list a[aria-current="page"] { background: var(--color-surface-3); color: var(--color-text); }
.chat__list a.unread { color: var(--color-text); font-weight: 600; }
.chat__list h3 { font-family: var(--font-body); font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em; color: var(--color-text-faint); margin: var(--space-4) 0 var(--space-2) .6rem; }
.chat__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.chat__msgs { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.msg { display: flex; gap: var(--space-3); min-width: 0; }
.msg__body { min-width: 0; flex: 1 1 auto; }
.msg__head { font-size: var(--text-xs); color: var(--color-text-faint); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; }
.msg__head strong { color: var(--color-text); font-size: var(--text-sm); }
.msg__text { font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--system .msg__text { color: var(--color-text-faint); font-style: normal; font-size: var(--text-xs); }
.msg--agent .msg__head strong { color: var(--color-steel); }
.msg__tools { display: flex; gap: var(--space-3); margin-top: 2px; flex-wrap: wrap; }
.chat__compose { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); }
.chat__compose textarea { min-height: 56px; }
.chat__side { border-left: 1px solid var(--color-border); overflow-y: auto; padding: var(--space-4); font-size: var(--text-sm); }
.share-warn { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); background: var(--color-steel-soft); border-left: 2px solid var(--color-steel); margin-bottom: var(--space-2); }

/* auth */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); background: radial-gradient(1200px 500px at 50% -10%, oklch(0.63 0.25 28 / .12), transparent 60%), var(--color-bg); }
.auth .flash { padding: 0 0 var(--space-3); width: min(420px, 100%); }
.auth-card { width: min(420px, 100%); background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-8) var(--space-6); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.auth-card .brand { justify-content: center; padding-bottom: var(--space-6); }
.auth-card .brand img { width: 44px; height: 44px; }
.auth-card form > * + * { margin-top: var(--space-4); }
.auth-card .btn { width: 100%; }
.qr { background: #fff; padding: var(--space-3); width: fit-content; max-width: 100%; margin: 0 auto; }
.qr svg { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 1; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); list-style: none; }
.codes li { background: var(--color-sunk); padding: var(--space-2); text-align: center; border: 1px solid var(--color-border); }

.pager { display: flex; gap: var(--space-2); justify-content: center; align-items: center; margin-top: var(--space-4); font-size: var(--text-sm); }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.yes { color: var(--color-success); }
.no { color: var(--color-text-faint); }

@media (max-width: 1180px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .chat { grid-template-columns: 220px minmax(0, 1fr); }
  .chat__side { display: none; }
  .chat__side.open { display: block; position: fixed; inset: 63px 0 0 auto; width: min(320px, 90vw); background: var(--color-surface); z-index: 30; border-left: 1px solid var(--color-border-strong); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(290px, 86vw); z-index: 50; transform: translateX(-100%); transition: transform .2s var(--ease); }
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vmax oklch(0 0 0 / .55); }
  .nav-toggle { display: grid; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .cols--even { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: minmax(0, 1fr); }
  .week__day { min-height: 0; }
}
@media (max-width: 640px) {
  .content { padding: var(--space-4); }
  .topbar { padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .flash { padding: var(--space-3) var(--space-4) 0; }
  .form-grid, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--space-4); }
  .kv { grid-template-columns: 96px minmax(0, 1fr); }
  .day { min-height: 64px; padding: 3px; }
  .ev { font-size: 0; padding: 0; height: 5px; margin-bottom: 2px; border-left: 0; background: currentColor; }
  .ev span { display: none; }
  .month__wd { padding: 4px 2px; font-size: .625rem; letter-spacing: 0; text-align: center; }
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 55px - var(--space-4) * 2); }
  .chat__list { display: none; }
  .chat--index .chat__list { display: block; border-right: 0; }
  .chat--index .chat__main { display: none; }
  .hide-sm { display: none; }
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
  table.responsive td { border: 0; padding: 2px 0; }
  table.responsive td[data-label]::before { content: attr(data-label) ": "; color: var(--color-text-faint); font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.mt { margin-top: var(--space-3); }
.mb { margin-bottom: var(--space-3); }
.sp { height: var(--space-4); }
.h-chat { font-size: var(--text-base); }
.chat-note { padding: var(--space-1) var(--space-4); }
.chat__main > .share-warn { margin: var(--space-2) var(--space-4) 0; }
.thread { margin-left: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); border-left: 1px solid var(--color-divider); padding-left: var(--space-4); }
.grid-3 > .card.stat { padding: var(--space-5); }