/*! GemstoneWoW panel kit: panel.css (wow-design, 2026-10-09).
 * The parts only the bug panel has, drawn in the main site's own tokens and shapes (core.min.css: --gem-* colours,
 * bevelled clip-path corners, gold metal rims, Cinzel caps labels, ice focus on inputs, no border radius anywhere).
 * Everything here is a kit class (wk-*) or a kit context for a main-site class; the main site's sheets stay unchanged.
 * Sections: 1 page-local tokens, 2 header and drawer additions, 3 icons and avatars, 4 band, row and page, 5 chips,
 * status and priority, 6 report parts (facts, description, files, drop zone, counter, progress), 7 thread additions,
 * 8 lists and staff tools, 9 dialog, 10 message page, 11 small utilities, 12 phones, motion, forced colours.
 */

/* ---- 1. Page-local tokens the copied blocks read (values as the main site sets them on its own pages) ------------ */
.wk-body {
  /* changelog.min.css (.changelog-page) */
  --cl-rim: rgba(201, 164, 76, 0.16);
  --cl-rim-lit: rgba(201, 164, 76, 0.42);
  /* article.min.css (.news-article-page) */
  --art-rim: rgba(201, 164, 76, 0.18);
  --art-rim-lit: rgba(201, 164, 76, 0.42);
  --art-rim-ui: rgba(201, 164, 76, 0.62);
  --art-plate: rgba(7, 17, 29, 0.72);
  /* guide.min.css (.guide-section) */
  --g-ice-rim: rgba(143, 216, 245, 0.34);
  --g-ice-glow: rgba(143, 216, 245, 0.55);
  --g-metal-rim: rgba(201, 164, 76, 0.26);
  --g-lit: rgba(244, 220, 154, 0.22);
  /* ladder.min.css (.lad-rankings) */
  --lad-rim-ui: rgba(201, 164, 76, 0.72);
  --lad-rim: rgba(201, 164, 76, 0.34);
  --lad-hair: rgba(201, 164, 76, 0.15);
  /* user-panel.min.css (.user-panel) for controls outside it */
  --ctl-rim: #7e7153;
  /* kit */
  --wk-red: #ef4444;
  --wk-red-soft: #f87171;
  --wk-red-ink: #fecaca;
  --wk-cut-sm: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  --wk-cut: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --wk-cut-lg: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ---- 2. Header and drawer additions ------------------------------------------------------------------------------- */
/* Log out is a POST form with the token: its button is drawn exactly like the main site's .wow-dropdown-danger link. */
.wk-logout { margin: 0; }
.wow-dropdown .wk-logout__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 10px 13px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  color: #fca5a5;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.wow-dropdown .wk-logout__btn::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 5px;
  height: 5px;
  background: #f87171;
  transform: translateY(-50%) rotate(45deg) scale(0);
  transition: transform 0.2s var(--gem-ease);
}
.wow-dropdown .wk-logout__btn:hover,
.wow-dropdown .wk-logout__btn:focus-visible {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  padding-left: 19px;
}
.wow-dropdown .wk-logout__btn:hover::before,
.wow-dropdown .wk-logout__btn:focus-visible::before { transform: translateY(-50%) rotate(45deg) scale(1); }
.wow-dropdown .wk-logout__btn .bc-li-icon { color: #fca5a5; }
.wow-dropdown .wk-logout__btn:focus-visible { outline: 2px solid var(--gem-accent); outline-offset: -2px; }
/* the drawer's version (#offcanvas_nav .uk-nav-default > li > a + .wow-drawer-danger) */
#offcanvas_nav .wk-logout__btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 12px 10px;
  font-family: 'Cinzel', 'Cinzel Fallback Georgia', 'Cinzel Fallback Times', 'Cinzel Fallback Noto', serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: #fca5a5;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
#offcanvas_nav .wk-logout__btn:hover,
#offcanvas_nav .wk-logout__btn:focus-visible {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border-left-color: #f87171;
}
#offcanvas_nav .wk-logout__btn .bc-li-icon { width: 22px; flex: none; text-align: center; color: #fca5a5; }
/* Main site defect not copied: its drawer list shows browser bullets (the UIkit carve-out lost .uk-nav's list-style).
   The markers sit outside the list, so hiding them changes nothing else. */
#offcanvas_nav .uk-nav-default { list-style: none; }
/* The panel's own pages in the drawer use the kit icons inside the main site's 22 px icon cell. */
#offcanvas_nav .bc-li-icon .wk-i,
.wow-dropdown .bc-li-icon .wk-i { vertical-align: -0.125em; }
/* Under 640 px the main site hides the account name with display:none, which empties the chip's accessible name: the
   kit hides it visually only, so screen readers still hear "NAME, account menu". Same look. */
@media (max-width: 639px) {
  .wow-header .wow-account-name {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- 3. Icons and avatars ------------------------------------------------------------------------------------------ */
/* Sprite icons (assets/img/panel-icons.svg: Font Awesome 6.4.2 glyphs) sized like the main site's i.fa-solid. */
.wk-i {
  display: inline-block;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  overflow: visible;
  flex: none;
}
.wk-i--lg, i.wk-i--lg { font-size: 1.33em; line-height: 0.75; vertical-align: -0.2em; }
.wk-i--fw, i.wk-i--fw { width: 1.25em; text-align: center; }
.wk-i--unknown { opacity: 0.35; transform: scale(0.5); }
/* The main site's default avatar (ui-avatars: the first letter, bold, white on #0d77d5), drawn here without a request. */
.wk-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--wk-avatar, 32px);
  height: var(--wk-avatar, 32px);
  font-family: -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(var(--wk-avatar, 32px) * 0.5);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #0d77d5;
  text-transform: uppercase;
  user-select: none;
}
.wow-dropdown-head .wk-avatar,
.wow-drawer-id .wk-avatar { box-shadow: 0 0 0 1px var(--gem-metal-hi); }
.art-comment-avatar.wk-avatar { font-size: 1.2rem; }

/* ---- 4. Band, section row and page --------------------------------------------------------------------------------- */
/* The band's painting, in the main site's art hook (--cl-band-img), sized as the ladder sizes the same files. */
.wk-band--settlement { --cl-band-img: url('../img/ladder/cta-settlement.webp'); }
.wk-band--keep { --cl-band-img: url('../img/ladder/hero-keep.webp'); }
@media (max-width: 1599px) {
  .wk-band--settlement { --cl-band-img: url('../img/ladder/cta-settlement-1500.webp'); }
  .wk-band--keep { --cl-band-img: url('../img/ladder/hero-keep-1600.webp'); }
}
@media (max-width: 1099px) {
  .wk-band--settlement { --cl-band-img: url('../img/ladder/cta-settlement-1000.webp'); }
  .wk-band--keep { --cl-band-img: url('../img/ladder/hero-keep-1100.webp'); }
}
@media (max-width: 759px) {
  .wk-band--keep { --cl-band-img: url('../img/ladder/hero-keep-760.webp'); }
}
/* sharp when the owner zooms in (a zoomed window or a phone draws 2 device pixels per CSS pixel): one size step up */
@media (max-width: 1599px) and (min-resolution: 1.5dppx) {
  .wk-band--settlement { --cl-band-img: url('../img/ladder/cta-settlement.webp'); }
  .wk-band--keep { --cl-band-img: url('../img/ladder/hero-keep.webp'); }
}
@media (max-width: 1099px) and (min-resolution: 1.5dppx) {
  .wk-band--settlement { --cl-band-img: url('../img/ladder/cta-settlement-1500.webp'); }
  .wk-band--keep { --cl-band-img: url('../img/ladder/hero-keep-1600.webp'); }
}
@media (max-width: 759px) and (min-resolution: 1.5dppx) {
  .wk-band--settlement { --cl-band-img: url('../img/ladder/cta-settlement-1000.webp'); }
  .wk-band--keep { --cl-band-img: url('../img/ladder/hero-keep-1100.webp'); }
}
.wk-band--settlement .cl-band-art { background-position: 50% 30%; opacity: 0.62; }
.wk-band--keep .cl-band-art { background-position: 50% 40%; opacity: 0.55; }
/* The title reads over the painting: a soft night shade behind the text column only. */
.wk-band .cl-band-inner { z-index: 1; }
.wk-band .cl-band-title { max-width: 26ch; }
.wk-band .gem-eyebrow .wk-i,
.wk-band .gem-eyebrow i { color: var(--gem-gold); }
.wk-band-status { margin: 0 0 var(--gem-s3); }
.wk-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gem-s3);
  margin-top: var(--gem-s5);
}
.wk-band--compact { padding: clamp(var(--gem-s5), 3vw, var(--gem-s6)) 0 clamp(var(--gem-s4), 2.5vw, var(--gem-s5)); }
.wk-band--compact .cl-band-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.wk-band--compact .cl-band-rule { margin-top: var(--gem-s3); }
.wk-band--compact .cl-tally { margin-top: var(--gem-s4); }
/* a long title (a player's report title): the size of the main site's news article titles, a little smaller, so it
   does not fill the first screen; wowk_header adds the class itself above 48 characters */
.wk-band--long .cl-band-title { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.16; max-width: 36ch; }
/* The band sits flush on the section row (the guide's order: hero, row, content). */
.wk-band { margin-bottom: 0; }
/* the row: the guide's sticky rail; a "Staff" mark before the staff pages */
.wk-subnav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-s2);
  flex: 0 0 auto;
  margin-left: var(--gem-s3);
  padding: 0 var(--gem-s3) 0 var(--gem-s4);
  font-family: 'Cinzel', 'Cinzel Fallback Georgia', 'Cinzel Fallback Times', 'Cinzel Fallback Noto', serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gem-gold);
  border-left: 1px solid var(--g-metal-rim);
  white-space: nowrap;
}
.guide-nav > .wk-subnav__mark:first-child { margin-left: 0; padding-left: var(--gem-s2); border-left: 0; }
.guide-nav a .wk-i { color: var(--gem-ice); opacity: 0.75; }
.guide-nav a:hover .wk-i, .guide-nav a.is-active .wk-i { opacity: 1; }
/* the account area under the band */
.wk-page { padding-top: clamp(var(--gem-s5), 4vw, var(--gem-s6)); }
.wk-page--plain { padding-top: clamp(var(--gem-s6), 5vw, var(--gem-s7)); }
.wk-flash { margin-bottom: var(--gem-s5); }
.wk-flash > [uk-alert] + [uk-alert] { margin-top: var(--gem-s3); }
.wk-alert__body > :first-child { margin-top: 0; }
.wk-alert__body > :last-child { margin-bottom: 0; }
.wk-alert__list { margin: 4px 0 0; padding: 0; list-style: none; }
.wk-alert__list > li { position: relative; margin: 0; padding-left: 14px; font-size: 0.875rem; }
.wk-alert__list > li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; background: currentColor; opacity: 0.8; transform: rotate(45deg); }
.wk-alert__actions { display: flex; flex-wrap: wrap; gap: var(--gem-s4); margin: var(--gem-s2) 0 0; font-size: 0.85rem; }
/* cards stack with the account area's rhythm */
.wk-stack > :not(:first-child) { margin-top: var(--gem-s5); }
.user-form-card + .user-form-card,
.user-form-card + .lad-board,
.lad-board + .user-form-card { margin-top: var(--gem-s5); }
.lad-board + .lad-board { margin-top: var(--gem-s5); }
.user-form-header .wk-i { margin-right: var(--gem-s2); color: var(--gem-metal-hi); }
.wk-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-s3);
}
.wk-card-head .wk-card-note { margin: 0; color: var(--gem-ink-mute); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
/* main column + facts column (view page) */
.wk-split { display: grid; gap: var(--gem-s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .wk-split { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ---- 5. Chips, status and priority ---------------------------------------------------------------------------------- */
.wk-chip { white-space: nowrap; line-height: 1.35; }
.wk-chip .wk-i, .wk-chip i { font-size: 0.95em; }
.wk-chip--danger {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.42);
}
.wk-status { font-family: 'Cinzel', 'Cinzel Fallback Georgia', 'Cinzel Fallback Times', 'Cinzel Fallback Noto', serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; }
.wk-prio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gem-ink-soft);
  white-space: nowrap;
}
.wk-prio__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.wk-prio__bars i {
  display: block;
  width: 4px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.wk-prio__bars i:nth-child(1) { height: 5px; }
.wk-prio__bars i:nth-child(2) { height: 7px; }
.wk-prio__bars i:nth-child(3) { height: 9px; }
.wk-prio__bars i:nth-child(4) { height: 12px; }
.wk-prio__bars i.is-on { background: var(--gem-ink-mute); }
.wk-prio--medium .wk-prio__bars i.is-on, .wk-prio--normal .wk-prio__bars i.is-on { background: var(--gem-ice); }
.wk-prio--high { color: var(--gem-gold-hi); }
.wk-prio--high .wk-prio__bars i.is-on { background: var(--gem-gold); box-shadow: 0 0 6px rgba(217, 176, 87, 0.6); }
.wk-prio--critical, .wk-prio--urgent { color: #fecaca; }
.wk-prio--critical .wk-prio__bars i.is-on, .wk-prio--urgent .wk-prio__bars i.is-on { background: var(--wk-red-soft); box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
/* the ladder's class colours on a character name in the panel: <span class="char-name class-paladin"> */
.wk-char { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.wk-char__meta { color: var(--gem-ink-mute); font-size: 0.82rem; }

/* ---- 6. Report parts ------------------------------------------------------------------------------------------------ */
/* facts: the account area's caps labels over plain values */
.wk-kv { display: grid; gap: var(--gem-s4) var(--gem-s5); margin: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .wk-kv--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wk-kv > div { min-width: 0; }
.wk-kv dt {
  margin: 0 0 6px;
  font-family: 'Cinzel', 'Cinzel Fallback Georgia', 'Cinzel Fallback Times', 'Cinzel Fallback Noto', serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gem-ink-mute);
}
.wk-kv dd { margin: 0; color: var(--gem-ink); font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }
/* a report's own words: line breaks kept, long words wrapped */
.wk-desc {
  color: var(--gem-ink-soft);
  font-size: 0.95rem;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.wk-desc--box {
  padding: var(--gem-s4) var(--gem-s5);
  background: rgba(5, 9, 15, 0.55);
  border: 1px solid var(--gem-rim);
  border-left: 2px solid var(--gem-metal-hi);
}
.wk-meta { display: flex; flex-wrap: wrap; gap: var(--gem-s2) var(--gem-s4); margin: 0; padding: 0; list-style: none; color: var(--gem-ink-mute); font-size: 0.82rem; }
.wk-meta li { display: inline-flex; align-items: center; gap: 7px; }
.wk-meta .wk-i, .wk-meta i { color: var(--gem-metal-hi); }
/* field markers (the account area's form-label) */
.wk-label-req { color: var(--gem-gold); margin-left: 4px; }
.wk-label-opt { margin-left: 6px; color: var(--gem-ink-faint); font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.user-panel .user-field + .user-field { margin-top: var(--gem-s4); }
.user-panel .user-grid .user-field + .user-field { margin-top: 0; }
.user-panel .uk-select:not([multiple]):not([size]),
.user-panel .uk-input { width: 100%; }
/* the account area pads an input after its icon cell (.user-control .uk-input); a select gets the same */
.user-control .uk-select:not([multiple]):not([size]) { padding-left: 58px; }
.user-panel textarea.uk-textarea { width: 100%; }
/* file drop zone: the account area's control rim, dashed, an ice icon, the input reachable by keyboard */
.wk-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gem-s2);
  padding: var(--gem-s5) var(--gem-s4);
  text-align: center;
  color: var(--gem-ink-soft);
  background: rgba(5, 9, 15, 0.6);
  border: 1px dashed var(--ctl-rim);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.wk-drop:hover { border-color: rgba(201, 164, 76, 0.55); }
.wk-drop.is-over,
.wk-drop:focus-within {
  border-color: var(--gem-ice);
  background: rgba(5, 9, 15, 0.85);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(143, 216, 245, 0.26);
}
.wk-drop__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--gem-s1);
  transform: rotate(45deg);
  font-size: 1rem;
  color: var(--gem-ice);
  background: linear-gradient(135deg, rgba(201, 164, 76, 0.14), rgba(7, 17, 29, 0.9) 62%, rgba(5, 9, 15, 0.95));
  border: 1px solid var(--gem-metal);
}
.wk-drop__icon > * { transform: rotate(-45deg); }
.wk-drop__text { margin: 0; font-weight: 700; color: var(--gem-ink); }
.wk-drop__text u { color: var(--gem-gold); text-decoration-color: rgba(217, 176, 87, 0.5); text-underline-offset: 0.2em; }
.wk-drop__hint { margin: 0; color: var(--gem-ink-mute); font-size: 0.8rem; }
.wk-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.wk-drop__list { margin: var(--gem-s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--gem-s2); }
.wk-drop__list li {
  display: flex;
  align-items: center;
  gap: var(--gem-s3);
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--gem-ink-soft);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gem-rim);
  overflow-wrap: anywhere;
}
.wk-drop__list li .wk-i, .wk-drop__list li i { color: var(--gem-ice); }
.wk-drop__list li small { margin-left: auto; color: var(--gem-ink-mute); white-space: nowrap; }
.wk-drop__list li.is-bad { color: var(--wk-red-ink); border-color: rgba(239, 68, 68, 0.42); background: rgba(239, 68, 68, 0.08); }
/* attached files */
.wk-files { display: grid; gap: var(--gem-s3); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.wk-file {
  display: flex;
  align-items: center;
  gap: var(--gem-s3);
  min-width: 0;
  padding: var(--gem-s3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gem-rim);
  clip-path: var(--wk-cut);
}
.wk-file__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  color: var(--gem-ice);
  font-size: 1.3rem;
  background: rgba(5, 9, 15, 0.8);
  border: 1px solid var(--gem-metal);
  clip-path: var(--wk-cut-sm);
}
.wk-file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wk-file__meta { min-width: 0; flex: 1; }
.wk-file__name { display: block; color: var(--gem-ink); font-size: 0.86rem; font-weight: 700; overflow-wrap: anywhere; }
.wk-file__info { display: block; margin-top: 2px; color: var(--gem-ink-mute); font-size: 0.76rem; }
.wk-file__actions { display: flex; gap: var(--gem-s2); margin-top: var(--gem-s2); }
/* counter and progress */
.wk-counter { display: block; margin-top: var(--gem-s2); text-align: right; color: var(--gem-ink-mute); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.wk-counter.is-near { color: var(--gem-gold-hi); }
.wk-counter.is-over { color: var(--wk-red-soft); font-weight: 700; }
.wk-progress {
  display: block;
  width: 100%;
  height: 8px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--gem-metal);
  background: rgba(5, 9, 15, 0.8);
}
.wk-progress::-webkit-progress-bar { background: rgba(5, 9, 15, 0.8); }
.wk-progress::-webkit-progress-value { background: var(--gem-arc-flat); }
.wk-progress::-moz-progress-bar { background: var(--gem-arc-flat); }
.wk-progress-label { display: block; margin-top: 6px; color: var(--gem-ink-mute); font-size: 0.78rem; }

/* ---- 7. Thread additions (the news article's .art-comment) --------------------------------------------------------- */
.wk-thread { margin: 0; padding: 0; list-style: none; }
.art-comment.wk-comment--staff::after {
  border-color: rgba(201, 164, 76, 0.55);
  background: radial-gradient(120% 90% at 0% 0%, rgba(201, 164, 76, 0.12), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 44%), linear-gradient(180deg, var(--gem-panel), var(--gem-deep));
  box-shadow: inset 0 1px 0 rgba(244, 220, 154, 0.3), inset 2px 0 0 var(--gem-gold);
}
.art-comment.wk-comment--own::after { box-shadow: inset 0 1px 0 rgba(244, 220, 154, 0.12), inset 2px 0 0 var(--gem-ice); }
.wk-comment__role { margin-left: 8px; vertical-align: 1px; }
.wk-comment--system {
  display: flex;
  align-items: baseline;
  gap: var(--gem-s3);
  margin: 0 0 var(--gem-s4);
  padding: 8px var(--gem-s4);
  color: var(--gem-ink-mute);
  font-size: 0.82rem;
  border-left: 2px solid var(--gem-metal);
  background: linear-gradient(90deg, rgba(201, 164, 76, 0.07), transparent);
}
.wk-comment--system .wk-i, .wk-comment--system i { flex: none; color: var(--gem-metal-hi); }
.wk-comment--system > span { min-width: 0; line-height: 1.9; }
.wk-comment-tools { display: flex; flex-wrap: wrap; gap: var(--gem-s2); margin-left: auto; }

/* ---- 8. Lists and staff tools ---------------------------------------------------------------------------------------- */
/* a list inside a board or a card keeps the account table; links in it are gold like the main site's links */
.activity-table a:not(.gem-btn):not(.user-btn) { color: var(--gem-gold); font-weight: 700; text-decoration: none; }
.activity-table a:not(.gem-btn):not(.user-btn):hover { color: var(--gem-gold-hi); text-decoration: underline; text-underline-offset: 0.2em; }
.activity-table .wk-num, .wk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.activity-table .wk-title-cell { min-width: 12rem; }
.activity-table .wk-sub { display: block; margin-top: 3px; color: var(--gem-ink-mute); font-size: 0.78rem; }
.activity-table th.wk-check-cell, .activity-table td.wk-check-cell { width: 44px; padding-right: 0; }
.wk-row-actions { display: inline-flex; flex-wrap: wrap; gap: var(--gem-s2); }
.gem-btn.wk-btn-xs { padding: 7px 12px; font-size: 0.66rem; letter-spacing: 0.1em; }
/* a board (the ladder's lad-board gem-frame) used for a list: its table sits flush */
.lad-board .activity-table th:first-child, .lad-board .activity-table td:first-child { padding-left: clamp(var(--gem-s4), 2.4vw, var(--gem-s6)); }
.lad-board .activity-table th:last-child, .lad-board .activity-table td:last-child { padding-right: clamp(var(--gem-s4), 2.4vw, var(--gem-s6)); }
.wk-board-body { padding: var(--gem-s5) clamp(var(--gem-s4), 2.4vw, var(--gem-s6)); }
.lad-empty-sigil .wk-i { transform: rotate(-45deg); }
.wk-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gem-s3); }
.wk-empty--compact { padding: var(--gem-s5) var(--gem-s4); }
.wk-empty--compact .lad-empty-sigil { width: 56px; height: 56px; margin-bottom: var(--gem-s4); font-size: 1.3rem; }
.wk-empty--compact h2, .wk-empty--compact h3, .wk-empty--compact .wk-empty__title { font-size: 1.05rem; }
.wk-empty__title { margin: 0 0 var(--gem-s3); font-family: 'Cinzel', 'Cinzel Fallback Georgia', 'Cinzel Fallback Times', 'Cinzel Fallback Noto', serif; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; color: var(--gem-ink); }
.wk-empty > p:last-child { margin-bottom: 0; }
/* a cell with more than one piece (a title and a line under it): wrap it, so the phone card keeps them together */
.wk-cell { display: block; min-width: 0; flex: 1 1 auto; }
.activity-table td.wk-nowrap, .activity-table th.wk-nowrap { white-space: nowrap; overflow-wrap: normal; }
.gem-btn.wk-btn-xs, .wk-row-actions .gem-btn { white-space: nowrap; }
/* the ladder's filter bar, plus a reset link and a bulk bar */
.lad-filters .wk-reset { align-self: center; color: var(--gem-ink-mute); font-size: 0.82rem; }
.lad-filters .wk-reset:hover { color: var(--gem-gold-hi); }
.wk-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gem-s3);
  padding: var(--gem-s3) clamp(var(--gem-s4), 2.4vw, var(--gem-s6));
  background: rgba(239, 68, 68, 0.06);
  border-top: 1px solid var(--lad-hair);
  color: var(--gem-ink-soft);
  font-size: 0.84rem;
}
/* checkboxes, drawn like the main site's log in "Remember me" box */
.wk-check { display: inline-flex; align-items: center; gap: var(--gem-s2); cursor: pointer; color: var(--gem-ink-soft); font-size: 0.86rem; }
.wk-check input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  background-color: rgba(5, 9, 15, 0.85);
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--ctl-rim);
  cursor: pointer;
}
.wk-check input[type=checkbox]:checked {
  background-color: var(--gem-gold);
  border-color: var(--gem-gold-hi);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%231b1305' points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E%3C/svg%3E");
}
.wk-check input[type=checkbox]:focus-visible { outline: 2px solid var(--gem-ice-hi); outline-offset: 2px; }
.wk-check--box {
  padding: var(--gem-s3) var(--gem-s4);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--gem-rim);
}
/* selects and inputs of the ladder filter bar when used outside a .lad-board */
.wk-inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--gem-s2); margin: 0; }
.wk-inline-form select { min-width: 9rem; }

/* a menu inside a page (the header's .wow-menu + .wow-dropdown, opened on hover / keyboard focus as in the header, and
   on click by panel.js for touch screens): <div class="wow-menu wow-menu--right wk-menu" data-wk-menu> */
.wk-menu { display: inline-block; vertical-align: middle; }
.wk-menu.is-open > .wow-dropdown { display: block; }
.wk-menu > .wow-dropdown { top: calc(100% + 6px); text-align: left; }
.wk-menu .wow-dropdown-nav a small { display: block; margin-top: 2px; color: var(--gem-ink-mute); font-size: 0.74rem; font-weight: 600; }
/* two or three links that switch a view (comment order, a list's tabs): the main site's chips, the current one gold */
.wk-switch { display: flex; flex-wrap: wrap; gap: var(--gem-s2); margin: 0; }
.wk-switch a.gem-chip { text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.wk-switch a.gem-chip:hover { color: var(--gem-gold-hi); border-color: rgba(217, 176, 87, 0.42); }
.wk-switch a.gem-chip[aria-current] { color: var(--gem-gold-hi); background: rgba(217, 176, 87, 0.12); border-color: rgba(217, 176, 87, 0.52); }

/* Wide lists. The account table pads every cell 24 px a side, which suits its four columns; a list of seven or eight
   (the admin list) would push past the board and scroll sideways inside it. wk-table--dense keeps 10 px between
   columns and the ladder's edge padding (--lad-pad); wk-table--cards-md turns the rows into the main site's own phone
   cards (its 640 px rules, the same values) below 1100 px, where no eight-column list fits. */
.activity-table.wk-table--dense th, .activity-table.wk-table--dense td { padding-left: 10px; padding-right: 10px; }
.activity-table.wk-table--dense th:first-child, .activity-table.wk-table--dense td:first-child { padding-left: clamp(var(--gem-s4), 2.4vw, var(--gem-s6)); }
.activity-table.wk-table--dense th:last-child, .activity-table.wk-table--dense td:last-child { padding-right: clamp(var(--gem-s4), 2.4vw, var(--gem-s6)); }
@media (max-width: 1099px) {
  .activity-table.wk-table--cards-md, .activity-table.wk-table--cards-md tbody, .activity-table.wk-table--cards-md tr, .activity-table.wk-table--cards-md td { display: block; width: 100%; }
  .activity-table.wk-table--cards-md thead { display: none; }
  .activity-table.wk-table--cards-md tr { padding: var(--gem-s3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .activity-table.wk-table--cards-md tr:last-child { border-bottom: none; }
  .activity-table.wk-table--cards-md td,
  .activity-table.wk-table--cards-md.wk-table--dense td,
  .activity-table.wk-table--cards-md.wk-table--dense td:first-child,
  .activity-table.wk-table--cards-md.wk-table--dense td:last-child { display: flex; align-items: baseline; gap: var(--gem-s4); padding: 5px var(--gem-s4); border-bottom: none; }
  .activity-table.wk-table--cards-md td::before {
    content: attr(data-label);
    flex: 0 0 34%;
    color: var(--gem-ink-mute);
    font-family: 'Cinzel', 'Cinzel Fallback Georgia', 'Cinzel Fallback Times', 'Cinzel Fallback Noto', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .activity-table.wk-table--cards-md td.wk-nowrap { white-space: normal; }
  .activity-table.wk-table--cards-md .wk-row-actions { justify-content: flex-start; }
}
@media (min-width: 641px) and (max-width: 1099px) {
  /* two cards side by side on tablets, so a long list is not one endless column */
  .activity-table.wk-table--cards-md tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gem-s4); }
  .activity-table.wk-table--cards-md tr:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* ---- 9. Dialog (the confirm box: the main site's lit frame card) ---------------------------------------------------- */
.wk-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  color: var(--gem-ink);
  background: transparent;
  border: 0;
  overflow: visible;
}
.wk-dialog::backdrop { background: rgba(3, 6, 11, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wk-dialog__card { padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 34px); text-align: center; }
.wk-dialog__card .gem-eyebrow { margin-bottom: 12px; }
.wk-dialog__title { margin: 0; color: var(--gem-ink); }
.wk-dialog__text { margin: 18px auto 0; max-width: 42ch; color: var(--gem-ink-soft); line-height: 1.7; overflow-wrap: anywhere; }
.wk-dialog__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.wk-dialog--danger .wk-dialog__card { --gem-torch-glow: rgba(239, 68, 68, 0.2); }
.wk-dialog--danger .gem-eyebrow { color: var(--wk-red-soft); }

/* ---- 10. Message page (the main site's .err-page) additions --------------------------------------------------------- */
.wk-message .err-message > :first-child { margin-top: 0; }
.wk-message .err-message > :last-child { margin-bottom: 0; }
.wk-redirect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 16px auto 0;
  color: var(--gem-ink-mute);
  font-size: 0.86rem;
}
.wk-redirect .wk-i, .wk-redirect i { color: var(--err-accent, var(--gem-ice)); }
.wk-redirect__stay {
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--gem-gold);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.wk-redirect__stay:hover { color: var(--gem-gold-hi); }

/* ---- 11. Small utilities --------------------------------------------------------------------------------------------- */
.wk-subtle { color: var(--gem-ink-faint); }
.wk-muted { color: var(--gem-ink-mute); }
.wk-nowrap { white-space: nowrap; }
.wk-mono { font-family: Consolas, monaco, monospace; font-size: 0.86em; }
.wk-gold { color: var(--gem-gold); }
.wk-break { min-width: 0; overflow-wrap: anywhere; }
.wk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gem-s3); margin-top: var(--gem-s5); }
.wk-actions--end { justify-content: flex-end; }
.gem-btn.is-loading { pointer-events: none; opacity: 0.85; }
.gem-btn.is-loading::after {
  content: '';
  width: 12px;
  height: 12px;
  margin-left: 4px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: wk-spin 0.8s linear infinite;
}
@keyframes wk-spin { to { transform: rotate(360deg); } }
.gem-btn[disabled], .user-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* a gem-btn that is a <button>: the main site's buttons are links or submit buttons; inherit nothing odd */
button.gem-btn { line-height: inherit; }

/* ---- 12. Phones, motion, forced colours ------------------------------------------------------------------------------ */
@media (max-width: 480px) {
  /* the guide's row scrolls sideways on a phone; the panel's two or three pages wrap instead (the rail is not sticky
     under 640 px, so a second line costs nothing) */
  .wk-subnav .guide-nav { flex-wrap: wrap; overflow-x: visible; }
  .wk-subnav .guide-nav a { padding-left: 10px; padding-right: 10px; }
  .wk-subnav__mark { margin-left: 0; padding-left: 10px; }
  .guide-nav > .wk-subnav__mark:first-child { padding-left: 4px; }
}
@media (max-width: 639px) {
  .wk-band-actions .gem-btn { flex: 1 1 auto; }
  .wk-subnav__mark { padding-left: var(--gem-s3); margin-left: var(--gem-s2); }
  .wk-file__thumb { width: 52px; height: 52px; }
  .wk-row-actions { width: 100%; }
  .activity-table .wk-title-cell { min-width: 0; }
  .activity-table td.wk-check-cell { width: 100%; }
  .wk-dialog__actions .gem-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-drop, .wow-dropdown .wk-logout__btn, #offcanvas_nav .wk-logout__btn { transition: none; }
  .gem-btn.is-loading::after { animation: none; }
}
@media (forced-colors: active) {
  .wk-avatar { forced-color-adjust: none; }
  .wk-prio__bars i { forced-color-adjust: none; background: GrayText; }
  .wk-prio__bars i.is-on { background: CanvasText; }
  .wk-drop { border-color: CanvasText; }
}