/* Component styles — values ported from docs/mockup_html/styles.css,
   kept under the app's existing (hyphenated) class names so no JS or
   view file needs to change; only the rendered look changes. */

/* Surfaces */
.surface-raised {
  background: rgba(247, 249, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-lg);
  box-shadow:
    10px 10px 26px var(--shadow-dark-soft),
    -10px -10px 24px var(--shadow-light);
}

.control-raised {
  background: rgba(247, 249, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  box-shadow:
    5px 6px 15px var(--shadow-dark-soft),
    -5px -5px 13px var(--shadow-light);
}

.surface-inset {
  background: #f2f6fc;
  border: 1px solid rgba(169, 200, 222, 0.45);
  border-radius: var(--radius-md);
  box-shadow:
    inset 4px 4px 10px rgba(88, 111, 138, 0.1),
    inset -4px -4px 10px rgba(255, 255, 255, 0.9);
}

.is-selected {
  color: var(--color-accent-strong);
  background: #e7f1fa;
  border-color: var(--color-accent-strong);
  box-shadow:
    inset 3px 3px 8px rgba(88, 111, 138, 0.14),
    inset -3px -3px 8px rgba(255, 255, 255, 0.84);
}

.card {
  padding: var(--space-6);
}

.card:hover,
.tool-card:hover,
.category-card:hover {
  transform: translateY(-3px);
  border-color: rgba(107, 174, 214, 0.6);
  box-shadow:
    12px 14px 28px rgba(88, 111, 138, 0.17),
    -10px -10px 22px rgba(255, 255, 255, 0.94);
}

.card,
.tool-card,
.category-card {
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 14px;
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: #ffffff;
  background: linear-gradient(180deg, #2b83c6 0%, #2171b5 100%);
  box-shadow:
    5px 7px 16px rgba(33, 113, 181, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.button-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button-secondary {
  color: var(--color-accent-strong);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow:
    4px 4px 10px var(--shadow-dark-soft),
    -4px -4px 10px var(--shadow-light);
}

.button-ghost {
  background: transparent;
  color: var(--color-accent-strong);
}

.button-destructive {
  color: var(--color-error);
  background: var(--color-error-soft);
  border: 1px solid rgba(201, 77, 85, 0.35);
}

.button-wide {
  width: 100%;
}

/* Inputs */
.input,
.select {
  min-height: 47px;
  width: 100%;
  color: var(--color-text);
  background: #f7f9fd;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 13px;
  box-shadow:
    inset 3px 3px 8px rgba(88, 111, 138, 0.1),
    inset -3px -3px 8px rgba(255, 255, 255, 0.9);
}

.field-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 8px;
}

.form-group {
  margin-bottom: 14px;
}

/* Drop zone */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  min-height: 205px;
  padding: 16px;
  border: 1.5px dashed var(--color-accent);
  cursor: pointer;
}

.dropzone strong {
  font-size: 15px;
}

.dropzone small {
  color: var(--color-text-muted);
  margin-top: 8px;
}

.dropzone.is-dragover {
  border-style: solid;
  border-color: var(--color-accent-strong);
  background: #e7f1fa;
}

.dropzone.is-error {
  border-color: var(--color-error);
}

.dropzone-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 4px;
}

/* Cards */
.tool-card,
.category-card {
  text-decoration: none;
  color: inherit;
  position: relative;
  cursor: pointer;
}

.tool-card {
  padding: 20px 14px 17px;
  text-align: center;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tool-card img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 7px;
}

.tool-card h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.tool-card p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin: 0;
}

.tool-card .badge {
  font-size: 10px;
  min-height: 22px;
  padding: 2px 8px;
  margin-top: auto;
}

.category-card {
  display: grid;
  grid-template-columns: 68px 1fr 38px;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.category-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.category-card h3 {
  font-size: 18px;
  margin: 0 0 3px;
}

.category-card p {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.circle-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  color: var(--color-accent-strong);
  background: var(--color-surface);
  box-shadow:
    3px 4px 9px var(--shadow-dark-soft),
    -3px -3px 8px var(--shadow-light);
  font-size: 20px;
  cursor: pointer;
}

/* Badges & chips */
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 650;
  color: var(--color-accent-strong);
  background: rgba(247, 249, 255, 0.82);
  border: 1px solid rgba(215, 226, 240, 0.9);
  box-shadow:
    3px 4px 10px var(--shadow-dark-soft),
    -3px -3px 9px var(--shadow-light);
}

.badge {
  min-height: 26px;
  font-size: 12px;
}

.badge-success {
  color: var(--color-success);
  background: var(--color-success-soft);
  border: 0;
  box-shadow: none;
}

.badge-warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border: 0;
  box-shadow: none;
}

.badge-error {
  color: var(--color-error);
  background: var(--color-error-soft);
  border: 0;
  box-shadow: none;
}

.badge-info {
  color: var(--color-info);
  background: var(--color-info-soft);
  border: 0;
  box-shadow: none;
}

/* Privacy badge / callout */
.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-info-soft);
  color: var(--color-accent-strong);
  font-size: 14px;
  font-weight: 650;
  max-width: 100%;
}

/* The text is a flex item, which defaults to min-width:auto — without
   this, longer German copy can't shrink/wrap and pushes the pill (and
   the page) past the viewport width on narrow screens. */
.privacy-badge-text {
  min-width: 0;
}

.privacy-callout {
  padding: 24px 30px;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  min-height: 285px;
}

@media (max-width: 1150px) {
  .privacy-callout {
    grid-template-columns: 140px 1fr;
  }
}

@media (max-width: 520px) {
  .privacy-callout {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.privacy-icon-shell {
  width: 208px;
  height: 208px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

@media (max-width: 1150px) {
  .privacy-icon-shell {
    width: 140px;
    height: 140px;
  }
}

.privacy-icon-circle {
  width: 176px;
  height: 176px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5fc;
  border: 1px solid rgba(169, 200, 222, 0.45);
  box-shadow:
    inset 6px 6px 14px rgba(88, 111, 138, 0.12),
    inset -6px -6px 14px rgba(255, 255, 255, 0.94),
    6px 6px 16px rgba(88, 111, 138, 0.08),
    -6px -6px 16px rgba(255, 255, 255, 0.9);
}

@media (max-width: 1150px) {
  .privacy-icon-circle {
    width: 120px;
    height: 120px;
  }
}

.privacy-callout img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(33, 113, 181, 0.1));
}

@media (max-width: 1150px) {
  .privacy-callout img {
    width: 90px;
    height: 90px;
  }
}

.privacy-callout h2 {
  font-size: 29px;
  margin: 10px 0 12px;
}

.trust-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-accent-strong);
  font-weight: 600;
}

@media (max-width: 520px) {
  .trust-row {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 15px;
}

/* Resizer dimension controls */
.dimension-row {
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  gap: 8px;
  align-items: end;
}

.lock-button {
  height: 47px;
  border: 0;
  border-radius: 10px;
  background: #e4f0fa;
  color: var(--color-accent-strong);
  font-size: 18px;
  cursor: pointer;
}

.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.preset {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text);
}

/* Sliders */
.range {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  accent-color: var(--color-accent-strong);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  margin-bottom: 14px;
}

/* Segmented control — deliberately no flex-wrap, matching the mockup:
   segments shrink to fit one row via flex:1 rather than wrapping. */
.segments {
  display: flex;
  gap: 8px;
}

.segment {
  flex: 1;
  min-height: 38px;
  padding: 0 var(--space-4);
  border-radius: 11px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 650;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.segment.active {
  color: #ffffff;
  background: linear-gradient(180deg, #2b83c6, #2171b5);
  border-color: var(--color-accent-strong);
  box-shadow: 4px 6px 12px rgba(33, 113, 181, 0.2);
}

/* QR generator's type selector has 5 segments (vs. 3-4 everywhere else),
   which can't shrink to fit a narrow phone screen without wrapping — the
   mockup avoids this by hiding tabs past the 3rd on the smallest screens,
   which isn't acceptable here since every type must stay reachable. */
@media (max-width: 480px) {
  #qr-type-tabs {
    flex-wrap: wrap;
  }
}

/* Case Converter's 4-segment row hits the same "doesn't fit, no-wrap
   forces the whole .tool-layout grid to overflow" problem as QR's tabs
   above — same fix, same reasoning. */
@media (max-width: 480px) {
  #case-type-segments {
    flex-wrap: wrap;
  }
}

/* JSON Formatter's indent-option segments hit the same problem once
   translated to German ("2 Leerzeichen"/"4 Leerzeichen" run longer than
   "2 spaces"/"4 spaces") — same fix, same reasoning. */
@media (max-width: 480px) {
  #indent-segments {
    flex-wrap: wrap;
  }
}

/* Tool state machine visibility (docs/01 §5.2).
   Default-hidden; public/js/core/state-machine.js toggles a matching
   element's inline display back on when the tool's current state is
   listed in its data-state-for attribute (space-separated list).
   This rule has no mockup equivalent — required for functionality,
   never "correct" it away when comparing against the mockup. */
[data-state-for] {
  display: none;
}

.result-panel {
  margin-top: var(--space-6);
  padding: var(--space-6);
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

.metrics strong {
  color: var(--color-success);
}

.file-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px;
}

.file-summary img.preview {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* PDF/queue file row (merge-pdf, images-to-pdf item lists) */
.file-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
}

.file-row strong {
  font-size: 13px;
  display: block;
}

.file-row small {
  font-size: 11px;
  color: var(--color-text-muted);
}

.drag {
  color: var(--color-accent-strong);
  font-weight: 800;
  letter-spacing: 1px;
  cursor: grab;
}

.remove {
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f5f8fd;
  color: var(--color-accent-strong);
  cursor: pointer;
  font-size: 14px;
}

.remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Image queue grid (images-to-pdf) */
.image-queue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .image-queue {
    grid-template-columns: 1fr 1fr;
  }
}

.queued-image {
  padding: 9px;
  position: relative;
  overflow: hidden;
}

.queued-image img {
  width: 100%;
  height: 105px;
  object-fit: cover;
  border-radius: 10px;
}

.queue-number {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-accent-strong);
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.page-select-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.page-select-toggle input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.queued-image .queued-controls {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.queued-image.split-after {
  box-shadow: 0 3px 0 0 var(--color-accent-strong);
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.checklist li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
}

.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent-strong);
  font-weight: 800;
}

.faq-row {
  padding: 9px 10px;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  cursor: pointer;
}

/* faq.ejs uses <details>/<summary> for real expand/collapse behavior
   (an improvement over the mockup's non-functional demo rows), but the
   native disclosure marker is hidden so the row reads exactly like the
   mockup's plain row + custom chevron. */
.faq-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.faq-row summary::-webkit-details-marker {
  display: none;
}

.faq-row summary b {
  color: var(--color-text-subtle);
  font-weight: 700;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.faq-row[open] summary b {
  transform: rotate(90deg);
}

.related-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
}

/* Ad slot placeholder — no mockup equivalent (mockup predates monetization
   work); kept visually neutral and out of the way per docs/03/05 rules. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-top: var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.4);
}

/* Wide-screen "skyscraper" ad rail — deliberately lives outside the
   1380px content column (var(--content-max-width)), in space that's
   otherwise empty on large monitors, so it can never shift or crowd
   the actual page layout. Only appears once the viewport is wide enough
   to fit the rail plus the full-width content with a comfortable
   margin left over on the right; hidden entirely below that, including
   on every laptop/tablet/phone width. Right side only, by design — a
   matching left rail felt too enclosing/ad-heavy. */
.ad-rail {
  display: none;
  position: fixed;
  top: 120px;
  width: 160px;
  height: 600px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.4);
  z-index: 5;
}

.ad-rail-right {
  right: 32px;
}

@media (min-width: 1840px) {
  .ad-rail {
    display: flex;
  }
}

.warning-strip {
  padding: 10px 12px;
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border: 1px solid rgba(197, 138, 33, 0.3);
  border-radius: var(--radius-md);
  margin: 14px 0;
  font-size: 12px;
}

.error-strip {
  padding: 10px 12px;
  background: var(--color-error-soft);
  color: var(--color-error);
  border: 1px solid rgba(201, 77, 85, 0.3);
  border-radius: var(--radius-md);
  margin: 14px 0;
  font-size: 12px;
}

/* QR preview container — wraps the REAL canvas output from
   qrcode-generator (public/js/tools/qr-code-generator.js). The mockup's
   own .qr-code-visual is a fake static grid of decorative <i> cells with
   no real QR library behind it; only its container styling (size,
   padding, background, inset shadow) is reused here. */
.qr-code-visual {
  aspect-ratio: 1;
  max-width: 320px;
  margin-inline: auto;
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 3px 3px 9px rgba(88, 111, 138, 0.08);
}

/* Toast (used by data-toast prototype affordances, if any remain) */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  background: #1f6ead;
  color: white;
  padding: 13px 18px;
  border-radius: 14px;
  box-shadow: 0 15px 35px rgba(33, 113, 181, 0.3);
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition: 0.25s;
}

.toast.show {
  opacity: 1;
  transform: none;
}