/* src/components/jr/setup/setup.css — SJ2 Setup.

   Transcribed from art-source/design-sj2-2026-09-12/screens/SJ2 Setup.dc.html. Her frame carries
   its geometry inline; every declaration below is moved out of one of her style attributes with
   the value unchanged, which is the plan's own rule for a screen module (§Screen module
   contract). The one thing that is not hers is the entrance: her sj2-rise fades opacity and this
   one keeps only the movement (plan ruling 3).

   Setup is the one screen in Schola Jr with a text field on it, and the two before it are the
   reason that is allowed: it lives behind the four digits, and its whole job is to collect the
   four facts nobody but a grown-up can answer. The child's side still has no field anywhere.

   Her Setup page is #f4efe4 rather than the stage cream, and its greens are a shade deeper than
   the SJ2 tokens (#12645e, #0b3f3b, #cdeeeb): it is the one screen she drew before the token set
   settled. Transcribed as drawn.
*/

.jr-setup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #f4efe4;
  color: #16352b;
  font-family: var(--sj-font);
}

.jr-setup * { box-sizing: border-box; }
.jr-setup button,
.jr-setup input { font-family: var(--sj-font); }
.jr-setup input::placeholder { color: #8a7a58; opacity: 1; }

/* ---------------------------------------------------------------- the bar */
.jr-setup-bar {
  flex: none;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 30px;
  background: #fffdf6;
  border-bottom: 1px solid #e2d8c0;
}

.jr-setup-mark { flex: none; width: 30px; height: 30px; border-radius: 10px; background: #42a9c8; display: block; }
.jr-setup-word { font-weight: 700; font-size: 22px; color: #16352b; letter-spacing: -.01em; }
.jr-setup-word span { color: #42a9c8; }
.jr-setup-chip {
  font-weight: 600; font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: #0f5a55; background: #cdeeeb; border-radius: 999px; padding: 7px 15px; white-space: nowrap;
}
.jr-setup-gap { flex: 1 1 auto; }
.jr-setup-step { font-weight: 500; font-size: 16px; color: #16352b; white-space: nowrap; }
.jr-setup-out {
  display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px;
  border-radius: 14px; background: #fffdf6; border: 1.5px solid #e2d8c0;
  font-weight: 600; font-size: 17px; color: #16352b; text-decoration: none; white-space: nowrap;
}

/* ---------------------------------------------------------------- the rail */
.jr-setup-body { flex: 1 1 auto; min-height: 0; display: flex; }

.jr-setup-rail {
  flex: 0 0 300px;
  background: #fffdf6;
  border-right: 2px solid #e7dcc6;
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
}
.jr-setup-rail-title {
  flex: none; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #16352b; padding: 0 6px; margin-bottom: 3px;
}
.jr-setup-rail-item {
  flex: none; display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 14px; border-radius: 16px; background: #fffdf6; border: 2px solid #e7dcc6;
}
.jr-setup-rail-item.on { background: #cdeeeb; border-color: #12645e; }
.jr-setup-rail-item.done { background: #d7f2e0; border-color: #8fd4aa; }
.jr-setup-rail-num {
  flex: none; width: 32px; height: 32px; border-radius: 11px; background: #f6f2e7;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: #16352b;
}
.jr-setup-rail-item.on .jr-setup-rail-num { background: #0f5a55; color: #fffdf6; }
.jr-setup-rail-item.done .jr-setup-rail-num { background: #1a7a48; color: #fffdf6; }
.jr-setup-rail-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-setup-rail-label { font-weight: 600; font-size: 17px; line-height: 1.15; color: #16352b; }
.jr-setup-rail-item.done .jr-setup-rail-label { color: #0d6136; }
.jr-setup-rail-item.on .jr-setup-rail-label { color: #16352b; }
.jr-setup-rail-note { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #16352b; text-wrap: pretty; }
.jr-setup-rail-fill { flex: 1 1 auto; min-height: 8px; }
.jr-setup-vow {
  flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 15px; border-radius: 16px; background: #cdeeeb; border: 2px solid #7fcdc5;
}
.jr-setup-vow strong { font-weight: 600; font-size: 15px; color: #0b3f3b; }
.jr-setup-vow span { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #0b3f3b; text-wrap: pretty; }

/* ---------------------------------------------------------------- the step */
.jr-setup-main {
  flex: 1 1 auto; min-width: 0; padding: 28px 38px 24px;
  display: flex; flex-direction: column; overflow-y: auto;
}
.jr-setup-step-body {
  display: flex; flex-direction: column; min-height: 100%;
  animation: sj-setup-rise 300ms cubic-bezier(.2, .75, .25, 1) both;
}
/* Transform-only. Her keyframe fades from opacity 0 as well; the movement is hers. */
@keyframes sj-setup-rise {
  from { transform: translateY(9px); }
  to { transform: none; }
}

.jr-setup h1 {
  margin: 0 0 8px; font-weight: 600; font-size: 44px; line-height: 1.08;
  color: #16352b; letter-spacing: -.015em; text-wrap: pretty;
}
.jr-setup h1.small { font-size: 42px; }
.jr-setup-lede {
  margin: 0 0 26px; font-family: var(--sj-font-story); font-size: 21px; line-height: 1.45;
  color: #16352b; max-width: 60ch; text-wrap: pretty;
}
.jr-setup-lede.tight { margin-bottom: 20px; font-size: 20px; max-width: 68ch; }
.jr-setup-label {
  font-weight: 600; font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: #16352b; margin-bottom: 9px;
}
.jr-setup-label.spaced { margin-top: 26px; }

.jr-setup-name {
  width: 520px; height: 74px; padding: 0 22px; border-radius: 18px; background: #fffdf6;
  border: 2px solid #e2d8c0; font-weight: 600; font-size: 27px; color: #16352b; outline: none;
}
.jr-setup-name:focus { border-color: #7fcdc5; }

.jr-setup-row { display: flex; gap: 11px; flex-wrap: wrap; }
.jr-setup-pick {
  appearance: none; cursor: pointer; min-height: 62px; padding: 0 28px; border-radius: 16px;
  background: #fffdf6; border: 2px solid #e7dcc6; font-weight: 600; font-size: 20px; color: #16352b;
}
.jr-setup-pick.on { background: #cdeeeb; border-color: #12645e; color: #0b3f3b; }

.jr-setup-note {
  display: flex; flex-direction: column; gap: 4px; margin-top: 16px;
  padding: 15px 18px; border-radius: 16px; background: #d7f2e0; border: 2px solid #8fd4aa; max-width: 74ch;
}
.jr-setup-note.warn { background: #fff8e6; border-color: #f0dcac; }
.jr-setup-note strong { font-weight: 600; font-size: 16.5px; color: #0d6136; }
.jr-setup-note.warn strong { color: #8a5209; }
.jr-setup-note span { font-size: 16.5px; font-weight: 500; line-height: 1.4; color: #16352b; text-wrap: pretty; }

.jr-setup-fill { flex: 1 1 auto; min-height: 14px; }

.jr-setup-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.jr-setup-next {
  appearance: none; border: none; cursor: pointer; min-height: 66px; padding: 0 34px;
  border-radius: 18px; background: #f36b35; color: #fffdf6; font-weight: 700; font-size: 21px;
  box-shadow: 0 4px 0 #93390a; text-decoration: none; display: inline-flex; align-items: center; gap: 11px;
}
.jr-setup-next:active { transform: translateY(4px); box-shadow: none; }
.jr-setup-back {
  appearance: none; cursor: pointer; min-height: 66px; padding: 0 26px; border-radius: 18px;
  background: #fffdf6; border: 2px solid #e2d8c0; font-weight: 600; font-size: 19px; color: #16352b;
  text-decoration: none; display: inline-flex; align-items: center;
}
.jr-setup-err { font-size: 17px; font-weight: 600; color: #b03d0b; text-wrap: pretty; }

/* ---------------------------------------------------------------- remove a child */
.jr-setup-remove {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 15px 18px; border-radius: 16px; background: #fffdf6; border: 2px solid #e2d8c0;
}
.jr-setup-remove.armed { border-color: #f36b35; }
.jr-setup-remove-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-setup-remove-text strong { font-weight: 600; font-size: 16.5px; color: #16352b; }
.jr-setup-remove-text span { font-size: 15.5px; font-weight: 500; line-height: 1.4; color: #16352b; text-wrap: pretty; }
.jr-setup-remove-btn {
  flex: none; appearance: none; cursor: pointer; min-height: 52px; padding: 0 20px;
  border-radius: 14px; background: #f6f2e7; border: 2px solid #e2d8c0;
  font-weight: 600; font-size: 16.5px; color: #16352b;
}
.jr-setup-remove.armed .jr-setup-remove-btn { background: #ffe7d6; border-color: #f36b35; color: #9c4009; }

/* ---------------------------------------------------------------- their class */
.jr-setup-teacher-row { display: flex; gap: 22px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.jr-setup-field { display: flex; flex-direction: column; gap: 9px; }
.jr-setup-teacher {
  width: 340px; height: 62px; padding: 0 20px; border-radius: 16px; background: #fffdf6;
  border: 2px solid #e2d8c0; font-weight: 600; font-size: 22px; color: #16352b; outline: none;
}
.jr-setup-teacher:focus { border-color: #7fcdc5; }
.jr-setup-aside {
  flex: 1 1 auto; min-width: 0; font-size: 16.5px; font-weight: 500; line-height: 1.4;
  color: #16352b; padding-bottom: 6px; text-wrap: pretty;
}

/* Her frame gives this row `flex:1 1 auto; min-height:0` inside a stage that clips. Reading
   has ELEVEN units, so at 1440x940 the row is 452px of content in a 299px box and her own
   preview would have cut the last two off. The grown-up side scrolls (see the note at the top
   of grownups.css for why that is allowed here and nowhere else), so the row takes the height
   it needs and the column behind it scrolls instead of the units disappearing. */
.jr-setup-class { flex: 0 0 auto; min-height: 0; display: flex; gap: 16px; }
.jr-setup-tabs { flex: 0 0 216px; display: flex; flex-direction: column; gap: 6px; }
.jr-setup-tab {
  appearance: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 13px; border-radius: 14px; background: #fffdf6; border: 2px solid #e7dcc6;
}
.jr-setup-tab-dot { flex: none; width: 11px; height: 11px; border-radius: 4px; display: block; }
.jr-setup-tab-name { flex: 1 1 auto; font-weight: 600; font-size: 17px; color: #16352b; }
.jr-setup-tab-state { flex: none; font-weight: 600; font-size: 13.5px; color: #8a5209; }
.jr-setup-tab-state.set { color: #0d6136; }
.jr-setup-tabs-note { margin-top: 6px; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #16352b; text-wrap: pretty; }

.jr-setup-units { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.jr-setup-units-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jr-setup-units-head strong { font-weight: 600; font-size: 19px; color: #16352b; }
.jr-setup-units-head span { font-size: 16px; font-weight: 500; color: #16352b; }
.jr-setup-units-head .guess { font-size: 15.5px; font-weight: 600; color: #8a5209; }
.jr-setup-unit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jr-setup-unit {
  appearance: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 11px;
  min-height: 54px; padding: 0 14px; border-radius: 14px; background: #fffdf6; border: 2px solid #e7dcc6;
}
.jr-setup-unit.guess { background: #fff8e6; border-color: #f0dcac; }
.jr-setup-unit-n {
  flex: none; width: 26px; height: 26px; border-radius: 9px; background: #f6f2e7;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: #16352b;
}
.jr-setup-unit.guess .jr-setup-unit-n { background: #e8a13d; color: #fffdf6; }
.jr-setup-unit-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 16.5px; line-height: 1.2; color: #16352b; text-wrap: pretty; }
.jr-setup-clear {
  align-self: flex-start; appearance: none; cursor: pointer; min-height: 46px; padding: 0 18px;
  border-radius: 14px; background: #f6f2e7; border: 2px dashed #d8ccb0;
  font-weight: 500; font-size: 16px; color: #16352b;
}
.jr-setup-units-empty {
  padding: 18px; border-radius: 14px; border: 2px dashed #d8ccb0; background: #fffdf6;
  font-size: 16px; font-weight: 500; line-height: 1.45; color: #16352b; text-wrap: pretty;
}

/* ---------------------------------------------------------------- how it is going */
.jr-setup-bands { display: flex; gap: 10px; }
.jr-setup-band {
  flex: 1 1 0; min-width: 0; appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 14px 16px;
  border-radius: 16px; background: #fffdf6; border: 2px solid #e7dcc6;
}
.jr-setup-band.on { background: #cdeeeb; border-color: #12645e; }
.jr-setup-band strong { font-weight: 600; font-size: 18px; color: #16352b; }
.jr-setup-band.on strong { color: #0b3f3b; }
.jr-setup-band span { font-size: 15.5px; font-weight: 500; line-height: 1.35; color: #16352b; text-wrap: pretty; }

.jr-setup-two { display: flex; gap: 26px; align-items: flex-start; margin-top: 20px; flex-wrap: wrap; }
.jr-setup-min {
  appearance: none; cursor: pointer; min-height: 56px; padding: 0 20px; border-radius: 15px;
  background: #fffdf6; border: 2px solid #e7dcc6; font-weight: 600; font-size: 18.5px; color: #16352b;
}
.jr-setup-min.on { background: #cdeeeb; border-color: #12645e; color: #0b3f3b; }
.jr-setup-aloud {
  appearance: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 0 16px; border-radius: 15px; background: #fffdf6; border: 2px solid #e7dcc6;
}
.jr-setup-aloud.on { background: #cdeeeb; border-color: #12645e; }
.jr-setup-track {
  flex: none; width: 52px; height: 30px; border-radius: 999px; background: #d8ccb0;
  position: relative; display: block;
}
.jr-setup-aloud.on .jr-setup-track { background: #0f5a55; }
.jr-setup-knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fffdf6; display: block; transition: left 160ms cubic-bezier(.2, .75, .25, 1);
}
.jr-setup-aloud.on .jr-setup-knob { left: 25px; }
.jr-setup-aloud-label { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 17px; color: #16352b; text-wrap: pretty; }

/* ---------------------------------------------------------------- the code */
.jr-setup-code { display: flex; height: 100%; gap: 38px; }
.jr-setup-code-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jr-setup-code-left .jr-setup-lede { max-width: 46ch; }
.jr-setup-facts { display: flex; flex-direction: column; gap: 12px; }
.jr-setup-fact {
  display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; border-radius: 16px;
  background: #fffdf6; border: 2px solid #e7dcc6;
}
.jr-setup-fact.teal { background: #cdeeeb; border-color: #7fcdc5; }
.jr-setup-fact.sun { background: #fff8e6; border-color: #f0dcac; }
.jr-setup-fact strong { font-weight: 600; font-size: 16.5px; color: #16352b; }
.jr-setup-fact.teal strong { color: #0b3f3b; }
.jr-setup-fact.sun strong { color: #8a5209; }
.jr-setup-fact span { font-size: 16px; font-weight: 500; line-height: 1.4; color: #16352b; text-wrap: pretty; }

.jr-setup-pad {
  flex: 0 0 470px; background: #fffdf6; border: 2px solid #9dd8d2; border-radius: 28px;
  box-shadow: 0 18px 44px rgba(22, 53, 43, .16); padding: 26px 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.jr-setup-code-row { display: flex; flex-direction: column; gap: 8px; }
.jr-setup-code-label {
  font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #16352b;
}
.jr-setup-code-label.live { color: #0f5a55; }
.jr-setup-cells { display: flex; gap: 10px; }
.jr-setup-cell {
  flex: 1 1 0; height: 64px; border-radius: 18px; background: #f6f2e7; border: 2px solid #e2d8c0;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 30px; color: #16352b;
}
.jr-setup-cell.on { background: #cdeeeb; border-color: #12645e; }
.jr-setup-cell.next { border-color: #7fcdc5; }
.jr-setup-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.jr-setup-key {
  appearance: none; cursor: pointer; min-height: 56px; border-radius: 15px; background: #f6f2e7;
  border: 1.5px solid #e2d8c0; font-weight: 600; font-size: 24px; color: #16352b;
}
.jr-setup-key.word { background: #fffdf6; font-size: 16px; }
.jr-setup-key:active { background: #cdeeeb; border-color: #7fcdc5; }
.jr-setup-code-note { font-size: 16.5px; font-weight: 600; line-height: 1.4; color: #16352b; text-wrap: pretty; }
.jr-setup-code-note.bad { color: #b03d0b; }

/* ---------------------------------------------------------------- done */
.jr-setup-done-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.jr-setup-done-mark {
  flex: none; width: 46px; height: 46px; border-radius: 15px; background: #d7f2e0;
  border: 2px solid #8fd4aa; display: flex; align-items: center; justify-content: center; color: #0d6136;
}
.jr-setup-summary-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.jr-setup-summary {
  flex: 1 1 0; min-width: 0; background: #fffdf6; border: 2px solid #e7dcc6; border-radius: 20px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 11px;
}
.jr-setup-summary-title {
  font-weight: 600; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: #16352b;
}
.jr-setup-summary-line {
  display: flex; align-items: baseline; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #eadfc9;
}
.jr-setup-summary-line:last-child { border-bottom: 0; padding-bottom: 0; }
.jr-setup-summary-line b { flex: 0 0 150px; font-weight: 500; font-size: 15.5px; color: #16352b; }
.jr-setup-summary-line span { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 17.5px; line-height: 1.3; color: #16352b; text-wrap: pretty; }
.jr-setup-gaps { flex: 0 0 400px; display: flex; flex-direction: column; gap: 11px; }
.jr-setup-gap-card {
  display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; border-radius: 16px;
  background: #fff8e6; border: 2px solid #f0dcac;
}
.jr-setup-gap-card strong { font-weight: 600; font-size: 16.5px; color: #8a5209; }
.jr-setup-gap-card span { font-size: 16px; font-weight: 500; line-height: 1.4; color: #16352b; text-wrap: pretty; }

/* ---------------------------------------------------------------- phones (DECISIONS #164)
   SHE DREW NO PHONE FRAME FOR SETUP. This is the minimum honest stacking and nothing more:
   one column, fluid fields, full-width buttons, no fixed 1440-era widths. It does not decide
   anything about what Setup should LOOK like on a phone — that waits on her frames. Her
   300px progress rail becomes a strip above the step instead of a column beside it, because
   a parent stepping through setup needs to see which step they are on. */
@media (max-width: 767px) {
  .jr-phone-natural .jr-setup-bar {
    height: auto;
    min-height: var(--sj-chrome-h);
    flex-wrap: wrap;
    row-gap: 8px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  }
  .jr-phone-natural .jr-setup-step { white-space: normal; }
  .jr-phone-natural .jr-setup-body { display: block; }
  .jr-phone-natural .jr-setup-rail {
    flex: none;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid #cfe8e8;
    padding: 14px 16px;
  }
  .jr-phone-natural .jr-setup-rail-fill,
  .jr-phone-natural .jr-setup-vow { display: none; }
  .jr-phone-natural .jr-setup-main { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
  .jr-phone-natural .jr-setup h1 { font-size: 34px; }
  .jr-phone-natural .jr-setup h1.small { font-size: 30px; }
  .jr-phone-natural .jr-setup-lede,
  .jr-phone-natural .jr-setup-lede.tight { font-size: 17px; }
  .jr-phone-natural .jr-setup-name,
  .jr-phone-natural .jr-setup-teacher { width: 100%; max-width: 100%; height: 62px; }
  .jr-phone-natural .jr-setup-field { width: 100%; }
  .jr-phone-natural .jr-setup-teacher-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .jr-phone-natural .jr-setup-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .jr-phone-natural .jr-setup-actions > * { width: 100%; justify-content: center; }
  .jr-phone-natural .jr-setup-class { display: block; }
  .jr-phone-natural .jr-setup-tabs {
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    margin-bottom: 12px;
  }
  .jr-phone-natural .jr-setup-tabs::-webkit-scrollbar { display: none; }
  .jr-phone-natural .jr-setup-remove { flex-direction: column; align-items: stretch; }
  .jr-phone-natural .jr-setup-remove-text { flex: none; }
}