/* Screen compositions. The rhythm is deliberately uneven: one spotlight block
   carries the moment, everything else is a quiet grouped list. No repeated
   grid of identical cards anywhere. */

.block {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0 2px;
}

.block-link {
  border: 0;
  background: none;
  padding: 4px 2px;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Today ------------------------------------------------------------------ */
.greeting {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spotlight {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-tint) 0%, rgba(240, 227, 238, 0) 62%),
    var(--surface);
  box-shadow: var(--shadow-card);
}

.spotlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.spotlight-when {
  font-size: 13px;
  font-weight: 620;
  color: var(--accent-ink);
}

.spotlight-subject {
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -0.018em;
  line-height: 1.22;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.spotlight-clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.028em;
}

.spotlight-clock small {
  font-size: 14px;
  font-weight: 560;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}

.spotlight-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--ink-2);
}

.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Schedule --------------------------------------------------------------- */
.daystrip {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 4px;
  scroll-snap-type: x proximity;
}

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

.day {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  width: 112px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  scroll-snap-align: center;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.day:active {
  transform: scale(0.95);
}

.day-name {
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  font-weight: 560;
  color: var(--ink-3);
}

.day-num {
  font-size: 20px;
  line-height: 24px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.day[aria-pressed="true"] {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--ink-on-accent);
}

.day[aria-pressed="true"] .day-name {
  color: rgba(255, 250, 253, 0.82);
}

.week {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.week-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0 2px 6px;
}

.week-day-title {
  font-size: 13.5px;
  font-weight: 640;
  letter-spacing: -0.008em;
}

.week-day-title.is-today {
  color: var(--accent-ink);
}

@media (min-width: 1024px) {
  .week {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
    align-items: start;
  }
}

/* Tasks ------------------------------------------------------------------ */
.task-detail {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s5);
}

.task-due {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.fact:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.fact dt {
  flex: none;
  font-size: 13px;
  color: var(--ink-3);
}

.fact dd {
  margin: 0;
  text-align: right;
  font-size: 13.5px;
  font-weight: 570;
  overflow-wrap: anywhere;
}

/* Subjects --------------------------------------------------------------- */
.subject-head {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.subject-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tools {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.tool-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.tool-card:active {
  transform: scale(0.99);
}

.tool-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-control);
  background: var(--accent-tint);
  color: var(--accent-ink);
}

.tool-mark svg {
  width: 20px;
  height: 20px;
}

.tool-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tool-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.tool-text {
  font-size: 13px;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover,
  .day:hover {
    background: var(--surface-muted);
  }

  .day[aria-pressed="true"]:hover {
    background: var(--accent-ink);
  }
}

.roadmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.roadmap li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0.6;
}

/* Cabinet ---------------------------------------------------------------- */
.identity {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
}

.monogram {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--accent-strong);
  color: var(--ink-on-accent);
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.identity-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.identity-name {
  font-size: 18px;
  font-weight: 660;
  letter-spacing: -0.016em;
  overflow-wrap: anywhere;
}

.identity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}

.setting {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 13px var(--s5);
  border-top: 1px solid var(--hairline);
}

.rows > .setting:first-child {
  border-top: 0;
}

.setting-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setting-title {
  font-size: 14.5px;
  font-weight: 570;
}

.setting-text {
  font-size: 12.5px;
  color: var(--ink-3);
  text-wrap: pretty;
}

.setting-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 13px var(--s5);
  border-top: 1px solid var(--hairline);
}

.grades {
  width: 100%;
  /* Long discipline titles scroll the table rather than being torn apart. */
  min-width: 340px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.grades th {
  padding: 0 var(--s5) 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.grades th:not(:first-child),
.grades td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.grades td {
  padding: 10px var(--s5);
  border-top: 1px solid var(--hairline);
  overflow-wrap: break-word;
}

.grades td:first-child {
  font-weight: 520;
}

.grades .num {
  font-weight: 640;
}

.table-scroll {
  overflow-x: auto;
}

.week-empty {
  padding: 2px 4px 6px;
  font-size: 13px;
  color: var(--ink-3);
}

/* Desktop composition -----------------------------------------------------
   Wide screens get a real two-column composition instead of a phone column
   stranded in the middle of a monitor. Columns are assigned explicitly, so
   each one keeps its own reading order; nothing is invented to fill space. */
@media (min-width: 1200px) {
  /* Widening the measure has to move the island too, otherwise the two drift
     apart and the island ends up sitting on the content. Both read the same
     token, so they stay one composition. */
  :root:has(.is-wide) {
    --content-max-wide: 1020px;
  }

  .is-split {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: var(--s6);
    row-gap: var(--s6);
    align-items: start;
  }

  .is-split > [data-span="full"] {
    grid-column: 1 / -1;
  }

  .is-split > .col[data-col="1"] {
    grid-column: 1;
  }

  .is-split > .col[data-col="2"] {
    grid-column: 2;
  }

  /* Long-form text keeps a comfortable measure even in a wide column. */
  .is-split .prose,
  .is-split .state-text {
    max-width: 58ch;
  }
}

/* A column of the split composition. Below the split breakpoint it is just a
   stack, so the reading order never changes between phone and desktop. */
.col {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  min-width: 0;
}