/* Service Delivery dashboard — app-specific layout only.
   Colors / fonts / radii / motion all come from tokens.css + suite.css. */

.sd-sub { color: var(--color-text-dim); font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; }

/* insight alert cards */
.sd-insight {
  border-left: 3px solid var(--color-warn);
  background: linear-gradient(135deg, var(--warn-bg), var(--color-surface));
  border-radius: var(--radius-sub);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body); line-height: 1.45;
}
.sd-insight.bad  { border-left-color: var(--color-bad);  background: linear-gradient(135deg, var(--bad-bg),  var(--color-surface)); }
.sd-insight.info { border-left-color: var(--color-info); background: linear-gradient(135deg, var(--info-bg), var(--color-surface)); }
.sd-insight .k { font-weight: 900; color: var(--color-text); }

/* category bar list */
.sd-cat { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-soft); }
.sd-cat:last-child { border-bottom: 0; }
.sd-cat .nm { font-weight: 700; font-size: var(--text-body); }
.sd-cat .track { position: relative; height: 22px; background: var(--color-surface-2); border-radius: var(--radius-bar); overflow: hidden; }
.sd-cat .track .ytd { position: absolute; inset: 0 auto 0 0; background: var(--accent-wash-strong); border-right: 2px solid var(--color-accent-bright); }
.sd-cat .track .mtd { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--color-warn), var(--color-bad)); opacity: .9; height: 8px; margin-top: 7px; border-radius: 2px; }
.sd-cat .vals { text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; white-space: nowrap; }
.sd-cat .vals .mt { color: var(--color-warn); font-size: var(--text-label); margin-left: 6px; }
@media (max-width: 640px){ .sd-cat { grid-template-columns: 130px 1fr auto; } .sd-cat .nm { font-size: var(--text-label); } }

.sd-legend { display:flex; gap:var(--space-4); font-size:var(--text-label); color:var(--color-text-dim); margin-top:var(--space-2); }
.sd-legend i { display:inline-block; width:14px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.sd-legend .ig { background: var(--color-accent-bright); }
.sd-legend .im { background: linear-gradient(90deg, var(--color-warn), var(--color-bad)); }

/* leaderboard search + controls */
.sd-controls { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
.sd-search { flex:1 1 220px; background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text); border-radius:var(--radius-btn); padding:10px 14px; font:inherit; font-size:var(--text-body); }
.sd-search::placeholder { color:var(--color-text-faint); }

.sd-lb-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.sw-lb-row { cursor: pointer; }
.sw-lb-row .score.bad { color: var(--color-bad); }
.sw-lb-row .score.warn { color: var(--color-warn); }

/* phase-focus chips */
.sd-pf-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; }
.sd-pf-row .pfname { flex:1; font-weight:700; }
.sd-pf-row .pfbar { flex:2; }
.sd-pf-row .pfn { font-weight:900; font-variant-numeric:tabular-nums; min-width:84px; text-align:right; color:var(--color-text-dim); }

/* detail overlay */
.panel-detail { max-width: 720px; width: 100%; box-shadow: var(--elevation-panel); }
.panel-detail .close { position:absolute; top:14px; right:14px; cursor:pointer; color:var(--color-text-dim); font-size:22px; line-height:1; background:none; border:none; }
.sd-detail-head { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:baseline; }
.sd-detail-head h2 { font-family:var(--font-display); font-weight:900; font-size:var(--text-display); margin:0; }
.sd-mix { margin-top:var(--space-4); }
.sd-mix .row { display:grid; grid-template-columns: 150px 1fr 40px; gap:var(--space-3); align-items:center; padding:5px 0; }
.sd-mix .row .l { font-size:var(--text-label); color:var(--color-text-dim); }
.sd-mix .row .v { text-align:right; font-weight:900; font-variant-numeric:tabular-nums; }
.sd-coach { margin-top:var(--space-4); padding:var(--space-4); border-radius:var(--radius-sub); background:var(--color-bg-deep); border:1px solid var(--color-border); line-height:1.5; }
.sd-coach .lead { font-weight:900; color:var(--color-accent-ink); }
.sd-coach .flag { display:inline-block; margin-top:var(--space-2); font-weight:900; }
.sd-coach .flag.worse { color:var(--color-bad); }
.sd-coach .flag.better { color:var(--color-good); }

.sd-foot { margin-top:var(--space-7); text-align:center; color:var(--color-text-faint); font-size:var(--text-label); line-height:1.6; }
.sd-foot a { color: var(--color-text-dim); }

/* segment lens toggle (Total / Residential / Commercial) */
.sd-seg { display:flex; gap:6px; background:var(--color-bg-deep); border:1px solid var(--color-border); border-radius:var(--radius-sub); padding:5px; }
.sd-seg-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 6px; border:none; border-radius:calc(var(--radius-sub) - 3px); background:transparent; color:var(--color-text-dim); font-family:inherit; font-weight:800; font-size:var(--text-label); letter-spacing:.02em; cursor:pointer; transition:background .15s,color .15s; }
.sd-seg-btn small { font-weight:900; font-size:15px; font-variant-numeric:tabular-nums; color:var(--color-text-faint); }
.sd-seg-btn:hover { color:var(--color-text); }
.sd-seg-btn.on { background:var(--accent-grad); color:#1a1205; box-shadow:0 2px 10px rgba(184,115,51,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.sd-seg-btn.on small { color:#1a1205; opacity:.7; }

.sd-lens-tag { font-weight:900; font-size:var(--text-label); letter-spacing:.04em; text-transform:uppercase; color:#1a1205; background:var(--accent-grad); border-radius:999px; padding:3px 11px; }

/* ============================================================
   Ground Game signature flourishes (copper→gold on charcoal)
   ============================================================ */

/* gold→copper gradient serif wordmark — the GG hallmark */
.sw-brand {
  background: linear-gradient(135deg, #ffe9c2 0%, #ffd24a 40%, #c47333 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 1px 14px rgba(255,210,74,.18);
}
.sd-sub { color: var(--color-accent-ink); opacity: .85; }

/* copper hairline + warm wash under the header */
.sw-header { border-bottom-color: rgba(184,115,51,.35); }

/* card titles get a small copper tick, GG-style */
.sw-card-title { position: relative; }
.sw-card-title::before {
  content:''; position:absolute; left:calc(-1 * var(--space-4)); top:2px; bottom:2px;
  width:3px; border-radius:2px; background:var(--accent-grad);
}

/* category bars — copper→gold fill (was flat wash) */
.sd-cat .track .ytd { background: linear-gradient(90deg, rgba(184,115,51,.35), rgba(255,210,74,.55)); border-right-color: var(--color-gold); }
.sd-legend .ig { background: linear-gradient(90deg, #c47333, #ffd24a); }

/* leaderboard podium — gold / silver / bronze ranks (GG) */
.sw-lb-row .rank { font-weight:900; font-variant-numeric:tabular-nums; }
.sw-lb-row.t1 .rank { color:var(--color-gold);   text-shadow:0 0 12px rgba(255,210,74,.55); }
.sw-lb-row.t1 .score { color:var(--color-gold) !important; text-shadow:0 0 12px rgba(255,210,74,.4); }
.sw-lb-row.t2 .rank { color:var(--color-silver); text-shadow:0 0 10px rgba(200,208,216,.45); }
.sw-lb-row.t3 .rank { color:var(--color-bronze); text-shadow:0 0 10px rgba(205,127,50,.45); }
.sw-lb-row.t1 { background: linear-gradient(90deg, rgba(255,210,74,.10), transparent 60%); border-left:3px solid var(--color-gold); }
.sw-lb-row.t2 { background: linear-gradient(90deg, rgba(200,208,216,.07), transparent 60%); border-left:3px solid var(--color-silver); }
.sw-lb-row.t3 { background: linear-gradient(90deg, rgba(205,127,50,.07), transparent 60%); border-left:3px solid var(--color-bronze); }

/* coaching lead in warm copper-gold */
.sd-coach .lead { color: var(--color-gold); }