/*
 * Copyright (C) 2026, Alex Morales
 * Copyright (C) 2026, sfw.tools sfwtools.com
 *
 * All rights reserved.
 */

:root {
  --bg: #ffffff;
  --bg-alt: #f4f4f5;
  --text: #18181b;
  --text-muted: #52525b;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --border: #d4d4d8;
  --error: #b91c1c;
  --error-bg: #fef2f2;
  --radius: 8px;
}

html {
  background: var(--accent);
}

@media (prefers-color-scheme: dark) {
:root {
    --bg: #18181b;
    --bg-alt: #27272a;
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --accent: #3b82f6;
    --accent-text: #ffffff;
    --border: #3f3f46;
    --error: #fca5a5;
    --error-bg: #450a0a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  /* Flex pin so short pages keep the footer at the viewport bottom instead of
     leaving it floating above a gray void (see task 73). */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Any element carrying the hidden attribute stays hidden, even when its own
   class sets a display value (a component display rule would otherwise beat
   the UA default and resurface it — this bit the Run button). */
[hidden] {
  display: none !important;
}

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 1.5rem;
  /* Brand left, About button right. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Round question-mark button that opens the site-wide About dialog. */
.icon-button {
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-button svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- About dialog ---- */

.info-dialog {
  /* No border: against the blue hero the 1px var(--border) line reads as a
     white ring. The dimmed backdrop separates the card from the page. */
  border: none;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  padding: 0;
  width: min(44rem, 92vw);
}

.info-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: info-pop 0.18s ease-out;
}

@keyframes info-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-dialog[open],
  .guide-dialog[open] {
    animation: none;
  }
}

.info-dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
  backdrop-filter: blur(2px);
}

/* Branded band: accent gradient, white wordmark, the promise up front so
   the eye lands on it first. */
.info-hero {
  position: relative;
  padding: 1.4rem 1.75rem 1.5rem;
  /* The same blue as the site's top border gradient strip, held mostly
   saturated so the fade toward the background stays subtle. */
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 82%, var(--bg)));
  color: #fff;
  /* Full dialog radius on top only: the hero must fill the top corners (no
     border to hide a sliver behind) and sit square on the body below. */
  border-radius: var(--radius) var(--radius) 0 0;
}

.info-brand {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.info-tagline {
  margin: 0.15rem 0 0;
  font-size: 0.98rem;
  opacity: 0.92;
}

.info-lead {
  margin: 0.85rem 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  opacity: 0.96;
}

button.info-close-btn,
.info-close-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0.85;
}

button.info-close-btn:hover {
  opacity: 1;
  background: rgb(255 255 255 / 0.15);
}

/* Reasons as scannable tiles: tinted icon chip plus one sentence each. */
.info-body {
  padding: 1.25rem 1.75rem 1.4rem;
  overflow-y: auto;
}

.info-body h3 {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.65rem;
}

.info-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 0.7rem 0.8rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.info-chip {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.info-chip svg {
  width: 1.05rem;
  height: 1.05rem;
}

.info-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* GitHub link inside the open-source tile: mark plus label on its own
   line under the text, quiet by default, accent on hover. */
.info-tile-github {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.info-tile-github svg {
  width: 1rem;
  height: 1rem;
}

.info-tile-github:hover {
  color: var(--accent);
}

/* Small GitHub mark next to the footer's "on GitHub" link. */
.github-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.github-mark {
  width: 1em;
  height: 1em;
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.brand-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.brand-tagline {
  font-size: 0.8rem;
  color: var(--text-muted);
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  /* Grow to fill the flex column so the footer is pushed to the bottom. */
  flex: 1 0 auto;
  width: 100%;
}

/* Tool pages cap the workspace at a comfortable reading width; the home page
   keeps the wider catalog grid (a class beats the theme's element-level rule). */
.tool-main {
  max-width: 56rem;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
}

.home-subtitle {
  color: var(--text-muted);
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.1rem;
  margin: 2rem 0 0.75rem;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
}

.why {
  margin-top: 2.5rem;
}

.why ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem 1.5rem;
}

.why li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.why li::before {
  content: '✓';
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 700;
}

.how {
  margin-top: 3rem;
}

.how ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem 2.5rem;
}

.how li {
  border-left: 5px solid var(--accent);
  padding-left: 1.25rem;
}

.how h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.how p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  /* Never shrink below content; the flex pin relies on it. */
  flex-shrink: 0;
}

/* Footer links blend in with the muted footer text rather than shouting
   accent-blue; the whole footer is quiet, secondary chrome. */
.site-footer a {
  color: inherit;
}

.tool-grid section {
  margin-bottom: 1.5rem;
}

.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}

/* Each grid cell is a flex container so the card inside stretches to the full
   cell height; grid rows align items to the tallest tile in the row, which
   makes every tile in a row the same size. */
.tool-list li {
  display: flex;
}

.tool-card {
  display: block;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  text-decoration: none;
  color: inherit;
}

.tool-icon {
  display: flex;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.tool-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.tool-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.tool-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.tool-card:hover,
.tool-card:focus-visible {
  border-color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.back-link {
  color: var(--accent);
}

.tool-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tool-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tool-title .tool-icon {
  margin: 0;
  align-self: center;
}

.tool-title .tool-icon svg {
  width: 2rem;
  height: 2rem;
}

/* Inside the centered title row the h1 must be margin- and leading-neutral,
   or its margin box centers while the glyphs ride off-center vs the icon.
   The tiny top offset is optical: caps-heavy strings carry no descender ink,
   so their visible mass sits above the line-box center. */
.tool-title h1 {
  margin: 0;
  line-height: 1.2;
  position: relative;
  top: 0.1rem;
}

.guide-toggle {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

.guide-toggle:hover {
  border-color: var(--accent);
}

.guide-dialog {
  position: relative;
  /* Borderless like the About dialog; the backdrop does the separating. */
  border: none;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  padding: 0;
  width: min(42rem, 92vw);
  max-height: 80vh;
}

/* A dialog's UA stylesheet hides it with dialog:not([open]){display:none}.
   That rule loses to our own display declaration, so we must pin both states
   to the [open] attribute, otherwise the guide is always visible and can't
   be closed. */
.guide-dialog[open] {
  display: flex;
  flex-direction: column;
  /* Same entrance as the About dialog. */
  animation: info-pop 0.18s ease-out;
}

.guide-dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
  /* Same soft blur as the About dialog. */
  backdrop-filter: blur(2px);
}

.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  /* Full dialog radius, matching the borderless About hero. */
  border-radius: var(--radius) var(--radius) 0 0;
}

.guide-title {
  margin: 0;
  font-size: 1.1rem;
}

/* The guide's close rides in the head's flex row, so align-items centers it
   against the title at any theme's padding. The button selector out-ranks
   the theme's .guide-close-btn overrides. */
.guide-dialog .guide-close {
  /* Nudge right: the button's own 0.5rem padding reads as extra inset. */
  margin: 0 -0.35rem 0 0;
}

button.guide-close-btn {
  display: block;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  opacity: 0.85;
}

button.guide-close-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  opacity: 1;
}

/* showModal() focuses the close button on open; the default focus ring
   reads as a stray box there. Keyboard users still get a ring, and Esc
   still closes. */
button.guide-close-btn:focus,
.info-close-btn:focus {
  outline: none;
}

button.guide-close-btn:focus-visible,
.info-close-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.guide-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

.guide-body h3 {
  font-size: 0.95rem;
  margin: 1rem 0 0.4rem;
}

.guide-summary {
  margin: 0;
}

.guide-body ul,
.guide-body ol {
  margin: 0.2rem 0 0.4rem;
  padding-left: 1.4rem;
}

.guide-body li {
  margin: 0.2rem 0;
}

.guide-body dl {
  margin: 0.2rem 0 0.4rem;
}

.term {
  margin: 0.6rem 0;
}

.guide-body dt {
  font-weight: 600;
}

.guide-body dd {
  margin: 0.1rem 0 0;
  color: var(--text-muted);
}

.demo-placeholder {
  margin: 0;
  color: var(--text-muted);
  font-style: italic;
}

.demo-video {
  max-width: 100%;
  border-radius: var(--radius);
  background: var(--bg);
}

.module-line {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The module list is newline-joined textContent; keep one module per line. */
  white-space: pre-line;
}

.module-line + .module-line {
  margin-top: 0.25rem;
}

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

.options {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tools with no options emit an empty form (the runner looks it up
   unconditionally), so it must render as nothing rather than an empty box. */
.options:empty {
  display: none;
}

.option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Checkbox options lay out inline: box left, label right, help wrapped under.
   The label's htmlFor keeps clicking the label toggling the box. */
.option--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.option--checkbox label {
  font-weight: 500;
  cursor: pointer;
}

.option--checkbox .option-help {
  flex-basis: 100%;
  padding-left: 1.85rem;
}

/* Short numeric controls (manifest narrow flag): half the default input
   footprint so pairs like Length + How many fit one inline row. */
.option--narrow input[type='number'] {
  width: 6rem;
}

.option label {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Toggle options are segmented button groups (one active value). They read
   as a unit, so pages that use them flow all options inline in one tight
   row and lean on the title tooltip instead of visible help text. */
.option-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  /* The option is a column flex with default align-items: stretch, which
     would pull the segmented group out to the label's width and leave a
     blank border past the last button. Hug the buttons instead. */
  align-self: flex-start;
}

.option-toggle button {
  padding: 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.925rem;
  border: 0;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  /* Keep labels like "Code 128" and "EAN-13" on one line even when the
     segmented group is squeezed; a wrapped label reads as two controls. */
  white-space: nowrap;
}

.option-toggle button + button {
  border-left: 1px solid var(--border);
}

.option-toggle button.active {
  background: var(--accent);
  color: #fff;
}

.options-inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  /* Slimmer than the stacked default: one tight row so the controls hug the
     fields above and below. */
  margin: 0.5rem 0 0.75rem;
}

.options-inline .option {
  margin: 0;
}

/* All option titles share one left offset, nudged slightly left of the
   control text inset as a light lead-in. */
.options-inline .option label {
  padding-left: calc(0.4rem + 1px);
}

.options-inline .option-toggle button {
  padding: 0.28rem 0.9rem;
}

.options-inline .option input[type='number'] {
  padding: 0.28rem 0.65rem;
}

.options-inline .option-help {
  display: none;
}

.option input[type='text'],
.option input[type='number'],
.option input[type='color'],
.option select {
  padding: 0.55rem 0.65rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.option input[type='checkbox'] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent);
}

.option-help {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-alt);
  cursor: pointer;
}

.drop-zone.drag-over {
  border-color: var(--accent);
  color: var(--accent);
}

.pdf-editor-drop {
  margin-top: 1.5rem;
}

.pdf-editor-status {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text-muted);
}

.pdf-page-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  column-gap: 0.2rem;
  row-gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.pdf-page-card.selected {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.pdf-page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0;
  cursor: grab;
}

.pdf-page-remove {
  position: absolute;
  top: 0.1rem;
  right: 0.45rem;
  z-index: 1;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}

.pdf-page-preview,
.pdf-page-rotate,
.pdf-page-menu-button {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}

.pdf-page-rotate {
  right: 0.45rem;
  bottom: 2.5rem;
  padding: 0.15rem;
}

.pdf-page-preview {
  right: 0.45rem;
  bottom: 4.75rem;
  padding: 0.15rem;
}

.pdf-page-menu-button {
  right: 0.45rem;
  bottom: 0.45rem;
  padding: 0;
  place-items: center;
}

.pdf-page-rotate:hover,
.pdf-page-rotate:focus-visible,
.pdf-page-preview:hover,
.pdf-page-preview:focus-visible,
.pdf-page-menu-button:hover,
.pdf-page-menu-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.pdf-page-preview svg,
.pdf-page-rotate svg,
.pdf-page-menu-button svg {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  margin: auto;
}

.pdf-page-preview svg {
  transform: translate(-1px, -1px);
}

.pdf-page-remove:hover,
.pdf-page-remove:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.pdf-page-remove svg {
  width: 100%;
  height: 100%;
}

.pdf-page-card.dragging {
  opacity: 0.45;
}

.pdf-page-thumbnail {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 18rem;
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
}

@keyframes pdf-page-rotate {
  from {
    opacity: 0.75;
    transform: rotate(-90deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.pdf-page-rotating {
  animation: pdf-page-rotate 0.28s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .pdf-page-rotating {
    animation: none;
  }
}

.pdf-page-menu {
  position: absolute;
  right: 0.45rem;
  bottom: 2.5rem;
  z-index: 2;
  display: flex;
  min-width: 9rem;
  flex-direction: column;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}

.pdf-page-menu[hidden] {
  display: none;
}

.pdf-page-menu-item {
  padding: 0.45rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.pdf-page-menu-item:hover,
.pdf-page-menu-item:focus-visible {
  background: var(--bg-alt);
}

.pdf-drop-indicator {
  position: absolute;
  z-index: 4;
  width: 0.2rem;
  border-radius: 0.1rem;
  background: var(--accent);
  pointer-events: none;
}

.pdf-editor-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.pdf-delete-dialog {
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.pdf-blank-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.guide-dialog.pdf-blank-dialog {
  padding: 0;
  border: none;
}

.pdf-blank-dialog .guide-head {
  justify-content: space-between;
}

.pdf-blank-dialog .guide-title {
  margin: 0;
}

.pdf-preview-body {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.guide-dialog.pdf-preview-dialog {
  width: min(70rem, 96vw);
  height: calc(100vh - 2rem);
  max-height: calc(100vh - 2rem);
}

.pdf-preview-dialog .pdf-preview-body {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1rem;
}

.pdf-preview-dialog .guide-head {
  justify-content: flex-end;
}

.pdf-preview-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
}

.pdf-blank-dialog h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

.pdf-blank-dialog label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.pdf-blank-dialog select,
.pdf-blank-dialog input {
  min-height: 2.4rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.pdf-blank-dimensions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.pdf-blank-dialog .pdf-blank-error {
  margin: 0 0 1rem;
}

.pdf-blank-dialog .pdf-delete-actions {
  margin-top: 1rem;
}

.pdf-blank-dialog .pdf-blank-close {
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
}

.pdf-blank-dialog .pdf-blank-close:hover,
.pdf-blank-dialog .pdf-blank-close:focus-visible {
  border-color: var(--accent);
  background: #fff;
  color: var(--accent);
}

.pdf-delete-dialog::backdrop {
  background: rgb(0 0 0 / 35%);
}

.pdf-delete-question {
  margin: 0 0 1rem;
  font-weight: 600;
}

.pdf-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.pdf-delete-dialog .pdf-dialog-cancel {
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
}

.pdf-delete-dialog .pdf-dialog-cancel:hover,
.pdf-delete-dialog .pdf-dialog-cancel:focus-visible {
  border-color: var(--accent);
  background: #fff;
  color: var(--accent);
}

.pdf-page-title {
  margin: 0;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
}

.pdf-add-document {
  display: flex;
  width: min(160px, 100%);
  height: auto;
  aspect-ratio: 200 / 259;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 0;
  background: var(--bg);
  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  justify-self: center;
  transform: translateY(0.35rem);
}

.pdf-add-document:hover,
.pdf-add-document:focus-visible {
  color: var(--accent);
}

.pdf-add-document-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 2px dashed currentColor;
  border-radius: 50%;
}

.pdf-add-document-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 32rem) {
  .pdf-page-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.15rem;
    row-gap: 0.6rem;
  }

  .pdf-page-card {
    padding: 0.35rem 0;
  }

  .pdf-page-thumbnail {
    max-height: 11rem;
  }

  .pdf-add-document {
    width: 136px;
    height: 176px;
    padding: 0.5rem;
  }
}

.drop-zone p {
  margin: 0;
}

/* Upload affordance icon + hint line above/below the drop text. */
.drop-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto 0.5rem;
  color: var(--text-muted);
}

.drop-hint {
  margin-top: 0.5rem !important;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Selected-files list: name + size, reorder (files mode), remove. */
.file-meta {
  margin-top: 0.5rem;
}

.file-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.85rem;
}

.file-row-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.file-row-btn {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.file-row-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.file-row-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.file-row-remove:hover:not(:disabled) {
  border-color: var(--error);
  color: var(--error);
}

.file-meta-summary {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Inline thumbnail of the picked file for single-file tools (image readers).
   It lives INSIDE the drop zone so the notice ("drop a file here") stays
   visible; the icon is hidden and the box tightens around the picture. */
.drop-zone.has-preview {
  padding: 1rem;
}

.drop-zone.has-preview .drop-icon {
  display: none;
}

.file-preview {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  margin: 0 auto 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

/* Image Editor workspace: the checkerboard indicates transparency while the
   canvas keeps the decoded image at native resolution for future operations. */
.image-editor {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.image-editor-drop.drop-zone {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.image-editor-drop.drop-zone.drag-over .image-editor-stage {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.image-editor-stage {
  position: relative;
  min-height: min(40rem, 72vh);
  height: min(40rem, 72vh);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #eeeeee 25%, transparent 25%), linear-gradient(-45deg, #eeeeee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eeeeee 75%), linear-gradient(-45deg, transparent 75%, #eeeeee 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.image-editor-stage.image-editor-selecting {
  cursor: crosshair;
}

.image-editor-stage.image-editor-crayon {
  cursor: crosshair;
}

@media (prefers-color-scheme: dark) {
  .image-editor-stage {
    background-color: #3f3f46;
    background-image: linear-gradient(45deg, #52525b 25%, transparent 25%), linear-gradient(-45deg, #52525b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #52525b 75%), linear-gradient(-45deg, transparent 75%, #52525b 75%);
  }
}

.image-editor-stage:active {
  cursor: grabbing;
}

.image-editor-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform-origin: center;
  box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 0.22);
}

.image-editor-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  pointer-events: none;
  transform-origin: center;
}

.image-editor-selection {
  position: absolute;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, #000 0 0.4rem, #fff 0.4rem 0.8rem) top / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, #000 0 0.4rem, #fff 0.4rem 0.8rem) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, #000 0 0.4rem, #fff 0.4rem 0.8rem) left / 2px 100% no-repeat,
    repeating-linear-gradient(0deg, #000 0 0.4rem, #fff 0.4rem 0.8rem) right / 2px 100% no-repeat;
  pointer-events: none;
}

.image-editor-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  padding: 2rem;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
}

.image-editor-empty small {
  font-size: 0.8rem;
}

.image-editor-drop-icon {
  width: 2rem;
  height: 2rem;
}

.image-editor-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.image-editor-status {
  min-height: 1.5rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.image-editor-status:empty {
  display: none;
}

.image-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.image-editor-tools {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.image-editor-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.image-editor-tool:hover,
.image-editor-tool:focus-visible,
.image-editor-tool.active {
  border-color: var(--border);
  background: var(--bg);
  color: var(--accent);
}

.image-editor-tool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.image-editor-tool svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.image-editor-crayon svg {
  transform: translate(0, -0.1rem) scale(1.2);
}

.image-editor-crayon-colors {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.35rem);
  left: 7.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 0.35rem 0.8rem rgb(15 23 42 / 14%);
}

.image-editor-crayon-color-button {
  width: 1.45rem;
  height: 1.45rem;
  margin-left: 0.3rem;
  padding: 0;
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}

.image-editor-crayon-color-button:hover,
.image-editor-crayon-color-button:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.image-editor-crayon-color-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.image-editor-crayon-swatch {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 18%);
  cursor: pointer;
}

.image-editor-crayon-swatch:hover,
.image-editor-crayon-swatch:focus-visible,
.image-editor-crayon-swatch.active {
  border-color: var(--accent);
}

.image-editor-crayon-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.image-editor-crayon-color-input {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.image-editor-zoom-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.image-editor-zoom-tools > button {
  padding: 0.1rem 0.5rem;
  font-size: 1.5rem;
  line-height: 1;
}

.image-editor-zoom-tools > button svg {
  position: relative;
  top: 2px;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.image-editor-action-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.image-editor-zoom-select {
  min-width: 4.5rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.image-editor-details {
  margin: -0.65rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: right;
}

.image-editor-quality-indicator {
  display: flex;
  justify-content: space-between;
  margin: 0;
  line-height: 1.1;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.image-editor-controls {
  margin: 0;
}

.image-editor-download {
  min-height: 2.35rem;
}

.image-editor-controls .option input[type='range'] {
  width: 100%;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  accent-color: var(--accent);
  appearance: none;
}

.image-editor-controls .option input[type='range']::-webkit-slider-runnable-track {
  height: 0.2rem;
  border-radius: 999px;
  background: #cbd5e1;
}

.image-editor-controls .option input[type='range']::-webkit-slider-thumb {
  width: 0.25rem;
  height: 1.25rem;
  margin-top: -0.525rem;
  border: 0;
  border-radius: 0.15rem;
  background: var(--accent);
  cursor: pointer;
  appearance: none;
}

.image-editor-controls .option input[type='range']::-moz-range-track {
  height: 0.2rem;
  border-radius: 999px;
  background: #cbd5e1;
}

.image-editor-controls .option input[type='range']::-moz-range-progress {
  height: 0.2rem;
  background: #cbd5e1;
}

.image-editor-controls .option input[type='range']::-moz-range-thumb {
  width: 0.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 0.15rem;
  background: var(--accent);
  cursor: pointer;
}

.image-editor-controls .option input[type='range']:disabled::-webkit-slider-thumb,
.image-editor-controls .option input[type='range']:disabled::-moz-range-thumb {
  background: var(--text-muted);
}

.image-editor-quality-option {
  width: 10rem;
  min-width: 10rem;
  flex: 0 0 10rem;
  gap: 0.15rem;
}

.image-editor-background-option {
  width: 6rem;
  min-width: 6rem;
  flex: 0 0 6rem;
}

.image-editor-controls .option input[type='color'] {
  width: 6rem;
  height: 2rem;
  padding: 0.15rem;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.image-editor-controls .option input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

.image-editor-controls .option input[type='color']::-webkit-color-swatch {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
}

.image-editor-controls .option[aria-disabled='true'] {
  opacity: 0.55;
}

.image-editor-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.image-editor-replace-dialog {
  width: min(26rem, 92vw);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  padding: 1.25rem;
}

.image-editor-replace-dialog::backdrop {
  background: rgb(0 0 0 / 35%);
}

.image-editor-replace-dialog h2 {
  margin: 0 0 1rem;
}

.image-editor-dialog-actions {
  display: flex;
  justify-content: end;
  gap: 0.5rem;
}

@media (max-width: 38rem) {
  .image-editor-stage {
    min-height: 20rem;
    height: 65vh;
  }

  .image-editor-controls {
    align-items: stretch;
    flex-direction: column;
  }
}

.tool-block {
  margin: 1rem 0;
}

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.block-label {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.block-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.text-section {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.text-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Label rows sit a touch right so their glyphs line up with the first
   character inside the box below (padding + border of that box).
   The field label and its Paste/Load helpers share one row: label left,
   buttons right. */
.text-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-left: calc(0.65rem + 1px);
}

.text-field label {
  font-weight: 600;
  font-size: 0.9rem;
}

.text-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

/* A labeled micro-group rendered as ONE bordered container, so which
   buttons belong together is obvious at a glance: eyebrow caption inside,
   ghost buttons after it. */
.tool-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.16rem 0.22rem 0.16rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.tool-cluster-label {
  margin-right: 0.4rem;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  /* Optical nudge: uppercase-only strings carry no descender ink, so they
     read as riding high next to the button text; drop them to the shared
     center. */
  position: relative;
  top: 1px;
}

.text-tool {
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: calc(var(--radius) - 3px);
  background: transparent;
  color: var(--text);
}

.text-tool:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--accent);
}

.text-field textarea {
  padding: 0.65rem;
  font-size: 0.95rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
  resize: vertical;
}

.text-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Dragging a file over the textarea highlights it as a drop target. */
.text-field.drag-over textarea {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.file-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Visually hidden but available to screen readers and the accessibility tree.
   Used for the sr-status live region on tool pages. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The actions row holds Run plus any action-option buttons. */
.actions {
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.primary {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  /* Action buttons carry a small direction icon before their label. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Action rows with injected buttons spread edge to edge: Encode left,
   Decode right. */
.actions.spread {
  justify-content: space-between;
}

.progress-wrap {
  margin: 1rem 0;
}

.progress-track {
  height: 0.6rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.15s linear;
}

.progress-label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.error-box {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.results {
  margin: 1.5rem 0;
}

/* The Output section is a permanent box so the layout never jumps between an
   empty and a filled state: it always has a border, padding, and min-height,
   and the placeholder lives inside it. */
.output-block .results {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--bg-alt);
  min-height: 12rem;
}

/* Linked tools (two mirrored textareas) have no separate results box: the
   boxes ARE the output and typing drives conversion. The actions row stays:
   Encode/Decode buttons force a direction. */
body.tool-linked .output-block {
  display: none;
}

/* Label left, Download + Copy buttons right — the output twin of
   .text-field-head. */
.output-head {
  margin-bottom: 0.5rem;
}

.output-head:has(.output-label:empty) {
  display: none;
}

/* Label left, actions (e.g. the Paste button) right — the input twin of
   .output-head. */
.input-head {
  margin: 1.5rem 0 0.5rem;
}

.input-label {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  padding-left: calc(0.75rem + 1px);
}

.output-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.output-label {
  padding-left: calc(0.75rem + 1px);
}

/* The Output panel is itself the frame, so results render flat inside it:
   no nested card-in-card. */
.output-block .result-text {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.output-block .result-preview,
.output-block .result-list li {
  margin: 0;
}

.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.metrics-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem 0.5rem;
}

.metric-highlights,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
}

.metric-card {
  display: grid;
  min-height: 4.5rem;
  align-content: start;
  gap: 0.2rem;
  padding: 0.8rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg);
}

.metric-value {
  color: var(--text);
  font-size: 1.5rem;
}

.metric-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.metric-secondary {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.15;
}

.metric-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.metric-group-title {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.result-text {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-all;
}

.result-list li {
  margin-bottom: 0.5rem;
}

/* In-page preview of image outputs (QR codes, converted images, palettes,
   favicons). White backdrop so transparent PNGs and light images read
   clearly; max-height keeps tall images from dominating the page. */
.result-image {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

/* Single-image output (QR codes, converted images): the picture IS the
   result, so it fills the Output panel flush to its frame instead of
   floating on its own bordered card. */
.output-block .results.results-image {
  padding: 0;
}

.results-image .result-image {
  max-height: none;
  margin-bottom: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
}

.result-preview {
  margin-top: 0.5rem;
}

.copy {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.copy:disabled {
  opacity: 0.6;
  cursor: default;
}

.download {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.pomodoro-timer {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.pomodoro-display {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--text) 7%, transparent);
}

.pomodoro-session {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pomodoro-clock {
  color: var(--text);
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.pomodoro-timer-row {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4.5rem;
  justify-content: center;
  margin: 0.75rem 0 0.25rem;
  width: min(100%, 32rem);
}

.pomodoro-session {
  margin: 0;
  color: var(--text-muted);
}

.pomodoro-stages {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3rem;
  width: auto;
  max-width: 100%;
}

.pomodoro-cycle-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.pomodoro-stage-group {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
}

.pomodoro-stages button {
  width: 8rem;
  flex: 0 0 8rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
}

.pomodoro-stages button + button {
  border-left: 1px solid var(--border);
}

.pomodoro-stages button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-text);
}

.pomodoro-stages button[aria-pressed='true']:hover {
  background: var(--accent);
  color: var(--accent-text);
}

.pomodoro-progress {
  width: 100%;
  height: 1.4rem;
  accent-color: var(--accent);
  appearance: none;
  cursor: pointer;
  outline: none;
  touch-action: none;
}

.pomodoro-progress:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.pomodoro-progress::-webkit-progress-bar {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
}

.pomodoro-progress::-webkit-progress-value {
  border-radius: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--accent) 0,
    var(--accent) 0.65rem,
    color-mix(in srgb, var(--accent) 78%, var(--bg)) 0.65rem,
    color-mix(in srgb, var(--accent) 78%, var(--bg)) 1.3rem
  );
}

.pomodoro-progress::-moz-progress-bar {
  border-radius: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--accent) 0,
    var(--accent) 0.65rem,
    color-mix(in srgb, var(--accent) 78%, var(--bg)) 0.65rem,
    color-mix(in srgb, var(--accent) 78%, var(--bg)) 1.3rem
  );
}

.pomodoro-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 7rem;
}

.pomodoro-controls button {
  min-width: 5.5rem;
}

.pomodoro-controls .pomodoro-secondary {
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.pomodoro-controls .pomodoro-secondary:hover,
.pomodoro-controls .pomodoro-secondary:focus-visible {
  border-color: var(--accent);
  background: #fff;
  color: var(--accent);
}

.pomodoro-settings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  width: 100%;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  text-align: left;
}

.pomodoro-settings label {
  display: grid;
  gap: 0.3rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.pomodoro-settings label:has(input[type='checkbox']) {
  display: flex;
  align-items: center;
  grid-column: span 2;
}

.pomodoro-settings input[type='number'] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.pomodoro-sound-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.25rem;
}

.pomodoro-sound-buttons button[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--accent);
  font-weight: 700;
}

.pomodoro-sound-buttons button {
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  text-align: center;
}

.pomodoro-sound-emoji {
  margin-right: 0.55rem;
  font-size: 1.75em;
  line-height: 1;
  position: relative;
  top: 1px;
  vertical-align: -0.12em;
}

.pomodoro-sound-buttons button[data-sound='dawn-bell'] .pomodoro-sound-emoji,
.pomodoro-sound-buttons button[data-sound='arcade'] .pomodoro-sound-emoji {
  position: relative;
  top: 0;
}

.pomodoro-sound-buttons button[data-sound='water-drop'] .pomodoro-sound-emoji {
  position: relative;
  top: 0;
}

.pomodoro-sound-buttons button[data-sound='typewriter'] .pomodoro-sound-emoji {
  position: relative;
  top: 1px;
}

.pomodoro-sound-buttons button:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--accent);
}

.pomodoro-sound-buttons button[aria-pressed='true']:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  color: var(--accent);
}

@media (max-width: 30rem) {
  .pomodoro-settings {
    grid-template-columns: 1fr;
  }

  .pomodoro-settings label:has(input[type='checkbox']) {
    grid-column: 1 / -1;
  }

  .pomodoro-sound-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pomodoro-stage-group {
    flex: 1;
  }

  .pomodoro-cycle-stages {
    flex: 2;
  }

  .pomodoro-stages button {
    width: auto;
    flex: 1;
  }

  .pomodoro-stages {
    gap: 2rem;
  }
}

.date-calculator-tool {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}

.date-calculator-tool > label,
.date-calculator-fields label {
  display: grid;
  gap: 0.35rem;
  color: var(--text-muted);
  font-weight: 600;
}

.date-calculator-fields {
  position: relative;
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--text) 7%, transparent);
}

.date-calculator-fields::after {
  display: none;
}

.date-calculator-tool input,
.date-calculator-tool select {
  width: 100%;
}

.date-calculator-tool input[type='date'],
.date-calculator-tool input[type='datetime-local'] {
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}

.date-calculator-tool input[type='date']:focus,
.date-calculator-tool input[type='datetime-local']:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.date-calculator-tool input[type='checkbox'] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.date-calculator-fields label:last-child {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  justify-content: flex-end;
}

.date-calculator-end-fields {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.date-calculator-start-fields {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.date-calculator-date-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.date-calculator-today {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--accent);
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}

.date-calculator-today:hover,
.date-calculator-today:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.date-calculator-adjustments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.date-calculator-adjustment {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.date-calculator-adjustment button {
  width: 1.8rem;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
}

.date-calculator-adjustment .date-calculator-decrease {
  position: relative;
  top: -1px;
}

.date-calculator-adjustment button:hover,
.date-calculator-adjustment button:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
}

.date-calculator-adjustment span {
  min-width: 0;
  flex: 1;
  color: var(--text-muted);
  font-size: 1rem;
  text-align: center;
}

.date-calculator-tool > .date-calculator-fields {
  width: 100%;
}

.date-calculator-result {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
}

.date-calculator-result-heading,
.date-calculator-detail span {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.date-calculator-duration {
  display: block;
  margin-top: 0.3rem;
  color: var(--accent);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
}

.date-calculator-detail + .date-calculator-detail {
  margin-top: 1.25rem;
}

.date-calculator-result > .date-calculator-detail {
  margin-top: 2rem;
}

.date-calculator-result > .date-calculator-detail:first-child {
  margin-top: 0;
}

.date-calculator-detail h3 {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: 1rem;
}

.date-calculator-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.date-calculator-elapsed-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.date-calculator-metric {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.8rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg);
}

.date-calculator-metric span {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.date-calculator-metric strong {
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 600;
}

@media (max-width: 30rem) {
  .date-calculator-fields {
    grid-template-columns: 1fr;
  }

  .date-calculator-fields::after {
    display: none;
  }

  .date-calculator-metrics {
    grid-template-columns: 1fr;
  }
}