/* ==========================================================================
   DrH — additions for the library, pricing and request pages.
   Loaded after styles.css. Uses only the existing token set, so both the
   model (dark) and sheet (light) themes are inherited automatically.
   Every selector here is new — nothing in styles.css is overridden.
   ========================================================================== */

/* ------------------------------------------------------------ page head */
.pagehead{padding-block:clamp(72px,11vw,132px) clamp(28px,4vw,48px)}
.pagehead .copy{max-width:62ch}
.crumb{
  display:flex;gap:8px;align-items:center;
  font-family:var(--mono);font-size:.78rem;color:var(--faint);margin:0 0 18px
}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--red)}
.crumb span{color:var(--line)}

/* --------------------------------------------------------------- plans */
.plans{
  display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:start
}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,3vw,34px);
  background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-lg)
}
.plan-lead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)
}
.plan-lead h3{margin:0;font-size:1.12rem;letter-spacing:-.01em}
.plan-kind{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:22px 0 4px}
.plan-fig{font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;font-weight:600;letter-spacing:-.035em}
.plan-per{font-family:var(--mono);font-size:.82rem;color:var(--muted);line-height:1.35}
.plan-sub{margin:0 0 24px;color:var(--muted);font-size:.9rem}
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--text-2)}
.plan li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--red)}
.plan li.off{color:var(--faint)}
.plan li.off svg{color:var(--line)}
.plan .btn{margin-top:auto}
.plan-foot{margin:14px 0 0;font-size:.8rem;color:var(--faint);text-align:center}

.plan.is-pro{border-color:var(--red-line);background:
  linear-gradient(180deg,var(--red-wash),transparent 190px),var(--ink-1)}
.plan-flag{
  position:absolute;top:-11px;left:clamp(24px,3vw,34px);
  padding:3px 10px;border-radius:999px;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em
}

/* --------------------------------------------------- feature breakdown */
.grid-2{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.perk{padding:24px;background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-md)}
.perk svg{width:22px;height:22px;color:var(--red);margin-bottom:12px}
.perk h3{margin:0 0 8px;font-size:1rem}
.perk p{margin:0;color:var(--muted);font-size:.92rem}

/* --------------------------------------------------------- library bar */
.libbar{
  display:grid;gap:12px;margin-bottom:22px;
  grid-template-columns:minmax(220px,1fr) auto auto;align-items:center
}
@media (max-width:760px){.libbar{grid-template-columns:1fr}}
.search{
  display:flex;align-items:center;gap:10px;
  padding:0 14px;height:46px;
  background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-md)
}
.search:focus-within{border-color:var(--red-line)}
.search svg{width:17px;height:17px;color:var(--faint);flex:none}
.search input{
  flex:1;min-width:0;background:none;border:0;outline:0;
  color:var(--text);font-family:var(--sans);font-size:.95rem
}
.search input::placeholder{color:var(--faint)}
.search kbd{
  font-family:var(--mono);font-size:.68rem;color:var(--faint);
  border:1px solid var(--line);border-radius:4px;padding:2px 6px
}
.sortbox{
  height:46px;padding:0 12px;
  background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text-2);font-family:var(--mono);font-size:.82rem
}
.libcount{font-family:var(--mono);font-size:.8rem;color:var(--faint);white-space:nowrap}

.chipset{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.chipset > b{
  font-family:var(--mono);font-size:.72rem;color:var(--faint);
  font-weight:400;margin-right:2px;min-width:52px
}
.tog{
  padding:6px 13px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--text-2);
  font-family:var(--mono);font-size:.78rem;
  transition:border-color var(--speed) var(--ease),color var(--speed) var(--ease)
}
.tog:hover{border-color:var(--red-line);color:var(--text)}
.tog[aria-pressed="true"]{border-color:var(--red);color:var(--red);background:var(--red-wash)}

/* ------------------------------------------------------------ tool grid */
.tools{
  display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
  align-items:start
}
.tool{
  display:flex;flex-direction:column;gap:12px;
  padding:20px;background:var(--ink-1);
  border:1px solid var(--line);border-radius:var(--r-md)
}
.tool:target{border-color:var(--red)}
.tool-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tool-top h3{margin:0;font-size:1rem;letter-spacing:-.01em}
.tool-cmd{display:block;font-family:var(--mono);font-size:.76rem;color:var(--red);margin-top:3px}
.tool p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.tool-meta{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding-top:12px;border-top:1px solid var(--line-soft)
}
.tag-sm{
  font-family:var(--mono);font-size:.7rem;padding:2px 8px;border-radius:4px;
  border:1px solid var(--line);color:var(--muted)
}
.tag-sm.host{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-wash)}
.tag-sm.pro{border-color:var(--red);color:var(--red);background:var(--red-wash)}
.tag-sm.yr{color:var(--faint)}
.tool-when{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--faint)}

.empty{
  grid-column:1/-1;padding:56px 24px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r-md);color:var(--muted)
}
.empty b{display:block;color:var(--text);margin-bottom:6px}

.notice{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;margin-bottom:22px;
  background:var(--amber-wash);border:1px solid var(--amber);border-radius:var(--r-sm);
  color:var(--text-2);font-size:.88rem
}
.notice svg{width:18px;height:18px;flex:none;color:var(--amber);margin-top:2px}

/* ----------------------------------------------------------------- form */
.form{display:grid;gap:16px;max-width:640px}
.field{display:grid;gap:7px}
.field label{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.field label b{color:var(--red);font-weight:400}
.field input,.field textarea,.field select{
  width:100%;padding:11px 13px;
  background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font-family:var(--sans);font-size:.95rem;outline:0
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red)}
.field small{font-size:.78rem;color:var(--faint)}
.field.bad input,.field.bad textarea{border-color:var(--red-hot)}
.field .err{font-size:.78rem;color:var(--red-hot);display:none}
.field.bad .err{display:block}
.row-2{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:620px){.row-2{grid-template-columns:1fr}}
.formnote{margin:0;font-size:.82rem;color:var(--faint);max-width:62ch}
.formstate{display:none;font-size:.9rem;padding:12px 14px;border-radius:var(--r-sm)}
.formstate.ok{display:block;color:var(--cyan);background:var(--cyan-wash);border:1px solid var(--cyan)}
.formstate.err{display:block;color:var(--red-hot);background:var(--red-wash);border:1px solid var(--red-line)}

/* ------------------------------------------------------------- releases */
.rel{display:grid;gap:0}
.rel-item{
  display:grid;gap:6px 26px;padding:22px 0;
  grid-template-columns:150px 1fr;border-top:1px solid var(--line-soft)
}
.rel-item:first-child{border-top:0}
@media (max-width:680px){.rel-item{grid-template-columns:1fr;gap:10px}}
.rel-when{font-family:var(--mono);font-size:.8rem;color:var(--faint)}
.rel-v{font-family:var(--mono);font-size:.82rem;color:var(--red);display:block}
.rel-body h3{margin:0 0 8px;font-size:1rem}
.rel-body ul{margin:0;padding-left:18px;color:var(--muted);font-size:.92rem;display:grid;gap:5px}

/* ------------------------------------------------------------- utility */
.stack-lg > * + *{margin-top:clamp(40px,6vw,72px)}
.center-narrow{max-width:62ch}

/* ---------------------------------------------------------- flagship */
.tool.is-flagship{
  position:relative;
  border-color:var(--red-line);
  background:linear-gradient(180deg,var(--red-wash),transparent 120px),var(--ink-1)
}
.flagship-flag{
  position:absolute;top:-9px;left:18px;
  padding:2px 9px;border-radius:999px;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.05em
}
.tool.is-flagship .tool-top{padding-top:4px}

.tool-more{margin:0;border-top:1px solid var(--line-soft);padding-top:12px}
.tool-more summary{
  cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.76rem;color:var(--red);
  display:flex;align-items:center;gap:7px
}
.tool-more summary::-webkit-details-marker{display:none}
.tool-more summary::before{
  content:"+";display:inline-block;width:13px;
  font-size:.95rem;line-height:1;color:var(--red)
}
.tool-more[open] summary::before{content:"–"}
.tool-more summary:hover{color:var(--red-hot)}
.tool-more summary:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}
.tool-more ul{
  margin:11px 0 0;padding-left:17px;
  display:grid;gap:7px;color:var(--muted);font-size:.87rem;line-height:1.55
}
.tool-more li::marker{color:var(--red-line)}

/* --------------------------------------------------------- showcase */
.showcase{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.show{
  display:flex;flex-direction:column;gap:12px;padding:24px;
  background:linear-gradient(180deg,var(--red-wash),transparent 140px),var(--ink-1);
  border:1px solid var(--red-line);border-radius:var(--r-md)
}
.show-host{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--red);display:flex;align-items:center;gap:8px
}
.show-host::after{content:"";flex:1;height:1px;background:var(--red-line)}
.show h3{margin:0;font-size:1.06rem;letter-spacing:-.01em}
.show code{font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.show p{margin:0;color:var(--text-2);font-size:.92rem;flex:1}
.show-foot{
  padding-top:12px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.72rem;color:var(--faint)
}

/* Honeypot. Kept out of the layout and away from assistive tech, but still a
   real focusable input so a form-filling bot finds and completes it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}