/* Cartographer console.
   Tokens carried over from the original panel (teal #155e63, cool grey ground,
   warm status ramp) so the share page and this app stay one product. Newsreader
   for headings and figures; system-ui for chrome; mono for ids and locators. */

:root {
  --ink:#1a1e24; --ink-2:#3d444d; --muted:#6a7280; --faint:#8a929c; --ghost:#a4abb4;
  --line:#e2e6ec; --line-2:#eef1f5; --bg:#f6f7f9; --surface:#fff;
  --accent:#155e63; --accent-dk:#0e4448; --accent-lt:#f7fafa; --accent-bd:#d3e2e1;
  --rail:#103e42; --rail-2:#0b3034; --rail-line:#1d5359; --rail-ink:#a9c5c5; --rail-dim:#7d9c9c;
  --ok:#2e7d4f; --ok-bg:#e2efe6; --warn:#b0762a; --warn-ink:#8a6a2a; --warn-bg:#fbf7ef;
  --warn-bd:#eee0c8; --crit:#a13333; --crit-bg:#f8e3e3; --crit-bd:#f0dada;
  --serif:Newsreader, Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
       color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-dk); text-decoration:underline; }
button { font:inherit; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
h1,h2,h3 { margin:0; }
[hidden] { display:none !important; }

/* ---- guide editor ---- */
.gact { display:flex; flex-direction:column; gap:6px; }
.gnum { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--accent-lt);
        border:1px solid var(--accent-bd); color:var(--accent); font-size:12px; font-weight:600;
        display:flex; align-items:center; justify-content:center; margin-top:2px; }
.gdesc { margin-left:34px; color:var(--ink-2); }
.gsteps { list-style:none; margin:4px 0 0 34px; padding:0; display:flex; flex-direction:column; gap:6px; }
.gstep { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border:1px solid var(--line-2);
         border-radius:6px; background:var(--surface); }
.gstep:hover { border-color:var(--line); }
.gsnum { flex-shrink:0; min-width:30px; font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:2px; }
.gtools { gap:2px; flex-shrink:0; opacity:.55; }
.gact:hover > .row > .gtools, .gstep:hover > .gtools, .gtools:focus-within { opacity:1; }
.gtool { width:28px; height:28px; border:1px solid transparent; border-radius:5px; background:none;
         color:var(--ink-2); font-size:13px; line-height:1; }
.gtool:hover:not(:disabled) { background:#f1f4f6; border-color:var(--line); }
.inline { cursor:text; border-radius:4px; padding:1px 3px; margin:-1px -3px; }
.inline[tabindex]:hover, .inline[tabindex]:focus { background:var(--accent-lt); outline:1px dashed var(--accent-bd); }
.inline-edit { font:inherit; color:inherit; width:100%; border:1px solid var(--accent); border-radius:5px;
               padding:4px 6px; background:#fff; }
textarea.inline-edit { resize:vertical; min-height:64px; }
.gshot { display:block; margin-top:8px; max-width:460px; border:1px solid var(--line); border-radius:5px;
         overflow:hidden; }
.gshot img { display:block; width:100%; height:auto; }
.annot-holder { position:relative; line-height:0; }
.annot-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.modal-card.annot-card { width:min(980px, 100%); max-height:94vh; overflow:auto; }
.annot-stage { cursor:crosshair; touch-action:none; user-select:none; border:1px solid var(--line);
               border-radius:5px; overflow:hidden; }
.annot-stage img { display:block; width:100%; height:auto; -webkit-user-drag:none; }
.gshot.gone { padding:10px 12px; font-size:12.5px; color:var(--warn-ink); background:var(--warn-bg);
              border-color:var(--warn-bd); }
@media (max-width:900px) {
  .gsteps, .gdesc { margin-left:0; }
  .gstep { flex-wrap:wrap; }
  .gstep > .gtools { width:100%; justify-content:flex-end; }
  .gtools { opacity:1; }
}

.shell { display:flex; min-height:100vh; }

/* ---- rail ---- */
.rail { width:248px; flex-shrink:0; background:var(--rail); display:flex; flex-direction:column;
        position:sticky; top:0; height:100vh; }
.brand { padding:20px 18px 16px; display:flex; align-items:center; gap:9px; }
.brand span { font-family:var(--serif); font-size:18.5px; color:#fff; }
.ws { margin:0 12px 18px; padding:11px 12px; background:var(--rail-2); border:1px solid var(--rail-line);
      border-radius:7px; display:flex; align-items:center; gap:10px; width:calc(100% - 24px);
      text-align:left; color:inherit; }
.ws:hover { border-color:#2b7b7f; }
.ws-badge { width:28px; height:28px; border-radius:5px; background:var(--accent); color:#c9e8e3;
            display:flex; align-items:center; justify-content:center; font:600 11px system-ui; flex-shrink:0; }
.ws-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden;
           text-overflow:ellipsis; }
.ws-sub { font-size:11.5px; color:var(--rail-dim); }
.nav { display:flex; flex-direction:column; gap:1px; padding:0 8px; }
.nav a { display:flex; align-items:center; gap:10px; border-radius:6px; padding:9px 10px;
         font-size:13.5px; color:var(--rail-ink); text-decoration:none; }
.nav a:hover { background:#164a4f; color:#fff; text-decoration:none; }
.nav a.on { background:#1d6167; color:#fff; font-weight:600; }
.nav .count { font:600 11px system-ui; padding:1px 6px; border-radius:9px; background:#164a4f;
              color:var(--rail-dim); }
.nav a.on .count { background:#2b7b7f; color:#d9efee; }
.rail-foot { margin-top:auto; }
.retention { margin:0 12px 14px; padding:12px; background:var(--rail-2); border-radius:7px;
             border:1px solid var(--rail-line); font-size:12.5px; color:var(--rail-ink); line-height:1.45; }
.whoami { border-top:1px solid var(--rail-line); padding:13px 16px; display:flex; align-items:center; gap:10px; }
.avatar { width:29px; height:29px; border-radius:50%; background:#2b7b7f; color:#fff; display:flex;
          align-items:center; justify-content:center; font:600 11.5px system-ui; flex-shrink:0; }

/* ---- main ---- */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height:57px; flex-shrink:0; background:var(--surface); border-bottom:1px solid var(--line);
          display:flex; align-items:center; gap:12px; padding:0 26px; position:sticky; top:0; z-index:5; }
.topbar h1 { font-family:var(--serif); font-size:19px; font-weight:500; }
.topbar .sub { font-size:12.5px; color:var(--faint); }
.view { padding:24px 26px 60px; }
.cols { display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:18px; align-items:start; }
.stack { display:flex; flex-direction:column; gap:18px; min-width:0; }

/* ---- surfaces ---- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.card-pad { padding:18px; }
.card-hd { padding:13px 18px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:10px; }
.lbl { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
       color:var(--faint); margin:0; }
.lbl.accent { color:var(--accent); }
.mono { font-family:var(--mono); }
.fig { font-family:var(--serif); font-weight:500; line-height:1; }
.spacer { flex:1; }
.muted { color:var(--muted); }
.faint { color:var(--faint); font-size:12.5px; }
.row { display:flex; align-items:center; gap:10px; }

/* ---- controls ---- */
.btn { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:0 14px;
       height:34px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.btn:hover:not(:disabled) { background:var(--accent-dk); }
.btn.ghost { background:var(--surface); color:var(--ink-2); border:1px solid #d8dce2; font-weight:400; }
.btn.ghost:hover:not(:disabled) { background:#f4f6f8; border-color:#c3cad3; }
.btn.quiet { background:var(--surface); color:var(--accent); border:1px solid var(--accent-bd); }
.btn.danger { background:var(--surface); color:var(--crit); border:1px solid #e0b9b9; }
.btn.sm { height:30px; padding:0 11px; font-size:12.5px; }
input, select, textarea { border:1px solid #d8dce2; border-radius:6px; padding:8px 10px; font:inherit;
                          background:var(--surface); color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.chip { border:1px solid #d8dce2; background:var(--surface); color:var(--ink-2); border-radius:6px;
        padding:0 12px; height:31px; font-size:12.5px; }
.chip.on { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }

/* ---- tags ---- */
.tag { font:700 10px system-ui; letter-spacing:.05em; padding:3px 7px; border-radius:3px;
       text-transform:uppercase; white-space:nowrap; }
.tag.p1 { background:var(--crit-bg); color:var(--crit); }
.tag.p2 { background:#f6ecd9; color:var(--warn-ink); }
.tag.p3, .tag.open { background:#f1f4f6; color:var(--muted); }
.tag.partial { background:#f6ecd9; color:var(--warn); }
.tag.answered, .tag.live { background:var(--ok-bg); color:var(--ok); }
.tag.dropped { background:#f1f4f6; color:var(--ghost); }

/* ---- coverage strip ---- */
.strip { display:flex; gap:4px; }
.strip div { flex:1; height:34px; border-radius:4px; }
.dim-ok { background:#d7e9dd; border:1px solid #b6d5c1; }
.dim-thin { background:#f6e6c8; border:1px solid #e6d0a4; }
.dim-gone { background:#f6dcdc; border:1px solid #e9c4c4; }
.pill { font-size:12.5px; border-radius:5px; padding:4px 9px; }
.pill.gone { color:#8a3535; background:#fbf0f0; border:1px solid var(--crit-bd); }

/* ---- lists ---- */
.action { padding:13px 18px; border-bottom:1px solid #f3f5f8; display:flex; align-items:center; gap:13px; }
.action:last-child { border-bottom:none; }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.q { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:15px 18px;
     border-left:3px solid var(--line); }
.q.pri1 { border-left-color:var(--crit); }
.q.pri2 { border-left-color:#d9c39a; }
.q-text { font-size:14px; font-weight:600; line-height:1.45; text-wrap:pretty; }
.q-why { font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.5; text-wrap:pretty; }
.q-meta { display:flex; align-items:center; gap:9px; margin-top:10px; flex-wrap:wrap; }
.dim-tag { font-size:11.5px; color:var(--muted); background:#f1f4f6; border-radius:4px; padding:3px 8px; }
.ev-btn { display:inline-flex; align-items:center; gap:6px; background:var(--accent-lt);
          border:1px solid var(--accent-bd); border-radius:5px; padding:3px 9px; font-size:11.5px;
          color:var(--accent); font-weight:600; }
.ev-btn:hover { background:#eef4f4; border-color:#9ec4c3; }
.ev-btn.none { background:#fbf0f0; border-color:var(--crit-bd); color:#8a3535; }

/* ---- drawer ---- */
.scrim { position:fixed; inset:0; background:rgba(16,36,40,.28); z-index:20; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(430px, 92vw); background:var(--surface);
          border-left:1px solid #d8dce2; box-shadow:-8px 0 28px rgba(16,36,40,.13); z-index:21;
          display:flex; flex-direction:column; }
.drawer-hd { padding:16px 20px; border-bottom:1px solid var(--line-2); display:flex;
             align-items:flex-start; gap:12px; }
.drawer-bd { padding:16px 20px; display:flex; flex-direction:column; gap:13px; overflow:auto; }
.x { background:none; border:none; padding:3px; color:var(--faint); line-height:0; }
.ev { border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.ev-hd { background:#f7f9fa; padding:8px 12px; display:flex; align-items:center; gap:8px;
         border-bottom:1px solid var(--line-2); font-size:12px; }
.quote { margin:0; font-size:12.5px; line-height:1.6; font-style:italic;
         border-left:3px solid #cfdcdb; padding-left:10px; text-wrap:pretty; }
.note { border-radius:7px; padding:11px 12px; display:flex; gap:9px; font-size:12px; line-height:1.5; }
.note.warn { background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-ink); }
.note.crit { background:#fbf0f0; border:1px solid var(--crit-bd); color:#8a3535; }

/* ---- misc ---- */
.empty { text-align:center; padding:44px 20px; color:var(--faint); }
.empty h3 { font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); margin-bottom:6px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--rail);
         color:#fff; padding:11px 18px; border-radius:7px; font-size:13px; z-index:40;
         box-shadow:0 6px 22px rgba(16,36,40,.24); max-width:min(560px, 90vw); }
.toast.bad { background:#7a2222; }
.spin { width:15px; height:15px; border:2px solid var(--accent-bd); border-top-color:var(--accent);
        border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.bar { height:5px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.bar > div { height:100%; background:var(--accent); }

/* ---- sessions ---- */
.kind { width:38px; height:34px; border-radius:7px; display:flex; align-items:center;
        justify-content:center; flex-shrink:0; font:600 10px system-ui; letter-spacing:.04em; }
.drop { border-top:1px solid var(--line-2); background:#fafbfc; padding:16px 18px;
        display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.file { display:flex; align-items:center; gap:9px; background:var(--surface);
        border:1px solid #e6e9ee; border-radius:6px; padding:8px 10px; }

/* ---- modal ---- */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
         z-index:22; padding:20px; pointer-events:none; }
.modal-card { background:var(--surface); border-radius:10px; padding:22px; width:min(430px, 100%);
              display:flex; flex-direction:column; gap:14px; pointer-events:auto;
              box-shadow:0 18px 48px rgba(16,36,40,.28); }
.field { display:flex; flex-direction:column; gap:6px; }
@media (max-width: 900px) { .drop { grid-template-columns:1fr; } .cols { grid-template-columns:1fr; } }

/* ---- deliverables ---- */
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:16px; }
.note.good { background:var(--ok-bg); border:1px solid #c2ddcc; color:#286843; }

/* ---- document and map viewers ---- */
.drawer.wide { width:min(920px, 96vw); }
.sop-doc { font-size:13.5px; line-height:1.6; color:var(--ink); }
.sop-doc h1 { font-family:var(--serif); font-weight:500; font-size:24px; margin:4px 0 10px; }
.sop-doc h2 { font-family:var(--serif); font-weight:500; font-size:19px; margin:22px 0 6px;
              padding-top:12px; border-top:1px solid var(--line-2); }
.sop-doc h3 { font-size:14.5px; margin:16px 0 4px; }
.sop-doc p { margin:4px 0; }
.sop-doc .banner { background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-ink);
                   border-radius:6px; padding:8px 11px; font-weight:600; }
.sop-doc .evref { color:var(--faint); font-style:italic; font-size:12px; }
.sop-doc ul { margin:4px 0 8px; padding-left:20px; }
.sop-doc table { border-collapse:collapse; width:100%; margin:8px 0 12px; font-size:12.5px; }
.sop-doc th, .sop-doc td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.sop-doc th { background:#f1f4f6; font-weight:600; }
.map-view { overflow:auto; max-height:78vh; background:#fff; border:1px solid var(--line);
            border-radius:8px; padding:12px; }
.map-view svg { max-width:none; height:auto; }

.qa-text { margin:0; padding:14px 18px; white-space:pre-wrap; word-break:break-word; font:12.5px/1.55 system-ui;
           color:var(--ink-2); max-height:260px; overflow:auto; }
.tbl { border-collapse:collapse; width:100%; font-size:12.5px; }
.tbl th, .tbl td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.tbl th { background:#f1f4f6; font-weight:600; }
.sop-doc .shot { margin:6px 0 2px; }
.sop-doc .shot img { max-width:100%; border:1px solid var(--line); border-radius:4px; }