/* =====================================================================
   LAYOUT LAYER
   The React build used Tailwind for page layout. Hand-written CSS does
   not need utility classes, so these are named for what they do.
   Everything with identity lives in skyro.css; this file is only boxes.
   ===================================================================== */

/* main content + sidebar. Single column until there is room for both. */
.split {
  display: grid;
  gap: 28px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
  .split.main-aside      { grid-template-columns: minmax(0, 1fr) 380px; }
  .split.main-aside-slim { grid-template-columns: minmax(0, 1fr) 330px; }
  .split.aside-main      { grid-template-columns: 360px minmax(0, 1fr); }
  .split.list-detail     { grid-template-columns: 380px minmax(0, 1fr); }
  .split > .aside.sticky { position: sticky; top: 92px; }
}

/* vertical rhythm */
.stack   { display: flex; flex-direction: column; gap: 12px; }
.stack.s { gap: 8px; }
.stack.l { gap: 16px; }

/* horizontal group */
.row      { display: flex; align-items: center; gap: 10px; }
.row.tight{ gap: 6px; }
.row.wide { gap: 16px; }
.row.end  { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow     { flex: 1; min-width: 0; }
.push     { margin-left: auto; }

/* the meal grid */
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* small helpers used in a handful of places */
.note {
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-3);
  padding: 0 4px;
  margin: 0;
}
.note.warn { color: var(--c-rose); font-weight: 600; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 20px; }
.mb-m { margin-bottom: 20px; }
.full { width: 100%; }

/* skip link — the React build had no landmark or skip link at all */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--violet);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-btn) 0;
  font-weight: 800;
  font-size: 13.5px;
}
.skip:focus { left: 0; }

/* visually hidden, still announced */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   FIXES — each of these was a confirmed finding against the React build,
   reproduced in a browser before being changed here.
   ===================================================================== */

/* A deactivated student row swallowed the selection ring, because .urow.off
   redefines box-shadow after .urow.sel. Selecting one looked like nothing
   happened. */
.urow.off.sel {
  box-shadow: inset 0 0 0 2px var(--violet);
}

/* The search field showed no focus indicator at all — zero pixels changed
   when it received keyboard focus. */
.search:focus-within {
  box-shadow:
    inset 0 0 0 1.5px var(--violet),
    inset 0 1px 0 #fff;
}

/* .page had a max-width but no auto margin, so past ~1600px the content
   stayed pinned left against a widening empty gutter. */
.page {
  margin-inline: auto;
}

/* Narrow viewports: the meal-name column collapsed to a few characters and
   names overlapped their status chip. Let rows wrap instead. */
@media (max-width: 560px) {
  .orow,
  .urow {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .orow .oi,
  .urow .ui {
    flex: 1 1 100%;
    order: 2;
  }
  .urow .ue {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .urow .ubal {
    min-width: 0;
  }
  .split > .aside.sticky {
    position: static;
  }
}

/* Material Symbols arrive as ligature words before the font loads, so an icon
   briefly reads "restaurant_menu". Reserve the box and hide the text until
   the glyphs are ready. font-display:block in the <link> does the rest. */
.ms {
  min-width: 1em;
  text-align: center;
}