/* WelcomeTo Studios - the community views: Meet The Staff, the profile
   (a dialog, and the page /profile/<id>), a format's players, its reviews,
   and the review form.

   Loaded after archive.css, and built from tokens.css and a few of the
   reader's pieces (pills, loading states, breadcrumbs). Role colours come
   from Discord. The page passes each one twice, as custom properties: the
   colour itself for the dot and the border (--role), and a tint of it lifted
   until text in it clears WCAG AA on these surfaces (--role-ink, from
   ArchiveUtil.readable). Stars are the gold token; empty ones still clear
   3:1 against the cards they sit on. */

/* ---------------------------------------------------------------- shared */

.com-page .hero__copy { margin-bottom: clamp(28px, 4vw, 44px); }
/* Meet The Staff's head carries an admin's "Edit in Site Management" too:
   the gap goes under the pair, so on a phone the button is not on the cards. */
.com-page > .hero { margin-bottom: clamp(28px, 4vw, 44px); }
.com-page > .hero .hero__copy { margin-bottom: 0; }
.com-av { display: block; flex: none; border-radius: 50%; background: var(--surface-2); }
.com-av--initials { display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: .02em; user-select: none; }
.com-empty { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.com-hint { margin: 0 0 10px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.com-err { margin: 10px 0 0; color: var(--danger); font-size: 14px; }
.com-note { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid rgba(231, 191, 106, .35); background: var(--gold-wash); color: var(--text); font-size: 14px; }
.com-label { display: block; margin: 0 0 6px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.com-label__opt { margin-left: 6px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--text-faint); }
.com-field { display: block; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 15px; line-height: 1.5; }
.com-field::placeholder { color: var(--text-faint); opacity: 1; }
.com-field--area { resize: vertical; min-height: 120px; }
.com-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.com-badge { flex: none; align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 9px; border-radius: var(--r-pill); }
/* A bio or the admins' notes (StaffText): bold and italics, the rest as it
   was typed, its line breaks kept. */
.com-text { color: var(--text); font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.com-text strong { font-weight: 700; }

/* An avatar decoration (the frame Discord draws around a picture): as
   Discord draws it, 1.2 times the avatar and centred on it, over its ring.
   The avatar's box is its positioning parent; percentages are of it. */
.com-deco { position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); background: center / contain no-repeat; pointer-events: none; }

/* "Discord since ..." and "Joined the server ...": the month, the whole
   date in the title. Side by side where they fit, else one under the other;
   neither breaks in two. */
.com-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.com-date { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.com-date .arc-ic { flex: none; color: var(--text-faint); }
.com-date time { color: var(--text); font-weight: 600; }

/* Roles: a chip in the role's own colour. A role with no colour is plain,
   and a role that is not a staff role (on a profile) only keeps its dot.
   Every name is shown whole: one too long for the card wraps inside its
   chip, even mid-word, and is never cut. */
.com-roles { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.com-role { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 3px 10px 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(255, 238, 230, .04); color: var(--text-muted); font-size: 12.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.com-role__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.com-role.has-color .com-role__dot { background: var(--role); }
.com-role.has-color.is-staff { color: var(--role-ink); border-color: color-mix(in srgb, var(--role) 62%, transparent); background: color-mix(in srgb, var(--role) 11%, transparent); }
.com-role.is-staff { font-weight: 700; }

/* Stars: n of five, or an average filled to its fraction. */
.com-stars { display: inline-flex; align-items: center; gap: 1px; flex: none; color: #8a7d81; vertical-align: middle; }
.com-stars .com-star.is-on, .com-stars__on { color: var(--gold); }
.com-stars--avg { position: relative; }
.com-stars__base, .com-stars__on { display: inline-flex; gap: 1px; }
.com-stars__on { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; white-space: nowrap; }
.com-stars__on .arc-ic, .com-stars__base .arc-ic { flex: none; }
.com-avg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.com-avg__num { font-family: var(--font-display); font-size: 34px; font-weight: 560; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variation-settings: 'opsz' 72; }
.com-avg__num:empty { display: none; }
.com-avg--big .com-avg__num { font-size: 52px; }
.com-avg__count { color: var(--text-muted); font-size: 14px; }

/* ---------------------------------------------------------------- meet the staff */

/* The order of the cards: a labelled pill select (site.css), above them on
   the right; its list opens under it, lined up with its right edge. */
.com-staffbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 16px; }
.com-staffbar__label { color: var(--text-muted); font-size: 13.5px; font-weight: 600; }
.com-staffbar__sel { flex: 0 1 220px; min-width: 0; }

/* Every card in a row stretches to the tallest; its body grows to fill it,
   with its content at the top. What is left over goes to the bio, so the
   admin notes stay at the bottom of the card (.com-card__bio). */
.com-staff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: stretch; }
.com-card { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--surface); box-shadow: var(--shadow-card); }
/* A banner, as Discord shows one: the person's picture (--banner, set by
   the page) over their banner colour, plain (--banner-fill, a one-colour
   gradient) - all that shows for someone with no picture, or whose picture
   does not load; the WelcomeTo banner stands in for the colour only when
   they have neither - as AVIF, else WebP, else JPEG, whichever the browser
   takes first (21, 25 and 77 KB). Each covers the box. */
.com-card__banner, .com-profile__banner {
  position: relative; flex: none; height: 96px;
  background: var(--banner, none) center / cover no-repeat, var(--banner-fill, url("/img/default-banner.jpg?v=726cfca8")) center / cover no-repeat, #120c0e;
  background: var(--banner, none) center / cover no-repeat, var(--banner-fill, image-set(url("/img/default-banner.avif?v=e22d27a2") type("image/avif"), url("/img/default-banner.webp?v=2ab0bb5c") type("image/webp"), url("/img/default-banner.jpg?v=726cfca8") type("image/jpeg"))) center / cover no-repeat, #120c0e;
}
/* The card's buttons, in the banner's top right corner: compact, on a dark
   backing that reads on any banner. */
.com-card__tools { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; }
.com-card__tool { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-pill); background: rgba(10, 6, 7, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); color: #f4ede9; font-size: 12.5px; font-weight: 650; line-height: 1; white-space: nowrap; cursor: pointer; }
.com-card__tool:hover { background: rgba(10, 6, 7, .9); border-color: rgba(255, 255, 255, .3); }
.com-card__tool:focus-visible { box-shadow: var(--rim-glow); }
.com-card__tool--icon { width: 30px; padding: 0; }
.com-card__tool .arc-ic { flex: none; }
.com-card__body { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 20px 20px; }
/* The picture sits a little left of the text's edge and overlaps the
   banner by 30px; the names start 12px under the banner's edge. */
.com-card__head { display: flex; align-items: flex-start; gap: 14px; margin: -30px 0 0 -6px; }
.com-card__av { position: relative; flex: none; display: inline-flex; border: 5px solid var(--surface); border-radius: 50%; background: var(--surface); cursor: pointer; }
.com-card__av .com-av { width: 72px; height: 72px; }
.com-card__names { min-width: 0; padding-top: 42px; }
.com-card__name { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; font-variation-settings: 'opsz' 48; }
.com-card__open { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.com-card__open:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.com-card__user { margin-top: 4px; color: var(--text-muted); font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
/* The entry such a share link (/staff/<id>) opened the page at, lit up for
   a moment. */
.com-card.is-share-hit { animation: share-ring 2.4s var(--ease); }
@keyframes share-ring { 0%, 40% { box-shadow: 0 0 0 3px rgba(231, 191, 106, .7), var(--shadow-card); } 100% { box-shadow: 0 0 0 3px rgba(231, 191, 106, 0), var(--shadow-card); } }
@media (prefers-reduced-motion: reduce) {
  .com-card.is-share-hit { outline: 2px solid var(--gold); outline-offset: 3px; }
}
.com-card .com-dates { margin-top: 14px; }
.com-card .com-roles { margin-top: 12px; }
/* The bio takes the room a taller card beside it leaves: its words at the
   top, the notes under it pushed to the card's bottom edge. */
.com-card__bio { flex: 1 0 auto; margin-top: 14px; }
/* Your own entry: the bio being written in its place. */
.com-card__bio .com-label { display: block; margin-bottom: 6px; }
.com-card__bio .com-hint { margin: 6px 0 0; }
/* The admins' notes: under the bio, set apart in a box of their own. */
.com-notes { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.com-notes .com-text { font-size: 14.5px; }
.com-notes .com-field { margin-top: 2px; }
.com-notes .com-hint { margin: 6px 0 0; }

/* ---------------------------------------------------------------- the profile */

/* A person's profile (.pf): the dialog (.pf--dialog) and the page
   /profile/<id> (.pf--page) are one panel, built from a Meet the Staff card
   (.com-card) - its banner, the picture over the banner's foot with its
   ring, the name and @username under the banner, never on it - so nothing
   runs into the banner at any width. The dialog is a card a little wider
   than Meet the Staff's, with a banner to match; the page is the card at
   full width, with a taller banner and a larger picture. The banner's
   corner holds the copy-link button and, in the dialog, Close: the card's
   own tool buttons. */
/* Taller than the window (a long profile, a short screen), the whole panel
   scrolls inside the dialog - by wheel, finger or keyboard - its corners
   still clipped; its buttons ride along at the top on a bar of no height,
   hanging into the banner's corner where it starts. */
.com-profile { position: relative; width: 520px; padding: 0; overflow-x: hidden; overflow-y: auto; }
.pf__bar { position: sticky; top: 0; z-index: 2; height: 0; }
.pf .com-card__banner { height: 120px; }
.pf .com-card__tools { z-index: 1; }
.pf .com-card__tool { height: 34px; }
.pf .com-card__tool--icon { width: 34px; }
.pf__close { padding: 0 14px; font-size: 13px; }
.pf__body { padding: 0 22px 22px; }
.pf .com-card__name { overflow-wrap: anywhere; }
.pf__badge { display: inline-flex; margin-top: 8px; }
.pf .com-dates { margin-top: 14px; }
.pf .com-roles { margin-top: 12px; }
.pf .com-note { margin-top: 14px; }
.com-profile__h { margin: 22px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.com-profile__notes { margin-top: 12px; }
.pf .arc-state--inline { padding-top: 16px; }
/* Their numbers: as many in a row as fit, at least three. */
.pf__stats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30%, 80px), 1fr)); gap: 8px; }
.pf__stat { min-width: 0; padding: 10px 8px 9px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); text-align: center; }
.pf__stat-n { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 48; overflow-wrap: anywhere; }
.pf__stat-l { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
/* Awards: each a gold-edged tile with its rosette, its season under it and
   its note under that. */
.pf__awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.pf__award { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid rgba(231, 191, 106, .38); background: linear-gradient(90deg, rgba(231, 191, 106, .09), transparent 75%), var(--surface-2); }
.pf__award > .arc-ic { flex: none; margin-top: 1px; color: var(--gold); }
.pf__award-text { display: flex; flex-direction: column; min-width: 0; }
.pf__award-title { color: var(--text); font-size: 14.5px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.pf__award-where { color: var(--text-muted); font-size: 12.5px; line-height: 1.35; }
.pf__award-note { margin-top: 4px; color: var(--text); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pf__all { margin: 8px 0 0 -6px; }
.pf__foot { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pf__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.pf__count { color: var(--text-muted); font-size: 13px; }
/* (The count's status line is always there, to be heard when it changes;
   with nothing in it, it takes no room.) */
.pf__more:not(:has(button)):has(.pf__count:empty) { margin-top: 0; }
/* A review the last "Show more" brought, given focus: inset, not past the list's edge. */
.pf--page .com-play--rev:focus-visible { outline-offset: -2px; box-shadow: var(--rim-inset); }
/* The page: the card at full width. The picture overlaps the banner by
   40px and the names start 12px under it, as on the card. Awards and
   seasons beside the reviews where there is room. */
.pf-page { padding-top: clamp(20px, 3vw, 36px); }
.pf--page .com-card__banner { height: clamp(130px, 17vw, 210px); }
.pf--page .pf__body { padding: 0 clamp(18px, 3vw, 32px) clamp(20px, 3vw, 32px); }
.pf--page .com-card__head { margin-top: -40px; }
.pf--page .com-card__names { padding-top: 52px; }
.pf--page .com-card__av .com-av { width: 96px; height: 96px; }
.pf--page .com-card__name { font-size: clamp(26px, 3.2vw, 34px); }
.pf__eyebrow { margin: 0 0 4px; }
.pf--page .pf__stats { grid-template-columns: repeat(auto-fit, minmax(min(30%, 120px), 1fr)); }
.pf__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 28px; align-items: start; }
@media (max-width: 860px) {
  .pf__cols { grid-template-columns: minmax(0, 1fr); }
}
.com-plays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.com-play { padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.com-play.is-hidden { border-style: dashed; border-color: rgba(231, 191, 106, .5); }
.com-play__main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.com-play__what { font-size: 14.5px; color: var(--text); }
.com-play__what strong { font-weight: 650; }
.com-play__result { color: var(--text-muted); font-size: 13.5px; }
.com-play__links { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; margin-left: -6px; }
.com-play .com-rev__body { margin-top: 6px; font-size: 14.5px; }

/* ---------------------------------------------------------------- players (the compendium's section) */

.com-wikipage { padding-top: clamp(24px, 4vw, 44px); padding-bottom: 96px; }
.com-side__title { padding: 0 18px 10px; font-family: var(--font-display); font-size: 19px; font-weight: 560; letter-spacing: -.01em; color: var(--text); }
.com-side__back { display: inline-flex; align-items: center; gap: 4px; margin: 0 12px 10px; padding: 4px 6px; border-radius: var(--r-xs); color: var(--text-muted); font-size: 13.5px; text-decoration: none; }
.com-side__back:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.com-side__label { padding: 10px 18px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.com-side__list { list-style: none; margin: 0; padding: 0; }
.com-side__link { display: block; padding: 8px 18px; border-left: 3px solid transparent; color: var(--text-faint); font-size: 15px; text-decoration: none; }
.com-side__link:hover { color: var(--text); background: rgba(255, 238, 230, .04); }
.com-side__link[aria-current="page"] { color: var(--text); background: var(--accent-wash); border-left-color: var(--accent); }
.com-meta { margin: 6px 0 22px; color: var(--text-muted); font-size: 14px; }
.com-meta:empty { display: none; }
.com-season { padding: 20px 0 6px; border-top: 1px solid var(--line); }
.com-season__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.com-season__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 560; letter-spacing: -.01em; color: var(--text); }
.com-season__count { color: var(--text-faint); font-size: 13.5px; }
.com-season__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 14px; color: var(--text-muted); font-size: 14px; }
.com-season__rating { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; }
.com-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.com-player { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.com-player.is-winner { border-color: rgba(231, 191, 106, .5); background: linear-gradient(90deg, rgba(231, 191, 106, .1), transparent 70%), var(--surface-2); }
.com-player__who { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.com-player__who:not(.is-static):hover .com-player__name { text-decoration: underline; text-underline-offset: 3px; }
.com-player__who.is-static { cursor: default; color: var(--text-muted); }
.com-player__av .com-av { width: 32px; height: 32px; }
.com-player__name { min-width: 0; overflow-wrap: anywhere; }
.com-place { flex: none; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--text-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.com-place.is-first { border-color: var(--gold); background: var(--gold); color: #1a1206; }
.com-player__result { order: 3; flex: 1 1 100%; padding-left: 42px; color: var(--text-muted); font-size: 13px; }
.com-player__result:empty { display: none; }
/* A player's awards for the season, under their result: small gold pills. */
.com-player__awards { order: 4; flex: 1 1 100%; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0 0 0 42px; }
.com-award { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 9px 2px 7px; border-radius: var(--r-pill); border: 1px solid rgba(231, 191, 106, .45); background: rgba(231, 191, 106, .1); color: var(--gold); font-size: 12px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.com-award .arc-ic { flex: none; }

/* ---------------------------------------------------------------- reviews */

.com-reviews .arc-crumbs { margin-bottom: 18px; }
.com-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.com-revtop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 30px; }
.com-sum, .com-filter, .com-mine { padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--surface); box-shadow: var(--shadow-card); min-width: 0; }
.com-revside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.com-sum__title, .com-mine__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.com-hist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 440px; }
.com-hist__row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13.5px; }
.com-hist__track { height: 10px; overflow: hidden; border-radius: 4px; background: rgba(255, 238, 230, .07); }
.com-hist__bar { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--gold); }
.com-hist__n { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.com-filter .arc-field { max-width: 280px; }
.com-mine__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.com-mine__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.com-mine__text { display: flex; flex-direction: column; min-width: 0; }
.com-mine__state { color: var(--text-muted); font-size: 13px; }
.com-list-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 22px; font-weight: 560; letter-spacing: -.01em; color: var(--text); }

.com-revlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.com-rev { min-width: 0; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.com-revlist--compact .com-rev { background: var(--surface-2); }
.com-rev.is-hidden { border-style: dashed; border-color: rgba(231, 191, 106, .55); }
.com-rev__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.com-rev__who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 2px 8px 2px 2px; margin-left: -2px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.com-rev__who:not(.is-static):hover { background: rgba(255, 238, 230, .05); }
.com-rev__who:not(.is-static):hover .com-rev__name { text-decoration: underline; text-underline-offset: 3px; }
.com-rev__who.is-static { cursor: default; color: var(--text-muted); }
.com-rev__av .com-av { width: 32px; height: 32px; }
.com-rev__name { min-width: 0; overflow-wrap: anywhere; }
/* The season, a link: its words on the row's middle line with the name,
   the stars and the date - also where a touch screen makes it a 44px
   target (fit.css), whose words would otherwise sit at its top. */
.com-rev__season { display: inline-flex; align-items: center; color: var(--text-muted); font-size: 13.5px; }
.com-rev__season:hover { color: var(--text); }
.com-rev__when { color: var(--text-faint); font-size: 13px; }
.com-rev__body { margin: 10px 0 0; color: #e8e1dd; font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.com-rev__mod { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* The way to every review - "Every review of <format>", "Every review of
   Season N", "See all N reviews", "All reviews of this season": white, as
   the words round it, and underlined, where the site's other small links
   wear the accent; the pointer over one thickens its line. */
.arc-linkbtn.com-revs-all { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.arc-linkbtn.com-revs-all:hover { color: var(--text); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- the review form */

.com-write { width: 560px; }
.com-write__desc { margin: 0 0 18px; }
.com-starpick { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.com-starpick__row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.com-starpick__opt { position: relative; display: inline-flex; padding: 4px; border-radius: var(--r-sm); color: #8a7d81; cursor: pointer; }
.com-starpick__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.com-starpick__opt:hover { background: rgba(255, 238, 230, .06); }
.com-starpick__opt.is-on { color: var(--gold); }
.com-starpick__opt:has(input:focus-visible) { outline: 2px solid var(--focus); box-shadow: var(--rim-glow); outline-offset: 1px; }
.com-starpick__icon { display: inline-flex; pointer-events: none; }
.com-starpick__text { margin-left: 10px; color: var(--text-muted); font-size: 14px; }
.com-write__count { margin-top: 6px; color: var(--text-faint); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.com-write__count.is-near { color: var(--gold); }
.com-write__foot { align-items: center; }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 860px) {
  .com-revtop { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .com-card__body { padding: 0 16px 16px; }
  .pf__body { padding: 0 18px 20px; }
  .com-avg--big .com-avg__num { font-size: 44px; }
  .com-sum, .com-filter, .com-mine { padding: 16px; }
  .com-filter .arc-field { max-width: none; }
  .com-write__foot .arc-spacer { display: none; }
  .com-write__foot .btn { flex: 1 1 auto; }
}