/* ==========================================================================
   TAMKAT — Low Floor / High Ceiling
   Design notes: navy + teal + orange, carried over from the original Canva
   page so it still feels like the same resource, but on a calmer grid.
   ========================================================================== */

:root {
  --navy:        #1B2F55;
  --navy-deep:   #142440;
  --teal:        #0E8C9E;
  --orange:      #E1701A;

  --bg:          #F4F6F9;
  --surface:     #FFFFFF;
  --surface-alt: #FBFCFD;
  --ink:         #16202F;
  --ink-soft:    #4A5A70;
  --ink-faint:   #7A8798;
  --line:        #DFE5EC;
  --line-soft:   #EBEFF4;

  --accent:      var(--teal);

  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 1px 2px rgba(20, 36, 64, .06), 0 4px 14px rgba(20, 36, 64, .06);
  --shadow-lift: 0 4px 8px rgba(20, 36, 64, .09), 0 14px 30px rgba(20, 36, 64, .12);

  --wrap:        1180px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #10161F;
    --surface:     #1A222E;
    --surface-alt: #202936;
    --ink:         #EAEFF6;
    --ink-soft:    #AEBCCD;
    --ink-faint:   #8494A8;
    --line:        #2C384A;
    --line-soft:   #232E3D;
    --navy:        #16243D;
    --navy-deep:   #0E1727;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --shadow-lift: 0 4px 8px rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--orange); color: #fff; padding: 12px 18px; z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  background:
    radial-gradient(1100px 420px at 12% -30%, rgba(14,140,158,.55), transparent 62%),
    radial-gradient(760px 340px at 96% 0%, rgba(225,112,26,.30), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 60px 0 40px;
}

.hero__eyebrow {
  margin: 0 0 12px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.hero__title {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.03;
}
/* The accent falls on the half about extending thinking, not on decoration. */
.hero__title-accent { color: var(--orange); }

.hero__title .hero__title-break { display: inline; }
/* Break between the two sentences once the line gets tight, so it never
   splits mid-sentence. */
@media (max-width: 720px) {
  .hero__title .hero__title-break { display: block; height: 0; }
}

.hero__sub {
  margin: 10px 0 0;
  font-size: clamp(1rem, 2.3vw, 1.3rem);
  font-weight: 500; color: #8FD9E3;
}

.hero__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  color: rgba(255,255,255,.80);
  font-size: 1rem;
}
.hero__lede strong { color: #fff; font-weight: 650; }

/* ---------- Directory ------------------------------------------------------
   The main navigation. Every category is a panel on the dark band, with all of
   its options listed underneath — nothing hidden behind a hover.
   -------------------------------------------------------------------------- */

.directory {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  padding: 44px 0 52px;
  color: #fff;
}

.directory__heading {
  margin: 0;
  text-align: center;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 750; letter-spacing: -.02em;
}

.directory__sub {
  margin: 8px 0 32px;
  text-align: center;
  font-size: .95rem;
  color: rgba(255,255,255,.66);
}

.directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 22px;
  align-items: start;
}

.panel {
  background: var(--surface);
  border-radius: 16px;
  padding: 22px 18px 18px;
  box-shadow: 0 10px 24px rgba(8,16,34,.20);
  display: flex; flex-direction: column;
}

.panel__head {
  display: block; text-align: center; text-decoration: none;
  color: inherit;
  padding-bottom: 16px;
}

.panel__title {
  margin: 0;
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink);
}
.panel__head:hover .panel__title { color: var(--cat); }

.panel__sub {
  margin: 5px 0 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cat);
}

.panel__list { display: flex; flex-direction: column; gap: 8px; }

/* Rows echo the dashboard pattern: full-width tinted bar, name on the left,
   round icon badge on the right. */
.option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 12px 11px 15px;
  border: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--cat) 11%, var(--surface));
  font: inherit; text-align: left; text-decoration: none;
  color: inherit; cursor: pointer;
  transition: background .14s ease, transform .14s ease;
}
.option:hover {
  background: color-mix(in srgb, var(--cat) 18%, var(--surface));
  transform: translateX(2px);
}

.option__text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }

.option__name {
  font-size: .93rem; font-weight: 700; line-height: 1.25;
  color: var(--cat);
}
.option__caret { margin-left: 5px; font-weight: 700; }

.option__lens {
  font-size: .73rem; font-style: italic; line-height: 1.35;
  color: var(--ink-faint);
}

.option__badge {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent);
}

/* The drawn icons carry their own rounded tile and colour, so they replace the
   badge chrome rather than sitting inside it. */
.option__badge--art {
  background: none;
  border: 0;
  border-radius: 0;
}

/* Waiting on a link — still listed and still clickable, just visibly not
   finished yet. Every row looks like this until the URLs land in the Sheet. */
.option--pending { background: color-mix(in srgb, var(--cat) 5%, var(--surface)); }
.option--pending .option__name { color: var(--ink-soft); }
.option--pending .option__caret { opacity: .45; }
.option--pending .option__badge { filter: grayscale(.4); opacity: .8; }

.option__soon {
  flex: none;
  font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 5px;
}

.panel__empty {
  margin: 0; padding: 10px 4px;
  font-size: .84rem; font-style: italic; color: var(--ink-faint);
}

/* ---------- Controls ------------------------------------------------------ */

.controls {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(20,36,64,.03);
}

.controls__inner { padding-top: 14px; padding-bottom: 12px; }

.controls__row--primary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
}

.search { flex: 1 1 260px; min-width: 220px; position: relative; }
.search__label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
}
.search__input {
  width: 100%;
  padding: 9px 13px;
  font: inherit; font-size: .95rem;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}
.search__input::placeholder { color: var(--ink-faint); }
.search__input:focus { border-color: var(--teal); background: var(--surface); }

.filtergroup__label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font: inherit; font-size: .855rem; font-weight: 600;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease, color .13s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
@media (prefers-color-scheme: dark) {
  body:not(.is-embed) .chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #06222A; }
}

.chips--smp .chip { padding: 6px 12px; font-size: .82rem; }
.chip__num { font-weight: 800; margin-right: 6px; opacity: .85; }

.btn-clear {
  font: inherit; font-size: .85rem; font-weight: 650;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--orange);
  background: transparent; color: var(--orange);
  cursor: pointer; align-self: flex-end;
}
.btn-clear:hover { background: var(--orange); color: #fff; }

.smp { margin-top: 12px; }
.smp__summary {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-soft);
  padding: 5px 0;
}
.smp__summary::-webkit-details-marker { display: none; }
.smp__summary::before {
  content: "▸"; font-size: .8rem; color: var(--ink-faint);
  transition: transform .15s ease; display: inline-block;
}
.smp[open] .smp__summary::before { transform: rotate(90deg); }
.smp__summary:hover { color: var(--ink); }
.smp__count {
  background: var(--orange); color: #fff;
  border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 800;
}
.smp__body { padding: 4px 0 10px 18px; }
.smp__intro { margin: 0 0 9px; font-size: .82rem; color: var(--ink-faint); }

.resultcount {
  margin: 10px 0 0;
  font-size: .82rem; color: var(--ink-faint);
  min-height: 1.2em;
}

/* ---------- Sections ------------------------------------------------------ */

main { padding: 40px 0 20px; }

.section { margin-bottom: 52px; scroll-margin-top: 150px; }
.section[hidden] { display: none; }

.section__head {
  border-top: 4px solid var(--cat, var(--teal));
  padding-top: 16px;
  margin-bottom: 20px;
}

.section__headline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
}

.section__title {
  margin: 0;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 800; letter-spacing: -.02em;
  color: var(--ink);
}

.section__subtitle {
  margin: 0;
  font-size: .93rem; font-weight: 650; font-style: italic;
  color: var(--cat, var(--teal));
}

.section__blurb {
  margin: 7px 0 0;
  max-width: 72ch;
  font-size: .93rem; color: var(--ink-soft);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
}

/* ---------- Cards --------------------------------------------------------- */

.card {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--cat, var(--teal));
  opacity: 0; transition: opacity .16s ease;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--cat, var(--teal)) 45%, var(--line));
}
a.card:hover::before { opacity: 1; }

.card__icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  font-size: 1.45rem; line-height: 1;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cat, var(--teal)) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cat, var(--teal)) 24%, transparent);
}

.card__icon--art {
  background: none;
  border: 0;
}

.card__title {
  margin: 0;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.3;
}

.card__lens {
  margin: -4px 0 0;
  font-size: .84rem; font-style: italic; font-weight: 550;
  color: color-mix(in srgb, var(--cat, var(--teal)) 78%, var(--ink));
}

.card__foot {
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: .74rem; color: var(--ink-faint);
}

.card__note { font-weight: 600; }

.card__go {
  font-weight: 700; color: var(--cat, var(--teal));
  white-space: nowrap;
}

.card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 5px;
  background: var(--surface-alt); border: 1px solid var(--line-soft);
  color: var(--ink-faint);
}
.tag--on {
  background: color-mix(in srgb, var(--orange) 15%, var(--surface));
  border-color: color-mix(in srgb, var(--orange) 40%, transparent);
  color: var(--orange);
}

/* Cards with no link yet — visibly "not ready", but still findable */
.card--nolink {
  border-style: dashed;
  background: var(--surface-alt);
  box-shadow: none;
}
.card--nolink .card__title { color: var(--ink-soft); }
.card--nolink .card__go { color: var(--ink-faint); font-weight: 600; font-style: italic; }

/* Filtered-out categories shrink to a whisper rather than eating the screen. */
.section--empty { margin-bottom: 26px; }
.section--empty .section__head { margin-bottom: 8px; opacity: .55; }
.section--empty .section__blurb { display: none; }
.section--empty .section__title { font-size: 1.15rem; }

/* Landing on a card from the directory — a brief pulse so you spot it. */
@keyframes cardflash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cat) 70%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.card--flash {
  animation: cardflash 1.1s ease-out 2;
  border-color: var(--cat);
}

.section__empty {
  margin: 0;
  font-size: .84rem; font-style: italic; color: var(--ink-faint);
}

.noresults {
  text-align: center; padding: 60px 20px;
  font-size: 1.05rem; color: var(--ink-soft);
}

.linkbtn {
  font: inherit; font-size: inherit; font-weight: 700;
  background: none; border: 0; padding: 0;
  color: var(--orange); cursor: pointer; text-decoration: underline;
}

/* ---------- Back-up button -------------------------------------------------
   The page is long, and on a phone a jump you can't reverse is a trap. This
   appears the moment the directory scrolls out of reach.
   -------------------------------------------------------------------------- */

.backup {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border: 0; border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit; font-size: .875rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(10,20,40,.24), 0 12px 28px rgba(10,20,40,.28);
  transition: transform .14s ease, background .14s ease;
}
.backup:hover { background: var(--teal); transform: translateY(-2px); }
.backup[hidden] { display: none; }

.backup__arrow { font-size: 1rem; line-height: 1; }

@media (prefers-color-scheme: dark) {
  .backup { background: var(--teal); color: #06222A; }
  .backup:hover { background: #14A8BD; }
}

/* ---------- Footer -------------------------------------------------------- */

.footer {
  margin-top: 30px;
  padding: 30px 0 46px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: .85rem;
}
.footer p { margin: 0 0 5px; }
.footer__credit { font-weight: 650; color: var(--ink-soft); }
.footer__status { font-size: .78rem; }
.footer__status.is-stale { color: var(--orange); font-weight: 650; }

/* ---------- Small screens ------------------------------------------------- */

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 40px 0 30px; }
  .hero__lede { font-size: .93rem; }
  .controls { position: static; }
  .controls__row--primary { gap: 12px; }
  .btn-clear { align-self: flex-start; }
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .section { margin-bottom: 40px; }
  .card { padding: 14px 15px 12px; gap: 8px; }
  /* Room so the fixed button never sits on top of the last of the footer. */
  .footer { padding-bottom: 110px; }

  .backup {
    left: 16px; right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    padding: 15px 18px;
    font-size: .95rem;
  }

  .directory { padding: 32px 0 38px; }
  .directory__grid { grid-template-columns: 1fr; gap: 16px; }
  .panel { padding: 18px 14px 14px; }
  .card__icon { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 9px; }
  .option__badge { width: 34px; height: 34px; }
}

/* ---------- Print --------------------------------------------------------- */

@media print {
  .controls, .jumpnav, .skip-link, .noresults, .btn-clear, 
  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; padding: 0 0 18px; border-bottom: 2px solid #000; }
  .hero__title, .hero__lede strong { color: #000; }
  .hero__sub, .hero__lede, .hero__eyebrow { color: #333; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #999; padding: 10px; }
  .card__icon { display: none; }
  a.card::after { content: " (" attr(href) ")"; font-size: .65rem; color: #555; word-break: break-all; }
  .section { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a.card:hover { transform: none; }
}

/* ---------- Embedded mode --------------------------------------------------
   embed.html, for dropping into Google Sites or any other host page. The host
   supplies the heading, so this trims to just the filters and the directory.
   -------------------------------------------------------------------------- */

.is-embed .directory { padding: 26px 0 34px; }
.is-embed .directory__heading { font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
.is-embed .directory__sub { margin-bottom: 24px; }
.is-embed .controls { position: static; }
.is-embed .footer { margin-top: 0; padding: 18px 0 22px; }

/* Nothing to click through to in an embed, so a pending row is plain text. */
.is-embed .option--pending { cursor: default; }
.is-embed .option--pending:hover { transform: none; }

/* The host page for an embed (Google Sites, a district page) is light, so keep
   the panel light for every viewer rather than dropping a dark slab into a
   white page. Redefining the tokens on body beats the :root dark-mode block.
   The standalone site still follows the viewer's theme. */
body.is-embed {
  --bg:          #F4F6F9;
  --surface:     #FFFFFF;
  --surface-alt: #FBFCFD;
  --ink:         #16202F;
  --ink-soft:    #4A5A70;
  --ink-faint:   #7A8798;
  --line:        #DFE5EC;
  --line-soft:   #EBEFF4;
  --navy:        #1B2F55;
  --navy-deep:   #142440;
  --shadow:      0 1px 2px rgba(20, 36, 64, .06), 0 4px 14px rgba(20, 36, 64, .06);
  --shadow-lift: 0 4px 8px rgba(20, 36, 64, .09), 0 14px 30px rgba(20, 36, 64, .12);
}