/*
 * RealEngineers.ai base styles.
 *
 * Reset, typography, and the small set of foundational component classes
 * (cards, pills, buttons, status messages) described in docs/style-guide.md
 * Sections 5 (Layout and Components) and 9 (Accessibility and Consistency
 * Rules). Depends on tokens.css being loaded first -- nothing in here
 * hardcodes a color, font, or spacing value that has a token.
 */

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

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

body {
  margin: 0;
  font-family: var(--re-font-sans);
  font-size: 16px; /* never go below 16px for body copy (Section 4) */
  line-height: 1.5;
  color: var(--re-color-text-primary);
  background-color: var(--re-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--re-font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--re-space-3);
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 var(--re-space-4);
}

code,
pre,
kbd {
  font-family: var(--re-font-mono);
}

a {
  color: var(--re-color-primary);
}

/* Keyboard accessibility (Section 8): focus must stay visible on every
   surface, light or dark, on every focusable element -- including form
   controls, not just links/buttons. Never rely on the browser default
   alone. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-container {
  max-width: var(--re-breakpoint-desktop);
  margin: 0 auto;
  padding: var(--re-space-6) var(--re-space-5);
}

@media (max-width: 768px) {
  .re-container {
    padding: var(--re-space-4);
  }
}

.re-section {
  margin-top: var(--re-space-8);
}

.re-section > h2 {
  margin-bottom: var(--re-space-4);
}

/* Application shell (specs/007-app-shell): the title bar, left nav, main
   content, and reserved chat area every authenticated page shares via
   core/templates/core/base_authenticated.html. Breakpoints below are
   literal (CSS media features can't reference custom properties) but match
   --re-breakpoint-desktop (1200px) / --re-breakpoint-tablet (768px), the
   same values .re-container's own responsive rule already hardcodes. */
.re-shell {
  display: grid;
  grid-template-columns: 260px 1fr 380px;
  /* Without this, both rows default to "auto" and min-height's leftover
     space gets distributed across them (grid's default align-content
     stretches auto-sized rows to fill the container) -- inflating the
     titlebar row along with the body row. Pinning the titlebar to its own
     content height and letting only the body row absorb leftover space
     fixes that. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "titlebar titlebar titlebar"
    "nav main chat";
  /* Fixed (not min-) height pins the shell itself to the viewport, so the
     titlebar/nav/chat "chrome" never scrolls away -- only .re-shell__main's
     own overflow scrolls, the way a desktop app's content pane does. */
  height: 100vh;
}

/* .re-titlebar is the reusable title bar itself (core/templates/core/
   _titlebar.html) -- used both inside the authenticated shell and, on its
   own with no nav/chat-space, at the top of the signed-out home page.
   .re-shell__titlebar only adds grid positioning on top of it. */
.re-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--re-space-4);
  padding: var(--re-space-3) var(--re-space-5);
  background-color: var(--re-surface-nav);
  border-bottom: 1px solid var(--re-border-nav-divider);
}

.re-shell__titlebar {
  grid-area: titlebar;
}

.re-titlebar__brand {
  color: #ffffff;
  font-family: var(--re-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}

.re-titlebar__end {
  display: flex;
  align-items: center;
  gap: var(--re-space-4);
}

.re-titlebar__welcome {
  color: var(--re-color-nav-text);
  font-size: 0.875rem;
}

.re-shell__nav {
  grid-area: nav;
  background-color: var(--re-surface-nav);
  padding: var(--re-space-5) var(--re-space-3);
  overflow-y: auto;
}

.re-shell__nav a {
  display: block;
  padding: var(--re-space-3);
  margin-bottom: var(--re-space-1);
  border-radius: var(--re-radius-chip);
  color: var(--re-color-nav-text);
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
}

.re-shell__nav a:hover,
.re-shell__nav a:focus-visible {
  background-color: var(--re-surface-nav-item-active);
  color: #ffffff;
}

/* specs/010-companies-jobs-directory: a nav section label (e.g.
   "Community", grouping Companies/Jobs below the plain, unlabeled personal
   links above it) -- a top divider line plus real vertical space is what
   actually reads as "a section starts here" against a list of link-shaped
   rows; .re-company-eyebrow's uppercase-label-only treatment (right for a
   card-internal sub-label) wasn't enough contrast on its own in this nav. */
.re-nav-section {
  margin: var(--re-space-5) var(--re-space-3) var(--re-space-2);
  padding-top: var(--re-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--re-color-nav-text);
}

.re-shell__main {
  grid-area: main;
  min-width: 0;
  /* Grid items default to min-height: auto, which lets content overflow
     the row instead of triggering this element's own scrollbar -- without
     this the whole page would grow past 100vh and the browser would scroll
     everything (chrome included) again, defeating .re-shell's fixed height
     above. */
  min-height: 0;
  overflow-y: auto;
}

.re-shell__chat-space {
  grid-area: chat;
  background-color: var(--re-surface-chat);
  border-left: 1px solid var(--re-border-card);
  padding: var(--re-space-5);
  overflow-y: auto;
}

.re-shell__chat-placeholder {
  color: var(--re-color-disabled);
  font-size: 0.875rem;
}

@media (max-width: 1200px) {
  .re-shell {
    grid-template-columns: 260px 1fr;
    grid-template-areas:
      "titlebar titlebar"
      "nav main";
  }

  .re-shell__chat-space {
    display: none;
  }
}

@media (max-width: 768px) {
  .re-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titlebar"
      "nav"
      "main";
  }

  .re-shell__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--re-space-2);
    padding: var(--re-space-3);
  }

  .re-shell__nav a {
    margin-bottom: 0;
  }

  .re-nav-section {
    flex-basis: 100%;
    margin: var(--re-space-2) 0 0;
  }

  .re-titlebar__welcome {
    display: none;
  }
}

/* Report / profile content panel (Section 5: "Report / profile content
   panel" -- 760-960px reading width, generous padding). Distinct from
   .re-card (a compact 380px evidence card) -- editor and public-profile
   sections are reading/editing surfaces, not evidence cards. */
.re-panel {
  max-width: 860px;
  background-color: var(--re-surface-card);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  box-shadow: var(--re-shadow-card);
  padding: var(--re-space-6);
}

.re-panel + .re-panel {
  margin-top: var(--re-space-5);
}

/* Forms (Section 13: persistent visible labels, 16px between fields, 8px
   label-to-control, 24px before action rows). */
.re-field {
  margin-bottom: var(--re-space-4);
}

/* Two related, short fields side by side (e.g. start/end date) -- wraps to
   stacked on narrow popovers instead of forcing a fixed two-column width. */
.re-field-row {
  display: flex;
  gap: var(--re-space-3);
  flex-wrap: wrap;
}

.re-field-row .re-field {
  flex: 1 1 160px;
}

.re-field label {
  display: block;
  margin-bottom: var(--re-space-2);
  font-family: var(--re-font-label);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Required-field marker (Section 13: "mark requirements consistently, do
   not make users infer required fields from validation errors"). Purely
   visual -- every required input already carries the native HTML
   `required` attribute, which screen readers announce on their own. */
.re-field--required label::after {
  content: " *";
  color: var(--re-color-error);
}

.re-field input[type="text"],
.re-field input[type="email"],
.re-field input[type="date"],
.re-field input[type="number"],
.re-field input[type="file"],
.re-field select,
.re-field textarea {
  width: 100%;
  max-width: 480px;
  padding: var(--re-space-2) var(--re-space-3);
  border: 1px solid var(--re-border-card);
  border-radius: 8px;
  font-family: var(--re-font-sans);
  font-size: 0.9375rem;
  color: var(--re-color-text-primary);
  background-color: var(--re-surface-card);
}

.re-field textarea {
  min-height: 96px;
  resize: vertical;
}

.re-field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
}

.re-field--checkbox label {
  margin-bottom: 0;
}

.re-field__help {
  margin-top: var(--re-space-1);
  font-size: 0.8125rem;
  color: var(--re-color-disabled);
}

.re-fieldset {
  margin: 0 0 var(--re-space-4);
  padding: var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
}

.re-fieldset legend {
  padding: 0 var(--re-space-2);
  font-weight: 600;
}

/* Native, zero-JS progressive disclosure (style-guide.md Section 13's
   "native disclosure over JavaScript modals" rule) for a collapsible item
   inside an edit popover, e.g. one evidence item -- collapsed by default so
   the popover's height doesn't scale with how many items exist. Boxed to
   match .re-fieldset's visual weight. */
.re-details {
  margin: 0 0 var(--re-space-4);
  padding: var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
}

.re-details summary {
  font-weight: 600;
  cursor: pointer;
}

.re-details[open] summary {
  margin-bottom: var(--re-space-3);
}

.re-details summary:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* specs/013-proving-ground-submissions: the same native disclosure, reused for a
   whole page section (e.g. proving_ground_challenge_editor.html's Details/Awards/
   Artifacts/etc.) instead of one nested item -- collapsed once a challenge goes
   live so Submissions (kept as a plain, never-collapsible section) is what a
   company rep sees without expanding anything. The heading goes inside <summary>
   for its own accessible name.
   .re-details's own default <summary> relies on the UA's native
   `display: list-item` marker box, which puts the triangle on its own line once
   the content is a block-level heading -- not "on the same line" as this size of
   header needs. Replaced with a real flex row + a manually drawn marker instead
   (list-style: none hides the native one; ::-webkit-details-marker covers
   Safari, which ignores list-style on <summary>). */
.re-details--section summary {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
  list-style: none;
}

.re-details--section summary::-webkit-details-marker {
  display: none;
}

.re-details--section summary::before {
  content: "\25B6";
  font-size: 0.75em;
  flex-shrink: 0;
}

.re-details--section[open] > summary::before {
  content: "\25BC";
}

.re-details--section summary h2 {
  margin: 0;
}

/* specs/013-proving-ground-submissions: Submissions (and, since specs/014-job-applicants,
   Applications) is the screen a company rep comes back to most once a challenge/posting is
   live, so it sits in its own column instead of at the bottom of a long stack of (usually
   collapsed) sections -- review needs no scrolling past everything else first. `order` (not
   DOM order) puts it on the right, in the narrower column, while Details/Awards/etc. --
   which the template emits first -- read left to right as normal. Feature-neutral name
   (renamed from .re-challenge-editor-layout in specs/014's research.md #7) since the layout
   itself has nothing challenge-specific about it -- shared by both editor screens rather
   than duplicated under a second name. */
.re-editor-review-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  gap: var(--re-space-5);
}

.re-editor-review-layout__review {
  order: 2;
}

.re-editor-review-layout__details {
  order: 1;
}

@media (max-width: 1200px) {
  .re-editor-review-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .re-editor-review-layout {
    grid-template-columns: 1fr;
  }
}

.re-form-actions {
  margin-top: var(--re-space-5);
  display: flex;
  gap: var(--re-space-3);
}

/* A status line with an inline action next to it (e.g. "End challenge" beside a
   challenge's own Status text) -- a <form> can't nest inside the <p> it sits next
   to (forms aren't phrasing content, so browsers silently split the paragraph),
   so this wraps both as flex row siblings instead. */
.re-status-row {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
}

.re-status-row p {
  margin: 0;
}

/* A single-row form (e.g. a job posting requirement's inline edit field,
   specs/009-job-postings FR-005) -- fields and its submit button share one
   line instead of the default stacked .re-field layout. */
.re-inline-form {
  display: flex;
  align-items: center;
  gap: var(--re-space-3);
}

.re-inline-form .re-field {
  flex: 1;
  margin: 0;
  /* Overrides .re-field textarea/input's general 480px cap (Section 13's default,
     right for a name/email field) -- a requirement's own text should use the full
     width its row has, not sit narrow in a wide-open row. */
  max-width: none;
}

/* max-width must be reset on the textarea/input itself too, not just its .re-field
   wrapper above -- .re-field textarea's own 480px cap (base rule) is set directly on
   the element and otherwise still wins regardless of how wide its parent is. */
.re-inline-form textarea,
.re-inline-form input[type="text"] {
  max-width: none;
}

/* Starts at one line and grows with its content up to a bounded height, then
   scrolls internally -- no JS needed (Principle I: minimal client-side JavaScript).
   field-sizing is unsupported in a handful of older browsers; resize: vertical
   (inherited from .re-field textarea) is the graceful fallback there -- a normal,
   manually-resizable textarea, not a broken one.
   Selector must out-specify .re-field textarea's own min-height: 96px (line ~319) --
   a bare .re-textarea--autosize class selector alone loses that specificity fight
   and silently keeps the ~6-line starting height this class exists to remove. */
.re-field textarea.re-textarea--autosize {
  field-sizing: content;
  min-height: 2.5rem;
  max-height: 12rem;
  overflow-y: auto;
}

/* Compact list items for existing entries (a project, a membership, an
   education entry) inside a wider .re-panel -- narrower than a full
   .re-card since several appear stacked in a reading-width column. */
.re-item {
  padding: var(--re-space-4) 0;
  border-top: 1px solid var(--re-border-card);
}

.re-item:first-child {
  border-top: none;
  padding-top: 0;
}

.re-item__header {
  display: flex;
  align-items: baseline;
  gap: var(--re-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--re-space-1);
}

.re-item__actions {
  margin-top: var(--re-space-2);
  display: flex;
  gap: var(--re-space-2);
}

.re-btn--compact {
  min-height: 32px;
  padding: 0 var(--re-space-3);
  font-size: 0.8125rem;
}

/* Popovers (native Popover API -- open/close/light-dismiss/Escape all work
   with zero JavaScript, the logical conclusion of constitution Principle
   I's "minimal JavaScript" for the add/edit-project and add/edit-evidence
   dialogs). Reset the UA default popover box to match design tokens. */
[popover] {
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  padding: var(--re-space-6);
  width: min(90vw, 560px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--re-shadow-float);
  background-color: var(--re-surface-card);
  color: var(--re-color-text-primary);
}

[popover]::backdrop {
  background-color: rgba(15, 23, 42, 0.55);
}

.re-popover__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--re-space-4);
  margin-bottom: var(--re-space-4);
}

.re-popover__header h2,
.re-popover__header h3 {
  margin: 0;
}

.re-popover__header-actions {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
}

/* A low-emphasis destructive text action (e.g. "Delete project" sitting in
   a popover header) -- red per style-guide.md's "reserve red for true
   errors, destructive actions" rule, underlined so meaning never depends on
   color alone, and a full 44px touch target despite the compact look. */
.re-link-danger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--re-space-2);
  background: none;
  border: none;
  color: var(--re-color-error);
  font-family: var(--re-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.re-link-danger:hover {
  color: #b91c1c;
}

.re-link-danger:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* Same shape as .re-link-danger (a <button> styled as a text link -- the action
   itself, e.g. "End challenge", is still a real POST, not a GET <a href>; per
   Principle I every mutation stays a form submission) but for a non-destructive
   action, so it uses the standard link color instead of error red. */
.re-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--re-space-2);
  background: none;
  border: none;
  color: var(--re-color-primary);
  font-family: var(--re-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.re-link:hover {
  color: var(--re-color-primary-dark);
}

.re-link:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* Project cards grid (Section 5's own "Evidence card" structure -- label,
   title, work type, summary, metadata, action -- is what a project card
   should look like too). */
.re-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--re-space-5);
  margin: var(--re-space-4) 0;
}

/* specs/010-companies-jobs-directory: Prev/Next controls for the Companies
   Directory and Jobs Board -- real links (each carries the full filter
   querystring, FR-005), not JS-driven, so keyboard/screen-reader operation
   is native for free (Principle XIII). */
.re-pagination {
  display: flex;
  align-items: center;
  gap: var(--re-space-3);
  margin: var(--re-space-5) 0;
}

.re-pagination__status {
  font-size: 0.875rem;
  color: var(--re-color-disabled);
}

.re-project-card__evidence {
  margin: var(--re-space-3) 0;
  padding-left: 0;
  list-style: none;
}

.re-project-card__evidence li {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
  padding: var(--re-space-1) 0;
  font-size: 0.875rem;
}

.re-project-card__evidence li a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Card header: title/meta on the left, the card's one entry point into
   editing (and, for Identity, the "Edit" action) pinned top-right --
   keeps every other action (evidence editing, delete) inside the edit
   flow instead of cluttering the card itself. */
.re-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--re-space-3);
}

.re-card__header .re-card__title {
  margin-top: 0;
}

/* Category choice (Section 5 Pills pattern, but built on real, keyboard-
   operable <input type="radio"> elements -- never a div with a click
   handler standing in for a form control). */
.re-category-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
  margin-bottom: var(--re-space-4);
}

.re-category-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-2);
  padding: var(--re-space-2) var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-pill);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  position: relative;
}

.re-category-choice:has(input:checked) {
  border-color: var(--re-color-primary);
  background-color: var(--re-surface-nav-active);
  color: var(--re-color-primary);
}

/* Visually hidden but still a real, focusable, keyboard-operable radio --
   the pill (its <label>) carries the selected/focus styling instead of the
   browser's default radio dot (Section 5's Pills pattern, applied to a
   real form control rather than faked with a div + click handler). */
.re-category-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.re-category-choice:has(input:focus-visible) {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* Category-first progressive disclosure: the rest of a project form (and
   the one matching category-detail fieldset within it) only appear once a
   category radio is checked. CSS-only (no JavaScript) -- and deliberately
   NOT a forced multi-step "wizard" gated by fake Next/Back buttons wired to
   a hidden, differently-named radio group, which would make Next/Back
   invisible to keyboard users. Choosing a real, visible category control
   revealing nearby content is a standard, fully keyboard/screen-reader
   accessible pattern (constitution Principle XIII).

   Uses :has() on the wrapping .re-project-wizard rather than the `~`
   sibling combinator, because the radios are nested inside .re-category-
   choices > label, not direct siblings of .re-project-form-body --
   :has() matches descendants at any depth, so nesting doesn't matter. */
.re-project-form-body {
  display: none;
}

.re-project-wizard:has(input[name="category"]:checked) .re-project-form-body {
  display: block;
}

.re-category-fields {
  display: none;
}

.re-project-wizard:has(input[name="category"][value="professional"]:checked)
  .re-category-fields[data-category-fields="professional"],
.re-project-wizard:has(input[name="category"][value="military"]:checked)
  .re-category-fields[data-category-fields="military"],
.re-project-wizard:has(input[name="category"][value="academic"]:checked)
  .re-category-fields[data-category-fields="academic"] {
  display: block;
}

/* Cards (Section 5). Comfortable evidence-card width is 320-380px by
   default; wider content panels (reports/profiles) get their own class
   once those pages exist. */
.re-card {
  max-width: 380px;
  background-color: var(--re-surface-card);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  box-shadow: var(--re-shadow-card);
  padding: var(--re-space-4);
}

.re-card--featured {
  background-color: var(--re-surface-card-featured);
  color: #ffffff;
  border-color: transparent;
}

/* The "Add a project" trigger sits in the grid as a card of its own,
   rather than a separate button above it, so it reads as one more slot
   in the same collection instead of a disconnected page-level action. */
.re-card--add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  width: 100%;
  background-color: transparent;
  border: 1px dashed var(--re-border-card);
  box-shadow: none;
  color: var(--re-color-disabled);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.re-card--add:hover,
.re-card--add:focus-visible {
  border-color: var(--re-color-primary);
  color: var(--re-color-primary);
}

.re-card--selected {
  background-color: var(--re-surface-card-selected);
  border-color: var(--re-color-primary);
}

/* "wider content panels (reports/profiles) get their own class once those
   pages exist" -- this comment block's own note, now that the public
   Company Page needs a card that fills a layout column instead of sitting
   in an evidence-card grid at the default 320-380px width. */
.re-card--wide {
  max-width: none;
  width: 100%;
}

.re-card--clickable:hover {
  background-color: var(--re-surface-card-hover);
  cursor: pointer;
}

.re-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--re-space-2) 0 var(--re-space-1);
}

.re-card__summary {
  font-size: 0.9375rem;
  margin-bottom: var(--re-space-2);
}

.re-card__meta {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--re-color-disabled);
}

/* A card summary long enough to need truncating (word-truncated server-side,
   same as .re-details--section) gets a "Read more" native disclosure instead
   of letting the card grow past its neighbors in the grid -- the full text
   sits inside <details>, and :has() (already used for the project-category
   wizard above) hides the truncated preview once it's open. */
.re-card__more summary {
  cursor: pointer;
  color: var(--re-color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
}

.re-card__more summary::-webkit-details-marker {
  display: none;
}

.re-card__more summary:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-card__more-label--open {
  display: none;
}

.re-card__more[open] .re-card__more-label--closed {
  display: none;
}

.re-card__more[open] .re-card__more-label--open {
  display: inline;
}

.re-card__summary-wrap:has(.re-card__more[open]) .re-card__summary--preview {
  display: none;
}

/* A decorative icon (style-guide.md Section 6: "pair meaning with labels" --
   the icon here is decorative since the visible text already conveys the
   meaning, e.g. an email address next to an envelope) paired inline with
   its text, at a fixed 16px per the style guide's icon-size scale. */
.re-meta-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-1);
}

.re-icon {
  flex-shrink: 0;
}

/* Company logo thumbnail: the read-only identity card shows the actual
   uploaded image (never just "a logo is set" text); the same box holds a
   generic building icon before one is uploaded so the layout doesn't shift. */
.re-company-logo {
  width: 112px;
  height: 112px;
  border-radius: var(--re-radius-card);
  object-fit: cover;
  flex-shrink: 0;
}

.re-company-logo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--re-surface-page);
  border: 1px solid var(--re-border-card);
  color: var(--re-color-disabled);
}

/* Larger size for the public Company Page's hero, where the logo is the
   first thing establishing identity rather than a compact list/card icon. */
.re-company-logo--lg {
  width: 128px;
  height: 128px;
}

/* Public Company Page hero (Section 5: "dark cards only for hero, featured,
   or high-authority moments" -- .re-card--featured already is Kernel Navy
   with white text; this only re-points .re-card__meta's default Slate,
   which reads too low-contrast on Kernel Navy, to the token the style guide
   itself names for this exact case: "Navigation text on dark surfaces,
   secondary labels" (Section 3), already used the same way by
   .re-titlebar__welcome. */
.re-company-hero .re-card__meta {
  color: var(--re-color-nav-text);
}

.re-company-hero__links,
.re-company-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
  margin-top: var(--re-space-4);
}

/* Two-column body layout for a content page with a narrower supporting
   sidebar (Contact, Culture, Perks) beside the primary reading column --
   the same "one primary column + accessible secondary panel" shape Section
   16 describes for wide desktop, collapsing to one column below tablet. */
.re-company-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--re-space-6);
  margin-top: var(--re-space-6);
  align-items: start;
}

.re-company-main,
.re-company-aside {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-5);
}

@media (max-width: 768px) {
  .re-company-layout {
    grid-template-columns: 1fr;
  }
}

/* A small uppercase sub-label inside a card (e.g. "Office locations" ahead
   of a nested list within the Contact card) -- the same 11-12px/700
   uppercase treatment Section 5's Left Navigation row already specifies for
   "Section label", applied here to a card-internal grouping instead. */
.re-company-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--re-color-disabled);
  margin: var(--re-space-4) 0 var(--re-space-2);
}

.re-company-eyebrow:first-child {
  margin-top: 0;
}

/* A checklist (Culture, Perks & Benefits) -- a checkmark icon paired with
   text per item, not a bare bullet list, matching Section 6's "pair
   meaning with labels" rule for the same success/checkmark icon used
   elsewhere (e.g. the published-profile link's copy-confirmation icon). */
.re-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
}

.re-checklist .re-icon {
  color: var(--re-color-success);
}

/* A checklist whose items carry their own edit/remove controls (e.g. a job
   posting's requirement or assignment list, specs/009-job-postings) --
   each item lays out as a row with its content on the left and its
   form(s) on the right, unlike the plain icon+text rows above. */
.re-checklist--editable li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--re-space-3);
}

/* A requirement's own edit form (text + Save) grows to use the row's full width;
   its sibling delete form stays at its natural width, docked to the right by the
   justify-content: space-between above. Doesn't affect the assignments list's
   plain-text-then-form rows below (no form as the first child there). */
.re-checklist--editable li > form:first-of-type {
  flex: 1;
  min-width: 0;
}

/* A checkbox list (e.g. sustainability badges) rendered as real, individually
   focusable <input type="checkbox"> controls with an icon-and-label per
   choice, inside a .re-fieldset -- never a <select multiple>, which hides
   every option but the first few and offers no icon. */
.re-checkbox-choices {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
}

.re-checkbox-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-2);
  font-size: 0.875rem;
}

/* Icon-only button (e.g. "copy the published profile link") -- accessible
   name comes from aria-label per style-guide.md's icon-only-control rule,
   with a full 44px touch target despite the compact visual size. Clicking
   swaps the visible copy icon for a checkmark; the aria-label swaps to
   "Copied!" alongside it so the confirmation isn't color- or icon-only. */
.re-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--re-color-primary);
  cursor: pointer;
}

.re-icon-btn:hover {
  color: #1d4ed8;
}

.re-icon-btn:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-icon-btn__check {
  display: none;
  color: var(--re-color-success);
}

.re-icon-btn--copied .re-icon-btn__copy {
  display: none;
}

.re-icon-btn--copied .re-icon-btn__check {
  display: inline-flex;
}

/* Pills (Section 5, Section 9). Pill color is a reusable token, not a
   fixed meaning -- markup must always pair a pill with a visible text
   label, never color alone. */
.re-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-1);
  padding: var(--re-space-1) var(--re-space-3);
  border-radius: var(--re-radius-pill);
  font-family: var(--re-font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
}

.re-pill--color-1 {
  background-color: var(--re-pill-color-1);
}
.re-pill--color-2 {
  background-color: var(--re-pill-color-2);
}
.re-pill--color-3 {
  background-color: var(--re-pill-color-3);
}
.re-pill--color-4 {
  background-color: var(--re-pill-color-4);
}
.re-pill--color-5 {
  background-color: var(--re-pill-color-5);
}
.re-pill--color-6 {
  background-color: var(--re-pill-color-6);
}
.re-pill--color-7 {
  background-color: var(--re-pill-color-7);
}
.re-pill--color-8 {
  background-color: var(--re-pill-color-8);
}
.re-pill--color-9 {
  background-color: var(--re-pill-color-9);
}
.re-pill--color-10 {
  background-color: var(--re-pill-color-10);
  color: var(--re-color-text-primary);
}

/* Buttons (Section 5). 44px minimum touch target, verb-first labels. */
.re-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--re-space-4);
  border: none;
  border-radius: 8px;
  font-family: var(--re-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--re-motion-fast) var(--re-ease-standard);
}

.re-btn--primary {
  background-color: var(--re-color-primary);
  color: #ffffff;
}

.re-btn--primary:hover {
  background-color: #1d4ed8;
}

.re-btn--secondary {
  background-color: transparent;
  color: var(--re-color-primary);
  border: 1px solid var(--re-border-card);
}

/* Principle XIII's processing-indicator requirement -- added by
   static/js/processing-indicator.js the instant a [data-processing-label]
   submit control is clicked. The label swap (in the JS, not here) already
   satisfies "text status accompanies every spinner"; the ring below is the
   optional visual reinforcement, motion-safe via --re-motion-spin. */
.re-btn--processing {
  cursor: progress;
  opacity: 0.8;
}

.re-btn--processing::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  margin-right: var(--re-space-2);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: re-spin var(--re-motion-spin) linear infinite;
}

@keyframes re-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Semantic status messages (Section 9, 14, 15). Color is always paired
   with a text label -- never the only carrier of meaning. */
.re-status-message {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
  padding: var(--re-space-3) var(--re-space-4);
  border-radius: 8px;
  border: 1px solid var(--re-border-card);
  font-size: 0.9375rem;
}

.re-status-message--success {
  border-color: var(--re-color-success);
}
.re-status-message--warning {
  border-color: var(--re-color-warning);
}
.re-status-message--error {
  border-color: var(--re-color-error);
}
.re-status-message--info {
  border-color: var(--re-color-info);
}

.re-status-message__label {
  font-weight: 700;
}

/* Visually hidden but still announced by screen readers -- e.g. a <table>'s <caption>
   when the visible "View as table" <summary> already conveys the same context sighted
   users need (Principle XIII: hidden from view, never hidden from assistive tech). */
.re-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* specs/015-system-dashboard: six metric cards, each a current total plus a daily trend
   chart. Three per row on desktop, two on tablet, one on mobile -- explicit columns rather
   than auto-fill's minmax, since a fixed count is what this layout actually wants
   (breakpoints match --re-breakpoint-desktop/--re-breakpoint-tablet, hardcoded because
   CSS media features can't reference custom properties, same as .re-shell's own rule above). */
.re-dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-4);
  margin-bottom: var(--re-space-4);
}

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

@media (max-width: 1200px) {
  .re-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .re-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* .re-card's own default caps width at 380px for a standalone evidence-style card --
   here each card instead needs to fill its own grid cell (.re-card--wide's own rationale,
   applied inline rather than via that class since every card in this grid needs it). */
.re-metric-card {
  max-width: none;
  width: 100%;
}

.re-metric-card__total {
  font-size: 2rem;
  font-weight: 700;
  margin: var(--re-space-2) 0;
}

.re-metric-card canvas {
  width: 100%;
  max-height: 160px;
  margin-bottom: var(--re-space-3);
}

/* The chart itself is the click target for the "expand" popover -- a real <button> (native
   popovertarget invokers must be buttons/inputs) stripped of its default chrome so it reads
   as "click the chart," not as a button sitting next to one. */
.re-metric-card__chart-button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--re-radius-card);
}

.re-metric-card__chart-button:hover,
.re-metric-card__chart-button:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-metric-card__expanded-popover {
  width: min(90vw, 820px);
}

.re-metric-card__expanded-popover canvas {
  width: 100%;
  max-height: 420px;
}

/* specs/016-admin-user-company-lists: a plain data table for admin lists (many rows, several
   columns, scanned rather than browsed card-by-card) -- the first table in this codebase
   meant to BE the primary UI rather than an accessible fallback under a chart, so it needs
   its own real styling rather than relying on the browser default the chart tables (above)
   get away with sitting inside a collapsed <details>. */
.re-table-wrap {
  overflow-x: auto;
  margin: var(--re-space-4) 0;
}

.re-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.re-table th,
.re-table td {
  padding: var(--re-space-2) var(--re-space-3);
  text-align: left;
  border-bottom: 1px solid var(--re-border-card);
  white-space: nowrap;
}

.re-table th {
  font-weight: 600;
  color: var(--re-color-disabled);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.re-table tbody tr:hover {
  background-color: var(--re-surface-card-hover);
}

/* Print (Section 5 "Print-Aware Layout" / "Profile Layout Rules" print
   column): reports and profiles must become clean print/PDF artifacts
   without extra cleanup. Hide interactive-only chrome, drop decorative
   elevation, keep items from splitting mid-block, and print URLs as
   visible text since paper has no hover state. */
@media print {
  body {
    background-color: #fff;
  }

  form,
  button,
  .re-btn,
  [popover],
  .re-titlebar,
  .re-shell__nav,
  .re-shell__chat-space {
    display: none;
  }

  .re-shell {
    display: block;
  }

  .re-panel,
  .re-card {
    box-shadow: none;
    border: 1px solid #000;
  }

  .re-item,
  .re-card {
    break-inside: avoid;
  }

  main a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }
}