/* ==========================================================================
   QTS Network Access design system
   Visual specification: the approved QTS Network Access mockup.
   Poppins throughout. Navy and QTS blue dominate; gold is the accent.
   All colors are tokens below; templates never introduce their own.
   ========================================================================== */

:root {
  --qts-navy-dark: #050F22;
  --qts-navy: #0A1E3F;
  --qts-navy-2: #0F2A57;
  --qts-blue: #1747A8;
  --qts-blue-bright: #2F7BFF;
  --qts-blue-glow: rgba(47, 123, 255, .45);
  --qts-gold: #C9A227;
  --qts-gold-light: #E9CF7A;
  --qts-gold-dark: #9E7C15;
  --qts-bg: #F3F5F9;
  --qts-surface: #FFFFFF;
  --qts-surface-2: #F7F9FC;
  --qts-border: #E2E7F0;
  --qts-border-strong: #CBD4E2;
  --qts-text: #0F1E36;
  --qts-muted: #64708A;
  --qts-success: #1E8A55; --qts-success-bg: #E7F6EE; --qts-success-line: #BFE6CF;
  --qts-danger: #B3282E;  --qts-danger-bg: #FCECEC;  --qts-danger-line: #F2C4C6;
  --qts-warning: #9A6B00; --qts-warning-bg: #FFF6DE; --qts-warning-line: #F0DDA4;
  --qts-info: #1747A8;    --qts-info-bg: #E9F0FC;    --qts-info-line: #C7D8F5;
  --radius: 12px; --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(10, 30, 63, .05), 0 6px 20px rgba(10, 30, 63, .06);
  --sidebar-w: 236px; --sidebar-w-collapsed: 72px; --topbar-h: 60px;
  --font: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--qts-text); background: var(--qts-bg); }
h1, h2, h3, h4 { margin: 0 0 .35rem; color: var(--qts-navy); line-height: 1.25; letter-spacing: -.005em; }
h1 { font-size: 1.55rem; font-weight: 600; } h2 { font-size: 1.05rem; font-weight: 600; } h3 { font-size: .95rem; font-weight: 600; } h4 { font-size: .86rem; font-weight: 500; }
p { margin: 0 0 .9rem; }
a { color: var(--qts-blue); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--qts-gold); text-underline-offset: 3px; }
strong { font-weight: 600; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; }
.muted { color: var(--qts-muted); } .small { font-size: .84rem; } .tiny { font-size: .74rem; }
.kicker { display: inline-block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--qts-gold-dark); font-weight: 600; margin-bottom: .3rem; }
.gold-rule { height: 2px; background: linear-gradient(90deg, var(--qts-gold-dark), var(--qts-gold) 35%, var(--qts-gold-light) 50%, var(--qts-gold) 65%, var(--qts-gold-dark)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.right { text-align: right; } .nowrap { white-space: nowrap; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.4rem; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
svg { display: inline-block; vertical-align: middle; flex: none; }
h1 svg, h2 svg, h3 svg { width: 18px; height: 18px; margin-right: .4rem; vertical-align: -3px; color: var(--qts-navy); }

/* ---------- Brand ---------- */
.brand-logo { display: block; max-width: 100%; height: auto; object-fit: contain; }
.brand-title { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.brand-title .accent { background: linear-gradient(180deg, var(--qts-gold-light), var(--qts-gold) 60%, var(--qts-gold-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-weight: 600; font-size: .86rem; height: 40px; padding: 0 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--qts-gold); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--qts-navy); color: #fff; border-color: var(--qts-navy); }
.btn-primary:hover { background: var(--qts-navy-2); border-color: var(--qts-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
.btn-gold { background: linear-gradient(180deg, #E4C35A, var(--qts-gold) 55%, #B8921E); color: var(--qts-navy-dark); border-color: #B8921E; }
.btn-gold:hover { background: linear-gradient(180deg, #EFD27A, #D4AE33 55%, #B8921E); box-shadow: 0 6px 18px rgba(201,162,39,.35); }
.btn-secondary { background: var(--qts-surface); color: var(--qts-navy); border-color: var(--qts-border-strong); }
.btn-secondary:hover { border-color: var(--qts-gold); background: var(--qts-surface-2); }
.btn-ghost { background: transparent; color: var(--qts-navy); border-color: transparent; }
.btn-ghost:hover { background: var(--qts-surface-2); }
.btn-danger { background: var(--qts-surface); color: var(--qts-danger); border-color: var(--qts-danger-line); }
.btn-danger:hover { background: var(--qts-danger-bg); }
.btn-success { background: var(--qts-success); color: #fff; border-color: var(--qts-success); }
.btn-sm { height: 34px; padding: 0 .75rem; font-size: .8rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 16px; height: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.inline { display: inline; margin: 0; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: .25rem; }
.form label, .field label { font-size: .82rem; color: var(--qts-navy); margin-top: .7rem; font-weight: 500; }
.form input, .form select, .form textarea, .field input, .field select, .field textarea {
  font: inherit; font-size: .9rem; padding: .6rem .8rem; border: 1px solid var(--qts-border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--qts-text); width: 100%; height: 42px;
}
.form textarea, .field textarea { height: auto; min-height: 96px; resize: vertical; }
.form input::placeholder, .field input::placeholder { color: #98A3B8; }
.form input:focus, .form select:focus, .form textarea:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--qts-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.2); }
.form .help, .field .help { font-size: .76rem; color: var(--qts-muted); margin-top: .2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.1rem; }
.form-grid .span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field.has-error input { border-color: var(--qts-danger); }
.form-actions { display: flex; gap: .55rem; margin-top: 1.3rem; align-items: center; flex-wrap: wrap; }
.field-error { color: var(--qts-danger); font-size: .78rem; }
.input-icon { position: relative; }
.input-icon > svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #9AA6BC; pointer-events: none; }
.input-icon > input { padding-left: 2.6rem; }
.input-icon .eye { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #9AA6BC; cursor: pointer; padding: .3rem; display: inline-flex; }
.input-icon .eye svg { width: 18px; height: 18px; }
.input-icon .eye:hover { color: var(--qts-navy); }

/* ---------- Cards ---------- */
.card { background: var(--qts-surface); border: 1px solid var(--qts-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.15rem 1.3rem; }
.card + .card { margin-top: 1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.card-head h2 { margin: 0; display: flex; align-items: center; }
.card-head .link { font-size: .8rem; font-weight: 500; }
.card-actions { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--qts-border); display: flex; gap: .55rem; flex-wrap: wrap; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: 1rem 1.2rem 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.grid-2 > .card + .card { margin-top: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }

/* ---------- KPI tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.tile { display: flex; flex-direction: column; gap: .2rem; background: var(--qts-surface); border: 1px solid var(--qts-border); border-radius: var(--radius); padding: .95rem 1.05rem; box-shadow: var(--shadow-card); color: inherit; text-decoration: none; min-height: 118px; }
a.tile:hover { text-decoration: none; border-color: var(--qts-gold); }
.tile-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .35rem; background: var(--qts-info-bg); color: var(--qts-blue); }
.tile-icon svg { width: 18px; height: 18px; }
.tile-icon.gold { background: #FBF3DA; color: var(--qts-gold-dark); }
.tile-icon.navy { background: #E7ECF6; color: var(--qts-navy); }
.tile-icon.blue { background: var(--qts-info-bg); color: var(--qts-blue-bright); }
.tile-icon.green { background: var(--qts-success-bg); color: var(--qts-success); }
.tile-icon.warn { background: var(--qts-warning-bg); color: var(--qts-warning); }
.tile-value { font-size: 1.55rem; font-weight: 600; color: var(--qts-navy); line-height: 1.1; }
.tile-label { font-size: .78rem; color: var(--qts-muted); line-height: 1.3; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th { text-align: left; font-weight: 600; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qts-muted); padding: .65rem 1rem; border-bottom: 1px solid var(--qts-border); background: var(--qts-surface-2); white-space: nowrap; }
.table td { padding: .7rem 1rem; border-bottom: 1px solid var(--qts-border); vertical-align: middle; }
.table tbody tr:hover { background: #FAFBFD; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-primary { font-weight: 600; color: var(--qts-navy); }
.table .cell-sub { display: block; font-size: .76rem; color: var(--qts-muted); font-weight: 400; }
.table .cell-actions { text-align: right; white-space: nowrap; }
.table a.row-link { color: var(--qts-navy); }
.table th a { color: var(--qts-muted); } .table th a.sorted { color: var(--qts-navy); }

/* ---------- Pills, alerts, empty ---------- */
.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .2rem .6rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { color: var(--qts-success); background: var(--qts-success-bg); border-color: var(--qts-success-line); }
.pill-info { color: var(--qts-info); background: var(--qts-info-bg); border-color: var(--qts-info-line); }
.pill-warn { color: var(--qts-warning); background: var(--qts-warning-bg); border-color: var(--qts-warning-line); }
.pill-bad { color: var(--qts-danger); background: var(--qts-danger-bg); border-color: var(--qts-danger-line); }
.pill-muted { color: var(--qts-muted); background: #EEF1F6; border-color: var(--qts-border); }
.pill-gold { color: var(--qts-gold-dark); background: #FBF4DD; border-color: var(--qts-gold-light); }
.pill-navy { color: #fff; background: var(--qts-navy); border-color: var(--qts-navy); }
.pill-navy::before { background: var(--qts-gold-light); }
.alert, .flash { padding: .75rem .95rem; border-radius: var(--radius-sm); border: 1px solid; font-size: .86rem; margin: 0 0 1rem; }
.alert-error, .flash-error { color: var(--qts-danger); background: var(--qts-danger-bg); border-color: var(--qts-danger-line); }
.alert-success, .flash-success { color: var(--qts-success); background: var(--qts-success-bg); border-color: var(--qts-success-line); }
.alert-info, .flash-info { color: var(--qts-info); background: var(--qts-info-bg); border-color: var(--qts-info-line); }
.alert-warn, .flash-warn { color: var(--qts-warning); background: var(--qts-warning-bg); border-color: var(--qts-warning-line); }
.empty { text-align: center; padding: 2rem 1rem; color: var(--qts-muted); }
.empty .empty-icon { width: 44px; height: 44px; border-radius: 12px; background: #EEF1F6; display: inline-flex; align-items: center; justify-content: center; color: var(--qts-blue); margin-bottom: .6rem; }
.empty .empty-icon svg { width: 22px; height: 22px; }
.empty h3 { color: var(--qts-navy); }

/* ---------- Facts, record header, tabs ---------- */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.3rem; margin: 0; font-size: .86rem; }
.facts dt { color: var(--qts-muted); }
.facts dd { margin: 0; font-weight: 500; color: var(--qts-text); word-break: break-word; }
.record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.record-head .ident { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.record-head .display-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--qts-muted); }
.record-head .pills { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; }
.record-head .pills > * { flex: 0 0 auto; }
.pill svg { width: 12px; height: 12px; flex: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head p { margin-bottom: 0; }
.breadcrumb { font-size: .8rem; color: var(--qts-muted); margin-bottom: .4rem; }
.breadcrumb a { color: var(--qts-muted); }
.breadcrumb span::before { content: '›'; margin: 0 .45rem; color: var(--qts-border-strong); }
.tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--qts-border); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .6rem .9rem; color: var(--qts-muted); font-weight: 500; font-size: .86rem; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tabs a:hover { text-decoration: none; color: var(--qts-navy); }
.tabs a.is-active { color: var(--qts-navy); font-weight: 600; border-bottom-color: var(--qts-gold); }
.tabs .count { display: inline-block; margin-left: .35rem; font-size: .68rem; background: #EEF1F6; color: var(--qts-muted); padding: .05rem .42rem; border-radius: 999px; }

/* ---------- Filters, pagination ---------- */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .9rem; }
.filters .field { min-width: 150px; flex: 1 1 150px; } .filters .field label { margin-top: 0; }
.filters .field.search { flex: 2 1 240px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.1rem; border-top: 1px solid var(--qts-border); font-size: .8rem; color: var(--qts-muted); }
.pagination .pages { display: flex; gap: .3rem; }
.pagination .pages a, .pagination .pages span { padding: .3rem .6rem; border-radius: 6px; border: 1px solid var(--qts-border); color: var(--qts-navy); }
.pagination .pages span.current { background: var(--qts-navy); color: #fff; border-color: var(--qts-navy); }

/* ---------- Application shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, #0B2149 0%, var(--qts-navy) 45%, var(--qts-navy-dark) 100%); color: #fff; display: flex; flex-direction: column; box-shadow: inset -1px 0 0 rgba(255,255,255,.05); }
.sidebar-brand { padding: 1rem 1.1rem .85rem; border-bottom: 1px solid rgba(201,162,39,.45); }
.sidebar-brand .brand-logo { height: 40px; width: auto; max-width: 100%; }
.sidebar-brand .app-name { display: block; margin-top: .75rem; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--qts-gold-light); font-weight: 600; }
.sidebar-nav { padding: .8rem .7rem; display: flex; flex-direction: column; gap: .15rem; }
.sidebar-nav .nav-label { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); padding: .9rem .7rem .3rem; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: 9px; color: rgba(255,255,255,.82); font-weight: 500; font-size: .86rem; position: relative; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-item.is-active { background: var(--qts-blue); color: #fff; box-shadow: 0 6px 18px rgba(23,71,168,.35); }
.nav-item.is-active::before { content: ''; position: absolute; left: -.7rem; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--qts-gold); }
.nav-item svg { width: 19px; height: 19px; }
.nav-item .badge { margin-left: auto; background: var(--qts-gold); color: var(--qts-navy-dark); font-size: .66rem; font-weight: 700; padding: .12rem .48rem; border-radius: 999px; }
.sidebar-foot { margin-top: auto; padding: .7rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot form { margin: 0; }
.sidebar-foot .nav-item { width: 100%; background: transparent; border: 0; font: inherit; cursor: pointer; text-align: left; }
.app.is-collapsed .sidebar-brand .app-name, .app.is-collapsed .nav-item span, .app.is-collapsed .nav-label, .app.is-collapsed .nav-item .badge { display: none; }
.app.is-collapsed .nav-item { justify-content: center; padding: .62rem .4rem; }
.app.is-collapsed .nav-item.is-active::before { display: none; }
.app.is-collapsed .sidebar-brand { padding: .9rem .5rem; }
.app.is-collapsed .sidebar-brand .brand-logo { height: 26px; margin: 0 auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: var(--qts-surface); display: flex; align-items: center; gap: .8rem; padding: 0 1.4rem; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--qts-border); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--qts-gold-dark), var(--qts-gold) 40%, var(--qts-gold-light) 55%, var(--qts-gold) 70%, var(--qts-gold-dark)); opacity: .85; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--qts-navy); cursor: pointer; }
.icon-btn:hover { background: var(--qts-surface-2); }
.icon-btn svg { width: 21px; height: 21px; }
.topbar-title { font-weight: 600; color: var(--qts-navy); font-size: .95rem; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.topbar-search { position: relative; }
.topbar-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #98A3B8; }
.topbar-search input { font: inherit; font-size: .82rem; height: 36px; width: 240px; padding: 0 .8rem 0 2.2rem; border: 1px solid var(--qts-border); border-radius: 999px; background: var(--qts-surface-2); color: var(--qts-text); }
.topbar-search input:focus { outline: none; border-color: var(--qts-gold); background: #fff; box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .25rem .4rem .25rem .25rem; border-radius: 10px; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--qts-surface-2); }
.user-menu[open] > summary { background: var(--qts-surface-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--qts-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; letter-spacing: .04em; border: 2px solid var(--qts-gold-light); flex: none; }
.who-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.who-name { font-weight: 600; font-size: .84rem; color: var(--qts-navy); }
.who-meta { font-size: .72rem; color: var(--qts-muted); }
.user-menu .chev { width: 16px; height: 16px; color: var(--qts-muted); }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: #fff; border: 1px solid var(--qts-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(10,30,63,.14); padding: .4rem; z-index: 30; }
.user-menu .menu a, .user-menu .menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border-radius: 7px; color: var(--qts-navy); background: none; border: 0; font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer; text-align: left; }
.user-menu .menu a:hover, .user-menu .menu button:hover { background: var(--qts-surface-2); text-decoration: none; }
.user-menu .menu svg { width: 17px; height: 17px; color: var(--qts-muted); }
.user-menu .menu .meta { padding: .5rem .7rem .6rem; border-bottom: 1px solid var(--qts-border); margin-bottom: .3rem; font-size: .78rem; color: var(--qts-muted); }
.content { padding: 1.3rem 1.8rem 2.5rem; max-width: 1680px; width: 100%; }
.content.narrow { max-width: 1180px; }
.foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1.5rem; font-size: .74rem; color: var(--qts-muted); border-top: 1px solid var(--qts-border); background: var(--qts-surface); margin-top: auto; }
.foot .sep { margin: 0 .5rem; color: var(--qts-border-strong); }
.foot .tag { color: var(--qts-navy); font-weight: 500; }

/* ---------- Dashboard ---------- */
.welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.welcome .hello { color: var(--qts-muted); font-size: .84rem; margin-bottom: 0; }
.welcome h1 { font-size: 1.6rem; margin-bottom: .1rem; }
.welcome .meta { color: var(--qts-muted); font-size: .84rem; }
.welcome .meta .sep { margin: 0 .45rem; color: var(--qts-gold); }
.welcome .date { color: var(--qts-muted); font-size: .8rem; text-align: right; line-height: 1.4; }
.hero { position: relative; overflow: visible; border-radius: var(--radius); background: radial-gradient(520px 260px at 78% 40%, var(--qts-blue-glow), transparent 65%), linear-gradient(110deg, #04101F 0%, var(--qts-navy-dark) 45%, var(--qts-navy) 100%); color: #fff; padding: 1.5rem 1.7rem; margin: 1rem 0; border: 1px solid rgba(201,162,39,.35); min-height: 172px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 1rem; }
.hero::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent 55%, rgba(47,123,255,.12)); pointer-events: none; }
.hero .hero-kicker { display: block; font-size: .8rem; color: rgba(255,255,255,.8); margin-bottom: .1rem; }
.hero h2 { color: #fff; font-size: 1.5rem; font-weight: 700; margin-bottom: .4rem; }
.hero p { color: rgba(255,255,255,.78); max-width: 460px; font-size: .84rem; margin-bottom: .95rem; }
.hero .hero-text { position: relative; z-index: 1; }
.hero .hero-art { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; min-height: 120px; }
.hero .emblem { max-height: 196px; max-width: 250px; width: auto; transform: rotate(-9deg); filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); margin: -14px 0; }
.hero .emblem-glow { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(47,123,255,.55), rgba(47,123,255,.08) 60%, transparent 72%); }
.hero .side { border-left: 1px solid rgba(201,162,39,.55); padding-left: 1.1rem; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--qts-gold-light); line-height: 1.9; white-space: nowrap; }
.hero .side .script { display: block; margin-top: .5rem; font-style: italic; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; color: var(--qts-gold-light); }
.list-rows { display: flex; flex-direction: column; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--qts-border); font-size: .84rem; }
.list-row:last-child { border-bottom: 0; }
.list-row .val { font-weight: 600; color: var(--qts-navy); }
.quick-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.quick-link { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--qts-border); border-radius: var(--radius-sm); color: var(--qts-navy); font-weight: 500; font-size: .8rem; background: var(--qts-surface); }
.quick-link:hover { text-decoration: none; border-color: var(--qts-gold); background: var(--qts-surface-2); }
.quick-link .qi { width: 30px; height: 30px; border-radius: 8px; background: var(--qts-info-bg); color: var(--qts-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.quick-link .qi svg { width: 16px; height: 16px; }
.quick-link .qi.gold { background: #FBF3DA; color: var(--qts-gold-dark); }
.quick-link .go { margin-left: auto; color: var(--qts-gold-dark); width: 14px; height: 14px; }
.activity { display: flex; flex-direction: column; }
.activity-item { display: grid; grid-template-columns: 8px 1fr auto; gap: .7rem; align-items: start; padding: .5rem 0; border-bottom: 1px solid var(--qts-border); font-size: .82rem; }
.activity-item:last-child { border-bottom: 0; }
.activity-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--qts-gold); margin-top: .4rem; }
.activity-item .when { color: var(--qts-muted); font-size: .72rem; white-space: nowrap; }
.activity-item .who { display: block; color: var(--qts-muted); font-size: .74rem; }
.activity-item .ctx { color: var(--qts-muted); }

/* ---------- Mobile bottom navigation ---------- */
.bottom-nav { display: none; }

/* ---------- Auth family (sign in, activation, reset, guest errors) ---------- */
.auth-body { min-height: 100vh; margin: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.2rem 1rem 1.6rem; position: relative; overflow-x: hidden;
  background: radial-gradient(900px 520px at 78% 18%, rgba(47,123,255,.42), transparent 62%), radial-gradient(700px 480px at 92% 85%, rgba(201,162,39,.24), transparent 62%), radial-gradient(600px 400px at 8% 90%, rgba(23,71,168,.35), transparent 60%), linear-gradient(120deg, #03091A 0%, var(--qts-navy-dark) 40%, var(--qts-navy) 75%, #0C2B5E 100%); background-color: var(--qts-navy-dark); }
.auth-body.has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.auth-body.has-bg-webp { background-image: url('/assets/img/brand/login-background.webp'); }
.auth-body.has-bg-jpg { background-image: url('/assets/img/brand/login-background.jpg'); }
.auth-body.has-bg-png { background-image: url('/assets/img/brand/login-background.png'); }
.auth-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 58%, rgba(47,123,255,.18) 70%, rgba(201,162,39,.16) 84%, transparent 96%); }
.auth-body::after { content: ''; position: absolute; right: -6%; top: 22%; width: 42%; height: 58%; border-radius: 40% 60% 55% 45%; background: linear-gradient(135deg, rgba(47,123,255,.35), rgba(201,162,39,.28)); filter: blur(70px); pointer-events: none; }
.auth-body.has-bg::before, .auth-body.has-bg::after { display: none; }
.auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 470px; display: flex; flex-direction: column; align-items: center; }
.auth-brand { text-align: center; margin-bottom: 1.3rem; }
.auth-brand .brand-logo { height: 62px; width: auto; margin: 0 auto 1.1rem; }
.auth-brand h1.brand-title { font-size: clamp(1.5rem, 3.6vw, 2.3rem); margin-bottom: .35rem; text-shadow: 0 4px 24px rgba(0,0,0,.35); }
@media (min-width: 641px) { .auth-brand h1.brand-title { white-space: nowrap; } }
.auth-brand .tagline { display: inline-flex; align-items: center; gap: .8rem; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--qts-gold-light); font-weight: 500; }
.auth-brand .tagline::before, .auth-brand .tagline::after { content: ''; width: 40px; height: 1px; background: var(--qts-gold); }
.auth-card { width: 100%; padding: 1.7rem 1.8rem 1.4rem; border-radius: 16px; background: #FFFFFF; border: 1px solid rgba(201,162,39,.55); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.35); color: var(--qts-text); }
.auth-card h1 { color: var(--qts-navy); font-size: 1.15rem; margin-bottom: .2rem; }
.auth-card .muted { color: var(--qts-muted); }
.auth-card .form label { color: var(--qts-navy); font-weight: 600; font-size: .84rem; }
.auth-card .form input { background: #FFFFFF; border-color: #D5DCE8; color: var(--qts-text); height: 46px; }
.auth-card .form input:focus { border-color: var(--qts-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.22); }
.auth-card .form .btn-signin { margin-top: 1.2rem; height: 48px; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(180deg, var(--qts-navy-2), var(--qts-navy) 60%, var(--qts-navy-dark)); color: #fff; border: 1px solid var(--qts-gold); box-shadow: 0 8px 20px rgba(10,30,63,.28), inset 0 1px 0 rgba(255,255,255,.08); }
.auth-card .form .btn-signin svg { color: var(--qts-gold-light); width: 18px; height: 18px; }
.auth-card .form .btn-signin:hover { background: linear-gradient(180deg, #16407E, var(--qts-navy-2) 60%, var(--qts-navy)); box-shadow: 0 8px 22px rgba(10,30,63,.35), 0 0 0 3px rgba(201,162,39,.22); }
.auth-card .form .btn-primary { margin-top: 1.2rem; height: 48px; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; border-color: var(--qts-gold); }
.auth-card a { color: var(--qts-navy); font-weight: 500; text-decoration: underline; text-decoration-color: var(--qts-gold); text-underline-offset: 3px; }
.auth-links { text-align: center; margin: .9rem 0 0; font-size: .86rem; }
.auth-note { text-align: center; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(201,162,39,.5); color: var(--qts-navy); font-size: .84rem; line-height: 1.5; }
.auth-note .qtu { display: block; margin-top: .55rem; font-size: .78rem; color: var(--qts-muted); }
.auth-note .qtu strong { color: var(--qts-navy); }
.auth-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; max-width: 520px; margin-top: 1.6rem; text-align: center; }
.auth-props div { padding: 0 .5rem; border-left: 1px solid rgba(201,162,39,.4); }
.auth-props div:first-child { border-left: 0; }
.auth-props .t { display: block; font-size: .6rem; letter-spacing: .14em; white-space: nowrap; text-transform: uppercase; color: var(--qts-gold-light); font-weight: 600; margin-bottom: .2rem; }
.auth-props .d { font-size: .76rem; color: rgba(255,255,255,.8); line-height: 1.4; }
.auth-props svg { width: 26px; height: 26px; color: var(--qts-gold-light); margin-bottom: .35rem; }
.auth-foot { margin-top: 1.6rem; font-size: .74rem; color: rgba(255,255,255,.6); text-align: center; }
.auth-foot .sep { margin: 0 .5rem; color: rgba(201,162,39,.6); }
.detail { white-space: pre-wrap; font-size: .78rem; background: #f1f3f6; padding: .7rem; border-radius: 6px; overflow: auto; color: var(--qts-text); }


/* ---------- Phase 3B components ---------- */
/* Segmented filter row (Organizations, QTU Access, Action Center) */
.segments { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }
.segments a { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 999px; border: 1px solid var(--qts-border); background: var(--qts-surface); color: var(--qts-muted); font-size: .8rem; font-weight: 500; white-space: nowrap; }
.segments a:hover { text-decoration: none; border-color: var(--qts-gold); color: var(--qts-navy); }
.segments a.is-active { background: var(--qts-navy); border-color: var(--qts-navy); color: #fff; }
.segments a .n { font-size: .68rem; font-weight: 600; background: rgba(15,30,54,.08); color: inherit; padding: .05rem .45rem; border-radius: 999px; }
.segments a.is-active .n { background: rgba(255,255,255,.18); }
/* Toolbar: search + filters on one row, wide */
.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
.toolbar form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; flex: 1 1 auto; }
.toolbar .search-box { position: relative; flex: 1 1 260px; max-width: 460px; }
.toolbar .search-box svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #9AA6BC; }
.toolbar .search-box input { padding-left: 2.3rem; height: 40px; width: 100%; }
.toolbar select { height: 40px; }
/* Three state stack shown inside a table cell or fact list */
.states { display: inline-flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.state { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--qts-muted); white-space: nowrap; }
.state .k { min-width: 84px; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
/* Actions column: primary action + overflow menu */
.row-actions { display: inline-flex; gap: .35rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.menu-btn { position: relative; display: inline-block; }
.menu-btn > summary { list-style: none; cursor: pointer; }
.menu-btn > summary::-webkit-details-marker { display: none; }
.menu-btn .menu { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; min-width: 220px; background: var(--qts-surface); border: 1px solid var(--qts-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop, 0 14px 40px rgba(10,30,63,.18)); padding: .35rem; text-align: left; }
.menu-btn .menu button, .menu-btn .menu a { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .6rem; border: 0; background: none; font: inherit; font-size: .84rem; color: var(--qts-text); border-radius: 6px; cursor: pointer; text-decoration: none; text-align: left; }
.menu-btn .menu button:hover, .menu-btn .menu a:hover { background: var(--qts-surface-2, #F3F5F9); color: var(--qts-navy); }
.menu-btn .menu .danger { color: var(--qts-danger); }
.menu-btn .menu svg { width: 15px; height: 15px; flex: none; }
.menu-btn .menu .sep { height: 1px; background: var(--qts-border); margin: .3rem .2rem; }
/* Confirmation dialogs */
dialog.dlg { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 2rem)); box-shadow: 0 30px 80px rgba(5,15,34,.45); color: var(--qts-text); background: var(--qts-surface); }
dialog.dlg::backdrop { background: rgba(5,15,34,.55); backdrop-filter: blur(2px); }
.dlg-form { display: flex; flex-direction: column; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem .8rem; border-bottom: 1px solid var(--qts-border); }
.dlg-head h3 { margin: 0; font-size: 1.05rem; color: var(--qts-navy); display: flex; align-items: center; gap: .5rem; }
.dlg-head h3 svg { width: 20px; height: 20px; color: var(--qts-gold-dark); }
.dlg-head h3.danger svg { color: var(--qts-danger); }
.dlg-body { padding: 1rem 1.3rem; font-size: .88rem; line-height: 1.55; }
.dlg-body p { margin: 0 0 .7rem; }
.dlg-body .field { margin-top: .5rem; }
.dlg-foot { display: flex; justify-content: flex-end; gap: .55rem; padding: .9rem 1.3rem 1.1rem; border-top: 1px solid var(--qts-border); background: #FAFBFD; border-radius: 0 0 16px 16px; }
.impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin: .5rem 0 .9rem; }
.impact div { background: var(--qts-bg); border: 1px solid var(--qts-border); border-radius: 10px; padding: .55rem .7rem; text-align: center; }
.impact .v { display: block; font-size: 1.25rem; font-weight: 700; color: var(--qts-navy); line-height: 1.1; }
.impact .l { font-size: .68rem; color: var(--qts-muted); text-transform: uppercase; letter-spacing: .06em; }
.callout { border-left: 3px solid var(--qts-gold); background: #FBF7EA; padding: .6rem .8rem; border-radius: 0 8px 8px 0; font-size: .82rem; margin: .4rem 0 .8rem; }
.callout.danger { border-left-color: var(--qts-danger); background: var(--qts-danger-bg); }
.callout.info { border-left-color: var(--qts-blue-bright); background: var(--qts-info-bg); }
label.check { display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: var(--qts-text); cursor: pointer; }
label.check input { width: 17px; height: 17px; accent-color: var(--qts-navy); }
form.is-submitting button[type=submit] { opacity: .6; pointer-events: none; }
/* Wider forms with an optional side panel */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.form-layout > .card { margin-top: 0; }
.side-panel h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qts-gold-dark); margin-bottom: .5rem; }
.side-panel p, .side-panel li { font-size: .82rem; color: var(--qts-muted); }
.side-panel ul { padding-left: 1.1rem; margin: 0 0 .8rem; }
.req { color: var(--qts-danger); margin-left: .15rem; }
/* Record header with meta strip */
.record-head .meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .45rem; font-size: .8rem; color: var(--qts-muted); }
.record-head .meta strong { color: var(--qts-text); font-weight: 500; }
/* Workflow steps on the QTU access card */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .6rem 0 .9rem; }
.step { border: 1px solid var(--qts-border); border-radius: 10px; padding: .5rem .6rem; font-size: .74rem; color: var(--qts-muted); background: var(--qts-bg); }
.step strong { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--qts-muted); }
.step.done { background: var(--qts-success-bg); border-color: var(--qts-success-line); color: var(--qts-success); }
.step.done strong { color: var(--qts-success); }
.step.now { background: #FBF4DD; border-color: var(--qts-gold-light); color: var(--qts-gold-dark); }
.step.now strong { color: var(--qts-gold-dark); }
.step.bad { background: var(--qts-danger-bg); border-color: var(--qts-danger-line); color: var(--qts-danger); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.grid-3 > .card { margin-top: 0; }
.grid-main-side { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.grid-main-side > .card, .grid-main-side .stack > .card:first-child { margin-top: 0; }
.queue-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) max-content max-content; gap: 1rem; align-items: center; padding: .75rem 1.2rem; border-bottom: 1px solid var(--qts-border); font-size: .85rem; }
.queue-item:last-child { border-bottom: 0; }
.queue-item .t { font-weight: 600; color: var(--qts-navy); }
.queue-item .pill { white-space: nowrap; }
.list-row .cell-sub { display: block; font-size: .76rem; color: var(--qts-muted); }
.queue-item .s { display: block; font-size: .76rem; color: var(--qts-muted); font-weight: 400; }
.badge-soft { display: inline-block; font-size: .68rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: #EEF1F6; color: var(--qts-muted); }
.kv { font-size: .8rem; color: var(--qts-muted); }
.kv strong { color: var(--qts-text); font-weight: 500; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .form-layout { grid-template-columns: 1fr; }
  .grid-main-side { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .queue-item .qa { grid-column: 1 / -1; justify-content: flex-start; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; }
  .hero .hero-art { justify-content: flex-start; }
  .topbar-search input { width: 180px; }
}

/* ---------- Phone and small tablet ---------- */
.drawer-toggle { display: none; }
.drawer-backdrop { display: none; }
@media (max-width: 960px) {
  .app, .app.is-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(82vw, 300px); z-index: 60; transform: translateX(-100%); transition: transform .2s; height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .drawer-toggle:checked ~ .sidebar { transform: translateX(0); }
  .drawer-toggle:checked ~ .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(5,15,34,.6); z-index: 50; }
  .app.is-collapsed .sidebar-brand .app-name, .app.is-collapsed .nav-item span, .app.is-collapsed .nav-label, .app.is-collapsed .nav-item .badge { display: inline; }
  .app.is-collapsed .nav-item { justify-content: flex-start; padding: .62rem .8rem; }
  .app.is-collapsed .sidebar-brand .brand-logo { height: 40px; margin: 0; }
  .topbar { padding: 0 .8rem; gap: .5rem; }
  .topbar-title { display: none; }
  .topbar-logo { height: 28px; width: auto; margin-right: auto; }
  .topbar-search { display: none; }
  .who-text, .user-menu .chev { display: none; }
  .desktop-collapse { display: none; }
  .content { padding: 1rem .9rem 5.2rem; }
  .grid-2, .grid-3, .form-grid, .steps { grid-template-columns: 1fr; }
  .queue-item { grid-template-columns: 1fr; }
  .segments { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .toolbar .search-box { max-width: none; }
  .form-grid .span-2 { grid-column: auto; }
  .facts { grid-template-columns: 1fr; gap: .1rem .8rem; } .facts dt { margin-top: .5rem; }
  .foot { flex-direction: column; align-items: flex-start; gap: .25rem; padding-bottom: 4.6rem; }
  .welcome .date { text-align: left; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .tile { padding: .8rem .85rem; min-height: 0; }
  .tile-value { font-size: 1.35rem; }
  .hero { padding: 1.1rem 1rem; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
  .hero h2 { font-size: 1.2rem; }
  .hero .side { display: none; }
  .hero .hero-art { justify-content: flex-end; min-height: 0; }
  .hero .emblem { max-height: 104px; max-width: 120px; margin: 0; }
  .hero p { font-size: .8rem; }
  .hero .emblem-glow { width: 96px; height: 96px; }
  .quick-links { grid-template-columns: 1fr 1fr; }
  .record-head .btn-row { width: 100%; }
  .record-head .btn-row .btn { flex: 1 1 auto; }
  /* Mobile bottom navigation (real destinations only) */
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--qts-surface); border-top: 1px solid var(--qts-border); padding: .35rem 0 max(.35rem, env(safe-area-inset-bottom)); }
  .bottom-nav a, .bottom-nav label { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .66rem; font-weight: 500; color: var(--qts-muted); padding: .3rem 0; cursor: pointer; }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav svg { width: 20px; height: 20px; }
  .bottom-nav .is-active { color: var(--qts-gold-dark); }
  .bottom-nav .is-active svg { color: var(--qts-gold-dark); }
  /* Tables become stacked rows */
  .table-cards table, .table-cards thead, .table-cards tbody, .table-cards tr, .table-cards td { display: block; }
  .table-cards thead { display: none; }
  .table-cards tr { padding: .6rem .9rem; border-bottom: 1px solid var(--qts-border); }
  .table-cards tr:last-child { border-bottom: 0; }
  .table-cards td { padding: .18rem 0; border: 0; display: flex; justify-content: space-between; gap: .8rem; align-items: center; text-align: right; }
  .table-cards td::before { content: attr(data-label); color: var(--qts-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; flex: none; }
  .table-cards td.cell-lead { display: block; text-align: left; padding-bottom: .35rem; }
  .table-cards td.cell-lead::before { display: none; }
  .table-cards td.cell-actions { justify-content: flex-end; }
  .table-cards td.cell-actions::before { display: none; }
}
@media (min-width: 961px) { .mobile-menu, .topbar-logo { display: none; } }
@media (max-width: 640px) {
  .auth-brand .tagline { font-size: .6rem; letter-spacing: .16em; white-space: nowrap; }
  .auth-brand .tagline::before, .auth-brand .tagline::after { width: 22px; }
  .auth-body { padding: 1.4rem .9rem 1.2rem; justify-content: flex-start; }
  .auth-brand .brand-logo { height: 48px; }
  .auth-card { padding: 1.3rem 1.1rem 1.1rem; }
  .auth-props { grid-template-columns: 1fr; gap: .8rem; }
  .auth-props div { border-left: 0; padding: 0; }
}

/* ---- SD-1: SuiteDash ---- */
.meter { height: 8px; border-radius: 999px; background: var(--qts-bg); border: 1px solid var(--qts-border); overflow: hidden; margin-top: .2rem; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--qts-navy), var(--qts-gold)); border-radius: 999px; }
.mb-2 { margin-bottom: 1rem; }
#circle-card .facts dd .cell-sub, #suitedash-panel .facts dd .cell-sub { display: block; font-size: .74rem; color: var(--qts-muted); margin-top: .15rem; }
.btn-ghost.btn-sm[data-copy] { padding: .1rem .45rem; font-size: .7rem; vertical-align: middle; }
.table td[data-label="Details"] { overflow-wrap: anywhere; word-break: break-word; max-width: 380px; }

/* ---------------------------------------------------------------------
   Phase C: relationship card, QTS Apps tiles, season chip, external nav
   --------------------------------------------------------------------- */
.rel-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .9fr); gap: 1.2rem; border-radius: var(--radius); padding: 1.35rem 1.5rem; margin: .25rem 0 1rem;
  color: #fff; background: radial-gradient(560px 240px at 85% 20%, rgba(201,162,39,.28), transparent 60%), radial-gradient(420px 260px at 10% 110%, var(--qts-blue-glow), transparent 65%), linear-gradient(115deg, #050F1F 0%, var(--qts-navy-dark) 50%, var(--qts-navy) 100%);
  border: 1px solid rgba(201,162,39,.4); box-shadow: 0 18px 40px rgba(6,20,45,.28), inset 0 1px 0 rgba(255,255,255,.08); }
.rel-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%); }
/* With no current enrollment to show there is no side panel, so the card would be identity on the left and a
   large empty stretch of navy on the right. Instead of leaving that hole, the information already on the card
   is redistributed: the business and its identity hold the left, and the current state pills move to the right
   and centre against them. Nothing is added to fill the space, and the premium navy and gold treatment is
   untouched. */
.rel-card.rel-solo { grid-template-columns: 1fr; }
.rel-card.rel-solo .rel-main { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; }
.rel-card.rel-solo .rel-ident { min-width: 0; }
.rel-card.rel-solo .rel-pills { flex: 0 1 auto; justify-content: flex-end; margin: 0; }
@media (max-width: 860px) {
  .rel-card.rel-solo .rel-main { flex-direction: column; align-items: flex-start; gap: 0; }
  .rel-card.rel-solo .rel-pills { justify-content: flex-start; margin-top: .9rem; }
}
.rel-kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qts-gold-light); font-weight: 600; }
.rel-kicker svg { width: 14px; height: 14px; }
.rel-name { font-size: 1.5rem; margin: .35rem 0 .1rem; color: #fff; line-height: 1.2; }
.rel-role { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.88); }
.rel-id { font-size: .9rem; color: var(--qts-gold-light); margin-top: .15rem; letter-spacing: .04em; }
.rel-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.rel-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 500; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(4px); }
.rel-pill svg { width: 13px; height: 13px; }
.rel-pill.ok { background: rgba(31,158,96,.22); border-color: rgba(31,158,96,.5); }
.rel-pill.warn { background: rgba(214,143,28,.22); border-color: rgba(214,143,28,.5); }
.rel-pill.gold { background: rgba(201,162,39,.22); border-color: rgba(201,162,39,.6); color: var(--qts-gold-light); }
.rel-pill.navy { background: rgba(42,98,196,.28); border-color: rgba(42,98,196,.6); }
.rel-pill.muted { background: rgba(255,255,255,.08); }
.rel-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .8rem; }
.rel-enroll { border-radius: 12px; padding: .9rem 1rem; background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.25); }
.rel-enroll.is-active { background: linear-gradient(135deg, rgba(201,162,39,.22), rgba(201,162,39,.06)); border: 1px solid rgba(201,162,39,.55); }
.rel-enroll-title { display: flex; align-items: center; gap: .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qts-gold-light); font-weight: 600; }
.rel-enroll-title svg { width: 14px; height: 14px; }
.rel-enroll-id { font-size: 1rem; margin-top: .35rem; }
.rel-enroll-status { font-size: .8rem; color: rgba(255,255,255,.75); margin-top: .15rem; }
.rel-link { align-self: flex-end; display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-weight: 500; font-size: .86rem; text-decoration: none; padding: .45rem .8rem; border-radius: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.rel-link:hover { background: rgba(201,162,39,.35); border-color: var(--qts-gold); text-decoration: none; }
.rel-link svg { width: 14px; height: 14px; }

.apps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.apps-head h2 { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.05rem; margin: 0; }
.apps-head h2 svg { width: 18px; height: 18px; color: var(--qts-gold-dark); }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; }
.app-tile { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.05rem 1rem; border-radius: var(--radius); text-decoration: none; color: var(--qts-text);
  background: linear-gradient(160deg, #fff 0%, #F4F7FC 100%); border: 1px solid var(--qts-border); box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow: hidden; }
.app-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--qts-gold), var(--qts-blue-bright)); }
.app-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6,20,45,.14); border-color: var(--qts-gold); text-decoration: none; }
.app-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--qts-navy), var(--qts-blue)); color: #fff; box-shadow: 0 6px 14px rgba(42,98,196,.28); }
.app-icon svg { width: 19px; height: 19px; }
.app-label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--qts-navy); margin-top: .2rem; }
.app-label svg.ext { width: 13px; height: 13px; color: var(--qts-muted); }
.app-desc { font-size: .8rem; color: var(--qts-muted); line-height: 1.35; }
.app-cta { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--qts-blue); font-weight: 500; margin-top: .3rem; }
.app-cta svg { width: 13px; height: 13px; }

.season-chip { display: inline-flex; align-items: center; margin-left: .6rem; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--qts-gold-dark); background: #FBF3DA; border: 1px solid rgba(201,162,39,.5); }
.nav-item.nav-external svg.ext { width: 12px; height: 12px; margin-left: auto; opacity: .55; }
.pill.small { font-size: .66rem; padding: .1rem .45rem; }
.btn.danger { color: var(--qts-danger); border-color: var(--qts-danger-line); }

@media (max-width: 960px) {
  .rel-card { grid-template-columns: 1fr; padding: 1.1rem 1.15rem; }
  .rel-link { align-self: flex-start; }
}
@media (max-width: 640px) {
  .season-chip { display: none; }
  .apps-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Phase D1: form engine, external pages, evidence, timeline, staff and access
   ===================================================================== */
.section-title { font-size: 1rem; margin: 1.2rem 0 .4rem; color: var(--qts-navy); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inline-checks { flex-direction: row; flex-wrap: wrap; gap: .6rem 1.2rem; }
.callout-gold { background: #FFF9E8; border-color: var(--qts-gold-light); }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.mb-0 { margin-bottom: 0; }
.is-hidden { display: none !important; }
.lock { width: 12px; height: 12px; vertical-align: -1px; }
.pill svg.lock { width: 11px; height: 11px; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.15rem; border-radius: 16px; }
.pills { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }

/* ---------- external secure pages ---------- */
.ext-body { background: var(--qts-bg); margin: 0; font-family: var(--font); color: var(--qts-navy-dark); min-height: 100vh; display: flex; flex-direction: column; }
.ext-top { background: linear-gradient(120deg, var(--qts-navy-dark), var(--qts-navy) 60%, var(--qts-navy-2)); border-bottom: 3px solid var(--qts-gold); }
.ext-top-inner { max-width: 880px; margin: 0 auto; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ext-top .brand-logo { height: 40px; width: auto; }
.ext-secure { display: inline-flex; align-items: center; gap: .35rem; color: var(--qts-gold-light); font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ext-secure svg { width: 14px; height: 14px; }
.ext-main { flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: 1.5rem 1rem 3rem; box-sizing: border-box; }
.ext-card { background: var(--qts-surface); border: 1px solid var(--qts-border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 1.6rem 1.8rem; }
.ext-foot { text-align: center; font-size: .78rem; color: var(--qts-muted); padding: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.ext-foot .sep { margin: 0 .45rem; opacity: .6; }
.ext-help { text-align: center; font-size: .82rem; color: var(--qts-muted); margin-top: 1rem; }
.ext-done { text-align: center; }
.ext-done-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--qts-success-bg); color: var(--qts-success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .8rem; }
.ext-done-icon.is-muted { background: #EEF1F6; color: var(--qts-muted); }
.ext-done-icon svg { width: 30px; height: 30px; }

/* ---------- the form (qf) ---------- */
.qf-head h1 { font-size: 1.5rem; margin: .2rem 0 .5rem; }
.qf-intro { color: var(--qts-muted); }
.qf-instructions { display: flex; gap: .8rem; background: var(--qts-warning-bg); border: 1px solid var(--qts-warning-line); border-radius: var(--radius); padding: .9rem 1rem; margin: .8rem 0; }
.qf-instructions svg { width: 22px; height: 22px; color: var(--qts-warning); flex: none; margin-top: .15rem; }
.qf-instructions p { margin: .3rem 0 0; }
.qf-progress { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.qf-progress li { flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .7rem; color: var(--qts-muted); text-align: center; position: relative; }
.qf-progress li .n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--qts-border-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; background: #fff; }
.qf-progress li.is-current .n { border-color: var(--qts-gold); background: var(--qts-gold); color: var(--qts-navy-dark); }
.qf-progress li.is-current { color: var(--qts-navy); font-weight: 600; }
.qf-progress li.is-done .n { border-color: var(--qts-success); background: var(--qts-success); color: #fff; }
.qf-section { display: none; padding-top: .4rem; }
[data-sectioned="1"] .qf-section.is-current { display: block; }
.qf:not([data-sectioned="1"]) .qf-section { display: block; }
.qf-section.is-skipped { display: none !important; }
.qf-section-head { margin: .4rem 0 .9rem; padding-bottom: .5rem; border-bottom: 2px solid var(--qts-gold-light); }
.qf-section-head h2 { margin: 0; font-size: 1.15rem; }
.qf-step { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qts-gold-dark); font-weight: 600; }
.qf-header { margin: 1rem 0 .4rem; padding: .8rem 1rem; background: var(--qts-info-bg); border-left: 3px solid var(--qts-blue); border-radius: var(--radius-sm); }
.qf-header h3 { margin: 0 0 .2rem; font-size: .95rem; }
.qf-header p { margin: 0; font-size: .86rem; color: var(--qts-navy); }
.qf-field { margin: 0 0 1rem; }
.qf-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; color: var(--qts-navy); }
.qf-help { margin: -.1rem 0 .4rem; font-size: .8rem; color: var(--qts-muted); }
.qf-input { width: 100%; box-sizing: border-box; font: inherit; padding: .62rem .8rem; border: 1px solid var(--qts-border-strong); border-radius: 10px; background: #fff; color: var(--qts-navy-dark); transition: border-color .15s, box-shadow .15s; }
.qf-input:focus { outline: none; border-color: var(--qts-blue); box-shadow: 0 0 0 3px rgba(23, 71, 168, .14); }
.qf-input.is-invalid, .has-error .qf-input { border-color: var(--qts-danger); }
.has-error .field-error { color: var(--qts-danger); font-size: .8rem; margin: .3rem 0 0; }
.qf-reason { display: flex; gap: .4rem; align-items: center; background: var(--qts-warning-bg); border: 1px dashed var(--qts-warning-line); color: var(--qts-warning); border-radius: var(--radius-sm); padding: .4rem .6rem; font-size: .8rem; margin-bottom: .4rem; }
.qf-reason svg { width: 14px; height: 14px; }
.qf-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.qf-choice { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border: 1px solid var(--qts-border-strong); border-radius: 10px; cursor: pointer; font-size: .88rem; background: #fff; }
.qf-choice:has(input:checked) { border-color: var(--qts-blue); background: var(--qts-info-bg); font-weight: 500; }
.qf-choice.qf-single { display: flex; }
.qf-ack { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--qts-border); border-radius: 10px; background: var(--qts-surface-2); font-size: .88rem; cursor: pointer; }
.qf-ack input { margin-top: .2rem; }
.qf-money { display: flex; align-items: center; border: 1px solid var(--qts-border-strong); border-radius: 10px; overflow: hidden; }
.qf-money span { padding: 0 .7rem; color: var(--qts-muted); background: var(--qts-surface-2); align-self: stretch; display: flex; align-items: center; }
.qf-money .qf-input { border: 0; border-radius: 0; }
.qf-address { display: flex; flex-direction: column; gap: .45rem; }
.qf-address-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .45rem; }
.qf-upload-zone { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.2rem 1rem; border: 2px dashed var(--qts-border-strong); border-radius: 12px; background: var(--qts-surface-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.qf-upload-zone:hover, .qf-upload-zone.is-over { border-color: var(--qts-gold); background: #FFF9E8; }
.qf-upload-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qf-upload-icon { width: 28px; height: 28px; color: var(--qts-blue); }
.qf-upload-text { font-size: .9rem; }
.qf-upload-hint, .qf-upload-name { font-size: .76rem; color: var(--qts-muted); }
.qf-upload-name:not(:empty) { color: var(--qts-success); font-weight: 600; }
.qf-upload-kept, .qf-kept { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--qts-success-line); background: var(--qts-success-bg); border-radius: 10px; font-size: .86rem; flex-wrap: wrap; }
.qf-upload-kept svg, .qf-kept svg { width: 16px; height: 16px; color: var(--qts-success); }
.qf-kept-mask { display: inline-flex; align-items: center; gap: .35rem; }
.qf-signature { border: 1px solid var(--qts-border-strong); border-radius: 12px; padding: .9rem; background: #fff; }
.qf-sig-preview { font-family: 'Poppins', cursive; font-style: italic; font-size: 1.6rem; color: var(--qts-navy); border-bottom: 2px solid var(--qts-navy); min-height: 2.4rem; margin: .6rem 0 .2rem; padding: .2rem .4rem; }
.qf-sig-draw summary { font-size: .82rem; color: var(--qts-blue); cursor: pointer; margin: .4rem 0; }
.qf-sig-draw canvas { width: 100%; height: 150px; border: 1px dashed var(--qts-border-strong); border-radius: 8px; background: #fff; touch-action: none; }
.qf-sig-tools { margin-top: .3rem; }
.qf-sig-note { font-size: .76rem; color: var(--qts-muted); margin: .5rem 0 0; }
/* Forms stabilization: acknowledgement language shown before the box; live rule and certification messages. */
.qf-ack-statement { padding: .9rem 1rem; margin: 0 0 .6rem; border: 1px solid var(--qts-border); border-left: 4px solid var(--qts-gold, #C9A227); border-radius: 10px; background: #fff; font-size: .9rem; line-height: 1.55; white-space: normal; }
.qf-rule-error, .qf-cert-error { display: block; color: var(--qts-danger); font-size: .8rem; margin: .3rem 0 0; }
.qf-rule-error[hidden], .qf-cert-error[hidden] { display: none; }
.has-rule-error .qf-input, .qf-input.is-invalid { border-color: var(--qts-danger); }
.qf-terms-box { max-height: 220px; overflow: auto; padding: .9rem 1rem; border: 1px solid var(--qts-border); border-radius: 10px; background: var(--qts-surface-2); font-size: .86rem; line-height: 1.55; }
.qf-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--qts-border); }
.qf-actions [data-save] { margin-right: auto; }
.qf-actions [hidden] { display: none !important; }

/* ---------- evidence ---------- */
.evidence-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: .8rem; }
.evidence-head h1 { font-size: 1.3rem; margin: .2rem 0; }
.evidence-seal { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 10px; font-weight: 600; font-size: .82rem; }
.evidence-seal.is-ok { background: var(--qts-success-bg); color: var(--qts-success); border: 1px solid var(--qts-success-line); }
.evidence-seal.is-bad { background: var(--qts-danger-bg); color: var(--qts-danger); border: 1px solid var(--qts-danger-line); }
.evidence-seal svg { width: 18px; height: 18px; }
.evidence-grid { gap: 1rem 2rem; }
.evidence-sig { font-style: italic; font-size: 1.1rem; color: var(--qts-navy); }
.evidence-sig-img { max-width: 260px; margin-top: .3rem; border-bottom: 1px solid var(--qts-border-strong); }
.evidence-trail { list-style: none; padding: 0; margin: 0; }
.evidence-trail li { display: grid; grid-template-columns: 190px 130px 1fr; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--qts-border); font-size: .84rem; }
.evidence-trail .what { font-weight: 600; }
.evidence-notice { margin-top: 1rem; border-top: 1px solid var(--qts-border); padding-top: .6rem; }

/* ---------- review values, correction picker ---------- */
.editor-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qts-gold-dark); font-weight: 600; padding: .8rem 1.2rem .3rem; background: var(--qts-surface-2); border-top: 1px solid var(--qts-border); }
.value-row { display: grid; grid-template-columns: 220px 1fr; gap: .6rem; padding: .55rem 1.2rem; border-top: 1px solid var(--qts-border); font-size: .88rem; align-items: center; }
.value-row.is-protected { background: #FFFDF6; }
.vr-label { color: var(--qts-muted); font-weight: 500; display: flex; align-items: center; gap: .3rem; }
.masked { letter-spacing: .05em; }
.revealed { background: var(--qts-warning-bg); padding: .15rem .45rem; border-radius: 6px; border: 1px solid var(--qts-warning-line); }
.correction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; margin: .6rem 0; }
.correction-item { display: grid; grid-template-columns: auto 1fr; gap: .2rem .5rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--qts-border); border-radius: 8px; font-size: .84rem; }
.correction-item input[type=text] { grid-column: 2; font-size: .8rem; padding: .3rem .5rem; }
.correction-item:has(input:checked) { border-color: var(--qts-gold); background: #FFF9E8; }
.list-row.stacked { align-items: flex-start; }

/* ---------- form editor ---------- */
.editor-field { border-top: 1px solid var(--qts-border); }
.editor-field summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1.2rem; cursor: pointer; font-size: .86rem; list-style: none; }
.editor-field summary::-webkit-details-marker { display: none; }
.editor-field[open] summary { background: var(--qts-surface-2); }
.editor-field .ef-type { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--qts-muted); min-width: 110px; }
.editor-field .ef-label { font-weight: 600; }
.editor-field .ef-key { font-size: .74rem; color: var(--qts-muted); }
.editor-field .field-editor, .editor-field .facts, .editor-field form.inline { padding: .6rem 1.2rem 1rem; }
.advanced summary { font-size: .82rem; color: var(--qts-blue); cursor: pointer; margin: .4rem 0; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--qts-border-strong); }
.tl-item { position: relative; padding: .2rem 0 1.1rem .9rem; }
.tl-dot { position: absolute; left: -1.65rem; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--qts-border-strong); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--qts-border-strong); }
.tl-item.tone-info .tl-dot { background: var(--qts-info); } .tl-item.tone-gold .tl-dot { background: var(--qts-gold); } .tl-item.tone-ok .tl-dot { background: var(--qts-success); } .tl-item.tone-navy .tl-dot { background: var(--qts-navy); }
.tl-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.tl-body p { margin: .25rem 0 0; font-size: .86rem; }
.tl-meta { margin-top: .2rem; }

/* ---------- staff and access ---------- */
.perm-list { padding: .2rem 1.2rem .6rem; }
.perm-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px dashed var(--qts-border); font-size: .86rem; }
.perm-row.is-restricted .perm-label { text-decoration: line-through; color: var(--qts-muted); }
.perm-row .perm-label { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.perm-group { border: 1px solid var(--qts-border); border-radius: var(--radius); padding: .6rem .9rem .8rem; margin: 0 0 .8rem; }
.perm-group legend { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qts-gold-dark); font-weight: 600; padding: 0 .3rem; }
.perm-check { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem .2rem; font-size: .86rem; cursor: pointer; }
.perm-check.is-privileged { background: #FFF9E8; border-radius: 6px; }
.perm-check .perm-label { display: inline-flex; align-items: center; gap: .3rem; }
.privileged-warning { display: flex; gap: .6rem; align-items: flex-start; background: var(--qts-warning-bg); border: 1px solid var(--qts-warning-line); border-radius: var(--radius-sm); padding: .7rem .9rem; font-size: .84rem; margin: .6rem 0; }
.privileged-warning svg { width: 18px; height: 18px; color: var(--qts-warning); flex: none; }
.privileged-warning[hidden] { display: none; }
.cell-when { white-space: nowrap; }
.cell-json { display: block; overflow-wrap: anywhere; max-width: 32rem; }
@media (max-width: 900px) { .cell-when { white-space: normal; } }
.card-privileged { border-color: var(--qts-gold-light); background: #FFFDF6; }
.setting-row { display: flex; gap: 1rem; align-items: flex-end; padding: .6rem 0; border-top: 1px solid var(--qts-border); }
.setting-row:first-of-type { border-top: 0; }
.setting-main { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.setting-main label { font-weight: 600; font-size: .86rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

/* ---------- notices ---------- */
.notice.is-unread { border-left: 4px solid var(--qts-gold); }
.notice.priority-high.is-unread { border-left-color: var(--qts-danger); }
.notice-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.notice-head h2 { margin: 0; font-size: 1.05rem; }

@media (max-width: 720px) {
  .ext-card { padding: 1.1rem 1rem; border-radius: 12px; }
  .qf-address-row { grid-template-columns: 1fr; }
  .value-row, .evidence-trail li, .perm-row { grid-template-columns: 1fr; gap: .2rem; }
  .correction-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .qf-actions { flex-direction: column-reverse; align-items: stretch; }
  .qf-actions [data-save] { margin-right: 0; }
  .qf-progress li .l { display: none; }
  .qf-progress li { min-width: 34px; }
  .setting-row { flex-direction: column; align-items: stretch; }
  .qf-choice { width: 100%; box-sizing: border-box; }
}
@media print {
  .sidebar, .topbar, .bottom-nav, .foot, .btn, .card-actions { display: none !important; }
  .content, .main { margin: 0; padding: 0; }
}
.vr-value svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: .2rem; }
.vr-value { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ---------- D1 final correction: View As User banner ---------- */
:root { --imp-h: 46px; }
.impersonation-banner { position: sticky; top: 0; z-index: 90; min-height: var(--imp-h); display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem 1rem; background: repeating-linear-gradient(135deg, #0B2149 0 18px, #13305F 18px 36px); color: #fff; border-bottom: 3px solid var(--qts-gold); box-shadow: 0 4px 14px rgba(5,15,34,.35); font-size: .86rem; }
.impersonation-banner .imp-text { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.impersonation-banner svg { width: 18px; height: 18px; color: var(--qts-gold); flex: none; }
.impersonation-banner .imp-label { color: var(--qts-gold); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .74rem; }
.impersonation-banner strong { font-weight: 700; letter-spacing: .02em; }
.impersonation-banner .imp-meta { opacity: .85; }
.impersonation-banner .imp-real { opacity: .7; font-size: .78rem; padding-left: .5rem; border-left: 1px solid rgba(255,255,255,.25); }
.impersonation-banner .imp-exit { flex: none; }
body.is-impersonating .sidebar { top: var(--imp-h); height: calc(100vh - var(--imp-h)); }
body.is-impersonating .topbar { top: var(--imp-h); }
body.is-impersonating .content { outline: 3px solid var(--qts-gold); outline-offset: -3px; }
@media (max-width: 960px) {
  .impersonation-banner { position: sticky; flex-direction: column; align-items: stretch; gap: .35rem; padding: .5rem .8rem; }
  .impersonation-banner .imp-real { border-left: 0; padding-left: 0; }
  .impersonation-banner .imp-exit .btn { width: 100%; justify-content: center; }
  body.is-impersonating .sidebar { top: 0; height: 100vh; }
  body.is-impersonating .topbar { top: var(--imp-h); }
}
.form-inline-search { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.form-inline-search .field.grow { flex: 1 1 320px; margin-bottom: 0; }
.form-inline-search .form-actions { margin: 0; }
/* ---------- D1 final correction: access tools ---------- */
[hidden] { display: none !important; }
.tech-code { display: none; }
body.show-tech .tech-code { display: inline; }
.tech-toggle { display: inline-flex; padding: .6rem 1.2rem; }
.tech-details { margin-top: .25rem; }
.tech-details summary { cursor: pointer; font-size: .74rem; color: var(--qts-muted); }
.tech-details .cell-json { display: block; margin-top: .2rem; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.preview-title { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 2px solid; }
.preview-title.ok { color: var(--qts-success, #1b7f4b); border-color: var(--qts-success, #1b7f4b); }
.preview-title.bad { color: var(--qts-danger, #b42318); border-color: var(--qts-danger, #b42318); }
.preview-group { margin-bottom: .6rem; font-size: .84rem; }
.preview-group strong { display: block; font-size: .76rem; color: var(--qts-gold-dark); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }
.preview-group ul { margin: 0; padding-left: 1.1rem; }
.preview-group li { margin: .1rem 0; }
.preview-group svg.lock, .perm-label svg.lock { width: 13px; height: 13px; vertical-align: -2px; color: var(--qts-gold-dark); }
.check-result { margin-top: 1rem; border-radius: var(--radius-sm); padding: .9rem 1rem; border: 1px solid var(--qts-border); }
.check-result.is-allowed { background: #eef8f1; border-color: #bfe3cb; }
.check-result.is-denied { background: #fdf1f0; border-color: #f2c4bf; }
.check-verdict { display: flex; align-items: center; gap: .4rem; font-weight: 700; letter-spacing: .08em; font-size: .9rem; }
.check-verdict svg { width: 18px; height: 18px; }
.is-allowed .check-verdict { color: #1b7f4b; } .is-denied .check-verdict { color: #b42318; }
.check-reason { margin: .4rem 0 .7rem; font-size: .9rem; }
.impact-panel { margin: .3rem 0 .8rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--qts-surface-2); border: 1px solid var(--qts-border); font-size: .84rem; }
.impact-head { font-weight: 700; margin-bottom: .4rem; }
.impact-head.danger { color: #b42318; }
.impact-head .arrow { color: var(--qts-gold-dark); padding: 0 .3rem; }
.impact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.impact-cols ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.impact-cols summary { cursor: pointer; font-size: .78rem; color: var(--qts-muted); }
.impact-priv { margin-top: .5rem; padding-top: .4rem; border-top: 1px dashed var(--qts-border); }
.field-owner { background: #fff7e0; border: 1px solid #f0d78a; border-radius: var(--radius-sm); padding: .6rem .8rem; }
.copy-row { display: flex; gap: .5rem; margin-top: .5rem; }
.copy-row input { flex: 1; font-family: var(--mono, monospace); font-size: .78rem; }
.card-danger { border-color: #f2c4bf; }
.card-danger .card-head h2 { color: #b42318; }
@media (max-width: 640px) { .preview-grid, .impact-cols { grid-template-columns: 1fr; } }
/* ---------- D1 production defect correction: app audiences ---------- */
.audience-box { border: 1px solid var(--qts-border); border-radius: var(--radius-sm); padding: .8rem 1rem 1rem; margin: .6rem 0 .8rem; }
.audience-box legend { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; padding: 0 .4rem; }
.audience-box legend svg { width: 16px; height: 16px; color: var(--qts-gold-dark); }
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin: .5rem 0 .8rem; font-size: .84rem; }
.audience-grid strong { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qts-gold-dark); margin-bottom: .3rem; }
.audience-grid label.check { display: flex; gap: .4rem; align-items: center; margin: .15rem 0; }
.preview-title.info { color: var(--qts-navy); border-color: var(--qts-navy); margin-top: 1rem; }
.preview-title.warn { color: #9a6b00; border-color: #d9a520; }
.preview-title.bad { margin-top: 1rem; }
.preview-list { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .84rem; }
.hero.hero-compact { grid-template-columns: 1fr; min-height: 0; padding: 1.3rem 1.5rem; }
.hero.hero-compact h1 { color: #fff; font-size: 1.5rem; margin: .1rem 0 .3rem; }
.hero.hero-compact .kicker { color: var(--qts-gold); }
.hero.hero-compact .lead { color: rgba(255,255,255,.82); margin: 0; font-size: .92rem; }

/* ---------------- Forms Foundation Correction ---------------- */
/* Content blocks */
.qf-content { display: flex; gap: .85rem; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--qts-border); background: var(--qts-surface-2); margin: .6rem 0 1rem; }
.qf-content-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--qts-navy); color: #fff; }
.qf-content-icon svg { width: 18px; height: 18px; }
.qf-content-body { min-width: 0; flex: 1; font-size: .9rem; }
.qf-content-body h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--qts-navy); }
.qf-content-body p { margin: 0 0 .5rem; } .qf-content-body p:last-child { margin-bottom: 0; }
.qf-content-body ul, .qf-content-body ol { margin: .2rem 0 .6rem 1.2rem; padding: 0; }
.qf-content-body li { margin: .15rem 0; }
.qf-content-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; align-items: center; }
.qf-content-link { color: var(--qts-blue); font-weight: 600; text-decoration: underline; }
.qf-ext { font-size: .8em; opacity: .8; margin-left: .2rem; }
.qf-content-divider { display: flex; align-items: center; gap: .6rem; padding: 0; border: 0; background: transparent; margin: 1rem 0; color: var(--qts-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.qf-content-divider::before, .qf-content-divider::after { content: ''; flex: 1; border-top: 1px solid var(--qts-border-strong); }
.qf-content-info { background: var(--qts-info-bg); border-color: var(--qts-info-line); } .qf-content-info .qf-content-icon { background: var(--qts-blue); }
.qf-content-important { background: linear-gradient(135deg, #FFF9E6, #FFF3C9); border-color: var(--qts-gold-light); } .qf-content-important .qf-content-icon { background: var(--qts-gold-dark); }
.qf-content-warning { background: var(--qts-warning-bg); border-color: var(--qts-warning-line); } .qf-content-warning .qf-content-icon { background: var(--qts-warning); }
.qf-content-success { background: var(--qts-success-bg); border-color: var(--qts-success-line); } .qf-content-success .qf-content-icon { background: var(--qts-success); }
/* System data card (Your Office Pricing) */
.qf-system-card { border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: .5rem 0 1rem; color: #fff; background: radial-gradient(420px 200px at 85% 20%, rgba(201,162,39,.28), transparent 60%), linear-gradient(115deg, var(--qts-navy-dark), var(--qts-navy) 55%, var(--qts-navy-2)); border: 1px solid rgba(201,162,39,.45); box-shadow: var(--shadow-card); }
.qf-system-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; } .qf-system-head svg { width: 20px; height: 20px; color: var(--qts-gold-light); } .qf-system-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--qts-gold-light); }
.qf-system-lines { margin: 0; display: grid; gap: .35rem; }
.qf-system-line { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; } .qf-system-line:last-child { border-bottom: 0; }
.qf-system-line dt { color: rgba(255,255,255,.78); margin: 0; } .qf-system-line dd { margin: 0; font-weight: 700; text-align: right; }
.qf-system-note { margin: .7rem 0 0; font-size: .78rem; color: rgba(255,255,255,.7); }
.qf-system-divider { height: 1px; margin: .35rem 0; background: linear-gradient(90deg, rgba(201,162,39,.15), var(--qts-gold-light) 30%, var(--qts-gold-light) 70%, rgba(201,162,39,.15)); }
.qf-system-divider + .qf-system-line { border-top: 0; }
.office-pricing { margin-top: 0; }
/* Calculated, locked, prefilled */
.qf-calc-card { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem .8rem; padding: .8rem 1rem; border: 1px solid var(--qts-gold-light); background: #FFFBEE; border-radius: var(--radius-sm); }
.qf-calc-label { font-weight: 600; font-size: .9rem; color: var(--qts-navy); } .qf-calc-value { font-weight: 800; font-size: 1.25rem; color: var(--qts-navy); font-variant-numeric: tabular-nums; } .qf-calc-card .qf-help { width: 100%; margin: 0; }
.qf-locked { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 1px dashed var(--qts-border-strong); background: var(--qts-surface-2); border-radius: var(--radius-sm); font-size: .92rem; } .qf-locked svg { width: 16px; height: 16px; color: var(--qts-muted); } .qf-locked-note { margin-left: auto; font-size: .74rem; color: var(--qts-muted); text-transform: uppercase; letter-spacing: .04em; }
.qf-input[data-prefilled="1"] { background: #FBFDFF; }
/* Repeat groups */
.qf-group { border: 1px solid var(--qts-border); border-radius: var(--radius); padding: .9rem 1rem; background: var(--qts-surface); }
.qf-group-head .qf-label { display: block; margin-bottom: .2rem; }
.qf-group-row { border: 1px solid var(--qts-border); border-radius: var(--radius-sm); padding: .7rem .8rem .3rem; margin: .6rem 0; background: var(--qts-surface-2); }
.qf-group-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; } .qf-group-n { font-size: .78rem; font-weight: 700; color: var(--qts-muted); text-transform: uppercase; letter-spacing: .05em; }
/* Uploads: preview, camera */
.qf-upload-preview { display: flex; align-items: center; gap: .8rem; margin-top: .6rem; padding: .6rem .7rem; border: 1px solid var(--qts-border); border-radius: var(--radius-sm); background: var(--qts-surface-2); }
.qf-upload-preview img { max-height: 90px; max-width: 260px; border-radius: 4px; background: #fff; border: 1px solid var(--qts-border); }
.qf-upload-dims { font-size: .8rem; color: var(--qts-muted); } .qf-upload-dims.is-bad { color: var(--qts-danger); font-weight: 600; }
.qf-url-preview { margin-top: .35rem; font-size: .85rem; color: var(--qts-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .qf-url-preview strong { color: var(--qts-navy); }
/* Initials and typed name */
.qf-initials { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .qf-initials-input { max-width: 140px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.qf-initials-preview { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.6rem; color: var(--qts-navy); min-width: 60px; }
.qf-typed-name .qf-sig-preview:empty { display: none; }
/* Progress and review */
.qf-progressbar { position: relative; height: 10px; border-radius: 999px; background: var(--qts-border); margin: .7rem 0 1.4rem; overflow: visible; }
.qf-progressbar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--qts-gold-dark), var(--qts-gold-light)); transition: width .4s ease; }
.qf-progressbar-label { display: block; font-size: .74rem; color: var(--qts-muted); margin-top: .3rem; }
.qf-review-section { margin-bottom: 1rem; } .qf-review-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; border-bottom: 1px solid var(--qts-border); padding-bottom: .3rem; margin-bottom: .4rem; } .qf-review-head h3 { margin: 0; font-size: .95rem; }
.qf-review-list { margin: 0; } .qf-review-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--qts-border); font-size: .88rem; } .qf-review-row dt { color: var(--qts-muted); margin: 0; } .qf-review-row dd { margin: 0; overflow-wrap: anywhere; } .qf-review-row.is-protected dd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.qf-review-section .qf-section-head { display: flex; justify-content: space-between; align-items: center; }
.alert-warn { background: var(--qts-warning-bg); border-color: var(--qts-warning-line); color: var(--qts-warning); }
/* Office statuses (representative view) */
.office-steps { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; counter-reset: st; }
.office-steps li { position: relative; padding: .55rem .8rem .55rem 2.3rem; border: 1px solid var(--qts-border); border-radius: var(--radius-sm); font-size: .88rem; counter-increment: st; }
.office-steps li::before { content: counter(st); position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--qts-border); color: var(--qts-navy); font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.office-steps li.is-done { color: var(--qts-muted); } .office-steps li.is-done::before { background: var(--qts-success); color: #fff; content: "✓"; }
.office-steps li.is-current { border-color: var(--qts-gold); background: #FFFBEE; font-weight: 600; } .office-steps li.is-current::before { background: var(--qts-gold); color: #fff; }
/* Builder */
.panel { border: 1px solid var(--qts-border); border-radius: var(--radius-sm); padding: .7rem .9rem .5rem; margin: .5rem 0 .8rem; background: var(--qts-surface-2); } .panel legend { font-size: .8rem; font-weight: 700; color: var(--qts-navy); padding: 0 .3rem; }
.btn-editor-row, .calc-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr .9fr .8fr auto; gap: .35rem; align-items: center; margin-bottom: .4rem; }
.calc-row { grid-template-columns: 110px 1.1fr 1.6fr auto; } .calc-op { font-weight: 600; }
.btn-editor-row input, .btn-editor-row select, .calc-row input, .calc-row select { height: 38px; font-size: .82rem; padding: 0 .55rem; }
.cond-rule { border: 1px dashed var(--qts-border-strong); border-radius: var(--radius-sm); padding: .5rem .6rem; margin-bottom: .5rem; background: #fff; }
.cond-rule-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .4rem; } .cond-rule-head select, .cond-rule-head input { height: 38px; font-size: .82rem; width: auto; min-width: 150px; padding: 0 .55rem; }
.cond-row { display: grid; grid-template-columns: 110px 1.4fr 1fr 1.2fr auto; gap: .35rem; align-items: center; margin-bottom: .35rem; } .cond-row select, .cond-row input { height: 38px; font-size: .82rem; padding: 0 .55rem; }
.editor-field.is-child { margin-left: 1.4rem; border-left: 3px solid var(--qts-gold-light); }
.group-children { padding: .3rem 0 .4rem; }
.inline-select, .inline-input { height: 34px; font-size: .82rem; width: auto; display: inline-block; margin-right: .3rem; }
.stack-sm { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.evidence-presented { margin: .4rem 0 .6rem; }
@media (max-width: 720px) {
  .btn-editor-row, .calc-row, .cond-row { grid-template-columns: 1fr 1fr; }
  .qf-review-row { grid-template-columns: 1fr; gap: .1rem; }
  .qf-system-line { flex-direction: column; gap: .1rem; } .qf-system-line dd { text-align: left; }
  .qf-content { flex-direction: column; }
}
.panel-caption { width: 100%; } .check-offset { margin-top: 1.6rem; } .push-right { margin-left: auto; }

/* Fee agreements: closed history rows */
.table tr.is-muted td { color: var(--qts-muted); }

/* Stabilization pass: every icon on the applicant pages has an explicit size, and a cap guards any wrapper
   that has no rule of its own (the SVG also carries intrinsic 24 x 24 attributes from icon()). */
.ext-card svg, .ext-help svg { max-width: 32px; max-height: 32px; }
.qf-upload-zone svg { width: 26px; height: 26px; color: var(--qts-navy); }
.qf-instructions svg { width: 20px; height: 20px; flex: none; color: var(--qts-warning); }
.qf-review-row svg, .qf-review-list svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--qts-muted); }
.qf-section-head svg, .qf-step svg { width: 18px; height: 18px; }
.editor-section .handle svg, .ef-move svg { width: 16px; height: 16px; }

/* Stabilization pass: builder ordering controls */
.editor-section-block { border-top: 1px solid var(--qts-border); }
.editor-section { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.editor-section .handle, details.editor-field .handle { cursor: grab; color: var(--qts-muted); display: inline-flex; margin-right: .3rem; }
.editor-section .push-right { margin-left: auto; }
.ef-move { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .4rem 1rem .2rem; border-bottom: 1px dashed var(--qts-border); }
.ef-move .btn[disabled] { opacity: .4; cursor: default; }
details.editor-field.is-dragging, .editor-section-block.is-dragging { opacity: .45; }
.inline-label { display: inline-flex; gap: .3rem; align-items: center; }

/* Final D1 builder pass */
#add-field-launch { padding: .9rem 1.25rem; }
.add-field-launch { width: 100%; justify-content: center; }
#add-field .card-head { display: flex; justify-content: space-between; align-items: center; }
details.placeholders summary { cursor: pointer; margin-top: .2rem; }
details.advanced summary { cursor: pointer; font-size: .82rem; color: var(--qts-muted); }
.cond-choices { display: inline-flex; flex-wrap: wrap; gap: .3rem .8rem; }
.danger-zone { border-color: var(--qts-danger); }
.danger-zone .card-head h2 svg { color: var(--qts-danger); }

/* ==========================================================================
   Production QA correction: premium presentation for the Support Center and
   the partner surfaces it touches. Quiet luxury, not decoration: navy for
   structure, gold for emphasis and focus only, white space doing the work.
   Nothing here is a default browser hyperlink.
   ========================================================================== */

/* ---------- Links with intent ----------
   Base links keep the navy of the interface and earn a gold underline on hover,
   so a link never reads as generic browser blue. */
a { color: var(--qts-navy); text-decoration: none; }
a:hover { color: var(--qts-navy-2); text-decoration: underline; text-decoration-color: var(--qts-gold); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:focus-visible, .btn:focus-visible, .record-row:focus-visible, .chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 162, 39, .35); border-radius: var(--radius-sm); }
/* An inline informational link inside prose: still text, still deliberate. */
.link, .card-head .link { color: var(--qts-navy); font-weight: 500; border-bottom: 1px solid var(--qts-gold-light); padding-bottom: 1px; }
.link:hover { color: var(--qts-navy-2); border-bottom-color: var(--qts-gold); text-decoration: none; }
.link svg { width: 14px; height: 14px; vertical-align: -2px; }
/* A link to a record: navy, medium, with a quiet chevron. */
.record-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--qts-navy); font-weight: 600; }
.record-link::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid var(--qts-gold-dark); border-bottom: 1.5px solid var(--qts-gold-dark); transform: rotate(-45deg); opacity: .8; transition: transform .15s ease; }
.record-link:hover { text-decoration: none; color: var(--qts-navy-2); }
.record-link:hover::after { transform: rotate(-45deg) translate(1.5px, 1.5px); }
.table a:not(.btn):not(.chip) { color: var(--qts-navy); font-weight: 600; }
.table a:not(.btn):not(.chip):hover { text-decoration: underline; text-decoration-color: var(--qts-gold); text-underline-offset: 3px; }

/* ---------- Record rows: a list that reads as a list of things, not of links ---------- */
.record-list { display: flex; flex-direction: column; }
.record-list + .record-list { margin-top: .4rem; }
.record-row { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: center; padding: .95rem 1.25rem; border-bottom: 1px solid var(--qts-border); background: var(--qts-surface); color: inherit; position: relative; transition: background .15s ease, box-shadow .15s ease; }
.record-row:last-child { border-bottom: 0; }
.record-row:hover { background: linear-gradient(90deg, rgba(201,162,39,.05), rgba(10,30,63,.02) 40%, transparent); text-decoration: none; }
.record-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .15s ease; }
.record-row:hover::before { background: linear-gradient(180deg, var(--qts-gold-light), var(--qts-gold)); }
.record-row .rr-main { min-width: 0; }
.record-row .rr-title { font-weight: 600; color: var(--qts-navy); font-size: .95rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.record-row .rr-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; color: var(--qts-gold-dark); font-weight: 600; letter-spacing: .02em; }
.record-row .rr-meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin-top: .3rem; font-size: .8rem; color: var(--qts-muted); }
.record-row .rr-meta .sep { color: var(--qts-border-strong); }
.record-row .rr-side { display: flex; align-items: center; gap: .7rem; justify-content: flex-end; }
.record-row .rr-when { font-size: .78rem; color: var(--qts-muted); white-space: nowrap; }
.record-row .rr-go { width: 7px; height: 7px; border-right: 1.5px solid var(--qts-border-strong); border-bottom: 1.5px solid var(--qts-border-strong); transform: rotate(-45deg); flex: none; transition: border-color .15s ease, transform .15s ease; }
.record-row:hover .rr-go { border-color: var(--qts-gold); transform: rotate(-45deg) translate(2px, 2px); }

/* ---------- Chips and segmented views ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; border-radius: 999px; border: 1px solid var(--qts-border-strong); background: var(--qts-surface); color: var(--qts-navy); font-size: .81rem; font-weight: 500; line-height: 1.2; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
a.chip:hover { border-color: var(--qts-gold); background: var(--qts-surface-2); text-decoration: none; box-shadow: 0 1px 3px rgba(10,30,63,.06); }
.chip.is-active { background: var(--qts-navy); border-color: var(--qts-navy); color: #fff; box-shadow: inset 0 -2px 0 var(--qts-gold); }
.chip.is-active:hover { background: var(--qts-navy-2); border-color: var(--qts-navy-2); color: #fff; }
.chip .chip-count { font-size: .72rem; font-weight: 600; opacity: .75; }
.chip svg { width: 14px; height: 14px; }

/* ---------- Facts block: the staff context panel ---------- */
.ctx-panel { background: linear-gradient(180deg, #fff, var(--qts-surface-2)); border: 1px solid var(--qts-border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.ctx-panel .ctx-bar { height: 3px; background: linear-gradient(90deg, var(--qts-navy), var(--qts-gold) 55%, var(--qts-gold-light)); }
.ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .1rem 1.4rem; padding: 1.05rem 1.3rem; }
.ctx-item { min-width: 0; padding: .45rem 0; }
.ctx-label { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; margin-bottom: .22rem; }
.ctx-value { font-size: .9rem; color: var(--qts-navy); font-weight: 500; overflow-wrap: anywhere; }
.ctx-value .muted { font-weight: 400; }
.ctx-item.span-2 { grid-column: span 2; }
.kv-row { display: flex; flex-wrap: wrap; gap: .2rem 2rem; }
.kv-row > div { display: flex; flex-direction: column; gap: .15rem; padding: .2rem 0; }
.kv-label { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; }

/* The permanent internal ticket number beside the public reference, QTS staff surfaces only. Quiet on
   purpose: the public reference is what staff quote to a partner, the internal number is for internal
   troubleshooting. Never rendered on a partner facing surface. */
.th-internal, .rr-internal { font-size: .7rem; letter-spacing: .04em; color: var(--qts-muted); font-weight: 500; }
.rr-internal { margin-left: .45rem; }

/* ---------- QTS Support Brain ----------
   An optional assistant panel on the QTS staff ticket page, in the existing card idiom. Deliberately quiet:
   no dashboard, no debug output, no numeric confidence. The partner response and the internal guidance carry
   visibly different treatments, reusing the gold internal language this page already uses for internal notes,
   so a representative never confuses the two at a glance. */
.brain-card { border-color: #D6DEEC; }
.brain-state { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.brain-topic { font-weight: 600; color: var(--qts-navy); font-size: .95rem; }
.brain-line { font-size: .88rem; color: var(--qts-text); margin: 0; }
.brain-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--qts-muted); margin-bottom: .3rem; }
.brain-label svg { width: 12px; height: 12px; }
.brain-label .muted { letter-spacing: .02em; text-transform: none; font-weight: 500; }
.brain-block { margin-top: .95rem; font-size: .88rem; line-height: 1.6; }
.brain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: .95rem; font-size: .88rem; }
.brain-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.brain-checks li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.brain-checks .bc-mark { flex: none; width: 16px; text-align: center; font-weight: 700; }
.brain-checks .bc-supplied .bc-mark { color: #1B7F4B; }
.brain-checks .bc-missing .bc-mark, .brain-checks .bc-unknown .bc-mark { color: var(--qts-gold-dark); }
.brain-checks .bc-label { font-weight: 600; color: var(--qts-text); }
.brain-checks .bc-verdict { color: var(--qts-muted); font-size: .8rem; }
.brain-checks .bc-evidence { color: var(--qts-muted); font-size: .8rem; font-style: italic; }
/* The partner facing draft: a light surface, clearly the thing you might send. */
.brain-response { background: #F4F7FC; border: 1px solid #DCE4F1; border-radius: var(--radius-sm); padding: .85rem .95rem; }
.brain-refused { background: var(--qts-surface-2); border: 1px dashed var(--qts-border-strong); border-radius: var(--radius-sm); padding: .85rem .95rem; }
/* QTS internal: the same gold treatment this page already gives an internal note, so the two are never
   confused for one another. */
.brain-internal { background: #FFF8E3; border: 1px dashed var(--qts-gold); border-radius: var(--radius-sm); padding: .85rem .95rem; color: #4A3B0C; }
.brain-internal .brain-label { color: var(--qts-gold-dark); }
.brain-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .7rem; }
.brain-foot { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--qts-border); font-size: .72rem; color: var(--qts-muted); }
@media (max-width: 640px) {
  .brain-grid { grid-template-columns: 1fr; }
  .brain-actions .btn { width: 100%; }
}

/* ---------- Support Conversation v2 ----------
   QTS answers on the right in royal blue, the partner's own office on the left in a quiet neutral, so the two
   sides read apart at a glance without anyone having to read a name twice. One author label per consecutive
   run, a time under every message, a day separator where the date turns over, and attachments drawn inside
   the message they arrived with.

   The blue is a solid painted surface, not a tint or a gradient that fades toward the page. That is the
   lesson of the batch 3 correction: a declaration that exists is not a colour that shows. */
.conv-card { overflow: hidden; }
.conv { display: flex; flex-direction: column; gap: 1.05rem; padding: 1.3rem 1.4rem 1.5rem; background:
  radial-gradient(760px 320px at 82% -10%, rgba(30,68,144,.05), transparent 70%), var(--qts-surface-2); }

/* The day separator. Quiet by design: it orients, it does not announce. */
.conv-day { display: flex; align-items: center; gap: .85rem; margin: .2rem 0 -.15rem; }
.conv-day::before, .conv-day::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--qts-border), transparent); }
.conv-day span { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .18em; color: var(--qts-muted); padding: .22rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--qts-border); }

/* A group: one side, one author label, one or more bubbles. */
.conv-group { display: flex; align-items: flex-end; gap: .6rem; max-width: 100%; }
.conv-group.from-partner { justify-content: flex-start; }
.conv-group.from-qts, .conv-group.from-internal { justify-content: flex-end; }
.cg-stack { display: flex; flex-direction: column; gap: .25rem; min-width: 0; max-width: min(74%, 620px); }
.conv-group.from-qts .cg-stack, .conv-group.from-internal .cg-stack { align-items: flex-end; }
.cg-author { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--qts-muted); padding: 0 .3rem .1rem; display: inline-flex; align-items: center; gap: .35rem; }
.cg-author svg { width: 12px; height: 12px; }
.cg-author .cg-who { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--qts-muted); opacity: .85; }
.conv-group.from-qts .cg-author { color: var(--qts-navy-2); }

/* The QTS mark beside a QTS run. Drawn once per group and lined up with the last bubble rather than with the
   timestamp beneath it, so it reads as belonging to the message instead of floating under it. */
.qts-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; order: 2;
  margin-bottom: 1.3rem;
  background: #FFFFFF; border: 1px solid #DCE3EF; box-shadow: 0 2px 8px rgba(10,30,63,.14); }
/* The emblem is wider than it is tall, so it is contained inside the disc at its own proportions, with room
   left around it. It is never cropped and never stretched. */
.qts-avatar img { width: 86%; height: 86%; object-fit: contain; display: block; }
/* Fallback only, for an instance without the emblem file installed. */
.qts-avatar .qa-mono { font-size: .58rem; font-weight: 700; letter-spacing: .03em; line-height: 1; color: var(--qts-navy); }
.conv-group.from-qts .cg-stack { order: 1; }

/* One message. */
.msg { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.conv-group.from-qts .msg, .conv-group.from-internal .msg { align-items: flex-end; }
.msg-run { margin-top: .1rem; }
.msg-bubble { position: relative; padding: .72rem .95rem; border-radius: 18px; font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; max-width: 100%; }
.msg-body { margin: 0; }
.msg-time { font-size: .68rem; color: var(--qts-muted); padding: 0 .55rem; display: inline-flex; align-items: center; gap: .5rem; }

/* Partner side: a sophisticated light neutral, deliberately quieter than QTS. */
.conv-group.from-partner .msg-bubble { background: #EDEFF4; color: var(--qts-text); border: 1px solid #E0E4EC; border-bottom-left-radius: 6px; }
.conv-group.from-partner .msg-run .msg-bubble { border-top-left-radius: 6px; }

/* QTS side: a solid royal blue with dimension. A soft inner highlight along the top edge and a gold hairline
   along the bottom give it depth without turning it into a toy. */
.conv-group.from-qts .msg-bubble {
  background: linear-gradient(168deg, #24509E 0%, #1B3F80 52%, #16326B 100%);
  color: #FFFFFF; border: 1px solid #16326B; border-bottom-right-radius: 6px;
  box-shadow: 0 6px 18px rgba(16,42,90,.26), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(201,162,39,.5);
}
.conv-group.from-qts .msg-run .msg-bubble { border-top-right-radius: 6px; }
.conv-group.from-qts .msg-body { color: #FFFFFF; }
/* The restrained gold accent: one slow illuminated pass across the newest QTS bubble. Narrow and unhurried,
   so it reads as polish rather than as an alert. */
.conv-group.from-qts .msg-bubble::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  background: linear-gradient(105deg, rgba(240,214,132,0) 38%, rgba(240,214,132,.20) 48%, rgba(242,223,164,.34) 52%, rgba(240,214,132,.20) 56%, rgba(240,214,132,0) 66%);
  background-size: 260% 100%; background-position: 130% 0;
  animation: qts-bubble-glint 9s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes qts-bubble-glint {
  0%        { background-position: 130% 0; opacity: 0; }
  10%       { opacity: 1; }
  48%       { opacity: 1; }
  62%, 100% { background-position: -30% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .conv-group.from-qts .msg-bubble::after { animation: none; background-position: 50% 0; opacity: .5; }
}

/* Internal notes, staff workspace only. Unmistakable against a partner visible message and never on the
   partner page at all, because the partner query never returns a QTS_INTERNAL row. */
.conv-group.from-internal .msg-bubble { background: #FFF8E3; color: #4A3B0C; border: 1px dashed var(--qts-gold); border-bottom-right-radius: 6px; box-shadow: none; }
.conv-group.from-internal .cg-author { color: var(--qts-gold-dark); }

/* The one way Seen receipt. QTS staff only: the partner controller never passes this data, so it does not
   exist in the partner page source. */
.msg-seen { display: inline-flex; align-items: center; gap: .3rem; color: #1E4490; font-weight: 600; }
.msg-seen .ms-ticks { letter-spacing: -.18em; font-size: .78rem; }
.msg-unseen { color: var(--qts-muted); opacity: .7; }

/* An attachment card, inside the message it belongs to. */
.msg-files { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.msg-body + .msg-files { margin-top: .6rem; }
.msg-file { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 11px; text-decoration: none; min-width: 0;
  border: 1px solid var(--qts-border-strong); background: #fff; color: var(--qts-navy); }
.msg-file:hover { text-decoration: none; border-color: var(--qts-gold); }
.msg-file .mf-icon { flex: none; width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--qts-surface-2); }
.msg-file .mf-icon svg { width: 15px; height: 15px; color: var(--qts-navy-2); }
.msg-file .mf-text { display: flex; flex-direction: column; min-width: 0; }
.msg-file .mf-name { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file .mf-meta { font-size: .68rem; color: var(--qts-muted); letter-spacing: .04em; }
.conv-group.from-qts .msg-file { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.conv-group.from-qts .msg-file:hover { border-color: var(--qts-gold-light); background: rgba(255,255,255,.18); }
.conv-group.from-qts .msg-file .mf-icon { background: rgba(255,255,255,.16); }
.conv-group.from-qts .msg-file .mf-icon svg { color: #E9CF7A; }
.conv-group.from-qts .msg-file .mf-meta { color: rgba(255,255,255,.72); }
/* Support inline images: pictures drawn inside the message bubble, at most about 320 x 280, aspect ratio kept */
.msg-images { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.msg-body + .msg-images { margin-top: .6rem; }
.msg-images + .msg-files { margin-top: .5rem; }
.msg-image { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.msg-image .mi-open { display: block; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--qts-border); background: var(--qts-surface-2); cursor: zoom-in; width: fit-content; }
.msg-image .mi-open:focus-visible { outline: 2px solid var(--qts-gold); outline-offset: 2px; }
.msg-image img { display: block; max-width: 320px; max-height: 280px; width: auto; height: auto; object-fit: contain; }
.msg-images.is-multi .msg-image img { max-width: 200px; max-height: 200px; }
.msg-image .mi-bar { font-size: .72rem; }
.msg-image .mi-fallback { display: none; }
.msg-image.is-broken .mi-open { display: none; }
.msg-image.is-broken .mi-fallback { display: inline; }
.msg-image .mi-download { display: inline-flex; align-items: center; gap: .25rem; color: inherit; opacity: .8; text-decoration: none; }
.msg-image .mi-download:hover { opacity: 1; text-decoration: underline; }
.msg-image .mi-download svg { width: 12px; height: 12px; }
.conv-group.from-qts .msg-image .mi-open { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }
.conv-group.from-qts .msg-image .mi-download { color: #fff; }
.conv-group.is-draft .msg-bubble { opacity: .9; outline: 2px dashed rgba(201,162,39,.7); outline-offset: 3px; }
.conv-group.is-draft .draft-tag { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; background: var(--qts-gold); color: #1a1405; vertical-align: middle; }
.conv-group.is-draft .draft-meta { font-style: italic; }
.conv-group.is-draft .mi-open { cursor: default; }
dialog.support-lightbox { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); display: none; flex-direction: column; overflow: hidden; }
dialog.support-lightbox[open] { display: flex; }
.support-lightbox .slb-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; border-bottom: 1px solid var(--qts-border); }
.support-lightbox .slb-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.support-lightbox .slb-actions { display: flex; gap: .4rem; flex: none; }
.support-lightbox .slb-stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: .8rem; background: var(--qts-surface-2); }
.support-lightbox .slb-img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) {
  .msg-image img { max-width: 240px; max-height: 240px; }
  .msg-images.is-multi .msg-image img { max-width: 140px; max-height: 160px; }
}

/* The composer, on both sides of the desk, built to belong to the conversation above it. */
.composer { border-color: #D6DEEC; box-shadow: 0 10px 28px rgba(10,30,63,.07); }
.composer textarea { border-radius: 14px; padding: .8rem .95rem; line-height: 1.6; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.composer textarea:focus { border-color: #2A5AB0; box-shadow: 0 0 0 3px rgba(42,90,176,.16); outline: none; }
.composer .composer-bar { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--qts-border); }
.btn-send { background: linear-gradient(168deg, #24509E, #16326B); border-color: #16326B; color: #fff; box-shadow: 0 4px 14px rgba(16,42,90,.28); }
.btn-send:hover { background: linear-gradient(168deg, #2A5AB0, #1B3F80); border-color: #1B3F80; box-shadow: 0 6px 18px rgba(16,42,90,.34); }
.btn-send svg { color: #E9CF7A; }

@media (max-width: 640px) {
  .conv { padding: 1rem .85rem 1.15rem; gap: .9rem; }
  .cg-stack { max-width: calc(100% - 42px); }
  .conv-group.from-partner .cg-stack { max-width: 100%; }
  .qts-avatar { width: 32px; height: 32px; margin-bottom: 1.15rem; }
  .msg-bubble { font-size: .88rem; padding: .65rem .85rem; }
  .composer .composer-bar { justify-content: stretch; }
  .composer .composer-bar .btn { width: 100%; }
}

/* ---------- Conversation thread (pre v2, retained for anything still using it) ---------- */
.thread { list-style: none; margin: 0; padding: 0; }
.thread-item { padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--qts-border); position: relative; }
.thread-item:last-child { border-bottom: 0; }
.thread-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--qts-border); }
.thread-item.thread-staff::before { background: linear-gradient(180deg, var(--qts-navy), var(--qts-navy-2)); }
.thread-item.thread-internal { background: #FFFCF2; }
.thread-item.thread-internal::before { background: linear-gradient(180deg, var(--qts-gold), var(--qts-gold-dark)); }

/* Batch 3 correction. The partner facing history: a plain timeline, not a table of internal intervals. */
.net-history { list-style: none; margin: 0; padding: .3rem 1.4rem 1.2rem; }
.net-history li { position: relative; display: flex; align-items: baseline; gap: .75rem; padding: .7rem 0 .7rem 1.6rem; border-bottom: 1px solid var(--qts-border); }
.net-history li:last-child { border-bottom: 0; }
.net-history .nh-dot { position: absolute; left: 0; top: 1.05rem; width: 9px; height: 9px; border-radius: 50%; background: var(--qts-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.16); }
.net-history li::after { content: ''; position: absolute; left: 4px; top: 1.6rem; bottom: -.7rem; width: 1px; background: var(--qts-border); }
.net-history li:last-child::after { display: none; }
.net-history .nh-label { font-size: .92rem; color: var(--qts-navy); font-weight: 500; }
.net-history .nh-when { margin-left: auto; font-size: .82rem; color: var(--qts-muted); white-space: nowrap; }

/* ---------- Cleanup batch 3: My Network ----------
   The network requirement notice. Informational and deliberate, in QTS navy and gold. It is not a warning:
   nothing is wrong, this is how the network is kept correct. */
.net-notice { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.2rem 1.35rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--qts-navy) 0%, var(--qts-navy-2) 100%); color: #EAF0FA; box-shadow: var(--shadow-card); border: 1px solid var(--qts-navy); }
.net-notice .nn-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex: none; background: rgba(201,162,39,.16); color: var(--qts-gold-light); border: 1px solid rgba(201,162,39,.45); }
.net-notice .nn-mark svg { width: 21px; height: 21px; }
.net-notice .nn-heading { margin: 0 0 .45rem; font-size: .84rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--qts-gold-light); }
.net-notice .nn-primary { font-size: .92rem; line-height: 1.55; margin: 0 0 .5rem; color: #EAF0FA; }
.net-notice .nn-secondary { font-size: .84rem; line-height: 1.5; color: #B8C6DF; }
.net-notice .nn-action { flex: none; align-self: center; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid rgba(201,162,39,.5); color: var(--qts-gold-light); font-size: .84rem; font-weight: 600; text-decoration: none; }
.net-notice .nn-action:hover { background: rgba(201,162,39,.14); border-color: var(--qts-gold); color: #F2DFA4; }
.net-notice .nn-action svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .net-notice { flex-wrap: wrap; }
  .net-notice .nn-action { align-self: flex-start; width: 100%; justify-content: center; margin-top: .3rem; }
}

/* A quiet classification tag under an office name, in place of a column of its own. */
.tag-soft { display: inline-block; padding: .1rem .45rem; border-radius: 4px; background: var(--qts-surface-2); border: 1px solid var(--qts-border); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; }

/* The quiet line a Direct ERO sees instead of a question with one answer. */
.guided-step.single-subject { padding-bottom: .2rem; }
.subject-line { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px; background: var(--qts-surface-2); border: 1px solid var(--qts-border); font-size: .85rem; color: var(--qts-muted); }
.subject-line strong { color: var(--qts-navy); font-weight: 600; }
.subject-line svg { width: 15px; height: 15px; color: var(--qts-gold-dark); }

/* ---------- Cleanup batch 3: the states that need a panel of their own ----------
   Waiting on the partner and Resolved are the two states where a line of small print is not enough. Each gets
   a panel above the thing the partner does next, in the same status colour language as the badge. */
.state-panel { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--qts-border); background: var(--qts-surface); box-shadow: var(--shadow-card); }
.state-panel .sp-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.state-panel .sp-mark svg { width: 21px; height: 21px; }
.state-panel .sp-heading { margin: 0 0 .35rem; font-size: .92rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.state-panel .sp-message { font-size: .92rem; color: var(--qts-text); line-height: 1.55; }

.state-action { border-color: var(--st-wait); border-left: 5px solid var(--st-wait); background: linear-gradient(135deg, #FFFCEA, var(--qts-surface) 70%); }
.state-action .sp-mark { background: var(--st-wait); color: var(--st-wait-ink); }
.state-action .sp-heading { color: #7A5E00; }

.state-resolved { border-color: var(--st-done); border-left: 5px solid var(--st-done); background: linear-gradient(135deg, #E9F9F1, var(--qts-surface) 70%); }
.state-resolved .sp-mark { background: var(--st-done); color: var(--st-done-ink); }
.state-resolved .sp-heading { color: #0A7144; }
.state-resolved .sp-note { margin-top: .8rem; padding: .8rem .95rem; border-radius: var(--radius-sm); background: var(--qts-surface); border: 1px solid var(--qts-border); }
.state-resolved .sp-note-label { display: block; font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; margin-bottom: .35rem; }
.state-resolved .sp-note p { font-size: .9rem; color: var(--qts-text); }
.state-resolved .sp-note-when { display: block; margin-top: .45rem; font-size: .76rem; color: var(--qts-muted); }

/* The reply box is the answer to ACTION NEEDED, so it is marked as the thing to do. */
.card-action { border-color: var(--st-wait); box-shadow: 0 0 0 3px rgba(232,178,0,.12), var(--shadow-card); }
.reopen-card { border-color: var(--qts-gold); }

/* Request for: the office or business reads first, its classification sits quietly underneath. */
.ctx-item .ctx-kind { display: block; margin-top: .2rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; }

@media (max-width: 640px) {
  .state-panel { padding: 1rem; gap: .75rem; }
  .state-panel .sp-mark { width: 34px; height: 34px; }
}

/* ---------- Cleanup batch 2: the official QTS response ----------
   A partner message stays neutral. A partner visible QTS reply carries the QTS rail: deep royal blue with a
   metallic gold seam and a single slow glint travelling down it, so an official answer is recognisable before
   a word is read. The movement is slow and narrow on purpose; it reads as polish, not as an alert.
   An internal note is not this treatment, and never gets the partner facing signature. */
/* Batch 3 correction. This was a gradient that faded to transparent by 60% of the row, at a strongest stop of
   7.5% alpha. Measured, that painted about rgb(243,244,247) at its darkest and pure white across most of the
   row: a fade, not a tint, and barely blue. It is now a flat royal blue tint across the whole row, light
   enough to stay tasteful and clearly blue against the white a partner message keeps. */
.thread-item.thread-qts { background: #EAF1FC; padding-left: 1.55rem; }
.thread-item.thread-qts .thread-body { color: var(--qts-text); font-weight: 500; }
.thread-item.thread-qts::before {
  width: 5px;
  background: linear-gradient(180deg, #16326B 0%, #1E4490 45%, #16326B 100%);
  box-shadow: inset -1px 0 0 rgba(201,162,39,.55);
}
.thread-item.thread-qts::after {
  content: ''; position: absolute; left: 0; top: 0; width: 5px; height: 34%;
  background: linear-gradient(180deg, rgba(240,214,132,0) 0%, rgba(240,214,132,.35) 35%, #F2DFA4 50%, rgba(240,214,132,.35) 65%, rgba(240,214,132,0) 100%);
  opacity: .9; pointer-events: none;
  animation: qts-rail-glint 7s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes qts-rail-glint {
  0%       { transform: translateY(-40%); opacity: 0; }
  12%      { opacity: .95; }
  55%      { opacity: .95; }
  70%, 100% { transform: translateY(295%); opacity: 0; }
}
/* Reduced motion: the same premium royal blue and gold rail, held still. */
@media (prefers-reduced-motion: reduce) {
  .thread-item.thread-qts::after { animation: none; top: 34%; opacity: .75; }
}
.thread-item.thread-qts .thread-meta strong { color: var(--qts-navy); }
.pill.pill-qts::before { display: none; }
.pill.pill-qts { color: #0F2A57; background: linear-gradient(135deg, #EEF3FC, #FBF4DF); border-color: #C8D4EA; font-weight: 600; }
.pill.pill-qts svg { width: 12px; height: 12px; color: var(--qts-gold-dark); }

/* The signature the interface draws on every partner visible QTS reply. Never stored in the message. */
.qts-sign { display: flex; align-items: center; gap: .6rem; margin-top: .85rem; }
.qts-sign .qts-sign-rule { height: 2px; width: 34px; flex: none; border-radius: 2px; background: linear-gradient(90deg, var(--qts-gold-dark), var(--qts-gold-light)); }
.qts-sign .qts-sign-name { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--qts-navy); }

/* ---------- Cleanup batch 2: the QTS Support Desk ---------- */
.desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.desk .field { margin: 0; }
.desk .field label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; }
.desk-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--qts-border); }
.desk-bar .desk-note { font-size: .78rem; color: var(--qts-muted); margin-left: auto; }
.desk-current { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .82rem; color: var(--qts-muted); margin-bottom: .9rem; }
.desk-current strong { color: var(--qts-navy); font-weight: 600; }
@media (max-width: 860px) { .desk { grid-template-columns: 1fr; } .desk-bar .desk-note { margin-left: 0; width: 100%; } }
.thread-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .45rem; }
.thread-meta strong { color: var(--qts-navy); font-size: .88rem; }
.thread-body { font-size: .9rem; color: var(--qts-text); line-height: 1.65; overflow-wrap: anywhere; }
.thread-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.file-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--qts-border-strong); background: var(--qts-surface-2); font-size: .8rem; color: var(--qts-navy); font-weight: 500; }
.file-chip:hover { border-color: var(--qts-gold); background: #fff; text-decoration: none; }
.file-chip svg { width: 14px; height: 14px; color: var(--qts-muted); }

/* ---------- Guided form: reveal the next control, never a wall of fields ---------- */
.guided .field { margin-top: 0; }
.guided-step { padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--qts-border); }
.guided-step:last-of-type { border-bottom: 0; }
.guided-step[hidden] { display: none; }
.guided-step .step-label { display: flex; align-items: baseline; gap: .6rem; font-size: .82rem; font-weight: 600; color: var(--qts-navy); margin-bottom: .55rem; }
.guided-step .step-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--qts-navy); color: var(--qts-gold-light); font-size: .68rem; font-weight: 600; flex: none; }
.guided-step .hint { display: block; font-size: .78rem; color: var(--qts-muted); margin-top: .35rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .55rem; }
.choice { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem .9rem; border: 1px solid var(--qts-border-strong); border-radius: var(--radius-sm); background: var(--qts-surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.choice:hover { border-color: var(--qts-gold); background: var(--qts-surface-2); }
.choice input { width: auto; height: auto; margin: .15rem 0 0; accent-color: var(--qts-navy); flex: none; }
.choice .choice-text { font-size: .88rem; font-weight: 500; color: var(--qts-navy); }
.choice.is-chosen { border-color: var(--qts-navy); box-shadow: 0 0 0 2px rgba(10,30,63,.06), inset 0 -2px 0 var(--qts-gold); background: #fff; }
.upload-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.upload-row input[type=file] { font-size: .8rem; padding: .5rem .6rem; height: auto; background: var(--qts-surface-2); border-style: dashed; }
.inline-form { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.inline-form select, .inline-form input { width: auto; min-width: 150px; height: 36px; font-size: .84rem; }

/* ---------- Panels, notices, empty states ---------- */
.notice { border: 1px solid var(--qts-border); border-left: 3px solid var(--qts-navy); background: var(--qts-surface-2); border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .86rem; }
.notice svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: .3rem; }
.notice-warn { border-left-color: var(--qts-gold); background: var(--qts-warning-bg); border-color: var(--qts-warning-line); color: #6E4E00; }
.notice-info { border-left-color: var(--qts-blue); background: var(--qts-info-bg); border-color: var(--qts-info-line); }
.panel-feature { border: 1px solid var(--qts-border); border-radius: var(--radius); background: linear-gradient(180deg, var(--qts-navy), var(--qts-navy-2)); color: #fff; padding: 1.4rem 1.5rem; box-shadow: var(--shadow-card); }
.panel-feature h2, .panel-feature h3 { color: #fff; }
.panel-feature p { color: rgba(255,255,255,.82); }
.panel-feature .btn-gold { margin-top: .4rem; }
.panel-feature .panel-note { font-size: .8rem; color: rgba(255,255,255,.62); }
.card-actions-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--qts-border); }
.hint { display: block; font-size: .78rem; color: var(--qts-muted); margin-top: .3rem; }
.qf-preview-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qf-preview-fieldset .qf-nav, .qf-preview-fieldset button[type=submit] { display: none; }

/* ---------- Support specifics ---------- */
.support-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
.support-hero .card, .support-hero .panel-feature { margin: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .55rem; }
.cat-tile { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .95rem; border: 1px solid var(--qts-border); border-radius: var(--radius-sm); background: var(--qts-surface); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.cat-tile:hover { border-color: var(--qts-gold); box-shadow: 0 2px 10px rgba(10,30,63,.07); text-decoration: none; transform: translateY(-1px); }
.cat-tile .cat-name { font-weight: 600; color: var(--qts-navy); font-size: .88rem; }
.cat-tile .cat-note { font-size: .76rem; color: var(--qts-muted); line-height: 1.45; }
.cat-tile.is-redirect { border-style: dashed; background: var(--qts-surface-2); }
.ticket-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .8rem; color: var(--qts-muted); }
.subject-line { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--qts-navy); background: var(--qts-surface-2); border: 1px solid var(--qts-border); border-radius: 999px; padding: .15rem .6rem; }
.subject-line svg { width: 12px; height: 12px; color: var(--qts-gold-dark); }
.type-rows { display: flex; flex-direction: column; gap: .3rem; }
.type-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .4rem .2rem; border-bottom: 1px dashed var(--qts-border); }
.type-row:last-child { border-bottom: 0; }
.type-row input[type=text] { flex: 1 1 180px; height: 34px; font-size: .84rem; }
.type-row input[type=number] { width: 78px; height: 34px; font-size: .84rem; }
.cat-block { border: 1px solid var(--qts-border); border-radius: var(--radius); background: var(--qts-surface); padding: 1rem 1.15rem; }
.cat-block + .cat-block { margin-top: .7rem; }
.cat-block > summary { cursor: pointer; font-weight: 600; color: var(--qts-navy); display: flex; align-items: center; gap: .5rem; }
.cat-block > summary::-webkit-details-marker { display: none; }
.cat-block > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--qts-muted); border-bottom: 1.5px solid var(--qts-muted); transform: rotate(45deg); margin-left: auto; }
.cat-block[open] > summary::after { transform: rotate(-135deg); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .support-hero { grid-template-columns: 1fr; }
  .ctx-item.span-2 { grid-column: auto; }
}
@media (max-width: 640px) {
  .record-row { grid-template-columns: 1fr; }
  .record-row .rr-side { justify-content: flex-start; margin-top: .35rem; }
  .record-row .rr-go { display: none; }
  .ctx-grid { grid-template-columns: 1fr; padding: .9rem 1rem; }
  .choice-grid, .cat-grid, .upload-row { grid-template-columns: 1fr; }
  .guided-step { padding: .9rem 1rem; }
  .thread-item { padding: .9rem 1rem; }
  .inline-form { width: 100%; }
  .inline-form select, .inline-form input { flex: 1 1 auto; min-width: 0; }
  .chip { font-size: .78rem; padding: .38rem .7rem; }
}
/* Filters row: a growing search field and an aligned action, no dangling margins. */
.filters .field.grow { flex: 2 1 260px; }
.filters .form-actions { margin: 0; }
.filters .field label { margin-top: 0; }
.filters .choice { padding: .5rem .7rem; }
/* Native choice controls, sized so they are comfortable to hit and consistent with the rest of the system. */
.choice input[type=radio], .choice input[type=checkbox], .inline-label input[type=checkbox], .type-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--qts-navy); flex: none; }
.inline-label { gap: .4rem; font-size: .84rem; color: var(--qts-navy); }

/* ==========================================================================
   Cleanup batch 1
   ========================================================================== */

/* ---------- One Support status language ----------
   Cleanup batch 2: vivid, not timid. Each state has a solid colour used for the large badge at the top of a
   ticket, and a lighter pair for the small pill that scans well in a list. Every Support surface reads these
   same six, so a status never means one colour on one page and another elsewhere.
   --st-*-ink is the text colour that meets contrast on the solid badge. */
:root {
  --st-new: #D11A22;      --st-new-bg: #FDEAEB;      --st-new-line: #F5BFC2;      --st-new-ink: #FFFFFF;
  --st-open: #D99400;     --st-open-bg: #FFF5DF;     --st-open-line: #F2D89A;     --st-open-ink: #2A1D00;
  --st-prog: #E2650B;     --st-prog-bg: #FFF0E3;     --st-prog-line: #F6CDA6;     --st-prog-ink: #FFFFFF;
  --st-wait: #E8B200;     --st-wait-bg: #FFFAE0;     --st-wait-line: #F0E09B;     --st-wait-ink: #2A2200;
  --st-done: #0E9F5E;     --st-done-bg: #E5F7EE;     --st-done-line: #B6E7CE;     --st-done-ink: #FFFFFF;
  --st-closed: #27364F;   --st-closed-bg: #EDF0F6;   --st-closed-line: #D3DBE8;   --st-closed-ink: #FFFFFF;
}
.pill.st-new      { color: #96161C;  background: var(--st-new-bg);    border-color: var(--st-new-line); }
.pill.st-open     { color: #8A5E00;  background: var(--st-open-bg);   border-color: var(--st-open-line); }
.pill.st-progress { color: #93400A;  background: var(--st-prog-bg);   border-color: var(--st-prog-line); }
.pill.st-waiting  { color: #7A5E00;  background: var(--st-wait-bg);   border-color: var(--st-wait-line); }
.pill.st-resolved { color: #0A7144;  background: var(--st-done-bg);   border-color: var(--st-done-line); }
.pill.st-closed   { color: var(--st-closed); background: var(--st-closed-bg); border-color: var(--st-closed-line); }

/* The prominent badge: the primary way a status is read on a ticket. Solid, large, unmissable. */
.status-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px; font-size: .86rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; box-shadow: 0 2px 8px rgba(10,30,63,.18); }
.status-badge .sb-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; opacity: .85; }
.status-badge-sm { padding: .34rem .7rem; font-size: .74rem; gap: .4rem; box-shadow: none; }
.status-badge-sm .sb-dot { width: 7px; height: 7px; }
.status-badge.st-new      { background: var(--st-new);    color: var(--st-new-ink); }
.status-badge.st-open     { background: var(--st-open);   color: var(--st-open-ink); }
.status-badge.st-progress { background: var(--st-prog);   color: var(--st-prog-ink); }
.status-badge.st-waiting  { background: var(--st-wait);   color: var(--st-wait-ink); }
.status-badge.st-resolved { background: var(--st-done);   color: var(--st-done-ink); }
.status-badge.st-closed   { background: var(--st-closed); color: var(--st-closed-ink); }
.status-badge.st-new .sb-dot { animation: st-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .status-badge.st-new .sb-dot { animation: none; } }
.pill.st-new::before { animation: st-pulse 2.4s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pill.st-new::before { animation: none; } }

/* The accent: a left edge on a row, a top edge on a panel. Never a filled block. */
.accent-new      { --accent: var(--st-new); }
.accent-open     { --accent: var(--st-open); }
.accent-progress { --accent: var(--st-prog); }
.accent-waiting  { --accent: var(--st-wait); }
.accent-resolved { --accent: var(--st-done); }
.accent-closed   { --accent: var(--st-closed); }
.record-row.has-status::before { background: var(--accent, transparent); opacity: .55; }
.record-row.has-status:hover::before { opacity: 1; background: var(--accent, var(--qts-gold)); }
.record-row.accent-new { background: linear-gradient(90deg, rgba(179,40,46,.045), transparent 42%); }
.status-panel { border-top: 4px solid var(--accent, var(--qts-navy)); }
.status-strip { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem 1.3rem; border-bottom: 1px solid var(--qts-border); background: var(--qts-surface-2); }
.status-strip .strip-note { font-size: .82rem; color: var(--qts-muted); }
.ctx-panel.status-panel .ctx-bar { display: none; }

/* ---------- Ticket header ---------- */
.ticket-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--qts-border); }
.ticket-head .th-lead { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .15rem; }
.ticket-head .th-ref { display: inline-flex; align-items: center; gap: .45rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; font-weight: 600; color: var(--qts-gold-dark); letter-spacing: .02em; }
.ticket-head .th-ref svg { width: 15px; height: 15px; }
.ticket-head h1, .ticket-head h2 { margin: .25rem 0 .3rem; font-size: 1.25rem; }
.ticket-head .th-sub { font-size: .82rem; color: var(--qts-muted); }
.section-label { display: flex; align-items: center; gap: .45rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; margin-bottom: .6rem; }
.section-label svg { width: 14px; height: 14px; color: var(--qts-gold-dark); }

/* ---------- File upload component ---------- */
.uploader { border: 1px dashed var(--qts-border-strong); border-radius: var(--radius-sm); background: var(--qts-surface-2); padding: .75rem .85rem; }
.uploader input[type=file] { position: absolute; width: 0; height: 0; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; }
.uploader .up-add { display: inline-flex; align-items: center; gap: .4rem; }
.uploader .up-note { display: block; font-size: .76rem; color: var(--qts-muted); margin-top: .45rem; }
.uploader .up-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.uploader .up-list:empty { display: none; }
.up-file { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .55rem .35rem .7rem; border-radius: 999px; border: 1px solid var(--qts-border-strong); background: #fff; font-size: .79rem; color: var(--qts-navy); max-width: 100%; }
.up-file .up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem; }
.up-file .up-drop { border: 0; background: transparent; color: var(--qts-muted); cursor: pointer; line-height: 1; padding: .1rem .2rem; border-radius: 50%; }
.up-file .up-drop:hover { color: var(--qts-danger); background: var(--qts-danger-bg); }
.up-file svg { width: 13px; height: 13px; color: var(--qts-muted); }

/* ---------- Support configuration ---------- */
.cfg-summary { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.cfg-stat { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .9rem; border: 1px solid var(--qts-border); border-radius: var(--radius); background: var(--qts-surface); font-size: .86rem; color: var(--qts-navy); }
.cfg-stat strong { font-size: 1.05rem; font-weight: 600; color: var(--qts-navy); }
.cfg-stat .cfg-sub { font-size: .76rem; color: var(--qts-muted); }
.cfg-stat-note { flex: 1 1 16rem; justify-content: center; }
.warn-text { display: inline-flex; align-items: center; gap: .35rem; color: var(--qts-warning-dark, #8a6300); font-weight: 500; }
.warn-text svg { width: 15px; height: 15px; }

.cfg-list { display: flex; flex-direction: column; }
.cfg-cat { border-bottom: 1px solid var(--qts-border); background: var(--qts-surface); }
.cfg-cat:last-child { border-bottom: 0; }
.cfg-cat.is-off { background: var(--qts-surface-2); }
.cfg-cat.is-dragging { opacity: .45; }
.cfg-cat.drop-target { box-shadow: inset 0 2px 0 var(--qts-gold); }

.cfg-row { display: flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem; }
.cfg-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; text-align: left; background: transparent; border: 0; padding: .1rem 0; cursor: pointer; font: inherit; }
.cfg-title { font-weight: 600; font-size: .95rem; color: var(--qts-navy); }
.cfg-meta { font-size: .78rem; color: var(--qts-muted); }
.cfg-name:hover .cfg-title { color: var(--qts-gold-dark); }
.cfg-name:focus-visible { outline: 2px solid var(--qts-gold); outline-offset: 3px; border-radius: 4px; }
.cfg-switch-form { display: inline-flex; margin: 0; }

.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--qts-muted); cursor: grab; flex: none; background: transparent; border: 0; }
.drag-handle:hover { color: var(--qts-navy); background: var(--qts-surface-2); }
.drag-handle:focus-visible { outline: 2px solid var(--qts-gold); outline-offset: 2px; }
.drag-handle::before { content: '\2261'; font-size: 1rem; line-height: 1; }
.drag-inline { width: 16px; height: 16px; vertical-align: -2px; cursor: default; }

.cfg-body { padding: .1rem 1.1rem 1.1rem 3rem; border-top: 1px dashed var(--qts-border); }
.cfg-body[hidden] { display: none; }
.cfg-desc { font-size: .86rem; color: var(--qts-text); margin: .7rem 0 .5rem; }
.cfg-facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: .6rem 0 .8rem; font-size: .84rem; }
.cfg-facts dt { color: var(--qts-muted); }
.cfg-facts dd { margin: 0; color: var(--qts-navy); }

.cfg-types { display: flex; flex-direction: column; margin: .4rem 0 .7rem; border: 1px solid var(--qts-border); border-radius: var(--radius); overflow: hidden; }
.cfg-type { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-bottom: 1px solid var(--qts-border); background: var(--qts-surface); }
.cfg-type:last-child { border-bottom: 0; }
.cfg-type.is-off { background: var(--qts-surface-2); }
.cfg-type.is-dragging { opacity: .45; }
.cfg-type.drop-target { box-shadow: inset 0 2px 0 var(--qts-gold); }
.cfg-type-name { flex: 1 1 auto; min-width: 0; font-size: .87rem; color: var(--qts-navy); }
.cfg-type-name[hidden] { display: none; }
.cfg-type-edit { flex: 1 1 auto; display: flex; gap: .4rem; align-items: center; padding: 0; border: 0; }
.cfg-type-edit input[type="text"] { flex: 1 1 auto; min-width: 0; }

.cfg-edit { padding: .6rem 0; }
.cfg-edit[hidden] { display: none; }
.pill-state { font-size: .68rem; }

/* A switch that is a real submit button, so turning a category off works with scripting disabled. */
.switch { display: inline-flex; align-items: center; width: 38px; height: 22px; padding: 3px; border-radius: 999px; border: 0; background: var(--qts-border-strong); cursor: pointer; transition: background .15s ease; flex: none; }
.switch .switch-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10,30,63,.25); transition: transform .15s ease; }
.switch.is-on { background: var(--qts-success); }
.switch.is-on .switch-dot { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--qts-gold); outline-offset: 2px; }

/* ---------- Action Center support item ---------- */
.queue-item.support-item { border-left: 3px solid var(--accent, transparent); }
.queue-item .qi-ticket { display: inline-flex; align-items: center; gap: .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; font-weight: 600; color: var(--qts-gold-dark); }
.queue-item .qi-ticket svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .ticket-head { padding: .95rem 1rem; }
  /* On a narrow screen the name takes the first line and the state controls line up on the second, so a
     long category name never leaves the pill and the switch in a different place on every row. */
  .cfg-row { flex-wrap: wrap; row-gap: .5rem; padding: .7rem .8rem; }
  .cfg-row .cfg-name { flex: 1 1 calc(100% - 2.2rem); }
  .cfg-row .pill { margin-left: 2.2rem; }
  .cfg-row .cfg-switch-form { margin-left: auto; }
  .cfg-body { padding-left: 1rem; }
  .cfg-facts { grid-template-columns: 1fr; gap: .1rem; }
  .cfg-facts dd { margin-bottom: .45rem; }
  .cfg-type { flex-wrap: wrap; row-gap: .45rem; }
  .cfg-type .cfg-type-name { flex: 1 1 calc(100% - 2.2rem); }
  .cfg-type .pill { margin-left: 2.2rem; }
  .cfg-type .cfg-switch-form { margin-left: auto; }
  .cfg-stat-note { flex-basis: 100%; }
  .up-file .up-name { max-width: 9rem; }
  /* SUPPORT-EXPERIENCE-CLEANUP: the question and document requirement rows stack on a phone instead of squeezing */
  .q-list .q-item .q-main { flex: 1 1 calc(100% - 2.2rem); }
  .q-list .q-item .pill { margin-left: 2.2rem; }
  #documents-card .card-head { flex-wrap: wrap; }
  #documents-card .card-head > .btn { flex: 1 1 100%; justify-content: center; }
}
/* The whole Support row is clickable: a cover link under the real controls, so keyboard users still reach
   the buttons and a mouse can click anywhere on the row. */
.queue-item.support-item { position: relative; }
.queue-item .row-cover { position: absolute; inset: 0; z-index: 0; }
.queue-item.support-item > div { position: relative; z-index: 1; pointer-events: none; }
/* The row's own text lets the click through to the cover, so anywhere on the row opens the ticket, while the
   real links and buttons keep their own click and their own place in the keyboard order. */
.queue-item.support-item a:not(.row-cover), .queue-item.support-item button, .queue-item.support-item .row-actions { pointer-events: auto; }
.queue-item.support-item .row-actions, .queue-item.support-item a:not(.row-cover), .queue-item.support-item button { position: relative; z-index: 2; }
.queue-item.support-item:hover { background: var(--qts-surface-2); }

/* ------------------------------------------------------------------ Support intake questions and details
   REQUEST DETAILS is quiet reference, never a card competing with the Support Desk, and it reads the same on
   the partner ticket and the QTS staff ticket because it is the same evidence. */
.rq-card { border-left: 3px solid var(--qts-line); }
.rq-list { margin: 0; display: grid; gap: .6rem; }
.rq-item { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .25rem 1rem; align-items: baseline; }
.rq-label { margin: 0; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--qts-muted); font-weight: 600; }
.rq-value { margin: 0; color: var(--qts-ink); }
.rq-files { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--qts-line); }
.rq-files .msg-files { margin-top: .4rem; }
@media (max-width: 720px) { .rq-item { grid-template-columns: 1fr; gap: .1rem; } }

/* The conversation before anybody has said anything. No invented opening message sits here. */
.conv-empty { text-align: center; padding: 1.8rem 1rem; }
.conv-empty p { margin: 0; }
.conv-empty p:first-child { font-weight: 600; color: var(--qts-ink); }

/* Multi select answers on the intake form. */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .35rem .9rem; }

/* ------------------------------------------------------------------ Manage Request Type */
.q-list .q-item { align-items: center; }
.q-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.q-edit { margin: 0 0 .9rem 0; }
.q-danger { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--qts-line); }
.opt-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .3rem 0; }
.opt-row.is-off { opacity: .55; }
.opt-edit { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.opt-edit input[type=text] { min-width: 12rem; }
.cfg-danger { border-color: var(--qts-danger, #b3261e); }

/* ------------------------------------------------------------------ Support Brain: form steps and coverage */
.k-step { display: block; margin: 1.2rem 0 .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--qts-gold, #b08a2e); }
.k-step:first-of-type { margin-top: .4rem; }
.k-advanced { margin-top: 1.2rem; border-top: 1px dashed var(--qts-line); padding-top: .8rem; }
.k-advanced > summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--qts-muted); }
.k-advanced[open] > summary { margin-bottom: .7rem; }

.cov-cat { padding: .7rem 0; border-bottom: 1px solid var(--qts-line); }
.cov-cat:last-child { border-bottom: 0; }
.cov-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .45rem; }
.cov-name { font-weight: 600; }
.cov-count { font-size: .76rem; color: var(--qts-muted); }
.cov-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .3rem .9rem; }
.cov-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .18rem 0; }
.cov-row.is-off { opacity: .5; }
.cov-type { font-size: .84rem; }

/* ------------------------------------------------------------------ Outside processing
   RED is not decoration here. It is the difference between the thing a representative may send to a partner
   and the thing they must never send, and it has to read at a glance to somebody working quickly. */
:root { --qts-danger: #b3261e; --qts-danger-bg: #fdf4f3; --qts-danger-line: #e7bab6; }

.brain-outside { border: 2px solid var(--qts-danger); background: var(--qts-danger-bg); border-radius: 10px; padding: .9rem 1rem; }
.bo-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bo-title { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--qts-danger); display: inline-flex; align-items: center; gap: .35rem; }
.bo-title svg { width: 1em; height: 1em; }
.bo-warn { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--qts-danger); padding: .12rem .5rem; border-radius: 4px; }
.bo-incomplete { margin: 0 0 .6rem; font-size: .84rem; color: var(--qts-danger); display: flex; align-items: flex-start; gap: .35rem; }
.bo-incomplete svg { width: 1em; height: 1em; flex: none; margin-top: .2em; }
.bo-script { margin: 0 0 .7rem; padding: .7rem .8rem; background: #fff; border: 1px solid var(--qts-danger-line); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.brain-refused-why { color: var(--qts-danger); }

/* The same treatment in the editor, so what QTS writes looks like what QTS will see. */
.k-outside { border: 2px solid var(--qts-danger); background: var(--qts-danger-bg); border-radius: 10px; padding: .9rem 1rem; margin: .6rem 0 1rem; }
.ko-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ko-title { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--qts-danger); display: inline-flex; align-items: center; gap: .35rem; }
.ko-title svg { width: 1em; height: 1em; }
.ko-warn { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--qts-danger); padding: .12rem .5rem; border-radius: 4px; }

/* ------------------------------------------------------------------ Insert placeholder
   Nobody types a token. They pick the thing by its own name. */
.ph-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ph-picker { position: absolute; z-index: 60; width: 19rem; max-height: 22rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--qts-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 26, 48, .18); }
.ph-head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; border-bottom: 1px solid var(--qts-line);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qts-muted); }
.ph-body { padding: .4rem 0 .6rem; }
.ph-group { padding: .35rem 0; }
.ph-group-label { display: block; padding: .3rem .8rem .15rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qts-muted); }
.ph-item { display: block; width: 100%; text-align: left; padding: .35rem .8rem; border: 0; background: none; cursor: pointer; font-size: .86rem; color: var(--qts-ink); }
.ph-item:hover, .ph-item:focus { background: var(--qts-tint, #eef2fa); }

/* ------------------------------------------------------------------ Partner saved responses (0020) */
/* The editor: one card per named response, saved on its own. A list, not three giant textareas. */
.k-sub { display: block; margin: 0 0 .35rem; font-size: .84rem; font-weight: 600; color: var(--qts-navy); }
.k-responses { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--qts-border); }
.resp-list { display: flex; flex-direction: column; gap: .5rem; }
.resp-card { border: 1px solid var(--qts-border); border-radius: var(--radius-sm); background: #fff; padding: .55rem .75rem; }
.resp-card.is-off { background: var(--qts-surface-2); }
.resp-card.is-off .resp-name { opacity: .6; }
.resp-card.is-dragging { opacity: .5; }
.resp-card.drop-target { outline: 2px dashed var(--qts-gold); outline-offset: 2px; }
.resp-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.resp-name { font-weight: 600; flex: 1 1 auto; }
.resp-actions { margin-left: auto; }
.resp-edit { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--qts-border); }
.resp-delete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.resp-add { margin-top: .75rem; padding: .75rem; border: 1px dashed var(--qts-border-strong); border-radius: var(--radius-sm); }
.mt-1 { margin-top: .6rem; }

/* The Brain card: a list the representative chooses from. Nothing in it is styled as a recommendation. */
.brain-responses { background: #F4F7FC; border: 1px solid #DCE4F1; border-radius: var(--radius-sm); padding: .85rem .95rem; }
.br-lead { margin: .2rem 0 .6rem; }
.br-list { display: flex; flex-direction: column; gap: .4rem; }
.br-item { border: 1px solid #DCE4F1; border-radius: var(--radius-sm); background: #fff; }
.br-item.is-unavailable { background: var(--qts-surface-2); }
.br-summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .75rem; cursor: pointer; list-style: none; }
.br-summary::-webkit-details-marker { display: none; }
.br-summary::before { content: '\25B8'; color: var(--qts-muted); font-size: .8rem; }
.br-item[open] > .br-summary::before { content: '\25BE'; }
.br-name { font-weight: 600; }
.br-item.is-unavailable .br-name { opacity: .65; }
.br-text, .br-why { padding: 0 .75rem .6rem 1.75rem; }
.br-item .brain-actions { padding: 0 .75rem .7rem 1.75rem; margin-top: 0; }

/* ------------------------------------------------------------------ Support attachment cards: View and Download */
.msg-file .mf-text { flex: 1 1 auto; }
.msg-file .mf-actions { display: flex; gap: .35rem; flex: none; margin-left: auto; }
.msg-file .mf-action { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .3rem .55rem; border-radius: 8px; border: 1px solid var(--qts-border); color: var(--qts-navy); text-decoration: none; background: #fff; }
.msg-file .mf-action:hover { border-color: var(--qts-gold); text-decoration: none; }
.msg-file .mf-action svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ QTU team link card */
.qtu-team-link .tl-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0 .5rem; }
.qtu-team-link .tl-url { flex: 1 1 320px; min-width: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: .8rem; padding: .55rem .7rem; border: 1px solid var(--qts-border); border-radius: 10px; background: var(--qts-surface-2); color: var(--qts-navy); }

/* ------------------------------------------------------------------ White label team access pages (a bureau's, never QTS's) */
.wl-body { background: #F4F5F7; margin: 0; font-family: var(--font); color: #1F2937; min-height: 100vh; display: flex; flex-direction: column; }
.wl-top { background: #fff; border-bottom: 1px solid #E2E5EA; }
.wl-top-inner { max-width: 880px; margin: 0 auto; padding: 28px 1rem 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
/* Team Education Access logo hotfix: a fixed box, the image scaled to fit inside it, aspect ratio kept, never cropped or stretched */
.wl-logo-box { display: flex; align-items: center; justify-content: center; max-width: 220px; max-height: 110px; width: auto; height: auto; margin: 0 auto; overflow: hidden; }
.wl-logo { display: block; max-width: 220px; max-height: 110px; width: auto; height: auto; object-fit: contain; margin: 0 auto; }
@media (max-width: 640px) { .wl-top-inner { padding: 24px 1rem 18px; gap: 10px; } .wl-logo-box, .wl-logo { max-width: 170px; max-height: 85px; } }
.wl-brand { font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: #1F2937; }
.wl-secure { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.wl-secure svg { width: 14px; height: 14px; }
.wl-main { flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: 1.5rem 1rem 3rem; box-sizing: border-box; }
.wl-foot { text-align: center; font-size: .78rem; color: #6B7280; padding: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.wl-foot-tag { opacity: .8; }
.wl-card { background: #fff; border: 1px solid #E2E5EA; border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, .06); padding: 1.6rem 1.8rem; }
.wl-card .kicker { color: #6B7280; }
.wl-card h1, .wl-card h2 { color: #1F2937; }
.wl-card .qf-section-head { border-bottom-color: #E2E5EA; }
.wl-card .qf-step { color: #6B7280; }
.wl-card .btn-primary { background: #1F2937; border-color: #1F2937; color: #fff; }
.wl-card .btn-primary:hover { background: #111827; border-color: #111827; }
.wl-card .qf-ack { background: #F9FAFB; }
.wl-office { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1px solid #E2E5EA; border-radius: 12px; background: #F9FAFB; margin: 0 0 1rem; }
.wl-office .wl-office-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; font-weight: 600; }
.wl-office .wl-office-name { font-weight: 700; font-size: 1.05rem; }
.roster { display: flex; flex-direction: column; gap: .8rem; }
.roster-card { border: 1px solid #E2E5EA; border-radius: 12px; padding: .9rem 1rem .5rem; background: #fff; }
.roster-card.has-error { border-color: var(--qts-danger, #b3261e); }
.roster-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.roster-head .roster-n { font-weight: 700; font-size: .92rem; }
.roster-remove { background: none; border: 0; color: #6B7280; font-size: .8rem; cursor: pointer; padding: .2rem .4rem; }
.roster-remove:hover { color: var(--qts-danger, #b3261e); }
.roster-add { margin-top: .9rem; }
.wl-done { text-align: center; }
.wl-done .kicker { display: block; margin-bottom: 1rem; }
.wl-done-icon { width: 64px; height: 64px; border-radius: 50%; background: #ECFDF5; color: #047857; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.wl-done-icon.is-muted { background: #F3F4F6; color: #6B7280; }
.wl-done-icon svg { width: 30px; height: 30px; }

/* Partner Hub Circles: group headings inside the table */
.table-group th { background: #F3F5F9; color: var(--qts-gold-dark); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .45rem .75rem; }

/* Top bar notification bell (staff and partners) */
.topbar-bell { position: relative; }
.topbar-bell.has-unread svg { color: var(--qts-gold-dark); }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--qts-gold); color: var(--qts-navy-dark); font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; }

/* Sitewide UX pass: Back control, copy controls, consequences, undo, processing, attachments */
.back-link { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .8rem; font-size: .86rem; font-weight: 600; color: var(--qts-navy); text-decoration: none; padding: .25rem .55rem .25rem .3rem; border-radius: 8px; }
.back-link svg { width: 16px; height: 16px; }
.back-link:hover, .back-link:focus-visible { background: var(--qts-surface-2); text-decoration: underline; }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; margin-left: .35rem; padding: .15rem .3rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--qts-muted); cursor: pointer; vertical-align: middle; line-height: 1; }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn:hover, .copy-btn:focus-visible { border-color: var(--qts-border-strong); color: var(--qts-navy); background: #fff; }
.copy-btn .copy-done { font-size: .72rem; font-weight: 600; }
.copy-btn.is-copied { color: var(--qts-success); }
.copy-btn.is-failed { color: var(--qts-danger); }
.consequences { display: grid; gap: .55rem; margin: .8rem 0 .2rem; }
.consequences .cq { border-radius: 10px; padding: .55rem .75rem; font-size: .84rem; border: 1px solid var(--qts-border); background: var(--qts-surface-2); }
.consequences .cq ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.consequences .cq-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qts-navy); }
.consequences .cq-wont { background: var(--qts-success-bg); border-color: var(--qts-success-line); }
.consequences .cq-reverse { background: #fff; }
.flash .undo-form { display: inline-flex; align-items: center; gap: .4rem; margin-left: .6rem; }
form.is-submitting button.is-busy { opacity: .75; cursor: progress; }
.uploader.is-over { border-color: var(--qts-gold); background: #FFF9E8; }
.uploader .up-zone { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem .8rem; margin-bottom: .55rem; border: 2px dashed var(--qts-border-strong); border-radius: 10px; background: #fff; color: var(--qts-navy); font-size: .86rem; font-weight: 500; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.uploader .up-zone svg { width: 20px; height: 20px; color: var(--qts-blue, var(--qts-navy)); flex: none; }
.uploader .up-zone:hover, .uploader .up-zone:focus-visible, .uploader.is-over .up-zone { border-color: var(--qts-gold); background: #FFF9E8; outline: none; }
.uploader .up-zone.is-full { opacity: .6; cursor: not-allowed; }
.uploader .up-error { display: block; margin-top: .45rem; font-size: .8rem; color: var(--qts-danger); font-weight: 600; }
.up-file .up-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; border: 1px solid var(--qts-border); }
.up-file .up-replace { border: 0; background: transparent; color: var(--qts-navy); font-size: .74rem; text-decoration: underline; cursor: pointer; padding: 0 .15rem; }
.search-hit { text-decoration: none; color: inherit; }
.search-hit:hover { background: var(--qts-surface-2); }
@media (max-width: 640px) {
  .uploader .up-zone { padding: 1.1rem .6rem; }
  .flash .undo-form { display: flex; margin: .5rem 0 0; }
}

/* ---------- Notification Center ---------- */
.nc-tabs a svg { width: 14px; height: 14px; }
.nc-filter-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.nc-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--qts-navy); white-space: nowrap; }
.nc-list { padding: 0; overflow: hidden; }
.nc-row { --nc: var(--qts-navy); display: grid; grid-template-columns: 10px 34px minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .85rem 1rem; border-bottom: 1px solid var(--qts-border); border-left: 4px solid transparent; background: var(--qts-surface); }
.nc-row:last-child { border-bottom: 0; }
.nc-row.is-unread { background: #FBFCFF; border-left-color: var(--qts-gold); }
.nc-row.is-unread.is-high { border-left-color: var(--qts-danger); }
.nc-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .75rem; background: transparent; }
.nc-row.is-unread .nc-dot { background: var(--qts-gold); box-shadow: 0 0 0 3px #FBF4DD; }
.nc-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #EEF3FC; color: var(--nc); }
.nc-icon svg { width: 17px; height: 17px; }
.nc-cat-support { --nc: var(--qts-blue); }
.nc-cat-onboarding { --nc: var(--qts-success); }
.nc-cat-forms { --nc: var(--qts-gold-dark); }
.nc-cat-system { --nc: var(--qts-navy); }
.nc-row.nc-cat-support .nc-icon { background: var(--qts-info-bg); }
.nc-row.nc-cat-onboarding .nc-icon { background: var(--qts-success-bg); }
.nc-row.nc-cat-forms .nc-icon { background: #FBF4DD; }
.nc-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; font-size: .72rem; }
.nc-cat { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nc); }
.nc-org { color: var(--qts-muted); display: inline-flex; align-items: center; gap: .25rem; }
.nc-org svg { width: 12px; height: 12px; }
.nc-title { font-size: .93rem; font-weight: 500; color: var(--qts-text); margin-top: .1rem; overflow-wrap: anywhere; }
.nc-row.is-unread .nc-title { font-weight: 700; }
.nc-title a { color: inherit; }
.nc-body { font-size: .83rem; color: var(--qts-muted); margin-top: .15rem; overflow-wrap: anywhere; }
.nc-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.nc-time { font-size: .75rem; color: var(--qts-muted); white-space: nowrap; }
.nc-actions { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.nc-actions svg { width: 13px; height: 13px; }
.pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1rem 0; }
@media (max-width: 720px) {
  .nc-row { grid-template-columns: 8px 30px minmax(0, 1fr); padding: .75rem .8rem; gap: .55rem; }
  .nc-icon { width: 30px; height: 30px; }
  .nc-side { grid-column: 3; align-items: flex-start; }
  .nc-actions { justify-content: flex-start; }
}

/* Support: a ticket QTS opened on behalf of a partner */
.on-behalf-banner { display: flex; gap: .5rem; align-items: flex-start; margin-top: .55rem; padding: .5rem .75rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, #EEF3FC, #FBF4DF); border: 1px solid #C8D4EA; color: var(--qts-navy-2); font-size: .82rem; }
.on-behalf-banner svg { width: 16px; height: 16px; color: var(--qts-gold-dark); flex: none; margin-top: .1rem; }
.on-behalf-note { border-left: 3px solid var(--qts-gold); background: #FFFBEF; padding: .6rem .8rem; border-radius: var(--radius-sm); }
.on-behalf-note label svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--qts-gold-dark); }

/* ---------- Internal Tickets and Staff Chat (QTS staff only) ---------- */
.badge[hidden] { display: none; }
.internal-kicker { display: inline-flex; align-items: center; gap: .3rem; }
.internal-kicker svg { width: 12px; height: 12px; }
.pill.pill-internal { color: #fff; background: #3B2A6B; border-color: #3B2A6B; font-weight: 700; letter-spacing: .04em; }
.pill.pill-internal::before { display: none; }
.pill.pill-internal svg { width: 11px; height: 11px; color: var(--qts-gold-light); vertical-align: -1px; }
.internal-banner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .9rem; margin-bottom: 1rem; border-radius: var(--radius-sm); color: #fff;
  background: repeating-linear-gradient(135deg, #2E1F57 0 16px, #3B2A6B 16px 32px); border-bottom: 3px solid var(--qts-gold); font-size: .85rem; }
.internal-banner svg { width: 16px; height: 16px; color: var(--qts-gold-light); flex: none; }
.internal-banner strong { letter-spacing: .08em; color: var(--qts-gold-light); }
.review-banner { background: repeating-linear-gradient(135deg, #5A1B1F 0 16px, #6E2228 16px 32px); }
.internal-surface { border-left: 3px solid #3B2A6B; }
.internal-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.it-history { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .84rem; }
.it-history li { padding: .35rem 0; border-bottom: 1px dashed var(--qts-border); }
.it-history li:last-child { border-bottom: 0; }
.nc-cat-internal { --nc: #3B2A6B; }
.nc-row.nc-cat-internal .nc-icon { background: #EEE9F8; }
.review-form { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.review-form input { min-width: 14rem; }
.msg-link { text-decoration: underline; overflow-wrap: anywhere; }

.chat-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
.chat-side { position: sticky; top: calc(var(--topbar-h) + 1rem); max-height: calc(100vh - var(--topbar-h) - 2rem); display: flex; flex-direction: column; overflow: hidden; }
.chat-search { padding: .7rem; border-bottom: 1px solid var(--qts-border); }
.chat-search input { width: 100%; }
.chat-new { padding: .5rem .7rem; border-bottom: 1px solid var(--qts-border); font-size: .85rem; }
.chat-new summary { cursor: pointer; font-weight: 600; color: var(--qts-navy); display: flex; align-items: center; gap: .35rem; }
.chat-new summary svg { width: 14px; height: 14px; }
.chat-new form { margin-top: .6rem; }
.chat-new select, .chat-new input[type=text], .chat-manage input[type=text] { width: 100%; }
.chat-pick { max-height: 160px; overflow: auto; display: grid; gap: .2rem; font-size: .83rem; padding: .3rem; border: 1px solid var(--qts-border); border-radius: var(--radius-sm); background: var(--qts-surface-2); }
.chat-list { overflow-y: auto; flex: 1; }
.chat-empty-list { padding: .8rem; margin: 0; }
.chat-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .65rem .8rem; color: var(--qts-text); border-bottom: 1px solid var(--qts-border); border-left: 3px solid transparent; }
.chat-item:hover { text-decoration: none; background: var(--qts-surface-2); }
.chat-item.is-active { background: #EEF3FC; border-left-color: var(--qts-gold); }
.chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--qts-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.chat-avatar svg { width: 17px; height: 17px; color: var(--qts-gold-light); }
.chat-item-main { min-width: 0; display: flex; flex-direction: column; }
.chat-item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.is-unread .chat-item-title { font-weight: 700; }
.chat-item-preview { font-size: .78rem; color: var(--qts-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-count { min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: 999px; background: var(--qts-gold); color: var(--qts-navy-dark); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-item-count[hidden] { display: none; }
.chat-main { display: flex; flex-direction: column; min-height: 60vh; }
.chat-thread-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--qts-border); flex-wrap: wrap; }
.chat-thread-head h2 { margin: 0; font-size: 1.05rem; }
.chat-thread-head > div { flex: 1; min-width: 0; }
.chat-back { display: none; align-items: center; gap: .2rem; font-weight: 600; }
.chat-back svg { width: 14px; height: 14px; }
.chat-manage { font-size: .84rem; }
.chat-manage summary { cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--qts-navy); }
.chat-manage summary svg { width: 14px; height: 14px; }
.chat-manage[open] { flex-basis: 100%; }
.chat-manage form { margin-top: .5rem; }
.chat-thread { flex: 1; overflow-y: auto; max-height: calc(100vh - var(--topbar-h) - 20rem); min-height: 280px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--qts-surface-2); }
.chat-thread-review { max-height: none; }
.chat-first { margin: auto; }
.chat-msg { max-width: 78%; align-self: flex-start; display: flex; flex-direction: column; gap: .15rem; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.is-found .chat-bubble { box-shadow: 0 0 0 3px var(--qts-gold-light); }
.chat-author { font-size: .74rem; font-weight: 600; color: var(--qts-navy-2); padding: 0 .3rem; }
.chat-bubble { background: #fff; border: 1px solid var(--qts-border); border-radius: 14px 14px 14px 4px; padding: .5rem .75rem; overflow-wrap: anywhere; }
.chat-msg.is-mine .chat-bubble { background: var(--qts-navy); color: #fff; border-color: var(--qts-navy); border-radius: 14px 14px 4px 14px; }
.chat-msg.is-mine .chat-bubble .msg-link { color: var(--qts-gold-light); }
.chat-body { margin: 0; font-size: .9rem; line-height: 1.45; }
.chat-time { font-size: .7rem; color: var(--qts-muted); padding: 0 .3rem; }
.chat-sys { align-self: center; font-size: .76rem; color: var(--qts-muted); background: #fff; border: 1px dashed var(--qts-border); border-radius: 999px; padding: .2rem .7rem; text-align: center; }
.chat-seen { min-height: 1.2rem; padding: 0 1rem; text-align: right; font-size: .74rem; color: var(--qts-muted); background: var(--qts-surface-2); }
.chat-composer { border-top: 1px solid var(--qts-border); padding: .7rem 1rem; display: grid; gap: .5rem; }
.chat-composer textarea { width: 100%; resize: vertical; min-height: 44px; }
.chat-composer-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.chat-composer-row button[type=submit] { margin-left: auto; }
.chat-attach { cursor: pointer; }
.chat-attach svg { width: 14px; height: 14px; }
.chat-error { color: var(--qts-danger); font-size: .8rem; }
.chat-error[hidden] { display: none; }
.chat-results { padding: .5rem 1rem 1rem; display: grid; gap: .5rem; }
.chat-result { display: grid; gap: .1rem; padding: .6rem .7rem; border: 1px solid var(--qts-border); border-radius: var(--radius-sm); color: var(--qts-text); }
.chat-result:hover { text-decoration: none; border-color: var(--qts-gold); }
.chat-result-text { font-size: .85rem; color: var(--qts-muted); }
@media (max-width: 900px) {
  .chat-shell { grid-template-columns: 1fr; }
  .chat-side { position: static; max-height: none; }
  .chat-shell.has-current .chat-side { display: none; }
  .chat-shell:not(.has-current) .chat-main { display: none; }
  .chat-back { display: inline-flex; }
  .chat-thread { max-height: calc(100vh - 22rem); }
  .chat-msg { max-width: 90%; }
  .review-form { flex-direction: column; align-items: stretch; }
  .review-form input { min-width: 0; }
}
.chat-search input, .chat-new select, .chat-new input[type=text], .chat-manage input[type=text], .chat-composer textarea, .review-form input {
  font: inherit; font-size: .88rem; padding: .5rem .7rem; border: 1px solid var(--qts-border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--qts-text); width: 100%; height: 38px;
}
.chat-composer textarea { height: auto; min-height: 48px; }
.chat-search input:focus, .chat-new select:focus, .chat-new input:focus, .chat-manage input:focus, .chat-composer textarea:focus, .review-form input:focus { outline: none; border-color: var(--qts-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.2); }
.from-qts .msg-link { color: var(--qts-gold-light); }
.bp-logo-preview { max-height: 64px; width: auto; background: #f4f5f7; padding: .4rem; border-radius: 8px; border: 1px solid #e2e5ea; }

/* ---------- FORMS-COMPLETE-12: form list tools, origin badge, workflow health, new assignment rows, notes, history ---------- */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--qts-border); background: var(--qts-surface-2); }
.list-search { display: flex; align-items: center; gap: .45rem; flex: 1 1 280px; max-width: 460px; }
.list-search input[type=search] { flex: 1 1 auto; min-width: 0; padding: .45rem .7rem; border: 1px solid var(--qts-border-strong); border-radius: var(--radius-sm); font: inherit; font-size: .88rem; }
.list-search input[type=search]:focus { outline: none; border-color: var(--qts-gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, .2); }
.pill-origin { color: var(--qts-navy); background: #EEF2F8; border-color: #C9D3E3; }
.pill-origin::before { background: var(--qts-navy); }
.pill-new { color: #fff; background: var(--qts-gold-dark); border-color: var(--qts-gold-dark); font-weight: 700; letter-spacing: .04em; }
.pill-new::before { background: #fff; }
.row-new td { background: #FFFBEE; }
.row-new .cell-primary a { font-weight: 700; }
.wf-health { font-weight: 600; white-space: nowrap; }
.wf-health-ok { color: #1E7B43; }
.wf-health-bad { color: #B42318; }
.wf-history { list-style: none; padding: 0; margin: 0; }
.wf-history li { padding: .35rem 0; border-bottom: 1px dashed var(--qts-border); }
.wf-history li:last-child { border-bottom: 0; }
.wf-history-no { display: inline-block; min-width: 3.4rem; color: var(--qts-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.notes-list { list-style: none; padding: 0; margin: 0; }
.notes-list li { padding: .5rem .65rem; margin-bottom: .4rem; border: 1px solid var(--qts-border); border-radius: 8px; background: var(--qts-surface-2); }
.notes-list li:last-child { margin-bottom: 0; }
.note-body { display: block; white-space: pre-wrap; color: var(--qts-text); margin-top: .25rem; font-size: .9rem; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--qts-border-strong); }
.timeline li { position: relative; padding: .3rem 0 .3rem .9rem; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .72rem; width: 10px; height: 10px; border-radius: 50%; background: var(--qts-navy); border: 2px solid #fff; }
.timeline li[data-timeline-kind=workflow]::before { background: var(--qts-gold); }
.timeline li[data-timeline-kind=note]::before { background: var(--qts-muted); }
@media (max-width: 640px) {
  .list-tools { padding: .65rem .85rem; }
  .list-search { max-width: none; }
}
/* FORMS-COMPLETE-12: a link field with its copy button never pushes a phone page sideways */
.input-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.input-row input[type=text] { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.input-row .btn { flex: 0 0 auto; }
/* FORMS-COMPLETE-12: a sub line inside a plain list item sits on its own line (checklists, workflow steps, history) */
.list li > .cell-sub { display: block; margin-top: .15rem; font-size: .78rem; color: var(--qts-muted); font-weight: 400; }
/* FORMS-CLEANUP-13: the My Forms actions wrap onto a second line instead of pushing the table sideways; the explanation sits under the buttons */
#my-forms .table .cell-actions { white-space: normal; max-width: 380px; }
#my-forms .table .cell-actions .btn, #my-forms .table .cell-actions form.inline { margin: 0 0 .3rem; vertical-align: middle; }
#my-forms .table .cell-actions [data-owner-delete-blocked] { display: block; text-align: right; max-width: 380px; margin-left: auto; }
/* FORMS-FINAL-QA-14: a received submission not yet opened, in Forms & Requests and the inbox (a quiet tint, no motion) */
.list-row.row-new { background: #FFFBEE; margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
/* FORMS-FINAL-QA-14: the friendly form address editor */
.slug-row { flex-wrap: wrap; }
.slug-base { color: var(--qts-muted); font-size: .86rem; min-width: 0; overflow-wrap: anywhere; }
#received-submissions .card-head { flex-wrap: wrap; }
#received-submissions .list-row { flex-wrap: wrap; }
#received-submissions .list-row > span:first-child { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.slug-row input[type=text] { flex: 1 1 160px; min-width: 120px; }

/* WHITE-LABEL-BRANDING: the brand colour fields and the compact portal preview on the organization record (QTS host). */
.bp-color { display: flex; align-items: center; gap: .4rem; }
.bp-color input[type=text], .bp-color input:not([type=color]) { flex: 1 1 auto; min-width: 0; }
.bp-color input[type=color] { width: 2.4rem; height: 2.2rem; padding: .1rem; border: 1px solid var(--qts-border-strong); border-radius: 6px; background: #fff; cursor: pointer; flex: none; }
.bp-preview { margin: .5rem 0 .9rem; }
.bp-preview-label { display: block; margin-bottom: .35rem; }
.bp-pv { display: grid; grid-template-columns: 170px minmax(0, 1fr); border: 1px solid var(--qts-border); border-radius: 10px; overflow: hidden; max-width: 460px; font-size: .78rem; --pv-side: #1f2937; --pv-side-text: #ffffff; --pv-line: rgba(255,255,255,.14); --pv-hover: rgba(255,255,255,.16); --pv-accent: #2563eb; --pv-accent-ink: #2563eb; --pv-border: #e2e7f0; }
.bp-pv-side { background: var(--pv-side); color: var(--pv-side-text); padding: .55rem .5rem; display: flex; flex-direction: column; gap: .2rem; }
.bp-pv-brand { display: flex; align-items: center; gap: .45rem; padding: .25rem .3rem .55rem; border-bottom: 1px solid var(--pv-line); margin-bottom: .3rem; min-height: 44px; }
.bp-pv-logo { background: #fff; border-radius: 6px; padding: .15rem .25rem; display: inline-flex; flex: none; }
.bp-pv-logo img { height: 28px; width: auto; max-width: 70px; object-fit: contain; display: block; }
.bp-pv-name { font-weight: 600; font-size: .82rem; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-pv-item { padding: .35rem .5rem; border-radius: 6px; opacity: .85; }
.bp-pv-item.is-active { background: var(--pv-hover); opacity: 1; box-shadow: inset 3px 0 0 var(--pv-accent); }
.bp-pv-main { background: #F4F6FA; display: flex; flex-direction: column; }
.bp-pv-top { background: #fff; border-bottom: 1px solid var(--pv-border); padding: .5rem .7rem; font-weight: 600; color: #0F1E36; }
.bp-pv-card { margin: .6rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 8px; padding: .55rem .7rem; color: #0F1E36; }
.bp-pv-kicker { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--pv-accent-ink); margin-bottom: .2rem; }

/* DIRECT-ERO-OWNER-PREPARATION: office ownership on Portal Logins, the owner card, owner work */
.own-card { border-color: #C7D8F5; background: #F7FAFF; }
.own-card .card-head, #owner-profile .card-head { flex-wrap: wrap; gap: .5rem; }
.own-pill { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .14rem .5rem; border-radius: 999px; white-space: nowrap; }
.own-pill.yes { background: #E7F6EE; color: #1E8A55; border: 1px solid #BFE6CF; }
.own-pill.no { background: #EEF2FA; color: #53607a; border: 1px solid #CBD4E2; }
.own-pill.na { background: #f4f5f7; color: #6b7690; border: 1px solid #e1e4ea; }
.own-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 170px; }
.own-hint { display: block; font-size: .76rem; font-weight: 500; color: #7a5d00; white-space: normal; text-align: left; }
.own-hint.is-plain { color: #3b4660; }
.own-hint.is-muted { color: #6b7690; }
.own-facts dd { overflow-wrap: anywhere; }
/* Portal Logins: every control in view at every width. From 1280px a fixed table whose cells wrap; below 1280px each login is a card (as on a phone) */
.logins-table td.cell-actions > form, .logins-table td.cell-actions > .btn, .logins-table td.cell-actions > span { display: block; width: 100%; margin: 0 0 .4rem; }
.logins-table td.cell-actions .btn { width: 100%; justify-content: center; }
@media (min-width: 1280px) {
  .logins-table { table-layout: fixed; width: 100%; }
  .logins-table th:nth-child(1) { width: 14%; } .logins-table th:nth-child(2) { width: 17%; } .logins-table th:nth-child(3) { width: 7%; }
  .logins-table th:nth-child(4) { width: 14%; } .logins-table th:nth-child(5) { width: 8%; } .logins-table th:nth-child(6) { width: 8%; }
  .logins-table th:nth-child(7) { width: 15%; } .logins-table th:nth-child(8) { width: 17%; }
  .logins-table th, .logins-table td { padding-left: .5rem; padding-right: .5rem; overflow-wrap: anywhere; }
  .logins-table .own-cell { min-width: 0; }
  .logins-table .btn { white-space: normal; line-height: 1.2; height: auto; min-height: 2rem; padding-top: .4rem; padding-bottom: .4rem; }
}
@media (min-width: 961px) and (max-width: 1279px) {
  .table-cards .logins-table, .table-cards .logins-table thead, .table-cards .logins-table tbody, .table-cards .logins-table tr, .table-cards .logins-table td { display: block; }
  .table-cards .logins-table thead { display: none; }
  .table-cards .logins-table tr { padding: .6rem .9rem; border-bottom: 1px solid var(--qts-border); }
  .table-cards .logins-table td { padding: .18rem 0; border: 0; display: flex; justify-content: space-between; gap: .8rem; align-items: center; text-align: right; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
  .table-cards .logins-table td::before { content: attr(data-label); color: var(--qts-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; flex: none; }
  .table-cards .logins-table td.cell-lead { display: block; text-align: left; padding-bottom: .35rem; }
  .table-cards .logins-table td.cell-lead::before, .table-cards .logins-table td.cell-actions::before { display: none; }
  .table-cards .logins-table td.cell-ownership, .table-cards .logins-table td[data-label="Last Login"] { display: block; text-align: left; }
  .table-cards .logins-table td.cell-ownership::before, .table-cards .logins-table td[data-label="Last Login"]::before { display: block; margin-bottom: .3rem; }
  .table-cards .logins-table td.cell-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding-top: .5rem; }
  .table-cards .logins-table td.cell-actions > form, .table-cards .logins-table td.cell-actions > .btn, .table-cards .logins-table td.cell-actions > span { margin: 0; }
  .own-cell { min-width: 0; width: 100%; }
}
.self-note { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; background: #FFF7E0; color: #8a6a0c; border: 1px solid #E8D28A; white-space: nowrap; }
.reassign-note { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; background: #FDECEC; color: #9b1c22; border: 1px solid #F3C2C4; white-space: nowrap; }
.next-box { border: 2px solid #BFE6CF; background: #F1FAF5; border-radius: 12px; padding: .85rem 1rem; margin: 0 0 1rem; }
.next-box h3 { margin: 0 0 .25rem; font-size: 1rem; color: #1E6B45; }
.warn-box { border: 2px solid #F3C2C4; background: #FDF3F3; border-radius: 12px; padding: .85rem 1rem; margin: 0 0 1rem; }
.warn-box h3 { margin: 0 0 .25rem; font-size: 1rem; color: #9b1c22; }
.owner-switch { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; }
.owner-switch input { margin-top: .2rem; width: 18px; height: 18px; flex: none; accent-color: var(--qts-blue); }
.owner-switch .l { display: block; font-size: .88rem; font-weight: 600; }
.owner-switch .h { display: block; font-size: .78rem; color: var(--qts-muted); }
@media (max-width: 960px) {
  .table-cards .logins-table td.cell-ownership { display: block; text-align: left; padding: .45rem 0; }
  .table-cards .logins-table td.cell-ownership::before { display: block; margin-bottom: .3rem; }
  .table-cards .logins-table td.cell-actions { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; padding-top: .5rem; }
  .table-cards .logins-table td.cell-actions > form, .table-cards .logins-table td.cell-actions > .btn, .table-cards .logins-table td.cell-actions > span { width: 100%; margin: 0; }
  .table-cards .logins-table td.cell-actions .btn { width: 100%; justify-content: center; }
  .table-cards .logins-table td.cell-ownership .btn { width: 100%; justify-content: center; }
  .table-cards .logins-table td[data-label="Last Login"] { display: block; text-align: left; }
  .table-cards .logins-table td[data-label="Last Login"]::before { display: block; margin-bottom: .2rem; }
  .table-cards .logins-table td { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
  .own-cell { min-width: 0; width: 100%; }
}
.cell-flag { display: block; margin-top: .3rem; }

/* DIRECT-ERO-INTAKE-QA-AND-MOBILE-HOTFIX: the Direct ERO intake only (.qf-intake-de) */
.qf-intake-de .qf-progress { overflow: visible; }
.qf-intake-de .qf-progress li { min-width: 0; }
.qf-intake-de .qf-progress li .l { overflow-wrap: anywhere; line-height: 1.2; }
.qf-intake-de .qf-progress li.is-invalid .n { border-color: var(--qts-danger, #B3282E); background: #FDECEC; color: #9b1c22; }
.qf-intake-de .qf-progress li.is-current .n { border-color: var(--qts-gold); background: var(--qts-gold); color: var(--qts-navy-dark); }
.qf-intake-de .qf-progress li.is-current.is-invalid .n { box-shadow: 0 0 0 3px #F3C2C4; }
.qf-intake-de .qf-progress li.is-current.is-done .n { box-shadow: 0 0 0 3px #BFE6CF; }
.qf-save-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: 100%; font-size: .85rem; padding: .55rem .75rem; border-radius: 10px; }
.qf-save-status.is-ok { background: #E7F6EE; color: #1E6B45; border: 1px solid #BFE6CF; }
.qf-save-status.is-warn { background: #FFF7E0; color: #7a5d00; border: 1px solid #E8D28A; }
.qf-save-status.is-error { background: #FDF3F3; color: #9b1c22; border: 1px solid #F3C2C4; }
.qf-save-status.is-busy { background: #EEF2FA; color: #3b4660; border: 1px solid #CBD4E2; }
.qf-fee-card { padding: .9rem 1rem; }
.qf-fee-lines { margin: 0; display: grid; gap: .35rem; }
.qf-fee-lines > div { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; font-size: .9rem; }
.qf-fee-lines dt { color: var(--qts-muted); margin: 0; }
.qf-fee-lines dd { margin: 0; font-weight: 600; white-space: nowrap; }
.qf-fee-lines .qf-fee-total { border-top: 1px solid var(--qts-border); padding-top: .45rem; margin-top: .2rem; }
.qf-fee-lines .qf-fee-total dt { color: var(--qts-navy); font-weight: 700; text-transform: uppercase; font-size: .76rem; letter-spacing: .04em; }
.qf-fee-lines .qf-fee-total dd { font-size: 1.15rem; color: var(--qts-navy); }
#fee-snapshot .facts { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.qf-upload.is-saved .qf-upload-name { color: #1E6B45; font-weight: 600; }
@media (max-width: 640px) {
  .qf-intake-de .qf-progress { gap: .2rem; overflow: visible; }
  .qf-intake-de .qf-progress li { min-width: 0; flex: 1 1 0; }
  .qf-intake-de .qf-progress li .n { width: 24px; height: 24px; font-size: .7rem; }
  .qf-intake-de .qf-progress li .l { display: none; }
  .qf-intake-de .qf-actions { flex-wrap: wrap; }
  .qf-intake-de .qf-actions .btn { flex: 1 1 auto; }
  .qf-fee-lines > div { flex-wrap: wrap; }
}
/* OFFICE-ROLES-DIRECT-ERO: a long confirmation never runs off a phone screen; the title and buttons stay, the body scrolls */
dialog.dlg { max-height: calc(100dvh - 1.5rem); overflow: hidden; }
dialog.dlg .dlg-form { max-height: calc(100dvh - 1.5rem); }
dialog.dlg .dlg-head, dialog.dlg .dlg-foot { flex: none; }
dialog.dlg .dlg-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }

/* DEVICE-CLASS: the message a phone sees on a creation or management page */
.device-block { display: flex; justify-content: center; padding: 2.5rem 0 3rem; }
.device-card { max-width: 440px; width: 100%; text-align: center; padding: 2rem 1.5rem; }
.device-card h1 { font-size: 1.2rem; line-height: 1.4; margin: .8rem 0 .5rem; color: var(--qts-navy); }
.device-card p { margin: 0 0 1.4rem; }
.device-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; background: var(--qts-info-bg, #E9F0FC); color: var(--qts-blue, #1747A8); }
.device-icon svg { width: 28px; height: 28px; }
.device-card .btn { width: 100%; justify-content: center; }
.device-card a.btn-primary, .device-card a.btn-primary:visited { color: #fff; }