/* ═══ DevBiz polish — Home + Project Detail (2026-09-20) ═══════════════════════
   The brief, in Satriya's words: do not change the format of anything. People
   read these pages every day; a KPI card has to stay the card they know — same
   label, same figure, same CTD / target / CVR lines in the same places. The
   2026-09-12 redesign rebuilt the cards and was reverted for exactly that.

   So this file only FINISHES what is there, the way QualifAI's client portal
   finishes its own: a calmer hierarchy inside each card so the main figure lands
   first, a tinted icon chip, a pace bar that explains itself on hover, a dark
   floating tooltip, hover lift, and a short reveal on entry.

   Rules of the file:
   · every selector starts with #overview or #project-detail (or a .dvz-* class
     this file owns) — nothing here can reach another page;
   · no display / order / grid change on any existing element;
   · motion is keyframes with fill-mode both, never a class waiting for JS — a
     script that fails must not leave a card at opacity 0 — and all of it is
     switched off under prefers-reduced-motion. */

:root{
  --dvz-ease:cubic-bezier(.2,.8,.2,1);
  --dvz-ink:#0F172A; --dvz-body:#475569; --dvz-mute:#94A3B8;
  --dvz-rule:#EDEFF3; --dvz-blue:#2563EB;
}

/* ── KPI cards: same box, better finish ───────────────────────────────────── */
#overview .kpi-mini,
#project-detail .detail-kpi,#mt-dvz .detail-kpi{
  border-color:var(--dvz-rule) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);
  transition:transform .24s var(--dvz-ease),box-shadow .24s var(--dvz-ease),border-color .24s var(--dvz-ease);
  animation:dvzRise .42s var(--dvz-ease) both;
}
#overview .kpi-mini:hover,
#project-detail .detail-kpi:hover,#mt-dvz .detail-kpi:hover{
  transform:translateY(-2px);
  border-color:#DCE6FB !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px rgba(37,99,235,.11);
}
#project-detail .detail-kpi[onclick]:active,#mt-dvz .detail-kpi[onclick]:active{transform:translateY(0) scale(.985)}

/* stagger — eight cards a row, the row reads left to right */
#overview .kpi-mini:nth-child(2),#project-detail .detail-kpi:nth-child(2),#mt-dvz .detail-kpi:nth-child(2){animation-delay:40ms}
#overview .kpi-mini:nth-child(3),#project-detail .detail-kpi:nth-child(3),#mt-dvz .detail-kpi:nth-child(3){animation-delay:80ms}
#overview .kpi-mini:nth-child(4),#project-detail .detail-kpi:nth-child(4),#mt-dvz .detail-kpi:nth-child(4){animation-delay:120ms}
#overview .kpi-mini:nth-child(5),#project-detail .detail-kpi:nth-child(5),#mt-dvz .detail-kpi:nth-child(5){animation-delay:160ms}
#overview .kpi-mini:nth-child(6),#project-detail .detail-kpi:nth-child(6),#mt-dvz .detail-kpi:nth-child(6){animation-delay:200ms}
#overview .kpi-mini:nth-child(7),#project-detail .detail-kpi:nth-child(7),#mt-dvz .detail-kpi:nth-child(7){animation-delay:240ms}
#overview .kpi-mini:nth-child(8),#project-detail .detail-kpi:nth-child(8),#mt-dvz .detail-kpi:nth-child(8){animation-delay:280ms}
@keyframes dvzRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* hierarchy: the figure is the first thing the eye lands on; the label and the
   supporting lines step back. Sizes are unchanged — weight and colour do it. */
#overview .kpi-mini-label,
#project-detail .det-label,#mt-dvz .det-label{color:#7B8AA0;letter-spacing:.7px;padding-right:30px;min-height:12px}
#overview .kpi-mini-val,
#project-detail .det-val,#mt-dvz .det-val{letter-spacing:-.6px;font-variant-numeric:tabular-nums;font-size:30px;line-height:1.05}
/* Vertical rhythm. With the supporting lines gone the content sat in the top
   half of a 140px card; the figure is a step larger, the gaps are wider, and the
   one line that stays is pushed to the bottom edge so top and bottom balance. */
#overview .kpi-mini,#project-detail .detail-kpi,#mt-dvz .detail-kpi{padding:17px 17px 15px;min-height:152px}
#overview .kpi-mini-label,#project-detail .det-label,#mt-dvz .det-label{margin-bottom:10px}
#overview .kpi-ctd,#project-detail .kpi-ctd,#mt-dvz .kpi-ctd{margin-top:11px}
#overview .open-lead-rate,#project-detail .open-lead-rate,#mt-dvz .open-lead-rate{margin-top:11px}
#overview .kpi-mini .dvz-pace,#project-detail .detail-kpi .dvz-pace,#mt-dvz .detail-kpi .dvz-pace{margin:9px 0 0}
/* margin-top:auto keeps the bottom lines on one baseline across a row; the gap
   above them is only as big as the tallest card in that row forces, so every
   card is built to the SAME natural height (the Campaign Period card included)
   and the gap is these 16px — not 29 in one row and 12 in the next. */
#overview .kpi-mini .dvz-keep,#project-detail .detail-kpi .dvz-keep,#mt-dvz .detail-kpi .dvz-keep{margin-top:auto;padding-top:16px;font-size:10.5px;line-height:1.45}
#project-detail .detail-kpi.cpc .cpc-bar,#mt-dvz .detail-kpi.cpc .cpc-bar{margin-top:9px}
/* One line each, always. A CTD line or a bottom line that wraps on a narrow card
   makes THAT card the tallest in its row and hands every other card a bigger gap
   — which is how one row read 29px and the next 12. Anything an ellipsis hides
   is in the card's hover. */
#overview .kpi-ctd,#project-detail .kpi-ctd,
#overview .kpi-mini .dvz-keep,#project-detail .detail-kpi .dvz-keep,#mt-dvz .kpi-ctd,#mt-dvz .detail-kpi .dvz-keep{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#overview .kpi-mini-val.dvz-fit,
#project-detail .det-val.dvz-fit,#mt-dvz .det-val.dvz-fit{white-space:nowrap}
/* (the CTD line keeps proportional figures: tabular ones are wider, and on a
   150px card they pushed "(116%)" onto a second line) */
#overview .kpi-tgt,#project-detail .kpi-tgt,
#overview .kpi-rate,#project-detail .kpi-rate,#mt-dvz .kpi-tgt,#mt-dvz .kpi-rate{color:#7B8AA0}
#overview .kpi-rate b,#project-detail .kpi-rate b,#mt-dvz .kpi-rate b{color:#334155}

/* icon chip — top right, inside the label's own line, moves nothing */
.dvz-chip{position:absolute;top:11px;right:11px;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:var(--dvz-chip-bg,#EFF4FF);color:var(--dvz-chip-fg,#2563EB);
  transition:transform .24s var(--dvz-ease)}
.dvz-chip svg{width:14px;height:14px;display:block}
#overview .kpi-mini:hover .dvz-chip,
#project-detail .detail-kpi:hover .dvz-chip,#mt-dvz .detail-kpi:hover .dvz-chip{transform:scale(1.08) rotate(-4deg)}

/* pace bar — fill = how much of the FULL target is done, tick = where the
   campaign-to-date target says we should be today. Sits under the CTD line it
   belongs to; 5px, so the card grows by 11px and nothing else moves. */
.dvz-pace{position:relative;height:5px;border-radius:99px;background:#EEF2F7;margin:6px 0 1px;cursor:default}
.dvz-pace i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--dvz-pace,#64748B);
  width:var(--dvz-w,0%);animation:dvzGrow .7s var(--dvz-ease) both;transform-origin:left center}
.dvz-pace b{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:#0F172A;opacity:.55;
  left:var(--dvz-m,0%);transform:translateX(-1px)}
#overview .kpi-mini:hover .dvz-pace,#project-detail .detail-kpi:hover .dvz-pace,#mt-dvz .detail-kpi:hover .dvz-pace{background:#E2E8F0}
#overview .kpi-mini:hover .dvz-pace b,#project-detail .detail-kpi:hover .dvz-pace b,#mt-dvz .detail-kpi:hover .dvz-pace b{opacity:.9}
/* supporting lines move into the card's hover — only where hovering is possible */
@media (hover:hover){
  #overview .kpi-mini .dvz-more,#project-detail .detail-kpi .dvz-more,#mt-dvz .detail-kpi .dvz-more{display:none}
}
@keyframes dvzGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* contribution segments answer a hover too */
.dvz-seg{transition:filter .16s var(--dvz-ease),transform .16s var(--dvz-ease);cursor:default}
.dvz-seg:hover{filter:brightness(1.12) saturate(1.1)}

/* ── the floating tooltip (one element, owned by devbiz-polish.js) ──────────
   Base .dvz-tip__* rules are the dark KPI back face's (.dvz-back reuses them).
   The floating tip itself wears the house hover card since 2026-10-14 — the
   Creative Breakdown Targeting card (.tgt-pop in index.html): white, hairline,
   title over a divider, name ↔ figure rows, a muted footer. His ask: "kenapa
   ga jadi kaya gini as default". */
.dvz-tip__t{display:flex;align-items:center;gap:6px;font-weight:700;color:#fff;font-size:11.5px;margin-bottom:5px}
.dvz-tip__t i{width:7px;height:7px;border-radius:50%;flex:none}
.dvz-tip__r{display:flex;justify-content:space-between;gap:16px}
.dvz-tip__r span{color:#94A3B8}
.dvz-tip__r b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.dvz-tip__r--go{cursor:pointer;margin:0 -6px;padding:0 6px;border-radius:6px;transition:background .15s var(--dvz-ease)}
.dvz-tip__r--go:hover{background:rgba(255,255,255,.10)}
.dvz-tip__r--go b::after{content:' →';color:#94A3B8;font-weight:600}
.dvz-tip__l{margin-top:6px;padding-top:6px;border-top:1px solid rgba(148,163,184,.22);color:#CBD5E1;font-size:10.5px;line-height:1.55}
.dvz-tip__n{margin-top:6px;padding-top:6px;border-top:1px solid rgba(148,163,184,.22);color:#94A3B8;font-size:10.5px}
.dvz-tip{position:fixed;z-index:1200;pointer-events:none;min-width:200px;max-width:min(340px,calc(100vw - 24px));
  background:#fff;color:#334155;border:1px solid #E2E8F3;border-radius:12px;padding:12px 14px 10px;font-size:11px;line-height:1.5;
  box-shadow:0 14px 36px rgba(15,23,42,.16);opacity:0;transform:translateY(4px);
  transition:opacity .16s var(--dvz-ease),transform .16s var(--dvz-ease)}
.dvz-tip.on{opacity:1;transform:none}
.dvz-tip .dvz-tip__t{font-size:12px;color:#0F172A;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #F1F5F9}
.dvz-tip .dvz-tip__r{align-items:baseline;gap:18px;padding:4px 0;font-size:11.5px}
.dvz-tip .dvz-tip__r+.dvz-tip__r{border-top:1px dashed #F1F5F9}
.dvz-tip .dvz-tip__r span{color:#334155}
.dvz-tip .dvz-tip__r b{color:#0F172A;font-weight:650;white-space:nowrap}
.dvz-tip .dvz-tip__l{margin-top:8px;padding-top:7px;border-top:1px solid #F1F5F9;color:#334155;font-size:11px}
.dvz-tip .dvz-tip__n{margin-top:8px;padding-top:7px;border-top:1px solid #F1F5F9;color:#94A3B8;font-size:10.5px;line-height:1.45}

/* ── a KPI card turns over on hover (2026-09-20) ────────────────────────────
   Replaces the floating box for whole cards. The motion is the MKT Agents team
   card's (.mka-agent in lv2.css): front out to the left with a 2px blur, back in
   from the right, 280 ms, same curve. Hover-capable pointers only — on a touch
   screen the back face does not exist and the supporting lines stay visible. */
.dvz-back{display:none}
@media (hover:hover){
  .dvz-flip>*:not(.dvz-back){transition:opacity 280ms var(--dvz-ease),transform 280ms var(--dvz-ease),filter 280ms var(--dvz-ease)}
  .dvz-flip:hover>*:not(.dvz-back){opacity:0;transform:translateX(-8%);filter:blur(2px)}
  /* safe center: a tall back overflows DOWNWARD, where it can be measured and
     tightened — plain center pushed the title out of the top of the card */
  .dvz-back{display:flex;flex-direction:column;justify-content:safe center;position:absolute;inset:0;z-index:3;
    background:#0F172A;color:#E2E8F0;border-radius:inherit;padding:11px 13px;font-size:10.5px;line-height:1.42;
    overflow:hidden;opacity:0;transform:translateX(12%);pointer-events:none;
    transition:opacity 280ms var(--dvz-ease),transform 280ms var(--dvz-ease)}
  .dvz-flip:hover>.dvz-back{opacity:1;transform:none}
  .dvz-back .dvz-tip__t{font-size:11px;margin-bottom:4px}
  .dvz-back .dvz-tip__t{flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the figure wins the width; the label gives way */
  .dvz-back .dvz-tip__r{gap:8px}
  .dvz-back .dvz-tip__r b{flex:none;white-space:nowrap}
  .dvz-back .dvz-tip__r span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dvz-back .dvz-tip__l,.dvz-back .dvz-tip__n{margin-top:5px;padding-top:5px;font-size:10px;line-height:1.4}
  .dvz-back--nonote .dvz-tip__n{display:none}
  .dvz-back--tight{font-size:9.75px;line-height:1.32;padding-top:8px;padding-bottom:8px}
  .dvz-back--tight .dvz-tip__l{font-size:9.5px}
}

/* ── section labels and card titles get a small glyph ─────────────────────── */
#overview .ads-strip-label,#project-detail .ads-strip-label,#mt-dvz .ads-strip-label{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#334155}
#overview .ads-strip-label>span,#project-detail .ads-strip-label>span,#mt-dvz .ads-strip-label>span{color:#7B8AA0}
.dvz-glyph{width:20px;height:20px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:var(--dvz-chip-bg,#EFF4FF);color:var(--dvz-chip-fg,#2563EB)}
.dvz-glyph svg{width:12px;height:12px;display:block}
#overview .card-title,#project-detail .card-title,
#overview .chart-card-title,#project-detail .chart-card-title,#mt-dvz .card-title,#mt-dvz .chart-card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#overview .card-title .dvz-glyph,#project-detail .card-title .dvz-glyph,
#overview .chart-card-title .dvz-glyph,#project-detail .chart-card-title .dvz-glyph,#mt-dvz .card-title .dvz-glyph,#mt-dvz .chart-card-title .dvz-glyph{width:24px;height:24px;border-radius:8px}
#overview .card-title .dvz-glyph svg,#project-detail .card-title .dvz-glyph svg,
#overview .chart-card-title .dvz-glyph svg,#project-detail .chart-card-title .dvz-glyph svg,#mt-dvz .card-title .dvz-glyph svg,#mt-dvz .chart-card-title .dvz-glyph svg{width:14px;height:14px}

/* ── panels: the same cards, a touch more depth on hover, a rise on entry ─── */
/* Every surface on the two pages carries the same resting shadow and answers a
   hover the way a Listing panel does — the shadow grows a little and the card
   lifts 2px (Satriya, 2026-09-22: the chart cards and Creative Breakdown had no
   shadow at all, and a hover-only shadow is not the Listing effect). */
#overview .card,#project-detail .card,#overview .chart-card,#project-detail .chart-card,
#project-detail .creative-winners-section,#project-detail .project-hero,#mt-dvz .card,#mt-dvz .chart-card,#mt-dvz .creative-winners-section,#mt-dvz .project-hero{
  border-color:rgba(229,231,235,.7) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03),0 8px 30px rgba(15,23,42,.05);
  transition:transform .24s var(--dvz-ease),box-shadow .24s var(--dvz-ease),border-color .24s var(--dvz-ease);
  animation:dvzRise .46s var(--dvz-ease) both;animation-delay:120ms}
#overview .card:hover,#project-detail .card:hover,#overview .chart-card:hover,#project-detail .chart-card:hover,
#project-detail .creative-winners-section:hover,#mt-dvz .card:hover,#mt-dvz .chart-card:hover,#mt-dvz .creative-winners-section:hover{
  transform:translateY(-2px);border-color:#DBE4FF !important;
  box-shadow:0 1px 2px rgba(15,23,42,.03),0 12px 36px rgba(37,99,235,.10)}
@media (prefers-reduced-motion:reduce){#overview .card:hover,#project-detail .card:hover,#overview .chart-card:hover,#project-detail .chart-card:hover,#project-detail .creative-winners-section:hover,#mt-dvz .card:hover,#mt-dvz .chart-card:hover,#mt-dvz .creative-winners-section:hover{transform:none}}

/* ── the funnel table: quieter chrome, a row that answers the pointer ─────── */
#overview .tbl-wrap tbody tr:not(.tr-sub):not(.tr-wday){transition:background .16s var(--dvz-ease)}
#overview .tbl-wrap tbody tr:not(.tr-sub):not(.tr-wday):hover>td{background:#F7FAFF}
#overview .status-badge,#project-detail .status-badge,#mt-dvz .status-badge{display:inline-flex;align-items:center;gap:5px}
/* the badge's wrapper is a plain block, so its line box sat the pill ~2px below
   the Basis pills beside it — make the wrapper a centred flex row too */
#project-detail #detail-status-badge,#mt-dvz #detail-status-badge{display:flex;align-items:center;line-height:1}
#overview .status-badge::before,#project-detail .status-badge::before,#mt-dvz .status-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75}

/* ── header controls ─────────────────────────────────────────────────────────
   The Basis switch is the shared segment control from assets/lv2.css (the
   --ctl-* tokens, Listing look, since 2026-09-26) — nothing here restyles it,
   so it can never drift from SOURCE / PLATFORM two sections down. The selects
   below still take the pill dress. */
/* a shorter header: the title block needs 40px, it was given 80 */
#project-detail .project-hero,#mt-dvz .project-hero{padding:12px 22px;margin-bottom:16px}
#project-detail #detail-status-badge .status-badge,#mt-dvz #detail-status-badge .status-badge{padding:4px 10px}
#project-detail .mchild-pick select,#mt-dvz .mchild-pick select{
  appearance:none;-webkit-appearance:none;border:1px solid #E2E8F3 !important;border-radius:99px !important;padding:6px 30px 6px 13px !important;
  font-weight:600;color:#0F172A;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center !important;
  transition:border-color .16s var(--dvz-ease),box-shadow .16s var(--dvz-ease)}
#project-detail .mchild-pick select:hover,#mt-dvz .mchild-pick select:hover{border-color:#C7D7F5 !important}
#project-detail .mchild-pick select:focus,#mt-dvz .mchild-pick select:focus{outline:none;border-color:#BFD3FB !important;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
#project-detail .back-btn,#mt-dvz .back-btn{transition:transform .16s var(--dvz-ease),color .16s var(--dvz-ease)}
#project-detail .back-btn:hover,#mt-dvz .back-btn:hover{transform:translateX(-2px)}

/* pills and the search field: a press and a focus state */
#overview .src-pill,#project-detail .src-pill,#mt-dvz .src-pill{transition:background .16s var(--dvz-ease),color .16s var(--dvz-ease),transform .16s var(--dvz-ease),box-shadow .16s var(--dvz-ease)}
#overview .src-pill:hover,#project-detail .src-pill:hover,#mt-dvz .src-pill:hover{transform:translateY(-1px)}
#overview .src-pill:active,#project-detail .src-pill:active,#mt-dvz .src-pill:active{transform:scale(.97)}
#overview .search-input{transition:border-color .16s var(--dvz-ease),box-shadow .16s var(--dvz-ease)}
#overview .search-input:focus{border-color:#BFD3FB;box-shadow:0 0 0 4px rgba(37,99,235,.10);outline:none}

/* ── the ad preview popup: same finish, same motion ───────────────────────── */
.modal.adpv-modal{border-radius:20px;box-shadow:0 1px 2px rgba(15,23,42,.06),0 30px 80px rgba(15,23,42,.30);animation:dvzPop .32s var(--dvz-ease) both}
@keyframes dvzPop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
.adpv-modal .modal-title{display:flex;align-items:center;gap:9px}
.adpv-modal .modal-title::before{content:"";width:26px;height:26px;border-radius:9px;flex:none;
  background:#F3F0FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.500' width='17' height='15' rx='2.500'/%3E%3Ccircle cx='9' cy='10' r='1.700'/%3E%3Cpath d='m4 17 5-4.500 4 3.500 3-2.500 4.500 3.500'/%3E%3C/svg%3E") no-repeat center}
.adpv-modal .modal-sub{padding-left:35px}
.adpv-stage{animation:dvzRise .42s var(--dvz-ease) both;animation-delay:80ms}
.adpv-wait{background:linear-gradient(100deg,#F8FAFC 30%,#EEF2F8 50%,#F8FAFC 70%);background-size:220% 100%;animation:dvzShimmer 1.3s linear infinite}
@keyframes dvzShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.adpv-foot a{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;border:1px solid #E2E8F3;background:#F8FAFC;text-decoration:none;
  transition:background .16s var(--dvz-ease),transform .16s var(--dvz-ease),border-color .16s var(--dvz-ease)}
.adpv-foot a:hover{background:#EFF4FF;border-color:#C7D7F5;transform:translateY(-1px)}
.adpv-foot a:active{transform:scale(.97)}
.adpv-modal .modal-close{transition:transform .16s var(--dvz-ease),background .16s var(--dvz-ease)}
.adpv-modal .modal-close:hover{transform:rotate(90deg)}

@media (prefers-reduced-motion:reduce){
  .modal.adpv-modal,.adpv-stage,.adpv-wait{animation:none !important}
  #overview .kpi-mini,#project-detail .detail-kpi,
  #overview .card,#project-detail .card,#overview .chart-card,#project-detail .chart-card,#project-detail .project-hero,
  .dvz-pace i,#mt-dvz .detail-kpi,#mt-dvz .card,#mt-dvz .chart-card,#mt-dvz .project-hero{animation:none !important}
  #overview .kpi-mini,#project-detail .detail-kpi,.dvz-chip,.dvz-tip,#overview .src-pill,#project-detail .src-pill,.dvz-flip>*,.dvz-back,#mt-dvz .detail-kpi,#mt-dvz .src-pill{transition:none !important}
  .dvz-flip:hover>*:not(.dvz-back){transform:none;filter:none}
  #overview .kpi-mini:hover,#project-detail .detail-kpi:hover,#mt-dvz .detail-kpi:hover{transform:none}
}

/* ── page head (2026-09-27) ──────────────────────────────────────────────────
   Satriya: DevBiz should open the way Listing does — a title and sub on the
   canvas, a live Sources strip on the right, then straight into the cards.
   No section labels ("Lead Performance", "Progress Overview", "Ads Trend"):
   each card already names itself. The head is the sticky part, on the white
   canvas, without a box. Everything here is a .dvz-* class this file owns, or
   the Project Detail hero losing its card dress — no display change on an
   existing element. */
.dvz-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:0 0 16px}
/* measured against Listing's head on 2026-09-27 (1600px): title top +6px and
   flush left, sub 4px under it; the head ends on a hairline, not a shadow —
   "aneh banget ada shadow nya" — and the first cards sit 18px below it, the
   gap Listing keeps between its controls and its cards */
.home-stickyhead.dvz-pagehead,#project-detail .detail-stickyhead,#mt-dvz .detail-stickyhead{
  /* the frozen head covers the page gutters too — sized to the content only,
     it let the cards' edges and shadows show beside it on scroll ("bocor");
     the hairline stays the content's width */
  --dvz-gutter:28px;
  margin:0 calc(-1 * var(--dvz-gutter)) 18px;padding-left:var(--dvz-gutter);padding-right:var(--dvz-gutter);
  /* a 3px white lip upward: the topbar (z 60) hides it, and it closes any
     sub-pixel slit between the two that scrolling content could show through */
  box-shadow:0 -3px 0 #fff;border-bottom:0;
  background:linear-gradient(#EEF2F7,#EEF2F7) center bottom / calc(100% - 2 * var(--dvz-gutter)) 1px no-repeat,#fff}
.dvz-head-t{min-width:0}
.dvz-title{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#0F172A}
.dvz-sub{font-size:13px;font-weight:500;color:#64748B;margin-top:4px}
.dvz-sep{color:#94A3B8;margin:0 6px}
.dvz-sub-l{color:#94A3B8;font-weight:500}
.dvz-ds{background:rgba(255,255,255,.72);border:1px solid #EEF2F7;border-radius:999px;padding:3px 6px;backdrop-filter:blur(6px);cursor:default}
.dvz-ds .lgc-ds-i,.dvz-ds .lgc-ds-hd{border-right-color:#EEF2F7}
.dvz-ds-s{color:#94A3B8;font-weight:600}
.dvz-ctlrow{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0}
.dvz-ctl-note{font-size:11px;color:#94A3B8}
.dvz-backrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.dvz-backrow .back-btn{margin-bottom:0}
/* the Project Detail title sits on the canvas like Listing's — same size */
#project-detail .project-hero,#mt-dvz .project-hero{background:transparent !important;border:0 !important;box-shadow:none !important;animation:none;padding:0 0 16px;margin-bottom:0}
#project-detail .project-hero-title,#mt-dvz .project-hero-title{font-size:24px;letter-spacing:-.02em;line-height:1.15}
#project-detail .project-hero-sub,#mt-dvz .project-hero-sub{font-size:13px;font-weight:500;margin-top:4px}
/* what survives of the old KPI labels: the Basis / unsplit notes, only while one is up */
.dvz-notes{display:none;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.dvz-notes:has(> [style*="inline"]){display:flex}
.dvz-notes > .cpb-note,.dvz-notes > .ads-unsplit{margin-left:0}
/* the Ads Trend control row: with the heading gone, PLATFORM starts on the left */
.dvz-trend-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 14px}
/* a filter row between two blocks keeps the same air above and below — 14px,
   Listing's tab-strip gap. The block above ends on a 20px margin, hence -6. */
#overview #home-progress-head,#project-detail #progress-head,#mt-dvz #progress-head{margin-top:-6px}
#home-src-toggle,#chart-src-toggle{margin-bottom:14px}
.dvz-warnline{order:2;margin:0;font-size:11.5px;font-weight:600;color:#B45309}
/* Home's eyebrow: the Back link's size and weight, not a link — the unit in
   the brand blue, what it covers in muted grey */
.dvz-eyebrow{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#2563EB}
.dvz-eyebrow span{color:#64748B;font-weight:500}

/* the chart cards rise one after another, not all at once */
#overview .charts-grid>.chart-card:nth-child(2),#project-detail .charts-grid>.chart-card:nth-child(2),#mt-dvz .charts-grid>.chart-card:nth-child(2){animation-delay:200ms}

/* ── Breakdown: Activity Date cells while their dates load (2026-10-21) ──────
   A pill with one light band sweeping the whole table at once
   (background-attachment:fixed makes every pill share the same band), then the
   waiting cells fade in row by row when the dates land (td.act-in, set by
   actSkelArrive() for 1.5 s; `backwards` fill, so a missed class shows the
   figure as it is). The figures that were already there do not move. */
#project-detail .act-skel{display:inline-block;width:28px;height:9px;border-radius:5px;vertical-align:middle;
  background-color:#EEF2F7;background-image:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 60%);
  background-size:60vw 100%;background-repeat:no-repeat;background-attachment:fixed;animation:dvzActSweep 1.6s ease-in-out infinite}
@keyframes dvzActSweep{from{background-position:-60vw 0}to{background-position:100vw 0}}
html[data-theme="dark"] #project-detail .act-skel{background-color:#26262A;background-image:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 60%)}
#project-detail td.act-in>*{animation:dvzActIn .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--ar,0) * 30ms)}
@keyframes dvzActIn{from{opacity:0;transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){#project-detail .act-skel{animation:none;background-image:none}#project-detail td.act-in>*{animation:none}}

/* ── Breakdown + Funnel Overview figures: Banks' rule (2026-10-21, his ask) ──
   "jangan pake box bg … text aja tapi beda color" and one text size, as on
   Banks → Mortgages (.mt-brk: every figure 12px / 500, no box). Applies to the
   Monthly / Weekly / Daily tables in Project Detail and the All Projects table
   on Home; the KPI cards and charts are untouched.
   · The box: `background:none !important` wins over the light theme's inline
     tint at once; the dark theme pins it with !important, so devbiz-polish.js
     (plainTables) removes it from the cell. !important because the cells carry
     inline backgrounds and inline font sizes / weights.
   · A figure still drills, so hover underlines it instead of darkening a box.
   · Untouched on purpose: the trend arrows (inline 7px), the period pills
     (Contribution / Ads …), the status badge, the project name and its date
     line under it. Column widths stay the tables' own colgroups. */
:is(#monthly-table,#weekly-table,#overview-table) .metric-cell{
  background:none !important;font-size:12px !important;font-weight:500 !important;border-radius:0}
/* One header colour, Banks' (.mt-brk th #64748B) — Spam / Unqual / Open headers
   were tinted and the Avg Reply / RO ones fainter. */
:is(#monthly-table,#weekly-table,#overview-table)>thead>tr>th{color:#64748B !important}
html[data-theme="dark"] :is(#monthly-table,#weekly-table,#overview-table)>thead>tr>th{color:#9C9CA3 !important}
:is(#monthly-table,#weekly-table,#overview-table) .metric-cell:hover{filter:none;text-decoration:underline;text-underline-offset:3px}
:is(#monthly-table,#weekly-table,#overview-table) :is(.cr-cell,.cvr-st,.ads-td,.ov-ctd){font-size:12px !important;font-weight:500 !important}
#overview-table>tbody>tr>td:not(:first-child){font-size:12px !important;font-weight:500 !important}
/* One ink for every figure (2026-10-21, second pass — "ada yang ga black"): the
   rate columns were grey and the response times a decorative blue, so the same
   12px / 500 read lighter there. Colour now only carries meaning — Spam red,
   Unqual amber, Spend pink (as on Banks), Disc% good / bad, the Open Leads
   group, the trend arrows. A cell with no value stays a quiet dash (.dvz-na,
   set by devbiz-polish.js). */
:is(#monthly-table,#weekly-table,#overview-table) :is(td.cr-cell,.cvr-st,.cvr-rw){color:#0F172A !important}
html[data-theme="dark"] :is(#monthly-table,#weekly-table,#overview-table) :is(td.cr-cell,.cvr-st,.cvr-rw){color:#F0F0F2 !important}
:is(#monthly-table,#weekly-table,#overview-table) :is(td,span).dvz-na{color:#CBD5E1 !important}
html[data-theme="dark"] :is(#monthly-table,#weekly-table,#overview-table) :is(td,span).dvz-na{color:#4B4B50 !important}
/* A booking cohort still maturing was a dashed outline round its box; with no
   box it reads as a stray frame. It is a lighter figure now — provisional —
   and keeps its hover note (BK_YOUNG_TITLE). */
:is(#monthly-table,#weekly-table,#overview-table) .metric-cell.bk-young{outline:none !important;color:#94A3B8 !important}
html[data-theme="dark"] :is(#monthly-table,#weekly-table,#overview-table) .metric-cell.bk-young{color:#83838B !important}
/* Fable review, 2026-10-21: the PDP cost-per columns inherited the body ink
   (#0F141B) instead of the figure ink, and a metric cell with no drill (an
   Activity cell at 0) underlined on hover as if it opened something. Inline
   colours (Spend, Disc%) still win over the first rule. */
html:not([data-theme="dark"]) :is(#monthly-table,#weekly-table) td.ads-td{color:#0F172A}
:is(#monthly-table,#weekly-table,#overview-table) .metric-cell:not([onclick]):hover{text-decoration:none}

/* Date filter (2026-10-23) — the Period control beside Showing (Home) and
   Basis (Project Detail); its date inputs open as a popover under Custom, so the row never moves.
   dvzView() in index.html. */
.dvz-ctls{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.dvz-range{position:relative}
.dvz-range-in{position:absolute;top:calc(100% + 6px);right:0;z-index:60;display:inline-flex;align-items:center;gap:6px;padding:8px;background:#fff;border:1px solid #EEF2F7;border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.12)}
.dvz-range-in[hidden]{display:none}
html[data-theme="dark"] .dvz-range-in{background:#18181B;border-color:#303034;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.dvz-range-in .ui-inp{width:134px}
.dvz-range-to{color:#94A3B8;font-size:11px}
#project-detail .pd-view-row .dvz-range{margin-left:auto}
#project-detail .pd-view-row{flex-wrap:wrap}