/* ═══════════════════════════════════════════════════════════════
   SOLUM — app.css: the shared components of the inner pages, in the
   "Clean" style. Loads after site.css and uses only its tokens.
   Documented in full at the top of /css/shell.css.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── page frame ───────────────────────── */
/* one width for every signed-in page: the same 1200px wrap as the nav, so
   the page edges line up with the logo and the account pill */
.app{max-width:var(--wrap);margin:0 auto;padding:calc(var(--nav-h) + 48px) var(--gutter) 96px}
/* short pages still push the footer bar (.foot, ~84px) to the bottom edge */
.app{min-height:calc(100svh - 84px)}

/* page header: eyebrow + big Sora title (second part in <em> is gradient)
   + a line of copy, with anything on the right (.app__who, buttons) */
.app__head{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--hair)}
.app__head .sh-eyebrow{margin-bottom:18px}
.app__head h1{font:700 clamp(40px,6vw,72px)/1 var(--f-display);letter-spacing:-.052em;color:var(--fg)}
.app__head h1 em,.legal h1 em{font-style:normal;background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.app__head--grad h1{background:var(--grad-big);-webkit-background-clip:text;background-clip:text;color:transparent}
.app__head p{margin-top:14px;max-width:40em;color:var(--mute-2);font-size:clamp(16px,1.3vw,18px);line-height:1.55}
.app__who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:400 12px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.app__who b{font:500 13px/1.5 var(--f-mono);letter-spacing:.01em;text-transform:none;color:var(--fg)}
.app__who .app__av{flex:none;width:22px;height:22px;margin-right:-4px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--hair-2)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.idcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.idcards{grid-template-columns:1fr}}

/* ───────────────────────── tabs: segmented pill control ─────────────────────────
   <div class="tabs"><button class="is-on">Overview</button><button>Keys</button></div>
   Without JS the active button is filled blue; with shell.js a thumb
   (.sh-ink) slides under whichever button is .is-on / [aria-selected=true]. */
.tabs{
  position:relative;isolation:isolate;
  display:flex;width:max-content;max-width:100%;gap:2px;padding:5px;margin-bottom:28px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  border-radius:var(--r-pill);background:var(--surface);
  box-shadow:0 0 0 1px var(--hair),var(--sh-1)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  position:relative;z-index:1;flex:none;
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border-radius:var(--r-pill);box-shadow:none;background:transparent;
  font:500 14px/1 var(--f-body);letter-spacing:-.005em;text-transform:none;white-space:nowrap;
  color:var(--mute);transition:color .2s,background-color .2s}
.tabs button:hover{color:var(--fg)}
.tabs button.is-on,.tabs button[aria-selected="true"]{color:#fff;background:var(--blue)}
.sh-js .tabs button.is-on,.sh-js .tabs button[aria-selected="true"]{background:transparent}
.tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pane[hidden]{display:none}

/* ───────────────────────── cards ─────────────────────────
   .panel   section container (forms, tables) — no lift, the edge warms on hover
   .idcard  fact card (dashboard) · .stat  number tile · .keycard  licence row
   All: #0B1322, hairline, soft shadow, rounded. idcard/stat/keycard lift
   3px on hover with a faint blue glow (an ::after that only fades). */
.panel,.idcard,.stat,.keycard{position:relative;
  background:var(--surface);box-shadow:0 0 0 1px var(--hair),var(--sh-1)}
.panel{padding:clamp(22px,3vw,34px);margin-bottom:18px;border-radius:var(--r-lg)}
.panel > h2{font:600 clamp(20px,2vw,24px)/1.15 var(--f-display);letter-spacing:-.035em;margin-bottom:8px}
.panel p.hint{color:var(--mute-2);font-size:15px;line-height:1.6;max-width:70ch;margin-bottom:18px}
.panel p.hint b{color:var(--fg)}
.panel__row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}

.idcard,.stat,.keycard{transition:transform .5s var(--ease)}
.panel::after,.idcard::after,.stat::after,.keycard::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px var(--hair-2),var(--sh-3);opacity:0;transition:opacity .45s var(--ease)}
.panel::after{box-shadow:0 0 0 1px var(--hair-2)}
.panel:hover::after,.idcard:hover::after,.stat:hover::after,.keycard:hover::after{opacity:1}
@media (hover:hover){
  .idcard:hover,.stat:hover,.keycard:hover{transform:translateY(-3px)}
}

/* stat tile */
.stat{padding:20px 22px;border-radius:var(--r-md)}
.stat b{display:block;font:700 30px/1 var(--f-display);letter-spacing:-.045em;color:var(--fg);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:var(--mute)}
.stat.is-warn b{color:var(--warn);background:none}
.stat.is-bad b{color:var(--bad);background:none}

/* idcard */
.idcard{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);overflow:hidden}
.idcard::before{content:none}
.idcard--wide{grid-column:1 / -1}
.idcard__label{display:inline-flex;align-items:center;gap:10px;
  font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.idcard__label::before{content:'';flex:none;width:6px;height:6px;border-radius:2px;background:var(--blue);transform:rotate(45deg)}
.idcard__uuid{display:block;padding:12px 14px;border-radius:var(--r-sm);
  font:500 14px/1.5 var(--f-mono);letter-spacing:.02em;color:var(--gloss);word-break:break-all;
  background:var(--band);box-shadow:inset 0 0 0 1px var(--hair)}
.idcard__big{font:700 clamp(30px,3.6vw,44px)/1 var(--f-display);letter-spacing:-.05em;
  background:var(--grad-big);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.idcard__big.is-owner{background:linear-gradient(100deg,#FFF1CC,#FFC85A 60%,#E89A2A);-webkit-background-clip:text;background-clip:text}
.idcard__big.is-none{background:none;color:var(--mute)}
.idcard__note{margin:0;color:var(--mute-2);font-size:15px;line-height:1.6}
.idcard__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto}
.idcard__foot .idcard__note{font-size:13px;color:var(--mute)}
.idcard__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.idcard__row .idcard__uuid{flex:1;min-width:min(260px,100%)}
.idcard__row .btn{flex:none}

/* keycard: one licence per row */
.keycard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:10px;border-radius:var(--r-md);
  background:linear-gradient(100deg,rgba(0,112,248,.10),transparent 55%),var(--surface)}
.keycard__plan{min-width:74px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.keycard code{flex:1;min-width:min(220px,100%);padding:9px 12px;border-radius:10px;
  font:500 14px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--gloss);word-break:break-all;
  background:var(--band);box-shadow:inset 0 0 0 1px var(--hair)}
.keycard .btn{--h:36px;padding:0 16px;font-size:14px}

/* ───────────────────────── forms ─────────────────────────
   <label class="field"><span>Email</span><input …><span class="hint-sm">…</span></label>
   <label class="field field--check"><input type="checkbox"><span>I agree…</span></label> */
.field{display:block;margin-bottom:16px}
.field > span{display:block;margin-bottom:8px;
  font:500 14px/1.3 var(--f-body);letter-spacing:0;text-transform:none;color:var(--fg-2)}
.field input,.field select,.field textarea{
  display:block;width:100%;padding:13px 15px;margin:0;
  font:400 15px/1.4 var(--f-body);color:var(--fg);caret-color:var(--cyan);
  background:var(--band);border:1px solid var(--hair-2);border-radius:var(--r-sm);
  box-shadow:none;outline:0;
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(110,200,255,.3)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);background-color:#060A14;box-shadow:var(--ring)}
.field ::placeholder{color:var(--faint);opacity:1}
.field select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background:var(--band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2394A0B4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.field textarea{min-height:130px;resize:vertical;font:400 13px/1.55 var(--f-mono)}
.field > .hint-sm{display:block;margin:8px 0 0;font:400 13px/1.55 var(--f-body);color:var(--mute);text-transform:none;letter-spacing:0}
.hint-sm{font-size:13px;color:var(--mute);margin-top:8px;line-height:1.55}

.field--check{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--mute-2)}
.field--check > span{display:inline;margin:0;font:400 14.5px/1.55 var(--f-body);color:var(--mute-2)}
.field--check a{color:var(--cyan)}
.field.field--check input[type=checkbox]{
  -webkit-appearance:none;appearance:none;flex:none;display:block;
  width:20px;height:20px;padding:0;margin:1px 0 0;cursor:pointer;
  border:1px solid var(--hair-2);border-radius:6px;background:var(--band) center/14px no-repeat;
  transition:background-color .2s,border-color .2s}
.field.field--check input[type=checkbox]:hover{border-color:var(--cyan)}
.field.field--check input[type=checkbox]:checked{border-color:var(--blue);background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3 7.3 2.6 2.6L11 4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.field.field--check input[type=checkbox]:focus-visible{outline:0;box-shadow:var(--ring)}
/* keep Chrome's autofill dark */
.field input:-webkit-autofill{-webkit-text-fill-color:var(--fg);caret-color:var(--cyan);
  box-shadow:0 0 0 1000px var(--band) inset;transition:background-color 99999s}
.field input:-webkit-autofill:focus{box-shadow:0 0 0 1000px #060A14 inset,var(--ring)}

/* ───────────────────────── notices ─────────────────────────
   <div class="note note--ok"><b>Saved</b>Your password was changed.</div>
   --ok / --warn / --bad; default is blue. */
.note{
  --c:var(--blue);
  position:relative;overflow:hidden;
  padding:14px 18px 14px 20px;margin-bottom:16px;border-radius:14px;
  font-size:14.5px;line-height:1.6;color:var(--fg-2);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 11%,transparent),transparent 60%),var(--surface);
  box-shadow:0 0 0 1px var(--hair)}
.note::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);box-shadow:none}
.note b{display:block;margin-bottom:2px;font:600 15px/1.4 var(--f-display);letter-spacing:-.02em;color:var(--fg)}
.note--ok{--c:var(--ok)}
.note--warn{--c:var(--warn)}
.note--bad{--c:var(--bad)}

/* ───────────────────────── table ───────────────────────── */
.tbl__wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
.tbl th{text-align:left;padding:10px 14px;white-space:nowrap;
  font:500 11.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid var(--hair)}
.tbl td{padding:14px;border-bottom:1px solid var(--hair);color:var(--fg-2);vertical-align:middle;
  transition:background-color .2s}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover > td{background:rgba(110,200,255,.035)}
.tbl td b{color:var(--fg);font-weight:500}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* ───────────────────────── status chips ───────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--r-pill);white-space:nowrap;vertical-align:middle;
  font:500 11.5px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;
  background:var(--chip);color:var(--fg-2)}
.pill--ok{background:rgba(124,242,166,.12);color:#A4F5C2}
.pill--warn{background:rgba(255,200,90,.13);color:#FFD98A}
.pill--bad{background:rgba(255,107,116,.13);color:#FFA3A9}
.pill--blue{background:var(--blue-soft);color:var(--cyan)}

/* ───────────────────────── basket (reseller builder) ───────────────────────── */
.basket{display:grid;gap:10px}
.basket__row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:14px 16px;border-radius:var(--r-md);
  background:var(--band);box-shadow:inset 0 0 0 1px var(--hair)}
.basket__row b{display:block;font:600 16px/1.3 var(--f-display);letter-spacing:-.02em}
.basket__row small{display:block;margin-top:2px;color:var(--mute);font-size:13px}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--chip);color:var(--fg);font-size:16px;line-height:1;transition:background-color .2s}
.qty button:hover{background:var(--blue)}
.qty input{width:56px;height:32px;padding:0 4px;text-align:center;
  font:500 15px/1 var(--f-body);color:var(--fg);
  background:var(--page);border:1px solid var(--hair-2);border-radius:10px;box-shadow:none}
.qty input:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
.basket__line{min-width:86px;text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}

.total{display:grid;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--mute-2)}
.total div{display:flex;justify-content:space-between;gap:20px}
.total .big{margin-top:4px;padding-top:10px;border-top:1px solid var(--hair);
  font:700 22px/1.2 var(--f-display);letter-spacing:-.035em;color:var(--fg)}

/* ───────────────────────── loading + empty ───────────────────────── */
.loading,.empty{padding:34px 4px;text-align:center;color:var(--mute);font-size:14.5px}
.loading{font:400 12.5px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.empty b{display:block;margin-bottom:6px;font:600 18px/1.3 var(--f-display);letter-spacing:-.02em;color:var(--fg)}

/* ───────────────────────── auth card ───────────────────────── */
.auth{min-height:100svh;display:grid;place-items:center;padding:calc(var(--nav-h) + 40px) var(--gutter) 60px}
.auth__box{
  position:relative;width:100%;max-width:440px;padding:clamp(28px,4vw,44px);
  border-radius:var(--r-lg);
  background:var(--surface);box-shadow:0 0 0 1px var(--hair),var(--sh-2)}
.auth__mark{width:58px;height:auto;margin:0 auto 20px;filter:drop-shadow(0 12px 24px rgba(0,112,248,.45))}
.auth__box h1{margin-bottom:8px;text-align:center;font:700 30px/1.1 var(--f-display);letter-spacing:-.045em}
.auth__box > p{margin-bottom:26px;text-align:center;color:var(--mute-2);font-size:15px}
.auth__alt{margin-top:22px;text-align:center;font-size:14px;line-height:1.8;color:var(--mute)}
.auth__alt a{color:var(--cyan)}
.auth__alt a:hover{text-decoration:underline;text-underline-offset:3px}

/* ───────────────────────── plain shell (error page) ───────────────────────── */
body.plain{display:grid;place-items:center;min-height:100svh;padding:24px}
.plain__box{max-width:480px;text-align:center}
.plain__box img{margin:0 auto 24px;filter:drop-shadow(0 16px 30px rgba(0,112,248,.45))}
.plain__box h1{margin-bottom:12px;font:700 clamp(56px,10vw,96px)/1 var(--f-display);letter-spacing:-.055em;
  background:var(--grad-big);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.plain__box p{margin-bottom:26px;color:var(--mute-2)}

/* ───────────────────────── legal pages ───────────────────────── */
.legal{max-width:820px;margin:0 auto;padding:calc(var(--nav-h) + 56px) var(--gutter) 96px}
.legal h1{margin-bottom:12px;font:700 clamp(36px,5vw,56px)/1.02 var(--f-display);letter-spacing:-.048em}
.legal .meta{margin-bottom:40px;font:400 12.5px/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.legal h2{margin:44px 0 12px;font:600 22px/1.2 var(--f-display);letter-spacing:-.03em;color:var(--fg)}
.legal h3{margin:28px 0 10px;font:600 17px/1.3 var(--f-display);letter-spacing:-.02em}
.legal p,.legal li{color:var(--mute-2);font-size:16px;line-height:1.75}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 16px;padding-left:22px;list-style:disc}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--blue)}
.legal a{color:var(--cyan)}
.legal a:hover{text-decoration:underline;text-underline-offset:3px}
.legal strong,.legal b{color:var(--fg)}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 18px;padding:20px 22px;
  border-radius:var(--r-md);font-size:15px;color:var(--mute-2);
  background:var(--surface);box-shadow:0 0 0 1px var(--hair)}
.legal dt{padding-top:3px;font:500 11.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.legal dd{margin:0;color:var(--fg)}
@media (max-width:520px){.legal dl{grid-template-columns:1fr;gap:2px}.legal dd{margin-bottom:10px}}
mark.todo{padding:1px 8px;border-radius:6px;background:rgba(255,200,90,.16);color:#FFD98A;
  font:500 12px/1.5 var(--f-mono);letter-spacing:.02em}

/* ───────────────────────── small screens ───────────────────────── */
@media (max-width:560px){
  .app{padding-bottom:72px}
  .app__head{align-items:flex-start}
  .keycard code{flex-basis:100%;min-width:0}
  .tabs button{height:36px;padding:0 14px;font-size:13.5px}
  .basket__row{grid-template-columns:1fr auto}
  .basket__line{grid-column:1 / -1;text-align:left}
}