/* ============================================================
   styles/ui.css — the UI-system primitives' styling (§9.2).
   Tokens only (src/styles/tokens.css). One visual language for
   DecisionControls / ActionBar / EmptyState across every screen.
   Loaded after styles.css so primitives win over legacy per-screen
   rules as screens migrate onto them.
   ============================================================ */

/* ---- DecisionControls: the approve/decline/act buttons ---- */
.dc { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-sm { gap: 6px; }
.dc-btn {
  flex: 1 1 auto; min-width: 84px;
  padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; font-weight: 650; font-family: inherit;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .08s ease, background .15s ease;
}
.dc-sm .dc-btn { padding: 8px 11px; font-size: 12.5px; min-width: 68px; border-radius: 10px; }
.dc-btn:active { transform: scale(0.98); }
/* Tone semantics (owner-locked 2026-07-14): POSITIVE = module theme colour;
   NEGATIVE = one red everywhere (soft = reversible, danger = destructive);
   NEUTRAL = grey. Only the positive tone themes per module. */
.dc-pos { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
.dc-neg { background: var(--neg-soft); color: var(--neg-ink); border-color: var(--neg-border); }
.dc-neg:hover { background: rgba(192,69,58,0.16); }
.dc-mid { background: rgba(35,60,65,0.05); color: var(--ink-1); border-color: rgba(35,60,65,0.14); }
.dc-quiet { background: transparent; color: var(--muted); border-color: rgba(35,60,65,0.14); }
/* danger = destructive (delete/stop) — SOLID red, heavier than a soft negative */
.dc-danger { background: var(--neg-solid); color: #fff; border-color: var(--neg-solid); }
.dc-danger:hover { filter: brightness(1.06); }

/* ---- ActionBar: multi-select bottom bar — LIGHT frosted (Option C, owner 2026-07-14).
   One bar, consistent with the light app; the positive button carries the module
   theme, negatives stay red, neutral grey — same tones as the card buttons. ---- */
.ui-actionbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 60;
  width: min(440px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 16px;
  background: #fff; color: var(--ink);
  border: 1px solid rgba(35,60,65,0.10);
  box-shadow: 0 12px 30px -12px rgba(8,27,32,0.45);
}
.ui-actionbar-count { font-size: 13px; white-space: nowrap; color: var(--muted); }
.ui-actionbar-count strong { font-weight: 700; color: var(--ink); }
.ui-actionbar-actions { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
.ui-actionbar .dc-btn { flex: 0 0 auto; min-width: 0; padding: 9px 12px; }

/* ---- EmptyState ---- */
/* The one empty-state look, unified on the nicest bespoke treatment (the meals
   dashed-card + badge, §9.3 item 6): soft dashed card, circular brand badge. */
.ui-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 20px; text-align: center;
  border: 1px dashed rgba(35,60,65,0.18); border-radius: 18px;
  background: rgba(255,255,255,0.5);
}
.ui-empty-ico {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark);
}
.ui-empty strong { font-size: 16px; color: var(--ink); }
.ui-empty em { font-size: 13px; color: var(--ink-3); font-style: normal; max-width: 280px; }
.ui-empty-actions { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- approval cards: tap for details, swipe for row actions ---- */
.approval-card { flex-direction: column; align-items: stretch; gap: 10px; cursor: pointer; }
.approval-card .row-line { display: flex; align-items: flex-start; gap: 10px; }
.approval-card .row-main { flex: 1; display: grid; gap: 3px; min-width: 0; }
.approval-card .row-main strong { font-size: 15px; font-weight: 400; color: var(--ink); line-height: 1.3; }
.approval-card .row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.approval-card .approval-note { font-size: 12.5px; color: var(--muted); }
.approval-card .row-side { display: grid; gap: 6px; justify-items: end; flex-shrink: 0; }
.approval-card .approval-amount { font-weight: 700; color: var(--ink); font-size: 14px; }

/* ---- migrated chore card: layout moves onto the swipe wrapper ---- */
/* ui/swipe.js wraps card children in .ui-swipe-row, which breaks the legacy
   `.chore-card > .chore-body` direct-child rules — reproduce the flex layout
   on the wrapper so armed cards render pixel-equal to unarmed ones. */
.cadence-list .chore-card.ui-swipe { display: block; padding: 0; }
.cadence-list .chore-card .ui-swipe-row { display: flex; align-items: center; gap: 11px; padding: 12px 13px; }
.cadence-list .chore-card .ui-swipe-row > .chore-body { flex: 1 1 auto; min-width: 0; }
.cadence-list .chore-card .ui-swipe-row > .chore-aside { flex: 0 0 auto; margin-left: auto; }
.chore-aside { display: flex; align-items: center; gap: 8px; }
/* Pencil = edit/reschedule (owner A6) — quiet icon button on the row edge. */
.chore-edit {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; border: 1px solid rgba(35,60,65,0.14);
  background: #fff; color: var(--muted); cursor: pointer; padding: 0;
}
.chore-edit:active { transform: scale(0.95); }
.chore-card .hx-tick { flex: 0 0 auto; }

/* ---- migrated supply row: same wrapper trick as the chore card ---- */
/* ui/swipe.js wraps the row's children in .ui-swipe-row, which breaks the kit's
   `.row-card` grid — reproduce the grid on the wrapper so an armed to-buy row is
   pixel-identical at rest (cues are opacity:0 until dragged). Scoped to .ui-swipe
   so only swipeable supply rows are affected, never plain .row-card screens. */
.hx-scope .row-card.ui-swipe:not(.chore-card) { display: block; padding: 0; }
.hx-scope .row-card.ui-swipe:not(.chore-card) .ui-swipe-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 13px 15px;
}
.hx-scope .row-card.ui-swipe:not(.chore-card) .ui-swipe-row:has(.hx-bubble) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.hx-scope .row-card.ui-swipe:not(.chore-card) .ui-swipe-row:has(.hx-tick) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.hx-scope .approval-card.ui-swipe .ui-swipe-row {
  display: block;
  padding: 12px 14px;
}

/* ---- shared HomeOS item tiles: meals-like cards for tasks, supplies, vendors ---- */
.hx-scope .os-card-list.card-tiles {
  gap: 7px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.hx-scope .os-card-list.card-tiles .row-card,
.cadence-body.card-tiles .chore-card {
  border: 1px solid rgba(35,60,65,0.1);
  border-radius: 13px;
  background: #fff;
  box-shadow: none;
}
.hx-scope .os-card-list.card-tiles .row-card:last-child {
  border: 1px solid rgba(35,60,65,0.1);
}
.hx-scope .os-card-list.card-tiles .row-card.ui-swipe:not(.chore-card),
.cadence-body.card-tiles .chore-card.ui-swipe {
  padding: 0;
}
.hx-scope .os-card-list.card-tiles .row-card.ui-swipe:not(.chore-card) .ui-swipe-row,
.cadence-body.card-tiles .chore-card.ui-swipe .ui-swipe-row {
  padding: 11px 12px;
}
.hx-scope .os-card-list.card-tiles .row-main strong,
.cadence-body.card-tiles .chore-body strong {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
.hx-scope .os-card-list.card-tiles .row-meta .mi,
.cadence-body.card-tiles .chore-body em {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.35;
}

/* ---- swipe affordances (ui/swipe.js applies .ui-swipe*) ---- */
[data-swipe-right],
[data-swipe-left],
[data-swipe-reveal],
.ui-swipe {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.ui-swipe { position: relative; overflow: hidden; }
.ui-swipe-row { position: relative; transition: transform .18s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.ui-swipe.swiping .ui-swipe-row { transition: none; }
.ui-swipe-cue {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  padding: 0 18px; font-weight: 700; font-size: 13px; color: #fff; opacity: 0;
}
.ui-swipe-cue.pos { left: 0; background: var(--accent-dark); border-radius: inherit; }          /* positive = module theme */
.ui-swipe-cue.neg { right: 0; background: var(--neg-solid); border-radius: inherit; justify-content: flex-end; } /* negative = the one red */
/* ---- swipe REVEAL mode: swipe-left latches open an action drawer (Edit/Swap/Delete) ---- */
.ui-swipe-reveal .ui-swipe-row { background: inherit; position: relative; z-index: 1; }
.ui-swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: stretch; }
.ui-swipe-actions .msw-act {
  width: 56px; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit;
}
.ui-swipe-actions .msw-act .msw-ico { font-size: 15px; line-height: 1; }
.ui-swipe-actions .msw-act.edit { background: #2f6fab; }
.ui-swipe-actions .msw-act.swap { background: #7a5aa8; }
.ui-swipe-actions .msw-act.cant { background: #b87822; }
.ui-swipe-actions .msw-act.move { background: #2f6fab; }
.ui-swipe-actions .msw-act.hold { background: #5f7380; }
.ui-swipe-actions .msw-act.del { background: var(--neg-solid, #c1403a); }