/* Noir Mini App — the screens added in contract v2.
   ------------------------------------------------------------------
   Loaded after app.css and depends on its tokens. Split out only for
   size: it is the same design language, and the same rules-not-boxes
   way of drawing certainty, continued onto the newer screens. */

.sheet__note--firm {
  border-left-style: solid;
  border-left-color: var(--rule);
  color: var(--text);
}

.sheet__link {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 0 2px;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  color: var(--link);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

/* ── section strip ──────────────────────────────────────────────── */
/* Four peers at most, and one of them only exists for admins. It scrolls
   sideways rather than wrapping so the timeline never starts two rows
   further down on a narrow phone. */
.sections {
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--hairline);
  /* Bleeds to the screen edge so that on a 320px phone, where four items
     cannot fit, the overflow reads as a scroller rather than as clipping. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

@media (min-width: 44rem) {
  .sections { margin-inline: -28px; padding-inline: 28px; }
}

.sections::-webkit-scrollbar { display: none; }

.sections__item {
  flex: none;
  min-height: 42px;
  padding: 13px 0 11px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--hint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.sections__item[aria-current] {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Admin is not a fourth feature: it is pushed to the far end, away from
   the three student sections. */
.sections__item--aside { margin-left: auto; padding-left: 20px; }

/* ── admin area ─────────────────────────────────────────────────── */
/* Quieter by being somewhere else: the whole page drops to the secondary
   background and the heading shrinks. */
body[data-area="admin"] { background: var(--surface); --field: var(--bg); }
body[data-area="admin"] .shell { background: var(--surface); }

@media (min-width: 44rem) {
  body[data-area="admin"] .section-label,
  body[data-area="admin"] .topbar { background: var(--surface); }
}

.eyebrow {
  padding-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hint);
}

.topbar__title--sub {
  font-size: 21px;
  letter-spacing: -.016em;
  overflow-wrap: anywhere;
}

/* ── search ─────────────────────────────────────────────────────── */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 4px;
  padding: 0 6px 0 10px;
  background: var(--field);
  border-radius: 10px;
}

.searchbar__icon {
  display: grid;
  place-items: center;
  color: var(--hint);
  flex: none;
}

.searchbar__icon svg { width: 17px; height: 17px; }

.searchbar__input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.searchbar__input::placeholder { color: var(--hint); }
.searchbar__input:focus { outline: none; }
.searchbar:focus-within { box-shadow: 0 0 0 2px var(--link); }
.searchbar__input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }

.searchbar__go {
  flex: none;
  min-height: 38px;
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--link);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.resultcount {
  padding: 18px 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--hint);
}

/* ── a recorded fact, in a list ─────────────────────────────────── */
.factlist, .rowlist, .digestlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.factrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.factrow:active { background: var(--pressed); }
@media (hover: hover) { .factrow:hover .factrow__title { color: var(--link); } }

.factrow__body {
  padding: 12px 0 14px 14px;
  border-left: 2px solid var(--rule);
  min-width: 0;
}

.factrow--unconfirmed .factrow__body {
  border-left-style: dashed;
  border-left-color: var(--rule-soft);
}

.factrow__title,
.factrow__value,
.factrow__meta { display: block; }

.factrow__title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.009em;
  overflow-wrap: anywhere;
}

.factrow--unconfirmed .factrow__title { font-weight: 500; color: var(--quiet); }

.factrow__value {
  margin-top: 2px;
  font-size: 14px;
  color: var(--quiet);
  overflow-wrap: anywhere;
}

.factrow__meta {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--hint);
}

.factrow__go, .navrow__go {
  display: grid;
  place-items: center;
  color: var(--hint);
  opacity: .5;
}

.factrow__go svg, .navrow__go svg { width: 16px; height: 16px; }

/* ── fact detail ────────────────────────────────────────────────── */
.record {
  padding: 14px 0 16px 14px;
  border-left: 2px solid var(--rule);
}

.record--unconfirmed {
  border-left-style: dashed;
  border-left-color: var(--rule-soft);
}

.record__tier {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--quiet);
  max-width: 40ch;
}

.kv {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0;
  font-size: 14px;
}

.kv dt { color: var(--hint); }

.kv dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.subject {
  padding-top: 8px;
  font-size: 12px;
  color: var(--hint);
}

code, .code {
  font-family: var(--mono);
  font-size: .88em;
  overflow-wrap: anywhere;
}

.code { font-weight: 600; letter-spacing: .01em; }

/* ── supersession timeline ──────────────────────────────────────── */
.timeline {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.tl {
  position: relative;
  padding: 0 0 18px 16px;
  border-left: 2px solid var(--rule);
}

.tl--unconfirmed { border-left-style: dashed; border-left-color: var(--rule-soft); }
.tl:last-child { border-left-color: transparent; padding-bottom: 4px; }

.tl::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule);
  box-shadow: 0 0 0 3px var(--bg);
}

body[data-area="admin"] .tl::before { box-shadow: 0 0 0 3px var(--surface); }

.tl--unconfirmed::before { background: var(--bg); border: 2px solid var(--rule-soft); }
.tl--current::before { background: var(--link); border: 0; }
.tl--viewing::before { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--rule-soft); }
body[data-area="admin"] .tl--viewing::before { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--rule-soft); }

.tl__when {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}

.tl__ago { font-weight: 500; letter-spacing: .02em; }

.tl__tier {
  margin-top: 2px;
  font-size: 13px;
  color: var(--quiet);
}

.tl__tier b { color: var(--text); font-weight: 600; }

.tl__badge {
  display: inline-block;
  white-space: nowrap;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--link);
}

.tl__badge--here { color: var(--hint); letter-spacing: .06em; }

.change__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

.change__list li { overflow-wrap: anywhere; }
.change__key { color: var(--hint); }
.change__from { color: var(--hint); text-decoration-thickness: 1px; }
.change__arrow { color: var(--hint); }
.change__to { font-weight: 500; }

.change__same {
  margin-top: 6px;
  font-size: 14px;
  color: var(--hint);
}

/* ── corrections ────────────────────────────────────────────────── */
.corrections {
  list-style: none;
  margin: 0;
  padding: 0;
}

.correction {
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}

.correction:first-child { border-top: 0; }

.correction__reason {
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.correction__meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--hint);
}

/* ── digests ────────────────────────────────────────────────────── */
.digestrow {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.digestlist li:first-child .digestrow { border-top: 0; }
.digestrow:active { background: var(--pressed); }
@media (hover: hover) { .digestrow:hover .digestrow__period { color: var(--link); } }

.digestrow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.digestrow__period {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.008em;
}

.digestrow__meta {
  flex: none;
  font-size: 12px;
  color: var(--hint);
  text-align: right;
}

.digestrow__preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--quiet);
}

.digestrow__preview--none { color: var(--hint); font-style: italic; }

.prose { padding-top: 8px; max-width: 38rem; }

.prose__p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.prose__h {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.006em;
}

.prose__h:first-child { margin-top: 0; }

.prose__list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.55;
}

.prose__list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.prose code { background: var(--field); border-radius: 4px; padding: 1px 5px; }

/* ── generic rows ───────────────────────────────────────────────── */
.navrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 12px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
  cursor: pointer;
}

.rowlist li:first-child .navrow { border-top: 0; }
.navrow:active { background: var(--pressed); }

.navrow__title {
  display: block;
  font-size: 16px;
  font-weight: 500;
}

.navrow__meta, .navrow__note {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--hint);
}

.listrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.rowlist li.listrow:first-child { border-top: 0; }
.listrow__body { min-width: 0; }

.listrow__title {
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.listrow__meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--hint);
}

.listrow__you {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hint);
}

.roles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: 13px;
}

.role {
  font-weight: 600;
  letter-spacing: .02em;
}

.linkbtn {
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--link);
  font-size: 13px;
  cursor: pointer;
}

.linkbtn--danger { color: var(--danger); }

/* ── counts ─────────────────────────────────────────────────────── */
.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  gap: 1px;
  margin: 4px 0 18px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
}

/* number above label, without giving up the definition-list semantics */
.count {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 11px 12px 12px;
  background: var(--field);
}

.counts dt {
  font-size: 12px;
  line-height: 1.3;
  color: var(--hint);
}

.counts dd {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ── forms ──────────────────────────────────────────────────────── */
.filters { padding-bottom: 8px; }

.field--wide {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.field__label--block { display: block; margin-bottom: 6px; }
.field__desc--flush { grid-column: 1 / -1; margin-top: 8px; max-width: 40ch; }

.input {
  justify-self: end;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--field);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.field--wide .input { justify-self: stretch; }
.input--compact { max-width: 12rem; justify-self: end; }
.input:focus-visible { border-color: var(--link); outline-offset: 1px; }
.input::placeholder { color: var(--hint); }

/* The native control keeps its own disclosure arrow — the settings form
   draws its own because those selects are borderless text. */
.input--select { padding: 10px 8px; cursor: pointer; }
.input--select option { color: var(--fb-text); background: var(--fb-bg); }

.textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--field);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
}

.textarea:focus-visible { border-color: var(--link); }

.charcount {
  padding-top: 4px;
  font-size: 12px;
  color: var(--hint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.charcount[data-tone="error"] { color: var(--danger); }

.btn--flush { margin-top: 14px; }

.btn--danger.btn--flush,
.btn--quiet.btn--flush {
  padding-left: 0;
  justify-content: flex-start;
}

.btn[disabled] { opacity: .45; cursor: default; }

/* ── tables ─────────────────────────────────────────────────────── */
.tablewrap {
  overflow-x: auto;
  margin-top: 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--field);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th, .table td {
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}

.table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hint);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot th, .table tfoot td { border-bottom: 0; border-top: 1px solid var(--rule-soft); font-weight: 600; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .quiet { color: var(--hint); }

/* ── notices, outcomes, small text ──────────────────────────────── */
.notice {
  margin: 12px 0;
  padding: 10px 0 10px 14px;
  border-left: 2px dashed var(--rule-soft);
  font-size: 14px;
  line-height: 1.45;
  color: var(--quiet);
}

.notice--firm { border-left-style: solid; border-left-color: var(--rule); color: var(--text); }
.notice--danger { border-left-style: solid; border-left-color: var(--danger); color: var(--text); }

.outcome {
  margin-top: 20px;
  padding: 14px 0 14px 14px;
  border-left: 2px solid var(--danger);
}

.outcome__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.011em;
}

.outcome__body {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--quiet);
  max-width: 40ch;
}

.outcome .btn { margin-top: 12px; }

.quiet {
  font-size: 14px;
  line-height: 1.45;
  color: var(--hint);
  max-width: 42ch;
}

.loading {
  padding: 26px 0;
  font-size: 14px;
  color: var(--hint);
}

.state--inline { padding: 24px 0 16px; }

.archive { padding-bottom: 8px; }
.archive .kv { margin-top: 4px; }

/* ── Schedule ─────────────────────────────────────────────────────────
   The same left-rail rhythm as the deadlines timeline, so the two read as
   one product. No certainty language here: a timetable is published, not
   reported, so there is nothing to be unsure about. */

.schedule__day {
  padding: 18px var(--gutter) 6px;
}

.schedule__daylabel {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.schedule__date {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--hint);
}

.session-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 var(--gutter);
}

.session {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  align-items: start;
  gap: 0 12px;
  min-height: 56px;
}

/* The rail is drawn on the content column, not the row, so it lines up with
   the title rather than the time -- matching the deadlines timeline. */
.session__what {
  padding: 12px 0 16px 14px;
  border-left: 2px solid var(--hairline);
}

.session:last-child .session__what { padding-bottom: 8px; }

.session__when {
  display: flex;
  flex-direction: column;
  padding: 12px 0 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.session__start {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

.session__end {
  font-size: 13px;
  color: var(--hint);
}

.session__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
}

.session__meta {
  margin: 3px 0 0;
  font-size: 14px;
  color: var(--hint);
}

/* Delivery mode is the one thing worth spotting at a glance -- whether you
   have to physically be somewhere. In person is stated plainly; online is
   quieter, because it needs no travel decision. */
.session__mode {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hint);
}

.session__mode--ftf { color: var(--link); }