/* ======================================
   THE HOME PAGE, THE TOP BAR AND OPEN THREADS
   (the watercolour redesign, maggie, 2026-10-23, her Figma mock-up)
   The pieces js/ui/home.js draws: the top bar with its breadcrumb, page
   search and bell; the banner of where you stand; the page heading with its
   Chronicle / About tabs; the chronicle and whispers as sheets of deckled
   paper; the bell card; the head of About; the Open threads list; and the
   faces of who is nearby at the foot of the menu. Colours from tokens.css
   only, so dark mode follows by itself.
   ====================================== */

/* -- The top bar ------------------------------------------------------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  margin: 0 -2.25rem;
  padding: 0 2.25rem;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* ON A PHONE THE BAR REACHES ONLY AS FAR AS THE PANEL'S OWN PADDING (2026-10-27).
   The -2.25rem above, loaded after layout.css, beat its phone rule, so the bar
   stood 20px past both edges and the whole page could be dragged sideways. */
@media (max-width: 768px) {
  #topbar { margin: 0 -0.85rem; padding: 0 0.85rem; }
}
.tb-crumbs {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--text-muted);
  white-space: nowrap;
}
.tb-crumbs i { font-style: normal; opacity: 0.4; }
.tb-crumbs b { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.tb-crumbs.is-single i, .tb-crumbs.is-single #tb-crumb-group { display: none; }
.tb-actions { display: flex; gap: 0.5rem; margin-left: auto; }
/* a round pencil-ringed button: search, the bell, the menu on a phone */
.tb-btn,
#topbar .bell-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tb-btn:hover, .tb-btn.active,
#topbar .bell-btn:hover {
  color: var(--rust);
  background: color-mix(in srgb, var(--rust) 7%, transparent);
  border-color: color-mix(in srgb, var(--rust) 25%, transparent);
}
/* the bell's unread mark: a small rust drop at its shoulder */
#topbar .bell-badge {
  top: 7px;
  right: 7px;
  min-width: 0;
  background: var(--rust);
  border: 1px solid var(--paper);
}
@keyframes bell-pulse {
  0%, 100% { border-color: var(--text-danger); color: var(--text-danger); }
  50%       { border-color: var(--line);  color: var(--text-primary);  }
}
#nav-hist { display: flex; gap: 0.3rem; margin: 0; align-self: center; }
#nav-hist .nav-hist-btn {
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
}
/* the page search, a field that opens under the bar's right end */
.page-search {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.4rem 0.75rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
.page-search[hidden] { display: none; }
.page-search input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.2rem;
  background: transparent;
  border: 0;
  outline: none;
}
.page-search input:focus-visible { outline: none; }
.page-search-n { font-size: var(--fs-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; }
::highlight(page-search) { background-color: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; }
::highlight(page-search-now) { background-color: color-mix(in srgb, var(--rust) 45%, transparent); color: inherit; }

/* -- The banner of where you stand ---------------------------------------- */
/* The picture of each place (the same files the houses' cards use); a place
   with no picture keeps the General banner's own. */
.home-hero { height: 330px; margin-top: 1.9rem; }
/* "YOU ARE IN" OVER THE PLACE NAME (maggie, 2026-10-24). The two lines are one
   block, so the small gilt capitals sit exactly over the big name whatever the
   name's length and wherever the banner's own title would have stood. */
.home-hero-head {
  position: absolute;
  z-index: 4;
  left: 2.6rem;
  right: 12rem;
  bottom: 3.6rem;
  display: flex;
  flex-direction: column;
}
.home-hero .home-hero-head .tab-art-banner-title { position: static; bottom: auto; left: auto; right: auto; }
.home-hero-lead {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E9D2A2;
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 10px rgba(13, 12, 18, 0.7);
}
/* On the road (2026-10-27): the days left and the countdown, under the road's name. */
.home-hero-road {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: #E9D2A2;
  margin-top: 0.35rem;
  text-shadow: 0 1px 10px rgba(13, 12, 18, 0.7);
}
.home-hero-road[hidden] { display: none; }
.tab-art-banner.home-hero[data-region="kings_landing"] { background: url('../../assets/art/place-kings_landing.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="dragonstone"]   { background: url('../../assets/art/place-dragonstone.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="oldtown"]       { background: url('../../assets/art/place-oldtown.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="highgarden"]    { background: url('../../assets/art/place-highgarden.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="casterly_rock"] { background: url('../../assets/art/place-casterly_rock.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="storms_end"]    { background: url('../../assets/art/place-storms_end.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="winterfell"]    { background: url('../../assets/art/place-winterfell.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="the_eyrie"]     { background: url('../../assets/art/place-the_eyrie.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="braavos"]       { background: url('../../assets/art/place-braavos.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="lys"]           { background: url('../../assets/art/place-lys.webp') center 45% / cover no-repeat, var(--side-solid); }
.tab-art-banner.home-hero[data-region="riverlands"]    { background: url('../../assets/art/place-riverlands.webp') center 45% / cover no-repeat, var(--side-solid); }
/* (the title's own place in the banner is the block above since 2026-10-24) */
/* the day of the year, large, with the season and the year beside it */
.home-hero-date {
  position: absolute;
  z-index: 4;
  right: 2.6rem;
  bottom: 3.3rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #FFF4DD;
  transition: opacity 0.35s ease;
}
.home-hero-doy { font-family: var(--font-display); font-size: 2.9rem; line-height: 1; }
.home-hero-date small {
  padding-left: 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-hero:hover .home-hero-date { opacity: 0; }
@media (max-width: 768px) {
  .home-hero { height: 230px; margin-top: 0.9rem; }
  .home-hero-head { left: 1.3rem; right: 1.3rem; bottom: 2.4rem; }
  .home-hero-date { display: none; }
}

/* -- What your people are doing (the card under the bell, 2026-10-24) ------- */
/* Two short lists on one sheet: your own work and your NPCs'. A rule between
   them, a thin bar under each name, the figure at its right. */
.rail-track { margin-top: 1rem; }
.rail-track[hidden] { display: none; }
.rail-track .hrl-head {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.5rem 0 0.35rem;
}
.rail-track .hrl-head:first-child { margin-top: 0; }
.home-rail-line { margin-bottom: 0.5rem; }
.home-rail-line:last-child { margin-bottom: 0; }
.hrl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.hrl-name { font-size: var(--fs-small); color: var(--text-primary); min-width: 0; }
.hrl-tgt { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-fine); color: var(--text-muted); }
.hrl-pct { font-size: var(--fs-fine); color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.home-rail-line .bar-track { margin-top: 0.25rem; }

/* -- The page heading and its two tabs ------------------------------------ */
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 3.2rem 0 1.25rem;
}
.page-heading-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.45rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.page-heading .sec-tabs { margin: 0; }
/* ON A PHONE THE TABS STAY BESIDE THE NAME (maggie, 2026-10-26: "menu here
   should be on the side"). The row no longer wraps under the heading: the
   name takes a smaller size and may run to two lines, and the tabs take the
   rest of the width and scroll sideways (the faded edge says there is more). */
@media (max-width: 640px) {
  .page-heading { flex-wrap: nowrap; gap: 0.9rem; margin-top: 2.2rem; }
  .page-heading-title { flex: 0 1 auto; min-width: 0; font-size: 1.55rem; line-height: 1.1; overflow-wrap: break-word; }
  .page-heading .sec-tabs { flex: 1 1 0; min-width: 0; gap: 1.1rem; }
  .page-heading .sec-tab { font-size: 0.98rem; }
}
#tab-threads .page-heading { margin-top: 2.2rem; }
/* THE SECRETS PAGE'S HEADING (2026-10-24): a gold card heading that is not on a
   card, over the column of cards below. It keeps the padding of the page's own
   heading and drops the card's bottom margin, so it sits as the first line of
   the page rather than as a title waiting for a border under it. */
.secrets-heading { padding: 0.9rem 1.25rem 0.2rem; }
.secrets-heading .panel-card-title { margin: 0; }

/* -- The chronicle and the whispers: deckled sheets ----------------------- */
.general-grid.diary-row { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 1.5rem; align-items: start; }
.home-rail { display: flex; flex-direction: column; gap: 1.25rem; }
.general-grid.diary-row > div.home-rail > .panel-card { flex: 0 0 auto; }
/* THE PAGE'S FRAME IS EVERY OTHER CARD'S FRAME (maggie, 2026-10-24: "remove
   this extra gold border from the diary and whispers. It looks good on the
   first days and others, without it"). The bright gilt double rule was tried on
   these two sheets alone; against the plain First Days card beside them it read
   as a second kind of card. They keep the shared border and the shared rings
   from layout.css, and nothing of their own. */
.paper-sheet {
  padding: 0;
  overflow: visible;
}
/* THE SHEET'S HEADING IS EVERY OTHER CARD'S HEADING (maggie, 2026-10-24:
   "each of these windows has its own style ... it needs to be unified"). The
   blue-grey wash and the display-face name are gone: it keeps only the padding
   a sheet needs, and the gold rule under it comes from .panel-card-title. */
.paper-sheet > .pane-head {
  margin: 0;
  padding: 1.15rem 1.5rem 1rem;
  background: none;
  border-radius: var(--radius) var(--radius) 0 0;
  /* THE FILTER'S DROPDOWN MUST BE ABOVE THE DIARY IT FILTERS (bug, 2026-10-24:
     "I cannot select stuff here from the filter"). The box opens out of this
     row, and the timeline painted over it: the ticks were visible and the pointer
     went to the entry behind them, so a press closed the box instead of ticking
     anything. A positioned heading with a z-index of its own puts the row's
     children - the dropdown included - above the list. */
  position: relative;
  z-index: 5;
}
.paper-sheet > .pane-head .pane-head-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
/* On a narrow pane the Filter button goes under the day, never over it (2026-10-26). */
.paper-sheet > .pane-head { flex-wrap: wrap; }
.paper-sheet > .pane-head .pane-head-tools { display: flex; align-items: center; gap: 0.6rem; }
.paper-sheet > .diary-timeline { padding: 0.2rem 1.5rem 1.5rem; }
.paper-sheet > #main-rumours { padding: 0 1.25rem 1rem; }
/* the round count beside a heading */
.wc-count {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  height: 27px;
  padding: 0 0.35rem;
  border-radius: 50%;
  color: var(--rust);
  background: color-mix(in srgb, var(--rust) 11%, transparent);
  font-family: var(--font-display);
  font-size: var(--fs-small);
}
.wc-count[hidden] { display: none; }

/* A whisper on the board: a rust drop, the line in the serif, the day small. */
#main-rumours .rumour-row {
  position: relative;
  padding: 1rem 0 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
/* The rust drop is ONLY on a whisper you have not read (maggie, 2026-10-24:
   "after refresh it changes to 0 and the little dot goes away"). Before that it
   was drawn on the first row and hollowed on the rest, which said nothing about
   what was new - it only ever repeated the order of the list. */
#main-rumours .rumour-row::before {
  content: none;
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rust);
}
#main-rumours .rumour-row.is-unseen::before { content: ''; }
#main-rumours .rumour-text { font-family: var(--font-prose); font-size: 1rem; line-height: 1.5; color: var(--text-primary); }
#main-rumours .rumour-foot { margin-top: 0.45rem; font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--text-muted); }

/* -- When the bell tolls ------------------------------------------------ */
.bell-card {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.5rem;
  color: #F8F1DF;
  background:
    radial-gradient(ellipse at 106% -5%, rgba(224, 183, 122, 0.35), transparent 38%),
    radial-gradient(ellipse at 5% 96%, rgba(61, 82, 73, 0.55), transparent 46%),
    color-mix(in srgb, var(--rust) 55%, #2a1c22);
  border-radius: 48% 52% 49% 51% / 3% 4% 3% 4%;
  box-shadow: var(--paper-shadow);
}
.bell-card[hidden] { display: none; }
.bell-card[data-slot="midnight"] { background: radial-gradient(ellipse at 106% -5%, rgba(160, 170, 210, 0.3), transparent 38%), radial-gradient(ellipse at 5% 96%, rgba(30, 40, 62, 0.6), transparent 46%), #4E5A72; }
.bell-card[data-slot="morning"]  { background: radial-gradient(ellipse at 106% -5%, rgba(245, 214, 150, 0.45), transparent 38%), radial-gradient(ellipse at 5% 96%, rgba(150, 90, 60, 0.45), transparent 46%), #A07A55; }
/* a crescent moon painted large behind the words */
.bell-card::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  box-shadow: inset -1.6rem 0.4rem 0 0 rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.bell-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.07' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.bell-card .eyebrow { position: relative; color: #E3D5B6; }
.bell-card-title { position: relative; margin: 0.6rem 0 0.5rem; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: #F8F1DF; letter-spacing: -0.01em; }
.bell-card-left { position: relative; font-family: var(--font-display); font-size: 1.35rem; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }

/* -- Works beside the Herbal, and the decisions as tiles (maggie, 2026-10-24:
   Works and the Herbal in columns next to each other to save space; the exile
   and the other decisions you can take gathered in one card). Two columns on a
   wide screen, one under the other on a phone. */
.about-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  /* BOTH COLUMNS THE SAME HEIGHT, AND NEITHER GROWS UNBOUNDED (maggie,
     2026-10-24: "add here sliders, so these won't be getting too long, this size
     is good. Make them both match their height"). The two lists are capped and
     scroll inside their cards, so the cards stretch to each other and the row
     ends where its content does. A stated row height was tried first and cut a
     tall card off flush against the next one ("there is still no padding
     there"). */
  align-items: stretch;
}
.about-columns > #about-herbal:empty { display: none; }
.about-columns > .panel-card,
.about-columns > #about-herbal > .panel-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.about-columns > .panel-card > .inv-item-list,
.about-columns > #about-herbal > .panel-card > .inv-item-list {
  flex: 1;
  min-height: 0;
  max-height: 24rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-right: 0.3rem;
}
.about-columns > .panel-card > .inv-item-list::-webkit-scrollbar,
.about-columns > #about-herbal > .panel-card > .inv-item-list::-webkit-scrollbar { width: 5px; }
.about-columns > .panel-card > .inv-item-list::-webkit-scrollbar-thumb,
.about-columns > #about-herbal > .panel-card > .inv-item-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* Nothing on the right: the Works take the whole band rather than half of it. */
.about-columns:has(> #about-herbal:empty) { grid-template-columns: minmax(0, 1fr); }
/* WHAT AILS YOU RUNS THE FULL WIDTH (maggie, 2026-10-24: "let's make rany i
   choroby to be full width"). It sits in the two-column grid after Properties
   and Traits; at half width every line of a wound's detail wrapped. */
.general-grid > #ails-card { grid-column: 1 / -1; }
.decisions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.decision-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
}
.decision-tile .decision-line { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.decision-tile .decision-note { font-size: var(--fs-fine); color: var(--text-muted); }
@media (max-width: 900px) {
  .about-columns { grid-template-columns: minmax(0, 1fr); height: auto; }
  .about-columns > .panel-card > .inv-item-list,
  .about-columns > #about-herbal > .panel-card > .inv-item-list { max-height: 26rem; }
}

/* -- Open threads --------------------------------------------------------- */
.thread-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-bottom: 0.7rem;
  padding: 1rem 1.3rem;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}
.thread-mark { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--text-muted); }
.thread-row.is-unread .thread-mark { background: var(--rust); border-color: var(--rust); }
.thread-text b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.thread-text small { display: block; margin-top: 0.2rem; color: var(--text-muted); font-size: var(--fs-fine); }
.thread-bell { color: var(--gold); }
@media (hover: hover) { .thread-row:hover b { color: var(--rust); } }

/* -- Nearby, at the foot of the menu -------------------------------------- */
#group-here .nearby-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.75rem;
  border: 1px solid var(--side-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--side-ink) 5%, transparent);
  color: var(--side-ink);
  font-size: var(--fs-fine);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
#group-here .nearby-btn .nearby-go { margin-left: auto; font-size: 1.2rem; line-height: 1; opacity: 0.7; }
@media (hover: hover) { #group-here .nearby-btn:hover { border-color: var(--side-active-edge); } }
/* The list under the button, unless the player ticked Compact (2026-10-27). */
#group-here #whos-here-list { margin-top: 0.5rem; }
#group-here.is-compact #whos-here-list { display: none; }

.nearby-faces { display: flex; }
.nearby-faces:empty { display: none; }
.nearby-face {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 34px;
  border-radius: 13px 13px 2px 2px;   /* the gilt arch, small (2026-10-27) */
  border: 2px solid var(--side-solid);
  object-fit: cover;
  background: var(--side-gilt);
  color: var(--side-solid);
  font-family: var(--font-display);
  font-size: 0.75rem;
}
.nearby-faces .nearby-face + .nearby-face { margin-left: -8px; }
#whos-here-list .whos-here-person { display: flex; align-items: center; gap: 0.65rem; }
#whos-here-list .whos-here-person .nearby-face { width: 32px; height: 42px; border-radius: 16px 16px 2px 2px; border-color: transparent; }
#whos-here-list .whos-here-who { min-width: 0; }
#whos-here-list .whos-here-name { font-family: var(--font-display); }

/* -- Who is nearby, as a page (js/ui/nearby.js) ---------------------------- */
.nb-layer { margin: 0 0 1.8rem; }
.nb-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.8rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--text-primary);
  background: var(--gilt-rule);
}
.nb-count { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text-muted); }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.9rem; }
.nb-grid.is-small { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: 0.6rem; }
.nb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.7rem 0.5rem 0.8rem;
  background: var(--grain), var(--wash);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) { .nb-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rust) 40%, transparent); } }
.nb-arch { display: block; flex: none; align-self: center; }
.nb-arch .chat-frame { display: block; width: 92px; padding: 3px; border-radius: 46px 46px 4px 4px; }
.nb-arch .chat-face { width: 86px; height: 114px; border-radius: 43px 43px 2px 2px; }
.nb-name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; color: var(--text-primary); overflow-wrap: anywhere; }
.nb-title { font-size: var(--fs-fine); line-height: 1.3; color: var(--text-muted); overflow-wrap: anywhere; }
.crew-card { cursor: default; }
.crew-card [data-person] { cursor: pointer; }
.nb-card.is-small { padding: 0.5rem 0.35rem 0.6rem; gap: 0.2rem; }
.nb-card.is-small .nb-arch .chat-frame { width: 64px; border-radius: 32px 32px 4px 4px; }
.nb-card.is-small .nb-arch .chat-face { width: 58px; height: 78px; border-radius: 29px 29px 2px 2px; }
.nb-card.is-small .nb-name { font-size: var(--fs-small); }
.nb-card.is-small .nb-title { font-size: var(--fs-micro); }