/* Hallmark · shape: app screen · genre: atmospheric · theme: brand · redesign: full · scope: app
 * paper: oklch(19% 0.017 155) · accent: oklch(73% 0.11 80) · display: Alegreya · body: Alegreya
 * nav: kept · signature: the player's state and tickets first, the team's queue first · states: empty, waiting, done, blocked, error
 * axes: forest/alegreya/brass · posture: tool · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, see site.css; here one surface for every panel, lists as tables, statuses as words */

/* The panel's screens. One surface for every box (no box in a box), lists as table rows with hairlines, a status as a
   word in its colour, the admin's numbers as rows that open their list. */

.panel{padding-bottom:var(--space-2xl)}
.panel h2{font-size:var(--text-section);line-height:1.2}

/* The page's head: the title, its line, an action on the right when the page has one. */
.page-head{padding:var(--space-2xl) 0 var(--space-lg)}
.page-head h1{font-size:var(--text-display);line-height:1.1}
.page-head p{margin-top:var(--space-xs);max-width:64ch;color:var(--color-ink-2)}
.panel-wide .page-head{padding-top:0}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 var(--space-lg)}
.head-row .page-head{flex:1 1 420px}
.head-row .tickets-toolbar{margin:0 0 var(--space-lg)}

/* One surface: every box the panel draws. */
.block,.account,.quick,.ticket-list,.al-history,.ticket-filters,.al-filters,.admin-counts,.rule-group,.al-section,.danger,.facts-wide,
.cat-choice,.msg,.reply,.al-state,.rules-add,.rules-section,.al-applicant,.player-card,.login,.log,.current-version,.thread-aside,
.al-submit,.panel .steps .step,.al-answers{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-panel)}
.al-sections .al-section,.al-preview .al-section{background:none;border:0;padding-inline:0}

/* Empty states: what belongs here, quietly, in a dashed outline. */
.tickets-empty,.rules-empty,.rules-nohit,.al-history-block>.hint{padding:var(--space-xl) var(--space-lg);text-align:center;color:var(--color-muted);border:1px dashed var(--color-rule-strong);border-radius:var(--radius-panel)}

/* ===== Overview: on the left what you deal with (access to the game, your tickets), on the right who you are and where to go. ===== */
.home-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(280px,4fr);gap:var(--space-lg);align-items:start}
.blocks{display:grid;gap:var(--space-lg)}
.home-side{display:grid;gap:var(--space-lg);position:sticky;top:calc(var(--header) + var(--space-md))}
.block{display:flex;flex-direction:column;padding:var(--space-lg)}
.block h2{margin-bottom:var(--space-sm)}
.block p{margin-top:var(--space-xs)}
.block .block-links{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-md)}
.block .block-links a{display:inline-flex;align-items:center;min-height:var(--control);padding:0 var(--space-md);border:1px solid var(--color-rule-strong);border-radius:var(--radius);background:var(--color-paper-3);color:var(--color-ink);text-decoration:none;font-size:.9375rem}
.block .block-links a:hover{border-color:var(--color-accent);background:var(--color-raised)}
.block .block-links a:active{background:var(--color-paper-2)}
.block .block-links a:first-child{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink);border-radius:var(--radius-panel)}
.block .block-links a:first-child:hover{background:var(--color-accent-2);border-color:var(--color-accent-2)}
/* The access block's first line is its state, in the colour of what it means. */
.block-allowlist>p:first-of-type{font-size:var(--text-title);color:var(--color-ink)}
.block-allowlist.is-done>p:first-of-type{color:var(--color-ok)}
.block-allowlist.is-waiting>p:first-of-type{color:var(--color-warn)}
.block-allowlist.is-blocked>p:first-of-type{color:var(--color-error)}
.home-tickets{margin:0;padding:0;list-style:none}
.home-tickets li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2xs) var(--space-sm);padding:var(--space-sm) 0;border-top:1px solid var(--color-rule)}
.home-tickets a{color:var(--color-ink);text-decoration:none;overflow-wrap:anywhere}
.home-tickets a:hover{color:var(--color-accent-2);text-decoration:underline}
.home-ticket-meta{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.9375rem;color:var(--color-muted)}

/* Account: the avatar, the roles, the facts. */
.account{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg)}
.home-side .account{flex-direction:column}
.avatar{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--color-accent);background:var(--color-paper-3);font-size:1.6rem;line-height:1;color:var(--color-accent)}
.account-body{flex:1;min-width:0;width:100%}
.account h2{font-size:var(--text-section);overflow-wrap:anywhere}
.roles{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-xs)}
.role{display:inline-block;padding:0 var(--space-xs);font-size:.8125rem;line-height:1.7;border-radius:var(--radius-pill);color:var(--color-ink-2);border:1px solid var(--color-rule-strong)}
@supports (color:color-mix(in oklab,red,blue)){
  .role{color:color-mix(in oklab,var(--role,var(--color-muted)) 60%,var(--color-ink));border-color:color-mix(in oklab,var(--role,var(--color-muted)) 50%,transparent)}
}
.facts{display:grid;margin:var(--space-md) 0 0}
.facts div{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:0 var(--space-md);align-items:baseline;padding:var(--space-xs) 0;border-top:1px solid var(--color-rule)}
.facts dt{font-size:.9375rem;color:var(--color-muted)}
.facts dd{margin:0;color:var(--color-ink);overflow-wrap:anywhere}
.facts-wide{margin:0;padding:0 var(--space-lg)}
.facts-wide div{padding:var(--space-md) 0}
.facts-wide div:first-child{border-top:0}
.facts-wide .hint{display:block;font-size:.875rem}
.launcher-id{font-size:.92em;color:var(--color-ink)}

/* Where to go: one link a row, its line under it. */
.quick{padding:var(--space-xs)}
.quick ul{margin:0;padding:0;list-style:none;display:grid}
.quick a{display:grid;gap:var(--space-3xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius);text-decoration:none;color:var(--color-ink)}
.quick a b{font-weight:400;font-size:1.0625rem}
.quick a span{font-size:.875rem;color:var(--color-muted)}
.quick a:hover{background:var(--color-paper-3)}
.quick a:active{background:var(--color-raised)}
.quick li+li a{border-top:1px solid var(--color-rule);border-radius:0}

/* Steps to unlock: a real sequence, so numbered. */
.panel .steps{display:grid;gap:var(--space-md);margin:0;padding:0;list-style:none}
.panel .steps .step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 var(--space-md);padding:var(--space-lg)}
.step-num{font-size:var(--text-display);line-height:.9;color:var(--color-muted);font-variant-numeric:lining-nums}
.step.is-done .step-num{color:var(--color-accent)}
.panel .steps h2{font-size:var(--text-section)}
.step-state{margin:var(--space-2xs) 0 var(--space-sm);font-size:.9375rem;color:var(--color-warn)}
.step.is-done .step-state{color:var(--color-ok)}
.step.is-unknown .step-state{color:var(--color-muted)}
.step-body p+p{margin-top:var(--space-xs)}

/* Account page: the facts beside the delete box. */
.account-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-lg);align-items:start}
.danger{padding:var(--space-lg);border-color:var(--color-danger-2)}
.panel .danger h2{color:var(--color-error);margin-bottom:var(--space-xs)}
.account-grid .danger{margin:0}
.login{padding:var(--space-xl);text-align:center}
.login .hint{margin:var(--space-md) auto 0;max-width:46ch}

/* ===== Admin: the menu on the left, the work on the right. ===== */
.admin-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-xl);padding-top:var(--space-2xl)}
.admin-menu{align-self:start;position:sticky;top:calc(var(--header) + var(--space-md))}
.admin-menu ul{display:grid;gap:var(--space-3xs);margin:0;padding:0;list-style:none}
.admin-menu a{display:flex;align-items:center;min-height:var(--control);padding:0 var(--space-md);border-radius:var(--radius);color:var(--color-ink-2);text-decoration:none}
.admin-menu a:hover{background:var(--color-paper-2);color:var(--color-ink)}
.admin-menu a:active{background:var(--color-paper-3)}
.admin-menu a[aria-current="page"]{background:var(--color-paper-3);color:var(--color-ink)}
.admin-content{min-width:0}

/* The admin's start: what waits, as rows - the label, the number, the row opens its list. */
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--space-lg);align-items:start}
.admin-counts{padding:var(--space-lg) var(--space-lg) var(--space-xs)}
.admin-counts h2{margin-bottom:var(--space-sm)}
.counts{display:grid;margin:0;padding:0;list-style:none}
.count{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) 0;border-top:1px solid var(--color-rule);text-decoration:none}
.count-num{order:2;font-size:var(--text-display);line-height:1;color:var(--color-accent);font-variant-numeric:lining-nums tabular-nums}
.count-label{font-size:1.0625rem;color:var(--color-ink)}
.count:hover .count-label{color:var(--color-accent-2);text-decoration:underline}
.count.is-zero .count-num{color:var(--color-faint)}

/* Filters over a list: the fields in one row, the switches under them, the buttons last. */
.ticket-filters,.al-filters{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--space-md);margin:0 0 var(--space-md);padding:var(--space-xs) var(--space-lg) var(--space-lg)}
.ticket-filters:has(.filter-selects){grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:end}
.ticket-filters>.filter-checks,.ticket-filters>.form-row{grid-column:1/-1}
.filter-selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-sm)}
.filter-checks{display:flex;flex-wrap:wrap;gap:0 var(--space-lg)}
.filter-check{font-size:.9375rem}
.al-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px);gap:0 var(--space-sm)}
.ticket-toolbar,.tickets-toolbar,.rules-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin:0 0 var(--space-md)}
.ticket-count{margin:var(--space-lg) 0 var(--space-xs);font-size:.9375rem;color:var(--color-muted)}

/* Lists as tables: the number, the subject with its facts, the state on the right; the whole row opens it. */
.ticket-list,.al-history{margin:0;padding:0;list-style:none;overflow:hidden}
.ticket-row,.al-history-row{position:relative;display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:var(--space-3xs) var(--space-md);align-items:center;padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--color-rule);
  transition:background-color var(--dur-micro) var(--ease-out)}
.ticket-row:first-child,.al-history-row:first-child{border-top:0}
.ticket-row:hover,.al-history-row:hover{background:var(--color-paper-3)}
.ticket-row.is-unread{background:var(--color-wash)}
.ticket-num,.al-history-num{font-size:.9375rem;color:var(--color-faint);font-variant-numeric:lining-nums tabular-nums}
.ticket-row.is-unread .ticket-num{color:var(--color-accent)}
.ticket-main,.al-history-main{min-width:0}
.panel .ticket-subject{font-size:var(--text-title);line-height:1.35}
.ticket-subject a,.al-history-subject a{color:var(--color-ink);text-decoration:none;overflow-wrap:anywhere}
.ticket-subject a::after,.al-history-subject a::after{content:"";position:absolute;inset:0}
.ticket-row a:not(.ticket-subject a),.ticket-row button{position:relative;z-index:var(--z-base)}
.ticket-row:hover .ticket-subject a,.al-history-row:hover .al-history-subject a{color:var(--color-accent-2)}
.ticket-row.is-unread .ticket-subject a{font-weight:600}
.al-history-subject{margin:0}
.ticket-meta,.al-history-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-sm);margin-top:var(--space-3xs);font-size:.9375rem;color:var(--color-muted)}
.ticket-when,.al-history-meta time{color:var(--color-faint);font-variant-numeric:lining-nums tabular-nums}
.ticket-cat{color:var(--color-ink-2)}
@supports (color:color-mix(in oklab,red,blue)){.ticket-cat{color:color-mix(in oklab,var(--cat,var(--color-ink-2)) 55%,var(--color-ink))}}
.cat-icon{font-style:normal}
.ticket-owner{color:var(--color-ink-2)}
.ticket-assignee{color:var(--color-muted)}
.ticket-assignee.is-none{font-style:italic;color:var(--color-faint)}
.player-row{grid-template-columns:48px minmax(0,1fr) auto}
.al-history-row{grid-template-columns:2.8em minmax(0,1fr)}
.al-history-comment{margin-top:var(--space-xs);padding-left:var(--space-sm);border-left:1px solid var(--color-rule-strong);color:var(--color-ink-2);white-space:pre-wrap;overflow-wrap:anywhere}

/* ===== New ticket: the categories on the left as choices, the text on the right. ===== */
.ticket-form{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);gap:0 var(--space-lg);align-items:start}
.ticket-form>.cat-choice{grid-column:1;grid-row:1/span 8;margin-top:var(--space-md)}
.ticket-form>:not(.cat-choice):not(input){grid-column:2}
.cat-choice{min-width:0;margin:var(--space-md) 0 0;padding:var(--space-xs)}
.cat-choice legend{float:left;width:100%;padding:var(--space-sm) var(--space-sm) var(--space-xs);font-size:.9375rem;color:var(--color-ink-2)}
.cat-choice legend+*{clear:both}
.cat-option{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 var(--space-sm);align-items:start;padding:var(--space-sm);border-radius:var(--radius);cursor:pointer}
.cat-option+.cat-option{border-top:1px solid var(--color-rule)}
.cat-option:hover{background:var(--color-paper-3)}
.cat-option:has(input:checked){background:var(--color-wash)}
.cat-option input{width:18px;height:18px;margin:var(--space-2xs) 0 0;accent-color:var(--color-accent)}
.cat-text{display:grid}
.cat-name{color:var(--color-ink)}
.cat-desc{font-size:.9375rem;color:var(--color-muted)}

/* ===== A ticket: the messages on the left, its facts and actions on the right. ===== */
.ticket-back{margin-top:var(--space-xl)}
.ticket-back+.page-head{padding-top:var(--space-sm)}
.ticket-head{padding-bottom:var(--space-md)}
.ticket-kicker{margin:0 0 var(--space-2xs);font-size:.9375rem;color:var(--color-muted)}
.panel .ticket-head h1{overflow-wrap:anywhere}
.thread-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-lg);align-items:start}
.thread-main{grid-column:1;grid-row:1;min-width:0}
.thread-aside{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header) + var(--space-md));padding:var(--space-lg)}
.ticket-facts{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);margin:0}
.thread-aside .ticket-facts{flex-direction:column;gap:var(--space-sm)}
.ticket-facts div{display:grid;gap:0}
.ticket-facts dt{font-size:.875rem;color:var(--color-muted)}
.ticket-facts dd{margin:0;color:var(--color-ink);overflow-wrap:anywhere}
.ticket-actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-rule)}
.thread-aside .ticket-actions .button{width:100%}
.thread-aside .ticket-actions form{display:block;width:100%}
.ticket-closed{margin-top:var(--space-xs)}

.thread{display:grid;gap:var(--space-sm);margin:0;padding:0;list-style:none}
.msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 var(--space-md);padding:var(--space-md) var(--space-lg);scroll-margin-top:96px}
.msg:target{border-color:var(--color-accent)}
.msg.is-staff{border-color:var(--color-rule-strong)}
.msg.is-internal{border:1px dashed var(--color-warn);background:var(--color-warn-wash)}
.msg-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--color-rule-strong);background:var(--color-paper-3);font-size:1.0625rem;line-height:1;color:var(--color-muted)}
.msg.is-staff .msg-avatar{border-color:var(--color-accent);color:var(--color-accent)}
.msg-main{min-width:0}
.msg-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3xs) var(--space-sm);line-height:1.4}
.msg-author{font-size:1.0625rem;color:var(--color-ink);overflow-wrap:anywhere}
.msg-head time{font-size:.875rem;color:var(--color-faint);font-variant-numeric:lining-nums tabular-nums}
.msg-edited{font-size:.875rem;font-style:italic;color:var(--color-faint)}
.msg-body{margin-top:var(--space-2xs);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-ink)}
.msg-deleted{margin-top:var(--space-2xs);font-style:italic;color:var(--color-faint)}
.msg.is-deleted .msg-author{color:var(--color-muted)}
.msg-quote{margin-top:var(--space-2xs);padding-left:var(--space-sm);border-left:1px solid var(--color-rule-strong);font-size:.9375rem;color:var(--color-muted);overflow-wrap:anywhere}
.msg-quote a{color:inherit;text-decoration:none}
.msg-quote a:hover{color:var(--color-ink-2)}
.quote-who{font-size:.875rem;color:var(--color-ink-2)}
.msg-files{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:var(--space-xs) 0 0;padding:0;list-style:none}
.msg-files li{max-width:100%}
.msg-files a{display:block;border:1px solid var(--color-rule-strong);border-radius:var(--radius);line-height:0}
.msg-files a:hover{border-color:var(--color-accent)}
.msg-files img{display:block;width:auto;height:auto;max-width:240px;max-height:240px;border-radius:var(--radius)}
.msg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2xs) var(--space-md);margin-top:var(--space-xs)}
.msg-edit .field{margin-top:var(--space-xs)}
.reply .field textarea,.msg-edit textarea{min-height:5lh}

/* Small actions beside a row or a message: quiet buttons, their colour only on hover. */
.msg-tools,.row-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2xs) var(--space-xs);font-size:.875rem;white-space:nowrap}
.row-tools a,.row-tools .text-button,.msg-tools a,.msg-tools .text-button,.rules-toolbar a,.rules-toolbar .text-button,.al-applicant-links a,.rules-back a,.al-edit>summary,.side-people .text-button,.reply-quote a{
  display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:32px;padding:0 var(--space-sm);border:1px solid var(--color-rule-strong);border-radius:var(--radius);
  background:var(--color-paper-3);color:var(--color-ink);font-size:.875rem;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer}
.row-tools a:hover,.row-tools .text-button:hover,.msg-tools a:hover,.msg-tools .text-button:hover,.rules-toolbar a:hover,.rules-toolbar .text-button:hover,
.al-applicant-links a:hover,.rules-back a:hover,.al-edit>summary:hover,.side-people .text-button:hover,.reply-quote a:hover{border-color:var(--color-accent);background:var(--color-raised);color:var(--color-ink)}
.row-tools a:active,.msg-tools a:active,.rules-toolbar a:active,.rules-back a:active{background:var(--color-paper-2)}
.msg-tools .text-button[type="submit"]:hover,.row-tools .text-button:hover{border-color:var(--color-danger-2)}
.rules-back{margin:0 0 var(--space-md)}
.arrows{display:inline-flex;gap:var(--space-2xs)}
.arrow{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;font:inherit;font-size:.9375rem;line-height:1;color:var(--color-ink-2);background:transparent;border:1px solid var(--color-rule-strong);border-radius:var(--radius);cursor:pointer}
.arrow:hover:not(:disabled){color:var(--color-ink);border-color:var(--color-accent);background:var(--color-raised)}
.arrow:active:not(:disabled){background:var(--color-paper-2)}
.arrow:disabled{cursor:not-allowed;opacity:.35}

/* Reactions: small counted buttons; the menu opens from a <details>, no script. */
.reactions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);margin:0}
.reaction,.react-add summary,.reaction-pick{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:30px;padding:0 var(--space-xs);font:inherit;font-size:.9375rem;line-height:1;
  color:var(--color-ink-2);background:transparent;border:1px solid var(--color-rule);border-radius:var(--radius);cursor:pointer}
.reaction:hover,.react-add summary:hover,.reaction-pick:hover{border-color:var(--color-accent);background:var(--color-raised)}
.reaction:active,.reaction-pick:active{background:var(--color-paper-2)}
.reaction.is-mine{border-color:var(--color-accent);background:var(--color-wash);color:var(--color-ink)}
.reaction-count{font-variant-numeric:lining-nums tabular-nums;color:var(--color-muted)}
.reaction.is-mine .reaction-count{color:var(--color-accent)}
.react-add{position:relative}
.react-add summary{list-style:none;color:var(--color-muted)}
.react-add summary::-webkit-details-marker{display:none}
.react-add[open] summary{border-color:var(--color-accent);color:var(--color-ink)}
.react-menu{position:absolute;z-index:var(--z-dropdown);left:0;top:calc(100% + var(--space-2xs));display:flex;gap:var(--space-2xs);padding:var(--space-2xs);background:var(--color-paper-3);border:1px solid var(--color-rule-strong);border-radius:var(--radius-panel)}
.reaction-pick{min-width:36px;min-height:36px;justify-content:center;padding:0;border-color:transparent;font-size:1.125rem}

/* A system message: small, italic, centred between two rules. */
.msg-system{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-2xs) 0}
.msg-system::before,.msg-system::after{content:"";flex:1;border-top:1px dotted var(--color-rule-strong)}
.msg-system p{margin:0;max-width:80%;font-size:.9375rem;font-style:italic;text-align:center;color:var(--color-muted)}
.msg-system time{font-style:normal;color:var(--color-faint);white-space:nowrap}

.reply{margin-top:var(--space-lg);padding:var(--space-lg);scroll-margin-top:84px}
.reply h2{margin-bottom:var(--space-2xs)}
.reply-quote{margin-top:var(--space-sm)}

/* The admin's ticket side panel: one block per concern, each with its small form. */
.side-jump{display:none;margin-top:var(--space-sm)}
.ticket-admin{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-lg);align-items:start}
.ticket-thread{display:grid;gap:var(--space-lg);align-content:start;min-width:0}
.ticket-side{position:sticky;top:calc(var(--header) + var(--space-md));max-height:calc(100vh - var(--header) - var(--space-xl));overflow:auto;padding:var(--space-lg);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-panel)}
.side-block{padding-bottom:var(--space-md)}
.side-block+.side-block{padding-top:var(--space-md);border-top:1px solid var(--color-rule)}
.panel .side-block h2{font-size:1.0625rem;color:var(--color-ink);margin:0 0 var(--space-2xs)}
.side-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-xs);align-items:end;margin:0}
.side-form .field{margin-top:var(--space-xs)}
.side-form .field>span{font-size:.875rem}
.side-form .field input,.side-form .field select{min-height:36px;padding:0 var(--space-xs);font-size:.9375rem}
.button.side-button{min-height:36px;padding:0 var(--space-sm);font-size:.875rem}
.side-actions{margin-top:var(--space-sm)}
.side-value{margin:var(--space-3xs) 0 var(--space-xs);color:var(--color-ink);overflow-wrap:anywhere}
.side-value .id{display:block;font-size:.875rem;color:var(--color-faint)}
.side-value.is-empty{font-style:italic;color:var(--color-faint)}
.side-people{margin:var(--space-2xs) 0;padding:0;list-style:none}
.side-people li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);padding:var(--space-2xs) 0;border-bottom:1px solid var(--color-rule)}
.search-results{margin-top:var(--space-xs)}
.side-log{margin:var(--space-2xs) 0 0;padding:0;list-style:none;font-size:.875rem;line-height:1.45}
.side-log li{padding:var(--space-2xs) 0;border-bottom:1px solid var(--color-rule);color:var(--color-ink-2)}
.side-log time{display:block;color:var(--color-faint);font-variant-numeric:lining-nums tabular-nums}

/* Ticket categories */
.cat-list{margin-left:0}
.cat-row{grid-template-columns:2.6em minmax(0,1fr) auto}
.cat-swatch{display:grid;place-items:center;width:34px;height:34px;font-size:1.125rem;border:1px solid var(--color-rule-strong);border-radius:var(--radius);background:color-mix(in oklab,var(--cat,var(--color-paper-3)) 25%,transparent)}
.role-field{margin:var(--space-md) 0 0;padding:0;border:0;min-width:0}
.role-field legend{padding:0;font-size:.9375rem;color:var(--color-ink-2)}
.role-checks{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);margin-top:var(--space-2xs)}
.role-check{margin-top:var(--space-2xs);align-items:center}
.role-check input{margin-top:0}

/* ===== Rules in the admin: a search, the groups to jump to, each group a box of rows. ===== */
.rules-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);margin:0 0 var(--space-sm)}
.rules-bar .rules-toolbar{margin:0}
.rules-search{flex:1 1 280px}
.rules-jump{margin:0 0 var(--space-lg)}
.rules-jump ol{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;padding:0;list-style:none}
.rules-jump a{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:36px;padding:0 var(--space-sm);font-size:.9375rem;color:var(--color-ink);text-decoration:none;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-pill)}
.rules-jump a:hover{border-color:var(--color-accent)}
.rules-jump a:active{background:var(--color-paper-3)}
.jump-num{color:var(--color-accent)}
.jump-count{min-width:1.6em;padding:0 var(--space-2xs);font-size:.8125rem;text-align:center;color:var(--color-muted);background:var(--color-hover);border-radius:var(--radius-pill)}
.is-filtering .rules-jump{opacity:.45}
.rule-groups,.rule-list,.log{margin:0;padding:0;list-style:none}
.rule-groups{display:grid;gap:var(--space-lg)}
.rule-group{padding:var(--space-lg);scroll-margin-top:96px}
.group-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--space-2xs) var(--space-md);align-items:start}
.group-num{font-size:var(--text-display);line-height:.95;color:var(--color-accent);font-variant-numeric:lining-nums}
.group-title h2{font-size:var(--text-section)}
.group-title p{margin-top:var(--space-2xs);font-size:.9375rem;color:var(--color-muted);max-width:64ch}
.group-empty,.group-add{margin:var(--space-sm) 0 0 calc(44px + var(--space-md));font-size:.9375rem;color:var(--color-muted)}
.rule-list{margin:var(--space-md) 0 0 calc(44px + var(--space-md))}
.rule-row{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:var(--space-3xs) var(--space-md);align-items:start;padding:var(--space-sm) var(--space-xs);border-top:1px solid var(--color-rule);border-radius:var(--radius);scroll-margin-top:96px}
.rule-row:hover{background:var(--color-paper-3)}
.rule-row:target,.rule-group:target>.group-head{background:var(--color-wash)}
.rule-num{font-size:1.0625rem;color:var(--color-accent);font-variant-numeric:lining-nums tabular-nums}
.rule-body{min-width:0}
.rule-body h3{font-size:1.0625rem;margin:0}
.rule-body h3 a{color:var(--color-ink);text-decoration:none}
.rule-body h3 a:hover{color:var(--color-accent-2);text-decoration:underline}
.rule-body p{margin-top:var(--space-3xs);font-size:.9375rem;color:var(--color-muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rule-row .row-tools,.group-head .row-tools{opacity:.6;transition:opacity var(--dur-micro) var(--ease-out)}
.rule-row:hover .row-tools,.rule-row:focus-within .row-tools,.group-head:hover .row-tools,.group-head:focus-within .row-tools{opacity:1}
@media (hover:none){.rule-row .row-tools,.group-head .row-tools{opacity:1}}
.rule-row[hidden],.rule-group[hidden]{display:none}
.archived-note{font-style:italic}
.is-archived .rule-num,.is-archived .group-num,.is-archived .rule-body h3 a,.is-archived .group-title h2{color:var(--color-muted)}
.slug{white-space:nowrap}

/* The rule editor: the form, then the preview, the versions and the log. */
.rules-add,.rules-section{margin-top:var(--space-xl);padding:var(--space-lg)}
.rules-add h2,.rules-section h2{margin-bottom:var(--space-sm)}
.rule-form{display:grid}
.rule-form .form-row{margin-top:var(--space-lg)}
.field textarea[name="lead"]{min-height:0}
.rule-preview{padding:var(--space-2xs) 0 var(--space-2xs) var(--space-md);border-left:2px solid var(--color-rule-strong)}
.rule-preview h3{font-size:var(--text-title);margin:0 0 var(--space-xs)}
.rule-preview .rule-num{margin-right:var(--space-2xs)}
.rule-preview p{white-space:pre-line;overflow-wrap:anywhere}
.preview-tags{font-size:.875rem;color:var(--color-muted)}
.current-version{margin:0 0 var(--space-xs);padding:var(--space-sm) var(--space-lg)}
.current-version summary,.revisions summary{cursor:pointer;color:var(--color-ink)}
.current-version .rule-preview{margin-top:var(--space-sm)}
.log{padding:0 var(--space-lg)}
.log>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) auto;gap:var(--space-3xs) var(--space-md);padding:var(--space-xs) 0;border-bottom:1px solid var(--color-rule);font-size:.9375rem}
.log>li:last-child{border-bottom:0}
.log-what{color:var(--color-ink)}
.log-who{color:var(--color-ink-2);overflow-wrap:anywhere}
.log-when{color:var(--color-muted);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.revisions>li{display:block}
.revisions summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) auto;gap:var(--space-3xs) var(--space-md);list-style:none}
.revisions summary::-webkit-details-marker{display:none}
/* The caret turns down when a version opens. */
.revisions summary .log-what::before{content:"▸";display:inline-block;width:1.1em;color:var(--color-accent);transition:transform var(--dur-micro) var(--ease-out)}
.revisions details[open] summary .log-what::before{transform:rotate(90deg)}
.revisions .rule-preview{margin:var(--space-sm) 0 var(--space-2xs)}

/* ===== Allowlist for the player: the state first, the form beside the history. ===== */
.al-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--space-lg);align-items:start}
.al-aside{position:sticky;top:calc(var(--header) + var(--space-md))}
.al-state{margin:0 0 var(--space-lg);padding:var(--space-md) var(--space-lg);font-size:var(--text-title);color:var(--color-ink)}
.al-state p+p{margin-top:var(--space-xs)}
.al-state.is-done{border-color:var(--color-ok);background:var(--color-ok-wash)}
.al-state.is-waiting{border-color:var(--color-warn);background:var(--color-warn-wash)}
.al-state.is-blocked{border-color:var(--color-error);background:var(--color-error-wash)}
.al-state .hint{font-size:.9375rem}
.al-form{display:grid;gap:var(--space-lg)}
.al-section{padding:var(--space-lg)}
.panel .al-section-title{font-size:var(--text-section);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-rule)}
.al-section-desc{margin-top:var(--space-xs);max-width:64ch;color:var(--color-muted)}
.al-questions{margin:var(--space-2xs) 0 0;padding:0;list-style:none}
.al-question{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 var(--space-md);padding:var(--space-lg) 0 var(--space-2xs);scroll-margin-top:96px}
.al-question>*{grid-column:2}
.al-q-label{display:contents;cursor:default}
.al-q-num{grid-column:1;grid-row:1/span 3;font-size:var(--text-display);line-height:.95;color:var(--color-accent);font-variant-numeric:lining-nums tabular-nums}
.al-q-text{grid-column:2;font-size:var(--text-title);line-height:1.45;color:var(--color-ink);white-space:pre-line;overflow-wrap:anywhere}
.al-question textarea{min-height:7lh;margin-top:var(--space-sm);resize:vertical}
.al-counter{margin-top:var(--space-2xs);font-size:.875rem;color:var(--color-muted)}
.al-counter.is-ok{color:var(--color-ok)}
.al-submit{padding:var(--space-lg);border-color:var(--color-rule-strong)}
.al-submit .field-hint{max-width:64ch}
.al-history-block h2{margin-bottom:var(--space-sm)}
.al-aside .al-history-block{margin-top:0}

/* ===== Allowlist in the admin: the applicant, the answers by section, the decision on the side. ===== */
.al-applicant{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg);margin-bottom:var(--space-lg)}
.al-applicant .msg-avatar{width:56px;height:56px;font-size:1.5rem;border-color:var(--color-accent);color:var(--color-accent)}
.al-applicant>div{flex:1;min-width:0}
.al-applicant-name{margin:0 0 var(--space-2xs);font-size:var(--text-title);color:var(--color-ink);overflow-wrap:anywhere}
.al-facts{border-top:0;padding-top:0}
.al-applicant-links{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs)}
.al-answers{padding:var(--space-lg)}
.al-answer{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 var(--space-md);padding:var(--space-lg) 0;border-top:1px solid var(--color-rule);scroll-margin-top:96px}
.al-answers .al-questions>.al-answer:first-child{border-top:0;padding-top:0}
.al-answer .al-q-num{grid-row:auto}
.al-answer-main{min-width:0}
.panel .al-answer h3.al-q-text{display:block;margin:0;font-size:var(--text-title);text-wrap:pretty}
.al-answer-text{max-width:110ch;margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-panel);background:var(--color-field);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-ink);line-height:1.65}
mark.al-pasted{padding:0 var(--space-3xs);color:var(--color-ink);background:var(--color-warn-wash);border-bottom:1px dashed var(--color-warn);border-radius:2px}
.al-stats{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:var(--space-sm) 0 0}
.al-stats>div{display:grid;gap:var(--space-3xs);min-width:120px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-panel);background:var(--color-hover)}
.al-stats dt{font-size:.8125rem;color:var(--color-muted)}
.al-stats dd{margin:0;font-size:.9375rem;line-height:1.35;color:var(--color-ink);font-variant-numeric:lining-nums tabular-nums}
.al-stats>.is-warn{border-color:var(--color-warn);background:var(--color-warn-wash)}
.al-stats>.is-warn dd{color:var(--color-warn)}
.al-pasted-list{margin-top:var(--space-xs);font-size:.9375rem;color:var(--color-muted)}
.al-pasted-list summary{cursor:pointer;color:var(--color-warn)}
.al-pasted-list ul{margin:var(--space-2xs) 0 0;padding-left:var(--space-md)}
.al-pasted-list li{white-space:pre-wrap;overflow-wrap:anywhere}
.al-decide .field{margin-top:var(--space-xs)}
.al-decide .field>span{font-size:.875rem}
.al-decide textarea{min-height:5lh;font-size:.9375rem}
.al-decide-buttons{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-sm)}
.ticket-side .al-history-comment{margin-top:var(--space-xs);font-size:.9375rem}

/* The form's editor: sections like rule groups, questions as rows, edits folded. */
.al-section-facts{font-size:.875rem;color:var(--color-muted)}
.al-edit{margin:var(--space-2xs) 0 0}
.al-edit>summary{list-style:none}
.al-edit>summary::-webkit-details-marker{display:none}
.al-edit[open]>summary{margin-bottom:var(--space-2xs)}
.al-edit .rule-form{padding:var(--space-2xs) 0 var(--space-sm) var(--space-md);border-left:1px solid var(--color-rule-strong)}
.al-section-edit,.al-archive,.al-add-question,.al-generate,.al-sections .notice{margin-left:calc(44px + var(--space-md))}
.al-section-edit{margin-top:var(--space-sm)}
.al-q-row-text{margin:0;font-size:1.0625rem;color:var(--color-ink);white-space:pre-line}
.al-archive{margin-top:var(--space-sm)}
.al-archive>summary{cursor:pointer;font-size:.9375rem;color:var(--color-muted)}
.al-archive .rule-list{margin-left:0}
.al-add-question,.al-generate{margin-top:var(--space-2xs)}
.al-add-question .field{margin-top:var(--space-sm)}
.al-add-question .form-row{margin-top:var(--space-sm)}
.al-ai-fields{margin-top:var(--space-lg);padding:var(--space-3xs) 0 0 var(--space-md);border-left:1px dashed var(--color-rule-strong)}
.al-ai-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-sm)}
.al-ai-date{font-size:.9375rem}
.al-min{font-size:.875rem;color:var(--color-faint);white-space:nowrap}
.al-sections .field textarea,.rules-add .field textarea[name="description"]{min-height:0}
.field textarea[name="aiPrompt"]{min-height:5lh}
.al-preview{max-width:760px;padding-left:var(--space-md);border-left:2px solid var(--color-rule-strong)}
.al-preview .al-section:first-child{padding-top:var(--space-2xs)}
.panel .al-preview h3.al-section-title{font-size:var(--text-title);margin:0;border-bottom:0}
.al-preview-q{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 var(--space-sm);padding:var(--space-sm) 0 var(--space-3xs)}
.al-preview-q .al-q-num{font-size:var(--text-section);grid-row:1/span 2}
.al-preview-q .al-counter{grid-column:2}

/* Replaying the typing of an answer. */
.al-replay{margin-top:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-panel);background:var(--color-field)}
.al-replay>summary{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);cursor:pointer;list-style:none;font-size:.9375rem;color:var(--color-accent)}
.al-replay>summary::-webkit-details-marker{display:none}
/* The triangle turns down when the replay opens. */
.al-replay>summary::before{content:"▶";font-size:.6875rem;transition:transform var(--dur-micro) var(--ease-out)}
.al-replay[open]>summary::before{transform:rotate(90deg)}
.al-replay>summary:hover{background:var(--color-paper-3)}
.al-replay.is-empty{padding:var(--space-xs) var(--space-md);font-size:.9375rem;font-style:italic;color:var(--color-faint);border-style:dashed}
.replay{padding:var(--space-2xs) var(--space-md) var(--space-md)}
.replay-screen{min-height:7lh;max-height:22lh;overflow:auto;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius);background:var(--color-paper);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-ink);line-height:1.6}
.replay-caret{display:inline-block;width:2px;height:1.15em;margin:0 -1px;vertical-align:text-bottom;background:var(--color-accent);animation:replay-blink 1s steps(1) infinite}
.al-replay.is-pasting .replay-screen{border-color:var(--color-warn)}
.replay-note{min-height:1.5em;margin-top:var(--space-2xs);font-size:.875rem;color:var(--color-warn)}
.replay-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-sm);margin-top:var(--space-2xs)}
.replay-bar .button{min-height:36px;min-width:96px;font-size:.875rem}
.replay-track{position:relative;flex:1 1 220px;display:flex;align-items:center}
.replay-seek{width:100%;accent-color:var(--color-accent)}
.replay-marks{position:absolute;inset:0;pointer-events:none}
.replay-marks span{position:absolute;top:-2px;width:3px;height:calc(100% + 4px);margin-left:-1px;border-radius:1px;background:var(--color-warn)}
.replay-time{font-size:.875rem;color:var(--color-muted);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.replay-speed{width:auto;min-height:36px}
@keyframes replay-blink{50%{opacity:0}}

/* Players in the admin: the search, results as rows, a player's card. */
.player-card{padding:var(--space-lg)}
.player-card .msg-avatar{width:64px;height:64px;font-size:1.6rem;border:2px solid var(--color-accent);color:var(--color-accent)}
.panel .player-card .page-head{padding:0 0 var(--space-2xs)}
.player-card .page-head h1{overflow-wrap:anywhere}
.player-facts div{grid-template-columns:150px minmax(0,1fr)}

@media (max-width:1100px){
  .home-grid,.account-grid,.al-layout{grid-template-columns:minmax(0,1fr)}
  .home-side,.al-aside{position:static}
  .home-side{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  .ticket-admin{grid-template-columns:minmax(0,1fr)}
  .side-jump{display:block}
  .ticket-side{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 var(--space-xl)}
  .side-block+.side-block{border-top:0}
}
@media (max-width:60rem){
  .admin-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-md);padding-top:var(--space-lg)}
  .admin-menu{position:static}
  .admin-menu ul{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
  .panel-wide .page-head{padding-top:var(--space-md)}
  .thread-layout,.ticket-form{grid-template-columns:minmax(0,1fr)}
  .thread-aside,.thread-main,.ticket-form>.cat-choice,.ticket-form>:not(.cat-choice):not(input){grid-column:1;grid-row:auto}
  .thread-aside{position:static}
  .thread-aside .ticket-facts{flex-direction:row}
  .thread-aside .ticket-actions .button{width:auto}
  .ticket-filters:has(.filter-selects){grid-template-columns:minmax(0,1fr)}
  .filter-selects,.al-filter-row,.al-ai-numbers{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:40rem){
  .account{flex-direction:column}
  .facts div{grid-template-columns:minmax(0,1fr)}
  .login .button{width:100%}
  .ticket-row,.al-history-row{grid-template-columns:2.6em minmax(0,1fr);padding:var(--space-sm) var(--space-md)}
  .ticket-row>:nth-child(3){grid-column:2}
  .group-head{grid-template-columns:auto minmax(0,1fr)}
  .group-head .row-tools{grid-column:1/-1;justify-content:flex-start}
  .group-empty,.group-add,.rule-list,.al-section-edit,.al-archive,.al-add-question,.al-generate,.al-sections .notice{margin-left:0}
  .rule-row{grid-template-columns:2.8em minmax(0,1fr)}
  .rule-row .row-tools{grid-column:2;justify-content:flex-start;margin-top:var(--space-2xs)}
  .cat-row{grid-template-columns:2.6em minmax(0,1fr)}
  .cat-row .row-tools{grid-column:2;justify-content:flex-start;margin-top:var(--space-2xs)}
  .log>li,.revisions summary{grid-template-columns:minmax(0,1fr) auto}
  .log .log-what{grid-column:1/-1}
  .msg{grid-template-columns:28px minmax(0,1fr);gap:0 var(--space-xs);padding:var(--space-sm) var(--space-md)}
  .msg-avatar{width:28px;height:28px;font-size:.875rem}
  .react-menu{flex-wrap:wrap;width:max-content;max-width:calc(100vw - 80px)}
  .al-question,.al-answer{grid-template-columns:minmax(0,1fr)}
  .al-question>*,.al-question .al-q-text{grid-column:1}
  .al-q-num{grid-row:auto;font-size:var(--text-section);margin-bottom:var(--space-2xs)}
  .al-applicant .msg-avatar{width:44px;height:44px;font-size:1.2rem}
  .steps .step{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.replay-caret{animation:none}}

/* ===== Formatted rule text (src/richtext.mjs) and its editor (public/js/rich-editor.js). The colours match the editor's palette and kwrp.cz. ===== */
.rich-text>*+*{margin-top:var(--space-sm)}
.rich-text h3{font-size:var(--text-title);line-height:1.3}
.rich-text h4{font-size:1rem;color:var(--color-ink)}
.rich-text ul,.rich-text ol{padding-left:1.4em;color:var(--color-ink-2)}
.rich-text ul{list-style:disc}
.rich-text ol{list-style:decimal}
.rich-text li+li{margin-top:var(--space-3xs)}
.rich-text blockquote,.rich-area blockquote{margin:0;padding-left:var(--space-md);border-left:2px solid var(--color-rule-strong);color:var(--color-ink-2)}
.rich-text a{overflow-wrap:anywhere}
.tc-red{color:#e07a6a}.tc-gold{color:#d9b25f}.tc-green{color:#8fc18a}.tc-blue{color:#7fb0e0}.tc-muted{color:#9a9a8c}
mark,.rich-text mark,.rich-area mark{color:var(--color-ink);background:#6b5a1e;border-radius:2px;padding:0 2px}
mark.hl-yellow{background:#6b5a1e}mark.hl-red{background:#6e2a24}mark.hl-green{background:#2f5230}mark.hl-blue{background:#253f5e}

.rich{display:grid;border:1px solid var(--color-rule-strong);border-radius:var(--radius);background:var(--color-field)}
.rich:focus-within{outline:2px solid var(--color-focus);outline-offset:0}
.rich-toolbar{position:sticky;top:var(--header);z-index:var(--z-raised);display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-sm);padding:var(--space-2xs);background:var(--color-paper-3);border-bottom:1px solid var(--color-rule);border-radius:var(--radius) var(--radius) 0 0}
.rich-group{display:inline-flex;flex-wrap:wrap;gap:2px}
.rich-btn{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 var(--space-xs);font:inherit;font-size:.9375rem;line-height:1;color:var(--color-ink);background:transparent;border:1px solid transparent;border-radius:var(--radius);cursor:pointer}
.rich-btn:hover{background:var(--color-hover);border-color:var(--color-rule-strong)}
.rich-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:0}
.rich-btn[aria-pressed="true"]{background:var(--color-wash);border-color:var(--color-accent);color:var(--color-accent-2)}
.rich-btn.text{border-color:var(--color-rule-strong);background:var(--color-paper-2)}
.rich-btn code{border:0;background:none;padding:0}
.rich-menu{position:relative;display:inline-flex}
.rich-palette{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-dropdown);display:flex;gap:4px;padding:var(--space-2xs);background:var(--color-paper-3);border:1px solid var(--color-rule-strong);border-radius:var(--radius)}
.rich-palette[hidden]{display:none}
.rich-btn.swatch{min-width:28px;height:28px;padding:0;border-color:var(--color-rule-strong)}
.swatch.tc-red{background:#e07a6a}.swatch.tc-gold{background:#d9b25f}.swatch.tc-green{background:#8fc18a}.swatch.tc-blue{background:#7fb0e0}.swatch.tc-muted{background:#9a9a8c}
.swatch.hl-yellow{background:#6b5a1e}.swatch.hl-red{background:#6e2a24}.swatch.hl-green{background:#2f5230}.swatch.hl-blue{background:#253f5e}
.rich-link{display:flex;flex-wrap:wrap;gap:var(--space-xs);padding:var(--space-xs);border-bottom:1px solid var(--color-rule)}
.rich-link[hidden]{display:none}
.rich-link input{flex:1 1 220px;min-height:34px;padding:0 var(--space-xs);font:inherit;color:var(--color-ink);background:var(--color-paper);border:1px solid var(--color-rule-strong);border-radius:var(--radius)}
.rich-area{min-height:14lh;max-height:70vh;overflow:auto;padding:var(--space-sm);color:var(--color-ink);line-height:1.6;outline:none}
.rich-area>*+*{margin-top:var(--space-sm)}
.rich-area h3{font-size:var(--text-title)}
.rich-area ul{list-style:disc;padding-left:1.4em}
.rich-area ol{list-style:decimal;padding-left:1.4em}
.rich-area p{color:var(--color-ink)}

.tr-badge{margin-left:var(--space-xs);vertical-align:middle;display:inline-block;padding:0 var(--space-xs);font-size:.75rem;line-height:1.7;border-radius:var(--radius-pill);color:var(--color-warn);border:1px solid color-mix(in oklab,var(--color-warn) 45%,transparent);font-family:var(--font-body)}
.tr-list{display:grid;gap:var(--space-sm);margin:var(--space-md) 0}
.tr-lang{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-panel);background:var(--color-paper-2)}
.tr-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-xs) var(--space-sm)}
.tr-lang details{margin-top:var(--space-xs)}
.tr-lang summary{cursor:pointer;color:var(--color-accent);font-size:.9375rem}
.tr-state{font-size:.9375rem}
.tr-state.ok{color:var(--color-ok)}.tr-state.pending{color:var(--color-warn)}.tr-state.error{color:var(--color-error)}
.rule-preview .rich-text p{white-space:normal}

/* ===== Admin → players: the list of everyone in the panel. ===== */
.pl-filters{margin:var(--space-md) 0}
.pl-filters a[aria-current]{border-color:var(--color-accent);color:var(--color-accent-2)}
.table-wrap{overflow-x:auto;border:1px solid var(--color-rule);border-radius:var(--radius-panel);background:var(--color-paper-2)}
.pl-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.pl-table th,.pl-table td{padding:var(--space-xs) var(--space-sm);text-align:left;vertical-align:middle;border-top:1px solid var(--color-rule);white-space:nowrap}
.pl-table thead th{border-top:0;font-weight:400;font-size:.8125rem;color:var(--color-muted)}
.pl-table tbody tr:hover{background:var(--color-hover)}
.pl-table tr.is-archived{opacity:.6}
.pl-name{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--color-ink);text-decoration:none}
.pl-name:hover span{color:var(--color-accent-2);text-decoration:underline}
.pl-name .msg-avatar{width:28px;height:28px;font-size:.875rem}
.pl-ok{color:var(--color-ok)}
.pl-no{color:var(--color-faint)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-md);color:var(--color-muted)}