/* Merged prototype: one DOM, skins on top. Skins set tokens and a few switches; they never change page structure.
   Contract a skin may set: colours, type weights, radius, rule width, --nav (top|rail), --grid (drawn or none), textures. */
:root{--nav:top;--radius:10px;--rulew:1px;--accent:var(--atlas-coral);--bg:#fff;--surface:#fff;--field:var(--ink-06);--rule:var(--ink-15);--navbg:#fff;--navink:var(--ink);--navactive:var(--ink);--head-w:500;--body-w:400;--tex:none}
body{background-color:var(--bg);background-image:var(--tex);background-size:5mm 5mm;font-weight:var(--body-w)}
h1,h2,h3{font-weight:var(--head-w)}

/* ---------- skins ---------- */
[data-skin="claro"]{--head-w:300;--body-w:300;--radius:0;--rule:var(--ink-15);--navactive:var(--ink)}
[data-skin="cor"]{--accent:var(--atlas-teal);--radius:14px;--navbg:var(--t2-navy);--navink:#fff;--navactive:#fff;--field:#F3F6F8;--num:var(--atlas-coral);--alg:var(--atlas-physics);--geo:var(--atlas-teal);--dad:var(--atlas-orange);--alem:var(--atlas-purple)}
[data-skin="tinta"]{--accent:var(--atlas-purple);--radius:0;--rulew:2px;--rule:var(--ink);--tex:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);--surface:#fff;--head-w:700}
[data-skin="tinta"] .panel,[data-skin="tinta"] .card{background:#fff}

/* ---------- shell and navigation: one nav element, placed by --nav ---------- */
.shell{display:grid;min-height:100vh;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.nav{background:var(--navbg);color:var(--navink);border-bottom:var(--rulew) solid var(--rule)}
.nav .in{display:flex;align-items:center;gap:1.25rem;min-height:64px;padding:0 var(--gutter);max-width:var(--maxw);margin:0 auto;width:100%}
.nav .logo img{height:28px;width:auto;display:block}
.nav ul{list-style:none;display:flex;gap:.25rem;margin-left:auto}
.nav li a{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:var(--radius);color:inherit;font-weight:500}
.nav li a[aria-current]{background:var(--navactive);color:var(--navbg)}
.nav .acct{display:flex;align-items:center;gap:.75rem;font-size:.85rem;opacity:.9}
.nav .acct select{font:inherit;font-size:.8rem;padding:.25rem .4rem;border-radius:6px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);min-height:32px}
.nav .logo-w{display:none}
[data-nav="rail"] .shell{grid-template-rows:minmax(0,1fr);grid-template-columns:224px minmax(0,1fr)}
[data-nav="rail"] .nav{border-bottom:0;border-right:var(--rulew) solid var(--rule);position:sticky;top:0;height:100vh}
[data-nav="rail"] .nav .in{flex-direction:column;align-items:stretch;padding:1.25rem 1rem;height:100%;gap:.5rem;max-width:none}
[data-nav="rail"] .nav ul{flex-direction:column;margin:1.25rem 0 0}
[data-nav="rail"] .nav li a{padding:.7rem .8rem}
[data-nav="rail"] .nav .acct{margin-top:auto;flex-direction:column;align-items:flex-start}
[data-nav="rail"][data-skin="cor"] .nav .logo .logo-b{display:none} [data-nav="rail"][data-skin="cor"] .nav .logo .logo-w{display:block}
[data-nav="rail"] .nav .logo img{height:auto;width:100%;max-width:172px}
main{padding:2rem 0 4rem;min-width:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);min-width:0}
.narrow{max-width:720px}
footer{padding:1.5rem 0;font-size:.85rem;color:var(--ink-70);border-top:var(--rulew) solid var(--rule)}
footer img{height:22px}
/* phone: bottom tabs in every skin, whatever --nav says */
@media (max-width:760px){
  [data-nav] .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  [data-nav] .nav{position:static;height:auto;border:0;border-bottom:var(--rulew) solid var(--rule)}
  [data-nav] .nav .in{flex-direction:row;align-items:center;min-height:56px;padding:0 var(--gutter);gap:.75rem}
  [data-nav] .nav ul{position:fixed;left:0;right:0;bottom:0;z-index:9;margin:0;flex-direction:row;background:var(--navbg);border-top:var(--rulew) solid var(--rule);padding:.25rem 0 max(.25rem,env(safe-area-inset-bottom))}
  [data-nav] .nav li{flex:1 1 0;min-width:0}
  [data-nav] .nav li a{flex-direction:column;gap:2px;font-size:.72rem;padding:.4rem 0;border-radius:0;justify-content:center;text-align:center}
  [data-nav] .nav li a[aria-current]{background:none;color:var(--navink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
  [data-nav] .nav .acct{margin-left:auto;flex-direction:row;font-size:.75rem}
  [data-nav] .nav .acct .who{display:none}
  [data-nav] .nav .logo img{height:26px;width:auto;max-width:none}
  main{padding-bottom:5.5rem}
}

/* ---------- components ---------- */
.card,.panel{background:var(--surface);border:var(--rulew) solid var(--rule);border-radius:var(--radius);padding:1.1rem 1.2rem;min-width:0}
.blocks{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.blocks .card.wide{grid-column:1/-1}
.card .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-70);margin-bottom:.3rem}
.btn{border-radius:var(--radius)} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
[data-skin="claro"] .btn.primary,[data-skin="tinta"] .btn.primary{background:var(--ink);border-color:var(--ink)}
.two{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2rem}.two>aside{align-self:start}
@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}}
.list{list-style:none}.list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem;padding:.8rem 0;border-top:var(--rulew) solid var(--rule);align-items:center}
.list li:last-child{border-bottom:var(--rulew) solid var(--rule)}
.list .d{color:var(--ink-70);font-variant-numeric:tabular-nums;min-width:4.5rem}.list .now{color:var(--accent);font-weight:500}
.lead{font-size:1.15rem;color:var(--ink-70);max-width:56ch}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem;font-size:.95rem}.kv dt{color:var(--ink-70)}
.tag{display:inline-block;font-size:.72rem;padding:.1rem .45rem;border:1px solid var(--rule);border-radius:999px;color:var(--ink-70);vertical-align:middle}

/* Atlas: two views of the same cells */
.viewbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:1rem 0}
.seg{display:inline-flex;border:var(--rulew) solid var(--rule);border-radius:var(--radius);overflow:hidden}
.seg button{font:inherit;padding:.45rem .9rem;border:0;background:var(--surface);color:var(--ink);cursor:pointer;min-height:40px}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
[data-skin="cor"] .seg button[aria-pressed=true]{background:var(--accent)}
.atlas .cell{border-radius:var(--radius);border-width:var(--rulew)}
[data-skin="cor"] .atlas .cell{border:0;color:#fff}[data-skin="cor"] .atlas .cell small{color:rgba(255,255,255,.85)}
[data-skin="cor"] .atlas .k1{background:var(--num)}[data-skin="cor"] .atlas .k2{background:var(--alg);color:var(--ink)}[data-skin="cor"] .atlas .k2 small{color:var(--ink-70)}[data-skin="cor"] .atlas .k3{background:var(--geo)}[data-skin="cor"] .atlas .k4{background:var(--dad)}[data-skin="cor"] .atlas .k5{background:var(--alem)}
[data-skin="cor"] .atlas .cell.empty{opacity:.35}[data-skin="cor"] .atlas .cell.live{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
[data-skin="tinta"] .atlas .cell.live{background:var(--ink);color:#fff}[data-skin="tinta"] .atlas .cell.live small{color:#ccc}
.shelf{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));margin-top:.5rem}
.shelf .cell{display:block;min-height:72px;padding:.5rem .6rem;border:var(--rulew) solid var(--rule);border-radius:var(--radius);color:var(--ink);font-size:.85rem;background:var(--surface)}
.shelf .cell small{display:block;color:var(--ink-45)}
[data-skin="cor"] .shelf .cell{background:var(--alem);color:#fff;border:0}[data-skin="cor"] .shelf .cell small{color:rgba(255,255,255,.85)}
.compact{display:none}.atlas-view[data-view=compact] .compact{display:block}.atlas-view[data-view=compact] .detailed{display:none}
.years{display:flex;gap:.35rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.years button{font:inherit;min-height:40px;padding:.4rem .8rem;border:var(--rulew) solid var(--rule);border-radius:var(--radius);background:var(--surface);color:var(--ink);cursor:pointer}
.years button[aria-pressed=true]{background:var(--ink);color:#fff}[data-skin="cor"] .years button[aria-pressed=true]{background:var(--accent)}
.domains{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.domains .card{min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.domains .card h3{font-size:1.2rem}
.neigh{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink-70);margin-top:1rem}

/* skill list on the map page */
.path li{grid-template-columns:auto minmax(0,1fr) auto auto}
.path .st{font-size:1.4rem;line-height:1;width:1.4rem;text-align:center}
.chip.pronto{border-color:var(--atlas-teal)}

/* streak panel */
.streak{display:flex;gap:.4rem;align-items:center;margin:.5rem 0 1rem}
.streak i{display:block;width:2.2rem;height:.55rem;border-radius:999px;background:var(--ink-15)}
.streak i.on{background:var(--atlas-teal)}
.streak span{font-size:.85rem;color:var(--ink-70);margin-left:.4rem}
.panel .stmt{font-size:1.2rem;margin:.4rem 0 .9rem}
.panel .num{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-70)}
.panel .num b{font-size:1.4rem;letter-spacing:0;text-transform:none;color:var(--ink);margin-right:.3rem}
.panel .ans{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.panel .ans input[type=text]{max-width:12ch}
.panel .fb{display:none;margin-top:.9rem;padding:.7rem .9rem;border-radius:var(--radius)}
.panel[data-state=ok] .fb.ok{display:block;background:#E6F4EC;color:var(--ok)}
.panel[data-state=err] .fb.err{display:block;background:#FBE9EC;color:var(--err)}
.panel .hint{display:none;margin-top:.7rem;padding:.6rem .8rem;background:var(--field);border-radius:var(--radius)}.panel .hint.show{display:block}
.panel .steps{display:none;margin-top:.7rem;border-left:3px solid var(--rule);padding-left:.9rem}.panel .steps.show{display:block}.panel .steps li{margin:.35rem 0 .35rem 1.1rem}
.panel .actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.panel .save{font-size:.8rem;color:var(--ink-70);margin-top:.6rem}
.done{text-align:center;padding:2rem 1rem}.done .big{font-size:3rem;line-height:1}
.choices label{border-radius:var(--radius)}
.frac{width:5ch}
/* print page reuses base styles */