/* NeutralPick shared styles. Loaded after Bootstrap 5.3.3. */

:root {
  --pw-paper: #f3f5f4;
  --pw-surface: #ffffff;
  --pw-ink: #17232e;
  --pw-ink-2: #3a4853;
  --pw-muted: #5d6b74;
  --pw-line: #d6dddb;
  --pw-line-soft: #e6ebe9;

  /* Colour is reserved for vendor answers. */
  --pw-yes: #147a5c;
  --pw-partial: #b7791f;
  --pw-planned: #3d5bd9;
  --pw-no: #b8402f;

  --pw-focus: #3d5bd9;
  --pw-radius-sm: 6px;
  --pw-radius: 10px;

  --pw-font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pw-font-head: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bootstrap hooks */
  --bs-body-font-family: var(--pw-font-body);
  --bs-body-color: var(--pw-ink);
  --bs-body-bg: var(--pw-paper);
  --bs-border-color: var(--pw-line);
  --bs-link-color-rgb: 23, 35, 46;
  --bs-link-hover-color-rgb: 61, 91, 217;
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--pw-paper);
  color: var(--pw-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .pw-head {
  font-family: var(--pw-font-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--pw-ink);
}
h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { max-width: 68ch; }
.pw-lede { font-size: 1.2rem; color: var(--pw-ink-2); max-width: 46ch; }
.pw-muted { color: var(--pw-muted); }
.pw-small { font-size: 0.9rem; }
.pw-num { font-variant-numeric: tabular-nums; }

a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--pw-focus); outline-offset: 2px; border-radius: 4px; }

/* Buttons */
.btn { font-weight: 700; border-radius: var(--pw-radius-sm); padding: 0.6rem 1.1rem; }
.btn-pw {
  --bs-btn-bg: var(--pw-ink); --bs-btn-color: #fff; --bs-btn-border-color: var(--pw-ink);
  --bs-btn-hover-bg: #26384a; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #26384a;
  --bs-btn-active-bg: #0f1820; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--pw-muted); --bs-btn-disabled-border-color: var(--pw-muted);
}
.btn-pw-outline {
  --bs-btn-color: var(--pw-ink); --bs-btn-border-color: var(--pw-ink);
  --bs-btn-hover-bg: var(--pw-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--pw-ink);
  --bs-btn-active-bg: var(--pw-ink); --bs-btn-active-color: #fff;
}
.btn-pw-quiet {
  --bs-btn-color: var(--pw-muted); --bs-btn-hover-color: var(--pw-ink); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--pw-line-soft); --bs-btn-active-bg: var(--pw-line);
  font-weight: 400;
}
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.9rem; }

.form-control, .form-select {
  border-color: var(--pw-line); border-radius: var(--pw-radius-sm); font-size: 1rem; padding: 0.55rem 0.75rem;
}
.form-control:focus, .form-select:focus { border-color: var(--pw-focus); box-shadow: 0 0 0 3px rgba(61, 91, 217, 0.18); }
.form-label { font-weight: 700; margin-bottom: 0.3rem; }
.form-text { color: var(--pw-muted); }

/* Header and footer */
.pw-top { background: var(--pw-surface); border-bottom: 1px solid var(--pw-line); }
.pw-top .container, .pw-top .container-xl { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.pw-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--pw-font-head); font-weight: 700; font-size: 1.2rem; color: var(--pw-ink); text-decoration: none; letter-spacing: -0.02em; }
.pw-logo svg { width: 22px; height: 22px; }
.pw-top nav { margin-left: auto; display: flex; gap: 0.25rem; align-items: center; }
.pw-top nav a:not(.btn) { color: var(--pw-ink-2); text-decoration: none; padding: 0.4rem 0.6rem; border-radius: var(--pw-radius-sm); }
.pw-top nav a:not(.btn):hover { background: var(--pw-line-soft); }

.pw-foot { border-top: 1px solid var(--pw-line); padding: 2rem 0 2.5rem; color: var(--pw-muted); font-size: 0.92rem; }
.pw-foot a { color: var(--pw-ink-2); }
.pw-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Answer marks: the one visual signature. Shape carries meaning; colour reinforces it. */
.pw-mark { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; }
.pw-mark circle, .pw-mark path { vector-effect: non-scaling-stroke; }
.pw-mark-yes { color: var(--pw-yes); }
.pw-mark-partial { color: var(--pw-partial); }
.pw-mark-planned { color: var(--pw-planned); }
.pw-mark-no { color: var(--pw-no); }
.pw-mark-none { color: var(--pw-line); }

/* Priority chips: monochrome, by fill style. */
.prio {
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  font-size: 0.8rem; font-weight: 700; line-height: 1; padding: 0.3rem 0.55rem; border-radius: 99px;
  border: 1.5px solid var(--pw-ink);
}
.prio-must_have { background: var(--pw-ink); color: #fff; }
.prio-nice_to_have { background: transparent; color: var(--pw-ink); }
.prio-optional { background: transparent; color: var(--pw-muted); border-style: dashed; border-color: var(--pw-muted); }

.pw-card { background: var(--pw-surface); border: 1px solid var(--pw-line); border-radius: var(--pw-radius); }

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

/* Analytics consent (assets/js/consent.js) */
.np-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1050; max-width: 40rem; margin: 0 auto;
  background: var(--pw-surface); color: var(--pw-ink); border: 1px solid var(--pw-line); border-radius: var(--pw-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: .9rem 1rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.np-consent p { margin: 0; flex: 1 1 260px; font-size: .92rem; }
.np-consent-btns { display: flex; gap: .5rem; }
/* Bootstrap's widest gutter (g-5, 3rem) is wider than the page's side padding on phones, which made pages scroll sideways. */
@media (max-width: 767.98px) { .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; } }
.pw-top nav .btn { white-space: nowrap; }
@media (max-width: 479.98px) {
  .pw-top .container, .pw-top .container-xl { gap: .25rem .5rem; flex-wrap: wrap; padding-top: .4rem; padding-bottom: .4rem; }
  .pw-top nav a:not(.btn) { padding: .4rem .4rem; }
  .pw-top nav .btn-sm { padding: .3rem .55rem; }
}

#f-example { max-width: 100%; }