/* The Cultured console. One stylesheet; the house palette from reports/brand.py adapted for screen. */
:root {
  --ink:#1F1B18; --paper:#FBF8F2; --paper-2:#F3EDE0; --muted:#6E6258; --rule:#C9BFA9; --rule-2:#E7E2D5; --gold:#8A6F3B;
  --blue:#2a78d6; --blue-100:#cde2fb; --aqua:#1baf7a; --orange:#eb6834;
  --good:#0ca30c; --good-bg:#e6f5e6; --warn:#b07a00; --warn-bg:#fbf1d6; --bad:#d03b3b; --bad-bg:#f9e3e3; --info:#2C4A6B; --info-bg:#e3e9f1;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
  --sidebar:232px; --radius:6px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html { font-size:15px; }
body { margin:0; font-family:var(--font); font-size:1rem; line-height:1.45; color:var(--ink); background:var(--paper); font-variant-numeric:tabular-nums; }
a { color:var(--info); text-decoration:none; } a:hover { text-decoration:underline; }
h1, h2, h3, h4 { font-weight:600; line-height:1.25; margin:0; }
h1 { font-size:1.6rem; } h2 { font-size:1.15rem; margin:var(--s4) 0 var(--s2); } h3 { font-size:1rem; margin:var(--s3) 0 var(--s2); }
p { margin:0 0 var(--s2); }
code, pre, .mono { font-family:var(--mono); font-size:.85em; }
pre { background:#fff; border:1px solid var(--rule-2); border-radius:var(--radius); padding:var(--s2) var(--s3); overflow:auto; max-height:560px; font-size:.8rem; line-height:1.4; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* layout */
.shell { display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh; }
.sidebar { background:var(--ink); color:#fff; padding:var(--s3) 0; position:sticky; top:0; height:100vh; overflow:auto; display:flex; flex-direction:column; }
.sidebar .brand { padding:0 var(--s3) var(--s3); font-weight:600; letter-spacing:.03em; color:#fff; display:block; border-bottom:1px solid rgba(255,255,255,.12); }
.sidebar .brand small { display:block; font-weight:400; color:rgba(255,255,255,.6); font-size:.78rem; letter-spacing:0; }
.vswitch { display:flex; gap:var(--s1); padding:var(--s3) var(--s3) var(--s2); }
.vswitch a { flex:1; text-align:center; padding:6px 0; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:var(--radius); font-size:.85rem; }
.vswitch a.on { background:#fff; color:var(--ink); border-color:#fff; }
.sidebar nav { display:flex; flex-direction:column; padding:var(--s2) 0; }
.sidebar nav a { color:rgba(255,255,255,.82); padding:7px var(--s3); display:flex; justify-content:space-between; align-items:center; font-size:.93rem; }
.sidebar nav a:hover { background:rgba(255,255,255,.08); text-decoration:none; color:#fff; }
.sidebar nav a.on { background:rgba(255,255,255,.14); color:#fff; border-left:3px solid var(--gold); padding-left:13px; }
.sidebar nav .sep { border-top:1px solid rgba(255,255,255,.12); margin:var(--s2) 0; }
.sidebar .bottom { margin-top:auto; }
.badge { display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:var(--gold); color:#fff; font-size:.72rem; text-align:center; line-height:18px; }
.badge.zero { display:none; }
.topbar { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s4); border-bottom:1px solid var(--rule-2); background:#fff; position:sticky; top:0; z-index:5; }
.topbar form { flex:1; max-width:520px; display:flex; }
.topbar input[type=search] { flex:1; padding:7px 12px; border:1px solid var(--rule); border-radius:var(--radius) 0 0 var(--radius); font:inherit; }
.topbar button { border-radius:0 var(--radius) var(--radius) 0; }
.topbar .me { margin-left:auto; display:flex; align-items:center; gap:var(--s2); font-size:.88rem; color:var(--muted); }
.topbar .roles { font-size:.78rem; color:var(--muted); }
.menu-toggle { display:none; }
main { padding:var(--s4); max-width:1400px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4); }
.page-head .crumbs { font-size:.82rem; color:var(--muted); margin-bottom:var(--s1); }
.page-head .crumbs a { color:var(--muted); }
.page-head .actions { display:flex; gap:var(--s2); flex-wrap:wrap; }
.sub { color:var(--muted); font-size:.9rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .tiny { font-size:.78rem; }

/* cards and grids */
.grid { display:grid; gap:var(--s3); } .grid.two { grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); } .grid.three { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.card { background:#fff; border:1px solid var(--rule-2); border-radius:var(--radius); padding:var(--s3); }
.card > h2:first-child, .card > h3:first-child { margin-top:0; }
.card.pad0 { padding:0; } .card.pad0 table { margin:0; }
.card .foot { border-top:1px solid var(--rule-2); margin:var(--s3) calc(-1 * var(--s3)) 0; padding:var(--s2) var(--s3) 0; font-size:.85rem; color:var(--muted); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:var(--s2); margin-bottom:var(--s3); }
.kpi { background:#fff; border:1px solid var(--rule-2); border-radius:var(--radius); padding:var(--s2) var(--s3); }
.kpi .k { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.kpi .v { font-size:1.35rem; font-weight:600; margin-top:2px; }
.kpi .d { font-size:.8rem; }
.delta.up { color:var(--good); } .delta.down { color:var(--bad); }
.chart svg { width:100%; height:auto; display:block; }
.empty { padding:var(--s4); text-align:center; color:var(--muted); border:1px dashed var(--rule); border-radius:var(--radius); }
.empty a { font-weight:600; }

/* tables */
table { border-collapse:collapse; width:100%; font-size:.88rem; margin:var(--s2) 0 var(--s3); background:#fff; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--rule-2); vertical-align:top; }
th { background:var(--paper-2); font-weight:600; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
th a { color:var(--muted); } th a.on { color:var(--ink); }
td.num, th.num { text-align:right; white-space:nowrap; }
tr.total td { font-weight:600; border-top:2px solid var(--rule); background:var(--paper-2); }
tbody tr:hover td { background:#fdfcf9; }
table.compact th, table.compact td { padding:4px 8px; font-size:.82rem; }
.table-wrap { overflow-x:auto; }
.filters { display:flex; gap:var(--s2); flex-wrap:wrap; align-items:flex-end; margin-bottom:var(--s2); }
.filters label { font-size:.78rem; color:var(--muted); display:block; }
.filters input, .filters select { padding:5px 8px; border:1px solid var(--rule); border-radius:var(--radius); font:inherit; font-size:.88rem; }
.chips a, .chips span { display:inline-block; padding:2px 10px; border:1px solid var(--rule); border-radius:12px; font-size:.8rem; margin:0 4px 4px 0; color:var(--ink); background:#fff; }
.chips a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.pager { display:flex; gap:var(--s2); align-items:center; font-size:.85rem; color:var(--muted); }

/* states */
.state { display:inline-block; padding:1px 9px; border-radius:10px; font-size:.75rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.state.good { background:var(--good-bg); color:#0a6b0a; } .state.bad { background:var(--bad-bg); color:var(--bad); }
.state.warn { background:var(--warn-bg); color:var(--warn); } .state.info { background:var(--info-bg); color:var(--info); }
.state.muted { background:var(--paper-2); color:var(--muted); }
.notice { padding:var(--s2) var(--s3); border-left:3px solid var(--info); background:var(--info-bg); border-radius:0 var(--radius) var(--radius) 0; margin:var(--s2) 0; }
.notice.ok { border-color:var(--good); background:var(--good-bg); } .notice.bad { border-color:var(--bad); background:var(--bad-bg); } .notice.warn { border-color:var(--warn); background:var(--warn-bg); }
.messages { list-style:none; padding:0; margin:0 0 var(--s3); } .messages li { padding:var(--s2) var(--s3); margin:var(--s1) 0; border-radius:var(--radius); background:var(--info-bg); border-left:3px solid var(--info); }
.messages li.error { background:var(--bad-bg); border-color:var(--bad); } .messages li.success { background:var(--good-bg); border-color:var(--good); } .messages li.warning { background:var(--warn-bg); border-color:var(--warn); }

/* forms and buttons */
form p { margin:0 0 var(--s2); } label { display:block; color:var(--muted); font-size:.82rem; margin-bottom:2px; }
input[type=text], input[type=date], input[type=number], input[type=password], input[type=email], input[type=file], select, textarea {
  width:100%; max-width:560px; padding:7px 10px; font:inherit; border:1px solid var(--rule); border-radius:var(--radius); background:#fff; }
textarea { min-height:72px; }
.helptext { display:block; color:var(--muted); font-size:.78rem; margin-top:2px; }
.errorlist { color:var(--bad); margin:2px 0 var(--s1); padding-left:18px; font-size:.82rem; }
button, .button { font:inherit; font-size:.9rem; padding:7px 14px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; border-radius:var(--radius); line-height:1.3; }
button:hover, .button:hover { background:#3a332e; text-decoration:none; }
button.secondary, .button.secondary { background:#fff; color:var(--ink); } button.secondary:hover, .button.secondary:hover { background:var(--paper-2); }
button.primary, .button.primary { background:var(--gold); border-color:var(--gold); } button.primary:hover { background:#73592c; }
button.danger, .button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.small, .button.small { padding:3px 10px; font-size:.8rem; }
button.link { background:none; border:none; color:var(--info); padding:0; font-size:inherit; } button.link:hover { text-decoration:underline; background:none; }
.inline { display:inline; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 var(--s3); }
.form-grid .wide { grid-column:1 / -1; }
details summary { cursor:pointer; color:var(--info); margin:var(--s2) 0; }
.tabs { display:flex; gap:var(--s3); border-bottom:1px solid var(--rule-2); margin:var(--s3) 0; flex-wrap:wrap; }
.tabs a { padding:6px 2px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a.on, .tabs a:hover { color:var(--ink); border-color:var(--gold); text-decoration:none; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { display:flex; gap:var(--s2); padding:4px 0; border-left:2px solid var(--rule-2); padding-left:var(--s3); position:relative; font-size:.88rem; }
.timeline li::before { content:""; position:absolute; left:-6px; top:10px; width:10px; height:10px; border-radius:50%; background:var(--rule); }
.timeline li.done::before { background:var(--good); }
.timeline .d { color:var(--muted); min-width:100px; }
.steps { display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s2) 0 var(--s3); }
.steps .step { flex:1 1 140px; padding:var(--s2) var(--s3); border:1px solid var(--rule-2); border-radius:var(--radius); background:#fff; font-size:.82rem; }
.steps .step.done { border-color:var(--good); background:var(--good-bg); }
.steps .step b { display:block; text-transform:capitalize; }
.comment { border-bottom:1px solid var(--rule-2); padding:var(--s2) 0; }
.comment .who { font-size:.8rem; color:var(--muted); }
.bars .bar { display:flex; align-items:center; gap:var(--s2); font-size:.85rem; margin:3px 0; }
.bars .bar .track { flex:1; height:8px; background:var(--paper-2); border-radius:4px; overflow:hidden; }
.bars .bar .fill { height:100%; background:var(--blue); } .bars .bar .fill.full { background:var(--good); }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px var(--s3); font-size:.9rem; }
.kv dt { color:var(--muted); } .kv dd { margin:0; }
.login { max-width:380px; margin:10vh auto; }
.yaml-preview { background:var(--paper-2); }
.docs li { padding:3px 0; }
.wrap { white-space:normal; }
.nowrap { white-space:nowrap; }

@media (max-width: 960px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; display:none; }
  .sidebar.open { display:flex; }
  .menu-toggle { display:inline-block; }
  main { padding:var(--s3); }
  .kpi .v { font-size:1.15rem; }
  html { font-size:14px; }
  .topbar { flex-wrap:wrap; } .topbar form { max-width:none; width:100%; order:3; }
}
@media print {
  .sidebar, .topbar, .page-head .actions, .messages, button, .button, form.noprint, .no-print { display:none !important; }
  .shell { display:block; } main { padding:0; max-width:none; }
  body { background:#fff; color:#000; font-size:11pt; }
  .card { border:none; padding:0; page-break-inside:avoid; } table { font-size:9.5pt; }
  a { color:#000; } .state { border:1px solid #999; }
  h1::after { content:"  (printed from the Cultured console)"; font-weight:400; font-size:.8rem; color:#555; }
}