/* TolAnalyzer theme tokens (#31). * * Three selectable themes live here as token sets keyed off the * attribute, which web/shell.js sets from the user's * saved choice (localStorage) or the server default (GET /api/config → theme). * * light — the Penpot design palette (default). Tokens are the exact hexes * pulled from docs/ui-exports/*.svg. * dark — the original dark palette this app shipped with. * colorful — a high-saturation alternative. * * Component rules reference tokens only; never hard-code a colour below the * token blocks so a new theme is a pure token swap. */ /* ── light (default; Penpot tokens) ─────────────────────────────────────────── */ :root, :root[data-theme="light"] { --bg:#b8bfd3; /* content background rgb(184,191,211) */ --panel:#ffffff; /* cards, fields, drawing pane */ --panel-2:#f2f2f2; /* sidebar buttons rgb(242,242,242) */ --ink:#000000; /* primary text */ --muted:#41454f; /* secondary text — ≥4.5:1 on --bg (#69) */ --line:#b1b2b5; /* borders / dividers rgb(177,178,181) */ --accent:#35cee3; /* primary action buttons rgb(53,206,227) */ --accent-ink:#06303a; /* text on accent buttons */ --link:#0b6b7a; /* link/text accent — AA on --bg (#69) */ --banner:#b1b2b5; /* top banner background */ --banner-ink:#000000; --sidebar:#cfd3dd; /* sidebar rail background */ --sidebar-btn:#f2f2f2; --sidebar-active:#ffffff; --card:#b6d2d6; /* recent-project card tint rgb(182,210,214) */ --table-header:#b7b1b1; /* table header row rgb(183,177,177) */ --green:#2ea043; --yellow:#d29922; --red:#da3633; /* status *text* variants — strokes/badges keep --green/--yellow/--red, text uses these so light theme passes AA (#70) */ --ok-ink:#1a7f37; --warn-ink:#7a5600; --err-ink:#b3261e; --ignored-ink:#41454f; } /* ── dark (original palette) ────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg:#0f1419; --panel:#1b2430; --panel-2:#161c25; --ink:#e6edf3; --muted:#8b98a5; --line:#30363d; --accent:#388bfd; --accent-ink:#ffffff; --banner:#1b2430; --banner-ink:#e6edf3; --sidebar:#141b24; --sidebar-btn:#1b2430; --sidebar-active:#243040; --card:#1b2430; --table-header:#222c38; --green:#2ea043; --yellow:#d29922; --red:#da3633; --link:#58a6ff; --ok-ink:#3fb950; --warn-ink:#d29922; --err-ink:#f85149; --ignored-ink:#8b98a5; } /* ── colorful ───────────────────────────────────────────────────────────────── */ :root[data-theme="colorful"] { --bg:#1a1033; --panel:#2a1a55; --panel-2:#231546; --ink:#f5f0ff; --muted:#b9a8e6; --line:#4a2f8a; --accent:#ff5ca8; --accent-ink:#ffffff; --banner:#3a1d6e; --banner-ink:#ffe9f5; --sidebar:#241046; --sidebar-btn:#3a1d6e; --sidebar-active:#5a2da0; --card:#2f1c66; --table-header:#3a1d6e; --green:#36d399; --yellow:#fbbf24; --red:#fb7185; --link:#8fd8ff; --ok-ink:#36d399; --warn-ink:#fbbf24; --err-ink:#fb7185; --ignored-ink:#b9a8e6; } * { box-sizing: border-box; } /* The `hidden` attribute must always win: components styled with an explicit * `display` (e.g. .field/.paywall/.sim-shell flex) would otherwise stay visible * when toggled hidden in JS. */ [hidden] { display: none !important; } body { margin:0; font:14px/1.45 "Source Sans Pro", system-ui, sans-serif; background:var(--bg); color:var(--ink); } header { display:flex; align-items:baseline; gap:.75rem; padding:.75rem 1.25rem; border-bottom:1px solid var(--line); background:var(--banner); color:var(--banner-ink); } header h1 { margin:0; font-size:1.15rem; } header h1 a { color:inherit; text-decoration:none; } header .tag { color:var(--muted); font-size:.85rem; } main { padding:1.25rem; } h2 { font-size:1rem; margin:.25rem 0 1rem; } button { background:var(--accent); color:var(--accent-ink); border:0; border-radius:6px; padding:.4rem .8rem; cursor:pointer; font:inherit; } button:disabled { background:var(--panel-2); color:var(--muted); cursor:not-allowed; } button.ghost { background:transparent; border:1px solid var(--line); color:var(--ink); } /* Destructive tier (#92/#96): delete / remove actions — always behind a confirm. */ button.danger { background:transparent; border:1px solid var(--red); color:var(--err-ink); } button.danger:hover { background:var(--red); color:#fff; } input, select { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:.4rem .5rem; font:inherit; } ul { list-style:none; padding:0; } li { padding:.5rem .6rem; border:1px solid var(--line); border-radius:6px; margin-bottom:.4rem; background:var(--panel); } a { color:var(--link, var(--accent)); } .row { display:flex; gap:1rem; align-items:flex-start; } .panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1rem; } canvas { border:1px solid var(--line); background:#fff; max-width:100%; } .badge { padding:.15rem .5rem; border-radius:999px; font-size:.8rem; font-weight:600; } .badge.pass { background:var(--green); color:#fff; } .badge.fail { background:var(--red); color:#fff; } .warn { color:var(--warn-ink, var(--yellow)); } .field { display:flex; flex-direction:column; gap:.2rem; margin-bottom:.6rem; } .field label { color:var(--muted); font-size:.8rem; } .muted { color:var(--muted); } /* ── Canonical design-system components (#92) ─────────────────────────────── * The shared vocabulary documented in docs/ui-guidelines.md. View-specific * classes (.loop-toolbar, .atable, …) are kept for back-compat and now layer on * top of these bases, so every view renders toolbars, tables, cards and panel * headers identically. Reference tokens only — never hard-code a colour. */ .action-bar { display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; flex-wrap:wrap; } /* Panel header: a title + its action bar, sitting atop a panel or view. */ .panel-header { display:flex; align-items:center; gap:.8rem; margin:0 0 .8rem; flex-wrap:wrap; } .panel-header h1, .panel-header h2, .panel-header h3 { margin:0; } /* Data table: the canonical row/column grid (4px-grid cell padding, token * header tint, divider rows). */ .data-table { width:100%; border-collapse:collapse; } .data-table th, .data-table td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); } .data-table th { background:var(--table-header); } /* Card: a tinted, bordered content tile (project cards, sim parameter blocks). */ .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; } /* Project — drawing import drop zone (#29, Penpot import_drawings_view) */ .dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; min-height:160px; margin-bottom:1rem; padding:1.5rem; border:2px dashed var(--line); border-radius:10px; background:var(--panel); text-align:center; } .dropzone.dragover { border-color:var(--accent); background:var(--panel-2); } .dropzone .dz-label { margin:0; color:var(--muted); } /* Select Project — recent-project cards (#32) */ .create-row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1.2rem; } .card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; } .project-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.6rem; text-decoration:none; color:var(--ink); } .project-card:hover { border-color:var(--accent); } .project-card .thumb { height:130px; border-radius:6px; margin-bottom:.5rem; background:#fff center/contain no-repeat; border:1px solid var(--line); } .project-card .card-title { font-weight:700; } .project-card .card-sub { font-size:.8rem; } /* Project controls — per-card kebab menu (#96). The wrapper is the positioning context for the kebab button + dropdown; the card itself stays a plain link. */ .project-card-wrap { position:relative; } .card-kebab { position:absolute; top:.4rem; right:.4rem; z-index:5; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:6px; line-height:1; padding:.1rem .4rem; cursor:pointer; font-size:1.1rem; opacity:.85; } .card-kebab:hover { opacity:1; border-color:var(--accent); } .card-menu { position:absolute; top:2rem; right:.4rem; z-index:50; background:var(--panel); border:1px solid var(--line); border-radius:8px; min-width:160px; padding:.3rem; display:flex; flex-direction:column; gap:.15rem; box-shadow:0 4px 14px rgba(0,0,0,.25); } .card-menu[hidden] { display:none; } .card-menu .cm-item { width:100%; text-align:left; background:transparent; border:none; color:var(--ink); padding:.35rem .5rem; border-radius:5px; cursor:pointer; } .card-menu .cm-item:hover { background:var(--panel-2); } .card-menu .cm-item.cm-delete { color:var(--err-ink); } .card-menu .cm-item.cm-delete:hover { background:var(--red); color:#fff; } /* Shared confirm/rename modal (#96). */ .modal-backdrop { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); } .modal-backdrop[hidden] { display:none; } .modal { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.2rem; min-width:320px; max-width:90vw; box-shadow:0 8px 28px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:.7rem; } .modal .modal-title { font-weight:700; font-size:1.05rem; } .modal .modal-body { color:var(--ink); } .modal .modal-body input { width:100%; } .modal .modal-actions { display:flex; justify-content:flex-end; gap:.6rem; } /* Review — drawing-package thumbnail strip (#35) */ .thumb-strip { display:flex; gap:.6rem; margin-top:1rem; padding:.6rem; overflow-x:auto; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; } .thumb-item { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.3rem; width:120px; padding:.3rem; background:var(--panel); border:1px solid var(--line); border-radius:6px; cursor:pointer; color:var(--ink); } .thumb-item.active { border-color:var(--accent); border-width:2px; } .thumb-item .thumb-img { width:100%; height:80px; background:#fff center/contain no-repeat; border:1px solid var(--line); border-radius:4px; } .thumb-item .thumb-label { font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; } /* Create Loop view (#34) */ .loop-toolbar { display:flex; gap:.8rem; align-items:center; margin-bottom:.8rem; flex-wrap:wrap; } .ghost-link { margin-left:auto; } /* Drawing Annotations toolbar (#63) — markup tools above the loop canvas. */ .annotation-toolbar { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; padding:.35rem .5rem; background:var(--panel); border:1px solid var(--line); border-radius:8px; } .annotation-toolbar .tool-btn { background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:.3rem .55rem; font-size:.85rem; transition:transform .08s ease, border-color .08s ease; } .annotation-toolbar .tool-btn:hover { border-color:var(--accent); transform:translateY(-1px); } .annotation-toolbar .tool-btn.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .annotation-toolbar input[type="color"] { width:2.2rem; height:2rem; padding:.15rem; } .annotation-toolbar #anno-status { font-size:.8rem; margin-left:auto; } .ref-popup { position:absolute; z-index:20; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.6rem; min-width:280px; box-shadow:0 4px 14px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:.4rem; } /* `display:flex` above overrides the UA `[hidden]{display:none}` rule (equal * specificity, author wins), so the popup must opt back into hiding (#37). */ .ref-popup[hidden] { display:none; } .ref-popup .pp-title { font-weight:700; padding-right:1.2rem; } .ref-popup select, .ref-popup button { width:100%; } /* Close 'X' — small, top-right, out of the flex flow (#37). */ .ref-popup .pp-close { position:absolute; top:.3rem; right:.3rem; width:auto; padding:0 .35rem; line-height:1.2; background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:.95rem; } .ref-popup .pp-close:hover { color:var(--ink); } .vtable { width:100%; border-collapse:collapse; } .vtable th, .vtable td { text-align:left; padding:.3rem .4rem; border-bottom:1px solid var(--line); } .vtable select { padding:.15rem .3rem; } /* Analyze view (#33) */ .analyze-toolbar { display:flex; align-items:center; gap:1rem; margin-bottom:.8rem; } .loop-pick { margin-left:auto; color:var(--muted); } .atable { width:100%; border-collapse:collapse; } .atable th, .atable td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--line); } .atable th { background:var(--table-header); } .atable .cell-input { width:5.5rem; } .badge-flag { background:var(--yellow); color:#000; border-radius:4px; padding:.05rem .35rem; font-size:.7rem; font-weight:700; } .analyze-summary { margin:1rem 0; display:flex; flex-direction:column; gap:.3rem; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.8rem; max-width:480px; } /* Review popup + drawing nav (#26) */ .review-nav { display:flex; gap:.5rem; margin-bottom:.6rem; } /* Report view (#36, layout #60): one centered content column — narratives and tables share its full width so their edges align at any window size; wide tables scroll horizontally inside the column instead of stretching it. */ .report-toolbar { display:flex; align-items:center; gap:1rem; margin-bottom:.8rem; max-width:960px; margin-left:auto; margin-right:auto; } #report-body { max-width:960px; margin:0 auto; } .report-narr { width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:.4rem .5rem; font:inherit; resize:vertical; box-sizing:border-box; } .report-toolbar .ghost-link { padding:.4rem .8rem; border:1px solid var(--line); border-radius:6px; } .mono { font-family:ui-monospace, monospace; font-size:.75rem; word-break:break-all; } #report-body table { margin-bottom:1rem; } .table-x-scroll { overflow-x:auto; max-width:100%; } .table-x-scroll > table { margin-bottom:0; } #report-body .table-x-scroll { margin-bottom:1rem; } /* Spreadsheet review view + batch toolbar (#40 ergonomics) */ .view-toggle { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-right:.6rem; } .view-toggle button { border:none; border-radius:0; background:var(--panel); color:var(--ink); padding:.35rem .9rem; } .view-toggle button.active { background:var(--accent); color:#fff; } .table-toolbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 .6rem; } .table-toolbar .toolbar-sep { width:1px; align-self:stretch; background:var(--line); } .table-scroll { overflow:auto; max-height:70vh; border:1px solid var(--line); border-radius:8px; } .dim-table { width:100%; border-collapse:collapse; font-size:.85rem; } .dim-table th, .dim-table td { text-align:left; padding:.3rem .5rem; border-bottom:1px solid var(--line); white-space:nowrap; } .dim-table th { background:var(--table-header, var(--panel-2)); position:sticky; top:0; cursor:pointer; user-select:none; } .dim-table tbody tr { cursor:pointer; } .dim-table tbody tr:hover { background:var(--panel-2); } .dim-table .cell-edit { width:7rem; } .dim-table td.st-cell { font-weight:700; } .dim-table .st-approved td.st-cell, td.st-cell.st-approved { color:var(--ok-ink); } .dim-table .st-pending td.st-cell, td.st-cell.st-pending { color:var(--warn-ink); } .dim-table .st-rejected td.st-cell, td.st-cell.st-rejected { color:var(--err-ink); } .dim-table .st-ignored td.st-cell, td.st-cell.st-ignored { color:var(--ignored-ink); } /* Redundant non-color status cue (#70) — color-blind users get a glyph too. */ td.st-cell.st-approved::before { content:"✓ "; } td.st-cell.st-pending::before { content:"○ "; } td.st-cell.st-rejected::before { content:"✕ "; } td.st-cell.st-ignored::before { content:"– "; } /* Onshape batch import (#62) */ #onshape-urls { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:.4rem .5rem; font:inherit; resize:vertical; } .onshape-rows { display:flex; flex-direction:column; gap:.25rem; margin-top:.4rem; } .onshape-row { display:flex; align-items:center; gap:.6rem; } .onshape-url { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace, monospace; font-size:.78rem; } .onshape-progress { list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-direction:column; gap:.3rem; } .onshape-progress li { display:flex; align-items:center; gap:.5rem; min-width:0; } .op-icon { width:1.2rem; text-align:center; } .op-done .op-icon { color:var(--ok-ink); } .op-failed .op-icon { color:var(--err-ink); } .op-importing .op-icon { color:var(--warn-ink); } /* Auto-save status chip (#57) */ .save-chip { margin-left:.8rem; font-size:.75rem; padding:.15rem .6rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; } .save-chip[data-state="saving"] { color:var(--warn-ink); border-color:var(--warn-ink); } .save-chip[data-state="saved"] { color:var(--ok-ink); border-color:var(--ok-ink); } .save-chip[data-state="error"] { color:var(--err-ink); border-color:var(--err-ink); } /* Editable table mode + deviation warnings (#59) */ .dim-table .cell-live { width:7rem; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:4px; padding:.15rem .3rem; font:inherit; } .dim-table td.cell-editing { background:var(--panel-2); } .table-toolbar #edit-mode-toggle.active { background:var(--accent); color:#fff; border-color:var(--accent); } .cell-warn { color:var(--warn-ink); font-weight:700; white-space:nowrap; } .cell-warn .warn-dismiss { background:transparent; border:none; color:inherit; cursor:pointer; padding:0 .15rem; font-size:.75rem; } /* Link suggestions panel (#40) */ .suggest-item { border-top:1px solid var(--line); padding:.5rem 0; display:flex; flex-direction:column; gap:.3rem; } .suggest-item button { align-self:flex-start; } /* Settings page + user menu (#40, layout #61): columns can never collapse below their content (min() guard) and panels clip/scroll instead of spilling over their neighbours when the window shrinks. */ .settings-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap:1rem; align-items:start; } .settings-grid .panel { min-width:0; overflow:hidden; } .settings-grid .dim-table { display:block; overflow-x:auto; } .settings-grid .dim-table td { white-space:normal; overflow-wrap:anywhere; } .settings-grid #config-table td:first-child { white-space:nowrap; } .user-menu { position:relative; margin-left:.8rem; } .user-menu .user-btn { background:transparent; border:1px solid var(--line); color:inherit; border-radius:6px; padding:.25rem .6rem; } .user-dropdown { position:absolute; right:0; top:calc(100% + 4px); z-index:50; background:var(--panel); border:1px solid var(--line); border-radius:8px; min-width:200px; padding:.4rem; display:flex; flex-direction:column; gap:.25rem; box-shadow:0 4px 14px rgba(0,0,0,.25); } .user-dropdown[hidden] { display:none; } .user-dropdown button, .user-dropdown a { width:100%; text-align:left; background:transparent; border:none; color:var(--ink); padding:.35rem .5rem; border-radius:5px; cursor:pointer; } .user-dropdown button:hover, .user-dropdown a:hover { background:var(--panel-2); } .user-dropdown a { display:block; border-top:1px solid var(--line); } /* Toast notifications (#77) — non-blocking replacement for alert(). */ .tol-toasts { position:fixed; right:1rem; bottom:1rem; z-index:1000; display:flex; flex-direction:column; gap:.5rem; max-width:380px; } .tol-toast { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.25); font-size:.9rem; animation:tol-toast-in .18s ease; } .tol-toast-success { border-left-color:var(--green); } .tol-toast-error { border-left-color:var(--red); } .tol-toast .toast-action { background:transparent; border:1px solid var(--line); color:var(--link); font-weight:700; padding:.2rem .6rem; } .tol-toast .toast-close { background:transparent; border:none; color:var(--muted); cursor:pointer; padding:0 .2rem; font-size:.95rem; margin-left:auto; } @keyframes tol-toast-in { from { opacity:0; transform:translateY(6px); } } /* Empty-state card (#76) — message + a clickable next action, never a dead end. */ .empty-state { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2.5rem 1.5rem; margin:1rem 0; text-align:center; background:var(--panel); border:2px dashed var(--line); border-radius:10px; } .empty-state .es-icon { font-size:1.8rem; } .empty-state .es-title { font-weight:700; } .empty-state .es-hint { color:var(--muted); margin:0; } /* Empty project-card thumbnail placeholder (#84). */ .project-card .thumb.empty { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.8rem; background:var(--panel-2); } /* Home list toolbar (#74): search/filter once the grid grows. */ .list-toolbar { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; } .list-toolbar input[type="search"] { min-width:260px; } /* Hide the results pill until there is content (#76). */ .analyze-summary:empty { display:none; } /* Side panels (#80): fixed rail on wide screens, full-width stacked below. */ .row > .panel, .row > aside { flex:0 0 300px; min-width:0; } /* Cap the canvas column so a long legend paragraph can't inflate its flex base width and shove the side panel to the viewport edge. */ .row > .canvas-col { flex:0 1 auto; max-width:940px; min-width:0; } .row > .canvas-col p { max-width:900px; } .row > #suggest-panel { flex-basis:320px; } @media (max-width: 900px) { .row { flex-direction:column; } .row > .panel, .row > aside { flex:1 1 auto; width:100%; } } /* Drawing rows with a remove control (#96). */ .drawing-row { display:flex; align-items:center; gap:.6rem; } .drawing-row .drawing-remove { margin-left:auto; line-height:1; padding:.15rem .45rem; } /* Project metadata editor (#40) */ .meta-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.5rem .8rem; margin:.6rem 0; } .meta-grid textarea { width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:.4rem .5rem; font:inherit; } #meta-panel summary { cursor:pointer; } #attr-table input { width:100%; } /* ── Monte Carlo Simulate view (#86/#87) ─────────────────────────────────── */ .sim-shell { display:flex; flex-direction:column; gap:1rem; } .sim-params { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.9rem 1rem; } .sim-params h3 { margin:.1rem 0 .6rem; } .sim-controls { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; margin-bottom:.8rem; } .sim-controls label { display:flex; flex-direction:column; gap:.2rem; color:var(--muted); font-size:.8rem; } .sim-controls input, .sim-controls select { width:9rem; } .sim-run-row { display:flex; align-items:center; gap:.8rem; } .paywall { display:flex; align-items:center; gap:1rem; padding:1rem; background:var(--panel); border:1px solid var(--accent); border-radius:10px; } .paywall-lock { font-size:1.8rem; } .paywall-title { font-weight:700; } .paywall p { margin:.2rem 0 0; max-width:48ch; } .paywall button { margin-left:auto; flex:0 0 auto; } .sim-summary { display:flex; flex-direction:column; gap:.3rem; max-width:480px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.8rem; margin:.8rem 0; } .sim-hist { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.6rem; margin-bottom:1rem; } .hist-svg { width:100%; height:auto; } .hist-bar { fill:var(--accent); opacity:.85; } .hist-bar:hover { opacity:1; } .hist-axis { stroke:var(--line); stroke-width:1; } .hist-limit { stroke:var(--yellow); stroke-width:1.5; stroke-dasharray:4 3; } .hist-limit-label { fill:var(--muted); font-size:10px; }