/* Generated from design/system/screens/h1.css by design/system/export-to-web.mjs: do not edit here. */
/* Platform owner, public site and sign-in: special screens (step 4, area H, first half).
   Real CSS on top of components.css; merged into the app in step 5. Prefix: .cb-h1-
   Generic candidates for components.css: .cb-h1-thread (T8 conversation), .cb-h1-code (code block),
   .cb-h1-auth (sign-in layout), .cb-h1-site (public site header and footer), .cb-h1-list (a selectable list). */

/* ---------- shared ---------- */
.cb-h1-mono { font-family: var(--cb-font-mono); font-size: 12.5px; }
.cb-h1-stat { display: block; margin-top: 2px; font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; font-stretch: 87.5%; color: var(--cb-ink); }
.cb-h1-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-stats b { margin-right: 4px; font-size: 16px; font-weight: 700; color: var(--cb-ink); font-variant-numeric: tabular-nums; }
.cb-h1-split { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
.cb-h1-list { list-style: none; margin: 0; padding: 0; }
.cb-h1-list > li { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 14px; border-top: 1px solid var(--cb-line); font-size: var(--cb-fs-body); color: var(--cb-ink-2); }
.cb-h1-list > li:first-child { border-top: 0; }
.cb-h1-list > li > svg { width: 16px; height: 16px; color: var(--cb-ink-3); flex-shrink: 0; }
.cb-h1-list > li.is-on { background: var(--cb-accent-tint); color: var(--cb-accent-ink); font-weight: 650; box-shadow: inset 3px 0 0 var(--cb-accent); }
.cb-h1-list > li.is-on > svg { color: var(--cb-accent-ink); }
.cb-h1-list > li.is-off { color: var(--cb-ink-3); }
.cb-h1-list .cb-h1-end { margin-left: auto; font-size: var(--cb-fs-small); font-weight: 500; color: var(--cb-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-h1-list > li.is-group { min-height: 32px; background: var(--cb-sunken); font-size: var(--cb-fs-label); font-weight: 650; color: var(--cb-ink-3); }

/* ---------- inbox (T8 with three queues) ---------- */
.cb-needs.cb-h1-inbox > li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.cb-needs.cb-h1-inbox > li > svg { align-self: center; width: 16px; height: 16px; color: var(--cb-ink-3); }
.cb-needs.cb-h1-inbox > li.is-on { background: var(--cb-accent-tint); box-shadow: inset 3px 0 0 var(--cb-accent); }
.cb-needs.cb-h1-inbox .cb-needs__text small .cb-badge { margin-right: 4px; }
.cb-h1-proof { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-sunken); }
.cb-h1-proof__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-slip { display: grid; gap: 4px; padding: 14px 16px; border-radius: 8px; background: var(--cb-surface); color: var(--cb-ink); box-shadow: var(--cb-shadow-card); font-size: 12px; }
.cb-h1-slip__amt { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-h1-slip dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed var(--cb-line-strong); }
.cb-h1-slip dt { color: var(--cb-ink-3); } .cb-h1-slip dd { margin: 0; font-weight: 600; }

/* flagged images: blurred until shown */
.cb-h1-imgs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cb-h1-img { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-surface); overflow: hidden; }
.cb-h1-img.is-on { border-color: var(--cb-accent); box-shadow: 0 0 0 1px var(--cb-accent); }
.cb-h1-img__pic { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--cb-well); }
.cb-h1-img__pic::before { content: ""; position: absolute; inset: -24px; filter: blur(16px);
  background: radial-gradient(circle at var(--x1, 30%) var(--y1, 40%), color-mix(in oklch, var(--cb-haldi) 75%, transparent), transparent 42%),
    radial-gradient(circle at var(--x2, 70%) var(--y2, 62%), color-mix(in oklch, var(--cb-accent) 65%, transparent), transparent 48%),
    radial-gradient(circle at 50% 100%, color-mix(in oklch, var(--cb-info) 55%, transparent), transparent 55%), var(--cb-well); }
.cb-h1-img__pic > .cb-h1-show { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cb-surface); box-shadow: var(--cb-shadow-card); font-size: var(--cb-fs-small); font-weight: 650; color: var(--cb-ink); }
.cb-h1-img__pic > .cb-h1-show svg { width: 14px; height: 14px; }
.cb-h1-img__pic > .cb-check { position: absolute; top: 10px; left: 10px; }
.cb-h1-img__pic > .cb-check .cb-check__box { box-shadow: var(--cb-shadow-card); }
.cb-h1-img__body { display: grid; gap: 2px; padding: 10px 12px; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-img__body b { font-size: var(--cb-fs-body); color: var(--cb-ink); }
.cb-h1-img__foot { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--cb-line); }
.cb-h1-img__foot .cb-btn { flex: 1; }

/* conversation (T8 variant: a thread instead of the facts) */
.cb-h1-thread { display: grid; gap: 16px; padding: 18px 16px; }
.cb-h1-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; max-width: 84%; }
.cb-h1-msg.is-us { justify-self: end; grid-template-columns: minmax(0, 1fr) 32px; }
.cb-h1-msg.is-us > .cb-avatar { order: 2; }
.cb-h1-msg__meta { margin-bottom: 4px; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-msg.is-us .cb-h1-msg__meta { text-align: right; }
.cb-h1-msg__meta b { font-weight: 650; color: var(--cb-ink); }
.cb-h1-msg__bubble { padding: 10px 14px; border: 1px solid var(--cb-line); border-radius: 4px var(--cb-radius-md) var(--cb-radius-md) var(--cb-radius-md); background: var(--cb-sunken); color: var(--cb-ink); }
.cb-h1-msg.is-us .cb-h1-msg__bubble { border-color: transparent; border-radius: var(--cb-radius-md) 4px var(--cb-radius-md) var(--cb-radius-md); background: var(--cb-accent-tint); }
.cb-h1-msg__bubble .cb-file { margin-top: 8px; padding: 6px 10px; font-size: var(--cb-fs-small); }
.cb-h1-sysnote { display: flex; align-items: center; gap: 10px; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-sysnote::before, .cb-h1-sysnote::after { content: ""; flex: 1; height: 1px; background: var(--cb-line); }
.cb-h1-reply { display: grid; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--cb-line); }

/* ---------- data explorer and data change ---------- */
.cb-h1-explorer { display: grid; grid-template-columns: 230px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.cb-h1-explorer .cb-h1-list > li { font-family: var(--cb-font-mono); font-size: 12.5px; min-height: 34px; padding: 5px 12px; }
.cb-table.cb-h1-rows th, .cb-table.cb-h1-rows td { height: 38px; padding: 0 10px; font-family: var(--cb-font-mono); font-size: 12px; }
.cb-table.cb-h1-rows th { height: 34px; }
.cb-table.cb-h1-rows tr.is-on td { background: var(--cb-accent-tint); color: var(--cb-accent-ink); }
.cb-table.cb-h1-rows tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--cb-accent); }
.cb-h1-null { color: var(--cb-ink-3); font-style: italic; }
.cb-h1-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; font-family: var(--cb-font-mono); font-size: 12px; }
.cb-h1-fields dt, .cb-h1-fields dd { padding: 6px 0; border-top: 1px solid var(--cb-line); }
.cb-h1-fields dt:first-of-type, .cb-h1-fields dd:first-of-type { border-top: 0; }
.cb-h1-fields dt { padding-right: 14px; color: var(--cb-ink-3); }
.cb-h1-fields dd { margin: 0; color: var(--cb-ink); overflow-wrap: anywhere; }
.cb-h1-fields dd small { display: block; font-family: var(--cb-font); font-size: var(--cb-fs-small); font-weight: 600; color: var(--cb-accent-ink); }
.cb-table.cb-h1-diff td { height: 44px; }
.cb-table.cb-h1-diff td.is-old { color: var(--cb-danger); text-decoration: line-through; }
.cb-table.cb-h1-diff td.is-new { color: var(--cb-success); font-weight: 650; background: var(--cb-success-tint); }

/* ---------- landing page builder ---------- */
.cb-h1-builder { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cb-h1-builder .cb-h1-list > li { min-height: 46px; }
.cb-h1-builder .cb-h1-list > li small { display: block; font-size: var(--cb-fs-small); font-weight: 500; color: var(--cb-ink-3); }
.cb-h1-browser { border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-surface); overflow: hidden; box-shadow: var(--cb-shadow-card); }
.cb-h1-browser__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--cb-line); background: var(--cb-sunken); font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-browser__bar > i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cb-line-strong); }
.cb-h1-browser__url { display: flex; flex: 1; align-items: center; gap: 6px; height: 24px; margin-left: 8px; padding: 0 10px; border: 1px solid var(--cb-line); border-radius: 6px; background: var(--cb-surface); }
.cb-h1-browser__url svg { width: 12px; height: 12px; }
.cb-h1-lp-nav { display: flex; align-items: center; gap: 18px; padding: 12px 24px; border-bottom: 1px solid var(--cb-line); font-size: 12.5px; font-weight: 600; color: var(--cb-ink-2); }
.cb-h1-lp-nav b { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cb-ink); }
.cb-h1-lp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 40px 28px; background: var(--cb-board); color: #fff; }
.cb-h1-lp-hero h3 { margin: 8px 0 0; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.cb-h1-lp-hero p { margin: 12px 0 0; font-size: 14px; color: var(--cb-board-muted); }
.cb-h1-lp-hero .cb-btn--primary { background: var(--cb-accent-bright); color: #121f43; }
.cb-h1-lp-hero .cb-btn--secondary { background: transparent; color: #fff; border-color: color-mix(in oklch, #fff 40%, transparent); }
.cb-h1-lp-mock { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--cb-surface); color: var(--cb-ink); box-shadow: var(--cb-shadow-float); }
.cb-h1-sel { outline: 2px solid var(--cb-accent); outline-offset: -2px; }
.cb-h1-sel__tag { position: absolute; top: 0; left: 0; z-index: 2; padding: 3px 9px; border-radius: 0 0 8px 0; background: var(--cb-accent); color: var(--cb-on-accent); font-size: 11.5px; font-weight: 650; }
.cb-h1-lp-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 16px 24px; border-bottom: 1px solid var(--cb-line); font-size: 12.5px; font-weight: 650; color: var(--cb-ink-3); }
.cb-h1-lp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 24px 24px; }
.cb-h1-lp-feats > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); font-size: 12.5px; color: var(--cb-ink-3); }
.cb-h1-lp-feats b { font-size: 13.5px; color: var(--cb-ink); }
.cb-h1-lp-feats svg { width: 18px; height: 18px; color: var(--cb-accent-ink); }

/* ---------- document designer ---------- */
.cb-h1-designer { display: grid; grid-template-columns: 230px minmax(0, 1fr) 280px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-surface); overflow: hidden; }
.cb-h1-designer__side { display: grid; gap: 14px; align-content: start; padding: 14px; }
.cb-h1-designer__stage { display: grid; grid-template-rows: auto 1fr; border-inline: 1px solid var(--cb-line); background: var(--cb-sunken); }
.cb-h1-designer__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--cb-line); background: var(--cb-surface); }
.cb-h1-designer__canvas { display: flex; justify-content: center; align-items: flex-start; gap: 44px; padding: 36px 24px 28px; background-image: radial-gradient(var(--cb-line-strong) 1px, transparent 1px); background-size: 16px 16px; }
.cb-h1-grouplbl { font-size: var(--cb-fs-label); font-weight: 650; color: var(--cb-ink-3); }
.cb-h1-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb-h1-tool { display: flex; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-sm); background: var(--cb-surface); font-size: 12.5px; font-weight: 600; color: var(--cb-ink-2); white-space: nowrap; overflow: hidden; }
.cb-h1-tool svg { width: 15px; height: 15px; color: var(--cb-ink-3); flex-shrink: 0; }
.cb-h1-cardcol { display: grid; justify-items: center; gap: 10px; font-size: var(--cb-fs-small); font-weight: 600; color: var(--cb-ink-3); }
/* the printed card is always light: put .cb-theme-light on it */
.cb-h1-idcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; width: 270px; height: 430px; border-radius: 14px; background: var(--cb-surface); color: var(--cb-ink); box-shadow: var(--cb-shadow-float); overflow: visible; font-size: 12px; }
.cb-h1-idcard__band { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px 14px 0 0; background: var(--cb-board); color: #fff; }
.cb-h1-idcard__band b { display: block; font-size: 14px; line-height: 1.2; }
.cb-h1-idcard__band small { display: block; font-size: 10.5px; color: var(--cb-board-muted); }
.cb-h1-idcard__body { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 18px 16px 10px; text-align: center; }
.cb-h1-idcard__photo { display: grid; place-items: center; width: 92px; height: 112px; border: 1.5px dashed var(--cb-line-strong); border-radius: 8px; background: var(--cb-sunken); color: var(--cb-ink-3); font-size: 10.5px; }
.cb-h1-idcard__photo svg { width: 28px; height: 28px; }
.cb-h1-ph { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--cb-info-tint); color: var(--cb-info); font-family: var(--cb-font-mono); font-size: 11px; font-weight: 600; }
.cb-h1-idcard__name { position: relative; margin-top: 6px; padding: 4px 8px; font-size: 17px; font-weight: 700; }
.cb-h1-idcard__kv { display: grid; grid-template-columns: max-content max-content; gap: 3px 10px; margin: 6px 0 0; text-align: left; font-size: 11.5px; }
.cb-h1-idcard__kv dt { color: var(--cb-ink-3); } .cb-h1-idcard__kv dd { margin: 0; }
.cb-h1-idcard__foot { padding: 9px 14px; border-top: 1px solid var(--cb-line); border-radius: 0 0 14px 14px; background: var(--cb-sunken); font-size: 10.5px; color: var(--cb-ink-2); text-align: center; }
.cb-h1-handles { position: absolute; inset: 0; outline: 1.5px solid var(--cb-accent); pointer-events: none; }
.cb-h1-handles > i { position: absolute; width: 8px; height: 8px; border: 1.5px solid var(--cb-accent); border-radius: 2px; background: var(--cb-surface); }
.cb-h1-handles > i:nth-child(1) { top: -4px; left: -4px; } .cb-h1-handles > i:nth-child(2) { top: -4px; right: -4px; }
.cb-h1-handles > i:nth-child(3) { bottom: -4px; left: -4px; } .cb-h1-handles > i:nth-child(4) { bottom: -4px; right: -4px; }
.cb-h1-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--cb-line-strong); }

/* ---------- server health, API reference ---------- */
.cb-h1-pass { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; padding: 12px 16px; }
.cb-h1-pass > span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 0; font-size: var(--cb-fs-small); color: var(--cb-ink-2); white-space: nowrap; }
.cb-h1-pass > span svg { width: 14px; height: 14px; color: var(--cb-success); flex-shrink: 0; }
.cb-h1-pass > span em { margin-left: auto; font-style: normal; color: var(--cb-ink-3); font-variant-numeric: tabular-nums; }
.cb-h1-api { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 16px; align-items: start; }
.cb-h1-method { display: inline-grid; place-items: center; min-width: 46px; height: 20px; padding: 0 6px; border-radius: 5px; font: 700 10.5px/1 var(--cb-font-mono); letter-spacing: .02em; flex-shrink: 0; }
.cb-h1-method.is-get { background: var(--cb-info-tint); color: var(--cb-info); }
.cb-h1-method.is-post { background: var(--cb-success-tint); color: var(--cb-success); }
.cb-h1-method.is-put { background: var(--cb-warning-tint); color: var(--cb-warning); }
.cb-h1-method.is-delete { background: var(--cb-danger-tint); color: var(--cb-danger); }
.cb-h1-ep { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 14px 6px 24px; font-family: var(--cb-font-mono); font-size: 12px; color: var(--cb-ink-2); white-space: nowrap; }
.cb-h1-ep > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cb-h1-ep.is-on { background: var(--cb-accent-tint); color: var(--cb-accent-ink); box-shadow: inset 3px 0 0 var(--cb-accent); }
.cb-h1-epgroup { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--cb-line); font-size: var(--cb-fs-body); font-weight: 650; color: var(--cb-ink); }
.cb-h1-epgroup svg { width: 14px; height: 14px; color: var(--cb-ink-3); }
.cb-h1-epgroup .cb-h1-end { margin-left: auto; font-size: var(--cb-fs-small); font-weight: 500; color: var(--cb-ink-3); }
.cb-h1-path { font: 650 18px/1.3 var(--cb-font-mono); color: var(--cb-ink); overflow-wrap: anywhere; }
.cb-h1-chain { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-h1-chain > span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--cb-line-strong); border-radius: 6px; font-family: var(--cb-font-mono); font-size: 11.5px; color: var(--cb-ink-2); }
/* code block on the board surface (the same in both themes) */
.cb-h1-code { margin: 0; padding: 14px 16px; border-radius: var(--cb-radius-md); background: var(--cb-board); color: #fff; font: 12.5px/1.65 var(--cb-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cb-h1-code .is-dim { color: var(--cb-board-muted); }
.cb-h1-code .is-hi { color: var(--cb-accent-bright); }

/* ---------- settings: a long section list, compact ---------- */
.cb-h1-setnav .cb-nav { gap: 0; }
.cb-h1-setnav .cb-nav__item { height: 30px; }
.cb-h1-setnav .cb-nav__group { margin: 10px 10px 2px; }
.cb-h1-setnav .cb-nav__group:first-child { margin-top: 4px; }

/* ---------- role menu builder ---------- */
.cb-h1-menub { display: grid; grid-template-columns: 220px minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.cb-h1-tree { list-style: none; margin: 0; padding: 0; }
.cb-h1-tree > li { display: grid; grid-template-columns: 16px 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--cb-line); font-size: var(--cb-fs-body); color: var(--cb-ink); }
.cb-h1-tree > li:first-child { border-top: 0; }
.cb-h1-tree > li > svg { width: 16px; height: 16px; color: var(--cb-ink-3); }
.cb-h1-tree > li.is-off { color: var(--cb-ink-3); background: var(--cb-sunken); }
.cb-h1-tree > li.is-group { grid-template-columns: 1fr; padding: 7px 14px; background: var(--cb-sunken); font-size: var(--cb-fs-label); font-weight: 650; color: var(--cb-ink-3); }
.cb-h1-route { font-family: var(--cb-font-mono); font-size: 11.5px; font-weight: 450; color: var(--cb-ink-3); }
.cb-h1-tree b { font-weight: 600; }
.cb-h1-tree b .cb-h1-route { display: block; margin-top: 1px; }
.cb-h1-mini { border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-surface); overflow: hidden; }
.cb-h1-mini .cb-sidebar__brand { height: 48px; font-size: 14px; }
.cb-h1-mini .cb-nav__item { height: 32px; font-size: 13px; }

/* ---------- public site (T10 shell for the school's own domain) ---------- */
.cb-h1-site { background: var(--cb-paper); color: var(--cb-ink); }
.cb-h1-site__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding: 0 48px; border-bottom: 1px solid var(--cb-line); background: var(--cb-surface); }
.cb-h1-site__name { display: flex; align-items: center; gap: 12px; }
.cb-h1-site__name b { display: block; font-size: 16px; line-height: 1.2; }
.cb-h1-site__name small { display: block; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-crest { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--cb-board); color: #fff; font-weight: 800; font-size: 15px; flex-shrink: 0; box-shadow: inset 0 0 0 1px color-mix(in oklch, #fff 22%, transparent); }
.cb-h1-crest.is-lg { width: 52px; height: 52px; border-radius: 13px; font-size: 19px; box-shadow: inset 0 0 0 2px color-mix(in oklch, #fff 25%, transparent); }
.cb-h1-site__nav { display: flex; align-items: center; gap: 20px; font-size: var(--cb-fs-body); font-weight: 600; color: var(--cb-ink-2); }
.cb-h1-site__nav > .is-on { color: var(--cb-accent-ink); text-decoration: underline 2px; text-underline-offset: 8px; }
.cb-h1-site__page { display: grid; gap: 24px; padding: 32px 48px 48px; }
.cb-h1-display { margin: 0; font-size: var(--cb-fs-display); line-height: var(--cb-lh-display); font-weight: 700; letter-spacing: -.025em; }
.cb-h1-site__foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding: 32px 48px; border-top: 1px solid var(--cb-line); background: var(--cb-surface); font-size: var(--cb-fs-small); color: var(--cb-ink-2); }
.cb-h1-site__foot h4 { margin: 0 0 10px; font-size: var(--cb-fs-label); font-weight: 650; color: var(--cb-ink-3); }
.cb-h1-site__foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cb-h1-site__legal { display: flex; justify-content: space-between; gap: 16px; padding: 14px 48px; border-top: 1px solid var(--cb-line); background: var(--cb-surface); font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-hero { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 48px; align-items: center; padding: 52px 48px; background: var(--cb-board); color: #fff; }
.cb-h1-hero__eyebrow { margin: 0; color: var(--cb-accent-bright); font-weight: 650; }
.cb-h1-hero h1 { margin: 12px 0 0; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.cb-h1-hero p { margin: 16px 0 0; max-width: 52ch; font-size: 17px; color: var(--cb-board-muted); }
.cb-h1-hero .cb-btn--primary { background: var(--cb-accent-bright); color: #121f43; }
.cb-h1-hero .cb-btn--secondary { background: transparent; color: #fff; border-color: color-mix(in oklch, #fff 40%, transparent); }
.cb-h1-facts { display: flex; gap: 32px; margin-top: 28px; }
.cb-h1-facts b { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-h1-facts span { font-size: var(--cb-fs-small); color: var(--cb-board-muted); }
.cb-h1-photo { position: relative; display: grid; align-items: end; aspect-ratio: 4 / 3; border-radius: var(--cb-radius-lg); overflow: hidden;
  background: radial-gradient(circle at 78% 22%, color-mix(in oklch, #fff 70%, transparent) 0 9%, transparent 10%),
    linear-gradient(180deg, color-mix(in oklch, var(--cb-info) 45%, var(--cb-board)) 0 58%, color-mix(in oklch, var(--cb-accent) 70%, var(--cb-board)) 58% 100%); }
.cb-h1-photo > svg { position: absolute; left: 50%; top: 52%; width: 120px; height: 120px; transform: translate(-50%, -50%); color: color-mix(in oklch, #fff 80%, transparent); }
.cb-h1-photo > span, .cb-h1-tile > span { position: relative; justify-self: start; margin: 12px; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklch, var(--cb-board) 80%, transparent); color: #fff; font-size: 12px; font-weight: 600; }
.cb-h1-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cb-h1-tile { position: relative; display: grid; align-items: end; aspect-ratio: 4 / 3; border-radius: var(--cb-radius-md); overflow: hidden; background: linear-gradient(160deg, var(--t1, var(--cb-accent)), var(--t2, var(--cb-board))); }
.cb-h1-tile > svg { position: absolute; right: 14px; top: 14px; width: 28px; height: 28px; color: color-mix(in oklch, #fff 70%, transparent); }
.cb-h1-dated { list-style: none; margin: 0; padding: 0; }
.cb-h1-dated > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--cb-line); }
.cb-h1-dated > li:first-child { border-top: 0; }
.cb-h1-date { display: grid; justify-items: center; padding: 4px 0; border-radius: 8px; background: var(--cb-sunken); font-size: 11px; font-weight: 600; color: var(--cb-ink-3); line-height: 1.2; }
.cb-h1-date b { font-size: 18px; color: var(--cb-ink); }
.cb-h1-dated small { display: block; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-appno { font: 700 22px/1.2 var(--cb-font-mono); letter-spacing: .01em; }
/* a check result: genuine document, published result */
.cb-h1-valid { display: grid; gap: 16px; padding: 24px; border: 1px solid color-mix(in oklch, var(--cb-success) 35%, transparent); border-radius: var(--cb-radius-lg); background: var(--cb-surface); box-shadow: inset 0 4px 0 var(--cb-success); }
.cb-h1-valid__head { display: flex; align-items: center; gap: 14px; }
.cb-h1-valid__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cb-success-tint); color: var(--cb-success); flex-shrink: 0; }
.cb-h1-valid__icon svg { width: 26px; height: 26px; }

/* ---------- sign-in ---------- */
.cb-h1-auth { position: relative; display: grid; grid-template-columns: 540px minmax(0, 1fr); min-height: 800px; background: var(--cb-paper); }
.cb-h1-auth__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 48px; background: var(--cb-board); color: #fff; box-shadow: inset 1px 1px 0 color-mix(in oklch, #fff 14%, transparent), inset 0 -1px 0 color-mix(in oklch, #fff 14%, transparent); }
.cb-h1-auth__brand .cb-h1-site__name small, .cb-h1-auth__brand .is-muted { color: var(--cb-board-muted); }
.cb-h1-auth__date { margin: 0; font-size: var(--cb-fs-small); color: var(--cb-board-muted); }
.cb-h1-auth__hello { margin: 6px 0 0; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.cb-h1-auth__by { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--cb-fs-small); color: var(--cb-board-muted); }
.cb-h1-auth__by svg { width: 13px; height: 13px; }
.cb-h1-auth__main { display: grid; place-items: center; align-content: center; gap: 16px; padding: 64px 48px; }
.cb-h1-auth__back { position: absolute; top: 24px; right: 32px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--cb-fs-small); font-weight: 600; color: var(--cb-ink-2); }
.cb-h1-auth__back svg { width: 14px; height: 14px; }
.cb-h1-auth__card { display: grid; gap: 16px; width: 420px; padding: 32px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-xl); background: var(--cb-surface); box-shadow: var(--cb-shadow-card); }
.cb-h1-auth__card h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.cb-h1-auth__card h2 + p { margin: 4px 0 0; color: var(--cb-ink-3); }
.cb-h1-auth__card .cb-seg { display: grid; grid-template-columns: 1fr 1fr; }
.cb-h1-auth__card .cb-seg > * { justify-content: center; height: 32px; }
.cb-h1-auth__card .cb-input { height: var(--cb-control-h-lg); }
.cb-h1-auth__card .cb-otp > span { width: 50px; height: 56px; }
.cb-h1-auth__card .cb-btn--lg { width: 100%; }
.cb-h1-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--cb-fs-small); }
.cb-h1-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-sunken); font-size: var(--cb-fs-small); color: var(--cb-ink-2); }
.cb-h1-who b { display: block; font-size: var(--cb-fs-body); color: var(--cb-ink); }
.cb-h1-who .cb-link { margin-left: auto; }
.cb-h1-states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; padding: 32px; background: var(--cb-paper); }
.cb-h1-states .cb-h1-auth__card { width: auto; gap: 14px; padding: 22px; }
.cb-h1-states .cb-h1-auth__card h2 { font-size: 20px; }
.cb-h1-states .cb-otp { gap: 6px; }
.cb-h1-states .cb-otp > span { width: 38px; height: 46px; font-size: 19px; }
.cb-h1-state-k { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--cb-fs-small); font-weight: 650; color: var(--cb-ink-2); }
.cb-h1-state-k b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cb-well); font-size: 12px; color: var(--cb-ink); }
.cb-h1-account { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-account b { display: block; font-size: var(--cb-fs-body); color: var(--cb-ink); }
.cb-h1-account.is-on { border-color: var(--cb-accent); background: var(--cb-accent-tint); }
.cb-h1-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--cb-fs-small); color: var(--cb-ink-2); }
.cb-h1-rules li { display: flex; align-items: center; gap: 6px; }
.cb-h1-rules svg { width: 14px; height: 14px; color: var(--cb-success); }
.cb-h1-rules li.is-no svg { color: var(--cb-ink-3); }

/* ======================================================================================================
   In the app (step 5, area H first half): what the live screens add on top of the sheet's drawings.
   Real inputs inside .cb-input, lists that are links, the phone and tablet layouts.
   ====================================================================================================== */
.cb-h1-bare { flex: 1; min-width: 0; width: 100%; height: auto; padding: 0; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; font: 450 var(--cb-fs-body)/1.4 var(--cb-font); color: inherit; }
.cb-h1-bare::placeholder { color: var(--cb-ink-3); }
.cb-input:focus-within { border-color: var(--cb-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--cb-accent) 18%, transparent); }
.cb-h1-select { height: 32px; width: auto; padding: 0 8px; font-size: var(--cb-fs-small); }
select.cb-input, input.cb-input, textarea.cb-input { width: 100%; font: 450 var(--cb-fs-body)/1.4 var(--cb-font); }
select.cb-input.cb-h1-select { width: auto; height: 32px; padding: 0 8px; font-size: var(--cb-fs-small); }
textarea.cb-input { display: block; resize: vertical; }
.cb-h1-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.cb-h1-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* inbox: the list is links; the detail sits beside it, under it below 1100px */
.cb-h1-listcard { overflow: hidden; }
.cb-needs.cb-h1-inbox > li { display: block; padding: 0; }
.cb-needs.cb-h1-inbox > li > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; color: inherit; text-decoration: none; }
.cb-needs.cb-h1-inbox > li > a:hover { background: var(--cb-sunken); }
.cb-needs.cb-h1-inbox > li.is-on > a:hover { background: transparent; }
.cb-needs.cb-h1-inbox > li > a > svg { align-self: center; width: 16px; height: 16px; color: var(--cb-ink-3); }
.cb-needs.cb-h1-inbox .cb-needs__text b { font-weight: 650; }
.cb-h1-tags { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cb-h1-paygrid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; align-items: start; }
.cb-h1-proofimg { display: block; width: 100%; max-height: 340px; object-fit: contain; border-radius: 8px; background: var(--cb-surface); }
.cb-h1-attach { position: relative; cursor: pointer; }
.cb-h1-attach input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.cb-h1-attach:focus-within { outline: var(--cb-control-focus-width) solid var(--cb-focus); outline-offset: 2px; }
.cb-h1-reply .cb-row { flex-wrap: wrap; }
.cb-card__foot form { display: contents; }

/* flagged images in the app: real buttons and the image, shown only on request */
.cb-h1-imgs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cb-h1-img__pic > .cb-h1-show { border: 0; cursor: pointer; font-family: inherit; }
.cb-h1-img__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-h1-img__pic.is-shown::before { display: none; }
.cb-h1-img__pic.is-shown > .cb-h1-show { position: absolute; bottom: 10px; right: 10px; }
.cb-h1-imgcheck { position: absolute; top: 10px; left: 10px; cursor: pointer; z-index: 1; }
.cb-h1-imgcheck input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.cb-h1-imgcheck .cb-check__box { box-shadow: var(--cb-shadow-card); background: var(--cb-surface); }
.cb-h1-imgcheck .cb-check__box svg { opacity: 0; }
.cb-h1-imgcheck.is-on .cb-check__box svg { opacity: 1; }
.cb-h1-imgcheck input:focus-visible + .cb-check__box { outline: var(--cb-control-focus-width) solid var(--cb-focus); outline-offset: 2px; }

/* table view under a chart */
.cb-h1-tableview { margin-top: 10px; }
.cb-h1-tableview summary { cursor: pointer; list-style: none; }
.cb-h1-tableview summary::-webkit-details-marker { display: none; }
.cb-h1-tableview[open] summary { margin-bottom: 8px; }

@media (max-width: 1100px) {
  .cb-h1-split { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 700px) {
  .cb-h1-paygrid { grid-template-columns: minmax(0, 1fr); }
  .cb-h1-msg { max-width: 100%; }
  .cb-h1-pass { grid-template-columns: minmax(0, 1fr); }
}

/* lists and records */
.cb-h1-rowlink { color: var(--cb-ink); text-decoration: none; }
.cb-h1-rowlink:hover { color: var(--cb-accent-ink); text-decoration: underline; }
.cb-table td.cb-h1-near, .cb-table td.cb-h1-near small { color: var(--cb-danger); font-weight: 650; }
.cb-h1-recordhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cb-h1-recordhead .cb-pagehead__desc { margin: 4px 0 0; }
.cb-h1-recordhead form { display: contents; }
.cb-h1-crestimg { object-fit: cover; background: var(--cb-surface); padding: 0; }
.cb-menu form { display: block; margin: 0; }
.cb-menu .cb-menu__item svg { flex-shrink: 0; }
.cb-h1-counts { grid-template-columns: max-content max-content max-content max-content; gap: 6px 16px; }
.cb-h1-closedlg { width: min(580px, calc(100vw - 32px)); }
/* a real checkbox drawn as the design system's switch */
.cb-h1-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; cursor: pointer; }
.cb-h1-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-h1-toggle .cb-switch__track { margin-top: 2px; }
.cb-h1-toggle input:checked + .cb-switch__track { background: var(--cb-accent); }
.cb-h1-toggle input:checked + .cb-switch__track::after { transform: translateX(16px); }
.cb-h1-toggle input:focus-visible + .cb-switch__track { outline: var(--cb-control-focus-width) solid var(--cb-focus); outline-offset: 2px; }
.cb-h1-toggle b { display: block; font-weight: 600; color: var(--cb-ink); }
.cb-h1-toggle small { display: block; font-size: var(--cb-fs-small); color: var(--cb-ink-3); }
.cb-h1-checkreal { cursor: pointer; }
.cb-h1-checkreal input { width: 18px; height: 18px; accent-color: var(--cb-accent); }
.cb-h1-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cb-h1-mod { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); cursor: pointer; }
.cb-h1-mod input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--cb-danger); flex-shrink: 0; }
.cb-h1-mod b { display: block; font-weight: 600; font-size: var(--cb-fs-body); color: var(--cb-ink); }
.cb-h1-mod small { display: block; font-size: var(--cb-fs-small); color: var(--cb-warning); }
.cb-h1-mod:has(input:checked) { border-color: color-mix(in oklch, var(--cb-danger) 45%, transparent); background: var(--cb-danger-tint); }
@media (max-width: 700px) {
  .cb-h1-counts { grid-template-columns: max-content 1fr; }
  .cb-h1-recordhead > .cb-row:last-child { width: 100%; }
}

/* segmented links, wallets, settings index */
.cb-seg > a { text-decoration: none; }
.cb-seg > a:hover:not(.is-on) { color: var(--cb-ink); }
.cb-h1-segscroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cb-table tr.cb-h1-lowrow td { background: color-mix(in oklch, var(--cb-danger-tint) 70%, var(--cb-surface)); }
.cb-h1-setlist { list-style: none; margin: 0; padding: 0; }
.cb-h1-setlist > li + li { border-top: 1px solid var(--cb-line); }
.cb-h1-setlist a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; color: inherit; text-decoration: none; }
.cb-h1-setlist a:hover { background: var(--cb-sunken); }
.cb-h1-setlist a > svg { width: 16px; height: 16px; color: var(--cb-ink-3); }
.cb-h1-setlist b { font-weight: 600; }
.cb-h1-setnav a.cb-nav__item { text-decoration: none; }
@media (max-width: 1023px) {
  .cb-h1-setnav { display: none; }
}
.cb-h1-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* grid children may shrink, so a wide table scrolls inside its wrap instead of widening the page (generic: belongs in components.css) */
.cb-content > * { min-width: 0; }
.cb-table-wrap { position: relative; } /* keeps visually hidden header text inside the scrolling wrap */
.cb-content .cb-card__foot { flex-wrap: wrap; gap: 8px; }
.cb-content .cb-card__foot .cb-btn { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: var(--cb-control-h); }

/* ---------- sign-in in the app (auth/login.blade.php) ---------- */
body.cb-h1-authpage { margin: 0; background: var(--cb-paper); color: var(--cb-ink); font: var(--cb-fw-body) var(--cb-fs-body)/var(--cb-lh-body) var(--cb-font); }
.cb-h1-authpage .cb-h1-auth { min-height: 100vh; }
.cb-h1-authpage .cb-h1-auth__card { width: min(420px, 100%); box-sizing: border-box; }
.cb-h1-authpage .cb-h1-auth__card h2 { color: var(--cb-ink); }
.cb-h1-authpage .cb-h1-auth__card p { margin: 0; }
.cb-h1-authpage .cb-h1-auth__card h2 + p { margin-top: 4px; }
.cb-h1-authpage .cb-h1-auth__back { text-decoration: none; }
.cb-h1-authpage .cb-h1-auth__back:hover { color: var(--cb-ink); }
.cb-h1-authpage .cb-h1-auth__brand { color: #fff; }
.cb-h1-authpage .cb-h1-auth__brand .cb-h1-crest { background: color-mix(in oklch, #fff 14%, transparent); }
.cb-h1-authpage .cb-h1-auth__brand img.cb-h1-crest { background: #fff; }
.cb-h1-authpage .cb-input { height: var(--cb-control-h-lg); font-size: 16px; }
.cb-h1-authpage .cb-input input { font-size: 16px; }
.cb-h1-authpage .cb-input:has(.axl-invalid) { border-color: var(--cb-danger); }
.cb-h1-authpage .cb-btn--lg { width: 100%; justify-content: center; }
.cb-h1-ferr:empty { display: none; }
.cb-h1-pwtoggle { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--cb-ink-3); cursor: pointer; }
.cb-h1-pwtoggle:hover { color: var(--cb-ink); }
.cb-h1-pwtoggle .eye-off, .cb-h1-pwtoggle[aria-pressed="true"] .eye-on { display: none; }
.cb-h1-pwtoggle[aria-pressed="true"] .eye-off { display: inline; }
.cb-h1-auth__divider { display: flex; align-items: center; gap: 10px; font-size: var(--cb-fs-label); font-weight: 650; color: var(--cb-ink-3); }
.cb-h1-auth__divider::before, .cb-h1-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--cb-line); }
.cb-h1-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-h1-demo > a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-surface); color: var(--cb-ink); text-decoration: none; }
.cb-h1-demo > a:hover { border-color: var(--cb-accent); background: var(--cb-accent-tint); }
.cb-h1-demo > a.is-wide { grid-column: 1 / -1; }
.cb-h1-demo > a > svg { width: 18px; height: 18px; color: var(--cb-accent-ink); flex-shrink: 0; }
.cb-h1-demo b { display: block; font-size: var(--cb-fs-body); font-weight: 650; }
.cb-h1-demo small { display: block; font-size: var(--cb-fs-small); color: var(--cb-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-h1-auth__otp { --otpx-accent: var(--cb-accent); --otpx-accent-contrast: var(--cb-on-accent); --otpx-surface: var(--cb-surface); --otpx-fg: var(--cb-ink); --otpx-muted: var(--cb-ink-3); --otpx-border: var(--cb-line-strong); --otpx-input-bg: var(--cb-surface); --otpx-danger: var(--cb-danger); --otpx-radius: var(--cb-radius-md); }
@media (max-width: 1023px) {
  .cb-h1-authpage .cb-h1-auth { grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
  .cb-h1-authpage .cb-h1-auth__brand { gap: 14px; padding: 20px 20px 22px; }
  .cb-h1-authpage .cb-h1-auth__hello { font-size: 24px; }
  .cb-h1-authpage .cb-h1-auth__brand .is-muted, .cb-h1-authpage .cb-h1-auth__by { display: none; }
  .cb-h1-authpage .cb-h1-auth__main { padding: 24px 16px 64px; align-content: start; }
  .cb-h1-authpage .cb-h1-auth__back { top: auto; bottom: 20px; right: auto; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 599px) {
  .cb-h1-authpage .cb-h1-auth__card { padding: 22px 18px; }
  .cb-h1-demo { grid-template-columns: minmax(0, 1fr); }
}
.cb-h1-crest[hidden] { display: none !important; }
.cb-h1-bare:focus, .cb-h1-bare:focus-visible { outline: none !important; box-shadow: none !important; }
.cb-h1-auth__row { flex-wrap: wrap; }
.cb-h1-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--cb-ink-2); }
.cb-h1-remember input { margin: 0; flex-shrink: 0; }
.cb-h1-scheddlg { width: min(520px, calc(100vw - 32px)); }
.cb-h1-sched { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); }
.cb-h1-sched b { display: block; font-weight: 600; }
.cb-h1-sched small { display: block; font-size: var(--cb-fs-small); color: var(--cb-ink-3); overflow-wrap: anywhere; }
.cb-h1-sched form { margin: 0; }
/* API reference in the app */
.cb-h1-apilist { max-height: calc(100vh - 140px); overflow-y: auto; position: sticky; top: 76px; }
.cb-h1-epdetails > summary { list-style: none; cursor: pointer; }
.cb-h1-epdetails > summary::-webkit-details-marker { display: none; }
.cb-h1-epdetails > summary > svg { transition: transform var(--cb-dur-fast) var(--cb-ease); }
.cb-h1-epdetails[open] > summary > svg { transform: rotate(90deg); }
a.cb-h1-ep { text-decoration: none; }
a.cb-h1-ep:hover:not(.is-on) { background: var(--cb-sunken); }
@media (max-width: 1100px) {
  .cb-h1-api { grid-template-columns: minmax(0, 1fr); }
  .cb-h1-apilist { position: static; max-height: 420px; }
}
.cb-h1-api > *, .cb-h1-split > *, .cb-h1-paygrid > * { min-width: 0; }
.cb-h1-api .cb-kv { grid-template-columns: max-content minmax(0, 1fr); }
.cb-h1-api .cb-kv dd { overflow-wrap: anywhere; }
.cb-h1-api .cb-stack > *, .cb-card__body.cb-stack > * { min-width: 0; }

/* ---------- the school site in the app (resources/views/public/v5) ---------- */
body.cb-h1-sitepage { margin: 0; background: var(--cb-paper); color: var(--cb-ink); font: var(--cb-fw-body) var(--cb-fs-body)/var(--cb-lh-body) var(--cb-font); }
.cb-h1-sitepage a:not(.cb-btn) { color: inherit; }
.cb-h1-sitepage .cb-link { color: var(--cb-accent-ink); }
.cb-h1-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px; border-radius: var(--cb-radius-sm); background: var(--cb-surface); color: var(--cb-ink); }
.cb-h1-skip:focus { left: 8px; }
.cb-h1-sitepage main:focus { outline: none; }
.cb-h1-sitepage .cb-h1-site__head { position: sticky; top: 0; z-index: 20; height: auto; min-height: 72px; flex-wrap: wrap; padding: 12px 48px; }
.cb-h1-site__name { color: var(--cb-ink); text-decoration: none; min-width: 0; }
.cb-h1-auth__brand .cb-h1-site__name { color: #fff; } /* the sign-in brand panel is dark: the name stays white */
.cb-h1-site__name b { overflow-wrap: anywhere; }
.cb-h1-site__menu { display: block; }
.cb-h1-site__menu > summary { display: none; list-style: none; cursor: pointer; }
.cb-h1-site__menu > summary::-webkit-details-marker { display: none; }
.cb-h1-site__nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
.cb-h1-site__nav > a:not(.cb-btn) { text-decoration: none; padding: 6px 0; }
.cb-h1-site__nav > a:not(.cb-btn):hover { color: var(--cb-ink); }
.cb-h1-site__nav .cb-btn { text-decoration: none; }
.cb-h1-site__ribbon { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: var(--cb-warning-tint); color: var(--cb-warning); font-size: var(--cb-fs-small); font-weight: 600; text-align: center; }
.cb-h1-sitepage .cb-h1-site__page { max-width: 1240px; margin: 0 auto; box-sizing: border-box; }
.cb-h1-sitepage .cb-h1-site__page > * { min-width: 0; }
.cb-h1-sitepage .cb-h1-hero h1 { overflow-wrap: anywhere; }
.cb-h1-sitepage .cb-h1-hero .cb-btn { text-decoration: none; }
.cb-h1-sitepage .cb-h1-hero .cb-btn--primary { color: #121f43; }
.cb-h1-foothead { margin: 0 0 10px; font-size: var(--cb-fs-label); font-weight: 650; color: var(--cb-ink-3); }
.cb-h1-site__foot a { text-decoration: none; }
.cb-h1-site__foot a:hover { color: var(--cb-ink); text-decoration: underline; }
.cb-h1-lead { max-width: 70ch; margin: 8px 0 0; font-size: 16px; }
.cb-h1-narrow { max-width: 760px !important; }
.cb-h1-lookupgrid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 20px; align-items: start; }
.cb-h1-applygrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cb-h1-lookupgrid > *, .cb-h1-applygrid > * { min-width: 0; }
.cb-h1-steppercard .cb-card__body { padding-top: 14px; padding-bottom: 14px; }
ol.cb-h1-stepper { list-style: none; margin: 0; padding: 0; }
.cb-h1-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-h1-steplegend { display: flex; width: 100%; box-sizing: border-box; float: left; }
.cb-h1-steplegend + * { clear: both; }
.cb-h1-stepfoot { display: flex; align-items: center; gap: 10px; }
.cb-h1-stepfoot .cb-h1-stepcount { margin-right: auto; }
.cb-h1-stepfoot [data-h1-prev]:not([hidden]) + .cb-h1-stepcount { margin-left: 0; }
form:not(.is-stepped) .cb-h1-stepcount { display: none; }
.cb-input.cb-h1-file { height: auto; padding: 8px 10px; font-size: var(--cb-fs-small); }
.cb-h1-payqr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-md); background: var(--cb-sunken); }
.cb-h1-payqr img { width: 140px; height: 140px; object-fit: contain; border-radius: 8px; background: #fff; }
.cb-h1-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cb-h1-ticks li { display: flex; gap: 8px; align-items: flex-start; }
.cb-h1-ticks svg { width: 16px; height: 16px; margin-top: 2px; color: var(--cb-success); flex-shrink: 0; }
.cb-h1-linklist > li { padding: 0; }
.cb-h1-linklist > li > a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 7px 14px; text-decoration: none; color: var(--cb-ink-2); }
.cb-h1-linklist > li > a:hover { background: var(--cb-sunken); color: var(--cb-ink); }
.cb-h1-linklist > li > a > svg { width: 16px; height: 16px; color: var(--cb-ink-3); flex-shrink: 0; }
.cb-h1-tile { text-decoration: none; }
.cb-h1-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-h1-tile > img + svg { display: none; }
.cb-h1-steps > li { grid-template-columns: auto minmax(0, 1fr) auto; }
.cb-h1-valid.is-bad { border-color: color-mix(in oklch, var(--cb-danger) 35%, transparent); box-shadow: inset 0 4px 0 var(--cb-danger); }
.cb-h1-valid.is-bad .cb-h1-valid__icon { background: var(--cb-danger-tint); color: var(--cb-danger); }
.cb-h1-valid.is-neutral { border-color: var(--cb-line); box-shadow: inset 0 4px 0 var(--cb-info); }
.cb-h1-valid > * { min-width: 0; }
.cb-h1-bigkv { font-size: 15px; grid-template-columns: max-content minmax(0, 1fr); }
.cb-h1-bigkv dd { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .cb-h1-sitepage .cb-h1-site__head { padding: 10px 24px; }
  .cb-h1-sitepage .cb-h1-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 24px; }
  .cb-h1-sitepage .cb-h1-photo { display: none; }
  .cb-h1-sitepage .cb-h1-site__page { padding: 24px; }
  .cb-h1-sitepage .cb-h1-site__foot { grid-template-columns: 1fr 1fr; padding: 24px; }
  .cb-h1-sitepage .cb-h1-site__legal { padding: 14px 24px; }
  .cb-h1-lookupgrid, .cb-h1-applygrid { grid-template-columns: minmax(0, 1fr); }
  .cb-h1-sitepage .cb-h1-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .cb-h1-site__menu > summary { display: inline-flex; }
  .cb-h1-site__menu[open] { flex-basis: 100%; }
  .cb-h1-site__menu[open] > summary { margin-left: auto; display: flex; width: max-content; }
  .cb-h1-site__menu[open] .cb-h1-site__nav { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 10px; }
  .cb-h1-site__menu[open] .cb-h1-site__nav > a:not(.cb-btn) { padding: 10px 4px; border-bottom: 1px solid var(--cb-line); }
  .cb-h1-sitepage .cb-h1-site__head { position: static; }
}
@media (max-width: 599px) {
  .cb-h1-sitepage .cb-h1-site__head { padding: 10px 16px; }
  .cb-h1-sitepage .cb-h1-hero { padding: 28px 16px; }
  .cb-h1-sitepage .cb-h1-hero h1 { font-size: 30px; }
  .cb-h1-sitepage .cb-h1-facts { gap: 20px; flex-wrap: wrap; }
  .cb-h1-sitepage .cb-h1-site__page { padding: 16px; gap: 16px; }
  .cb-h1-sitepage .cb-h1-display { font-size: 26px; }
  .cb-h1-sitepage .cb-h1-site__foot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cb-h1-sitepage .cb-h1-site__legal { flex-direction: column; gap: 4px; padding: 12px 16px; }
  .cb-h1-hide-phone { display: none !important; }
  .cb-h1-stepper .cb-stepper__step:not(.is-on) .cb-h1-steplabel { display: none; }
  .cb-h1-stepper .cb-stepper__line { min-width: 8px; }
  .cb-h1-payqr { grid-template-columns: minmax(0, 1fr); }
  .cb-h1-stepfoot { flex-wrap: wrap; }
}
@media print {
  .cb-h1-site__head, .cb-h1-site__foot, .cb-h1-site__legal, .cb-h1-lookupgrid > .cb-card:first-child, .cb-h1-skip { display: none !important; }
  .cb-h1-lookupgrid { grid-template-columns: 1fr; }
}
.cb-h1-sitepage [hidden], .cb-h1-authpage [hidden] { display: none !important; }
@media (max-width: 1023px) { .cb-h1-lookupgrid > .cb-h1-valid { order: -1; } }