@layer legacy {
/* v1.5.1 shared community search, composition and reactions; inherited from v.06. */
.header-inner .realm{display:none}.header-actions{min-width:0;flex:1;justify-content:flex-end}.global-search{display:flex;align-items:center;max-width:330px;min-width:100px;flex:1;background:#fff;border:1px solid #a6babf;border-radius:24px;overflow:hidden}.global-search input{width:100%;min-width:0;border:0;background:#fff;color:var(--ink);padding:11px 12px;font-size:14px}.global-search button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:0;background:transparent;color:#294d65;padding:10px}.global-search svg,.composer-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.search-results{list-style:none;margin:0 0 16px;padding:0}.search-results li{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.search-results p{margin-top:5px;color:var(--muted)}.wall-search select{padding:10px;background:#fff;color:var(--ink);border:1px solid var(--line);font:inherit}
.composer-field{background:#fff;border:1px solid #9eafb1;border-radius:8px;overflow:visible}.composer-field:focus-within{outline:2px solid #b9a46b;outline-offset:2px}.profile-form .composer-field textarea,.composer-field .archive-editor{display:block;border:0;background:transparent;border-radius:8px 8px 0 0;outline:none;margin:0;width:100%}.composer-field textarea[hidden]{display:none}.composer-field .archive-editor{min-height:300px}.composer-field .character-count{display:block;margin:0;padding:0 12px;text-align:right}.composer-toolbar{display:flex;gap:2px;align-items:center;border-top:1px solid #e7ece9;padding:6px 8px}.composer-toolbar .composer-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:8px;border:0;border-radius:6px;background:transparent;color:#33594f;cursor:pointer;font-weight:bold;font-size:14px;margin:0}.composer-toolbar [data-emoji-open]{font-size:27px;font-family:Arial,sans-serif}.composer-toolbar .composer-icon:hover{background:#e8efea}.composer-hint{font-size:11px;color:var(--muted);padding-left:6px}.composer-tools .composer-file{position:absolute;width:1px!important;height:1px;opacity:0;padding:0!important;clip-path:inset(50%)}.composer-tools:has(.composer-file:focus-visible) .image-control{outline:3px solid #a57b21}.composer-tools .upload-preview{padding:10px}.composer-tools p:empty{display:none}.composer-tools .text-button{margin:0 10px 10px}.composer-tools [hidden],.composer-toolbar [hidden]{display:none!important}
.media-picker{width:440px;max-width:calc(100vw - 24px);max-height:80vh;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 15px 70px #0005}.media-picker::backdrop{background:#19384c99}.media-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.media-picker-heading h2{margin:0;font-size:20px}.media-picker-heading button{padding:6px 10px}.media-picker input{background:#fff;color:var(--ink);width:100%;border:1px solid #9eafb1;border-radius:6px;padding:11px}.media-picker form{display:flex;gap:8px;margin-bottom:12px}.media-picker-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:45vh;overflow:auto;margin:10px 0}.media-picker-results button{padding:0;border:1px solid var(--line);background:#edf1ed;color:var(--ink);border-radius:6px;overflow:hidden;min-height:44px}.media-picker-results.emoji-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.emoji-grid button{font-size:25px;height:48px}.media-picker-status{font-size:13px}.media-picker [hidden]{display:none!important}
.reaction-picker{position:relative;display:flex;align-items:stretch;gap:2px}.reaction-options{position:static}.reaction-options>summary{list-style:none;display:grid;place-items:center;cursor:pointer;min-width:28px;height:100%;min-height:44px;border:1px solid var(--line);border-radius:3px;padding:0 7px}.reaction-options>summary::-webkit-details-marker{display:none}.reaction-palette{position:absolute;bottom:100%;left:0;z-index:12;display:flex;gap:2px;padding:6px;background:#fff;border:1px solid #a7b8b2;border-radius:30px;box-shadow:0 5px 20px #19384c33;width:max-content;max-width:calc(100vw - 48px)}.reaction-palette button{display:grid;place-items:center;min-width:38px;min-height:44px;padding:5px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:24px}.reaction-palette button:hover{background:#e4ede7;transform:translateY(-2px)}.reaction-palette button[aria-pressed=true]{outline:2px solid #33594f;background:#e4ede7;color:var(--ink)}.reaction-picker .like-button{min-height:44px;touch-action:pan-y;-webkit-touch-callout:none;user-select:none}.reaction-count{min-height:44px}.reaction-status{color:var(--muted)}.parchment-sheet .post-reactions{margin:16px 0}.parchment-sheet .reaction-palette{z-index:25}
@media(max-width:700px){.header-inner{flex-wrap:wrap;gap:12px}.header-inner .brand{flex-basis:100%}.header-actions{width:100%;gap:6px}.global-search{max-width:none}.header-menu>summary{min-width:40px}.global-search input{font-size:16px;padding-left:10px}.composer-hint{font-size:10px}.composer-toolbar{padding:5px}.reaction-palette button{min-width:35px;padding:4px}.reaction-palette{gap:0;padding:4px}.media-picker-results.emoji-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.reaction-palette button:hover{transform:none}}
/* Moved into the layer in v.09 so generic panel spacing no longer overrides component rules. */
.panel form{margin-top:16px}.panel select{max-width:100%;min-height:44px}

}
/* v1.5.1 Market and Coin: theme-aware, keyboard-accessible community commerce. */
.commerce-nav,.market-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 22px}.commerce-nav a,.market-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:6px}.market-tabs a{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:180px}.market-tabs a[aria-current]{border:2px solid currentColor;font-weight:bold}.market-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}.market-card{margin:0;overflow-wrap:anywhere}.market-card img{width:100%;height:210px;object-fit:cover;border-radius:6px}.market-price{font-size:1.45rem;font-weight:bold;font-variant-numeric:tabular-nums}.market-photos{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.market-photos img{display:block;max-width:100%;width:260px;max-height:320px;object-fit:contain}.commerce-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:18px}.commerce-filter label{display:block}.commerce-filter input,.commerce-filter select{max-width:100%;min-height:44px}.commerce-filter>div{flex:1;min-width:130px}.commerce-filter p{width:100%;margin:0}.transaction-list{padding:0;list-style:none}.transaction-list li{padding:14px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.receipt-details{display:grid;grid-template-columns:minmax(80px,150px) minmax(0,1fr);gap:12px;overflow-wrap:anywhere}.receipt-details dt{font-weight:bold}.receipt-details dd{margin:0}.commerce-nav a:focus-visible,.market-tabs a:focus-visible{outline:3px solid currentColor;outline-offset:3px}@media(max-width:760px){.header-inner{flex-wrap:wrap}.header-actions{flex-wrap:wrap;width:100%;gap:6px}.header-actions .global-search{flex-basis:100%;max-width:none}.receipt-details{grid-template-columns:1fr}.receipt-details dd{margin-bottom:8px}}@media(prefers-reduced-motion:reduce){}

/* Staff attendance controls use cards so names and checkboxes fit phones. */
.attendance-events{list-style:none;padding:0}.attendance-fieldset{border:0;padding:0;margin:0;min-width:0}.attendance-fieldset legend{font-size:1.25rem;font-weight:bold;margin-bottom:12px}.attendance-player{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;overflow-wrap:anywhere}.attendance-check{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 0}.attendance-check input[type=checkbox]{width:22px;height:22px;flex-shrink:0}.attendance-fieldset>input[type=number]{display:block;max-width:100%;margin:8px 0 16px}.attendance-fieldset:disabled{opacity:.7}.attendance-player p{margin:6px 0}.attendance-fieldset button{margin-bottom:16px}@media(max-width:600px){.attendance-player{grid-template-columns:1fr 1fr;gap:8px}.attendance-player>div{grid-column:1/-1}}

.notification-history{max-height:65vh;overflow-y:auto;overflow-anchor:none;scrollbar-gutter:stable}.notification-preview-list{max-height:340px;overflow-y:auto;overflow-anchor:none}.notification-history-item{border-bottom:1px solid var(--line);padding:12px 4px;overflow-wrap:anywhere}.notification-history-item:last-child{border-bottom:0}.notification-history-item form{margin:0}.notification-history-item .notification-link{display:block;text-align:left;white-space:normal;font-weight:400;min-height:44px}.notification-history-item.is-unread .notification-link{font-weight:700}.notification-history-item time{font-size:12px;color:var(--muted)}.message-preview span{font-weight:400}.message-preview.is-unread span{font-weight:700}

html[data-theme="facebook"] .market-grid .market-card{background:#eaf2fc;border-color:#afc4e2}.market-placeholder{display:none}.market-list{display:block}.market-list .market-card{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;padding:16px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}.market-list .market-thumbnail img{height:100px;width:100px;object-fit:cover}.market-list .market-placeholder{display:grid;place-items:center;min-height:100px;background:var(--paper);font-size:12px;border:1px solid var(--line);border-radius:5px}.market-list .market-card h2{margin:4px 0;font-size:18px}.market-list .market-price{font-size:18px;margin:6px 0}.market-list .market-card p{margin:6px 0}.market-list .market-card:last-child{border-bottom:0}@media(max-width:480px){.market-list .market-card{grid-template-columns:76px minmax(0,1fr);gap:12px}.market-list .market-thumbnail img{width:76px;height:76px}.market-list .market-placeholder{min-height:76px}}

.post-video{margin:14px 0;max-width:100%;width:560px}.post-video iframe{display:block;border:0;width:100%;aspect-ratio:16/9;min-height:200px;border-radius:6px;background:#111}.post-video.video-vertical{width:340px}.post-video.video-vertical iframe{aspect-ratio:9/16}.post-video figcaption{font-size:12px;margin-top:6px}.feed-activity{overflow-wrap:anywhere}

/* Keep navigation available while the page scrolls, without shifting content. */
.masthead{position:sticky;top:0;z-index:30}
.skip{z-index:40}
html{scroll-padding-top:calc(var(--masthead-height,80px) + 12px)}
.masthead .header-dropdown{max-height:min(70vh,calc(100dvh - var(--masthead-height,80px) - 16px))}
/* v1.4.2: on a phone the header slides up out of the way as the page scrolls down and is pulled back down as it scrolls
   up (header-scroll.js follows the scrolling with --header-shift, and eases it the rest of the way when the scrolling
   stops). Messages and Groups are placed under it as they open, so it is all there at once while either is open. */
.masthead.header-shifted{transform:translateY(calc(var(--header-shift,0) * -1px))}
.masthead.header-settling{transition:transform .22s ease-out}
html:is(.messages-open,.groups-open) .masthead{transform:none}
@media(prefers-reduced-motion:reduce){.masthead.header-settling{transition:none}}
/* v1.4.3: Home's post box is one line until it is tapped: the member's picture beside a round "Share something with the
   kingdom…", as in the popular social apps. modern.js opens it ready to type and folds it again when it's left empty. */
.feed-composer:not(.open)>form,.feed-composer.open>.feed-composer-bar{display:none}
.feed-composer>form{margin-top:0}
.feed-composer-prompt{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:0;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:text}
/* v1.4.4: to the right of it, a picture button like Facebook's Photo (the user asked, for that one only): it opens the box
   and the picture chooser together (modern.js). Two pictures, one in front of the other, in the theme's own green. */
.feed-composer-bar{display:flex;align-items:center;gap:8px}
.feed-composer-bar>.feed-composer-prompt{flex:1;min-width:0}
.feed-composer-photo{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--success);cursor:pointer}
.feed-composer-photo:hover{background:var(--subtle)}
.feed-composer-photo svg{width:28px;height:28px;fill:currentColor}
.feed-composer-photo .photo-back{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.feed-composer-photo .photo-cut{fill:var(--surface)}
.feed-composer-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--accent);color:var(--on-accent);font:bold 19px/1 Georgia,serif}
.feed-composer-text{flex:1;min-width:0;padding:12px 18px;border:1px solid var(--field-border);border-radius:24px;background:var(--subtle);color:var(--text);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-composer-prompt:hover .feed-composer-text{background:var(--selected)}
.feed-composer-prompt:focus-visible{outline:none}.feed-composer-prompt:focus-visible .feed-composer-text{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:480px){.feed-composer-prompt{gap:8px}.feed-composer-avatar{flex-basis:36px;width:36px;height:36px;font-size:17px}.feed-composer-text{padding:11px 12px;font-size:15px;letter-spacing:-.01em}}
@media(max-width:480px){.feed-composer-bar{gap:2px}.feed-composer-bar .feed-composer-prompt{gap:5px}.feed-composer-bar .feed-composer-text{padding-inline:10px;font-size:14px;letter-spacing:-.02em}.feed-composer-photo{flex-basis:36px;width:36px;margin-right:-8px}}
/* v1.4.4: the group's post box and a post's comment box are folded the same way (composer.html's folded_prompt); the
   comment box is a little smaller, under the comments. */
.group-composer{margin-top:14px}
.comment-composer{margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}
.comment-composer .feed-composer-prompt{min-height:40px;gap:8px}
.comment-composer .feed-composer-avatar{flex-basis:32px;width:32px;height:32px;font-size:15px}
.comment-composer .feed-composer-text{padding:9px 14px;font-size:15px}
/* v1.4.4: comments as in the Facebook app (comment.html; the user sent its screenshot): no lines or boxes, the round
   picture beside the name in bold and how long ago, the words, and a quiet row of Like, Reply and the reactions'
   emojis with their count on the right. Replies sit under the words, folded under "View 2 replies". */
.comments-panel h2{margin-bottom:6px}
.comment-list{display:grid;gap:2px}
.wall-comment{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;align-items:start;padding:6px 0 2px;border:0;border-radius:10px}
.comment-avatar{display:grid;place-items:center;width:36px;height:36px;margin-top:2px;border-radius:50%;overflow:hidden;background:var(--accent);color:var(--on-accent);font:bold 16px/1 Georgia,serif;text-decoration:none}
a.comment-avatar:hover{text-decoration:none}
.comment-avatar img{width:100%;height:100%;object-fit:cover}
.comment-main{min-width:0}
.comment-head{display:flex;align-items:center;gap:5px;min-height:24px}
.comment-head h3{margin:0;min-width:0;font-size:14px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.comment-head h3 a{color:var(--text)}
.comment-dot{color:var(--secondary)}
.comment-time{flex:none;color:var(--secondary);font-size:13px}
.comment-text{margin:1px 0 0;font-size:15px;line-height:1.4}
.comment-body .comment-photos{margin:6px 0 2px}
.comment-reply{grid-template-columns:28px minmax(0,1fr);margin:0;padding:8px 0 0}
.comment-reply .comment-avatar{width:28px;height:28px;font-size:13px}
.compact-reactions{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;margin:0 0 0 -6px}
.compact-reactions .reaction-form{margin:0}
.compact-reactions .reaction-form .like-button{display:inline-grid;place-items:center;min-width:36px;min-height:32px;padding:4px 8px;border:0;border-radius:16px;background:transparent;color:var(--secondary)}
.compact-reactions .reaction-form .like-button[aria-pressed=true]{background:transparent;color:var(--link)}
.compact-reactions .like-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.compact-reactions .like-button[aria-pressed=true] svg{fill:currentColor}
.compact-reactions .reaction-form .like-button:hover,.comment-reply-button:hover{background:var(--subtle)}
.comment-reply-button{display:inline-flex;align-items:center;gap:5px;min-height:32px;margin:0;padding:4px 8px;border:0;border-radius:16px;background:transparent;color:var(--secondary);font-size:13px;font-weight:700}
.comment-reply-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.compact-reactions .reaction-summary{margin-left:auto}
.compact-reactions .reaction-count{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:2px 4px;text-decoration:none;font-size:13px}
.compact-reactions .reaction-emojis{font-size:15px;letter-spacing:-2px}
.compact-reactions .reaction-tooltip{left:auto;right:0}
.compact-reactions .reaction-status:empty{display:none}
/* Over a reply, far in on a phone, the reactions to choose from start further left and sit closer, so they stay on screen. */
@media(max-width:480px){.compact-reactions .reaction-palette{left:-10px;gap:0;padding:4px}.compact-reactions .reaction-palette button{min-width:34px}.comment-reply .compact-reactions .reaction-palette{left:-56px}}
.comment-replies>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:2px 0;color:var(--secondary);font-size:13px;font-weight:700;cursor:pointer}
.comment-replies>summary::-webkit-details-marker{display:none}
.comment-replies>summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.comment-replies[open]>summary svg{transform:rotate(180deg)}
.comment-replies:not([open])>summary .replies-open,.comment-replies[open]>summary .replies-closed{display:none}
.wall-comment .reply-form{margin:6px 0 4px}
.wall-comment .reply-form textarea,.comment-composer textarea{min-height:64px}
/* v1.4.5: a group's settings cog in the upper-right corner of its heading, opening Edit group and Delete group (the
   user asked); the heading's words keep clear of it. */
.group-heading{position:relative}
.group-heading.with-settings{padding-right:52px}
.group-settings{position:absolute;top:0;right:0;z-index:7}
.group-settings>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--link);cursor:pointer}
.group-settings>summary::-webkit-details-marker{display:none}
.group-settings>summary:hover{background:var(--subtle)}
.group-settings[open]>summary{background:var(--selected)}
.group-settings>summary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.group-settings-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.group-settings-menu a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:6px;color:var(--text)}
.group-settings-menu a:hover{background:var(--subtle);text-decoration:none}
.group-settings-menu .group-delete-link{color:var(--danger)}
.comments-scripted .reply-form>summary{display:none}
.comments-scripted .reply-form:not([open]){margin:0}
.comment-menu{position:relative;margin-left:auto}
.comment-menu>summary{list-style:none;display:grid;place-items:center;width:32px;height:28px;border-radius:14px;color:var(--secondary);font-size:20px;line-height:1;cursor:pointer;opacity:0}
.comment-menu>summary::-webkit-details-marker{display:none}
.comment-menu>summary:hover{background:var(--subtle)}
.comment-main:has(>:is(.comment-head,.comment-body,.post-reactions):hover)>.comment-head .comment-menu>summary,.comment-menu[open]>summary,.comment-menu>summary:focus-visible{opacity:1}
.comment-menu-list{position:absolute;top:100%;right:0;z-index:6;min-width:170px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.comment-menu-list a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:6px;color:var(--text)}
.comment-menu-list a:hover{background:var(--subtle);text-decoration:none}
/* On a touch screen the ⋯ waits for the comment to be held (comments.js), and the phone's own text menu stays out of it. */
@media(hover:none){.comment-main:has(>:is(.comment-head,.comment-body,.post-reactions):hover)>.comment-head .comment-menu:not([open])>summary:not(:focus-visible){opacity:0}
 .comments-scripted .comment-main:has(>.comment-head .comment-menu)>.comment-body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
/* v1.4.3: the welcome tour at a member's first sign-in (welcome.html): one step at a time in the theme's colours, its
   picture in an accent circle, Back and Next along the bottom. */
.welcome-tour{width:520px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);box-sizing:border-box;padding:28px 28px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-art,none) var(--surface);color:var(--text);box-shadow:0 18px 70px #0005;overflow:auto}
.welcome-tour::backdrop{background:var(--backdrop)}
.welcome-tour[open]{animation:welcome-in .3s ease-out}
@keyframes welcome-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.welcome-close{position:absolute;top:8px;right:8px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--secondary);font-size:28px;line-height:1}
.welcome-close:hover{background:var(--subtle);color:var(--text)}
.welcome-step{text-align:center}
.welcome-step:not([hidden]){animation:welcome-step .25s ease-out}
@keyframes welcome-step{from{opacity:0;transform:translateX(16px)}}
.welcome-art{display:grid;place-items:center;width:84px;height:84px;margin:4px auto 10px;border-radius:50%;background:var(--button-art,none) var(--accent);font-size:42px;line-height:1;box-shadow:0 0 0 6px var(--selected)}
.welcome-step .eyebrow{margin:0 auto 4px;text-align:center}
.welcome-step h2{margin:0 0 10px;font:26px/1.2 var(--title-font);color:var(--heading)}
.welcome-step h2:focus{outline:none}.welcome-step h2:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.welcome-step p{margin:0 auto 12px;max-width:42ch;line-height:1.55}
.welcome-tour .button,.welcome-shortcuts a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;box-sizing:border-box;padding:10px 18px;border:1px solid var(--accent);border-radius:999px;background:var(--button-art,none) var(--accent);color:var(--on-accent);font-weight:bold;text-decoration:none}
.welcome-action{margin-top:16px!important}
.welcome-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 4px}
.welcome-shortcuts a{border-radius:12px;background:var(--subtle);border-color:var(--border);color:var(--text);font-weight:normal;justify-content:flex-start;text-align:left;line-height:1.3}
.welcome-shortcuts a:hover{background:var(--selected)}
.welcome-shortcuts span{font-size:22px}
.welcome-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:20px;padding-top:14px;border-top:1px solid var(--border)}
.welcome-nav button{min-height:44px;padding:9px 18px;border-radius:999px}
.welcome-back{justify-self:start;background:transparent!important;color:var(--link)!important;border-color:var(--field-border)!important}
.welcome-next{justify-self:end;grid-column:3}
.welcome-count{margin:0;font-size:14px;color:var(--secondary);white-space:nowrap}
.welcome-skip{display:block;margin:8px auto 0;min-height:44px;padding:8px 12px}
@media(max-width:480px){.welcome-tour{padding:24px 16px 12px}.welcome-step h2{font-size:22px}.welcome-shortcuts{grid-template-columns:1fr}.welcome-nav button{padding:9px 14px}}
@media(prefers-reduced-motion:reduce){.welcome-tour[open],.welcome-step:not([hidden]){animation:none}}
/* v1.4.3: a GIF added to a box shows under it, with × to take it off (gifs.js); its address isn't in the words. */
.composer-gif{position:relative;display:inline-block}
.composer-gif-remove{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:#000000b8;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.composer-gif-remove:hover,.composer-gif-remove:focus-visible{background:#000}
/* v1.4.3: Chat abuse review: the encrypted messages a reporter included, each verified against what was sent. */
.report-evidence{margin:10px 0;border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:var(--subtle)}
.report-evidence summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:bold}
.report-evidence ol{margin:6px 0 0;padding-left:22px}.report-evidence li{margin:0 0 10px}.report-evidence time{font-size:14px;color:var(--secondary)}

/* A compact filter control beside the title, separate from post share buttons. */
.feed-title{margin-bottom:16px}
.feed-title h1{margin:0;min-width:0}
.feed-title [data-open-feed]{flex:0 0 24px;width:24px;height:24px;min-width:24px;min-height:24px;padding:4px;border-radius:3px}
.feed-title [data-open-feed] svg{width:14px;height:14px}
/* v1.3.2: the feed's search, folded away behind a magnifier just right of the filter and the same size. The magnifier
   is pressed while the search is open under the title (modern.js). */
.feed-title [data-feed-search]{flex:0 0 24px;width:24px;height:24px;min-width:24px;min-height:24px;padding:4px;border-radius:3px;margin-left:-4px}
.feed-title [data-feed-search] svg{width:14px;height:14px}
.feed-title [data-feed-search][aria-expanded=true]{background:var(--selected,#d8dfea);border-color:var(--accent,#3b5998)}
.feed-search:not(.open){display:none}
/* v1.3.3: the Archives' search, folded away behind a round magnifier right beside the title (as the Market's ⓘ sits
   beside its own), in the title's colours; pressed while the search is open under the title (modern.js). */
.archive-title{position:relative;z-index:1;display:flex;align-items:center;gap:4px;max-width:85%;margin:12px 0}
.archive-hall .archive-title h1{flex:0 1 auto;max-width:none;margin:0;min-width:0}
.archive-hall .archive-search-toggle{flex:none;width:44px;height:44px;padding:0;border-color:transparent;border-radius:50%;background:transparent;color:inherit}
.archive-hall .archive-search-toggle svg{width:26px;height:26px;stroke-width:2}
.archive-hall .archive-search-toggle:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.archive-hall .archive-search-toggle[aria-expanded=true]{background:color-mix(in srgb,currentColor 16%,transparent);border-color:currentColor}
.archive-search:not(.open){display:none}
/* On a phone the title is a little smaller (28px, was 30px), so it and the magnifier fit on one line. */
@media(max-width:560px){.archive-title{max-width:100%}.archive-hall .archive-title h1{font-size:28px}}

.video-stage{position:relative;aspect-ratio:16/9;min-height:200px;border-radius:6px;overflow:hidden;background:#242424}
.video-vertical .video-stage{aspect-ratio:9/16}
.video-preview{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:18px;background:#242424;color:white;text-align:center}
.video-preview[hidden]{display:none}
.video-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.72}
.video-vertical .video-preview img{object-fit:cover}
.video-preview .video-play,.video-preview .video-load-status{position:relative;z-index:1}
.video-preview .video-play{background:#b62020;color:white;border:1px solid #fff8;border-radius:24px;padding:12px 20px;min-height:44px}
.video-preview .video-play:disabled{background:#4c4c4c;color:white}
.video-load-status:not(:empty){background:#181818e8;color:white;padding:10px;border-radius:6px;margin:0;font-size:13px}
.post-video .video-stage iframe{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.post-video .video-stage .video-player-pending{opacity:0;pointer-events:none}

.feed-title{display:flex;align-items:center;gap:12px}.feed-title h1{margin-right:0}.icon-button{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:9px;background:transparent;color:var(--link);border:1px solid var(--line);border-radius:5px}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}.feed-preferences,.emoji-reaction-dialog{width:560px;max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto;padding:24px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}.feed-preferences fieldset{margin-bottom:16px}.post-heading{position:relative;min-height:44px;padding-right:55px}.post-share{position:absolute;right:0;top:0}.post-share .copy-status:not(:empty){position:absolute;right:0;top:100%;width:230px;padding:8px;background:var(--surface);border:1px solid var(--border);z-index:4}.my-reactions{display:flex;gap:4px;flex-wrap:wrap}.my-reactions button{background:var(--subtle);color:var(--text);padding:5px 8px}.reaction-options>summary{display:none}.reaction-options{border:0}.reaction-palette{max-width:calc(100vw - 42px);flex-wrap:wrap}.emoji-reaction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-top:16px;max-height:45vh;overflow:auto}.emoji-reaction-grid button{font-size:25px;min-height:44px;padding:4px;background:var(--subtle);color:var(--text)}.emoji-reaction-dialog input{max-width:100%;min-height:44px}.follow-controls form{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.follow-controls label{flex-basis:100%}

.video-help[hidden]{display:none}
.icon-button[hidden]{display:none}
/* Archive access choices (audience radios and role checkboxes) share one tidy list style. */
.role-choices ul{list-style:none;padding:0;margin:0}
.role-choices li{display:flex;align-items:center;gap:10px;margin:6px 0}
.role-choices li input{width:20px;height:20px;flex:0 0 20px;margin:0}
.role-choices+.role-choices{margin-top:16px}
.video-help{margin-top:6px}
.video-help .video-reload{font-size:12px;padding:4px 8px;min-height:28px}
.video-help .video-load-status:not(:empty){margin-top:6px}
/* v1.5.1 Google sign-in: Google's light button (white, grey outline, colour G) in every theme. */
.google-sign-in{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 16px 0 12px;background:#fff;color:#1f1f1f;border:1px solid #747775;border-radius:4px;font:500 15px/1 Roboto,Arial,Helvetica,sans-serif;text-decoration:none}.google-sign-in:hover{background:#f2f2f2;text-decoration:none}.google-sign-in:focus-visible{outline:3px solid #0b57d0;outline-offset:2px}.google-sign-in svg{flex:none}
/* v1.1.1 Settings → Notifications: switches that take effect at once; the options grey out while Notifications is off. */
.push-switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}.push-master{border-top:0;padding-top:0}.push-master .push-switch-text strong{font-size:16px}.push-switch-text{display:flex;flex-direction:column;gap:2px;min-width:0}.push-switch .quiet{padding:0}.push-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}.push-switch input:focus-visible+.push-switch-track{outline:3px solid var(--focus);outline-offset:3px}.push-switch:has(input:disabled){cursor:not-allowed}.push-switch:has(input:disabled) .push-switch-track,.push-switch:has(input:disabled) .push-switch-text{opacity:.5}.push-options{border:0;margin:14px 0 0;padding:0;min-width:0}.push-options legend{margin-bottom:2px;padding:0}.push-options:disabled .push-switch{cursor:not-allowed}.push-options:disabled .push-switch-track,.push-options:disabled .push-switch-text{opacity:.5}.push-status{margin:4px 0 0}.push-saved{min-height:1.5em;margin-top:10px}.push-devices{list-style:none;margin:0 0 14px;padding:0}.push-devices li{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 16px;padding:10px 0;border-top:1px solid var(--line)}.push-devices li>span{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}.push-devices .quiet{padding:0}.push-this-device[hidden]{display:none}.push-help{margin-top:14px;padding:12px 16px;background:var(--subtle,#f7f7f7);border:1px solid var(--line)}.push-help h3{margin:0 0 6px;font-size:14px}.push-help ol{margin:0 0 8px;padding-left:20px}@media (prefers-reduced-motion:reduce){.push-switch-track,.push-switch-track::before{transition:none}}
/* v1.3.1: off and on look nothing alike at a glance, in every theme (--secondary and --accent are close in some).
   Off is an empty track, outlined in grey, with a small grey knob; on is filled with the theme's accent, with a
   full-size knob in its contrasting colour. */
.push-switch-track{flex:none;position:relative;box-sizing:border-box;width:46px;height:26px;border:2px solid var(--secondary);border-radius:13px;background:transparent;transition:background .15s,border-color .15s}
.push-switch-track::before{content:"";position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:50%;background:var(--secondary);transform:scale(.7);transition:transform .15s,background .15s}
.push-switch input:checked+.push-switch-track{border-color:var(--accent);background:var(--accent)}
.push-switch input:checked+.push-switch-track::before{background:var(--on-accent);box-shadow:0 1px 2px #0005;transform:translateX(20px)}
/* v1.1.2 pictures in messages, and group pictures. */
.chat-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;max-width:440px;margin:6px 0}.chat-photos a{display:block}.chat-photos img{display:block;width:100%;height:130px;object-fit:cover;border-radius:8px}.chat-compose input[type=file]{max-width:100%}
.group-picture{display:block;width:96px;height:96px;object-fit:cover;border-radius:12px;margin-bottom:10px}.group-card .group-picture{float:left;width:64px;height:64px;margin:0 14px 6px 0}.group-card::after{content:"";display:block;clear:both}.group-picture-field label{display:flex;align-items:center;gap:8px}.group-picture-field input[type=checkbox]{width:auto}
/* v1.1.3 profiles: a header card, a compact intro, then the member's wall. Management forms stay folded. */
.profile-identity{display:flex;align-items:center;gap:16px;min-width:0}
.profile-photo{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--border,#c9d3d0)}
.profile-initial{display:grid;place-items:center;background:var(--accent,#3b5998);color:var(--on-accent,#fff);font:40px var(--title-font,Georgia,serif)}
.profile-name{min-width:0}.profile-name .eyebrow{margin-bottom:2px}.profile-name h1{margin:0 0 2px;overflow-wrap:anywhere}.profile-meta{margin:0;color:var(--secondary,#5c6b68)}
.profile-actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}.profile-actions:empty{display:none}
.panel .profile-actions form{margin:0}.profile-actions button,.action-link{min-height:40px}
.action-link{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--field-border,#9eafb1);border-radius:3px;background:var(--surface,#fff);color:var(--link,#245570);font-weight:bold;cursor:pointer}.action-link:hover{text-decoration:none;background:var(--subtle,#eef2f1)}
.profile-menu>summary{list-style:none}.profile-menu>summary::-webkit-details-marker{display:none}.profile-menu[open]>summary{background:var(--selected,#d2dedb)}
.profile-menu-body{position:absolute;z-index:12;top:calc(100% + 6px);left:0;width:min(320px,100%);display:grid;gap:10px;padding:14px;background:var(--surface,#fff);color:var(--text,#1d2b2a);border:1px solid var(--border,#c9d3d0);border-radius:6px;box-shadow:var(--shadow,0 5px 20px #19384c33)}
.profile-menu-body label{display:flex;gap:8px;align-items:flex-start;font-weight:normal}.profile-menu-body input[type=checkbox]{margin-top:4px}.profile-menu-body button{justify-self:start}.profile-menu-body .text-button{padding:4px 0}.profile-menu-body .quiet{padding:0}
.profile-manage{margin-top:16px;padding-top:12px;border-top:1px solid var(--border,#c9d3d0)}.profile-manage>summary{width:max-content;max-width:100%;cursor:pointer;color:var(--link,#245570)}.panel .profile-manage .profile-form{margin-top:12px}.profile-manage .quiet{padding:0}
/* v1.2.4: the intro, the characters and the photo albums are cards of their own. */
.profile-characters .profile-list li{padding:8px 0}.profile-characters .profile-list li:last-child{border-bottom:0}.profile-characters .quiet-item,.profile-albums .quiet-item{color:var(--secondary,#5c6b68)}
/* v1.1.5: a character's thumbnail (its picture, or its initial) beside its name and details. */
.character-item{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;align-items:center}
.character-thumb{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:8px;background:var(--accent,#3b5998);color:var(--on-accent,#fff);font:22px var(--title-font,Georgia,serif);box-shadow:0 0 0 1px var(--border,#c9d3d0)}.character-thumb:hover{text-decoration:none}
.character-thumb img{display:block;width:100%;height:100%;object-fit:cover}.character-thumb~a{align-self:end}.character-thumb~span{align-self:start}
.album-links{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.album-links a{display:inline-block;padding:5px 12px;border:1px solid var(--border,#c9d3d0);border-radius:999px;background:var(--subtle,#f3f6f5)}.album-links a:hover{text-decoration:none;border-color:var(--accent,#3b5998)}
.biography.clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}.profile-intro [data-clamp]+.text-button{margin:-8px 0 12px;padding:2px 0}
.wall-title{margin:26px 0 12px;font:22px/1.25 var(--title-font,Georgia,serif);color:var(--heading,#173b51)}
@media(max-width:560px){.profile-photo{width:72px;height:72px}.profile-initial{font-size:30px}.profile-identity{gap:12px}.profile-name h1{font-size:22px}}
/* v1.1.3 messages: options behind ⋯ (hover, focus or a long press), and the wall post toolbar in the message box. */
/* v1.2.0: React, Reply and ⋯ float on the message's top edge, at its far side, on hover or keyboard focus. */
.chat-message{position:relative}
.message-actions{position:absolute;top:-15px;right:10px;z-index:2;display:flex;align-items:center;gap:2px;padding:2px;background:var(--surface,#fff);border:1px solid var(--border,#c9d3d0);border-radius:999px;box-shadow:0 2px 8px #19384c26;opacity:0;pointer-events:none;transition:opacity .12s}
.chat-message:hover .message-actions,.message-actions:focus-within,.message-actions:has([aria-expanded=true]),.message-actions:has(.message-menu[open]){opacity:1;pointer-events:auto}
.message-action,.message-menu>summary{display:grid;place-items:center;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--secondary,#5c6b68);cursor:pointer}
.message-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.message-action:hover,.message-action[aria-expanded=true],.message-menu>summary:hover,.message-menu[open]>summary{background:var(--subtle,#eef2f1);color:var(--text,#1d2b2a);text-decoration:none}
.message-menu{position:relative}
.message-menu>summary{list-style:none;font-size:20px;line-height:1}
.message-menu>summary::-webkit-details-marker{display:none}
/* v1.2.0: the message a reply answers, and the reactions under a message (tap one to add or take back yours). */
.reply-quote{display:block;max-width:100%;margin:0 0 8px;padding:5px 10px;border-left:3px solid var(--accent,#3b5998);border-radius:4px;background:var(--surface,#fff);color:var(--text,#1d2b2a);font-size:12px;line-height:1.4}
a.reply-quote[href]:hover{background:var(--page,#f4f6f5);text-decoration:none}
.reply-quote-name{display:block;font-weight:bold;color:var(--accent,#3b5998)}
.reply-quote-name::before{content:"↩ " / ""}
.reply-quote-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--secondary,#5c6b68)}
.chat-message:target{box-shadow:0 0 0 2px var(--accent,#3b5998)}
.message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0}
.reaction-chip,.reaction-chip:disabled{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:1px 9px;border:1px solid var(--border,#c9d3d0);border-radius:999px;background:var(--surface,#fff);color:var(--text,#1d2b2a);font-size:15px;line-height:1.2;cursor:pointer}
.reaction-chip:disabled{cursor:default}
.reaction-chip[aria-pressed=true]{border-color:var(--accent,#3b5998);background:var(--selected,#e7eef8)}
.reaction-chip-count{font-size:12px;font-weight:bold;color:var(--secondary,#5c6b68)}
/* The row of emoji: a bubble beside 😊 on a computer; on a touch screen a sheet with Reply and the options. */
.reaction-pop{position:fixed;top:0;left:0;z-index:40;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.reaction-pop[hidden]{display:none}
.reaction-pop-sheet{position:fixed}
.reaction-pop-bar{display:flex;align-items:center;gap:2px;width:max-content;max-width:calc(100vw - 16px);margin:0;padding:4px;background:var(--surface,#fff);border:1px solid var(--border,#c9d3d0);border-radius:999px;box-shadow:var(--shadow,0 5px 20px #19384c33)}
.reaction-pop-bar button{display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text,#1d2b2a);font-size:24px;line-height:1;cursor:pointer;transition:transform .1s}
.reaction-pop-bar button:hover,.reaction-pop-bar button:focus-visible{background:var(--subtle,#eef2f1);transform:scale(1.15)}
.reaction-pop-bar button[aria-pressed=true]{background:var(--selected,#e7eef8)}
.reaction-pop-bar .reaction-pop-more{font-size:20px;color:var(--secondary,#5c6b68)}
.reaction-pop-reply{color:var(--accent,#3b5998)!important}
.reaction-pop-reply svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reaction-pop:not(.as-sheet) .reaction-pop-reply,.reaction-pop:not(.as-sheet) .reaction-pop-options{display:none}
.reaction-pop.as-sheet{right:0;bottom:0;z-index:60;background:var(--backdrop,#14202acc)}
.reaction-pop.as-sheet .reaction-pop-sheet{top:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));left:12px;display:grid;gap:10px}
.reaction-pop.as-sheet .reaction-pop-bar{width:auto;max-width:none;justify-content:space-between;padding:6px;border-radius:14px}
.reaction-pop.as-sheet .reaction-pop-bar button{flex:1 1 0;width:auto;max-width:52px;height:46px;font-size:27px;border-radius:12px}
.reaction-pop.as-sheet .reaction-pop-reply{margin-left:4px;border-left:1px solid var(--border,#c9d3d0)!important;border-radius:0 12px 12px 0!important}
.reaction-pop-options{display:grid;padding:8px;background:var(--surface,#fff);color:var(--text,#1d2b2a);border:1px solid var(--border,#c9d3d0);border-radius:14px}
.reaction-pop-options:empty{display:none}
.reaction-pop-options button{display:block;width:100%;min-height:48px;padding:9px 12px;border:0;border-radius:6px;background:transparent;color:var(--text,#1d2b2a);font:inherit;font-size:16px;text-align:left}
.reaction-pop-options button:active{background:var(--subtle,#eef2f1)}
.reaction-pop-options .danger{color:var(--danger,#9b2c1f)}
.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border-bottom:1px solid var(--border,#c9d3d0);border-left:3px solid var(--accent,#3b5998);background:var(--subtle,#f3f6f5);font-size:12px;line-height:1.35}
.reply-bar[hidden]{display:none}
.composer-field .reply-bar{border-radius:7px 7px 0 0}
.reply-bar-text{flex:1;min-width:0}
.reply-bar-text strong,.reply-bar-text span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-bar-text span{color:var(--secondary,#5c6b68)}
.reply-cancel{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--secondary,#5c6b68);font-size:20px;line-height:1}
.reply-cancel:hover{background:var(--surface,#fff);text-decoration:none}
.message-menu-list{position:absolute;z-index:20;top:calc(100% + 4px);right:0;display:grid;min-width:190px;padding:6px;background:var(--surface,#fff);color:var(--text,#1d2b2a);border:1px solid var(--border,#c9d3d0);border-radius:8px;box-shadow:var(--shadow,0 5px 20px #19384c33)}
.message-menu-list form{margin:0}
.message-menu-list a,.message-menu-list button{display:block;width:100%;min-height:40px;padding:9px 12px;border:0;border-radius:6px;background:transparent;color:var(--text,#1d2b2a);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.message-menu-list a:hover,.message-menu-list button:hover,.message-menu-list a:focus-visible,.message-menu-list button:focus-visible{background:var(--subtle,#eef2f1);text-decoration:none}
.message-menu-list form button{color:var(--danger,#9b2c1f)}.message-menu-list [hidden]{display:none}
/* Touch screens have no hover: React, Reply and ⋯ stay out of sight (screen readers still reach them) and a long press opens a sheet. */
@media (hover:none){
 .chat-message.has-menu,.chat-message.has-actions{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 .message-actions{position:static;padding:0;border:0;background:none;box-shadow:none;opacity:1;pointer-events:auto}
 .message-action,.message-menu>summary{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .message-menu[open]::before{content:"";position:fixed;inset:0;z-index:60;background:var(--backdrop,#14202acc)}
 .message-menu-list{position:fixed;z-index:61;top:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;min-width:0;padding:8px;border-radius:14px}
 .message-menu-list a,.message-menu-list button{min-height:48px;font-size:16px}
}
.composer-tools:has(.composer-file:disabled) .image-control{opacity:.45;cursor:not-allowed}
/* v1.1.3 main menu: buttons rather than text links, with Home as a house. */
/* v1.2.2: the house is the user's round Home badge in the theme's colours: the circle in the button colour, lighter on
   its left, and the castle-cottage cut from their picture (img/home-button.png) as a mask in the button's text colour. */
.home-icon{position:relative;display:block;flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent,#3b5998) 70%,#fff),var(--accent,#3b5998)) var(--accent,#3b5998)}
.home-icon::after{content:"";position:absolute;inset:0;background:var(--on-accent,#fff);-webkit-mask:url(../img/home-button.png) center/100% 100% no-repeat;mask:url(../img/home-button.png) center/100% 100% no-repeat}
.sidebar nav a[aria-current=page] .home-icon{background:var(--on-accent,#fff)}
.sidebar nav a[aria-current=page] .home-icon::after{background:var(--accent,#3b5998)}
/* In the header the circle is the header's text colour and the house the header's, so it shows in every theme. */
.messages-app .messages-home .home-icon{width:26px;height:26px;background:var(--on-header,#fff)}
.messages-app .messages-home .home-icon::after{background:var(--header,#3b5998)}
/* v1.2.2: the header's Groups, Notifications, Search and Messages are the user's round badges too (the ☰ menu drawn to
   match), coloured like the header's Home: the circle in the header's text colour and the drawing (a mask from their
   picture) in the header's. */
.badge-icon{position:relative;display:block;flex:none;width:30px;height:30px;border-radius:50%;background:var(--on-header,#fff)}
.badge-icon::after{content:"";position:absolute;inset:0;background:var(--header,#3b5998);-webkit-mask:var(--badge-mask) center/100% 100% no-repeat;mask:var(--badge-mask) center/100% 100% no-repeat}
.badge-search{--badge-mask:url(../img/search-button.png)}
.badge-notifications{--badge-mask:url(../img/notifications-button.png)}
.badge-messages{--badge-mask:url(../img/messages-button.png)}
.badge-groups{--badge-mask:url(../img/groups-button.png)}
.badge-menu{--badge-mask:url(../img/menu-button.svg)}
/* Unread counts sit on the button's top-right corner like Facebook's: a red pill with a white number (themes.css),
   ringed in the header's colour so it stands apart from the button's outline. */
.header-menu>summary,.header-messages{position:relative}
.header-menu>summary .chat-badge,.header-messages .chat-badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border:2px solid var(--header,#3b5998);border-radius:10px;font-size:11px;font-weight:bold;line-height:16px;text-align:center;box-sizing:border-box;pointer-events:none}
.sidebar nav{display:grid;gap:6px}
.sidebar nav a{display:flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid var(--border,#c9d3d0);border-radius:6px;background:var(--surface,#fff);color:var(--link,#245570);font-weight:bold;box-shadow:0 1px 1px #19384c14;transition:background .12s,border-color .12s}
.sidebar nav a:hover{text-decoration:none;background:var(--subtle,#eef2f1);border-color:var(--accent,#3b5998)}
.sidebar nav a[aria-current=page]{padding-left:12px;border-left-width:1px;background:var(--accent,#3b5998);border-color:var(--accent,#3b5998);color:var(--on-accent,#fff)}
.sidebar nav a .chat-badge{margin-left:auto}
.sidebar nav .home-link{justify-content:flex-start}
.inline-home{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border,#c9d3d0);border-radius:6px;background:var(--surface,#fff);color:var(--link,#245570);vertical-align:middle}
.inline-home:hover{background:var(--subtle,#eef2f1);border-color:var(--accent,#3b5998)}
.page-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.messages-app .messages-home{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px}
@media(max-width:560px){.sidebar nav{display:flex;flex-wrap:wrap;gap:6px}.sidebar nav a{min-height:38px;padding:6px 10px;font-size:13px}.sidebar nav .home-link{padding:6px 10px}}
/* v1.2.2: on a computer the menu's Home button says Home beside the house (a phone keeps the house alone, in the header). */
@media(min-width:561px){.sidebar nav .home-link{gap:8px}.sidebar nav .home-link .icon-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none}}
@media(max-width:760px){.archive-theme .sidebar nav{gap:6px}}
.comment-photos{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;max-width:460px;margin:6px 0 8px}.comment-photos img{height:130px;object-fit:cover;border-radius:8px}
/* v1.1.4: on phones, Home is the first button in the header's icon row, then Coin, then the menus. */
.header-home{display:none}
@media(max-width:560px){
 .header-actions .header-home{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--header-border,#92a8b6);border-radius:4px;color:var(--on-header,#fff)}
 .header-actions .header-home .home-icon{width:30px;height:30px;background:var(--on-header,#fff)}
 .header-actions .header-home .home-icon::after{background:var(--header,#3b5998)}
 .header-actions .header-home:hover{text-decoration:none;background:#ffffff1f}
 /* v1.2.2: on Home it keeps the colours of the icons beside it (it was a white button with the badge's colours
    swapped, which looked inverted); a light wash and a brighter outline show the page you are on, as for Groups. */
 .header-actions .header-home[aria-current=page]{background:#ffffff2e;border-color:var(--on-header,#fff)}
 .sidebar nav .home-link{display:none}
 /* v1.2.2: phones have no side menu: Home is in the header, Groups beside the bell, Profile in the picture menu, and the
    rest behind the header's ☰ button. */
 .sidebar{display:none}
}
/* v1.2.2 header: [picture] Kingdom Connect … [Coin] [Groups] [bell] [Search] [Messages]. Where it takes two lines (760px
   and narrower) the first is the picture, the name and Search + Messages in the top-right corner; the second Home
   (phones), Coin, Groups, the bell and (phones) the ☰ menu. Search and Messages are a little smaller than the bell. */
.header-corner{display:flex;align-items:center;gap:6px;flex:none}
.header-corner .header-menu>summary{min-width:38px;min-height:38px}
.header-corner .header-link{min-width:38px;min-height:38px}
.header-corner .badge-icon{width:26px;height:26px}
@media(max-width:760px){
 .header-inner .brand{flex:1 1 0;min-width:0}
 .header-corner{order:3}
 .header-actions{order:4;flex:1 1 100%}
}
/* Groups is a plain link (no count), drawn like the header's Home; on its pages a light wash and a brighter outline. */
.header-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--header-border,#92a8b6);border-radius:4px;color:var(--on-header,#fff)}
.header-link:hover{text-decoration:none;background:#ffffff1f}
.header-link[aria-current=page]{background:#ffffff2e;border-color:var(--on-header,#fff)}
@media(max-width:700px){.header-link{min-width:40px}}
/* Coin is the user's gold coin, in full colour in every theme (cut from their picture with a clear background); it
   opens the balance and a link to the wallet. v1.2.4: on a phone it sits directly left of Groups (Home alone keeps
   the left edge), so its menu opens under it like the others'. */
.coin-icon{display:block;width:36px;height:36px;border-radius:50%}
.coin-total{margin:0 0 4px;font-size:24px;font-weight:bold;font-variant-numeric:tabular-nums}
/* The member's picture: a circle ringed in the header's text colour, their first letter until they have one. */
.account-menu>summary{min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%}
.account-avatar{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--on-header,#fff);border-radius:50%;object-fit:cover;background:var(--accent,#3b5998);color:var(--on-accent,#fff);font:bold 18px/1 Georgia,serif}
.account-menu>summary:hover .account-avatar,.account-menu[open] .account-avatar{box-shadow:0 0 0 3px #ffffff59}
@media(min-width:561px){.account-dropdown{left:0;right:auto}}
.account-name{display:grid;margin:0 0 4px;padding-bottom:10px;border-bottom:1px solid var(--border,#d8dfea)}
.account-name span{font-size:12px;color:var(--secondary,#6b7280)}
/* Settings folds open inside the picture menu. */
.settings-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:10px 0;color:var(--link,#245570)}
.settings-menu>summary::-webkit-details-marker{display:none}
.settings-menu>summary::after{content:"▸";transition:transform .15s}
.settings-menu[open]>summary::after{transform:rotate(90deg)}
.settings-links{margin:0 0 6px 2px;padding-left:14px;border-left:2px solid var(--border,#d8dfea)}
.settings-links a{display:block;padding:8px 0}
/* Phones: the ☰ button opens the menu's pages. v1.2.4: in a box that pops down under it like the other menus' (it was
   a panel sliding in from the right). */
.nav-menu{display:none}
@media(max-width:560px){.nav-menu{display:block}}
.nav-dropdown{display:flex;flex-direction:column;gap:8px}
/* v1.4.3: never a second column. A phone's nav wraps (kc.css), so with Apps open More's last item (Visit Vaeleen)
   wrapped beside the others once the list was taller than the menu; now the menu scrolls, and nothing in it is squeezed. */
.nav-dropdown{flex-wrap:nowrap}.nav-dropdown>*{flex:none}
.nav-dropdown h2{margin:0 0 4px}
.header-dropdown.nav-dropdown>a{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 14px;border:1px solid var(--border,#d8dfea);border-radius:8px;background:var(--surface,#fff);color:var(--link,#245570);font-weight:bold}
.nav-dropdown a:hover{text-decoration:none;background:var(--subtle,#eef2f1)}
.header-dropdown.nav-dropdown>a[aria-current=page]{background:var(--accent,#3b5998);border-color:var(--accent,#3b5998);color:var(--on-accent,#fff)}
.nav-dropdown a .chat-badge{margin-left:auto}
/* v1.1.4: the news feed filter is switches that save as they are flipped (the notification settings' .push-switch). */
.feed-preferences h2{margin-top:0}
.feed-preferences fieldset{border:0;margin:0 0 6px;padding:0;min-width:0}
.feed-preferences legend{padding:0;margin-bottom:2px;font-weight:bold}
.feed-preferences .feed-following{margin-top:4px;border-top-width:2px}
.feed-preferences .push-saved{margin:12px 0 0}
.feed-preferences .form-actions{justify-content:flex-end;margin-top:14px}
/* v1.1.4: GIFs linked in posts, comments and messages, and the composer's preview of them (gifs.js). */
.linked-gifs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.linked-gif{display:block;max-width:100%;max-height:360px;width:auto;height:auto;border-radius:8px;background:var(--subtle,#eef2f1)}
.chat-message .linked-gif{max-height:240px}
.wall-comment .linked-gifs{margin-top:4px}
.linked-gif-fallback{overflow-wrap:anywhere}
.composer-gifs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:8px;border-top:1px solid var(--line,#c9d3d0)}
.composer-gifs[hidden]{display:none}
.composer-gifs img{display:block;max-height:110px;max-width:160px;border-radius:6px}
.composer-gifs p{flex-basis:100%;margin:0;font-size:12px}
/* v1.1.4: SysOp two-step sign-in setup. */
.mfa-steps{padding-left:22px}.mfa-steps li{margin:8px 0}
.mfa-qr{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:12px 0}
.mfa-qr img{display:block;max-width:100%;height:auto;padding:6px;background:#fff;border:1px solid var(--line,#c9d3d0);border-radius:6px;image-rendering:pixelated}
.mfa-key{display:inline-block;margin-top:4px;font:600 16px/1.5 Consolas,"Courier New",monospace;letter-spacing:.06em;overflow-wrap:anywhere}
.mfa-restart{margin:10px 0}
/* v1.1.4: a feature request has no message box (chat.js still reads the hidden form). */
.chat-compose[hidden]{display:none}
.feature-request-form select{max-width:100%}
/* v1.1.4: search as you type (live-search.js). The box no longer clips, so the list can hang below it. */
.global-search{position:relative;overflow:visible}
.global-search input{border-radius:inherit}
/* v1.2.0: the search box opens from the header's magnifier; its suggestions list grows the dropdown, unclipped. */
.header-menu>summary svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.search-dropdown{width:min(440px,calc(100vw - 24px));padding:12px}
.header-dropdown.search-dropdown form.global-search{flex-wrap:wrap;width:100%;max-width:none;margin:0;border:0;border-radius:0;background:transparent}
.search-dropdown .global-search input{flex:1 1 0;height:44px;border:1px solid var(--border,#a6babf);border-right:0;border-radius:22px 0 0 22px;background:var(--surface,#fff);color:var(--text,#1d2b2a)}
.search-dropdown .global-search button{height:44px;border:1px solid var(--border,#a6babf);border-left:0;border-radius:0 22px 22px 0;background:var(--surface,#fff)}
.search-dropdown .live-search{position:static;flex:0 0 100%;width:auto;max-height:none;margin-top:8px;padding:0;border:0;border-radius:0;box-shadow:none}
.live-search{position:absolute;left:0;top:calc(100% + 6px);z-index:40;width:max(100%,min(400px,calc(100vw - 24px)));max-height:min(70vh,540px);overflow:auto;padding:6px 0;background:var(--surface,#fff);color:var(--text,#1d2b2a);border:1px solid var(--border,#c9d3d0);border-radius:8px;box-shadow:0 8px 24px #19384c40;text-align:left}
.live-search[hidden]{display:none}
.live-search-group+.live-search-group{border-top:1px solid var(--border,#c9d3d0);margin-top:4px;padding-top:4px}
.live-search-type{padding:6px 14px 2px;font-size:11px;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6766)}
.live-search-option{display:flex;flex-direction:column;gap:1px;padding:8px 14px;color:var(--text,#1d2b2a);text-decoration:none;overflow-wrap:anywhere}
.live-search-option strong{font-size:14px;color:var(--link,#245570)}
.live-search-option span{font-size:12px;color:var(--muted,#5b6766)}
.live-search-option:hover,.live-search-option[aria-selected=true]{background:var(--subtle,#eef2f1);text-decoration:none}
.live-search-option[aria-selected=true]{outline:2px solid var(--focus,#a57b21);outline-offset:-2px}
.live-search-all{border-top:1px solid var(--border,#c9d3d0);margin-top:4px}
.live-search-all strong{font-weight:normal;text-decoration:underline}
.live-search-none{margin:0;padding:10px 14px;color:var(--muted,#5b6766)}
/* v1.1.4: royal events (made by the GM, AGMs or SysOp) are bold; members' events are plain. */
.calendar a.royal-event,h1.royal-event,h2.royal-event,h2.royal-event a{font-weight:bold}
.calendar a.member-event,h1.member-event,h2.member-event,h2.member-event a{font-weight:normal}
.royal-legend{margin-top:4px}
/* v1.3.3: phones show the month too (it was hidden there, leaving only the list under it): a compact grid, each event a
   chip of up to two lines cut short with … (its whole name is in the list below, and read out in full by screen readers). */
@media(max-width:560px){
 .calendar-panel{padding:12px 8px}
 .calendar{font-size:11px}
 .calendar th{padding:4px 0;font-size:10px;letter-spacing:.5px;text-transform:uppercase}
 .calendar td{height:56px;padding:2px}
 .calendar-day{display:block;padding:1px 2px}
 .calendar a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin:2px 0;padding:2px 3px;border-radius:3px;background:var(--selected,#d8dfea);font-size:10px;line-height:1.25;-webkit-hyphens:auto;hyphens:auto}
 .calendar a:hover{text-decoration:none}
}
/* v1.1.4: event form: checkboxes beside their words, and the location box with Google Maps (places.js). */
.check-field label{display:flex;align-items:center;gap:10px;min-height:40px;font-weight:bold;cursor:pointer}
.check-field input[type=checkbox]{width:22px;height:22px;flex:none;margin:0}
.check-field .quiet{margin:2px 0 0}
.place-field{position:relative}
.place-suggestions{position:absolute;left:0;right:0;z-index:30;margin-top:4px;padding:4px 0;background:var(--surface,#fff);color:var(--text,#1d2b2a);border:1px solid var(--border,#c9d3d0);border-radius:8px;box-shadow:0 8px 24px #19384c40}
.place-suggestions[hidden]{display:none}
.place-option{display:flex;flex-direction:column;gap:1px;padding:9px 14px;cursor:pointer;overflow-wrap:anywhere}
.place-option strong{font-size:14px}.place-option span{font-size:12px;color:var(--muted,#5b6766)}
.place-option:hover,.place-option[aria-selected=true]{background:var(--subtle,#eef2f1)}
.place-option[aria-selected=true]{outline:2px solid var(--focus,#a57b21);outline-offset:-2px}
.place-credit{margin:4px 0 0;padding:6px 14px 2px;border-top:1px solid var(--border,#c9d3d0);font-size:11px;color:var(--muted,#5b6766)}
.place-map{margin-top:8px;border:1px solid var(--border,#c9d3d0);border-radius:8px;overflow:hidden;aspect-ratio:16/9;max-height:320px;background:var(--subtle,#eef2f1)}
.place-map[hidden]{display:none}
.place-map iframe{display:block;width:100%;height:100%;border:0}
.place-status:empty{display:none}
.request-note{margin:12px 0;padding:10px 14px;border:1px solid var(--border,#c9d3d0);border-radius:6px;background:var(--subtle,#eef2f1);color:var(--text,#1d2b2a)}
/* v1.1.5 switches everywhere (switch.html, switches.js), drawn like Settings → Notifications'. Inside forms they keep that
   layout; compact ones sit inline beside other controls, with their Saving…/Saved. note after them. */
label.push-switch{display:flex;margin:0;font-weight:normal}
.profile-form label.push-switch,.check-field label.push-switch{margin-bottom:0}
label.push-switch.compact-switch{display:inline-flex;justify-content:flex-start;gap:10px;padding:4px 0;border-top:0;min-height:32px}
.compact-switch .push-switch-text strong{font-weight:normal}
.compact-switch .push-switch-track{width:40px;height:22px;border-radius:11px}.compact-switch .push-switch-track::before{width:16px;height:16px}.compact-switch input:checked+.push-switch-track::before{transform:translateX(18px)}
.switch-status:empty{display:none}.compact-switch+.switch-status{font-size:12px}
.profile-menu-body label.push-switch{border-top:0;padding:0}.switch-list{margin:0 0 4px}.switch-list>.push-switch:first-child{border-top:0}
/* v1.1.5 members-only group posts: who can read a group post, beside its time. */
.post-audience{white-space:nowrap}.post-audience svg{width:13px;height:13px;margin:0 3px -2px 0;fill:currentColor}
/* v1.1.5 attendance roster: each player's Attended and Level Up switches, with their Saved note underneath. */
.attendance-switch{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:44px}
/* v1.1.5 GIF search (composer.js): a GIF button beside the emoji, and GIPHY's results in the same picker. */
.composer-gif span{display:inline-block;padding:2px 4px;border:1.5px solid currentColor;border-radius:4px;font:bold 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.5px}
.media-picker-results.gif-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.gif-grid button{display:block;min-height:72px;background:var(--subtle,#eef2f1)}.gif-grid img{display:block;width:100%;height:auto;min-height:72px;object-fit:cover}
.media-picker-more{display:block;margin:0 auto 8px}
.giphy-attribution{margin:6px 0 0;text-align:right;font:bold 11px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.5px;color:var(--secondary,#5c6b68)}
/* v1.2.3: the header's Messages button opens Messages over the page (page-overlays.js) and folds it away again; while
   it is open the button has the light wash of a current page. On a phone Messages takes the whole screen under the
   header's first line (the picture, Kingdom Connect, Search and Messages): the row of buttons under it is put away and
   the page behind doesn't scroll. On a computer it is a large panel under the button, with the page around it.
   v1.2.4: the Groups button opens Groups the same way. On a phone it takes the screen under the whole header, whose
   second line holds the Groups button that folds it away. --overlay-top (the header's bottom), --overlay-height (the
   window below it) and --overlay-right (the button's right edge) are measured by the script; until it runs, a phone
   header's height. Under the header's own menus. */
.header-link[aria-expanded=true]{background:#ffffff2e;border-color:var(--on-header,#fff)}
.page-overlay{position:fixed;z-index:29;top:var(--overlay-top,62px);right:0;bottom:0;left:0;height:var(--overlay-height,auto);background:var(--surface,#fff)}
.page-overlay[hidden]{display:none}
.page-overlay iframe{display:block;width:100%;height:100%;border:0;background:var(--surface,#fff)}
@media(max-width:640px){
 .messages-open .header-actions{display:none}
 /* The window's scrolling, not the body's: a body that clips scrolls itself, and the sticky header would leave with
    the page. */
 html.messages-open,html.groups-open{overflow:hidden}
}
@media(min-width:641px){
 .page-overlay{top:calc(var(--overlay-top,70px) + 8px);right:var(--overlay-right,12px);bottom:auto;left:auto;width:min(920px,calc(100vw - 24px));height:min(720px,calc(var(--overlay-height,100vh) - 24px));border:1px solid var(--border,#c9d3d0);border-radius:10px;overflow:hidden;box-shadow:0 12px 40px #19384c59}
}
/* v1.2.4: a page of Groups in its frame: no header, menus or footer, so the page is the whole frame. */
.groups-frame .layout{display:block;max-width:none;min-height:0;margin:0;padding:16px}
@media(max-width:560px){.groups-frame .layout{padding:12px}}
/* v1.4.7: ← Back to home (← Back over other pages) above the word Groups, in Groups over the page on a phone only
   (groups.html), as above the word Messages (messages.css): it folds Groups away. A computer's panel folds on a click
   outside. */
.groups-close{display:none}
@media(max-width:640px){.groups-close{display:flex;align-items:center;width:max-content;min-height:44px;margin:-8px 0 2px}}
/* v1.2.4: Change profile picture: upload one or choose one of your album photos (a grid of square thumbnails; the chosen
   one is outlined in the theme's colour); Apply asks in a small window (profile-picture.js) whether it is permanent
   or for 24 hours. Album photos are described under each photo, and an album under its title (album-descriptions.js). */
.picture-choices{margin:0;padding:0;border:0;min-width:0}.picture-choices legend{padding:0;margin-bottom:6px;font-weight:bold}
.picture-choices h3{margin:12px 0 6px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--secondary,#5c6b68)}
.picture-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.profile-form .picture-choice{position:relative;display:block;margin:0;cursor:pointer}
.picture-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.picture-choice img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:3px solid transparent;border-radius:8px;background:var(--subtle,#eef2f1)}
.picture-choice input:checked+img{border-color:var(--accent,#3b5998);box-shadow:inset 0 0 0 2px var(--surface,#fff)}
.picture-choice input:focus-visible+img{outline:3px solid #a57b21;outline-offset:2px}
.picture-duration{margin:0;padding:0;border:0;min-width:0}.picture-duration legend{padding:0;margin-bottom:6px;font-weight:bold}
.profile-form .picture-duration-choice{display:flex;align-items:center;gap:10px;min-height:40px;margin:0;font-weight:normal}.picture-duration-choice input{width:20px;height:20px;margin:0}
.picture-duration .quiet{margin:4px 0 0}
.kc-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:18px;border:1px solid var(--border,#c9d3d0);border-radius:10px;background:var(--surface,#fff);color:var(--text,#1d2b2a);box-shadow:0 10px 40px #0005}
.kc-dialog::backdrop{background:#19384c99}
.kc-dialog h2{margin:0;font-size:18px}
.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:14px}
.picture-dialog-preview{display:block;width:120px;height:120px;margin:0 auto 14px;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px var(--border,#c9d3d0)}
.describe-photo{display:block;max-width:100%;max-height:180px;margin:0 auto;object-fit:contain;border-radius:6px}
.describe-dialog .profile-form{gap:12px}.describe-dialog .character-count{margin:-8px 0 0}
.description-text{margin:6px 0 2px;white-space:pre-wrap;overflow-wrap:anywhere}.description-text[hidden]{display:none}
.describe-link{font-size:13px}
.photo-description{margin-top:8px}.album-description{margin-top:6px}
/* v1.2.4: the Market's heading carries My listings and the + (Create listing) in its top-right corner. Your own wallet
   is three tabs (wallet-tabs.js): Wallet, Group Wallets and Physical Coin Exchange, sharing the width on a phone. */
.back-link{margin:0 0 12px}
.market-heading{display:flex;align-items:flex-start;gap:12px}.market-heading-text{flex:1;min-width:0}
/* v1.3.1: the word List to the left of the +, both one link, with My listings under them; an ⓘ beside the title opens
   the Market's description in a bubble that grows out of it; the search and filters fold away under one bar. */
.market-heading-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.market-create{display:inline-flex;align-items:center;gap:8px;color:var(--link,#3b5998);font-size:17px;font-weight:bold}
.market-create-plus{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent,#3b5998);color:var(--on-accent,#fff);font:300 32px/1 Arial,Helvetica,sans-serif;box-shadow:var(--shadow,0 2px 6px #0003)}
.market-create:hover{text-decoration:none}.market-create:hover .market-create-word{text-decoration:underline}.market-create:hover .market-create-plus{filter:brightness(1.08)}
.market-title{position:relative;display:flex;align-items:center;gap:4px;margin:0 0 10px}.market-title h1{margin:0}
.market-info>summary{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--link,#3b5998);cursor:pointer;list-style:none}
.market-info>summary::-webkit-details-marker{display:none}
.market-info>summary:hover,.market-info[open]>summary{background:var(--subtle,#f7f7f7)}
.market-info>summary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.market-info-text{position:absolute;left:0;top:calc(100% + 6px);z-index:15;box-sizing:border-box;width:min(380px,calc(100vw - 32px));margin:0;padding:14px 16px;background:var(--surface,#fff);color:var(--text,#333);border:1px solid var(--border,#d8dfea);border-radius:10px;box-shadow:var(--shadow,0 3px 16px #18294018);line-height:1.5}
.market-info[open]>.market-info-text{transform-origin:var(--pop-origin,top left);animation:kc-pop .52s cubic-bezier(.2,.9,.3,1.08) both}
.market-filters{margin:0 0 18px}.market-filters>.commerce-filter{margin:8px 0 0}
.market-filters>summary{display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;padding:0 14px;border:1px solid var(--border,#d8dfea);border-radius:6px;background:var(--surface,#fff);color:var(--link,#3b5998);font-weight:bold;cursor:pointer;list-style:none}
.market-filters>summary::-webkit-details-marker{display:none}
.market-filters>summary:hover{background:var(--subtle,#f7f7f7)}
.market-filters>summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.market-filters>summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.market-filters[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){.market-info[open]>.market-info-text{animation:kc-fade .3s ease-out both}.market-filters>summary::after{transition:none}}
.wallet-tabs{display:flex;gap:4px;margin:12px 0 16px;border-bottom:1px solid var(--border,#c9d3d0)}
.wallet-tabs a{flex:0 1 auto;display:flex;align-items:center;justify-content:center;min-height:44px;margin-bottom:-1px;padding:8px 16px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;color:var(--link,#245570);font-weight:bold;text-align:center}
.wallet-tabs a:hover{text-decoration:none;background:var(--subtle,#eef2f1)}
.wallet-tabs a[aria-selected=true]{background:var(--surface,#fff);border-color:var(--border,#c9d3d0);color:var(--text,#1d2b2a);box-shadow:inset 0 3px 0 var(--accent,#3b5998)}
.wallet-panel[hidden]{display:none}
.wallet-panel .profile-list li{padding:8px 0}.wallet-panel .profile-list li:last-child{border-bottom:0}.wallet-panel .quiet-item{color:var(--secondary,#5c6b68)}
@media(max-width:560px){.wallet-tabs a{flex:1 1 0;padding:6px 8px;font-size:13px}}
/* v1.2.4: the header's buttons are circles around their badges, a few pixels from them, in the outline colours the
   boxes had (the picture stays as it was). 44px circles in the row with 36px badges; 38px in the top-right corner with
   30px badges. Unread counts sit on the circle's corner. On a phone, Home alone keeps the left edge. */
.header-menu:not(.account-menu)>summary,.header-link,.header-actions .header-home{box-sizing:border-box;width:44px;height:44px;min-width:0;min-height:0;padding:0;border-radius:50%}
.header-corner .header-menu>summary,.header-corner .header-link{width:38px;height:38px}
.header-actions .badge-icon,.header-actions .header-home .home-icon{width:36px;height:36px}
.header-corner .badge-icon{width:30px;height:30px}
.header-menu:not(.account-menu)>summary:hover{background:#ffffff1f}
.header-menu>summary .chat-badge,.header-messages .chat-badge{top:-5px;right:-5px}
@media(max-width:560px){.header-actions .header-home{margin-right:auto}}
/* v1.3.1 phone header, after the user's mock-up: a fine line parts its two lines, and the second line's buttons (Home,
   Coin, Groups, Notifications and More) share its width evenly, each with its name under it. Tapping the name opens
   it too. The Messages page's own one-line header keeps its icons alone. */
@media(max-width:560px){
 body:not(.messages-app) .header-actions{justify-content:space-around;gap:0;padding:10px 0 20px;border-top:1px solid var(--header-border,#6d84b4)}
 body:not(.messages-app) .header-actions .header-home{margin-right:0}
 body:not(.messages-app) .header-actions>:is(.header-home,.header-link){position:relative}
 body:not(.messages-app) .header-actions>:is(.header-home,.header-link)>.icon-label,body:not(.messages-app) .header-actions>.header-menu>summary>.icon-label{top:calc(100% + 5px);left:50%;width:auto;height:auto;overflow:visible;clip-path:none;transform:translateX(-50%);color:var(--on-header,#fff);font-size:12px;line-height:1.2;white-space:nowrap}
}
/* v1.3.3, after the user's sketch: on a phone, while a button in that row has its menu open (or Groups is open over
   the page), its name gives way and the button glows (themes.css), as every open header button does. (A stem joining
   the button to its box was tried and removed: the user found it awkward.) */
@media(max-width:560px){
 body:not(.messages-app) .header-actions>.header-menu[open]>summary>.icon-label,body:not(.messages-app) .header-actions>.header-link[aria-expanded=true]>.icon-label{visibility:hidden}
}
/* v1.2.4: the search box and its button are one field (.search-field) with one focus ring round both; the box's own
   ring was cut off where the button sat over it. */
.search-field{display:flex;flex:1 1 100%;min-width:0;border-radius:22px}
@supports selector(:has(a)){
 .search-field input:focus-visible{outline:none}
 .search-field:has(input:focus-visible){outline:3px solid var(--focus,#a57b21);outline-offset:3px}
}
/* v1.2.4: a header menu, and Messages or Groups over the page, grows out of its button like a bubble: from the
   middle of the button (--pop-origin, measured as it opens by social.js) to its full size. v1.3.3: twice as slowly
   (.52s, was .26s; the fade .3s, was .15s), and the Market's ⓘ bubble with them. */
@keyframes kc-pop{from{opacity:0;transform:scale(.06)}60%{opacity:1}to{opacity:1;transform:none}}
.header-menu[open]>.header-dropdown,.page-overlay:not([hidden]){transform-origin:var(--pop-origin,top right);animation:kc-pop .52s cubic-bezier(.2,.9,.3,1.08) both}
/* With the device's reduce-motion setting on (Windows' Animation effects off, Android's Remove animations), a short fade. */
@keyframes kc-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.header-menu[open]>.header-dropdown,.page-overlay:not([hidden]){animation:kc-fade .3s ease-out both}}
/* v1.2.4: the side menu's name and role stand alone, without the picture beside them. */
.member{grid-template-columns:1fr}.member span{grid-column:1}
/* v1.3.0 PayPal: Pay with PayPal and Link PayPal are PayPal's gold button in every theme (as Google's button keeps its
   own colours); test mode is marked plainly; the USD ledger shows money in and out at a glance. */
.paypal-button{background:#ffc439;color:#111;border:1px solid #e0a800;border-radius:22px;padding:10px 22px;font-weight:bold;min-height:44px;cursor:pointer}
.paypal-button:hover{background:#f2b52e}
.paypal-button:focus-visible{outline:3px solid var(--focus,#a57b21);outline-offset:3px}
.paypal-offer{margin:12px 0}
.paypal-test{display:inline-block;margin:6px 0;padding:4px 10px;border-radius:6px;background:#fff4d6;color:#5a4300;border:1px dashed #c9a43a;font-size:13px}
.paypal-account{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:12px 0}
.paypal-account dt{font-weight:bold}.paypal-account dd{margin:0;overflow-wrap:anywhere}
.usd-totals{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.usd-totals>div{flex:1 1 120px;padding:10px 12px;border:1px solid var(--border,#c9d3d0);border-radius:8px}
.usd-totals dt{font-size:12px;color:var(--secondary,#5c6b68)}.usd-totals dd{margin:4px 0 0;font-size:20px;font-weight:bold}
.usd-in{color:var(--green,#1e6b3a)}
.usd-status{padding:10px 12px;border-radius:8px;border:1px solid var(--border,#c9d3d0)}
.usd-status-completed{border-color:#a8c4ad;background:#eef7ee;color:#254b3e}
.usd-status-failed,.usd-status-cancelled{background:#fff0df;color:#78372e;border-color:#dac6aa}
.demo-paypal form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* v1.3.0 Settings → PayPal: the member's own PayPal email, typed twice, with "This is my own PayPal account". */
.paypal-email-form{max-width:460px}
.paypal-email-form input[type=email]{width:100%}
.paypal-own{display:flex;gap:8px;align-items:flex-start;font-weight:normal}
.paypal-own input{margin-top:4px;flex:0 0 auto}
.paypal-change{margin:12px 0}.paypal-change>summary{cursor:pointer;color:var(--link,#245570);font-weight:bold;padding:6px 0}
/* v1.3.0: a payment waiting for its seller's answer, on the listing and in the wallet's USD Ledger tab. */
.paypal-waiting{padding:8px 12px;border-left:3px solid #ffc439;background:#fffaf0;color:#3d3300}
a.paypal-button{display:inline-flex;align-items:center;text-decoration:none}
/* v1.4.0: the dice roller (dice_roller.html, dice.js). It fills the whole window over everything (a modal dialog, in
   the top layer), growing out of the button that opened it as the header's menus do; the table is a canvas under its
   controls, which float over it in the theme's colours. */
html.dice-open{overflow:hidden}
.dice-roller{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--dice-table,var(--page));color:var(--text);overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.dice-roller::backdrop{background:var(--page)}
.dice-roller[open]{transform-origin:var(--pop-origin,center);animation:kc-pop .52s cubic-bezier(.2,.9,.3,1.08) both}
@media(prefers-reduced-motion:reduce){.dice-roller[open]{animation:kc-fade .3s ease-out both}}
.dice-stage{position:absolute;inset:0;touch-action:none;cursor:grab}
.dice-stage:active{cursor:grabbing}
.dice-canvas{display:block;width:100%;height:100%}
:root[data-theme="pixel"] .dice-canvas{image-rendering:pixelated}
.dice-flat .dice-canvas{visibility:hidden}
.dice-hint{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 66px);transform:translateX(-50%);width:max-content;max-width:min(420px,calc(100% - 32px));margin:0;padding:8px 14px;border-radius:14px;background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--text);font-size:14px;line-height:1.4;text-align:center;box-shadow:0 2px 12px #0003;pointer-events:none}
.dice-hint[hidden]{display:none}
.dice-values{position:absolute;inset:0;pointer-events:none}
.dice-value{position:absolute;transform:translate(-50%,-100%);min-width:28px;box-sizing:border-box;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--heading);font:bold 15px/1.3 var(--title-font);text-align:center;box-shadow:0 2px 8px #0004;animation:kc-fade .3s ease-out both}
.dice-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;pointer-events:none}
.dice-top>*{pointer-events:auto}
:is(.dice-roller,.life-counter) .dice-icon-button{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);background:color-mix(in srgb,var(--surface) 84%,transparent);color:var(--text);box-shadow:0 2px 10px #0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;text-decoration:none}
.dice-icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dice-roller .dice-icon-button[aria-expanded=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.dice-sound[aria-pressed=true] .dice-sound-off,.dice-sound[aria-pressed=false] .dice-sound-on{display:none}
.dice-result{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;pointer-events:none}
.dice-result:empty{visibility:hidden}
.dice-total{min-width:1.4em;padding:6px 18px 4px;border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--heading);font:bold 40px/1 var(--title-font);box-shadow:0 2px 12px #0003}
.dice-what{max-width:100%;box-sizing:border-box;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--surface) 84%,transparent);color:var(--text);font-size:13px;line-height:1.35;box-shadow:0 2px 10px #0002}
.dice-result.dice-note{justify-content:center;align-self:center;flex:none;width:max-content;max-width:calc(100% - 160px);padding:8px 14px;border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--text);font-size:14px;font-weight:bold;box-shadow:0 2px 10px #0003}
.dice-stale{opacity:.55}
.dice-rolling .dice-what{font-style:italic}
.dice-history{position:absolute;z-index:1;top:calc(env(safe-area-inset-top,0px) + 62px);left:12px;width:min(340px,calc(100% - 24px));max-height:min(60%,440px);box-sizing:border-box;overflow:auto;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);-webkit-user-select:text;user-select:text;transform-origin:22px -18px;animation:kc-pop .52s cubic-bezier(.2,.9,.3,1.08) both}
@media(prefers-reduced-motion:reduce){.dice-history{animation:kc-fade .3s ease-out both}}
.dice-history[hidden]{display:none}
.dice-history h2{margin:0 0 8px;font-size:16px}
.dice-history ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.dice-history li{display:flex;align-items:baseline;gap:10px;font-size:14px}
.dice-history li strong{min-width:2.4ch;color:var(--heading);font:bold 20px/1 var(--title-font)}
.dice-quiet{color:var(--secondary);font-size:13px}
.dice-history .dice-quiet{margin:0}
.dice-controls{position:absolute;left:0;right:0;bottom:0;display:grid;gap:8px;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 -4px 18px #0002;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media(min-width:700px){.dice-controls{left:50%;right:auto;bottom:16px;width:min(700px,calc(100% - 32px));box-sizing:border-box;transform:translateX(-50%);padding:12px 14px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:18px}}
.dice-picker{display:flex;justify-content:space-between;gap:5px}
.dice-choice{flex:1 1 0;min-width:0;max-width:78px;display:grid;gap:4px}
.dice-roller .dice-add{position:relative;width:100%;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 0 3px;border:1px solid var(--border);border-radius:12px;background:var(--subtle);color:var(--text);font-weight:bold;font-size:12px;line-height:1;font-family:inherit;text-decoration:none;cursor:pointer}
.dice-add svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.dice-roller .dice-add[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dice-count{position:absolute;top:-7px;right:-5px;min-width:20px;height:20px;box-sizing:border-box;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:12px;line-height:20px}
.dice-count[hidden]{display:none}
.dice-roller .dice-remove{width:100%;height:28px;padding:0;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:bold;font-size:18px;line-height:1;font-family:inherit;text-decoration:none;cursor:pointer}
.dice-remove[hidden]{display:block;visibility:hidden}
.dice-picker:not(:has(.dice-remove:not([hidden]))) .dice-remove{display:none}
.dice-pool-row{display:flex;align-items:center;gap:8px}
.dice-pool{flex:1;min-width:0;margin:0;font-weight:bold;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.dice-pool.dice-quiet{font-weight:normal}
.dice-modifier{flex:none;display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--surface);overflow:hidden}
.dice-roller .dice-modifier button{width:38px;height:42px;padding:0;border:0;border-radius:0;background:transparent;color:var(--text);font-size:20px;line-height:1;font-family:inherit;text-decoration:none;cursor:pointer}
.dice-modifier output{min-width:3ch;text-align:center;font-weight:bold}
.dice-roller .dice-roll{flex:none;min-width:96px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--button-art,none) var(--accent);color:var(--on-accent);font:bold 18px/1 var(--title-font);text-decoration:none;box-shadow:0 3px 12px #0003;cursor:pointer}
.dice-roller .dice-roll:disabled{background:var(--subtle);color:var(--secondary);box-shadow:none;cursor:default}
@media(max-width:380px){.dice-roller .dice-add{height:52px}.dice-add svg{width:24px;height:24px}.dice-roller .dice-roll{min-width:80px;padding:0 16px}.dice-roller .dice-modifier button{width:32px}}
/* v1.4.1: Apps folds open in More and in a computer's side menu, as Settings does in the picture menu, with the
   Dice roller and the MTG life counter in a branch under it. */
.apps-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:bold;color:var(--link,#245570)}
.apps-menu>summary::-webkit-details-marker{display:none}
.apps-menu>summary::after{content:"▸";transition:transform .15s}
.apps-menu[open]>summary::after{transform:rotate(90deg)}
.apps-links{display:grid;gap:6px;margin:6px 0 0 12px;padding-left:12px;border-left:2px solid var(--border,#d8dfea)}
.nav-dropdown .apps-menu>summary{min-height:48px;box-sizing:border-box;padding:10px 14px;border:1px solid var(--border,#d8dfea);border-radius:8px;background:var(--surface,#fff)}
.nav-dropdown .apps-links>a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--border,#d8dfea);border-radius:8px;background:var(--surface,#fff);color:var(--link,#245570);font-weight:bold}
.nav-dropdown .apps-links>a[aria-current=page]{background:var(--accent,#3b5998);border-color:var(--accent,#3b5998);color:var(--on-accent,#fff)}
.sidebar nav .apps-menu>summary{min-height:40px;box-sizing:border-box;padding:8px 12px;border:1px solid var(--border,#c9d3d0);border-radius:6px;background:var(--surface,#fff);box-shadow:0 1px 1px #19384c14}
.sidebar nav .apps-menu>summary:hover{background:var(--subtle,#eef2f1);border-color:var(--accent,#3b5998)}
.sidebar nav .apps-menu{flex-basis:100%}
/* v1.4.1: the MTG life counter (life_counter.html, life-counter.js), over the whole window like the dice roller. The
   table is the header's colours and art; each seat is a player's colour of mana, its face turned to them (--turn), and
   sized from the seat (container units) so a seat of any shape reads well. The Kingdom Connect button in the middle
   is the game's menu. */
html.life-open{overflow:hidden}
.life-counter{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--header);color:var(--text);overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.life-counter::backdrop{background:var(--page)}
.life-counter[open]{transform-origin:var(--pop-origin,center);animation:kc-pop .52s cubic-bezier(.2,.9,.3,1.08) both}
.life-table{position:absolute;inset:0;display:grid;gap:5px;padding:5px;box-sizing:border-box;background:var(--life-table,var(--header));touch-action:manipulation}
.life-seat{position:relative;min-width:0;min-height:0;container-type:size;overflow:hidden;border-radius:var(--life-radius,16px);background:var(--life-finish,linear-gradient(#0000,#0000)),var(--seat);color:var(--seat-text);box-shadow:var(--life-frame,inset 0 0 0 1px #ffffff1f),inset 0 -30px 60px #0000001f;transition:box-shadow .15s}
.life-colour-W{--mana:#efe6c8;--seat:linear-gradient(160deg,#fbf6e6,#e3d6b2);--seat-text:#2b2418}
.life-colour-U{--mana:#2f7bc8;--seat:linear-gradient(160deg,#2f7bc8,#154882);--seat-text:#fff}
.life-colour-B{--mana:#3d3534;--seat:linear-gradient(160deg,#3d3534,#141011);--seat-text:#f1ece6}
.life-colour-R{--mana:#d8473c;--seat:linear-gradient(160deg,#d8473c,#951f18);--seat-text:#fff}
.life-colour-G{--mana:#2e9459;--seat:linear-gradient(160deg,#2e9459,#145831);--seat-text:#fff}
.life-colour-C{--mana:#b4b8bd;--seat:linear-gradient(160deg,#c3c6ca,#80858b);--seat-text:#1d2024}
.life-colour-M{--mana:#dcb54a;--seat:linear-gradient(160deg,#ecca62,#b2871f);--seat-text:#2a2008}
.life-face{position:absolute;top:50%;left:50%;width:100cqw;height:100cqh;container-type:size;transform:translate(-50%,-50%) rotate(var(--turn,0deg))}
.life-seat:is([data-turn="90"],[data-turn="-90"]) .life-face{width:100cqh;height:100cqw}
.life-counter .life-step{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center;padding:0 7cqw;border:0;border-radius:0;background:transparent;color:inherit;font:300 clamp(22px,13cqmin,56px)/1 var(--title-font);opacity:.55;text-decoration:none;cursor:pointer;touch-action:manipulation}
.life-counter .life-step:active{background:#ffffff1a;opacity:.9}
.life-minus{left:0;justify-content:flex-start}
.life-plus{right:0;justify-content:flex-end}
.life-total{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:bold min(44cqh,32cqw)/1 var(--title-font);font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 2px 10px #0000002e;pointer-events:none}
.life-change{position:absolute;top:50%;left:calc(50% + min(30cqh,21cqw));transform:translateY(-50%);font:bold clamp(14px,10cqmin,34px)/1 var(--title-font);opacity:0;transition:opacity .3s;pointer-events:none}
.life-change.life-change-shown{opacity:.9;transition:none}
.life-tags{position:absolute;left:50%;bottom:5cqh;z-index:1;display:flex;justify-content:center;gap:6px;width:max-content;max-width:92%;transform:translateX(-50%)}
.life-counter :is(.life-name,.life-marks){min-width:0;overflow:hidden;box-sizing:border-box;padding:4px 14px;border:0;border-radius:999px;background:#00000029;color:inherit;font-weight:bold;font-size:clamp(12px,6.5cqmin,20px);line-height:1.3;font-family:inherit;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;cursor:pointer}
.life-name{flex:0 1 auto}
.life-counter .life-cmd{flex:0 0 auto;min-width:0;padding:4px 12px;border:0;border-radius:999px;background:#00000029;color:inherit;font-weight:bold;font-size:clamp(12px,6.5cqmin,20px);line-height:1.3;font-family:inherit;white-space:nowrap;text-decoration:none;cursor:pointer}
.life-cmd[hidden]{display:none}
.life-counter .life-cmd[aria-pressed=true]{background:var(--seat-text);color:var(--mana)}
.life-marks{flex:0 0 auto;font-variant-numeric:tabular-nums}
.life-counter .life-marks-empty{font-weight:normal;opacity:.7}
.life-out,.life-first{position:absolute;left:50%;top:calc(50% - min(27cqh,19cqw));z-index:1;transform:translate(-50%,-100%);margin:0;padding:4px 12px;border-radius:999px;font-weight:bold;font-size:clamp(12px,6cqmin,18px);line-height:1.3;font-family:inherit;white-space:nowrap;pointer-events:none}
.life-out{background:#000000b3;color:#fff}
.life-first{background:#ffd54a;color:#2a2008}
.life-out[hidden],.life-first[hidden]{display:none}
.life-is-out{filter:grayscale(.75) brightness(.7)}
.life-counter .life-table .life-seat.life-lit{box-shadow:inset 0 0 0 5px #fff,inset 0 0 40px #ffffff8c,0 0 24px #fff}
.life-counter .life-hub{position:absolute;z-index:2;width:64px;height:64px;padding:0;transform:translate(-50%,-50%);border:4px solid var(--header);border-radius:50%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent)) var(--accent);box-shadow:0 3px 14px #0006;cursor:pointer}
.life-hub-badge{position:absolute;inset:6px;background:var(--on-accent);-webkit-mask:url(../img/home-button.png) center/100% 100% no-repeat;mask:url(../img/home-button.png) center/100% 100% no-repeat}
.life-counter .life-hub[aria-expanded=true]{box-shadow:0 0 0 3px var(--on-header),0 0 18px 6px color-mix(in srgb,var(--on-header) 55%,transparent)}
.life-counter .life-close{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 10px);right:10px;width:40px;height:40px}
.life-scrim{position:absolute;inset:0;z-index:3;background:#00000073}
.life-scrim[hidden]{display:none}
.life-panel{position:absolute;z-index:4;box-sizing:border-box;width:min(400px,calc(100vw - 24px));max-height:calc(100% - 24px);overflow:auto;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:var(--shadow),0 12px 40px #00000059;-webkit-user-select:text;user-select:text}
.life-panel[hidden]{display:none}
.life-panel h2{margin:0 0 10px;font-size:20px}
.life-menu{inset:0;margin:auto;height:fit-content;transform-origin:var(--pop-origin,center);animation:kc-pop .52s cubic-bezier(.2,.9,.3,1.08) both}
.life-sheet{top:50%;left:50%;transform:translate(-50%,-50%) rotate(var(--turn,0deg));border-top:8px solid transparent;border-image:var(--seat) 1;animation:kc-fade .3s ease-out both}
.life-sheet[data-sideways=true]{width:min(400px,calc(100vh - 24px));max-height:calc(100vw - 24px)}
@media(prefers-reduced-motion:reduce){.life-counter[open],.life-menu{animation:kc-fade .3s ease-out both}}
.life-field{display:grid;gap:6px;margin:0 0 14px}
.life-label{font-weight:bold;font-size:14px}
.life-field .quiet{margin:0;font-size:13px}
.life-choices{display:flex;flex-wrap:wrap;gap:6px}
.life-counter .life-choices button{min-width:44px;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--text);font-weight:bold;font-family:inherit;text-decoration:none;cursor:pointer}
.life-counter .life-choices button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.life-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.life-counter .life-action{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--button-art,none) var(--accent);color:var(--on-accent);font-weight:bold;font-family:inherit;text-decoration:none;cursor:pointer}
.life-counter .life-action.life-confirm{background:var(--danger);color:var(--on-danger)}
.life-history>summary{cursor:pointer;font-weight:bold;padding:8px 0}
.life-history ol{display:grid;gap:4px;margin:4px 0 0;padding:0;list-style:none;font-size:14px;font-variant-numeric:tabular-nums}
.life-history time{color:var(--secondary);font-size:12px}
.life-history .quiet{margin:4px 0 0}
.life-field input[type=text]{box-sizing:border-box;width:100%;min-height:42px;padding:0 12px;border:1px solid var(--field-border);border-radius:8px;font:inherit}
.life-colours{display:flex;flex-wrap:wrap;gap:8px}
.life-counter .life-swatch{width:40px;height:40px;padding:0;border:2px solid var(--border);border-radius:50%;background:var(--seat);cursor:pointer}
.life-counter .life-swatch[aria-pressed=true]{border-color:var(--text);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.life-counter-row{display:grid;grid-template-columns:1fr 44px 3.2ch 44px;align-items:center;gap:6px;padding:6px 0;border-top:1px solid var(--border)}
.life-counter-label small{display:block;color:var(--secondary);font-size:12px}
.life-counter-row output{text-align:center;font-weight:bold;font-size:18px;font-variant-numeric:tabular-nums}
.life-counter .life-counter-row button{width:44px;height:40px;padding:0;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--text);font-size:20px;line-height:1;text-decoration:none;cursor:pointer}
.life-counters h3{margin:12px 0 2px;font-size:15px}
.life-counters .quiet{margin:6px 0 0;font-size:13px}
.life-counter .life-done{width:100%;margin-top:14px}
/* v1.4.1: commander damage, as Lifetap and its kind count it: ⚔ on the seat of the player taking it marks that seat,
   and every other seat shows, in place of its life, the damage its commander (and partner, a row each) has dealt
   them, with − and + on its halves. */
.life-dealing :is(.life-step,.life-total,.life-change){visibility:hidden}
.life-damage{position:absolute;inset:0;display:grid;grid-auto-rows:1fr}
.life-damage[hidden]{display:none}
.life-damage-row{position:relative;min-height:0;container-type:size}
.life-damage-row+.life-damage-row{border-top:2px dashed color-mix(in srgb,var(--seat-text) 35%,transparent)}
.life-counter .life-damage-step{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center;padding:0 7cqw;border:0;border-radius:0;background:transparent;color:inherit;font:300 clamp(20px,16cqmin,48px)/1 var(--title-font);opacity:.55;text-decoration:none;cursor:pointer}
.life-counter .life-damage-step:active{background:#ffffff1a;opacity:.9}
.life-damage-value{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);font:bold min(52cqh,30cqw)/1 var(--title-font);font-variant-numeric:tabular-nums;pointer-events:none}
.life-damage-label{position:absolute;top:8cqh;left:50%;transform:translateX(-50%);max-width:80%;overflow:hidden;font-weight:bold;font-size:clamp(11px,9cqmin,16px);white-space:nowrap;text-overflow:ellipsis;opacity:.85;pointer-events:none}
.life-counter .life-table .life-seat.life-target{box-shadow:inset 0 0 0 5px var(--seat-text),inset 0 0 40px color-mix(in srgb,var(--seat-text) 40%,transparent)}
.life-daynight{position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--text);font-size:15px;line-height:24px;box-shadow:0 1px 4px #0006}
.life-daynight[hidden]{display:none}
/* v1.4.1: the life counter in every theme, as the dice roller is: the table between the seats is the dice roller's
   table for that theme, and the seats keep each player's colour of mana in the theme's own finish. */
:root[data-theme="facebook"]{--life-table:radial-gradient(ellipse at 50% 40%,#e9ecf3,#c9d0e0);--life-radius:4px}
:root[data-theme="library"]{--life-table:radial-gradient(ellipse at 50% 40%,#3a5a43,#1d3324);--life-finish:url("../img/parchment-grain.svg"),radial-gradient(ellipse at 30% 0,#ffffff24,transparent 60%);--life-frame:inset 0 0 0 2px #d9b77999,inset 0 0 0 6px #00000026;--life-radius:10px}
:root[data-theme="dark"]{--life-table:radial-gradient(ellipse at 50% 40%,#262b34,#121419);--life-finish:linear-gradient(#00000059,#00000059);--life-frame:inset 0 0 0 1px #a9c5fa33}
:root[data-theme="forest"]{--life-table:radial-gradient(ellipse at 50% 40%,#46694b,#253d2a);--life-finish:radial-gradient(ellipse at 20% 0,#f1f6e42e,transparent 55%),radial-gradient(ellipse at 90% 100%,#0000002e,transparent 60%);--life-frame:inset 0 0 0 2px #a7ba7b66}
:root[data-theme="rainbow"]{--life-table:linear-gradient(120deg,#ffd6e0,#fff1c9 25%,#d6f5e3 50%,#d9e7ff 75%,#ead9ff);--life-finish:linear-gradient(90deg,#e67488,#d9ab58,#d9ca67,#71b48b,#6e9fce,#ae83ce) top/100% 7px no-repeat;--life-frame:inset 0 0 0 1px #ffffff66}
:root[data-theme="mystical"]{--life-table:var(--sparkles),radial-gradient(ellipse at 50% 40%,#4a2766,#1c0d2b);--life-finish:var(--sparkles),radial-gradient(ellipse at 30% 0,#ffffff30,transparent 60%);--life-frame:inset 0 0 0 2px #c3a0e080,0 0 14px #c598f040}
:root[data-theme="gothic"]{--life-table:radial-gradient(ellipse at 50% 40%,#5a1e30,#1a070d);--life-finish:linear-gradient(#0000004d,#0000004d);--life-frame:inset 0 0 0 4px #16090e,inset 0 0 0 5px #8e2a44;--life-radius:4px}
:root[data-theme="pixel"]{--life-table:repeating-conic-gradient(#4e9a5a 0 25%,#438a4e 0 50%) 0 0/24px 24px;--life-frame:inset 0 0 0 4px #263a6b,inset 0 0 0 6px #fff8e133;--life-radius:0}
:root[data-theme="pixel"] .life-seat{background:var(--mana)}
:root[data-theme="pixel"] .life-seat :is(.life-total,.life-damage-value){text-shadow:4px 4px 0 #263a6b}
:root[data-theme="clockwork"]{--life-table:var(--gear) 0 0/140px,radial-gradient(ellipse at 50% 40%,#2f5252,#152828);--life-finish:var(--surface-art),radial-gradient(ellipse at 30% 0,#ffffff24,transparent 60%);--life-frame:inset 0 0 0 3px #b8863c,inset 0 0 0 5px #00000040;--life-radius:8px}
:root[data-theme="pirate"]{--life-table:repeating-linear-gradient(0deg,#0000 0 46px,#2a1a0c80 46px 48px),repeating-linear-gradient(90deg,#ffffff08 0 3px,#0000 3px 9px),linear-gradient(180deg,#8a6a45,#6e5233);--life-finish:url("../img/parchment-grain.svg");--life-radius:0}
:root[data-theme="pirate"] .life-seat{border:4px solid #b28a50;border-image:repeating-linear-gradient(45deg,#d1ad6e 0 3px,#8a6a35 3px 5px,#b28a50 5px 8px) 4}
:root[data-theme="frozen"]{--life-table:radial-gradient(ellipse at 50% -15%,#9edae8a6,transparent 60%),linear-gradient(160deg,#eef8fc,#cfe7f3);--life-finish:linear-gradient(160deg,#ffffff8c,#ffffff00 45%,#cfe7f340);--life-frame:inset 0 0 0 1px #ffffffaa,0 0 14px #9edae880}
:root[data-theme="celestial"]{--life-table:var(--stars),radial-gradient(ellipse at 50% 40%,#1f2c5c,#080d22);--life-finish:var(--stars),radial-gradient(ellipse at 50% 0,#ffffff1f,transparent 60%);--life-frame:inset 0 0 0 1px #d8b76a99}
:root[data-theme="neon"]{--life-table:linear-gradient(#8249f533 1px,#0000 1px) 0 0/32px 32px,linear-gradient(90deg,#8249f533 1px,#0000 1px) 0 0/32px 32px,radial-gradient(ellipse at 50% 115%,#f13dae55,#0000 60%),#0b0b16}
:root[data-theme="neon"] .life-colour-W{--neon:#f5f0d8}
:root[data-theme="neon"] .life-colour-U{--neon:#00ddeb}
:root[data-theme="neon"] .life-colour-B{--neon:#a77bff}
:root[data-theme="neon"] .life-colour-R{--neon:#ff4f7e}
:root[data-theme="neon"] .life-colour-G{--neon:#4dff9a}
:root[data-theme="neon"] .life-colour-C{--neon:#c8c8e0}
:root[data-theme="neon"] .life-colour-M{--neon:#ffd84a}
:root[data-theme="neon"] .life-seat{--seat-text:var(--neon);background:#100f1fe6;box-shadow:inset 0 0 0 2px var(--neon),0 0 14px color-mix(in srgb,var(--neon) 55%,transparent),inset 0 0 26px color-mix(in srgb,var(--neon) 28%,transparent)}
:root[data-theme="neon"] .life-seat :is(.life-total,.life-damage-value){text-shadow:0 0 14px var(--neon)}
:root[data-theme="dragon"]{--life-table:var(--page-art),#1d1614;--life-finish:var(--page-art),linear-gradient(#0000004d,#0000004d);--life-frame:inset 0 0 0 2px #e3b85155,inset 0 -40px 50px #e57a3240}

/* v1.4.3: accessibility — text big enough to read and controls big enough to tap, in every theme. Measured at 375px
   and 1280px wide in all fourteen themes: no text under 12px (the calendar's event chips on phones stay at 11px, the
   floor), hints at 14px on phones, every control at least 24×24px (WCAG 2.5.8) and the main touch controls 44px on
   touch screens. Colours (input borders, Library's quiet text, the header's focus ring, Neon's count) are in themes.css. */
.eyebrow,.chat-badge,.header-menu>summary .chat-badge,.header-messages .chat-badge,.composer-hint,.composer-gif span,.giphy-attribution,.live-search-type,.place-credit,.picture-choices h3,.chat-message-heading time,.chat-receipt{font-size:12px}
.archive-results,.entry-folder-path,.archive-card-number,.archive-card-footer,.folder-tile small,.parchment-catalog,.parchment-end{font-size:12px}
.messages-app .conversation-info :is(small,time),.messages-app .conversation-row .chat-badge{font-size:12px}
@media(max-width:560px){
 .calendar,.calendar th{font-size:12px}
 .calendar a{font-size:11px}
 /* Hints and explanations read at body size on phones; the timestamp lines of posts stay small. */
 p.quiet:not(:has(time)),.push-switch-text .quiet{font-size:14px}
 /* The second line's names keep a dark edge in the header's colour, so they stay readable on the glow round the
    current page's (or an open menu's) button. */
 body:not(.messages-app) .header-actions>:is(.header-home,.header-link)>.icon-label,body:not(.messages-app) .header-actions>.header-menu>summary>.icon-label{text-shadow:0 0 2px var(--header),0 0 4px var(--header),0 0 7px var(--header)}
}
/* Links in a line of text (names, times, "0 comments", "Edit biography", Create event…) reach 24px tall: padding on an
   inline link grows what a finger or pointer can hit without moving the text. In the old layer, so any rule written for
   a particular link still wins. */
@layer legacy{:where(p,li,h1,h2,h3,h4,dd)>a{padding-block:5px}.eyebrow{letter-spacing:1px}}
.describe-link{padding-block:5px}
.post-actions>a{display:inline-flex;align-items:center;min-height:24px}
.profile-manage>summary{padding-block:3px}
.market-heading-actions>a{padding-block:2px}
.messages-app .conversation-heading>a,.messages-app .messenger-empty a.button{display:inline-flex;align-items:center;min-height:44px}
.messages-app .conversation-back{min-height:24px}
.picture-choice input:focus-visible+img{outline-color:var(--focus)}
@media(pointer:coarse){
 /* Plain buttons, boxes and menus 44px tall; not inside the message and post composers (their own sizes) or the dice
    roller and life counter (already large). */
 :is(button:not([class]),.text-button,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=hidden]),select):not(:is(.composer-tools,.chat-compose,.dice-roller,.life-counter) *),.header-dropdown>a,.settings-links a,.settings-menu>summary,.pagination a,nav a,.form-actions a,.profile-form>button,.reply-form>summary,.mention-picker>summary,.archive-card-footer a,.my-reactions button,.post-actions>a,.sidebar nav a,label.push-switch.compact-switch{min-height:44px}
 .inline-home{width:44px;height:44px}
 .market-heading-actions>a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
 .profile-manage>summary{padding-block:12px}
 .messages-app :is(.conversation-tabs a,.conversation-tools input){min-height:44px}
 .messages-app .chat-tools .icon-button{min-width:44px;min-height:44px}
 /* The news feed's filter and magnifier keep their small 24px look; their reach grows to 44px tall. */
 .feed-title :is([data-open-feed],[data-feed-search]){position:relative}
 .feed-title :is([data-open-feed],[data-feed-search])::after{content:"";position:absolute;inset:-10px -4px}
}
/* v1.4.6: Add images on a phone (photo-picker.js), like the phone apps' own picture choosers: a sheet from the bottom of
   the screen with the camera live in its first box (a round snap button in it; the rest of the box opens the camera full
   screen), Camera roll next and the pictures chosen so far, three to a row. The full-screen camera is black in every
   theme, as cameras are, with the snap button at the bottom in the middle, the last picture on the left and the button
   that turns the camera round on the right. */
.photo-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:560px;max-height:calc(100dvh - 24px);margin:0 auto;padding:14px 12px calc(16px + env(safe-area-inset-bottom));border:1px solid var(--border);border-bottom:0;border-radius:16px 16px 0 0;background:var(--surface);color:var(--text);box-shadow:var(--shadow);overflow:auto;overscroll-behavior:contain}
.photo-sheet[open]{animation:photo-sheet-up .28s ease-out}
@keyframes photo-sheet-up{from{transform:translateY(100%)}}
.photo-sheet::backdrop{background:var(--backdrop)}
.photo-sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.photo-sheet-heading h2{margin:0;font-size:20px;color:var(--heading)}
.photo-sheet .photo-sheet-done{min-width:44px;min-height:44px;margin:0;padding:8px 18px;border-radius:22px;font-weight:bold}
.photo-sheet-status{margin:2px 0 12px;color:var(--secondary);font-size:14px}
.photo-sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.photo-sheet-grid>li{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--subtle)}
.photo-sheet-grid>li.camera-tile{background:#111;color:#fff}
.camera-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.camera-tile.live video{opacity:1}
.camera-tile-idle{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;font-size:14px}
.camera-tile.live .camera-tile-idle{display:none}
.camera-tile-idle svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.photo-sheet .camera-open{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
.photo-sheet .camera-snap{position:absolute;left:50%;bottom:6px;width:44px;height:44px;margin:0 0 0 -22px;padding:0;border:3px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #0007,inset 0 0 0 1px #0007;cursor:pointer}
.photo-sheet .camera-snap::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff;transition:transform .1s}
.photo-sheet .camera-snap:active::after,.camera-full .camera-shutter:active::after{transform:scale(.86)}
.camera-tile:not(.live) .camera-snap{display:none}
.photo-sheet .camera-snap:disabled,.camera-full .camera-shutter:disabled{opacity:.45;background:transparent;cursor:default}
.photo-sheet.mirrored video,.camera-full.mirrored video{transform:scaleX(-1)}
.photo-sheet .camera-roll{display:grid;place-content:center;justify-items:center;gap:6px;width:100%;height:100%;margin:0;padding:6px;border:0;border-radius:0;background:var(--subtle);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.photo-sheet .camera-roll:disabled{opacity:.5;cursor:default}
.camera-roll svg{width:34px;height:34px;fill:var(--success)}
.camera-roll .photo-back{fill:none;stroke:var(--success);stroke-width:2;stroke-linecap:round}
.camera-roll .photo-cut{fill:var(--subtle)}
.photo-chosen img{display:block;width:100%;height:100%;object-fit:cover}
.photo-sheet .photo-remove{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:30px;height:30px;margin:0;padding:0;border:2px solid #fff;border-radius:50%;background:#000000b3;color:#fff;cursor:pointer}
.photo-sheet .photo-remove::before{content:"";position:absolute;inset:-7px}
.photo-remove svg,.camera-close svg,.camera-flip svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.photo-remove svg{width:14px;height:14px}
.photo-sheet-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.camera-full{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden}
.camera-full::backdrop{background:#000}
.camera-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .2s}
.camera-full.live video{opacity:1}
.camera-full .camera-close,.camera-full .camera-flip{display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer}
.camera-full .camera-close{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;z-index:1}
.camera-close svg{width:22px;height:22px}
.camera-flip svg{width:26px;height:26px}
.camera-full .camera-note{position:absolute;top:calc(22px + env(safe-area-inset-top));left:72px;right:72px;margin:0;text-align:center;font-size:14px;text-shadow:0 1px 3px #000,0 0 8px #000}
.camera-full .camera-bar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:24px 24px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(#0000,#0009)}
.camera-full .camera-shutter{grid-column:2;position:relative;width:76px;height:76px;margin:0;padding:0;border:4px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #0006;cursor:pointer}
.camera-full .camera-shutter::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;transition:transform .1s}
.camera-full .camera-last{grid-column:1;justify-self:start;position:relative;width:56px;height:56px;margin:0;padding:0;border:2px solid #fff;border-radius:12px;background:#222;overflow:visible;cursor:pointer}
.camera-full .camera-last img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.camera-full .camera-count{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#fff;color:#000;font-size:13px;font-weight:bold;line-height:22px;text-align:center}
.camera-full .camera-flip{grid-column:3;justify-self:end}
.camera-full [hidden]{display:none}
.camera-tile.snapped::after,.camera-full.snapped::after{content:"";position:absolute;inset:0;background:#fff;pointer-events:none;animation:camera-flash .3s ease-out forwards}
@keyframes camera-flash{from{opacity:.85}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.photo-sheet[open]{animation-name:kc-fade}.camera-tile video,.camera-full video{transition:none}}
/* v1.4.6: a post laid out like the Facebook app's (the user asked, from a screenshot; wall_post_body.html,
   reaction_widget.html). At the top, the writer's round picture with their name in bold and, right under it, how long
   ago and a globe or (members only) a lock; the ⋯ for Edit post and Delete post in the corner. Under the post, the
   reactions' badges with who left them and the comments on the right, a line, then Like, Comment and Share in quiet
   grey, Like in the link colour once liked. */
.post-heading{display:flex;align-items:flex-start;gap:10px;min-height:0;padding-right:0;margin-bottom:12px}
.post-avatar{flex:0 0 40px;display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:18px;font-weight:bold;line-height:1;text-decoration:none}
.post-avatar:hover{text-decoration:none}
.post-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.post-byline{flex:1;min-width:0;padding-top:1px}
.post-byline h2{margin:0;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.post-meta{margin:2px 0 0;font-size:13px;line-height:1.3;color:var(--secondary)}
.post-meta>a{color:inherit}
.post-meta .post-audience svg{width:12px;height:12px;margin:0;vertical-align:-1px;fill:currentColor}
.post-menu{position:relative;flex:none;margin:-6px -10px 0 0}
.post-menu>summary{list-style:none;display:grid;place-items:center;width:44px;height:36px;border-radius:18px;color:var(--secondary);font-size:22px;line-height:1;cursor:pointer}
.post-menu>summary::-webkit-details-marker{display:none}
.post-menu>summary:hover,.post-menu[open]>summary{background:var(--subtle)}
.post-menu-list{position:absolute;top:100%;right:0;z-index:6;min-width:170px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.post-menu-list form{margin:0}
.post-menu-list>a,.post-menu-list .post-menu-delete{display:flex;align-items:center;width:100%;min-height:40px;margin:0;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.post-menu-list .post-menu-delete{color:var(--danger)}
.post-menu-list>a:hover,.post-menu-list .post-menu-delete:hover{background:var(--subtle);text-decoration:none}
.post-reactions.post-footer{display:block;margin-top:12px}
.post-summary{display:flex;align-items:center;gap:12px;min-height:32px;padding-bottom:6px}
.post-summary[hidden],.post-footer .reaction-summary[hidden],.post-comment-count[hidden]{display:none}
.post-footer .reaction-summary{min-width:0;font-size:14px}
.post-footer .reaction-count{display:flex;align-items:center;gap:6px;max-width:100%;min-height:32px;padding:0;border:0;font:inherit;font-size:14px;text-align:left;text-decoration:none}
.reaction-badges{display:inline-flex;flex:none}
.reaction-badge{display:grid;place-items:center;width:20px;height:20px;overflow:hidden;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--surface);font-size:14px;line-height:1}
.reaction-badge+.reaction-badge{margin-left:-2px}
.reaction-badge.like-badge{background:var(--accent);color:var(--on-accent)}
.like-badge svg{width:11px;height:11px;fill:currentColor}
.reaction-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-comment-count{flex:none;margin-left:auto;font-size:14px;color:var(--secondary)}
.post-bar{display:flex;align-items:stretch;gap:4px;padding-top:4px;border-top:1px solid var(--border)}
.post-bar>*{flex:1 1 0;min-width:0}
.post-footer .post-bar .reaction-form{display:flex;margin:0}
.post-bar .reaction-picker{display:flex;flex:1}
.post-footer .post-bar-button,.post-footer .post-bar .reaction-form .like-button.post-bar-button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;width:100%;min-height:40px;margin:0;padding:6px 4px;border:0;border-radius:6px;background:transparent;color:var(--secondary);font:inherit;font-size:15px;font-weight:normal;line-height:1.2;text-decoration:none;cursor:pointer}
.post-footer .post-bar-button:hover,.post-footer .post-bar .reaction-form .like-button.post-bar-button:hover{background:var(--subtle);text-decoration:none}
.post-footer .post-bar .reaction-form .like-button.post-bar-button[aria-pressed=true]{background:transparent;color:var(--link)}
.post-bar-button svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.post-bar .like-button[aria-pressed=true] svg{fill:currentColor}
.post-bar-share{position:relative;display:flex}
.post-bar-share .copy-status:not(:empty){position:absolute;right:0;bottom:calc(100% + 6px);z-index:4;width:230px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:var(--shadow);color:var(--text);font-size:13px}
@media(max-width:380px){.post-footer .post-bar-button,.post-footer .post-bar .reaction-form .like-button.post-bar-button{gap:4px;font-size:14px}}
/* v1.4.7: Like, Comment and Share sit in the middle of their strip (the user asked: too much room under them). A post's
   card ends 4px under the 40px buttons, as the bar starts 4px over them, so their words are 24px from the line above
   and 24px from the card's edge, on computers and phones alike (the card's own 16–18px padding stays everywhere else). */
.panel:has(>.post-footer:last-child){padding-bottom:4px}
/* v1.4.8: Share's menu under a post (reaction_widget.html): Share now, Write post, Send in Messages, Copy link, and on a
   phone More options; it opens upwards from Share, like the post's ⋯ menu. How many shares sits beside the comments. */
.post-counts{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
.share-count{font-size:14px;color:var(--secondary)}
.share-menu>summary{list-style:none}
.share-menu>summary::-webkit-details-marker{display:none}
.share-menu .share-menu-list{position:absolute;right:0;bottom:calc(100% + 6px);z-index:5;display:grid;min-width:240px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.share-menu-list form{margin:0}
.share-menu-list>a,.share-menu-list>button,.share-menu-list form>button{display:grid;align-content:center;gap:1px;width:100%;min-height:44px;margin:0;padding:6px 12px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:normal;text-align:left;text-decoration:none;cursor:pointer}
.share-menu-list small{font-size:12px;color:var(--secondary)}
.share-menu-list>a:hover,.share-menu-list button:hover{background:var(--subtle);text-decoration:none}
.share-menu-list>[hidden]{display:none}
.share-menu .share-menu-list .copy-status:not(:empty){position:static;width:auto;margin:4px 0 0;box-shadow:none}
/* v1.4.8: a share shows the shared post inside it (shared_post.html), and the share page (share.html). */
.post-shared-label{font-weight:normal;color:var(--secondary)}
.shared-post{margin:10px 0;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.shared-post .post-heading{margin-bottom:6px}
.shared-post h3{margin:0;font-size:15px}
.shared-post>p:last-child{margin-bottom:0}
.shared-missing p{margin:0}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
/* v1.4.8: pinned posts above Home's feed and a group's posts (kc/pins.py). */
.pinned-post{border-top:3px solid var(--accent)}
.pinned-label{display:flex;align-items:center;gap:6px}
.pin-icon{flex:none;width:14px;height:14px;fill:currentColor}
/* v1.4.8: a post's poll (poll.html): each option a bar filled to its share of the voters, with faces and a count; the
   member's own vote ticked in the theme's colour; and the poll in a post box (composer.html). */
.post-poll{margin:12px 0 4px}
.post-poll[aria-busy=true]{opacity:.7}
.poll-form{margin:0}
.poll-kind{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;color:var(--secondary)}
.poll-kind svg{flex:none;width:16px;height:16px;fill:currentColor}
.poll-options{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.poll-choice{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:8px 12px;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:15px;font-weight:normal;text-align:left;cursor:pointer}
.poll-choice:disabled{opacity:1;cursor:default}
.poll-choice:hover:not(:disabled){border-color:var(--accent)}
.poll-fill{position:absolute;top:0;bottom:0;left:0;background:var(--subtle);transition:width .3s ease}
.poll-mine .poll-fill{background:var(--selected,var(--subtle))}
.poll-mark,.poll-text,.poll-tally{position:relative}
.poll-mark{flex:none;width:18px;height:18px;border:2px solid var(--secondary);border-radius:50%}
.poll-mark.poll-several{border-radius:4px}
.poll-mine .poll-mark{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface)}
.poll-text{flex:1;min-width:0;overflow-wrap:anywhere}
.poll-leading .poll-text{font-weight:bold}
.poll-tally{display:flex;align-items:center;gap:6px;flex:none;font-size:14px;color:var(--secondary)}
.poll-faces{display:inline-flex}
.poll-faces img,.poll-faces span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--accent);color:var(--on-accent);font-size:12px;box-shadow:0 0 0 2px var(--surface)}
.poll-faces>*+*{margin-left:-6px}
.poll-add{display:flex;gap:8px;margin-top:8px}
.poll-add input{flex:1;min-width:0;min-height:44px}
.poll-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:14px}
.poll-who summary{min-height:32px;color:var(--link);cursor:pointer}
.poll-who dl{margin:6px 0 0}
.poll-who dt{font-weight:bold}
.poll-who dd{margin:0 0 6px}
.poll-status:empty{display:none}
.composer-poll svg{width:22px;height:22px;fill:currentColor}
.poll-builder{display:grid;gap:8px;margin:8px 0 0;padding:12px;border:1px solid var(--border);border-radius:8px}
.poll-builder[hidden]{display:none}
.poll-builder legend{padding:0 4px;font-weight:bold}
.poll-builder>p{margin:0}
.poll-rows{display:grid;gap:6px}
.poll-row input{width:100%;min-height:44px}
.poll-flag{display:flex;align-items:center;gap:8px;min-height:44px}
.poll-flag[hidden]{display:none}
.poll-remove{justify-self:start}
/* v1.4.8: events as on Facebook (event.html): Going, Interested and Can't go; Invite and Add to calendar; who's coming,
   as faces; and the event's discussion. */
.event-counts{margin:12px 0 8px;font-size:15px}
.event-invited{margin:0 0 8px;padding:8px 12px;border-radius:8px;background:var(--subtle)}
.rsvp-form{margin:0}
.rsvp-buttons{display:flex;gap:8px}
.rsvp-button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:8px 6px;border:1px solid var(--border);border-radius:8px;background:var(--subtle);color:var(--text);font:inherit;font-size:15px;font-weight:bold;cursor:pointer}
.rsvp-button svg{flex:none;width:18px;height:18px;fill:currentColor}
.rsvp-button.chosen{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.event-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.event-menu{position:relative}
.event-menu>summary{list-style:none}
.event-menu>summary::-webkit-details-marker{display:none}
.event-menu-body{position:absolute;top:calc(100% + 6px);left:0;z-index:5;display:grid;gap:10px;width:min(360px,calc(100vw - 48px));padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.event-menu-body>a{display:flex;align-items:center;min-height:44px}
.event-menu-body p{margin:0}
.invite-form{gap:8px}
.invite-people{display:grid;gap:2px;max-height:240px;padding:4px;overflow:auto;border:1px solid var(--border);border-radius:6px}
.invite-person{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 8px;font-weight:normal}
.invite-person[hidden]{display:none}
.guest-list{display:flex;flex-wrap:wrap;gap:12px}
.guest{display:grid;justify-items:center;gap:4px;width:72px;font-size:13px;text-align:center;text-decoration:none}
.guest-photo{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:20px}
.guest-photo img{width:100%;height:100%;object-fit:cover}
.guest-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guest-declined>summary{min-height:44px;margin-top:8px;font-weight:bold;cursor:pointer}
.event-discussion{margin-top:16px}
@media(max-width:420px){.rsvp-button{font-size:14px}.rsvp-button svg{width:16px;height:16px}}
/* v1.4.8: a photo's page, who is in it and Tag people (photo.html); the album's line under each photo; the picture
   viewer's link to the photo's page. */
.photo-page .photo-large img{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:8px}
.tag-list{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.tag-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tag-person{display:inline-flex;align-items:center;gap:8px;font-weight:bold}
.tag-person img,.tag-person span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--accent);color:var(--on-accent);font-size:14px}
.tag-list .inline-form{display:inline;margin:0 0 0 auto}
.tag-form select{width:100%;min-height:180px}
.photo-tag-line{font-size:14px}
.image-viewer .image-viewer-tags{display:flex;align-items:center;align-self:center;min-height:44px}
.image-viewer .image-viewer-tags[hidden]{display:none}
/* v1.4.8: Messages after Share → Send in Messages (chat_base.html). */
.share-banner{margin:8px 0;padding:8px 12px;border-radius:8px;background:var(--subtle);color:var(--text);font-size:14px}
/* v1.5.0: notifications laid out like Facebook's (notification_card.html, the bell and /notifications): the person's
   round picture with a small badge for what happened, the names in bold, a blue dot while unread, New and Earlier,
   All or Unread, Mark all as read, and ⋯ on each (Mark as read, Remove this notification). */
.masthead .notices-dropdown{width:400px}
.notices form{margin:0}
.notice-tools{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin:2px 0 6px}
.notice-filter{display:flex;gap:6px}
.notice-filter a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;font-weight:600;font-size:15px;color:var(--text);text-decoration:none}
.notice-filter a:hover{background:var(--subtle);text-decoration:none}
.notice-filter a[aria-pressed="true"]{background:var(--selected);color:var(--link)}
.notice-read-all .text-button{min-height:44px;font-size:14px;font-weight:600;color:var(--link)}
.notification-preview-list{max-height:min(60vh,520px)}
.notice-section{margin:10px 4px 2px;font-size:16px;color:var(--heading)}
.notification-history-item.notice-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 2px;padding:2px;border-bottom:0;border-radius:8px}
.notice-card:hover{background:var(--subtle)}
.notice-card .notification-link,.notification-history-item.is-unread.notice-card .notification-link{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:6px;font-weight:400;text-align:left;color:var(--text);text-decoration:none;border-radius:8px}
.notice-avatar{position:relative;flex:0 0 56px;width:56px;height:56px}
.notice-avatar img,.notice-initial{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--accent);color:var(--on-accent);font:bold 22px/1 Georgia,serif}
.notice-initial.notice-symbol{font:28px/1 system-ui,sans-serif}
.notice-badge{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:14px/1 system-ui,sans-serif;box-shadow:0 0 0 2px var(--surface);background:#65676b}
.notice-badge-like,.notice-badge-tag,.notice-badge-post,.notice-badge-group{background:#1877f2}
.notice-badge-love,.notice-badge-event{background:#f02849}
.notice-badge-comment,.notice-badge-share,.notice-badge-money{background:#31a24c}
.notice-badge-coin,.notice-badge-reaction{background:#f7b928}
.notice-text{display:grid;gap:3px;min-width:0;flex:1;font-size:15px;line-height:1.35}
.notice-words strong{font-weight:700}
.notice-card time{font-size:13px;color:var(--secondary)}
.notice-card.is-unread time{color:var(--link);font-weight:600}
.notice-dot{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--link)}
.notice-actions{grid-column:1;display:flex;flex-wrap:wrap;gap:8px;padding:0 6px 8px 74px}
.notice-menu{grid-column:2;grid-row:1;position:relative}
.notice-menu>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:20px;color:var(--secondary)}
.notice-menu>summary::-webkit-details-marker{display:none}
.notice-menu>summary:hover,.notice-menu[open]>summary{background:var(--border)}
.notice-menu-list{position:absolute;right:0;top:calc(100% + 2px);z-index:6;min-width:230px;padding:6px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}
.notice-menu-list button{display:block;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:6px;background:none;color:var(--text);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.notice-menu-list button:hover{background:var(--subtle)}
.notices.notices-unread .notification-history-item:not(.is-unread),.notices.notices-unread .notice-earlier{display:none}
.notices-caught-up{display:none;margin:12px 0;text-align:center}
.notices.notices-unread:has(.notification-history-item):not(:has(.notification-history-item.is-unread)) .notices-caught-up{display:block}
@media(max-width:480px){.notice-avatar,.notice-avatar img,.notice-initial{flex-basis:48px;width:48px;height:48px}.notice-actions{padding-left:66px}}
/* v1.5.0: under a post in the news feed, a profile or a group, its top comment, View N more comments and the folded
   comment box (feed_comments.html); a pinned comment's label and Pin/Unpin in its ⋯ (comment.html); "Sky is writing a
   comment…" (comments.js). */
.feed-comments{margin-top:4px;padding-top:6px;border-top:1px solid var(--border)}
.feed-comments .comment-list:empty{display:none}
.feed-comments .comment-composer{margin-top:4px;padding-top:4px;border-top:0}
.feed-more-comments{display:inline-flex;align-items:center;min-height:44px;color:var(--secondary);font-size:15px;font-weight:600}
.comment-typing{margin:2px 0;color:var(--secondary);font-size:13px;font-style:italic}
.comment-typing:empty{display:none}
.comment-pinned-label{display:flex;align-items:center;gap:4px;margin:0 0 2px;color:var(--secondary);font-size:13px;font-weight:600}
.comment-menu-list form{margin:0}
.comment-menu-list button{display:flex;align-items:center;width:100%;min-height:40px;margin:0;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.comment-menu-list button:hover{background:var(--subtle)}
/* v1.5.0: a news feed that never stops (feed-more.js): the next posts as Home scrolls, "↑ New posts" at the top when
   others post meanwhile, and pull to refresh in the installed app (the page itself neither bounces nor glows there). */
.feed-sentinel{height:1px}
.feed-status{margin:12px 0;text-align:center}
.feed-status:empty{display:none}
.feed-retry{display:block;min-height:44px;margin:0 auto 16px}
.feed-retry[hidden]{display:none}
.new-posts{position:fixed;left:50%;z-index:25;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border:0;border-radius:22px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:15px;font-weight:700;box-shadow:var(--shadow);transform:translateX(-50%);cursor:pointer;animation:new-posts-in .25s ease-out}
.new-posts[hidden]{display:none}
.new-posts svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes new-posts-in{from{opacity:0;transform:translate(-50%,-8px)}}
html.feed-pull,html.feed-pull body{overscroll-behavior-y:contain}
.pull-refresh{position:fixed;left:50%;top:calc(var(--masthead-height,64px) - 44px);z-index:26;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--accent);box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,var(--pull,0px));transition:opacity .15s,transform .2s}
.pull-refresh.pulling{opacity:1;transition:none}
.pull-refresh.refreshing{opacity:1;transform:translate(-50%,72px)}
.pull-refresh svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--turn,0deg))}
.pull-refresh.ready{color:var(--link)}
.pull-refresh.refreshing svg{animation:pull-spin .8s linear infinite}
@keyframes pull-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.new-posts{animation:none}.pull-refresh.refreshing svg{animation:none}}
/* v1.5.0: a post's photos in Facebook's grid (photo_grid.html): 1 full width, 2 side by side, 3 = one big and two, 4 = 2×2,
   5+ = two big and three small with +N on the last; a double tap likes the post with a thumbs-up burst (photo-viewer.js;
   it only fades with reduce-motion). */
.post-photos{grid-template-columns:1fr;gap:3px;margin:10px 0 4px;border-radius:8px;overflow:hidden}
.post-photos a{position:relative;display:block;min-width:0;overflow:hidden;background:var(--subtle);touch-action:manipulation}
.post-photos img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0}
.post-photos[data-count="1"] img{height:auto;max-height:min(80vh,640px)}
.post-photos[data-count="2"],.post-photos[data-count="3"],.post-photos[data-count="4"]{grid-template-columns:1fr 1fr}
.post-photos[data-count="2"] a,.post-photos[data-count="3"] a,.post-photos[data-count="4"] a{aspect-ratio:1}
.post-photos[data-count="3"] a:first-child{grid-column:1/-1;aspect-ratio:2/1}
.post-photos[data-count="many"]{grid-template-columns:repeat(6,1fr)}
.post-photos[data-count="many"] a{grid-column:span 2;aspect-ratio:1}
.post-photos[data-count="many"] a:nth-child(-n+2){grid-column:span 3}
.post-photos .photo-extra{display:none}
.photo-more::after{content:attr(data-more);position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0/.45);color:#fff;font-size:30px;font-weight:700}
.like-burst{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 4px 18px rgb(0 0 0/.3);pointer-events:none;animation:like-burst .9s ease-out forwards}
.like-burst svg{width:46px;height:46px;fill:currentColor}
@keyframes like-burst{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.15)}45%{transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes like-fade{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
/* v1.5.0: the picture viewer, dark and full screen as in the Facebook app (photo-viewer.js): swipe, pinch or double-tap to
   zoom; the photo's description and tags, and the post's Like and comments, under it. */
.image-viewer.photo-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:#000;background-image:none;color:#e4e6eb;box-shadow:none}
.image-viewer.photo-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0}
.image-viewer.photo-viewer::backdrop{background:#000}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(6px,env(safe-area-inset-top)) 8px 6px 16px}
.viewer-counter{color:#b0b3b8;font-size:14px}
.image-viewer .viewer-close{align-self:center;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(255 255 255/.12);color:#fff;font-size:28px;line-height:1}
.viewer-stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;touch-action:none;user-select:none}
.image-viewer .viewer-photo{width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;object-fit:contain;touch-action:none;transform-origin:center;transition:transform .2s ease}
.image-viewer.zoomed .viewer-photo{transition:none;cursor:grab}
.image-viewer .viewer-step{position:absolute;top:50%;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgb(255 255 255/.14);color:#fff;font-size:30px;line-height:1;transform:translateY(-50%)}
.image-viewer .viewer-previous{left:12px}
.image-viewer .viewer-next{right:12px}
.image-viewer .viewer-step[hidden]{display:none}
.viewer-info{display:grid;gap:6px;max-height:40vh;overflow:auto;padding:10px 16px max(12px,env(safe-area-inset-bottom))}
.viewer-caption{margin:0;color:#e4e6eb;font-size:15px;white-space:pre-wrap}
.viewer-tags,.viewer-counts{margin:0;color:#b0b3b8;font-size:14px}
.image-viewer.photo-viewer .image-viewer-tags{justify-self:start;color:#e4e6eb;text-decoration:underline}
.viewer-actions{display:flex;gap:4px;padding-top:4px;border-top:1px solid rgb(255 255 255/.18)}
.image-viewer .viewer-like,.image-viewer .viewer-comment{flex:1;align-self:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#e4e6eb;font:inherit;font-weight:600;text-decoration:none}
.image-viewer .viewer-like[aria-pressed=true]{color:#4599ff}
.viewer-like svg,.viewer-comment svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.viewer-like[aria-pressed=true] svg{fill:currentColor}
.image-viewer .viewer-like:hover,.image-viewer .viewer-comment:hover{background:rgb(255 255 255/.1);text-decoration:none}
.viewer-post[hidden],.viewer-caption[hidden],.viewer-tags[hidden],.viewer-counts[hidden],.viewer-like[hidden],.viewer-comment[hidden]{display:none}
@media (hover:none) and (pointer:coarse){.image-viewer .viewer-step{display:none}}
@media (prefers-reduced-motion:reduce){.like-burst{animation-name:like-fade}.image-viewer .viewer-photo{transition:none}}
/* v1.5.0: Saved (kc/saved.py): Save post in a post's ⋯, Save on an event's page, the Saved page's All/Posts/Events, and the
   short note at the bottom of the screen after saving. */
.post-menu-list .post-menu-save{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;margin:0;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.post-menu-list .post-menu-save:hover{background:var(--subtle)}
.post-menu-save svg,.event-save svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.post-menu-save[aria-pressed=true] svg,.event-save [aria-pressed=true] svg{fill:currentColor}
.event-save{display:inline;margin:0}
.event-save .action-link{display:inline-flex;align-items:center;gap:6px}
.saved-filter{margin:0 0 12px}
.saved-filter a[aria-current="page"]{background:var(--selected);color:var(--link)}
.kc-toast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;max-width:min(92vw,440px);margin:0;padding:12px 18px;border-radius:8px;background:#242526;color:#fff;font-size:15px;box-shadow:0 4px 16px rgb(0 0 0/.3);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s,transform .2s}
.kc-toast.shown{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.kc-toast{transition:none;transform:translate(-50%,0)}}
/* v1.5.0: a wide cover photo at the top of a profile and a character's page, as on Facebook (profile.html, character.html):
   cropped to fill (the middle of it shows), the round picture over its lower edge, the name under it. Without a cover
   photo, a soft band in the theme's colours. */
.profile-card{overflow:hidden}
.profile-cover{position:relative;height:clamp(120px,26vw,240px);margin:-18px -18px 0;background:linear-gradient(135deg,var(--selected),var(--subtle))}
.profile-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.profile-card .profile-identity{position:relative;align-items:flex-end;margin-top:-44px;padding:0 4px}
.profile-card .profile-photo{width:120px;height:120px;border:4px solid var(--surface);box-shadow:0 1px 3px rgb(0 0 0/.2)}
.profile-card .profile-name{padding-bottom:6px}
.cover-manage .cover-remove{margin:10px 0 0}
@media(max-width:560px){.profile-cover{margin:-16px -16px 0}.profile-card .profile-identity{flex-direction:column;align-items:center;text-align:center;margin-top:-56px}.profile-card .profile-photo{width:112px;height:112px}.profile-card .profile-name{padding-bottom:0}}
/* v1.5.0: the green "Active now" dot (kc/presence.py): on the round pictures in Messages' list and a private chat's heading
   (with "Active now" or "Active 12m ago" under the name), and on a profile's picture. */
.conversation-avatar{position:relative}
.conversation-avatar img,.chat-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.active-dot{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;background:#31a24c;box-shadow:0 0 0 2px var(--surface)}
.chat-avatar{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:bold 18px/1 var(--title-font,Georgia,serif)}
.chat-avatar .active-dot{display:none}
.chat-avatar.is-active .active-dot{display:block}
.chat-name{flex:1;min-width:0}
.chat-name h1{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-active{margin:0;color:var(--secondary);font-size:13px}
.chat-active:empty{display:none}
.profile-photo-box{position:relative;flex:none;display:block}
.profile-photo-box .active-dot{right:8px;bottom:8px;width:22px;height:22px;box-shadow:0 0 0 3px var(--surface)}
.active-now{color:var(--success);font-weight:600}
/* v1.5.0: link cards in posts and comments (link_card.html), and under the box while writing with × to drop them
   (link-previews.js), as on Facebook. */
.link-card{display:grid;margin:8px 0;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--subtle);color:var(--text);text-decoration:none}
.link-card:hover{background:var(--selected);text-decoration:none}
.link-card-image{display:block;width:100%;aspect-ratio:1.91/1;max-height:320px;object-fit:cover;background:var(--border)}
.link-card-text{display:grid;gap:2px;min-width:0;padding:10px 12px}
.link-card-site{color:var(--secondary);font-size:12px;letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
.link-card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--heading);font-size:16px;line-height:1.3}
.link-card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--secondary);font-size:14px}
.link-card-small{grid-template-columns:88px minmax(0,1fr)}
.link-card-small .link-card-image{height:100%;aspect-ratio:auto;max-height:none}
.link-card-small .link-card-title{font-size:15px}
.link-preview-box{margin:6px 0}
.link-preview-draft{position:relative}
.link-preview-draft .link-card{margin:0}
.link-preview-remove{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(0 0 0/.55);color:#fff;font-size:24px;line-height:1;cursor:pointer}
/* v1.5.1: LARP Gameplay (gameplay_menu.html) folds open like Apps, in More and under Home in the side menu, with a
   branch for each kind of document and the documents under it. */
.gameplay-category>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--link,#245570);font-weight:bold}
.gameplay-category>summary::-webkit-details-marker{display:none}
.gameplay-category>summary::after{content:"▸";transition:transform .15s}
.gameplay-category[open]>summary::after{transform:rotate(90deg)}
.gameplay-docs{display:grid;gap:6px;margin:6px 0 4px 10px;padding-left:10px;border-left:2px solid var(--border,#d8dfea)}
.gameplay-docs>a,.gameplay-all{overflow-wrap:anywhere}
.nav-dropdown .gameplay-category>summary{min-height:44px;box-sizing:border-box;padding:8px 14px;border:1px solid var(--border,#d8dfea);border-radius:8px;background:var(--surface,#fff)}
.nav-dropdown .gameplay-docs>a,.nav-dropdown .apps-links>a.gameplay-all{display:flex;align-items:center;min-height:44px;box-sizing:border-box;padding:8px 14px;border:1px solid var(--border,#d8dfea);border-radius:8px;background:var(--surface,#fff);color:var(--link,#245570);font-weight:bold}
.nav-dropdown .gameplay-docs>a[aria-current=page],.nav-dropdown .apps-links>a.gameplay-all[aria-current=page]{background:var(--accent,#3b5998);border-color:var(--accent,#3b5998);color:var(--on-accent,#fff)}
.sidebar nav .gameplay-menu{flex-basis:100%}
.sidebar nav .gameplay-category>summary{min-height:36px;padding:6px 4px;font-size:13px}
.sidebar nav .gameplay-docs>a,.sidebar nav .gameplay-all{display:block;min-height:0;padding:6px 4px;font-size:13px;line-height:1.35}
.sidebar nav .gameplay-docs>a[aria-current=page],.sidebar nav .gameplay-all[aria-current=page]{font-weight:bold}
/* The pop-up box (gameplay_viewer.html): a card over the dimmed page on a computer, the whole screen on a phone; its
   bar stays at the top with the PDF, the magnifier and × in the upper right, and the search opens under them. */
html.doc-open{overflow:hidden}
.doc-viewer{width:min(920px,calc(100vw - 32px));height:calc(100dvh - 48px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 18px 70px #0006;overflow:hidden;flex-direction:column;overscroll-behavior:contain}
.doc-viewer[open]{display:flex;transform-origin:var(--pop-origin,center);animation:kc-pop .52s cubic-bezier(.2,.9,.3,1.08) both}
@media(prefers-reduced-motion:reduce){.doc-viewer[open]{animation:kc-fade .3s ease-out both}}
.doc-viewer::backdrop{background:var(--backdrop,#17223ecc)}
.doc-viewer-bar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--border);background:var(--header-art,none) var(--header);color:var(--on-header)}
.doc-viewer-heading{flex:1;min-width:0}
.doc-viewer-heading .eyebrow{margin:0;color:inherit;opacity:.85;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.doc-viewer-heading h2{margin:2px 0 0;color:inherit;font:bold 19px/1.25 var(--title-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-viewer-tools{flex:none;display:flex;align-items:center;gap:6px}
.doc-viewer .doc-tool{flex:none;width:44px;height:44px;display:grid;place-items:center;box-sizing:border-box;padding:0;border:1px solid color-mix(in srgb,var(--on-header) 35%,transparent);border-radius:50%;background:color-mix(in srgb,var(--on-header) 12%,transparent);color:var(--on-header);text-decoration:none;cursor:pointer}
.doc-viewer .doc-tool:hover{background:color-mix(in srgb,var(--on-header) 24%,transparent)}
.doc-viewer .doc-tool[aria-expanded=true]{background:var(--on-header);color:var(--header)}
.doc-viewer .doc-tool[hidden]{display:none}
.doc-viewer .doc-tool:focus-visible,.doc-viewer .doc-step:focus-visible{outline:3px solid var(--on-header);outline-offset:2px}
.doc-tool svg,.doc-step svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.doc-search{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px 10px 20px;border-bottom:1px solid var(--border);background:var(--subtle)}
.doc-search[hidden]{display:none}
.doc-search .search-field{flex:1;min-width:0;display:flex}
.doc-search input{flex:1;min-width:0;min-height:42px;box-sizing:border-box;padding:8px 14px;border:1px solid var(--field-border,#778eb6);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:16px}
.doc-search-count{flex:none;min-width:5.5em;text-align:right;font-size:13px;color:var(--secondary)}
.doc-viewer .doc-step{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer}
.doc-viewer .doc-step:disabled{opacity:.45;cursor:default}
.doc-viewer .doc-step:focus-visible{outline-color:var(--focus)}
.doc-viewer-body{flex:1;min-height:0;overflow:auto;padding:8px clamp(18px,4vw,44px) 40px;outline:none;scroll-padding-top:12px}
.doc-message{padding:40px 0;text-align:center;color:var(--secondary)}
.doc-message button{margin-left:6px}
mark.doc-hit{background:#ffe36e;color:#1d1a10;border-radius:2px;padding:0 1px}
mark.doc-hit-current{background:#ff9d2e;outline:2px solid #b85c00;outline-offset:1px}
@media(max-width:640px){.doc-viewer{width:100%;height:100%;border:0;border-radius:0}.doc-viewer-bar{padding:8px 8px 8px 14px;gap:6px;padding-top:max(8px,env(safe-area-inset-top))}.doc-viewer-heading h2{font-size:16px}.doc-viewer .doc-tool{width:42px;height:42px}.doc-search{padding:8px 10px}.doc-search-count{min-width:0}}
/* A gameplay document (templates/gameplay/*.html), in the box or on its own page: book-like, in the theme's colors. */
.doc{max-width:760px;margin:0 auto;font-size:16px;line-height:1.65;overflow-wrap:anywhere}
.doc-cover{padding:22px 0 18px;margin-bottom:8px;border-bottom:2px solid var(--accent);text-align:center}
.doc .doc-kicker{margin:0;color:var(--secondary);font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.doc-cover h1{margin:8px 0 4px;color:var(--heading);font:bold clamp(26px,4.5vw,36px)/1.18 var(--title-font)}
.doc .doc-subtitle{margin:0;color:var(--secondary);font-style:italic}
.doc .doc-byline{margin:6px 0 0;color:var(--secondary)}
.doc .doc-lede{max-width:620px;margin:14px auto 0;font-size:17px}
.doc h2{margin:1.8em 0 .5em;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--heading);font:bold 23px/1.25 var(--title-font)}
.doc h3{margin:1.5em 0 .4em;color:var(--heading);font:bold 19px/1.3 var(--title-font)}
.doc h4{margin:1.2em 0 .3em;color:var(--heading);font-size:16px}
.doc p,.doc ul,.doc ol,.doc dl,.doc table,.doc blockquote,.doc aside{margin:0 0 .9em}
.doc ul,.doc ol{padding-left:1.4em}
.doc li{margin:.2em 0}
.doc a{color:var(--link)}
.doc-toc{display:block;margin:18px 0 8px;padding:14px 18px;border:1px solid var(--border);border-radius:10px;background:var(--subtle)}
.doc-toc a{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;font-size:inherit}
.doc .doc-toc h2{margin:0 0 6px;padding:0;border:0;font-size:17px}
.doc-toc>ol{margin:0;columns:2 220px;column-gap:28px}
.doc-toc li{break-inside:avoid}
.doc-toc ol ol{margin:.15em 0 .3em;padding-left:1em;list-style:none;font-size:14px}
.doc-section,.doc-entry{scroll-margin-top:12px}
.doc-entry{margin:0 0 1.2em}
.doc .doc-meta{margin:-.1em 0 .5em;color:var(--secondary);font-size:14px}
.doc-tag{display:inline-block;margin:0 2px;padding:1px 8px;border-radius:999px;background:var(--selected);color:var(--text);font-size:12px;font-weight:bold;vertical-align:middle}
.doc-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--subtle);border-radius:0 8px 8px 0}
.doc-facts dt{font-weight:bold;color:var(--heading)}
.doc-facts dd{margin:0}
.doc-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
.doc-table caption{caption-side:top;text-align:left;font-weight:bold;padding-bottom:6px;color:var(--heading)}
.doc-table th,.doc-table td{padding:6px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.doc-table thead th{border-bottom:2px solid var(--accent);color:var(--heading)}
.doc-table tbody th[scope=rowgroup]{padding-top:14px;background:var(--subtle);color:var(--heading)}
.doc-note{padding:10px 14px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;background:var(--subtle)}
.doc-note p:last-child{margin-bottom:0}
.doc-quote{margin-left:0;padding:6px 16px;border-left:3px solid var(--accent);font-style:italic}
.doc-quote p:last-child{margin-bottom:0}
@media(max-width:560px){.doc{font-size:15px}.doc-facts{grid-template-columns:1fr;gap:0}.doc-facts dd{margin-bottom:6px}.doc-table{font-size:13px}.doc-table th,.doc-table td{padding:5px 6px}}
/* The LARP Gameplay page (gameplay.html) and a document's own page (gameplay_document.html). */
.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;box-sizing:border-box;padding:8px 18px;border:1px solid var(--accent);border-radius:999px;background:var(--button-art,none) var(--accent);color:var(--on-accent);font-weight:bold;text-decoration:none}
.button-link.secondary{background:var(--surface);color:var(--link)}
.gameplay-list{list-style:none;margin:0;padding:0}
.gameplay-item{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 0;border-top:1px solid var(--border)}
.gameplay-item:first-child{border-top:0;padding-top:4px}
.gameplay-item h3{margin:0 0 4px;font-size:17px}
.gameplay-item p{margin:0;color:var(--secondary)}
.gameplay-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.gameplay-item .gameplay-actions{flex:none}
@media(max-width:640px){.gameplay-item{flex-direction:column;align-items:stretch}.gameplay-item .gameplay-actions>a{flex:1}}
.gameplay-page{padding:clamp(14px,3vw,28px)}
/* The character sheet (character.html, character_form.html; kc/character_rules.py). */
.sheet-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sheet-heading h2{margin:0}
.sheet-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px;margin:14px 0 6px}
.sheet-facts>div{min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--subtle)}
.sheet-facts dt{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--secondary)}
.sheet-facts dd{margin:3px 0 0;font-weight:bold;overflow-wrap:anywhere}
.sheet-facts .quiet,.sheet-note{font-weight:normal}
.sheet-note{display:block;margin-top:2px;font-size:13px;color:var(--secondary)}
.character-sheet h3{margin:22px 0 8px;color:var(--heading)}
.sheet-class-name{margin:12px 0 4px}
.sheet-tokens{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:8px 0 0;padding:0}
.sheet-tokens li{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--subtle)}
.sheet-tokens strong{font-size:24px;line-height:1.1;color:var(--heading)}
.sheet-tokens span{font-size:12px;color:var(--secondary)}
.sheet-ability-list{list-style:none;margin:0;padding:0}
.sheet-ability-list>li{padding:8px 0;border-bottom:1px solid var(--border)}
.sheet-ability-list>li:last-child{border-bottom:0}
.sheet-meta{color:var(--secondary);font-size:13px;font-weight:normal}
.sheet-summary{display:block;font-size:14px;color:var(--text)}
.sheet-rules{margin-top:18px}
.character-sheet-form .sheet-panel h2{margin-top:0}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px 22px}
.sheet-field{min-width:0}
.sheet-field.sheet-wide{grid-column:1/-1}
.sheet-hint{margin:5px 0 0;font-size:13px;padding:0}
.sheet-level{margin:0 0 14px}
.sheet-abilities{margin:14px 0 0;padding:6px 14px 4px;border:1px solid var(--border);border-radius:10px;min-width:0}
.sheet-abilities[hidden]{display:none}
.sheet-ability-sets{display:flex;flex-direction:column}
.sheet-abilities[data-role=first]{order:-2}
.sheet-abilities[data-role=second]{order:-1}
.sheet-abilities legend{padding:0 6px;font-weight:bold;color:var(--heading)}
.profile-form .sheet-check{display:flex;align-items:flex-start;gap:10px;margin:0;font-weight:normal;cursor:pointer}
.profile-form .sheet-check input[type=checkbox]{flex:none;width:22px;height:22px;margin:2px 0 0}
.sheet-check:has(input:disabled){opacity:.55;cursor:default}
.sheet-professions{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px 18px;margin-top:10px}
.sheet-profession label{margin-bottom:4px}