* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #f4f6fa; color: #1c2330; line-height: 1.4; } header { background: #1c2330; color: #fff; padding: 16px 24px; } header h1 { margin: 0 0 8px; font-size: 18px; } header .intro { max-width: 720px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); } header .intro p { margin: 0 0 4px; } header .intro p:last-child { margin-bottom: 0; } header .intro .intro-hint { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.6); font-style: italic; } .mode-pill { display: inline-block; padding: 1px 8px; margin-right: 2px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff; letter-spacing: 0.01em; } .mode-pill-learn { background: rgba(74, 108, 247, 0.35); border-color: rgba(74, 108, 247, 0.55); } .mode-pill-optimize { background: rgba(45, 166, 106, 0.32); border-color: rgba(45, 166, 106, 0.55); } @media (max-width: 900px) { header { padding: 12px 16px; } header h1 { font-size: 16px; margin-bottom: 6px; } header .intro { font-size: 12px; line-height: 1.45; } header .intro p { margin-bottom: 3px; } header .intro .intro-hint { margin-top: 4px; font-size: 11px; } .mode-pill { font-size: 11px; padding: 1px 6px; } .layout { padding: 12px 16px 24px; gap: 12px; } } /* Mode tabs (Learn / Optimize) — minskar kognitiv belastning genom att dela upp UI:t i två tydliga lägen. Default mode-learn på . */ .mode-tabs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .mode-tab { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.25); padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; } .mode-tab:hover { background: rgba(255,255,255,0.18); } .mode-tab.active { background: #fff; color: #1c2330; border-color: #fff; } .mode-tab:disabled { opacity: 0.4; cursor: not-allowed; } /* Mode show/hide-reglerna ligger längst ned i filen så de vinner kaskaden även mot body.mode-parallel-reglerna (samma specificity, sista vinner). */ /* Search bar — lives in the header. Result dropdown is position:absolute anchored to the .search-bar wrapper so it floats over page content. */ .search-bar { position: relative; margin-top: 10px; max-width: 520px; } .search-bar #search-input { width: 100%; padding: 7px 32px 7px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.95); color: #1c2330; font-size: 13px; font-family: inherit; box-sizing: border-box; } .search-bar #search-input::placeholder { color: #6b7385; } .search-bar #search-input:focus { outline: 2px solid #4a6cf7; outline-offset: 1px; background: #fff; } .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: none; background: transparent; color: #5b6478; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 4px; } .search-clear:hover { background: rgba(0,0,0,0.08); color: #1c2330; } .search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid #d8dde8; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 100; color: #1c2330; } .search-count { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #5b6478; padding: 8px 12px; border-bottom: 1px solid #e2e6ee; background: #fafbfc; } .search-empty { padding: 16px 12px; text-align: center; font-size: 13px; color: #6b7385; } .search-list { display: flex; flex-direction: column; } .search-result { text-align: left; background: #fff; border: none; border-bottom: 1px solid #f0f2f6; padding: 10px 12px; cursor: pointer; font-family: inherit; color: inherit; width: 100%; } .search-result:last-child { border-bottom: none; } .search-result:hover, .search-result:focus-visible { background: #f3f6ff; outline: none; } .search-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; } .search-result-title { font-size: 14px; font-weight: 600; color: #1f2433; flex: 1; min-width: 0; } .search-result-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7385; white-space: nowrap; flex-shrink: 0; } .search-result-snippet { font-size: 12px; color: #4a5263; line-height: 1.45; } .search-result.search-result-expanded { background: #f3f6ff; border-left: 3px solid #4a6cf7; padding-left: 9px; } .search-result.search-result-expanded .search-result-snippet { white-space: normal; } /* Search target wayfinder — short pulse that draws the eye to the element the user just navigated to. Auto-removed after 2.5 s via JS. Animation re-triggers on repeated clicks by toggling the class with a forced reflow. */ @keyframes searchTargetPulse { 0% { background-color: #fff4cc; box-shadow: inset 4px 0 0 #f5b400; } 80% { background-color: #fff8e1; box-shadow: inset 4px 0 0 #f5b400; } 100% { background-color: transparent; box-shadow: inset 4px 0 0 transparent; } } .search-target-highlight { animation: searchTargetPulse 2.4s ease-out; border-radius: 6px; } .search-results mark { background: #fff3a8; color: inherit; padding: 0 2px; border-radius: 2px; } .search-more { padding: 8px 12px; font-size: 11px; color: #6b7385; text-align: center; background: #fafbfc; border-top: 1px solid #e2e6ee; } @media (max-width: 700px) { .search-bar { max-width: 100%; } .search-result-head { flex-direction: column; gap: 2px; } .search-result-type { align-self: flex-start; } } .layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding: 16px 24px 32px; max-width: 1400px; margin: 0 auto; } /* Sticky learning sidebar on desktop/tablet so the explanation panel stays visible while user scrolls through the long Learn/Optimize sections. align-self:start is required — without it the grid stretches the aside to the row height and position:sticky has nothing to stick to. The internal max-height + overflow-y lets the panel scroll itself when content gets tall (e.g. long pattern bodies on short viewports). Mobile (≤ 900px) keeps the natural stacked layout — see the breakpoint that flips .layout to single-column further down. */ @media (min-width: 901px) { .layout > aside { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; } } .panel { background: #fff; border-radius: 10px; border: 1px solid #e2e6ee; padding: 16px; margin-bottom: 16px; } .panel:last-child { margin-bottom: 0; } .panel h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #5b6478; } /* System map */ .layer-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7385; margin: 4px 0 6px; } .row { display: grid; gap: 10px; margin-bottom: 12px; } .row.bss { grid-template-columns: repeat(3, 1fr); } .row.oss { grid-template-columns: repeat(4, 1fr); } .system { background: #fbfcfe; border: 1px solid #d8dde8; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: all 0.2s; user-select: none; } .system:hover { border-color: #4a6cf7; background: #f3f6ff; } .system.bss { border-top: 3px solid #4a6cf7; } .system.oss { border-top: 3px solid #2da66a; } .system.active { background: #fff8e1; border-color: #f5b400; box-shadow: 0 0 0 3px #f5b40033; } .system.failed { background: #fde7e7; border-color: #e04646; box-shadow: 0 0 0 3px #e0464633; } .system.bottleneck { border-color: #c33; background: #fff0e8; } .system .name { font-weight: 600; font-size: 14px; } .system .role { font-size: 11px; color: #6b7385; margin-top: 2px; } /* Controls */ .controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } button { font: inherit; border: 1px solid #cdd3df; background: #fff; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; } button:hover { background: #f0f3fa; } button.primary { background: #4a6cf7; border-color: #4a6cf7; color: #fff; } button.primary:hover { background: #3a5be5; } button.danger { border-color: #e04646; color: #c33; } button.danger:hover { background: #fde7e7; } button:disabled { opacity: 0.4; cursor: not-allowed; } /* Status */ .status-row { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; font-size: 14px; } .status-pill { padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; background: #e8ecf4; color: #5b6478; } .status-pill.active { background: #d8f5e3; color: #1f7a47; } .status-pill.running { background: #fff4cc; color: #8a6500; } .status-pill.failed { background: #fde7e7; color: #b32a2a; } /* Event log */ .log { max-height: 260px; overflow-y: auto; border: 1px solid #e2e6ee; border-radius: 8px; background: #fafbfd; } .event { padding: 10px 12px; border-bottom: 1px solid #eaeef5; cursor: pointer; } .event:last-child { border-bottom: 0; } .event:hover { background: #f3f6ff; } .event .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .event .tech { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #1c2330; color: #8edcff; padding: 2px 6px; border-radius: 4px; } .event.fail .tech { background: #b32a2a; color: #fff; } .event .timing { font-size: 11px; color: #6b7385; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .event .domain { font-size: 13px; margin-top: 4px; color: #2c3a52; } .event .teach { font-size: 12px; margin-top: 4px; color: #5b6478; font-style: italic; } /* Timeline */ .timeline { display: flex; flex-direction: column; gap: 4px; } .tl-row { display: grid; grid-template-columns: 180px 80px 1fr; gap: 8px; align-items: center; font-size: 12px; } .tl-row.handoff .tl-label { color: #6b7385; font-style: italic; } .tl-label { color: #2c3a52; font-weight: 500; } .tl-label .sub { font-size: 11px; color: #6b7385; font-weight: 400; display: block; } .tl-duration { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #5b6478; font-size: 11px; text-align: right; } .tl-track { height: 22px; background: #f0f3fa; border-radius: 4px; position: relative; overflow: hidden; } .tl-bar { height: 100%; border-radius: 4px; width: 0; } .tl-bar.filling { transition: width linear; } .tl-bar.bss { background: #4a6cf7; } .tl-bar.oss { background: #2da66a; } .tl-bar.handoff { background: repeating-linear-gradient( 45deg, #c5cad6, #c5cad6 6px, #d8dde8 6px, #d8dde8 12px); } .tl-bar.fail { background: #c33; } .tl-bar.bottleneck { box-shadow: inset 0 0 0 2px #c33; } .tl-bar .pct { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .tl-bar.handoff .pct { color: #5b6478; text-shadow: none; } .timeline-empty { color: #6b7385; font-size: 13px; font-style: italic; padding: 12px 4px; } /* Metrics */ .metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .metric { background: #fafbfd; border: 1px solid #e2e6ee; border-radius: 6px; padding: 10px; } .metric .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7385; } .metric .value { font-size: 18px; font-weight: 600; margin-top: 4px; } .metric .sub { font-size: 11px; color: #5b6478; margin-top: 2px; } .metric.warn { border-color: #e04646; background: #fff0e8; } .insight { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #c33; background: #fff0e8; border-radius: 0 6px 6px 0; font-size: 13px; color: #2c3a52; } .insight.hidden { display: none; } @media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } } /* Learning panel */ #learning { background: #fff; border: 1px solid #e2e6ee; border-radius: 10px; padding: 16px; } #learning h3 { margin: 0 0 4px; font-size: 15px; } #learning .layer-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } #learning .layer-tag.bss { background: #e8eeff; color: #2c3da3; } #learning .layer-tag.oss { background: #e0f5e9; color: #1f7a47; } #learning section { margin-bottom: 10px; } #learning section h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; color: #6b7385; letter-spacing: 0.04em; } #learning section p { margin: 0; font-size: 13px; line-height: 1.55; } #learning section p + p, #learning section p + ul, #learning section ul + p { margin-top: 8px; } #learning section ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; } #learning section ul li { margin-bottom: 4px; } #learning section ul li:last-child { margin-bottom: 0; } #learning section em { font-style: italic; color: #2c3a52; } #learning section strong { color: #1c2330; } #learning .empty { color: #6b7385; font-size: 13px; } #learning .back { font-size: 12px; color: #4a6cf7; cursor: pointer; margin-bottom: 8px; display: inline-block; } #learning .back:hover { text-decoration: underline; } #learning .pattern-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eaeef5; } #learning .pattern-list h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; color: #6b7385; letter-spacing: 0.04em; } #learning .pattern-link { text-align: left; padding: 6px 10px; border: 1px solid #d8dde8; background: #fbfcfe; border-radius: 6px; font-size: 13px; cursor: pointer; } #learning .pattern-link:hover { background: #f3f6ff; border-color: #4a6cf7; } /* Order decomposition (domain learning slice) */ .decomp-intro { font-size: 13px; color: #5b6478; margin: 0 0 12px; } .decomp-tree { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .decomp-node { background: #fbfcfe; border: 1px solid #d8dde8; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .decomp-node:hover { border-color: #4a6cf7; background: #f3f6ff; } .decomp-node.decomp-customer { border-top: 3px solid #4a6cf7; } .decomp-node.decomp-service { border-top: 3px solid #2da66a; } .decomp-node.decomp-resource { border-top: 3px solid #2da66a; } .decomp-node.decomp-activation { border-top: 3px solid #2da66a; } .decomp-node.decomp-billing { border-top: 3px solid #4a6cf7; } .decomp-head { display: flex; align-items: center; gap: 8px; font-size: 14px; } .decomp-head .layer-tag { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .decomp-head .layer-tag.bss { background: #e8eeff; color: #2c3da3; } .decomp-head .layer-tag.oss { background: #e0f5e9; color: #1f7a47; } .decomp-body { font-size: 12px; color: #2c3a52; margin-top: 4px; } .decomp-link { font-size: 11px; color: #5b6478; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; } .decomp-link code { background: #1c2330; color: #8edcff; padding: 1px 5px; border-radius: 3px; font-size: 10px; } .decomp-mode-badge { display: inline-block; margin-top: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: #fff4cc; color: #8a6500; border: 1px solid #f5b400; } .decomp-mode-badge.automated { background: #d8f5e3; color: #1f7a47; border-color: #2da66a; } /* Operational impact panel — translates raw metrics into operational consequences. Cards have a left border that color-codes severity (lvl-ok / warn / critical). Pedagogical model, not real numbers. */ .impact-intro { margin: 0 0 12px; font-size: 12px; color: #5b6478; line-height: 1.5; } .impact-empty { font-size: 13px; color: #6b7385; padding: 16px 0; text-align: center; } .impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .impact-card { background: #fbfcfe; border: 1px solid #d8dde8; border-left: 3px solid #8a93a6; border-radius: 8px; padding: 10px 12px; transition: background 0.2s, border-color 0.2s; } .impact-card .impact-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #5b6478; margin-bottom: 4px; } .impact-card .impact-value { font-size: 22px; font-weight: 600; color: #1f2433; font-family: ui-monospace, Menlo, monospace; line-height: 1.1; } .impact-card .impact-sub { font-size: 11px; color: #5b6478; margin-top: 6px; line-height: 1.45; } .impact-card .impact-why { font-size: 11px; color: #4a5263; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #e2e6ee; font-style: italic; line-height: 1.4; } .impact-card.lvl-ok { border-left-color: #2da66a; } .impact-card.lvl-warn { border-left-color: #f5b400; background: #fffbe9; } .impact-card.lvl-critical { border-left-color: #e04646; background: #fde7e7; } @media (max-width: 700px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } } /* Reflection panel — short pedagogical prompts shown after a run. Frågorna byts baserat på senaste scenario (empty / happy / fail / batch). Klick på "Visa hint" expanderar svaret. Inga poäng, inget rätt/fel — bara guided reflection. */ .reflection-intro { font-size: 12px; color: #5b6478; margin: 0 0 12px; line-height: 1.5; } .reflection-list { display: flex; flex-direction: column; gap: 10px; } .reflection-card { background: #fbfcfe; border: 1px solid #d8dde8; border-radius: 8px; padding: 10px 12px; } .reflection-q { font-size: 13px; font-weight: 500; color: #1f2433; margin-bottom: 8px; line-height: 1.45; } .reflection-toggle { background: transparent; border: 1px solid #d8dde8; border-radius: 4px; padding: 4px 10px; font-size: 11px; font-family: inherit; color: #4a5263; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; } .reflection-toggle:hover { background: #f3f6ff; border-color: #4a6cf7; color: #2c3da3; } .reflection-a { margin-top: 8px; padding: 8px 12px; background: #f3f6ff; border-left: 3px solid #4a6cf7; border-radius: 4px; font-size: 12px; color: #2a3140; line-height: 1.55; } .reflection-a.hidden { display: none; } .reflection-a em { font-style: italic; color: #2c3da3; } .reflection-a code { font-size: 11px; background: #fff; padding: 1px 4px; border-radius: 3px; border: 1px solid #d8dde8; } /* Toyota Kata-inspired experiment loop — Optimize Process only. Två panels: "Dagens experiment" före Simulering (mål/hypotes/förväntat + diff + auto-prediction) och "Experimentresultat" efter Operativ påverkan (förväntat vs faktiskt + reflektion + lättviktig historik). Pedagogiskt stöd för hypotesdriven förbättring — inte ett formulärmonster. */ .exp-intro { font-size: 12px; color: #5b6478; margin: 0 0 14px; line-height: 1.55; } .exp-intro em { color: #2c3da3; font-style: italic; } .exp-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .exp-field { display: flex; flex-direction: column; gap: 4px; } .exp-field .exp-label { font-size: 11px; font-weight: 600; color: #2a3140; text-transform: uppercase; letter-spacing: 0.04em; } .exp-field .exp-sublabel { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7385; font-size: 11px; } .exp-form textarea { font-family: inherit; font-size: 13px; line-height: 1.5; padding: 8px 10px; border: 1px solid #d8dde8; border-radius: 6px; resize: vertical; background: #fbfcfe; color: #1f2433; min-height: 44px; } .exp-form textarea:focus-visible { outline: 2px solid #4a6cf7; outline-offset: 1px; border-color: #4a6cf7; background: #fff; } .exp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .exp-meta-block { background: #fbfcfe; border: 1px solid #d8dde8; border-radius: 6px; padding: 10px 12px; } .exp-meta-block h3 { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: #2a3140; text-transform: uppercase; letter-spacing: 0.04em; } .exp-changes-empty, .exp-prediction-empty { font-size: 12px; color: #6b7385; font-style: italic; } .exp-changes-list { list-style: none; margin: 0; padding: 0; font-size: 12px; color: #2a3140; line-height: 1.5; } .exp-changes-list li { padding: 3px 0; } .exp-changes-from { color: #6b7385; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .exp-changes-to { color: #2c3da3; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; } .exp-prediction-text { margin: 0; font-size: 12px; line-height: 1.55; color: #2a3140; } /* Resultatpanel: förväntat | faktiskt + reflektion + historik. */ .exp-result-empty { font-size: 12px; color: #6b7385; font-style: italic; padding: 8px 0; } .exp-result.hidden { display: none; } .exp-result-empty.hidden { display: none; } .exp-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .exp-result-cell { background: #fbfcfe; border: 1px solid #d8dde8; border-radius: 6px; padding: 10px 12px; } .exp-result-cell h3 { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: #2a3140; text-transform: uppercase; letter-spacing: 0.04em; } .exp-result-cell p { margin: 0; font-size: 13px; line-height: 1.5; color: #1f2433; } .exp-result-list { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.65; color: #1f2433; } .exp-result-list li { padding: 2px 0; } .exp-delta { font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-left: 4px; } .exp-delta.better { color: #2da66a; } .exp-delta.worse { color: #c33; } .exp-reflection { border-top: 1px solid #e8ebf2; padding-top: 12px; margin-bottom: 14px; } .exp-reflection h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #2a3140; } .exp-reflection-buttons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .exp-reflection-buttons button { background: #fff; border: 1px solid #d8dde8; border-radius: 999px; padding: 5px 14px; font-size: 12px; font-family: inherit; color: #4a5263; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .exp-reflection-buttons button:hover { background: #f3f6ff; border-color: #4a6cf7; color: #2c3da3; } .exp-reflection-buttons button.active { background: #4a6cf7; border-color: #4a6cf7; color: #fff; font-weight: 600; } .exp-reflection-buttons button:focus-visible { outline: 2px solid #4a6cf7; outline-offset: 2px; } .exp-reflection-text-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #2a3140; text-transform: uppercase; letter-spacing: 0.04em; } .exp-reflection-text-label .exp-sublabel { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7385; } .exp-reflection-text-label textarea { font-family: inherit; font-size: 13px; line-height: 1.5; padding: 8px 10px; border: 1px solid #d8dde8; border-radius: 6px; resize: vertical; background: #fbfcfe; text-transform: none; letter-spacing: 0; color: #1f2433; font-weight: 400; } .exp-reflection-text-label textarea:focus-visible { outline: 2px solid #4a6cf7; outline-offset: 1px; border-color: #4a6cf7; background: #fff; } .exp-history { border-top: 1px solid #e8ebf2; padding-top: 12px; } .exp-history h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #2a3140; } .exp-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .exp-history-empty { font-size: 12px; color: #6b7385; font-style: italic; } .exp-history-item { background: #fbfcfe; border: 1px solid #d8dde8; border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.5; } .exp-history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .exp-history-time { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #6b7385; font-size: 11px; } .exp-history-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f0f3f8; color: #5b6478; } .exp-history-status.status-ja { background: #e6f4ea; color: #1f5a3c; } .exp-history-status.status-delvis { background: #fff8e1; color: #8a6500; } .exp-history-status.status-nej { background: #fbeaea; color: #b94a00; } .exp-history-status.status-osakert { background: #eef0fb; color: #4a5263; } .exp-history-changes { color: #2a3140; } .exp-history-result { color: #5b6478; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; margin-top: 2px; } /* Mini concept flow (top of main) — non-interactive orientation row. Six steps + arrows wrap naturally on narrow viewports. */ .panel.concept-flow { padding: 12px 16px; } .flow-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .flow-row .flow-step { background: #f4f6fa; border: 1px solid #d8dde8; border-radius: 999px; padding: 4px 12px; font-size: 13px; color: #2a3140; white-space: nowrap; } .flow-row .flow-arrow { color: #6b7385; font-size: 14px; user-select: none; } /* Collapsible Learn-mode panels (theory-journey, decomp-panel). Built on native
/ for free a11y + keyboard support. Default marker is hidden in favor of a custom chevron. */ details.collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; user-select: none; padding: 0; } details.collapsible > summary::-webkit-details-marker { display: none; } details.collapsible > summary > h2 { margin: 0; flex: 1 1 auto; min-width: 0; } details.collapsible > summary > .summary-hint { display: none; font-size: 12px; color: #6b7385; font-style: italic; flex: 1; min-width: 0; } details.collapsible:not([open]) > summary > .summary-hint { display: inline-block; } details.collapsible > summary > .chevron { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid #8a93a6; border-bottom: 2px solid #8a93a6; transform: rotate(45deg); transition: transform 0.18s ease; flex: 0 0 auto; } details.collapsible:not([open]) > summary > .chevron { transform: rotate(-45deg); } details.collapsible > summary:hover > .chevron, details.collapsible > summary:focus-visible > .chevron { border-color: #4a6cf7; } details.collapsible > summary:focus-visible { outline: 2px solid #4a6cf7; outline-offset: 2px; border-radius: 4px; } details.collapsible[open] > summary { margin-bottom: 12px; } /* Fulfillment vs Assurance — pedagogical panel comparing the two halves of telecom operations. Uses subtle colour coding to mark the handoff between fulfillment (green-blue) and assurance (warm yellow/orange). */ .fa-flow { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .fa-flow .fa-step { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; } .fa-flow .fa-fulfillment, .fa-flow .fa-activation { background: #e8eeff; color: #2c3da3; border-color: #d4ddff; } .fa-flow .fa-monitoring, .fa-flow .fa-incident, .fa-flow .fa-restoration { background: #fff4cc; color: #8a6500; border-color: #f5d978; } .fa-flow .fa-arrow { color: #6b7385; font-size: 14px; user-select: none; } .fa-flow-caption { margin: 0 0 16px; font-size: 12px; color: #5b6478; line-height: 1.5; font-style: italic; } #fulfillment-assurance h3 { margin: 16px 0 8px; font-size: 14px; color: #1f2433; } .fa-compare { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 12px; } .fa-compare th, .fa-compare td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #e2e6ee; line-height: 1.5; } .fa-compare thead th { background: #fafbfc; font-weight: 600; color: #5b6478; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .fa-compare tbody td:first-child { width: 130px; color: #5b6478; font-size: 11px; } .fa-compare code { font-size: 11px; background: #f4f6fa; padding: 1px 4px; border-radius: 3px; } .fa-example { margin: 0 0 8px; padding-left: 22px; font-size: 13px; color: #2a3140; line-height: 1.55; } .fa-example li { margin-bottom: 6px; } .fa-example li:last-child { margin-bottom: 0; } .fa-takeaway { margin: 0; padding: 10px 12px; background: #fffbe9; border-left: 3px solid #f5b400; border-radius: 4px; font-size: 13px; line-height: 1.5; color: #2a3140; } .fa-links { margin: 0; padding-left: 18px; font-size: 13px; color: #2a3140; line-height: 1.55; } .fa-links li { margin-bottom: 8px; } .fa-links li:last-child { margin-bottom: 0; } @media (max-width: 700px) { .fa-compare th, .fa-compare td { padding: 6px 8px; font-size: 11px; } .fa-compare tbody td:first-child { width: 90px; } } /* Theory journey — guided 8-step walkthrough in Learn OSS/BSS */ .journey-intro { margin: 0 0 16px; font-size: 13px; color: #5b6478; line-height: 1.5; } .journey-list { list-style: none; padding: 0; margin: 0; } .journey-step { display: grid; grid-template-columns: 36px 1fr; gap: 12px; position: relative; padding-bottom: 14px; } .journey-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: #e2e6ee; } .step-num { width: 32px; height: 32px; border-radius: 50%; background: #f4f6fa; border: 1px solid #d8dde8; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #5b6478; position: relative; z-index: 1; } .step-card { background: #fbfcfe; border: 1px solid #d8dde8; border-radius: 8px; padding: 12px 14px; } .step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .step-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #1f2433; } .layer-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .layer-chip.bss { background: #e8eeff; color: #2c3da3; } .layer-chip.oss { background: #e0f5e9; color: #1f7a47; } .layer-chip.bridge { background: linear-gradient(90deg, #e8eeff 0%, #e0f5e9 100%); color: #3a4252; border: 1px solid #d8dde8; } .step-card p { margin: 6px 0; font-size: 13px; line-height: 1.5; color: #2a3140; } .step-why { border-top: 1px dashed #e2e6ee; padding-top: 8px; margin-top: 10px !important; color: #4a5263; } .step-why strong { color: #1f2433; } .step-related { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e6ee; font-size: 12px; color: #5b6478; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .step-related > span:first-child { margin-right: 6px; color: #6b7385; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; } .step-related .info-icon { margin-left: 4px; } @media (max-width: 600px) { .journey-step { grid-template-columns: 28px 1fr; gap: 8px; } .journey-step:not(:last-child)::before { left: 13px; top: 30px; } .step-num { width: 26px; height: 26px; font-size: 12px; } .step-card { padding: 10px 12px; } .step-head h3 { font-size: 14px; } } /* Product selector + failure modes (Slice: product-specific decomposition) */ .decomp-product-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; background: #fbfcfe; border: 1px solid #e2e6ee; border-radius: 6px; } .decomp-failures { margin-top: 14px; padding: 12px; background: #fff8ef; border: 1px solid #f3d8b5; border-left: 3px solid #e08a3c; border-radius: 0 8px 8px 0; } .decomp-failures h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #8a4f1c; } .decomp-failures ul { margin: 0; padding-left: 18px; font-size: 12px; color: #2c3a52; } .decomp-failures li { margin-bottom: 4px; } .decomp-failures li strong { color: #8a4f1c; } .decomp-arrow { text-align: center; color: #6b7385; font-size: 14px; margin: 0; user-select: none; } .decomp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .decomp-row .decomp-node { padding: 8px 10px; } .decomp-row .decomp-head { font-size: 12px; } .decomp-row .decomp-body { font-size: 11px; } .decomp-row .decomp-link { font-size: 10px; } .decomp-example { margin-top: 14px; padding: 12px; background: #fafbfd; border: 1px solid #e2e6ee; border-left: 3px solid #4a6cf7; border-radius: 0 8px 8px 0; } .decomp-example h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #2c3da3; } .decomp-example-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .decomp-example-cell h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; color: #6b7385; letter-spacing: 0.04em; } .decomp-example-cell ul { margin: 0; padding-left: 16px; font-size: 12px; color: #2c3a52; } .decomp-example-cell li { margin-bottom: 2px; } .decomp-example-foot { margin: 10px 0 0; font-size: 12px; color: #2c3a52; } @media (max-width: 900px) { .decomp-row { grid-template-columns: 1fr 1fr; } .decomp-example-grid { grid-template-columns: 1fr 1fr; } } /* Slice C — toggle + improvement panel */ .experiment-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; background: #fbfcfe; border: 1px solid #e2e6ee; border-radius: 6px; } .toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .toggle input { display: none; } .toggle .track { width: 36px; height: 20px; background: #cdd3df; border-radius: 999px; position: relative; transition: background 0.2s; } .toggle .thumb { width: 16px; height: 16px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left 0.2s; } .toggle input:checked + .track { background: #4a6cf7; } .toggle input:checked + .track .thumb { left: 18px; } .toggle .text { font-size: 13px; font-weight: 500; } .exp-hint { font-size: 12px; color: #5b6478; } .exp-label { font-size: 13px; font-weight: 500; } .capacity-buttons { display: inline-flex; gap: 4px; } .cap-btn { padding: 4px 10px; border: 1px solid #cdd3df; background: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 32px; } .cap-btn:hover { background: #f0f3fa; } .cap-btn.active { background: #4a6cf7; border-color: #4a6cf7; color: #fff; } .improvement { margin-top: 12px; padding: 12px; border: 1px solid #4a6cf7; background: #f3f6ff; border-radius: 8px; } .improvement.hidden { display: none; } .improvement h4 { margin: 0 0 10px; font-size: 13px; color: #2c3da3; text-transform: uppercase; letter-spacing: 0.05em; } .imp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .imp-cell .imp-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #5b6478; } .imp-cell .imp-value { font-size: 15px; font-weight: 600; margin-top: 2px; } .imp-cell .imp-value.imp-big { color: #1f7a47; font-size: 18px; } .imp-cell .imp-value.imp-big.regression { color: #c33; } .imp-bottleneck { margin-top: 10px; font-size: 13px; color: #2c3a52; } .imp-insight { margin: 10px 0 0; padding: 8px 10px; background: #fff; border-left: 3px solid #4a6cf7; border-radius: 0 6px 6px 0; font-size: 13px; } /* Slice F — parallel mode: dashboard, heatmap, queue panel, order list */ .singel-only { display: block; } .parallel-only { display: none; } body.mode-parallel .singel-only { display: none; } body.mode-parallel .parallel-only { display: block; } .dashboard { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .dash-card { background: #fafbfd; border: 1px solid #e2e6ee; border-radius: 6px; padding: 8px 10px; } .dash-card .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7385; } .dash-card .value { font-size: 18px; font-weight: 600; margin-top: 2px; } .dash-card.warm { border-color: #f5b400; background: #fff8e1; } .dash-card.hot { border-color: #e04646; background: #fde7e7; } .dash-busy { margin-top: 8px; font-size: 12px; color: #5b6478; } /* Heatmap on system boxes */ .system.load-idle {} /* default */ .system.load-low { background: #e8f5ec; border-color: #2da66a; box-shadow: 0 0 0 2px #2da66a22; } .system.load-medium { background: #fff8e1; border-color: #f5b400; box-shadow: 0 0 0 2px #f5b40033; } .system.load-high { background: #fde7e7; border-color: #e04646; box-shadow: 0 0 0 2px #e0464644; } /* Queue panel */ .queue-panel { display: flex; flex-direction: column; gap: 10px; } .queue-row { background: #fafbfd; border: 1px solid #e2e6ee; border-radius: 8px; padding: 10px 12px; } .queue-row .qsystem { font-weight: 600; font-size: 13px; margin-bottom: 6px; } .queue-row .qline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-top: 4px; } .qchip { display: inline-block; padding: 3px 8px; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; border: 1px solid transparent; } .qchip.active { background: #fff4cc; color: #8a6500; border-color: #f5b400; } .qchip.queued { background: #e8ecf4; color: #5b6478; border-color: #cdd3df; } .qchip.idle { background: transparent; color: #6b7385; font-style: italic; border: 0; padding-left: 0; } .qstats { margin-top: 6px; font-size: 11px; color: #5b6478; font-family: ui-monospace, Menlo, monospace; } /* Chart (slice I) */ .chart { width: 100%; height: 160px; background: #fafbfd; border: 1px solid #e2e6ee; border-radius: 6px; display: block; } .chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: #5b6478; } .leg { display: inline-flex; align-items: center; gap: 4px; } .leg .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .leg-active .dot { background: #4a6cf7; } .leg-queued .dot { background: #f5b400; } .leg-completed .dot { background: #2da66a; } .leg-incidents .dot { background: #c33; } .leg .val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #2c3a52; font-weight: 600; margin-left: 2px; } .chart-empty { color: #6b7385; font-size: 13px; font-style: italic; padding: 50px 8px; text-align: center; } .chart-runs { display: flex; gap: 16px; margin-top: 4px; font-size: 11px; color: #5b6478; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .chart-runs.hidden { display: none; } .chart-runs .run-prev::before { content: "─ ─"; margin-right: 4px; color: #6b7385; letter-spacing: 1px; } .chart-runs .run-cur::before { content: "───"; margin-right: 4px; color: #2c3a52; letter-spacing: 1px; } /* Run comparison block (slice L) */ .run-compare { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eaeef5; } .run-compare.hidden { display: none; } .run-compare h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #5b6478; } .cmp-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; margin-bottom: 8px; } .cmp-settings .cmp-tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; margin-right: 6px; } .cmp-settings .cmp-tag.prev { background: #e8ecf4; color: #5b6478; } .cmp-settings .cmp-tag.cur { background: #4a6cf7; color: #fff; } .cmp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .cmp-cell { background: #fafbfd; border: 1px solid #e2e6ee; border-radius: 6px; padding: 8px 10px; } .cmp-cell .cmp-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7385; } .cmp-cell .cmp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; } .cmp-cell .cmp-prev { font-size: 13px; color: #6b7385; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .cmp-cell .cmp-cur { font-size: 16px; font-weight: 600; color: #2c3a52; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .cmp-delta { font-size: 11px; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #5b6478; } .cmp-delta.better { color: #1f7a47; } .cmp-delta.worse { color: #c33; } @media (max-width: 900px) { .cmp-grid { grid-template-columns: 1fr 1fr; } .cmp-settings { grid-template-columns: 1fr; } } /* Order list */ .order-list { max-height: 360px; overflow-y: auto; border: 1px solid #e2e6ee; border-radius: 8px; background: #fafbfd; } .order-row { display: grid; grid-template-columns: 110px 1fr 100px 70px; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #eaeef5; font-size: 12px; align-items: center; } .order-row:last-child { border-bottom: 0; } .order-row .oid { font-family: ui-monospace, Menlo, monospace; font-weight: 600; color: #2c3a52; } .order-row .oid .retry-badge { color: #c33; font-size: 10px; margin-left: 4px; } .order-row .ostage { color: #5b6478; } .order-row .obar { height: 8px; background: #f0f3fa; border-radius: 4px; overflow: hidden; } .order-row .obar > div { height: 100%; background: #4a6cf7; transition: width 0.1s linear; } .order-row.in-queue .ostage { color: #8a6500; } .order-row.in-queue .obar > div { background: #f5b400; } .order-row.in-transit .ostage { color: #5b6478; font-style: italic; } .order-row.completed .ostage { color: #1f7a47; } .order-row.completed .obar > div { background: #2da66a; } .order-row.failed .ostage { color: #b32a2a; } .order-row.failed .obar > div { background: #c33; } .order-row .otime { font-family: ui-monospace, Menlo, monospace; color: #5b6478; text-align: right; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .row.bss, .row.oss { grid-template-columns: 1fr 1fr; } .tl-row { grid-template-columns: 130px 60px 1fr; } .imp-grid { grid-template-columns: 1fr; } .dashboard { grid-template-columns: repeat(2, 1fr); } .order-row { grid-template-columns: 90px 1fr 60px; } .order-row .obar { display: none; } } /* Analysis area ("vad hände efter körningen?") ------------------------------- Vertikal stack: först system-vy, sen order-detalj. Inte två likvärdiga dashboards bredvid varandra. Panelernas vanliga margin-bottom sköter spacing; .panel:last-child-regeln tar bort margin på sista panelen. */ .analysis-area { margin-bottom: 16px; } /* Info-icon (kontextuella popover-knappar) ---------------------------------- */ .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid #cdd3df; background: #fff; color: #5b6478; font-size: 10px; font-weight: 600; font-family: ui-monospace, Menlo, monospace; font-style: italic; cursor: pointer; vertical-align: middle; line-height: 1; flex-shrink: 0; } .info-icon:hover { background: #4a6cf7; border-color: #4a6cf7; color: #fff; } .info-icon[aria-expanded="true"] { background: #4a6cf7; border-color: #4a6cf7; color: #fff; } .info-popover { position: absolute; z-index: 1000; width: 300px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid #cdd3df; border-radius: 8px; box-shadow: 0 6px 24px rgba(28, 35, 48, 0.12), 0 2px 6px rgba(28, 35, 48, 0.08); padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #2c3a52; } .info-popover-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #1c2330; text-transform: none; letter-spacing: 0; } .info-popover-body { margin: 0; color: #2c3a52; } .info-popover-why { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #eaeef5; font-size: 12px; color: #5b6478; } .info-popover-why strong { color: #4a6cf7; } @media (max-width: 900px) { .info-popover { width: 260px; } /* Större touch target på mobil — visuellt bara lite större men hit-area räknas mer i tum/finger än i px. */ .info-icon { width: 22px; height: 22px; font-size: 11px; margin-left: 4px; } } /* App footer (attribution) --------------------------------------------------- Diskret rad längst ner med skapar-namn + LinkedIn. Låg visuell tyngd: muted text, prickad understrykning på länken som blir blå vid hover. */ .app-footer { text-align: center; padding: 20px 16px 28px; margin-top: 16px; border-top: 1px solid #e2e6ee; color: #6b7385; font-size: 12px; background: transparent; } .app-footer strong { color: #5b6478; font-weight: 500; } .app-footer a { color: #6b7385; text-decoration: none; border-bottom: 1px dotted #cdd3df; padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; } .app-footer a:hover { color: #4a6cf7; border-bottom-color: #4a6cf7; } /* Mode-tabs show/hide-regler — placerade sist så de vinner kaskaden mot body.mode-parallel .parallel-only (samma specificity, sista vinner). Konsekvens: i Learn-mode döljs alla optimize-only-paneler även om en parallel-batch tidigare körts (mode-parallel kvar på body). */ body.mode-learn .optimize-only { display: none; } body.mode-optimize .learn-only { display: none; } /* Documentation mode — visar bara docs-panelen, döljer simulator + aside */ .docs-only { display: none; } body.mode-docs .docs-only { display: block; } body.mode-docs main > .panel:not(.docs-only) { display: none; } /* Analysis-area är en wrapper runt System metrics + Ordermått-panelerna — den ligger som direktbarn till main, men panelerna inuti är inte direktbarn så de fångas inte av regeln ovan. Dölj hela wrappern i docs-mode. */ body.mode-docs .analysis-area { display: none; } /* Bara den direkta