/* ============================================================
   shell.css — shared PV brand shell for AI Act Practicum
   Lifted verbatim from the approved Lexicon/Marketing mockup
   (claude/mockup-lexicon-part1-ui_2026-09-02.html).
   Contains ONLY the shared pieces: palette, Calibri stack,
   responsive .phone-vp frame, indigo sub-header + big back,
   home tiles, generic buttons, toast. No dark mode.
   Per-screen CSS (flashcard/dictionary/unit renderer/marketing)
   lives in its own small file, NOT here.  Prebuild decision #7.
   ============================================================ */

:root{
  --indigo:#383888; --navy:#302050; --camel:#c8b898; --grey:#d0c8c0;
  --indigo-2:#5b5ba6; --indigo-tint:#eceaf4; --camel-tint:#f2ecdf;
  --ink:#141317; --ink-2:#4a4954; --ink-3:#8a8893;
  --paper:#ffffff; --paper-2:#f7f6fb; --line:#e6e4ee; --line-2:#d2cfe0;
  --amber:#9a7b32; --conf:#7a6326; --page:#e3e1ec;
  --ok:#2e7d52; --okbg:#e9f3ed; --no:#b23b3b; --nobg:#f8ecec;
  --sans:'Calibri','Carlito','Segoe UI',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--page)}
.app{min-height:100vh;background:var(--page);display:flex;justify-content:center}
.phone-vp{
  width:100%;max-width:460px;background:var(--paper);position:relative;
  height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;box-shadow:0 0 44px rgba(48,32,80,.16);
}
.stack{position:relative;flex:1;min-height:0}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper)}
.scr[hidden]{display:none}
.scrbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
button{font-family:inherit}
[hidden]{display:none!important}

/* ---------- HOME ---------- */
.brand{padding:.9rem 1.4rem 1rem;border-bottom:1px solid var(--line)}
.brand__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.logo{height:42px;width:auto;display:block}
.who{font-size:.68rem;color:var(--ink-3);text-align:right;line-height:1.35;padding-top:.2rem}
.who b{color:var(--indigo);font-weight:600;display:block;font-size:.7rem}
.brand__sub{margin-top:.7rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);font-weight:700}
.brand__sub span{color:var(--ink-3);font-weight:600}
.hello{padding:.95rem 1.4rem .1rem}
.hello h2{font-size:1.42rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.hello p{margin:.25rem 0 0;font-size:.92rem;color:var(--ink-2)}
.tiles{flex:1;min-height:0;padding:.7rem 1.4rem .4rem;display:flex;flex-direction:column;gap:.65rem}
.tile{display:flex;align-items:center;gap:.95rem;text-align:left;width:100%;flex:1;min-height:0;
  border:1px solid var(--line-2);border-radius:15px;background:var(--paper);
  padding:.8rem 1.05rem;cursor:pointer;position:relative;overflow:hidden;transition:.16s;font-family:inherit}
.tile:hover{border-color:var(--indigo);box-shadow:0 10px 22px -16px rgba(56,56,136,.5)}
.tile:active{transform:scale(.992)}
.tile__mark{flex:0 0 auto;width:50px;height:50px;border-radius:12px;display:grid;place-items:center}
.tile__mark svg{width:28px;height:28px;display:block}
.tile--1 .tile__mark{background:var(--indigo-tint)}
.tile--2 .tile__mark{background:var(--camel-tint)}
.tile--3 .tile__mark{background:var(--camel-tint)}
.tile__body{flex:1;min-width:0}
.tile__row{display:flex;align-items:baseline;gap:.55rem}
.tile__ttl{font-size:1.22rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tile__kick{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);font-weight:700}
.tile--2 .tile__kick{color:var(--amber)}
.tile__desc{margin:.3rem 0 .45rem;font-size:.88rem;color:var(--ink-2);line-height:1.42}
.tile__go{flex:0 0 auto;align-self:center;color:var(--line-2);font-size:1.5rem;transition:.16s}
.tile:hover .tile__go{color:var(--indigo);transform:translateX(2px)}
.tprog .bar{height:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.tprog .bar i{display:block;height:100%;width:14.3%;background:var(--camel);border-radius:4px}
.tprog .lbl{margin-top:.32rem;font-size:.72rem;color:var(--ink-3);font-weight:600;display:flex;justify-content:space-between}
.tprog .lbl b{color:var(--indigo);font-weight:700}
.onlyyou{display:flex;align-items:center;gap:.6rem;margin:.35rem .2rem .05rem;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.onlyyou::before,.onlyyou::after{content:'';flex:1;height:1px;background:var(--line)}
.tile--3{border-color:var(--navy);border-style:dashed;background:linear-gradient(180deg,#fbfaf6,#f7f4ec)}
.tile--3 .tile__kick--conf{color:var(--conf)}
/* "coming next" state — a tile not yet wired (e.g. Lexicon in Step 1) */
.tile--soon{cursor:default;opacity:.72}
.tile--soon:hover{border-color:var(--line-2);box-shadow:none}
.tile--soon:active{transform:none}
.tile--soon .tile__go{display:none}
.tile__soon{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  border:1px solid var(--line-2);border-radius:20px;padding:.14rem .55rem;background:var(--paper-2)}
.appfoot-h{flex:0 0 auto;padding:.7rem 1.4rem 1rem;text-align:center;border-top:1px solid var(--line)}
.reflink{display:inline-block;font-size:.82rem;font-weight:600;color:var(--indigo);cursor:pointer;background:none;border:none}
.reflink:hover{text-decoration:underline}
.disc{margin-top:.45rem;font-size:.66rem;color:var(--ink-3);line-height:1.5}
.disc b{color:var(--ink-2);font-weight:600}

/* ---------- SUB-HEADER (indigo) — every non-home screen ---------- */
.hdr{flex:0 0 auto;background:var(--indigo);color:#fff;padding:.7rem 1.1rem .85rem;position:relative}
.hdr .back{background:rgba(255,255,255,.16);border:none;color:#fff;font-size:.88rem;font-weight:800;border-radius:9px;padding:.5rem .85rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.hdr .back:hover{background:rgba(255,255,255,.28)}
.hdr .kick{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;opacity:.72;font-weight:700;margin-top:.55rem}
.hdr .ttl{font-size:1.24rem;font-weight:800;margin-top:.15rem;letter-spacing:-.01em}
.hdr .meta{font-size:.78rem;opacity:.82;margin-top:.12rem}

/* ---------- TOAST — app-wide ---------- */
.toast{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;background:var(--navy);color:#fff;font-size:.82rem;font-weight:600;text-align:center;border-radius:11px;padding:.7rem .85rem;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20;line-height:1.4}
.toast.show{opacity:1}

/* ---------- responsive: fill on phone, centre card on desktop ---------- */
@media(min-width:461px){
  .app{align-items:center;padding:1.4rem 0}
  .phone-vp{height:min(880px,92vh);border-radius:26px}
}