/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #f2f3f6;
  --surface-3: #e7e9ee;
  --border: #e2e4ea;
  --border-strong: #cfd3db;
  --text: #14161b;
  --text-2: #4a5060;
  --text-3: #7a8090;
  --accent: #3b5fd9;
  --accent-soft: #e7ecfc;
  --accent-ink: #ffffff;
  --pos: #13803c;
  --neg: #c52a2f;
  --pos-soft: #e3f4e8;
  --neg-soft: #fbe6e6;
  --map-gap: #e9ebf0;
  --metal: #8f97a6;
  --metal-2: #c3c8d2;
  --alloc-cash: #8fb4e8;
  --alloc-fixed: #4f7fd1;
  --alloc-equity: #e0913a;
  --alloc-other: #a98bd6;
  --rec-1: #12813f;
  --rec-2: #5fb36f;
  --rec-3: #b9bdc6;
  --rec-4: #e8915d;
  --rec-5: #d0393c;
  --shadow: 0 1px 2px rgba(16, 20, 30, 0.05), 0 6px 20px rgba(16, 20, 30, 0.06);
  --shadow-lg: 0 10px 40px rgba(16, 20, 30, 0.18);
  --radius: 12px;
  --radius-sm: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0c0e12;
    --surface: #14171d;
    --surface-2: #1a1e26;
    --surface-3: #232833;
    --border: #242934;
    --border-strong: #343b48;
    --text: #e8eaf0;
    --text-2: #a6acba;
    --text-3: #727989;
    --accent: #6f8cff;
    --accent-soft: #1e2640;
    --accent-ink: #0c0e12;
    --pos: #3ccf72;
    --neg: #ff5c61;
    --pos-soft: #13261b;
    --neg-soft: #2b1517;
    --map-gap: #0c0e12;
    --metal: #6d7587;
    --metal-2: #9aa2b3;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0c0e12;
  --surface: #14171d;
  --surface-2: #1a1e26;
  --surface-3: #232833;
  --border: #242934;
  --border-strong: #343b48;
  --text: #e8eaf0;
  --text-2: #a6acba;
  --text-3: #727989;
  --accent: #6f8cff;
  --accent-soft: #1e2640;
  --accent-ink: #0c0e12;
  --pos: #3ccf72;
  --neg: #ff5c61;
  --pos-soft: #13261b;
  --neg-soft: #2b1517;
  --map-gap: #0c0e12;
  --metal: #6d7587;
  --metal-2: #9aa2b3;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.55);
}

/* Colour-blind friendly scheme: blue for gains, orange for losses */
:root[data-scheme='colorblind'] {
  --pos: #1f63c9;
  --neg: #c2530e;
  --pos-soft: #e4edfb;
  --neg-soft: #fcebdf;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme='colorblind']:not([data-theme='light']) {
    --pos: #5c9cff;
    --neg: #ff8f45;
    --pos-soft: #16233b;
    --neg-soft: #2e1d12;
  }
}
:root[data-scheme='colorblind'][data-theme='dark'] {
  --pos: #5c9cff;
  --neg: #ff8f45;
  --pos-soft: #16233b;
  --neg-soft: #2e1d12;
}

/* ---------- base ---------- */
[hidden] {
  display: none !important;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
.num {
  font-variant-numeric: tabular-nums;
}
.pos {
  color: var(--pos);
}
.neg {
  color: var(--neg);
}
.muted {
  color: var(--text-3);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover {
  background: var(--surface-2);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn.primary:hover {
  filter: brightness(1.08);
}
.btn.danger {
  color: var(--neg);
}
.btn.danger.solid {
  background: var(--neg);
  border-color: var(--neg);
  color: #fff;
}
.btn.ghost {
  border-color: transparent;
  background: transparent;
}
.btn.ghost:hover {
  background: var(--surface-2);
}
.btn.icon {
  width: 34px;
  padding: 0;
}
.btn.sm {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
}
.btn.sm.icon {
  width: 28px;
}
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.field small {
  color: var(--text-3);
  font-size: 12px;
}
.input,
.select {
  height: 38px;
  width: 100%;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.select.compact {
  height: 32px;
  font-size: 13px;
}
.row {
  display: flex;
  gap: 12px;
}
.row > * {
  flex: 1;
}
.input-group {
  display: flex;
}
.input-group .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .select {
  width: 96px;
  flex: none;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* segmented control */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar {
  display: none;
}
.seg button {
  border: 0;
  background: transparent;
  height: 28px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.seg button:hover {
  color: var(--text);
}
.seg button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.seg button.dim {
  color: var(--text-3);
}
.seg button.dim[aria-pressed='true'] {
  color: var(--text-2);
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.brand svg {
  width: 26px;
  height: 26px;
}
.portfolio-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}
.portfolio-picker .select {
  height: 34px;
  width: auto;
  max-width: 220px;
  font-weight: 600;
}
.tabs {
  display: flex;
  gap: 2px;
  margin-left: 6px;
}
.tabs a {
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.tabs a:hover {
  color: var(--text);
  background: var(--surface-2);
}
.tabs a[aria-current='page'] {
  color: var(--text);
  background: var(--surface-3);
}
.spacer {
  flex: 1;
}
.user-chip {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-weight: 550;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
}

/* ---------- layout ---------- */
.page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 18px 20px 40px;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.toolbar .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.updated {
  font-size: 12.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 0;
}
.card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- heat map ---------- */
.map-card {
  min-width: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 4px 0;
}
.map-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.map-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.map-title .sub {
  color: var(--text-3);
  font-size: 13px;
}
.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-3);
}
.legend-bar {
  display: flex;
  gap: 2px;
}
.legend-bar span {
  width: 26px;
  height: 12px;
  border-radius: 3px;
}
.treemap-wrap {
  position: relative;
  height: calc(100vh - 210px);
  min-height: 420px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--map-gap);
}
.treemap {
  position: absolute;
  inset: 0;
}
.tile {
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  padding: 2px 4px;
  user-select: none;
}
.tile:hover,
.tile:focus-visible {
  filter: brightness(1.15) saturate(1.05);
  z-index: 2;
}
.tile:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}
.tile .t-label {
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .t-line {
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.92;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tile .t-line.small {
  opacity: 0.75;
  font-weight: 500;
}
.tile.light-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.tile.dark-text {
  color: #14161b;
}
.group-label {
  position: absolute;
  z-index: 1;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.group-label .gl-val {
  flex: none;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0;
}
/* Under the heat map: what the corner symbols on the tiles mean (only those on the map). */
.badge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.badge-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-legend .t-badge {
  position: static;
  display: inline-block;
  flex: none;
}
.badge-legend .t-badge:is(.up, .down) {
  background: var(--text-2);
  color: var(--surface);
}
.group-label .gl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-frame {
  position: absolute;
  z-index: 0;
  border-radius: 8px;
  background: var(--surface-2);
}

/* gains/losses split header */
.split-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  padding: 0 4px;
}
.split-head .side-label {
  display: flex;
  flex-direction: column;
}
.split-head .side-label.right {
  align-items: flex-end;
  text-align: right;
}
.split-head .side-label b {
  white-space: nowrap;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.split-head .side-label span {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.split-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
  margin: 0 4px;
}
.split-still {
  margin: 6px 4px 0;
  font-size: 12px;
  color: var(--text-3);
}
.split-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: flex-grow 0.5s ease;
}
.split-net {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  padding-bottom: 2px;
}
.split-net b {
  display: block;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text);
}

.map-empty {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-2);
  padding: 20px;
}
.map-empty h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 20px;
}
.map-empty p {
  margin: 0 0 18px;
  max-width: 420px;
}
.map-empty .actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* loading shimmer bar */
.progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}
.progress.on {
  opacity: 1;
}
.progress::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 35%;
  background: var(--accent);
  border-radius: 2px;
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}

/* ---------- tooltip ---------- */
.tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  min-width: 230px;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
}
.tt-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.tt-name {
  font-weight: 700;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-sym {
  color: var(--text-3);
  white-space: nowrap;
  font-size: 12px;
}
.tt-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 8px;
  font-variant-numeric: tabular-nums;
}
.tt-big b {
  font-size: 19px;
  letter-spacing: -0.01em;
}
.tt-big span {
  font-weight: 650;
}
.tt-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.tt-rows dt {
  color: var(--text-3);
}
.tt-rows dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}
.tt-note {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 11.5px;
}

/* ---------- balance scale ---------- */
.balance {
  padding-bottom: 14px;
}
.balance-readout {
  text-align: center;
  padding: 6px 16px 0;
}
.balance-readout .net {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.balance-readout .pct-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pct-pill.pos {
  background: var(--pos-soft);
}
.pct-pill.neg {
  background: var(--neg-soft);
}
.pct-pill.flat {
  background: var(--surface-2);
  color: var(--text-2);
}
.balance-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2px;
}
.scale-metal {
  fill: var(--metal);
}
.scale-metal-2 {
  fill: var(--metal-2);
}
.scale-string {
  stroke: var(--metal);
  stroke-width: 1.2;
}
.scale-dish {
  fill: var(--surface-3);
  stroke: var(--metal);
  stroke-width: 1.2;
}
.scale-tick {
  stroke: var(--text-3);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.scale-dial {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 8;
  stroke-linecap: round;
}
.scale-dial-neg {
  fill: none;
  stroke: var(--neg);
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.45;
}
.scale-dial-pos {
  fill: none;
  stroke: var(--pos);
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.45;
}
.scale-needle {
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.scale-needle-tip {
  fill: var(--text);
}
.scale-sign {
  font-size: 20px;
  font-weight: 800;
  text-anchor: middle;
}
.scale-brick-label {
  font-size: 9.5px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.scale-brick {
  stroke: var(--surface);
  stroke-width: 1.5;
}
.balance-sides {
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: -4px;
}
.balance-sides div {
  display: flex;
  flex-direction: column;
}
.balance-sides div:last-child {
  text-align: right;
}
.balance-sides span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.balance-sides b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.balance-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 16px 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  text-align: center;
}
.balance-flow b {
  color: var(--text);
}
.balance-flow .arrow {
  color: var(--text-3);
}

/* ---------- movers ---------- */
.movers {
  padding-bottom: 8px;
}
.movers-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.mover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 7px 16px;
  cursor: pointer;
}
.mover:hover {
  background: var(--surface-2);
}
.mover .m-name {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mover .m-val {
  text-align: right;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.mover .m-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.mover .m-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.mover .m-sub {
  font-size: 12px;
  color: var(--text-3);
}
.mover .m-pct {
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.movers-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 16px;
}
.movers-empty {
  padding: 12px 16px;
  color: var(--text-3);
}

/* ---------- banners ---------- */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 13px;
}
.banner.warn {
  border-color: color-mix(in srgb, #e3a008 50%, var(--border));
  background: color-mix(in srgb, #e3a008 10%, var(--surface));
}

/* ---------- holdings table ---------- */
.holdings-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.holdings-head h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.kpis {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.kpi span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.kpi b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.table-card {
  overflow-x: auto;
}
table.holdings {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.holdings th,
.holdings td {
  padding: 11px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.holdings th:first-child,
.holdings td:first-child {
  text-align: left;
}
.holdings th {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  background: var(--surface);
}
.holdings th:hover {
  color: var(--text);
}
.holdings th.sorted::after {
  content: ' ↓';
}
.holdings th.sorted.asc::after {
  content: ' ↑';
}
.holdings th.nosort {
  cursor: default;
}
.holdings tbody tr:hover {
  background: var(--surface-2);
}
.holdings tbody tr:last-child td {
  border-bottom: 0;
}
.asset-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}
.swatch {
  width: 10px;
  height: 30px;
  border-radius: 3px;
  flex: none;
}
.asset-name {
  font-weight: 650;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-sub {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  gap: 6px;
  align-items: center;
}
/* All portfolios: which portfolios hold it */
.asset-pf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
/* All portfolios: "Add to which portfolio?" */
.pick-portfolio {
  display: grid;
  gap: 8px;
}
.pick-portfolio .btn {
  justify-content: flex-start;
}
.badge {
  display: inline-block;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-3);
  color: var(--text-2);
  line-height: 17px;
}
.badge.err {
  background: var(--neg-soft);
  color: var(--neg);
}
.badge.warn {
  background: color-mix(in srgb, #d39b00 18%, transparent);
  color: #b58500;
}
.cell-sub {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}
.row-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}
.empty-table {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-2);
}

/* ---------- dialogs ---------- */
dialog.modal {
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop {
  background: rgba(8, 10, 14, 0.5);
  backdrop-filter: blur(2px);
}
dialog.modal.small {
  width: min(420px, calc(100vw - 32px));
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
}
.modal-head h2 {
  margin: 0;
  font-size: 18px;
}
.modal-body {
  padding: 10px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 20px 20px;
}
.modal-foot .left {
  margin-right: auto;
}
.form-error {
  color: var(--neg);
  background: var(--neg-soft);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.hint {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0;
}
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  font-size: 12.5px;
}
.link-btn:hover {
  text-decoration: underline;
}

/* search autocomplete */
.search {
  position: relative;
}
.search-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  max-height: 280px;
  overflow-y: auto;
}
.search-results li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.search-results li[aria-selected='true'],
.search-results li:hover {
  background: var(--accent-soft);
}
.search-results .sr-sym {
  font-weight: 700;
}
.search-results .sr-name {
  grid-column: 1;
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-results .sr-meta {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-size: 11.5px;
  color: var(--text-3);
  text-align: right;
}
.search-results .sr-empty {
  display: block;
  color: var(--text-3);
  cursor: default;
}
.picked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.picked .p-main {
  flex: 1;
  min-width: 0;
}
.picked .p-sym {
  font-weight: 750;
}
.picked .p-name {
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picked .p-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.picked .p-price small {
  display: block;
  font-weight: 500;
  color: var(--text-3);
}
.kind-seg {
  width: 100%;
}
.kind-seg button {
  flex: 1;
}

/* ---------- toasts ---------- */
.toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.toast {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-weight: 550;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.2s ease;
}
.toast.error {
  background: var(--neg);
  color: #fff;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- popover menu ---------- */
.popover {
  position: absolute;
  z-index: 50;
  min-width: 260px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- auth ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.auth-art {
  position: relative;
  overflow: hidden;
  background: #0f1116;
  color: #e8eaf0;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-art .brand {
  color: #fff;
}
.auth-art h1 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  max-width: 520px;
}
.auth-art p {
  color: #a6acba;
  font-size: 16px;
  max-width: 460px;
  margin: 0;
}
.auth-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 56px);
  gap: 4px;
  margin: 36px 0;
  max-width: 560px;
}
.auth-mosaic span {
  min-width: 0;
  padding: 4px 6px;
  overflow: hidden;
  text-align: center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 750;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.auth-mosaic span small {
  font-weight: 600;
  opacity: 0.85;
  font-size: 11px;
}
.auth-form-wrap {
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.auth-form {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-form h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.auth-form .sub {
  margin: -8px 0 6px;
  color: var(--text-2);
}
.auth-form .btn {
  height: 40px;
}
.auth-switch {
  text-align: center;
  color: var(--text-2);
  font-size: 13.5px;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .user-chip .uname {
    display: none;
  }
}
@media (max-width: 1100px) {
  .map-layout {
    grid-template-columns: 1fr;
  }
  .side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .treemap-wrap {
    height: 62vh;
  }
}
@media (max-width: 760px) {
  .topbar {
    padding: 0 12px;
    gap: 8px;
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .brand span {
    display: none;
  }
  .user-chip {
    display: none;
  }
  .portfolio-picker .select {
    max-width: 40vw;
  }
  .topbar > .btn.icon,
  .lang-btn {
    width: 32px;
    padding: 0;
  }
  .lang-btn svg {
    display: none;
  }
  .seg button {
    padding: 0 7px;
    font-size: 12.5px;
  }
  .updated {
    display: none;
  }
  .tabs {
    order: 5;
    width: 100%;
    margin: 0;
  }
  .tabs a {
    flex: 1;
    text-align: center;
  }
  .page {
    padding: 12px 12px 32px;
  }
  .side {
    grid-template-columns: 1fr;
  }
  .treemap-wrap {
    height: 58vh;
    min-height: 340px;
  }
  .auth {
    grid-template-columns: 1fr;
  }
  .auth-art {
    padding: 28px 20px;
  }
  .auth-art h1 {
    font-size: 28px;
  }
  .auth-mosaic {
    grid-template-rows: repeat(4, 40px);
    margin: 20px 0 0;
  }
  .auth-art .foot {
    display: none;
  }
  .row {
    flex-direction: column;
  }
  .split-head {
    gap: 6px;
  }
  .split-head .side-label b {
    font-size: 14px;
  }
  .split-net b {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- tile motion: boxes morph between periods and views ---------- */
.treemap .tile {
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.5s,
    opacity 0.35s, filter 0.12s;
}
.treemap.no-anim .tile {
  transition: filter 0.12s, opacity 0.35s;
}
.auth-mosaic {
  grid-auto-flow: dense;
}

/* ---------- language switch ---------- */
.lang-btn {
  gap: 5px;
  padding: 0 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.auth {
  position: relative;
}
.auth-lang {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* ---------- colour range stepper & tile value toggle ---------- */
.map-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.legend-step {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.legend-step:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.legend-step:disabled {
  opacity: 0.4;
  cursor: default;
}
.legend-num {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.legend-auto {
  border: 0;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
  cursor: pointer;
}
.seg.seg-small button {
  height: 24px;
  padding: 0 9px;
  font-size: 12px;
}

/* ---------- charts ---------- */
.t-spark {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.t-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tile .t-label,
.tile .t-line {
  position: relative;
  z-index: 1;
}
.chart-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chart-periods {
  align-self: flex-start;
}
.chart-host {
  min-height: 230px;
}
.chart-empty {
  height: 220px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}
.chart-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  min-height: 24px;
}
.chart-readout b {
  font-size: 18px;
}
.chart-readout span {
  font-weight: 650;
  font-size: 13px;
}
.price-chart {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  outline: none;
}
.price-chart:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.chart-axis {
  stroke: var(--border);
}
.chart-ref {
  stroke: var(--text-3);
  stroke-dasharray: 3 4;
  opacity: 0.7;
}
.chart-gav {
  stroke: var(--accent);
  stroke-dasharray: 6 4;
  opacity: 0.8;
}
.chart-label {
  font-size: 10.5px;
  fill: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.chart-gav-label {
  fill: var(--accent);
  font-weight: 700;
}
.chart-cross {
  stroke: var(--text-2);
  stroke-width: 1;
}
.chart-dot {
  stroke: var(--surface);
  stroke-width: 2;
}

/* ---------- phones ---------- */
.holding-cards {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.holding-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.holding-card:last-child {
  border-bottom: 0;
}
.holding-card:active {
  background: var(--surface-2);
}
.hc-main {
  min-width: 0;
}
.hc-main .asset-name {
  white-space: nowrap;
}
.hc-main .asset-sub {
  flex-wrap: wrap;
}
.hc-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  white-space: nowrap;
}
.hc-values b {
  font-size: 14.5px;
}
.hc-values .small {
  font-size: 11.5px;
}

@media (max-width: 760px) {
  /* iPhone notch / home indicator */
  .topbar {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .page {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  table.holdings {
    display: none;
  }
  .holding-cards {
    display: block;
  }
  .kpis {
    gap: 14px 22px;
  }
  .kpi b {
    font-size: 16px;
  }
  /* Dialogs become bottom sheets */
  dialog.modal,
  dialog.modal.small {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheet-up 0.22s ease-out;
  }
  .legend-step {
    width: 30px;
    height: 30px;
  }
  .chart-periods {
    align-self: stretch;
  }
  .chart-periods button {
    flex: 1;
    padding: 0 4px;
  }
  .map-head {
    flex-direction: column;
    align-items: stretch;
  }
  .map-head > * {
    min-width: 0;
  }
  .map-controls {
    justify-content: space-between;
  }
  .legend {
    gap: 5px;
    flex-wrap: wrap;
  }
  .legend-bar span {
    width: 14px;
  }
  .legend-num {
    min-width: 0;
  }
  .toolbar .spacer {
    display: none;
  }
}
@keyframes sheet-up {
  from {
    transform: translateY(40px);
    opacity: 0.6;
  }
}
@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: none;
  }
}

/* ---------- auth extras & account ---------- */
.field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.field-row .link-btn {
  font-size: 12px !important;
  font-weight: 600;
}
.form-notice {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.form-notice.success {
  background: var(--pos-soft);
  border-color: transparent;
  color: var(--text);
}
.form-notice.error {
  background: var(--neg-soft);
  border-color: transparent;
  color: var(--neg);
}
.auth-icon {
  font-size: 34px;
  line-height: 1;
}
.pw-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.pw-bars {
  display: flex;
  gap: 3px;
}
.pw-bars i {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
}
.pw-meter[data-score='0'] .pw-bars i.on,
.pw-meter[data-score='1'] .pw-bars i.on {
  background: var(--neg);
}
.pw-meter[data-score='2'] .pw-bars i.on {
  background: #e3a008;
}
.pw-meter[data-score='3'] .pw-bars i.on,
.pw-meter[data-score='4'] .pw-bars i.on {
  background: var(--pos);
}
button.user-chip {
  border: 0;
  background: transparent;
  padding: 4px 8px 4px 4px;
  border-radius: 99px;
  cursor: pointer;
}
button.user-chip:hover {
  background: var(--surface-2);
}
.account-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.account-section:last-child {
  border-bottom: 0;
}
.account-section h3 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.account-section .btn {
  align-self: flex-start;
}
.row-inline {
  display: flex;
  gap: 8px;
}
.row-inline .input {
  flex: 1;
}
.account-email {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge.ok {
  background: var(--pos-soft);
  color: var(--pos);
}

/* ---------- admin ---------- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.admin-stat {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-stat span {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.admin-stat b {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.admin-stat small {
  color: var(--text-3);
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.admin-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-card h2 {
  margin: 0;
  font-size: 15px;
}
.admin-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.admin-setting .hint {
  margin-top: 2px;
}
.admin-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
}
.admin-checks li {
  display: grid;
  grid-template-columns: 12px 110px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.admin-checks .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
}
.dot.ok {
  background: var(--pos);
}
.dot.bad {
  background: var(--neg);
}
.dot.warn {
  background: #e3a008;
}
.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-users-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.admin-users-head .input {
  max-width: 280px;
}
.admin-user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.au-main {
  min-width: 0;
}
.au-name {
  font-weight: 650;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.au-sub {
  font-size: 12.5px;
}
.au-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-user {
    flex-direction: column;
    align-items: flex-start;
  }
  .au-actions {
    justify-content: flex-start;
  }
  .admin-users-head {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-users-head .input {
    max-width: none;
  }
}
.admin-setting .seg {
  flex: none;
}

/* ---------- import ---------- */
dialog.modal.wide {
  width: min(820px, calc(100vw - 32px));
}
.holdings-actions {
  display: flex;
  gap: 8px;
}
.import-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.import-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
}
.file-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--text-2);
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
.file-drop:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.file-drop.small {
  padding: 10px;
  font-size: 13px;
}
.file-drop svg {
  width: 18px;
  height: 18px;
}
.file-drop .file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.import-accounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.import-text {
  height: auto;
  padding: 10px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  resize: vertical;
}
.import-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.import-table-wrap {
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.import-table th,
.import-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.import-table th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.import-table .asset-name {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-input {
  height: 30px;
  width: 130px;
  font-size: 12.5px;
}
.import-status {
  font-size: 11.5px;
  font-weight: 600;
}
.import-status.ok {
  color: var(--pos);
}
.import-status.warn {
  color: #c98a06;
}
.import-status.bad {
  color: var(--neg);
}
.import-mode {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 760px) {
  .holdings-actions {
    width: 100%;
  }
  .holdings-actions .btn {
    flex: 1;
  }
}

/* ---------- balance analysis ---------- */
.analysis-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.analysis-profile {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 72px;
}
.analysis-profile h2,
.analysis-card h2 {
  margin: 0;
  font-size: 15px;
}
.analysis-profile h3 {
  margin: 6px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.input-suffix {
  display: flex;
  align-items: center;
  position: relative;
}
.input-suffix span {
  position: absolute;
  right: 11px;
  color: var(--text-3);
  font-size: 13px;
  pointer-events: none;
}
.input-suffix .input {
  padding-right: 38px;
}
.assumptions summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 8px;
}
.assumptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assumptions[open] {
  padding-top: 4px;
}
.assumptions .field {
  margin-top: 8px;
}
.analysis-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.analysis-score {
  padding: 18px;
  display: flex;
  gap: 22px;
  align-items: center;
}
.score-ring {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 8px solid var(--surface-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring b {
  font-size: 32px;
  line-height: 1;
}
.score-ring b.warn {
  color: #c98a06;
}
.score-ring span {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}
.score-text {
  flex: 1;
  min-width: 0;
}
.score-text h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.score-text p {
  margin: 0 0 14px;
}
.seesaw-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--alloc-fixed), var(--alloc-equity));
  opacity: 0.9;
}
.seesaw-target,
.seesaw-now {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.seesaw-target {
  width: 20px;
  height: 20px;
  border: 3px dashed var(--text);
  background: transparent;
}
.seesaw-now {
  width: 16px;
  height: 16px;
  background: var(--text);
  border: 3px solid var(--surface);
  transition: left 0.5s ease;
}
.seesaw-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 6px;
}
.seesaw-legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
}
.seesaw-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}
.mk-now {
  background: var(--text);
}
.mk-target {
  border: 2px dashed var(--text);
}
.analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.analysis-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.alloc-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-2);
}
.alloc-bar {
  display: flex;
  height: 22px;
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
}
.alloc-bar i {
  display: block;
  min-width: 2px;
  transition: flex-grow 0.4s ease;
}
.alloc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--text-2);
}
.alloc-legend i,
.alloc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.alloc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.alloc-table th,
.alloc-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.alloc-table th:first-child,
.alloc-table td:first-child {
  text-align: left;
}
.alloc-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.alloc-table td.over {
  color: var(--alloc-equity);
  font-weight: 650;
}
.alloc-table td.under {
  color: var(--alloc-fixed);
  font-weight: 650;
}
.findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finding {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
.finding svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.finding.bad svg {
  color: var(--neg);
}
.finding.warn svg {
  color: #c98a06;
}
.finding.info svg {
  color: var(--accent);
}
.finding.good svg {
  color: var(--pos);
}
.analysis-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.breakdown h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.bd-row {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 3px 0;
}
.bd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}
.bd-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}
.bd-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.class-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px 16px;
}
.class-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.class-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.class-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.class-row .select {
  width: auto;
  max-width: 190px;
  flex: none;
}
.disclaimer {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
}
.disclaimer svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
@media (max-width: 1100px) {
  .analysis-layout {
    grid-template-columns: 1fr;
  }
  .analysis-profile {
    position: static;
  }
}
@media (max-width: 760px) {
  .analysis-grid,
  .analysis-spread {
    grid-template-columns: 1fr;
  }
  .analysis-score {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .score-ring {
    align-self: center;
  }
}

/* ---------- future scenarios ---------- */
.future-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.fut-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fut-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.fut-slider-row {
  flex-wrap: nowrap;
}
.fut-slider {
  flex: 1;
  accent-color: var(--accent);
  min-width: 0;
  height: 28px;
}
.fut-time {
  min-width: 112px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fut-disclaimer {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
}
.fut-disclaimer svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}
.fut-assumptions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
}
.fut-assume {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 8px;
}
.fut-assume .input {
  height: 32px;
}
.balance-note {
  margin: 8px 16px 0;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

/* ---------- analysts' view ---------- */
.group-label.clickable {
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: left;
  border-radius: 8px 8px 0 0;
}
.group-label.clickable:hover,
.group-label.clickable:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}
.group-label .gl-go {
  flex: none;
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
}
.tile.owned {
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0, 0, 0, 0.35);
}
.map-title .btn {
  margin-right: 4px;
}
.sector-panel:empty {
  display: none;
}
.sector-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 0;
}
.sp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.sp-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-stat span {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
}
.sp-stat b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.sp-verdict {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.sp-verdict svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  margin-top: 2px;
}
.sp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sp-columns h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.sp-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13.5px;
}
.sp-list .link-btn {
  font-size: inherit;
}
.sector-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sector-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sector-table th,
.sector-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
/* The outer columns keep clear of the table's rounded border. */
.sector-table th:first-child,
.sector-table td:first-child {
  padding-left: 16px;
}
.sector-table th:last-child,
.sector-table td:last-child {
  padding-right: 16px;
}
.sector-table th:first-child,
.sector-table td:first-child {
  text-align: left;
}
.sector-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  background: var(--surface);
  position: sticky;
  top: 0;
}
.sector-table tbody tr {
  cursor: pointer;
}
.sector-table tbody tr:hover {
  background: var(--surface-2);
}
.sector-table tr.owned td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.sector-table td .badge {
  margin-left: 6px;
}

/* analyst card */
.ac-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.ac-price {
  font-size: 24px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.ac-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.ac-headline b {
  font-size: 28px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ac-headline span {
  font-size: 12.5px;
}
.ac-holding {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 13.5px;
}
.ac-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ac-section h3 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.ac-section p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.ac-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 22px;
  margin: 0;
  font-size: 13px;
}
.ac-kv > div {
  min-width: 0;
}
.ac-kv dt {
  color: var(--text-3);
}
.ac-kv dd {
  margin: -2px 0 6px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ac-summary {
  color: var(--text-2);
}
.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ac-table th,
.ac-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.ac-table th:first-child,
.ac-table td:first-child {
  text-align: left;
}
.ac-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.ac-table tbody th {
  font-weight: 600;
  color: var(--text-2);
}
.target-range {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: var(--surface-3);
  margin: 6px 4px 0;
}
.tr-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pos) 35%, transparent);
}
.tr-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.tr-mark.mean {
  width: 16px;
  height: 16px;
  background: var(--pos);
  border: 3px solid var(--surface);
}
.tr-mark.now {
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: var(--text);
}
.tr-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.tr-labels div {
  display: flex;
  flex-direction: column;
}
.tr-labels span {
  font-size: 11.5px;
  color: var(--text-3);
}
.tr-labels small {
  font-weight: 650;
}
.decomp {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.decomp-item {
  position: relative;
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.decomp-item:last-child {
  background: var(--accent-soft);
  border-color: transparent;
}
.decomp-label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}
.decomp-item b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.decomp-op {
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 14px;
  text-align: center;
  font-weight: 800;
  color: var(--text-3);
}
.rec-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rec-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-2);
}
.rec-bar {
  display: flex;
  height: 20px;
  gap: 2px;
  border-radius: 5px;
  overflow: hidden;
}
.rec-bar i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.rec-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}
.rec-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}
@media (max-width: 760px) {
  .sp-columns {
    grid-template-columns: 1fr;
  }
  .ac-headline {
    align-items: flex-start;
    text-align: left;
  }
  .rec-row {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .toolbar-group {
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  dialog.modal.wide {
    width: 100%;
    max-width: 100%;
  }
}

/* ---------- investment map (every sector on a market) ---------- */
.mm-table td.mm-bar-cell {
  width: 120px;
  min-width: 90px;
  padding-left: 0;
}
.mm-bar {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 99px;
  background: var(--surface-2, rgba(127, 127, 127, 0.12));
  overflow: hidden;
}
.mm-bar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text-3, rgba(127, 127, 127, 0.5));
}
.mm-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
}
.mm-fill.pos {
  background: var(--pos);
}
.mm-fill.neg {
  background: var(--neg);
}
.mm-diff {
  margin-left: 5px;
  font-size: 10px;
}
.mm-diff.over {
  color: var(--accent);
}
.mm-diff.under {
  color: var(--text-3, var(--text-2));
}
.mm-hint {
  margin: -4px 0 0;
}
.mm-top {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.mm-top b {
  display: block;
  margin-bottom: 3px;
}
.mm-top div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mm-top div span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .sp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .sp-stat b {
    font-size: 15px;
  }
  .lens-seg {
    width: 100%;
  }
  .lens-seg button {
    flex: 1;
    padding: 0 4px;
  }
}
.ac-class-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 10px;
}
.ac-class-note svg {
  flex: none;
  margin-top: 2px;
}

/* ---------- bank accounts outside the portfolio (analysis only) ---------- */
.bank-accounts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.bank-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.bank-accounts > .btn {
  align-self: flex-start;
}

/* ---------- analysts' trend badges and early warnings ---------- */
.t-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 99px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 800;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  pointer-events: none;
  z-index: 2;
}
.t-badge.warn {
  background: #ffcf33;
  color: #4a2c00;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.t-badge.boost {
  background: #fff;
  color: #13803c;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.tt-signals {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  display: grid;
  gap: 3px;
}
.tt-signals .neg,
.ac-signal.neg {
  color: var(--neg);
}
.tt-signals .pos,
.ac-signal.pos {
  color: var(--pos);
}
.trend-cell {
  font-weight: 800;
  font-size: 14px;
}
.trend-cell.up,
.trend-cell.boost {
  color: var(--pos);
}
.trend-cell.down {
  color: var(--neg);
}
.trend-cell.warn {
  color: #d39b00;
}
.trend-cell.flat {
  color: var(--text-3);
}
.ac-signals,
.ac-actions {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 5px;
  font-size: 13px;
}
.ac-signal.strong {
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--neg-soft);
}
.ac-signal.strong.pos {
  background: var(--pos-soft);
}
.ac-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 12px 0 6px;
}
.perf-table th.current,
.perf-table td.current {
  background: var(--surface-2);
  font-weight: 700;
}
.filter-note {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- dashboard ---------- */
.dashboard .dash-tabs {
  margin: 14px 0 16px;
}
.dash-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Every content card gets room to breathe: text never touches its edges. */
.dash-card {
  padding: 18px 20px 20px;
}
@media (max-width: 600px) {
  .dash-card {
    padding: 14px 14px 16px;
  }
}
.dash-card h2 {
  font-size: 16px;
  margin: 0 0 10px;
}
.dash-wait {
  padding: 24px;
  text-align: center;
}
.dash-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.dash-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.dash-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-chip b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.dash-chip span {
  font-size: 12px;
  color: var(--text-2);
}
.dash-signals ul,
.dash-shifts,
.dash-list,
.dash-events,
.dash-sayings,
.month-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.dash-signals li,
.dash-shifts .neg,
.dash-list .neg {
  font-size: 12px;
}
.dash-signals .neg,
.dash-shifts li.neg {
  color: var(--neg);
}
.dash-signals .pos,
.dash-shifts li.pos {
  color: var(--pos);
}
.dash-shifts li,
.dash-list li {
  padding: 9px 13px;
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13px;
}
.dash-shifts li b,
.dash-list li b {
  color: var(--text);
}
.dash-shifts li div {
  margin-top: 2px;
}
.dash-shifts li.strong {
  border-left: 3px solid currentColor;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.dash-scatter-wrap {
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  margin: 4px 0 6px;
}
.dash-scatter {
  display: block;
  font-family: inherit;
  overflow: visible;
}
.dash-scatter .grid {
  stroke: var(--border);
  stroke-width: 1;
}
.dash-scatter .axis.zero {
  stroke: var(--text-3);
  stroke-width: 1.5;
}
.dash-scatter .tick {
  fill: var(--text-3);
  font-size: 11px;
}
.dash-scatter .axis-label {
  fill: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.dash-scatter .q {
  opacity: 0.06;
}
.dash-scatter .q-bright {
  fill: var(--pos);
}
.dash-scatter .q-dull {
  fill: var(--neg);
}
.dash-scatter .q-label {
  fill: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}
.dash-scatter .dot {
  fill-opacity: 0.85;
  stroke: var(--surface);
  stroke-width: 1.5;
  transition: fill-opacity 0.12s, opacity 0.12s;
}
.dash-scatter .dot-g {
  transition: opacity 0.12s;
}
.dash-scatter .dot-g:focus {
  outline: none;
}
.dash-scatter .leader {
  stroke: var(--text-3);
  stroke-width: 1;
  opacity: 0.7;
}
.dash-scatter .true-pt {
  fill: var(--text-3);
}
/* Hovering a bubble (or its name in a list) dims the others. */
.dash-scatter.focus .dot-g:not(.on) {
  opacity: 0.28;
}
.dash-scatter .dot-g.on .dot {
  fill-opacity: 1;
  stroke: var(--text);
  stroke-width: 2;
}
.dash-scatter .dot-g.on .dot-label {
  display: block;
  font-weight: 800;
}
.dash-scatter .dot.q1 {
  fill: var(--pos);
}
.dash-scatter .dot.q2 {
  fill: #2f9e8f;
}
.dash-scatter .dot.q3 {
  fill: var(--neg);
}
.dash-scatter .dot.q4 {
  fill: #d39b00;
}
.dash-scatter .dot.warn {
  stroke: var(--neg);
  stroke-width: 3;
}
.dash-scatter .dot-g {
  cursor: pointer;
}
.dash-scatter .dot-g:hover .dot,
.dash-scatter .dot-g:focus .dot {
  fill-opacity: 1;
}
.dash-scatter .dot-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.dash-map-card {
  padding: 8px;
}
.dash-map {
  position: relative;
  height: 460px;
}
.dash-treemap {
  position: absolute;
  inset: 0;
}
.dash-events li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ev-date {
  min-width: 90px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ev-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--surface-2);
}
.dash-events .exdiv .ev-type {
  color: var(--pos);
  background: var(--pos-soft);
}
.dash-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.dash-month {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-month.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.dash-month h3 {
  margin: 0;
  font-size: 15px;
  text-transform: capitalize;
}
.season-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 48px 52px;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}
.season-name {
  color: var(--text-2);
}
.season-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.season-pos {
  font-size: 11px;
}
.month-note b {
  font-size: 13px;
}
.month-note p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-2);
}
.month-events li {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
}
.month-events li.exdiv {
  background: var(--pos-soft);
}
.dash-sayings li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.dash-sayings li span {
  font-size: 13px;
  color: var(--text-2);
}
.muted-row td {
  opacity: 0.7;
}
@media (max-width: 760px) {
  .dash-map {
    height: 520px;
  }
  .dashboard .dash-tabs {
    width: 100%;
    overflow-x: auto;
  }
  .dashboard .dash-tabs button {
    flex: 1;
    white-space: nowrap;
  }
}
/* Five tabs in the header: let them shrink on narrow screens instead of pushing the page sideways. */
@media (max-width: 760px) {
  .tabs {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs a {
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 13px;
    white-space: nowrap;
  }
}
@media (max-width: 1000px) {
  .user-chip .uname {
    display: none;
  }
}
@media (max-width: 420px) {
  .tabs a {
    font-size: 12px;
    padding-left: 3px;
    padding-right: 3px;
  }
}

/* ---------- sortable tables ---------- */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover {
  color: var(--text);
}
th.sortable::after {
  content: '↕';
  margin-left: 4px;
  opacity: 0.35;
  font-size: 10px;
}
th.sortable[aria-sort='ascending']::after {
  content: '▲';
  opacity: 0.9;
}
th.sortable[aria-sort='descending']::after {
  content: '▼';
  opacity: 0.9;
}

/* ---------- cash on/off on the map ---------- */
.cash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cash-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--pos);
  box-shadow: 0 0 0 2px var(--pos-soft);
}
.cash-toggle.off .cash-dot {
  background: var(--text-3);
  box-shadow: none;
}
.cash-toggle.off {
  color: var(--text-2);
}

/* ---------- dashboard: clickable summaries, explanations, picker ---------- */
.dash-chip.clickable {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.dash-chip.clickable:hover {
  border-color: var(--accent);
}
.dash-chip.clickable.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--surface-2);
}
.dash-chip-hint {
  margin: -6px 0 0;
}
.dash-map.small {
  height: 320px;
}
.dash-howto p,
.dash-howto ul {
  margin: 0 0 8px;
  font-size: 14px;
}
.dash-howto ul {
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.dash-period-meaning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
}
.dash-period-meaning svg {
  flex: none;
  margin-top: 2px;
}
.dash-explain {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.dash-explain p {
  margin: 4px 0;
}
.dash-picker {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0;
}
.dash-picker summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.dash-picker-actions {
  display: flex;
  gap: 14px;
  margin: 8px 0;
}
.dash-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px;
  max-height: 220px;
  overflow: auto;
}
.dash-card .dash-row {
  margin-bottom: 8px;
}
.dash-scatter .dot-label.minor {
  display: none;
}
.dash-scatter .dot-g:hover .dot-label.minor,
.dash-scatter .dot-g:focus .dot-label.minor {
  display: block;
}
.dash-scatter .dot-g:hover .dot-label {
  font-weight: 800;
}
.sector-table tbody tr[title] td:first-child .cell-sub {
  display: inline;
  margin-left: 6px;
}
.dash-period-meaning svg {
  width: 16px;
  height: 16px;
}

/* ---------- watchlist: follow buttons, followed stocks, since your last visit ---------- */
.follow-btn[aria-pressed='true'] {
  color: var(--accent);
  border-color: var(--accent);
}
.follow-btn.compact {
  background: none;
  border: 0;
  padding: 2px 4px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 6px;
}
.follow-btn.compact:hover,
.follow-btn.compact:focus-visible {
  color: var(--accent);
  background: var(--surface-2);
}
.follow-btn.compact[aria-pressed='true'] {
  color: var(--accent);
}
.sector-table th.follow-col,
.sector-table td.follow-col {
  width: 1%;
  padding-left: 6px;
  padding-right: 0;
  text-align: center;
}
.sector-table th.follow-col + th,
.sector-table td.follow-col + td {
  text-align: left;
}
.ac-follow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 12px;
}
.ac-follow .hint {
  margin: 0;
  font-size: 12.5px;
}
.dash-since {
  border-left: 3px solid var(--accent);
}
.dash-since > :last-child {
  margin-bottom: 0;
}
.dash-since-when {
  font-weight: 500;
  font-size: 13px;
}
.dash-since-sum {
  margin: 0 0 10px;
  font-size: 14px;
}
.dash-since-none {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
}
.dash-since-none svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--pos);
}

/* ---------- watchlist page ---------- */
.dash-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 14px 18px;
}
.dash-link:hover {
  border-color: var(--accent);
}
.dash-link > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.dash-link-star {
  font-size: 24px;
  color: #d39b00;
}
.dash-link-go {
  font-size: 22px;
  color: var(--text-3);
}
.watch-results {
  margin-top: 10px;
}
.watch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.watch-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.watch-list li > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- structure: Översikt / Portfölj / Marknad / Analys ---------- */
.subnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 0 14px;
}
.subnav:empty {
  display: none;
}
.subnav-title {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.subnav-tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-tabs::-webkit-scrollbar {
  display: none;
}
.subnav-tabs a {
  flex: none;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 99px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
}
.subnav-tabs a:hover {
  color: var(--text);
  background: var(--surface-2);
}
.subnav-tabs a[aria-current='page'] {
  color: var(--accent);
  background: var(--accent-soft);
}

/* The investment map shares the map view: no portfolio toolbar, numbers or side panel there. */
.market-context .portfolio-toolbar,
.market-context .strip-host,
.market-context .kpi-host,
.market-context .side {
  display: none !important;
}
.market-context .map-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* market strip: indices and currencies today */
.market-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.market-strip::-webkit-scrollbar {
  display: none;
}
.strip-host:empty,
.kpi-host:empty {
  display: none;
}
.subnav .strip-host {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
}
.subnav .market-strip {
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}
.strip-item {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px;
  white-space: nowrap;
}
.strip-item:hover {
  border-color: var(--accent);
}
.strip-name {
  color: var(--text-2);
  font-weight: 600;
}
.strip-val,
.strip-chg {
  font-variant-numeric: tabular-nums;
}
.strip-chg {
  font-weight: 700;
}

/* key figures */
.kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  margin: 0 2px 12px;
}
.kpi-strip .kpi b {
  font-size: 19px;
}
.kpi-strip.big {
  margin: 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.kpi-strip.big .kpi b {
  font-size: 25px;
  letter-spacing: -0.01em;
}

/* the start page */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}
.overview-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.overview-side .dash-card > .link-btn,
.overview-grid .dash-card > .link-btn {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
}
.dash-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.dash-card-head h2 {
  margin: 0;
}
a.link-btn {
  text-decoration: none;
}
a.link-btn:hover {
  text-decoration: underline;
}
.overview-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.overview-links .dash-link {
  text-decoration: none;
}
.overview-links .dash-link > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.overview-links .dash-link > span:nth-child(2) {
  display: block;
  flex: none;
}
.overview-links .dash-link .muted {
  font-size: 12.5px;
}
.dash-events li.clickable {
  cursor: pointer;
  border-radius: 6px;
}
.dash-events li.clickable:hover,
.dash-events li.clickable:focus-visible {
  background: var(--surface-2);
}
.dash-shifts li:focus-visible,
.dash-events li.clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* the shared stock card */
.stock-card .modal-body {
  gap: 12px;
}
.ac-actions-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ac-actions-bar:empty {
  display: none;
}
.ac-tabs {
  align-self: flex-start;
}
.ac-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.ac-holding-facts {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.ac-holding-facts .tt-big {
  margin-top: 0;
}

/* menus in popovers and the account dialog */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}
.menu-list .field {
  margin-bottom: 6px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}
.menu-item:hover {
  background: var(--surface-2);
}
.menu-item svg {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}
.account-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.account-extras .btn {
  text-decoration: none;
}

/* phone: bottom menu and toolbar */
.bottom-nav,
.tb-more {
  display: none;
}
@media (max-width: 1200px) {
  .user-chip .uname {
    display: none;
  }
}
@media (max-width: 900px) {
  .topbar .brand span {
    display: none;
  }
  .topbar {
    gap: 8px;
  }
  .tabs {
    margin-left: 0;
  }
  .tabs a {
    padding: 7px 9px;
  }
}
@media (max-width: 1100px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .overview-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .topbar {
    flex-wrap: nowrap;
  }
  .topbar .tabs,
  .header-extras,
  .header-logout {
    display: none;
  }
  .topbar .user-chip {
    display: flex;
  }
  .portfolio-picker .select {
    max-width: 52vw;
  }
  .page {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .bottom-nav {
    display: grid;
    /* Four places, five with Rapporter: one row whatever the number. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--border);
  }
  .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-decoration: none;
  }
  .bn-item svg {
    width: 22px;
    height: 22px;
  }
  .bn-item[aria-current='page'] {
    color: var(--accent);
  }
  .subnav {
    gap: 6px;
    margin-bottom: 10px;
  }
  .subnav-title {
    font-size: 18px;
    width: 100%;
  }
  .subnav-tabs {
    width: 100%;
  }
  .toolbar {
    gap: 8px;
  }
  .toolbar-scroll {
    max-width: 100%;
    min-width: 0;
  }
  .tb-secondary {
    display: none !important;
  }
  .tb-add .tb-label {
    display: none;
  }
  .tb-add .btn {
    padding: 6px 9px;
  }
  .tb-more {
    display: inline-flex;
  }
  .kpi-strip {
    gap: 4px 20px;
  }
  .kpi-strip .kpi b {
    font-size: 16px;
  }
  .kpi-strip.big {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 14px 16px;
  }
  .kpi-strip.big .kpi b {
    font-size: 19px;
  }
  .overview-side {
    grid-template-columns: 1fr;
  }
}

/* the investment map's one-row controls */
.market-bar {
  padding: 8px 10px;
}
.market-bar .select.compact {
  width: auto;
  max-width: 220px;
}
.filter-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.filter-count {
  font-weight: 800;
}
.market-loading {
  font-size: 12.5px;
}
.menu-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 2px 10px 4px;
}
.menu-item[aria-pressed='true'] {
  color: var(--accent);
}
.menu-item[aria-pressed='true'] svg {
  color: var(--accent);
}
.menu-check {
  width: 18px;
  flex: none;
}
.menu-hint {
  padding: 2px 10px 0;
}
.menu-sep {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  margin: 6px 0;
}
.menu-list .check {
  padding: 4px 10px;
}

/* Analys: results first, your situation beside them */
.page-intro {
  margin: -6px 0 14px;
}
.analysis-layout.results-first {
  grid-template-columns: minmax(0, 1fr) 320px;
}
.profile-details > summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  list-style: none;
}
.profile-details > summary::-webkit-details-marker {
  display: none;
}
.profile-details > summary h2::after {
  content: '▾';
  float: right;
  color: var(--text-3);
  font-size: 13px;
  transition: transform 0.15s;
}
.profile-details:not([open]) > summary h2::after {
  transform: rotate(-90deg);
}
.profile-summary {
  font-size: 12.5px;
}
.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 1100px) {
  .analysis-layout.results-first {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* phone: the heat map's controls in two rows, so the map starts higher up */
.lbl-short {
  display: none;
}
@media (max-width: 760px) {
  .lbl-long {
    display: none;
  }
  .lbl-short {
    display: inline;
  }
  .subnav-title {
    display: none;
  }
  .subnav:not(:has(.subnav-tabs)) {
    display: none;
  }
  .portfolio-toolbar .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .portfolio-toolbar .toolbar > :first-child {
    grid-area: 1 / 1;
  }
  .portfolio-toolbar .toolbar > :last-child {
    grid-area: 1 / 2;
  }
  .portfolio-toolbar .toolbar > :nth-child(2) {
    grid-area: 2 / 1 / 3 / 3;
  }
  .portfolio-toolbar .spacer,
  .tb-refresh,
  .map-title .dup-title {
    display: none;
  }
  .kpi-strip:not(.big) {
    gap: 2px 18px;
    margin-bottom: 10px;
  }
  .kpi-strip:not(.big) .kpi span {
    font-size: 10.5px;
  }
  .kpi-strip:not(.big) .kpi b {
    font-size: 15px;
  }
}

/* phone: the investment map's bar in two rows; the map's explanation folded to two lines */
.mb-break {
  display: none;
}
@media (max-width: 760px) {
  .market-bar .fut-row {
    gap: 8px;
  }
  .market-bar .mb-select {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  .market-bar .filter-btn {
    order: 2;
  }
  .market-bar .mb-info {
    order: 3;
  }
  .market-bar .mb-break {
    display: block;
    order: 4;
    flex-basis: 100%;
    height: 0;
  }
  .market-bar .mb-content {
    order: 5;
  }
  .market-bar .mb-metric {
    order: 6;
  }
  .market-bar .mb-periods {
    order: 7;
  }
  .market-bar .market-loading {
    order: 8;
  }
  .market-bar .spacer,
  .market-bar .mb-label {
    display: none;
  }
  .map-title .sub:not(.expanded) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
  }
}

/* holdings list: the name opens the stock card */
.asset-open {
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.asset-open:hover .asset-name,
.asset-open:focus-visible .asset-name {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- sign-in page: the way back to the start page ---------- */
.auth-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.auth-side .auth-form-wrap {
  flex: 1;
}
.auth-back {
  align-self: flex-start;
  margin: 18px 20px 0;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
}
.auth-back:hover {
  color: var(--accent);
}
a.brand {
  color: inherit;
  text-decoration: none;
}
.auth-art a.brand {
  color: #fff;
}

/* ---------- landing page (before logging in) ---------- */
.lp {
  min-height: 100vh;
  overflow-x: clip;
}
.lp-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 62px;
  padding: 0 max(20px, calc((100vw - 1200px) / 2));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.lp-nav {
  display: flex;
  gap: 2px;
  margin-left: 14px;
}
.lp-nav button {
  border: 0;
  background: none;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text-2);
  font-weight: 600;
  cursor: pointer;
}
.lp-nav button:hover {
  color: var(--text);
  background: var(--surface-2);
}
.btn.lg {
  height: 46px;
  padding: 0 22px;
  font-size: 15.5px;
  border-radius: 11px;
}
.lp-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 20px 16px;
  text-align: center;
}
.lp-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 13px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
.lp-hero h1 {
  margin: 0;
  font-size: clamp(32px, 5.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 800;
}
.lp-lead {
  margin: 22px auto 0;
  max-width: 740px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--text-2);
}
.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
}
.lp-avail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin: 16px auto 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
.lp-avail svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.lp-final .lp-avail {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.lp-login-line {
  margin: 14px 0 0;
  text-align: center;
  color: var(--text-2);
  font-size: 14.5px;
}
.lp-login-line .link-btn {
  font-size: inherit;
}
.lp-facts {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  color: var(--text-2);
  font-size: 13.5px;
}
.lp-facts li,
.lp-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.lp-facts svg,
.lp-bullets svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  color: var(--pos);
}
.lp-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}
.lp-section-head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 30px;
}
.lp-section-head h2 {
  margin: 0;
  font-size: clamp(25px, 3.3vw, 38px);
  letter-spacing: -0.022em;
  line-height: 1.14;
}
.lp-section-head p {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.5;
}

/* the demo */
.lp-demo-section {
  padding-top: 36px;
}
#lp-demo,
#lp-features,
#lp-start {
  scroll-margin-top: 78px;
}
.lp-demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lp-demo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.lp-dots {
  display: flex;
  gap: 6px;
}
.lp-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.lp-dots i:nth-child(2) {
  background: #febc2e;
}
.lp-dots i:nth-child(3) {
  background: #28c840;
}
.lp-url {
  font-size: 12px;
  color: var(--text-3);
  padding: 3px 14px;
  border-radius: 6px;
  background: var(--surface);
}
.lp-demo-tag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.lp-demo-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px 0;
}
.lp-demo-group {
  font-size: 13px;
}
.lp-demo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
  padding: 12px 14px 14px;
}
.lp-demo-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-demo-map {
  position: relative;
  height: 480px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--map-gap);
}
.lp-demo-split:empty {
  display: none;
}
.lp-demo-caption {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-3);
}
.lp-demo-side .card {
  box-shadow: none;
}
.lp-demo-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.lp-demo-card .hint {
  margin: 0 0 6px;
}
.lp-demo-big {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.lp-demo-big.pos {
  color: var(--pos);
}
.lp-demo-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
}
.lp-demo-signals li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.lp-demo-signals li.neg b {
  color: var(--neg);
}
.lp-demo-signals li.pos b {
  color: var(--pos);
}
.lp-card-sym {
  margin: -6px 0 0;
  font-size: 13px;
}
.lp-card-spark {
  height: 72px;
}
.lp-card-spark svg {
  width: 100%;
  height: 100%;
}
.lp-card-spark.pos {
  color: var(--pos);
}
.lp-card-spark.neg {
  color: var(--neg);
}
.lp-card-signal {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 650;
  font-size: 13px;
}
.lp-card-signal.neg {
  background: var(--neg-soft);
  color: var(--neg);
}
.lp-card-signal.pos {
  background: var(--pos-soft);
  color: var(--pos);
}

/* what's new here */
.lp-unique {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-u-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lp-glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 21px;
  font-weight: 800;
}
.lp-u-card h3 {
  margin: 14px 0 6px;
  font-size: 17px;
}
.lp-u-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* feature rows */
.lp-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  padding: 34px 0;
}
.lp-feature.flip .lp-feature-text {
  order: 2;
}
.lp-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lp-feature h3,
.lp-mobile h3 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 29px);
  letter-spacing: -0.016em;
  line-height: 1.2;
}
.lp-feature-text > p:not(.lp-kicker) {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.lp-bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 9px;
  font-size: 14.5px;
}
.lp-frame {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.lp-frame .lp-demo-bar {
  height: 26px;
  padding: 0 10px;
}
.lp-frame .lp-dots i {
  width: 8px;
  height: 8px;
}
.lp-shot {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-2);
}

/* the tour */
.lp-tour {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.lp-tour-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-tour-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lp-tour-item b {
  font-size: 15px;
}
.lp-tour-item span {
  display: none;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.lp-tour-item:hover b,
.lp-tour-item[aria-selected='true'] b {
  color: var(--accent);
}
.lp-tour-item[aria-selected='true'] {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.lp-tour-item[aria-selected='true'] span {
  display: block;
}
.lp-tour-shot .lp-frame:has(.tall) {
  max-width: 460px;
  margin: 0 auto;
}
.lp-tour-desc {
  display: none;
}

/* on your phone */
.lp-mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
}
.lp-phones {
  display: flex;
  gap: 22px;
}
.lp-phone {
  margin: 0;
  width: 236px;
  padding: 8px;
  border-radius: 36px;
  background: #0b0d11;
  border: 1px solid #2a2f3a;
  box-shadow: var(--shadow-lg);
}
.lp-phone .lp-shot {
  border-radius: 28px;
}
.lp-phone:nth-child(2) {
  margin-top: 56px;
}

/* get started */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-steps li {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lp-step-n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}
.lp-steps h3 {
  margin: 14px 0 6px;
  font-size: 17.5px;
}
.lp-steps p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* trust */
.lp-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.lp-trust li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.lp-trust span {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* the last call to action */
.lp-final {
  max-width: 1160px;
  margin: 20px auto 60px;
  padding: 60px 24px;
  text-align: center;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 20%, rgba(31, 168, 87, 0.55), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(224, 57, 62, 0.4), transparent 40%),
    radial-gradient(circle at 70% 10%, rgba(59, 95, 217, 0.55), transparent 45%),
    #0f1116;
}
.lp-final h2 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.022em;
}
.lp-final p {
  margin: 12px auto 0;
  max-width: 560px;
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.85);
}
.btn.primary.light {
  background: #fff;
  border-color: #fff;
  color: #14161b;
}
.btn.primary.light:hover {
  background: #e8ebf3;
}
.btn.ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.btn.ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lp-foot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 13px;
}
.lp-foot p {
  flex: 1;
  margin: 0;
}
.lp-foot-links {
  display: flex;
  gap: 16px;
}

@media (max-width: 1000px) {
  .lp-demo-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-demo-side {
    max-width: 420px;
  }
  .lp-feature,
  .lp-feature.flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .lp-feature.flip .lp-feature-text {
    order: 0;
  }
  .lp-unique,
  .lp-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-tour {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-tour-list {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lp-tour-item {
    flex: none;
    padding: 8px 14px;
    border-radius: 99px;
  }
  .lp-tour-item[aria-selected='true'] span {
    display: none;
  }
  .lp-tour-desc {
    display: block;
    margin: 14px 2px 0;
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.55;
  }
  .lp-mobile {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lp-phones {
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .lp-top {
    height: 56px;
    padding: 0 12px;
    gap: 6px;
  }
  .lp-nav {
    display: none;
  }
  .lp-top .lang-btn {
    width: 34px;
    padding: 0;
  }
  .lp-top .lang-btn svg {
    display: none;
  }
  .lp-top .btn {
    padding: 0 11px;
  }
  .lp-hero {
    padding: 40px 16px 8px;
  }
  .lp-section {
    padding: 40px 16px;
  }
  .lp-demo-section {
    padding: 24px 12px;
  }
  .lp-demo-tag {
    display: none;
  }
  .lp-demo-tools,
  .lp-demo-body {
    padding-left: 10px;
    padding-right: 10px;
  }
  .lp-demo-map {
    height: 420px;
  }
  .lp-unique,
  .lp-steps,
  .lp-trust {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-phone {
    width: 44vw;
    padding: 6px;
    border-radius: 26px;
  }
  .lp-phone .lp-shot {
    border-radius: 21px;
  }
  .lp-phone:nth-child(2) {
    margin-top: 32px;
  }
  .lp-final {
    margin: 10px 12px 40px;
    padding: 44px 18px;
    border-radius: 18px;
  }
}
@media (max-width: 440px) {
  .lp-top .brand span {
    display: none;
  }
}

/* phone: short names sharing the row; when they don't fit, the row scrolls sideways (the current one is shown, and
   a fade at the edge hints at the rest) rather than squeezing the text */
@media (max-width: 760px) {
  .subnav-tabs {
    overflow-x: auto;
    gap: 2px;
    padding: 3px;
    border-radius: 99px;
    background: var(--surface-2);
  }
  .subnav-tabs.scrolls {
    border-radius: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);
  }
  .subnav-tabs.scrolls a:first-child {
    margin-left: 14px;
  }
  .subnav-tabs a {
    flex: 1 0 auto;
    padding: 7px 12px;
    text-align: center;
    font-size: 13px;
  }
  .subnav-tabs.scrolls a:last-child {
    margin-right: 22px;
  }
  .subnav-tabs a[aria-current='page'] {
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }
}

/* ---------- holdings hidden from the heat maps ---------- */
.map-show {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-show > :empty {
  display: none;
}
.hide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hide-toggle .lbl-short:empty {
  display: none;
}
.hide-toggle.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.hide-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(340px, calc(100vw - 48px));
}
.hide-picker .dash-picker-actions {
  margin: 0;
  flex-wrap: wrap;
}
.hide-picker-cash {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.hide-picker-list {
  display: grid;
  max-height: min(45vh, 320px);
  overflow: auto;
}
.hide-picker-list .check {
  padding: 4px 0;
}
.hide-picker-list .check.off {
  opacity: 0.5;
  cursor: default;
}
.hp-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-val {
  color: var(--text-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.kpi-note {
  flex-basis: 100%;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.kpi-note svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.kpi-host > .kpi-note {
  margin: 0 2px 12px;
}
.dash-card-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-map .map-empty p {
  margin-bottom: 12px;
}
@media (max-width: 760px) {
  .hide-picker-list .check {
    padding: 7px 0;
  }
  .hide-picker-list {
    max-height: min(36vh, 320px);
  }
  .popover:has(> .hide-picker) {
    scroll-margin-bottom: 88px; /* clear of the bottom menu */
  }
}

/* ---------- stock card: how the numbers are calculated ---------- */
/* An icon in a note or banner has no size of its own: without this an <svg> grows to the full width (the big ⓘ). */
.banner > svg,
.ac-class-note > svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.ac-class-note {
  font-size: 12.5px;
  color: var(--text-2);
}
.ac-explain-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.ac-explain-switch[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
}
.ac-section h3 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn.sm.icon.ac-why {
  width: 26px;
  height: 26px;
  margin: -6px 0;
  color: var(--text-3);
}
.ac-why[aria-expanded='true'] {
  color: var(--accent);
  background: var(--accent-soft);
}
.explain-on .ac-why {
  display: none;
}
.ac-explain {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.explain-on .ac-explain,
.explain-open > .ac-explain {
  display: flex;
}
.ac-section .ac-explain p {
  font-size: 13px;
}
.ac-explain ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ac-reading {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--border-strong);
}
.ac-reading.up {
  border-left-color: var(--pos);
}
.ac-reading.down {
  border-left-color: var(--neg);
}
.ac-section p.decomp-math {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* "What do the columns mean?" above the analyst tables */
.col-help {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-2);
}
.col-help > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  color: var(--accent);
  font-weight: 600;
}
.col-help > summary::-webkit-details-marker {
  display: none;
}
.col-help > summary svg {
  width: 14px;
  height: 14px;
}
.col-help ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.5;
}
.col-help b {
  color: var(--text);
}
.col-help p {
  max-width: 80ch;
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Performance vs expectations: the explanation folds away */
.dash-help > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-help > summary::-webkit-details-marker {
  display: none;
}
.dash-help > summary h2 {
  margin: 0;
}
.dash-help > summary::after {
  content: '▾';
  color: var(--text-3);
  transition: transform 0.15s;
}
.dash-help:not([open]) > summary::after {
  transform: rotate(-90deg);
}
.dash-help[open] > summary {
  margin-bottom: 10px;
}
.dash-card .dash-period-meaning {
  margin: 0 0 10px;
  font-size: 13px;
}
.dash-list li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- stock card: events on the price chart, and "Why did it move?" ---------- */
.chart-host {
  position: relative;
}
.chart-events .k-report,
.chart-legend .k-report,
.chart-tip .k-report {
  --ev: var(--accent);
}
.chart-events .k-dividend,
.chart-legend .k-dividend,
.chart-tip .k-dividend {
  --ev: var(--alloc-equity);
}
.chart-events .k-up,
.chart-legend .k-up,
.chart-tip .k-up {
  --ev: var(--pos);
}
.chart-events .k-down,
.chart-legend .k-down,
.chart-tip .k-down {
  --ev: var(--neg);
}
.chart-events .k-buy,
.chart-legend .k-buy,
.chart-tip .k-buy {
  --ev: var(--pos);
}
.chart-events .k-sell,
.chart-legend .k-sell,
.chart-tip .k-sell {
  --ev: var(--neg);
}
.chart-events .k-deposit,
.chart-legend .k-deposit,
.chart-tip .k-deposit {
  --ev: var(--accent);
}
.chart-events .k-withdraw,
.chart-legend .k-withdraw,
.chart-tip .k-withdraw {
  --ev: var(--alloc-equity);
}
.chart-ev {
  cursor: pointer;
  outline: none;
}
.ev-hit {
  fill: transparent;
}
.chart-ev:focus-visible .ev-hit {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.ev-mark {
  fill: var(--ev);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.ev-group {
  fill: var(--surface-3);
  stroke: var(--ev, var(--border-strong));
  stroke-width: 1.5;
}
.ev-count {
  font-size: 9.5px;
  font-weight: 700;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}
.chart-ev:hover .ev-mark,
.chart-ev:focus-visible .ev-mark,
.chart-ev:hover .ev-group,
.chart-ev:focus-visible .ev-group {
  stroke: var(--text);
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  min-height: 16px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-3);
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chart-legend i,
.chart-tip i {
  font-style: normal;
  color: var(--ev);
  font-size: 10px;
  line-height: 1;
}
.chart-tip {
  position: absolute;
  z-index: 5;
  max-width: min(330px, 100%);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  display: grid;
  gap: 4px;
}
.chart-tip[hidden] {
  display: none;
}
.chart-tip-row {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: baseline;
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.news-list li {
  display: grid;
  gap: 2px;
}
.news-list a {
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
}
.news-list a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.news-meta {
  font-size: 12px;
  color: var(--text-3);
}
/* Heat map tooltip: the latest headline when a holding moved ±4 % today */
.tt-news {
  margin: -2px 0 8px;
  min-width: 0;
}
.tt-news-meta {
  font-size: 11.5px;
  color: var(--text-3);
}
.tt-news-meta .pos,
.tt-news-meta .neg {
  font-weight: 650;
}
.tt-news-meta .pos {
  color: var(--pos);
}
.tt-news-meta .neg {
  color: var(--neg);
}
.tt-news-title {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* your portfolio against its index: the line under the change in the key figures, and the chart on Översikt */
.kpi .kpi-bench {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi .kpi-bench i {
  font-style: normal;
  font-weight: 700;
}
.kpi-strip.big .kpi-bench {
  font-size: 13px;
}
.overview-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.bench-card .dash-card-head {
  align-items: center;
  margin-bottom: 6px;
}
.bench-periods {
  flex: none;
}
.bench-wait {
  margin: 8px 0 4px;
  font-size: 13px;
}
.bench-headline {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bench-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.bench-legend i {
  font-style: normal;
  font-weight: 700;
}
.bench-legend .muted {
  font-weight: 500;
}
.bench-key::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
  background: var(--accent);
}
.bench-key.index::before {
  height: 2px;
  background: var(--text-3);
}
.bench-chart {
  margin-top: 6px;
  min-height: 160px;
}
.cmp-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cmp-line.cmp-port {
  stroke: var(--accent);
  stroke-width: 2;
}
.cmp-line.cmp-index {
  stroke: var(--text-3);
  stroke-width: 1.5;
}
.cmp-end.cmp-port,
.cmp-dot.cmp-port {
  fill: var(--accent);
}
.cmp-end.cmp-index,
.cmp-dot.cmp-index {
  fill: var(--text-3);
}
.bench-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}
@media (max-width: 760px) {
  .bench-card .dash-card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bench-periods button {
    flex: 1;
    padding: 0 4px;
  }
  .bench-headline {
    font-size: 17px;
  }
}

/* ---------- Analys → Ombalansering ---------- */

.rb-climate > p {
  margin: 8px 0 12px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.rb-how-list {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.rb-how {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.rb-how summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}
.rb-how p {
  margin: 8px 0 0;
  line-height: 1.55;
}

.rb-summary {
  margin: 6px 0 10px;
  font-weight: 600;
  font-size: 13.5px;
}
.rb-scroll {
  overflow-x: auto;
}
table.rb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rb-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rb-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.rb-table .num {
  text-align: right;
  white-space: nowrap;
}
.rb-table tr.rb-picked td {
  background: var(--accent-soft);
}
.rb-table tr.lvl-keep td {
  color: var(--text-2);
}
.rb-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  max-width: 220px;
}
.rb-name.inline {
  display: inline;
}
.rb-name .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.rb-name:hover b {
  color: var(--accent);
  text-decoration: underline;
}
.rb-badge {
  margin-left: 6px;
  font-size: 10px;
  vertical-align: middle;
}
.rb-star {
  color: #d39b00;
}

.rb-score {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-weight: 800;
  background: var(--surface-3);
}
.rb-score.lvl-strong {
  background: var(--neg);
  color: #fff;
}
.rb-score.lvl-review {
  background: #d39b00;
  color: #1c1400;
}
.rb-score.lvl-keep {
  background: var(--surface-3);
  color: var(--text-2);
}
.rb-score.cand {
  background: var(--pos-soft);
  color: var(--pos);
}
.rb-pick {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rb-pick .select {
  width: auto;
}
.rb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 6px 0;
}
.rb-controls .select {
  width: auto;
  max-width: 200px;
}
.rb-style {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
}
.rb-style.growth {
  color: #6c4ce0;
  background: color-mix(in srgb, #6c4ce0 14%, transparent);
}
.rb-style.cyclical {
  color: #c27400;
  background: color-mix(in srgb, #d39b00 16%, transparent);
}
.rb-style.defensive {
  color: #1f7a8c;
  background: color-mix(in srgb, #2f9e8f 16%, transparent);
}

.rb-bars {
  display: grid;
  gap: 7px;
}
.rb-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 92px 64px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.rb-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-fav {
  color: var(--pos);
  font-weight: 800;
}
.rb-bar {
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: var(--surface-2);
}
.rb-bar .mine {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 99px;
  background: var(--accent);
}
.rb-bar .mine.over {
  background: var(--neg);
}
.rb-bar .ref {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--text);
  border-radius: 2px;
}
.rb-bar-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rb-bar-diff {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rb-bar-diff.over {
  color: #c27400;
}
.rb-bar-diff.under {
  color: var(--accent);
}
.rb-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 20px;
  align-items: end;
}
.rb-inputs .select {
  width: 100%;
}
.rb-act {
  display: inline-block;
  min-width: 52px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}
.rb-act.sell {
  background: var(--neg-soft);
  color: var(--neg);
}
.rb-act.buy {
  background: var(--pos-soft);
  color: var(--pos);
}
.rb-act.cash {
  background: var(--surface-2);
  color: var(--text-2);
}
.rb-table.trades .rb-style {
  margin-left: 6px;
}
.rb-table tfoot td {
  border-bottom: 0;
  padding-top: 10px;
}
.rb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 760px) {
  .rb-table .opt {
    display: none;
  }
  .rb-bar-row {
    grid-template-columns: minmax(84px, 110px) minmax(0, 1fr) 76px;
  }
  .rb-bar-diff {
    display: none;
  }
  
  
  
}
.rb-unused {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
}
.rb-unused ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.rb-name b {
  white-space: nowrap;
}

@media (max-width: 760px) {
  
  .rb-climate > p {
    font-size: 13px;
  }
  
  
}

/* Phones: the review and candidate tables become compact cards. */
.rb-pick-label {
  display: none;
}
@media (max-width: 760px) {
  .rb-table.cards thead {
    display: none;
  }
  .rb-table.cards,
  .rb-table.cards tbody {
    display: block;
  }
  .rb-table.cards tr {
    display: grid;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--border);
  }
  .rb-table.cards td {
    border: 0;
    padding: 0;
    background: none !important;
  }
  .rb-table.cards tr.rb-picked {
    background: var(--accent-soft);
    border-radius: 10px;
  }
  .rb-table.review tr {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }
  .rb-table.review .c-name {
    order: 1;
  }
  .rb-table.review .c-share {
    order: 2;
  }
  .rb-table.review .c-up {
    order: 3;
  }
  .rb-table.review .c-score {
    order: 4;
  }
  .rb-table.review .c-why {
    order: 5;
    grid-column: 1 / -1;
  }
  .rb-table.review .c-pick {
    order: 6;
    grid-column: 1 / -1;
  }
  .rb-table.review .rb-pick-label {
    display: inline;
    font-weight: 600;
    font-size: 13px;
  }
  .rb-table.cand tr {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  .rb-table.cand .c-why {
    grid-column: 1 / -1;
    min-width: 0 !important;
  }
  .rb-table.cand .c-div {
    display: none;
  }
  
  .rb-scroll {
    overflow-x: visible;
  }
  .rb-table.cards .rb-name {
    max-width: 100%;
  }
}

/* ---------- Portfölj → Värdeutveckling ---------- */
.history-chart {
  min-height: 250px;
  margin-top: 6px;
}
.history-kpis {
  margin: 6px 0 4px;
}
.tx-type {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
}
.tx-type.k-buy {
  background: var(--pos-soft);
  color: var(--pos);
}
.tx-type.k-sell {
  background: var(--neg-soft);
  color: var(--neg);
}
.tx-type.k-deposit {
  background: var(--accent-soft);
  color: var(--accent);
}
.tx-type.k-withdraw {
  background: color-mix(in srgb, var(--alloc-equity) 16%, transparent);
  color: #b0640f;
}
.tx-table td {
  vertical-align: middle;
}
.trade-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 13px;
}
.trade-note > span {
  flex: 1 1 220px;
}
.trade-summary {
  min-height: 1.3em;
  font-weight: 600;
  color: var(--text-2);
}
@media (max-width: 760px) {
  .tx-table th:nth-child(4),
  .tx-table td:nth-child(4),
  .tx-table th:nth-child(5),
  .tx-table td:nth-child(5) {
    display: none;
  }
}

/* ---------- Översikt: today's watch ---------- */
.tw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Nothing on the list today: one slim line. */
.today-watch.tw-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.today-watch.tw-empty h2 {
  margin: 0;
  font-size: 15px;
}
.today-watch.tw-empty .muted {
  flex: 1 1 220px;
  font-size: 13px;
}
.tw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}
.tw-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  min-width: 0;
}
.tw-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tw-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tw-name b {
  font-size: 15px;
}
.tw-name .muted {
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-name:hover b {
  color: var(--accent);
}
.tw-x {
  margin: -4px -6px 0 0;
}
.tw-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tw-reason {
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--surface-3);
  color: var(--text-2);
}
.tw-reason.k-report {
  background: var(--accent-soft);
  color: var(--accent);
}
.tw-reason.k-exdiv,
.tw-reason.k-payment {
  background: color-mix(in srgb, var(--alloc-equity) 18%, transparent);
  color: #b0640f;
}
.tw-reason.k-up {
  background: var(--pos-soft);
  color: var(--pos);
}
.tw-reason.k-down {
  background: var(--neg-soft);
  color: var(--neg);
}
.tw-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.tw-price b {
  font-size: 18px;
}
.tw-price span:not(.muted) {
  font-weight: 700;
}
.tw-spark {
  height: 42px;
  cursor: pointer;
  color: var(--text-3);
}
.tw-spark.pos {
  color: var(--pos);
}
.tw-spark.neg {
  color: var(--neg);
}
.tw-spark svg {
  width: 100%;
  height: 100%;
}
.tw-line {
  margin: 0;
  font-size: 12.5px;
}
.tw-signal {
  font-weight: 600;
}
.tw-news {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.tw-news-head {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.tw-news-head.fresh {
  color: var(--accent);
}
.tw-headline {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.35;
}
.tw-headline span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tw-headline:hover span {
  color: var(--accent);
  text-decoration: underline;
}
.tw-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, 80vw);
}
.tw-results .menu-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.tw-results .menu-item .muted {
  font-weight: 500;
  font-size: 12px;
}
/* News: the company's press releases (marked "Press release") and the insider-trades line, news.js */
.news-tag {
  font-weight: 700;
  color: var(--accent);
}
.news-reg {
  cursor: help;
}
.tw-headline small span {
  display: inline; /* not the clamped title box of .tw-headline span */
}
.ins {
  position: relative;
}
.ins-line {
  padding: 4px 0; /* also the gap to the box, inside the hover area */
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ins-line .muted {
  color: var(--text-3);
}
.ins-line span {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.ins-pop {
  display: none;
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  width: min(340px, calc(100vw - 24px));
  max-height: min(440px, 70vh);
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
}
.ins.up .ins-pop {
  top: auto;
  bottom: 100%;
}
.ins.open .ins-pop {
  display: flex;
}
@media (hover: hover) {
  .ins:hover .ins-pop {
    display: flex;
  }
}
/* touch screens: tapping the line opens the trades in place, under it */
@media (hover: none) {
  .ins-pop {
    position: static;
    width: auto;
    max-height: none;
    margin-top: 2px;
    box-shadow: none;
  }
}
.ins-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ins-list li {
  display: grid;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.ins-list .pos {
  color: var(--pos);
}
.ins-list .neg {
  color: var(--neg);
}
.ins-pop .hint {
  margin: 0;
  font-size: 11.5px;
}
.news-section .ins {
  margin-top: 6px;
}
.news-section .ins-line {
  font-size: 13px;
}
/* Date fields in the holding form: "No date" when empty (Safari would show today's date in grey, which looks saved),
   and a Today button beside them. holdings.js dateField() */
.date-field {
  position: relative;
  display: flex;
  gap: 6px;
}
.date-field .input {
  flex: 1;
  min-width: 0;
}
.date-field .btn {
  flex: none;
  height: 38px;
}
.date-field[data-empty] .input:not(:focus) {
  color: transparent;
}
.date-field[data-empty] .input:not(:focus)::-webkit-datetime-edit {
  opacity: 0;
}
.date-field[data-empty]:not(:focus-within)::before {
  content: attr(data-label);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
/* iPad/iPhone Safari: dialog buttons wrap instead of running off the edge, and date fields keep to their box
   (Safari gives them a fixed native width otherwise) */
.modal-foot {
  flex-wrap: wrap;
}
@supports (-webkit-touch-callout: none) {
  .input[type='date'] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  .input[type='date']::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* Ombalansering: the target, picks and reasons */

.rb-mixbar {
  display: flex;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 700;
}
.rb-mixbar i {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-style: normal;
  transition: flex-grow 0.2s;
}
.rb-mixbar i.growth {
  background: color-mix(in srgb, #6c4ce0 30%, transparent);
  color: #5a3fd0;
}
.rb-mixbar i.cyclical {
  background: color-mix(in srgb, #d39b00 30%, transparent);
  color: #9a6400;
}
.rb-mixbar i.defensive {
  background: color-mix(in srgb, #2f9e8f 30%, transparent);
  color: #1b6f75;
}
.rb-sliders {
  display: grid;
  gap: 6px;
}
.rb-slider {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.rb-slider input {
  accent-color: var(--accent);
  width: 100%;
}
.rb-slider b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rb-why {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .rb-mixbar i.growth {
    color: #b8a6ff;
  }
  :root:not([data-theme='light']) .rb-mixbar i.cyclical {
    color: #ffd166;
  }
  :root:not([data-theme='light']) .rb-mixbar i.defensive {
    color: #7fd6c9;
  }
}
:root[data-theme='dark'] .rb-mixbar i.growth {
  color: #b8a6ff;
}
:root[data-theme='dark'] .rb-mixbar i.cyclical {
  color: #ffd166;
}
:root[data-theme='dark'] .rb-mixbar i.defensive {
  color: #7fd6c9;
}

@media (max-width: 760px) {
  
  .rb-slider {
    grid-template-columns: 92px minmax(0, 1fr) 44px;
  }
}

/* ---------- Marknad → Förväntningskompass ---------- */
:root {
  --z-wake: #7048d0;
  --z-lead: var(--pos);
  --z-float: #c48600;
  --z-fade: var(--neg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --z-wake: #a88bff;
    --z-float: #f0b429;
  }
}
:root[data-theme='dark'] {
  --z-wake: #a88bff;
  --z-float: #f0b429;
}
:root[data-scheme='colorblind'] {
  --z-float: #8a8f9a;
}
.z-wake {
  --z: var(--z-wake);
}
.z-lead {
  --z: var(--z-lead);
}
.z-float {
  --z: var(--z-float);
}
.z-fade {
  --z: var(--z-fade);
}
.cmp-head h2 {
  margin: 0;
}
.cmp-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cmp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--z-wake) 14%, transparent);
  color: var(--z-wake);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cmp-badge svg {
  width: 15px;
  height: 15px;
}
.cmp-lead {
  margin: 6px 0 0;
  max-width: 760px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.cmp-breadth {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.cmp-breadth b {
  color: var(--text);
  font-size: 15px;
}
.cmp-loading {
  margin: 12px 0 0;
}
.cmp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.cmp-controls .select {
  width: auto;
  max-width: 200px;
}
.cmp-search {
  width: 180px;
  height: 32px;
  font-size: 13px;
}
.cmp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-areas: 'chart side' 'list side';
  gap: 16px;
  align-items: start;
}
.cmp-chart-card {
  grid-area: chart;
}
.cmp-side {
  grid-area: side;
}
.cmp-list-card {
  grid-area: list;
  min-width: 0;
}
@media (max-width: 980px) {
  .cmp-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'chart' 'side' 'list';
  }
}
.cmp-chart-card {
  padding: 12px;
  min-width: 0;
}
.cmp-chart {
  width: 100%;
  min-height: 320px;
}
.cmp-svg {
  display: block;
  font-family: inherit;
  user-select: none;
}
.cmp-q {
  fill: var(--z);
  opacity: 0.055;
}
.cmp-q.z-wake {
  opacity: 0.09;
}
.cmp-grid {
  stroke: var(--border);
  stroke-dasharray: 2 4;
}
.cmp-axis {
  stroke: var(--border-strong);
  stroke-width: 1.2;
}
.cmp-cycle {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
  opacity: 0.35;
}
.cmp-cycle-arrow {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.cmp-diag {
  stroke: var(--text-3);
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
  opacity: 0.6;
}
.cmp-diag-label {
  fill: var(--text-3);
  font-size: 11px;
  font-style: italic;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.cmp-zl {
  fill: var(--z);
  font-size: 13px;
  font-weight: 800;
}
.cmp-zh {
  fill: var(--text-3);
  font-size: 11px;
}
.cmp-ax {
  fill: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
}
.cmp-ax-end {
  fill: var(--text-3);
  font-size: 11px;
}
.cmp-when {
  fill: var(--text);
  font-size: 15px;
  font-weight: 800;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
}
.cmp-dot-g {
  cursor: pointer;
  transition: opacity 0.15s;
}
.cmp-dot-g:focus {
  outline: none;
}
.cmp-dot {
  fill: var(--z);
  fill-opacity: 0.72;
  stroke: var(--surface);
  stroke-width: 1.2;
}
.cmp-ring {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
}
.cmp-ring.followed {
  stroke: var(--text-2);
  stroke-width: 1.2;
  stroke-dasharray: 2.5 2;
}
.cmp-trail {
  display: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.cmp-then {
  display: none;
  fill: var(--surface);
  stroke: var(--text-3);
  stroke-width: 1.2;
}
/* Every company is a dot; only your own stocks and the one you point at or pick draw their tail (all of them is a choice). */
.cmp-svg.all-trails .cmp-trail,
.cmp-dot-g.own .cmp-trail,
.cmp-dot-g.on .cmp-trail,
.cmp-dot-g.sel .cmp-trail,
.cmp-dot-g.own .cmp-then,
.cmp-dot-g.on .cmp-then,
.cmp-dot-g.sel .cmp-then {
  display: inline;
}
.cmp-svg.all-trails .cmp-trail {
  opacity: 0.5;
}
.cmp-dot-g.own .cmp-trail,
.cmp-dot-g.sel .cmp-trail,
.cmp-dot-g.on .cmp-trail {
  opacity: 1;
}
.cmp-dot-g.sel .cmp-trail,
.cmp-dot-g.on .cmp-trail {
  stroke-width: 3;
}
.cmp-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 650;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.cmp-label.minor {
  display: none;
}
.cmp-svg.playing .cmp-dot-g text.cmp-label,
.cmp-svg.playing .cmp-labels {
  display: none;
}
.cmp-svg.hovering .cmp-labels {
  opacity: 0.35;
}
.cmp-dot-g.on .cmp-label,
.cmp-dot-g.sel .cmp-label {
  display: inline;
  font-weight: 800;
}
.cmp-svg.hovering .cmp-dot-g:not(.on):not(.sel),
.cmp-svg.has-sel .cmp-dot-g:not(.sel):not(.keep):not(.on) {
  opacity: 0.45;
}
.cmp-svg.hovering .cmp-dot-g:not(.on):not(.sel) {
  opacity: 0.3;
}
.cmp-dot-g.on .cmp-dot,
.cmp-dot-g.sel .cmp-dot {
  fill-opacity: 1;
  stroke: var(--text);
  stroke-width: 2;
}
.cmp-dot-g.sel .cmp-dot {
  stroke-width: 2.5;
}
.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
}
.cmp-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cmp-legend i {
  display: inline-block;
}
.cmp-legend .lg-size {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--text-3) 0 3px, transparent 3.5px), color-mix(in srgb, var(--text-3) 25%, transparent);
}
.cmp-legend .lg-ring {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text);
}
.cmp-legend .lg-trail {
  width: 18px;
  height: 2px;
  background: var(--text-3);
  position: relative;
}
.cmp-legend .lg-trail::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.2px solid var(--text-3);
  background: var(--surface);
}
.cmp-legend .btn {
  margin-left: auto;
}
.cmp-legend .btn svg {
  width: 13px;
  height: 13px;
}
.cmp-mine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px 4px;
}
.cmp-mine .fut-label {
  margin-right: 4px;
}
.cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--z) 45%, transparent);
  background: color-mix(in srgb, var(--z) 10%, var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.cmp-chip i,
.cmp-tabs i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--z);
}
.cmp-zone {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--z) 15%, transparent);
  color: color-mix(in srgb, var(--z) 80%, var(--text));
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}
.cmp-tt-zone {
  margin-top: 6px;
  font-size: 12px;
}

/* One company's reading */
.cmp-side {
  position: sticky;
  top: 70px;
}
@media (max-width: 980px) {
  .cmp-side {
    position: static;
  }
}
.cmp-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--z, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 16px;
}
.cmp-detail.empty {
  border-top-width: 1px;
}
.cmp-d-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.cmp-d-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}
.cmp-d-head .muted {
  font-size: 12px;
}
.cmp-d-gap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
}
.cmp-d-gap b {
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cmp-d-gap .muted {
  font-size: 12.5px;
}
.cmp-meter {
  margin-top: 8px;
}
.cmp-meter-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--z-float), color-mix(in srgb, var(--text-3) 30%, transparent) 50%, var(--z-wake));
  opacity: 0.85;
}
.cmp-meter-bar i {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--text);
  transform: translate(-50%, -50%);
}
.cmp-meter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}
.cmp-d-text {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.cmp-d-chart {
  margin: 12px 0 0;
}
.cmp-d-chart figcaption {
  margin-top: 2px;
}
.gap-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.gap-chart.mini {
  width: 104px;
  height: 34px;
}
.gc-base {
  stroke: var(--border-strong);
  stroke-dasharray: 3 3;
}
.gc-fill.up {
  fill: var(--z-wake);
  opacity: 0.16;
}
.gc-fill.down {
  fill: var(--z-float);
  opacity: 0.2;
}
.gc-price,
.gc-eps {
  fill: none;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gap-chart.mini .gc-price,
.gap-chart.mini .gc-eps {
  stroke-width: 1.4;
}
.gc-price {
  stroke: var(--text-2);
}
.gc-eps {
  stroke: var(--z-wake);
  stroke-width: 2.2;
}
.gc-mark {
  fill: var(--surface);
  stroke: var(--z-wake);
  stroke-width: 1.6;
}
.gc-label {
  font-size: 11.5px;
  font-weight: 750;
}
.gc-label.eps {
  fill: var(--z-wake);
}
.gc-label.price {
  fill: var(--text-2);
}
.gc-axis {
  fill: var(--text-3);
  font-size: 10.5px;
}
.cmp-facts {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  font-size: 13px;
}
.cmp-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.cmp-facts dt {
  color: var(--text-2);
}
.cmp-facts dd {
  margin: 0;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cmp-d-move {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
}
.cmp-d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* The ranked lists */
.cmp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
}
.cmp-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cmp-tabs button[aria-selected='true'] {
  border-color: var(--z);
  background: color-mix(in srgb, var(--z) 12%, var(--surface));
  color: var(--text);
}
.cmp-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11.5px;
  text-align: center;
}
.cmp-rows {
  display: grid;
  gap: 2px;
}
.cmp-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1.4fr) minmax(0, 1fr) 54px;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.cmp-row:hover {
  background: var(--surface-2);
}
.cmp-row.sel {
  background: color-mix(in srgb, var(--z) 9%, var(--surface));
  border-left-color: var(--z);
}
.cmp-row-name {
  display: grid;
  min-width: 0;
}
.cmp-row-name .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-own {
  color: var(--text-2);
  font-size: 10px;
}
.cmp-row-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.cmp-row-gap {
  justify-self: end;
  min-width: 46px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cmp-row-gap.pos {
  background: color-mix(in srgb, var(--z-wake) 14%, transparent);
  color: color-mix(in srgb, var(--z-wake) 85%, var(--text));
}
.cmp-row-gap.neg {
  background: color-mix(in srgb, var(--z-float) 18%, transparent);
  color: color-mix(in srgb, var(--z-float) 70%, var(--text));
}
.cmp-rows .link-btn {
  justify-self: start;
  margin: 6px 10px 0;
}
@media (max-width: 640px) {
  .cmp-row {
    grid-template-columns: 76px minmax(0, 1fr) 46px;
    gap: 8px;
    padding: 7px 4px;
  }
  .cmp-row-chart .gap-chart.mini {
    width: 76px;
  }
  .cmp-row-facts {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
  }
  .cmp-row-gap {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .cmp-row-chart {
    grid-row: 1 / span 2;
  }
  .cmp-search {
    flex: 1 1 140px;
  }
  .cmp-legend .btn {
    margin-left: 0;
  }
}

/* The cycle, explained */
.cmp-explain-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.cmp-explain-grid p {
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .cmp-explain-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cmp-cycle-svg {
    max-width: 260px;
    margin: 0 auto;
  }
}
.cmp-cycle-svg {
  display: block;
  width: 100%;
  height: auto;
}
.cmp-cycle-svg .cmp-q {
  opacity: 0.12;
}
.cmp-cycle-path {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 2;
  stroke-linecap: round;
}
.cmp-arrow-head {
  fill: var(--text-2);
}
.cmp-num {
  fill: var(--z);
}
.cmp-num-t {
  fill: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.cmp-cycle-svg .cmp-zl {
  font-size: 12px;
}
.cmp-steps {
  margin: 12px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  line-height: 1.5;
}
.cmp-steps li::marker {
  color: var(--z);
  font-weight: 800;
}
.cmp-steps b {
  color: color-mix(in srgb, var(--z) 80%, var(--text));
}
.cmp-explain .disclaimer {
  margin-top: 14px;
}

/* ---------- Marknad → Branschtrender ---------- */
.st-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.st-title h2 {
  margin: 0;
}
.st-title .select {
  width: auto;
  min-width: 150px;
}
.st-summary {
  margin: 10px 0 0;
  max-width: 820px;
  font-size: 15px;
  line-height: 1.55;
}
.st-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.st-kpi {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.st-kpi b {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.st-kpi > span {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}
@media (max-width: 760px) {
  .st-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-kpi:last-child {
    grid-column: 1 / -1;
  }
}
.sq {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--text-3);
  opacity: 0.35;
  flex: none;
}
.sq.up {
  background: var(--pos);
  opacity: 1;
}
.sq.down {
  background: var(--neg);
  opacity: 1;
}
.sq.none {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  opacity: 1;
}
.st-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 4px 0 10px;
  font-size: 12.5px;
  color: var(--text-3);
}
.st-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.st-baro {
  display: grid;
  border-top: 1px solid var(--border);
}
.st-baro-head,
.st-row-head {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(0, 1.6fr) 130px 70px 18px;
  align-items: center;
  gap: 12px;
}
.st-baro-head {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.st-baro-head span:nth-child(4) {
  text-align: right;
}
.st-row {
  border-bottom: 1px solid var(--border);
}
.st-row-head {
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.st-row-head:hover,
.st-row.open .st-row-head {
  background: var(--surface-2);
}
.st-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.st-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-mine {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.st-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.st-squares {
  display: inline-flex;
  gap: 3px;
}
.st-counts {
  display: inline-flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.st-trend {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.st-trend.up {
  color: var(--pos);
}
.st-trend.down {
  color: var(--neg);
}
.st-trend.none {
  color: var(--text-3);
  font-weight: 500;
}
.st-up {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.st-chev {
  color: var(--text-3);
  font-size: 18px;
  transition: transform 0.15s;
}
.st-row.open .st-chev {
  transform: rotate(90deg);
}
.st-detail {
  padding: 8px 16px 18px;
  background: var(--surface-2);
}
.st-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.st-fig {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: help;
}
.st-fig span {
  font-size: 11.5px;
  color: var(--text-3);
}
.st-fig b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.st-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 14px;
}
.st-cols h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.st-cos,
.st-sigs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.st-cos button {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 56px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.st-cos button:hover {
  background: var(--surface);
}
.st-co-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-co-trend {
  font-size: 12px;
}
.st-co-up {
  text-align: right;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.st-sigs li {
  display: grid;
  gap: 1px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.st-sigs li span {
  color: var(--text-2);
}
.st-best {
  margin-bottom: 14px;
  font-size: 13px;
}
.st-best .fut-label {
  display: block;
  margin-bottom: 2px;
}
.st-best .link-btn {
  font-weight: 700;
}
.st-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.st-actions .btn svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 760px) {
  .st-baro-head {
    display: none;
  }
  .st-row-head {
    grid-template-columns: minmax(0, 1fr) auto 14px;
    grid-template-areas: 'name up chev' 'bar trend chev';
    row-gap: 6px;
    padding: 10px 6px;
  }
  .st-name {
    grid-area: name;
  }
  .st-bar {
    grid-area: bar;
  }
  .st-trend {
    grid-area: trend;
    text-align: right;
    font-size: 12px;
  }
  .st-up {
    grid-area: up;
  }
  .st-chev {
    grid-area: chev;
  }
  .sq {
    width: 10px;
    height: 10px;
  }
  .st-figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-cos button {
    grid-template-columns: 12px minmax(0, 1fr) 52px;
  }
  .st-co-trend {
    display: none;
  }
}
.st-shifts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 760px) {
  .st-shifts-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.st-shifts h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
}
.st-shifts.neg h3 {
  color: var(--neg);
}
.st-shifts.pos h3 {
  color: var(--pos);
}
.st-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
}
.st-shifts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.st-shifts li button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 10px 14px 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid currentColor;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.st-shifts.neg li button {
  color: var(--neg);
}
.st-shifts.pos li button {
  color: var(--pos);
}
.st-shifts li button:hover {
  background: var(--surface-2);
}
.st-shifts li button.strong {
  background: color-mix(in srgb, currentColor 8%, var(--surface));
}
.st-shifts li button b {
  color: var(--text);
}
.st-shift-mark {
  font-weight: 800;
}
.st-shift-text {
  display: block;
  color: var(--text-2);
  margin-top: 1px;
}
.st-shifts .link-btn {
  margin-top: 6px;
}

/* ---------- Ombalansering: stepper, climate strip, reasons and rules ---------- */
.rb-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 2px;
}
.rb-stepper ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  counter-reset: none;
}
.rb-stepper li {
  position: relative;
}
.rb-stepper li button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rb-stepper li button:hover {
  border-color: var(--border-strong);
}
.rb-stepper li.on button {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.rb-dot {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  font-weight: 800;
  font-size: 13px;
  flex: none;
}
.rb-stepper li.on .rb-dot {
  background: var(--accent);
  color: var(--accent-ink);
}
.rb-stepper li.past .rb-dot {
  background: color-mix(in srgb, var(--accent) 25%, var(--surface-3));
  color: var(--accent);
}
.rb-st-text {
  display: grid;
  min-width: 0;
}
.rb-st-text b {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-st-text small {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .rb-stepper {
    flex-direction: column;
    align-items: stretch;
  }
  .rb-stepper ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-stepper li button {
    padding: 8px 9px;
    gap: 8px;
  }
  
  .rb-st-text b {
    white-space: normal;
    line-height: 1.2;
  }
}
.rb-bottom-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.rb-lead {
  margin: 6px 0 0;
  max-width: 820px;
  color: var(--text-2);
  line-height: 1.55;
}
.rb-step-card h2 {
  margin: 0;
}
.rb-climate-strip {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
}
div.rb-climate-strip {
  padding: 10px 14px;
}
.rb-climate-strip summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.rb-climate-strip summary::-webkit-details-marker {
  display: none;
}
.rb-climate-strip summary b {
  font-size: 14px;
}
.rb-cl-dots {
  display: inline-flex;
  gap: 4px;
}
.rb-cl-dots i,
.rb-cl-list li i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d39b00;
  flex: none;
}
.rb-cl-dots i.good,
.rb-cl-list li.good i {
  background: var(--pos);
}
.rb-cl-dots i.bad,
.rb-cl-list li.bad i {
  background: var(--neg);
}
.rb-cl-more {
  margin-left: auto;
}
.rb-climate-strip[open] .rb-cl-more {
  visibility: hidden;
}
.rb-climate-body {
  padding: 0 14px 12px;
  line-height: 1.5;
}
.rb-climate-body p {
  margin: 0 0 8px;
}
.rb-cl-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.rb-cl-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rb-rules {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
}
.rb-rules summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  font-weight: 650;
  color: var(--accent);
  cursor: pointer;
}
.rb-rules summary svg {
  width: 15px;
  height: 15px;
}
.rb-rules > .hint {
  margin: 0;
  padding: 0 12px 12px;
}
.rb-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 4px 12px 12px;
}
@media (max-width: 760px) {
  .rb-rules-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rb-rules-col h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rb-rules-col.bad h4 {
  color: var(--neg);
}
.rb-rules-col.good h4 {
  color: var(--pos);
}
.rb-rules-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.rb-rules-col li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  line-height: 1.4;
}
.rb-pts {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rb-rules-col.bad .rb-pts {
  color: var(--neg);
}
.rb-rules-col.good .rb-pts {
  color: var(--pos);
}
.rb-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rb-chips li {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 12px;
  line-height: 1.35;
}
.rb-chips li.bad {
  background: color-mix(in srgb, var(--neg) 10%, var(--surface));
}
.rb-chips li.bad .rb-pts {
  color: var(--neg);
}
.rb-chips li.good {
  background: color-mix(in srgb, var(--pos) 10%, var(--surface));
}
.rb-chips li.good .rb-pts {
  color: var(--pos);
}
.rb-chips li.muted {
  color: var(--text-3);
}
.rb-chips li.more {
  cursor: help;
  font-weight: 700;
}

/* What to sell: one card per holding */

.rv-meter {
  position: relative;
  width: 72px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-3) 0 25%, color-mix(in srgb, #d39b00 30%, var(--surface-3)) 25% 50%, color-mix(in srgb, var(--neg) 30%, var(--surface-3)) 50% 100%);
  overflow: hidden;
}
.rv-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--text-3);
}
.lvl-strong .rv-meter i {
  background: var(--neg);
}
.lvl-review .rv-meter i {
  background: #d39b00;
}
.rv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.rv-facts .sep {
  color: var(--text-3);
}

.rv-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

/* What to buy: name, meta and reasons per row */
.rb-co-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 3px;
  font-size: 12px;
}
.rb-table.cand td.c-why {
  min-width: 260px;
}
.rb-table.cand td.c-pick {
  width: 1%;
}

/* The plan: what it builds on */
.rb-recap {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.rb-recap li {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
}
.rb-recap li .link-btn {
  justify-self: start;
  font-size: 12px;
}
@media (max-width: 760px) {
  .rb-recap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Marknad → Bevakning ---------- */
.wl-head h2 {
  margin: 0;
}
.wl-search {
  position: relative;
  max-width: 560px;
  margin-top: 10px;
}
.wl-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.wl-search .input {
  padding-left: 34px;
}
.wl-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.wl-controls .select {
  width: auto;
}
.wl-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 2px 0 12px;
  font-size: 13px;
  color: var(--text-2);
}
.wl-kpis b {
  font-size: 16px;
  color: var(--text);
}
.wl-kpis b.pos {
  color: var(--pos);
}
.wl-kpis b.neg {
  color: var(--neg);
}
.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.wl-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--surface-3);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.wl-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.wl-card.up {
  border-top-color: var(--pos);
}
.wl-card.warn {
  border-top-color: var(--neg);
}
.wl-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.wl-name {
  display: grid;
  min-width: 0;
}
.wl-name b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}
.wl-name .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 13px;
}
.wl-price b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.wl-spark {
  width: 96px;
  height: 30px;
  flex: none;
  color: var(--text-3);
}
.wl-spark.pos {
  color: var(--pos);
}
.wl-spark.neg {
  color: var(--neg);
}
.wl-spark .sparkline {
  width: 100%;
  height: 100%;
}
.wl-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12.5px;
}
.wl-move b {
  font-variant-numeric: tabular-nums;
}
.wl-line {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.wl-signal {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--surface-2);
}
.wl-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.wl-event {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
}

/* ---------- Admin: applications waiting for approval ---------- */
.admin-apps {
  margin-bottom: 16px;
  border-left: 4px solid var(--accent);
}
.admin-apps h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-count {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
}
.admin-app-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.admin-app-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.admin-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.admin-apps .au-actions .btn svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 640px) {
  .admin-app-list li {
    flex-direction: column;
  }
}

/* ---------- Portfölj → Kurvor ---------- */
.ln-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ln-summary {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--text-2);
}
.ln-chart {
  width: 100%;
  min-height: 300px;
}
.ln-svg {
  display: block;
  font-family: inherit;
  user-select: none;
}
.ln-zone.up {
  fill: var(--pos);
  opacity: 0.04;
}
.ln-zone.down {
  fill: var(--neg);
  opacity: 0.05;
}
.ln-grid {
  stroke: var(--border);
}
.ln-grid.v {
  stroke-dasharray: 2 4;
}
.ln-zero {
  stroke: var(--text-3);
  stroke-width: 1.4;
}
.ln-tick {
  fill: var(--text-3);
  font-size: 11px;
}
.ln-g {
  cursor: pointer;
}
.ln {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.75;
  transition: opacity 0.15s, stroke-width 0.15s;
}
.ln.up {
  stroke: var(--pos);
}
.ln.down {
  stroke: var(--neg);
}
.ln-start {
  fill: var(--surface);
  stroke: var(--text-3);
  stroke-width: 1.2;
}
.ln-svg.has-focus .ln {
  opacity: 0.18;
}
.ln-svg.has-focus .ln-start {
  opacity: 0.3;
}
.ln-svg .ln-g.on .ln {
  opacity: 1;
  stroke-width: 3;
}
.ln-svg .ln-g.on .ln-start {
  opacity: 1;
}
.ln-leader {
  stroke: var(--border-strong);
}
.ln-name {
  font-size: 11px;
  font-weight: 700;
}
.ln-name.up {
  fill: var(--pos);
}
.ln-name.down {
  fill: var(--neg);
}
.ln-svg.has-focus .ln-name:not(.on) {
  opacity: 0.35;
}
.ln-name.on {
  font-weight: 800;
}
.ln-cursor {
  stroke: var(--text-2);
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.ln-tt dt.on {
  font-weight: 800;
  color: var(--text);
}
.ln-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 12px;
}
.ln-legend button {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ln-legend button:hover,
.ln-legend button.on {
  background: var(--surface-2);
  border-color: var(--border);
}
.ln-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ln-swatch.up {
  background: var(--pos);
}
.ln-swatch.down {
  background: var(--neg);
}
.ln-l-name {
  display: grid;
  min-width: 0;
}
.ln-l-name .muted {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ln-l-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Översikt → Handelsdagen ---------- */
.td-lead {
  margin: 8px 0 0;
  max-width: 820px;
  color: var(--text-2);
  line-height: 1.5;
}
.td-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.td-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.td-chip b {
  font-weight: 700;
}
.dc-chart {
  width: 100%;
  min-height: 320px;
}
.dc-svg {
  display: block;
  font-family: inherit;
  user-select: none;
}
.dc-zone.better {
  fill: var(--pos);
  opacity: 0.05;
}
.dc-zone.worse {
  fill: var(--neg);
  opacity: 0.05;
}
.dc-grid {
  stroke: var(--border);
  stroke-dasharray: 2 4;
}
.dc-axis {
  stroke: var(--border-strong);
  stroke-width: 1.3;
}
.dc-tick {
  fill: var(--text-3);
  font-size: 10.5px;
}
.dc-diag {
  stroke: var(--text-3);
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
  opacity: 0.7;
}
.dc-diag-label {
  fill: var(--text-3);
  font-size: 11px;
  font-style: italic;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
}
.dc-zl {
  font-size: 12.5px;
  font-weight: 800;
}
.dc-zl.better {
  fill: var(--pos);
}
.dc-zl.worse {
  fill: var(--neg);
}
.dc-ax {
  fill: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}
.dc-when {
  fill: var(--text);
  font-size: 14px;
  font-weight: 800;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
}
.dc-g {
  cursor: pointer;
  transition: opacity 0.15s;
}
.dc-g:focus {
  outline: none;
}
.dc-night {
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}
.dc-trail {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  opacity: 0.6;
}
.dc-night.better,
.dc-trail.better {
  stroke: var(--pos);
}
.dc-night.worse,
.dc-trail.worse {
  stroke: var(--neg);
}
.dc-night.even,
.dc-trail.even {
  stroke: var(--text-3);
}
.dc-dot {
  fill-opacity: 0.85;
  stroke: var(--surface);
  stroke-width: 1.5;
}
.dc-dot.better {
  fill: var(--pos);
}
.dc-dot.worse {
  fill: var(--neg);
}
.dc-dot.even {
  fill: var(--text-3);
}
.dc-dot.followed {
  fill-opacity: 0.25;
  stroke: currentColor;
}
.dc-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
}
.dc-svg.playing .dc-label {
  opacity: 0.4;
}
.dc-svg.hovering .dc-g:not(.on):not(.sel),
.dc-svg.has-sel .dc-g:not(.sel):not(.on) {
  opacity: 0.35;
}
.dc-g.on .dc-trail,
.dc-g.sel .dc-trail {
  stroke-width: 2.6;
  opacity: 1;
}
.dc-g.on .dc-dot,
.dc-g.sel .dc-dot {
  stroke: var(--text);
  stroke-width: 2;
  fill-opacity: 1;
}
.td-detail {
  border-top-color: var(--border);
}
.td-detail.better {
  border-top-color: var(--pos);
}
.td-detail.worse {
  border-top-color: var(--neg);
}
.td-big {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.dc-day {
  display: block;
  width: 100%;
  height: auto;
}
.dd-zero {
  stroke: var(--border-strong);
  stroke-dasharray: 3 3;
}
.dd-market {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.dd-stock {
  fill: none;
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.dd-stock.up {
  stroke: var(--pos);
}
.dd-stock.down {
  stroke: var(--neg);
}
.dd-mark {
  fill: var(--surface);
  stroke: var(--text-2);
  stroke-width: 1.5;
}
.dd-axis {
  fill: var(--text-3);
  font-size: 10.5px;
}
.td-story {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.td-story p {
  margin: 0 0 6px;
}
.tf-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.tf-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.45;
}
.tf-ic {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
}
.tone-up .tf-ic {
  background: var(--pos);
}
.tone-down .tf-ic {
  background: var(--neg);
}
.tone-caution .tf-ic {
  background: #d39b00;
}
.dr-grid,
.tf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.dr-card,
.tf-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dr-head,
.tf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.dr-name {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dr-name b {
  font-size: 15px;
}
.dr-name:hover b {
  color: var(--accent);
}
.dr-name .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-when {
  font-size: 12px;
  text-align: right;
}
.dr-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dr-v {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 750;
}
.dr-v.n-beat,
.dr-v.m-liked {
  background: color-mix(in srgb, var(--pos) 15%, transparent);
  color: color-mix(in srgb, var(--pos) 85%, var(--text));
}
.dr-v.n-miss,
.dr-v.m-disliked {
  background: color-mix(in srgb, var(--neg) 14%, transparent);
  color: color-mix(in srgb, var(--neg) 85%, var(--text));
}
.dr-facts {
  margin: 0;
  display: grid;
  font-size: 13px;
}
.dr-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.dr-facts dt {
  color: var(--text-2);
}
.dr-facts dd {
  margin: 0;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dr-words {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.dr-words a {
  color: var(--accent);
  font-weight: 600;
}
.tf-chg {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tf-card .tf-list {
  margin: 0;
}
.tf-foot {
  margin: 0;
  font-size: 12.5px;
}
.tf-quiet {
  margin-top: 12px;
}
.dc-label.minor {
  display: none;
}
.dc-g.on .dc-label.minor,
.dc-g.sel .dc-label.minor {
  display: inline;
}

/* ---------- Översikt: "right now" cards ---------- */
.now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.now-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: start;
  padding: 12px 10px 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.now-item:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.now-item.tone-up {
  border-left-color: var(--pos);
}
.now-item.tone-down {
  border-left-color: var(--neg);
}
.now-item.tone-caution {
  border-left-color: #d39b00;
}
.now-item .tf-ic {
  width: 22px;
  height: 22px;
}
.now-item b {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
}
.now-item p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.now-x {
  margin: -4px -2px 0 0;
}
textarea.input {
  height: auto;
  min-height: 78px;
  padding: 9px 11px;
  line-height: 1.45;
  resize: vertical;
  font: inherit;
}
.ln-ref {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.8;
}
.ln-name.ref {
  fill: var(--text-3);
  font-weight: 600;
  font-style: italic;
}
.td-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.td-main {
  grid-template-areas: 'chart side' 'time side' 'list side';
}
.td-time-card {
  grid-area: time;
  min-width: 0;
}
@media (max-width: 980px) {
  .td-main {
    grid-template-areas: 'chart' 'side' 'time' 'list';
  }
}

/* ---------- The line charts' filter: a group, then single stocks ---------- */
.lf {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.td-filter .lf {
  margin: 0;
}
.lf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.lf-row .select {
  width: auto;
  min-width: 190px;
  max-width: 100%;
}
.lf-count {
  font-size: 12.5px;
}
.lf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.lf-chip {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lf-chip.on {
  color: var(--text);
  background: var(--surface-2);
}
.lf-chip.picked {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.lf-chip:hover {
  border-color: var(--border-strong);
}
.lf-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
}
.td-filter {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---------- Portfölj → Horisont: plans, the timeline, entry and exit ---------- */
:root {
  --hz-act: #d4570b;
  --hz-watch: #b48600;
  --hz-analysts: #8a5cd6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --hz-act: #ff8f4a;
    --hz-watch: #e8bb4a;
    --hz-analysts: #b596f2;
  }
}
:root[data-theme='dark'] {
  --hz-act: #ff8f4a;
  --hz-watch: #e8bb4a;
  --hz-analysts: #b596f2;
}
.s-act {
  --st: var(--hz-act);
}
.s-watch,
.s-near {
  --st: var(--hz-watch);
}
.s-ok,
.s-ready {
  --st: var(--pos);
}
.s-none,
.s-wait {
  --st: var(--text-3);
}

.hz-status {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  color: var(--st);
  background: color-mix(in srgb, var(--st) 13%, transparent);
}
.hz-status.s-none,
.hz-status.s-wait {
  color: var(--text-2);
  background: var(--surface-2);
}

/* The page head */
.hz-lead {
  margin: 10px 0 0;
  max-width: 860px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}
.hz-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: color-mix(in srgb, var(--hz-act) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hz-act) 35%, var(--border));
}
.hz-alert svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--hz-act);
}
.hz-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.hz-tile {
  display: grid;
  gap: 2px;
  padding: 10px 14px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--st);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.hz-tile:hover {
  border-color: color-mix(in srgb, var(--st) 45%, var(--border));
  border-top-color: var(--st);
}
.hz-tile.on {
  background: color-mix(in srgb, var(--st) 9%, var(--surface));
  border-color: var(--st);
}
.hz-tile b {
  font-size: 24px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hz-tile span {
  font-size: 12.5px;
  color: var(--text-2);
}
@media (max-width: 640px) {
  .hz-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The timeline: one lane per holding */
.hz-lanes-card {
  padding: 18px 20px 20px;
}
.hz-timeline {
  display: grid;
  gap: 2px;
}
.hz-axis,
.hz-lane {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 168px;
  gap: 14px;
  align-items: center;
}
.hz-axis {
  padding: 0 10px 4px 13px;
}
.hz-axis-track {
  position: relative;
  height: 30px;
}
.hz-axis-mark,
.hz-axis-now {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--text-3);
}
.hz-axis-mark {
  top: 0;
}
.hz-axis-now {
  bottom: 0;
  font-weight: 650;
  color: var(--text-2);
}
.hz-axis-end {
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
}
.hz-lane {
  width: 100%;
  padding: 9px 10px 9px 10px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--st);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: background 0.12s;
}
.hz-lane:hover {
  background: var(--surface-2);
}
.hz-lane.sel {
  background: var(--accent-soft);
}
.hz-lane:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.hz-lane-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.hz-lane-name > span {
  display: grid;
  min-width: 0;
}
.hz-lane-name b {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hz-lane-name small {
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hz-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--st);
}
.hz-track {
  position: relative;
  height: 24px;
}
.hz-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--border);
}
.hz-span,
.hz-elapsed,
.hz-over {
  position: absolute;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 4px;
}
.hz-span {
  background: var(--surface-3);
}
.hz-elapsed {
  background: color-mix(in srgb, var(--st) 75%, transparent);
}
.hz-elapsed.open {
  background: linear-gradient(90deg, color-mix(in srgb, var(--st) 60%, transparent), color-mix(in srgb, var(--st) 15%, transparent));
}
.hz-over {
  background: repeating-linear-gradient(135deg, var(--hz-act) 0 4px, color-mix(in srgb, var(--hz-act) 30%, transparent) 4px 8px);
  border-radius: 0 4px 4px 0;
}
.hz-now-line {
  position: absolute;
  top: -6px;
  bottom: -6px;
  border-left: 1.5px dashed var(--text-3);
}
.hz-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-style: normal;
}
.hz-mark.buy {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--text-2);
}
.hz-mark.review {
  width: 9px;
  height: 9px;
  background: var(--surface);
  border: 2px solid var(--hz-watch);
  transform: translate(-50%, -50%) rotate(45deg);
}
.hz-mark.end {
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--text);
}
.hz-mark.end::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  border-left: 8px solid var(--text);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.hz-mark.report {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.hz-beyond {
  position: absolute;
  right: 0;
  top: -9px;
  font-size: 10.5px;
  color: var(--text-3);
}
.hz-lane-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.hz-lane-end .hz-gauge {
  width: 100px;
}
.hz-gain {
  min-width: 46px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hz-gain.pos {
  color: var(--pos);
}
.hz-gain.neg {
  color: var(--neg);
}
.hz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
}
.hz-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hz-legend .lg {
  position: relative;
  display: inline-grid;
  place-items: center;
  font-style: normal;
}
.hz-legend .lg.buy {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--text-2);
}
.hz-legend .lg.span {
  width: 22px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pos) 75%, transparent) 55%, var(--surface-3) 55%);
}
.hz-legend .lg.review {
  width: 8px;
  height: 8px;
  border: 2px solid var(--hz-watch);
  transform: rotate(45deg);
}
.hz-legend .lg.end {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--text);
}
.hz-legend .lg.end::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  border-left: 7px solid var(--text);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}
.hz-legend .lg.report {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid var(--border-strong);
}
.hz-legend .lg.gauge {
  width: 34px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--neg) 40%, transparent) 25%, var(--surface-3) 25% 75%, color-mix(in srgb, var(--pos) 40%, transparent) 75%);
}
@media (max-width: 700px) {
  .hz-lanes-card {
    padding: 14px 10px 16px;
  }
  .hz-axis,
  .hz-lane {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name end' 'track track';
    gap: 6px 10px;
  }
  .hz-lane-name {
    grid-area: name;
  }
  .hz-track,
  .hz-axis-track {
    grid-area: track;
  }
  .hz-lane-end {
    grid-area: end;
  }
  .hz-axis-name,
  .hz-axis-end {
    display: none;
  }
  .hz-lane-end .hz-gauge {
    width: 76px;
  }
}

/* Review level → target, with today's price */
.hz-gauge {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--surface-3);
}
.hz-gauge.empty {
  height: auto;
  background: none;
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-3);
  text-align: right;
}
.hz-zone {
  position: absolute;
  top: 0;
  bottom: 0;
}
.hz-zone.stop {
  border-radius: 5px 0 0 5px;
  background: color-mix(in srgb, var(--neg) 42%, transparent);
}
.hz-zone.target {
  border-radius: 0 5px 5px 0;
  background: color-mix(in srgb, var(--pos) 42%, transparent);
}
.hz-tick.entry {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--text-2);
}
.hz-now {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--text);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.hz-now.act {
  background: var(--hz-act);
}
.hz-now.watch {
  background: var(--hz-watch);
}
.hz-now.ok {
  background: var(--pos);
}

/* Where in the horizon (the stock card) */
.hz-bar {
  position: relative;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
}
.hz-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.hz-bar.over i {
  background: color-mix(in srgb, var(--hz-act) 40%, transparent);
}
.hz-bar-text {
  position: relative;
  padding: 0 10px;
  font-size: 11.5px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.hz-bar.empty {
  background: none;
  height: auto;
  font-size: 11.5px;
  color: var(--text-3);
}

/* One holding: entry and exit */
.hz-detail {
  --z: var(--st);
}
.hz-facts {
  margin: 10px 0 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.hz-facts .sep {
  margin: 0 6px;
  color: var(--text-3);
}
.hz-chart-host {
  width: 100%;
  min-height: 230px;
  margin: 8px 0 2px;
}
.hz-chart {
  display: block;
  overflow: visible;
}
.hz-zone-target {
  fill: var(--pos);
  opacity: 0.08;
}
.hz-zone-stop {
  fill: var(--neg);
  opacity: 0.08;
}
.hz-level {
  stroke-width: 1.3;
}
.hz-level.entry {
  stroke: var(--text-2);
  stroke-dasharray: 4 3;
}
.hz-level.target {
  stroke: var(--pos);
}
.hz-level.stop {
  stroke: var(--neg);
}
.hz-level.analysts {
  stroke: var(--hz-analysts);
  stroke-dasharray: 2 3;
}
.hz-level-label {
  font-size: 11px;
  font-weight: 650;
  fill: var(--text-2);
}
.hz-level-label.target {
  fill: var(--pos);
}
.hz-level-label.stop {
  fill: var(--neg);
}
.hz-level-label.analysts {
  fill: var(--hz-analysts);
}
.hz-chart-now {
  stroke: var(--text-3);
  stroke-dasharray: 2 3;
}
.hz-chart-end {
  stroke: var(--text);
  stroke-width: 1.5;
}
.hz-chart-axis {
  font-size: 10.5px;
  fill: var(--text-3);
}
.hz-chart-axis.end {
  font-weight: 650;
  fill: var(--text);
}
.hz-chart-review {
  fill: var(--hz-watch);
}
.hz-chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}
.hz-chart-line.up {
  stroke: var(--pos);
}
.hz-chart-line.down {
  stroke: var(--neg);
}
.hz-chart-dot {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 2;
}
.hz-detail .hint {
  margin: 4px 0 12px;
}
.hz-noplan p {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--surface-2);
}
.hz-next {
  margin: 12px 0 0;
  font-size: 12.5px;
}

/* Waiting to buy */
.hz-enter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.hz-enter {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--st);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.hz-enter:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  border-left-color: var(--st);
}
.hz-enter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.hz-enter-head > div {
  display: grid;
  min-width: 0;
}
.hz-enter-head b {
  font-size: 14px;
}
.hz-enter-head .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hz-enter-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
}
.hz-enter-price b {
  margin-left: auto;
  color: var(--hz-watch);
}
.hz-enter-price b.pos {
  color: var(--pos);
}
.hz-how li {
  line-height: 1.5;
}

/* The plan editor */
dialog.modal.plan-modal {
  width: min(740px, calc(100vw - 32px));
}
.plan-modal .modal-foot {
  justify-content: space-between;
}
.pl-foot-right {
  display: flex;
  gap: 8px;
}
.pl-form {
  display: grid;
  gap: 20px;
}
.pl-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.pl-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.pl-label {
  font-size: 13.5px;
  font-weight: 650;
}
.pl-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.pl-style {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 11px 13px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.pl-style:hover {
  border-color: var(--border-strong);
}
.pl-style.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.pl-style b {
  font-size: 13.5px;
}
.pl-style span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}
.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pl-chip {
  height: 30px;
  padding: 0 13px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.pl-chip:hover {
  border-color: var(--border-strong);
}
.pl-chip[aria-pressed='true'] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.pl-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-3);
}
.pl-note.warn {
  color: var(--neg);
}
.pl-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.pl-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.pl-num-wrap {
  width: 124px;
}
.pl-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 16px;
}
.pl-rule {
  font-size: 13px;
}
.pl-quick {
  display: grid;
  margin-top: 14px;
}
.pl-quick-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pl-quick-row:last-child {
  border-bottom: 0;
}
.pl-quick-name {
  display: grid;
  min-width: 0;
}
.pl-quick-name b {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-quick-name .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.danger-text {
  color: var(--neg);
}
@media (max-width: 640px) {
  .pl-two,
  .pl-quick-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-quick-row {
    gap: 8px;
  }
}

/* The plan on the stock card */
.pl-summary {
  gap: 10px;
  margin: 2px 0 14px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.pl-summary:empty {
  display: none;
}
.pl-summary > .muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.pl-summary > .btn {
  justify-self: start;
}
.pl-sum-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.pl-thesis {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 9px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--surface);
}
.pl-sum-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}
.pl-checks {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-checks li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
}
.pl-checks li i {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-3);
}
.pl-checks li.c-hit {
  font-weight: 600;
}
.pl-checks li.c-hit i {
  background: var(--hz-act);
}
.pl-checks li.c-near i {
  background: var(--hz-watch);
}
.pl-checks li.c-ok i {
  background: var(--pos);
}
.pl-checks li.c-na {
  color: var(--text-3);
}
.pl-checks li.c-na i {
  opacity: 0.5;
}
.pl-sum-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.hz-detail .pl-checks,
.hz-detail .pl-thesis {
  margin-top: 12px;
}
/* A buy plan: a signal that has happened is good news */
.pl-checks.enter li.c-hit i {
  background: var(--pos);
}
.pl-checks.enter li.c-ok i {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1.5px var(--text-3);
}
/* The timeline needs the width: below wide screens, the plan and the purchases go side by side under it. */
@media (max-width: 1320px) {
  .hz-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'chart chart' 'side list';
  }
  .hz-main .cmp-side {
    position: static;
  }
  .hz-main .cmp-list-card .hz-enter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .hz-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'chart' 'side' 'list';
  }
}
.hz-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px 0 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.12s, background 0.12s;
}
.hz-plan-pill svg {
  width: 13px;
  height: 13px;
}
.hz-lane:hover .hz-plan-pill,
.hz-lane.sel .hz-plan-pill {
  opacity: 1;
}
.hz-plan-pill:hover {
  background: var(--accent-soft);
}
.pl-other {
  justify-self: start;
  padding: 4px 2px;
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px dashed transparent;
  cursor: pointer;
}
.pl-other:hover {
  border-bottom-color: var(--accent);
}
.pl-other[aria-pressed='true'] {
  font-weight: 650;
  border-bottom: 2px solid var(--accent);
}
.pl-base {
  justify-self: start;
}
.pl-pick-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  max-height: 50vh;
  overflow: auto;
}
.pl-pick {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 9px 12px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pl-pick:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pl-pick b {
  font-size: 13.5px;
}
.pl-pick span {
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-item.tone-plan {
  border-left-color: var(--hz-act);
}
.now-item.tone-plan .tf-ic {
  color: #fff;
  background: var(--hz-act);
}
.t-badge.plan {
  background: var(--hz-act);
  color: #fff;
  font-size: 10px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

/* ---------- ⌘K: search anything ---------- */
.pal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 190px;
  padding: 0 8px 0 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.pal-btn:hover {
  color: var(--text-2);
  border-color: var(--border-strong);
}
.pal-btn svg {
  width: 15px;
  height: 15px;
}
.pal-btn span {
  flex: 1;
  text-align: left;
}
.pal-btn kbd,
.palette kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
}
@media (max-width: 1200px) {
  .pal-btn {
    min-width: 0;
  }
  .pal-btn span,
  .pal-btn kbd {
    display: none;
  }
  .pal-btn {
    width: 34px;
    padding: 0;
    justify-content: center;
    background: none;
    border-color: transparent;
  }
}

dialog.palette {
  width: min(640px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 80px));
  margin: 10vh auto auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
dialog.palette:not([open]) {
  display: none;
}
dialog.palette::backdrop {
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(2px);
}
.pal-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.pal-search > svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--text-3);
}
.pal-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
}
.pal-input::placeholder {
  color: var(--text-3);
}
.pal-list {
  flex: 1;
  overflow: auto;
  padding: 6px 8px 10px;
  overscroll-behavior: contain;
}
.pal-group + .pal-group {
  margin-top: 4px;
}
.pal-group-label {
  padding: 10px 10px 5px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pal-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.pal-row.on {
  background: var(--accent-soft);
}
.pal-tick,
.pal-ic {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 750;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.pal-ic svg {
  width: 16px;
  height: 16px;
}
.pal-row.on .pal-tick,
.pal-row.on .pal-ic {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface);
}
.pal-text {
  display: grid;
  min-width: 0;
}
.pal-text b {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pal-text small {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pal-go {
  font-size: 13px;
  color: var(--text-3);
  opacity: 0;
}
.pal-row.on .pal-go {
  opacity: 1;
}
.pal-empty {
  padding: 6px 10px 10px;
  font-size: 13px;
  color: var(--text-3);
}
.pal-empty.big {
  padding: 28px 16px;
  text-align: center;
  font-size: 14px;
}
.pal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.pal-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 760px) {
  dialog.palette {
    margin-top: 12px;
    max-height: calc(100vh - 24px);
  }
  .pal-foot {
    display: none;
  }
}

/* ---------- Horisont: the data's readings ---------- */
.v-exit {
  --st: var(--hz-act);
}
.v-trim {
  --st: var(--hz-watch);
}
.v-hold {
  --st: color-mix(in srgb, var(--accent) 50%, var(--text-3));
}
.v-add {
  --st: var(--pos);
}
.hz-verdict {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--st);
  background: color-mix(in srgb, var(--st) 14%, transparent);
}
.hz-verdict.v-hold {
  color: var(--text-2);
  background: var(--surface-2);
}
.hz-alert.plan {
  background: var(--surface-2);
  border-color: var(--border);
}
.hz-alert.plan > span:first-child {
  color: var(--hz-act);
  font-weight: 700;
}
.hz-flag {
  color: var(--hz-act);
  font-size: 12px;
}

/* Stay ← → leave */
.hz-meter {
  position: relative;
  display: inline-block;
  width: 92px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pos) 55%, transparent), var(--surface-3) 42% 58%, color-mix(in srgb, var(--hz-act) 60%, transparent));
}
.hz-meter.big {
  width: 100%;
  height: 10px;
  border-radius: 5px;
}
.hz-meter-mid {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--border-strong);
}
.hz-meter-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--st);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.hz-meter.big .hz-meter-dot {
  width: 16px;
  height: 16px;
}
.hz-meter-dot.v-hold {
  background: var(--text-2);
}
.hz-lane-end .hz-meter {
  width: 96px;
}

/* The market now */
.hz-region {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.hz-region .select {
  width: auto;
}
.hz-mk-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) minmax(280px, 1.25fr);
  align-items: start;
  gap: 22px;
  margin-top: 4px;
}
.hz-mk-grid > div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.hz-phase {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 4px solid var(--ph, var(--accent));
}
.hz-phase.p-expansion {
  --ph: var(--pos);
}
.hz-phase.p-recovery {
  --ph: #2f9e8f;
}
.hz-phase.p-late {
  --ph: var(--hz-watch);
}
.hz-phase.p-downturn {
  --ph: var(--neg);
}
.hz-phase-name {
  font-size: 24px;
  line-height: 1.15;
}
.hz-phase p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.hz-risk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.hz-risk .fut-label {
  margin: 0;
}
.hz-risk-bar {
  display: inline-flex;
  gap: 3px;
}
.hz-risk-bar i {
  width: 16px;
  height: 8px;
  border-radius: 2px;
  background: var(--surface-3);
}
.hz-risk-bar i.on.l0,
.hz-risk-bar i.on.l1 {
  background: var(--neg);
}
.hz-risk-bar i.on.l2 {
  background: var(--hz-watch);
}
.hz-risk-bar i.on.l3,
.hz-risk-bar i.on.l4 {
  background: var(--pos);
}
.hz-world ul,
.hz-sectors ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hz-world li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto 44px;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.hz-world li:last-child {
  border-bottom: 0;
}
.hz-world li i {
  font-style: normal;
  font-size: 10px;
}
.hz-world li.w-up i {
  color: var(--pos);
}
.hz-world li.w-down i {
  color: var(--neg);
}
.hz-world li.w-mixed i {
  color: var(--hz-watch);
}
.hz-world li b {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hz-world li small {
  font-size: 11.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hz-world .pos,
.hz-world small.pos {
  color: var(--pos);
}
.hz-world .neg,
.hz-world small.neg {
  color: var(--neg);
}
.hz-sectors li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(70px, 1fr) 104px;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
  font-size: 13px;
}
.hz-sec-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hz-fav {
  margin-left: 5px;
  font-style: normal;
  color: var(--hz-watch);
}
.hz-sec-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
}
.hz-sec-bar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--border-strong);
}
.hz-sec-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
}
.hz-sec-bar i.pos {
  background: color-mix(in srgb, var(--pos) 75%, transparent);
}
.hz-sec-bar i.neg {
  background: color-mix(in srgb, var(--neg) 70%, transparent);
}
.hz-sectors li small {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.hz-sectors li.o-positive small {
  color: var(--pos);
}
.hz-sectors li.o-negative small {
  color: var(--neg);
}
.hz-small {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
}
.hz-means {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hz-means p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.hz-why {
  margin-top: 14px;
}
.hz-why summary,
.hz-rules summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.hz-climate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px 22px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.hz-climate li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
}
.hz-climate li i {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-3);
}
.hz-climate li.c-good i {
  background: var(--pos);
}
.hz-climate li.c-bad i {
  background: var(--neg);
}
.hz-climate li.c-neutral i {
  background: var(--hz-watch);
}
.hz-climate li div {
  display: grid;
  gap: 2px;
}
.hz-climate li span:last-child {
  color: var(--text-2);
}
@media (max-width: 1100px) {
  .hz-mk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .hz-sectors {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .hz-mk-grid,
  .hz-means {
    grid-template-columns: minmax(0, 1fr);
  }
  .hz-sectors li {
    grid-template-columns: minmax(0, 1fr) 56px 76px;
  }
  .hz-sectors li small {
    white-space: normal;
    line-height: 1.2;
    text-align: right;
  }
}

/* The timeline: what the data suggests */
.hz-sugg {
  position: absolute;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 0 5px 5px 0;
  border: 1.5px dashed var(--st);
  border-left: 0;
  background: color-mix(in srgb, var(--st) 10%, transparent);
}
.hz-sugg-now {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 3px;
  background: var(--hz-act);
  box-shadow: 0 0 0 2px var(--surface);
}
.hz-legend .lg.sugg {
  width: 22px;
  height: 8px;
  border: 1.5px dashed var(--text-2);
  border-radius: 0 4px 4px 0;
}
.hz-legend .lg.meter {
  width: 34px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pos) 55%, transparent), var(--surface-3) 42% 58%, color-mix(in srgb, var(--hz-act) 60%, transparent));
}
.hz-legend .lg.span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-3) 75%, transparent) 55%, var(--surface-3) 55%);
}

/* One holding */
.hz-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 14px 0 6px;
  font-size: 12px;
}
.hz-score b {
  min-width: 34px;
  font-size: 15px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--st);
}
.hz-detail.v-hold .hz-score b {
  color: var(--text-2);
}
.hz-reason {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.hz-cycle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 12px 0 0;
}
.hz-cycle span {
  display: grid;
  gap: 1px;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border-top: 3px solid var(--surface-3);
  opacity: 0.6;
  min-width: 0;
}
.hz-cycle span b {
  font-size: 11.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hz-cycle span small {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-3);
}
.hz-cycle span.on {
  opacity: 1;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.hz-cycle .z-wake.on {
  border-top-color: #2f9e8f;
}
.hz-cycle .z-lead.on {
  border-top-color: var(--pos);
}
.hz-cycle .z-float.on {
  border-top-color: var(--hz-watch);
}
.hz-cycle .z-fade.on {
  border-top-color: var(--neg);
}
.hz-level.sugg {
  stroke-dasharray: 6 4;
}
.hz-level.ma {
  stroke: var(--text-3);
  stroke-dasharray: 1 3;
  stroke-width: 1.5;
}
.hz-level-label.ma {
  fill: var(--text-3);
  font-weight: 500;
}
.hz-chart-end.sugg {
  stroke-dasharray: 5 4;
}
.hz-reasons-grid {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}
.hz-reasons ul,
.hz-idea-why,
.hz-rule-group ul {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.hz-reasons li,
.hz-idea-why li,
.hz-rule-group li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.45;
}
.hz-pts {
  display: inline-grid;
  place-items: center;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hz-reasons.leave .hz-pts,
.hz-idea-why li.neg .hz-pts,
.hz-rule-group li.neg .hz-pts {
  color: var(--hz-act);
  background: color-mix(in srgb, var(--hz-act) 14%, transparent);
}
.hz-reasons.stay .hz-pts,
.hz-idea-why li.pos .hz-pts,
.hz-rule-group li.pos .hz-pts {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 14%, transparent);
}
.hz-suggest {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
}
.hz-suggest dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  margin: 0;
  font-size: 13px;
}
.hz-suggest dt {
  color: var(--text-3);
}
.hz-suggest dd {
  margin: 0;
}
.hz-suggest .btn {
  justify-self: start;
}
.hz-own {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* What to enter now */
.hz-loading {
  padding: 18px 0;
}
.hz-idea-filter {
  margin: 4px 0 14px;
}
.hz-idea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
.hz-idea {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 16px 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--tc, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.t-now {
  --tc: var(--pos);
}
.t-now.stages {
  --tc: #2f9e8f;
}
.t-pullback {
  --tc: var(--hz-watch);
}
.t-confirm {
  --tc: var(--text-3);
}
.hz-idea-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.hz-idea-head > div {
  display: grid;
  min-width: 0;
}
.hz-idea-head b {
  font-size: 15px;
}
.hz-idea-head .muted {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hz-strength {
  display: inline-flex;
  gap: 3px;
  margin-top: 4px;
}
.hz-strength i {
  width: 7px;
  height: 14px;
  border-radius: 2px;
  background: var(--surface-3);
}
.hz-strength i.on {
  background: var(--pos);
}
.hz-idea-sub {
  margin: -4px 0 0;
  font-size: 12px;
}
.hz-timing {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: color-mix(in srgb, var(--tc) 12%, transparent);
}
.hz-timing b {
  color: var(--tc);
}
.t-confirm .hz-timing b {
  color: var(--text-2);
}
.hz-timing span {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hz-idea-spark {
  width: 100%;
  height: 48px;
}
.hz-spark-line {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.hz-watch {
  stroke: var(--tc);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}
.hz-timing-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.hz-idea-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-3);
}
.hz-idea-facts b {
  color: var(--text);
}
.hz-idea-facts b.pos {
  color: var(--pos);
}
.hz-idea-facts b.neg {
  color: var(--neg);
}
.hz-idea-why li {
  font-size: 12.5px;
}
.hz-idea-plan {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
}
.hz-idea-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.hz-tchip {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  color: var(--tc);
  background: color-mix(in srgb, var(--tc) 14%, transparent);
}
.hz-tchip.t-confirm {
  color: var(--text-2);
  background: var(--surface-2);
}
.hz-followed {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.hz-followed ul {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.hz-followed li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto 40px auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.hz-followed li .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hz-fscore {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hz-fscore.pos {
  color: var(--pos);
}
.hz-fscore.neg {
  color: var(--neg);
}
.hz-enter-sig {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.hz-rules {
  margin-top: 12px;
}
.hz-rule-group {
  margin-top: 12px;
}
.hz-rule-group > b {
  font-size: 13px;
}
.pl-fromdata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.pl-fromdata > div {
  display: grid;
  gap: 2px;
  font-size: 13px;
}
.pl-fromdata span {
  color: var(--text-2);
  line-height: 1.45;
}
.pl-fromdata .btn {
  flex: none;
}
@media (max-width: 640px) {
  .pl-fromdata {
    flex-direction: column;
    align-items: flex-start;
  }
  .hz-followed li {
    grid-template-columns: 64px minmax(0, 1fr) auto 36px;
  }
  .hz-followed li .link-btn {
    display: none;
  }
}

/* ---------- Admin → holdings statistics and backup ---------- */
.cr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) {
  .cr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cr-bars {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cr-bars li {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.2fr) 48px;
  gap: 4px 10px;
  align-items: center;
  font-size: 13px;
}
.cr-bars li small {
  grid-column: 1 / -1;
  margin-top: -3px;
  font-size: 11.5px;
}
.cr-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.cr-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.cr-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: var(--accent);
}
.cr-bar-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cr-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cr-tools .input {
  width: 200px;
  height: 32px;
}
.cr-table-wrap {
  max-height: 560px;
  overflow: auto;
  margin: 0 -18px;
  padding: 0 18px;
}
.cr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cr-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.cr-table th.sorted {
  color: var(--text);
}
.cr-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cr-table td b {
  display: block;
  font-weight: 600;
}
.cr-table td small {
  font-size: 11.5px;
}
.cr-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cr-table td.num.pos {
  color: var(--pos);
}
.cr-table td.num.neg {
  color: var(--neg);
}
.cr-table tbody tr {
  cursor: pointer;
}
.cr-table tbody tr:hover {
  background: var(--surface-2);
}
.cr-table tbody tr.sel {
  background: var(--accent-soft);
}
.cr-table tbody tr.cash {
  cursor: default;
  color: var(--text-2);
}
.cr-also-card {
  margin: 16px 0;
}
.cr-also-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-also-head h3 {
  margin: 0;
  font-size: 15px;
}
.cr-also-head .hint {
  margin: 2px 0 0;
}
.cr-also {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 22px;
}
.cr-also li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 64px 110px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.cr-also-name {
  display: grid;
  min-width: 0;
}
.cr-also-name b,
.cr-also-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-also li > small {
  text-align: right;
  font-size: 11.5px;
}
.cr-investors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.cr-investor {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cr-investor:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cr-investor b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}
.cr-investor small {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-list {
  display: grid;
  gap: 6px;
  margin: -6px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
}
.cr-file {
  font: inherit;
  font-size: 13px;
}
.cr-restore-list {
  display: grid;
}
@media (max-width: 700px) {
  .cr-also li {
    grid-template-columns: minmax(0, 1fr) 60px;
  }
  .cr-also li .cr-bar,
  .cr-also li > small {
    display: none;
  }
  .cr-tools .input {
    width: 100%;
  }
}

/* The stock card: others who own this also own… */
.crowd-also-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crowd-also-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.crowd-also-list li:hover {
  background: var(--surface-2);
}
.crowd-also-list li .muted {
  grid-column: 1;
  font-size: 12px;
}
.crowd-share {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 600;
  color: var(--accent);
}
.admin-card > .btn,
.admin-card > .cr-file {
  align-self: flex-start;
}

/* ---------- Ombalansering: today, after the plan, the target as stacked bars ---------- */
.ov-stacks {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.ov-stack-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 140px;
  gap: 12px;
  align-items: center;
}
.ov-stack-label {
  font-size: 13px;
  font-weight: 650;
}
.ov-stack-row small {
  font-size: 12px;
  text-align: right;
}
.ov-stack {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}
.ov-stack i {
  display: grid;
  place-items: center;
  min-width: 0;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  border-right: 1px solid var(--surface);
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.4s ease;
}

@media (max-width: 760px) {
  .ov-stack-row {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .ov-stack-row small {
    display: none;
  }
}

/* ---------- Ombalansering: the steps, the plan bar, balance, groups ---------- */
.banner.info {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--accent-soft);
}
.rb-stepper li.done:not(.on) .rb-dot {
  background: color-mix(in srgb, var(--pos) 18%, var(--surface-3));
  color: var(--pos);
}
@media (max-width: 760px) {
  .rb-stepper ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .rb-stepper li button {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 7px 2px;
    text-align: center;
  }
  .rb-st-text b {
    font-size: 11.5px;
  }
  .rb-st-text small {
    display: none;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .rb-stepper .rb-st-text small {
    display: none;
  }
}

/* The balance score: a number with a short bar under it. */
.rb-dial {
  display: inline-grid;
  gap: 3px;
  min-width: 74px;
  --tone: var(--text-3);
}
.rb-dial.t-good {
  --tone: var(--pos);
}
.rb-dial.t-ok {
  --tone: #c98a0b;
}
.rb-dial.t-low {
  --tone: var(--neg);
}
.rb-dial small {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.rb-dial b {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--tone);
  font-variant-numeric: tabular-nums;
}
.rb-dial-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
.rb-dial-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--tone);
}
.rb-dial.big {
  min-width: 140px;
  justify-items: center;
}
.rb-dial.big b {
  font-size: 44px;
  letter-spacing: -0.02em;
}
.rb-dial.big .rb-dial-bar {
  width: 100%;
  height: 8px;
}

/* Always in view: the plan so far, stuck to the bottom of the window. */
.rb-planbar {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: var(--shadow-lg);
}
.pb-balance {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pb-arrow {
  color: var(--text-3);
  font-weight: 700;
}
.pb-facts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.pb-fact {
  display: grid;
  gap: 1px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
}
button.pb-fact {
  cursor: pointer;
}
button.pb-fact:hover {
  border-color: var(--border);
  background: var(--surface-2);
}
.pb-fact small {
  font-size: 11px;
  color: var(--text-3);
}
.pb-fact b {
  font-size: 14px;
  white-space: nowrap;
}
.pb-fact.sell b {
  color: var(--neg);
}
.pb-fact.buy b {
  color: var(--pos);
}
.pb-empty {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.pb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
@media (max-width: 760px) {
  .rb-planbar {
    bottom: calc(72px + env(safe-area-inset-bottom));
    gap: 4px 10px;
    padding: 8px 12px;
  }
  .rb-planbar .rb-dial {
    min-width: 0;
  }
  .rb-planbar .rb-dial small,
  .rb-planbar .rb-dial-bar {
    display: none;
  }
  .rb-planbar .rb-dial b {
    font-size: 17px;
  }
  .pb-balance {
    gap: 6px;
  }
  .pb-empty,
  .pb-actions .link-btn {
    display: none;
  }
  .pb-actions .btn {
    padding: 6px 12px;
  }
  .pb-facts {
    order: 3;
    flex: 1 1 100%;
    gap: 0 14px;
  }
  .pb-fact {
    display: flex;
    gap: 5px;
    align-items: baseline;
    padding: 0;
    border: 0;
  }
  .pb-fact b {
    font-size: 12.5px;
  }
}

/* Step 1: the hero with the score, the findings and the two ways forward. */
.rb-hero {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px 28px;
  align-items: start;
}
.rb-hero-score {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: center;
}
.rb-hero-score > b {
  font-size: 15px;
}
.rb-hero-score small {
  font-size: 12px;
  line-height: 1.35;
}
.rb-hero-text h2 {
  margin: 2px 0 6px;
}
.rb-hero-sum {
  margin: 0 0 10px;
  font-size: 15px;
}
.rb-findings {
  display: grid;
  gap: 7px;
  margin: 8px 0 14px;
  padding: 0;
  list-style: none;
}
.rb-findings li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  line-height: 1.45;
}
.rb-findings li i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
  transform: translateY(-1px);
}
.rb-findings li.f-over i {
  background: var(--neg);
}
.rb-findings li.f-under i {
  background: #c98a0b;
}
.rb-findings li.f-info i {
  background: var(--accent);
}
.rb-findings li.f-ok i {
  background: var(--pos);
}
.rb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 8px;
}
.rb-hero .hint {
  margin: 4px 0 0;
}
@media (max-width: 760px) {
  .rb-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .rb-hero-score {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    gap: 2px 14px;
    padding: 12px;
  }
  .rb-hero-score .rb-dial {
    grid-row: span 3;
    min-width: 96px;
  }
  .rb-hero-score .rb-dial.big b {
    font-size: 34px;
  }
  .rb-hero-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* The groups, today → after the plan, each one opening to its holdings. */
.gb-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.gb-top h2 {
  margin: 0 0 4px;
}
.gb-top .hint {
  margin: 0;
  max-width: 640px;
}

.gb-card .ov-stacks {
  margin: 14px 0 6px;
}
.gb-colheads,
.gb-head {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1fr) 22px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
}
.gb-colheads.single,
.gb-rows.single .gb-head {
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 18px;
}
.gb-colheads.single span:nth-child(3),
.gb-colheads.single span:nth-child(4) {
  display: none;
}
.gb-colheads {
  margin-top: 14px;
  padding: 0 10px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gb-row {
  border-bottom: 1px solid var(--border);
}
.gb-row.open {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.gb-head {
  width: 100%;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gb-head:hover {
  background: var(--surface-2);
}
.gb-group {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
  min-width: 0;
}
.gb-group b {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-group small {
  grid-column: 2;
  font-size: 11.5px;
}
.gb-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.gb-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
}
.gb-bar {
  position: relative;
  height: 12px;
  border-radius: 4px;
  background: var(--surface-3);
}
.gb-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.gb-bar b {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--text);
}
.gb-pct {
  font-size: 13px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gb-status {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 650;
}
.gb-status small {
  font-weight: 500;
}
.gb-status.s-ok {
  color: var(--pos);
}
.gb-status.s-over {
  color: var(--neg);
}
.gb-status.s-under {
  color: #b07a08;
}
.gb-arrow,
.gb-chev {
  color: var(--text-3);
  text-align: center;
}
.gb-body {
  padding: 0 10px 12px 30px;
}
.gb-items {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gb-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 4px 12px;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.gb-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
button.gb-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
button.gb-name:hover {
  color: var(--accent);
}
.gb-w {
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gb-item.cut {
  border-color: color-mix(in srgb, var(--neg) 35%, var(--border));
}
.gb-item.gone .gb-name {
  text-decoration: line-through;
  color: var(--text-3);
}
.gb-item.buy {
  border-color: color-mix(in srgb, var(--pos) 40%, var(--border));
  background: color-mix(in srgb, var(--pos) 6%, var(--surface));
}
.gb-item.ghost {
  border-style: dashed;
  background: transparent;
}
.gb-item.sug {
  border-color: color-mix(in srgb, #c98a0b 45%, var(--border));
}
.gb-sug {
  padding: 2px 8px;
  border: 1px dashed color-mix(in srgb, #c98a0b 60%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #c98a0b 8%, var(--surface));
  color: #9a6a06;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.gb-item:not(.sug) .gb-seg,
.gb-item.buy .link-btn,
.gb-item.ghost .btn {
  grid-column: 4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .gb-sug {
    color: #e8b44a;
  }
}
:root[data-theme='dark'] .gb-sug {
  color: #e8b44a;
}
@media (max-width: 760px) {
  .gb-colheads {
    display: none;
  }
  .gb-head,
  .gb-rows.single .gb-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 14px;
    gap: 6px 10px;
    padding: 10px 6px;
  }
  .gb-group {
    grid-column: 1 / 3;
  }
  .gb-head .gb-arrow {
    display: none;
  }
  .gb-col.after {
    grid-column: 2;
  }
  .gb-chev {
    grid-column: 3;
    grid-row: 1;
  }
  .gb-head .gb-col:not(.after) {
    grid-row: 2;
  }
  .gb-head .gb-col.after {
    grid-row: 2;
  }
  .gb-rows.single .gb-head .gb-col {
    grid-column: 1 / 3;
  }
  .gb-col {
    grid-template-columns: minmax(0, 1fr) 40px;
  }
  .gb-col[data-label]::before {
    content: attr(data-label);
    grid-column: 1 / -1;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .pb-facts span.pb-fact {
    display: none;
  }
  .gb-body {
    padding: 0 6px 10px;
  }
  .gb-item {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px 9px;
  }
  .gb-item .gb-seg,
  .gb-item.buy .link-btn,
  .gb-item.ghost .btn,
  .gb-item:not(.sug) .gb-seg {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .gb-sug {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Step 2: the target as plain choices. */
.rb-q {
  margin: 20px 0 8px;
  font-size: 15px;
}
.rb-fold h4 {
  margin: 18px 0 8px;
  font-size: 14px;
}
.rb-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rb-choice {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rb-choice:hover {
  border-color: var(--border-strong);
}
.rb-choice.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.rb-choice.on::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--accent);
  font-weight: 800;
}
.rb-choice b {
  padding-right: 18px;
  font-size: 14px;
}
.rb-choice span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.rb-badge-rec {
  justify-self: start;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pos) 14%, var(--surface));
  color: var(--pos);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.rb-mixbar.mini {
  height: 8px;
  margin: 2px 0;
}
.rb-mixbar.mini i {
  font-size: 0;
}
.rb-choice-extra {
  display: inline-grid;
  gap: 4px;
  margin-top: 10px;
}
.rb-choice-extra .select {
  width: auto;
  min-width: 200px;
}
.rb-fold > summary {
  cursor: pointer;
  list-style: none;
}
.rb-fold > summary::-webkit-details-marker {
  display: none;
}
.rb-fold > summary::before {
  content: '▸';
  display: inline-block;
  width: 18px;
  color: var(--text-3);
}
.rb-fold[open] > summary::before {
  content: '▾';
}
.rb-fold[open] > summary {
  margin-bottom: 8px;
}
.rb-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px 28px;
}
.rb-detail h3 {
  margin: 4px 0 4px;
  font-size: 14px;
}
.rb-detail .hint {
  margin: 0 0 10px;
}
@media (max-width: 760px) {
  .rb-details-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Steps 3 and 4: a head with tools, then compact rows and cards. */
.rb-step-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.rb-step-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rs-list h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
}
.rs-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 130px minmax(0, 1.5fr);
  gap: 6px 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.rs-row.picked {
  margin: 0 -10px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--neg) 5%, var(--surface));
}
.rs-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.rs-name {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rs-name b {
  flex: none;
}
.rs-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}
.rs-name:hover b {
  color: var(--accent);
}
.rs-meta {
  font-size: 12px;
}
.rs-score {
  display: grid;
  gap: 3px;
}
.rs-score small {
  font-size: 11.5px;
  color: var(--text-2);
}
.rs-row.lvl-strong .rs-score small {
  color: var(--neg);
  font-weight: 650;
}
.rs-act {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-self: end;
}
.rs-why {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.rs-sug {
  color: #9a6a06;
  font-weight: 650;
}
.rs-more {
  grid-column: 1 / -1;
  font-size: 12.5px;
}
.rs-more summary {
  color: var(--accent);
  cursor: pointer;
}
.rs-more .rv-facts {
  margin: 6px 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .rs-sug {
    color: #e8b44a;
  }
}
:root[data-theme='dark'] .rs-sug {
  color: #e8b44a;
}
@media (max-width: 760px) {
  .rs-row {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .rs-act {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
.rb-picks-wrap {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.rb-picks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rb-picks .fut-label {
  min-width: 108px;
}
.rb-pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 650;
}
.rb-pick-chip small {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.rb-pick-chip.mine {
  border-color: color-mix(in srgb, var(--pos) 45%, var(--border));
  background: color-mix(in srgb, var(--pos) 8%, var(--surface));
}
.rb-pick-chip.skipped {
  color: var(--text-3);
  text-decoration: line-through;
}
.rb-pick-chip button {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.rb-pick-chip button:hover {
  background: var(--surface-3);
  color: var(--text);
}

.rb-buy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.rb-buy {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.rb-buy.on {
  border-color: color-mix(in srgb, var(--pos) 50%, var(--border));
  background: color-mix(in srgb, var(--pos) 6%, var(--surface));
}
.rb-buy.auto {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--pos) 50%, var(--border));
}
.rb-buy-auto {
  font-size: 11px;
  font-weight: 700;
  color: var(--pos);
}
.rb-buy-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.rb-buy-head .rs-name {
  display: grid;
  gap: 1px;
}
.rb-buy-facts {
  display: flex;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 12.5px;
}
.rb-buy-why {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--text-2);
}
.rb-buy .btn {
  justify-self: start;
}
.rb-fold .rb-controls {
  margin: 4px 0 10px;
}
.rb-empty {
  display: grid;
  gap: 8px;
}
.rb-empty p {
  margin: 0;
}
.rb-hero.plan .rb-recap {
  margin: 8px 0;
}

/* ---------- Handelsdagen: the day compass (quadrants, a slider) ---------- */
.td-time-card {
  margin-bottom: 16px;
}
.td-view-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.td-view-note {
  font-size: 12px;
}
.td-view button[disabled] {
  opacity: 0.5;
  cursor: default;
}
.dc-wrap {
  display: grid;
  gap: 8px;
}
.dc-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--text-2);
}
.dc-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dc-count i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qc);
}
.dc-count b {
  color: var(--text);
}
.q-lead {
  --qc: var(--pos);
}
.q-ride {
  --qc: #7fae5a;
}
.q-hold {
  --qc: #d39b00;
}
.q-weak {
  --qc: var(--neg);
}
.dc-q.lead {
  fill: color-mix(in srgb, var(--pos) 9%, transparent);
}
.dc-q.ride {
  fill: color-mix(in srgb, #7fae5a 6%, transparent);
}
.dc-q.hold {
  fill: color-mix(in srgb, #d39b00 7%, transparent);
}
.dc-q.weak {
  fill: color-mix(in srgb, var(--neg) 8%, transparent);
}
.dc-ql-name {
  font-size: 12.5px;
  font-weight: 700;
}
.dc-ql-text {
  font-size: 11px;
  fill: var(--text-3);
}
.dc-ql.lead .dc-ql-name {
  fill: var(--pos);
}
.dc-ql.ride .dc-ql-name {
  fill: #6e9a4c;
}
.dc-ql.hold .dc-ql-name {
  fill: #b98900;
}
.dc-ql.weak .dc-ql-name {
  fill: var(--neg);
}
.dc-svg.v2 .dc-g {
  cursor: pointer;
}
.dc-dot2 {
  fill: var(--qc, var(--text-3));
  stroke: var(--surface);
  stroke-width: 1.5;
  transition: r 0.15s;
}
.dc-dot2.followed {
  fill: var(--surface);
  stroke: var(--qc, var(--text-3));
  stroke-width: 2;
}
.dc-trail2,
.dc-start {
  display: none;
}
.dc-trail2 {
  fill: none;
  stroke: var(--qc, var(--text-2));
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.85;
}
.dc-start {
  fill: var(--surface);
  stroke: var(--text-2);
  stroke-width: 1.5;
}
.dc-g.sel .dc-trail2,
.dc-g.on .dc-trail2,
.dc-g.sel .dc-start,
.dc-g.on .dc-start {
  display: inline;
}
.dc-svg.v2.has-sel .dc-g:not(.sel):not(.on) {
  opacity: 0.45;
}
.dc-svg.v2.hovering .dc-g:not(.on):not(.sel) {
  opacity: 0.35;
}
.dc-g.sel .dc-dot2,
.dc-g.on .dc-dot2 {
  stroke: var(--text);
  stroke-width: 2;
}
.dc-g.sel .dc-label,
.dc-g.on .dc-label {
  font-weight: 700;
  display: inline;
}
.dc-scrub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
}
.dc-slider {
  width: 100%;
  accent-color: var(--accent);
}
.dc-slider-time {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tt-quad {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--qc);
}

/* ---------- Marknad → Omvärlden: what drives the market ---------- */
.dv-lead {
  margin: 10px 0 0;
  max-width: 900px;
  font-size: 15.5px;
  line-height: 1.55;
}
.dv-head .hint {
  margin-top: 6px;
}
.dv-moves {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr;
  gap: 18px;
}
.dv-moves > div {
  display: grid;
  align-content: start;
  gap: 8px;
}
.dv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.dv-tile {
  display: grid;
  gap: 1px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.dv-tile-name {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-tile b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.dv-tile b.pos {
  color: var(--pos);
}
.dv-tile b.neg {
  color: var(--neg);
}
.dv-tile small {
  font-size: 11px;
}
.dv-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.dv-theme {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--tc, var(--accent));
  border-radius: var(--radius-sm);
}
.th-earnings {
  --tc: #4f7fd1;
}
.th-rates {
  --tc: #8a6fd1;
}
.th-inflation {
  --tc: #d0643a;
}
.th-economy {
  --tc: #3fa37a;
}
.th-geopolitics {
  --tc: #c75b7a;
}
.th-energy {
  --tc: #d4a72c;
}
.th-tech {
  --tc: #2fa3b5;
}
.th-mood {
  --tc: #7a8a9f;
}
.th-crypto {
  --tc: #e0913a;
}
.dv-theme-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.dv-theme-head b {
  font-size: 14.5px;
}
.dv-count {
  font-size: 12px;
  font-weight: 650;
  color: var(--tc);
  white-space: nowrap;
}
.dv-why {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.dv-heads {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.dv-heads li {
  display: grid;
  gap: 1px;
  font-size: 13px;
  line-height: 1.4;
}
.dv-heads a {
  color: var(--text);
  text-decoration: none;
}
.dv-heads a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.dv-heads small {
  font-size: 11.5px;
}
.dv-all {
  margin-top: 14px;
}
.dv-all summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.dv-all .dv-heads {
  margin-top: 10px;
}
.dv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.dv-grid > .card {
  margin-bottom: 16px;
}
.dv-heavy {
  display: grid;
  gap: 2px;
  margin: 4px 0 12px;
  padding: 0;
  list-style: none;
}
.dv-heavy li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
}
.dv-heavy li:hover {
  background: var(--surface-2);
}
.dv-hv-name {
  display: grid;
  min-width: 0;
}
.dv-hv-name b,
.dv-hv-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-hv-name b {
  font-size: 13.5px;
}
.dv-hv-extra {
  font-size: 12px;
  white-space: nowrap;
}
.dv-hv-chg {
  min-width: 58px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dv-hv-chg.pos {
  color: var(--pos);
}
.dv-hv-chg.neg {
  color: var(--neg);
}
.dv-season {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.dv-weeks {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 84px;
}
.dv-week {
  display: grid;
  grid-template-rows: 1fr auto;
  flex: 1;
  min-width: 0;
  height: 100%;
  gap: 4px;
}
.dv-week i {
  align-self: end;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
.dv-week small {
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.dv-cycle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 22px;
}
.dv-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.dv-ph {
  display: grid;
  gap: 2px;
  padding: 10px 10px 12px;
  border-radius: 6px;
  background: var(--surface-2);
  border-top: 3px solid var(--surface-3);
  opacity: 0.6;
}
.dv-ph i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
}
.dv-ph b {
  font-size: 12.5px;
  line-height: 1.25;
}
.dv-ph.on {
  opacity: 1;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.dv-ph.p-expansion.on {
  border-top-color: var(--pos);
}
.dv-ph.p-recovery.on {
  border-top-color: #2f9e8f;
}
.dv-ph.p-late.on {
  border-top-color: #d39b00;
}
.dv-ph.p-downturn.on {
  border-top-color: var(--neg);
}
.dv-clock > small {
  grid-column: 1 / -1;
}
.dv-phase-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.dv-evidence {
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
}
.dv-quarter {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.dv-sectors li {
  grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) 60px;
}
.dv-sectors .cr-bar-num.pos {
  color: var(--pos);
}
.dv-sectors .cr-bar-num.neg {
  color: var(--neg);
}
.dv-strip .dv-lead {
  margin-top: 0;
  font-size: 14.5px;
}
.dv-strip-heads {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.dv-strip-heads li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  min-width: 0;
}
.dv-strip-heads a {
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-strip-heads a:hover {
  color: var(--accent);
}
.dv-chip {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tc);
  background: color-mix(in srgb, var(--tc) 14%, transparent);
}
@media (max-width: 1000px) {
  .dv-moves,
  .dv-grid,
  .dv-cycle-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .dv-clock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dv-sectors li {
    grid-template-columns: minmax(0, 1fr) 70px 54px;
  }
}
.td-time-card .dash-card-head {
  flex-wrap: wrap;
  gap: 8px 12px;
}
.td-view-row {
  max-width: 100%;
  min-width: 0;
}
.td-view {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

/* ---------- updates to users (Admin → Updates, and the card on Översikt) ---------- */
.nw-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.nw-write {
  display: grid;
  align-content: start;
  gap: 10px;
}
.nw-text {
  min-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}
.nw-preview-wrap {
  display: grid;
  align-content: start;
  gap: 8px;
}
.nw-preview {
  max-height: 560px;
  overflow: auto;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: #ffffff;
  color: #14161b;
  border: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.55;
}
.nw-preview a {
  color: #3b5fd9;
}
.nw-preview .nw-subject {
  margin: 0 0 14px;
  font-size: 18px;
}
.nw-preview h3,
.nw-body h3 {
  margin: 16px 0 6px;
  font-size: 15px;
}
.nw-preview p,
.nw-body p {
  margin: 0 0 12px;
}
.nw-preview ul,
.nw-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.nw-preview li,
.nw-body li {
  margin-bottom: 4px;
}
.nw-progress {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}
.nw-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nw-status {
  margin: 0;
}
.nw-status:empty {
  display: none;
}
.nw-card {
  border-left: 4px solid var(--accent);
}
.nw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.nw-badge svg {
  width: 14px;
  height: 14px;
}
.nw-card h2 {
  margin: 8px 0 8px;
}
.nw-short {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nw-short li {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--accent-soft);
}
.nw-body {
  margin-top: 12px;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.55;
}
.nw-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .nw-editor {
    grid-template-columns: minmax(0, 1fr);
  }
  .nw-text {
    min-height: 300px;
  }
}
.rb-f-after {
  display: inline-block;
  margin-left: 2px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 650;
  color: var(--text-2);
  white-space: nowrap;
}
.rb-f-after.fixed {
  background: var(--pos-soft);
  color: var(--pos);
}
@supports (grid-template-columns: subgrid) {
  @media (min-width: 761px) {
    .gb-items {
      grid-template-columns: minmax(0, 1fr) auto auto auto;
    }
    .gb-item {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
    .gb-item .gb-seg,
    .gb-item.buy .link-btn,
    .gb-item.ghost .btn {
      grid-column: 4;
      justify-self: start;
    }
    .gb-sug {
      grid-column: 3;
    }
  }
}
@media (max-width: 760px) {
  .rb-table.trades .rb-name,
  .rb-table.trades .rb-name span {
    white-space: normal;
  }
  .rb-table.trades td:first-child {
    width: 1%;
  }
  .rb-picks .fut-label {
    flex: 1 1 100%;
    min-width: 0;
  }
  .rb-pick-chip small {
    display: none;
  }
}
.rb-what {
  margin-top: 10px;
  font-size: 13px;
}
.rb-what summary {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.rb-what p {
  margin: 6px 0 0;
  max-width: 720px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ---------- Ombalansering in three steps: starting point, sell and buy, the plan ---------- */
.rb-stepper.three ol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 761px) and (max-width: 1100px) {
  .rb-stepper.three .rb-st-text small {
    display: block;
  }
}
@media (max-width: 760px) {
  .rb-stepper.three ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .rb-stepper.three li button {
    padding: 8px 4px;
  }
  .rb-stepper.three .rb-st-text b {
    font-size: 12px;
  }
}
.rb-hero-after {
  margin-top: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 700;
}
.rb-hero-after.t-good {
  background: var(--pos-soft);
  color: var(--pos);
}
.rb-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .rb-start-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rb-criteria h2,
.rbt-card h2 {
  margin: 0 0 4px;
}
.rb-criteria > .hint,
.rbt-card > .hint {
  margin: 0;
}
.rb-q {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rb-qn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.rb-lens {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.rb-lens button {
  flex: 1 1 auto;
}
.rb-lens-text {
  margin: 6px 0 0;
}
.rb-choices.list {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.rb-choices.list .rb-choice {
  padding: 9px 12px;
  gap: 3px;
}
.rb-choices.list .rb-choice.on::after {
  top: 8px;
}
.rb-choices.list .rb-mixbar.mini {
  max-width: 220px;
}
.rb-choices.list .hint {
  margin: 2px 0 0;
}
.rb-money {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.rb-money .input-suffix {
  width: 200px;
  max-width: 100%;
}
.rb-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rb-quick button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.rb-quick button:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.rb-quick button.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
}
.rb-criteria .rb-money + .hint {
  margin: 6px 0 0;
}
.rb-more {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rb-more > summary {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.rb-more h4 {
  margin: 14px 0 4px;
  font-size: 13.5px;
}
.rbt-card .ov-stacks {
  margin: 14px 0 8px;
}
.rbt-card .ov-stack-row {
  grid-template-columns: 70px minmax(0, 1fr) 70px;
}
.rbt-rows {
  display: grid;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.rbt-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.5fr) 14px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rbt-row:hover {
  background: var(--surface-2);
}
.rbt-row .gb-group b {
  font-size: 13px;
}
.gb-row {
  scroll-margin-top: 80px;
}
.cw-note {
  margin: 0 0 10px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--surface-3);
}
.cw-note.ok {
  background: var(--pos-soft);
  color: var(--pos);
}
.cw-note.over {
  background: var(--neg-soft);
  color: var(--neg);
}
.cw-note.under {
  background: color-mix(in srgb, #c98a0b 14%, var(--surface));
  color: #9a6a06;
}
.cw-sub + .cw-sub {
  margin-top: 14px;
}
.cw-sub h4 {
  margin: 4px 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cw-sub .rs-row:first-of-type {
  border-top: 0;
}
.cw-sub .gb-items {
  margin: 6px 0 10px;
}
.cw-sugg {
  margin: 4px 0 8px;
}
.cw-cash {
  margin: 0 0 8px;
  font-size: 13px;
}
.rs-why .gb-sug {
  margin-right: 2px;
}
.rb-act.new {
  background: var(--accent-soft);
  color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .cw-note.under {
    color: #e8b44a;
  }
}
:root[data-theme='dark'] .cw-note.under {
  color: #e8b44a;
}
@media (max-width: 760px) {
  .rbt-row {
    grid-template-columns: minmax(0, 1fr) 14px;
    gap: 4px 8px;
  }
  .rbt-row .gb-col {
    grid-column: 1;
    grid-row: 2;
  }
  .rbt-row .gb-chev {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .rbt-card .ov-stack-row {
    grid-template-columns: 60px minmax(0, 1fr);
  }
}

/* ---------- AI: the market brief, sorted news (ai.js) ---------- */
.ai-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  vertical-align: middle;
  color: var(--accent);
  background: var(--accent-soft);
}
.ai-brief .ai-brief-day {
  margin: -4px 0 4px;
  font-size: 12px;
}
.ai-brief .ai-brief-head {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.ai-brief .ai-brief-sum {
  margin: 0 0 10px;
  line-height: 1.55;
}
.ai-brief-points {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.ai-brief-points li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
  line-height: 1.45;
}
.ai-brief-points i {
  font-style: normal;
  color: var(--text-3);
}
.ai-brief-points .tone-up i {
  color: var(--pos);
}
.ai-brief-points .tone-down i {
  color: var(--neg);
}
.ai-brief-watch {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
}
.ai-brief-watch ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.ai-brief-watch li {
  line-height: 1.45;
}
.ai-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0;
}
.ai-note svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}
.ai-brief.compact .ai-brief-head {
  font-size: 16px;
}
/* Översikt: the headline and two lines of the summary. */
.ai-brief.compact .ai-brief-sum {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: 6px;
}
.ai-news {
  display: block;
  margin: 2px 0 1px;
  padding-left: 8px;
  border-left: 3px solid var(--border-strong);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.ai-news b {
  margin-right: 6px;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ai-news.tone-down {
  border-left-color: var(--neg);
}
.ai-news.tone-down b {
  color: var(--neg);
}
.ai-news.tone-up {
  border-left-color: var(--pos);
}
.ai-news.tone-up b {
  color: var(--pos);
}
.ai-news.major {
  border-left-width: 4px;
  color: var(--text);
}
.now-item.tone-event {
  border-left-color: var(--accent);
}
.t-badge.news {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}
.t-badge.news.down {
  background: #ffcf33;
  color: #4a2c00;
}
.t-badge.news.up {
  background: #fff;
  color: #13803c;
}

/* ---------- Horisont: the market cycle (cycle.js) ---------- */
.cy-card .p-expansion {
  --ph: var(--pos);
}
.cy-card .p-recovery {
  --ph: #2f9e8f;
}
.cy-card .p-late {
  --ph: var(--hz-watch);
}
.cy-card .p-downturn {
  --ph: var(--neg);
}
.cy-card .p-mixed {
  --ph: var(--text-3);
}
.cy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}
@media (max-width: 860px) {
  .cy-grid {
    grid-template-columns: 1fr;
  }
}
.cy-fig {
  margin: 0;
}
.cy-clock {
  width: 100%;
  height: auto;
  display: block;
}
.cy-q {
  fill: var(--ph);
  opacity: 0.07;
}
.cy-q.on {
  opacity: 0.16;
}
.cy-ql {
  fill: var(--ph);
  font-size: 12px;
  font-weight: 700;
}
.cy-turn {
  fill: var(--text-3);
  font-size: 13px;
  opacity: 0.55;
}
.cy-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}
.cy-ax {
  fill: var(--text-3);
  font-size: 11px;
}
.cy-trail {
  stroke: var(--text-2);
  stroke-width: 2;
  stroke-linecap: round;
}
.cy-mark {
  fill: var(--ph);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.cy-mark-l {
  fill: var(--text-3);
  font-size: 10.5px;
}
.cy-now {
  fill: var(--ph);
  stroke: var(--surface);
  stroke-width: 3;
}
.cy-now-l {
  fill: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.cy-side .fut-label {
  display: block;
}
.cy-dir {
  display: block;
  margin: 2px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--ph);
  font-size: 18px;
  line-height: 1.3;
}
.cy-ev {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
}
.cy-ev li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
}
.cy-ev i {
  font-style: normal;
  color: var(--text-3);
}
.cy-ev .t-up i {
  color: var(--pos);
}
.cy-ev .t-down i {
  color: var(--neg);
}
.cy-means {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.5;
}
.cy-strip-wrap {
  position: relative;
  margin: 4px 0 22px;
}
.cy-strip {
  display: flex;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
}
.cy-strip i {
  display: block;
  background: var(--ph);
  opacity: 0.85;
  min-width: 2px;
}
.cy-strip i + i {
  border-left: 1px solid var(--surface);
}
.cy-years {
  position: absolute;
  inset: 22px 0 auto 0;
  height: 14px;
  font-size: 11px;
  color: var(--text-3);
}
.cy-years span {
  position: absolute;
  white-space: nowrap;
}
.cy-years span + span {
  transform: translateX(-50%);
}
.cy-years .end {
  right: 0;
  transform: none;
}
.cy-history {
  margin: 0 0 8px;
  font-size: 13px;
}
.cy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-2);
}
.cy-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 3px;
  background: var(--ph);
  vertical-align: -1px;
}
.cy-phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 1000px) {
  .cy-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .cy-phases {
    grid-template-columns: 1fr;
  }
}
.cy-phase {
  position: relative;
  padding: 12px 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--ph);
  background: var(--surface);
}
.cy-phase.on {
  background: color-mix(in srgb, var(--ph) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--ph) 45%, var(--border));
}
.cy-phase.next {
  border-style: dashed;
  border-top-style: solid;
}
.cy-phase b {
  display: block;
  margin-bottom: 4px;
}
.cy-phase em {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background: var(--ph);
  vertical-align: 1px;
}
.cy-phase p {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.cy-phase small {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
}
.cy-step {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
}

/* ---------- Portfölj → AI-analys (aianalysis.js) ---------- */
.a-sell {
  --act: var(--neg);
}
.a-trim {
  --act: #e0782c;
}
.a-add {
  --act: var(--pos);
}
.a-watch {
  --act: var(--hz-watch);
}
.a-hold {
  --act: color-mix(in srgb, var(--text-3) 45%, var(--surface-2));
}
.aia-summary {
  margin: 4px 0 10px;
  font-size: 15px;
  line-height: 1.55;
}
.aia-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  font-weight: 600;
}
.aia-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: aia-spin 0.9s linear infinite;
}
@keyframes aia-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .aia-spin {
    animation-duration: 3s;
  }
}
.aia-head-card .st-title .btn {
  flex: none;
}
.aia-bar {
  display: flex;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  gap: 2px;
}
.aia-bar i {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  overflow: hidden;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--act);
}
.aia-bar i.a-hold {
  color: var(--text-2);
}
.aia-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 16px;
  font-size: 12.5px;
  color: var(--text-2);
}
.aia-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--act);
  vertical-align: -1px;
}
.aia-time {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 560px) {
  .aia-time {
    grid-template-columns: 1fr;
  }
}
.aia-now {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}
.aia-now .fut-label {
  width: 100%;
}
.aia-chip,
.aia-flag {
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--act);
  white-space: nowrap;
}
.aia-track {
  position: relative;
  min-height: 96px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.aia-axis span {
  position: absolute;
  top: -1px;
  transform: translateX(-50%);
  padding-top: 3px;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.aia-axis span:first-child {
  transform: none;
}
.aia-axis span:last-child {
  transform: translateX(-100%);
}
.aia-events {
  position: relative;
  height: 14px;
}
.aia-ev {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
}
.aia-events .aia-ev {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
}
.aia-ev.exdiv {
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--accent);
}
.aia-events .aia-ev.exdiv {
  transform: translateX(-50%) rotate(45deg);
}
.aia-flags {
  position: relative;
  height: 66px;
}
.aia-flag {
  position: absolute;
  transform: translateX(-50%);
}
.aia-time-legend {
  grid-column: 1 / -1;
  margin: 0;
}
.aia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.aia-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--act);
  background: var(--surface);
}
.aia-card h3 {
  margin: 0;
  font-size: 15px;
}
.aia-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.aia-badge {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 750;
  color: #fff;
  background: var(--act);
}
.aia-badge.a-hold {
  color: var(--text);
}
.aia-when {
  font-size: 12.5px;
  font-weight: 650;
}
.aia-conf {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}
.aia-conf i {
  width: 6px;
  height: 12px;
  border-radius: 2px;
  background: var(--border-strong);
}
.aia-conf i.on {
  background: var(--text-2);
}
.aia-head {
  margin: 0;
  font-weight: 650;
}
.aia-reason {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.aia-src {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
}
.aia-card .btn {
  justify-self: start;
  margin-top: 4px;
}
.aia-rest ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
}
.aia-mini-list {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.aia-mini-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 13.5px;
}

/* ---------- Rapporter: personal news reports (reports.js) ---------- */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.rp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
}
.rp-card.paused {
  opacity: 0.7;
}
.rp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rp-card-head h2 {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rp-card-head h2 a {
  color: inherit;
  text-decoration: none;
}
.rp-card-meta {
  margin: 0;
  font-size: 13px;
}
.rp-latest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.rp-latest:hover {
  background: var(--surface-3);
}
.rp-latest-when {
  font-size: 12px;
  color: var(--text-3);
}
.rp-card-actions,
.rp-save,
.rp-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.badge.accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.rp-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.rp-template {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  font: inherit;
  color: var(--text);
}
.rp-template:hover {
  border-color: var(--accent);
}
.rp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rp-toolbar .spacer {
  flex: 1;
}
.rp-toolbar .select {
  max-width: 280px;
}
.rp-making {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rp-making .spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rp-spin 0.9s linear infinite;
}
@keyframes rp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* An edition, in every format */
.rp-edition {
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 28px;
}
.rp-edition a {
  color: inherit;
  text-decoration: none;
}
.rp-edition a:hover {
  text-decoration: underline;
}
.rp-head h2 {
  margin: 2px 0 2px;
  font-size: 26px;
}
.rp-when {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rp-period {
  font-size: 12.5px;
}
.rp-lead {
  margin: 14px 0 6px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-2);
}
.rp-top {
  margin: 18px 0 10px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.rp-top h3,
.rp-section-head,
.rp-kicker {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rp-top ul {
  margin: 0;
  padding-left: 18px;
}
.rp-top li {
  margin: 6px 0;
  line-height: 1.5;
}
.rp-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rp-label.inline {
  margin-left: 8px;
}
.rp-label[data-tone='positive'],
.rp-tone.t-positive {
  color: var(--pos);
}
.rp-label[data-tone='negative'],
.rp-tone.t-negative {
  color: var(--neg);
}
.rp-label[data-tone='mixed'],
.rp-tone.t-mixed {
  color: #c27c0e;
}
.rp-section {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 2px solid var(--text);
}
.rp-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rp-move {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.rp-move.pos {
  color: var(--pos);
}
.rp-move.neg {
  color: var(--neg);
}
.rp-story {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
}
.rp-story:last-child {
  border-bottom: 0;
}
.rp-story h4 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.35;
}
.rp-story.imp-1 h4 {
  font-size: 15.5px;
}
.rp-story p {
  margin: 0 0 4px;
  line-height: 1.55;
}
.rp-major {
  color: var(--neg);
  margin-right: 6px;
  font-size: 12px;
  vertical-align: 2px;
}
.rp-tone-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  vertical-align: 3px;
  background: var(--text-3);
}
.rp-tone-dot.t-positive {
  background: var(--pos);
}
.rp-tone-dot.t-negative {
  background: var(--neg);
}
.rp-tone-dot.t-mixed {
  background: #c27c0e;
}
.rp-why {
  color: var(--text-2);
  font-size: 14px;
}
.rp-sources {
  font-size: 12.5px;
  color: var(--text-3);
}
.rp-edition .rp-sources a {
  color: var(--accent);
}
.rp-quiet {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--text-3);
}
.rp-read {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-2);
}
.rp-read summary {
  cursor: pointer;
  color: var(--text-3);
}
.rp-read p {
  margin: 6px 0 0;
  line-height: 1.6;
}
.rp-reason {
  margin: 14px 0 4px;
}
.rp-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 18px;
}
.rp-note svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

/* 5 saker (the list inside the edition, which itself is .rp-five — hence its own class) */
.rp-five-list {
  list-style: none;
  counter-reset: five;
  margin: 18px 0 0;
  padding: 0;
}
.rp-five-list li {
  counter-increment: five;
  position: relative;
  padding: 18px 0 20px 58px;
  border-bottom: 1px solid var(--border);
}
.rp-five-list li:last-child {
  border-bottom: 0;
}
.rp-five-list li::before {
  content: counter(five);
  position: absolute;
  left: 2px;
  top: 16px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
.rp-five-list h3 {
  margin: 2px 0 6px;
  font-size: 18px;
  line-height: 1.3;
}
.rp-five-list p {
  margin: 0 0 6px;
  line-height: 1.55;
}

/* 360 */
.rp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.rp-360-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.rp-360-card.tone-positive {
  border-left-color: var(--pos);
}
.rp-360-card.tone-negative {
  border-left-color: var(--neg);
}
.rp-360-card.tone-mixed {
  border-left-color: #c27c0e;
}
.rp-360-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.rp-360-head h3 {
  margin: 0;
  font-size: 16px;
}
.rp-tone {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
}
.rp-360-status {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.45;
}
.rp-360-meter {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.rp-360-meter .hot {
  color: #c27c0e;
  font-weight: 700;
}
.rp-360-list {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.45;
}
.rp-360-list li.imp-3 {
  font-weight: 700;
}

/* Tidningen */
.rp-paper {
  font-family: Georgia, 'Times New Roman', serif;
}
.rp-mast {
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 3px double var(--text);
}
.rp-mast-name {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
}
.rp-mast-date {
  margin-top: 4px;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.rp-paper-lead h2 {
  margin: 4px 0 8px;
  font-size: 32px;
  line-height: 1.15;
}
.rp-paper-lead p {
  font-size: 17px;
  line-height: 1.55;
}
.rp-standfirst {
  font-style: italic;
  color: var(--text-2);
}
.rp-kicker {
  font-family: var(--font);
  color: var(--neg);
}
.rp-paper-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 26px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--text);
}
.rp-paper-main {
  columns: 2 260px;
  column-gap: 26px;
}
.rp-paper-sec {
  break-inside: avoid;
  margin-bottom: 14px;
}
.rp-paper .rp-story h4 {
  font-size: 18px;
}
.rp-brief {
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.rp-brief h3 {
  margin: 0 0 8px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rp-brief ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-brief li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .rp-edition {
    padding: 18px 16px;
  }
  .rp-paper-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .rp-brief {
    padding-left: 0;
    border-left: 0;
  }
  .rp-mast-name {
    font-size: 30px;
  }
  .rp-paper-lead h2 {
    font-size: 25px;
  }
  .rp-toolbar .select {
    max-width: 100%;
  }
}

/* The editor */
.rp-editor {
  display: grid;
  gap: 14px;
  max-width: 900px;
}
.rp-editor .card h2 {
  margin-top: 0;
}
/* Each editor card's parts — heading, explanation, choices, fields — one under the other with room between. */
.rp-editor > .card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rp-editor > .card > * {
  margin-top: 0;
  margin-bottom: 0;
}
/* A row of choices (and the time) keeps its own width instead of stretching across the card. */
.rp-editor > .card > .seg,
.rp-editor .field > .seg,
.rp-editor .field > .input[type='time'] {
  align-self: flex-start;
}
.rp-editor .field > .input[type='time'] {
  width: 150px;
}
.rp-watch {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.rp-wrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rp-wrow > .badge {
  margin-top: 8px;
}
.rp-wmain {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.rp-wwords {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}
.rp-wwords label {
  display: grid;
  gap: 2px;
}
.rp-wwords small {
  color: var(--text-3);
}
.rp-company {
  position: relative;
}
.rp-theme {
  display: grid;
  gap: 6px;
}
.rp-theme textarea {
  resize: vertical;
  min-height: 52px;
  font: inherit;
}
.rp-suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin: 2px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.rp-suggest button {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rp-suggest button:hover {
  background: var(--surface-2);
}
.rp-format-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.rp-format-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rp-format-opt.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.rp-format-opt span {
  font-size: 13px;
}
.rp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 12px;
}
.rp-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rp-days .btn[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.rp-sources-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 14px;
}
.rp-starts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rp-finder {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.rp-finder .rp-subhead {
  margin-top: 0;
}
.rp-found {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.rp-found-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.rp-found-item.have {
  opacity: 0.7;
}
.rp-found-item input {
  margin-top: 3px;
}
.rp-found-item > span {
  display: grid;
  gap: 2px;
}
.rp-found-item small {
  font-size: 12.5px;
  line-height: 1.4;
}
.rp-found-item .badge {
  justify-self: start;
}
.rp-once-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-once-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.rp-once-list li:last-child {
  border-bottom: 0;
}
.rp-once-list a {
  color: var(--text);
  text-decoration: none;
  min-width: 0;
  flex: 1 1 260px;
}
.rp-once-list .rp-card-actions {
  flex-wrap: nowrap;
}
.rp-once-head {
  display: block;
  font-size: 13.5px;
  color: var(--text-2);
}
.rp-cats {
  display: grid;
  gap: 14px;
}
.rp-cat {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rp-cat-head {
  align-items: flex-start;
  margin-bottom: 8px;
}
.rp-cat-head span {
  display: grid;
}
.rp-subhead {
  margin: 16px 0 6px;
  font-size: 14px;
}
.rp-own {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rp-feed-add,
.admin-feed-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.rp-feed-add .input,
.admin-feed-add .input {
  flex: 1 1 220px;
}
.rp-search {
  margin-top: 14px;
  align-items: flex-start;
}
.rp-search span {
  display: grid;
}
@media (max-width: 760px) {
  .rp-wrow {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rp-wrow > .badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0;
  }
  .rp-wwords {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Översikt */
.rp-dash h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rp-dash h2 svg {
  width: 18px;
  height: 18px;
}
.rp-dash-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-dash-list li a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.rp-dash-list li:last-child a {
  border-bottom: 0;
}
.rp-dash-head {
  display: block;
  font-size: 14px;
  color: var(--text-2);
}

/* Admin: the feed library */
.admin-sub {
  margin: 16px 0 6px;
  font-size: 14px;
}
.admin-feeds {
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-feeds li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.admin-feeds li.off {
  opacity: 0.6;
}
.admin-feeds li .muted {
  flex: 1 1 200px;
  font-size: 12.5px;
}

/* ---------- Admin → Reports: usage (admin.js usageSection) ---------- */
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 6px 0 12px;
}
.admin-kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.admin-kpi b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.admin-kpi span {
  font-size: 12.5px;
  font-weight: 600;
}
.admin-kpi small {
  font-size: 11.5px;
}
.admin-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  margin: 0 0 12px;
  padding: 4px;
  border-bottom: 1px solid var(--border);
}
.admin-spark i {
  flex: 1;
  min-width: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  opacity: 0.8;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 10px;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.admin-table th {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-table td:not(:first-child),
.admin-table th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}