/* ══ THE TRADE'S HEAD AS ONE CARD ═══════════════════════════════  rp197, 21 Oct 2026 ══
   Sir, with a picture of it on his own new account: "improve this section in the dashboard". It was the one part
   of the page with no edge of its own: the name, three figures in a sentence and two lines lay on the blurred
   ground, the third figure had no figure ("NO REVIEWS YET"), and an empty account read "0 · £0".

   Now the card family's own sheet (#FAF8F3, 22px, the ring and the drop of hyyryn-dash-round.css), so the head is
   the first card of the page rather than writing on its wall. The portrait stays inside it, standing under the
   cover with a gap (Sir's ruling of 6 Sep 2026, the Facebook Page beside the dashboard). Under the name, where you
   stand, its tone as a dot, and one way on. Under a gold hairline, the three figures as tiles: the card heads'
   navy disc and gold mark, the figure in the display face, its word in the house small caps, and a line on what
   moves it, which on an empty account says what will fill it (empty-state research: a zero is a state to explain,
   with the structure kept and one way on).

   Scoped to `.ov-head--card` (the trade dashboard), and written after every sheet that styles the head; it wins on
   count, never on !important (Mason 05). */

html body .ov-head.ov-head--card { --idc-pad-y: clamp(20px, 1.9vw, 28px); --idc-pad-x: clamp(18px, 2.1vw, 32px); }
html body .ov-head.ov-head--card::after { content: none; display: none; }

/* 1. the card */
html body .ov-head.ov-head--card .ov-id {
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: var(--idc-pad-y) var(--idc-pad-x);
  border-radius: 22px; background-color: #FAF8F3;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.12), inset 0 1px 0 #FFFFFF,
              0 1px 2px rgba(10,22,40,.07), 0 10px 22px -14px rgba(10,22,40,.24), 0 34px 60px -36px rgba(10,22,40,.42);
  display: grid; align-items: center; justify-items: stretch;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "av txt acts" "stats stats stats";
  column-gap: clamp(16px, 2vw, 30px); row-gap: clamp(18px, 1.8vw, 24px);
}
html body .ov-head.ov-head--card .ov-avatar { grid-area: av; margin: 0; align-self: center; width: clamp(92px, 8.6vw, 124px); }
html body .ov-head.ov-head--card .ov-id-t { grid-area: txt; margin: 0; padding: 0; align-self: center; }
html body .ov-head.ov-head--card .ov-acts { grid-area: acts; margin: 0; padding: 0; align-self: center; }

/* 2. the name, where you stand, since when */
html body .ov-head.ov-head--card .ov-name { margin: 0 0 8px; font-size: clamp(25px, 2.3vw, 32px); line-height: 1.12; color: var(--navy, #0A1628); }
html body .ov-head.ov-head--card .ov-state {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
html body .ov-head.ov-head--card .ov-state .ov-desc {
  display: inline; margin: 0; max-width: 60ch;
  font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--ink, #1B2638);
}
html body .ov-head.ov-head--card .ov-state .ov-desc::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px; border-radius: 50%;
  background: #0F5A4F; box-shadow: 0 0 0 3px rgba(15,90,79,.16);
}
html body .ov-head.ov-head--card .ov-state .ov-desc:is([data-tone="todo"], [data-tone="wait"])::before {
  background: #B4842A; box-shadow: 0 0 0 3px rgba(180,132,42,.2);
}
html body .ov-head.ov-head--card .ov-next {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy, #0A1628); text-decoration: none; white-space: nowrap;
  padding: 3px 0; border-bottom: 1px solid rgba(180,132,42,.7);
  transition: color 200ms ease, border-color 200ms ease;
}
@media (max-width: 760px) { html body .ov-head.ov-head--card .ov-next { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body .ov-head.ov-head--card .ov-next::after { content: '\2192'; display: inline-block; margin-left: 7px; transition: translate 200ms cubic-bezier(.16,1,.3,1); }
html body .ov-head.ov-head--card .ov-next:is(:hover, :focus-visible) { color: #83632C; border-color: #83632C; }
html body .ov-head.ov-head--card .ov-next:is(:hover, :focus-visible)::after { translate: 3px 0; }
html body .ov-head.ov-head--card .ov-next[hidden] { display: none; }
html body .ov-head.ov-head--card .ov-since { margin: 12px 0 0; display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: var(--muted, #636976); }
@media (max-width: 760px) { html body .ov-head.ov-head--card .ov-since { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body .ov-head.ov-head--card .ov-since svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .ov-head.ov-head--card .ov-since b { color: var(--navy, #0A1628); }

/* 3. the figures, three tiles under a gold hairline */
html body .ov-head.ov-head--card .ov-id .ov-figs.ov-stats {
  grid-area: stats; list-style: none; margin: 0; padding: clamp(18px, 1.7vw, 22px) 0 0;
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch;
  font-size: inherit; line-height: normal; letter-spacing: 0; text-transform: none; font-weight: 400;
}
html body .ov-head.ov-head--card .ov-id .ov-figs.ov-stats::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(212,169,67,.65), rgba(212,169,67,.18) 55%, rgba(212,169,67,0));
}
html body .ov-head.ov-head--card .ov-stat {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start;
  margin: 0; padding: 2px clamp(14px, 1.8vw, 26px); border-left: 1px solid rgba(10,22,40,.08);
}
html body .ov-head.ov-head--card .ov-stat:first-child { padding-left: 0; border-left: 0; }
html body .ov-head.ov-head--card .ov-stat-i {
  grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1C2A44, #0A1628 70%);
  box-shadow: 0 0 0 4px rgba(212,169,67,.13), 0 6px 14px -8px rgba(10,22,40,.6);
}
html body .ov-head.ov-head--card .ov-stat-i svg { width: 18px; height: 18px; fill: none; stroke: #E2BE6A; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-stat-t {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 0 9px;
  font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted, #636976);
}
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-stat-t b {
  margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: 0;
  color: var(--navy, #0A1628); font-variant-numeric: lining-nums tabular-nums; vertical-align: baseline;
  min-height: 31px; display: inline-flex; align-items: center;
}
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-stat-t .ov-stat-k {
  flex-basis: 100%; order: 2; margin-top: 4px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #636976);
}
@media (max-width: 760px) { html body .ov-head.ov-head--card .ov-id .ov-figs .ov-stat-t .ov-stat-k { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-rate .ov-stars { display: inline-flex; align-items: center; gap: 3px; order: 1; height: 31px; }
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-rate .ov-stars[hidden] { display: none; }
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-rate .ov-stars svg { width: 16px; height: 16px; fill: #D4A943; }
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-rate .ov-stars svg.is-off { fill: rgba(10,22,40,.14); opacity: 1; }
html body .ov-head.ov-head--card .ov-id .ov-figs .ov-rate b { order: 0; }
html body .ov-head.ov-head--card .ov-stat-s {
  grid-column: 2; margin-top: 7px; font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--muted, #636976);
}
html body .ov-head.ov-head--card .ov-stat-s:empty { display: none; }

/* 4. narrower: the buttons under the words; on a phone the tiles as rows */
@media (max-width: 1080px) {
  html body .ov-head.ov-head--card .ov-id { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av txt" "acts acts" "stats stats"; }
  html body .ov-head.ov-head--card .ov-acts { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  html body .ov-head.ov-head--card .ov-id { grid-template-columns: minmax(0, 1fr); grid-template-areas: "av" "txt" "acts" "stats"; justify-items: start; row-gap: 16px; }
  html body .ov-head.ov-head--card .ov-avatar { width: 88px; }
  html body .ov-head.ov-head--card .ov-id .ov-figs.ov-stats { grid-template-columns: minmax(0, 1fr); width: 100%; padding-top: 4px; }
  html body .ov-head.ov-head--card .ov-stat { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(10,22,40,.08); }
  html body .ov-head.ov-head--card .ov-stat:first-child { border-top: 0; }
}

/* 5. arriving: the tiles rise one after another, once, on a first paint with motion */
@media (prefers-reduced-motion: no-preference) {
  html body .ov-head.ov-head--card .ov-stat { animation: idc-rise 620ms cubic-bezier(.16,1,.3,1) both; }
  html body .ov-head.ov-head--card .ov-stat:nth-child(2) { animation-delay: 80ms; }
  html body .ov-head.ov-head--card .ov-stat:nth-child(3) { animation-delay: 160ms; }
}
@keyframes idc-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media print { html body .ov-head.ov-head--card .ov-id { box-shadow: none; border: 1px solid #ccc; } }
@media (forced-colors: active) { html body .ov-head.ov-head--card .ov-id { border: 1px solid CanvasText; } }