/* =========================================================
   WESNIEBLAS WHITE TOOL CONTRACT
   Synced to the current tool template.
   All rules are scoped to .wn-tool so they do not alter the site shell.
   ========================================================= */

.wn-tool {
  --tool-bg: var(--site-tool-bg, var(--site-bg, #f7f9fc));
  --tool-surface: var(--site-tool-surface, var(--site-surface, #fff));
  --tool-raised: var(--site-tool-surface-raised, var(--site-surface-raised, #f3f6fa));
  --tool-control: var(--site-tool-control, #fff);
  --tool-text: var(--site-tool-text, var(--site-text, #172238));
  --tool-muted: var(--site-tool-muted, var(--site-muted, #66758d));
  --tool-line: var(--site-tool-line, var(--site-line, #dce3ec));
  --tool-line-strong: var(--site-tool-line-strong, var(--site-line-strong, #bfcada));
  --tool-accent: var(--site-tool-accent, var(--site-accent, #655cff));
  --tool-accent-hover: var(--site-tool-accent-hover, var(--site-accent-hover, #397fd5));
  --tool-accent-ink: var(--site-tool-accent-ink, #fff);
  --tool-accent-soft: var(--site-tool-accent-soft, rgba(101,92,255,.1));
  --tool-shadow: var(--site-tool-shadow, 0 18px 46px rgba(29,48,77,.09));
  --tool-shadow-soft: var(--site-tool-shadow-soft, 0 5px 15px rgba(31,48,73,.07));
  --tool-page-gutter: clamp(16px,4vw,48px);

  min-height: 60vh;
  background: var(--tool-bg);
  color: var(--tool-text);
  color-scheme: light;
  font-family: var(--site-tool-font, var(--site-font, Inter, system-ui, sans-serif));
}

.wn-tool,
.wn-tool * { box-sizing: border-box; }

.wn-tool button,
.wn-tool input,
.wn-tool select,
.wn-tool textarea { font: inherit; }

.wn-tool img,
.wn-tool svg { max-width: 100%; }

/* Permanent page gutter from the current tool template. */
.wn-tool > main {
  width: 100%;
  padding-inline: var(--tool-page-gutter);
}

.wn-tool-container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

/* Intro */
.wn-tool-intro {
  padding: clamp(40px,6vw,68px) 0 clamp(26px,4vw,40px);
}

.wn-tool-eyebrow,
.wn-tool-kicker {
  margin: 0 0 9px;
  color: var(--tool-accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wn-tool-intro h1 {
  max-width: 850px;
  margin: 0;
  color: var(--tool-text);
  font-size: clamp(2.25rem,5vw,4rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.wn-tool-lead {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--tool-muted);
  font-size: clamp(1rem,1.5vw,1.14rem);
  line-height: 1.65;
}

.wn-tool-workspace {
  padding: 0 0 clamp(64px,9vw,110px);
}

/* Tabs */
.wn-tool-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 18px;
  padding: 5px;
  border: 1px solid var(--tool-line);
  border-radius: 14px;
  background: var(--tool-raised);
}

.wn-tool-tab {
  min-height: 42px;
  padding: 9px 17px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tool-muted);
  font-weight: 700;
  cursor: pointer;
}

.wn-tool-tab:hover { color: var(--tool-text); }

.wn-tool-tab.is-active,
.wn-tool-tab[aria-selected="true"] {
  background: var(--tool-surface);
  color: var(--tool-text);
  box-shadow: var(--tool-shadow-soft);
}

/* Panels / cards */
.wn-tool-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}

.wn-tool-stack {
  display: grid;
  gap: 18px;
}

.wn-tool-panel,
.wn-tool-card {
  min-width: 0;
  border: 1px solid var(--tool-line);
  border-radius: 20px;
  background: var(--tool-surface);
  color: var(--tool-text);
  box-shadow: var(--tool-shadow);
}

.wn-tool-panel { padding: clamp(20px,3vw,30px); }
.wn-tool-card { padding: 20px; }
.wn-tool-panel--wide { grid-column: 1 / -1; }

.wn-tool-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.wn-tool-panel h2,
.wn-tool-card h2 {
  margin: 0;
  color: var(--tool-text);
  font-size: clamp(1.2rem,2vw,1.55rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.wn-tool-panel h3,
.wn-tool-card h3 {
  margin: 0;
  color: var(--tool-text);
  font-size: 1.05rem;
}

.wn-tool-muted { color: var(--tool-muted); }

/* Fields */
.wn-tool-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.wn-tool-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.wn-tool-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wn-tool-label {
  color: var(--tool-text);
  font-size: .88rem;
  font-weight: 750;
}

.wn-tool-help-text {
  margin: 0;
  color: var(--tool-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.wn-tool-control,
.wn-tool input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.wn-tool select,
.wn-tool textarea {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--tool-line-strong);
  border-radius: 11px;
  outline: 0;
  background: var(--tool-control);
  color: var(--tool-text);
}

.wn-tool textarea {
  min-height: 110px;
  resize: vertical;
}

.wn-tool input::placeholder,
.wn-tool textarea::placeholder {
  color: var(--tool-muted);
  opacity: .75;
}

.wn-tool-control:focus,
.wn-tool input:focus,
.wn-tool select:focus,
.wn-tool textarea:focus {
  border-color: var(--tool-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--tool-accent) 17%,transparent);
}

/* Buttons */
.wn-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.wn-tool-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--tool-line-strong);
  border-radius: 11px;
  background: var(--tool-raised);
  color: var(--tool-text);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.wn-tool-button:hover {
  border-color: var(--tool-accent);
  background: var(--tool-accent-soft);
}

.wn-tool-button.is-primary {
  border-color: var(--tool-accent);
  background: var(--tool-accent);
  color: var(--tool-accent-ink);
}

.wn-tool-button.is-primary:hover {
  border-color: var(--tool-accent-hover);
  background: var(--tool-accent-hover);
}

.wn-tool-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Chips / results / notices */
.wn-tool-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  background: var(--tool-raised);
  color: var(--tool-muted);
  font-size: .74rem;
  font-weight: 700;
}

.wn-tool-result {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--tool-line);
  border-radius: 14px;
  background: var(--tool-raised);
  color: var(--tool-text);
}

.wn-tool-result strong {
  display: block;
  margin-bottom: 4px;
  color: var(--tool-text);
  font-size: clamp(1.25rem,2.5vw,1.75rem);
}

.wn-tool-result span {
  color: var(--tool-muted);
  line-height: 1.5;
}

.wn-tool-notice {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--tool-line);
  border-left: 4px solid var(--tool-accent);
  border-radius: 12px;
  background: var(--tool-accent-soft);
  color: var(--tool-muted);
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width:760px) {
  .wn-tool-grid,
  .wn-tool-fields {
    grid-template-columns: 1fr;
  }

  .wn-tool-panel--wide {
    grid-column: auto;
  }

  .wn-tool-tabs {
    display: flex;
    width: 100%;
  }

  .wn-tool-tab {
    flex: 1 1 auto;
    padding-inline: 10px;
  }

  .wn-tool-panel-header {
    align-items: center;
  }
}

@media print {
  .wn-tool {
    --tool-bg: #fff;
    --tool-surface: #fff;
    --tool-raised: #f5f6f8;
    --tool-control: #fff;
    --tool-text: #111827;
    --tool-muted: #526078;
    --tool-line: #d8dee7;
    --tool-line-strong: #adb7c5;
    background: #fff;
    color: #111827;
  }

  .wn-tool-actions {
    display: none;
  }

  .wn-tool-panel,
  .wn-tool-card {
    box-shadow: none;
    break-inside: avoid;
  }
}


/* Timecode Lab — page-specific styles only.
   The shared site/tool CSS provides the white interface contract. */

.tc-lab {
  --tc-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tc-view[hidden] { display: none !important; }
.tc-view.is-active { display: block; }

.tc-display {
  display: flex;
  min-height: 132px;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--tool-line);
  border-radius: 16px;
  background: var(--tool-raised);
  color: var(--tool-text);
  font-family: var(--tc-mono);
  font-size: clamp(2.45rem, 7vw, 5.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.065em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.tc-display-reader { font-size: clamp(2.45rem, 8vw, 5.8rem); }
.tc-display-small { min-height: 118px; font-size: clamp(2.1rem, 6vw, 4.25rem); }
.tc-mono-input { font-family: var(--tc-mono) !important; font-variant-numeric: tabular-nums; }

.tc-scope {
  display: block;
  width: 100%;
  height: 220px;
  border: 1px solid var(--tool-line);
  border-radius: 14px;
  background: var(--tool-raised);
}

.tc-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}

.tc-stat-grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }

.tc-stat {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--tool-line);
  border-radius: 12px;
  background: var(--tool-raised);
}

.tc-stat span {
  display: block;
  margin-bottom: 5px;
  color: var(--tool-muted);
  font-size: .69rem;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.tc-stat strong {
  display: block;
  overflow: hidden;
  color: var(--tool-text);
  font-family: var(--tc-mono);
  font-size: .96rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-lock-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: -8px 0 19px;
  color: var(--tool-muted);
  font-size: .82rem;
  letter-spacing: .08em;
}

.tc-lock-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--tool-line-strong);
}

.tc-lock-dot.is-locked {
  background: #23854d;
  box-shadow: 0 0 0 4px rgba(35,133,77,.12);
}

.tc-meter {
  height: 14px;
  overflow: hidden;
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  background: var(--tool-raised);
}

.tc-meter > div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--tool-accent);
  transition: width .08s linear;
}

.tc-meter-labels {
  display: flex;
  justify-content: space-between;
  margin: 5px 2px 18px;
  color: var(--tool-muted);
  font-size: .61rem;
}

.tc-progress-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.tc-progress {
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  background: var(--tool-raised);
}

.tc-progress > div {
  width: 0;
  height: 100%;
  background: var(--tool-accent);
}

.tc-progress-wrap span { color: var(--tool-muted); font-size: .78rem; }
.tc-clip-summary { margin-top: 0; }

.tc-lab input[type="range"] {
  width: 100%;
  min-height: 34px;
  accent-color: var(--tool-accent);
}

.tc-reader-panel.tc-fullscreen,
#tc-view-generator .wn-tool-panel.tc-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding: clamp(18px,4vw,54px);
  border: 0;
  border-radius: 0;
  background: var(--tool-surface);
}

.tc-fullscreen .tc-display {
  min-height: 0;
  font-size: min(17vw, 13rem);
}

.tc-fullscreen .wn-tool-fields,
.tc-fullscreen .wn-tool-notice { display: none; }

@media (max-width:760px) {
  .tc-display { min-height: 105px; padding-inline: 8px; }
  .tc-stat-grid { grid-template-columns: 1fr 1fr; }
  .tc-tabs .wn-tool-tab { flex-basis: calc(50% - 4px); }
}

@media (max-width:440px) {
  .tc-display { font-size: clamp(2rem, 12vw, 3.3rem); }
  .tc-display-reader { font-size: clamp(2rem, 12vw, 3.5rem); }
  .tc-stat-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   v0.4 — stronger mode selector + independent pop-out windows
   ========================================================= */

.tc-tabs {
  gap: 6px;
  padding: 6px;
  border-color: var(--tool-line-strong);
  background: color-mix(in srgb, var(--tool-raised) 88%, var(--tool-accent) 12%);
  box-shadow: 0 7px 20px rgba(31,48,73,.06), inset 0 0 0 1px rgba(255,255,255,.42);
}

.tc-tabs .wn-tool-tab {
  min-height: 44px;
  padding-inline: 19px;
  color: color-mix(in srgb, var(--tool-muted) 86%, var(--tool-text) 14%);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tc-tabs .wn-tool-tab:hover {
  background: color-mix(in srgb, var(--tool-surface) 68%, transparent);
  color: var(--tool-text);
}

.tc-tabs .wn-tool-tab.is-active,
.tc-tabs .wn-tool-tab[aria-selected="true"] {
  background: var(--tool-surface);
  color: var(--tool-accent);
  box-shadow: 0 5px 14px rgba(31,48,73,.12), inset 0 0 0 1px color-mix(in srgb,var(--tool-accent) 15%,transparent);
}

.tc-panel-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tc-popout-button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  background: var(--tool-surface);
  color: var(--tool-muted);
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}

.tc-popout-button:hover {
  border-color: var(--tool-accent);
  background: var(--tool-accent-soft);
  color: var(--tool-accent);
}

.tc-popout-button span:first-child {
  font-size: .9rem;
  line-height: 1;
}

@media (max-width:520px) {
  .tc-popout-button span:last-child { display: none; }
  .tc-popout-button { width: 32px; padding-inline: 0; }
}

/* The pop-out document receives these classes itself. */
body.tc-popout-page {
  margin: 0;
  background: #f7f9fc;
  color: #172238;
  font-family: Inter, system-ui, sans-serif;
}

.tc-popout-shell {
  min-height: 100vh;
  padding: clamp(18px,4vw,36px);
  background: #f7f9fc;
}

.tc-popout-card {
  width: 100%;
  min-height: calc(100vh - clamp(36px,8vw,72px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #dce3ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(29,48,77,.09);
  padding: clamp(20px,4vw,38px);
}

.tc-popout-title {
  margin: 0 0 8px;
  color: #66758d;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tc-popout-time {
  margin: 10px 0 18px;
  padding: clamp(18px,4vw,32px) 8px;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: 16px;
  background: #f3f6fa;
  color: #172238;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: clamp(3rem,15vw,10rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.065em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.tc-popout-subline {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  color: #66758d;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.tc-popout-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bfcada;
}

.tc-popout-dot.locked {
  background: #23854d;
  box-shadow: 0 0 0 4px rgba(35,133,77,.12);
}

.tc-popout-scope {
  display: block;
  width: 100%;
  height: min(42vh,320px);
  border: 1px solid #dce3ec;
  border-radius: 14px;
  background: #f3f6fa;
}

.tc-popout-meter {
  height: 15px;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: 999px;
  background: #f3f6fa;
}

.tc-popout-meter > div {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #655cff;
}

.tc-popout-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}

.tc-popout-stat {
  padding: 13px 14px;
  border: 1px solid #dce3ec;
  border-radius: 12px;
  background: #f3f6fa;
}

.tc-popout-stat span {
  display: block;
  margin-bottom: 5px;
  color: #66758d;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.tc-popout-stat strong {
  display: block;
  color: #172238;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: .96rem;
}

@media(max-width:560px){
  .tc-popout-stats { grid-template-columns: 1fr; }
}


/* =========================================================
   v0.5 — responsive timecode fitting + true fullscreen
   ========================================================= */

/*
 * The timecode display lives inside a two-column panel on many tablets.
 * Size it from the PANEL width, not the whole viewport, so the complete
 * HH:MM:SS:FF string always fits.
 */
.tc-lab .wn-tool-panel {
  container-type: inline-size;
}

.tc-display {
  /* Fallback for browsers without container query units. */
  font-size: clamp(2rem, 5vw, 5.2rem);
}

.tc-display-reader {
  font-size: clamp(2rem, 5.4vw, 5.8rem);
}

@supports (font-size: 1cqw) {
  .tc-display {
    font-size: clamp(2rem, 11cqw, 5.2rem);
  }

  .tc-display-reader {
    font-size: clamp(2rem, 11cqw, 5.8rem);
  }

  .tc-display-small {
    font-size: clamp(1.9rem, 10cqw, 4.25rem);
  }
}

/* A little extra breathing room around the digits on narrow panels. */
@media (min-width: 761px) and (max-width: 1100px) {
  .tc-display,
  .tc-display-reader {
    padding-inline: 10px;
    letter-spacing: -.075em;
  }
}

/*
 * Native Fullscreen API is preferred. These rules style both true fullscreen
 * and the CSS fallback used by browsers that do not expose requestFullscreen.
 */
.tc-reader-panel:fullscreen,
#tc-view-generator .wn-tool-panel:fullscreen,
.tc-reader-panel.tc-fullscreen,
#tc-view-generator .wn-tool-panel.tc-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px,4vw,54px);
  border: 0;
  border-radius: 0;
  background: var(--tool-surface);
  box-shadow: none;
}

.tc-reader-panel:fullscreen .tc-display,
#tc-view-generator .wn-tool-panel:fullscreen .tc-display,
.tc-fullscreen .tc-display {
  min-height: 0;
  font-size: clamp(3rem, 14vw, 12rem);
}

/* In fullscreen, prioritize the counter/reader and operating buttons. */
.tc-reader-panel:fullscreen .wn-tool-fields,
.tc-reader-panel:fullscreen .wn-tool-notice,
#tc-view-generator .wn-tool-panel:fullscreen .wn-tool-fields,
#tc-view-generator .wn-tool-panel:fullscreen .wn-tool-notice,
.tc-fullscreen .wn-tool-fields,
.tc-fullscreen .wn-tool-notice {
  display: none;
}

/* Suppress the site shell during the CSS fallback fullscreen mode. */
body.tc-tool-fullscreen > header,
body.tc-tool-fullscreen > footer,
body.tc-tool-fullscreen .site-header,
body.tc-tool-fullscreen .site-footer,
body.tc-tool-fullscreen .site-cookie-banner,
body.tc-tool-fullscreen .cookie-banner {
  display: none !important;
}

/* Keep the fallback panel above any fixed shell/logo elements. */
body.tc-tool-fullscreen .tc-fullscreen {
  isolation: isolate;
  z-index: 2147483647 !important;
}
/* Shared stop remains available from every main view. */
.tc-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.tc-topbar .tc-tabs{margin-bottom:0;min-width:0;max-width:100%}
.tc-stop-all{margin-left:auto;flex-shrink:0;min-height:44px;border:1px solid #d89ba1!important;color:#b12e3b!important;background:#fff6f7!important;font-weight:750}
.tc-stop-all:hover{background:#ffe8eb!important;border-color:#b12e3b!important}
.tc-stop-all:focus-visible{outline:3px solid #b12e3b;outline-offset:3px}
.tc-stop-message{font-size:13px;color:var(--tool-muted);margin:0 0 16px}
.tc-stop-message:empty{display:none}
@media(max-width:600px){.tc-topbar{gap:10px}.tc-topbar .tc-tabs{width:100%}}

.tc-lab [hidden]{display:none!important}
/* Keep help text from stretching the control tracks in adjacent grid fields. */
.tc-lab .wn-tool-field{grid-template-rows:auto 44px auto;align-content:start;align-items:start;gap:7px}
.tc-lab .wn-tool-field>.wn-tool-label{min-height:19px;line-height:1.35;align-self:start}
.wn-tool.tc-lab .wn-tool-fields .wn-tool-field>.wn-tool-control,.wn-tool.tc-lab .wn-tool-fields .wn-tool-field>input:not([type="range"]){height:44px;min-height:44px;padding:9px 12px;align-self:start;box-sizing:border-box}
.wn-tool.tc-lab .wn-tool-fields .wn-tool-field>input[type="range"]{height:44px;min-height:44px;padding:0;align-self:start;box-sizing:border-box}
.tc-lab .wn-tool-help-text{align-self:start}
/* Context help: compact buttons, readable modal, keyboard/touch access. */
.tc-lab .tc-help-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:22px;height:22px;min-width:22px;padding:0;border:1px solid #bfcada;border-radius:50%;background:#fff;color:#405ac7;font:700 13px/1 system-ui;cursor:pointer;letter-spacing:normal;text-transform:none}
.tc-lab .tc-help-button:hover{background:#edf0ff;border-color:#655cff}
.tc-lab .tc-help-button:focus-visible{outline:3px solid #655cff;outline-offset:3px}
.tc-lab .tc-help-action{display:inline-flex;align-items:center;gap:6px}
.tc-lab .tc-help-caption{display:flex;align-items:center;gap:8px;color:#64748b;font-size:12px;margin:8px 0}
.tc-lab .tc-help-dialog{box-sizing:border-box;width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid #bfcada;border-radius:16px;background:#fff;color:#172139;box-shadow:0 18px 60px #17213940}
.tc-help-dialog::backdrop{background:#17213970}
.tc-lab .tc-help-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}
.tc-lab .tc-help-heading h2{font-size:20px;line-height:1.35;margin:0}
.tc-lab .tc-help-dialog p{font-size:16px;line-height:1.65;margin:18px 0 0}
.tc-lab .tc-help-heading button{flex-shrink:0}
.tc-lab .wn-tool-label{min-height:22px}
.tc-lab .tc-help-label{display:flex;align-items:center;gap:6px}.tc-lab .tc-help-label label{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}