/* app-extra.css — the delta between the mockup's styles and the real app.
   Everything else comes from app.css, lifted from the prototype unchanged. */

/* ---------- installed / standalone ---------- */
/* Once it's on the home screen there is no browser chrome, so the app owns the
   full viewport including the notch and the home indicator. */
@media (display-mode: standalone) {
  body { padding: 0; background: var(--cream); }
  .stage-note { display: none; }
  .phone {
    width: 100%; height: 100dvh; min-height: 0;
    border-radius: 0; box-shadow: none;
  }
  .screen { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* iOS rubber-band scroll shows the body colour behind the app; match it. */
@media (max-width: 460px) {
  body { background: var(--cream); }
  .screen { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* Stop double-tap zoom and the grey tap flash on controls. */
button, .item, .cal-day, .plan-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input { font-size: 16px; } /* below 16px iOS zooms the whole page on focus */

/* .streak sets display:inline-flex, which outranks the [hidden] attribute. */
.streak[hidden] { display: none; }

/* ---------- wardrobe ---------- */
.w-actions { display: flex; gap: 9px; margin-bottom: 16px; }
.w-actions .btn.primary { flex: 1; }

.item .art { background-size: cover; background-position: center; }
.item .body .mat { margin-top: 5px; }

/* ---------- forms ---------- */
.sheet .opt-row .opt { display: inline-flex; align-items: center; }
.sheet .btn.ghost { width: 100%; }
.sheet .dots { display: flex; }
.sheet .dots i {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line);
  margin-left: -7px; display: block;
}
.sheet .dots i:first-child { margin-left: 0; }

.cpw {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.45;
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
}

/* ---------- plan ahead ---------- */
.plan { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.plan::-webkit-scrollbar { display: none; }
.plan-card { cursor: pointer; }
.plan-card.tent .pc-note { opacity: .8; }
.plan-card .pc-arts .layer-art { background-size: cover; background-position: center; }

/* ---------- travel ---------- */
.pack-row .layer-art { width: 40px; height: 40px; border-radius: 11px; }
.pack-row .layer-art svg { width: 28px; height: 28px; }
.pack-row .layer-art { background-size: cover; background-position: center; }

/* ---------- misc ---------- */
.gap-card .tag {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--clay);
}
.gap-card p:last-child { margin-bottom: 0; }

.screen-head .sub:empty { display: none; }

.btn[disabled] { opacity: .55; cursor: default; }

.place-opt, .t-opt { font-weight: 600; }