/* dc_session_modal_html — the dispatch session modal's own rules, kept here
 * because the Anvil server strips a template's <style> block. Rules are scoped
 * by their selector preludes.
 *
 * ROOT. The form root is the .dcsm-root div itself, so its rule stays BARE
 * and byte-identical.
 * .dcsm-mode-acute and .dcsm-mode-monthly stay bare for the same reason —
 * dcsmInit adds one of them TO the root, so a :where(.dcsm-root) wrapper would
 * never match its own subject.
 *
 * THE SUCCESS SUMMARY IS NOT IN THE ROOT. _build_success_summary_dom builds a
 * detached div and hands it to px_form_alert_dom, which mounts it in the
 * shell's own overlay, so every .dcsm-success-* rule stays BARE too. Scoping
 * them under .dcsm-root would silently unstyle the post-dispatch summary.
 *
 * ORDER. This asset is a head <link>, so it loads after theme/assets/theme.css
 * and before the dependency's runtime theme injection. The audit is PER ELEMENT, not per class name: a dcsm- name
 * no other sheet declares still ties when it lands on an element that also
 * wears a px-* class the dependency declares. One element does. The Clear
 * Session button is class="px-btn px-btn-outline dcsm-clear-btn", and .px-btn
 * (px-shared-dependencies-anvil/client_code/px_theme/_px_theme_css.py)
 * declares padding, font-size, line-height and white-space at (0,1,0) — the
 * weight a bare .dcsm-clear-btn has — and LATER on the page, because
 * PX_CHROME_CSS is appended to <head> at startup (px_theme.py) after every
 * static link. So that one rule is written as the compound
 * .px-btn.dcsm-clear-btn (0,2,0) and wins on specificity instead of order, the
 * fix theme.css already applies to .px-btn.px-btn-touch for the same
 * reason. The submit button (px-btn px-btn-primary px-btn-touch) and the three
 * px-loading-* nodes carry no dcsm- class and this form declares nothing for
 * them. The root wears px-anvil-reset, which declares nothing on its own
 * element (theme.css is descendant selectors only), so .dcsm-root ties
 * with nothing. Every other class declared here is dcsm-prefixed and is
 * declared in no other template, in theme.css or in
 * px-shared-dependencies-anvil. No .themed-scrollbar rule —
 * this form never carried one.
 *
 * SCOPING. :where(.dcsm-root) adds zero specificity, so every scoped rule keeps
 * exactly the weight its bare selector had. No @keyframes, no url(), no
 * @font-face.
 *
 * THE THREE NEW CLASSES replace the seven markup style= sets the format bans.
 * .dcsm-hidden is written as a COMPOUND against each element's own class,
 * because .dcsm-restore-banner, .dcsm-queue-chip, .dcsm-missing-warn,
 * .dcsm-missing-breakdown and .dcsm-replay-overlay each declare a display of
 * their own at (0,1,0): a lone .dcsm-hidden would tie and be decided by the
 * order of this file. The module shows and hides all five by writing
 * element.style.display exactly as it did before, and inline style beats both.
 *
 * NO DESIGNER GATE. Every hide here is the .dcsm-hidden state class in this
 * head-linked asset. The designer canvas loads this asset, so the canvas shows
 * what first paint shows. This section carries no live class to gate on.
 */

.dcsm-root {
  font-family: var(--px-font);
  color: var(--px-text-primary);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 4px 4px 12px 4px;
}
:where(.dcsm-root) .dcsm-panel-title-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
:where(.dcsm-root) .px-btn.dcsm-clear-btn {
  padding: 4px 8px;
  line-height: 1.05;
  font-size: 11px;
  font-weight: 600;
  width: 68px;
  min-height: 40px;
  white-space: normal;
  word-spacing: 999px;
  text-align: center;
}
:where(.dcsm-root) .dcsm-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { :where(.dcsm-root) .dcsm-cols { grid-template-columns: 1fr; } }
:where(.dcsm-root) .dcsm-panel {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
:where(.dcsm-root) .dcsm-panel-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--px-text-muted);
  display: flex; align-items: center; gap: 8px;
}
:where(.dcsm-root) .dcsm-panel-title::before {
  content: ''; display: inline-block; width: 3px; height: 18px;
  background: var(--accent); border-radius: 2px;
}
:where(.dcsm-root) .dcsm-readiness-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
:where(.dcsm-root) .dcsm-stat {
  background: var(--px-bg-subtle); border-radius: var(--px-radius-sm);
  padding: 10px; text-align: center;
  transition: background 0.25s, color 0.25s;
}
:where(.dcsm-root) .dcsm-stat-value { font-size: 22px; font-weight: 700; color: var(--accent); }
:where(.dcsm-root) .dcsm-stat-label {
  font-size: 11px; color: var(--px-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
:where(.dcsm-root) .dcsm-stat.dcsm-stat-done {
  background: rgba(34, 197, 94, 0.12);
}
:where(.dcsm-root) .dcsm-stat.dcsm-stat-done .dcsm-stat-value { color: #15803d; }
:where(.dcsm-root) .dcsm-scanner-toggle {
  display: flex; gap: 6px; padding: 4px;
  background: var(--px-bg-subtle); border-radius: var(--px-radius-sm);
  width: fit-content;
}
:where(.dcsm-root) .dcsm-scanner-toggle button {
  background: transparent; border: none; padding: 6px 14px;
  font-size: 12px; font-weight: 600; color: var(--px-text-muted);
  cursor: pointer; border-radius: calc(var(--px-radius-sm) - 2px);
  transition: background 0.15s, color 0.15s;
}
:where(.dcsm-root) .dcsm-scanner-toggle button.active {
  background: var(--px-bg-card); color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
:where(.dcsm-root) .dcsm-scanner-host { min-height: 80px; }
:where(.dcsm-root) .dcsm-scanner-host[data-cs-active="false"] { display: none; }
:where(.dcsm-root) .dcsm-list {
  display: flex; flex-direction: column; gap: 6px;
}
:where(.dcsm-root) .dcsm-list-scroll {
  max-height: 60vh; overflow-y: auto;
}
:where(.dcsm-root) .dcsm-list-empty {
  font-size: 12px; color: var(--px-text-muted);
  font-style: italic; padding: 8px;
}
:where(.dcsm-root) .dcsm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-card);
  transition: background 0.2s, border-color 0.2s;
}
:where(.dcsm-root) .dcsm-row.dcsm-flash {
  background: var(--accent-subtle); border-color: var(--accent);
}
:where(.dcsm-root) .dcsm-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(.dcsm-root) .dcsm-row-title { font-weight: 600; font-size: 13px; }
:where(.dcsm-root) .dcsm-row-sub { font-size: 11px; color: var(--px-text-muted); }
:where(.dcsm-root) .dcsm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--accent-subtle); color: var(--accent);
  border-radius: 999px; margin-left: 4px;
}
:where(.dcsm-root) .dcsm-pill.dcsm-pill-cd { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
:where(.dcsm-root) .dcsm-pill.dcsm-pill-fridge { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
:where(.dcsm-root) .dcsm-pill.dcsm-pill-pending { background: rgba(245, 158, 11, 0.16); color: #b45309; }
:where(.dcsm-root) .dcsm-row-remove {
  background: transparent; border: 1px solid var(--px-border);
  color: var(--px-text-muted); font-size: 18px; line-height: 1;
  width: 28px; height: 28px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
:where(.dcsm-root) .dcsm-row-remove:hover {
  background: var(--px-danger-subtle, rgba(220, 38, 38, 0.08));
  color: var(--px-danger); border-color: var(--px-danger);
}
:where(.dcsm-root) .dcsm-footer {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--px-border);
}
:where(.dcsm-root) .dcsm-footer-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px; align-items: end;
}
@media (max-width: 700px) { :where(.dcsm-root) .dcsm-footer-row { grid-template-columns: 1fr; } }
:where(.dcsm-root) .dcsm-input {
  font-family: var(--px-font); font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm); background: var(--px-input-bg);
  color: var(--px-text-primary); width: 100%;
}
:where(.dcsm-root) .dcsm-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
:where(.dcsm-root) .dcsm-field-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--px-text-muted);
}
:where(.dcsm-root) .dcsm-totals {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--px-text-muted);
}
:where(.dcsm-root) .dcsm-totals strong { color: var(--px-text-primary); font-size: 14px; }
:where(.dcsm-root) .dcsm-prereq-box {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-subtle);
  transition: border-color 0.15s, background 0.15s;
}
:where(.dcsm-root) .dcsm-prereq-box.has-issues {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.06);
}
:where(.dcsm-root) .dcsm-missing-warn {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #92400e;
}
:where(.dcsm-root) .dcsm-missing-breakdown {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; color: #b45309;
}
:where(.dcsm-root) .dcsm-missing-breakdown span {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
}
:where(.dcsm-root) .dcsm-missing-warn label {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; font-weight: 600; color: #b45309; cursor: pointer;
}
:where(.dcsm-root) .dcsm-driver-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--px-border);
}
:where(.dcsm-root) .dcsm-driver-row .dcsm-input { flex: 1 1 auto; }
:where(.dcsm-root) .dcsm-driver-required {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--px-danger, #dc2626);
  display: none;
}
:where(.dcsm-root) .dcsm-prereq-box.driver-missing .dcsm-driver-required { display: inline; }
:where(.dcsm-root) .dcsm-prereq-box.driver-missing .dcsm-input {
  border-color: var(--px-danger, #dc2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.dcsm-success-root {
  font-family: var(--px-font);
  color: var(--px-text-primary);
  line-height: 1.5;
  min-width: 380px;
  max-width: 480px;
}
.dcsm-success-meta {
  font-size: 12px;
  color: var(--px-text-muted);
  margin-bottom: 4px;
}
.dcsm-success-section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 6px;
  padding-left: 8px;
  border-left: 3px solid currentColor;
}
.dcsm-success-section-dispatched { color: var(--px-success); }
.dcsm-success-section-left-behind { color: var(--px-warning); }
.dcsm-success-section-warnings { color: var(--px-danger); }
.dcsm-success-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 4px 0;
}
.dcsm-success-row-label { font-size: 13px; color: var(--px-text-muted); }
.dcsm-success-row-value { font-size: 14px; font-weight: 600; color: var(--px-text-primary); }
.dcsm-success-row-sub { font-size: 12px; font-weight: 500; color: var(--px-text-muted); }
.dcsm-success-note {
  font-size: 12px; color: var(--px-text-muted);
  font-style: italic; margin-top: 4px;
}
.dcsm-success-warning-line {
  font-size: 13px; color: var(--px-text-primary); padding: 2px 0;
}
.dcsm-mode-monthly {
  --accent: var(--px-monthly, #d97706);
  --accent-hover: #b45309;
  --accent-text: #fff;
  --accent-subtle: rgba(217, 119, 6, 0.12);
}
.dcsm-mode-acute {
  --accent: var(--px-acute, #15803d);
  --accent-hover: #166534;
  --accent-text: #fff;
  --accent-subtle: rgba(21, 128, 61, 0.12);
}
:where(.dcsm-root) .dcsm-queue-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 999px;
}
:where(.dcsm-root) .dcsm-queue-chip.dcsm-queue-chip-stalled {
  background: rgba(217, 119, 6, 0.16);
  color: #b45309;
}
:where(.dcsm-root) .dcsm-restore-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-subtle);
  font-size: 13px;
  --px-banner-accent: var(--px-text);
}
:where(.dcsm-root) .dcsm-restore-banner[data-state="valid"] {
  border-color: rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  --px-banner-accent: #1d4ed8;
}
:where(.dcsm-root) .dcsm-restore-banner[data-state="stale"],
:where(.dcsm-root) .dcsm-restore-banner[data-state="mismatched"] {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  --px-banner-accent: #b91c1c;
}
:where(.dcsm-root) .dcsm-restore-text { flex: 1 1 auto; }
:where(.dcsm-root) .dcsm-restore-action,
:where(.dcsm-root) .dcsm-discard-action {
  background: transparent;
  border: 1px solid var(--px-banner-accent);
  padding: 6px 12px;
  border-radius: var(--px-radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--px-banner-accent);
}
:where(.dcsm-root) .dcsm-restore-action { background: var(--px-banner-accent); color: #fff; }
:where(.dcsm-root) .dcsm-replay-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  gap: 16px; z-index: 9999;
  color: #fff;
  font-size: 14px; font-weight: 600;
}
:where(.dcsm-root) .dcsm-replay-cancel {
  background: transparent; border: 1px solid #fff;
  padding: 6px 14px; border-radius: var(--px-radius-sm);
  color: #fff; cursor: pointer; font-weight: 600;
}

/* The markup style= sets the format bans, as classes. Each hide is a compound
   so it outranks the element's own display declaration above.
   .dcsm-timers-mount is not one of those: a Timer renders a real empty div,
   so inside a flex column with gap: 16px the two Timers would each add a flex
   item and a gap. The hidden wrapper keeps them out of the layout. .px-anvil-reset .anvil-component (theme.css) !important-s their
   padding, margin, max-width and border and declares no display, so nothing
   ties. */
:where(.dcsm-root) .dcsm-timers-mount { display: none; }
/* DESIGNER GATE on .dcsm-live, which dcsmPrimeFirstPaint adds from __init__
   while the form is detached. The queue mount holds the queue_slot dropzone and
   a dropzone inside a display: none box measures 0 by 0 on the canvas, which
   runs no Python. Runtime is unchanged: the class is on the root before the
   first paint, exactly as the ungated rule was. */
:where(.dcsm-root.dcsm-live) .dcsm-queue-mount { display: none; }
:where(.dcsm-root) .dcsm-panel-title.dcsm-panel-title-spaced { margin-top: 8px; }
:where(.dcsm-root) .dcsm-restore-banner.dcsm-hidden,
:where(.dcsm-root) .dcsm-queue-chip.dcsm-hidden,
:where(.dcsm-root) .dcsm-missing-warn.dcsm-hidden,
:where(.dcsm-root) .dcsm-missing-breakdown.dcsm-hidden,
:where(.dcsm-root) .dcsm-replay-overlay.dcsm-hidden { display: none; }