/* ===== Deck Family — Extras (transcription) =====
 * Scoped to #view-extras / .xtr- classes. Uses the app's warm design tokens.
 * Restyled Jul 3 to the app's convention: .section-title eyebrows above plain
 * .card sections (same as the Health view) — no bespoke card headers/icon chips.
 */

/* Small muted intro line inside a card (matches the app's card copy) */
.xtr-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }

/* --- YouTube textarea --- */
.xtr-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 92px;
  font-family: var(--sans); font-size: 15px; color: var(--text);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--cream); line-height: 1.5;
}
.xtr-textarea:focus { outline: none; border-color: var(--plum-soft); box-shadow: 0 0 0 3px rgba(122,74,130,0.15); }
.xtr-row { display: flex; justify-content: flex-end; }
.xtr-btn { min-width: 160px; }
.xtr-btn:disabled { opacity: 0.6; }

.xtr-msg { font-size: 13px; margin: 2px 0 0; }
.xtr-msg.is-ok { color: var(--sage-ink); }
.xtr-msg.is-err { color: var(--clay); }

/* --- Upload dropzone --- */
.xtr-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; cursor: pointer;
  padding: 22px 16px; border: 1.5px dashed var(--line); border-radius: 16px;
  background: var(--cream); transition: border-color .15s, background .15s;
}
.xtr-drop:hover, .xtr-drop.is-over { border-color: var(--plum-soft); background: #fdf8ef; }
.xtr-drop-ic { width: 34px; height: 34px; color: var(--plum-soft); }
.xtr-drop-ic svg { width: 34px; height: 34px; }
.xtr-drop-txt { font-size: 13px; color: var(--muted); }

.xtr-uploads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xtr-up { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.xtr-up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.xtr-up-bar { flex: 0 0 84px; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.xtr-up-fill { display: block; height: 100%; width: 0; background: var(--plum); transition: width .2s; }
.xtr-up-pct { flex: 0 0 34px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.xtr-up.is-done .xtr-up-fill { background: var(--sage); }
.xtr-up.is-done .xtr-up-pct { color: var(--sage-ink); }
.xtr-up.is-err .xtr-up-fill { background: var(--clay); }
.xtr-up.is-err .xtr-up-pct { color: var(--clay); }

/* --- Status list --- */
.xtr-sec-lbl {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 6px; font-weight: 600;
}
.xtr-sec-lbl:first-child { margin-top: 0; }
.xtr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.xtr-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.xtr-item:last-child { border-bottom: 0; }
.xtr-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
a.xtr-item-name:hover { color: var(--plum); text-decoration: underline; }
.xtr-item-meta { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.xtr-dl { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--clay); text-decoration: none; }
.xtr-dl:hover { text-decoration: underline; }

.xtr-item.is-processing .xtr-item-name { color: var(--muted); }
.xtr-spin {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--plum);
  animation: xtr-spin 0.8s linear infinite;
}
@keyframes xtr-spin { to { transform: rotate(360deg); } }

.xtr-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xtr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-ink); font-size: 12px; font-weight: 600;
}
.xtr-chip-ago { font-weight: 400; opacity: 0.75; }

/* Home tile — lilac, matches the small-tile family (shop/fin) */
.hm-small-extras { background: var(--tile-lilac); }
.hm-small-extras .hm-small-ic { color: var(--tile-lilac-ink); }
.hm-small-extras .hm-small-name { color: var(--tile-lilac-ink); }
.hm-small-extras .hm-small-sub { color: var(--tile-lilac-mut); }

/* ===== Meditation Studio (med- namespace) — appended Jul 3 2026 ===== */
/* Reuses the .xtr-card shell + warm tokens. Library list of finished meditations. */

.med-list { display: flex; flex-direction: column; gap: 10px; }

.med-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--cream); text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .05s ease;
}
.med-item:active { transform: scale(0.995); }
.med-item:hover { border-color: var(--plum-soft); }

.med-play {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tile-lilac); color: var(--tile-lilac-ink);
}
.med-play svg { width: 16px; height: 16px; margin-left: 2px; }

.med-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.med-name {
  font-family: var(--serif); font-size: 16px; color: var(--plum);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.med-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.med-tag {
  font-size: 11px; color: var(--muted);
  background: rgba(122,74,130,0.08); border-radius: 999px; padding: 1px 8px;
}
.med-when { font-size: 12px; color: var(--muted); }
.med-arr { flex: 0 0 auto; color: var(--muted); font-size: 20px; line-height: 1; }

/* ===== Family Vault (vlt-) — added Jul 10 2026 ===== */
.vlt-controls { display: flex; gap: .6rem; margin: .2rem 0 .6rem; }
.vlt-field { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.vlt-lbl { font-size: .72rem; opacity: .72; font-weight: 600; }
.vlt-select, .vlt-input { width: 100%; padding: .55rem .6rem; border-radius: .6rem; border: 1px solid rgba(0,0,0,.14); background: #fff; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.vlt-input { margin: 0 0 .6rem; }
.vlt-drop { margin-top: .2rem; }
.vlt-note-wrap { margin-top: .75rem; }
.vlt-note-sum { cursor: pointer; font-size: .86rem; opacity: .82; font-weight: 600; }
.vlt-note-wrap .xtr-textarea { margin-top: .5rem; }

/* 🔒 Meditation privacy (C7, Jul 11 2026) — each person's library is their own. */
.med-privacy {
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid var(--line, rgba(0, 0, 0, .1));
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #6b6560);
}

/* ===== Beach & Cenote conditions (bc-) — round 3 rebuild Jul 16 2026 =====
   Nick rejected round 2 ("still subpar - spin up a fable agent to do a
   mockup for you - then you build it"). This implements that mockup
   (design-mockups/beach-cenote-mockup.html) directly: full bento TILE fills
   per spot (not bordered white rows + small badges), a dark-ink hero summary
   up top answering "where do we go" before the list, and big drive-time
   numerals — matching Home/Health's saturated-pastel, big-number idiom.
   Colors are still the app's real named tokens (--tile-sage/butter/blush +
   their -ink/-mut pairs) — nothing new invented, per DESIGN-SPEC's rule. */

.bc-hero {
  background: var(--ink); color: var(--cream); border-radius: var(--radius);
  padding: 20px 20px 18px; margin-top: 12px;
  box-shadow: 0 8px 24px rgba(36,27,38,0.28);
}
.bc-hero-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bc-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--gold);
}
.bc-hero-when { font-size: 11px; font-weight: 600; color: #9b8ba0; white-space: nowrap; }
.bc-hero-line {
  margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-weight: 450;
  font-size: 21px; line-height: 1.3; color: var(--cream-2, #fdf9f1);
}
.bc-hero-line em { font-style: italic; font-weight: 600; color: var(--gold); }
.bc-hero-stats {
  display: flex; align-items: stretch; gap: 16px; margin-top: 16px;
  border-top: 1px solid rgba(246,239,227,0.14); padding-top: 14px;
}
.bc-hs { flex: 1; min-width: 0; }
.bc-hs-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #9b8ba0;
}
.bc-hs-val {
  display: block; font-size: 17px; font-weight: 800; color: var(--cream);
  margin-top: 3px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-hs-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #9b8ba0; margin-top: 3px; }
.bc-hs-div { width: 1px; background: rgba(246,239,227,0.14); flex: 0 0 auto; }

.bc-refresh-row {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  border-top: 1px solid rgba(246,239,227,0.14); padding-top: 12px;
}
.bc-refresh-btn {
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--ink); background: var(--gold); border: none; border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
}
.bc-refresh-btn:hover { filter: brightness(1.06); }
.bc-refresh-btn:disabled { opacity: 0.55; cursor: default; }
.bc-refresh-status { font-size: 11px; font-weight: 600; color: #9b8ba0; }
/* 2026-07-19: replaces the old self-service button/status pair — see extras.js */
.bc-refresh-note { margin: 0; font-size: 11px; font-weight: 600; color: #9b8ba0; }

.bc-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.bc-dot.is-good { background: var(--sage); }
.bc-dot.is-mid { background: var(--gold); }
.bc-dot.is-bad { background: var(--clay); }
.bc-dot.is-none { background: var(--muted); }

.bc-section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 4px 10px; gap: 10px; }
.bc-legend { display: flex; gap: 10px; align-items: center; }
.bc-legend span { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bc-legend .bc-dot { width: 7px; height: 7px; }

/* Jul 16 2026 (Nick: "feels like a lot of wasted space for very few details -
   could be several boxes on one line no?"): was a single-column full-width
   stack — each tile only holds a name, 1-2 badges, a short meta line and a
   footer, so a full 1400px-wide row was mostly empty space. Now a responsive
   grid (auto-fit/minmax, same technique as .dc-exgrid elsewhere in the app):
   1-up on a narrow phone, 2-3up as the view widens — matches DESIGN-SPEC's
   "bento grids widen (3-col)" desktop rule instead of inventing a new pattern. */
/* Jul 16 2026 (Nick: "standardize the element sizes"): was align-items:start,
   so every tile sized to its OWN content — one tile with a longer note/badge
   row stood visibly taller than its row-neighbors, making the grid look
   ragged. Grid's own default (stretch) makes every tile in a row match the
   tallest one instead; combined with the bcChip truncation above (so no
   single tile's content balloons in the first place), rows now read as
   genuinely uniform cards. */
.bc-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 4px; align-items: stretch; }

/* Each spot is a full tile, colored by its own go/no-go signal (beach:
   sargassum level; cenote: live crowd status) — the color range across the
   stack IS the ranking, readable before any text. display:flex + column so
   .bc-foot can pin to the bottom via margin-top:auto once tiles stretch to a
   shared row height, instead of floating mid-card on the shorter tiles. */
.bc-tile { border-radius: var(--radius-sm, 20px); padding: 12px 13px 11px; min-width: 0; display: flex; flex-direction: column; }
.bc-tile.is-good { background: var(--tile-sage); }
.bc-tile.is-mid { background: var(--tile-butter); }
.bc-tile.is-bad { background: var(--tile-blush); }
.bc-tile.is-none { background: var(--card); border: 1px solid var(--line); }

.bc-tile-top { display: flex; align-items: flex-start; gap: 9px; }
.bc-rank {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--card); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; box-shadow: 0 1px 4px rgba(58,43,51,0.10);
}
.bc-main { flex: 1 1 auto; min-width: 0; }
.bc-name {
  margin: 0; font-family: var(--sans); font-size: 14.5px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bc-pill {
  display: inline-flex; align-items: center; gap: 4px; background: var(--card);
  border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(58,43,51,0.08);
}
.bc-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 7px; font-size: 9.5px; font-weight: 600; white-space: nowrap; }

/* big drive-time numeral, docked right — Home's big-stat language */
.bc-drive { flex: 0 0 auto; text-align: right; display: flex; align-items: baseline; gap: 2px; margin-top: 0; }
.bc-drive-num { font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.bc-drive-num.is-sm { font-size: 14px; }
.bc-drive-unit { font-size: 8.5px; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .3px; text-align: left; }

/* Clamped to 2 lines instead of running the full description — the detail is
   still there (nothing was cut from the data), just not forced onto its own
   full-width paragraph when the tile is a compact grid cell. */
.bc-meta {
  margin: 7px 1px 0; font-size: 10.5px; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* margin-top:auto (not a fixed 8px) — now that .bc-tile is a flex column
   stretched to the row's tallest tile, this pins Maps/Photos to the bottom
   of every card instead of floating right under a short meta line with a
   big gap beneath it on shorter-content tiles. */
.bc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; margin-top: auto; padding-top: 7px; }
.bc-src { font-size: 9px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.bc-links { display: flex; gap: 5px; flex: 0 0 auto; }
a.bc-link {
  display: inline-flex; align-items: center; gap: 3px; background: var(--card);
  border-radius: 999px; padding: 4px 9px; font-size: 9.5px; font-weight: 700;
  text-decoration: none; box-shadow: 0 1px 3px rgba(58,43,51,0.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.bc-link:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(58,43,51,0.14); }
a.bc-link:active { transform: scale(0.97); }

/* per-tier text color: everything on a fill uses that family's ink/mut token,
   never gray (DESIGN-SPEC rule) */
.bc-tile.is-good .bc-rank, .bc-tile.is-good .bc-name, .bc-tile.is-good .bc-pill, .bc-tile.is-good .bc-drive-num, .bc-tile.is-good a.bc-link { color: var(--tile-sage-ink); }
.bc-tile.is-good .bc-meta { color: var(--tile-sage-ink); }
.bc-tile.is-good .bc-drive-unit, .bc-tile.is-good .bc-src { color: var(--tile-sage-mut); }
.bc-tile.is-good .bc-chip { background: rgba(63,77,40,0.09); color: var(--tile-sage-ink); }
.bc-tile.is-good .bc-foot { border-top: 1px solid rgba(63,77,40,0.14); }

.bc-tile.is-mid .bc-rank, .bc-tile.is-mid .bc-name, .bc-tile.is-mid .bc-pill, .bc-tile.is-mid .bc-drive-num, .bc-tile.is-mid a.bc-link { color: var(--tile-butter-ink); }
.bc-tile.is-mid .bc-meta { color: var(--tile-butter-ink); }
.bc-tile.is-mid .bc-drive-unit, .bc-tile.is-mid .bc-src { color: var(--tile-butter-mut); }
.bc-tile.is-mid .bc-chip { background: rgba(95,68,7,0.09); color: var(--tile-butter-ink); }
.bc-tile.is-mid .bc-foot { border-top: 1px solid rgba(95,68,7,0.14); }

.bc-tile.is-bad .bc-rank, .bc-tile.is-bad .bc-name, .bc-tile.is-bad .bc-pill, .bc-tile.is-bad .bc-drive-num, .bc-tile.is-bad a.bc-link { color: var(--tile-blush-ink); }
.bc-tile.is-bad .bc-meta { color: var(--tile-blush-ink); }
.bc-tile.is-bad .bc-drive-unit, .bc-tile.is-bad .bc-src { color: var(--tile-blush-mut); }
.bc-tile.is-bad .bc-chip { background: rgba(110,48,24,0.09); color: var(--tile-blush-ink); }
.bc-tile.is-bad .bc-foot { border-top: 1px solid rgba(110,48,24,0.14); }

.bc-tile.is-none .bc-rank { background: var(--chip-bg); color: var(--text); box-shadow: none; }
.bc-tile.is-none .bc-name, .bc-tile.is-none .bc-meta, .bc-tile.is-none .bc-drive-num { color: var(--text); }
.bc-tile.is-none .bc-drive-unit, .bc-tile.is-none .bc-src { color: var(--muted); }
.bc-tile.is-none .bc-pill { background: var(--chip-bg); color: var(--chip-ink); box-shadow: none; }
.bc-tile.is-none .bc-chip { background: var(--chip-bg); color: var(--chip-ink); }
.bc-tile.is-none a.bc-link { color: var(--plum); background: var(--cream); box-shadow: none; border: 1px solid var(--line); }
.bc-tile.is-none .bc-foot { border-top: 1px solid var(--line); }

.bc-fb-note {
  margin: 14px 4px 0; padding: 8px 11px; border-radius: 10px;
  background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--line);
  font-size: 12px;
}

/* Jul 16 2026 (Nick: "we dont want to know about heavy beaches" — deprioritize,
   keep queryable): a plain <details> so it's collapsed by default with zero
   new JS, matching the app's existing disclosure pattern (Family Vault's
   note-wrap uses the same element). */
.bc-collapse { margin: 14px 0 4px; }
.bc-collapse summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 700;
  color: var(--clay); padding: 9px 12px; border-radius: 999px;
  background: rgba(185,96,60,0.08); display: inline-flex; align-items: center; gap: 6px;
}
.bc-collapse summary::-webkit-details-marker { display: none; }
.bc-collapse summary::before { content: "▸"; font-size: 10px; transition: transform .15s ease; }
.bc-collapse[open] summary::before { transform: rotate(90deg); }
.bc-collapse .bc-stack { margin-top: 10px; }

/* ===== Extras sub-nav (added Jul 16 2026) =====
   .extras-segmented reuses the base .segmented/.seg-btn chip-row recipe as-is
   (see css/styles.css "Segmented → chip row, shared To-Do/Finances/Shopping") —
   intentionally no overrides here, so it renders identically to those views. */
#extras-panel-beach-cenote, #extras-panel-vault, #extras-panel-meditation, #extras-panel-transcribe {
  display: block;
}
#extras-panel-beach-cenote[hidden], #extras-panel-vault[hidden],
#extras-panel-meditation[hidden], #extras-panel-transcribe[hidden] { display: none; }

/* ===== Family Vault browse (vlb-) — Jul 17 2026. Reuses app tokens & classes; only
   the few things the base .tile/.xtr-item classes don't cover live here. ===== */
.vlb-tiles{margin-top:4px;}
.vlb-tile{cursor:pointer;text-decoration:none;}
.vlb-row{cursor:pointer;}
.vlb-row .xtr-item-meta{display:inline-flex;gap:6px;align-items:center;}
.vlb-chev{font-size:17px;line-height:1;color:var(--muted);}
.vlb-items{display:flex;flex-direction:column;}
.vlb-item{padding:11px 0;border-bottom:1px solid var(--line);}
.vlb-item:last-child{border-bottom:0;}
.vlb-n{font-weight:700;font-size:14px;color:var(--text);}
.vlb-m{font-family:var(--sans);font-size:12px;color:var(--sage-ink);margin-top:2px;font-weight:600;}
.vlb-note{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
.vlb-loc{font-size:11px;color:var(--plum-soft);margin-top:5px;font-weight:600;}
.vlb-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:6px;margin-left:7px;vertical-align:1px;}
.vlb-badge.in{background:var(--tile-sage);color:var(--sage-ink);}
.vlb-badge.else{background:var(--chip-bg,#efe4d2);color:var(--chip-ink,#7a6a54);}
.vlb-reveal{margin-top:8px;font-size:12px;color:var(--plum);border:1px solid rgba(90,38,96,.28);background:rgba(90,38,96,.06);border-radius:11px;padding:9px 11px;}
.vlb-lockdot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px;}
.vlb-lockdot.g{background:var(--sage);}
.vlb-lockdot.w{background:var(--gold);}
#vlt-browse .vlb-back{display:inline-flex;align-items:center;gap:5px;margin:0 0 14px;cursor:pointer;background:#fff;border:1.5px solid rgba(25,22,33,.16);color:var(--clay);border-radius:999px;padding:8px 15px;font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1;-webkit-appearance:none;appearance:none;box-shadow:none;}
#vlt-browse .vlb-back:active{transform:scale(0.97);}