/* =========================================================================
   DS v4 — SECTOR COLOUR SYSTEM (18 tokens), harmonised for v4.
   Prod painted whole cards in saturated hues with white text; here sector
   colour becomes an identification MARK on the warm ground:
   · a swatch dot + tinted pill carry the code (colour never alone — the
     label always says the word, per the severity-ladder rule)
   · featured cards take a faint wash of their hue, never a saturated ground
   · teal stays the only action colour; hues re-tuned to sit on cream
     (desaturated a step, warmed) and constant across modes
   Dark scope adapted [data-mode="dark"] → .dark.
   ========================================================================= */

:root {
  --sc-construction: #b25a12; --sc-retail: #3b62c4; --sc-hospitality: #c0432f;
  --sc-tech: #7551c9;         --sc-finance: #1d7a5f; --sc-manufacturing: #2a6f96;
  --sc-health: #c23a72;       --sc-lifesciences: #22758a; --sc-creative: #ad6114;
  --sc-agriculture: #5d7c25;  --sc-energy: #9c7018;  --sc-transport: #22758a;
  --sc-education: #5a55c2;    --sc-sports: #2e7d43;  --sc-environment: #1f766b;
  --sc-defence: #4d5866;      --sc-mining: #8a4a1c;  --sc-charities: #b03060;
}
.dark .sector-card, .dark .sector-row { --ink: color-mix(in srgb, var(--sc) 55%, #fff); }

/* per-sector hue assignment (implementation glue — templates set the class) */
.sc-construction { --sc: var(--sc-construction); } .sc-retail { --sc: var(--sc-retail); }
.sc-hospitality { --sc: var(--sc-hospitality); }   .sc-tech { --sc: var(--sc-tech); }
.sc-finance { --sc: var(--sc-finance); }           .sc-manufacturing { --sc: var(--sc-manufacturing); }
.sc-health { --sc: var(--sc-health); }             .sc-lifesciences { --sc: var(--sc-lifesciences); }
.sc-creative { --sc: var(--sc-creative); }         .sc-agriculture { --sc: var(--sc-agriculture); }
.sc-energy { --sc: var(--sc-energy); }             .sc-transport { --sc: var(--sc-transport); }
.sc-education { --sc: var(--sc-education); }       .sc-sports { --sc: var(--sc-sports); }
.sc-environment { --sc: var(--sc-environment); }   .sc-defence { --sc: var(--sc-defence); }
.sc-mining { --sc: var(--sc-mining); }             .sc-charities { --sc: var(--sc-charities); }

/* generic wash surface (implementation glue — what sector_bg_class emits):
   the featured-card treatment on any element; neutral when no sc-* class */
.sector-wash { --ink: var(--sc, var(--color-text-secondary)); background: color-mix(in srgb, var(--sc, transparent) 6%, var(--color-bg-white)); border: 1px solid color-mix(in srgb, var(--sc, var(--color-border-light)) 28%, transparent); color: var(--color-text-primary); }
.dark .sector-wash { --ink: color-mix(in srgb, var(--sc, #fff) 55%, #fff); }

/* ---- featured sector cards — faint wash of the hue -------------------------- */
.sector-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: calc(24px * var(--rk)); }
@media (max-width: 700px) { .sector-feat { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { .sector-feat { grid-template-columns: repeat(4, 1fr); } }
.sector-card { --ink: var(--sc); display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--sc) 6%, var(--color-bg-white)); border: 1px solid color-mix(in srgb, var(--sc) 28%, transparent); border-radius: var(--border-radius-lg); padding: 20px 24px; text-decoration: none; color: inherit; transition: box-shadow var(--transition-base); }
.sector-card:hover { box-shadow: var(--shadow-md); }
.sector-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.sector-card h3 { font-family: var(--font-heading); font-size: 20px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 0; color: var(--color-text-primary); }
.sector-card p { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 0; }
.sector-card .meta { margin-top: auto; padding-top: 8px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* neutral variant: white card, hue only in the meta line (the dot went with the
   "Sector" overline — every card on that page is a sector, so it labelled nothing) */
[data-featured="neutral"] .sector-card { background: var(--color-bg-white); border-color: var(--color-border-light); box-shadow: var(--shadow-sm); }

/* ---- all-sectors rows — compact, dot-coded, 3-up ---------------------------- */
.sector-all { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: calc(24px * var(--rk)); }
@media (max-width: 700px) { .sector-all { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { .sector-all { grid-template-columns: repeat(3, 1fr); } }
.sector-row { --ink: var(--sc); display: flex; align-items: center; gap: 12px; background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-md); padding: 12px 16px; text-decoration: none; color: inherit; transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.sector-row:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--sc) 40%, transparent); }
.sector-row:hover .name { text-decoration: underline; text-decoration-thickness: 2px; }
.sector-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); flex: none; }
.sector-row .name { font-family: var(--font-heading); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-text-primary); }
.sector-row .n { margin-left: auto; font-size: 13px; line-height: 20px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* the reusable site-wide mark: tinted sector pill (badge-family shape) */
.sector-pill { --ink: var(--sc); display: inline-flex; align-items: center; gap: 6px; border-radius: var(--border-radius-pill); padding: 2px 10px 2px 8px; font-size: 12px; line-height: 16px; font-weight: 650; background: color-mix(in srgb, var(--sc) 10%, var(--color-bg-white)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--sc) 24%, transparent); }
.sector-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.dark .sector-pill { --ink: color-mix(in srgb, var(--sc) 55%, #fff); background: color-mix(in srgb, var(--sc) 22%, var(--color-bg-white)); }

/* ---- single-sector page ------------------------------------------------------ */
.sector-rule { height: 3px; background: var(--sc); }
.sector-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--ink, var(--sc)); margin: 0 0 16px; }
.sector-mark::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); flex: none; }
.dark .gv-hero, .dark .sector-strip { --ink: color-mix(in srgb, var(--sc) 55%, #fff); }

/* stats strip — flat, column hairlines, provenance credit (Guvnor voice) */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: calc(24px * var(--rk)); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; gap: 24px 24px; } }
.stats > div { border-left: 1px solid var(--color-border-light); padding-left: 24px; }
.stats > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 760px) { .stats > div:nth-child(3) { border-left: 0; padding-left: 0; } }
.stats dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.stats dd { font-family: var(--font-heading); font-size: 32px; line-height: 36px; letter-spacing: -0.02em; font-weight: 650; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.stats .qual { font-size: 13px; line-height: 20px; color: var(--color-text-secondary); margin-top: 2px; }
.stats-src { display: flex; align-items: center; gap: 8px; margin-top: calc(16px * var(--rk)); font-size: 13px; line-height: 20px; color: var(--color-text-muted); }
.stats-src svg { width: 15px; height: 15px; flex: none; color: var(--color-accent); }
.stats-src b { font-weight: 650; color: var(--color-text-secondary); }

/* subsector rows — flat dividers, SIC codes in mono */
.subsecs { display: flex; flex-direction: column; margin-top: calc(16px * var(--rk)); }
.subsecs > div { display: grid; grid-template-columns: 220px 1fr auto; gap: 8px 24px; padding: calc(16px * var(--rk)) 0; border-top: 1px solid var(--color-border-light); align-items: baseline; }
.subsecs > div:first-child { border-top: 0; }
.subsecs h3 { font-family: var(--font-heading); font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
.subsecs p { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 0; }
.subsecs .sic { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 20px; color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 700px) { .subsecs > div { grid-template-columns: 1fr; gap: 2px; } }

@media print { .sector-card, .sector-row { break-inside: avoid; } }