/* style.css - Tari's Trip
   "Airy lilac" design, locked by Nick Sep 22 2026 (plan/app-blueprint.md +
   plan/mockups/e2-airy-lilac.html is the visual reference). Calm, big,
   obvious. No animations except native smooth scroll, no swipe gestures, no
   hover-only UI (she's on a touchscreen). Every class/id app.js relies on is
   kept; only the paint changed. */

/* ---- Self-hosted fonts --------------------------------------------------
   Quicksand 600/700 (headings, chips, tabs, Now pill) and DM Sans 400/500
   (body). Self-hosted (not Google's CDN) so the service worker can cache
   them and the fonts still render with zero signal. font-display: swap so
   the page never blocks on a font load while offline. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/quicksand-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/quicksand-700.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-500.woff2') format('woff2');
}

:root {
  /* Page + accent family: one lilac in three steps (light = decoration only,
     mid = outlines / white-on-fill graphics, deep = text + fills under white
     text), per the blueprint's contrast notes. */
  --color-page: #FCF5F8;
  --color-card: #FFFFFF;
  /* Nick (Sep 22): the first pass was too bold a purple. Fills are now pastel
     with DARK violet text on them, instead of deep purple with white text,
     which keeps every label readable while the screen stays light. */
  --acc: #D9CFF5;        /* decoration: dots, blob */
  --acc-mid: #C4B6EC;    /* rings, borders, progress fill, done circle */
  --acc-fill: #E6DEF9;   /* pastel fill for chips, buttons, the Now pill */
  --acc-on-fill: #4A3C90; /* text on the pastel fill (5.9:1) */
  --acc-deep: #6558AE;   /* text and icons on white (5.2:1) */
  --color-tint: #F0ECFA;
  --color-done: #F4F0F8;
  --color-blush: #FDF1EE;
  --color-mint: #E6F4EC;
  --color-green: #2F6B47;
  --color-text: #2B2B33;
  --color-muted: #6B6B78;
  --shadow: 0 6px 18px rgba(60, 60, 120, .07);
  --shadow-now: 0 8px 22px rgba(60, 60, 120, .11);
  --font-round: 'Quicksand', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: var(--font-body);
  background: var(--color-page);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.45;
  /* Room at the bottom so the fixed tab bar never covers content. */
  padding-bottom: 84px;
  /* Clip the header blob so it can never create a horizontal scrollbar. */
  overflow-x: hidden;
}

/* The one flourish allowed by the blueprint: a soft blurred lilac blob
   behind the top-right of the header. pointer-events: none so it can never
   sit in front of a tap target. Fixed (not absolute) to the top of the page
   since the header itself doesn't establish a positioning context. */
body::before {
  content: '';
  position: fixed;
  top: -34px;
  right: -26px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--acc) 0%, var(--color-tint) 70%, transparent 72%);
  opacity: .35;
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3 {
  font-family: var(--font-round);
  font-weight: 700;
  margin: 0 0 8px 0;
}

h1 { font-size: 26px; }
h2 { font-size: 20px; }

a {
  color: var(--acc-deep);
}

button {
  font: inherit;
  color: inherit;
}

/* ---- Layout shell ------------------------------------------------------ */

.app-header {
  position: relative;
  z-index: 1;
  padding: 20px 16px 0 16px;
}

.panel {
  position: relative;
  z-index: 1;
  padding: 0 16px 16px 16px;
}

.panel[hidden] {
  display: none;
}

.panel h1 {
  font-size: 28px;
  padding-top: 4px;
}

/* ---- Status pill + From Nick card -------------------------------------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
}

/* The little dot before the pill text, drawn with a pseudo-element so no
   emoji or icon font is needed for it. */
.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.is-online {
  background: var(--color-mint);
  color: var(--color-green);
}

.status-pill.is-offline {
  background: #ECEAEE;
  color: var(--color-muted);
}

.status-subtext {
  margin: 8px 0 0 0;
  color: var(--color-muted);
  font-size: 14px;
}

.nick-card {
  margin-top: 14px;
  background: var(--color-blush);
  border-radius: 18px;
  padding: 16px 18px;
}

.nick-card .label {
  display: block;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  color: var(--acc-deep);
  margin-bottom: 4px;
}

.nick-card #nick-message {
  font-size: 18px;
}

.notes-list {
  margin: 12px 0 0 0;
  padding-left: 20px;
  color: var(--color-text);
}

.notes-list li {
  margin-bottom: 4px;
}

/* ---- Cards --------------------------------------------------------------
   Shared "floating card" look used by Trip/Guides/Help: white, borderless,
   soft diffuse shadow, generous radius. */

.card {
  background: var(--color-card);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

/* ---- Day chips ----------------------------------------------------------*/

.chip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 20px 16px 6px 16px;
  margin: 0 -16px;
  -webkit-overflow-scrolling: touch;
  /* Hide the scrollbar: the row still scrolls by touch, but a grey bar
     under the chips looks like a broken element to a nervous user. */
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--color-card);
  box-shadow: var(--shadow);
  color: var(--color-text);
  font-family: var(--font-round);
  font-size: 16px;
  font-weight: 700;
}

.chip.is-selected {
  background: var(--acc-fill);
  box-shadow: none;
  color: var(--acc-on-fill);
}

.draft-tag {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-tint);
  border-radius: 6px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* ---- Today: title + progress line --------------------------------------- */

.day-title {
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.15;
  padding-top: 18px;
}

.day-subtitle {
  color: var(--color-muted);
  margin: 6px 0 0 0;
  font-size: 17px;
}

/* "N of M" progress line under the subtitle: a thin lilac track plus the
   count, mirroring the mockup's .prog block. Built in three small pieces
   (track/fill/count) so app.js only ever has to set the fill's width and
   the count text. */
.day-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.day-progress .progress-track {
  flex: 1;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--color-tint);
  overflow: hidden;
}

.day-progress .progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--acc-mid);
}

.day-progress .progress-count {
  font-family: var(--font-round);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ---- Today: group headings + step cards ---------------------------------- */

.group-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px 0;
  font-size: 20px;
}

/* The small lilac dot before every group heading (decoration only, so it
   uses the light accent step). */
.group-heading::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acc);
  flex: 0 0 auto;
}

.step-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-card);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

/* The NOW step: white card, mid-lilac border, stronger shadow, a small
   overlapping "Now" pill. margin-top gives the pill room so it never
   crowds the group heading above it. */
.step-card.is-next {
  margin-top: 8px;
  border: 2px solid var(--acc-mid);
  box-shadow: var(--shadow-now);
}

.step-card.is-next::before {
  content: 'Now';
  position: absolute;
  top: -11px;
  left: 16px;
  background: var(--acc-fill);
  color: var(--acc-on-fill);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .09em;
  padding: 3px 11px;
  border-radius: 999px;
}

/* Done: settles into the soft tint and drops the shadow, rather than the
   old opacity dim, so the text itself stays fully readable (contrast notes
   in the mockup). */
.step-card.is-done {
  background: var(--color-done);
  box-shadow: none;
}

/* The circle is a visual indicator only; the whole card is the tap target
   (Nick's call: a giant circle looked odd and made the card feel like two
   controls). 26px ring per the mockup, top-aligned with the first text
   line. */
.step-check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--acc-mid);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.step-card.is-done .step-check {
  background: var(--acc-mid);
  border-color: var(--acc-mid);
  /* Dark violet check on the pastel circle (the SVG uses currentColor). */
  color: var(--acc-on-fill);
}

/* The check mark is an inline SVG (drawn once in index.html's template via
   app.js), not a text glyph, so it matches the mockup's thin-line style and
   never renders as an emoji on any phone. */
.step-check svg {
  display: none;
  width: 14px;
  height: 14px;
}
.step-card.is-done .step-check svg {
  display: block;
}

.step-body {
  flex: 1 1 auto;
  min-width: 0;
}

.step-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.step-detail {
  margin-top: 4px;
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.45;
}

.step-help {
  margin-top: 8px;
}

/* 44px tap target from the anchor; the hairline underline hugs the words,
   not the whole box, per the mockup. */
.step-help summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--acc-deep);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}

.step-help summary span {
  border-bottom: 1px solid var(--acc);
  padding-bottom: 2px;
}

.step-help p {
  margin: 8px 0 0 0;
  font-size: 15px;
  color: var(--color-text);
}

.reset-day {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  color: var(--color-muted);
  background: none;
  border: none;
  text-decoration: underline;
  padding: 8px 0;
}

/* ---- Trip panel ---------------------------------------------------------*/

.flight-card .flight-date {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--acc-deep);
  margin-bottom: 4px;
  font-size: 15px;
}

.flight-card .flight-route {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-round);
  margin-bottom: 4px;
}

.flight-card .flight-meta {
  color: var(--color-muted);
  font-size: 15px;
  margin-bottom: 2px;
}

/* ---- Guides panel ---------------------------------------------------------*/

.guide-card summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-round);
  font-size: 19px;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.guide-card summary::-webkit-details-marker {
  display: none;
}

.guide-card p {
  margin: 12px 0 0 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-weight: 400;
}

/* Section heading inside an open guide/delay card (e.g. "O'Hare, Chicago").
   Dark violet like the app's other accent headings (flight-date, nick-card
   label), sized well above the 16px floor so it stays easy to read. */
.guide-heading {
  margin: 18px 0 8px 0;
  font-size: 18px;
  color: var(--acc-deep);
}

/* The short "first this, then this" lines under each heading. Generous
   line height and spacing between items since this is read on a phone,
   possibly by someone tired or stressed. */
.guide-lines {
  margin: 0;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
}

.guide-lines li {
  margin-bottom: 10px;
}

.guide-lines li:last-child {
  margin-bottom: 0;
}

/* ---- Help panel ---------------------------------------------------------*/

.help-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  border: none;
  background: var(--acc-fill);
  color: var(--acc-on-fill);
  font-family: var(--font-round);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  text-decoration: none;
}

.help-button.is-call {
  background: var(--color-card);
  border: 2px solid var(--acc-mid);
  color: var(--acc-deep);
  box-shadow: var(--shadow);
}

.help-note {
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  margin: -4px 0 16px 0;
}

/* Emergency number: visually separated from the WhatsApp/call buttons above
   (a hairline + its own label) so it reads as "different kind of button",
   not just a third contact to tap by habit. */
.emergency-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-tint);
  text-align: center;
}

.emergency-label {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 10px 0;
}

.help-button.is-emergency {
  background: var(--color-blush);
  color: var(--acc-deep);
}

/* ---- Tab bar ---------------------------------------------------------- */

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  background: var(--color-card);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 16px rgba(60, 60, 120, .06);
  min-height: 56px;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
}

.tab-button {
  flex: 1 1 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-round);
  font-weight: 600;
  font-size: 13px;
}

.tab-button svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* The small dot under the active tab's label, per the mockup. Empty
   element in the markup (like the group-heading dot) rather than generated
   content, since app.js toggles it per tab. */
.tab-button .tab-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.tab-button.is-active {
  color: var(--acc-deep);
}

.tab-button.is-active .tab-dot {
  background: var(--acc-mid);
}

/* ---- Footer -------------------------------------------------------------*/

.app-footer {
  position: relative;
  z-index: 1;
  padding: 16px;
  text-align: center;
  color: var(--color-muted);
  font-size: 13px;
}

.app-footer button {
  background: none;
  border: none;
  color: var(--acc-deep);
  text-decoration: underline;
  font-size: 13px;
  padding: 8px;
}