/* Family documents: the Documents section (timeline, filters, search) and typing your own
   transcription beside a page. Uses the Family History theme (--fh-*) when it's there, and the
   app's own colors otherwise. */

.fh-docs {
  --d-paper: var(--fh-paper, var(--bg, #fff));
  --d-ink: var(--fh-ink, var(--fg, #121214));
  --d-muted: var(--fh-muted, var(--muted, #6e6e76));
  --d-accent: var(--fh-accent, var(--accent, #ffcf24));
  --d-card: var(--fh-card, var(--chip, #f2f2f5));
  --d-serif: var(--fh-serif, Georgia, "Times New Roman", serif);
  --d-line: var(--fh-line, color-mix(in srgb, var(--d-ink) 14%, transparent));
  --d-on-accent: var(--fh-accent-fg, #111);
  color: var(--d-ink);
  font-variant-numeric: lining-nums;   /* "1880s", not old-style figures, in Georgia */
  display: flex; flex-direction: column; gap: 10px;
}

/* adding a document */
.fhd-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fhd-add-btn {
  border: 0; border-radius: 14px; padding: 13px 12px; font-weight: 800; font-size: 15px;
  background: var(--d-accent); color: var(--d-on-accent);
}
.fhd-add-btn.alt { background: var(--d-card); color: var(--d-ink); border: 1px solid var(--d-line); }

/* search + filters */
.fhd-tools { display: flex; flex-direction: column; gap: 8px; }
.fhd-q {
  width: 100%; height: 46px; border-radius: 14px; border: 1.5px solid var(--d-line);
  background: var(--d-card); color: var(--d-ink); padding: 0 14px; font: inherit; font-size: 16px;   /* 16px: no zoom on iPhone */
}
.fhd-q::placeholder { color: var(--d-muted); }
.fhd-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.fhd-kinds::-webkit-scrollbar { display: none; }
.fhd-chip {
  flex: none; border: 0; border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 13.5px;
  background: var(--d-card); color: var(--d-ink); white-space: nowrap; border: 1px solid var(--d-line);
}
.fhd-chip .n { opacity: .72; font-weight: 600; margin-left: 5px; }   /* .55 was 3.6:1 */
.fhd-chip[aria-pressed="true"] { background: var(--d-ink); color: var(--d-paper); border-color: var(--d-ink); }
.fhd-row { display: flex; gap: 8px; }
.fhd-select {
  flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1.5px solid var(--d-line);
  background: var(--d-card); color: var(--d-ink); padding: 0 10px; font: inherit; font-size: 16px;   /* 16px: no zoom on iPhone */
}
.fhd-status { margin: 0 2px; font-size: 13.5px; color: var(--d-muted); }
.fhd-status:empty { display: none; }

/* the timeline */
.fhd-list { display: flex; flex-direction: column; gap: 6px; }
.fhd-group { position: relative; padding-left: 16px; }
.fhd-group::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 0; width: 2px; border-radius: 2px; background: var(--d-line); }
.fhd-decade {
  position: relative; margin: 10px 0 8px; font-family: var(--d-serif); font-size: 21px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.fhd-decade::before { content: ""; position: absolute; left: -16px; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--d-accent); }
.fhd-decade .n { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--d-muted); }
.fhd-group[data-group="all"] { padding-left: 0; }
.fhd-group[data-group="all"]::before { display: none; }
.fhd-cards { display: flex; flex-direction: column; gap: 8px; }

.fhd-card {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; border: 1px solid var(--d-line); border-radius: 16px; padding: 10px;
  background: var(--d-card); color: var(--d-ink); text-align: left; font: inherit;
}
.fhd-thumb { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; background: var(--d-line); }
.fhd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fhd-title { font-family: var(--d-serif); font-size: 16.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.fhd-meta { font-size: 13px; color: var(--d-muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.fhd-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--d-accent) 22%, transparent); color: var(--d-ink); }
.fhd-people { font-size: 13px; color: var(--d-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhd-snip {
  font-size: 13.5px; line-height: 1.4; margin-top: 3px; color: var(--d-ink); overflow-wrap: anywhere;   /* (no .9 opacity: its label fell to 4:1) */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fhd-where { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--d-muted); }
.fh-docs mark { background: color-mix(in srgb, var(--d-accent) 42%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.fhd-empty { text-align: center; padding: 26px 10px 8px; color: var(--d-muted); }
.fhd-empty h3 { font-family: var(--d-serif); color: var(--d-ink); font-size: 21px; margin: 0 0 6px; }
.fhd-empty p { margin: 0 auto 16px; max-width: 420px; line-height: 1.45; }

/* ------------------------------------------------------------------ typing your own words beside a page */
/* who wrote the words beside a page: the family, or the AI helper (always said) */
.rd-typed-tag, .rd-ai-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .75; margin-bottom: 4px; }
.rd-ai-tag::before { content: "✨ "; }
.rd-type-btn {
  border: 1.5px dashed color-mix(in srgb, currentColor 35%, transparent); background: transparent; color: inherit;
  border-radius: 12px; padding: 12px 14px; font: inherit; font-weight: 700; text-align: left; width: 100%;
}
.rd-type-btn small { display: block; font-weight: 500; opacity: .7; margin-top: 2px; }
.rd-edit-btn { border: 0; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; margin-top: 4px; }
.rd-editor { display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, currentColor 7%, transparent); border-radius: 12px; padding: 12px; }
.rd-editor label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; opacity: .9; }
.rd-editor textarea {
  width: 100%; min-height: 140px; resize: vertical; border-radius: 10px; border: 1.5px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.45;
}
.rd-editor textarea.rd-orig-input { font-family: Georgia, "Times New Roman", serif; }
.rd-editor .rd-hint { font-size: 12.5px; opacity: .7; margin: 0; font-weight: 500; }
.rd-editor-actions { display: flex; gap: 8px; }
.rd-editor-actions button { flex: 1; height: 44px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; }
.rd-editor-actions .save { background: var(--fh-accent, var(--accent, #ffcf24)); color: var(--fh-accent-fg, #111); }
.rd-editor-actions .cancel { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }