/* =============================================================
   PROTOTYPE — "Urban Systems" theme
   -------------------------------------------------------------
   Borrowed from info5410.tech.cornell.edu: Parabolica (display) and
   Parabolica Text (body) from the Adobe Fonts kit, an off-white
   ground, near-black ink, Cornell blue as the single accent, square
   hairline-bordered cards, dashed underlines, a hairline under each
   section heading, and a dark mode (navy ground, orange accent) that
   follows the system setting.

   Loaded after tokens.css and site.css, so it only repoints tokens
   and overrides components. Delete the import and the site is back
   to the house style.
   ============================================================= */

@import url('https://use.typekit.net/krx4hav.css');

:root {
  color-scheme: light dark;

  --accent:       #006CAC;
  --accent-hover: #00507F;
  --accent-wash:  #E3EEF5;
  --cta:          #006CAC;
  --cta-hover:    #00507F;
  --cta-shadow:   #003A5C;

  --ink:      #282728;
  --graphite: #282728;
  --slate:    #282728;
  --steel:    #5F5D5F;
  --mist:     #8A888A;
  --fog:      #8C8A8C;
  --cloud:    #D9D5D5;
  --haze:     #F2EDE2;
  --paper:    #F6F2E9;

  --bg:         #FAF7F0;   /* warm ivory: our own pastel, not the reference mint */
  --surface:    #FAF7F0;
  --border:     #E3DCCD;
  --rule:       rgba(40, 39, 40, 0.3);

  --font-sans:    "parabolica-text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "parabolica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* The reference runs a bigger top of scale: 3rem h1 on wide screens. */
  --step-4: 1.875rem;
  --step-5: 2.25rem;
  --step-6: 3rem;

  --maxw: 72rem;            /* max-w-6xl frame; prose keeps its own measure */
  --dur:  300ms;
  --ease: ease;

  --logo-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent:       #FF6B01;
    --accent-hover: #FF8A3A;
    --accent-wash:  #3A3340;
    --cta:          #FF6B01;
    --cta-hover:    #E85F00;
    --cta-shadow:   #8A3302;

    --ink:      #EAEDF3;
    --graphite: #EAEDF3;
    --slate:    #EAEDF3;
    --steel:    #B4BACB;
    --mist:     #8D95AC;
    --fog:      #8D95AC;
    --cloud:    #4A4F63;
    --haze:     #2A3145;
    --paper:    #262C3F;

    --bg:      #212737;
    --surface: #212737;
    --border:  rgba(171, 75, 8, 0.55);
    --rule:    rgba(234, 237, 243, 0.3);

    --text-on-accent: #212737;
    --focus: #FFDD00;

    --logo-filter: invert(1);
  }
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  font-variant-numeric: normal;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.main { flex: 1; padding-bottom: var(--space-8); }
.container { padding: 0 var(--space-5); }

/* ---------- header: wordmark · links · meta + logo, on the page ground ---------- */

.nav {
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3) var(--space-4);
}
.nav .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--text);
}
.nav .brand:hover { color: var(--accent); }
.nav-links { gap: var(--space-1); }
.nav-links a, .nav-end a, .nav .linkbutton {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border: 0;
}
.nav-links a:hover, .nav-end a:hover, .nav .linkbutton:hover,
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav-links a.active { font-weight: 700; border: 0; }
/* The tab drop (site.css .nav:has(+ .sectionbar)) must reach exactly to
   the masthead's hairline: this header's bottom padding, plus the line. */
.nav { --nav-tab-drop: calc(var(--space-4) + 1px); }
.nav:has(+ .sectionbar) .nav-links a.active { border: 1px solid var(--border); border-bottom: 0; }
@media (max-width: 640px) {
  .nav:has(+ .sectionbar) .nav-links a.active { border: 0; }
}
.nav-end { margin-left: 0; align-items: center; gap: var(--space-2); }
.nav-end a.nav-who, .nav-who { color: var(--text-muted); }
.nav-right { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- type ---------- */

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
h1 { font-size: var(--step-5); line-height: 1.1; }
@media (min-width: 1024px) { h1 { font-size: var(--step-6); } }

/* Section heading: inline-block with a hairline under its own width. */
h2 {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  padding-bottom: 0.5rem;
  margin: var(--space-8) 0 1.25rem;
}
h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--rule);
}
.footer h2::after, .side h2::after { display: none; }
.pagehead + h2 { margin-top: var(--space-5); }

.pagehead { padding: var(--space-7) 0 0; margin-bottom: var(--space-6); max-width: 48rem; }
.lead { font-size: 1.0625rem; line-height: 1.6; max-width: 48rem; }
.pagehead .lead:first-of-type { margin-top: var(--space-5); }
p, ul, ol { max-width: 48rem; }
strong { font-weight: 700; }

ul li::marker, ol li::marker { color: var(--accent); }

/* Links: ink with a dashed underline; the accent arrives on hover. */
a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent); text-decoration-thickness: 1px; }

/* ---------- cards: the linklist becomes a grid of square hairline boxes ---------- */

.linklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: none;
}
@media (min-width: 640px)  { .linklist { grid-template-columns: repeat(2, 1fr); } }
.linklist li {
  margin: 0;
  padding: 1.5rem;
  min-height: 0;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.linklist li::before { display: none; }
.linklist li:hover { border-color: var(--accent); }
.linklist .t {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
}
.linklist .t::after { content: " →"; color: var(--accent); }
.linklist .t:hover { color: var(--accent); }
.linklist p { margin: 0; font-size: 0.9375rem; color: var(--text); opacity: 0.85; }

.panel, .side { border: 1px solid var(--border); background: transparent; border-radius: 0; }

.row:hover, tbody tr:hover > td { background: var(--haze); }

/* Tables: the reference boxes every cell. */
th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; }
th { padding-top: 0.5rem; }

.meta, .row-meta, .tag { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }

/* Buttons: flat, square, no drop shadow. */
.btn { box-shadow: none; margin-bottom: 0; font-family: var(--font-sans); border-radius: 0; }
.btn:active { top: 0; }
.btn-secondary { background: transparent; border: 1px solid var(--border-strong); box-shadow: none; }
.btn-secondary:hover { background: var(--haze); }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="search"], input[type="date"],
select, textarea {
  border: 1px solid var(--fog);
  background: var(--bg);
}

/* <details> as a bordered disclosure, as on the course page. */
details {
  border: 1px solid var(--border);
  margin: var(--space-6) 0;
  max-width: 48rem;
}
details > summary {
  padding: 0.875rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; color: var(--accent); }
details[open] > summary { border-bottom: 1px solid var(--border); }
details[open] > summary::after { content: "−"; }
details > :not(summary) { padding: 0 1.5rem; }
details > :not(summary):first-of-type { padding-top: 0.75rem; }

/* ---------- footer: a single quiet line on the page ground ---------- */

.footer {
  margin-top: auto;
  padding: var(--space-6) 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 0.9rem;
}
.footer .container { max-width: var(--maxw); }
.footer-logo { width: auto; height: 120px; filter: var(--logo-filter); }
.footer-about h3 { font-family: var(--font-display); }
.footer-about p { opacity: 0.85; }
.footer-about a, .footer a { color: var(--text); text-decoration-style: dashed; }
.footer a:hover { color: var(--accent); }
.footer-nav a { font-weight: 500; }
.footer-end { opacity: 0.75; color: var(--text); }

@media (max-width: 640px) {
  .nav-links { order: 3; width: 100%; margin-left: calc(var(--space-2) * -1); }
  .nav-end { width: auto; }
}

/* Category dots keep their own hues; nothing else here touches them. */

/* ---------- Horizon Scan app ---------- */

/* The off-canvas drawer's shadow bled into the right edge of the page
   while it was closed; only cast it when the drawer is open. */
.detail { box-shadow: none; }
.detail.open { box-shadow: var(--shadow-lg); }

/* Auth pages: room above the eyebrow, heading tight beneath it. */
.login-wrap { padding-top: var(--space-7); }
.login-wrap .section-head h2 { margin-top: var(--space-1); }

/* Filter toggles: hairline edge like the cards, accent when active. */
.filter { border: 1px solid var(--fog); font-weight: 500; }
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.on, .filter.on:hover {
  background: var(--text); border-color: var(--text); color: var(--bg);
}