/* =============================================================================
   Thesis Architecture Map — style
   Restrained and academic. No gradients, no drop shadows, no animation beyond
   simple state transitions. Designed to stay legible when projected.
   ============================================================================= */

:root{
  --paper:#faf9f6;
  --paper-2:#f2f0ea;
  --ink:#17171a;
  --ink-2:#4a4a52;
  --ink-3:#7b7b84;
  --rule:#d8d5cc;
  --rule-2:#c2beb2;
  --accent:#17171a;
  --dim:0.13;

  --serif: ui-serif, "Iowan Old Style", "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --node-w:200px;
  --topbar-h:58px;
  --groupbar-h:40px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141416;
    --paper-2:#1c1c20;
    --ink:#eceae4;
    --ink-2:#b6b3ac;
    --ink-3:#83807a;
    --rule:#33333a;
    --rule-2:#45454e;
    --accent:#eceae4;
    --dim:0.16;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ topbar */
#topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0 .9rem; border-bottom:1px solid var(--rule); background:var(--paper);
  position:relative; z-index:40;
}
.tb-left{min-width:0}
#tb-title{
  font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; margin:0; color:var(--ink);
}
#tb-sub{
  margin:.1rem 0 0; font-size:.8rem; color:var(--ink-3); font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-right{display:flex; align-items:center; gap:.4rem; flex:0 0 auto}
.search input{
  font-family:var(--sans); font-size:.82rem; padding:.4rem .6rem; width:15rem;
  border:1px solid var(--rule-2); border-radius:2px; background:var(--paper);
  color:var(--ink);
}
.search input:focus{outline:2px solid var(--accent); outline-offset:1px}

.btn{
  font-family:var(--sans); font-size:.76rem; letter-spacing:.03em;
  padding:.4rem .65rem; border:1px solid var(--rule-2); border-radius:2px;
  background:var(--paper); color:var(--ink-2); cursor:pointer;
}
.btn:hover{border-color:var(--ink-2); color:var(--ink)}
.btn[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-quiet{border-color:transparent; color:var(--ink-3)}
.btn-quiet:hover{border-color:var(--rule-2)}
.btn-icon{min-width:2.1rem; text-align:center}

/* --------------------------------------------------------------- group bar */
#groupbar{
  flex:0 0 auto; height:var(--groupbar-h); display:flex; align-items:center; gap:.35rem;
  padding:0 .9rem; border-bottom:1px solid var(--rule); background:var(--paper-2);
  overflow-x:auto; white-space:nowrap; position:relative; z-index:30;
  scrollbar-width:thin;
}
#groupbar .gb-label{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-right:.3rem; flex:0 0 auto;
}
#groupbar .btn{flex:0 0 auto; font-size:.72rem; padding:.3rem .55rem}

/* ------------------------------------------------------------------- stage */
#stage{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
}
#viewport{
  position:absolute; inset:0; overflow:hidden; cursor:grab;
  touch-action:none;
}
#viewport.dragging{cursor:grabbing}
#canvas{position:absolute; top:0; left:0; transform-origin:0 0}
#edges{position:absolute; top:0; left:0; overflow:visible; pointer-events:none}
#bands{position:absolute; top:0; left:0}
#nodes{position:absolute; top:0; left:0}

/* -------------------------------------------------------------------- band */
.band{
  position:absolute; border-top:1px solid var(--rule);
  pointer-events:none;
}
.band .band-label{
  position:absolute; top:-.05rem; left:0; transform:translateY(-100%);
  font-family:var(--sans); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:.3rem;
}
.band .band-doc{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.06em; text-transform:none;
  color:var(--rule-2); margin-left:.55rem; font-style:italic;
}

/* -------------------------------------------------------------------- node */
.node{
  position:absolute; width:var(--node-w); min-height:52px;
  background:var(--paper); border:1px solid var(--rule-2);
  padding:7px 9px 7px 11px; cursor:pointer;
  font-family:var(--sans); font-size:12px; line-height:1.34; color:var(--ink);
  transition:opacity .16s linear, border-color .16s linear;
  display:flex; flex-direction:column; gap:3px;
}
.node .n-id{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; color:var(--ink-3);
}
.node .n-label{display:block}
.node::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--status);
}
.node:hover{border-color:var(--ink-2)}
.node:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* shape / border = node kind */
.node.k-claim{border-radius:2px}
.node.k-spine{border-radius:13px; border-width:1.5px}
.node.k-spine::before{border-radius:13px 0 0 13px}
.node.k-artifact{clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.node.k-parameter{border-radius:26px; border-style:dashed; padding-left:14px; min-height:44px}
.node.k-parameter .n-label{font-family:var(--mono); font-size:10.5px}
.node.k-parameter::before{border-radius:26px 0 0 26px}
.node.k-challenge{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.node.k-chapter{border-radius:0 3px 3px 3px; border-top-width:2px}
.node.k-revision{border-radius:2px; border-style:dotted; border-left-style:solid}
.node.k-data{border-radius:9px/3px; border-top-width:2.5px; border-bottom-width:2.5px}
.node.k-scope{border-style:dashed; border-radius:2px; opacity:.9}

.node .n-glyph{color:var(--status); font-size:10px; margin-right:.25em}

/* selection / propagation states */
.node.is-dim{opacity:var(--dim)}
.node.is-down{border-color:var(--status); border-width:1.5px}
.node.is-sel{
  border-color:var(--accent); border-width:2px; background:var(--paper-2);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--accent);
}
.node.is-hit{border-color:var(--accent)}
.node.is-hidden{display:none}

/* ------------------------------------------------------------------ edges */
#edges path{fill:none}
#edges .e-supports{stroke:var(--ink-3); stroke-width:1; opacity:.42}
#edges .e-carries{stroke:var(--ink-3); stroke-width:.8; opacity:.22; stroke-dasharray:1 4}
#edges .e-threatens{stroke:#9b2226; stroke-width:1.2; opacity:.55; stroke-dasharray:7 4}
#edges .e-revises{stroke:#6b3fa0; stroke-width:1.1; opacity:.5; stroke-dasharray:3 3}
#edges .e-mitigates{stroke:#6b3fa0; stroke-width:1.4; opacity:.65}
#edges path.is-dim{opacity:.05}
#edges path.is-down{opacity:.95; stroke-width:1.8}

/* ----------------------------------------------------------------- selbar */
#selbar{
  position:absolute; left:50%; transform:translateX(-50%); bottom:1rem;
  background:var(--ink); color:var(--paper); border-radius:3px;
  padding:.5rem .55rem .5rem .9rem; display:flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.78rem; z-index:20; max-width:min(92vw,44rem);
}
#selbar .btn{background:transparent; color:var(--paper); border-color:rgba(255,255,255,.35)}
#selbar .btn:hover{border-color:var(--paper)}
#selbar-text strong{font-weight:600}

/* ---------------------------------------------------------------- zoombar */
#zoombar{
  position:absolute; right:.8rem; bottom:1rem; display:flex; gap:.25rem; z-index:20;
}
#zoombar .btn{background:var(--paper)}

#stamp{
  position:absolute; left:.9rem; bottom:.75rem; margin:0; z-index:20;
  font-family:var(--mono); font-size:.66rem; color:var(--ink-3); letter-spacing:.02em;
  pointer-events:none;
}

/* ------------------------------------------------------------------ panel */
#panel{
  position:absolute; top:0; right:0; bottom:0; width:min(30rem,92vw);
  background:var(--paper); border-left:1px solid var(--rule);
  overflow-y:auto; padding:1.4rem 1.5rem 4rem; z-index:50;
  -webkit-overflow-scrolling:touch;
}
#panel-close{position:absolute; top:.7rem; right:.8rem}
#panel h2{
  font-family:var(--serif); font-size:1.24rem; line-height:1.28; font-weight:600;
  margin:.2rem 3.5rem .5rem 0;
}
#panel .p-id{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-3); letter-spacing:.06em;
}
#panel .p-badges{display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 1.1rem}
.badge{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.22rem .45rem; border:1px solid currentColor; border-radius:2px;
}
.badge.b-status{color:var(--status); font-weight:600}
.badge.b-plain{color:var(--ink-3)}
#panel h3{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:1.5rem 0 .5rem; padding-bottom:.25rem;
  border-bottom:1px solid var(--rule);
}
#panel p{margin:0 0 .7rem; font-size:.94rem}
#panel .p-claim{font-size:1rem; line-height:1.55}
#panel .p-note{
  font-size:.88rem; border-left:2px solid var(--rule-2); padding-left:.8rem; color:var(--ink-2);
}
#panel ul{margin:0; padding:0; list-style:none}
#panel .ev{margin:0 0 .9rem; padding:0 0 .9rem; border-bottom:1px dotted var(--rule)}
#panel .ev:last-child{border-bottom:0}
#panel .ev-cite{font-size:.92rem; display:block; margin-bottom:.2rem}
#panel .ev-detail{font-size:.85rem; color:var(--ink-2); margin:.25rem 0 0}
#panel .chips{display:flex; flex-wrap:wrap; gap:.3rem}
.chip{
  font-family:var(--mono); font-size:.72rem; padding:.22rem .45rem;
  border:1px solid var(--rule-2); border-radius:2px; background:var(--paper);
  cursor:pointer; color:var(--ink-2);
}
.chip:hover{border-color:var(--ink-2); color:var(--ink)}
.chip .c-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:.35em;background:var(--status)}
#panel .p-src{font-family:var(--mono); font-size:.72rem; color:var(--ink-3); margin-top:1.6rem}

/* ----------------------------------------------------------------- legend */
#legend{
  position:absolute; top:0; left:0; bottom:0; width:min(26rem,92vw);
  background:var(--paper); border-right:1px solid var(--rule);
  overflow-y:auto; padding:1.4rem 1.5rem 3rem; z-index:50;
}
#legend-close{position:absolute; top:.7rem; right:.8rem}
#legend h2{font-family:var(--sans); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin:.2rem 0 1rem}
#legend h3{font-family:var(--sans); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:1.5rem 0 .6rem}
#legend .lg-row{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem; font-size:.85rem}
#legend .lg-swatch{flex:0 0 auto; width:14px; height:14px; margin-top:.2rem; border:1px solid var(--rule-2)}
#legend .lg-name{font-weight:600; font-family:var(--sans); font-size:.78rem}
#legend .lg-def{color:var(--ink-2); font-size:.83rem}
#legend .lg-line{flex:0 0 34px; height:14px; margin-top:.15rem}

#scrim{position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:45}


/* ------------------------------------------------------------- control bar */
#controlbar{
  flex:0 0 auto; display:flex; align-items:center; gap:.3rem;
  padding:.42rem .9rem; border-bottom:1px solid var(--rule); background:var(--paper);
  overflow-x:auto; white-space:nowrap; position:relative; z-index:35; scrollbar-width:thin;
}
#controlbar .cb-label{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:0 .25rem 0 0; flex:0 0 auto;
}
#controlbar .cb-sep{flex:0 0 auto; width:1px; height:1.35rem; background:var(--rule); margin:0 .5rem}
#controlbar .btn{flex:0 0 auto; font-size:.72rem; padding:.3rem .55rem}
#controlbar .cb-status{border-left:3px solid var(--status)}
#controlbar .cb-status[aria-pressed="true"]{background:var(--status); border-color:var(--status); color:#fff}
#controlbar .cb-weak{font-style:italic}
.cb-select{
  flex:0 0 auto; font-family:var(--sans); font-size:.72rem; padding:.28rem .4rem;
  border:1px solid var(--rule-2); border-radius:2px; background:var(--paper); color:var(--ink-2);
}

/* --------------------------------------- methodology + revision node states */
.node.m-changed{
  border-style:double; border-width:3px; border-color:#8a6d1f;
}
.node.m-removed{
  opacity:.3; border-style:dashed; border-color:var(--rule-2);
}
.node.m-removed .n-label{text-decoration:line-through; text-decoration-thickness:1px}
.node.m-violated{
  border-color:#9b2226; border-width:2.5px;
  background:repeating-linear-gradient(135deg, var(--paper), var(--paper) 5px, rgba(155,34,38,.13) 5px, rgba(155,34,38,.13) 10px);
}
.node.m-violated .n-label::after{
  content:" — VIOLATED"; color:#9b2226; font-weight:700; letter-spacing:.04em;
}
.node.r-revised::after{
  content:"§7"; position:absolute; top:-7px; right:-7px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.02em;
  background:#6b3fa0; color:#fff; padding:1px 3px; border-radius:2px;
}
.node.r-mitigated{opacity:.45}
.node.r-mitigated .n-label::before{content:"✓ "; color:#0f6d5c; font-weight:700}
.node.is-focus{border-color:var(--ink-2)}
#edges path.is-added{stroke-dasharray:6 3; stroke:#6b3fa0; opacity:.85; stroke-width:1.6}

/* panel extras */
#panel .p-banner{
  border:1.5px solid #9b2226; color:#9b2226; padding:.7rem .8rem; border-radius:2px;
  font-size:.88rem; font-weight:600; margin-bottom:1rem;
  background:repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(155,34,38,.06) 6px, rgba(155,34,38,.06) 12px);
}
#panel .p-meth{
  border-left:3px solid var(--rule-2); padding:.5rem .7rem; font-size:.87rem;
  background:var(--paper-2); margin-bottom:.9rem;
}
#panel .p-meth.m-changed{border-left-color:#8a6d1f}
#panel .p-meth.m-removed{border-left-color:var(--ink-3)}
#panel .p-meth.m-violated{border-left-color:#9b2226; color:#9b2226}
#panel .p-meth.r-flag{border-left-color:#6b3fa0}
#panel ul.p-list{list-style:disc; padding-left:1.1rem}
#panel ul.p-list li{font-size:.9rem; margin-bottom:.45rem; color:var(--ink-2)}

/* ------------------------------------------------------------------ phone */
@media (max-width: 820px){
  :root{--topbar-h:auto}
  #topbar{flex-direction:column; align-items:stretch; gap:.5rem; padding:.6rem .7rem}
  #controlbar{padding:.35rem .6rem}
  .tb-right{justify-content:space-between}
  .search{flex:1}
  .search input{width:100%}
  #panel{width:100%; border-left:0; border-top:1px solid var(--rule); top:auto; bottom:0; height:80%}
  #legend{width:100%}
  #selbar{bottom:.6rem; font-size:.72rem; padding-left:.7rem}
  #zoombar{bottom:4.4rem}
  #stamp{bottom:.4rem}
}

@media print{
  #topbar,#groupbar,#zoombar,#selbar,#panel,#legend,#scrim{display:none!important}
  body{overflow:visible}
}