/* The IOX design system, laid over the site (operator, 2026-10-12). Read from the IOX Design System Figma file (fpLDI3wrKTvQCzbEq1WXb9): colours from its palette page, which web/src/styles/palette.css already carries and a test pins this file to; type, radii, shadows and components from its pages. **Every rule below is scoped to :root[data-theme="iox"]** — set by theme.js before the first paint — except the one that hides IOX-only markup when IOX is not chosen. So Classic is the report's own stylesheet, untouched, and the downloadable report (which carries no slot, so neither this file nor any IOX markup) is always Classic. Decisions on the file's own gaps (operator, 2026-10-12): - shadows are the Styling page's DOCUMENTED values, not the styles as built; - headings use the file's MOBILE scale in the app (26/40, 24/32, 22/32, 20/32); - risk categories are pills: execution navy, float collapse light blue, financial amber. Red and green pills are an EXTENSION on the amber pill's pattern (the file has none): Red/50 and Green/50 behind dark text; - amber, green and Tiffany are never text on a light background (they fail WCAG AA there); muted text is Neutrals/600. */ /* ------------------------------------------------------------------ fonts */ @font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/static/fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* The one rule that is not scoped: IOX markup is hidden unless IOX is chosen, which is also what a reader without script gets. */ :root:not([data-theme="iox"]) .iox-only { display: none !important; } :root[data-theme="iox"] .classic-only { display: none !important; } /* ----------------------------------------------------------------- tokens */ :root[data-theme="iox"], :root[data-theme="iox"] .login-page { /* palette (web/src/styles/palette.css) */ --pagent-blue-50: #E6E9EE; --pagent-blue-400: #4F6A8D; --pagent-blue-700: #1F416A; --pagent-blue-900: #142845; --open-air-50: #E2EDF7; --open-air-100: #B9D2EB; --open-air-200: #8FB7DE; --neutral-50: #F5F5F5; --neutral-100: #E9E9E9; --neutral-300: #C4C4C4; --neutral-600: #555555; --neutral-700: #434343; --neutral-800: #262626; --red-50: #F8CCD7; --red-300: #C32A4F; --amber-50: #FAEBD3; --amber-100: #F5D6A7; --amber-300: #DFA247; --green-50: #C8E5D5; --green-300: #408435; --bg-cloud-dancer: #F0EEE9; --radius: 16px; --radius-sm: 8px; --radius-pill: 30px; /* the Styling page's documented shadows */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .12); --shadow-2: 0 4px 8px rgba(0, 0, 0, .10); --shadow-3: inset 1px 2px 2px rgba(0, 0, 0, .08); --shadow-4: 0 16px 48px rgba(0, 0, 0, .35); --top: 64px; /* the report's and the site's own variables, re-pointed */ --teal: var(--pagent-blue-900); --ink: var(--neutral-800); --muted: var(--neutral-600); --rule: var(--neutral-100); --soft: var(--neutral-50); --red: var(--red-300); --green: var(--green-300); --amber: var(--amber-300); --absent: var(--pagent-blue-400); --cat-execution: var(--pagent-blue-900); --cat-float_collapse: var(--open-air-50); --cat-financial: var(--amber-50); --teal-dk: var(--pagent-blue-700); --teal-lt: var(--open-air-50); --serif: "Poppins", "Inter", system-ui, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } /* ------------------------------------------------------------------- page */ :root[data-theme="iox"] body { background: var(--bg-cloud-dancer); font: 14px/24px var(--sans); color: var(--ink); padding-top: var(--top); } :root[data-theme="iox"] h1, :root[data-theme="iox"] h2, :root[data-theme="iox"] h3, :root[data-theme="iox"] h4 { font-family: var(--serif); color: var(--teal); } :root[data-theme="iox"] h1.title { font: 500 32px/48px var(--serif); margin: 8px 0 8px; } :root[data-theme="iox"] h2 { font: 700 26px/40px var(--serif); border-bottom: 0; padding-bottom: 0; margin: 0; } :root[data-theme="iox"] h3 { font: 600 20px/32px var(--serif); } :root[data-theme="iox"] h4 { font: 600 16px/24px var(--serif); } :root[data-theme="iox"] a { color: var(--teal); } :root[data-theme="iox"] code { border-radius: 4px; } :root[data-theme="iox"] section, :root[data-theme="iox"] h2, :root[data-theme="iox"] .dive, :root[data-theme="iox"] .dive-row, :root[data-theme="iox"] .bibliography li { scroll-margin-top: calc(var(--top) + 16px); } :root[data-theme="iox"] .lede { font-size: 16px; line-height: 24px; } :root[data-theme="iox"] .note, :root[data-theme="iox"] .table-head { font-size: 14px; color: var(--muted); } /* ---------------------------------------------------------------- top bar */ :root[data-theme="iox"] .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--top); z-index: 25; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: var(--pagent-blue-900); color: #fff; } :root[data-theme="iox"] .topbar-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; } :root[data-theme="iox"] .topbar-logo { height: 24px; width: auto; display: block; } :root[data-theme="iox"] .topbar-name { font: 600 16px/24px var(--serif); color: #fff; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .3); } :root[data-theme="iox"] .topbar-pick { margin-left: auto; display: flex; align-items: center; gap: 8px; } :root[data-theme="iox"] .topbar-pick label { font-size: 12px; line-height: 16px; color: var(--neutral-100); } :root[data-theme="iox"] .topbar-pick select { height: 40px; min-width: 200px; padding: 0 16px; font: 400 14px var(--sans); color: var(--ink); background: #fff; border: 0; border-radius: var(--radius); } :root[data-theme="iox"] .topbar form { margin: 0; } :root[data-theme="iox"] .topbar-out { height: 32px; padding: 0 16px; border: 1px solid #fff; border-radius: var(--radius); background: transparent; color: #fff; font: 400 12px/16px var(--sans); cursor: pointer; } :root[data-theme="iox"] .topbar-out:hover { background: #fff; color: var(--pagent-blue-900); } /* ---------------------------------------------------------------- sidebar */ :root[data-theme="iox"] .sidebar { top: var(--top); background: #fff; border-right: 1px solid var(--rule); } :root[data-theme="iox"] .side-brand { padding: 20px 20px 12px; border-bottom: 0; } /* the brand is the top bar's; the sidebar names the project and its week */ :root[data-theme="iox"] .side-brand .side-logo, :root[data-theme="iox"] .side-brand .iox-logo { display: none; } :root[data-theme="iox"] .side-title { font: 600 16px/24px var(--serif); color: var(--teal); } :root[data-theme="iox"] .side-week { font-size: 12px; line-height: 16px; color: var(--muted); } :root[data-theme="iox"] .side-pick { display: none; } /* the top bar carries the picker */ :root[data-theme="iox"] .side-nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; } :root[data-theme="iox"] .side-nav a { padding: 8px 16px; border-left: 0; border-radius: var(--radius); color: #000; font-weight: 300; font-size: 14px; line-height: 24px; } :root[data-theme="iox"] .side-nav a:hover { background: var(--neutral-50); font-weight: 400; } :root[data-theme="iox"] .side-nav a.on { background: var(--bg-cloud-dancer); color: #000; font-weight: 400; } :root[data-theme="iox"] .side-nav a.on .side-no, :root[data-theme="iox"] .side-no { color: var(--muted); } :root[data-theme="iox"] .side-foot { border-top: 1px solid var(--rule); padding: 12px; display: flex; flex-direction: column; gap: 2px; } :root[data-theme="iox"] .side-foot form { display: none; } /* sign out is in the top bar */ :root[data-theme="iox"] .side-link { padding: 8px 16px; border-radius: var(--radius); color: #000; font: 300 14px/24px var(--sans); } :root[data-theme="iox"] .side-link:hover { background: var(--neutral-50); } :root[data-theme="iox"] .side-link.is-here { background: var(--bg-cloud-dancer); color: #000; font-weight: 400; box-shadow: none; } :root[data-theme="iox"] .side-link.is-here:hover { background: var(--bg-cloud-dancer); } /* the design switch: a segmented control of two nav-sized items */ :root[data-theme="iox"] .theme-switch { margin: 8px 4px 0; padding: 4px; gap: 4px; border: 0; background: var(--neutral-50); border-radius: var(--radius); } :root[data-theme="iox"] .theme-switch-label { display: none; } :root[data-theme="iox"] .theme-switch button { flex: 1; height: 32px; border: 0; border-radius: var(--radius); background: transparent; color: var(--neutral-700); font: 400 12px/16px var(--sans); } :root[data-theme="iox"] .theme-switch button:hover { background: #fff; } :root[data-theme="iox"] .theme-switch button[aria-pressed="true"] { background: var(--pagent-blue-900); color: #fff; } @media (max-width: 1000px) { :root[data-theme="iox"] .topbar { padding-left: 132px; } :root[data-theme="iox"] .topbar-name { display: none; } :root[data-theme="iox"] .topbar-pick label { display: none; } :root[data-theme="iox"] .topbar-pick select { min-width: 0; max-width: 46vw; } :root[data-theme="iox"] .sidebar { padding-top: 0; } :root[data-theme="iox"] .sidebar.open { box-shadow: var(--shadow-4); } :root[data-theme="iox"] .side-toggle { top: 12px; left: 16px; z-index: 26; height: 40px; padding: 0 16px; background: #fff; color: var(--pagent-blue-900); border-radius: var(--radius); font: 400 14px var(--sans); } :root[data-theme="iox"] .report { padding-top: 24px; } } /* A phone has no room for the picker beside the logo and sign out: it moves back into the sidebar, which the Contents button opens. */ @media (max-width: 600px) { :root[data-theme="iox"] .report { padding: 16px 12px 32px; } :root[data-theme="iox"] .report section { padding: 12px 16px; } :root[data-theme="iox"] .topbar { gap: 12px; padding-right: 12px; } :root[data-theme="iox"] .topbar-pick { display: none; } :root[data-theme="iox"] .topbar form { margin-left: auto; } :root[data-theme="iox"] .topbar-out { padding: 0 12px; } :root[data-theme="iox"] .side-pick { display: block; padding: 4px 20px 12px; border-bottom: 0; } :root[data-theme="iox"] .side-pick label { font-size: 12px; text-transform: none; letter-spacing: 0; } :root[data-theme="iox"] .side-pick select { height: 40px; padding: 0 12px; border: 1px solid var(--neutral-100); border-radius: var(--radius); font: 400 14px var(--sans); } } /* ----------------------------------------------------- sections as cards */ :root[data-theme="iox"] .report { padding: 24px 24px 48px; } :root[data-theme="iox"] .masthead { padding: 8px 0 16px; } :root[data-theme="iox"] .masthead .logo { display: none; } :root[data-theme="iox"] .masthead .iox-logo { height: 40px; width: auto; display: block; } :root[data-theme="iox"] .letterhead strong { color: var(--teal); font-weight: 600; } :root[data-theme="iox"] .report section { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 16px 32px; margin: 0 0 16px; } :root[data-theme="iox"] details.fold > summary h2 { align-items: center; } :root[data-theme="iox"] details.fold > summary h2::after { content: ""; width: 8px; height: 8px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 8px 4px auto; } :root[data-theme="iox"] details.fold:not([open]) > summary h2::after, :root[data-theme="iox"] details.fold.is-closing > summary h2::after { transform: rotate(-45deg); margin-bottom: 0; } :root[data-theme="iox"] .fold-body { padding-top: 16px; } :root[data-theme="iox"] .sec-no { color: var(--muted); font-weight: 500; } /* -------------------------------------------------------------- cards */ :root[data-theme="iox"] .card, :root[data-theme="iox"] .tier { border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; padding: 16px 20px; } :root[data-theme="iox"] a.card:hover { border-color: var(--teal); box-shadow: var(--shadow-2); } :root[data-theme="iox"] .card-kicker { font-size: 12px; line-height: 16px; color: var(--muted); } :root[data-theme="iox"] .card-figure { font: 600 24px/32px var(--serif); color: var(--teal); } :root[data-theme="iox"] .card-link { color: var(--teal); font-weight: 500; } :root[data-theme="iox"] .act-task { font-weight: 600; } :root[data-theme="iox"] .example { background: var(--neutral-50); border-left: 0; border-radius: var(--radius-sm); } :root[data-theme="iox"] .absent { border: 1px dashed var(--pagent-blue-400); border-radius: var(--radius); background: #fff; } :root[data-theme="iox"] .absent-head { color: var(--teal); } :root[data-theme="iox"] .dive-unanswered p, :root[data-theme="iox"] .cite-unresolved { color: var(--ink); background: var(--amber-50); border-left: 0; border-radius: var(--radius-sm); } /* ----------------------------------------------------- pills and status */ :root[data-theme="iox"] .cat, :root[data-theme="iox"] .pill, :root[data-theme="iox"] .action, :root[data-theme="iox"] .grade, :root[data-theme="iox"] .check-rag, :root[data-theme="iox"] .tier-state, :root[data-theme="iox"] .dive-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); font: 400 12px/16px var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: middle; } :root[data-theme="iox"] .cat-execution { background: var(--pagent-blue-900); color: #fff; } :root[data-theme="iox"] .cat-float_collapse { background: var(--open-air-50); color: #000; } :root[data-theme="iox"] .cat-financial, :root[data-theme="iox"] .cat-commercial { background: var(--amber-50); color: #000; } :root[data-theme="iox"] .pill { background: var(--neutral-50); color: var(--ink); } :root[data-theme="iox"] .pill-what-if { background: var(--open-air-50); color: var(--teal); } /* red, amber and green as pills behind dark text: the file's amber pill, extended */ :root[data-theme="iox"] .action-act, :root[data-theme="iox"] .grade-red, :root[data-theme="iox"] .grade-poor, :root[data-theme="iox"] .grade-very, :root[data-theme="iox"] .check-red .check-rag, :root[data-theme="iox"] .tier-locked .tier-state { background: var(--red-50); color: var(--ink); } :root[data-theme="iox"] .action-monitor, :root[data-theme="iox"] .action-financial, :root[data-theme="iox"] .grade-amber, :root[data-theme="iox"] .grade-moderate, :root[data-theme="iox"] .check-amber .check-rag { background: var(--amber-50); color: var(--ink); } :root[data-theme="iox"] .grade-green, :root[data-theme="iox"] .grade-strong, :root[data-theme="iox"] .check-green .check-rag, :root[data-theme="iox"] .tier-unlocked .tier-state { background: var(--green-50); color: var(--ink); } :root[data-theme="iox"] .action-track, :root[data-theme="iox"] .tier-undetermined .tier-state { background: var(--neutral-50); color: var(--ink); } :root[data-theme="iox"] .tier-state { margin-bottom: 8px; } :root[data-theme="iox"] .unstated { color: var(--pagent-blue-400); } /* ---------------------------------------------------------------- tables */ :root[data-theme="iox"] table { font-size: 14px; } :root[data-theme="iox"] th { background: transparent; color: var(--teal); font: 600 12px/16px var(--sans); padding: 16px 8px 8px; border-bottom: 1px solid var(--open-air-50); } :root[data-theme="iox"] th .tip { border-bottom-color: currentColor; } :root[data-theme="iox"] td { padding: 16px 8px; border-bottom: 0; border-top: 1px solid var(--open-air-50); line-height: 24px; } :root[data-theme="iox"] table:not(.ranked-table) > tbody > tr:nth-child(even) > td, :root[data-theme="iox"] .ranked-table tr.alt > td { background: transparent; } :root[data-theme="iox"] .violations th { background: transparent; color: var(--teal); } :root[data-theme="iox"] .task-name { font-weight: 500; } /* the rank badge: the first filled, the rest outlined */ :root[data-theme="iox"] .pos-n { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); border: .5px solid var(--teal); color: var(--teal); font-size: 12px; line-height: 16px; } :root[data-theme="iox"] .ranked-table tbody > tr.flag:first-child .pos-n { background: var(--teal); color: #fff; } :root[data-theme="iox"] td.pos { text-align: left; } /* the deep-dive toggle: a navy pill and a chevron */ :root[data-theme="iox"] .dive-badge { background: #fff; color: var(--teal); border: 1px solid var(--teal); } :root[data-theme="iox"] .dive-toggle[aria-expanded="true"] .dive-badge { background: var(--teal); color: #fff; } :root[data-theme="iox"] .chev { border-left-color: var(--teal); } :root[data-theme="iox"] tr.has-dive:hover > td { background: var(--neutral-50); } :root[data-theme="iox"] .dive-row > td { background: var(--neutral-50); padding: 0; border-top: 0; } :root[data-theme="iox"] .dive-inner { padding: 8px 16px 16px; } :root[data-theme="iox"].js .dive-row:not(.open) .dive-inner { padding-top: 0; padding-bottom: 0; } @media print { :root[data-theme="iox"].js .dive-row:not(.open) .dive-inner { padding: 8px 16px 16px; } } /* ----------------------------------------------------------- deep dives */ :root[data-theme="iox"] .dive { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: #fff; } :root[data-theme="iox"] .dive-head { padding: 16px 24px 12px; border-bottom: 1px solid var(--rule); } :root[data-theme="iox"] .dive-head h3 { font: 600 20px/32px var(--serif); } :root[data-theme="iox"] .dive-face { padding: 16px 24px; } :root[data-theme="iox"] .dive-meta { padding: 8px 24px; font-size: 12px; line-height: 16px; } :root[data-theme="iox"] a.cite { color: var(--teal); font-weight: 500; } :root[data-theme="iox"] a.cite:hover, :root[data-theme="iox"] a.cite:focus { background: var(--open-air-50); } :root[data-theme="iox"] .passage-back { height: 24px; padding: 0 16px; border: 1px solid var(--teal); border-radius: var(--radius); background: transparent; color: var(--teal); font: 400 12px/16px var(--sans); } :root[data-theme="iox"] .passage-back:hover { background: var(--teal); color: #fff; } :root[data-theme="iox"] .passage-text mark { background: var(--amber-50); } :root[data-theme="iox"] .bibliography .cite-n { color: var(--teal); font-weight: 600; } /* ------------------------------------------------- explainers and tooltips */ :root[data-theme="iox"] details:not(.fold) > summary { color: var(--teal); font-weight: 500; } :root[data-theme="iox"] .tip:hover::after, :root[data-theme="iox"] .tip:focus::after { padding: 12px 16px; border-radius: var(--radius); background: var(--open-air-50); color: var(--teal); font: 300 12px/16px var(--sans); box-shadow: var(--shadow-2); } /* ---------------------------------------------------------------- footer */ :root[data-theme="iox"] .colophon { border-top: 0; font-size: 12px; line-height: 16px; } :root[data-theme="iox"] .letterhead-footer { display: none; } :root[data-theme="iox"] .iox-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 16px; padding: 40px; background: var(--pagent-blue-900); border-radius: var(--radius-pill); } :root[data-theme="iox"] .iox-footer img { height: 40px; width: auto; display: block; } :root[data-theme="iox"] .iox-footer p { margin: 0; font: 300 12px/16px var(--sans); color: var(--neutral-100); } /* ------------------------------------------------------- buttons, inputs */ :root[data-theme="iox"] .qa-form button, :root[data-theme="iox"] .login-card button, :root[data-theme="iox"] .term-send { height: 40px; padding: 0 24px; border: 1px solid var(--pagent-blue-900); border-radius: var(--radius); background: var(--pagent-blue-900); color: #fff; font: 400 14px/24px var(--sans); cursor: pointer; } :root[data-theme="iox"] .qa-form button:hover, :root[data-theme="iox"] .login-card button:hover, :root[data-theme="iox"] .term-send:hover { background: #fff; color: #000; } :root[data-theme="iox"] .qa-form button:disabled, :root[data-theme="iox"] .term-send:disabled { background: var(--neutral-300); border-color: var(--neutral-300); color: #fff; } :root[data-theme="iox"] .qa-form textarea, :root[data-theme="iox"] .login-card input { border: 1px solid var(--neutral-100); border-radius: var(--radius); padding: 12px 16px; font: 400 14px/24px var(--sans); } :root[data-theme="iox"] .qa-form textarea:focus, :root[data-theme="iox"] .login-card input:focus { outline: none; border: 1.5px solid var(--neutral-800); } :root[data-theme="iox"] ::placeholder { color: var(--neutral-600); font-style: italic; } /* ----------------------------------------------------------------- Q&A Bot */ :root[data-theme="iox"] .qa-fab { border-radius: var(--radius-pill); background: var(--pagent-blue-900); box-shadow: var(--shadow-2); } :root[data-theme="iox"] .qa-fab:hover, :root[data-theme="iox"] .qa-fab:focus-visible { background: var(--pagent-blue-700); } :root[data-theme="iox"] .qa-panel { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-4); overflow: hidden; font: 14px/24px var(--sans); } :root[data-theme="iox"] .qa-head { padding: 12px 16px; } :root[data-theme="iox"] .qa-title { font: 600 16px/24px var(--serif); } :root[data-theme="iox"] .qa-msg { border-radius: var(--radius); } :root[data-theme="iox"] .qa-user { background: var(--pagent-blue-900); border-bottom-right-radius: 4px; } :root[data-theme="iox"] .qa-bot { background: var(--neutral-50); border-left: 0; border-bottom-left-radius: 4px; } :root[data-theme="iox"] .qa-bot.qa-error { background: var(--red-50); } :root[data-theme="iox"] .qa-form { align-items: flex-end; } @media (max-width: 600px) { :root[data-theme="iox"] .qa-panel { border-radius: 0; } } /* ------------------------------------------------------------- the terminal */ :root[data-theme="iox"] .term { font: 14px/24px var(--sans); } :root[data-theme="iox"] .term-top { border-bottom: 1px solid var(--rule); } :root[data-theme="iox"] .term-title { font: 600 16px/24px var(--serif); } :root[data-theme="iox"] .term-mark-iox { height: 40px; width: auto; margin: 0 auto 16px; } :root[data-theme="iox"] .term-welcome h1 { font: 500 32px/48px var(--serif); } :root[data-theme="iox"] .term-example { padding: 8px 16px; border: 1px solid var(--neutral-100); border-radius: var(--radius); background: #fff; color: var(--teal); font: 400 12px/16px var(--sans); } :root[data-theme="iox"] .term-example:hover { background: var(--open-air-50); border-color: var(--open-air-50); } :root[data-theme="iox"] .term-form { background: linear-gradient(rgba(240, 238, 233, 0), var(--bg-cloud-dancer) 14px); } :root[data-theme="iox"] .term.is-empty .term-form { background: none; } :root[data-theme="iox"] .term-box { border: 1px solid var(--neutral-100); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 12px 16px 8px; } :root[data-theme="iox"] .term-box:focus-within { border: 1.5px solid var(--neutral-800); } :root[data-theme="iox"] #term-input { font: 400 14px/24px var(--sans); } :root[data-theme="iox"] .term-level { font-size: 12px; text-transform: none; letter-spacing: 0; } :root[data-theme="iox"] .term-level select { height: 32px; padding: 0 12px; border: 1px solid var(--neutral-100); border-radius: var(--radius); font: 400 12px var(--sans); } :root[data-theme="iox"] .term-stop { height: 40px; padding: 0 24px; border: 1px solid var(--red-300); border-radius: var(--radius); background: #fff; color: var(--red-300); font: 400 14px/24px var(--sans); } :root[data-theme="iox"] .term-q { background: var(--open-air-50); border: 0; color: var(--teal); border-radius: var(--radius) var(--radius) 4px var(--radius); padding: 8px 16px; } :root[data-theme="iox"] .term-a th { background: transparent; color: var(--teal); font: 600 12px/16px var(--sans); } :root[data-theme="iox"] .term-a th, :root[data-theme="iox"] .term-a td { border: 0; border-top: 1px solid var(--open-air-50); padding: 8px; } :root[data-theme="iox"] .term-now::before { border-color: var(--rule); border-top-color: var(--teal); } :root[data-theme="iox"] .term-steps li.is-round { font-weight: 600; } :root[data-theme="iox"] .term-cite { height: 18px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: var(--open-air-50); color: var(--teal); font: 500 11px/18px var(--sans); } :root[data-theme="iox"] .term-cite:hover, :root[data-theme="iox"] .term-cite[aria-expanded="true"] { background: var(--teal); color: #fff; } :root[data-theme="iox"] .term-pop { border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-2); padding: 12px 16px; } :root[data-theme="iox"] .term-pop h4 { font: 600 14px/24px var(--sans); } :root[data-theme="iox"] .term-pop mark { background: var(--amber-50); } :root[data-theme="iox"] .term-copy { height: 24px; padding: 0 12px; border: 1px solid var(--teal); border-radius: var(--radius); color: var(--teal); font: 400 12px var(--sans); } :root[data-theme="iox"] .term-copy:hover { background: var(--teal); color: #fff; } @media (max-width: 1000px) { :root[data-theme="iox"] .term { padding-top: 14px; } } @media (max-width: 600px) { :root[data-theme="iox"] .term-welcome h1 { font: 500 26px/40px var(--serif); } } /* ------------------------------------------------------------------ login */ :root[data-theme="iox"] .login-page { padding-top: 16px; background: var(--bg-cloud-dancer); font: 14px/24px var(--sans); } :root[data-theme="iox"] .login-card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 40px; } :root[data-theme="iox"] .login-iox { height: 40px; width: auto; display: block; margin-bottom: 24px; } :root[data-theme="iox"] .login-card h1 { font: 700 26px/40px var(--serif); } :root[data-theme="iox"] .login-sub { color: var(--muted); } :root[data-theme="iox"] .login-card label { font: 400 12px/16px var(--sans); color: var(--neutral-700); margin-bottom: 8px; } :root[data-theme="iox"] .login-card input { height: 48px; margin-bottom: 16px; } :root[data-theme="iox"] .login-card button { height: 48px; width: 100%; } :root[data-theme="iox"] .login-error { color: var(--red-300); font-weight: 500; } /* ------------------------------------------------------------------ print */ @media print { :root[data-theme="iox"] body { padding-top: 0 !important; background: #fff; } :root[data-theme="iox"] .topbar { display: none !important; } :root[data-theme="iox"] .report section { box-shadow: none; border: 1px solid var(--rule); } }