/* shared/portal-arrangement.css
 *
 * The arrangement: the four steps Carmen writes it up in, and the one screen
 * Anna reads and agrees on. Design system tokens only, nothing below --fs-min.
 *
 * The one piece of styling that is load bearing rather than decorative is
 * .ar-block. Ruling 4 says the last day gets a CLEARLY SEPARATED block on the
 * confirm screen, and separated is the whole point: it must not read as another
 * paragraph, and it must not become a wall that stops an older, low confidence
 * family finishing, because then care does not start at all.
 */

.ar { padding: var(--sp-5) var(--sp-4) var(--sp-7); max-width: var(--portal-measure); margin: 0 auto; }
.ar-progress { font-size: var(--fs-min); font-weight: 700; color: var(--t-min); margin-bottom: var(--sp-3); }
/* Qualified so it actually applies. As a bare class this was (0,1,0) and lost
   to `.hds h1-h4` at (0,1,1), so the size written here never took effect.
   Found 24 Aug 2026 by the first guard to compare a module's headings with
   the system's. */
.ar .ar-h { font-size: var(--fs-h2); line-height: var(--lh-head); margin-bottom: var(--sp-3); }
.ar-lede { color: var(--t-min); margin-bottom: var(--sp-5); }
.ar-p { margin-bottom: var(--sp-4); }
.ar-step > * + * { margin-top: var(--sp-4); }
.ar-nav { margin-top: var(--sp-6); }

/* ── The three shape cards. Nothing is selected until she picks. ─────────── */

.ar-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.ar-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 2px solid var(--bd-strong); border-radius: var(--r-lg);
  padding: var(--sp-4); font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
  min-height: var(--tap-primary);
}
/* Chosen is carried by the border, the ground AND the consequence line
   appearing, never by hue alone. */
.ar-card.is-chosen { border-color: var(--brand); background: var(--brand-tint); }
.ar-card__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); }
.ar-card__sub { font-size: var(--fs-min); color: var(--t3); }
.ar-card__line {
  font-size: var(--fs-min); color: var(--t1);
  border-top: 1px solid var(--brand); padding-top: var(--sp-3); margin-top: var(--sp-1);
}

.ar-days { display: flex; flex-wrap: wrap; gap: var(--tap-gap); margin-bottom: var(--sp-4); }

.ar-more { margin-top: var(--sp-4); }
.ar-more > summary {
  cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center;
  font-size: var(--fs-body); font-weight: 700; color: var(--brand);
}
.ar-more > *:not(summary) { margin-top: var(--sp-3); }

/* ── The terms, shown the same way to both of them ───────────────────────── */

.ar-terms { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); }
.ar-terms dt { font-size: var(--fs-min); font-weight: 700; color: var(--t2); }
.ar-terms dd { font-size: var(--fs-body); }

/* ── Ruling 4's block. Separated, and inline. ────────────────────────────── */

.ar-block {
  background: var(--hero); border: 2px solid var(--hero-edge);
  border-radius: var(--r-lg); padding: var(--sp-5);
  margin-top: var(--sp-5);
}
/* --t3 on --hero is 3.43:1, so everything in here inherits --t1. */
.ar-block, .ar-block * { color: var(--t1); }
/* Qualified so it actually applies. As a bare class this was (0,1,0) and lost
   to `.hds h1-h4` at (0,1,1), so the size written here never took effect.
   Found 24 Aug 2026 by the first guard to compare a module's headings with
   the system's. */
.ar .ar-block__h { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); margin-bottom: var(--sp-3); }
.ar-block__body { line-height: var(--lh-body); }

.ar-foot { margin-top: var(--sp-4); }

/* ── THE PICKERS. Step 6, 25 Aug 2026. ──────────────────────────────────────
   "Pick the days" and "Set the pattern" were buttons that opened nothing, so
   there was no markup here to style. This is that gap.

   EVERY CONTROL IS BOUNDED BY --bd-strong, NEVER --bd. --bd is about 1.4:1 on
   card, which is legal as a divider and illegal around something somebody has
   to find and tap. Carmen fills this in standing in somebody's hallway. */

.ar-dows { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-4) 0; }
/* QUALIFIED, AND THE BARE CLASS DID NOT WORK. As `.ar-dow` this was (0,1,0)
   and lost to `.hds button:not(.ds-btn)` at (0,2,1), so the 56px written here
   never applied and the chip rendered at the system's 48px floor. MEASURED in
   a browser, not read: computed min-height came back 48px while this file said
   56px. Thirteenth rule of this shape on the project, and the first one on a
   TAP TARGET rather than a heading, so the 24 Aug guard could not see it.
   Three classes deep beats (0,2,1) outright rather than relying on which
   stylesheet happens to load last. */
.ar .ar-dows .ar-dow {
  /* 56px, the primary target, reasoned in the palette note for a hand with
     tremor holding a phone one handed. A day of the week is the single most
     tapped control on this screen. */
  min-width: 56px; min-height: 56px;
  border: 1px solid var(--bd-strong); border-radius: var(--r-md);
  background: var(--card); color: var(--t1);
  font-size: var(--fs-body); font-weight: 700; cursor: pointer;
}
/* NOT COLOUR ALONE. The chosen day changes its border WEIGHT and its weight of
   ink as well as its fill, so it is still legible to somebody who cannot tell
   the two backgrounds apart. Nothing on this screen encodes meaning in hue. */
.ar .ar-dows .ar-dow.is-on {
  background: var(--brand); color: var(--on-brand);
  border: 2px solid var(--brand); box-shadow: inset 0 0 0 1px var(--on-brand);
}

.ar-units { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-4) 0; }

/* A GRID, NOT A WRAPPING FLEX ROW, AND THIS WAS FOUND BY LOOKING AT IT.
   As a flex row on a 375px phone it wrapped to "Tue From [09:00]" and then
   "Hours [3]" on a second line, so the length ORPHANED: the day name sat on
   the first line only, and the second read as a floating "Hours 3" belonging
   to nothing. One day of care is one fact, "Tuesday, from nine, for three
   hours", and it has to look like one fact. */
.ar-unit {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding: var(--sp-4); border: 1px solid var(--bd-strong); border-radius: var(--r-md);
}
/* The day owns the block it names, so it spans both columns. */
.ar-unit__d { grid-column: 1 / -1; font-size: var(--fs-body); font-weight: 700; }
/* An empty one is the fixed path, where the date input above already says
   which day it is. Left in the markup it would draw a blank row. */
.ar-unit__d:empty { display: none; }
.ar-unit__l { font-size: var(--fs-min); color: var(--t2); }
.ar-unit__i { min-height: 48px; width: 100%; }
.ar-unit__date { min-height: 48px; width: 100%; }

.ar-unit-row {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--bd-strong); border-radius: var(--r-md);
}
/* Nested inside the dated row, so it does not draw a second box around itself. */
.ar-unit-row .ar-unit { border: 0; padding: 0; }
/* QUALIFIED 25 Aug 2026. As a bare class this was (0,1,0) and lost to
   `.hds button:not(.ds-btn)` at (0,2,1), so the size written here never
   applied and the control rendered at the 48px floor instead. Found by a new
   guard in test/design-system.test.js after the same trap was hit a
   thirteenth time, this time on a tap target rather than a heading.
   `.hds` plus a class plus :not() is (0,3,0), which beats it outright rather
   than relying on which stylesheet happens to load last. */
.hds .ar-unit__x:not(.ds-btn) { min-height: 48px; justify-self: start; }

/* ── THE RATE EDITOR, COMMIT 6 ────────────────────────────────────────────
   Carmen sets what she charges THIS family here, using the same price boxes as
   her own rate card. The boxes themselves are styled by portal-rates.css, whose
   .rc-cell rules were unscoped in commit 4 precisely so they would apply on this
   screen too: that is where the 48px tap targets come from, and they are not
   repeated here. What IS here is the furniture around them. */

/* The ticked dates, matching the rate card screen so the same list reads the
   same way in both places. */
.ar-dates { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-3) 0; }
.ar-date {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bd-strong); border-radius: var(--r-md);
  font-size: var(--fs-body);
}
/* (0,2,1) to beat `.hds button:not(.ds-btn)`, the same reason the rate card's
   own remove button carries it. Written any lower it is a dead line. */
.hds .ar-date__x:not(.ds-btn) { min-height: 48px; }

/* WHAT IS STILL MISSING, and it is not an error. It is the screen telling her
   the arrangement declares nights and the card has no night rate on it yet, so
   it reads as guidance rather than as a telling-off. */
.ar-gaps {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--hero); border: 1px solid var(--hero-edge); border-radius: var(--r-md);
}
.ar-gaps > * + * { margin-top: var(--sp-3); }

/* A REFUSAL SHE CAN SEE. This screen had no error surface at all before commit
   6: the send could fail and the button simply did nothing. */
/* MATCHED TO THE RATE CARD SCREEN'S OWN .rc-err rather than invented. It uses
   var(--danger, var(--t1)); there is no --danger-edge token in the design system
   and naming one here would read like a promise the stylesheet cannot keep. */
.ar-err {
  margin-top: var(--sp-4);
  color: var(--danger, var(--t1)); font-weight: 700;
  font-size: var(--fs-body); line-height: var(--lh-body);
}