/* Shell -Focused (.shell-focused-topbar family)
 *
 * Single-task chrome: back chevron · title · right-side actions.
 * Optional below-strip slot for progress bar, status row, or sub-nav.
 *
 * Replaces .pos-topbar, .onboarding-topbar, and the archived
 * _lite_form_topbar with one block contract.
 *
 * Spec: docs/strategy/design-system/32-shell-system.md §3.3
 * Wireframe: wireframes/shell_mobile/_atlas.html §5
 *
 * Mobile-first. All values resolve through tokens.css. No tabbar
 * is rendered alongside this shell -see _focused_base.html.
 */

/* ────────────────────────────────────────────────────────────────
   Topbar -52px row, three-column grid
   ──────────────────────────────────────────────────────────────── */
.shell-focused-topbar {
  height: 52px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: 0 var(--space-3);
}

.shell-focused-topbar-back {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--divider);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}

.shell-focused-topbar-back:hover,
.shell-focused-topbar-back:focus-visible {
  color: var(--text);
  border-color: var(--border);
  outline: none;
}

.shell-focused-topbar-back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-focused-topbar-title {
  font-size: var(--font-size-prominent-lg);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-prominent);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-focused-topbar-title small {
  display: block;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--muted);
  margin-top: 1px;
  letter-spacing: 0;
}

.shell-focused-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Text action -Save, Skip, Done, + Add. One per topbar, max.
   Hover is the elevated treatment (lift + shadow + tinted bg), used
   across the design system for any topbar / list-row text CTA that
   wants to feel pressable. Mirrored by .shell-page-head-cta. */
.shell-focused-topbar-text-btn {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--primary);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.shell-focused-topbar-text-btn:hover,
.shell-focused-topbar-text-btn:focus-visible {
  background: var(--primary-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  outline: none;
}

.shell-focused-topbar-text-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.shell-focused-topbar-text-btn.muted { color: var(--muted); }
.shell-focused-topbar-text-btn.muted:hover,
.shell-focused-topbar-text-btn.muted:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Icon action -Print, More, contextual. Up to two per topbar. */
.shell-focused-topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--divider);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}

.shell-focused-topbar-icon-btn:hover,
.shell-focused-topbar-icon-btn:focus-visible {
  color: var(--text);
  border-color: var(--border);
  outline: none;
}

.shell-focused-topbar-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ────────────────────────────────────────────────────────────────
   Below-strip slot -progress / status / sub-nav
   ──────────────────────────────────────────────────────────────── */
.shell-focused-topbar-below {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

/* Progress strip (onboarding step variant). */
.shell-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.shell-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.shell-progress-track {
  height: 4px;
  background: var(--surface-soft);
  border-radius: 999px;
  overflow: hidden;
}

.shell-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}

/* POS status row variant -service chip. */
.shell-focused-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.shell-focused-status-row .chip-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 999px;
  padding: 3px 10px;
}

.shell-focused-status-row .chip-open-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* ────────────────────────────────────────────────────────────────
   Body + sticky footer
   ──────────────────────────────────────────────────────────────── */
.shell-focused-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Footer -default is the flex sticky-footer pattern: sits at the end
   of the `.shell-focused` flex column, body grows to fill above it.
   Works inside any container (including the wireframe atlas's
   phone-wrap), no top-layer escape, no viewport-relative side effects.

   When a long form needs an *always-visible* CTA (the operator should
   never have to scroll to find Save), opt into the
   `.shell-focused-footer.is-fixed` modifier defined below. The form
   template adds the modifier explicitly so the production form pins
   the footer to the viewport without forcing the atlas demos to escape
   their phone frames. See docs/strategy/design-system/15-form-controls.md
   for the convention. */
.shell-focused-footer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--divider);
  display: flex;
  gap: var(--space-2);
}

.shell-focused-footer .btn { flex: 1; }
.shell-focused-footer form { margin: 0; }

/* A disabled .btn can't receive focus/hover, so its tooltip trigger is a
   wrapper span around it instead of the button itself -this keeps that
   wrapper's flex sizing matching a bare .btn's. */
.shell-focused-footer .tooltip-trigger { flex: 1; display: flex; }
.shell-focused-footer .tooltip-trigger .btn { width: 100%; }

/* Opt-in: pin the footer to the bottom of the viewport regardless of
   scroll position, like `.shell-tabbar` in features/shell.css. Use on
   long forms whose body content can exceed the viewport -the operator
   never loses sight of the primary CTA. The matching `.is-fixed-body`
   modifier on the corresponding `.shell-focused-body` reserves
   space at the bottom so the last field can't sit behind the pinned
   footer. */
.shell-focused-footer.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
}

.shell-focused-body.is-fixed-body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* ────────────────────────────────────────────────────────────────
   Outer shell container
   ──────────────────────────────────────────────────────────────── */
.shell-focused {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}