/* Buttons: pills. One saturated primary; everything else outlined or ghost.
   Hover darkens one step and lifts 1px; press scales to 98.5% and drops the
   shadow. Opacity is never the hover mechanism. Heights come from padding
   (40px md, 34px sm, 50px lg) so the compact studio toolbars can still tighten
   a button without fighting a min-height. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--transition-control);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.btn:active {
  transform: var(--press-scale);
}

/* Disabled: pdf-editor.js disables Compress/Protect while they work.
   pointer-events:none is what actually suppresses :hover. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--action-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-brand), var(--inset-top);
}

.btn-primary:hover {
  background: var(--action-primary-hover);
  color: var(--text-inverse);
  transform: var(--lift-hover);
}

.btn-primary:active {
  background: var(--action-primary-press);
  box-shadow: var(--shadow-xs);
  transform: var(--press-scale);
}

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--action-ghost-hover);
  color: var(--text-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--text-strong);
}

.btn-ghost:hover {
  background: var(--action-ghost-hover);
  color: var(--text-strong);
}

.btn-neutral {
  background: var(--action-neutral);
  color: var(--action-neutral-text);
  box-shadow: var(--shadow-sm), var(--inset-top);
}

.btn-neutral:hover {
  background: var(--action-neutral-hover);
  color: var(--action-neutral-text);
}

.btn-accent {
  background: var(--amber-500);
  color: var(--ink-950);
  box-shadow: var(--shadow-sm), var(--inset-top);
}

.btn-accent:hover {
  background: var(--amber-400);
  color: var(--ink-950);
}

.btn-outline {
  background: transparent;
  color: var(--text-link);
  border-color: var(--border-brand);
}

.btn-outline:hover {
  background: var(--surface-brand-soft);
  color: var(--text-link-hover);
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: var(--text-md);
}

.btn-sm {
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
}

.btn-icon {
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

/* Cards: white, 14px radius, hairline border AND soft shadow, never one alone.
   Never a coloured left border. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

a.card:hover,
.card:has(a:hover) {
  box-shadow: var(--shadow-lifted);
}

a.card:hover {
  transform: var(--lift-hover);
  text-decoration: none;
}

.card-body {
  padding: var(--card-pad);
}

.card-header {
  padding: var(--space-4) var(--card-pad);
  border-bottom: 1px solid var(--border-hairline);
  font-weight: var(--weight-semibold);
}

.card-footer {
  padding: var(--space-4) var(--card-pad);
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-band);
}

.tool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text-body);
}

.tool-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
}

/* Emoji tiles are retired: Forge carries meaning with type, not pictograms. */
.tool-card-icon {
  display: none;
}

.tool-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.tool-card-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.tool-card-group {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}

.tool-card-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  flex: 1;
}

/* Calculator surface. The wrapper itself is transparent: the inputs panel
   and each result sit on the page as their own cards, the way the design's
   tool page lays them out. */
.calculator-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.calc-eyebrow {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.calculator-form .form-group {
  margin-bottom: 1.375rem;
}

.calculator-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-strong);
}

.calculator-form input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.calculator-form select,
.calculator-form textarea {
  width: 100%;
  min-height: var(--control-h-md);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-field);
  background-color: var(--surface-card);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-control);
}

.calculator-form input[type="number"],
.calculator-form .number-input {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Native select with a chevron drawn from two gradients, so it follows the
   text token in both themes without an image. */
.calculator-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.calculator-form textarea {
  padding: 0.75rem 0.875rem;
}

.calculator-form input:not([type="range"]):hover,
.calculator-form select:hover,
.calculator-form textarea:hover {
  border-color: var(--border-brand);
}

.calculator-form input:not([type="range"]):focus,
.calculator-form select:focus,
.calculator-form textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--ring-focus);
}

.calculator-result {
  margin-top: var(--space-6);
  padding: var(--card-pad);
  background: var(--surface-band);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}

.calculator-result-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.calculator-result-value {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  min-width: 0;
  /* Last resort so a value can never paint outside its tile. The size steps
     below should mean it is rarely reached. */
  overflow-wrap: anywhere;
}

/* A tile is about half the results column, so a long figure has to give up
   type size or it overflows. calculator-engine.js picks the step from the
   formatted string's length; the primary tile spans the full width and gets
   its own, larger scale further down. */
.calculator-result-value.is-fit-1 { font-size: var(--text-lg); }
.calculator-result-value.is-fit-2 { font-size: var(--text-md); }
.calculator-result-value.is-fit-3 { font-size: var(--text-base); }
.calculator-result-value.is-fit-4 { font-size: var(--text-sm); }

/* Field label row: label left, unit or live value right in mono. */
.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
  gap: var(--space-3);
}

.field-label-row label {
  margin-bottom: 0;
}

.field-value-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: none;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

.slider-wrap {
  position: relative;
  margin: 0.625rem 0 0.25rem;
  height: 22px;
  display: flex;
  align-items: center;
  /* Keep range thumb from clipping at min/max */
  padding: 0 9px;
  box-sizing: border-box;
  overflow: visible;
}

.slider-track {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ink-200);
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

[data-theme="dark"] .slider-track {
  background: var(--ink-700);
}

.slider-fill {
  height: 100%;
  width: 50%;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
}

.value-slider,
.calculator-form input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent !important;
  outline: none;
  cursor: pointer;
  box-shadow: none;
  display: block;
  accent-color: var(--action-primary);
}

.calculator-form input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 6px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.calculator-form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--action-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}

.calculator-form input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.1);
}

.calculator-form input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--ring-focus);
}

.calculator-form input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
}

.calculator-form input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.calculator-form input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--action-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* Side-by-side calculator layout: an inputs panel ("Your numbers") on the
   left, the results column on the right. Neither side is sticky; a form
   taller than the viewport would otherwise hide its own last fields. */
.calc-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.calc-split {
  display: grid;
  grid-template-columns: minmax(260px, 22rem) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  width: 100%;
}

.calc-left,
.calc-right {
  min-width: 0;
}

.calc-left {
  padding: var(--card-pad);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.calc-inputs {
  width: 100%;
  max-width: 100%;
}

.calc-left .form-group,
.calc-left .calc-actions {
  max-width: 100%;
}

.calc-left input:not([type="range"]),
.calc-left select,
.calc-left textarea {
  max-width: 100%;
}

.calc-full,
.schedule-slot {
  width: 100%;
  min-width: 0;
}

.schedule-slot.has-schedule {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.schedule-slot .schedule-wrap {
  border-top: none;
  padding: var(--card-pad);
}

.calc-right .rich-result,
.calc-right .calculator-result {
  margin-top: 0;
  min-height: 0;
}

.calc-right .result-placeholder {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-band);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
}

.result-placeholder strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.calculator-result.is-loading .result-loading strong {
  color: var(--text-link);
}

.calculator-result.is-loading .result-loading::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto 0.85rem;
  border: 3px solid var(--border-hairline);
  border-top-color: var(--action-primary);
  border-radius: 50%;
  animation: yt-spin 0.8s linear infinite;
}

@keyframes yt-spin {
  to { transform: rotate(360deg); }
}

.calc-right .result-body {
  grid-template-columns: minmax(0, 1fr);
}

.calc-right .result-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .calc-split {
    grid-template-columns: 1fr;
  }
}

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
}

.calc-actions .btn-lg {
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
}

/* A form that recalculates on every keystroke needs no Calculate button;
   Reset stays. Studio layouts keep theirs (their button names an action). */
.calc-layout.is-live:not([class*="calc-layout-"]) .calc-actions [type="submit"] {
  display: none;
}

.result-live-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.calculator-errors {
  margin-top: var(--space-4);
  color: var(--status-danger-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* Results: no outer frame; the header is a live-status line and each figure
   is its own card. */
.rich-result {
  margin-top: var(--space-6);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.result-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0 0 var(--space-3);
  border-bottom: 0;
  background: none;
}

.result-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--status-success-soft);
  color: var(--status-success-text);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: 1.4;
}

.result-header h3::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.result-body {
  padding: 0;
  display: grid;
  /* minmax(0, ...) not 1fr: a bare 1fr track is minmax(auto, 1fr) and so can
     never be narrower than its content's min-content width. An unbreakable
     figure (a formatted currency amount has no break opportunity) would then
     push the whole grid outside the results card and over the sidebar. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-3);
  min-width: 0;
}

/* Set by fitResultValues() in calculator-engine.js when a figure will not fit
   a half-width tile: one full-width tile per row holds roughly twice as much,
   which keeps the number on one line at full size instead of breaking it
   across two. Must stay after .calc-right .result-metrics to win the tie. */
.result-metrics.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

/* MetricCard */
.result-metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow-wrap: break-word;
}

.result-metric-card .calculator-result-label {
  margin: 0;
}

/* The headline figure: brand-soft panel, mono, the largest number on the
   page. calculator-engine.js marks the first figure of a multi-figure
   result as .primary. */
.result-metric-card.primary {
  grid-column: 1 / -1;
  padding: var(--space-7);
  background: var(--surface-brand-soft);
  border: 1px solid var(--border-brand);
  box-shadow: none;
}

.result-metric-card.primary .calculator-result-label {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-highlight);
}

.result-metric-card.primary .calculator-result-value {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

/* The primary tile spans both columns, so it can hold roughly twice as much
   before it has to shrink. These need the extra .primary specificity to beat
   the rule above. */
.result-metric-card.primary .calculator-result-value.is-fit-1 { font-size: var(--text-h3); }
.result-metric-card.primary .calculator-result-value.is-fit-2 { font-size: var(--text-h4); }
.result-metric-card.primary .calculator-result-value.is-fit-3 { font-size: var(--text-lg); }
.result-metric-card.primary .calculator-result-value.is-fit-4 { font-size: var(--text-base); }

.result-chart-wrap h4,
.schedule-head h4 {
  margin: 0 0 1.125rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.schedule-head h4 {
  margin: 0;
  font-size: var(--text-lg);
}

/* ChartCard */
.result-chart-wrap {
  min-width: 0;
  padding: var(--card-pad);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.result-chart-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  align-items: center;
  min-width: 0;
}

/* drawPieChart() sizes the canvas inside a requestAnimationFrame, which a
   background tab never fires, so size it here too: until then the row laid
   out around the canvas default of 300 by 150. max-width still wins, so the
   chart shrinks rather than pushing the row out of a narrow card. */
.result-pie {
  flex: none;
  width: 150px;
  height: 150px;
  max-width: 100%;
}

.result-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 11rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Key, label and share on the first line, the amount under the label, as in
   the Forge ChartCard. The legend beside a 150px donut in the finance column
   is 180px wide, and a one-line "Rs 49,60,000.00 (67.1%)" value took all of
   it: the label column fell to zero and printed one letter per line. The
   share is at most six characters, so the label always keeps its width. */
.result-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas:
    "key label share"
    ".   value value";
  column-gap: 0.625rem;
  row-gap: 0.125rem;
  align-items: baseline;
  margin: 0;
  font-size: var(--text-sm);
}

/* An empty box's baseline is its bottom edge, so the key sits on the text
   baseline and reaches cap height, beside the first line of a wrapped label. */
.result-legend .swatch {
  grid-area: key;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend-label { grid-area: label; min-width: 0; color: var(--text-body); overflow-wrap: break-word; }
.legend-share { grid-area: share; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); text-align: right; }
.legend-value { grid-area: value; min-width: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); overflow-wrap: anywhere; }

/* "How to read this": a quiet info note, not a coloured-border callout. */
.result-explanation {
  margin: var(--space-4) 0 0;
  padding: 0.875rem var(--space-4);
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  background: var(--surface-band);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}

.result-explanation-title {
  display: block;
  color: var(--text-strong);
  font-size: var(--text-base);
  margin-bottom: 2px;
  font-weight: var(--weight-semibold);
}

.result-explanation p {
  margin: 0;
}

.result-metric-card.result-advice-card {
  grid-column: 1 / -1;
  background: var(--surface-band);
  border-color: var(--border-hairline);
  box-shadow: none;
}

.result-metric-card.result-advice-card .calculator-result-value {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* —— Code / editor results (developer tools) ——
   Code sits on the inverse ink surface, the same one the design uses for
   formulas, with mono type throughout. */
.result-code-card {
  grid-column: 1 / -1;
  background: var(--ink-950);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.result-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-tight-55) var(--space-3);
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-800);
}

.result-code-toolbar .calculator-result-label {
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin: 0;
}

.result-code-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-tight-65) var(--space-3);
  background: var(--surface-band);
  border-top: 1px solid var(--border-hairline);
}

.result-code-footer .btn-copy-result {
  background: var(--action-primary);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-brand), var(--inset-top);
}

.result-code-footer .btn-copy-result:hover {
  background: var(--action-primary-hover);
}

.btn-copy-result,
.btn-copy-inline {
  flex-shrink: 0;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  min-height: auto;
  line-height: 1.4;
}

.result-code-box {
  width: 100%;
  margin: 0;
  padding: var(--space-tight-85) var(--space-4);
  border: 0;
  border-radius: 0;
  background: var(--ink-950);
  color: var(--ink-200);
  font-family: var(--font-mono);
  font-size: var(--font-size-8125);
  line-height: 1.6;
  resize: vertical;
  min-height: 8rem;
  box-sizing: border-box;
}

.result-code-box.is-compact {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 7.5rem;
  padding: var(--space-tight-55) var(--space-3);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.result-code-card:has(.result-code-box.is-compact) {
  flex: 0 0 auto;
  min-height: 0;
}

body.category-developer .calc-layout-editor .result-code-box.is-compact {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 7.5rem;
}

body.category-developer .calc-layout-editor .result-code-card:has(.result-code-box.is-compact) {
  flex: 0 0 auto;
  min-height: 0;
  order: 0;
}

.result-code-box:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--cobalt-400);
}

.calculator-form textarea.code-editor,
body.category-developer .calculator-form textarea {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  min-height: 16rem;
  resize: vertical;
  tab-size: 2;
  background: var(--surface-band);
  border-color: var(--border-strong);
}

/* Result output boxes live inside the form — don't inherit the tall input min-height */
body.category-developer .calculator-form textarea.result-code-box {
  min-height: 8rem;
  background: var(--ink-950);
  border-color: transparent;
  color: var(--ink-200);
  font-size: var(--font-size-8125);
}

body.category-developer .calculator-form textarea.result-code-box.is-compact {
  min-height: 0;
  max-height: 7.5rem;
  flex: 0 0 auto;
  height: auto;
}

body.category-developer .calculator-form textarea.result-code-box.is-roomy,
.result-code-box.is-roomy {
  min-height: 18rem;
  max-height: 32rem;
  height: auto;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* One action colour sitewide: the developer category no longer carries its
   own cyan brand. */
body.category-developer .btn-copy-result {
  background: var(--ink-800);
  color: var(--ink-100);
  border-color: var(--ink-700);
  box-shadow: none;
}

body.category-developer .btn-copy-result:hover {
  background: var(--ink-700);
  color: #fff;
}

.result-metric-card .btn-copy-inline {
  align-self: flex-start;
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------------------------
   Wide two-pane tool layout (body.layout-wide, set by tool-formulas.initTool).
   Input form on the left ~40%, results / live preview on the right ~40%, with
   a generous gutter — instead of the narrow single column the with-sidebar
   layout produces. The related-tools + ads sidebar drops below as a 3-up strip.
   Applied to seo, text, date-time, security, miscellaneous, education, pdf and
   color. finance/health/math keep the classic narrow layout; developer/image
   carry their own bespoke wide CSS below.
   --------------------------------------------------------------------------- */
/* The wide layouts used to widen <main> to 1400px (1680px for developer and
   image) once tool-formulas.js had added the body class, which shifted the
   page after load and left the body misaligned with the head band. They now
   keep the shared 1160px container and use the full width inside it. */
body.layout-wide .page-layout.with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
body.layout-wide .page-layout.with-sidebar > .main-content {
  order: 1;
  width: 100%;
  max-width: 100%;
}
body.layout-wide .page-layout.with-sidebar > .sidebar,
body.layout-wide .editor-below-sidebar {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  margin: var(--space-5) 0 var(--space-2);
}
body.layout-wide .editor-below-sidebar .sidebar-widget,
body.layout-wide .editor-below-sidebar .ad-block { margin: 0; min-width: 0; }

/* Two equal, roomy panes with a generous gutter between them. */
body.layout-wide .calc-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

body.layout-wide .calc-right .calculator-result { margin: 0; }

@media (max-width: 900px) {
  body.layout-wide .calc-split { grid-template-columns: 1fr; }
  body.layout-wide .editor-below-sidebar,
  body.layout-wide .page-layout.with-sidebar > .sidebar {
    grid-template-columns: 1fr;
  }
}

/* Developer: full-width editors; move sidebar (related + ads) below */

body.category-developer .page-layout.with-sidebar {
  grid-template-columns: 1fr;
  gap: var(--space-8, 2rem);
}

body.category-developer .page-layout.with-sidebar > .main-content {
  order: 1;
  width: 100%;
  max-width: 100%;
}

body.category-developer .page-layout.with-sidebar > .sidebar,
body.category-developer .editor-below-sidebar,
body.category-image .page-layout.with-sidebar > .sidebar,
body.category-image .editor-below-sidebar {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5, 1.25rem);
  width: 100%;
  margin: 1.25rem 0 0.5rem;
}

body.category-developer .editor-below-sidebar .sidebar-widget,
body.category-developer .editor-below-sidebar .ad-block,
body.category-image .editor-below-sidebar .sidebar-widget,
body.category-image .editor-below-sidebar .ad-block {
  margin: 0;
  min-width: 0;
}

@media (max-width: 900px) {
  body.category-developer .editor-below-sidebar,
  body.category-image .editor-below-sidebar,
  body.category-developer .page-layout.with-sidebar > .sidebar,
  body.category-image .page-layout.with-sidebar > .sidebar {
    grid-template-columns: 1fr;
  }
}

body.category-developer .calculator-card {
  width: 100%;
}

body.category-developer .calc-layout-editor .calc-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5, 1.25rem);
  align-items: stretch;
  min-height: 480px;
}

body.category-developer .calc-layout-editor .calc-left,
body.category-developer .calc-layout-editor .calc-right {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--color-slate-300);
  border-radius: var(--border-radius-10);
  overflow: hidden;
  min-height: 480px;
}

body.category-developer .calc-layout-editor .calc-left {
  padding: var(--space-tight-85) var(--space-4) var(--space-4);
}

body.category-developer .calc-layout-editor .calc-right .rich-result {
  position: static;
  flex: 1;
  min-height: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

body.category-developer .calc-layout-editor .result-body {
  display: block;
  width: 100%;
  padding: var(--space-3);
  grid-template-columns: none;
}

body.category-developer .calc-layout-editor .result-metrics {
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.category-developer .calc-layout-editor .result-metric-card,
body.category-developer .calc-layout-editor .result-code-card {
  width: 100%;
  max-width: none;
  grid-column: 1 / -1;
}

body.category-developer .calc-layout-editor .result-code-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  order: -1;
}

body.category-developer .calc-layout-editor .result-code-box {
  flex: 1;
  min-height: 320px;
  width: 100%;
}

body.category-developer .calc-layout-editor .result-metric-card {
  flex: 0 0 auto;
}

body.category-developer .calc-layout-editor .calculator-form textarea.code-editor,
body.category-developer .calc-layout-editor .calculator-form textarea {
  min-height: 360px;
  flex: 1;
}

/* Diff checker: large dual editors + full-width result */
body.category-developer .calc-layout-diff .calc-split-diff {
  grid-template-columns: 1fr;
}

body.category-developer .calc-layout-diff .calc-diff-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

body.category-developer .calc-layout-diff .calc-diff-inputs .form-group {
  display: flex;
  flex-direction: column;
  margin: 0;
}

body.category-developer .calc-layout-diff .calc-diff-inputs textarea.code-editor {
  min-height: 420px;
  flex: 1;
}

body.category-developer .calc-layout-diff .calc-diff-left {
  background: var(--surface-card);
  border: 1px solid var(--color-slate-300);
  border-radius: var(--border-radius-10);
  padding: var(--space-4);
}

body.category-developer .calc-layout-diff .calc-diff-result-wrap {
  margin-top: 1rem;
}

body.category-developer .calc-layout-diff .calc-diff-result-wrap .result-code-box {
  min-height: 280px;
  font-size: var(--font-size-80);
}

.result-image-card {
  grid-column: 1 / -1;
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-md);
  padding: var(--space-tight-85) var(--space-4);
  text-align: center;
}

.result-preview-image {
  max-width: min(100%, 360px);
  height: auto;
  margin-top: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-sm);
  image-rendering: pixelated;
  min-width: 64px;
  min-height: 64px;
}

.result-image-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.result-image-actions .btn-primary {
  min-width: 140px;
}

.result-css-preview-card {
  text-align: center;
}

.result-css-preview-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin-top: 0.65rem;
  padding: var(--space-5);
  border-radius: var(--border-radius-10);
  background: radial-gradient(var(--border-hairline) 1px, transparent 1px) 0 0 / 22px 22px, var(--surface-band);
  border: 1px solid var(--color-slate-200);
  overflow: hidden;
}

.result-css-preview-box {
  width: 88px;
  height: 88px;
  border-radius: var(--border-radius-xl);
  background: var(--action-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-brand);
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  body.category-developer .calc-layout-editor .calc-split,
  body.category-developer .calc-layout-diff .calc-diff-inputs {
    grid-template-columns: 1fr;
  }
  body.category-developer .calc-layout-editor .calc-left,
  body.category-developer .calc-layout-editor .calc-right {
    min-height: 0;
  }
}

/* —— Diff studio: side-by-side visual compare (JSON Diff / Diff Checker / Text Compare) —— */
body.category-developer .calc-layout-diff-studio {
  width: 100%;
}

body.category-developer .calc-layout-diff-studio .calculator-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.diff-studio {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  background: var(--color-slate-100);
  border: 1px solid var(--color-slate-300);
  border-radius: var(--border-radius-lg);
  padding: var(--space-3);
}

.diff-studio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--surface-card);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-10);
  padding: var(--space-tight-55) var(--space-tight-85);
}

.diff-studio-top-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.diff-studio-title {
  font-weight: 700;
  color: var(--color-slate-900);
  font-size: var(--font-size-95);
}

.diff-studio-top-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.diff-studio-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 380px;
  background: var(--surface-card);
  border: 1px solid var(--color-slate-300);
  border-radius: var(--border-radius-10);
  overflow: hidden;
}

.diff-studio-view.is-hidden,
.diff-studio-toggles.is-hidden {
  display: none !important;
}

.diff-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.diff-pane-divider {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-tight-85);
  color: var(--color-slate-500);
  font-size: var(--font-size-85);
  background: var(--color-slate-50);
  border-left: 1px solid var(--color-slate-200);
  border-right: 1px solid var(--color-slate-200);
}

.diff-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: var(--space-tight-55) var(--space-3);
  border-bottom: 1px solid var(--color-slate-200);
  background: var(--color-slate-50);
  font-size: var(--font-size-85);
}

.diff-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--color-slate-700);
}

.diff-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.diff-badge-remove { background: var(--status-danger); }
.diff-badge-add { background: var(--status-success); }

.diff-pane-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-slate-500);
}

.diff-pane-body {
  flex: 1;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-82);
  line-height: 1.55;
  background: var(--surface-card);
  min-height: 320px;
  max-height: 520px;
  user-select: text;
}

.diff-row {
  display: grid;
  grid-template-columns: 2.5rem 1.1rem minmax(0, 1fr);
  min-height: 1.55em;
}

.diff-gutter {
  text-align: right;
  padding: 0 0.4rem;
  /* --text-muted, not slate-400 (2.3:1): line numbers stay AA on the
     removed and added row tints too. */
  color: var(--text-muted);
  background: var(--color-slate-50);
  border-right: 1px solid var(--color-slate-100);
  user-select: none;
}

.diff-sign {
  text-align: center;
  user-select: none;
  font-weight: 700;
}

.diff-code {
  padding: 0 var(--space-tight-65);
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.diff-studio-view.is-wrap .diff-code {
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-row-remove {
  background: var(--status-danger-soft);
}
.diff-row-remove .diff-sign { color: var(--status-danger-text); }
.diff-row-remove .diff-gutter { background: var(--status-danger-soft); }

.diff-row-add {
  background: var(--status-success-soft);
}
.diff-row-add .diff-sign { color: var(--status-success-text); }
.diff-row-add .diff-gutter { background: var(--status-success-soft); }

.diff-row-empty .diff-code.diff-spacer {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-slate-100),
    var(--color-slate-100) 4px,
    var(--color-slate-200) 4px,
    var(--color-slate-200) 8px
  );
  min-height: 1.55em;
}

.diff-inline {
  background: color-mix(in srgb, var(--status-danger) 30%, transparent);
  color: inherit;
  border-radius: var(--border-radius-3);
  padding: 0 0.1em;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.25);
}

.diff-row-add .diff-inline {
  background: color-mix(in srgb, var(--status-success) 30%, transparent);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.3);
}

.diff-studio-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-card);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-10);
  padding: var(--space-tight-65) var(--space-tight-85);
}

.diff-studio-controls-left,
.diff-studio-controls-right {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.diff-studio-controls-right {
  justify-content: flex-end;
}

.diff-studio-controls-center {
  display: flex;
  justify-content: center;
}

.diff-studio-compare-btn {
  background: var(--action-primary) !important;
  border-color: transparent !important;
  min-width: 110px;
}

.diff-studio-toggles {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 var(--space-1);
  font-size: var(--font-size-85);
  color: var(--color-slate-700);
}

.diff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
}

.diff-studio-status {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 600;
}

.diff-studio-edit {
  background: var(--surface-card);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-10);
  padding: var(--space-tight-85);
}

.diff-studio-edit-label {
  font-size: var(--font-size-85);
  font-weight: 600;
  color: var(--color-slate-600);
  margin-bottom: 0.65rem;
}

/* Not scoped to the developer category: the text category's Text Diff Checker
   uses the same studio. */
.calc-layout-diff-studio .calc-diff-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.calc-layout-diff-studio .calc-diff-inputs .form-group {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.calc-layout-diff-studio .calc-diff-inputs textarea.code-editor {
  min-height: 220px;
  flex: 1;
}

/* Live studios compare as you type, so there is nothing for Compare to do. */
.calc-layout-diff-studio.is-live .diff-studio-compare-btn {
  display: none;
}

/* studioAutoHeight: calculator-engine.js grows each box to fit its text and
   the result panes lose their cap, so a long paste scrolls the page, not the
   boxes. */
.calc-layout-diff-studio.is-auto-height .calc-diff-inputs textarea {
  overflow-y: hidden;
  resize: none;
}

.calc-layout-diff-studio.is-auto-height .diff-pane-body {
  max-height: none;
}

.diff-studio-result-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .diff-studio-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .diff-pane-divider {
    padding: var(--space-tight-35);
    border: 0;
    border-top: 1px solid var(--color-slate-200);
    border-bottom: 1px solid var(--color-slate-200);
  }
  .diff-studio-controls {
    grid-template-columns: 1fr;
  }
  .diff-studio-controls-center,
  .diff-studio-controls-right {
    justify-content: flex-start;
  }
  .calc-layout-diff-studio .calc-diff-inputs {
    grid-template-columns: 1fr;
  }
}

/* —— JSON studio: full-width left | actions | right —— */
body.category-developer .calc-layout-json-studio {
  width: 100%;
}

body.category-developer .calc-layout-json-studio .calculator-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.category-developer .json-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: stretch;
  min-height: 620px;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--border-radius-10);
  background: var(--ink-950) !important;
}

body.category-developer .json-studio-pane {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-4);
  overflow: hidden;
  min-height: 580px;
}

body.category-developer .json-studio-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: var(--space-tight-45) var(--space-tight-65);
  background: var(--color-slate-600);
  color: var(--color-slate-200);
  flex-shrink: 0;
}

body.category-developer .json-studio-title {
  font-size: var(--font-size-78);
  font-weight: 700;
  margin-right: auto;
  letter-spacing: 0.03em;
}

body.category-developer .json-studio-status {
  font-size: var(--font-size-72);
  font-weight: 600;
  padding: var(--space-tight-15) var(--space-tight-45);
  border-radius: var(--border-radius-full);
  background: var(--color-slate-700);
  color: var(--color-slate-300);
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.category-developer .json-studio-status.is-ok {
  background: var(--status-success-soft);
  color: var(--status-success-text);
}

body.category-developer .json-studio-status.is-error {
  background: var(--status-danger-soft);
  color: var(--status-danger-text);
}

body.category-developer .json-studio-toolbar .btn {
  background: var(--color-slate-700);
  color: var(--color-slate-50);
  border-color: var(--color-slate-500);
  font-size: var(--font-size-72);
  padding: var(--space-tight-20) var(--space-2);
}

body.category-developer .json-studio-pane .calc-inputs,
body.category-developer .json-studio-pane .form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
  padding: 0;
  min-height: 0;
}

body.category-developer .json-studio-pane textarea.code-editor,
body.category-developer .json-studio-pane textarea.code-editor-lined {
  flex: 1;
  min-height: 0;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-82);
  line-height: 1.5;
  border: 0;
  border-radius: 0;
  resize: none;
  padding: var(--space-tight-65) var(--space-3);
  background: transparent;
}

body.category-developer .code-with-lines {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  flex: 1;
  min-height: 520px;
  background: var(--surface-card);
  position: relative;
  overflow: hidden;
}

body.category-developer .code-line-numbers {
  margin: 0;
  padding: var(--space-tight-65) var(--space-tight-35);
  background: var(--color-slate-100);
  color: var(--color-slate-400);
  font-family: var(--font-mono);
  font-size: var(--font-size-82);
  line-height: 1.5;
  text-align: right;
  overflow: hidden;
  user-select: none;
  border-right: 1px solid var(--color-slate-200);
  white-space: pre;
}

body.category-developer .code-highlight-wrap {
  grid-template-columns: 44px minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

body.category-developer .code-highlight-view {
  margin: 0;
  padding: var(--space-tight-65) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-82);
  line-height: 1.5;
  white-space: pre;
  overflow: auto;
  color: var(--color-slate-900);
  grid-column: 2;
  grid-row: 1;
  background: var(--surface-card);
  pointer-events: none;
}

body.category-developer .code-output-select {
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  margin: 0;
  padding: var(--space-tight-65) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-82);
  line-height: 1.5;
  border: 0;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--color-slate-900);
  overflow: auto;
  white-space: pre;
  width: 100%;
  min-height: 0;
  height: 100%;
}

body.category-developer .code-output-select::selection {
  background: rgba(43, 85, 245, 0.28);
  color: transparent;
}

body.category-developer .json-studio-pane {
  min-width: 0;
  width: 100%;
}

body.category-developer .json-studio-toolbar .is-active-view {
  background: var(--action-neutral) !important;
  border-color: var(--action-neutral) !important;
  color: var(--action-neutral-text) !important;
}

body.category-developer .json-tree-view {
  flex: 1;
  min-height: 520px;
  overflow: auto;
  background: var(--surface-card);
  padding: var(--space-2) var(--space-tight-65);
  font-family: var(--font-mono);
  font-size: var(--font-size-82);
  line-height: 1.55;
  user-select: text;
}

body.category-developer .json-tree-view-hidden {
  display: none !important;
}

body.category-developer .json-tree-empty {
  color: var(--color-slate-500);
  padding: var(--space-4);
}

body.category-developer .json-tree-row {
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  white-space: pre;
  min-height: 1.35em;
}

body.category-developer .json-tree-pad {
  white-space: pre;
}

body.category-developer .json-fold-btn {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border: 0;
  background: transparent;
  color: var(--color-slate-500);
  cursor: pointer;
  padding: 0;
  font-size: 0.65rem;
  line-height: 1;
  margin-top: 0.2rem;
}

body.category-developer .json-fold-btn:hover {
  color: var(--color-slate-900);
}

body.category-developer .json-tree-ellipsis {
  display: inline-block;
  margin: 0 0.2rem;
  padding: 0 var(--space-1);
  background: var(--amber-050);
  color: var(--amber-700);
  border-radius: var(--border-radius-3);
  font-size: var(--font-size-70);
}

body.category-developer .json-key { color: var(--text-muted); font-weight: 500; }
body.category-developer .json-string { color: var(--mint-700); }
body.category-developer .json-number { color: var(--cobalt-600); }
body.category-developer .json-bool { color: var(--violet-500); }
body.category-developer .json-null { color: var(--color-slate-500); font-style: italic; }

body.category-developer .json-studio-center {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-tight-35) var(--space-tight-15);
  justify-content: flex-start;
  padding-top: 2.5rem;
}

body.category-developer .json-studio-controls .form-group {
  margin-bottom: 0.35rem;
}

body.category-developer .json-studio-controls label,
body.category-developer .json-studio-controls .field-label-row {
  display: none;
}

body.category-developer .json-studio-controls select {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-4);
  font-size: var(--font-size-78);
  padding: var(--space-tight-45) 0.4rem;
}

/* Indent is inert while minifying or while the output shows the Object tree.
   Dimmed AND disabled AND explained — dimming alone just looks like a style. */
body.category-developer .json-studio-controls .form-group.is-inert select {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border-color: var(--border-hairline);
  cursor: not-allowed;
}
body.category-developer .json-indent-note {
  margin: 0.35rem 0 0;
  font-size: var(--font-size-68);
  line-height: 1.35;
  color: var(--text-muted);
}

body.category-developer .json-action-group {
  display: none !important;
}

body.category-developer .json-studio-action-btn,
body.category-developer .json-studio-outline-btn {
  width: 100%;
  white-space: normal;
  line-height: 1.25;
  padding: var(--space-tight-55) 0.4rem;
  font-size: var(--font-size-78);
  font-weight: 600;
}

body.category-developer .json-studio-outline-btn {
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-4);
}

body.category-developer .json-studio-outline-btn:hover,
body.category-developer .json-studio-main-btn {
  background: var(--action-ghost-hover);
  color: var(--text-strong);
  border-color: var(--border-strong);
}

body.category-developer .json-studio .image-file-input-hidden,
body.category-developer .json-studio input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

body.category-developer .json-studio-result-hidden {
  display: none !important;
}

body.category-developer .json-studio-output .json-studio-result-hidden {
  display: none !important;
}

@media (max-width: 1000px) {
  body.category-developer .json-studio {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  body.category-developer .json-studio-pane {
    min-height: 320px;
  }
  body.category-developer .json-studio-center {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: var(--space-2);
  }
  body.category-developer .json-studio-action-btn,
  body.category-developer .json-studio-outline-btn {
    width: auto;
  }
  body.category-developer .code-with-lines {
    min-height: 280px;
  }
}

/* —— Image studio: full width dropzone + tabs —— */
body.category-image .page-layout.with-sidebar {
  grid-template-columns: 1fr;
}

body.category-image .page-layout.with-sidebar > .main-content {
  order: 1;
  width: 100%;
}

body.category-image .page-layout.with-sidebar > .sidebar {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
}

body.category-image {
  --color-primary: var(--action-primary);
  --color-primary-dark: var(--action-primary-hover);
}

.calc-layout-image-studio .calc-split-image {
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
  gap: 1.25rem;
  align-items: start;
}

.calc-layout-image-studio .image-studio-left,
.calc-layout-image-studio .image-studio-right .rich-result {
  background: var(--surface-card);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-14);
  box-shadow: var(--shadow-card);
}

.calc-layout-image-studio .image-studio-left {
  padding: var(--space-4);
}

.calc-layout-image-studio .image-studio-right .rich-result {
  position: static;
  margin: 0;
  padding: var(--space-4);
  min-height: 420px;
}

.calc-layout-image-studio .image-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.calc-layout-image-studio .image-dropzone {
  border: 1px dashed var(--border-brand);
  background: var(--surface-brand-soft);
  border-radius: var(--border-radius-14);
  padding: 1.75rem var(--space-5);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.calc-layout-image-studio .image-dropzone.is-dragover,
.calc-layout-image-studio .image-dropzone.has-file {
  border-color: var(--action-primary);
  background: var(--cobalt-100);
}

.calc-layout-image-studio .image-dropzone-icon {
  font-size: 1.75rem;
  margin-bottom: 0.35rem;
}

.calc-layout-image-studio .image-dropzone-title {
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--color-slate-900);
}

.calc-layout-image-studio .image-format-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin: 0.85rem 0 0.35rem;
}

.calc-layout-image-studio .image-format-pills span {
  font-size: var(--font-size-70);
  font-weight: 700;
  padding: var(--space-tight-20) var(--space-tight-55);
  border-radius: var(--border-radius-full);
  background: var(--color-slate-200);
  color: var(--color-slate-700);
}

.calc-layout-image-studio .image-format-pills span:nth-child(1) { background: var(--surface-card); }
.calc-layout-image-studio .image-format-pills span:nth-child(2) { background: var(--surface-card); }
.calc-layout-image-studio .image-format-pills span:nth-child(3) { background: var(--surface-card); }
.calc-layout-image-studio .image-format-pills span:nth-child(4) { background: var(--surface-card); }
.calc-layout-image-studio .image-format-pills span:nth-child(5) { background: var(--surface-card); }
.calc-layout-image-studio .image-format-pills span:nth-child(6) { background: var(--surface-card); }

.calc-layout-image-studio .image-dropzone-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-slate-500);
}

/* A dropped file the tool cannot use (a video, an archive). Border + weight
   carry the message as well as colour, so it reads without colour vision. */
.image-dropzone.is-rejected {
  border-color: var(--status-danger) !important;
  background: var(--status-danger-soft) !important;
}
.image-dropzone.is-rejected .image-dropzone-hint {
  color: var(--status-danger-text) !important;
  font-weight: 600;
}
[data-theme="dark"] .image-dropzone.is-rejected {
  background: rgba(220, 38, 38, 0.12) !important;
}
[data-theme="dark"] .image-dropzone.is-rejected .image-dropzone-hint { color: var(--coral-400) !important; }

.calc-layout-image-studio .image-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}

.calc-layout-image-studio .image-mode-card {
  border: 1px solid var(--color-slate-200);
  background: var(--surface-card);
  border-radius: var(--border-radius-lg);
  padding: var(--space-tight-85) var(--space-tight-65);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.calc-layout-image-studio .image-mode-card strong {
  display: block;
  font-size: var(--font-size-90);
  margin-bottom: 0.2rem;
}

.calc-layout-image-studio .image-mode-card span {
  font-size: var(--font-size-xs);
  color: var(--color-slate-500);
}

.calc-layout-image-studio .image-mode-card.is-active {
  border-color: var(--action-primary);
  box-shadow: 0 0 0 1px var(--action-primary);
}

.calc-layout-image-studio .result-status-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: var(--space-tight-15) var(--space-tight-55);
  border-radius: var(--border-radius-full);
  background: var(--status-success-soft);
  color: var(--status-success-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  vertical-align: middle;
}

.calc-layout-image-studio .result-file-meta {
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  border-radius: var(--border-radius-md);
  padding: var(--space-tight-55) var(--space-3);
  font-size: var(--font-size-85);
  margin-bottom: 0.75rem;
}

.calc-layout-image-studio .result-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.calc-layout-image-studio .result-tab {
  border: 1px solid var(--color-slate-200);
  background: var(--color-slate-50);
  border-radius: var(--border-radius-md);
  padding: var(--space-tight-35) 0.7rem;
  font-size: var(--font-size-80);
  cursor: pointer;
  color: var(--color-slate-700);
}

.calc-layout-image-studio .result-tab.is-active {
  background: var(--color-slate-900);
  border-color: var(--color-slate-900);
  color: #fff;
}

.calc-layout-image-studio .result-tab-panel {
  display: none;
}

.calc-layout-image-studio .result-tab-panel.is-active {
  display: block;
}

.calc-layout-image-studio .result-tab-panel .result-code-box {
  min-height: 220px;
}

.calc-layout-image-studio .result-image-inline {
  margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
  .calc-layout-image-studio .calc-split-image {
    grid-template-columns: 1fr;
  }
  .calc-layout-image-studio .image-mode-cards {
    grid-template-columns: 1fr;
  }
}

/* The health category used to run its own teal theme (gradient hero, teal
   buttons, animated tiles). Forge has one action colour and no decorative
   motion, so health now shares the sitewide skin. The hub's kicker line is
   the only health-specific hook left. */
.health-kicker {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-highlight);
}

/* DataTable-style schedule: uppercase tracked header on the band surface,
   mono figures, zebra rows. */
.schedule-wrap {
  border-top: 1px solid var(--border-hairline);
  padding: var(--card-pad);
  background: var(--surface-card);
}

.schedule-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-3);
}

.schedule-actions,
.schedule-view-toggle {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Monthly / Yearly reads as underline tabs, not two filled buttons. */
.schedule-view-toggle {
  gap: var(--space-6);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}

.schedule-view-toggle .btn {
  padding: 0 0 0.625rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  transform: none;
}

.schedule-view-toggle .btn:hover {
  background: transparent;
  color: var(--text-strong);
  transform: none;
}

.schedule-view-toggle .btn.btn-primary {
  color: var(--text-link);
  border-bottom-color: var(--action-primary);
}

.schedule-summary {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.schedule-table-wrap {
  overflow-x: auto;
  max-height: 520px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  width: 100%;
}

.schedule-slot .schedule-table-wrap {
  max-height: 560px;
}

.schedule-slot .schedule-table th,
.schedule-slot .schedule-table td {
  padding: 0.4375rem 0.75rem;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.schedule-table th,
.schedule-table td {
  padding: var(--space-tight-45) var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--border-hairline);
  white-space: nowrap;
}

.schedule-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
}

.schedule-table tbody tr:nth-child(even) {
  background: var(--surface-band);
}

.schedule-table tbody tr:last-child td {
  border-bottom: 0;
}

.schedule-table th:first-child,
.schedule-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: inherit;
}

.schedule-table tbody tr td:first-child {
  background: var(--surface-card);
}

.schedule-table tbody tr:nth-child(even) td:first-child {
  background: var(--surface-band);
}

.schedule-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-band);
  z-index: 1;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.schedule-table tbody tr:hover,
.schedule-table tbody tr:hover td:first-child {
  background: var(--ink-050);
}

[data-theme="dark"] .schedule-table tbody tr:hover,
[data-theme="dark"] .schedule-table tbody tr:hover td:first-child {
  background: var(--ink-800);
}

@media (max-width: 900px) {
  .result-body {
    grid-template-columns: 1fr;
  }
}


/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumb-page {
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding: 0;
}

.breadcrumb a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: var(--weight-regular);
}

.breadcrumb a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--text-subtle);
}

.breadcrumb [aria-current="page"] {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

/* FAQ: each question is its own quiet card. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 1.125rem var(--space-5);
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  transition: var(--transition-control);
}

.faq-question:hover {
  background: var(--surface-band);
}

.faq-icon {
  flex: 0 0 auto;
  font-size: 0.625rem;
  color: var(--text-subtle);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq-answer {
  padding: 0 var(--space-5) 1.125rem;
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  display: none;
}

.faq-answer p {
  margin: 0;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Author Box */
.author-box {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-band);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-hairline);
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cobalt-100);
  color: var(--cobalt-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

[data-theme="dark"] .author-avatar {
  background: var(--cobalt-950);
  color: var(--cobalt-300);
}

.author-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.author-role {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Ad slots: the placeholder reserves height (CLS) and stays visually quiet. */
.ad-block {
  text-align: center;
  margin: var(--space-6) 0;
  min-height: 96px;
  background: var(--surface-band);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.ad-block-sidebar {
  min-height: 250px;
  margin: 0;
}

.ad-block-in-article {
  min-height: 280px;
}

/* Newsletter: the closing CTA panel (cobalt, 28px radius). */
.newsletter-box {
  background: var(--surface-brand);
  color: #fff;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-2xl);
  text-align: left;
}

.newsletter-box h2 {
  color: #fff;
}

.newsletter-box input {
  padding: 0.625rem var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  width: 100%;
  max-width: 320px;
  margin-right: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

/* Pagination */
.pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-8);
}

.pagination a,
.pagination span {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--text-strong);
}

.pagination a:hover {
  background: var(--action-ghost-hover);
}

.pagination .active {
  background: var(--action-neutral);
  color: var(--action-neutral-text);
  border-color: var(--action-neutral);
}

/* Related Tools */
.related-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}

/* Share Buttons */
.share-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.share-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--transition-control);
}

.share-btn:hover {
  background: var(--action-ghost-hover);
}

/* Tool Actions */
.tool-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
}

.tool-actions .btn {
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
}

/* Content sections: prose at 64ch, headings in display type. */
.content-section {
  margin-bottom: var(--space-12);
  scroll-margin-top: var(--space-6);
}

.content-section > h2 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  color: var(--text-strong);
}

.content-section h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: var(--space-6) 0 var(--space-3);
  color: var(--text-strong);
}

.content-section p {
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  max-width: var(--measure-prose);
}

.content-section ul,
.content-section ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  max-width: var(--measure-prose);
}

.content-section li + li {
  margin-top: var(--space-1);
}

.content-section li::marker {
  color: var(--text-subtle);
}

/* Formula: mono on the inverse ink surface. */
.formula-box {
  background: var(--surface-inverse);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  padding: 1.25rem 1.375rem;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: var(--space-4) 0;
  max-width: var(--measure-prose);
  overflow-x: auto;
}

[data-theme="dark"] .formula-box {
  border: 1px solid var(--border-hairline);
}

.example-box {
  background: var(--surface-accent-soft);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  max-width: var(--measure-prose);
}

.tips-list li,
.mistakes-list li {
  margin-bottom: var(--space-2);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--space-3);
}

/* FeatureCard, tinted */
.benefit-item {
  padding: var(--card-pad);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-card);
}

.benefit-item h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-strong);
}

.benefit-item p {
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* —— Timestamp studio (Unix / Date converters) —— */
body.category-developer .calc-layout-timestamp-studio .calculator-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.timestamp-studio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.ts-banner {
  border-radius: var(--border-radius-lg);
  padding: var(--space-4) 1.15rem;
  border: 1px solid transparent;
}

.ts-banner-kicker {
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.ts-banner-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-slate-900);
  line-height: 1.3;
}

.ts-banner-desc {
  margin: 0.35rem 0 0;
  color: var(--color-slate-600);
  font-size: var(--font-size-92);
  line-height: 1.45;
}

/* Unix (both): teal */
.ts-mode-both .ts-banner {
  background: var(--surface-band);
  border-color: var(--border-hairline);
}
.ts-mode-both .ts-banner-kicker { color: var(--health-teal); }
.ts-mode-both .ts-convert.btn-primary,
.ts-mode-both .btn-primary.ts-convert {
  background: var(--action-primary) !important;
  border-color: var(--health-teal) !important;
}
.ts-mode-both .ts-card-primary {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.08);
}
.ts-mode-both .ts-lab { color: var(--health-teal); }

/* Timestamp → Date: indigo */
.ts-mode-to-date .ts-banner {
  background: var(--surface-band);
  border-color: var(--border-hairline);
}
.ts-mode-to-date .ts-banner-kicker { color: var(--text-highlight); }
.ts-mode-to-date .ts-convert.btn-primary,
.ts-mode-to-date .btn-primary.ts-convert {
  background: var(--action-primary) !important;
  border-color: transparent !important;
}
.ts-mode-to-date .ts-card-primary {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.08);
}
.ts-mode-to-date .ts-lab { color: var(--text-link); }
.ts-mode-to-date .ts-feat-card {
  background: var(--surface-brand-soft);
  border-color: var(--border-brand);
}

/* Date → Timestamp: amber */
.ts-mode-to-unix .ts-banner {
  background: var(--surface-band);
  border-color: var(--border-hairline);
}
.ts-mode-to-unix .ts-banner-kicker { color: var(--text-highlight); }
.ts-mode-to-unix .ts-convert.btn-primary,
.ts-mode-to-unix .btn-primary.ts-convert {
  background: var(--action-primary) !important;
  border-color: transparent !important;
}
.ts-mode-to-unix .ts-card-primary {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.1);
}
.ts-mode-to-unix .ts-lab { color: var(--text-link); }
.ts-mode-to-unix .ts-feat-card {
  background: var(--surface-brand-soft);
  border-color: var(--border-brand);
}

.ts-unit {
  border: 1px solid var(--color-slate-300);
  border-radius: var(--border-radius-md);
  padding: var(--space-tight-55) var(--space-tight-65);
  background: var(--surface-card);
  min-width: 130px;
}

.ts-tz-toggle {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--color-slate-100);
  border-radius: var(--border-radius-full);
  padding: var(--space-tight-20);
  margin-bottom: 0.75rem;
}

.ts-tz-btn {
  border: 0;
  background: transparent;
  border-radius: var(--border-radius-full);
  padding: var(--space-tight-35) var(--space-tight-85);
  font-size: var(--font-size-85);
  font-weight: 700;
  color: var(--color-slate-500);
  cursor: pointer;
}

.ts-tz-btn.is-active {
  background: var(--surface-card);
  color: var(--color-slate-900);
  box-shadow: var(--shadow-xs);
}

.ts-featured.is-hidden {
  display: none !important;
}

.ts-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.ts-feat-card {
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-10);
  padding: var(--space-3) var(--space-tight-85);
}

.ts-feat-label {
  font-size: var(--font-size-72);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-slate-500);
  margin-bottom: 0.35rem;
}

.ts-feat-value {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-slate-900);
  word-break: break-all;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

@media (max-width: 800px) {
  .ts-featured-grid {
    grid-template-columns: 1fr;
  }
}

.ts-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 1rem;
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4) 1.15rem;
}

.ts-live-label {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-slate-900);
  line-height: 1.25;
}

.ts-live-panel {
  text-align: right;
}

.ts-live-value {
  font-size: 1.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-slate-900);
  letter-spacing: -0.02em;
}

.ts-live-meta {
  font-size: var(--font-size-72);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-slate-500);
  margin-top: 0.15rem;
}

.ts-live-clock {
  font-size: var(--font-size-85);
  color: var(--color-slate-600);
  margin: 0.2rem 0 0.45rem;
}

.ts-card {
  background: var(--surface-card);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4) 1.15rem 1.15rem;
}

.ts-field-label {
  display: block;
  font-weight: 700;
  color: var(--color-slate-900);
  margin-bottom: 0.55rem;
}

.ts-muted {
  font-weight: 500;
  color: var(--color-slate-500);
  font-size: 0.9em;
}

.ts-row {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.ts-input {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--color-slate-300);
  border-radius: var(--border-radius-md);
  padding: var(--space-tight-65) var(--space-3);
  font-size: var(--font-size-base);
  font-family: var(--font-mono);
}

.ts-convert {
  white-space: nowrap;
}

.ts-hint {
  margin: 0.55rem 0 0;
  font-size: var(--font-size-85);
  color: var(--color-slate-500);
}

.ts-date-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
}

.ts-date-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--font-size-78);
  font-weight: 600;
  color: var(--color-slate-600);
}

.ts-date-grid input {
  border: 1px solid var(--color-slate-300);
  border-radius: var(--border-radius-md);
  padding: var(--space-tight-55) var(--space-tight-45);
  font-size: var(--font-size-95);
  font-family: var(--font-mono);
}

.ts-date-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  align-items: center;
}

.ts-results-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-slate-900);
  margin-bottom: 0.65rem;
}

.ts-error {
  background: var(--status-danger-soft);
  color: var(--status-danger-text);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  padding: var(--space-tight-55) var(--space-3);
  margin-bottom: 0.65rem;
  font-size: var(--font-size-90);
}

.ts-table-wrap {
  overflow-x: auto;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-92);
}

.ts-table td {
  border: 1px solid var(--color-slate-200);
  padding: var(--space-tight-55) 0.7rem;
  vertical-align: middle;
}

.ts-val {
  width: 62%;
}

.ts-val code {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  word-break: break-all;
  color: var(--color-slate-900);
}

.ts-lab {
  color: var(--text-link);
  font-weight: 600;
  white-space: nowrap;
}

.ts-copy-cell {
  margin-left: 0.35rem;
  vertical-align: middle;
}

.timestamp-studio-result-hidden {
  display: none !important;
}

@media (max-width: 800px) {
  .ts-live {
    grid-template-columns: 1fr;
  }
  .ts-live-panel {
    text-align: left;
  }
  .ts-date-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ts-lab {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .ts-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===========================================================================
   Live ad units + cookie consent banner
   Driven entirely by assets/js/site-config.js — no per-page markup needed.
   =========================================================================== */

/* When a real AdSense unit is injected, drop the dashed placeholder chrome. */
.ad-block.ad-live {
  display: block;
  background: none;
  border: none;
  min-height: 0;
  padding: 0;
}

.ad-block.ad-live .ad-label {
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* Reserve height so a loading ad does not shift page content (CLS). */
.ad-block.ad-live .adsbygoogle { min-height: 90px; }
.ad-block-in-article.ad-live .adsbygoogle { min-height: 250px; }
.ad-block-sidebar.ad-live .adsbygoogle { min-height: 250px; }

.yt-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-xl);
  padding: var(--space-4);
}

.yt-consent-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.yt-consent-text { flex: 1 1 320px; }
.yt-consent-text strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}
.yt-consent-text p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}
.yt-consent-text a { color: var(--color-accent-text); }

.yt-consent-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .yt-consent-inner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .yt-consent-actions button { flex: 1; }
}

/* Article data tables (field reference + worked example) are styled with the
   rest of the Forge DataTable rules further down (search "DataTable:"). */

/* ===========================================================================
   SEO tool panels — SERP previews, social cards, score meters, schema output.
   Markup is produced by assets/js/seo-tools.js via the engine's _panels hook.
   =========================================================================== */

/* Panel shell */
.result-panel {
  margin: var(--space-4) 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--bg-primary);
}
.result-panel-title {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}
.result-panel-body { padding: var(--space-5); }

/* --- Tone tokens (shared by badges, meters, scores) --- */
.seo-tone-good { --seo-tone: var(--color-success); }
.seo-tone-warn { --seo-tone: var(--color-warning); }
.seo-tone-bad  { --seo-tone: var(--color-error); }

.seo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  margin: 0 var(--space-1) var(--space-1) 0;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--seo-tone, var(--text-secondary));
  background: color-mix(in srgb, var(--seo-tone, var(--text-muted)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--seo-tone, var(--text-muted)) 35%, transparent);
}

/* --- Google SERP preview --- */
.seo-panel-serp .result-panel-body { background: var(--bg-primary); }
.seo-serp {
  max-width: 600px;
  font-family: Arial, sans-serif;
  padding: var(--space-3) 0;
}
.seo-serp-url {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.seo-serp-title {
  color: #1a0dab;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 3px;
  cursor: pointer;
}
.seo-serp-title:hover { text-decoration: underline; }
.seo-serp-desc {
  color: #4d5156;
  font-size: 14px;
  line-height: 1.58;
}
.seo-serp-note { margin-top: var(--space-3); }
.seo-serp-mobile .seo-serp { max-width: 400px; }

[data-theme="dark"] .seo-serp-title { color: #8ab4f8; }
[data-theme="dark"] .seo-serp-desc { color: var(--text-secondary); }

/* --- Social share card (OG / Twitter) --- */
.seo-card {
  max-width: 500px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}
.seo-card-img {
  aspect-ratio: 1200 / 630;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tertiary);
}
.seo-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.seo-card-body {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-color);
}
.seo-card-host {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.seo-card-title {
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.seo-card-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.seo-card-small { max-width: 340px; }
.seo-card-small .seo-card-img { aspect-ratio: 1 / 1; }

/* --- Score dial + meters --- */
.seo-score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.seo-score-num {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1;
  color: var(--seo-tone, var(--color-primary));
}
.seo-score-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
}
.seo-meter {
  height: 8px;
  border-radius: var(--border-radius-full);
  background: var(--bg-tertiary);
  overflow: hidden;
  margin: var(--space-2) 0;
}
.seo-meter-fill {
  height: 100%;
  border-radius: var(--border-radius-full);
  background: var(--seo-tone, var(--color-primary));
  transition: width var(--transition-base);
}

/* --- Stat tiles --- */
.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.seo-tile {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
  text-align: center;
}
.seo-tile .seo-stat {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.seo-tile small {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Data table (density, headings, links) --- */
.seo-tablewrap { overflow-x: auto; }
.seo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.seo-table th,
.seo-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}
.seo-table thead th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.seo-table tbody tr:hover { background: var(--bg-secondary); }
.seo-cell-meter { min-width: 120px; }

/* --- Code block --- */
.seo-code {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-gray-900);
  color: var(--ink-200);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre;
  position: relative;
}
.seo-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
}

/* --- Issues / notes --- */
.seo-issues { list-style: none; padding: 0; margin: 0; }
.seo-issues li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.seo-issues li:last-child { border-bottom: none; }
.seo-ok { color: var(--text-primary); font-weight: 500; margin: 0; }
.seo-note {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Tag list, mono, slug --- */
.seo-taglist { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.seo-tag {
  padding: 2px var(--space-2);
  border-radius: var(--border-radius-sm);
  background: var(--bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.seo-mono { font-family: var(--font-mono); font-size: 0.95em; }
.seo-slug {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--border-radius-sm);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  font-family: var(--font-mono);
  word-break: break-all;
}
.seo-outline-row { padding-left: var(--space-4); }

/* ===========================================================================
   Colour tool panels — swatches, palettes, gradients, contrast previews.
   Markup produced by assets/js/color-tools.js via the engine's _panels hook.
   =========================================================================== */

/* Paired native swatch + hex text input */
.color-input-row { display: flex; gap: var(--space-2); align-items: stretch; }
.color-swatch-input {
  -webkit-appearance: none;
  appearance: none;
  width: 56px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.color-swatch-input::-webkit-color-swatch-wrapper { padding: 4px; }
.color-swatch-input::-webkit-color-swatch { border: none; border-radius: var(--border-radius-sm); }
.color-hex-input {
  flex: 1;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* Big preview swatch */
.color-swatch-big {
  min-height: 160px;
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: 1px solid var(--border-color);
}
.color-swatch-hex { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: 0.02em; font-family: var(--font-mono); }
.color-swatch-cap { font-size: var(--font-size-sm); opacity: 0.85; }

/* Palette / harmony strip */
.color-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--space-2);
}
.color-chip {
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: default;
}
.color-chip small { font-family: var(--font-sans); font-size: 10px; opacity: 0.8; font-weight: 500; }

/* Format table */
.color-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.color-table th, .color-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); text-align: left; }
.color-table thead th { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.color-table tbody th { font-weight: 700; color: var(--text-secondary); white-space: nowrap; width: 90px; }
/* ---- date picker ---------------------------------------------------------
   Replaces the cramped native calendar. The <input type="date"> underneath is
   untouched, so its value stays yyyy-mm-dd. */
.yt-datefield { position: relative; display: block; }
.yt-datefield .yt-date-input { width: 100%; padding-right: 2.6rem; }
/* Hide the native indicator — we supply our own trigger in the same spot. */
.yt-datefield .yt-date-input::-webkit-calendar-picker-indicator { opacity: 0; display: none; }
.yt-date-trigger {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--border-radius-sm);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.yt-date-trigger:hover { background: var(--surface-3); color: var(--text-primary); }
.yt-date-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.yt-datepop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: min(20rem, 92vw); padding: 0.75rem;
  background: var(--surface-1);
  border: 1px solid var(--border-color); border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lifted);
}
.yt-datepop.is-above { top: auto; bottom: calc(100% + 6px); }
.yt-datepop-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.6rem; }
.yt-datepop-head .yt-mon { flex: 1 1 auto; }
.yt-datepop-head .yt-yr { flex: 0 0 5.5rem; }
.yt-datepop-head select {
  padding: var(--space-tight-35) 0.4rem; font-size: var(--font-size-85); font-weight: 600;
  border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
  background: var(--surface-1); color: var(--text-primary);
}
.yt-nav {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; font-size: 1.1rem; line-height: 1;
  border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
  background: var(--surface-1); color: var(--text-primary); cursor: pointer;
}
.yt-nav:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.yt-dow, .yt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.yt-dow span {
  text-align: center; font-size: var(--font-size-68); font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-muted); padding-bottom: 0.3rem; text-transform: uppercase;
}
.yt-day {
  aspect-ratio: 1 / 1; min-height: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-82); border: 1px solid transparent; border-radius: var(--border-radius-md);
  background: transparent; color: var(--text-primary); cursor: pointer;
}
.yt-day:hover:not(:disabled) { background: var(--surface-3); }
.yt-day.is-outside { color: var(--text-muted); opacity: 0.45; pointer-events: none; }
/* Today is marked with a ring, the selection with fill — two different cues,
   so they stay distinguishable when both land on the same cell. */
.yt-day.is-today { border-color: var(--color-primary); font-weight: 700; }
.yt-day.is-selected {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff; font-weight: 700;
}
.yt-day:disabled { opacity: 0.3; cursor: not-allowed; }
.yt-datepop-foot {
  display: flex; gap: 0.4rem; margin-top: 0.6rem;
  padding-top: 0.6rem; border-top: 1px solid var(--border-color);
}
.yt-datepop-foot button {
  flex: 1; padding: 0.4rem; font-size: var(--font-size-78); font-weight: 600;
  border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
  background: var(--surface-1); color: var(--text-primary); cursor: pointer;
}
.yt-datepop-foot button:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

[data-theme="dark"] .yt-datepop { background: var(--surface-1); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .yt-datepop-head select,
[data-theme="dark"] .yt-nav,
[data-theme="dark"] .yt-datepop-foot button { background: var(--surface-2); color: var(--text-primary); }
[data-theme="dark"] .yt-day { color: var(--text-primary); }
[data-theme="dark"] .yt-day:hover:not(:disabled) { background: var(--surface-3); }
[data-theme="dark"] .yt-date-trigger:hover { background: var(--surface-3); }

.color-mono { font-family: var(--font-mono); }
.color-table tbody tr:last-child th, .color-table tbody tr:last-child td { border-bottom: none; }
/* The format this converter is named for — uses a left rule + weight rather
   than colour alone, so it still reads for colour-blind users and in print. */
.color-table tbody tr.is-primary th,
.color-table tbody tr.is-primary td {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--text-primary);
}
.color-table tbody tr.is-primary th { box-shadow: inset 3px 0 0 0 var(--color-primary); }

/* Gradient / filter / shadow previews */
.color-gradient-preview { height: 160px; border-radius: var(--border-radius-lg); border: 1px solid var(--border-color); }
.color-filter-preview { height: 160px; border-radius: var(--border-radius-lg); border: 1px solid var(--border-color); background-size: cover; }
.color-shadow-stage {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-lg);
}
.color-shadow-box { width: 120px; height: 120px; border-radius: var(--border-radius-lg); background: var(--bg-primary); }

/* Contrast ratio big number */
.color-ratio { font-size: var(--font-size-4xl); font-weight: 800; line-height: 1.1; color: var(--text-primary); }
.color-panel-ratio .color-ratio.is-good { color: var(--color-success); }
.color-panel-ratio .color-ratio.is-warn { color: var(--color-warning); }
.color-panel-ratio .color-ratio.is-bad { color: var(--color-error); }

.color-contrast-preview {
  padding: var(--space-6);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.color-contrast-lg { font-size: var(--font-size-2xl); font-weight: 700; }
.color-contrast-sm { font-size: var(--font-size-base); }

.color-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--seo-tone, var(--text-secondary));
  background: color-mix(in srgb, var(--seo-tone, var(--text-muted)) 14%, transparent);
}
.color-tone-good { --seo-tone: var(--color-success); }
.color-tone-bad { --seo-tone: var(--color-error); }

.color-code {
  margin: 0; padding: var(--space-4);
  background: var(--color-gray-900); color: var(--ink-200);
  border-radius: var(--border-radius-md);
  overflow-x: auto; font-family: var(--font-mono); font-size: var(--font-size-sm);
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.color-note { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; }

/* ===========================================================================
   Security tool panels — generated secrets, strength meters, checklists.
   Markup produced by assets/js/security-tools.js via the engine's _panels hook.
   =========================================================================== */

.sec-tone-good { --sec-tone: var(--color-success); }
.sec-tone-warn { --sec-tone: var(--color-warning); }
.sec-tone-bad  { --sec-tone: var(--color-error); }

/* The generated value — the star of every generator. Large, monospace,
   selectable, with a copy affordance. */
.sec-output {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  line-height: 1.5;
  word-break: break-all;
  padding: var(--space-4);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  user-select: all;
  cursor: text;
}

/* Strength meter */
.sec-strength { margin: var(--space-1) 0; }
.sec-meter {
  height: 10px;
  border-radius: var(--border-radius-full);
  background: var(--bg-tertiary);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.sec-meter-fill {
  height: 100%;
  border-radius: var(--border-radius-full);
  background: var(--sec-tone, var(--color-primary));
  transition: width var(--transition-base);
}
.sec-strength-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sec-strength-bits {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
}
.sec-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--sec-tone, var(--text-secondary));
  background: color-mix(in srgb, var(--sec-tone, var(--text-muted)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--sec-tone, var(--text-muted)) 40%, transparent);
}
.sec-note {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.sec-mono { font-family: var(--font-mono); }

.sec-panel-out .btn-copy-inline,
.sec-panel-code .btn-copy-inline {
  margin-top: var(--space-2);
}

/* Code block (recovery codes, UUID lists) */
.sec-code {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-gray-900);
  color: var(--ink-200);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  white-space: pre;
}

/* Checklist (policy checks) */
.sec-checklist { list-style: none; padding: 0; margin: 0; }
.sec-checklist li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.sec-checklist li:last-child { border-bottom: none; }

/* Table (character breakdown, crack-time rows) */
.sec-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.sec-table th,
.sec-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}
.sec-table thead th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.sec-table tbody tr:hover { background: var(--bg-secondary); }

/* ===========================================================================
   Text / Date-time / Education / Miscellaneous tool panels.
   Shared visual language: stat tiles, output boxes, meters, tables, big values.
   =========================================================================== */

/* Shared tone tokens */
.edu-tone-good,.misc-tone-good,.dt-tone-good { --tt-tone: var(--color-success); }
.edu-tone-warn { --tt-tone: var(--color-warning); }
.edu-tone-bad,.misc-tone-bad { --tt-tone: var(--color-error); }
.dt-tone-muted { --tt-tone: var(--text-muted); }

/* Stat tile grids (txt/dt/edu/misc share the look) */
.txt-tiles,.dt-tiles,.edu-tiles,.misc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0;
}
.txt-tile,.dt-tile,.edu-tile,.misc-tile {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
  text-align: center;
}
.txt-stat,.dt-stat,.edu-stat,.misc-stat {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.txt-tile small,.dt-tile small,.edu-tile small,.misc-tile small {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Output / code boxes */
.txt-out,.misc-code {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-gray-900);
  color: var(--ink-200);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Big single value (dates, times, results) */
.dt-big,.misc-big {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  word-break: break-word;
}
.dt-tone-good,.misc-tone-good { color: var(--color-success); }
.dt-tone-muted { color: var(--text-muted); }
.misc-tone-bad { color: var(--color-error); }

/* Score dial (education) */
.edu-score {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1;
  color: var(--tt-tone, var(--color-primary));
  margin-bottom: var(--space-2);
}
.edu-score-label { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-secondary); }

/* Meters (education) */
.edu-meter { height: 10px; border-radius: var(--border-radius-full); background: var(--bg-tertiary); overflow: hidden; margin: var(--space-2) 0; }
.edu-meter-fill { height: 100%; border-radius: var(--border-radius-full); background: var(--tt-tone, var(--color-primary)); transition: width var(--transition-base); }

/* Notes / errors */
.txt-note,.dt-note,.edu-note,.misc-note { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.5; }
.txt-error,.dt-error,.edu-error,.misc-error { color: var(--color-error); font-weight: 500; margin: 0; }
/* Shared download button for tool results (QR, barcode, image, PDF outputs).
   Self-contained so it reads correctly whether or not .btn classes are also
   present — the old .misc-dl forced blue text, which turned invisible on the
   blue .btn-primary background. */
.misc-dl,
.result-download-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff !important;          /* wins over .btn-primary and legacy rules */
  font-weight: 600;
  font-size: var(--font-size-sm);
  border: none;
  border-radius: var(--border-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.misc-dl:hover,
.result-download-btn:hover { background: var(--color-primary-dark); }
.misc-dl::before,
.result-download-btn::before { content: "⬇"; font-size: 0.95em; }

/* Tables (edu/misc) */
.edu-tablewrap,.misc-tablewrap { overflow-x: auto; }
.edu-table,.misc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.edu-table th,.edu-table td,.misc-table th,.misc-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); text-align: left; }
.edu-table thead th,.misc-table thead th { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.edu-table tbody tr:hover,.misc-table tbody tr:hover { background: var(--bg-secondary); }
.misc-mono { font-family: var(--font-mono); }

/* Misc specifics */
.misc-dice { font-size: var(--font-size-4xl); line-height: 1.2; margin-bottom: var(--space-2); }
.misc-seq { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--text-secondary); word-break: break-word; margin-top: var(--space-2); }
.misc-qr,.misc-barcode { max-width: 100%; height: auto; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: #fff; padding: var(--space-2); }

/* ===========================================================================
   File dropzone — drag-and-drop upload for PDF / image tools.
   Rendered by calculator-engine.js for every field of type 'file'.
   =========================================================================== */
.file-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-lg);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.file-dropzone:hover { border-color: var(--color-primary); background: var(--bg-tertiary); }
.file-dropzone.is-dragover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.file-dropzone.has-file { border-style: solid; border-color: var(--color-success); }
.file-dropzone-icon {
  font-size: var(--font-size-2xl);
  color: var(--color-accent-text);
  line-height: 1;
}
.file-dropzone-text { color: var(--text-primary); font-size: var(--font-size-sm); }
.file-dropzone-text strong { color: var(--color-accent-text); }
.file-dropzone-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Hide the native input but keep it accessible/clickable via the label. */
.file-dropzone .file-input-native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0);
}
.file-dropzone-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--border-radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
}
.file-chip em { color: var(--text-muted); font-style: normal; }

/* ===========================================================================
   PDF visual editor (assets/js/pdf-editor.js) — Sejda-style thumbnail grid.
   =========================================================================== */
.pdfx { width: 100%; }

/* Dropzone */
.pdfx-drop {
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-lg);
  background: var(--bg-secondary);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pdfx-drop.is-over { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.pdfx-drop-icon { font-size: var(--font-size-5xl); }
.pdfx-drop-title { font-size: var(--font-size-lg); font-weight: 700; margin-top: var(--space-2); color: var(--text-primary); }
.pdfx-drop-sub { color: var(--text-muted); margin: var(--space-2) 0; }
.pdfx-drop-note { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-3); }
.pdfx-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Toolbar */
.pdfx-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-4);
}
.pdfx-toolbar-title { font-size: var(--font-size-lg); color: var(--text-primary); }
.pdfx-toolbar-right { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Interval bar */
.pdfx-interval { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent); padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); }
.pdfx-interval-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); }
.pdfx-interval-input { flex: 1; min-width: 160px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md); background: var(--bg-primary); color: var(--text-primary); }

/* Grid */
.pdfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }
.pdfx-card {
  position: relative; border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
  background: var(--bg-primary); padding: var(--space-2); cursor: grab; transition: box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.pdfx-card:hover { box-shadow: var(--shadow-md); }
.pdfx-card.is-dragging { opacity: 0.4; cursor: grabbing; }
.pdfx-card.is-dropto { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pdfx-card.is-deleted { opacity: 0.45; }
.pdfx-card.is-deleted .pdfx-thumb img { filter: grayscale(1); }
.pdfx-card.is-deleted::after {
  content: "Deleted"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg);
  background: var(--color-error); color: #fff; font-size: var(--font-size-xs); font-weight: 700;
  padding: 2px var(--space-2); border-radius: var(--border-radius-sm); pointer-events: none;
}
.pdfx-card.is-selected { outline: 2px solid var(--color-success); outline-offset: 1px; }

.pdfx-thumb { position: relative; background: var(--bg-tertiary); border-radius: var(--border-radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; }
.pdfx-thumb img { max-width: 100%; max-height: 100%; display: block; background: #fff; transition: transform var(--transition-base); }

/* Always visible (dimmed) - hover-only hid the delete/rotate buttons from
   anyone who did not think to hover, and from every touch screen. */
.pdfx-card-actions {
  position: absolute; top: var(--space-1); right: var(--space-1); display: flex; gap: 4px; opacity: 0.75;
  transition: opacity var(--transition-fast);
}
.pdfx-card:hover .pdfx-card-actions, .pdfx-card:focus-within .pdfx-card-actions { opacity: 1; }
.pdfx-remove { font-size: var(--font-size-xs); padding: 2px 8px; line-height: 1.4; }
.pdfx-card.is-deleted .pdfx-remove { color: var(--color-success); }
.pdfx-filetag { font-size: var(--font-size-xs); color: var(--text-muted); background: var(--surface-2, var(--bg-secondary)); border-radius: 4px; padding: 1px 6px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdfx-iconbtn {
  width: 28px; height: 28px; border-radius: var(--border-radius-full); border: none;
  background: rgba(13, 16, 21, 0.82); color: #fff; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pdfx-iconbtn:hover { background: var(--color-primary); }
.pdfx-iconbtn.pdfx-del:hover { background: var(--color-error); }

.pdfx-card-foot { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); }
.pdfx-pagenum { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 600; }
.pdfx-check { width: 16px; height: 16px; accent-color: var(--color-success); }

/* Apply bar */
.pdfx-applybar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--bg-primary); border-top: 1px solid var(--border-color); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
.pdfx-count { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 600; }
.pdfx-apply { min-width: 180px; }
.pdfx-apply:disabled { opacity: 0.5; cursor: not-allowed; }

.pdfx-status { margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); }
.pdfx-status-ok { color: var(--color-success); font-weight: 600; }
.pdfx-status-bad { color: var(--color-error); font-weight: 600; }

/* PDF editor thumbnail placeholders (shown until pdf.js renders the page) */
.pdfx-thumb-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-2xl); font-weight: 800; color: var(--text-muted);
  background: var(--bg-tertiary); pointer-events: none;
}
.pdfx-thumb img { position: relative; z-index: 1; }
.pdfx-thumb img.pdfx-thumb-loading { display: none; }   /* keep placeholder visible */
.pdfx-thumb img[src^="data:"] + .pdfx-thumb-ph { display: none; } /* hide once rendered */
.pdfx-thumb-failed { background: repeating-linear-gradient(45deg, var(--bg-tertiary), var(--bg-tertiary) 8px, var(--bg-secondary) 8px, var(--bg-secondary) 16px); }

/* PDF editor — simple control panel (compress / protect) */
.pdfx-panel { max-width: 640px; }
.pdfx-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: var(--border-radius-md); margin-bottom: var(--space-5); }
.pdfx-panel-file { font-weight: 600; color: var(--text-primary); word-break: break-all; }
.pdfx-controls { display: flex; flex-direction: column; gap: var(--space-5); }
.pdfx-field { display: flex; flex-direction: column; gap: var(--space-2); }
.pdfx-label { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); }
.pdfx-select, .pdfx-input {
  width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md); background: var(--bg-primary); color: var(--text-primary); font-size: var(--font-size-base);
}
.pdfx-hint { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.5; }
.pdfx-pw-strength { font-weight: 500; }
.pdfx-perms { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.pdfx-perm { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; }
.pdfx-perm input { accent-color: var(--color-primary); }

/* Newsletter signup status message (assets/js/newsletter.js) */
.newsletter-msg {
  margin: var(--space-3) auto 0;
  max-width: 420px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  min-height: 1.2em;
}
.newsletter-msg.is-ok { color: #fff; font-weight: 600; }
.newsletter-msg.is-bad {
  color: #fff;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--border-radius-md);
  padding: var(--space-2) var(--space-3);
}
.newsletter-box button[disabled] { opacity: 0.7; cursor: wait; }

/* ===========================================================================
   DARK MODE surface fixes
   ---------------------------------------------------------------------------
   Several components (code editors, diff/JSON studios, timestamp cards, image
   studio) hardcode light backgrounds (#fff / var(--color-slate-50) /
   var(--color-slate-100)). Text colour comes from the text tokens, which flip
   to near-white in dark mode, so those panels rendered near-white-on-white.
   These overrides map every such surface onto the dark ink ramp.
   =========================================================================== */
[data-theme="dark"] {
  /* Editor/panel surfaces, from lightest to deepest */
  --surface-1: var(--ink-900);   /* panel background      (light: white)   */
  --surface-2: var(--ink-925);   /* deeper inset / code   (light: ink-050) */
  --surface-3: var(--ink-950);   /* gutters / rails       (light: ink-100) */
}

/* --- code editors & result boxes ----------------------------------------- */
[data-theme="dark"] body.category-developer .calculator-form textarea,
[data-theme="dark"] .result-code-box,
[data-theme="dark"] .result-code-footer {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--border-hairline);
}

/* --- developer editor / JSON studio -------------------------------------- */
[data-theme="dark"] body.category-developer .calc-layout-editor .calc-right,
[data-theme="dark"] body.category-developer .json-studio-pane,
[data-theme="dark"] body.category-developer .code-with-lines,
[data-theme="dark"] body.category-developer .code-highlight-view,
[data-theme="dark"] body.category-developer .json-tree-view,
[data-theme="dark"] body.category-developer .json-studio-controls select,
[data-theme="dark"] body.category-developer .calc-layout-diff .calc-diff-left {
  background: var(--surface-1);
  color: var(--text-strong);
}
[data-theme="dark"] body.category-developer .code-line-numbers {
  background: var(--surface-3);
  color: var(--text-muted);
}

/* --- diff studio ---------------------------------------------------------- */
[data-theme="dark"] .diff-studio { background: var(--surface-3); border-color: var(--border-hairline); }
[data-theme="dark"] .diff-studio-topbar,
[data-theme="dark"] .diff-studio-view,
[data-theme="dark"] .diff-pane-body,
[data-theme="dark"] .diff-studio-controls,
[data-theme="dark"] .diff-studio-edit {
  background: var(--surface-1);
  color: var(--text-strong);
  border-color: var(--border-hairline);
}
[data-theme="dark"] .diff-pane-divider,
[data-theme="dark"] .diff-pane-header,
[data-theme="dark"] .diff-gutter {
  background: var(--surface-2);
  color: var(--text-body);
  border-color: var(--border-hairline);
}
[data-theme="dark"] .diff-row-remove { background: var(--coral-950); }
[data-theme="dark"] .diff-row-remove .diff-gutter { background: var(--coral-950); }
[data-theme="dark"] .diff-row-add { background: var(--mint-950); }
[data-theme="dark"] .diff-row-add .diff-gutter { background: var(--mint-950); }
[data-theme="dark"] .diff-row-remove .diff-sign { color: var(--coral-400); }
[data-theme="dark"] .diff-row-add .diff-sign { color: var(--mint-500); }

/* --- image studio --------------------------------------------------------- */
[data-theme="dark"] .calc-layout-image-studio .image-studio-right .rich-result,
[data-theme="dark"] .calc-layout-image-studio .image-mode-card {
  background: var(--surface-1);
  color: var(--text-strong);
}
[data-theme="dark"] .calc-layout-image-studio .result-tab { background: var(--surface-2); }
[data-theme="dark"] .result-image-card { background: var(--surface-2); }

/* --- timestamp studio ----------------------------------------------------- */
[data-theme="dark"] .ts-unit,
[data-theme="dark"] .ts-live,
[data-theme="dark"] .ts-card,
[data-theme="dark"] .ts-tz-btn.is-active {
  background: var(--surface-1);
  color: var(--text-strong);
}
[data-theme="dark"] .ts-feat-card,
[data-theme="dark"] .ts-mode-to-unix .ts-feat-card { background: var(--surface-2); color: var(--text-strong); }
[data-theme="dark"] .ts-tz-toggle { background: var(--surface-3); }

/* --- generated images keep a white plate (a QR/barcode must stay scannable,
       and photos shouldn't sit on a dark card edge-to-edge) ----------------- */
[data-theme="dark"] .misc-qr,
[data-theme="dark"] .misc-barcode,
[data-theme="dark"] .result-preview-image { background: #fff; }

/* --- dark mode: text colours that were hardcoded dark --------------------- */
[data-theme="dark"] .diff-studio-title,
[data-theme="dark"] body.category-developer .code-highlight-view,
[data-theme="dark"] body.category-developer .json-fold-btn:hover,
[data-theme="dark"] .calc-layout-image-studio .image-dropzone-title,
[data-theme="dark"] .ts-tz-btn.is-active,
[data-theme="dark"] .ts-feat-value,
[data-theme="dark"] .ts-live-label,
[data-theme="dark"] .ts-live-value,
[data-theme="dark"] .ts-field-label,
[data-theme="dark"] .ts-results-title,
[data-theme="dark"] .ts-val code {
  color: var(--text-strong);
}

[data-theme="dark"] .diff-stat,
[data-theme="dark"] .diff-studio-toggles,
[data-theme="dark"] .diff-studio-edit-label,
[data-theme="dark"] .calc-layout-image-studio .result-tab,
[data-theme="dark"] .ts-live-clock,
[data-theme="dark"] .ts-date-grid label {
  color: var(--text-body);
}

/* JSON tree syntax on a dark editor: the brighter ends of the same ramps. */
[data-theme="dark"] body.category-developer .json-key    { color: var(--ink-400); }
[data-theme="dark"] body.category-developer .json-string { color: var(--mint-500); }
[data-theme="dark"] body.category-developer .json-number { color: var(--cobalt-300); }
[data-theme="dark"] body.category-developer .json-bool   { color: var(--violet-300); }
[data-theme="dark"] body.category-developer .json-null   { color: var(--ink-400); }

/* Timestamp studio mode labels. */
[data-theme="dark"] .ts-mode-both .ts-lab,
[data-theme="dark"] .ts-mode-to-date .ts-lab,
[data-theme="dark"] .ts-mode-to-unix .ts-lab   { color: var(--cobalt-300); }

/* Image studio: labels and hints inside panels that are now dark. */
[data-theme="dark"] .calc-layout-image-studio label,
[data-theme="dark"] .calc-layout-image-studio strong,
[data-theme="dark"] .calc-layout-image-studio .image-dropzone-title { color: var(--text-strong); }
[data-theme="dark"] .calc-layout-image-studio .file-dropzone-hint,
[data-theme="dark"] .calc-layout-image-studio .image-dropzone-hint { color: var(--text-body); }
[data-theme="dark"] .file-dropzone-icon,
[data-theme="dark"] .image-dropzone-icon { color: var(--cobalt-300); }

[data-theme="dark"] .calc-layout-image-studio .image-studio-left,
[data-theme="dark"] .calc-split-image .image-studio-left {
  background: var(--surface-1);
}

/* --- status tones ----------------------------------------------------------
   Badge text on a 14% tint of its own tone needs the darker text shade in
   light mode and the brighter solid in dark mode (both from variables.css). */
.seo-tone-good { --seo-tone: var(--status-success-text); }
.seo-tone-warn { --seo-tone: var(--status-warning-text); }
.seo-tone-bad  { --seo-tone: var(--status-danger-text); }
.sec-tone-good { --sec-tone: var(--status-success-text); }
.sec-tone-warn { --sec-tone: var(--status-warning-text); }
.sec-tone-bad  { --sec-tone: var(--status-danger-text); }
/* Meter fills are large blocks, so keep them the solid status colour. */
.seo-meter-fill.seo-tone-good, .sec-meter-fill.sec-tone-good { background: var(--status-success); }
.seo-meter-fill.seo-tone-warn, .sec-meter-fill.sec-tone-warn { background: var(--status-warning); }
.seo-meter-fill.seo-tone-bad,  .sec-meter-fill.sec-tone-bad  { background: var(--status-danger); }

/* Editor line numbers: AA-tuned subtle text. */
body.category-developer .code-line-numbers { color: var(--text-subtle); }

/* ---------------------------------------------------------------- fact-list
   Definition list used by the variant-facts sections (loan product notes,
   investment considerations). Term on top, explanation indented below. */

.content-section .fact-list {
  margin: 0 0 var(--space-6);
}

.content-section .fact-list dt {
  margin-top: var(--space-4);
  font-weight: 700;
  color: var(--text-primary);
}

.content-section .fact-list dt:first-child {
  margin-top: 0;
}

.content-section .fact-list dd {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  border-left: 2px solid var(--border-color);
}

/* Variant-facts tables use a header column rather than a header row. */
.content-section .data-table tbody th {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--text-primary);
}

/* =========================================================================
   Image dropzone fixes
   ------------------------------------------------------------------------
   1. The dropzone background was a hardcoded near-white gradient with no dark
      override, while the dark theme DID lighten its text. Result: white text
      on a white gradient at 1.04:1 - completely unreadable. The text override
      made the bug worse rather than better, so the surface has to move too.
   2. The visually-hidden native file input was only clipped inside
      .calc-layout-image-studio / .json-studio. On pages that use the dropzone
      outside those containers it rendered full-width and pushed the document
      513px wider than the viewport.
   ========================================================================= */

[data-theme="dark"] .image-dropzone {
  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border-color: var(--border-color);
}

[data-theme="dark"] .image-dropzone.is-dragover,
[data-theme="dark"] .image-dropzone.has-file {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border-color: var(--color-accent-text);
}

[data-theme="dark"] .image-dropzone-title {
  color: var(--text-primary);
}

[data-theme="dark"] .image-dropzone-hint {
  color: var(--text-secondary);
}

/* Clip the hidden file input wherever it appears, not only inside the studio
   layouts. Without this it is a full-width block and causes page overflow. */
.image-file-input-hidden,
input[type="file"].image-file-input-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The hint sits on the dropzone's light gradient (#eff6ff at the top), where
   var(--color-slate-500) measured 4.37:1 - just under AA. var(--color-slate-600) clears both gradient stops. */
.image-dropzone-hint,
.calc-layout-image-studio .image-dropzone-hint {
  color: var(--color-slate-600);
}

/* ---- PDF advanced tools: image / page grids inside result panels ---- */
.pdf-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.pdf-page-card { margin: 0; border: 1px solid var(--border-color); border-radius: 8px; padding: var(--space-2); background: var(--surface-1, var(--bg-secondary)); text-align: center; }
.pdf-page-card img { display: block; width: 100%; height: auto; border: 1px solid var(--border-color); background: #fff; }
.pdf-page-card figcaption { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--space-2); line-height: 1.6; }
.pdf-page-card figcaption .btn { margin-top: var(--space-1); }
.pdf-dl-all { margin: 0 0 var(--space-3); }

/* ---- Image advanced tools: tile grids, palette swatches, metadata table ---- */
.img-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.img-tile { margin: 0; border: 1px solid var(--border-color); border-radius: 8px; padding: var(--space-2); background: var(--surface-1, var(--bg-secondary)); text-align: center; }
.img-tile img { display: block; width: 100%; height: auto; border: 1px solid var(--border-color); background: repeating-conic-gradient(var(--ink-200) 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.img-tile figcaption { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: var(--space-2); line-height: 1.6; word-break: break-all; }
.img-tile figcaption .btn { margin-top: var(--space-1); }
.img-tile-ico { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--border-color); border-radius: 6px; font-weight: 800; letter-spacing: 0.1em; color: var(--text-secondary); background: var(--surface-2, var(--bg-secondary)); }
.img-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.img-swatch { border-radius: 8px; padding: var(--space-3); min-height: 84px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-size: var(--font-size-sm); border: 1px solid rgba(0,0,0,0.08); }
.img-swatch strong { font-family: var(--font-mono); font-size: var(--font-size-base); }
.img-meta-table th { text-align: left; white-space: nowrap; width: 38%; }

/* ---- PDF result section: preview first, download on click ---- */
.pdfx-result { margin-top: var(--space-5); padding: var(--space-4); border: 2px solid var(--color-success); border-radius: var(--border-radius-md); background: var(--surface-1, var(--bg-secondary)); }
.pdfx-result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.pdfx-result-head strong { font-size: var(--font-size-lg); }
.pdfx-result-meta { font-size: var(--font-size-sm); color: var(--text-secondary); }
.pdfx-result-actions { margin: var(--space-2) 0 var(--space-3); }
.pdfx-result-thumbs .pdfx-card { cursor: default; }
.pdfx-card-static .pdfx-card-actions { display: none; }
.pdf-download-btn { margin-right: var(--space-2); }
.pdf-result-meta { font-size: var(--font-size-sm); color: var(--text-secondary); }

/* ---- Image results: picture + Download first, code tabs collapsed ---- */
.result-code-details { margin-top: var(--space-4); border: 1px solid var(--border-color); border-radius: 8px; padding: 0 var(--space-3) var(--space-2); }
.result-code-details summary { cursor: pointer; padding: var(--space-3) 0; font-weight: 600; color: var(--text-secondary); }
.result-code-details[open] summary { border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-3); }
.result-image-inline .result-download-btn.btn-primary { font-size: var(--font-size-base); padding: var(--space-2) var(--space-5); }

/* ================= JSON workbench (redesign of the json-studio layout) =================
   Forge: one card. A band-coloured action bar (pill tabs for the actions,
   options and ghost buttons to the right), the input pane on white, the
   output pane on the band, and a near-black mono stats strip underneath. */
body.category-developer .json-studio.json-workbench {
  display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0;
  background: var(--surface-card) !important; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
}
body.category-developer .json-studio-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.875rem var(--space-4); background: var(--surface-band); border-bottom: 1px solid var(--border-hairline); }
body.category-developer .json-studio-bar-left, body.category-developer .json-studio-bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
body.category-developer .json-studio-bar .btn { font-size: var(--text-sm); padding: 0.4375rem var(--space-4); border-radius: var(--radius-pill); line-height: 1.3; }
/* Action buttons behave as pill tabs: the active one is filled ink. */
body.category-developer .json-studio-primary { background: var(--action-neutral); color: var(--action-neutral-text); border: 1px solid transparent; font-weight: var(--weight-semibold); box-shadow: none; }
body.category-developer .json-studio-primary:hover { background: var(--action-neutral-hover); color: var(--action-neutral-text); transform: none; }
body.category-developer .json-studio-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; box-shadow: none; }
body.category-developer .json-studio-ghost:hover { background: var(--action-ghost-hover); color: var(--text-strong); }
body.category-developer .json-studio-bar-right .json-studio-ghost { color: var(--text-strong); border-color: var(--border-strong); background: var(--surface-card); }
body.category-developer .json-studio-bar-right .json-studio-ghost:hover { background: var(--action-ghost-hover); }
body.category-developer .json-studio-options { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
body.category-developer .json-studio-options .form-group { margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
body.category-developer .json-studio-options .form-group[hidden] { display: none; }
body.category-developer .json-studio-options label, body.category-developer .json-studio-options .field-label-row { font-size: var(--text-xs); color: var(--text-muted); margin: 0; white-space: nowrap; font-weight: var(--weight-semibold); }
body.category-developer .json-studio-options .field-label-row .field-unit, body.category-developer .json-studio-options .form-hint, body.category-developer .json-studio-options .range-slider-wrap { display: none; }
body.category-developer .json-studio-options select, body.category-developer .json-studio-options input[type="text"], body.category-developer .json-studio-options input[type="number"] {
  background-color: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 2rem 0 0.625rem; min-height: var(--control-h-sm); font-family: var(--font-mono); font-size: var(--text-xs); min-width: 0; width: auto; max-width: 220px; height: auto; box-shadow: none;
}
body.category-developer .json-studio-options input[type="text"], body.category-developer .json-studio-options input[type="number"] { padding-right: 0.625rem; }
body.category-developer .json-studio-options .form-group.is-inert { opacity: 0.45; }
body.category-developer .json-studio-error { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding: 0.625rem var(--space-4); background: var(--status-danger-soft); color: var(--status-danger-text); font-size: var(--text-sm); border-bottom: 1px solid var(--border-hairline); }
body.category-developer .json-studio-error strong { color: var(--text-strong); }
body.category-developer .json-studio-error[hidden] { display: none; }
body.category-developer .json-studio-error-pos { margin-left: auto; font-family: var(--font-mono); color: var(--status-danger-text); }
body.category-developer .json-workbench .calculator-error { margin: 0; border-radius: 0; }
body.category-developer .json-studio-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--border-hairline); min-height: 560px; }
body.category-developer .json-workbench .json-studio-pane { background: var(--surface-card); border: 0; border-radius: 0; min-height: 560px; }
body.category-developer .json-workbench .json-studio-output { background: var(--surface-band); }
body.category-developer .json-workbench .json-studio-toolbar { background: transparent; border-bottom: 1px solid var(--border-hairline); color: var(--text-body); padding: 0.5rem 0.875rem; gap: var(--space-2); flex-wrap: wrap; min-height: 2.75rem; }
body.category-developer .json-workbench .json-studio-title { font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
body.category-developer .json-workbench .json-studio-toolbar .btn { background: var(--surface-card); border: 1px solid var(--border-strong); color: var(--text-strong); font-size: var(--text-xs); padding: 0.3125rem 0.75rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); }
body.category-developer .json-workbench .json-studio-toolbar .btn:hover { background: var(--action-ghost-hover); color: var(--text-strong); }
body.category-developer .json-workbench .json-studio-toolbar .btn[hidden] { display: none; }
body.category-developer .json-workbench .json-studio-toolbar .is-active-view { background: var(--action-neutral); border-color: var(--action-neutral); color: var(--action-neutral-text); }
body.category-developer .json-studio-validity, body.category-developer .json-workbench .json-studio-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-body); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0.25rem; }
body.category-developer .json-studio-validity.is-ok, body.category-developer .json-workbench .json-studio-status.is-ok { background: var(--status-success-soft); color: var(--status-success-text); }
body.category-developer .json-studio-validity.is-error, body.category-developer .json-workbench .json-studio-status.is-error { background: var(--status-danger-soft); color: var(--status-danger-text); }
body.category-developer .json-studio-validity.is-ok::before, body.category-developer .json-workbench .json-studio-status.is-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
body.category-developer .json-studio-subhead { padding: 0.3125rem 0.875rem; font-family: var(--font-mono); font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-medium); color: var(--text-muted); background: var(--surface-band); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
body.category-developer .json-workbench .json-studio-pane .calc-inputs { flex: 1; display: flex; flex-direction: column; }
body.category-developer .json-workbench .json-studio-pane .form-group { flex: 1 1 0; min-height: 160px; }
body.category-developer .json-workbench .code-with-lines { min-height: 200px; flex: 1; background: transparent; }
body.category-developer .json-studio-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: 0.75rem var(--space-4); background: var(--surface-inverse); border-top: 1px solid var(--border-hairline); font-size: var(--text-xs); color: var(--ink-300); font-family: var(--font-mono); }
body.category-developer .json-studio-stats { display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
body.category-developer .json-studio-stats span + span::before { content: '\00B7'; margin: 0 0.5rem; color: var(--ink-500); }
body.category-developer .json-studio-stats strong { color: #fff; font-weight: var(--weight-semibold); }
body.category-developer .json-studio-pane.is-wrapped .code-highlight-view, body.category-developer .json-studio-pane.is-wrapped textarea.code-editor-lined { white-space: pre-wrap; word-break: break-word; }
body.category-developer .json-workbench.is-fullscreen { position: fixed; inset: 0; z-index: 1000; border-radius: 0; }
body.category-developer .json-workbench.is-fullscreen .json-studio-panes { flex: 1; min-height: 0; }
body.category-developer .json-workbench.is-fullscreen .json-studio-pane { min-height: 0; }
body.json-studio-fullscreen { overflow: hidden; }
body.category-developer .code-line-numbers .ln { display: inline-block; width: 100%; }
body.category-developer .code-line-numbers .ln.is-error { background: var(--status-danger-soft); color: var(--status-danger-text); font-weight: 700; }
/* Syntax: the design's tree palette. Strings mint, numbers cobalt, booleans
   violet, null subtle; keys stay in the muted text colour. */
body.category-developer .code-str { color: var(--mint-700); }
body.category-developer .code-num { color: var(--cobalt-600); }
body.category-developer .code-kw { color: var(--violet-500); font-weight: 600; }
body.category-developer .code-cmt { color: var(--text-subtle); font-style: italic; }
body.category-developer .code-tag { color: var(--cobalt-600); }
body.category-developer .code-attr { color: var(--amber-700); }
body.category-developer .code-key { color: var(--text-muted); }
[data-theme="dark"] body.category-developer .json-workbench .json-studio-pane { background: var(--surface-card); }
[data-theme="dark"] body.category-developer .json-workbench .json-studio-output { background: var(--surface-band); }
[data-theme="dark"] body.category-developer .code-str { color: var(--mint-500); }
[data-theme="dark"] body.category-developer .code-num { color: var(--cobalt-300); }
[data-theme="dark"] body.category-developer .code-kw { color: var(--violet-300); }
[data-theme="dark"] body.category-developer .code-tag { color: var(--cobalt-300); }
[data-theme="dark"] body.category-developer .code-attr { color: var(--amber-400); }
[data-theme="dark"] body.category-developer .code-key { color: var(--ink-400); }
@media (max-width: 900px) {
  body.category-developer .json-studio-panes { grid-template-columns: minmax(0, 1fr); }
  body.category-developer .json-workbench .json-studio-pane { min-height: 360px; }
  body.category-developer .json-studio-full { display: none; }
}

/* ==========================================================================
   Sep 2026 SEO audit: answer capsule, hero trust line, read-next, charts,
   grouped hubs, reviewer byline, embed mode, layout-shift reservations
   ========================================================================== */

/* Answer capsule: the direct answer, on the brand-soft tint. */
.answer-capsule {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-strong);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) 1.125rem;
  margin-bottom: var(--space-4);
  max-width: var(--measure-prose);
}

.content-section p.answer-capsule {
  color: var(--text-strong);
}

/* Trust facts. On a tool page build-shell.js folds them into the byline row
   (.tool-head-meta); anywhere else they read as small neutral tags. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.hero-badges span {
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  color: var(--text-body);
}

/* "Read next": a brand-soft CTA row pointing at the explainer post. */
.read-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-6) 0 var(--space-10);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-card);
  background: var(--surface-brand-soft);
  max-width: var(--measure-prose);
}

.read-next span {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-highlight);
  margin-right: var(--space-1);
}

.read-next a {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.read-next a:hover {
  color: var(--text-link);
}

/* Chart marks follow the series order: chart-1 first. */
.example-chart {
  margin: var(--space-6) 0 0;
  padding: var(--card-pad);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.example-chart svg,
.bmi-bands svg { width: 100%; height: auto; display: block; }
.example-chart .chart-grid { stroke: var(--border-hairline); stroke-width: 1; }
.example-chart .chart-tick,
.bmi-bands .band-label { fill: var(--text-muted); font-size: 12px; font-family: var(--font-mono); }
/* --text-link, not --action-primary: the line is the page's one data mark,
   and the link token is the one tuned for contrast on both themes. */
.example-chart .chart-line { stroke: var(--text-link); stroke-width: 2.5; stroke-linejoin: round; }
.example-chart .chart-area { fill: var(--chart-1); opacity: 0.12; }
.example-chart figcaption,
.bmi-bands figcaption { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-3); }
.bmi-bands { margin: var(--space-4) 0; }
.bmi-bands .band-1 { fill: var(--band-1); }
.bmi-bands .band-2 { fill: var(--band-2); }
.bmi-bands .band-3 { fill: var(--band-3); }
.bmi-bands .band-4 { fill: var(--band-4); }
.bmi-bands .band-5 { fill: var(--band-5); }
.bmi-bands .band-6 { fill: var(--band-6); }
.bmi-bands .marker { stroke: var(--text-strong); stroke-width: 2; }
.bmi-bands .marker-label { fill: var(--text-strong); font-size: 13px; font-weight: 600; font-family: var(--font-sans); }
.sources { font-size: var(--text-sm); color: var(--text-muted); }
.sources a { color: var(--text-link); }

/* DataTable: header row on the band, uppercase and tracked; numbers mono. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-4) 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table caption {
  caption-side: top;
  text-align: left;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-band);
  border-bottom: 1px solid var(--border-hairline);
}

.data-table th,
.data-table td {
  padding: 0.6875rem 0.875rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-body);
}

.data-table thead th {
  background: var(--surface-band);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.data-table tbody tr:nth-child(even) {
  background: var(--surface-band);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody th {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  white-space: nowrap;
}

/* Result figures in the worked-example table are wrapped in <strong>. */
.data-table td strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.hub-lede {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: var(--measure-lede);
  margin: 0;
}
/* Keyword emphasis in the lede. Full text colour against the body grey, not
   the link blue: these are terms, not links, and colouring them like links
   invites a click that does nothing. */
.hub-lede strong {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
.tools-group { margin-bottom: var(--space-10); scroll-margin-top: var(--space-6); }
.tools-group[hidden] { display: none; }
.tools-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-h4);
  margin: 0 0 var(--space-4);
  padding-bottom: 0;
  border-bottom: 0;
}
.tools-group-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 0;
}

.reviewed-by a { color: var(--text-link); }

/* Reserve the calculator's space until the engine renders the form, so the
   prose below it does not jump (the largest remaining shift after the header
   was inlined). */
#calculator-container:empty { min-height: 320px; }

/* "On this page" jump strip under the calculator (build-shell.js). */
.jump-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-8);
  padding: 0.875rem var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  background: var(--surface-band);
}

.jump-links-label {
  margin-right: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.jump-links a {
  padding: 5px 12px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  color: var(--text-body);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-control);
}

.jump-links a:hover {
  border-color: var(--border-brand);
  color: var(--text-link);
  text-decoration: none;
}

@media (max-width: 640px) {
  .hero-compact p:not(.hero-badges) {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Embed mode (?embed=1): calculator only, plus a credit link */
html[data-embed] .site-header,
html[data-embed] .mobile-menu,
html[data-embed] .hero,
html[data-embed] .breadcrumb,
html[data-embed] .tool-meta,
html[data-embed] .tool-actions,
html[data-embed] .ad-block,
html[data-embed] .content-section,
html[data-embed] .jump-links,
html[data-embed] .read-next,
html[data-embed] .author-box,
html[data-embed] .sidebar,
html[data-embed] .site-footer,
html[data-embed] #footer-component,
html[data-embed] .yt-consent,
html[data-embed] .skip-link { display: none !important; }
html[data-embed] body { background: var(--surface-page); }
html[data-embed] .page-layout.with-sidebar { grid-template-columns: 1fr; padding: var(--space-2); }
html[data-embed] .calculator-card { box-shadow: none; margin: 0; }
.embed-credit { font-size: var(--text-sm); text-align: right; margin: var(--space-2) 0 0; }
.embed-credit a { color: var(--text-link); }

/* Dialog: 20px radius, lifted shadow, scrim with a 3px blur. */
.embed-dialog {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: var(--card-pad-lg);
  max-width: 560px;
  width: calc(100% - 2rem);
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--shadow-lifted);
}
.embed-dialog::backdrop { background: rgba(13, 16, 21, 0.45); backdrop-filter: blur(3px); }
.embed-dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-h4); }
.embed-dialog p { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.embed-dialog textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-band);
  color: var(--text-strong);
}
.embed-dialog-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }


/* ==========================================================================
   "From Google Drive" picker button
   Rendered by CalculatorEngine.createDriveControl() next to every file
   dropzone, and only when site-config.js has Drive credentials. Neutral
   surface rather than a filled button: the disk dropzone stays the primary
   route, this is the alternative beside it.
   ========================================================================== */
.drive-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.drive-pick-btn {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.drive-pick-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--bg-secondary);
}

.drive-pick-btn:disabled { opacity: 0.65; cursor: progress; }

.drive-pick-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Progress and errors from the picker. Wording carries the meaning, colour
   only reinforces it, so it still reads without colour vision. */
.drive-pick-status {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--text-muted);
  text-align: center;
  max-width: 44ch;
}
.drive-pick-status.is-ok { color: var(--color-success); }
.drive-pick-status.is-bad { color: var(--color-error); font-weight: 600; }

/* Inline variant: sits in a row beside an existing button (the image studio
   dropzone, the PDF editor dropzone, the JSON workbench toolbar). */
.drive-pick-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0;
  vertical-align: middle;
}
.drive-pick-inline .drive-pick-status { text-align: left; }

.calc-layout-image-studio .image-dropzone .drive-pick-inline { margin-left: var(--space-2); }
.calc-layout-image-studio .image-dropzone .drive-pick-status { flex-basis: 100%; text-align: center; }

.pdfx-drop .drive-pick-inline { margin-left: var(--space-2); }
.pdfx-drop .drive-pick-status { flex-basis: 100%; text-align: center; margin-top: var(--space-2); }

.json-studio-bar .drive-pick-btn { font-size: var(--font-size-xs); }

@media (max-width: 480px) {
  .calc-layout-image-studio .image-dropzone .drive-pick-inline,
  .pdfx-drop .drive-pick-inline { margin: var(--space-2) 0 0; width: 100%; }
}

[data-theme="dark"] .drive-pick-btn {
  background: var(--surface-2, var(--bg-secondary));
  color: var(--text-primary);
  border-color: var(--border-color);
}
[data-theme="dark"] .drive-pick-btn:hover:not(:disabled) {
  background: var(--surface-3, var(--bg-tertiary));
  border-color: var(--color-accent-text);
}
[data-theme="dark"] .drive-pick-status { color: var(--text-secondary); }

/* Compare PDF: line diff inside a result panel. Red and green are carried by
   a leading - or + as well as by colour, so the diff still reads for anyone
   who cannot separate the two hues. */
.pdf-diff {
  margin: 0;
  overflow-x: auto;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.pdf-diff code { white-space: pre; }