/* =========================================================================== Performance Monitor — Azure Portal / Fluent design system stylesheet. Light theme is the default; dark is opt-in via the Settings page, applied with data-theme="dark" on . Uses Segoe UI (native on Windows) with a system fallback stack — no external font dependency. =========================================================================== */ /* ------------------------------ LIGHT (default) ------------------------------ */ :root{ --canvas:#faf9f8; /* portal grey canvas */ --blade:#ffffff; /* white surfaces */ --blade-2:#f3f2f1; /* neutralLighter */ --hover:#f3f2f1; --stroke:#edebe9; /* neutralLight rules */ --stroke-2:#e1dfdd; --text:#201f1e; /* neutralPrimary */ --text-2:#323130; --muted:#605e5c; /* neutralSecondary */ --faint:#a19f9d; /* neutralTertiary */ --accent:#0078d4; /* Azure blue */ --accent-hover:#106ebe; --accent-2:#005a9e; --accent-soft:#eff6fc; --accent-border:#c7e0f4; --good:#107c10; --good-soft:#dff6dd; --warn:#c19c00; --warn-soft:#fff4ce; --bad:#d13438; --bad-soft:#fde7e9; --appbar:#0b1f33; /* dark top chrome, both themes */ --radius:2px; --radius-lg:4px; --shadow:0 1.6px 3.6px rgba(0,0,0,.10),0 .3px .9px rgba(0,0,0,.07); --shadow-2:0 6.4px 14.4px rgba(0,0,0,.11),0 1.2px 3.6px rgba(0,0,0,.09); } /* --------------------------------- DARK (opt-in) --------------------------------- */ :root[data-theme="dark"]{ --canvas:#1b1a19; --blade:#252423; --blade-2:#292827; --hover:#323130; --stroke:#3b3a39; --stroke-2:#484644; --text:#f3f2f1; --text-2:#e1dfdd; --muted:#c8c6c4; --faint:#797775; --accent:#2899f5; --accent-hover:#3aa0f3; --accent-2:#6cb8f6; --accent-soft:#12283a; --accent-border:#1b4368; --good:#54b054; --good-soft:#0f2a0f; --warn:#d9b300; --warn-soft:#2e2708; --bad:#f1707b; --bad-soft:#3a1416; --appbar:#0a0a0a; --shadow:0 1.6px 3.6px rgba(0,0,0,.4),0 .3px .9px rgba(0,0,0,.3); --shadow-2:0 6.4px 14.4px rgba(0,0,0,.5),0 1.2px 3.6px rgba(0,0,0,.4); } *{box-sizing:border-box} body{ margin:0;background:var(--canvas);color:var(--text); font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif; font-size:13px;line-height:1.5; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline;color:var(--accent-hover)} code,pre{font-family:Consolas,"Courier New",monospace;font-size:12.5px;background:var(--blade-2); padding:2px 6px;border-radius:var(--radius)} pre{padding:12px;overflow-x:auto;white-space:pre-wrap} h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em} /* =============================== top app bar =============================== */ /* Reuses the existing .topbar/.brand/.topbar-nav markup, restyled as the Azure portal dark command header. */ .topbar{ display:flex;align-items:center;height:48px;padding:0 16px;gap:14px; background:var(--appbar);border-bottom:1px solid rgba(0,0,0,.25); position:sticky;top:0;z-index:20; } .appbar-waffle{width:20px;height:20px;flex:none;display:grid;grid-template-columns:repeat(3,1fr); grid-gap:2px;opacity:.85;cursor:default} .appbar-waffle i{background:#fff;border-radius:1px} .topbar .brand a{color:#fff;font-weight:600;font-size:15px;letter-spacing:.01em} .topbar .brand a:hover{text-decoration:none;opacity:.9} .topbar-nav{display:flex;align-items:center;gap:2px;margin-left:8px;flex:1} .topbar-nav a{ color:rgba(255,255,255,.82);font-size:13px;padding:7px 12px;border-radius:var(--radius); } .topbar-nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none} .topbar-nav .sep{color:rgba(255,255,255,.25);margin:0 6px} .topbar-nav .user{color:rgba(255,255,255,.7);font-size:12.5px;margin-left:auto} /* push the user/sign-out group to the right edge */ .topbar-nav .user{margin-left:auto} main{padding:18px 24px 40px;max-width:1400px;margin:0 auto} footer{padding:20px 24px;color:var(--faint);text-align:left;font-size:11.5px; border-top:1px solid var(--stroke);margin-top:20px} /* =============================== command bar =============================== */ /* Optional per-page chrome, included via the _CommandBar / _Crumbs partials. */ .crumbs{font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:center;margin:0 0 12px} .crumbs a{color:var(--accent)} .crumbs .div{color:var(--faint)} .cmdbar{display:flex;align-items:center;gap:2px;padding:6px 0;margin:0 0 6px; border-bottom:1px solid var(--stroke);flex-wrap:wrap} .cmdbar .cmd{ display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--radius); color:var(--text-2);font-size:13px;cursor:pointer;background:none;border:none; font-family:inherit;text-decoration:none; } .cmdbar .cmd:hover{background:var(--hover);text-decoration:none;color:var(--text-2)} .cmdbar .cmd svg{width:15px;height:15px;color:var(--accent)} .cmdbar .cmd.primary{color:var(--accent)} .cmdbar .cmdsep{width:1px;height:22px;background:var(--stroke-2);margin:0 6px} /* ============================== resource header ============================== */ .page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .rhead{display:flex;align-items:flex-start;gap:13px;margin-bottom:6px} .rhead .ricon{width:40px;height:40px;border-radius:var(--radius-lg);background:var(--accent-soft); border:1px solid var(--accent-border);display:grid;place-items:center;flex:none} .rhead .ricon svg{width:22px;height:22px;color:var(--accent)} .rhead .subtitle{color:var(--muted);font-size:12.5px;margin-top:2px} /* ================================ KPI parts ================================ */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:16px 0} .card{ background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius); padding:14px 16px;box-shadow:var(--shadow);transition:box-shadow .12s; } .card:hover{box-shadow:var(--shadow-2)} .card-label{color:var(--muted);font-size:12px;font-weight:400} .card-value{font-size:30px;font-weight:600;margin-top:6px;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .card-value.good{color:var(--good)} .card-value.warn{color:var(--warn)} .card-value.bad{color:var(--bad)} .card-value.small{font-size:14px;font-weight:400;color:var(--muted)} .muted{color:var(--muted)} .small{font-size:12px} .error{background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad); padding:12px 14px;border-radius:var(--radius);margin:16px 0} .error pre{background:transparent;color:inherit;padding:6px 0} /* two-column dashboard row (optional, via markup) */ .row2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin:16px 0} @media(max-width:900px){.row2{grid-template-columns:1fr}} /* =========================== blade / panel wrapper =========================== */ .blade{background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden;margin:16px 0} .blade-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px; border-bottom:1px solid var(--stroke)} .blade-h h2{margin:0;font-size:14px;font-weight:600} .blade-b{padding:6px 0} /* ================================ filter bar ================================ */ .filterbar{display:flex;gap:8px;align-items:center;margin:14px 0;flex-wrap:wrap} .filterbar input[type=text],.filterbar select{ background:var(--blade);color:var(--text);border:1px solid var(--stroke-2); border-radius:var(--radius);padding:7px 10px;font-size:13px;font-family:inherit; } .filterbar input[type=text]{min-width:260px} .filterbar input:focus,.filterbar select:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)} .filterbar button{ background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius); padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; } .filterbar button:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .clear-link{font-size:12.5px} /* ============================ table (DetailsList) ============================ */ table.grid{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px} table.grid thead th{ text-align:left;padding:8px 16px;background:var(--blade);border-bottom:1px solid var(--stroke-2); color:var(--muted);font-weight:600;font-size:12px; } table.grid thead th a{color:var(--muted)} table.grid thead th a:hover{color:var(--text)} table.grid tbody td{padding:9px 16px;border-bottom:1px solid var(--stroke)} table.grid tbody tr:last-child td{border-bottom:none} table.grid tbody tr:hover{background:var(--hover)} table.grid td.good{color:var(--good);font-weight:600} table.grid td.warn{color:var(--warn);font-weight:600} table.grid td.bad{color:var(--bad);font-weight:600} table.grid th.num,table.grid td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} /* long exe paths wrap; first column absorbs slack */ table.grid .hint{white-space:normal;overflow-wrap:anywhere;word-break:break-all} table.grid td:first-child,table.grid th:first-child{max-width:460px} /* =============================== status pills =============================== */ /* Fluent style: a small colored dot + text, quiet rather than loud. */ .pill{display:inline-flex;align-items:center;gap:6px;padding:0;border-radius:0; font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:0;background:none} .pill::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none} .pill-online{color:var(--good)} .pill-offline{color:var(--faint)} /* pager */ .pager{display:flex;gap:16px;align-items:center;margin:16px 0;font-size:13px} /* breadcrumb (legacy .breadcrumb kept for any page still using it) */ .breadcrumb{margin:0 0 10px;font-size:12.5px;color:var(--muted)} .breadcrumb a{color:var(--accent)} /* ============================== detail facts ============================== */ .detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0; background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius); overflow:hidden;margin:16px 0 26px;box-shadow:var(--shadow)} .fact{background:var(--blade);padding:11px 16px;display:flex;flex-direction:column;gap:3px; border-right:1px solid var(--stroke);border-bottom:1px solid var(--stroke)} .fact-label{color:var(--muted);font-size:12px} .fact-value{font-size:13px;font-weight:500} /* ================================= charts ================================= */ .charts-header{display:flex;justify-content:space-between;align-items:center;margin-top:22px} .charts-header h2{margin:0;font-size:15px;font-weight:600} .range-tabs{display:inline-flex;border:1px solid var(--stroke-2);border-radius:var(--radius);overflow:hidden} .range-tabs a{padding:5px 12px;font-size:12.5px;color:var(--muted);border-right:1px solid var(--stroke-2)} .range-tabs a:last-child{border-right:none} .range-tabs a:hover{background:var(--hover);text-decoration:none} .range-tabs a.active{background:var(--accent-soft);color:var(--accent);font-weight:600} .empty-charts,.empty-state{ background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius); padding:24px;margin:16px 0;text-align:center;color:var(--muted); } .empty-state{border-style:dashed;border-color:var(--stroke-2)} .chart-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin:12px 0} .chart-card{background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius); padding:14px 16px;box-shadow:var(--shadow)} .chart-card h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--text); text-transform:none;letter-spacing:0} .chart-host{width:100%;position:relative} .chart-legend{display:flex;gap:16px;margin-top:6px;font-size:12px;color:var(--muted)} .chart-legend-item{display:flex;align-items:center;gap:6px} .chart-legend-swatch{width:10px;height:10px;border-radius:2px;display:inline-block} .chart-tip{position:absolute;background:var(--blade);border:1px solid var(--stroke-2); border-radius:var(--radius);padding:8px 10px;font-size:12px;pointer-events:none; white-space:nowrap;z-index:5;box-shadow:var(--shadow-2)} .chart-tip-time{color:var(--muted);margin-bottom:4px;font-size:11px} .chart-tip-row{display:flex;align-items:center;gap:6px} .chart-tip-swatch{width:8px;height:8px;border-radius:2px;display:inline-block} /* ================================= buttons ================================= */ .btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff; border:1px solid var(--accent);border-radius:var(--radius);padding:6px 16px;font-size:13px; font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit} .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;text-decoration:none} .btn svg{width:15px;height:15px} .btn-sm{padding:5px 12px;font-size:12.5px} .btn-danger{background:var(--bad);border-color:var(--bad)} .btn-danger:hover{background:var(--bad);border-color:var(--bad);filter:brightness(1.08)} /* default (secondary) button */ .btn-def{background:var(--blade);color:var(--text);border:1px solid var(--stroke-2)} .btn-def:hover{background:var(--hover);color:var(--text);border-color:var(--stroke-2)} .export-link{margin-left:8px;padding:5px 12px;border-radius:var(--radius);font-size:12px; background:var(--blade);border:1px solid var(--stroke-2);color:var(--text)} .export-link:hover{background:var(--hover);text-decoration:none} /* =============================== admin cards =============================== */ .admin-card{background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius); padding:18px 20px;margin:16px 0;overflow-x:auto;box-shadow:var(--shadow)} .admin-card h2{margin:0 0 6px;font-size:15px;font-weight:600} .admin-card h3{margin:16px 0 8px;font-size:13.5px;font-weight:600} .field-row{display:flex;align-items:center;gap:10px;margin:14px 0;flex-wrap:wrap} .num-input{background:var(--blade);color:var(--text);border:1px solid var(--stroke-2); border-radius:var(--radius);padding:7px 10px;font-size:13px;width:84px;font-family:inherit} .num-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .quick-pick{display:flex;align-items:center;gap:6px;margin:8px 0 14px} .quick-pick button{background:var(--blade);color:var(--text);border:1px solid var(--stroke-2); border-radius:var(--radius);padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:inherit} .quick-pick button:hover{background:var(--hover)} .button-row{margin:14px 0} .preview-result{margin-top:18px;padding-top:16px;border-top:1px solid var(--stroke)} /* danger zone */ .danger-zone{margin-top:18px;padding:16px;border:1px solid var(--bad);border-radius:var(--radius); background:var(--bad-soft)} .confirm-line{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;font-size:13px} .confirm-line input{margin-top:2px} /* notices */ .notice{background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:var(--radius); padding:10px 14px;margin:12px 0;font-size:13px} .notice-done{background:var(--good-soft);border-color:var(--good)} /* =============================== capture form =============================== */ .capture-cta{margin-left:12px;font-size:12.5px;vertical-align:middle} .badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:400; text-transform:none;letter-spacing:0;padding:0;border:none;border-radius:0;vertical-align:middle} .badge::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none} .badge-pending{color:var(--warn)} .badge-running{color:var(--accent)} .badge-done{color:var(--good)} .badge-failed{color:var(--bad)} .badge-expired{color:var(--faint)} .capture-form .admin-card{margin-bottom:18px} .capture-form h2{margin-top:0;font-size:14px} .rule-grid{width:100%;border-collapse:separate;border-spacing:0 7px;margin:10px 0} .rule-grid thead th{text-align:left;font-size:11.5px;text-transform:none;letter-spacing:0; color:var(--muted);padding:0 8px;font-weight:600} .rule-grid td{padding:0 8px;vertical-align:middle} .rule-grid select,.rule-value{width:100%;background:var(--blade);color:var(--text); border:1px solid var(--stroke-2);border-radius:var(--radius);padding:8px 10px;font-size:13px;font-family:inherit} .rule-grid select:focus,.rule-value:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .rule-neg{text-align:center;width:64px} .radio-line,.check-line{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--text);font-size:13px} .radio-line input,.check-line input{accent-color:var(--accent);width:16px;height:16px} .text-input{width:100%;max-width:480px;background:var(--blade);color:var(--text); border:1px solid var(--stroke-2);border-radius:var(--radius);padding:8px 10px;font-size:13px;font-family:inherit} .text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .hint{font-size:12px;color:var(--muted);margin-top:8px} .hint code{color:var(--text)} .btn-link{color:var(--muted);font-size:12.5px;padding:6px 10px;display:inline-block} .btn-link:hover{color:var(--text)} /* ================================== login ================================== */ .login-body{display:grid;place-items:center;min-height:100vh;margin:0;background:var(--canvas)} .login-card{background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius-lg); padding:40px 40px 32px;width:100%;max-width:400px;box-shadow:var(--shadow-2);text-align:center} .login-card .ricon{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--accent-soft); border:1px solid var(--accent-border);display:grid;place-items:center;margin:0 auto 18px} .login-card .ricon svg{width:26px;height:26px;color:var(--accent)} .login-card h1{margin:0 0 4px;font-size:21px} .login-card .tag{color:var(--muted);font-size:13px;margin:6px 0 24px} .login-card form{margin-top:16px} .login-card label{display:block;margin-bottom:6px;color:var(--muted);font-size:12.5px;text-align:left} .login-card input{width:100%;background:var(--blade);color:var(--text);border:1px solid var(--stroke-2); border-radius:var(--radius);padding:9px 11px;font-size:13px;margin-bottom:12px;font-family:inherit} .login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .login-card button,.login-card .btn{width:100%;justify-content:center;background:var(--accent);color:#fff; border:1px solid var(--accent);border-radius:var(--radius);padding:9px 12px;font-size:13px; font-weight:600;cursor:pointer;font-family:inherit} .login-card button:hover,.login-card .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .login-foot{margin-top:16px;font-size:11.5px;color:var(--faint)} /* ============================ capture report ============================ */ .report-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .report-actions .breadcrumb{margin:0} .report-doc{background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius); padding:32px 36px;max-width:900px;box-shadow:var(--shadow)} .report-head{border-bottom:2px solid var(--stroke-2);padding-bottom:12px;margin-bottom:8px} .report-title{font-size:20px;font-weight:700;letter-spacing:-.01em} .report-doc h1{font-size:22px;margin:18px 0 6px} .report-doc h2{font-size:15px;margin:26px 0 8px;border-bottom:1px solid var(--stroke);padding-bottom:4px} .report-note{font-size:12px;color:var(--muted);font-style:italic;margin:8px 0} .report-facts{width:100%;border-collapse:collapse;margin:12px 0} .report-facts th,.report-facts td{text-align:left;padding:5px 10px;font-size:13px; border:1px solid var(--stroke);vertical-align:top} .report-facts th{background:var(--blade-2);color:var(--muted);font-weight:600;width:16%;white-space:nowrap} .report-path{font-family:Consolas,monospace;font-size:11px;color:var(--muted);margin-top:2px;word-break:break-all} .report-generated{margin-top:28px;padding-top:10px;border-top:1px solid var(--stroke);font-size:11px;color:var(--muted)} /* ================================== print ================================== */ @media print{ :root,:root[data-theme="dark"]{ --canvas:#ffffff;--blade:#ffffff;--blade-2:#f2f2f2;--text:#000000;--muted:#333333; --faint:#666666;--accent:#000000;--good:#137a37;--warn:#8a5200;--bad:#b3261e; --stroke:#999999;--stroke-2:#999999; } .topbar,footer,.no-print,.cmdbar,.crumbs{display:none !important} main{padding:0;max-width:none} body{background:#fff} a{color:#000;text-decoration:none} .report-doc{border:none;border-radius:0;padding:0;max-width:none;box-shadow:none} table.grid tbody tr,.report-facts tr{page-break-inside:avoid} .report-doc h2{page-break-after:avoid} } /* ============================ Fleet overview page ============================ */ /* Header right-side stat (last ingest) */ .head-stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .head-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .head-stat-value{font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums} /* Big KPI row — 5 across on wide screens, bold and spacious */ .kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:18px 0 20px} /* 8-tile variant: 4 per row, two rows */ .kpi-row.kpi-8{grid-template-columns:repeat(4,1fr)} @media(max-width:1100px){.kpi-row,.kpi-row.kpi-8{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.kpi-row,.kpi-row.kpi-8{grid-template-columns:repeat(2,1fr)}} .kpi{background:var(--blade);border:1px solid var(--stroke);border-radius:var(--radius-lg); padding:20px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden; transition:box-shadow .12s,transform .12s;min-height:118px} .kpi:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)} .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85} .kpi-label{color:var(--muted);font-size:12.5px;font-weight:500} .kpi-value{font-size:44px;font-weight:700;line-height:1.05;margin-top:10px;letter-spacing:-.03em; font-variant-numeric:tabular-nums;color:var(--text)} .kpi-value.good{color:var(--good)} .kpi-value.warn{color:var(--warn)} .kpi-value.bad{color:var(--bad)} .kpi-unit{font-size:20px;font-weight:600;color:var(--muted);margin-left:3px} .kpi-value.kpi-build{font-size:26px;font-family:Consolas,"Courier New",monospace;font-weight:600;color:var(--accent)} .kpi-foot{font-size:12px;color:var(--faint);margin-top:8px} /* Lower area: recent-machines table + glance panel side by side */ .fleet-lower{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:start} @media(max-width:1000px){.fleet-lower{grid-template-columns:1fr}} .fleet-lower .blade{margin:0} .blade-h .link{font-size:12.5px;font-weight:600} .glance-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0; border-bottom:1px solid var(--stroke);font-size:13px;color:var(--muted)} .glance-row b{color:var(--text);font-variant-numeric:tabular-nums;font-size:14px} .glance-row.glance-last{border-bottom:none} /* Radio whose label text stays inline while an adjacent input (e.g. the "Fixed length -- [n] minutes" box) sits OUTSIDE the label, so the input is directly clickable/typeable and not swallowed by the label. */ .radio-line{flex-wrap:wrap} .radio-inline{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer} .radio-inline input{accent-color:var(--accent);width:16px;height:16px}