/* THE ADMIN AREA'S LOOK (admin.aeon4d.com; AEON4D's library/THE_CREATORS.md): AEON4D's own. Its whole token sheet is
   served beside this one (aeon4d.css, copied at each deploy from AEON4D's committed web/aeon4d.css), so a colour keeps
   one home and no colour is written here but through its names. Below, the family's instrument (AEON4D's shell, as
   AEON3D's studio and AEON2D's desk have it): the stage on the left, which here holds THE CIRCLE; the 348 px column on
   the right; below 900 px the column is the page and a bar of tabs sits at the bottom.
   Nothing in the column moves. On the stage, light moves only along a spoke where a piece moved in the last day, and
   never for anyone who asks for reduced motion. */

html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); }
body { font: 11px/1.45 var(--mono); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--frame-hi); outline-offset: 2px; }
a { color: var(--frame-hi); }
.word { font: 400 22px/0.95 var(--serif); letter-spacing: .05em; color: var(--ink-hi); margin: 0; }
.word span { color: var(--frame); }
.note { color: var(--faint); font: 11px/1.45 var(--sans); margin: 0; }
.say { color: var(--dim); font: 12px/1.5 var(--sans); margin: 0; }

/* ---- THE PAGES BEFORE SIGNING IN ---- */
body.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; }
.gatebox { width: min(400px, 100%); padding: 22px 22px 20px; box-sizing: border-box; display: grid; gap: 14px; }
.gatebox .mast { display: flex; align-items: center; gap: 10px; }
.gatebox .mast img { width: 34px; height: 34px; filter: drop-shadow(0 0 8px var(--frame-glow)); }
.gatebox h1 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--frame); }
.gatebox h1::after { content: ""; flex: 1; height: 1px; background: var(--frame-line); }
.gatebox form { display: grid; gap: 12px; }
.gatebox label { display: grid; gap: 5px; color: var(--dim); font: 11.5px var(--sans); }
.gatebox p { margin: 0; }
.field { width: 100%; box-sizing: border-box; padding: 9px 10px; background: var(--well); border: 1px solid var(--edge-field); border-radius: var(--r-key); font: 13px var(--mono); color: var(--ink-hi); }
.said { margin: 0; padding: 6px 9px; border-left: 2px solid var(--warn); background: var(--warn-wash); color: var(--ink); font: 11.5px/1.45 var(--sans); word-break: break-word; }

/* ---- THE INSTRUMENT ---- */
#root { height: 100%; }
#app { display: grid; grid-template-columns: minmax(0, 1fr) 348px; height: 100%; }

/* the stage: the circle */
#stagebox { display: grid; grid-template-rows: 30px minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--stage); border-right: 1px solid var(--frame-line); box-shadow: 0 0 14px var(--frame-glow); }
#rail { display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--shell-2); border-bottom: 1px solid var(--frame-line); min-width: 0; }
#railroom { font: 600 10px var(--mono); letter-spacing: .16em; color: var(--live); text-transform: uppercase; white-space: nowrap; }
#railhint { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
#stage { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; padding: 10px; }
#circle { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

.orbit { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 2 9; }
.spoke { stroke: var(--rule); stroke-width: 2; }
.spoke.has { stroke: var(--frame-line); stroke-width: 3; }
.spoke.in, .spoke.out { stroke: var(--frame-edge); stroke-width: 3; stroke-dasharray: 9 15; animation: spoke-in 1.8s linear infinite; }
.spoke.out { animation-name: spoke-out; }
@keyframes spoke-in { to { stroke-dashoffset: -48; } }
@keyframes spoke-out { to { stroke-dashoffset: 48; } }
@media (prefers-reduced-motion: reduce) { .spoke.in, .spoke.out { animation: none; stroke-dasharray: none; } }
.s-disc-a { stop-color: var(--plate-hi); } .s-disc-b { stop-color: var(--plate-2); }
.s-core-a { stop-color: var(--frame-line); } .s-core-b { stop-color: var(--plate); } .s-core-c { stop-color: var(--shell-2); }

.node, .brain { cursor: pointer; }
.node:focus, .brain:focus { outline: none; }
.node .halo { fill: none; stroke: var(--rule); stroke-width: 2; }
.node.here .halo { stroke: var(--frame-hi); }
.node.today .halo { stroke: var(--frame-edge); }
.node.away .halo { stroke: var(--faint); stroke-dasharray: 4 7; }
.node.running .halo { stroke: var(--live); stroke-width: 3; }
.node .disc { fill: url(#g-disc); stroke: var(--frame-line); stroke-width: 1.5; }
.node.ours .disc { stroke: var(--frame-edge); stroke-width: 2; }
.node:hover .halo, .node:focus-visible .halo { stroke: var(--frame-hi); stroke-width: 3.5; }
.node:focus-visible .disc { stroke: var(--frame-hi); }
.node .ini { font: 400 34px var(--serif); fill: var(--ink-hi); text-anchor: middle; dominant-baseline: central; letter-spacing: .04em; }
.node .nm { font: 600 15px var(--mono); letter-spacing: .14em; fill: var(--ink); text-anchor: middle; }
.node .st { font: 12.5px var(--sans); fill: var(--dim); text-anchor: middle; }
.node .badge rect { fill: var(--well); stroke: var(--frame-edge); stroke-width: 1.5; }
.node .badge text { font: 600 13px var(--mono); fill: var(--ink-hi); text-anchor: middle; dominant-baseline: central; }
.node .lock text { font: 600 10px var(--mono); letter-spacing: .14em; text-anchor: middle; dominant-baseline: central; fill: var(--faint); }
.node .lock.open text { fill: var(--ok); }
.brain .core { fill: url(#g-core); stroke: var(--frame-edge); stroke-width: 2; }
.brain .ring { fill: none; stroke: var(--frame-line); stroke-width: 1.5; stroke-dasharray: 1 8; }
.brain:hover .core, .brain:focus-visible .core { stroke: var(--frame-hi); stroke-width: 3; }
.brain .bw { font: 400 31px var(--serif); fill: var(--ink-hi); text-anchor: middle; letter-spacing: .05em; }
.brain .bw .g { fill: var(--frame); }
.brain .bn { font: 600 11.5px var(--mono); letter-spacing: .14em; fill: var(--dim); text-anchor: middle; }

/* the column */
#column { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr); background: linear-gradient(var(--shell), var(--shell-2)); min-height: 0; min-width: 0; overflow: hidden; }
#head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; background: var(--plate-hi); }
#head img { width: 30px; height: 30px; filter: drop-shadow(0 0 8px var(--frame-glow)); }
#head .word { flex: 1; min-width: 0; }
#me { display: flex; align-items: center; gap: 6px; padding: 5px 12px; color: var(--dim); background: var(--shell-2); border-bottom: 1px solid var(--rule); }
#me b { color: var(--ink-hi); font-weight: 600; }
#me .icon { margin-left: auto; }
.icon { border: 1px solid var(--frame-line); background: var(--well); border-radius: var(--r-key); padding: 5px 8px; font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--ink); cursor: pointer; }
.icon:hover { border-color: var(--frame-edge); }
#strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
#strip .cell { background: var(--plate-2); padding: 5px 7px 4px; min-width: 0; }
#strip .k { display: block; font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--faint); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#strip .v { display: block; font: 600 12px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#strip .v.warn { color: var(--warn); } #strip .v.bad { color: var(--bad); } #strip .v.hollow { color: var(--unknown); } #strip .v.ok { color: var(--ok); }
#said { padding: 6px 12px; border-bottom: 1px solid var(--rule); }
#said:empty { display: none; }
#tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px 10px 4px; }
.tab { border: 1px solid var(--frame-line); border-top: 2px solid var(--frame-edge); background: var(--well); color: var(--dim); border-radius: 0 0 var(--r-key) var(--r-key); padding: 6px 2px 5px; font: 600 9.5px var(--mono); letter-spacing: .12em; cursor: pointer; text-transform: uppercase; }
.tab:hover { color: var(--ink); border-color: var(--frame-edge); }
.tab[aria-selected="true"] { color: var(--live); background: var(--live-wash); border-bottom: 2px solid var(--live); }
.tab .n { color: var(--warn); margin-left: 3px; }
#roomcap { padding: 2px 12px 8px; color: var(--dim); display: flex; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--frame-line); }
#roomcap b { color: var(--ink-hi); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
#body { overflow-y: auto; scrollbar-gutter: stable; padding: 8px 10px 16px; display: grid; align-content: start; gap: 10px; min-height: 0; grid-auto-rows: max-content; }

/* bands, rows, keys, readings: the shell's own */
.band { border: 1px solid var(--frame-line); border-radius: var(--r-card); background: linear-gradient(var(--plate), var(--plate-2)); box-shadow: inset 0 1px 0 var(--bevel), inset 0 0 24px var(--frame-wash); }
.band > h3 { margin: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-left: 2px solid var(--frame-edge); border-radius: var(--r-card) 0 0 0; font: 600 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--frame); }
.band > h3::after { content: ""; flex: 1; height: 1px; background: var(--frame-line); order: 1; }
.band > h3 .n { order: 2; color: var(--faint); font-weight: 400; letter-spacing: .08em; }
.band > .in { padding: 4px 10px 10px; display: grid; gap: 6px; min-width: 0; }
.keys { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.key { border: 1px solid var(--frame-line); background: var(--well); color: var(--ink); border-radius: var(--r-key); padding: 5px 9px; font: 600 10px var(--mono); letter-spacing: .06em; cursor: pointer; min-height: 26px; }
.key:hover { border-color: var(--frame-edge); }
.key.go { color: var(--ink-on-frame); background: var(--frame); border-color: var(--frame-hi); }
.key.armed { background: var(--armed-wash); border-color: var(--warn); color: var(--warn); }
.key:disabled { opacity: .45; cursor: default; }
.sw { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--dim); font: 11px var(--sans); }
.sw input { appearance: none; width: 30px; height: 16px; border-radius: 8px; background: var(--well); border: 1px solid var(--edge-field); position: relative; margin: 0; cursor: pointer; flex: none; }
.sw input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.sw input:checked { background: var(--live-wash); border-color: var(--live); }
.sw input:checked::after { left: 16px; background: var(--live); }
.T { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.T .l { color: var(--dim); } .T .v { color: var(--ink); text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.T .v.ok { color: var(--ok); } .T .v.hollow { color: var(--unknown); }
.T .v.warn { color: var(--warn); background: var(--warn-wash); box-shadow: inset 2px 0 0 var(--warn); padding-left: 4px; }
.rows { display: grid; gap: 5px; }
.row { display: grid; gap: 4px; padding: 7px 8px; border: 1px solid var(--rule); border-left: 2px solid var(--rule); border-radius: var(--r-key); background: var(--well); min-width: 0; }
.row.new { border-left-color: var(--frame-edge); }
.row .top { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; }
.row .top b { color: var(--ink-hi); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.row .why { color: var(--faint); font: 10.5px/1.4 var(--sans); overflow-wrap: anywhere; }
.row .text { color: var(--ink); font: 12px/1.5 var(--sans); white-space: pre-wrap; word-break: break-word; margin: 0; }
.row .h { color: var(--frame-hi); }
.row > .key { justify-self: start; text-align: left; }
button.row { font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.row:hover { border-color: var(--frame-edge); }
.pill { font: 600 9.5px var(--mono); letter-spacing: .1em; padding: 2px 6px; border-radius: 3px; border: 1px solid currentColor; text-transform: uppercase; white-space: nowrap; color: var(--dim); }
.pill.ok { color: var(--ok); } .pill.bad { color: var(--bad); } .pill.warn { color: var(--warn); } .pill.live { color: var(--live); background: var(--live-wash); }
.pill.hollow { color: var(--unknown); border-style: dashed; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag.k-worlds { color: var(--t-sense); } .tag.k-game { color: var(--t-render); } .tag.k-desk { color: var(--t-simulate); } .tag.k-docs { color: var(--t-measure); }
.well { background: var(--well); border: 1px solid var(--rule); border-radius: var(--r-key); padding: 6px 8px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 10.5px/1.4 var(--mono); color: var(--dim); margin: 0; }
.input { width: 100%; box-sizing: border-box; padding: 7px 9px; background: var(--well); border: 1px solid var(--edge-field); border-radius: var(--r-key); font: 12px/1.45 var(--sans); color: var(--ink-hi); resize: vertical; }
select.input { font: 11px var(--mono); }
.compose { display: grid; gap: 6px; }
.compose .keys { justify-content: flex-end; }
.by { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.by b { color: var(--ink-hi); }
.by .x { margin-left: auto; }
.empty { color: var(--faint); font: 11.5px/1.45 var(--sans); margin: 0; }
.grid-who { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-key); overflow: hidden; }
.grid-who > span { background: var(--well); padding: 5px 6px; text-align: center; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-who > span.hd { color: var(--frame); font-weight: 600; letter-spacing: .1em; }
.grid-who > span.rowhd { text-align: left; color: var(--ink); }
.grid-who > span.has { color: var(--ok); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--frame-line); border-radius: var(--r-key); overflow: hidden; background: var(--well); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 8px; font: 600 9.5px var(--mono); letter-spacing: .1em; color: var(--dim); cursor: pointer; text-transform: uppercase; }
.seg button + button { border-left: 1px solid var(--frame-line); }
.seg button[aria-pressed="true"] { color: var(--ink-on-live); background: var(--live); }

/* ---- THE WINDOW: on anyone in the circle, or on the GameBrain ---- */
#win { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: var(--scrim); }
#win .box { position: relative; width: min(660px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 16px 18px; box-sizing: border-box; display: grid; gap: 10px; align-content: start; grid-auto-rows: max-content; }
.close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--edge-field); background: var(--well); color: var(--ink); box-shadow: 0 3px 10px var(--scrim); font: 400 19px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0; }
.close:hover { border-color: var(--live); color: var(--live); box-shadow: 0 0 12px var(--live-wash); }
.winhead { display: flex; gap: 12px; align-items: center; padding-right: 44px; min-width: 0; }
.winhead .ini { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--frame-edge); background: var(--plate-hi); font: 400 21px var(--serif); color: var(--ink-hi); box-shadow: 0 0 12px var(--frame-glow); }
.winhead img { flex: none; width: 52px; height: 52px; filter: drop-shadow(0 0 10px var(--frame-glow)); }
.winhead .who { display: grid; gap: 4px; min-width: 0; }
.winhead .big { font: 400 26px/1.1 var(--serif); color: var(--ink-hi); letter-spacing: .03em; overflow-wrap: anywhere; }
.winhead .big .g { color: var(--frame); }
.winhead .pills { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---- THE PHONE: the column is the page, the circle one of its rooms, the tabs a bar at the bottom ---- */
#bar { display: none; }
@media (max-width: 899px) {
  body { font-size: 12px; }
  #app { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  #column { order: 1; overflow: visible; padding-top: env(safe-area-inset-top, 0px); }
  #stagebox { order: 2; display: none; border-right: 0; box-shadow: none; grid-template-rows: minmax(0, 1fr); }
  #rail, #tabs, #roomcap { display: none; }
  #app.circle #stagebox { display: grid; padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  #app.circle #body { display: none; }
  #stage { padding: 4px; }
  #circle { height: auto; aspect-ratio: 1; }
  #body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); overflow: visible; }
  .key, .icon, .seg button { min-height: 40px; padding: 8px 11px; font-size: 11px; }
  .row { min-height: 44px; box-sizing: border-box; }
  .band > h3 { padding: 11px 12px; font-size: 10.5px; }
  .note, .say, .empty { font-size: 12.5px; }
  .input { font-size: 14px; }
  #bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    min-height: 58px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--shell); border-top: 1px solid var(--frame-edge); box-shadow: 0 -6px 18px var(--frame-glow); }
  #bar button { border: 0; border-top: 2px solid transparent; background: transparent; color: var(--dim); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  #bar button[aria-selected="true"] { color: var(--live); background: var(--live-wash); border-top-color: var(--live); }
  #bar .n { color: var(--warn); margin-left: 4px; }
  #win { padding: 0; place-items: stretch; }
  #win .box { width: 100%; max-height: 100%; height: 100%; border-radius: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .close { top: calc(12px + env(safe-area-inset-top, 0px)); width: 40px; height: 40px; }
}