/*
 * SWFT system-page theme — Space Foundation brand, light scheme.
 * Owner: swft-platform (SWFT_Theme). Loaded on every `page-app` page, and late
 * wherever a platform component renders on another template.
 *
 * Layers, in cascade order:
 *   1. @font-face (Poppins, self-hosted, OFL — see fonts/OFL.txt)
 *   2. Tokens on :root — primitives (--sf-*) then semantic (--swft-*). Consumers
 *      use ONLY semantic names. Legacy aliases at the end of the block are
 *      compat for older plugin sheets; do not use them in new code.
 *   3. body.page-template-page-app — remaps the theme's WP presets so Global
 *      Styles' own body/button/link/heading rules re-skin themselves (0,1,1
 *      beats their 0,0,1 and 0,1,0). Global Styles (post 9) is never edited.
 *   4. Element rules on system pages (buttons, links, headings, form controls).
 *   5. Gravity Forms safety net (real theming comes from SWFT_Theme::GF_STYLES).
 *   6. GravityView token override — on `.gv-themed` (the container), never body:
 *      GV sets its tokens inside @layer on the container, so body values are
 *      ignored; an unlayered rule on the element wins at any specificity.
 *   7. Components: .swft-page, .swft-card, .swft-btn, .swft-notice, .swft-table,
 *      .swft-muted, .swft-steps, .swft-back, .swft-resources, .swft-status,
 *      .swft-chooser, .swft-account-bar.
 *   8. TEMPORARY legacy aliases (.dashboard-card, .btn*, .coming-soon-notice …)
 *      so DB-only pages stay presentable until R3 re-authors them. Deleted in R5.
 *   9. Dark-scheme skeleton (commented; nothing dark ships).
 *
 * Priority-flag policy: no `important` declarations in this file. If one is
 * ever added it must cite, in a comment on the same line, the exact rule it
 * defeats and why the cascade cannot.
 */

/* 1. Fonts ------------------------------------------------------------------ */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Poppins-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Poppins-SemiBoldItalic.woff2") format("woff2"); }

/* 2. Tokens ----------------------------------------------------------------- */
:root {
  /* Primitives: spacefoundation.org gecko-theme theme.json palette slugs. */
  --sf-blue: #2058A5;           /* blue          6.4:1 on #FAFAFA */
  --sf-bright-blue: #2779E1;    /* bright-blue   4.2:1 — hover / large text only */
  --sf-navy: #112850;           /* navy */
  --sf-base: #101820;           /* base (SF page chrome; our text) */
  --sf-contrast: #FAFAFA;       /* contrast (SF content card; our page) */
  --sf-lightest-blue: #F4F8FD;  /* lightest-blue */
  --sf-light-blue: #E2ECF9;     /* light-blue */
  --sf-white: #FFFFFF;
  --sf-grey-600: #4E5966;       /* derived neutral, 6.6:1 on #FAFAFA */
  --sf-grey-500: #6E7277;       /* derived neutral, form-control borders */
  --sf-green: #00B176;          /* green */
  --sf-red: #EE2938;            /* professional-red */
  --sf-yellow: #CCDD10;         /* events-yellow (dark text only) */
  --sf-teal: #03B9C4;           /* government-teal */

  /* Semantic — light scheme. Every consumer references these. */
  --swft-primary: var(--sf-blue);
  --swft-primary-hover: var(--sf-bright-blue);
  --swft-primary-dark: var(--sf-navy);
  --swft-accent: var(--sf-teal);
  --swft-ink: var(--sf-base);
  --swft-text-muted: var(--sf-grey-600);
  --swft-link: var(--swft-primary);
  --swft-surface: var(--sf-contrast);
  --swft-surface-alt: var(--sf-lightest-blue);
  --swft-surface-strong: var(--sf-light-blue);
  --swft-card: var(--sf-white);
  --swft-border: rgba(16, 24, 32, .15);
  --swft-border-strong: var(--sf-grey-500);
  --swft-success: var(--sf-green);
  --swft-danger: var(--sf-red);
  --swft-warning: var(--sf-yellow);
  --swft-on-warning: var(--swft-ink);
  --swft-success-bg: #E6F7F1;
  --swft-danger-bg: #FDECEE;
  --swft-warning-bg: #FBFCE9;
  --swft-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --swft-font-heading: var(--swft-font-body);
  --swft-radius: 0;
  --swft-radius-card: 0;
  --swft-shadow: 0 0 16px 0 rgba(16, 24, 32, .15);
  --swft-transition: .15s ease;
  --swft-space-1: .25rem;
  --swft-space-2: .5rem;
  --swft-space-3: .75rem;
  --swft-space-4: 1rem;
  --swft-space-5: 1.5rem;
  --swft-space-6: 2rem;

  /* Legacy aliases — compat for plugin sheets written against the SWFT palette
     names. Do not use in new code; they go when the last consumer is migrated. */
  --swft-teal: var(--swft-primary);
  --swft-navy: var(--swft-primary-dark);
  --swft-orange: var(--swft-accent);
  --swft-muted: var(--swft-text-muted);
  --swft-muted-2: var(--swft-text-muted);
}

/* 3. WP preset remap on system pages --------------------------------------- */
body.page-template-page-app {
  --wp--preset--color--primary: var(--swft-primary);
  --wp--preset--color--primary-accent: var(--sf-white);
  --wp--preset--color--primary-alt: var(--swft-accent);
  --wp--preset--color--primary-alt-accent: var(--swft-primary-dark);
  --wp--preset--color--secondary: var(--swft-primary-dark);
  --wp--preset--color--main: var(--swft-ink);
  --wp--preset--color--main-accent: var(--swft-surface-alt);
  --wp--preset--color--base: var(--swft-surface);
  --wp--preset--color--border-light: var(--swft-border);
  --wp--preset--color--border-dark: var(--swft-border-strong);
  --wp--preset--font-family--roboto: var(--swft-font-body);
  --wp--preset--font-family--karla: var(--swft-font-body);
  --wp--preset--font-family--quiche-display: var(--swft-font-heading);
  background-image: none;
  -webkit-font-smoothing: antialiased;
}

/* 4. Element rules on system pages ----------------------------------------- */
/* Element defaults carry element-level specificity only, (0,0,2): the page-app
   class is wrapped in :where() so `body … a` outranks Global Styles' (0,0,1)
   element rules whatever the print order, yet loses to ANY class-based component
   rule (a plugin's `.card a { color }` or `.tabs a` must win without effort). */
body:where(.page-template-page-app) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--swft-font-heading);
  font-weight: 600;
  color: var(--swft-primary-dark);
}
body:where(.page-template-page-app) a:where(:not(.wp-element-button, .swft-btn, .btn)) {
  color: var(--swft-link);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--swft-border-strong);
  text-underline-offset: .15em;
  transition: color var(--swft-transition), text-decoration-color var(--swft-transition);
}
body:where(.page-template-page-app) a:where(:not(.wp-element-button, .swft-btn, .btn)):hover {
  color: var(--swft-primary-hover);
  text-decoration-color: currentColor;
}
body.page-template-page-app .wp-element-button,
body.page-template-page-app .wp-block-button__link {
  border-radius: var(--swft-radius);
  font-family: var(--swft-font-body);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .75em 1.25em;
  transition: background-color var(--swft-transition), color var(--swft-transition);
}
body.page-template-page-app .wp-element-button:hover,
body.page-template-page-app .wp-block-button__link:hover {
  background-color: var(--swft-primary-hover);
  color: var(--sf-white);
}
:where(body.page-template-page-app :is(a, button, input, select, textarea, [tabindex])):focus-visible {
  outline: 2px solid var(--swft-primary-hover);
  outline-offset: 2px;
}
body:where(.page-template-page-app) :where(input, select, textarea) {
  accent-color: var(--swft-primary);
}
body.page-template-page-app ::selection {
  background: var(--swft-surface-strong);
  color: var(--swft-ink);
}

/* 5. Gravity Forms shape ----------------------------------------------------- */
/* Colours come from SWFT_Theme::GF_STYLES (Orbital + per-form CSS variables);
   these give the Orbital framework the SF button shape through its own variables
   and win over its reset (its button rules are (0,3,0); ours are (0,3,1)). */
body.page-template-page-app .gform_wrapper.gform-theme--framework {
  --gf-ctrl-btn-font-family: var(--swft-font-body);
  --gf-ctrl-btn-font-weight: 600;
  --gf-ctrl-btn-radius: var(--swft-radius);
  --gf-ctrl-btn-shadow: none;
  --gf-ctrl-btn-shadow-hover: none;
  --gf-ctrl-btn-shadow-focus: none;
  --gf-radius: var(--swft-radius);
  --gf-font-family-base: var(--swft-font-body);
}
body.page-template-page-app .gform_wrapper .gform_button.button,
body.page-template-page-app .gform_wrapper .gform_next_button.button,
body.page-template-page-app .gform_wrapper .gform_previous_button.button {
  border-radius: var(--swft-radius);
  font-family: var(--swft-font-body);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.page-template-page-app .gform_wrapper.gravity-theme .gform_button {
  background-color: var(--swft-primary);
  color: var(--sf-white);
  border: 0;
}
body.page-template-page-app .gform_wrapper.gravity-theme .gform_button:hover {
  background-color: var(--swft-primary-hover);
}

/* 6. GravityView token override (on the container, unlayered) -------------- */
body.page-template-page-app .gv-themed {
  --gv-color-primary: var(--swft-primary);
  --gv-color-primary-hover: var(--swft-primary-hover);
  --gv-color-text: var(--swft-ink);
  --gv-color-text-muted: var(--swft-text-muted);
  --gv-field-label-color: var(--swft-text-muted);
  --gv-color-link: var(--swft-link);
  --gv-color-link-hover: var(--swft-primary-hover);
  --gv-color-link-visited: var(--swft-primary-dark);
  --gv-button-bg: var(--swft-primary);
  --gv-button-bg-hover: var(--swft-primary-hover);
  --gv-button-color: var(--sf-white);
  --gv-button-radius: var(--swft-radius);
  --gv-control-bg: var(--swft-card);
  --gv-control-border-color: var(--swft-border-strong);
  --gv-control-radius: var(--swft-radius);
  --gv-color-surface: var(--swft-card);
  --gv-color-surface-alt: var(--swft-surface-alt);
  --gv-color-border-light: var(--swft-border);
  --gv-color-error: var(--swft-danger);
  --gv-color-success: var(--swft-success);
  --gv-focus-ring-color: var(--swft-primary-hover);
  --gv-font-family: var(--swft-font-body);
  --gv-entry-radius: var(--swft-radius-card);
  --gv-entry-shadow: var(--swft-shadow);
}
/* GV renders the single-entry back link outside its container. */
body.page-template-page-app .gv-back-link:has(~ .gv-themed) {
  display: inline-block;
  margin-bottom: var(--swft-space-4);
  color: var(--swft-link);
}
/* GV's "Entries" caption: keep for screen readers, hide visually; no footer row. */
body.page-template-page-app .gv-table-view caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
body.page-template-page-app .gv-table-view tfoot {
  display: none;
}
body.page-template-page-app .gv-table-view th {
  color: var(--swft-primary-dark);
  font-weight: 600;
}
/* Fancybox (GV lightbox) mounts on body, outside any View container. */
body.page-template-page-app .fancybox__content {
  max-width: 900px;
  width: 90%;
  max-height: 90vh;
  padding: var(--swft-space-5);
  background: var(--swft-card);
  color: var(--swft-ink);
  border-radius: var(--swft-radius-card);
  box-shadow: var(--swft-shadow);
}
body.page-template-page-app .fancybox__content .carousel__button.is-close,
body.page-template-page-app .fancybox__content .f-button.is-close-btn {
  color: var(--swft-primary);
  background: transparent;
  border-radius: var(--swft-radius);
}
body.page-template-page-app .fancybox__content .carousel__button.is-close:hover,
body.page-template-page-app .fancybox__content .f-button.is-close-btn:hover {
  color: var(--sf-white);
  background: var(--swft-primary-hover);
}
body.page-template-page-app .fancybox__content .carousel__button.is-close svg {
  stroke: currentColor;
}

/* 7. Components -------------------------------------------------------------- */
/* Page shell */
.swft-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--swft-space-2) 0 var(--swft-space-6);
  color: var(--swft-ink);
  line-height: 1.55;
}
.swft-page__header {
  padding-bottom: var(--swft-space-5);
}
.swft-page__header h1 {
  margin: 0 0 var(--swft-space-2);
}
.swft-page__header p {
  max-width: 720px;
  margin: 0;
}

/* Card */
.swft-card {
  background: var(--swft-card);
  border-radius: var(--swft-radius-card);
  box-shadow: var(--swft-shadow);
  padding: var(--swft-space-5) var(--swft-space-6);
  margin: 0 0 var(--swft-space-5);
}
.swft-card > :first-child {
  margin-top: 0;
}
.swft-card > :last-child {
  margin-bottom: 0;
}
.swft-card h2,
.swft-card h3 {
  margin: 0 0 var(--swft-space-3);
}
.swft-card ul,
.swft-card ol {
  padding-left: 1.25em;
  margin: 0 0 var(--swft-space-4);
}

/* Buttons — SF convention: square, uppercase, letter-spaced, semibold. */
.swft-btn {
  display: inline-block;
  padding: .75em 1.25em;
  border: 1px solid var(--swft-primary);
  border-radius: var(--swft-radius);
  background: var(--swft-primary);
  color: var(--sf-white);
  font-family: var(--swft-font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--swft-transition), border-color var(--swft-transition), color var(--swft-transition);
}
.swft-btn:hover {
  background: var(--swft-primary-hover);
  border-color: var(--swft-primary-hover);
  color: var(--sf-white);
}
.swft-btn--secondary {
  background: transparent;
  color: var(--swft-primary);
}
.swft-btn--secondary:hover {
  background: var(--swft-primary-hover);
  color: var(--sf-white);
}
.swft-btn[disabled],
.swft-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}
.swft-btn + .swft-btn {
  margin-left: var(--swft-space-2);
}

/* Notices */
.swft-notice {
  padding: var(--swft-space-3) var(--swft-space-4);
  margin: 0 0 var(--swft-space-4);
  border: 1px solid var(--swft-border);
  border-radius: var(--swft-radius-card);
  background: var(--swft-surface-alt);
  color: var(--swft-ink);
}
.swft-notice p {
  margin: 0;
  color: inherit;
}
.swft-notice p + p {
  margin-top: var(--swft-space-2);
}
.swft-notice--info {
  background: var(--swft-surface-strong);
  border-color: var(--swft-primary);
}
.swft-notice--warning,
.swft-notice--warn {
  background: var(--swft-warning-bg);
  border-color: var(--swft-warning);
  color: var(--swft-on-warning);
}
.swft-notice--danger {
  background: var(--swft-danger-bg);
  border-color: var(--swft-danger);
}
.swft-notice--success {
  background: var(--swft-success-bg);
  border-color: var(--swft-success);
}

/* Table */
.swft-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--swft-card);
}
.swft-table th,
.swft-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--swft-space-3) var(--swft-space-3);
  border-bottom: 1px solid var(--swft-border);
}
.swft-table th {
  background: var(--swft-surface-strong);
  color: var(--swft-primary-dark);
  font-weight: 600;
}
.swft-table tbody tr:hover {
  background: var(--swft-surface-alt);
}

/* Muted text */
.swft-muted {
  color: var(--swft-text-muted);
}

/* Steps (progress list) */
.swft-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--swft-space-3);
  padding: 0;
  margin: 0 0 var(--swft-space-5);
}
.swft-steps li {
  flex: 1 1 220px;
  background: var(--swft-card);
  border: 1px solid var(--swft-border);
  border-radius: var(--swft-radius-card);
  padding: var(--swft-space-3) var(--swft-space-4);
}
.swft-steps__title {
  display: block;
  font-weight: 600;
  color: var(--swft-primary-dark);
}
.swft-steps__num {
  display: inline-block;
  min-width: 1.6em;
  color: var(--swft-primary);
  font-weight: 600;
}
.swft-steps small {
  display: block;
  color: var(--swft-text-muted);
  margin-top: var(--swft-space-1);
}
.swft-steps .is-done {
  border-color: var(--swft-success);
}
.swft-steps .is-done .swft-steps__num::after {
  content: " \2713";
  color: var(--swft-success);
}

/* Back link */
.swft-back {
  display: inline-block;
  margin: 0 0 var(--swft-space-4);
  font-size: .95rem;
}

/* Resources list (name + badge rows; hub and event host) */
.swft-resources {
  list-style: none;
  padding: 0;
  margin: 0;
}
.swft-resources li {
  background: var(--swft-card);
  border: 1px solid var(--swft-border);
  border-radius: var(--swft-radius-card);
  padding: var(--swft-space-3) var(--swft-space-4);
  margin: 0 0 var(--swft-space-2);
}
.swft-resources li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--swft-space-3);
  text-decoration: none;
}
.swft-resources__name {
  color: var(--swft-ink);
}
.swft-resources__badge {
  background: var(--swft-surface-strong);
  color: var(--swft-primary-dark);
  padding: .2em .7em;
  border-radius: var(--swft-radius);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Status chips */
.swft-status {
  display: inline-block;
  padding: .15em .6em;
  border: 1px solid currentColor;
  border-radius: var(--swft-radius);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.swft-status--ok {
  color: color-mix(in srgb, var(--swft-success) 65%, var(--swft-ink));
  background: var(--swft-success-bg);
}
.swft-status--warn {
  color: color-mix(in srgb, var(--swft-warning) 40%, var(--swft-ink));
  background: var(--swft-warning-bg);
}
.swft-status--danger {
  color: color-mix(in srgb, var(--swft-danger) 80%, var(--swft-ink));
  background: var(--swft-danger-bg);
}

/* Dashboard chooser ([swft_dashboard_chooser]) */
.swft-chooser__options {
  border: 0;
  padding: 0;
  margin: 0 0 var(--swft-space-4);
}
.swft-chooser__legend {
  font-weight: 600;
  margin-bottom: var(--swft-space-3);
}
.swft-chooser__option {
  display: block;
  padding: .6em .8em;
  margin: .4em 0;
  border: 1px solid var(--swft-border-strong);
  border-radius: var(--swft-radius-card);
  background: var(--swft-card);
  cursor: pointer;
  transition: border-color var(--swft-transition), background-color var(--swft-transition);
}
.swft-chooser__option:hover {
  border-color: var(--swft-primary);
}
.swft-chooser__option:has(input:checked) {
  border-color: var(--swft-primary);
  background: var(--swft-surface-alt);
}
.swft-chooser__option input {
  margin-right: .5em;
}
.swft-chooser__remember {
  margin: 0 0 var(--swft-space-4);
}
.swft-chooser__meta {
  font-size: .9em;
  color: var(--swft-text-muted);
}

/* Account bar ([swft_account_bar]) */
.swft-account-bar {
  font-size: .9rem;
  color: var(--swft-text-muted);
  margin: 0 0 var(--swft-space-4);
}

/* 8. TEMPORARY legacy aliases — delete in R5 (SPA-349) --------------------- */
/* Reviewer dashboard (29320) and event host dashboard (29483) are DB-only pages
   still carrying the SWFT class names and dark-palette inline CSS until R3
   re-authors them. Mapped to the tokens here so they read on the light page. */
body.page-template-page-app .swft-dashboard,
body.page-template-page-app .dashboard-header p,
body.page-template-page-app .dashboard-card p,
body.page-template-page-app .dashboard-card li {
  color: var(--swft-ink);
}
body.page-template-page-app .dashboard-header h1,
body.page-template-page-app .dashboard-card h2 {
  color: var(--swft-primary-dark);
  border-bottom-color: var(--swft-border);
}
body.page-template-page-app .dashboard-card li strong {
  color: var(--swft-primary);
}
body.page-template-page-app .dashboard-card,
body.page-template-page-app .dashboard-fullwidth {
  background-color: var(--swft-card);
  border-radius: var(--swft-radius-card);
  box-shadow: var(--swft-shadow);
}
body.page-template-page-app .dashboard-card:hover {
  transform: none;
  box-shadow: var(--swft-shadow);
}
body.page-template-page-app .btn {
  border-radius: var(--swft-radius);
  box-shadow: none;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-white);
}
body.page-template-page-app .btn-primary {
  background-color: var(--swft-primary);
}
body.page-template-page-app .btn-primary:hover {
  background-color: var(--swft-primary-hover);
  box-shadow: none;
}
/* Interim only: poc-app.css forces .btn text white (priority flag) until R2, so
   the secondary alias stays a filled (navy) button rather than the outline. */
body.page-template-page-app .btn-secondary {
  background-color: var(--swft-primary-dark);
}
body.page-template-page-app .btn-secondary:hover {
  background-color: var(--swft-primary-hover);
  box-shadow: none;
}
body.page-template-page-app .coming-soon-notice {
  color: var(--swft-ink);
  background-color: var(--swft-surface-strong);
  border: 1px solid var(--swft-primary);
  border-radius: var(--swft-radius-card);
}

/* 9. Dark scheme — skeleton only, nothing ships ------------------------------
:root[data-theme="dark"] {
  --swft-primary: var(--sf-bright-blue);
  --swft-primary-hover: #5DA8FF;
  --swft-primary-dark: var(--sf-light-blue);
  --swft-accent: var(--sf-teal);
  --swft-ink: var(--sf-contrast);
  --swft-text-muted: #B7C0CB;
  --swft-link: var(--swft-primary);
  --swft-surface: var(--sf-base);
  --swft-surface-alt: #172232;
  --swft-surface-strong: #1F2E44;
  --swft-card: #141D2B;
  --swft-border: rgba(250, 250, 250, .15);
  --swft-border-strong: #8A9099;
  --swft-success: var(--sf-green);
  --swft-danger: #FF5F6D;
  --swft-warning: var(--sf-yellow);
  --swft-on-warning: var(--sf-base);
  --swft-success-bg: #0F2A22;
  --swft-danger-bg: #331519;
  --swft-warning-bg: #2A2D10;
  --swft-shadow: 0 0 16px 0 rgba(0, 0, 0, .5);
}
------------------------------------------------------------------------------ */