html[data-tkc-access="pending"] body { visibility: hidden !important; pointer-events: none !important; }
[data-tkc-forbidden] { display: none !important; }
html[data-tkc-access="denied"] { color-scheme: light; background: #f5f2ed; }
html[data-tkc-access="denied"] body { display: block !important; min-height: 100vh; margin: 0; color: #172332; background: #f5f2ed; font-family: Karla, Arial, sans-serif; }
#tkc-access-message { display: block; box-sizing: border-box; width: min(520px, calc(100% - 40px)); margin: 12vh auto; padding: 36px; background: #fff; border: 1px solid #dcd5cb; border-radius: 12px; }
#tkc-access-message h1 { font-size: 28px; margin: 26px 0 12px; line-height: 1.2; }
#tkc-access-message p { font-size: 16px; line-height: 1.6; color: #4a5563; }
#tkc-access-message a { display: inline-block; margin-top: 12px; padding: 12px 18px; background: #9e365f; color: #fff; border-radius: 6px; font-weight: 700; text-decoration: none; }
#tkc-access-message a:focus-visible { outline: 3px solid #172332; outline-offset: 4px; }

/* Super Admin role view banner. Uses the portal palette; no layout redesign. */
#tkc-role-view { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: #172332; color: #fff; font: 500 13px/1.4 Karla, system-ui, sans-serif; }
#tkc-role-view[data-active="yes"] { background: #9e365f; }
#tkc-role-view .tkc-role-view-label { font-weight: 700; letter-spacing: .02em; }
#tkc-role-view select { padding: 5px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,.4); background: #fff; color: #172332; font: inherit; }
#tkc-role-view button { padding: 5px 10px; border-radius: 5px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font: inherit; cursor: pointer; }
#tkc-role-view #tkc-role-view-note { flex: 1 1 200px; }
/* The banner is fixed to the bottom, so the app has to give up that much room
   or the banner sits on the side panel's Settings and Sign out. role-view.js
   keeps --bar equal to the banner's measured height, which grows when it wraps
   at narrow widths. */
html[data-tkc-role-bar] .app { padding-bottom: var(--bar); }
/* Pop-up windows and side panels inside the tool pages are fixed to the
   viewport too, so their footers land under the banner unless they give up the
   same room. Keep them above it at every width. */
html[data-tkc-role-bar] .modal-overlay { padding-bottom: calc(1rem + var(--bar)); box-sizing: border-box; }
html[data-tkc-role-bar] .modal { max-height: calc(90vh - var(--bar)); }
html[data-tkc-role-bar] .cmh-panel { bottom: var(--bar); }
html[data-tkc-role-bar] #toast { bottom: calc(20px + var(--bar)); }
html[data-tkc-role-bar] #tkc-statement-request { bottom: calc(18px + var(--bar)); }



/* Limited-role affordances. Matches the access palette above rather than the
   portal's gold, because these belong to the same family of access messages. */
#tkc-statement-request { position: fixed; right: 18px; bottom: 18px; z-index: 9998; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; background: #9e365f; color: #fff; border-radius: 8px; font: 700 13px/1.2 Karla, system-ui, sans-serif; text-decoration: none; box-shadow: 0 6px 20px -8px rgba(23,35,50,.55); }
#tkc-statement-request::before { content: "\2709"; font-weight: 400; }
#tkc-statement-request:hover { filter: brightness(1.08); }
#tkc-statement-request:focus-visible { outline: 3px solid #172332; outline-offset: 3px; }
[data-tkc-redacted] { font-variant-numeric: tabular-nums; color: #6b7280; }
input[data-tkc-redacted], input[data-tkc-readonly], select[data-tkc-readonly], textarea[data-tkc-readonly] { background: #f1f0ee !important; color: #6b7280 !important; cursor: not-allowed; }
button[data-tkc-restriction] { opacity: .45; cursor: not-allowed; }