/* ==============================================
   OnWave Lab — Discovery Intake (/intake)

   Scoped with an .ix- prefix, same convention as .ul- in unified-layer.css.
   Colours, spacing and type all come from css/global.css tokens; the three
   locals below are surfaces the global palette has no equivalent for.

   IMPORTANT: nothing the wizard renders may use .reveal or .stagger.
   .reveal starts at opacity:0 and main.js collects those elements once at
   DOMContentLoaded, so anything rendered later would never become visible.
   Card entrance is handled by ix-rise below instead.
   ============================================== */

.ix-body {
  --ix-raised: #17222e;      /* input / raised surface, between bg and card */
  --ix-line-warm: #4a3d25;   /* gold-tinted hairline */
  --ix-dim: #6b7885;         /* captions, placeholders — dimmer than muted */

  background: var(--color-dark-bg);
  color: var(--color-dark-muted);
}

/* ---- ambient field ---------------------------------------------------- */
/* pointer-events:none is required — this wrapper covers the whole viewport
   and would otherwise intercept every click on the page. The trade-off is
   that constellation.js binds its pointer listeners to this element, so the
   particles drift but do not chase the cursor. */
.ix-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ix-field canvas { display: block; width: 100%; height: 100%; }

.ix-main,
.ix-progress,
.ix-dock,
.footer { position: relative; z-index: 1; }

/* ---- progress rail ---------------------------------------------------- */
.ix-progress {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-dark-border);
  z-index: 90;              /* under .nav (100), over page content */
}
.ix-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-warm-text), var(--color-accent));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- frame ------------------------------------------------------------ */
.ix-main {
  padding-top: calc(var(--nav-height) + var(--space-10));
  padding-bottom: var(--space-24);   /* clearance for the fixed dock */
}
.ix-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.ix-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 940px) {
  .ix-cols { grid-template-columns: 216px 1fr; }
}

/* ---- section rail ----------------------------------------------------- */
.ix-rail { display: none; }
@media (min-width: 940px) {
  .ix-rail { display: block; position: sticky; top: calc(var(--nav-height) + var(--space-6)); align-self: start; }
}
/* Liquid glass. Tuned against the iOS 26 reference Kyle supplied, then pulled
   well back from it (2026-07-31): "lower the gloss and allow more
   transparency" — the glossy version read as brushed metal, not glass.

   What each layer is doing, and why it is as weak as it is:

   1. NEARLY NO FILM. 0.6% white, with the sheen gradient reaching a true 0%
      through the middle of the pane. The film is the single thing that makes
      glass look like a surface instead of an opening, so it is the first
      thing to cut when something reads as metal.
   2. NO BRIGHTNESS LIFT. `brightness()` on the backdrop is what makes a pane
      look lit — which is exactly what makes it look like machined aluminium.
      Saturation stays low too, at 115%, just enough that the gold accents do
      not grey out under blur.
   3. A THIN LIT EDGE, not a bevel. One 1px border plus one 0.14 hairline. An
      inset bevel plus an inner glow was the strongest metal cue of all.
   4. A BIG RADIUS — Apple's widgets are far rounder than our 12px card corner.
   5. WHITE-ISH TEXT WITH ITS OWN SHADOW. The text carries its own contrast
      instead of depending on an opaque surface, which is what allows all of
      the above to stay this light. Do not revert the shadow and the blur
      independently.

   Tint is WHITE, never dark: a dark tint over a dark page just flattens into a
   slab no matter how low the alpha goes (three passes learned that).

   Being this transparent made the surface DARKER, since the page behind it is
   dark, so contrast improved rather than suffered — 7.08:1 for the labels and
   6.18:1 for the numerals on the worst row, measured off rendered pixels.
   That clears the sub-AA numerals an earlier, glossier pass had. Re-measure if
   the film or sheen is ever raised. All layers composite on the GPU. */
.ix-rail ol {
  list-style: none;
  position: relative;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background:
    linear-gradient(152deg,
      rgba(255, 255, 255, 0.028) 0%,
      rgba(255, 255, 255, 0.008) 36%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.014) 100%),
    rgba(255, 255, 255, 0.006);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),    /* a thin lit edge, not a bevel */
    0 12px 30px rgba(0, 0, 0, 0.26);            /* lift off the page */
}
/* The specular streak. A separate layer because it has to sit ABOVE the
   backdrop-filter output — folded into the background gradient it would be
   blurred along with everything else and disappear. */
.ix-rail ol::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(103deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.018) 47%,
    rgba(255, 255, 255, 0) 64%);
  pointer-events: none;
}
/* Safari < 18 and Firefox without layers.acceleration: no backdrop-filter, so
   the field would show through unsoftened under 0.7rem type. Fall back to a
   near-solid tint — less glass, but readable, which is the point. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ix-rail ol { background: rgba(23, 34, 46, 0.93); }
}
/* translucent, not the solid border token — a flat opaque line across glass
   reads as a seam in the pane */
.ix-rail li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ix-rail li:first-child { border-top: 0; }
.ix-rail button,
.ix-rail span.ix-rail__item {
  display: flex;
  gap: 11px;
  align-items: baseline;
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  /* The reference keeps white text legible over a photograph by giving the
     TEXT its own contrast rather than hiding the backdrop. Same trick here:
     a light label plus a shadow, which is what allows the low blur above.
     --color-dark-muted measured 3.15:1 against the sheen and is not usable. */
  color: #c4cfd9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.ix-rail button { cursor: pointer; }
.ix-rail button:hover { color: var(--color-dark-text); }
.ix-rail b {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  /* Still a step below the label. At 0.7rem this is the smallest type on the
     page and the least forgiving, so it carries the shadow too. */
  color: #b6c2cd;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.ix-rail .is-done b { color: var(--color-warm-text); }
/* Must out-rank the base rule above: `.ix-rail span.ix-rail__item` is (0,2,1)
   and a bare `.ix-rail .is-on` is (0,2,0), so the current step was silently
   rendering in the same muted colour as every other one. Only the gold
   numeral distinguished it. */
.ix-rail button.is-on,
.ix-rail span.ix-rail__item.is-on {
  /* Weight, not just colour. Raising every label toward white for the glass
     left the active step nearly indistinguishable on colour alone. */
  color: #fff;
  font-weight: 500;
}
.ix-rail .is-on b { color: var(--color-accent); }

/* ---- card ------------------------------------------------------------- */
.ix-card {
  position: relative;
  overflow: hidden;
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
}
.ix-card--anim { animation: ix-rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
/* dotted-grid texture across the top band — echoes the site's project cards */
.ix-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  background-image: radial-gradient(var(--color-dark-border) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
  pointer-events: none;
}
.ix-card > * { position: relative; }
.ix-ghost {
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 5.2rem;
  line-height: 1;
  color: transparent;
  /* Outline only, but bright enough to read as the step number rather than a
     smudge — the original #3a2f1b vanished on anything but a good monitor. */
  -webkit-text-stroke: 1.5px #6b5426;
  pointer-events: none;
  user-select: none;
}
@keyframes ix-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- type ------------------------------------------------------------- */
.ix-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-warm-text);
  margin: 0 0 var(--space-2);
}
.ix-q {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-dark-text);
  font-size: var(--text-2xl);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-2);
  max-width: 22ch;
}
/* main.js focuses this heading on every step change so keyboard and screen
   reader users land at the top of the new step instead of back at <body>.
   No visible ring: it is a heading, not an operable control, and Chrome
   treats programmatic focus as focus-visible often enough that the box would
   flash for mouse users too. Screen readers still announce it on focus.
   Scoped under .ix-body so it outranks the generic `.ix-body :focus-visible`
   rule further down — equal specificity would let that later rule win. */
.ix-body .ix-q:focus,
.ix-body .ix-q:focus-visible { outline: none; }
.ix-help { margin: 0 0 var(--space-6); font-size: var(--text-base); max-width: 60ch; }
.ix-sub {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-dark-text);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin: var(--space-7) 0 var(--space-3);
}
.ix-ask { color: var(--color-dark-text); font-weight: 500; margin: var(--space-4) 0 var(--space-2); }
.ix-note { font-size: var(--text-sm); color: var(--ix-dim); margin: var(--space-2) 0 0; }
.ix-tiny {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-warm-text);
  margin: var(--space-4) 0 var(--space-2);
}

/* ---- section blocks --------------------------------------------------- */
/* Step 6 stacks several independent question sets (guardrails, then one per
   service line). Without a hard visual break they read as one long list and
   it is genuinely unclear which heading owns which chips. */
.ix-block {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-dark-border);
}
.ix-block:first-of-type { margin-top: var(--space-8); }
/* Header carries its service line's own colour, so a block and its slice of
   the readout band chart are visibly the same thing. Colour is set inline. */
.ix-block__head { margin: 0 0 var(--space-6); }
.ix-block__head::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  margin-bottom: var(--space-4);
}
.ix-block__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: currentColor;
  margin: 0 0 var(--space-2);
}
.ix-block__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--color-dark-text);
  margin: 0;
}
.ix-block .ix-sub:first-of-type,
.ix-block .ix-ask:first-of-type { margin-top: 0; }
.ix-block .ix-ask { margin-top: var(--space-6); }

/* Explains what the block is getting at, so the section reads as a reason
   rather than an arbitrary appearance. */
.ix-why {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ix-dim);
  margin: var(--space-3) 0 var(--space-5);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-dark-border);
}
/* It follows the head, so the first question after it must not collapse its
   own top margin away. */
.ix-block .ix-why + .ix-ask,
.ix-block .ix-why + .ix-sub { margin-top: 0; }

/* ---- chips ------------------------------------------------------------ */
.ix-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ix-chip {
  background: var(--ix-raised);
  border: 1px solid var(--color-dark-border);
  border-radius: 999px;   /* not --radius-full: that is 50%, which is a circle */
  padding: 12px 17px;
  min-height: 48px;
  color: var(--color-dark-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.16s, color 0.16s, background 0.16s;
}
.ix-chip:hover { border-color: var(--color-warm-text); color: var(--color-dark-text); }
.ix-chip[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-dark-text);
  background: var(--color-accent-subtle);
  font-weight: 500;
}
.ix-chip[aria-pressed="true"]::before { content: '\2713'; color: var(--color-accent); }

.ix-group { margin-bottom: var(--space-5); }
.ix-group__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ix-dim);
  margin: 0 0 var(--space-2);
}

/* ---- text fields ------------------------------------------------------ */
.ix-fields { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .ix-fields--two { grid-template-columns: 1fr 1fr; } }
.ix-f { display: block; }
.ix-f span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-warm-text);
  margin-bottom: 7px;
}
.ix-t {
  width: 100%;
  padding: 13px 14px;
  background: var(--ix-raised);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  color: var(--color-dark-text);
  font-family: var(--font-body);
  font-size: 16px;              /* 16px stops iOS zooming the field on focus */
}
.ix-t::placeholder { color: var(--ix-dim); }
.ix-t:focus { border-color: var(--color-accent); outline: none; }
textarea.ix-t { min-height: 108px; resize: vertical; }

/* ---- per-task hour rows ----------------------------------------------- */
.ix-row {
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: 11px;
  background: var(--ix-raised);
}
.ix-row__name { color: var(--color-dark-text); font-weight: 500; margin-bottom: var(--space-3); }
.ix-step { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.ix-step button {
  width: 46px;
  height: 46px;
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-dark-text);
  cursor: pointer;
}
.ix-step button:hover { border-color: var(--color-accent); }
.ix-val {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--color-accent);
  min-width: 88px;
  text-align: center;
}
.ix-val small { display: block; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--ix-dim); }
.ix-mini { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.ix-mini button {
  background: transparent;
  border: 1px solid var(--color-dark-border);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ix-dim);
  cursor: pointer;
}
.ix-mini button[aria-pressed="true"] { border-color: var(--color-warm-text); color: var(--color-accent); }

/* ---- dock ------------------------------------------------------------- */
.ix-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;               /* under the mobile menu / booking modal */
  background: rgba(15, 25, 35, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ix-line-warm);
}
/* Hidden on the readout step: there is no Next there, and a fixed bar would
   permanently cover the submit button and the site footer beneath it. */
.ix-dock.is-hidden { display: none; }
.ix-dock__in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 13px var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.ix-meter {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ix-dim);
  line-height: 1.4;
  margin: 0;
}
.ix-meter b { display: block; font-size: 1.4rem; letter-spacing: 0; color: var(--color-accent); font-weight: 500; }
.ix-dock__nav { display: flex; gap: 9px; flex-shrink: 0; }

/* ---- buttons ---------------------------------------------------------- */
.ix-btn {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-dark-card);
  border-radius: var(--radius-md);
  padding: 13px 22px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  min-height: 48px;
  cursor: pointer;
}
.ix-btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.ix-btn--quiet {
  background: transparent;
  color: var(--color-dark-muted);
  border-color: var(--color-dark-border);
}
.ix-btn--quiet:hover { background: transparent; border-color: var(--ix-dim); color: var(--color-dark-text); }
.ix-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.ix-btn--wide { display: block; width: 100%; margin-top: var(--space-3); text-align: center; }
/* The readout CTA is an <a>, not a <button>: it leaves the page for TidyCal. */
a.ix-btn { display: inline-block; text-decoration: none; }
a.ix-btn--wide { display: block; }

/* ---- readout ---------------------------------------------------------- */
.ix-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-6) 0; }
@media (min-width: 660px) { .ix-stats { grid-template-columns: repeat(4, 1fr); } }
.ix-stat {
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--ix-raised);
}
.ix-stat s {
  text-decoration: none;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ix-dim);
  margin-bottom: 5px;
}
.ix-stat b { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 500; color: var(--color-dark-text); }
.ix-stat--flag { border-color: var(--ix-line-warm); }
.ix-stat--flag b { color: var(--color-accent); }

.ix-band {
  display: flex;
  height: 46px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-dark-border);
}
.ix-band div { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ix-band span { font-family: var(--font-mono); font-size: 0.7rem; padding: 0 4px; white-space: nowrap; }
.ix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-dark-muted);
}
.ix-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 7px; }

.ix-lead {
  border: 1px solid var(--color-dark-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: 11px;
  background: var(--ix-raised);
}
.ix-lead__top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.ix-lead__nm { color: var(--color-dark-text); font-weight: 500; }
.ix-lead__hrs { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ix-dim); white-space: nowrap; }
.ix-lead__line {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-warm-text);
  margin-top: 5px;
}

/* ---- send block ------------------------------------------------------- */
.ix-send { margin-top: var(--space-4); }
.ix-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-top: var(--space-3);
  padding: 11px 13px;
  border-radius: var(--radius-md);
  display: none;
}
.ix-status.is-ok {
  display: block;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border: 1px solid var(--ix-line-warm);
}
.ix-status.is-bad {
  display: block;
  background: var(--color-danger-subtle);
  color: var(--color-dark-text);
  border: 1px solid var(--color-dark-border);
}
.ix-status a { color: var(--color-accent); }

.ix-done {
  border: 1px solid var(--ix-line-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-accent-subtle);
  text-align: center;
}
.ix-done h3 {
  font-family: var(--font-heading);
  color: var(--color-dark-text);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
}

.ix-foot {
  text-align: center;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-dark-border);
  font-size: var(--text-sm);
}
.ix-foot a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.ix-foot a:hover { color: var(--color-accent-hover); }

/* ---- restore banner --------------------------------------------------- */
.ix-restore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid var(--ix-line-warm);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  font-size: var(--text-sm);
  color: var(--color-dark-text);
}
.ix-restore button {
  background: transparent;
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  color: var(--color-dark-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
}
.ix-restore button:hover { border-color: var(--color-accent); color: var(--color-dark-text); }

/* ---- utilities -------------------------------------------------------- */
/* The site has no .sr-only utility (only .skip-link), so this is local. */
.ix-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ix-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ix-body :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .ix-card--anim { animation: none; }
  .ix-progress i { transition: none; }
}

/* ---- tablet ----------------------------------------------------------- */
/* Between 640 and 939 there is no rail (it needs 940), so the card gets the
   full width. Give it a little more breathing room than the phone layout. */
@media (min-width: 640px) and (max-width: 939px) {
  .ix-main { padding-top: calc(var(--nav-height) + var(--space-8)); }
  .ix-card { padding: var(--space-8) var(--space-7); }
}

/* ---- touch devices ---------------------------------------------------- */
/* Anything a finger has to hit gets at least 44px. The quick-pick pills and
   the hour steppers were the two that fell short of that on a phone. */
@media (hover: none) and (pointer: coarse) {
  .ix-step button { width: 52px; height: 52px; }
  .ix-mini button { min-height: 44px; padding: 10px 16px; }
  .ix-rail button { padding: var(--space-4) 0; }
}

/* ---- narrow screens --------------------------------------------------- */
@media (max-width: 620px) {
  .ix-wrap { padding: 0 var(--space-4); }
  .ix-card { padding: var(--space-6) var(--space-4); }
  .ix-ghost { font-size: 3.4rem; top: 2px; right: 10px; }
  .ix-q { font-size: var(--text-xl); max-width: none; }
  .ix-sub { margin-top: var(--space-6); }

  /* Name and hours stacked: side-by-side forced the task title into three
     lines against the hours column. */
  .ix-lead__top { display: block; }
  .ix-lead__hrs { display: block; margin-top: 4px; }

  .ix-band { height: 38px; }
  .ix-legend { gap: 6px 12px; font-size: var(--text-xs); }
  .ix-stat b { font-size: 1.15rem; }
}

@media (max-width: 420px) {
  .ix-dock__in { padding: 10px var(--space-4); gap: var(--space-2); }
  .ix-meter { font-size: 0.6rem; letter-spacing: 0.12em; }
  .ix-meter b { font-size: 1.1rem; }
  .ix-btn { padding: 12px 14px; }
  .ix-chip { padding: 11px 14px; font-size: var(--text-sm); }
  .ix-group__label { font-size: 0.6rem; }
}

/* Landscape phones: the fixed nav and dock together eat most of a 380px-tall
   viewport, so claw some of it back rather than leaving a letterbox. */
@media (max-height: 460px) and (orientation: landscape) {
  .ix-main { padding-top: calc(var(--nav-height) + var(--space-4)); }
  .ix-dock__in { padding: 8px var(--space-4); }
  .ix-meter b { font-size: 1rem; }
  .ix-card { padding: var(--space-5) var(--space-4); }
}