/* haidercode.ai. The public hosted-tools catalog: /tools, /tools/<category>
   and /tools/<category>/<tool>. Loaded after /style.css only while hosted
   tools are on. Catalog pages use body.tools; shared table rules also cover
   the dashboard tools list inside .tools-catalog.

   Markup hooks (src/tools_pages.rs): .taccount is the signed-in status line;
   .tsearch the search form; .trail the category rail; .tlist the one semantic
   table whose .trow rows carry data-label cells and stack into cards below
   640px; .tchip* and .chip--coming say a tool's standing; .taction is a row's
   one link; .td* are the detail page's cards.

   Rules that bite (DESIGN-SYSTEM.md and the landing passes):
     - Colour comes from the shared tokens only, so all four themes are
       complete here by construction. Small text rides --ink-soft or
       --orange-ink; --ink-faint is kept for labels and captions, which clear
       4.5:1 on every ground they land on.
     - Chroma is the signal: the accent tint marks a live tool, everything
       else is neutral. No glow, no gradient anywhere.
     - Rules are the console's own --line hairlines, the same pairing as
       .card and .tbl (about 1.2:1 on the night and gunmetal grounds); the
       panel edge, the sunk header row and the row hover carry the
       structure, not the rules.
     - Every control is at least 44px tall on a phone. Links that sit in
       prose grow their hit box with padding and pull it back with margin,
       so the text does not move and the focus ring stays on the words. */

body.tools .toolspage { max-width: 1120px; padding-top: 40px; }

/* ---------- head ---------- */
body.tools .thead { margin: 0 0 20px; max-width: 46rem; }
body.tools .thead h1 { margin: 2px 0 0; }
body.tools .thead .lead { margin: 12px 0 0; max-width: 62ch; }

/* ---------- account status line ----------
   One sentence of figures in the data face on a sunk strip: a status bar,
   not a banner. The one link is the way to the console. */
body.tools .taccount {
  margin: 0 0 18px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-dim);
  color: var(--ink-soft);
  font-family: var(--font-data);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.7;
}
body.tools .taccount__i { display: inline-block; max-width: 100%; vertical-align: top; }
body.tools .taccount a {
  color: var(--orange-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.tools .taccount a:hover { color: var(--ink); }

/* ---------- search ---------- */
body.tools .tsearch { margin: 0 0 22px; }
body.tools .tsearch__l,
body.tools .tsearch__row > label {
  color: var(--ink-faint);
  font-family: var(--font-data);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.tools .tsearch__l { display: block; margin: 0 0 6px; }
body.tools .tsearch__row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
body.tools .tsearch__row > label { margin-left: 4px; }
body.tools .tsearch__i {
  flex: 1 1 22rem;
  min-width: 0;
  min-height: 2.5rem;
  border-color: var(--line-strong);
}
body.tools .tsearch__i::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The two selects take the search field's own shape so the row is one
   family: hairline edge, 10px radius, raised ground, body face. */
body.tools .tsearch select {
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0 .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .9rem;
}
body.tools .tsearch select:hover { border-color: var(--ink-soft); }
body.tools .tsearch__x {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 .5rem;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.tools .tsearch__x:hover { color: var(--orange-ink); }

/* ---------- rail + results ---------- */
body.tools .tlayout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
body.tools .trail {
  display: grid;
  gap: 1px;
  position: sticky;
  top: 16px;
  /* Grid items default to min-width:auto: without this the rail's own
     min-content width widens the whole document on a phone. */
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
body.tools .trail__i {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.25;
}
body.tools .trail__i:hover { background: var(--paper-dim); color: var(--ink); }
body.tools .trail__i--on {
  background: var(--paper-dim);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--orange);
}
body.tools .trail__ic { flex: 0 0 auto; display: inline-flex; color: var(--ink-faint); }
body.tools .trail__i:hover .trail__ic,
body.tools .trail__i--on .trail__ic { color: var(--orange-ink); }
body.tools .trail__ic svg { width: 16px; height: 16px; display: block; }
body.tools .trail__n { flex: 1 1 auto; min-width: 0; }
body.tools .trail__c {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-family: var(--font-data);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
body.tools .trail__i--on .trail__c { color: var(--ink-soft); }

body.tools .tres { min-width: 0; }
body.tools .tres__h {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
body.tools .tres__c {
  margin: 0 0 12px;
  padding: 0 2px;
  color: var(--ink-faint);
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1.6;
}
body.tools .tres__h + .tres__c { margin-top: 4px; }
body.tools .tempty {
  margin: 0;
  padding: 26px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--t-md);
  text-align: center;
}
body.tools .tempty a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
body.tools .tempty a:hover { color: var(--ink); }

/* ---------- the table ----------
   One raised panel with a sunk header row, hairline rules, tabular figures
   and a hover tint: the console's own table, so a tool reads the same here
   and on the dashboard. Separate borders so the panel can carry a radius
   without a wrapper. */
:is(body.tools, .tools-catalog) .tlist {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  background: var(--surface);
  table-layout: fixed;
  font-size: .84rem;
  line-height: 1.4;
}
:is(body.tools, .tools-catalog) .tlist th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-dim);
  color: var(--ink-faint);
  font-family: var(--font-data);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
:is(body.tools, .tools-catalog) .tlist th:first-child { border-top-left-radius: 11px; }
:is(body.tools, .tools-catalog) .tlist th:last-child { border-top-right-radius: 11px; }
:is(body.tools, .tools-catalog) .tlist th:nth-child(1) { width: 26%; }
:is(body.tools, .tools-catalog) .tlist th:nth-child(2) { width: 37%; }
:is(body.tools, .tools-catalog) .tlist th:nth-child(3) { width: 15%; }
:is(body.tools, .tools-catalog) .tlist th:nth-child(4) { width: 22%; }
:is(body.tools, .tools-catalog) .tlist td {
  padding: 10px 12px 11px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
:is(body.tools, .tools-catalog) .trow:last-child td { border-bottom: 0; }
:is(body.tools, .tools-catalog) .trow:last-child td:first-child { border-bottom-left-radius: 11px; }
:is(body.tools, .tools-catalog) .trow:last-child td:last-child { border-bottom-right-radius: 11px; }
:is(body.tools, .tools-catalog) .trow:hover td { background: var(--paper-dim); }
:is(body.tools, .tools-catalog) .tlist td:nth-child(2) { color: var(--ink-soft); }
/* The Tool cell is the row's target: the title carries the underline, and
   its ::after stretches the hit box over the whole cell, id included. */
:is(body.tools, .tools-catalog) .tlist td:first-child { position: relative; }
:is(body.tools, .tools-catalog) .tlist__title {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(body.tools, .tools-catalog) .tlist__title::after { content: ""; position: absolute; inset: 0; }
:is(body.tools, .tools-catalog) .tlist__title:hover { color: var(--orange-ink); text-decoration-color: currentColor; }
:is(body.tools, .tools-catalog) .tlist__id,
:is(body.tools, .tools-catalog) .tlist small {
  display: block;
  margin-top: 4px;
  color: var(--ink-faint);
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .01em;
}
/* Mono and chips sit on their own line boxes (block, or top-aligned atomic
   inlines) so a late web font cannot move a row by a pixel. */
:is(body.tools, .tools-catalog) .tlist__price {
  display: block;
  color: var(--ink);
  font-family: var(--font-data);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
:is(body.tools, .tools-catalog) .tlist .chip { vertical-align: top; }
:is(body.tools, .tools-catalog) .taction {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(body.tools, .tools-catalog) .taction:hover { color: var(--orange-ink); }

/* ---------- standing chips ----------
   Live and Connected take the accent tint: chroma is the signal. Waiting
   states sit on a sunk neutral fill, a key you would bring is a plain
   outline, Coming keeps the landing's dashed chip from /style.css and Off
   is the faint fill. Labels may wrap, so the pill grows instead of clipping. */
:is(body.tools, .tools-catalog) .tchip,
:is(body.tools, .tools-catalog) .chip--coming {
  height: auto;
  min-height: 1.45rem;
  padding: .12rem .6rem;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}
:is(body.tools, .tools-catalog) .tchip { border-style: solid; }
:is(body.tools, .tools-catalog) .tchip--on {
  border-color: transparent;
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  color: var(--orange-ink);
}
:is(body.tools, .tools-catalog) .tchip--key {
  border-color: var(--line);
  background: var(--paper-dim);
  color: var(--ink-soft);
}
:is(body.tools, .tools-catalog) .tchip--byok { border-color: var(--line-strong); background: transparent; color: var(--ink-soft); }
:is(body.tools, .tools-catalog) .tchip--off { border-color: transparent; background: var(--paper-dim); color: var(--ink-faint); }

/* ---------- detail page ---------- */
body.tools .tcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--ink-faint);
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: .04em;
}
body.tools .tcrumb a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
body.tools .tcrumb a:hover { color: var(--orange-ink); text-decoration-color: currentColor; }
body.tools .tdhead { margin: 0 0 20px; max-width: 46rem; }
body.tools .tdhead h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.tools .tdhead__state { margin: 12px 0 0; }
body.tools .tdhead .lead { margin: 12px 0 0; }
body.tools .tdid {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  font-family: var(--font-data);
  font-size: .74rem;
}
body.tools .tdid code { color: var(--ink); }
body.tools .tdid__v { color: var(--ink-soft); }

body.tools .tdgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}
body.tools .tdcard { margin: 0; padding: 16px 16px 14px; min-width: 0; overflow: hidden; }
body.tools .tdcard h2,
body.tools .tdsec h2 {
  margin: 0 0 8px;
  color: var(--ink-faint);
  font-family: var(--font-data);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.tools .tdcard .big { margin: 0; font-size: 26px; }
body.tools .tdcard .muted { margin: 2px 0 0; }
body.tools .tdcard .muted,
body.tools .tdsec .muted { color: var(--ink-soft); }
body.tools .tdstate { margin: 0; font-size: .95rem; font-weight: 600; }
body.tools .tdstate .taction { margin-top: 8px; }
body.tools .tnote { margin: 8px 0 0; color: var(--ink-soft); font-size: var(--t-sm); }
body.tools .tdsec { margin: 0 0 10px; padding: 16px 16px 14px; min-width: 0; }
body.tools .tprov {
  margin: 0 0 9px;
  padding: 6px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--ink-soft);
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .04em;
}
/* The mono blocks scroll inside themselves in both axes, so a long schema or
   a wide curl line never widens the card or the page. */
body.tools .tdcode {
  margin: 0;
  max-width: 100%;
  max-height: 22rem;
  overflow: auto;
  white-space: pre;
  font-size: .74rem;
  line-height: 1.55;
  tab-size: 2;
}
/* The scroll box is a keyboard stop: it takes the site's own ring rather
   than the user agent's hairline. */
body.tools .tdcode:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
body.tools .tdsec .muted { margin: 10px 0 0; }
body.tools .tbl.tdlim { font-size: var(--t-sm); }
body.tools .tbl.tdlim th {
  width: 15rem;
  border-bottom-color: var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
body.tools .tbl.tdlim td {
  color: var(--ink);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.tools .tdtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
body.tools .ttag {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-dim);
  color: var(--ink-soft);
  font-family: var(--font-data);
  font-size: .68rem;
}
body.tools .tdback { margin: 18px 0 0; font-size: var(--t-md); }
body.tools .tdback a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
body.tools .tdback a:hover { color: var(--ink); }

/* ---------- motion: colour only, and none at all when asked ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.tools .trail__i,
  :is(body.tools, .tools-catalog) .tlist__title,
  :is(body.tools, .tools-catalog) .taction,
  :is(body.tools, .tools-catalog) .tlist td { transition: background-color .12s ease, color .12s ease, text-decoration-color .12s ease; }
}

/* ---------- tablet and phone: the rail wraps into rows of pills ----------
   Never a horizontal scroller: Chrome leaves a partly visible focused item
   where it is, which cuts its label and its ring. Wrapped, every stop is
   whole and its ring complete. */
@media (max-width: 900px) {
  body.tools .tlayout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.tools .trail {
    display: flex;
    flex-wrap: wrap;
    position: static;
    overflow: visible;
    gap: 4px;
    padding: 6px;
  }
  body.tools .trail__i { flex: 0 0 auto; min-height: 40px; }
  body.tools .trail__i--on { box-shadow: inset 0 -2px 0 var(--orange); }
  body.tools .tdgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phone: cards, 44px targets, nothing wider than the screen ---------- */
@media (max-width: 639px) {
  body.tools .toolspage { padding-top: 26px; }
  body.tools .taccount { padding: 8px 12px; font-size: .72rem; }
  /* The form becomes a two-column grid so each label keeps its select
     beside it and nothing orphans at a row end. */
  body.tools .tsearch__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
  }
  body.tools .tsearch__row > label { margin: 0; }
  body.tools .tsearch__i,
  body.tools .tsearch .btn,
  body.tools .tsearch__x { grid-column: 1 / -1; }
  body.tools .tsearch__i { min-height: 44px; }
  body.tools .tsearch select { width: 100%; min-height: 44px; }
  body.tools .tsearch .btn,
  body.tools .tsearch__x { min-height: 44px; justify-content: center; }
  body.tools .trail__i { min-height: 44px; }

  /* The same cells, one card per tool: title and summary across the card,
     price and standing side by side, each cell labelled from data-label. */
  :is(body.tools, .tools-catalog) .tlist,
  :is(body.tools, .tools-catalog) .tlist tbody { display: block; border: 0; border-radius: 0; background: transparent; }
  :is(body.tools, .tools-catalog) .tlist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(body.tools, .tools-catalog) .trow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 14px;
    margin: 0 0 10px;
    padding: 13px 14px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
  }
  :is(body.tools, .tools-catalog) .tlist td,
  :is(body.tools, .tools-catalog) .trow:hover td,
  :is(body.tools, .tools-catalog) .trow:last-child td:first-child,
  :is(body.tools, .tools-catalog) .trow:last-child td:last-child {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  :is(body.tools, .tools-catalog) .tlist td:nth-child(1),
  :is(body.tools, .tools-catalog) .tlist td:nth-child(2) { grid-column: 1 / -1; }
  :is(body.tools, .tools-catalog) .tlist td::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 3px;
    color: var(--ink-faint);
    font-family: var(--font-data);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  :is(body.tools, .tools-catalog) .tlist__title { font-size: .95rem; line-height: 1.35; }
  :is(body.tools, .tools-catalog) .tlist__id { margin-top: 2px; }
  :is(body.tools, .tools-catalog) .tlist td:nth-child(2) { font-size: .86rem; }
  :is(body.tools, .tools-catalog) .taction { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
  body.tools .tdstate .taction { margin-top: 0; }

  /* Links in prose: a 44px hit box that leaves the text and the focus ring
     where they were. */
  body.tools .taccount a,
  body.tools .tempty a,
  body.tools .tcrumb a,
  body.tools .tdback a {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 14px 6px;
    margin: -14px -6px;
    outline-offset: -12px;
  }

  body.tools .tdgrid { grid-template-columns: minmax(0, 1fr); }
  body.tools .tbl.tdlim th { width: auto; }
  body.tools .tdcode { font-size: .7rem; }
}