/* public/styles/tree.css — owned by views/tree.js (Main Tree Page, SPEC §5.2).
   Every selector is scoped under .tree-page so nothing leaks into the Details / Facts / Notes sections. */

/* ---------- sticky section tabs ---------- */
.tree-page .tree-tabs-wrap {
  position: sticky; top: var(--nav-h); z-index: 20;
  background: var(--bg); padding: 8px 0 6px; margin-bottom: 6px;
}
.tree-page .tree-tabs { max-width: 100%; }

/* ---------- "please check" panel (migration flags) ---------- */
.tree-page .tree-review {
  background: var(--warn-soft); border: 1px solid transparent; border-left: 4px solid var(--warn);
  border-radius: var(--radius); padding: 8px 12px 10px; margin: 4px 0 14px; color: var(--ink);
}
.tree-page .tree-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tree-page .tree-review-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--warn); font-size: 0.92rem; }
.tree-page .tree-review-list { margin: 4px 0 0; padding-left: 20px; font-size: 0.9rem; }
.tree-page .tree-review-list li { margin: 2px 0; }

/* ---------- top area: photo band + main column ---------- */
.tree-page .tree-top { display: flex; flex-direction: column; gap: 18px; }
.tree-page .tree-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* photo band: a grid of square tiles; auto-fit lets 1–4 tiles share the row on a phone */
.tree-page .tree-band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; align-items: start; }
.tree-page .tree-band-tile .photo-tile-label { font-weight: 500; }
.tree-page .tree-band-tile.is-inspiration .badge { background: var(--accent); font-size: 0.66rem; }
.tree-page .tree-band-tile.is-empty .photo-tile { border-style: dashed; }
.tree-page .tree-band-count { grid-column: 1 / -1; text-align: center; }

/* ---------- header ---------- */
.tree-page .tree-header { display: flex; flex-direction: column; gap: 6px; }
.tree-page .tree-title { font-size: 2rem; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.tree-page .tree-title .field { border-bottom-color: transparent; }
.tree-page .tree-title .field:hover { border-bottom-color: var(--accent); }
.tree-page .tree-title .field-input { font-family: var(--font-serif); font-weight: 600; min-width: 6ch; }
.tree-page .tree-nick { font-weight: 400; color: var(--muted); }
.tree-page .tree-nick .field-empty { font-size: 0.6em; vertical-align: middle; }
.tree-page .tree-dead-chip { align-self: center; font-size: 0.8rem; gap: 4px; }
.tree-page .tree-sci-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tree-page .tree-sci { font-size: 1.05rem; color: var(--muted); }
.tree-page .tree-sci-chip { min-height: 32px; gap: 4px; }
.tree-page .tree-sci-chip.is-guess { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); }
.tree-page .tree-age { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 0.95rem; }
.tree-page .tree-age-value { color: var(--ink); font-weight: 600; }

/* ---------- action row ---------- */
.tree-page .tree-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- labelled fields ---------- */
.tree-page .tree-fields { display: flex; flex-direction: column; gap: 2px; }
.tree-page .tree-labeled { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.tree-page .tree-labeled:last-child { border-bottom: 0; }
.tree-page .tree-labeled > .labeled-key { min-width: 9.5rem; }
.tree-page .tree-source-story { flex: 1 1 12rem; }
.tree-page .tree-source-type { flex: 1 1 100%; padding: 4px 0 2px; }
.tree-page .tree-select { width: auto; min-width: 13rem; }

/* ---------- alive / dead ---------- */
.tree-page .tree-alive { display: flex; flex-direction: column; gap: 8px; }
.tree-page .tree-death { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px 10px; }
.tree-page .tree-death .tree-labeled { border-bottom: 0; }
.tree-page .tree-death-desc { margin-top: 4px; font-size: 0.95rem; }

/* ---------- radios + health ---------- */
.tree-page .tree-radios { display: flex; flex-direction: column; gap: 12px; }
.tree-page .tree-radio-block { display: flex; flex-direction: column; gap: 6px; }
.tree-page .tree-health-log { min-height: 32px; }

/* ---------- current status ---------- */
.tree-page .tree-summary { display: flex; flex-direction: column; gap: 6px; }
.tree-page .tree-summary-field { line-height: 1.5; padding: 6px 8px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.tree-page .tree-summary-field:hover { border-color: var(--accent); background: var(--surface); }
.tree-page .tree-summary .field-textarea { min-height: 96px; }
.tree-page .tree-updated { text-align: right; }

/* ---------- add-photo modal ---------- */
.tree-upload .modal-body { display: flex; flex-direction: column; gap: 14px; }
.tree-upload .tree-upload-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tree-upload .tree-upload-previews { display: flex; flex-wrap: wrap; gap: 6px; }
.tree-upload .tree-upload-preview { position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--cell-nophoto); border: 1px solid var(--line); }
.tree-upload .tree-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.tree-upload .tree-upload-preview.is-done img { opacity: 0.45; }
.tree-upload .tree-upload-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.tree-upload .tree-upload-progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tree-upload .tree-upload-progress span { display: block; height: 100%; background: var(--accent); transition: width 0.2s ease; }

/* ---------- responsive ---------- */
/* Touch devices: radio chips grow to the 40px target (SPEC §6). */
@media (hover: none) and (pointer: coarse) {
  .tree-page .radio-group .chip-radio, .tree-page .tree-sci-chip, .tree-page .tree-health-log { min-height: 40px; }
}

/* Tablet: still stacked, but tiles stop stretching. */
@media (min-width: 641px) and (max-width: 900px) {
  .tree-page .tree-band-grid { grid-template-columns: repeat(auto-fill, 150px); }
}

/* Desktop: photo band on the left (poster big, first/latest under it), fields on the right. */
@media (min-width: 901px) {
  .tree-page .tree-top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
  .tree-page .tree-band { position: sticky; top: calc(var(--nav-h) + 62px); }
  .tree-page .tree-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree-page .tree-band-tile.is-poster { grid-column: 1 / -1; }
  .tree-page .tree-title { font-size: 2.3rem; }
  .tree-page .tree-source-type { flex: 1 1 auto; padding: 0; }
}

/* Phone: tighter spacing, full-width status box, buttons wrap two per row. */
@media (max-width: 640px) {
  .tree-page .tree-tabs-wrap { margin: 0 -12px 6px; padding: 8px 12px 6px; }
  .tree-page .tree-title { font-size: 1.7rem; }
  .tree-page .tree-labeled > .labeled-key { min-width: 0; }
  .tree-page .tree-actions .btn { flex: 1 1 calc(50% - 8px); }
}