/* ============ PHOTOS & VOICE ============ */

/* ---- Photo picker ---- */
.imgpick-preview {
  width: 100%; max-width: 280px; aspect-ratio: 1; margin: 6px auto 16px;
  border-radius: 14px; background: var(--bg-secondary) center / cover no-repeat;
  border: 1px solid var(--border);
}
.imgpick-choose { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; cursor: pointer; padding: 14px 20px; font-size: 0.9375rem; }
.imgpick-choose input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.imgpick-hint { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin-top: 8px; }
.imgpick-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
.imgpick-or::before, .imgpick-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.imgpick-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.imgpick-status { min-height: 20px; margin-top: 10px; font-size: 0.8125rem; color: var(--text-primary); }
.imgpick-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Future-self portrait is now a button you tap to change */
button.fs-portrait { position: relative; padding: 0; cursor: pointer; font: inherit; font-size: 3.125rem; overflow: hidden; }
.fs-portrait-edit {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 0 10px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: .5px;
  background: rgba(0,0,0,.45); color: #fff;
}
.win-photo-slot { aspect-ratio: auto; min-height: 46px; font: inherit; font-size: 0.8125rem; color: var(--text-secondary); background-size: cover; background-position: center; }
.win-photo-slot.has-image { min-height: 90px; }

/* Vision board: drag works with fingers too */
.vb-freeform .vb-card { touch-action: none; user-select: none; -webkit-user-select: none; }
.vb-voice-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  border: 0; border-radius: 20px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff;
}

/* ---- Voice studio ---- */
.voice-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, var(--highlight), var(--card-bg)); }
.voice-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .voice-layout { grid-template-columns: minmax(0, 1fr); } }
.voice-player-card { position: sticky; top: 90px; }
@media (max-width: 900px) { .voice-player-card { position: static; } }
.voice-play-btn { width: 100%; margin: 12px 0 16px; padding: 14px; font-size: 1rem; }
.voice-settings { display: grid; gap: 12px; }
.voice-check { display: flex !important; align-items: center; gap: 10px; color: var(--text-primary) !important; font-size: 0.875rem !important; cursor: pointer; }
.voice-check input { width: 18px; height: 18px; }
.voice-note { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin-top: 14px; }

.voice-list { display: grid; gap: 10px; }
.voice-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; background: var(--bg-secondary); border-radius: 12px; }
.voice-row input[type="text"] { font-weight: 600; padding: 6px 10px; font-size: 0.875rem; }
.voice-row textarea { margin-top: 6px; font-size: 0.8125rem; padding: 6px 10px; min-height: 0; }
.voice-play {
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent-primary); color: #fff; font-size: 0.9375rem;
}
.voice-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voice-meta select { width: auto; font-size: 0.75rem; padding: 2px 6px; }
.voice-pl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.voice-pl input { padding: 6px 10px; font-size: 0.875rem; }
.voice-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.voice-tips div { display: grid; gap: 2px; font-size: 0.8125rem; }
.voice-tips span { color: var(--text-secondary); line-height: 1.5; }
.voice-pick { display: grid; gap: 6px; }
.voice-pick-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-secondary); }
.voice-pick-row.on { background: var(--highlight); }
.voice-pick-row label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-primary); font-size: 0.875rem; cursor: pointer; }
.voice-pick-row input { width: 18px; height: 18px; }

/* ---- Recorder ---- */
.rec-stage { display: grid; justify-items: center; gap: 10px; margin: 18px 0 8px; }
.rec-btn {
  width: 88px; height: 88px; border-radius: 50%; cursor: pointer;
  border: 4px solid var(--accent-primary); background: var(--card-bg);
  display: grid; place-items: center; transition: transform .15s ease;
}
.rec-btn:active { transform: scale(.95); }
.rec-dot { width: 36px; height: 36px; border-radius: 50%; background: #C0504A; transition: all .2s ease; }
.rec-btn.on .rec-dot { width: 30px; height: 30px; border-radius: 6px; }
.rec-btn.on { animation: recPulse 1.4s ease-in-out infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,80,74,.35); } 50% { box-shadow: 0 0 0 14px rgba(192,80,74,0); } }
@media (prefers-reduced-motion: reduce) { .rec-btn.on { animation: none; } }
.rec-time { font-size: 1.75rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-level { width: min(240px, 80%); height: 6px; border-radius: 3px; background: var(--bg-secondary); overflow: hidden; }
.rec-level div { height: 100%; width: 0; background: var(--accent-secondary); transition: width .08s linear; }
.rec-hint { font-size: 0.8125rem; color: var(--text-secondary); text-align: center; max-width: 360px; }
.rec-preview { width: 100%; margin-top: 8px; }
.rec-msg { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-secondary); font-size: 0.8125rem; line-height: 1.6; border-left: 4px solid var(--accent-primary); }

/* ---- Now-playing bar ---- */
.voice-bar {
  position: fixed; left: 50%; transform: translate(-50%, 16px); opacity: 0; visibility: hidden;
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 400;
  width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 16px;
  background: var(--card-bg); color: var(--text-primary);
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .3s ease, opacity .3s ease, visibility .3s; pointer-events: none;
}
.voice-bar.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; }
.vbar-info { flex: 1; min-width: 0; }
.vbar-title { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar-sub { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-sleep { margin-left: 4px; }
.vbar-ctrls { display: flex; gap: 6px; }
.vbar-ctrls button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; font-size: 0.875rem;
  background: var(--bg-secondary); color: var(--text-primary);
}
.vbar-ctrls button:first-child { background: var(--accent-primary); color: #fff; }
body.has-voicebar .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
body.has-voicebar #update-banner { bottom: calc(86px + env(safe-area-inset-bottom)); }
body.has-voicebar .app-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

@media print { .voice-bar, .vb-voice-badge, .fs-portrait-edit { display: none !important; } }

/* Visualize: background sound during timers */
.timer-sound { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.timer-sound select { width: auto; }

/* Phones: the tab bar is fixed along the bottom (~71px), so the now-playing bar,
   toasts and the update banner sit above it, and the bar clears the iPhone home indicator. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .tabs { padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important; }
  .voice-bar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  #update-banner { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.has-voicebar .toast { bottom: calc(160px + env(safe-area-inset-bottom)); }
  body.has-voicebar #update-banner { bottom: calc(154px + env(safe-area-inset-bottom)); }
  body.has-voicebar .app { padding-bottom: 180px; }
}

/* Vision card actions: drop-downs get their own full-width line, buttons share the next. */
.vb-grid .vb-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vb-grid .vb-card-actions select { flex: 1 1 100%; min-width: 0; width: 100%; }
.vb-grid .vb-card-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }

/* Vision card with no picture (or a link that stopped working) */
.vb-noimg {
  width: 100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-bottom: 1px dashed var(--border); background: var(--bg-secondary); color: var(--text-secondary);
  font: inherit; font-size: 0.75rem; cursor: pointer; padding: 10px; text-align: center;
}
.vb-noimg span { font-size: 1.625rem; }

/* Toasts: a hidden toast only slid 100px down, which on phones (raised above the tab bar) left it on
   screen and catching taps over the tabs. Hidden now means invisible and untappable everywhere. */
.toast { opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s ease, opacity .3s ease, visibility .3s; }
.toast.show { opacity: 1; visibility: visible; pointer-events: auto; transition: transform .3s ease, opacity .3s ease, visibility 0s; }

/* ============ v2.0.15 audit fixes ============ */

/* Inline two-, three- and four-column rows (pages/*.js use var(--g2) etc.) fold up on phones. */
:root { --g2: repeat(2, minmax(0, 1fr)); --g3: repeat(3, minmax(0, 1fr)); --g4: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { :root { --g3: minmax(0, 1fr); } }
@media (max-width: 480px) { :root { --g2: minmax(0, 1fr); --g4: repeat(2, minmax(0, 1fr)); } }
.goals-layout.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.goals-layout.cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 768px) { .goals-layout.cols-2, .goals-layout.cols-2-1 { grid-template-columns: minmax(0, 1fr); } }

/* A pasted link or long word wraps instead of widening the page. Tables keep whole words
   and scroll inside their own box. */
.card, .modal, .goal-card, .repeat-item { overflow-wrap: anywhere; }
table { overflow-wrap: normal; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Moon calendar: seven columns fit a 320px phone. */
@media (max-width: 480px) {
  .moon-cal-grid { gap: 2px; }
  .moon-cal-day { padding: 2px 0; border-radius: 6px; }
  .moon-cal-day .mphase { font-size: 0.9375rem; }
}

/* iPhone/iPad: date and time boxes otherwise ignore width:100% and push the page sideways. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; min-width: 0; max-width: 100%; text-align: left;
}
input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.25em; }

/* iPhone zooms into any box with text under 16px. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1rem) !important; }
}

/* A display rule must never beat the hidden attribute. */
[hidden] { display: none !important; }

/* Pop-ups fit the visible screen on iPhone (vh counts the space under Safari's toolbars),
   and the ✕ stays in reach while the pop-up scrolls. */
.modal { max-height: calc(100dvh - 40px); overscroll-behavior: contain; }
.modal-close {
  position: sticky; top: -16px; float: right; z-index: 3;
  margin: -16px -16px 0 8px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--card-bg); line-height: 1;
}
@media (max-width: 480px) { .modal { padding: 24px 18px; } }

/* The app's own confirm box (askConfirm in scripts/ui.js), above any pop-up. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, 0.55);
}
.confirm-overlay.active { display: flex; }
.confirm-box {
  background: var(--card-bg); color: var(--text-primary); border-radius: 16px; padding: 24px;
  width: 100%; max-width: 420px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); overflow-wrap: anywhere;
}
.confirm-box p { margin: 0 0 18px; line-height: 1.55; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media print { .confirm-overlay { display: none !important; } }