/* ==========================================================================
   StudyKit tool shell: production integration
   ==========================================================================

   Scoped to .sk-tool-page, and loaded only on registered tool pages. The
   colours map onto the StudyKit 2026 tokens, so the tool follows the site's
   light/dark control instead of carrying a second palette.

   The Blocksy single-post template is left untouched. WordPress constrains
   direct children of .entry-content to 766px, so the wrapper opts out of that
   one constraint and centres itself at 1180px. Prose and the plugin-rendered
   FAQ stay narrower for readability.

   Nothing in this file styles an advert beyond its label and rule colour. The
   existing .sk-ad units keep their own placement rules.
   ========================================================================== */

body.sk-tool-ui .ct-container-full[data-vertical-spacing] {
  padding-top: 0;
}

body.sk-tool-ui .entry-content > .sk-crumbs {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 32px));
  max-width: none;
  margin: 18px auto 12px;
  padding: 0;
}

body.sk-tool-ui .entry-content > .sk-tool-page {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 32px));
  max-width: none;
  margin-inline: auto;
}

/* --------------------------------------------------------------- tokens ---- */

body.sk-tool-ui .sk-tool-page {
  --skc-canvas: var(--sk26-canvas, #faf9f6);
  --skc-surface: var(--sk26-surface, #ffffff);
  --skc-linen: var(--sk26-linen, #f1eee9);
  --skc-stone: var(--sk26-stone, #d3cec6);
  --skc-line: var(--sk26-hairline, #dedbd6);
  --skc-ink: var(--sk26-ink, #111111);
  --skc-ink-soft: var(--sk26-iron, #414141);
  --skc-muted: var(--sk26-muted, #6c6862);
  --skc-accent: var(--sk26-accent, #0007cb);
  --skc-accent-hover: var(--sk26-accent-hover, #0005a3);
  --skc-accent-soft: var(--sk26-accent-soft, #e9e9ff);
  --skc-accent-line: var(--sk26-accent-line, rgba(0, 7, 203, 0.26));
  --skc-success: #176b45;
  --skc-success-soft: #eaf6ef;
  --skc-success-line: #c8e6d5;
  --skc-danger: #a42828;
  --skc-warning: #8a5a00;
  --skc-radius: var(--sk26-radius, 4px);
  --skc-sans: var(--sk26-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --skc-mono: var(--sk26-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
  --skc-serif: var(--sk26-serif, "Iowan Old Style", Georgia, serif);

  color: var(--skc-ink);
  font-family: var(--skc-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-sk-scheme="dark"] body.sk-tool-ui .sk-tool-page {
  --skc-success: #78d6a6;
  --skc-success-soft: #14271d;
  --skc-success-line: #244b35;
  --skc-danger: #ff9b9b;
  --skc-warning: #e8b964;
}

body.sk-tool-ui .sk-tool-page *,
body.sk-tool-ui .sk-tool-page *::before,
body.sk-tool-ui .sk-tool-page *::after {
  box-sizing: border-box;
}

body.sk-tool-ui .sk-tool-page h1,
body.sk-tool-ui .sk-tool-page h2,
body.sk-tool-ui .sk-tool-page h3,
body.sk-tool-ui .sk-tool-page p,
body.sk-tool-ui .sk-tool-page ul,
body.sk-tool-ui .sk-tool-page ol,
body.sk-tool-ui .sk-tool-page dl,
body.sk-tool-ui .sk-tool-page dd {
  margin: 0;
}

body.sk-tool-ui .sk-tool-page h1,
body.sk-tool-ui .sk-tool-page h2,
body.sk-tool-ui .sk-tool-page h3 {
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

body.sk-tool-ui .sk-tool-page ul,
body.sk-tool-ui .sk-tool-page ol {
  padding: 0;
  list-style: none;
}

body.sk-tool-ui .sk-tool-page img,
body.sk-tool-ui .sk-tool-page svg {
  display: block;
  max-width: 100%;
}

body.sk-tool-ui .sk-tool-page button,
body.sk-tool-ui .sk-tool-page input,
body.sk-tool-ui .sk-tool-page textarea {
  font: inherit;
  color: inherit;
}

body.sk-tool-ui .sk-tool-page button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

body.sk-tool-ui .sk-tool-page a {
  color: var(--skc-accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

body.sk-tool-ui .sk-tool-page a:hover {
  color: var(--skc-accent-hover);
}

body.sk-tool-ui .sk-tool-page :focus-visible {
  outline: 2px solid var(--skc-accent);
  outline-offset: 3px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.sk-tool-ui .sk-tool-page [hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- intro ---- */

body.sk-tool-ui .sk-tool-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0 24px;
}

body.sk-tool-ui .sk-tool-intro-copy {
  min-width: 0;
  max-width: 760px;
}

body.sk-tool-ui .sk-tool-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-kicker-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--skc-accent);
  box-shadow: 0 0 0 3px var(--skc-accent-soft);
}

body.sk-tool-ui .sk-tool-title {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

body.sk-tool-ui .sk-tool-serif {
  color: var(--skc-accent);
  font-family: var(--skc-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

body.sk-tool-ui .sk-tool-lede {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--skc-ink-soft);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}

body.sk-tool-ui .sk-tool-lede strong {
  color: var(--skc-ink);
  font-weight: 600;
}

body.sk-tool-ui .sk-tool-assurances {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 4px;
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

body.sk-tool-ui .sk-tool-assurances li {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.sk-tool-ui .sk-tool-assurances svg {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--skc-success);
}

/* ------------------------------------------------------------ tool card ---- */

body.sk-tool-ui .sk-tool-section {
  padding-bottom: 8px;
}

body.sk-tool-ui .sk-tool-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--skc-line);
  border-radius: var(--skc-radius);
  background: var(--skc-surface);
  box-shadow: 0 1px 0 rgba(18, 17, 15, 0.04);
}

html[data-sk-scheme="dark"] body.sk-tool-ui .sk-tool-card {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

body.sk-tool-ui .sk-tool-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--skc-ink);
}

body.sk-tool-ui .sk-tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
}

body.sk-tool-ui .sk-tool-pane {
  min-width: 0;
  padding: 20px 22px 18px;
}

body.sk-tool-ui .sk-tool-pane--output {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--skc-line);
  background: var(--skc-linen);
}

body.sk-tool-ui .sk-tool-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 10px;
}

body.sk-tool-ui .sk-tool-label {
  color: var(--skc-ink);
  font-family: var(--skc-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-privacy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid var(--skc-success-line);
  border-radius: 2px;
  background: var(--skc-success-soft);
  color: var(--skc-success);
  font-family: var(--skc-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

body.sk-tool-ui .sk-tool-privacy svg {
  width: 9px;
  height: 9px;
}

body.sk-tool-ui .sk-tool-noscript {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--skc-warning);
  border-radius: var(--skc-radius);
  background: var(--skc-linen);
  color: var(--skc-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

body.sk-tool-ui .sk-tool-noscript strong {
  color: var(--skc-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------- editor ---- */

body.sk-tool-ui .sk-tool-page #input-text {
  display: block;
  width: 100%;
  height: 216px;
  min-height: 150px;
  padding: 14px 15px;
  resize: vertical;
  border: 1px solid var(--skc-stone);
  border-radius: 3px;
  background: var(--skc-surface);
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: inset 0 1px 2px rgba(18, 17, 15, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-sk-scheme="dark"] body.sk-tool-ui .sk-tool-page #input-text {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

body.sk-tool-ui .sk-tool-page #input-text:focus {
  border-color: var(--skc-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--skc-accent-soft);
}

body.sk-tool-ui .sk-tool-page #input-text::placeholder {
  color: var(--skc-muted);
  opacity: 0.82;
}

body.sk-tool-ui .sk-tool-input-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- case chips ---- */

body.sk-tool-ui .sk-tool-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

body.sk-tool-ui .sk-tool-chip {
  position: relative;
  display: inline-flex;
}

body.sk-tool-ui .sk-tool-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body.sk-tool-ui .sk-tool-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--skc-line);
  border-radius: 2px;
  background: var(--skc-surface);
  color: var(--skc-ink-soft);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

body.sk-tool-ui .sk-tool-chip span:hover {
  border-color: var(--skc-stone);
  color: var(--skc-ink);
}

body.sk-tool-ui .sk-tool-chip input:checked + span {
  border-color: var(--skc-ink);
  background: var(--skc-ink);
  color: var(--skc-canvas);
}

body.sk-tool-ui .sk-tool-chip input:focus-visible + span {
  outline: 2px solid var(--skc-accent);
  outline-offset: 2px;
}

body.sk-tool-ui .sk-tool-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 10px;
}

body.sk-tool-ui .sk-tool-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--skc-muted);
  font-size: 0.71rem;
  line-height: 1.4;
  cursor: pointer;
}

body.sk-tool-ui .sk-tool-check input {
  display: grid;
  width: 14px;
  height: 14px;
  flex: none;
  margin: 0;
  appearance: none;
  place-content: center;
  border: 1px solid var(--skc-stone);
  border-radius: 2px;
  background: var(--skc-surface);
  cursor: pointer;
}

body.sk-tool-ui .sk-tool-check input::before {
  content: "";
  width: 7px;
  height: 4px;
  border-bottom: 1.5px solid var(--skc-canvas);
  border-left: 1.5px solid var(--skc-canvas);
  transform: rotate(-45deg) translate(0, -1px) scale(0);
  transition: transform 0.12s ease;
}

body.sk-tool-ui .sk-tool-check input:checked {
  border-color: var(--skc-ink);
  background: var(--skc-ink);
}

body.sk-tool-ui .sk-tool-check input:checked::before {
  transform: rotate(-45deg) translate(0, -1px) scale(1);
}

body.sk-tool-ui .sk-tool-check input:focus-visible {
  outline: 2px solid var(--skc-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- actions ---- */

body.sk-tool-ui .sk-tool-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

body.sk-tool-ui .sk-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.12s ease;
}

body.sk-tool-ui .sk-tool-btn:active:not(:disabled) {
  transform: translateY(1px);
}

body.sk-tool-ui .sk-tool-btn--primary {
  flex: 1 1 auto;
  border-color: var(--skc-ink);
  background: var(--skc-ink);
  color: var(--skc-canvas);
}

body.sk-tool-ui .sk-tool-btn--primary:hover:not(:disabled) {
  border-color: var(--skc-accent);
  background: var(--skc-accent);
  color: #ffffff;
}

body.sk-tool-ui .sk-tool-btn--primary:disabled {
  cursor: wait;
  opacity: 0.68;
}

body.sk-tool-ui .sk-tool-btn--quiet {
  border-color: var(--skc-line);
  background: transparent;
  color: var(--skc-ink-soft);
}

body.sk-tool-ui .sk-tool-btn--quiet:hover:not(:disabled) {
  border-color: var(--skc-stone);
  background: var(--skc-linen);
  color: var(--skc-ink);
}

body.sk-tool-ui .sk-tool-btn--quiet:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

body.sk-tool-ui .sk-tool-btn-icon {
  display: inline-flex;
  flex: none;
}

body.sk-tool-ui .sk-tool-btn-icon svg {
  width: 15px;
  height: 15px;
}

body.sk-tool-ui .sk-tool-text-btn {
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

body.sk-tool-ui .sk-tool-text-btn:hover:not(:disabled) {
  border-bottom-color: var(--skc-stone);
  color: var(--skc-ink);
}

body.sk-tool-ui .sk-tool-text-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

body.sk-tool-ui .sk-tool-text-btn[data-feedback="success"] {
  border-bottom-color: var(--skc-success);
  color: var(--skc-success);
}

body.sk-tool-ui .sk-tool-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  margin-left: auto;
  padding: 2px 5px;
  border: 1px solid var(--skc-line);
  border-bottom-color: var(--skc-stone);
  border-radius: 3px;
  background: var(--skc-surface);
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.58rem;
  line-height: 1;
}

/* ------------------------------------------------------------- progress ---- */

body.sk-tool-ui .sk-tool-progress {
  margin-top: 12px;
}

body.sk-tool-ui .sk-tool-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-progress-value {
  color: var(--skc-ink);
  font-variant-numeric: tabular-nums;
}

body.sk-tool-ui .sk-tool-progress-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.sk-tool-ui .sk-tool-progress-cancel {
  position: relative;
  padding: 0;
  border-bottom: 1px solid var(--skc-stone);
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-progress-cancel::after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

body.sk-tool-ui .sk-tool-progress-cancel:hover:not(:disabled) {
  border-bottom-color: var(--skc-ink);
  color: var(--skc-ink);
}

body.sk-tool-ui .sk-tool-progress-cancel:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

body.sk-tool-ui .sk-tool-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--skc-line);
}

body.sk-tool-ui .sk-tool-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: var(--skc-accent);
  transition: transform 0.22s ease;
}

body.sk-tool-ui .sk-tool-progress[data-state="error"] .sk-tool-progress-fill {
  background: var(--skc-danger);
}

body.sk-tool-ui .sk-tool-status {
  min-height: 18px;
  margin-top: 8px;
  color: var(--skc-muted);
  font-size: 0.73rem;
  line-height: 1.45;
}

body.sk-tool-ui .sk-tool-status:empty {
  display: none;
}

body.sk-tool-ui .sk-tool-status[data-tone="success"] {
  color: var(--skc-success);
}

body.sk-tool-ui .sk-tool-status[data-tone="error"] {
  color: var(--skc-danger);
}

/* --------------------------------------------------------------- output ---- */

body.sk-tool-ui .sk-tool-output-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.sk-tool-ui .sk-tool-output {
  position: relative;
  display: flex;
  min-height: 216px;
  max-height: 302px;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
  padding: 14px 15px;
  border: 1px solid var(--skc-line);
  border-radius: 3px;
  background: var(--skc-surface);
}

body.sk-tool-ui .sk-tool-output-empty {
  display: flex;
  min-height: 186px;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--skc-muted);
  text-align: center;
}

body.sk-tool-ui .sk-tool-output-empty-icon {
  color: var(--skc-accent);
  font-family: var(--skc-serif);
  font-size: 2rem;
  font-style: italic;
  line-height: 1;
  opacity: 0.72;
}

body.sk-tool-ui .sk-tool-output-empty p {
  max-width: 25ch;
  font-size: 0.8rem;
  line-height: 1.45;
}

body.sk-tool-ui .sk-tool-output-empty small {
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-output-text {
  display: none;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
  border: 0;
  background: transparent;
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  font-size: 0.92rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

body.sk-tool-ui .sk-tool-output[data-state="filled"] .sk-tool-output-empty {
  display: none;
}

body.sk-tool-ui .sk-tool-output[data-state="filled"] .sk-tool-output-text {
  display: block;
}

/* ---------------------------------------------------------------- stats ---- */

body.sk-tool-ui .sk-tool-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--skc-line);
}

body.sk-tool-ui .sk-tool-stats > div {
  min-width: 0;
  padding: 8px 10px 0 0;
}

body.sk-tool-ui .sk-tool-stats > div + div {
  padding-left: 10px;
  border-left: 1px solid var(--skc-line);
}

body.sk-tool-ui .sk-tool-stats dt {
  overflow: hidden;
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.sk-tool-ui .sk-tool-stats dd {
  margin-top: 2px;
  color: var(--skc-ink);
  font-family: var(--skc-serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- below fold ---- */

/* The mid-content ad seam is the first h2 after the tool. Keeping that h2 as
   the first child of this section means the plugin's slot lands between the
   tool and the prose, not between a kicker and its heading. The rule and the
   spacing live on the h2 so the section itself adds nothing around the ad. */
body.sk-tool-ui .sk-tool-how {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.sk-tool-ui .sk-tool-how > h2 {
  max-width: 740px;
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--skc-line);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 300;
  letter-spacing: -0.045em;
}

body.sk-tool-ui .sk-tool-section-lede {
  max-width: 740px;
  margin-top: 8px;
  color: var(--skc-ink-soft);
  font-size: 0.95rem;
  line-height: 1.58;
}

body.sk-tool-ui .sk-tool-section-head {
  max-width: 740px;
}

body.sk-tool-ui .sk-tool-section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 300;
  letter-spacing: -0.045em;
}

body.sk-tool-ui .sk-tool-section-head p {
  margin-top: 8px;
  color: var(--skc-ink-soft);
  font-size: 0.95rem;
  line-height: 1.58;
}

body.sk-tool-ui .sk-tool-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  padding: 0;
  border-top: 1px solid var(--skc-line);
}

body.sk-tool-ui .sk-tool-steps li {
  padding: 18px 24px 0 0;
  border-right: 1px solid var(--skc-line);
}

body.sk-tool-ui .sk-tool-steps li:last-child {
  padding-right: 0;
  border-right: 0;
}

body.sk-tool-ui .sk-tool-steps li:not(:first-child) {
  padding-left: 24px;
}

body.sk-tool-ui .sk-tool-step-number {
  display: block;
  margin-bottom: 12px;
  color: var(--skc-accent);
  font-family: var(--skc-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-steps h3 {
  margin-bottom: 7px;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

body.sk-tool-ui .sk-tool-steps p {
  color: var(--skc-muted);
  font-size: 0.88rem;
  line-height: 1.58;
}

/* ---------------------------------------------------------------- guide ---- */

body.sk-tool-ui .sk-tool-guide {
  max-width: 760px;
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--skc-line);
}

body.sk-tool-ui .sk-tool-guide h2 {
  margin-top: clamp(30px, 4vw, 44px);
  font-size: clamp(1.55rem, 2.5vw, 2.05rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

body.sk-tool-ui .sk-tool-guide h3 {
  margin-top: 26px;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

body.sk-tool-ui .sk-tool-guide > h2:first-child,
body.sk-tool-ui .sk-tool-guide > h3:first-child {
  margin-top: 0;
}

body.sk-tool-ui .sk-tool-guide p {
  margin-top: 12px;
  color: var(--skc-ink-soft);
  font-size: 0.96rem;
  line-height: 1.68;
}

body.sk-tool-ui .sk-tool-guide ul,
body.sk-tool-ui .sk-tool-guide ol {
  margin-top: 12px;
  padding-left: 1.15em;
  list-style: disc;
}

body.sk-tool-ui .sk-tool-guide ol {
  list-style: decimal;
}

body.sk-tool-ui .sk-tool-guide li {
  margin-top: 6px;
  padding-left: 0.15em;
  color: var(--skc-ink-soft);
  font-size: 0.96rem;
  line-height: 1.65;
}

body.sk-tool-ui .sk-tool-guide strong {
  color: var(--skc-ink);
  font-weight: 600;
}

body.sk-tool-ui .sk-tool-guide code {
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--skc-linen);
  color: var(--skc-ink);
  font-family: var(--skc-mono);
  font-size: 0.86em;
}

body.sk-tool-ui .sk-tool-guide a {
  color: var(--skc-accent);
}

body.sk-tool-ui .sk-tool-ad-note {
  margin-top: 16px;
  color: var(--skc-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* Ad units rendered inside the tool wrapper keep the site's ad markup. Only
   the local rule colour, width and label type are aligned with this surface.
   The unit is clamped to a standard leaderboard width so a full-width
   responsive creative cannot outgrow the prose column. */
body.sk-tool-ui .sk-tool-page .sk-ad {
  max-width: 970px;
  margin-inline: auto;
  border-top-color: var(--skc-line);
}

/* An AdSense auto unit has no height until a creative fills it, so the box
   started at the height of its label alone and then grew by about 280px when
   the ad arrived. Everything below it -- the guide, the FAQ -- was pushed down
   after the reader had already started reading, which is a layout shift they
   feel even though nothing visible moved badly.

   Reserving the tallest height the unit can reach means the page never moves;
   if no creative arrives, the reserved space is simply empty, which is a much
   smaller cost than shifting the whole article mid-read. The reservation is on
   the ins element because that is what AdSense sizes, not on the aside that
   wraps the label. */
body.sk-tool-ui .sk-tool-page .sk-ad .adsbygoogle {
  display: block;
  min-height: 280px;
}

/* Narrow screens get shorter creatives, so they reserve less. */
@media (max-width: 760px) {
  body.sk-tool-ui .sk-tool-page .sk-ad .adsbygoogle {
    min-height: 250px;
  }
}

/* The end-of-content unit is appended to .entry-content rather than placed
   inside the tool wrapper, so the scoped rule above never reached it and it
   still opened with no height. On the card-based tools that was the only ad
   causing a shift: flashcards measured 0.117, entirely from this one. */
body.sk-tool-ui .entry-content > .sk-ad .adsbygoogle {
  display: block;
  min-height: 280px;
}

/* Three tools mount into an empty div and build their whole interface from
   script: #sk-fc-app, #sk-cit-app and #sk-pal-app. Between first paint and the
   script running, that div has no height, so everything below it -- the ad, the
   guide, the FAQ -- sits too high and then drops by up to 860px when the tool
   appears. On citation-generator that was the entire remaining 0.20 shift, and
   the ad was the thing blamed because it was the largest element that moved.

   Reserving the space is approximate by nature: the real height depends on the
   tool and on the viewport. It is set generously enough that the content almost
   never exceeds it, since being a little too tall only costs whitespace, where
   being too short reproduces the shift. */
body.sk-tool-ui .sk-tool-page :is(#sk-fc-app, #sk-cit-app, #sk-pal-app) {
  min-height: 900px;
}

/* The prompt optimiser fills its score and comparison panels after the first
   paint, not at mount: measured at 1219ms the page was 2066px tall, and 106ms
   later it was 3873px, with the score panel growing from 26px to 257px. The
   whole article below moved in that single frame.

   Reserving the panel heights keeps the page still while that happens. The
   values are the heights the panels settle at, so once they fill there is no
   movement at all; before they fill, the reader sees reserved space rather than
   text that jumps away. */
body.sk-tool-ui .sk-tool-page .sk-po-scores {
  min-height: 257px;
}

body.sk-tool-ui .sk-tool-page .sk-po-compare {
  min-height: 266px;
}

@media (max-width: 760px) {
  body.sk-tool-ui .sk-tool-page :is(.sk-po-scores, .sk-po-compare) {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  body.sk-tool-ui .sk-tool-page :is(#sk-fc-app, #sk-cit-app, #sk-pal-app) {
    min-height: 1200px;
  }
}

@media (max-width: 760px) {
  body.sk-tool-ui .entry-content > .sk-ad .adsbygoogle {
    min-height: 250px;
  }
}

body.sk-tool-ui .sk-tool-page .sk-ad-label {
  color: var(--skc-muted);
  font-family: var(--skc-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

/* ---------------------------------------------------------- responsive ---- */

@media (max-width: 960px) {
  body.sk-tool-ui .sk-tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.sk-tool-ui .sk-tool-pane--output {
    border-top: 1px solid var(--skc-line);
    border-left: 0;
  }

  body.sk-tool-ui .sk-tool-output {
    max-height: 260px;
  }

  body.sk-tool-ui .sk-tool-assurances {
    display: none;
  }

  body.sk-tool-ui .sk-tool-intro {
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  body.sk-tool-ui .entry-content > .sk-crumbs {
    width: calc(100% - 28px);
    margin: 12px auto 8px;
  }

  body.sk-tool-ui .entry-content > .sk-tool-page {
    width: calc(100% - 28px);
  }

  body.sk-tool-ui .sk-tool-intro {
    padding: 14px 0;
  }

  body.sk-tool-ui .sk-tool-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  body.sk-tool-ui .sk-tool-lede {
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  body.sk-tool-ui .sk-tool-kicker {
    margin-bottom: 8px;
    font-size: 0.55rem;
  }

  body.sk-tool-ui .sk-tool-pane {
    padding: 14px;
  }

  body.sk-tool-ui .sk-tool-page #input-text {
    height: 150px;
    min-height: 130px;
    padding: 12px;
    font-size: 0.95rem;
  }

  body.sk-tool-ui .sk-tool-cases {
    gap: 4px;
    margin-top: 10px;
  }

  body.sk-tool-ui .sk-tool-chip span {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.68rem;
  }

  body.sk-tool-ui .sk-tool-options {
    gap: 6px 12px;
    margin-top: 8px;
  }

  body.sk-tool-ui .sk-tool-actions {
    margin-top: 12px;
    gap: 6px;
  }

  body.sk-tool-ui .sk-tool-btn {
    min-height: 44px;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  body.sk-tool-ui .sk-tool-shortcut {
    display: none;
  }

  body.sk-tool-ui .sk-tool-output {
    min-height: 150px;
    max-height: 220px;
  }

  body.sk-tool-ui .sk-tool-output-empty {
    min-height: 120px;
  }

  body.sk-tool-ui .sk-tool-steps {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
  }

  body.sk-tool-ui .sk-tool-steps li,
  body.sk-tool-ui .sk-tool-steps li:not(:first-child) {
    padding: 16px 0;
    border-top: 1px solid var(--skc-line);
    border-right: 0;
  }

  body.sk-tool-ui .sk-tool-guide {
    max-width: none;
  }
}

@media (max-width: 420px) {
  body.sk-tool-ui .sk-tool-privacy {
    padding: 3px 5px;
    font-size: 0.56rem;
  }

  body.sk-tool-ui .sk-tool-chip span {
    font-size: 0.64rem;
  }

  body.sk-tool-ui .sk-tool-stats > div {
    padding-right: 7px;
  }

  body.sk-tool-ui .sk-tool-stats > div + div {
    padding-left: 7px;
  }

  body.sk-tool-ui .sk-tool-stats dt {
    font-size: 0.54rem;
  }

  body.sk-tool-ui .sk-tool-stats dd {
    font-size: 0.98rem;
  }
}

@media (max-width: 345px) {
  body.sk-tool-ui .sk-tool-cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.sk-tool-ui .sk-tool-chip span {
    width: 100%;
    justify-content: center;
    padding: 0 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sk-tool-ui .sk-tool-page *,
  body.sk-tool-ui .sk-tool-page *::before,
  body.sk-tool-ui .sk-tool-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}