/* ==========================================================================
   Discuvr - shared design system
   One warm neutral ramp, one accent, two themes. Depth comes from layered
   surfaces and soft shadows, never from gradients or heavy borders.
   Every template loads this via base.html; nothing here is per-MVP.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Neutral ramp - every neutral in the product comes from these eleven steps.
     Tailwind's slate/zinc/gray/neutral/stone scales are aliased onto them in
     base.html, so a utility class picked in any template flips with the theme. */
  --n-50:  #fbfaf9;
  --n-100: #f4f3f1;
  --n-200: #e8e6e3;
  --n-300: #d8d5d1;
  --n-400: #a9a5a0;
  --n-500: #807b75;
  --n-600: #605b55;
  --n-700: #46423d;
  --n-800: #2c2926;
  --n-900: #1a1816;
  --n-950: #0f0e0d;

  /* Surfaces - a page is built by stacking these, not by drawing boxes */
  --canvas:        #f6f5f3;
  --surface:       #ffffff;
  --surface-sunk:  #f1efec;
  --surface-hover: #f7f6f4;
  --surface-raised:#ffffff;

  /* Lines */
  --line:          #e8e6e3;
  --line-strong:   #d8d5d1;

  /* Text */
  --ink:           #1a1816;
  --ink-muted:     #605b55;
  --ink-subtle:    #8d8882;
  --ink-inverse:   #ffffff;

  /* Accent - used only for primary actions and active state */
  --accent:        #b4530b;
  --accent-hover:  #96420a;
  --accent-ink:    #96420a;   /* accent text on a light surface */
  --accent-soft:   #fdf3e7;
  --accent-line:   #f0d8b6;
  --accent-ring:   rgba(180, 83, 11, .16);
  --on-accent:     #ffffff;

  /* Status */
  --danger:        #b42318;
  --danger-soft:   #fef3f2;
  --danger-line:   #fecdca;
  --success:       #067647;
  --success-soft:  #ecfdf3;
  --success-line:  #abefc6;
  --warn:          #b54708;
  --warn-soft:     #fffaeb;
  --warn-line:     #fedf89;
  --info:          #175cd3;
  --info-soft:     #eff8ff;
  --info-line:     #b2ddff;

  /* Radii */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* Elevation - three steps, deliberately soft */
  --shadow-xs:  0 1px 2px rgba(26, 24, 22, .05);
  --shadow-sm:  0 1px 2px rgba(26, 24, 22, .05), 0 2px 6px -2px rgba(26, 24, 22, .06);
  --shadow-md:  0 4px 12px -4px rgba(26, 24, 22, .10), 0 2px 4px -2px rgba(26, 24, 22, .05);
  --shadow-pop: 0 12px 32px -12px rgba(26, 24, 22, .22), 0 2px 8px -4px rgba(26, 24, 22, .08);

  /* Motion */
  --ease:      cubic-bezier(.2, .8, .3, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .13s;
  --t-base:    .2s;

  --knob: #ffffff;

  --header-h: 58px;
}

/* --------------------------------------------------------------------------
   Dark theme

   Light is the default, so dark applies only when the reader picks it and
   `data-theme="dark"` is on <html>. The OS preference is deliberately not
   consulted: a first visit is light for everyone, which is also what a crawler
   and a JavaScript-less reader get. Surfaces are warm charcoal, not
   black: a pure-black page on an OLED screen flares against body text and is
   the opposite of restful. Contrast is held at >= 4.5:1 for body copy.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] {
  --dark-n-50:  #171614;
  --dark-n-100: #1e1c1a;
  --dark-n-200: #2a2724;
  --dark-n-300: #3a3733;
  --dark-n-400: #6b6660;
  --dark-n-500: #8f8a83;
  --dark-n-600: #aaa49d;
  --dark-n-700: #c8c3bc;
  --dark-n-800: #e2ded9;
  --dark-n-900: #f2efeb;
  --dark-n-950: #faf8f6;
}

:root[data-theme="dark"] {
  --n-50:  var(--dark-n-50);
  --n-100: var(--dark-n-100);
  --n-200: var(--dark-n-200);
  --n-300: var(--dark-n-300);
  --n-400: var(--dark-n-400);
  --n-500: var(--dark-n-500);
  --n-600: var(--dark-n-600);
  --n-700: var(--dark-n-700);
  --n-800: var(--dark-n-800);
  --n-900: var(--dark-n-900);
  --n-950: var(--dark-n-950);

  --canvas:         #131211;
  --surface:        #1c1a18;
  --surface-sunk:   #232120;
  --surface-hover:  #262422;
  --surface-raised: #232120;

  --line:        #2e2b28;
  --line-strong: #403c38;

  --ink:         #f2efeb;
  --ink-muted:   #aaa49d;
  --ink-subtle:  #7d7872;
  --ink-inverse: #16150f;

  --accent:       #e0913f;
  --accent-hover: #eda255;
  --accent-ink:   #eaa863;
  --accent-soft:  #2a2118;
  --accent-line:  #4a3a24;
  --accent-ring:  rgba(224, 145, 63, .22);
  --on-accent:    #1b1509;

  --danger:       #f98a80;
  --danger-soft:  #2a1a18;
  --danger-line:  #4d2a26;
  --success:      #5fd39b;
  --success-soft: #142520;
  --success-line: #23453a;
  --warn:         #f0b45c;
  --warn-soft:    #2a2114;
  --warn-line:    #4a3a20;
  --info:         #7cb3f7;
  --info-soft:    #15202e;
  --info-line:    #264057;

  --knob: #e2ded9;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --shadow-md:  0 4px 14px -4px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 16px 40px -14px rgba(0, 0, 0, .7), 0 2px 10px -4px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Never allow a page to scroll sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.011em; margin: 0; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); color: var(--accent-hover); }

/* Quiet scrollbars, consistent across MVPs */
.scroll-y { overflow-y: auto; overscroll-behavior: contain; }
.scroll-y::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-y::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: content-box; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   App shell - every MVP page uses this frame
   -------------------------------------------------------------------------- */

.app-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* For MVPs whose body must not scroll (chat, playground). */
.app-shell--fixed { height: 100vh; height: 100dvh; overflow: hidden; }
.app-shell--fixed .app-main { min-height: 0; overflow: hidden; }

.app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

.app-header {
  flex: none;
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.app-shell--fixed .app-header { position: relative; }

.app-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gutter);
}

/* One page gutter everywhere, matching /assistant/: 16px on phones, 32px on
   tablets, 48px on desktop. Pages use the full width between the gutters. */
:root { --gutter: 16px; }
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

.container    { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.gutter       { width: 100%; padding-inline: var(--gutter); }
/* Doubled class on purpose: Tailwind's CDN injects its own `.container` rule
   into <head> after this stylesheet, and its xl breakpoint (max-width: 1280px)
   would otherwise win over these and let every page run the full width of a
   desktop monitor. */
.container.container--sm { max-width: 42rem; }
.container.container--md,
.container.container--lg,
.container.container--xl { max-width: none; }

/* --------------------------------------------------------------------------
   Brand mark - flat, no gradient
   -------------------------------------------------------------------------- */

.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.brand__mark {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-sm);
  background: #b4530b; color: #fff;
  display: grid; place-items: center;
}
.brand__mark svg { width: 15px; height: 15px; }
.brand__name {
  font-size: 14px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__sep { color: var(--line-strong); flex: none; }
.brand__page { font-size: 14px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On a narrow screen the page name matters more than the product name - but
   only drop the product name when there IS a page name to replace it with,
   otherwise the landing page header is left as a bare mark. */
@media (max-width: 420px) {
  :has(> .brand__page) .brand__name,
  :has(> .brand__page) .brand__sep { display: none; }
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page-head { padding-block: 28px 20px; }
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 640px) { .page-title { font-size: 26px; } }
.page-sub { margin-top: 6px; font-size: 14px; color: var(--ink-muted); max-width: 62ch; }

.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-subtle);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding-inline: 14px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background-color .13s ease, border-color .13s ease, color .13s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-primary   { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-xs); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }

.btn-ghost     { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunk); color: var(--ink); }

.btn-danger    { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }

.btn-dark      { background: var(--ink); color: var(--ink-inverse); box-shadow: var(--shadow-xs); }
.btn-dark:hover:not(:disabled) { background: var(--n-800); }

.btn-sm  { height: 30px; padding-inline: 10px; font-size: 12.5px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-lg  { height: 42px; padding-inline: 20px; font-size: 14.5px; }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; height: 28px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card--flush { border-radius: 0; border-inline: 0; box-shadow: none; }
.card--raised { background: var(--surface-raised); box-shadow: var(--shadow-md); }
.card--quiet { box-shadow: none; }
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.card__title { font-size: 13.5px; font-weight: 600; }
.card__sub   { margin-top: 3px; font-size: 12.5px; color: var(--ink-muted); }
.card__body  { padding: 16px; }
.card__foot  {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-hover);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Interactive card (MVP tiles, list rows) */
.card-link {
  display: block;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.card-link:hover {
  border-color: var(--line-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-link:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

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

.field { display: block; }
.label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-muted); }
.error-text { margin-top: 6px; font-size: 12.5px; color: var(--danger); }

.input, .textarea, .select {
  display: block; width: 100%;
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit; font-size: 14px; line-height: 1.5;
  transition: border-color .13s ease, box-shadow .13s ease;
  /* 16px on touch devices stops iOS zooming the viewport on focus */
}
.input::placeholder, .textarea::placeholder { color: var(--ink-subtle); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--surface-sunk); color: var(--ink-muted); cursor: not-allowed;
}
.textarea { resize: vertical; min-height: 84px; }
.select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235c646e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
@media (max-width: 767px) {
  .input, .textarea, .select { font-size: 16px; }
}

.checkbox, .radio {
  width: 15px; height: 15px; flex: none;
  accent-color: var(--accent); cursor: pointer;
}

/* Toggle switch */
.switch {
  position: relative; flex: none;
  width: 34px; height: 20px; padding: 0;
  background: var(--line-strong); border: 0; border-radius: 99px;
  cursor: pointer; transition: background-color .15s ease;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch__dot {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 99px; background: var(--knob);
  box-shadow: var(--shadow-xs);
  transition: transform .15s ease;
}
.switch[aria-checked="true"] .switch__dot { transform: translateX(14px); }

/* Segmented control - replaces the ad-hoc pill rows across MVPs */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-sunk); border-radius: var(--r-md);
  max-width: 100%; overflow-x: auto;
}
.segmented__item {
  padding: 6px 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-muted);
  white-space: nowrap; cursor: pointer; transition: background-color .13s, color .13s;
}
.segmented__item:hover { color: var(--ink); }
.segmented__item[aria-selected="true"], .segmented__item.is-active {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface-sunk);
  font-size: 11.5px; font-weight: 500; color: var(--ink-muted);
  white-space: nowrap;
}
.badge--accent  { background: var(--accent-soft);  border-color: var(--accent-line);  color: var(--accent-hover); }
.badge--danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger); }
.badge--warn    { background: var(--warn-soft);    border-color: var(--warn-line);    color: var(--warn); }
.badge--success { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.badge--info    { background: var(--info-soft);    border-color: var(--info-line);    color: var(--info); }
.badge__dot { width: 5px; height: 5px; border-radius: 99px; background: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-sunk);
  font-size: 13px; color: var(--ink-muted);
}
.alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.alert--danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger); }
.alert--warn    { background: var(--warn-soft);    border-color: var(--warn-line);    color: var(--warn); }
.alert--success { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.alert--info    { background: var(--info-soft);    border-color: var(--info-line);    color: var(--info); }

/* --------------------------------------------------------------------------
   Empty / loading states
   -------------------------------------------------------------------------- */

.empty { padding: 48px 20px; text-align: center; }
.empty__icon {
  width: 36px; height: 36px; margin: 0 auto 12px;
  border-radius: var(--r-md); background: var(--surface-sunk);
  display: grid; place-items: center; color: var(--ink-subtle);
}
.empty__icon svg { width: 18px; height: 18px; }
.empty__title { font-size: 14px; font-weight: 500; color: var(--ink); }
.empty__text  { margin-top: 4px; font-size: 13px; color: var(--ink-muted); }

.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 99px; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dots { display: inline-flex; gap: 4px; align-items: center; }
.dots span {
  width: 5px; height: 5px; border-radius: 99px; background: var(--ink-subtle);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: .18s; }
.dots span:nth-child(3) { animation-delay: .36s; }
@keyframes dotPulse { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--line) 37%, var(--surface-sunk) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Tables - scroll on small screens instead of breaking the layout
   -------------------------------------------------------------------------- */

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-weight: 500; color: var(--ink-muted);
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

.mono, code, pre, kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
code { font-size: .89em; }
.code-block {
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--surface-sunk); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--ink);
  overflow-x: auto; white-space: pre; margin: 0;
}
kbd {
  padding: 1px 5px; border-radius: 4px; font-size: 11px;
  background: var(--surface-sunk); border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 var(--line-strong);
}

/* --------------------------------------------------------------------------
   Long-form prose (legal pages, generated reports, chat answers)
   -------------------------------------------------------------------------- */

.prose { font-size: 14.5px; line-height: 1.7; color: var(--ink-muted); }
.prose > * + * { margin-top: 1em; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--ink); line-height: 1.35; }
.prose h1 { font-size: 20px; margin-top: 1.7em; }
.prose h2 { font-size: 16.5px; margin-top: 1.7em; }
.prose h3 { font-size: 14.5px; margin-top: 1.5em; }
.prose h4 { font-size: 13.5px; margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.35em; margin-top: .7em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--ink-subtle); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-hover); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  padding-left: 14px; border-left: 2px solid var(--line-strong); color: var(--ink-muted);
}
.prose code {
  padding: 1.5px 5px; border-radius: 4px;
  background: var(--surface-sunk); border: 1px solid var(--line); color: var(--ink);
}
.prose pre {
  padding: 13px; border-radius: var(--r-md); overflow-x: auto;
  background: var(--surface-sunk); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.6;
}
.prose pre code { padding: 0; background: none; border: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 8px 11px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--surface-sunk); color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.8em 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }

.prose--tight { font-size: 14px; }
.prose--tight > * + * { margin-top: .8em; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.divide-line > * + * { border-top: 1px solid var(--line); }
.tabular { font-variant-numeric: tabular-nums; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Mobile drawer - used by MVPs with a desktop sidebar */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(10, 9, 8, .48); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .drawer-backdrop { display: none; } }

/* `backwards`, never `both`: the fill only covers the delay, so if the
   animation is skipped or never fires the element stays at its normal,
   visible style instead of being stranded at opacity 0. */
.fade-in { animation: fadeIn .22s ease backwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Severity scale - Security Scan findings.
   Kept deliberately separate from --accent: severity must never read as
   "this is the primary button".
   -------------------------------------------------------------------------- */

.sev {
  --sev:      #5c646e;
  --sev-soft: #f1f3f5;
  --sev-line: #e4e7eb;
}
.sev-critical { --sev: #9f1239; --sev-soft: #fff1f3; --sev-line: #fecdd3; }
.sev-high     { --sev: #c2410c; --sev-soft: #fff7ed; --sev-line: #fed7aa; }
.sev-medium   { --sev: #a16207; --sev-soft: #fefce8; --sev-line: #fde68a; }
.sev-low      { --sev: #0369a1; --sev-soft: #f0f9ff; --sev-line: #bae6fd; }
.sev-info     { --sev: #5c646e; --sev-soft: #f1f3f5; --sev-line: #e4e7eb; }

.sev-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px;
  background: var(--sev-soft); border: 1px solid var(--sev-line); color: var(--sev);
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}
.sev-dot  { width: 6px; height: 6px; border-radius: 99px; background: var(--sev); flex: none; }
.sev-rail { border-left: 3px solid var(--sev); }
.sev-text { color: var(--sev); }

/* Letter grade */
.grade { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.grade-A { color: #047857; } .grade-B { color: #4d7c0f; } .grade-C { color: #a16207; }
.grade-D { color: #c2410c; } .grade-F { color: #9f1239; }

/* Progress bar */
.progress { height: 6px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); transition: width .3s ease; border-radius: 99px; }

/* Disclosure rows (findings, FAQ) */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(90deg); }
.chev { transition: transform .15s ease; flex: none; }

/* --------------------------------------------------------------------------
   Playground shell - a resizable sidebar on desktop, an off-canvas drawer on
   phones. Shared by AI Playground and Agent Playground: without this the
   sidebar stacks above the chat inside an overflow-hidden shell and the chat
   becomes unreachable on a small screen.
   -------------------------------------------------------------------------- */

.pg-shell {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .pg-shell { grid-template-columns: var(--sidebar-width, 320px) 6px minmax(0, 1fr); }
}

.pg-sidebar {
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  scrollbar-width: none;
}
.pg-sidebar::-webkit-scrollbar { display: none; }

@media (max-width: 1023px) {
  .pg-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(88vw, 340px);
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-pop);
  }
  .pg-sidebar.is-open { transform: none; }
}

.pg-handle {
  display: none;
  height: 100%; cursor: col-resize;
  background: var(--line); border: 0;
}
.pg-handle:hover, .pg-handle:focus { background: var(--line-strong); outline: none; }
@media (min-width: 1024px) { .pg-handle { display: block; } }

.pg-main { display: flex; flex-direction: column; min-height: 0; background: var(--canvas); }

.pg-bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}

/* Chat bubbles, shared by the playgrounds and the chatbot MVPs */
.bubble {
  max-width: min(85%, 60ch);
  padding: 9px 13px;
  border-radius: var(--r-lg);
  font-size: 13.5px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.bubble--user { background: var(--ink); color: var(--ink-inverse); border-bottom-right-radius: var(--r-sm); }
.bubble--bot  { background: var(--surface-sunk); color: var(--ink); border-bottom-left-radius: var(--r-sm); }

/* Composer */
.composer {
  flex: none;
  padding: 10px 14px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.composer__row { display: flex; align-items: flex-end; gap: 10px; }

/* --------------------------------------------------------------------------
   Chat transcript - shared by the IP Law chatbot and the drafting MVP.
   -------------------------------------------------------------------------- */

.msg { display: flex; align-items: flex-start; gap: 10px; }
.msg + .msg { margin-top: 18px; }
.msg--user { flex-direction: row-reverse; }

.msg__avatar {
  flex: none; width: 28px; height: 28px; margin-top: 2px;
  border-radius: 99px; display: grid; place-items: center;
  background: var(--surface-sunk); border: 1px solid var(--line);
  color: var(--ink-muted);
}
.msg--user .msg__avatar { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }
.msg__avatar svg { width: 15px; height: 15px; }

.msg__body { min-width: 0; flex: 1 1 auto; }
.msg--user .msg__body { display: flex; justify-content: flex-end; }

.msg__bubble {
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow-wrap: anywhere;
}
.msg--bot .msg__bubble { border-top-left-radius: var(--r-sm); }
.msg--user .msg__bubble {
  max-width: min(100%, 60ch);
  background: var(--ink); border-color: var(--ink); color: var(--ink-inverse);
  border-top-right-radius: var(--r-sm);
  white-space: pre-wrap;
}
.msg__time { margin-top: 5px; font-size: 11.5px; color: var(--ink-subtle); }
.msg--user .msg__time { text-align: right; }

/* Suggestion chips shown on an empty transcript */
.chip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); color: var(--ink);
  font: inherit; font-size: 13.5px; line-height: 1.45; cursor: pointer;
  transition: border-color .13s ease, background-color .13s ease;
}
.chip:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.chip svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ink-subtle); }

/* Composer with controls tucked inside the textarea */
.composer-box { position: relative; }
.composer-box textarea {
  width: 100%; min-height: 56px; max-height: 200px;
  padding: 15px 96px 15px 46px;
  resize: none; overflow-y: auto;
}
.composer-box__left  { position: absolute; left: 7px;  bottom: 9px; }
.composer-box__right { position: absolute; right: 7px; bottom: 9px; display: flex; gap: 2px; align-items: center; }
@media (max-width: 480px) {
  .composer-box textarea { padding-right: 86px; }
}

/* Toggle-style icon button (web search on/off) */
.icon-toggle { color: var(--ink-subtle); }
.icon-toggle.is-on {
  background: var(--accent-soft); color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Severity + grade in dark mode

   The light-mode severity colours are deep and saturated so they read as
   "serious" on white. On a dark surface the same values disappear, so each
   one is lifted to a tint that clears 4.5:1 against --surface while keeping
   the red -> orange -> amber -> blue ordering legible at a glance.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .sev,
:root[data-theme="dark"] .sev-info  { --sev: #a8a29a; --sev-soft: #232120; --sev-line: #34302c; }
:root[data-theme="dark"] .sev-critical { --sev: #fb7185; --sev-soft: #2b1519; --sev-line: #4d2229; }
:root[data-theme="dark"] .sev-high     { --sev: #fb923c; --sev-soft: #2a1a10; --sev-line: #4a2c17; }
:root[data-theme="dark"] .sev-medium   { --sev: #fbbf24; --sev-soft: #29220f; --sev-line: #473a15; }
:root[data-theme="dark"] .sev-low      { --sev: #7dd3fc; --sev-soft: #11212b; --sev-line: #1d3a4a; }
:root[data-theme="dark"] .grade-A { color: #4ade80; }
:root[data-theme="dark"] .grade-B { color: #a3e635; }
:root[data-theme="dark"] .grade-C { color: #fbbf24; }
:root[data-theme="dark"] .grade-D { color: #fb923c; }
:root[data-theme="dark"] .grade-F { color: #fb7185; }

/* --------------------------------------------------------------------------
   Tailwind literal-colour shims

   The neutral scales are aliased to the themed ramp in base.html, but
   `bg-white` and the raw shadow utilities are literal values baked into a
   dozen MVP templates. Rather than touch every one, they are re-pointed here
   so an existing template lands on the themed surface automatically.
   `text-white` is deliberately left alone: it almost always sits on a coloured
   or inverted background that stays dark in both themes.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
:root[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-xs) !important; }
:root[data-theme="dark"] .shadow,
:root[data-theme="dark"] .shadow-md { box-shadow: var(--shadow-sm) !important; }
:root[data-theme="dark"] .shadow-lg,
:root[data-theme="dark"] .shadow-xl,
:root[data-theme="dark"] .shadow-2xl { box-shadow: var(--shadow-pop) !important; }

/* --------------------------------------------------------------------------
   Skip link - first tab stop on every page
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 9px 14px; border-radius: var(--r-md);
  background: var(--ink); color: var(--ink-inverse);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-pop);
  transform: translateY(calc(-100% - 20px));
  opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease);
}
.skip-link:focus-visible { transform: none; opacity: 1; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Header extras - a quiet icon button and the theme switch
   -------------------------------------------------------------------------- */

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-sunk); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }

/* The sun and moon live in the same button; only one is ever shown. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
/* --------------------------------------------------------------------------
   Dropdown menu - account menu, per-MVP overflow actions
   -------------------------------------------------------------------------- */

.menu { position: relative; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 210px; padding: 5px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
.menu__panel[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
.menu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.menu__item:hover { background: var(--surface-sunk); }
.menu__item svg { width: 15px; height: 15px; flex: none; color: var(--ink-subtle); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger svg { color: currentColor; }
.menu__sep { height: 1px; margin: 5px 8px; background: var(--line); }
.menu__head { padding: 9px 10px 7px; }
.menu__head-name { font-size: 13.5px; font-weight: 600; }
.menu__head-sub  { margin-top: 1px; font-size: 12px; color: var(--ink-subtle); }

/* --------------------------------------------------------------------------
   Language toggle - the globe in the header, built on the menu above
   -------------------------------------------------------------------------- */

.lang__panel {
  min-width: 190px;
  /* Twenty languages is more than a panel should grow to, so it scrolls. */
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lang__head {
  padding: 7px 10px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-subtle);
}
.lang__list { display: flex; flex-direction: column; }
.lang__item { justify-content: space-between; gap: 12px; }
/* Each label renders in its own script, so let the browser pick the font for
   it rather than forcing Inter onto Arabic, Thai or CJK. */
.lang__native { font-family: inherit; }
.lang__item.is-active { color: var(--accent-ink); font-weight: 600; }
/* On a header painted in the brand colour the muted glyph is invisible. The
   panel itself stays on the normal surface, so only the trigger inverts. */
.lang--on-accent > .icon-btn { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .25); }
.lang--on-accent > .icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* --------------------------------------------------------------------------
   Right-to-left (Arabic, Persian)
   --------------------------------------------------------------------------
   Tailwind's CDN build emits physical properties (ml-*, pl-*, left-*), so a
   `dir="rtl"` document does not flip on its own. Rather than mirror hundreds
   of utilities, this handles the few shared components whose anchoring is
   wrong when mirrored - everything else is centred, flexed or symmetric and
   reads correctly either way. */

[dir="rtl"] .menu__panel { right: auto; left: 0; }
[dir="rtl"] .menu__item  { text-align: right; }
[dir="rtl"] .search__icon { left: auto; right: 12px; }
[dir="rtl"] .search .input { padding-left: 46px; padding-right: 36px; }
[dir="rtl"] .search__kbd { right: auto; left: 10px; }
[dir="rtl"] .toast { flex-direction: row-reverse; }
/* Arrow glyphs point the wrong way once the reading order flips. */
[dir="rtl"] .tile__foot svg { transform: scaleX(-1); }
.lang__check { width: 15px; height: 15px; flex: none; color: var(--accent); }

.avatar {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Toasts - one place for "copied", "saved", "something went wrong"
   -------------------------------------------------------------------------- */

.toast-host {
  position: fixed; z-index: 90;
  left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  max-width: min(92vw, 30rem);
  padding: 10px 14px; border-radius: 99px;
  background: var(--ink); color: var(--ink-inverse);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-pop);
  animation: toastIn .24s var(--ease-out) both;
}
.toast[data-leaving="true"] { animation: toastOut .18s var(--ease) both; }
.toast svg { width: 15px; height: 15px; flex: none; }
.toast--danger  { background: var(--danger); color: #fff; }
.toast--success { background: var(--success); color: #fff; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(6px) scale(.98); } }

/* --------------------------------------------------------------------------
   Search box - the tool filter on the landing page
   -------------------------------------------------------------------------- */

.search {
  position: relative; display: flex; align-items: center;
  width: 100%;
}
.search__icon {
  position: absolute; left: 12px; width: 16px; height: 16px;
  color: var(--ink-subtle); pointer-events: none;
}
.search .input { padding-left: 36px; padding-right: 46px; height: 42px; }
.search__kbd {
  position: absolute; right: 10px;
  display: none; pointer-events: none;
}
@media (min-width: 640px) { .search__kbd { display: inline-flex; } }
.search .input:focus + .search__kbd,
.search .input:not(:placeholder-shown) + .search__kbd { opacity: 0; }

/* --------------------------------------------------------------------------
   Tool tile - the landing page grid
   -------------------------------------------------------------------------- */

.tile {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  height: 100%;
}
.tile__top { display: flex; align-items: flex-start; gap: 12px; }
.tile__icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--surface-sunk); color: var(--ink-muted);
  border: 1px solid var(--line);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.tile__icon svg { width: 18px; height: 18px; }
.card-link:hover .tile__icon {
  background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line);
}
.tile__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.tile__desc { font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.tile__foot {
  margin-top: auto; padding-top: 4px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-subtle);
  transition: color var(--t-fast) var(--ease);
}
.card-link:hover .tile__foot { color: var(--accent-ink); }
.tile__foot svg {
  width: 14px; height: 14px;
  transition: transform var(--t-base) var(--ease-out);
}
.card-link:hover .tile__foot svg { transform: translateX(3px); }

/* Hidden by the client-side filter without collapsing the grid's gap rules. */
[data-filtered="out"] { display: none !important; }

/* --------------------------------------------------------------------------
   Hero - landing page only
   -------------------------------------------------------------------------- */

.hero { padding-block: 44px 28px; }
@media (min-width: 640px) { .hero { padding-block: 64px 36px; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 8px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  font-size: 12px; font-weight: 500; color: var(--ink-muted);
}
.hero__title {
  margin-top: 16px;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
}
.hero__lede {
  margin-top: 12px; max-width: 54ch;
  font-size: clamp(14.5px, 1.6vw, 16.5px); line-height: 1.6; color: var(--ink-muted);
}

/* A single soft wash behind the hero so the page has a horizon without
   resorting to a gradient banner. */
.hero-wash {
  position: absolute; inset: 0 0 auto; height: 380px; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 22rem at 18% -6%, var(--accent-soft), transparent 70%),
    linear-gradient(to bottom, var(--surface), transparent);
  opacity: .9;
}

/* --------------------------------------------------------------------------
   Staggered entrance - used on grids so a page settles instead of snapping
   -------------------------------------------------------------------------- */

.stagger > * { animation: fadeIn .32s var(--ease-out) backwards; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .11s; }
.stagger > *:nth-child(5) { animation-delay: .14s; }
.stagger > *:nth-child(6) { animation-delay: .17s; }
.stagger > *:nth-child(n+7) { animation-delay: .2s; }

/* --------------------------------------------------------------------------
   SEO prose - the long-form description below a tool

   Every tool has its own URL and is meant to be found on its own, which means
   each page needs text a search engine can actually read. This sits below the
   tool on a sunk surface so it reads as reference material rather than as part
   of the interface, and it is ordinary visible content - the same words a
   reader gets are the words a crawler gets.
   -------------------------------------------------------------------------- */

.seo-prose {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
}
.seo-prose summary::-webkit-details-marker { display: none; }
.seo-prose summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

/* --------------------------------------------------------------------------
   Tool launcher - the search pill and its dialog (partials/tool_launcher.html)
   -------------------------------------------------------------------------- */

/* A labelled pill, not a bare icon, so a visitor can see there is a search. */
.launcher-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 34px; margin-inline-start: 10px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-muted);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.launcher-btn:hover { border-color: var(--line-strong); color: var(--ink); box-shadow: var(--shadow-xs); }
.launcher-btn svg { width: 15px; height: 15px; flex: none; }
.launcher-btn__label, .launcher-btn__kbd { display: none; }
.launcher-btn__kbd {
  font: 500 11px/1 var(--font-mono, ui-monospace, monospace);
  padding: 3px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-subtle);
}
@media (min-width: 640px) {
  .launcher-btn { padding: 0 8px 0 12px; min-width: 210px; }
  .launcher-btn__label { display: inline; flex: 1; text-align: start; }
  .launcher-btn__kbd { display: inline-block; }
}
.launcher {
  width: min(560px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 96px));
  margin: 72px auto auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.launcher[open] { display: flex; flex-direction: column; }
.launcher::backdrop { background: color-mix(in srgb, #000 35%, transparent); }
.launcher__search {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); color: var(--ink-subtle);
}
.launcher__search svg { width: 17px; height: 17px; flex: none; }
.launcher__input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; outline: none;
}
.launcher__input::-webkit-search-cancel-button { display: none; }
.launcher__kbd {
  font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--ink-subtle);
  padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.launcher__list { overflow-y: auto; padding: 6px 6px 10px; }
.launcher__heading { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.launcher__item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: var(--r-md); color: var(--ink); text-decoration: none;
}
.launcher__item:hover, .launcher__item.is-active { background: var(--surface-hover); }
.launcher__item.is-active { box-shadow: inset 0 0 0 1px var(--line-strong); }
.launcher__icon {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: var(--r-md); background: var(--surface-sunk); border: 1px solid var(--line); color: var(--ink-muted);
}
.launcher__icon svg { width: 16px; height: 16px; }
.launcher__item.is-current .launcher__icon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.launcher__name { display: block; font-size: 14px; font-weight: 500; }
.launcher__desc { display: block; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.launcher__empty { padding: 24px; text-align: center; font-size: 13px; color: var(--ink-muted); }
@media (max-width: 639px) {
  .launcher { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
}

/* Narrow phones: the header can't fit the brand plus two auth buttons, so the
   secondary "Sign in" steps aside ("Get started" still leads to the auth flow). */
@media (max-width: 399px) { .hide-xs { display: none; } }

/* Landing: "Connect over MCP" card, shares the request-tool layout. */
.mcp-connect__url { display: flex; gap: .5rem; }
.mcp-connect__url .input { flex: 1 1 auto; min-width: 0; }
.mcp-connect__steps { margin: .25rem 0 0; padding-left: 1.25rem; list-style: decimal; display: grid; gap: .5rem; font-size: .875rem; color: var(--ink-muted); line-height: 1.5; }
.mcp-connect__steps strong { color: var(--ink); font-weight: 600; }

/* Landing: "Missing a tool?" request form, below the tool grid. */
.request-tool {
  margin: 0 0 4rem; padding: 2rem;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; align-items: start;
}
.request-tool__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
  background: var(--surface-sunk); color: var(--ink);
}
.request-tool__icon svg { width: 20px; height: 20px; }
.request-tool__title { margin-top: .875rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.request-tool__lede { margin-top: .5rem; color: var(--ink-subtle); line-height: 1.55; }
.request-tool__points { margin-top: 1rem; display: grid; gap: .4rem; font-size: .875rem; color: var(--ink-muted); }
.request-tool__points li { display: flex; gap: .5rem; align-items: baseline; }
.request-tool__points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--ink-subtle); transform: translateY(-1px); }
.request-tool__form { display: grid; gap: .75rem; }
.request-tool__kinds { border: 0; margin: 0; justify-self: start; }
.request-tool__kinds .segmented__item { font-size: .8125rem; padding: 7px 14px; }
.request-tool__kinds .segmented__item:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.request-tool__kinds .segmented__item:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.request-tool__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.request-tool__hint { font-size: .8125rem; color: var(--ink-subtle); flex: 1 1 16rem; }
.request-tool__status { font-size: .875rem; }
.request-tool__status--ok { color: var(--success, var(--ink)); }
.request-tool__status--err { color: var(--danger); }
@media (max-width: 767px) {
  .request-tool { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem 1rem; }
  .request-tool__bar .btn { width: 100%; min-height: 2.75rem; }
}

/* Sign-in notice above tools that need an account (base.html). */
.login-notice { border-radius: 0; border-width: 0 0 1px; margin: 0; justify-content: center; text-align: center; }
.login-notice a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Bento tool grid - the landing page. Four columns on desktop, where a
   `tile--feature` spans 2x2 (inverted, for contrast) and a `tile--wide` spans
   2x1. Two columns on a tablet, one on a phone. A search drops the spans
   (`.is-searching`) so a filtered list never has holes in it.
   Adapted from the INSTALANDING.AI "bento-feature-grid" brief (MIT).
   -------------------------------------------------------------------------- */

.bento {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
  grid-auto-flow: row dense;
}
@media (min-width: 640px)  { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 640px) {
  .bento:not(.is-searching) .tile--feature,
  .bento:not(.is-searching) .tile--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento:not(.is-searching) .tile--feature { grid-row: span 2; }
}

.tile { overflow: hidden; }
.bento .card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }

/* Oversized line icon tucked into the corner of the larger cells - the
   "mini illustration" of the brief, drawn from the tool's own icon so a new
   featured tool needs no new artwork. */
.tile__art {
  position: absolute; right: -18px; bottom: -22px;
  width: 132px; height: 132px;
  color: var(--line-strong); opacity: .55;
  pointer-events: none;
  transition: transform .5s var(--ease-out), color var(--t-base) var(--ease);
}
[dir="rtl"] .tile__art { right: auto; left: -18px; }
.card-link:hover .tile__art { transform: rotate(-6deg) scale(1.04); color: var(--accent-line); }
.tile--wide .tile__desc, .tile--feature .tile__desc { max-width: 46ch; position: relative; }

.bento:not(.is-searching) .tile--feature {
  background: var(--ink); border-color: var(--ink); color: var(--ink-inverse);
  padding: 24px;
}
.bento:not(.is-searching) .tile--feature:hover { background: var(--ink); border-color: var(--ink); }
.bento:not(.is-searching) .tile--feature .tile__name { font-size: 19px; letter-spacing: -.015em; color: var(--ink-inverse); }
.bento:not(.is-searching) .tile--feature .tile__desc {
  font-size: 14px; color: color-mix(in srgb, var(--ink-inverse) 72%, transparent);
}
.bento:not(.is-searching) .tile--feature .tile__icon {
  background: color-mix(in srgb, var(--ink-inverse) 10%, transparent);
  border-color: color-mix(in srgb, var(--ink-inverse) 18%, transparent);
  color: var(--ink-inverse);
}
.bento:not(.is-searching) .tile--feature .tile__foot { color: color-mix(in srgb, var(--ink-inverse) 60%, transparent); }
.bento:not(.is-searching) .tile--feature:hover .tile__foot { color: var(--accent); }
.bento:not(.is-searching) .tile--feature .tile__art {
  width: 220px; height: 220px; right: -28px; bottom: -36px;
  color: color-mix(in srgb, var(--ink-inverse) 14%, transparent); opacity: 1;
}
.bento:not(.is-searching) .tile--feature:hover .tile__art { color: color-mix(in srgb, var(--accent) 45%, transparent); }
.bento.is-searching .tile__art { display: none; }
@media (max-width: 639px) { .tile__art { display: none; } }

/* --------------------------------------------------------------------------
   Header condenses once the page scrolls: a firmer surface and a shadow, so
   it reads as floating above content rather than part of it. Height is not
   changed - `--header-h` positions other sticky bars beneath it.
   -------------------------------------------------------------------------- */

.app-header {
  transition: background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
:root[data-scrolled] .app-header {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Scroll reveal - `.reveal` fades up when it enters the viewport. Only armed
   when app.js has set `data-reveal` on <html>, so without JavaScript (or for
   a crawler) the content is simply there. Reduced motion is honoured in JS
   (never armed) and by the global rule above.
   -------------------------------------------------------------------------- */

:root[data-reveal] .reveal:not(.is-revealed) { opacity: 0; transform: translateY(14px); }
:root[data-reveal] .reveal {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

/* --------------------------------------------------------------------------
   Highlighter mark - a rough-edged stroke of colour behind text, as if marked
   up with a real highlighter. Colour comes from `--sev` when inside a `.sev`
   scope (Security Scan finding titles), the accent otherwise.
   Adapted from the INSTALANDING.AI "highlighter-markup-page" brief (MIT).
   -------------------------------------------------------------------------- */

.hl {
  --hl: var(--sev, var(--accent));
  color: inherit;
  padding: 0 .2em; margin: 0 -.1em;
  border-radius: .35em .15em .4em .2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background:
    linear-gradient(104deg,
      transparent .4em,
      color-mix(in srgb, var(--hl) 22%, transparent) .55em,
      color-mix(in srgb, var(--hl) 16%, transparent) 70%,
      color-mix(in srgb, var(--hl) 26%, transparent) calc(100% - .6em),
      transparent calc(100% - .35em));
  background-size: 100% 78%; background-position: 0 70%; background-repeat: no-repeat;
}
:root[data-theme="dark"] .hl {
  background-image:
    linear-gradient(104deg,
      transparent .4em,
      color-mix(in srgb, var(--hl) 34%, transparent) .55em,
      color-mix(in srgb, var(--hl) 26%, transparent) 70%,
      color-mix(in srgb, var(--hl) 38%, transparent) calc(100% - .6em),
      transparent calc(100% - .35em));
}

/* --------------------------------------------------------------------------
   Landing page - hero search, category chips, grouped tool grid
   -------------------------------------------------------------------------- */

.home-hero { padding: 56px 0 8px; text-align: center; }
@media (min-width: 640px) { .home-hero { padding-top: 88px; } }
.home-hero__eyebrow {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
}
.home-hero__title {
  margin: 18px auto 0; max-width: 18ch;
  font-size: clamp(34px, 6.4vw, 60px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.04; color: var(--ink);
}
.home-hero__title span { color: var(--accent); }
.home-hero__lede {
  margin: 18px auto 0; max-width: 58ch;
  font-size: clamp(15px, 1.8vw, 17.5px); line-height: 1.6; color: var(--ink-muted);
}

.home-search {
  position: relative; max-width: 640px; margin: 32px auto 0;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.home-search__icon {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ink-subtle); pointer-events: none;
}
[dir="rtl"] .home-search__icon { left: auto; right: 20px; }
.home-search__input {
  width: 100%; height: 60px; padding: 0 56px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-raised, var(--surface)); color: var(--ink);
  font: inherit; font-size: 16.5px;
  box-shadow: var(--shadow-pop);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.home-search__input::placeholder { color: var(--ink-subtle); }
.home-search__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-pop), 0 0 0 4px var(--accent-ring); }
.home-search__input::-webkit-search-cancel-button { margin-inline-end: 4px; }
.home-search__kbd {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: none; pointer-events: none;
  font: 500 12px/1 var(--font-mono, ui-monospace, monospace);
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-subtle);
}
[dir="rtl"] .home-search__kbd { right: auto; left: 20px; }
@media (min-width: 640px) { .home-search__kbd { display: inline-block; } }
.home-search__input:focus + .home-search__kbd,
.home-search__input:not(:placeholder-shown) + .home-search__kbd { opacity: 0; }

.home-quick {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin: 18px auto 0; max-width: 720px;
}
.home-quick__label { font-size: 13px; color: var(--ink-subtle); }
.home-quick__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; color: var(--ink-muted); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.home-quick__chip svg { width: 14px; height: 14px; }
.home-quick__chip:hover { border-color: var(--accent-line); color: var(--accent-ink); }

.home-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin: 40px auto 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--ink-muted);
}
.home-trust li { display: inline-flex; align-items: center; gap: 8px; }
.home-trust svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

.home-tools { padding-top: 48px; }
.home-filter {
  position: sticky; top: var(--header-h); z-index: 30;
  margin: 0 calc(-1 * var(--gutter, 16px)); padding: 12px var(--gutter, 16px);
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.home-filter__chips { display: flex; gap: 8px; overflow-x: auto; }
@media (min-width: 900px) { .home-filter__chips { flex-wrap: wrap; justify-content: center; } }
.home-filter__chip {
  flex: none; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-muted);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.home-filter__chip:hover { color: var(--ink); border-color: var(--line-strong); }
.home-filter__chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }

.home-group { margin-top: 28px; }
.home-group[hidden] { display: none; }
.home-group__title {
  margin-bottom: 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle);
}
.home-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  text-decoration: none; color: inherit;
}
.home-card[hidden] { display: none; }
.home-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.home-card__icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
}
.home-card__icon svg { width: 20px; height: 20px; }
.home-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.home-card__name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.home-card__desc { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.home-card__arrow {
  flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ink-subtle);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.home-card:hover .home-card__arrow, .home-card:focus-visible .home-card__arrow { opacity: 1; transform: none; color: var(--accent-ink); }
[dir="rtl"] .home-card__arrow { transform: scaleX(-1); }
#tools .request-tool, #request-tool { margin-top: 64px; }

/* ==========================================================================
   Tool pages - one consistent frame for every tool
   Layered over the components above: every tool template inherits these
   without per-template styling, so the catalogue reads as one product.
   ========================================================================== */

/* Head: icon tile, category crumb, title, lede */
.tool-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding-block: 12px 24px; margin-bottom: 4px;
}
@media (min-width: 640px) { .tool-head { gap: 18px; padding-block: 20px 28px; } }
.tool-head__icon {
  flex: none; width: 44px; height: 44px; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-xs);
}
.tool-head__icon svg { width: 22px; height: 22px; }
@media (min-width: 640px) {
  .tool-head__icon { width: 52px; height: 52px; border-radius: 14px; }
  .tool-head__icon svg { width: 25px; height: 25px; }
}
@media (max-width: 420px) { .tool-head__icon { display: none; } }
.tool-head__text { min-width: 0; flex: 1 1 auto; }
.tool-head__eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink-subtle);
  transition: color var(--t-fast) var(--ease);
}
.tool-head__eyebrow:hover { color: var(--accent-ink); }
.tool-head__eyebrow span { color: var(--line-strong); }
.tool-head .page-title { line-height: 1.2; text-wrap: balance; }
@media (min-width: 640px) { .tool-head .page-title { font-size: 28px; } }
.tool-head .page-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }
@media (min-width: 640px) { .tool-head .page-sub { font-size: 15px; } }

/* Section-level rhythm inside a tool */
.card__title { letter-spacing: -.005em; }
.card__head { min-height: 50px; }
.card + .card { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Controls: taller, clearer hover, consistent focus */
.input, .select { min-height: 40px; }
.input:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled),
.select:hover:not(:focus):not(:disabled) { border-color: var(--n-400); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.label { font-weight: 550; }
input[type="range"] { accent-color: var(--accent); }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--surface-hover); }

/* Buttons: tactile press, visible keyboard focus, no layout jump */
.btn {
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              transform .08s var(--ease);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-secondary { box-shadow: var(--shadow-xs); }
.btn-secondary:hover:not(:disabled) { border-color: var(--n-400); }
.btn[aria-busy="true"] { cursor: progress; }

/* Touch screens get 40px+ targets without changing the desktop density */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .btn-icon, .icon-btn { min-width: 40px; min-height: 40px; }
  .segmented__item { padding-block: 9px; }
  .checkbox, .radio { width: 18px; height: 18px; }
}

/* Segmented control: clearer active state and keyboard focus */
.segmented { box-shadow: inset 0 0 0 1px var(--line); }
.segmented__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.segmented__item[aria-selected="true"], .segmented__item.is-active { color: var(--ink); font-weight: 600; }

/* Drop zones (file inputs): one look and one drag state everywhere */
.dropzone {
  border-style: dashed; border-color: var(--line-strong);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.dropzone:hover { border-color: var(--n-400); background: var(--surface-hover); }
.dropzone.drag, .dropzone.is-dragging {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

/* Stat tiles: big number, small label */
.stat { padding: 14px 16px; }
.stat__label { font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; }
.stat__value { font-size: 22px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }

/* Alerts and badges read as part of the page, not stickers */
.alert { line-height: 1.55; }
.badge { font-variant-numeric: tabular-nums; }

/* Results arriving: a short settle instead of a pop */
[id*="result" i]:not(.hidden):not([hidden]) { animation: fadeIn .24s var(--ease-out) backwards; }

/* Tables: sticky header and row hover for anything scrollable */
.table th { position: sticky; top: 0; z-index: 1; background: var(--surface-sunk); }
.table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table tbody tr:hover td { background: var(--surface-hover); }

/* Code areas: comfortable line height and visible selection */
.code-block, textarea.mono, .textarea.mono { line-height: 1.6; tab-size: 4; }

/* Related tools strip */
.related-tools { flex: none; padding-block: 40px 8px; border-top: 1px solid var(--line); margin-top: 48px; }
.related-tools__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.related-tools__title { font-size: 15px; font-weight: 600; }
.related-tools__all {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--ink-muted);
}
.related-tools__all:hover { color: var(--accent-ink); }
.related-tools__all svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.related-tools__all:hover svg { transform: translateX(2px); }
[dir="rtl"] .related-tools__all svg { transform: scaleX(-1); }
.related-tools__grid { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px)  { .related-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related-tools__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.related-tool { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px; }
.related-tool__icon {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--ink-muted); border: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.related-tool__icon svg { width: 17px; height: 17px; }
.related-tool:hover .related-tool__icon { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.related-tool__name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.related-tool__desc { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.related-tools + .seo-prose { margin-top: 40px; }

/* Editor pane used by the formatters and converters */
.code-area {
  flex: 1; width: 100%; resize: none; border: 0; background: transparent;
  padding: 12px 16px; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; tab-size: 2; white-space: pre; overflow: auto;
  color: var(--ink); caret-color: var(--accent);
}
.code-area:focus { outline: none; }
.code-area::placeholder { color: var(--ink-subtle); }
.card:has(> .code-area:focus), .card:has(.code-area:focus) {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.card:has(> textarea:not(.textarea):focus) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---- Detail fixes ----------------------------------------------------------
   A footer whose only children are hidden (an error box waiting for an error,
   a file input) would otherwise render as an empty grey strip under a form. */
.card__foot:not(:has(> :not(.hidden, [hidden], input[type="file"]))) { display: none; }
/* Number fields: the browser's spin buttons crowd the value and step by 1,
   which is never what a height, an amount or a percentage wants. */
.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Once files are loaded the drop zone is a "replace" target, not the page's
   headline: keep it on one short row so the results sit near the top. */
.dropzone.dropzone--compact { padding-top: 14px; padding-bottom: 14px; }
.dropzone.dropzone--compact .empty__icon,
.dropzone.dropzone--compact p + p:not(.error-text) { display: none; }
/* The sign-in notice holds inline links: as a flex row each text run became
   its own column on a phone. Let it flow as one paragraph. */
.alert.login-notice { display: block; }
/* A segmented control wider than its row wraps instead of hiding options
   behind an unmarked horizontal scroll. */
.segmented { flex-wrap: wrap; overflow-x: visible; }