/* Page chrome for login.html and app.html. The reservations card styles
   itself (reservations.css, scoped under .tbmod); the layout editor's shared
   rules are layout.css. Theme hooks come from layout.js: data-theme / data-bg
   on <html> and --*-user custom properties, each with today's look as the
   fallback, so a tenant who never customizes sees no change. */
/* The Hub layout's frame (hub.css): nothing in it applies to the classic layout. */
@import url("hub.css");
:root {
  color-scheme: dark;
  --lp-accent: var(--accent-user, #a3e635);
  --lp-ink: var(--accent-ink-user, #0f1217);
  --page-max: 980px;
  --page-bg: #0f1217;
  --page-text: #e8eaf2;
  --page-muted: #a7aebe;
  --page-line: rgba(255, 255, 255, .08);
  --page-line-strong: rgba(255, 255, 255, .13);
  --page-control: #20252e;
  --page-card: #171b22;
  --status-ok: #34d399;
  --status-warn: #fbbf24;
  --status-info: #60a5fa;
  --status-bad: #f87171;
  --public-card-radius: var(--radius-user, 14px);
  --public-card-pad: 18px;
  --public-card-shadow: 0 20px 50px rgba(0, 0, 0, .2);
  --bar-ctl: 34px;
  --bar-gap: 8px;
  --bar-radius: 9px;
  --bar-row-pad: 10px;
  --bar-tab-h: 40px;
  --bar-fill: color-mix(in srgb, var(--page-text) 6%, transparent);
  --bar-fill-hover: color-mix(in srgb, var(--page-text) 11%, transparent);
}
[data-theme=light] {
  color-scheme: light;
  --page-bg: #eef0f5;
  --page-text: #141824;
  --page-muted: #4f5769;
  --page-line: rgba(15, 23, 42, .09);
  --page-line-strong: rgba(15, 23, 42, .15);
  --page-control: #ffffff;
  --page-card: #ffffff;
  --status-ok: #047857;
  --status-warn: #b45309;
  --status-info: #2563eb;
  --status-bad: #dc2626;
  --public-card-shadow: 0 12px 34px rgba(15, 23, 42, .09);
}
* { box-sizing: border-box; }
/* Quests (a table and a map), the stash (two columns) and the house register (a
   grid of cards) need room: they set <body class="wide">. The header follows
   whichever width the page has, so its edges always line up with the content. */
body.wide { --page-max: min(1320px, 100%); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--page-text);
  font: 15px/1.45 var(--font-user, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
[data-bg=aurora] body {
  background: radial-gradient(1100px 560px at 12% -14%, color-mix(in srgb, var(--lp-accent) 16%, transparent), transparent 62%),
    radial-gradient(900px 520px at 110% 110%, rgba(56, 189, 248, .12), transparent 60%), var(--page-bg);
  background-attachment: fixed;
}
[data-bg=mesh] body {
  background: radial-gradient(700px 520px at 0% 0%, color-mix(in srgb, var(--lp-accent) 24%, transparent), transparent 70%),
    radial-gradient(640px 520px at 100% 8%, rgba(14, 165, 233, .18), transparent 70%),
    radial-gradient(820px 600px at 60% 115%, rgba(236, 72, 153, .14), transparent 70%), var(--page-bg);
  background-attachment: fixed;
}
button, input { font: inherit; }
/* ---- Header (chrome.js) -----------------------------------------------------
   Two rows on every signed-in page. The first: the brand, the status chips
   (Rashid, the character, Yasir) and, at the right, the icon tools and Sign
   out. The second: the page tabs, on the bar's bottom edge so the current
   one's underline meets it. One control height and one radius; no borders
   inside the bar, a quiet fill for what shows something and none for what
   only does something. */
.bar {
  border-bottom: 1px solid var(--page-line);
  background: color-mix(in srgb, var(--page-card) 55%, transparent);
}
.bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--bar-gap);
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--bar-row-pad) 16px;
  min-height: calc(var(--bar-ctl) + (var(--bar-row-pad) * 2));
}
.bar-inner:has(> .nav:not([hidden])) { padding-bottom: 0; }
/* Nothing in the bar wraps its own text or gets squeezed: when the first row
   does not fit, the chips take a row of their own (.chips-row, set by
   chrome.js), and on a phone the chips and the tabs scroll sideways. */
.bar-inner > *, .bar .nav a { flex-shrink: 0; white-space: nowrap; }
.bar-inner .brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--bar-ctl);
  margin-right: 4px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.bar-inner.chips-row .brand { margin-right: auto; }
.bar-inner.chips-row .chips { order: 5; flex-basis: 100%; flex-wrap: wrap; }
/* Wider than the row by the tabs' own padding, so the first tab's text lines
   up with the brand above it. */
.bar .nav {
  order: 10;
  display: flex;
  flex: 0 0 calc(100% + 20px);
  gap: 2px;
  margin: 0 -10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bar .nav::-webkit-scrollbar { display: none; }
.bar .nav[hidden] { display: none; }
.bar .nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--bar-tab-h);
  padding: 0 10px;
  color: var(--page-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .15s, box-shadow .15s, background .15s;
}
.bar .nav a:hover { color: var(--page-text); box-shadow: inset 0 -2px 0 var(--page-line-strong); }
.bar .nav a[aria-current=page] { color: var(--page-text); box-shadow: inset 0 -2px 0 var(--lp-accent); }
.bar .nav a:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: -6px; border-radius: 10px; }
/* A count on a tab (hunts saved, quests done) is information, so it is neutral;
   a count that waits for you (the wish list, reminders) is in the accent. */
.bar .tab-n {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bar-fill);
  color: var(--page-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.bar .tab-n[hidden] { display: none; }
/* A tab's one quick action (upload a stash image, add a hunt), right beside it. */
.bar .nav a.tab-act {
  align-self: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 6px 0 -8px;
  padding: 0;
  border-radius: 7px;
  box-shadow: none;
}
.bar .nav a.tab-act:hover { background: var(--bar-fill-hover); box-shadow: none; }
.bar .ico {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bar .who {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--bar-ctl);
  color: var(--page-muted);
  font-size: 13px;
}
.bar .who[hidden] { display: none; }
.bar .tools { display: inline-flex; align-items: center; min-height: var(--bar-ctl); gap: 6px; }
.bar .tools:empty { display: none; }
/* Customize is an icon here, like the tools beside it; layout.js gives the
   button its label and title. */
.bar .tools .lp-btn {
  justify-content: center;
  width: var(--bar-ctl);
  height: var(--bar-ctl);
  padding: 0;
  border: 0;
  border-radius: var(--bar-radius);
  background: none;
  color: var(--page-muted);
}
.bar .tools .lp-btn span { display: none; }
.bar .tools .lp-btn:hover { background: var(--bar-fill-hover); color: var(--page-text); }
.bar .tools .lp-btn.on { background: var(--lp-accent); color: var(--lp-ink); }
/* Where a page has no Customize, its place is kept, so the tools and Sign out
   stand still from page to page. */
.bar-tool-slot {
  display: inline-flex;
  width: var(--bar-ctl);
  height: var(--bar-ctl);
  flex: 0 0 auto;
  visibility: hidden;
  pointer-events: none;
}
.bar-inner > button {
  display: inline-flex;
  align-items: center;
  height: var(--bar-ctl);
  padding: 0 10px;
  border: 0;
  border-radius: var(--bar-radius);
  background: none;
  color: var(--page-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bar-inner > button:hover { background: var(--bar-fill-hover); color: var(--page-text); }
.bar-inner > button:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
/* The display above would beat the attribute: Sign out is hidden where there is no login (the LAN hub). */
.bar-inner > button[hidden] { display: none; }
@media (max-width: 560px) {
  .bar-inner { padding-left: 14px; padding-right: 14px; }
  .bar-inner .brand { margin-right: auto; }
  .bar .nav a { padding: 0 9px; font-size: 12.5px; }
  .bar .lp-status { display: none; }
}
.gate button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--page-line-strong);
  border-radius: 10px;
  background: var(--page-control);
  color: inherit;
  cursor: pointer;
}
.page { max-width: var(--page-max); margin: 24px auto; padding: 0 16px; }
/* A split layout needs the width a single stacked card does not. */
.page:has(.lp-grid[data-layout=grid]) { max-width: min(1680px, 100%); }
body:has(.page .lp-grid[data-layout=grid]) .bar-inner { max-width: min(1680px, 100%); }
.gate { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.gate-card {
  display: grid;
  gap: 12px;
  width: min(380px, 100%);
  padding: 28px;
  border: 1px solid var(--page-line-strong);
  border-radius: var(--radius-user, 14px);
  background: var(--page-card);
}
[data-theme=light] .gate-card { box-shadow: 0 12px 34px rgba(15, 23, 42, .08); }
.gate-card h1 { margin: 0; font-size: 22px; }
.gate-card p { margin: 0; color: var(--page-muted); }
.gate-card label { display: grid; gap: 6px; color: var(--page-muted); }
.gate-card input {
  padding: 9px 11px;
  border: 1px solid var(--page-line-strong);
  border-radius: 8px;
  background: var(--page-control);
  color: var(--page-text);
}
.gate-card button { background: var(--lp-accent); color: var(--lp-ink); font-weight: 650; }
.gate-card .err { min-height: 1.2em; color: var(--status-bad); }
.gate-card .note { font-size: 13px; }
/* Auctioned houses strip (houses-strip.js), between the bar and the
   reservations. Small cards, one row that wraps; never taller than it must be. */
.hstrip { margin: 0 0 18px; }
.hs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.hs-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--page-muted);
}
.hs-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lp-accent) 18%, transparent);
  color: var(--page-text);
  font-size: 11px;
  letter-spacing: 0;
  text-align: center;
}
.hs-all { color: var(--lp-accent); font-size: 13px; text-decoration: none; white-space: nowrap; }
.hs-all:hover { text-decoration: underline; }
.hs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hs-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--page-line);
  border-radius: var(--radius-user, 12px);
  background: var(--page-card);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.hs-card:hover, .hs-card:focus-visible {
  border-color: color-mix(in srgb, var(--lp-accent) 55%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transform: translateY(-2px);
  outline: none;
}
[data-theme=light] .hs-card:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .1); }
.hs-shot { position: relative; display: block; aspect-ratio: 5 / 2; overflow: hidden; background: var(--page-control); }
.hs-shot img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.hs-noimg { display: grid; height: 100%; place-items: center; font-size: 26px; opacity: .6; }
.hs-town {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(10, 11, 16, .78);
  color: #e8eaf2;
  font-size: 11px;
  backdrop-filter: blur(4px);
}
.hs-body { display: grid; gap: 4px; padding: 9px 11px 11px; }
.hs-name { overflow: hidden; font-size: 14px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.hs-ends { color: var(--page-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hs-ends.live { color: var(--status-warn); font-weight: 650; }
.hs-who { overflow: hidden; color: var(--page-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hs-facts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.hs-fact {
  padding: 1px 6px;
  border: 1px solid var(--page-line);
  border-radius: 6px;
  color: var(--page-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.hs-fact b { color: var(--page-text); font-weight: 650; }
@media (max-width: 560px) {
  .hs-row { grid-auto-flow: column; grid-auto-columns: 72%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .hs-card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .hs-card { transition: none; } .hs-card:hover { transform: none; } }
/* "Yours" strip (mine-strip.js): the tenant's quest plan, saved stash value and
   latest hunt, small cards above the auctions. Same card language as the houses strip. */
.ms-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ms-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--page-line);
  border-radius: var(--radius-user, 12px);
  background: var(--page-card);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ms-card:hover, .ms-card:focus-visible {
  border-color: color-mix(in srgb, var(--lp-accent) 55%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transform: translateY(-2px);
  outline: none;
}
[data-theme=light] .ms-card:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .1); }
.ms-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--lp-accent) 14%, transparent);
  font-size: 22px;
  line-height: 1;
}
.ms-body { display: grid; gap: 2px; min-width: 0; }
.ms-title { color: var(--page-muted); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.ms-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-sub { overflow: hidden; color: var(--page-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* A quest plan (a few quests before a date), and a hunt while it is on: edged in the accent. */
.ms-plan, .ms-now {
  border-color: color-mix(in srgb, var(--lp-accent) 45%, var(--page-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--lp-accent) 9%, var(--page-card)), var(--page-card) 70%);
}
.ms-plan .ms-title, .ms-now .ms-title { color: var(--lp-accent); }
/* The next hunt: the character's name, and the countdown in the accent. */
.ms-next .ms-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-next .ms-in { color: var(--lp-accent); font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .ms-card { transition: none; } .ms-card:hover { transform: none; } }
/* ---- Header chips (chips.js, mychar.js) ----------------------------------
   Rashid, then the tenant's character, right after the brand. Everything that
   uses display: below needs its own [hidden] rule, or the attribute stops
   working. */
.chips[hidden], .chip[hidden], .mychar[hidden], .mc-pop[hidden], .tt[hidden], .rashid-panel[hidden] { display: none !important; }
.bar .chips {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--bar-ctl);
}
/* The plain .chip is also the stash, hunts and house pages' filter pill
   (stash.css, hunts.css, houses.css build on it), so it keeps its own look;
   the header's chips are the .bar rules after it. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--page-line);
  border-radius: 999px;
  background: var(--page-card);
  color: var(--page-text);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.chip:hover, .chip:focus-visible, .chip[aria-expanded=true] {
  border-color: color-mix(in srgb, var(--lp-accent) 55%, transparent);
  background: color-mix(in srgb, var(--lp-accent) 10%, var(--page-card));
}
.chip .cv { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .chip .cv { display: none; } .chip { padding: 0 5px; } }
/* The header's chips. */
.bar .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--bar-ctl);
  padding: 0 11px 0 6px;
  border: 0;
  border-radius: var(--bar-radius);
  background: var(--bar-fill);
  color: var(--page-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bar .chip:hover, .bar .chip:focus-visible, .bar .chip[aria-expanded=true] { background: var(--bar-fill-hover); }
.chip:focus-visible, .mc-chip:focus-visible, .rp-city:focus-visible, .rp-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.bar .chip .ci { display: block; width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.bar .chip.c-rashid .ci { width: 30px; height: 30px; margin: -3px -1px -3px -3px; }
.bar .chip .ci-emoji { display: grid; place-items: center; font-size: 16px; line-height: 1; }
.bar .chip .cv { font-variant-numeric: tabular-nums; }
/* The wish list and reminders are tools: an icon without a fill at the right
   of the row, the label for screen readers and the tooltip, the count a badge
   on the corner. */
.bar .chip.chip-tool {
  justify-content: center;
  width: var(--bar-ctl);
  padding: 0;
  background: none;
  color: var(--page-muted);
}
.bar .chip.c-wish { margin-left: auto; }
.bar .chip.chip-tool:hover, .bar .chip.chip-tool:focus-visible, .bar .chip.chip-tool[aria-expanded=true] { background: var(--bar-fill-hover); color: var(--page-text); }
.bar .chip-tool .ci { display: grid; place-items: center; width: 18px; height: 18px; }
.bar .chip-tool .ico { width: 18px; height: 18px; }
.bar .chip-tool .cv, .bar a.chip.c-quests .cv { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar .chip-tool .wl-n, .bar .chip-tool .rm-n {
  position: absolute;
  top: 1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  box-shadow: 0 0 0 2px var(--page-bg);
}
/* The quest guide's chip, only where there are no tabs to carry its count (the LAN hub). */
.bar a.chip.c-quests { padding-right: 11px; }
.bar .chip.c-quests .q-n { color: var(--page-muted); font-variant-numeric: tabular-nums; }
.bar .chip.c-quests .q-n[hidden] { display: none; }
@media (max-width: 760px) { .bar .chip .cv { display: none; } .bar .chip { padding: 0 5px; } }
@media (max-width: 560px) {
  .bar .chips { order: 5; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* The one floating tooltip, with an arrow pointing at its chip. */
.tt {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 2px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px 11px;
  border: 1px solid var(--page-line-strong);
  border-radius: 9px;
  background: #0d141c;
  color: #d1d5db;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.tt::before {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(var(--arrow-x, 20px) - 4px);
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--page-line-strong);
  border-left: 1px solid var(--page-line-strong);
  background: #0d141c;
  transform: rotate(45deg);
}
[data-theme=light] .tt, [data-theme=light] .tt::before { background: #ffffff; color: #374151; }
.tt-h { color: #fff; font-weight: 650; }
[data-theme=light] .tt-h { color: #111827; }
.tt-s { color: inherit; }
.tt-f { color: var(--page-muted); font-size: 11px; }
.tt-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 4px 0 3px; }
.tt-grid i { color: var(--page-muted); font-style: normal; }
.tt-grid b { color: #fff; }
[data-theme=light] .tt-grid b { color: #111827; }
.tt .mc-on { color: var(--status-ok); }
/* World change chip (world-chip.js): green when Yasir is on Monza today. */
.bar .chip.c-world[data-y=yes] { background: color-mix(in srgb, var(--status-ok) 14%, transparent); color: var(--status-ok); }
.bar .chip.c-world[data-y=yes]:hover { background: color-mix(in srgb, var(--status-ok) 22%, transparent); }
.bar .chip.c-world[data-y=no] .cv { color: var(--page-muted); }
.tt-wc { list-style: none; margin: 5px 0; padding: 0; display: grid; gap: 2px; }
.tt-wc li { display: flex; gap: 6px; }
.tt-wc li span { width: 18px; text-align: center; flex: none; }
.tt-wc li.yz { color: var(--status-ok); font-weight: 650; }

/* Rashid's panel: the map with the week's cities beside it. */
.rashid-panel {
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--page-line-strong);
  border-radius: var(--public-card-radius);
  background: var(--page-card);
  box-shadow: var(--public-card-shadow);
}
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px var(--public-card-pad); border-bottom: 1px solid var(--page-line); }
.rp-head h2 { margin: 2px 0 0; font-size: 16px; }
.rp-eyebrow { margin: 0; color: var(--page-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rp-where { margin: 2px 0 0; color: var(--page-muted); font-size: 12px; }
.rp-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.rp-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--page-line-strong);
  border-radius: 8px;
  background: var(--page-control);
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.rp-body { display: grid; grid-template-columns: 1fr 160px; }
/* tibiamaps.io has no embed mode: the frame loads their whole page, and is
   shifted inside a clipping box so only the map shows (measured 267px down,
   32px in, as wide as the page minus 79px, up to 896px). Cosmetic only: if
   their layout moves, their header shows; the map and "Open map" still work. */
.rp-map {
  position: relative;
  overflow: hidden;
  max-width: 896px;
  height: clamp(320px, 52svh, 600px);
  background: var(--page-bg);
  --tmap-offset: 267px;
}
.rp-map iframe {
  position: absolute;
  top: calc(-1 * var(--tmap-offset));
  left: -32px;
  width: calc(100% + 79px);
  height: calc(100% + var(--tmap-offset));
  border: 0;
}
.rp-cities { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-left: 1px solid var(--page-line); overflow-y: auto; }
.rp-city {
  padding: 7px 9px;
  border: 1px solid var(--page-line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.rp-city:hover { border-color: var(--page-line-strong); background: var(--page-control); }
.rp-city[aria-pressed=true] { border-color: color-mix(in srgb, var(--lp-accent) 55%, transparent); background: color-mix(in srgb, var(--lp-accent) 14%, transparent); }
.rp-city.is-today::after { content: "today"; float: right; color: var(--status-info); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 700px) {
  .rp-body { grid-template-columns: 1fr; }
  .rp-map { --tmap-offset: 119px; }
  .rp-cities { flex-direction: row; flex-wrap: wrap; border-left: 0; border-top: 1px solid var(--page-line); }
  .rp-head { flex-wrap: wrap; }
}

/* The character chip and its popover. With the login name hidden (the chip
   names the character instead), the tools take over its push to the right. */
.bar .who[hidden] + .tools { margin-left: auto; }
.mychar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--bar-ctl);
}
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--bar-ctl);
  padding: 0 11px 0 0;
  border: 0;
  border-radius: var(--bar-radius);
  background: var(--bar-fill);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .15s;
}
.mc-chip:hover, .mc-chip[aria-expanded=true] { background: var(--bar-fill-hover); }
.mc-chip.unset { outline: 1px dashed var(--page-line-strong); outline-offset: -1px; }
/* The renderer draws a 64px frame with the figure in its lower right; a
   mounted rider is taller than the chip. Shown at 1:1 (crisp pixels), clipped
   at the sides and bottom only, so a head, hat or staff may rise above the
   pill instead of being cut off. */
.mc-fig { position: relative; display: block; width: 42px; height: var(--bar-ctl); clip-path: inset(-22px 0 0 0); }
.mc-fig img { position: absolute; right: -5px; bottom: -14px; width: 64px; height: 64px; image-rendering: pixelated; }
.mc-name { max-width: 170px; overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mc-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--status-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-ok) 20%, transparent); vertical-align: 1px; }
.mc-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  display: grid;
  gap: 14px;
  width: min(380px, calc(100vw - 20px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: var(--public-card-pad);
  border: 1px solid var(--page-line-strong);
  border-radius: var(--public-card-radius);
  background: var(--page-card);
  box-shadow: var(--public-card-shadow);
}
.mc-top { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--page-line); }
/* Shown at exactly 2x so the pixels stay square. The figure is drawn in the
   image's lower-right quarter (addons and mounts reach up and left), so the
   image is anchored there and the box crops the empty corner. */
.mc-big { position: relative; flex: 0 0 auto; width: 104px; height: 104px; overflow: hidden; border-radius: 12px; background: var(--page-control); }
.mc-big img { position: absolute; right: -4px; bottom: -2px; width: 128px; height: 128px; image-rendering: pixelated; }
.mc-id { min-width: 0; }
.mc-id h3 { margin: 0; font-size: 17px; }
.mc-line { margin: 2px 0 0; font-size: 13px; }
.mc-small { margin: 4px 0 0; font-size: 12px; }
.mc-muted { color: var(--page-muted); }
.mc-on { color: var(--status-ok); }
.mc-rows { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; font-size: 13px; }
.mc-rows dt { color: var(--page-muted); }
.mc-rows dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mc-rows a { color: var(--lp-accent); }
.mc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--page-line); }
.mc-actions button, .mc-link {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--page-line-strong);
  border-radius: 8px;
  background: var(--page-control);
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 30px;
  text-decoration: none;
  cursor: pointer;
}
.mc-actions .mc-primary { border-color: transparent; background: var(--lp-accent); color: var(--lp-ink); font-weight: 650; }
.mc-actions .mc-right { margin-left: auto; }
.mc-actions button:disabled { opacity: .6; cursor: progress; }
.mc-edit { display: grid; gap: 10px; }
.mc-field { display: grid; flex: 1; gap: 4px; color: var(--page-muted); font-size: 12px; }
.mc-field input, .mc-field select {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--page-line-strong);
  border-radius: 8px;
  background: var(--page-control);
  color: var(--page-text);
  font: inherit;
  font-size: 13px;
}
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc-addons { display: flex; gap: 14px; font-size: 13px; }
.mc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mc-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  border: 1px solid var(--page-line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-transform: capitalize;
  cursor: pointer;
}
.mc-tab i { width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, .35); border-radius: 3px; }
.mc-tab[aria-pressed=true] { border-color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 14%, transparent); }
/* The Tibia palette is 7 rows of 19, and reads best in that shape. */
.mc-palette { display: grid; grid-template-columns: repeat(19, 1fr); gap: 2px; }
.mc-sw { aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px; cursor: pointer; }
.mc-sw[aria-pressed=true] { outline: 2px solid var(--page-text); outline-offset: 1px; position: relative; z-index: 1; }
.mc-note { margin: -4px 0 0; color: var(--page-muted); font-size: 12px; }
.mc-note a { color: var(--lp-accent); }
.mc-err { min-height: 1em; margin: 0; color: var(--status-bad); font-size: 12px; }
/* The character card (char-sheet.js): the chip's popover in its card view.
   Two columns where there is room; a peek (hover) and a pinned card look the
   same, the peek just closes when the pointer leaves. */
.mc-pop.cs-card {
  display: block;
  left: var(--cs-shift, 0px);
  width: min(780px, calc(100vw - 20px));
  padding: 0;
  overflow-x: hidden;
  white-space: normal;      /* the header's chip row is nowrap */
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
}
[data-theme=light] .mc-pop.cs-card { box-shadow: 0 24px 64px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08); }
.cs-card :focus { outline: none; }
.cs-card :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
/* The search row on top of the card, and the refresh button beside "Updated ...". */
.cs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px var(--public-card-pad); border-bottom: 1px solid var(--page-line); }
.cs-viewing { min-width: 0; overflow: hidden; color: var(--page-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cs-viewing b { color: var(--page-text); font-weight: 650; }
.cs-back { height: 26px; padding: 0 9px; border: 1px solid var(--page-line-strong); border-radius: 999px; background: var(--page-control); color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cs-back:hover { border-color: color-mix(in srgb, var(--lp-accent) 55%, transparent); }
.cs-search { display: flex; flex: 0 1 240px; margin-left: auto; }
.cs-search input { flex: 1; min-width: 0; height: 28px; padding: 0 10px; border: 1px solid var(--page-line-strong); border-right: 0; border-radius: 8px 0 0 8px; background: var(--page-control); color: var(--page-text); font: inherit; font-size: 12.5px; }
.cs-search input:focus-visible { outline: none; border-color: color-mix(in srgb, var(--lp-accent) 70%, transparent); }
.cs-go { width: 32px; height: 28px; padding: 0; border: 1px solid var(--page-line-strong); border-radius: 0 8px 8px 0; background: var(--page-control); color: var(--page-muted); font: inherit; font-size: 14px; cursor: pointer; }
.cs-go:hover:not(:disabled) { color: var(--lp-accent); }
.cs-search :disabled { opacity: .6; cursor: progress; }
.cs-search-err { flex-basis: 100%; margin: 0; color: var(--status-bad); font-size: 12px; text-align: right; }
.cs-refresh { width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 1px solid var(--page-line); border-radius: 50%; background: transparent; color: var(--page-muted); font: inherit; font-size: 14px; line-height: 22px; vertical-align: middle; cursor: pointer; }
.cs-refresh:hover:not(:disabled) { border-color: color-mix(in srgb, var(--lp-accent) 55%, transparent); color: var(--lp-accent); }
.cs-refresh.spin { animation: cs-spin .9s linear infinite; cursor: progress; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs-refresh.spin { animation: none; opacity: .5; } }
.cs-head { display: flex; gap: 14px; align-items: center; padding: 14px var(--public-card-pad); border-bottom: 1px solid var(--page-line); background: linear-gradient(90deg, color-mix(in srgb, var(--lp-accent) 9%, transparent), transparent 55%); }
/* At exactly 1.5x, anchored where the renderer draws the figure (lower right). */
.cs-big { position: relative; flex: none; width: 76px; height: 76px; overflow: hidden; border-radius: 12px; background: var(--page-control); }
.cs-big img { position: absolute; right: -2px; bottom: -2px; width: 96px; height: 96px; image-rendering: pixelated; }
.cs-id { min-width: 0; }
.cs-id h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cs-id p { margin: 1px 0 0; color: var(--page-muted); font-size: 13px; }
.cs-id p b { color: var(--page-text); }
.cs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cs-pill { padding: 1px 8px; border: 1px solid var(--page-line-strong); border-radius: 999px; color: var(--page-muted); font-size: 11px; white-space: nowrap; }
.cs-pill.ok { border-color: color-mix(in srgb, var(--status-ok) 50%, transparent); color: var(--status-ok); }
.cs-week { margin-left: auto; color: var(--page-muted); font-size: 12px; text-align: right; white-space: nowrap; }
.cs-week b { display: block; color: var(--page-text); font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.25; }
/* The level goal strip under the head (char-sheet.js goalHtml): a form until
   a goal is set, then the experience left, the pace and the way so far. */
.cs-goal { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "h to left acts" "bar bar bar bar" "note note note note" "err err err err"; align-items: center; gap: 2px 16px; padding: 10px var(--public-card-pad) 11px; border-bottom: 1px solid var(--page-line); }
.cs-goal.is-form { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h form"; }
.cs-goal-h { grid-area: h; margin: 0; color: var(--page-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cs-goal-to { grid-area: to; color: var(--page-muted); font-size: 13px; white-space: nowrap; }
.cs-goal-to b { color: var(--page-text); font-size: 18px; font-variant-numeric: tabular-nums; }
.cs-goal-left { grid-area: left; min-width: 0; color: var(--page-muted); font-size: 12.5px; }
.cs-goal-left > b { color: var(--page-text); font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cs-goal-left > b.pos { color: var(--status-ok); font-size: 16px; }
.cs-goal-sub { display: block; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.cs-goal-acts { grid-area: acts; display: flex; align-items: center; gap: 10px; }
.cs-goal-x { width: 24px; height: 24px; padding: 0; border: 1px solid var(--page-line); border-radius: 50%; background: transparent; color: var(--page-muted); font: inherit; font-size: 11px; cursor: pointer; }
.cs-goal-x:hover:not(:disabled) { border-color: color-mix(in srgb, var(--status-bad) 55%, transparent); color: var(--status-bad); }
.cs-goal-bar { grid-area: bar; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--page-text) 8%, transparent); }
.cs-goal-bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--lp-accent) 55%, transparent), var(--lp-accent)); }
.cs-goal > .cs-note { grid-area: note; margin-top: 5px; }
/* The goal bar (char-sheet.js goalBarHtml): the last days' experience, a
   segment a day, against what is left; the snapshot a marker. */
.cs-gb { grid-area: bar; min-width: 0; margin-top: 9px; }
.cs-gb-track { position: relative; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--page-text) 8%, transparent); }
.cs-gb-fill { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.cs-gb-d { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--lp-accent); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .35); }
.cs-gb-d.e { background: color-mix(in srgb, var(--lp-accent) 62%, transparent); }
.cs-gb-d.af, .cs-gb-keys .k.af { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--lp-accent) 60%, transparent) 0 3px, color-mix(in srgb, var(--lp-accent) 22%, transparent) 3px 6px); }
.cs-gb-d:hover { filter: brightness(1.25); }
.cs-gb-tk { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--page-text) 16%, transparent); }
.cs-gb-loss { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--status-bad); }
.cs-gb-now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--page-text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--page-text) 20%, transparent); }
.cs-gb-scale { display: flex; gap: 10px; justify-content: space-between; margin-top: 5px; color: var(--page-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-gb-cap { min-width: 0; overflow: hidden; color: var(--page-text); text-align: center; text-overflow: ellipsis; }
.cs-gb-foot { display: flex; justify-content: center; margin-top: 3px; }
.cs-gb-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--page-muted); font-size: 10.5px; }
.cs-gb-keys .k { display: inline-block; width: 10px; height: 8px; margin-right: 4px; border-radius: 2px; background: var(--lp-accent); vertical-align: -0.5px; }
.cs-gb-keys .k.now { width: 2px; height: 11px; vertical-align: -2px; background: var(--page-text); }
.cs-goal-err { grid-area: err; flex-basis: 100%; margin: 4px 0 0; color: var(--status-bad); font-size: 12px; }
.cs-goal-form { grid-area: form; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.cs-goal-form label { color: var(--page-muted); font-size: 12.5px; }
.cs-goal-form input { width: 84px; height: 30px; padding: 0 8px; border: 1px solid var(--page-line-strong); border-radius: 8px; background: var(--page-control); color: var(--page-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.cs-goal-form input:focus-visible { outline: none; border-color: color-mix(in srgb, var(--lp-accent) 70%, transparent); }
.cs-goal-form .cs-btn:disabled, .cs-goal-form input:disabled { opacity: .6; cursor: progress; }
.cs-goal-pre { color: var(--page-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cs-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.cs-col { min-width: 0; padding: 12px var(--public-card-pad) 14px; }
.cs-col + .cs-col { border-left: 1px solid var(--page-line); }
.cs-sec + .cs-sec { margin-top: 14px; }
.cs-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin: 0 0 6px; }
.cs-cap h4 { margin: 0; color: var(--page-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-seg { display: inline-flex; padding: 2px; border: 1px solid var(--page-line); border-radius: 8px; background: var(--page-control); }
.cs-seg button { height: 20px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--page-muted); font: inherit; font-size: 11px; cursor: pointer; }
.cs-seg button[aria-pressed=true] { background: color-mix(in srgb, var(--lp-accent) 18%, transparent); color: var(--lp-accent); font-weight: 650; }
[data-theme=light] .cs-seg button[aria-pressed=true] { color: color-mix(in srgb, var(--lp-accent) 45%, var(--page-text)); }
.cs-more { padding: 0; border: 0; background: none; color: var(--lp-accent); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
[data-theme=light] .cs-more, [data-theme=light] .cs-info a { color: color-mix(in srgb, var(--lp-accent) 45%, var(--page-text)); }
.cs-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cs-tab th { padding: 4px 8px; border-bottom: 1px solid var(--page-line); color: var(--page-muted); font-size: 11px; font-weight: 600; text-align: left; }
.cs-tab td { padding: 4px 8px; vertical-align: top; }
.cs-tab tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--page-text) 3.5%, transparent); }
.cs-tab td:first-child { border-radius: 6px 0 0 6px; }
.cs-tab td:last-child { border-radius: 0 6px 6px 0; }
.cs-info td:first-child { width: 40%; color: var(--page-muted); }
.cs-info td:last-child { overflow-wrap: anywhere; }
.cs-info a { color: var(--lp-accent); text-decoration: none; }
.cs-info a:hover { text-decoration: underline; }
.cs-rk { margin-left: 6px; color: var(--page-muted); font-size: 11px; white-space: nowrap; }
.cs-sub { display: block; color: var(--page-muted); font-size: 11.5px; }
.cs-comment { white-space: pre-line; }
.cs-exp td, .cs-deaths .cs-when, .cs-deaths .cs-num { white-space: nowrap; }
.cs-exp tr.cs-today td { color: var(--page-muted); }
.cs-num { text-align: right; }
.cs-card .pos { color: var(--status-ok); }
.cs-card .neg { color: var(--status-bad); }
.cs-dim { color: var(--page-muted); }
.cs-card .approx { text-decoration: underline dotted color-mix(in srgb, var(--page-muted) 70%, transparent); text-underline-offset: 3px; cursor: help; }
.cs-lv { margin-left: 5px; padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--status-ok) 14%, transparent); color: var(--status-ok); font-size: 10.5px; font-weight: 700; }
.cs-lv.down { background: color-mix(in srgb, var(--status-bad) 14%, transparent); color: var(--status-bad); }
.cs-ob { display: inline-block; height: 6px; margin-right: 6px; border-radius: 3px; background: color-mix(in srgb, var(--status-info) 60%, transparent); vertical-align: middle; }
.cs-hunt b { font-weight: 650; }
.cs-strip { display: flex; align-items: flex-end; gap: 2px; height: 38px; margin: 2px 0 8px; padding: 0 2px; }
.cs-strip i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--lp-accent) 70%, transparent); }
.cs-strip i.ap { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--lp-accent) 60%, transparent) 0 3px, color-mix(in srgb, var(--lp-accent) 28%, transparent) 3px 6px); }
.cs-strip i.z { height: 2px; background: var(--page-line-strong); }
.cs-strip i.d { background: color-mix(in srgb, var(--status-bad) 75%, transparent); }
.cs-note { margin: 6px 0 0; color: var(--page-muted); font-size: 11.5px; }
.cs-skel { display: grid; gap: 6px; }
.cs-skel i { height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--page-text) 6%, transparent); animation: cs-pulse 1.2s ease-in-out infinite alternate; }
@keyframes cs-pulse { to { opacity: .45; } }
.cs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px var(--public-card-pad); border-top: 1px solid var(--page-line); }
.cs-fresh { flex: 1 1 auto; margin-right: auto; color: var(--page-muted); font-size: 12px; }
.cs-btn { height: 30px; padding: 0 11px; border: 1px solid var(--page-line-strong); border-radius: 8px; background: var(--page-control); color: inherit; font: inherit; font-size: 12.5px; line-height: 28px; text-decoration: none; cursor: pointer; }
.cs-btn.pri { border-color: transparent; background: var(--lp-accent); color: var(--lp-ink); font-weight: 650; }
@media (max-width: 820px) {
  .mc-pop.cs-card { width: min(440px, calc(100vw - 20px)); }
  .cs-body { grid-template-columns: minmax(0, 1fr); }
  .cs-col + .cs-col { border-left: 0; border-top: 1px solid var(--page-line); }
  .cs-head { flex-wrap: wrap; }
  .cs-week { width: 100%; margin-left: 0; text-align: left; }
  .cs-week b { display: inline; margin-right: 8px; font-size: 17px; }
  .cs-goal { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "h to acts" "left left left" "bar bar bar" "note note note" "err err err"; }
  .cs-goal.is-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "form"; gap: 6px; }
  .cs-goal-left { margin-top: 2px; }
  .cs-gb-scale { flex-wrap: wrap; }
  .cs-gb-cap { order: 3; flex-basis: 100%; text-align: left; white-space: normal; }
  .cs-gb-foot { justify-content: flex-start; }
  .cs-search { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cs-skel i { animation: none; } }
@media (max-width: 560px) {
  .mc-name { display: none; }
  .mc-chip { padding: 0; }
  .mc-fig { width: 40px; }
  /* Anchored to the chip it would run off a phone screen; pin it instead. */
  .mc-pop { position: fixed; top: 112px; left: 10px; right: 10px; width: auto; }
  .mc-pop.cs-card { left: 10px; width: auto; max-height: calc(100vh - 122px); }
}
/* The boss tracker's strip on the tenant's own card (char-sheet.js bossHtml,
   while the tracker is on): two KPI tiles, each with its breakdown on hover
   (mychar.js), the default weapon, and the way to the tracker. */
.cs-boss { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "hd go" "tiles wp"; align-items: center; gap: 6px 8px; padding: 10px var(--public-card-pad) 12px; border-bottom: 1px solid var(--page-line); }
.cs-boss-hd { grid-area: hd; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.cs-boss-h { margin: 0; color: var(--page-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cs-boss-who { color: var(--page-muted); font-size: 12px; white-space: nowrap; }
.cs-boss-who b { color: var(--page-text); font-weight: 600; }
.cs-boss-go { grid-area: go; justify-self: end; color: var(--lp-accent); font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.cs-boss-go:hover { text-decoration: underline; }
[data-theme=light] .cs-boss-go { color: color-mix(in srgb, var(--lp-accent) 45%, var(--page-text)); }
.cs-boss-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-boss-tile, .cs-boss-wp { display: grid; gap: 1px; min-width: 0; align-self: stretch; padding: 6px 10px 7px; border: 1px solid var(--page-line); border-radius: 9px; background: color-mix(in srgb, var(--page-text) 3%, transparent); color: inherit; font: inherit; text-align: left; }
.cs-boss-tile { cursor: help; }
.cs-boss-tile:hover { border-color: var(--page-line-strong); }
.cs-boss-wp { grid-area: wp; align-content: start; gap: 3px; }
.cs-boss-l { overflow: hidden; color: var(--page-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.cs-boss-since { font-weight: 500; letter-spacing: 0; text-transform: none; }
.cs-boss-n { color: var(--page-muted); font-size: 12px; white-space: nowrap; }
.cs-boss-n b { color: var(--page-text); font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cs-boss-s, .cs-boss-wn { overflow: hidden; color: var(--page-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.cs-boss-wn { font-size: 12.5px; }
.cs-boss-wn b { color: var(--page-text); font-weight: 650; }
.cs-boss-bar { display: block; height: 5px; margin-top: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--page-text) 8%, transparent); }
.cs-boss-bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--lp-accent) 55%, transparent), var(--lp-accent)); }
.tt .cs-boss-tg { grid-template-columns: minmax(0, 1fr) auto; }
.tt .cs-boss-tg i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt .cs-boss-tg b { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 820px) {
  .cs-boss { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hd go" "tiles tiles" "wp wp"; }
}
@media (prefers-reduced-motion: reduce) { .chip, .hs-card { transition: none; } }