/* =========================================================================
   Flameo Operations -- styles.css
   Custom, hand-written CSS. No framework. Mobile-first, theme-aware.
   ========================================================================= */

:root {
  /* Warm neutrals */
  --ink: #1C1815;
  --paper: #FAF7F2;
  --surface: #FFFFFF;
  --border: #E6DED2;
  --text-secondary: #6B6058;
  --text-muted: #948A7E;

  /* Brand accents -- used ONLY for brand mark, primary actions, active nav */
  --flame: #E4572E;
  --flame-ink: #FFFFFF;
  --ember: #F2A93B;

  /* Semantic status colors -- deliberately distinct from brand accents */
  --status-green: #2E9E5B;
  --status-green-bg: #E4F5EA;
  --status-amber: #D9A521;
  --status-amber-bg: #FBF1D8;
  --status-red: #D8402C;
  --status-red-bg: #FBE5E1;
  --status-neutral-bg: #EFEAE2;
  --status-neutral-text: #6B6058;

  --shadow: 0 1px 2px rgba(28, 24, 21, 0.06), 0 1px 1px rgba(28, 24, 21, 0.04);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F3EEE7;
    --paper: #17130F;
    --surface: #211B16;
    --border: #382F27;
    --text-secondary: #B8AA9B;
    --text-muted: #8C7F71;

    --flame: #FF7A50;
    --ember: #F5B65A;

    --status-green: #4CC181;
    --status-green-bg: #12291D;
    --status-amber: #E8BE52;
    --status-amber-bg: #322A12;
    --status-red: #F16C5A;
    --status-red-bg: #341813;
    --status-neutral-bg: #2A241D;
    --status-neutral-text: #B8AA9B;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --ink: #F3EEE7;
  --paper: #17130F;
  --surface: #211B16;
  --border: #382F27;
  --text-secondary: #B8AA9B;
  --text-muted: #8C7F71;

  --flame: #FF7A50;
  --ember: #F5B65A;

  --status-green: #4CC181;
  --status-green-bg: #12291D;
  --status-amber: #E8BE52;
  --status-amber-bg: #322A12;
  --status-red: #F16C5A;
  --status-red-bg: #341813;
  --status-neutral-bg: #2A241D;
  --status-neutral-text: #B8AA9B;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3 {
  font-family: "Archivo", "Segoe UI", sans-serif;
  font-weight: 700;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}

.mono, .countdown-number, .readiness-bar-label, .opening-card-stat-num,
.stat-tile-num, .attention-stat-num, .activity-item-date, .milestone-item-date,
.category-row-gate-pct {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

button { font-family: inherit; }

a { color: var(--flame); }

:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------- */

.app-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------------
   Build 4: dev-mode banner, saving indicator, user menu
   --------------------------------------------------------------------- */

.dev-mode-banner {
  background: var(--status-amber-bg);
  color: var(--status-amber);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  position: sticky;
  top: 49px;
  z-index: 19;
}

/* Build 6: distinct from .dev-mode-banner (amber) so a "View As" preview
   is never visually confused with the generic dev-mode notice -- a
   different, attention-getting hue (blue) for a different meaning. */
.preview-mode-banner {
  background: var(--status-blue-bg, #e7f0fb);
  color: var(--status-blue, #1a56b0);
  position: static;
}

.save-indicator {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.save-indicator-saving { color: var(--text-muted); }
.save-indicator-saved { color: var(--status-green); background: var(--status-green-bg); }
.save-indicator-error { color: var(--status-red); background: var(--status-red-bg); }

.user-menu { position: relative; }

.user-menu-trigger {
  background: var(--status-neutral-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  width: min(300px, 80vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 30;
}

.brand-mark { font-size: 20px; line-height: 1; }

.brand-text {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: var(--flame);
}

.app-main {
  padding: 16px;
  padding-bottom: 84px; /* clears fixed bottom nav on mobile */
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .app-main { padding-bottom: 32px; }
}

.screen { display: flex; flex-direction: column; gap: 24px; }

/* ---------------------------------------------------------------------
   Desktop top nav
   --------------------------------------------------------------------- */

.nav-bar {
  display: none;
}

@media (min-width: 900px) {
  .nav-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .nav-bar-items { display: flex; gap: 2px; }
}

.nav-item {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  min-height: 44px;
}

.nav-item:hover { color: var(--ink); }

.nav-item-active {
  color: var(--flame);
  border-bottom-color: var(--flame);
}

.nav-item-disabled {
  color: var(--text-muted);
  padding: 14px 12px;
  font-size: 14px;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.soon-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--status-neutral-bg);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   Mobile bottom nav
   --------------------------------------------------------------------- */

.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 900px) {
  .bottom-nav { display: none; }
}

.bottom-nav-item {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  min-height: 56px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.bottom-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.bottom-nav-item-active { color: var(--flame); }
.bottom-nav-item-active .bottom-nav-dot { background: var(--flame); }

/* ---------------------------------------------------------------------
   Stat tiles (Home)
   --------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 600px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
}

.stat-tile-num { font-size: 30px; font-weight: 700; font-family: "Archivo", sans-serif; }
.stat-tile-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.stat-tile-caption { font-size: 11px; color: var(--text-muted); }

.stat-tile-red .stat-tile-num { color: var(--status-red); }

/* ---------------------------------------------------------------------
   Section headers / quiet sections / filters
   --------------------------------------------------------------------- */

.section-title {
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 4px;
}

.section-title-row .section-title { margin-bottom: 0; }

.section-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  max-width: 60ch;
}

.quiet-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.filter-chip-active {
  background: var(--flame);
  border-color: var(--flame);
  color: var(--flame-ink);
}

.empty-state { color: var(--text-muted); font-size: 14px; }

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-green { background: var(--status-green-bg); color: var(--status-green); }
.badge-amber { background: var(--status-amber-bg); color: var(--status-amber); }
.badge-red { background: var(--status-red-bg); color: var(--status-red); }
.badge-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.badge-muted { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }

/* Build 5: the Opening Readiness Status badge is meant to be the single
   most prominent element in the dashboard header (the "can I tell in 10
   seconds" requirement), so it gets a larger variant of the same badge. */
.badge-lg { font-size: 14px; padding: 6px 14px; font-weight: 800; }

.chip {
  display: inline-block;
  background: var(--status-neutral-bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.chip-green { background: var(--status-green-bg); color: var(--status-green); }
.chip-amber { background: var(--status-amber-bg); color: var(--status-amber); }
.chip-red { background: var(--status-red-bg); color: var(--status-red); }

/* ---------------------------------------------------------------------
   Readiness bar
   --------------------------------------------------------------------- */

.readiness-bar { display: flex; align-items: center; gap: 10px; }

.readiness-bar-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--status-neutral-bg);
  overflow: hidden;
}

.readiness-bar-fill { height: 100%; border-radius: 999px; }
.readiness-bar-fill-green { background: var(--status-green); }
.readiness-bar-fill-amber { background: var(--status-amber); }
.readiness-bar-fill-red { background: var(--status-red); }

.readiness-bar-label {
  font-size: 13px;
  font-weight: 700;
  min-width: 52px;
  text-align: right;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   Category rows
   --------------------------------------------------------------------- */

.category-list { display: flex; flex-direction: column; gap: 14px; }

.category-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (min-width: 600px) {
  .category-row {
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 16px;
  }
}

.category-row-name { font-weight: 600; font-size: 14px; }

.category-row-gate {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-row-gate-pct { font-size: 13px; color: var(--text-secondary); }

/* ---------------------------------------------------------------------
   Opening cards (Home + Openings list)
   --------------------------------------------------------------------- */

.opening-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px) {
  .opening-card-list { grid-template-columns: repeat(2, 1fr); }
}

.opening-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: inherit;
  color: inherit;
  min-height: 44px;
}

.opening-card:hover { border-color: var(--flame); }

.opening-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.opening-card-title { font-size: 17px; }

.opening-card-countdown {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

.opening-card-stats {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 18px;
}

.opening-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opening-card-stat-num { font-size: 18px; font-weight: 700; }
.opening-card-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.stat-red { color: var(--status-red); }

.opening-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------------------------------------------------------------------
   Project dashboard header
   --------------------------------------------------------------------- */

.project-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: stretch;
}

.project-header-main { display: flex; flex-direction: column; gap: 8px; min-width: 220px; flex: 1; }
.project-header-title { font-size: 22px; }
.project-header-address { color: var(--text-secondary); font-size: 14px; margin: 0; }

.project-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  align-items: center;
}

.countdown-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 24px;
  text-align: center;
  min-width: 180px;
  box-shadow: var(--shadow);
}

.countdown-number {
  font-size: 40px;
  font-weight: 700;
  color: var(--flame);
  line-height: 1;
}

.countdown-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 6px;
}

.countdown-phase {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------------------------------------------------------------------
   CRITICAL BLOCKERS -- the loudest thing on the page, on purpose.
   --------------------------------------------------------------------- */

.blockers-section {
  background: var(--status-red-bg);
  border: 2px solid var(--status-red);
  border-left: 8px solid var(--status-red);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blockers-title {
  color: var(--status-red);
  font-size: 18px;
  letter-spacing: 0.02em;
}

.blockers-subtitle {
  margin: 0;
  color: var(--status-red);
  font-weight: 600;
  font-size: 13px;
}

.blocker-card {
  background: var(--surface);
  border: 1px solid var(--status-red);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blocker-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.blocker-card-name { font-weight: 700; font-size: 14px; }

.blocker-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
}

.blocker-card-notes {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.blockers-section-clear {
  background: var(--status-green-bg);
  border: 1px solid var(--status-green);
  border-left: 1px solid var(--status-green);
  padding: 14px 18px;
}

.blockers-title-clear {
  color: var(--status-green);
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   Overall readiness + attention stats
   --------------------------------------------------------------------- */

.overall-readiness-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.overall-readiness-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overall-readiness-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

.readiness-status {
  align-self: flex-start;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
}

.readiness-status-green { background: var(--status-green-bg); color: var(--status-green); }
.readiness-status-yellow { background: var(--status-amber-bg); color: var(--status-amber); }
.readiness-status-red { background: var(--status-red-bg); color: var(--status-red); }

.attention-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  flex: 1;
  min-width: 240px;
}

@media (min-width: 480px) {
  .attention-stats { grid-template-columns: repeat(4, 1fr); }
}

.attention-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.attention-stat-num { font-size: 22px; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------------
   Activity / milestones lists
   --------------------------------------------------------------------- */

.activity-list, .milestone-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-item, .milestone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child, .milestone-item:last-child { border-bottom: none; padding-bottom: 0; }

.activity-item-name { flex: 1; min-width: 120px; font-weight: 600; }
.activity-item-date, .milestone-item-date { color: var(--text-muted); font-size: 12px; }
.milestone-item-date { min-width: 88px; }

/* ---------------------------------------------------------------------
   Risks
   --------------------------------------------------------------------- */

.risk-list { display: flex; flex-direction: column; gap: 12px; }

.risk-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.risk-card-critical { border-left: 5px solid var(--status-red); }
.risk-card-high { border-left: 5px solid var(--status-amber); }
.risk-card-medium { border-left: 5px solid var(--text-muted); }

.risk-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.risk-card-status { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.risk-card-title { font-weight: 700; font-size: 14px; }
.risk-card-desc { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* ---------------------------------------------------------------------
   Approval placeholder card
   --------------------------------------------------------------------- */

.approval-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approval-card-title { font-weight: 700; }
.approval-card-desc { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* ---------------------------------------------------------------------
   Authorization gate card (distinct from Critical Blockers -- muted/
   neutral tone when locked, since being locked at this stage is
   expected, not an alarm).
   --------------------------------------------------------------------- */

.gate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 6px solid var(--text-muted);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}

.gate-card-unlocked {
  border-left-color: var(--status-green);
}

.gate-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.gate-card-icon { font-size: 18px; }

.gate-card-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------------------------------------------------------------------
   Task cards (Task List screen)
   --------------------------------------------------------------------- */

.task-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 44px;
}

.task-card:hover { border-color: var(--flame); }

.task-card-critical { border-left: 5px solid var(--status-red); }
.task-card-overdue { background: var(--status-red-bg); }

.task-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.task-card-name { font-weight: 700; font-size: 15px; }

.task-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.task-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.critical-task-banner {
  background: var(--status-red);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Task Detail screen
   --------------------------------------------------------------------- */

.task-detail-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-detail-title { font-size: 20px; }

.task-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.task-detail-meta-item { display: flex; flex-direction: column; gap: 2px; }
.task-detail-meta-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.03em; }

.task-detail-days {
  font-weight: 700;
}

.task-detail-days-overdue { color: var(--status-red); }

.dependency-notice {
  background: var(--status-amber-bg);
  color: var(--status-amber);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
}

.evidence-gate-notice {
  background: var(--status-amber-bg);
  color: var(--status-amber);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 500px) {
  .action-grid { grid-template-columns: repeat(3, 1fr); }
}

.action-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: 8px;
  padding: 14px 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  min-height: 52px;
}

.action-btn:hover { border-color: var(--flame); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.action-btn-primary { background: var(--flame); border-color: var(--flame); color: var(--flame-ink); }
.action-btn-danger { background: var(--status-red-bg); border-color: var(--status-red); color: var(--status-red); }
.action-btn-neutral { background: var(--status-neutral-bg); }

.comment-list, .evidence-list, .activity-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-item, .evidence-item, .activity-log-item {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.comment-item:last-child, .evidence-item:last-child, .activity-log-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.comment-item-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.comment-item-user { font-weight: 700; color: var(--ink); }
.comment-item-body { margin: 0; }

.evidence-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.evidence-item-ref { font-weight: 600; }
.evidence-item-desc { color: var(--text-secondary); }
.evidence-item-meta { color: var(--text-muted); font-size: 12px; margin-left: auto; }

.activity-log-item-line { display: flex; flex-wrap: wrap; gap: 2px; }
.activity-log-item-user { font-weight: 700; }
.activity-log-item-change { color: var(--text-secondary); }
.activity-log-item-date { color: var(--text-muted); font-size: 12px; }

.compose-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compose-row textarea, .compose-row input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.compose-row select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
}

.inline-notice {
  font-size: 13px;
  font-weight: 600;
  color: var(--status-red);
}

.back-link {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--flame);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
}

/* ---------------------------------------------------------------------
   Coming-in-Build-2 placeholder screen
   --------------------------------------------------------------------- */

.placeholder-screen { display: flex; justify-content: center; padding-top: 40px; }

.placeholder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.placeholder-flame { font-size: 32px; }

.btn-primary {
  margin-top: 8px;
  background: var(--flame);
  color: var(--flame-ink);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}

/* ---------------------------------------------------------------------
   Build 7: Executive / management-intelligence layer
   --------------------------------------------------------------------- */

.exec-header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.exec-header-title { font-family: "Archivo", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 0.02em; margin: 0; }
.exec-header-subtitle { margin: 0; color: var(--text-secondary); font-weight: 600; }

/* Section 11: Automatic Risk Flags -- informational chips only, rendered
   on location cards, the Location Command Center header, and an
   aggregate Executive Dashboard panel; never mutate any task. */
.flag-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.flag-chip-btn { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.flag-chip-btn:hover .chip { filter: brightness(0.95); }

/* Section 10: Department Readiness click-through inside the Location
   Command Center's Overview/Readiness tabs. */
.category-row-clickable { cursor: pointer; width: 100%; background: none; border: none; padding: 0; text-align: left; display: block; }
.category-row-clickable:hover { opacity: 0.85; }
.readiness-filter-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--status-amber-bg); color: var(--status-amber); padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-weight: 600; font-size: 13px; }

/* Build 7 correction pass, section 3: cross-location Department Readiness
   (Head Office view) -- distinct from the per-location "Readiness by
   Department" cards inside each Location Command Center. */
.dept-readiness-card { display: flex; flex-direction: column; gap: 10px; }
.dept-readiness-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dept-readiness-network-pct { font-weight: 700; color: var(--text-secondary); font-size: 13px; }
.dept-location-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dept-location-compare-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 2fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 700px) {
  .dept-location-compare-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Section 9: Opening Timeline, rendered in the Location Command Center's
   Overview tab, reusing real existing tasks -- never duplicate tasks. */
.timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.timeline-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.timeline-item-label { font-weight: 600; }
.timeline-item-meta { color: var(--text-secondary); font-size: 12px; }
.timeline-item-na { opacity: 0.6; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.kpi-card:hover { border-color: var(--flame); }
.kpi-card-num { font-family: "Archivo", sans-serif; font-size: 26px; font-weight: 800; }
.kpi-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.kpi-card-red .kpi-card-num { color: var(--status-red); }
.kpi-card-green .kpi-card-num { color: var(--status-green); }

.attention-panel { border: 1px solid var(--status-red); background: var(--status-red-bg); }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attention-item-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  min-height: 44px;
}
.attention-item-btn:hover { text-decoration: underline; }
.attention-item-rank { font-weight: 800; margin-right: 6px; }
.attention-item-loc { font-weight: 700; }

.location-board-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 700px) {
  .location-board-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .location-board-grid { grid-template-columns: repeat(3, 1fr); }
}
.location-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.location-card:hover { border-color: var(--flame); }
.location-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.modal-card {
  background: var(--surface);
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brief-section h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table th { color: var(--text-secondary); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tr.row-critical { background: var(--status-red-bg); }
.data-table select { min-height: 36px; }
.table-actions { display: flex; gap: 8px; }

.search-bar { position: relative; flex: 1; max-width: 360px; }
.search-bar-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  min-height: 40px;
}
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  z-index: 60;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.search-results-group h4 { margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; color: var(--text-secondary); }

.notification-center { position: relative; }
.notification-bell {
  position: relative;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  min-height: 44px;
  min-width: 44px;
}
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--status-red);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
.notification-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(360px, 90vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  z-index: 60;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.notification-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.notification-unread { background: var(--status-amber-bg); border-radius: 6px; }

.more-menu { display: flex; flex-direction: column; gap: 6px; }
.more-menu-item {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.global-action-error { margin: 8px 16px 0; }

/* ---------------------------------------------------------------------
   Build 8: Inspections, Audits & Corrective Action
   --------------------------------------------------------------------- */
.btn-secondary {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.btn-small { padding: 6px 12px; font-size: 13px; min-height: 34px; }

.demo-only-notice {
  background: var(--status-amber-bg, #fff4e0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 10px;
}

.section-title-row { display: flex; align-items: center; justify-content: space-between; }

/* Mobile-first Start Inspection wizard */
.wizard-screen { max-width: 640px; margin: 0 auto; padding-bottom: 80px; }
.wizard-header { display: flex; align-items: center; gap: 10px; padding: 10px 0; position: sticky; top: 0; background: var(--bg, #FAF7F2); z-index: 20; }
.wizard-progress-track { flex: 1; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.wizard-progress-fill { height: 100%; background: var(--flame); transition: width 0.2s ease; }
.wizard-save-state { font-size: 12px; font-weight: 700; white-space: nowrap; }
.wizard-save-saving { color: var(--text-secondary); }
.wizard-save-saved { color: var(--status-green, #2f7d4f); }
.wizard-save-save_failed { color: var(--status-red, #c0392b); }
.wizard-step { padding: 12px 0; }
.wizard-big-select { width: 100%; min-height: 48px; font-size: 16px; padding: 10px; border-radius: 8px; border: 1px solid var(--border); }
.wizard-choice-list { display: flex; flex-direction: column; gap: 10px; }
.wizard-choice-btn { min-height: 56px; font-size: 16px; font-weight: 700; text-align: left; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.wizard-choice-btn-selected { border-color: var(--flame); background: var(--status-amber-bg, #fff4e0); }
.wizard-item-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--surface); }
.wizard-item-text { font-weight: 700; margin: 0 0 10px; }
.wizard-item-buttons { display: flex; gap: 10px; margin-bottom: 8px; }
.wizard-answer-btn { flex: 1; min-height: 48px; font-size: 15px; font-weight: 700; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.wizard-answer-pass.wizard-answer-selected { background: var(--status-green-bg, #e3f5ea); border-color: var(--status-green, #2f7d4f); }
.wizard-answer-fail.wizard-answer-selected { background: var(--status-red-bg, #fbe6e3); border-color: var(--status-red, #c0392b); }
.wizard-comment-box { width: 100%; min-height: 60px; border-radius: 8px; border: 1px solid var(--border); padding: 8px; font-size: 14px; box-sizing: border-box; }
.wizard-evidence-required { color: var(--status-amber, #b8860b); font-size: 13px; margin: 4px 0 0; }
.wizard-footer { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }

/* Inspection Report -- browser print, no third-party PDF API */
.inspection-report { max-width: 800px; margin: 0 auto; }
.report-toolbar { display: flex; justify-content: space-between; margin-bottom: 12px; }
.report-page { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.report-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.report-table th, .report-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; font-size: 13px; }
@media print {
  .no-print { display: none !important; }
  .app-topbar, .bottom-nav, .nav-bar { display: none !important; }
  .report-page { border: none; padding: 0; }
}

/* Corrective Action Command Center */
.ca-row { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ca-row-main { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ca-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-reopen-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Template Builder */
.template-builder-layout { display: flex; gap: 20px; flex-wrap: wrap; }
.template-builder-list { flex: 0 0 240px; display: flex; flex-direction: column; gap: 4px; }
.template-builder-detail { flex: 1; min-width: 260px; }
.template-builder-section { margin-bottom: 14px; }
.template-selected { font-weight: 800; color: var(--flame); }

@media (max-width: 700px) {
  .template-builder-layout { flex-direction: column; }
  .wizard-item-buttons { flex-wrap: wrap; }
}

/* BUILD 9: cancel-inspection confirmation + generic modal action row.
   Additive only -- reuses the existing .modal-overlay/.modal-card
   pattern already defined above rather than inventing a parallel one. */
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.btn-danger {
  background: var(--status-red, #c0392b);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.wizard-cancel-btn { color: var(--status-red, #c0392b); }

/* BUILD 9: 30/90/365 inspection trend chart (inline SVG, no chart
   library dependency). Additive only. */
.trend-chart-svg { width: 100%; height: auto; display: block; margin: 8px 0; }
.trend-line-score { fill: none; stroke: var(--flame, #d9480f); stroke-width: 2.5; }
.trend-line-target { stroke: var(--status-green, #2f9e44); stroke-width: 1; stroke-dasharray: 4 3; }
.trend-line-passing { stroke: var(--text-secondary, #868e96); stroke-width: 1; stroke-dasharray: 2 3; }
.trend-point { fill: var(--flame, #d9480f); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }

/* BUILD 9: inline evidence attach/override UI inside the inspection
   wizard. Additive -- reuses .wizard-evidence-required from Build 8. */
.wizard-evidence-block { margin-top: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; }
.wizard-evidence-satisfied { color: var(--status-green, #2f9e44); font-size: 13px; margin: 0 0 4px; }
.evidence-add-box { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; background: var(--surface-alt, #f5f5f5); border-radius: 6px; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 8px 0; }

/* BUILD 10: Operations Command Center + Opening Command Center. Additive
   classes only -- no existing rule above is edited. */
.ops-command-center .ops-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ops-command-center .ops-filter-bar select,
.ops-command-center .ops-filter-bar input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; min-width: 140px; }
.tab-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; border-bottom: 1px solid var(--border); }
.tab-btn { padding: 8px 12px; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; color: var(--text-secondary, #868e96); white-space: nowrap; }
.tab-btn-active { color: var(--flame, #d9480f); border-bottom-color: var(--flame, #d9480f); }
.ops-queue-section { margin: 14px 0; }
.ops-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ops-item-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface, #fff); }
.ops-item-red { border-left: 4px solid var(--status-red, #c0392b); }
.ops-item-amber { border-left: 4px solid var(--status-amber, #e8912d); }
.ops-item-neutral { border-left: 4px solid var(--border); }
.ops-item-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.ops-item-location { font-weight: 700; font-size: 13px; }
.ops-item-title { font-weight: 600; margin: 4px 0; word-break: break-word; }
.ops-item-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-secondary, #868e96); margin-bottom: 4px; }
.ops-item-action { font-size: 13px; margin-bottom: 6px; }
.text-danger { color: var(--status-red, #c0392b); font-weight: 600; }

.opening-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.opening-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface, #fff); }
.opening-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.opening-card-row { font-size: 13px; margin: 3px 0; word-break: break-word; }

.opening-timeline { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.timeline-node { border-radius: 8px; padding: 8px 10px; min-width: 150px; flex: 1 1 150px; border: 1px solid var(--border); }
.timeline-green { border-left: 4px solid var(--status-green, #2f9e44); }
.timeline-amber { border-left: 4px solid var(--status-amber, #e8912d); }
.timeline-red { border-left: 4px solid var(--status-red, #c0392b); }
.timeline-neutral { border-left: 4px solid var(--border); }
.timeline-label { font-weight: 700; font-size: 13px; }
.timeline-status { font-size: 12px; }
.timeline-date { font-size: 12px; color: var(--text-secondary, #868e96); }

.opening-blocker-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.opening-blocker-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.opening-blocker-desc { font-weight: 600; }
.opening-blocker-resolution { color: var(--text-secondary, #868e96); }

.opening-daily-actions { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.opening-action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }

.opening-readiness-panel .readiness-score-row { margin: 4px 0; }
.readiness-score-big { font-size: 32px; font-weight: 800; color: var(--flame, #d9480f); }
.category-readiness-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 12px; }
.category-readiness-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }

.ops-snapshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 8px 0; }
.ops-snapshot-stat { text-align: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.future-analytics-placeholder { margin-top: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; color: var(--text-secondary, #868e96); }

/* Mobile: cards/grids collapse to one column, filters stack, no fixed
   nav overlaps introduced by any Build 10 screen (all Build 10 screens
   render inside the normal scrolling .screen container, never fixed). */
@media (max-width: 480px) {
  .ops-item-grid, .opening-card-grid, .ops-snapshot-grid { grid-template-columns: 1fr; }
  .ops-command-center .ops-filter-bar select,
  .ops-command-center .ops-filter-bar input { min-width: 0; flex: 1 1 auto; }
  .opening-timeline { flex-direction: column; }
  .timeline-node { min-width: 0; }
}

/* -------------------------------------------------------------------
   Build 11: Flameo University + Approved Knowledge Foundation.
   Additive only -- every class below is newly introduced (prefixed
   "university-"/"knowledge-"), and reuses existing shared classes
   (.screen, .quiet-section, .section-title, .empty-state, .back-link,
   .btn-primary/.btn-secondary/.btn-link, .badge, .kpi-card, .tab-bar/
   .tab-btn, .data-table/.table-scroll, .ops-filter-bar) wherever they
   already fit, exactly like Build 7-10 did. No existing class below
   this point is touched or renamed.
   ------------------------------------------------------------------- */
.university-screen { display: flex; flex-direction: column; gap: 4px; }
.university-tab-bar { margin-bottom: 8px; }

.university-home-section { margin-bottom: 4px; }
.university-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 8px 0; }
.university-course-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface, #fff); }
.university-course-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.university-course-desc { font-size: 13px; color: var(--text-secondary, #868e96); margin: 0; }
.university-course-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-secondary, #868e96); }

.university-module-block { margin: 12px 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.university-lesson-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.university-lesson-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.university-ack-block { margin: 12px 0; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; }
.university-quiz-cta { margin: 12px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.university-lesson-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.university-quiz-question { margin: 14px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.university-quiz-question-text { font-weight: 700; margin: 0 0 6px; }
.university-quiz-answer-option { display: block; font-size: 13px; margin: 4px 0; }
.university-quiz-result { padding: 14px; border-radius: 10px; border: 1px solid var(--border); text-align: center; }
.university-quiz-result p { margin: 4px 0; }

/* -------------------------------------------------------------------
   Slice 1G: Course Player + My Training Profile. New classes only --
   nothing above this point is touched or renamed.
   ------------------------------------------------------------------- */
.university-course-player { display: flex; flex-direction: column; gap: 4px; }
.university-player-progress { margin: 8px 0 12px; }
.progress-bar-track { width: 100%; height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; margin: 6px 0; }
.progress-bar-fill { height: 100%; background: var(--flame, #e8590c); border-radius: 6px; transition: width 0.2s ease; }
.university-player-toc { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.university-player-toc-module { display: flex; flex-direction: column; gap: 4px; }
.university-player-toc-current { font-weight: 700; }
.university-player-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

.knowledge-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.knowledge-filter-bar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.knowledge-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 8px 0; }
.knowledge-doc-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface, #fff); }
.knowledge-doc-header-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-secondary, #868e96); margin: 4px 0 10px; }
.knowledge-section-block { margin: 14px 0; padding: 10px 0; border-top: 1px solid var(--border); }

.university-readiness-line { margin-top: 4px; }

.university-admin-panel { margin: 16px 0; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.university-admin-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.university-admin-list-row { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 8px; }
.university-admin-review-summary { margin: 10px 0; }
.university-admin-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.university-admin-module-block { margin: 10px 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.university-admin-inline { margin: 8px 0; padding: 8px; background: var(--surface-muted, #f6f3ee); border-radius: 8px; font-size: 13px; }

.form-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #868e96); margin: 8px 0; }
.form-field input, .form-field select, .form-field textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.form-field textarea { min-height: 70px; resize: vertical; }
.form-field-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 8px 0; }

@media (max-width: 480px) {
  .university-course-grid, .knowledge-doc-grid { grid-template-columns: 1fr; }
  .knowledge-filter-bar { flex-direction: column; }
}

/* ===========================================================================
   Build 12: Ask Flameo AI Operations Assistant. Additive only -- every
   class below is new and prefixed "ask-flameo-", nothing above is edited.
   =========================================================================== */
.ask-flameo-screen { display: flex; flex-direction: column; gap: 4px; }
.ask-flameo-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ask-flameo-mode-badge { font-size: 11px; }
.ask-flameo-context-note { font-size: 12px; color: var(--text-secondary, #868e96); margin: 0 0 4px; }
.ask-flameo-toolbar { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.ask-flameo-entry-link { font-size: 12px; }

.ask-flameo-conversation { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px 2px; margin-bottom: 10px; }
.ask-flameo-bubble { padding: 10px 12px; border-radius: 10px; max-width: 100%; }
.ask-flameo-bubble-user { align-self: flex-end; background: var(--accent-muted, #fdeee0); }
.ask-flameo-bubble-assistant { align-self: flex-start; border: 1px solid var(--border); background: var(--surface, #fff); }
.ask-flameo-answer-text { white-space: pre-wrap; margin: 6px 0; }

.ask-flameo-citations { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 13px; }
.ask-flameo-citations-title { font-weight: 700; margin: 0 0 4px; }
.ask-flameo-no-source { margin-top: 8px; padding: 10px; border-radius: 8px; background: var(--surface-muted, #f6f3ee); font-size: 13px; }
.ask-flameo-no-source-title { font-weight: 700; margin: 0 0 6px; }
.ask-flameo-next-actions { margin: 0; padding-left: 18px; }

.ask-flameo-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ask-flameo-feedback-recorded { font-size: 12px; color: var(--text-secondary, #868e96); }
.ask-flameo-feedback-reason { display: flex; align-items: center; gap: 6px; }

.ask-flameo-starter-questions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.ask-flameo-starter-chip { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); cursor: pointer; }

.ask-flameo-input-row { display: flex; gap: 8px; margin-top: 4px; }
.ask-flameo-input-row input { flex: 1 1 auto; min-width: 0; }

.ask-flameo-history { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.ask-flameo-roster { margin-top: 10px; }

@media (max-width: 480px) {
  /* Bug found in Build 13 testing: wrapping the input row to two lines
     (input, then Send button) on narrow screens adds height that the
     page's normal 84px bottom-nav clearance (.app-main) did not fully
     account for -- the Send button's bottom edge measured ~10.7px
     under the fixed bottom nav at 390x844. Fixing with explicit extra
     margin below the (now taller) input row, rather than relying only
     on the page-level padding. */
  .ask-flameo-input-row { flex-direction: column; margin-bottom: 24px; }
  .ask-flameo-input-row button { width: 100%; }
  .ask-flameo-bubble { align-self: stretch !important; }
}

/* =========================================================================
   Build 13: Franchise Performance Command Center + Power BI Integration.
   Additive only -- appended at the end of this file, no existing rule
   above is edited. `performance-` / `wbr-` prefixed, matching this file's
   existing per-feature naming convention (ask-flameo-, ops-, opening-).
   ========================================================================= */
.performance-screen { max-width: 1100px; }
.performance-period-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 16px; }
.performance-period-custom { padding: 4px 6px; }
.performance-period-label { font-size: 12px; color: var(--text-secondary, #868e96); }

.performance-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.performance-kpi-grid-compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.performance-kpi-card { text-align: left; border-radius: 10px; border: 1px solid var(--border); background: var(--surface, #fff); padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.performance-kpi-card-green { border-left: 4px solid #2f9e44; }
.performance-kpi-card-amber { border-left: 4px solid #f08c00; }
.performance-kpi-card-red { border-left: 4px solid #e03131; }
.performance-kpi-card-neutral { border-left: 4px solid var(--border); }
.performance-kpi-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.performance-kpi-card-name { font-weight: 700; font-size: 13px; }
.performance-kpi-card-actual { font-size: 22px; font-weight: 800; }
.performance-kpi-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-secondary, #868e96); }
.performance-kpi-card-footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary, #868e96); }

.performance-kpi-mini { border-radius: 8px; padding: 8px; background: var(--surface-muted, #f6f3ee); display: flex; flex-direction: column; gap: 4px; }
.performance-kpi-mini-green { border-left: 3px solid #2f9e44; }
.performance-kpi-mini-amber { border-left: 3px solid #f08c00; }
.performance-kpi-mini-red { border-left: 3px solid #e03131; }
.performance-kpi-mini-name { font-size: 11px; color: var(--text-secondary, #868e96); }
.performance-kpi-mini-value { font-weight: 700; font-size: 16px; }
.performance-summary-links { display: flex; gap: 12px; margin-top: 8px; }

.performance-trend { font-size: 12px; }
.performance-trend-up { color: #2f9e44; }
.performance-trend-down { color: #e03131; }

.performance-kpi-detail-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }

.performance-network-table th.sortable-th { cursor: pointer; }

.performance-attention-list { display: flex; flex-direction: column; gap: 10px; }
.performance-attention-item { border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border); }
.performance-attention-amber { border-left: 4px solid #f08c00; }
.performance-attention-red { border-left: 4px solid #e03131; }
.performance-attention-top { display: flex; justify-content: space-between; align-items: center; }
.performance-attention-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-secondary, #868e96); margin-top: 4px; }
.performance-recommended-action { font-size: 12px; margin: 6px 0; font-style: italic; }

.performance-pockets-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.performance-opportunity-form .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; max-width: 420px; }
.performance-estimate-preview { margin: 10px 0; font-size: 13px; }
.performance-opportunity-list { display: flex; flex-direction: column; gap: 10px; }
.performance-opportunity-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.performance-opportunity-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.performance-opportunity-impact { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin: 6px 0; }
.performance-opportunity-realized { color: #2f9e44; }
.performance-opportunity-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.performance-confirm-realized { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.performance-correction-note { font-size: 12px; padding: 8px; border-radius: 6px; background: var(--surface-muted, #f6f3ee); }
.performance-resolve-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }

.power-bi-report { border-radius: 8px; padding: 16px; border: 1px dashed var(--border); }
.power-bi-fallback-title { font-weight: 700; margin: 0 0 6px; }
.power-bi-dev-note { font-size: 12px; color: var(--text-secondary, #868e96); }
.power-bi-frame { width: 100%; min-height: 480px; border: none; }

.wbr-screen .wbr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.wbr-opening-question { font-size: 18px; font-weight: 800; }
.wbr-movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 12px 0; }
.wbr-note-form { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin-top: 10px; }

/* Print-friendly structure (spec Section 37): no fixed heights / overflow
   clipping on the WBR page, and the toolbar/tab-bar/note-composer are
   hidden entirely rather than clipped. */
@media print {
  .no-print, .no-print-hide, .tab-bar.no-print { display: none !important; }
  .wbr-page { max-width: 100%; }
}

@media (max-width: 480px) {
  .performance-kpi-grid { grid-template-columns: 1fr; }
  .performance-period-selector { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   Build 14: Production Data & Integration Foundation -- additive only.
   Reuses the existing tokens/badge/btn classes above; adds only the small
   set of new structural classes build14.js introduces.
   ========================================================================= */
.data-admin-screen .tab-body { margin-top: 12px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}
.card label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 13px; }
.card input, .card select { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.screen-header-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.form-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.help-text { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }
.filter-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.validation-messages { margin: 0; padding-left: 18px; font-size: 12px; }
.wizard-steps { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0 0 16px 0; flex-wrap: wrap; }
.wizard-steps li { color: var(--text-muted); font-weight: 600; font-size: 13px; }
.wizard-step-active { color: var(--flame); }
.import-counts { display: flex; gap: 8px; margin: 8px 0 12px 0; flex-wrap: wrap; }
.readiness-checklist { list-style: none; padding: 0; margin: 8px 0 0 0; }
.readiness-checklist li { font-size: 13px; padding: 2px 0; }
.text-success { color: var(--status-green); }
.text-warning { color: var(--status-amber); }
.text-muted { color: var(--text-muted); }

@media (max-width: 480px) {
  .data-admin-screen .data-table { display: block; overflow-x: auto; white-space: nowrap; }
  .screen-header-row { flex-direction: column; align-items: stretch; }
  .import-wizard { padding: 12px; }
}

/* ---------------------------------------------------------------------
   Build 17 -- mobile/iPhone polish (additive only; no existing rule
   above this point was changed).

   Audit note: touch-target sizing was already handled well by prior
   builds before Build 17 touched anything -- .action-btn (52px),
   .btn-primary/.btn-secondary (44px), .back-link (44px), and
   .bottom-nav-item (56px) all already meet or exceed Apple's 44px
   Human Interface Guidelines minimum, so no touch-target-floor rule
   was needed here. The one real, verified gap: iOS Safari zooms the
   whole page in when a tapped text input's effective font-size is
   under 16px. Several existing controls render smaller than that
   (.form-field input/select/textarea at 12px via inherited
   .form-field font-size, .search-bar-input at 14px, .compose-row
   textarea/input, and a few filter-bar inputs). This rule does not
   change their visual size (padding/border/layout are untouched) --
   only the text renders large enough that iOS stops auto-zooming the
   page on focus. Scoped to narrow viewports only, so desktop is
   completely unaffected.
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
  .form-field input,
  .form-field select,
  .form-field textarea,
  .search-bar-input,
  .compose-row input,
  .compose-row select,
  .compose-row textarea,
  .ask-flameo-input-row input,
  .knowledge-filter-bar input,
  .ops-command-center .ops-filter-bar input,
  .ops-command-center .ops-filter-bar select {
    font-size: 16px;
  }
}

/* Build 18 Slice 2A -- deficiency evidence panel. Minimal, additive CSS
   only for the new classes build18.js's DeficiencyPanel/StoreVisitReportScreen
   introduce -- Slice 1 shipped its store-visit-* classes with no dedicated
   CSS at all (relying on the generic .btn/.quiet-section/.empty-state
   rules above), so this follows the same footprint, just enough for the
   capture panel to be usable with a thumb on a phone during a real
   inspection. */
.store-visit-deficiency-panel { margin-top: 0.5rem; border: 1px solid var(--border-color, #ddd); }
.store-visit-deficiency-required { font-weight: 600; margin: 0 0 0.5rem; }
.store-visit-deficiency-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.store-visit-photo-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.store-visit-photo-preview { display: block; max-width: 100%; max-height: 260px; border-radius: 6px; margin-bottom: 0.5rem; object-fit: cover; }
.store-visit-comment-input { width: 100%; min-height: 60px; margin-bottom: 0.5rem; font-size: 16px; box-sizing: border-box; }
.store-visit-deficiency-buttons { display: flex; gap: 0.5rem; }
.store-visit-evidence-attached { color: var(--success-color, #1a7f37); font-size: 13px; display: flex; align-items: center; gap: 0.5rem; }
.store-visit-legacy-no { color: var(--text-muted); font-size: 13px; font-style: italic; }
.store-visit-view-photo-btn { padding: 4px 10px; font-size: 12px; min-height: 28px; }

/* Build 18 Slice 2A UX patch -- in-app deficiency photo viewer (replaces
   the previous window.open(url, "_blank") behavior). Reuses the existing
   .modal-overlay/.modal-card foundation (position/backdrop/centering
   already established above) and adds only what a full-bleed photo needs:
   a darker backdrop so the photo reads clearly against it, an image that
   scales down to fit any device without ever exceeding the viewport or
   distorting its aspect ratio, and a large, thumb-friendly Close control
   for phone/tablet use during a real Store Visit. */
.evidence-viewer-overlay {
  /* Darker than the base .modal-overlay backdrop -- appropriate for a
     confirm dialog, but a photo benefits from more visual separation from
     the inspection screen behind it. */
  background: rgba(0, 0, 0, 0.75);
  padding: 16px;
}
.evidence-viewer-card {
  max-width: 92vw;
  width: auto;
  max-height: 92vh;
  padding: 14px;
  align-items: stretch;
}
.evidence-viewer-close-btn {
  /* Large, touch-friendly target (spec: "large touch-friendly Close
     control") -- bigger tap area than the app's default .btn-secondary
     sizing without needing a one-off style just for this button. */
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  font-size: 14px;
}
.evidence-viewer-body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  /* Leaves room for the header row so the image itself never has to be
     taller than the viewport allows -- max-height below is relative to
     this container, not the raw viewport, which is what actually keeps
     the whole card (header + image) from ever exceeding 92vh. */
  min-height: 120px;
}
.evidence-viewer-image {
  display: block;
  max-width: 100%;
  /* 74vh, not 92vh: leaves headroom for the modal-head row (title + Close
     button) above it so the two together never exceed the card's own
     max-height and force the browser to shrink-clip the header instead. */
  max-height: 74vh;
  width: auto;
  height: auto;
  /* object-fit: contain (not cover, unlike the smaller capture-preview
     thumbnail above) -- this is the full evidence photo being reviewed,
     so nothing about it may be cropped, and both portrait and landscape
     photos must display at their real aspect ratio. */
  object-fit: contain;
  border-radius: 6px;
}
.evidence-viewer-status { margin: 24px 0; text-align: center; }

@media (max-width: 480px) {
  .evidence-viewer-card { max-width: 100vw; max-height: 100vh; border-radius: 0; padding: 10px; }
  .evidence-viewer-image { max-height: 70vh; }
}

/* ============================================================================
   Build 18 Slice 2B -- Corrective Action Lifecycle. Additive only: nothing
   above this block is changed. Reuses .btn/.btn-primary/.btn-secondary/
   .btn-danger, .badge/.badge-green/.badge-amber/.badge-red/.badge-neutral,
   .quiet-section/.section-title/.empty-state, and .store-visit-photo-btn/
   .store-visit-photo-preview/.store-visit-comment-input from the Slice
   1/2A rules above -- no independent visual language is invented here.
   ========================================================================= */
.form-success { color: var(--status-green, #1c7a3f); font-weight: 600; }

.corrective-action-status-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.corrective-action-status-tab-active { font-weight: 700; text-decoration: underline; }

.corrective-action-list-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.corrective-action-list-location { font-weight: 700; }
.corrective-action-list-question { flex: 1 1 200px; }
.corrective-action-list-report,
.corrective-action-list-date { color: var(--text-muted); font-size: 0.9rem; }

.corrective-action-comment-input { width: 100%; min-height: 60px; margin: 8px 0; }

.corrective-action-review-buttons { display: flex; gap: 10px; margin-top: 8px; }

.corrective-action-history-item-latest { border-left: 4px solid var(--status-amber, #a97a1c); padding-left: 8px; }
.corrective-action-history-attempt { font-weight: 700; margin-bottom: 4px; }
.corrective-action-history-comment { margin: 4px 0; }

/* Desktop: "Original Deficiency | Corrective Photo" side by side, per
   spec. Mobile: stacked -- see the max-width override below. The DOM
   order is identical at every width; only the layout direction changes. */
.corrective-action-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.corrective-action-side-by-side-col { margin: 0; }
.corrective-action-review-form { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .corrective-action-side-by-side { grid-template-columns: 1fr; }
}

/* Build 18 Slice 3 -- Store Visit finalization + combined report.
   Additive only, same footprint as the rest of this file's store-visit-*
   rules: relies on the generic .btn/.quiet-section/.empty-state/
   .modal-overlay/.modal-card/.modal-actions/.badge rules already defined
   above, with just enough new spacing to make the finalize control and
   the finalized banner read clearly. */
.store-visit-finalize-control { margin-top: 8px; }
.store-visit-finalized-banner { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.store-visit-report-locked-note { font-style: italic; }

/* =========================================================================
   IB1-1 -- Inspection Beta 1 field usability (Build 18 Store Visit screens).
   Additive only: every rule below targets class names build18.js already
   emitted without any styling (store-visit-*, location-picker-list,
   screen-header, form-error) plus the IB1-1 per-answer modifier classes.
   No existing rule above is changed. Touch targets >= 44 px (answers 52 px).
   ========================================================================= */
:root {
  --sv-yes: #1E7A44;
  --sv-no: #B3321F;
  --sv-na: #5A5048;
}

/* Screen header: back button + title on one line, wraps on narrow phones. */
.screen-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.screen-header h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; }

/* Inline errors are unmistakably errors. */
.form-error { color: var(--status-red); font-weight: 600; }

/* ---- Report screen: sections and question cards ---- */
.store-visit-section { margin-bottom: 16px; }
.store-visit-question-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.store-visit-question-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.store-visit-question-row-unanswered { border-left-color: var(--status-amber); }
.store-visit-question-row-answered { border-left-color: var(--status-green); }
.store-visit-question-text { font-size: 16px; line-height: 1.45; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* ---- YES / NO / N/A: three equal, large, field-friendly controls ---- */
.store-visit-answer-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.store-visit-answer-btn {
  min-height: 52px;
  min-width: 44px;
  padding: 10px 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.store-visit-answer-btn-yes { border-color: var(--sv-yes); }
.store-visit-answer-btn-no { border-color: var(--sv-no); }
.store-visit-answer-btn-na { border-color: var(--sv-na); }
/* Selected = solid fill + white text + check mark (added in build18.js). */
.store-visit-answer-btn-selected { color: #FFFFFF; box-shadow: 0 1px 3px rgba(28, 24, 21, 0.25); }
.store-visit-answer-btn-yes.store-visit-answer-btn-selected { background: var(--sv-yes); border-color: var(--sv-yes); }
.store-visit-answer-btn-no.store-visit-answer-btn-selected { background: var(--sv-no); border-color: var(--sv-no); }
.store-visit-answer-btn-na.store-visit-answer-btn-selected { background: var(--sv-na); border-color: var(--sv-na); }
.store-visit-answer-btn:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }
.store-visit-answer-btn:active:not(:disabled) { transform: translateY(1px); }
@media (hover: hover) {
  .store-visit-answer-btn:not(:disabled):not(.store-visit-answer-btn-selected):hover { background: var(--status-neutral-bg); }
}
/* Finalized (read-only): unselected answers fade; the recorded answer stays fully visible. */
.store-visit-answer-btn:disabled { cursor: default; opacity: 0.45; }
.store-visit-answer-btn-selected:disabled { opacity: 1; }

/* ---- Report list on the Store Visit home + combined report rows ---- */
.store-visit-report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.store-visit-report-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.store-visit-report-btn {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  text-align: left;
  font-size: 16px;
}
.store-visit-report-label { font-weight: 600; }
.store-visit-report-progress { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Location picker ---- */
.location-picker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.store-visit-location-btn { width: 100%; min-height: 52px; font-size: 16px; text-align: left; padding: 12px 16px; }

/* ---- Photo / evidence controls: 44 px minimum ---- */
.store-visit-view-photo-btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.store-visit-photo-btn { min-height: 48px; }
.store-visit-deficiency-buttons .btn-primary,
.store-visit-deficiency-buttons .btn-secondary { min-height: 48px; }
.store-visit-evidence-attached { flex-wrap: wrap; }

/* ---- Loading notice (Combined Report after refresh) ---- */
.store-visit-loading { padding: 16px 0; }

/* ---- Phones: keep three answers side by side down to 320 px ---- */
@media (max-width: 360px) {
  .store-visit-answer-btn { font-size: 15px; padding: 10px 2px; }
  .store-visit-question-row { padding: 12px; }
}
/* ---- iPad / landscape: roomier cards, same control sizes ---- */
@media (min-width: 768px) {
  .store-visit-question-row { padding: 16px 18px; }
  .store-visit-answer-group { max-width: 520px; }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .store-visit-question-row { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; column-gap: 16px; }
  .store-visit-question-row > *:not(.store-visit-question-text):not(.store-visit-answer-group) { grid-column: 1 / -1; }
  .store-visit-answer-group { max-width: none; }
}

/* =====================================================================
   IB1-2 -- deficiency photo reliability: field states, progress, offline.
   Additive only; reduced motion is honoured by the global rule above.
   ===================================================================== */
.store-visit-deficiency-status {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0; padding: 10px 12px; border-radius: 10px;
  font-size: 16px; font-weight: 600;
  background: var(--status-neutral-bg); color: var(--status-neutral-text);
}
.store-visit-deficiency-status-saved { background: var(--status-green-bg); color: var(--status-green); }
.store-visit-deficiency-status-failed { background: var(--status-red-bg); color: var(--status-red); }
.store-visit-progress {
  position: relative; display: block; height: 6px; overflow: hidden;
  border-radius: 3px; background: var(--border);
}
.store-visit-progress-bar {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  border-radius: 3px; background: var(--flame, #E5512E);
  animation: store-visit-progress-slide 1.2s ease-in-out infinite;
}
@keyframes store-visit-progress-slide { from { left: -40%; } to { left: 100%; } }
.store-visit-deficiency-keep-open { margin: 0 0 8px; font-size: 14px; }
.store-visit-photo-btn.is-disabled { opacity: 0.5; pointer-events: none; }
.store-visit-deficiency-buttons { flex-wrap: wrap; }
.store-visit-deficiency-save { flex: 1 1 9rem; }
.store-visit-offline-banner {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
  font-size: 16px; font-weight: 600; line-height: 1.35;
  background: var(--status-amber-bg); color: var(--text-primary, inherit);
  border: 1px solid var(--status-amber);
}
.store-visit-deficiency-notice {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600;
  background: var(--status-amber-bg); border: 1px solid var(--status-amber);
}

/* IB1-2 REV2 (F2): build identity strip -- small, scrolls away, never sticky. */
.build-identity { font: 600 11px/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.02em; padding: 3px 16px; text-align: center; overflow-wrap: anywhere; }
.build-identity-ok { background: var(--status-neutral-bg, #f1f3f5); color: var(--text-muted, #6c757d); border-bottom: 1px solid var(--border, #e9ecef); }
.build-identity-unverified, .build-identity-mismatch { background: var(--status-red-bg, #fdecea); color: var(--status-red, #c0392b); border-bottom: 1px solid var(--status-red, #c0392b); }
/* IB1-2 REV2 (F3): stable question code shown with the question text. */
.store-visit-question-code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 14px; color: var(--text-muted, #6c757d); white-space: nowrap; }
/* IB1-2 REV2 (F4): YES/N/A that still carries evidence from an earlier NO. */
.store-visit-existing-evidence-note { margin: 0; font-size: 13px; }
@media print { .build-identity { display: none !important; } }

/* IB1-2 REV4 (R4-1 visit identity, R4-2 overwrite warning, R4-3 diagnostics) -- appended */
.store-visit-identity { font: 600 13px/1.4 "IBM Plex Mono", ui-monospace, monospace; margin: 6px 0 8px; padding: 6px 10px; border-radius: 6px; background: var(--status-neutral-bg, #f1f3f5); color: var(--text, #212529); border: 1px solid var(--border, #e9ecef); overflow-wrap: anywhere; }
.store-visit-identity-full { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
.store-visit-continue-btn { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.store-visit-overwrite-warning { margin: 6px 0; padding: 8px 10px; border: 2px solid var(--status-red, #c0392b); border-radius: 6px; background: var(--status-red-bg, #fdecea); color: var(--status-red, #c0392b); font-weight: 700; }
.build-identity-diagnostics-btn { display: block; width: 100%; min-height: 32px; margin: 0; padding: 4px 16px; border: 0; border-bottom: 1px solid var(--border, #e9ecef); background: var(--status-neutral-bg, #f1f3f5); color: var(--text-muted, #6c757d); font: 600 12px/1.4 "IBM Plex Mono", ui-monospace, monospace; text-align: center; cursor: pointer; }
.flameo-diagnostics-panel { position: fixed; top: 8px; right: 8px; bottom: 8px; left: 8px; z-index: 10000; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff; color: #212529; border: 2px solid #495057; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.flameo-diagnostics-panel .flameo-diagnostics-head { margin: 0; font-weight: 700; flex: 0 0 auto; }
.flameo-diagnostics-panel textarea { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; font: 11px/1.35 ui-monospace, monospace; resize: none; }
.flameo-diagnostics-panel .flameo-diagnostics-status { margin: 0; min-height: 1.2em; flex: 0 0 auto; }
.flameo-diagnostics-panel .flameo-diagnostics-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.flameo-diagnostics-panel .flameo-diagnostics-actions button { min-height: 44px; flex: 1; }
@media print { .build-identity-diagnostics-btn, .flameo-diagnostics-panel { display: none !important; } }