/* channels-link in the strip-right — neighbor of the sign-in button. */ .channels-link { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 0.04em; color: #9b2c98; background: #f2e4f2; padding: 5px 11px; border-radius: 2px; text-decoration: none; border: 1px solid #e8d4e8; transition: background 140ms, color 140ms; margin-right: 8px; } .channels-link:hover { background: #9b2c98; color: #ffffff; border-color: #9b2c98; } /* NRS BoosterWare — SSM-inspired aesthetic. * 5th distinct flavor per CLAUDE.md aesthetic-variety rule. * * Palette sourced from stralsakerhetsmyndigheten.se main.css (2026-05-11): * #9b2c98 brand magenta-purple (primary, 49 uses on official site) * #5d265f deep purple (headers, hover-active state) * #af56ad mid purple (links, hover) * #a379a9 muted purple (secondary text) * #f2e4f2 pale purple tint (light bg accents) * #f4ebf5 lightest tint (card backgrounds) * #e54483 pink accent (calls to action) * #f5c63b warning yellow (cautions) * #d30000 hazard red (errors) * #03a500 / #74ce55 safety green (success) * #f4f4f4 page bg (light governmental neutral) * #595959 body text (Swedish-typographic dark grey) * * NOT branded as SSM. References SSM's visual register (light governmental, * magenta hero, generous whitespace) without copying their wordmark. */ :root { --purple-0: #9b2c98; --purple-deep: #5d265f; --purple-darker: #852683; --purple-mid: #af56ad; --purple-muted: #826187; --purple-tint: #f2e4f2; --purple-light: #f4ebf5; --pink-accent: #e54483; --warning-yellow: #f5c63b; --hazard-red: #d30000; --safety-green: #03a500; --bg-page: #f4f4f4; --bg-card: #ffffff; --bg-soft: #f4ebf5; --line-soft: #e8e8e8; --line-mid: #d6d6d6; --ink-0: #2c2c2c; --ink-1: #595959; --ink-2: #5f5f5f; --ink-3: #b2b2b2; /* text drawn ON a --purple-0 accent fill; flips per theme for WCAG AA */ --on-accent: #ffffff; --font-display: 'Chakra Petch', 'IBM Plex Mono', monospace; --font-sans: 'Familjen Grotesk', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace; --pad: 22px; --card-max: 940px; } /* Dark-mode palette. Triggered explicitly via [data-theme="dark"] on * (set by ssmailab.js from localStorage) so the user choice wins * over OS preference. The OS-preference auto-apply only fires when no * explicit choice exists. Hues stay in the magenta-purple family so the * SSM-derived flavor is preserved. */ :root[data-theme="dark"] { --purple-0: #d572cf; --purple-deep: #f0b0e8; --purple-darker: #b04dac; --purple-mid: #b66cb2; --purple-muted: #9d79a0; --purple-tint: #2f1d31; --purple-light: #251a28; --pink-accent: #ff6fa3; --warning-yellow: #f5c63b; --hazard-red: #ff5a5a; --safety-green: #6ad06b; --bg-page: #150f17; --bg-card: #1d1320; --bg-soft: #251a28; --line-soft: #2e2030; --line-mid: #3d2a3f; --ink-0: #f0e6ee; --ink-1: #c4b8c1; --ink-2: #a99ba4; --ink-3: #6e5e6a; --on-accent: #150f17; } @media (prefers-color-scheme: dark) { /* Auto dark when user hasn't picked yet (:not([data-theme]) on html). */ :root:not([data-theme]) { --purple-0: #d572cf; --purple-deep: #f0b0e8; --purple-darker: #b04dac; --purple-mid: #b66cb2; --purple-muted: #9d79a0; --purple-tint: #2f1d31; --purple-light: #251a28; --pink-accent: #ff6fa3; --warning-yellow: #f5c63b; --hazard-red: #ff5a5a; --safety-green: #6ad06b; --bg-page: #150f17; --bg-card: #1d1320; --bg-soft: #251a28; --line-soft: #2e2030; --line-mid: #3d2a3f; --ink-0: #f0e6ee; --ink-1: #c4b8c1; --ink-2: #a99ba4; --ink-3: #6e5e6a; --on-accent: #150f17; } } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { background: var(--bg-page); color: var(--ink-0); font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55; } a { color: inherit; text-decoration: none; } /* ---------- top strip ---------- */ .gov-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad); border-bottom: 1px solid var(--line-mid); background: var(--bg-card); color: var(--ink-1); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; position: relative; z-index: 2; } .strip-left, .strip-right { display: flex; align-items: center; gap: 14px; } .brand { color: var(--purple-0); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.12em; } .strip-sep { color: var(--ink-3); } .surface-tag { color: var(--ink-0); font-weight: 600; letter-spacing: 0.16em; } .strip-right { display: flex; align-items: center; gap: 12px; } .session-tag { color: var(--ink-1); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 2px; } .signin-btn { background: transparent; border: 1px solid var(--purple-0); color: var(--purple-0); font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 11px; cursor: pointer; transition: background 0.18s, color 0.18s; } .signin-btn:hover { background: var(--purple-0); color: #fff; } .install-hint { color: var(--purple-0); font-weight: 600; cursor: pointer; border: 1px solid var(--purple-0); padding: 2px 8px; border-radius: 1px; transition: background 0.18s; } .install-hint:hover { background: var(--purple-light); } /* ---------- main stage ---------- */ .boosterware-stage { position: relative; min-height: calc(100vh - 100px); padding: 56px var(--pad) 80px; display: flex; flex-direction: column; align-items: center; gap: 38px; } .bg-decor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.55; } /* ---------- hero ---------- */ .hero { position: relative; z-index: 1; text-align: center; max-width: var(--card-max); margin: 0 auto; } .kicker { margin: 0 0 14px; color: var(--purple-0); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; } .display-mark { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(38px, 5vw, 64px); font-weight: 400; line-height: 1; letter-spacing: 0.04em; color: var(--purple-deep); } .display-mark .sep { color: var(--purple-0); margin: 0 0.25em; font-weight: 400; } .lede { margin: 14px auto 0; max-width: 620px; color: var(--ink-1); font-size: 17.5px; line-height: 1.55; } .tool-strip { position: relative; z-index: 1; width: min(var(--card-max), 100%); } .tool-tile { display: grid; gap: 5px; background: var(--bg-card); border: 1px solid var(--line-mid); padding: 14px 16px; color: var(--ink-0); transition: border-color 0.18s, transform 0.18s; } .tool-tile:hover { border-color: var(--purple-0); transform: translateY(-1px); } .tool-kicker { color: var(--purple-0); font: 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; } .tool-title { color: var(--purple-deep); font: 600 18px var(--font-sans); } .tool-copy { color: var(--ink-1); font-size: 13.5px; } /* ---------- prompt card ---------- */ .prompt-card { position: relative; z-index: 1; width: 100%; max-width: var(--card-max); background: var(--bg-card); color: var(--ink-0); border: 1px solid var(--line-soft); border-radius: 2px; padding: 30px 34px 34px; box-shadow: 0 22px 48px rgba(155, 44, 152, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04); } #ask-form { display: flex; flex-direction: column; gap: 14px; } .field-label { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple-deep); font-weight: 600; } .label-num { border: 1px solid var(--purple-0); padding: 1px 6px; color: var(--purple-0); } .label-text { color: var(--ink-1); } #prompt-input { width: 100%; resize: vertical; min-height: 142px; padding: 16px; font: 400 16.5px var(--font-sans); line-height: 1.55; color: var(--ink-0); background: var(--bg-page); border: 1px solid var(--line-mid); border-radius: 1px; outline: none; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } #prompt-input:focus { border-color: var(--purple-0); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(155, 44, 152, 0.18); } #prompt-input::placeholder { color: var(--ink-3); font-style: italic; } .prompt-meta { display: flex; justify-content: space-between; align-items: center; font: 400 11px var(--font-mono); letter-spacing: 0.06em; color: var(--ink-1); } .char-count.over { color: var(--hazard-red); font-weight: 600; } .state-pill { border: 1px solid var(--line-mid); padding: 2px 8px; background: var(--bg-page); text-transform: uppercase; letter-spacing: 0.08em; } .state-pill.state-ok { border-color: var(--safety-green); color: var(--safety-green); background: rgba(3, 165, 0, 0.05); } .state-pill.state-warn { border-color: var(--purple-mid); color: var(--purple-deep); background: var(--purple-light); } .state-pill.state-error { border-color: var(--hazard-red); color: var(--hazard-red); background: rgba(211, 0, 0, 0.05); } .primary-button { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; background: var(--purple-0); color: #ffffff; border: 1px solid var(--purple-darker); padding: 13px 24px; font: 600 13.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.18s, transform 0.06s, box-shadow 0.18s; } .primary-button:hover { background: var(--purple-deep); box-shadow: 0 8px 22px rgba(93, 38, 95, 0.30); } .primary-button:active { transform: translateY(1px); } .primary-button:disabled { background: var(--ink-3); border-color: var(--ink-3); color: var(--bg-card); cursor: wait; box-shadow: none; } .btn-key { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4); font-size: 13px; } /* ---------- output region ---------- */ .output-region { position: relative; z-index: 1; width: 100%; max-width: var(--card-max); border: 1px solid var(--line-soft); background: var(--bg-card); padding: 24px 28px 28px; } .output-region[hidden] { display: none; } .output-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; font: 600 11px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-1); } .output-num { border: 1px solid var(--purple-0); padding: 1px 6px; color: var(--purple-0); } .output-title { color: var(--purple-deep); } .output-state { margin-left: auto; color: var(--purple-0); font-weight: 700; } .output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .expert-card { border: 1px solid var(--line-soft); background: var(--purple-light); padding: 16px 18px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-0); display: flex; flex-direction: column; gap: 10px; min-height: 140px; transition: border-color 0.2s, background 0.2s; } .expert-card.loading-card { position: relative; overflow: hidden; border-color: rgba(155, 44, 152, 0.22); background: linear-gradient(120deg, rgba(244, 235, 245, 0.92), rgba(255, 255, 255, 0.92)), var(--purple-light); animation: loading-card-pulse 1.45s ease-in-out infinite; animation-delay: calc(var(--load-order, 0) * 130ms); } .expert-card.loading-card::before { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(155, 44, 152, 0.14), transparent); animation: loading-card-sweep 1.8s ease-in-out infinite; animation-delay: calc(var(--load-order, 0) * 160ms); } .skeleton-lines { display: grid; gap: 7px; margin-top: auto; } .skeleton-line { display: block; height: 8px; border-radius: 999px; background: rgba(155, 44, 152, 0.16); } .skeleton-line.wide { width: 92%; } .skeleton-line.mid { width: 68%; } .skeleton-line.short { width: 42%; } .notice-card { grid-column: 1 / -1; min-height: 96px; } .notice-error { border-color: rgba(211, 0, 0, 0.42); background: rgba(211, 0, 0, 0.045); } .notice-error .expert-id { color: var(--hazard-red); } .notice-empty { border-color: rgba(245, 198, 59, 0.70); background: rgba(245, 198, 59, 0.12); } @keyframes loading-card-pulse { 0%, 100% { border-color: rgba(155, 44, 152, 0.18); } 50% { border-color: rgba(155, 44, 152, 0.48); } } @keyframes loading-card-sweep { 0% { transform: translateX(-120%); } 58%, 100% { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .expert-card.loading-card, .expert-card.loading-card::before { animation: none; } } .expert-card .expert-id { color: var(--purple-0); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; } .expert-card .expert-body { color: var(--ink-1); flex: 1; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; } .expert-sources { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); flex-wrap: wrap; } .expert-sources .sources-label { color: var(--purple-deep); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-right: 2px; } .expert-sources .src-link { color: var(--purple-0); text-decoration: none; border: 1px solid var(--purple-mid); background: var(--bg-card); padding: 0 6px; font-weight: 600; transition: background 0.15s, border-color 0.15s; } .expert-sources .src-link:hover { background: var(--purple-tint); border-color: var(--purple-0); } .expert-contact { font-family: var(--font-mono); font-size: 11px; color: var(--purple-deep); text-decoration: none; letter-spacing: 0.04em; padding: 2px 6px; border: 1px solid var(--line-soft); background: var(--bg-card); align-self: flex-start; transition: border-color 0.15s, color 0.15s, background 0.15s; } .expert-contact:hover { color: var(--purple-0); border-color: var(--purple-mid); background: var(--purple-light); } .expert-card .expert-rate { display: flex; gap: 6px; font-size: 12px; flex-wrap: wrap; } .expert-card .trace-btn { margin-left: auto; border-style: dashed; } .expert-trace-wrap.trace-open { border-top: 1px dashed var(--purple-mid); margin-top: 6px; padding-top: 8px; } .trace-loading, .trace-empty { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); font-style: italic; padding: 4px 0; } .trace-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .trace-event { display: grid; grid-template-columns: 70px 120px 1fr; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); padding: 4px 6px; background: var(--bg-page); border: 1px solid var(--line-soft); } .trace-event .trace-ts { color: var(--purple-0); font-variant-numeric: tabular-nums; } .trace-event .trace-kind { color: var(--purple-deep); font-weight: 600; letter-spacing: 0.06em; } .trace-event .trace-summary { color: var(--ink-0); } @media (max-width: 540px) { .trace-event { grid-template-columns: 1fr; gap: 2px; } } /* ---------- cost panel ---------- */ .cost-panel { position: relative; z-index: 1; width: 100%; max-width: var(--card-max); background: var(--bg-card); border: 1px solid var(--line-soft); padding: 22px 26px 22px; } .cost-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0 16px; } .cost-stat { display: grid; gap: 4px; padding: 10px 12px; background: var(--purple-light); border: 1px solid var(--line-soft); } .cost-stat-label { color: var(--purple-deep); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .cost-stat-value { color: var(--ink-0); font-family: var(--font-mono); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .cost-stat-sub { color: var(--ink-1); font-family: var(--font-mono); font-size: 11px; } /* merged cost window: the single overlaid chart + togglable legend are rendered by the shared renderer (cost-plot.js); this just gives the mount point breathing room inside the SSM card. The shared renderer ships its own .shared-cost-* styling (chart, legend swatches, toggle states). */ .cost-merged-mount { margin-top: 14px; } .cost-hint { margin: 10px 0 0; color: var(--ink-1); font-family: var(--font-mono); font-size: 11.5px; font-style: italic; } /* ---------- experts directory ---------- */ .experts-directory { position: relative; z-index: 1; width: 100%; max-width: var(--card-max); background: var(--bg-card); border: 1px solid var(--line-soft); padding: 22px 26px 24px; } .directory-title { margin: 0 0 8px; font: 400 22px var(--font-display); letter-spacing: 0.04em; color: var(--purple-deep); } .directory-lede { margin: 0 0 14px; color: var(--ink-1); font-size: 14px; line-height: 1.5; } .directory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .directory-row { display: grid; grid-template-columns: 100px 130px 130px 1fr; gap: 12px; align-items: center; padding: 8px 10px; font-family: var(--font-mono); font-size: 12.5px; background: var(--purple-light); border: 1px solid var(--line-soft); } .directory-row .dir-id { color: var(--purple-0); font-weight: 700; letter-spacing: 0.06em; } .directory-row .dir-model { color: var(--ink-0); } .directory-row .dir-style { color: var(--ink-1); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; } .directory-row .dir-contact { color: var(--purple-0); text-decoration: none; font-weight: 600; padding: 2px 8px; border: 1px solid var(--purple-mid); background: var(--bg-card); justify-self: end; transition: background 0.15s; } .directory-row .dir-contact:hover { background: var(--purple-tint); } .directory-placeholder { color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; font-style: italic; padding: 8px 0; } @media (max-width: 740px) { .directory-row { grid-template-columns: 1fr; gap: 4px; } .directory-row .dir-contact { justify-self: start; } } /* ---------- ensemble compose ---------- */ .ensemble-compose { position: relative; z-index: 1; width: 100%; max-width: var(--card-max); background: var(--bg-card); border: 1px solid var(--line-soft); padding: 22px 26px 24px; } .ensemble-active-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--purple-tint); border: 1px solid var(--purple-mid); margin-bottom: 14px; font-family: var(--font-mono); font-size: 12px; } .ensemble-active-label { color: var(--purple-deep); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .ensemble-active-name { color: var(--purple-0); font-weight: 700; flex: 1; } .ensemble-action-btn { background: var(--bg-card); color: var(--purple-0); border: 1px solid var(--purple-mid); padding: 3px 10px; font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ensemble-action-btn:hover { background: var(--purple-light); border-color: var(--purple-0); } .ensemble-action-btn.ens-delete { border-color: var(--line-mid); color: var(--ink-2); padding: 3px 8px; } .ensemble-action-btn.ens-delete:hover { border-color: var(--hazard-red); color: var(--hazard-red); background: rgba(211, 0, 0, 0.05); } .ensemble-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; } .ensemble-row { display: grid; grid-template-columns: 140px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-page); border: 1px solid var(--line-soft); } .ensemble-row.is-active { background: var(--purple-light); border-color: var(--purple-mid); } .ensemble-row .ens-name { color: var(--purple-deep); font-weight: 700; } .ensemble-row .ens-members { color: var(--ink-1); font-size: 11px; letter-spacing: 0.04em; } .ensemble-save-row { display: flex; gap: 10px; align-items: stretch; } .ensemble-name-input { flex: 1; padding: 10px 12px; font: 400 13.5px var(--font-mono); color: var(--ink-0); background: var(--bg-page); border: 1px solid var(--line-mid); outline: none; transition: border-color 0.18s, box-shadow 0.18s; } .ensemble-name-input:focus { border-color: var(--purple-0); box-shadow: 0 0 0 3px rgba(155, 44, 152, 0.18); background: var(--bg-card); } .primary-button.small { font-size: 11.5px; padding: 8px 14px; letter-spacing: 0.08em; } .ensemble-hint { margin: 12px 0 0; color: var(--ink-1); font-family: var(--font-mono); font-size: 11.5px; font-style: italic; } @media (max-width: 740px) { .ensemble-row { grid-template-columns: 1fr; gap: 4px; } .ensemble-save-row { flex-direction: column; } } .expert-card .rate-btn { border: 1px solid var(--line-mid); padding: 2px 10px; background: var(--bg-card); color: var(--ink-1); cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: 0.04em; transition: border-color 0.15s, color 0.15s, background 0.15s; } .expert-card .rate-btn:hover { border-color: var(--purple-0); color: var(--purple-0); background: var(--purple-light); } .expert-card.rated-up { border-color: var(--safety-green); background: rgba(3, 165, 0, 0.06); } .expert-card.rated-down { border-color: var(--hazard-red); background: rgba(211, 0, 0, 0.04); } .expert-card.hidden-expert { opacity: 0.32; filter: grayscale(0.6); } .output-hint { margin: 16px 0 0; font: 400 12px var(--font-mono); color: var(--ink-1); letter-spacing: 0.05em; } /* ---------- callout ---------- */ .callout { position: relative; z-index: 1; width: 100%; max-width: var(--card-max); border-top: 2px solid var(--purple-0); background: var(--bg-card); display: grid; gap: 0; margin-top: 6px; padding: 10px 14px; } .callout-row { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 12px; } .callout-row:last-child { border-bottom: 0; } .callout-label { color: var(--purple-deep); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; } .callout-value { color: var(--ink-1); } /* ---------- footer ---------- */ .gov-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px var(--pad); color: var(--ink-1); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border-top: 1px solid var(--line-mid); background: var(--bg-card); } .gov-foot #footer-ts { color: var(--purple-0); font-variant-numeric: tabular-nums; } /* ---------- responsive ---------- */ @media (max-width: 740px) { :root { --pad: 14px; } .boosterware-stage { padding: 38px var(--pad) 60px; gap: 28px; } .prompt-card { padding: 22px 18px 26px; } .callout-row { grid-template-columns: 1fr; gap: 4px; } .status-banner { font-size: 11.5px; padding: 8px 12px; } .theme-toggle-btn { padding: 4px 7px; } } /* ---------- status banner (offline + booster-unreachable) ---------- */ .status-banner { display: flex; align-items: center; gap: 10px; padding: 9px var(--pad); background: rgba(245, 198, 59, 0.16); color: var(--ink-0); border-bottom: 1px solid rgba(245, 198, 59, 0.5); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; position: relative; z-index: 3; } .status-banner[hidden] { display: none; } .status-banner.status-offline { background: rgba(211, 0, 0, 0.10); border-bottom-color: rgba(211, 0, 0, 0.55); color: var(--hazard-red); } .status-banner.status-degraded { background: rgba(245, 198, 59, 0.18); border-bottom-color: rgba(245, 198, 59, 0.55); } .status-banner.status-ok { background: rgba(3, 165, 0, 0.10); border-bottom-color: rgba(3, 165, 0, 0.45); color: var(--safety-green); } .status-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning-yellow); flex-shrink: 0; animation: status-pulse 1.7s ease-in-out infinite; } .status-banner.status-offline .status-banner-dot { background: var(--hazard-red); } .status-banner.status-ok .status-banner-dot { background: var(--safety-green); animation: none; } .status-banner-text { flex: 1; } .status-banner-retry { background: transparent; border: 1px solid currentColor; color: inherit; font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; cursor: pointer; transition: background 0.15s; } .status-banner-retry:hover { background: rgba(0, 0, 0, 0.07); } .status-banner-retry[hidden] { display: none; } @keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .status-banner-dot { animation: none; } } /* ---------- theme toggle ---------- */ .theme-toggle-btn { background: transparent; border: 1px solid var(--line-mid); color: var(--purple-0); font-size: 14px; line-height: 1; padding: 5px 9px; border-radius: 2px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .theme-toggle-btn:hover { background: var(--purple-light); border-color: var(--purple-0); color: var(--purple-0); } /* ---------- output summary (fastest lens + evidence count) ---------- */ .output-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; padding: 8px 12px; background: var(--purple-light); border: 1px dashed var(--purple-mid); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-1); } .output-summary[hidden] { display: none; } .output-summary-fastest { color: var(--purple-deep); font-weight: 600; } .output-summary-fastest::before { content: '★'; color: var(--pink-accent); margin-right: 4px; } .output-summary-evidence { color: var(--ink-2); margin-left: auto; } /* ---------- export button ---------- */ .output-export-btn { margin-left: 8px; background: transparent; border: 1px solid var(--purple-mid); color: var(--purple-0); font: 600 10.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; cursor: pointer; transition: background 0.15s, color 0.15s; } .output-export-btn[hidden] { display: none; } .output-export-btn:hover { background: var(--purple-0); color: var(--bg-card); } /* ---------- per-expert metric badges ---------- */ .expert-meta-row { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-2); } .expert-meta-chip { padding: 1px 7px; border: 1px solid var(--line-soft); background: var(--bg-card); border-radius: 1px; color: var(--ink-1); font-variant-numeric: tabular-nums; } .expert-meta-chip.chip-latency { color: var(--purple-0); border-color: var(--purple-mid); } .expert-meta-chip.chip-fastest { color: var(--pink-accent); border-color: var(--pink-accent); font-weight: 600; } .expert-meta-chip.chip-error { color: var(--hazard-red); border-color: var(--hazard-red); } .expert-meta-chip.chip-warn { color: #a26d00; border-color: var(--warning-yellow); background: rgba(245, 198, 59, 0.12); } .expert-meta-chip.chip-grounded { color: var(--safety-green); border-color: var(--safety-green); } .expert-meta-chip.chip-lane-paid { color: var(--pink-accent); border-color: var(--pink-accent); } .expert-meta-chip.chip-lane-foss { color: var(--purple-0); border-color: var(--purple-mid); } .expert-meta-chip.chip-phase { font-size: 9.5px; color: var(--ink-2); } .expert-card.is-fastest { border-color: var(--pink-accent); box-shadow: 0 0 0 1px rgba(229, 68, 131, 0.3) inset; } /* ---------- star rating ---------- */ .expert-rating-row { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); border-top: 1px dotted var(--line-soft); padding-top: 8px; margin-top: 2px; flex-wrap: wrap; } .expert-rating-label { letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-deep); font-weight: 600; } .star-btn { background: none; border: 0; padding: 1px 3px; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; transition: color 0.12s, transform 0.06s; font-family: inherit; } .star-btn:hover { transform: scale(1.18); color: var(--pink-accent); } .star-btn.star-filled { color: var(--pink-accent); } .star-btn:focus-visible { outline: 2px solid var(--purple-0); outline-offset: 2px; } .rating-status { margin-left: auto; font-style: italic; font-size: 10.5px; color: var(--ink-2); } .rating-status.rating-ok { color: var(--safety-green); } .rating-status.rating-error { color: var(--hazard-red); } /* ---------- hallucination indicator ---------- */ .expert-hallucination-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 4px 8px; border-left: 3px solid var(--warning-yellow); background: rgba(245, 198, 59, 0.08); color: #6e4d00; } :root[data-theme="dark"] .expert-hallucination-note, :root:not([data-theme]) .expert-hallucination-note { /* dark variant — slightly different background */ } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .expert-hallucination-note { color: #f5c63b; } } :root[data-theme="dark"] .expert-hallucination-note { color: #f5c63b; } /* Preporter dialog (Generera rapport) */ .tool-tile-button { background: var(--bg-1, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08)); text-align: left; font: inherit; color: inherit; cursor: pointer; } .tool-tile-button:hover { background: var(--bg-2, rgba(255,255,255,.06)); } #preporter-dialog { border: 1px solid var(--border, #2a2a2a); background: var(--bg-0, #111); color: inherit; padding: 20px; border-radius: 6px; max-width: 640px; width: 90vw; font-family: 'Familjen Grotesk', sans-serif; } #preporter-dialog::backdrop { background: rgba(0, 0, 0, 0.6); } #preporter-form h2 { margin: 0 0 12px 0; font-family: 'Chakra Petch', monospace; font-size: 18px; } #preporter-form label { display: block; margin-top: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; } #preporter-form input, #preporter-form select { display: block; width: 100%; margin-top: 4px; padding: 8px; background: var(--bg-1, rgba(255,255,255,.04)); color: inherit; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 3px; font: inherit; box-sizing: border-box; } .preporter-actions { margin-top: 16px; display: flex; gap: 8px; } .preporter-actions button { padding: 8px 14px; background: var(--accent, #2a7d5c); color: #fff; border: 0; border-radius: 3px; cursor: pointer; font: inherit; } .preporter-actions #prep-cancel { background: var(--bg-2, rgba(255,255,255,.08)); color: inherit; } .preporter-status { margin-top: 12px; font-size: 13px; min-height: 1.2em; } .preporter-status[data-tone="err"] { color: #d57b5b; } .preporter-status[data-tone="ok"] { color: #6cc28f; } .preporter-output { margin-top: 12px; max-height: 40vh; overflow: auto; padding: 10px; background: var(--bg-1, rgba(255,255,255,.04)); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 3px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: pre-wrap; } #prep-download { margin-top: 8px; padding: 6px 12px; background: var(--bg-2, rgba(255,255,255,.08)); color: inherit; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 3px; cursor: pointer; font: inherit; } /* ── 2026-05-28: cross-surface scope hint + lang toggle + SSMFS indicator + SSM regulator deep-dive section ─────────────────────────────────── */ /* Cross-surface scope hint (shown when arriving from nrs.html with nrs.scope === 'ssm'). Placed in main, above the hero. */ .scope-hint { max-width: 1100px; margin: 12px auto 0; padding: 8px 14px; background: #f2e4f2; border: 1px solid #e8d4e8; border-radius: 4px; color: #5d265f; font: 12.5px 'IBM Plex Mono', monospace; letter-spacing: 0.02em; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .scope-hint a { color: #9b2c98; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; } .scope-hint a:hover { color: #5d265f; } /* Lang toggle in header — 🇸🇪 / 🇬🇧 pill. */ .lang-toggle { display: inline-flex; align-items: center; gap: 0; border: 1px solid #e8d4e8; border-radius: 999px; padding: 2px; background: #ffffff; margin-right: 8px; } .lang-toggle button { background: transparent; border: none; cursor: pointer; padding: 4px 9px; font: 13px 'IBM Plex Mono', monospace; border-radius: 999px; color: #5d265f; opacity: 0.7; transition: background 140ms, opacity 140ms; min-height: 28px; } .lang-toggle button[aria-pressed="true"] { background: #9b2c98; color: #ffffff; opacity: 1; font-weight: 600; } .lang-toggle button:hover:not([aria-pressed="true"]) { background: #f2e4f2; opacity: 1; } /* SSMFS coverage indicator strip. */ .ssmfs-coverage { max-width: 1100px; margin: 16px auto 0; padding: 10px 16px; background: #f4ebf5; border-left: 3px solid #9b2c98; border-radius: 0 4px 4px 0; font: 12.5px 'IBM Plex Mono', monospace; color: #5d265f; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .ssmfs-coverage strong { font-weight: 600; color: #9b2c98; } .ssmfs-coverage .ssmfs-coverage-note { font-size: 11px; opacity: 0.78; font-style: italic; } .ssmfs-coverage a { color: #9b2c98; text-decoration: underline; text-underline-offset: 2px; } /* SSM regulator deep-dive section. */ .ssm-deep-dive { max-width: 1100px; margin: 28px auto 0; padding: 0; border-radius: 6px; background: #fdfafd; border: 1px solid #e8d4e8; overflow: hidden; } .ssm-deep-dive summary { cursor: pointer; padding: 14px 18px; font-family: 'Chakra Petch', 'IBM Plex Mono', monospace; font-size: 17px; letter-spacing: 0.03em; color: #5d265f; background: #f4ebf5; list-style: none; user-select: none; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid transparent; } .ssm-deep-dive summary::after { content: "▸"; font-size: 14px; color: #9b2c98; transition: transform 180ms ease; } .ssm-deep-dive[open] summary::after { transform: rotate(90deg); } .ssm-deep-dive[open] summary { border-bottom-color: #e8d4e8; } .ssm-deep-dive-body { padding: 16px 20px 20px; font-family: 'Familjen Grotesk', system-ui, sans-serif; font-size: 14px; color: #2b1230; line-height: 1.55; } .ssm-deep-dive-body h3 { font-family: 'Newsreader', Georgia, serif; font-size: 14.5px; font-weight: 600; margin: 14px 0 6px; color: #5d265f; } .ssm-deep-dive-body p { margin: 4px 0 8px; } .ssm-deep-dive-body .deep-mission-sv { font-style: italic; color: #5d265f; } .ssm-deep-dive-body ul { margin: 4px 0 8px; padding-left: 20px; } .ssm-deep-dive-body li { margin: 3px 0; font-size: 13px; } .ssm-deep-dive-body .deep-cta { margin-top: 14px; padding: 10px 14px; background: #9b2c98; color: #ffffff; border: none; border-radius: 3px; font: 500 13px 'Familjen Grotesk', system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; min-height: 38px; transition: background 140ms; } .ssm-deep-dive-body .deep-cta:hover { background: #5d265f; } .ssm-deep-dive-body .deep-ssmfs-loading, .ssm-deep-dive-body .deep-ssmfs-empty { font: 11.5px 'IBM Plex Mono', monospace; opacity: 0.65; padding: 4px 0; } .ssm-deep-dive-body .deep-ssmfs-link { color: #9b2c98; text-decoration: none; border-bottom: 1px dotted #c79bc7; } .ssm-deep-dive-body .deep-ssmfs-link:hover { color: #5d265f; border-bottom-style: solid; } @media (max-width: 640px) { .scope-hint, .ssmfs-coverage { flex-direction: column; align-items: flex-start; } } /* ── Regelverk & ansvar per funktion ──────────────────────────────────── */ .regbasis { max-width: var(--card-max); margin: 32px auto 8px; padding: 0 var(--pad); } .regbasis-head { display: flex; gap: 14px; align-items: flex-start; border-top: 2px solid var(--purple-darker); padding-top: 18px; margin-bottom: 18px; } .regbasis-num { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--purple-darker); flex: none; } .regbasis-title { font-family: var(--font-sans); font-size: 19px; font-weight: 700; color: var(--purple-deep); margin: 0 0 6px; } .regbasis-sub { font-size: 13px; line-height: 1.55; color: var(--purple-muted); margin: 0; max-width: 760px; } .regbasis-sub strong { color: var(--purple-darker); } .regbasis-sub [lang="en"] { font-style: italic; opacity: .8; } .regbasis-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .rb-card { background: var(--bg-card); border: 1px solid var(--line-mid); border-radius: 8px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .rb-card.rb-planned { border-style: dashed; background: var(--bg-soft); } .rb-card-head { display: flex; align-items: center; gap: 8px; } .rb-icon { font-size: 16px; flex: none; } .rb-name { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--purple-deep); flex: 1; } .rb-badge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--warning-yellow); color: #4a3a00; padding: 2px 6px; border-radius: 4px; flex: none; } .rb-group { border-left: 3px solid var(--line-mid); padding-left: 10px; } .rb-group.rb-laws { border-left-color: var(--purple-darker); } .rb-group.rb-regs { border-left-color: var(--pink-accent); } .rb-group.rb-resp { border-left-color: var(--safety-green); } .rb-group-label { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--purple-muted); margin-bottom: 3px; } .rb-list { list-style: none; margin: 0; padding: 0; } .rb-list li { font-size: 12.5px; line-height: 1.5; color: var(--purple-deep); padding: 1px 0 1px 12px; position: relative; } .rb-list li::before { content: "·"; position: absolute; left: 2px; color: var(--purple-muted); } .rb-group.rb-resp .rb-list li { color: #2b4a2b; } .regbasis-foot { font-size: 11.5px; line-height: 1.5; color: var(--purple-muted); margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); max-width: 760px; } /* ── DSA/PSA safety-analysis-triage demo panel ───────────────────────────── * Shares the reg-basis purple palette. Body text uses --ink-0 / --purple-deep * over --bg-card for ≥4.5:1 contrast (WCAG AA). Status/flag colours are kept * deliberately dark on the light bg so they also clear AA. */ .triage { max-width: var(--card-max); margin: 32px auto 8px; padding: 0 var(--pad); } .triage-head { display: flex; gap: 14px; align-items: flex-start; border-top: 2px solid var(--purple-darker); padding-top: 18px; margin-bottom: 18px; } .triage-num { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--purple-darker); flex: none; } .triage-title { font-family: var(--font-sans); font-size: 19px; font-weight: 700; color: var(--purple-deep); margin: 0 0 8px; } .triage-banner { font-size: 12.5px; line-height: 1.55; color: var(--purple-darker); margin: 0; max-width: 760px; background: var(--bg-soft); border: 1px solid var(--purple-mid); border-left: 4px solid var(--warning-yellow); border-radius: 6px; padding: 9px 12px; } .triage-loading { font-family: var(--font-mono); font-size: 12px; color: var(--purple-muted); } .tr-lede { font-size: 13px; line-height: 1.55; color: var(--purple-muted); margin: 0 0 14px; max-width: 760px; } /* selector */ .tr-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tr-doc-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; cursor: pointer; text-align: left; background: var(--bg-card); color: var(--purple-deep); border: 1px solid var(--line-mid); border-radius: 7px; padding: 7px 11px; line-height: 1.25; transition: border-color .12s, background .12s; } .tr-doc-btn:hover { border-color: var(--purple-0); } .tr-doc-btn[aria-pressed="true"] { border-color: var(--purple-0); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--purple-0); } .tr-doc-key { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #fff; background: var(--purple-0); width: 18px; height: 18px; flex: none; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; } .tr-doc-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; } /* result card */ .tr-result-card { background: var(--bg-card); border: 1px solid var(--line-mid); border-radius: 8px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; } .tr-card-head { display: flex; align-items: center; gap: 8px; } .tr-card-label { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--purple-deep); } .tr-excerpt { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-1); font-style: italic; border-left: 3px solid var(--line-mid); padding-left: 10px; } /* two axes */ .tr-axes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .tr-axis { display: flex; flex-direction: column; gap: 3px; background: var(--bg-soft); border: 1px solid var(--line-mid); border-radius: 7px; padding: 10px 12px; } .tr-axis-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--purple-0); } .tr-axis-headline { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--purple-deep); } .tr-axis-conf { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--purple-darker); } .tr-axis-sub { font-size: 11.5px; color: var(--purple-muted); } /* context chips */ .tr-ctx { display: flex; flex-wrap: wrap; gap: 8px; } .tr-chip { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--line-mid); border-radius: 5px; padding: 3px 8px; background: var(--bg-card); } .tr-chip-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-muted); } .tr-chip-v { font-family: var(--font-mono); font-size: 12px; color: var(--purple-deep); } /* section labels */ .tr-section-label { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--purple-muted); margin-bottom: 6px; } /* evidence chips */ .tr-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tr-ev-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; padding: 2px 7px; font-family: var(--font-mono); border: 1px solid var(--line-mid); background: var(--bg-card); } .tr-ev-tok { font-size: 11.5px; color: var(--purple-deep); } .tr-ev-axis { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--purple-muted); border-radius: 3px; padding: 1px 4px; } .tr-ev-chip.tr-ev-method { border-left: 3px solid var(--purple-0); } .tr-ev-chip.tr-ev-method .tr-ev-axis { background: var(--purple-0); } .tr-ev-chip.tr-ev-lifecycle { border-left: 3px solid var(--pink-accent); } .tr-ev-chip.tr-ev-lifecycle .tr-ev-axis { background: #b32366; } .tr-ev-chip.tr-ev-facility { border-left: 3px solid #1f6f1f; } .tr-ev-chip.tr-ev-facility .tr-ev-axis { background: #1f6f1f; } .tr-ev-chip.tr-ev-regime { border-left: 3px solid var(--purple-darker); } .tr-ev-chip.tr-ev-regime .tr-ev-axis { background: var(--purple-darker); } .tr-ev-chip.tr-ev-amendment { border-left: 3px solid #a65a00; } .tr-ev-chip.tr-ev-amendment .tr-ev-axis { background: #a65a00; } .tr-ev-chip.tr-ev-methodweak { border-left: 3px dashed var(--purple-muted); } /* completeness flags */ .tr-flag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .tr-flag { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--purple-deep); } .tr-flag-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .tr-flag-id { flex: 1; } .tr-flag-status { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 3px; flex: none; } .tr-flag-ok .tr-flag-dot { background: #1f6f1f; } .tr-flag-ok .tr-flag-status { color: #14500f; background: #d6efd6; } .tr-flag-missing .tr-flag-dot { background: #b00020; } .tr-flag-missing .tr-flag-status { color: #7a0016; background: #f6d6db; } .tr-flag-unstated .tr-flag-dot { background: #8a6d00; } .tr-flag-unstated .tr-flag-status { color: #6b5400; background: #f6ecc6; } /* badges */ .tr-badges { display: flex; flex-wrap: wrap; gap: 8px; } .tr-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; border-radius: 5px; } .tr-badge-review { color: #7a0016; background: #f6d6db; border: 1px solid #d98a96; } .tr-badge-stamp { color: #fff; background: var(--purple-darker); border: 1px solid var(--purple-deep); letter-spacing: .08em; } /* own-text classifier */ .tr-own-card { margin-top: 18px; padding: 16px 18px; background: var(--bg-soft); border: 1px solid var(--line-mid); border-radius: 8px; display: flex; flex-direction: column; gap: 10px; } .tr-own-title { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--purple-deep); margin: 0; } .tr-textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-0); background: var(--bg-card); border: 1px solid var(--line-mid); border-radius: 6px; padding: 9px 11px; } .tr-textarea:focus { outline: 2px solid var(--purple-0); outline-offset: 1px; } .tr-own-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .tr-run-btn { font: 600 13px var(--font-sans); cursor: pointer; color: #fff; background: var(--purple-0); border: 1px solid var(--purple-darker); border-radius: 6px; padding: 8px 16px; } .tr-run-btn:hover { background: var(--purple-deep); } .tr-run-btn:disabled { opacity: .55; cursor: default; } .tr-own-status { font-family: var(--font-mono); font-size: 11.5px; color: var(--purple-muted); margin: 0; } .tr-own-status.tr-status-ok { color: #14500f; } .tr-own-status.tr-status-note { color: var(--purple-darker); } .tr-own-mount:not(:empty) { margin-top: 4px; } .tr-empty { font-family: var(--font-mono); font-size: 11.5px; color: var(--purple-muted); margin: 0; } /* ── Guided tour (Guidad rundtur) ────────────────────────────────────────── * First-visit walkthrough. Four-segment overlay leaves a cut-out "hole" * around the spotlighted element (so the target stays bright + clickable- * looking) plus a ring outline; a positioned card carries the copy + nav. * Purple theme, WCAG-AA contrast, reduced-motion aware. el()-built only. */ .tour-replay-btn { background: transparent; border: 1px solid var(--purple-mid); color: var(--purple-0); font: 600 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .tour-replay-btn:hover { background: var(--purple-0); color: #ffffff; border-color: var(--purple-0); } .tour-replay-btn:focus-visible { outline: 2px solid var(--purple-0); outline-offset: 2px; } /* Overlay: four dimming panels around the cut-out, plus a ring. The panels * carry pointer events (click-to-skip-friendly via the card's controls); the * ring itself is non-interactive so it never traps the pointer. */ .tour-overlay { position: fixed; inset: 0; z-index: 1000; pointer-events: none; /* children opt back in */ } .tour-overlay[hidden] { display: none; } .tour-dim { position: fixed; background: rgba(35, 12, 38, 0.58); pointer-events: auto; transition: all 0.28s ease; } :root[data-theme="dark"] .tour-dim { background: rgba(8, 4, 10, 0.72); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tour-dim { background: rgba(8, 4, 10, 0.72); } } .tour-ring { position: fixed; pointer-events: none; border: 2px solid var(--purple-0); border-radius: 8px; box-shadow: 0 0 0 3px rgba(155, 44, 152, 0.30), 0 0 22px 4px rgba(155, 44, 152, 0.35); transition: all 0.28s ease; } @media (prefers-reduced-motion: reduce) { .tour-dim, .tour-ring, .tour-card { transition: none; } } /* Card: the dialog with title / body / controls. */ .tour-card { position: fixed; z-index: 1001; width: min(360px, calc(100vw - 28px)); background: var(--bg-card); color: var(--ink-0); border: 1px solid var(--purple-mid); border-top: 3px solid var(--purple-0); border-radius: 4px; box-shadow: 0 18px 50px rgba(35, 12, 38, 0.40); padding: 18px 20px 16px; pointer-events: auto; font-family: var(--font-sans); transition: top 0.28s ease, left 0.28s ease; } .tour-card-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple-0); font-weight: 600; margin-bottom: 6px; } .tour-card-count { margin-left: auto; color: var(--ink-2); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .tour-card-title { margin: 0 0 8px; font-family: var(--font-sans); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--purple-deep); } .tour-card-body { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-1); } .tour-card-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tour-btn { font: 600 11.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border-radius: 3px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .tour-btn:focus-visible { outline: 2px solid var(--purple-0); outline-offset: 2px; } .tour-btn-prev { background: transparent; border: 1px solid var(--line-mid); color: var(--ink-1); } .tour-btn-prev:hover:not(:disabled) { border-color: var(--purple-0); color: var(--purple-0); background: var(--purple-light); } .tour-btn-prev:disabled { opacity: 0.4; cursor: default; } .tour-btn-next { background: var(--purple-0); border: 1px solid var(--purple-darker); color: #ffffff; } .tour-btn-next:hover { background: var(--purple-deep); } .tour-btn-skip { margin-left: auto; background: transparent; border: 1px solid transparent; color: var(--ink-2); } .tour-btn-skip:hover { color: var(--hazard-red); border-color: var(--line-mid); background: var(--bg-page); } @media (max-width: 540px) { .tour-card { width: calc(100vw - 20px); left: 10px !important; right: 10px; } } /* ── Publik tillgänglighet — källkontroll (availcheck source-checker) ─────── * Shares the purple SSM-derived palette. Body text uses --ink-0 / --purple-deep * over --bg-card for ≥4.5:1 contrast (WCAG AA). Verdict badges are colour-coded * (publik=green / delvis=amber / ej-funnen=red / kan-ej-verifiera=grey) with a * deliberately dark foreground on a light tint so every badge clears AA too. */ .availcheck { max-width: var(--card-max); margin: 32px auto 8px; padding: 0 var(--pad); } .availcheck-head { display: flex; gap: 14px; align-items: flex-start; border-top: 2px solid var(--purple-darker); padding-top: 18px; margin-bottom: 18px; } .availcheck-num { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--purple-darker); flex: none; } .availcheck-title { font-family: var(--font-sans); font-size: 19px; font-weight: 700; color: var(--purple-deep); margin: 0 0 8px; } .availcheck-banner { font-size: 12.5px; line-height: 1.55; color: var(--purple-darker); margin: 0; max-width: 760px; background: var(--bg-soft); border: 1px solid var(--purple-mid); border-left: 4px solid var(--warning-yellow); padding: 9px 12px; border-radius: 0 4px 4px 0; } .availcheck-body { display: grid; gap: 16px; } .availcheck-loading { font: 11.5px var(--font-mono); color: var(--ink-2); font-style: italic; } .av-lede { margin: 0; color: var(--ink-1); font-size: 13.5px; line-height: 1.55; max-width: 760px; } .av-health-note, .av-calm-note { margin: 0; font: 12px var(--font-mono); line-height: 1.5; color: var(--purple-deep); background: var(--purple-light); border: 1px solid var(--purple-mid); border-radius: 4px; padding: 9px 12px; } .av-health-note:empty { display: none; } /* ── dropzone ── */ .av-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; border: 2px dashed var(--purple-mid); border-radius: 8px; background: var(--purple-light); padding: 28px 20px; cursor: pointer; color: var(--purple-deep); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .av-dropzone:hover { border-color: var(--purple-0); background: var(--purple-tint); } .av-dropzone:focus-visible { outline: 2px solid var(--purple-0); outline-offset: 3px; } .av-dropzone.av-dropzone-over { border-color: var(--purple-0); border-style: solid; background: var(--purple-tint); box-shadow: 0 0 0 3px rgba(155, 44, 152, 0.18); } .av-drop-icon { font-size: 30px; line-height: 1; color: var(--purple-0); } .av-drop-title { font: 600 14.5px var(--font-sans); color: var(--purple-deep); } .av-drop-sub { font: 11.5px var(--font-mono); color: var(--ink-1); } .av-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .av-drop-status { margin: 0; font: 12px var(--font-mono); line-height: 1.5; min-height: 1.2em; color: var(--ink-1); } .av-drop-status.av-status-busy { color: var(--purple-0); } .av-drop-status.av-status-ok { color: #1d6b1b; } /* darkened green for AA on light */ .av-drop-status.av-status-err { color: var(--hazard-red); } /* ── loading spinner ── */ .av-loading { display: flex; align-items: center; gap: 10px; font: 12.5px var(--font-mono); color: var(--purple-deep); background: var(--purple-light); border: 1px solid var(--purple-mid); border-radius: 4px; padding: 12px 14px; } .av-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--purple-mid); border-top-color: var(--purple-0); animation: av-spin 0.8s linear infinite; } @keyframes av-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .av-spinner { animation: none; } } /* ── results ── */ .av-result-mount:empty { display: none; } .av-result-mount { display: grid; gap: 12px; } .av-offline-note { font: 12px var(--font-mono); line-height: 1.5; color: #6e4d00; background: rgba(245, 198, 59, 0.14); border-left: 3px solid var(--warning-yellow); padding: 8px 12px; border-radius: 0 4px 4px 0; } .av-summary { margin: 0; font: 14px var(--font-sans); color: var(--ink-0); } .av-summary strong { color: var(--purple-deep); font-weight: 700; } .av-summary-elapsed { color: var(--ink-2); font: 11.5px var(--font-mono); } .av-empty { margin: 0; font: 12.5px var(--font-mono); color: var(--ink-2); font-style: italic; } .av-stmt-list { display: grid; gap: 10px; } .av-stmt-card { background: var(--bg-card); border: 1px solid var(--line-mid); border-left: 4px solid var(--purple-mid); border-radius: 6px; padding: 12px 14px 14px; display: grid; gap: 8px; } .av-stmt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .av-stmt-num { font: 700 11px var(--font-mono); color: var(--purple-0); border: 1px solid var(--purple-mid); border-radius: 3px; padding: 1px 7px; flex: none; font-variant-numeric: tabular-nums; } .av-stmt-conf { font: 10.5px var(--font-mono); color: var(--ink-2); letter-spacing: 0.04em; margin-left: auto; font-variant-numeric: tabular-nums; } .av-stmt-text { margin: 0; font: 13.5px var(--font-sans); line-height: 1.5; color: var(--ink-0); } .av-stmt-note { margin: 0; font: 11.5px var(--font-mono); line-height: 1.5; color: var(--ink-1); font-style: italic; } /* verdict badge + per-card left border, all AA on light bg */ .av-stmt-badge { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px; flex: none; border: 1px solid transparent; } .av-verdict-publik.av-stmt-badge { color: #0d5b0c; background: rgba(3, 165, 0, 0.14); border-color: rgba(3, 165, 0, 0.5); } .av-verdict-delvis.av-stmt-badge { color: #6e4d00; background: rgba(245, 198, 59, 0.20); border-color: rgba(245, 198, 59, 0.7); } .av-verdict-ejfunnen.av-stmt-badge { color: #a40000; background: rgba(211, 0, 0, 0.08); border-color: rgba(211, 0, 0, 0.42); } .av-verdict-kanej.av-stmt-badge { color: #4a4a4a; background: rgba(120, 120, 120, 0.12); border-color: var(--line-mid); } .av-stmt-card.av-verdict-publik { border-left-color: var(--safety-green); } .av-stmt-card.av-verdict-delvis { border-left-color: var(--warning-yellow); } .av-stmt-card.av-verdict-ejfunnen { border-left-color: var(--hazard-red); } .av-stmt-card.av-verdict-kanej { border-left-color: var(--ink-3); } /* sources */ .av-stmt-sources-wrap { display: grid; gap: 4px; } .av-sources-label { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--purple-muted); } .av-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .av-source { display: grid; gap: 2px; padding-left: 10px; border-left: 2px solid var(--line-soft); } .av-source-link { font: 600 12px var(--font-mono); color: var(--purple-0); text-decoration: none; border-bottom: 1px dotted var(--purple-mid); word-break: break-word; } .av-source-link:hover { color: var(--purple-deep); border-bottom-style: solid; } .av-source-title { font: 600 12px var(--font-mono); color: var(--ink-1); } .av-source-snippet { font: 11.5px var(--font-sans); color: var(--ink-1); line-height: 1.45; } .av-disclaimer { margin: 4px 0 0; font: 11.5px var(--font-mono); line-height: 1.5; color: var(--purple-darker); padding-top: 10px; border-top: 1px solid var(--line-soft); font-style: italic; } /* ── Q&A box ── */ .av-qna-box { background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 6px; padding: 16px 18px 18px; display: grid; gap: 10px; } .av-qna-title { margin: 0; font: 600 15px var(--font-sans); color: var(--purple-deep); } .av-qna-lede { margin: 0; font: 12px var(--font-mono); color: var(--ink-1); line-height: 1.5; } .av-qna-thread { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; } .av-qna-thread:empty { display: none; } .av-qna-row { display: grid; gap: 3px; padding: 8px 10px; border-radius: 5px; } .av-qna-q { background: var(--purple-light); border: 1px solid var(--line-soft); } .av-qna-a { background: var(--bg-soft); border: 1px solid var(--purple-mid); } .av-qna-a.av-qna-err { background: rgba(211, 0, 0, 0.05); border-color: rgba(211, 0, 0, 0.4); } .av-qna-role { font: 600 9.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--purple-muted); } .av-qna-q .av-qna-role { color: var(--purple-0); } .av-qna-text { margin: 0; font: 13px var(--font-sans); line-height: 1.5; color: var(--ink-0); white-space: pre-wrap; } .av-qna-a.av-qna-err .av-qna-text { color: var(--hazard-red); } .av-qna-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .av-qna-input { flex: 1 1 280px; resize: vertical; min-height: 48px; padding: 10px 12px; font: 400 13.5px var(--font-sans); line-height: 1.5; color: var(--ink-0); background: var(--bg-page); border: 1px solid var(--line-mid); border-radius: 3px; outline: none; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .av-qna-input:focus { border-color: var(--purple-0); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(155, 44, 152, 0.18); } .av-qna-input::placeholder { color: var(--ink-3); font-style: italic; } .av-qna-btn { flex: none; align-self: flex-start; background: var(--purple-0); color: #ffffff; border: 1px solid var(--purple-darker); padding: 10px 18px; font: 600 12px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-radius: 3px; transition: background 0.15s; } .av-qna-btn:hover { background: var(--purple-deep); } .av-qna-btn:disabled { background: var(--ink-3); border-color: var(--ink-3); cursor: wait; } .av-qna-status { align-self: center; font: 11px var(--font-mono); font-style: italic; color: var(--ink-2); } .av-qna-status.av-status-ok { color: #1d6b1b; } .av-qna-status.av-status-err { color: var(--hazard-red); } @media (max-width: 540px) { .av-stmt-conf { margin-left: 0; } .av-qna-btn { width: 100%; align-self: stretch; text-align: center; } } /* ── SSM article tree: collapsible category browser ──────────────────────── */ .article-tree { position: relative; z-index: 1; width: 100%; max-width: var(--card-max); margin: 0 auto 22px; background: var(--bg-card); border: 1px solid var(--line-soft); padding: 22px 26px 24px; } .article-tree-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .article-tree-num { font: 600 22px var(--font-display); color: var(--purple-0); line-height: 1; flex: 0 0 auto; margin-top: 2px; } .article-tree-title { margin: 0 0 4px; font: 600 21px var(--font-display); letter-spacing: 0.03em; color: var(--purple-deep); } .article-tree-sub { margin: 0; color: var(--ink-1); font-size: 13.5px; line-height: 1.5; } .article-tree-loading, .article-tree-total { margin: 0 0 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.02em; } .article-tree-total { color: var(--ink-1); font-weight: 600; } .article-tree-cats { display: grid; gap: 6px; } .article-tree-cat { border: 1px solid var(--line-soft); background: var(--purple-light); } .article-tree-cat[open] { border-color: var(--line-mid); } .article-tree-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-family: var(--font-mono); font-size: 13px; list-style: none; user-select: none; } .article-tree-summary::-webkit-details-marker { display: none; } .article-tree-summary:focus-visible { outline: 2px solid var(--purple-0); outline-offset: -2px; } .article-tree-summary:hover { background: var(--bg-soft); } .article-tree-caret { display: inline-block; color: var(--purple-0); font-size: 11px; transition: transform 0.15s ease; flex: 0 0 auto; } .article-tree-cat[open] > .article-tree-summary .article-tree-caret { transform: rotate(90deg); } .article-tree-catname { flex: 1 1 auto; color: var(--ink-0); font-weight: 600; letter-spacing: 0.02em; } .article-tree-catcount { flex: 0 0 auto; min-width: 2.6em; text-align: center; padding: 1px 8px; border-radius: 999px; background: var(--purple-0); color: var(--on-accent); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; } .article-tree-catstatus { margin: 0; padding: 8px 14px 12px 34px; font-family: var(--font-mono); font-size: 12px; font-style: italic; color: var(--ink-2); } .article-tree-list { list-style: none; margin: 0; padding: 0 14px 12px 34px; display: grid; gap: 4px; } .article-tree-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; border-bottom: 1px dotted var(--line-soft); } .article-tree-link { color: var(--purple-deep); text-decoration: none; font-size: 13px; line-height: 1.4; flex: 1 1 auto; min-width: 0; } .article-tree-link:hover { text-decoration: underline; } .article-tree-link:focus-visible { outline: 2px solid var(--purple-0); outline-offset: 2px; } .article-tree-rowmeta { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; } .article-tree-pdf { font: 700 9.5px var(--font-mono); letter-spacing: 0.08em; color: var(--hazard-red, #b02a2a); border: 1px solid currentColor; padding: 0 4px; border-radius: 3px; } .article-tree-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .article-tree-more, .article-tree-browseall { list-style: none; padding: 6px 0 2px; border-bottom: none; } .article-tree-more span { font-family: var(--font-mono); font-size: 11.5px; font-style: italic; color: var(--ink-2); } .article-tree-browseall .article-tree-link { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--purple-0); } @media (max-width: 540px) { .article-tree { padding: 18px 16px 20px; } .article-tree-list { padding-left: 22px; } .article-tree-row { flex-wrap: wrap; gap: 4px; } } /* ── Browse tree-nav (Bläddra) — collapsible left-rail index ──────────────── A thin governmental "index rail": the operator browses the surface's content hierarchically (Funktioner / Regelverk / Experter / Frågehistorik). Distinct from the inline .article-tree (which is an in-page section) — this is a fixed, slide-in left rail with a persistent edge handle. Reuses the SSM purple palette tokens so it tracks light/dark automatically. el()-built, no innerHTML. ───────────────────────────────────────────────────────────────────────── */ /* edge handle — always visible, toggles the rail */ .browse-handle { position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 40; width: 30px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--purple-0); color: #ffffff; border: 1px solid var(--purple-darker); border-left: none; border-radius: 0 6px 6px 0; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(93, 38, 95, 0.28); transition: left 0.22s cubic-bezier(.4,0,.2,1), background 0.16s; } .browse-handle:hover { background: var(--purple-deep); } .browse-handle:focus-visible { outline: 2px solid var(--pink-accent); outline-offset: 2px; } /* when the rail is open, ride the handle out to the rail's right edge */ body.has-browse-rail-open .browse-handle { left: 308px; } /* the rail itself */ .browse-rail { position: fixed; top: 0; left: 0; z-index: 39; width: 308px; max-width: 86vw; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg-card); border-right: 1px solid var(--line-mid); box-shadow: 6px 0 26px rgba(93, 38, 95, 0.14); transform: translateX(-100%); transition: transform 0.24s cubic-bezier(.4,0,.2,1); overflow: hidden; } .browse-rail.is-open { transform: translateX(0); } .browse-rail.is-closed { transform: translateX(-100%); } .browse-rail-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px 16px; border-bottom: 2px solid var(--purple-0); background: var(--purple-light); flex: 0 0 auto; } .browse-rail-mark { font-size: 17px; color: var(--purple-0); flex: 0 0 auto; } .browse-rail-heading { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; } .browse-rail-title { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.05em; color: var(--purple-deep); line-height: 1.1; } .browse-rail-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .browse-rail-close { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-mid); border-radius: 3px; color: var(--ink-1); font-size: 17px; line-height: 1; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .browse-rail-close:hover { border-color: var(--purple-0); color: var(--purple-0); background: var(--purple-light); } .browse-rail-close:focus-visible { outline: 2px solid var(--purple-0); outline-offset: 2px; } .browse-rail-tree { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 8px 24px; scrollbar-width: thin; scrollbar-color: var(--purple-mid) transparent; } .browse-rail-tree::-webkit-scrollbar { width: 9px; } .browse-rail-tree::-webkit-scrollbar-thumb { background: var(--purple-mid); border-radius: 9px; border: 2px solid var(--bg-card); } /* tree structure */ .browse-tree, .browse-group { list-style: none; margin: 0; padding: 0; } .browse-group { /* dotted indent guide running down the child column */ margin-left: 13px; padding-left: 9px; border-left: 1px dotted var(--line-mid); } .browse-group[hidden] { display: none; } .browse-item { margin: 0; } /* a row (the clickable/focusable surface for a treeitem) */ .browse-row { display: flex; align-items: baseline; gap: 7px; padding: 5px 8px 5px 6px; border-radius: 4px; cursor: pointer; color: var(--ink-0); font-family: var(--font-sans); font-size: 13px; line-height: 1.35; user-select: none; transition: background 0.13s, color 0.13s; } .browse-row:hover { background: var(--purple-light); } .browse-row.is-branch { font-weight: 600; } .browse-row.is-open { color: var(--purple-deep); } .browse-row:focus-visible, .browse-row:focus { outline: 2px solid var(--purple-0); outline-offset: -1px; background: var(--purple-tint); } /* top-level (group) rows get a heavier treatment */ .browse-tree > .browse-item > .browse-row { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--purple-deep); padding-top: 8px; padding-bottom: 8px; margin-top: 4px; } .browse-twisty { flex: 0 0 auto; width: 12px; color: var(--purple-0); font-size: 10px; text-align: center; transition: transform 0.12s; } .browse-bullet { flex: 0 0 auto; width: 12px; text-align: center; color: var(--ink-3); font-size: 11px; } .browse-ico { flex: 0 0 auto; color: var(--purple-mid); font-size: 12px; width: 14px; text-align: center; } .browse-label-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .browse-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browse-row:hover .browse-label, .browse-row:focus .browse-label, .browse-row.is-open .browse-label { white-space: normal; /* reveal long föreskrift/expert labels on hover/focus */ } .browse-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-2); text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browse-count { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--purple-0); background: var(--purple-light); border: 1px solid var(--purple-mid); border-radius: 999px; padding: 0 6px; line-height: 1.5; align-self: center; } .browse-tag { flex: 0 0 auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 2px; padding: 0 4px; align-self: center; } .browse-row-empty { cursor: default; color: var(--ink-2); font-style: italic; font-size: 12px; } .browse-row-empty:hover { background: transparent; } .browse-empty .browse-label { white-space: normal; } /* jump-flash: brief highlight on the section a leaf scrolls to */ .browse-jump-flash { animation: browse-jump-flash 1.2s ease-out; } @keyframes browse-jump-flash { 0% { box-shadow: 0 0 0 2px var(--purple-0), 0 0 0 8px rgba(155, 44, 152, 0.18); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .browse-rail, .browse-handle { transition: none; } .browse-jump-flash { animation: none; } } /* On wide screens, don't let the open rail hide content: nudge the stage over. The rail is fixed, so we pad the main stage when it's open. */ @media (min-width: 1100px) { body.has-browse-rail-open .boosterware-stage { padding-left: 332px; } } @media (max-width: 540px) { .browse-rail { width: 88vw; } body.has-browse-rail-open .browse-handle { left: 88vw; } }