/* ==========================================================================
   Open-source library — shared page CSS for:
   open-source.html · term-sheet.html · memo-template.html · ai-stance.html
   Loads after styles.css and css/vc.css. Only genuinely new rules live here.
   ========================================================================== */

/* ---------- Hero ask bar ---------- */
.lib-ask{max-width:640px;margin-top:32px}
.lib-ask .ask-bar{font-size:15px;padding:16px 18px}
.lib-ask .ask-bar .mag{width:16px;height:16px;flex:none;color:var(--muted-2)}
.lib-ask .hint{color:var(--faint);font-size:12px;line-height:18px;margin-top:10px}

/* ---------- Two-axis filter block ---------- */
.axis{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--hairline)}
.axis:first-child{border-top:1px solid var(--hairline)}
.axis .axis-lbl{font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);padding-top:9px}
.axis .filters{margin-bottom:0}
.filter .n{margin-left:8px;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.filter.on .n{color:rgba(28,25,23,.55)}

.lib-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:24px 0 28px}
.lib-bar .count{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2)}
.lib-bar .search{margin-bottom:0}
.reset{font-size:13px;line-height:20px;color:var(--muted-2);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;background:none;border:none;font-family:var(--font-body)}
.reset:hover{color:var(--text)}

/* ---------- Resource tile ---------- */
a.tile{color:inherit}
.tile .badges{display:flex;gap:6px;flex-wrap:wrap}
.tile .fmt{display:inline-flex;align-items:center;gap:6px}
.tile .fmt svg{width:13px;height:13px;flex:none}
.tile .go{margin-left:auto;color:var(--muted-2);transition:transform .2s,color .2s}
a.tile:hover .go{color:var(--text);transform:translateX(3px)}
.tile[hidden]{display:none}

/* ---------- Most-downloaded strip ---------- */
.dl-strip{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border)}
.dl-strip > a{display:flex;flex-direction:column;gap:8px;padding:24px 24px 24px 0;
  border-right:1px solid var(--border);transition:background .2s}
.dl-strip > a:last-child{border-right:none}
.dl-strip > a:not(:first-child){padding-left:24px}
.dl-strip > a:hover{background:rgba(250,250,249,.02)}
.dl-strip .rank{font-family:var(--font-head);font-weight:700;font-size:28px;line-height:28px;
  letter-spacing:0;color:var(--faint)}
.dl-strip h3{font-size:15px;line-height:22px;font-weight:600}
.dl-strip .n{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);margin-top:auto}

/* ---------- Sticky-TOC page layout (term sheet, AI stance) ---------- */
.doc{display:grid;grid-template-columns:264px minmax(0,1fr)}
.doc > .doc-nav{padding:40px 24px 40px var(--pad);border-right:1px solid var(--border)}
.doc > .doc-body{min-width:0}
.doc .toc{top:calc(var(--nav-h) + 32px)}
.doc .toc .meta{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:11px;line-height:18px;color:var(--faint)}

/* ---------- Clause rows (term sheet) ---------- */
.clause{border-bottom:1px solid var(--border);scroll-margin-top:calc(var(--nav-h) + 24px)}
.clause.split{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.clause .cl-no{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.clause .prose h3{margin-top:0;font-size:18px;line-height:24px}
.clause .prose .legal{color:var(--muted);font-size:14px;line-height:23px;
  border-left:2px solid var(--border-2);padding-left:16px;margin-top:14px}
.cl-note .t{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.cl-note .t .sq{width:6px;height:6px;background:currentColor;border-radius:0;flex:none}
.cl-note p{color:var(--muted);font-size:14px;line-height:22px}
.cl-note p + p{margin-top:10px}
.cl-note .tag{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- "What we never ask for" ---------- */
.never{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--border)}
.never > div{padding:24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.never > div:nth-child(2n){border-right:none}
.never h4{font-size:15px;line-height:22px;font-weight:600;display:flex;align-items:flex-start;gap:10px}
.never h4 .x{width:16px;height:16px;flex:none;color:var(--accent);margin-top:3px}
.never p{color:var(--muted);font-size:14px;line-height:22px;margin-top:8px;padding-left:26px}

/* ---------- Tabs (memo template) ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:32px;flex-wrap:wrap}
.tab{padding:12px 16px;font-size:14px;line-height:20px;font-weight:500;color:var(--muted-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;background:none;cursor:pointer;
  font-family:var(--font-body);transition:color .18s,border-color .18s}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--white)}
.tabpanel[hidden]{display:none}

/* ---------- Memo section rows ---------- */
.memo-sec{border-bottom:1px solid var(--border);padding:28px 0;display:grid;
  grid-template-columns:44px minmax(0,1fr);gap:24px}
.memo-sec:first-child{border-top:1px solid var(--border)}
.memo-sec .idx{font-family:var(--font-mono);font-size:12px;line-height:20px;color:var(--faint);padding-top:3px}
.memo-sec h3{font-size:17px;line-height:24px;font-weight:600}
.memo-sec .why{color:var(--muted);font-size:15px;line-height:24px;margin-top:8px;max-width:68ch}
.memo-sec .good{margin-top:14px;background:var(--chip);border:1px solid var(--border);border-radius:0;
  padding:14px 16px}
.memo-sec .good .t{font-size:11px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:6px}
.memo-sec .good p{color:var(--muted);font-size:14px;line-height:22px}
.memo-sec .len{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--faint);margin-top:10px}

/* ---------- Filled memo example ---------- */
.memo-doc{border:1px solid var(--border);border-radius:0;background:var(--card);overflow:hidden}
.memo-doc .doc-head{padding:24px 28px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.memo-doc .doc-head h3{font-size:20px;line-height:26px;font-weight:600}
.memo-doc .doc-head .sub{font-family:var(--font-mono);font-size:12px;line-height:18px;
  color:var(--muted-2);margin-top:6px}
.memo-doc .doc-inner{padding:8px 28px 28px}
.memo-doc .fld{padding:20px 0;border-bottom:1px solid var(--hairline)}
.memo-doc .fld:last-child{border-bottom:none}
.memo-doc .fld > .k{font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px}
.memo-doc .fld p{color:var(--muted);font-size:15px;line-height:24px;max-width:72ch}
.memo-doc .fld p + p{margin-top:10px}
.memo-doc .fld ul{margin-top:8px;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.memo-doc .fld li{color:var(--muted);font-size:15px;line-height:23px;list-style:disc}
.memo-doc .fld strong{color:var(--text);font-weight:600}

/* ---------- Conviction meter ---------- */
.conv{display:flex;align-items:center;gap:14px;margin-top:12px}
.conv .bar{flex:1;max-width:280px;height:6px;border-radius:0;background:var(--surface);overflow:hidden}
.conv .bar span{display:block;height:100%;background:var(--accent);border-radius:0}
.conv .val{font-family:var(--font-head);font-weight:700;font-size:28px;line-height:28px;
  letter-spacing:0;text-transform:uppercase}
.conv .of{font-family:var(--font-mono);font-size:12px;color:var(--muted-2)}

/* ---------- AI stance: automated vs human ---------- */
.two-col-note{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--border);border-radius:0;overflow:hidden}
.two-col-note > div{padding:24px}
.two-col-note > div + div{border-left:1px solid var(--border)}
.two-col-note h4{font-size:15px;line-height:22px;font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:8px}
.two-col-note h4 .dot{width:7px;height:7px;border-radius:0;flex:none}
.two-col-note ul{display:flex;flex-direction:column;gap:10px;list-style:none;padding-left:0;margin-left:0}
.two-col-note li{color:var(--muted);font-size:14px;line-height:22px;padding-left:18px;position:relative;list-style:none}
.two-col-note li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--faint)}

/* ---------- .split nested inside .sec ----------
   vc.css gives .split its own 40px padding, which double-indents when the
   split sits inside a .sec. Pull it out to the section edges so the copy
   lines up with every other section heading. */
.sec > .split{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
.sec > .split h2{font-size:32px;line-height:34px;font-weight:600;letter-spacing:-.01em}

/* ---------- Small utilities ---------- */
.updated{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:12px;line-height:16px;color:var(--muted-2)}
.stack-inline{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sec.tight{padding-top:40px;padding-bottom:40px}
.anchor{scroll-margin-top:calc(var(--nav-h) + 24px)}
.dl-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.dl-cta .note{color:var(--muted-2);font-size:13px;line-height:20px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  /* single-column split: drop the component's side padding so copy stays
     flush with the section gutter */
  .sec > .split{margin-left:0;margin-right:0}
  .sec > .split > *{padding:32px 0}
  .sec > .split > *:first-child{padding-top:0}
  .sec > .split > *:last-child{padding-bottom:0}
  .doc{grid-template-columns:1fr}
  .doc > .doc-nav{padding:24px var(--pad);border-right:none;border-bottom:1px solid var(--border)}
  .doc .toc{position:static}
  /* stacked TOC gets long on one column — lay it out as pills instead */
  .doc .toc a{display:inline-block;padding:6px 12px;margin:0 6px 8px 0;font-size:13px;
    line-height:18px;border:1px solid var(--border-2);border-radius:0}
  .doc .toc a.on{background:var(--surface)}
  .doc .toc .meta{margin-top:16px;padding-top:14px}
  .clause.split{grid-template-columns:1fr}
  .dl-strip{grid-template-columns:repeat(2,1fr)}
  .dl-strip > a{padding-left:24px!important;border-bottom:1px solid var(--border)}
  .dl-strip > a:nth-child(2n){border-right:none}
  .never{grid-template-columns:1fr}
  .never > div{border-right:none}
}
@media (max-width:620px){
  .axis{grid-template-columns:1fr;gap:10px;padding:16px 0}
  .axis .axis-lbl{padding-top:0}
  .dl-strip{grid-template-columns:1fr}
  .dl-strip > a{border-right:none;padding:20px 0!important}
  .sec > .split h2{font-size:26px;line-height:30px}
  .clause.split > *{padding:24px var(--pad)}
  /* stacked tabs read as a list, not a broken tab bar */
  .tabs{border-bottom:none;gap:0;margin-bottom:24px}
  .tab{width:100%;text-align:left;margin-bottom:0;padding:12px 14px;
    border-bottom:1px solid var(--border);border-left:2px solid transparent}
  .tab[aria-selected="true"]{border-left-color:var(--white);border-bottom-color:var(--border)}
  .pg-hero .actions .updated{margin-left:0!important}
  .two-col-note{grid-template-columns:1fr}
  .two-col-note > div + div{border-left:none;border-top:1px solid var(--border)}
  .memo-sec{grid-template-columns:1fr;gap:8px}
  .memo-doc .doc-inner{padding:8px 20px 20px}
  .memo-doc .doc-head{padding:20px}
  .lib-bar{align-items:stretch;flex-direction:column;gap:12px}
}