/* Petromix · Dashboard header panel
   Scoped under .dh. Responsive to its own width (container queries).

   The supplied dashboard-header.css, with these changes for the app:
   · no Google Fonts @import — Barlow, Barlow Condensed and IBM Plex Mono are
     self-hosted by advisor.css, so the panel looks the same offline;
   · a baseline so the app's own button / heading rules cannot leak in;
   · a LIGHT theme (the design is dark-only): white card, dark text, and the
     yellow, green and red used as TEXT darkened to stay readable on white;
   · the phone layout fits any number of action buttons (the check-in and
     Sample buttons were added): one row while they fit, then New account on
     its own row above the icon buttons. */

.dh {
  --dh-acc: #FFC20E;
  --dh-ink: #121417;
  --dh-card: #17191C;
  --dh-tile: #1E2125;
  --dh-track: #2A2E33;
  --dh-line: rgba(255,255,255,.07);
  --dh-line-2: rgba(255,255,255,.12);
  --dh-text: #FFFFFF;
  --dh-text-2: #B9C0C7;
  --dh-muted: #8F98A2;
  --dh-green: #2FB36B;
  --dh-red: #F04438;
  --dh-amber: #F5A524;
  --dh-font: "Barlow", system-ui, sans-serif;
  --dh-cond: "Barlow Condensed", "Barlow", sans-serif;
  --dh-mono: "IBM Plex Mono", ui-monospace, monospace;

  container-type: inline-size;
  box-sizing: border-box;
  background: var(--dh-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  color: var(--dh-text);
  font-family: var(--dh-font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
  /* baseline: the design was drawn on browser defaults */
  font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left;
}
.dh::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--dh-acc); }
.dh *, .dh *::before, .dh *::after { box-sizing: border-box; }
:where(.dh) :where(button) { font-family: inherit; line-height: normal; letter-spacing: normal; }
.dh h1, .dh p { margin: 0; }
.dh h1 { color: inherit; }
.dh :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.dh-num { font-variant-numeric: tabular-nums; }

/* ---------- Top row ---------- */
.dh-top { padding: 22px 24px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dh-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--dh-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dh-muted); }
.dh-sync { display: inline-flex; align-items: center; gap: 6px; }
.dh-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--dh-green); box-shadow: 0 0 0 3px rgba(47,179,107,.2); }
.dh-sync.is-offline i { background: var(--dh-amber); box-shadow: 0 0 0 3px rgba(245,165,36,.2); }
.dh-hello { margin-top: 6px; font-family: var(--dh-cond); font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -.005em; }
.dh-hello span { color: var(--dh-acc); }
/* v4.249: ", <name>" is one span (.dh-who) so a laptop can hide it; the comma keeps the greeting's colour, only the name is coloured. */
.dh-hello span.dh-who, :root[data-scheme="light"] .dh-hello span.dh-who, .has-hsc #dh .dh-hello span.dh-who { color: inherit; }
.dh-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dh-btn { height: 46px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--dh-line-2); background: transparent; color: var(--dh-text); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .12s, filter .15s; }
.dh-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); }
.dh-btn:active { transform: scale(.97); }
.dh-btn--acc { border: 0; background: var(--dh-acc); color: var(--dh-ink); font-weight: 800; letter-spacing: .01em; }
.dh-btn--acc:hover { background: var(--dh-acc); filter: brightness(1.06); }
.dh-btn svg { flex: none; }

/* ---------- KPI tiles ---------- */
.dh-kpis { padding: 0 24px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dh-tile { position: relative; min-height: 0; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--dh-line); background: var(--dh-tile); color: var(--dh-text); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .12s, background-color .15s; }
.dh-tile:hover { border-color: var(--dh-line-2); background: #22262A; }
.dh-tile:active { transform: scale(.99); }
.dh-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dh-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dh-muted); }
.dh-go { color: var(--dh-muted); transition: transform .15s, color .15s; }
.dh-tile:hover .dh-go { color: var(--dh-text); transform: translateX(2px); }
.dh-val { font-family: var(--dh-cond); font-size: 40px; line-height: .95; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-val small { font-size: 18px; font-weight: 700; color: var(--dh-muted); margin-left: 2px; }
.dh-val.is-acc { color: var(--dh-acc); }
.dh-sub { font-size: 13px; font-weight: 600; color: var(--dh-text-2); line-height: 1.35; margin-top: auto; }
.dh-sub b { color: var(--dh-text); font-weight: 800; }
.dh-delta { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dh-delta.up { background: rgba(47,179,107,.14); color: #7EE0A8; }
.dh-delta.down { background: rgba(240,68,56,.14); color: #FF8A80; }

/* progress */
.dh-progress { position: relative; height: 10px; border-radius: 5px; background: var(--dh-track); overflow: visible; }
.dh-progress i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--dh-acc); width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.dh-progress b { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: #FFFFFF; opacity: .7; }
.dh-progress-legend { display: flex; justify-content: space-between; font-family: var(--dh-mono); font-size: 10px; font-weight: 600; color: var(--dh-muted); letter-spacing: .04em; }

/* win split */
.dh-split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--dh-track); gap: 2px; }
.dh-split i { display: block; height: 100%; transition: flex-grow .9s cubic-bezier(.2,.7,.2,1); }

/* follow-up tile */
.dh-tile.is-alert { border-color: rgba(240,68,56,.35); }
.dh-fu-row { display: flex; gap: 14px; align-items: flex-end; }
.dh-fu-row > div { display: flex; flex-direction: column; gap: 2px; }
.dh-fu-row .dh-val.is-red { color: var(--dh-red); }
.dh-fu-lbl { font-size: 12px; font-weight: 700; color: var(--dh-muted); }
.dh-fu-row { gap: 22px; }

/* ---------- Narrow ---------- */
@container (max-width: 640px) {
  .dh-top { padding: 20px 16px 14px; }
  .dh-hello { font-size: 30px; }
  /* New account takes the room left; every icon button after it (check-in, advisor,
     follow-up, sample) gets its own column, however many there are. */
  .dh-actions { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-flow: column; grid-auto-columns: auto; }
  .dh-actions .dh-ci { width: 46px; padding: 0; justify-content: center; }
  .dh-actions .dh-btn:not(.dh-btn--acc) { width: 46px; padding: 0; justify-content: center; }
  .dh-actions .dh-btn:not(.dh-btn--acc) span { display: none; }
  .dh-actions .dh-btn--acc { justify-content: center; }
  .dh-kpis { padding: 0 16px 16px; gap: 10px; }
  .dh-tile { min-height: 132px; padding: 14px; }
  .dh-tile--volume, .dh-tile[data-tile="followups"] { grid-column: 1 / -1; }
  .dh-tile[data-tile="followups"] { min-height: 0; }
  .dh-val { font-size: 34px; }
}
/* A phone: five buttons do not fit on one row (they need about 357 px of a
   324 px row at 390 px wide), so New account takes the full first row and the
   icon buttons share the second at equal widths. */
@container (max-width: 460px) {
  .dh-actions { display: flex; flex-wrap: wrap; }
  .dh-actions .dh-btn--acc { flex: 1 0 100%; }
  .dh-actions .dh-btn:not(.dh-btn--acc), .dh-actions .dh-ci { flex: 1 1 0; width: auto; }
  /* Change 7: icon over a short label, so nobody has to guess what a button does. */
  .dh-actions .dh-btn:not(.dh-btn--acc) { height: auto; min-height: 60px; flex-direction: column; gap: 5px; padding: 8px 4px; }
  .dh-actions .dh-short { display: block; font-size: 12px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
}
.dh-short { display: none; }
@container (max-width: 360px) {
  .dh-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dh *, .dh *::before, .dh *::after { transition: none !important; }
}

.dh-pace.is-ahead { color: #7EE0A8; }
.dh-pace.is-behind { color: #FF8A80; }

/* ---------- Field check-in: red until checked in today, green after ---------- */
.dh-ci { position: relative; width: 46px; padding: 0; justify-content: center; }
.dh-ci.is-due { color: #FF8A80; border-color: rgba(240,68,56,.55); background: rgba(240,68,56,.12); }
.dh-ci.is-due:hover { background: rgba(240,68,56,.2); border-color: rgba(240,68,56,.75); }
.dh-ci.is-done { color: #7EE0A8; border-color: rgba(47,179,107,.55); background: rgba(47,179,107,.12); }
.dh-ci.is-done:hover { background: rgba(47,179,107,.2); border-color: rgba(47,179,107,.75); }
.dh-ci-dot { position: absolute; top: 7px; inset-inline-end: 7px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--dh-card); }
.dh-ci.is-due .dh-ci-dot { background: #F04438; animation: dh-ci-pulse 1.6s ease-in-out infinite; }
.dh-ci.is-done .dh-ci-dot { background: #2FB36B; }
@keyframes dh-ci-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,68,56,.55); } 50% { box-shadow: 0 0 0 5px rgba(240,68,56,0); } }
@media (prefers-reduced-motion: reduce) { .dh-ci.is-due .dh-ci-dot { animation: none; } }

/* ---------- Light theme ---------- */
:root[data-scheme="light"] .dh {
  --dh-card: #FFFFFF; --dh-tile: #F4F5F7; --dh-track: #E3E5E8;
  --dh-line: rgba(18,20,23,.08); --dh-line-2: rgba(18,20,23,.16);
  --dh-text: #121417; --dh-text-2: #3B424A; --dh-muted: #5B636D;
  border-color: rgba(18,20,23,.09);
  box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 10px 28px -16px rgba(18,20,23,.18);
}
:root[data-scheme="light"] .dh :focus-visible { outline-color: #121417; }
:root[data-scheme="light"] .dh-hello span { color: #8A5A00; }
:root[data-scheme="light"] .dh-btn:hover { background: rgba(18,20,23,.05); border-color: rgba(18,20,23,.24); }
:root[data-scheme="light"] .dh-tile:hover { background: #ECEEF1; }
:root[data-scheme="light"] .dh-delta.up { color: #17703F; }
:root[data-scheme="light"] .dh-delta.down { color: #B42318; }
:root[data-scheme="light"] .dh-pace.is-ahead { color: #17703F; }
:root[data-scheme="light"] .dh-pace.is-behind { color: #B42318; }
/* The pace mark stays white, as the tile says — outlined so it shows on the light track. */
:root[data-scheme="light"] .dh-progress b { opacity: 1; box-shadow: 0 0 0 1px #121417; }
:root[data-scheme="light"] .dh-ci.is-due { color: #B42318; border-color: rgba(180,35,24,.45); background: rgba(180,35,24,.08); }
:root[data-scheme="light"] .dh-ci.is-done { color: #17703F; border-color: rgba(23,112,63,.45); background: rgba(23,112,63,.08); }

/* ── Coloured icon tiles (2026-10-09; palette in theme.css, one colour per
   section across both apps). The check-in keeps its own red / green: that
   colour says whether the rep has checked in today. */
.dh-btn[data-action] > svg { box-sizing: content-box; width: 16px; height: 16px; padding: 4px; border-radius: 7px;
  background: var(--tile, var(--tile-grey)); color: var(--tile-ink); stroke: var(--tile-ink); }
.dh-btn[data-action="checkin"] > svg { box-sizing: border-box; width: auto; height: auto; padding: 0; background: none; color: inherit; stroke: currentColor; }
.dh-btn[data-action="account"]  { --tile: var(--tile-teal); }
.dh-btn[data-action="advisor"]  { --tile: var(--tile-purple); }
.dh-btn[data-action="followup"] { --tile: var(--tile-red); }
.dh-btn[data-action="sample"]   { --tile: var(--tile-pink); }

/* ════════════════════════════════════════════════════════════════════════════
   v4.160 — the header and volume card drawn like the user's reference image.
   The panel itself is unboxed (it sits on the page); the volume is one large
   card with an amber-lit border; Ahead of pace, Target, Remaining and the
   year's months sit beside it. Appears after the rules above, so it wins.
   ════════════════════════════════════════════════════════════════════════════ */
.dh { background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.dh::before { display: none; }
.dh { --dh-amber-2: #FFA21A; --dh-orange-2: #FF6B00; --dh-glow: rgba(255, 150, 30, .42); }

.dh-top { padding: 6px 2px 20px; align-items: flex-start; gap: 18px 24px; }
.dh-eyebrow { font-size: 13px; letter-spacing: .2em; color: var(--dh-text-2); gap: 14px; }
.dh-sync { color: var(--dh-text-2); }
.dh-sync i { width: 10px; height: 10px; background: #31D07F; box-shadow: 0 0 0 3px rgba(49,208,127,.22); }
.dh-hello { margin-top: 8px; font-size: 46px; font-weight: 800; letter-spacing: -.01em; color: var(--dh-text); }
.dh-hello span { color: var(--dh-orange-2); }
.dh-lead { margin-top: 8px; font-size: 19px; color: var(--dh-text-2); font-weight: 500; }

.dh-actions { gap: 12px; align-items: center; }
.dh-btn { height: 58px; padding: 0 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.015); font-size: 16px; font-weight: 700; gap: 12px; }
.dh-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,200,120,.45); }
.dh-btn--acc { background: linear-gradient(180deg, #FFB32A, #FF9A12); border: 0; color: #1a1206; box-shadow: 0 0 34px rgba(255,150,20,.28); }
.dh-btn--acc:hover { filter: brightness(1.06); background: linear-gradient(180deg, #FFB32A, #FF9A12); }
/* plain outline icons, as drawn: no coloured squares on this panel */
.dh .dh-btn[data-action] > svg { box-sizing: border-box; width: 26px; height: 26px; padding: 0; background: none; color: var(--dh-amber-2); stroke: var(--dh-amber-2); }
.dh .dh-btn--acc[data-action] > svg { color: #1a1206; stroke: #1a1206; }
.dh .dh-ci > svg { color: inherit; stroke: currentColor; }
/* the camera check-in: a labelled button like its neighbours, red until
   checked in today and green after (the state is the point of it) */
.dh .dh-ci { width: auto; padding: 0 22px; justify-content: flex-start; }
.dh-ci-dot { top: 9px; inset-inline-end: 9px; }

.dh-kpis { padding: 0; }
.dh-card {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0;
  border-radius: 30px; border: 1px solid var(--dh-glow);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,150,30,.10) 0%, rgba(255,150,30,0) 55%),
    linear-gradient(180deg, #14100b, #0d0a07);
  box-shadow: 0 0 0 1px rgba(255,160,40,.06), 0 18px 60px -28px rgba(255,120,0,.45), inset 0 0 70px rgba(255,140,20,.05);
  overflow: hidden;
}
.dh-card .dh-tile--volume { background: none; border: 0; border-radius: 0; padding: 30px 34px 28px; gap: 18px; min-height: 0; cursor: pointer; }
.dh-card .dh-tile--volume:hover { background: rgba(255,255,255,.02); }
.dh-tile-head { justify-content: flex-start; gap: 18px; }
.dh-ico { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; flex: none;
  background: linear-gradient(180deg, rgba(255,170,40,.28), rgba(255,120,0,.12)); border: 1px solid rgba(255,170,60,.5); color: #FFB02A; }
.dh-ico svg { width: 30px; height: 30px; }
.dh-heads { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dh-heads .dh-k { font-size: 14px; letter-spacing: .32em; color: var(--dh-muted); font-weight: 600; font-family: var(--dh-mono); }
.dh-title { font-size: 31px; font-weight: 800; line-height: 1.1; color: var(--dh-text); }

.dh-valrow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.dh-val { font-size: 82px; line-height: .9; letter-spacing: -.01em; color: var(--dh-text); }
.dh-val small { font-size: 36px; font-weight: 700; color: var(--dh-muted); margin-left: 6px; }
.dh-pct { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-radius: 999px;
  background: rgba(255,170,40,.07); border: 1px solid rgba(255,170,60,.22); }
.dh-pct svg { color: #FFA21A; flex: none; }
.dh-pct b { font-size: 27px; font-weight: 800; color: #FFA21A; font-variant-numeric: tabular-nums; }
.dh-pct span { font-size: 17px; color: var(--dh-text-2); font-weight: 500; }

.dh-pw { position: relative; display: block; padding-top: 58px; margin-top: 2px; }
.dh-pmark { position: absolute; top: 0; transform: translateX(-1px); padding-left: 12px; display: flex; flex-direction: column; gap: 2px; border-left: 0; white-space: nowrap; }
.dh-pmark b { font-size: 18px; font-weight: 800; color: var(--dh-text); }
.dh-pmark b small { font-size: 15px; font-weight: 600; color: var(--dh-muted); }
.dh-pmark span { font-size: 16px; color: var(--dh-text-2); }
.dh-pmark.dh-d.is-flip { transform: translateX(-100%); padding-left: 0; padding-right: 12px; align-items: flex-end; text-align: end; }   /* v4.240 */
.dh-card .dh-progress { height: 32px; border-radius: 16px; background: rgba(255,255,255,.075); }
.dh-card .dh-progress i { border-radius: 16px; background: linear-gradient(90deg, #FFB01F 0%, #FF8A10 55%, #FF6A00 100%); box-shadow: 0 0 22px rgba(255,130,0,.35); }
.dh-card .dh-progress b { top: -12px; bottom: -12px; width: 3px; border-radius: 2px; background: #fff; opacity: 1; }
.dh-progress-legend { display: flex; justify-content: space-between; align-items: flex-start; font-family: var(--dh-font); letter-spacing: 0; margin-top: -4px; }
.dh-l0 { font-size: 20px; font-weight: 700; color: var(--dh-text-2); }
.dh-l1 { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dh-l1 b { font-size: 22px; font-weight: 800; color: var(--dh-text); }
.dh-l1 b small { font-size: 17px; color: var(--dh-muted); font-weight: 600; }
.dh-l1 span { font-size: 17px; color: var(--dh-text-2); }

.dh-side { border-inline-start: 1px solid rgba(255,255,255,.1); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dh-pacecard { display: flex; align-items: center; gap: 18px; width: 100%; padding: 16px 20px; border-radius: 20px; text-align: start; cursor: pointer;
  background: rgba(49,208,127,.07); border: 1px solid rgba(49,208,127,.28); color: var(--dh-text); }
.dh-pacecard.is-behind { background: rgba(240,68,56,.07); border-color: rgba(240,68,56,.32); }
.dh-pacecard__ic { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #31D07F; border: 2px solid rgba(49,208,127,.55);
  background: rgba(49,208,127,.1); box-shadow: 0 0 28px rgba(49,208,127,.2); }
.dh-pacecard.is-behind .dh-pacecard__ic { color: #FF8A80; border-color: rgba(240,68,56,.55); background: rgba(240,68,56,.1); box-shadow: 0 0 28px rgba(240,68,56,.18); }
.dh-pacecard__t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.dh-pacecard__t b { font-size: 23px; font-weight: 800; }
.dh-pacecard__t span { font-size: 16px; color: var(--dh-text-2); line-height: 1.35; }
.dh-pacecard .dh-go { color: var(--dh-muted); flex: none; }
.dh-pace.is-ahead { color: #31D07F; }
.dh-pace.is-behind { color: #FF8A80; }
.dh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dh-mini { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.dh-mini__ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none; background: rgba(255,150,30,.1); border: 1px solid rgba(255,160,40,.2); color: #FFA21A; }
.dh-mini__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dh-mini__t small { font-size: 16px; color: var(--dh-text-2); font-weight: 500; }
.dh-mini__t b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-mini__t i { font-style: normal; font-size: 19px; color: var(--dh-muted); font-weight: 600; }

.dh-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 108px; margin-top: auto; padding-top: 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.dh-mo { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.dh-mo i { display: block; width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(190,110,40,.55), rgba(120,70,25,.45)); }
.dh-mo.is-now i { background: linear-gradient(180deg, #FFC24A, #FFA21A); box-shadow: 0 0 18px rgba(255,170,30,.5); }
.dh-mo em { position: absolute; bottom: -26px; font-style: normal; font-size: 13px; color: var(--dh-muted); }
.dh-mo.is-now em { color: var(--dh-text); font-weight: 700; }
.dh-months { margin-bottom: 26px; }

/* narrower panels: the side column drops under the volume */
@container (max-width: 960px) {
  .dh-card { grid-template-columns: minmax(0, 1fr); }
  .dh-side { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .dh-hello { font-size: 38px; }
}
@container (max-width: 640px) {
  .dh-top { padding: 4px 2px 14px; }
  .dh-hello { font-size: 32px; }
  .dh-lead { font-size: 16px; }
  .dh-eyebrow { font-size: 11.5px; letter-spacing: .14em; }
  .dh-card { border-radius: 24px; }
  .dh-card .dh-tile--volume { padding: 20px 18px 18px; gap: 14px; }
  .dh-ico { width: 54px; height: 54px; border-radius: 16px; }
  .dh-ico svg { width: 24px; height: 24px; }
  .dh-title { font-size: 24px; }
  .dh-heads .dh-k { font-size: 12px; letter-spacing: .24em; }
  .dh-val { font-size: 58px; }
  .dh-val small { font-size: 26px; }
  .dh-pct { height: 48px; padding: 0 16px; }
  .dh-pct b { font-size: 21px; }
  .dh-pct span { font-size: 14px; }
  .dh-pw { padding-top: 50px; }
  .dh-pmark b { font-size: 15px; } .dh-pmark span { font-size: 13px; }
  .dh-card .dh-progress { height: 24px; border-radius: 12px; }
  .dh-card .dh-progress i { border-radius: 12px; }
  .dh-l0 { font-size: 16px; } .dh-l1 b { font-size: 18px; } .dh-l1 span { font-size: 14px; }
  .dh-side { padding: 16px 16px 14px; }
  .dh-pacecard { padding: 12px 14px; gap: 14px; }
  .dh-pacecard__ic { width: 50px; height: 50px; }
  .dh-pacecard__t b { font-size: 19px; } .dh-pacecard__t span { font-size: 14px; }
  .dh-mini { padding: 10px 12px; gap: 10px; }
  .dh-mini__ic { width: 40px; height: 40px; border-radius: 12px; }
  .dh-mini__t small { font-size: 13px; } .dh-mini__t b { font-size: 20px; } .dh-mini__t i { font-size: 14px; }
  .dh-months { height: 90px; gap: 5px; }
  .dh-mo em { font-size: 10.5px; }
  .dh-btn { height: 46px; border-radius: 14px; padding: 0 14px; font-size: 14px; }
  .dh .dh-btn[data-action] > svg { width: 22px; height: 22px; }
  .dh .dh-ci { padding: 0; }
}
@container (max-width: 460px) {
  .dh .dh-btn:not(.dh-btn--acc) > svg { width: 22px; height: 22px; }
}

/* light theme: a white card with a warm edge */
:root[data-scheme="light"] .dh { --dh-glow: rgba(214,120,10,.45); }
:root[data-scheme="light"] .dh-card { background: linear-gradient(180deg, #FFFFFF, #FFF8EF); box-shadow: 0 14px 40px -24px rgba(214,120,10,.45); }
:root[data-scheme="light"] .dh-side { border-color: rgba(18,20,23,.1); }
:root[data-scheme="light"] .dh-ico, :root[data-scheme="light"] .dh-mini__ic { color: #9A5A00; }
:root[data-scheme="light"] .dh-pct { background: rgba(214,120,10,.09); border-color: rgba(154,90,0,.3); }
:root[data-scheme="light"] .dh-pct b, :root[data-scheme="light"] .dh-pct svg { color: #8A5000; }
:root[data-scheme="light"] .dh-mini { background: #FFFFFF; border-color: rgba(18,20,23,.09); }
:root[data-scheme="light"] .dh-pacecard { background: rgba(23,112,63,.07); border-color: rgba(23,112,63,.35); }
:root[data-scheme="light"] .dh-pacecard.is-behind { background: rgba(180,35,24,.06); border-color: rgba(180,35,24,.35); }
:root[data-scheme="light"] .dh-pacecard__ic { color: #17703F; border-color: rgba(23,112,63,.5); box-shadow: none; }
:root[data-scheme="light"] .dh-pacecard.is-behind .dh-pacecard__ic { color: #B42318; border-color: rgba(180,35,24,.5); }
:root[data-scheme="light"] .dh-pace.is-ahead { color: #17703F; }
:root[data-scheme="light"] .dh-pace.is-behind { color: #B42318; }
:root[data-scheme="light"] .dh-card .dh-progress { background: rgba(18,20,23,.09); }
:root[data-scheme="light"] .dh-card .dh-progress b { background: #121417; }
:root[data-scheme="light"] .dh-mo i { background: linear-gradient(180deg, rgba(214,140,60,.5), rgba(160,100,40,.4)); }
:root[data-scheme="light"] .dh-mo.is-now i { background: linear-gradient(180deg, #F5A524, #D98300); box-shadow: none; }
:root[data-scheme="light"] .dh-months { border-color: rgba(18,20,23,.12); }
:root[data-scheme="light"] .dh .dh-btn[data-action] > svg { color: #9A5A00; stroke: #9A5A00; }
:root[data-scheme="light"] .dh .dh-btn--acc[data-action] > svg { color: #1a1206; stroke: #1a1206; }
:root[data-scheme="light"] .dh .dh-ci > svg { color: inherit; stroke: currentColor; }
:root[data-scheme="light"] .dh-hello span { color: #B85500; }
:root[data-scheme="light"] .dh-btn { border-color: rgba(18,20,23,.18); background: #fff; }
:root[data-scheme="light"] .dh-btn--acc { background: linear-gradient(180deg, #FFB32A, #FF9A12); }

.dh-pw .dh-progress { display: block; }
.dh-pw .dh-progress i { display: block; }

/* ════════════════════════════════════════════════════════════════════════════
   v4.161 — the PHONE composition, drawn from the user's two phone references.
   Desktop keeps the wide reference; at 640px and below (the panel's own
   width, a container query) the phone-only parts (.dh-m) replace the
   desktop-only ones (.dh-d). Sizes are the reference's, at its 2x scale.
   ════════════════════════════════════════════════════════════════════════════ */
.dh-m { display: none; }
.dh-ring { display: block; width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: conic-gradient(#FF8A10 calc(var(--p) * 1%), rgba(255,255,255,.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.dh-tip { display: inline-block; padding: 5px 10px; border-radius: 9px; background: #2a2f36; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

@container (max-width: 640px) {
  .dh-d { display: none !important; }
  .dh-btn.dh-m { display: inline-flex; }
  .dh-top { padding: 2px 0 12px; gap: 10px; }
  .dh-eyebrow { font-size: 11.5px; letter-spacing: .16em; color: var(--dh-text-2); }
  .dh-hello { font-size: 28px; margin-top: 6px; }
  .dh-lead { font-size: 15px; margin-top: 4px; }

  /* quick actions: New quotation, then the three icon buttons, one row */
  .dh-actions { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .dh-actions .dh-btn--acc { flex: 1.9 1 0; width: auto; height: 50px; border-radius: 14px; padding: 0 10px; justify-content: center; font-size: 14.5px; gap: 8px; }
  .dh-actions .dh-btn--acc .dh-short { display: none; }
  .dh-actions .dh-btn:not(.dh-btn--acc), .dh-actions .dh-ci { flex: 1 1 0; width: auto; min-width: 0; height: 50px; min-height: 50px; padding: 4px 2px; border-radius: 14px;
    flex-direction: column; justify-content: center; gap: 3px; }
  .dh-actions .dh-btn:not(.dh-btn--acc) span { display: none; }
  .dh-actions .dh-short { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
  .dh .dh-btn[data-action] > svg { width: 20px; height: 20px; }

  .dh-card { position: relative; border-radius: 22px; }
  .dh-collapse.dh-m { display: grid; position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 40px; height: 40px; place-items: center;
    border: 0; border-radius: 12px; background: none; color: var(--dh-text-2); cursor: pointer; }
  .dh-collapse svg { width: 20px; height: 20px; transition: transform .2s; }
  .dh-collapse[aria-expanded="false"] svg { transform: rotate(180deg); }
  .dh-card.is-collapsed .dh-side { display: none; }

  .dh-card .dh-tile--volume { padding: 14px 16px 14px; gap: 12px; }
  .dh-tile-head { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 6px; align-items: center; padding-inline-end: 40px; }
  .dh-heads { display: contents; }
  .dh-ico { width: 30px; height: 30px; border-radius: 9px; grid-column: 1; grid-row: 1; }
  .dh-ico svg { width: 16px; height: 16px; }
  .dh-heads .dh-k { grid-column: 2; grid-row: 1; font-family: var(--dh-font); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--dh-text-2); }
  .dh-title { grid-column: 1 / -1; grid-row: 2; font-size: 21px; }
  .dh-valrow { flex-wrap: nowrap; gap: 0; align-items: center; margin-top: 0; }
  .dh-val { font-size: 54px; flex: none; }
  .dh-val small { font-size: 22px; margin-left: 4px; }
  .dh-ringpct.dh-m { display: flex; align-items: center; gap: 10px; margin-inline-start: 14px; padding-inline-start: 14px; border-inline-start: 1px solid rgba(255,255,255,.14); min-width: 0; }
  .dh-ringpct__t { display: flex; flex-direction: column; gap: 0; line-height: 1.15; }
  .dh-ringpct__t b { font-size: 21px; font-weight: 800; color: #FFA21A; font-variant-numeric: tabular-nums; }
  .dh-ringpct__t span { font-size: 13px; color: var(--dh-text-2); }

  .dh-pw { padding-top: 40px; margin-top: 0; }
  .dh-pmark.dh-m { display: block; top: 0; padding: 0; transform: translateX(-50%); }
  .dh-pmark.dh-m.is-l { transform: translateX(-12%); }
  .dh-pmark.dh-m.is-r { transform: translateX(-88%); }
  .dh-card .dh-progress { height: 14px; border-radius: 7px; }
  .dh-card .dh-progress i { border-radius: 7px; box-shadow: none; }
  .dh-card .dh-progress b { top: -11px; bottom: -8px; width: 2px; }
  .dh-legend-m.dh-m { display: flex; justify-content: space-between; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--dh-text-2); }

  .dh-side { padding: 0 14px 14px; gap: 10px; border-top: 0; }
  .dh-pacecard { padding: 10px 14px; gap: 12px; border-radius: 14px; }
  .dh-pacecard__ic { width: 40px; height: 40px; }
  .dh-pacecard__ic svg { width: 20px; height: 20px; }
  .dh-pacecard__t b { font-size: 16.5px; }
  .dh-pacecard__t span.dh-m { display: block; font-size: 13.5px; }
  .dh-pace .dh-m { display: inline; font-size: inherit; color: inherit; }
  .dh-two { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dh-mini.dh-m { display: flex; }
  .dh-mini { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 9px; border-radius: 14px; position: relative; }
  .dh-mini__ic { width: 22px; height: 22px; border: 0; background: none; border-radius: 0; position: absolute; top: 9px; left: 9px; color: #FFA21A; }
  .dh-mini__ic svg { width: 20px; height: 20px; }
  .dh-mini__t { width: 100%; gap: 2px; }
  .dh-mini__t small { font-size: 12px; padding-inline-start: 24px; line-height: 22px; white-space: nowrap; letter-spacing: -.01em; }
  .dh-mini__t b { font-size: 18px; margin-top: 2px; }
  .dh-mini__t i { font-size: 13px; }

  .dh-trend.dh-m { display: block; padding: 10px 12px 8px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
  .dh-trend__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .dh-trend__t { display: inline-flex; align-items: center; gap: 8px; color: #FFA21A; }
  .dh-trend__t svg { width: 18px; height: 18px; }
  .dh-trend__t b { color: var(--dh-text); font-size: 15px; font-weight: 700; }
  .dh-trend__more { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.07); color: var(--dh-text); font: 600 13px var(--dh-font); cursor: pointer; }
  .dh-trend__more svg { width: 14px; height: 14px; }
  .dh-tb { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 92px; padding-bottom: 22px; position: relative; }
  .dh-tbar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
  .dh-tbar i { display: block; width: 100%; max-width: 30px; border-radius: 6px; background: rgba(255,255,255,.09); }
  .dh-tbar.is-now i { background: linear-gradient(180deg, #FFA21A, #FF7A00); box-shadow: 0 6px 14px -6px rgba(255,130,0,.7); }
  .dh-tbar em { position: absolute; bottom: -22px; font-style: normal; font-size: 12.5px; color: var(--dh-muted); }
  .dh-tbar.is-now em { color: #FFA21A; font-weight: 700; }
}
@container (max-width: 360px) {
  .dh-val { font-size: 46px; }
  .dh-ringpct.dh-m { margin-inline-start: 10px; padding-inline-start: 10px; }
  .dh-ringpct__t b { font-size: 18px; }
  .dh-hello { font-size: 25px; }
}
:root[data-scheme="light"] .dh-tip { background: #121417; color: #fff; }
:root[data-scheme="light"] .dh-ringpct__t b, :root[data-scheme="light"] .dh-trend__t, :root[data-scheme="light"] .dh-tbar.is-now em { color: #8A5000; }
:root[data-scheme="light"] .dh-ring { background: conic-gradient(#E07B00 calc(var(--p) * 1%), rgba(18,20,23,.12) 0); }
:root[data-scheme="light"] .dh-trend { background: #FFFFFF; border-color: rgba(18,20,23,.09); }
:root[data-scheme="light"] .dh-tbar i { background: rgba(18,20,23,.1); }
:root[data-scheme="light"] .dh-trend__more { background: rgba(18,20,23,.07); }
:root[data-scheme="light"] .dh-ringpct { border-color: rgba(18,20,23,.14); }

/* ════════════════════════════════════════════════════════════════════════════
   v4.162 — the DESKTOP composition, measured from the user's wide reference
   (1600 x 533: a 1535 x 342 card, left column 66 %, the monthly target and the
   bars on the right). Every size is the reference's size as a share of the
   panel's width (cqw), so the long rectangle keeps its proportions at any
   laptop or monitor width instead of stacking into a tall block. It stacks
   only below 760px, where the phone layout takes over at 640px.
   ════════════════════════════════════════════════════════════════════════════ */
@container (min-width: 761px) {
  .dh-top { padding: 0.4cqw 0 1.5cqw; align-items: flex-start; gap: 1.2cqw 2cqw; flex-wrap: nowrap; }
  .dh-eyebrow { font-size: clamp(11px, 0.88cqw, 15px); letter-spacing: .18em; gap: 1cqw; }
  .dh-hello { font-size: clamp(28px, 2.55cqw, 44px); margin-top: .5cqw; }
  .dh-lead { font-size: clamp(14px, 1.15cqw, 20px); margin-top: .5cqw; }
  .dh-actions { gap: .8cqw; flex-wrap: nowrap; flex: none; }
  .dh-btn { height: clamp(44px, 3.7cqw, 62px); padding: 0 clamp(12px, 1.35cqw, 22px); border-radius: clamp(12px, 1.1cqw, 18px); font-size: clamp(13px, 1cqw, 16px); gap: .7cqw; white-space: nowrap; }
  .dh .dh-btn[data-action] > svg { width: clamp(18px, 1.6cqw, 26px); height: clamp(18px, 1.6cqw, 26px); }
  .dh .dh-ci { padding: 0 clamp(12px, 1.35cqw, 22px); }

  .dh-card { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); border-radius: clamp(20px, 1.95cqw, 32px); }
  .dh-card .dh-tile--volume { padding: clamp(16px, 2.2cqw, 36px) clamp(18px, 2.4cqw, 40px) clamp(14px, 1.9cqw, 30px); gap: clamp(8px, 1.1cqw, 18px); }
  .dh-tile-head { gap: clamp(10px, 1.2cqw, 20px); }
  .dh-ico { width: clamp(42px, 4.3cqw, 70px); height: clamp(42px, 4.3cqw, 70px); border-radius: clamp(12px, 1.3cqw, 21px); }
  .dh-ico svg { width: 46%; height: 46%; }
  .dh-heads { gap: .35cqw; }
  .dh-heads .dh-k { font-size: clamp(11px, 0.98cqw, 16px); letter-spacing: .3em; }
  .dh-title { font-size: clamp(20px, 1.95cqw, 32px); }

  .dh-valrow { gap: clamp(12px, 1.5cqw, 24px); margin-top: .2cqw; }
  .dh-val { font-size: clamp(46px, 5.1cqw, 84px); }
  .dh-val small { font-size: clamp(20px, 2.1cqw, 34px); margin-left: .3cqw; }
  .dh-pct { height: clamp(40px, 3.8cqw, 62px); padding: 0 clamp(14px, 1.5cqw, 24px); gap: .8cqw; }
  .dh-pct svg { width: clamp(18px, 1.7cqw, 28px); height: clamp(18px, 1.7cqw, 28px); }
  .dh-pct b { font-size: clamp(18px, 1.75cqw, 28px); }
  .dh-pct span { font-size: clamp(12px, 1.1cqw, 18px); }

  /* the label sits on the value row's level when the marker is clear of the pill */
  .dh-pw { padding-top: clamp(42px, 3.7cqw, 60px); margin-top: calc(-1 * clamp(34px, 3.2cqw, 52px)); }
  .dh-pw.is-early { margin-top: 0; }
  .dh-pmark.dh-d { padding-left: .8cqw; }
  .dh-pmark b { font-size: clamp(12px, 1.12cqw, 18px); }
  .dh-pmark b small { font-size: clamp(11px, 0.95cqw, 15px); }
  .dh-pmark span { font-size: clamp(11px, 1.05cqw, 17px); }
  .dh-card .dh-progress { height: clamp(18px, 2cqw, 32px); border-radius: 999px; }
  .dh-card .dh-progress i { border-radius: 999px; }
  .dh-card .dh-progress b { top: -.7cqw; bottom: -.7cqw; width: clamp(2px, .2cqw, 3px); }
  .dh-progress-legend { margin-top: .2cqw; }
  .dh-l0 { font-size: clamp(13px, 1.2cqw, 20px); }
  .dh-l1 b { font-size: clamp(14px, 1.35cqw, 22px); }
  .dh-l1 b small { font-size: clamp(11px, 1.05cqw, 17px); }
  .dh-l1 span { font-size: clamp(11px, 1.05cqw, 17px); }

  .dh-side { position: relative; border: 0; padding: clamp(14px, 1.95cqw, 30px) clamp(14px, 1.7cqw, 28px) clamp(12px, 1.5cqw, 24px); gap: clamp(8px, 0.9cqw, 14px); }
  .dh-side::before { content: ''; position: absolute; inset-inline-start: 0; top: clamp(14px, 1.95cqw, 30px); bottom: clamp(14px, 1.95cqw, 30px); width: 1px; background: rgba(255,255,255,.11); }
  .dh-pacecard { padding: clamp(8px, 1cqw, 16px) clamp(12px, 1.3cqw, 20px); gap: clamp(10px, 1.2cqw, 18px); border-radius: clamp(14px, 1.3cqw, 20px); }
  .dh-pacecard__ic { width: clamp(38px, 3.65cqw, 58px); height: clamp(38px, 3.65cqw, 58px); }
  .dh-pacecard__ic svg { width: 46%; height: 46%; }
  .dh-pacecard__t b { font-size: clamp(15px, 1.45cqw, 23px); }
  .dh-pacecard__t span { font-size: clamp(11.5px, 1.02cqw, 16px); }
  .dh-two { gap: clamp(8px, .8cqw, 12px); }
  .dh-mini { padding: clamp(8px, .9cqw, 14px) clamp(10px, 1cqw, 16px); gap: clamp(8px, .9cqw, 14px); border-radius: clamp(12px, 1.2cqw, 18px); }
  .dh-mini__ic { width: clamp(34px, 3.4cqw, 54px); height: clamp(34px, 3.4cqw, 54px); border-radius: clamp(10px, 1cqw, 15px); }
  .dh-mini__ic svg { width: 52%; height: 52%; }
  .dh-mini__t small { font-size: clamp(11.5px, 1.02cqw, 16px); }
  .dh-mini__t b { font-size: clamp(16px, 1.65cqw, 26px); }
  .dh-mini__t i { font-size: clamp(12px, 1.2cqw, 19px); }
  .dh-months { height: clamp(58px, 6.1cqw, 96px); gap: clamp(4px, .5cqw, 8px); margin-bottom: clamp(18px, 1.7cqw, 26px); }
  .dh-mo em { font-size: clamp(9.5px, .82cqw, 13px); bottom: clamp(-22px, -1.7cqw, -17px); }
  .dh-mo i { max-width: clamp(12px, 1.4cqw, 22px); }
}

/* v4.173: on a narrow phone the three small tiles (Target / Remaining / Days
   left) are about 92 px wide, too narrow for "Remaining" or the Arabic "Days
   left" beside the icon, so the label ran out of its tile. The label now sits
   under the icon and may take two lines. */
@media (max-width: 430px) {
  .dh-mini .dh-mini__t small { padding-inline-start: 0; padding-top: 24px; line-height: 1.2; white-space: normal; letter-spacing: 0; overflow-wrap: break-word; }
}