/* ==========================================================================
   The public site's look from the owner's design guide (9 October 2026):
   obsidian ground, midnight surfaces, one electric cyan accent, a restrained
   lilac for the grid. Loaded by the public shell only (partials/shell-top.php),
   after theme.css and app.css, so the admin, which shares those two files,
   never sees it. It redefines the tokens for the public pages and styles the
   components built that day: the homepage opening, the fact rows, the
   performance charts, the start-date selector, the phone trade cards and the
   compact positions.
   ========================================================================== */
:root {
  --background: #0D1117;
  --card: #0B1A2A;
  --popover: #10243A;
  --primary: #67D4F5;
  --primary-foreground: #08131C;
  --secondary: #13283D;
  --muted: #13283D;
  --muted-foreground: #9AA7B8;
  --accent: #13283D;
  --border: #1F2B3B;
  --input: #2A3A4F;
  --ring: #67D4F5;
  --sidebar: #0D1117;
  --sidebar-primary: #67D4F5;
  --sidebar-primary-foreground: #08131C;
  --sidebar-accent: #13283D;
  --sidebar-border: #1F2B3B;

  --g-cyan: #67D4F5;
  --g-ink: #08131C;
  --g-hold: #8B95A7;
  --g-lilac: #B9A6FF;
  --g-cash: #33415A;
  --g-line-soft: #172232;
  --g-dim: #6F7C8E;
  --g-pos: #67D4F5;
  --g-neg: #8B95A7;
  --g-white: #E6EAF0;

  /* the site's gain colour is the cyan too (owner, 9 October 2026: "The Green profit numbers should be a Cyan
     version, and the loss ones in a muted version so theme matches") */
  --chart-2: #67D4F5;
}

/* the name pill keeps a light face on the cyan primary */
.market-pill.is-brand { background: #F2F5F9; color: #0D1117; }

/* --- shared pieces ------------------------------------------------------ */
.g-eyebrow {
  color: var(--g-cyan);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.g-dim { color: var(--g-dim); }
.g-note { color: var(--g-dim); font-size: 0.78rem; }
.g-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.g-legend i { display: inline-block; width: 0.875rem; height: 0.375rem; border-radius: 2px; margin-right: 0.375rem; vertical-align: 0.125rem; }
.g-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.375rem 1rem; align-items: baseline; }
.g-title h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.g-title h3 small { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }
.g-block { display: grid; gap: 0.75rem; }
.g-switch { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: 999px; width: fit-content; max-width: 100%; }
.g-switch button { font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); background: none; border: 0; border-radius: 999px; padding: 0.4rem 0.95rem; cursor: pointer; min-height: 2.25rem; }
.g-switch button[aria-pressed="true"] { background: var(--g-cyan); color: var(--g-ink); }
.g-chart { width: 100%; display: block; }
.g-chart text { font-family: inherit; }
.g-read { color: var(--muted-foreground); font-size: 0.8125rem; min-height: 1.25rem; font-variant-numeric: tabular-nums; }
.g-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.625rem 1.125rem; margin: 0; }
.g-stats > div { display: grid; gap: 0.125rem; }
.g-stats .k { color: var(--muted-foreground); font-size: 0.78rem; }
.g-stats .v { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* --- 1 the homepage opening --------------------------------------------- */
.g-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.25rem, 4vw, 2.75rem); align-items: center; margin-bottom: 1.5rem; }
.g-hero-copy { display: grid; gap: 1rem; }
.g-hero h1 { font-size: clamp(1.75rem, 4.6vw, 2.625rem); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.g-hero h1 span { color: var(--g-cyan); display: block; }
.g-hero-copy > p { color: var(--muted-foreground); font-size: 1rem; max-width: 46ch; margin: 0; }
.g-hero .btn { height: 2.75rem; padding-inline: 1.125rem; border-radius: 0.625rem; font-size: 0.9375rem; }
.g-hero-price { color: var(--g-dim); font-size: 0.8125rem; }
.g-hero-price a { color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
.g-markets { background: var(--card); border-radius: 1rem; padding: clamp(1rem, 2.6vw, 1.625rem); }
.g-market { display: grid; grid-template-columns: auto 1fr auto; gap: 0.875rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.g-market:first-of-type { padding-top: 0.875rem; }
.g-market:hover h3 { color: var(--g-cyan); }
.g-disc { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--background); display: grid; place-items: center; color: var(--g-cyan); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.g-market h3 { font-size: 1.125rem; font-weight: 500; margin: 0; }
.g-market small { color: var(--muted-foreground); font-size: 0.8125rem; }
.g-market .fig { text-align: right; font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.g-market .fig b { display: block; color: var(--foreground); font-size: 1.0625rem; font-weight: 500; }
.g-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.125rem; padding-top: 0.875rem; font-size: 0.8125rem; }
.g-chips a { color: var(--muted-foreground); text-decoration: none; }
.g-chips a:hover { color: var(--g-cyan); }

/* --- 2 the four facts ---------------------------------------------------- */
.g-facts-wrap { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.g-facts-head { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: baseline; font-size: 0.9375rem; font-weight: 500; }
.g-facts-head .g-vs { color: var(--muted-foreground); font-weight: 400; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.g-facts-head .g-vs b { color: var(--foreground); font-weight: 500; }
.g-facts-head a { margin-left: auto; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; text-decoration: none; }
.g-facts-head a:hover { color: var(--g-cyan); }
.g-facts-detail { color: var(--muted-foreground); font-size: 0.8125rem; margin: -0.25rem 0 0; font-variant-numeric: tabular-nums; }
.g-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 0.75rem; }
.g-fact { background: var(--card); border-radius: 0.875rem; padding: 1rem 1.125rem; display: grid; gap: 0.25rem; align-content: start; }
.g-fact .label { color: var(--muted-foreground); font-size: 0.8125rem; }
.g-fact .value { font-size: 1.875rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.g-fact .sub { color: var(--muted-foreground); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* --- 3 to 8 the performance charts -------------------------------------- */
.g-insights { display: grid; gap: 1.25rem; }
.g-panel { background: var(--background); border: 1px solid var(--border); border-radius: 1rem; padding: clamp(1rem, 3vw, 1.75rem); display: grid; gap: 0.75rem; }
.g-panel.is-bare { border: 0; padding: 0; background: none; }
.g-two { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
@container content (min-width: 52rem) { .g-two { grid-template-columns: 1.55fr 1fr; } }
.g-risk { background: var(--card); border-radius: 1rem; padding: clamp(1rem, 2.6vw, 1.625rem); display: grid; gap: 0.5rem; align-content: start; }
.g-risk .big { font-size: clamp(2.5rem, 7vw, 3.625rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.g-risk hr { height: 1px; background: var(--border); border: 0; margin: 0.25rem 0; width: 100%; }
.g-kv { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.g-kv b { color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
.g-scroll { overflow-x: auto; }
table.g-heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 38.75rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
table.g-heat th { color: var(--muted-foreground); font-weight: 400; padding: 2px 4px; text-align: center; }
table.g-heat th.y { text-align: left; color: var(--foreground); font-weight: 500; }
table.g-heat td { text-align: center; padding: 0.4375rem 2px; border-radius: 6px; color: var(--foreground); }
table.g-heat td.empty { background: var(--g-line-soft); color: var(--g-dim); }
table.g-heat td.mtd { outline: 1px dashed var(--muted-foreground); outline-offset: -2px; }
table.g-heat td.tot { background: none; font-weight: 500; }
table.g-heat td.tot.pos { color: var(--g-pos); }
table.g-heat td.tot.neg { color: var(--g-neg); }

/* --- 7 the start date in the simulator ---------------------------------- */
.sim-start { display: grid; gap: 0.375rem; margin-top: 1rem; }
.sim-start-row { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: baseline; }
.sim-start output { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.sim-start input[type="range"] { width: 100%; accent-color: var(--g-cyan); }
.sim-range { accent-color: var(--g-cyan); }

/* --- 9 the trade record: filters, and four fields first on a phone ------- */
.g-filters { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.g-filters button { font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; min-height: 2rem; }
.g-filters button[aria-pressed="true"] { background: var(--g-cyan); color: var(--g-ink); border-color: transparent; font-weight: 500; }
table.data.trades.record tr[hidden], .g-tcard[hidden] { display: none; }
.g-tcards { display: none; }
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) {
  [data-record] table.data.trades.record { display: none; }
  .g-tcards { display: grid; gap: 0.5rem; }
}
.g-tcard { background: var(--card); border-radius: 0.75rem; padding: 0.75rem 0.875rem; display: grid; gap: 0.375rem; border-left: 3px solid var(--border); }
.g-tcard.is-open { border-left-color: var(--g-cyan); }
.g-tcard.is-win { border-left-color: color-mix(in oklab, var(--g-pos) 55%, transparent); }
.g-tcard.is-loss { border-left-color: color-mix(in oklab, var(--g-neg) 55%, transparent); }
.g-tcard .badge-long { background: color-mix(in oklab, var(--chart-2) 20%, transparent); color: var(--chart-2); border-color: color-mix(in oklab, var(--chart-2) 38%, transparent); }
.g-tline { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.g-tno { color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; margin-right: 0.25rem; }
.g-tres { font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.g-tres small, .g-tpx small { font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }
.g-tpx { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.g-tpx i { color: var(--g-dim); font-style: normal; }
.g-tsub { color: var(--muted-foreground); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* --- 10 the compact positions ------------------------------------------- */
.g-positions { background: var(--card); border-radius: 1rem; padding: 0.375rem clamp(1rem, 2.6vw, 1.625rem); margin-bottom: 1.25rem; }
.g-position { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0; color: inherit; text-decoration: none; }
.g-position + .g-position { border-top: 1px solid var(--border); }
.g-position b { font-weight: 500; }
.g-position .sub { color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.g-position .res { font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.g-pill { display: inline-flex; align-items: center; border: 1px solid color-mix(in oklab, var(--g-cyan) 45%, transparent); color: var(--g-cyan); border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }

/* The balance simulator in the guide's two series colours: the balance in cyan, holding in grey. */
.sim-plot .line { stroke: var(--g-cyan); }
.sim-plot .line.s2 { stroke: var(--g-hold); }
.sim-plot .fill-top, .sim-plot .fill-bottom { stop-color: var(--g-cyan); }
.sim-dot { background: var(--g-cyan); }
.sim-dot.s2 { background: var(--g-hold); }
.sim-chart .chart-legend .key.s1 { color: var(--g-cyan); }
.sim-chart .chart-legend .key.s2 { color: var(--g-hold); }

/* ==========================================================================
   One accent (owner, 9 October 2026): gains and main lines in the cyan, losses
   muted, negative bars and second lines in white, further lines dotted. The
   red stays for errors and warnings only.
   ========================================================================== */
.neg { color: var(--g-neg); }
.sym.down { color: var(--g-neg); border-color: color-mix(in oklab, var(--g-neg) 35%, transparent); }
svg.spark.down path { stroke: var(--g-neg); }

/* lines: the main one cyan, the second white, the rest white and dotted */
.chart-plot .line, .chart-plot .line.s1 { stroke: var(--g-cyan); }
.chart-plot .line.s2 { stroke: var(--g-white); }
.chart-plot .line.s3 { stroke: var(--g-white); stroke-dasharray: 2 4; }
.chart-plot .line.s4 { stroke: var(--g-hold); stroke-dasharray: 5 4; }
.chart-plot .line.s5 { stroke: var(--g-hold); stroke-dasharray: 1 4; }
.chart-plot .fill-top, .chart-plot .fill-bottom { stop-color: var(--g-cyan); }
.chart-legend .key.s1 { color: var(--g-cyan); }
.chart-legend .key.s2, .chart-legend .key.s3 { color: var(--g-white); }
.chart-legend .key.s4, .chart-legend .key.s5 { color: var(--g-hold); }
.chart-plot .overlay.avg-exit { stroke: var(--g-white); stroke-dasharray: 5 4; }
.chart-plot .overlay.avg-entry { stroke: var(--g-white); stroke-dasharray: 1 4; }
.chart-legend i.swatch.close { background: var(--g-cyan); }
.chart-legend i.swatch.avg-exit, .chart-legend i.swatch.avg-entry { background: var(--g-white); }
/* the simulator keeps the balance in cyan and holding in grey, as the performance charts do */
.sim-plot .line.s2 { stroke: var(--g-hold); stroke-dasharray: none; }

/* bars: cyan up, white down; the capital line over them white and dotted */
.chart-plot .bar { fill: var(--g-cyan); }
.chart-plot .bar.neg { fill: var(--g-white); }
.stk.won { fill: var(--g-cyan); }
.stk.lost { fill: var(--g-white); opacity: 0.85; }
.chart-legend i.won, .chart-legend i.main { background: var(--g-cyan); }
.chart-legend i.lost { background: var(--g-white); }
.chart-plot .line.capital { stroke: var(--g-white); stroke-width: 1.5; stroke-dasharray: 2 4; }
.g-bar { display: block; height: 6px; border-radius: 999px; background: var(--g-cyan); }
.g-bar.is-neg { background: var(--g-white); }

/* the market in a heading: the guide's outlined cyan pill for both */
.market-pill, .market-pill.is-btc, .market-pill.is-spx {
  background: transparent;
  border-color: color-mix(in oklab, var(--g-cyan) 45%, transparent);
  color: var(--g-cyan);
}

/* --- the trade record in the guide's surfaces ----------------------------- */
table.data .badge-long {
  background: color-mix(in oklab, var(--g-cyan) 14%, transparent);
  color: var(--g-cyan);
  border-color: color-mix(in oklab, var(--g-cyan) 40%, transparent);
}
table.data .badge-short {
  background: transparent;
  color: var(--g-neg);
  border-color: color-mix(in oklab, var(--g-neg) 40%, transparent);
}
table.data .badge-outline, table.data .badge-secondary { background: transparent; border-color: var(--border); color: var(--foreground); }
table.data .badge-secondary { background: var(--secondary); border-color: transparent; }
table.data.trades.record { border-collapse: separate; border-spacing: 0 0.375rem; }
table.data.trades.record thead th { border: 0; color: var(--muted-foreground); font-weight: 400; font-size: 0.8125rem; }
table.data.trades.record tbody td { background: var(--card); border: 0; padding-block: 0.75rem; }
table.data.trades.record tbody td:first-child { border-radius: 0.75rem 0 0 0.75rem; }
table.data.trades.record tbody td:last-child { border-radius: 0 0.75rem 0.75rem 0; }
table.data tr.is-open.is-long td, table.data tr.is-closed.is-win td, table.data tr.is-closed.is-loss td { background: var(--card); }
table.data tr.is-open.is-long td:last-child { box-shadow: inset -3px 0 0 0 var(--g-cyan); }
table.data tr.is-closed.is-win td:last-child { box-shadow: inset -3px 0 0 0 color-mix(in oklab, var(--g-cyan) 45%, transparent); }
table.data tr.is-closed.is-loss td:last-child { box-shadow: inset -3px 0 0 0 color-mix(in oklab, var(--g-neg) 55%, transparent); }
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) {
  table.data.trades tr.is-open.is-long { box-shadow: inset -3px 0 0 0 var(--g-cyan); }
  table.data.trades tr.is-closed.is-win { box-shadow: inset -3px 0 0 0 color-mix(in oklab, var(--g-cyan) 45%, transparent); }
  table.data.trades tr.is-closed.is-loss { box-shadow: inset -3px 0 0 0 color-mix(in oklab, var(--g-neg) 55%, transparent); }
}
.g-tcard.is-win { border-left-color: color-mix(in oklab, var(--g-cyan) 55%, transparent); }
.g-tcard.is-loss { border-left-color: color-mix(in oklab, var(--g-neg) 55%, transparent); }
.g-tcard .badge-long { background: color-mix(in oklab, var(--g-cyan) 14%, transparent); color: var(--g-cyan); border-color: color-mix(in oklab, var(--g-cyan) 40%, transparent); }

/* The record's rows as their own surfaces inside the card, and a closed trade's result in the accent like an open one's. */
table.data.trades.record tbody td,
table.data tr.is-open.is-long td, table.data tr.is-closed.is-win td, table.data tr.is-closed.is-loss td { background: var(--popover); }
table.data.trades.record td.cell-pnl.pos { color: var(--g-cyan); }
table.data.trades.record td.cell-pnl.neg { color: var(--g-neg); }
table.data.trades.record tr.is-closed td { color: var(--foreground); }
table.data.trades.record tr.is-closed td .dim, table.data.trades.record tr.is-closed td .tiny { color: var(--muted-foreground); }
.g-tcard { background: var(--popover); }
/* the capital line's key reads as a dotted line, apart from the white "month down" square */
.chart-legend i.capital { background: none; width: 0.9rem; height: 0; border-top: 2px dotted var(--g-white); border-radius: 0; }

/* --- the Charter: a card a section, the opening line set apart, applications that open on a tap (9 October 2026) --- */
.g-doc-card { margin-bottom: 1rem; }
.g-doc-first { margin-top: 2.5rem; }
.g-doc-card .doc-wide { max-width: 80ch; margin-inline: 0; }
.g-quote { color: var(--g-cyan); font-size: clamp(1.625rem, 4.4vw, 2.5rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; margin: 0.5rem 0 1rem; text-wrap: balance; }
.g-doc-title { color: var(--g-cyan); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0; }
details.g-apply { border: 1px solid var(--border); border-radius: 0.75rem; padding: 0; margin-top: 1.25rem; background: var(--background); }
details.g-apply > summary { list-style: none; cursor: pointer; padding: 0.875rem 1rem; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-weight: 500; color: var(--g-cyan); min-height: 2.75rem; }
details.g-apply > summary::-webkit-details-marker { display: none; }
details.g-apply > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--muted-foreground); }
details.g-apply[open] > summary::after { content: "\2212"; }
details.g-apply > :not(summary) { margin-inline: 1rem; }
details.g-apply > form { padding-bottom: 1rem; }
.g-quote { margin-top: 0; }
/* the charter's list lines carry their own bullet in the text */
.g-doc-card .doc-list { list-style: none; padding-left: 0; }

/* --- the sidebar minimised to icons (9 October 2026; the rules the admin got on 28 September) ------------- */
html.sidebar-collapsed .sidebar { width: var(--sidebar-width-icon); }
html.sidebar-collapsed .sidebar .nav-label,
html.sidebar-collapsed .sidebar .nav-item > span,
html.sidebar-collapsed .sidebar .sidebar-brand .meta,
html.sidebar-collapsed .sidebar .sidebar-balance,
html.sidebar-collapsed .sidebar .sidebar-cta span { display: none; }
html.sidebar-collapsed .sidebar .nav-item,
html.sidebar-collapsed .sidebar .sidebar-brand,
html.sidebar-collapsed .sidebar .sidebar-cta { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
html.sidebar-collapsed .sidebar .sidebar-cta { margin-inline: 0; }
html.sidebar-collapsed .sidebar .nav-group + .nav-group { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--sidebar-border); }
html.sidebar-collapsed .sidebar-header,
html.sidebar-collapsed .sidebar-footer,
html.sidebar-collapsed .sidebar-content { padding-left: 0.375rem; padding-right: 0.375rem; }
html.sidebar-collapsed .sidebar .nav-item svg { flex: none; }
#sidebar-toggle svg { transition: transform 200ms ease; }
html.sidebar-collapsed #sidebar-toggle svg { transform: scaleX(-1); }
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) {
  html.sidebar-collapsed .sidebar { width: var(--sidebar-width); }
}
/* the connected venue in the top bar, where the round mark was */
.g-venue { text-decoration: none; margin-left: auto; }
@media (max-width: 768px), (max-width: 900px) and (pointer: coarse) { .g-venue { display: none; } }
.card-title .g-pill { vertical-align: 0.125rem; margin-right: 0.25rem; }

/* Sign in beside Subscribe at the foot of the menu (9 October 2026) */
.g-cta-row { display: flex; gap: 0.375rem; margin: 0.5rem 0.25rem 0; }
.g-cta-row .sidebar-cta { flex: 1 1 0; margin: 0; padding-inline: 0.5rem; white-space: nowrap; }
.g-cta-signin { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.g-cta-signin:hover { background: var(--accent); filter: none; }
html.sidebar-collapsed .sidebar .g-cta-row { flex-direction: column; margin-inline: 0; }

/* the sign-in page's second card: the benefits and the quick steps (9 October 2026) */
.g-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.9375rem; color: var(--muted-foreground); }
.g-benefits li { padding-left: 1.125rem; position: relative; }
.g-benefits li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--g-cyan); }
.g-benefits b { color: var(--foreground); font-weight: 500; }
.g-benefits a { color: var(--g-cyan); text-decoration: underline; text-underline-offset: 2px; }
.g-quick-steps { margin-top: 0; }

/* The balance growth as a factor over the price chart (9 October 2026): a pale white line on its own scale, its start
   and its end named on it. */
.chart-plot .overlay.growth { stroke: color-mix(in oklab, var(--g-white) 58%, transparent); stroke-width: 1.5; stroke-dasharray: none; fill: none; vector-effect: non-scaling-stroke; }
.chart-legend i.swatch.growth { width: 0.9rem; height: 2px; border-radius: 2px; background: color-mix(in oklab, var(--g-white) 58%, transparent); }
.chart-factor { position: absolute; transform: translateY(-130%); font-size: 0.72rem; font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--g-white) 72%, transparent); background: color-mix(in oklab, var(--card) 80%, transparent); padding: 0 0.25rem; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.chart-factor.is-start { left: 0.25rem; }
.chart-factor.is-end { right: 3.75rem; }

/* the thistle mark beside a card's heading (9 October 2026) */
.g-mark-row { display: flex; align-items: center; gap: 0.875rem; }
.g-thistle { flex: none; display: block; }