/*
 * The planetary registry (#pp-idle): the idle colony's panel over the 3D
 * view, drawn from the owner's registry mockup. js/idle/idle-ui.js opens,
 * closes and fills it; js/idle/idle-views.js and idle-views2.js write the
 * markup; this file draws it.
 *
 * THE LOOK. White text on dark tinted boxes, one accent for the tab in use
 * and the bars, green, amber and red for what a figure is doing, gold for a
 * reward. No box carries a colored border and nothing is shaded with a
 * gradient: separators are white at a few percent, and the world in the
 * world card is painted pixel by pixel from its own texture (idle-ui.js).
 * Every class below is scoped under #pp-idle, so the short names the
 * mockup used cannot reach anything else on the page.
 *
 * WHERE IT STANDS. On a desktop, two columns down the right of the frame:
 * the body's own column (crumb, name, chips, tabs, cards) and the side
 * column (the galaxy, the registry's totals, the resource grid, the colony's
 * stores and the objectives). Closed, the side column keeps only the
 * registry card, which is the button that opens the panel, and the hint
 * under it. Under 1180 px the side column stacks under the body's own. On a
 * phone css/idle-sheet.css, loaded after this file, makes the panel a sheet
 * from the bottom edge.
 *
 * STANDING DOWN. The block stands after every page panel and drawer in
 * index.php, so the sibling rules below take it down under each of them, as
 * css/comms.css does for the ticker; the body's own classes take it down in
 * the 2D field, in a warp, in a paused or held run, in the arcade and in
 * every run. body.pp-idle-off is idle-ui.js's while the colony is switched
 * off in the settings panel.
 */

#pp-idle {
    --pi-panel: #0e1426;
    --pi-well: #151d34;
    --pi-line: rgba(255, 255, 255, 0.07);
    --pi-ink: #ffffff;
    --pi-soft: rgba(255, 255, 255, 0.78);
    --pi-dim: rgba(255, 255, 255, 0.58);
    --pi-faint: rgba(255, 255, 255, 0.4);
    --pi-accent: #8193ff;
    --pi-tint: #2b3362;
    --pi-good: #5ad19a;
    --pi-warn: #e8b75c;
    --pi-bad: #ec7b6e;
    --pi-gold: #f3c96d;
    --pi-cyan: #7fe3ff;
    --pi-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --pi-cm: clamp(360px, 29vw, 540px);
    --pi-cs: clamp(290px, 23vw, 420px);
    --pi-gap: clamp(16px, 2vw, 40px);
    --pi-rm: var(--pp-edge, 24px);
    --pi-w: calc(var(--pi-cm) + var(--pi-gap) + var(--pi-cs) + var(--pi-rm));
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--pi-ink);
}

body:not(.pp-3d) #pp-idle,
#settings-panel.active ~ #pp-idle,
#slide-panel.active ~ #pp-idle,
#apps-panel.active ~ #pp-idle,
#about-panel.active ~ #pp-idle,
.pp-board.show ~ #pp-idle,
#pp-gate.show ~ #pp-idle,
body.pp-warping #pp-idle,
body.pp-paused #pp-idle,
body.pp-held #pp-idle,
body.pp-arcade #pp-idle,
body.pp-run #pp-idle,
body.pp-idle-off #pp-idle,
#pp-idle[hidden],
#pp-idle [hidden] {
    display: none !important;
}

#pp-idle button { font-family: inherit; color: inherit; }
#pp-idle :focus-visible { outline: 2px solid var(--pi-accent); outline-offset: 2px; }

/* ---------------- the two columns ---------------- */

/*
 * Open, under the header and over the band the comms ticker can reach (its
 * 80 px offset, three lines and padding, and 10 clear, the band js/three/
 * scan.js keeps its card out of), and over the field's own readouts down the
 * right (the place card, the score cards, the counters, z 92), which the
 * side column's galaxy card stands in for. Closed, idle-ui.js seats the
 * registry card under whichever of those readouts are up, and the galaxy card
 * stays out of it, since the place card over it names the galaxy. The cards'
 * right edge is the page's own edge (--pp-edge), the one those readouts and
 * the corner rail keep; the 4 px of padding past it hold the focus ring.
 */
#pp-idle .panes {
    position: fixed; z-index: 93; top: calc(var(--pp-head-h, 84px) + 8px); right: calc(var(--pi-rm) - 4px); bottom: calc(var(--pp-band, 0px) + 156px);
    display: grid; grid-template-columns: var(--pi-cm) var(--pi-cs); column-gap: var(--pi-gap); align-items: start;
    overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 24px;
    font-size: clamp(12px, 1.3vh, 14px); line-height: 1.45;
    scrollbar-width: thin; scrollbar-color: #27304c transparent;
}
#pp-idle:not(.open) .panes { grid-template-columns: var(--pi-cs); bottom: auto; overflow: visible; padding-bottom: 0; }
#pp-idle:not(.open) .main, #pp-idle:not(.open) .gal { display: none; }
#pp-idle .main, #pp-idle .side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

#pp-idle .rtop { display: flex; align-items: center; gap: 12px; color: var(--pi-soft); font-size: .93em; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
#pp-idle .crumb { overflow: hidden; text-overflow: ellipsis; }
#pp-idle .crumb b { color: var(--pi-accent); font-weight: 600; }
#pp-idle .cyc { margin-left: auto; font-family: var(--pi-mono); letter-spacing: .06em; text-transform: none; color: var(--pi-dim); }
#pp-idle .xbtn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--pi-panel); color: var(--pi-dim); cursor: pointer; }
#pp-idle .xbtn:hover { color: var(--pi-ink); background: #1a2440; }
#pp-idle h1 { margin: 8px 0 10px; font-size: 2.6em; line-height: 1.1; font-weight: 650; letter-spacing: -.005em; }
#pp-idle .chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pp-idle .chip { padding: 2px 12px; border-radius: 999px; background: var(--pi-tint); color: #fff; font-size: 1.07em; font-weight: 650; }
#pp-idle .status { margin-left: 4px; color: var(--pi-dim); font-size: 1.2em; }
/* The six labels run about 23 of their own em, with 67 px of padding and
   gaps, so their size is the column's width over that, never over 1.1em:
   one row across the column from its narrowest (360 px) up, spread over the
   width it has. */
#pp-idle .tabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2px; margin-top: 16px; border-bottom: 1px solid var(--pi-line); scrollbar-width: none; }
#pp-idle .tabs::-webkit-scrollbar { display: none; }
#pp-idle .tabs button { flex: none; padding: 9px 5px 11px; border: 0; background: none; color: var(--pi-soft); font-size: min(1.1em, calc((var(--pi-cm) - 70px) / 24)); cursor: pointer; white-space: nowrap; }
#pp-idle .tabs button:first-child { padding-left: 2px; }
#pp-idle .tabs button:hover { color: var(--pi-ink); }
#pp-idle .tabs button.on { color: var(--pi-accent); }
#pp-idle .body { display: flex; flex-direction: column; gap: 14px; }

/* ---------------- cards ---------------- */

#pp-idle .card { padding: 18px 20px 20px; border-radius: 16px; background: var(--pi-panel); }
#pp-idle .card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--pi-soft); font-size: .93em; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
#pp-idle .card h2 i { font-size: .95em; }
#pp-idle .card h2 .hr { margin-left: auto; color: var(--pi-faint); font-size: .9em; font-weight: 400; letter-spacing: .02em; text-transform: none; }
#pp-idle .lead { margin: 12px 0 0; color: var(--pi-dim); font-size: .9em; line-height: 1.5; }
#pp-idle .lead.first { margin-top: 0; }

#pp-idle .world-stage { display: flex; justify-content: center; padding: 10px 0 24px; }
#pp-idle .orb { display: block; width: min(220px, 58%); aspect-ratio: 1; }
#pp-idle .bignums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--pi-line); }
#pp-idle .bn { font-size: 2.4em; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
#pp-idle .bl { margin-top: 6px; color: var(--pi-soft); font-size: 1em; letter-spacing: .2em; text-transform: uppercase; }
#pp-idle .kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--pi-line); font-size: 1.2em; }
#pp-idle .bignums + .kv, #pp-idle .kv:first-child { border-top: 0; }
#pp-idle .kv span { color: var(--pi-soft); }
#pp-idle .kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

#pp-idle .bar { height: 6px; margin-top: 8px; border-radius: 6px; overflow: hidden; background: var(--pi-well); }
#pp-idle .bar i { display: block; height: 100%; border-radius: 6px; background: var(--pi-accent); transition: width .3s linear; }
#pp-idle .bar i.g { background: var(--pi-good); }
#pp-idle .bar i.w { background: var(--pi-warn); }
#pp-idle .bar i.b { background: var(--pi-bad); }
#pp-idle .note { margin-top: 8px; color: var(--pi-warn); font-size: .93em; text-align: center; }
#pp-idle .note.bad { color: var(--pi-bad); }

/* ---------------- rows, tiles, buttons ---------------- */

#pp-idle .op, #pp-idle .fl, #pp-idle .city, #pp-idle .q, #pp-idle .ul, #pp-idle .lr, #pp-idle .ev, #pp-idle .dm, #pp-idle .obj, #pp-idle .rrow { border-top: 1px solid var(--pi-line); }
#pp-idle .op:first-child, #pp-idle .fl:first-child, #pp-idle .city:first-child, #pp-idle .q:first-child, #pp-idle .ul:first-child, #pp-idle .lr:first-child, #pp-idle .ev:first-child, #pp-idle .dm:first-child, #pp-idle .obj:first-child, #pp-idle .rrow:first-child { border-top: 0; padding-top: 0; }
#pp-idle .op { padding: 12px 0; }
#pp-idle .opt, #pp-idle .flh { display: flex; align-items: center; gap: 10px; font-size: 1.07em; }
#pp-idle .opt i, #pp-idle .flh i { width: 16px; color: var(--pi-accent); text-align: center; }
#pp-idle .opt .amt, #pp-idle .flh .amt { margin-left: auto; color: var(--pi-dim); font-size: .93em; font-variant-numeric: tabular-nums; }
#pp-idle .opd, #pp-idle .fld { margin-top: 4px; color: var(--pi-dim); font-size: .93em; }
#pp-idle .opd b.w { color: var(--pi-warn); font-weight: 600; }
#pp-idle .opbar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 10px; color: var(--pi-faint); font-size: .86em; }
#pp-idle .opbar .bar { margin-top: 0; }

#pp-idle .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 10px; background: #1b2440; font-size: .96em; font-weight: 600; white-space: nowrap; cursor: pointer; }
#pp-idle .btn:hover { background: #243056; }
#pp-idle .btn i { color: var(--pi-accent); font-size: .86em; }
#pp-idle .btn.primary { background: var(--pi-accent); color: #0a0f1e; }
#pp-idle .btn.primary i { color: #0a0f1e; }
#pp-idle .btn.primary:hover { background: #96a5ff; }
#pp-idle .btn:disabled { opacity: .4; cursor: default; }
#pp-idle .btn.sm { padding: 5px 10px; font-size: .9em; }
#pp-idle .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#pp-idle .actrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#pp-idle .actrow.top { margin-top: 14px; }
#pp-idle .at { font-size: 1.07em; font-weight: 600; }
#pp-idle .ad { margin-top: 2px; color: var(--pi-dim); font-size: .9em; }
#pp-idle .ad b, #pp-idle .tc b, #pp-idle .cost b { color: var(--pi-soft); font-weight: 600; }
#pp-idle .ad b.no, #pp-idle .tc b.no, #pp-idle .cost b.no { color: var(--pi-bad); }

#pp-idle .q { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
#pp-idle .qn { display: flex; align-items: center; gap: 8px; min-width: 120px; font-size: .96em; }
#pp-idle .qn em { font-style: normal; color: var(--pi-faint); }
#pp-idle .qbar { flex: 1; height: 6px; border-radius: 6px; overflow: hidden; background: var(--pi-well); }
#pp-idle .qbar i { display: block; height: 100%; background: var(--pi-accent); }
#pp-idle .qbar i.wait { background: var(--pi-faint); }
#pp-idle .qt { min-width: 50px; color: var(--pi-dim); font-family: var(--pi-mono); font-size: .86em; text-align: right; }
#pp-idle .qempty { color: var(--pi-faint); font-size: .93em; }

#pp-idle .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#pp-idle .tiles.pick { margin-top: 12px; }
#pp-idle .tile { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border: 0; border-radius: 12px; background: var(--pi-well); font-size: .93em; text-align: left; cursor: pointer; }
#pp-idle .tile:hover { background: #1c2744; }
#pp-idle .tile.no .tt, #pp-idle .tile.no .td, #pp-idle .tile.done .tt, #pp-idle .tile.done .td { color: var(--pi-faint); }
#pp-idle .tile.done { cursor: default; }
#pp-idle .tile .tt { display: flex; align-items: center; gap: 8px; font-weight: 650; }
#pp-idle .tile .tt i { color: var(--pi-accent); }
#pp-idle .tile .ct { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--pi-tint); color: #fff; font-size: .86em; font-variant-numeric: tabular-nums; }
#pp-idle .tile .ok { margin-left: auto; color: var(--pi-good); font-size: .86em; font-weight: 600; }
#pp-idle .tile .td { color: var(--pi-dim); font-size: .86em; line-height: 1.4; }
#pp-idle .tile .tc { display: flex; flex-wrap: wrap; gap: 8px; color: var(--pi-faint); font-size: .86em; }
#pp-idle .tile .tc em { font-style: normal; font-family: var(--pi-mono); }
#pp-idle .tile .io { display: flex; flex-wrap: wrap; gap: 4px; }
#pp-idle .tile .io .p { padding: 1px 7px; border-radius: 6px; background: #0d1526; color: var(--pi-dim); font-size: .8em; font-variant-numeric: tabular-nums; }
#pp-idle .tile .io .p.o { color: var(--pi-good); }
#pp-idle .tile .io .p.i { color: var(--pi-warn); }

#pp-idle .fl { padding: 12px 0; }
#pp-idle .flc { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#pp-idle .cost { display: flex; gap: 10px; flex-wrap: wrap; color: var(--pi-faint); font-size: .9em; }
#pp-idle .city { padding: 10px 0; }
#pp-idle .ch { display: flex; align-items: center; gap: 10px; }
#pp-idle .ch .nm { font-size: 1.07em; font-weight: 650; }
#pp-idle .tag { padding: 0 9px; border-radius: 999px; background: var(--pi-tint); color: #fff; font-size: .8em; font-weight: 600; letter-spacing: .04em; }
#pp-idle .tag.growing { background: #183a2c; }
#pp-idle .tag.strained { background: #3a3018; }
#pp-idle .tag.unhappy { background: #3a2418; }
#pp-idle .tag.dark { background: #2a1618; }
#pp-idle .lv { color: var(--pi-gold); font-size: .8em; font-weight: 650; }
#pp-idle .fo { margin-left: auto; color: var(--pi-faint); font-size: .86em; }
#pp-idle .cm { margin-top: 3px; color: var(--pi-dim); font-size: .9em; }
#pp-idle .dists { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
#pp-idle .dchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--pi-well); color: var(--pi-soft); font-size: .86em; }
#pp-idle .dchip.match { background: var(--pi-tint); color: #fff; }
#pp-idle .dchip i { font-size: .8em; }
#pp-idle .slots { margin-left: auto; color: var(--pi-faint); font-size: .86em; }
#pp-idle .ul { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 0; font-size: .93em; }
#pp-idle .ul span { display: flex; align-items: center; gap: 7px; font-weight: 600; }
#pp-idle .ul span i { color: var(--pi-accent); }
#pp-idle .ul em { min-width: 0; overflow: hidden; color: var(--pi-dim); font-size: .9em; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
#pp-idle .ul b { color: var(--pi-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
#pp-idle .lr { display: flex; gap: 12px; padding: 9px 0; font-size: 1.07em; }
#pp-idle .lr .rk { width: 22px; color: var(--pi-faint); font-family: var(--pi-mono); }
#pp-idle .lr .nm { flex: 1; }
#pp-idle .lr .pp { color: var(--pi-dim); font-variant-numeric: tabular-nums; }
#pp-idle .lr .go { min-width: 80px; color: var(--pi-faint); font-size: .86em; text-align: right; }
#pp-idle .lr.me .nm { color: var(--pi-accent); font-weight: 650; }
#pp-idle .ev { display: grid; grid-template-columns: auto auto 1fr; gap: 9px; align-items: start; padding: 7px 0; font-size: .93em; }
#pp-idle .ev .t { padding-top: 2px; color: var(--pi-faint); font-family: var(--pi-mono); font-size: .8em; }
#pp-idle .ev i { margin-top: 3px; color: var(--pi-accent); font-size: .86em; }
#pp-idle .ev i.g { color: var(--pi-good); }
#pp-idle .ev i.w { color: var(--pi-warn); }
#pp-idle .ev i.b { color: var(--pi-bad); }
#pp-idle .ev i.gold { color: var(--pi-gold); }

/* Demand, the tax slider and the market. */
#pp-idle .work { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 6px; }
#pp-idle .work .k { color: var(--pi-soft); font-size: .86em; letter-spacing: .14em; text-transform: uppercase; }
#pp-idle .work .v { font-size: 1.6em; font-weight: 650; font-variant-numeric: tabular-nums; }
#pp-idle .dm { padding: 9px 0; }
#pp-idle .dml { display: flex; align-items: baseline; gap: 10px; font-size: 1.07em; }
#pp-idle .dml span { margin-left: auto; color: var(--pi-dim); font-size: .9em; text-align: right; }
#pp-idle .dmb { position: relative; height: 8px; margin-top: 8px; border-radius: 8px; overflow: hidden; background: var(--pi-well); }
#pp-idle .dmb i { position: absolute; top: 0; bottom: 0; border-radius: 8px; }
#pp-idle .dmb i.pos { background: var(--pi-accent); }
#pp-idle .dmb i.neg { background: var(--pi-warn); }
#pp-idle .dmb em { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #2e3a5e; transform: translateX(-1px); }
#pp-idle .tax { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--pi-line); }
#pp-idle .tax label { font-size: 1.07em; }
#pp-idle .tax input { width: 100%; accent-color: var(--pi-accent); }
#pp-idle .tax .tx { grid-column: 1 / -1; color: var(--pi-dim); font-size: .9em; }
#pp-idle .prices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
#pp-idle .px { display: flex; flex: 1; flex-direction: column; min-width: 110px; padding: 9px 13px; border-radius: 12px; background: var(--pi-well); }
#pp-idle .px span { color: var(--pi-dim); font-size: .86em; letter-spacing: .14em; text-transform: uppercase; }
#pp-idle .px b { margin-top: 2px; font-size: 1.43em; font-variant-numeric: tabular-nums; }
#pp-idle .px em { color: var(--pi-dim); font-size: .86em; font-style: normal; }
#pp-idle .px em.up { color: var(--pi-good); }
#pp-idle .px em.dn { color: var(--pi-bad); }
#pp-idle .seg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
#pp-idle .segl { margin-right: 4px; color: var(--pi-dim); font-size: .9em; }
#pp-idle .seg button { padding: 4px 13px; border: 0; border-radius: 999px; background: var(--pi-well); color: var(--pi-soft); font-size: .93em; cursor: pointer; }
#pp-idle .seg button.on { background: var(--pi-tint); color: #fff; }
#pp-idle .buys { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 14px; }
#pp-idle .by { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; background: var(--pi-well); font-size: .93em; }
#pp-idle .by span { font-weight: 600; text-transform: capitalize; }
#pp-idle .by em { margin-right: auto; color: var(--pi-dim); font-size: .86em; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- the side column ---------------- */

#pp-idle .regrow { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
#pp-idle .gal { display: flex; flex-direction: column; align-items: flex-end; padding: 11px 16px; border-radius: 16px; background: var(--pi-panel); }
#pp-idle .gal b { font-size: 1.43em; font-weight: 650; white-space: nowrap; }
#pp-idle .gal span { color: var(--pi-soft); font-size: .93em; font-weight: 700; letter-spacing: .18em; }
#pp-idle .reg { display: block; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--pi-panel); text-align: center; cursor: pointer; }
#pp-idle .reg:hover { background: #172040; }
#pp-idle.open .reg { cursor: default; }
#pp-idle.open .reg:hover { background: var(--pi-panel); }
#pp-idle .rt1 { font-size: 1.5em; font-weight: 650; }
#pp-idle .rt1 i { margin-left: 8px; color: var(--pi-dim); font-size: .6em; vertical-align: middle; }
#pp-idle .rt2 { color: var(--pi-soft); font-size: .86em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
#pp-idle .rt3 { margin-top: 8px; font-size: .86em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
#pp-idle .rt3 b { color: var(--pi-cyan); font-weight: 700; }
#pp-idle .rt4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
#pp-idle .rt4 span { display: block; font-size: .75em; font-weight: 700; letter-spacing: .04em; }
#pp-idle .rt4 b { display: block; color: var(--pi-good); font-size: 1.21em; font-variant-numeric: tabular-nums; }
#pp-idle .card.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; column-gap: 8px; padding: 16px 14px; }
#pp-idle .gt { text-align: center; }
#pp-idle .gl { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--pi-soft); font-size: .86em; letter-spacing: .14em; text-transform: uppercase; }
#pp-idle .gl i { font-size: .8em; }
#pp-idle .gv { margin-top: 4px; font-size: 1.64em; font-weight: 650; font-variant-numeric: tabular-nums; }
#pp-idle .gs { margin-top: 2px; color: var(--pi-soft); font-size: .93em; font-variant-numeric: tabular-nums; }
#pp-idle .gs.up { color: var(--pi-good); }
#pp-idle .gs.dn { color: var(--pi-bad); }
#pp-idle .rrow { padding: 12px 0; }
#pp-idle .rrow.flat { border-top: 0; padding-top: 8px; }
#pp-idle .rl { display: flex; align-items: center; gap: 10px; font-size: 1.14em; }
#pp-idle .rl i { width: 16px; text-align: center; }
#pp-idle .rl .amt { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
#pp-idle .rl .amt em { color: var(--pi-faint); font-size: .8em; font-style: normal; font-weight: 400; }
#pp-idle .rl .rr { min-width: 62px; font-size: .9em; text-align: right; font-variant-numeric: tabular-nums; }
#pp-idle .rr.up { color: var(--pi-good); }
#pp-idle .rr.dn { color: var(--pi-bad); }
#pp-idle .obj { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; }
#pp-idle .obj:not(.cur) { opacity: .6; }
#pp-idle .ol { font-size: 1.14em; }
#pp-idle .op2 { margin-top: 2px; color: var(--pi-faint); font-size: .96em; }
#pp-idle .or { color: var(--pi-gold); font-size: 1.14em; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------- the pieces over the frame ---------------- */

/* The line idle-ui.js adds under world-tip.js's name, and the tip it draws
   itself for what world-names.js does not name (a rock, a ship). */
.pp-world-tip .pp-idle-tl { display: block; margin-top: 3px; color: #ffffff; font-size: 11px; }
.pp-world-tip .pp-idle-tk { display: block; margin-top: 3px; color: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 600; }
#pp-idle .tip { position: fixed; z-index: 41; display: flex; flex-direction: column; gap: 1px; max-width: 280px; padding: 7px 12px; border-radius: 8px; background: rgba(20, 26, 38, 0.92); font-family: Arial, sans-serif; text-align: center; pointer-events: none; transform: translateX(-50%); }
#pp-idle .tip b { color: #fff; font-size: 13px; }
#pp-idle .tip span { color: rgba(255, 255, 255, 0.6); font-size: 11px; }
#pp-idle .tip em { margin-top: 3px; color: rgba(255, 255, 255, 0.72); font-size: 11px; font-style: normal; font-weight: 600; }

/* The survey probe's pill, over the corner rail and the afterburner readout
   and short of flight's key hint (304 px in at 1280), and the hint under the
   registry card. */
#pp-idle .pill { position: fixed; z-index: 94; left: var(--pi-rm); bottom: calc(var(--pp-band, 0px) + var(--pp-edge, 24px) + 56px); display: flex; align-items: center; gap: 9px; max-width: min(260px, calc(100vw - 2 * var(--pi-rm))); box-sizing: border-box; padding: 9px 16px; border-radius: 12px; background: rgba(23, 30, 43, 0.82); font-size: 13px; white-space: nowrap; pointer-events: none; }
#pp-idle .pill b { font-weight: 650; }
#pp-idle .pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pi-dim); }
#pp-idle .pill i { color: var(--pi-cyan); }
#pp-idle .hint { margin-top: -6px; color: var(--pi-dim); font-size: .8em; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
#pp-idle.open .hint { display: none; }

#pp-idle .toast { position: fixed; z-index: 97; left: 50%; bottom: calc(var(--pp-band, 0px) + 128px); max-width: min(560px, calc(100vw - 32px)); padding: 9px 18px; border-radius: 12px; background: var(--pi-panel); font-size: 13px; letter-spacing: .03em; text-align: center; pointer-events: none; transform: translateX(-50%); animation: pp-idle-rise .3s ease; }
#pp-idle .toast.err { background: #2a1618; }
#pp-idle.open .toast { left: calc((100vw - var(--pi-w)) / 2); max-width: calc(100vw - var(--pi-w) - 32px); }
@keyframes pp-idle-rise { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

#pp-idle .overlay { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 10, 0.78); }
#pp-idle .modal { width: min(420px, 100%); padding: 24px 24px 20px; border-radius: 18px; background: var(--pi-panel); font-size: 13px; }
#pp-idle .modal h3 { margin: 0 0 4px; font-size: 22px; }
#pp-idle .modal p { margin: 0 0 12px; color: var(--pi-dim); }
#pp-idle .modal .kv { font-size: 15px; }
#pp-idle .modal .btn { width: 100%; justify-content: center; margin-top: 16px; }

/* ---------------- narrower frames ---------------- */

/* Under 1560 px the side column is too narrow to hold the galaxy and the
   registry card side by side, so the galaxy sits over it as one row. */
@media (max-width: 1560px) {
    #pp-idle .brand { display: none; }
    #pp-idle .regrow { grid-template-columns: 1fr; gap: 8px; }
    #pp-idle .gal { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 9px 16px; }
}

@media (max-width: 1180px) {
    #pp-idle { --pi-w: calc(min(460px, 50vw) + var(--pi-rm)); }
    #pp-idle .panes { display: block; width: min(460px, 50vw); }
    #pp-idle .main { margin-bottom: 14px; }
    #pp-idle:not(.open) .panes { width: min(360px, 44vw); }
    #pp-idle h1 { font-size: 2.3em; }
}

@media (prefers-reduced-motion: reduce) {
    #pp-idle * { transition: none !important; animation: none !important; }
}