/* software.css: Software Portal GUI Framework stylesheet (11b-software-portal-gui-architecture-v1.md v2.1).
   Linked only on Software Portal routes via shell({ portalMode: "software" }) so the Web Portal first screen
   pays 0 extra CSS bytes. All --sp-* tokens alias strictly onto portal.css Part 0 --kit-* tokens. */

:root {
  --sp-canvas: var(--kit-bg);
  --sp-surface: var(--kit-surface);
  --sp-elevated: var(--kit-shade);
  --sp-ink: var(--kit-text);
  --sp-muted: var(--kit-muted);
  --sp-border: var(--kit-line);
  --sp-border-strong: var(--kit-control);
  --sp-line: var(--kit-line);
  --sp-edge: var(--kit-control);
  --sp-focus: var(--kit-brand);
  --sp-accent: var(--kit-brand);
  --sp-accent-ink: var(--kit-brand-ink);
  --sp-ok-bg: var(--kit-ok-bg);
  --sp-ok-ink: var(--kit-ok-text);
  --sp-warn-bg: var(--kit-bad-bg);
  --sp-warn-ink: var(--kit-bad-text);
  --sp-bad-bg: var(--kit-bad-bg);
  --sp-bad-ink: var(--kit-bad-text);
  --sp-danger-bg: var(--kit-danger);
  --sp-danger-ink: var(--kit-danger-ink);
  --sp-danger: var(--kit-danger);

  --sp-top-bar-h: 3.5rem;
  --sp-rail-w: 16rem;
  --sp-drawer-w: 28.75rem;
  --sp-hit-min: 3rem;
  --sp-destructive-gap: 0.5rem;
  --sp-radius-lg: 0.75rem;
  --sp-radius-md: 0.5rem;
  --sp-radius-sm: 0.375rem;
}

/* Full-Viewport Escape Hatch from .kit-main (72rem) and Legacy .kit-top */
.kit-main--software,
.kit-main:has(> .sp-shell) {
  max-width: none;
  margin: 0;
  padding: 0;
}
body:has(.sp-shell) > .kit-top {
  display: none;
}

.sp-tabular {
  font-variant-numeric: tabular-nums;
}

/* 2-Tier Responsive Viewport Law: Fixed 100dvh App Frame on >= 1024px; Natural Stack on < 1024px */
.sp-shell {
  display: grid;
  grid-template-columns: var(--sp-rail-w) minmax(0, 1fr);
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--sp-canvas);
  color: var(--sp-ink);
}
.sp-shell:not(:has(> .sp-app-rail)) {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 63.99rem) {
  .sp-shell {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: visible;
  }
}

/* Three Physical Operating Postures (kiosk, command, desk) */
.sp-shell[data-sp-posture="kiosk"] {
  grid-template-columns: minmax(0, 1fr);
  --sp-hit-min: 3.5rem;
  --sp-destructive-gap: 0.625rem;
}
.sp-shell[data-sp-posture="kiosk"] .kit-btn,
.sp-shell[data-sp-posture="kiosk"] .sp-target {
  min-height: 3.5rem;
  font-size: 1.05rem;
}

.sp-shell[data-sp-posture="command"] {
  --sp-hit-min: 3rem;
  --sp-destructive-gap: 0.5rem;
}
.sp-shell[data-sp-posture="desk"] {
  --sp-hit-min: 3rem;
  --sp-destructive-gap: 0.5rem;
  --sp-drawer-w: 33.75rem;
}
.sp-shell[data-sp-posture="command"] .kit-btn,
.sp-shell[data-sp-posture="command"] .sp-target,
.sp-shell[data-sp-posture="desk"] .kit-btn,
.sp-shell[data-sp-posture="desk"] .sp-target {
  min-height: 3rem;
}

/* Ergonomic Touch Target Floor & Secondary Button Variant (.kit-btn--ghost) */
.sp-shell input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
.sp-shell select,
.sp-shell button,
.sp-shell .kit-btn,
.sp-shell .sp-target {
  min-height: var(--sp-hit-min);
}
.sp-shell input[type="password"] {
  font: inherit;
  color: var(--sp-ink);
  background: var(--sp-surface);
  border: 2px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-sm);
  padding: 0.5rem 0.75rem;
}
.kit-btn--ghost {
  background: var(--sp-surface);
  color: var(--sp-accent);
  border-color: var(--sp-border-strong);
}
.kit-btn--ghost:hover {
  background: var(--sp-elevated);
  color: var(--sp-ink);
}

/* Kiosk Header Deduplication when renderKioskShell is nested inside renderSpAppShell */
.sp-shell .platform-kiosk-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  margin-bottom: 0.75rem;
  background: var(--sp-elevated);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
}

/* Left App Rail & Main Operational Column */
.sp-app-rail {
  background: var(--sp-surface);
  border-right: 1px solid var(--sp-border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}
.sp-app-rail-header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--sp-border);
}
.sp-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.sp-rail-list a {
  width: 100%;
  justify-content: space-between;
}

.sp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.sp-sample-banner,
.sp-flash-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: var(--sp-warn-bg);
  color: var(--sp-warn-ink);
  border-bottom: 2px solid var(--sp-warn-ink);
  font-weight: 700;
}

.sp-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-border);
}
.sp-topbar-title,
.sp-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}
.sp-canvas-title,
.sp-top-title {
  margin: 0;
  font-size: 1.25rem;
}

.portal-world-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem;
  background: var(--sp-elevated);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
}

.sp-station-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-border);
}
.sp-station-pending {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-hit-min);
  padding: 0.35rem 0.75rem;
  border-radius: var(--sp-radius-sm);
  border: 1px dashed var(--sp-border-strong);
  background: var(--sp-elevated);
  color: var(--sp-muted);
  font-weight: 600;
}

.sp-canvas {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Surfaces, Cards, Record Lists & Badges */
.sp-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  padding: 1rem;
  box-shadow: inset 0 1px 0 var(--kit-line), 0 2px 6px var(--kit-shade);
}

.sp-record-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sp-record-list > li,
.sp-record-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-inline-start: 4px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-md);
  box-shadow: 0 2px 6px var(--kit-shade);
}

.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--sp-border-strong);
  background: var(--sp-surface);
  color: var(--sp-ink);
}
.sp-badge--ok {
  background: var(--sp-ok-bg);
  color: var(--sp-ok-ink);
  border-color: var(--sp-ok-ink);
}
.sp-badge--warn {
  background: var(--sp-warn-bg);
  color: var(--sp-warn-ink);
  border-color: var(--sp-warn-ink);
}
.sp-badge--danger {
  background: var(--sp-danger-bg);
  color: var(--sp-danger-ink);
  border-color: var(--sp-danger-bg);
}

.sp-lifecycle-actions,
.sp-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-destructive-gap);
  align-items: center;
}

.sp-inline-form,
.sp-role-preview-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.sp-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.sp-pin-switcher,
.sp-station-jump {
  position: relative;
}
.sp-pin-switcher-form,
.sp-station-jump-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.375rem);
  z-index: 30;
  min-width: 18rem;
}

/* Archetype 2: Split Inbox */
.sp-split-inbox {
  display: grid;
  grid-template-columns: 15rem 18rem minmax(0, 1fr) 18rem;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 87.99rem) {
  .sp-split-inbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 63.99rem) {
  .sp-split-inbox {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sp-queue-list,
.sp-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sp-thread-item {
  border: 1px solid var(--sp-border);
  border-inline-start: 4px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-md);
  padding: 0.625rem 0.75rem;
  background: var(--sp-surface);
}
.sp-thread-item.is-active {
  border-inline-start-color: var(--sp-accent);
  background: var(--sp-elevated);
}
.sp-thread-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Archetype 3: Kanban Board */
.sp-kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.sp-kanban-col-header,
.sp-kanban-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sp-kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.sp-kanban-card {
  border-inline-start: 4px solid var(--sp-accent);
}
.sp-kanban-card[data-status-tone="ok"] {
  border-inline-start-color: var(--sp-ok-ink);
}
.sp-kanban-card[data-status-tone="warn"] {
  border-inline-start-color: var(--sp-warn-ink);
}
.sp-kanban-card[data-status-tone="danger"] {
  border-inline-start-color: var(--sp-danger-bg);
}

/* Archetype 4 & 7: Calendar Grid, KPI Strip & Data Table */
.sp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  padding: 0.75rem 1.25rem 0;
}
.sp-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sp-kpi-value {
  font-size: 1.5rem;
}
.sp-table-wrap {
  overflow-x: auto;
}
.sp-calendar-event[data-segment="hollow_processing_gap"] {
  border: 2px dashed var(--sp-border-strong);
  background: var(--sp-elevated);
  padding: 0.5rem;
  border-radius: var(--sp-radius-sm);
}

/* Archetype 5: Inspection Grid */
.sp-inspection-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.sp-inspection-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0.5rem 0;
}

/* Archetype 6 & 8: Wizard, Slide-Over Drawer & Print Studio */
.sp-drawer-panel {
  width: min(100%, var(--sp-drawer-w));
  margin-top: 0.5rem;
}
.sp-wizard-steps,
.sp-pipeline-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sp-print-studio,
.sp-split-ledger-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.sp-print-sheet {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-sm);
  padding: 1.25rem;
}
.sp-print-preview-header,
.sp-data-table-header,
.sp-unit-map-header,
.sp-split-ledger-header,
.sp-launchpad-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sp-kanban-col-header h2,
.sp-kanban-card-top h3,
.sp-print-preview-header h2,
.sp-data-table-header h2,
.sp-unit-map-header h2,
.sp-split-ledger-header h2,
.sp-launchpad-card-top h3 {
  margin: 0;
}

/* Sub-Primitives: Unit Map Grid & Launchpad Grid */
.sp-unit-map-grid,
.sp-launchpad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.875rem;
}
.sp-unit-cell[data-unit-status="delinquent_overlocked"] {
  border-inline-start: 4px solid var(--sp-danger-bg);
}
.sp-unit-cell[data-unit-status="vacant_ready"] {
  border-inline-start: 4px solid var(--sp-ok-ink);
}

/* Zero-Chrome @media print Isolation */
@media print {
  .kit-top, .kit-skip, .sp-app-rail, .sp-topbar, .sp-station-tabs,
  .sp-kpi-strip, .sp-print-controls, .sp-print-preview-header,
  .sp-drawer, .sp-global-drawer-slot, .sp-slide-over-slot, .sp-sample-banner, .sp-flash-banner {
    display: none !important;
  }
  .sp-shell, .sp-main, .sp-canvas, .sp-print-studio, .sp-print-preview-pane {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}