/* askthenozzle — shared design system.
   Loaded by every page so the palette, typography, header and primitives
   stay in lockstep. Page-specific styles live inline in each .html file
   below this stylesheet. */

:root {
  --bg: #f7f6f1;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #e8efed 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 20%, #f1ece2 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #fbfaf6;
  --fg: #0d1411;
  --fg-soft: #3a4641;
  --muted: #6c7872;
  --rule: #ece9e0;
  --rule-strong: #d8d3c4;
  --accent: #0b6e6e;
  --accent-hover: #095454;
  --accent-soft: #e6f3f3;
  --accent-text: #064848;
  --warn: #92400e;
  --warn-bg: #fef3c7;
  --warn-border: #fde68a;
  --ok: #047857;
  --ok-bg: #ecfdf5;
  --ok-border: #a7f3d0;
  --danger: #b91c1c;
  --shadow-sm: 0 1px 2px rgba(13,20,17,0.05);
  --shadow-md: 0 4px 6px -1px rgba(13,20,17,0.08), 0 2px 4px -2px rgba(13,20,17,0.04);
  --shadow-lg: 0 10px 25px -8px rgba(13,20,17,0.12), 0 4px 10px -4px rgba(13,20,17,0.06);
  --shadow-hover: 0 14px 30px -10px rgba(11,110,110,0.18), 0 6px 12px -4px rgba(13,20,17,0.06);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Always reserve space for the vertical scrollbar so the brand/nav don't
     shift left/right between pages that scroll vs. ones that don't. */
  scrollbar-gutter: stable;
}
/* HTML5 hidden attribute must always win, even when an element has an
   inline display: flex / grid (which would otherwise override hidden). */
[hidden] { display: none !important; }
body {
  font-family: 'Inter', -apple-system, system-ui, "Segoe UI", sans-serif;
  background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed;
  color: var(--fg); margin: 0; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
code, .mono { font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; }

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

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 246, 241, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(216, 211, 196, 0.5);
}
.header-inner {
  max-width: 980px; margin: 0 auto; padding: 0.85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  flex-wrap: nowrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em;
  color: var(--fg); text-decoration: none;
  flex-shrink: 0; white-space: nowrap;     /* never let the wordmark wrap */
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, #0a8c8c 100%);
  color: white; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.25);
}
.brand-mark svg { width: 16px; height: 16px; }
.brand .name-dot { color: var(--accent); font-weight: 800; }

.nav-right {
  display: flex; gap: 0.1rem; align-items: center;
  font-size: 0.92rem;
  /* Allow the nav to wrap onto a second line if it really has to, but
     justify everything to the right edge so the brand stays anchored
     hard-left on a single line. */
  flex-wrap: wrap; justify-content: flex-end;
  min-width: 0;          /* let the flex item shrink rather than push the brand */
}
.nav-right a {
  color: var(--muted); text-decoration: none;
  padding: 0.45rem 0.7rem; border-radius: 7px;
  font-weight: 500; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
@media (max-width: 880px) {
  .nav-right a { padding: 0.4rem 0.55rem; }
}
.nav-right a:hover { background: rgba(11,110,110,0.07); color: var(--accent-text); }
.nav-right a.active {
  color: var(--fg); font-weight: 700;
}
.nav-right a.btn.active { color: white; }
.nav-right .credits-pill {
  background: var(--accent-soft); color: var(--accent-text);
  padding: 0.35rem 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.nav-right .credits-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}
.nav-right .btn {
  background: var(--fg); color: white; padding: 0.45rem 1rem; border-radius: 7px;
  font-weight: 500; transition: transform 0.1s, background 0.15s;
}
.nav-right .btn:hover { background: #1f2a26; color: white; transform: translateY(-1px); }

/* Account dropdown — signed-in users see their name + chevron. Click opens
   a small panel with Plans + Sign out. */
.acct-menu { position: relative; display: inline-flex; align-items: center; }
.acct-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--surface-2); border: 1px solid var(--rule-strong);
  color: var(--fg); font-weight: 500; font-size: 0.92rem;
  padding: 0.4rem 0.7rem; border-radius: 7px; cursor: pointer;
  font-family: inherit;
}
.acct-trigger:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.acct-trigger .acct-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-trigger .acct-chev { width: 13px; height: 13px; color: var(--muted); transition: transform 0.15s; }
.acct-trigger[aria-expanded="true"] .acct-chev { transform: rotate(180deg); color: var(--accent); }
.acct-pop {
  position: absolute; top: calc(100% + 0.4rem); right: 0;
  min-width: 200px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 0.4rem; z-index: 100;
}
.acct-pop .acct-email {
  font-size: 0.78rem; color: var(--muted); padding: 0.4rem 0.6rem 0.5rem;
  border-bottom: 1px solid var(--rule); margin-bottom: 0.3rem;
  word-break: break-all;
}
.acct-pop a {
  display: block; padding: 0.5rem 0.6rem; border-radius: 6px;
  font-size: 0.93rem; color: var(--fg); text-decoration: none;
}
.acct-pop a:hover { background: var(--accent-soft); color: var(--accent-text); }
.acct-pop a.danger-link { color: var(--danger); margin-top: 0.2rem; }
.acct-pop a.danger-link:hover { background: #fdeaea; color: var(--danger); }

/* --- layout ----------------------------------------------------------- */

/* Every page shares one outer width so the header and content stay perfectly
   aligned as you navigate. Inner layouts (form column, grid, etc.) are then
   constrained within main by their own classes. */
main { max-width: 980px; margin: 3rem auto 5rem; padding: 0 1.5rem; }
/* Form-heavy pages (diagnose, login, history, privacy) read better with a
   narrower inner column — set on a child .col so main stays the same width. */
.col {
  max-width: 720px; margin: 0 auto;
}
main.wide { max-width: 980px; }  /* legacy alias — same as default now */

/* --- hero ------------------------------------------------------------- */

.hero { margin-bottom: 2.5rem; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--accent-soft); color: var(--accent-text);
  padding: 0.35rem 0.85rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.hero-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 2.9rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 0.8rem; color: var(--fg);
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent) 0%, #14a7a7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p {
  color: var(--fg-soft); margin: 0; font-size: 1.06rem;
  max-width: 620px; line-height: 1.55;
}

/* --- cards ------------------------------------------------------------ */

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1.7rem; box-shadow: var(--shadow-md);
  transition: box-shadow 0.18s, transform 0.18s;
}
.card + .card { margin-top: 1rem; }
.card h2 {
  font-size: 1.02rem; font-weight: 600; margin: 0 0 1rem; color: var(--fg);
  letter-spacing: -0.01em;
}
.card h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

/* --- banners ---------------------------------------------------------- */

.banner {
  padding: 0.85rem 1.1rem; border-radius: var(--radius-md);
  font-size: 0.93rem; display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid; box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.banner.info { background: var(--accent-soft); border-color: #b5dada; color: var(--accent-text); }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.banner.ok   { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.banner.err  { background: #fdeaea; border-color: #f5b5b5; color: var(--danger); }
.banner a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.banner svg { flex-shrink: 0; width: 18px; height: 18px; }

/* --- buttons ---------------------------------------------------------- */

button {
  font-family: inherit; cursor: pointer;
}
button.primary {
  background: var(--fg); color: white; border: none;
  padding: 0.75rem 1.5rem; font-size: 0.98rem; font-weight: 600;
  border-radius: var(--radius-md);
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-md); min-height: 44px;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
button.primary:hover:not(:disabled) {
  background: #1f2a26; transform: translateY(-1px); box-shadow: var(--shadow-lg);
}
button.primary:active:not(:disabled) { transform: translateY(0); }
button.primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: var(--shadow-sm); }
button.primary svg { width: 18px; height: 18px; }

button.secondary {
  background: var(--surface); color: var(--fg); border: 1px solid var(--rule-strong);
  padding: 0.55rem 1rem; border-radius: var(--radius-md); font-size: 0.92rem;
  font-weight: 500; transition: background 0.12s, border-color 0.12s;
}
button.secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent); }

button.ghost {
  background: transparent; color: var(--accent-text);
  border: 1px solid transparent; padding: 0.45rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500;
}
button.ghost:hover { background: var(--accent-soft); }

button.danger {
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger); padding: 0.4rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500;
}
button.danger:hover { background: #fdeaea; }

/* --- forms ------------------------------------------------------------ */

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], textarea, select {
  width: 100%; padding: 0.65rem 0.85rem;
  font-family: inherit; font-size: 0.94rem; color: var(--fg);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 4rem; }

label { font-weight: 500; font-size: 0.93rem; color: var(--fg); }
label .hint { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

/* --- chips & pills ---------------------------------------------------- */

.cost-chip {
  background: var(--accent-soft); color: var(--accent-text);
  padding: 0.22rem 0.55rem; border-radius: 6px; font-weight: 600;
  font-size: 0.83rem;
}

/* Recommended setting changes — replaces the JSON download with an inline
   readable list of suggested edits.  Each row: setting key (mono), arrow
   was->new, confidence pill, reason. */
.recommend-card {
  margin-top: 1rem; padding: 1.3rem 1.5rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.recommend-head {
  display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.2rem;
}
.recommend-head h3 {
  margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
}
.recommend-status {
  color: var(--muted); font-size: 0.83rem; margin-left: auto;
}
.recommend-sub {
  color: var(--fg-soft); font-size: 0.88rem; margin: 0 0 1rem;
}
#recommend-list { display: flex; flex-direction: column; gap: 0.55rem; }
.rec-row {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr auto;
  grid-template-areas:
    "key  values conf"
    "reason reason reason";
  align-items: center; gap: 0.45rem 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.rec-key {
  grid-area: key;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem; font-weight: 500;
  color: var(--accent-text); background: transparent;
  padding: 0; border: none;
  word-break: break-all;
}
.rec-values {
  grid-area: values;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.rec-was {
  color: var(--muted); font-size: 0.88rem; font-weight: 500;
  text-decoration: line-through; text-decoration-color: rgba(108,120,114,0.4);
}
.rec-arrow { color: var(--muted); font-size: 0.85rem; }
.rec-new {
  color: var(--fg); font-size: 0.95rem; font-weight: 700;
}
.rec-conf {
  grid-area: conf;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.rec-conf.high   { background: var(--ok-bg);     color: var(--ok); }
.rec-conf.medium { background: var(--accent-soft); color: var(--accent-text); }
.rec-conf.low    { background: var(--warn-bg);   color: var(--warn); }
.rec-reason {
  grid-area: reason;
  color: var(--fg-soft); font-size: 0.85rem; line-height: 1.45;
}
.recommend-foot {
  margin-top: 1rem; padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.85rem; color: var(--muted);
}


/* --- footer ----------------------------------------------------------- */

footer {
  max-width: 760px; margin: 4rem auto 2rem; padding: 0 1.5rem;
  color: var(--muted); font-size: 0.84rem; text-align: center;
}
footer a { color: var(--muted); margin: 0 0.4rem; }

@media (max-width: 600px) {
  .header-inner { padding: 0.7rem 1rem; gap: 0.5rem; }
  .nav-right a { padding: 0.4rem 0.55rem; font-size: 0.85rem; }
  main { margin: 1.5rem auto 3rem; padding: 0 1rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 0.98rem; }
  .card { padding: 1.25rem; }
  button.primary { width: 100%; justify-content: center; }
}