/* web/pages/tools/tools.css — [TLSX1 tools-page-v1]

   The Tools page, built by pages/tools/tools.js.

   SCOPING: every selector starts with #view-tools. Required — `.set-hint` is
   shared with the Workflows preview pane (app.css:451), the Devices page and
   the Sessions page; `.bk-skel` is the app-wide skeleton; `.tls-rec` /
   `.tls-recrow` / `.tls-dot` are referenced from app.js when it repaints.
   An unscoped rule here would move all of them.

   The page used to wear `class="brsv"` — the SESSIONS wrapper — so it was
   inheriting Sessions' layout from boot/overrides.css:17-23. It now has its
   own `.tlsx-page`. `.brsv` is deliberately NOT removed from overrides.css:
   that rule is `.dashv, .brsv { ... }` and both the Dashboard and the real
   Sessions page still need it.

   TYPE: same desktop-era inheritance as every other page — `.set-hint`
   resolves to 17px through --f-sm (app.css:39, 18px). Prose ran full monitor
   width at a size a step larger than the chrome around it. Corrected
   per-selector onto the kit's 13-15 band with a measure cap; --f-sm itself is
   left alone, it feeds 38 other declarations. */

#view-tools.view.active {
  overflow-y: auto;
  min-height: 0;
}

/* [CTR1] One centred column. The cards were capped at 900px but the page
   was full-width and left-anchored, so on a wide window they hugged the left
   edge while the head's actions sat at the far right, detached from the
   content they act on. Capping the PAGE (900px content + the 34px gutters)
   and centring it keeps head and cards on one shared edge. Same column on
   Tools, Sessions and Computer so switching between them in the rail does
   not make the content jump. */
#view-tools .tlsx-page {
  max-width: calc(900px + 68px);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 24px 34px 72px;
}

/* ------------------------------------------------------------------ head */

#view-tools .tlsx-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

#view-tools .tlsx-lede {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 70ch;
}

#view-tools .tlsx-acts { display: flex; align-items: center; gap: 8px; flex: none; }

/* ----------------------------------------------------------------- cards */

#view-tools .tlsx-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 14px;
  max-width: 900px;
}

#view-tools .tlsx-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 12px;
}

#view-tools .tlsx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
#view-tools .tlsx-card-head h3 { margin: 0; }

#view-tools .tlsx-hint,
#view-tools .set-hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 12px;
  max-width: 70ch;
}

#view-tools .tlsx-status { margin-bottom: 14px; }

/* ------------------------------------------------------------------ rows */

#view-tools .tlsx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#view-tools .tlsx-row:last-child { margin-bottom: 0; }

#view-tools #tls-rec-session,
#view-tools .tlsx-row input {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  font-family: var(--font);
  font-size: 13.5px;
  padding: 8px 11px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
}
#view-tools .tlsx-row input::placeholder { color: var(--text-muted); }
#view-tools #tls-rec-session:focus,
#view-tools .tlsx-row input:focus { outline: none; border-color: var(--accent); }

#view-tools #tls-draft-json {
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 11px 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
  resize: vertical;
}
#view-tools #tls-draft-json:focus { outline: none; border-color: var(--accent); }

/* --------------------------------------------------------------- buttons */

#view-tools .tlsx-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  padding: 8px 14px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
}
#view-tools .tlsx-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}
#view-tools .tlsx-btn:disabled { opacity: .5; cursor: not-allowed; }

#view-tools .tlsx-btn-accent {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
#view-tools .tlsx-btn-accent:hover { filter: brightness(1.07); }
#view-tools .tlsx-btn-accent:disabled:hover { filter: none; }

#view-tools .tlsx-btn-quiet { padding: 6px 10px; font-size: 12.5px; }

#view-tools .tlsx-icon {
  font-size: 14px;
  line-height: 1;
  padding: 8px 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
#view-tools .tlsx-icon:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}

/* The recording indicator app.js injects into #tls-rec-start:
     start.innerHTML = '<span class="tls-dot"></span>Recording…' */
#view-tools .tls-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--danger);
  vertical-align: middle;
}

/* ------------------------------------------------- lists painted by app.js
   #tls-user, #tls-shipped, #tls-foundry and #tls-runs-rows are filled by
   tlsPaint / tlsShowRuns. Styled by position so a markup change inside
   app.js does not silently lose the look. */

#view-tools #tls-user > div:not(.bk-skels),
#view-tools #tls-shipped > div,
#view-tools #tls-foundry > div,
#view-tools #tls-runs-rows > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
}

#view-tools #tls-user button,
#view-tools #tls-shipped button,
#view-tools #tls-foundry button,
#view-tools #tls-runs-rows button {
  font-family: var(--font);
  font-size: 12.5px;
  padding: 5px 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
#view-tools #tls-user button:hover,
#view-tools #tls-shipped button:hover,
#view-tools #tls-foundry button:hover,
#view-tools #tls-runs-rows button:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}

/* ---- [TLSX2] loading placeholder: shaped like a tool row ---------------
   Same build as Sessions [SESX2]. .bk-skels brings the shimmer; its own gap
   and padding are dropped because each skeleton row carries the real row's
   10px / border-top. .bk-skel's 1px border would make a 10px bar read as an
   empty input, and its gradient fades to the card colour at both ends, so it
   is re-based: --surface-2 holds the shape, --border does the sweep. The
   shared animation is untouched. */
#view-tools .tlsx-skels {
  gap: 0;
  padding: 0;
}
#view-tools .tlsx-skels .bk-skel {
  border: 0;
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    var(--border) 45%,
    var(--surface-2) 90%);
  background-size: 200% 100%;
}
#view-tools .tlsx-skel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
#view-tools .tlsx-skel-row:first-child { border-top: 0; }
#view-tools .tlsx-skel-grow {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: 2px;
}
/* Heights track the type they stand in for: .t is 13.5px/600, .m is 12px;
   the blocks are the size of the row's 12.5px buttons. */
#view-tools .tlsx-skel-t { height: 13px; width: 34%; }
#view-tools .tlsx-skel-m { height: 10px; width: 58%; }
#view-tools .tlsx-skel-btn {
  flex: none;
  width: 52px;
  height: 27px;
  border-radius: var(--radius-btn);
}

/* ------------------------------------------- components app.js paints ----
   These class names are created in app.js at paint time, so they are part of
   this page whether or not they appear in tools.js:
     tlsRow()     -> div.brs-row > div.grow > (div.t + div.m), then buttons
     fdyPaint()   -> div.tls-row > (div.tls-row-head + div.tls-row-btns)
     tlsShowRuns()-> a span.brs-pill per run
   app.css styles every one of them at the desktop scale — `.brs-row .t` is
   `var(--f-sm)`, i.e. 18px, and `.brs-row .m` is 16px — and app.css may not
   be edited, so they are re-pointed HERE, scoped, and simply outranked.

   Specificity note: the generic `#tls-user > div` rules above score (2,0,1).
   Anything that has to beat them is written id-qualified, e.g.
   `#view-tools #tls-user .brs-row` = (2,1,0). Plain `#view-tools .brs-row`
   would score (1,1,0) and LOSE, which is the bug this comment exists to
   stop someone re-introducing. */

#view-tools #tls-user .brs-row,
#view-tools #tls-shipped .brs-row,
#view-tools #tls-runs-rows .brs-row {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  padding: 10px 0;
}
#view-tools #tls-user .brs-row:first-child,
#view-tools #tls-shipped .brs-row:first-child,
#view-tools #tls-runs-rows .brs-row:first-child { border-top: 0; }

#view-tools .brs-row .grow { flex: 1 1 auto; min-width: 0; }
#view-tools .brs-row .t {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
#view-tools .brs-row .m {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 70ch;
}

/* No `color` here on purpose: .brs-pill.connected / .dead carry it, and they
   already resolve through theme_b.css's --good / --bad. Declaring colour at
   this specificity would flatten the status distinction. */
#view-tools .brs-pill {
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 9px;
}

/* ---- authored API connectors (fdyPaint) ---- */
#view-tools #tls-foundry .tls-row { padding: 11px 0; }
#view-tools .tls-row-head { flex: 1 1 auto; min-width: 0; }
#view-tools .tls-row-head strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
#view-tools .tls-row-head .set-hint {
  display: block;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
#view-tools .fdy-badge {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  vertical-align: 1px;
}
#view-tools .tls-row-btns { display: flex; align-items: center; gap: 8px; flex: none; }

/* Approve is the user's explicit ratification act (fdyPaint's comment says
   so); it must stay the primary affordance. The generic list-button rule
   above would otherwise flatten it to a quiet secondary. */
#view-tools #tls-foundry button.btn-accent,
#view-tools #tls-user button.btn-accent {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
#view-tools #tls-foundry button.btn-accent:hover,
#view-tools #tls-user button.btn-accent:hover {
  color: var(--white);
  background: var(--accent);
  filter: brightness(1.07);
}

#view-tools .tls-params { font-size: 12px; color: var(--text-muted); }

/* ---- [hidden] must always win --------------------------------------------
   app.js toggles `.hidden` on #tls-draft, #tls-runs, #tls-status and
   #tls-draft-notes. Any rule in this sheet that sets `display` outranks the
   UA's `[hidden] { display: none }` and the element stays visible — the
   defect falsifiers/f_t3.py's "t11 hidden wins over display:flex" exists to
   catch. Nothing here matches a hidden element today (checked); these two
   lines keep that true if someone adds a display rule later.
   The second selector is not redundant: `.tls-row-head .set-hint` scores
   (1,2,0) and would beat a bare `#view-tools [hidden]` at (1,1,0). */
#view-tools [hidden] { display: none; }
#view-tools .tls-row-head .set-hint[hidden] { display: none; }

/* ------------------------------------------------------------ narrow view */

@media (max-width: 760px) {
  #view-tools .tlsx-page { padding: 18px 14px 56px; }
  #view-tools .tlsx-head { flex-direction: column; gap: 12px; }
}