/* MAR Charts (client_code/main/mar_charts_html). Every rule is scoped
   :where(.mar-charts), the form's private root class, which adds no
   specificity. @keyframes mar-ch-spin is private to this form, because
   keyframe names are global.

   Designer gate: the first-paint loading overlay shows only under
   .mar-charts.mar-live, the class the module adds at init. The designer runs
   no Python, so the overlay never covers the canvas.

   The classes at the end of this file style single elements. Two of them
   must win against other rules:
   - the two dialog submit buttons also carry .mar-generate-btn, so their
     rule is the compound .mar-generate-btn.mar-dialog-submit, and the
     details Save button's min-height: 0 is keyed on its id;
   - the one-off date labels' secondary colour would lose to the id rule
     #mar-one-off-dialog label:not(...), which skips .mar-oo-date-label.
*/
  /* ================================================================
     PHASE-6A HOST CHROME ONLY. The medication rows / patient cards /
     pattern editor / third-party + photo modals are the shared dep
     components (PX_shared_dependencies.mar_editor); their CSS ships
     inside the dep templates + the bridge-injected pxm-shared-css
     block. This template styles ONLY host chrome: header, toolbar,
     generate bar, one-off dialog, details strip, loading overlay.
     ================================================================ */
  :where(.mar-charts) .mar-container {
    padding: var(--ch-space-lg);
    font-family: var(--ch-font-primary);
    background: var(--ch-bg-primary);
    min-height: 100vh;
  }
  :where(.mar-charts) .mar-empty-state { text-align: center; padding: 60px var(--ch-space-lg); color: var(--ch-text-muted); font-size: 16px; }
  :where(.mar-charts) .mar-generate-btn {
    padding: 10px 28px; font-size: 14px; font-weight: 600; font-family: var(--ch-font-primary);
    background: var(--ch-accent-primary); color: var(--ch-text-inverse); border: none;
    border-radius: var(--ch-radius-md); cursor: pointer; transition: background var(--ch-transition-fast); min-height: 44px;
  }
  :where(.mar-charts) .mar-generate-btn:hover { background: var(--ch-accent-primary-hover); }
  :where(.mar-charts) .mar-generate-btn:disabled { background: var(--ch-bg-elevated); color: var(--ch-text-muted); opacity: 1; cursor: not-allowed; }
  /* Generate-chain length/start invalid state — fires when the user clicks
     Generate Sheets with Length out of 1-31 or Start missing. Matches
     the dose-input red-box pattern used in the medication row component. */
  :where(.mar-charts) #mar-length-days.invalid,
:where(.mar-charts) #mar-start-date.invalid { border: 2px solid var(--ch-danger); background: var(--ch-danger-bg); }
  /* RS30 reuses the hub's existing validity/approval red-box class and
     the dep's existing field markers.  No approval state participates
     on this portal surface. */
  :where(.mar-charts) #mar-patient-list-slot [data-field-name="sent_quantity"].ca-approval-invalid,
:where(.mar-charts) #mar-patient-list-slot [data-field-name="converted_instruction"].ca-approval-invalid,
:where(.mar-charts) #mar-patient-list-slot .mar-schedule-row.ca-approval-invalid {
    border: 2px solid #dc2626 !important;
    background: #fef2f2 !important;
    color: #7f1d1d;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
  }
  :where(.mar-charts) #mar-patient-list-slot .mar-pc-host-tick.ca-approval-invalid,
:where(.mar-charts) #mar-patient-list-slot .pxm-pc-tickall.ca-approval-invalid,
:where(.mar-charts) #mar-patient-list-slot [data-med-check].ca-approval-invalid,
:where(.mar-charts) #mar-patient-list-slot .mar-flag-badge input.ca-approval-invalid {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #fef2f2;
  }
  :where(.mar-charts) .mar-loading {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--ch-bg-overlay); display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: var(--ch-z-overlay);
    opacity: 0; visibility: hidden;
    transition: opacity var(--ch-transition-normal), visibility var(--ch-transition-normal);
  }
  :where(.mar-charts.mar-live) .mar-loading.visible { opacity: 1; visibility: visible; }
  :where(.mar-charts) .mar-spinner {
    width: 48px; height: 48px; border: 4px solid var(--ch-border); border-top-color: var(--ch-accent-primary);
    border-radius: 50%; animation: mar-ch-spin 1s linear infinite;
  }
  @keyframes mar-ch-spin { to { transform: rotate(360deg); } }
  :where(.mar-charts) .mar-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px; padding: var(--ch-space-sm) var(--ch-space-md);
    background: var(--ch-bg-card); border-radius: var(--ch-radius-md); box-shadow: var(--ch-shadow-sm);
  }
  :where(.mar-charts) .mar-search-input {
    padding: 6px 10px; border: 1.5px solid #aaa; border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-input); color: var(--ch-text-primary);
    font-family: var(--ch-font-primary); font-size: 13px; min-width: 240px; flex: 1; max-width: 320px;
  }
  :where(.mar-charts) .mar-search-input:focus { border-color: var(--ch-border-focus); box-shadow: 0 0 0 3px var(--ch-focus-shadow); outline: none; }
  :where(.mar-charts) .mar-toolbar-btn {
    padding: 6px 12px; border-radius: var(--ch-radius-sm); font-size: 0.78rem; cursor: pointer;
    border: 1.5px solid #aaa; color: var(--ch-text-secondary); background: var(--ch-bg-card);
    font-family: var(--ch-font-primary);
  }
  :where(.mar-charts) .mar-toolbar-btn:hover { border-color: var(--ch-accent-primary); color: var(--ch-accent-primary-text); }
  :where(.mar-charts) .mar-toolbar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  :where(.mar-charts) .mar-toolbar-btn[aria-pressed="true"] { border-color: var(--ch-accent-primary); background: var(--ch-accent-primary); color: var(--ch-text-inverse); }
  :where(.mar-charts) .mar-filter-toggle {
    padding: 6px 16px; font-size: 13px; font-family: var(--ch-font-primary);
    background: var(--ch-accent-secondary); color: var(--ch-accent-primary-text);
    border: 1px solid transparent; border-radius: var(--ch-radius-full); cursor: pointer;
  }
  :where(.mar-charts) .mar-filter-toggle.active { background: var(--ch-accent-primary); color: var(--ch-text-inverse); }
  :where(.mar-charts) .mar-generate-bar {
    position: sticky; bottom: 0; background: var(--ch-bg-card); border-top: 1px solid var(--ch-border);
    padding: 10px var(--ch-space-md); display: flex; align-items: center; gap: 12px; z-index: 10;
    border-radius: 0 0 var(--ch-radius-lg) var(--ch-radius-lg); flex-wrap: wrap;
  }
  :where(.mar-charts) .mar-gen-date-group { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ch-text-secondary); }
  :where(.mar-charts) .mar-gen-date-group input[type="date"] {
    padding: 4px 8px; border: 1.5px solid #aaa; border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-input); color: var(--ch-text-primary);
    font-family: var(--ch-font-primary); font-size: 12px;
  }
  :where(.mar-charts) .mar-gen-date-group input[type="date"]:focus { border-color: var(--ch-border-focus); outline: none; }
  :where(.mar-charts) .mar-gen-date-group input[type="number"] {
    width: 50px; padding: 4px 6px; border: 1.5px solid #aaa; border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-input); color: var(--ch-text-primary);
    font-family: var(--ch-font-primary); font-size: 12px; text-align: center;
  }
  :where(.mar-charts) .mar-today-btn {
    padding: 3px 8px; border: 1.5px solid #aaa; border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-card); color: var(--ch-text-secondary); cursor: pointer;
    font-size: 0.72rem; font-family: var(--ch-font-primary);
  }
  :where(.mar-charts) .mar-today-btn:hover { border-color: var(--ch-accent-primary); color: var(--ch-accent-primary-text); }
  :where(.mar-charts) .mar-today-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  :where(.mar-charts) .mar-today-btn:disabled:hover { border-color: #aaa; color: var(--ch-text-secondary); }
  :where(.mar-charts) .mar-gen-spacer { flex: 1; }
  :where(.mar-charts) .mar-gen-count { font-size: 0.78rem; color: var(--ch-text-secondary); white-space: nowrap; }
  :where(.mar-charts) .mar-sheet-options { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  :where(.mar-charts) .mar-sheet-option {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    color: var(--ch-text-primary); font-size: 0.78rem; font-weight: 500;
    white-space: nowrap;
  }
  :where(.mar-charts) .mar-sheet-option input {
    width: 17px; height: 17px; margin: 0; accent-color: var(--ch-accent-primary);
  }
  /* Print-order picker: lives INSIDE .mar-sheet-options so the mobile
     order/collapse rules for that group apply to it too. Sized to match
     the generate-bar inputs. */
  :where(.mar-charts) .mar-print-order-select {
    padding: 4px 6px; border: 1.5px solid #aaa; border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-input); color: var(--ch-text-primary);
    font-family: var(--ch-font-primary); font-size: 0.78rem; max-width: 140px;
  }
  :where(.mar-charts) .mar-print-order-select:focus { border-color: var(--ch-border-focus); outline: none; }
  /* Filtered-scope hint: own full-width line at the top of the generate
     bar (the bar wraps), shown only while a patient search or the
     needs-review filter is active. */
  :where(.mar-charts) .mar-filter-hint {
    flex-basis: 100%;
    font-size: 0.72rem;
    font-family: var(--ch-font-primary);
    color: var(--px-warning);
    text-align: right;
  }
  /* Persisted stops are display-only in the portal. _stamp_item feeds a
     dated, neutral badge through the dep's documented flag contract. */
  :where(.mar-charts) #mar-patient-list-slot .mar-flag-persisted-stop {
    background: var(--ch-bg-secondary);
    color: var(--ch-text-secondary);
    border-color: var(--ch-border);
    pointer-events: none;
    cursor: default;
    text-transform: none;
  }
  :where(.mar-charts) #mar-patient-list-slot .mar-flag-persisted-stop input { display: none; }
  /* Stop-button visibility for persisted stops is dep-owned render state
     now: the host stamps per-row stop_control ('hidden' | 'unstop') in
     _ensure_persisted_stop_marker and med_rows_editor renders (or omits)
     its own button — no CSS reach-in to the dep's DOM. */
  /* Mobile-only collapse toggle for the generate bar (hidden on desktop) */
  :where(.mar-charts) .mar-gen-toggle { display: none; }
  :where(.mar-charts) .mar-discard-draft-btn {
    padding: 6px 14px; border: 1.5px solid var(--ch-border); border-radius: var(--ch-radius-md);
    background: transparent; color: var(--ch-text-secondary); cursor: pointer;
    font-size: 0.78rem; font-weight: 600; font-family: var(--ch-font-primary); min-height: 36px;
  }
  :where(.mar-charts) .mar-discard-draft-btn:hover { border-color: var(--ch-danger); color: var(--ch-danger); }
  /* ONE class set for both host choice dialogs (cycle-switch + confirm).
     The destructive/primary rules keep their attribute selectors: the choice
     TOKEN differs per dialog, the styling it earns does not. */
  :where(.mar-charts) .mar-dialog {
    max-width: 520px; width: calc(100% - 32px); box-sizing: border-box;
    border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg);
    padding: var(--ch-space-lg); font-family: var(--ch-font-primary);
    background: var(--ch-bg-card); color: var(--ch-text-primary);
    box-shadow: var(--ch-shadow-lg);
  }
  :where(.mar-charts) .mar-dialog::backdrop { background: var(--ch-bg-overlay); }
  :where(.mar-charts) .mar-dialog-actions {
    display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    margin-top: var(--ch-space-lg);
  }
  :where(.mar-charts) .mar-dialog-action {
    min-height: 44px; padding: 8px 16px; cursor: pointer;
    border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md);
    background: transparent; color: var(--ch-text-primary);
    font-family: var(--ch-font-primary); font-size: 13px; font-weight: 600;
  }
  :where(.mar-charts) .mar-dialog-action:hover { border-color: var(--ch-accent-primary); }
  :where(.mar-charts) .mar-history-dialog { max-width: 820px; }
  :where(.mar-charts) .mar-history-scroll { overflow-x: auto; }
  :where(.mar-charts) .mar-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  :where(.mar-charts) .mar-history-table th,
:where(.mar-charts) .mar-history-table td {
    padding: 9px 10px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--ch-border);
  }
  :where(.mar-charts) .mar-history-table th { color: var(--ch-text-secondary); font-weight: 600; }
  :where(.mar-charts) .mar-history-empty { margin: var(--ch-space-lg) 0 0; color: var(--ch-text-muted); }
  :where(.mar-charts) .mar-dialog-action[data-cycle-switch-choice="discard"],
:where(.mar-charts) .mar-dialog-action[data-confirm-choice="confirm"] {
    border-color: var(--ch-danger); color: var(--ch-danger);
  }
  :where(.mar-charts) .mar-dialog-action[data-cycle-switch-choice="save"] {
    border-color: var(--ch-accent-primary); background: var(--ch-accent-primary);
    color: var(--ch-text-inverse);
  }
  :where(.mar-charts) .oneoff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }

  /* One-off + details dialogs: text inputs follow light/dark theme. */
  :where(.mar-charts) #mar-one-off-dialog .mar-edit-input,
:where(.mar-charts) #mar-details-dialog .mar-edit-input {
    width: 100%; box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-md);
    background: var(--ch-bg-input);
    color: var(--ch-text-primary);
    font-family: var(--ch-font-primary);
    font-size: 13px;
  }
  :where(.mar-charts) #mar-one-off-dialog .mar-edit-input:focus,
:where(.mar-charts) #mar-details-dialog .mar-edit-input:focus { border-color: var(--ch-border-focus); outline: none; }
  :where(.mar-charts) #mar-one-off-dialog label:not(.mar-flag-badge):not(.mar-prn-chip):not(.mar-rt-chip-label):not(.mar-oo-date-label),
:where(.mar-charts) #mar-details-dialog label,
:where(.mar-charts) #mar-one-off-dialog h4 { color: var(--ch-text-primary); }

  /* One-off dialog: field validation */
  :where(.mar-charts) #mar-one-off-dialog input.invalid,
:where(.mar-charts) #mar-one-off-dialog textarea.invalid { border: 2px solid var(--ch-danger) !important; background: var(--ch-danger-bg) !important; }
  :where(.mar-charts) #mar-one-off-dialog .mar-schedule-row.invalid { outline: 2px solid var(--ch-danger); border-radius: 4px; }
  :where(.mar-charts) .oo-field-error {
    display: block; color: var(--ch-danger); font-size: 0.72rem; margin-top: 2px;
    line-height: 1.2; font-weight: 500;
  }

  /* Host patient-selection tick layered onto the dep patient cards
     (contract §5.3: selection stays host-side — the dep defines no
     selection API). Injected as the first child of each card summary. */
  :where(.mar-charts) .mar-pc-host-tick {
    width: 18px; height: 18px; flex-shrink: 0; margin-right: 6px;
    accent-color: var(--ch-accent-primary); cursor: pointer;
  }

  /* Host "Edit resident details" strip (dep patient_cards renders
     details READ-ONLY — contract §5.3; interim host editor, OPEN-Q1). */
  :where(.mar-charts) .mar-details-strip {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px; padding: var(--ch-space-sm) var(--ch-space-md);
    background: var(--ch-bg-card); border-radius: var(--ch-radius-md); box-shadow: var(--ch-shadow-sm);
    font-family: var(--ch-font-primary); font-size: 0.82rem; color: var(--ch-text-secondary);
  }
  :where(.mar-charts) .mar-details-strip select {
    padding: 6px 10px; border: 1.5px solid #aaa; border-radius: var(--ch-radius-sm);
    background: var(--ch-bg-input); color: var(--ch-text-primary);
    font-family: var(--ch-font-primary); font-size: 13px; min-width: 220px;
  }

  /* One-off entry card. */
  :where(.mar-charts) .mar-one-off-card {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    margin-top: 12px; padding: var(--ch-space-md);
    background: var(--ch-bg-card); border: 1.5px dashed var(--ch-border);
    border-radius: var(--ch-radius-md);
  }
  :where(.mar-charts) .mar-one-off-card:hover { border-color: var(--ch-accent-primary); background: var(--ch-bg-elevated); }
  :where(.mar-charts) .mar-one-off-icon { font-size: 20px; color: var(--ch-accent-secondary); flex-shrink: 0; }
  :where(.mar-charts) .mar-one-off-text { flex: 1; }
  :where(.mar-charts) .mar-one-off-title { font-weight: 500; font-size: 14px; color: var(--ch-text-primary); }
  :where(.mar-charts) .mar-one-off-desc { font-size: 12px; color: var(--ch-text-muted); margin-top: 2px; }

  @media (max-width: 768px) {
    :where(.mar-charts) .mar-container {
      --mar-bottom-nav-offset: calc(80px + env(safe-area-inset-bottom, 0px));
      --mar-generate-mobile-gap: 8px;
      /* The print-order picker wraps .mar-sheet-options onto a second
         line at narrow widths (measured: +38px at 320px and 360px in
         BOTH states), so both reserves grew by that row — the fixed bar
         must never sit over the last card. */
      /* Pre-observation fallback only: marObserveGenBarReserve() rewrites
         this var from the bar's actual rendered height, so wrap/collapse/
         content changes never need a re-measured constant here. */
      --mar-generate-mobile-space: 246px;
      padding: var(--ch-space-sm);
      padding-bottom: calc(var(--ch-space-sm) + var(--mar-bottom-nav-offset) + var(--mar-generate-mobile-space));
    }
    :where(.mar-charts) .oneoff-grid { grid-template-columns: 1fr; }
    :where(.mar-charts) .mar-toolbar { flex-direction: column; align-items: stretch; }
    :where(.mar-charts) .mar-search-input { min-width: auto; max-width: none; }
    :where(.mar-charts) .mar-generate-bar {
      position: fixed;
      left: var(--ch-space-sm);
      right: var(--ch-space-sm);
      bottom: calc(var(--mar-bottom-nav-offset) + var(--mar-generate-mobile-gap));
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--ch-border);
      border-radius: var(--ch-radius-lg);
      box-shadow: var(--ch-shadow-lg);
    }
    /* toggle (~20%) + Generate (~80%) share the top row; controls wrap below when expanded.
       Scoped to the dock so it does NOT restyle the one-off dialog's
       .mar-generate-btn (same class) on mobile. */
    :where(.mar-charts) #mar-generate-bar > .mar-generate-btn { order: -1; flex: 1 1 auto; width: auto; }
    :where(.mar-charts) .mar-filter-hint { order: -4; text-align: left; }
    :where(.mar-charts) .mar-sheet-options { order: -3; flex: 1 0 100%; justify-content: center; }
    :where(.mar-charts) .mar-gen-spacer { display: none; }
    :where(.mar-charts) .mar-gen-toggle {
      display: flex; align-items: center; justify-content: center; gap: 4px; order: -2;
      flex: 0 0 20%; padding: 7px 4px; border: 1px solid var(--ch-border);
      border-radius: var(--ch-radius-sm); background: var(--ch-bg-card);
      color: var(--ch-text-secondary); font-size: 0.68rem; cursor: pointer; white-space: nowrap;
    }
    :where(.mar-charts) .mar-gen-toggle-chevron { transition: transform 0.15s ease; font-size: 0.7rem; line-height: 1; }
    :where(.mar-charts) .mar-generate-bar:not(.mar-gen-collapsed) .mar-gen-toggle-chevron { transform: rotate(180deg); }
    :where(.mar-charts) .mar-generate-bar.mar-gen-collapsed > .mar-gen-date-group,
:where(.mar-charts) .mar-generate-bar.mar-gen-collapsed > .mar-discard-draft-btn,
:where(.mar-charts) .mar-generate-bar.mar-gen-collapsed > .mar-gen-count { display: none; }
  }
  /* ---- Header (absorbed mar_header_html) ---- */
  :where(.mar-charts) .mar-header { text-align: center; margin-bottom: var(--ch-space-sm); }
  :where(.mar-charts) .mar-title { font-size: 28px; font-weight: 600; color: var(--ch-text-primary); margin: 0 0 4px 0; }
  :where(.mar-charts) .mar-controls {
    display: flex; gap: var(--ch-space-md); align-items: flex-end; flex-wrap: wrap;
    margin-bottom: var(--ch-space-lg); padding: var(--ch-space-md);
    background: var(--ch-bg-card); border-radius: var(--ch-radius-lg); box-shadow: var(--ch-shadow-sm);
  }
  :where(.mar-charts) .mar-control-group { display: flex; flex-direction: column; gap: 4px; }
  :where(.mar-charts) .mar-control-group label {
    font-size: 12px; font-weight: 500; color: var(--ch-text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  :where(.mar-charts) .mar-select {
    padding: 10px 14px; font-size: 14px; font-family: var(--ch-font-primary);
    color: var(--ch-text-primary); background: var(--ch-bg-input);
    border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md); outline: none; min-width: 180px;
  }
  :where(.mar-charts) .mar-select:focus {
    border-color: var(--ch-border-focus); box-shadow: 0 0 0 3px var(--ch-focus-shadow);
  }
  @media (max-width: 768px) {
    :where(.mar-charts) .mar-controls { flex-direction: column; align-items: stretch; }
    :where(.mar-charts) .mar-select { min-width: auto; }
  }
  /* Cycle toggle — centered segmented control. */
  :where(.mar-charts) #mar-cycle-tabs-root.mar-cycle-tabs {
    width: fit-content;
    margin: 8px auto var(--ch-space-md);
    gap: 4px;
    background: var(--ch-bg-subtle);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--ch-border);
    box-shadow: var(--ch-shadow-sm);
  }
  :where(.mar-charts) #mar-cycle-tabs-root.mar-cycle-tabs:not([hidden]) { display: flex; }
  :where(.mar-charts) #mar-cycle-tabs-root [role="tab"] {
    font-family: var(--ch-font-primary);
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--ch-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }
  :where(.mar-charts) #mar-cycle-tabs-root [role="tab"]:hover:not(.active) { background: var(--ch-bg-hover); }
  :where(.mar-charts) #mar-cycle-tabs-root [role="tab"].active {
    background: var(--ch-bg-card);
    color: var(--ch-accent-primary-text);
    box-shadow: var(--ch-shadow-md);
  }
  :where(.mar-charts) .mar-cycle-tabs .mar-cycle-range {
    font-size: 11px;
    font-weight: 400;
    color: var(--ch-text-muted);
    margin-left: 8px;
  }
  :where(.mar-charts) .mar-cycle-tabs [role="tab"].active .mar-cycle-range { color: var(--ch-accent-primary-text); opacity: 0.8; }
  /* Persistent previous-cycle indicator strip (informational). */
  :where(.mar-charts) .mar-retro-banner {
    background: var(--ch-bg-subtle);
    color: var(--ch-text-secondary);
    padding: 8px 14px;
    border-left: 3px solid var(--ch-accent-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ch-font-primary);
    margin-bottom: var(--ch-space-md);
  }
  /* U1 refusal banner (approved variant B). One left-accent strip, a
     title line and one line of detail, in the same idiom as the retro
     banner above so a refusal reads as part of the page rather than as a
     toast that has already gone. A toast is wrong for this class: the
     operator has to ACT on it, and the next step must still be on screen
     while they do.

     The accent carries the severity and nothing else does: red is
     `blocked` (this press cannot succeed as it stands), amber is `retry`
     (the page is out of date — refresh and press again). */
  /* Decision 13 — the dormant-resident tag. Quiet by design: it explains
     an empty card, it is not a warning. */
  :where(.mar-charts) .mar-pc-dormant-tag {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--ch-bg-subtle);
    border: 1px solid var(--ch-border);
    color: var(--ch-text-secondary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  /* MAR jobs: a stale card's way out of its lock. */
  :where(.mar-charts) .mar-pc-stale-refresh {
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 9px;
    background: var(--ch-bg-subtle);
    border: 1px solid var(--ch-accent-primary);
    color: var(--ch-accent-primary-text);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  :where(.mar-charts) .mar-refusal-banner {
    background: var(--ch-bg-subtle);
    color: var(--ch-text-primary);
    padding: 10px 14px;
    border-left: 4px solid var(--px-danger, #b91c1c);
    font-size: 13px;
    font-family: var(--ch-font-primary);
    margin-bottom: var(--ch-space-md);
  }
  :where(.mar-charts) .mar-refusal-banner[data-severity="retry"] {
    border-left-color: var(--px-warning, #b45309);
  }
  :where(.mar-charts) .mar-refusal-title {
    white-space: pre-line;
    font-weight: 700;
    margin-bottom: 2px;
  }
  :where(.mar-charts) .mar-refusal-detail {
    color: var(--ch-text-secondary);
  }
  :where(.mar-charts) .mar-refusal-next {
    margin-top: 4px;
    font-weight: 600;
  }
  /* "Name them to the home" — the untimed-medicine note. Deliberately
     NOT the refusal strip: nothing here blocks a press, so it must not
     look like the thing that does. No left accent bar, a plain hairline
     box, ordinary text weight, and it sits BELOW the refusal strip so a
     real refusal always reads first. */
  :where(.mar-charts) .mar-untimed-note {
    background: var(--ch-bg-card);
    color: var(--ch-text-secondary);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--ch-font-primary);
    margin-bottom: var(--ch-space-md);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  :where(.mar-charts) .mar-untimed-note-text { flex: 1 1 320px; }
  :where(.mar-charts) .mar-untimed-note-names { color: var(--ch-text-primary); }
  :where(.mar-charts) #mar-untimed-note-show {
    padding: 4px 12px; font-size: 12px; font-family: var(--ch-font-primary);
    background: var(--ch-bg-subtle); color: var(--ch-text-primary);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-full); cursor: pointer;
    white-space: nowrap;
  }

  /* ---- Single-element styles (template classes) ---- */
  :where(.mar-charts) .mar-toolbar-spacer { flex: 1; }
  :where(.mar-charts) .mar-dialog-title { margin: 0 0 8px; font-size: 16px; }
  :where(.mar-charts) .mar-dialog-message { margin: 0; color: var(--ch-text-secondary); font-size: 13px; line-height: 1.5; }
  :where(.mar-charts) .mar-oo-dialog { max-width: 600px; width: 90%; border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg); padding: var(--ch-space-lg); font-family: var(--ch-font-primary); background: var(--ch-bg-card); }
  :where(.mar-charts) .mar-oo-title { margin: 0 0 12px; font-size: 16px; color: var(--ch-text-primary); }
  :where(.mar-charts) .mar-oo-intro { font-size: 12px; color: var(--ch-text-muted); margin: 0 0 12px; }
  :where(.mar-charts) .mar-field-label { font-size: 12px; }
  :where(.mar-charts) .mar-oo-heading { margin: 0 0 8px; font-size: 14px; }
  :where(.mar-charts) .mar-oo-meds-list { margin-bottom: 8px; }
  :where(.mar-charts) .mar-oo-add-med { font-size: 12px; padding: 4px 12px; cursor: pointer; border: 1px dashed var(--ch-border); background: transparent; border-radius: var(--ch-radius-sm); color: var(--ch-text-secondary); margin-bottom: 12px; }
  :where(.mar-charts) .mar-oo-dates { display: flex; gap: var(--ch-space-sm); flex-wrap: wrap; margin-bottom: 12px; }
  :where(.mar-charts) .mar-oo-date-field { display: flex; flex-direction: column; gap: 4px; }
  :where(.mar-charts) .mar-oo-date-label { font-size: 12px; font-weight: 500; color: var(--ch-text-secondary); }
  :where(.mar-charts) .mar-oo-date-input { padding: 8px 12px; border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md); font-family: var(--ch-font-primary); background: var(--ch-bg-input); color: var(--ch-text-primary); }
  :where(.mar-charts) .mar-dialog-footer { display: flex; gap: 8px; justify-content: flex-end; }
  :where(.mar-charts) .mar-dialog-cancel { padding: 8px 16px; font-size: 13px; cursor: pointer; border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md); background: transparent; color: var(--ch-text-primary); }
  :where(.mar-charts) .mar-generate-btn.mar-dialog-submit { font-size: 13px; padding: 8px 20px; }
  :where(.mar-charts) #mar-details-save.mar-dialog-submit { min-height: 0; }
  :where(.mar-charts) .mar-details-dialog { max-width: 480px; width: 90%; border: 1px solid var(--ch-border); border-radius: var(--ch-radius-lg); padding: var(--ch-space-lg); font-family: var(--ch-font-primary); background: var(--ch-bg-card); }
  :where(.mar-charts) .mar-details-title { margin: 0 0 4px; font-size: 16px; color: var(--ch-text-primary); }
  :where(.mar-charts) .mar-details-name { font-size: 13px; color: var(--ch-text-muted); margin: 0 0 12px; }
  :where(.mar-charts) .mar-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  :where(.mar-charts) .mar-loading-text { margin-top: 12px; font-size: 14px; font-weight: 500; color: #fff; }