/* App shell: header, view outlet, bottom nav, and the More sheet.
   Every colour and size references a token from tokens.css — no literals. */

/* ---- Skip link ---- */

/* Off-screen until focused, rather than display:none, which would take it out
   of the tab order entirely and defeat the point. */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: calc(-1 * var(--s-8) * 2);
  z-index: 30;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-alt);
  border: var(--hair) solid var(--accent-line);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: var(--s-2);
}

/* ---- Header ---- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  padding-top: max(var(--s-3), env(safe-area-inset-top));
  background: var(--scrim);
  backdrop-filter: blur(var(--s-2));
  border-bottom: var(--hair) solid var(--line);
}

/* The wordmark is the first thing to go when space is short — the launcher
   icon and the tab title already carry the app's name, and the view name is
   what the user actually needs on screen. Same trade the workout tracker
   makes at the same breakpoint. */
.app-mark {
  display: none;
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .app-mark {
    display: block;
  }
}

/* The single h1. Router keeps its text in step with the route, so a screen
   reader announcing the page heading always names the current view. */
.view-title {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: 650;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- View outlet ---- */

.app-main {
  max-width: var(--w-main);
  margin: 0 auto;
  padding: var(--s-4);
  /* Clear the fixed nav, plus the gesture bar underneath it on Android. */
  padding-bottom: calc(
    var(--nav-h) + var(--s-5) + env(safe-area-inset-bottom)
  );
}

/* The outlet takes focus on navigation (tabindex="-1"), which would otherwise
   draw a focus ring around the whole view. :focus-visible is not enough on its
   own here — programmatic focus can still match it in some engines. */
.app-main:focus {
  outline: none;
}

.app-main h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-name);
  font-weight: 650;
  letter-spacing: var(--ls-tight);
}

.muted,
.loading {
  margin: 0 0 var(--s-3);
  color: var(--text-dim);
  max-width: 60ch;
}

.error {
  margin: 0;
  color: var(--bad-text);
}

/* Marks scaffolding that a later build step replaces. Dashed, dim, and
   deliberately unlike any real UI state, so it is never mistaken for one. */
.stub {
  display: inline-block;
  margin: 0;
  padding: var(--s-1) var(--s-2);
  border: var(--hair) dashed var(--line);
  border-radius: var(--r-pill);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

/* ---- Bottom nav ----
   Bottom, not top: spec §2.2 calls for one-hand operation on a phone, and the
   top of a modern handset is out of thumb reach. The workout tracker puts its
   routes in the header, but it has six short labels and this app has eight
   destinations — four here, four behind More. */

.app-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: var(--s-1);
  padding: 0 var(--s-1);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: var(--hair) solid var(--line);
}

.nav-item {
  flex: 1 1 0;
  /* 0 rather than auto, so a long label shrinks the track instead of pushing
     the row past 360px. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nav-h);
  /* `border: 0` first: More is a <button> and the others are <a>, and a button
     carries a UA border on all four sides. Setting only border-top leaves that
     border framing the one item, which reads as a control among plain links. */
  border: 0;
  /* The accent edge that marks the active item is carried transparently on
     every item, so turning it on shifts no layout. */
  border-top: var(--edge-active) solid transparent;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-label);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--text);
}

/* §9.3: "you are here" is carried by the edge and by aria-current, not by
   colour alone. */
.nav-item.is-active {
  border-top-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ---- More sheet ---- */

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: var(--w-sheet);
  max-height: var(--h-sheet);
  margin: 0 auto;
  padding: var(--s-4);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--elev-2);
  color: var(--text);
  overflow-y: auto;
}

/* ::backdrop inherits custom properties from the originating element in
   current Chromium, which is the target (§2.2). Older engines that do not
   inherit fall back to the UA's default dim — degraded, not broken. */
.sheet::backdrop {
  background: var(--veil);
}

.sheet h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-name);
  font-weight: 650;
}

.sheet-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.sheet-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border: var(--hair) solid transparent;
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}

.sheet-list a:hover {
  background: var(--surface-alt);
  border-color: var(--line);
}

.sheet-list a.is-active {
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}

.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  width: 100%;
  padding: 0 var(--s-4);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  color: var(--text);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}

.sheet-close:hover {
  border-color: var(--accent-line);
}

/* ---- Data attribution (§4.1a) ----
   Permanent, not decorative: AUSNUT is share-alike and foods.json is a
   derivative work, so this block is a compliance artefact. */

.attribution {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--hair) solid var(--line);
  max-width: 60ch;
}

.attribution h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-name);
  font-weight: 650;
}

.attribution h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

.attribution p {
  margin: 0 0 var(--s-2);
}

.attribution a {
  color: var(--accent);
  min-height: var(--tap);
  display: inline-block;
  line-height: var(--tap);
}

/* The USDA citation is a quoted reference, so it reads as one. */
.cite {
  padding-left: var(--s-3);
  border-left: var(--hair) solid var(--line);
  color: var(--text-dim);
  font-size: var(--fs-label);
}