/* ==========================================================================
   StudyKit legacy tool pages: shared shell
   ==========================================================================

   Loaded on every catalogue tool except Case Converter. The page content is
   wrapped by studykit_tool_ui_normalise_legacy() in the mu-plugin, which
   removes the old purple .sk-hero and prints the same flat intro Case Converter
   uses. This file supplies that intro, the 1180px page width and the small set
   of surface rules needed to make the older tools sit on the same canvas.

   It deliberately does not load tool-shell.css: that file resets buttons,
   lists and headings for the Case Converter markup and would break the older
   controls. Nothing here changes an ID, a script hook or a control's size.
   ========================================================================== */

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-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;
}

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;
}

/* Any legacy hero left by a template edit is hidden rather than shown twice. */
body.sk-tool-ui .sk-tool-page .sk-hero {
  display: none !important;
}

/* A few legacy pages carried a standalone-document body rule. Put the site
   canvas back without touching the calculator card's own colours. */
body.sk-tool-ui.sk-tool-gpa-calculator,
body.sk-tool-ui.sk-tool-percentage-calculator {
  display: block !important;
  padding: 0 !important;
  background: var(--sk26-canvas, #faf9f6) !important;
  color: var(--sk26-ink, #111111) !important;
  font-family: var(--sk26-sans, "Inter", "Segoe UI", system-ui, sans-serif) !important;
}

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

body.sk-tool-ui .sk-tool-page .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-page .sk-tool-intro-copy {
  min-width: 0;
  max-width: 760px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 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-page .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-page .sk-tool-title {
  margin: 0;
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.95;
  text-wrap: balance;
}

body.sk-tool-ui .sk-tool-page .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-page .sk-tool-lede {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--skc-ink-soft);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}

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

body.sk-tool-ui .sk-tool-page .sk-tool-assurances {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  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;
  list-style: none;
  text-transform: uppercase;
  white-space: nowrap;
}

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

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

/* ------------------------------------------------------------- the body ---- */

body.sk-tool-ui .sk-tool-page .sk-tool-legacy-body {
  display: block;
  width: 100%;
  min-width: 0;
}

/* The old page roots carried their own max-width and centring. The outer
   .sk-tool-page already does that job, so let each root fill it. Horizontal
   padding is removed only; vertical rhythm belongs to the component. */
body.sk-tool-ui .sk-tool-page :is(
  .sk-media-page,
  .sk-shot-page,
  .sk-rewrite-wrap,
  .sk-po-page,
  .sk-az-page,
  .sk-image-tool,
  .sk-word-page,
  .sk-audio-page,
  .sk-video-page,
  .sk-fc-root,
  .sk-cit-root,
  .sk-pal-root,
  .studykit-wordcounter-container,
  .studykit-density-container,
  .studykit-counter-container,
  .studykit-fixer-container
) {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.sk-tool-ui .sk-tool-page :is(.gpa-card, .pct-card) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.sk-tool-ui .sk-tool-page .sk-content-hub {
  width: 100% !important;
  max-width: 760px !important;
  margin: clamp(34px, 4vw, 48px) 0 0 !important;
  padding: 0 !important;
}

/* Single explanatory paragraphs and notices sat directly in the page body on
   the older tools. Keep them on the same 760px reading column as the guide. */
body.sk-tool-ui .sk-tool-page .sk-tool-legacy-body > :is(
  p,
  .sk-video-lead,
  .sk-media-note,
  .sk-rewrite-privacy,
  .sk-audio-notice,
  .sk-cit-banner
) {
  max-width: 760px;
}

/* Long-form sections keep a readable column while the tool above uses the
   full 1180px canvas. This mirrors .sk-tool-guide on Case Converter. */
body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) {
  width: 100%;
  max-width: 760px;
  margin: clamp(34px, 4vw, 48px) 0 0;
  padding: clamp(24px, 3vw, 32px) 0 0;
  border-top: 1px solid var(--skc-line);
}

body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) h2 {
  margin: clamp(30px, 4vw, 42px) 0 0;
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  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-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) > h2:first-child {
  margin-top: 0;
}

body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) h3 {
  margin: 26px 0 0;
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) p,
body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) li {
  color: var(--skc-ink-soft);
  font-size: 0.96rem;
  line-height: 1.68;
}

body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) p {
  margin-top: 12px;
}

body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) ul,
body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) ol {
  margin-top: 12px;
  padding-left: 1.15em;
  list-style: disc;
}

body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) ol {
  list-style: decimal;
}

body.sk-tool-ui .sk-tool-page :is(section, article):is(
  [class*="guide"],
  [class*="educational-content"],
  [class*="explanation"]
) li {
  margin-top: 6px;
}

body.sk-tool-ui .sk-tool-page .sk-content-hub h2 {
  margin: clamp(30px, 4vw, 42px) 0 0;
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  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-page .sk-content-hub h2:first-child {
  margin-top: 0;
}

body.sk-tool-ui .sk-tool-page .sk-content-hub h3 {
  margin: 26px 0 0;
  color: var(--skc-ink);
  font-family: var(--skc-sans);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

body.sk-tool-ui .sk-tool-page .sk-content-hub p,
body.sk-tool-ui .sk-tool-page .sk-content-hub li {
  color: var(--skc-ink-soft);
  font-size: 0.96rem;
  line-height: 1.68;
}

body.sk-tool-ui .sk-tool-page .sk-content-hub p {
  margin-top: 12px;
}

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

body.sk-tool-ui .sk-tool-page .sk-content-hub ol {
  list-style: decimal;
}

body.sk-tool-ui .sk-tool-page .sk-content-hub li {
  margin-top: 6px;
}

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

/* Audio Compressor's final panel is explanatory prose, not a control surface.
   Give it the same 760px reading column and hairline as the other guides. */
body.sk-tool-ui .sk-tool-page .sk-audio-page > .sk-media-panel[aria-labelledby="sk-audio-limits-heading"] {
  max-width: 760px !important;
  margin: clamp(34px, 4vw, 48px) 0 0 !important;
  padding: clamp(24px, 3vw, 32px) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--skc-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sk-tool-ui .sk-tool-page .sk-audio-page > .sk-media-panel[aria-labelledby="sk-audio-limits-heading"]::before {
  content: none !important;
}

body.sk-tool-ui .sk-tool-page .sk-audio-page > .sk-media-panel[aria-labelledby="sk-audio-limits-heading"] > h2:first-child {
  margin-top: 0;
}

/* Reading Time still carried its old purple metric cards and rose clear
   button. Keep the card structure but move it onto the shared ink/accent. */
body.sk-tool-ui .sk-tool-page .counter-metrics-grid .metric-card {
  border: 1px solid var(--skc-line) !important;
  border-radius: var(--skc-radius) !important;
  background: var(--skc-linen) !important;
}

body.sk-tool-ui .sk-tool-page .counter-metrics-grid .metric-num {
  color: var(--skc-ink) !important;
  font-family: var(--skc-sans);
  font-weight: 500;
  letter-spacing: -0.03em;
}

body.sk-tool-ui .sk-tool-page .counter-metrics-grid .metric-label {
  color: var(--skc-muted) !important;
}

body.sk-tool-ui .sk-tool-page .counter-metrics-grid .card-time {
  border-color: var(--skc-accent-line) !important;
  background: var(--skc-accent-soft) !important;
}

body.sk-tool-ui .sk-tool-page .counter-metrics-grid .card-time .metric-num {
  color: var(--skc-accent) !important;
}

body.sk-tool-ui .sk-tool-page .counter-actions-row button {
  padding: 9px 14px;
  border: 1px solid var(--skc-line) !important;
  border-radius: 3px !important;
  background: var(--skc-surface) !important;
  color: var(--skc-ink) !important;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

body.sk-tool-ui .sk-tool-page .counter-actions-row button:hover {
  border-color: var(--skc-accent) !important;
  color: var(--skc-accent) !important;
}

body.sk-tool-ui .sk-tool-page .counter-educational-content a {
  color: var(--skc-accent) !important;
}

/* QR generators put the guide inside the two-column .sk-qr grid, so it has to
   span both columns or it becomes a narrow third cell beside the output panel.
 *
 * The ad unit is deliberately NOT listed here. Forcing an auto-placed item to
 * `1 / -1` makes it occupy a new implicit row, and because the ad's own
 * content is narrow it then shrinks to fit: measured at 93px instead of the
 * 398px it gets when placed automatically, which is narrower than any AdSense
 * slot and makes adsbygoogle.push() throw "No slot size for availableWidth".
 * Left alone, auto-placement already gives it the full row. */
body.sk-tool-ui .sk-tool-page .sk-qr > .sk-content-hub {
  grid-column: 1 / -1;
}

/* Validation messages reserve a line even when there is nothing to say, which
   read as two empty coloured bars under the address field. */
body.sk-tool-ui .sk-tool-page .sk-qr-echo:empty,
body.sk-tool-ui .sk-tool-page .sk-qr-problems:empty {
  display: none !important;
}

/* -------------------------------------------------------------- surfaces ---- */

/* One card treatment for the main working area. The dark top rule is the same
   two-pixel detail the Case Converter card uses. */
body.sk-tool-ui .sk-tool-page :is(
  .sk-media-panel,
  .sk-word-panel,
  .sk-az-panel,
  .sk-shot-panel,
  .sk-video-panel,
  .sk-rewrite-panel,
  .sk-po-panel,
  .sk-cit-form,
  .sk-qr-form,
  .sk-qr-output,
  .gpa-card,
  .pct-card,
  .density-tool-box,
  .counter-tool-box,
  .fixer-tool-box,
  .studykit-wordcounter-container .textarea-wrapper
) {
  position: relative;
  border: 1px solid var(--skc-line) !important;
  border-radius: var(--skc-radius) !important;
  background: var(--skc-surface) !important;
  box-shadow: 0 1px 0 rgba(18, 17, 15, 0.04);
}

body.sk-tool-ui .sk-tool-page :is(
  .sk-media-panel,
  .sk-word-panel,
  .sk-az-panel,
  .sk-shot-panel,
  .sk-video-panel,
  .sk-rewrite-panel,
  .sk-po-panel,
  .sk-cit-form,
  .sk-qr-form,
  .sk-qr-output,
  .gpa-card,
  .pct-card,
  .density-tool-box,
  .counter-tool-box,
  .fixer-tool-box
)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: var(--skc-radius) var(--skc-radius) 0 0;
  background: var(--skc-ink);
  pointer-events: none;
}

/* The flashcard app is mounted by JavaScript into an empty div. The card
   treatment only applies once it has content, so the loading state does not
   leave an empty black-ruled box. */
body.sk-tool-ui .sk-tool-page #sk-fc-app:not(:empty) {
  position: relative;
  padding: 22px;
  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);
}

body.sk-tool-ui .sk-tool-page #sk-fc-app:not(:empty)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: var(--skc-radius) var(--skc-radius) 0 0;
  background: var(--skc-ink);
  pointer-events: none;
}

/* Panel titles stay in the same ink as the rest of the shell; the old pages
   used the accent colour here, which made every control box look like a link. */
body.sk-tool-ui .sk-tool-page :is(
  .sk-media-panel,
  .sk-word-panel,
  .sk-shot-panel,
  .sk-az-panel,
  .sk-video-panel,
  .sk-rewrite-panel,
  .sk-po-panel
) > h2 {
  color: var(--skc-ink) !important;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* The generic accent tokens used by the component stylesheets. Setting them
   on each root, rather than on .sk-tool-page, beats the roots' own defaults. */
body.sk-tool-ui .sk-tool-page :is(
  .sk-media-page,
  .sk-qr,
  .sk-qr-scanner,
  .sk-word-page,
  .sk-video-page,
  .sk-audio-page,
  .sk-rewrite-wrap,
  .sk-po-page,
  .sk-az-page,
  .sk-shot-page,
  .sk-image-tool,
  .sk-fc-root,
  .sk-cit-root,
  .sk-pal-root
) {
  --sk-accent: var(--skc-accent);
  --sk-accent-strong: var(--skc-accent-hover);
  --sk-accent-hover: var(--skc-accent-hover);
  --sk-accent-soft: var(--skc-accent-soft);
  --sk-accent-bg: var(--skc-accent-soft);
  --sk-accent-line: var(--skc-accent-line);
  --sk-ink: var(--skc-ink);
  --sk-line: var(--skc-line);
  --sk-muted: var(--skc-muted);
  --sk-surface: var(--skc-surface);
  --sk-surface-2: var(--skc-linen);
  --sk-soft: var(--skc-linen);
  --sk-bg: var(--skc-canvas);
  --sk-primary: var(--skc-ink);
  --sk-primary-light: var(--skc-linen);
}

body.sk-tool-ui .sk-tool-page .gpa-card,
body.sk-tool-ui .sk-tool-page .pct-card {
  --sk-primary: var(--skc-ink);
  --sk-primary-light: var(--skc-linen);
  --sk-main-bg: var(--skc-surface);
  --sk-text-dark: var(--skc-ink);
  --sk-text-main: var(--skc-ink);
  --sk-text-muted: var(--skc-muted);
  --sk-border: var(--skc-line);
}

/* --------------------------------------------------------------- controls ---- */

body.sk-tool-ui .sk-tool-page :is(
  .sk-media-page,
  .sk-qr,
  .sk-qr-scanner,
  .sk-word-page,
  .sk-video-page,
  .sk-audio-page,
  .sk-rewrite-wrap,
  .sk-po-page,
  .sk-az-page,
  .sk-shot-page,
  .sk-image-tool,
  .sk-fc-root,
  .sk-cit-root,
  .sk-pal-root,
  .gpa-card,
  .pct-card
) :is(input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select) {
  border-color: var(--skc-stone) !important;
  border-radius: 3px !important;
  background-color: var(--skc-surface);
  color: var(--skc-ink);
}

body.sk-tool-ui .sk-tool-page :is(
  .sk-media-page,
  .sk-qr,
  .sk-qr-scanner,
  .sk-word-page,
  .sk-video-page,
  .sk-audio-page,
  .sk-rewrite-wrap,
  .sk-po-page,
  .sk-az-page,
  .sk-shot-page,
  .sk-image-tool,
  .sk-fc-root,
  .sk-cit-root,
  .sk-pal-root,
  .gpa-card,
  .pct-card
) :is(input, textarea, select):focus-visible {
  border-color: var(--skc-accent) !important;
  outline: 2px solid var(--skc-accent-soft);
  outline-offset: 1px;
}

/* Primary actions take the Case Converter black. Secondary and destructive
   actions keep their existing treatment. */
body.sk-tool-ui .sk-tool-page :is(
  .sk-media-button,
  .sk-shot-button:not(.secondary),
  .sk-rewrite-button:not(.sk-rewrite-ghost),
  .sk-po-btn-primary,
  .sk-cit-btn-primary,
  .sk-pal-btn-primary,
  .sk-aud-btn-primary,
  .sk-fc-btn-primary,
  .sk-video-button:not([data-variant="quiet"]),
  .btn-add,
  .btn-util
) {
  border: 1px solid var(--skc-ink) !important;
  border-radius: 3px !important;
  background: var(--skc-ink) !important;
  color: var(--skc-canvas) !important;
  font-weight: 500;
}

body.sk-tool-ui .sk-tool-page :is(
  .sk-media-button,
  .sk-shot-button:not(.secondary),
  .sk-rewrite-button:not(.sk-rewrite-ghost),
  .sk-po-btn-primary,
  .sk-cit-btn-primary,
  .sk-pal-btn-primary,
  .sk-aud-btn-primary,
  .sk-fc-btn-primary,
  .sk-video-button:not([data-variant="quiet"]),
  .btn-add,
  .btn-util
):hover:not(:disabled) {
  border-color: var(--skc-accent) !important;
  background: var(--skc-accent) !important;
  color: #ffffff !important;
}

body.sk-tool-ui .sk-tool-page :is(
  .sk-shot-button.secondary,
  .sk-rewrite-ghost,
  .sk-po-btn:not(.sk-po-btn-primary),
  .sk-cit-btn:not(.sk-cit-btn-primary):not(.sk-cit-btn-danger),
  .sk-pal-btn:not(.sk-pal-btn-primary),
  .sk-aud-btn:not(.sk-aud-btn-primary),
  .sk-fc-btn:not(.sk-fc-btn-primary),
  .sk-video-button[data-variant="quiet"]
) {
  border-color: var(--skc-line) !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--skc-ink-soft) !important;
}

/* The QR generators' reset control has no class, so it missed the secondary
   button rules above and kept its old purple ink in dark mode. */
body.sk-tool-ui .sk-tool-page .sk-qr-control-actions button {
  padding: 9px 14px;
  border: 1px solid var(--skc-line) !important;
  border-radius: 3px !important;
  background: var(--skc-surface) !important;
  color: var(--skc-ink) !important;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

body.sk-tool-ui .sk-tool-page .sk-qr-control-actions button:hover {
  border-color: var(--skc-accent) !important;
  color: var(--skc-accent) !important;
}

/* ------------------------------------------------------ calculators only ---- */

@media (min-width: 900px) {
  body.sk-tool-ui .sk-tool-page .pct-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    padding: 22px !important;
  }

  body.sk-tool-ui .sk-tool-page .pct-card .calc-section {
    margin: 0 !important;
  }

  /* The change calculator has a longer label row, so it gets the full width
     beneath the two shorter questions. */
  body.sk-tool-ui .sk-tool-page .pct-card .calc-section:nth-of-type(3) {
    grid-column: 1 / -1;
  }

  body.sk-tool-ui .sk-tool-page .pct-card .utility-bar {
    grid-column: 1 / -1;
  }
}

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

@media (max-width: 960px) {
  body.sk-tool-ui .sk-tool-page .sk-tool-assurances {
    display: none;
  }

  body.sk-tool-ui .sk-tool-page .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-page .sk-tool-intro {
    padding: 14px 0;
  }

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

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

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

@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;
  }
}

/* ------------------------------------------------------------------ *
 * Five-up statistics rows.
 *
 * .sk-tool-stats is a four-column grid in tool-shell.css, which is what the
 * Case Converter needs. The Word Counter reports five totals, so the fifth
 * item wrapped onto a second row and broke the alignment of the whole strip.
 * A modifier rather than a wider base rule: other tools may still want four,
 * and changing the base would silently reflow them.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page .sk-tool-stats--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Below the two-panel breakpoint the strip is too narrow for five columns, so
   let it wrap into a 3 + 2 block rather than shrinking the labels to nothing. */
@media (max-width: 720px) {
  body.sk-tool-ui .sk-tool-page .sk-tool-stats--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.sk-tool-ui .sk-tool-page .sk-tool-stats--five > div:nth-child(4) {
    border-left: 0;
    padding-left: 0;
  }
}

/* ------------------------------------------------------------------ *
 * Media tools: fold the floating panels into the house card.
 *
 * .sk-media-layout renders two separate cards -- 20px radius, drop shadow,
 * 22px gap -- which reads as two widgets standing next to each other. The
 * house pattern is one card with a single hairline and a divider down the
 * middle. These rules drop the second treatment and adopt the first without
 * touching the widget markup, so every image tool keeps working as it is.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page .sk-media-layout {
  gap: 0;
  margin-top: 0;
  border: 1px solid var(--skc-line, #dedbd6);
  border-radius: var(--skc-radius, 4px);
  background: var(--skc-surface, #ffffff);
  box-shadow: 0 1px 0 rgba(18, 17, 15, 0.04);
  overflow: hidden;
}

body.sk-tool-ui .sk-tool-page .sk-media-layout > .sk-media-panel {
  padding: 20px 22px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The divider only makes sense while the two panels sit side by side. */
body.sk-tool-ui .sk-tool-page .sk-media-layout > .sk-media-panel + .sk-media-panel {
  border-left: 1px solid var(--skc-line, #dedbd6);
}

body.sk-tool-ui .sk-tool-page .sk-media-layout[data-stack="true"] > .sk-media-panel + .sk-media-panel {
  border-left: 0;
  border-top: 1px solid var(--skc-line, #dedbd6);
}

/* The 2px ink bar that tops every house card. */
body.sk-tool-ui .sk-tool-page .sk-media-layout::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--skc-ink, #111111);
}

body.sk-tool-ui .sk-tool-page .sk-media-layout {
  position: relative;
}

/* Panel headings become the same small caps label the other cards use. */
body.sk-tool-ui .sk-tool-page .sk-media-layout > .sk-media-panel > h2:first-child {
  margin: 0 0 12px;
  color: var(--skc-muted, #6c6862);
  font-family: var(--skc-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

  body.sk-tool-ui .sk-tool-page .sk-media-layout > .sk-media-panel + .sk-media-panel {
    border-left: 0;
    border-top: 1px solid var(--skc-line, #dedbd6);
  }
}

/* ------------------------------------------------------------------ *
 * Media tools: keep controls inside their panel.
 *
 * .sk-media-target lays a number input next to a unit <select>. The select
 * is flex:0 0 auto with min-width 80px and no max-width, so on a narrow
 * panel it grows past the card divider and overlaps the result column --
 * measured at 11px over on Image Compressor at 1280px wide. min-width:0 on
 * the flex children lets them shrink, which is what flex needs to stop
 * overflowing before any media query fires.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-target {
  max-width: 100%;
  min-width: 0;
}

body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-target > * {
  min-width: 0;
  max-width: 100%;
}

body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-target select {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 40%;
}

/* A panel is a grid cell, so it needs min-width:0 or its content sets the
   column width and the card cannot shrink past the longest control. */
body.sk-tool-ui .sk-tool-page .sk-media-layout > .sk-media-panel {
  min-width: 0;
}

/* Long unbroken strings (file names, data URLs, hex dumps) otherwise widen
   the whole card. */
body.sk-tool-ui .sk-tool-page .sk-media-layout :is(input, select, textarea) {
  max-width: 100%;
}

/* The size presets read as plain text at this size; give them the same
   treatment as the Case Converter's chips so they look like controls. */
body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-presets {
  gap: 6px;
}

body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-presets > * {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  padding: 5px 11px;
  border: 1px solid var(--skc-line, #dedbd6);
  border-radius: 999px;
  background: transparent;
  color: var(--skc-ink, #111111);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
  cursor: pointer;
}

body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-presets > *:hover {
  border-color: var(--skc-ink, #111111);
}

body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-presets > [aria-pressed="true"],
body.sk-tool-ui .sk-tool-page .sk-media-layout .sk-media-presets > .is-active {
  background: var(--skc-ink, #111111);
  border-color: var(--skc-ink, #111111);
  color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Single-column cards.
 *
 * Not every tool has two things to show. A calculator has one column of
 * inputs and one result; a counter has one text area and a totals strip.
 * Forcing those into .sk-tool-grid would mean inventing an empty second pane
 * purely to match a shape, which is worse than admitting the shape differs.
 *
 * So the card, the ink bar, the hairline and the small-caps pane label are
 * kept, and only the two-column split is dropped. The result is still
 * visually the same family as the Case Converter without pretending the
 * widget has a left and a right.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page .sk-tool-card--single > .sk-tool-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* A stacked card keeps the divider as a horizontal rule instead. */
body.sk-tool-ui .sk-tool-page .sk-tool-card--single > .sk-tool-grid > .sk-tool-pane + .sk-tool-pane {
  border-top: 1px solid var(--skc-line, #dedbd6);
}

/* Tools whose own root fills the card: the legacy roots already reset their
   own width in tool-pages.css, so they only need the padding back. */
body.sk-tool-ui .sk-tool-page .sk-tool-card > .sk-tool-card-body {
  padding: 20px 22px 18px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card > .sk-tool-card-body > :first-child {
  margin-top: 0;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card > .sk-tool-card-body > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * GPA Calculator: course rows.
 *
 * The row is a four-column grid -- 2.5fr name, 1.5fr grade, 1.2fr credits,
 * auto delete -- but the delete button is a fixed 40px and the row has
 * 0.75rem gaps, so on the single-column card the name and grade columns
 * collapse and the controls stack into separate lines. Give the row explicit
 * minimums so it holds its shape, and let the name column take the space.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page .sk-tool-card .course-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(96px, 1.2fr) minmax(84px, 0.9fr) 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .course-row > * {
  min-width: 0;
  width: 100%;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .course-row .btn-delete {
  width: 36px !important;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  body.sk-tool-ui .sk-tool-page .sk-tool-card .course-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  }

  body.sk-tool-ui .sk-tool-page .sk-tool-card .course-row .course-name {
    grid-column: 1 / -1;
  }
}

/* The summary panel carried a pink gradient and a pink-tinted border. On the
   house card that reads as a different product, so it takes the same hairline
   and the same ink as everything else, and the score gets the serif accent
   the h1 uses. */
body.sk-tool-ui .sk-tool-page .sk-tool-card .summary-dashboard {
  margin-top: 18px;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid var(--skc-line, #dedbd6);
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .gpa-score {
  color: var(--skc-ink, #111111) !important;
  font-family: var(--skc-serif);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .gpa-label,
body.sk-tool-ui .sk-tool-page .sk-tool-card .gpa-subtext {
  color: var(--skc-muted, #6c6862);
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .gpa-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .gpa-value-box {
  text-align: right;
}

/* Six-up statistics rows, for the reading-time tool: two time estimates plus
   four counts. Same reasoning as --five; the base grid is four. */
body.sk-tool-ui .sk-tool-page .sk-tool-stats--reading {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Reading and speaking times are the headline, so they sit above the counts
   on their own row rather than sharing one very narrow strip. */
body.sk-tool-ui .sk-tool-page .sk-tool-stats--reading > div:nth-child(n + 4) {
  border-top: 1px solid var(--skc-line, #dedbd6);
  margin-top: 8px;
  padding-top: 8px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-stats--reading > div:nth-child(4) {
  border-left: 0;
  padding-left: 0;
}

/* ------------------------------------------------------------------ *
 * Alphabetical Order Tool: fold the two panels into the house card.
 *
 * Same shape as the media tools -- a two-column grid of separate rounded
 * cards with a 22px gap -- but with its own purple palette (#68438b). The
 * widget markup is good and the script is sound, so only the shell changes:
 * one card, hairline divider, ink bar.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page .sk-az-workspace {
  gap: 0;
  margin-top: 0;
  border: 1px solid var(--skc-line, #dedbd6);
  border-radius: var(--skc-radius, 4px);
  background: var(--skc-surface, #ffffff);
  box-shadow: 0 1px 0 rgba(18, 17, 15, 0.04);
  overflow: hidden;
  position: relative;
}

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

body.sk-tool-ui .sk-tool-page .sk-az-workspace > .sk-az-panel {
  padding: 20px 22px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

body.sk-tool-ui .sk-tool-page .sk-az-workspace > .sk-az-panel + .sk-az-panel {
  border-left: 1px solid var(--skc-line, #dedbd6);
}

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

  body.sk-tool-ui .sk-tool-page .sk-az-workspace > .sk-az-panel + .sk-az-panel {
    border-left: 0;
    border-top: 1px solid var(--skc-line, #dedbd6);
  }
}

/* The panel headings take the same small-caps label as the other cards. */
body.sk-tool-ui .sk-tool-page .sk-az-workspace > .sk-az-panel > h2:first-child {
  margin: 0 0 12px;
  color: var(--skc-muted, #6c6862);
  font-family: var(--skc-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Purple accents become the house ink and accent, so this tool stops being a
   different product from the one beside it. */
body.sk-tool-ui .sk-tool-page .sk-az-workspace .sk-az-button {
  border-radius: 3px;
  background: var(--skc-ink, #111111);
  color: #ffffff !important;
}

body.sk-tool-ui .sk-tool-page .sk-az-workspace .sk-az-button.secondary {
  border-color: var(--skc-line, #dedbd6);
  background: transparent;
  color: var(--skc-ink, #111111) !important;
}

body.sk-tool-ui .sk-tool-page .sk-az-workspace .sk-az-button:hover:not(:disabled) {
  background: var(--skc-accent, #0007cb);
  border-color: var(--skc-accent, #0007cb);
}

body.sk-tool-ui .sk-tool-page .sk-az-workspace :is(.sk-az-select, .sk-az-input) {
  border-radius: 3px;
}

body.sk-tool-ui .sk-tool-page .sk-az-workspace .sk-az-check input {
  accent-color: var(--skc-ink, #111111);
}

body.sk-tool-ui .sk-tool-page .sk-az-workspace :is(.sk-az-select, .sk-az-input, .sk-az-textarea):focus-visible {
  outline: 2px solid var(--skc-accent, #0007cb);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ *
 * Percentage Calculator: flatten the nested boxes.
 *
 * .pct-card is itself a bordered, rounded, shadowed card, and each
 * .calc-section inside it is another bordered box. Wrapped in the house card
 * that produces a card inside a card with three boxes inside that, which
 * reads as a mockup rather than a tool. Drop the inner borders and let the
 * hairlines do the separating.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page .sk-tool-card .pct-card {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .calc-section {
  padding: 14px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--skc-line, #dedbd6) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .calc-section:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .section-subtitle {
  color: var(--skc-muted, #6c6862);
  font-family: var(--skc-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .pct-input {
  border-radius: 3px;
  border-width: 1px;
  border-color: var(--skc-line, #dedbd6);
  background: transparent;
  font-family: inherit;
  font-weight: 500;
  color: var(--skc-ink, #111111);
}

/* The increase/decrease figure was coral while the other two were black. One
   colour for all three results, with the sign carrying the meaning instead. */
body.sk-tool-ui .sk-tool-page .sk-tool-card .result-display,
body.sk-tool-ui .sk-tool-page .sk-tool-card .result-display strong {
  color: var(--skc-ink, #111111) !important;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .result-display strong {
  font-family: var(--skc-serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

body.sk-tool-ui .sk-tool-page .sk-tool-card .calc-row {
  gap: 8px;
  align-items: center;
}

/* ------------------------------------------------------------------ *
 * Ad units inside the QR grids.
 *
 * .sk-qr is a two-column grid. An ad unit placed by auto-flow lands in a
 * single column, and because a block grid item sizes to its content unless
 * told otherwise, the AdSense <ins> inside collapsed the whole unit to 93px
 * -- narrower than any slot, which makes adsbygoogle.push() throw
 * "No slot size for availableWidth=93" on all three QR generators.
 *
 * Giving the unit width:100% lets it fill its column (measured 812px), and
 * spanning both columns takes it to the 970px cap the shell already sets.
 * The spanning form is preferred because a 970px unit beside a 340px output
 * panel reads as a misplaced block.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page :is(.sk-qr, .sk-qr-scanner) > .sk-ad {
  width: 100%;
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ *
 * Give the remaining tool roots the house card.
 *
 * Every tool below still renders as loose blocks on paper: its own root sets
 * a max-width, its own padding and often its own border, but nothing groups
 * the widget into a card the way the Case Converter is grouped. Rather than
 * rebuild fifteen pages and risk breaking their scripts, the root itself
 * becomes the card. Same hairline, same 4px radius, same ink bar.
 *
 * The `::before` bar needs position:relative on the root, and a root that
 * already has its own 2px top accent gets it replaced rather than doubled.
 * ------------------------------------------------------------------ */
body.sk-tool-ui .sk-tool-page :is(
  .studykit-fixer-container,
  .sk-cit-root,
  .sk-pal-root,
  .sk-planner-root,
  .sk-cornell-root,
  .sk-quiz-root,
  .sk-video-page,
  .sk-shot-page,
  .sk-po-page,
  .sk-rewrite-wrap,
  .sk-bf-page,
  .sk-qr-scanner
) {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 22px 18px !important;
  border: 1px solid var(--skc-line, #dedbd6) !important;
  border-radius: var(--skc-radius, 4px) !important;
  background: var(--skc-surface, #ffffff) !important;
  box-shadow: 0 1px 0 rgba(18, 17, 15, 0.04) !important;
  overflow: hidden;
}

body.sk-tool-ui .sk-tool-page :is(
  .studykit-fixer-container,
  .sk-cit-root,
  .sk-pal-root,
  .sk-planner-root,
  .sk-cornell-root,
  .sk-quiz-root,
  .sk-video-page,
  .sk-shot-page,
  .sk-po-page,
  .sk-rewrite-wrap,
  .sk-bf-page,
  .sk-qr-scanner
)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--skc-ink, #111111);
}

/* The PDF editor and screen recorder already carry .sk-media-page with
   .sk-media-panel children, so they only need the panels folded together. */
body.sk-tool-ui .sk-tool-page .sk-media-page > .sk-media-panel {
  padding: 20px 22px 18px;
  border: 0;
  border-top: 1px solid var(--skc-line, #dedbd6);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.sk-tool-ui .sk-tool-page .sk-media-page > .sk-media-panel:first-of-type {
  border-top: 0;
}

body.sk-tool-ui .sk-tool-page .sk-media-page {
  position: relative;
  padding: 20px 22px 18px !important;
  border: 1px solid var(--skc-line, #dedbd6) !important;
  border-radius: var(--skc-radius, 4px) !important;
  background: var(--skc-surface, #ffffff) !important;
  box-shadow: 0 1px 0 rgba(18, 17, 15, 0.04) !important;
  overflow: hidden;
}

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

/* A form or section that already carried its own border and radius now sits
   inside the card, which reads as a card inside a card. The check is on the
   element being a direct child of the root, so drop zones and text areas deep
   inside the widget keep their own borders. */
body.sk-tool-ui .sk-tool-page :is(
  .studykit-fixer-container,
  .sk-cit-root,
  .sk-pal-root,
  .sk-planner-root,
  .sk-cornell-root,
  .sk-quiz-root,
  .sk-video-page,
  .sk-shot-page,
  .sk-po-page,
  .sk-rewrite-wrap,
  .sk-bf-page,
  .sk-qr-scanner,
  .sk-media-page
) > :is(form, section, article, div)[class] {
  border-radius: 0;
}

body.sk-tool-ui .sk-tool-page :is(.sk-cit-root, .sk-po-page, .sk-rewrite-wrap, .sk-bf-page, .sk-qr-scanner)
  > form:first-of-type {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Named directly: the citation generator's form is the widget itself, not a
   wrapper, so it should not carry card chrome of its own. */
body.sk-tool-ui .sk-tool-page .sk-tool-card .sk-cit-form,
body.sk-tool-ui .sk-tool-page .sk-cit-root .sk-cit-form {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The roots the first pass missed. Same treatment: the root becomes the card.
 *
 * .sk-content-hub was the one still uncovered, and it is the root used by the
 * PDF fixer, the alphabetical order tool, the redaction tool and the screenshot
 * tool -- four pages that have therefore never rendered the card, despite an
 * earlier commit reporting full coverage. They were not in that commit's list
 * and the regression's card column has read false for them ever since.
 *
 * It is scoped to body.sk-tool-ui like the others, which matters more here than
 * anywhere else: .sk-content-hub is also the root of guide and article pages,
 * and those must stay plain prose rather than become cards.
 *
 * The remaining roots below finish the job. The earlier commit listed fifteen
 * pages as carded but these fourteen were never actually in any rule, so they
 * kept rendering as loose panels: the four PDF tools share .sk-media-page, and
 * the converter, background remover and audio compressor each have their own
 * root. Each was checked first for padding, border or background of its own;
 * none declared any, so the card applies without overriding a component. */
body.sk-tool-ui .sk-tool-page :is(.sk-qr, .sk-image-tool, .sk-guide-root, .sk-fc-root, .sk-content-hub, .sk-media-page, .sk-dp-root, .sk-bg-root, .sk-ac-root, .sk-rewrite-wrap, .sk-cit-root, .sk-pal-root, .sk-video-page, .sk-planner-root, .sk-cornell-root, .sk-quiz-root) {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 22px 18px !important;
  border: 1px solid var(--skc-line, #dedbd6) !important;
  border-radius: var(--skc-radius, 4px) !important;
  background: var(--skc-surface, #ffffff) !important;
  box-shadow: 0 1px 0 rgba(18, 17, 15, 0.04) !important;
}

body.sk-tool-ui .sk-tool-page :is(.sk-qr, .sk-image-tool, .sk-guide-root, .sk-fc-root, .sk-content-hub, .sk-media-page, .sk-dp-root, .sk-bg-root, .sk-ac-root, .sk-rewrite-wrap, .sk-cit-root, .sk-pal-root, .sk-video-page, .sk-planner-root, .sk-cornell-root, .sk-quiz-root)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--skc-ink, #111111);
}

/* .sk-qr is a two-column grid, so the bar needs the outer corners clipped --
   but overflow:hidden would break the sticky positioning some QR panels use,
   so the radius is applied and the bar inset instead. */
body.sk-tool-ui .sk-tool-page .sk-qr::before {
  right: 1px;
  left: 1px;
  border-radius: 3px 3px 0 0;
}

/* A root that carries its own inner panel border now shows a card inside a
   card. The inner panel is the widget's own frame, so it loses its outer
   border and keeps everything else. Chosen structurally rather than by class
   because the flashcards panel is an unclassed div. */
body.sk-tool-ui .sk-tool-page :is(.sk-fc-root, .sk-guide-root, .sk-image-tool, .sk-qr)
  > :is(div, section, article):not([class]) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Panels inside those roots that are named keep their borders only if they
   are content boxes (drop zones, stages, cards), not page-level frames. */
body.sk-tool-ui .sk-tool-page :is(.sk-fc-root, .sk-guide-root) > div > div:first-child:not([class]) {
  border: 0 !important;
}

/* The guide column was pinned to 760px while the card above it is 1180px, so a
   third of the page sat empty beside the prose. 820px is still a comfortable
   measure for body copy at this size -- roughly 95 characters, the upper end of
   what is readable -- and it closes most of the gap without stretching text to
   the full card width. */
body.sk-tool-ui .sk-tool-page .sk-tool-guide {
  max-width: 820px;
}

/* Prose is one measure; tables and code inside the guide were being squeezed
   by the same limit even though they read fine wider. */
body.sk-tool-ui .sk-tool-page .sk-tool-guide :is(table, pre, figure) {
  max-width: none;
}

/* Each tool page gained one explanatory section that says what the tool is good
   at and, more usefully, where it actually fails. It is plain prose in the same
   measure as the guide above it, so the page does not acquire a second type
   scale: same size, same colour, same leading, distinguished only by the
   heading rule that already separates sections elsewhere on the page. */
body.sk-tool-ui .sk-tool-page .sk-tool-deep {
  max-width: 820px;
  margin: 34px 0 8px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-deep h2 {
  margin: 0 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--skc-line, #dedbd6);
  font-size: 1.16rem;
  letter-spacing: -0.012em;
  color: var(--skc-ink, #12110f);
}

body.sk-tool-ui .sk-tool-page .sk-tool-deep p {
  margin: 0 0 14px;
  font-size: 0.975rem;
  line-height: 1.66;
  color: var(--skc-muted, #46423b);
}

body.sk-tool-ui .sk-tool-page .sk-tool-deep p:last-child {
  margin-bottom: 0;
}

/* "Clear text" is a secondary action under a text box, not a decision worth
   framing. As a bordered 46px button it read as a competing call to action and
   drew the eye before the counts did. Quiet variant becomes a plain text
   control that keeps its size as a touch target but loses the box. */
body.sk-tool-ui .sk-tool-page .sk-tool-actions {
  margin-top: 12px;
}

body.sk-tool-ui .sk-tool-page .sk-tool-btn--quiet {
  min-height: 0;
  padding: 6px 2px;
  border-color: transparent;
  background: transparent;
  color: var(--skc-muted, #6d675e);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

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

/* The paste area is where the work happens, so it gets room to hold a real
   passage instead of showing four lines and a scrollbar. Fixed min-height
   rather than rows alone, because rows is a hint the browser may ignore once
   the element is styled. */
body.sk-tool-ui .sk-tool-page .sk-tool-input-wrap textarea,
body.sk-tool-ui .sk-tool-page .sk-tool-pane textarea {
  min-height: 360px;
  padding: 16px 18px;
  line-height: 1.7;
  font-size: 1.02rem;
}

@media (max-width: 860px) {
  body.sk-tool-ui .sk-tool-page .sk-tool-input-wrap textarea,
  body.sk-tool-ui .sk-tool-page .sk-tool-pane textarea {
    min-height: 260px;
  }
}

/* Blocksy sizes every textarea with `height: 40px`, which overrides the rows
   attribute. My earlier rule used min-height on .sk-tool-input-wrap and
   .sk-tool-pane textareas only, so the quiz answer box and the Cornell note
   cells -- which sit straight on the tool root -- collapsed to one line despite
   declaring rows="7". This resets height and lets rows do its job again. */
body.sk-tool-ui .sk-tool-page textarea {
  height: auto;
}

/* The quiz answer box is a place you write a paragraph, so it gets real room.
   The three Cornell cells are lines of a page, so they keep a fixed comfortable
   height instead of growing with content. */
body.sk-tool-ui .sk-tool-page #sk-quiz-in {
  min-height: 160px;
}

body.sk-tool-ui .sk-tool-page #sk-cn-cues,
body.sk-tool-ui .sk-tool-page #sk-cn-notes {
  min-height: 200px;
}

body.sk-tool-ui .sk-tool-page #sk-cn-summary {
  min-height: 120px;
}

/* The prompt builder's note field is a single thought, not a passage -- 120px
   was the theme default showing through, not a decision. */
body.sk-tool-ui .sk-tool-page #sk-po-var-extraContext {
  min-height: 88px;
}

/* The prompt box is the paste target for this tool, the same way the textarea
   is for the rewriter and the word counter. 150px showed four lines of a long
   prompt. */
body.sk-tool-ui .sk-tool-page #sk-po-input {
  min-height: 300px;
  padding: 16px 18px;
  line-height: 1.7;
}

/* The punctuation fixer still carries its original pastel theme in an inline
   <style> block: pink and lilac fills on the action buttons, and a red clear
   button (#f43f5e on light, a pale pink #ff9db2 in dark). The broader house
   overrides already neutralise its panels and text, so only these two accents
   were still visible. This puts them on the same ink/line treatment as every
   other secondary action in the tool set. */
body.sk-tool-ui .sk-tool-page .studykit-fixer-container .fixer-actions-row button,
body.sk-tool-ui .sk-tool-page .studykit-fixer-container .fixer-actions-row .btn-copy,
body.sk-tool-ui .sk-tool-page .studykit-fixer-container .fixer-actions-row .btn-clear {
  background-color: transparent;
  color: var(--skc-ink);
  border-color: var(--skc-line);
}

body.sk-tool-ui .sk-tool-page .studykit-fixer-container .fixer-actions-row button:hover,
body.sk-tool-ui .sk-tool-page .studykit-fixer-container .fixer-actions-row .btn-copy:hover,
body.sk-tool-ui .sk-tool-page .studykit-fixer-container .fixer-actions-row .btn-clear:hover {
  background-color: var(--skc-linen, transparent);
  color: var(--skc-ink);
  border-color: var(--skc-stone, var(--skc-line));
  transform: none;
}

/* color-scheme.css tints every clear button red in dark mode (#ffb0ba on
   #3a1c22) as a destructive-action cue. On a plain "Clear" beside "Fix
   Spaces" it carries no fill and no icon, so the tint reads as a leftover
   rather than a warning -- and the word counter's clear control is already a
   quiet neutral. Matched here for consistency across the tool pages. */
html[data-sk-scheme="dark"] body.sk-tool-ui .sk-tool-page .fixer-actions-row .btn-clear,
html[data-sk-scheme="dark"] body.sk-tool-ui .sk-tool-page .humanizer-actions-row .btn-clear {
  background: transparent;
  border-color: var(--sk-line, #2d2c28);
  color: var(--sk-ink, #f2f0eb);
}

html[data-sk-scheme="dark"] body.sk-tool-ui .sk-tool-page .fixer-actions-row .btn-clear:hover,
html[data-sk-scheme="dark"] body.sk-tool-ui .sk-tool-page .humanizer-actions-row .btn-clear:hover {
  background: transparent;
  color: var(--sk-ink, #f2f0eb);
}