/* haidercode.ai. The Tools console sheet, loaded after /style.css and only
   while hosted tools are on, so nothing here can move a page that ships
   without the feature.

   Rules that bite (DESIGN-SYSTEM.md):
     - Colour comes from the shared tokens only. Both themes are complete, and
       no value below is defined for one theme alone.
     - Class names are the tools lane's own (t*, al*). The artifacts panel owns
       .a* in its own sheet; nothing here reaches another panel's markup.
     - Data reads dense: tabular numerals, hairlines, small radii. */

/* ================================================================
   Weekly allowance pair (Usage panel)
   ================================================================ */
/* One column at every width: the two windows are read in order, models first,
   and a stacked pair keeps each bar as wide as the card instead of halving
   the track the numbers sit on. */
.page .albars {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
  margin-top: var(--s3);
}
.page .albar {
  padding: var(--s3) var(--s4) var(--s4);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--r3);
  background: var(--paper);
}
/* The band is said in the border as well as the bar, so the pair can be told
   apart in a screenshot and by a reader who cannot separate the two hues. */
.page .albar.ok   { border-top-color: var(--ok); }
.page .albar.warn { border-top-color: var(--warn); }
.page .albar.crit { border-top-color: var(--danger); }
.page .albar.none { border-top-color: var(--line); }
.page .albar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}
.page .albar .wm-pct { margin: 6px 0 var(--s3); }
.page .albar .wm-pct b { font-size: 26px; }
.page .albar .wm-reset { margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.page .albar-next { color: var(--ink-soft); }

/* Two segments in one track: what is left, then what calls in flight hold.
   The hatch is a texture rather than a third colour, so the bar keeps saying
   one thing: how much of this window is still spendable. */
.page .albar-bar { display: flex; }
.page .albar-bar > i,
.page .albar-bar > u { display: block; height: 100%; }
.page .albar-bar > u {
  background-color: var(--paper-dim);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ink-faint) 0 2px,
    transparent 2px 5px
  );
  border-left: 1px solid var(--line);
  opacity: .75;
}

/* The shared banner is a flex row, so the paused sentence travels as ONE
   item. Without this wrapper the inline Billing link would become a second
   column and split the prose into narrow strips. */
.page .banner-err > .tsay { flex: 1 1 auto; min-width: 0; }
/* The banner's one link is an action, so it looks like one: the shared sheet
   strips link decoration globally. */
.page .banner-err > .tsay a { text-decoration: underline; text-underline-offset: 2px; }

/* ================================================================
   Tools panel tables
   ================================================================ */
.page .tsec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.page .tsec-head h3 { margin: 0; }
.page .tsec-head a { font-size: var(--t-sm); }
.page .tbl.ttbl td { vertical-align: top; }
.page .tbl.ttbl td.ttool { min-width: 12rem; }
.page .ttool-t { display: grid; gap: 1px; min-width: 0; }
.page .tid code { color: var(--ink-faint); font-size: var(--t-sm); }
.page .tbl.ttbl code { font-family: var(--font-mono); }
.page .thow { margin: 0; }
.page .thow code { font-size: var(--t-sm); }
.page .thow a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.page .thow a:hover { color: var(--ink); }

/* ================================================================
   Custom-tool editor
   ================================================================ */
.page .tform {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.page .tform h4 {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--t-h3);
}
.page .tgrid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.page .tgrid > label {
  display: grid;
  gap: 5px;
  align-content: start;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  min-width: 0;
}
.page .tgrid > label.tspan { grid-column: 1 / -1; }
/* `display: grid` on the label and `display: inline-flex` on the button both
   outrank the user agent's [hidden] rule, so the fields that appear with an
   authentication type, and the cancel action, say so here. */
.page .tgrid > label[hidden],
.page .tactions .btn[hidden] { display: none; }
.page .tgrid input,
.page .tgrid select,
.page .tgrid textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0;
}
.page .tgrid textarea { resize: vertical; line-height: 1.5; }
/* Placeholders on the raised field ground: the shared sheet covers inputs
   only, and Chrome's default placeholder grey fails 4.5:1 on three of the
   four grounds. */
.page .tgrid input::placeholder,
.page .tgrid textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.page .tgrid input:focus-visible,
.page .tgrid select:focus-visible,
.page .tgrid textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.page .tnote {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.page .tnote.bad { color: var(--danger); }
.page .tnote.good { color: var(--ok); }
.page .tactions { margin-top: var(--s3); flex-wrap: wrap; gap: var(--s2); }
/* The next-page control. `.row` sets `display: flex`, which outranks the user
   agent's [hidden] rule, so the hidden state is said again here: with the
   cursor exhausted there is no more to load and no button to press. */
.page .tmore { margin-top: var(--s3); }
.page .tmore[hidden] { display: none; }
/* A save on its way: the submit is disabled until the reply lands, so the
   state is visible as well as enforced. */
.page .tactions .btn[disabled] { opacity: .55; cursor: progress; }
.page .tmsg {
  margin: var(--s2) 0 0;
  min-height: 1.2em;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.page .tmsg.bad { color: var(--danger); }
.page .tmsg.good { color: var(--ok); }
.page .tpreview {
  margin-top: var(--s3);
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The in-row confirm: the row keeps its shape until Delete is pressed, then
   the question takes the width it needs to be read before it is answered. */
.page .tdel summary { list-style: none; cursor: pointer; white-space: nowrap; }
.page .tdel summary::-webkit-details-marker { display: none; }
.page .tdel[open] > summary { display: none; }
.page .tdel-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s2);
  border: 1px solid var(--danger);
  border-radius: var(--r2);
  background: var(--danger-bg);
}
.page .tdel-form span { flex: 1 1 12rem; font-size: var(--t-sm); color: var(--ink); }
.page .tdel-form .btn { min-height: 2rem; padding: .3rem .8rem; font-size: .8rem; }
.page .tact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}

@media (max-width: 640px) {
  .page .tgrid { grid-template-columns: 1fr; }
  .page .tsec-head { flex-wrap: wrap; }
  /* The confirm is a sentence, not a column. In a phone-width action cell it
     claims a row wide enough to be read and stacks its two answers, instead of
     collapsing to one word per line. */
  .page .tdel-form {
    flex-direction: column;
    align-items: stretch;
    min-width: 15rem;
  }
  .page .tdel-form span { flex: 0 0 auto; }
}

/* Night: the raised fields need their own ground, because --surface is the
   card's ground there and a field drawn on it would vanish into the card. */
:root[data-theme="night"] .page .tgrid input,
:root[data-theme="night"] .page .tgrid select,
:root[data-theme="night"] .page .tgrid textarea {
  background: var(--paper-dim);
}
:root[data-theme="night"] .page .albar { background: var(--paper-dim); }
:root[data-theme="night"] .page .albar-bar > u { opacity: .9; }

/* ================================================================
   Personal catalog summary; the full list lives on /tools.
   One sentence of figures in the data face on a sunk strip, the same
   status bar the public catalog shows a signed-in reader (.taccount in
   tools-public.css): a quiet line, not a banner.
   ================================================================ */
.page .tcatalog { padding: 10px 18px; background: var(--paper-dim); }
.page .tcatalog p {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-data);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.8;
}
.page .tcatalog a,
.page .tsec-head a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.page .tcatalog .taccount__i { display: inline-block; max-width: 100%; vertical-align: top; }
.page .tcatalog p > a:first-child,
.page .tcatalog p > .taccount__i:first-child > a { font-weight: 600; }
.page .tcatalog a:hover,
.page .tsec-head a:hover { color: var(--orange-ink); text-decoration-color: currentColor; }

/* ================================================================
   Standing chips, the public catalog's family (tools-public.css) restated
   here so one standing reads the same on both surfaces: Live and Connected
   take the accent tint, waiting states the sunk neutral fill, a key you
   bring is a plain outline, Coming keeps the landing's dashed chip and Off
   the faint fill. The connections table's own `ok` chip is Connected, so it
   takes the same tint; `warn` (Reconnect) keeps the semantic warn colour.
   ================================================================ */
.page .ttbl .chip,
.page .tchip,
.page .tcustom .chip {
  height: auto;
  min-height: 1.45rem;
  padding: .12rem .6rem;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}
.page .tchip { border-style: solid; }
.page .tchip--on,
.page .tconn .chip.ok {
  border-color: transparent;
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  color: var(--orange-ink);
}
.page .tchip--key {
  border-color: var(--line);
  background: var(--paper-dim);
  color: var(--ink-soft);
}
.page .tchip--byok { border-color: var(--line-strong); background: transparent; color: var(--ink-soft); }
.page .tchip--off { border-color: transparent; background: var(--paper-dim); color: var(--ink-faint); }

/* The panel's one primary action takes the console's own primary shape (ink
   ground, paper text: "Create key", "Invite"): the accent ground fails 4.5:1
   under paper text in the day theme. */
.page .tcustom .btn--accent { border-color: transparent; background: var(--ink); color: var(--paper); }
.page .tcustom .btn--accent:hover { filter: none; background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }

/* Receipts and connections: the tool name leads, its id sits under it in the
   data face, and the row's actions read as links. */
.page .ttool-t b { font-weight: 600; }
.page .tbl.ttbl td.ttool .chip { margin-left: 6px; }

/* ---- phone: 44px targets for every control in the panel ---- */
@media (max-width: 640px) {
  .page .tact .linklike,
  .page .tdel summary { display: inline-flex; align-items: center; min-height: 44px; }
  .page .tactions .btn,
  .page .tmore .btn { min-height: 44px; }
  .page .tgrid input,
  .page .tgrid select { min-height: 44px; }
  .page .tcatalog a,
  .page .tsec-head a,
  .page .thow a,
  .page .ttbl td > a {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 14px 8px;
    margin: -14px -8px;
    outline-offset: -12px;
  }
  .page .tdel-form .btn { min-height: 44px; }
}