/* assets/css/app.css — Archis patient app prototype */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
::selection { background: var(--archis-mint); color: var(--archis-mint-ink); }
:focus-visible { outline: 2px solid var(--archis-deep); outline-offset: 2px; border-radius: 6px; }
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ── Stage (desktop presentation chrome) ────────────────── */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 48px 32px;
}
.stage-side { display: none; width: 320px; }

.phone {
  width: 390px;
  height: 844px;
  flex-shrink: 0;
  border-radius: 46px;
  padding: 10px;
  background: #0E0E0D;
  box-shadow: 0 40px 90px -30px rgba(20, 20, 19, 0.45), 0 0 0 1px rgba(20, 20, 19, 0.08);
}
.phone-screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 37px;
  background: var(--archis-bone);
}

@media (min-width: 1080px) { .stage-side { display: block; } }

/* Below 520px the frame disappears — real-device layout. */
@media (max-width: 520px) {
  .stage { padding: 0; gap: 0; display: block; }
  .phone {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .phone-screen { border-radius: 0; }
}

.jump {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--archis-radius-md);
  padding: 10px 14px;
  font-size: var(--archis-text-md);
  font-weight: 700;
  color: var(--archis-ink-70);
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--archis-dur-app) var(--archis-ease), color var(--archis-dur-app) var(--archis-ease);
}
.jump:hover { background: rgba(20,20,19,.05); color: var(--archis-ink); }
.jump.is-on { background: var(--archis-ink); color: var(--archis-bone); }

/* ── Screens ────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--archis-bone);
}
.screen.is-active { display: flex; }

.screen.is-entering { animation: screenIn 220ms var(--archis-ease) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}

.screen-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--archis-gutter) 96px;
}
.screen-body::-webkit-scrollbar { width: 0; }

/* staggered entrance for direct children */
.screen.is-active .screen-body > * { animation: itemIn 320ms var(--archis-ease) both; }
.screen.is-active .screen-body > *:nth-child(1) { animation-delay: 20ms; }
.screen.is-active .screen-body > *:nth-child(2) { animation-delay: 80ms; }
.screen.is-active .screen-body > *:nth-child(3) { animation-delay: 140ms; }
.screen.is-active .screen-body > *:nth-child(4) { animation-delay: 200ms; }
.screen.is-active .screen-body > *:nth-child(n+5) { animation-delay: 240ms; }
@keyframes itemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Touch targets ──────────────────────────────────────── */
.tap {
  min-height: var(--archis-tap-min);
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  transition: transform var(--archis-dur-app) var(--archis-ease), opacity var(--archis-dur-app) var(--archis-ease);
}
.tap:active { transform: scale(0.97); }

/* ── Quick actions ──────────────────────────────────────── */
.quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: var(--archis-tap-min);
  padding: 14px 0 12px;
  border-radius: var(--archis-radius-lg);
  border: 1px solid var(--archis-line);
  background: var(--archis-white);
  font-family: inherit;
  font-size: var(--archis-text-xs);
  font-weight: 700;
  color: var(--archis-ink);
  cursor: pointer;
  transition: transform var(--archis-dur-app) var(--archis-ease), border-color var(--archis-dur-app) var(--archis-ease);
}
.quick:active { transform: scale(0.96); }
.quick-icon {
  display: grid;
  place-items: center;
  height: 34px;
  width: 34px;
  border-radius: 10px;
  background: var(--archis-linen);
  color: var(--archis-deep);
  font-size: 15px;
  font-weight: 800;
}

/* ── Tab bar ────────────────────────────────────────────── */
.tabbar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  border-top: 1px solid var(--archis-line);
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 12px calc(20px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: var(--archis-tap-min);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--archis-text-xs);
  font-weight: 700;
  color: var(--archis-ink-30);
  cursor: pointer;
  transition: color var(--archis-dur-app) var(--archis-ease);
}
.tab-dot {
  height: 4px;
  width: 22px;
  border-radius: var(--archis-radius-pill);
  background: transparent;
  transition: background var(--archis-dur-app) var(--archis-ease), width var(--archis-dur-app) var(--archis-ease);
}
.tab.is-on { color: var(--archis-ink); }
.tab.is-on .tab-dot { background: var(--archis-ink); }

/* ── Plan timeline ──────────────────────────────────────── */
.plan-step {
  display: flex;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.plan-rail { display: flex; flex-direction: column; align-items: center; width: 30px; flex-shrink: 0; }
.plan-dot {
  display: grid;
  place-items: center;
  height: 22px;
  width: 22px;
  border-radius: var(--archis-radius-pill);
  border: 2px solid var(--archis-stroke);
  background: var(--archis-bone);
  font-size: 11px;
  font-weight: 800;
  color: var(--archis-ink-30);
  transition: all var(--archis-dur-app) var(--archis-ease);
}
.plan-line { flex: 1; width: 2px; min-height: 34px; background: var(--archis-line); }
.plan-step.is-done .plan-dot { background: var(--archis-deep); border-color: var(--archis-deep); color: var(--archis-bone); }
.plan-step.is-done .plan-line { background: var(--archis-deep); }
.plan-step.is-current .plan-dot {
  background: var(--archis-ink);
  border-color: var(--archis-ink);
  color: var(--archis-bone);
  animation: pulse 2.4s var(--archis-ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 20, 19, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(20, 20, 19, 0); }
}
.plan-body { flex: 1; padding-bottom: 18px; }

/* ── Bottom sheet ───────────────────────────────────────── */
.sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 15;
  border-radius: var(--archis-radius-sheet) var(--archis-radius-sheet) 0 0;
  background: var(--archis-ink);
  color: var(--archis-bone);
  padding: 14px 24px calc(96px + env(safe-area-inset-bottom));
  animation: sheetUp 300ms var(--archis-spring) both;
}
@keyframes sheetUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.sheet.is-swapping { animation: sheetSwap 260ms var(--archis-ease) both; }
@keyframes sheetSwap {
  0%   { opacity: 1; }
  40%  { opacity: 0.4; transform: translateY(5px); }
  100% { opacity: 1; transform: none; }
}
.sheet-grip {
  height: 4px;
  width: 40px;
  border-radius: var(--archis-radius-pill);
  background: var(--archis-night-stroke);
  margin: 0 auto 16px;
}

/* ── Rows, chips, checkboxes ────────────────────────────── */
.row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  min-height: var(--archis-tap-min);
  border-radius: var(--archis-radius-lg);
  border: 1px solid var(--archis-line);
  background: var(--archis-white);
  padding: 14px 16px;
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--archis-dur-app) var(--archis-ease), border-color var(--archis-dur-app) var(--archis-ease);
}
.row:active { transform: scale(0.99); }

.chip {
  min-height: 40px;
  flex-shrink: 0;
  border-radius: var(--archis-radius-pill);
  border: 1px solid var(--archis-line);
  background: var(--archis-white);
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--archis-text-sm);
  font-weight: 700;
  color: var(--archis-ink-70);
  cursor: pointer;
  transition: all var(--archis-dur-app) var(--archis-ease);
}
.chip.is-on { background: var(--archis-ink); border-color: var(--archis-ink); color: var(--archis-bone); }

.check {
  display: grid;
  place-items: center;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  border-radius: var(--archis-radius-sm);
  border: 2px solid var(--archis-stroke);
  color: var(--archis-bone);
  font-size: 12px;
  font-weight: 800;
  transition: all var(--archis-dur-app) var(--archis-ease);
}
.row.is-done { background: var(--archis-linen); }
.row.is-done .check { background: var(--archis-deep); border-color: var(--archis-deep); }
.row.is-done .row-title { color: var(--archis-ink-45); }

/* ── Booking ────────────────────────────────────────────── */
.book-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--archis-line);
  background: var(--archis-bone);
  padding: 14px var(--archis-gutter) calc(22px + env(safe-area-inset-bottom));
}
.bk-panel { animation: panelIn 260ms var(--archis-ease) both; }
.bk-panel.is-back { animation-name: panelInBack; }
@keyframes panelIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes panelInBack {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  min-height: var(--archis-tap-min);
  border-radius: var(--archis-radius-xl);
  border: 1px solid var(--archis-line);
  background: var(--archis-white);
  padding: 16px 18px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--archis-dur-app) var(--archis-ease);
}
.opt:active { transform: scale(0.99); }
.opt.is-on { background: var(--archis-ink); border-color: var(--archis-ink); }
.opt.is-on .opt-title { color: var(--archis-bone); }
.opt.is-on .opt-meta { color: #A9A69F; }
.opt.is-on .opt-icon { background: #2A2926; color: var(--archis-mint); }
.opt.is-on .opt-radio { border-color: var(--archis-mint); background: var(--archis-mint); }
.opt-icon {
  display: grid;
  place-items: center;
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--archis-linen);
  color: var(--archis-deep);
  transition: all var(--archis-dur-app) var(--archis-ease);
}
.opt-radio {
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  border-radius: var(--archis-radius-pill);
  border: 2px solid var(--archis-stroke);
  transition: all var(--archis-dur-app) var(--archis-ease);
}

.field {
  width: 100%;
  min-height: var(--archis-tap-min);
  border-radius: var(--archis-radius-md);
  border: 1px solid var(--archis-stroke);
  background: var(--archis-white);
  padding: 13px 15px;
  font: inherit;
  font-size: var(--archis-text-lg);
  color: var(--archis-ink);
  transition: border-color var(--archis-dur-app) var(--archis-ease);
}
.field::placeholder { color: var(--archis-ink-30); }
.field:focus { border-color: var(--archis-deep); outline: none; }

/* ── Skeletons (loading pattern, never spinners) ────────── */
.skeleton {
  border-radius: var(--archis-radius-md);
  background: linear-gradient(90deg, #EFEDE6 25%, #F6F5F0 37%, #EFEDE6 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}