/* spoke_mar_generation_html — the generate-MAR screen's own rules.
 *
 * Every rule is scoped `:where(.mar-screen)`, which adds zero specificity, so no rule changes which other rule it beats.
 *
 * The form's content sits 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.
 */

: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-fg); }
:where(.mar-screen) .mar-back-btn {
  background: none; border: 1px solid var(--px-border-strong); padding: 6px 14px; border-radius: 4px;
  cursor: pointer; font-size: 13px; color: var(--px-text-secondary);
}
:where(.mar-screen) .mar-back-btn:hover { background: var(--px-bg-elevated); }

:where(.mar-screen) .mar-banner {
  background: var(--px-info-bg); border: 1px solid var(--px-info-border); border-radius: 6px;
  padding: 12px 16px; font-size: 13px; color: var(--px-info-text); margin-bottom: 16px;
}

:where(.mar-screen) .mar-patient-card {
  background: var(--px-bg-card); border: 1px solid var(--px-border); border-radius: 8px;
  padding: 16px 20px; margin-bottom: 16px;
  box-shadow: var(--px-shadow);
}
:where(.mar-screen) .mar-patient-name { font-size: 18px; font-weight: 600; color: var(--px-text-primary); margin-bottom: 4px; }
:where(.mar-screen) .mar-patient-meta { font-size: 13px; color: var(--px-text-muted); 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: var(--px-success-bg); color: var(--px-success-text); border: 1px solid var(--px-success-border); }
:where(.mar-screen) .mar-photo-presence.none { background: var(--px-bg-elevated); color: var(--px-text-secondary); border: 1px solid var(--px-border); }
: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: var(--px-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
:where(.mar-screen) .mar-field-value { padding: 6px 10px; font-size: 13px; color: var(--px-text-primary); }

/* 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: var(--px-text-secondary); }
:where(.mar-screen) .mar-dates input[type="date"] {
  padding: 6px 10px; border: 1.5px solid var(--px-border-strong); border-radius: 4px; font-size: 13px;
  background: var(--px-bg-input); color: var(--px-text-primary);
}
:where(.mar-screen) .mar-dates input[type="number"] {
  width: 55px; padding: 6px 8px; border: 1.5px solid var(--px-border-strong); border-radius: 4px;
  font-size: 13px; text-align: center;
  background: var(--px-bg-input); color: var(--px-text-primary);
}
:where(.mar-screen) .mar-cycle-btn {
  padding: 4px 10px; border: 1.5px solid var(--px-border-strong); border-radius: 4px;
  background: var(--px-bg-card); color: var(--px-text-secondary); cursor: pointer; font-size: 12px;
}
:where(.mar-screen) .mar-cycle-btn:hover:not(:disabled) { border-color: var(--px-accent-fg); color: var(--px-accent-fg); }
:where(.mar-screen) .mar-dates input:disabled,
:where(.mar-screen) .mar-cycle-btn:disabled {
  background: var(--px-bg-disabled); color: var(--px-text-disabled);
  border-color: var(--px-border-disabled); cursor: not-allowed;
}
:where(.mar-screen) .mar-dates input:focus-visible,
:where(.mar-screen) .mar-back-btn:focus-visible,
:where(.mar-screen) .mar-cycle-btn:focus-visible,
:where(.mar-screen) .mar-generate-btn:focus-visible { outline: 2px solid var(--px-focus-ring); outline-offset: 2px; }

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

/* The two dependency mount containers. A template may not carry an inline
   `style=`, so `--pxm-accent` is set here on each slot div. 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); }

/* Hides the items section. `_marSetHostVisible` removes this class as it
   clears the inline display, which reveals the section.
   Designer note: 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 var(--px-field-invalid-border);
  background: var(--px-field-invalid-bg); color: var(--px-field-invalid-text);
}

/* Generate button */
:where(.mar-screen) .mar-generate-bar {
  position: sticky; bottom: 0; background: var(--px-bg-card); border-top: 2px solid var(--px-border);
  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: var(--px-accent-on); 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: var(--px-accent-deep); }
:where(.mar-screen) .mar-generate-btn:active:not(:disabled) { transform: scale(.97); transition: transform .08s; }
/* Disabled only while "Generating..." shows, so the label keeps readable text. */
:where(.mar-screen) .mar-generate-btn:disabled {
  background: var(--px-bg-disabled); color: var(--px-text-secondary);
  box-shadow: inset 0 0 0 1px var(--px-border-disabled); 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 color-mix(in srgb, var(--px-accent-fg) 35%, transparent) !important; }
:where(.mar-screen) .mar-item-count { font-size: 14px; color: var(--px-text-secondary); }

:where(.mar-screen) .mar-result { text-align: center; padding: 40px; }

/* U1 — the unified refusal banner.
   ONE shape for every refusal the shared MAR engine raises, so an
   operator is never told 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: var(--px-bg-card);
               border: 1px solid var(--px-border); 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: var(--px-danger); }
:where(.mar-screen) .mar-refusal-retry   { border-left-color: var(--px-warning); }
:where(.mar-screen) .mar-refusal-sentence { font-size: 16px; font-weight: 600;
                        margin: 0 0 10px; color: var(--px-text-primary); }
:where(.mar-screen) .mar-refusal-next { margin: 0 0 10px; color: var(--px-text-secondary); }
:where(.mar-screen) .mar-refusal-detail { margin: 0 0 10px; color: var(--px-text-muted); font-size: 14px; }
:where(.mar-screen) .mar-refusal-anchors { margin: 0 0 12px; color: var(--px-text-muted); 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: var(--px-text-muted);
                    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; }
}