/* BRIDGE Town: the interface's finish (16 Oct polish). Loaded after town.css and runs.css.
   town.css owns where things sit (and the mobile pass); this file owns how they look and move: one ink, one paper,
   one border weight per tier, one focus ring, one press, one easing. The painted world is not touched.
   Tiers: chrome (bars, menus, cards on the painting) 2.5px ink; inside a card 2px; quiet rows 1.5px or none. */
.town-v2 {
  --sk-ink: #17171b; --sk-soft: #4a4a52; --sk-faint: #6e6e76; --sk-paper: #f6f6f2; --sk-white: #fff;
  --sk-hover: #ecebe4; --sk-pick: #e3e2da; --sk-rule: rgba(23, 23, 27, .14); --sk-focus: #3466e8;
  --sk-lift: 0 4px 14px rgba(23, 23, 27, .18);
  --sk-float: 0 2px 4px rgba(23, 23, 27, .08), 0 12px 32px rgba(23, 23, 27, .22);
  --sk-ease: cubic-bezier(.2, .8, .2, 1); --sk-fast: 140ms; --sk-mid: 220ms;
  --sk-r-chrome: 12px; --sk-r-card: 14px; --sk-r-btn: 9px; --sk-r-chip: 999px;
}

/* ---- type: Rubik everywhere in the chrome (the Today strip and the kiosk panel were on the system face) ---- */
.town-v2 .bd-strip, .town-v2 .bd-panel, .town-v2 .bd-btn, .town-v2 .toast, .town-v2 .chooser, .town-v2 .demo-panel,
.town-v2 .panel, .town-v2 .hs-item, .town-v2 .hs-state { font-family: var(--ui, var(--font)); -webkit-font-smoothing: antialiased; }
.town-v2 .ap2-intro, .town-v2 .pq-line, .town-v2 .bd-line, .town-v2 .dlg-text, .town-v2 .demo-body p, .town-v2 .chooser-note { text-wrap: pretty; }
.town-v2 .ap2-name, .town-v2 .pq-name, .town-v2 .bd-name, .town-v2 .demo-head h2, .town-v2 .panel h2, .town-v2 .chooser-card h2 { text-wrap: balance; }
.town-v2 .tb2-chip, .town-v2 .cb-line, .town-v2 .mailboard .counts b { font-variant-numeric: tabular-nums; }

/* ---- motion: every control eases in the same time, and gives under a press ---- */
.town-v2 button, .town-v2 .menu a, .town-v2 .nametag.is-cast, .town-v2 .cityspot {
  transition: background-color var(--sk-fast) var(--sk-ease), border-color var(--sk-fast) var(--sk-ease),
              box-shadow var(--sk-fast) var(--sk-ease), transform var(--sk-fast) var(--sk-ease), filter var(--sk-fast) var(--sk-ease);
}
.town-v2 button:active:not(:disabled), .town-v2 .menu a:active { transform: translateY(1px); }
.town-v2 .citybottom button:active:not(:disabled) { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .town-v2 button, .town-v2 .menu a, .town-v2 .nametag.is-cast, .town-v2 .cityspot { transition: none; } .town-v2 button:active:not(:disabled), .town-v2 .menu a:active { transform: none; } }

/* ---- one focus ring (some controls had none, some gold, some 2px) ---- */
.town-v2 .bd-btn:focus-visible, .town-v2 .bd-x:focus-visible, .town-v2 .x:focus-visible, .town-v2 .dbtn:focus-visible,
.town-v2 .pick:focus-visible, .town-v2 .pq-go:focus-visible, .town-v2 .pq-act:focus-visible, .town-v2 .pq-x:focus-visible,
.town-v2 .citywalk:focus-visible, .town-v2 .bc-link:focus-visible, .town-v2 .chooser-pick:focus-visible, .town-v2 .pchip:focus-visible {
  outline: 3px solid var(--sk-focus); outline-offset: 2px;
}
.town-v2 .x:focus, .town-v2 .bd-x:focus, .town-v2 .pq-go:focus, .town-v2 .pq-act:focus, .town-v2 .bd-btn:focus { outline: none; }

/* ---- the top row: MENU and Sound read as the same object as the city selector ---- */
.town-v2 .hud .box.mini { font-weight: 600; letter-spacing: .02em; }
.town-v2 .hud .box.mini:hover, .town-v2 .cb-city:hover { background: var(--sk-hover); }
.town-v2 .cb-city[aria-expanded="true"] { background: var(--sk-white); }
.town-v2 .cb-city svg { transition: transform var(--sk-mid) var(--sk-ease); }
.town-v2 .cb-list, .town-v2 .snd-menu, .town-v2 .box.menu { box-shadow: var(--sk-float); }
.town-v2 .cb-list button[aria-checked="true"] { background: var(--sk-pick); }
.town-v2 .cb-list button[aria-checked="true"] b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--sk-ink); }
.town-v2 .cb-list button:hover, .town-v2 .snd-sw:hover { background: var(--sk-hover); }
@media (prefers-reduced-motion: no-preference) {
  .town-v2 .cb-list:not([hidden]), .town-v2 .snd-menu:not([hidden]), .town-v2 .box.menu:not([hidden]) { animation: sk-drop var(--sk-mid) var(--sk-ease); transform-origin: top right; }
  .town-v2 .cb-list:not([hidden]) { transform-origin: top left; }
}
@keyframes sk-drop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---- the menu: a clear hover row, the key hint quiet ---- */
.town-v2 .menu :is(button, a) { border-radius: var(--sk-r-btn); }
.town-v2 .menu :is(button, a)[data-panel="close"] { color: var(--sk-soft); font-weight: 500; }
.town-v2 .menu kbd { color: var(--sk-soft); border-color: var(--sk-rule); background: var(--sk-paper); }

/* ---- the bottom buttons and the Today strip: one family (ink pill for the main act, paper for the rest) ---- */
.town-v2 .citywalk:hover { background: #2b2e45; box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 8px 20px rgba(20, 16, 30, .32); }
.town-v2 .citywhole:hover { background: var(--sk-white); }
.town-v2 .bd-btn {
  font: 600 14px/1.2 var(--ui, var(--font)); color: var(--sk-ink); background: var(--sk-paper);
  border: 2px solid var(--sk-ink); border-radius: 10px; box-shadow: 0 3px 10px rgba(23, 23, 27, .18); padding: 8px 14px;
}
.town-v2 .bd-btn:hover { background: var(--sk-white); }
.town-v2 .bd-btn[aria-pressed="true"] { background: var(--sk-ink); color: var(--sk-paper); }
/* inside a panel the same button sits flatter (no shadow on paper) */
.town-v2 .panel .bd-btn, .town-v2 .bd-panel .bd-btn { box-shadow: none; border-width: 1.5px; min-height: 40px; }

/* ---- cards on the painting: person card, plaque, Today and the kiosk sheet share edge, radius and shadow ---- */
.town-v2 .ap2, .town-v2 .plaque, .town-v2 .bd-panel {
  background: var(--sk-paper); color: var(--sk-ink); border: 2.5px solid var(--sk-ink); border-radius: var(--sk-r-card); box-shadow: var(--sk-float);
}
.town-v2 .bd-panel { display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px; }
.town-v2 .bd-name { font: 600 19px/1.2 var(--ui, var(--font)); margin: 0 44px 6px 0; }
.town-v2 .bd-line { color: var(--sk-soft); margin-bottom: 10px; }
.town-v2 .bd-list { color: var(--sk-soft); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  /* the person card's soft edges (.ap2-body): a shadow at the top or foot only while there is more paper that way */
  background: linear-gradient(var(--sk-paper, #f6f6f2) 30%, rgba(246, 246, 242, 0)) top / 100% 18px no-repeat local, linear-gradient(rgba(246, 246, 242, 0), var(--sk-paper, #f6f6f2) 70%) bottom / 100% 18px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(23, 23, 27, .16), rgba(23, 23, 27, 0)) top / 100% 7px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(23, 23, 27, .16), rgba(23, 23, 27, 0)) bottom / 100% 7px no-repeat scroll; }
/* one close button for every card: 36 px square, ink edge, centred glyph (44 px on touch, from town.css) */
.town-v2 .ap2-x, .town-v2 .pq-x, .town-v2 .bd-x, .town-v2 .x {
  width: 36px; height: 36px; min-width: 36px; display: grid; place-items: center; padding: 0;
  font: 600 15px/1 var(--ui, var(--font)); color: var(--sk-ink); background: var(--sk-white); border: 2px solid var(--sk-ink); border-radius: 9px;
}
.town-v2 .bd-x { top: 10px; right: 10px; }
.town-v2 .ap2-x:hover, .town-v2 .pq-x:hover, .town-v2 .bd-x:hover, .town-v2 .x:hover { background: var(--sk-hover); }
@media (pointer: coarse) { .town-v2 .ap2-x, .town-v2 .pq-x, .town-v2 .bd-x, .town-v2 .x { width: 44px; height: 44px; } }
@keyframes pq-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .town-v2 .bd-panel:not([hidden]), .town-v2 .ap2:not([hidden]) { animation: sk-rise var(--sk-mid) var(--sk-ease); }
  .town-v2 .plaque:not([hidden]) { animation: pq-in var(--sk-mid) var(--sk-ease); }
}
@keyframes sk-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---- the person card: the model line keeps its dot on the first line; the main button never breaks in two ---- */
.town-v2 .ap2-model { align-items: flex-start; line-height: 1.3; }
.town-v2 .ap2-dot { margin-top: .32em; }
.town-v2 .ap2-name { letter-spacing: -.005em; }
.town-v2 .ap2-job { margin-top: 8px; }
.town-v2 .ap2-task b { letter-spacing: .1em; }
.town-v2 .ap2-go { min-height: 44px; padding: 10px 16px; border-radius: 10px; box-shadow: 0 2px 0 var(--sk-ink); text-wrap: balance; max-width: 100%; }
.town-v2 .ap2-go:hover { filter: brightness(1.06); box-shadow: 0 3px 0 var(--sk-ink); }
.town-v2 .ap2-again { min-height: 36px; text-underline-offset: 3px; }
.town-v2 .ap2-again:hover { color: var(--sk-ink); }
.town-v2 .ap2-dt { background: var(--sk-pick); color: var(--sk-ink); font-weight: 500; }

/* ---- the plaque: the sign's name, a quiet line, one green door button ---- */
.town-v2 .pq-name { letter-spacing: .05em; }
.town-v2 .pq-go, .town-v2 .pq-act { border-color: var(--sk-ink); box-shadow: 0 2px 0 var(--sk-ink); border-radius: 10px; }
.town-v2 .pq-go:hover, .town-v2 .pq-act:hover { filter: brightness(1.08); box-shadow: 0 3px 0 var(--sk-ink); }

/* ---- toasts: the same paper card, in from the top, out on their own (ui.js removes them at 2.4 s) ---- */
.town-v2 .box.toast {
  background: var(--sk-paper); color: var(--sk-ink); border: 2.5px solid var(--sk-ink); border-radius: var(--sk-r-chrome);
  box-shadow: var(--sk-float); font: 500 16px/1.35 var(--ui, var(--font)); padding: 11px 18px; text-align: center; text-wrap: balance; width: max-content; max-width: min(520px, calc(100vw - 32px));
}
@media (prefers-reduced-motion: no-preference) { .town-v2 .box.toast { animation: sk-toast 2.4s var(--sk-ease) both; } }
@keyframes sk-toast { 0% { opacity: 0; translate: 0 -8px; } 8%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -4px; } }

/* ---- the demo panel (mail run, Ask Bridget, Workshop runs): the v2 card instead of the old double-line box ---- */
.town-v2 .box.demo-panel { background: var(--sk-paper); color: var(--sk-ink); border: 2.5px solid var(--sk-ink); border-radius: var(--sk-r-card); box-shadow: var(--sk-float); padding: 14px 16px; }
body.town-v2.run-on .box.demo-panel { border-radius: 0; border-width: 0 0 0 2.5px; box-shadow: none; }
body.town-v2.run-on { --run-bl: 2.5px; --run-bb: 0px; }   /* the panel's borders, which runs.css subtracts to place the caption */
.town-v2 .demo-head h2 { font: 600 19px/1.2 var(--ui, var(--font)); letter-spacing: .01em; text-transform: none; }
.town-v2 .dbtn { min-height: 44px; border: 2px solid var(--sk-ink); border-radius: 10px; font: 600 15px/1.1 var(--ui, var(--font)); background: var(--sk-white); }
.town-v2 .dbtn:hover:not(:disabled) { background: var(--sk-hover); }
.town-v2 .dbtn.yes { background: var(--sk-ink); border-color: var(--sk-ink); color: var(--sk-paper); }
.town-v2 .demo-strip li { border-width: 1.5px; border-color: var(--sk-rule); font-weight: 500; }
.town-v2 .demo-strip li.on { border-color: var(--sk-focus); }
.town-v2 .demo-body .say .face { border-radius: 9px; }
.town-v2 .demo-body .say .nm { font-weight: 600; letter-spacing: .05em; font-size: 13px; }
.town-v2 .pick { border-width: 2px; border-radius: 12px; padding: 10px 14px; background: var(--sk-white); }
.town-v2 .pick b { font-weight: 600; font-size: 17px; }
.town-v2 .pick span { line-height: 1.4; }
.town-v2 .pick:hover { background: var(--sk-white); border-color: var(--sk-focus); box-shadow: 0 0 0 1px var(--sk-focus); }
.town-v2 .mailboard .counts span, .town-v2 .mrow, .town-v2 .beats li, .town-v2 .lane, .town-v2 .verdict, .town-v2 .check { border-width: 1.5px; border-radius: 8px; }
.town-v2 .mailboard .counts span { padding: 4px 8px; }
.town-v2 .phone-msg { border-width: 2px; }

/* ---- Workshop runs: the caption as the room's subtitle, the output as paper on paper ---- */
body.town-v2.run-on .run-caption { font-weight: 500; border-width: 2.5px; border-radius: var(--sk-r-chrome); box-shadow: var(--sk-float); text-wrap: pretty; padding: 12px 18px; }
@media (max-width: 760px) { body.town-v2.run-on .run-caption { border: 0; box-shadow: none; padding: 10px 2px; } }
.town-v2 .run-sheet { border-radius: 12px; box-shadow: 0 0 0 1.5px var(--sk-rule), 0 2px 8px rgba(23, 23, 27, .06); }

/* ---- the big panel (Omar's house panels, the kiosk's edition) ---- */
.town-v2 .box.panel { padding: 18px 22px 22px; box-shadow: var(--sk-float); }
.town-v2 .panel header { gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1.5px solid var(--sk-rule); }
.town-v2 .hs-item, .town-v2 .hs-state { border: 1.5px solid var(--sk-rule); border-radius: 12px; background: var(--sk-white); }
.town-v2 .hs-paper { border-radius: 10px; box-shadow: 0 0 0 1.5px var(--sk-rule); }
.town-v2 .hs-dim, .town-v2 .hs-empty { color: var(--sk-soft); }
.town-v2 .hs-row { gap: 8px; }
/* today's one thing opens the desk (house/panels.js todayHtml) */
.town-v2 .hs-today { margin: 0 0 14px; padding: 12px 14px; border: 1.5px solid var(--sk-rule); border-radius: 12px; background: var(--sk-white); }
.town-v2 .hs-today h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.town-v2 .hs-today ol { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.town-v2 .hs-today p { margin: 4px 0; font-size: 15px; line-height: 1.45; }
.town-v2 .hs-step { display: block; color: var(--sk-soft); font-size: 14px; }
.town-v2 .hs-open { color: var(--sk-soft); font-size: 14px; }

/* ---- Basecamp: Bridget's cards in the same paper and edge ---- */
.town-v2 .bc-card { border: 2px solid var(--sk-ink); border-radius: 12px; background: var(--sk-white); padding: 12px; gap: 14px; }
.town-v2 .bc-card blockquote { border-left-width: 3px; color: var(--sk-ink); }
.town-v2 .bc-points { font-weight: 600; }
.town-v2 .bc-wheel { border-width: 2px; }
.town-v2 .bc-scene, .town-v2 .bc-cardimg, .town-v2 .bc-gb-art, .town-v2 .bc-pad { border-width: 2px; border-radius: 10px; }
.town-v2 .bc-pen { border-width: 2px; border-radius: 9px; }
.town-v2 .bc-voice { border: 2.5px solid var(--sk-ink); border-radius: var(--sk-r-chrome); background: var(--sk-paper); box-shadow: var(--sk-lift); }
.town-v2 .dlg-choices .bc-micbtn { border-width: 2px; border-radius: 9px; font-weight: 600; }

/* ---- the traveler chooser: the v2 card, the picks lift on hover ---- */
.town-v2 .chooser { background: rgba(246, 246, 242, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.town-v2 .chooser-card { border: 2.5px solid var(--sk-ink); border-radius: 18px; box-shadow: var(--sk-float); background: var(--sk-paper); padding: 26px 24px 20px; }
.town-v2 .chooser-card h2 { font-weight: 600; letter-spacing: -.01em; }
.town-v2 .chooser-pick { border: 2px solid var(--sk-ink); border-radius: 14px; transition: transform var(--sk-mid) var(--sk-ease), box-shadow var(--sk-mid) var(--sk-ease), background-color var(--sk-fast) var(--sk-ease); }
.town-v2 .chooser-pick:hover { transform: translateY(-3px); box-shadow: 0 4px 0 var(--sk-ink); background: var(--sk-white); }
.town-v2 .chooser-pick:focus-visible { box-shadow: 0 4px 0 var(--sk-ink); outline: 3px solid var(--sk-focus); outline-offset: 3px; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .town-v2 .chooser-pick:hover, .town-v2 .chooser-pick:focus-visible { transform: none; } }

/* the person card takes focus when it opens (for screen readers); the card itself is the sign, so no ring round all of it */
.town-v2 .ap2:focus-visible { outline: none; }

/* ================= the phone menu and the person card: Omar's pick B (16 Oct) =================
   The menu is a sheet from the bottom on phones (a dropdown with colored icons on desktop); the person card has a band
   of the person's color across the top with the face standing on it. Positions on phones stay with town.css and sheets.js. */
/* menu icons: one mask per entry */
.town-v2 #menu > :is(button, a)::before {
  content: ""; flex: none; width: 22px; height: 22px; position: static; opacity: 1;
  background: currentColor; -webkit-mask: var(--ic) center / 22px 22px no-repeat; mask: var(--ic) center / 22px 22px no-repeat;
}
.town-v2 #menu [data-panel="demo-mail"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h15A1.5 1.5 0 0 1 21 6.5v11a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5zm2.2.5 6.8 5.2L18.8 7z' fill='black'/%3E%3C/svg%3E"); --tile: #ff7a59; --tint: #ffe3d9; }
.town-v2 #menu [data-panel="demo-swarm"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z' fill='black'/%3E%3C/svg%3E"); --tile: #4b8dff; --tint: #dde9ff; }
.town-v2 #menu [data-panel="map"]        { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.5 8.5 3.5l7 2.5L21 4v14.5L15.5 20.5l-7-2.5L3 20zM9.5 6v10.5l5 1.8V7.8z' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E"); --tile: #2fb36a; --tint: #d8f3e2; }
.town-v2 #menu [data-panel="close"]      { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); --tile: #8b8a84; --tint: #ecebe4; }
.town-v2 #menu kbd { display: none; }
@media (max-width: 599.98px) {
  .town-v2 #menu { top: auto !important; left: 0; right: 0 !important; bottom: 0; width: auto; max-height: none; min-width: 0;
    padding: 26px 16px calc(16px + var(--sa-b, 0px)); gap: 6px; border-radius: 22px 22px 0 0; border-width: 2.5px 0 0;
    box-shadow: 0 0 0 100vmax rgba(246, 246, 242, .55), 0 -10px 30px rgba(23, 23, 27, .18) !important; }
  .town-v2 #menu::before { content: ""; position: absolute; top: 10px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(23, 23, 27, .22); }
  .town-v2 #menu > :is(button, a) { justify-content: flex-start; gap: 16px; min-height: 64px; padding: 10px 12px; font-size: 18px; background: #fff;
    border: 2px solid var(--sk-ink, #17171b); border-radius: 14px; }
  .town-v2 #menu > :is(button, a)::before { width: 40px; height: 40px; border-radius: 12px; -webkit-mask: none; mask: none; background: var(--tile); }
  .town-v2 #menu > :is(button, a) { position: relative; }
  .town-v2 #menu > :is(button, a)::after { content: ""; position: absolute; left: 21px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: #fff;
    -webkit-mask: var(--ic) center / 22px no-repeat; mask: var(--ic) center / 22px no-repeat; }
  .town-v2 #menu [data-panel="close"] { justify-content: center; min-height: 52px; margin-top: 4px; background: none; border-color: rgba(23, 23, 27, .2); }
  .town-v2 #menu [data-panel="close"]::before, .town-v2 #menu [data-panel="close"]::after { display: none; }
  @media (prefers-reduced-motion: no-preference) { .town-v2 #menu:not([hidden]) { animation: sk-sheet .28s cubic-bezier(.2, .8, .2, 1); } }
}
/* desktop keeps the dropdown, with the icons in each entry's color */
@media (min-width: 600px) {
  .town-v2 #menu > :is(button, a) { justify-content: flex-start; gap: 12px; }
  .town-v2 #menu > :is(button, a)::before { color: var(--tile); }
}
.town-v2 #menu .menu-homepage,
.town-v2 #menu [data-panel="town"]       { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 21 11h-2.5v9h-5v-5.5h-3V20h-5v-9H3z' fill='black'/%3E%3C/svg%3E"); --tile: #e0a32a; --tint: #fbecc8; }
/* the menu's Go to: every building with a door as a small chip, two or three across */
.town-v2 #menu .menu-go { padding: 6px 2px 4px; }
.town-v2 #menu .menu-go[hidden] { display: none; }
.town-v2 #menu .menu-h { margin: 4px 8px 6px; font: 600 12px/1 var(--ui, var(--font)); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-soft); }
.town-v2 #menu .menu-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.town-v2 #menu .menu-places button { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; justify-content: flex-start; text-align: left;
  font: 600 14px/1.2 var(--ui, var(--font)); color: var(--sk-ink); background: var(--sk-white); border: 1.5px solid var(--sk-rule); border-radius: 10px; }
.town-v2 #menu .menu-places button::before { content: none; }
.town-v2 #menu .menu-places button:hover, .town-v2 #menu .menu-places button:focus-visible { background: var(--sk-hover); border-color: var(--sk-ink); }
@media (max-width: 599.98px) { .town-v2 #menu { max-height: calc(100dvh - 24px - var(--sa-t, 0px)); overflow: auto; } .town-v2 #menu .menu-places { grid-template-columns: repeat(3, minmax(0, 1fr)); } .town-v2 #menu .menu-places button { font-size: 13px; padding: 6px 8px; } }
@media (min-width: 600px) { .town-v2 #menu { width: 300px; } }
/* Basecamp's way out on screen: the ink button, bottom left on wide screens, bottom middle on phones (out of a sheet's way) */
.town-v2 .camp-back {
  position: fixed; z-index: 6; left: calc(14px + var(--sa-l, 0px)); bottom: calc(18px + var(--sa-b, 0px)); min-height: 48px; padding: 0 20px 0 16px;
  display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--ui, var(--font)); color: #f8f8f4; background: var(--ui-night, #1c1e2c);
  border: 2px solid #f8f8f4; border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 6px 16px rgba(20, 16, 30, .3);
}
.town-v2 .camp-back::before { content: "\2190"; font-size: 18px; }
.town-v2 .camp-back[hidden] { display: none; }
.town-v2 .camp-back:hover { background: #2b2e45; }
.town-v2 .camp-back:focus-visible { outline: 3px solid var(--sk-focus); outline-offset: 2px; }
@media (max-width: 599.98px) { .town-v2 .camp-back { left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--sa-b, 0px)); } .town-v2 .camp-back:active { transform: translateX(-50%) translateY(2px); } }
body.sheet-open .camp-back, body.demo-on .camp-back { visibility: hidden; }
@keyframes sk-sheet { from { transform: translateY(100%); } }
.town-v2 .ap2 { --tint: color-mix(in srgb, var(--fam, #78a0d2) 22%, #fff) }
/* B: a band of the person's color across the top, the face standing on it, the words full width below.
   T-086: the band (.ap2-head) is its own piece and never scrolls; only the details (.ap2-body) scroll, and only when the card
   is taller than the room the screen gives it. A soft edge at the foot of the details shows there is more under it. */
.town-v2 .ap2 { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
html.is-compact .town-v2 .ap2 { overflow: hidden; }
html.is-compact .town-v2 .bd-panel { overflow: hidden; }
.town-v2 .ap2-head { flex: none; position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-content: start;
  background: var(--tint); border-bottom: 2.5px solid rgba(23, 23, 27, .9); }
.town-v2 .ap2-body { flex: 1 1 auto; min-height: 0; display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 0 14px;
  background: linear-gradient(var(--sk-paper, #f6f6f2) 30%, rgba(246, 246, 242, 0)) top / 100% 18px no-repeat local, linear-gradient(rgba(246, 246, 242, 0), var(--sk-paper, #f6f6f2) 70%) bottom / 100% 18px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(23, 23, 27, .16), rgba(23, 23, 27, 0)) top / 100% 7px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(23, 23, 27, .16), rgba(23, 23, 27, 0)) bottom / 100% 7px no-repeat scroll; }
.town-v2 .ap2-face { grid-row: 1 / span 2; width: 96px; height: 96px; margin: 12px 0 12px 14px; border: 2.5px solid rgba(23, 23, 27, .9); border-radius: 10px; background: none; align-self: center; }
.town-v2 .ap2-name { grid-column: 2; align-self: end; margin: 0 56px 2px 0; font-size: 24px; }
.town-v2 .ap2-model { grid-column: 2; align-self: start; margin: 0 56px 0 0; height: 52px; padding-top: 2px; overflow: hidden; color: #2a2a30; }
.town-v2 .ap2-dot { box-shadow: 0 0 0 2px #fff; }
.town-v2 .ap2-intro, .town-v2 .ap2-job, .town-v2 .ap2-task, .town-v2 .ap2-why, .town-v2 .ap2-acts { margin-left: 16px; margin-right: 16px; }
.town-v2 .ap2-intro, .town-v2 .ap2-job { margin-top: 12px; }
.town-v2 .ap2-x { background: rgba(255, 255, 255, .85); }
.town-v2 .ap2-go { width: 100%; }
/* a phone: the card is as short as it can be, so on most screens nothing scrolls (the Downtime tag sits on the first line, not above it) */
html.is-compact .town-v2 .ap2 { line-height: 1.28; }
html.is-compact .town-v2 .ap2-says { margin-top: 8px; }
html.is-compact .town-v2 .ap2-intro, html.is-compact .town-v2 .ap2-job { margin-top: 8px; }
html.is-compact .town-v2 .ap2-task { margin-top: 0; }
html.is-compact .town-v2 .ap2-why { margin-top: 6px; }
html.is-compact .town-v2 .ap2-why p { margin-bottom: 2px; }
html.is-compact .town-v2 .ap2-why .ap2-dt { float: left; margin: 1px 8px 0 0; padding: 2px 9px; line-height: 1.1; }
html.is-compact .town-v2 .ap2-again { margin-top: 0; }
/* a desktop window shorter than the card: the details scroll, the band stays */
html:not(.is-compact) .town-v2 .ap2 { max-height: calc(100dvh - var(--sheet-top, 64px) - 28px); }
@media (max-width: 599.98px) {
  .town-v2 .ap2-head { grid-template-columns: 88px minmax(0, 1fr); }
  .town-v2 .ap2-face { width: 76px; height: 76px; margin-left: 12px; }
  .town-v2 .ap2-name { font-size: 20px; } .town-v2 .ap2-model { height: 42px; font-size: 14px !important; }
  .town-v2 .ap2-intro, .town-v2 .ap2-job, .town-v2 .ap2-task, .town-v2 .ap2-why, .town-v2 .ap2-acts { margin-left: 14px; margin-right: 14px; }
  .town-v2 .ap2-body { padding-bottom: 12px; }
}
/* a short phone (a browser with its bars up, a framed page): a slightly smaller portrait, still whole with room above the hair */
@media (max-width: 599.98px) and (max-height: 700px) {
  .town-v2 .ap2-head { grid-template-columns: 80px minmax(0, 1fr); }
  .town-v2 .ap2-face { width: 68px; height: 68px; }
  .town-v2 .ap2-model { height: 38px; }
}

/* Approve is one green everywhere: the room's mailbox button and the run panel's (demos.js tags it .ok) */
.town-v2 .dbtn.ok { background: #228c44; border-color: var(--sk-ink); color: #fff; }
.town-v2 .dbtn.ok:hover:not(:disabled) { background: #228c44; filter: brightness(1.08); }
/* the Workshop run documents read in Rubik like the rest of the town (the serif belongs to the Bridge Brief) */
.town-v2 .run-doc, .town-v2 .run-doc h2 { font-family: var(--ui, var(--font)); }
.town-v2 .run-doc h2 { font-weight: 600; letter-spacing: -.01em; }

/* Promises due (Omar's mailbox): one comment box per promise; a commented one lights up green with a check, then fades away */
.town-v2 .hs-promises { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.town-v2 .hs-promise { position: relative; padding: 10px 12px; border: 1.5px solid var(--sk-rule); border-radius: 10px; background: var(--sk-paper);
  transition: background-color .3s var(--sk-ease), border-color .3s var(--sk-ease), opacity .6s var(--sk-ease), transform .6s var(--sk-ease); }
.town-v2 .hs-promise-t { margin: 0 0 8px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.town-v2 .hs-promise-row { display: flex; gap: 8px; align-items: flex-end; }
.town-v2 .hs-promise-row textarea { flex: 1; min-width: 0; margin: 0; padding: 8px; border: 1.5px solid var(--sk-rule); border-radius: 8px; font: 400 15px/1.4 var(--ui, var(--font)); resize: vertical; background: #fff; }
.town-v2 .hs-promise-row .bd-btn { flex: none; min-height: 44px; }
.town-v2 .hs-promise-ok { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: #228c44; color: #fff; font: 700 15px/1 var(--ui, var(--font)); opacity: 0; transform: scale(.6); transition: opacity .25s var(--sk-ease), transform .3s var(--sk-ease); }
.town-v2 .hs-promise.is-done { background: #e3f4e8; border-color: #228c44; }
.town-v2 .hs-promise.is-done .hs-promise-ok { opacity: 1; transform: none; }
.town-v2 .hs-promise.is-gone { opacity: 0; transform: translateY(-6px); }
@media (max-width: 600px) { .town-v2 .hs-promise-row { flex-direction: column; align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .town-v2 .hs-promise, .town-v2 .hs-promise-ok { transition: none; } }
/* on phones the walking hint steps up above Basecamp's Back to town */
html.is-compact body:has(.camp-back:not([hidden])) .hint { bottom: calc(76px + var(--sa-b, 0px)); }

/* The decisions table, Basil's questions and Beatrix's connections (B10) */
.town-v2 .hs-verdicts { list-style: none; margin: 6px 0; padding: 0; }
.town-v2 .hs-verdict { font-size: inherit; line-height: 1.4; }
.town-v2 .hs-pair h3 { margin-bottom: 4px; }