/* Guestbook Portal — shell layout.
   Built only on the design tokens in tokens/*.css. No new colours or fonts.
   Re-expresses the DesignMockups/ui_kits/arrivals-spec React shell as static CSS. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  height: 100%;
  overflow: hidden;              /* fixed page height — the window never scrolls */
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-ui-base);
}
a { color: inherit; text-decoration: none; }

/* ---- app frame: fixed viewport height — header on top, rail + main below ---- */
.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app__body { display: flex; flex: 1; min-height: 0; }
/* Default: the main area scrolls its own content (home / admin). The arrivals view
   overrides this so only the table body scrolls (see arrivals.css).
   `position: relative` anchors the .is-navigating::after spinner declared further down. */
.app__main { flex: 1; min-width: 0; overflow-y: auto; position: relative; }

/* ---- top header (navy chrome) ---- */
.hdr {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  height: 56px; padding: 0 var(--space-6);
  background: var(--fk-navy); color: var(--text-inverse);
  white-space: nowrap;
}
.hdr__wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 300; font-size: 16px;
  letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.hdr__divider { width: 1px; height: 24px; background: rgba(255,255,255,.2); }
.hdr__crumbs { display: inline-flex; align-items: center; gap: var(--space-2); }
.hdr__crumb-root {
  font: var(--type-label); letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.hdr__crumb-current { color: #fff; font: var(--type-ui-sm); }
.hdr__spacer { flex: 1; }
.hdr__stamp {
  font: var(--type-ui-xs); font-variant-numeric: tabular-nums;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
}
.hdr__stamp--nonprod { color: var(--fk-sage); }
.hdr__control {
  height: 32px; display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-3); font: var(--type-ui-sm); color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
}
.hdr__scope {
  border-radius: var(--radius-pill); text-transform: uppercase;
  font: var(--type-ui-xs); letter-spacing: var(--tracking-label);
  cursor: default;
}
.hdr__control[disabled] { opacity: .55; }
.hdr__user {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: var(--type-ui-sm); color: rgba(255,255,255,.85);
}
.hdr .icon { width: 16px; height: 16px; }

/* ---- collapsible nav rail ---- */
.rail {
  position: sticky; top: 56px; align-self: flex-start;
  height: calc(100vh - 56px);
  background: var(--fk-navy-deep); color: #fff;
  overflow: hidden; flex: 0 0 auto;
  width: 56px; transition: width var(--dur-base) var(--ease-standard);
}
.rail--open { width: 224px; }
.rail__inner { display: flex; flex-direction: column; gap: 3px; padding: var(--space-2); }
.rail__toggle,
.rail__item {
  display: flex; align-items: center; gap: var(--space-3);
  height: 40px; padding: 0 var(--space-2);
  border: 0; background: transparent; color: #fff; cursor: pointer;
  border-radius: var(--radius-sm); font: var(--type-ui-base); text-align: left;
  width: 100%;
}
.rail__toggle { color: rgba(255,255,255,.6); font: var(--type-ui-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.rail__item:hover { background: rgba(255,255,255,.07); }
.rail__item--active { background: rgba(255,255,255,.13); box-shadow: inset 2px 0 0 var(--fk-sage); }
.rail__item--disabled { color: rgba(255,255,255,.34); cursor: default; }
.rail__item--disabled:hover { background: transparent; }
.rail__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__divider { height: 1px; margin: var(--space-2) 0; background: rgba(255,255,255,.12); }
.rail .icon { width: 20px; height: 20px; flex: 0 0 auto; }
/* collapsed: hide labels */
.rail:not(.rail--open) .rail__label { display: none; }

/* ---- page container ---- */
.page { max-width: var(--container-max); padding: var(--space-6) var(--space-6) var(--space-10); }
.page__eyebrow {
  font: var(--type-label); letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-2);
}
.page__title {
  font: var(--type-display-2); letter-spacing: var(--tracking-display);
  text-transform: uppercase; color: var(--text-heading); margin: 0 0 var(--space-3);
}
.page__lead { font: var(--type-serif-lead); color: var(--text-muted); margin: 0 0 var(--space-8); max-width: 60ch; }

/* ---- module grid ---- */
.modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .modgrid { grid-template-columns: 1fr; } }
.modtile {
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-top: 3px solid var(--fk-stone); border-radius: var(--radius-md);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.modtile--live { border-top-color: var(--fk-sage); box-shadow: var(--shadow-card); }
.modtile--dim { opacity: .72; }
.modtile__icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--fk-navy-300);
}
.modtile--live .modtile__icon { background: var(--fk-navy-100); color: var(--fk-navy); }
.modtile__icon .icon { width: 20px; height: 20px; }
.modtile__title { font: var(--type-ui-lg); color: var(--text-heading); margin: 0; }
.modtile__desc { font: var(--type-serif-body); color: var(--text-muted); margin: 0; }
.modtile__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.modtile__meta { font: var(--type-ui-sm); color: var(--fk-sage-900); }
.modtile__meta--muted { color: var(--text-muted); text-transform: uppercase; font: var(--type-ui-xs); letter-spacing: var(--tracking-label); }

/* ---- button (minimal, token-driven) ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  border: 0; cursor: pointer; font: var(--type-ui-sm); font-weight: 600;
  background: var(--action-primary-bg); color: var(--action-primary-fg);
}
.btn:hover { background: var(--action-primary-bg-hover); }
.btn .icon { width: 15px; height: 15px; }

/* ---- placeholder page ---- */
.placeholder { display: flex; flex-direction: column; gap: var(--space-3); }
.placeholder__note { font: var(--type-serif-body); color: var(--text-muted); }

/* ---- focus, per token ---- */
:where(a, button, select, input):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Default to text-sized; context rules (.hdr/.rail/.btn/…) override with explicit px. */
.icon { display: inline-block; vertical-align: middle; width: 1em; height: 1em; }

/* ---- header: role chip + sign-out (Phase 0 item 2) ---- */
.hdr__role { display: inline-flex; align-items: center; font: var(--type-ui-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .85; }
.hdr__signout { display: inline-flex; align-items: center; gap: 6px; color: inherit; opacity: .8; text-decoration: none; }
.hdr__signout:hover { opacity: 1; }
.hdr__signout .icon { width: 16px; height: 16px; }

/* ---- sign-in (split screen — DesignMockups SpecLogin) ---- */
.signin { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.signin__brand { background: var(--fk-navy); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 56px 44px; }
.signin__wordmark { font-family: var(--font-display); font-weight: 300; font-size: 18px; letter-spacing: .24em; text-transform: uppercase; }
.signin__eyebrow { font: var(--type-label); font-size: 13px; letter-spacing: var(--tracking-label-wide); text-transform: uppercase; color: var(--fk-sage); }
.signin__title { font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1.12; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-top: 14px; }
.signin__lead { font: var(--type-serif-lead); color: rgba(255,255,255,.72); max-width: 440px; margin-top: 14px; }
.signin__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: var(--type-ui-sm); color: rgba(255,255,255,.45); }

.signin__panel { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--surface-card); }
.signin__card { width: 330px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.signin__h { font: var(--type-display-3); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--text-heading); }
.signin__sso { justify-content: center; height: 44px; border-radius: var(--radius-pill); }
.signin__note { font: var(--type-ui-sm); color: var(--text-muted); margin: 0; }
.login__error { font: var(--type-ui-sm); color: var(--alert-warning-fg, #8a5a00); background: var(--alert-warning-bg, #fff4e0); border: 1px solid var(--alert-warning-border, #f0d9a8); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }

@media (max-width: 720px) {
  .signin { grid-template-columns: 1fr; }
  .signin__brand { padding: 32px 28px; gap: 28px; }
  .signin__title { font-size: 34px; }
}

/* ---- shell content navigation (spinner on <main> during a page swap) ---- */
/* The spinner is absolutely positioned against .app__main, which is given
   `position: relative` with its layout rules at the top of this file. */
.app__main.is-navigating { pointer-events: none; }
.app__main.is-navigating > * { opacity: .4; transition: opacity .12s ease; }
.app__main.is-navigating::after {
  content: ""; position: absolute; top: 96px; left: 50%; width: 30px; height: 30px;
  margin-left: -15px; border: 3px solid var(--border-hairline); border-top-color: var(--fk-navy);
  border-radius: 50%; animation: shell-spin .7s linear infinite;
}
@keyframes shell-spin { to { transform: rotate(360deg); } }