/* Race v3 (BRD LF-1 to LF-6, 8 Nov 2026): the hub and Studio use the approved wireframe's design system
   (brand.css + app.css, copied as they are). This file only (1) fits the shells to a real app (no wireframe
   review bar) and (2) gives the markup the existing screens already draw - plain buttons, .tabs, tables,
   page titles - the wireframe's look, so every page reads as one product. */

:root { --mist: var(--hb-mist); --slate: var(--hb-slate); --white: var(--hb-white); --cta: var(--hb-cta-fill); --night: var(--hb-night); }

/* ---- shells: no wireframe bar above, so the side menu and the header sit at the top ---- */
.studio { min-height: 100vh; }
.side { top: 0; height: 100vh; }
.side .brand .logos { display: flex; align-items: center; gap: 12px; }
.side { overflow-x: hidden; }
.side .brand .logos { gap: 8px; max-width: 100%; }
.side .brand .logos img.hb { width: 104px !important; height: auto; flex: none; }
.side .brand .logos img.race { height: 20px !important; width: auto; max-width: 66px; object-fit: contain; flex: none; }
.side .brand .logos .sep { width: 1px; height: 24px; background: var(--hb-line); }
.side a { position: relative; }
.side svg.svg-i, .topnav svg.svg-i, .btn svg.svg-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mhead { position: sticky; top: 0; z-index: 5; }
.mhead .who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
#app { display: none; }
#app.on { display: grid; }
#app.on.hubapp { display: block; }

/* ---- sign-in, as the wireframe's .auth ---- */
.auth { min-height: 100vh; }   /* the wireframe subtracts its review bar; the app has none */
.auth .card { padding: 34px 30px 28px; }
.auth .stack > * + * { margin-top: 14px; }
.auth .logos { margin-bottom: 14px; }

/* ---- the screens Studio and the hub draw, in the wireframe's look ---- */
.mbody, .page { display: flex; flex-direction: column; gap: 20px; }
.mbody > div:first-child:has(> h1), .page > div:first-child:has(> h1) { padding-bottom: 18px; border-bottom: 1px solid var(--hb-line); }
.mbody > div:first-child:has(> h1) h1, .page > div:first-child:has(> h1) h1 { font-size: 30px; }
.mbody > div:first-child:has(> h1) p, .page > div:first-child:has(> h1) p { font-size: 15px; margin-top: 6px; max-width: 780px; }
.mbody h2, .page h2 { font-size: 18px; }
.mbody .card, .page .card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mbody .card .card, .page .card .card { box-shadow: none; }
.cards, .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.num { font-size: 30px; font-weight: 600; color: var(--hb-ink); line-height: 1.1; }
.row { flex-wrap: wrap; align-items: flex-end; }
.row > div { min-width: 160px; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--hb-ink); margin-bottom: 6px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { width: 100%; }
input[type=file] { width: 100%; font-size: 13px; }
/* the input kinds the wireframe's sheet leaves out, in the same look */
input[type=search], input[type=time], input[type=datetime-local], input:not([type]) { border: 1px solid var(--hb-line); border-radius: var(--hb-radius-sm); padding: 10px 14px; background: var(--hb-white); color: var(--hb-ink); }
input[type=search]:focus, input[type=time]:focus, input[type=datetime-local]:focus, input:not([type]):focus { outline: 2px solid var(--hb-blue); outline-offset: 0; border-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--hb-line); background: var(--hb-white); color: var(--hb-ink);
  border-radius: var(--hb-pill); padding: 9px 18px; min-height: 40px; font-weight: 500; cursor: pointer; }
button:hover { border-color: var(--hb-slate); }
button.primary { background: var(--hb-cta-fill); border-color: transparent; color: var(--hb-white); font-weight: 600; }
button.primary:hover { box-shadow: 0 6px 18px rgba(123,42,144,.28); }
button.danger { color: var(--hb-bad); }
button.danger:hover { border-color: var(--hb-bad); background: var(--hb-bad-bg); }
button.link { border: 0; background: none; color: var(--hb-blue-deep); padding: 4px 6px; min-height: 0; }
button[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
:focus-visible { outline: 3px solid var(--hb-blue); outline-offset: 2px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--hb-line); }
.tabs a { padding: 10px 14px; color: var(--hb-slate); font-weight: 500; position: relative; text-decoration: none; }
.tabs a:hover { color: var(--hb-ink); text-decoration: none; }
.tabs a.on { color: var(--hb-ink); font-weight: 600; }
.tabs a.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--hb-headline); }
.tablewrap { background: var(--hb-white); border: 1px solid var(--hb-line); border-radius: var(--hb-radius); box-shadow: var(--shadow); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--hb-slate); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 14px; border-bottom: 1px solid var(--hb-line); background: var(--hb-mist); }
td { padding: 12px 14px; border-bottom: 1px solid var(--hb-line); vertical-align: middle; color: var(--hb-ink); }
tr:last-child td { border-bottom: 0; }
.chip.bad { background: var(--hb-bad-bg); color: var(--hb-bad); border-color: transparent; }
.msg { min-height: 20px; font-size: 13.5px; } .msg.ok { color: var(--hb-ok); } .msg.bad { color: var(--hb-bad); }
dialog { border: 0; border-radius: var(--hb-radius); padding: 24px; width: min(560px, 94vw); box-shadow: 0 24px 60px rgba(15,18,34,.25); }
dialog::backdrop { background: rgba(15,18,34,.45); }
dialog h2 { margin-bottom: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Studio step 2 (ST-1 to ST-4, SEQ-1 to SEQ-5) ---- */
svg.svg-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }   /* line icons everywhere, as the wireframe */
.mbody > .msg:empty { display: none; }
.side .foot .who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: var(--hb-radius-sm); background: var(--hb-mist); }
.side .foot .who img { height: 18px; width: auto; max-width: 54px; object-fit: contain; flex: none; }
.side .foot .who > span { display: flex; flex-direction: column; min-width: 0; }
.side .foot .who b { font-size: 13px; font-weight: 600; color: var(--hb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .foot .who .small { font-size: 11px; }
.side a, .side nav a { white-space: nowrap; }
a.stat-tile { text-decoration: none !important; color: inherit; position: relative; overflow: hidden; }
a.stat-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hb-spectrum); }
a.stat-tile:hover { border-color: var(--hb-slate); }
.hm-short { display: flex; gap: 12px; flex-wrap: wrap; }
.faces { display: flex; flex-direction: column; gap: 10px; }
.face { display: flex; gap: 12px; align-items: center; }
.face .pic { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--hb-mist); border: 1px solid var(--hb-line); display: grid; place-items: center; flex: none; font-weight: 600; color: var(--hb-purple); }
.face .pic img { width: 100%; height: 100%; object-fit: cover; }
.face > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.attn { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hb-line); }
.attn:first-child { border-top: 0; padding-top: 0; }
.attn span { flex: 1; }
.attn .svg-i { color: var(--hb-warn); } .attn.ok .svg-i { color: var(--hb-ok); }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--hb-radius-sm); background: var(--hb-mist); border: 1px solid var(--hb-line); font-size: 14px; }
.note .svg-i { color: var(--hb-blue-deep); margin-top: 1px; }
.btn.sm, a.btn.sm { padding: 6px 14px; font-size: 13px; min-height: 0; }
.poster { aspect-ratio: 9/16; background: var(--hb-mist); border-radius: 10px; overflow: hidden; display: grid; place-items: center; position: relative; text-decoration: none !important; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seq-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.seq-card .poster { max-height: 300px; }
.seq-card .poster .count { position: absolute; left: 8px; bottom: 8px; background: rgba(15,18,34,.72); color: #fff; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--hb-pill); }
.seq-card .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-items { display: flex; flex-direction: column; }
.seq-item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-top: 1px solid var(--hb-line); cursor: grab; background: var(--hb-white); }
.seq-item:first-child { border-top: 0; }
.seq-item.dragging { opacity: .45; }
.seq-item.over { box-shadow: inset 0 3px 0 var(--hb-blue); }
.seq-item .pos { width: 26px; text-align: center; font-weight: 600; color: var(--hb-slate); }
.seq-item .poster.sm { width: 44px; height: 78px; flex: none; border-radius: 8px; }
.seq-item .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.seq-item .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-item button.link { display: inline-flex; gap: 4px; }
dialog.wide { width: min(880px, 94vw); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; max-height: 52vh; overflow: auto; padding: 4px; margin-top: 10px; }
button.pick { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; border-radius: 12px; text-align: left; min-height: 0; font-weight: 400; }
button.pick b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.pick.on { border-color: var(--hb-blue); box-shadow: 0 0 0 2px var(--hb-blue); }
button.pick .tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--hb-blue); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.player video { width: 100%; max-height: 64vh; aspect-ratio: 9/16; background: #000; border-radius: 10px; }

/* ---- Studio step 3 (VID-1 to VID-13) ---- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.vcard { padding: 12px !important; gap: 8px !important; }
.vcard .poster { width: 100%; border: 0; padding: 0; cursor: pointer; min-height: 0; border-radius: 10px; max-height: 320px; }
.vcard .poster .playbtn { position: absolute; inset: auto auto 50% 50%; transform: translate(-50%, 50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(15,18,34,.6); color: #fff; display: grid; place-items: center; opacity: .85; transition: opacity .15s; }
.vcard .poster:hover .playbtn { opacity: 1; }
.vcard .poster .playbtn .svg-i { fill: #fff; stroke: #fff; }
.vcard .poster .len { position: absolute; right: 8px; bottom: 8px; background: rgba(15,18,34,.72); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: var(--hb-pill); }
.vcard .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtools .chips .chip { min-height: 0; font-weight: 500; }
.vtools .msg:empty { display: none; }
button.chip { cursor: pointer; }
.tylist { max-height: 46vh; overflow: auto; margin: 6px 0 12px; }
.tyrow { display: flex; gap: 12px; align-items: center; padding: 8px 2px; border-top: 1px solid var(--hb-line); }
.tyrow span:first-child { flex: 1; font-weight: 500; }
dialog.playerdlg { width: min(440px, 94vw); }
.player { display: flex; flex-direction: column; gap: 6px; }
.player video { width: 100%; max-height: 66vh; aspect-ratio: 9/16; background: #000; border-radius: 10px; object-fit: contain; }

/* ---- Studio step 4 (MV-0 to MV-4) ---- */
.rail .s { min-height: 0; cursor: pointer; } .rail .s[disabled] { cursor: default; opacity: .6; }
.keysfirst { align-items: flex-start; } .keysfirst .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--hb-warn-bg); color: var(--hb-warn); display: grid; place-items: center; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pcard { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; border-radius: 14px; border: 1px solid var(--hb-line); background: var(--hb-white); text-align: left; min-height: 0; font-weight: 400; position: relative; cursor: pointer; }
.pcard.on { border-color: var(--hb-blue); box-shadow: 0 0 0 3px var(--hb-blue); }
.pcard .pic { aspect-ratio: 9/16; background: var(--hb-mist); border-radius: 10px; overflow: hidden; display: grid; place-items: center; color: var(--hb-purple); }
.pcard .pic img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }   /* LF-3: never cut at the head */
.pcard .chip { align-self: flex-start; font-size: 11px; }
.pcard .enlarge { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.9); border: 1px solid var(--hb-line); border-radius: var(--hb-pill); font-size: 12px; padding: 2px 10px; color: var(--hb-ink); }
.pcard.add { cursor: default; } .pcard.add .pic .svg-i { width: 34px; height: 34px; }
.bigpic { background: var(--hb-mist); border-radius: 12px; display: grid; place-items: center; }
.bigpic img { max-height: 70vh; max-width: 100%; object-fit: contain; }
.vlist { display: flex; flex-direction: column; border: 1px solid var(--hb-line); border-radius: 12px; overflow: hidden; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--hb-line); }
.vrow:first-child { border-top: 0; } .vrow.on { background: var(--hb-mist); }
.vrow.add { grid-template-columns: minmax(0, 1fr) auto; }
.vpick { display: flex; gap: 12px; align-items: center; margin: 0; cursor: pointer; min-width: 0; }
.vpick input { width: 18px; height: 18px; flex: none; }
.vt { display: flex; flex-direction: column; min-width: 0; } .vt b, .vt .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* long names never stretch the page */
.vrow button { min-height: 34px; padding: 5px 14px; }
#gScript { width: 100%; border: 1px solid var(--hb-line); border-radius: 10px; padding: 10px 12px; font: inherit; }
.summary { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.summary .pic { aspect-ratio: 9/16; background: var(--hb-mist); border-radius: 10px; overflow: hidden; } .summary .pic img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.summary dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; margin: 0; } .summary dt { color: var(--hb-slate); font-size: 13px; } .summary dd { margin: 0; }
.summary .script { white-space: pre-wrap; max-height: 160px; overflow: auto; }
.wzcard #wzBody { display: flex; flex-direction: column; gap: 14px; }
.wzcard #wzBody > h2 + .small { margin-top: -8px; }
.notyet { margin: 6px 0 6px 18px; padding: 0; } .notyet li { margin: 2px 0; }
.keepgrid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---- Studio step 5 (VIS-1 to VIS-4) ---- */
.vtable tr.click { cursor: pointer; } .vtable tr.click:hover td { background: var(--hb-mist); }
.vface { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--hb-mist); border: 1px solid var(--hb-line); display: grid; place-items: center; font-weight: 600; color: var(--hb-purple); }
.vface img { width: 100%; height: 100%; object-fit: cover; }
.vcard-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.vbig { aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; background: var(--hb-mist); display: grid; place-items: center; font-size: 64px; color: var(--hb-purple); }
.vbig img { width: 100%; height: 100%; object-fit: cover; }
.vclip video { width: 100%; max-height: 300px; background: #000; border-radius: 10px; }
.vvisits { font-size: 14px; } .vvisits td, .vvisits th { padding: 8px 10px; }

/* ---- Studio step 6 (KEY-1 to KEY-3) ---- */
table.keys td { vertical-align: top; } table.keys td:first-child { min-width: 150px; } table.keys td:last-child { min-width: 300px; }
.keyedit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .keyedit input { flex: 1 1 160px; min-width: 140px; }
.keyedit button { min-height: 36px; padding: 6px 14px; }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .5px; }

/* ---- Studio step 7 (VIP-1 to VIP-5) ---- */
button.sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.vipacts { white-space: nowrap; text-align: right; } .vipacts button { margin: 2px 0; }
.says { font-weight: 500; color: var(--hb-purple); min-height: 20px; margin: 0; }
details.setup summary { cursor: pointer; list-style: revert; }
.setrow { border-top: 1px solid var(--hb-line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.setrow code { font-size: 12px; background: var(--hb-mist); padding: 2px 6px; border-radius: 6px; word-break: break-all; }

/* ---- Studio step 8 (PIN-1, PIN-2, BOX-1) ---- */
.pincard .pin { font-size: 52px; font-weight: 600; letter-spacing: 12px; color: var(--hb-ink); font-variant-numeric: tabular-nums; }
.daylist { margin: 0; padding-left: 18px; } .daylist li { margin: 6px 0; }

/* ---- the hub ---- */
.hubapp .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }   /* three across, as the wireframe */
.hubapp .top .in { max-width: 1180px; }
.hubapp .user button { min-height: 34px; padding: 5px 14px; font-size: 13px; }
.tile { text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; position: relative; overflow: hidden; border-radius: var(--hb-radius);
  border: 1px solid var(--hb-line); background: var(--hb-white); box-shadow: var(--shadow); color: var(--hb-slate); font-weight: 400; align-items: stretch; min-height: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease; }
.tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent, var(--hb-spectrum)); }
.tile:hover { transform: translateY(-2px); border-color: var(--hb-slate); box-shadow: 0 14px 30px rgba(15,18,34,.08); }
.tile .n { position: absolute; top: 18px; right: 20px; font-weight: 600; font-size: 11px; color: var(--hb-slate); }
.tile b { font-size: 17px; color: var(--hb-ink); }
.tile .ic { width: 46px; height: 46px; border-radius: var(--hb-radius-sm); display: grid; place-items: center; background: var(--hb-mist); color: var(--icol); }
.tile .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile .open { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--hb-ink); color: var(--hb-white); border-radius: var(--hb-pill); padding: 7px 16px; font-weight: 600; font-size: 13px; }
.tile.ic-studio .open { background: var(--hb-cta-fill); }
.doc { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hb-line); flex-wrap: wrap; }

.ic-vip { --icol: var(--hb-cyan, #00B7E8); --accent: linear-gradient(90deg, var(--hb-magenta), var(--hb-blue)); }
.tile.ic-vip::before { background: linear-gradient(90deg, var(--hb-magenta), var(--hb-blue)); }

/* ---- hub step 9 (HUB-2, DOC-2, Training) ---- */
.hubqr { width: 240px; height: 240px; margin: 12px auto; padding: 12px; background: #fff; border: 1px solid var(--hb-line); border-radius: 14px; }
.hubqr svg { width: 100%; height: 100%; display: block; }
.page .chips .chip { min-height: 0; }
.doctable td:first-child { min-width: 240px; }
.tsum { flex-direction: row !important; align-items: center; gap: 16px !important; } .tsum .bar { flex: 1; height: 8px; border-radius: 8px; background: var(--hb-mist); overflow: hidden; }
.tsum .bar span { display: block; height: 100%; background: var(--hb-spectrum); }
.tsteps { margin: 8px 0 0; padding-left: 20px; } .tsteps li { margin: 8px 0; }
/* Training video tours (Rajat, 8 Nov 2026) */
.tourgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 12px; }
.tourcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; min-height: 150px; text-align: left; color: #fff; border: 0; border-radius: var(--hb-radius); background: var(--hb-night); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tourcard:hover, .tourcard:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,18,34,.18); }
.tourcard b { font-size: 17px; line-height: 1.3; color: #fff; } .tourcard .small { color: #C8CDE6; } .tourcard .chip { margin-top: auto; }
.tourplay { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--hb-cta-fill); margin-bottom: 6px; }
.tourplay svg { width: 20px; height: 20px; fill: #fff; }
.tplay { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; display: block; }
.tsay { margin-top: 10px; } .tsay summary { cursor: pointer; font-weight: 600; }
dialog:has(.tplay) { width: min(1100px, 94vw); }

/* ---- hub documents: a pack, viewed in a popup (Rajat, 8 Nov 2026) ---- */
.docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.doccard { display: flex; gap: 18px; padding: 22px; background: var(--hb-white); border: 1px solid var(--hb-line); border-radius: var(--hb-radius); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.doccard:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,18,34,.08); }
.pdficon { width: 52px; flex: none; } .pdficon svg { width: 52px; height: auto; display: block; }
.docbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.docbody h3 { font-size: 17px; margin: 0; color: var(--hb-ink); }
.docbody p { margin: 0; color: var(--hb-slate); font-size: 14px; line-height: 1.5; flex: 1; }
.docsec { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hb-purple); }
.docmeta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--hb-slate); }
.docacts { margin-top: 6px; } .docacts button.primary { min-height: 36px; padding: 6px 22px; }
dialog.docview { width: min(980px, 96vw); height: 92vh; padding: 0; display: flex; flex-direction: column; }
dialog.docview[open] { display: flex; }
dialog.docview form { display: flex; flex-direction: column; height: 100%; }
.dvhead { display: flex; gap: 16px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--hb-line); }
.dvhead > div { flex: 1; min-width: 0; } .dvhead h2 { margin: 2px 0 0; font-size: 19px; }
.dvpages { flex: 1; overflow: auto; background: #E9EBF2; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 18px; user-select: none; -webkit-user-select: none; }
.dvpage { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; }
.dvpage img { max-width: 100%; width: 860px; background: #fff; box-shadow: 0 6px 24px rgba(15,18,34,.15); pointer-events: none; min-height: 200px; }
.dvnote { margin: 0; padding: 10px 22px; border-top: 1px solid var(--hb-line); }
@media print { body.laptop-app * { display: none !important; } }

/* ---- laptop only (LF-4): on a phone, one card instead of the app ---- */
.lap-only { display: none; }
@media (max-width: 899px) {
  body.laptop-app > *:not(.lap-only) { display: none !important; }
  body.laptop-app .lap-only { display: grid; min-height: 100vh; place-items: center; padding: 24px 16px; background: var(--hb-mist); }
  .lap-only .card { max-width: 420px; width: 100%; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; text-align: center; position: relative; overflow: hidden; }
  .lap-only .card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--hb-spectrum); }
  .lap-only .logos { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .lap-only .logos img.hb { width: 140px; } .lap-only .logos img.race { height: 26px; }
  .lap-only a.btn { align-self: center; }
}


/* ---- HUB v3 (A-71, mock-up approved by Rajat 9 Nov 2026): four apps, each with where it opens ---- */
.hubapp .brand img.race { height: 52px; width: auto; }          /* "race logo is not readable": twice the size */
.hubapp .brand img.hb { height: 26px; width: auto; }
.side .brand .logos img.race { height: 30px !important; max-width: 98px; }
/* ---- ONE-PAGE HUB (A-77, design approved 9 Nov night: "it'll come in the one page view"). Graphite & Emerald, the theme
   of Maya's glass, so the hub and the HoloBox read as one product. All four apps on one 1440 x 900 screen: each tile is its
   real picture, where it opens, one line on what it does, how to open it, and one button. Scoped to the hub only. ---- */
.hubapp { --hg-ink: #1B2129; --hg-ink2: #4A5260; --hg-ink3: #5E6572; --hg-acc: #0E7A55; --hg-accd: #0B5E41; --hg-accs: #E8F6EF; --hg-line: #E3E6EA; --hg-bg: #F9FAFB;
  background: var(--hg-bg); min-height: 100vh; color: var(--hg-ink); }
.hubapp .hb-spectrum-bar { display: none; }
.hubapp .top .in { max-width: 1344px; padding: 12px 24px; }
.hubapp .page { max-width: 1344px; padding: 28px 24px 24px; gap: 0; }
.hubapp .page > .hubintro { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: 0; border: 0; }
.hubapp .page > .hubintro h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--hg-ink); }
.hubapp .page > .hubintro p { margin: 0; font-size: 15px; color: var(--hg-ink2); max-width: none; }
/* FIVE CARDS IN ONE ROW (A-112, 12 Nov 2026; Rrahul: "content needs simplification and images / the placards need clarity").
   One sentence a card, no "How to open" box; a small line under the button says what it will ask for. */
.hubapps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hubapp .app { background: #fff; border: 1px solid var(--hg-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -16px rgba(16,24,40,.14); }
.hubapp .app .pic { height: 222px; display: grid; place-items: center; background: linear-gradient(160deg in oklab, var(--hg-accs), #fff); position: relative; overflow: hidden; }
/* A drawing stands clear of the label over it; the photograph fills its frame as before. */
.hubapp .app .pic img { max-height: 170px; max-width: 92%; margin-top: 38px; }
.hubapp .app .pic.photo img { max-height: none; max-width: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; margin-top: 0; }
.hubapp .app .where { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.94); font-size: 12.5px; font-weight: 500; color: var(--hg-ink); box-shadow: 0 2px 8px rgba(16,24,40,.12); }
.hubapp .app .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.hubapp .app .rule { width: 32px; height: 3px; border-radius: 2px; background: var(--hg-acc); margin-bottom: 12px; }
.hubapp .app h2 { margin: 0 0 8px; font-size: 18.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--hg-ink); min-height: 2.5em; display: flex; align-items: flex-end; }
.hubapp .app .what { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--hg-ink2); }
.hubapp .app .needs { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hg-ink3); min-height: 2.9em; }
.hubapp .app .needs b { color: var(--hg-ink2); font-weight: 600; }
.hubapp .app .go { margin-top: auto; align-self: stretch; text-align: center; font: 500 15px Poppins, system-ui, sans-serif; color: #fff; background: var(--hg-ink); border: 0; border-radius: 999px; padding: 12px 10px; min-height: 44px; cursor: pointer; }
.hubapp .app .go.primary { background: var(--hg-acc); }
.hubapp .app .go:focus-visible { outline: 3px solid var(--hg-acc); outline-offset: 2px; }
/* A-126: a button's words may now take two lines on a laptop card ("Open Presentation & Audience"). All five buttons are
   one height, so they still stand on one line, and two lines are split evenly. The tall screen has room for one line. */
.hubapp .app .go { min-height: 52px; padding: 7px 10px; line-height: 1.25; text-wrap: balance; }
/* The page's foot (A-126): under the five cards, under the sign-in card, and under the "made for a laptop" card on a phone.
   Its one rule is .pagefoot in app.css; here is only where it stands in each of the hub's three views. */
.hubapp .pagefoot { padding: 10px 24px 22px; color: var(--hg-ink3); }
#app.on.hubapp { display: flex; flex-direction: column; }      /* a column, so the foot stands at the bottom of the window when the cards end above it */
.hubapp > .page { flex: 1 0 auto; width: 100%; }
/* The page is given the focus when it opens, so a screen reader starts at its top; it is not a control, so it draws no ring
   (seen in the browser: after a reload a blue frame stood round the whole hub, now down to the foot). Buttons keep theirs. */
.hubapp > .page:focus { outline: none; }
.auth:has(> .pagefoot), .lap-only:has(> .pagefoot) { grid-template-rows: 1fr auto; }
.auth > .pagefoot, .lap-only > .pagefoot { position: relative; z-index: 1; align-self: end; padding-bottom: 0; }
@media (max-width: 1180px) { .hubapps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hubapp .page > .hubintro { flex-direction: column; gap: 6px; } }

/* Maya's jacket, a colour for each day (A-120, 12 Nov 2026): seven days in a row, each with her picture; thirteen dots. */
.jkweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.jkday { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 6px 12px; border: 1px solid var(--hb-line, #e3e6ee); border-radius: 14px; background: #fff; cursor: pointer; overflow: hidden; text-align: center; }
.jkday img { width: calc(100% + 12px); aspect-ratio: 9 / 13; object-fit: cover; object-position: center top; background: #f4f5f7; display: block; margin-bottom: 6px; }
.jkday.on { outline: 3px solid #0E7C5A; outline-offset: -1px; }
.jkday:focus-visible { outline: 3px solid #005A9E; outline-offset: 2px; }
.jkday .btn { margin-top: 6px; }
.jkdots { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.jkdot { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #c9ceda; cursor: pointer; }
.jkdot.on { box-shadow: 0 0 0 3px #0E7C5A; }
.jkdot:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 1000px) { .jkweek { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- STUDIO'S FRAME (A-124, PLAN.md 4.2, 4.4, 4.7, 4.8, 4.10; built as A-126, 12 Nov 2026). Studio's rules only; the hub's are B2's. ---- */
/* 4.7 The one question a pop-up asks before a click outside closes it with something typed and not saved. */
.dlgask { position: sticky; bottom: -24px; margin: 18px -24px -24px; padding: 12px 24px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--hb-warn-bg); border-top: 1px solid var(--hb-line); color: var(--hb-ink); font-weight: 500; }
.dlgask[hidden] { display: none; }
.dlgask .row { gap: 8px; flex-wrap: nowrap; }
.dlgask button { min-height: 36px; padding: 6px 16px; white-space: nowrap; }
/* 4.2 "HoloBox911 Studio" at the right end of the bar across the top of every screen; the left panel keeps the menu only. */
.mhead .mbrand { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; border-radius: 8px; }
.mhead .mbrand img.hb { height: 26px; width: auto; display: block; }
.mhead .mbrand .label { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-transform: none; background: var(--hb-cta-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side nav { padding-top: 14px; }
/* 4.4 The footer: under every Studio screen and on the sign-in card. Small and quiet; #636980 is 5.4 to 1 on white. */
.studio .main { display: flex; flex-direction: column; min-height: 100vh; }
.studio .main > .mbody { flex: 1 0 auto; width: 100%; }
.studio .pagefoot, #signin .pagefoot { margin: 0; font-size: 12px; line-height: 1.5; color: #636980; }
.studio .pagefoot { padding: 12px 32px 16px; border-top: 1px solid var(--hb-line); }
#signin .pagefoot { text-align: center; margin-top: 18px; }
/* 4.8 One header for every screen: the title on one line, at most a short note and a chip, and at the right the period and ONE Actions button.
   "too much space": less air above the title than before, so the data starts higher on the screen. */
.studio .mbody { padding: 20px 32px 28px; gap: 16px; }
/* (The wireframe's sheet has an older .phead, with a rule under it and a wide margin: those are taken off here.) */
.phead { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; min-height: 42px; padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
/* What a screen puts under its header keeps the same step between its blocks; a place kept for later takes no room while empty. */
#vBody, #sBody { display: flex; flex-direction: column; gap: 16px; }
#vBody:empty, #sBody:empty, #dChips:empty, #dList:empty, #tSum:empty, #tTours:empty, #tList:empty, #vBody > .msg:empty, #sBody > .msg:empty { display: none; }
.phead-t { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.phead h1 { font-size: 24px; font-weight: 600; margin: 0; }
.phead-t .chip { align-self: center; }
.phead-note { font-size: 13px; color: var(--hb-slate); }
.phead-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.phead-r label { display: inline; margin: 0; font-size: 13px; }
.phead-r input, .phead-r select { width: auto !important; padding: 7px 10px; min-height: 38px; }
.phead-r .hfilter { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phead-r .hfilter[hidden] { display: none; }
/* The menu: Actions on a screen, and a card's own actions. */
.actmenu { position: relative; display: inline-flex; }
.actbtn { font-weight: 600; padding: 8px 14px 8px 18px; }
.actbtn .svg-i { width: 16px; height: 16px; transition: transform .15s; }
.actmenu.open .actbtn { border-color: var(--hb-slate); } .actmenu.open .actbtn .svg-i { transform: rotate(180deg); }
.actlist { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--hb-white); border: 1px solid var(--hb-line); border-radius: 14px; box-shadow: 0 12px 30px rgba(15,18,34,.14); }
.actlist[hidden] { display: none; }
.actlist button { border: 0; border-radius: 10px; justify-content: flex-start; text-align: left; padding: 9px 12px; min-height: 40px; white-space: nowrap; font-weight: 500; background: none; }
.actlist button:hover, .actlist button:focus-visible { background: var(--hb-mist); }
.actlist button:focus-visible { outline: 2px solid var(--hb-blue-deep); outline-offset: -2px; }
.actlist button.danger:hover { background: var(--hb-bad-bg); border: 0; }
/* The period buttons: Today, This month, This quarter, Custom dates. */
.period { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--hb-white); border: 1px solid var(--hb-line); border-radius: var(--hb-pill); padding: 3px; }
.seg button { border: 0; background: none; min-height: 32px; padding: 5px 14px; font-size: 13px; color: var(--hb-slate); }
.seg button[aria-pressed="true"] { background: var(--hb-ink); color: var(--hb-white); }
.period-dates { display: inline-flex; align-items: center; gap: 8px; } .period-dates[hidden] { display: none; }
.period-dates label { display: inline; margin: 0; font-size: 13px; } .period-dates input { width: auto !important; padding: 7px 10px; }
/* ONE LINE WITH THE DATE BOXES TOO (13 Nov 2026: with "Custom dates", and with Visitors' "Other dates", the header broke
   into two lines at 1440 px wide). The date boxes are narrower, and while they show, the period in words and the short
   note step aside (the boxes say the same days). The buttons and their two dates stay together as one piece: on a
   window too narrow for the title and that piece side by side, the whole piece goes under the title, never half of it.
   Below about 1100 px the piece itself may wrap, as before. */
.phead-r .period { flex-wrap: nowrap; }
.period-dates input, .phead-r .hfilter input { width: 128px !important; padding: 7px 6px; }
.phead-r .hfilter input[type="datetime-local"] { width: 190px !important; }
.phead-r .hfilter { flex-wrap: nowrap; white-space: nowrap; }
.phead:has(.period-dates:not([hidden])) .phead-t > .dbwhen, .phead:has(.period-dates:not([hidden])) .phead-note, .phead:has(#vRange:not([hidden])) .phead-note { display: none; }
@media (max-width: 1100px) { .phead-r .period { flex-wrap: wrap; } .phead-r .hfilter { flex-wrap: wrap; white-space: normal; } }
/* 4.10 VIPs: each VIP is a card. Its three states are a name, a word and an icon each; the PIN shows only while one waits. */
.vipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.vipcard { gap: 14px !important; }
.viptop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.viptop > div { min-width: 0; } .viptop h2, .viptop .small { overflow-wrap: anywhere; } .viptop .says { margin: 2px 0; }
.vipstates { display: flex; flex-direction: column; gap: 6px; }
.vipstate { display: flex; gap: 10px; align-items: center; padding: 8px 12px; min-width: 0; border-radius: var(--hb-radius-sm); background: var(--hb-mist); border: 1px solid var(--hb-line); }
.vipstate > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; } .vipstate > span > .small:first-child { min-width: 62px; }
.vipstate b { font-size: 13.5px; } .vipstate .small { overflow-wrap: anywhere; }
.vipstate .svg-i { color: var(--hb-slate); }
.vipstate.ok { background: var(--hb-ok-bg); border-color: transparent; } .vipstate.ok .svg-i { color: var(--hb-ok); }
.vipstate.bad { background: var(--hb-bad-bg); border-color: transparent; } .vipstate.bad .svg-i { color: var(--hb-bad); }
.vippin { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--hb-radius-sm); background: var(--hb-warn-bg); color: var(--hb-ink); } .vippin:empty { display: none; }
.actmenu.sm .actbtn { min-height: 32px; padding: 4px 10px 4px 14px; font-size: 13px; }
/* A visit's rating by AI, in the visitor's card: its score and its slab in words (colour is never the only sign). */
.chip.slab { font-weight: 600; }

/* ---- THE HUB ON THE HOLOBOX'S TALL SCREEN (Part B, A-88, 10 Nov 2026; decided by Rajat: "two across and two down").
   Seen in Rajat's photos: on the glass the four tiles sat in one row across the top third and the rest was empty,
   because the hub was drawn for a 1440 x 900 laptop. On a tall screen only (upright, and wider than a phone) the
   tiles fill the whole height, and everything in them is sized to the glass: --hv is one pixel of a 1080-wide
   glass, so a 4K glass and a 1080 one look the same. The laptop layout above and the "made for a laptop" card on
   phones are not touched by anything here.
   FIVE CARDS (A-112, 12 Nov 2026): with Employee Self Registration there are five, and two across left the
   drawings too small to read (tried and looked at on this PC: the smallest was 45 pixels high). So on the tall
   screen the five stand in ONE COLUMN, each a wide row with its picture on the left and its words and button on
   the right; the five rows fill the glass from top to foot. ---- */
@media (orientation: portrait) and (min-width: 900px) {
  .hubapp { --hv: calc(100vw / 1080); }
  #app.on.hubapp { display: flex; flex-direction: column; min-height: 100vh; }
  .hubapp .top .in { max-width: none; padding: calc(22 * var(--hv)) calc(40 * var(--hv)); }
  .hubapp .brand img.race { height: calc(84 * var(--hv)); }
  .hubapp .brand img.hb { height: calc(42 * var(--hv)); }
  .hubapp .user .small { font-size: calc(22 * var(--hv)); }
  .hubapp .user button { min-height: calc(56 * var(--hv)); padding: calc(8 * var(--hv)) calc(24 * var(--hv)); font-size: calc(22 * var(--hv)); border-radius: 999px; }
  .hubapp .page { max-width: none; align-self: stretch; margin: 0; flex: 1; display: flex; flex-direction: column; padding: calc(30 * var(--hv)) calc(40 * var(--hv)) calc(24 * var(--hv)); }
  .hubapp .page > .hubintro { flex-direction: column; gap: calc(8 * var(--hv)); margin-bottom: calc(24 * var(--hv)); }
  .hubapp .page > .hubintro h1 { font-size: calc(52 * var(--hv)); }
  .hubapp .page > .hubintro p { font-size: calc(26 * var(--hv)); }
  .hubapps { flex: 1; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: calc(20 * var(--hv)); }
  .hubapp .app { border-radius: calc(30 * var(--hv)); flex-direction: row; }
  /* The picture is the left third of the row and as high as the row; the drawing is laid inside it, under the
     label, so the words decide the row's height and the picture never makes the hub taller than the glass. */
  .hubapp .app .pic { height: auto; flex: 0 0 36%; min-height: 0; }
  .hubapp .app .pic img { position: absolute; left: 8%; top: calc(68 * var(--hv)); width: 84%; height: calc(100% - 82 * var(--hv)); max-width: none; max-height: none; margin: 0; object-fit: contain; }
  .hubapp .app .pic.photo img { left: 0; top: 0; }
  .hubapp .app .where { left: calc(16 * var(--hv)); top: calc(16 * var(--hv)); padding: calc(8 * var(--hv)) calc(18 * var(--hv)); font-size: calc(20 * var(--hv)); }
  .hubapp .app .body { flex: 1; justify-content: center; padding: calc(18 * var(--hv)) calc(30 * var(--hv)); }
  .hubapp .app .rule { display: none; }
  .hubapp .app h2 { font-size: calc(34 * var(--hv)); margin-bottom: calc(6 * var(--hv)); min-height: 0; }
  .hubapp .app .what { font-size: calc(21.5 * var(--hv)); margin-bottom: calc(14 * var(--hv)); }
  .hubapp .app .go { margin-top: 0; font-size: calc(24 * var(--hv)); padding: calc(12 * var(--hv)) calc(20 * var(--hv)); min-height: calc(60 * var(--hv)); }
  .hubapp .app .needs { font-size: calc(18.5 * var(--hv)); margin-top: calc(10 * var(--hv)); min-height: 0; }
  .hubapp .pagefoot { padding: 0 calc(40 * var(--hv)) calc(24 * var(--hv)); font-size: calc(19 * var(--hv)); }
  #signin .pagefoot { font-size: calc(19 * 100vw / 1080); }
  .hubapp .msg { font-size: calc(22 * var(--hv)); }
  /* The sign-in card: in the middle of the glass, and large enough to read from where one stands. */
  #signin .card { zoom: 1.7; }
}
@media (orientation: portrait) and (min-width: 1700px) { #signin .card { zoom: 3.4; } }