@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Public+Sans:wght@300;400&family=Roboto+Mono:wght@400;500&display=swap');

/* ==========================================================================
   Insight Softmax brand tokens — Quantum Stability Monitor
   Source: ISC Style Sheet Mar 2025
   ========================================================================== */

:root {
  /* Brand colors */
  --isc-dark-blue:    #363D47;
  --isc-gold:         #CC8A00;
  --isc-rich-black:   #212721;
  --isc-cool-gray:    #D9D8D6;

  /* Gold tints */
  --isc-gold-80:      #D39D4E;
  --isc-gold-60:      #DDB275;
  --isc-gold-40:      #E7C89D;
  --isc-gold-20:      #F1E1C9;

  /* Dark blue tints */
  --isc-blue-80:      #54565E;
  --isc-blue-60:      #74737B;
  --isc-blue-40:      #99979D;
  --isc-blue-20:      #C4C3C6;

  /* Cool gray tints */
  --isc-gray-80:      #E0DFDD;
  --isc-gray-60:      #E7E6E4;
  --isc-gray-40:      #EEEDEB;
  --isc-gray-20:      #F5F4F3;

  /* Semantic aliases */
  --isc-text:         var(--isc-rich-black);
  --isc-muted:        var(--isc-blue-60);
  --isc-bg:           #ffffff;
  --isc-surface:      var(--isc-gray-20);
  --isc-border:       var(--isc-gray-60);

  /* Observable Framework overrides */
  --theme-foreground:        var(--isc-rich-black);
  --theme-foreground-muted:  var(--isc-muted);
  --theme-foreground-faint:  var(--isc-blue-40);
  --theme-foreground-focus:  var(--isc-dark-blue);
  --theme-background:        var(--isc-bg);
  --theme-background-alt:    var(--isc-surface);
}

/* ==========================================================================
   Global typography
   ========================================================================== */

body {
  font-family: 'Public Sans', sans-serif;
  font-weight: 300;
  color: var(--isc-text);
}

h1, h2, h3, h4 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  color: var(--isc-dark-blue);
}

code, pre, .mono {
  font-family: 'Roboto Mono', monospace;
}

/* ==========================================================================
   Sidebar — use dark text on Observable Framework's default light sidebar
   ========================================================================== */

#observablehq-sidebar {
  border-right: 2px solid var(--isc-gold);
}

#observablehq-sidebar a,
#observablehq-sidebar summary,
#observablehq-sidebar p {
  color: var(--isc-dark-blue);
  font-family: 'Public Sans', sans-serif;
}

#observablehq-sidebar a:hover {
  color: var(--isc-gold);
  background: var(--isc-gold-20);
}

#observablehq-sidebar a[aria-current="page"] {
  color: var(--isc-rich-black);
  background: var(--isc-gray-40);
  font-weight: 600;
  border-left: 3px solid var(--isc-gold);
}

#observablehq-sidebar header,
#observablehq-sidebar h1,
#observablehq-sidebar h2 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  color: var(--isc-rich-black);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Platform cards
   ========================================================================== */

.platform-card {
  border: 1px solid var(--isc-border);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  background: var(--isc-surface);
  min-height: 9rem;
}

.platform-card .metric {
  font-family: 'Work Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--isc-dark-blue);
  line-height: 1;
}

.platform-card .metric-label {
  font-size: 0.72rem;
  color: var(--isc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.3rem;
}

.platform-card .platform-name {
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--isc-dark-blue);
}

/* ==========================================================================
   Status badges
   ========================================================================== */

.badge {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.badge-active     { background: var(--isc-gold-20);  color: #7a4f00; }
.badge-paused     { background: var(--isc-gray-60);   color: var(--isc-blue-80); }
.badge-historical { background: var(--isc-blue-20);   color: var(--isc-dark-blue); }

/* ==========================================================================
   Data table — row hover highlight, no selection chrome
   ========================================================================== */

.observablehq tbody tr:hover td {
  background: var(--isc-gray-40);
}

/* ==========================================================================
   Contact form
   ========================================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-form label {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--isc-dark-blue);
}

.contact-form input,
.contact-form textarea {
  font-family: 'Public Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--isc-border);
  border-radius: 4px;
  background: var(--isc-bg);
  color: var(--isc-text);
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--isc-gold);
}

.contact-form textarea {
  resize: vertical;
}

.contact-submit {
  align-self: flex-start;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  background: var(--isc-gold);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.contact-submit:hover {
  background: var(--isc-gold-80);
}

/* ==========================================================================
   Footer
   ========================================================================== */

#observablehq-footer {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  color: var(--isc-muted);
  border-top: 1px solid var(--isc-border);
  padding-top: 1rem;
}