*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Brand tokens (exact match to logo/styles/tokens.css) ── */
/* Topo Day — light surface */
:root, html[data-bm-theme="day"] {
  --bg:#fafaf7;--bg-elev:#ffffff;--bg-elev-2:#f1f0ea;
  --line:#e3e2dc;--line-soft:#ededea;
  --ink:#111714;--ink-2:#4a5048;--ink-3:#8a8d86;--ink-4:#bcbfb9;
  --water:#2c7a6b;--water-2:#1f5a4e;--water-soft:#d8e8e3;
  --dry:#b56a30;--dry-soft:#f1e2cf;
  --alarm:#9c3a23;--alarm-soft:#f0d8d0;
  --snow:#4a6a82;--snow-soft:#dde5ed;
  --crop:#5a7a3a;
  /* Admin component aliases */
  --surface:var(--bg-elev);--border:var(--line);--text:var(--ink);--muted:var(--ink-3);
  --farmer:#16a34a;--dwr:#7c3aed;--amber:#d97706;--danger:#9c3a23;--danger-l:var(--alarm-soft);
}
/* Watershed Dark — primary brand surface */
html[data-bm-theme="dark"] {
  --bg:#0d1410;--bg-elev:#141b17;--bg-elev-2:#1a221d;
  --line:#232c27;--line-soft:#1c2521;
  --ink:#ece4cf;--ink-2:#b6b09f;--ink-3:#7a7568;--ink-4:#4d4a43;
  --water:oklch(.68 .12 250);--water-2:oklch(.58 .115 252);--water-soft:oklch(.32 .05 252);
  --dry:#c79461;--dry-soft:#3a2d20;
  --alarm:#b86247;--alarm-soft:#3a221b;
  --snow:#b8c9d6;--snow-soft:#1f2932;
  --crop:#9bb37a;
  /* Admin component aliases */
  --surface:var(--bg-elev);--border:var(--line);--text:var(--ink);--muted:var(--ink-3);
  --farmer:#22c55e;--dwr:#a78bfa;--amber:#f59e0b;--danger:#f87171;--danger-l:var(--alarm-soft);
}
:root{
  --radius:14px;
  --font:"Inter Tight",-apple-system,system-ui,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
body{
  font-family:var(--font);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-0.005em;
  background:var(--bg);color:var(--ink);
  /* Full-height layout, push content below fixed chrome (top:14px + ~54px height + 10px gap) */
  height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:78px;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}

/* ── Admin-specific chrome overrides ── */
/* Nav scrolls horizontally so all 10 tabs fit at any width */
#bm-chrome .chr-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:1;min-width:0}
/* Admin tabs are slightly smaller to fit 10 items */
#bm-chrome button.chr-nav-a{font-size:11.5px;padding:4px 8px}
/* 🎯 Demo button — amber highlight, same in dark and light */
#demo-nav-tab{color:#854d0e!important;background:rgba(254,243,199,.9)!important}
#demo-nav-tab.active{background:#854d0e!important;color:#fff!important}
html[data-bm-theme="dark"] #demo-nav-tab{color:#fde68a!important;background:rgba(146,64,14,.25)!important}
html[data-bm-theme="dark"] #demo-nav-tab.active{background:#d97706!important;color:#fff!important}
/* ── Layout — fills viewport below fixed chrome ── */
.adm-body{display:flex;flex:1;min-height:0;overflow:hidden}
.main{flex:1;overflow-y:auto;padding:1.5rem;height:100%}

/* ── Skill pill bar — persona selector below chrome header ── */
#skill-pill-bar{
  display:flex;align-items:center;gap:.3rem;
  padding:.45rem 1.25rem;
  border-bottom:1px solid var(--line);
  background:var(--bg-elev);
  flex-shrink:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#skill-pill-bar::-webkit-scrollbar{display:none}
/* .persona-pill styles live in bm-shared.css */

/* ── Cards — use brand bm-card tokens ── */
.card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.card+.card{margin-top:1rem}
.card-title{font-size:.85rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.card-subtitle{font-size:.72rem;color:var(--ink-3);font-weight:400;margin-top:.1rem}

/* ── Status badges — use brand semantic colors ── */
.status{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:600;padding:.18rem .55rem;border-radius:99px;white-space:nowrap}
.status-live{background:var(--water-soft);color:var(--water)}
.status-off{background:var(--alarm-soft);color:var(--alarm)}
.status-p1{background:var(--water-soft);color:var(--water-2)}
.status-p2{background:var(--dry-soft);color:var(--dry)}
.status-p3{background:var(--bg-elev-2);color:var(--ink-3)}
.status-p4{background:var(--snow-soft);color:var(--snow)}
.status-p5{background:var(--crop-soft,var(--bg-elev-2));color:var(--crop)}

/* ── Skill editor ── */
.skill-tabs{display:flex;gap:.35rem;margin-bottom:1rem;flex-wrap:wrap}
.skill-tab{background:none;border:1px solid var(--line);border-radius:8px;padding:.3rem .72rem;font-family:var(--font);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--ink-3);transition:all .15s}
.skill-tab:hover{border-color:var(--ink);color:var(--ink)}
.skill-tab.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.skill-editor{display:none}
.skill-editor.show{display:block}
textarea.skill-ta{width:100%;font-family:var(--mono);font-size:.78rem;line-height:1.65;padding:.85rem;border:1px solid var(--line);border-radius:10px;resize:vertical;min-height:420px;outline:none;background:var(--bg);color:var(--ink);transition:border-color .15s}
textarea.skill-ta:focus{border-color:var(--water)}
.skill-actions{display:flex;gap:.5rem;margin-top:.75rem;align-items:center}

/* ── Buttons ── */
.btn{border:none;border-radius:9px;padding:.4rem .9rem;font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{opacity:.82}
.btn-secondary{background:none;border:1px solid var(--line);color:var(--ink-3)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-danger{background:var(--alarm-soft);color:var(--alarm);border:1px solid var(--alarm)}
.btn-danger:hover{background:var(--alarm);color:var(--bg)}
.btn-success{background:var(--water-soft);color:var(--water);border:1px solid var(--water)}
.save-msg{font-size:.72rem;color:var(--crop);font-weight:600;display:none}
.save-msg.show{display:inline}

/* ── Docs viewer ── */
.doc-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.doc-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border:1px solid var(--line);border-radius:8px;background:var(--bg-elev);cursor:pointer;transition:border-color .15s}
.doc-item:hover{border-color:var(--ink)}
.doc-item.active{border-color:var(--water);background:var(--bg-elev-2)}
.doc-name{font-size:.8rem;font-weight:600;flex:1}
.doc-meta{font-size:.65rem;color:var(--ink-3)}
.doc-content{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:1.25rem;font-size:.8rem;line-height:1.7;white-space:pre-wrap;font-family:inherit;max-height:600px;overflow-y:auto;display:none}
.doc-content.show{display:block}
.doc-content h1,.doc-content h2,.doc-content h3{font-weight:700;margin:.75rem 0 .3rem;color:var(--ink)}
.doc-content h1{font-size:1.1rem}
.doc-content h2{font-size:.95rem}
.doc-content h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.doc-content code{background:var(--bg-elev-2);border:1px solid var(--line);border-radius:4px;padding:.1rem .3rem;font-size:.78rem;font-family:var(--mono)}
.doc-content pre{background:var(--bg-elev-2);border:1px solid var(--line);border-radius:8px;padding:.75rem;overflow-x:auto;margin:.5rem 0}

/* ── Phase table ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.phase-table{width:100%;min-width:600px;border-collapse:collapse;font-size:.78rem}
.phase-table th{text-align:left;padding:.5rem .75rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);border-bottom:1px solid var(--line)}
.phase-table td{padding:.5rem .75rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.phase-table tr:last-child td{border-bottom:none}
.phase-table tr:hover td{background:var(--bg)}

/* ── Tabs content ── */
.tab-content{display:none}
.tab-content.show{display:block}

/* ── Responsive ── */
@media(max-width:640px){
  body{padding-top:70px}
  #skill-pill-bar{padding:.35rem .75rem;gap:.25rem}
  #skill-pill-bar .persona-pill{font-size:.7rem;padding:.25rem .6rem}
  .main{padding:1rem}
  .status-grid{grid-template-columns:1fr 1fr}
  .phase-table{font-size:.7rem}
  .phase-table th,.phase-table td{padding:.4rem .5rem}
  textarea.skill-ta{min-height:320px;font-size:14px}
  .skill-tabs{gap:.25rem}
  .skill-tab{font-size:.7rem;padding:.28rem .55rem}
  .mcp-item{flex-wrap:wrap;gap:.4rem}
  .abtn,.btn,.skill-tab{min-height:44px;touch-action:manipulation}
}
/* ── iPad portrait ── */
@media(min-width:641px) and (max-width:1024px){
  .main{padding:1.25rem}
}
/* ── Safe areas ── */
@supports(padding:env(safe-area-inset-bottom)){
  .main{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
}

/* ── MCP registry ── */
.mcp-list{display:flex;flex-direction:column;gap:.5rem}
.mcp-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;background:var(--bg);border-radius:8px;border:1px solid var(--line)}
.mcp-icon{font-size:1.3rem;flex-shrink:0}
.mcp-info{flex:1;min-width:0}
.mcp-name{font-size:.8rem;font-weight:600}
.mcp-url{font-size:.65rem;color:var(--ink-3);margin-top:.1rem}
.mcp-right{flex-shrink:0;text-align:right}

/* ── System status ── */
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-bottom:.5rem}
.status-card{background:var(--bg);border-radius:8px;padding:.65rem .75rem;border:1px solid var(--line)}
.sc-label{font-size:.65rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem}
.sc-value{font-size:1.2rem;font-weight:700;line-height:1.2}
.sc-sub{font-size:.62rem;color:var(--ink-3);margin-top:.15rem}
/* Skill badge */
.skill-badge{font-size:.62rem;font-weight:700;padding:.12rem .45rem;border-radius:99px;margin-left:.35rem}
/* Log */
.log-empty{padding:2rem;text-align:center;color:var(--ink-3);font-size:.8rem}
.log-entry{padding:.55rem .75rem;border-bottom:1px solid var(--line);font-size:.75rem;line-height:1.5}
.log-time{font-size:.63rem;color:var(--ink-3);margin-bottom:.15rem}

/* ── Markdown split-pane preview ── */
.skill-pane{display:block}
.skill-pane.split{display:flex;gap:.75rem;align-items:flex-start}
.skill-pane.split .skill-ta{flex:1;min-width:0}
.md-preview{display:none;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:.85rem;background:var(--bg);font-size:.78rem;line-height:1.65;color:var(--ink)}
.skill-pane.split .md-preview{display:block;flex:1;min-width:0;min-height:420px;max-height:560px}
.md-preview h1{font-size:1.1rem;font-weight:700;margin:.75rem 0 .3rem;color:var(--ink)}
.md-preview h2{font-size:.95rem;font-weight:700;margin:.65rem 0 .25rem;color:var(--ink)}
.md-preview h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:.6rem 0 .2rem}
.md-preview h4{font-size:.78rem;font-weight:600;color:var(--ink-2);margin:.5rem 0 .15rem}
.md-preview p{margin:.35rem 0}
.md-preview ul,.md-preview ol{padding-left:1.25rem;margin:.35rem 0}
.md-preview li{margin:.15rem 0}
.md-preview blockquote{border-left:3px solid var(--line);padding:.35rem .75rem;color:var(--ink-3);margin:.4rem 0;font-style:italic}
.md-preview hr{border:none;border-top:1px solid var(--line);margin:.75rem 0}
.md-preview code{background:var(--bg-elev-2);border:1px solid var(--line);border-radius:4px;padding:.1rem .3rem;font-size:.75rem;font-family:var(--mono)}
.md-preview pre{background:var(--bg-elev-2);border:1px solid var(--line);border-radius:8px;padding:.75rem;overflow-x:auto;margin:.5rem 0;font-family:var(--mono);font-size:.75rem;line-height:1.5}
.md-preview strong{font-weight:700}
.md-preview em{font-style:italic}
.md-preview .md-empty{color:var(--ink-4);font-style:italic;font-size:.75rem}
.md-btn-split{background:none;border:1px solid var(--line);color:var(--ink-3);border-radius:7px;padding:.25rem .65rem;font-size:.72rem;font-family:var(--font);cursor:pointer;transition:all .15s;line-height:1.4}
.md-btn-split:hover{border-color:var(--water);color:var(--water)}
.md-btn-split.on{border-color:var(--water);color:var(--water);background:var(--water-soft)}
@media(max-width:900px){.skill-pane.split{flex-direction:column}}