/* ==========================================================================
   v12 building blocks (dev/mockups/redesign/v12.html, docs/REDESIGN-PLAN.md
   section 4). The foundation step adds them; the views move onto them one by
   one (plan section 5, steps 3-6), so until then most are unused.

   - .desk: the raised panel at the top of a summary screen (Portfolio, an
     account page, Analytics, Planner). Since the new look (2026-10-17) the
     top bar and the desk are ONE card, inset --frame (12px) from the
     viewport on every side on a computer, like /auth/ (edge to edge on a
     phone or tablet, --frame 0 below 881px): the bar is its top (css/layout.css),
     the desk its bottom, lit along the top edge and lifted by a long shadow.
     It is as tall as its content, not the first screen.
   - .win: a window under the desk, recessed into the page (darker than the
     desk, a hairline, no lit edge) and set back by the page gutter, so the
     desk reads as lifted above it. .win--quiet is the same colour.
   - .tile: a step up inside a desk or window.
   - .pill: a calm state label (sync, demo, read-only, limits) - never a
     pop-up.
   - .vbar: a thin progress bar (a limit, a challenge).
   - .wrow: a label/value row with a hairline above it.
   - .acc-dot: a lead-colour swatch.
   ========================================================================== */

/* Concentric corners: the desk 28, a window under it 22, a tile inside a
   window 12. */
:root {
  --r-desk: 28px;
  --r-window: 22px;
  --r-tile: 12px;
  --r-field: 12px;
  /* The card's gap to the viewport on a computer: the same as /auth/
     (auth.css pads the page max(12px, the safe area)); 0 below 881px. */
  --frame: 12px;
  /* The desk is raised: a hairline on three sides (left, right, bottom - the
     top is the seam where the bar meets the desk, and a line there would cut
     the card in two) and a long soft shadow. The lit top edge belongs to the
     bar above it. */
  --desk-edge: -1px 0 0 0 rgba(255, 255, 255, 0.06), 1px 0 0 0 rgba(255, 255, 255, 0.06), 0 1px 0 0 rgba(255, 255, 255, 0.06);
  --desk-shadow: var(--desk-edge), 0 28px 60px -18px rgba(0, 0, 0, 0.9);
  /* A window is recessed by its fill alone: no ring (the operator, 26.10). Light too: its windows (#f4f4f6) stay clear of the canvas (#e9e9ed) by fill. */
  --window-edge: none;
  /* The round glass buttons and capsules in the top bar. */
  --tool-bg: rgba(255, 255, 255, 0.07);
  --tool-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* The bar above the desk: the same edge on its top and sides, none along
     the bottom (a bar's popovers must not be clipped, so no clip-path). */
  --bar-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -1px 0 rgba(255, 255, 255, 0.06), -1px 0 0 rgba(255, 255, 255, 0.06), 1px 0 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] {
  --desk-edge: -1px 0 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.05);
  --desk-shadow: var(--desk-edge), 0 24px 50px -20px rgba(16, 22, 36, 0.35);
  --window-edge: none;
  --tool-bg: rgba(0, 0, 0, 0.045);
  --tool-edge: none;
  --bar-edge: 0 -1px 0 rgba(0, 0, 0, 0.05), -1px 0 0 rgba(0, 0, 0, 0.05), 1px 0 0 rgba(0, 0, 0, 0.05);
}

/* Phone and tablet (the operator 21.10, "a PC app on a phone"): the card is
   not inset - a 12px frame round it read as a second bezel inside the
   phone's own. The bar and the desk run edge to edge, the desk keeps its
   bottom corners, and the windows' corners step down with their padding. */
@media (max-width: 880px) {
  :root {
    --frame: 0px;
    --r-desk: 22px;
  }
}

@media (max-width: 560px) {
  :root {
    --r-window: 18px;
  }
}

/* The bottom half of the card: the top bar above it has the top corners. */
.desk {
  background: var(--desk);
  border-radius: 0 0 var(--r-desk) var(--r-desk);
  box-shadow: var(--desk-shadow);
  padding: 18px 22px 22px;
  position: relative;
  color: var(--text-1);
}

.win {
  background: var(--window);
  border-radius: var(--r-window);
  box-shadow: var(--window-edge);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* A phone: smaller windows, more of them on a screen (the operator 21.10). */
@media (max-width: 560px) {
  .win {
    padding: 14px 16px;
  }
}

.win--quiet {
  background: var(--window-quiet);
}

.win__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.win__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.win__note {
  font-size: 13px;
  color: var(--text-2);
}

.tile {
  background: var(--tile);
  border-radius: var(--r-tile);
  padding: 14px 16px;
  position: relative;
}

/* A window is recessed, so a tile in it steps up from the window's colour (in
   light --tile is the window's own colour). */
.win .tile {
  background: var(--win-tile);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tile);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}

.pill b {
  color: var(--text-1);
  font-weight: 600;
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.pill--gain { color: var(--gain); }
.pill--loss { color: var(--loss); }
.pill--warn { color: var(--warn); }
.pill--open { color: var(--open); }

.vbar {
  height: 4px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}

.vbar > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--text-2);
}

.vbar--warn > i { background: var(--warn); }
.vbar--loss > i { background: var(--loss); }
.vbar--gain > i { background: var(--gain); }

.wrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.wrow__sub {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

/* Lead-colour swatch (Settings > Appearance). */
.acc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.acc-dot--seaglass { background: var(--sw-seaglass); }
.acc-dot--heather { background: var(--sw-heather); }
.acc-dot--champagne { background: var(--sw-champagne); }
.acc-dot--platinum { background: var(--sw-platinum); }
.acc-dot--cobalt { background: var(--sw-cobalt); }
.acc-dot--lagoon { background: var(--sw-lagoon); }
.acc-dot--orchid { background: var(--sw-orchid); }
.acc-dot--rose { background: var(--sw-rose); }
.acc-dot--copper { background: var(--sw-copper); }
.acc-dot--slate { background: var(--sw-slate); }

/* A Settings row whose control is wider than half the card (the four lead
   colours) drops under its label on a narrow card instead of squeezing. */
.row-between--wrap {
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .desk *,
  .win * {
    transition: none !important;
  }
}

/* ...and on a phone the four lead colours sit two by two, every name in
   sight: the sliding thumb is hidden and the chosen option is filled
   itself (the thumb only slides along one row). */
@media (max-width: 560px) {
  :root .row-between--wrap > .segmented[data-segmented="accent"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: var(--r-field);
  }

  :root .row-between--wrap > .segmented[data-segmented="accent"] [data-segmented-thumb] {
    display: none;
  }

  :root .row-between--wrap > .segmented[data-segmented="accent"] .segmented__option {
    justify-content: center;
    border-radius: 12px;
  }

  :root .row-between--wrap > .segmented[data-segmented="accent"] .segmented__option.is-active {
    background: var(--color-accent-fill);
    color: var(--color-on-accent);
  }
}

/* ==========================================================================
   The desk screens after Portfolio (redesign R6: Analytics, Planner). The
   same look as Portfolio's desk (css/views/portfolio.css, .pf-*), written
   once here for the views that share it: the framed raised desk, the
   display, the lead figure, the figures grid, the tabs under the desk and
   the quiet windows they filter. Each view lays its own desk out in a grid
   of named areas (analytics.css, planner.css).
   ========================================================================== */

.view-container--desk {
  --v-gutter: var(--section-gap);
  padding-top: 0;
}

.vdesk {
  container: vdesk / inline-size;
  /* Out to the container's edge, back in by the frame: the card's width is
     the top bar's. Its look (colour, corners, edge, shadow) is .desk's. */
  margin: 0 calc(var(--v-gutter) * -1 + var(--frame));
  display: flex;
  flex-direction: column;
  padding: 24px 40px 34px;
}

/* The desk's tooltips are sentences: they wrap (one line ran past a
   phone's edge on Portfolio). */
.vdesk [data-tooltip]::after {
  width: max-content;
  max-width: min(260px, 70vw);
  white-space: normal;
  line-height: 1.35;
}

/* ---- The display (decision 5) ---- */
.vdisp {
  min-width: 0;
  max-width: 620px;
}

.vdisp__date {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-1);
}

.vdisp__date:empty {
  display: none;
}

/* Two lines at most, so a long line cannot push the desk about. */
.vdisp__msg {
  margin-top: 2px;
  min-height: calc(2 * 1.2em);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* One slide: nothing rotates, so the box does not keep two lines of room for the next one. */
.vdisp:not(:has(.vdisp__dot)) .vdisp__msg,
.vdisp.pf-disp:not(:has(.vdisp__dot)) .vdisp__msg {
  min-height: 0;
}

.vdisp__msg.is-out {
  opacity: 0;
  transform: translateY(6px);
}

.vdisp__link {
  color: var(--lead);
  text-decoration: none;
}

.vdisp__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.vdisp__k {
  display: inline-block;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--tile);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--text-1);
  vertical-align: 5px;
}

.vdisp__dots {
  display: flex;
  gap: 2px;
  margin-top: 6px;
  margin-left: -4px;
}

.vdisp__dots:empty {
  display: none;
}

/* A 26 x 24 target around a thin bar. */
.vdisp__dot {
  position: relative;
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.vdisp__dot::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 10px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-3) 45%, transparent);
}

.vdisp__dot.is-on::before {
  background: var(--text-1);
}

.vdisp__dot:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: -2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .vdisp__msg {
    transition: none;
  }
}

/* ---- The key figure: one per desk (Analytics, Planner, the account page) ----
   One style for all of them: 56px, weight 500, tracking -0.03em, tabular
   (--fs-figure, --fw-figure, --ls-figure in variables.css), smaller only when
   its column cannot hold it. Portfolio's 104px / 300 hero is the one exception. */
.vlead {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vlead__label {
  font-size: var(--fs-footnote);
  color: var(--text-2);
}

.vlead__figure {
  --fig-max: var(--fs-figure);
  margin-top: 10px;
  font-family: var(--font-family-display);
  font-size: min(var(--fig-max), calc(100cqi / (var(--len, 6) * 0.6 + 0.5)));
  font-weight: var(--fw-figure);
  letter-spacing: var(--ls-figure);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-1);
  white-space: nowrap;
}

.vlead__unit {
  font-size: 0.4em;
  font-weight: var(--fw-figure);
  letter-spacing: 0;
  margin-left: 0.1em;
  color: var(--text-2);
}

.vlead__sub {
  margin-top: 12px;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}

/* ---- Figures: two by two, a name and a caption each ---- */
.vfigs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.vfig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vfig__value {
  font-size: 22px;
  font-weight: var(--fw-value);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* A figure whose sign is its meaning (a streak of wins, the best trade)
   keeps the meaning colour. */
.vfig__value.text-profit { color: var(--color-profit); }
.vfig__value.text-loss { color: var(--color-loss); }
.vlead__figure.text-profit { color: var(--color-profit); }
.vlead__figure.text-loss { color: var(--color-loss); }

.vfig__label {
  font-size: var(--fs-footnote);
  color: var(--text-2);
}

.vfig__cap {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* ---- A chart on the desk ---- */
.vchart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.vchart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
}

.vchart__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.vchart__sub {
  font-size: var(--fs-caption);
  color: var(--text-2);
}

/* The canvas takes what the desk leaves; it is laid over its wrap so its
   pixel size never feeds back into the wrap's. */
.vchart__canvas.chart-card__canvas-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px;
  margin-top: var(--space-3);
}

.vchart__canvas > canvas {
  position: absolute;
  inset: 0;
}

/* ---- Tabs under the desk, and the quiet windows they filter ---- */
.vbelow {
  container: vwins / inline-size;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vtabs {
  display: flex;
  gap: 34px;
  margin: 0 8px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden; /* sideways only (card.css .pill-toggle--scroll) */
  scrollbar-width: none;
}

.vtabs::-webkit-scrollbar {
  display: none;
}

.vtab {
  flex: none;
  min-height: 44px;
  padding: 10px 0 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}

.vtab:hover {
  color: var(--text-1);
}

.vtab.is-active {
  color: var(--text-1);
  box-shadow: inset 0 -2px 0 var(--text-1);
}

.vtab:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
  border-radius: 6px;
}

.vwins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.vwin {
  gap: 0;
  padding: 20px 22px 22px;
  border-radius: var(--r-window);
}

.vwin[hidden] {
  display: none;
}

/* A window that reads best across the row. */
.vwin--wide {
  grid-column: 1 / -1;
}

.vwin .win__head {
  flex-wrap: wrap;
}

.vwin .win__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

@container vwins (max-width: 760px) {
  .vwins {
    grid-template-columns: minmax(0, 1fr);
  }

  .vwin {
    padding: 18px 18px 20px;
  }
}

/* ---- Phone: the card is the top bar and the desk, edge to edge ---- */
@media (max-width: 560px) {
  .view-container--desk {
    --v-gutter: var(--space-4);
  }

  .vdesk {
    padding: 8px 16px 16px;
  }

  .vtabs {
    gap: 24px;
    margin: 0 4px;
  }

  /* The windows a size down, as Portfolio's (the operator 21.10). */
  .vwins {
    gap: var(--space-3);
  }

  .vwin {
    padding: 14px 16px;
  }

  .vwin .win__title {
    font-size: 14px;
  }
}

@container vdesk (max-width: 640px) {
  .vdisp {
    max-width: none;
  }

  .vdisp__date {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
  }

  .vdisp__msg {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-1);
  }

  .vdisp__k {
    vertical-align: 2px;
  }

  .vlead__figure {
    --fig-max: 40px;
  }

  .vfig__value {
    font-size: 16px;
  }

  .vchart__canvas.chart-card__canvas-wrap {
    min-height: 176px;
  }
}