/* Global polish for every console page. Loads last.
   One type scale from a 15px body (13, 14, 15, 17, 21, 28), one spacing scale (8, 12, 16, 20, 24, 32, 40),
   controls a size up so nothing is squeezed, tables without row lines, and tactile but quiet motion.
   Design rules: near-black text, hierarchy by size and weight, no row dividers, teal for current and main action. */

:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* ---------- Type ---------- */
body { font-size: 15px; line-height: 1.5; }
.small { font-size: 13px; line-height: 1.45; }
h1 { font-size: 28px; line-height: 1.2; text-wrap: pretty; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 15px; line-height: 1.35; }
.page-head { margin-bottom: 32px; gap: 16px 24px; align-items: center; }
.page-head p { font-size: 15px; margin-top: 8px; }

/* ---------- Layout ---------- */
.content { padding: 40px 48px 96px; }
.card { border-radius: 20px; }
.stack { gap: 20px; }
.stack-lg { gap: 32px; }
.mgrid-in { gap: 20px !important; }
@media (max-width: 860px) { .content { padding: 24px 16px 80px; } }

/* ---------- Sidebar ---------- */
.sb-item { height: 38px; font-size: 14.5px; gap: 12px; padding: 0 12px; }
.sb-item .ph { font-size: 18px; }
.sb-sub a { height: 32px; font-size: 14px; }
.sb-label { font-size: 13px; margin: 14px 12px 4px; }
.sb-group + .sb-group { margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn { height: 40px; padding: 0 16px; font-size: 14.5px; gap: 8px; border-radius: 10px; transition: background .15s var(--motion-standard), transform .16s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 16px; }
.btn.primary, .btn.ink { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover, .btn.ink:hover { background: color-mix(in oklch, var(--brand) 88%, black); }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; }
.pill-btn { height: 40px; padding: 0 14px; font-size: 14px; }

/* ---------- Tabs and segmented controls ---------- */
.pill-tabs { padding: 4px; gap: 2px; }
.pill-tabs button { height: 34px; padding: 0 14px; font-size: 14px; gap: 8px; transition: background .15s, color .15s; }
.pill-tabs button .c { font-size: 13px; padding: 1px 7px; }
.row.wrap:has(> .pill-tabs), .toolbar { gap: 12px 16px; margin-bottom: 20px; }

/* ---------- Status tags: readable, never tiny ---------- */
.tint { height: 26px; padding: 0 10px; font-size: 13px; font-weight: 600; }
.badge-count { min-width: 22px; height: 22px; font-size: 12.5px; }

/* ---------- Tables: roomy rows with a hairline between them, wrap only where it helps ---------- */
:root { --hair: color-mix(in oklch, var(--border) 75%, transparent); }
.dark { --hair: color-mix(in oklch, white 8%, transparent); }
.table-wrap { overflow-x: auto; }
table.lib { font-size: 14.5px; }
table.lib th { padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--foreground); border-bottom: 1px solid var(--hair); background: transparent; }
table.lib td { padding: 14px 16px; border-bottom: 1px solid var(--hair); line-height: 1.45; }
table.lib tbody tr:last-child td { border-bottom: 0; }
/* Amounts, dates, short codes and status tags stay on one line; names and descriptions wrap */
table.lib td.r, table.lib td:has(> .tint), table.lib td:has(> .tint-wrap), table.lib td:first-child:not(:has(strong)) { white-space: nowrap; }
table.lib td:has(strong), table.lib td:has(.sub), table.lib td.wrap { min-width: 200px; }
table.lib td strong { font-size: 15px; font-weight: 600; }
table.lib td .small, table.lib td .sub { display: block; margin-top: 2px; }
table.lib tbody tr { transition: background-color .15s; }
table.lib tbody tr:hover td { background: color-mix(in oklch, var(--brand) 5%, transparent); }
/* Rows rise in, 30ms apart, when a list is drawn or a tab changes */
table.lib tbody tr { animation: row-in .32s cubic-bezier(.22, 1, .36, 1) both; }
table.lib tbody tr:nth-child(2) { animation-delay: 30ms } table.lib tbody tr:nth-child(3) { animation-delay: 60ms }
table.lib tbody tr:nth-child(4) { animation-delay: 90ms } table.lib tbody tr:nth-child(5) { animation-delay: 120ms }
table.lib tbody tr:nth-child(6) { animation-delay: 150ms } table.lib tbody tr:nth-child(7) { animation-delay: 180ms }
table.lib tbody tr:nth-child(n+8) { animation-delay: 210ms }
@keyframes row-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
/* Lists outside tables get the same hairline */
.bs-list > li + li, .feed-item + .feed-item, .ex-paylist > li + li, .ex-trail > li + li { border-top: 1px solid var(--hair); }
.ex-paylist > li + li, .ex-trail > li + li { padding-top: 10px; }
.kv-list > div + div { border-top: 1px solid var(--hair); }

/* ---------- Tabs and toggles: one indicator slides to the chosen option (motion.js) ---------- */
.has-thumb { position: relative; isolation: isolate; }
.has-thumb > button { position: relative; z-index: 1; }
.slide-thumb { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; transform-origin: left center; will-change: transform; transition: opacity .15s; }
.pill-tabs.has-thumb > button.on, .seg.has-thumb > button.on, .lvl.has-thumb > button.on { background: transparent; box-shadow: none; }
.pill-tabs > .slide-thumb, .seg > .slide-thumb { border-radius: 999px; background: var(--card); box-shadow: var(--elevation-1), var(--inset-top); }
.lvl > .slide-thumb { border-radius: 8px; background: var(--card); box-shadow: 0 4px 12px -6px rgba(0, 85, 81, .4); }
.person-tabs.has-thumb > button::after { display: none; }
.person-tabs > .slide-thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--brand); }
.pill-tabs button, .lvl button, .seg button { transition: color .2s; }
/* Switches: the knob stretches as it travels */
.switch.moved::after { animation: knob-stretch .25s cubic-bezier(.65, 0, .35, 1); }
@keyframes knob-stretch { 50% { scale: 1.12 .9; } }
@media (prefers-reduced-motion: reduce) { table.lib tbody tr { animation: none; } .switch.moved::after { animation: none; } }

.card > .table-wrap { padding: 8px; }
.lib-foot { border-top: 0; padding: 14px 20px; font-size: 13px; }

/* ---------- Metric cards ---------- */
.mcard { padding: 24px; gap: 4px; }
.mc-label { font-size: 14px; color: var(--foreground); }
.mc-value { margin-top: 12px; }
.mc-meta, .mc-note { font-size: 13.5px; }
.mc-foot { font-size: 14px; padding-top: 16px; margin-top: auto; }

/* ---------- Forms ---------- */
.field { gap: 8px; }
.field > label, .label { font-size: 14px; font-weight: 500; }
.field .hint { font-size: 13px; color: var(--text-minor); }
.input, .select, .textarea { height: 44px; padding: 0 14px; font-size: 15px; border-radius: 10px; }
.textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 18%, transparent); }
.radio-cards { gap: 10px; }
.radio-card { padding: 16px; gap: 6px; border-radius: 14px; }
.radio-card strong { font-size: 15px; }
.radio-card span { font-size: 13.5px; line-height: 1.45; color: var(--foreground); }
.radio-card.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.facts { font-size: 15px; gap: 12px 24px; }
.facts dt { color: var(--foreground); }
.facts dd { font-weight: 500; }

/* ---------- Sheets and dialogs: no rule lines, more air ---------- */
.sheet { border-radius: 20px; }
.sheet-head { padding: 24px 28px 8px; border-bottom: 0; }
.sheet-head h2 { font-size: 21px; line-height: 1.25; }
.sheet-head p { font-size: 14.5px; margin-top: 6px; color: var(--foreground); }
.sheet-body { padding: 16px 28px 28px; gap: 24px; }
.sheet-foot { padding: 16px 28px 24px; border-top: 0; gap: 12px; }
.sheet-foot .btn { min-width: 112px; }
.dialog { padding: 28px; gap: 20px; border-radius: 20px; }
.dialog h2 { font-size: 21px; }
.dialog p { font-size: 15px; line-height: 1.55; }
.menu { border-radius: 14px; padding: 6px; }
.menu .mi { height: 38px; font-size: 14.5px; border-radius: 9px; }

/* ---------- Empty states ---------- */
.empty { padding: 56px 24px; gap: 12px; }
.empty h2 { font-size: 19px; }
.empty p { font-size: 15px; }

/* ---------- Motion: rows and cards settle in, briefly, in order ---------- */
@keyframes polish-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.content .mgrid-in > *, .content .be-cards > * { animation: polish-rise .42s var(--ease-out) both; }
.content .mgrid-in > :nth-child(2), .content .be-cards > :nth-child(2) { animation-delay: 40ms; }
.content .mgrid-in > :nth-child(3), .content .be-cards > :nth-child(3) { animation-delay: 80ms; }
.content .mgrid-in > :nth-child(4), .content .be-cards > :nth-child(4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .content .mgrid-in > *, .content .be-cards > * { animation: none; } .btn:active { transform: none; } }

/* ---------- Dark ---------- */


.nt-x { width: 34px; height: 34px; }
.content small { font-size: 13px; }
.content .mc-meta span, .content .mc-note { font-size: 13.5px; }

/* ---------- Phone header: everything fits, nothing clipped at the edge ---------- */
@media (max-width: 600px) {
  .hdr { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .hdr-right { gap: 4px; margin-left: auto; }
  .hdr .icon-btn, .hdr .pill-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .hdr .sep { display: none; }
}

/* ---------- Responsive: layouts follow the content area's width, not the window's ----------
   The sidebar takes about 260px, so the window width says little about the room a page has. */
#content { container: content / inline-size; }
@container content (max-width: 860px) {
  .qr-detail, .record, .person-grid, .studio, .ws-two { grid-template-columns: minmax(0, 1fr) !important; }
  .qr-detail { gap: 8px; }
  .gd { grid-template-columns: minmax(0, 1fr) !important; } .gd-nav { display: none !important; }
}
@container content (max-width: 560px) {
  .qr-side { flex-direction: column; }
  .qr-funnel > div { grid-template-columns: 8rem minmax(0, 1fr) 2.5rem; }
  .page-head { flex-wrap: wrap; gap: 12px; }
  .page-head .actions { width: 100%; }
}
.qr-act { flex: 1 1 auto; min-width: 0; }
.qr-copy { min-width: 0; max-width: 100%; overflow: hidden; }
tr.qr-open > td { background: color-mix(in oklch, var(--foreground) 2.5%, var(--card)) !important; }
.qr-row.on td { background: color-mix(in oklch, var(--foreground) 2.5%, var(--card)); }

/* Tables that do not fit their card stack (motion.js measures them) */
table.lib.stacked thead { display: none; }
table.lib.stacked, table.lib.stacked > tbody { display: block; }
table.lib.stacked > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
table.lib.stacked > tbody > tr:last-child { border-bottom: 0; }
table.lib.stacked > tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; white-space: normal !important; text-align: left !important; background: none !important; border-radius: 0 !important; }
table.lib.stacked > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 400; color: var(--foreground); margin-bottom: 2px; }
table.lib.stacked > tbody > tr > td:has(strong), table.lib.stacked > tbody > tr > td[data-wide] { grid-column: 1 / -1; order: -1; }
table.lib.stacked > tbody > tr > td[data-wide] { order: 0; margin: 0 -16px -14px; }
table.lib.stacked > tbody > tr > td:has(> .btn):not([data-label]) { grid-column: 1 / -1; }
table.lib.stacked > tbody > tr > td[data-empty] { display: none; }
table.lib.stacked > tbody > tr:hover { background: color-mix(in oklch, var(--brand) 5%, transparent); }

/* ---------- The menu as a drawer below 1024px, as on iPad ----------
   It floats in from the left edge with rounded corners and the page dimmed behind. In: 320ms on Apple's
   decelerating curve. Out: 260ms. While a finger drags it, it follows the finger with no easing. */
.sb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sb-top .sb-head { flex: 1; min-width: 0; }
.sb-close { display: none; margin: 14px 10px 0 0; }
.sb-scrim { display: none; }
@media (max-width: 1023px) {
  .app .sidebar { position: fixed; z-index: 86; top: 8px; bottom: 8px; left: 8px; width: min(300px, calc(100vw - 56px)); border-radius: 20px;
    background: var(--sidebar, var(--background)); box-shadow: 0 24px 64px -16px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .08);
    transform: translateX(calc(-100% - 16px)); visibility: hidden;
    transition: transform .26s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .26s; touch-action: pan-y; }
  .app.menu-open .sidebar { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  .app.menu-drag .sidebar, .app.menu-drag .sb-scrim { transition: none !important; }
  .app.collapsed .sidebar { width: min(300px, calc(100vw - 56px)); }
  .sb-close { display: inline-grid; }
  .sb-scrim { display: block; position: fixed; inset: 0; z-index: 85; background: rgb(10 12 12 / .32); opacity: 0; pointer-events: none; transition: opacity .26s ease; }
  .app.menu-open .sb-scrim { opacity: 1; pointer-events: auto; transition: opacity .32s ease-out; }
  .inset { margin-left: 0; }
  html.menu-lock, html.menu-lock body { overflow: hidden; }
}
.dark .app .sidebar { box-shadow: 0 24px 64px -16px rgb(0 0 0 / .7); }
@media (prefers-reduced-motion: reduce) { .app .sidebar, .sb-scrim { transition: none !important; } }

/* ---------- Search fields, as in the references: a soft filled field, no outline until focused ---------- */
.field-search { position: relative; display: inline-flex; align-items: center; }
.field-search > .ph { left: 12px; font-size: 16px; color: var(--text-minor, #6e6e73); pointer-events: none; z-index: 1; }
.field-search .input, .ex-filters input[type="search"], .toolbar input[type="search"].input {
  height: 38px; padding-left: 36px !important; font-size: 14px; border-radius: 10px; border-color: transparent;
  background: color-mix(in oklch, var(--foreground) 5%, var(--card)); transition: background-color .15s, box-shadow .15s, border-color .15s; }
.field-search .input:hover { background: color-mix(in oklch, var(--foreground) 7%, var(--card)); }
.field-search .input:focus, .ex-filters input[type="search"]:focus { background: var(--card); border-color: color-mix(in oklch, var(--brand) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 16%, transparent); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 16px; width: 16px; border-radius: 99px; cursor: pointer;
  background: color-mix(in oklch, var(--foreground) 35%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.hdr .search input { height: 36px; border-radius: 10px; border-color: transparent; font-size: 14px; background: color-mix(in oklch, var(--foreground) 5%, var(--card)); }
.hdr .search input:focus { background: var(--card); border-color: color-mix(in oklch, var(--brand) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 16%, transparent); }
table.lib.stacked > tbody > tr > td.cb { position: absolute; top: 14px; right: 16px; }
table.lib.stacked > tbody > tr { position: relative; }
table.lib.stacked .tint, table.lib.stacked .tint-wrap { white-space: normal; max-width: 100%; }
table.lib.stacked > tbody > tr > td * { max-width: 100%; }

/* In-page loader (window.ssLoader): the same mark and ring as the page loader, smaller */
.ld { display: grid; place-items: center; padding: 40px 16px; }
.ld-in { position: relative; width: 52px; height: 52px; display: grid; place-items: center; opacity: 0; animation: boot-show .3s ease-out .12s forwards; }
.ld .boot-ring { position: absolute; inset: 0; width: 52px; height: 52px; animation: boot-up .9s cubic-bezier(.4, 0, 1, 1), boot-spin 3s linear .9s infinite; }
.ld .boot-ring circle { fill: none; stroke-width: 3; }
.ld .boot-ring .track { stroke: color-mix(in oklch, currentColor 10%, transparent); }
.ld .boot-ring .arc { stroke: var(--brand, #005551); stroke-linecap: round; stroke-dasharray: 52 300; }
.ld .boot-mark { width: 20px; height: auto; }
.dark .ld .boot-mark path[fill="#005551"] { fill: #FFFEE2; }
.ld-card { min-height: 160px; display: grid; place-items: center; }
@keyframes boot-show { to { opacity: 1 } }
@keyframes boot-up { from { transform: rotate(0) } to { transform: rotate(100deg) } }
@keyframes boot-spin { from { transform: rotate(100deg) } to { transform: rotate(460deg) } }
@media (prefers-reduced-motion: reduce) { .ld .boot-ring { animation: none; } .ld-in { animation: none; opacity: 1; } }

/* Lists inside cards and sheets: a fine line between rows (Apple's inset-grouped lists) */
.kv-list > div { padding: 10px 0; }
.ex-paylist > li, .ex-trail > li { padding: 10px 0; }
.ex-paylist > li:first-child, .ex-trail > li:first-child { padding-top: 0; }
.ex-paylist, .ex-trail { gap: 0 !important; }
.nt-list .nt-row + .nt-row { border-top: 1px solid var(--hair); border-radius: 0; }
.gd-notes li + li { border-top: 1px solid var(--hair); padding-top: 6px; }