/* Ported verbatim from the prototype (evidence_library.jsx). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.spn {
  --ink:#15302A;
  --paper:#ECEBE3;
  --card:#FCFBF8;
  --line:#E1DFD5;
  --line2:#CFCDC1;
  --muted:#5D6B63;
  --base:#17796A;
  --base-soft:#DCEDE8;
  --waves:#BE7C1A;
  --waves-soft:#F3E7CE;
  --radius:14px;
  --radius-sm:10px;
  --pill:999px;
  --shadow:0 1px 2px rgba(21,48,42,.04), 0 10px 30px -18px rgba(21,48,42,.30);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(23,121,106,.06), transparent 60%),
    var(--paper);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.spn *{box-sizing:border-box;}
.spn button{font-family:inherit;cursor:pointer;}

/* masthead + brand lockup */
.spn-masthead{
  padding:30px 34px 24px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:28px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.spn-brandmark{display:inline-block;}
.bm-big{
  font-family:var(--font-display);font-weight:800;font-size:52px;
  line-height:.86;letter-spacing:-.025em;color:var(--ink);text-transform:uppercase;
}
.bm-sub{display:flex;align-items:center;gap:11px;width:100%;margin-top:9px;}
.bm-rule{flex:1;height:2px;background:var(--base);border-radius:2px;opacity:.5;}
.bm-sub .t{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--base);font-weight:500;white-space:nowrap;
}
.spn-tagline{font-size:13.5px;color:var(--muted);margin:16px 0 0;max-width:44ch;line-height:1.5;}
.spn-beta{
  display:inline-block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--waves);border:1px solid var(--waves);
  border-radius:var(--pill);padding:2px 9px;margin-left:10px;vertical-align:middle;font-weight:500;
}
.spn-classnote{
  font-size:11.5px;line-height:1.45;color:var(--muted);margin:6px 0 0;
}
.spn-classnote b{color:var(--base);font-weight:600;}
.spn-doiwarn{color:var(--waves);}
.spn-card-source{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;
  color:var(--base);text-decoration:none;border:1px solid #BAD3CA;
  background:var(--base-soft);padding:6px 12px;border-radius:var(--pill);
  transition:background .14s,color .14s;
}
.spn-card-source:hover{background:var(--base);color:#fff;}
.spn-mast-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.spn-count{
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  text-align:right;line-height:1.55;
}
.spn-count b{color:var(--ink);font-weight:500;}
.spn-add{
  background:var(--ink);color:#F4F3EC;border:none;border-radius:var(--pill);
  padding:12px 20px;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .16s, transform .12s, box-shadow .16s;
  box-shadow:0 6px 16px -10px rgba(21,48,42,.5);
}
.spn-add:hover{background:var(--base);transform:translateY(-1px);}
.spn-add span{font-size:16px;line-height:1;}

/* body layout */
.spn-body{display:flex;gap:0;align-items:stretch;min-height:60vh;}
.spn-rail{
  width:236px;flex:0 0 236px;border-right:1px solid var(--line);
  padding:26px 16px 40px;
}
.spn-rail-h{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;padding-left:10px;
}
.spn-area{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  width:100%;text-align:left;background:none;border:none;
  padding:9px 11px;font-size:14px;color:var(--ink);border-radius:var(--radius-sm);
  transition:background .14s, color .14s;margin-bottom:2px;font-weight:500;
}
.spn-area:hover{background:#E4E3DA;}
.spn-area.on{background:var(--base);color:#fff;}
.spn-area .n{font-family:var(--font-mono);font-size:11px;color:var(--muted);flex:0 0 auto;}
.spn-area.on .n{color:#CDE6E0;}
.spn-area .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spn-area .pinbtn{
  flex:0 0 auto;font-size:13px;line-height:1;color:var(--waves);
  opacity:.55;transition:opacity .14s,transform .12s;padding:2px;
}
.spn-area .pinbtn:hover{opacity:1;transform:scale(1.15);}
.spn-area.on .pinbtn{color:#FFE8B8;}
.spn-area.quick{background:#F1EEE2;}
.spn-area.quick.on{background:var(--base);}
.spn-rail-h{margin-top:6px;}
.spn-rail-h:first-child{margin-top:0;}
.spn-area-add{display:flex;gap:6px;margin-top:16px;align-items:stretch;}
.spn-area-input{
  flex:1;min-width:0;background:none;border:1.5px dashed var(--line2);
  color:var(--ink);padding:10px;font-size:12.5px;border-radius:var(--radius-sm);
  font-family:var(--font-body);transition:border-color .14s;
}
.spn-area-input::placeholder{color:var(--muted);}
.spn-area-input:focus{outline:none;border-style:solid;border-color:var(--base);}
.spn-area-addbtn{
  flex:0 0 auto;background:var(--base);color:#fff;border:none;
  padding:0 14px;font-size:12.5px;font-weight:600;border-radius:var(--radius-sm);
}
.spn-area-addbtn:disabled{opacity:.45;cursor:default;}
.spn-area-place{display:flex;gap:6px;margin-top:6px;align-items:stretch;}
.spn-area-parent{
  flex:1;min-width:0;background:var(--card);border:1px solid var(--line2);
  color:var(--ink);padding:9px;font-size:12.5px;border-radius:var(--radius-sm);
  font-family:var(--font-body);
}
.spn-area-parent:focus{outline:none;border-color:var(--base);}

.spn-main{flex:1;padding:26px 34px 64px;min-width:0;}
.spn-search{
  width:100%;padding:12px 15px;border:1px solid var(--line2);
  background:var(--card);font-size:14px;font-family:var(--font-body);
  color:var(--ink);margin-bottom:28px;border-radius:var(--pill);
  transition:border-color .14s, box-shadow .14s;
}
.spn-search:focus{outline:none;border-color:var(--base);box-shadow:0 0 0 3px var(--base-soft);}

/* view tabs */
.spn-viewtabs{display:flex;gap:4px;margin-bottom:24px;}
.spn-viewtabs button{
  background:none;border:1px solid transparent;border-radius:var(--pill);
  padding:8px 18px;font-size:13px;font-family:var(--font-body);
  color:var(--muted);font-weight:600;transition:all .14s;
}
.spn-viewtabs button:hover{color:var(--ink);background:#E4E3DA;}
.spn-viewtabs button.on{color:#fff;background:var(--ink);}

/* topic map — flowing */
.spn-map{margin-bottom:6px;}
.spn-map-intro{
  font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 20px;max-width:66ch;
}
.spn-map-cols{
  display:flex;align-items:flex-start;overflow-x:auto;padding:4px 2px 14px;gap:0;
}
.spn-map-col{
  display:flex;flex-direction:column;gap:10px;min-width:206px;flex:0 0 auto;
  animation:spn-col-in .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes spn-col-in{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
.spn-map-arrow{
  color:var(--base);align-self:flex-start;flex:0 0 auto;
  display:flex;align-items:flex-start;padding:0 1px;
}
.spn-map-node{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  text-align:left;background:var(--card);border:1px solid var(--line2);
  border-radius:var(--pill);height:44px;padding:0 17px;font-size:13.5px;color:var(--ink);
  font-family:var(--font-body);font-weight:500;
  transition:border-color .14s, background .14s, transform .12s, box-shadow .16s;
}
.spn-map-node:hover{border-color:var(--base);transform:translateY(-1px);box-shadow:var(--shadow);}
.spn-map-node .nm{line-height:1.25;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spn-map-node.on{
  background:var(--base);border-color:var(--base);color:#fff;font-weight:600;
  box-shadow:0 8px 20px -12px rgba(23,121,106,.7);
}
.spn-map-node.leaf .ct{
  font-family:var(--font-mono);font-size:11px;color:#fff;background:var(--base);
  min-width:22px;text-align:center;padding:3px 8px;border-radius:var(--pill);
}
.spn-map-node.on .ct{background:#fff;color:var(--base);}
.spn-map-node.on .brc,.spn-map-node.on .brn{color:#fff;background:rgba(255,255,255,.22);}
.spn-map-node.empty{opacity:.55;}
.spn-map-node.empty .ct{background:var(--line2);color:var(--muted);}
.spn-map-node .brc{
  font-family:var(--font-mono);color:var(--muted);font-size:15px;
  display:flex;align-items:center;gap:7px;
}
.spn-map-node .brn{
  font-size:10.5px;background:#E7E5DB;color:var(--muted);
  padding:2px 7px;border-radius:var(--pill);
}
.spn-map-crumb{
  display:flex;align-items:center;gap:14px;margin:18px 0 26px;
  padding:10px 16px;border:1px solid var(--line);background:var(--card);
  border-radius:var(--pill);width:fit-content;max-width:100%;
}
.spn-map-crumb .trail{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--ink);
}

/* strata */
.spn-stratum{margin-bottom:40px;}
.spn-stratum-head{
  display:flex;align-items:center;gap:13px;
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.spn-stratum-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 11px;color:#fff;font-weight:500;
  border-radius:var(--pill);
}
.spn-stratum-tag.base{background:var(--base);}
.spn-stratum-tag.waves{background:var(--waves);}
.spn-stratum-title{
  font-family:var(--font-display);font-size:22px;font-weight:700;margin:0;
  letter-spacing:-.01em;
}
.spn-stratum-sub{font-size:12.5px;color:var(--muted);margin-left:auto;}

/* card */
.spn-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;overflow:hidden;margin-bottom:14px;
  transition:box-shadow .16s, transform .1s, border-color .16s;
}
.spn-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--line2);}
.spn-spine{flex:0 0 6px;}
.spn-spine.base{background:var(--base);}
.spn-spine.waves{background:repeating-linear-gradient(180deg,var(--waves) 0 7px,transparent 7px 13px);}
.spn-card-in{padding:17px 20px;flex:1;min-width:0;}
.spn-card-top{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;}
.spn-card-type{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;font-weight:500;
}
.spn-card-type.base{color:var(--base);}
.spn-card-type.waves{color:var(--waves);}
.spn-card-title{
  font-family:var(--font-display);font-size:19px;font-weight:700;
  line-height:1.2;margin:6px 0 5px;cursor:pointer;letter-spacing:-.01em;
}
.spn-card-title:hover{color:var(--base);}
.spn-card-meta{font-size:12.5px;color:var(--muted);font-family:var(--font-mono);}
.spn-rec{
  background:linear-gradient(180deg, var(--base-soft), #E6F1ED);
  border:1px solid #B9D6CD;border-radius:var(--radius-sm);
  padding:13px 16px;margin:13px 0 0;
}
.spn-rec .lab{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--base);font-weight:600;margin:0 0 6px;
}
.spn-rec ul{margin:0;padding:0;list-style:none;}
.spn-rec li{
  position:relative;padding-left:20px;font-size:14px;line-height:1.5;
  margin-bottom:6px;color:#1B322C;font-weight:500;
}
.spn-rec li:last-child{margin-bottom:0;}
.spn-rec li::before{
  content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--base);
}
.spn-more{
  display:inline-flex;align-items:center;gap:5px;background:#E4E3DA;border:none;
  margin:13px 0 0;padding:6px 13px;border-radius:var(--pill);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);transition:background .14s,color .14s;
}
.spn-more:hover{background:var(--base);color:#fff;}
.spn-findings{
  background:#F3F2EA;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;margin-top:12px;
}
.spn-findings .lab{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 8px;
}
.spn-findings ul{margin:0;padding:0;list-style:none;}
.spn-findings li{
  position:relative;padding-left:20px;font-size:14px;line-height:1.5;
  margin-bottom:7px;color:#20302A;
}
.spn-findings li:last-child{margin-bottom:0;}
.spn-findings li::before{
  content:"";position:absolute;left:3px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--base);
}

/* expand */
.spn-detail{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;
}
.spn-field .k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 4px;
}
.spn-field .v{font-size:13.5px;line-height:1.5;margin:0;}
.spn-field.wide{grid-column:1 / -1;}
.spn-caveat{
  grid-column:1 / -1;background:var(--waves-soft);padding:11px 14px;
  font-size:12.5px;line-height:1.5;color:#5A4213;border-radius:var(--radius-sm);
}
.spn-card-actions{display:flex;gap:16px;margin-top:14px;grid-column:1 / -1;}
.spn-link{
  font-family:var(--font-mono);font-size:11.5px;background:none;border:none;
  color:var(--base);padding:0;text-decoration:underline;text-underline-offset:2px;
}
.spn-link.del{color:#A23B2C;}
.spn-link.ext{color:var(--muted);}

/* empty */
.spn-empty{
  border:1.5px dashed var(--line2);padding:52px 30px;text-align:center;
  background:var(--card);border-radius:var(--radius);
}
.spn-empty h3{font-family:var(--font-display);font-weight:700;font-size:23px;margin:0 0 9px;letter-spacing:-.01em;}
.spn-empty p{font-size:14px;color:var(--muted);max-width:46ch;margin:0 auto 20px;line-height:1.55;}
.spn-empty-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;}
.spn-ghost{
  background:none;border:1.5px solid var(--ink);color:var(--ink);
  padding:10px 18px;font-size:13px;font-weight:600;border-radius:var(--pill);
  transition:background .14s,color .14s;
}
.spn-ghost:hover{background:var(--ink);color:var(--paper);}

/* modal */
.spn-scrim{
  position:fixed;inset:0;background:rgba(21,48,42,.44);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 18px;overflow-y:auto;z-index:50;
  animation:spn-fade .18s ease;backdrop-filter:blur(2px);
}
@keyframes spn-fade{from{opacity:0;}to{opacity:1;}}
.spn-modal{
  background:var(--paper);width:100%;max-width:680px;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(21,48,42,.6);
  animation:spn-pop .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes spn-pop{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:none;}}
.spn-modal-head{
  padding:20px 26px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.spn-modal-head h2{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0;letter-spacing:-.01em;}
.spn-x{background:none;border:none;font-size:24px;color:var(--muted);line-height:1;}
.spn-x:hover{color:var(--ink);}
.spn-modal-body{padding:24px 26px 28px;}

.spn-ai{
  background:linear-gradient(180deg, var(--base-soft), #E6F1ED);
  border:1px solid #B9D6CD;padding:16px 17px;margin-bottom:24px;border-radius:var(--radius-sm);
}
.spn-ai-h{
  font-size:13.5px;font-weight:600;margin:0 0 4px;color:var(--base);
  display:flex;align-items:center;gap:8px;
}
.spn-ai-h .b{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  background:var(--base);color:#fff;padding:2px 7px;border-radius:var(--pill);font-weight:500;
}
.spn-ai p{font-size:12.5px;color:#3A4E48;margin:0 0 11px;line-height:1.5;}
.spn-ai textarea{
  width:100%;min-height:74px;padding:10px 12px;border:1px solid #B9D6CD;
  background:#fff;font-family:var(--font-body);font-size:13px;resize:vertical;
  border-radius:var(--radius-sm);color:var(--ink);
}
.spn-ai-go{
  margin-top:10px;background:var(--base);color:#fff;border:none;
  padding:9px 17px;font-size:12.5px;font-weight:600;border-radius:var(--pill);
}
.spn-ai-go:disabled{opacity:.55;cursor:default;}
.spn-ai-err{color:#A23B2C;font-size:12px;margin:9px 0 0;}
.spn-drop{
  border:1.5px dashed #A9CEC3;background:#fff;border-radius:var(--radius-sm);
  padding:26px 16px;text-align:center;cursor:pointer;
  transition:border-color .16s, background .16s;
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.spn-drop:hover{border-color:var(--base);background:#F6FBF9;}
.spn-drop.drag{border-color:var(--base);background:var(--base-soft);}
.spn-drop.busy{cursor:default;opacity:.85;border-style:solid;}
.spn-drop.busy.hit{background:var(--base-soft);border-color:var(--base);opacity:1;}
.spn-confirm{border:1px solid #BAD3CA;background:#fff;border-radius:var(--radius-sm);padding:14px 15px;}
.spn-confirm-sub{font-size:12.5px;color:#3A4E48;line-height:1.5;margin:0 0 13px;}
.spn-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}
.spn-checkline{
  display:flex;align-items:center;gap:7px;margin-top:8px;
  font-family:var(--font-body);font-size:12px;color:var(--muted);
  text-transform:none;letter-spacing:0;font-weight:500;
}
.spn-checkline input{width:auto;padding:0;}
.spn-drop-main{font-size:13px;font-weight:600;color:var(--base);line-height:1.4;}
.spn-drop-note{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}

.spn-row{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.spn-fld{margin-bottom:14px;}
.spn-fld.full{grid-column:1 / -1;}
.spn-fld label{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.spn-fld input,.spn-fld select,.spn-fld textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line2);background:var(--card);
  font-family:var(--font-body);font-size:13.5px;color:var(--ink);border-radius:var(--radius-sm);
}
.spn-fld textarea{resize:vertical;min-height:56px;line-height:1.45;}
.spn-fld input:focus,.spn-fld select:focus,.spn-fld textarea:focus{
  outline:none;border-color:var(--base);box-shadow:0 0 0 3px var(--base-soft);
}
.spn-modal-foot{display:flex;justify-content:flex-end;gap:11px;margin-top:10px;}
.spn-save{
  background:var(--ink);color:var(--paper);border:none;border-radius:var(--pill);
  padding:11px 26px;font-size:13.5px;font-weight:600;transition:background .14s,transform .12s;
}
.spn-save:hover{background:var(--base);transform:translateY(-1px);}
.spn-save:disabled{opacity:.5;cursor:default;transform:none;}
.spn-cancel{
  background:none;border:1px solid var(--line2);color:var(--muted);
  padding:11px 20px;font-size:13.5px;border-radius:var(--pill);
}
.spn-cancel:hover{border-color:var(--ink);color:var(--ink);}

.spn-loading{padding:64px;text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:13px;}

@media (max-width:720px){
  .spn-body{flex-direction:column;}
  .spn-rail{width:auto;flex:none;border-right:none;border-bottom:1px solid var(--line);
    display:flex;gap:7px;overflow-x:auto;padding:14px 16px;}
  .spn-rail-h{display:none;}
  .spn-area{width:auto;white-space:nowrap;margin-bottom:0;}
  .spn-main{padding:22px 16px 50px;}
  .spn-masthead{padding:22px 16px 18px;}
  .bm-big{font-size:40px;}
  .spn-detail{grid-template-columns:1fr;}
  .spn-row{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  .spn *{animation:none !important;transition:none !important;}
}