/* The five tabs and the wizard: layout that belongs to one screen. Shared pieces live in
   components.css. */

/* ---- shared by several screens ------------------------------------------------------ */

/* One plain sentence (an alert's summary), set a little larger than body text. */
.sentence {
  margin: 0 0 var(--s3);
  font-size: var(--text-md);
  line-height: var(--leading);
}

/* A list that runs edge to edge inside a padded card. */
.list.flush-x {
  margin: 0 calc(-1 * var(--s5));
}

.card-head.pad {
  padding: var(--s4) var(--s5) 0;
}

.list-row .sub.warn {
  display: flex;
  align-items: center;
  gap: var(--s1);
  color: var(--ink);
}

.list-row .sub.warn .icon {
  color: var(--warning);
}

/* Name / value pairs (Me, System). */
.facts {
  display: grid;
  gap: var(--s3);
  margin: 0 0 var(--s3);
}

.facts > div {
  display: grid;
  gap: var(--s1);
}

.facts dt {
  color: var(--muted);
  font-size: var(--text-sm);
}

.facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0;
}

@media (min-width: 641px) {
  .facts > div {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }
}

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.break {
  overflow-wrap: anywhere;
}

/* A button that reads as a link. */
button.link {
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Filters and wizard questions: a fieldset with its legend as a small heading. */
.filter {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter legend {
  margin-bottom: var(--s2);
  padding: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
}

/* Save / Next stay reachable at the bottom of a long form, above the tab bar. */
.sticky-actions {
  position: sticky;
  bottom: calc(60px + var(--safe-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s3) 0;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 1024px) {
  .sticky-actions {
    bottom: 0;
  }
}

/* Small links beside a heading still get a full-size tap target. */
.card-head a,
.alert-card .card-head h2 a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* Long health badges wrap inside the card rather than running past it. */
.course-main .badge,
.stale-row .badge {
  white-space: normal;
}

/* ---- Home --------------------------------------------------------------------------- */

.status-line {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.checklist {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}

.checklist .tick {
  flex: none;
  color: var(--muted);
}

.checklist li.done .tick {
  color: var(--ok);
}

.checklist li.done a {
  color: var(--muted);
}

.checklist a {
  display: inline-block;
  min-height: 24px;
  font-weight: 600;
}

.checklist .sub {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
}

.open-row .title {
  font-variant-numeric: tabular-nums;
}

/* ---- Find --------------------------------------------------------------------------- */

.find-filters {
  display: grid;
  gap: var(--s4);
}

/* The next two weeks of days scroll sideways on a phone rather than wrapping. */
.chip-scroller {
  display: flex;
  gap: var(--s2);
  margin: 0 calc(-1 * var(--s5));
  padding: var(--s1) var(--s5);
  overflow-x: auto;
  scrollbar-width: none;
}

.chip-scroller::-webkit-scrollbar {
  display: none;
}

.chip-scroller .chip {
  flex: none;
}

.groups {
  display: block;
}

/* While results load, skeletons stand in for them. */
.loading-block {
  display: none;
}

.find-results.htmx-request .loading-block {
  display: block;
}

.find-results.htmx-request .groups {
  display: none;
}

.stale-row .sub.status-line {
  display: flex;
  gap: var(--s1);
}

/* On a phone the link goes under the course, so the name keeps the row's width. */
@media (max-width: 640px) {
  .stale-row {
    flex-wrap: wrap;
  }

  .stale-row .trail {
    width: 100%;
    padding-left: calc(32px + var(--s3));
  }
}

/* ---- Alerts ------------------------------------------------------------------------- */

/* The courses an alert watches, as a row of small logos. */
.logo-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: 0 0 var(--s2);
}

.logo-stack .more {
  width: auto;
  padding: 0 var(--s2);
  background: var(--neutral-soft);
  color: var(--muted);
  font-weight: 600;
}

.alert-card .card-head {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.alert-card .card-head h2 {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.alert-card .card-head form {
  flex: none;
}

.alert-card .card-head h2 a {
  color: var(--ink);
  text-decoration: none;
}

.alert-card .card-head h2 a:hover {
  text-decoration: underline;
}

/* ---- the alert wizard --------------------------------------------------------------- */

.steps {
  display: flex;
  gap: var(--s1);
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.steps li {
  flex: 1 0 auto;
}

.step {
  display: flex;
  min-width: var(--tap);
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s2);
  border: 0;
  border-bottom: 3px solid var(--hairline);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.step .num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--control);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.step.done {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.step[aria-current="step"] {
  border-bottom-color: var(--primary);
  color: var(--ink);
  font-weight: 600;
}

.step[aria-current="step"] .num {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.step:disabled {
  cursor: default;
  opacity: 0.6;
}

/* On a phone only the current step keeps its name. */
@media (max-width: 640px) {
  .step:not([aria-current="step"]) .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .steps li {
    flex: 0 0 auto;
  }

  .steps li:has([aria-current="step"]) {
    flex: 1 0 auto;
  }
}

.wizard h2[tabindex="-1"]:focus {
  outline: none;
}

.pick-list {
  display: grid;
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  overflow: hidden;
}

.pick-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  min-height: 56px;
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--hairline);
  cursor: pointer;
}

.pick-row:first-child {
  border-top: 0;
}

.pick-row:hover {
  background: var(--neutral-soft);
}

.pick-row:has(input:checked) {
  background: var(--ok-soft);
}

.pick-row input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--primary);
}

.pick-row .body {
  flex: 1;
  min-width: 10rem;
}

.pick-row .title {
  display: block;
  font-weight: 600;
}

.pick-row .sub {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--s3);
}

.option-card {
  display: grid;
  gap: var(--s1);
  min-height: 72px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--control);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.option-card:hover {
  border-color: var(--ink);
}

.option-card .title {
  font-weight: 600;
}

.option-card .sub {
  color: var(--muted);
  font-size: var(--text-sm);
}

.option-card[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.option-card[aria-pressed="true"] .sub {
  color: inherit;
}

.disclosure > summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  color: var(--link);
  font-weight: 600;
  cursor: pointer;
}

.per-course {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s2);
}

.per-course-row {
  display: grid;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 900px) {
  .per-course-row {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--s4);
  }
}

/* The one-letter day toggles. */
.chip.day {
  justify-content: center;
  min-width: 36px;
  padding: 0;
}

.review-count {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
}

/* ---- Courses ------------------------------------------------------------------------ */

.course-row {
  display: grid;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--hairline);
}

.course-row:first-child {
  border-top: 0;
}

@media (min-width: 900px) {
  .course-row {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.course-main {
  min-width: 0;
}

.course-actions {
  flex-wrap: wrap;
}

/* The detail under a failing course can be a long error; keep it to two lines. */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.learned {
  color: var(--muted);
}

.logo-edit {
  margin-top: var(--s2);
}

.logo-forms {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s2);
}

.logo-forms input[type="file"] {
  min-width: 0;
  padding-block: var(--s2);
}

/* "My course": a star you can press, with its words always shown. */
.star-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--tap);
  padding: 0 var(--s3);
  border: 1px solid var(--control);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.star-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.star-toggle:has(input:checked) {
  border-color: var(--accent);
  color: var(--ink);
}

.star-toggle:has(input:checked) .icon {
  color: var(--accent);
}

.star-toggle .when-on,
.star-toggle:has(input:checked) .when-off {
  display: none;
}

.star-toggle:has(input:checked) .when-on {
  display: inline;
}

.star-toggle:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Me ----------------------------------------------------------------------------- */

.credits p {
  margin: 0 0 var(--s2);
}

/* ---- signing in (the shell and the sign-in link page) ------------------------------- */

.signin {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: var(--s5);
}

.signin-card {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  max-width: 26rem;
  text-align: center;
}

.signin-card .mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-card);
  background: var(--primary);
  color: var(--on-primary);
}

.signin-card h1 {
  margin: 0;
}

.signin-card p {
  margin: 0;
}

.signin-error {
  color: var(--danger);
  font-weight: 600;
}