/* ==========================================================================
   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:stretch
}
.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;white-space:nowrap}
/* Local currencies (EGP, SAR, AED) show their code as a small label beside the figure so it stays on one line. */
html[data-currency]:not([data-currency="USD"]) .plan-cur{font-size:.34em;font-weight:500;letter-spacing:.04em;vertical-align:.95em;margin-right:.28em;color:var(--muted)}
.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}
@media (min-width:900px){
  .plan-lead{min-height:2.4em}
  .plan-sub{min-height:5em}
}

.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);
  row-gap:clamp(22px,2.4vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
  align-items:start
}
/* the flagship badge overhangs the card, so the grid needs room under the filters */
.chipset + .tools{margin-top:clamp(20px,2.4vw,28px)}
.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-head{flex:1;min-width:0}
.tool-top h3{margin:0;font-size:1rem;letter-spacing:-.01em}

/* Logo plinth. The marks are black artwork with red linework on a transparent
   ground, so the tile is lifted off the card in both themes to keep the solid
   areas readable rather than sinking into the background. */
.tool-ico,.show-ico{
  display:grid;place-items:center;flex:none;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm)
}
.tool-ico{width:52px;height:52px;padding:3px}
.tool-ico img{width:100%;height:100%;object-fit:contain;display:block}
.tool.is-flagship .tool-ico{border-color:var(--red-line)}
.tool-cmd{display:inline-block;font-family:var(--mono);font-size:.76rem;color:var(--red);margin-top:5px}
.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(272px,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}
/* Only the body copy grows, so every footer sits on the same line across the
   row. The class needs the element qualifier to outrank .show p above. */
p.show-foot{flex:none}
.show-foot{
  padding-top:12px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.72rem;color:var(--faint)
}

/* The mark sits above the name so the four cards read as a set of products
   rather than four paragraphs that happen to have pictures. */
.show-ico{
  width:76px;height:76px;padding:6px;border-color:var(--red-line);
  transition:transform var(--speed) var(--ease),border-color var(--speed) var(--ease)
}
.show-ico img{width:100%;height:100%;object-fit:contain;display:block}
.show:hover .show-ico{transform:translateY(-2px);border-color:var(--red)}
.show-name{display:flex;flex-direction:column;gap:3px}
.show-cmd{
  font-family:var(--mono);font-size:.74rem;color:var(--red);
  letter-spacing:.02em;align-self:flex-start
}
@media (prefers-reduced-motion:reduce){
  .show:hover .show-ico{transform:none}
}

/* 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}

/* ---------------------------------------------------- cursor glow, site-wide
   The red wash that follows the pointer on the host cards, applied to every
   card-like panel on the site. app.js sets --mx / --my on whichever panel the
   pointer is over. :where() keeps these rules weaker than each panel's own. */
:where(.plan,.perk,.showcase .show,.tool,.contact,.facts,.table-scroll,.release,.faq details){position:relative}
:is(.plan,.perk,.showcase .show,.tool,.contact,.facts,.table-scroll,.release,.faq details)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--red-wash),transparent 68%);
  transition:opacity .3s var(--ease)
}
:is(.plan,.perk,.showcase .show,.tool,.contact,.facts,.table-scroll,.release,.faq details):hover::after{opacity:1}
:where(.plan,.perk,.tool,.contact,.facts,.table-scroll,.release){transition:border-color var(--speed) var(--ease)}
:where(.plan,.perk,.tool,.contact,.facts,.table-scroll,.release):hover{border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
.faq details:not([open]):hover{border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
@media (hover:none){
  :is(.plan,.perk,.showcase .show,.tool,.contact,.facts,.table-scroll,.release,.faq details)::after{display:none}
}

/* ------------------------------------------------------- term picker */
.plan-term{display:flex;align-items:center;align-content:flex-start;flex-wrap:wrap;gap:8px 10px;min-height:66px;margin:14px 0 18px}
.plan-term .plan-save{flex-basis:100%}
.plan-per{white-space:nowrap}
.plan-term label{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.plan-term select.sortbox{height:38px;padding:0 30px 0 12px;cursor:pointer;color:var(--text);
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;
  transition:border-color var(--speed) var(--ease)}
.plan-term select.sortbox:hover{border-color:var(--red-line)}
.plan-term select.sortbox:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-color:var(--red)}
.plan-save,.plan-term-static{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.plan-save.is-saving{color:var(--amber)}