/* ============================================================================
   dean.school — the desk
   The Dean interface. Every claim on this page is carried by it, so it is
   built to the standard of the product, not to the standard of a screenshot.
   ========================================================================= */

.desk {
  --desk-inset: clamp(0.75rem, 1.4vw, 1.125rem);
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.desk__frame {
  padding: var(--shell-pad);
  border-radius: var(--r-shell);
  background: linear-gradient(
    180deg,
    rgba(244, 241, 232, 0.075),
    rgba(244, 241, 232, 0.022) 42%,
    rgba(244, 241, 232, 0.03)
  );
  border: 1px solid var(--hair);
}

.desk__core {
  border-radius: var(--r-core);
  background: radial-gradient(130% 96% at 50% -18%, #202623 0%, #171b19 46%, #10130f 100%);
  border: 1px solid rgba(244, 241, 232, 0.1);
  box-shadow: inset 0 1px 0 rgba(244, 241, 232, 0.11);
  overflow: hidden;
}

/* --- Top chrome ----------------------------------------------------------- */

.desk__bar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem var(--desk-inset);
  border-bottom: 1px solid var(--hair);
  background: rgba(244, 241, 232, 0.018);
}

.desk__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-nano);
  font-weight: 650;
  letter-spacing: 0.16em;
  color: var(--chalk-dim);
}
.desk__mark i {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--chalk);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  flex: none;
}

.desk__where {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.1em;
  color: var(--chalk-mute);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desk__clock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--chalk-dim);
  flex: none;
}

/* --- Body: rail + stage --------------------------------------------------- */

.desk__body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: clamp(360px, 52vh, 560px);
}

@container (min-width: 720px) {
  .desk__body { grid-template-columns: 168px 1fr; }
}

.rail {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: var(--desk-inset) 0.625rem;
  border-right: 1px solid var(--hair);
  background: rgba(7, 8, 7, 0.42);
}
@container (min-width: 720px) { .rail { display: flex; } }

.rail__label {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  padding: 0 0.625rem 0.625rem;
}

.rail__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 450;
  letter-spacing: -0.008em;
  color: var(--chalk-mute);
  transition: color var(--dur-fast) var(--ease-state),
    background-color var(--dur-fast) var(--ease-state);
}
.rail__item svg { width: 14px; height: 14px; flex: none; opacity: 0.75; }
.rail__item[aria-current='true'] {
  color: var(--chalk);
  background: rgba(244, 241, 232, 0.065);
}
.rail__item[aria-current='true'] svg { opacity: 1; }

.rail__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-nano);
  color: var(--brass-lift);
  font-variant-numeric: tabular-nums;
}

.stage {
  padding: var(--desk-inset);
  display: flex;
  flex-direction: column;
  gap: var(--desk-inset);
  min-width: 0;
}

/* --- Greeting ------------------------------------------------------------- */

.greet {
  font-size: clamp(1.375rem, 2.6cqi, 1.875rem);
  font-weight: 560;
  letter-spacing: -0.032em;
  line-height: 1.05;
}
.greet span { color: var(--chalk-mute); }

/* --- Metrics: no card boxes, hairline division ---------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.metric {
  background: var(--ink-raise);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.metric b {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.4cqi, 2.125rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
}
.metric i {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

/* --- Two-column stage split ----------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--desk-inset);
  flex: 1;
  min-height: 0;
}
@container (min-width: 900px) { .split { grid-template-columns: 1.35fr 1fr; } }

.panel { display: flex; flex-direction: column; min-width: 0; }

.panel__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--hair);
}
.panel__head h3 {
  font-family: var(--mono);
  font-size: var(--t-nano);
  font-weight: 450;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}
.panel__head .dot { margin-left: auto; }

/* --- Stream rows ---------------------------------------------------------- */

.stream { display: flex; flex-direction: column; }
.stream--tight .row { padding-block: 0.6875rem; }
.stream--tight + .decide { margin-top: 1.25rem; }

.row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: start;
  gap: 0.875rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--hair);
  transition: opacity var(--dur-mid) var(--ease-state);
}
.row:last-child { border-bottom: 0; }

.row__t {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--chalk-faint);
  padding-top: 0.125rem;
  letter-spacing: 0.02em;
}

.row__b { min-width: 0; }
.row__b strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 520;
  letter-spacing: -0.016em;
  line-height: 1.3;
}
.row__b span {
  display: block;
  font-size: 0.8125rem;
  color: var(--chalk-mute);
  letter-spacing: -0.006em;
  margin-top: 0.1875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrival: a row that lands, rather than one that was always there. */
.row[data-arrive] {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-mid) var(--ease-enter),
    transform var(--dur-mid) var(--ease-enter);
}
.row[data-arrive].is-here { opacity: 1; transform: none; }

/* --- Status chips --------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: var(--t-nano);
  font-weight: 450;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--chalk-mute);
  background: rgba(244, 241, 232, 0.05);
  border: 1px solid var(--hair);
  transition: color var(--dur-mid) var(--ease-state),
    background-color var(--dur-mid) var(--ease-state),
    border-color var(--dur-mid) var(--ease-state);
}
.chip--done { color: var(--signal); background: var(--signal-wash); border-color: rgba(111, 156, 128, 0.26); }
.chip--wait { color: var(--brass-lift); background: var(--brass-wash); border-color: rgba(185, 138, 47, 0.26); }
.chip--act { color: var(--alert); background: var(--alert-wash); border-color: rgba(208, 128, 70, 0.28); }

/* --- Decision card: the one thing the desk hands back to a human ---------- */

.decide {
  margin-top: auto;
  padding: 1rem;
  border-radius: var(--r-panel);
  background: linear-gradient(170deg, rgba(208, 128, 70, 0.11), rgba(208, 128, 70, 0.03));
  border: 1px solid rgba(208, 128, 70, 0.24);
  box-shadow: inset 0 1px 0 rgba(244, 241, 232, 0.06);
}
.decide h4 {
  margin: 0.625rem 0 0.3125rem;
  font-size: 1.0625rem;
  font-weight: 560;
  letter-spacing: -0.022em;
  line-height: 1.2;
}
.decide p { font-size: 0.8125rem; color: var(--chalk-dim); margin-bottom: 0.875rem; }

.decide__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.mini {
  min-height: 34px;
  padding: 0.375rem 0.8125rem;
  border-radius: 8px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--chalk);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-state),
    background-color var(--dur-fast) var(--ease-state),
    border-color var(--dur-fast) var(--ease-state);
}
.mini:hover { background: rgba(244, 241, 232, 0.07); }
.mini:active { transform: scale(0.97); }
.mini--go { background: var(--chalk); color: var(--ink); border-color: var(--chalk); font-weight: 560; }
.mini--go:hover { background: #fff; }

/* --- Timetable before / after --------------------------------------------- */

.tt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  overflow: hidden;
}
@media (min-width: 780px) { .tt { grid-template-columns: 1fr 1fr; } }

.tt__col { background: var(--ink-raise); padding: 0.875rem; }
.tt__col h4 {
  font-family: var(--mono);
  font-size: var(--t-nano);
  font-weight: 450;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  margin-bottom: 0.75rem;
}
.tt__col--after h4 { color: var(--signal); }

.slot {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5625rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.8125rem;
}
.slot:last-child { border-bottom: 0; }
.slot em {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-nano);
  color: var(--chalk-faint);
  letter-spacing: 0.03em;
}
.slot b { font-weight: 500; letter-spacing: -0.01em; }
.slot i { font-style: normal; font-size: var(--t-nano); font-family: var(--mono); color: var(--chalk-mute); letter-spacing: 0.06em; }
.slot--gap b, .slot--gap i { color: var(--alert); }
.slot--fix b { color: var(--signal); }
.slot--fix i { color: var(--signal); }

/* --- Receipt: a physical ticket, mono, torn edge -------------------------- */

.receipt {
  position: relative;
  padding: 1rem 1.125rem 1.125rem;
  border-radius: var(--r-panel);
  background: rgba(244, 241, 232, 0.045);
  border: 1px solid var(--hair-strong);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--chalk-dim);
}
.receipt::after {
  content: '';
  position: absolute;
  inset-inline: -1px;
  bottom: -1px;
  height: 7px;
  background:
    radial-gradient(circle at 5px 7px, transparent 4.2px, var(--ink-raise) 4.4px) repeat-x;
  background-size: 10px 7px;
}
.receipt dt { color: var(--chalk-faint); text-transform: uppercase; font-size: var(--t-nano); letter-spacing: 0.14em; }
.receipt dd { margin: 0 0 0.5rem; color: var(--chalk); }
.receipt dd:last-of-type { margin-bottom: 0; }
.receipt__seal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--hair-strong);
  width: 100%;
  color: var(--signal);
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Empty / resting state ------------------------------------------------ */

.rest {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.625rem;
  text-align: center;
  padding: 2rem 1rem;
}
.rest p { font-size: 0.9375rem; color: var(--chalk-mute); max-width: 26ch; }

/* --- Mobile: the rail collapses, the split stacks -------------------------- */

@container (max-width: 719px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metric { padding: 0.75rem; }
  .row { grid-template-columns: 42px 1fr; grid-template-areas: 't b' '. s'; }
  .row__t { grid-area: t; }
  .row__b { grid-area: b; }
  .row .chip { grid-area: s; justify-self: start; margin-top: 0.4375rem; }
}

/* The metric row and stage sit on the raised surface, not the core gradient. */
.metric { background: rgba(244, 241, 232, 0.028); }
.metrics { background: rgba(244, 241, 232, 0.09); }

/* Rows inside the hero desk share the same panel weight as the day desk. */
.hero__field .desk .stage { gap: 0.875rem; }