/*
 * Memula Family History — the one site stylesheet.
 *
 * Merged design system: an Andhra "pasupu–kumkuma" base warmed toward Uma's
 * Telangana palette. Peacock teal is retired in favour of palmyra green.
 * Every colour is a WCAG-AA-verified token below; components never hard-code
 * hexes. Both light and dark themes ship here.
 *
 * Semantic rules:
 *   saffron  = needs attention (pending sync, unlinked, action accents)
 *   leaf     = settled / synced ONLY
 *   maroon   = primary brand (headers, buttons)
 *   palmyra  = calm secondary (avatars, links, relationship groups, motifs)
 *
 * Accessibility notes baked in:
 *   - saffron is a FILL colour; saffron-as-text uses --saffron-ink.
 *   - text on a saffron fill is --maroon-d (never white — fails contrast).
 */

:root {
  --saffron:      #E2861C;  /* fills, rings, pending dot, active toggle bg   */
  --saffron-ink:  #8A4E12;  /* saffron-toned TEXT on cream (AA)              */
  --maroon:       #6B1F2E;  /* primary: headers, buttons, headings          */
  --maroon-d:     #4A1420;  /* gradients, pressed, TEXT on a saffron fill    */
  --palmyra:      #4E7150;  /* avatars, links, connectors (white initials AA)*/
  --palmyra-d:    #3B5A3D;  /* palmyra TEXT / labels / links on cream (AA)   */
  --leaf:         #3E8E5A;  /* synced dot ONLY                              */
  --cream:        #FBF6EA;  /* page background                              */
  --paper:        #FFFDF7;  /* cards, panels                               */
  --sand:         #F3E7CD;  /* chips, avatar placeholder tint              */
  --ink:          #2B1B12;  /* body text                                  */
  --ink-soft:     #6D5C4D;  /* secondary text (AA on cream)               */
  --line:         #E8DCC4;  /* borders, dividers                          */
  --heading:      #6B1F2E;  /* maroon TEXT on light surfaces (adaptive)   */
  --on-brand:     #FBF6EA;  /* FIXED light — text/icons on maroon/saffron */
  --shadow:       rgba(43, 27, 18, .12);

  /* Convenience gradients */
  --grad-maroon:  linear-gradient(135deg, var(--maroon-d), var(--maroon));
  --grad-saffron: linear-gradient(90deg, var(--saffron), #E8B23A);
  --grad-palmyra: linear-gradient(135deg, var(--palmyra), var(--palmyra-d));
}

@media (prefers-color-scheme: dark) {
  :root {
    --saffron:     #E2861C;
    --saffron-ink: #F0A54A;  /* lighter so it reads on dark surfaces        */
    --maroon:      #6B1F2E;
    --maroon-d:    #4A1420;
    --palmyra:     #6E9B70;
    --palmyra-d:   #7BA37D;  /* palmyra TEXT/labels in dark (AA on bg-dark) */
    --leaf:        #5CB27C;
    --cream:       #201216;  /* near-black maroon — evenings, hotel rooms   */
    --paper:       #2A181C;
    --sand:        #3A262C;
    --ink:         #F2E7D8;
    --ink-soft:    #B9A08F;
    --line:        #3A262C;
    --heading:     #EBA9A2;  /* light maroon-rose so headings read on dark */
    /* --on-brand stays fixed light — maroon fills are dark in both modes  */
    --shadow:      rgba(0, 0, 0, .35);
  }
}

/* ---- Self-hosted Telugu (no CDN — works on slow connections in India) ---- */
@font-face {
  font-family: "Noto Sans Telugu";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  /* Drop the woff2 at assets/fonts/ on deploy. Until then the fallback
     stack below (system Telugu faces) renders Telugu correctly anyway. */
  src: url("fonts/NotoSansTelugu-Variable.woff2") format("woff2");
}

/* ============================ base ============================ */
* { box-sizing: border-box; margin: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.telugu, .n-te, .te { font-family: "Noto Sans Telugu", "Telugu Sangam MN", "Nirmala UI", sans-serif; }
a { color: var(--palmyra-d); }

/* The English-over-Telugu name pair IS the brand: 20px semibold / 17px. */
.namepair .en { font-size: 20px; font-weight: 600; color: var(--ink); }
.namepair .te { font-size: 17px; color: var(--ink-soft); }

/* ============================ top bar ============================ */
.topbar {
  background: var(--grad-maroon);
  color: var(--on-brand);
  padding: .7rem 1rem;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  position: relative;
  /* saffron hairline + kolam band read as the "festival thread" up top */
  border-bottom: 3px solid var(--saffron);
}
.topbar a { color: var(--on-brand); text-decoration: none; }
.topbar .brand { font-weight: 700; letter-spacing: .3px; margin-right: auto;
  display: flex; align-items: center; gap: .55rem; }
.topbar .brand small { display: block; font-weight: 400; color: var(--saffron); font-size: .72rem; }
/* palmyra emblem sits before the wordmark */
.topbar .emblem { width: 30px; height: 30px; flex: none; }
/* Primary nav links (Tree / Directory / editor actions), with an active state. */
.topbar a.nav-main {
  padding: .3rem .6rem; border-radius: 8px; min-height: 40px;
  display: inline-flex; align-items: center;
}
.topbar a.nav-main:hover { background: rgba(251, 246, 234, .14); }
.topbar a.nav-main.active { background: rgba(251, 246, 234, .22); font-weight: 700; }
.topbar a.lang, .topbar .lang {
  border: 1px solid rgba(250, 246, 234, .55); border-radius: 999px;
  padding: .25rem .7rem; font-size: .85rem; min-height: 40px;
  display: inline-flex; align-items: center;
}
/* thin kolam dot band hugging the bar's bottom edge */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px;
  background-image: radial-gradient(var(--saffron) 1.3px, transparent 1.4px);
  background-size: 14px 6px; background-position: center; opacity: .5;
}

/* ============================ layout ============================ */
main { padding: 1.1rem; max-width: 44rem; margin: 0 auto; }
h1 { font-size: 1.35rem; color: var(--heading); }
h1 .te { color: var(--ink-soft); font-size: 1rem; font-weight: 400; }
/* Card sub-heading (e.g. the "Connections" list on the edit-person page). */
.subhead { font-size: 1.1rem; color: var(--heading); margin-bottom: .3rem; }

.card, form.card {
  background: var(--paper); border-radius: 14px;
  box-shadow: 0 1px 5px var(--shadow);
  padding: 1.25rem; margin-bottom: 1rem;
  border: 1px solid var(--line);
}

/* ============================ forms ============================ */
label { display: block; font-size: .9rem; color: var(--ink-soft); margin: .8rem 0 .25rem; }
input[type=text], input[type=password], input[type=number], input[type=search],
input[type=email], input[type=url],
textarea, select {
  width: 100%; font-size: 1.1rem; padding: .65rem;
  border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--paper); color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgba(226, 134, 28, .18);
}
textarea { min-height: 5rem; }
.row { display: flex; gap: .75rem; }
.row > div { flex: 1; }
.check { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.check input { width: 1.4rem; height: 1.4rem; }
.hint { color: var(--ink-soft); font-size: .85rem; }

/* ============================ buttons ============================ */
/* ≥48px touch targets — thumbs in a crowded hall, not mice. */
button, .btn {
  width: 100%; font-size: 1.05rem; min-height: 48px; padding: .75rem;
  border: 0; border-radius: 10px; cursor: pointer; margin-top: 1.1rem;
  background: var(--maroon); color: var(--on-brand); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
/* saffron accent action — dark maroon text on saffron (AA), never white. */
button.accent, .btn.accent { background: var(--saffron); color: var(--maroon-d); }
button.secondary {
  background: var(--paper); color: var(--heading);
  border: 1.5px solid var(--line); margin-top: .5rem; font-size: .95rem;
  min-height: 44px; padding: .5rem;
}
button.danger { background: var(--paper); color: #A33; border: 1.5px solid #DAA; margin-top: .6rem; }

/* ============================ banners ============================ */
.banner { border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.banner.ok   { background: #E7F1E3; color: #2A6B2A; border-color: #CADEC0; }
.banner.err  { background: #FBEAEA; color: #A33;    border-color: #EAC9C9; }
.banner.warn { background: #FBF0D8; color: #8A4E12; border-color: #EBD9AE; }

/* ============================ browse grid ============================ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .8rem; }
.grid a.person {
  text-decoration: none; color: inherit; text-align: center;
  background: var(--paper); border-radius: 12px; padding: .5rem;
  box-shadow: 0 1px 4px var(--shadow); border: 1px solid var(--line);
  transition: transform .12s, border-color .12s;
}
.grid a.person:hover { transform: translateY(-3px); border-color: var(--saffron); }
.grid .face, .face-placeholder {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 9px; background: var(--sand); display: block;
}
.face-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700;
  background: var(--grad-palmyra); color: var(--on-brand);
}
.grid .n-en { font-size: .9rem; margin-top: .35rem; font-weight: 600; }
.grid .n-te { font-size: .85rem; color: var(--ink-soft); }

/* ============================ person page ============================ */
.portrait { width: 10rem; max-width: 45%; border-radius: 14px; float: right;
  margin: 0 0 .75rem .75rem; border: 3px solid var(--saffron);
  box-shadow: 0 0 0 3px var(--paper), 0 4px 12px var(--shadow); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .75rem; }
.chips a, .chip2 {
  background: var(--sand); border: 1.5px solid var(--line);
  border-radius: 999px; padding: .4rem .85rem; min-height: 40px;
  display: inline-flex; align-items: center; gap: .3rem;
  text-decoration: none; font-size: .95rem; color: var(--heading);
}
.chips a:hover { border-color: var(--saffron); }
.rel-group h3, .rgroup {
  margin: .8rem 0 .2rem; font-size: .8rem; font-weight: 700;
  color: var(--palmyra-d); text-transform: uppercase; letter-spacing: .06em;
}
/* Editor "edit links" mode: a small ✕ pill next to each relationship chip. */
.chips .chip-edit { display: inline-flex; align-items: center; gap: .25rem; }
.chip-x {
  width: auto; min-height: 34px; margin: 0; padding: .25rem .55rem;
  background: #FBEAEA; color: #A33; border: 1.5px solid #EAC9C9;
  border-radius: 999px; font-size: .95rem; font-weight: 700; line-height: 1;
}
.chip-x:hover { background: #F6D9D9; }

/* ============================ editor management ============================ */
.editor-item { border-bottom: 1px solid var(--line); }
.editor-item:last-of-type { border-bottom: 0; }
.editor-row { padding: .55rem 0; display: flex;
  align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Per-editor "Reset password" — a collapsed disclosure below each row. */
.reset-pw { margin: 0 0 .7rem; }
.reset-pw summary { cursor: pointer; color: var(--saffron-ink); font-size: .9rem; width: max-content; }
.reset-pw form { margin-top: .5rem; max-width: 24rem; }
.reset-pw form .secondary { margin-top: .7rem; }
.pill.admin { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
  background: var(--maroon); color: var(--on-brand); text-transform: uppercase; letter-spacing: .04em; }
code.token { display: block; background: var(--sand); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .6rem; font-size: .85rem; word-break: break-all;
  color: var(--ink); margin: .2rem 0 .4rem; }

/* Directory: editor quick-add chips at the top of the grid (compact, not the
   full-width default button). Saffron = action, dark-maroon text for contrast. */
.dir-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.dir-actions .add-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .9rem; min-height: 44px; border-radius: 10px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  background: var(--saffron); color: var(--maroon-d); border: 1.5px solid transparent;
}
.dir-actions .add-link:hover { filter: brightness(1.03); border-color: var(--maroon-d); }

/* ===================== mini-tree person view (person.php) ===================== */
.fv-head { text-align: center; margin-bottom: .5rem; }
.fv-head h1 .te { font-weight: 400; }
/* Break the mini-tree out of the narrow text column (main is capped at ~44rem)
   so wider families fit before the row has to scroll sideways — otherwise a big
   screen squeezes the tree into the column and clips the spouse. The inner
   .fv-midrow re-centres the content, so it still reads as centred on the focus. */
.minitree { width: 100vw; margin: .5rem 0 0; margin-left: calc(50% - 50vw); }
.fv-parents { display: flex; gap: .5rem; justify-content: center; }
.fv-stem { width: 2px; height: 18px; margin: 0 auto; background: var(--line); }
/* The middle band is ONE horizontal row centred on the focus:
     [ siblings column ] · [ focus, parents floated above ] · [ spouse column ]
   Children hang BELOW it (see .fv-children). The parents float ABOVE the focus
   (see .fv-ancestry) so the spine is one pill wide and the side columns sit snug
   beside it.
   .fv-sibscroll is the scroll viewport; .fv-midrow sizes to its content
   (width:max-content) and centres with margin-inline:auto. When the family is
   too wide the auto margins collapse and the row left-aligns, so it scrolls from
   the START — avoiding the centred-overflow trap that clips both ends. The
   horizontal padding keeps the floated (and wider) parent pills inside the box. */
.fv-sibscroll { overflow-x: auto; }
/* Top-align the columns so the focus, siblings and spouse share a top edge and
   the side columns hang DOWNWARD — never rising into the floated parents' band
   above the focus (which would overlap the father/mother pills). */
.fv-midrow { display: flex; width: max-content; margin-inline: auto; gap: 1rem; align-items: flex-start; }
.fv-midrow.has-parents { padding: 5.5rem 4.5rem 0; }   /* top room for parent pills + stem */
.fv-midrow.no-parents  { padding: 3rem 1.5rem 0; }     /* just the add / empty slots */
/* Siblings and spouse are each a vertical column of pills, centred on the focus.
   Siblings hug the focus from the left; the spouse from the right. */
.fv-side { display: flex; flex-direction: column; gap: .5rem; }
.fv-sibs { align-items: flex-end; }
.fv-spouses { align-items: flex-start; }
.fv-spine { position: relative; display: flex; flex-direction: column; align-items: center; }
/* Parents + stem, floated centred above the focus pill. */
.fv-ancestry { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; }
.fv-children { margin-top: 1.5rem; text-align: center; }
.fv-children h4 { font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--palmyra-d); font-weight: 700; margin: 0 0 .5rem; }
.fv-childrow { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; align-items: center; }
/* A per-marriage child group with its "with <partner>" label (only shown when a
   person has children from more than one marriage). */
.fv-cgroup { margin-bottom: .6rem; }
.fv-cwith { font-size: .74rem; color: var(--palmyra-d); font-weight: 600; margin: .1rem 0 .4rem; }

/* A person PILL — the WRAPPER carries the border/background; INSIDE it sit the
   clickable face+name (which re-centres the tree on that person) and, for editors,
   the ✎ Edit / ✕ Remove controls. One language per pill (chosen by the site
   toggle) keeps them narrow — both scripts stacked made the pill so wide the
   spouse ran off-screen. */
.fv-cardwrap { display: inline-flex; align-items: center; max-width: 16rem;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); }
.fv-cardwrap:hover { border-color: var(--saffron); }
/* The clickable navigation part (face + name). */
.fv-card { display: inline-flex; align-items: center; gap: .5rem; min-width: 0;
  text-decoration: none; padding: .28rem .5rem .28rem .3rem; }
/* The focus person anchors the view — a touch larger and highlighted. */
.fv-focus { border-color: var(--maroon); border-width: 2px; background: var(--sand); }
.fv-focus .fv-face { width: 46px; height: 46px; }
.fv-focus .fv-en { font-size: .95rem; }
.fv-name { text-align: left; line-height: 1.15; min-width: 0; }
.fv-en { display: block; font-size: .85rem; color: var(--heading); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--saffron); box-shadow: 0 0 0 2px var(--paper); flex: none; }
.fv-face-ph { display: inline-flex; align-items: center; justify-content: center;
  background: var(--palmyra); color: var(--on-brand); font-weight: 700; font-size: .9rem; }
/* Deceased: the focus pill's face gets a marigold "garland" ring (a dotted ring
   reads as beads); the smaller relative pills carry a marigold marker dot after
   the name instead (.fv-marker, drawn in fv_card). No greying — a passed
   relative is memorialised, not dimmed. */
.fv-focus.fv-dead .fv-face { border: 3px dotted var(--saffron); }
.fv-marker { flex: none; margin-left: 1px; }

/* "＋ Add" slots and the inline HTMX picker. */
.fv-slot { display: inline-flex; }
.fv-add { min-height: 0; margin: 0; padding: .4rem .85rem; font-size: .85rem; font-weight: 600;
  background: var(--paper); color: var(--saffron-ink); border: 1.5px dashed var(--line); border-radius: 999px; }
.fv-add:hover { border-color: var(--saffron); background: var(--sand); }
.fv-empty { display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--line); border-radius: 999px; color: var(--ink-soft); font-size: .8rem; padding: .4rem .85rem; }
.fv-picker { width: 100%; min-width: 12rem; }
.fv-search { font-size: 1rem; padding: .5rem .6rem; }
.fv-results { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; }
.fv-opt { display: flex; align-items: center; gap: .5rem; width: 100%; justify-content: flex-start;
  text-align: left; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line);
  border-radius: 10px; padding: .35rem .45rem; margin: 0; min-height: 0; font-weight: 500; font-size: .9rem; }
.fv-opt:hover { border-color: var(--saffron); }
.fv-opt .fv-face { width: 30px; height: 30px; font-size: .8rem; box-shadow: none; border-width: 2px; }
.fv-create { color: var(--saffron-ink); font-weight: 700; border-style: dashed; }
.fv-hint { max-width: 10rem; }
/* Editor controls INSIDE the pill, to the right of the name: ✎ Edit (every pill)
   and ✕ Remove (only edges that can be unlinked). Small round tap targets that
   tint on hover, so they read as part of the pill rather than floating badges. */
.fv-edit, .fv-rm { flex: none; width: 26px; height: 26px; min-height: 0;
  margin: 0 .18rem 0 0; padding: 0; border: none; background: transparent;
  border-radius: 50%; cursor: pointer; line-height: 1; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center; }
.fv-edit { color: var(--saffron-ink); text-decoration: none; margin-left: -.1rem; }
.fv-edit:hover { background: var(--sand); }
.fv-rm { color: #A33; }
.fv-rm:hover { background: #FBEAEA; }
@media (max-width: 30rem) {
  /* On phones the row simply scrolls sideways (overflow-x: auto above); trim the
     parent reserve and side padding a touch to save space. */
  .fv-midrow.has-parents { padding: 5.5rem 3rem 0; }
}

/* sync status dots (shared with app semantics) */
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.ok   { background: var(--leaf); }     /* synced   */
.dot.wait { background: var(--saffron); }   /* pending  */

/* ============================ relationship picker ============================ */
.picker { position: relative; }
.picker .options {
  position: absolute; left: 0; right: 0; z-index: 10;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 9px;
  max-height: 14rem; overflow-y: auto; box-shadow: 0 4px 12px var(--shadow);
}
.picker .options div { padding: .6rem .7rem; cursor: pointer; min-height: 44px; }
.picker .options div:hover { background: var(--sand); }
.picker input.picked { background: rgba(78, 113, 80, .16); border-color: var(--palmyra); }
/* "＋ Create …" rows: saffron = "this makes something new". A divider line
   separates them from the existing-people matches above. */
.picker .options .create-row { color: var(--saffron-ink); font-weight: 600; }
.picker .options .create-row.first-create { border-top: 1px solid var(--line); }

/* ============================ square photo crop ============================ */
.crop { margin-top: .8rem; }
.crop-stage {
  position: relative; width: 288px; max-width: 100%;
  margin: .5rem 0; overflow: hidden; border-radius: 12px;
}
#crop_canvas {
  display: block; width: 100%; height: auto;
  background: var(--sand); cursor: grab; touch-action: none; /* don't scroll the page while dragging */
}
#crop_canvas:active { cursor: grabbing; }
/* Circle guide: darken the corners outside an inscribed circle (faces render
   as circles). The outset shadow is clipped to the square by .crop-stage. */
.crop-ring {
  position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(43, 27, 18, .30);
  border: 2px solid rgba(251, 246, 234, .75);
}
#crop_zoom { width: 100%; margin-top: .3rem; }