/* ---------------------------------------------------------------------------
   Family Tree — classical parchment theme.
   Colours live as custom properties so the admin Settings page can override
   the accent and paper tones without touching this file.
--------------------------------------------------------------------------- */

:root {
  --paper:       #f7f1e3;
  --paper-deep:  #efe5d0;
  --paper-edge:  #e3d6ba;
  --ink:         #2e2a24;
  --ink-soft:    #6b6153;
  --gold:        #b8860b;
  --gold-soft:   #d9bd77;
  --maroon:      #7b2d26;
  --male:        #4a90e2;
  --female:      #c2588a;
  --unknown:     #9a8f7d;
  --ok:          #3f7d54;
  --warn:        #b3521c;
  --shadow:      0 1px 2px rgba(46,42,36,.08), 0 8px 24px rgba(46,42,36,.06);
  --radius:      3px;
  --serif:       "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --body:        "Lora", Georgia, "Times New Roman", serif;
  --urdu:        "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(184,134,11,.06), transparent 40%);
  background-attachment: fixed;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.35rem; }

a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold); }

.urdu { font-family: var(--urdu); direction: rtl; font-size: 1.15em; line-height: 2.2; }

/* A story written about the family may quote Urdu inside an English paragraph.
   The Nastaliq face sits at the END of the stack, so Latin letters still come
   from the serif and only the Arabic letters fall through to it; `plaintext`
   lets each quotation take its direction from its own first strong character.
   Nothing has to be marked up by whoever is writing. */
blockquote {
  font-family: var(--serif), var(--urdu);
  unicode-bidi: plaintext; text-align: start; line-height: 1.95;
}

/* ---- plates: a document set into a chapter -----------------------------
   Small and floated, so the prose runs round it the way a plate sits in a
   printed book. They alternate side to side down the page. A document at this
   size is a picture of a document rather than a readable one, which is why the
   whole thing is a link: click it and the file opens full size. */
figure.story-plate, figure.plate {
  /* Width follows the picture rather than being fixed, and the HEIGHT is what
     is actually capped. Most of these are portrait-format scans: fix the width
     and a tall one becomes a float deeper than the paragraph beside it, which
     squeezes the next paragraph's first line into a gutter two words wide.
     Capping the height keeps every float about the depth of one paragraph. */
  float: right; width: auto; max-width: 46%;
  margin: 4px 0 16px 28px; padding: 0; text-align: center;
}
figure.story-plate:nth-of-type(even) {
  float: left; margin: 4px 28px 16px 0;
}
figure.story-plate.wide, figure.plate.wide { float: none; width: auto; max-width: 100%; margin: 26px auto; }
figure.story-plate.wide img, figure.plate.wide img { max-height: 70vh; }
figure.story-plate a, figure.plate a { display: block; border: 0; }
figure.story-plate img, figure.plate img {
  max-width: 100%; max-height: 290px; width: auto; height: auto; display: block; margin: 0 auto;
  border: 1px solid var(--line, #e5dcc6);
  background: #fff; padding: 5px;
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
  transition: box-shadow .15s ease;
}
figure.story-plate a:hover img, figure.plate a:hover img { box-shadow: 0 2px 12px rgba(0,0,0,.22); }
figure.story-plate figcaption, figure.plate figcaption {
  margin-top: 6px; font-size: .78rem; color: var(--ink-soft, #6b6153);
  font-style: italic; line-height: 1.45; text-align: left;
  /* A file name used as a caption is one unbroken word — an underscore is not
     a break opportunity — and one word wider than the column runs off the
     page. Break it wherever it has to be broken. */
  overflow-wrap: anywhere; word-wrap: break-word; hyphens: auto;
}
/* Photographs come as a group with no prose between them, so they pack into a
   row rather than alternating down the page in a staircase. */
figure.plate { max-width: 31%; }
figure.plate img { max-height: 200px; }

figure.story-plate:nth-of-type(even) figcaption { text-align: left; }
.story-plate-clear { clear: both; }
/* A GROUP of photographs: a row, not a stack of floats. Captions of different
   lengths cannot pull a row out of line the way they pull floats. */
.plate-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 10px 0 20px; clear: both; }
.plate-row figure.plate {
  float: none; margin: 0;
  /* A third of the row, growing to fill a short line but never past a half:
     a lone wrapped photograph must not stretch to the full width. */
  flex: 1 1 calc(33.333% - 11px); max-width: calc(50% - 8px); min-width: 120px;
}
@media (max-width: 640px) { .plate-row figure.plate { min-width: 100%; } }


/* On a phone a 42% float leaves a column of text two words wide. */
@media (max-width: 640px) {
  figure.story-plate,
  figure.plate,
  figure.story-plate:nth-of-type(even),
  figure.plate:nth-of-type(even) {
    float: none; width: auto; max-width: 100%; margin: 20px auto;
  }
  figure.story-plate img, figure.plate img { max-height: 60vh; }
  figure.story-plate figcaption, figure.plate figcaption { text-align: center; }
}
.story-plate-missing { color: #7d2b23; font-size: .9rem; }

/* ---- structure --------------------------------------------------------- */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

header.site {
  border-bottom: 1px solid var(--paper-edge);
  background: rgba(247,241,227,.92);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 40;
}
/* min-height, not height.
   The bar was 68px tall whatever was in it, while the menu inside it was
   allowed to wrap. So the first version of this site with one menu item too
   many for the window did not get a taller bar — it got a second row of links
   hanging out through the bottom of it, with the header's own border ruled
   across them. It looked like a broken stylesheet and was a missing three
   letters. The bar grows now, and the padding keeps two rows off the rule. */
header.site .bar {
  display: flex; align-items: center; gap: 28px;
  min-height: 68px;
  padding-top: 10px; padding-bottom: 10px;   /* not `padding`: .wrap sets the sides */
}
/* No flex-wrap here on purpose. Letting the BAR wrap sends the whole menu
   below the name of the site and costs a third row; the menu wraps inside
   itself instead, beside the name, which is what it did before it outgrew the
   fixed height. The narrow layout further down wraps the bar deliberately. */
header.site .brand { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
header.site .brand em { color: var(--gold); font-style: normal; }
/* Right-aligned on every row, so a menu that has run onto two lines reads as
   two lines of menu rather than as something that has come apart. row-gap
   because 16px between links is right and 16px between rows is not enough to
   tell them apart. */
header.site nav {
  display: flex; gap: 16px; row-gap: 9px; margin-left: auto;
  align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
header.site nav a { color: var(--ink-soft); text-decoration: none; font-size: .86rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
header.site nav a.signout { text-transform: none; letter-spacing: 0; font-size: .85rem; }
header.site nav a:hover, header.site nav a.active { color: var(--maroon); border-bottom: 1px solid var(--gold); }

footer.site {
  margin-top: 64px; padding: 36px 0; border-top: 1px solid var(--paper-edge);
  color: var(--ink-soft); font-size: .9rem;
}
footer.site .cols { display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between; }

/* ---- hero -------------------------------------------------------------- */

.hero { position: relative; height: 460px; overflow: hidden; border-bottom: 1px solid var(--paper-edge); }
.hero .slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease-in-out;
  filter: sepia(.25) saturate(.9);
}
.hero .slide.on { opacity: 1; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(46,42,36,.15), rgba(46,42,36,.62)); }
.hero .caption { position: absolute; left: 0; right: 0; bottom: 48px; text-align: center; color: #fdf8ec; }
.hero .caption h1 { font-size: 3.4rem; margin-bottom: .2em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero .caption p { font-size: 1.15rem; opacity: .9; margin: 0; }
.hero .dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.hero .dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(253,248,236,.45); cursor: pointer; padding: 0; }
.hero .dots button.on { background: var(--gold-soft); }

/* ---- quick links ------------------------------------------------------- */

.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 48px 0; }
.quick a {
  display: block; padding: 28px 24px; text-align: center; text-decoration: none;
  background: var(--paper-deep); border: 1px solid var(--paper-edge); border-radius: var(--radius);
  color: var(--ink); transition: transform .18s ease, box-shadow .18s ease;
}
.quick a:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.quick .glyph { font-size: 2rem; display: block; margin-bottom: 8px; color: var(--gold); }
.quick strong { font-family: var(--serif); font-size: 1.25rem; display: block; }
.quick span.sub { color: var(--ink-soft); font-size: .9rem; }

/* ---- generic bits ------------------------------------------------------ */

.card { background: var(--paper-deep); border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: 22px; }
.card + .card { margin-top: 18px; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.right { text-align: right; }
.stack > * + * { margin-top: 12px; }
.rule { height: 1px; background: var(--paper-edge); border: 0; margin: 28px 0; }
.ornament { text-align: center; color: var(--gold); letter-spacing: .6em; margin: 28px 0; }

.btn {
  display: inline-block; padding: 9px 20px; border-radius: var(--radius); cursor: pointer;
  font-family: var(--body); font-size: .95rem; text-decoration: none; border: 1px solid var(--gold);
  background: var(--gold); color: #fffdf7; transition: background .15s ease;
}
.btn:hover { background: #a2760a; color: #fffdf7; }
.btn.ghost { background: transparent; color: var(--maroon); border-color: var(--paper-edge); }
.btn.ghost:hover { border-color: var(--gold); background: rgba(184,134,11,.08); color: var(--maroon); }
.btn.danger { background: var(--maroon); border-color: var(--maroon); }
.btn.small { padding: 5px 12px; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

label { display: block; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
  width: 100%; padding: 9px 11px; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fffdf7; border: 1px solid var(--paper-edge); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; border-color: var(--gold); }
textarea { min-height: 110px; resize: vertical; }
.field + .field { margin-top: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; }
.checkline { display: flex; align-items: center; gap: 8px; }
.checkline input { width: auto; }
.checkline label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); }

.flash { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid; }
.flash.ok    { background: #eef5ef; border-color: #cfe2d4; color: var(--ok); }
.flash.error { background: #f8eeec; border-color: #e8cfc9; color: var(--maroon); }
.flash.info  { background: var(--paper-deep); border-color: var(--paper-edge); color: var(--ink-soft); }

table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th, table.data td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--paper-edge); vertical-align: top; }
table.data th { font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
table.data tr:hover td { background: rgba(184,134,11,.05); }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; letter-spacing: .04em; border: 1px solid var(--paper-edge); background: #fffdf7; }
.pill.ok { color: var(--ok); border-color: #cfe2d4; }
.pill.warn { color: var(--warn); border-color: #ecd6c4; }
.pill.off { color: var(--ink-soft); }

.stat { text-align: center; padding: 18px; }
.stat .n { font-family: var(--serif); font-size: 2.4rem; color: var(--maroon); display: block; line-height: 1; }
.stat .l { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- chart ------------------------------------------------------------- */

.chart-shell { display: flex; height: calc(100vh - 68px); overflow: hidden; }
.chart-tools {
  width: 268px; flex: 0 0 268px; padding: 20px; overflow-y: auto;
  border-right: 1px solid var(--paper-edge); background: var(--paper-deep);
}
.chart-tools h3 { font-size: 1.05rem; margin-top: 20px; }
.chart-tools h3:first-child { margin-top: 0; }
.chart-canvas { flex: 1; position: relative; overflow: hidden; }
.chart-canvas svg { width: 100%; height: 100%; display: block; cursor: grab; }
.chart-canvas svg:active { cursor: grabbing; }

.node-card { cursor: pointer; }
.node-card rect { fill: #fffdf7; stroke: var(--paper-edge); stroke-width: 1; rx: 2; }
.node-card:hover rect { stroke: var(--gold); }
.node-card.selected rect { stroke: var(--maroon); stroke-width: 2; }
.node-card text.nm { font-family: var(--serif); font-size: 13px; fill: var(--ink); }
.node-card text.dt { font-size: 10px; fill: var(--ink-soft); }
.node-card circle.dot { stroke: #fffdf7; stroke-width: 1.5; }
.node-card .ribbon { fill: var(--gold); opacity: .85; }
.link { fill: none; stroke: #b9a988; stroke-width: 1.2; }
.link.spouse { stroke: var(--gold); stroke-width: 2; }
.link.spouse.ended { stroke-dasharray: 4 3; }

.chart-legend { position: absolute; right: 16px; bottom: 16px; background: rgba(247,241,227,.94); border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: 12px 14px; font-size: .85rem; }
.chart-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.chart-zoom { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.chart-zoom button { width: 34px; height: 34px; font-size: 1.1rem; border: 1px solid var(--paper-edge); background: rgba(247,241,227,.94); border-radius: var(--radius); cursor: pointer; color: var(--ink); }
.chart-zoom button:hover { border-color: var(--gold); }

#tooltip {
  position: fixed; pointer-events: none; z-index: 60; max-width: 260px;
  background: #2e2a24; color: #f7f1e3; padding: 9px 12px; border-radius: var(--radius);
  font-size: .85rem; line-height: 1.45; opacity: 0; transition: opacity .12s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
#tooltip.on { opacity: 1; }
#tooltip .t-name { font-family: var(--serif); font-size: 1.05rem; display: block; }

/* ---- drawer ------------------------------------------------------------ */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; z-index: 70;
  background: var(--paper); border-left: 1px solid var(--paper-edge);
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  box-shadow: -12px 0 40px rgba(46,42,36,.12);
}
.drawer.open { transform: translateX(0); }
.drawer .head { padding: 22px 24px 14px; border-bottom: 1px solid var(--paper-edge); position: relative; }
.drawer .head .close { position: absolute; right: 16px; top: 16px; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.drawer .body { padding: 20px 24px 40px; }
.drawer .portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-soft); margin-bottom: 12px; }
.drawer .relgroup { margin-top: 18px; }
.drawer .relgroup h4 { font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.drawer .relgroup a { display: block; padding: 5px 0; border-bottom: 1px dotted var(--paper-edge); text-decoration: none; }
.drawer .relgroup a span { color: var(--ink-soft); font-size: .85rem; float: right; }

/* ---- wizard ------------------------------------------------------------ */

.steps { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.steps .step { flex: 1 1 120px; padding: 10px 12px; border: 1px solid var(--paper-edge); border-radius: var(--radius); background: var(--paper-deep); font-size: .85rem; color: var(--ink-soft); }
.steps .step.on { border-color: var(--gold); color: var(--ink); background: #fffdf7; }
.steps .step b { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.wizard-panel { display: none; }
.wizard-panel.on { display: block; }

/* ---- calendar ---------------------------------------------------------- */

#calendar { background: #fffdf7; border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: 14px; }
.fc { font-family: var(--body); }
.fc .fc-toolbar-title { font-family: var(--serif); font-size: 1.6rem; }
.fc .fc-button-primary { background: var(--paper-deep); border-color: var(--paper-edge); color: var(--ink); }
.fc .fc-button-primary:not(:disabled):hover { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--gold); border-color: var(--gold); color: #fffdf7; }
.fc .fc-daygrid-day.fc-day-today { background: rgba(184,134,11,.09); }
.fc .fc-event { border: 0; padding: 1px 4px; font-size: .82rem; }

/* ---- modal ------------------------------------------------------------- */

.modal-back { position: fixed; inset: 0; background: rgba(46,42,36,.45); z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-back.open { display: flex; }
.modal { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--radius); width: 520px; max-width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(46,42,36,.3); }
.modal .head { padding: 18px 22px; border-bottom: 1px solid var(--paper-edge); display: flex; align-items: center; }
.modal .head h3 { margin: 0; }
.modal .head button { margin-left: auto; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--ink-soft); }
.modal .body { padding: 20px 22px; }
.modal .foot { padding: 14px 22px; border-top: 1px solid var(--paper-edge); display: flex; gap: 10px; justify-content: flex-end; }

/* ---- printable book ---------------------------------------------------- */

.book { max-width: 780px; margin: 0 auto; padding: 40px 24px; }
.book .titlepage { text-align: center; padding: 90px 0 60px; }
.book .titlepage h1 { font-size: 3rem; }
.book .person-entry { break-inside: avoid; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px dotted var(--paper-edge); }
.book .person-entry h3 { margin-bottom: 2px; }
.book .person-entry .meta { color: var(--ink-soft); font-size: .9rem; }
.book .gen-head { font-family: var(--serif); font-size: 1.5rem; color: var(--maroon); margin: 36px 0 14px; border-bottom: 2px solid var(--gold-soft); padding-bottom: 4px; }

@media print {
  header.site, footer.site, .no-print { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .book { max-width: none; padding: 0; }
  .book .titlepage { page-break-after: always; }
  .gen-head { page-break-before: auto; }
  a { color: inherit; text-decoration: none; }
}

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 860px) {
  .hero { height: 340px; }
  .hero .caption h1 { font-size: 2.2rem; }
  .chart-shell { flex-direction: column; height: auto; }
  .chart-tools { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--paper-edge); }
  .chart-canvas { height: 70vh; }
  header.site .bar { min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 12px; flex-wrap: wrap; }
  header.site nav { margin-left: 0; gap: 14px; row-gap: 9px; justify-content: flex-start; }
}

/* The grave: burial place, headstone photograph and inscription, shown on the
   person record beneath the facts. An inscription is quoted as written — Urdu
   and Arabic keep their own line height — and the photograph is deliberately a
   different shape from the portrait so the two are never confused. */
.grave {
  margin-top: 20px; padding: 16px 18px;
  background: var(--paper-deep); border: 1px solid var(--paper-edge); border-radius: 3px;
}
.grave h4 {
  margin: 0 0 8px; font-family: var(--serif); font-size: 1.02rem; color: var(--maroon);
  letter-spacing: .02em;
}
.grave .where { margin: 0; font-size: .96rem; }
.grave .gravephoto {
  display: block; width: 100%; max-height: 240px; object-fit: cover;
  margin-top: 12px; border-radius: 2px; border: 1px solid var(--paper-edge);
}
.grave .inscription {
  margin: 14px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--gold-soft);
  white-space: pre-wrap; font-size: 1rem; line-height: 2.3;
  /* Every line takes its direction from its own first strong character, so an
     Urdu stone reads right-to-left and an English note beside it does not. */
  font-family: var(--urdu), var(--serif); unicode-bidi: plaintext; text-align: start;
}

/* ---- what is waiting, across the top of every page ---------------------- */
/*
 * The queue bar. Deliberately not a badge with a number hidden inside it: the
 * items are named and linked here, so that a page load is enough to know
 * whether anything needs doing. It wraps rather than scrolls — an editor with
 * six things waiting should see six things, not five and an arrow.
 */
.todo { background: var(--paper-deep); border-bottom: 1px solid var(--paper-edge); }
.todo-in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 24px; }
.todo-n {
  font-family: var(--serif); font-size: 1.15rem; line-height: 1; color: #fffdf7;
  background: var(--maroon); border-radius: 999px; min-width: 26px; text-align: center;
  padding: 5px 9px 6px;
}
.todo-lead { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.todo-chip {
  display: inline-block; text-decoration: none; font-size: .86rem;
  padding: 4px 11px; border-radius: 999px; background: #fffdf7;
  border: 1px solid #ecd6c4; color: var(--warn);
}
.todo-chip.soft { border-color: var(--paper-edge); color: var(--ink-soft); }
.todo-chip b { font-weight: 600; }
.todo-chip:hover { border-color: var(--gold); color: var(--maroon); }

/*
 * A question somebody has been asked and not answered. Louder than the queue
 * bar on purpose, and it does not go away when the page is opened — only when
 * they write back.
 */
.asked {
  border: 1px solid var(--gold-soft); border-left: 5px solid var(--gold);
  background: #fffdf7; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.asked h3 { font-size: 1.22rem; margin: 2px 0 6px; }
.asked-who { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.asked-about { font-size: .88rem; color: var(--ink-soft); margin: 0 0 8px; }
.asked-body { margin: 0 0 12px; max-width: 70ch; }
.asked .btn.small { margin-right: 10px; }

@media (max-width: 640px) {
  .todo-in { padding: 8px 16px; gap: 6px; }
  .todo-chip { font-size: .8rem; padding: 3px 9px; }
}

/* An Urdu phrase fenced inside an English paragraph. The Nastaliq face sits at
   the END of the stack, so the Latin letters still come from the body serif and
   only the Arabic letters fall through to it. <bdi> brings the isolation; this
   brings the face. */
p:not(.urdu-para) bdi, figcaption bdi { font-family: var(--body), var(--urdu); }

/* A whole paragraph written in Urdu — a contributor's own account, kept in the
   chapter word for word beside the English. The direction comes from the
   paragraph rather than from the line, so the stops stay on the right side and
   a year in the middle of a sentence does not change places. */
p.urdu-para {
  /* `plaintext` rather than a hard rtl, which is what the book's stylesheet has
     always done: the paragraph takes its direction from its own first strong
     character, so a sentence opening with a numeral — "27 سال تک …" — still
     comes out the right way round. The Nastaliq face sits at the END of the
     stack, so an English word inside her Urdu still comes from the serif. */
  unicode-bidi: plaintext; text-align: start;
  font-family: var(--serif), var(--urdu);
  line-height: 2.2;
}

/* ---- شجرہ, the male line -------------------------------------------------
   A shajra is read top to bottom, so it is set as one indented column rather
   than a drawn chart: it survives a phone, it prints on paper without being
   cut into sheets, and the browser's own find works on it. The indent step is
   small because the line runs to twenty-two generations, and twenty-two
   comfortable indents is wider than any screen. */
.shajra-page { padding: 0 24px 56px; max-width: 900px; }
.shajra-title { font-family: var(--serif), var(--urdu); margin: 28px 0 10px; }
.shajra-lede { max-width: 62ch; }
.shajra-counts { max-width: 62ch; }

.shajra-find { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 10px; }
.shajra-find input[type=search] { font: inherit; padding: 6px 10px; min-width: 240px;
  border: 1px solid rgba(0,0,0,.2); border-radius: 4px; background: #fff; color: inherit; }

ol.shajra { --step: 15px; list-style: none; margin: 6px 0 0; padding: 0;
  border-top: 1px solid rgba(0,0,0,.08); }
.shajra-row { display: flex; align-items: baseline; gap: 10px;
  padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.shajra-row[hidden] { display: none; }
.shajra-gen { flex: 0 0 2.2em; text-align: right; font-size: .78rem;
  color: rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
/* The indent is capped as well as stepped. Twenty-two generations at a
   comfortable indent is wider than any screen, and a name pushed past half the
   row wraps into a column two words wide. min() keeps the early generations
   stepping visibly and stops the late ones running off the edge. */
.shajra-name { margin-left: min(calc(var(--d) * var(--step)), 48%);
  font-family: var(--serif), var(--urdu); }
.shajra-row.is-head .shajra-name { font-weight: 600; }
.shajra-row.is-hit { background: rgba(184,134,11,.13); }
.shajra-year { font-style: italic; font-size: .85em; color: rgba(0,0,0,.5);
  margin-left: .5em; font-variant-numeric: tabular-nums; }
.shajra-note { margin-top: 14px; max-width: 62ch; }

.shajra-gap { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.12); }
.shajra-gap p { max-width: 62ch; }
ul.shajra-unjoined { list-style: none; margin: 12px 0; padding: 0; }
ul.shajra-unjoined li { padding: 2px 0; }

@media (max-width: 640px) {
  .shajra-page { padding: 0 16px 48px; }
  ol.shajra { --step: 7px; }
  .shajra-gen { flex-basis: 1.8em; }
  .shajra-find input[type=search] { min-width: 0; flex: 1 1 160px; }
}

@media print {
  .shajra-find, .shajra-gap { display: none; }
  ol.shajra { --step: 13px; }
  .shajra-row { break-inside: avoid; border-bottom: 0; padding: 1px 0; }
  .shajra-year { color: #555; }
}

/* ---- the band shown while looking as somebody else ----------------------
   A colour nothing else on the site uses, because the one thing this band
   must never do is blend in: somebody who forgets they are inside a lowered
   view will report a fault against their own website. */
.asview { background: #2f3b4a; color: #e9eef4; border-bottom: 2px solid #1d2733; }
.asview-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 24px; font-size: .9rem; }
.asview-tag { text-transform: uppercase; letter-spacing: .09em; font-size: .72rem;
  opacity: .72; }
.asview strong { color: #fff; }
.asview-note { opacity: .62; font-size: .82rem; flex: 1 1 260px; min-width: 0; }
.asview-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.asview-acts form { margin: 0; }
.asview-btn { font: inherit; font-size: .82rem; cursor: pointer; padding: 4px 11px;
  border-radius: 3px; background: transparent; color: #e9eef4;
  border: 1px solid rgba(255,255,255,.34); }
.asview-btn:hover { background: rgba(255,255,255,.1); }
.asview-btn.strong { background: #e9eef4; color: #2f3b4a; border-color: #e9eef4; }
.asview-btn.strong:hover { background: #fff; }
@media (max-width: 640px) {
  .asview-in { padding: 8px 16px; gap: 8px; }
  .asview-note { display: none; }
}
@media print { .asview { display: none; } }

/* ---- the drawing behind the page ----------------------------------------
   One fixed layer under everything, at an opacity low enough that the page
   still reads as paper. Fixed rather than scrolling, because a watermark that
   slides up the screen under a long chapter is a distraction; and pointer-
   events none, because nothing behind the text may ever swallow a click.

   The image itself is named by the page (header.php writes the one line it
   needs); everything about how it sits is here, keyed off which drawing it is. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;                       /* nothing shows until a page asks for one */
  transition: opacity .4s ease;
}
body[data-backdrop]::before { opacity: .07; }
body[data-backdrop-at="full"]::before { opacity: .16; }

body[data-backdrop="tree"]::before    { background-position: center bottom -4vh; background-size: auto 92vh; }
body[data-backdrop="bough"]::before   { background-position: right -6vw top -4vh; background-size: 62vw auto; }
body[data-backdrop="arch"]::before    { background-position: center top 4vh;  background-size: auto 94vh; }
body[data-backdrop="wreath"]::before  { background-position: center 46%;      background-size: auto 78vh; }
body[data-backdrop="cypress"]::before { background-position: center bottom;   background-size: 100vw auto; }
body[data-backdrop="leaves"]::before  { background-repeat: repeat; background-position: center top;
                                        background-size: 46vw auto; }
body[data-backdrop="ledger"]::before  { background-repeat: repeat-y; background-position: left top;
                                        background-size: 54vw auto; }

/* On a phone the drawing is mostly behind the text rather than beside it, so
   it comes down further still and the tiled ones are made larger to show
   fewer repeats. */
@media (max-width: 640px) {
  body[data-backdrop]::before { opacity: .05; }
  body[data-backdrop-at="full"]::before { opacity: .11; }
  body[data-backdrop="bough"]::before  { background-size: 150vw auto; }
  body[data-backdrop="leaves"]::before { background-size: 90vw auto; }
  body[data-backdrop="ledger"]::before { background-size: 130vw auto; }
}

/* Paper is paper. Nothing of this reaches the printer. */
@media print { body::before { display: none !important; } }