/* THE PLAYER PROFILE (user 2026-11-02): one player's character, cores, machines and containers, drawn with the game's own icons, on account.css's tokens.
   The layout follows the game's consoles: live status first, what needs a human before everything else, then the detail. */
.sheet-page{display:block; padding:0 max(16px, env(safe-area-inset-left, 0px)) 64px max(16px, env(safe-area-inset-right, 0px))}
.sheet-page main{margin:48px auto 0}
#sheet{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:32px}

.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding-block:22px 16px; border-bottom:1px solid var(--line)}
.top .brand{margin:0}
.sync{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim)}
.sync button{font:inherit; color:var(--gold-pale); background:none; border:1px solid var(--line); padding:5px 10px; cursor:pointer; letter-spacing:0; width:auto; margin:0}
.sync button:hover{background:var(--panel-2); color:var(--gold)}
.note{margin:0; padding:10px 14px; font-size:14px; color:var(--gold-pale); border:1px solid var(--line-gold); background:var(--panel)}

.who{display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,340px); gap:20px 40px; align-items:end}
.who h1{font-size:clamp(38px,7vw,64px); letter-spacing:.02em; margin:0}
.role{margin:6px 0 0; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim)}
.vitals{display:grid; gap:9px}
.vital{display:grid; grid-template-columns:72px minmax(0,1fr) 42px; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim)}
.vital b{font-weight:500; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0}
.stats div{background:var(--panel); padding:13px 16px}
.stats dt{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap}
.stats dd{margin:3px 0 0; font-family:'Chakra Petch',system-ui,sans-serif; font-size:28px; line-height:1.15; font-variant-numeric:tabular-nums}
.stats dd small{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-dim)}
.stats .warn dd{color:var(--danger)}

section > h2, .core h3{font-family:'Chakra Petch',system-ui,sans-serif; font-weight:600}
section > h2{margin:0 0 14px; font-size:21px; letter-spacing:.05em; text-transform:uppercase}
.core h3{margin:0 0 12px; font-size:15px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim)}

/* the alert strip: everything that needs a human, first */
.needs{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.needs li{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; background:var(--panel); border:1px solid rgba(255,122,107,.35); padding:8px 14px 8px 8px}
.needs p{margin:0; min-width:0}
.needs b{font-weight:500}
.needs span{display:block; font-size:14px; color:var(--ink-dim)}

/* the icon tile: the game's own art, or its tinted initials */
.art{display:block; position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:var(--panel-2)}
.art img{display:block; width:100%; height:100%; object-fit:cover}
.art.glyph{display:grid; place-items:center; color:#fff; background:#73738a; font-family:'Chakra Petch',system-ui,sans-serif; font-size:clamp(14px,34cqw,28px); container-type:inline-size}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:12px 10px; margin:0; padding:0; list-style:none}
.tile{min-width:0; font-size:12px; line-height:1.25; color:var(--ink-dim)}
.tile .frame{position:relative; display:block; border:1px solid var(--line)}
.tile .qty{position:absolute; right:0; bottom:0; padding:1px 6px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); background:rgba(5,8,11,.86); font-variant-numeric:tabular-nums}
.tile .name{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:6px; overflow-wrap:anywhere}
.tile .bar{margin-top:4px}
.tile.small{font-size:11px}

.bar{display:block; height:6px; background:rgba(150,172,182,.16); overflow:hidden}
.bar i{display:block; height:100%; background:var(--good)}
.bar.warn i{background:var(--gold)}
.bar.bad i{background:var(--danger)}
.pct{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums}
.pct.warn{color:var(--gold)}
.pct.bad{color:var(--danger)}

.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase; border:1px solid currentColor}
.badge{display:inline-block; width:14px; height:14px; fill:currentColor; flex:none}
.pill.working{color:var(--good)}
.pill.quiet{color:var(--ink-dim)}
.pill.alert{color:var(--danger)}

.hotbar{display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:8px; margin:0 0 18px; padding:0 0 18px; list-style:none; border-bottom:1px solid var(--line)}
.hotbar li{position:relative; min-width:0}
.hotbar .key{position:absolute; left:0; top:0; z-index:1; padding:0 6px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); background:rgba(5,8,11,.86)}
.hotbar .frame{display:block; border:1px solid var(--line-gold)}
.hotbar .empty{display:block; aspect-ratio:1; border:1px dashed var(--line)}

/* a core */
.core{border:1px solid var(--line); background:var(--panel)}
.core > summary{display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 18px; cursor:pointer; list-style:none}
.core > summary::-webkit-details-marker{display:none}
.core > summary:focus-visible, .box > summary:focus-visible, .group > summary:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.core-name{min-width:0}
.core-name h2{margin:0; font-family:'Chakra Petch',system-ui,sans-serif; font-weight:600; font-size:25px; line-height:1.15}
.core-name p{margin:2px 0 8px; font-size:14px; color:var(--ink-dim)}
.core-name .bar{max-width:320px}
.core-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim); text-align:right; white-space:nowrap}
.core-count b{color:var(--ink); font-weight:500}
.core-body{display:grid; gap:26px; padding:18px; border-top:1px solid var(--line); background:var(--void)}
.core-body > div{min-width:0}

.machines{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:10px; margin:0; padding:0; list-style:none}
.machine{display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; background:var(--panel); border:1px solid var(--line); padding:10px}
.machine.alert{border-color:rgba(255,122,107,.35)}
.machine h4{margin:0 0 5px; font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:15px; font-weight:500; line-height:1.25}
.machine p{margin:6px 0 0; font-size:14px; color:var(--ink-dim)}
.holds{grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); margin-top:9px}
.via{display:flex; align-items:center; gap:8px; margin-top:7px; font-size:13px; color:var(--ink-dim); min-width:0}
.via .art{width:30px; flex:none}
.via span{min-width:0}
.via b{font-weight:500; color:var(--ink)}
.via .wrap{min-width:0; flex:1}

.box, .group{border:1px solid var(--line); background:var(--panel)}
.boxes, .groups{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.box > summary{display:grid; grid-template-columns:48px minmax(0,1fr) minmax(0,auto); align-items:center; gap:12px; padding:8px 12px 8px 8px; cursor:pointer; list-style:none}
.box > summary::-webkit-details-marker, .group > summary::-webkit-details-marker{display:none}
.box-name{min-width:0}
.box-name b{display:block; font-weight:500; line-height:1.25}
.box-name span{font-size:13px; color:var(--ink-dim)}
.peek{display:flex; gap:3px; min-width:0; overflow:hidden; justify-content:flex-end}
.peek .art{width:30px; flex:none}
.peek em{align-self:center; margin-left:4px; font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-faint)}
.box[open] .peek{display:none}
.box .tiles{padding:12px; border-top:1px solid var(--line)}

.groups{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); align-items:start}
.group > summary{display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:center; padding:8px; cursor:pointer; list-style:none}
.group .g-name{min-width:0; font-size:14px; line-height:1.25}
.group .g-name b{display:block; font-weight:500}
.group .g-name span{font-size:12px; color:var(--ink-dim)}
.group .g-name .bar{margin-top:5px}
.each{display:grid; gap:5px; margin:0; padding:10px 12px 12px; list-style:none; border-top:1px solid var(--line)}
.each li{display:grid; grid-template-columns:minmax(0,1fr) 72px 44px; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim)}
.each li > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.each .pct{text-align:right}

/* the installer (user 2026-11-03): its files, each with its own link, then how to run it */
.sync .jump{color:var(--gold-pale); text-decoration:none; border:1px solid var(--line); padding:5px 10px}
.sync .jump:hover{background:var(--panel-2); color:var(--gold)}
.download{border:1px solid var(--line-gold); background:var(--panel); padding:18px; scroll-margin-top:16px}
.download > .more:first-of-type{margin-top:0}
.download code{font-family:'IBM Plex Mono',monospace; font-size:.92em; color:var(--ink)}
.files{display:grid; gap:1px; margin:16px 0 0; padding:0; list-style:none; background:var(--line); border:1px solid var(--line)}
.files li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:16px; background:var(--void); padding:8px 8px 8px 14px}
.files li code{overflow-wrap:anywhere}
.files .size{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-dim); font-variant-numeric:tabular-nums; text-align:right}
.files .get{font-family:'Chakra Petch',system-ui,sans-serif; font-weight:600; font-size:15px; letter-spacing:.06em; color:#10151a; background:var(--gold); padding:8px 14px; text-decoration:none}
.files .get:hover{background:var(--gold-pale)}
.files .get:focus-visible, .sync .jump:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.steps{margin:18px 0 0; padding-left:22px; display:grid; gap:4px}
.sums{margin-top:14px; font-size:14px; color:var(--ink-dim)}
.sums summary{cursor:pointer; color:var(--gold-pale)}
.sums pre{margin:10px 0 0; padding:10px 12px; overflow-x:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); background:var(--void); border:1px solid var(--line)}

/* a long base stays quick: blocks below the first screen wait until they scroll near */
.core-body > div{content-visibility:auto; contain-intrinsic-size:auto none auto 260px}

@media (max-width:640px){
  .who{grid-template-columns:minmax(0,1fr)}
  .needs li{grid-template-columns:44px minmax(0,1fr)}
  .needs .pill{grid-column:2; justify-self:start}
  .core > summary{grid-template-columns:56px minmax(0,1fr)}
  .core-count{grid-column:1 / -1; text-align:left; white-space:normal}
  .machines{grid-template-columns:minmax(0,1fr)}
  .box > summary{grid-template-columns:44px minmax(0,1fr)}
  .peek{grid-column:1 / -1; justify-content:flex-start}
  .files li{grid-template-columns:minmax(0,1fr) auto; gap:6px 12px}
  .files .size{grid-column:1; grid-row:2; text-align:left}
  .files .get{grid-column:2; grid-row:1 / span 2}
}