/* =========================================================================
   tool.css — structural layer for the gated console (tool.html).

   Loaded after base.css and theme.css, it only uses the shared design-token
   contract, so every brand's palette, typography, radii and shadows carry
   straight through. Per-brand flourishes live at the bottom of each
   theme.css.
   ========================================================================= */

.bx-tool-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Console top bar ---------------------------------------------------- */
.bx-toolbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.bx-toolbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.bx-toolbar__brand { display: inline-flex; align-items: center; gap: 12px; }
.bx-toolbar__names { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bx-toolbar__brandname { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 20px; }
.bx-toolbar__suffix {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary); padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.bx-toolbar__right { display: flex; align-items: center; gap: 12px; }
.bx-toolbar__status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: 13px; font-weight: var(--fw-strong); color: var(--color-muted);
  white-space: nowrap;
}
.bx-toolbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-muted); }
.bx-toolbar__status.is-locked .bx-toolbar__dot { background: var(--color-muted); }
.bx-toolbar__status.is-connecting { color: var(--color-primary); }
.bx-toolbar__status.is-connecting .bx-toolbar__dot { background: var(--color-primary); animation: bx-tool-pulse 1.1s ease-in-out infinite; }
.bx-toolbar__status.is-connected { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); }
.bx-toolbar__status.is-connected .bx-toolbar__dot { background: var(--color-success); box-shadow: 0 0 10px var(--color-success); }
@keyframes bx-tool-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---- Page frame --------------------------------------------------------- */
.bx-tool { flex: 1; padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px); }
.bx-tool__head { max-width: 680px; }
.bx-tool__eyebrow {
  display: inline-block; font-size: 13px; font-weight: var(--fw-strong);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary);
}
.bx-tool__title { margin-top: 14px; font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.02em; }
.bx-tool__sub { margin-top: 14px; color: var(--color-muted); font-size: clamp(15px, 2vw, 18px); }
.bx-tool__preview {
  margin-top: 26px; padding: 12px 18px; border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary); font-size: 14px; font-weight: var(--fw-strong);
}
.bx-tool__note { margin-top: 22px; color: var(--color-muted); font-size: 14px; max-width: 720px; }

/* ---- Shell: console + gate --------------------------------------------- */
/* Console and gate share one grid cell, so the shell is always as tall as the
   taller of the two and nothing below it is overlapped. */
.bx-tool__shell { position: relative; display: grid; margin-top: clamp(28px, 4vw, 44px); }
.bx-tool__console {
  grid-area: 1 / 1;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow); overflow: hidden;
  transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
}
.bx-tool__shell.is-locked .bx-tool__console { filter: blur(7px) saturate(0.6); opacity: 0.5; pointer-events: none; user-select: none; }

.bx-tool__gate { grid-area: 1 / 1; display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); z-index: 2; }
.bx-tool__shell:not(.is-locked) .bx-tool__gate { display: none; }
.bx-tool__gatecard {
  width: 100%; max-width: 560px; padding: clamp(26px, 4vw, 42px);
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px); box-shadow: var(--shadow); text-align: center;
}
.bx-tool__gatebadge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary); font-size: 12px; font-weight: var(--fw-strong);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.bx-tool__gatetitle { margin-top: 18px; font-size: clamp(24px, 3.4vw, 34px); }
.bx-tool__gatebody { margin-top: 12px; color: var(--color-muted); font-size: 15px; }
.bx-tool__gatesteps { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; text-align: left; }
.bx-tool__gatestep { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; color: var(--color-muted); }
.bx-tool__gatestep strong { display: block; color: var(--color-text); font-size: 15px; }
.bx-tool__gatenum {
  flex: 0 0 auto; display: inline-flex; width: 30px; height: 30px;
  align-items: center; justify-content: center; border-radius: 50%;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: 14px;
  color: var(--color-primary-contrast);
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
}
.bx-tool__gatecta { margin-top: 28px; width: 100%; }
.bx-tool__gatehelp { margin-top: 16px; color: var(--color-muted); font-size: 13px; }
.bx-tool__gateerror, .bx-tool__error {
  margin-top: 14px; padding: 11px 15px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, #ef4444 45%, var(--color-border));
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: color-mix(in srgb, #ef4444 70%, var(--color-text)); font-size: 14px;
}

/* ---- Tabs --------------------------------------------------------------- */
.bx-tool__tabs {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 14px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 45%, transparent);
}
.bx-tool__tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  border: 1px solid transparent; color: var(--color-muted);
  font-size: 14px; font-weight: var(--fw-strong);
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.bx-tool__tab:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.bx-tool__tab.is-active {
  color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  transform: translateY(-1px);
}
.bx-tool__tabicon { font-size: 15px; }

/* ---- Panels ------------------------------------------------------------- */
.bx-tool__panels { padding: clamp(20px, 3vw, 34px); }
.bx-tool__panel[hidden] { display: none; }
.bx-tool__panelhead { max-width: 620px; }
.bx-tool__paneltitle { font-size: clamp(20px, 2.6vw, 26px); }
.bx-tool__panelbody { margin-top: 10px; color: var(--color-muted); font-size: 15px; }

.bx-tool__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 24px; }
.bx-tool__metric {
  display: flex; flex-direction: column; gap: 7px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 40%, transparent);
}
.bx-tool__metrickey { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.bx-tool__metricval { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 20px; }

.bx-tool__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.bx-tool__card {
  padding: 22px; border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 40%, transparent);
}
.bx-tool__panelhead + .bx-tool__label { margin-top: 26px; }
.bx-tool__label { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 10px; }
.bx-tool__field { display: flex; gap: 12px; }
.bx-tool__input {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-text); font-family: var(--font-body); font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bx-tool__input::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); }
.bx-tool__input:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.bx-tool__block { width: 100%; margin-top: 14px; }
.bx-tool__toggle { width: 100%; }
.bx-tool__toggle.is-on { background: var(--color-primary); color: var(--color-primary-contrast); border-color: transparent; }
.bx-tool__status { margin-top: 14px; color: var(--color-muted); font-size: 14px; }
.bx-tool__alloc { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border); }

.bx-tool__log { display: flex; flex-direction: column; gap: 10px; max-height: 240px; overflow-y: auto; }
.bx-tool__log li { display: flex; gap: 10px; font-size: 14px; color: var(--color-text); }
.bx-tool__logtime { color: var(--color-muted); font-family: var(--font-mono); font-size: 13px; flex: 0 0 auto; }
.bx-tool__logempty { color: var(--color-muted); font-size: 14px; }

.bx-tool__rows { display: flex; flex-direction: column; }
.bx-tool__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--color-border); }
.bx-tool__row:last-child { border-bottom: 0; }
.bx-tool__rowkey { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.bx-tool__rowval { font-weight: var(--fw-strong); font-size: 15px; text-align: right; word-break: break-all; }
.bx-tool__mono { font-family: var(--font-mono); font-size: 14px; }
.bx-tool__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---- Rug-check result --------------------------------------------------- */
.bx-tool__result { margin-top: 22px; display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.bx-tool__verdict {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 20px; border-radius: var(--radius-sm); width: 100%;
  font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 16px;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}
.bx-tool__verdict--safe { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 45%, transparent); }
.bx-tool__verdict--risk { color: #f87171; background: color-mix(in srgb, #ef4444 14%, transparent); border: 1px solid color-mix(in srgb, #ef4444 45%, transparent); }
.bx-tool__checks { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.bx-tool__check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text); }
.bx-tool__checkmark { flex: 0 0 auto; font-weight: 700; color: var(--color-success); }
.bx-tool__check.is-risk .bx-tool__checkmark { color: #f87171; }
.bx-tool__loading { margin-top: 20px; color: var(--color-muted); font-size: 14px; }

/* ---- Empty (coming soon) states ---------------------------------------- */
.bx-tool__empty { text-align: center; max-width: 460px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0; }
.bx-tool__emptyicon {
  display: inline-flex; width: 60px; height: 60px; align-items: center; justify-content: center;
  font-size: 28px; border-radius: var(--radius); margin-bottom: 18px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.bx-tool__soon {
  display: inline-block; margin-top: 20px; padding: 7px 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  color: var(--color-primary); font-size: 12px; font-weight: var(--fw-strong);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---- Footer ------------------------------------------------------------- */
.bx-toolfoot { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.bx-toolfoot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 22px; font-size: 13px; color: var(--color-muted); }
.bx-toolfoot__link { color: var(--color-primary); font-weight: var(--fw-strong); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
  .bx-toolbar__back { display: none; }
  .bx-toolbar__suffix { display: none; }
  /* Tabs become a single swipeable strip rather than a tall stack. */
  .bx-tool__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bx-tool__tabs::-webkit-scrollbar { display: none; }
  .bx-tool__tab { flex: 0 0 auto; }
  .bx-tool__tab span:not(.bx-tool__tabicon) { font-size: 13px; }
  .bx-tool__result { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-toolbar__status.is-connecting .bx-toolbar__dot { animation: none; }
}