/* ---------------------------------------------------------------------------
   Ranger Pro — settings surface
   Loaded AFTER each page's inline <style>, so it wins without editing them.

   The idea: the scan card already teaches people a colour language — green is an
   Amazon exit, blue is buyback, red is reject. The settings pages threw that away
   and rendered every section as the same white box, which is why nothing stood out.
   Here each section wears the colour of the outcome it controls, as a tinted header
   band. Somebody who has scanned a pallet already knows what green means.

   Everything else stays quiet: one idea, executed properly.
   --------------------------------------------------------------------------- */

:root {
  --k-amazon:#16a34a;   /* Amazon exits — same green the MF bin uses */
  --k-fba:#b45309;      /* FBA — the amber bin */
  --k-cash:#2563eb;     /* buyback vendors — the WOB bin */
  --k-cost:#64748b;     /* costs: the subtractive stage, deliberately neutral */
  --k-team:#7c3aed;     /* people, the one part of this that isn't a book */
  --k-default:#64748b;

  --card-radius:14px;
  --card-pad:22px;
  --elev:0 1px 2px rgba(16,22,34,.06), 0 10px 24px -14px rgba(16,22,34,.28);
  --elev-hi:0 1px 2px rgba(16,22,34,.07), 0 18px 38px -18px rgba(16,22,34,.34);
}

/* A deeper, cooler ground so a white card genuinely lifts off it. The old #f6f7f9
   sat within a couple of percent of the panels, which is why nothing read as raised. */
@media (prefers-color-scheme: light) {
  :root { --bg:#e8ecf2; --line:#dde3ec; --panel2:#f4f6fa; --chip:#eaeef4; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --elev:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.8);
    --elev-hi:0 1px 2px rgba(0,0,0,.55), 0 20px 42px -18px rgba(0,0,0,.9);
  }
}

body { background:var(--bg); }

/* --- the card ------------------------------------------------------------ */
.card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:0 var(--card-pad) var(--card-pad);
  box-shadow:var(--elev);
  overflow:hidden;
  transition:box-shadow .16s ease;
}
.card:hover { box-shadow:var(--elev-hi); }

/* --- header band --------------------------------------------------------- */
/* h2 spans the full card width by cancelling the card's horizontal padding, so the
   tint reads as a label across the top of a drawer rather than a floating heading. */
.card > h2 {
  margin:0 calc(var(--card-pad) * -1) 0;
  padding:15px var(--card-pad) 13px;
  background:color-mix(in srgb, var(--key, var(--k-default)) 8%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--key, var(--k-default)) 22%, transparent);
  font-size:17px; font-weight:680; letter-spacing:-.01em; line-height:1.3;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
/* The eyebrow says which decision this section feeds — utility face, small, coloured. */
.card > h2::before {
  content:attr(data-eyebrow);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--key, var(--k-default));
  background:color-mix(in srgb, var(--key, var(--k-default)) 14%, transparent);
  padding:3px 8px; border-radius:5px; white-space:nowrap;
  position:relative; top:-1px;
}
.card > h2:not([data-eyebrow])::before { content:none; }

.card[data-key="amazon"] { --key:var(--k-amazon); }
.card[data-key="fba"]    { --key:var(--k-fba); }
.card[data-key="cash"]   { --key:var(--k-cash); }
.card[data-key="cost"]   { --key:var(--k-cost); }
.card[data-key="team"]   { --key:var(--k-team); }

/* First element after the band needs the padding the band cancelled. */
.card > h2 + * { margin-top:16px; }
.card > .sechint { color:var(--muted); font-size:13.5px; max-width:78ch; }

/* Vendor cards lead with a toggle row rather than an h2, so the band goes on .vhead
   instead — same device, different element, so the page still reads as one system. */
.card.vcard { padding-top:0; }
.card.vcard > .vhead {
  margin:0 calc(var(--card-pad) * -1);
  padding:14px var(--card-pad);
  background:color-mix(in srgb, var(--key, var(--k-default)) 8%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--key, var(--k-default)) 22%, transparent);
}
.card.vcard > .vhead + * { margin-top:15px; }

/* A rule section holds many rules, so its band should not shout as loudly as a
   top-level setting's. Same colour, lighter tint. */
.card[data-eyebrow-quiet] > h2 { background:color-mix(in srgb, var(--key) 5%, transparent); }

/* --- controls: make an input look like something you can change ----------- */
input[type=text], input[type=number], input[type=password], input[type=email], select {
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:9px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input[type=text]:hover, input[type=number]:hover, input[type=password]:hover, select:hover {
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
}
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

button { transition:transform .06s ease, box-shadow .12s ease, background .12s ease; }
button:active { transform:translateY(1px); }

/* --- the save bar reads as a floor, not a floating scrap ------------------ */
.stickybar {
  background:linear-gradient(transparent, var(--bg) 42%);
  backdrop-filter:blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* Narrow screens: the band tint stays, the padding tightens. */
@media (max-width:640px) {
  :root { --card-pad:16px; }
  .card > h2 { font-size:16px; }
}