/* ============================================================================
 * H38 Visual Refresh — Shared Design System (2026-10-11)
 * ----------------------------------------------------------------------------
 * Modern design language for the Owner Ease rebuild views:
 * Owner Home + all guided flows (payroll, bills, inventory, nudges,
 * scheduling, tasks, send-task).
 *
 * SCOPE: All selectors are scoped under `.h38-flow-view` (guided flows) or
 * use `h38-` prefixed classes (Owner Home). Nothing here restyles the legacy
 * app pages — the refresh is opt-in per view.
 *
 * DESIGN TOKENS
 * - Font: system stack (Inter where available) — already set on body
 * - Radius: 16px cards, 12px controls, 999px pills
 * - Shadow: soft, layered (never harsh)
 * - Color: navy/blue primary, warm accent for urgent, green for success
 * - Spacing: generous — 20px card padding, 16px section gaps
 * ========================================================================== */

/* ---------- Design tokens (scoped, override-safe) ---------- */
.h38-flow-view {
  --h38-r-lg: 18px;
  --h38-r-md: 14px;
  --h38-r-sm: 10px;
  --h38-pad-card: 20px;
  --h38-gap: 16px;
  --h38-navy: #0b2438;
  --h38-blue: #174a70;
  --h38-blue-bright: #236a9a;
  --h38-accent: #d86d2b;
  --h38-green: #176b3a;
  --h38-green-bg: #e9f6ee;
  --h38-red: #b3261e;
  --h38-red-bg: #fdecea;
  --h38-amber: #8a5b08;
  --h38-amber-bg: #fff4d6;
  --h38-ink: #142839;
  --h38-muted: #5d7285;
  --h38-line: #e2e9ef;
  --h38-bg-soft: #f7fafc;
  --h38-shadow: 0 10px 28px rgba(11, 36, 56, .08);
  --h38-shadow-sm: 0 4px 14px rgba(11, 36, 56, .06);
}

/* ---------- Page head (guided flows) ----------
 * WS4 Phase C: the navy-hero treatment for flow headers is REMOVED.
 * The pageHead shim and H38Flow.screenHeader now emit the standard
 * dual-class header (h38-screen-head page-head) inside guided flows
 * too, styled by the shared screen-head rules — no separate hero.
 * (Legacy .page-head rules in styles.css intentionally remain: they
 * still style the shared header chrome on un-adopted surfaces.) */

/* ---------- Cards ---------- */
.h38-flow-view .card {
  border: 1px solid var(--h38-line);
  border-radius: var(--h38-r-lg);
  padding: var(--h38-pad-card);
  background: #fff;
  box-shadow: var(--h38-shadow-sm);
}
.h38-flow-view .card h2 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.h38-flow-view .card h2 .h38-step-badge {
  margin-left: auto;
}

/* ---------- Step progress ---------- */
.h38-steps {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
}
.h38-steps span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--h38-line);
}
.h38-steps span.done { background: var(--h38-green); }
.h38-steps span.now {
  background: linear-gradient(90deg, var(--h38-blue-bright), var(--h38-blue));
  box-shadow: 0 0 0 3px rgba(35, 106, 154, .18);
}
.h38-step-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--h38-muted);
  margin-bottom: 10px;
}

/* ---------- Buttons ---------- */
.h38-flow-view .actions {
  margin-top: 16px;
  gap: 10px;
}
.h38-flow-view .actions button,
.h38-flow-view button.primary,
.h38-flow-view .primary {
  min-height: 52px;
  padding: 12px 20px;
  border-radius: var(--h38-r-md);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(23, 74, 112, .22);
  border: 1px solid var(--h38-blue);
  background: linear-gradient(180deg, #1d5a86, var(--h38-blue));
  color: #fff;
}
.h38-flow-view .actions button:hover,
.h38-flow-view button.primary:hover {
  filter: brightness(1.08);
}
.h38-flow-view .actions button:active,
.h38-flow-view button.primary:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(23, 74, 112, .2);
}
.h38-flow-view .secondary {
  min-height: 52px;
  border-radius: var(--h38-r-md);
  font-weight: 700;
  background: #fff !important;
  border: 1.5px solid #c9d6e0 !important;
  color: var(--h38-navy) !important;
  box-shadow: none;
}
.h38-flow-view .secondary:hover {
  border-color: var(--h38-blue-bright) !important;
  background: #f2f7fb !important;
}

/* Big single CTA */
.h38-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.h38-cta-row .primary { flex: 1; }

/* ---------- Lists & rows ---------- */
.h38-flow-view .list { gap: 10px; }
.h38-flow-view .row {
  border: 1px solid var(--h38-line);
  border-radius: var(--h38-r-md);
  padding: 14px 16px;
  background: #fff;
  box-shadow: var(--h38-shadow-sm);
}
.h38-flow-view .row:hover {
  border-color: #b9cddb;
  background: #fff;
}
.h38-flow-view .row strong { font-size: .98rem; }
.h38-flow-view .row .row-top span:last-child {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--h38-navy);
}
.h38-flow-view .row-actions { margin-top: 10px; }
.h38-flow-view .row-actions button {
  min-height: 44px;
  border-radius: var(--h38-r-sm);
  font-weight: 700;
}

/* ---------- Pills ---------- */
.h38-flow-view .pill {
  min-height: 28px;
  padding: 4px 12px;
  font-size: .72rem;
  border-radius: 999px;
  letter-spacing: .02em;
}
.h38-flow-view .pill.bad {
  background: var(--h38-red-bg);
  border-color: #f3c1bd;
  color: var(--h38-red);
}
.h38-flow-view .pill.warn, .h38-flow-view .pill.pending {
  background: var(--h38-amber-bg);
  border-color: #eed9a4;
  color: var(--h38-amber);
}
.h38-flow-view .pill.good {
  background: var(--h38-green-bg);
  border-color: #bfe3cc;
  color: var(--h38-green);
}

/* ---------- Stats ---------- */
.h38-flow-view .stats { gap: 10px; }
.h38-flow-view .stat {
  border: 1px solid var(--h38-line);
  border-radius: var(--h38-r-md);
  background: linear-gradient(180deg, #fff, var(--h38-bg-soft));
  padding: 14px 12px;
  box-shadow: var(--h38-shadow-sm);
  text-align: center;
}
.h38-flow-view .stat strong {
  font-size: 1.5rem;
  color: var(--h38-navy);
  font-variant-numeric: tabular-nums;
}
.h38-flow-view .stat span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- Notices ---------- */
.h38-flow-view .notice {
  border-radius: var(--h38-r-md);
  padding: 14px 16px;
  font-size: .92rem;
  line-height: 1.5;
  border-width: 1.5px;
}
.h38-flow-view .notice.warn {
  background: var(--h38-amber-bg);
  border-color: #eed9a4;
}
.h38-flow-view .notice.good {
  background: var(--h38-green-bg);
  border-color: #bfe3cc;
}

/* ---------- Inputs ---------- */
.h38-flow-view input,
.h38-flow-view select,
.h38-flow-view textarea {
  min-height: 52px;
  border-radius: var(--h38-r-md);
  border: 1.5px solid #c9d6e0;
  padding: 12px 14px;
  font-size: 1rem;
}
.h38-flow-view input:focus,
.h38-flow-view select:focus,
.h38-flow-view textarea:focus {
  border-color: var(--h38-blue-bright);
  box-shadow: 0 0 0 4px rgba(35, 106, 154, .15);
}
.h38-flow-view label {
  font-size: .82rem;
  margin: 14px 0 6px;
}

/* ---------- Empty states ---------- */
.h38-empty {
  text-align: center;
  padding: 40px 24px;
  border: 2px dashed #cfdae3;
  border-radius: var(--h38-r-lg);
  background: var(--h38-bg-soft);
}
.h38-empty .h38-empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}
.h38-empty strong {
  display: block;
  font-size: 1.15rem;
  color: var(--h38-navy);
  margin-bottom: 6px;
}
.h38-empty p {
  color: var(--h38-muted);
  font-size: .92rem;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ---------- Done / success screens ---------- */
.h38-done-hero {
  text-align: center;
  padding: 12px 0 20px;
}
.h38-done-hero .h38-done-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--h38-green-bg);
  border: 2px solid #bfe3cc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 14px;
}

/* ---------- AI buttons ---------- */
.h38-flow-view .h38-ai-btn,
.h38-flow-view button[id$="AskKit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--h38-r-md);
  border: 2px solid var(--h38-blue-bright);
  background: #eef5fb;
  color: var(--h38-blue);
  font-weight: 800;
  font-size: .95rem;
}
.h38-flow-view .h38-ai-btn:hover,
.h38-flow-view button[id$="AskKit"]:hover {
  background: #e0edf7;
}

/* ---------- Selection rows (checkbox lists) ---------- */
.h38-flow-view .h38-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--h38-line);
  border-radius: var(--h38-r-md);
  background: #fff;
  margin-bottom: 10px;
  cursor: pointer;
}
.h38-flow-view .h38-pick input[type="checkbox"],
.h38-flow-view .h38-pick input[type="radio"] {
  width: 24px;
  height: 24px;
  min-height: 24px;
  flex-shrink: 0;
  accent-color: var(--h38-blue);
}
.h38-flow-view .h38-pick.picked {
  border-color: var(--h38-blue-bright);
  background: #f0f6fb;
  box-shadow: 0 0 0 3px rgba(35, 106, 154, .12);
}

/* ---------- Send-task overlay polish ---------- */
#h38SendTaskOverlay {
  background: #eef2f6 !important;
}
#h38SendTaskOverlay .st-wrap {
  max-width: 560px !important;
  padding: 20px 16px 64px !important;
}
#h38SendTaskOverlay .card {
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(11, 36, 56, .08) !important;
  border: 1px solid #e2e9ef !important;
  padding: 20px !important;
}
#h38SendTaskOverlay .st-back {
  min-height: 48px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}
#h38SendTaskOverlay .st-back:hover {
  background: #e2e9ef !important;
}
#h38SendTaskOverlay input,
#h38SendTaskOverlay select,
#h38SendTaskOverlay textarea {
  min-height: 52px !important;
  border-radius: 12px !important;
}
#h38SendTaskOverlay .st-steps {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5d7285;
}

/* ---------- Kit activity feed ("While You Were Away") ---------- */
.h38-kit-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.h38-kit-feed-head h2 {
  margin: 0;
  font-size: 1.08rem;
}
.h38-kit-feed-ask {
  min-height: 44px;
  white-space: nowrap;
}
.h38-kit-feed-list {
  display: flex;
  flex-direction: column;
}
.h38-kit-feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #eef2f6;
}
.h38-kit-feed-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.h38-kit-feed-row:last-child {
  padding-bottom: 0;
}
.h38-kit-feed-icon {
  font-size: 1.45rem;
  flex: 0 0 auto;
  line-height: 1;
}
.h38-kit-feed-body {
  flex: 1 1 auto;
  min-width: 0;
}
.h38-kit-feed-body strong {
  display: block;
  font-weight: 600;
  font-size: .95rem;
}
.h38-kit-feed-body small {
  color: #5d7285;
  font-size: .8rem;
}
.h38-kit-feed-review {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #d7e0e8;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .85rem;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  color: #14384f;
  white-space: nowrap;
}
.h38-kit-feed-review:active {
  background: #f0f5f9;
}
.h38-kit-feed-empty {
  margin: 0;
  color: #5d7285;
  font-size: .92rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .h38-flow-view .card {
    padding: 18px 16px;
  }
  .h38-flow-view .actions {
    flex-direction: column;
  }
  .h38-flow-view .actions > * {
    width: 100%;
  }
  .h38-cta-row {
    flex-direction: column;
  }
}

/* ---------- Quick Start: Photo → Quote (2026-10-11) ---------- */
.h38-qs .h38-qs-steps { display:flex; gap:8px; justify-content:center; margin:6px 0 14px; }
.h38-qs-dot { width:28px; height:6px; border-radius:999px; background:#d7e2ea; }
.h38-qs-dot.on { background:#174a70; }
.h38-qs-dot.done { background:#7fb069; }
.h38-qs-camera { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  border:2px dashed #9fb6c9; border-radius:18px; padding:34px 20px; background:#f2f7fb; cursor:pointer; }
.h38-qs-camera-emoji { font-size:3.4rem; line-height:1; }
.h38-qs-camera strong { font-size:1.2rem; color:#0b2438; }
.h38-qs-camera p { margin:0; }
.h38-qs-fields { display:grid; gap:10px; margin-top:14px; }
.h38-qs-fields label { display:grid; gap:4px; font-weight:700; font-size:.85rem; color:#0b2438; }
.h38-flow-view .h38-qs-fields input, .h38-flow-view .h38-qs-label input, .h38-flow-view .h38-qs-label textarea {
  min-height:52px; border:1.5px solid #c9d6e0; border-radius:12px; padding:10px 14px; font-size:1rem; width:100%; box-sizing:border-box; }
.h38-qs-label { display:grid; gap:4px; font-weight:700; font-size:.85rem; color:#0b2438; margin-bottom:10px; }
.h38-flow-view .linklike { background:none; border:none; color:#236a9a; font-weight:700; font-size:.92rem;
  padding:12px 8px; min-height:44px; cursor:pointer; display:block; margin:6px auto 0; }
.h38-qs-back { width:100%; margin-top:12px; }
.h38-qs-photo-row { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.h38-qs-thumb { width:84px; height:84px; object-fit:cover; border-radius:14px; flex:none; }
.h38-qs-thumb-none { display:flex; align-items:center; justify-content:center; font-size:2rem; background:#f2f7fb; border:1px solid #e2e9ef; }
.h38-qs-ai-status { font-size:.9rem; color:#5d7285; margin:8px 0; }
.h38-qs-sugs { display:grid; gap:8px; margin-bottom:12px; }
.h38-qs-sug { display:flex; align-items:center; gap:10px; min-height:56px; padding:10px 12px; border-radius:12px;
  border:1.5px solid #c9d6e0; background:#fff; font-size:.95rem; cursor:pointer; text-align:left; width:100%; }
.h38-qs-sug-desc { flex:1; font-weight:700; color:#142839; }
.h38-qs-ai-tag { display:inline-block; margin-left:6px; font-size:.68rem; font-weight:800; color:#fff;
  background:#236a9a; border-radius:999px; padding:1px 8px; vertical-align:middle; }
.h38-qs-sug-meta { font-variant-numeric:tabular-nums; color:#5d7285; font-size:.85rem; white-space:nowrap; }
.h38-qs-sug-add { font-size:1.3rem; font-weight:800; color:#174a70; width:28px; text-align:center; }
.h38-qs-sug.added { border-color:#7fb069; background:#eef7ec; opacity:.7; }
.h38-qs-manual { border-top:1px solid #e2e9ef; padding-top:12px; margin-top:4px; }
.h38-qs-manual-row { display:grid; grid-template-columns:1fr 64px 84px; gap:8px; margin:8px 0; }
.h38-qs-manual-row input { min-height:52px; border:1.5px solid #c9d6e0; border-radius:12px; padding:8px 10px; font-size:1rem; width:100%; box-sizing:border-box; }
.h38-qs-line { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid #e2e9ef; border-radius:12px; background:#f7fafc; margin-top:8px; }
.h38-qs-line small { color:#5d7285; display:block; font-variant-numeric:tabular-nums; }
.h38-qs-x { border:none; background:#fdecea; color:#b3261e; border-radius:10px; min-width:44px; min-height:44px; font-weight:800; cursor:pointer; }
.h38-qs-edit { border:1px solid #e2e9ef; border-radius:14px; padding:12px; margin-bottom:10px; background:#fff; }
.h38-qs-edit > input { width:100%; min-height:52px; border:1.5px solid #c9d6e0; border-radius:12px; padding:8px 12px; font-size:1rem; box-sizing:border-box; margin-bottom:8px; }
.h38-qs-edit-nums { display:grid; grid-template-columns:1fr 24px 1fr; gap:6px; align-items:center; text-align:center; }
.h38-qs-edit-nums input { min-height:52px; border:1.5px solid #c9d6e0; border-radius:12px; padding:8px 10px; font-size:1rem; width:100%; box-sizing:border-box; }
.h38-qs-edit-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.h38-qs-total { display:flex; justify-content:space-between; align-items:center; padding:14px 4px;
  font-size:1.25rem; border-top:2px solid #0b2438; margin:12px 0 4px; }
.h38-qs-done-total { text-align:center; padding:18px; background:#e9f6ee; border-radius:16px; margin-bottom:12px; }
.h38-qs-done-total small { display:block; color:#176b3a; font-weight:700; text-transform:uppercase; font-size:.75rem; letter-spacing:.06em; }
.h38-qs-done-total strong { font-size:2.2rem; color:#0b2438; }
.h38-qs-remind { background:#fff4d6; border:1px solid #f0dfae; border-radius:14px; padding:14px 16px; margin:14px 0; display:grid; gap:8px; }
.h38-qs-remind label { display:flex; gap:10px; align-items:center; font-size:.92rem; }
.h38-qs-remind input[type="checkbox"] { width:22px; height:22px; }
/* Quick Start hero on Owner Home (scoped under h38-owner-home, not a flow view) */
.h38-qs-hero { margin-bottom:14px; }
.h38-qs-btn { display:flex; align-items:center; gap:12px; width:100%; min-height:76px; padding:14px 16px;
  border:none; border-radius:18px; cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(135deg,#0b2438 0%,#174a70 70%,#1d5a86 100%); box-shadow:0 10px 28px rgba(11,36,56,.18); }
.h38-qs-btn:active { transform:translateY(1px); }
.h38-qs-emoji { font-size:2rem; }
.h38-qs-text { flex:1; }
.h38-qs-text strong { display:block; font-size:1.05rem; }
.h38-qs-text small { color:rgba(255,255,255,.78); font-size:.82rem; }
.h38-qs-arrow { font-size:1.4rem; font-weight:800; }