/* Access — requests, people & access, reviews, two-step. Tokens only (light + dark). */
.ax-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -2px; }
.ax-mut { color: var(--ink-3, var(--muted)); font-size: 12.5px; }
.ax-err { color: var(--bad); }
.ax-loading { color: var(--ink-3, var(--muted)); padding: 18px 2px; }
.ax-sub { color: var(--ink-3, var(--muted)); margin: 4px 0 14px; font-size: 13.5px; }
.ax-push { margin-left: auto; }
.ax-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--navy); cursor: pointer; text-align: left; }
.ax-link:hover { text-decoration: underline; }
.ax-danger { color: var(--bad) !important; }

/* avatar, pills, tags */
.ax-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-fill); color: #fff; font-size: 12.5px; font-weight: 700; flex: none; letter-spacing: .02em; }
.rec-h2 .ax-av { width: 40px; height: 40px; margin-right: 10px; font-size: 14px; }
.ax-lv { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--surface-hover); color: var(--ink-3, var(--muted)); white-space: nowrap; }
.ax-lv-view { background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); }
.ax-lv-edit { background: color-mix(in srgb, var(--ok) 16%, transparent); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.ax-lv-manage { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.ax-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-hover); color: var(--ink-3, var(--muted)); white-space: nowrap; }
.ax-tag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.ax-tag.bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.ax-tag.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: color-mix(in srgb, var(--warn) 80%, var(--ink)); }
.ax-hr { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 650; color: color-mix(in srgb, var(--warn) 80%, var(--ink)); }
.ax-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-hover); font-size: 13px; font-weight: 600; }
.ax-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 18%, transparent); font-size: 11px; font-weight: 700; }
.ax-badge:empty, .ax-badge:is(:empty) { display: none; }

/* forms */
.ax-modal { max-width: 560px; }
.ax-form { display: flex; flex-direction: column; gap: 6px; }
.ax-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3, var(--muted)); margin-top: 10px; }
.ax-form textarea, .ax-form input, .ax-form select, .ax-date, .ax-code { width: 100%; }
.ax-count { align-self: flex-end; font-size: 11.5px; color: var(--ink-3, var(--muted)); }
.ax-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.ax-actions .ax-ic { margin-right: 4px; }
.ax-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: color-mix(in srgb, var(--warn) 8%, transparent); border-left: 3px solid var(--warn); }
.ax-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface); }
.ax-search input { border: 0 !important; box-shadow: none !important; background: transparent; padding: 9px 0; flex: 1; min-width: 0; }
.ax-arealist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 42vh; overflow-y: auto; padding: 2px; }
.ax-area { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; position: relative; }
.ax-area:hover, .ax-area:focus-visible { border-color: var(--navy); background: var(--surface-hover); }
.ax-area > .ax-ic { position: absolute; top: 10px; right: 10px; color: var(--warn); }
.ax-picked { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-hover); }
.ax-picked .btn { margin-left: auto; }
.ax-keys { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ax-key { margin: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); cursor: pointer; }
.ax-key input { width: auto; margin: 0; }
.ax-key-t { flex: 1; }
.ax-key.is-held, .ax-key.is-locked { opacity: .7; cursor: default; }
.ax-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-seg button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.ax-seg button.on, .ax-seg button[aria-checked="true"] { background: var(--navy-fill); border-color: var(--navy-fill); color: #fff; }
.ax-seg button:disabled { opacity: .4; cursor: not-allowed; }

/* my access */
.ax-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md, 15px); background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 12px; flex-wrap: wrap; }
.ax-hero .ax-av { width: 46px; height: 46px; font-size: 15px; }
.ax-hero > div { flex: 1; min-width: 180px; }
.ax-hero .btn .ax-ic { margin-right: 4px; }
.ax-h { font-size: 18px; font-weight: 700; }
.ax-block { padding: 14px 18px; border-radius: var(--r-md, 15px); background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.ax-block h3 { margin: 0 0 10px; font-size: 14px; }
.ax-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.ax-area-row, .ax-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ax-req { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ax-req > div { flex: 1; min-width: 0; }
.ax-2fa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ax-2fa > div { flex: 1; min-width: 200px; }
.ax-2fa > .ax-ic { width: 22px; height: 22px; color: var(--navy); }
.ax-2fa.on > .ax-ic { color: var(--ok); }
.ax-2fa-strong { border-left: 3px solid var(--warn); }
.ax-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.ax-qr { margin: 10px 0 6px; max-width: 180px; background: #fff; padding: 6px; border-radius: 8px; }
.ax-qr svg { width: 100%; height: auto; display: block; }
.ax-secret { font-size: 13px; letter-spacing: .06em; word-break: break-all; }
.ax-code { font-size: 20px; letter-spacing: .3em; max-width: 180px; margin-top: 6px; }
.ax-nudge { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; gap: 12px; align-items: flex-start; max-width: 380px; padding: 14px 16px; border-radius: var(--r-md, 15px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); border-left: 3px solid var(--warn); }
.ax-nudge > .ax-ic { width: 20px; height: 20px; color: var(--warn); margin-top: 2px; }
.ax-nudge-b { display: flex; flex-direction: column; gap: 6px; }
/* Corner nudges: a real × (aria-label "Dismiss"), room for it, and lifted clear of the Agent Dean button. */
.ax-nudge { padding-right: 40px; }
.ax-nudge-t { flex: 1; min-width: 0; }
.ax-nudge-x { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2, var(--ink)); cursor: pointer; }
.ax-nudge-x .ax-ic { width: 16px; height: 16px; }
.ax-nudge-x:hover { background: var(--surface-hover); color: var(--ink); }
.ax-nudge-x:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
body:has(.ai-fab) .ax-nudge { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

/* inbox cards */
.ax-tabs { margin: 0 0 16px; }
.ax-card { padding: 14px 16px; border-radius: var(--r-md, 15px); background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 10px; border-left: 3px solid color-mix(in srgb, var(--navy) 55%, transparent); }
.ax-card.is-hr { border-left-color: var(--warn); }
.ax-card header { display: flex; align-items: center; gap: 10px; }
.ax-who { flex: 1; min-width: 0; }
.ax-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 8px; }
.ax-reason { margin: 0; padding: 8px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-hover); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ax-reason::before { content: "“"; } .ax-reason::after { content: "”"; }
.ax-card footer.ax-actions { justify-content: flex-start; }
.ax-decided { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* people */
.ax-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ax-toolbar .ax-search { flex: 1; min-width: 220px; }
.ax-scroll { overflow-x: auto; }
.ax-table { width: 100%; border-collapse: collapse; }
.ax-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3, var(--muted)); padding: 10px 12px; }
.ax-table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.ax-table td .pill { margin: 2px 4px 2px 0; }
.ax-prow { cursor: pointer; }
.ax-prow:hover, .ax-prow:focus-visible { background: var(--surface-hover); outline: none; }
.ax-prow.is-off { opacity: .55; }
.ax-person { display: flex; align-items: center; gap: 10px; }

/* matrix */
.ax-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ax-legend .ax-ic { color: var(--warn); }
/* The card is the scroll box in BOTH directions. .tablecard is overflow:hidden and .ax-scroll only
   re-opened x, so y stayed clipped at 70vh and rows past the fold could not be reached (26 Sep). */
.tablecard.ax-matrix-wrap { overflow: auto; max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); min-height: 260px; overscroll-behavior: contain; }
.ax-email { overflow-wrap: anywhere; font-size: 11.5px; }
.ax-matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ax-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); height: 150px; vertical-align: bottom; padding: 0 2px 8px; }
.ax-matrix thead th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; color: var(--ink-3, var(--muted)); }
.ax-matrix thead th .ax-ic { display: block; margin: 4px auto 0; color: var(--warn); width: 12px; height: 12px; }
.ax-matrix .ax-sticky { position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left; min-width: 170px; max-width: 220px; padding: 6px 12px 6px 4px; border-top: 1px solid var(--line); font-weight: 400; }
.ax-matrix thead .ax-sticky { z-index: 4; vertical-align: bottom; }
.ax-cell, .ax-cell-demo { width: 26px; min-width: 26px; height: 28px; text-align: center; font-weight: 700; font-size: 11px; border-top: 1px solid var(--line); cursor: pointer; }
.ax-cell.ax-lv-none { background: transparent; }
.ax-cell.ax-lv-view, .ax-cell-demo { background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); }
.ax-cell.ax-lv-edit { background: color-mix(in srgb, var(--ok) 18%, transparent); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.ax-cell.ax-lv-manage { background: color-mix(in srgb, var(--warn) 20%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.ax-cell.is-extra, .ax-cell-demo.is-extra { box-shadow: inset 0 0 0 2px var(--ok); }
.ax-cell.is-removed, .ax-cell-demo.is-removed { box-shadow: inset 0 0 0 2px var(--bad); }
.ax-cell-demo { display: inline-grid; place-items: center; border-radius: 6px; cursor: default; }
.ax-cell.is-hrcol { border-left: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent); }
.ax-cell:hover { filter: brightness(.95); }

/* person sheet */
.ax-sheet .rec-h2 { display: flex; align-items: center; }
.ax-facts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.ax-endrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-hover); }
.ax-endrow .btn .ax-ic { margin-right: 4px; }
.ax-arealist2 { display: flex; flex-direction: column; gap: 4px; }
.ax-area2 { border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--surface); }
.ax-area2.is-none .ax-area2-h > span:first-child { color: var(--ink-3, var(--muted)); }
.ax-area2-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.ax-area2-h > .ax-ic { color: var(--warn); }
.ax-area2-b { padding: 0 12px 8px; }
.ax-keyrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ax-keyrow > span:first-child { flex: 1; }
.ax-keyrow .ax-ic { color: var(--warn); margin-left: 4px; }
.ax-history { list-style: none; padding: 0; margin: 0; }
.ax-history li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }

/* reviews */
.ax-review-intro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ax-review-intro > div { flex: 1; min-width: 220px; }
.ax-review-intro > .ax-ic { width: 22px; height: 22px; color: var(--navy); }
.ax-progress { height: 8px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; margin: 12px 0 6px; }
.ax-progress span { display: block; height: 100%; width: var(--p, 0%); background: var(--ok); transition: width .3s var(--ease, ease); }
.ax-review { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ax-rv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--surface); box-shadow: var(--shadow-sm); }
.ax-rv .ax-person { flex: 1; min-width: 240px; }
.ax-rv .pill { margin: 4px 4px 0 0; }
.ax-rv.is-done { opacity: .75; }
.ax-rv-b { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-signoff { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md, 15px); background: var(--surface); box-shadow: var(--shadow-sm); }
.ax-signoff label { display: flex; gap: 8px; align-items: center; }
.ax-signoff input { width: auto; }

/* Who can see what — simple views (flag access.simpleView) */
.ax-ws-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ax-ws-bar .ax-tabs { margin: 0; }
.ax-ws-modes button { display: inline-flex; align-items: center; gap: 6px; }
.ax-ws-person { display: grid; grid-template-columns: minmax(230px, 290px) 1fr; gap: 16px; align-items: start; }
.ax-ws-pick { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ax-ws-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100dvh - 300px); min-height: 200px; overflow-y: auto; padding: 4px; border-radius: var(--r-md, 15px); background: var(--surface); box-shadow: var(--shadow-sm); }
.ax-ws-li { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ax-ws-li:hover { background: var(--surface-hover); }
.ax-ws-li.on { background: color-mix(in srgb, var(--navy) 11%, transparent); box-shadow: inset 3px 0 0 var(--navy); }
.ax-ws-li:focus-visible, .ax-ba-p:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.ax-ws-li .ax-av { width: 30px; height: 30px; font-size: 11px; }
.ax-ws-li-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ax-ws-li-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-who2-n { font-weight: 650; }
.ax-who2 { display: flex; flex-direction: column; min-width: 0; }
.ax-dupdot { color: var(--warn); display: inline-flex; }
.ax-pc { padding: 18px 20px; border-radius: var(--r-md, 15px); background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0; }
.ax-pc-h { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ax-pc-h .ax-av { width: 44px; height: 44px; font-size: 15px; }
.ax-pc-id { flex: 1; min-width: 200px; }
.ax-pc-id h3 { margin: 0; font-size: 19px; font-weight: 700; }
.ax-pc-id h3:focus { outline: none; }
.ax-pc-id .ax-facts { margin: 8px 0 0; }
.ax-pc-sum { margin: 14px 0 6px; font-size: 14.5px; line-height: 1.5; }
.ax-pc-dept { margin-top: 16px; }
.ax-pc-dept h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2, var(--ink)); }
.ax-pc-dept h4 .ax-mut { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ax-pc-dept ul, .ax-ba ul { list-style: none; margin: 0; padding: 0; }
.ax-pc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-top: 1px solid var(--line); }
.ax-pc-row.is-extra { box-shadow: inset 3px 0 0 var(--ok); background: color-mix(in srgb, var(--ok) 5%, transparent); }
.ax-pc-row.is-removed { box-shadow: inset 3px 0 0 var(--bad); background: color-mix(in srgb, var(--bad) 5%, transparent); }
.ax-pc-area { flex: 1 1 180px; font-weight: 600; }
.ax-pc-note { flex-basis: 100%; }
.ax-pc-none { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--surface-hover); font-size: 13px; }
.ax-pc-none summary { cursor: pointer; font-weight: 600; }
.ax-pc-none p { margin: 8px 0 0; line-height: 1.5; }
.ax-lv .ax-ic { width: 13px; height: 13px; margin-right: 4px; }
.ax-lv-none { background: var(--surface-hover); color: var(--ink-2, var(--ink)); }
.ax-sens { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; color: color-mix(in srgb, var(--warn) 78%, var(--ink)); }
.ax-sens .ax-ic { width: 13px; height: 13px; color: var(--warn); }
.ax-tag .ax-ic { width: 12px; height: 12px; }
.ax-ba-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ax-ba-pick .ax-label { margin: 0; }
.ax-ba-pick select { min-width: 260px; width: auto; max-width: min(100%, 440px); }
.ax-ba-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ax-ba-h h3 { margin: 0; font-size: 19px; }
.ax-ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ax-ba-col, .ax-ba-cut { padding: 14px 14px 10px; border-radius: var(--r-md, 15px); background: var(--surface); box-shadow: var(--shadow-sm); border-top: 3px solid var(--line); }
.ax-ba-manage { border-top-color: var(--warn); } .ax-ba-edit { border-top-color: var(--ok); } .ax-ba-view { border-top-color: var(--navy); }
.ax-ba-cut { margin-top: 12px; border-top-color: var(--bad); }
.ax-ba-col h4, .ax-ba-cut h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.ax-ba-col > p, .ax-ba-cut > p { margin: 2px 0 8px; }
.ax-count { margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--surface-hover); font-size: 12px; text-align: center; }
.ax-ba li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.ax-ba-p { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 160px; min-width: 0; padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ax-ba-p:hover .ax-who2-n { color: var(--navy); text-decoration: underline; }
.ax-ba-empty { padding: 6px 0; }
.ax-gf { align-items: flex-end; }
.ax-gf .ax-search { flex: 1 1 220px; }
.ax-gf-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2, var(--ink)); }
.ax-gf-c { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding-bottom: 8px; }
.ax-gf-c input { width: auto; }
.ax-gf-c .ax-ic { color: var(--warn); }
.ax-legend2 { gap: 6px 16px; }
.ax-key2 { display: inline-flex; align-items: center; gap: 6px; }
.ax-gcount { margin: 0 0 8px; }
.tablecard.ax-gwrap { overflow: auto; max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); min-height: 280px; overscroll-behavior: contain; }
.ax-gwrap:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ax-grid { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ax-grid thead th { position: sticky; background: var(--surface); z-index: 2; }
.ax-gh1 th { top: 0; height: 30px; padding: 6px 8px 0; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2, var(--ink)); white-space: nowrap; }
.ax-gdept { border-left: 2px solid var(--line); }
.ax-gh2 th { top: 30px; min-width: 86px; max-width: 96px; padding: 6px 6px 8px; vertical-align: bottom; text-align: left; font-weight: 650; line-height: 1.25; border-bottom: 1px solid var(--line); }
.ax-gh2 th .ax-ic { display: inline-block; width: 12px; height: 12px; margin-left: 3px; color: var(--warn); vertical-align: -1px; }
.ax-gh2 th.ax-gfirst, .ax-gc.ax-gfirst { border-left: 2px solid var(--line); }
.ax-grid .ax-gsticky { position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left; min-width: 190px; max-width: 230px; padding: 8px 12px 8px 10px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); font-weight: 400; }
.ax-grid thead .ax-gsticky { z-index: 4; top: 0; vertical-align: bottom; font-weight: 650; }
.ax-gc { position: relative; min-width: 86px; height: 40px; padding: 0 6px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.ax-gc .ax-ic { width: 13px; height: 13px; margin-right: 4px; }
.ax-gc.ax-lv-view { background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--navy); }
.ax-gc.ax-lv-edit { background: color-mix(in srgb, var(--ok) 14%, transparent); color: color-mix(in srgb, var(--ok) 65%, var(--ink)); }
.ax-gc.ax-lv-manage { background: color-mix(in srgb, var(--warn) 14%, transparent); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.ax-gc.is-extra { box-shadow: inset 0 0 0 2px var(--ok); }
.ax-gc.is-removed { box-shadow: inset 0 0 0 2px var(--bad); color: var(--bad); }
.ax-gc-m, .ax-gc-demo { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; }
.ax-gc-m { position: absolute; top: 3px; right: 3px; }
.ax-gc.is-extra .ax-gc-m, .ax-gc-demo.is-extra { background: var(--ok); color: #fff; }
.ax-gc.is-removed .ax-gc-m, .ax-gc-demo.is-removed { background: var(--bad); color: #fff; }
.ax-gc:hover { filter: brightness(.96); }

@media (max-width: 900px) {
  .ax-ws-person { grid-template-columns: 1fr; }
  .ax-ws-pick { position: static; }
  .ax-ws-list { max-height: 210px; min-height: 0; }
  .ax-ba-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ax-hero .btn { width: 100%; }
  .ax-pc { padding: 14px; }
  .ax-pc-h .ax-push { margin-left: 0; width: 100%; }
  .ax-grid .ax-gsticky { min-width: 140px; max-width: 160px; }
  .ax-ba-pick select { min-width: 0; width: 100%; }
  .ax-history li { grid-template-columns: 1fr; gap: 2px; }
  .ax-matrix .ax-sticky { min-width: 120px; }
  .ax-nudge { left: 12px; right: 12px; max-width: none; }
}

.ax-mut .ax-ic, .ax-ask .ax-ic { margin-right: 3px; }
.ax-area-row:last-child, .ax-line:last-child, .ax-req:last-child { border-bottom: 0; }
.ax-lv-manage, .ax-cell.ax-lv-manage { background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* grid polish: full area names, quiet empty cells, legend icons keep their level colour */
.ax-gh2 th { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; min-width: 92px; max-width: 132px; }
.ax-gc.ax-lv-none { background: var(--surface); }
.ax-legend .ax-lv .ax-ic { color: inherit; }
.ax-grid .ax-gsticky { min-width: 220px; max-width: 260px; }
@media (max-width: 600px) { .ax-grid .ax-gsticky { min-width: 150px; max-width: 170px; } }
.ax-gf-f, .ax-gf-c { margin: 0; }
.ax-gf-f select { margin: 0; }
@media (max-width: 600px) {
  .ax-gf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ax-gf .ax-search { grid-column: 1 / -1; }
  .ax-gf-f select { width: 100%; min-width: 0; }
  .ax-gf-c { grid-column: 1 / -1; padding: 0; }
  .ax-legend2 { gap: 4px 12px; font-size: 12px; }
}