/* ==========================================================================
   DPE Scheduling App — shared styles
   Matches the visual language of the parent mikebflying homepage: dark
   background, bold raised 3D buttons. Reuses the same CSS variables so the
   two levels of the site feel like one system.
   ========================================================================== */

:root {
  --bg: #000;
  --fg: #fff;
  --btn-bg: #000;
  --btn-hover: #1f3a5f;
  --btn-active: #2f6fbd;
  --btn-w: 300px;
  --btn-h: 200px;
  --depth: 8px;

  --panel-bg: #111417;
  --panel-border: rgba(255, 255, 255, 0.18);
  --input-bg: #0c0e10;
  --input-border: rgba(255, 255, 255, 0.3);
  --muted: rgba(255, 255, 255, 0.6);
  --danger: #ff6b6b;
  --danger-bg: rgba(255, 107, 107, 0.12);
  --success: #57d38c;
  --success-bg: rgba(87, 211, 140, 0.12);
  --amber: #e0a94a;
  --amber-bg: rgba(224, 169, 74, 0.12);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

a { color: #7fb2ea; }

.site-header {
  padding: 1.5rem 1.5rem 1rem;
  text-align: center;
}

.site-header h1 {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}

.site-header .tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.site-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0.25rem auto 0.75rem;
}

.site-header .back-link {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.site-header .back-link:hover { color: var(--fg); }

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.section-heading {
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 1.5rem;
}

/* ---- Raised button — the shared unit for role links and radio "cards" ---- */

.btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  justify-items: center;
  padding: 1rem 0 2rem;
}

@media (max-width: 720px) {
  .btn-grid { grid-template-columns: 1fr; }
}

/* Two-card variant (landing page: Applicant + Instructor), kept centered */
.btn-grid.btn-grid-two {
  grid-template-columns: repeat(2, minmax(0, var(--btn-w)));
  justify-content: center;
}
@media (max-width: 720px) {
  .btn-grid.btn-grid-two { grid-template-columns: 1fr; }
}

/* Admin entry — same look as the mikebflying homepage's Admin button: half
   the size of the main cards, grey, no white border, set below them. */
.admin-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  padding: 0 0 1rem;
}
.option-card.option-card-admin {
  width: calc(var(--btn-w) / 2);
  max-width: 60vw;
  height: calc(var(--btn-h) / 2);
  min-height: 60px;
  background: #3a3a3a;
  border: none;
  box-shadow: 0 calc(var(--depth) / 2) 0 0 #202020, 0 calc(var(--depth) / 2 + 4px) 10px rgba(0, 0, 0, 0.5);
}
.option-card.option-card-admin .card-title { font-size: 1.05rem; letter-spacing: 0.03em; }
.option-card.option-card-admin:hover,
.option-card.option-card-admin:focus-visible { background: #4c4c4c; }
a.option-card.option-card-admin:active {
  background: #555;
  transform: translateY(calc(var(--depth) / 2));
  box-shadow: 0 0 0 0 #202020, 0 2px 6px rgba(0, 0, 0, 0.5);
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  max-width: var(--btn-w);
  height: var(--btn-h);
  background: var(--btn-bg);
  color: var(--fg);
  border: 3px solid var(--fg);
  border-radius: 24px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding: 0.75rem;
  box-shadow: 0 var(--depth) 0 0 #8a8a8a, 0 calc(var(--depth) + 6px) 14px rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition: background-color 0.18s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

.option-card .card-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.option-card .card-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  letter-spacing: normal;
}

.option-card:hover,
.option-card:focus-visible {
  background: var(--btn-hover);
}

.option-card:focus-visible,
.test-type-card:focus-within {
  outline: 3px solid var(--fg);
  outline-offset: 4px;
}

/* Plain nav buttons (links) get the pressed look on click via :active */
a.option-card:active {
  background: var(--btn-active);
  transform: translateY(var(--depth));
  box-shadow: 0 0 0 0 #8a8a8a, 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Radio "cards" (test type, etc.) — selected state looks permanently pressed */
.test-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.test-type-card:has(input:checked),
.test-type-card.selected {
  background: var(--btn-active);
  transform: translateY(var(--depth));
  box-shadow: 0 0 0 0 #8a8a8a, 0 2px 6px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .option-card { transition: background-color 0.01s; }
}

.option-card:disabled,
.option-card[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: 0 var(--depth) 0 0 #4a4a4a, 0 calc(var(--depth) + 6px) 14px rgba(0, 0, 0, 0.4);
}
.option-card:disabled:hover { background: var(--btn-bg); }

/* ---- Form layout ---- */

.form-section {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.form-section h2 {
  font-size: 1.05rem;
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}

/* Collapsible top-level sections (poa.html uses <details class="form-section">
   with a <summary> in place of the old plain <h2>/<section> pairing — the
   header card above stays a plain div with its own h2, so that rule is
   untouched). Collapsed by default (no "open" attribute in the markup) —
   the DPE expands whichever section they're working on. */
.form-section > summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  list-style: revert;
}
.form-section[open] > summary { margin-bottom: 1rem; }

.required { color: var(--danger); }

.hint { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
h2 + .hint { margin-top: -0.5rem; }

.radio-inline { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
/* flex-shrink: 0 keeps a multi-word option (e.g. "Temporary Airman
   Certificate") from being squeezed narrower than its own text and wrapping
   mid-label — the .radio-inline container wraps whole options onto the next
   line instead, same as it already does for single-word ones. */
.radio-inline label { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; flex-shrink: 0; white-space: nowrap; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Without this, a grid item's default auto min-width lets a text input's
     intrinsic width force the whole row wider than its column — which is
     exactly why a field like Test Fee/Retest Fee could spill past the edge
     of a two-column row instead of sitting neatly side by side. */
  min-width: 0;
}
.field label { font-size: 0.88rem; font-weight: 600; }
.field input,
.field select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font: inherit;
  background: var(--input-bg);
  color: var(--fg);
  box-sizing: border-box;
}
.field input:focus,
.field select:focus {
  outline: 2px solid var(--btn-active);
  outline-offset: 1px;
  border-color: var(--btn-active);
}

/* Filled-in feedback (see updateFieldFillState/refreshAllFieldFillStates in
   script.js, wired up on complete-request.html): every field gets this same
   treatment once it has a value, rather than only whichever fields a
   browser's own autofill happens to recognize — that inconsistency (some
   fields turning white, most not) is exactly what this replaces. */
.field input.field-complete,
.field select.field-complete,
.field textarea.field-complete {
  background: #fff;
  color: #111;
}
.field input.field-complete:focus,
.field select.field-complete:focus {
  color: #111;
}
/* A browser's native autofill styling (its own yellow/white background)
   would otherwise fight with the rule above and look inconsistent with it —
   force autofilled fields to match instead of showing the browser's own
   color. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

.field-error {
  color: var(--danger);
  font-size: 0.8rem;
  min-height: 1em;
}

.optional-section summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
}

.form-actions { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }

.form-actions .option-card { height: 110px; }

.btn-secondary {
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  border: 2px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--btn-hover); }

.btn-link {
  background: none;
  border: none;
  color: #7fb2ea;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin-top: 0.75rem;
}

.form-error-summary {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

/* Same shape as .form-error-summary, but amber — a reminder, not a problem. */
.poa-review-summary {
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

/* ---- Calendar widget ---- */

.calendar {
  max-width: 340px;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 0.9rem;
  background: var(--input-bg);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.calendar-nav-btn {
  background: none;
  border: 1px solid var(--input-border);
  color: var(--fg);
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 0.85rem;
}

.calendar-grid .dow {
  font-weight: 600;
  color: var(--muted);
  padding: 0.25rem 0;
}

.calendar-day {
  padding: 0.45rem 0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  font: inherit;
  color: var(--fg);
}

.calendar-day:hover:not(:disabled) { background: var(--btn-hover); }
.calendar-day:disabled { color: rgba(255, 255, 255, 0.2); cursor: not-allowed; }

.calendar-day.in-range { background: rgba(47, 111, 189, 0.35); }
.calendar-day.range-start,
.calendar-day.range-end {
  background: var(--btn-active);
  color: var(--fg);
  font-weight: 600;
}

.selected-range { font-weight: 600; margin: 0.75rem 0 0; }

/* ---- Verification (OTP) step ---- */

.dev-banner {
  background: var(--amber-bg);
  border: 1px dashed var(--amber);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.otp-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.otp-row .field { flex: 1; min-width: 160px; }

/* ---- Airport search ---- */

.airport-results {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--panel-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.airport-result-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.airport-result-item:hover,
.airport-result-item:focus-visible {
  background: var(--btn-hover);
}

.token-banner {
  background: var(--panel-bg);
  border: 1px dashed var(--panel-border);
  color: var(--muted);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.confirmation-panel {
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: var(--success);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
}

/* ---- Schedule page ------------------------------------------------------ */

.schedule-page { max-width: 1180px; }

.schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.view-toggle { display: flex; gap: 0.4rem; }

.view-toggle-btn {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.view-toggle-btn-active {
  background: var(--btn-active);
  border-color: var(--btn-active);
}

.schedule-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
}

.schedule-nav .btn-link { margin-top: 0; }

.schedule-range-label { font-weight: 600; color: var(--fg); min-width: 10rem; }

.schedule-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}

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

/* Capped (via inline max-height, set in schedule.js to match the calendar
   panel's current rendered height) so that opening one of the sidebar's
   dropdowns scrolls within the sidebar instead of pushing it taller than
   the calendar next to it. Below the 900px breakpoint above, the layout
   stacks to a single column and schedule.js removes the cap so the
   sidebar just flows under the calendar normally. */
.schedule-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
}

.calendar-feed-steps {
  margin: 0.5rem 0 0.9rem;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.calendar-feed-steps li + li { margin-top: 0.3rem; }
.calendar-feed-steps code {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 0 0.3rem;
  font-size: 0.8em;
}

.calendar-feed-url-input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
}

.calendar-view {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1rem;
  overflow-x: auto;
}

/* Month grid */

.month-grid { min-width: 560px; }

.month-grid-header,
.month-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.month-grid-header {
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 0.4rem;
  font-size: 0.85rem;
}

.month-day-cell {
  border: 1px solid var(--panel-border);
  min-height: 92px;
  padding: 0.35rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.month-day-cell:hover { background: rgba(255, 255, 255, 0.04); }

.month-day-outside { opacity: 0.35; }

.month-day-today { border-color: var(--btn-active); border-width: 2px; }

.month-day-number { font-size: 0.85rem; font-weight: 600; }

.month-day-blocked-tag {
  font-size: 0.7rem;
  color: var(--amber);
  background: var(--amber-bg);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  align-self: flex-start;
}

.appt-chip {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.7rem;
  border: none;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  color: var(--fg);
  background: var(--btn-active);
}

/* Test-type color coding, shared by month chips and grid blocks */
.test-type-private-asel { background: #2f6fbd; }
.test-type-instrument-airplane { background: #6a4fb0; }
.test-type-commercial-asel { background: #2f9e6f; }

/* Week/Day time grid */

.time-grid-wrap { display: flex; min-width: 560px; }

.time-grid-hours {
  width: 3.5rem;
  flex-shrink: 0;
  text-align: right;
  padding-right: 0.5rem;
  padding-top: 1.75rem;
}

.time-grid-hour-label {
  font-size: 0.7rem;
  color: var(--muted);
  transform: translateY(-0.5em);
}

.time-grid-columns {
  display: grid;
  grid-template-columns: repeat(var(--col-count, 1), 1fr);
  gap: 2px;
  flex: 1;
}

.time-grid-col-header {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  padding-bottom: 0.4rem;
  color: var(--muted);
}

.time-grid-col-header-today { color: var(--fg); }

.time-grid-col-body {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  user-select: none;
}

.time-grid-col-requested .time-grid-col-body {
  box-shadow: inset 0 0 0 2px var(--amber);
}

/* One per interior hour boundary (not the very top/bottom, which already
   have the column's own border) — a light dashed rule so an appointment's
   length/position is easy to judge at a glance on the Week/Day grid.
   Positioned absolutely by schedule.js's renderTimeGrid(), same math as the
   hour labels; pointer-events:none so it never steals a drag-select click
   meant for the column underneath it. */
.time-grid-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--panel-border);
  pointer-events: none;
}

.grid-block {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 6px;
  font-size: 0.72rem;
  padding: 0.15rem 0.35rem;
  overflow: hidden;
  text-align: left;
  border: none;
  color: var(--fg);
  cursor: pointer;
  line-height: 1.25;
}

.appt-block { background: var(--btn-active); }

.blocked-block {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.08) 6px,
    rgba(255, 255, 255, 0.02) 6px,
    rgba(255, 255, 255, 0.02) 12px
  );
  color: var(--muted);
  cursor: default;
}

.drag-highlight {
  background: rgba(224, 169, 74, 0.35);
  border: 1px dashed var(--amber);
  pointer-events: none;
}

/* A slot already offered to an applicant, awaiting a phone/email reply —
   distinct from a confirmed appointment so it visually reads as tentative. */
.offered-hold-block {
  background: repeating-linear-gradient(
    45deg,
    rgba(224, 169, 74, 0.35),
    rgba(224, 169, 74, 0.35) 6px,
    rgba(224, 169, 74, 0.16) 6px,
    rgba(224, 169, 74, 0.16) 12px
  );
  border: 1px dashed var(--amber);
}

/* A placeholder time held for an applicant who is still finishing the intake
   form — dotted teal, so it reads as "reserved, not yet confirmed". */
.held-hold-block {
  background: repeating-linear-gradient(
    -45deg,
    rgba(76, 208, 200, 0.30),
    rgba(76, 208, 200, 0.30) 6px,
    rgba(76, 208, 200, 0.12) 6px,
    rgba(76, 208, 200, 0.12) 12px
  );
  border: 1px dotted #4cd0c8;
}
.hold-row { margin-top: 0.4rem; }

/* A candidate time being drafted for an offer that hasn't been sent yet —
   its own style so it's never confused with an already-sent tentative hold. */
.draft-offer-block {
  background: rgba(127, 178, 234, 0.35);
  border: 1px dashed #7fb2ea;
}

/* The applicant accepted this exact offered time (via the email link, or a
   phone/email reply entered by hand) — solid rather than dashed, since it's
   no longer just tentative, but still visually distinct from a truly
   confirmed appointment (.appt-block) until the DPE finalizes it. */
.accepted-hold-block {
  background: var(--success-bg);
  border: 1px solid var(--success);
}

/* Sidebar: pending requests + blocked-time lists */

.request-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.request-list-item {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}

.request-list-item-active { border-color: var(--amber); }

.request-list-item .request-list-action {
  display: block;
  margin-top: 0.9rem;
}

.request-list-actions-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}
.request-list-actions-row .btn-link { margin-top: 0; }
.nudge-compose textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--input-bg);
  color: var(--fg);
}

.status-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
}
.status-pill-offered {
  background: rgba(224, 169, 74, 0.18);
  color: var(--amber);
  border: 1px solid var(--amber);
}
.status-pill-accepted {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}
.status-pill-declined {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.offer-slot-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
}
.offer-slot-row {
  display: flex;
  flex-direction: column;   /* date/time on top, action link dropped to its own line */
  align-items: flex-start;
  gap: 0.15rem;
  font-size: 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
}
.offer-slot-row .btn-link { margin-top: 0; white-space: nowrap; }

.offer-draft-panel {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--panel-border);
}

/* To-do reminders */

.todo-row {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
}

.todo-row label { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.todo-row input[type="checkbox"] { margin-top: 0.2rem; }

.todo-row .todo-remove { margin-top: 0.3rem; margin-left: 1.5rem; font-size: 0.78rem; }
.todo-add { margin-bottom: 0.75rem; }
.todo-add input[type="text"],
.todo-add input[type="date"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--input-bg);
  color: var(--fg);
}
.todo-add-row { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.todo-add-row input[type="date"] { flex: 1; min-width: 0; }

.todo-row-overdue { border-color: var(--danger); }
.todo-row-overdue strong { color: var(--danger); }

.blocked-list-heading { font-size: 0.9rem; margin: 0 0 0.4rem; color: var(--muted); }

/* Count badge inside a collapsed sidebar <summary> (Pending Requests/To-Do/
   Blocked-Off Time on schedule.html) — lets the DPE see at a glance whether
   there's anything in a section without opening it. */
.schedule-section-count { font-weight: 400; margin-top: 0; }

.blocked-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }

.blocked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.blocked-row .btn-link { margin: 0; white-space: nowrap; }

/* Modals */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem;
  overflow-y: auto;
  z-index: 50;
}

.modal {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 520px;
  width: 100%;
}

.modal h2 { margin-top: 0; }
.modal h3 { font-size: 0.95rem; margin: 1rem 0 0.5rem; }

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.contact-info { font-size: 0.9rem; }

/* ---- Documents page ------------------------------------------------------ */

.doc-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.doc-slot-card {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 1rem;
  background: var(--input-bg);
}

.doc-slot-card h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }

.doc-upload-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}

.doc-file-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }

.doc-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
}

.doc-file-actions { display: flex; gap: 1rem; align-items: center; }
.doc-file-actions .btn-link { margin: 0; }

/* ---- Records page -------------------------------------------------------- */

.records-page { max-width: 1000px; }

.records-filters { display: flex; align-items: center; flex-wrap: wrap; }

.records-filters select,
.records-filters input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font: inherit;
  background: var(--input-bg);
  color: var(--fg);
}

.records-table { display: flex; flex-direction: column; gap: 0.75rem; }

.record-row {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--panel-bg);
}

.record-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 1rem;
}

.record-row-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.record-row-actions { margin-top: 0.65rem; }

.record-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

.record-badge-pending { color: var(--amber); background: var(--amber-bg); }
.record-badge-confirmed { color: #7fb2ea; background: rgba(47, 111, 189, 0.18); }
.record-badge-completed { color: var(--success); background: var(--success-bg); }

/* Wider modal variant for the record detail view — has a lot more fields
   than the appointment/block/slot modals in schedule.html. */
.modal-wide { max-width: 720px; }

/* ==========================================================================
   Plan of Action (poa.html)
   ========================================================================== */

.poa-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.4rem 1rem;
}

.poa-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 0.2rem 0;
}

.poa-check-row input[type="checkbox"], .poa-check-row input[type="radio"] { margin-top: 0.2rem; flex-shrink: 0; }

.poa-endorsement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--panel-border);
}
.poa-endorsement-row:last-child { border-bottom: none; }
.poa-endorsement-row .poa-check-row { flex: 1; }
.poa-endorsement-date { width: 150px; flex-shrink: 0; }
.poa-endorsement-airports {
  width: 150px;
  flex-shrink: 0;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  color: var(--fg);
}

.poa-briefing-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.poa-briefing-item {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--panel-border);
}
.poa-briefing-item:last-child { border-bottom: none; }
.poa-briefing-item .poa-krs-sublist { margin-left: 1.75rem; }
.poa-briefing-time-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0 0 1.75rem;
}
.poa-briefing-time {
  width: 120px;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  color: var(--fg);
}
.poa-briefing-notes-field { margin-top: 1rem; }

/* 24-hour HHMM text fields (Test Start Time / Ending Time) — a gentle
   red border once something's typed that doesn't match HHMM yet. */
.poa-time24:invalid:not(:placeholder-shown) { border-color: var(--danger); }

.poa-ref-list {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.88rem;
}
.poa-ref-list li { margin-bottom: 0.3rem; }

/* Debriefing: the spoken-script preamble shown ahead of the Unsatisfactory
   checklist (Notice of Disapproval) — set off from the checkboxes below it
   as reference text the DPE reads aloud, not something to check off. */
.poa-debrief-script {
  border-left: 3px solid var(--panel-border);
  padding: 0.5rem 0.5rem 0.5rem 0.85rem;
  margin: 0.4rem 0 1rem;
  font-style: italic;
  color: var(--muted);
  font-size: 0.9rem;
}
.poa-debrief-script-line { list-style: none; padding: 0.15rem 0; }

.poa-vspeed-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0.6rem;
}
.poa-vspeed-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.poa-vspeed-field input {
  width: 100%;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  color: var(--fg);
  text-align: center;
}

.poa-tolerance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 0.5rem;
}
.poa-tolerance-table th, .poa-tolerance-table td {
  border: 1px solid var(--panel-border);
  padding: 0.35rem 0.5rem;
  text-align: left;
}
.poa-tolerance-table th { color: var(--muted); font-weight: 600; }


.poa-solo-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.poa-solo-table th, .poa-solo-table td {
  border: 1px solid var(--panel-border);
  padding: 0.3rem 0.5rem;
  text-align: left;
}
.poa-solo-table th { color: var(--muted); font-weight: 600; }
.poa-solo-table th:first-child, .poa-solo-table td:first-child { width: 2rem; text-align: center; }
.poa-solo-table input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  color: var(--fg);
}

/* Areas of Operation / Tasks */

details.poa-area {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.85rem;
}
details.poa-area > summary {
  cursor: pointer;
  padding: 0.3rem 0;
  list-style: revert;
}
details.poa-area[open] > summary { margin-bottom: 0.5rem; }

details.poa-task-card {
  border-top: 1px solid var(--panel-border);
  padding: 0.85rem 0;
}
details.poa-task-card:first-of-type { border-top: none; }
details.poa-task-card.poa-task-deficient {
  background: var(--danger-bg);
  border-radius: 6px;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  margin: 0.15rem 0;
}

details.poa-task-card > summary {
  cursor: pointer;
  list-style: revert;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
details.poa-task-card[open] > summary { margin-bottom: 0.5rem; }

.poa-task-card h3 { margin: 0 0 0.25rem; font-size: 1rem; }
details.poa-task-card > summary h3 { margin: 0; display: inline; }
.poa-task-summary-label { font-size: 0.78rem; }

/* Flight POA: each Task is its own nested <details> (checkbox to mark it
   planned for this flight, tap to expand its Skill elements). */
details.poa-flight-task {
  border-top: 1px solid var(--panel-border);
  padding: 0.6rem 0;
}
details.poa-flight-task:first-of-type { border-top: none; }
details.poa-flight-task.poa-task-deficient {
  background: var(--danger-bg);
  border-radius: 6px;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  margin: 0.15rem 0;
}
details.poa-flight-task > summary {
  cursor: pointer;
  list-style: revert;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
details.poa-flight-task > summary h3 { margin: 0; font-size: 1rem; display: inline; }
.poa-flight-task-check { flex-shrink: 0; margin-top: 0.15rem; }
details.poa-flight-task[open] > summary { margin-bottom: 0.5rem; }
details.poa-flight-task .poa-task-body { padding-top: 0.3rem; }
.poa-sue-legend { margin: 0 0 0.3rem; font-size: 0.78rem; }

.poa-refs { margin: 0.15rem 0; font-style: italic; }
.poa-objective { margin: 0.35rem 0; font-size: 0.92rem; }

.poa-krs-note {
  color: var(--amber);
  font-size: 0.85rem;
  margin: 0.3rem 0;
}

.poa-krs-group { margin-top: 0.6rem; }
.poa-krs-group h4 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* Knowledge / Risk Management / Skills headings: colour-coded banners so the
   three groups are easy to tell apart at a glance (screen and print). */
.poa-krs-k { --krs: #6cb4ff; --krs-bg: rgba(108, 180, 255, 0.16); }
.poa-krs-r { --krs: #ffb347; --krs-bg: rgba(255, 179, 71, 0.16); }
.poa-krs-s { --krs: #57d38c; --krs-bg: rgba(87, 211, 140, 0.16); }
.poa-krs-group.poa-krs-k h4,
.poa-krs-group.poa-krs-r h4,
.poa-krs-group.poa-krs-s h4 {
  display: block;
  margin: 0 0 0.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--krs);
  background: var(--krs-bg);
  border-left: 5px solid var(--krs);
  border-radius: 3px;
}
@media print {
  .poa-krs-k { --krs: #0b4f9c; --krs-bg: #dcebfb; }
  .poa-krs-r { --krs: #8a4b00; --krs-bg: #fde9cc; }
  .poa-krs-s { --krs: #0d6b34; --krs-bg: #d8f2e2; }
  .poa-krs-group.poa-krs-k h4,
  .poa-krs-group.poa-krs-r h4,
  .poa-krs-group.poa-krs-s h4 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.poa-krs-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.85rem;
}
.poa-krs-element {
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--panel-border);
}
.poa-krs-element:last-child { border-bottom: none; }
.poa-krs-element.poa-krs-child { border-bottom: none; padding: 0.25rem 0; }
.poa-krs-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.poa-krs-text { flex: 1; }
.poa-krs-sublist {
  margin: 0.15rem 0 0;
  padding-left: 1.4rem;
  list-style: none;
  border-left: 2px solid var(--panel-border);
}
.poa-krs-subnote {
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0.2rem 0;
}
.poa-krs-code {
  font-weight: 700;
  color: #7fb2ea;
  font-size: 0.8rem;
}

.poa-sue-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.poa-sue-check {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.poa-sue-check input[type="checkbox"] { margin: 0; }

/* The "R" (Review) checkbox — same shape as S/E/U, but set off in amber
   (rather than --muted) once checked, so a glance down the list shows which
   elements still need a look at the debrief. */
.poa-sue-check-review { color: var(--muted); }
.poa-sue-check-review:has(input:checked) { color: var(--amber); }

.poa-sue-flag {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--danger);
  margin-left: 0.4rem;
}

.poa-code-jump {
  display: inline-block;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #7fb2ea;
  background: rgba(127, 178, 234, 0.12);
  color: #7fb2ea;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.poa-code-jump:hover { background: rgba(127, 178, 234, 0.28); }

.poa-krs-element.poa-jump-highlight { animation: poaJumpFlash 2s ease-out; }
@keyframes poaJumpFlash {
  0% { background: rgba(255, 209, 102, 0.45); }
  100% { background: transparent; }
}

.poa-task-controls {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.poa-task-controls textarea {
  flex: 1;
  min-width: 220px;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  color: var(--fg);
  font-family: inherit;
  resize: vertical;
}

/* Printing / "Download PDF" (browser print-to-PDF — no extra libraries,
   so it still works with no network connection once the page is loaded).
   Chrome (nav, autosave status, buttons) is hidden; every <details> is
   force-opened by poa.js just before calling window.print(). On the Flight
   page specifically, the entire on-screen checklist (#poaFlightRoot) is
   hidden from print too — that page's "Download / Print PDF" output is
   meant to be just the 3 pre-filled cover pages (cover sheet, task
   checklist, maneuver tolerances), nothing past them. */
@media print {
  .poa-no-print { display: none !important; }
  #poaFlightRoot { display: none !important; }
  /* --muted and --panel-border are translucent WHITE (meant for the dark
     screen theme) — on white paper that's invisible ink, so give print its
     own readable values. Fixes the new cover sheet's labels/hints/dividers,
     and incidentally the same long-standing invisibility for .hint text and
     dotted K/R/S separators elsewhere in the printed Plan of Action. */
  body { background: #fff; color: #000; --muted: #555; --panel-border: rgba(0, 0, 0, 0.25); }
  .form-section, details.poa-area { border-color: #999; break-inside: avoid; }
  .poa-task-card { break-inside: avoid; }
  select, textarea, input { border-color: #999 !important; color: #000 !important; background: #fff !important; }
  .poa-krs-code { color: #333; }
  .poa-code-jump { display: none; }
  .poa-print-only { display: block !important; }
  .poa-cover-page { color: #000; }
  .poa-cover-value { border-color: #999 !important; }
}

/* Pre-filled cover sheet — built by poa-flight.js's renderCoverPage(),
   shown only in print/PDF output (see .poa-print-only above) as page 1
   ahead of everything else. Mirrors the layout of the original static
   "POA-PVT-FLIGHT-with-cover-and-reference.pdf" cover sheet, but with this
   appointment's values instead of blank boxes, so the cover sheet itself
   can keep evolving here as needs change instead of living in a separate
   static file. */
.poa-print-only { display: none; }

/* Fixed page box for the 3 cover pages (overrides whatever margins/scale
   happen to be saved in the browser's own Print dialog) so each page's
   content area is the same known size everywhere it's printed, instead of
   depending on per-machine print settings. */
@page {
  size: letter;
  margin: 0.5in;
}

.poa-cover-page {
  padding: 0.5rem 0.5rem;
  break-after: page;
  /* Never let a cover page's own content silently split across 2 physical
     pages — on a different machine/font rendering (or with the browser's
     own "Headers and footers" print option on, which eats into the usable
     page height), "almost fits" can become "just barely doesn't," and a
     forced break-after landing right at that edge is what produces a
     stray blank page. Keeping each page a single, un-split fragment avoids
     that edge case, and the tighter spacing below gives real headroom
     instead of riding right up against the page boundary. */
  break-inside: avoid;
}
.poa-cover-page h1 { margin: 0 0 0.2rem; font-size: 1.5rem; }
.poa-cover-subtitle { margin: 0 0 1rem; color: var(--muted); }
.poa-cover-section-heading { margin: 0.9rem 0 0.3rem; font-size: 1.05rem; }
.poa-cover-hint { margin: 0 0 0.4rem; font-size: 0.82rem; color: var(--muted); }
.poa-cover-divider { border: none; border-top: 1px solid var(--panel-border); margin: 1rem 0; }

.poa-cover-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 1rem 1.5rem;
}
.poa-cover-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 0.25rem; }
.poa-cover-value {
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  min-height: 1.3em;
}

/* Page 2 of the print output: Areas of Operation task checklist, each
   Task paired with a blank ruled line for in-flight Event Triggers/Notes —
   built by renderCoverTasksPage() from the same testData.areas (filtered
   to Flight areas) as the on-screen Areas of Operation — Flight list, so
   it can never drift out of sync with the actual Task set. */
.poa-cover-tasks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  font-size: 0.6rem;
}
.poa-cover-tasks-area-heading {
  grid-column: 1;
  font-weight: 700;
  margin: 0.26rem 0 0.06rem;
}
.poa-cover-tasks-notes-heading {
  grid-column: 2;
  font-weight: 700;
  font-size: 0.58rem;
  margin: 0.26rem 0 0.06rem;
  align-self: end;
}
.poa-cover-task-row {
  grid-column: 1;
  padding: 0.02rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 1.1;
  break-inside: avoid;
  page-break-inside: avoid;
}
.poa-cover-checkbox {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  flex-shrink: 0;
  margin-top: 0.2em;
}
.poa-cover-task-note-line {
  grid-column: 2;
  border-bottom: 1px solid var(--panel-border);
  margin: 0.06rem 0;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Page 3: Maneuver Tolerances reference table — reuses .poa-tolerance-table
   itself (same look as the on-screen version) via renderCoverTolerancesPage().
   Tighter than the on-screen version's padding/font so this page has real
   headroom left over, not just a bare fit. */
.poa-cover-page .poa-tolerance-table { font-size: 0.76rem; }
.poa-cover-page .poa-tolerance-table th,
.poa-cover-page .poa-tolerance-table td { padding: 0.22rem 0.4rem; }

/* The 3rd cover page is the last thing that prints (see #poaFlightRoot's
   print rule above) — without this override it inherits .poa-cover-page's
   forced break-after and some print engines turn that trailing "break after
   the last page" into a stray blank page. "avoid" (not just "auto") plus
   !important makes sure nothing forces a break after it. */
#poaFlightCoverTolerancesPage:not(.poa-print-continues) {
  page-break-after: avoid !important;
  break-after: avoid !important;
}

/* Instrument only: Skill Elements reference pages that follow the
   tolerances page (see renderSkillReferencePages() in poa-flight.js). Unlike
   the 3 fixed cover pages this block flows over as many pages as it needs;
   each Task keeps together, and nothing forces a break after the last one. */
.poa-skillref { padding: 0.5rem; color: #000; font-size: 0.66rem; line-height: 1.22; }
.poa-skillref .poa-skillref-title { margin: 0 0 0.1rem; font-size: 1.15rem; }
.poa-skillref .poa-skillref-sub { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.7rem; }
.poa-skillref-area { margin: 0 0 0.35rem; }
.poa-skillref-area h3 { margin: 0.55rem 0 0.2rem; font-size: 0.82rem; border-bottom: 1px solid var(--panel-border); break-after: avoid; }
.poa-skillref-task { margin: 0 0 0.3rem; break-inside: avoid; page-break-inside: avoid; }
.poa-skillref-task h4 { margin: 0.2rem 0 0.08rem; font-size: 0.72rem; }
.poa-skillref-line { padding-left: 0.1rem; }
.poa-skillref-child { padding-left: 1.2rem; }
.poa-skillref-code { font-weight: 700; white-space: nowrap; }

/* Instrument data extras on the Ground page */
.poa-checklist-heading { margin: 0.8rem 0 0.2rem; font-weight: 700; }
.poa-checklist-note { margin: 0.4rem 0 0.2rem; }
.poa-areas-note { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--panel-border); border-radius: 6px; }
.poa-task-ref { margin: 0.5rem 0; border: 1px dashed var(--panel-border); border-radius: 6px; padding: 0.3rem 0.6rem; }
.poa-task-ref summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.poa-task-ref p { margin: 0.4rem 0; font-size: 0.85rem; }

/* Post-Activity Summary (post-activity-summary.html/js) — a normal,
   on-screen-and-printable page (not a hidden print-only insert like the
   Flight cover pages above), reusing the same field/grid/heading look. Each
   Unsat/Incomplete Task block avoids splitting across a page break, but the
   page as a whole flows naturally rather than being pinned to one page. */
#pasBody .poa-cover-grid { margin-bottom: 0.75rem; }
#pasBody h1 { margin: 0 0 0.2rem; }
.pas-flagged-task-block {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* ---- Contact form (contact.html) ---------------------------------------- */

.field textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font: inherit;
  background: var(--input-bg);
  color: var(--fg);
  box-sizing: border-box;
  resize: vertical;
}
.field textarea:focus {
  outline: 2px solid var(--btn-active);
  outline-offset: 1px;
  border-color: var(--btn-active);
}

/* Anti-spam honeypot: off-screen (not display:none, which some bots skip). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* To-dos on the calendar (all-day items) */
.todo-chip {
  --tc: var(--amber);
  --tc-bg: var(--amber-bg);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--tc);
  background: var(--tc-bg);
  border: 1px dashed var(--tc);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  min-width: 0;
  box-sizing: border-box;
}
.todo-chip input[type="checkbox"] { margin: 0; flex-shrink: 0; cursor: pointer; }
.todo-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
/* One colour per kind of to-do, so a glance tells them apart */
.todo-kind-iacra    { --tc: #6aa9ff; --tc-bg: rgba(106, 169, 255, 0.13); }
.todo-kind-scenario { --tc: #b58cff; --tc-bg: rgba(181, 140, 255, 0.13); }
.todo-kind-followup { --tc: var(--amber); --tc-bg: var(--amber-bg); }
.todo-kind-move     { --tc: #4cd0c8; --tc-bg: rgba(76, 208, 200, 0.13); }
.todo-kind-cancel   { --tc: var(--danger); --tc-bg: var(--danger-bg); }
.todo-kind-other    { --tc: #9aa4b2; --tc-bg: rgba(154, 164, 178, 0.13); }
.todo-kind-manual   { --tc: #57d38c; --tc-bg: rgba(87, 211, 140, 0.13); }
/* Overdue keeps its kind colour; a solid border plus "!" marks it */
.todo-chip-overdue { border-style: solid; }
.todo-chip-overdue .todo-chip-text::before { content: "! "; }
/* Same colour key in the sidebar list */
.todo-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0 0.35rem;
  margin-right: 0.3rem;
  border-radius: 3px;
  vertical-align: 1px;
  color: var(--tc);
  background: var(--tc-bg);
  border: 1px solid var(--tc);
}

/* All-day to-do strip between a Week/Day column's header and its hours */
.time-grid-todo-strip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.1rem 0 0.2rem;
  overflow: hidden;
  box-sizing: border-box;
}


/* New Appointment form: wider, so two-up fields (and long labels such as
   "Continue from discontinuance?") fit on one line, with even spacing between
   rows and inputs lined up along the bottom of each row. */
#newApptModal .modal { max-width: 720px; }
#newApptModal .field-grid { align-items: end; }
#newApptModal .field-grid.field-grid-3 { grid-template-columns: repeat(3, 1fr); }
#newApptModal .field-grid + .field-grid,
#newApptModal .field-grid + .field,
#newApptModal .field + .field,
#newApptModal .field + .field-grid { margin-top: 1rem; }
#newApptModal h3 { margin: 1.5rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--panel-border); }
#newApptModal h3:first-of-type { border-top: none; padding-top: 0; }
#newApptModal .field select { height: 2.45rem; }
#newApptModal textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) {
  #newApptModal .field-grid.field-grid-3 { grid-template-columns: 1fr; }
}
#newApptModal #naAirportCode + .field-grid { margin-top: 1rem; }
#newApptModal .field-grid > .field { margin-top: 0; }
#newApptModal h3 { margin-bottom: 0.75rem; }
#newApptModal .field input:not([type="checkbox"]),
#newApptModal .field select { height: 2.5rem; box-sizing: border-box; }
#newApptModal .field input[type="date"],
#newApptModal .field input[type="time"] { padding-top: 0; padding-bottom: 0; }

/* Appointments still missing details (entered by hand with just the basics) */
.appt-chip.appt-incomplete,
.appt-block.appt-incomplete {
  background: #f2c230;
  color: #1d1700;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.appt-incomplete-key {
  background: #f2c230;
  color: #1d1700;
  border-radius: 4px;
  padding: 0 0.3rem;
  font-weight: 600;
}
.incomplete-note {
  background: rgba(242, 194, 48, 0.15);
  border: 1px solid #f2c230;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
  margin: 1rem 0 0;
}
#apptDetailsSection .field-grid { align-items: end; }

/* Appointment pop-up: same width as the New Appointment form */
#appointmentModal .modal { max-width: 720px; }
#appointmentModal .field-grid { align-items: end; }
#appointmentModal .field-grid.field-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) {
  #appointmentModal .field-grid.field-grid-3 { grid-template-columns: 1fr; }
}

/* Monthly Activity Log page */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alog-page { max-width: 1320px; }
.alog-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.alog-controls .field { min-width: 9rem; }
.alog-count { font-weight: 600; margin: 0 0 0.5rem; }
.alog-scroll { overflow-x: auto; }
.alog-table { width: 100%; border-collapse: collapse; min-width: 1100px; }
.alog-table th {
  text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--muted);
  padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--panel-border); white-space: nowrap;
}
.alog-table td { padding: 0.3rem 0.3rem; vertical-align: middle; border-bottom: 1px solid var(--panel-border); }
.alog-table input, .alog-table select {
  width: 100%; box-sizing: border-box; height: 2.3rem; padding: 0.3rem 0.5rem;
  border: 1px solid var(--input-border); border-radius: 8px; font: inherit; font-size: 0.9rem;
  background: var(--input-bg); color: var(--fg);
}
.alog-table td:nth-child(1) { width: 9rem; }
.alog-table td:nth-child(2) { width: 12rem; }
.alog-table td:nth-child(3) { width: 8.5rem; }
.alog-table td:nth-child(4) { min-width: 14rem; }
.alog-table td:nth-child(5) { width: 7.75rem; }
.alog-table td:nth-child(6) { width: 5rem; }
.alog-table td:nth-child(7) { width: 6rem; }
.alog-table td:nth-child(8) { width: 7rem; }
.alog-table td:nth-child(9) { width: 4.5rem; text-align: right; }
.alog-table tr.alog-manual td:first-child { box-shadow: inset 3px 0 0 var(--btn-active); }
@media (max-width: 800px) {
  .alog-table { min-width: 0; }
  .alog-table thead { display: none; }
  .alog-table, .alog-table tbody, .alog-table tr, .alog-table td { display: block; width: 100% !important; box-sizing: border-box; }
  .alog-table tr { border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.5rem; margin-bottom: 0.75rem; }
  .alog-table td { border: none; padding: 0.2rem 0; text-align: left !important; }
  .alog-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.15rem; }
  .alog-table td[data-label=""]::before { content: none; }
}

/* Roomier page 2 (Task checklist) when there are only a couple dozen Tasks. */
.poa-cover-tasks-roomy { font-size: 0.85rem; }
.poa-cover-tasks-roomy .poa-cover-tasks-notes-heading { font-size: 0.8rem; }
.poa-cover-tasks-roomy .poa-cover-tasks-area-heading { margin-top: 0.7rem; }
.poa-cover-tasks-roomy .poa-cover-task-row { padding: 0.18rem 0; }
.poa-cover-tasks-roomy .poa-cover-task-note-line { margin: 0.18rem 0; }

/* Flight POA: "one, the other, or both" Task choices (Commercial Area V) */
.poa-flight-choices { margin: 0.4rem 0 0.6rem; display: grid; gap: 0.5rem; }
.poa-flight-choice { border: 1px solid var(--panel-border); border-radius: 6px; padding: 0.4rem 0.7rem; }
.poa-flight-choice-prompt { font-weight: 600; margin-bottom: 0.2rem; }
.poa-flight-choice-options { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.poa-flight-choice-options .poa-check-row { margin: 0; }
.poa-cover-choice-hint {
  grid-column: 1;
  font-style: italic;
  font-size: 0.9em;
  margin: 0.1rem 0 0.02rem 1.1rem;
}

/* Commercial: ~33 Tasks — between Private's dense page and Instrument's roomy one */
.poa-cover-tasks-medium { font-size: 0.74rem; }
.poa-cover-tasks-medium .poa-cover-tasks-notes-heading { font-size: 0.7rem; }
.poa-cover-tasks-medium .poa-cover-tasks-area-heading { margin-top: 0.5rem; }
.poa-cover-tasks-medium .poa-cover-task-row { padding: 0.12rem 0; }
.poa-cover-tasks-medium .poa-cover-task-note-line { margin: 0.12rem 0; }

.poa-skillref-note { margin: 0.1rem 0 0.25rem; font-style: italic; }
.poa-skillref-note p { margin: 0 0 0.15rem; }
.poa-skillref-note ul { margin: 0 0 0.15rem; padding-left: 1.1rem; }


/* Pretest evaluations (mock tests entered through New Appointment) */
.appt-chip.appt-pretest,
.appt-block.appt-pretest {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 7px, transparent 7px 14px);
  outline: 2px dashed rgba(255, 255, 255, 0.9);
  outline-offset: -3px;
}
.appt-chip.appt-pretest.appt-incomplete,
.appt-block.appt-pretest.appt-incomplete {
  outline-color: rgba(0, 0, 0, 0.55);
}
.record-badge-pretest { color: #d9b8f3; background: rgba(155, 89, 182, 0.22); margin-right: 0.35rem; }
.record-badge-converted { color: var(--muted); background: rgba(255, 255, 255, 0.08); }
.pretest-banner {
  background: rgba(155, 89, 182, 0.18);
  border: 1px solid #9b59b6;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
@media print {
  /* The Flight Plan of Action prints only its cover pages (the checklist root is hidden), so the banner above it goes too */
  .pretest-banner:has(+ #poaFlightRoot) { display: none; }
}

/* FTN next to an applicant's name on Records rows */
.record-ftn { margin-left: .5rem; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ---------------- Applicant documents (appt-docs.js) ---------------- */
.adocs { margin-top: .5rem; }
.adocs-item { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--panel-border); }
.adocs-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.adocs-type { font-weight: 600; }
.adocs-name { overflow-wrap: anywhere; }
.adocs-meta { color: var(--muted); font-size: .8rem; }
.adocs-actions { display: flex; gap: .75rem; flex-shrink: 0; }
.adocs-delete { color: var(--danger); }
.adocs-form { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.adocs-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.adocs-row .field { flex: 1 1 14rem; min-width: 0; margin: 0; }
.adocs-empty { margin: 0; }
.adocs-status { margin: .25rem 0 0; min-height: 1.1em; }
.docs-badge { margin-left: .5rem; font-size: .75rem; padding: .05rem .45rem; border: 1px solid var(--panel-border); border-radius: 999px; color: var(--muted); white-space: nowrap; }

/* ---------------- Discontinuance & reschedule (schedule.js) ---------------- */
.disc-history { margin: .25rem 0 1rem; padding: 0; list-style: none; }
.disc-history li { padding: .6rem .75rem; margin-bottom: .5rem; border: 1px solid var(--panel-border); border-left: 3px solid var(--amber); border-radius: 6px; background: var(--amber-bg); }
.disc-history .disc-when { font-weight: 600; }
.disc-history .disc-line { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.disc-history .disc-label { color: var(--muted); font-size: .8rem; display: block; }
.disc-flag { color: var(--amber); font-weight: 600; margin: .25rem 0; }

/* ---------------- Public Resources page (resources.html) ---------------- */
.res-acs { margin-bottom: 1rem; }
.res-acs h2 { margin-top: 0; }
.res-cat { margin: 1.5rem 0 0.6rem; font-size: 0.95rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.res-row { align-items: flex-start; }
.res-main { flex: 1 1 260px; min-width: 0; }
.res-title { font-weight: 600; font-size: 0.98rem; overflow-wrap: anywhere; }
.res-desc { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.res-meta { color: var(--muted); font-size: 0.78rem; margin-top: 0.25rem; }
.res-search { margin-bottom: 1rem; }



/* Student lessons (scheduled in the CFI console) on the DPE calendar: burnt orange, so they never read as a checkride. */
.lesson-block, .lesson-chip { background: #b4572f; color: #fff; }
.lesson-block { border: 1px solid #e08a5f; text-align: left; cursor: pointer; }
.lesson-block:hover, .lesson-chip:hover { background: #c9663a; }
.lesson-done { opacity: 0.55; }

/* Drag and drop of student lessons */
.lesson-block, .lesson-chip { cursor: grab; user-select: none; -webkit-user-select: none; }
body.lesson-dragging, body.lesson-dragging * { cursor: grabbing !important; user-select: none; }
.lesson-drag-ghost { position: fixed; z-index: 3000; pointer-events: none; padding: 0.25rem 0.55rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; background: #b4572f; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.45); white-space: nowrap; }
.lesson-drop-preview { background: rgba(180, 87, 47, 0.45); border: 2px dashed #e08a5f; color: #fff; font-size: 0.7rem; pointer-events: none; z-index: 5; }
.month-drop-target { outline: 2px dashed #e08a5f; outline-offset: -2px; }
.student-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.student-chip { padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid #e08a5f; background: rgba(180, 87, 47, 0.18); color: var(--fg); font-size: 0.85rem; cursor: grab; user-select: none; -webkit-user-select: none; }
.student-chip:hover { background: rgba(180, 87, 47, 0.32); }

/* ---- Schedule: prominent toolbar + current-day highlight ---------------- */

:root {
  --today: #3bd0ff;
  --today-bg: rgba(59, 208, 255, 0.13);
  --today-ink: #04222c;
  --now-line: #ff3b3b;
}

/* Compact page header on the schedule pages: back link + title on one line. */
.site-header-compact {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem 0;
  text-align: left;
}
.site-header-compact p { margin: 0; }
.site-header-compact h1 { margin: 0; font-size: 1.3rem; }
.schedule-page { padding-top: 0.6rem; }

.schedule-toolbar {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.9rem;
  flex-wrap: nowrap;
}

/* Raised, tactile button — same family as the home-screen option cards. */
.sched-btn {
  --sb-depth: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 38px;
  padding: 0.3rem 0.8rem;
  margin: 0 0 var(--sb-depth);
  background: var(--btn-bg);
  color: var(--fg);
  border: 2px solid var(--fg);
  border-radius: 10px;
  box-shadow: 0 var(--sb-depth) 0 0 #8a8a8a;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, transform 0.08s, box-shadow 0.08s;
}
.sched-btn:hover { background: var(--btn-hover); }
.sched-btn:active {
  transform: translateY(var(--sb-depth));
  box-shadow: 0 0 0 0 #8a8a8a;
}
.sched-btn:focus-visible { outline: 3px solid var(--today); outline-offset: 3px; }

.sched-btn-arrow { min-width: 42px; padding: 0.3rem 0.6rem; font-size: 1.25rem; line-height: 1; }

.sched-btn-today {
  background: var(--today);
  border-color: var(--today);
  color: var(--today-ink);
  box-shadow: 0 var(--sb-depth) 0 0 #168aa8;
  padding: 0.3rem 1rem;
}
.sched-btn-today:hover { background: #7fe2ff; }

.sched-btn-primary {
  background: var(--btn-active);
  border-color: #8fc1ff;
  color: #fff;
  box-shadow: 0 var(--sb-depth) 0 0 #17407a;
}
.sched-btn-primary:hover { background: #3d82d6; }

.schedule-nav { gap: 0.4rem; flex-wrap: nowrap; }
.schedule-range-label {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 9.5rem;
  white-space: nowrap;
  margin: 0 0 var(--sb-depth, 3px) 0.3rem;
}

/* View toggle: a single segmented control, active segment unmistakable. */
.view-toggle {
  gap: 0;
  border: 2px solid var(--fg);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 3px;
}
.view-toggle-btn {
  border: none;
  border-radius: 0;
  background: var(--btn-bg);
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.view-toggle-btn + .view-toggle-btn { border-left: 2px solid var(--fg); }
.view-toggle-btn:hover { background: var(--btn-hover); }
.view-toggle-btn-active,
.view-toggle-btn-active:hover {
  background: var(--btn-active);
  color: #fff;
  box-shadow: inset 0 -3px 0 0 var(--today);
}

/* Narrower screens: allow the toolbar to wrap. */
@media (max-width: 1000px) {
  .schedule-toolbar { flex-wrap: wrap; }
  .schedule-nav { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .schedule-toolbar { padding: 0.5rem; }
  .sched-btn { min-height: 44px; }
  .schedule-range-label { flex-basis: 100%; margin-left: 0; }
  .schedule-toolbar > .sched-btn { flex: 1 1 140px; }
  .site-header-compact { padding-top: 0.5rem; gap: 0.75rem; }
}

/* ---- Today ---- */

/* Month cell: ring drawn with an inset shadow so the cell content does not shift. */
.month-day-today,
.month-day-today.month-day-outside {
  opacity: 1;
  background: var(--today-bg);
  box-shadow: inset 0 0 0 2px var(--today), 0 0 12px rgba(59, 208, 255, 0.3);
  position: relative;
  z-index: 1;
}
.month-day-today:hover { background: rgba(59, 208, 255, 0.2); }
/* Number pill is the same size/position as every other date number. */
.month-day-today .month-day-number {
  align-self: flex-start;
  margin-left: -0.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--today);
  color: var(--today-ink);
  font-weight: 800;
}

/* Week / day columns: header keeps the same size/position as the others. */
.time-grid-col-header-today {
  color: var(--today-ink);
  background: var(--today);
  border-radius: 4px 4px 0 0;
  font-weight: 800;
}
.time-grid-col-today .time-grid-col-body {
  background: linear-gradient(var(--today-bg), var(--today-bg)), var(--panel-bg);
  border-color: var(--today);
  box-shadow: 0 0 0 1px var(--today);
}

/* Current-time marker */
.time-grid-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--now-line);
  pointer-events: none;
  z-index: 6;
}
.time-grid-now::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--now-line);
}

/* ---- Oral Exam Script (poa.html) ---------------------------------------- */
.poa-script-summary { font-weight: 600; margin: 0.75rem 0 0.5rem; }
.poa-script-scenario { margin: 0 0 0.75rem; }
.poa-script-scenario summary { cursor: pointer; font-weight: 600; }
.poa-script-scenario-text { white-space: pre-wrap; font: inherit; font-size: 0.9rem; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.4rem 0 0; }
.poa-script-area { margin: 1.25rem 0 0.2rem; font-size: 1.1rem; border-bottom: 2px solid var(--panel-border); padding-bottom: 0.25rem; }
.poa-script-intro { margin: 0.3rem 0 0.4rem; font-style: italic; color: var(--muted); }
.poa-script-task { margin: 0.9rem 0 0.25rem; font-size: 0.98rem; color: var(--fg); }
.poa-script-row { border-left: 4px solid var(--panel-border); background: rgba(255, 255, 255, 0.03); border-radius: 0 8px 8px 0; padding: 0.45rem 0.7rem 0.55rem; margin: 0.35rem 0; break-inside: avoid; }
.poa-script-row.poa-krs-k { border-left-color: #5b9bd5; }
.poa-script-row.poa-krs-r { border-left-color: #e0a63b; }
.poa-script-row.poa-krs-s { border-left-color: #4fb07a; }
.poa-script-row.poa-script-done { opacity: 0.6; }
.poa-script-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.poa-script-kind { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.poa-script-auto { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--panel-border); border-radius: 999px; padding: 0 0.4rem; }
.poa-script-elem { margin: 0.25rem 0 0.3rem; font-size: 0.8rem; color: var(--muted); }
.poa-script-q { margin: 0.2rem 0; font-size: 1rem; line-height: 1.4; }
.poa-script-look { margin: 0.2rem 0; font-size: 0.85rem; color: var(--muted); }
.poa-script-row textarea { width: 100%; font: inherit; }
.poa-script-edit { margin-top: 0.2rem; font-size: 0.8rem; }
@media print {
  .poa-script-row { background: none; opacity: 1 !important; }
}

/* ---- Records: statuses, tabs, close-out ---------------------------------- */
.records-tabs { display: flex; gap: 0.4rem; margin: 0 0 0.75rem; }
.records-tab { background: var(--input-bg); color: var(--fg); border: 2px solid var(--panel-border); border-radius: 10px; padding: 0.45rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; }
.records-tab:hover { background: var(--btn-hover); }
.records-tab-active { background: var(--btn-active); border-color: var(--btn-active); color: #fff; }
.records-tab-count { font-weight: 400; opacity: 0.85; }
.records-action-banner { margin: 0 0 0.75rem; padding: 0.55rem 0.9rem; border-radius: 10px; border: 1px solid var(--danger); background: var(--danger-bg); color: var(--fg); font-weight: 600; }
.record-row-attention { border-left: 4px solid var(--danger); }
.record-row-need { margin-top: 0.35rem; font-size: 0.85rem; color: var(--danger); }
.record-row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; align-items: center; }
.record-row-actions .btn-secondary { margin: 0; }
.record-row-actions .btn-link { margin-top: 0; }
.record-badge-requires-action { color: #fff; background: #c0392b; }
.record-badge-discontinued { color: #ffc785; background: rgba(230, 126, 34, 0.22); }
.record-badge-failed { color: #ffb0b0; background: rgba(231, 76, 60, 0.22); }
.record-badge-closed { color: #cfd8e3; background: rgba(120, 144, 170, 0.25); }
.record-badge-archived { color: var(--muted); background: rgba(255, 255, 255, 0.08); }
.record-badge-retest { color: #9fe3c0; background: rgba(46, 204, 113, 0.18); }
.rec-status-line { margin: 0.25rem 0; }
.rec-status-line .disc-label { display: inline-block; min-width: 13rem; margin-right: 0.5rem; color: var(--muted); }
.rec-status-warn { color: var(--danger); }
.rec-status-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; align-items: center; margin-top: 0.6rem; }
.rec-status-actions .btn-secondary { margin: 0; }
.rec-status-actions .btn-link { margin-top: 0; }