/* Rayon base — reset and document defaults. Tokens only, no raw hex. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg,
video {
  max-width: 100%;
}

img,
svg {
  display: block;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Numeric alignment for KPI values, scores, money and counts. */
.tnum,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
    scroll-behavior: auto;
  }
}

/* ============================================================
   Shell layout — login, app frame, panes, rail, toast, modal.
   Reusable components live in components.css.
   ============================================================ */

[hidden] { display: none !important; }

/* ---- Login ---- */
#loginScreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--sidebar-top), var(--sidebar-bottom));
  padding: var(--s6);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s8);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--heading);
}
.login-tagline {
  color: var(--muted);
  font-size: var(--fs-caption);
  margin: var(--s1) 0 var(--s6);
}
.login-field { margin-bottom: var(--s4); }
.login-foot { margin-top: var(--s4); font-size: var(--fs-caption); text-align: center; }
#loginError {
  display: none;
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
  background: var(--red-tint);
  color: var(--red);
  font-size: var(--fs-caption);
}
#loginError.show { display: block; }
#loginError.notice { background: var(--blue-tint); color: var(--primary); }

/* ---- App frame ---- */
/* Viewport-height shell: the frame never scrolls, only #canvas does.
   Every ancestor of a scrolling child needs min-height/min-width 0, or the
   child refuses to scroll and grows the page instead. */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: 'sidebar topbar' 'sidebar canvas';
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* Pinned to the viewport. Scrolls inside itself only when its own content
   (nav + plan card + user row) is taller than a short screen. */
#sidebar {
  grid-area: sidebar;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
#topbar { grid-area: topbar; position: relative; min-width: 0; }
#canvas {
  grid-area: canvas;
  padding: 11px var(--s6) var(--s6);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--canvas), var(--surface) 48%, var(--canvas));
}

/* ---- Search dropdown ---- */
#globalSearchResults {
  position: absolute;
  top: calc(var(--topbar-h) - var(--s2));
  left: var(--s6);
  width: 420px;
  max-height: 60vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  z-index: 40;
}
#globalSearchResults:empty { display: none; }
.search-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s2) var(--s4);
  background: none;
  border: 0;
}
.search-row:hover { background: var(--selected-fill); }

/* ---- Panes ---- */
.pane { display: none; }
.pane.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--s3);
  align-items: start;
}
.pane.active.no-rail { grid-template-columns: minmax(0, 1fr); }
.pane-head {
  grid-column: 1 / -1;
  margin-bottom: var(--s1);
  /* The title, an optional count on its right, and the subtitle under both. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--s4);
}
.page-title { font-size: 35px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.page-subtitle { color: var(--body); margin-top: var(--s1); grid-column: 1 / -1; }
.page-count {
  color: var(--primary);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.page-count:empty { display: none; }
.pane > .rail {
  position: sticky;
  top: var(--s6);
  max-height: calc(100dvh - var(--topbar-h) - var(--s6) * 3);
  overflow-y: auto;
}
.pane > .rail:empty { display: none; }
.pane > [id$='Alert']:empty { display: none; }
.pane > [id$='Alert'] { grid-column: 1; }

/* ---- Usage card (real counts only; no plan tier) ---- */
#usageCard .plan-card-title { color: var(--sidebar-text); }

/* ---- Toast ---- */
#toastHost {
  position: fixed;
  right: var(--s6);
  bottom: var(--s6);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.toast {
  background: var(--heading);
  color: var(--surface);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-control);
  font-size: var(--fs-body);
  max-width: 360px;
}
.toast.tone-success { background: var(--green); }
.toast.tone-danger { background: var(--red); }
.toast.tone-warn { background: var(--amber); }

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 42, 77, .45);
  padding: var(--s6);
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  width: 100%;
  max-width: 560px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--fs-section); font-weight: var(--fw-semibold); color: var(--heading); }
.modal-close { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; }
.modal-body { padding: var(--s6); overflow: auto; }

/* ---- The guide, in the modal ---- */
/* The GEO guide is the longest page the shell renders, and the × in the head
   scrolls a screenful out of reach of the reader who has finished it. The
   labelled way out is pinned to the bottom edge of the scroller instead, so
   closing the guide is never the thing you have to scroll to find. The
   negative margins pull it out of .modal-body's padding so it spans the modal
   and sits flush on the bottom rail. */
.st-guide-foot {
  position: sticky;
  bottom: calc(var(--s6) * -1);
  display: flex;
  justify-content: flex-end;
  margin: var(--s5) calc(var(--s6) * -1) calc(var(--s6) * -1);
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* The two ways out of a form modal: the primary action and Cancel, side by
   side and nothing else. Wraps to one per line on a narrow screen. */
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: flex-end;
  margin-top: var(--s5);
}
.modal-actions .btn { flex: 1 1 auto; }