/* Sign-in styles, ported from the Dawni design (site/auth.html). */
.shell { display:grid; grid-template-columns:380px minmax(0,1fr); min-height:calc(100vh - 34px); }
  .side { padding:36px 40px; display:flex; flex-direction:column; gap:28px; }
  .side .brand img { height:38px; }
  .side h1 { font-size:2.3rem; color:var(--linen); margin:0; }
  .side h1 em { color:var(--champagne); }
  .side .lead { color:#EADCE6; margin:0; font-size:.98rem; }
  .stepper { list-style:none; margin:0; padding:0; counter-reset:st; border-left:1px solid rgba(243,227,195,.3); }
  .stepper li { counter-increment:st; }
  .stepper button { width:100%; text-align:left; font:inherit; font-size:.95rem; color:#D9C8D6; background:none; border:0; padding:9px 0 9px 22px; cursor:pointer; position:relative; min-height:40px; }
  .stepper button::before { content:counter(st, decimal-leading-zero); font-family:var(--serif); font-style:italic; margin-right:12px; color:var(--heather); }
  .stepper button::after { content:""; position:absolute; left:-4px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:rgba(243,227,195,.35); }
  .stepper .done button { color:var(--champagne); }
  .stepper .done button::after { background:var(--gold); }
  .stepper [aria-current=step] button { color:var(--linen); font-weight:700; }
  .stepper [aria-current=step] button::after { background:var(--champagne); box-shadow:0 0 0 4px rgba(243,227,195,.25); }
  .side .quote { margin-top:auto; font-family:var(--serif); font-style:italic; font-size:1.1rem; line-height:1.5; color:var(--champagne); }
  .side .quote small { display:block; font-family:var(--sans); font-style:normal; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--heather); margin-top:8px; }
  .side .home-links { display:flex; gap:18px; font-size:.88rem; }
  .side .home-links a { color:var(--champagne); }
  .main-col { padding:36px 48px 80px; }
  .topline { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
  .progress { flex:1; min-width:180px; }
  .progress-label { font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--mauve); margin:0 0 8px; }
  .progress-track { height:3px; background:var(--hair); border-radius:2px; overflow:hidden; max-width:420px; }
  .progress-track span { display:block; height:100%; background:var(--clay); width:12%; transition:width .6s var(--ease); }
  .screen { max-width:540px; margin:0 auto; animation:rise .8s var(--ease) both; }
  .screen .panel { padding:44px; border-radius:28px; box-shadow:0 30px 60px -40px rgba(58,31,61,.35); }
  .screen h2 { font-size:2.2rem; }
  .or { display:flex; align-items:center; gap:14px; color:var(--mauve); margin:22px 0; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; }
  .or::before, .or::after { content:""; height:1px; background:var(--hair); flex:1; }
  .gbtn { background:var(--white); color:var(--espresso); border-color:var(--hair-strong); }
  .gbtn:hover { background:var(--oat); }
  .gbtn .g { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--hair-strong); font-family:var(--serif); font-weight:600; }
  .envelope { width:76px; height:76px; border-radius:50%; background:var(--blush); color:var(--clay); display:grid; place-items:center; margin-bottom:18px; }
  .code { font-family:var(--serif); font-size:2.2rem; font-weight:380; letter-spacing:.55em; text-align:center; width:100%; padding-left:.55em; }
  .caller { font-family:var(--serif); font-size:2.2rem; font-weight:380; margin:6px 0 12px; }
  .how details { border-top:1px solid var(--hair); padding:12px 0; }
  .how details:last-child { border-bottom:1px solid var(--hair); }
  .how summary { cursor:pointer; font-weight:600; min-height:28px; }
  .how ol { margin:8px 0 0; padding-left:20px; color:var(--mauve); }
  .ring { width:128px; height:128px; margin:10px auto 18px; border-radius:50%; display:grid; place-items:center; position:relative; }
  .ring .wren { --wren-size:112px; }
  .checking { display:flex; align-items:center; gap:14px; margin-top:16px; font-weight:600; color:var(--mauve); }
  .ring.live::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--clay); animation:pulse 2.4s var(--ease) infinite; }
  @keyframes pulse { from { transform:scale(.92); opacity:.9; } to { transform:scale(1.3); opacity:0; } }
  .call-log { list-style:none; padding:0; margin:0 0 16px; }
  .call-log li { padding:6px 0 6px 22px; position:relative; }
  .call-log li::before { content:""; position:absolute; left:4px; top:16px; width:6px; height:6px; border-radius:50%; background:var(--clay); }
  #f-preview-lines li { font-family:var(--serif); font-style:italic; }
  .summary-list { margin:0 0 20px; }
  .center { text-align:center; }
  .nav-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
  .ov-label { display:none; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--clay); margin-bottom:12px; }
  /* Overview: all screens on one board */
  body.overview .shell { grid-template-columns:1fr; }
  body.overview .side { display:none; }
  body.overview .progress { visibility:hidden; }
  body.overview .screens { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:22px; }
  body.overview .screen { max-width:none; margin:0; display:block !important; animation:none; }
  body.overview .screen .panel { padding:26px; height:100%; margin:0; box-shadow:none; }
  body.overview .screen h2 { font-size:1.5rem; }
  body.overview .ov-label { display:block; }
  .board-title { display:none; }
  body.overview .board-title { display:block; }
  @media (max-width:960px) {
    .shell { grid-template-columns:minmax(0, 1fr); min-height:0; }
    .side { padding:18px 20px 22px; gap:12px; }
    .side .stepper, .side .quote, .side .lead, .side > .wren { display:none; }
    .side h1 { font-size:1.6rem; }
    .main-col { padding:24px 20px 60px; }
    .screen .panel { padding:26px 20px; border-radius:22px; }
    .screen h2 { font-size:1.8rem; }
    .topline { margin-bottom:22px; }
  }