/* ========================================================================= Thermo International — IS001B Troubleshooter Theme tokens driven by [data-theme="light"|"dark"] on . ========================================================================= */ :root { --brand: #1e63b8; --brand-2: #2a7fd6; --brand-ink: #0a2747; --accent: #f59e0b; --warning: #f59e0b; --critical: #ef4444; --success: #10b981; --info: #38bdf8; --r-sm: 6px; --r: 10px; --r-lg: 14px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.14); --header-h: 60px; --sidebar-w: 240px; --content-max: 880px; } /* ---- Light (default) ---- */ :root, [data-theme="light"] { --bg: #f5f7fb; --surface: #ffffff; --surface-2: #f1f4f9; --surface-3: #e7ecf3; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-dim: #475569; --text-faint: #64748b; --link: var(--brand); --shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } /* ---- Dark ---- */ [data-theme="dark"] { --bg: #0b1220; --surface: #131c2e; --surface-2: #1a2540; --surface-3: #243153; --border: #2a3552; --border-strong: #3d4a6b; --text: #e6ecf5; --text-dim: #94a3b8; --text-faint: #64748b; --link: #66a8ff; --shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } /* ---- Reset ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; } a { color: var(--link); } hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; } /* ========================================================================= App shells ========================================================================= */ .app { display: flex; flex-direction: column; min-height: 100vh; } .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .shell > .content-area { min-width: 0; } .sidebar-overlay { display: none; } /* ========================================================================= Header ========================================================================= */ .header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); } .brand-logo { height: 32px; width: auto; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-name { font-weight: 700; letter-spacing: 0.2px; font-size: 14px; } .brand-sub { color: var(--text-dim); font-size: 12px; } .header-actions { display: flex; align-items: center; gap: 8px; } .user-pill { font-size: 13px; color: var(--text-dim); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; } /* ========================================================================= Sidebar (admin) ========================================================================= */ .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 10px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .sidebar-brand .brand-text { width: 100%; } .sidebar-brand img { width: 80%; } .sidebar-brand .brand-name { font-size: 13px; } .sidebar-brand .brand-sub { font-size: 11px; } .nav-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-faint); padding: 12px 12px 6px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--text-dim); font-size: 14px; font-weight: 500; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; } .nav-link:hover { background: var(--surface-2); color: var(--text); } .nav-link.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } .nav-link .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.55; } .sidebar-spacer { flex: 1; } .sidebar-footer { padding: 8px 10px; font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--border); } /* ========================================================================= Main content ========================================================================= */ .main { padding: 24px clamp(16px, 3vw, 36px); flex: 1; width: 100%; } .main-narrow { max-width: var(--content-max); margin: 0 auto; } .page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.2px; } .page-sub { color: var(--text-dim); margin: 0 0 20px; font-size: 14px; } .section { display: none; } .section.active { display: block; } /* ========================================================================= Card / surfaces ========================================================================= */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; } .card .card-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 16px; } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--brand); color: #fff; border: 1px solid var(--brand); padding: 9px 14px; border-radius: 8px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1; transition: filter 0.12s ease, transform 0.04s ease; text-decoration: none; } .btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); filter: none; } .btn-subtle { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn-subtle:hover { background: var(--surface-3); filter: none; } .btn-danger { background: var(--critical); border-color: var(--critical); color: #fff; } .btn-sm { padding: 6px 10px; font-size: 13px; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 8px; } /* ========================================================================= Inputs ========================================================================= */ .input, .select, .textarea { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 16px; /* >=16px prevents iOS zoom on focus */ transition: border-color 0.12s ease, box-shadow 0.12s ease; } @media (min-width: 768px) { .input, .select, .textarea { font-size: 14px; padding: 9px 12px; } } .textarea { font-family: "IBM Plex Mono", monospace; line-height: 1.5; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); } .label { display: block; font-size: 12px; font-weight: 500; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.2px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row-wrap { flex-wrap: wrap; } .row-nowrap { flex-wrap: nowrap; } .row-end { align-items: flex-end; } .spacer { flex: 1; } .stack { display: flex; flex-direction: column; gap: 12px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } } /* ========================================================================= Tables ========================================================================= */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } table.admin { width: 100%; border-collapse: collapse; font-size: 14px; } table.admin th, table.admin td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); } table.admin tbody tr:last-child td { border-bottom: 0; } table.admin th { color: var(--text-dim); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--surface-2); } table.admin tbody tr:hover { background: var(--surface-2); } /* ========================================================================= Badges, severity ========================================================================= */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); } .badge.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); } .badge.warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); } .badge.critical { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 35%, transparent); } .badge.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); } .severity-warning { color: var(--warning); } .severity-critical { color: var(--critical); } .severity-info { color: var(--info); } .severity-success { color: var(--success); } /* ========================================================================= Troubleshooter (client) ========================================================================= */ .ts-shell { max-width: 720px; margin: 0 auto; padding: 16px; } .crumbs { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; letter-spacing: 0.2px; } .answer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .answer { padding: 13px 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: inherit; font-size: 14.5px; font-weight: 500; transition: border-color 0.12s, background 0.12s, transform 0.04s; } .answer:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); } .answer:active { transform: translateY(1px); } .error { color: var(--critical); margin-top: 8px; font-size: 13px; } .muted { color: var(--text-dim); } /* ========================================================================= Misc ========================================================================= */ details.node-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); } details.node-card[open] { box-shadow: var(--shadow-sm); } details.node-card > summary { cursor: pointer; font-weight: 500; font-size: 14px; padding: 2px 0; } .kbd { font-family: "IBM Plex Mono", monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; } /* Theme toggle */ .theme-toggle { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; } .theme-toggle:hover { background: var(--surface-3); } /* Responsive sidebar collapse */ @media (max-width: 860px) { .shell { grid-template-columns: 1fr; min-width: 0; } .shell > .content-area { min-width: 0; overflow-x: hidden; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-lg); z-index: 30; } .sidebar.open { transform: translateX(0); } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 25; } .sidebar.open + .sidebar-overlay { display: block; } .menu-btn { display: inline-flex; } } @media (min-width: 861px) { .menu-btn { display: none; } } .menu-btn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 18px; line-height: 1; } /* ========================================================================= Mobile / small-screen adjustments ========================================================================= */ @media (max-width: 720px) { body { font-size: 15px; } /* Admin top header on mobile: prioritise the section name */ .content-area > .header > .row { min-width: 0; flex: 1; } .content-area > .header #page-heading { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; } /* Header: tighter padding, smaller logo */ .header { padding: 0 12px; height: 56px; } .brand-logo { height: 26px; } .brand-name { font-size: 13px; } .brand-sub { font-size: 11px; } .header-actions { gap: 6px; } /* Hide email pill on tiny screens — admin users see it in the sidebar footer */ .user-pill { display: none; } /* Buttons get a touchable minimum */ .btn { padding: 10px 14px; font-size: 14px; } .btn-sm { padding: 8px 11px; font-size: 13px; } .theme-toggle, .menu-btn { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* Cards: less padding */ .card { padding: 16px; border-radius: 10px; } .card h2 { font-size: 15px; } /* Page header */ .page-title { font-size: 19px; } .page-sub { font-size: 13px; margin-bottom: 14px; } /* Main padding */ .main { padding: 16px 14px; } /* Sidebar links wider tap target */ .sidebar { width: 280px; padding: 14px 10px; } .nav-link { padding: 12px 12px; font-size: 15px; } /* Tables: keep horizontal scroll, but compact cells */ table.admin th, table.admin td { padding: 9px 10px; font-size: 13px; } table.admin th { font-size: 11px; } /* Forms: stack action rows */ .row.row-end > .row.row-end > * { width: 100%; } /* Troubleshooter answers: bigger tap area */ .answer { padding: 14px 16px; font-size: 15px; min-height: 48px; } /* Modal */ .modal { padding: 18px; border-radius: 12px; } .modal-overlay { padding: 12px; align-items: flex-end; } .modal { animation: modal-pop-mobile 0.16s ease-out; } @keyframes modal-pop-mobile { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Login card: less top margin */ main.main > .card[style*="margin:60px auto"], main.main > .card[style*="margin: 60px auto"] { margin: 16px auto !important; } } @media (max-width: 380px) { /* Very narrow: drop brand sub-line on the client header so logo + name fit */ .header .brand-sub { display: none; } /* Trim sign-out label by hiding text — keep theme + admin */ .btn.btn-ghost.btn-sm { padding: 8px 10px; } } /* ========================================================================= Dashboard tiles + bar lists ========================================================================= */ .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 1100px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tile-grid { grid-template-columns: 1fr; } } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); } .tile-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin-bottom: 6px; } .tile-value { font-family: "IBM Plex Mono", monospace; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; } .tile-spark { margin-top: 8px; width: 100%; height: 30px; display: block; } .bar-list { display: flex; flex-direction: column; gap: 6px; } .bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: default; } .bar-row.clickable { cursor: pointer; } .bar-row.clickable:hover { background: var(--surface-2); } .bar-row .label-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .bar-row .label-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .bar-row .bar-track { margin-top: 4px; grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .bar-row .bar-fill { height: 100%; background: var(--brand); border-radius: inherit; } .bar-row .bar-fill.critical { background: var(--critical); } .bar-row .bar-fill.warning { background: var(--warning); } .bar-row .bar-fill.info { background: var(--info); } .bar-row .count { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-dim); white-space: nowrap; } /* Tabs (filter buttons) */ .filter-q.active, .filter-audit.active { background: var(--brand); color: #fff; border-color: var(--brand); } .audit-row { cursor: pointer; } .audit-row:hover { background: var(--surface-2); } /* Q&A thread */ .q-bubble { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 10px; white-space: pre-wrap; word-wrap: break-word; } .q-bubble.admin { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); } .q-meta { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; } /* ========================================================================= Document / report layout (used by /report/[id] and /help/* pages) Office-document aesthetic: white paper, brand-colored section bars, colon-aligned key/value tables, severity pills, signature footer. ========================================================================= */ .report-shell { max-width: 900px; margin: 0 auto; padding: 0 12px 40px; } .toolbar { padding: 14px 4px; display: flex; gap: 10px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; background: var(--bg); } .report { background: #fff; color: #1f2937; font-family: "IBM Plex Sans", -apple-system, sans-serif; font-size: 13.5px; line-height: 1.55; border: 1px solid #e2e8f0; border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; } [data-theme="dark"] .report { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .doc { padding: 28px 36px; } .doc-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: flex-start; padding-bottom: 14px; border-bottom: 2px solid #1e63b8; margin-bottom: 18px; } .doc-title { font-size: 20px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #1e63b8; line-height: 1.1; } .doc-subtitle { margin-top: 2px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #64748b; } .doc-brand { display: flex; align-items: center; gap: 12px; text-align: right; } .doc-brand img { height: 46px; width: auto; } .doc-brand-name { font-size: 14px; font-weight: 700; color: #0a2747; line-height: 1.1; } .doc-brand-tag { font-size: 10.5px; color: #64748b; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; } .meta-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; margin-bottom: 16px; } @media (max-width: 640px) { .meta-cols { grid-template-columns: 1fr; gap: 16px; } } .meta-block-title { font-size: 13px; font-weight: 700; color: #0f172a; margin: 0 0 6px; } .kv-table { width: 100%; border-collapse: collapse; font-size: 13px; } .kv-table td { padding: 3px 0; vertical-align: top; } .kv-table td.k { width: 130px; color: #475569; font-weight: 500; white-space: nowrap; } .kv-table td.colon { width: 12px; color: #475569; } .kv-table td.v { color: #0f172a; word-break: break-word; } .specimen-note { border-top: 1px dashed #cbd5e1; border-bottom: 1px dashed #cbd5e1; padding: 6px 0; font-size: 11.5px; color: #475569; font-style: italic; margin: 6px 0 0; } .section-bar { background: #1e63b8; color: #fff; padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; margin: 18px 0 0; } .section-bar .sub { font-weight: 400; letter-spacing: 0.5px; opacity: 0.85; margin-left: 8px; font-size: 11px; text-transform: none; } table.r-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.r-table thead th { background: #f1f5f9; color: #475569; text-transform: uppercase; font-size: 10.5px; letter-spacing: 1px; font-weight: 600; text-align: left; padding: 6px 10px; border-bottom: 1px solid #cbd5e1; } table.r-table tbody td { padding: 9px 10px; vertical-align: top; border-bottom: 1px dotted #cbd5e1; color: #1f2937; } table.r-table tbody tr:last-child td { border-bottom: 1px solid #cbd5e1; } .num-col { width: 36px; color: #94a3b8; font-family: "IBM Plex Mono", monospace; font-size: 12px; } .type-col { width: 110px; color: #475569; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px; } .diag-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: flex-start; padding: 12px 14px; } .diag-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: #0f172a; } .diag-actions { margin: 6px 0 0; padding-left: 18px; color: #1f2937; } .diag-actions li { padding: 2px 0; } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap; } .pill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .pill.critical { background: #fee2e2; color: #b91c1c; } .pill.warning { background: #fef3c7; color: #b45309; } .pill.info { background: #dbeafe; color: #1d4ed8; } .pill.success { background: #dcfce7; color: #166534; } .notes-box { padding: 12px 14px; background: #f8fafc; border-left: 3px solid #1e63b8; font-size: 13px; white-space: pre-wrap; color: #1f2937; } .signature-footer { display: grid; grid-template-columns: 1fr auto; gap: 24px; margin-top: 28px; padding-top: 14px; border-top: 1px solid #cbd5e1; align-items: end; } .sig-meta { font-size: 11px; color: #475569; line-height: 1.55; } .sig-meta .line { display: block; } .sig-meta .line strong { color: #0f172a; } .sig-block { text-align: right; min-width: 220px; } .sig-line { border-top: 1px solid #475569; padding-top: 4px; font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: #475569; margin-top: 32px; } .sig-line strong { display: block; color: #0f172a; font-size: 12px; letter-spacing: 0.4px; text-transform: none; } .doc-foot { background: #f1f5f9; color: #475569; padding: 10px 36px; font-size: 10.5px; letter-spacing: 0.7px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e2e8f0; } .mono-text { font-family: "IBM Plex Mono", monospace; font-size: 12px; } /* Help-page additions (lede + prose blocks + tip/callout) */ .doc-lede { font-size: 14.5px; color: #475569; max-width: 60ch; margin: 0 0 18px; padding: 0 0 0 0; line-height: 1.6; } .prose { padding: 14px 16px; font-size: 14px; color: #1f2937; line-height: 1.6; } .prose p { margin: 0 0 10px; } .prose p:last-child { margin-bottom: 0; } .prose ol, .prose ul { margin: 0; padding-left: 22px; } .prose li { padding: 3px 0; } .prose-tip { padding: 10px 14px; background: #eff6ff; border-left: 3px solid #1d4ed8; margin: 10px 16px 0; font-size: 13px; color: #475569; border-radius: 0 6px 6px 0; } .prose .callout, .prose-callout { padding: 10px 14px; background: #fffbeb; border-left: 3px solid #b45309; margin: 10px 0 0; font-size: 13px; color: #1f2937; border-radius: 0 6px 6px 0; } .doc-footnote { margin: 28px 36px 0; padding: 12px 0 0; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: #64748b; letter-spacing: 0.6px; text-transform: uppercase; } @media (max-width: 640px) { .doc-footnote { flex-direction: column; gap: 4px; } } /* Print rules — strip chrome, force exact colors on accent bands/pills */ @media print { :root, [data-theme] { color-scheme: light; } .no-print { display: none !important; } body, html { background: #fff !important; color: #0f172a !important; } .report-shell { max-width: none !important; padding: 0 !important; margin: 0 !important; } .report { background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible; } .section-bar, .pill, .doc-foot, .doc-head, table.r-table thead th, .notes-box, .prose-tip, .prose-callout, .prose .callout { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { margin: 14mm 14mm 16mm; } } /* Info tooltip — small (i) bubble that reveals an explanation on hover/focus */ .info-tip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-faint); font-size: 9px; font-weight: 700; font-family: "IBM Plex Sans", sans-serif; font-style: italic; margin-left: 6px; cursor: help; position: relative; vertical-align: middle; flex: none; } .info-tip:hover, .info-tip:focus { border-color: var(--brand); color: var(--brand); outline: none; } .info-tip::after { content: attr(data-tip); position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px 10px; font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.4; width: max-content; max-width: 240px; white-space: normal; text-align: left; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } .info-tip::before { content: ""; position: absolute; z-index: 51; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--surface-3); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } .info-tip:hover::after, .info-tip:focus::after, .info-tip:hover::before, .info-tip:focus::before { opacity: 1; } @media (max-width: 720px) { .info-tip::after { max-width: min(70vw, 240px); } } /* Machine pill (entry picker) */ .machine-pill { border-radius: 999px; padding: 8px 14px; font-weight: 500; transition: background 0.12s, border-color 0.12s, color 0.12s; } .machine-pill.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); } .machine-pill.active:hover { filter: brightness(1.05); } /* ========================================================================= Modal (custom confirm/prompt/alert) ========================================================================= */ #modal-root { position: relative; z-index: 100; } .modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, #0f172a 55%, transparent); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; animation: modal-fade 0.12s ease-out; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; padding: 22px; animation: modal-pop 0.15s ease-out; } @keyframes modal-pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .modal-body { color: var(--text-dim); font-size: 14px; margin-bottom: 14px; } .modal-body p { margin: 0; } .modal-body p + p { margin-top: 8px; } .modal-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .modal-fields .label { margin-bottom: 4px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }