/* ==========================================================================
   catalog.css — the position sentence and the subject sheet.

   The index used to be a table you located yourself on. It is a sentence now,
   said in the student's own voice: "أنا في ليفل ٣ قسم داتا ساينس". The two
   words that can change are the controls, and each drops its three answers
   directly under itself, so the sentence is filled in where it is read.

   Two rules carry the whole state. The yellow rule under a word means the
   sentence is still asking — the comic yellow is the one loud ink this site
   owns, and it is spent on the one thing left to do. The ink rule means the
   word is set. Nothing else is coloured in here; the water only appears
   inside the level list, where the three depths are three depths.
   ========================================================================== */

.home-view {
  padding-bottom: var(--spacing-xxl);
}

.chart-index {
  scroll-margin-top: calc(var(--header-h) + var(--spacing-md));
}

/* --------------------------------------------------------------- the sentence */

.position-say {
  margin: var(--spacing-lg) 0 0;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: -0.01em;
  text-align: center;
}

.say-word {
  white-space: nowrap;
}

.say-slot {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* The word is the button. No box, no fill — just the rule under it, drawn a
   little away from the letters the way a line is ruled under a blank. */
.say-pick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  margin: 0;
  padding: 0 0.08em 0.06em;
  color: var(--text-primary);
  background: none;
  border: 0;
  border-bottom: 0.13em solid var(--accent-yellow);
  border-radius: 0;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--transition-normal),
              color var(--transition-normal);
}

.say-slot.is-set .say-pick {
  border-bottom-color: var(--text-primary);
}

.say-slot.is-open .say-pick {
  border-bottom-color: var(--accent-yellow);
}

.say-pick:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 6px;
  border-radius: var(--radius-xs);
}

.say-pick-text {
  display: inline-block;
}

/* The word lands when it changes. */
.say-slot.is-stamped .say-pick-text {
  animation: say-stamp var(--dur-move) var(--ease-stamp) both;
}

@keyframes say-stamp {
  from { transform: scale(0.82); opacity: 0.35; }
  to   { transform: none; opacity: 1; }
}

.say-caret {
  flex: 0 0 auto;
  align-self: center;
  width: 0.46em;
  height: 0.46em;
  color: var(--text-secondary);
  transition: transform var(--dur-state) var(--ease-out),
              color var(--transition-normal);
}

.say-slot.is-open .say-caret {
  transform: rotate(180deg);
  color: var(--text-primary);
}

@media (hover: hover) {
  .say-pick:hover {
    border-bottom-color: var(--accent-yellow);
  }

  .say-pick:hover .say-caret {
    color: var(--text-primary);
    transform: translateY(2px);
  }

  .say-slot.is-open .say-pick:hover .say-caret {
    transform: rotate(180deg) translateY(-2px);
  }
}

/* ------------------------------------------------------------------ the list

   Drops from the word's own edge, on the site's paper with the hard ink
   shadow every raised thing here has. The type steps back down from the
   heading to reading size: this is a list, not a headline. */
.say-menu {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  display: grid;
  gap: 3px;
  min-width: max(100%, 15.5rem);
  max-width: calc(100vw - 2rem);
  padding: 0.45rem;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 3px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: start;
  animation: say-drop var(--dur-state) var(--ease-out) both;
}

.say-menu[hidden] {
  display: none;
}

/* Would run off the screen from the start edge; hangs from the end instead. */
.say-menu.is-flipped {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

@keyframes say-drop {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to   { opacity: 1; transform: none; }
}

.index-choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.index-choice:hover {
  background: var(--bg-tertiary);
}

.index-choice:focus-visible {
  outline: none;
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.index-choice[aria-selected="true"] {
  background: var(--primary-light);
}

.index-choice-label {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 800;
}

/* The small Latin tag, in the mono like every figure on the chart. */
.index-choice-en {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  direction: ltr;
}

/* The level's water: shoal, mid, deep, going down the list. */
.index-choice-level {
  --depth: var(--depth-1);
}

.index-choice-level[data-depth="1"] { --depth: var(--depth-1); }
.index-choice-level[data-depth="2"] { --depth: var(--depth-2); }
.index-choice-level[data-depth="3"] { --depth: var(--depth-3); }

.index-choice-swatch {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--depth);
  border: 1.5px solid color-mix(in srgb, var(--depth) 55%, var(--border-color));
  border-radius: var(--radius-xs);
}

/* The brass tick on the answer that stands. */
.index-choice-tick {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--brass-edge);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-state) var(--ease-out),
              transform var(--dur-state) var(--ease-stamp);
}

.index-choice-tick svg {
  display: block;
  width: 100%;
  height: 100%;
}

.index-choice[aria-selected="true"] .index-choice-tick {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .say-pick,
  .say-caret,
  .index-choice,
  .index-choice-tick {
    transition: none;
  }

  .say-menu,
  .say-slot.is-stamped .say-pick-text {
    animation: none;
  }

  .say-pick:hover .say-caret {
    transform: none;
  }
}

/* ------------------------------------------------------------------ the spread

   What the sentence answers with, under it: the readout, the note while the
   sentence is still open, and the subject cards once it is closed. */
.index-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 44rem;
  margin: var(--spacing-xl) auto 0;
}

.index-sheet {
  display: grid;
  gap: var(--spacing-md);
  min-width: 0;
}

/* ------------------------------------------------------------------ the sheet

   What the plate answers with. The readout is printed the way a chart prints
   a position — the figures first, in the soundings face, then the name — and
   under it the card, or the note that says the water is not surveyed. */
.index-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0;
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--border-color);
  color: var(--text-primary);
}

.index-readout[hidden] {
  display: none;
}

.index-readout-fix {
  /* Brass, darkened toward the ink: small type on paper owes 4.5:1 and the
     bare edge colour falls short of it. */
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  direction: ltr;
  text-align: start;
}

.index-readout-count {
  margin: 0;
  padding: 0.15rem 0.6rem;
  color: var(--primary);
  border: 1.5px solid color-mix(in srgb, var(--primary) 42%, transparent);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Nothing pressed yet. */
.index-invite {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: var(--radius-md);
}

.index-invite[hidden] {
  display: none;
}

.index-invite-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 900;
  line-height: 1.3;
  text-wrap: balance;
}

.index-invite-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.85;
}

.index-invite-hint {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.index-invite-go,
.index-empty-go {
  padding: 0.1rem 0.1rem;
  color: var(--primary);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--accent-yellow);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.index-invite-go:hover,
.index-empty-go:hover {
  color: var(--primary-hover);
}

.index-invite-go:focus-visible,
.index-empty-go:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------- the sheets */

/* One column: the sheets for a position stack in the sheet column beside the
   plate, and each takes its full width. */
.subjects-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
}

.subjects-grid:empty {
  display: none;
}

.subjects-grid.is-arriving > * {
  animation: sheet-in var(--dur-view) var(--ease-out) both;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.subject-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 3px solid var(--card-foot);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--shadow-color) 24%, transparent);
  text-decoration: none;
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.subject-card:focus-visible {
  outline: 5px solid var(--primary);
  outline-offset: 5px;
}

/* Engraved, not printed: the mark is drawn in the same line weight as the
   depth contours under it, so it reads as cut into the sheet. */
.subject-glyph {
  position: absolute;
  inset-block-start: -0.35em;
  inset-inline-start: -0.12em;
  color: transparent;
  font-family: var(--font-mono);
  font-size: 9rem;
  font-weight: 700;
  line-height: 1;
  /* A drawing, not a sentence: left to right, or the bidi algorithm mirrors
     `>` into `<` on this right-to-left page and the mark stops being the one
     the subject was given. */
  direction: ltr;
  white-space: nowrap;
  pointer-events: none;
  -webkit-text-stroke: 2.5px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: -webkit-text-stroke-color var(--transition-normal);
}

.subject-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: clamp(1.3rem, 3vw, 1.9rem);
}

.subject-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  font-weight: 900;
  line-height: 1.25;
}

.subject-blurb {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.85;
}

.subject-blurb code {
  padding: 0.05rem 0.3rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.subject-action {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 0.85rem var(--spacing-xl);
  color: var(--card-foot-ink);
  background: var(--card-foot);
  font-size: 0.95rem;
  font-weight: 800;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.subject-count {
  font-size: 0.85rem;
  font-weight: 700;
}

@media (hover: hover) {
  .subject-card:hover {
    transform: translate(-4px, -4px);
    border-color: var(--accent-yellow);
    box-shadow: 10px 10px 0 color-mix(in srgb, var(--shadow-color) 30%, transparent);
  }
  .subject-card:hover .subject-glyph {
    -webkit-text-stroke-color: rgba(233, 180, 76, 0.62);
  }
  .subject-card:hover .subject-action {
    color: #14100b;
    background: var(--accent-yellow);
  }
}

/* ------------------------------------------------------------ unsurveyed water

   Eight of the nine squares hold nothing yet, so this is most of the index and
   not an edge case. Dashed rather than ruled: on a chart a broken line is what
   is drawn where the survey has not been made, which is exactly what is true
   here. It says what will happen, and then points at the square that does have
   a sheet — a student who lands on an empty one must not be left guessing
   whether the whole site is empty. */
.index-empty {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  text-align: start;
  border: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: var(--radius-md);
}

.index-empty-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 800;
}

.index-empty-note {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.85;
}

.index-empty-hint {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ------------------------------------------------------------- a subject sheet

   The screen a subject opens onto. No second hero: you arrived here from a
   position you set yourself, so the only things worth saying are which sheet
   this is and how to get back to the index. */
.subject-view {
  padding-bottom: var(--spacing-xxl);
}

.sheet-head {
  display: grid;
  gap: 0.35rem;
  margin: var(--spacing-lg) 0 var(--spacing-xl);
}

.sheet-back {
  justify-self: start;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.7rem;
  color: var(--primary);
  border: 1.5px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.sheet-back:hover {
  color: var(--primary-hover);
  border-color: var(--primary);
}

.sheet-back:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.sheet-lede {
  max-width: 62ch;
  margin: 0.3rem 0 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.9;
}

.sheet-lede code {
  padding: 0.05rem 0.3rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

@media (max-width: 600px) {
  .position-say {
    line-height: 1.75;
  }

  .say-menu {
    min-width: min(15.5rem, calc(100vw - 2rem));
    box-shadow: 4px 4px 0 var(--shadow-color);
  }

  .index-choice {
    padding: 0.55rem 0.6rem;
  }

  .subject-glyph {
    font-size: 7rem;
  }
}
}

/* ==========================================================================
   The account, at the head of the sentence

   It used to sit on the header beside the theme switch, and then on the
   island, and it is on neither now. Signing in is not something you do while
   reading — it is something you do once, on the way in — and a control
   present on all three screens to be used on none of them is what turns an
   instrument back into a toolbar. It was also the widest thing on a phone's
   bar, in the slot the lesson's own name needed.

   Here it is in the right sentence. The line below it asks which level and
   which department you are in; this asks who you are. Same question, so the
   same corner of the same screen — and, unlike the header, this is a screen a
   student is never on by accident.
   ========================================================================== */

.chart-index-account {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 1rem;
  margin-block-end: var(--spacing-md);
}

.chart-index-account[hidden] { display: none; }

/* The menu hangs off the button rather than off a bar that is no longer
   above it, and wears the same plate material as everything else here. */
.chart-index-account .account-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline-start: 0;
  width: min(22rem, calc(100vw - 2.5rem));
  z-index: 20;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--bg-secondary);
  border: 3px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.chart-index-account .account-menu[hidden] { display: none; }

.chart-index-account .account-email {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
  margin: 0;
  overflow-wrap: anywhere;
}

.chart-index-account .account-status,
.chart-index-account .account-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.7;
}

/* The sign-out in the plate's own button vocabulary, rather than whatever the
   browser draws for a <button> with no rules on it. */
.chart-index-account .account-signout {
  align-self: flex-start;
  margin-block-start: 0.25rem;
  padding: 0.38rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  box-shadow: 2px 2px 0 var(--shadow-color);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.chart-index-account .account-signout:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow-color);
}

.chart-index-account .account-signout:focus-visible {
  outline: 3px solid var(--accent-yellow);
  outline-offset: 2px;
}