/* Idéradar — stilen "data-terminal" ur taste-skill (seed 1756594577).
   Rörelsen: varje val (flik, marknad, sida) markeras med samma 1px accentlinje, lika bred som sin etikett.
   Ansiktet: varje siffra i IBM Plex Mono, texten i Public Sans; marknadsradarn (sex staplar) är produktens eget element.
   Rutnät: 12 kolumner, en enda lucka på 24px åt båda hållen. 8 + 4 kolumner = (8×w + 7×24) + 24 + (4×w + 3×24) = hela bredden. */

:root {
  color-scheme: dark;
  --ground: #171719;
  --surface: #131217;
  --raised: #212023;
  --active: #212023;
  --border: #222224;
  --rule: #1b1a1f;
  --control: #3a3a3e;
  --text: #ffffff;
  --soft: #b4b5ba;
  --muted: #8a8c92;
  --accent: #4a8ad6;
  --bar: #3a3a3e;
  --positive: #44a282;
  --negative: #e5566f;
  --warning: #d9a441;
  --pill-positive-bg: #1b2828; --pill-positive-ink: #5fc39c;
  --pill-negative-bg: #2c1a20; --pill-negative-ink: #e5566f;
  --pill-warning-bg: #2a2416; --pill-warning-ink: #d9a441;
  --pill-neutral-bg: #212023; --pill-neutral-ink: #bdbdc0;
  --shadow: 0 12px 28px rgba(0,0,0,.2);
  --primary: #ffffff; --primary-ink: #000000;

  --font: "Public Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --fs-title: 26px; --fs-section: 20px; --fs-kpi: 20px; --fs-lead: 30px; --fs-body: 14px; --fs-small: 12px;

  --rail: 56px;
  --pad: 32px;
  --gap: 24px;
  --card-pad: 20px;
  --radius-card: 6px;
  --radius-control: 999px;
  --radius-field: 6px;
  --control-height: 34px;
  --row-height: 42px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 120ms; --t-hover: 150ms; --t-ui: 200ms;
}

/* ---------- grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--text); font: var(--fs-body)/21px var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1:focus, h1:focus-visible { outline: none; } /* FocusOnNavigate flyttar fokus hit för skärmläsare */
.num, .mono, table td.n, .kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.soft { color: var(--soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- skal: ikonlist + arbetsyta ---------- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100svh; }
.rail { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: stretch; padding: 14px 0; border-right: 1px solid var(--border); background: var(--ground); }
.rail .mark { display: grid; place-items: center; height: 40px; margin-bottom: 18px; }
.rail .mark svg { width: 26px; height: 26px; }
.rail-item { position: relative; display: grid; place-items: center; height: 44px; color: var(--muted); background: none; border: 0; cursor: pointer; transition: color var(--t-hover) ease; }
.rail-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-item:hover { color: var(--text); }
.rail-item.active { color: var(--text); }
/* valet: en 1px accentlinje på listens kant, lika hög som ikonens yta */
.rail-item.active::after { content: ""; position: absolute; right: -1px; top: 12px; bottom: 12px; width: 1px; background: var(--accent); }
.rail-item .tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 4px; background: var(--raised); color: var(--text); font-size: var(--fs-small); white-space: nowrap; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity var(--t-hover) ease; z-index: 30; }
.rail-item:hover .tip, .rail-item:focus-visible .tip { opacity: 1; }
.rail-item .lbl { display: none; }
.rail .gap { flex: 1; }
.rail form { display: contents; }
.canvas { min-width: 0; padding: 28px var(--pad) 48px; max-width: 1440px; }

/* ---------- titelrad ---------- */
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--gap); }
.title-row h1 { font-size: var(--fs-title); line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.title-row .sub { margin-top: 6px; color: var(--soft); font-size: 14px; max-width: 80ch; }
.title-row .sub b { color: var(--text); font-weight: 500; }
.title-row .actions { display: flex; align-items: center; gap: 8px; flex: none; }
.crumb { color: var(--muted); font-size: var(--fs-small); margin-bottom: 6px; }
.crumb a:hover { color: var(--text); }

/* ---------- paneler och rutnät ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.stack { display: grid; gap: var(--gap); align-content: start; }
.panel { background: var(--surface); border-radius: var(--radius-card); padding: var(--card-pad); box-shadow: var(--shadow); min-width: 0; }
.panel.flush { padding: 6px 0 4px; }
.panel.flush > header { padding: 12px var(--card-pad) 6px; }
.panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.panel .meta { color: var(--muted); font-size: var(--fs-small); }
.section-title { font-size: var(--fs-section); line-height: 26px; font-weight: 400; color: var(--muted); margin: 8px 0 12px; }
.card-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); font-weight: 500; cursor: pointer; font-size: var(--fs-small); font-family: var(--font); }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tabeller ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { height: 36px; padding: 0 12px; text-align: left; font-weight: 400; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
td { padding: 11px 12px; border-top: 1px solid var(--rule); vertical-align: middle; }
th:first-child, td:first-child { padding-left: var(--card-pad); }
th:last-child, td:last-child { padding-right: var(--card-pad); }
th.n, td.n { text-align: right; }
td .sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 18px; }
td.idcell { width: 46%; }
td.idcell a { font-weight: 500; }
td.idcell a:hover { text-decoration: underline; text-underline-offset: 3px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
tr.rowlink { cursor: pointer; }
td.rank { width: 1%; color: var(--muted); font-family: var(--mono); text-align: right; }
.total { font-weight: 600; }

/* ---------- KPI-remsa ---------- */
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.kpi { padding: 16px var(--card-pad); min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi-label { color: var(--muted); font-size: var(--fs-small); }
.kpi-value { margin-top: 6px; font-size: var(--fs-kpi); line-height: 26px; font-weight: 400; white-space: nowrap; }
.kpi-value small { font-size: var(--fs-small); color: var(--muted); margin-left: 3px; font-family: var(--font); }
.kpi.lead .kpi-value { font-size: var(--fs-lead); line-height: 36px; font-weight: 500; }
.kpi .note { margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
/* idésidan: fem poäng, sedan beloppet (bredast) och veckorna */
.kpis.idekpi { grid-auto-flow: row; grid-template-columns: 1.1fr repeat(4, minmax(0, 0.9fr)) minmax(0, 1.9fr) minmax(0, 1.1fr); }
.panel.even { align-self: stretch; }

/* ---------- marknadsradarn: sex staplar, en per marknad; bästa marknaden bär accenten ---------- */
.radar { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; vertical-align: middle; }
.radar i { display: block; width: 6px; background: var(--bar); border-radius: 1px 1px 0 0; }
.radar i.best { background: var(--accent); }
.radar-big { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.radar-big button { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border: 0; background: none; cursor: pointer; color: var(--muted); position: relative; }
.radar-big button + button { border-left: 1px solid var(--rule); }
.radar-big .bar-wrap { height: 80px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.radar-big .bar { width: 28px; background: var(--bar); border-radius: 2px 2px 0 0; }
.radar-big .bar.best { background: var(--accent); }
.radar-big .val { font-family: var(--mono); font-size: 20px; line-height: 24px; color: var(--text); }
.radar-big .name { position: relative; font-size: var(--fs-small); line-height: 18px; }
.radar-big button:hover .name, .radar-big button.on .name { color: var(--text); }
.radar-big button.on .name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent); }

/* ---------- nyckel–värde ---------- */
.kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
.kv dt { color: var(--muted); padding: 10px 0; border-top: 1px solid var(--rule); }
.kv dd { padding: 10px 0; border-top: 1px solid var(--rule); color: var(--soft); white-space: pre-line; }
.kv dt:first-of-type, .kv dt:first-of-type + dd { border-top: 0; }
.prose h3 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--soft); white-space: pre-line; }
.prose ul { margin: 0; padding-left: 18px; color: var(--soft); }
.prose li + li { margin-top: 4px; }

/* ---------- marknadsremsan på översikten: bästa idén per marknad ---------- */
.mstrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.mcell { display: grid; align-content: start; gap: 4px; padding: 14px 16px 16px; min-width: 0; }
.mcell + .mcell { border-left: 1px solid var(--rule); }
.mcell:first-child { padding-left: var(--card-pad); }
.mcell .code { color: var(--muted); font-size: var(--fs-small); }
.mcell .val { font-family: var(--mono); font-size: 20px; line-height: 26px; }
.mcell .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 18px; hyphens: auto; overflow-wrap: anywhere; }
.mcell a.t:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- marknadslista ---------- */
.mrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px var(--card-pad); border-top: 1px solid var(--rule); }
.mrow .code { font-family: var(--mono); color: var(--muted); font-size: var(--fs-small); }
.mrow .t { min-width: 0; }
.mrow .t a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mrow .t .sub { font-size: var(--fs-small); color: var(--muted); }

/* ---------- status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); white-space: nowrap; flex: none; }
.pill.pos { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pill.neg { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pill.warn { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.pos { background: var(--positive); } .dot.neg { background: var(--negative); } .dot.warn { background: var(--warning); }
.svc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px var(--card-pad); border-top: 1px solid var(--rule); }
.svc .sub { display: block; color: var(--muted); font-size: var(--fs-small); }

/* ---------- kontroller ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height); padding: 0 16px; border-radius: var(--radius-control); border: 1px solid var(--control); background: transparent; color: var(--text); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.btn:hover { background: var(--raised); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.primary:hover { background: #e6e6e6; }
.btn.danger { color: var(--negative); border-color: #5a2a35; }
.btn.small { height: 28px; padding: 0 12px; font-size: var(--fs-small); }
.btn:disabled { opacity: 1; color: var(--muted); border-color: var(--border); background: transparent; cursor: not-allowed; }
.btn.primary:disabled { background: var(--raised); color: var(--muted); }
.star { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.star svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.star.on { color: var(--warning); }
.star.on svg { fill: currentColor; }
.field { display: grid; gap: 8px; }
.field > label, .field > .label { font-weight: 500; font-size: 13px; }
.field .hint { color: var(--muted); font-size: var(--fs-small); }
.fields { display: grid; gap: 16px; }
.input { height: 38px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-field); background: var(--ground); width: 100%; }
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 20px; resize: vertical; }
select.input { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%238a8c92' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
.input::placeholder { color: var(--muted); }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filters .input { height: var(--control-height); width: auto; }
.filters .search { width: 260px; }
.filters .spacer { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); cursor: pointer; }
.check input { accent-color: var(--accent); }

/* val i rad: rörelsen — en 1px accentlinje under det valda ordet, aldrig en fylld pill */
.choice { display: flex; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--border); }
.choice button { position: relative; padding: 8px 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.choice button:hover { color: var(--text); }
.choice button.on { color: var(--text); }
.choice button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); }
.choice button .mono { color: inherit; }

/* ---------- inställningar: etikettkolumn + panel ---------- */
.settings { max-width: 1152px; }
.srow { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; padding: 32px 0; border-top: 1px solid var(--border); }
.srow:first-of-type { border-top: 0; padding-top: 8px; }
.srow > div:first-child h2 { font-size: 16px; font-weight: 500; line-height: 22px; margin-top: 6px; }
.srow > div:first-child p { color: var(--muted); margin-top: 6px; }
.srow > div:first-child .summary { margin-top: 14px; display: grid; gap: 6px; }
.svc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.svc-head h3 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.form-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.saved { color: var(--muted); font-size: var(--fs-small); }
.notice { padding: 10px 14px; border-radius: var(--radius-field); background: var(--pill-warning-bg); color: var(--pill-warning-ink); font-size: var(--fs-small); }
.gastrad { margin: 0 0 16px; font-size: var(--fs-small); color: var(--soft); }
.notice.neg { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.notice a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- tomt, laddar, fel ---------- */
.empty { display: grid; place-items: center; gap: 12px; min-height: 120px; padding: 24px; margin: 0 var(--card-pad) 16px; border: 1px dashed var(--control); border-radius: var(--radius-field); color: var(--muted); text-align: center; }
.panel:not(.flush) .empty { margin: 0; }
.skeleton { display: inline-block; background: var(--raised); border-radius: 3px; height: 1em; width: 6ch; vertical-align: middle; }
.working { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); }
td .sub.working { display: flex; }
.working::before { flex: none; }
.working::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--accent); border-right-color: transparent; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- inloggning ---------- */
.login { min-height: 100svh; display: grid; place-items: center; padding: 16px; }
.login .panel { width: min(380px, 100%); padding: 32px; }
.login .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.login .brand svg { width: 28px; height: 28px; }
.login h1 { font-size: 20px; font-weight: 600; }

/* Blazors felrad och återanslutning */
#blazor-error-ui { display: none; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--radius-field); background: var(--pill-negative-bg); color: var(--pill-negative-ink); box-shadow: var(--shadow); z-index: 50; }
#blazor-error-ui .reload { text-decoration: underline; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 12px; }

/* ---------- surfplatta ---------- */
@media (max-width: 1100px) {
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .srow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kpis, .kpis.idekpi { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis.idekpi .kpi:nth-child(6) { grid-column: span 2; }
  .kpi + .kpi { border-left: 0; }
  .kpi:not(:nth-child(4n + 1)) { border-left: 1px solid var(--border); }
  .kpi:nth-child(n + 5) { border-top: 1px solid var(--border); }
}

/* ---------- telefon: listen blir en bottenrad med korta etiketter ---------- */
@media (max-width: 760px) {
  :root { --pad: 16px; --card-pad: 16px; --gap: 16px; }
  .app { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 60px; flex-direction: row; padding: 0 10px; border-right: 0; border-top: 1px solid var(--border); z-index: 20; }
  .rail .mark, .rail .gap { display: none; }
  .rail-item { flex: 1; height: 60px; gap: 2px; align-content: center; }
  .rail-item .tip { display: none; }
  .rail-item .lbl { display: block; font-size: 11px; line-height: 14px; }
  .rail-item.active::after { right: 25%; left: 25%; top: -1px; bottom: auto; width: auto; height: 1px; }
  .canvas { padding: 20px var(--pad) 32px; }
  .title-row { flex-wrap: wrap; align-items: flex-start; }
  .title-row h1 { font-size: 22px; line-height: 28px; }
  .kpis, .kpis.idekpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.idekpi .kpi:nth-child(6) { grid-column: span 1; }
  .kpi:not(:nth-child(4n + 1)) { border-left: 0; }
  .kpi:nth-child(2n) { border-left: 1px solid var(--border); }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcell + .mcell { border-left: 0; }
  .mcell:nth-child(2n) { border-left: 1px solid var(--rule); }
  .mcell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .mcell:first-child { padding-left: 16px; }
  .radar-big .bar-wrap { height: 56px; }
  .radar-big .bar { width: 18px; }
  .radar-big .val { font-size: 16px; }
  .radar-big .name { font-size: 11px; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { padding-bottom: 0; }
  .kv dd { border-top: 0; padding-top: 4px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .filters .search { width: 100%; }
  /* tabeller blir rader i två led: idén och totalen på första, resten på andra */
  table.resp thead { display: none; }
  table.resp, table.resp tbody { display: block; }
  table.resp tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px var(--card-pad); border-top: 1px solid var(--rule); }
  table.resp td { display: block; padding: 0; border: 0; }
  table.resp td.hide-sm { display: none; }
  table.resp td.idcell { width: auto; grid-column: 1; }
  table.resp td.total-cell { grid-column: 2; grid-row: 1; }
  table.resp td.line2 { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-small); }
  table.resp td.rank { display: none; }
}

/* =====================================================================================================
   Rörelse och radar (2026-10-30). Produktens eget element är radarskopet: sex sektorer, en per marknad,
   ringar för totalpoängen. Under en körning sveper strålen runt, förslagen tänds ute vid kanten och varje
   färdig idé glider in mot mitten till sin plats. Allt rör sig med transform och opacity; den som valt
   minskad rörelse får sidan stilla med allt innehåll kvar.
   ===================================================================================================== */

/* ---------- sidornas entré: panelerna reser sig i tur och ordning ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes tona { from { opacity: 0; } }
@keyframes vaxa { from { transform: scaleY(0); } }
@keyframes fyll { from { transform: scaleX(0); } }
.canvas > *, .grid > *, .stack > * { animation: rise 560ms var(--ease-out) both; }
.canvas > *:nth-child(2) { animation-delay: 60ms; } .canvas > *:nth-child(3) { animation-delay: 120ms; }
.canvas > *:nth-child(4) { animation-delay: 180ms; } .canvas > *:nth-child(5) { animation-delay: 240ms; }
.grid > *:nth-child(2), .stack > *:nth-child(2) { animation-delay: 90ms; }
.grid > *:nth-child(3), .stack > *:nth-child(3) { animation-delay: 160ms; }
.grid > *:nth-child(4), .stack > *:nth-child(4) { animation-delay: 220ms; }
tbody tr { animation: rise 420ms var(--ease-out) both; transition: background-color var(--t-hover) ease; }
tbody tr:nth-child(2) { animation-delay: 30ms; } tbody tr:nth-child(3) { animation-delay: 60ms; } tbody tr:nth-child(4) { animation-delay: 90ms; }
tbody tr:nth-child(5) { animation-delay: 120ms; } tbody tr:nth-child(6) { animation-delay: 150ms; } tbody tr:nth-child(7) { animation-delay: 180ms; }
tbody tr:nth-child(8) { animation-delay: 210ms; } tbody tr:nth-child(9) { animation-delay: 240ms; } tbody tr:nth-child(n + 10) { animation-delay: 270ms; }
tbody tr:hover td { background: rgba(255, 255, 255, .025); }

/* minimarknadsradarn i listorna växer fram stapel för stapel */
.radar i { transform-origin: bottom; animation: vaxa 600ms var(--ease-out) both; }
.radar i:nth-child(2) { animation-delay: 50ms; } .radar i:nth-child(3) { animation-delay: 100ms; } .radar i:nth-child(4) { animation-delay: 150ms; }
.radar i:nth-child(5) { animation-delay: 200ms; } .radar i:nth-child(6) { animation-delay: 250ms; }
.radar-big .bar { transform-origin: bottom; transition: height 600ms var(--ease-out), background-color var(--t-ui) ease; animation: vaxa 900ms var(--ease-out) both; }
.radar-big button:nth-child(2) .bar { animation-delay: 70ms; } .radar-big button:nth-child(3) .bar { animation-delay: 140ms; }
.radar-big button:nth-child(4) .bar { animation-delay: 210ms; } .radar-big button:nth-child(5) .bar { animation-delay: 280ms; }
.radar-big button:nth-child(6) .bar { animation-delay: 350ms; }
.radar-big button { transition: color var(--t-hover) ease; }
.radar-big button:hover .bar:not(.best) { background: #4a4a50; }

/* poängmätare under idésidans poäng */
.matare { display: block; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.matare i { display: block; height: 100%; background: var(--soft); transform-origin: left; animation: fyll 1100ms 200ms var(--ease-out) both; }
.kpi.lead .matare i { background: var(--accent); }

/* ---------- knappar ---------- */
.btn { transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.btn.primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform 700ms var(--ease-out); }
.btn.primary:hover svg { transform: rotate(90deg); }
.card-link { transition: color var(--t-hover) ease; }

/* ---------- skalet: märket sveper medan en körning pågår ---------- */
.mark .visare { transform-origin: 16px 25px; transition: transform 700ms var(--ease-out); }
.mark:hover .visare { transform: rotate(-60deg); }
.mark.aktiv .visare { animation: visare 1.6s ease-in-out infinite alternate; }
@keyframes visare { from { transform: rotate(-104deg); } to { transform: rotate(44deg); } }
.puls-prick { position: absolute; top: 10px; right: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.puls-prick::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); animation: puls-ring 1.6s var(--ease-out) infinite; }
@keyframes puls-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.dot.levande { animation: blinka 900ms ease-in-out infinite alternate; }
@keyframes blinka { to { opacity: .25; } }

/* ---------- radarskopet ---------- */
.skop { --varv: 9s; position: relative; }
.skop-aktiv { --varv: 3.6s; }
.skop svg { width: 100%; height: auto; overflow: visible; }
.skop .ring { fill: none; stroke: #2a2a2f; stroke-width: .7; }
.skop .ring.yttre { stroke: var(--control); stroke-width: .9; }
.skop .eker { stroke: #2a2a2f; stroke-width: .7; }
.skop .sektor-vald { fill: var(--accent); opacity: .09; transform-origin: 0 0; transition: transform 700ms var(--ease-out), opacity 600ms ease; }
.skop .ringtal { font: 500 11px var(--mono); fill: var(--muted); }
.skop .sektornamn { font: 500 15px var(--font); fill: var(--muted); transition: fill 400ms ease; }
.skop .sektornamn.vald { fill: var(--text); }
.skop .du { fill: var(--text); }
.skop .svep { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: svep var(--varv) linear infinite; transition: opacity 800ms ease; }
.skop-tyst .svep, .skop-klar .svep { opacity: .5; }
.skop .strale { stroke: #8fb8ea; stroke-width: 1.3; stroke-linecap: round; }
@keyframes svep { to { transform: rotate(360deg); } }

.blip { transition: transform 1500ms var(--ease-out); animation: tona 500ms ease both; }
.blip .karna { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: fanga var(--varv) linear infinite; }
@keyframes fanga { 0% { transform: scale(2); opacity: 1; } 16% { transform: scale(1); opacity: .9; } 100% { transform: scale(1); opacity: .9; } }
.blip-gammal .karna { fill: var(--soft); animation-name: fanga-svag; }
@keyframes fanga-svag { 0% { opacity: .95; transform: scale(1.7); } 22%, 100% { opacity: .26; transform: scale(1); } }
.blip-vantar .karna { fill: var(--soft); }
.blip-fel .karna { fill: var(--negative); }
.blip-bast .karna { fill: #fff; }
.blip .traff { fill: transparent; }
.blip a { cursor: pointer; }
.blip a:hover .karna, .blip a:focus-visible .karna { stroke: #fff; stroke-width: 1.4; }
.blip a:focus-visible { outline: none; }
.blip .puls { fill: none; stroke: var(--accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: puls 1.6s var(--ease-out) infinite; }
.blip .puls.sen { animation-delay: 800ms; }
@keyframes puls { from { transform: scale(1); opacity: .95; } to { transform: scale(5); opacity: 0; } }
.blip .vag { fill: none; stroke: var(--accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: vag 1.6s 1.1s var(--ease-out) both; }
.blip-bast .vag { stroke: #fff; }
@keyframes vag { from { transform: scale(1); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.blip .poangtal { font: 600 12px var(--mono); fill: var(--soft); animation: tona 600ms 1.3s both; }
.blip-bast .poangtal { fill: var(--text); }
.skop .krusning { fill: none; stroke: var(--accent); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; animation: krusa 2.4s var(--ease-out) both; }
.skop .krusning.sen { animation-delay: 450ms; }
@keyframes krusa { from { transform: scale(.04); opacity: .95; } to { transform: scale(1); opacity: 0; } }

/* ---------- radarpanelen på Ta fram ---------- */
.radarpanel { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 40px; align-items: center; padding: 28px 36px 28px 28px; margin-bottom: var(--gap); }
.radar-yta { min-width: 0; display: grid; gap: 10px; }
.radar-nyckel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; justify-content: center; color: var(--soft); font-size: var(--fs-small); }
.nyckel-prick { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.nyckel-prick.gammal { background: var(--soft); opacity: .45; margin-left: 8px; }
.radar-sida { display: grid; gap: 20px; align-content: center; min-width: 0; }
.radar-sida > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.radar-sida h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.radar-fas { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; animation: rise 500ms var(--ease-out) both; }
.radar-tal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.radar-tal > div { display: grid; gap: 6px; align-content: start; padding: 0 18px; min-width: 0; }
.radar-tal > div:first-child { padding-left: 0; }
.radar-tal > div + div { border-left: 1px solid var(--border); }
.radar-tal .kpi-value { margin: 0; font-size: 24px; line-height: 30px; }
.radar-tal .kpi-value.liten { font-family: var(--font); font-size: 14px; line-height: 20px; white-space: normal; color: var(--soft); overflow-wrap: anywhere; }
.radar-summa { color: var(--soft); }
.radar-summa a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control); }
.radar-summa a:hover { text-decoration-color: var(--accent); }
.radar-sida .form-foot { margin-top: 0; }

/* förloppsremsan: förslagen och sedan en del per idé */
.remsa { display: flex; gap: 4px; height: 8px; }
.remsa .del { position: relative; flex: 1; min-width: 0; border-radius: 2px; background: var(--raised); overflow: hidden; }
.remsa .del.forsta { flex: .7; }
.remsa .del i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transition: transform 1s linear; }
.remsa .del-fel i { background: var(--negative); }
.remsa .del-klar i { animation: blixt 900ms ease-out; }
@keyframes blixt { from { background: #fff; } }
.remsa .del-nu::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28%; background: rgba(255, 255, 255, .22); animation: skanna 1.5s ease-in-out infinite; }
@keyframes skanna { from { transform: translateX(-110%); } to { transform: translateX(380%); } }
.remsa.liten { height: 4px; gap: 3px; }

/* loggen: raderna glider in från vänster */
.logg { display: grid; gap: 0; font-size: 13px; line-height: 19px; }
.logg li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 5px 0; color: var(--soft); animation: logg-in 500ms var(--ease-out) both; }
.logg li .num { font-size: 12px; }
.logg li.pos span:last-child { color: var(--text); }
.logg li.neg span:last-child { color: var(--negative); }
.logg li.warn span:last-child { color: var(--warning); }
@keyframes logg-in { from { opacity: 0; transform: translateX(-12px); } }

/* ---------- idékorten under radarn ---------- */
.fyndsektion { margin-bottom: 40px; }
.sektionshuvud { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.sektionshuvud h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
/* kolumnerna väljs efter antalet idéer (--kol), så att ingen hamnar ensam på en rad */
.fyndgrid { display: grid; grid-template-columns: repeat(var(--kol, 4), minmax(0, 1fr)); gap: var(--gap); }
.fynd { position: relative; display: grid; min-height: 250px; border-radius: var(--radius-card); background: var(--surface); overflow: hidden; animation: kort-in 650ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes kort-in { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.fynd-lank { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; height: 100%; padding: 18px 20px 20px; transition: background-color var(--t-ui) ease; animation: avslojas 800ms var(--ease-out) both; }
.fynd-lank:hover { background: var(--raised); }
.fynd-lank:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control); }
@keyframes avslojas { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.fynd-total { display: flex; align-items: baseline; gap: 3px; font-size: 32px; line-height: 36px; font-weight: 500; }
.fynd-total small { font-size: var(--fs-small); color: var(--muted); font-family: var(--font); }
.fynd-total .bast { color: #8fb8ea; }
.fynd h3 { font-size: 16px; line-height: 22px; font-weight: 600; }
.fynd-pitch { color: var(--soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.staplar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 4px; align-self: end; }
.stapel { display: grid; gap: 5px; justify-items: center; }
.stapel .spar { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 36px; }
.stapel i { width: 62%; max-width: 20px; border-radius: 2px 2px 0 0; background: var(--bar); transform-origin: bottom; animation: vaxa 800ms var(--ease-out) both; animation-delay: 450ms; }
.stapel i.best { background: var(--accent); }
.stapel:nth-child(2) i { animation-delay: 510ms; } .stapel:nth-child(3) i { animation-delay: 570ms; } .stapel:nth-child(4) i { animation-delay: 630ms; }
.stapel:nth-child(5) i { animation-delay: 690ms; } .stapel:nth-child(6) i { animation-delay: 750ms; }
.stapel b { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--muted); }
.fynd-fot { color: var(--muted); font-size: var(--fs-small); }
.fynd-fot .num { color: var(--soft); }
.fynd.fynd-vantar, .fynd.fynd-fel, .fynd.fynd-nu { background: transparent; }
.fynd-ruta { display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; border: 1px dashed var(--control); border-radius: var(--radius-card); background: var(--ground); }
.fynd-ruta h3 { color: var(--soft); animation: andas 2.4s ease-in-out infinite; }
.fynd-lage { color: var(--muted); font-size: 13px; }
.fynd-fel .fynd-ruta { border-color: #5a2a35; }
.fynd-fel .fynd-lage { color: var(--negative); }
.fynd-fel h3 { animation: none; }
@keyframes andas { 50% { opacity: .45; } }
.fynd-nu .fynd-ruta { grid-template-rows: auto auto 1fr; border-style: solid; border-color: var(--accent); background: var(--surface); }
.fynd-nu h3 { color: var(--text); animation: none; }
.fynd-nu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); opacity: .8; animation: skanna-ned 2.2s ease-in-out infinite alternate; }
@keyframes skanna-ned { to { transform: translateY(248px); } }
.fynd-spar { position: relative; display: block; align-self: end; height: 3px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.fynd-spar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transition: transform 1s linear; }

/* körningslistan: raden du tittar på i radarn har den aktiva tonen */
.radval { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.radval:hover { text-decoration: underline; text-underline-offset: 3px; }
tr.vald, tr.vald:hover td { background: var(--raised); }
td.n { white-space: nowrap; }
.tafram-grid { align-items: stretch; }
#ny { display: flex; flex-direction: column; }
#ny .fields { flex: 1; display: flex; flex-direction: column; }
#ny .fields > .bestallning { margin-top: auto; }
/* förhandsvisningen av beställningen: vald huvudmarknad lyser i ett litet skop */
.bestallning { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 14px 10px 4px; border-radius: var(--radius-field); background: var(--ground); color: var(--soft); }
.bestallning b { color: var(--text); font-weight: 600; }
.bestallning .skop .sektor-vald { opacity: .5; }
/* hur en körning går till: fyra korta block två och två under listan */
.sa-gar-det-till { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 8px var(--card-pad) 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.sa-gar-det-till > div { display: grid; gap: 4px; align-content: start; }
.sa-gar-det-till dt { padding: 0; border: 0; color: var(--text); font-weight: 500; }
.sa-gar-det-till dd { padding: 0; border: 0; color: var(--muted); font-size: 13px; line-height: 19px; }

/* ---------- översiktens remsa för en pågående körning ---------- */
.livestrip { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-bottom: var(--gap); padding: 10px 24px 10px 8px; }
.livestrip h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.livestrip-text { display: grid; gap: 8px; min-width: 0; }
.livestrip-text p { display: flex; align-items: center; gap: 8px; }
.skop.mini svg { margin: -12px 0; }
.skop.mini .ring, .skop.mini .eker { stroke: var(--control); }
/* ---------- grupper ---------- */
.gi-rad { border-top: 1px solid var(--rule); }
.gi-topp { display: grid; grid-template-columns: minmax(0, 1fr) 48px 150px auto; gap: 16px; align-items: center; padding: 12px var(--card-pad); }
.gi-ide a { font-weight: 500; }
.gi-ide a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gi-ide .sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 18px; }
.gi-poang { text-align: right; font-weight: 600; }
.gi-knappar { display: flex; gap: 14px; justify-content: flex-end; white-space: nowrap; }
.muted-link { color: var(--muted); }
.gi-plan { padding: 4px var(--card-pad) 20px; animation: rise 450ms var(--ease-out) both; }
.gi-plan .notice { margin-bottom: 12px; }
.kopiera { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.kopiera .input { height: var(--control-height); font-size: 13px; }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
textarea[readonly] { color: var(--soft); resize: none; }
.gruppval { display: grid; gap: 8px; }
.markerat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -4px 0 16px; padding: 10px 16px; border-radius: var(--radius-card); background: var(--raised); animation: rise 350ms var(--ease-out) both; }
.markerat .input { height: var(--control-height); width: auto; min-width: 180px; }
.markera { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
@media (max-width: 760px) {
  .gi-topp { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .gi-poang { grid-column: 2; grid-row: 1; }
  .gi-lage { grid-column: 1; }
  .gi-knappar { grid-column: 1 / -1; justify-content: flex-start; }
  .markerat .input { flex: 1; min-width: 0; }
}

.nygrupp { gap: 8px; }
.nygrupp .input { height: var(--control-height); width: 240px; }
.steg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steg4 > div { display: grid; gap: 6px; align-content: start; }
.steg4 dt { font-weight: 600; }
.steg4 dd { color: var(--soft); }
@media (max-width: 1100px) { .steg4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .steg4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nygrupp { width: 100%; }
  .nygrupp .input { flex: 1; width: auto; min-width: 0; }
}

.lista-fot { padding: 10px var(--card-pad) 0; border-top: 1px solid var(--rule); }
.oversikt-nyckel { margin-top: 8px; text-align: center; }

/* ---------- inloggningen: ett stort svepande skop bakom rutan ---------- */
.login { position: relative; overflow: hidden; }
.login-skop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: .6; }
.login-skop .skop { width: min(1100px, 160vw); }
.login .panel { position: relative; z-index: 1; }
.login .brand { margin-bottom: 10px; }
.login-text { color: var(--soft); margin-bottom: 24px; }

/* ---------- surfplatta och telefon ---------- */
@media (max-width: 1100px) {
  .fyndgrid { grid-template-columns: repeat(var(--kol-smal, 2), minmax(0, 1fr)); }
  .radarpanel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 24px; }
  .radar-fas { font-size: 26px; line-height: 32px; }
}
@media (max-width: 900px) {
  .radarpanel { grid-template-columns: minmax(0, 1fr); }
  .radar-yta { width: 100%; max-width: 560px; justify-self: center; }
}
@media (max-width: 760px) {
  .radarpanel { padding: 16px; gap: 20px; }
  .radar-fas { font-size: 22px; line-height: 28px; }
  .radar-tal > div { padding: 0 10px; }
  .radar-tal .kpi-value { font-size: 20px; line-height: 26px; }
  .radar-tal .kpi-value.liten { font-size: 13px; line-height: 18px; }
  /* skopet ritas i ungefär 0,6 skala på telefonen: texten görs större så att den blir minst 11 px */
  .skop .sektornamn { font-size: 20px; }
  .skop .ringtal { display: none; }
  .blip .poangtal { display: none; }
  .blip-bast .poangtal { display: inline; font-size: 20px; }
  .sa-gar-det-till { grid-template-columns: minmax(0, 1fr); }
  .fyndgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fynd { min-height: 0; }
  .fynd-ruta { min-height: 120px; }
  .livestrip { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px 16px 12px 4px; }
  .livestrip .btn { grid-column: 1 / -1; justify-self: start; margin-left: 12px; }
  .puls-prick { top: 8px; right: calc(50% - 16px); }
  .title-row .actions .btn:not(.primary) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .skop .svep { opacity: .35; }
}