/* Team Expansion Applications — brand styling, no framework.

   Colour is organised in three layers:
     1. Palette   — the org colour sheet, verbatim. Never edit these values.
     2. Derived   — darkened variants of palette colours, needed where the
                    palette value itself fails WCAG AA (4.5:1) as text on
                    white. Each records its measured contrast ratio.
     3. Semantic  — what the UI actually references. Restyle by repointing
                    these, not by reaching into layer 1 or 2.

   Palette colours that are NOT legible as body text on white — do not use
   them for text: --te-blue (2.2:1), --te-teal (2.8:1), --te-gold (1.9:1),
   --te-sky (1.6:1). --te-slate (3.2:1) is borders/large text only. */
:root {
  /* ---- 1. Palette: Palette 1 (cool; applicant-facing) ---- */
  --te-slate:        #888d8a;
  --te-charcoal:     #414041;
  --te-sky:          #afc9d9;
  --te-blue:         #83b0da;
  --te-navy:         #1c252e;

  /* ---- 1. Palette: Universal ---- */
  --te-white:        #ffffff;
  --te-black:        #000000;
  --te-gold:         #edb73e;
  --te-crimson:      #8c191b;
  --te-bone:         #eae5e1;

  /* ---- 1. Palette: Palette 2 (warm; internal + advisory surfaces) ---- */
  --te-cream:        #ebe2d3;
  --te-taupe:        #c0b9ad;
  --te-brown:        #6e4d37;
  --te-espresso:     #302218;
  --te-teal:         #4ca3a7;

  /* ---- 2. Derived: same hue, darkened to clear AA on white ---- */
  --te-blue-deep:    #2b6696;  /* from --te-blue,  6.1:1 — links, primary actions */
  --te-slate-deep:   #5f6360;  /* from --te-slate, 6.1:1 — secondary / meta text */
  --te-teal-deep:    #2e6a6b;  /* from --te-teal,  6.1:1 — success, completed */

  /* ---- 2. Derived: pale surface tints ---- */
  --te-teal-tint:    #eaf3f3;  /* success banner fill */
  --te-sunken:       #faf8f7;  /* inset/scrolling regions */

  /* ---- 3. Semantic: text ---- */
  --te-text:         var(--te-charcoal);
  --te-text-muted:   var(--te-slate-deep);
  --te-text-invert:  var(--te-white);

  /* ---- 3. Semantic: surfaces ---- */
  --te-surface:        var(--te-white);
  --te-surface-sunken: var(--te-sunken);
  /* Light, because the org logo is drawn dark-on-transparent: black wordmark,
     grey map, crimson swoosh. On the old navy header the wordmark sat at
     1.35:1 and was invisible. teamexpansion.org serves it on white too.
     Admin stays cream so the internal portal is still unmistakable. */
  --te-header:         var(--te-white);
  --te-header-admin:   var(--te-cream);
  --te-header-edge:    var(--te-border-mid);

  /* ---- 3. Semantic: lines. -strong meets the 3:1 that WCAG 1.4.11
           requires of form-control boundaries; the others are decorative. ---- */
  --te-border:        var(--te-bone);
  --te-border-mid:    var(--te-taupe);
  --te-border-strong: var(--te-slate);

  /* ---- 3. Semantic: interaction ---- */
  /* Links are text on white, where the palette blues are unusable (--te-blue is
     2.2:1), so this is the one place a derived value is still required. */
  --te-link:          var(--te-blue-deep);
  --te-link-hover:    var(--te-navy);

  /* Filled buttons are a different contrast problem: a button's text is measured
     against the button's own fill, not against the page. That lets the actual
     palette blue do the job here at 6.8:1 behind navy text — the same colour that
     is unreadable as body text. Hover inverts to navy, which doubles as the press
     cue since the fill is light. */
  --te-action:            var(--te-blue);
  --te-action-text:       var(--te-navy);
  --te-action-hover:      var(--te-navy);
  --te-action-hover-text: var(--te-white);
  --te-action-off:        var(--te-bone);   /* disabled fill */
  --te-focus:         var(--te-navy);   /* 15.9:1 on white, 12.1:1 on cream */

  /* ---- 3. Semantic: status ---- */
  --te-danger:        var(--te-crimson);
  --te-success:       var(--te-teal-deep);
  --te-success-fill:  var(--te-teal-tint);
  --te-caution:       var(--te-brown);
  --te-caution-fill:  var(--te-cream);
  --te-caution-edge:  var(--te-gold);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--te-surface);
  color: var(--te-text);
  line-height: 1.5;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

.site-header {
  background: var(--te-header);
  /* A light header against a light page needs an explicit edge. */
  border-bottom: 1px solid var(--te-header-edge);
  padding: 0.75rem 0;
}

/* Logo + product qualifier as one home link. The logo carries the org name, so
   the text alongside it is only the product ("Applications"); together with the
   image's alt they read as the accessible name the text brand used to give. */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--te-text);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.site-header .brand .logo {
  height: 40px;
  width: auto;
  display: block;
}

.site-header .brand span {
  font-weight: 300;
  color: var(--te-text-muted);
}

/* The wordmark is black artwork, so it needs room to breathe rather than
   shrinking into the nav on narrow screens. */
@media (max-width: 560px) {
  .header-row { flex-wrap: wrap; gap: 0.5rem; }
  .site-header .brand { font-size: 1.0625rem; }
  .site-header .brand .logo { height: 32px; }
}

main {
  padding: 2rem 0;
  flex: 1;
}

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--te-border);
  padding: 1rem 0;
  color: var(--te-text-muted);
  font-size: 0.875rem;
}

a { color: var(--te-link); }
a:hover { color: var(--te-link-hover); }

/* Filled buttons, styled on the element rather than per container.
   "Publish this plan" was already shipping with browser-default chrome because it
   sits in an .inline-form, which styles no buttons — and admin pages keep being
   added. Making the element default-correct means a new bare <button> cannot ship
   off-brand by forgetting the right wrapper.

   Kept as a bare element selector on purpose. An earlier attempt excluded the
   link-styled variants with :not(.link-button):not(...) etc, which raised this to
   four classes of specificity and silently outranked button:disabled — disabled
   buttons rendered fully enabled. A single-element selector lets every variant
   below win on its own class, and lets :disabled win on source order. Each variant
   therefore owns its :hover too. */
button,
input[type="submit"] {
  padding: 0.625rem 1rem;
  background: var(--te-action);
  color: var(--te-action-text);
  border: 1px solid var(--te-action);
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
  background: var(--te-action-hover);
  border-color: var(--te-action-hover);
  color: var(--te-action-hover-text);
}

/* After :hover deliberately — equal specificity, so source order decides.
   Custom-styled controls get no native dimming, and the authoring UI disables
   "Publish this plan" until the plan validates. */
button:disabled,
button:disabled:hover {
  background: var(--te-action-off);
  border-color: var(--te-border-mid);
  color: var(--te-text-muted);
  cursor: not-allowed;
}

/* Outline variant: same navy as the filled button's hover, so a pair of them reads
   as one control group rather than a button next to a link. Standalone rather than
   scoped to .section-buttons, so it survives being used anywhere. */
.secondary-button {
  background: var(--te-surface);
  color: var(--te-action-text);
  border: 1px solid var(--te-action-text);
}
.secondary-button:hover {
  background: var(--te-action-hover);
  border-color: var(--te-action-hover);
  color: var(--te-action-hover-text);
}

/* Interactive controls below are restyled away from their native look, so
   pin an explicit focus ring rather than trusting the UA default to stay
   visible against brand surfaces. */
/* One ring everywhere now that the headers are light; the gold invert variant
   existed only for the dark navy/espresso headers. */
:focus-visible {
  outline: 2px solid var(--te-focus);
  outline-offset: 2px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav a { color: var(--te-text); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; color: var(--te-link); }

.inline-form { display: inline; }

.link-button {
  background: none;
  border: none;
  color: var(--te-text);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.link-button:hover { text-decoration: underline; color: var(--te-link); }

/* Forms */
.stacked-form {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 420px;
}

.stacked-form label { font-weight: 600; margin-top: 0.75rem; }

.stacked-form input,
.stacked-form select {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--te-border-strong);
  border-radius: 4px;
  font: inherit;
}

/* Spacing only — fill, hover and disabled all come from the element rule above. */
.stacked-form button[type="submit"] { margin-top: 1.25rem; }

.code-input {
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  max-width: 12rem;
  text-align: center;
}

.field-error, .validation-summary { color: var(--te-danger); font-size: 0.875rem; }

/* Error.cshtml carries Bootstrap's .text-danger, but no framework is loaded
   here — without this the error headings render as plain body text. */
.text-danger { color: var(--te-danger); }

/* Honeypot: visually removed but still submittable by naive bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  height: 1px;
  overflow: hidden;
}

.stacked-form.wide { max-width: 640px; }

.stacked-form textarea {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--te-border-strong);
  border-radius: 4px;
  font: inherit;
}

.stacked-form h2 { margin: 1.5rem 0 0; font-size: 1.125rem; }

.check-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.75rem;
}
.check-row label { margin-top: 0; font-weight: 400; }
.check-row input { width: auto; }

.section-buttons { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
/* Spacing only; the outline colours live on .secondary-button itself. */
.section-buttons .secondary-button { margin-top: 1.25rem; }

.section-list { padding-left: 1.25rem; max-width: 640px; }
.section-list li { margin-bottom: 1rem; }
.section-list li a { font-weight: 600; }
.section-list .section-status {
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  color: var(--te-text-muted);
  border: 1px solid var(--te-border-mid);
  border-radius: 10px;
  padding: 0.0625rem 0.5rem;
}
.section-list li.done .section-status { color: var(--te-success); border-color: var(--te-success); }
.section-list li.started .section-status { color: var(--te-caution); border-color: var(--te-caution); }
.section-list .section-desc { margin: 0.25rem 0 0; color: var(--te-text-muted); font-size: 0.875rem; }

.question { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.question > label { font-weight: 600; }
.question.has-error > label { color: var(--te-danger); }

.submitted-banner {
  background: var(--te-success-fill);
  border: 1px solid var(--te-success);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: var(--te-success);
  max-width: 640px;
}

.reveal-link {
  background: none;
  border: none;
  color: var(--te-link);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

/* Deliberately loud: the values inside are visible for this one response only.
   The gold edge carries the alarm; brown-on-cream carries the text at 5.9:1. */
.revealed-block {
  background: var(--te-caution-fill);
  border: 1px solid var(--te-caution);
  border-left: 4px solid var(--te-caution-edge);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  color: var(--te-caution);
}

.revealed-block h3 { margin-top: 0; font-size: 0.95rem; }

.caution-banner {
  background: var(--te-caution-fill);
  border: 1px solid var(--te-caution);
  border-left: 4px solid var(--te-caution-edge);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: var(--te-caution);
  max-width: 640px;
}

.review-section { max-width: 720px; margin-bottom: 1.5rem; }
.review-section h2 { font-size: 1.125rem; border-bottom: 1px solid var(--te-border); padding-bottom: 0.375rem; }
.review-section .edit-link { font-size: 0.875rem; font-weight: 400; margin-left: 0.75rem; }
.review-fields { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 0.375rem 1rem; }
.review-fields dt { color: var(--te-text-muted); }
.review-fields dd { margin: 0; white-space: pre-wrap; }

.review-cta { font-weight: 600; font-size: 1.125rem; }

.slot-list { max-width: 640px; }

.slot {
  border: 1px solid var(--te-border-mid);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.slot.has-error { border-color: var(--te-danger); }
.slot h2 { margin: 0; font-size: 1.0625rem; }
.slot .section-desc { margin: 0.25rem 0 0.75rem; }

.uploaded-file { margin: 0 0 0.75rem; }
.uploaded-file .section-desc { display: block; margin: 0.125rem 0 0; }

.upload-form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
/* Size only; colour comes from the element rule. */
.upload-form button { padding: 0.375rem 0.875rem; }

/* Link-styled, so it must also reset :hover — the element rule's hover would
   otherwise turn it into a navy button. */
.danger-link {
  background: none;
  border: none;
  color: var(--te-danger);
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin-top: 0.5rem;
  text-decoration: underline;
}

/* Hover reset for every link-styled button. Their base rules declare no
   background, but `button:hover` is (0,1,1) and outranks a lone class at (0,1,0),
   so without this a "Sign out" or "Delete" link fills navy on hover. Two classes
   here take it back. Each keeps its own colour. */
.link-button:hover,
.reveal-link:hover,
.danger-link:hover {
  background: none;
  padding: 0;
}
.reveal-link:hover { color: var(--te-link-hover); }
.danger-link:hover { color: var(--te-danger); }

/* Admin portal — Palette 2's cream keeps the internal portal distinct from the
   applicant-facing site while staying light enough for the logo to read. */
.admin-header { background: var(--te-header-admin); border-bottom-color: var(--te-brown); }
.admin-who { color: var(--te-text-muted); font-size: 0.875rem; }

.status-summary { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9375rem; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
}
.filter-bar input[type="search"], .filter-bar select {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--te-border-strong);
  border-radius: 4px;
  font: inherit;
}
.filter-bar button { padding: 0.375rem 0.875rem; }
.inline-check { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; }

.detail-meta { color: var(--te-text-muted); }

.admin-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2rem; }
@media (max-width: 800px) { .admin-grid { grid-template-columns: 1fr; } }

.admin-side .side-panel {
  border: 1px solid var(--te-border-mid);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.side-panel h2 { margin-top: 0; font-size: 1.0625rem; }
.side-panel .stacked-form { max-width: none; }

.note { border-top: 1px solid var(--te-border); padding-top: 0.5rem; margin-top: 0.75rem; }
.note-meta { color: var(--te-text-muted); font-size: 0.8125rem; margin: 0; display: block; }
.note-body { margin: 0.25rem 0 0; white-space: pre-wrap; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-top: 1px solid var(--te-border); padding: 0.5rem 0; }
.timeline li:first-child { border-top: none; }

.agreement-text {
  white-space: pre-wrap;
  border: 1px solid var(--te-border-mid);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  max-width: 720px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--te-surface-sunken);
}

.app-table.wide { max-width: none; }
.app-table { border-collapse: collapse; width: 100%; max-width: 640px; }
.app-table th, .app-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--te-border);
}
.app-table th { color: var(--te-text-muted); font-weight: 600; }

/* ---- Admin help page ------------------------------------------------------
   A contents column beside the article, collapsing to a single column on narrow
   screens. Sections are shown and hidden by help.js via the hidden attribute. */
.help-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.help-contents {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--te-border);
  border-radius: 4px;
  background: var(--te-surface-sunken);
}

.help-contents label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.help-contents input[type="search"] { width: 100%; }

#help-toc {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

#help-toc li { margin: 0.15rem 0; }
#help-toc li[hidden] { display: none; }
.help-toc-level-3 { padding-left: 1rem; font-size: 0.9em; }

.help-body { max-width: 46rem; }
.help-body h2 { margin-top: 2rem; }
.help-body h3 { margin-top: 1.25rem; }
.help-body [hidden] { display: none; }

.help-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}

.help-body th,
.help-body td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--te-border);
}

.help-body th { color: var(--te-text-muted); font-weight: 600; }

.help-body blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--te-border-mid);
  color: var(--te-text-muted);
}

.help-body code {
  background: var(--te-surface-sunken);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

@media (max-width: 800px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-contents { position: static; max-height: none; }
}