/* CoolPlanet design system · v2 · the approved specimen, ported into the app.
   Scoped under .dsx so the specimen's deliberately-generic class names
   (.card/.btn/.row/.input/.pill/.tab/.field) and its tokens cannot collide
   with the rest of the app or shadcn. A page adopts the system by putting
   `dsx` on its content root; everything inside then renders like
   docs/design-system-specimen.html. Reference of record: that file. */

.dsx{
  --bg-canvas:#f4f5f5; --bg-paper:#fbfcfc; --bg-well:#edefef; --bg-deep-well:#e6e8e8;
  --bg-mist:#f0f5f6;
  --surface-graphite:#222525; --surface-inverted:#101010;
  --elev-1:0 1px 2px rgba(16,16,16,.03), 0 10px 30px rgba(16,16,16,.05);
  --fg-primary:#131515; --fg-secondary:#4c5254; --fg-tertiary:#7c8284; --fg-quaternary:#989e9f;
  --border-primary:#e4e6e6; --border-secondary:#d3d6d6;
  --ink-on-inverted:#f2f2f2;
  --ink-85:rgba(242,242,242,0.85); --ink-65:rgba(242,242,242,0.65); --ink-50:rgba(242,242,242,0.50);
  --accent-bright:#11cadb; --accent:#0ea3b2; --accent-deep:#0b6767; --accent-text:#0b6767;
  --accent-tint:rgba(17,202,219,0.08); --accent-tint-strong:rgba(17,202,219,0.22);
  --success:#1f8900; --warning:#e39800; --warning-text:#b27700; --danger:#d64533;
  --r-sm:6px; --r-lg:12px;
  --font-display:var(--font-display-poster),"Inter Tight",system-ui,sans-serif;
  --font-mono:var(--font-mono-poster),"JetBrains Mono",ui-monospace,monospace;
  --font-serif:var(--font-serif-poster),"Source Serif 4",Georgia,serif;
  font-family:var(--font-display);color:var(--fg-primary);transition:color .25s;
}
/* dark mode · graphite, deliberately not black */
html[data-theme="dark"] .dsx{
  --bg-canvas:#303030; --bg-paper:#3a3e3e; --bg-well:#464b4c; --bg-deep-well:#4c5254;
  --bg-mist:#3b4749;
  --surface-graphite:#272a2a;
  --elev-1:0 1px 2px rgba(0,0,0,.14), 0 10px 30px rgba(0,0,0,.20);
  --fg-primary:#f2f2f2; --fg-secondary:#c8cbcb; --fg-tertiary:#9aa0a0; --fg-quaternary:#7c8284;
  --border-primary:rgba(242,242,242,0.10); --border-secondary:rgba(242,242,242,0.20);
  --accent:#11cadb; --accent-text:#7adee9;
  --accent-tint:rgba(17,202,219,0.10); --accent-tint-strong:rgba(17,202,219,0.26);
  --success:#7cc95a; --warning:#e6b12e; --warning-text:#e6b12e; --danger:#e4705f;
}
.dsx *{box-sizing:border-box}

/* a planet band · full climate frame + onyx scrim, rounded, used sparingly */
.dsx .planet-band{position:relative;border-radius:16px;padding:64px 44px;overflow:hidden;
  background:linear-gradient(105deg, rgba(16,16,16,.72) 0%, rgba(16,16,16,.40) 55%, rgba(16,16,16,.12) 100%),
    url('/design-system/assets/climate-bg-generated-20260702.png') center/cover, #101010}
.dsx .panel{background:rgba(18,20,20,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(242,242,242,.16);border-radius:12px;padding:24px 26px;max-width:58ch;color:#f2f2f2}
.dsx .panel .eb{color:rgba(242,242,242,.62)} .dsx .panel h1,.dsx .panel h2,.dsx .panel h3{color:#f2f2f2}
.dsx .panel .sub,.dsx .panel p{color:rgba(242,242,242,.82)} .dsx .panel .aside{color:rgba(242,242,242,.72)}

/* type */
.dsx .eb{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-tertiary)}
.dsx h1{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:4px 0 6px}
.dsx h2{font-size:22px;font-weight:600;margin:4px 0 6px}
.dsx h3{font-size:16px;font-weight:600;margin:2px 0 4px}
.dsx .sub{font-size:13px;color:var(--fg-secondary)}
.dsx .help{font-size:11.5px;color:var(--fg-tertiary)}
.dsx .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.dsx .aside{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--fg-secondary)}
.dsx .aside.inverted{color:var(--ink-65)}
.dsx .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;align-items:center}

/* surfaces · the container follows the content's role */
.dsx .card{background:var(--bg-paper);border:1px solid var(--border-primary);border-radius:var(--r-lg);padding:24px;margin-top:14px}
.dsx .card.mist{background:radial-gradient(120% 110% at 88% -8%, var(--accent-tint-strong), transparent 52%), var(--bg-mist);border:none;border-radius:20px;box-shadow:var(--elev-1)}
.dsx .card.well{background:var(--bg-well);border:none}
.dsx .card.selected{background:var(--accent-tint);border-color:var(--accent)}
.dsx .card.data{border-radius:16px;border-color:var(--border-secondary)}
.dsx .card.graphite,.dsx .card.onyx{
  --fg-primary:#f2f2f2; --fg-secondary:rgba(242,242,242,.78); --fg-tertiary:rgba(242,242,242,.55);
  --fg-quaternary:rgba(242,242,242,.38); --border-primary:rgba(242,242,242,.14);
  --border-secondary:rgba(242,242,242,.24); --accent-text:#7adee9; --accent-tint:rgba(17,202,219,.12);
  /* Re-scope the SURFACE tokens too, so a nested .card / .well inside a dark
     block becomes a translucent light-on-dark panel instead of painting solid
     white paper (which left white text invisible on the light card). */
  --bg-paper:rgba(242,242,242,.07); --bg-well:rgba(242,242,242,.05);
  --bg-mist:rgba(17,202,219,.07); --bg-deep-well:rgba(242,242,242,.09);
  /* accent-deep is a dark teal meant for light surfaces; on a dark block it
     reads as teal-on-black. Lift it to the bright accent so accent text on
     onyx/graphite stays legible. */
  --accent-deep:#7adee9; --accent:#11cadb;
  color:var(--ink-on-inverted);border:none;border-radius:16px}
.dsx .card.graphite{background:var(--surface-graphite)}
.dsx .card.onyx{background:radial-gradient(95% 90% at 10% 108%, rgba(17,202,219,.16), transparent 58%), var(--surface-inverted)}
.dsx .grid64{display:grid;grid-template-columns:60fr 40fr;gap:14px;margin-top:14px}
.dsx .grid46{display:grid;grid-template-columns:40fr 60fr;gap:14px;margin-top:14px}
@media (max-width:720px){.dsx .grid64,.dsx .grid46{grid-template-columns:1fr}}

/* textures */
.dsx .tex-dot{background-image:radial-gradient(circle, rgba(19,21,21,0.09) 1px, transparent 1px);background-size:8px 8px}
html[data-theme="dark"] .dsx .tex-dot{background-image:radial-gradient(circle, rgba(242,242,242,0.10) 1px, transparent 1px)}
.dsx .tex-topo{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='%23131515' stroke-width='0.45' stroke-opacity='0.055'><path d='M165,90 C180,87 195,95 195,110 C195,128 180,135 162,130 C145,124 142,98 158,92 Z'/><path d='M160,73 C188,70 215,82 215,108 C215,140 188,156 152,148 C120,140 113,90 138,76 Z'/><path d='M155,55 C195,50 240,72 240,112 C240,160 195,180 145,168 C95,156 75,98 110,65 Z'/><path d='M148,35 C205,30 275,58 270,118 C265,182 200,215 130,195 C65,176 40,90 90,52 Z'/><path d='M448,180 C465,177 480,186 480,200 C480,218 462,226 445,222 C428,217 423,194 435,184 Z'/><path d='M448,165 C475,162 498,178 498,202 C498,226 472,242 442,233 C415,225 405,195 418,178 Z'/><path d='M445,150 C485,146 518,170 515,202 C512,238 475,258 432,248 C390,238 378,182 400,158 Z'/><path d='M130,288 C145,286 160,294 158,312 C156,332 138,340 122,335 C106,330 102,300 115,290 Z'/><path d='M128,272 C152,268 175,282 173,315 C171,345 142,360 110,350 C82,342 75,300 92,278 Z'/><path d='M530,340 C545,338 557,348 555,363 C553,378 538,385 523,381 C509,376 508,358 518,346 Z'/></g></svg>");background-size:600px 400px}
html[data-theme="dark"] .dsx .tex-topo,.dsx .tex-topo-onyx{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'><g fill='none' stroke='%23f2f2f2' stroke-width='0.45' stroke-opacity='0.06'><path d='M165,90 C180,87 195,95 195,110 C195,128 180,135 162,130 C145,124 142,98 158,92 Z'/><path d='M160,73 C188,70 215,82 215,108 C215,140 188,156 152,148 C120,140 113,90 138,76 Z'/><path d='M155,55 C195,50 240,72 240,112 C240,160 195,180 145,168 C95,156 75,98 110,65 Z'/><path d='M148,35 C205,30 275,58 270,118 C265,182 200,215 130,195 C65,176 40,90 90,52 Z'/><path d='M448,180 C465,177 480,186 480,200 C480,218 462,226 445,222 C428,217 423,194 435,184 Z'/><path d='M448,165 C475,162 498,178 498,202 C498,226 472,242 442,233 C415,225 405,195 418,178 Z'/><path d='M445,150 C485,146 518,170 515,202 C512,238 475,258 432,248 C390,238 378,182 400,158 Z'/><path d='M130,288 C145,286 160,294 158,312 C156,332 138,340 122,335 C106,330 102,300 115,290 Z'/><path d='M128,272 C152,268 175,282 173,315 C171,345 142,360 110,350 C82,342 75,300 92,278 Z'/><path d='M530,340 C545,338 557,348 555,363 C553,378 538,385 523,381 C509,376 508,358 518,346 Z'/></g></svg>");background-size:600px 400px}

/* actions */
.dsx .btn{font-family:var(--font-display);font-size:13px;font-weight:500;padding:8px 16px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease;display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.dsx .btn:active{transform:scale(.97)}
.dsx .btn-dark{background:var(--fg-primary);color:var(--bg-canvas)}
.dsx .btn-accent{background:var(--accent);color:#06343c}
.dsx .btn-quiet{background:transparent;color:var(--fg-secondary);border-color:var(--border-secondary)}
.dsx .btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.dsx .btn:disabled{opacity:.45;cursor:not-allowed}
.dsx .btn-sm{padding:5px 12px;font-size:12px}
.dsx .pill{display:inline-block;font-size:11px;font-weight:500;padding:3px 10px;border-radius:99px}
.dsx .pill-complete{background:rgba(31,137,0,.12);color:var(--success)}
.dsx .pill-pending{background:rgba(227,152,0,.14);color:var(--warning-text)}
.dsx .pill-attention{background:rgba(214,69,51,.12);color:var(--danger)}
.dsx .pill-na{background:var(--bg-deep-well);color:var(--fg-tertiary)}
.dsx .pill-accent{background:var(--accent-tint-strong);color:var(--accent-text)}
.dsx .stamp{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:0;border:1px solid currentColor;flex:none}
.dsx .stamp.danger{color:var(--danger)} .dsx .stamp.warning{color:var(--warning-text)} .dsx .stamp.success{color:var(--success)} .dsx .stamp.accent{color:var(--accent-text)} .dsx .stamp.muted{color:var(--fg-tertiary)}
.dsx .callout{display:flex;gap:14px;align-items:flex-start;background:var(--bg-well);border:none;border-radius:var(--r-lg);padding:14px 16px;font-size:13px;margin-top:12px}

/* fields */
.dsx .field{display:grid;gap:5px}
.dsx .field-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-tertiary)}
.dsx .input,.dsx select.input,.dsx textarea.input{width:100%;padding:8px 11px;font-size:13px;border:1px solid var(--border-secondary);border-radius:var(--r-sm);background:var(--bg-paper);font-family:var(--font-display);color:var(--fg-primary)}
.dsx .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.dsx .check{display:flex;gap:8px;align-items:center;font-size:13px}
.dsx input[type=checkbox],.dsx input[type=radio]{accent-color:var(--accent)}
.dsx input[type=range]{accent-color:var(--accent);width:180px}
.dsx .divider{border:none;border-top:1px solid var(--border-primary);margin:20px 0}
.dsx .divider.dashed{border-top-style:dashed}

/* tables */
.dsx table.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.dsx table.tbl th{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--fg-tertiary);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-secondary)}
.dsx table.tbl td{padding:9px 10px;border-bottom:1px solid var(--border-primary)}
.dsx table.tbl .r{text-align:right}
.dsx table.tbl tr:hover td{background:var(--accent-tint)}
.dsx table.tbl tfoot td{border-bottom:none;font-weight:600;border-top:1px solid var(--border-secondary)}

/* coverage pips */
.dsx .pips{display:flex;gap:5px;flex-wrap:wrap}
.dsx .pip{width:10px;height:10px;border-radius:2px}
.dsx .pip.done{background:var(--fg-primary)} .dsx .pip.gap{background:var(--accent)} .dsx .pip.na{background:transparent;border:1px solid var(--border-secondary)}

/* navigation */
.dsx .shellbar{display:flex;justify-content:space-between;align-items:center;background:var(--bg-paper);border:1px solid var(--border-primary);border-radius:var(--r-lg);padding:12px 18px;gap:12px;flex-wrap:wrap}
.dsx .crumbs{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-tertiary)}
.dsx .crumbs b{color:var(--fg-primary)}
.dsx .tabstrip{display:flex;justify-content:center;gap:8px 34px;border-bottom:1px solid var(--border-primary);flex-wrap:wrap}
.dsx .tabgroup{display:flex;gap:22px;align-items:flex-end}
.dsx .tabgroup .glabel{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-quaternary);padding-bottom:10px}
.dsx .tab{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--fg-secondary);padding:8px 2px;border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.dsx .tab.active{color:var(--fg-primary);font-weight:600;border-bottom-color:var(--accent)}
.dsx .tab .dot{width:6px;height:6px;border-radius:99px;background:var(--fg-quaternary)}
.dsx .tab .dot.done{background:var(--fg-primary)} .dsx .tab .dot.active{background:var(--accent)}
/* reset the global ds-v2 `.steps` stepper-card (grid, gradient, lime border,
   xl radius, big padding) that collides on this generic name — the specimen
   `.steps` is a slim inline readout, not a card. */
.dsx .steps{display:flex;align-items:center;gap:10px;background:none;border:none;border-radius:0;padding:0;box-shadow:none}
.dsx .steps .bar{flex:1;height:3px;border-radius:99px;background:var(--bg-deep-well);overflow:hidden}
.dsx .steps .bar i{display:block;height:100%;background:var(--accent)}

.dsx .legend{display:flex;gap:16px;font-size:11.5px;color:var(--fg-secondary);margin-top:8px}
.dsx .legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* feedback */
.dsx .toast{display:inline-flex;gap:10px;align-items:center;background:var(--surface-inverted);color:var(--ink-on-inverted);border-radius:10px;padding:11px 16px;font-size:13px;box-shadow:0 8px 24px rgba(16,16,16,.18)}
.dsx .toast .stamp{font-size:9px;padding:3px 7px}
.dsx .skeleton{border-radius:6px;background:linear-gradient(90deg,var(--bg-well) 25%,var(--bg-deep-well) 40%,var(--bg-well) 55%);background-size:300% 100%;animation:dsx-sk 1.4s infinite linear}
@keyframes dsx-sk{to{background-position:-300% 0}}
.dsx .empty{padding:28px;text-align:center;background:var(--bg-well);border-radius:var(--r-lg);font-size:13px;color:var(--fg-secondary)}
.dsx .dialog{background:var(--bg-paper);border-radius:var(--r-lg);padding:24px;max-width:430px;box-shadow:0 18px 48px rgba(16,16,16,.24)}