/* Troy NJROTC Color Guard — "Dawson"-inspired theme.
   Warm cream canvas, black primary, gray foreground, light type, a sideways
   (left sidebar) navigation, thin rules, and small radii. Manrope throughout.
   Built on Pico; overrides match Pico's `:root:not([data-theme=dark])`
   specificity so they win. */

:root:not([data-theme="dark"]) {
  /* Palette pulled from the Dawson theme.json */
  --cg-bg: #f6f5f0;          /* background  */
  --cg-primary: #000000;     /* primary / headings / accents */
  --cg-foreground: #7b7b7b;  /* muted gray text + nav */
  --cg-tertiary: #eae8e2;    /* soft fills */
  --cg-border: #dcd9d0;      /* hairline rules */

  /* Semantic colors — flash messages, form errors, the password checklist. */
  --cg-success: #2e7d32;     /* green */
  --cg-warning: #c08a2b;     /* amber */
  --cg-error: #c0392b;       /* red   */
  /* Calendar status accents — learning / teaching / leading (also the legend
     dots; teaching & leading mirror the Discord tier colors in discord.py). */
  --cg-learning: #2e7d32;    /* green */
  --cg-teaching: #1f3a93;    /* navy  */
  --cg-leading: #c9a227;     /* gold  */

  /* Map onto Pico */
  --pico-background-color: var(--cg-bg);
  --pico-color: #1f1f1f;             /* body text: near-black, readable */
  --pico-muted-color: var(--cg-foreground);
  --pico-muted-border-color: var(--cg-border);
  --pico-card-background-color: #fbfaf6;
  --pico-card-border-color: var(--cg-border);
  --pico-form-element-background-color: #ffffff;
  --pico-form-element-border-color: var(--cg-border);

  --pico-primary: #000000;
  --pico-primary-background: #000000;
  --pico-primary-border: #000000;
  --pico-primary-hover: #2a2a2a;
  --pico-primary-hover-background: #2a2a2a;
  --pico-primary-hover-border: #2a2a2a;
  --pico-primary-focus: rgba(0, 0, 0, 0.25);
  --pico-primary-inverse: #f6f5f0;   /* cream text on black buttons */
  --pico-primary-underline: rgba(0, 0, 0, 0.35);

  --pico-secondary: #6a6a6a;
  --pico-secondary-background: #3a3a3a;
  --pico-secondary-border: #3a3a3a;
  --pico-secondary-hover: #000000;
  --pico-secondary-inverse: #f6f5f0;

  /* Manrope + light, airy type */
  --pico-font-family-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-line-height: 1.6;
  --pico-font-weight: 400;
  --pico-border-radius: 0.25rem;
  /* Shorter buttons / inputs / selects across the site (less vertical bulk). */
  --pico-form-element-spacing-vertical: 0.5rem;
  /* Pico scales the root font up to 125% on wide screens; pin it so content
     reads at a normal, tighter size (the sidebar is bumped back up below). */
  --pico-font-size: 100%;
}

/* --- Base type --- */
body {
  margin: 0;
  background: var(--cg-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--cg-primary);
  font-weight: 350;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(1.85rem, 1.5rem + 1.5vw, 2.5rem); margin-bottom: 0.6em; }
h2 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); margin-top: 2rem; }
h3 { font-size: 1.2rem; }

/* --- Layout: fixed left sidebar + content --- */
.layout {
  display: flex;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 264px;
  width: 264px;
  box-sizing: border-box;
  padding: 2.75rem 2rem;
  border-right: 1px solid var(--cg-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: block;
  color: var(--cg-primary);
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.brand span { font-weight: 500; }
.sidebar-tagline {
  display: block;
  margin-top: 0.4rem;
  color: var(--cg-foreground);
  font-size: 1rem;
}

/* The sideways navigation */
.sidenav {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sidenav a {
  color: var(--cg-foreground);
  text-decoration: none;
  font-size: clamp(1.65rem, 1.45rem + 0.7vw, 2.05rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.sidenav a:hover,
.sidenav a.active { color: var(--cg-primary); }

.sidebar-foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sidebar-foot a,
.sidebar-foot .linklike {
  color: var(--cg-foreground);
  font-size: 1rem;
  text-decoration: none;
}
.sidebar-foot a:hover,
.sidebar-foot .linklike:hover { color: var(--cg-primary); }
.sidebar-foot form { margin: 0; }

.content {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 2.75rem 3.25rem 5rem;
  max-width: 840px;
}

/* Plain-text-looking button (Log out) */
.linklike {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: auto;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.linklike:hover { background: none; }

/* --- Responsive: collapse the rail to a top bar --- */
@media (max-width: 900px) {
  .layout { flex-direction: column; max-width: none; }
  .sidebar {
    position: static;
    height: auto;
    width: auto;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--cg-border);
    padding: 1.5rem 1.25rem;
  }
  .sidenav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 1.4rem;
  }
  .sidenav a { font-size: 1.2rem; }
  .sidebar-foot {
    margin-top: 1.4rem;
    padding-top: 0;
    flex-direction: row;
    gap: 1.25rem;
  }
  .content { padding: 2rem 1.25rem 3rem; max-width: none; }
}

/* --- Content links: black, gray on hover --- */
.content a:not([role="button"]) {
  color: var(--cg-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(0, 0, 0, 0.3);
}
.content a:not([role="button"]):hover {
  color: var(--cg-foreground);
  text-decoration-color: currentColor;
}

/* --- Buttons: geometric, light --- */
button,
[role="button"],
[type="submit"],
[type="button"] {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* --- Flat cards --- */
article {
  background: transparent;
  border: 1px solid var(--cg-border);
  box-shadow: none;
  border-radius: var(--pico-border-radius);
}
article > h2:first-child,
article > h3:first-child,
article > hgroup:first-child > :first-child { margin-top: 0; }
article > header { margin-bottom: 0.6rem; font-weight: 500; color: var(--cg-primary); }
/* A leading headline group sits flush at the top and is separated from the
   card body by the standard card gap. */
article > hgroup:first-child { margin-bottom: 1rem; }
/* Keep the card's inner top/bottom spacing even (no trailing margin). */
article > *:last-child { margin-bottom: 0; }
/* When that trailing element is a form, its inner button still carries Pico's
   margin-bottom -- zero it too so the button sits flush with the card padding. */
article > form:last-child > *:last-child { margin-bottom: 0; }

/* --- Headline + subtitle groups (detail/workshop/roster headers) --- */
hgroup h1 { margin-bottom: 0.3rem; }
hgroup > :last-child { margin-bottom: 0; }

/* --- Page header row --- */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cg-border);
}
.page-head h1 { margin-bottom: 0; }

/* --- Tables --- */
table { font-size: 0.95rem; }
th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--cg-foreground);
}
/* Center cell contents so action buttons line up with the row's text (a button
   is taller than text, so baseline alignment leaves it looking dropped). */
td { vertical-align: middle; }

/* --- Key/value meta rows --- */
.meta { margin-bottom: 0.4rem; }
.meta .label {
  display: inline-block;
  min-width: 9rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cg-foreground);
}

/* --- Inline action buttons --- */
td form { display: inline-block; margin: 0; }
td button { width: auto; margin: 0; padding: 0.25rem 0.65rem; font-size: 0.8rem; }
/* Pico sets a margin-bottom on [type=submit]/[type=button] (specificity 0-1-0)
   that out-weighs `td button`; an attribute selector wins it back so the button
   has no stray margin and centers in its row. */
td button[type] { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.actions form { margin: 0; }
.actions button,
.actions a[role="button"] { width: auto; margin: 0; }

/* --- Report builder form --- */
.report-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.2rem;
}
.report-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
}
.report-form select,
.report-form input[type="number"] { margin: 0; }
.report-form input[type="number"] { width: 6rem; }
.report-form .report-check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  /* The other items are label-over-control columns; this checkbox row is shorter,
     so with the row's flex-end alignment it sits below the inputs' middle. Give it
     a control's height and center, so the checkbox lines up with the selects. */
  min-height: calc(var(--pico-line-height) * 1em + var(--pico-form-element-spacing-vertical) * 2 + 2px);
}
.report-form .report-check input { margin: 0; }

/* --- Members roster --- */
.member-count { margin: -0.5rem 0 0.75rem; font-size: 0.85rem; }
/* The 12-column grid can exceed the content width on narrow screens; let it scroll
   within its own region instead of pushing the whole page sideways. */
.table-wrap { overflow-x: auto; }

/* Certification grid: NS/platoon columns on the left, then a High Tier and a Low
   Tier group of four role columns, each cell a read-only checkbox. */
.cert-grid th.grid-group {
  text-align: center;
  font-size: 0.7rem;
  border-bottom: 1px solid var(--cg-border);
}
.cert-grid th.grid-col {
  text-align: center;
  font-size: 0.72rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.cert-grid td.grid-cell {
  text-align: center;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
/* Keep names on one line so the wider grid doesn't force them to wrap. */
.cert-grid td:first-child { white-space: nowrap; }
/* A hairline divides the High Tier group from the Low Tier group. */
.cert-grid .grid-tier-start { border-left: 1px solid var(--cg-border); }

/* Certified cells show only a checkmark; uncertified cells are left blank. */
.cert-grid .tick { color: var(--cg-primary); font-size: 0.95rem; line-height: 1; }

/* Nested position filter: the tier parent rows head each group; the four roles
   under them are indented so the hierarchy reads at a glance. */
#position-filter .tier-parent { color: var(--cg-primary); }
#position-filter .tier-child label { padding-left: 1.25rem; }

/* --- Helpers --- */
.muted { color: var(--cg-foreground); }
.tier-tag {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--cg-border);
  border-radius: 1rem;
  color: var(--cg-foreground);
  vertical-align: middle;
}
.auth { max-width: 24rem; width: 100%; }
/* The auth card's header/footer are proper white sections that bleed flush to
   the card's edges (cancelling the card's 1rem padding), with a hairline rule
   and matching rounded corners -- so the footer reads as a normal footer bar
   rather than a floating strip with an odd gap beneath it. */
.auth > header,
.auth > footer {
  background: #ffffff;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.75rem 1rem;
}
.auth > header {
  margin-top: -1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--cg-border);
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
}
.auth > footer {
  margin-top: 1rem;
  margin-bottom: -1rem;
  border-top: 1px solid var(--cg-border);
  border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
}
/* Center the login / sign-up card within the content column. */
.auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 8rem);
}

/* Sign-up field rows: consistent spacing, with inputs carrying no extra margin
   (so the password checklist can sit right under its field). */
.auth form .field { margin-bottom: 1.1rem; }
.auth form .field input,
.auth form .field select { margin-bottom: 0; }
/* Help text matches the password checklist size. */
.auth .helptext { font-size: 0.78rem; }

/* Form field rows: a single, consistent gap between fields on every form page.
   Django's `form.as_p` (and the hand-written `<p>` rows) put a margin on both the
   <p> wrapper and the control inside it, which doubled the spacing -- collapse the
   control's margin so the <p> alone sets the rhythm. */
.content form p { margin-bottom: 1rem; }
.content form p input,
.content form p select,
.content form p textarea { margin-bottom: 0; }

/* Render checkboxes inline, box left of the label (e.g. the detail "Draft" flag
   and a workshop day's "Is open"). Give the box an explicit square size:
   width:auto collapses an appearance:none checkbox to a sliver. */
.content form p:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.content form p:has(> input[type="checkbox"]) input {
  order: -1;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
}
.content form p:has(> input[type="checkbox"]) label { margin: 0; }

/* Position makeup: the number inputs are the last things in the card, so drop
   their trailing margin to keep the card's bottom padding even. */
#detail-form .grid input { margin-bottom: 0; }

/* Live password checklist (sign up) */
.pw-criteria {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--cg-foreground);
}
.pw-criteria li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pw-criteria li::before {
  content: "\2717";        /* ✗ */
  color: var(--cg-error);
  font-weight: 600;
}
.pw-criteria li.ok::before {
  content: "\2713";        /* ✓ */
  color: var(--cg-success);
}

/* Detail card header: space between the name and its tags */
.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
}
.detail-tags { display: inline-flex; gap: 0.4rem; }

/* Required-field asterisk (detail form marks name/location/date) */
.required > label::after,
label.required::after {
  content: " *";
  color: var(--cg-error);
}

/* Form error text (login, etc.) */
.field-error {
  color: var(--cg-error);
  font-size: 0.9rem;
  margin: 0.3rem 0 0.7rem;
}
ul.errorlist {
  color: var(--cg-error);
  list-style: none;
  padding: 0;
  margin: 0.3rem 0;
  font-size: 0.9rem;
}

/* Filter bar (Details) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: -0.5rem 0 1.25rem;
}
.filter-bar details.dropdown {
  margin: 0;
  width: auto;
}
.filter-bar details.dropdown > summary,
.filter-toggle {
  /* Identical box metrics so every filter chip is the same height. A fixed
     height + centered content keeps them equal regardless of the chevron. */
  box-sizing: border-box;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  line-height: 1;
  font-size: 0.9rem;
  border: 1px solid var(--cg-border);
  border-radius: 0.4rem;
  white-space: nowrap;
}
.filter-bar details.dropdown > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  width: auto;
  font-weight: 400;
  background: transparent;
  color: var(--cg-primary);
  list-style: none;
}
.filter-bar details.dropdown > summary::-webkit-details-marker { display: none; }
/* Shrink Pico's chevron so it doesn't make the dropdown taller than the toggle. */
.filter-bar details.dropdown > summary::after {
  height: 1em;
  width: 1em;
  background-size: 1em auto;
  margin-left: 0;
}
.filter-bar details.dropdown > summary:hover { border-color: var(--cg-primary); }
.filter-bar details.dropdown ul { min-width: 13rem; font-size: 0.9rem; }
.filter-bar details.dropdown ul li label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 400;
  cursor: pointer;
  /* Drop Pico's label margin-bottom so the row centers in its hover band. */
  margin: 0;
}
.filter-bar details.dropdown ul li label input {
  flex: 0 0 auto;
  margin: 0;
}
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}
.filter-toggle input { margin: 0; }
.filter-clear { font-size: 0.9rem; }

/* --- Drag-to-select calendar (new workshop) --- */
.cal {
  border: 1px solid var(--cg-border);
  border-radius: 0.6rem;
  padding: 1rem 1.25rem 1.25rem;
  max-width: 26rem;
  margin: 0 auto;
  user-select: none;
}
.workshop-intro { margin: 0 0 0.5rem; }
/* Upcoming workshop series header (atop the calendar) */
.workshop-series { margin: 0 0 1.5rem; }
.series-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.series-head h2 { margin: 0; font-size: 1.25rem; }
.series-dates { font-size: 0.85rem; }
.series-edit { font-size: 0.85rem; margin-left: auto; }

/* Role assignment table (Department Head) */
.role-form { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.role-form select { width: auto; }
/* Both controls carry no stray margin so they're the same height and the flex
   row centers them on one line (Pico leaves a margin-bottom on buttons). */
.role-form select,
.role-form button { margin: 0; }

/* Roster: assign-a-member autocomplete */
.assign-search-wrap { position: relative; }
.assign-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--pico-form-element-background-color);
  border: 1px solid var(--cg-border);
  border-radius: 0.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  max-height: 16rem;
  overflow-y: auto;
}
.assign-results li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.assign-results li:hover { background: var(--cg-tertiary); }
.assign-results .ar-sub { font-size: 0.8rem; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.cal-title { font-size: 1.15rem; font-weight: 500; color: var(--cg-primary); }
.cal-nav {
  width: auto;
  margin: 0;
  padding: 0.1rem 0.55rem;
  background: none;
  border: none;
  color: var(--cg-foreground);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.cal-nav:hover { background: none; color: var(--cg-primary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; }
.cal-dow {
  text-align: center;
  font-size: 0.8rem;
  color: var(--cg-foreground);
  padding: 0.2rem 0 0.4rem;
}
.cal-day {
  text-align: center;
  padding: 0.55rem 0;
  border-radius: 0.4rem;
  font-size: 0.95rem;
}
.cal-day.disabled { color: #c7c4ba; }
.cal-day.selectable,
.cal-day.navigable { cursor: pointer; }
.cal-day.selectable:hover { background: var(--cg-tertiary); }
.cal-day.selected,
.cal-day.selected:hover { background: var(--cg-primary); color: var(--pico-primary-inverse); }
/* Mark the dates that actually have a workshop. */
.cal-day.has-workshop:not(.disabled) { box-shadow: inset 0 0 0 1px var(--cg-border); font-weight: 500; }
/* A small status dot under the date (learning / teaching / leading). */
.cal-dot { display: block; width: 6px; height: 6px; border-radius: 50%; margin: 3px auto 0; background: transparent; }
.cal-day.status-enrolled .cal-dot { background: var(--cg-learning); }
.cal-day.status-teaching .cal-dot { background: var(--cg-teaching); }
.cal-day.status-leading .cal-dot { background: var(--cg-leading); }
.cal-day.selected .cal-dot { background: var(--pico-primary-inverse); }

.cal-actions-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 0.85rem;
}
.cal-actions-row button { width: auto; margin: 0; }
.cal-hint { font-size: 0.85rem; }
.cal-legend { text-align: center; font-size: 0.8rem; margin: 0.7rem 0 0; }
.cal-key {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  vertical-align: middle;
  /* Nudge up so the dot's centre lines up with the text's lowercase middle. */
  margin: -0.12em 0.35rem 0 0.85rem;
}
.cal-key.status-enrolled { background: var(--cg-learning); }
.cal-key.status-teaching { background: var(--cg-teaching); }
.cal-key.status-leading { background: var(--cg-leading); }

/* Selected-days action panel under the calendar. */
.bulk-panel { max-width: 32rem; margin: 1.25rem auto 0; }
.bulk-panel .bulk-line {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 0.6rem;
}
.bulk-panel .bulk-line select { width: auto; margin: 0; flex: 1 1 12rem; }
.bulk-panel .bulk-line button { width: auto; margin: 0; }

/* --- Flash messages --- */
ul.messages { list-style: none; padding: 0; margin: 0 0 1.75rem; }
ul.messages li {
  list-style: none;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--cg-border);
  border-left-width: 3px;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  font-size: 0.95rem;
}
ul.messages li.success { border-left-color: var(--cg-success); }
ul.messages li.error { border-left-color: var(--cg-error); }
ul.messages li.warning { border-left-color: var(--cg-warning); }
ul.messages li.info { border-left-color: var(--cg-primary); }

/* --- Certification report (printable) --- */
.report-head { text-align: center; margin-bottom: 1.25rem; }
.report-head h1 { margin-bottom: 0.15rem; }
.report-subtitle { color: var(--cg-foreground); margin: 0; }
.report-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.report-actions button,
.report-actions a[role="button"] { width: auto; margin: 0; }

/* The platoons flow newspaper-style down two columns; a platoon never splits. */
.platoons { columns: 2; column-gap: 2.5rem; }
.platoon {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* inline-block keeps a section intact within a CSS column across browsers */
  display: inline-block;
  width: 100%;
  margin: 0 0 1.5rem;
}
.platoon h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.platoon table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.platoon td {
  border: 1px solid var(--cg-border);
  padding: 0.32rem 0.6rem;
  text-align: center;
}
.platoon td.report-id { color: var(--cg-foreground); white-space: nowrap; width: 38%; }
/* A non-platoon report is one boxed table split into two side-by-side columns
   (name + id | name + id), sized to its content and centered. */
.report-flat { margin: 0 auto; border-collapse: collapse; font-size: 0.9rem; }
.report-flat td {
  border: 1px solid var(--cg-border);
  padding: 0.35rem 1rem;
  text-align: center;
}
.report-flat td.report-id { color: var(--cg-foreground); white-space: nowrap; }
.report-date {
  text-align: center;
  color: var(--cg-foreground);
  font-size: 0.85rem;
  margin-top: 2rem;
}

/* Print: drop the screen chrome and let the report own the page. */
@page { margin: 0.6in; }
@media print {
  .sidebar,
  .report-actions,
  ul.messages { display: none !important; }
  .layout { display: block; max-width: none; min-height: 0; }
  .content { max-width: none; padding: 0; }
  body { background: #ffffff; }
  /* Make the hairlines reliably visible on paper. */
  .platoon td,
  .report-flat td { border-color: #b0ada4; }
  /* The muted gray prints too faintly -- darken the secondary text for paper. */
  .report-subtitle,
  .report-date,
  .platoon td.report-id,
  .report-flat td.report-id { color: #606060; }
}