/* maven design system — dark, restrained, #00aaff accent.
   Every server-rendered page uses this single stylesheet.
   Pages carry NO inline <style> beyond true one-offs. */

/* ── Design Tokens ── */
:root{
  --bg:#111;--panel:#1a1a2e;--line:#222;--border:#333;
  --fg:#ddd;--soft:#aaa;--muted:#888;--dim:#555;
  --accent:#00aaff;--ok:#00ff88;--warn:#ffaa00;--err:#ff4444;

  --surface-page:var(--bg);
  --surface-card:var(--panel);
  --surface-raised:#222;
  --surface-input:#181818;
  --surface-hover:rgba(255,255,255,.04);

  --fs-xs:.7rem;--fs-sm:.8rem;--fs-base:14px;
  --fs-lg:1.25rem;--fs-xl:1.5rem;
  --space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;
  --space-lg:1.25rem;--space-xl:2rem;
  --radius-sm:3px;--radius-md:6px;--radius-lg:10px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 2px 8px rgba(0,0,0,.4);
  --transition:150ms ease;
}

/* ── Reset / Base ── */
*{box-sizing:border-box}
body{background:var(--surface-page);color:var(--fg);font:var(--fs-base)/1.6 system-ui,sans-serif;
  margin:0;padding:1rem;-webkit-text-size-adjust:100%;min-height:100vh}

/* ── Typography ── */
h1,h2,h3{font-weight:400;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
h1{font-size:var(--fs-lg);margin:0 0 var(--space-lg)}
h2{font-size:.95rem;margin:var(--space-lg) 0 var(--space-sm)}
h3{font-size:.85rem;margin:var(--space-md) 0 var(--space-xs)}
h1 small,h2 small,h3 small{color:var(--dim);letter-spacing:0;text-transform:none}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Page Layout ── */
.page{max-width:80rem;margin:0 auto;padding:0 .5rem var(--space-xl)}

/* ── Nav (shared site nav) ── */
nav.site{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:var(--space-lg)}
nav.site a{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);transition:color var(--transition)}
nav.site a:hover{color:var(--fg);text-decoration:none}
nav.site a.active{color:var(--accent)}

/* ── Cards ── */
.card{background:var(--surface-card);border-radius:var(--radius-md);
  padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-lg);
  box-shadow:var(--shadow-sm)}
.card-title{font-size:.95rem;margin:0 0 var(--space-sm);color:var(--muted);
  display:flex;align-items:center;gap:var(--space-sm)}
.card-sub{font-size:var(--fs-sm);color:var(--dim);margin:0 0 var(--space-sm)}

/* ── Tables ── */
.scroll{overflow-x:auto;margin-bottom:var(--space-sm)}
table{width:100%;border-collapse:collapse}
th,td{padding:.4rem .6rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
th{color:var(--dim);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.05em;white-space:nowrap;font-weight:500}
td{color:var(--soft)}
tr:hover td{background:var(--surface-hover)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
code,.key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ok)}

/* ── Status / Semantic Colors ── */
.pending,.away,.gray{color:var(--muted)}
.acted,.pres,.green{color:var(--ok)}
.snoozed{color:var(--warn)}
.ignored,.red{color:var(--err)}
.updated,.muted{color:var(--dim);font-size:var(--fs-sm)}
.empty{color:var(--dim);padding:var(--space-xl);text-align:center}
.voided{opacity:.45;text-decoration:line-through}
.void-badge{color:var(--dim);font-size:var(--fs-sm);margin-right:.3rem}

/* ── Badges ── */
.badge{font-size:var(--fs-xs);color:var(--dim);background:var(--surface-raised);
  padding:.15rem .4rem;border-radius:var(--radius-sm);white-space:nowrap}
.badge-accent{color:var(--accent);background:rgba(0,170,255,.12)}
.badge-ok{color:var(--ok);background:rgba(0,255,136,.1)}
.badge-warn{color:var(--warn);background:rgba(255,170,0,.12)}
.badge-err{color:var(--err);background:rgba(255,68,68,.12)}

/* ── Status Dot ── */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.dot-ok{background:var(--ok);box-shadow:0 0 5px var(--ok)}
.dot-warn{background:var(--warn);box-shadow:0 0 5px var(--warn)}
.dot-err{background:var(--err);box-shadow:0 0 5px var(--err)}
.dot-dim{background:var(--dim)}

/* ── Buttons ── */
.btn{font:inherit;font-size:var(--fs-sm);background:var(--surface-card);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:.35rem .7rem;
  cursor:pointer;transition:border-color var(--transition),background var(--transition);
  display:inline-flex;align-items:center;gap:.3rem}
.btn:hover{border-color:var(--accent);background:var(--surface-hover)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#111;border-color:var(--accent);font-weight:500}
.btn-primary:hover{background:#0099ee;border-color:#0099ee}
.btn-danger{border-color:var(--err);color:var(--err)}
.btn-danger:hover{border-color:var(--err);background:rgba(255,68,68,.1)}

/* ── Form Elements ── */
input[type=text],input[type=url]{font:inherit;font-size:var(--fs-sm);
  background:var(--surface-input);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.35rem .5rem;max-width:100%;transition:border-color var(--transition)}
input[type=text]:focus,input[type=url]:focus{border-color:var(--accent);outline:none}
input[type=checkbox]{accent-color:var(--accent);width:1rem;height:1rem;vertical-align:middle}
label{color:var(--soft);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}

/* ── Messages / Feedback ── */
.msg{margin:.6rem 0;padding:.5rem .7rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);font-size:var(--fs-sm)}
.msg-ok{border-color:var(--ok);color:var(--ok)}
.msg-err{border-color:var(--err);color:var(--err)}
#msg{white-space:pre-wrap}

/* ── Collapsible Details ── */
details{color:var(--soft);font-size:var(--fs-sm)}
summary{cursor:pointer;color:var(--dim);transition:color var(--transition)}
summary:hover{color:var(--fg)}
details[open]{margin-top:var(--space-xs)}

/* ── Utilities ── */
.val{word-break:break-all;max-width:20rem}
.text-max{max-width:22rem}
.input-wide{width:20rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}