/* Preserve the approved navy/maroon composition. Light mode uses washed blue
   and rose papers; the physical shift tokens keep their meaning in both. */
html[data-theme] .masthead-actions{gap:12px}
html[data-theme] .roster-home .appearance-toggle{font-size:14px}
html[data-theme=light] .roster-home{--maroon:#f0dce4;--line:#aabbd0;background:var(--maroon);color:var(--ink)}
html[data-theme=light] .roster-home .build-section{--muted:#4b617a;--signal:#772d45;background:#dfe9f4;color:var(--ink)}
html[data-theme=light] .roster-home .board-surface{background:#f4f7fb}
html[data-theme=light] .roster-home .input-notes span{color:#4b617a}
html[data-theme=light] .roster-home .roster-matrix td{background:#dfe7f0}
html[data-theme=light] .roster-home .step-controls button{color:var(--ink)}
html[data-theme=light] .roster-home .step-controls button[aria-pressed=true]{background:#772d45;color:white}
html[data-theme=light] .roster-home .step-controls button[aria-pressed=true] small{color:white}
html[data-theme=light] .roster-home .step-progress{background:white}
html[data-theme=light] .roster-home .step-controls button:hover:not([aria-pressed=true]){background:#c8d8ea}
html[data-theme=light] .roster-home .finish-section{background:#dfe9f4;color:var(--ink)}
html[data-theme=light] .roster-home .finish-bottom p{color:#4b617a}
html[data-theme=light] .roster-home .action-maroon{background:#772d45;color:white;border-color:#772d45}
html[data-theme=light] .roster-home .duty-off{color:#51627a}
html[data-theme=light] .roster-home .login:hover{background:var(--ink);color:white}
@media(max-width:600px){html[data-theme] .roster-home .masthead-actions{gap:8px}html[data-theme] .roster-home .login{padding-inline:10px}}

/* Keep the poster voice, while leaving room for the product and call to action
   in a short laptop window. The frozen concept pages keep their original scale. */
@media (min-width: 761px) {
  .roster-home .hero { padding-top: clamp(24px, 4svh, 45px); padding-bottom: clamp(40px, 6svh, 72px); }
  .roster-home .hero h1 span:first-child { font-size: clamp(144px, min(27vw, 36svh), 430px); }
  .roster-home .hero h1 span:last-child { font-size: clamp(112px, min(20vw, 27svh), 320px); }
  .roster-home .hero-bottom { margin-top: clamp(22px, 3svh, 40px); }
  .roster-home .hero-object { top: clamp(50px, 9svh, 100px); width: clamp(160px, 18vw, 250px); }
}
@media (min-width: 761px) and (max-height: 760px) {
  .roster-home .masthead { height: 80px; }
  .roster-home .hero-bottom > p { font-size: 24px; }
  .roster-home .magnet strong { font-size: 48px; }
  .roster-home .magnet.echo strong { font-size: 40px; }
  .roster-home .magnet.echo { transform: translate(-20px, 110px) rotate(-9deg); }
}

/* A single roster sheet follows the story from loose pieces to a phone. */
.build-canvas { position: relative; min-height: 410px; isolation: isolate; }
.roster-sheet { position: relative; transform-origin: top left; z-index: 2; }
.build-matrix td { height: 68px; }
.build-matrix .duty { min-height: 58px; position: relative; transition: none; }
.js-ready .planner[data-step="0"] .build-matrix .duty { transform: none; }
.js-ready .planner[data-step="0"] .build-matrix .duty-off { opacity: .25; }
.planner[data-step="2"] .build-matrix [data-swap] { outline: 2px solid var(--signal); outline-offset: 3px; z-index: 3; }
.swap-caption { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 15px; color: var(--signal); opacity: 0; }
.planner[data-step="2"] .swap-caption { opacity: 1; }
.publish-phone { position: absolute; width: 268px; height: 404px; left: 50%; top: 0; margin-left: -134px; border: 5px solid var(--paper); border-radius: 30px; background: #14283f; color: #f7f4f1; padding: 16px; opacity: 0; transform: translateY(18px); }
.phone-speaker { width: 46px; height: 5px; border-radius: 5px; background: #8fa4bd; margin: 0 auto 13px; }
.phone-heading > * { display: block; }
.phone-heading > span { color: #bdcad9; font-size: 11px; }
.phone-heading strong { font-size: 23px; line-height: 1.2; margin: 3px 0; }
.phone-heading small { font-size: 12px; color: #bdcad9; }
.phone-calendar-slot { height: 98px; margin-top: 10px; }
.phone-shifts { border-top: 1px solid #41566f; }
.phone-shifts > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #41566f; }
.phone-shifts > div > span { font-size: 11px; width: 25px; color: #bdcad9; }
.phone-shifts > div > span b { display: block; font-size: 18px; line-height: 1.1; color: #f7f4f1; }
.phone-shifts p { flex: 1; }
.phone-shifts strong, .phone-shifts small { display: block; }
.phone-shifts strong { font-size: 14px; }
.phone-shifts small { font-size: 10px; color: #bdcad9; }
.phone-duty { font-size: 13px; color: #14283f; padding: 5px 8px; border-radius: 3px; }
.phone-confirmation { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; margin-top: 12px; }
.phone-confirmation svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.js-ready .planner[data-step="3"] .publish-phone { opacity: 1; transform: none; }
.js-ready .planner[data-step="3"] .build-matrix td { background: #2a425f; }
.js-ready .planner[data-step="3"] .build-matrix th, .js-ready .planner[data-step="3"] .build-matrix th small, .js-ready .planner[data-step="3"] .build-matrix .duty-off { color: #bdcad9; }
.roster-home .compare-layer.after { transition: none; }
.roster-home .compare-line { transition: none; }
.roster-home .cover-scroll-hint { color: var(--muted); }
@media (max-width: 760px) {
  .build-canvas { min-height: 364px; }
  .build-matrix td { height: 52px; }
  .build-matrix .duty { min-height: 46px; }
  .build-matrix th:first-child { width: 51px; }
  .publish-phone { width: 244px; height: 354px; margin-left: -122px; padding: 12px 14px; border-radius: 26px; }
  .phone-speaker { margin-bottom: 9px; }
  .phone-heading strong { font-size: 21px; }
  .phone-calendar-slot { height: 72px; margin-top: 8px; }
  .phone-shifts > div { padding: 9px 0; }
  .phone-confirmation { margin-top: 9px; }
  .swap-caption { font-size: 12px; bottom: 24px; }
  .roster-home .stage-copy { min-height: 215px; }
  .roster-home .compare-controls .cover-scroll-hint { display: inline; font-size: 11px; }
}
@media (max-width: 360px) {
  .build-matrix th:first-child { width: 42px; }
  .build-matrix td { height: 46px; }
}
@media print {
  .roster-home .roster-sheet { transform: none !important; }
  .roster-home .publish-phone { display: none; }
}