/* FS Siena — the Inn's licensed face. The woff2 files are the FSSienaWeb set
   from static.innertemple.org.uk/assets/fonts/, licensed for web embedding on
   that subdomain. Verdana is the only brand-sanctioned fallback. */
@font-face {
  font-family: "FS Siena";
  src: url("fonts/FSSienaWeb-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("fonts/FSSienaWeb-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("fonts/FSSienaWeb-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("fonts/FSSienaWeb-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Inner Temple brand tokens (colors_and_type.css). Text colours that the
     palette only supplies in tints too light for WCAG AA are darkened along
     the same hue and marked "AA-derived" — never lightened, never re-hued. */
  --blue: #0A1347;          /* --it-blue: primary; body text, headlines */
  --deep-blue: #0E0830;     /* --it-deep-blue */
  --bronze: #B88865;        /* --it-bronze: rules, accents (3.1:1 — UI only, not text) */
  --bronze-ink: #7A5C33;    /* AA-derived bronze for small text labels */
  --cobalt: #0A65AE;        /* --it-treasury: focus ring + interactive accents */
  --cream: #F6F2EB;         /* --it-cream */

  --ink: var(--blue);
  --ink-mid: #474D74;       /* AA-derived ~70% blue */
  --ink-soft: #61668A;      /* AA-derived ~60% blue (blue-50 fails AA) */
  --line: #E7E7EC;          /* --it-blue-10 */
  --line-soft: #F0F0F4;
  --surface: #FFFFFF;
  --surface-alt: #F3F3F6;   /* --it-blue-05 */

  /* Theme colours, mapped to the Inn's departmental palette. Each passes WCAG
     AA both as text on white/tinted surfaces and as white text on the colour,
     so a chip can be tinted or solid without re-checking.
       ethics          Education teal, AA-derived from #00847E
       advocacy        Treasury cobalt
       legal-knowledge bronze family, AA-derived
       edi             Library claret
       pupillage       Garden green, AA-derived from #60983A          */
  --t-ethics: #007872;
  --t-advocacy: #0A65AE;
  --t-legal-knowledge: #8A5A2B;
  --t-edi: #A24963;
  --t-pupillage: #4C7A2E;

  /* Print-led brand: radii stay subtle; pills are reserved for tags/chips. */
  --radius: 4px;
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--cobalt);
  --chrome-shadow: 0 1px 0 var(--line), 0 6px 16px -12px rgb(10 19 71 / 0.3);
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: "FS Siena", Verdana, Geneva, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   Two layout modes.

   Default: the widget owns a fixed-height viewport and scrolls internally, so it
   works inside a plain <iframe height="900"> with nothing added to the host page.

   .app--auto: the parent page has the resize snippet and is growing the iframe to
   fit, so we let content flow naturally and stop scrolling internally. Switched on
   at runtime when the parent says hello. See app.js.
--------------------------------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.app--auto { height: auto; min-height: 0; }

.chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  box-shadow: var(--chrome-shadow);
  flex: 0 0 auto;
}
/* In auto mode the iframe has no scrollbar of its own, so sticky chrome would just
   pin to the top of a box that never scrolls. Let it sit still instead. */
.app--auto .chrome { position: static; }

.chrome__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 20px 0;
}

.views__panel {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.app--auto .views__panel { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .views__panel { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.views__panel > * {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

/* --- Title ---------------------------------------------------------------- */

/* Brand eyebrow: small caps, wide-tracked, above the title. */
.titlebar__eyebrow {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bronze-ink);
}
/* Brand headline grammar: CAPITALS, weight inversely with size (light here). */
.titlebar h1 {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  font-weight: 300;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.titlebar__year { color: var(--ink-soft); font-weight: 300; }
.titlebar__sub {
  margin: 4px 0 0;
  color: var(--ink-mid);
  font-size: 0.9rem;
}

/* --- Requirements strip --------------------------------------------------- */

.reqs {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.reqs > summary {
  cursor: pointer;
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: var(--radius);
}
.reqs > summary::-webkit-details-marker { display: none; }
.reqs > summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.reqs[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.reqs > summary:focus-visible { outline: none; box-shadow: var(--focus); }

.reqs__summary-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 0.86rem;
}
.reqs__summary-text strong { font-weight: 600; }
.reqs__pill {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  color: var(--ink-mid);
}
.reqs__pill--flag {
  border-color: var(--bronze);
  background: var(--cream);
  color: var(--bronze-ink);
  font-weight: 500;
}
.reqs__detail {
  padding: 2px 14px 14px;
  font-size: 0.9rem;
  color: var(--ink-mid);
  border-top: 1px solid var(--line-soft);
  margin-top: 2px;
  padding-top: 12px;
}
.reqs__detail p { margin: 0 0 10px; max-width: 68ch; }
.reqs__detail p:last-child { margin-bottom: 0; }
.reqs__detail a { color: var(--cobalt); }

/* --- View tabs + filter toggle -------------------------------------------- */

.viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Editorial underline tabs — pills are reserved for tags and chips. */
.views { display: inline-flex; gap: 4px; }
.views [role="tab"] {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 12px 6px;
  min-height: 40px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.views [role="tab"]:hover { color: var(--ink); }
.views [role="tab"][aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--bronze);
}
.views [role="tab"]:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }

.filters__toggle {
  appearance: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 16px;
  min-height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.filters__toggle:hover { border-color: var(--ink-soft); }
.filters__toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.filters__toggle[aria-expanded="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.filters__count {
  background: var(--cobalt);
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.72rem;
  line-height: 20px;
  text-align: center;
}
.filters__toggle[aria-expanded="true"] .filters__count { background: #fff; color: var(--blue); }

/* --- Filters -------------------------------------------------------------- */

.filters {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.filters__row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.filters__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.filters__group legend {
  padding: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.filters__foot { margin-top: 12px; }

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

.chip {
  appearance: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-mid);
  border-radius: 999px;
  padding: 7px 13px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--ink-soft); }
.chip:focus-visible { outline: none; box-shadow: var(--focus); }

/* The theme dot is decoration. The label next to it is what actually carries the
   meaning — colour is never the only signal. */
.chip__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--chip-colour, var(--ink-soft));
  flex: 0 0 auto;
}
.chip[aria-pressed="true"] {
  background: var(--chip-colour, var(--blue));
  border-color: var(--chip-colour, var(--blue));
  color: #fff;
}
.chip[aria-pressed="true"] .chip__dot { background: #fff; }
.chip--flag[aria-pressed="true"] { background: var(--bronze-ink); border-color: var(--bronze-ink); }

.btn-clear {
  appearance: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  background: none;
  border: 0;
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px 2px;
  min-height: 38px;
}
.btn-clear:hover { color: var(--blue); }
.btn-clear:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }

.resultcount {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* --- Scrubber (month rail) ------------------------------------------------ */

.scrubber {
  /* Positioned so the buttons' offsetLeft is rail-relative — the observer's
     rail-scroll math in app.js depends on it. */
  position: relative;
  display: flex;
  gap: 2px;
  margin-top: 10px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.scrubber::-webkit-scrollbar { display: none; }
.scrubber[hidden] { display: none; }

.scrubber__btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 6px 10px 7px;
  min-height: 40px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
}
.scrubber__btn:hover { color: var(--ink); }
.scrubber__btn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }
.scrubber__btn[aria-current="true"] { color: var(--blue); border-bottom-color: var(--bronze); }
.scrubber__n {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 0 5px;
  min-width: 16px;
}
.scrubber__btn[aria-current="true"] .scrubber__n { background: var(--blue); color: #fff; }
.scrubber__btn--empty { opacity: 0.4; }

/* --- Timeline ------------------------------------------------------------- */

.termhead {
  margin: 28px 0 0;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-ink);
}

.monthhead {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 10px 0 0;
  padding: 10px 0 8px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: linear-gradient(var(--surface) 78%, rgb(255 255 255 / 0));
  scroll-margin-top: 0;
}
.app--auto .monthhead { position: static; }
.monthhead__count {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: normal;
  text-transform: none;
  margin-left: 6px;
}

.timeline { position: relative; }

/* The spine. Hidden from assistive tech — it's pure decoration, the dates do the work. */
.timeline__group { position: relative; padding-left: 0; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 60px;
}
.card:first-of-type { border-top: 0; }
.card--target { animation: flash 1.6s ease-out; }
@keyframes flash {
  from { background: var(--cream); }
  to { background: transparent; }
}

.card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 4px;
  text-align: center;
  border-right: 1px solid var(--line-soft);
  padding-right: 12px;
}
.card__dow { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.card__dnum { font-size: 1.55rem; font-weight: 400; line-height: 1.05; color: var(--blue); }
.card__mon { font-size: 0.72rem; font-weight: 500; color: var(--ink-mid); text-transform: uppercase; }
.card__tbc { font-size: 0.68rem; font-weight: 600; color: var(--bronze-ink); text-transform: uppercase; line-height: 1.25; }

.card__title { margin: 0; font-size: 1rem; }
.card__toggle {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--blue);
  text-align: left;
  padding: 4px 0;
  min-height: 32px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  line-height: 1.35;
  transition: color 0.15s ease;
}
.card__toggle:hover { color: var(--cobalt); }
.card__toggle:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }
.card__toggle::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.card__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(0); }

.card__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--ink-mid);
}
.card__meta li { display: inline-flex; align-items: center; gap: 5px; }
.card__meta svg { flex: 0 0 auto; opacity: 0.75; }

.card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  border: 1px solid;
  white-space: nowrap;
}
.tag__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.tag--theme { color: var(--tag-colour); border-color: color-mix(in srgb, var(--tag-colour) 30%, transparent); background: color-mix(in srgb, var(--tag-colour) 7%, #fff); }
.tag--tbc { color: var(--ink-soft); border-color: var(--line); background: var(--surface-alt); }

/* The badge for the constraint students most often miss. Deliberately the loudest
   thing on the card. */
.tag--flag {
  color: var(--bronze-ink);
  border-color: var(--bronze);
  background: var(--cream);
  padding-left: 7px;
  font-weight: 600;
}
.tag--points {
  color: var(--blue);
  border-color: var(--line);
  background: var(--surface-alt);
}

.card__detail {
  margin-top: 12px;
  padding: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-mid);
}
.card__detail[hidden] { display: none; }
.card__detail p { margin: 0 0 10px; max-width: 72ch; }
.card__detail h4 {
  margin: 14px 0 6px;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.card__detail ul { margin: 0; padding-left: 18px; }
.card__detail li { margin-bottom: 4px; }
.card__detail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 0.85rem; }
.card__detail dt { font-weight: 600; color: var(--ink); }
.card__detail dd { margin: 0; }
.card__note {
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid var(--bronze);
  background: var(--cream);
  color: var(--bronze-ink);
  font-size: 0.84rem;
}

/* --- By theme ------------------------------------------------------------- */

.themesec { margin-top: 30px; }
.themesec__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--tag-colour);
}
.themesec__head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tag-colour);
}
.themesec__req {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.themesec__count { font-size: 0.84rem; color: var(--ink-soft); font-weight: 400; letter-spacing: normal; text-transform: none; }
.themesec__empty { padding: 14px 0; color: var(--ink-soft); font-size: 0.9rem; }

/* --- Table ---------------------------------------------------------------- */

.tablewrap { overflow-x: auto; margin-top: 20px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; min-width: 720px; }
caption { text-align: left; padding-bottom: 10px; color: var(--ink-soft); font-size: 0.84rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th { position: sticky; top: 0; background: var(--surface); border-bottom: 2px solid var(--line); z-index: 2; white-space: nowrap; }
.app--auto thead th { position: static; }
tbody tr:hover { background: var(--surface-alt); }
th button {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
th button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }
th[aria-sort] button::after { content: "↕"; opacity: 0.35; font-size: 0.8em; }
th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.td-themes { display: flex; flex-wrap: wrap; gap: 4px; }

/* --- Misc ----------------------------------------------------------------- */

.noresults {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-mid);
}
.noresults p { margin: 0 0 6px; }

.foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  padding: 14px 20px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.foot p { margin: 0 0 4px; max-width: 1100px; margin-inline: auto; }
.foot a { color: var(--cobalt); }

strong { font-weight: 600; }

::selection { background: var(--blue); color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

@media (max-width: 640px) {
  .chrome__inner { padding: 14px 14px 0; }
  .views__panel > * { padding-inline: 14px; }
  .card { grid-template-columns: 50px 1fr; gap: 10px; }
  .card__date { padding-right: 8px; }
  .card__dnum { font-size: 1.3rem; }
  .reqs__summary-text { font-size: 0.8rem; }
  .filters__row { gap: 14px; }
  .viewbar { gap: 8px; }
  .views [role="tab"] { padding: 8px 10px 6px; font-size: 0.84rem; }
  .themesec__req { margin-left: 0; width: 100%; }
  /* The longest theme name is wider than a phone. Let tags wrap rather than clip. */
  .tag { white-space: normal; max-width: 100%; }
}

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

@media print {
  .chrome, .foot, .scrubber, .filters, .viewbar { display: none !important; }
  .app { height: auto; }
  .views__panel { overflow: visible; }
  .card__detail { display: block !important; }
  .card { break-inside: avoid; }
  table { min-width: 0; font-size: 9pt; }
}