/* account_hub.css -- THE ACCOUNT HUB IN THE LIVING SURFACE (Code B Design; the founder's D66 ruling, cited
   by label until minted). The approved mock v0_2's drawing (directive/design/review/account_hub_mock_v0_2),
   on the app's own tokens (tokens.css) and desk register (app.css body.desk), after account.css, whose
   plan panel the side column carries unchanged.

   SERVED ONLY WHILE ROK_MAKEOVER IS ON, as /app/account_hub.css (makeover_routes ASSETS); the page
   itself only while ROK_ACCOUNT_HUB is on (B-code's route).

   PRESENTATION ONLY: no copy, no field, no behaviour. Every rule is scoped to body[data-page="hub"], so
   no other page that links app.css or account.css changes. Elements that start `hidden` stay hidden:
   nothing here sets a display on one without :not([hidden]). The one continuous motion, the embers, is
   transform and opacity only and runs only under prefers-reduced-motion: no-preference. */

body.desk[data-page="hub"] { --hub-display: "Cinzel", serif; --hub-body: "Albert Sans", system-ui, sans-serif; }
body.desk[data-page="hub"] .hub { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 3rem; }
body.desk[data-page="hub"] :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.desk[data-page="hub"] h1, body.desk[data-page="hub"] h2, body.desk[data-page="hub"] h3 {
  font-family: var(--hub-display); color: var(--parchment); letter-spacing: .05em; margin: 0; }

/* the top bar: the mark and the wordmark, and the app's shared nav */
body.desk[data-page="hub"] .hub-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--glass-line); }
body.desk[data-page="hub"] .hub-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
body.desk[data-page="hub"] .hub-brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(200, 163, 90, .35)); }
body.desk[data-page="hub"] .hub-brand span { font: 700 .95rem/1 var(--hub-display); letter-spacing: .32em;
  text-transform: uppercase; color: var(--parchment); }
body.desk[data-page="hub"] .hub-top .app-nav { display: flex; gap: 1.4rem; align-items: center; }
body.desk[data-page="hub"] .hub-top .app-nav a { color: var(--bone); text-decoration: none;
  font: 500 .92rem/1 var(--hub-body); letter-spacing: .02em; }
body.desk[data-page="hub"] .hub-top .app-nav a[aria-current="page"] { color: var(--gold-hi);
  border-bottom: 1px solid var(--gold); padding-bottom: 4px; }

/* the frame: an etched panel with gold corners */
body.desk[data-page="hub"] .hub-panel { position: relative; margin: 0; border-radius: var(--r-panel);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(224, 232, 255, .06), rgba(224, 232, 255, .025) 40%), var(--glass);
  box-shadow: inset 0 1px 0 rgba(240, 215, 158, .08), 0 18px 40px -24px rgba(0, 0, 0, .8);
  padding: clamp(1.1rem, 2.4vw, 1.6rem); }
body.desk[data-page="hub"] .hub-panel::before, body.desk[data-page="hub"] .hub-panel::after { content: "";
  position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--gold); opacity: .55; }
body.desk[data-page="hub"] .hub-panel::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0;
  border-top-left-radius: 6px; }
body.desk[data-page="hub"] .hub-panel::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0;
  border-bottom-right-radius: 6px; }
body.desk[data-page="hub"] .hub-panel:focus-within { box-shadow: inset 0 1px 0 rgba(240, 215, 158, .08),
  0 18px 40px -24px rgba(0, 0, 0, .8); }
body.desk[data-page="hub"] .hub-eyebrow { font: 600 .7rem/1 var(--hub-display); letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .55rem; }
body.desk[data-page="hub"] .hub-title { text-align: center; margin-bottom: 1.2rem; }

body.desk[data-page="hub"] .hub-grid { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 1.5rem; align-items: start; }
body.desk[data-page="hub"] .hub-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
/* intake.css gives every main margin: 0 auto, and a grid item with auto margins shrinks to its content: on a phone
   the column grew to its widest row and the layout viewport widened with it. It fills its track (app.css's
   .pane-conversation, D63-25). */
body.desk[data-page="hub"] .hub-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; width: 100%; }

/* the identity: the mark in the ring (ruled: no crest), the advisor's name, the session */
body.desk[data-page="hub"] .hub-who { text-align: center; }
body.desk[data-page="hub"] .hub-ring { width: 112px; height: 112px; margin: .4rem auto 1rem; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #1a2747, var(--g1) 70%);
  box-shadow: 0 0 0 2px var(--gold-dim), 0 0 0 6px rgba(7, 11, 22, .9), 0 0 0 7px rgba(200, 163, 90, .45),
    0 0 34px rgba(200, 163, 90, .28); }
body.desk[data-page="hub"] .hub-ring img { width: 64px; height: 64px; filter: drop-shadow(0 0 12px rgba(200, 163, 90, .45)); }
body.desk[data-page="hub"] .hub-k { margin: 0; font: 600 .68rem/1 var(--hub-display); letter-spacing: .26em;
  text-transform: uppercase; color: var(--bone-mute); }
body.desk[data-page="hub"] .hub-namebox { display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: .45rem 0 .2rem; }
body.desk[data-page="hub"] .hub-name { font: 700 1.6rem/1.15 var(--hub-display); letter-spacing: .08em;
  color: var(--parchment); text-shadow: 0 0 22px rgba(200, 163, 90, .25); }
body.desk[data-page="hub"] .hub-name.unset { color: var(--bone-mute); }
body.desk[data-page="hub"] .hub-name-form:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin: .5rem 0 0; }
body.desk[data-page="hub"] .hub-name-form input { flex: 1 1 10rem; min-width: 0; padding: .6rem .8rem;
  border-radius: var(--r-ctrl); border: 1px solid var(--gold-dim); background: rgba(7, 11, 22, .7);
  color: var(--parchment); font: 600 1rem/1.2 var(--hub-display); letter-spacing: .06em; }
body.desk[data-page="hub"] button.text { font: 600 .82rem/1 var(--hub-body); color: var(--gold-hi); }
body.desk[data-page="hub"] .hub-help { font-size: .84rem; line-height: 1.5; color: var(--bone-mute); margin: .55rem 0 0; }
/* Lane A D66-36: the player's own name, under the strategist's, smaller and in the body face */
body.desk[data-page="hub"] .hub-you { margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--gold-dim); }
body.desk[data-page="hub"] .hub-you .hub-namebox { margin-top: .45rem; }
body.desk[data-page="hub"] .hub-you-name { font-size: 1.05rem; color: var(--bone); }
body.desk[data-page="hub"] .hub-you-name.unset:empty { display: none; }
body.desk[data-page="hub"] .hub-status { margin: .4rem 0 0; font-size: .84rem; color: var(--bone); }
body.desk[data-page="hub"] .hub-signed:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: .35rem; font-size: .8rem; color: var(--bone-mute); margin: .8rem 0 0;
  overflow-wrap: anywhere; }

/* the plan panel keeps account.css's plate; in the side column it reads as a panel */
body.desk[data-page="hub"] .hub-side .plan-panel:not([hidden]) { margin: 0; border-radius: var(--r-panel);
  padding: 16px 18px 18px; }
body.desk[data-page="hub"] .hub-side .plan-panel .plan-acts { flex-direction: column; align-items: stretch; }
body.desk[data-page="hub"] .hub-side .plan-panel .plan-manage { align-self: flex-start; }
body.desk[data-page="hub"] .hub-side .plan-panel button.primary.companion { width: 100%; padding: 11px 12px;
  font-size: 14px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }   /* wraps, never clips (D67-42) */

/* the way around the page */
body.desk[data-page="hub"] .hub-nav { display: flex; flex-direction: column; gap: .15rem; padding: .7rem; }
body.desk[data-page="hub"] .hub-nav a:not([hidden]) { display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .7rem; border-radius: var(--r-ctrl); color: var(--bone); text-decoration: none; font-size: .92rem; }
body.desk[data-page="hub"] .hub-nav a:hover { background: rgba(200, 163, 90, .08); }
body.desk[data-page="hub"] .hub-nav .hub-n { font: 600 .72rem/1 var(--hub-body); color: var(--gold); }

/* the deletes: quiet, under the way around */
body.desk[data-page="hub"] .hub-quiet { text-align: center; font-size: .84rem; color: var(--bone); }
body.desk[data-page="hub"] .hub-quiet p { margin: 0; }
body.desk[data-page="hub"] .hub-quiet > p > button.text { font: 500 .8rem/1 var(--hub-body); color: var(--bone-mute);
  text-decoration: underline; text-decoration-color: rgba(169, 176, 196, .35); text-underline-offset: 3px; }
body.desk[data-page="hub"] .hub-quiet > div:not([hidden]) { margin-top: .6rem; padding: .8rem; text-align: left;
  border: 1px solid var(--glass-line); border-radius: var(--r-ctrl); background: var(--g2); }
body.desk[data-page="hub"] .hub-quiet > div p { margin: 0 0 .6rem; line-height: 1.5; }
body.desk[data-page="hub"] .hub-quiet .row label { display: block; margin-bottom: .3rem; color: var(--bone-mute); }

/* THE SWORD, the one presenter object: the sword in the stone, live (Lane A D68-23; it was the signet ring on its
   pillow). The founder's D69 look: "too small"; his mock puts it LARGE at the right of the top two cards (the season
   calendar and Read my screenshots), the cards' words left of the blade; then, on the frames: "size approved; shift
   it LEFT so blade and stone sit fully on the Read-my-screenshots card, nothing past its right edge; full opacity".
   Measured on the 800 px still's alpha: the blade's centre line stands at 50.6% of the width, the stone runs from
   16% to 83% and the crossguard 12.5% either side; the right 17% is empty. So the still is drawn --sw square with the
   stone's right edge --sw-in inside the cards' right edge, and its box is trimmed at the stone (83%): nothing of it
   passes the edge, so nothing can widen the page. The cards keep their words left of the stone (--sw-text). With the
   readers card hidden (ROK_READERS off) the group is the kingdom card alone, so the sword stands at that card's size
   and never hangs over the card below (held from its head, not its foot). The still holds the box; account_hub.js lays the loop over it, and the loop
   shows once it plays (loop-on). Reduced motion, a hidden tab and WebKit (which draws VP9's alpha black) keep the
   still. */
body.desk[data-page="hub"] { --sw: 30rem; --sw-in: 1.2rem; --sw-text: calc(var(--sw-in) + var(--sw) * .69 + 1rem); }
body.desk[data-page="hub"] .hub-sworded { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
body.desk[data-page="hub"] .hub-sworded:has(> .hub-readers[hidden]) { --sw: 13.5rem; --sw-top: -1.4rem; --sw-foot: auto; }
body.desk[data-page="hub"] .hub-sworded > .hub-panel { padding-right: var(--sw-text); }
/* the stone stands on the Read-my-screenshots card: the sword is held by its foot, .9rem above that card's foot;
   alone, beside the kingdom card, it hangs from that card's head */
body.desk[data-page="hub"] .hub-presenter { position: absolute; z-index: 3; top: var(--sw-top, auto); bottom: var(--sw-foot, .9rem);
  left: calc(100% - var(--sw-in) - var(--sw) * .83); display: block; width: calc(var(--sw) * .83); height: var(--sw);
  margin: 0; overflow: hidden; opacity: 1; pointer-events: none; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .65)); }
body.desk[data-page="hub"] .hub-presenter img,
body.desk[data-page="hub"] .hub-presenter video { display: block; width: var(--sw); height: var(--sw); max-width: none; }
body.desk[data-page="hub"] .hub-presenter video { position: absolute; inset: 0; opacity: 0; }
body.desk[data-page="hub"] .hub-presenter.loop-on video { opacity: 1; }
body.desk[data-page="hub"] .hub-presenter.loop-on img { visibility: hidden; }

/* the first run: the invitation */
body.desk[data-page="hub"] .hub-invite:not([hidden]) { display: block; position: relative; overflow: hidden;
  text-align: center; border-radius: calc(var(--r-panel) + 4px);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 2.6rem); border: 1px solid var(--gold);
  background: radial-gradient(120% 140% at 50% 120%, rgba(200, 163, 90, .30), transparent 55%),
    radial-gradient(80% 90% at 50% -20%, rgba(19, 30, 56, .95), transparent 70%), linear-gradient(180deg, #0c1428, #070b16);
  box-shadow: 0 0 0 4px rgba(7, 11, 22, .85), 0 0 0 5px rgba(200, 163, 90, .35), 0 0 60px rgba(200, 163, 90, .18),
    inset 0 1px 0 rgba(240, 215, 158, .25); }
body.desk[data-page="hub"] .hub-mark { width: 58px; height: 58px; filter: drop-shadow(0 0 16px rgba(200, 163, 90, .55)); }
body.desk[data-page="hub"] .hub-invite h1 { font-size: clamp(1.45rem, 4.2vw, 2.35rem); line-height: 1.15;
  letter-spacing: .08em; margin: .9rem 0 .7rem; text-shadow: 0 0 26px rgba(200, 163, 90, .28); }
body.desk[data-page="hub"] .hub-invite p { max-width: 34rem; margin: 0 auto; color: var(--bone); font-size: 1.02rem; line-height: 1.6; }
body.desk[data-page="hub"] .hub-go { display: inline-block; margin-top: 1.4rem; padding: 1rem 2.1rem;
  border-radius: var(--r-ctrl); font: 700 .95rem/1 var(--hub-display); letter-spacing: .12em; text-transform: uppercase;
  color: #1d1608; text-decoration: none; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #a8843f);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .55); }

/* the kingdom card: the intake's first moment, kept and made the first thing on the page */
body.desk[data-page="hub"] .hub-kingdom { overflow: hidden; border-top-color: rgba(200, 163, 90, .55); }
body.desk[data-page="hub"] .hub-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(200, 163, 90, .14), transparent 60%); }
body.desk[data-page="hub"] .hub-kingdom > :not(.hub-glow):not(.hub-wm) { position: relative; }
body.desk[data-page="hub"] .hub-wm { position: absolute; right: -40px; top: -30px; width: 260px; height: 260px;
  opacity: .07; pointer-events: none; filter: drop-shadow(0 0 30px rgba(200, 163, 90, .6)); }
body.desk[data-page="hub"] .hub-khead { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }
body.desk[data-page="hub"] .hub-khead h2 { font-size: 1.35rem; }
body.desk[data-page="hub"] .hub-kno { font: 700 1.9rem/1 var(--hub-display); letter-spacing: .06em; color: var(--gold-hi);
  text-shadow: 0 0 24px rgba(200, 163, 90, .3); }
body.desk[data-page="hub"] .hub-hint { color: var(--bone); font-size: 1rem; line-height: 1.55; margin: .5rem 0 0; }
body.desk[data-page="hub"] .hub-ask { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
body.desk[data-page="hub"] .hub-ask input { flex: 1 1 12rem; min-width: 0; padding: .85rem 1rem; border-radius: var(--r-ctrl);
  border: 1px solid var(--gold-dim); background: rgba(7, 11, 22, .7); color: var(--parchment); font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(200, 163, 90, .08); }
body.desk[data-page="hub"] .hub-btn { flex: none; padding: .85rem 1.3rem; border-radius: var(--r-ctrl);
  font: 700 .85rem/1.2 var(--hub-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi);
  border: 1px solid var(--gold); background: rgba(200, 163, 90, .10); box-shadow: var(--glow-soft); cursor: pointer; }
body.desk[data-page="hub"] .hub-why { display: flex; gap: .6rem; align-items: flex-start; margin: .9rem 0 0;
  color: var(--bone-mute); font-size: .9rem; line-height: 1.5; }
body.desk[data-page="hub"] .hub-why::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .45em;
  transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-hi), var(--gold-dim));
  box-shadow: 0 0 8px rgba(200, 163, 90, .6); }
body.desk[data-page="hub"] .hub-headline { font: 500 1.14rem/1.5 var(--hub-body); color: var(--parchment);
  margin: .7rem 0 0; max-width: 40rem; }
/* the calendar: the level-0 lines in order on one gold line, evenly spaced -- the drawing orders them
   and measures nothing */
body.desk[data-page="hub"] .hub-cal { --n: 1; list-style: none; margin: 1.3rem 0 .2rem; padding: 0; display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
body.desk[data-page="hub"] .hub-cal::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-hi) 60%, rgba(154, 123, 63, .25)); }
body.desk[data-page="hub"] .hub-cal li { position: relative; padding: 1.6rem .6rem 0 0; font-size: .86rem;
  line-height: 1.45; color: var(--bone); overflow-wrap: anywhere; }
body.desk[data-page="hub"] .hub-cal li::before { content: ""; position: absolute; top: 2px; left: 0; width: 14px;
  height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--gold-hi), var(--gold) 60%, var(--gold-dim));
  box-shadow: 0 0 0 3px rgba(7, 11, 22, .9), 0 0 12px rgba(200, 163, 90, .7); }
body.desk[data-page="hub"] .hub-cal li.gap { color: var(--bone-mute); font-style: italic; }
body.desk[data-page="hub"] .hub-cal li.gap::before { background: var(--g1); width: 12px; height: 12px;
  border: 1px dashed var(--gold); box-shadow: 0 0 0 1px var(--gold-dim), 0 0 0 3px rgba(7, 11, 22, .9); }

/* the cards' heads */
body.desk[data-page="hub"] .hub-cardhead { display: flex; align-items: baseline; justify-content: space-between;
  gap: .4rem 1rem; flex-wrap: wrap; }
body.desk[data-page="hub"] .hub-cardhead h2 { font-size: 1.2rem; }
body.desk[data-page="hub"] .hub-cardhead .sub { margin: 0; color: var(--bone-mute); font-size: .86rem; }
body.desk[data-page="hub"] .hub-anchor { position: absolute; top: -1rem; }

/* Details: profile_card.js's rows, the LIVE group first */
body.desk[data-page="hub"] #profile-card { margin: 0; }
body.desk[data-page="hub"] .hub-group { margin-top: 1.1rem; }
body.desk[data-page="hub"] .hub-group h3 { display: flex; align-items: center; gap: .6rem;
  font: 600 .76rem/1 var(--hub-display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .4rem; }
body.desk[data-page="hub"] .hub-live { font: 700 .62rem/1 var(--hub-body); letter-spacing: .14em; color: #10140d;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-radius: 999px; padding: .28rem .5rem; }
body.desk[data-page="hub"] .hub-rest h3 { color: var(--bone-mute); }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) { list-style: none; margin: 0; padding: 0; }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label acts" "value acts" "prov acts" "note note"; align-items: center; column-gap: 1rem;
  padding: .85rem .2rem; border-top: 1px solid rgba(200, 163, 90, .10); }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .label { grid-area: label; font: 600 .98rem/1.2 var(--hub-body);
  color: var(--parchment); }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .row > .value,
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .row > .entries { grid-area: value; margin-top: .15rem;
  font-size: .95rem; color: var(--bone); }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .row > .prov { grid-area: prov; margin-top: .2rem; font-size: .78rem;
  color: var(--bone-mute); }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .row > .acts { grid-area: acts; display: flex; flex-wrap: wrap;
  gap: .4rem; justify-content: flex-end; align-items: center; }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .row > .acts > :is(a.text, button.text) { font: 600 .82rem/1 var(--hub-body);
  color: var(--gold-hi); text-decoration: none; border: 1px solid var(--glass-line); border-radius: 999px;
  padding: .45rem .85rem; background: none; }
body.desk[data-page="hub"] #profile-card :is(.rows, .rows-live) .unlock { grid-area: note; margin-top: .45rem; font-size: .86rem;
  line-height: 1.5; color: var(--bone); padding-left: .9rem; border-left: 2px solid var(--gold); }
/* the rows no tool reads yet: a quieter grid of tiles, two across */
body.desk[data-page="hub"] .hub-rest .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem; margin-top: .6rem; }
body.desk[data-page="hub"] .hub-rest .rows .row { border: 1px solid rgba(200, 163, 90, .12); border-radius: var(--r-ctrl);
  background: rgba(7, 11, 22, .4); padding: .7rem .8rem; }
body.desk[data-page="hub"] .hub-rest .rows .unlock { border-left: 0; padding-left: 0; margin-top: .35rem;
  font-size: .8rem; color: var(--bone-mute); }
/* the inline capture editor, open inside the card (Lane A D62-60) */
body.desk[data-page="hub"] #profile-card .capture { margin: .8rem 0 .4rem; padding: .85rem .9rem;
  border-radius: var(--r-ctrl); border: 1px solid var(--gold-dim); background: rgba(7, 11, 22, .65);
  box-shadow: 0 0 0 3px rgba(200, 163, 90, .06); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
body.desk[data-page="hub"] #profile-card .capture .capture-label { flex: 1 0 100%; font: 600 .82rem/1 var(--hub-body);
  color: var(--parchment); }
body.desk[data-page="hub"] #profile-card .capture input { flex: 1 0 100%; min-width: 0; padding: .7rem .8rem;
  border-radius: var(--r-ctrl); border: 1px solid var(--gold-dim); background: rgba(7, 11, 22, .8);
  color: var(--parchment); font-size: .95rem; }
body.desk[data-page="hub"] #profile-card .capture .capture-hint { flex: 1 0 100%; color: var(--bone-mute); font-size: .8rem; }
body.desk[data-page="hub"] #profile-card .toast:not([hidden]) { display: block; margin: .6rem 0 0; color: var(--bone); }

/* Equipment (#667) shows only when its section draws */
body.desk[data-page="hub"] .hub-equipment:has(> #equipment-slots[hidden]) { display: none; }

/* the long form keeps account.css's plates, on the hub's panel */
body.desk[data-page="hub"] #intake { margin: 0; }
body.desk[data-page="hub"] #intake > h2 { font-size: 1.2rem; }
body.desk[data-page="hub"] #intake > .sub { color: var(--bone-mute); font-size: .9rem; }
body.desk[data-page="hub"] #intake fieldset { margin: 1rem 0; padding: 14px 16px 16px; background: var(--g2);
  border: 1px solid var(--glass-line); border-top: 2px solid var(--gold); border-radius: var(--r-ctrl); }
body.desk[data-page="hub"] #intake legend { float: left; width: 100%; padding: 0; margin: 0 0 .35rem;
  font: 600 12px/1.3 var(--hub-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
body.desk[data-page="hub"] #intake legend + * { clear: both; }
body.desk[data-page="hub"] #intake .row { margin: .45rem 0; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: center; gap: .3rem 1rem; }
body.desk[data-page="hub"] #intake .row label { color: var(--bone-mute); font-size: 14px; }
/* G-HUB-COMMANDER-FORM-LABELS-1 (Lane A D70): one commander is one row -- its four named boxes and its Remove on one line */
body.desk[data-page="hub"] #intake .row.cmd { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto;
  align-items: end; gap: .3rem .6rem; }
body.desk[data-page="hub"] #intake .row.cmd label.f { display: grid; gap: .2rem; min-width: 0; font-size: 12px; }
body.desk[data-page="hub"] #intake .row.cmd label.f input { width: 100%; min-width: 0; box-sizing: border-box; }
body.desk[data-page="hub"] #intake .hint { font-size: 13px; }

/* Conversations: the real history (ROK_CONVERSATIONS) */
body.desk[data-page="hub"] .hub-list { list-style: none; margin: .4rem 0 0; padding: 0; }
body.desk[data-page="hub"] .hub-list a { display: flex; align-items: center; gap: .9rem; padding: .85rem .9rem;
  margin-top: .45rem; border-radius: var(--r-ctrl); text-decoration: none; color: var(--bone);
  border: 1px solid rgba(200, 163, 90, .12); background: rgba(7, 11, 22, .45); }
body.desk[data-page="hub"] .hub-list a:hover { box-shadow: var(--glow-soft); }
body.desk[data-page="hub"] .hub-li-mark { width: 22px; height: 22px; opacity: .85; flex: none; }
body.desk[data-page="hub"] .hub-li-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.desk[data-page="hub"] .hub-li-d { flex: none; color: var(--bone-mute); font-size: .8rem; }
body.desk[data-page="hub"] .hub-li-chev { color: var(--gold); }
body.desk[data-page="hub"] .hub-empty { margin: .6rem 0 0; color: var(--bone-mute); font-style: italic; }

body.desk[data-page="hub"] .hub-trust { text-align: center; color: var(--bone-mute); font-size: .9rem; line-height: 1.55;
  max-width: 36rem; margin: 2rem auto .6rem; }
body.desk[data-page="hub"] footer { text-align: center; }

/* the embers, rising in the gutters beside the page */
body.desk[data-page="hub"] .hub-embers { --gut: max(1.5rem, calc((100vw - 72rem) / 2)); position: fixed; inset: 0;
  z-index: 0; overflow: hidden; pointer-events: none; }
body.desk[data-page="hub"] .hub-embers span { position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-hi); box-shadow: 0 0 8px rgba(240, 215, 158, .75); opacity: 0; }
body.desk[data-page="hub"] .hub-embers span:nth-child(1) { left: calc(var(--gut) * .22); --dx: 14px; --d: 19s; --l: -4s; }
body.desk[data-page="hub"] .hub-embers span:nth-child(2) { left: calc(var(--gut) * .5); --dx: -12px; --d: 23s; --l: -15s; }
body.desk[data-page="hub"] .hub-embers span:nth-child(3) { left: calc(var(--gut) * .72); --dx: -10px; --d: 16s; --l: -9s; }
body.desk[data-page="hub"] .hub-embers span:nth-child(4) { left: calc(100vw - var(--gut) * .78); --dx: 10px; --d: 21s; --l: -12s; }
body.desk[data-page="hub"] .hub-embers span:nth-child(5) { left: calc(100vw - var(--gut) * .5); --dx: 12px; --d: 17s; --l: -2s; }
body.desk[data-page="hub"] .hub-embers span:nth-child(6) { left: calc(100vw - var(--gut) * .25); --dx: -14px; --d: 24s; --l: -19s; }
@media (prefers-reduced-motion: no-preference) {
  body.desk[data-page="hub"] .hub-embers span { animation: hub-ember var(--d) linear var(--l) infinite; }
}
@keyframes hub-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .85; }
  70% { opacity: .35; }
  100% { transform: translate(var(--dx), -100vh); opacity: 0; }
}

/* a phone leads with the invitation and the kingdom; the side column follows the cards */
/* narrower desks: a smaller sword, so the cards keep a readable column left of the stone */
@media (max-width: 81rem) { body.desk[data-page="hub"] { --sw: 25rem; } }
@media (max-width: 78rem) { body.desk[data-page="hub"] { --sw: 16rem; } }
@media (max-width: 52rem) {
  body.desk[data-page="hub"] .hub-grid { grid-template-columns: minmax(0, 1fr); }
  body.desk[data-page="hub"] .hub-side { position: static; order: 2; }
  body.desk[data-page="hub"] .hub-nav { display: none; }
  body.desk[data-page="hub"] .hub-rest .rows { grid-template-columns: minmax(0, 1fr); }
  body.desk[data-page="hub"] .hub-cal { grid-template-columns: minmax(0, 1fr); }
  body.desk[data-page="hub"] .hub-cal::before { left: 6px; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--gold-dim), var(--gold-hi) 60%, rgba(154, 123, 63, .25)); }
  body.desk[data-page="hub"] .hub-cal li { padding: 0 0 1rem 1.8rem; }
  body.desk[data-page="hub"] .hub-top .app-nav { gap: .9rem; }
  body.desk[data-page="hub"] .hub-top .app-nav a { font-size: .85rem; }
  /* one column: a smaller sword, beside the kingdom card */
  body.desk[data-page="hub"] { --sw: 9rem; --sw-in: 1rem; }
  body.desk[data-page="hub"] .hub-sworded:has(> .hub-readers[hidden]) { --sw: 9rem; }
  /* the one-column sword stands on the Read-my-screenshots card alone, so the kingdom card keeps its full column --
     unless the readers card is off and the sword stands beside the kingdom card instead */
  body.desk[data-page="hub"] .hub-sworded > .hub-kingdom { padding-right: clamp(1.1rem, 2.4vw, 1.6rem); }
  body.desk[data-page="hub"] .hub-sworded:has(> .hub-readers[hidden]) > .hub-kingdom { padding-right: var(--sw-text); }
  body.desk[data-page="hub"] #intake .row { grid-template-columns: minmax(0, 1fr); }
  /* the commander's name on its own line, then level, stars, skills and Remove: still one row, never two */
  body.desk[data-page="hub"] #intake .row.cmd { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  body.desk[data-page="hub"] #intake .row.cmd label.f:first-child { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  body.desk[data-page="hub"] .hub-top { flex-direction: column; align-items: flex-start; }
  body.desk[data-page="hub"] :is(.hub-ask input, .hub-name-form input, #intake input[type="text"], #profile-card .capture input) { font-size: 16px; }
}