/* include/style.css — Grafted Trees Genealogy, "Parish Register"
   Loaded by pageHead() in include/header.php.
   Part 1 styles bare elements so every existing table-built page picks
   up the look unchanged. Part 2 is classes for the rewritten header,
   footer and (later) page layouts. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root {
  --gt-bg:      #f5efe3;   /* ivory ground */
  --gt-panel:   #fbf7ee;   /* raised panels, inputs */
  --gt-ink:     #2a2520;
  --gt-muted:   #6b5f52;
  --gt-rule:    #c9b48c;   /* brass hairlines */
  --gt-rule-2:  #e6dcc6;   /* fainter rule for table rows */
  --gt-accent:  #7a2e2e;   /* oxblood: links, primary buttons */
  --gt-accent-2:#9a7b3a;   /* brass: dates, hover */
  --gt-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --gt-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --gt-radius:  0px;
  --gt-max:     1200px;
}

/* ---------- Part 1: elements ---------- */

html { background: var(--gt-bg); }
body {
  margin: 0 auto;
  max-width: var(--gt-max);
  padding: 0 24px 40px;
  background: var(--gt-bg);
  color: var(--gt-ink);
  font-family: var(--gt-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* pages that used to set these via attributes */
body[bgcolor] { background: var(--gt-bg) !important; }

h1, h2, h3, h4 {
  font-family: var(--gt-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--gt-ink);
  margin: 1.2em 0 0.4em;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
big { font-family: var(--gt-display); font-size: 1.4rem; font-weight: 600; }
small { font-size: 0.85rem; color: var(--gt-muted); }

a { color: var(--gt-accent); text-decoration: none; }
a:hover { color: var(--gt-accent-2); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--gt-rule); margin: 18px 0; }

/* Legacy tables. border=1 tables become ruled registers; border=0
   layout tables stay invisible but get sane cell padding. */
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 4px 8px; font-size: inherit; }   /* no vertical-align: valign= attrs must keep working (pedigree chart) */
th { vertical-align: top; }
th { font-family: var(--gt-body); font-weight: 600; text-align: start; color: var(--gt-muted);
     font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
table[border="1"] { border: 1px solid var(--gt-rule); background: var(--gt-panel); }
table[border="1"] td, table[border="1"] th { border-top: 1px solid var(--gt-rule-2); }
table[border="1"] tr:first-child td, table[border="1"] tr:first-child th { border-top: 0; }
table[frame="box"] { border: 1px solid var(--gt-rule); background: var(--gt-panel); }
table[bgcolor] { background: var(--gt-panel) !important; }
font[color="white"] { color: var(--gt-ink) !important; }

/* Form controls */
button, input[type="submit"], input[type="button"], .login {
  font-family: var(--gt-body);
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--gt-accent);
  border-radius: var(--gt-radius);
  background: transparent;
  color: var(--gt-accent);
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
button:hover, input[type="submit"]:hover, .login:hover {
  background: var(--gt-accent); color: #fff;
}
/* Sign in with Apple is Apple's own <img>, not a <button>; scale it to the login
   buttons' rendered height (36px) so the sign-in controls line up. The height
   attribute on the <img> is required to escape `img:not([height]){height:auto}`
   (specificity 0,1,1, which would otherwise beat this rule). width:auto keeps
   the 140x30 PNG's aspect ratio (-> 168x36). */
.gt-apple-btn { height: 36px; width: auto; vertical-align: middle; cursor: pointer; }
a:hover button { text-decoration: none; }
.gt-primary, button.gt-primary { background: var(--gt-accent); color: #fff; }
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  font-family: var(--gt-body);
  font-size: 0.95rem;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--gt-rule);
  border-radius: var(--gt-radius);
  background: var(--gt-panel);
  color: var(--gt-ink);
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gt-accent-2); outline-offset: 1px; }
label { font-size: 0.8rem; color: var(--gt-muted); }

img { max-width: 100%; }
img:not([height]) { height: auto; }      /* keep explicit height= on spacer/line images */
center { display: block; }

/* ---------- Part 2: header / footer ---------- */

.gt-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo brand   search"
    "logo account account";
  align-items: center;
  column-gap: 24px;
  row-gap: 6px;
  padding: 8px 0 10px;
  border-bottom: 2px solid var(--gt-rule);
  margin-bottom: 8px;
}
/* The logo spans both header rows on the left and drives the header's height;
   the brand + search sit on the top row, the account buttons on the second row. */
.gt-logo-link { grid-area: logo; align-self: stretch; display: flex; align-items: center; }
/* .gt-header scope so these beat the global img:not([height]){height:auto} rule. */
.gt-header .gt-logo { height: 100%; width: auto; display: block; }
.gt-brand {
  grid-area: brand;
  align-self: end;
  font-family: var(--gt-display);
  font-variant: small-caps;        /* caps-only: no descenders, genteel register */
  /* Fluid: hold 1.95rem while it fits, then scale down to a 1.4rem floor instead of
     wrapping across the old ~720-845px band. Drops to two lines only below the floor
     (true phone width). small-caps read a touch smaller, hence the 1.95rem ceiling. */
  font-size: clamp(1.4rem, 7vw - 1.8rem, 1.95rem);
  font-weight: 700;
  color: var(--gt-ink);
  letter-spacing: 0.02em;
  line-height: 1.05;
  /* wrap only when the line won't fit — no forced break, no nowrap */
}
.gt-brand:hover { text-decoration: none; color: var(--gt-accent); }
.gt-brand span { font-weight: 500; color: var(--gt-muted); }   /* inline: "Genealogy" wraps only if needed */

.gt-search { grid-area: search; justify-self: end; align-self: center;
             display: flex; align-items: center; gap: 8px; margin: 0; }
.gt-search input[type="text"] { width: 140px; padding: 3px 7px; }
.gt-search input::placeholder { color: var(--gt-muted); opacity: 0.75; }

.gt-account { grid-area: account; align-self: start; justify-self: start;
              display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
/* Identity chip: fixed-geometry initials avatar (never in the menu). Hover (desktop)
   or tap (mobile; .gt-id-show toggled by a small script in header.php) reveals the
   full name + access level. */
.gt-id { position: relative; box-sizing: border-box; width: 36px; height: 36px; flex: 0 0 auto;
         display: inline-flex; align-items: center; justify-content: center;
         font-family: var(--gt-body); font-weight: 700; font-size: 0.8rem; line-height: 1;
         color: var(--gt-accent); background: transparent;
         border: 1.5px solid var(--gt-accent); border-radius: 50%;
         cursor: default; -webkit-user-select: none; user-select: none; }
.gt-id-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
             min-width: 150px; max-width: 260px; padding: 8px 10px; text-align: end; line-height: 1.25;
             background: var(--gt-panel); border: 1px solid var(--gt-rule); border-radius: var(--gt-radius);
             box-shadow: 0 6px 18px rgba(40,30,15,0.18); overflow-wrap: anywhere;
             opacity: 0; visibility: hidden; transform: translateY(-2px);
             transition: opacity 0.12s ease, transform 0.12s ease; }
.gt-id-pop b { color: var(--gt-ink); }
.gt-id-pop small { display: block; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.65rem; color: var(--gt-muted); }
.gt-id:hover .gt-id-pop, .gt-id:focus .gt-id-pop, .gt-id:focus-within .gt-id-pop, .gt-id.gt-id-show .gt-id-pop {
  opacity: 1; visibility: visible; transform: translateY(0); }
.gt-account form { margin: 0; display: inline; }
.gt-langpick { cursor: pointer; white-space: nowrap; font-size: 0.85rem; padding: 1px 6px; }
.gt-footer-lang { margin-inline-start: auto; }
/* Logged-out sign-in wrapper: transparent on desktop so the buttons flow inline. */
.gt-login { display: contents; }
/* Desktop: the identity chip sits at the RIGHT end of the account bar. The menu
   items flow as flex children of .gt-account (display:contents), so a high order
   pushes the chip past the default-order buttons. */
@media (min-width: 1025px) { .gt-id { order: 99; } }

/* Collapsible account menu (hamburger). Desktop: the toggle + label are hidden and
   the items flow in .gt-account as usual. Narrow screens (<=900px): the items drop
   into a panel behind a ☰ button, which also cures the button-row wrapping. */
.gt-menu-toggle, .gt-menu-btn { display: none; }
.gt-menu-items { display: contents; }
@media (max-width: 1024px) {
  /* Mobile layout: collapse the account buttons behind a ☰ menu BEFORE the row
     would start wrapping. Re-lay the header so the ☰ sits on the top row (above
     the search), mirror-image of a phone's top bar. The ☰ and the Search button
     share the same box (see below), so they stack right-aligned, ☰ over Search. */
  .gt-header { grid-template-areas:
      "logo brand  account"
      "logo search search"; }
  .gt-account { position: relative; justify-self: end; align-self: center; justify-content: flex-end; }
  /* Menu + Search buttons: identical box so they stack aligned on the right edge. */
  .gt-menu-btn, .gt-search button { box-sizing: border-box; min-width: 104px; white-space: nowrap; height: 38px; padding: 0 14px;
                 font-family: var(--gt-body); font-weight: 600; font-size: 0.9rem; line-height: 1;
                 color: var(--gt-accent); background: transparent;
                 border: 1.5px solid var(--gt-accent); border-radius: var(--gt-radius); }
  .gt-menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; cursor: pointer; }
  .gt-search button { flex: 0 0 auto; }   /* hold the width inside the flex search form */
  .gt-menu-items { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
                   flex-direction: column; align-items: stretch; gap: 8px;
                   /* narrow the pulldown to the Sign in with Apple button: 168px img +
                      10px padding + 1px border each side = 190px (border-box) */
                   box-sizing: border-box; width: 190px;
                   padding: 10px; background: var(--gt-panel); border: 1px solid var(--gt-rule);
                   box-shadow: 0 6px 18px rgba(40,30,15,0.18); }
  .gt-menu-toggle:checked ~ .gt-menu-items { display: flex; }
  .gt-id { width: 38px; height: 38px; }   /* match the Menu/Search button height; sits left of Menu */
  /* Logged out: float the sign-in options to the top of the menu, stacked full-width. */
  .gt-menu-items .gt-login { display: flex; flex-direction: column; gap: 8px; order: -1; }
  .gt-menu-items .gt-login > a, .gt-menu-items .gt-login > button,
  .gt-menu-items .gt-login > input, .gt-menu-items .gt-login > div { width: 100%; }
  .gt-menu-items form { display: block; }
  .gt-menu-items > a, .gt-menu-items button, .gt-menu-items input[type="submit"], .gt-menu-items select { width: 100%; }
}
.gt-notice { margin: 0 0 12px; padding: 8px 12px; text-align: center; background: var(--gt-panel);
             border: 1px solid var(--gt-rule); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }

.gt-footer {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--gt-rule);
  font-size: 0.8rem;
  color: var(--gt-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  body { padding: 0 14px 32px; font-size: 15px; }
  h1 { font-size: 2rem; }
  /* Phones: keep the grid (so nothing wraps loosely) but re-lay it as
     [logo | title | ☰] on top and a full-width search below. The logo sits on
     the top row only (spanning both rows would blow it up to its full width). */
  /* Phones: logo + title on the top row, ☰ at the right, search full-width below.
     "Grafted Trees™" is one non-breaking unit (see header markup), so the title
     holds its size and only drops "Genealogy" onto a second line when the row
     can't hold it all — it never breaks mid-name. */
  .gt-header { grid-template-areas:
      "logo brand  account"
      "search search search";
    column-gap: 12px; row-gap: 8px; padding-top: 12px; align-items: center; }
  .gt-logo-link { align-self: center; }
  .gt-header .gt-logo { height: clamp(46px, 9vw, 72px); width: auto; max-width: none; }   /* fluid: eases ~72->46px instead of snapping to 42, softening the jump from the ~95px two-row logo just above the breakpoint */
  /* min-width:0 lets the title column shrink so "Genealogy" wraps instead of overflowing. */
  .gt-brand { align-self: center; min-width: 0; }   /* size handled by the fluid clamp above */
  .gt-menu-btn, .gt-search button { min-width: 76px; }
  .gt-account { justify-self: end; align-self: center; }
  .gt-search { justify-self: end; }   /* locked to the right, Search sits under the Menu button */
  .gt-search input[type="text"] { width: 130px; flex: 0 0 auto; min-width: 0; }   /* fixed; stays put as the window resizes */
  /* legacy tables get horizontal scroll instead of squashing */
  table[border="1"], table[frame="box"] { display: block; max-width: 100%; overflow-x: auto; }
  /* Home page's two-column layout table: stack it so the content isn't crushed
     (the 2nd cell is the 120px ad column, blank when logged out). */
  .gt-home-layout, .gt-home-layout > tbody, .gt-home-layout > tbody > tr { display: block; width: auto; }
  .gt-home-layout > tbody > tr > td { display: block; width: auto; }
}

/* ---------- Person page ---------- */
.gt-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; }
.gt-favform { margin: 0; }

.gt-person-head {
  display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  padding: 20px 0 16px; border-bottom: 1px solid var(--gt-rule); margin-bottom: 16px;
}
.gt-portrait { margin: 0; flex: 0 0 auto; text-align: center; font-size: 0.75rem; color: var(--gt-muted); }
.gt-portrait img { max-width: 120px; border: 1px solid var(--gt-rule); background: var(--gt-panel); padding: 3px; }
.gt-person-title { flex: 1 1 320px; min-width: 0; }
.gt-name { margin: 0; font-size: 2.8rem; }
.gt-daterange { margin-top: 4px; font-size: 1.05rem; color: var(--gt-muted); }
.gt-name-courtesy { margin-top: 2px; font-size: 1.05rem; color: var(--gt-muted); }
.gt-name-courtesy .gt-courtesy-label { font-weight: 600; margin-inline-end: 3px; }
.gt-burial-detail { margin-inline-start: 1.6em; font-size: 0.9em; color: var(--gt-muted); }
.gt-person-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-inline-start: auto; }
.gt-viewchooser form { margin: 0; font-size: 0.85rem; color: var(--gt-muted); }
.gt-viewchooser select { max-width: 220px; }

.gt-person-meta { line-height: 1.6; }
.gt-person-meta:empty { display: none; }

.gt-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px;
  padding: 16px 20px; margin: 16px 0 24px;
  background: var(--gt-panel); border: 1px solid var(--gt-rule);
}
.gt-fact-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-muted); font-weight: 600; }
.gt-fact-value { font-size: 1.05rem; margin-top: 2px; }
.gt-fact-place { font-size: 0.85rem; color: var(--gt-muted); margin-top: 2px; }

.gt-events h2 { margin-top: 0; }
.gt-event {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--gt-rule-2);
}
.gt-year { font-weight: 600; color: var(--gt-accent-2); font-variant-numeric: tabular-nums; }
.gt-event-type { font-weight: 600; }
.gt-event-body table { margin-top: 4px; }
.gt-event-body th { font-size: 0.7rem; }

@media (max-width: 720px) {
  .gt-name { font-size: 2rem; }
  .gt-person-tools { align-items: flex-start; margin-inline-start: 0; width: 100%; }
  .gt-event { grid-template-columns: 52px 1fr; }
}

/* Person page: two columns, family sidebar */
.gt-person-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.gt-person-side { padding: 18px 20px; background: var(--gt-panel); border: 1px solid var(--gt-rule); position: sticky; top: 16px; }
.gt-person-side h2 { font-size: 1.25rem; margin: 14px 0 4px; }
.gt-person-side h2:first-child { margin-top: 0; }
.gt-person-side h3 { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-muted); margin: 8px 0 2px; font-family: var(--gt-body); }
.gt-side-list { list-style: none; margin: 0; padding: 0; }
.gt-side-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--gt-rule-2); }
.gt-side-list li:last-child { border-bottom: 0; }
.gt-side-dates { font-size: 0.8rem; color: var(--gt-muted); white-space: nowrap; }
@media (max-width: 900px) {
  .gt-person-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gt-person-side { position: static; order: -1; }   /* family first on phones, like the mockup */
  /* Let the single column shrink below its content's natural width so long place
     names wrap instead of forcing the whole page to scroll horizontally. */
  .gt-person-main, .gt-person-side, .gt-facts, .gt-event, .gt-event > * { min-width: 0; }
  .gt-event-body { overflow-wrap: anywhere; }
}

/* Person page: lower sections */
.gt-links { list-style: none; margin: 8px 0 16px; padding: 0; font-size: 0.95rem; }
.gt-links li { padding: 3px 0; }
.gt-link-label { display: inline-block; min-width: 68px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-muted); font-weight: 600; }

.gt-sources, .gt-stats, .gt-comments { margin-top: 28px; }
.gt-sources h2, .gt-stats h2, .gt-comments h2 { margin-top: 0; }
.gt-thumbs { display: flex; flex-wrap: wrap; gap: 16px; }
.gt-thumb { margin: 0; max-width: 200px; font-size: 0.8rem; color: var(--gt-muted); text-align: center; }
.gt-thumb img { display: block; border: 1px solid var(--gt-rule); background: var(--gt-panel); padding: 3px; margin: 0 auto 4px; }
.gt-notes { margin-top: 16px; padding: 14px 18px; background: var(--gt-panel); border: 1px solid var(--gt-rule); white-space: pre-wrap; font-size: 0.95rem; line-height: 1.5; }

.gt-stats p { margin: 6px 0; }
.gt-stats h3 { margin: 16px 0 4px; }
.gt-gens { margin: 6px 0 12px; font-size: 0.85rem; }
.gt-gens th, .gt-gens td { text-align: center; padding: 3px 8px; }
.gt-rels { margin: 0 0 8px; padding-inline-start: 20px; }

.gt-comment-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.gt-comment-form input[type="text"] { flex: 1 1 320px; }
.gt-comment-list { list-style: none; margin: 0; padding: 0; }
.gt-comment { padding: 10px 0; border-top: 1px solid var(--gt-rule-2); }
.gt-comment-head { display: flex; align-items: center; gap: 10px; }
.gt-comment-date { font-size: 0.8rem; color: var(--gt-muted); }
.gt-comment-del { margin-inline-start: auto; }
.gt-comment-del input[type="submit"] { min-height: 28px; font-size: 0.75rem; padding: 0 8px; }
.gt-comment-body { margin-top: 4px; font-style: italic; }
.gt-updated { margin-top: 24px; font-size: 0.8rem; color: var(--gt-muted); }
.gt-person-side h2 .gt-side-note { font-family: var(--gt-body); font-size: 0.8rem; font-weight: 400; color: var(--gt-muted); margin-inline-start: 8px; white-space: nowrap; }

/* Search page */
.gt-search-page { margin-top: 16px; }
.gt-search-form { margin-bottom: 24px; }
.gt-count { margin: 0 0 12px; color: var(--gt-muted); }
.gt-muted { color: var(--gt-muted); }
.gt-results { width: 100%; background: var(--gt-panel); border: 1px solid var(--gt-rule); }
.gt-results th { border-bottom: 1px solid var(--gt-rule); padding: 8px 10px; text-align: start; }
.gt-results td { padding: 7px 10px; border-top: 1px solid var(--gt-rule-2); }
.gt-results tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
@media (max-width: 900px) {
  .gt-results { display: block; overflow-x: auto; }
}

/* Advanced search form (front page + search page) */
.gt-searchform { margin: 0 0 8px; padding: 18px 20px; background: var(--gt-panel); border: 1px solid var(--gt-rule); }
.gt-sf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; align-items: start; }
.gt-sf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-sf-field > label, .gt-sf-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gt-muted); font-weight: 600; }
.gt-sf-field > label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.gt-sf-field input[type="text"], .gt-sf-field select { width: 100%; box-sizing: border-box; }
.gt-sf-range { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.gt-sf-range input { width: 100%; }
.gt-sf-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--gt-ink); font-weight: 400; margin-top: 4px; }
.gt-sf-wide { grid-column: 1 / -1; }
.gt-sf-wide .gt-sf-inline { margin-inline-end: 18px; }
.gt-sf-actions { margin-top: 16px; }

/* Reflow by viewport too, not only by container width (the home-page form
   sits in a wide layout-table cell where auto-fit alone won't collapse). */
@media (max-width: 760px) { .gt-sf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .gt-sf-grid { grid-template-columns: 1fr; } }

/* Image viewer */
.gt-image-page { margin-top: 16px; }
.gt-image-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: 0.9rem; }
.gt-image { margin: 0; text-align: center; }
.gt-image img { display: inline-block; max-width: 100%; border: 1px solid var(--gt-rule); background: var(--gt-panel); padding: 4px; }
.gt-image figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--gt-muted); }
.gt-image-gate { max-width: 560px; margin: 32px auto; padding: 24px 28px; background: var(--gt-panel); border: 1px solid var(--gt-rule); text-align: center; }
.gt-image-gate h2 { margin-top: 0; }

/* Admin tabs + invites */
.gt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gt-rule); margin: 16px 0 24px; }
.gt-tabs a {
  padding: 7px 18px;
  white-space: nowrap;
  font-family: var(--gt-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--gt-muted);
  background: var(--gt-bg);
  border: 1px solid var(--gt-rule);
  border-bottom: none;
  margin-bottom: -1px;            /* overlap the strip's 1px rule */
}
.gt-tabs a:hover { color: var(--gt-accent); background: var(--gt-panel); }
.gt-tabs a.gt-tab-on {
  color: #fff;
  background: var(--gt-accent);
  border-color: var(--gt-accent);
}
/* Phones: tighten the tab strip and let it wrap so the last tab (e.g. Recent)
   doesn't run off the right edge. */
@media (max-width: 720px) {
  .gt-tabs { flex-wrap: wrap; gap: 3px; }
  .gt-tabs a { padding: 7px 12px; font-size: 0.9rem; }
}
.gt-invites code { font-size: 0.9em; }
.gt-invites .gt-inv-off td { color: var(--gt-muted); background: rgba(0,0,0,0.03); }
.gt-copy { min-height: 30px; font-size: 0.8rem; padding: 0 10px; }
.gt-invite-new { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px; padding: 16px 18px; background: var(--gt-panel); border: 1px solid var(--gt-rule); }
.gt-invite-new label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--gt-muted); }
.gt-invite-new input[type="text"], .gt-invite-new select { min-height: 34px; }

/* Home page: full-width search above the browse/recent columns */
.gt-home-search { width: 100%; margin-bottom: 20px; clear: both; }
.gt-treepick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gt-treepick label { display: flex; align-items: center; gap: 6px; margin: 0; }
.gt-treepick select { max-width: 22em; }

/* Home page tabs */
.gt-home-panel { padding: 4px 0 8px; }
.gt-home-panel h2 { margin: 20px 0 6px; }
.gt-home-panel h2:first-child { margin-top: 4px; }
.gt-home-panel h3 { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gt-muted); margin: 14px 0 4px; font-family: var(--gt-body); }
.gt-home-panel .gt-side-list { max-width: 640px; }
.gt-home-panel .gt-side-list li { display: block; }

/* SVG ancestor tree */
.gt-svgtree { max-width: 100%; border: 1px solid var(--gt-rule); background: var(--gt-bg); padding: 8px; }
.gt-svgtree svg { display: block; max-width: none; }
.gt-svgtree-ctl { font-size: 0.9rem; color: var(--gt-muted); }
.gt-svgtree-ctl select { min-height: 32px; }

/* "All trees" (browse, ?part=alltrees) listing: responsive columns — up to 3,
   dropping to 2 then 1 as the window narrows. minmax(0,1fr) + overflow-wrap let
   cells shrink and wrap, so the grid never forces a horizontal scroll. */
.gt-tree-group { margin: 18px 0 6px; }
.gt-tree-grid  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                 gap: 6px 24px; margin-bottom: 10px; }
.gt-tree-cell  { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.gt-tree-place { color: var(--gt-muted); font-size: 0.85em; }
@media (max-width: 760px) { .gt-tree-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gt-tree-grid { grid-template-columns: 1fr; } }

/* Help & Guide page (HowTo.php): a readable measure + a muted "draft" marker. */
.gt-help       { max-width: 760px; margin: 0 auto; line-height: 1.5; }
.gt-help h2    { margin-top: 1.4em; }
.gt-help-draft { color: var(--gt-muted); font-weight: normal; font-size: 0.62em;
                 letter-spacing: 0.04em; text-transform: uppercase; }

/* Names carry a phonetic reading in a hover tooltip (title=): kana for Japanese,
   pinyin for Chinese, a hanja override for Korean. Cue it subtly, without crowding
   headings, and only when a reading is actually present (the span is emitted only then). */
.gt-reading { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--gt-muted); text-underline-offset: 3px; }
.gt-reading:hover { text-decoration-color: var(--gt-accent); }