/* The members' directory, /directory, and a person's own page, /directory/<number> (src/directory.py, lib/directory.mjs,
   public/assets/directory.js), linked after site.css by those pages alone, so no other page changes. The book's type
   and colours: Fraunces for the head and the names, Libre Franklin for everything else, Blue, Dome as a shape, white.
   The list is A, the roll, with the faces (B's wall) as its second view; the person's page is A, the card
   (person.css). One space system, the board page's: his paragraphs' 27 px line (--lh), a line and a half (--g) under a head and between
   the parts of a block, two lines (--r) between blocks, four (--s) under the last. */
.dir, .dirp { --lh: 27px; --g: 40.5px; --r: 54px; --s: 108px; }
@media (max-width: 1100px) { .dir, .dirp { --s: 81px; } }
.dtop header.site, body.dirp > header.site { padding-top: var(--head-top); }

/* ---- the first screen: the head, one line, the count -------------------------------------------------------------- */
.dhead { padding-top: calc(var(--r) - 8.4px - 9.8px); }
.dhead h1 { color: var(--blue); font-size: 56px; line-height: 1.05; text-wrap: balance; }
.dline { margin-top: 22px; max-width: 24em; font: 500 21px/1.45 "Libre Franklin", sans-serif; text-wrap: pretty; }
.dcount { margin-top: 18px; font: 600 16px/1.4 "Libre Franklin", sans-serif; min-height: 1.4em; }
.dcount b { font: 700 26px/1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); margin-right: 2px; }
.dmap { margin-top: 18px; font: 600 17px/1.4 "Libre Franklin", sans-serif; }
.dmap a { color: var(--blue); text-underline-offset: 4px; }
.dmain { padding-top: var(--r); padding-bottom: var(--s); }

/* ---- the ways to narrow ------------------------------------------------------------------------------------------ */
.narrow input, .narrow select { width: 100%; height: 52px; border: 0; border-radius: 0; border-bottom: 2px solid var(--blue); background-color: #fff;
  padding: 0 14px; font: 400 17px "Libre Franklin", sans-serif; color: #000; box-shadow: inset 0 1px 0 #B8C4D6, inset 1px 0 0 #B8C4D6, inset -1px 0 0 #B8C4D6; }
.narrow select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-repeat: no-repeat; background-size: 6px 6px;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: right 20px top 23px, right 14px top 23px; }
.narrow input::-webkit-search-cancel-button { cursor: pointer; }
.sort { display: flex; align-items: center; gap: 4px; height: 52px; }
.sort button { height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; font: 600 15px/1 "Libre Franklin", sans-serif; color: var(--quiet); white-space: nowrap;
  text-decoration: none; }
.sort button[aria-pressed="true"] { color: var(--blue); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--dome); text-underline-offset: 8px; }
.sort button:hover { color: var(--blue); }
.dres { margin-top: 28px; font: 600 15px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); }
.dres .clr { margin-left: 12px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.dempty { margin-top: var(--g); }
.dempty p { font: 500 21px/1.45 "Libre Franklin", sans-serif; }
.dempty .btn { margin-top: 24px; }
.dmore { margin-top: var(--g); }

/* The narrowing, A refined: Y Combinator's search first and widest, across the first two of the site's five columns, and in each of
   the other three a menu that names itself (B's row), so no line of labels stands over the row. A tablet: the search
   across, the three menus under it. A phone: the search, What they do (its words the longest) across, then Region and
   County side by side, the county's column wide enough for "Williamsburg County". */
.na { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; row-gap: 12px; }
.na input[name=q] { grid-column: 1 / 3; }
.na input, .na select { font-size: 17px; }
.na select { padding-left: 12px; padding-right: 32px; }
.na input::placeholder { color: var(--quiet); opacity: 1; }
.na select.blank { color: var(--quiet); }
@media (max-width: 1100px) { .na { grid-template-columns: repeat(3, minmax(0, 1fr)); } .na input[name=q] { grid-column: 1 / -1; } .na input, .na select { font-size: 16px; } }
@media (max-width: 760px) { .na { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); } .na select[name=does] { grid-column: 1 / -1; } }

/* The tally line over the roll, as under the home page's map: the count (or how many a narrowing shows, and the way
   back to everyone) at the left, the sort at the right, on one baseline; the roll's rule half a line under it */
.tline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 24px; row-gap: 6px; margin-top: var(--lh); }
.tline .dcount, .tline .dres { margin: 0; min-height: 0; font: 600 16px/1.4 "Libre Franklin", sans-serif; color: #000; }
.tline .dres b { font: 700 26px/1 "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); margin-right: 2px; }
.tline .sort { height: auto; }
.tline .sort button { height: auto; padding-top: 0; padding-bottom: 0; }
.tline .sort button:last-child { padding-right: 0; }   /* "By name" ends on the roll's right edge, over the numbers */
.tline .dres .clr, .tline .dres .tomap { font-size: 15px; }

/* the member's own mark, as on the map: a Dome ring inside the face, and "You" after the name */
.you { display: inline-block; margin-left: 8px; padding: 3px 7px 2px; background: var(--dome); color: #000; vertical-align: 3px;
  font: 700 11px/1.3 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.me .face, .me .tp { outline: 3px solid var(--dome); outline-offset: -3px; }
/* an office the board page names, small capitals after the name */
.off { display: inline-block; margin-left: 10px; vertical-align: 3px; font: 700 12px/1.3 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }

/* ---- the roll -------------------------------------------------------------------------------------------------------- */
/* A row every 108 px, four of the page's 27 px lines (Y Combinator's is 124 with a 78 px face): the 56 px face and the
   name and its line (30 + 4 + 22) both 56 tall, 25.5 above and below, and the rule. The number stands on the name's
   baseline at the right edge, the same edge as the header's Sign in and the sort over it. An office (Chair, Treasurer)
   or "You" stays small on the name's line while it fits; where it would not, it drops to a small line of its own under
   the name, flush with it (B's small line), and never pushes the number. */
.roll { list-style: none; margin-top: calc(var(--lh) / 2); border-top: 2px solid var(--blue); }
.roll li { border-bottom: 1px solid var(--rule); }
.roll .row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 25.5px 16px; margin: 0 -16px; color: inherit; text-decoration: none; }
.roll .rw, .roll .rno { align-self: baseline; }
.roll a.row[href]:hover { background: var(--tint); }
.roll a.row[href]:hover .rn .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.roll .face { width: 56px; height: 56px; font-size: 17px; }
.rw { min-width: 0; }
.roll .rn { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font: 700 26px/30px "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); }
.roll .rn .nm { min-width: 0; }
.roll .rn .off, .roll .rn .you { margin: 0; vertical-align: 0; line-height: 18px; }
.roll .rl { display: block; margin-top: 4px; font: 400 16px/22px "Libre Franklin", sans-serif; color: var(--quiet); }
.rno { font: 600 15px/1 "Libre Franklin", sans-serif; color: var(--quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .roll .row { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 14px; padding: 16px 20px; margin: 0 -20px; align-items: start; }
  .roll .face { width: 48px; height: 48px; font-size: 15px; }
  .roll .rn { font-size: 22px; line-height: 26px; }
  .roll .rl { font-size: 15px; line-height: 21px; }
  .rno { font-size: 14px; }
}

/* ---- the faces, B's wall -------------------------------------------------------------------------------------------------- */
.wall { list-style: none; margin-top: var(--g); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; }
/* each tile runs four of the wall's rows (its picture, its name with its small line, what they do, its county) on the
   wall's own tracks, so every tile in a row has its words on the same lines; the space between rows of tiles is the
   county line's foot */
.wall > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.tile { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; color: inherit; text-decoration: none; }
.tp { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--blue); color: #fff; font: 700 52px/1 "Libre Franklin", sans-serif; }
.tp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tw { display: block; min-width: 0; margin-top: 14px; }
.tn { display: block; font: 700 21px/25.2px "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50; color: var(--blue); white-space: nowrap; overflow: hidden; }
.tn.wraps { white-space: normal; overflow: visible; }   /* a name brought down a step keeps its line's full height (.tn's line-height in px), so its baseline stays on its neighbours' */
.tsub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.tsub:not(:empty) { margin-top: 3px; }
.tsub .off, .tsub .you { margin-left: 0; vertical-align: 0; }
.td { display: block; margin-top: 4px; font: 400 16px/1.4 "Libre Franklin", sans-serif; }
.tc { display: block; padding-bottom: 40px; font: 400 15px/1.4 "Libre Franklin", sans-serif; color: var(--quiet); }
a.tile[href]:hover .tn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } .tc { padding-bottom: 28px; } .tn { font-size: 18px; line-height: 21.6px; } .td { font-size: 15px; } .tc { font-size: 14px; } .tp { font-size: 40px; } }

/* ---- a person's own page ------------------------------------------------------------------------------------------- */
.dp { padding-top: calc(var(--r) - 8.4px); padding-bottom: var(--s); }
.pmap { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font: 600 17px/1.4 "Libre Franklin", sans-serif; color: var(--blue); text-underline-offset: 4px; }
.pmap::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: rotate(45deg); }
@media (max-width: 760px) { .dhead h1 { font-size: 40px; } .dhead { padding-top: calc(var(--r) - 8.1px - 7px); } .dline { font-size: 18px; } }

.also { margin-top: var(--s); padding-top: 14px; border-top: 1px solid var(--line); }
.also h2 { font-size: 28px; line-height: 1.2; color: var(--blue); }
.also ul { list-style: none; margin-top: 24px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.also a { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start; color: inherit; text-decoration: none; }
.also .face { grid-row: 1 / 3; width: 56px; height: 56px; font-size: 17px; }
.also b { font: 600 17px/1.3 "Libre Franklin", sans-serif; }
.also i { font: 400 15px/1.35 "Libre Franklin", sans-serif; font-style: normal; color: var(--quiet); }
.also a:hover b { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.allc { display: inline-block; margin-top: 12px; font: 600 17px/1.4 "Libre Franklin", sans-serif; color: var(--blue); text-underline-offset: 4px; }
@media (max-width: 1100px) { .also ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .also ul { grid-template-columns: minmax(0, 1fr); } }

/* the page for a number nobody holds */
.nobody .btn { margin-top: 28px; }

/* the foot at the foot of the window on a short page (a person's page, the page for a number nobody holds) */
body.dirp { min-height: 100vh; display: flex; flex-direction: column; }
body.dirp > main { flex: 1 0 auto; width: 100%; }

.sort button:first-child { padding-left: 0; }   /* "By number" on the fields' left edge where the row stacks */
/* the list arrives after the page: its place is held a window tall, so nothing on the screen moves when it lands
   (without the page's script, src/directory.py lets it go) */
.dmain { min-height: 100vh; }
.dres .tomap { margin-left: 12px; color: var(--blue); text-underline-offset: 3px; }   /* a county's view, back to that county on the map */

/* ---- the list or the faces (Taylor, November 7, 2026: "we could almost do like Finder and have an icon view (like you
   had in b) and the list view, like you have in A, with a toggle"; "Yes, build it") ------------------------------------
   The sort and the toggle's two marks together at the right end of the tally line, over the people they arrange; the
   faces are B's wall (dir-b at 762368f), under the same rule as the roll, so the tally line and the rule stand still when
   the view changes. */
.tline .ctl { display: flex; align-items: baseline; column-gap: 28px; }
.view { display: flex; align-items: baseline; gap: 4px; }
.view button { position: relative; display: inline-flex; align-items: flex-end; height: 18px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--quiet); }
.view button:last-child { padding-right: 0; }
.view button svg { display: block; width: 15px; height: 15px; }
.view button:hover { color: var(--blue); }
.view button[aria-pressed="true"] { color: var(--blue); }
.view button[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -11px; height: 3px; background: var(--dome); }
.view button:last-child[aria-pressed="true"]::after { right: 0; }
.dir .wall { margin-top: calc(var(--lh) / 2); padding-top: var(--lh); border-top: 2px solid var(--blue); }
@media (max-width: 760px) { .tline .ctl { width: 100%; justify-content: space-between; } }