/* spoke_mar_generation_html — the generate-MAR screen's own rules.
 *
 * Moved from `client_code/spoke_mar_generation_html/form_template.yaml`'s
 * `<style>` block (lines 6-164 at conversion) and scoped `:where(.mar-screen)`,
 * which adds zero specificity, so no rule changes which other rule it beats.
 *
 * The form's three old top-level nodes are wrapped in one root div, `.mar-screen`,
 * because two or more top-level nodes make Anvil keep its own wrapper as the root.
 * The root itself gets NO rule: it is a plain block child of `main`'s
 * `#spoke-child-forms`, which owns the padding and the scroll, and `.mar-container`
 * still centres inside a full-width block wrapper.
 *
 * `.loading-spinner` is NOT declared here — `spoke_shared.css` owns it app-wide.
 * The two `.mar-gen-overlay-content .loading-spinner` overrides below beat it on
 * specificity (0,2,0 against 0,1,0), so they win whichever order the head links load in.
 */

:where(.mar-screen) .mar-container { max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
:where(.mar-screen) .mar-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
:where(.mar-screen) .mar-title { font-size: 22px; font-weight: 600; color: var(--px-accent); }
:where(.mar-screen) .mar-back-btn {
  background: none; border: 1px solid #ccc; padding: 6px 14px; border-radius: 4px;
  cursor: pointer; font-size: 13px; color: #555;
}
:where(.mar-screen) .mar-back-btn:hover { background: #f5f5f5; }

:where(.mar-screen) .mar-banner {
  background: #e3f2fd; border: 1px solid #90caf9; border-radius: 6px;
  padding: 12px 16px; font-size: 13px; color: #1565c0; margin-bottom: 16px;
}

:where(.mar-screen) .mar-patient-card {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 16px 20px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
:where(.mar-screen) .mar-patient-name { font-size: 18px; font-weight: 600; color: #212121; margin-bottom: 4px; }
:where(.mar-screen) .mar-patient-meta { font-size: 13px; color: #666; margin-bottom: 12px; }
/* Read-only photo presence indicator. Spoke is management-free: it
   shows whether a resident photo exists (yes/no) but never the image
   itself, and offers no add/replace/remove. The photo still PRINTS on
   spoke-generated MAR charts (inlined server-side); this is purely the
   on-screen presence cue, driven by patient.photo_present. */
:where(.mar-screen) .mar-photo-presence {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 12px; white-space: nowrap;
}
:where(.mar-screen) .mar-photo-presence.has { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
:where(.mar-screen) .mar-photo-presence.none { background: #f5f5f5; color: #666; border: 1px solid #e0e0e0; }
:where(.mar-screen) .mar-patient-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
:where(.mar-screen) .mar-field { display: flex; flex-direction: column; gap: 3px; }
:where(.mar-screen) .mar-field label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
:where(.mar-screen) .mar-field-value { padding: 6px 10px; font-size: 13px; color: #333; }

/* Date range */
:where(.mar-screen) .mar-dates {
  display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
  flex-wrap: wrap;
}
:where(.mar-screen) .mar-dates label { font-size: 13px; font-weight: 500; color: #555; }
:where(.mar-screen) .mar-dates input[type="date"] {
  padding: 6px 10px; border: 1.5px solid #aaa; border-radius: 4px; font-size: 13px;
}
:where(.mar-screen) .mar-dates input[type="number"] {
  width: 55px; padding: 6px 8px; border: 1.5px solid #aaa; border-radius: 4px;
  font-size: 13px; text-align: center;
}
:where(.mar-screen) .mar-cycle-btn {
  padding: 4px 10px; border: 1.5px solid #aaa; border-radius: 4px;
  background: #fff; color: #555; cursor: pointer; font-size: 12px;
}
:where(.mar-screen) .mar-cycle-btn:hover { border-color: var(--px-accent); color: var(--px-accent); }

/* Items section scaffolding — the rows themselves are the shared dep
   med_rows_editor_html component mounted in the anvil-slot below
   (phase 6B split); row/chip/badge CSS ships with the dep. */
:where(.mar-screen) .mar-items-section { margin-top: 16px; }

/* The two dependency mount containers. `--pxm-accent` used to be an inline
   `style=` on each slot div, which a template may not carry. The dependency
   documents a host stylesheet rule on the mount container as the other half of
   the same contract (`mar_editor/_pxmar_core_js.py`), and the dep's own default
   sits on `:root`, so this declaration wins by inheritance proximity whatever
   the document order. */
:where(.mar-screen) .mar-dep-accent { --pxm-accent: var(--px-accent); }

/* Replaces the items section's `style="display:none"`. `_marSetHostVisible`
   removes this class as it clears the inline display, so revealing the section
   does exactly what clearing the inline style used to do.
   Designer note (guide step 4): the TEMPLATE does not ship this class on
   .mar-items-section — `initMarScreen` adds it at runtime, before any data —
   so the section and its `spoke_med_rows` dropzone stay visible on the canvas,
   where no Python and no module runs and staff need somewhere to drop. That is
   this form's designer gate; it carries no live class to gate on. */
:where(.mar-screen) .mar-hidden { display: none; }

/* Generate-chain length/start invalid state (Generate MAR Chart click rejects when
   Length is outside the contract's window or Start is missing). Matches the dep's
   invalid-input pattern for visual consistency with other validation reds. */
:where(.mar-screen) #mar-length-days.invalid,
:where(.mar-screen) #mar-start-date.invalid { border: 2px solid #dc2626; background: #fef2f2; }

/* Generate button */
:where(.mar-screen) .mar-generate-bar {
  position: sticky; bottom: 0; background: #fff; border-top: 2px solid #e0e0e0;
  padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;
  margin: 20px -20px -20px; box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  /* Keep the Generate button clear of the iOS home indicator; the inset
     is 0px on every browser that does not reserve that strip. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
:where(.mar-screen) .mar-generate-btn { user-select: none;
  background: var(--px-accent); color: #fff; border: none; padding: 10px 28px;
  border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer !important;
  transition: background 0.2s;
}
:where(.mar-screen) .mar-generate-btn:hover:not(:disabled) { background: #0d1642; }
:where(.mar-screen) .mar-generate-btn:active:not(:disabled) { transform: scale(.97); transition: transform .08s; }
:where(.mar-screen) .mar-generate-btn:disabled { background: #c7cad1; color: #6b7280; opacity: 1; cursor: not-allowed !important; }
/* Click-fired flash so the user gets immediate visual feedback even
   when validation rejects (e.g. missing start date / length out of
   range). */
:where(.mar-screen) .mar-generate-btn[data-clicked="1"] { box-shadow: 0 0 0 4px rgba(26,35,126,.35) !important; }
:where(.mar-screen) .mar-item-count { font-size: 14px; color: #555; }

:where(.mar-screen) .mar-result { text-align: center; padding: 40px; }
:where(.mar-screen) .mar-result-success { color: #2e7d32; }

/* U1 — the unified refusal banner (approved presentation variant B).
   ONE shape for every refusal the shared MAR engine raises, replacing
   the toast-plus-panel split that told an operator the same condition
   two different ways depending on which boundary caught it. Left-accent
   rather than a full-bleed colour block: the sentence stays the loudest
   thing on the screen, and the accent carries the severity. */
:where(.mar-screen) .mar-refusal { text-align: left; padding: 20px 24px; margin: 24px auto;
               max-width: 640px; border-radius: 6px; background: #fff;
               border: 1px solid #e0e0e0; border-left-width: 6px;
               border-left-style: solid; }
/* Blocked = nothing the operator can do by pressing again. Retry = the
   press can succeed as-is once the named thing has settled. The two
   must not look alike: an amber banner an operator learns to re-press
   is exactly the habit that makes a red one invisible. */
:where(.mar-screen) .mar-refusal-blocked { border-left-color: #c62828; }
:where(.mar-screen) .mar-refusal-retry   { border-left-color: #ef6c00; }
:where(.mar-screen) .mar-refusal-sentence { font-size: 16px; font-weight: 600;
                        margin: 0 0 10px; color: #212121; }
:where(.mar-screen) .mar-refusal-next { margin: 0 0 10px; color: #424242; }
:where(.mar-screen) .mar-refusal-detail { margin: 0 0 10px; color: #616161; font-size: 14px; }
:where(.mar-screen) .mar-refusal-anchors { margin: 0 0 12px; color: #616161; font-size: 14px; }
/* The code is diagnostic, not operator copy — small, last, and never
   the thing a reader's eye lands on first. */
:where(.mar-screen) .mar-refusal-code { display: block; margin-top: 12px; color: #9e9e9e;
                    font-size: 12px; font-family: monospace; }

@media (max-width: 768px) {
  /* Container fits the viewport with a small gutter; no clip — root-cause-fix
     the bar's negative margin below so we don't need to hide overflow. */
  :where(.mar-screen) .mar-container { padding: 0 8px; max-width: 100%; }
  /* Bar bleeds out by the container's mobile padding (8px) instead of the
     desktop 20px, so its outer box matches the container's outer width
     (no horizontal page overflow). Avoiding `overflow-x:hidden` on the
     ancestor also preserves this sticky element's scroll-containing block. */
  :where(.mar-screen) .mar-generate-bar { margin: 20px -8px 0; }
  /* Touch targets reach the 44px floor, and every text field reaches
     16px so iOS Safari does not zoom the page on focus. */
  :where(.mar-screen) .mar-back-btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
  :where(.mar-screen) .mar-cycle-btn { min-height: 44px; padding: 10px 14px; font-size: 15px; }
  :where(.mar-screen) .mar-dates input[type="date"] { min-height: 44px; font-size: 16px; }
  :where(.mar-screen) .mar-dates input[type="number"] { min-height: 44px; font-size: 16px; width: 70px; }
}

:where(.mar-screen) .mar-gen-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
  background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
:where(.mar-screen) .mar-gen-overlay.active { display: flex; }
:where(.mar-screen) .mar-gen-overlay-content {
  background: #fff; border-radius: 12px; padding: 40px 48px;
  text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
:where(.mar-screen) .mar-gen-overlay-content .loading-spinner {
  margin: 0 auto 20px; display: flex; padding: 0; min-height: auto;
}
:where(.mar-screen) .mar-gen-overlay-content .loading-spinner::before {
  width: 48px; height: 48px; border-width: 4px;
}
:where(.mar-screen) .mar-gen-overlay-text { font-size: 16px; font-weight: 500; color: #333; }