/* e18-ui base: page, rail, nav, buttons, forms, cards, notices, pills, lists, menus, dialogs, pager, chips, toggles,
   sign-in screen, error page, folding rail and phone layout, theme button. Tokens only (css/tokens.css); no colour value.
   Every app loads fonts.css, tokens.css, lucian.css, base.css, then its own sheet, which adds and never edits these rules
   (README.md). Started from e18-core's suite.css and the rules hub, GD Agent and Art Agent had copied into their app.css. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:var(--hair-2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink-3)}
/* Focus rings only while the keyboard navigates (html.kbd, set by lucian.js; rules gated by tools/focuscss.py):
   a control clicked with the mouse keeps focus, so without this Chrome draws its own ring after any later key. */
:where(html:not(.kbd)) :focus-visible{outline:none}
html.kbd :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
h1{font-size:32px;font-weight:800}
h2{font-size:21px;font-weight:700}
h3{font-size:16.5px;font-weight:700}
p{margin:0}
.muted{color:var(--ink-3)} .small{font-size:13px} .num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:24px;padding:20px 14px;background:var(--surface);border-right:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px;text-decoration:none}
.brand svg,.brand img{width:34px;height:34px;flex:none}
.brand b{display:block;font:800 17px/1.05 var(--display);letter-spacing:-.02em}
.brand small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:500;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border-radius:var(--r-s);text-decoration:none;color:var(--ink-3);font-weight:600;font-size:14px;transition:background-color .2s,color .2s}
.rail-games{display:flex;flex-direction:column;gap:1px}
.rail-games a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-s);text-decoration:none;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-games a:hover{background:var(--surface-2)}
.rail-games code{min-width:38px;font:700 11.5px/1 var(--display);color:var(--ink-3);font-variant-numeric:tabular-nums}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid var(--hair)}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2);font:800 13px/1 var(--display)}
.rail-foot .who{flex:1;min-width:0;font-size:13px;line-height:1.3}
.rail-foot .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-foot .who small{display:block;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:0;border-radius:var(--r-s);background:none;color:var(--ink-3);cursor:pointer;transition:background-color .2s,color .2s}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
main{padding:32px 40px 80px;min-width:0;max-width:1480px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.head .lede{margin-top:8px;max-width:64ch;color:var(--ink-2)}
.crumb{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--ink-3);text-decoration:none}
.crumb code{font:700 12px/1 var(--display);padding:4px 7px;border-radius:6px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink-2)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-m);border:0;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font:600 14px/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s,box-shadow .2s,transform .3s var(--spring)}
.btn:hover{background:var(--surface-2)} .btn:active{transform:scale(.97)}
/* the page's main action is studio blue in every app (Wayne 2026-10-24: Art Agent's red buttons did not match the others);
   red is for errors and dangerous actions only (.btn.primary.danger, .btn.danger-solid) */
.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn.primary:hover{background:var(--accent-hi)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2)}
.btn.ghost:hover{background:var(--surface)}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.55;cursor:progress}
.btn svg.i{width:17px;height:17px}

/* ---------------------------------------------------------------- forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field>label,.field>.lab{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field .hint{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.field>.ux.u039.is-seg{align-self:flex-start}
:where(input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea){width:100%;border:0;border-radius:12px;background:var(--surface-2);color:var(--ink);
  font:500 15px/1.5 var(--font);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .25s var(--ease),background-color .25s}
:where(input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel]){height:48px;padding:0 14px}
:where(textarea){min-height:100px;padding:12px 14px;resize:vertical}
:where(input,textarea):where(:hover){box-shadow:inset 0 0 0 1px var(--hair-2)}
:where(input,textarea):where(:focus){outline:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-soft)}
html.kbd :where(input,textarea):focus-visible{outline:none}
::placeholder{color:var(--ink-4)}
textarea.mono{font:500 13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.row2>*{min-width:0}
.card{background:var(--surface);border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow)}
.stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.card .sub{font-size:13.5px;color:var(--ink-3);margin-bottom:18px;max-width:60ch}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.split>*{min-width:0}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-m);background:var(--marker-soft);color:var(--marker-ink);font-size:14px;margin-bottom:18px}
.notice.ok{background:var(--tone-green-soft);color:var(--sh-ink)}

.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.4s var(--ease) infinite}
.pill.err{background:var(--marker-soft);color:var(--marker-ink)}
.pill.model{background:var(--surface-3);color:var(--ink-2)}
@keyframes pulse{50%{opacity:.25}}
table.list{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
table.list th{text-align:left;padding:0 12px 8px;font-size:12.5px;font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--hair)}
table.list td{padding:12px;border-bottom:1px solid var(--hair);vertical-align:middle}
table.list tr:last-child td{border-bottom:0}
.role{display:inline-flex;height:24px;padding:0 10px;border-radius:999px;align-items:center;font-size:12px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.role.admin{background:var(--accent-soft);color:var(--accent-ink)}
.who-cell{display:flex;align-items:center;gap:12px;line-height:1.35}

/* ---------------------------------------------------------------- auth */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px 24px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.auth-brand img{width:64px;height:64px;border-radius:16px}
.auth-brand h1{font-size:34px;letter-spacing:-.02em}
.auth-form{display:grid;place-items:center;width:100%}
.auth-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.auth-note{font-size:13px;color:var(--ink-3);max-width:340px;text-align:center}

/* ---------------------------------------------------------------- responsive */
.me-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px 6px;margin:-4px -6px;border-radius:12px;text-decoration:none;color:inherit;transition:background-color .2s}
.me-link:hover,.me-link[aria-current="page"]{background:var(--surface-2)}
.me-link .who{min-width:0}
.me-link .who b,.me-link .who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role.owner{background:none;box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink-2)}
.role.locked{gap:5px;background:var(--tone-orange-soft);color:var(--tone-orange-ink)}   /* paused / locked: a readable badge, never a dimmed row */
.role.locked .i{width:13px;height:13px}
.auth{overflow-x:clip}
/* sign in with Google (the default way in) */
.auth-msg{width:min(380px,100%);margin:0}
.g-card{width:min(380px,100%);display:flex;flex-direction:column;gap:12px;padding:28px 26px 22px;border-radius:30px;background:var(--surface);box-shadow:0 0 0 1px var(--hair),0 30px 60px -36px var(--ux-shadow-strong)}
.g-card h3{font-size:24px;font-weight:850;letter-spacing:-.045em}
.g-card p{margin:-6px 0 6px;font-size:13.5px;color:var(--ink-3)}
.g-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:54px;border-radius:17px;background:#fff;color:#1F1F1F; /* fixed: Google sign-in button colours */
  box-shadow:inset 0 0 0 1.5px var(--hair-2);font:650 15.5px/1 var(--font);text-decoration:none;transition:box-shadow .2s,background-color .2s,transform .3s var(--spring)}
.g-btn:hover{background:#F8F9FA; /* fixed: Google */box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.g-btn:active{transform:scale(.98)}
/* ---------------------------------------------------------------- phone layout */
@media (max-width:820px){
  /* the top bar keeps its own height on short pages instead of sharing the 100vh grid with the content */
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .rail{position:relative;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--hair)}
  .nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;order:3}
  .nav-h,.rail-games{display:none}.rail-foot{margin:0 0 0 auto;border:0;padding:0}.rail-foot .who{display:none}
  main{padding:22px 16px 56px}
  h1{font-size:27px}
  .row2{grid-template-columns:1fr}
}
@media (max-width:420px){.auth{padding:32px 16px}}
.rail-menu{display:none}
@media (max-width:820px){
  .rail{position:sticky;top:0;z-index:30;flex-wrap:nowrap;gap:6px;padding:10px 12px 10px 14px;box-shadow:0 1px 0 var(--hair)}
  .brand{padding:0;gap:9px;min-height:40px}   /* the home link is a tap target too */
  .brand img{width:30px;height:30px}
  .brand small{display:none}
  .rail-foot{order:2}
  .rail-menu{display:inline-flex;order:3;width:40px;height:40px;color:var(--ink)}
  .rail .nav{display:none}
  .rail.open .nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;padding:8px 12px 14px;background:var(--surface);
    box-shadow:0 1px 0 var(--hair),0 24px 40px -24px var(--ux-shadow-strong)}
  .rail.open .nav a{height:46px;font-size:15px}
  .rail.open .rail-games{display:none}
  .rail.open .nav-h{display:block;margin:12px 12px 4px}   /* the group headings tell the two "Game" entries apart */
  .rail.open .nav-h:has(+.rail-games){display:none}     /* … but not the heading of the recent-games list, hidden on phones */
  main{padding:18px 16px 56px}
  .head{margin-bottom:18px}
}
@media (max-width:640px){
  .head .lede{font-size:14px}
}
.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:var(--marker);color:var(--on-marker);font:800 12px/1 var(--display);font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px var(--marker-soft)}
.rail-menu{position:relative}
.menu-dot{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--marker);box-shadow:0 0 0 2px var(--surface)}
/* wide screens: the content column is capped at 1480 px; centre it in the space beside the rail instead of hugging the rail */
main{width:100%;margin-inline:auto}
.rail{background:var(--side);gap:18px}
.rail-top{display:flex;align-items:center;gap:6px}
.rail-top .brand{flex:1;min-width:0}
.rail-collapse{flex:none;color:var(--ink-3)}
.rail .nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nav-main{display:flex;flex-direction:column;gap:2px}
.nav :is(a,button.nav-item):hover{background:var(--row-hover);color:var(--ink)}
.nav :is(a,button.nav-item)[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}   /* selection is blue (theme.md §1) */
.nav :is(a,button.nav-item)[aria-current="page"] svg.i{color:var(--accent)}
.nav a.rail-cta{margin:0 0 12px;background:var(--accent);color:var(--on-accent);font-weight:700;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--accent) 75%,transparent)}
.nav a.rail-cta:hover,.nav a.rail-cta[aria-current="page"]{background:var(--accent-hi);color:var(--on-accent)}
.rail .rail-games a{color:var(--ink-3)}
.rail .rail-games a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink)}
.nav .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:821px){
  /* folded rail: an icon strip; labels come back as tooltips (title) */
  .rail-min .shell{grid-template-columns:72px minmax(0,1fr)}
  .rail-min .rail{padding:16px 10px;align-items:stretch}
  .rail-min .rail-top{flex-direction:column;gap:10px}
  .rail-min .brand{justify-content:center;padding:0}
  .rail-min .brand span,.rail-min .nav .lbl,.rail-min .nav-h,.rail-min .rail-games,.rail-min .rail-foot .who{display:none}
  .rail-min .nav a,.rail-min .rail-game{justify-content:center;padding:0;height:44px}
  .rail-min .nav a.rail-cta{margin-bottom:10px}
  .rail-min .nav-badge{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 5px;font-size:10.5px;margin:0}
  .rail-min .rail-foot{flex-direction:column;gap:6px;padding:12px 0 0}
}
@media (max-width:820px){
  .rail-collapse{display:none}
  .rail-top{flex:1;min-width:0}
  .rail.open .nav{max-height:calc(100vh - 64px);overflow-y:auto}
  .nav a.rail-cta{margin:4px 0 8px}
}
/* theme button (docs/theme.md §4): the sun in light, the moon in dark; theme.js handles [data-theme-toggle] */
.theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:inline}
.theme-btn svg{transition:transform .45s var(--spring)}
.theme-btn:active svg{transform:rotate(-30deg) scale(.85)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------------------------------------------------------------- shared components (lists, management pages, menus,
   dialogs, pager, chips, toggles, messages) */
.nav-h{margin:14px 10px 4px;font-size:12px;font-weight:600;color:var(--ink-3)}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 24px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow);text-align:center;color:var(--ink-2)}
.empty svg{width:96px}
.toggle{display:inline-flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;user-select:none}
.toggle input{appearance:none;width:36px;height:22px;margin:0;border-radius:999px;background:var(--ink-3);position:relative;cursor:pointer;transition:background-color .25s}
.toggle input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .35s var(--spring)}
.toggle input:checked{background:var(--accent)}
html.kbd .toggle input:focus-visible{box-shadow:0 0 0 2px var(--accent),0 0 0 6px var(--accent-soft)}
.toggle input:checked::after{transform:translateX(14px)}
.chev{width:28px;height:28px;display:grid;place-items:center;color:var(--ink-3)}
.chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--spring)}
dialog{border:0;padding:0;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);width:min(580px,92vw);box-shadow:0 40px 90px -30px color-mix(in srgb,var(--shade) 45%,transparent)}
dialog[open]{animation:dlg .35s var(--spring)}
.dlg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 0}
.dlg-b{padding:10px 22px 0}
.dlg-b p{color:var(--ink-3);font-size:13.5px;margin-bottom:14px;line-height:1.55}
.dlg-f{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 22px}
@media (max-width:900px){
  .split,.aside-grid{grid-template-columns:1fr}
}
.ux input,.ux textarea{box-shadow:none}
.u039.is-seg.is-sm .u039-tabs{padding:4px}
.u039.is-seg.is-sm .u039-pill{top:4px;bottom:4px}
.u039.is-seg.is-sm .u039-tab{height:30px;padding:0 12px;font-size:12.5px}
.list td.acts{text-align:right;white-space:nowrap}
.list td.acts .btn+.btn{margin-left:6px}
.auth .u062{height:418px}
.auth .u062-login h3{margin-top:0}
.rail-foot .icon-btn{flex:none}
img.avatar{object-fit:cover}
.avatar.xl{width:88px;height:88px;font-size:32px}
.roles{display:inline-flex;flex-wrap:nowrap;gap:6px;max-width:100%}   /* one row of role chips (docs/layout.md) */
.roles>*{flex:none;white-space:nowrap}
.row-menu{position:relative;display:inline-block}
.row-menu [data-menu][aria-expanded="true"],.row-menu [data-menu]:hover{background:var(--surface-2);color:var(--ink)}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:208px;padding:6px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--hair-2),0 24px 44px -20px color-mix(in srgb,var(--shade) 35%,transparent);text-align:left}
.menu-pop.up{top:auto;bottom:calc(100% + 6px)}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border:0;border-radius:9px;background:none;font:600 13.5px/1 var(--font);color:var(--ink);cursor:pointer}
.menu-pop button .i{width:17px;height:17px;color:var(--ink-3)}
.menu-pop button:hover,html.kbd .menu-pop button:focus-visible{background:var(--surface-2);outline:0}
.menu-pop button.danger,.menu-pop button.danger .i{color:var(--marker-ink)}
.menu-pop button.danger:hover,html.kbd .menu-pop button.danger:focus-visible{background:var(--marker-soft)}
.menu-pop hr{margin:6px 4px;border:0;border-top:1px solid var(--hair)}
.btn.danger{color:var(--marker-ink)}
.btn.primary.danger{background:var(--marker);color:var(--on-marker);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--marker) 75%,transparent)}
.btn.primary.danger:hover{background:var(--marker-hi)}
.btn.primary.danger:disabled{opacity:.45;cursor:not-allowed}
.role{white-space:nowrap}
.notice.reading{display:flex;align-items:center;gap:10px;background:var(--surface-2);color:var(--ink-2)}
.notice.reading .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
@media (prefers-reduced-motion:reduce){
  .notice.reading .spin{animation:none}
}
.split.equal{align-items:stretch}
.split.equal>.card{display:flex;flex-direction:column}
.split.equal .sub{min-height:3em}
.split.equal .u032-zone{height:190px!important}
.split.equal .card-foot{margin-top:auto;padding-top:16px}
.list-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:2px 0 14px}
.list-tools .u031.is-field{width:min(320px,100%)}
.list-tools .u039.is-seg{width:auto;max-width:100%}
.list-tools .u039-tabs{flex-wrap:nowrap}
@media (max-width:640px){
  .list-tools .u039.is-seg{width:100%}
}
.list-tools input[type=search]{max-width:360px;height:42px}
.mgmt a{color:inherit;text-decoration:none}
.mgmt a.who-cell:hover b,.mgmt td a:hover{text-decoration:underline}
.mgmt .gid{display:inline-grid;place-items:center;min-width:46px;height:26px;padding:0 6px;border-radius:8px;background:var(--ink);color:var(--surface);font:700 12px var(--font)}
.mgmt .one{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgmt .thumb{width:72px;height:44px;flex:none;border-radius:8px;background:var(--surface-3) center/cover}
.mgmt .latest{display:flex;flex-direction:column;gap:4px;max-width:220px}
.mgmt .latest .pbar{width:160px}
.mgmt td .pbar{max-width:180px;margin-top:5px}
.mgmt tr[hidden]{display:none}
.menu-pop a{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:9px;font:600 13.5px/1 var(--font);color:var(--ink);text-decoration:none}
.menu-pop a .i{width:17px;height:17px;color:var(--ink-3)}
.menu-pop a:hover,html.kbd .menu-pop a:focus-visible{background:var(--surface-2);outline:0}
.btn.danger-solid{background:var(--marker);color:var(--on-marker)}
.btn.danger-solid:disabled{opacity:.45}
@media (max-width:640px){
  .list-tools input[type=search],.list-tools .u031.is-field{max-width:none;width:100%}
}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);font:600 13.5px/1 var(--font);color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,transform .3s var(--spring)}
.chip:hover{background:var(--surface-2);color:var(--ink)}
.chip:active{transform:scale(.96)}
.head-acts{display:flex;gap:10px;flex-wrap:wrap}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 600000s 0s,color 600000s 0s}
input:autofill{background:transparent}
.role.fe,.role.gd,.role.other{background:var(--surface-3);color:var(--ink-2)}
.g-who img,.g-who .avatar{width:44px;height:44px;border-radius:50%;flex:none}
.rail-gen .nav-h{margin:12px 10px 2px}
.layout-wide main{max-width:none}
@media (min-width:821px){
  .rail-min .rail-gen{align-items:stretch}
}
.rail-top .brand small{display:none}
.mgmt .latest-h{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.mgmt .latest .pbar{margin-top:2px}
@container (max-width:700px){
  table.list.mgmt,table.list.mgmt tbody{display:block}
  table.list.mgmt thead{display:none}
  table.list.mgmt tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 0;border-bottom:1px solid var(--hair)}
  table.list.mgmt tbody tr:last-child{border-bottom:0}
  table.list.mgmt tbody td{display:block;height:auto;padding:0;border:0;width:auto;max-width:none}
  table.list.mgmt tbody td:first-child{flex:1 1 calc(100% - 64px);min-width:0;order:0}
  table.list.mgmt tbody td.acts{flex:none;order:1;margin-left:auto}
  table.list.mgmt tbody td:not(:first-child):not(.acts){order:2}
  table.list.mgmt tbody tr[hidden],table.list.mgmt tbody tr.pg-out{display:none}
  .mgmt td[data-l]::before{content:attr(data-l) " ";font-size:12px;color:var(--ink-3);margin-right:4px}
  .mgmt td.num[data-l]{display:flex;align-items:baseline}
  table.list.mgmt tbody td:not(:first-child):not(.acts){display:flex;align-items:center;gap:8px;max-width:100%}
  .mgmt td[data-l]::before{margin-right:0;white-space:nowrap;flex:none}   /* a cell's label on one line (docs/layout.md) */
  .mgmt td .pill{white-space:nowrap;flex:none}
  table.list.mgmt .latest{flex-direction:row;align-items:center;gap:10px;max-width:none}
  table.list.mgmt .latest .pbar{width:80px;margin:0;flex:none}
  .mgmt .latest-h{flex:none}
  .mgmt .latest-h span,.mgmt .mood-w{display:none}
  table.list.mgmt tbody td:nth-child(2){padding-left:58px}
  table.list.mgmt .thumb{display:none}
  table.list.mgmt:has(.thumb) tbody td:nth-child(2){padding-left:0}
  table.list.mgmt tbody td .pbar{width:80px;flex:none;margin:0}
  table.list.mgmt tbody tr{gap:6px 18px}
  .mgmt .gdd-cell .mood-n{display:inline}
}
@container (max-width:560px){
  table.list,table.list tbody{display:block}
  table.list thead{display:none}
  table.list tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 0;border-bottom:1px solid var(--hair)}
  table.list tbody tr:last-child{border-bottom:0}
  table.list tbody td{display:block;height:auto;padding:0;border:0;width:auto;max-width:none}
  table.list tbody td:first-child{flex:1 1 calc(100% - 64px);min-width:0;order:0}
  table.list tbody td.acts{flex:none;order:1;margin-left:auto}
  table.list tbody td:not(:first-child):not(.acts){order:2}
  table.list tbody tr[hidden],table.list tbody tr.pg-out{display:none}
}
tr.pg-out{display:none}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.pager[hidden]{display:none}
.pg-info{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pg-btns{display:flex;align-items:center;gap:4px}
.pg-btns button{min-width:36px;height:36px;padding:0 8px;border:0;border-radius:10px;background:none;color:var(--ink-2);font:600 13.5px/1 var(--font);font-variant-numeric:tabular-nums;cursor:pointer;display:inline-grid;place-items:center}
.pg-btns button:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.pg-btns button[aria-current="page"]{background:var(--ink);color:var(--surface)}
.pg-btns button:disabled{opacity:.35;cursor:default}
.pg-btns button svg{width:16px;height:16px}
.pg-gap{min-width:24px;text-align:center;color:var(--ink-4)}
table.mgmt{table-layout:fixed}
table.mgmt td{overflow:hidden}
table.mgmt td.acts{overflow:visible}
table.mgmt td a{min-width:0}
.mgmt td>a:not(.who-cell):not(.latest){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.mgmt td:first-child .who-cell{min-width:0}
table.mgmt td:first-child .who-t{min-width:0}
table.mgmt td:first-child .who-t b,table.mgmt td:first-child .one{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgmt .latest{max-width:100%}
.mgmt .latest-h{min-width:0}
.mgmt .latest-h span{overflow:hidden;text-overflow:ellipsis}
.mgmt .latest .pbar{width:min(160px,100%)}
.mgmt .gdd-cell{white-space:nowrap}
.mgmt .gdd-cell .mood-n{display:block}
.u039.is-seg .u039-tabs{background:var(--surface-2);box-shadow:none}
.u039.is-seg .u039-pill{background:var(--accent);box-shadow:0 6px 14px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.u039.is-seg .u039-tab[aria-selected="true"]{color:var(--on-accent)}
.u039.is-seg .u039-tab{color:var(--ink-3)}
.u039.is-seg .u039-tab:hover{color:var(--ink)}
.u039.is-seg .u039-tab .ct{background:var(--surface-3);color:var(--ink-2)}
.u039.is-seg .u039-tab[aria-selected="true"] .ct{background:var(--surface-2);color:var(--ink)}
.u039-tab:focus{outline:none}
html.kbd .u039-tab:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink-3)}
.u039.is-seg.wide{display:block;width:100%}
.u039.is-seg.wide .u039-tab{flex:1 1 0;justify-content:center;padding:0 8px}
.pg-btns button[aria-current="page"]{background:var(--surface-3);color:var(--ink);font-weight:700}
.mgmt .gid{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.rail .u039.is-seg .u039-tabs{background:var(--surface-3)}
.chips{display:flex;flex-wrap:nowrap;gap:6px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  padding-right:24px;mask-image:linear-gradient(90deg,var(--ink) calc(100% - 24px),transparent)}   /* one row (docs/layout.md) */
.chips::-webkit-scrollbar{display:none}
.chips>*{flex:none;white-space:nowrap}
.chips .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:600 13px/1 var(--font);text-decoration:none}
.chips a.chip:hover{color:var(--ink);background:var(--surface-3)}
.chips .chip[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--hair-2),0 4px 10px -6px color-mix(in srgb,var(--shade) 25%,transparent)}

/* containers: a block whose tables restack by its own width (.cq), not the window's */
.cq{container-type:inline-size}
/* a person cell: name over e-mail, the e-mail cut with … */
.who-t{display:flex;flex-direction:column;min-width:0}
.who-t .mail{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* touch screens: 16px fields, so iOS does not zoom the page on focus */
@media (pointer:coarse){input,textarea,.u028-ta,.u062-box input{font-size:16px!important}}
/* #039 inside the rail, and the theme button in the rail top */
.rail .u039.is-seg .u039-tabs{background:var(--surface-3)}
.rail .u039.is-seg .u039-tab{color:var(--ink-2)}
.rail-top .theme-btn{flex:none;color:var(--ink-3)}
.rail-top .theme-btn:hover{color:var(--ink)}
/* slim rounded scrollbars on the page and every scrolling box (Chrome and Safari draw these; Firefox uses its thin bar) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--thumb);border:3px solid transparent;border-radius:999px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--thumb-hi)}
@supports (-moz-appearance:none){*{scrollbar-width:thin;scrollbar-color:var(--thumb) transparent}}

/* dialogs: the page behind dims */
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}
/* #031 tiles: a tint of their colour, not a solid block (readable in both themes); an open list never scrolls the page */
.u031-flag{width:auto;min-width:36px;padding:0 5px;background:color-mix(in srgb,var(--c) 13%,var(--surface));color:color-mix(in srgb,var(--c) var(--flag-mix),var(--ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent)}
.u031-o .u031-flag{width:auto;min-width:36px;padding:0 4px}
.u031-list{overscroll-behavior:contain}
/* a pager of links (server pages), the same look as the button pager */
.pg-btns a.pg-a{min-width:36px;height:36px;padding:0 8px;border-radius:10px;display:inline-grid;place-items:center;color:var(--ink-2);font:600 13.5px/1 var(--font);text-decoration:none;font-variant-numeric:tabular-nums}
.pg-btns a.pg-a:hover{background:var(--surface-2);color:var(--ink)}
.pg-btns a.pg-a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}

/* a short progress bar (priority shares of a review, steps of a run) */
.pbar{display:flex;gap:3px;height:8px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.pbar i{display:block;height:100%}
/* the page keeps its scrollbar gutter, so opening a dialog or a short page does not shift the layout */
html{scrollbar-gutter:stable}
/* rail top: brand, theme and fold buttons on one line */
.rail-top .brand b{white-space:nowrap}
@media (min-width:821px){html:not(.rail-min) .rail-top{gap:0}html:not(.rail-min) .rail-top>.icon-btn{width:30px}}

/* animations used above (the extraction from the apps had lost their @keyframes wrappers) */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dlg{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes rowin{from{opacity:0;transform:translateY(-8px)}}
@keyframes live{50%{opacity:.35}}

/* badge rows (docs/layout.md): one row holds one kind of information and never wraps on its own; too long, it scrolls
   inside itself. .wrap lets whole .grp groups go to the next line, never one badge alone */
.badges{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  padding-right:24px;mask-image:linear-gradient(90deg,var(--ink) calc(100% - 24px),transparent)}   /* the fade covers only the padding when it all fits */
.badges::-webkit-scrollbar{display:none}
.badges>*{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.badges.wrap{flex-wrap:wrap;overflow:visible;row-gap:6px;padding-right:0;mask-image:none}
.badges .grp{display:inline-flex;align-items:center;gap:6px;flex:none}
.meta-row{display:flex;align-items:center;gap:8px;min-width:0}
.meta-row>*{flex:none}
.meta-row>.grow{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-row>.end{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.meta-row>.end:first-child{margin-left:0}   /* nothing before it (a list of one game's runs): the badges start the row */
.foot-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.foot-row>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot-row>:last-child{flex:none;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.tools-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

@media (max-width:640px){.crumb{min-height:32px;display:inline-flex;align-items:center}}   /* the way back is a tap target (docs/layout.md) */
@media (max-width:820px){.rail-top .brand span{min-width:0;overflow:hidden}.rail-top .brand b{overflow:hidden;text-overflow:ellipsis}}   /* the app's name gives way to the buttons */

/* the way back to HUB E18 (README "hub-back"; Wayne 2026-10-24: every page goes back to the hub easily, and "Trang chủ" in a
   rail only repeated the app's logo, so the hub takes its place): the first item of the rail's .nav-main, an ordinary nav
   item (label hidden on a folded rail, in the phone's drop-down), and a pill at the top left of a signed-out .auth screen.
   The mark is the hub's "Ứng dụng" icon, drawn here (mask, the link's own colour), so the markup is one line in Jinja, Go
   and static pages alike: <a class="hub-back" href="<hub>/" title="HUB E18: mọi ứng dụng của studio"><span class="lbl">HUB E18</span></a> */
.hub-back::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.8'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.8'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.8'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.8'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.8'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.8'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.auth{position:relative}
.auth>.hub-back{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 12px;border-radius:999px;
  background:var(--surface);box-shadow:var(--shadow);color:var(--ink-2);font:600 13px/1 var(--font);text-decoration:none;white-space:nowrap;transition:color .2s}
.auth>.hub-back::before{width:16px;height:16px}
.auth>.hub-back:hover{color:var(--accent-ink)}
@media (max-width:820px){.auth>.hub-back{top:12px;left:12px}}