/* ==========================================================================
   NOVENTRA PORTFÖY — app.css
   The panel at portfoy.noventra.dev.

   The token block is the marketing site's, unchanged, so the two read as one
   family. What is added here is what a dense data panel needs and a marketing
   page does not: tabular figures, a profit/loss colour pair that survives both
   themes, hairline table rows, and a sticky header.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Neutral ramp — shared with noventra.dev */
  --n-1000: #08080a;
  --n-950: #0c0d0f;
  --n-900: #101113;
  --n-850: #16171a;
  --n-800: #1c1e21;
  --n-700: #26282c;

  --w-100: #f5f6f7;
  --w-70: #b4b8bf;
  --w-50: #8b8f98;
  --w-35: #787d89;

  --brand: #ff5a1f;
  --brand-deep: #b23608;

  /* Semantic — DARK */
  --bg: var(--n-1000);
  --bg-raised: rgba(255, 255, 255, 0.022);
  --bg-card: var(--n-950);
  --bg-solid: var(--n-900);
  --bg-inset: #050506;
  --bg-hover: rgba(255, 255, 255, 0.035);

  --fg: var(--w-100);
  --fg-muted: var(--w-50);
  --fg-faint: var(--w-35);

  --line: rgba(255, 255, 255, 0.07);
  --line-soft: rgba(255, 255, 255, 0.045);
  --line-strong: rgba(255, 255, 255, 0.13);

  --accent: var(--brand);
  --accent-fg: #0b0b0d;
  --accent-wash: rgba(255, 90, 31, 0.1);
  --accent-line: rgba(255, 90, 31, 0.35);

  /* Profit and loss.
     Checked against --bg and --bg-card in this theme: green 7.9:1, red 5.3:1,
     amber 8.1:1 — all clear of the 4.5:1 line. Re-check if you change them.
     Colour is never the only signal: every figure also carries its own sign. */
  --pos: #3fb950;
  --neg: #f85149;
  --pos-wash: rgba(63, 185, 80, 0.12);
  --neg-wash: rgba(248, 81, 73, 0.12);

  --ok: #3fb950;
  --warn: #d29922;
  --warn-wash: rgba(210, 153, 34, 0.12);

  --edge: linear-gradient(to bottom, rgba(255, 255, 255, 0.09), transparent 42%);

  /* Type */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
  --t-h1: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --t-h2: 1.0625rem;
  --t-body: 0.9375rem;
  --t-sm: 0.875rem;
  --t-xs: 0.8125rem;
  --t-label: 0.75rem;

  /* Space */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --shell: 1180px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --topbar-h: 58px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-raised: rgba(9, 9, 11, 0.024);
  --bg-card: #fbfbfc;
  --bg-solid: #f4f4f6;
  --bg-inset: #f7f7f9;
  --bg-hover: rgba(9, 9, 11, 0.035);

  --fg: #0d0e10;
  --fg-muted: #5c6068;
  --fg-faint: #666a73;

  --line: rgba(9, 9, 11, 0.1);
  --line-soft: rgba(9, 9, 11, 0.06);
  --line-strong: rgba(9, 9, 11, 0.18);

  --accent: var(--brand-deep);
  --accent-fg: #ffffff;
  --accent-wash: rgba(178, 54, 8, 0.07);
  --accent-line: rgba(178, 54, 8, 0.3);

  /* On white: green 4.9:1, red 4.8:1, amber 5.6:1. */
  --pos: #1a7f37;
  --neg: #cf222e;
  --pos-wash: rgba(26, 127, 55, 0.1);
  --neg-wash: rgba(207, 34, 46, 0.1);

  --ok: #1a7f37;
  --warn: #7d5805;
  --warn-wash: rgba(125, 88, 5, 0.1);

  --edge: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent 42%);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  min-height: 100dvh;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--accent-fg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.024em; }

/* An author `display` declaration beats the user agent's `[hidden]` rule no
   matter the specificity, so any class that sets display would quietly keep a
   hidden element on screen. This one line is what makes `hidden` mean hidden. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fg); color: var(--bg);
  padding: 0.7rem 1.2rem; font-size: var(--t-sm);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. NUMBERS

   Every figure in this app is monospaced with tabular, lining digits. In a
   column of prices a proportional font makes 111,11 narrower than 888,88, so
   the decimal points drift and the eye cannot scan down the column. This one
   rule does more for legibility than anything else in the file.
   -------------------------------------------------------------------------- */

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.num--pos { color: var(--pos); }
.num--neg { color: var(--neg); }
.num--flat { color: var(--fg-muted); }
.num--lg { font-size: 1.35rem; letter-spacing: -0.03em; }
.num--xl { font-size: var(--t-display); letter-spacing: -0.035em; line-height: 1.05; }
.num--sm { font-size: var(--t-sm); }
.num--muted { color: var(--fg-muted); }

/* A price that has stopped arriving must not look like a live one. */
.num--stale { opacity: 0.55; }

.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------------
   4. SHELL
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; letter-spacing: -0.02em; }
.brand__mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center;
  /* Geist Mono is loaded at 400 and 500 only and font-synthesis-weight is
     none, so 600 would render silently at 500. Ask for what exists. */
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
}
.brand__sub { color: var(--fg-faint); font-weight: 400; }

.topbar__spacer { flex: 1; }

.main { padding-block: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem) 5rem; }

.stack    { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 1.75rem; }
.stack-sm { display: grid; gap: 0.5rem; }
.row      { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.85rem;
}
.sec-head h2 { font-size: var(--t-h2); }

/* --------------------------------------------------------------------------
   5. SURFACES
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

/* The 1px light catch along the top edge. Depth without a shadow. */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 40%;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--edge);
  opacity: 0.5;
  pointer-events: none;
}
.card > * { position: relative; }

.card--flat { background: var(--bg-raised); }
.card--pad-0 { padding: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   6. CONTROLS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.52rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease), opacity 0.16s;
}
.btn:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  background: var(--accent); color: var(--accent-fg);
  border-color: transparent; font-weight: 600;
}
.btn--primary:hover { background: var(--accent); border-color: transparent; filter: brightness(1.08); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--fg); }

.btn--danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.btn--danger:hover { background: var(--neg-wash); border-color: var(--neg); }

.btn--sm { padding: 0.34rem 0.6rem; font-size: var(--t-xs); }
.btn--block { width: 100%; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--fg); }

/* Segmented control — the theme switch and the currency switch.
   A three-way choice is shown as three visible options rather than a cycling
   button, because a cycling button never tells you what the other states are. */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--bg-solid);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-sm) + 2px);
}
.seg__btn {
  padding: 0.3rem 0.62rem;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.seg__btn:hover { color: var(--fg); }
.seg__btn[aria-pressed="true"] { background: var(--bg-card); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }

/* Fields */
.field { display: grid; gap: 0.35rem; }
.field__label { font-size: var(--t-xs); color: var(--fg-muted); font-weight: 500; }
.field__hint { font-size: var(--t-xs); color: var(--fg-faint); }
.field__error { font-size: var(--t-xs); color: var(--neg); }

.input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.input:hover { border-color: var(--line-strong); }
.input:focus { outline: none; border-color: var(--accent-line); background: var(--bg-card); }
.input::placeholder { color: var(--fg-faint); }
.input--num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.input[aria-invalid="true"] { border-color: var(--neg); }

.field-row { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   7. TAGS, DOTS, STATES
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.14rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  white-space: nowrap;
}
.tag--pos { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, transparent); background: var(--pos-wash); }
.tag--neg { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, transparent); background: var(--neg-wash); }
.tag--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-wash); }

.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--fg-faint); flex: none; }
.dot--live { background: var(--ok); }
.dot--stale { background: var(--warn); }
.dot--down { background: var(--neg); }

.notice {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
.notice--warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-wash); color: var(--fg); }
.notice--neg  { border-color: color-mix(in srgb, var(--neg) 35%, transparent);  background: var(--neg-wash);  color: var(--fg); }

.empty {
  display: grid; gap: 0.5rem; justify-items: center; text-align: center;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1rem;
  color: var(--fg-muted);
}
.empty h3 { color: var(--fg); font-size: var(--t-h2); }
.empty p { max-width: 42ch; font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   9. DIALOG
   -------------------------------------------------------------------------- */

dialog.sheet {
  width: min(540px, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  color: var(--fg);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }

.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.sheet__head h2 { font-size: var(--t-h2); }
.sheet__body { padding: 1.25rem; display: grid; gap: 0.9rem; }
.sheet__foot {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-raised);
}

@media (max-width: 560px) {
  dialog.sheet {
    width: 100vw; max-width: 100vw;
    margin: auto auto 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   10. TOAST
   -------------------------------------------------------------------------- */

.toasts {
  position: fixed; left: 50%; bottom: 1.25rem; translate: -50% 0;
  z-index: 60; display: grid; gap: 0.5rem; justify-items: center;
  pointer-events: none;
}
.toast {
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-solid);
  font-size: var(--t-sm);
  animation: toast-in 0.22s var(--ease);
}
.toast--neg { border-color: color-mix(in srgb, var(--neg) 45%, transparent); color: var(--neg); }
@keyframes toast-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* --------------------------------------------------------------------------
   11. MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   12. GATE
   -------------------------------------------------------------------------- */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.gate__card { width: min(380px, 100%); display: grid; gap: 0.9rem; }
.gate__brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; letter-spacing: -0.02em; }
.gate__lead { font-size: var(--t-sm); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   13. TOPLINE — the two-second answer

   One hairline grid, no per-cell borders: the 1px gap IS the rule, which is
   how the marketing site draws its stat blocks.
   -------------------------------------------------------------------------- */

.topline {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}
@media (max-width: 720px) {
  .topline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
}

.topline__cell {
  background: var(--bg);
  padding: clamp(0.9rem, 0.7rem + 0.6vw, 1.3rem) clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
  display: grid;
  gap: 0.15rem;
  align-content: start;
  min-width: 0;
}
.topline__key { font-size: var(--t-xs); color: var(--fg-faint); margin-top: 0.3rem; }

.fn { color: var(--fg-faint); cursor: help; font-size: 0.7em; }

/* --------------------------------------------------------------------------
   14. TOOLBAR
   -------------------------------------------------------------------------- */

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.toolbar__meta {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-xs); color: var(--fg-faint);
}
.sep { color: var(--fg-faint); opacity: 0.5; }

/* The connection indicator is deliberately NOT green. Green means profit
   everywhere else on this page, and a green dot beside a green figure is
   exactly the collision the palette was chosen to avoid. */
.feed { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-xs); }
.feed .dot { background: currentColor; }
.feed--live { color: var(--fg-muted); }
.feed--delayed { color: var(--warn); }
.feed--down { color: var(--neg); }

.input--inline { width: auto; padding: 0.4rem 0.6rem; font-size: var(--t-sm); background: var(--bg-raised); }
.input--mono { font-family: var(--font-mono); }

.topbar__mini { opacity: 0; transition: opacity 0.2s var(--ease); color: var(--fg-muted); }
.topbar.is-stuck .topbar__mini { opacity: 1; }
@media (max-width: 620px) { .topbar__mini { display: none; } }

/* --------------------------------------------------------------------------
   15. TRANSACTION FORM
   -------------------------------------------------------------------------- */

.addbar {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
  margin-bottom: 1rem;
  display: grid;
  gap: 0.85rem;
}
.addbar--edit { border-left: 2px solid var(--accent); }

.addbar__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.field--sym { position: relative; grid-column: span 2; }
@media (max-width: 560px) { .field--sym { grid-column: span 1; } }

.addbar__preview { min-height: 1.2em; }

/* Autocomplete list. The symbol is never typed free-hand: the picked row
   supplies exchange, ticker, currency, name and price scale, so a typo cannot
   reach the ledger at all. */
.combo {
  position: absolute;
  top: calc(100% - 1.25rem);
  left: 0; right: 0;
  z-index: 30;
  margin: 0; padding: 0.25rem;
  list-style: none;
  background: var(--bg-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  max-height: 17rem;
  overflow-y: auto;
}
.combo__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--t-sm);
}
.combo__item:hover, .combo__item[aria-selected="true"] { background: var(--bg-hover); }
.combo__sym { font-family: var(--font-mono); font-weight: 500; }
.combo__meta { font-family: var(--font-mono); font-size: var(--t-label); color: var(--fg-faint); text-align: right; }
.combo__desc {
  grid-column: 1 / -1;
  font-size: var(--t-xs); color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo__empty { padding: 0.5rem; font-size: var(--t-sm); color: var(--fg-faint); }

/* --------------------------------------------------------------------------
   16. POSITION TABLE
   -------------------------------------------------------------------------- */

.ptable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-xs); }

.ptable thead th {
  position: sticky; top: var(--topbar-h); z-index: 4;
  background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--line);
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 400;
  letter-spacing: 0.04em; color: var(--fg-faint);
  padding: 0.45rem 0.7rem; text-align: right; white-space: nowrap;
}
.ptable thead th:first-child { text-align: left; padding-left: 0; }
.ptable thead th:last-child { padding-right: 0; }

.ptable td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  text-align: right;
}
.ptable td:first-child { text-align: left; padding-left: 0; }
.ptable td:last-child { padding-right: 0; }
.ptable tbody tr:hover td { background: var(--bg-hover); }

.ptable tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding-top: 0.7rem;
  color: var(--fg-muted);
}

.ptable__sort { font: inherit; color: inherit; letter-spacing: inherit; }
.ptable__sort:hover { color: var(--fg); }

.pos__btn { display: flex; align-items: center; gap: 0.55rem; text-align: left; width: 100%; }
.mark { width: 3px; align-self: stretch; min-height: 2.1rem; border-radius: 2px; background: var(--tint, var(--fg-faint)); flex: none; }
.pos__name { display: grid; gap: 0.1rem; min-width: 0; }
.pos__ticker { font-family: var(--font-mono); font-weight: 500; color: var(--fg); }
.pos__ticker span { font-family: var(--font); font-weight: 400; color: var(--fg-faint); font-size: var(--t-label); margin-left: 0.45rem; }
.pos__hold { font-family: var(--font-mono); font-size: var(--t-label); color: var(--fg-faint); }
.pos__sub { display: block; font-size: var(--t-label); color: var(--fg-faint); margin-top: 0.1rem; }

.pos-detail td { background: var(--bg-card); box-shadow: inset 0 1px 0 var(--line-soft); padding: 1rem 0 1.2rem; }
.pos-detail__grid {
  display: grid; gap: 0.6rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  margin-bottom: 1rem;
}
.kv { display: grid; gap: 0.1rem; }
.kv__k { font-size: var(--t-label); color: var(--fg-faint); }
.kv__v { font-family: var(--font-mono); font-size: var(--t-sm); }

.txlist { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.txlist th { text-align: right; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 400; color: var(--fg-faint); padding: 0.3rem 0.6rem; }
.txlist th:first-child, .txlist td:first-child { text-align: left; padding-left: 0; }
.txlist td { text-align: right; padding: 0.35rem 0.6rem; border-top: 1px solid var(--line-soft); }
.txlist td:last-child, .txlist th:last-child { padding-right: 0; }

/* Below 760px the table stops being a table: each row becomes a two-column
   grid. A horizontally scrolling table on a phone is a table nobody reads. */
@media (max-width: 760px) {
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tfoot, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable tr { border-bottom: 1px solid var(--line-soft); padding-block: 0.6rem; }
  .ptable td { border: 0; padding: 0; text-align: right; }
  .ptable td[data-col="pos"] { text-align: left; }
  .ptable tr.pos-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
  }
  .ptable td[data-col="last"], .ptable td[data-col="weight"] { display: none; }
  .ptable td[data-col="value"] { font-size: var(--t-sm); }
  .ptable td[data-col="day"] { display: none; }
  .ptable tfoot tr { display: flex; justify-content: space-between; padding-top: 0.7rem; }
}

/* --------------------------------------------------------------------------
   17. DISCLOSURES, FOOTLINE
   -------------------------------------------------------------------------- */

.disclose { border-top: 1px solid var(--line-soft); margin-top: 1.5rem; }
.disclose > summary {
  cursor: pointer; list-style: none;
  padding: 0.8rem 0;
  font-size: var(--t-sm); color: var(--fg-muted);
  display: flex; align-items: center; gap: 0.5rem;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::after {
  content: "+"; margin-left: auto;
  font-family: var(--font-mono); color: var(--fg-faint);
}
.disclose[open] > summary::after { content: "−"; }
.disclose > summary:hover { color: var(--fg); }

.row--watchadd { position: relative; margin: 0.6rem 0 1rem; }
.row--watchadd .input { flex: 1; }

.footline {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  color: var(--fg-faint);
  line-height: 1.7;
}

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0.4rem 0; }

.acc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}

/* A field the owner should look at twice: the exchange rate on a backdated
   transaction is prefilled with today's, which is almost certainly wrong. */
.input--warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.input--warn:focus { border-color: var(--warn); }

/* --------------------------------------------------------------------------
   18. NARROW SCREENS

   The panel is checked on a phone every morning, so this is the baseline, not
   an afterthought. Three things break first at 375px and all three are fixed
   here: the headline figure outgrows the column, the summary grid leaves a
   dead cell, and the value column pushes past the right edge.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* One number per row beats three cramped columns; the lead cell keeps its
     width so the total never has to shrink to fit beside something else. */
  .topline { grid-template-columns: 1fr 1fr; }
  .topline__cell--lead { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .topline { grid-template-columns: 1fr; }
  /* The total is the one thing that must never be cut off. At this width the
     clamp's upper bound is wider than the column, so cap it outright. */
  .num--xl { font-size: clamp(1.6rem, 1.1rem + 3.6vw, 2.1rem); }
  .num--lg { font-size: 1.2rem; }
  .brand__sub { display: none; }
  .toolbar { gap: 0.5rem; }
  .toolbar__meta { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  /* Explicit areas: the name spans both rows on the left, value sits top
     right and profit under it. Letting the cells flow instead puts the
     profit under the name, where it reads as part of the instrument. */
  .ptable tr.pos-row {
    grid-template-areas: "pos value" "pos pl";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .ptable td[data-col="pos"] { grid-area: pos; align-self: center; min-width: 0; }
  .ptable td[data-col="value"] { grid-area: value; }
  .ptable td[data-col="pl"] { grid-area: pl; font-size: var(--t-xs); }

  /* Without this the instrument name and the holding line, both nowrap, keep
     the first column wide and shove the value off the screen. */
  .pos__ticker, .pos__hold {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
  }
  .pos__ticker span { display: inline; }

  .pos-detail td { padding-inline: 0; }
  .txlist { font-size: var(--t-label); }
  .txlist th:nth-child(5), .txlist td:nth-child(5),
  .txlist th:nth-child(6), .txlist td:nth-child(6) { display: none; }
}