/* ============================================================
   layout-c.css — ADAPTIVE. Touch-first. Spring motion.
   Big tap targets (≥50px), bottom-sheet modals on small screens,
   container queries for fluid sizing.
   ============================================================ */

.layout-c .pos-page { padding: 16px; max-width: 1280px; margin: 0 auto; container-type: inline-size; }
.layout-c .pos-page-title { font-family: var(--ll-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.layout-c .pos-page-sub { font-size: 13px; }

/* Tabs — segmented, touch-sized */
.layout-c .pos-tabs { padding: 3px; border-radius: 12px; gap: 3px; background: color-mix(in oklab, var(--color-text) 5%, var(--color-surface)); }
.layout-c .pos-tab { padding: 12px 14px; min-height: 44px; border-radius: 9px; font-size: 13px; font-weight: 600; text-transform: none; }
.layout-c .pos-tab.is-active { background: var(--color-primary); color: var(--color-btn-primary-text, #fff); }

/* Cards — soft, mobile-friendly */
.layout-c .pos-card { border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px color-mix(in oklab, var(--color-text) 6%, transparent); }
.layout-c .pos-card__title { font-family: var(--ll-font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

/* Stat cards */
.layout-c .pos-stat { padding: 16px; border-radius: 14px; }
.layout-c .pos-stat__value { font-family: var(--ll-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.layout-c .pos-stat__delta { padding: 3px 10px; font-size: 11px; }

/* Tables — wraps to cards on narrow screens via container query */
.layout-c .pos-table { font-size: 13px; }
.layout-c .pos-table th { padding: 10px 14px; font-size: 11px; text-transform: none; }
.layout-c .pos-table td { padding: 12px 14px; }
@container (max-width: 640px) {
  .layout-c .pos-table thead { display: none; }
  .layout-c .pos-table, .layout-c .pos-table tbody, .layout-c .pos-table tr, .layout-c .pos-table td { display: block; width: 100%; }
  .layout-c .pos-table tr { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
  .layout-c .pos-table td { border-bottom: 1px dashed var(--pos-divider, var(--color-border)); padding: 8px 0; display: flex; justify-content: space-between; align-items: center; }
  .layout-c .pos-table td:last-child { border-bottom: 0; }
  .layout-c .pos-table td::before { content: attr(data-label); color: var(--color-text-secondary); font-size: 11px; font-family: var(--ll-font-mono); }
}

/* List items — big touch targets */
.layout-c .pos-list-item { padding: 14px 10px; min-height: 56px; }

/* Modals — bottom sheet on small viewports */
.layout-c .pos-modal { border-radius: 16px; padding: 20px; }
.layout-c .pos-modal__title { font-family: var(--ll-font-display); font-size: 20px; }
@media (max-width: 640px) {
  .layout-c .pos-modal-overlay { padding: 0; align-items: end; }
  .layout-c .pos-modal { width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .layout-c .pos-modal::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--color-text) 20%, transparent); margin: 0 auto 14px; }
}
.layout-c .pos-modal--sheet { width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; }

/* Forms — large touch targets */
.layout-c .pos-input,
.layout-c .pos-select,
.layout-c .pos-textarea { height: 50px; border-radius: 12px; padding: 0 16px; font-size: 15px; }
.layout-c .pos-textarea { height: auto; min-height: 100px; padding: 14px 16px; }
.layout-c .pos-label { font-size: 12px; text-transform: none; font-family: var(--ll-font-body); font-weight: 600; color: var(--color-text); letter-spacing: 0; }

/* Buttons — finger-friendly */
.layout-c .pos-btn { height: 50px; padding: 0 20px; border-radius: 12px; font-weight: 700; text-transform: none; font-size: 14px; }
.layout-c .pos-btn--icon { width: 50px; padding: 0; border-radius: 50%; }
.layout-c .pos-btn--sm { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.layout-c .pos-btn--lg { height: 60px; padding: 0 26px; border-radius: 14px; font-size: 16px; }
.layout-c .pos-btn--primary:active { transform: scale(0.97); }

/* Chips */
.layout-c .pos-chip { padding: 4px 12px; border-radius: 999px; font-size: 11px; }

/* Toggle switch — phone-style */
.layout-c .pos-switch { width: 50px; height: 30px; }
.layout-c .pos-switch__thumb { width: 26px; height: 26px; }
.layout-c .pos-switch.is-on .pos-switch__thumb { transform: translateX(20px); }

/* Progress */
.layout-c .pos-progress { height: 8px; }

/* Floating action button (FAB) — surfaced on small screens */
.layout-c .pos-fab { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: var(--color-btn-primary-text, #fff); border: 0; font-size: 24px; cursor: pointer; box-shadow: 0 8px 24px color-mix(in oklab, var(--color-primary) 40%, transparent); z-index: 100; }
@media (min-width: 900px) {
  .layout-c .pos-fab { display: none; }
}

/* Springy hover on cards */
.layout-c .pos-card { transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.layout-c .pos-card:hover { transform: translateY(-2px); }