/* Fiesta. Tokens copied 2026-09-20 from pesoedge trading/templates/base.html, the two
   unqualified :root blocks; see brain/themes.md. One file, no build step.
   Light is the base block, dark overrides it under [data-theme="dark"] on <html>. The
   colours (tang, aqua, sun, grape) are the same in both: only the page around them moves.
   --on-hi is the text that sits on a --txt-hi fill. It has to be a token because --txt-hi
   is near-black on paper and near-white in the dark, so a hardcoded #fff goes invisible.
   Light measured 2026-10-23 on --card / --bg / --sunk: --txt-2 7.06 / 6.53 / 6.20, --txt-3
   5.36 / 4.96 / 4.70, --tang-ink 5.43 / 5.06 / 4.79. --tang-on is dark ink, 5.00 on --tang,
   because white was 3.23 and the fill does not move with the theme (the --sun-on pattern).
   places/tests/test_contrast.py holds every text token at 4.5 or more. */
:root {
  color-scheme: light;
  --bg: #f5f6fa; --card: #ffffff; --sunk: #eef0f6; --line: #e6e8f0;
  --txt: #2a3454; --txt-hi: #14203a; --txt-2: #4f5873; --txt-3: #626a83;
  --on-hi: #ffffff; --on-hi-2: rgba(255,255,255,.78);
  --ink: rgba(20,32,58,.05); --shadow: rgba(20,32,58,.10);
  --tang: #f2610d; --aqua: #00c2b8; --sun: #ffd23f; --grape: #4c5bff; --rose: #e8345e;
  --tang-ink: #b8430a; --aqua-ink: #04837c; --sun-ink: #7a5b00; --grape-ink: #3644d6;
  --tang-on: #14203a; --sun-on: #4a3800; --aqua-on: #073b38; --grape-on: #ffffff;
  --ok: #078a50; --ok-bg: #dff6ea; --danger: #e0344b; --danger-bg: #fde3e7;
  --link: var(--tang-ink); --r: 24px; --r2: 14px;
  --pop: 0 1px 2px rgba(20,32,58,.08), 0 12px 32px rgba(20,32,58,.22);
  --ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  /* The size of anything you type into. It is a variable and not a number on each rule because
     a value inherited from `:root` never has to win a specificity fight: `.field input[type=
     password]` counts for more than a plain `input`, so a phone override written as `input {}`
     lost to it at every width. One place to set it, and it reaches every box. See the
     `pointer: coarse` block at the foot of this file for why a phone needs 16px. */
  --fld: 14px;
}
/* Slate, 2026-09-24: the neutrals of the orchestrate-tasks board, a cool grey with almost no
   hue, so the four fiesta colours still land on it the way they land on paper. It replaced
   Basalt, a warm charcoal. The accent inks did not move. Measured on --card: --txt 9.84,
   --txt-2 7.00, --txt-3 5.55, --line 1.47. See brain/themes.md. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418; --card: #1c1f25; --sunk: #17191e; --line: #363b45;
  --txt: #c3c8d2; --txt-hi: #eceef2; --txt-2: #a3a9b5; --txt-3: #8f96a3;
  --on-hi: #121418; --on-hi-2: rgba(18,20,24,.62);
  --ink: rgba(0,0,0,.40); --shadow: rgba(0,0,0,.45);
  --pop: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.6);
  --tang-ink: #ff8b52; --aqua-ink: #35ded1; --sun-ink: #ffd45a; --grape-ink: #9ba4ff; --rose: #ff5c80;
  --ok: #3ddc97; --ok-bg: rgba(61,220,151,.14); --danger: #ff6b7d; --danger-bg: rgba(255,107,125,.16);
}
* { box-sizing: border-box; }
/* The scrollbar, copied from newscura's reader (2026-09-22): a slim rounded thumb on an
   invisible track, on the page and on every box that scrolls on its own. It is the muted text
   colour at a third, so it flips with the theme by itself. The transparent border needs
   background-clip or the thumb paints under it. The standard pair is scoped to Firefox: Chrome
   honours it too, and then ignores every ::-webkit-scrollbar rule and draws a square bar. */
@supports (-moz-appearance: none) {
  html, .sidebar, .sug, .modal-c, [popover] { scrollbar-color: color-mix(in srgb, var(--txt-2) 30%, transparent) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--txt-2) 32%, transparent); background-clip: content-box; border: 3px solid transparent; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--txt-2) 50%, transparent); background-clip: content-box; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--ui); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the part of a name you typed, on a search row or in the box: the ink says it, not a
   yellow highlighter, which is what a browser draws by default */
mark { background: none; color: var(--tang-ink); font-weight: inherit; }
h1, h2, h3 { font-family: var(--display); color: var(--txt-hi); letter-spacing: -.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(27px, 4.4vw, 40px); font-weight: 800; }
h2 { font-size: 19px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0; max-width: 70ch; }
img { max-width: 100%; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.eyebrow.light { color: rgba(255,255,255,.8); }
.meta { color: var(--txt-2); font-size: 12.5px; }
.meta.dim, .dim { color: var(--txt-3); font-size: 12px; }
.cite { color: var(--txt-3); font-size: 11.5px; font-family: var(--mono); }
.note { color: var(--txt-3); font-size: 12.5px; margin-top: 4px; }
.sec-h { margin-top: 10px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--card); padding: 8px 14px; border-radius: 999px; z-index: 9; }

/* The sidebar (2026-09-22): the one column of navigation, on every page. The site at the top,
   the sections of the place with their counts, the tree, and you at the foot. It replaced the
   top bar, the context bar and the rail on the right: three menus, now one column. It sticks
   to the top and scrolls on its own when a screen is shorter than it is. */
.shell { display: flex; min-height: 100vh; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar { width: 250px; flex: none; position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--card); box-shadow: 1px 0 0 var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.sidebar .brand { padding: 0 10px; font-size: 19px; }
/* The heading over the six boards. It is the only word in the column that says whose menu this
   is, and it has to be there: without it the same six words read as the place's own sections,
   which is the confusion the card in the page was built to end. See places/_side.html. */
.side-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); padding: 10px 12px 4px; }
.side-cut { border: 0; border-top: 1px solid var(--sunk); margin: 10px 4px; width: auto; }
/* the two lists are popovers, which a phone opens from the bar at its foot. On a wide screen
   they are drawn in flow: an author display beats the platform's hidden-until-open default */
.snav, .tree { flex-direction: column; gap: 1px; }
.snav a { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--txt); }
.snav a:hover { text-decoration: none; background: var(--sunk); color: var(--txt-hi); }
.snav a.on { background: var(--txt-hi); color: var(--on-hi); font-weight: 700; }
/* the drawing is the section, and it wears the colour the dot wore (2026-09-22): the same one a
   search row wears, so the colour still means "a section of this place". Home, the parts of the
   place and the government are new here, so they carry a colour of their own. See _sicon.html. */
.sic { width: 18px; height: 18px; flex: none; color: var(--txt-3); }
.sic.tang { color: var(--tang); } .sic.sun { color: #e8b400; } .sic.tang-2 { color: #f7a06e; }
.sic.ink { color: var(--txt-hi); } .sic.grape { color: var(--grape); } .sic.grape-2 { color: #8b96ff; }
.sic.aqua { color: var(--aqua); } .sic.rose { color: var(--rose); } .sic.moss { color: #3fae6f; }
.sic.slate { color: #6b83ad; }
.snav a.on .sic { color: var(--on-hi); }
:root[data-theme="dark"] .sic.grape { color: var(--grape-ink); }
:root[data-theme="dark"] .sic.slate { color: #97aeda; }
/* what the place is made of, and who runs it: not somewhere you post, so they stand dimmed */
.snav a.q { color: var(--txt-2); font-weight: 500; }
.tree a { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 13px; color: var(--txt-2); }
.tree a:hover { text-decoration: none; background: var(--sunk); color: var(--txt-hi); }
.tree a.on { background: var(--sunk); color: var(--txt-hi); font-weight: 700; }
.tree a.more { color: var(--tang-ink); font-weight: 700; }
/* you, at the foot of the column. The rail above scrolls inside itself, the way newscura's does,
   so this row is always the last thing in the column with nothing sliding under it. */
/* the rail inside the sidebar: no card of its own, and the rows sized for a 250px column */
.side-rail .rail-h { margin: 12px 6px 4px; }
.side-rail .rail-row { padding: 6px 12px; border-radius: 10px; }
.side-rail .rail-kids { margin: 2px 0 6px 21px; }
.side-rail .rail-note { padding: 2px 12px 4px; }
/* the old tree rules reach these rows by element, so the lit ones say so louder */
.side-rail a.rail-row.on { background: var(--sunk); color: var(--txt-hi); font-weight: 700; box-shadow: inset 3px 0 0 var(--txt-hi); }
.side-rail a.rail-kid.on { background: var(--sunk); color: var(--txt-hi); font-weight: 700; }
.side-rail .rail-kid b { color: var(--txt-3); }
/* on a phone the box is not there: the two sheets open from the bar by themselves */
.side-scroll { display: contents; }
.side-me { flex: none; margin: 0 -14px -18px; padding: 10px 14px 18px; border-top: 1px solid var(--sunk); background: var(--card); display: flex; align-items: center; gap: 8px; }
.side-me .me { width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font: inherit; text-align: left; }
.side-me .me:hover { background: var(--sunk); }
.me-name { font-size: 13px; font-weight: 700; color: var(--txt-hi); }
.me-up { margin-left: auto; width: 14px; height: 14px; flex: none; color: var(--txt-2); }
.me-new { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--txt-2); }
.side-me .me-dot { display: none; }
.me-new + .me-up { margin-left: 0; }
/* the bar at the foot of a phone; a wide screen has the column instead */
.bar { display: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--txt-hi); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--tang); }
.brand .mark { width: 22px; height: 22px; flex: none; }
.brand .mark .fb { fill: #0038a8; }
:root[data-theme="dark"] .brand .mark .fb { fill: #5b7cff; }
/* The name is one flex item, so the .brand gap sits between the mark and the word and never
   between "Pinas" and "Dex". See places/_brand.html. */
.brand .nm { white-space: nowrap; }
.pill { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--sunk); color: var(--txt-hi); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pill:hover { text-decoration: none; background: var(--line); }
.pill.tang { background: var(--tang); color: var(--tang-on); }
.pill.sun { background: var(--sun); color: var(--sun-on); }
.pill.aqua { background: var(--aqua); color: var(--aqua-on); }
.pill.grape { background: var(--grape); color: var(--grape-on); }
.pill.dark { background: var(--txt-hi); color: var(--on-hi); }
.find { position: relative; margin: 10px 0 8px; }
.find-i { position: absolute; left: 13px; top: 11px; width: 15px; height: 15px; color: var(--txt-2); pointer-events: none; }
.find input, .search input { height: 34px; border: 0; border-radius: 999px; background: var(--sunk); padding: 0 16px; font: inherit; font-size: var(--fld); color: var(--txt-hi); min-width: 230px; }
.find input { width: 100%; min-width: 0; height: 36px; padding-left: 36px; font-size: var(--fld); }

/* The box that answers while you type (2026-09-21), under the top bar and on the picker. A row
   is a link, so it works on a click with no script in the way; the script only moves the light
   and opens what is lit. The dot is the section colour, the same one the strip uses, so a row
   says where it lives before you read it. See static/find.js and places/find.py. */
.sug { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: max(100%, 440px); max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--pop); overflow: hidden auto; max-height: min(66vh, 460px); }
.sug-h { margin: 0; padding: 9px 14px 3px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.sug .opt, .pal .opt { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 14px; font-weight: 400; }
.sug .opt:hover, .pal .opt:hover { text-decoration: none; background: var(--sunk); }
.sug .opt[aria-selected="true"], .pal .opt[aria-selected="true"] { background: var(--sunk); }
.sug .opt i { width: 8px; height: 8px; border-radius: 50%; align-self: center; background: var(--txt-3); }
.sug .opt i.tang { background: var(--tang); } .sug .opt i.sun { background: var(--sun); }
.sug .opt i.tang-2 { background: #f7a06e; } .sug .opt i.grape-2 { background: #8b96ff; }
.sug .opt i.ink { background: var(--txt-hi); } .sug .opt i.grape { background: var(--grape); }
.sug .opt i.aqua { background: var(--aqua); }
/* one row is one line: a name that outgrows the panel is cut, never wrapped under its own dot */
.sug .nm, .pal .nm { color: var(--txt-hi); font-weight: 700; font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug .wh, .pal .wh { color: var(--txt-2); font-weight: 400; font-size: 12.5px; }
.sug .mt, .pal .mt { font-family: var(--mono); font-size: 10.5px; color: var(--txt-3); white-space: nowrap; }
.sug-e { margin: 0; padding: 13px 14px; font-size: 13px; color: var(--txt-2); }
.sug-f { display: block; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--txt-2); font-weight: 400; }
.sug-f:hover { text-decoration: none; background: var(--sunk); }
.sug-f b { color: var(--txt-hi); }
/* in a form the box is as wide as the form, so its panel hangs off the box and not off the
   right edge the way the one in the top bar does */
.field, .search { position: relative; }
.field .sug, .search .sug { left: 0; right: auto; width: 100%; }
.find .sug { position: fixed; left: 14px; top: 106px; right: auto; width: 440px; }
.search .sug { top: calc(100% + 8px); }
/* the palette: the search box and the pages of the site in one dialog, opened by Ctrl K or by
   the box in the sidebar. The rows are the ones the box under the sidebar draws, so the two
   answer alike. See places/_palette.html and static/find.js. */
.find .k { position: absolute; right: 9px; top: 10px; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 10px; line-height: 18px; color: var(--txt-3); pointer-events: none; }
/* the display goes on [open], not on .pal: an author rule beats the browser's own
   `dialog:not([open]) { display: none }` whatever its specificity, and the closed palette then
   stands in the page, at the top of the document, for a reader who scrolls to find it. */
.pal { width: min(620px, calc(100vw - 28px)); max-height: min(72vh, 620px); margin: 9vh auto auto; padding: 0; border: 0; border-radius: var(--r2); background: var(--card); color: var(--txt); box-shadow: var(--pop); overflow: hidden; }
.pal[open] { display: flex; flex-direction: column; }
.pal::backdrop { background: rgba(20,32,58,.42); backdrop-filter: blur(2px); }
.pal-box { position: relative; flex: none; border-bottom: 1px solid var(--line); }
.pal-box .find-i { top: 17px; left: 17px; width: 17px; height: 17px; }
.pal-box input { width: 100%; height: 52px; border: 0; border-radius: 0; background: none; padding: 0 64px 0 44px; font: inherit; font-size: max(15px, var(--fld)); color: var(--txt-hi); }
.pal-box input:focus { outline: 0; }
.pal-esc { position: absolute; right: 14px; top: 16px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--sunk); font-family: var(--mono); font-size: 10px; line-height: 20px; color: var(--txt-3); }
.pal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.pal .opt { grid-template-columns: 18px minmax(0, 1fr) auto; }
/* a row of the palette is a grid, and a grid beats the browser's own rule for [hidden] */
.pal [hidden] { display: none !important; }
.pal .opt .sic { width: 17px; height: 17px; }
.pal .sug-f { border-top: 0; }
.find input:focus, .search input:focus, input:focus, textarea:focus, select:focus { outline: 2px solid var(--tang); outline-offset: 1px; }
/* Alt with an arrow walks the two lists in the sidebar, so a row says where it is in the theme's
   own colour and not in the browser's black (2026-09-22). See static/find.js. */
.snav a:focus-visible, .side-rail a:focus-visible { outline: 2px solid var(--tang); outline-offset: -1px; }
.inline { display: inline; }
.linkish { background: none; border: 0; color: var(--txt-2); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.linkish.small { font-size: 11px; }

/* layout */
.page { max-width: 1140px; margin: 0; padding: 22px 26px 56px; display: grid; gap: 18px; align-content: start; }
.flashes { max-width: 1140px; margin: 14px 0 0; padding: 0 26px; }
.flash { background: var(--ok-bg); color: #05603a; border-radius: var(--r2); padding: 10px 16px; font-size: 13px; }
.flash.error { background: var(--danger-bg); color: #9b1c30; }
.hero { padding: 6px 0 10px; display: grid; gap: 12px; min-width: 0; }
.hero p { color: var(--txt-2); font-size: 15px; }
/* no Search button: one input submits on Enter by itself, and the box that answers while you
   type is the real control (brain/dev.md). The box takes the room the button used. */
.search { display: flex; max-width: 640px; }
.search input { flex: 1; height: 44px; background: var(--card); box-shadow: 0 1px 2px var(--ink); }
.crumbs { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--txt-3); align-items: center; }
.crumbs a { color: var(--txt-2); font-weight: 600; }
.crumbs b { color: var(--txt-hi); }
.head { display: grid; gap: 2px; }
.intro { font-size: 16px; color: var(--txt); max-width: 74ch; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* the scope after the board's name on a country board: "Talk across the Philippines". A place
   page reads "Baguio City" with Talk lit in its card, so the country's reads the same way round,
   and the quiet half is the half that says where. See places/_pcard.html. */
.head h1 small { font-family: var(--ui); font-size: .5em; font-weight: 600; color: var(--txt-2); letter-spacing: 0; }
.row-head.tight { margin: 0; }
.under { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* a closed job leaves nothing to press, and an empty row still takes the card's gap */
.acts:empty { display: none; }

/* tooltip: the words live in data-tip, so a control explains itself with one attribute and no
   script. It opens on focus too, or it would be an explanation only a mouse can read. */
[data-tip] { position: relative; }
[data-tip]::before, [data-tip]::after {
  position: absolute; bottom: calc(100% + 10px); right: 8px; z-index: 5;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
[data-tip]::after {
  content: attr(data-tip);
  width: max-content; max-width: 268px; padding: 9px 11px;
  border-radius: var(--r2); background: var(--txt-hi); color: var(--on-hi);
  font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-align: left;
  white-space: normal; box-shadow: 0 2px 6px var(--ink), 0 16px 34px -14px var(--shadow);
}
/* the caret, drawn as a square on its corner so it takes the tooltip's own colour */
[data-tip]::before { content: ""; bottom: calc(100% + 5px); right: 22px; width: 10px; height: 10px; background: var(--txt-hi); transform: translateY(4px) rotate(45deg); border-radius: 2px; }
[data-tip]:hover::before, [data-tip]:hover::after,
[data-tip]:focus-visible::before, [data-tip]:focus-visible::after { opacity: 1; transform: none; }
[data-tip]:hover::before, [data-tip]:focus-visible::before { transform: rotate(45deg); }

/* banner */
.hb { position: relative; border-radius: var(--r); overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; padding: 18px 20px; background-size: cover; background-position: center; }
.hb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,58,0) 35%, rgba(20,32,58,.72) 100%); }
.hb > * { position: relative; z-index: 1; }
.hb h1 { color: #fff; }
.hb .cap { position: absolute; top: 16px; right: 112px; max-width: 52%; background: rgba(20,32,58,.62); color: #fff; border-radius: var(--r2); padding: 8px 12px; font-size: 12px; backdrop-filter: blur(4px); }
.hb .cap b { display: block; font-weight: 700; }
.hb .cap small { display: block; color: rgba(255,255,255,.72); font-size: 10.5px; margin-top: 2px; }
/* an image credit links to its file page, but reads as a credit, not as a link */
.hb .cap small a, .seal-card .note a { color: inherit; text-decoration: none; }
.hb .cap small a:hover { color: #fff; }
.seal-card .note a:hover { color: var(--txt-hi); }
.hb-foot { display: flex; align-items: flex-end; gap: 16px; flex: 1; }
.hb-titles { display: grid; gap: 4px; min-width: 0; flex: 1; }
.follow { position: absolute; top: 18px; right: 18px; z-index: 1; }
.follow .fol { background: #fff; color: var(--rose); }
.head.row-head .follow { position: static; }
.head.row-head .follow .fol { background: var(--rose); color: #fff; }
.head.row-head .follow .fol.on { background: transparent; color: var(--rose); }
/* the button sits on a photo, so it carries the same lift the seal does */
.follow .fol { box-shadow: 0 6px 18px rgba(20,32,58,.32); }
/* Following is the done state, so it steps back from tangerine. A photo can be any colour under
   it, so the step back is always the same white pill and never the theme's own grey. */
.follow .fol.on { background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(20,32,58,.32); }
/* seals are drawn on any background, so every one of them gets the same white disc */
.seal { flex: none; border-radius: 50%; background: rgba(255,255,255,.94); padding: 5px; object-fit: contain; box-shadow: 0 6px 18px rgba(20,32,58,.32); }
.tile.seal-card { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.seal-card img { flex: none; width: 104px; height: 104px; object-fit: contain; }
.seal-card h2 { margin: 2px 0 0; }
.hb .facts { color: rgba(255,255,255,.88); font-family: var(--mono); font-size: 12px; margin-top: 10px; }
.hb .facts dt { color: rgba(255,255,255,.66); }
.hb .facts dd { color: #fff; }

/* THE PLACE CARD (2026-09-22). The place, and the sections of the place, as one object in the
   page. The sidebar is the site and never changes; this is the place, and it is horizontal.
   Orientation carries the scope, so neither menu needs a label saying which it is. See
   places/_pcard.html and brain/themes.md.

   Three sizes. `banner` is the home tab, and its head is the photo the page wore as a header
   before, so the banner rules above still draw it: it only loses its own corners, because the
   card owns them now. `medium` is any other tab. `slim` is a leaf page, one row.

   The tab row wraps rather than scrolls, which is the same ruling the board categories got and
   for the same reason: a mouse has no way to push a horizontal strip, so a tab past the edge of
   a 1100px window would simply be gone. Under 861px it scrolls instead, because there a finger
   can push it and ten tabs would otherwise stand four lines tall over the board.

   The card clips, so a scrolling row is cut at its edge rather than fading out over the page. */
.pcard { background: var(--card); border-radius: var(--r); box-shadow: 0 1px 2px var(--ink), 0 14px 30px -22px var(--shadow); overflow: hidden; margin-bottom: 14px; }
:root[data-theme="dark"] .pcard { box-shadow: inset 0 0 0 1px var(--line); }
.pcard.banner .hb { border-radius: 0; }
.pcard .pc-head { display: flex; align-items: center; gap: 14px; padding: 15px 18px 0; }
/* the seal or the initials tile, at the size the child cards use, so one place is drawn one way
   wherever it appears. `img.av.seal-of` already lays the white plate under a transparent seal. */
.pc-seal { width: 42px; height: 42px; border-radius: 13px; flex: none; font-size: 14px; }
.pc-titles { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }
.pc-titles h1 { font-size: clamp(21px, 2.4vw, 27px); }
.pc-sub { color: var(--txt-2); font-size: 12.5px; }
.pc-follow { flex: none; }
/* Follow is a plain pill here, not the white one the banner lifts off its photo */
.pc-follow .fol { height: 29px; padding: 0 12px; font-size: 12px; }
/* THE TABS. An underlined menu, and the only one on the page: everything that narrows a list is
   a chip instead, which is why the board categories went back to chips when this row arrived.
   The ink underline, not tangerine: tangerine is the one action on a board, and ten of these
   would out-shout it. Wrapping and scrolling are set above and in the phone band below. */
.ptabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px 0; margin-top: 10px; box-shadow: inset 0 1px 0 var(--line); }
.pcard.banner .ptabs { margin-top: 0; box-shadow: none; }
.ptab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-bottom: 2px solid transparent; color: var(--txt-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ptab:hover { text-decoration: none; color: var(--txt-hi); background: var(--sunk); border-radius: 9px 9px 0 0; }
.ptab.on { color: var(--txt-hi); font-weight: 700; border-bottom-color: var(--txt-hi); }
.ptab.q { color: var(--txt-3); font-weight: 500; }
.ptab .sic { width: 16px; height: 16px; }
/* A leaf page: one row, the place on the left and its sections pushed to the right. It is the
   breadcrumb, so the crumb under it only has to say the section and the category. */
.pcard.slim { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: var(--r2); }
.pcard.slim .pc-head { flex: none; padding: 5px 0; gap: 10px; }
.pcard.slim .pc-seal { width: 28px; height: 28px; border-radius: 9px; font-size: 10.5px; }
.pc-name { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--txt-hi); white-space: nowrap; }
.pcard.slim .ptabs { flex: 1 1 auto; min-width: 0; justify-content: flex-end; padding: 0; margin: 0; box-shadow: none; }
.pcard.slim .ptab { height: 34px; font-size: 12px; padding: 0 8px; border-bottom: 0; border-radius: 9px; }
.pcard.slim .ptab .sic { display: none; }
.pcard.slim .ptab.on { background: var(--sunk); }
/* the crumb that follows a slim card names the section and the category, nothing above them */
.pcard + .crumbs { margin-top: -4px; }

/* The banner, on every page of a place and on the country boards. The place has its photo, its
   name, the line saying what it is, and Follow. The credit stays: the licence needs it wherever
   the photo is shown. Two classes, so the phone rule below cannot put the tall min-height back.
   The home tab wore a tall one until 2026-09-21; one header everywhere is worth more than the
   extra photo. Only the facts row under the name belongs to the home tab. */
/* The whole country has no one photo, so its banner is the palette itself. */
.hb.ph { background-image: linear-gradient(120deg, #f2610d 0%, #ffd23f 46%, #00c2b8 100%); }
.hb.ph::after { background: linear-gradient(180deg, rgba(20,32,58,.10) 0%, rgba(20,32,58,.72) 100%); }
.hb.short { min-height: 176px; padding: 22px 26px; align-items: center; border-radius: 22px; }
/* a strip is nearly all photo, so the wash has to start at the top edge. The tall banner
   can hold its text over a dark foot; there is no foot left here. */
.hb.short::after { background: linear-gradient(180deg, rgba(20,32,58,.42) 0%, rgba(20,32,58,.80) 100%); }
.hb.short h1 { font-size: clamp(26px, 3vw, 34px); }
/* the country banner carries no seal and no facts row, so it sits a little lower */
.hb.ph, .hb.ph.short { min-height: 150px; }
.hb.short .seal { width: 46px; height: 46px; }
.hb.short .cap { top: 10px; right: 112px; padding: 5px 9px; }
.hb.short .cap b { display: none; }
.hb.short .cap small { font-size: 10px; }

/* facts as a definition list, for answer engines */
.facts { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 0; font-size: 12.5px; color: var(--txt-2); }
.facts div { display: flex; gap: 6px; flex-wrap: wrap; }
.facts dt { color: var(--txt-3); margin: 0; }
.facts dd { margin: 0; font-family: var(--mono); color: var(--txt-hi); font-weight: 500; }

/* surfaces */
/* A card grid counts its own columns (2026-09-22). It was `repeat(2|3, 1fr)` with a media query
   to drop a column, and a media query reads the window, not the column the cards are in. The
   sidebar takes 250px and the page 52px of padding, so on a desktop the cards have 302px less
   than the query believes: at a 900px window three cards shared 598px and came out 175px wide.
   `auto-fit` with a floor asks the row itself, so there is no width at which this can be wrong.
   `min(100%, Npx)` keeps the floor from overflowing a column narrower than N. */
/* Read the floor inside out: a track is never narrower than a full share of the row (so two
   never becomes four on a wide screen and the names keep their meaning), never narrower than
   the card's own minimum, and never wider than the row itself (so a column under that minimum
   holds one card instead of overflowing). The share subtracts the gaps the row will carry. */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, (100% - 12px) / 2)), 1fr)); gap: 12px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(258px, (100% - 24px) / 3)), 1fr)); gap: 12px; align-items: start; }
.col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.tile { background: var(--sunk); border-radius: var(--r2); padding: 16px 18px; display: grid; gap: 8px; min-width: 0; align-content: start; }
.tile.lift { background: var(--card); box-shadow: 0 1px 2px var(--ink), 0 14px 30px -22px var(--shadow); }
a.tile:hover { text-decoration: none; box-shadow: 0 1px 2px var(--ink), 0 18px 34px -20px var(--shadow); }

/* a card heading that links: the title keeps the ink colour of the heading */
.tile h2 a { color: inherit; }
.more { font-size: 12.5px; font-weight: 600; }

/* home: the Constellation (2026-09-23). The promise and what a town has on the left, the
   country drawn as its towns on the right; `manage.py build_dots` writes the drawing. Each dot is
   a zero-length round stroke, so its size is the stroke width and its colour is the stroke. */
.cons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px 64px; align-items: center; padding: 18px 0 8px; }
.cons-say { display: grid; gap: 22px; min-width: 0; align-content: start; }
.cons h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 900; letter-spacing: -.045em; line-height: 1.02; }
.cons-lede { color: var(--txt-2); font-size: 17px; max-width: 46ch; margin: 0; }
.cons-find { position: relative; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px var(--ink), 0 14px 30px -22px var(--shadow); color: var(--txt-2); }
.cons-find svg { width: 19px; height: 19px; flex: none; }
.cons-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 16px; color: var(--txt-hi); outline: none; }
.cons-find:focus-within { box-shadow: 0 0 0 2px var(--tang), 0 14px 30px -22px var(--shadow); }
.cons-find .sug { left: 0; width: 100%; }
.cons-n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 6px 0 0; }
.cons-n div { display: flex; flex-direction: column; gap: 2px; }
.cons-n dd { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: -.03em; color: var(--txt-hi); }
.cons-n dt { font-size: 13px; color: var(--txt-2); }
.cons-map { margin: 0; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.dots { display: block; width: 100%; max-width: 360px; height: auto; }
.dots use { fill: none; stroke-linecap: round; stroke-width: 4; stroke: var(--dot); transition: stroke .12s, stroke-width .12s, opacity .12s; }
.dots use.hit { stroke: transparent; stroke-width: 16; }
/* The island groups take the colours of mark 07H (templates/places/_brand.html). Gold is a step
   deeper on the light page, where #fcd116 dots fade into the background; blue is lifted on dark. */
.dr.luzon, .cons-key .luzon { --dot: #0038a8; }
.dr.visayas, .cons-key .visayas { --dot: #e8b400; }
.dr.mindanao, .cons-key .mindanao { --dot: #ce1126; }
:root[data-theme="dark"] :is(.dr.luzon, .cons-key .luzon) { --dot: #5b7cff; }
:root[data-theme="dark"] :is(.dr.visayas, .cons-key .visayas) { --dot: #fcd116; }
:root[data-theme="dark"] :is(.dr.mindanao, .cons-key .mindanao) { --dot: #ef3b52; }
/* a region you point at lights up and the other seventeen step back */
.dots:has(.dr:is(:hover, :focus-visible)) .dr:not(:hover, :focus-visible) use { opacity: .3; }
.dr:is(:hover, :focus-visible) use:not(.hit) { stroke: var(--txt-hi); stroke-width: 5.5; }
.dr:focus { outline: none; }
.cons-map figcaption { display: grid; gap: 6px; justify-items: center; text-align: center; }
.cons-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.cons-key a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--txt-2); }
.cons-key b { color: var(--txt-hi); }
.cons-key i { width: 10px; height: 10px; border-radius: 999px; background: var(--dot); }
@media (max-width: 1000px) {
  .cons { grid-template-columns: minmax(0, 1fr); }
  .cons-map .dots { max-width: 320px; }
}
@media (max-width: 560px) {
  .cons .cons-n { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the drawing is 450px wide of itself, so say it may shrink below that */
.phmap { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; padding: 0 22px; }

/* One shade per region, so no two that touch share a colour. Both the map and its legend read it. */
.rg.tang, .lg.tang, .sw.tang { --rg: var(--tang); }
.rg.tang-2, .lg.tang-2, .sw.tang-2 { --rg: #f7a06e; }
.rg.tang-3, .lg.tang-3, .sw.tang-3 { --rg: #fbd0b6; }
.rg.sun, .lg.sun, .sw.sun { --rg: var(--sun); }
.rg.sun-2, .lg.sun-2, .sw.sun-2 { --rg: #ffdb65; }
.rg.sun-3, .lg.sun-3, .sw.sun-3 { --rg: #ffe48c; }
.rg.aqua, .lg.aqua, .sw.aqua { --rg: var(--aqua); }
.rg.aqua-2, .lg.aqua-2, .sw.aqua-2 { --rg: #66dad4; }
.rg.aqua-3, .lg.aqua-3, .sw.aqua-3 { --rg: #b3edea; }
/* the stroke hides the seams between the provinces a region is drawn from */
.rg path { fill: var(--rg); stroke: var(--rg); stroke-width: .8; transition: fill .12s, stroke .12s; }
.rg:hover path, .rg:focus path { fill: var(--txt-hi); stroke: var(--txt-hi); cursor: pointer; }

/* The name: a bubble with its point on the region. It is drawn in the map's own units, it shows
   with no delay, and it sits after all 18 shapes so nothing can cover it. */
.tips { pointer-events: none; }
.tip { opacity: 0; transition: opacity .12s; filter: url(#tip-lift); }
.tip path { fill: var(--card); stroke: var(--txt-hi); stroke-width: 1.5; }
.tip text { fill: var(--txt-hi); font-family: var(--display); font-size: 15px; font-weight: 700; text-anchor: middle; }

/* Hover a chip and its region lights up, hover the region and its chip does, and either way
   the name shows. :has() is the only way CSS can pair two elements by name, so every region
   needs a selector of its own. Without :has() the pointer still lights what it is on. */
.map:has(.r-ilocos:is(:hover, :focus-visible)) :is(.rg.r-ilocos path, .tip.r-ilocos), .map:has(.r-car:is(:hover, :focus-visible)) :is(.rg.r-car path, .tip.r-car),
.map:has(.r-cagayan-valley:is(:hover, :focus-visible)) :is(.rg.r-cagayan-valley path, .tip.r-cagayan-valley), .map:has(.r-central-luzon:is(:hover, :focus-visible)) :is(.rg.r-central-luzon path, .tip.r-central-luzon),
.map:has(.r-ncr:is(:hover, :focus-visible)) :is(.rg.r-ncr path, .tip.r-ncr), .map:has(.r-calabarzon:is(:hover, :focus-visible)) :is(.rg.r-calabarzon path, .tip.r-calabarzon),
.map:has(.r-mimaropa:is(:hover, :focus-visible)) :is(.rg.r-mimaropa path, .tip.r-mimaropa), .map:has(.r-bicol:is(:hover, :focus-visible)) :is(.rg.r-bicol path, .tip.r-bicol),
.map:has(.r-western-visayas:is(:hover, :focus-visible)) :is(.rg.r-western-visayas path, .tip.r-western-visayas), .map:has(.r-negros-island:is(:hover, :focus-visible)) :is(.rg.r-negros-island path, .tip.r-negros-island),
.map:has(.r-central-visayas:is(:hover, :focus-visible)) :is(.rg.r-central-visayas path, .tip.r-central-visayas), .map:has(.r-eastern-visayas:is(:hover, :focus-visible)) :is(.rg.r-eastern-visayas path, .tip.r-eastern-visayas),
.map:has(.r-zamboanga:is(:hover, :focus-visible)) :is(.rg.r-zamboanga path, .tip.r-zamboanga), .map:has(.r-northern-mindanao:is(:hover, :focus-visible)) :is(.rg.r-northern-mindanao path, .tip.r-northern-mindanao),
.map:has(.r-davao:is(:hover, :focus-visible)) :is(.rg.r-davao path, .tip.r-davao), .map:has(.r-soccsksargen:is(:hover, :focus-visible)) :is(.rg.r-soccsksargen path, .tip.r-soccsksargen),
.map:has(.r-caraga:is(:hover, :focus-visible)) :is(.rg.r-caraga path, .tip.r-caraga), .map:has(.r-barmm:is(:hover, :focus-visible)) :is(.rg.r-barmm path, .tip.r-barmm) { fill: var(--txt-hi); stroke: var(--txt-hi); opacity: 1; }
.map:has(.r-ilocos:is(:hover, :focus-visible)) .lg.r-ilocos, .map:has(.r-car:is(:hover, :focus-visible)) .lg.r-car,
.map:has(.r-cagayan-valley:is(:hover, :focus-visible)) .lg.r-cagayan-valley, .map:has(.r-central-luzon:is(:hover, :focus-visible)) .lg.r-central-luzon,
.map:has(.r-ncr:is(:hover, :focus-visible)) .lg.r-ncr, .map:has(.r-calabarzon:is(:hover, :focus-visible)) .lg.r-calabarzon,
.map:has(.r-mimaropa:is(:hover, :focus-visible)) .lg.r-mimaropa, .map:has(.r-bicol:is(:hover, :focus-visible)) .lg.r-bicol,
.map:has(.r-western-visayas:is(:hover, :focus-visible)) .lg.r-western-visayas, .map:has(.r-negros-island:is(:hover, :focus-visible)) .lg.r-negros-island,
.map:has(.r-central-visayas:is(:hover, :focus-visible)) .lg.r-central-visayas, .map:has(.r-eastern-visayas:is(:hover, :focus-visible)) .lg.r-eastern-visayas,
.map:has(.r-zamboanga:is(:hover, :focus-visible)) .lg.r-zamboanga, .map:has(.r-northern-mindanao:is(:hover, :focus-visible)) .lg.r-northern-mindanao,
.map:has(.r-davao:is(:hover, :focus-visible)) .lg.r-davao, .map:has(.r-soccsksargen:is(:hover, :focus-visible)) .lg.r-soccsksargen,
.map:has(.r-caraga:is(:hover, :focus-visible)) .lg.r-caraga, .map:has(.r-barmm:is(:hover, :focus-visible)) .lg.r-barmm { background: var(--txt-hi); color: var(--on-hi); }



.legend { display: flex; gap: 5px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sunk); color: var(--txt-hi); font-size: 11.5px; font-weight: 600; }
.lg:hover { background: var(--txt-hi); color: var(--on-hi); text-decoration: none; }
.lg i { width: 9px; height: 9px; border-radius: 3px; background: var(--rg); flex: none; }

/* lists */
.list { display: grid; gap: 2px; }
.li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); align-items: start; }
.list > .li:first-child { border-top: 0; padding-top: 2px; }
.li i { font-style: normal; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; font-family: var(--mono); }
.li i.tang { background: var(--tang); color: var(--tang-on); } .li i.sun { background: var(--sun); color: var(--sun-on); }
.li i.aqua { background: var(--aqua); color: var(--aqua-on); } .li i.grape { background: var(--grape); }
.li i.dark { background: var(--txt-hi); color: var(--on-hi); } .li i.sunk { background: var(--sunk); color: var(--txt-hi); }
.li b { color: var(--txt-hi); font-weight: 600; display: block; }
.li span { color: var(--txt-2); font-size: 12.5px; }
/* The children of a place: one card each, so the list of towns is the page's front door and not
   a column of small print. The card carries the official seal where there is one. Coverage is
   68% of provinces and 52% of cities but only 18% of municipalities, so the initials tile is
   the common case on a province page, not the exception, and it has to look deliberate. */
.towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 8px; }
.town { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: var(--r2); background: var(--sunk); color: var(--txt-hi); font-size: 13px; }
.town:hover { text-decoration: none; background: var(--line); }
.town > div { min-width: 0; }   /* without this the name cannot be clipped and the card grows */
.town b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.town span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.town .cap { font-style: normal; color: var(--tang-ink); }
.town .av { width: 38px; height: 38px; border-radius: 13px; font-size: 12px; }
/* a seal is line art, often on a transparent ground, so it needs its own white plate or it
   disappears into a dark card. `contain`, not `cover`: this is an emblem, not a photograph. */
img.av.seal-of { background: #fff; object-fit: contain; padding: 3px; }

/* a plain three-column list of names, for the barangays, which have no page and no seal */
.names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(210px, (100% - 40px) / 3)), 1fr)); gap: 0 20px; }
.name-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--txt-hi); }
.name-row b { font-weight: 600; }
.name-row span { font-family: var(--mono); font-size: 10.5px; color: var(--txt-3); white-space: nowrap; }
.letters { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; padding-bottom: 6px; }

/* news and feed rows. The list is `.stream`, not `.feed`: `.feed` is the board frame (2026-09-23). */
.stream { display: grid; }
.item { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.stream > .item:first-child { border-top: 0; padding-top: 0; }
.item .t { font-family: var(--mono); font-size: 11px; color: var(--txt-3); }
.item .h { font-weight: 600; color: var(--txt-hi); min-width: 0; }
.item .h a { color: var(--txt-hi); font-weight: 600; }
.item .h small { display: block; font-weight: 500; color: var(--txt-3); font-size: 11.5px; }
.item .src { font-size: 11px; color: var(--txt-3); white-space: nowrap; }
.item.fresh .h a { color: var(--tang-ink); }
/* A news row carries a thumbnail; the feed of everything you follow does not, so the column is
   on the list and not on .item. The date moved into the line under the headline, next to the
   place, so the row is the picture and then the story. The slot is one fixed square, so a photo,
   a publisher icon and a pair of initials all line their headlines up, and a favicon that is
   wider than it is tall sits inside it rather than stretching. See places/_nmark.html. */
.thumbs .item { grid-template-columns: 64px 1fr auto; gap: 16px; padding: 18px 0; }
/* A row of plain text can sit tight to the heading above it; a row 64px tall cannot, so the
   thumbnail list keeps the padding the first row otherwise drops. */
.thumbs > .item:first-child { padding-top: 10px; }
.thumbs .item .h { line-height: 1.45; }
.thumbs .item .h small { margin-top: 7px; }
.mk { align-self: start; margin-top: -3px; display: block; }
.mk .av { width: 64px; height: 64px; border-radius: 16px; font-size: 18px; }
img.av.ico { background: var(--sunk); object-fit: contain; padding: 10px; }

/* chips and buttons */
/* A chip narrows the list you are looking at, and that is the only thing a chip does. One
   style for every board, so Eat and a topic and the applicant list all filter the same way.
   Something you only read is a .tag: sentence case means you can press it, a label does not. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 26px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--txt-hi); background: var(--sunk); white-space: nowrap; cursor: pointer; }
.chip:hover { text-decoration: none; background: var(--line); }
.chip b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--txt-3); }
.chip.on { background: var(--txt-hi); color: var(--on-hi); }
.chip.on b { color: var(--on-hi-2); }
.chip.zero { color: var(--txt-3); font-weight: 500; }
/* The pager under a list (templates/places/_pager.html). It is a row of chips, because a
   page number is the same kind of thing as a filter: press it and the list changes. The end
   of the list is a state, not a missing control, so Back on page one stays in place, dimmed,
   and the row does not jump when the reader reaches either end. */
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; padding: 14px 0; }
.pager .off { color: var(--txt-3); background: var(--sunk); cursor: default; }
.pager .skip { color: var(--txt-3); font-size: 12px; padding: 0 2px; }
/* The jump box: the numbered chips only reach a page or two either way, and a reader who
   wants page 40 of 60 should not press Next twenty times. It is a plain GET form, so it
   works with scripting off like every other control on this site. */
.pager .jump { display: flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; color: var(--txt-3); }
.pager .jump input { width: 56px; height: 26px; border: 0; border-radius: 999px; background: var(--sunk); color: var(--txt-hi); font: inherit; font-size: 12px; font-weight: 600; text-align: center; padding: 0 6px; }
/* A button is what you can do here. Three weights and no more: one filled primary per page,
   an outlined secondary, and a text link. A button is never grey-filled, because a grey pill
   is a section or a filter. Colour is not free either: the strip and the list marks carry the
   section colours, so a button that borrowed one would read as navigation. See brain/themes.md. */
.btn { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tang); color: var(--tang-on); font: inherit; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; }
.btn:hover { text-decoration: none; filter: brightness(.96); }
.btn.line { background: transparent; color: var(--txt-hi); box-shadow: inset 0 0 0 1.5px var(--txt-hi); }
.btn.line:hover { background: var(--txt-hi); color: var(--on-hi); filter: none; }
.btn.text { height: auto; padding: 0 4px; background: none; color: var(--link); font-weight: 600; }
.btn.text:hover { filter: none; text-decoration: underline; text-underline-offset: 3px; }
/* the padlock on a signed-out action. The label stays the verb, so the reader reads one word
   and not a sentence; the lock says a sign-in comes first and the form is still where it goes. */
.btn .lock { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; }
/* Follow is not an action on the page, it is a switch on the place, so it has its own colour.
   Rose sits in none of the four section palettes, so it never doubles as the board you read. */
.fol { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--rose); color: #fff; font: inherit; font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.fol:hover { text-decoration: none; filter: brightness(.96); }
.fol.on { background: transparent; color: var(--rose); box-shadow: inset 0 0 0 1.5px var(--rose); }
.heart { background: var(--sunk); border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--txt-2); cursor: pointer; justify-self: start; }
.heart.on { background: var(--tang); color: var(--tang-on); }
.heart:disabled { opacity: .55; cursor: not-allowed; }

/* market */
.thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.thumb.blank { background: var(--sunk); }
.price { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--grape-ink); }

/* One job page, in blocks. The card's own 8px gap put the eyebrow, the title, the employer, the
   pay, the facts, the words and the button all the same distance apart, which reads as one
   cramped column. Here the header is one block and the rest are separated, the pay sits at the
   right end of the header where the empty half of the card was, and the facts are
   label-over-value cells with a rule between them instead of an inline run of seven words.

   `jc-`, not `job-`: `.job` further down this file is a row in a list of jobs, a three-column
   grid, and it wins on order. A card wearing that class came out as three columns of text on
   top of each other. */
.tile.jobcard { gap: 20px; padding: 24px 26px; }
.jc-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 28px; }
.jc-t { min-width: 0; display: grid; gap: 7px; }
.jc-t h1 { margin: 0; }
.jc-who { margin: 0; color: var(--txt-2); font-size: 14.5px; }
.jc-who b { color: var(--txt-hi); font-weight: 700; }
/* shrinks and wraps: `flex: none` sized the pay to max-content, so "₱800 a day, plus ₱30 a
   drop" at 28px held one 365px line and pushed a 360px phone sideways */
.jc-pay { flex: 0 1 auto; min-width: 0; display: grid; gap: 4px; justify-items: end; text-align: right; }
/* two classes, so the phone rule that stacks a place page's facts cannot reach these */
.facts.jc-facts { flex-direction: row; margin: 0; gap: 10px 0; }
.facts.jc-facts div { display: grid; gap: 3px; padding: 0 22px; border-left: 1px solid var(--line); }
.facts.jc-facts div:first-child { padding-left: 0; border-left: 0; }
.facts.jc-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.facts.jc-facts dd { font-size: 14px; font-weight: 600; }
.tile.jobcard .body { max-width: 68ch; font-size: 15px; line-height: 1.7; margin: 0; }
.jc-by { margin: 0; padding-top: 4px; border-top: 1px solid var(--line); }
/* A closed job, read at a glance. A full-bleed band at the head of the card, the same near-black
   fill the site uses when something is definite, with a rose dot for the one warm mark on it.
   Under the band the card goes quiet: the pay is an offer that no longer stands, so it loses
   the grape and takes the muted ink, and the lift comes off because the card is not live. */
.jobcard.shut { box-shadow: 0 1px 2px var(--ink); }
/* A div, not a p: `p { max-width: 70ch }` at the top of this file caps every paragraph, and a
   band that stops at 70 characters of mono reads as a broken box, not as a banner. */
.shut-band { margin: -24px -26px 0; padding: 11px 26px; border-radius: var(--r2) var(--r2) 0 0;
  background: var(--txt-hi); color: var(--on-hi); font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center;
  gap: 9px; flex-wrap: wrap; }
.shut-band i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex: none; }
.shut-band b { font-weight: 400; color: var(--on-hi-2); }
.shut-band b::before { content: "\00b7"; margin-right: 9px; }
.jobcard.shut .price { color: var(--txt-3); }
/* the same job or listing once it is over: still readable, plainly not on offer */
.tl.shut { color: var(--txt-3); }
.tl.shut .tl-t a, .tl.shut .tl-n b { color: var(--txt-2); }
.tl.shut .tl-price { color: var(--txt-3); }
.tl.shut i { opacity: .55; }
.card-link.shut .thumb { opacity: .6; }
.card-link.shut .price { color: var(--txt-3); }
.card-link.shut b { color: var(--txt-2); }
@media (max-width: 560px) {
  .jc-pay { justify-items: start; text-align: left; }
  .facts.jc-facts div { padding: 0 14px; }
}
.price.big { font-size: 28px; }
.card-link b { color: var(--txt-hi); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.shots img { border-radius: 10px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  /* one photo would otherwise be as tall as the column is wide, and push the text off screen */
  max-height: 320px; }

/* forum */
.post { padding: 12px 0; border-top: 1px solid var(--line); }
.post p { margin-top: 4px; }
.body { white-space: pre-wrap; }
/* a modal, opened by `:target` like the lightbox above: no JavaScript, and the browser's own
   back button closes it. The sheet behind the card is a link, so a click outside closes it too. */
.modal { display: none; }
.modal:target { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(12, 20, 38, .62); }
.modal-x { position: absolute; inset: 0; }
.modal-c { position: relative; width: min(430px, 100%); max-height: calc(100vh - 40px); overflow: auto; display: grid; gap: 10px; background: var(--card); border-radius: var(--r); padding: 18px 20px; box-shadow: 0 1px 2px var(--ink), 0 24px 60px -30px var(--shadow); }
.modal-c h3 { margin: 0; font-size: 15.5px; }
.modal-c > .meta { margin: -5px 0 2px; }
.modal-c fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1px; }
.modal-c legend { padding: 0 0 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.pick { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; font-size: 13px; cursor: pointer; }
.pick:hover, .pick:focus-within { background: var(--sunk); }
.pick input { accent-color: var(--tang); margin: 0; }
.modal-c textarea { border: 0; border-radius: 12px; background: var(--sunk); padding: 9px 12px; font: inherit; font-size: 13px; color: var(--txt-hi); resize: vertical; }
.modal-f { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; }

/* forms */
.form { display: grid; gap: 12px; }
.form.narrow, .narrow { max-width: 460px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--txt-hi); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number],
.field input[type=url], .field input[type=date], .field textarea, .field select, .form textarea {
  border: 0; border-radius: var(--r2); background: var(--sunk); padding: 10px 14px; font: inherit; font-size: var(--fld); color: var(--txt-hi); width: 100%;
}
.field select[multiple] { min-height: 120px; }
.field ul.errorlist, ul.errorlist { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: 12px; }
.res { display: grid; gap: 2px; }
.res b { color: var(--txt-hi); font-size: 15px; }

/* the footer. Four columns on a desk, stacked on a phone, with the credit line under a hairline
   so the legal text never competes with the links. */
.foot { max-width: 1140px; margin: auto 0 0; padding: 0 26px 36px; color: var(--txt-3); font-size: 12px; display: grid; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 20px; position: relative; }
/* the rule is 98% and centred, so it reads as a line under the page and not as the edge of a box */
.foot-top::before { content: ""; position: absolute; top: 0; left: 1%; width: 98%; height: 1px; background: var(--line); }
.foot-top .brand { font-size: 17px; }
/* Nine plain links on one line, each pair split by a hairline dot. */
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.foot-links a { position: relative; color: var(--txt-2); font-size: 13px; text-decoration: none; white-space: nowrap; }
.foot-links a + a::before { content: "\00b7"; position: absolute; left: -10px; color: var(--txt-3); opacity: .55; }
.foot-links a:hover { color: var(--tang); }

/* the standing pages: About, Contact and the human sitemap. One column of tiles, read width. */
.lede { margin: 6px 0 0; max-width: 62ch; color: var(--txt-2); font-size: 16px; line-height: 1.6; }
.prose { display: grid; gap: 14px; margin-top: 18px; max-width: 760px; }
.prose h2 { margin: 0 0 8px; font-size: 18px; }
.prose p { margin: 0 0 10px; color: var(--txt-2); line-height: 1.68; }
.prose p:last-child { margin-bottom: 0; }
.src { display: grid; gap: 0; margin: 0; }
.src dt { color: var(--txt-hi); font-weight: 700; font-size: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.src dt:first-of-type { padding-top: 0; border-top: 0; }
.src dd { margin: 4px 0 12px; color: var(--txt-2); line-height: 1.62; }
.src dd:last-child { margin-bottom: 0; }
.big-link { font-family: var(--mono); font-size: 17px; }
.big-link a { color: var(--tang); }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 2px 10px; }
.sm { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin-left: -10px; border-radius: 10px; color: var(--txt-2); font-size: 13.5px; text-decoration: none; }
.sm .dot { margin-right: 0; }
.sm:hover { background: var(--sunk); color: var(--txt-hi); }
.dot.grey { background: var(--txt-3); }
.dot.tang-2 { background: #f7a06e; } .dot.grape-2 { background: #8b96ff; }
.dot.ink { background: var(--txt-hi); } .dot.rose { background: var(--rose); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.dot.tang { background: var(--tang); } .dot.sun { background: var(--sun); }
.dot.aqua { background: var(--aqua); } .dot.grape { background: var(--grape); }

/* Talk boards: the rail is the navigation, the list is the page (PLAN.md, Talk is a forum). */
.page.wide { max-width: 1320px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sprite { display: none; }
.spacer { flex-grow: 1; }
/* The tree moved to the right edge (2026-09-22, Ronald's call). The reading column now starts
   at the left margin, where the eye lands, and the way across the country sits where a sidebar
   is expected. On a topic page the rail joins the aside column, under the board card, so the
   thread never has two narrow columns beside it. */
.talk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.talk:has(> .rail) { grid-template-columns: minmax(0, 1fr) 252px; }
.talk > .rail:not(.convs) { order: 2; }
.talk.with-aside { grid-template-columns: minmax(0, 1fr) 288px; }
.talk.with-aside > .rail { grid-column: 2; }
.side { display: grid; gap: 12px; align-content: start; }

.rail { background: var(--card); border-radius: var(--r); padding: 14px; box-shadow: 0 1px 2px var(--ink), 0 14px 30px -22px var(--shadow); position: sticky; top: 12px; }
.rail-h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); margin: 12px 2px 5px; }
.rail-h a { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.rail-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 10px; color: var(--txt); font-weight: 500; font-size: 13px; }
.rail-row:hover { text-decoration: none; background: var(--sunk); }
/* Where you are, not what you are reading. The section above wears the solid dark pill, so the
   open region takes the quiet fill and a bar down its left edge instead: two kinds of "on"
   in one column read as two pages you are on at once (Ronald, 2026-09-22). */
.rail-row.on { background: var(--sunk); color: var(--txt-hi); font-weight: 700; box-shadow: inset 3px 0 0 var(--txt-hi); }
.rail-cut { border-top: 1px solid var(--line); margin-top: 10px; }
/* the open region's children, one level under it. Quieter than a region row: this is the way
   down, and the regions above are the way across. */
.rail-kids { display: grid; gap: 1px; margin: 2px 0 6px 19px; padding-left: 10px; border-left: 1px solid var(--line); }
.rail-kid { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; color: var(--txt-2); font-size: 12.5px; font-weight: 500; }
.rail-kid:hover { text-decoration: none; background: var(--sunk); color: var(--txt-hi); }
.rail-kid.on { background: var(--sunk); color: var(--txt-hi); font-weight: 700; }
.rail-kid b { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--txt-3); }
.rail-note { padding: 0 8px; }
.sw { width: 10px; height: 10px; border-radius: 4px; flex: none; background: var(--rg, var(--line)); }

/* one row per topic: the mark, the title with its first line, then replies and the last reply */
.board { padding: 4px 18px 12px; gap: 0; }
.tl { display: grid; grid-template-columns: 26px minmax(0, 1fr) 68px 86px; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.board > .tl:first-child { border-top: 0; }
.tl.pin + .tl { border-top-color: var(--txt-3); }
.tl.pin .tl-m .tag { margin-right: 4px; }
.tl i { font-style: normal; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fff; }
.tl i.dark, .mark.dark, .av.dark { background: var(--txt-hi); color: var(--on-hi); }
.tl i.tang, .mark.tang, .av.tang { background: var(--tang); color: var(--tang-on); }
.tl i.sun, .mark.sun, .av.sun { background: var(--sun); color: var(--sun-on); }
.tl i.aqua, .mark.aqua, .av.aqua { background: var(--aqua); color: var(--aqua-on); }
.tl i.grape, .mark.grape, .av.grape { background: var(--grape); color: var(--grape-on); }
.tl i.grey, .mark.grey { background: var(--txt-2); color: var(--on-hi); }
.tl i.tang-2, .mark.tang-2 { background: #f7a06e; color: #fff; }
.tl i.grape-2, .mark.grape-2 { background: #8b96ff; color: #fff; }
.tl-price { color: var(--grape-ink); font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
/* the categories take the row, so the sort sits with the count on the right */
.tl-b { min-width: 0; display: grid; gap: 2px; }
.tl-t { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-t a { color: var(--txt-hi); font-weight: 700; font-size: 14.5px; }
.tl-x { color: var(--txt-3); font-size: 13px; font-weight: 400; }
.tl-m { color: var(--txt-2); font-size: 12px; }
/* a name in a meta line that is also a way somewhere: the place a row sits in, its region, the
   person who posted it (2026-09-22). It wears the line's own colour and says it is a link under the pointer. */
.mlink { color: inherit; font-weight: 600; }
.mlink:hover { color: var(--txt-hi); text-decoration: underline; text-underline-offset: 2px; }
.tl-n { text-align: right; }
.tl-n b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--txt-hi); }
.tl-n span { font-size: 11px; color: var(--txt-2); }
.tl-l { text-align: right; font-size: 11.5px; color: var(--txt-2); }
/* the Talk rows (2026-09-22): the whole card is rows, the pinned welcome tinted edge to edge */
.tb-board { padding: 0; overflow: hidden; }
.tb { grid-template-columns: 34px minmax(0, 1fr) 74px; gap: 13px; padding: 14px 20px; }
.tb.pin { background: color-mix(in srgb, var(--tang) 7%, var(--card)); }
.tb.pin + .tb { border-top-color: var(--line); }
.tb.pin .tag { background: color-mix(in srgb, var(--tang) 14%, var(--card)); color: var(--tang-ink); }
/* A title is a line of its own and the first line of the body sits under it: run together they
   read as one grey paragraph and the title stops being the thing you scan (2026-09-22). */
.tb .tl-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.tb .tl-t a { font-size: 15.5px; }
.tb .tl-x { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; }
.tb .tl-m { margin-top: 5px; font-size: 12.5px; }
.tb .tl-n b { font-weight: 700; }
.tb-board .tb-none { margin: 0; padding: 18px 20px 20px; font-size: 13px; }
.board-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.chip.pale { background: var(--card); }

/* Every board has the same row: what narrows the list, then the one thing you can do, hard
   against the right edge. The action never sits where the filters start, so it is never read
   as one more filter. */
.toolbar { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.toolbar .bline { flex: 1 1 340px; }
.toolbar .acts { margin-left: auto; }
.bline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--txt-3); }
.bline .lbl { margin-right: 2px; }
.bline .gap { width: 14px; }

/* one topic: the opening post, then the thread */
.op { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.op-b { min-width: 0; display: grid; gap: 8px; }
.op-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op .mark { font-style: normal; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; }
.op h1 { font-size: 26px; }
.thread { padding: 4px 18px 14px; gap: 0; }
.thread-h { padding: 10px 0 6px; }
.thread-h b { color: var(--txt-hi); font-size: 13.5px; }
/* a horizontal menu in a board row, the open one underlined on the row's own rule */
.tb-tools { position: relative; }
/* The sort and the count drop to their own line before the categories get squeezed (2026-09-22).
   They are `flex: none`, so on a phone they held about 190px beside a wrapping row and left each
   category a line of its own. The row asks for 300px before it will share the line, and
   `flex-start` keeps the sort beside its first line rather than centred on all of them. */
.tabrow { flex: 1 1 100%; min-width: 0; order: 3; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 9px; }
.tabrow .meta, .tabrow .sorter { flex: none; }
.tabrow .meta { align-self: center; }
/* The categories wrap when the ten will not fit (2026-09-22, Ronald). They used to scroll with
   the scrollbar hidden and a fade on the tail: a mouse has no way to push a horizontal strip, so
   on every window under about 1300px the last categories were simply gone, and the fade that was
   meant to say so fell under the count beside it. A second line is longer; a menu you cannot
   reach is not a menu. The place card's tab row can scroll instead, because it holds ten fixed
   sections a reader learns the order of, not a list that changes with the place. */
.filters { flex: 1 1 300px; min-width: 0; row-gap: 5px; }
.sorter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bline .pair, .tabrow .pair { display: inline-flex; align-items: center; gap: 6px; }
/* A switch, not a chip: "With photos" is not one choice out of a list, it is on or off, and a
   chip that lights up looked like the one category you had picked. The rail fills ink when it is
   on, the same ink a chosen chip wears, so the filter level still has one colour. The knob takes
   the colour of the surface the rail is not, so it reads in both themes. */
.tog { display: inline-flex; align-items: center; gap: 7px; height: 26px; font-size: 12.5px; font-weight: 600; color: var(--txt-2); white-space: nowrap; cursor: pointer; }
.tog i { width: 30px; height: 18px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.tog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(20, 32, 58, .3); transition: transform .15s; }
.tog input:checked + i { background: var(--txt-hi); }
.tog input:checked + i::after { background: var(--on-hi); transform: translateX(12px); }
.tog input:checked ~ span { color: var(--txt-hi); }
.tog input:focus-visible + i { outline: 2px solid var(--tang); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tog i, .tog i::after { transition: none; } }
.bline select, .tabrow select { height: 26px; border: 0; border-radius: 999px; background: var(--sunk); color: var(--txt-hi); font: inherit; font-size: 11.5px; font-weight: 600; padding: 0 8px; cursor: pointer; }

.reply, .folded { padding: 9px 0 7px; border-top: 1px solid var(--line); }
.reply.d1, .reply.d2, .folded.d1, .folded.d2 { border-top: 0; border-left: 2px solid var(--line); padding-left: 13px; }
.reply.d1, .folded.d1 { margin-left: 30px; }
.reply.d2, .folded.d2 { margin-left: 60px; }
.reply-h { display: flex; align-items: center; gap: 8px; }
.reply-h b { color: var(--txt-hi); font-size: 13px; }
.reply .body { font-size: 13.5px; margin-top: 3px; max-width: 76ch; }
.reply-f { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.reply-f .linkish, .reply-f a.linkish { text-decoration: none; font-weight: 600; font-size: 11.5px; }
.reply-f .linkish:hover { text-decoration: underline; }
.op-f { display: flex; justify-content: flex-end; }
.tag { height: 19px; padding: 0 8px; border-radius: 999px; background: var(--sunk); color: var(--txt-2); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; display: inline-flex; align-items: center; }
.tag.sun-ink { color: var(--sun-ink); }
.folded { color: var(--txt-3); font-size: 12px; }
.folded summary { cursor: pointer; }
.folded b { color: var(--txt-2); }
.folded .body { margin-top: 6px; font-size: 13px; }
/* the box opens when its Reply link points at it, which needs no script */
.reply-box { display: none; gap: 8px; margin-top: 8px; }
.reply-box:target { display: flex; }
.reply-box input, .composer input { flex-grow: 1; height: 36px; border: 0; border-radius: 999px; background: var(--sunk); padding: 0 16px; font: inherit; font-size: var(--fld); color: var(--txt-hi); }
.composer { display: flex; align-items: center; gap: 10px; }

.votes { display: inline-flex; align-items: center; gap: 2px; background: var(--sunk); border-radius: 999px; padding: 2px 4px; }
.votes b { min-width: 22px; text-align: center; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--txt-hi); }
.votes .v { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--txt-2); cursor: pointer; }
.votes .v:hover { background: var(--line); }
.votes .v.up { color: var(--tang); }
.votes .v.down { color: var(--grape); }
.votes .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.votes.big { flex-direction: column; gap: 0; background: none; padding: 0; width: 46px; }
.votes.big .v { width: 32px; height: 32px; }
.votes.big .ic { width: 16px; height: 16px; }
.votes.big b { font-size: 15px; }

.near { display: block; padding: 8px 0; border-top: 1px solid var(--line); }
.near:hover { text-decoration: none; }
.near b { display: block; color: var(--txt-hi); font-size: 12.5px; font-weight: 600; }
.near span { font-size: 11px; color: var(--txt-2); }

/* the map card. The iframe only exists on ?map=1, so nothing here loads by itself */
.pin { margin-bottom: 14px; }
.pin-map { width: 100%; height: 320px; border: 0; border-radius: var(--r2); background: var(--sunk); }
.pin-set { border-top: 1px solid var(--line); padding-top: 10px; }
.pin-set input[type=url] { width: 100%; }

/* ---- Jobs, Market, profiles and Messages ---- */
.tl i.aqua-2, .mark.aqua-2, .av.aqua-2 { background: #66dad4; color: var(--aqua-on); }
.thumb.blank { display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--txt-3); text-transform: uppercase; letter-spacing: .1em; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }

/* a row that carries a person or an employer: square, two lines, a right-hand column */
.job { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.list > .job:first-child { border-top: 0; }
.job.sold { opacity: .78; }
.job-b { min-width: 0; display: grid; gap: 1px; }
.job-b b { color: var(--txt-hi); font-weight: 600; }
.job-r { text-align: right; display: grid; gap: 1px; }
.pay { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--grape-ink); }
.av { font-style: normal; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--txt-hi); color: var(--on-hi); font-family: var(--mono); font-size: 11px; font-weight: 500; flex: none; }
.av.sunk { background: var(--sunk); color: var(--txt-hi); }
.av.big { width: 72px; height: 72px; border-radius: 24px; font-size: 22px; }
.av.sm { width: 28px; height: 28px; border-radius: 10px; font-size: 10px; }
img.av { object-fit: cover; }
.shots figure { margin: 0; display: grid; gap: 4px; }
.shots figcaption { font-family: var(--mono); font-size: 10px; color: var(--txt-3); }
.shots figcaption a { color: inherit; font-weight: 400; }
/* a photo, opened. `:target` shows the one the URL names; back, next and close are plain
   links to the other ids, so the browser's own back button closes it */
.shots figure a { display: block; }
.shots figure a img { cursor: zoom-in; }
.lightbox .lb { display: none; }
.lightbox .lb:target { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 12px; padding: 20px; background: rgba(12, 20, 38, .92); }
.lb .sheet { position: absolute; inset: 0; }
.lb img { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r2); background: var(--txt-hi); }
.lb-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; background: var(--card); border-radius: var(--r2); padding: 8px 10px; max-width: 100%; }
.lb-bar .cite { color: var(--txt-2); padding: 0 4px; }
.lb-bar .cite a { color: inherit; font-weight: 400; }

/* the applicant list: the same row, with a message body under the name */
.app { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.list > .app:first-child { border-top: 0; }
.app-b { min-width: 0; display: grid; gap: 2px; }
.app-b b { color: var(--txt-hi); font-weight: 700; }
.app-r { display: grid; gap: 6px; justify-items: end; }
.file { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--sunk); color: var(--txt-hi); font-size: 11.5px; font-weight: 600; }
.file svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Messages: the conversation rail, the pinned listing, the bubbles */
.talk.msgs-page { grid-template-columns: 320px minmax(0, 1fr); }
.rail.convs { padding: 8px; }
.conv { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; color: inherit; }
.conv:hover { text-decoration: none; background: var(--sunk); }
.conv.on { background: var(--txt-hi); color: var(--on-hi); }
.conv.on .av { background: color-mix(in srgb, var(--on-hi) 18%, transparent); color: var(--on-hi); }
.conv-b { min-width: 0; display: grid; gap: 1px; }
.conv-b b { color: var(--txt-hi); font-size: 13px; font-weight: 700; }
.conv-b span { color: var(--txt-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.on .conv-b b { color: var(--on-hi); }
.conv.on .conv-b span, .conv.on .conv-r span { color: var(--on-hi-2); }
.conv-r { display: grid; gap: 3px; justify-items: end; }
.conv-r span { font-family: var(--mono); font-size: 10px; color: var(--txt-3); }
.conv-r em { font-style: normal; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--tang); color: var(--tang-on); font-family: var(--mono); font-size: 10px; display: grid; place-items: center; }
.thread-pane { padding: 0; gap: 0; }
.pane-head { padding: 14px 18px; border-bottom: 1px solid var(--line); margin: 0; }
.pane-foot { padding: 12px 18px; margin: 0; }
.composer.pane-foot { border-top: 1px solid var(--line); }
.ctx { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px; background: var(--sunk); color: inherit; }
.ctx:hover { text-decoration: none; }
.shot { border-radius: 10px; background: var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 9px; color: var(--txt-3); overflow: hidden; }
.shot.small { width: 56px; aspect-ratio: 1 / 1; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.msgs { display: grid; gap: 8px; padding: 16px 18px; }
.day { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); text-align: center; padding: 4px 0; }
.msg { max-width: 68%; justify-self: start; display: grid; gap: 2px; }
.msg p { background: var(--sunk); border-radius: 16px 16px 16px 4px; padding: 9px 13px; font-size: 13.5px; max-width: none; }
.msg span { font-family: var(--mono); font-size: 10px; color: var(--txt-3); padding: 0 4px; }
.msg.me { justify-self: end; }
.msg.me p { background: var(--txt-hi); color: var(--on-hi); border-radius: 16px 16px 4px 16px; }
.msg.me span { text-align: right; }

/* Visit: itinerary rows, stops, the cost card and the support panel */
/* an event is a row (2026-09-22): the photo on the left, the facts on the right */
.ev { grid-template-columns: 200px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.ev-shot { position: relative; display: grid; place-items: center; min-height: 160px; background: var(--sunk); color: var(--txt-3); font-size: 12px; }
.ev-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* no photo yet: the placeholder, one drawing for every kind of card */
.ev-shot.blank, .thumb.blank, .trip-shot.blank { background: var(--sunk) url(/static/placeholder.svg) center / 64px auto no-repeat; color: transparent; }
.ev-b { padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.ev-b .eyebrow { color: var(--tang-ink); }
.ev-b h2, .ev-b > b { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--txt-hi); }
.ev-b p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.ev-links { display: flex; gap: 14px; margin-top: 4px; }
.ev-links .more { font-size: 13px; font-weight: 700; }
.ev-links .dir { font-size: 13px; font-weight: 600; color: var(--txt-2); }
.ev-b .ev-credit { order: 9; margin: 0; font-size: 11.5px; }
/* the year: twelve tiles, lit where an event falls */
/* twelve across where they fit, six or four where they do not: the tiles wrap on their own */
.months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(62px, (100% - 66px) / 12)), 1fr)); gap: 6px; margin-top: 4px; }
.mon { min-width: 0; height: 58px; padding: 8px 10px; border-radius: 12px; background: var(--sunk); color: var(--txt-3); font-family: var(--mono); font-size: 11px; font-weight: 700; display: grid; align-content: start; gap: 2px; }
.mon:hover { text-decoration: none; background: var(--line); }
.mon.on { background: color-mix(in srgb, var(--tang) 14%, var(--card)); color: var(--tang-ink); }
.mon span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-rail { background: none; box-shadow: none; padding: 0; display: grid; gap: 16px; }
.near { display: flex; flex-direction: column; margin-top: -2px; }
.near a { display: flex; align-items: center; height: 30px; font-size: 13px; color: var(--txt); }
.near a:hover { color: var(--txt-hi); text-decoration: none; }
.near a b { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--txt-3); }
.near-rail .note { padding: 0 6px; margin: 0; line-height: 1.5; }
.trip { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.trip:hover { text-decoration: none; }
.trip-shot { width: 96px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--sunk); }
.trip-b { display: grid; gap: 2px; min-width: 0; }
.trip-b b { color: var(--txt-hi); font-family: var(--display); font-size: 15px; }
.trip-n { display: grid; gap: 2px; justify-items: end; text-align: right; }
.trip-n .stars { font-family: var(--display); font-size: 17px; color: var(--txt-hi); }
.stop { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.list > .stop:first-child { border-top: 0; }
.stop-t { font-family: var(--mono); font-size: 11px; color: var(--txt-3); padding-top: 2px; }
.stop-b { display: grid; gap: 1px; min-width: 0; }
.stop-b b { color: var(--txt-hi); font-weight: 600; }
.stop-b span { color: var(--txt-2); font-size: 12.5px; }
.stop-c { font-family: var(--mono); font-size: 12.5px; color: var(--txt-hi); white-space: nowrap; }
.stop-c form { margin-left: 10px; }
/* the dark totals card. `.tile.lift` is two classes, so this one has to be too */
.tile.total { background: var(--txt-hi); }
.total .eyebrow, .total .note { color: var(--on-hi-2); }
.total .price.big { color: var(--on-hi); }
.total-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--on-hi-2); }
.total-row span:last-child { font-family: var(--mono); color: var(--on-hi); }
.support { outline: 2px solid var(--tang); outline-offset: -2px; }
.gcash { display: flex; gap: 14px; align-items: center; }
.gcash img { width: 104px; height: 104px; border-radius: 12px; object-fit: contain; background: var(--sunk); flex: none; }
.gcash .facts { flex-direction: column; gap: 2px; }
.star { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--sunk); color: var(--txt-hi); font-weight: 700; font-size: 13px; cursor: pointer; }
.star.on { background: var(--tang); color: var(--tang-on); }
.star input { accent-color: currentColor; }
/* everything rated rates at the top right of its page (2026-09-22; itineraries and events since
   2026-09-23): five stars that are each a button, the average beside them, then the heart. */
.rate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rate .stars { display: inline-flex; align-items: center; }
.rate .star { height: auto; padding: 0 1px; border: 0; background: none; font-size: 19px; line-height: 1; color: var(--line); }
.rate .star.on { color: var(--sun); }
.rate button.star { cursor: pointer; }
.rate button.star:hover, .rate button.star:focus-visible { color: var(--sun); }
.rate-n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--txt-hi); white-space: nowrap; }
.rate-n small { font-size: 11px; font-weight: 400; color: var(--txt-3); }
.rate .heart { padding: 5px 11px; font-size: 12px; }
/* a page with a column of comments and a narrower column beside it */
.grid2.aside-2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
/* the tags and the rating share the right of the head */
.head-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.menu-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.menu-row b { color: var(--txt-hi); font-weight: 600; }
.menu-p { font-family: var(--mono); font-size: 12.5px; color: var(--txt-hi); }

/* On a phone the column folds: a top row with the site, the box and you, and a bar of four
   at the foot. The sections and the tree open from the bar as sheets: `popover` puts them in
   the top layer and closes them on a tap outside, with no script. */
@media (min-width: 861px) {
  .sidebar .snav, .sidebar .tree { display: flex; position: static; inset: auto; width: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
  /* the place card is on the page at every width, so the sidebar never holds Follow */
  /* the sections and the rail take what is left of the column and scroll together inside it */
  .side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; margin-right: -8px; padding-right: 8px; }
}
@media (max-width: 860px) {
  /* still a flex column, so the footer keeps its margin-top: auto and stays at the
     bottom of a short page; `display: block` here lost that. */
  .shell { flex-direction: column; }
  body { padding-bottom: 64px; }
  .sidebar { width: auto; height: auto; position: static; overflow: visible; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  .sidebar .brand { padding: 0; }
  .sidebar .find { flex: 1; margin: 0; }
  /* a phone has no Ctrl key, and the box is too narrow to lose the width */
  .find .k { display: none; }
  .find .sug { left: 12px; right: 12px; top: 58px; width: auto; }
  .side-cut { display: none; }
  /* a finger can push a strip, so here the place's tabs scroll instead of wrapping: ten of them
     wrapped would stand four lines tall and push the board off the screen */
  /* `scrollbar-width` is the standard property and Chrome honours it, which is why no
     ::-webkit-scrollbar rule follows it here. See the note at the head of this file. */
  .ptabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .side-me { position: static; margin: 0; padding: 0; }
  .side-me .me { width: auto; padding: 0; background: none; }
  .me-name, .me-new { display: none; }
  .side-me .me-dot { display: block; }
  .sidebar .snav:popover-open, .sidebar .tree:popover-open { display: flex; position: fixed; inset: auto 12px 76px 12px; width: auto; margin: 0; padding: 10px; border: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--txt); box-shadow: var(--pop); max-height: 70vh; overflow-y: auto; }
  .sidebar [popover]::backdrop { background: rgba(20,32,58,.35); }
  .bar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--card); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .bar a, .bar button { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: none; color: var(--txt-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .bar a.on { color: var(--txt-hi); font-weight: 700; }
  .bar .me-dot { top: 8px; right: 18px; }
  .memenu { bottom: 76px; left: auto; right: 12px; }
  .page, .flashes, .foot { padding-left: 16px; padding-right: 16px; }
  .follow { top: 12px; right: 12px; }
  /* Follow keeps its corner at every width now, so the credit clears it in the base rule
     above and this band has nothing left to move. */
}
/* THE TWO BANDS BELOW MEASURE THE COLUMN, NOT THE WINDOW (2026-09-22). Read this before you
   add a breakpoint. Over 860px the sidebar takes 250px and the page 26px of padding each side,
   so the content column is the window less 302. Under 861px the sidebar is a top row and the
   column is the window less 32. A plain `max-width` query therefore fires 270px too late on a
   desktop, which is how three cards came to share 598px at a 900px window.

   Content under about 950px: on a phone that is a window of 980, on a desktop one of 1250, and
   861 meets 860, so the two bands join into one number. */
@media (max-width: 1250px) {
  .opening { grid-template-columns: 1fr; } .map { grid-column: 1; grid-row: auto; } .phmap { max-height: 64vh; }
  /* `:has()` carries the weight of its heaviest argument, so `.talk:has(> .rail)` counts as two
     classes and a one-class `.talk` here lost to it at every width: the board kept its 252px
     rail on a 390px phone and the cards beside it came out 160px wide. Named in full, it wins
     on order instead. Same trap as `.grid2.aside-2` and `.tile.total`, see brain/themes.md. */
  .talk, .talk:has(> .rail), .talk.with-aside, .talk.msgs-page { grid-template-columns: minmax(0, 1fr); }
  /* and the rail has to let go of column 2, or grid opens an implicit second track to hold it
     and the one column asked for above becomes two again */
  .talk.with-aside > .rail { grid-column: auto; }
  /* the strip takes the whole row here, so the count reads under the last category instead of
     hanging in the middle of six wrapped lines of them. Eat keeps its chips in a `bline` and not
     a `tabrow`, and needs the same: its Serves select was squeezing into the gap at the end of
     the second line of chips and pushing the last chip to a third. */
  .tabrow .filters, .bline .filters { flex-basis: 100%; }
  .tabrow .meta { align-self: flex-start; }
  /* one column: read first, navigate after, so 18 regions do not sit above the thread */
  .rail { position: static; order: 2; }
  .talk .col { order: 1; }
  .talk .side { order: 3; }
}
/* Content under about 610px: a phone window of 640, or a desktop one of 910. Those two do not
   meet (a 700px window is a phone layout with a 668px column, which is wide enough), so this
   one has to name both bands. The grids above need none of this: they count their own columns. */
@media (max-width: 640px), (min-width: 861px) and (max-width: 910px) {
  .ev { grid-template-columns: 1fr; } .ev-shot { min-height: 120px; }
  /* `.grid2`, `.grid3`, `.towns` and `.months` used to drop a column here and no longer need to.
     `.grid2.aside-2` still does: a 1.5fr-to-1fr split cannot be read off the row the way an even
     grid can. Two classes, because the rule it overrides has two and a media query adds no
     weight of its own: with one class it lost at every width and the aside never collapsed. */
  .grid2.aside-2 { grid-template-columns: minmax(0, 1fr); }
  /* the action leads, full width, so it cannot be mistaken for the filter line under it */
  .toolbar .acts { margin-left: 0; order: -1; width: 100%; }
  .toolbar .acts .btn, .toolbar .acts .fol { flex: 1; justify-content: center; }
  .map-head .dim { display: none; }  /* nobody hovers on a phone */
  .item { grid-template-columns: 1fr; gap: 2px; }
  /* A news row keeps its thumbnail beside the headline and drops the publisher underneath. Two
     classes, because `.thumbs .item` is two: written as `.item` this lost, and the publisher
     held an `auto` column that left a Cebu headline three lines tall in 130px. */
  .thumbs .item { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; }
  .thumbs .item .src { grid-column: 2; }
  /* the caption would sit on top of the name in a single row, so stack the banner */
  .hb { flex-direction: column; align-items: stretch; min-height: 240px; padding: 14px; }
  /* no photo to show, so the country banner stays a band and gives the board the height */
  .hb.ph, .hb.ph.short { min-height: 0; }
  /* the text sits over the middle of the photo here, not just the dark foot */
  .hb::after { background: linear-gradient(180deg, rgba(20,32,58,.35) 0%, rgba(20,32,58,.85) 60%); }
  /* the caption is in flow here but Follow is still pinned to the corner over it, so the credit
     keeps a lane clear on the right and no longer runs under the button */
  .hb .cap, .hb.short .cap { position: static; max-width: none; margin: 0 100px auto 0; align-self: flex-start; }
  .hb-foot { margin-top: 14px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .hb .seal, .hb.short .seal { width: 56px; height: 56px; }
  .tile.seal-card { gap: 14px; }
  .seal-card img { width: 76px; height: 76px; }
  .facts { flex-direction: column; gap: 2px; }
  .hb h1 { font-size: 30px; }
  /* a phone has no room for two right-hand columns, and a clipped title helps nobody */
  .tl { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .tl-t { white-space: normal; }
  .tl-x, .tl-l { display: none; }
  .reply.d1, .folded.d1 { margin-left: 14px; }
  .reply.d2, .folded.d2 { margin-left: 28px; }
  .op { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .msg { max-width: 86%; }
  .app, .job { grid-template-columns: 34px minmax(0, 1fr); }
  .app-r, .job-r { grid-column: 2; justify-items: start; text-align: left; }
  /* an itinerary row on a phone: the picture and the two figures drop under the title */
  .trip { grid-template-columns: 72px minmax(0, 1fr); }
  .trip-shot { width: 72px; height: 56px; }
  .trip-n { grid-column: 2; justify-items: start; text-align: left; }
  .gcash { flex-direction: column; align-items: flex-start; }
}


/* The account panel. `popover` is drawn in the top layer, so the panel is fixed to the corner
   under the bar and needs no z-index or stacking context of its own. */
.memenu { top: auto; right: auto; left: 14px; bottom: 78px; margin: 0; width: 222px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--txt); box-shadow: var(--pop); }
.memenu:popover-open { display: grid; gap: 1px; }
.memenu-h { padding: 6px 10px 6px; margin: 0; font-size: 11.5px; font-weight: 500; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* leaving is not one more place to go, so it stands behind a rule, as in newscura */
.memenu form { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.memenu a, .memenu button { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--txt-hi); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.memenu a:hover, .memenu button:hover { background: var(--sunk); color: var(--txt-hi); text-decoration: none; }
.memenu b { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--tang-ink); }

/* the light/dark switch: the icon, and in the panel the words, name the theme you would get */
.theme svg { width: 15px; height: 15px; flex: none; }
.theme.bare { padding: 0 11px; border: 0; font: inherit; cursor: pointer; }
.theme .i-sun, :root[data-theme="dark"] .theme .i-moon { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: block; }

/* the avatar is the panel's trigger, so it is a button with none of a button's chrome */
.me { position: relative; display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; }
.me-dot { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--tang); box-shadow: 0 0 0 2px var(--card); }
/* the bar wraps on a phone, so 56px from the top would land on it: sit at the foot instead */
@media (max-width: 640px) { .memenu { right: 12px; left: 12px; width: auto; } }

/* the locator on a place page. Shorter than a pin map: this one answers "roughly where", not
   "which corner", and the tile under it still has to be reachable without a scroll. */
.locator { display: block; width: 100%; height: 230px; border: 0; border-radius: var(--r2); background: var(--sunk); margin: 10px 0 8px; }

/* A surface is a fill and a lift, but only where a shadow can be seen. On the Basalt ground
   the card sits 1.10 off the page, so 0 14px 30px of near-black lands on near-black and the
   tile floats on nothing. In the dark the lift becomes a hairline. Inset, so nothing reflows,
   and it leaves the focus outline alone. Light mode is untouched; see brain/themes.md. */
:root[data-theme="dark"] :is(.search input, .tile.lift, .islands a, .rail, .memenu, .modal-c,
                             .lb-bar, .chip.plain, .chip.pale) {
  box-shadow: inset 0 0 0 1px var(--line);
}
:root[data-theme="dark"] :is(a.tile, .islands a):hover { box-shadow: inset 0 0 0 1px var(--txt-3); }

/* A finger is not a cursor (2026-09-22). `pointer: coarse` asks what is pointing, not how wide
   the window is, so a touch laptop and a narrow window on a mouse each get the right answer.
   Only the standing controls grow: a filter chip, a vote, a card's own link out. A link inside
   a sentence keeps its line height, because padding an inline link opens gaps in the paragraph
   around it, and WCAG exempts a link in a block of text for that reason. */
@media (pointer: coarse) {
  .chip { height: 32px; }
  .votes .v { width: 32px; height: 32px; }
  .more, .dir, .ev-links .more, .ev-links .dir { display: inline-flex; align-items: center; min-height: 32px; }
  /* Padding on an inline link grows the box a finger has to hit without moving anything around
     it: an inline box's vertical padding does not enter the line height. So a board row's title,
     a footer link and the mark at the top stay exactly where they are drawn and become 30px to
     tap. A title that wraps to two lines keeps wrapping the same way. */
  .tl-t a, .foot-links a, .brand, .ev-b h2 a, .ev-b > b a, .name-row b a, .src dt a,
  .li b a, .item .h a, .crumbs a, .letters a, .row-head h3 a { padding-block: 7px; }
  /* Anything you type into is 16px here. Safari on iOS zooms the whole page in when a field it
     is about to focus carries text under 16px, and it does not zoom back out afterwards: the
     search box at 13px left you on a page twice its intended width with no way back but a
     pinch. The size is the only fix that keeps the page zoomable; `user-scalable=no` would stop
     the zoom by taking it away from people who need it. Set on the variable, not on `input`,
     so it cannot lose to `.field input[type=password]`. */
  :root { --fld: 16px; }
  /* a select is not typed into, so iOS does not zoom for it, but a menu you pick a filter from
     on a board is a standing control and gets a finger-sized row like the chips above */
  select, .sorter select { font-size: 16px; min-height: 36px; }
}

/* The Feed boards (2026-09-23, design 4 of the boards canvas): Visit, Eat, Talk, Market and Jobs
   share one frame. A head with the search inside the board, a column of cards, and the filters
   in one panel down the right that folds above the list on a narrow screen. `--acc` is the
   section's colour, set on `.feed` and on the head before it, and every lit control in the
   panel and every saved bookmark reads it. */
.bhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bh-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, currentColor 14%, var(--card)); }
.bh-ic .sic { width: 22px; height: 22px; color: inherit; }
.bh-ic.tang { color: var(--tang); } .bh-ic.sun { color: #e8b400; } .bh-ic.ink { color: var(--txt-hi); }
.bh-ic.grape { color: var(--grape); } .bh-ic.grape-2 { color: #8b96ff; } .bh-ic.rose { color: var(--rose); }
.bh-t { display: grid; gap: 1px; }
.bh-t h1 { font-size: 26px; font-weight: 800; }
.bh-find { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px var(--ink), 0 14px 30px -24px var(--shadow); color: var(--txt-2); }
.bh-find:focus-within { box-shadow: 0 0 0 2px var(--acc); }
.bh-find svg { width: 17px; height: 17px; flex: none; }
.bh-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: var(--fld); color: var(--txt-hi); outline: none; }
.bhead .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.acc { height: 44px; padding: 0 18px; font-size: 13.5px; background: var(--acc); color: var(--acc-on); }
.bhead .btn.line { height: 44px; }

.feed, .bhead { --acc: var(--tang); --acc-on: var(--tang-on); }
.feed.sun, .bhead:has(+ .feed.sun) { --acc: var(--sun); --acc-on: var(--sun-on); }
.feed.ink, .bhead:has(+ .feed.ink) { --acc: var(--txt-hi); --acc-on: var(--on-hi); }
.feed.grape, .bhead:has(+ .feed.grape) { --acc: var(--grape); --acc-on: #fff; }
.feed.grape-2, .bhead:has(+ .feed.grape-2) { --acc: #8b96ff; --acc-on: #14203a; }
.feed { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.feed-main { gap: 14px; }
/* the board's main column is a `.col` too, and `.talk .col { order: 1 }` under 1250px put it
   after the panel, so between 1001 and 1250px the cards sat in the 290px track and ran off the
   page (2026-09-23). Two classes, after that rule, so it wins on order. */
.feed > .col { order: 0; }
/* the national mark: the flag's sun in the flag's gold, round where a town's tile is square */
.av.nat { background: var(--sun); color: var(--sun-on); border-radius: 50%; }
.av.nat svg { width: 62%; height: 62%; }
.fside { display: grid; gap: 14px; position: sticky; top: 16px; min-width: 0; }
/* the Visit button over the panel, full width, and the search as the panel's first group, sunk
   into the panel instead of lifted off the page */
.fside > .acts .btn { flex: 1; justify-content: center; }
.fg-find { padding: 12px 0 4px; }
.fpanel .bh-find { height: 40px; background: var(--sunk); box-shadow: none; }

/* the panel: its heading, the chips you can drop, then one group per question */
.fpanel { padding: 16px 20px 6px; gap: 0; }
.fpanel > summary { display: none; }
.fp-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; }
.fp-h h2 { font-size: 17px; font-weight: 800; }
.fp-h a { font-size: 12.5px; font-weight: 600; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchips:has(.chip) { padding-bottom: 12px; }
.fchips .chip b { font-size: 13px; color: var(--txt-2); }
.fg { display: grid; gap: 1px; padding: 14px 0; border-top: 1px solid var(--sunk); }
.fg h3 { font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.fopts { display: grid; gap: 1px; }
.fo { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13.5px; color: var(--txt-hi); }
.fo:hover { text-decoration: none; color: var(--txt-hi); background: var(--sunk); }
.fo i { width: 16px; height: 16px; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.fo.on { font-weight: 700; }
.fo.on i { box-shadow: inset 0 0 0 5px var(--acc); }
.fo.zero { color: var(--txt-3); }
.fo b { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--txt-3); }
.fg select { width: 100%; }
.fsw { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; font-size: 13.5px; color: var(--txt-hi); }
.fsw:hover { text-decoration: none; }
.fsw i { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); transition: background .12s; }
.fsw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px var(--ink); transition: left .12s; }
.fsw.on i { background: var(--acc); }
.fsw.on i::after { left: 17px; background: #fff; }

/* a card: the title's link covers the card, and the links and buttons in it ride above that
   link so Reply, Apply and the bookmark are their own targets */
.fc { position: relative; gap: 10px; padding: 18px 20px; }
.fc h2 { font-size: 19px; font-weight: 800; line-height: 1.2; }
.fc-link { color: inherit; }
.fc-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fc:hover { box-shadow: 0 1px 2px var(--ink), 0 18px 34px -20px var(--shadow); }
.fc .fc-link:hover { text-decoration: none; }
.fc a:not(.fc-link), .fc .save { position: relative; z-index: 1; }
.fc.pin { background: color-mix(in srgb, var(--acc) 7%, var(--card)); }
.fc-who { display: flex; align-items: center; gap: 10px; }
.fc-by { display: grid; line-height: 1.35; font-size: 13.5px; font-weight: 700; min-width: 0; }
.fc-by .meta { font-weight: 400; }
/* a topic names who and where on one line; a job card keeps its title over its employer */
.fc-by.one { display: block; flex: 1; width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-cat { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); white-space: nowrap; }
.fc-x { margin: 0; color: var(--txt); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-foot .gap, .fc-top .gap { flex: 1; }
.fc-foot .btn { height: 36px; }
/* What a card is, on the Visit board's All tab, where places, events and itineraries share one
   list (2026-09-23). Each type has its own drawing and its own colour (Ronald): a place is the
   Visit tangerine, an event rose and an itinerary moss, the two tones the sidebar already uses
   and none of the four section colours. `--t` is the tint, `--ti` the ink on it. */
.ftype { --t: var(--tang); --ti: var(--tang-ink); height: 22px; padding: 0 9px 0 7px; gap: 5px; border-radius: 999px; display: inline-flex; align-items: center; background: color-mix(in srgb, var(--t) 15%, var(--card)); color: var(--ti); font-size: 12px; font-weight: 700; }
.ftype.ev { --t: var(--rose); --ti: var(--rose); }
.ftype.it { --t: #3fae6f; --ti: #1d7f49; }
:root[data-theme="dark"] .ftype.it { --ti: #5fd08f; }
.ftype .sic { width: 14px; height: 14px; color: inherit; }
.fc-price { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--txt-hi); white-space: nowrap; }
.fc-pay { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--txt-hi); margin-right: 4px; }
/* a card with a picture: the photo on the left, the words beside it */
.fc.media { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 14px; }
.fc-shot { width: 100%; height: 100%; min-height: 160px; max-height: 210px; object-fit: cover; border-radius: 14px; background: var(--sunk); display: grid; place-items: center; color: var(--txt-3); font-family: var(--mono); font-size: 11px; }
.fc-b { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 4px 4px 0 0; }
.fc-tile { width: 48px; height: 48px; border-radius: 15px; font-size: 15px; }

/* the bookmark: an outline until saved, then filled in the section's colour and named */
.save-f { display: contents; }
.save { height: 36px; min-width: 36px; padding: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--txt-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.save:hover { color: var(--txt-hi); text-decoration: none; }
.save svg { width: 16px; height: 16px; fill: none; }
.save span { display: none; }
.save.on { padding: 0 12px 0 10px; box-shadow: none; background: color-mix(in srgb, var(--acc, var(--tang)) 16%, var(--card)); color: var(--txt-hi); }
.save.on svg { fill: var(--acc, var(--tang)); stroke: var(--acc, var(--tang)); }
.save.on span { display: inline; }
.side-n { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--txt-2); }
.saved-g { gap: 4px; }
.saved-r { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sunk); }
.saved-r .meta { margin-right: auto; }

/* The Talk board as the community feed (design B of the Talk canvas, Ronald, 2026-10-23,
   raymundo05/pinasdex#13). `.seg` is a segmented control: National | Regional in the head, the
   order over the list. Every category has its own colour `--t`, on its square in the list down
   the right and on the pill of its cards; no two in one tab share one. */
.seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--sunk); overflow-x: auto; scrollbar-width: none; }
.seg a { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 13.5px; font-weight: 600; color: var(--txt-2); white-space: nowrap; }
.seg a:hover { text-decoration: none; color: var(--txt-hi); }
.seg a.on { background: var(--card); color: var(--txt-hi); box-shadow: 0 1px 2px var(--ink); }
.bhead .bh-find { flex: 0 1 280px; margin-left: auto; }
/* every board's action is ink, as on Talk; the section colour stays on the lit controls */
.bhead .btn.acc { background: var(--txt-hi); color: var(--on-hi); }
.feed .fside { position: static; }
.fside .tile > h2 { font-size: 15px; font-weight: 800; }

.feed-main > .seg { align-self: flex-start; justify-self: start; }
.fc.tv { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 18px 20px 14px 10px; }
.fc.tv h2 { font-size: 18px; }
.fc .votes { position: relative; z-index: 1; align-self: start; }
.tv-b { display: grid; gap: 8px; min-width: 0; }
.sq { width: 10px; height: 10px; flex: none; display: block; border-radius: 3px; background: var(--t, var(--txt-3)); }
/* the pill: the category's colour as a tint, and its name in the same colour pulled toward the
   page's ink, so it reads darker on a light card and lighter on a dark one */
.cpill { height: 26px; padding: 0 11px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; background: color-mix(in srgb, var(--t, var(--txt-3)) 16%, var(--card)); color: color-mix(in srgb, var(--t, var(--txt-3)) 55%, var(--txt-hi)); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tv-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 13.5px; }
.tv-meta > .mlink { color: var(--txt-2); }
.tv-n { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--txt-2); }
.tv-n .sic { width: 16px; height: 16px; }
.bhead .bh-t h1 { font-size: 30px; }
.c-all, .t-ink { --t: var(--txt-hi); }
.t-grape { --t: var(--grape); } .t-aqua { --t: var(--aqua); } .t-rose { --t: var(--rose); }
.t-tang { --t: var(--tang); } .t-slate { --t: #6b83ad; } .t-sun { --t: #e8b400; }
.t-moss { --t: #3fae6f; } .t-peach { --t: #f7a06e; } .t-violet { --t: #8b6cf0; }
.c-general, .c-kahitano { --t: var(--txt-3); }
.c-politika, .c-happenings { --t: var(--grape); }
.c-govt, .c-meet { --t: var(--aqua); }
.c-modus { --t: var(--rose); }
.c-ofw, .c-transport { --t: var(--tang); }
.c-tech, .c-questions { --t: #6b83ad; }
.c-showbiz, .c-food { --t: #e8b400; }
.c-sports { --t: #3fae6f; }
.c-life, .c-recommend { --t: #f7a06e; }
.c-akobamali, .c-others { --t: #8b6cf0; }

.cats { padding: 10px; gap: 2px; }
.cats.tile > h2 { padding: 6px 10px 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); }
.ci { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--txt-hi); }
.ci:hover { text-decoration: none; color: var(--txt-hi); background: var(--sunk); }
.ci.on { background: var(--txt-hi); color: var(--on-hi); }
.ci.on .sq { box-shadow: 0 0 0 1.5px var(--on-hi); }
.ci.zero { color: var(--txt-2); font-weight: 500; }
.ci b { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--txt-2); }
.ci.on b { color: var(--on-hi-2); }
.trend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: t; }
.trend li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; counter-increment: t; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.trend li::before { content: counter(t); grid-row: span 2; font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--tang-ink); }
.trend a { color: var(--txt-hi); }
.trend .meta { font-size: 12px; font-weight: 400; }
/* a job: the employer's tile down the left, where a topic has its vote */
.fc.jc { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
.tv-n .st, .tv-n .ht { width: 16px; height: 16px; flex: none; }
.tv-n .st { fill: #e8b400; }
.tv-n .ht { color: var(--rose); }
.fc .btn.acc { height: 36px; background: var(--txt-hi); color: var(--on-hi); }
/* Coming up: the date as a small tile, then the name and the town */
.soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.soon li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.soon-d { grid-row: span 2; display: grid; place-items: center; align-content: center; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--rose) 14%, var(--card)); color: var(--txt-hi); font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.soon-d b { font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1; }
.soon a { color: var(--txt-hi); }
.soon .meta { font-size: 12px; font-weight: 400; }
/* words a screen reader says and the eye does not need, like what a bare count counts */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prices { margin: 0 0 10px; display: grid; gap: 6px; font-size: 13.5px; }
.prices div { display: flex; justify-content: space-between; gap: 12px; }
.prices dt { color: var(--txt); }
.prices dd { margin: 0; font-family: var(--mono); color: var(--txt-hi); }
.rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; color: var(--txt); }

@media (max-width: 1000px) {
  .feed.feed { grid-template-columns: minmax(0, 1fr); }
  .fside.fside { position: static; order: -1; }
  .fpanel > summary { display: block; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 15px; padding: 2px 0 10px; }
  .fside .near-rail, .fside > .note, .fside > .side-x { display: none; }
  /* the categories as one row that scrolls sideways, above the list */
  .cats.cats { display: flex; overflow-x: auto; scrollbar-width: none; padding: 6px; }
  .cats.tile > h2 { display: none; }
  .ci { flex: none; }
  .ci b { margin-left: 4px; }
}
@media (max-width: 640px) {
  .bhead .bh-find { flex: 1 1 200px; margin-left: 0; }
}
@media (max-width: 640px) {
  .fc.fc.media { grid-template-columns: minmax(0, 1fr); }
  /* a phone needs the width for the foot, and the employer is named in the line above */
  .fc.jc { grid-template-columns: minmax(0, 1fr); }
  .fc.jc > .av { display: none; }
  .fc-shot { max-height: 180px; }
}

/* A YouTube video in a post (2026-09-23): the player under the text, full width of the post, 16:9. */
.yt { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin-top: 10px; border-radius: var(--r2); overflow: hidden; background: var(--sunk); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* the featured video on a home tab (templates/places/_video.html): a thumbnail until play is
   pressed. Two copies are on the page and the width picks one, so a phone has it under About. */
.fv-play { position: relative; display: block; aspect-ratio: 16 / 9; margin: 10px 0 10px; border-radius: var(--r2); overflow: hidden; background: var(--ink, #14203a); }
.fv-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 14px; background: var(--rose); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.fv-play:hover .fv-btn, .fv-play:focus-visible .fv-btn { transform: translate(-50%, -50%) scale(1.08); }
.fv .yt { max-width: none; margin: 10px 0; }
.fv-t { display: block; font-family: Outfit, sans-serif; font-weight: 700; color: var(--txt-hi); }
.fv-by { display: block; font-size: 13px; color: var(--txt-3); margin-top: 2px; }
.fv.stack { display: none; }
@media (max-width: 640px), (min-width: 861px) and (max-width: 910px) { .fv.stack { display: block; } .fv.side { display: none; } }

/* Live TV (2026-10-23): the player, and the channel list beside it, under it on a phone. */
.ltv { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; margin-top: 16px; }
.ltv-stage { display: grid; gap: 6px; min-width: 0; }
.ltv-stage video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r2); }
.ltv-now { margin: 4px 0 0; font-weight: 700; color: var(--txt-hi); }
.ltv-list { padding: 8px 12px; gap: 0; max-height: calc(100vh - 140px); overflow: auto; }
.ltv-list .fg:first-child { border-top: 0; }
.ltv-ch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--txt-hi); text-align: left; cursor: pointer; }
.ltv-ch:hover { background: var(--sunk); }
.ltv-ch.on { background: var(--txt-hi); color: var(--on-hi); }
.ltv-ch.off { cursor: default; color: var(--txt-2); font-weight: 500; }
.ltv-ch img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.ltv-ch .note { margin: 0 0 0 auto; text-align: right; }
.ltv-ch.on .note { color: var(--on-hi-2); }
@media (max-width: 1000px) {
  .ltv { grid-template-columns: minmax(0, 1fr); }
  .ltv-list { max-height: none; }
}