/* ==========================================================
   VERYQUERY · design system
   Editorial cartography · warm paper · surveyor's amber

   The universal layer for every veryquery.com surface:
   marketing site, dashboard, help, docs. Each one loads this
   file from cdn.veryquery.com and layers its own architecture
   (hero/footer, app shell, rail, etc.) on top in a local
   stylesheet.

   Contains: tokens (:root), reset, typography base, .eyebrow,
   .prose, .btn*, .field*, reduced-motion + print overrides,
   .ds-container helper.

   Stores are intentionally NOT consumers — each store has its
   own brand palette and typography (fashion, sporting-goods,
   home-goods, cosmetics).
========================================================== */

:root {
  /* ---------- Paper & ink ---------- */
  --paper:        #EEE5CE;
  --paper-deep:   #E4D8B7;
  --paper-darker: #D6C69E;
  --ink:          #17140E;
  --ink-soft:     #2F2A20;
  --ink-mid:      #5E564A;
  --ink-ghost:    #948974;
  /* Hairline rules. The primary --rule is a low-opacity ink so 1px
     borders read as surveyor's-chart hairlines without aliasing
     under 1px on standard-DPI screens. --rule-soft is even fainter
     for inner dividers and dashed separators. */
  --rule:         rgba(23, 20, 14, 0.22);
  --rule-soft:    rgba(23, 20, 14, 0.13);
  --accent:       #B24718;
  --accent-deep:  #84310D;
  --accent-tint:  #E7D3B7;
  --forest:       #2A3328;

  /* ---------- Type ---------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-3xs: 0.625rem;
  --t-2xs: 0.6875rem;
  --t-xs:  0.75rem;
  --t-sm:  0.8125rem;
  --t-md:  0.9375rem;
  --t-base:1rem;
  --t-lg:  1.1875rem;
  --t-xl:  1.4375rem;
  --t-2xl: 1.875rem;
  --t-3xl: 2.625rem;
  --t-4xl: 3.75rem;
  --t-5xl: 5.375rem;
  --t-6xl: 7.5rem;

  /* Badge typography. Tuned for the uppercase mono label used across
     tables, summary cells, and row meta in app-system.css. */
  --badge-font-size:      var(--t-3xs);
  --badge-padding:        0.35em 0.75em;
  --badge-letter-spacing: 0.08em;

  /* ---------- Space ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;
  --s-10: 9rem;
  --s-11: 12rem;

  /* ---------- Structure ---------- */
  --container: 1320px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --rule-w:    1px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 240ms;
  --dur-2: 520ms;
  --dur-3: 900ms;
  --dur-4: 1400ms;
}

/* ==========================================================
   RESET
========================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s-7); }
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}
/* Very faint paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.55;
  mix-blend-mode: multiply;
  z-index: 2;
}
/* Very faint coordinate grid */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(23,20,14,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,20,14,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  z-index: 1;
}
main, header, footer, section { position: relative; z-index: 3; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
textarea { resize: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; }

/* ==========================================================
   TYPOGRAPHY BASE
========================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 420;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  letter-spacing: -0.017em;
  line-height: 0.95;
  color: var(--ink);
}
h1 { font-size: clamp(3rem, 6.4vw, var(--t-5xl)); }
h2 { font-size: clamp(2.25rem, 5vw, var(--t-4xl)); }
h3 { font-size: clamp(1.375rem, 2.2vw, var(--t-xl)); }

p { color: var(--ink-soft); }

/* Multi-selector setting the mono small-caps look. Covers the standalone
   .eyebrow primitive plus marketing-only classes (.sec__tag, etc.); the
   marketing classes don't exist on the dashboard so their rules are
   harmless no-ops there. The standalone `.eyebrow { ... }` rule below
   relies on this declaration's order to override letter-spacing. */
.eyebrow,
.sec__tag,
.sec__num,
.cap__tag,
.hero__coords,
.ledger__head,
.field__k,
.foot__k,
.foot__base,
.hero__viz-cap,
.map__axis,
.map__points text,
.querylabel__text,
.flyw__cap {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.prose p + p { margin-top: var(--s-4); }
.prose p {
  font-size: clamp(1rem, 1.1vw, var(--t-lg));
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
}
.prose em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  color: var(--ink);
  font-weight: 420;
  padding: 0 var(--s-1);
  display: inline;
}

/* ==========================================================
   EYEBROW: small caps label used on the site and the dashboard
========================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-mid);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow::after {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--rule);
}
.eyebrow__sigil { color: var(--accent); font-family: var(--font-display); font-size: 1.1em; position: relative; top: 0.02em; text-transform: none; }

/* ==========================================================
   BUTTONS
========================================================== */
.btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65em;
  padding: 0.9em 1.25em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.btn__arrow {
  transition: transform var(--dur-1) var(--ease-out);
  font-family: var(--font-display);
  font-size: 1.1em;
}
.btn:hover .btn__arrow { transform: translate(3px, 0); }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* Amber-on-dark CTA. Used when the button needs to stand out against
   an ink-tone background (e.g. the dashboard's no-plan banner). The
   accent color is bright enough that ink-tone text fails legibility,
   so foreground stays on `--paper`. */
.btn--accent {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn--accent:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--small {
  padding: 0.5em 0.85em;
  font-size: var(--t-2xs);
  letter-spacing: 0.12em;
}

/* ==========================================================
   FORM FIELDS
   The .field is the universal form atom. Wraps a label + an
   input/select/textarea + optional hint and error. The visible
   field is a hairline-bordered box that reads as a "measurement
   entry" in the surveyor's-chart vocabulary.

   Mixed typographic registers:
     · Label  — mono uppercase (instrument tag)
     · Input  — body sans  (the recorded value)
     · Hint   — italic Fraunces (editorial margin note)
     · Error  — mono accent-deep (notation strike)

   States:
     · :hover       border → ink-mid
     · :focus       border → ink (full opacity)
     · :disabled    dashed border, 55% opacity
     · :invalid /
       .is-invalid  border → accent-deep

   Required entries: add .field__k--required for the survey-form
   "·" prefix marker.
========================================================== */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-body);
}
.field--wide { grid-column: 1 / -1; }
/* Inline variant: label sits to the left of the input rather
   than above. Used for compact surfaces (single-row settings,
   inline filters where a header label is overkill). */
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}
.field--inline .field__k {
  flex: 0 0 auto;
  min-width: 8rem;
}

.field__k {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  text-transform: uppercase;
}
.field__k--required::before {
  content: "·";
  color: var(--accent);
  font-weight: 700;
  margin-right: 0.4em;
  position: relative;
  top: -0.05em;
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--t-md);
  color: var(--ink);
  padding: 0.55em 0.75em;
  background: var(--paper);
  border: 1px solid var(--rule);
  outline: none;
  resize: none;
  width: 100%;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-ghost);
}
.field input:hover:not(:disabled),
.field select:hover:not(:disabled),
.field textarea:hover:not(:disabled) {
  border-color: var(--ink-mid);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  border-style: dashed;
  opacity: 0.55;
  cursor: not-allowed;
}
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--accent-deep);
}
.field textarea {
  min-height: 6rem;
  line-height: 1.5;
}

/* Refreshed select chevron — fine mono-stroke "▾" in ink at
   60% opacity, paired with the boxed-input padding so it
   doesn't crowd the edge. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2317140E' stroke-opacity='0.6' fill='none' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  padding-right: var(--s-6);
  cursor: pointer;
}

.field__hint {
  margin-top: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: var(--t-sm);
  color: var(--ink-mid);
  line-height: 1.4;
}
.field__error {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  min-height: 1em;
}

/* ==========================================================
   CHECKBOX
   Mirrors .vq-radio's ink-square aesthetic but checkbox-shaped
   (sharp corners, ink fill on check). Native control hidden
   off-screen; visible square drawn on a sibling .checkbox__box.

   Markup:
     <label class="checkbox">
       <input type="checkbox">
       <span class="checkbox__box" aria-hidden="true"></span>
       <span>label text</span>
     </label>
========================================================== */
.checkbox {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-2);
  align-items: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink);
  line-height: 1.3;
  user-select: none;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.checkbox__box {
  width: 0.95em;
  height: 0.95em;
  border: 1px solid var(--ink);
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
  transition: background var(--dur-1) ease;
}
.checkbox input[type="checkbox"]:checked + .checkbox__box {
  background: var(--ink);
}
/* Inner check mark: a small notch carved out of the ink fill,
   drawn via clip-path so the mark is sharp at any size. */
.checkbox input[type="checkbox"]:checked + .checkbox__box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--paper);
  clip-path: polygon(20% 50%, 45% 75%, 85% 25%, 75% 15%, 45% 55%, 30% 40%);
}
.checkbox input[type="checkbox"]:focus-visible + .checkbox__box {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.checkbox input[type="checkbox"]:disabled + .checkbox__box {
  opacity: 0.55;
  border-style: dashed;
  cursor: not-allowed;
}

/* ==========================================================
   UTILITIES
   Atomic helpers used across every surface (site, dashboard,
   help, docs, and admin once it's migrated). Kept tiny on
   purpose — additions need to clear the bar of "we'd write
   this same rule on >3 surfaces".
========================================================== */

/* ---------- Type family + color ---------- */
.mono         { font-family: var(--font-mono); }
.muted        { color: var(--ink-mid); }
.text-success { color: var(--forest); }
.text-danger  { color: var(--accent-deep); }
.text-accent  { color: var(--accent); }

/* ---------- Type size ---------- */
.text-3xs { font-size: var(--t-3xs); }
.text-2xs { font-size: var(--t-2xs); }
.text-xs  { font-size: var(--t-xs); }
.text-sm  { font-size: var(--t-sm); }
.text-md  { font-size: var(--t-md); }
.text-lg  { font-size: var(--t-lg); }
.text-xl  { font-size: var(--t-xl); }

/* ---------- Alignment ---------- */
.text-right { text-align: right; }
.nums-right { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Spacing (mt/mb on the spacing scale) ---------- */
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* ---------- Visibility ---------- */
.hidden { display: none !important; }

/* ==========================================================
   REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================
   PRINT
========================================================== */
@media print {
  body::before, body::after { display: none; }
  * { color: #000 !important; background: #fff !important; }
}

/* ==========================================================
   GENERIC CONTAINER (dashboard-friendly)
   Marketing site uses its own scoped aliases (.sec__inner, etc.);
   dashboard uses this standalone class.
========================================================== */
.ds-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}