/* Break Up Buddy.
 *
 * One hand-written stylesheet. No framework, no build step, no Node.
 *
 * The look is version one's: Manrope, indigo accent, hairline borders, small
 * radii, one barely-there shadow, elevation carried by borders rather than by
 * shadow. Version one deleted an earlier look that used gradient heroes, glow
 * shadows and 800-weight everything, because it made every screen shout at the
 * same volume. That reasoning holds for the signed-in area and does not hold for
 * a landing page, so the two are pitched differently on purpose:
 *
 *   Public pages   scale, air, one gradient wash, display type, a little motion.
 *   Signed in      calm and dense, the way version one reads.
 *
 * Light only for now. Every colour is a token in :root, so adding dark later
 * means adding one block rather than touching every rule.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope.938c6e8019b6.woff2") format("woff2");
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces and text. Version one's values, unchanged. */
  --bb-bg: #f7f7fb;
  --bb-surface: #ffffff;
  --bb-raised: #f1f1f7;
  --bb-line: #e3e3ee;
  --bb-ink: #1a1a24;
  --bb-muted: #6b6b80;

  /* One accent, used sparingly. Version one's Teal palette, which is also the
     colour of its favicon, so the mark and the accent are the same colour.
     #0f766e is 5.5:1 on white, so it carries body-sized link text. */
  --bb-primary: #0f766e;
  --bb-primary-hover: #115e59;
  --bb-primary-soft: #e6f2f0;
  --bb-on-primary: #ffffff;

  /* Meaning. A palette must never touch these. */
  --bb-danger: #dc2626;
  --bb-danger-soft: #fdeaea;
  --bb-success: #047857;
  --bb-success-soft: #e3f5ee;

  /* The three phases of the programme. */
  --bb-survive: #ea580c;
  --bb-stabilise: #0891b2;
  --bb-rebuild: #4f46e5;

  --bb-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Small. A 28px corner on a data table reads as a toy. */
  --bb-radius-sm: 0.375rem;
  --bb-radius: 0.5rem;
  --bb-radius-lg: 0.75rem;

  --bb-shadow: 0 1px 2px rgb(16 16 32 / 0.04), 0 1px 3px rgb(16 16 32 / 0.06);
  --bb-shadow-pop: 0 8px 28px -12px rgb(16 16 32 / 0.22);

  /* Width scale. A page declares intent and the stylesheet sets the measure. */
  --bb-w-page: 1200px;
  --bb-w-prose: 38rem;

  /* Vertical rhythm inside a section, fluid between phone and desktop. */
  --bb-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Type scale. Body never drops below 18px. */
  --bb-t-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --bb-t-h3: clamp(1.15rem, 1.05rem + 0.42vw, 1.375rem);
  --bb-t-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --bb-t-body: 1.125rem;
  --bb-t-small: 0.9375rem;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anything anchored to an id clears the sticky header. */
  scroll-padding-top: 6rem;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bb-bg);
  color: var(--bb-ink);
  font-family: var(--bb-font);
  font-size: var(--bb-t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The thank-you page is four short paragraphs. Without this the footer sits
   halfway up a desktop window with nothing under it. */
main { flex: 1 0 auto; }

img, svg, video { display: block; max-width: 100%; }
svg { height: auto; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--bb-t-display); }
h2 { font-size: var(--bb-t-h2); }
h3 { font-size: var(--bb-t-h3); letter-spacing: -0.014em; }

p { text-wrap: pretty; }

a { color: var(--bb-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bb-primary-hover); }

/* One focus ring everywhere. Never removed, only restyled. */
:focus-visible {
  outline: 3px solid var(--bb-primary);
  outline-offset: 2px;
  border-radius: var(--bb-radius-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 0.75rem; top: -100%;
  z-index: 100; padding: 0.75rem 1.25rem;
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius); font-weight: 700;
}
.skip:focus { top: 0.75rem; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--bb-w-page);
  margin-inline: auto;
  padding-inline: var(--bb-gutter);
}

.prose { max-width: var(--bb-w-prose); }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.lead { font-size: var(--bb-t-lead); color: var(--bb-ink); line-height: 1.5; }
.muted { color: var(--bb-muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--bb-radius);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.btn--primary {
  background: var(--bb-primary);
  color: var(--bb-on-primary);
}
.btn--primary:hover { background: var(--bb-primary-hover); color: var(--bb-on-primary); }

.btn--quiet {
  background: var(--bb-surface);
  border-color: var(--bb-line);
  color: var(--bb-ink);
}
.btn--quiet:hover { background: var(--bb-raised); border-color: var(--bb-muted); color: var(--bb-ink); }

.btn--sm { min-height: 2.5rem; padding: 0.4rem 1rem; font-size: var(--bb-t-small); }

.btn:active { transform: translateY(1px); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--bb-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bb-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--bb-ink);
  text-decoration: none;
}
.brand:hover { color: var(--bb-ink); }
/* The logo carries its own shape and its own background, so no tile and no
   radius. `height: auto` keeps its 385x394 ratio rather than squashing it. */
.brand__mark { width: 2.75rem; height: auto; flex: none; }

.site-header__nav { display: flex; align-items: center; gap: 0.5rem; }

/* On a narrow phone the button label loses its tail rather than the wordmark
   losing its name. "Break Up Buddy" plus "Register your interest" is about
   394px of content, and an iPhone viewport is 390. */
@media (max-width: 26rem) {
  .btn__tail { display: none; }
  .brand { font-size: 1rem; }
}

/* The label is one flex item, not two. Left as two, the button's own `gap`
   lands between "Register" and "your interest" as a second word space. */
.btn > span { display: inline; }

/* ==========================================================================
   Panel
   ========================================================================== */

.panel {
  padding: 1.75rem;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--bb-surface);
  border-top: 1px solid var(--bb-line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--bb-t-small);
  color: var(--bb-muted);
}

.site-footer a { color: var(--bb-muted); }
.site-footer a:hover { color: var(--bb-primary); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bb-line);
}

/* ==========================================================================
   Motion
   ========================================================================== */

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

/* ==========================================================================
   Forms
   ========================================================================== */

/* Centred, and wider than the prose measure. Version one settled this: a form
   at the prose measure sits in the left half of a 1440px window and reads as a
   page that has not finished loading. */
.form-page { padding-block: clamp(2.5rem, 5vw, 4rem); }
.form-page__head,
.form { max-width: 44rem; margin-inline: auto; }
.form { margin-top: 2.5rem; }

/* A form is not a landing page. The heading states what this is and then gets
   out of the way. */
.form-page h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem); }

/* The thank-you page is a prose column, centred on the same axis as the form. */
.form-page > .wrap > .prose { margin-inline: auto; }

/* Spacing belongs to the flow, not to named sibling pairs. The two conditional
   questions sit in wrappers of their own, so `.fieldset + .field` never matched
   across one and the gap collapsed wherever a wrapper came between. */
.form > * + * { margin-top: 1.75rem; }

.field__label,
.fieldset__legend {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1.4;
}

/* `margin-inline`, not `margin`. A blanket `margin: 0` here sits later in the
   file than `.form > * + *` at the same specificity, so it won, and the gap
   above every fieldset collapsed to nothing. */
.fieldset { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.fieldset__legend { padding: 0; }

.field__optional { font-weight: 500; color: var(--bb-muted); }
.field__hint { margin-bottom: 0.625rem; font-size: var(--bb-t-small); color: var(--bb-muted); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.875rem;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  color: var(--bb-ink);
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

input::placeholder, textarea::placeholder { color: var(--bb-muted); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bb-primary) 22%, transparent);
}

/* A checkbox is a target, so the whole row is the target. */
.choices { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }

.choices label {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.875rem;
  align-items: start;
  min-height: 3rem;
  padding: 0.875rem 1rem;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.choices label:hover { border-color: var(--bb-primary); background: var(--bb-primary-soft); }

.choices input[type="checkbox"],
.choices input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--bb-primary);
}

/* Q2 and Q3 render visible and JavaScript may only hide them after load. If a
   script fails, two of the four questions must still be on the page. */


.field__error {
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--bb-danger);
  color: var(--bb-danger);
  font-size: var(--bb-t-small);
  font-weight: 600;
}

.error-summary {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--bb-danger-soft);
  border: 1px solid color-mix(in oklab, var(--bb-danger) 30%, transparent);
  border-radius: var(--bb-radius);
}
.error-summary h2 { font-size: 1.125rem; color: var(--bb-danger); }
.error-summary ul { margin: 0.75rem 0 0; padding-left: 1.25rem; font-size: var(--bb-t-small); }
.error-summary a { color: var(--bb-danger); }

.form__submit { margin-top: 2.5rem; }

/* ==========================================================================
   Behind the login
   ==========================================================================
   Pitched differently from the public pages on purpose. No gradient, no
   display type, no motion. Version one deleted a louder look because every
   screen shouted at the same volume, and that reasoning holds hardest for the
   one screen somebody reads all day. */

.app { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

.app__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.app h1 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); }
.app__head p { margin-top: 0.375rem; font-size: var(--bb-t-small); }

.back { margin-bottom: 1rem; font-size: var(--bb-t-small); }

/* --- filters -------------------------------------------------------------- */

.filters {
  display: grid;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
  padding: 1.125rem 1.25rem;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
}

@media (min-width: 52rem) {
  .filters { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; }
}

.filters label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bb-muted);
}
.filters input, .filters select { min-height: 2.75rem; padding-block: 0.5rem; font-size: var(--bb-t-small); }
.filters__actions { display: flex; gap: 0.5rem; }

/* --- the queue ------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  font-size: var(--bb-t-small);
}

.table th {
  padding: 0.75rem 1rem;
  background: var(--bb-raised);
  border-bottom: 1px solid var(--bb-line);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-muted);
  text-align: left;
}

.table td { padding: 0.875rem 1rem; border-top: 1px solid var(--bb-line); vertical-align: top; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover { background: var(--bb-raised); }
.table a { font-weight: 700; }

/* The one thing the row has to say at a glance: has anybody opened it. */
.table tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--bb-primary); }
.table__sub { display: block; margin-top: 0.2rem; color: var(--bb-muted); font-size: 0.8125rem; }
.table__empty { padding: 2.5rem 1rem; text-align: center; color: var(--bb-muted); }

.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.375rem;
  background: var(--bb-primary);
  border-radius: 50%;
  vertical-align: 0.1em;
}

/* Below this width a four-column table scrolls sideways, and a Captain
   checking the queue on a phone should not have to. Each row becomes a card
   and each cell carries its own heading. */
@media (max-width: 47.99rem) {
  .table, .table tbody, .table tr, .table td { display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table { border: 0; background: none; }
  .table tr {
    margin-bottom: 0.875rem;
    padding: 0.25rem 0;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius);
  }
  .table tr.is-unread { border-left: 3px solid var(--bb-primary); }
  .table tr.is-unread td:first-child { box-shadow: none; }
  .table td { border-top: 0; padding: 0.5rem 1rem; }
  .table td + td { border-top: 1px solid var(--bb-line); }
  .table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bb-muted);
  }
}

.tag {
  display: inline-block;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.15rem 0.5rem;
  background: var(--bb-raised);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  font-size: 0.75rem;
  color: var(--bb-muted);
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge--new { background: var(--bb-primary-soft); color: var(--bb-primary-hover); }
.badge--open { background: #fff4e5; color: #9a4a06; }
.badge--waiting { background: var(--bb-raised); color: var(--bb-muted); }
.badge--closed { background: var(--bb-success-soft); color: var(--bb-success); }

/* --- one submission ------------------------------------------------------- */

.detail { display: grid; gap: 1.25rem; align-items: start; }

@media (min-width: 62rem) {
  .detail { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .triage { position: sticky; top: 5.5rem; }
}

.facts { display: grid; gap: 0.875rem; margin: 0; }
.facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.facts dt { font-size: var(--bb-t-small); font-weight: 700; color: var(--bb-muted); }
.facts dd { margin: 0; font-size: var(--bb-t-small); }

@media (max-width: 34rem) {
  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.answers { display: grid; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bb-line); }
.answer h2 { margin-bottom: 0.5rem; font-size: 0.9375rem; color: var(--bb-muted); }
.answer p { font-size: var(--bb-t-small); }
.answer p + p { margin-top: 0.75rem; }

.triage h2 { margin-bottom: 0.25rem; font-size: 1.125rem; }
.triage textarea { min-height: 9rem; font-size: var(--bb-t-small); }
.triage select { font-size: var(--bb-t-small); }

/* --- signing in ----------------------------------------------------------- */

.signin { max-width: 26rem; margin-inline: auto; padding-block: clamp(1rem, 5vw, 3rem); }
.signin .form { margin-top: 1.75rem; }

/* The sign-in column is 26rem, and the landing-page heading size splits
   "Break Up Buddy" across two lines inside it. */
.signin h1 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); }