/* macrolens — theme after ricagroup.se: stone neutrals, cyan accent, Poppins, soft radii. */
:root {
  color-scheme: light;
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f5f5f4;
  --border: #e7e5e4;
  --ink: #1c1917;
  --ink-2: #57534e;
  --ink-3: #78716c;
  --accent: #0891b2;
  --accent-strong: #0e7490;
  --accent-soft: #ecfeff;
  --buy: #16a34a;
  --sell: #dc2626;
  --hold: #d97706;
  --buy-soft: #f0fdf4;
  --sell-soft: #fef2f2;
  --hold-soft: #fff7ed;
  --series-1: #0891b2;   /* analog months / score line */
  --series-2: #c2410c;   /* all months (validated pair with series-1, light) */
  --grid: #e7e5e4;
  --radius: .75rem;
  --radius-sm: .5rem;
  --shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c1917; --surface: #292524; --surface-2: #332f2c; --border: #44403c;
    --ink: #fafaf9; --ink-2: #d6d3d1; --ink-3: #a8a29e;
    --accent: #22d3ee; --accent-strong: #67e8f9; --accent-soft: #164e63;
    --buy: #4ade80; --sell: #f87171; --hold: #fbbf24;
    --buy-soft: #14532d; --sell-soft: #7f1d1d; --hold-soft: #78350f;
    --series-1: #0891b2; --series-2: #ea580c; --grid: #44403c;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1917; --surface: #292524; --surface-2: #332f2c; --border: #44403c;
  --ink: #fafaf9; --ink-2: #d6d3d1; --ink-3: #a8a29e;
  --accent: #22d3ee; --accent-strong: #67e8f9; --accent-soft: #164e63;
  --buy: #4ade80; --sell: #f87171; --hold: #fbbf24;
  --buy-soft: #14532d; --sell-soft: #7f1d1d; --hold-soft: #78350f;
  --series-1: #0891b2; --series-2: #ea580c; --grid: #44403c;
  --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.5; font-weight: 400;
}
a { color: var(--accent-strong); text-decoration: none; }
a.active { font-weight: 600; }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h2 { font-size: 1.05rem; color: var(--ink); }
p { margin: 0 0 .5rem; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.error { color: var(--sell); font-weight: 500; }
.inline { display: inline; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* layout */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 16px; background: var(--surface); border-bottom: 1px solid var(--border);
  padding-top: max(.6rem, env(safe-area-inset-top));
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; letter-spacing: .01em; }
.brand-mark { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
.topnav { display: flex; align-items: center; gap: .25rem; }
.page { max-width: 1200px; margin: 0 auto; padding: 1rem 16px 3rem; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.page > *, .two-col > *, .card { min-width: 0; }
body { overflow-x: hidden; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow);
}
details.card summary { cursor: pointer; font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 760px) { .two-col { grid-template-columns: minmax(220px, 1fr) 2fr; } }

/* buttons */
.btn, .pill, .link {
  font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); border-radius: 9999px; padding: .45rem 1rem; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s;
}
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 500; }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.link { border-color: transparent; background: transparent; color: var(--ink-2); padding: .35rem .6rem; }
.link:hover { background: var(--surface-2); color: var(--ink); }
.pills { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pills::-webkit-scrollbar { display: none; }
.pill { white-space: nowrap; font-weight: 500; font-size: .9rem; flex: 0 0 auto; }
.pill:hover { border-color: var(--accent); }
.pill.BUY { color: var(--buy); background: var(--buy-soft); border-color: transparent; }
.pill.SELL { color: var(--sell); background: var(--sell-soft); border-color: transparent; }
.pill.HOLD { color: var(--hold); background: var(--hold-soft); border-color: transparent; }
.pill[aria-selected="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.pill[aria-selected="true"]:not(.BUY):not(.SELL):not(.HOLD) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (min-width: 760px) { .metrics { grid-template-columns: repeat(5, 1fr); } }

/* verdict */
.verdict .headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.verdict .action {
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1;
  padding: .2rem .75rem; border-radius: var(--radius-sm);
}
.action.BUY  { color: var(--buy);  background: var(--buy-soft); }
.action.SELL { color: var(--sell); background: var(--sell-soft); }
.action.HOLD { color: var(--hold); background: var(--hold-soft); }
.verdict .target { font-size: 1.4rem; font-weight: 600; }
.verdict .target small { font-weight: 400; color: var(--ink-2); font-size: .9rem; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; }
@media (min-width: 760px) { .metrics { grid-template-columns: repeat(5, 1fr); } }
.metric { background: var(--surface-2); border-radius: var(--radius-sm); padding: .7rem .85rem; }
.metric .label { font-size: .78rem; color: var(--ink-2); }
.metric .value { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric .delta { font-size: .8rem; color: var(--ink-3); }
.rationale { margin-top: .85rem; padding: .7rem .85rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
:root[data-theme="dark"] .rationale { color: var(--ink); }
.range { margin-top: .9rem; }
.range .bar { position: relative; height: 10px; background: var(--surface-2); border-radius: 9999px; }
.range .fill { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .35; border-radius: 9999px; }
.range .med { position: absolute; top: -3px; width: 4px; height: 16px; background: var(--accent-strong); border-radius: 2px; transform: translateX(-2px); }
.range .zero { position: absolute; top: -2px; width: 1px; height: 14px; background: var(--ink-3); }
.range .ticks { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-3); margin-top: .3rem; font-variant-numeric: tabular-nums; }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 500; color: var(--ink-2); font-size: .8rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
td.note { min-width: 18ch; max-width: 36ch; }
#dist th.num { white-space: normal; }
@media (max-width: 759px) {
  td.note { min-width: 24ch; }
  #readings td:nth-child(2) { min-width: 22ch; }
}
tr.score-row td { font-weight: 600; color: var(--ink); }
.tag { display: inline-block; padding: .1rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.tag.BUY { color: var(--buy); background: var(--buy-soft); }
.tag.SELL { color: var(--sell); background: var(--sell-soft); }
.tag.HOLD { color: var(--hold); background: var(--hold-soft); }

/* charts */
figure.viz { margin: 0; position: relative; width: 100%; }
figure.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz .grid { stroke: var(--grid); stroke-width: 1; }
.viz .axis-text { fill: var(--ink-3); font-size: 11px; font-family: inherit; }
.viz .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .line-2 { fill: none; stroke: var(--series-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .area-2 { fill: var(--series-2); opacity: .12; }
.viz .bar-1 { fill: var(--series-1); }
.viz .dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.viz .threshold { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: none; opacity: .6; }
.viz .band { fill: var(--series-1); opacity: .10; }
.viz .crosshair { stroke: var(--ink-3); stroke-width: 1; pointer-events: none; }
.viz .hit { fill: transparent; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 3; display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .35rem .55rem; font-size: .78rem; color: var(--ink); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .78rem; color: var(--ink-2); margin: .4rem 0 .2rem; }
.legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -2px; }
.legend .key.s1 { background: var(--series-1); }
.legend .key.s2 { background: var(--series-2); }

/* login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(100%, 380px); display: grid; gap: .75rem; }
label { display: grid; gap: .25rem; font-size: .85rem; color: var(--ink-2); }
input {
  font: inherit; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* ---- nav, admin, range controls (added with the admin/register release) ---- */
.topbar-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
a.brand { color: var(--ink); }
.mainnav { display: flex; gap: .15rem; }
.mainnav a { padding: .35rem .7rem; border-radius: 9999px; color: var(--ink-2); font-weight: 500; font-size: .9rem; }
.mainnav a:hover { background: var(--surface-2); color: var(--ink); }
.mainnav a.active { background: var(--ink); color: var(--bg); }
.select-wrap select {
  font: inherit; font-size: .85rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: 9999px; padding: .35rem 1.8rem .35rem .8rem; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
  max-width: 46vw; text-overflow: ellipsis;
}
.select-wrap select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 759px) {
  .topbar { flex-wrap: wrap; row-gap: .4rem; }
  .topbar-left { width: 100%; justify-content: space-between; }
  .topnav { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .mainnav a { padding: .3rem .55rem; font-size: .85rem; }
}
.row-between.wrap { flex-wrap: wrap; }
.row-between.gap { gap: 1rem; }
.flash { background: var(--accent-soft); color: var(--ink); border-left: 3px solid var(--accent); padding: .5rem .85rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.keyform { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.keyform input { min-width: 14ch; max-width: 26ch; padding: .4rem .6rem; }
.small-btn { padding: .35rem .8rem; font-size: .85rem; }
.inline-label { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-2); }
.inline-label input { width: 7ch; padding: .4rem .6rem; }
button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
.range-controls { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.chip { font: inherit; font-size: .8rem; padding: .25rem .65rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.range-controls input[type="month"] { font: inherit; font-size: .8rem; padding: .2rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.viz .brush { fill: var(--accent); opacity: .18; pointer-events: none; }
.viz .hit { cursor: crosshair; }
a.lens-link { color: var(--ink); font-weight: 500; }

/* ---- nav width + narrative ---- */
.topbar { padding-left: 0; padding-right: 0; }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (max-width: 759px) { .topbar-inner { flex-wrap: wrap; row-gap: .4rem; } }
.narrative p { margin: 0 0 .6rem; }
.narrative p:first-child { font-weight: 500; }
details.about { margin: .25rem 0 .5rem; }
details.about summary { cursor: pointer; font-size: .85rem; color: var(--ink-2); }
details.about p { margin: .4rem 0 0; font-size: .9rem; }
/* header must be a block so .topbar-inner takes the viewport width, not its content's min-width */
.topbar { display: block; }
.topbar-inner, .topbar-left, .topnav, .mainnav { min-width: 0; }
@media (max-width: 759px) {
  .topbar-left, .topnav { width: 100%; }
  .select-wrap select { max-width: 40vw; }
}

/* ---- smaller pills, wrap on desktop; header never widens the page; arithmetic table ---- */
.pill { font-size: .8rem; padding: .3rem .7rem; }
@media (min-width: 760px) { .pills { flex-wrap: wrap; overflow: visible; } }
.topbar { overflow: visible; }   /* body clips horizontal overflow; the avatar dropdown must escape the bar */
@media (max-width: 759px) {
  .topbar-left { flex-wrap: wrap; row-gap: .25rem; }
  .mainnav a { padding: .25rem .5rem; font-size: .8rem; }
  .topnav { gap: 0; }
}
table.arith td.mono { white-space: normal; word-break: break-word; }
table.arith td:first-child { white-space: nowrap; font-weight: 500; }
@media (max-width: 759px) { table.arith td.mono { white-space: nowrap; } #watch td:first-child { min-width: 16ch; } }

/* ---- collapsible cards, source links ---- */
details.card > summary { font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "▸"; color: var(--ink-3); font-size: .9rem; transition: transform .15s; }
details.card[open] > summary::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: .6rem; }
a.src-link { color: var(--accent-strong); font-weight: 500; }
#follows-text { margin: .25rem 0 .25rem; }

/* ---- ideology tabs (rectangular) + asset pills (coloured) + common-register statements ---- */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: .25rem 0 .1rem; }
.tab { font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; padding: .4rem .8rem; border-radius: 6px;
       border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); }
.tab:hover { border-color: var(--accent); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 759px) { .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tab { white-space: nowrap; flex: 0 0 auto; } }
.pills { padding-top: .1rem; }
.metric.stmt .value { font-size: 1rem; font-weight: 600; line-height: 1.35; }

.pos { color: var(--buy); font-weight: 500; }
.neg { color: var(--sell); font-weight: 500; }

/* ---- ticker search, stock card, explain, prompt editor ---- */
.ticker-form { display: flex; gap: .35rem; align-items: center; flex: 0 0 auto; }
.ticker-form input { font: inherit; font-size: .8rem; padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--surface); color: var(--ink); width: 20ch; }
.explain { margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.explain h3 { font-size: .95rem; margin: .6rem 0 .2rem; }
.explain ul { margin: .2rem 0 .6rem 1.2rem; padding: 0; }
.explain pre.prompt { white-space: pre-wrap; font-size: .75rem; color: var(--ink-2); background: var(--surface-2); padding: .6rem; border-radius: var(--radius-sm); max-height: 28rem; overflow: auto; }
.prompt-form textarea { width: 100%; font: .82rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); resize: vertical; }
.inline-label select { font: inherit; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }

/* ---- user menu (avatar + dropdown) ---------------------------------------- */
.usermenu { position: relative; margin-left: .25rem; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1;
  border: 2px solid transparent; cursor: pointer; padding: 0; font-family: inherit;
}
button.avatar:hover, .usermenu.open > button.avatar { border-color: var(--ink); }
button.avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar-lg { width: 40px; height: 40px; font-size: 1.05rem; cursor: default; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: .4rem; display: grid; gap: .1rem;
}
.menu-head { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem .6rem; }
.menu-who { display: grid; line-height: 1.25; min-width: 0; }
.menu-who strong { overflow: hidden; text-overflow: ellipsis; }
.menu-sep { height: 1px; background: var(--border); margin: .25rem 0; }
.menu-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--ink); font: inherit; font-size: .92rem;
  background: transparent; border: 0; cursor: pointer; text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); outline: none; }
.menu-item.active { background: var(--accent-soft); }
.menu-ico { width: 1.3em; text-align: center; color: var(--ink-2); font-size: .95em; }
.menu-end { margin-left: auto; color: var(--ink-2); font-size: .8rem; }
.menu form { display: contents; }

/* ---- account / users ----------------------------------------------------- */
.page.narrow { max-width: 640px; }
.form-grid { display: grid; gap: .65rem; max-width: 420px; }
.flash.error { border-left-color: var(--sell); color: var(--sell); background: var(--sell-soft); }
.flash code { font-size: 1rem; user-select: all; }
.small-btn.danger { color: var(--sell); }
.small-btn.danger:hover { background: var(--sell-soft); }
.keyform .inline-label { gap: .35rem; }

.menu-foot { padding: .45rem .6rem .2rem; border-top: 1px solid var(--border); margin-top: .2rem; font-size: .75rem; text-align: right; }
.menu[hidden] { display: none; }   /* .menu sets display:grid, which would otherwise beat the hidden attribute */

/* ---- ticker autocomplete ------------------------------------------------- */
.ticker-form { position: relative; }
.suggest {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: .3rem; list-style: none;
  min-width: 300px; max-width: min(92vw, 420px); max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.suggest li { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: baseline; padding: .4rem .55rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .85rem; }
.suggest li[aria-selected="true"] { background: var(--surface-2); }
.suggest .sym { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--ink); }
.suggest .name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .meta { grid-column: 2; }

/* ---- debug page ----------------------------------------------------------- */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem 1.5rem; font-size: .9rem; }
.kv > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px dashed var(--border); padding: .3rem 0; min-width: 0; }
.kv > div > span { color: var(--ink-2); flex: 0 0 auto; }
.kv > div > strong { text-align: right; overflow-wrap: anywhere; }
.plain-list { margin: 0; padding-left: 1.2rem; }
.error .tag { vertical-align: middle; margin-left: .3rem; }