/* ==========================================================================
   wosh.productions — shared styling for the browser tools
   --------------------------------------------------------------------------
   The tools under /tools/ were each built as a standalone app with their own
   look: Inter rather than Google Sans, a slate-and-amber palette (#f59e0b,
   #0f172a) rather than the site's monochrome, square corners, and a bespoke
   title bar that duplicated the site nav once it was added.

   This file brings them onto the site's design language without rewriting
   ~70 KB of working app CSS. It is therefore loaded AFTER each page's inline
   <style> — the opposite of the normal order — because its whole job is to
   override the app's own palette and typography:

       site.css  ->  nav.css  ->  the app's inline <style>  ->  tools.css  ->  footer.css

   footer.css still comes last. See the load-order note at the top of site.css.

   Only chrome and palette are overridden here. Each app's layout is left
   alone, because it works and it differs genuinely from tool to tool.
   ========================================================================== */

/* ── Typeface ─────────────────────────────────────────────────────────────
   The apps set Inter on body and again on form controls (which do not inherit
   font-family by default), so both have to be reset. */
body,
.main,
.app-container,
.converter-box {
  font-family: var(--font);
  color: var(--ink);
}

input,
textarea,
select,
button {
  font-family: var(--font);
}

/* Some apps set font-family on headings directly, which body inheritance
   cannot override. */
h1,
h2,
h3,
h4,
.page-head h1 {
  font-family: var(--font);
}

/* ── The bespoke title bar ────────────────────────────────────────────────
   Every tool had its own logo + tool name bar. Since the shared nav sits
   directly above it, that is now a second, competing header, and .page-head
   carries the tool name instead.

   Scoped to the attribute rather than applied globally because /tools/edit/
   keeps its bar: that one is not a title bar, it holds the Export and Settings
   buttons. Hiding it there would remove the editor's only way to export. */
body[data-tool-chrome="site"] .header,
body[data-tool-chrome="site"] .header-inner {
  display: none !important;
}

/* The old hero block is replaced by .page-head in the markup; if any page
   still carries one, keep it from re-introducing a second h1 block. */
.main>.hero {
  display: none;
}

/* ── App panels ───────────────────────────────────────────────────────────
   One treatment for every box an app puts its controls in: white, hairline
   border, generous radius — the same as .card in site.css. */
.converter-box,
.app-container,
.tool-panel,
.textarea-wrap,
.textarea-group,
.quality-control,
.format-section,
.action-section,
.upload-section,
.result-section,
.preview-section,
.empty-state,
.feature,
.card {
  background: var(--paper);
  border-color: var(--hairline);
  border-radius: 16px;
}

.textarea-group,
.quality-control {
  background: var(--wash);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   The apps use half a dozen names for the same thing. All become the site's
   pill button: ink for the primary action, hairline outline for the rest. */
.btn,
.btn-accent,
.btn-primary,
.tool-btn,
.upload-btn,
.pdf-btn,
.action-btn,
.convert-btn,
.download-btn {
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 500;
  border-radius: 100px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.btn:hover,
.btn-accent:hover,
.btn-primary:hover,
.tool-btn:hover,
.upload-btn:hover,
.pdf-btn:hover,
.action-btn:hover,
.convert-btn:hover,
.download-btn:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--paper);
}

.btn-secondary,
.btn--ghost,
.btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.btn-secondary:hover,
.btn--ghost:hover,
.btn.secondary:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn:disabled,
.tool-btn:disabled,
.convert-btn:disabled,
.download-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}

/* ── Form controls ───────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
textarea,
select {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="url"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Range sliders: the apps colour the thumb amber. */
input[type="range"] {
  accent-color: var(--ink);
}

input[type="range"]::-webkit-slider-thumb {
  background: var(--ink);
}

input[type="range"]::-moz-range-thumb {
  background: var(--ink);
  border: 0;
}

/* ── Amber accents ────────────────────────────────────────────────────────
   #f59e0b appeared as text colour, border and background across the tools.
   These are the selectors that actually carried it. */
.accent,
.format-name,
.section-title .accent,
.quality-value,
.logo-icon {
  color: var(--ink);
}

.quality-value {
  background: var(--paper);
  border-color: var(--hairline);
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}

.format-option.selected,
.format-option[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--wash);
}

/* Decorative amber that survived the sweep above. Deliberately excluded:
   .color-option in the PDF editor is a user-selectable ink colour, not
   branding — recolouring it would change what the tool actually does. */
.privacy-icon,
.privacy-icon svg,
.privacy-icon path,
.feature-icon,
.badge-icon {
  color: var(--ink);
  border-color: var(--hairline);
}

/* ── Spacing where .page-head meets the app ───────────────────────────────
   The apps carry their own top padding (64px on .main) from when they had no
   page-head above them. Combined with .page-head's 56px bottom padding that
   left a ~120px dead gap under the lede. The page-head owns that spacing now. */
body[data-tool-chrome="site"] .main,
body[data-tool-chrome="site"] .converter-box,
body[data-tool-chrome="site"] .split-view {
  padding-top: 0;
  margin-top: 0;
}

/* ── Icons ────────────────────────────────────────────────────────────────
   The amber accent also reached SVGs through the CSS `fill` property rather
   than `color`, so a colour sweep that only checked color/background/border
   missed them entirely. These icons are monochrome, so currentColor is the
   right answer and they now follow whatever text colour surrounds them. */
.main svg,
.converter-box svg,
.app-container svg,
.format-option svg,
.feature svg,
.empty-state svg {
  fill: currentColor;
}

/* The selected-format icon is set by `.format-option.selected .format-icon svg`
   in the app's own CSS — three classes deep, so a shorter selector here loses
   on specificity no matter how late this file loads. Matched at equal depth. */
.format-option.selected .format-icon svg,
.format-option.selected .format-icon svg path,
.format-option .format-icon svg,
.format-option .format-icon svg path {
  fill: currentColor;
}

.format-option.selected .format-icon {
  color: var(--ink);
}

/* The "selected" tick is a ::after pseudo-element with an amber background —
   invisible to a colour sweep over real elements, which is how it survived two
   passes. Selection now reads as ink, matching the rest of the site. */
.format-option.selected::after {
  background: var(--ink);
  color: var(--paper);
}

/* ── Quality / slider rows ────────────────────────────────────────────────
   A label + range + value laid out as a flex row. The slider carries flex:1 but
   not min-width:0, and a flex item's default min-width:auto refuses to shrink
   below its intrinsic size — so at 320px the row ran ~20px past the viewport
   and scrolled the page sideways. Fixed here rather than per page: the Bengali
   and Hindi image-converter variants carry their own copy of the same CSS. */
.quality-control {
  flex-wrap: wrap;
}

.quality-slider,
.quality-control input[type="range"] {
  flex: 1 1 140px;
  min-width: 0;
}

.quality-value {
  flex: none;
}

/* ── Drop zones ──────────────────────────────────────────────────────────── */
.drop-zone,
.drop-box,
.file-drop-area,
.upload-area {
  border: 1px dashed var(--hairline);
  border-radius: 18px;
  background: var(--wash);
  color: var(--muted);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

.drop-zone:hover,
.drop-box:hover,
.file-drop-area:hover,
.upload-area:hover,
.drop-zone.dragover,
.upload-area.dragover {
  border-color: var(--ink);
  background: var(--paper);
}

/* ── Headings inside the app ─────────────────────────────────────────────── */
.section-title,
.main h2,
.main h3 {
  font-family: var(--font);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-title {
  font-size: 1.1rem;
  font-weight: 500;
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.toast {
  font-family: var(--font);
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  border: 0;
  font-size: .9rem;
  font-weight: 500;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(0, 0, 0, .55);
}

.modal,
.modal-content {
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
  border: 1px solid var(--hairline);
  font-family: var(--font);
}

.modal-title {
  font-family: var(--font);
  letter-spacing: -0.02em;
}

/* ── Body copy inside the app ────────────────────────────────────────────── */
.main p,
.feature p,
.empty-state p {
  color: var(--muted);
}

/* ── Related tools strip ─────────────────────────────────────────────────── */
/* Uses .grid/.card from site.css; this only sets the band it sits in. */
.tool-related {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--wash);
  border-top: 1px solid var(--hairline);
}