/* ARBA · The Ember Hour — ritual quality-of-life styles.
   ---------------------------------------------------------------------------
   A separate stylesheet, not an addition to css/styles.css, purely because
   three agents were editing this repo at once and styles.css belonged to
   another one. Load it AFTER css/styles.css in index.html and add it to the
   sw.js precache list — both of those wires are deliberately left to whoever
   merges this, so the shared files have exactly one author.

   Covers four things, all of them mom-friendly-UX-SOP-bound
   (~/super-brain/sops/arba/arba-mom-friendly-ux-sop.md):
     1. the archetype picker's two plain "what this actually means" lines
     2. the recovery-code last-four check
     3. "Your usual" on the activity grid
     4. the quick-log recap on the finished screen

   Type rules held here: every font-size is rem (html is font-size:100%, so
   1rem = 16px and the member's own phone text-size setting still applies);
   nothing below 1.1581rem (~18.5px), which is already the app's own smallest
   step and comfortably over the SOP's 15px floor. Every tappable thing is
   >= 44px tall. */

/* ---------- 1. Archetype picker: say what the choice actually does -------- */

/* The honest note above the three cards. Amber-on-panel rather than muted
   grey: this is the sentence that removes the "am I picking wrong?" hesitation
   at 5am, so it is not allowed to read as fine print. */
.arch-means-note {
  font-size: 1.1581rem;
  line-height: 1.5;
  color: #e6d8f7;
  background: rgba(255, 206, 110, 0.09);
  border: 1px solid rgba(255, 206, 110, 0.26);
  border-radius: var(--radius-sm, 14px);
  padding: 14px 16px;
  margin: 0 0 16px;
}

/* Two lines, stacked, with real space between them. `.arch-blurb` (the older
   single paragraph) is left untouched and simply unused by the picker now —
   it is still referenced from other surfaces. */
.arch-card .arch-means {
  display: block;
  grid-column: 2;
  margin-top: 8px;
}
.arch-card.visual .arch-means { grid-column: auto; }
.arch-card .arch-means-line {
  display: block;
  font-size: 1.1581rem;
  line-height: 1.45;
  color: var(--muted, #b9a7cf);
}
/* Line 2 is the one concrete, mechanical consequence of the choice (the rank
   titles she grows into), so it gets the ember colour and a little weight —
   she should be able to find it without reading line 1 first. */
.arch-card .arch-means-line + .arch-means-line {
  margin-top: 10px;
  color: var(--amber, #ffce6e);
  font-weight: 600;
}
/* The chain (Phoenix -> Valkyrie -> Amazon) is the one concrete thing on the
   card, so it is the thing that gets the weight — the framing that used to be
   glued to the front of it, repeated verbatim on all three cards, is now a
   single quiet caption above. Render pass: the repeated prefix was pushing the
   chain to the end of a wrapped line on a 390px viewport. */
.arch-card .arch-means-line small {
  display: block;
  font-family: var(--label, sans-serif);
  font-size: 1.1581rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #b9a7cf);
  margin-bottom: 2px;
}

/* ---------- 2. Recovery code: the five-second last-four check ------------- */

/* Hiding is her own idea of a self-test, never a requirement — so the code
   fades and blurs rather than being removed from the DOM, and one tap on the
   same button brings it straight back. */
.recovery-code.is-hidden {
  filter: blur(10px);
  opacity: 0.4;
  user-select: none;
}
.recovery-sheet .rc-peek {
  min-height: 44px;
  font-size: 1.1581rem;
  margin-top: 4px;
}
.recovery-sheet .rc-check { margin-top: 14px; }
/* .field > span in css/styles.css is an uppercase, wide-tracked label style.
   A four-word label survives that; a sentence does not (the render pass had
   "TYPE THE LAST FOUR — JUST SO WE KNOW IT LANDED SOMEWHERE" shouting across
   two lines). The sentence now lives on .rc-msg, which is sentence case. */
.recovery-sheet .rc-check > span { letter-spacing: .06em; }
/* Wide-tracked and centred: four characters in a full-width box read as a
   code, not as a name field, without needing a second label to say so. */
.recovery-sheet .rc-check input {
  min-height: 56px;
  font-family: var(--display, serif);
  font-size: 1.6985rem;
  letter-spacing: .22em;
  text-align: center;
  text-transform: uppercase;
}
.recovery-sheet .rc-msg {
  font-size: 1.1581rem;
  line-height: 1.4;
  margin: 8px 0 0;
  min-height: 1.4em; /* reserve the line so the sheet doesn't jump when it fills */
  color: var(--muted, #b9a7cf);
}
.recovery-sheet .rc-msg.ok { color: #7fe0a8; font-weight: 600; }
/* The "not quite" state is amber, never red. She has done nothing wrong and
   is not being marked incorrect — red is the colour of a failed action, and
   this is a nudge she is free to walk past. */
.recovery-sheet .rc-msg.nudge { color: var(--amber, #ffce6e); }

/* ---------- 3. "Your usual" on the activity grid -------------------------- */

/* The chip sits inside the card's own padding rather than overlapping the
   edge, so it can never clip the emoji or push the card under 44px. */
.act-card.is-usual {
  position: relative;
  border-color: rgba(255, 206, 110, 0.5);
}
.act-card .act-usual-chip {
  display: block;
  font-family: var(--label, sans-serif);
  font-size: 1.1581rem;
  line-height: 1.1;
  font-weight: 600;
  color: var(--amber, #ffce6e);
  margin-bottom: 4px;
}
.act-usual-note {
  /* Matches the app's real callout pattern (.xp-explain-card): a full soft
     border on a panel background, not a side accent stripe — a colored
     left-border card is one of the most recognizable AI-generated-UI tells. */
  font-size: 1.1581rem;
  line-height: 1.5;
  color: #e6d8f7;
  background: rgba(255, 126, 46, 0.10);
  border: 1px solid var(--line, rgba(255,206,110,0.14));
  border-radius: var(--radius-sm, 14px);
  padding: 12px 14px;
  margin: 4px 0 0;
}
.act-usual-note b { color: var(--amber, #ffce6e); }

/* ---------- 4. Quick-log recap on the finished screen --------------------- */

/* A quick log shows her no screens on the way through, so this line is the
   only place the fast path states what it recorded. Centred and inside the
   finished screen's own rhythm — it is a receipt, not an alert. */
.quick-recap {
  font-size: 1.1581rem;
  line-height: 1.5;
  text-align: center;
  color: #e6d8f7;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm, 14px);
  padding: 14px 16px;
  margin: 16px 0 0;
}
.quick-recap b { color: var(--amber, #ffce6e); }