/* Extras for the hosted guild site, on top of ../app.css. */
a { color: var(--accent); }
.report ol, .report ul { margin: 0; padding-left: 1.4em; }
.report li { margin: 2px 0; }
.report p + p, .report p + ol, .report p + ul { margin-top: 6px; }
.tag { display: inline-block; font-size: 0.75rem; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tag.warn { background: none; border: 1px solid var(--warn); color: var(--warn); }
/* Your row (or the day, guild, snapshot in use): the nav's mark for the chosen page, soft gold fill and a gold bar,
   in full bold. Weight alone barely shows on a dark page. */
tr.chosen td { font-weight: 700; background: var(--accent-soft); }
tr.chosen td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.login { max-width: 360px; margin: 40px auto; }
.login input[type="password"] {
  font: inherit; color: var(--text); background: var(--panel); width: 100%;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; min-height: 34px; margin: 8px 0 12px;
}
details.day > summary { cursor: pointer; list-style: none; }
details.day > summary::-webkit-details-marker { display: none; }
details.day { border-bottom: 1px solid var(--border); padding: 8px 0; }
.day-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.day-head .date { font-weight: 650; min-width: 7.5em; }
.day-head select { margin-left: auto; min-width: 16em; }
.log td { white-space: normal; }
a.btn {
  display: inline-flex; align-items: center; font: inherit; border-radius: 8px; padding: 6px 12px; min-height: 34px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); text-decoration: none;
}
a.btn:hover { border-color: var(--accent); }
a.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
button.link.plain { color: inherit; text-decoration: none; text-align: left; }
button.link.plain:hover { color: var(--accent); text-decoration: underline; }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { color: var(--accent); text-decoration: underline; }

/* One page: the modules are buttons in the left nav, then the module's own row of pages. */
:root { --side: 196px; }
/* The nav is the emblem's own ink and gold in light mode too, so the logo sits on its background. */
.side-nav {
  --panel: var(--ink); --text: #ece6d6; --muted: #9c9584; --border: #2d2b33;
  --accent: var(--gold); --accent-soft: #2e2817; --row-alt: #22222b; --warn: #f0884a;
  position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 10; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; padding: 16px 12px;
  background: var(--panel); color: var(--text); border-right: 1px solid var(--border);
  /* Dark in both themes, so its scrollbar and controls are the dark ones; the bar shows only while the pointer is on it. */
  color-scheme: dark; scrollbar-color: transparent transparent;
}
.side-nav:is(:hover, :focus-within) { scrollbar-color: #45424d transparent; }
/* The mark sits over the name, so the name gets the nav's whole width and stays on one line. */
.side-nav h1 {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 4px 14px;
  font-size: 0.9rem; line-height: 1.25; text-align: center; text-wrap: balance;
  color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.side-nav .logo { width: 60px; height: auto; flex: none; }
#modules { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#modules button {
  font: inherit; text-align: left; cursor: pointer; border: 1px solid transparent; border-radius: 8px;
  padding: 9px 12px; background: none; color: var(--muted);
}
#modules button:hover { color: var(--text); background: var(--row-alt); }
#modules button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
#modules button.foot { margin-top: auto; }
#modules button .tag, .tabs button .tag { margin-left: 6px; vertical-align: 1px; font-weight: 500; }
.content { margin-left: var(--side); min-width: 0; }
/* The leader viewing the site as a member (site/access.js): a gold bar over every page, with the way back. */
.viewas-bar {
  position: sticky; top: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;
  flex-wrap: wrap; padding: 8px 16px; background: var(--accent-soft); color: var(--text); border-bottom: 2px solid var(--gold);
}
.viewas-bar[hidden] { display: none; }
button.btn.small { min-height: 26px; padding: 2px 10px; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 760px) {
  .side-nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .side-nav h1 { flex-basis: 100%; flex-direction: row; gap: 10px; padding: 0 0 10px; font-size: 1rem; text-align: left; }
  .side-nav .logo { width: 34px; }
  #modules { flex-direction: row; flex-wrap: wrap; }
  #modules button { padding: 6px 10px; }
  #modules button.foot { margin-top: 0; }
  .content { margin-left: 0; }
}

.top.sub { padding-top: 6px; }
.top.sub .tabs { margin-top: 8px; align-items: center; }
/* The module's row of pages is a bar in the left nav's idiom (soft gold fill and a gold mark on the chosen page), so it
   reads as navigation; second rows (Leaderboards) stay plain tabs under it. */
.top.sub > .tabs:first-child { gap: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.top.sub > .tabs:first-child button { border-bottom: 0; border-radius: 7px; padding: 7px 14px; color: var(--text); }
.top.sub > .tabs:first-child button:hover { background: var(--row-alt); }
.top.sub > .tabs:first-child button.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 -2px 0 var(--gold); }
/* A section's row holds the pages of every module drawn there (site/pages.js): only the current module's show, and a
   group's row (Guild > Leaderboards) only on its own pages (site/main.js marks them). */
.tabs .other-module, .tabs.off { display: none; }
/* The picker and summary sit at the end of the row of pages. */
.tabs .meta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 4px 12px; }
.tabs .meta:has(> span:empty + span:empty), .tabs .meta:has(> span:only-child:empty) { display: none; }
/* The Loadouts page's own tabs are pages in the Combat row here. */
#armorySection .detail-tabs { display: none; }
/* With no character the Armory's own panel says how to get one in. */
#armorySection #drop { display: none; }
/* The leader's tabs belong to the Snapshots page. */
body:not([data-page="leader"]) #leaderTabs, body:not([data-page="leader"]) #leaderSummary { display: none; }
/* Pages hang off the left nav rather than centering, and the scrollbar always keeps its room, so the row of pages never
   moves sideways when switching pages or modules. Combat, Skilling and Inventory (Net worth too) use the full width on
   every page; GXP and Data stay at reading width even if the Armory left "wide" set. */
html { scrollbar-gutter: stable; }
/* Bold widens a label and nudges everything after it; thicken the chosen one's strokes instead. */
.tabs button.active, .seg button.on, .plan-tab.on { font-weight: inherit; -webkit-text-stroke: 0.4px currentColor; }
.content main, .content .top { margin-inline: 0; }
.content .drop { margin-inline: 16px; }
body:is([data-module="combat"], [data-module="skilling"], [data-module="collection"], [data-module="inventory"]) :is(main, .top) { max-width: 1680px; }
body:is([data-module="combat"], [data-module="skilling"], [data-module="collection"], [data-module="inventory"]) .drop { max-width: calc(1680px - 32px); }
body[data-module="data"] main, body[data-module="data"] .top,
body[data-module="admin"] main, body[data-module="admin"] .top { max-width: 1040px; }
/* Signed out, Admin shows only the passcode sign-in: no row of pages. */
body[data-module="admin"]:not(.is-leader) #adminTabs { display: none; }
/* Parts of a page in development (Get the script's MWO Companion): Dev features only, as data-dev buttons are. */
body:not(.can-dev) [data-dev-panel] { display: none; }
/* Data > MWO Companion (site/companion.js): its features as cards. */
.companion-hero { border-color: var(--accent); }
.companion-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.companion-feature { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.companion-feature h3 { margin: 0 0 2px; font-size: 1rem; }
.companion-feature > p { margin: 0 0 8px; font-size: 0.9rem; }
.companion-feature ul, .companion-plain { margin: 0; padding-left: 1.2em; }
.companion-feature li, .companion-plain li { margin-bottom: 5px; }
body:not(:is([data-page="permissions"], [data-page="proposals"], [data-page="updates"])) #adminSummary { display: none; }

/* Reports */
:root {
  --up: var(--ok); --down: var(--err);
  --p-equipped: light-dark(#2f6fde, #6ea2ff); --p-bag: light-dark(#1f9d63, #4cc27a); --p-coins: light-dark(#d29a12, #e8bb4a);
  --p-abilities: light-dark(#8a56d6, #b38cf0); --p-house: light-dark(#e0703a, #f19a68);
}
.up { color: var(--up); }
.down { color: var(--down); }
.delta { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.reports-bar { align-items: center; }
.rep-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rep-tabs button {
  font: inherit; font-size: 0.9rem; cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px; background: var(--panel); color: var(--muted);
}
.rep-tabs button:hover { color: var(--accent); border-color: var(--accent); }
.rep-tabs button.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); -webkit-text-stroke: 0.4px currentColor; }
.rep-tabs .count { font-size: 0.75rem; opacity: 0.75; margin-left: 2px; }
.rep-day { margin-left: auto; }
.glances { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start; }
.glances .panel { margin-bottom: 0; }
.glance header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.glance header h3 { margin: 0; }
.glist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; column-gap: 12px; }
.glist li {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  padding: 4px 0; border-top: 1px solid var(--border);
}
.glist li:first-child { border-top: 0; }
.glist .what { color: var(--muted); font-size: 0.85rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glist .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glist .val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.9rem; }
.glist .val.down { color: var(--down); }
.glist .val.up { color: var(--up); }
.stats.hero { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stats.hero .value { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.stats.hero .value button.link.plain { font-weight: inherit; }

.trend header, .report header, .nw-detail header { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.trend header h3, .report header h3, .nw-detail header h3 { margin: 0; }
.trend svg { display: block; width: 100%; height: 120px; }
.trend rect { fill: var(--accent); opacity: 0.35; cursor: pointer; }
.trend rect:hover { opacity: 0.6; }
.trend rect.on { opacity: 1; }
.trend polyline, .spark polyline { fill: none; stroke: var(--text); stroke-width: 2; }
.trend .key { display: inline-block; width: 12px; height: 8px; margin: 0 4px 0 10px; vertical-align: middle; }
.trend .key.bar { background: var(--accent); opacity: 0.5; }
.trend .key.line { height: 2px; background: var(--text); }
.axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }

.rep-section { margin-top: 4px; }
.rep-section .quiet { margin: 10px 2px 0; }
.report { display: flex; flex-direction: column; }
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rlist li {
  display: grid; grid-template-columns: 1.8em minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 5px 8px; border-radius: 6px;
  background: linear-gradient(to right, var(--accent-soft) var(--w), transparent var(--w));
}
.rlist .pos { color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.rlist .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlist .note { margin-left: 8px; color: var(--muted); font-size: 0.8rem; }
.rlist .val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rlist .val.down { color: var(--down); }
.rlist .val.up { color: var(--up); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; margin: 0; }
.facts dt { font-size: 0.8rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.report p .tag { margin-right: 4px; }

/* Net worth */
.partsbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg); margin-bottom: 8px; }
.partsbar span + span { border-left: 2px solid var(--panel); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.p-equipped { background: var(--p-equipped); }
.p-bag { background: var(--p-bag); }
.p-coins { background: var(--p-coins); }
.p-abilities { background: var(--p-abilities); }
.p-house { background: var(--p-house); }
.nw-detail { border-color: var(--accent); }
.actions-inline { display: flex; gap: 6px; flex-wrap: wrap; }
.nw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 14px; }
.nw-cols h4 { margin: 0 0 8px; font-size: 0.9rem; }
.spark { display: block; width: 100%; height: 90px; }
.spark polygon { fill: var(--accent-soft); }
.nw-cols p { margin: 8px 0 0; }

/* Members only (site/access.js) */
.whoami { padding-inline: 4px; color: var(--muted); line-height: 1.5; }
.whoami strong { color: var(--text); font-weight: 600; }
.whoami button.link.plain, .whoami a.plain { display: block; color: var(--muted); text-decoration: underline; }
/* Password sign-in (site/account.js), also on the members-only screen */
.pw-panel { max-width: 560px; }
.pw-form { display: grid; gap: 10px; max-width: 340px; margin: 12px 0; }
.pw-form label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.pw-form input {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; min-height: 34px;
}
.pw-form button { justify-self: start; }
.pw-msg { margin: 0; }
/* Light or dark, under who's signed in (site/theme.js). */
.theme-toggle {
  align-self: flex-start; font: inherit; font-size: 0.85rem; cursor: pointer; margin-top: -8px;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; background: none; color: var(--muted);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 760px) { .theme-toggle { margin-top: 0; } }
.gate { max-width: 760px; margin: 40px auto; }
.gate .steps { margin: 12px 0; }
.gate-step { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 16px; }
.gate-step h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.05rem; }
.gate-step h3 .muted { font-weight: 400; }
.gate-step .num {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent); font-size: 0.9rem; font-weight: 700;
}
.gate-step > p { margin: 0 0 10px; }
.install-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.install-choices > div { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.install-choices h4 { margin: 0 0 4px; font-size: 0.95rem; }
.install-choices .steps { margin: 8px 0 0; }

/* The box to paste Copy Data into (site/pastebox.js) */
.pastebox-input {
  display: block; width: 100%; resize: none; font: inherit; text-align: center; padding: 18px 12px; cursor: pointer;
  color: var(--text); background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: 10px;
}
.pastebox-input::placeholder { color: var(--accent); font-weight: 600; opacity: 1; }
.pastebox-input:focus { outline: none; border-style: solid; }
.pastebox-input:focus::placeholder { color: var(--muted); }
.pastebox-status { margin: 8px 0 0; }
.pastebox-status.ok { color: var(--ok); }
.pastebox-status.warn { color: var(--warn); }
.pastebox-status.err { color: var(--err); }
.pastebox[data-state="ok"] .pastebox-input { border-color: var(--ok); }
.signin-panel { border-color: var(--accent); }
body[data-module="feedback"] main, body[data-module="feedback"] .top { max-width: 1040px; }
@media (max-width: 760px) { .whoami { flex-basis: 100%; } .whoami button.link.plain, .whoami a.plain { display: inline; margin-left: 6px; } }

/* Feedback (site/feedback.js) */
.fb-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fb-field input, .fb-field textarea, .fb-answer textarea {
  font: inherit; color: var(--text); background: var(--panel); width: 100%;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; min-height: 34px;
}
.fb-field textarea, .fb-answer textarea { resize: vertical; }
.fb-form .actions { align-items: center; margin-bottom: 0; }
.fb-filters { margin-bottom: 4px; }
.fb-list { display: flex; flex-direction: column; }
.fb-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.fb-item.closed .fb-main > header h3 { color: var(--muted); }
.fb-item header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-item header h3 { margin: 0; overflow-wrap: anywhere; }
.fb-item > .fb-main > p { margin: 4px 0 0; }
.fb-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px !important; }
.fb-vote {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 52px;
  font: inherit; font-size: 0.75rem; cursor: pointer; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.fb-vote strong { font-size: 1rem; color: var(--text); }
.fb-vote:hover:not(:disabled) { border-color: var(--accent); }
.fb-vote.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fb-vote.on strong { color: var(--accent); }
.fb-vote:disabled { cursor: default; }
.fb-reply { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--row-alt); border-radius: 0 8px 8px 0; }
.fb-reply p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-tools { margin-top: 10px; }
.fb-answer { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.fb-answer label { display: flex; align-items: center; gap: 8px; }
.tag.kind-bug { background: none; border: 1px solid var(--err); color: var(--err); }
.tag.kind-change { background: none; border: 1px solid var(--warn); color: var(--warn); }
.fb-status { background: var(--row-alt); color: var(--muted); }
.fb-status.s-planned, .fb-status.s-in-progress { background: var(--accent-soft); color: var(--accent); }
.fb-status.s-done { background: none; border: 1px solid var(--ok); color: var(--ok); }

/* Guild: Home, Teams, LFT, Levels and Permissions (site/home.js, site/teams.js, site/roles.js) */
body:is([data-module="home"], [data-module="forum"]) :is(main, .top) { max-width: 1200px; }
.grow { flex: 1 1 200px; }
.controls label.grow input { width: 100%; }
#homeSection input[type="datetime-local"] { min-width: 215px; }
.controls input[type="text"], .controls input[type="search"], .controls input[type="datetime-local"],
.lft-form input[type="text"], .lft-form input[type="datetime-local"] {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; min-height: 34px;
}
.controls label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 0.9rem; }
label.check { display: inline-flex; align-items: center; gap: 6px; }
.need { margin: 0 0 12px; }
.can.ok { color: var(--ok); font-weight: 600; }
.can.warn { color: var(--warn); font-weight: 600; }
.can.bad { color: var(--err); font-weight: 600; }
#homeSection button:disabled { opacity: 0.55; cursor: not-allowed; }
button.link.plain.danger { color: var(--err); }
.nowrap { white-space: nowrap; }

/* Home */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.home-grid .panel { margin-bottom: 14px; }
.home-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.home-head h2 { margin: 0; }
.home-head code, .md code { font-family: var(--mono); font-size: 0.85em; background: var(--row-alt); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md h2 { font-size: 1.3rem; margin: 18px 0 8px; }
.md h3 { font-size: 1.1rem; margin: 16px 0 6px; }
.md h4 { font-size: 1rem; margin: 14px 0 4px; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 1.4em; }
.md li { margin: 2px 0; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.home-side h3 { margin-bottom: 10px; }
.home-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.home-list li { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.home-list li > span:last-child { flex-basis: 100%; }
.home-sub { margin: -4px 0 8px; }

/* Home: the notice board */
.notices { list-style: none; margin: 0 0 6px; padding: 0; }
.notice { padding: 12px 0; border-top: 1px solid var(--border); }
.notice-form + .notices .notice:first-child, .home-head + .notices .notice:first-child { border-top: 0; padding-top: 0; }
.notice.pinned { background: var(--accent-soft); margin: 0 -16px; padding: 12px 16px; border-radius: 8px; border-top-color: transparent; }
.notice.pinned + .notice { border-top-color: transparent; }
.notice.pinned + .notice.pinned { margin-top: 6px; }
.notice .tag { margin-bottom: 6px; }
.notice .md p:last-child, .notice .md ul:last-child, .notice .md ol:last-child { margin-bottom: 0; }
.notice-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; margin-top: 6px; }
.notice-tools { display: inline-flex; gap: 12px; }
.notice-form { margin-bottom: 12px; }
.notice-form textarea {
  font: inherit; color: var(--text); background: var(--panel); width: 100%; min-height: 96px; resize: vertical;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
}
.notice-form .actions-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* Guild > Forum: rows of boards and threads, then a thread's posts */
.forum-crumbs { margin: 6px 0 10px; }
.forum-list { display: flex; flex-direction: column; container-type: inline-size; }
.forum-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 7.5em minmax(0, 14em); gap: 4px 16px; align-items: center;
  padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--border); border-radius: 6px; color: inherit; text-decoration: none;
}
.forum-list .forum-row:first-child { border-top-color: transparent; }
.forum-row:hover { background: var(--row-alt); }
.forum-main, .forum-last { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forum-title { font-weight: 650; color: var(--accent); }
.forum-title .tag { margin-left: 4px; font-weight: 500; vertical-align: 1px; }
.forum-count { text-align: right; font-variant-numeric: tabular-nums; }
.forum-clip, .forum-last span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-thread-head { align-items: center; }
.forum-thread-head .tag { align-self: center; }
.forum-rename { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.forum-rename input, .forum-form input[type="text"] {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
}
.forum-rename input { flex: 1; min-width: 12em; font-size: 1.1rem; }
.forum-form input[type="text"] { width: 100%; margin-bottom: 8px; font-weight: 600; }
.forum-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 0 8px; }
.forum-tools select { font: inherit; }
.forum-posts { list-style: none; margin: 0; padding: 0; }
.forum-post { padding: 12px 0; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.forum-post.first { border-top: 0; padding-top: 4px; }
.forum-post .md p:last-child, .forum-post .md ul:last-child, .forum-post .md ol:last-child { margin-bottom: 0; }
.forum-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-bottom: 6px; }
.forum-by .notice-tools { margin-left: auto; }
.forum-post .forum-form { margin: 0; }
/* A narrow list drops the last-post column. */
@container (max-width: 620px) {
  .forum-row { grid-template-columns: minmax(0, 1fr) auto; }
  .forum-last { display: none; }
}

/* Home: Today's top 10, one line each */
.home-rank { list-style: none; margin: 0 0 10px; padding: 0; font-variant-numeric: tabular-nums; }
.home-rank li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 0.92rem; }
.home-rank li + li { border-top: 1px solid var(--border); }
.home-rank .r { width: 1.6em; flex: none; text-align: center; color: var(--muted); }
.home-rank .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-rank .v { flex: none; font-weight: 600; }
.home-rank li.me .n { font-weight: 650; }
.home-lft { list-style: none; margin: 0 0 10px; padding: 0; }
.home-lft li { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; font-size: 0.92rem; }
.home-lft li + li { border-top: 1px solid var(--border); }
.home-lft li.me .n { font-weight: 650; }

/* Skill Leaders */
.skills-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 14px; align-items: start; }
.skill-list ol { list-style: none; margin: 0; padding: 0; }
.skill-list ol + h3 { margin-top: 16px; }
.skill-list button {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 0.92rem; color: inherit;
  background: none; border: 0; border-radius: 6px; padding: 5px 8px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.skill-list button:hover { background: var(--row-alt); }
.skill-list button.on { background: var(--accent-soft); color: var(--accent); }
.skill-list .s { width: 8em; flex: none; font-weight: 600; }
.skill-list .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-list .v { flex: none; }
.skill-note { margin: 12px 0 0; }
/* The "? How to update" chip (site/ui.js howTo) at the end of a heading row, and its popover */
.how-to { position: relative; margin-left: auto; align-self: center; }
.how-to-btn {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 0.8rem; color: var(--muted);
  background: none; border: 0; padding: 2px 4px; cursor: help; white-space: nowrap;
}
.how-to-btn .q {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1px solid currentColor; font-size: 0.7rem; font-weight: 700; line-height: 1;
}
.how-to-btn:hover, .how-to.open .how-to-btn, .how-to-btn:focus-visible { color: var(--accent); }
.how-to-pop {
  display: none; position: absolute; right: 0; top: 100%; z-index: 20; width: max-content; max-width: min(320px, 80vw);
  margin-top: 4px; padding: 8px 10px; font-size: 0.85rem; line-height: 1.4; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* The gap above the popover still counts as hovering, so the pointer can reach its link. */
.how-to-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.how-to:hover .how-to-pop, .how-to-btn:focus-visible + .how-to-pop, .how-to.open .how-to-pop { display: block; }
/* Game Leaderboards (site/gameboards.js) */
.gb-pick { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.gb-pick select { font: inherit; margin-left: 6px; max-width: 100%; }
/* Skill Leaders: the Guild / In game switch, and the In game view's board types */
.board-view { margin-bottom: 12px; }
.skill-list .seg button { display: inline-block; width: auto; border-radius: 0; padding: 5px 16px; }
.gb-types { margin-bottom: 10px; }
.gb-below { margin: 16px 0 6px; }
/* Guild Level (site/guildlevel.js): the window and projection pickers, our rank over time and projected */
.gl-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 12px; }
.gl-controls label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; }
.gl-verdict { margin: 0 0 12px; }
.gl-plot { position: relative; padding-left: 44px; }
.gl-plot .y { position: absolute; left: 0; transform: translateY(-50%); line-height: 1; }
.gl-chart svg { height: 160px; }
.gl-chart .grid { stroke: var(--border); stroke-width: 1; }
.gl-chart .now { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.gl-chart rect.hit { fill: transparent; cursor: default; opacity: 1; }
.gl-chart rect.hit:hover { fill: var(--accent-soft); }
.gl-chart polyline.hist { fill: none; stroke: var(--accent); stroke-width: 2; }
.gl-chart polyline.proj { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.gl-chart .key.gl-hist { height: 2px; background: var(--accent); }
.gl-chart .key.gl-proj { height: 0; border-top: 2px dashed var(--accent); }
.gl-axis { position: relative; margin-left: 44px; }
.gl-axis .mid { position: absolute; transform: translateX(-50%); }
.gl-table td, .gl-table th { white-space: nowrap; }
@media (max-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1180px) { .skills-grid { grid-template-columns: minmax(0, 1fr); } }

/* Teams */
.day-label { margin: 18px 0 6px; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.day-label:first-child { margin-top: 4px; }
.team-list { display: flex; flex-direction: column; }
.team { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.team.mine { border-color: var(--accent); }
.team.editing { border-style: dashed; border-color: var(--accent); }
.team header { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.team header h3 { margin: 0; }
.team .when { font-variant-numeric: tabular-nums; }
.team .slots { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ok); }
.team .slots.full { color: var(--muted); }
.team > p { margin: 2px 0 8px; }
.members { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.members li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--row-alt); }
.members li.open-slot { border-style: dashed; background: none; }
.members .star { color: var(--warn); }
.row-tools { display: inline-flex; gap: 6px; }
.row-tools button.link.plain { color: var(--muted); }
.lvl { font-size: 0.75rem; font-weight: 650; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.lvl.unknown { background: var(--row-alt); color: var(--muted); }
.team-note { white-space: pre-wrap; margin: 0 0 10px !important; }
.team .actions-inline { align-items: center; }
.fits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.fit { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ok); }
.fit.later { border-color: var(--border); }
.fit.fills { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.tm-kind { margin-top: 10px; }
.tm-kind > p, .lft-step .tm-kind > p { margin: 6px 0 0; }
.kind-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.team > p .tag { margin-right: 4px; }
.tf-panel > p { margin: 4px 0 10px; }
.tf-progress { margin-top: 10px; }
.tf-progress .bar { height: 5px; margin-top: 6px; border-radius: 3px; background: var(--row-alt); overflow: hidden; }
.tf-progress .bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }
.tf-team .table-wrap { margin: 8px 0 10px; }
.tf-table { width: 100%; border-collapse: collapse; }
.tf-table th, .tf-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.tf-table th.num, .tf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* LFT */
.lft-form > h2 { margin-bottom: 4px; }
.lft-step { padding: 14px 0; border-bottom: 1px solid var(--border); }
.lft-step h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lft-step h3 .muted { font-weight: 400; }
.lft-step .num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--accent-fill); color: var(--on-accent); font-size: 0.8rem; font-weight: 700;
}
.lft-step select, .lft-step input.wide, .lft-when input {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; min-height: 34px;
}
.lft-step select { min-width: 280px; max-width: 100%; }
.lft-step input.wide { width: 100%; max-width: 640px; }
.lft-step > p { margin: 8px 0 0; }
.lft-when { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lft-when .lbl { width: 4.5em; flex: none; }
.lft-when label.inline { display: inline-flex; align-items: center; gap: 6px; }
.lft-when input.hours { width: 5em; min-height: 30px; padding: 4px 6px; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 4px 28px; margin-top: 14px; }
.tier-grid h4 { margin: 0 0 6px; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tg-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.tg-row .tg-name { width: 10.5em; flex: none; font-size: 0.9rem; }
.tg-tiers { display: flex; gap: 4px; }
.tg-tiers button {
  font: inherit; font-size: 0.8rem; width: 38px; padding: 3px 0; cursor: pointer; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
}
.tg-tiers button:hover { border-color: var(--accent); color: var(--text); }
.tg-tiers button.on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.tg-tiers button.locked { text-decoration: line-through; opacity: 0.6; }
.tg-tiers button.locked.on { background: var(--warn); border-color: var(--warn); }
.tg-tiers.cape-pick button { width: 11em; padding: 4px 8px; text-align: left; }
.lft-step input.cape-count { width: 4.5em; margin-left: 4px; font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.lft-form .need { margin: 14px 0 12px; }
.lft-form .actions { align-items: center; margin-bottom: 0; }
.lft-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 10px; }
.lft-facts div { display: contents; }
.lft-facts dt { color: var(--muted); }
.lft-facts dd { margin: 0; }
.lft-mine { border-color: var(--ok); }
.zpill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.9rem; }
.zpill.small { padding: 0 8px; margin: 1px 4px 1px 0; font-size: 0.8rem; }
.lft-table td { vertical-align: top; white-space: normal; }
.tag.now { background: none; border: 1px solid var(--ok); color: var(--ok); }
.controls h2.grow { margin: 0; align-self: center; }

/* Levels */
.lv-bar { align-items: center; }
.levels th, .levels td { text-align: center; }
.levels tbody th { text-align: left; font-weight: 600; }
.levels td { font-size: 0.85rem; line-height: 1.35; min-width: 76px; }
.levels td > span { display: block; }
.levels td.na { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--row-alt) 6px 12px); }
.levels td.can-lead, .legend i.can-lead { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.levels td.can-join, .legend i.can-join { background: var(--accent-soft); }
.levels td.cant, .legend i.cant { background: color-mix(in srgb, var(--err) 10%, transparent); }
.levels tr.group th, .nw-table tr.group th { text-align: left; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 14px; }
.levels.edit td label { display: flex; align-items: center; justify-content: space-between; gap: 4px; color: var(--muted); font-size: 0.75rem; }
.levels.edit td input { width: 4.2em; font: inherit; font-size: 0.85rem; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; }
.levels.edit td.changed { background: var(--accent-soft); }
.levels .ref { display: block; color: var(--muted); font-size: 0.72rem; }
.legend.small i { width: 14px; height: 10px; border: 1px solid var(--border); margin-left: 8px; }

/* Permissions */
.perm-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 10px; }
.perm-list div { display: contents; }
.perm-list dt { font-weight: 600; }
.perm-list dd { margin: 0; color: var(--muted); }
.perm-table td.c, .perm-table th { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.perm-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* Guild > Profiles is drawn in the Armory's section, without the Armory's character picker. */
body[data-page="profile"] #armoryTabs .meta { display: none; }
.group-tabs button { font-size: 0.9rem; padding-left: 10px; padding-right: 10px; }
/* Another member's character in the Armory (opened from their profile). */
.viewing { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 16px 0; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.viewing[hidden] { display: none; }
body:is([data-module="combat"], [data-module="skilling"], [data-module="collection"], [data-module="inventory"]) .viewing { max-width: calc(1680px - 32px); }
/* The Armory's prices are the saved copy (armory/js/finder.js loadMarket). */
.market-saved { margin: 10px 16px 0; }
.market-saved[hidden] { display: none; }
body:is([data-module="combat"], [data-module="skilling"], [data-module="collection"], [data-module="inventory"]) .market-saved { max-width: calc(1680px - 32px); }

/* Collections and Bestiary (site/collections.js; also the profile's tabs) */
.book-head .home-head { margin-bottom: 6px; }
.book-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.book-stats > div { display: flex; flex-direction: column; }
.book-stats b { font-size: 1.35rem; }
.book-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.book-controls label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.book-search {
  font: inherit; color: var(--text); background: var(--panel); width: min(320px, 100%);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
}
.book-cat + .book-cat { margin-top: 18px; }
.book-cat h3 { margin: 0 0 8px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 6px; }
.book-tile {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border); border-left: 4px solid var(--tier, var(--border)); background: var(--panel); font-variant-numeric: tabular-nums;
}
.book-icon { width: 36px; height: 36px; flex: none; }
.book-text { min-width: 0; flex: 1; line-height: 1.25; }
.book-name, .book-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-name { font-size: 0.86rem; }
.book-n { font-size: 0.86rem; }
.book-n .muted { font-size: 0.8rem; }
.book-tile.t-gray { opacity: 0.55; }
.book-tile.t-white { --tier: #b9b4a6; }
.book-tile.t-green { --tier: #4caf50; }
.book-tile.t-blue { --tier: #3f8fe0; }
.book-tile.t-purple { --tier: #9a5ce0; }
.book-tile.t-red { --tier: #e0524a; }
.book-tile.t-orange { --tier: #f0962e; }
.book-tile.t-rainbow { border-left-color: transparent; border-image: linear-gradient(#e0524a, #f0962e, #e2b84a, #4caf50, #3f8fe0, #9a5ce0) 1; border-left-width: 4px; }
.book-tile.book-mine { background: var(--accent-soft); border-color: var(--accent); border-left-color: var(--tier, var(--accent)); }
.book-table td { vertical-align: middle; }
.book-row-name { display: inline-flex; align-items: center; gap: 8px; }
.book-row-name .book-icon { width: 26px; height: 26px; }
.book-row-name .small { margin-left: 4px; }
@media (max-width: 520px) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .book-icon { width: 28px; height: 28px; } }

/* Proposed updates: on Feedback posts (site/feedback.js), and Admin > Proposals and Updates (site/updates.js) */
.tag.fb-prop { background: none; border: 1px solid var(--accent); color: var(--accent); }
.tag.fb-prop.p-rejected { border-color: var(--border); color: var(--muted); }
.tag.fb-prop.p-shipped { border-color: var(--ok); color: var(--ok); }
.fb-proposal { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; }
.fb-proposal > p { margin: 0 0 6px; }
.fb-notes { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fb-notes p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-note-x { font-size: 0.75rem; margin-left: 6px; color: var(--muted); }
.fb-context-box { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.fb-context-box p { margin: 0; }
.fb-context-box textarea { font: inherit; color: var(--text); background: var(--panel); width: 100%; border: 1px solid var(--accent); border-radius: 8px; padding: 6px 8px; resize: vertical; }
.fb-context-box .actions-inline { align-items: center; }
.fb-context-box label.btn { cursor: pointer; }
.fb-context-box label.btn.disabled { opacity: 0.5; pointer-events: none; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fb-thumbs img { display: block; max-width: 160px; max-height: 110px; border-radius: 6px; border: 1px solid var(--border); object-fit: cover; background: var(--row-alt); }
.fb-thumb { position: relative; }
.fb-thumb-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0, 0, 0, 0.7); color: #fff; font: inherit; line-height: 1; }
body[data-module="admin"]:is([data-page="proposals"], [data-page="updates"]) :is(main, .top) { max-width: 1040px; }
.up-card { padding: 14px 0; border-top: 1px solid var(--border); }
.up-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.up-card header h3 { margin: 0; overflow-wrap: anywhere; }
.up-card > p { margin: 4px 0 0; }
.up-card h4, .up-summary h4 { margin: 14px 0 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.up-card .fb-field { margin: 10px 0 8px; }
.up-card .fb-field textarea, .up-send textarea, .up-revise textarea { font: inherit; color: var(--text); background: var(--panel); width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; resize: vertical; }
.up-pick.on { border-left: 3px solid var(--accent); padding-left: 12px; }
.up-pick-box { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 6px; font-weight: 600; }
.up-send { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
h2.inline { display: inline; font-size: 1rem; }
.up-simple { margin: 8px 0; padding-left: 18px; }
.up-top { margin-bottom: 12px; align-items: center; }
.up-batch header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.up-batch header h2 { margin: 0; }
.up-batch-posts { margin: 6px 0; }
.tag.up-pill { background: var(--row-alt); color: var(--muted); }
.tag.up-pill.ok, .tag.up-pill.risk-low { background: none; border: 1px solid var(--ok); color: var(--ok); }
.tag.up-pill.warn, .tag.up-pill.risk-medium { background: none; border: 1px solid var(--warn); color: var(--warn); }
.tag.up-pill.err, .tag.up-pill.risk-high { background: none; border: 1px solid var(--err); color: var(--err); }
.up-summary { margin-top: 10px; }
.up-headline { font-size: 1.15rem; font-weight: 600; margin: 0 0 6px; }
.up-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.up-summary ul, .up-summary ol { margin: 0; padding-left: 20px; }
.up-summary li { margin: 3px 0; }
.up-items { list-style: none; padding-left: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.up-items p { margin: 3px 0 0; }
.up-membernote { padding-left: 10px; border-left: 3px solid var(--accent); }
.up-questions { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--warn); border-radius: 8px; }
.up-questions h4 { margin-top: 0; color: var(--warn); }
.up-under { margin-top: 14px; }
.up-files { list-style: none; padding-left: 0 !important; }
.up-files .ok { color: var(--ok); }
.up-files .err { color: var(--err); }
.up-log { white-space: pre-wrap; font-size: 0.75rem; max-height: 240px; overflow: auto; background: var(--row-alt); padding: 8px; border-radius: 6px; }
.up-decide { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); align-items: start; }
.up-decide p { margin: 6px 0 0; }
@media (max-width: 760px) { .up-decide { grid-template-columns: 1fr; } }
.up-rounds { margin-top: 12px; }
.up-rounds ul { padding-left: 18px; }
.up-working { display: flex; align-items: center; gap: 8px; }
.warn-text { color: var(--warn); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: up-spin 0.9s linear infinite; flex: none; }
@keyframes up-spin { to { transform: rotate(360deg); } }

/* Guild Trials (site/trials.js), in development. */
body[data-module="trials"] main, body[data-module="trials"] .top { max-width: 1040px; }
.trial-group { margin: 6px 0 8px; }
.trial-card .trial-name { font-weight: 650; margin: 2px 0; }
.trial-card .label .tag { margin-left: 4px; }
.trial-steps { padding-left: 20px; display: grid; gap: 10px; }
.trial-steps li.done strong { color: var(--ok); }
.trial-settings { margin: 8px 0; }
/* Trials > My build (site/trialbuild.js) */
.tb-best td { background: var(--accent-soft); }
.tb-score { font-weight: 600; }
.tb-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tb-compare h3 { margin: 4px 0; }
.tb-setup { margin: 4px 0; padding-left: 1.4em; }
.tb-setup li { margin: 3px 0; }
.trial-picker { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; }
.trial-copy { width: 100%; font: 0.82rem/1.4 ui-monospace, monospace; margin: 6px 0; }
.trial-publish { margin-top: 10px; align-items: center; }
/* The plans (site/trialplan.js): figures and a card per trial up top, settings folded away, then one list of members
   with a tab per trial and a search. */
body[data-page="trialsummary"] main, body[data-page="trialsummary"] .top,
body[data-page="trialskill"] main, body[data-page="trialskill"] .top,
body[data-page="trialcombat"] main, body[data-page="trialcombat"] .top,
body[data-page="trialbuildings"] main, body[data-page="trialbuildings"] .top,
body[data-page="trialdummies"] main, body[data-page="trialdummies"] .top { max-width: 1240px; }
.tp-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.tp-title h2, .tp-title h3 { margin: 0; }
.tp-title .trial-publish { margin-top: 0; }
.tp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; margin: 12px 0; }
.tp-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--row-alt); }
.tp-stat .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tp-stat strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tp-stat strong small { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.tp-stat.total strong { font-size: 1.9rem; color: var(--accent); }
.tp-stat.up .muted { color: var(--ok); }
.tp-stat.warn strong { color: var(--warn); }
.tp-stat.ok strong { color: var(--ok); }
.tp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: inherit;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); cursor: pointer; }
.tp-card:hover { border-color: var(--accent); }
.tp-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.tp-card-name { font-weight: 650; }
.tp-card-tier { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.2; }
/* Trials > Plan > Sign-ups sim (site/triallive.js): the week's trials, each one tier by tier, and simmed against real. */
.tl-week th, .tl-reach th, .tl-history th { white-space: nowrap; }
.tl-reach td { line-height: 1.2; }
.tl-trial { margin-top: 10px; }
.tl-trial summary { cursor: pointer; }
.tp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; }
.tp-actions .tp-buttons { margin-left: auto; display: flex; gap: 6px; }
.tp-settings > summary { cursor: pointer; }
.tp-settings .trial-settings { align-items: flex-start; margin: 4px 0 10px; }
.tp-checks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; }
.tp-settings[open] > summary { margin-bottom: 8px; }
.tp-list { padding-top: 10px; scroll-margin-top: 12px; }
.tp-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.tp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-tabs button { font: inherit; font-size: 0.9rem; color: inherit; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; cursor: pointer; }
.tp-tabs button:hover { border-color: var(--accent); }
.tp-tabs button.on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.tp-count { font-size: 0.78rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
.tp-search { margin-left: auto; min-width: 12em; flex: 0 1 16em; }
.tp-table td, .tp-table th { padding: 4px 8px; vertical-align: middle; }
.tp-table tbody tr:hover { background: var(--row-alt); }
.tp-table select { font-size: 0.82rem; padding: 2px 6px; min-height: 26px; border-radius: 6px; }
.tp-who { white-space: nowrap; }
.tp-build { max-width: 30ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-build select { max-width: 11em; margin-right: 4px; }
.tp-role { white-space: nowrap; }
/* A combat boss's members: fixed columns, one line each, cut short where they don't fit (in full on hover). */
.tp-fixed { table-layout: fixed; min-width: 720px; }
.tp-fixed td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-fixed .tp-build { max-width: none; }
.tp-fixed .tp-build select { max-width: 48%; }
.tp-fixed td select { max-width: 100%; }
.tp-fixed .tp-role select { width: 100%; }
.tp-fixed th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-fixed tr.trial-role th { overflow: visible; }
.tp-copy { margin-top: 10px; }
.trial-role th { text-align: left; padding-top: 10px; border-bottom: 1px solid var(--border); }
/* Summary: the two plans side by side, each trial's points as a bar. */
.tp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 14px; align-items: start; }
.tp-summary > .panel { min-width: 0; }
.tp-summary tfoot th, .tp-summary tfoot td { border-bottom: 0; font-weight: 650; color: inherit; }
.tp-bar { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: var(--row-alt); border: 1px solid var(--border); vertical-align: middle; overflow: hidden; }
.tp-bar > span { display: block; height: 100%; background: var(--accent-fill); }
.tp-bar.tp-bar-gap { visibility: hidden; }
@media (max-width: 600px) { .tp-search { margin-left: 0; flex: 1 1 100%; } .tp-actions .tp-buttons { margin-left: 0; }
  .tp-stat strong { font-size: 1.2rem; } .tp-stat.total strong { font-size: 1.5rem; } .tp-bar { display: none; } }
/* Trials > Buildings (site/trialplan.js renderBuildings): a row per building, grouped by what it raises. A skill's
   building with no trial this week is greyed, its gain a "no trial this week" figure. */
.gb-table { min-width: 640px; }
.gb-table td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.gb-table thead th { vertical-align: bottom; }
.gb-table thead th.num { white-space: nowrap; }
.gb-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gb-what { min-width: 30ch; }
.gb-what > div + div { margin-top: 2px; }
.gb-name { font-weight: 650; }
.gb-name .tag { margin-left: 4px; vertical-align: 1px; }
.gb-effect { color: var(--text); opacity: 0.85; }
.gb-off .gb-name, .gb-off td.num, .gb-off .gb-effect { color: var(--muted); }
.gb-ifdrawn small { font-size: 0.75rem; }
.gb-perk .tp-bar { margin-left: 6px; }
.gb-bar-off > span { background: var(--border); }
.gb-top > td { background: var(--accent-soft); }
.gb-top > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.gb-benefit { color: var(--text); line-height: 1.45; }
.gb-benefit > div { margin-top: 3px; }
.gb-big { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.gb-up { color: var(--ok); }
.gb-coins { color: var(--muted); white-space: nowrap; }
.gb-cant { color: var(--warn); }
.gb-table .btn { white-space: nowrap; }
.gb-votes { min-width: 8ch; white-space: normal !important; }
.gb-votes .small { max-width: 18ch; margin-left: auto; }
.gb-idle { margin-top: 4px; }
.gb-idle summary { cursor: pointer; }
.gb-other td:last-child { min-width: 36ch; }
.gb-tabs { margin-bottom: 12px; }
.gb-tabhead { align-items: center; margin-bottom: 6px; }
.gb-tabhead p { margin: 0; flex: 1 1 24em; }
@media (max-width: 600px) { .gb-table { min-width: 0; } .gb-what { min-width: 18ch; } .gb-other td:last-child { min-width: 24ch; }
  .gb-table td, .gb-table th { padding-left: 5px; padding-right: 5px; } }
/* Trials > Dummies (site/trialplan.js renderDummies): members, assumptions, loadouts and custom dummies, each a tab. */
.dm-src { display: inline-block; font-size: 0.7rem; padding: 0 5px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); vertical-align: 1px; }
.dm-members input[type="number"], .dm-assume input[type="number"] { width: 4.5em; }
.dm-members tr.dm-missing td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.dm-assume td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.dm-assume { table-layout: fixed; width: 100%; min-width: 760px; }
.dm-assume th:nth-child(1) { width: 30%; } .dm-assume th:nth-child(2), .dm-assume th:nth-child(3) { width: 26%; }
.dm-assume .dm-help { margin-top: 2px; line-height: 1.35; }
.dm-assume tr.dm-set td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.dm-input { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dm-input .btn { padding: 2px 8px; font-size: 0.8rem; }
.dm-loadouts { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 16px; align-items: start; }
.dm-kinds { display: flex; flex-direction: column; gap: 4px; }
.dm-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: none; }
.dm-kind:hover { border-color: var(--accent); }
.dm-kind.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.dm-kind-name { font-weight: 650; }
.dm-editor { min-width: 0; }
.dm-editor h4 { margin: 14px 0 6px; }
.dm-editor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.dm-editor-head h3 { margin: 0; }
.dm-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dm-seg button { font: inherit; font-size: 0.85rem; color: inherit; padding: 4px 10px; border: 0; border-right: 1px solid var(--border); background: none; cursor: pointer; }
.dm-seg button:last-child { border-right: 0; }
.dm-seg button:hover { background: var(--row-alt); }
.dm-seg button.on { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.dm-seg button.own:not(.on)::after { content: " ●"; color: var(--accent); }
.dm-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.dm-slot { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--row-alt); min-width: 0; }
.dm-slot.dm-empty { background: none; border-style: dashed; }
.dm-slot-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.dm-slot-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.dm-slot select { flex: 1 1 auto; min-width: 0; width: 100%; font-size: 0.85rem; }
.dm-enh { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; color: var(--muted); }
.dm-enh input { width: 3.6em; }
.dm-enh.overridden input { text-decoration: line-through; opacity: 0.6; }
@media (max-width: 760px) { .dm-loadouts { grid-template-columns: 1fr; } .dm-kinds { flex-direction: row; flex-wrap: wrap; } .dm-kind { flex: 1 1 140px; } }
/* The boss weights: this week's bosses shaded, each style's best boss in green. */
.trial-weights td.trial-week, .trial-weights th.trial-week { background: var(--accent-soft); }
.trial-weights .trial-best { color: var(--ok); font-weight: 650; }
/* Your Guild Trials assignments (site/trialmine.js), at the top of Home and This week. */
.trial-mine { border-left: 3px solid var(--accent); margin-bottom: 14px; }
.trial-mine-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.trial-mine-head h3 { margin: 0; }
.trial-mine-row { display: grid; grid-template-columns: 5.5em auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 4px 0; }
.trial-mine-row .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.trial-mine-what strong { font-size: 1.15rem; }
@media (max-width: 600px) { .trial-mine-row { grid-template-columns: 5.5em minmax(0, 1fr); } .trial-mine-row > :last-child { grid-column: 1 / -1; } }
/* Trials > My trials (site/trials.js): a member's two trials, big, with what to do about each. */
.trial-my { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.trial-my-card { padding: 14px 16px; }
.trial-my-card .label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.trial-my-name { font-size: 1.6rem; font-weight: 700; margin: 2px 0 6px; overflow-wrap: anywhere; }
.trial-my-card p { margin: 4px 0; }
.trial-todo { margin-top: 10px !important; padding: 8px 10px; border-radius: 8px; background: var(--row-alt); }
.trial-todo.ok { color: var(--ok); background: none; border: 1px solid var(--ok); }
.trial-todo.warn { color: var(--warn); background: none; border: 1px solid var(--warn); font-weight: 600; }
.trial-note { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.trial-note p { margin: 0; white-space: pre-wrap; }
.trial-note p.small { margin-top: 4px; white-space: normal; }
.trial-officer ul { padding-left: 18px; }
.trial-note-edit { display: grid; gap: 4px; margin-top: 8px; }
.trial-note-edit textarea { width: 100%; font: inherit; }
/* Trials > This week (site/trials.js): its tabs, the plan against the sign-ups, and Announce. */
.trial-week-bar { align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.trial-week-bar h2 { margin: 0; margin-right: auto; }
.ok-text { color: var(--ok); }
.trial-fix { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0; padding: 10px 14px;
  border: 1px solid var(--warn); border-radius: 8px; }
.trial-fix .actions { margin: 0; }
.trial-fill { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin: 6px 0 2px; }
.trial-fill .bar { flex: 1 0 100%; height: 5px; border-radius: 3px; background: var(--row-alt); overflow: hidden; }
.trial-fill .bar span { display: block; height: 100%; background: var(--ok); }
.trial-signups-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.trial-signups-head h3 { margin: 0; }
.trial-signups tr.fix td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.trial-signups td .tag { margin-left: 2px; }
.trial-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 14px; align-items: start; }
.trial-post h3 { margin-top: 0; }
.trial-post .actions { flex-wrap: wrap; }
.trial-post-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; margin: 6px 0; padding: 8px 10px;
  font: 0.8rem/1.45 ui-monospace, monospace; background: var(--row-alt); border-radius: 6px; }
.trial-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.trial-chip { font: inherit; font-size: 0.9rem; cursor: pointer; border: 1px solid var(--warn); border-radius: 999px; padding: 3px 12px;
  background: var(--panel); color: var(--text); }
.trial-chip:hover { border-color: var(--accent); color: var(--accent); }
.trial-chip.done { border-color: var(--border); color: var(--muted); }

/* Opening a page holds the old one on screen until the new one has drawn (site/main.js route), then swaps at once. */
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }

/* Guild > Portrait (site/portrait.js): the guild posed in front of its hall. */
body[data-page="portrait"] :is(main, .top) { max-width: 1680px; }
.pt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; }
/* No taller than the window: a tall picture (many rows) narrows, centered, rather than run off the bottom. */
.pt-frame { width: min(100%, max(880px, calc((100vh - 24px) * var(--pt-ar, 9)))); margin-inline: auto; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: #05050f; box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); }
.pt-scene { display: block; width: 100%; min-width: 880px; height: auto; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.pt-member, .pt-plate { cursor: pointer; }
/* A name over a head (site/portrait.js chatName): chat icons, then the name in the game's chat color (/api/namecolors.css), outlined dark. */
.pt-name { display: flex; justify-content: center; align-items: center; gap: 0.12em; height: 100%; font-weight: 700; line-height: 1.2; white-space: nowrap;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #000); }
/* In a raid or the fight club, each name on a dark pill with a heavier outline, so it reads over the bolts and beams. */
.pt-raid .pt-name { width: fit-content; margin-inline: auto; padding: 0 0.32em; border-radius: 0.45em; background: rgb(8 6 14 / 0.62);
  filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1.5px #000) drop-shadow(0 1px 1px #000); }
.pt-name .chat-name { display: inline-grid; }
.pt-name .chat-name > span { grid-area: 1 / 1; }
.pt-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.pt-member { filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.55)); transition: filter 0.15s; }
.pt-member:hover { filter: drop-shadow(0 0 8px #ffd54a) brightness(1.08); }
/* The elite fight club's panel under the picture: this fight's log beside the elite's chances and records. */
.pt-elite { margin: 12px auto 0; max-width: 1100px; }
.pt-elite-head { margin-bottom: 8px; }
.pt-elite-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .pt-elite-cols { grid-template-columns: 1fr; } }
.pt-elite-log { list-style: none; margin: 6px 0 0; padding: 0; min-height: 14em; font-variant-numeric: tabular-nums; }
.pt-elite-log li { padding: 2px 6px; border-left: 3px solid transparent; }
.pt-elite-log li.a { border-left-color: #4ad86a; }
.pt-elite-log li.b { border-left-color: #ff7a5a; }
.pt-elite-log li.end { border-left-color: var(--accent); font-weight: 700; color: var(--accent); }
.pt-elite-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pt-elite-table th, .pt-elite-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.pt-elite-table tr.out td { opacity: 0.5; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 10px 0 24px; }
.pt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1px solid #0006; vertical-align: -1px; }
/* The leader's scene preview and schedule, above the picture. */
.pt-plan { display: grid; gap: 10px; padding: 12px 14px; margin: 12px 0 0; }
.pt-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.pt-plan .seg button small { margin-left: 6px; font-size: 0.75em; color: var(--muted); font-weight: 400; }
.pt-plan .note { margin: 0; }
.pt-sched summary { cursor: pointer; color: var(--accent); width: fit-content; }
.pt-sched > p { margin: 8px 0 0; }
.pt-sched-rows { display: grid; gap: 6px; margin: 10px 0; }
.pt-sched-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-sched input[type="date"] { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; min-height: 34px; }
.pt-sched input.pt-message { width: 17em; }
.pt-sched-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pt-tag { font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.pt-tag.past { background: none; color: var(--muted); }
/* The campfire's flames flicker, its light breathes and its embers rise. */
.pt-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pt-flicker 1.1s ease-in-out infinite alternate; }
@keyframes pt-flicker { 0% { transform: scale(1, 1) skewX(0deg); } 45% { transform: scale(0.95, 1.07) skewX(2deg); } 100% { transform: scale(1.04, 0.94) skewX(-2deg); } }
.pt-ember { transform-box: fill-box; opacity: 0; animation: pt-rise 3.4s linear infinite; }
@keyframes pt-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), -240px); opacity: 0; } }
.pt-firelight { animation: pt-breathe 2.6s ease-in-out infinite alternate; }
@keyframes pt-breathe { from { opacity: 0.8; } to { opacity: 1; } }
/* The Thanksgiving feast's leaves sway in the air. */
.pt-leaf { transform-box: fill-box; transform-origin: center; animation: pt-sway 4.5s ease-in-out infinite alternate; }
@keyframes pt-sway { from { transform: translate(-6px, -5px) rotate(-25deg); } to { transform: translate(6px, 5px) rotate(25deg); } }
/* The Memorial switch, and the lost members floating behind the guild as ghosts (each with its nameplate, in step). */
.pt-switch { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 5px; cursor: pointer; }
.pt-switch:disabled { opacity: 0.55; cursor: default; }
.pt-mem-hint { color: var(--accent); }
.pt-knob { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--border); transition: background 0.15s; }
.pt-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0005; transition: transform 0.15s; }
.pt-switch[aria-checked="true"] .pt-knob { background: #7fa8e0; }
.pt-switch[aria-checked="true"] .pt-knob::after { transform: translateX(14px); }
.pt-mem-about { margin: 0 0 12px; }
/* The memorial's editor, closed until opened: the ghosts as chips, the picked one's looks, the ones added by hand. */
.pt-mem { padding: 8px 14px; margin: 0 0 12px; }
.pt-mem > summary { cursor: pointer; }
.pt-mem[open] > summary { margin-bottom: 10px; }
.pt-mem-find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.pt-mem-find input { width: 14em; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 8.5em; overflow-y: auto; }
.pt-chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 0.8rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px 1px 2px; cursor: pointer; }
.pt-chip svg { border-radius: 50%; background: #0c0f1e; flex: none; }
.pt-chip:hover { border-color: #7fa8e0; }
.pt-chip.epic { border-color: #b8913a; color: #e2b84a; }
.pt-chip.on { background: #7fa8e0; border-color: #7fa8e0; color: #0c0f1e; }
.pt-chip[hidden] { display: none; }
.pt-look { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.pt-look-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pt-look-head svg { border-radius: 8px; background: #0c0f1e; }
.pt-look-head [data-pick-ghost] { margin-left: auto; }
.pt-look-label { margin: 10px 0 4px; }
.pt-epics, .pt-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-tiles { max-height: 88px; overflow-y: auto; }
.pt-tiles + .pt-tiles { margin-top: 6px; }
.pt-epic, .pt-tile { font: inherit; padding: 2px; border-radius: 8px; background: #0c0f1e; border: 2px solid transparent; cursor: pointer; }
.pt-epic { display: grid; justify-items: center; padding: 2px 4px; color: #e2b84a; font-size: 0.75rem; }
.pt-epic svg, .pt-tile svg { display: block; }
.pt-epic:hover, .pt-tile:hover { border-color: #7fa8e0; }
.pt-epic.on { border-color: #e2b84a; }
.pt-epic.notable { color: #c8d0dc; }
.pt-epic.notable.on { border-color: #c8d0dc; }
.pt-chip.notable { border-color: #8a94aa; }
.pt-tile.on { border-color: #7fa8e0; }
.pt-mem-hand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pt-hand { display: inline-flex; align-items: center; gap: 2px; font-size: 0.85rem; padding: 0 2px 0 8px; border: 1px solid var(--border); border-radius: 999px; }
.pt-hand button { padding: 0 5px; font-size: 1rem; line-height: 1.2; }
.pt-mem-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pt-mem-add input { width: 10em; }
.pt-mem-add input[name="note"] { width: 14em; }
.pt-ghost, .pt-ghost-plate { animation: pt-float 5.5s ease-in-out infinite; }
.pt-ghost[data-char], .pt-ghost-plate[data-char] { cursor: pointer; }
.pt-ghost[data-char]:hover { filter: drop-shadow(0 0 8px #9fd0ff) brightness(1.1); }
@keyframes pt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* Bronto Burger: the neon buzzes now and then, the whompah's gates shimmer and the lights on its spires and poles blink. */
.pt-neon { animation: pt-buzz 7s steps(1) infinite; }
@keyframes pt-buzz { 0%, 90%, 96%, 100% { opacity: 1; } 91%, 94% { opacity: 0.3; } 92.5% { opacity: 0.85; } }
.pt-gate { animation: pt-shimmer 2.4s ease-in-out infinite; }
@keyframes pt-shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.pt-beacon { animation: pt-blink 3s steps(1) infinite; }
.pt-beacon.alt { animation-delay: -1.5s; }
@keyframes pt-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.35; } }
/* The Beast's pad and the guardian towers' orbs pulse; the tower field's beams throb. */
.pt-pulse, .pt-throb { animation: pt-throb 2.6s ease-in-out infinite; }
@keyframes pt-throb { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
/* Costume con's passers-by walk the aisle, each way at their own pace (--dur, --delay), stepping as they go. */
.pt-walker { animation: pt-walk var(--dur) linear var(--delay) infinite; }
.pt-walker.back { animation-name: pt-walkback; }
.pt-step { animation: pt-step 0.42s ease-in-out infinite alternate; }
@keyframes pt-walk { from { transform: translateX(-220px); } to { transform: translateX(1820px); } }
@keyframes pt-walkback { from { transform: translateX(1820px); } to { transform: translateX(-220px); } }
@keyframes pt-step { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .pt-flame, .pt-ember, .pt-firelight, .pt-leaf, .pt-ghost, .pt-ghost-plate, .pt-neon, .pt-gate, .pt-beacon, .pt-pulse, .pt-throb, .pt-step { animation: none; } .pt-ember { opacity: 0.8; }
  .pt-walker, .pt-walker.back { animation: none; transform: translateX(var(--rest)); } }