
:root{
  --ink:#16160f;--ink-2:#3a3a30;--ink-3:#6b6b5e;
  --paper:#f7f7ee;--paper-2:#efeee2;--line:#d9d7c6;
  --gold:#c5a059;--gold-deep:#7a5c1c;--gold-soft:#f1e6c8;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --card:#ffffff;
  --green:#2f6b3a;--green-soft:#dfeede;--amber:#8a5a00;--amber-soft:#f6e7c4;
  --red:#a83a2a;--red-soft:#f6e1dc;--blue:#2b4f8a;--blue-soft:#e0e8f5;--slate:#64748b;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#f0eee2;--ink-2:#c9c7b8;--ink-3:#9a988a;
  --paper:#15150f;--paper-2:#1e1e16;--line:#34342a;
  --gold:#d2b06a;--gold-deep:#e8cf92;--gold-soft:#2b2617;
  --card:#1b1b14;
  --green:#8fcf9a;--green-soft:#1c2f20;--amber:#e8c16a;--amber-soft:#33280f;
  --red:#e08a7a;--red-soft:#3a1f1a;--blue:#9db7e8;--blue-soft:#1b2540;--slate:#94a3b8;}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;height:100%}
a{color:var(--gold-deep)}
.wrap{max-width:960px;margin:0 auto;padding-inline:20px;padding-bottom:60px;}

/* Login Gate */
#login-gate {
  position: fixed;
  inset: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 20px;
}
#login-gate h1 { font-family: var(--display); font-size: 32px; font-weight: 600; margin-bottom: 20px; }
#login-gate input {
  font-family: var(--body);
  font-size: 16px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 4px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 300px;
}
#login-gate button {
  font-family: var(--body);
  font-size: 16px;
  padding: 10px 24px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  max-width: 300px;
}
#login-gate button:hover { background: var(--ink-2); }
#login-error { color: #d32f2f; font-size: 14px; margin-top: 10px; display: none; }

/* Dashboard Layout */
#dashboard[hidden], #login-gate[hidden] { display: none; }
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;border-bottom:1px solid var(--line)}
.mark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.01em;text-decoration:none;color:var(--ink)}
.mark span{color:var(--gold-deep)}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:14px}
nav a{text-decoration:none;color:var(--ink-2)}
nav a:hover{color:var(--gold-deep)}

header.page-header { padding-block: 40px 30px; border-bottom: 2px solid var(--gold); }
h1.page-title { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 6vw, 48px); line-height: 1.1; margin: 0 0 10px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.note { color: var(--ink-2); font-size: 15px; margin-top: 6px; }

section{padding-block:40px;border-bottom:1px solid var(--line)}
h2{font-family:var(--display);font-weight:600;font-size:28px;margin:0 0 24px}
h3{font-family:var(--display);font-size:22px;font-weight:600;margin:0 0 12px}

/* Grid systems */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 30px; }

/* Company details */
.detail-item { display: flex; flex-direction: column; gap: 4px; }
.detail-item small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.detail-item b { font-weight: 500; font-size: 15px; }

/* Todos */
.todo-group { margin-bottom: 24px; }
.todo-group h4 { font-family: var(--body); font-weight: 600; font-size: 14px; margin: 0 0 10px; color: var(--ink-2); }
.todo-list { list-style: none; padding: 0; margin: 0; }
.todo-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.todo-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--gold-deep); width: 16px; height: 16px; flex-shrink: 0; }
.todo-item label { cursor: pointer; color: var(--ink); line-height: 1.4; }
.todo-item input:checked + label { text-decoration: line-through; color: var(--ink-3); }

/* Tracks */
.track-group { margin-bottom: 40px; }
.track-priority { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--gold-deep); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.track-card { background: var(--paper-2); border: 1px solid var(--line); padding: 20px; border-radius: 6px; margin-bottom: 16px; }
.track-card header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.track-num { font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-weight: 500; }
.track-title { font-size: 18px; font-weight: 600; font-family: var(--display); margin: 0; color: var(--ink); }
.track-meta { font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.track-meta span { background: var(--paper); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line); }
.track-status { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }

/* Links */
.links-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.link-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; transition: border-color 0.2s; }
.link-card:hover { border-color: var(--gold-deep); }
.link-name { font-weight: 600; color: var(--ink); }
.link-url { font-family: var(--mono); font-size: 12px; color: var(--gold-deep); word-break: break-all; }
.link-note { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

.badge-planned { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--paper-2); color: var(--ink-3); margin-left: 8px; vertical-align: middle; }

@media (max-width: 600px) {
  .top { flex-direction: column; align-items: flex-start; }
}

#auth-status { max-width: 420px; text-align: center; }
#logout-btn { cursor:pointer; padding:8px 16px; }

/* Live console (Firestore) */
.empty { color: var(--ink-3); font-size: 14px; margin: 0; }
.panel-error { color: var(--red); background: var(--red-soft); border-radius: 6px; padding: 10px 12px; font-size: 14px; margin: 0; }
.muted { color: var(--ink-3); font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12px; }
.count { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 8px; }
.badge { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.badge.warn { background: var(--red-soft); color: var(--red); font-weight: 600; }
#mission h3, #todos h3 { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 22px 0 10px; }
.mc-head, .mc-controller, .mc-feeder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.agent { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0; }
.agent-name { display: flex; align-items: center; gap: 8px; }
.agent-meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; overflow-wrap: anywhere; }
.lamp { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--red); }
.lamp-green { background: var(--green); }
.lamp-amber { background: var(--amber); }
.lamp-red { background: var(--red); }
.lamp-slate { background: var(--slate); }
.lamp-label { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: auto; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; text-align: center; }
.stat b { display: block; font-family: var(--mono); font-size: 20px; font-weight: 500; }
.stat small { font-size: 12px; color: var(--ink-3); }
.stat.bad { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.receipts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.receipts li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 14px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.receipt.path { font-family: var(--mono); font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.errors li, .item-states li { min-width: 0; overflow-wrap: anywhere; }
.errors li { border-left: 3px solid var(--red); padding-left: 8px; }
.errors .mono { color: var(--red); }

.todo-group h3 small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 8px; }
.item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.item.done { opacity: .6; }
.item.done .t { text-decoration: line-through; }
.item > input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold-deep); cursor: pointer; }
.item-body { min-width: 0; }
.item .t { font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.item .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.pill { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.pill.owner-needs_you { background: var(--gold-soft); color: var(--gold-deep); }
.pill.agent, .pill.info { background: var(--blue-soft); color: var(--blue); }
.pill.good { background: var(--green-soft); color: var(--green); }
.pill.bad { background: var(--red-soft); color: var(--red); font-weight: 600; }
a.pill.receipt { border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold-deep); }
.item .auto { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.item .auto input { accent-color: var(--blue); }
.item .auto input:disabled + span { color: var(--ink-3); }
.item .prompt { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.item .prompt summary { cursor: pointer; font-family: var(--mono); font-size: 12px; }
.item .prompt div { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }
.item .notes { font-size: 13px; color: var(--ink-2); margin-top: 6px; overflow-wrap: anywhere; }
.item .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.item .links a { font-size: 13px; text-decoration: none; border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold-deep); border-radius: 6px; padding: 4px 10px; }

.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lane { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.lane b { display: block; font-family: var(--mono); font-size: 12px; }
.lane .state { display: inline-block; margin-top: 4px; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.lane .state[data-s="green"], .lane .state[data-s="pass"] { background: var(--green-soft); color: var(--green); }
.lane .state[data-s="awaiting_bobby"], .lane .state[data-s="gated"] { background: var(--red-soft); color: var(--red); }
.lane .state[data-s="building"], .lane .state[data-s="active"], .lane .state[data-s="pilot"] { background: var(--blue-soft); color: var(--blue); }
.lane .sum { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; }
.lane .when { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }

@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.todo-group h4 small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); margin-left: 8px; }
.track-section, .admin-section { border-top: 1px solid var(--line); padding-top: 4px; }
.track-row { margin: -4px 0 6px; }
.pill.prio { background: var(--gold-soft); color: var(--gold-deep); font-weight: 600; }
.track-status-text { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; overflow-wrap: anywhere; }
.admin-section h4 { margin-top: 16px; }
details.snapshot { margin-top: 16px; }
details.snapshot summary { cursor: pointer; font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
