/* Adi Life UI (handoff v0.9) — student shell, HUD and home. Scoped to body.adi-ui so the existing views keep their styles.
   Tokens from design doc 05 §23; the CTA green is darkened and its text kept large and bold for contrast (review V12).
   Breakpoints from doc 05 §26: phone < 768, compact 768–1199, desktop ≥ 1200. */
body.adi-ui{
 background:linear-gradient(180deg,#DCEFFB 0,#F4F8FC 340px,var(--g-paper) 100%);color:var(--adi-ink);font-size:16px}

/* ---------- navigation: right column on desktop/compact,bottom bar on phones ---------- */
body.adi-ui #sidebar{position:fixed;top:0;right:0;bottom:0;width:var(--adi-nav-w);height:100dvh;padding:14px 10px;border:0;border-radius:0;
 background:linear-gradient(180deg,var(--adi-nav),var(--adi-nav-2));box-shadow:-6px 0 24px #0b2d5733;display:flex;flex-direction:column;align-items:center;gap:14px;overflow:visible;z-index:30}
body.adi-ui .adi-brand img{width:82px;height:auto;display:block;filter:drop-shadow(0 2px 6px #0006)}
body.adi-ui .adi-tabs{display:flex;flex-direction:column;gap:10px;width:100%}
body.adi-ui .adi-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:76px;padding:8px 4px;border:2px solid transparent;border-radius:18px;
 background:#ffffff14;color:var(--g-accent-soft);font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:none;margin:0}
body.adi-ui .adi-tab img{width:44px;height:44px;object-fit:contain}
body.adi-ui .adi-tab:hover{background:#ffffff26}
body.adi-ui .adi-tab.active{background:var(--adi-cream);color:var(--adi-nav);border-color:var(--adi-gold);box-shadow:0 0 0 3px #e8b74255}
body.adi-ui .adi-tab.soon{opacity:.62}
body.adi-ui .adi-tab em{position:absolute;top:4px;left:4px;font-style:normal;font-size:10px;line-height:1;padding:3px 5px;border-radius:999px;background:var(--adi-gold);color:#3b2a00}
body.adi-ui .adi-tab:focus-visible,body.adi-ui .adi-pill:focus-visible,body.adi-ui .adi-avatar:focus-visible,body.adi-ui .adi-level:focus-visible{outline:3px solid var(--adi-gold);outline-offset:3px}

body.adi-ui .main{margin-right:var(--adi-nav-w);padding:16px 22px 40px;max-width:1440px}

/* ---------- HUD ---------- */
body.adi-ui .top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:0;height:auto;width:auto;margin:0 0 14px;padding:0;background:transparent;border:0;box-shadow:none;flex-wrap:wrap}
/* The old header rules give #crumb/#stats fixed heights and flex bases; the HUD sizes itself. */
body.adi-ui .top .crumb,body.adi-ui .top .stats{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:10px;min-height:0;max-height:none;height:auto;width:auto;margin:0;padding:0;direction:rtl;font-size:inherit;color:inherit}
body.adi-ui .adi-who,body.adi-ui .adi-pills{display:flex;align-items:center;gap:10px}
body.adi-ui .adi-avatar{width:56px;height:56px;padding:0;border-radius:50%;border:3px solid var(--adi-gold);background:var(--adi-cream);overflow:hidden;cursor:pointer;display:grid;place-items:center;font-size:22px;font-weight:900;color:var(--adi-nav)}
body.adi-ui .adi-avatar img{width:100%;height:100%;object-fit:cover}
body.adi-ui .adi-level{display:flex;align-items:center;gap:0;padding:0;border:0;background:none;cursor:pointer;font:inherit}
body.adi-ui .adi-shield{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:50px;margin-left:-10px;color:var(--g-content);font-weight:900;font-size:18px;
 background:linear-gradient(180deg,#3B7BD6,var(--adi-nav));clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%);filter:drop-shadow(0 2px 2px #0004)}



body.adi-ui .adi-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 14px 4px 8px;border-radius:999px;border:2px solid var(--g-indigo-deep);background:var(--adi-nav);color:var(--g-content);font:inherit;font-weight:800;cursor:pointer}
body.adi-ui .adi-pill img{width:30px;height:30px;object-fit:contain}


body.adi-ui .adi-badge{position:absolute;top:-6px;left:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--g-badge);color:var(--g-content);font-style:normal;font-size:12px;font-weight:800;line-height:22px;text-align:center}


body.adi-ui .adi-layer{position:absolute;pointer-events:none;user-select:none}
body.adi-ui .adi-layer.far,body.adi-ui .adi-layer.mid{inset:0;width:100%;height:100%;object-fit:cover}
/* Sized from the stage height so it stays in proportion to the hero (78% of the height); placed by its standing point in adiStage. */

body.adi-ui .adi-layer.platform{width:var(--plat-w);height:auto}
body.adi-ui .adi-hero{position:absolute;width:auto;max-width:none;z-index:2;filter:drop-shadow(0 18px 14px #0b2d5733)}

body.adi-ui .adi-stage-note{position:absolute;inset:auto 18px 18px;z-index:3;margin:0;padding:10px 14px;border-radius:14px;background:#fff7e8ee;font-size:14px}







body.adi-ui .adi-empty{margin:0;color:var(--adi-muted)}

body.adi-ui .task-state.amber{background:var(--g-amber-bg);color:var(--adi-amber)}


body.adi-ui .adi-mini-head{display:flex;gap:12px;align-items:center}
body.adi-ui .adi-mini-head img{width:48px;height:48px;object-fit:contain}


body.adi-ui .adi-foot{margin:24px 0 0;text-align:center;color:var(--adi-muted);font-size:13px}

/* account menu (modal) */

/* ---------- compact ---------- */
@media (max-width:1199px){body.adi-ui{--adi-nav-w:92px}body.adi-ui .adi-home{grid-template-columns:minmax(0,1fr) 340px}body.adi-ui .adi-row{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ---------- phone ---------- */
@media (max-width:767px){
 body.adi-ui #sidebar{top:auto;bottom:0;left:0;width:100%;height:auto;padding:6px 6px max(6px,env(safe-area-inset-bottom));flex-direction:row;border-radius:22px 22px 0 0}
 body.adi-ui .adi-brand{display:none}
 body.adi-ui .adi-tabs{flex-direction:row;gap:4px}
 body.adi-ui .adi-tab{flex:1;min-height:68px;font-size:12px;padding:6px 2px}
 body.adi-ui .adi-tab img{width:36px;height:36px}
 body.adi-ui .main{margin:0;padding:10px 12px 110px}
 body.adi-ui .top{margin-bottom:10px}
 body.adi-ui .adi-avatar{width:48px;height:48px}
 
 
 body.adi-ui .adi-shield{width:38px;height:42px;font-size:15px}
 /* Reference mobile HUD: one row; the streak chest floats on the stage and the day plan is linked from the card. */
 
 
 body.adi-ui .top{flex-wrap:nowrap;gap:6px}
 body.adi-ui .adi-who,body.adi-ui .adi-pills{gap:6px}
 body.adi-ui .adi-pill{padding:2px 10px 2px 6px;min-height:40px}
 body.adi-ui .adi-pill img{width:26px;height:26px}
 
 
 body.adi-ui .adi-home{grid-template-columns:1fr;gap:0}
 
 body.adi-ui .adi-today{position:relative;margin-top:-56px;z-index:4;border-color:var(--g-accent-line);box-shadow:0 -6px 22px #123e7526}
 body.adi-ui .adi-float.chest{left:auto;right:12px;top:84px;bottom:auto;padding:6px 8px}
 body.adi-ui .adi-float img{width:56px;height:56px}
 body.adi-ui .adi-greeting{right:12px;top:12px;padding:8px 12px}
 body.adi-ui .adi-greeting b{font-size:17px}
 body.adi-ui .adi-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){body.adi-ui *{transition:none!important;animation:none!important}}
/* Abilities (S11) */


body.adi-ui .adi-ability-level{margin-inline-start:auto;display:grid;place-items:center;min-width:44px;height:44px;border-radius:12px;background:var(--adi-nav);color:var(--g-content);font-weight:900;font-size:18px}

body.adi-ui .adi-recent{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
body.adi-ui .adi-recent li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--g-content);border:1px solid var(--adi-line)}
body.adi-ui .adi-recent small{color:var(--adi-muted)}
/* Parent header (P01–P10): selected child,review queue,tab badges */
body.adi-ui span.adi-avatar{cursor:default}
body.adi-ui .adi-child,body.adi-ui .adi-child-name{font:inherit;font-weight:900;color:var(--adi-nav);font-size:16px}
body.adi-ui .adi-child{min-height:44px;padding:4px 10px;border-radius:12px;border:2px solid var(--adi-line);background:var(--adi-cream)}
body.adi-ui .adi-review{position:relative}body.adi-ui .adi-review.has{background:var(--adi-pending);border-color:#5a3a00}
body.adi-ui .adi-tab .adi-badge{position:absolute;top:4px;right:6px}

/* ---------- Inner pages in the Adi Life look (document 05 §23) ----------
   The views keep their markup; inside body.adi-ui the shared pieces take the new tokens: cream panels,navy text,gold
   accents,a bulky green primary action and blue secondary actions. The old purple theme variables point at the tokens. */

body.adi-ui .intro{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:6px 0 18px}
body.adi-ui .intro h1{font-size:clamp(22px,2.4vw,28px);font-weight:900;color:var(--adi-nav);margin:0 0 4px;line-height:1.5}
body.adi-ui .intro p{color:var(--adi-muted);font-size:15px;margin:0;max-width:760px}
body.adi-ui .intro .badge{display:none}
body.adi-ui .section-head,body.adi-ui h3.section-head{color:var(--adi-nav);font-weight:900;font-size:18px;margin:22px 0 10px}
body.adi-ui .card,body.adi-ui .mission,body.adi-ui .lesson,body.adi-ui .daily-checklist,body.adi-ui .tiles>.card{background:var(--adi-cream);border:2px solid var(--adi-line);border-radius:var(--adi-r-panel);box-shadow:0 8px 22px #123e750f;color:var(--adi-ink)}
body.adi-ui .card h2,body.adi-ui .card h3,body.adi-ui .mission h4{color:var(--adi-nav)}
body.adi-ui .caption,body.adi-ui small{color:var(--adi-muted)}
body.adi-ui .btn{font:inherit;font-weight:800;border-radius:var(--adi-r-btn);min-height:44px;padding:10px 18px;border:2px solid var(--g-indigo-deep);background:linear-gradient(180deg,var(--g-accent),var(--adi-nav));color:var(--g-content);box-shadow:0 3px 0 var(--g-indigo-deep)}
body.adi-ui .btn:hover{filter:brightness(1.06)}
body.adi-ui .btn.green{background:linear-gradient(180deg,#2FB24B,var(--adi-green));border-color:var(--adi-green-2);box-shadow:0 4px 0 var(--adi-green-2);color:var(--g-content);font-size:17px}
body.adi-ui .btn.secondary{background:var(--g-content);color:var(--adi-nav);border-color:var(--g-accent-line);box-shadow:0 2px 0 var(--g-accent-line)}
body.adi-ui .btn.red{background:linear-gradient(180deg,#CF4A5E,var(--adi-error));border-color:#8f2a3a;box-shadow:0 3px 0 #8f2a3a;color:var(--g-content)}
body.adi-ui .btn.small{min-height:40px;padding:6px 12px;font-size:14px}
body.adi-ui .btn[disabled]{filter:grayscale(.4);opacity:.6;box-shadow:none}
body.adi-ui .link,body.adi-ui .mini{color:#1F5FA8;font-weight:800}
body.adi-ui .badge{background:var(--g-accent-soft);color:var(--adi-nav);border-radius:999px;font-weight:800}
body.adi-ui .badge.green{background:var(--g-good-bg);color:var(--adi-success)}body.adi-ui .badge.gold{background:var(--g-amber-bg);color:var(--adi-amber)}
body.adi-ui .notice{background:var(--g-accent-soft);border:2px solid #CFE3F3;color:var(--adi-ink);border-radius:16px}
body.adi-ui .notice.green{background:var(--g-good-bg);border-color:var(--g-good-line)}
body.adi-ui .chip{border:2px solid var(--adi-line);background:var(--g-content);color:var(--adi-nav);font-weight:800;border-radius:999px;min-height:40px}
body.adi-ui .chip.on{background:var(--adi-nav);border-color:var(--adi-nav);color:var(--g-content)}
body.adi-ui label{color:var(--adi-ink);font-weight:700}
body.adi-ui input:not([type=checkbox]):not([type=radio]),body.adi-ui select,body.adi-ui textarea{border:2px solid #D8E1EE;border-radius:14px;background:var(--g-content);color:var(--adi-ink);min-height:44px;font:inherit}
body.adi-ui input:focus,body.adi-ui select:focus,body.adi-ui textarea:focus{outline:3px solid #2E91D055;border-color:var(--adi-sky)}
body.adi-ui .ic.art{display:inline-grid;place-items:center;width:44px;height:44px;background:none}
body.adi-ui .ic.art img{width:40px;height:40px;object-fit:contain}
body.adi-ui .mi{background:var(--g-content);border-radius:14px}
body.adi-ui .tiles strong{color:var(--adi-nav)}
body.adi-ui .hero-mini{background:linear-gradient(90deg,var(--g-accent-soft),var(--g-ivory));border:2px solid var(--adi-line);border-radius:var(--adi-r-panel)}
body.adi-ui .line{background:var(--g-line-soft);border-radius:999px}body.adi-ui .line i{background:linear-gradient(90deg,#5CC8FF,var(--adi-sky));border-radius:999px}
body.adi-ui .daily-progress-track{background:var(--g-line-soft)}body.adi-ui .daily-progress-track i{background:linear-gradient(90deg,#7BD88F,#2FB24B)}body.adi-ui .daily-progress-track strong{color:#0f4d22}
body.adi-ui .daily-task{background:var(--g-content);border:2px solid var(--g-line-soft);border-radius:16px}
body.adi-ui .daily-task.is-done{background:var(--g-good-bg);border-color:var(--g-good-line)}
body.adi-ui .daily-task.is-waiting{background:var(--adi-pending-bg);border-color:var(--g-amber-line)}
body.adi-ui .task-check{border-color:var(--g-accent-line);border-radius:12px}body.adi-ui .task-check.checked{background:var(--adi-success);border-color:var(--adi-success)}

body.adi-ui .chapter{background:var(--g-content);border:1px solid var(--g-line-soft);border-radius:14px}

/* Empty states (adiEmpty): art above a short centred line. The window rules for .modal live in game-ui.css (gv skin). */
body.adi-ui .empty{color:var(--adi-muted)}
body.adi-ui .adi-empty-state,.adi-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px}
.adi-empty-state img{width:min(240px,60vw);height:auto}
.adi-empty-state p{margin:0;color:var(--adi-muted,var(--g-muted));font-weight:700;max-width:520px}
body.adi-ui .adi-avatar{flex:0 0 auto}
/* Session and result modals sit above the navigation (the phone bar included). */
body.adi-ui .modal-wrap{z-index:60;background:#0b2d5799}
body.adi-ui .option{background:var(--g-content);border:2px solid #D8E1EE;border-radius:18px;color:var(--adi-nav);box-shadow:0 4px 0 var(--g-accent-line);font-weight:900}
body.adi-ui .option:hover{border-color:var(--adi-sky)}
body.adi-ui .option.selected,body.adi-ui .option.correct{background:var(--g-good-bg);border-color:var(--adi-success);color:#0f4d22;box-shadow:0 4px 0 var(--g-good-line)}
body.adi-ui .option.incorrect{background:var(--g-bad-bg);border-color:var(--adi-error);color:#7a1f2e;box-shadow:0 4px 0 var(--g-bad-line)}


/* ---------- School staff panel (document 05: panels use the brand tokens,not the lobby art) ---------- */
body.school-app{background:linear-gradient(180deg,var(--g-accent-soft) 0,#F4F8FC 280px)!important;color:var(--g-ink)}
body.school-app #sidebar{background:linear-gradient(180deg,var(--g-indigo),var(--g-indigo-deep));border:0;color:var(--g-content);box-shadow:-6px 0 24px #0b2d5733}
body.school-app #sidebar .tag,body.school-app .nav-title{color:#A9C3E6}
body.school-app #sidebar nav button,body.school-app .nav-groups button{color:var(--g-accent-soft);background:none;border-radius:14px}
body.school-app #sidebar nav button:hover{background:#ffffff14}
body.school-app #sidebar nav button.active,body.school-app .nav-groups button.active{background:var(--g-ivory);color:var(--g-indigo);box-shadow:0 0 0 3px #e8b74255}
body.school-app #sidebar .ic svg{stroke:currentColor}
body.school-app #sidebar .login-exit{background:#ffffff14;color:var(--g-content);border:1px solid #ffffff33}
body.school-app #sidebar .aside-end{background:#ffffff10;border:1px solid #ffffff22;color:#DCE7F5}
body.school-app #sidebar .aside-end b{color:var(--g-gold)}
body.school-app .card,body.school-app .tiles>.card{background:var(--g-content);border:2px solid var(--g-accent-soft);border-radius:20px;box-shadow:0 6px 18px #123e750d}
body.school-app h1,body.school-app h2,body.school-app h3{color:var(--g-indigo)}
body.school-app .btn{border-radius:16px;font-weight:800;border:2px solid var(--g-indigo-deep);background:linear-gradient(180deg,var(--g-accent),var(--g-indigo));color:var(--g-content);box-shadow:0 3px 0 var(--g-indigo-deep)}
body.school-app .btn.green{background:linear-gradient(180deg,#2FB24B,var(--g-green));border-color:var(--g-green-edge);box-shadow:0 3px 0 var(--g-green-edge);color:var(--g-content)}
body.school-app .btn.secondary{background:var(--g-content);color:var(--g-indigo);border-color:var(--g-accent-line);box-shadow:0 2px 0 var(--g-accent-line)}
body.school-app .btn.red{background:linear-gradient(180deg,#CF4A5E,var(--g-bad));border-color:#8f2a3a;box-shadow:0 3px 0 #8f2a3a}
body.school-app .chip{border:2px solid #DCE5F0;background:var(--g-content);color:var(--g-indigo);font-weight:800}
body.school-app .chip.on{background:var(--g-indigo);border-color:var(--g-indigo);color:var(--g-content)}
body.school-app input:not([type=checkbox]):not([type=radio]),body.school-app select,body.school-app textarea{border:2px solid #D8E1EE;border-radius:14px;background:var(--g-content)}
body.school-app input:focus,body.school-app select:focus,body.school-app textarea:focus{outline:3px solid #2E91D055;border-color:var(--g-sky)}
body.school-app table th{color:var(--g-muted)}body.school-app table tr{border-color:var(--g-accent-soft)}
body.school-app .tiles strong{color:var(--g-indigo)}
body.school-app .badge{background:var(--g-accent-soft);color:var(--g-indigo)}
body.school-app .modal{border:3px solid var(--g-gold);border-radius:24px}
@media (max-width:767px){body.school-app #sidebar{border-radius:20px 20px 0 0}}
/* Result rewards (gained / waiting for review) and exam pre-start facts */
.reward-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.reward-summary>div{background:var(--g-good-bg);border:2px solid var(--g-good-line);border-radius:16px;padding:12px 14px}
.reward-summary>div.waiting{background:var(--adi-pending-bg);border-color:var(--g-amber-line);color:var(--adi-pending)}
.reward-summary b{display:block;color:var(--g-indigo);margin-bottom:6px}.reward-summary ul{margin:0;padding-inline-start:18px;line-height:2}
.start-facts{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.start-facts li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--g-content);border:1px solid var(--g-line-soft)}
/* Parent header on phones: the child and level on one line,the child's coins and the actions on the next. */
@media (max-width:767px){
 body.adi-ui.parent-mode .top{flex-wrap:wrap}
 body.adi-ui.parent-mode .top .crumb,body.adi-ui.parent-mode .top .stats{flex:1 1 100%;justify-content:space-between}
 body.adi-ui .adi-child{max-width:150px;font-size:14px}
}

/* ---------- shop (S18) ---------- */
body.adi-ui .adi-avatar.framed{position:relative;border:0;background:none;overflow:visible}
body.adi-ui .adi-avatar.framed>img:not(.adi-avatar-frame){width:62%;height:62%;border-radius:50%;object-fit:cover}
body.adi-ui .adi-avatar-frame{position:absolute;inset:-14%;width:128%!important;height:128%!important;object-fit:contain;pointer-events:none}
body.adi-ui .adi-avatar.xl{width:150px;height:150px;margin:0 auto 10px;display:grid}

body.adi-ui .shop-detail{text-align:center}

/* ---------- clan (S14) ---------- */
body.adi-ui .clan-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
body.adi-ui .clan-head>img{width:88px;height:88px;object-fit:contain}
body.adi-ui .clan-head h2{margin:6px 0 2px}
body.adi-ui .clan-actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

body.adi-ui .clan-emblems{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
body.adi-ui .clan-emblems button{padding:4px;border:2px solid var(--adi-line);border-radius:14px;background:var(--g-content);cursor:pointer}
body.adi-ui .clan-emblems button.on{border-color:var(--adi-gold);box-shadow:0 0 0 3px #f2c14e55}
body.adi-ui .clan-emblems img{width:56px;height:56px;object-fit:contain}

body.school-app .clan-emblems{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}body.school-app .clan-emblems button{padding:4px;border:2px solid #DCE5F0;border-radius:14px;background:var(--g-content);cursor:pointer}body.school-app .clan-emblems button.on{border-color:var(--g-gold);box-shadow:0 0 0 3px #e8b74255}