/* Compass — app-level page helpers.
   NOT the design-system component library (compass-components.css).
   Only app-scoped utilities for composing screens live here — the shared
   accessibility primitives, spacing utilities and modifiers live in the c-* library. */

body {
  margin: 0;
}

/* Alpine: keep x-cloak elements hidden until Alpine initialises (prevents a flash). */
[x-cloak] {
  display: none !important;
}

/* Auth screens — centred split-shell frame (app-scoped).
   The responsive collapse of the shell itself lives in the component library (@media 720px). */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas-2);
  padding: var(--space-10);
}

.auth-frame {
  width: 1120px;
  max-width: 100%;
  min-height: 600px;
}

.auth-frame--tall {
  min-height: 640px;
}

/* Floating brand decorations (app-scoped animation; the .c-authshell__brand-deco--*
   sizing/offset classes are in the component library). */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.floaty {
  animation: floaty 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .floaty {
    animation: none;
  }
}

/* Dashboard grids — used by the Overview. */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Two-up dimension grid (Key Driver Results) — fixed half-width cards. With three dimensions
   the odd last card sits in the left column (default grid auto-placement), not stretched full-width.
   align-items:start so each card sizes to its own content — otherwise a card whose row-mate is taller
   (e.g. one with an expanded key-driver row) stretches and shows empty white padding. */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Single-column stack — the grid-2/grid-3 convention at one column. */
.grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Client reporting portal — app-scoped helpers (the c-* chrome lives in the component library). */

/* The reduced-bar pages (refusals, organisation chooser) are a narrow column, not the full canvas. */
.portal-narrow {
  max-width: 620px;
  margin: 0 auto;
}

/* One organisation on the chooser: the whole card is the destination (c-card--link), and the row is
   name over the round it opens, with a chevron. Layout glue only — no colour, no type scale of its own. */
.chooser-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.chooser-row__body {
  flex: 1;
  min-width: 0;
}

.chooser-row__name {
  display: block;
  font-size: var(--text-h3);
}

.chooser-row__meta {
  display: block;
  margin-top: 3px;
}

.chooser-row__chevron {
  color: var(--ink-300);
  flex-shrink: 0;
}

/* "Sample data" banner: a pill + explanation while survey results are placeholders. */
.client-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.client-note__text {
  font-size: 13px;
  color: var(--ink-500);
}

/* Admin console — app-level page frame + chrome helpers.
   Component classes (c-appbar--admin, c-table, c-menu, …) live in the c-* library; these are
   only app-scoped layout/positioning bits that compose them. */
.admin-page {
  padding: 24px;
  max-width: 1320px;
  margin: 0 auto;
}


/* Leading avatar cell in the users table keeps the name column from wrapping. */
.admin-cell-avatar {
  width: 44px;
}

/* Detail (identity rail + panels) and split editor layouts. */
.admin-detail-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
}

.admin-split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.admin-rail {
  text-align: center;
}

.admin-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 24px;
  margin: 0 auto 14px;
}

.admin-rail__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}

.admin-rail__badges {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Narrow form card. */
.admin-form-narrow {
  max-width: 680px;
}

.admin-card-top {
  border-top: 1px solid var(--line-soft);
}

.admin-formrow-tight {
  grid-template-columns: 1fr auto;
  padding: 8px 0;
  border-bottom: none;
}

.admin-field-last {
  margin-bottom: 0;
}

.admin-radio-row {
  display: flex;
  gap: 10px;
}

/* Client detail header lead (icon + title) + the larger client icon. */
.admin-pagehead-lead {
  display: flex;
  gap: 16px;
  align-items: center;
}

.admin-client-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

/* Narrow form field (client code) + descriptive prose block. */
.admin-field-narrow {
  max-width: 240px;
}

.admin-prose {
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* Dashboard: activity (wider) + needs-attention (narrower) two-column layout. */
.admin-dash-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}

.admin-attn-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-attn-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.admin-attn-item__body {
  font-size: 13.5px;
}

/* Inner padding for the dashboard "Recent activity" card. App-scoped layout only —
   the timeline itself is the design system's `c-timeline--compact`. c-cardpad (20px 22px) is
   far too roomy for a compact feed, so this tighter inset lives here rather than as an inline style. */
.admin-activity-feed {
  padding: 6px 10px 10px;
}

/* Change-password modal field spacing. */
.admin-field-tight {
  margin-bottom: 12px;
}

.admin-field-spaced {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .admin-dash-grid {
    grid-template-columns: 1fr;
  }
}

/* Stack the two-column admin layouts on tablet/narrow. */
@media (max-width: 900px) {
  .admin-detail-grid,
  .admin-split-2 {
    grid-template-columns: 1fr;
  }
}

/* View-access editor / card: small muted service-meta line (app-scoped presentation). */
.vx-svc-meta {
  font-size: 12.5px;
  color: var(--ink-400);
  font-weight: 500;
}

/* Guides admin — app-scoped presentation helpers.
   Not part of the design system; compose brand/state tokens. */
/* The upload dropzone is a <label> (whole-zone click opens the picker); a label is display:inline by
   default, so the dashed box never forms. Force block so .c-dropzone boxes correctly as a label. */
.c-dropzone { display: block; }
.guide-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-violet-50); color: var(--brand-violet); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.guide-ico svg { width: 22px; height: 22px; }
.guide-ico--muted { background: var(--fill-muted); color: var(--ink-400); }
.guide-num { font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.rowacts { display: flex; gap: 7px; justify-content: flex-end; }
.guide-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.guide-wizard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guide-danger-strip { display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px; background: var(--state-negative-soft); border: 1px solid var(--state-negative-border); border-radius: 10px; }
.guide-danger-strip svg { color: var(--state-negative-text); flex-shrink: 0; margin-top: 1px; width: 17px; height: 17px; }
.guide-danger-strip span { font-size: 12.5px; color: var(--state-negative-text); line-height: 1.5; }
@media (max-width: 900px) {
  .guide-statgrid { grid-template-columns: repeat(2, 1fr); }
  .guide-wizard-grid { grid-template-columns: 1fr; }
}