/* User intent: the gateway's single stylesheet, linked by every gateway page and by the no-access page /verify shows
   on a tool's own origin — every rule reads the DS tokens in cm-tokens.css; no raw colors, no shadows, no gradients,
   no left rails, no italics, no hover motion. */

/* ---- Fonts ---- */
/* Served from the gateway so no page makes a third-party request. Variable files: one per family covers every DS weight. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/assets/fonts/dm-sans-latin-wght-5.3.0.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/assets/fonts/dm-sans-latin-ext-wght-5.3.0.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-wght-5.3.0.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-ext-wght-5.3.0.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-cyrillic-wght-5.3.0.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
h1, h2, p { margin: 0; }
a { color: inherit; }
a:not(.tg-btn):focus-visible { color: var(--ac); outline: none; text-decoration: underline; }
.tg-meta { font-family: var(--FM); font-size: 12px; color: var(--td); }
.tg-stack { display: flex; flex-direction: column; gap: var(--sp-18); }
.tg-form { display: flex; flex-direction: column; gap: var(--sp-15); }

/* ---- Auth card ---- */
.tg-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-24); background: var(--bg); }
.tg-auth__card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--sp-18); padding: var(--sp-30); background: var(--s1); border: 1.5px solid var(--bd); border-radius: var(--r-15); }
.tg-auth__brand { font-family: var(--FM); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ac); }
.tg-auth__title { font-family: var(--FS); font-weight: 700; font-size: 22px; }
.tg-auth__lede { color: var(--tm); font-size: 15px; }
.tg-auth__note { color: var(--tm); font-size: 14px; }

/* ---- Button ---- */
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-6); border: 1.5px solid transparent; border-radius: var(--r-9); font-family: var(--FM); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: filter var(--t-fast) var(--ease-out); }
.tg-btn--md { padding: var(--sp-9) var(--sp-21); font-size: 16px; }
.tg-btn--sm { padding: 4px var(--sp-12); font-size: 14px; border-radius: var(--r-6); }
.tg-btn--primary { background: var(--ac); color: var(--bg); }
.tg-btn--secondary { background: var(--s3); color: var(--tx); border-color: var(--bd); }
.tg-btn:hover:not(:disabled) { filter: brightness(1.15); }
.tg-btn:focus-visible { outline: 1.5px solid var(--ac); outline-offset: 2px; }
.tg-btn--primary:focus-visible { outline-color: var(--tx); }
.tg-btn:disabled { background: var(--s4); color: var(--td); border-color: transparent; opacity: .5; cursor: default; }

/* ---- Field ---- */
.tg-field { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.tg-field__main { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.tg-field__label { font-family: var(--FM); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tm); }
.tg-field__hint { font-size: 14px; color: var(--tm); }
.tg-input { width: 100%; min-width: 0; background: var(--s3); color: var(--tx); border: 1px solid var(--bd); border-radius: var(--r-8); padding: 8px var(--sp-12); font-family: var(--FS); font-size: 16px; transition: border-color var(--t-fast) var(--ease-out); }
.tg-input--mono { font-family: var(--FM); font-size: 14px; }
.tg-input:focus { border-color: var(--ac); outline: none; }
.tg-input:read-only { color: var(--tm); }
/* One real input lies under six drawn cells: it keeps paste, autofill and the keypad; the cells only show its digits. */
.tg-otp { position: relative; display: block; width: 100%; min-width: 0; }
/* 16px keeps iOS from zooming the page when the field takes focus. */
.tg-otp__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-family: var(--FM); font-size: 16px; }
.tg-otp__input::selection { background: transparent; color: transparent; }
.tg-otp__cells { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-6); pointer-events: none; }
.tg-otp__cell { display: flex; align-items: center; justify-content: center; min-width: 0; height: 46px; background: var(--s3); color: var(--tx); border: 1px solid var(--bd); border-radius: var(--r-8); font-family: var(--FM); font-weight: 600; font-size: 18px; transition: border-color var(--t-fast) var(--ease-out); }
.tg-otp__input:focus ~ .tg-otp__cells .tg-otp__cell--active { border-color: var(--ac); }

/* ---- Alert: full-perimeter tinted border, never a left rail ---- */
.tg-alert { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-9) var(--sp-12); border: 1.5px solid; border-radius: var(--r-9); font-size: 15px; color: var(--tx); overflow-wrap: anywhere; }
.tg-alert__title { font-family: var(--FM); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.tg-alert__body { min-width: 0; }
.tg-alert__body > * + * { margin-top: var(--sp-6); }
.tg-alert--blocked { background: var(--rdD); border-color: var(--rd); }
.tg-alert--blocked .tg-alert__title { color: var(--rd); }
.tg-alert--investigate { background: var(--ywD); border-color: var(--yw); }
.tg-alert--investigate .tg-alert__title { color: var(--yw); }
.tg-alert--info { background: var(--bl2D); border-color: var(--bl2); }
.tg-alert--info .tg-alert__title { color: var(--bl2); }
.tg-alert--done { background: var(--gnD); border-color: var(--gn); }
.tg-alert--done .tg-alert__title { color: var(--gn); }

/* ---- Enrolment ---- */
.tg-qr { align-self: flex-start; border-radius: var(--r-8); }
.tg-secretblock { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.tg-secret { display: block; font-family: var(--FM); font-size: 14px; word-break: break-all; padding: var(--sp-9) var(--sp-12); background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r-8); }

/* ---- Tool list (no-access page; the portal reuses it) ---- */
.tg-toollist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.tg-toollist a { display: block; padding: var(--sp-9) var(--sp-12); background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r-8); color: var(--tx); text-decoration: none; transition: filter var(--t-fast) var(--ease-out); }
.tg-toollist a:hover { filter: brightness(1.08); border-color: var(--bl); }

/* ---- Ported from Agent Board: text, actions, extra button variants ---- */
.tg-code { font-family: var(--FM); font-size: 14px; color: var(--tx); background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r-4); padding: 0 4px; }
.tg-label { font-family: var(--FM); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--tm); }
.tg-actions { display: flex; align-items: center; gap: var(--sp-9); justify-content: flex-end; flex-wrap: wrap; }
.tg-btn--ghost { background: transparent; color: var(--tm); border-color: var(--bd); }
.tg-btn--danger { background: var(--iconbtn-danger-bg); color: var(--rd); border-color: var(--iconbtn-danger-bd); }

/* ---- Badge ---- */
.tg-badge { display: inline-flex; align-items: center; gap: var(--sp-6); font-family: var(--FM); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 21px; white-space: nowrap; }
.tg-badge--md { padding: 3px 10px; font-size: 14px; border-radius: var(--r-6); }
.tg-badge--sm { padding: 0 8px; font-size: 12px; border-radius: var(--r-4); }
.tg-badge--done { background: var(--gnD); color: var(--gn); }
.tg-badge--investigate { background: var(--ywD); color: var(--yw); }
.tg-badge--blocked { background: var(--rdD); color: var(--rd); }
.tg-badge--info { background: var(--bl2D); color: var(--bl2); }
.tg-badge--review { background: var(--ppD); color: var(--pp); }
.tg-badge--link { background: var(--cyD); color: var(--cy); }
.tg-badge--brand { background: var(--acD); color: var(--ac); }
.tg-badge--neutral { background: var(--s3); color: var(--tm); }

/* ---- Card, list, table ---- */
.tg-card { background: var(--s1); border: 1.5px solid var(--bd); border-radius: var(--r-12); padding: var(--sp-15); }
.tg-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-12); }
.tg-card__title { font-family: var(--FM); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--tm); }
.tg-list { list-style: none; margin: 0; padding: 0; background: var(--s1); border: 1.5px solid var(--bd); border-radius: var(--r-12); }
.tg-list > li { padding: var(--sp-12) var(--sp-15); display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.tg-list > li + li { border-top: 1px solid var(--bd); }
.tg-row-title { font-weight: 600; font-size: 16px; color: var(--tx); text-decoration: none; overflow-wrap: anywhere; }
.tg-row-text { color: var(--tm); font-size: 15px; overflow-wrap: anywhere; }
.tg-table-wrap { position: relative; overflow-x: auto; border: 1.5px solid var(--bd); border-radius: var(--r-12); background: var(--s1); }
.tg-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.tg-table th { text-align: left; padding: var(--sp-9) var(--sp-12); background: var(--s2); font-family: var(--FM); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tm); white-space: nowrap; }
.tg-table td { padding: var(--sp-9) var(--sp-12); border-top: 1px solid var(--bd); vertical-align: top; overflow-wrap: anywhere; }
.tg-table__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-6); }
/* The one place a 1px border survives, per the Checkbox recipe. */
.tg-checkbox { position: relative; display: inline-flex; align-items: flex-start; gap: var(--sp-9); font-family: var(--FS); font-size: 13px; color: var(--tx); cursor: pointer; }
.tg-checkbox--disabled { opacity: .5; cursor: not-allowed; }
.tg-checkbox__input { position: absolute; top: 0; left: 0; width: 18px; height: 18px; margin: 0; opacity: 0; cursor: inherit; }
.tg-checkbox__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--s3); color: transparent; border: 1px solid var(--bd); border-radius: var(--r-4); transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.tg-checkbox__input:checked + .tg-checkbox__box { background: var(--ac); color: var(--bg); border-color: var(--ac); }
.tg-checkbox:hover:not(.tg-checkbox--disabled) .tg-checkbox__box { filter: brightness(1.15); }
.tg-checkbox__input:focus-visible + .tg-checkbox__box { border-color: var(--ac); outline: 1.5px solid var(--ac); outline-offset: 2px; }
.tg-checkbox__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tg-checkbox__label { line-height: 18px; }
.tg-checkbox__description { font-size: 12px; line-height: 1.4; color: var(--tm); }

/* ---- Empty, tabs, toolbar, page head ---- */
.tg-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-9); padding: var(--sp-24); border: 1.5px dashed var(--bd); border-radius: var(--r-12); }
.tg-empty__title { font-weight: 600; font-size: 16px; color: var(--tx); }
.tg-empty__hint { color: var(--tm); font-size: 15px; max-width: 60ch; }
.tg-tabs { display: flex; gap: var(--sp-18); border-bottom: 1.5px solid var(--bd); flex-wrap: wrap; }
.tg-tab { display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-9) 0; color: var(--tm); text-decoration: none; font-family: var(--FM); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
.tg-tab:hover { color: var(--tx); }
.tg-tab:focus-visible { outline: 1.5px solid var(--ac); outline-offset: 2px; }
.tg-tab--active { color: var(--tx); border-bottom-color: var(--ac); }
.tg-tab__count { color: var(--td); font-weight: 600; }
.tg-toolbar { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: nowrap; }
.tg-toolbar__grow { flex: 1; min-width: 0; }
.tg-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-18); }
.tg-pagehead__title { font-family: var(--FS); font-weight: 700; font-size: 27px; line-height: 1.15; }
.tg-pagehead__desc { margin-top: var(--sp-6); max-width: 72ch; color: var(--tm); font-size: 16px; }
.tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- One-time secrets, typed confirmations, key/value lists ---- */
.tg-secret-once { display: flex; flex-direction: column; gap: var(--sp-9); margin-bottom: var(--sp-15); min-width: min(100%, 360px); }
.tg-confirm { display: flex; flex-direction: column; gap: var(--sp-9); min-width: min(100%, 300px); max-width: 420px; padding: var(--sp-12); background: var(--s2); border: 1.5px solid var(--bd); border-radius: var(--r-9); text-align: left; }
.tg-kv { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-6) var(--sp-9); font-family: var(--FM); font-size: 12px; }
.tg-kv > div { display: contents; }
.tg-kv dt { color: var(--tm); }
.tg-kv dd { margin: 0; color: var(--tx); overflow-wrap: anywhere; }

/* ---- Portal and admin layout ---- */
.tg-shell { min-height: 100vh; background: var(--bg); color: var(--tx); font-family: var(--FS); }
.tg-topbar { display: flex; align-items: center; gap: var(--sp-18); padding: var(--sp-12) var(--sp-24); background: var(--s1); border-bottom: 1.5px solid var(--bd); flex-wrap: wrap; }
.tg-topbar__brand { font-weight: 700; font-size: 16px; color: var(--tx); text-decoration: none; }
.tg-topbar__nav { display: flex; gap: var(--sp-15); flex: 1; }
.tg-topbar__link { color: var(--tm); text-decoration: none; font-size: 15px; padding: var(--sp-6) 0; border-bottom: 3px solid transparent; }
.tg-topbar__link:hover { color: var(--tx); }
.tg-topbar__link--active { color: var(--tx); border-bottom-color: var(--ac); }
.tg-topbar__avatar { display: block; flex: none; border-radius: 50%; }
.tg-topbar__avatar:hover .tg-avatar { border-color: var(--tx); }
a.tg-topbar__avatar:focus-visible { outline: 1.5px solid var(--ac); outline-offset: 2px; }
.tg-topbar__who { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.tg-topbar__name { font-size: 14px; color: var(--tx); overflow-wrap: anywhere; }
.tg-shell__main { max-width: 1200px; margin: 0 auto; padding: var(--sp-24); }
.tg-notice-lines { margin: 0; padding: 0 0 0 var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-6); overflow-wrap: anywhere; }
.tg-portal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-15); list-style: none; margin: 0; padding: 0; }
.tg-tool-card { display: flex; flex-direction: column; overflow: hidden; background: var(--s1); border: 1.5px solid var(--bd); border-radius: var(--r-12); }
.tg-tool-card__art { aspect-ratio: 3 / 2; overflow: hidden; background: var(--s2); border-bottom: 1.5px solid var(--bd); }
.tg-tool-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-tool-card__body { display: flex; flex-direction: column; gap: var(--sp-6); flex: 1; min-width: 0; padding: var(--sp-15) var(--sp-15) 0; }
.tg-tool-card__name { font-weight: 600; font-size: 16px; color: var(--tx); }
.tg-tool-card__desc { margin: 0; flex: 1; color: var(--tm); font-size: 15px; overflow-wrap: anywhere; }
.tg-tool-card__open { align-self: stretch; margin: var(--sp-12) var(--sp-15) var(--sp-15); }
.tg-checklist-wrap { display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; }
.tg-checklist-group { display: flex; flex-direction: column; gap: var(--sp-9); }
.tg-checklist-group__title { margin: 0; font-family: var(--FM); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tm); }
.tg-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-12) var(--sp-15); }
.tg-checklist > li { min-width: 0; }
.tg-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-6); }
.tg-toolbar--wrap { flex-wrap: wrap; align-items: flex-end; }
.tg-toolbar--wrap .tg-toolbar__grow { flex: 1 1 200px; }
.tg-nowrap { white-space: nowrap; overflow-wrap: normal; }
.tg-selected { margin: 0; font-family: var(--FM); font-size: 12px; color: var(--tm); overflow-wrap: anywhere; }
.tg-health { display: flex; gap: var(--sp-15); flex-wrap: wrap; align-items: center; }
.tg-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-9); min-width: 0; }
.tg-toggles { display: flex; flex-wrap: wrap; gap: var(--sp-9) var(--sp-15); }
/* ---- Avatar: humans wear an amber circle; the border width comes from the component (3 px from 28 px up, 2 px below) ---- */
.tg-avatar { display: block; flex: none; box-sizing: border-box; border-style: solid; border-color: var(--ac); border-radius: 50%; background: var(--bg); }
.tg-avatar--gap { padding: 1px; }
.tg-person { display: flex; align-items: center; gap: var(--sp-9); min-width: 0; }
.tg-avatar-editor { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-15); }
.tg-avatar-sizes { display: inline-flex; align-items: flex-end; gap: var(--sp-9); }
.tg-actions--start { justify-content: flex-start; }

/* ---- Segmented choice ---- */
.tg-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--bd); border-radius: var(--r-6); overflow: hidden; }
.tg-seg__item { background: none; border: 0; padding: 4px 11px; font-family: var(--FS); font-size: 14px; color: var(--tm); cursor: pointer; white-space: nowrap; }
.tg-seg__item:hover { filter: brightness(1.15); }
.tg-seg__item:focus-visible { outline: 1.5px solid var(--ac); outline-offset: -3px; }
.tg-seg__item[aria-pressed="true"] { background: var(--acD); color: var(--ac); }

.tg-badges { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; }
.tg-cli { display: flex; flex-direction: column; gap: var(--sp-6); margin: var(--sp-9) 0 0; padding: 0; list-style: none; }
.tg-cli code { font-family: var(--FM); font-size: 13px; overflow-wrap: anywhere; }
.tg-pager { display: flex; justify-content: flex-end; margin-top: var(--sp-12); }