/* ===== PX unified round-pattern editor modal (PXMAR.patternEditor) =====
     Port-and-unify of:
       - carehome-portal-v1 custom_times_engine_html (BASE — working prototype)
       - px-internal-app inline cmrt modal (warfarin open-block I-10,
         phase preserve-on-unedited-save; its blank-slate open was
         overruled by RULING NC-11 — the portal chips pre-seed wins)
       - px-spoke-app __CRT (store tombstone / modal-saved semantics)
     Colours derive ONLY from the --pxm-* token contract (COMPONENT_CONTRACT
     §6) so every host resolves its own theme (--px-* / --ch-* chains live in
     the bridge token block). Classes/ids namespaced pxm-* so this component
     can coexist with any host ctm-/cmrt-/crt- modal.
     The only hardcoded colours are the pinned invalid-input reds
     (#dc2626/#fef2f2/#7f1d1d, CR-INT-13). */
  .pxm-scrim{position:fixed;inset:0;background:var(--pxm-bg-overlay);
    display:none;align-items:center;justify-content:center;padding:26px;z-index:var(--pxm-z-overlay)}
  .pxm-scrim.on{display:flex}
  .pxm-modal{background:var(--pxm-bg-card);border-radius:var(--pxm-radius-lg);
    box-shadow:var(--pxm-shadow-lg);width:min(1500px,95vw);max-height:92vh;display:flex;
    flex-direction:column;overflow:hidden;border:1px solid var(--pxm-border);
    font-family:var(--pxm-font);color:var(--pxm-text-primary);position:relative}
  /* Toasts (refusal-to-open, save/validation) render through the ONE
     bridge singleton PXMAR.toast — TOP-CENTRE, stacked above the open
     modal (RULING NC-10). Styles live in the bridge shared block
     (#pxm-shared-css .pxm-toast) — no per-template toast CSS. */
  .pxm-h{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--pxm-border)}
  .pxm-h h2{font-size:16px;font-weight:600;color:var(--pxm-text-primary);margin:0}
  .pxm-h .pxm-close{margin-left:auto;width:32px;height:32px;border-radius:var(--pxm-radius-md);
    color:var(--pxm-text-muted);font-size:18px;background:none;border:none;cursor:pointer}
  .pxm-h .pxm-close:hover{background:var(--pxm-bg-elevated);color:var(--pxm-text-primary)}
  .pxm-body{display:flex;overflow:hidden;flex:1;min-height:0}
  .pxm-edit{width:438px;flex:none;overflow:auto;padding:20px 22px;border-right:1px solid var(--pxm-border)}
  .pxm-cal{flex:1;overflow:auto;padding:18px 20px;background:var(--pxm-bg-elevated)}
  .pxm-f{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--pxm-border)}
  .pxm-f .pxm-sp{flex:1;font-size:12px;color:var(--pxm-text-muted)}
  .pxm-sec{margin-bottom:20px}
  .pxm-modal [data-pxm-error], .pxm-pop [data-pxm-error]{outline:2px solid #dc2626;outline-offset:2px}
  .pxm-sec>label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;
    line-height:1.5;text-transform:uppercase;color:var(--pxm-text-muted);margin-bottom:9px}
  .pxm-freq{display:flex;gap:8px;flex-wrap:wrap}
  .pxm-freq label{flex:1;min-width:74px;text-align:center;font-size:12.5px;font-weight:500;
    padding:9px 6px;border:1.5px solid var(--pxm-border);border-radius:var(--pxm-radius-md);
    color:var(--pxm-text-secondary);cursor:pointer;transition:all .15s;background:var(--pxm-bg-card)}
  .pxm-freq input{display:none}
  .pxm-freq label:hover{border-color:var(--pxm-info)}
  .pxm-freq label:focus-visible{outline:2px solid var(--pxm-info);outline-offset:2px}
  .pxm-freq label.act{border-color:var(--pxm-info);background:color-mix(in srgb,var(--pxm-info) 12%,transparent);
    color:var(--pxm-info);font-weight:600}
  .pxm-repeat{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--pxm-text-muted)}
  .pxm-repeat input{width:62px;padding:8px;border:1.5px solid var(--pxm-border);
    border-radius:var(--pxm-radius-md);text-align:center;font-weight:600;background:var(--pxm-input-bg);color:var(--pxm-text-primary)}
  .pxm-repeat .u{font-weight:600;color:var(--pxm-text-secondary);background:var(--pxm-bg-elevated);
    border:1px solid var(--pxm-border);padding:8px 12px;border-radius:var(--pxm-radius-md);font-size:12.5px}
  .pxm-dates{display:flex;gap:10px}
  .pxm-dates .f{flex:1}
  .pxm-dates .f span{font-size:11px;color:var(--pxm-text-muted);display:block;margin-bottom:4px}
  .pxm-dates .f input{width:100%;padding:8px 10px;border:1.5px solid var(--pxm-border);
    border-radius:var(--pxm-radius-md);background:var(--pxm-input-bg);color:var(--pxm-text-primary)}
  .pxm-seg{display:flex;gap:8px}
  .pxm-seg button{flex:1;font-size:12.5px;font-weight:500;padding:9px 6px;
    border:1.5px solid var(--pxm-border);border-radius:var(--pxm-radius-md);
    color:var(--pxm-text-secondary);background:var(--pxm-bg-card);transition:all .15s;cursor:pointer}
  .pxm-seg button.on{border-color:var(--pxm-info);background:color-mix(in srgb,var(--pxm-info) 12%,transparent);
    color:var(--pxm-info);font-weight:600}
  .pxm-daychips{display:flex;flex-wrap:wrap;gap:6px}
  .pxm-daychips button{font-size:12px;font-weight:600;padding:7px 11px;min-width:46px;
    border:1.5px solid var(--pxm-border);border-radius:999px;
    color:var(--pxm-text-secondary);background:var(--pxm-bg-card);transition:all .15s;cursor:pointer}
  .pxm-daychips button.on{border-color:var(--pxm-info);background:color-mix(in srgb,var(--pxm-info) 12%,transparent);color:var(--pxm-info)}
  .pxm-note{font-size:12px;color:var(--pxm-text-muted);margin-top:9px;line-height:1.5}
  .pxm-clear{font-weight:600;color:var(--pxm-info);cursor:pointer}
  table.pxm-rt{width:100%;border-collapse:collapse}
  table.pxm-rt th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--pxm-text-muted);
    text-align:left;padding:0 6px 7px;font-weight:600}
  table.pxm-rt td{padding:4px 6px;border-top:1px solid var(--pxm-border)}
  .pxm-rt .sw{width:13px;height:13px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:7px}
  /* PT-1 — two-field HH:MM time entry (replaces the native time input).
     One bordered wrapper reads as a single control; the two inner text
     inputs are borderless. Invalid reds pinned per CR-INT-13. */
  .pxm-tp{display:inline-flex;align-items:center;gap:1px;width:104px;padding:0 3px;
    border:1.5px solid var(--pxm-border);border-radius:var(--pxm-radius-md);
    background:var(--pxm-input-bg);box-sizing:border-box}
  .pxm-tp:focus-within{border-color:var(--pxm-info)}
  .pxm-tp input{width:100%;min-width:0;flex:1;padding:7px 0;border:none;background:transparent;
    text-align:center;color:var(--pxm-text-primary);font:inherit}
  .pxm-tp input:focus{outline:none}
  .pxm-tp .pxm-tp-c{color:var(--pxm-text-muted);font-weight:600;flex:none}
  .pxm-tp.invalid{border-color:#dc2626 !important;background:#fef2f2 !important}
  .pxm-tp.invalid input{color:#7f1d1d}
  .pxm-rt .rname{font-size:12.5px;font-weight:600}
  .pxm-rt input.dose{width:64px;padding:7px;border:1.5px solid var(--pxm-border);
    border-radius:var(--pxm-radius-md);text-align:center;background:var(--pxm-input-bg);color:var(--pxm-text-primary)}
  /* Dose validator — invalid styling shared across all dose inputs in the
     modal + day-override popover. Canonical grammar matches server
     parse_dose_qty. Pinned invalid-input reds per CR-INT-13. */
  .pxm-rt input.dose.invalid,
  .pxm-pop input.pd.invalid,
  #pxmNrDose.invalid,
  #pxmPnDose.invalid,
  #pxmPrnAmt.invalid{
    border-color:#dc2626 !important;background:#fef2f2 !important;color:#7f1d1d !important}
  .pxm-rt .del{color:var(--pxm-text-muted);font-size:15px;width:26px;height:26px;border-radius:6px;background:none;border:none;cursor:pointer}
  .pxm-rt .del:hover{background:color-mix(in srgb,var(--pxm-danger) 12%,transparent);color:var(--pxm-danger)}
  .pxm-rowadd{display:flex;gap:8px;margin-top:12px}
  .pxm-btn{font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:var(--pxm-radius-md);
    border:1.5px solid transparent;transition:all .15s;cursor:pointer;font-family:var(--pxm-font)}
  .pxm-btn-primary{background:var(--pxm-info);color:var(--pxm-text-inverse)}
  .pxm-btn-primary:hover{background:color-mix(in srgb,var(--pxm-info) 85%,black)}
  .pxm-btn-ghost{background:var(--pxm-bg-card);border-color:var(--pxm-border);color:var(--pxm-text-secondary)}
  .pxm-btn-ghost:hover{border-color:var(--pxm-info);color:var(--pxm-info)}
  .pxm-btn-sm{font-size:11.5px;padding:7px 12px}
  .pxm-newround{margin-top:12px;border:1px dashed var(--pxm-border);border-radius:var(--pxm-radius-md);
    padding:13px;background:var(--pxm-bg-elevated);display:none}
  .pxm-newround.on{display:block}
  .pxm-newround .grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
  .pxm-newround input[type=text]{width:100%;padding:8px;
    border:1.5px solid var(--pxm-border);border-radius:var(--pxm-radius-md);background:var(--pxm-input-bg);color:var(--pxm-text-primary)}
  .pxm-newround .pxm-tp{width:100%}
  .pxm-newround .pxm-tp input{padding:8px 0}
  .pxm-newround .crow{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .pxm-newround input[type=color]{width:44px;height:36px;border:1.5px solid var(--pxm-border);
    border-radius:var(--pxm-radius-md);background:var(--pxm-bg-card);padding:2px;cursor:pointer}
  .pxm-newround input.nr-dose{width:70px;padding:8px;border:1.5px solid var(--pxm-border);
    border-radius:var(--pxm-radius-md);text-align:center;background:var(--pxm-input-bg);color:var(--pxm-text-primary)}
  .pxm-palette{margin-top:14px}
  .pxm-palette .ttl{font-size:11px;color:var(--pxm-text-muted);margin-bottom:7px}
  .pxm-pchips{display:flex;flex-wrap:wrap;gap:7px}
  .pxm-pchip{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
    border:1px solid var(--pxm-border);background:var(--pxm-bg-card);
    padding:6px 10px;border-radius:12px;color:var(--pxm-text-secondary);transition:all .15s;cursor:pointer}
  .pxm-pchip:hover{border-color:var(--pxm-info);color:var(--pxm-info)}
  .pxm-pchip[disabled]{opacity:.4;cursor:not-allowed}
  .pxm-pchip .psw{width:10px;height:10px;border-radius:3px}
  .pxm-newtype-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    border:1px dashed var(--pxm-border);background:transparent;padding:6px 10px;
    border-radius:12px;color:var(--pxm-text-muted);cursor:pointer;transition:all .15s;margin-top:8px}
  .pxm-newtype-btn:hover{border-color:var(--pxm-info);color:var(--pxm-info)}
  .pxm-nr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
  .pxm-nr-ttl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pxm-text-muted)}
  .pxm-nr-x{background:transparent;border:none;font-size:20px;line-height:1;color:var(--pxm-text-muted);cursor:pointer;padding:0 4px}
  .pxm-nr-x:hover{color:var(--pxm-info)}
  .pxm-prnbox{border:1px solid var(--pxm-border);border-radius:var(--pxm-radius-lg);padding:15px;background:var(--pxm-bg-card)}
  .pxm-prn-amt{display:flex;align-items:center;gap:10px}
  .pxm-prn-amt label{font-size:12.5px;font-weight:600;color:var(--pxm-text-secondary)}
  .pxm-prn-amt input{width:90px;padding:8px 10px;border:1.5px solid var(--pxm-border);
    border-radius:var(--pxm-radius-md);background:var(--pxm-input-bg);color:var(--pxm-text-primary);text-align:center;font-weight:600}
  .pxm-prn-amt input:disabled{opacity:.5;cursor:not-allowed}
  #pxmPrnLabel .pxm-prn-dot{display:none;width:7px;height:7px;border-radius:50%;
    background:var(--pxm-info);margin-right:7px;vertical-align:0}
  #pxmPrnLabel.active{color:var(--pxm-info)}
  #pxmPrnLabel.active .pxm-prn-dot{display:inline-block}
  #pxmPrnLabel .pxm-prn-state{display:inline-block;margin-left:8px;font-size:9.5px;font-weight:700;letter-spacing:.5px;
    padding:1px 6px;border-radius:8px;background:var(--pxm-bg-elevated);color:var(--pxm-text-muted);border:1px solid var(--pxm-border);vertical-align:1px}
  #pxmPrnLabel .pxm-prn-state.on{background:var(--pxm-info);color:var(--pxm-text-inverse);border-color:var(--pxm-info)}
  .pxm-prn-warn{font-size:11.5px;color:var(--pxm-warning);margin-top:7px;display:none}
  .pxm-prn-warn.on{display:block}
  .pxm-calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .pxm-calh .rng{font-weight:600;font-size:14px;color:var(--pxm-text-primary)}
  .pxm-calh .leg{display:flex;gap:14px;font-size:11px;color:var(--pxm-text-muted);flex-wrap:wrap}
  .pxm-calh .leg i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
  .pxm-calh .leg .ovr-sw{width:10px;height:10px;border-radius:3px;display:inline-block;box-shadow:inset 0 0 0 2px var(--pxm-info)}
  .pxm-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
  .pxm-dow div{text-align:center;font-size:11px;font-weight:700;color:var(--pxm-text-muted);text-transform:uppercase}
  .pxm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .pxm-cell{min-height:78px;border:1px solid var(--pxm-border);border-radius:var(--pxm-radius-md);
    background:var(--pxm-bg-card);padding:6px 7px;position:relative;cursor:pointer;transition:.1s}
  .pxm-cell.out{background:var(--pxm-bg-elevated);border-style:dashed;color:var(--pxm-text-muted);cursor:default}
  .pxm-cell.off{background:var(--pxm-bg-elevated)}
  /* CX-INT-7 — in MAR window but outside the per-medicine window. Greyed,
     no dose rendering, click disabled. Grey diagonal stripes (#12) make
     out-of-med cells unmistakable in light and dark (--pxm-border is
     theme-aware in every host). */
  .pxm-cell.pxm-out-of-med{background:
      repeating-linear-gradient(45deg, transparent 0, transparent 5px, var(--pxm-border) 5px, var(--pxm-border) 6px),
      var(--pxm-bg-elevated);border-style:dashed;
    color:var(--pxm-text-muted);cursor:not-allowed;opacity:.55}
  .pxm-cell:not(.out):not(.pxm-out-of-med):hover{border-color:var(--pxm-info)}
  .pxm-cell .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
  .pxm-cell .dnum{font-size:clamp(10px,1.6vw,12px);font-weight:600;color:var(--pxm-text-primary);white-space:nowrap}
  .pxm-cell .dnum.dim{color:var(--pxm-text-muted)}
  .pxm-cell .didx{font-size:9.5px;font-weight:700;color:var(--pxm-text-inverse);background:var(--pxm-text-muted);
    border-radius:5px;padding:1px 5px;min-width:20px;text-align:center}
  .pxm-cell .doses{display:flex;flex-direction:column;gap:3px}
  .pxm-dit{display:flex;align-items:center;gap:5px;font-size:clamp(9px,1.7vw,11px);line-height:1.3}
  .pxm-dit .dsw{width:7px;height:7px;border-radius:2px;flex:none}
  .pxm-dit .t{font-weight:700;color:var(--pxm-text-secondary)} .pxm-dit .q{margin-left:auto;color:var(--pxm-text-muted);font-weight:700}
  .pxm-cell.edited{box-shadow:inset 0 0 0 2px var(--pxm-info)}
  /* Range overrides render as ONE contiguous band: top+bottom edges on
     every day (background tint throughout), marker bars only on the first
     and last day. */
  .pxm-cell.range{box-shadow:inset 0 1.5px 0 0 var(--pxm-info),inset 0 -1.5px 0 0 var(--pxm-info);background:color-mix(in srgb,var(--pxm-info) 9%,transparent)}
  .pxm-cell.range-start{box-shadow:inset 3px 0 0 0 var(--pxm-info),inset 0 1.5px 0 0 var(--pxm-info),inset 0 -1.5px 0 0 var(--pxm-info)}
  .pxm-cell.range-end{box-shadow:inset -3px 0 0 0 var(--pxm-info),inset 0 1.5px 0 0 var(--pxm-info),inset 0 -1.5px 0 0 var(--pxm-info)}
  .pxm-cell.range-single{box-shadow:inset 3px 0 0 0 var(--pxm-info),inset -3px 0 0 0 var(--pxm-info),inset 0 1.5px 0 0 var(--pxm-info),inset 0 -1.5px 0 0 var(--pxm-info)}
  /* Bridge across the 6px grid gap: range cells with a right continuation
     paint an ::after band-stub so the strokes meet the neighbour's. */
  .pxm-cell.range:not(.range-end):not(.range-single)::after{
    content:"";position:absolute;top:0;right:-6px;width:6px;height:100%;
    border-top:1.5px solid var(--pxm-info);
    border-bottom:1.5px solid var(--pxm-info);
    background:color-mix(in srgb,var(--pxm-info) 9%,transparent);
    pointer-events:none}
  /* Symmetric ::before bridge for cells with a LEFT continuation (range
     wrapping col 7 -> col 1 of the next row). */
  .pxm-cell.range:not(.range-start):not(.range-single)::before{
    content:"";position:absolute;top:0;left:-6px;width:6px;height:100%;
    border-top:1.5px solid var(--pxm-info);
    border-bottom:1.5px solid var(--pxm-info);
    background:color-mix(in srgb,var(--pxm-info) 9%,transparent);
    pointer-events:none}
  /* Live highlight as the range end-date picker moves (pre-save). */
  .pxm-cell.range-preview{box-shadow:inset 0 0 0 2px var(--pxm-info)!important;background:color-mix(in srgb,var(--pxm-info) 16%,transparent)!important}
  .pxm-rng-toggle{padding:6px 0;border-top:1px solid var(--pxm-border);border-bottom:1px solid var(--pxm-border);margin:8px 0;font-size:12px;color:var(--pxm-text-primary)}
  .pxm-rng-lbl{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
  .pxm-rng-end{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
  .pxm-rng-end input[type="date"]{padding:4px 6px;border:1px solid var(--pxm-border);border-radius:var(--pxm-radius-sm);background:var(--pxm-input-bg);color:var(--pxm-text-primary);font-size:12px}
  /* Dark theme: native date pickers need color-scheme:dark so the picker
     indicator + popup calendar stay legible on dark surfaces. Portal
     stamps data-theme on :root; internal/spoke light themes unaffected. */
  [data-theme="dark"] .pxm-modal input[type="date"],[data-theme="dark"] .pxm-pop input[type="date"]{color-scheme:dark}
  .pxm-rng-split{font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--pxm-radius-sm);border:1px solid var(--pxm-info);color:var(--pxm-info);background:transparent;cursor:pointer}
  .pxm-rng-split:hover{background:color-mix(in srgb,var(--pxm-info) 12%,transparent)}
  /* §3.3 — Monthly per-cell click popover (Override / Clear) */
  .pxm-mon-cell-pop{position:absolute;z-index:calc(var(--pxm-z-overlay) + 15);display:none;flex-direction:column;gap:4px;
    background:var(--pxm-bg-card);border:1px solid var(--pxm-border);border-radius:var(--pxm-radius-sm);
    box-shadow:var(--pxm-shadow-lg);padding:6px;min-width:220px}
  .pxm-mon-cell-pop.on{display:flex}
  .pxm-mcp-btn{padding:6px 10px;border-radius:var(--pxm-radius-sm);border:1px solid var(--pxm-border);
    background:var(--pxm-bg-elevated);color:var(--pxm-text-primary);font-size:12px;font-weight:600;
    cursor:pointer;text-align:left}
  .pxm-mcp-btn:hover{border-color:var(--pxm-info);background:var(--pxm-bg-card)}
  .pxm-mcp-clear{color:var(--pxm-danger);border-color:color-mix(in srgb, var(--pxm-danger) 30%, var(--pxm-border))}
  .pxm-mcp-clear:hover{background:color-mix(in srgb, var(--pxm-danger) 10%, var(--pxm-bg-card))}
  .pxm-pop{position:fixed;z-index:calc(var(--pxm-z-overlay) + 10);width:392px;background:var(--pxm-bg-card);
    border:1px solid var(--pxm-border);border-radius:var(--pxm-radius-lg);box-shadow:var(--pxm-shadow-lg);padding:16px;display:none;overflow-y:auto}
  .pxm-pop.on{display:block}
  .pxm-pop h4{font-size:14px;font-weight:600;margin:0 0 2px;color:var(--pxm-text-primary)}
  .pxm-pop .psub{font-size:11.5px;color:var(--pxm-text-muted);margin-bottom:12px}
  /* CC-G — one-cycle override notice. Visually distinct from .psub so
     staff register it as a reminder, not part of the day metadata. */
  .pxm-pop .pxm-pop-one-cycle-note{
    font-size:11px;color:var(--pxm-warning);background:color-mix(in srgb,var(--pxm-warning) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--pxm-warning) 40%,transparent);border-radius:var(--pxm-radius-sm);
    padding:6px 8px;margin:0 0 12px;line-height:1.35;cursor:help;
  }
  /* CC-B — range-locked popover state: controls below #pxmPopRows are
     muted + click-blocked until "Edit range" (or "Split out this day"). */
  .pxm-pop.range-readonly #pxmPopRows .pxm-prow input,
  .pxm-pop.range-readonly #pxmPopRows .pxm-prow .rm,
  .pxm-pop.range-readonly #pxmPopToggleNew,
  .pxm-pop.range-readonly #pxmPopPalette button,
  .pxm-pop.range-readonly #pxmPopNew,
  .pxm-pop.range-readonly #pxmPopClear,
  .pxm-pop.range-readonly #pxmPopReset,
  .pxm-pop.range-readonly #pxmPopDone{
    pointer-events:none;opacity:.55;
  }
  .pxm-rng-readonly-bar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-top:6px;font-size:11px;color:var(--pxm-text-secondary);
  }
  .pxm-rng-readonly-msg{flex:1;line-height:1.3}
  .pxm-rng-edit{
    font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--pxm-radius-sm);
    border:1px solid var(--pxm-info);color:var(--pxm-info);
    background:transparent;cursor:pointer;
  }
  .pxm-rng-edit:hover{background:color-mix(in srgb,var(--pxm-info) 12%,transparent)}
  .pxm-prow{display:flex;align-items:center;gap:7px;margin-bottom:7px}
  .pxm-prow .pxm-tp{width:104px;flex:none;font-size:12px}
  .pxm-prow .pxm-tp input{padding:6px 0}
  .pxm-prow .pxm-swatch{width:13px;height:13px;border-radius:4px;display:inline-block;
    flex-shrink:0;border:1px solid var(--pxm-border)}
  .pxm-prow .pxm-rname{flex:1;font-size:12.5px;font-weight:600;color:var(--pxm-text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pxm-prow input.pd{width:54px;padding:6px;border:1.5px solid var(--pxm-border);
    border-radius:var(--pxm-radius-md);text-align:center;font-size:12px;background:var(--pxm-input-bg);color:var(--pxm-text-primary)}
  .pxm-prow .rm{color:var(--pxm-text-muted);width:24px;height:24px;border-radius:6px;font-size:14px;background:none;border:none;cursor:pointer}
  .pxm-pop .psub2{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--pxm-text-muted);margin:13px 0 7px}
  .pxm-pop .pxm-empty-day{font-size:11.5px;color:var(--pxm-text-muted);font-style:italic;padding:4px 0 8px}
  .pxm-pact{display:flex;gap:7px;margin-top:13px}
  .pxm-pact button{flex:1;font-size:11.5px;font-weight:600;padding:9px;border-radius:var(--pxm-radius-md);
    border:1.5px solid transparent;transition:all .15s;cursor:pointer}
  .pxm-pact .b-clear{background:var(--pxm-bg-card);border-color:var(--pxm-border);color:var(--pxm-text-secondary)}
  /* Destructive style for "Remove day change" + "Remove entire range" */
  .pxm-pact .b-reset{background:transparent;border-color:var(--pxm-danger);color:var(--pxm-danger)}
  .pxm-pact .b-reset:hover{background:color-mix(in srgb,var(--pxm-danger) 14%,transparent)}
  #pxmPopRngRemove{color:var(--pxm-danger);font-weight:600}
  .pxm-pact .b-done{background:var(--pxm-info);color:var(--pxm-text-inverse)}
  .pxm-pact .b-done:disabled{background:var(--pxm-bg-card);color:var(--pxm-text-muted);border-color:var(--pxm-border);opacity:.6;cursor:not-allowed}
  #pxmPopBackdrop{display:none;position:fixed;inset:0;background:var(--pxm-bg-overlay);z-index:calc(var(--pxm-z-overlay) + 9)}
  .pxm-conflict{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:var(--pxm-z-toast);
    background:var(--pxm-bg-elevated);color:var(--pxm-text-primary);border-radius:var(--pxm-radius-lg);
    padding:14px 18px;box-shadow:var(--pxm-shadow-lg);display:none;align-items:center;gap:16px;max-width:580px}
  .pxm-conflict.on{display:flex}
  .pxm-conflict .ct{font-size:12.5px;line-height:1.45}
  .pxm-conflict .ct b{color:var(--pxm-warning)}
  .pxm-conflict button{font-size:12px;font-weight:600;padding:8px 14px;border-radius:var(--pxm-radius-md);
    flex:none;border:1.5px solid var(--pxm-border);background:var(--pxm-bg-card);color:var(--pxm-text-primary);cursor:pointer}
  .pxm-mtabs{display:none}
  @media (max-width:768px){
    .pxm-scrim{padding:0;align-items:stretch}
    .pxm-modal{width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100dvh;border-radius:0;border:none}
    .pxm-mtabs{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--pxm-border);background:var(--pxm-bg-card);flex:none}
    .pxm-mtabs button{flex:1;font-size:12.5px;font-weight:600;padding:11px 6px;min-height:44px;
      border:1.5px solid var(--pxm-border);border-radius:var(--pxm-radius-md);
      color:var(--pxm-text-secondary);background:var(--pxm-bg-card);cursor:pointer}
    .pxm-mtabs button.on{border-color:var(--pxm-info);background:color-mix(in srgb,var(--pxm-info) 12%,transparent);color:var(--pxm-info)}
    .pxm-body{flex-direction:column}
    .pxm-edit,.pxm-cal{width:100%;flex:1 1 auto;border-right:none;padding:16px}
    .pxm-modal.show-cal .pxm-edit{display:none}
    .pxm-modal:not(.show-cal) .pxm-cal{display:none}
    #pxmPopBackdrop.on{display:block}
    .pxm-pop{left:0!important;right:0;top:auto!important;bottom:0;width:100%;
      border-radius:var(--pxm-radius-lg) var(--pxm-radius-lg) 0 0;max-height:85vh;overflow:auto}
    .pxm-conflict{left:12px;right:12px;bottom:12px;transform:none;max-width:none;flex-wrap:wrap;gap:10px}
    .pxm-conflict button{flex:1}
    /* §5.1 touch-usability — 44px hit targets; calendar cells shrink so
       the 7-up week grid stays 7-up on a 360px viewport. */
    .pxm-freq label,
    .pxm-seg button,
    .pxm-daychips button,
    .pxm-rt .pxm-tp input,
    .pxm-rt input.dose,
    .pxm-rt .del,
    .pxm-dates .f input,
    .pxm-prn-amt input,
    .pxm-btn,
    .pxm-pop .pxm-prow .pxm-tp input{min-height:44px}
    .pxm-pop .pxm-pact button{min-height:44px}
    .pxm-cell{min-height:60px;padding:4px 3px}
    .pxm-dow,.pxm-grid{gap:3px}
    /* The monthly cell popover is body-anchored at the tapped cell's
       left edge, so its 220px card runs off a 360px viewport (and off
       the bottom on the lower calendar rows). Same bottom-sheet
       treatment as .pxm-pop above; inline left/top need outranking. */
    .pxm-mon-cell-pop{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;
      width:100%;min-width:0;max-height:60vh;overflow:auto;padding:12px;
      border-radius:var(--pxm-radius-lg) var(--pxm-radius-lg) 0 0}
    .pxm-mcp-btn{min-height:44px}
  }

  /* ---- Conversion additions (HTML-form rollout). ----------------------
     Every rule above is BARE, exactly as it was in the template style
     block, and must stay bare: #pxmScrim is portaled onto document.body
     while the modal is open (_portalScrimToBody) and #pxm-mon-cell-pop is
     created on document.body, so a root-scoped rule would stop matching
     at the moment the modal is visible. The pxm- prefix is the
     namespace that makes that safe.

     The form root <div class="pxm-pe-root"> carries NO rule. All five of
     its children are position:fixed, so the wrapper changes no geometry —
     PROVIDED it never gains transform, filter, contain or will-change,
     any of which would make it a containing block for them.

     The three rules below carry what inline style= attributes would (no
     style= is allowed in an HTML form template). .pxm-hidden is LAST in this
     file on purpose: it is (0,1,0),
     the same specificity as .pxm-rng-end{display:flex} and
     .pxm-rng-readonly-bar{display:flex}, so document order decides the tie
     and .pxm-hidden has to win. Nothing may be appended after it. */
  .pxm-cyclechips{margin-top:11px}
  .pxm-seednote{margin:0 0 9px}
  .pxm-hidden{display:none}