/* =========================================================================
   account.css — the account panel, on every page that has an account.

   ## Why this file exists

   The panel was 200 lines of markup inside `dashboard.html` and 110 lines of CSS inside
   `dashboard.css`, so it existed on exactly one page. The avatar in the header knew that:
   on the dashboard it opened the panel, and on checkout, the terminal and analytics it
   NAVIGATED to the dashboard instead — where the default heading is "Choose your next
   challenge" over a pricing grid. Pressing a profile icon showed somebody a shop.

   ## Why every rule is scoped under `.modal`

   The three app pages already load `dashboard.css`, so the panel's styles were on them
   all along — and were being quietly overwritten. `.panel`, `.side` and `.empty` are
   generic enough that `terminal.css` and `checkout.css` define their own, later in the
   cascade and at the same specificity, so the later one won. A panel opened on the
   terminal would have taken the terminal's `.panel` — `background:#0A0A0A`, a 14px
   heading — and the terminal's `.side`, a grid.

   Scoping every selector under `.modal` fixes that in both directions at once. Two classes
   beat one, so a page stylesheet can no longer reach inside the panel; and nothing here
   escapes it to reach the page. The alternative — renaming ten classes across the markup,
   the pane builder and this file — moves the same collision somewhere else.
   ========================================================================= */

.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; }
.modal[hidden]{ display:none; }

.modal .modal__scrim{
  position:absolute; inset:0; background:rgba(2,2,2,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

.modal .sheet{
  position:relative; z-index:1;
  display:grid; grid-template-columns:236px minmax(0,1fr);
  width:100%; max-width:940px; height:min(680px, calc(100dvh - 48px));
  border:1px solid var(--hair-2, rgba(255,255,255,.14)); border-radius:18px; overflow:hidden;
  background:#0C0C0B; box-shadow:0 50px 110px rgba(0,0,0,.7);
}

/* --- sidebar --- */
.modal .side{
  display:flex; flex-direction:column; padding:18px 12px 14px;
  border-right:1px solid var(--hair); background:#0A0A09;
}
.modal .side__mark{
  display:grid; place-items:center; width:30px; height:30px; margin:4px 0 20px 10px;
  color:var(--gold);
}
.modal .side__mark svg{ width:22px; height:22px; }

.modal .side__nav{ display:grid; gap:2px; }
.modal .side__nav button{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 10px; border:0; border-radius:9px; background:none; cursor:pointer;
  font:inherit; font-size:14px; font-weight:450; color:#8E8A85; text-align:left;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.modal .side__nav svg{ width:16px; height:16px; flex:none; }
.modal .side__nav button:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.modal .side__nav button[aria-current="true"]{
  color:#F5F2ED; background:rgba(255,255,255,.07); font-weight:500;
}

/* The legal documents, pushed to the bottom of the list.
 *
 * `margin-top:auto` is what puts them at the foot rather than under the last section — the
 * sidebar is a flex column, so they sit against the bottom edge however many panes there
 * are. Quieter than the panes above them on purpose: these are reference, not places you
 * came here to go.
 *
 * They are here because the header no longer carries them and the app pages have no footer,
 * so on the terminal, the dashboard and analytics this is the only route to the terms an
 * account is bound to. */
.modal .side__foot{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--hair);
  display:grid; gap:1px;
}
.modal .side__foot a{
  padding:7px 10px; border-radius:8px;
  font-size:12.5px; color:#7C7873; text-decoration:none;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.modal .side__foot a:hover{ color:var(--ink); background:rgba(255,255,255,.04); }

/* On a phone the sidebar is a horizontal strip of panes; a second row of quiet links under
   it would push the panel's actual content off the first screen. The drawer carries legal
   at this width. */
@media (max-width:820px){
  .modal .side__foot{ display:none; }
}

/* --- panel --- */
.modal .panel{
  display:flex; flex-direction:column; min-width:0;
  background:none; border:0; border-radius:0; overflow:visible;
}
.modal .panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; border-bottom:1px solid var(--hair);
}
.modal .panel__head h2{
  font-family:var(--display); font-size:19px; font-weight:600;
  letter-spacing:-.02em; color:#F5F2ED;
}
.modal .panel__x{
  display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:9px;
  background:none; cursor:pointer; color:#8E8A85;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.modal .panel__x:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.modal .panel__x svg{ width:17px; height:17px; }

/* Scroll lives in the panel, not on the sheet, so the list and the title stay put while a
   long pane moves under them. */
.modal .panel__body{ flex:1; overflow-y:auto; padding:22px; }

.modal .pane{ display:none; }
.modal .pane.is-on{ display:block; }

/* --- bits --- */
.modal .who{ display:flex; align-items:center; gap:15px; padding-bottom:20px; }
.modal .who span.who__pic{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#D3B07C,#8B6F45);
  font-family:var(--display); font-size:21px; font-weight:600; color:#1B1509;
}
.modal .who b{
  display:block; font-family:var(--display); font-size:19px; font-weight:600;
  letter-spacing:-.02em; color:#F5F2ED;
}
/* The caption under the name. `.who__pic` is a span too, which is why its own rule above
   is written with the element selector — one class and one element beats one class, and
   without that this rule turns the disc back into a block and pushes the initial out of
   it. */
.modal .who span{ display:block; margin-top:4px; font-size:13px; color:var(--mute); }
.modal .who span b{ display:inline; font-family:var(--sans); font-size:13px; color:#C9C5BE; }

.modal .grp{
  margin:22px 0 12px; font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
.modal .grp:first-child{ margin-top:0; }
.modal .quiet{ font-size:13.5px; line-height:1.6; color:var(--mute); }

.modal .two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.modal .inp span{
  display:block; margin-bottom:8px; font-size:13px; font-weight:500; color:#DEDAD4;
}
.modal .inp input{
  width:100%; height:42px; padding:0 13px;
  border:1px solid var(--hair-2); border-radius:10px; background:#111110;
  font:inherit; font-size:14px; color:var(--ink);
  transition:border-color .2s var(--ease);
}
.modal .inp input:focus{ outline:none; border-color:rgba(211,176,124,.45); }
.modal .inp input[readonly]{ color:#8E8A85; }

.modal .row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  padding:18px 0; border-top:1px solid var(--hair);
}
.modal .row b{ display:block; font-size:14.5px; font-weight:500; color:#EFEBE4; }
.modal .row p{
  margin-top:6px; max-width:56ch; font-size:13px; line-height:1.62; color:var(--mute);
}
.modal .row--danger b{ color:#F0C9C9; }

/* --- the handle ------------------------------------------------------------
   An `@` inside the field, for the reason onboarding's carries one: beside the box it is a
   label and people type it, and the input then folds it away as they do. Inside, it is part
   of the control and what is in the box is exactly what is stored.
   -------------------------------------------------------------------------- */
.modal .handle{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.modal .handle__in{ position:relative; flex:1; min-width:180px; max-width:280px; }
.modal .handle__at{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:14px; color:#6F6B66; pointer-events:none;
}
.modal .handle__in input{
  width:100%; height:42px; padding:0 13px 0 28px;
  border:1px solid var(--hair-2); border-radius:10px; background:#111110;
  font:inherit; font-size:14px; color:var(--ink);
  transition:border-color .2s var(--ease);
}
.modal .handle__in input:focus{ outline:none; border-color:rgba(211,176,124,.45); }
/* Full width so it holds its line whatever it says, and the row above never reflows when a
   one-line verdict becomes a two-line one. */
.modal .handle__note{ flex-basis:100%; margin-top:2px; }
.modal .handle__note--good{ color:#9FE84B; }
.modal .handle__note--bad{ color:#E48A8A; }

/* --- toggle ---------------------------------------------------------------
   The state lives in `aria-checked` and nowhere else. A screen reader reads it and the CSS
   draws from it, so there is no second copy to fall out of step.
   -------------------------------------------------------------------------- */
.modal .tog{
  position:relative; flex:none; width:40px; height:23px; border-radius:999px;
  border:1px solid var(--hair-2); background:rgba(255,255,255,.06); cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.modal .tog i{
  position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%;
  background:#6C6862; transition:transform .28s var(--ease), background-color .28s var(--ease);
}
.modal .tog[aria-checked="true"]{
  background:rgba(211,176,124,.22); border-color:rgba(211,176,124,.5);
}
.modal .tog[aria-checked="true"] i{ transform:translateX(17px); background:var(--gold); }

/* --- buttons --- */
.modal .ghost{
  flex:none; height:36px; padding-inline:16px; border:1px solid var(--hair-2);
  border-radius:9px; background:none; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:500; color:#DEDAD4;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.modal .ghost:hover{ border-color:rgba(211,176,124,.45); background:rgba(211,176,124,.08); }

.modal .danger{
  flex:none; height:36px; padding-inline:18px; border-radius:9px;
  background:rgba(255,75,75,.16); border:1px solid rgba(255,75,75,.32);
  font:inherit; font-size:13.5px; font-weight:600; color:#F5B5B5; cursor:pointer;
  transition:background-color .2s var(--ease);
}
.modal .danger:hover{ background:rgba(255,75,75,.26); }

.modal .go{
  width:100%; height:44px; margin-top:18px; border:0; border-radius:10px;
  background:#F1EFEB; color:#0A0A0A; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600;
  transition:transform .2s var(--ease);
}
.modal .go:hover{ transform:translateY(-1px); }

/* --- list --- */
.modal .list{ border-top:1px solid var(--hair); }
.modal .item{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--hair);
}
.modal .item b{
  display:block; font-size:14px; font-weight:500; color:#EFEBE4;
  font-variant-numeric:tabular-nums;
}
.modal .item span{ display:block; margin-top:4px; font-size:12.5px; color:var(--mute); }
.modal .item__end{ flex:none; text-align:right; }
.modal .item__end span{ margin-top:0; }
.modal .ok{ color:var(--gold); }
.modal .bad{ color:#E48A8A; }

/* --- figures --- */
.modal .figs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  border:1px solid var(--hair-2); border-radius:12px; overflow:hidden;
  background:var(--hair);
}
.modal .figs div{ padding:16px 18px; background:#0B0B0A; }
.modal .figs span{
  font-size:11px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--mute);
}
.modal .figs b{
  display:block; margin-top:8px; font-family:var(--display); font-size:24px;
  font-weight:600; letter-spacing:-.03em; color:#F3F0EA; font-variant-numeric:tabular-nums;
}

/* --- empty state ----------------------------------------------------------
   "Nothing here" is not enough on its own. These say WHEN the thing arrives, so an empty
   pane reads as a pane that is empty rather than as a page that broke.
   -------------------------------------------------------------------------- */
.modal .empty{ padding:56px 20px; text-align:center; }
.modal .empty b{
  display:block; font-family:var(--display); font-size:17px; font-weight:600;
  letter-spacing:-.02em; color:#EFEBE4;
}
.modal .empty p{
  margin:10px auto 0; max-width:46ch; font-size:13.5px; line-height:1.65; color:var(--mute);
}

/* --- responsive --- */
@media (max-width:820px){
  .modal{ padding:0; place-items:stretch; }
  .modal .sheet{
    grid-template-columns:minmax(0,1fr); max-width:none; height:100dvh;
    border:0; border-radius:0;
  }
  .modal .side{
    flex-direction:row; align-items:center; gap:6px; overflow-x:auto;
    padding:10px 12px; border-right:0; border-bottom:1px solid var(--hair);
  }
  .modal .side__mark{ display:none; }
  .modal .side__nav{ display:flex; gap:6px; }
  .modal .side__nav button{ white-space:nowrap; padding:8px 12px; }
  .modal .side__nav svg{ display:none; }
  .modal .two{ grid-template-columns:minmax(0,1fr); }
  .modal .figs{ grid-template-columns:minmax(0,1fr); }
  .modal .row{ flex-direction:column; gap:14px; }
}