/* Admin console — reset, typography defaults, focus ring, .visually-hidden, skip-link, no-js baseline, <768px tablet/desktop gate. Loads after tokens-admin.css. Desktop 1440 + tablet 1024 only — see admin-shell.css. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--a-surface-app); color: var(--a-text-primary); font-family: var(--a-font-sans); font-size: var(--a-font-size-body); line-height: var(--a-line-height-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--a-weight-bold); text-wrap: pretty; } p, figure { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: var(--a-text-link); text-decoration: none; } a:hover { color: var(--a-text-link-hover); } input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; } /* ---------- Focus ---------- */ /* Never removed. 2px solid, 2px offset, on every interactive element. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--a-focus-ring); outline-offset: 2px; } /* ---------- Utilities ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -48px; left: var(--a-space-4); z-index: var(--a-z-dialog); padding: 12px 20px; background: var(--a-action-primary); color: var(--a-action-primary-fg); font-size: var(--a-font-size-body); font-weight: var(--a-weight-medium); border-radius: var(--a-radius-control); transition: top var(--a-duration-fast) var(--a-easing-standard); } .skip-link:focus { top: var(--a-space-4); } #work:focus-visible { outline: none; } /* ---------- No-JS baseline ---------- */ /* , removed by an inline head script as soon as JS runs. Every rule below must keep reading a case and its full context usable with JavaScript disabled — see demo/README.md decision E/F. */ .no-js [data-js-only] { display: none !important; } .no-js [data-dialog] { position: static !important; visibility: visible !important; transform: none !important; box-shadow: none !important; inset: auto !important; background: none !important; margin: var(--a-space-4) 0 !important; } .no-js [data-dialog-scrim] { display: none !important; } .no-js [data-tabpanel] { display: block !important; } /* Real content tabs (groups.html/knowledge.html) hide their tablist and show plain stacked headings instead — see [data-tabpanel-heading] below. The case-list filter tabs (index.html) are NOT marked [data-content-tabs]: they stay visible without JS, same precedent as the public site's before/after toggle — inert but not misleading, since every row is already shown unfiltered (decision E). */ .no-js [data-content-tabs] { display: none !important; } .no-js [data-tabpanel-heading] { display: block !important; } .no-js [data-noscript-note] { display: block !important; } [data-noscript-note] { display: none; } /* ---------- Tablet/desktop gate (<768px, out of scope by spec) ---------- */ .phone-gate { display: none; } @media (max-width: 767px) { .app-shell { display: none !important; } .phone-gate { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--a-space-6); background: var(--a-surface-app); } .phone-gate__card { max-width: 320px; text-align: center; padding: var(--a-space-6); background: var(--a-surface-raised); border: 1px solid var(--a-border-default); border-radius: var(--a-radius-surface); } .phone-gate__title { font-size: var(--a-font-size-panel-title); font-weight: var(--a-weight-bold); } .phone-gate__text { margin-top: var(--a-space-3); font-size: var(--a-font-size-body-sm); color: var(--a-text-secondary); line-height: 1.7; } .phone-gate__link { margin-top: var(--a-space-5); display: inline-flex; align-items: center; justify-content: center; min-height: var(--a-min-hit-touch); padding: 0 var(--a-space-5); background: var(--a-action-primary); color: var(--a-action-primary-fg); border-radius: var(--a-radius-control); font-size: var(--a-font-size-body-sm); font-weight: var(--a-weight-medium); } }