/* ==========================================================================
   PractiSpace — Working with ACC learning units
   Shared stylesheet.

   PART 1 is the design system exactly as authored in Claude Design. It was
   identical in both unit exports and is reproduced here unchanged. Do not
   edit it — if the design changes upstream, replace this block wholesale.

   PART 2 is self-hosted fonts (was a Google Fonts CDN link).
   PART 3 is site additions: inter-unit navigation and the index page.
   PART 4 is the narrow-screen fix for wide data tables.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PART 1 — Original design system (verbatim from the Claude Design export)
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Tenor Sans', system-ui, sans-serif; color: #2d2d2d; background: #f5f2f0; -webkit-font-smoothing: antialiased; }
a { color: #C8102E; text-decoration: none; }
a:hover { color: #a50e26; }
@page { margin: 14mm; }
@media print { #unit-rail { display: none !important; } }
@media (max-width: 850px) { #unit-rail { display: none !important; } }
@media print {
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* --------------------------------------------------------------------------
   PART 2 — Self-hosted Tenor Sans
   Replaces the Google Fonts CDN link: faster, no third-party request, and no
   flash of fallback type. latin-ext is included because it carries the macron
   vowels (ā ē ī ō ū) used in te reo Māori, and the accents in names like Tomás.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/tenor-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/tenor-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   PART 3 — Site navigation and index page
   New components. Built from the existing design tokens only:
   ink #2d2d2d · muted #8a827a #9a938c #b3aaa2 · rule #ddd4cb #e2dad2
   accent #C8102E · rail #eae3dc · surface #fff · background #f5f2f0
   -------------------------------------------------------------------------- */

.ps-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a938c;
}

/* Back to index, sitting just under the red top rule on every unit page. */
.ps-topnav {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 30px 0;
}
.ps-topnav a {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a938c;
}
.ps-topnav a:hover { color: #C8102E; }

/* Previous / next, sitting above the PractiSpace footer on every unit page. */
.ps-unitnav {
  margin-top: 52px;
  border-top: 1px solid #e2dad2;
  padding-top: 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ps-unitnav-slot { flex: 1 1 200px; min-width: 0; }
.ps-unitnav-slot.is-next { text-align: right; }
.ps-unitnav-slot.is-index { flex: 0 0 auto; text-align: center; align-self: center; }
.ps-unitnav-label {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b3aaa2;
  display: block;
}
.ps-unitnav-title {
  font-size: 15px;
  line-height: 1.45;
  color: #2d2d2d;
  margin-top: 7px;
  display: block;
  text-wrap: pretty;
}
a.ps-unitnav-link { color: inherit; display: block; }
a.ps-unitnav-link:hover .ps-unitnav-title { color: #C8102E; }
a.ps-unitnav-link:hover .ps-unitnav-label { color: #C8102E; }
.ps-unitnav-allunits {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a938c;
}
.ps-unitnav-allunits:hover { color: #C8102E; }

@media print {
  .ps-topnav, .ps-unitnav { display: none !important; }
}

/* ---- Index page ---- */

.ps-index-wrap { max-width: 760px; margin: 0 auto; padding: 0 30px 80px; }

.ps-index-head { padding: 38px 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ps-wordmark { font-size: 18px; letter-spacing: 0.02em; color: #2d2d2d; }
.ps-wordmark span { color: #C8102E; }

.ps-index-title {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin: 30px 0 0;
  max-width: 520px;
  text-wrap: pretty;
}
.ps-index-sub {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a938c;
  margin: 14px 0 0;
  max-width: 520px;
  line-height: 1.5;
}
.ps-index-rule { width: 170px; height: 2px; background: #C8102E; border-radius: 2px; margin: 20px 0 0; }
.ps-index-intro { font-size: 15px; line-height: 1.68; color: #57514b; margin: 22px 0 0; max-width: 600px; text-wrap: pretty; }
.ps-index-intro strong { font-weight: 400; color: #2d2d2d; }

.ps-unitlist { margin: 44px 0 0; display: grid; gap: 14px; }

a.ps-unitcard {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 4px;
  align-items: start;
  background: #fff;
  border: 1px solid #ece6df;
  border-radius: 16px;
  padding: 24px 26px;
  color: inherit;
}
a.ps-unitcard:hover { border-color: #C8102E; color: inherit; }
.ps-unitcard-num { font-size: 15px; letter-spacing: 0.02em; color: #C8102E; padding-top: 2px; }
.ps-unitcard-title { display: block; font-size: 19px; line-height: 1.3; color: #2d2d2d; text-wrap: pretty; }
a.ps-unitcard:hover .ps-unitcard-title { color: #C8102E; }
.ps-unitcard-sub { display: block; font-size: 13.5px; line-height: 1.6; color: #8a827a; margin-top: 8px; text-wrap: pretty; }

/* A unit that is written but not yet published. */
.ps-unitcard.is-upcoming { background: transparent; border-style: dashed; border-color: #ddd4cb; cursor: default; }
.ps-unitcard.is-upcoming:hover { border-color: #ddd4cb; }
.ps-unitcard.is-upcoming .ps-unitcard-num,
.ps-unitcard.is-upcoming .ps-unitcard-title { color: #b3aaa2; }
.ps-unitcard.is-upcoming .ps-unitcard-sub { color: #b3aaa2; }

.ps-index-footer {
  margin-top: 44px;
  border-top: 1px solid #e2dad2;
  padding-top: 22px;
  display: flex;
  gap: 26px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.7;
  color: #8a827a;
}
.ps-index-footer p { margin: 0; max-width: 330px; line-height: 1.65; text-wrap: pretty; }
.ps-index-footer .ps-strong { color: #57514b; }


/* --------------------------------------------------------------------------
   PART 4 — Wide data tables on narrow screens
   The referral tables are authored as fixed multi-column grids. Below roughly
   640px a five-column grid leaves about 35px of text per cell, which clips the
   column headings and makes long words overlap the neighbouring column.
   These pages are written for desktop reading, so the table is not restacked —
   it keeps its authored shape and scrolls sideways within its own card, which
   also keeps it looking like the ACC form it is teaching people to read.
   Nothing here applies above 640px, so the desktop design is untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* The card wrapping the grid carries inline overflow:hidden, hence the
     !important — without it the table is clipped instead of scrolled. */
  div:has(> [style*="grid-template-columns:repeat(4"]),
  div:has(> [style*="grid-template-columns:repeat(5"]),
  div:has(> [style*="grid-template-columns:repeat(6"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [style*="grid-template-columns:repeat(4"] { min-width: 520px; }
  [style*="grid-template-columns:repeat(5"] { min-width: 640px; }
  [style*="grid-template-columns:repeat(6"] { min-width: 760px; }
}

@media print {
  /* Never scroll in print — let the table print at full width. */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"] { min-width: 0 !important; }
}