/* The GM Portal's one stylesheet, in the game's own dress: its lettering, the
   pink of its tab bar, the sky of its first world behind everything, cream
   overlays with a maroon title bar and a gold line, the striped rows of its
   table, its notice board and its pixel buttons. The art and the game's font
   were cut out of the original client's atlases, as the landing page's were
   (docs/homepage.md), and are the console's own files beside IBM Plex (SIL
   Open Font License, fonts/OFL.txt), which writes ids, times and documents,
   and the letters the game's font has none of. Nothing is loaded from another
   host, and no page carries a style of its own: the pages' headers forbid it.

   Design tokens (custom properties on :root)
     --pink, --pink-deep, --cream, --cell, --paper  the game's pink, its overlay, a row of its table, a field's ground
     --maroon, --gold, --navy, --frame, --board     the title bar, the line under it, the board, the two frames
     --ink, --name, --dim, --soft                   text on cream, from the loudest to the quietest; --soft follows the ground
     --rule, --line-field                           a dashed rule on cream, the edge of a field
     --outline                                      the dark edge of white lettering
     --ok, --warn, --bad, --neu, --violet, --sky    the lamps of pills, and the colours of notes and bars
     --game, --mono                                 the game's font, and IBM Plex Mono
     --radius-s, --control, --side-width, --gap

   The classes a page is built from, each under its heading below:
     .shell / .side / .topbar / .main      the frame: a sidebar, or a bar with a .menu when narrow
     .bare                                 the frame of a page nobody is signed in for
     .skip                                 the link that skips to the content
     .brand (-logo), .nav, .nav-label, .env, .who   what the sidebar holds
     .icon                                 an inline SVG, 18px, drawn in the colour of its text
     .page-head, .page-title, .page-sub, .page-actions  the heading of a page, its one line and its actions
     .card (-narrow, -flush, -development), .card-head, .card-body, .card-foot, .cards
                                           an overlay of the game: cream, with a title bar where it has a heading strip
     .kpis / .kpi                          a row of key numbers, each a row of the game's table
     .stats / .stat                        a few numbers inside a card
     .pill (-ok, -warn, -bad, -neu, -pink, -gold, -violet); .badge (-ok, -warn, -danger) is the same
     .rows / .row-item (.row-link)         a list of things with a pill, a name and a time; a row may be a link
     .tabs                                 the game's tab buttons, each a link; the one that is open stands up
     .tiles / .tile                        small boxes of a label and an amount
     .facts / .fact, .defs                 a name and what is known under it, in a grid or a list
     .history                              a list of moments: a time and what happened
     .split (.split-list, .split-detail, .split-even)   a list beside what is selected in it
     .is-selected, .is-open                the row that is open, and what is open beside the list
     .part                                 a topic inside a card that has several
     .stack                                pieces set under one another, evenly apart
     .avatar (-large)                      the initial of a name in a square
     .person (-text, -name)                someone in a list: her initial, her name and what she is known as
     .toolbar, .search, .chips / .chip (.chip-clear)   one line that finds things, and choices that narrow a list
     .casefile                             one player: the list, the case and what is looked up, side by side
     .queue (-head, -list, -count)         the list, narrow, as the game's board with a row for each player
     .case (-empty), .who-head, .glance, .banner   who is open, what is known at a glance, and her ban
     .composer, .modes, .composer-body     the one form that does everything to an account, and its modes
     .feed (.feed-dot, .feed-text), .delta the timeline: what happened to the account, and what moved
     .ref, .wallet                         what is looked up while working: the wallet and the cards under it
     .ico (-small, -large, -huge, -pixel), .i-…   one of the game's pictures, placed by a class the art tool writes
     .stars, .badge-row, .tile (-large, -0 to -4)  the stars of a rarity, a row of the gallery's badges, a slot's colour
     .inv-parts, .inv-controls             the parts of the inventory, and what narrows the part that is shown
     .bag, .inspect (-top), .over-note     the inventory: its grid, and the piece that is open beside it
     .slots / .slot (-level, -worn, -name, -badge, -group)   a slot for every piece, with its level and whether it is worn
     .hslots / .hslot (-head, -pair)       a hero with the weapon and the armour she carries
     .mcards / .mcard (-name), .portrait   the gallery: a card for each Moetan, and her picture where she is open
     .desk, .write                         the mail: the mailbox, and the mail that is being written beside it
     .mails / .mail (-gift, -title, -what, -side)   a mail as the game lists one, with what it carries and whether it waits
     .gift-pick (.gift-groups, .gift-panel), .gifts  the gift of a mail, chosen from pictures, a group at a time
     .from (.from-other)                   who a mail is from: a choice, and the box for someone else
     .snap-desk, .snap-rows, .snap-open    the snapshots: the list, and the one that is open beside it
     .take (.take-help)                    the form that takes a snapshot: a label and a button on one line
     .cmp (.is-diff), .cmp-sum             a snapshot beside the account as it is, with what differs marked
     .quote                                what a player wrote in the bug report a snapshot came with
     .restore-zone, .safety                the one dangerous thing of a tab in a red frame, and its way back in green
     .timeline, .bar (.from-N, .to-N)      four weeks, a bar for each thing with a window
     .lanes / .lane (-head, -name, -top, -add, -weeks, -track, -none), .bar-always, .legend
                                           the schedule: a lane for each kind of thing, and what its bars mean
     .pop (-head, -facts, -note)           what is known of a bar, opened where the bar is
     .stamps / .stamp (-day, -vip, -acts)  the daily login board, a stamp for each day
     .create (-form, -grid)                the form that makes an event, in the schedule's place
     .gal, .mc-tier (.t2 .t3 .t4 .t5), .mc-flag, .sheet (-pills), .edits / .edit, .spirit-stats, .fold-in
                                           the Moetans: the gallery, and the sheet of the one that is open
     .ed-field, .ed-fold, .ed-grid, .was   a field of a sheet that is edited, and what the data files ship
     .rel-line, .rel-weeks, .rel-track, .rel-pin (.day-N)   who comes out in the next eight weeks
     .nw-kpis / .nw-kpi, .nw-split, .nw-bar, .nw-years, .nw-yrs / .nw-yr (.nw-hN)   the notices in numbers: by state, by type, by year
     .nw-desk, .nw-col, .nw-mid, .nw-side, .nw-box   the desk of the notices: the list, the notice, and what is known of it
     .nw-search, .nw-filter, .nw-list, .nw-year, .nw-row, .nw-thumb (.has), .nw-rt, .nw-rd, .nw-dot (.t-news .t-promotion .t-releasenote), .nw-count, .nw-none   the list of the notices
     .nw-toolbar, .nw-seg, .nw-read, .nw-banner, .nw-nobanner, .nw-kicker, .nw-text, .nw-written, .nw-stack, .nw-near   a notice as it is read
     .nw-form, .nw-preview, .nw-ai   a notice as it is written, and the box that drafts its message
     .rp-kpis (.rp-alarm), .rp-health, .rp-attn, .rp-what, .rp-key (.rp-k1 .rp-k2), .rp-week (.rp-b1 .rp-b2), .rp-axis, .rp-tabs   the reports in numbers, what needs attention, and the week
     .rp-dot (.s-open .s-in_progress .s-resolved), .rp-who, .rp-ava (.rp-none), .rp-quote, .rp-h, .rp-thread, .rp-event   a bug report in the list and as it is read, and its notes
     .rp-order, .rp-erow, .rp-spark, .rp-said, .rp-big, .rp-hours   a group of errors in the list and as it is read
     .gd-nav, .gd-raw, .gd-view (.gd-indexed), .gd-index, .gd-main, .gd-side, .gd-sub, .gd-kinds   the page of the game data: what is tuned, the page, and the one thing that is open
     .gd-shelf, .gd-prod, .gd-pic, .gd-in, .gd-says, .gd-tag, .gd-ribbon, .gd-edited   the shop's shelf of products
     .gd-days (.gd-read), .gd-day, .gd-d, .gd-vip (.gd-none)   the days of the daily login board
     .gd-group, .gd-ghead, .gd-sec, .gd-sum, .gd-tiles (.gd-words), .gd-tile (.gd-off .gd-changed), .gd-flag, .gd-note, .gd-curve, .gd-axis, .gd-levels, .gd-steps, .gd-step, .gd-list   the rules in groups: tiles, the price of a level as a curve, and steps
     .gd-sechead, .gd-arts, .gd-art, .gd-rar (.gd-r0 .gd-r1 .gd-r2 .gd-r3), .gd-eff (.gd-lowers), .gd-cap, .gd-bar (.gd-endless), .gd-eq, .gd-piece, .gd-heroes, .gd-hero, .gd-pair   the gear: artifacts, equipment and each hero's pieces
     .gd-panel, .gd-pin, .gd-crumb, .gd-phead, .gd-about, .gd-num, .gd-unit, .gd-was, .gd-save, .gd-h, .gd-act, .gd-order, .gd-arrange, .gd-boardacts   the one thing that is open, with what is changed of it
     .au-filters, .au-who, .au-quiet, .au-book, .au-lines, .au-line (.is-quiet .is-open), .au-time, .au-what, .au-x, .au-say, .au-on   the audit log as a day book: a title bar for each day and a line for each entry
     .au-drop, .au-cmp, .au-old, .au-new, .au-facts, .au-raw   an entry opened in place: before and after, the rest of its details, as stored
     .gb-shelf / .gb-banner (.is-free), .gb-new, .gb-window, .gb-icons, .gb-prices, .gb-pills, .gb-body, .gb-gives   the gacha banners as cards, and the one that is open
     .gb-machines / .gb-machine, .gb-price   the machines of a banner, each with its price
     .gb-pool (-head), .gb-bar / .gb-part (.p1 .p2 .p3 .p4 .p5 .p6), .gb-legend, .gb-key   a pool, and how its chances are divided among the kinds
     .gb-kind, .gb-items / .gb-item, .gb-name, .gb-chance   the prizes of a pool, in kinds
     .gb-edit, .gb-table, .gb-save, .is-typed, .is-wrong   a pool as one form of rates
     .studio, .st-values, .st-middle, .st-stage, .st-timeline, .st-assets   the studio of a Moetan: values, stage and timeline, pictures
     .st-screen, .st-poster, .st-canvas, .st-transport, .st-scrub, .st-check, .st-note   the stage and what plays it
     .st-levels / .st-level, .st-body, .st-trigger   the outlines of an animated scene
     .st-clips / .st-clip (-name, -facts), .st-track, .st-bar (.len-N), .is-playing   the animations on the timeline
     .st-pictures / .st-picture, .st-chosen (-picture)   the pictures of a pack, and the one chosen
     .st-tracks, .st-hint, .st-sides, .st-node, .st-fields / .st-field   the tracks that play, and the form of a node of the scene
     .st-layers / .st-layer (-kind, .k-sprite, .k-node, .depth-N, .is-hidden)   the nodes of a scene, as layers
     .st-motions / .st-motion (-form), .st-slider (.is-none), .st-parts, .st-lanes, .st-play, .st-more (-in)   the animations of the boss scene, and the form that changes one
     .vo-groups / .vo-group, .vo-clips / .vo-clip, .vo-name   the voices of a Moetan in their groups, each with its player
     .sc-waiting, .sc-stack, .sc-drawn, .sc-over, .is-off   the stage of an animated scene: her skeleton drawn, and the areas over it
     .st-modes, .st-zoom, .st-level-side, .st-places / .st-place (-whole), .st-move, .st-how, .st-part   a level of the boss scene: its touch areas and its picture
     .upload (-now, -none, -how, -drop, -title, -hint, -button, -pick)
                                           a picture to upload: the one there is, and the box that takes a file
     .picker (-chosen, -add)               players chosen for something, and the box that suggests one more
     .desk-page, .audience (.aud-panel), .preset-list / .preset (-name, -what, -count), .match, .when, .paste
                                           who a mail of the mailbox is to: players, a ready-made group or everyone
     .modal (-wide, -in, -head)            a window that opens over a page: one that asks first, or one to choose in
     .pick (-side, -find, -count, -list, -item, -look, -large, -name), .link   the chooser of a picture: the pictures, and the one looked at; a button that reads as a link
     .combo (-list, -option, -none)        a box that suggests while it is typed in, and its list in the console's dress
     progress.rate                         a share shown as a bar
     .empty                                an empty state: what is missing and why
     .field (-wide, -check), .help, .check, .group, .row, .pair, .filters, .seg, .seg-date
                                           the fields of a form
     .btn (-primary, -secondary, -danger, -small, -off), .actions, .action-grid
     .note (-success, -error, -warning, -info)         a message
     .table in .table-wrap, .num, .pager
     .fold                                 a <details> that keeps a long document folded away
     pre.code, code, .mono                 a document or an id shown in the mono font
     .lbl, .lead, .muted, .hidden-label    a small label, an opening line, a quiet text, a label only read out
     .prose, .shot, .preview, .gift        what someone wrote, a picture, a notice or a mail as shown
     .one-time-link                        an invitation, shown once */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "AoM"; font-display: swap; src: url("../fonts/aom.otf") format("opentype"); }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

:root {
  color-scheme: light;
  --pink: #F54399;
  --pink-deep: #A3185F;
  --cream: #FFECC9;
  --cell: #FFDECE;
  --paper: #FFF6E2;
  --maroon: #6C1D1D;
  --gold: #FFB52C;
  --navy: #16314F;
  --frame: #3F3233;
  --board: #3D2208;
  --ink: #2A1512;
  --name: #5A2416;
  --dim: #6B4A3F;
  --soft: #E6EEF8;
  --rule: #E3C4A0;
  --line-field: #C98F6B;
  --outline: #1A1014;
  --ok: #3FA81C;
  --warn: #FFB400;
  --bad: #E92142;
  --neu: #9AA3AD;
  --violet: #A54DE0;
  --sky: #5B8FBF;
  --game: "AoM", "IBM Plex Sans", ui-rounded, "Trebuchet MS", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-s: 6px;
  --control: 2.5rem;
  --side-width: 12.5rem;
  --gap: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; background: var(--sky); }

/* The sky of the game's first world behind everything, dimmed so that the work reads. */
body { margin: 0; min-height: 100vh; background: linear-gradient(rgba(20, 8, 24, .6), rgba(20, 8, 24, .6)), var(--sky) url("../img/sky.jpg") center / cover; background-attachment: fixed; color: #FFF; font: 400 1rem/1.4 var(--game); }

h1, h2, h3, h4, strong, b, th, dt, legend, summary, button { font-weight: 400; }
h1 { margin: 0; font-size: 2rem; line-height: 1.1; letter-spacing: .5px; overflow-wrap: anywhere; }
h2 { margin: 0 0 .625rem; font-size: 1.25rem; line-height: 1.2; }
h3 { margin: 1.25rem 0 .5rem; font-size: 1.0625rem; line-height: 1.2; }
p { margin: 0 0 .75rem; }
ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
a { color: #FFE08A; }
a:hover { color: #FFF; }
strong { color: var(--name); }
img { max-width: 100%; }

:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; box-shadow: 0 0 0 6px #000; border-radius: 4px; }

/* White lettering with a dark edge, as on the game's HUD and buttons. */
h1, .nav a, .nav-label, .btn, .pill, .badge, .avatar, .chip, .tabs a, .delta, .glance div, .who-head strong, .bar, .seg label:has(input:checked) {
  text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline), 0 2px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 -2px 0 var(--outline);
}

.skip { position: absolute; left: .5rem; top: -5rem; z-index: 10; padding: .6rem 1rem; background: #FFF; color: var(--maroon); border: 3px solid var(--maroon); }
.skip:focus { top: .5rem; }

.icon { flex: none; display: block; }
.mono, code, pre.code, .field textarea.code { font-family: var(--mono); }
.mono, code { font-size: .75rem; }
.lbl { font-size: .8125rem; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
.lead, .muted, .help { color: var(--soft); }
.hidden-label { position: absolute; left: -9999px; }

/* -- the frame: a sidebar, or a bar with a menu where the screen is narrow ------ */

.shell { display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr); min-height: 100vh; }
.side { --outline: #8F1F3C; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: .875rem; padding: .75rem .625rem; background: var(--pink); box-shadow: 3px 0 0 rgba(120, 10, 70, .45); }
.topbar { display: none; }
.brand { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .125rem .25rem; color: #FFD0E6; text-decoration: none; }
.brand:hover { color: #FFF; }
.brand-logo { display: block; width: 100%; max-width: 13rem; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .55)); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.nav a { display: flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .25rem .75rem 0; border-radius: 8px; color: #FFF; text-decoration: none; font-size: 1.0625rem; }
.nav a:hover { background: rgba(255, 255, 255, .2); color: #FFF; }
.nav a[aria-current="page"] { background: var(--cream); color: var(--maroon); text-shadow: none; box-shadow: 0 3px 0 rgba(120, 10, 70, .45); }
.nav-label { display: block; margin: .875rem 0 .25rem; padding: 0 .75rem; color: #FFD0E6; opacity: 1; }
.env { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; padding: .625rem .75rem; border-radius: 9px; background: rgba(90, 10, 50, .45); }
.env-note { font-size: .8125rem; color: #FFD0E6; }
.who { display: flex; flex-direction: column; gap: .5rem; padding: 0 .25rem; }
.who-name { margin: 0; font: .75rem var(--mono); color: #FFF; overflow-wrap: anywhere; }

.main { --soft: #E6EEF8; min-width: 0; width: 100%; max-width: 110rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--gap); padding: 1.25rem 1.25rem 3rem; }
.main > * { margin-top: 0; margin-bottom: 0; }
.bare { display: block; }
.bare .main { margin: 0 auto; max-width: 32rem; padding: 3rem 1rem; }
.bare .brand { margin-bottom: .5rem; }
.bare .brand-logo { max-width: 22rem; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.page-title { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.page-sub { margin: 0; color: #FFF; text-shadow: 0 1px 2px #000, 0 0 8px #000; }
/* On the page of one player her name heads the case, so the heading of the page is only read out. */
.main:has(.case.is-open) > .page-head { position: absolute; left: -9999px; }
.page-actions { display: flex; flex-wrap: wrap; gap: .625rem; }

.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: var(--control); padding: .125rem .875rem 0; border-radius: 8px; background: var(--cream); color: var(--maroon); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }

@media (max-width: 56rem) {
  .shell { display: block; }
  .side { display: none; }
  .topbar { --outline: #8F1F3C; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; background: var(--pink); box-shadow: 0 3px 0 rgba(120, 10, 70, .45); }
  .topbar .brand { flex-direction: row; }
  .topbar .brand-logo { max-width: 9rem; }
  .menu[open] { flex-basis: 100%; order: 3; }
  .menu[open] > summary { margin-bottom: .75rem; }
  .menu .env { margin-top: 1rem; }
  .menu .who { margin-top: 1rem; flex-direction: row; align-items: center; justify-content: space-between; }
  .main { padding: 1rem .75rem 2.5rem; }
  h1 { font-size: 1.625rem; }
  .split > .is-open { order: -1; }
}

/* -- cards: an overlay of the game ------------------------------------------------ */

.card { --soft: var(--dim); min-width: 0; padding: 1rem 1.125rem; background: var(--cream); color: var(--ink); border: 4px solid var(--frame); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.card a { color: #9A1036; }
.card a:hover { color: #C2185B; }
.card h2, .card h3 { color: var(--maroon); }
.card > :last-child, .card form > :last-child, .card-body > :last-child { margin-bottom: 0; }
.card > .actions:last-child, .card form > .actions:last-child { margin-bottom: 0; }
.card-narrow { width: 100%; max-width: 36rem; }
.card-development { border-style: dashed; }
.card-flush { padding: 0; display: flex; flex-direction: column; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .125rem .75rem; margin-top: .5rem; padding: .3125rem 1rem .125rem 1.375rem; background: var(--maroon); border-bottom: 4px solid var(--gold); color: #FFD9A8; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.3125rem; letter-spacing: .5px; color: #FFF; }
.card-head a, .card-head a:hover { font-size: .875rem; color: #FFD9A8; }
.card-head .lbl { opacity: 1; text-transform: none; letter-spacing: 0; }
.card-body { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.card-body > * { margin-top: 0; margin-bottom: 0; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .625rem; padding: .875rem 1.125rem; border-top: 2px dashed var(--rule); }
.card-flush > .table-wrap { margin: 0; }
.card-flush > .muted, .card-flush > .pager { margin: 0; padding: .75rem 1.125rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.cards .card { display: flex; flex-direction: column; }
.cards .card .actions { margin-top: auto; padding-top: .5rem; }

/* -- numbers ------------------------------------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1rem; margin: 0; }
.kpi { --soft: var(--dim); display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem .5rem; border: 4px solid var(--pink); background: var(--cell) url("../img/cell.png") center / 100% 100%; color: var(--name); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.kpi dt { order: 0; color: var(--maroon); }
.kpi dd { margin: 0; }
.kpi-number { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-number a, .stat dd a { color: inherit; text-decoration: none; }
.kpi-number a:hover, .stat dd a:hover { color: #C2185B; }
.kpi-note { font-size: .8125rem; color: var(--dim); }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .625rem; margin: 0 0 1rem; }
.stat, .tile { padding: .5rem .75rem .375rem; background: var(--paper); border: 2px solid var(--rule); border-radius: 8px; }
.stat dt { font-size: .8125rem; color: var(--dim); }
.stat dd { margin: 0; font-size: 1.375rem; color: var(--name); font-variant-numeric: tabular-nums; }

.pill, .badge { --lamp: var(--neu); display: inline-flex; align-items: center; gap: .4375rem; padding: .1875rem .625rem .0625rem .5625rem; border-radius: 9px; background: rgba(38, 48, 60, .88); color: #FFF; font-size: .875rem; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.pill::before, .badge::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
.pill-ok, .badge-ok { --lamp: #3FC41C; }
.pill-warn, .badge-warn, .pill-gold { --lamp: var(--warn); }
.pill-bad, .badge-danger { --lamp: #FF2A4A; }
.pill-pink { --lamp: var(--pink); }
.pill-violet { --lamp: var(--violet); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .625rem; margin: 0; }
.tile { display: flex; flex-direction: column; min-width: 0; }
.tile dt { overflow-wrap: anywhere; }
.tile dd { margin: 0; font-size: 1.125rem; color: var(--name); overflow-wrap: anywhere; }

/* -- lists of things with a state ------------------------------------------------ */

.rows { list-style: none; margin: 0; padding: 0; }
.row-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .25rem .75rem; padding: .625rem 1.125rem .5rem; border-bottom: 2px dashed var(--rule); color: var(--ink); text-decoration: none; }
a.row-item:hover { background: #FFE1B0; color: var(--ink); }
.rows > li:last-child, .rows > li:last-child > .row-item { border-bottom: 0; }
.row-item.is-selected { background: #FFE1B0; }
.row-item.row-link { display: flex; flex-wrap: wrap; }
.row-link > .row-text { flex: 1 1 9rem; }
.row-link .row-when { max-width: none; text-align: left; }
.row-item > .pill:first-child { min-width: 5.5rem; }
.row-text { min-width: 0; display: flex; flex-direction: column; }
.row-name { color: var(--name); font-size: 1.0625rem; line-height: 1.25; overflow-wrap: anywhere; }
.row-kind { font-size: .8125rem; color: var(--dim); overflow-wrap: anywhere; }
.row-when { max-width: 10.5rem; font: .75rem var(--mono); color: var(--dim); text-align: right; }
.row-item > a { font-size: .875rem; }
@media (max-width: 36rem) {
  .row-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .row-item > .row-when { grid-column: 2 / 3; grid-row: 2; max-width: none; text-align: left; }
  .row-item > a { grid-column: 3; grid-row: 1; }
}

.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.history li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.history time, .history .history-time { flex: none; min-width: 9.5rem; font: .75rem/1.9 var(--mono); color: var(--dim); }
.history span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

/* -- facts: a name and what is known under it ------------------------------------ */

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .625rem 1.5rem; margin: 0 0 1rem; }
.fact dt, .defs dt { font-size: .875rem; color: var(--dim); }
.fact dd { margin: 0; overflow-wrap: anywhere; }
.defs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .875rem; margin: 0 0 1rem; }
.defs dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

/* -- a list beside what is selected in it ---------------------------------------- */

.split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.split-list { flex: 2 1 22rem; min-width: 0; }
.split-detail { flex: 3 1 28rem; min-width: 0; }
.split-even > .split-list { flex: 3 1 26rem; }
.split-even > .split-detail { flex: 2 1 22rem; }
.avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; padding-top: 2px; border: 2px solid #FFF; border-radius: 6px; background: var(--pink); box-shadow: 0 0 0 2px var(--outline); color: #FFF; font-size: 1.125rem; line-height: 1; }
.avatar-large { width: 3.625rem; height: 3.625rem; border-width: 3px; border-radius: 9px; font-size: 2rem; }
.person { display: flex; align-items: center; gap: .75rem; min-width: 0; text-decoration: none; }
.person-text { display: flex; flex-direction: column; min-width: 0; }
.card .person-name, .queue .person-name { color: var(--name); font-size: 1.0625rem; line-height: 1.2; overflow-wrap: anywhere; }
.person .mono { color: var(--dim); }
.person:hover .person-name { color: #C2185B; }

/* -- finding: one line with a box to type in and the choices beside it ------------ */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.25rem; padding: .75rem; }
.search { flex: 1 1 18rem; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.search input { flex: 1 1 auto; min-width: 0; height: var(--control); padding: 2px .625rem 0; background: #FFF; color: var(--ink); border: 3px solid var(--line-field); border-radius: var(--radius-s); font: inherit; }
.search input::placeholder { color: #B39A8C; }
.search input:focus-visible { outline: 0; box-shadow: none; border-color: var(--pink); border-radius: var(--radius-s); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.chips > .lbl { margin-right: .125rem; }
.chip, .card a.chip { display: inline-flex; align-items: center; min-height: 1.875rem; padding: 2px .75rem 0; border-radius: 9px; background: rgba(38, 48, 60, .85); color: #FFF; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.chip:hover { filter: brightness(1.3); color: #FFF; }
.chip[aria-current="true"], .card a.chip[aria-current="true"] { --outline: #7A4A00; background: var(--gold); color: var(--ink); }
.chip-clear { font-size: .875rem; }

/* -- one player: the list, the case and what is looked up -------------------------- */

.casefile { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr) 19.5rem; align-items: start; gap: 1rem; }
.queue { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); min-width: 0; display: flex; flex-direction: column; padding: 6px; border: 3px solid var(--board); outline: 3px solid #DA8530; outline-offset: -6px; background: var(--board); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.queue-head { display: flex; flex-direction: column; gap: .5rem; padding: .625rem; background: #6D1C1C; border-bottom: 4px solid #CC9922; }
.queue-head .search { flex: none; }
.queue-head .chips { gap: .25rem; }
.queue-head .chips > .lbl { flex: 1 0 100%; color: #FFD9A8; opacity: 1; font-size: .75rem; }
.queue-head .chip { flex: 1; justify-content: center; min-height: 1.75rem; padding-left: .25rem; padding-right: .25rem; font-size: .875rem; }
/* The list always shows its scroll bar, in the board's own colours, and keeps the room for it:
   the rows stand as far from it as from the other edge. */
.queue-list { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; list-style: none; margin: 0; padding: .5rem .825rem .5rem .5rem; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.queue-list::-webkit-scrollbar { width: 14px; }
.queue-list::-webkit-scrollbar-track { background: #0D1522; border-left: 2px solid var(--board); }
.queue-list::-webkit-scrollbar-thumb { background: #DA8530; border: 3px solid #0D1522; border-left-width: 5px; border-radius: 8px; }
.queue-list::-webkit-scrollbar-thumb:hover { background: var(--gold); }
@supports not selector(::-webkit-scrollbar) { .queue-list { scrollbar-color: #DA8530 #0D1522; } }
.queue-list li, .feed li { border: 3px solid var(--pink); background: var(--cell) url("../img/cell.png") center / 100% 100%; color: var(--ink); }
.queue-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem .5rem .25rem; }
.queue-list li.is-selected, .feed li.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px #FFF; }
.queue-list .person { flex: 1 1 auto; }
.queue-list .person-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-list .pill { flex: none; padding: .25rem; gap: 0; font-size: 0; background: none; }
.queue-list time { flex: none; font: .75rem var(--mono); color: var(--dim); }
.queue-count { display: flex; justify-content: space-between; gap: .5rem; margin: 0; font-size: .8125rem; color: #FFD9A8; }
.queue-count a { color: #FFF; }
.case-empty { grid-column: 2 / -1; }
.queue > .muted { margin: 0; padding: 1rem; background: var(--navy); color: #FFF; }
.queue > .pager { padding: .5rem; background: #6D1C1C; border-top: 4px solid #CC9922; justify-content: space-between; }
.queue .pager-page { color: #FFD9A8; }

/* The case is a container: what a tab lays side by side is stacked by the room the case
   has, which the sidebar and the list take from, and not by the width of the window. */
.case { container: case / inline-size; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.who-head { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; }
.who-head > div:first-of-type { flex: 1 1 12rem; min-width: 0; }
.who-head strong { display: inline; margin-right: .625rem; color: #FFF; font-size: 2rem; line-height: 1.1; letter-spacing: .5px; overflow-wrap: anywhere; }
.who-head .mono { display: block; margin-top: .1875rem; font-size: .8125rem; color: var(--soft); text-shadow: 0 1px 2px #000; overflow-wrap: anywhere; }
.glance { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.glance div { --outline: #3A0B2A; min-width: 5.25rem; padding: .3125rem .875rem .125rem; border-radius: 9px; background: rgba(38, 48, 60, .72); }
.glance dt { font-size: .8125rem; line-height: 1.2; color: #FF9BD3; text-transform: none; letter-spacing: 0; opacity: 1; }
.glance dd { --outline: #1A1014; margin: 0; font-size: 1.1875rem; line-height: 1.2; color: #FFF; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .625rem .875rem .5rem; border: 4px solid #D3122F; background: #FDB2B5 url("../img/cell-half.png") center / 100% 100%; color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.banner p { flex: 1 1 16rem; margin: 0; }
.banner-warning { border-color: #CC9922; background-color: #FFE7A8; background-image: none; }

.composer { --soft: var(--dim); background: var(--cream); color: var(--ink); border: 4px solid var(--frame); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.composer.is-risky { border-color: #8F1026; }
.modes { margin-top: .5rem; padding: .375rem .625rem 0; background: var(--maroon); border-bottom: 4px solid var(--gold); }
.modes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .25rem; }
.modes a { display: block; margin-bottom: -4px; padding: .375rem .625rem .4375rem; border-radius: 7px 7px 0 0; color: #FFD9A8; font-size: 1.0625rem; text-decoration: none; white-space: nowrap; }
.modes a:hover { color: #FFF; }
.modes a[aria-current="true"] { background: var(--cream); color: var(--maroon); }
.modes .modes-risky a { color: #FF9AA8; }
.modes .modes-risky a[aria-current="true"] { color: #C2102B; }
.modes .modes-end { margin-left: auto; }
.composer-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: 1rem; }
.composer-body > p, .composer-body > .note { flex: 1 1 100%; margin: 0; }
.composer-body .field, .composer-body .group { flex: 1 1 9rem; margin: 0; max-width: none; }
.composer-body .field-wide { flex: 3 1 15rem; }
.composer-body .group { flex: 1 1 100%; padding-bottom: .75rem; }
.composer-body .group .field { margin-top: .625rem; }
.composer-body .actions { margin: 0; }
.composer-foot { display: flex; align-items: center; gap: .625rem; margin: 0; padding: 0 1rem .75rem; font-size: .875rem; color: var(--dim); }
.composer-foot img { flex: none; width: 1.875rem; image-rendering: pixelated; }

.feed { list-style: none; margin: 0; padding: .625rem; display: grid; gap: 6px; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.feed li { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; align-items: center; gap: 0 .75rem; padding: .5rem .875rem .375rem; }
.feed-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--neu); box-shadow: 0 0 0 2px var(--outline); }
.feed-money { background: #3FC41C; }
.feed-admin { background: var(--pink); }
.feed-shop { background: var(--gold); }
.feed-pull { background: var(--violet); }
.feed-text { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.feed-text > span:first-child { color: var(--name); font-size: 1.0625rem; line-height: 1.25; }
.feed-text small { font-size: .8125rem; color: var(--dim); }
.feed time, .feed .feed-time { font: .75rem var(--mono); color: var(--dim); white-space: nowrap; }
.feed-empty { margin: 0; padding: 1.25rem; background: var(--navy); color: #FFF; }
.delta { display: inline-block; padding: .125rem .5rem 0; border-radius: 6px; color: #FFF; font-size: .875rem; white-space: nowrap; }
.delta-up { --outline: #1B4D0C; background: var(--ok); }
.delta-down { --outline: #5A0A1C; background: var(--bad); }

.ref { min-width: 0; display: flex; flex-direction: column; gap: .875rem; }
.ref .card-body { padding: .625rem .875rem; gap: .625rem; }
.ref .facts { grid-template-columns: auto minmax(0, 1fr); gap: .25rem .875rem; margin: 0; }
.ref .fact { display: contents; }
.ref .fact dd { text-align: right; }
.ref .table th, .ref .table td { padding: .375rem .5rem .25rem; }
.ref h3 { margin: .375rem 0 0; font-size: .9375rem; }
.wallet { list-style: none; margin: 0; padding: 0; }
.wallet li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto 1.75rem; align-items: center; gap: .5rem; padding: .375rem 0 .25rem; border-bottom: 2px dashed var(--rule); }
.wallet li:last-child { border-bottom: 0; }
.wallet .ico, .wallet .feed-dot { justify-self: center; }
.wallet .ico { --box: 1.375rem; }
.wallet span { overflow: hidden; text-overflow: ellipsis; }
.wallet strong { color: var(--name); font-size: 1.125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.wallet a, .card .wallet a { display: flex; align-items: center; justify-content: center; height: 1.625rem; padding-top: 2px; border-radius: 6px; background: var(--pink); box-shadow: 0 3px 0 var(--pink-deep); color: #FFF; line-height: 1; text-decoration: none; }
.wallet a:hover { filter: brightness(1.1); color: #FFF; }

/* The inventory needs the width: on its tab what is looked up goes under the case. */
@media (max-width: 104rem) {
  .casefile:has(.bag), .casefile:has(.desk), .casefile:has(.snap-desk) { grid-template-columns: 18.5rem minmax(0, 1fr); }
  .casefile:has(.bag) > .ref, .casefile:has(.desk) > .ref, .casefile:has(.snap-desk) > .ref { grid-column: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; }
}
@media (max-width: 82rem) {
  .casefile { grid-template-columns: 18rem minmax(0, 1fr); }
  .ref { grid-column: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; }
}
@media (max-width: 70rem) {
  .casefile, .casefile:has(.bag), .casefile:has(.desk), .casefile:has(.snap-desk) { grid-template-columns: minmax(0, 1fr); }
  .queue { position: static; max-height: 36rem; order: 3; }
  /* While nobody is open the list is the page: it comes first, as long as it is. */
  .casefile:has(.case-empty) > .queue { order: 0; max-height: none; }
  .casefile > .ref, .casefile:has(.bag) > .ref, .casefile:has(.desk) > .ref, .casefile:has(.snap-desk) > .ref, .case-empty { grid-column: 1; }
}

/* -- four weeks ------------------------------------------------------------------- */

.timeline-scroll { overflow-x: auto; }
.timeline { min-width: 45rem; display: flex; flex-direction: column; gap: .5rem; }
.timeline-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: .25rem; border-bottom: 3px solid var(--rule); color: var(--maroon); font-size: .875rem; }
.timeline-bars { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); row-gap: .5rem; background: repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 2px), var(--rule) calc(25% - 2px), var(--rule) 25%); }
.bar { --outline: #2B2F33; grid-column: 1 / 29; display: flex; align-items: center; height: 1.875rem; padding: 2px .625rem 0; border-radius: 6px; background: #787878; color: #FFF; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-ok { --outline: #1B4D0C; background: var(--ok); }
.bar-pink { --outline: #8F1F3C; background: var(--pink); }
.bar-warn { --outline: #7A4A00; background: #E89B0C; }
.bar-bad { --outline: #5A0A1C; background: var(--bad); }
.from-1 { grid-column-start: 1; }
.from-2 { grid-column-start: 2; }
.from-3 { grid-column-start: 3; }
.from-4 { grid-column-start: 4; }
.from-5 { grid-column-start: 5; }
.from-6 { grid-column-start: 6; }
.from-7 { grid-column-start: 7; }
.from-8 { grid-column-start: 8; }
.from-9 { grid-column-start: 9; }
.from-10 { grid-column-start: 10; }
.from-11 { grid-column-start: 11; }
.from-12 { grid-column-start: 12; }
.from-13 { grid-column-start: 13; }
.from-14 { grid-column-start: 14; }
.from-15 { grid-column-start: 15; }
.from-16 { grid-column-start: 16; }
.from-17 { grid-column-start: 17; }
.from-18 { grid-column-start: 18; }
.from-19 { grid-column-start: 19; }
.from-20 { grid-column-start: 20; }
.from-21 { grid-column-start: 21; }
.from-22 { grid-column-start: 22; }
.from-23 { grid-column-start: 23; }
.from-24 { grid-column-start: 24; }
.from-25 { grid-column-start: 25; }
.from-26 { grid-column-start: 26; }
.from-27 { grid-column-start: 27; }
.from-28 { grid-column-start: 28; }
.to-2 { grid-column-end: 2; }
.to-3 { grid-column-end: 3; }
.to-4 { grid-column-end: 4; }
.to-5 { grid-column-end: 5; }
.to-6 { grid-column-end: 6; }
.to-7 { grid-column-end: 7; }
.to-8 { grid-column-end: 8; }
.to-9 { grid-column-end: 9; }
.to-10 { grid-column-end: 10; }
.to-11 { grid-column-end: 11; }
.to-12 { grid-column-end: 12; }
.to-13 { grid-column-end: 13; }
.to-14 { grid-column-end: 14; }
.to-15 { grid-column-end: 15; }
.to-16 { grid-column-end: 16; }
.to-17 { grid-column-end: 17; }
.to-18 { grid-column-end: 18; }
.to-19 { grid-column-end: 19; }
.to-20 { grid-column-end: 20; }
.to-21 { grid-column-end: 21; }
.to-22 { grid-column-end: 22; }
.to-23 { grid-column-end: 23; }
.to-24 { grid-column-end: 24; }
.to-25 { grid-column-end: 25; }
.to-26 { grid-column-end: 26; }
.to-27 { grid-column-end: 27; }
.to-28 { grid-column-end: 28; }
.to-29 { grid-column-end: 29; }

progress.rate { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 4rem; height: .625rem; border: 0; border-radius: 2px; background: #000; color: var(--pink); overflow: hidden; }
progress.rate::-webkit-progress-bar { background: #000; }
progress.rate::-webkit-progress-value { background: linear-gradient(#FF6A2B, #E8401A); }
progress.rate::-moz-progress-bar { background: linear-gradient(#FF6A2B, #E8401A); }

.empty { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1rem 1.125rem; border: 3px dashed var(--line-field); border-radius: 8px; background: var(--paper); color: var(--dim); }
.empty strong { color: var(--name); font-size: 1.0625rem; }
.empty p { margin: 0; }
.card-flush > .empty { margin: 1rem 1.125rem; }

/* -- forms --------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: .1875rem; margin: 0 0 1rem; max-width: 42rem; min-width: 0; }
.field > label, .group > legend { font-size: .9375rem; color: var(--maroon); }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select { display: block; width: 100%; min-height: var(--control); padding: 2px .625rem 0; background: #FFF; color: var(--ink); border: 3px solid var(--line-field); border-radius: var(--radius-s); font: inherit; }
.field textarea { padding: .5rem .625rem; resize: vertical; min-height: 5rem; line-height: 1.45; }
.field textarea.code, pre.code { font-size: .8125rem; }
/* A choice from a few: its own arrow, drawn without a picture, and where the browser lets a
   page dress the list that opens (appearance: base-select), the list too, as an overlay of the
   game. Elsewhere the list is the browser's own. */
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer; background-color: #FFF; background-image: linear-gradient(45deg, transparent 50%, var(--maroon) 50%), linear-gradient(135deg, var(--maroon) 50%, transparent 50%); background-position: calc(100% - 1.125rem) 55%, calc(100% - .6875rem) 55%; background-size: .4375rem .4375rem; background-repeat: no-repeat; }
@supports (appearance: base-select) {
  .field select, .field select::picker(select) { appearance: base-select; }
  .field select { display: flex; align-items: center; background-image: none; padding-right: .625rem; }
  .field select::picker-icon { content: ""; width: .5rem; height: .5rem; margin-left: auto; border-right: 3px solid var(--maroon); border-bottom: 3px solid var(--maroon); transform: translateY(-2px) rotate(45deg); }
  .field select:open::picker-icon { transform: translateY(2px) rotate(225deg); }
  .field select::picker(select) { margin-top: 4px; padding: 4px; border: 3px solid var(--frame); border-radius: 8px; background: var(--cream); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
  .field select option { padding: .4375rem .625rem .3125rem; border-radius: 5px; color: var(--ink); font: inherit; cursor: pointer; }
  .field select optgroup { padding: .25rem 0; color: var(--maroon); font: inherit; font-size: .875rem; }
  .field select option::checkmark { display: none; }
  .field select option:hover, .field select option:focus-visible { background: #FFE1B0; outline: 0; }
  .field select option:checked { background: var(--pink); color: #FFF; }
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 0; box-shadow: none; border-color: var(--pink); border-radius: var(--radius-s); }
.field input::placeholder, .field textarea::placeholder { color: #B39A8C; }
/* A picture to upload: what there is now on one side, and on the other a box that takes a
   file by a press or by a drop, without a script. */
.upload { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: .5rem 1rem; align-items: start; }
.upload > legend { padding: 0; margin-bottom: .25rem; font-size: .9375rem; color: var(--maroon); }
.upload-now { aspect-ratio: 550 / 238; display: flex; border: 2px solid var(--line-field); border-radius: 8px; background: var(--paper); overflow: hidden; }
.upload-now img { width: 100%; height: 100%; object-fit: cover; }
.upload-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; padding: .5rem; color: var(--dim); font-size: .8125rem; text-align: center; }
.upload-none strong { color: var(--name); font-size: 1rem; }
.upload-how { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.upload-how > * { margin: 0; }
.upload-drop { position: relative; display: block; min-height: 6.5rem; padding: .625rem 1rem 0; border: 3px dashed var(--line-field); border-radius: 8px; background: #FFF; color: var(--ink); cursor: pointer; }
.upload-drop:hover, .upload-drop:focus-within { border-color: var(--pink); background: #FFF6FA; }
.upload-title, .upload-hint { display: block; }
.upload-title { color: var(--name); font-size: 1.0625rem; }
.upload-hint { color: var(--dim); font-size: .8125rem; }
/* The file's own field covers the whole box, so a press or a drop anywhere on it counts. Its
   own button is not drawn, because every browser draws and places it differently: the box
   has a button of its own, and the field writes the name of the file chosen beside it, on a
   line as tall as that button, so the two stand level in any browser. */
.upload-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 3.75rem 1rem .5rem 7.25rem; border: 0; background: transparent; font: .8125rem/1.75rem var(--mono); color: var(--ink); cursor: pointer; }
.upload-drop input[type="file"]:focus-visible { outline: 0; }
.upload-drop input[type="file"]::file-selector-button { display: none; }
.upload-button { position: absolute; left: 1rem; top: 3.75rem; width: 5.5rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; padding-top: 2px; border-radius: 6px; background: var(--maroon); color: #FFF; font-size: .875rem; line-height: 1; }
.upload-how .field { margin: 0; max-width: none; }
/* Players chosen for something: each a chip whose box is ticked to take them out, and a box that suggests
   players while it is typed in, which adds one more. */
.picker { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; display: flex; flex-direction: column; gap: .5rem; max-width: 44rem; }
.picker > legend { padding: 0; margin-bottom: .25rem; font-size: .9375rem; color: var(--maroon); }
.picker > * { margin: 0; }
.picker-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-height: 1.875rem; }
.picker-chosen .chip { position: relative; gap: .375rem; cursor: pointer; }
.picker-chosen .chip input { position: absolute; opacity: 0; pointer-events: none; }
.picker-chosen .chip::after { content: "✕"; margin-left: .125rem; font-size: .75rem; opacity: .7; }
.picker-chosen .chip:has(input:focus-visible) { outline: 3px solid var(--maroon); outline-offset: 1px; }
.picker-chosen .chip:has(input:checked) { background: transparent; color: var(--dim); text-shadow: none; text-decoration: line-through; box-shadow: inset 0 0 0 2px var(--line-field); }
.picker-chosen .chip:has(input:checked)::after { content: "taken out"; text-decoration: none; }
/* Who a mail is to, in the mailbox: three ways, one shown at a time (players by name, a
   ready-made group, everyone), and for the last two whether it stays open. */
.desk-page { grid-template-columns: minmax(0, 1fr) 31rem; }
.audience { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .625rem; }
.audience > legend { padding: 0; margin-bottom: .25rem; font-size: .9375rem; color: var(--maroon); }
.audience .picker { max-width: none; }
.aud-panel { display: none; flex-direction: column; gap: .5rem; margin: 0; }
.aud-panel > * { margin: 0; }
.audience:has(.seg label:nth-child(1) input:checked) .aud-panel:nth-of-type(2),
.audience:has(.seg label:nth-child(2) input:checked) .aud-panel:nth-of-type(3),
.audience:has(.seg label:nth-child(3) input:checked) .aud-panel:nth-of-type(4) { display: flex; }
.audience:has(.seg label:nth-child(1) input:checked) .when { display: none; }
.paste > summary { color: #9A1036; font-size: .875rem; text-decoration: underline; cursor: pointer; }
.paste .field { margin: .5rem 0 0; max-width: none; }
.paste .field > label { position: absolute; left: -9999px; }
.preset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.preset { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .5rem; align-items: center; padding: .375rem .625rem .25rem; border: 2px solid var(--rule); border-radius: var(--radius-s); background: var(--paper); cursor: pointer; }
.preset input { position: absolute; opacity: 0; pointer-events: none; }
.preset-name { color: var(--name); font-size: .9375rem; line-height: 1.2; }
.preset-what { grid-column: 1; color: var(--dim); font-size: .75rem; }
.preset-count { grid-column: 2; grid-row: 1 / span 2; padding: .0625rem .5rem 0; border-radius: 6px; background: rgba(38, 48, 60, .85); color: #FFF; font-size: .8125rem; }
.preset:hover { border-color: var(--line-field); }
.preset:has(input:checked) { border-color: var(--gold); background: #FFE9B8; box-shadow: inset 4px 0 0 var(--gold); }
.preset:has(input:focus-visible) { outline: 3px solid var(--maroon); outline-offset: 1px; }
.match { display: flex; flex-direction: column; padding: .5rem .75rem .375rem; border-left: 5px solid var(--ok); background: #DDF5CF; }
.match strong { color: #1B4D0C; font-size: 1.125rem; line-height: 1.2; }
.match span { color: var(--dim); font-size: .8125rem; }
.when { margin: 0; padding: .5rem .625rem .375rem; border: 2px solid var(--rule); border-radius: var(--radius-s); display: flex; flex-direction: column; gap: .375rem; }
.when > legend { padding: 0 .25rem; font-size: .8125rem; color: var(--maroon); }
.when label { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; color: var(--dim); }
.when label strong { color: var(--name); font-size: .9375rem; }
.when input[type="datetime-local"] { margin: 0 .25rem; padding: 0 .25rem; border: 2px solid var(--line-field); border-radius: 5px; background: #FFF; font: .8125rem var(--mono); }
.write .gift { margin: 0; }
@media (max-width: 70rem) { .desk-page { grid-template-columns: minmax(0, 1fr); } }
/* A box that suggests while it is typed in, with the console's own list under it
   (the console's script of these boxes); without it the browser's own list stands in. */
.combo { position: relative; flex: 1 1 auto; min-width: 0; }
.combo > input { width: 100%; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 15.5rem; overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 4px solid var(--frame); border-radius: 4px; background: var(--cream); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); scrollbar-color: var(--line-field) var(--paper); }
.combo-list[hidden] { display: none; }
.combo-option { padding: .3125rem .625rem .1875rem; border-radius: 4px; font-size: .9375rem; overflow-wrap: anywhere; cursor: pointer; }
.combo-option:nth-child(odd) { background: var(--paper); }
.combo-option:hover { background: #FFE1B0; }
.combo-option[aria-selected="true"] { --outline: #8F1F3C; background: var(--pink); color: #FFF; }
.combo-none { padding: .375rem .625rem .25rem; color: var(--dim); font-size: .8125rem; }
.picker-add { display: flex; gap: .5rem; align-items: center; }
.picker-add input { flex: 1 1 auto; min-width: 0; min-height: var(--control); padding: 2px .625rem 0; background: #FFF; color: var(--ink); border: 3px solid var(--line-field); border-radius: var(--radius-s); font: inherit; }
.picker-add input:focus-visible { outline: 0; border-color: var(--pink); }
.picker-add input[type="search"] { appearance: none; -webkit-appearance: none; }
.picker-add input[type="search"]::-webkit-search-cancel-button { display: none; }
@media (max-width: 40rem) { .upload { grid-template-columns: minmax(0, 1fr); } }
.help { margin: 0; font-size: .875rem; }
.check { display: flex; align-items: center; gap: .625rem; min-height: var(--control); color: var(--ink); cursor: pointer; }
.field > label.check { font-size: 1rem; color: var(--ink); }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--pink); }
.field-check { gap: 0; }
.field-check .help { margin: -.25rem 0 0 1.875rem; }
.group { margin: 0 0 1rem; padding: .75rem .875rem .25rem; max-width: 42rem; min-width: 0; border: 3px solid var(--rule); border-radius: 8px; }
.group > legend { padding: 0 .375rem; }
.group > .help { margin: 0 0 .75rem; }
.row { display: grid; grid-template-columns: 1fr 2fr; gap: 0 .875rem; }
.row .field { margin-bottom: .75rem; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 .875rem; max-width: 42rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.filters .field { flex: 1 1 11rem; margin: 0; max-width: none; }
.filters .field-wide { flex: 3 1 17rem; }
.filters .actions { margin: 1.4375rem 0 0; }
.seg { display: flex; flex-wrap: wrap; border: 3px solid var(--line-field); border-radius: var(--radius-s); background: #FFF; overflow: hidden; }
.seg label { position: relative; flex: 1 1 5.5rem; display: flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.125rem; padding: 2px .625rem 0; border-right: 2px solid var(--rule); color: var(--dim); cursor: pointer; white-space: nowrap; }
.seg label:last-child { border-right: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { --outline: #8F1F3C; background: var(--pink); color: #FFF; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--maroon); outline-offset: -3px; }
.seg-date { display: none; }
.group:has(.seg input[value="date"]:checked) .seg-date { display: flex; }
@media (max-width: 36rem) { .row { grid-template-columns: 1fr; } .filters .actions { margin-top: 0; } }

/* -- buttons: the game's one-colour button, a nine-slice of its pixel art ---------- */

.actions { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; margin: 1rem 0 .75rem; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; margin: 0; }
.action-grid form { display: contents; }
.btn, .card a.btn { --outline: #2B2F33; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.25rem .8125rem; border: 0; background: none; color: #FFF; font: inherit; font-size: 1.0625rem; line-height: 1.1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border: solid transparent; border-width: 16px 16px 20px; border-image: url("../img/btn-grey.png") 8 8 10 8 fill / 16px 16px 20px stretch; image-rendering: pixelated; }
.btn:hover { filter: brightness(1.08); color: #FFF; }
.btn:active { transform: scale(1.04); }
.btn-primary, .btn-danger { --outline: #5A0A1C; }
.btn-primary::before { border-image-source: url("../img/btn-pink.png"); }
.btn-danger::before { border-image-source: url("../img/btn-red.png"); }
.btn-small { min-height: 2.125rem; padding: .3125rem .875rem .5625rem; font-size: .875rem; }
.btn-small::before { border-width: 12px 12px 15px; border-image-width: 12px 12px 15px; }
.btn-off { opacity: .5; cursor: default; }
.btn-off:hover { filter: none; }

/* -- messages ------------------------------------------------------------------ */

.note { padding: .625rem .875rem .5rem; border: 3px solid #5B8FBF; background: #D9ECFF; color: var(--ink); }
.card .note, form .note { margin: 0 0 1rem; }
.note > :last-child { margin-bottom: 0; }
.note strong { color: inherit; }
.note-success { border-color: #3FA81C; background: #DDF5CF; }
.note-error { border-color: #D3122F; background: #FDB2B5; }
.note-warning { border-color: #CC9922; background: #FFE7A8; }

/* -- tables, pages of a list, tabs ---------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.table { width: 100%; border-collapse: collapse; color: var(--ink); }
.table th { padding: .5625rem 1rem .3125rem; border-bottom: 3px solid var(--rule); color: var(--maroon); font-size: .8125rem; letter-spacing: 1px; text-transform: uppercase; text-align: left; white-space: nowrap; }
.table td { padding: .5625rem 1rem .4375rem; border-bottom: 2px dashed var(--rule); text-align: left; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td, .table tr.is-selected td, .table tr.is-selected:hover td { background: #FFE1B0; }
.table code { overflow-wrap: anywhere; color: var(--dim); }
.table .num, .table .mono, .table time { white-space: nowrap; }
.table .num { font-family: var(--mono); }
pre.code { margin: 0 0 1rem; padding: .875rem 1rem; overflow-x: auto; background: var(--paper); border: 2px solid var(--rule); border-radius: var(--radius-s); color: var(--ink); line-height: 1.6; }

.pager { display: flex; align-items: center; gap: .875rem; }
.pager-page { color: var(--dim); font-size: .875rem; }

/* The game's tab buttons, one colour after another; the one that is open stands up. */
.tabs { min-width: 0; }
.tabs ul { list-style: none; display: flex; gap: 5px; margin: 0; padding: 6px 2px 0; overflow-x: auto; }
.tabs li { flex: 1 1 0; min-width: 6rem; }
.tabs a { --outline: #8F1F3C; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; height: 3.25rem; padding: 0 .25rem .375rem; color: #FFF; font-size: 1.125rem; line-height: 1.05; text-decoration: none; white-space: nowrap; filter: saturate(.7) brightness(.86); }
.tabs a::before { content: ""; position: absolute; inset: 0; z-index: -1; border: solid transparent; border-width: 25px 24px; border-image: url("../img/tab-pink.png") 17 16 17 16 fill / 25px 24px stretch; }
.tabs li:nth-child(5n + 2) a { --outline: #064F7E; }
.tabs li:nth-child(5n + 2) a::before { border-image-source: url("../img/tab-blue.png"); }
.tabs li:nth-child(5n + 3) a { --outline: #2F6410; }
.tabs li:nth-child(5n + 3) a::before { border-image-source: url("../img/tab-green.png"); }
.tabs li:nth-child(5n + 4) a { --outline: #5A1787; }
.tabs li:nth-child(5n + 4) a::before { border-image-source: url("../img/tab-purple.png"); }
.tabs li:nth-child(5n + 5) a { --outline: #8A4208; }
.tabs li:nth-child(5n + 5) a::before { border-image-source: url("../img/tab-orange.png"); }
.tabs a:hover { filter: saturate(.9) brightness(.97); color: #FFF; }
.tabs a[aria-current="page"] { filter: none; transform: translateY(-4px); }

/* -- a long document folded away -------------------------------------------------- */

.fold { margin: 0 0 .5rem; border: 2px solid var(--rule); border-radius: var(--radius-s); background: var(--cream); color: var(--ink); }
.fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-height: var(--control); padding: .375rem .75rem .25rem; color: var(--name); cursor: pointer; overflow-wrap: anywhere; }
.fold[open] > summary { border-bottom: 2px solid var(--rule); }
.fold > pre.code { margin: 0; border: 0; border-radius: 0 0 var(--radius-s) var(--radius-s); max-height: 32rem; overflow: auto; }
.fold > .table-wrap { margin: 0; padding: 0 .25rem; }

/* -- what someone wrote, a picture a player sent, a notice or a mail as shown ----- */

.prose { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60rem; }
.shot { display: block; max-width: 100%; height: auto; border: 3px solid var(--frame); }
.preview { max-width: 42rem; padding: 1rem 1.25rem; background: var(--navy); border: 3px solid var(--board); color: #FFF; overflow-wrap: anywhere; }
.preview > h3 { margin-top: 0; color: #FFA41C; }
.preview-text h4 { margin: 1rem 0 .4rem; font-size: 1rem; color: #FFE08A; }
.preview-text > :last-child { margin-bottom: 0; }
.gift { display: flex; flex-direction: column; gap: .875rem; padding: 1.125rem; border: 4px solid var(--pink); background: var(--cell) url("../img/cell.png") center / 100% 100%; color: var(--ink); overflow-wrap: anywhere; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.gift-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; color: var(--name); font-size: 1.1875rem; }
.gift-title small { font-size: .8125rem; color: var(--dim); }
.gift-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 4.5rem; max-width: 100%; min-height: 4.5rem; padding: .5rem .75rem; align-self: flex-start; border: 3px solid var(--line-field); border-radius: 8px; background: #FFF; }
.gift-item small { font-size: .75rem; color: var(--dim); }
.gift-item strong { font-size: 1rem; }
.gift-claim { padding: .625rem; border-radius: 8px; background: var(--pink); box-shadow: 0 4px 0 var(--pink-deep); color: #FFF; text-align: center; }

/* -- security keys ------------------------------------------------------------- */

.one-time-link { display: block; padding: .75rem 1rem; background: var(--paper); border: 3px solid var(--line-field); border-radius: var(--radius-s); font: .8125rem var(--mono); overflow-wrap: anywhere; user-select: all; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* -- the parts of a tab ----------------------------------------------------------- */

.part { min-width: 0; }
.part + .part { padding-top: 1rem; border-top: 2px dashed var(--rule); }
.part > :last-child { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.stack > * { margin-top: 0; margin-bottom: 0; }
.card-body .field, .card-body .group, .card-body .pair { margin-bottom: 0; max-width: none; }
.card-body .group { display: flex; flex-direction: column; gap: .75rem; padding-bottom: .75rem; }

/* -- the inventory: the game's pictures, a slot for every piece ---------------------- */

/* One of the game's pictures. The sheets are grids of square cells; a class written by
   the art tool (tools/build_admin_art) says which sheet and which cell (--n columns, --c and --r), and a
   class of the size says how large (--box). No page places a picture by a style. */
.ico { --box: 2.5rem; flex: none; display: block; width: var(--box); height: var(--box); background-repeat: no-repeat; background-size: calc(var(--n) * var(--box)) auto; background-position: calc(var(--c) * var(--box) * -1) calc(var(--r) * var(--box) * -1); }
.ico-small { --box: 1.625rem; }
.ico-large { --box: 3.625rem; }
.ico-huge { --box: 4.75rem; }
.ico-pixel { image-rendering: pixelated; }
.stars { display: flex; justify-content: center; gap: 1px; min-height: .6875rem; }
.stars .ico { --box: .6875rem; image-rendering: pixelated; }
.badge-row { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.tile { flex: none; display: flex; align-items: center; justify-content: center; width: 3.375rem; height: 3.375rem; margin: 0 auto; border-radius: 9px; background: var(--neu); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 0 0 2px var(--outline); }
.tile-large { width: 4.5rem; height: 4.5rem; margin: 0; }
.tile-0 { background: #39C4E8; }
.tile-1 { background: #7FCB3A; }
.tile-2 { background: #F5A623; }
.tile-3 { background: #F0468C; }
.tile-4 { background: #9A55D6; }

.inv-parts { display: flex; flex-wrap: wrap; gap: .375rem; }
.inv-parts .chip { gap: .5rem; min-height: 2.25rem; padding-right: .5rem; }
.chip small { margin-left: .4375rem; padding: .0625rem .4375rem 0; border-radius: 6px; background: rgba(0, 0, 0, .35); font-size: .8125rem; }
.chip .ico { margin: -.25rem .25rem -.25rem -.25rem; }
.inv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.25rem; }
.inv-controls .search { flex: 1 1 13rem; }

.bag { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; gap: 1rem; }
.slots, .hslots, .mcards { list-style: none; margin: 0; display: grid; gap: .5rem; padding: .75rem; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.slots { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); }
.slots + .slots, .slots + .hslots { padding-top: 0; }
.slots > li { display: flex; min-width: 0; }
.slot, .card a.slot { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem; min-width: 0; padding: .375rem .25rem .25rem; border: 3px solid var(--pink); background: var(--cell) url("../img/cell.png") center / 100% 100%; color: var(--name); text-align: center; text-decoration: none; }
.slot:hover { filter: brightness(1.06); }
.slot.is-selected, .card a.slot.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px #FFF; }
.slot.is-missing, .card a.slot.is-missing { border-color: #8E7F86; background: #CFC6C4; color: var(--dim); }
.slot.is-missing .ico, .hslot.is-missing > .hslot-head .ico { filter: grayscale(1) brightness(.6); opacity: .65; }
.slot-level, .slot-worn { position: absolute; top: -3px; padding: .0625rem .375rem 0; border-radius: 6px; color: #FFF; font-size: .8125rem; text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline); }
.slot-level { --outline: #1B4D0C; right: -3px; background: var(--ok); }
.slot-level.is-full { --outline: #7A4A00; background: var(--gold); }
.slot-level.is-over { --outline: #5A0A1C; background: var(--bad); }
.slot-worn { --outline: #8F1F3C; left: -3px; background: var(--pink); font-size: .75rem; }
.slot-name { max-width: 100%; font-size: .75rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot small { font-size: .6875rem; color: var(--dim); }
.slot-badge, .slot-badge-left { position: absolute; top: 2px; }
.slot-badge { right: 2px; }
.slot-badge-left { left: 2px; }
.slot-group { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; margin-top: .25rem; color: #FFF; font-size: 1.0625rem; text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline); }
.slot-group .tile { width: 1.875rem; height: 1.875rem; margin: 0; border-radius: 6px; }
.slot-group .ico { --box: 1.375rem; image-rendering: pixelated; }
.slot-group small { font-size: .8125rem; color: #FFD9A8; }

.hslots { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
.hslot { display: flex; flex-direction: column; gap: .375rem; min-width: 0; padding: .375rem .5rem .5rem; border: 3px solid var(--pink); background: var(--cell) url("../img/cell.png") center / 100% 100%; color: var(--name); }
.hslot.is-missing { border-color: #8E7F86; background: #CFC6C4; color: var(--dim); }
.hslot-head, .card a.hslot-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; border-radius: 6px; color: inherit; text-decoration: none; }
.hslot-head strong { color: inherit; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.hslot-head:hover strong { color: #C2185B; }
.hslot-head.is-selected { box-shadow: 0 0 0 3px #FFF, 0 0 0 6px var(--gold); }
.hslot-head .slot-level { position: static; }
.hslot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.hslot-pair .slot, .card .hslot-pair a.slot { border-width: 2px; padding: .25rem .125rem .1875rem; background: var(--paper); justify-content: center; min-height: 4.25rem; }
.hslot-pair .slot.is-missing, .card .hslot-pair a.slot.is-missing { background: #BDB3B1; border-style: dashed; }

/* The gallery: a card for each Moetan as the game's gallery draws them. */
.mcards { grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); }
.mcard { position: relative; display: block; aspect-ratio: 200 / 308; border: 3px solid var(--pink); border-radius: 10px; background: #7A1F5C; overflow: hidden; }
.mcard img, .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard:hover { filter: brightness(1.08); }
.mcard.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px #FFF; }
.mcard.is-missing img { filter: grayscale(1) brightness(.45); }
.mcard-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem .375rem .25rem; background: linear-gradient(transparent, rgba(20, 8, 24, .88) 55%); color: #FFF; font-size: .75rem; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px #000; }
.portrait { position: relative; width: 100%; max-width: 11rem; margin: 0 auto; aspect-ratio: 200 / 308; border: 3px solid var(--frame); border-radius: 10px; background: #7A1F5C; overflow: hidden; }

.inspect { position: sticky; top: 1rem; }
.inspect-top { display: flex; align-items: center; gap: .75rem; }
.inspect-top strong { display: block; font-size: 1.1875rem; line-height: 1.15; }
.inspect-top .stars { justify-content: flex-start; margin-top: .125rem; }
.inspect .defs { margin: 0; }
.over-note { color: #C2102B; }
@container case (max-width: 40rem) {
  .bag { grid-template-columns: minmax(0, 1fr); }
  .inspect { position: static; order: -1; }
}

/* -- the mail: the mailbox on one side, the mail being written on the other ------------ */

.desk { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; gap: 1rem; }
.mails { list-style: none; margin: 0; padding: .625rem; display: grid; gap: 6px; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.mail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .125rem .75rem; padding: .5rem .875rem .375rem .625rem; border: 3px solid var(--pink); background: var(--cell) url("../img/cell.png") center / 100% 100%; color: var(--ink); }
.mail.is-waiting { border-color: var(--gold); }
.mail-gift { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9px; background: var(--paper); border: 2px solid var(--line-field); overflow: hidden; }
.mail-gift img { width: 100%; height: 100%; object-fit: cover; }
.mail-title { color: var(--name); font-size: 1.0625rem; line-height: 1.25; overflow-wrap: anywhere; }
.mail-what { grid-column: 2; font-size: .875rem; color: var(--dim); overflow-wrap: anywhere; }
.mail-side { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.mail-side time { font: .75rem var(--mono); color: var(--dim); white-space: nowrap; }
.write .search { flex: none; }
.gift-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.gift-pick > legend { padding: 0; margin-bottom: .1875rem; font-size: .9375rem; color: var(--maroon); }
.gift-groups { display: flex; flex-wrap: wrap; gap: .25rem; }
.gift-groups .chip { position: relative; min-height: 1.75rem; padding: 2px .625rem 0; font-size: .875rem; cursor: pointer; }
.gift-groups input, .gifts input { position: absolute; opacity: 0; pointer-events: none; }
.gift-groups .chip:has(input:checked) { --outline: #7A4A00; background: var(--gold); }
.gift-groups .chip:has(input:focus-visible), .gifts .slot:has(input:focus-visible) { outline: 3px solid var(--maroon); outline-offset: 1px; }
/* One group of gifts is shown at a time, the one whose name is pressed: no script, the page
   only asks which of the names is the one chosen. */
.gift-panel { display: none; }
.gift-pick:has(.gift-groups label:nth-child(1) input:checked) .gift-panel:nth-of-type(2),
.gift-pick:has(.gift-groups label:nth-child(2) input:checked) .gift-panel:nth-of-type(3),
.gift-pick:has(.gift-groups label:nth-child(3) input:checked) .gift-panel:nth-of-type(4),
.gift-pick:has(.gift-groups label:nth-child(4) input:checked) .gift-panel:nth-of-type(5),
.gift-pick:has(.gift-groups label:nth-child(5) input:checked) .gift-panel:nth-of-type(6),
.gift-pick:has(.gift-groups label:nth-child(6) input:checked) .gift-panel:nth-of-type(7),
.gift-pick:has(.gift-groups label:nth-child(7) input:checked) .gift-panel:nth-of-type(8),
.gift-pick:has(.gift-groups label:nth-child(8) input:checked) .gift-panel:nth-of-type(9),
.gift-pick:has(.gift-groups label:nth-child(9) input:checked) .gift-panel:nth-of-type(10) { display: block; }
.gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: .375rem; max-height: 15.5rem; overflow-y: auto; margin: .375rem 0; padding: 3px; scroll-timeline: --gifts block; }
.gifts .slot, .card .gifts .slot { padding: .25rem .125rem .1875rem; border-width: 2px; background: var(--paper); cursor: pointer; }
.gifts .slot:has(input:checked) { border-color: var(--gold); background: #FFF3B0; box-shadow: 0 0 0 3px #FFF; }
.gifts .slot img { width: 2.5rem; height: 2.5rem; border-radius: 6px; object-fit: cover; }
.gifts .slot-name { font-size: .6875rem; }
/* Where the list of gifts is cut off, a shadow falls inward over the edge: over the bottom
   while there is more below, under the top once it has been scrolled. The two shades are
   sticky to the edges and faded by the scroll itself; a list that fits has neither, and so
   has a browser that cannot tie an animation to a scroll. */
.gifts::before, .gifts::after { content: ""; position: sticky; z-index: 2; grid-column: 1 / -1; height: 1.25rem; margin: 0 -3px; pointer-events: none; opacity: 0; }
.gifts::before { top: -3px; margin-bottom: calc(-1.25rem - .375rem); background: linear-gradient(rgba(42, 21, 18, .42), rgba(42, 21, 18, 0)); }
.gifts::after { bottom: -3px; margin-top: calc(-1.25rem - .375rem); background: linear-gradient(rgba(42, 21, 18, 0), rgba(42, 21, 18, .42)); }
@supports (animation-timeline: scroll()) {
  .gifts::before { animation: shade-in linear both; animation-timeline: --gifts; animation-range: 0 1.5rem; }
  .gifts::after { animation: shade-out linear both; animation-timeline: --gifts; animation-range: calc(100% - 1.5rem) 100%; }
}
@keyframes shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shade-out { from { opacity: 1; } to { opacity: 0; } }
/* The box for someone else shows only while that is who the mail is from. */
.field.from input.from-other { display: none; margin-top: .375rem; }
.field.from:has(option[value="other"]:checked) input.from-other { display: block; }
@container case (max-width: 48rem) {
  .desk { grid-template-columns: minmax(0, 1fr); }
}
@container case (max-width: 30rem) {
  .mail { grid-template-columns: auto minmax(0, 1fr); }
  .mail-side { grid-column: 2; grid-row: auto; flex-direction: row; align-items: center; }
}

/* -- the events: the schedule in lanes, and the daily login board ---------------------- */

.lanes { min-width: 46rem; display: flex; flex-direction: column; }
.lane { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); align-items: center; border-top: 2px dashed var(--rule); }
.lane-head { border-top: 0; border-bottom: 3px solid var(--rule); }
.lane-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: .25rem; color: var(--maroon); font-size: .875rem; }
.lane-name { display: flex; flex-direction: column; align-items: flex-start; padding: .1875rem .5rem .0625rem 0; color: var(--name); }
.lane-name small { color: var(--dim); font-size: .75rem; line-height: 1.3; }
.lane-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
.lane-add, .card a.lane-add { font-size: .8125rem; }
/* The pink line at the left edge is today. A lane is as tall as its bars. */
.lane-track { align-self: stretch; align-content: center; display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); grid-auto-rows: 1.5rem; gap: 2px 0; padding: .1875rem 0; box-shadow: inset 4px 0 0 var(--pink); background: repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 2px), var(--rule) calc(25% - 2px), var(--rule) 25%); }
.lane-track .bar { height: 1.5rem; padding: 1px .5rem 0; border: 0; font: inherit; font-size: .8125rem; text-align: left; cursor: pointer; text-shadow: inherit; }
.lane-track .bar:hover { filter: brightness(1.1); }
.lane-track .bar:focus-visible, .lane-track .bar:has(+ .pop:popover-open) { outline: 3px solid var(--maroon); outline-offset: 1px; }
.lane-none { grid-column: 1 / -1; align-self: center; padding-left: .75rem; font-size: .8125rem; color: var(--dim); }
.bar-always { --outline: #3A2A1A; background: repeating-linear-gradient(135deg, #8A7A6C 0 10px, #7E6F62 10px 20px); border-radius: 0; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; margin: 0; font-size: .8125rem; color: var(--dim); }
.legend span { display: inline-flex; align-items: center; gap: .375rem; }
.legend i.bar { width: 1.5rem; height: .875rem; padding: 0; border-radius: 3px; }
/* What is known of a bar. The browser opens it, closes it on a press elsewhere and keeps one
   open; where it can, it is put at the bar that opened it, and else in the middle. */
.pop { width: min(20rem, calc(100vw - 2rem)); padding: 0; border: 4px solid var(--frame); border-radius: 4px; background: var(--cream); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.pop::backdrop { background: transparent; }
@supports (position-area: bottom) {
  .pop { inset: auto; margin: .375rem 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
}
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3125rem .75rem .125rem; background: var(--maroon); border-bottom: 4px solid var(--gold); }
.pop-head strong { color: #FFF; font-size: 1.0625rem; line-height: 1.2; overflow-wrap: anywhere; }
.pop-facts { margin: 0; padding: .5rem .75rem 0; display: grid; gap: .25rem; }
.pop-facts div { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: .5rem; }
.pop-facts dt { color: var(--dim); font-size: .8125rem; }
.pop-facts dd { margin: 0; font-size: .9375rem; overflow-wrap: anywhere; }
.pop-note { margin: 0; padding: .375rem .75rem 0; color: var(--name); font-size: .9375rem; }
.pop .actions { margin: 0; padding: .5rem .75rem .625rem; }
/* The daily login board as the game draws one: a stamp for each day. */
.stamps { list-style: none; margin: 0; padding: .625rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.stamp { display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .375rem .5rem .5rem; border: 3px solid var(--pink); background: var(--cell) url("../img/cell.png") center / 100% 100%; color: var(--ink); text-align: center; }
.stamp.is-changed { border-color: var(--gold); }
.stamp-day { align-self: stretch; margin: -.375rem -.5rem .25rem; padding: .125rem 0 0; background: var(--maroon); color: #FFF; font-size: .875rem; }
.stamp strong { color: var(--name); font-size: 1.375rem; line-height: 1.1; }
.stamp strong small { display: block; font-size: .8125rem; color: var(--dim); }
.stamp-vip { font-size: .8125rem; color: #7A4A00; }
.stamp-acts { margin-top: auto; padding-top: .25rem; font-size: .8125rem; }
.stamp .pill { font-size: .75rem; }
/* The form that makes an event stands where the schedule stood. */
.create { border-color: var(--gold); }
.create-form { display: flex; flex-direction: column; gap: .75rem; }
.create-form > * { margin-top: 0; margin-bottom: 0; }
.create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; align-items: start; }
.create-grid .field, .create-form > .field { margin: 0; max-width: none; }
@media (max-width: 44rem) {
  .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- the Moetans: who comes out, the gallery, and the sheet of the one that is open ------ */

.gal { grid-template-columns: minmax(0, 1fr) 23rem; }
.gal .mcards { list-style: none; margin: 0; padding: .625rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); gap: 6px; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.gal .pager { padding: .5rem 1rem; }
/* Without the script that opens a sheet beside the gallery, a card leads to its own place
   on the page it opens, so the gallery stays near where it was, and one page fades into
   the next. */
.gal .mcard { scroll-margin-top: 40vh; }
/* Her tier on her card, in the colours the gallery of the game uses, and a flag on one that
   is still to come or was changed here. */
.mc-tier { position: absolute; top: 4px; left: 4px; min-width: 1.375rem; height: 1.375rem; padding: 2px .25rem 0; border-radius: 6px; background: #39C4E8; color: #FFF; font-size: .8125rem; text-align: center; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.mc-tier.t2 { background: #7FCB3A; }
.mc-tier.t3 { background: #F5A623; }
.mc-tier.t4 { background: #F0468C; }
.mc-tier.t5 { background: #9A55D6; }
.mc-flag { position: absolute; top: 4px; right: 4px; padding: 2px .375rem 0; border-radius: 6px; background: var(--pink); color: #FFF; font-size: .6875rem; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.mc-flag.is-changed { --outline: #7A4A00; background: var(--gold); }
.sheet .card-head h2 .lbl { margin-left: .375rem; }
.sheet .fold { margin: 0; }
.sheet .fold > .muted { margin: 0; padding: .5rem .75rem; }
.fold-in { padding: .625rem .75rem; }
.fold-in .defs { margin: 0; }
.sheet-pills { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
/* The values of hers that can be changed: what each is, how it reads and what it does. */
.edits { margin: 0; display: grid; gap: 4px; }
.edit { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .3125rem .5rem .1875rem .625rem; border: 2px solid var(--rule); border-radius: var(--radius-s); background: var(--paper); }
.edit dt { color: var(--dim); font-size: .8125rem; }
.edit dd { margin: 0; display: flex; flex-direction: column; }
.edit dd strong { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; color: var(--name); font-size: 1.0625rem; line-height: 1.2; }
.edit dd span { color: var(--dim); font-size: .75rem; line-height: 1.3; }
.spirit-stats { margin: 0; padding: .5rem .625rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 4px; }
.spirit-stats div { padding: .25rem .5rem .125rem; border-radius: 6px; background: var(--paper); border: 2px solid var(--rule); }
.spirit-stats dt { color: var(--dim); font-size: .6875rem; overflow-wrap: anywhere; }
.spirit-stats dd { margin: 0; color: var(--name); font-size: 1rem; }
/* The fields of her sheet as a form: one that differs from the shipped data is gold. */
.ed-field { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.ed-field label { font-size: .8125rem; color: var(--maroon); }
.ed-field input, .ed-field select { min-height: 2.25rem; padding: 2px .5rem 0; border: 3px solid var(--line-field); border-radius: var(--radius-s); background: #FFF; color: var(--ink); font: inherit; font-size: .9375rem; min-width: 0; width: 100%; }
.ed-field input:focus-visible, .ed-field select:focus-visible { outline: 0; border-color: var(--pink); }
.ed-field.is-changed input, .ed-field.is-changed select { border-color: var(--gold); background: #FFF8E1; }
.ed-field .help { margin: 0; font-size: .75rem; color: var(--dim); }
.was { font-size: .75rem; color: #7A4A00; }
.ed-fold { margin: 0; }
.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
/* Who comes out: a line of eight weeks, a pin for each Moetan at her day. */
.rel-line { min-width: 46rem; }
.rel-weeks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding-bottom: .25rem; border-bottom: 3px solid var(--rule); color: var(--maroon); font-size: .875rem; }
.rel-track { display: grid; grid-template-columns: repeat(56, minmax(0, 1fr)); grid-auto-rows: auto; gap: 4px 0; padding: .625rem 0; box-shadow: inset 4px 0 0 var(--pink); background: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 2px), var(--rule) calc(12.5% - 2px), var(--rule) 12.5%); }
.rel-pin, .card a.rel-pin { grid-column-end: span 14; justify-self: start; display: flex; align-items: center; gap: .5rem; max-width: 100%; padding: .25rem .625rem .25rem .25rem; border: 3px solid var(--pink); border-radius: 10px; background: var(--paper); color: var(--name); text-decoration: none; font-size: .875rem; line-height: 1.15; }
.rel-pin:hover { border-color: var(--gold); }
.rel-pin img { width: 2.75rem; height: 3.75rem; object-fit: cover; border-radius: 6px; }
.rel-pin small { display: block; color: var(--dim); font-size: .75rem; }
.day-1 { grid-column-start: 1; }
.day-2 { grid-column-start: 2; }
.day-3 { grid-column-start: 3; }
.day-4 { grid-column-start: 4; }
.day-5 { grid-column-start: 5; }
.day-6 { grid-column-start: 6; }
.day-7 { grid-column-start: 7; }
.day-8 { grid-column-start: 8; }
.day-9 { grid-column-start: 9; }
.day-10 { grid-column-start: 10; }
.day-11 { grid-column-start: 11; }
.day-12 { grid-column-start: 12; }
.day-13 { grid-column-start: 13; }
.day-14 { grid-column-start: 14; }
.day-15 { grid-column-start: 15; }
.day-16 { grid-column-start: 16; }
.day-17 { grid-column-start: 17; }
.day-18 { grid-column-start: 18; }
.day-19 { grid-column-start: 19; }
.day-20 { grid-column-start: 20; }
.day-21 { grid-column-start: 21; }
.day-22 { grid-column-start: 22; }
.day-23 { grid-column-start: 23; }
.day-24 { grid-column-start: 24; }
.day-25 { grid-column-start: 25; }
.day-26 { grid-column-start: 26; }
.day-27 { grid-column-start: 27; }
.day-28 { grid-column-start: 28; }
.day-29 { grid-column-start: 29; }
.day-30 { grid-column-start: 30; }
.day-31 { grid-column-start: 31; }
.day-32 { grid-column-start: 32; }
.day-33 { grid-column-start: 33; }
.day-34 { grid-column-start: 34; }
.day-35 { grid-column-start: 35; }
.day-36 { grid-column-start: 36; }
.day-37 { grid-column-start: 37; }
.day-38 { grid-column-start: 38; }
.day-39 { grid-column-start: 39; }
.day-40 { grid-column-start: 40; }
.day-41 { grid-column-start: 41; }
.day-42 { grid-column-start: 42; }
.day-43 { grid-column-start: 43; }
.day-44 { grid-column-start: 44; }
.day-45 { grid-column-start: 45; }
.day-46 { grid-column-start: 46; }
.day-47 { grid-column-start: 47; }
.day-48 { grid-column-start: 48; }
.day-49 { grid-column-start: 49; }
.day-50 { grid-column-start: 50; }
.day-51 { grid-column-start: 51; }
.day-52 { grid-column-start: 52; }
.day-53 { grid-column-start: 53; }
.day-54 { grid-column-start: 54; }
.day-55 { grid-column-start: 55; }
.day-56 { grid-column-start: 56; }
@media (max-width: 70rem) {
  .gal { grid-template-columns: minmax(0, 1fr); }
  .gal .inspect { position: static; order: -1; }
}

/* -- the snapshots: the list on one side, the one that is open on the other ------------ */

.snap-desk { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; align-items: start; gap: 1rem; }
.snap-open { position: sticky; top: 1rem; }
.snap-open .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0; }
.snap-open .fact:last-child { grid-column: 1 / -1; }
.snap-rows .row-item:hover { background: #FFF3DC; }
.snap-rows .row-item.is-selected, .snap-rows .row-item.is-selected:hover { background: #FFE1B0; box-shadow: inset 5px 0 0 var(--pink); }
.snap-desk .card-flush > .fold { margin: .75rem 1.125rem; }
.snap-desk .fold > .rows { border-radius: 0 0 var(--radius-s) var(--radius-s); }
/* Taking a snapshot: a label and a button on one line. */
.take { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.take .field { flex: 1 1 14rem; margin: 0; max-width: none; }
.take .actions { margin: 0; }
.take > .note { flex: 1 1 100%; margin: 0; }
.take-help { flex: 1 1 100%; margin: -.25rem 0 0; font-size: .8125rem; color: var(--dim); }
/* A snapshot beside the account as it is now. What would change is marked; the rest is quiet. */
.cmp th, .cmp td { padding: .375rem .625rem .25rem; }
.cmp { width: 100%; table-layout: fixed; }
.cmp th:first-child { width: 42%; }
.cmp td.num, .cmp th.num { white-space: normal; overflow-wrap: anywhere; }
.cmp .ico { display: inline-block; vertical-align: middle; margin: -.25rem .375rem -.125rem 0; }
.cmp tr:not(.is-diff) td { color: var(--dim); }
.cmp tr.is-diff td { background: #FFF3B0; }
.cmp tr.is-diff td.num:last-child::before { content: "\2192\00A0"; color: var(--maroon); }
.cmp-sum { margin: 0; font-size: .875rem; color: var(--dim); }
.quote { margin: 0; padding: .5rem .75rem .375rem; border-left: 5px solid var(--bad); background: var(--paper); font-size: .9375rem; overflow-wrap: anywhere; }
.quote small { display: block; margin-top: .125rem; color: var(--dim); font-size: .8125rem; }
/* The one dangerous thing of the tab, apart from everything else: a red frame, and inside it
   the way back in green, so that it is read before the button is. */
.restore-zone { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem .875rem; padding: .625rem .875rem .5rem; border: 3px solid #8F1026; border-radius: 8px; background: #FDE3E0; color: var(--ink); }
.restore-zone strong { color: #8F1026; font-size: 1.0625rem; }
.restore-zone p { margin: 0; font-size: .875rem; }
.restore-zone > .safety { grid-column: 1 / -1; }
.safety { padding: .3125rem .625rem .1875rem; border-left: 5px solid var(--ok); background: #DDF5CF; }
.safety b { color: #1B4D0C; }
@container case (max-width: 48rem) {
  .snap-desk { grid-template-columns: minmax(0, 1fr); }
  .snap-open { position: static; }
}
@container case (max-width: 26rem) {
  .restore-zone { grid-template-columns: minmax(0, 1fr); }
}

/* -- icons: written by the art tool (tools/build_admin_art) -- */
.i-ar001,.i-ar002,.i-ar003,.i-ar004,.i-ar005,.i-ar006,.i-ar007,.i-ar008,.i-ar009,.i-ar010,.i-ar011,.i-ar012,.i-ar013,.i-ar014,.i-ar015,.i-ar016,.i-ar017,.i-ar018,.i-ar019,.i-ar020,.i-ar021,.i-ar022,.i-ar023,.i-ar024,.i-ar025,.i-ar026,.i-ar027,.i-ar028,.i-ar029,.i-he001,.i-he002,.i-he003,.i-he004,.i-he005,.i-he006,.i-he007,.i-he008,.i-he009,.i-he010,.i-he011,.i-he012,.i-he013,.i-he014,.i-he015,.i-he016,.i-he017,.i-he018,.i-he019,.i-he020,.i-he021,.i-he022,.i-he023,.i-he024,.i-he025,.i-he026,.i-he027,.i-he028,.i-he029,.i-he030,.i-he031,.i-he032,.i-he033{background-image:url("../img/icons-pieces.png");--n:10}
.i-ar001{--c:0;--r:0}
.i-ar002{--c:1;--r:0}
.i-ar003{--c:2;--r:0}
.i-ar004{--c:3;--r:0}
.i-ar005{--c:4;--r:0}
.i-ar006{--c:5;--r:0}
.i-ar007{--c:6;--r:0}
.i-ar008{--c:7;--r:0}
.i-ar009{--c:8;--r:0}
.i-ar010{--c:9;--r:0}
.i-ar011{--c:0;--r:1}
.i-ar012{--c:1;--r:1}
.i-ar013{--c:2;--r:1}
.i-ar014{--c:3;--r:1}
.i-ar015{--c:4;--r:1}
.i-ar016{--c:5;--r:1}
.i-ar017{--c:6;--r:1}
.i-ar018{--c:7;--r:1}
.i-ar019{--c:8;--r:1}
.i-ar020{--c:9;--r:1}
.i-ar021{--c:0;--r:2}
.i-ar022{--c:1;--r:2}
.i-ar023{--c:2;--r:2}
.i-ar024{--c:3;--r:2}
.i-ar025{--c:4;--r:2}
.i-ar026{--c:5;--r:2}
.i-ar027{--c:6;--r:2}
.i-ar028{--c:7;--r:2}
.i-ar029{--c:8;--r:2}
.i-he001{--c:9;--r:2}
.i-he002{--c:0;--r:3}
.i-he003{--c:1;--r:3}
.i-he004{--c:2;--r:3}
.i-he005{--c:3;--r:3}
.i-he006{--c:4;--r:3}
.i-he007{--c:5;--r:3}
.i-he008{--c:6;--r:3}
.i-he009{--c:7;--r:3}
.i-he010{--c:8;--r:3}
.i-he011{--c:9;--r:3}
.i-he012{--c:0;--r:4}
.i-he013{--c:1;--r:4}
.i-he014{--c:2;--r:4}
.i-he015{--c:3;--r:4}
.i-he016{--c:4;--r:4}
.i-he017{--c:5;--r:4}
.i-he018{--c:6;--r:4}
.i-he019{--c:7;--r:4}
.i-he020{--c:8;--r:4}
.i-he021{--c:9;--r:4}
.i-he022{--c:0;--r:5}
.i-he023{--c:1;--r:5}
.i-he024{--c:2;--r:5}
.i-he025{--c:3;--r:5}
.i-he026{--c:4;--r:5}
.i-he027{--c:5;--r:5}
.i-he028{--c:6;--r:5}
.i-he029{--c:7;--r:5}
.i-he030{--c:8;--r:5}
.i-he031{--c:9;--r:5}
.i-he032{--c:0;--r:6}
.i-he033{--c:1;--r:6}
.i-hw001,.i-hw002,.i-hw003,.i-hw004,.i-hw005,.i-hw006,.i-hw007,.i-hw008,.i-hw009,.i-hw010,.i-hw011,.i-hw012,.i-hw013,.i-hw014,.i-hw015,.i-hw016,.i-hw017,.i-hw018,.i-hw019,.i-hw020,.i-hw021,.i-hw022,.i-hw023,.i-hw024,.i-hw025,.i-hw026,.i-hw027,.i-hw028,.i-hw029,.i-hw030,.i-hw031,.i-hw032,.i-hw033,.i-ha001,.i-ha002,.i-ha003,.i-ha004,.i-ha005,.i-ha006,.i-ha007,.i-ha008,.i-ha009,.i-ha010,.i-ha011,.i-ha012,.i-ha013,.i-ha014,.i-ha015,.i-ha016,.i-ha017,.i-ha018,.i-ha019,.i-ha020,.i-ha021,.i-ha022,.i-ha023,.i-ha024,.i-ha025,.i-ha026,.i-ha027,.i-ha028,.i-ha029,.i-ha030,.i-ha031,.i-ha032,.i-ha033{background-image:url("../img/icons-gear.png");--n:11}
.i-hw001{--c:0;--r:0}
.i-hw002{--c:1;--r:0}
.i-hw003{--c:2;--r:0}
.i-hw004{--c:3;--r:0}
.i-hw005{--c:4;--r:0}
.i-hw006{--c:5;--r:0}
.i-hw007{--c:6;--r:0}
.i-hw008{--c:7;--r:0}
.i-hw009{--c:8;--r:0}
.i-hw010{--c:9;--r:0}
.i-hw011{--c:10;--r:0}
.i-hw012{--c:0;--r:1}
.i-hw013{--c:1;--r:1}
.i-hw014{--c:2;--r:1}
.i-hw015{--c:3;--r:1}
.i-hw016{--c:4;--r:1}
.i-hw017{--c:5;--r:1}
.i-hw018{--c:6;--r:1}
.i-hw019{--c:7;--r:1}
.i-hw020{--c:8;--r:1}
.i-hw021{--c:9;--r:1}
.i-hw022{--c:10;--r:1}
.i-hw023{--c:0;--r:2}
.i-hw024{--c:1;--r:2}
.i-hw025{--c:2;--r:2}
.i-hw026{--c:3;--r:2}
.i-hw027{--c:4;--r:2}
.i-hw028{--c:5;--r:2}
.i-hw029{--c:6;--r:2}
.i-hw030{--c:7;--r:2}
.i-hw031{--c:8;--r:2}
.i-hw032{--c:9;--r:2}
.i-hw033{--c:10;--r:2}
.i-ha001{--c:0;--r:3}
.i-ha002{--c:1;--r:3}
.i-ha003{--c:2;--r:3}
.i-ha004{--c:3;--r:3}
.i-ha005{--c:4;--r:3}
.i-ha006{--c:5;--r:3}
.i-ha007{--c:6;--r:3}
.i-ha008{--c:7;--r:3}
.i-ha009{--c:8;--r:3}
.i-ha010{--c:9;--r:3}
.i-ha011{--c:10;--r:3}
.i-ha012{--c:0;--r:4}
.i-ha013{--c:1;--r:4}
.i-ha014{--c:2;--r:4}
.i-ha015{--c:3;--r:4}
.i-ha016{--c:4;--r:4}
.i-ha017{--c:5;--r:4}
.i-ha018{--c:6;--r:4}
.i-ha019{--c:7;--r:4}
.i-ha020{--c:8;--r:4}
.i-ha021{--c:9;--r:4}
.i-ha022{--c:10;--r:4}
.i-ha023{--c:0;--r:5}
.i-ha024{--c:1;--r:5}
.i-ha025{--c:2;--r:5}
.i-ha026{--c:3;--r:5}
.i-ha027{--c:4;--r:5}
.i-ha028{--c:5;--r:5}
.i-ha029{--c:6;--r:5}
.i-ha030{--c:7;--r:5}
.i-ha031{--c:8;--r:5}
.i-ha032{--c:9;--r:5}
.i-ha033{--c:10;--r:5}
.i-vip001,.i-it001,.i-it002,.i-it003,.i-it004,.i-it005,.i-mt001,.i-mt002,.i-mt003,.i-mt004,.i-mt005,.i-mt006,.i-mt007,.i-mt008,.i-mt009,.i-mt010,.i-mt011,.i-mt012,.i-mt013,.i-mt014,.i-mt015,.i-mt016,.i-mt017,.i-mt018,.i-mt020,.i-mt021,.i-mt022,.i-mt101,.i-mt102,.i-mt103,.i-mt104,.i-mt105,.i-mt106,.i-mt107,.i-mt108,.i-mt109,.i-mt110,.i-mt111,.i-mt112,.i-mt113,.i-mt114,.i-mt115,.i-mt116,.i-mt117,.i-mt118,.i-mt119,.i-mt120,.i-mt121,.i-mt122,.i-mt123,.i-mt125,.i-mt126,.i-mt127,.i-mt128,.i-mt129,.i-mt130,.i-mt131,.i-mt132,.i-mt133,.i-mt134,.i-mt135,.i-mt136,.i-mt137,.i-mt138,.i-mt139,.i-mt140,.i-mt141,.i-mt142,.i-mt143,.i-mt144,.i-mt145,.i-mt146,.i-mt147,.i-mt148,.i-mt149,.i-mt150,.i-mt151,.i-mt152,.i-mt153,.i-mt154,.i-mt155,.i-mt156,.i-mt157,.i-mt158,.i-mt159,.i-mt160,.i-mt161,.i-mt162,.i-mt163,.i-mt164,.i-mt165,.i-mt166,.i-mt167,.i-mt168,.i-mt169,.i-mt170{background-image:url("../img/icons-gifts.png");--n:12}
.i-vip001{--c:0;--r:0}
.i-it001{--c:1;--r:0}
.i-it002{--c:2;--r:0}
.i-it003{--c:3;--r:0}
.i-it004{--c:4;--r:0}
.i-it005{--c:5;--r:0}
.i-mt001{--c:6;--r:0}
.i-mt002{--c:7;--r:0}
.i-mt003{--c:8;--r:0}
.i-mt004{--c:9;--r:0}
.i-mt005{--c:10;--r:0}
.i-mt006{--c:11;--r:0}
.i-mt007{--c:0;--r:1}
.i-mt008{--c:1;--r:1}
.i-mt009{--c:2;--r:1}
.i-mt010{--c:3;--r:1}
.i-mt011{--c:4;--r:1}
.i-mt012{--c:5;--r:1}
.i-mt013{--c:6;--r:1}
.i-mt014{--c:7;--r:1}
.i-mt015{--c:8;--r:1}
.i-mt016{--c:9;--r:1}
.i-mt017{--c:10;--r:1}
.i-mt018{--c:11;--r:1}
.i-mt020{--c:0;--r:2}
.i-mt021{--c:1;--r:2}
.i-mt022{--c:2;--r:2}
.i-mt101{--c:3;--r:2}
.i-mt102{--c:4;--r:2}
.i-mt103{--c:5;--r:2}
.i-mt104{--c:6;--r:2}
.i-mt105{--c:7;--r:2}
.i-mt106{--c:8;--r:2}
.i-mt107{--c:9;--r:2}
.i-mt108{--c:10;--r:2}
.i-mt109{--c:11;--r:2}
.i-mt110{--c:0;--r:3}
.i-mt111{--c:1;--r:3}
.i-mt112{--c:2;--r:3}
.i-mt113{--c:3;--r:3}
.i-mt114{--c:4;--r:3}
.i-mt115{--c:5;--r:3}
.i-mt116{--c:6;--r:3}
.i-mt117{--c:7;--r:3}
.i-mt118{--c:8;--r:3}
.i-mt119{--c:9;--r:3}
.i-mt120{--c:10;--r:3}
.i-mt121{--c:11;--r:3}
.i-mt122{--c:0;--r:4}
.i-mt123{--c:1;--r:4}
.i-mt125{--c:2;--r:4}
.i-mt126{--c:3;--r:4}
.i-mt127{--c:4;--r:4}
.i-mt128{--c:5;--r:4}
.i-mt129{--c:6;--r:4}
.i-mt130{--c:7;--r:4}
.i-mt131{--c:8;--r:4}
.i-mt132{--c:9;--r:4}
.i-mt133{--c:10;--r:4}
.i-mt134{--c:11;--r:4}
.i-mt135{--c:0;--r:5}
.i-mt136{--c:1;--r:5}
.i-mt137{--c:2;--r:5}
.i-mt138{--c:3;--r:5}
.i-mt139{--c:4;--r:5}
.i-mt140{--c:5;--r:5}
.i-mt141{--c:6;--r:5}
.i-mt142{--c:7;--r:5}
.i-mt143{--c:8;--r:5}
.i-mt144{--c:9;--r:5}
.i-mt145{--c:10;--r:5}
.i-mt146{--c:11;--r:5}
.i-mt147{--c:0;--r:6}
.i-mt148{--c:1;--r:6}
.i-mt149{--c:2;--r:6}
.i-mt150{--c:3;--r:6}
.i-mt151{--c:4;--r:6}
.i-mt152{--c:5;--r:6}
.i-mt153{--c:6;--r:6}
.i-mt154{--c:7;--r:6}
.i-mt155{--c:8;--r:6}
.i-mt156{--c:9;--r:6}
.i-mt157{--c:10;--r:6}
.i-mt158{--c:11;--r:6}
.i-mt159{--c:0;--r:7}
.i-mt160{--c:1;--r:7}
.i-mt161{--c:2;--r:7}
.i-mt162{--c:3;--r:7}
.i-mt163{--c:4;--r:7}
.i-mt164{--c:5;--r:7}
.i-mt165{--c:6;--r:7}
.i-mt166{--c:7;--r:7}
.i-mt167{--c:8;--r:7}
.i-mt168{--c:9;--r:7}
.i-mt169{--c:10;--r:7}
.i-mt170{--c:11;--r:7}
.i-mt171,.i-mt172,.i-mt173,.i-mt174,.i-mt175,.i-mt176,.i-mt177,.i-mt178,.i-mt179,.i-mt180,.i-mt181,.i-mt182,.i-mt183,.i-mt184,.i-mt185,.i-mt186,.i-mt187,.i-mt188,.i-mt189,.i-mt190,.i-mt191,.i-mt192,.i-mt193,.i-mt194,.i-mt195,.i-mt196,.i-mt197,.i-mt198,.i-mt199,.i-mt201,.i-mt202,.i-mt203,.i-mt204,.i-mt205,.i-mt206,.i-mt207,.i-mt208,.i-mt209,.i-mt210,.i-mt211,.i-mt212,.i-mt213,.i-mt214,.i-mt215,.i-mt216,.i-mt217,.i-mt218,.i-mt219,.i-mt220,.i-mt221,.i-mt222,.i-mt223,.i-mt224,.i-mt225,.i-mt226,.i-mt228,.i-mt229,.i-mt230,.i-mt231,.i-mt232,.i-mt233,.i-mt234,.i-mt235,.i-mt236,.i-mt237,.i-mt238,.i-mt239,.i-mt240,.i-mt241,.i-mt242,.i-mt243,.i-mt244,.i-mt245,.i-mt246,.i-mt247,.i-mt248,.i-mt249,.i-mt250,.i-mt251,.i-mt252,.i-mt253,.i-mt254,.i-mt255,.i-mt256,.i-mt257,.i-mt258,.i-mt259,.i-mt260,.i-mt261,.i-mt262,.i-mt263,.i-mt264,.i-mt265,.i-mt301,.i-mt302,.i-mt303,.i-mt304{background-image:url("../img/icons-gifts-2.png");--n:12}
.i-mt171{--c:0;--r:0}
.i-mt172{--c:1;--r:0}
.i-mt173{--c:2;--r:0}
.i-mt174{--c:3;--r:0}
.i-mt175{--c:4;--r:0}
.i-mt176{--c:5;--r:0}
.i-mt177{--c:6;--r:0}
.i-mt178{--c:7;--r:0}
.i-mt179{--c:8;--r:0}
.i-mt180{--c:9;--r:0}
.i-mt181{--c:10;--r:0}
.i-mt182{--c:11;--r:0}
.i-mt183{--c:0;--r:1}
.i-mt184{--c:1;--r:1}
.i-mt185{--c:2;--r:1}
.i-mt186{--c:3;--r:1}
.i-mt187{--c:4;--r:1}
.i-mt188{--c:5;--r:1}
.i-mt189{--c:6;--r:1}
.i-mt190{--c:7;--r:1}
.i-mt191{--c:8;--r:1}
.i-mt192{--c:9;--r:1}
.i-mt193{--c:10;--r:1}
.i-mt194{--c:11;--r:1}
.i-mt195{--c:0;--r:2}
.i-mt196{--c:1;--r:2}
.i-mt197{--c:2;--r:2}
.i-mt198{--c:3;--r:2}
.i-mt199{--c:4;--r:2}
.i-mt201{--c:5;--r:2}
.i-mt202{--c:6;--r:2}
.i-mt203{--c:7;--r:2}
.i-mt204{--c:8;--r:2}
.i-mt205{--c:9;--r:2}
.i-mt206{--c:10;--r:2}
.i-mt207{--c:11;--r:2}
.i-mt208{--c:0;--r:3}
.i-mt209{--c:1;--r:3}
.i-mt210{--c:2;--r:3}
.i-mt211{--c:3;--r:3}
.i-mt212{--c:4;--r:3}
.i-mt213{--c:5;--r:3}
.i-mt214{--c:6;--r:3}
.i-mt215{--c:7;--r:3}
.i-mt216{--c:8;--r:3}
.i-mt217{--c:9;--r:3}
.i-mt218{--c:10;--r:3}
.i-mt219{--c:11;--r:3}
.i-mt220{--c:0;--r:4}
.i-mt221{--c:1;--r:4}
.i-mt222{--c:2;--r:4}
.i-mt223{--c:3;--r:4}
.i-mt224{--c:4;--r:4}
.i-mt225{--c:5;--r:4}
.i-mt226{--c:6;--r:4}
.i-mt228{--c:7;--r:4}
.i-mt229{--c:8;--r:4}
.i-mt230{--c:9;--r:4}
.i-mt231{--c:10;--r:4}
.i-mt232{--c:11;--r:4}
.i-mt233{--c:0;--r:5}
.i-mt234{--c:1;--r:5}
.i-mt235{--c:2;--r:5}
.i-mt236{--c:3;--r:5}
.i-mt237{--c:4;--r:5}
.i-mt238{--c:5;--r:5}
.i-mt239{--c:6;--r:5}
.i-mt240{--c:7;--r:5}
.i-mt241{--c:8;--r:5}
.i-mt242{--c:9;--r:5}
.i-mt243{--c:10;--r:5}
.i-mt244{--c:11;--r:5}
.i-mt245{--c:0;--r:6}
.i-mt246{--c:1;--r:6}
.i-mt247{--c:2;--r:6}
.i-mt248{--c:3;--r:6}
.i-mt249{--c:4;--r:6}
.i-mt250{--c:5;--r:6}
.i-mt251{--c:6;--r:6}
.i-mt252{--c:7;--r:6}
.i-mt253{--c:8;--r:6}
.i-mt254{--c:9;--r:6}
.i-mt255{--c:10;--r:6}
.i-mt256{--c:11;--r:6}
.i-mt257{--c:0;--r:7}
.i-mt258{--c:1;--r:7}
.i-mt259{--c:2;--r:7}
.i-mt260{--c:3;--r:7}
.i-mt261{--c:4;--r:7}
.i-mt262{--c:5;--r:7}
.i-mt263{--c:6;--r:7}
.i-mt264{--c:7;--r:7}
.i-mt265{--c:8;--r:7}
.i-mt301{--c:9;--r:7}
.i-mt302{--c:10;--r:7}
.i-mt303{--c:11;--r:7}
.i-mt304{--c:0;--r:8}
.i-cur-gold,.i-cur-gems,.i-cur-moecrystals,.i-cur-moetickets,.i-cur-avatarequipgachatickets,.i-cur-artifactgachatickets,.i-cur-heroequipgachatickets,.i-cur-tokenshards,.i-cur-cp,.i-star,.i-lv-act-1,.i-lv-act-2,.i-lv-act-3,.i-lv-act-4,.i-lv-act-5,.i-lv-norm-1,.i-lv-norm-2,.i-lv-norm-3,.i-lv-norm-4,.i-lv-norm-5,.i-extra-lv-act-1,.i-extra-lv-act-2,.i-extra-lv-act-3,.i-extra-lv-norm-1,.i-extra-lv-norm-2,.i-extra-lv-norm-3,.i-slot-0,.i-slot-1,.i-slot-2,.i-slot-3,.i-slot-4{background-image:url("../img/icons-small.png");--n:8}
.i-cur-gold{--c:0;--r:0}
.i-cur-gems{--c:1;--r:0}
.i-cur-moecrystals{--c:2;--r:0}
.i-cur-moetickets{--c:3;--r:0}
.i-cur-avatarequipgachatickets{--c:4;--r:0}
.i-cur-artifactgachatickets{--c:5;--r:0}
.i-cur-heroequipgachatickets{--c:6;--r:0}
.i-cur-tokenshards{--c:7;--r:0}
.i-cur-cp{--c:0;--r:1}
.i-star{--c:1;--r:1}
.i-lv-act-1{--c:2;--r:1}
.i-lv-act-2{--c:3;--r:1}
.i-lv-act-3{--c:4;--r:1}
.i-lv-act-4{--c:5;--r:1}
.i-lv-act-5{--c:6;--r:1}
.i-lv-norm-1{--c:7;--r:1}
.i-lv-norm-2{--c:0;--r:2}
.i-lv-norm-3{--c:1;--r:2}
.i-lv-norm-4{--c:2;--r:2}
.i-lv-norm-5{--c:3;--r:2}
.i-extra-lv-act-1{--c:4;--r:2}
.i-extra-lv-act-2{--c:5;--r:2}
.i-extra-lv-act-3{--c:6;--r:2}
.i-extra-lv-norm-1{--c:7;--r:2}
.i-extra-lv-norm-2{--c:0;--r:3}
.i-extra-lv-norm-3{--c:1;--r:3}
.i-slot-0{--c:2;--r:3}
.i-slot-1{--c:3;--r:3}
.i-slot-2{--c:4;--r:3}
.i-slot-3{--c:5;--r:3}
.i-slot-4{--c:6;--r:3}
.i-av-default-head,.i-av-ash-head-1,.i-av-ash-head-2,.i-av-batman-head-1,.i-av-batman-head-2,.i-av-demi-god-head-1,.i-av-goku-head-1,.i-av-goku-head-2,.i-av-iroman-head-1,.i-av-iroman-head-2,.i-av-luigi-head-1,.i-av-mario-head-1,.i-av-saber-head-1,.i-av-saber-head-2,.i-av-saber-head-3,.i-av-default-body,.i-av-ash-body-1,.i-av-ash-body-2,.i-av-batman-body-1,.i-av-batman-body-2,.i-av-demi-god-body-1,.i-av-demi-god-body-2,.i-av-goku-body-1,.i-av-goku-body-2,.i-av-iroman-body-1,.i-av-iroman-body-2,.i-av-luigi-body-1,.i-av-mario-body-1,.i-av-saber-body-1,.i-av-saber-body-2,.i-av-default-weapon,.i-av-ash-weapon-1,.i-av-ash-weapon-2,.i-av-batman-weapon-1,.i-av-batman-weapon-2,.i-av-demi-god-weapon-1,.i-av-demi-god-weapon-2,.i-av-demi-god-weapon-3,.i-av-goku-weapon-1,.i-av-iroman-weapon-1,.i-av-iroman-weapon-2,.i-av-luigi-weapon-1,.i-av-luigi-weapon-2,.i-av-mario-weapon-1,.i-av-mario-weapon-2,.i-av-saber-weapon-1,.i-av-saber-weapon-2,.i-av-default-slash,.i-av-default-air{background-image:url("../img/icons-avatar.png");--n:8}
.i-av-default-head{--c:0;--r:0}
.i-av-ash-head-1{--c:1;--r:0}
.i-av-ash-head-2{--c:2;--r:0}
.i-av-batman-head-1{--c:3;--r:0}
.i-av-batman-head-2{--c:4;--r:0}
.i-av-demi-god-head-1{--c:5;--r:0}
.i-av-goku-head-1{--c:6;--r:0}
.i-av-goku-head-2{--c:7;--r:0}
.i-av-iroman-head-1{--c:0;--r:1}
.i-av-iroman-head-2{--c:1;--r:1}
.i-av-luigi-head-1{--c:2;--r:1}
.i-av-mario-head-1{--c:3;--r:1}
.i-av-saber-head-1{--c:4;--r:1}
.i-av-saber-head-2{--c:5;--r:1}
.i-av-saber-head-3{--c:6;--r:1}
.i-av-default-body{--c:7;--r:1}
.i-av-ash-body-1{--c:0;--r:2}
.i-av-ash-body-2{--c:1;--r:2}
.i-av-batman-body-1{--c:2;--r:2}
.i-av-batman-body-2{--c:3;--r:2}
.i-av-demi-god-body-1{--c:4;--r:2}
.i-av-demi-god-body-2{--c:5;--r:2}
.i-av-goku-body-1{--c:6;--r:2}
.i-av-goku-body-2{--c:7;--r:2}
.i-av-iroman-body-1{--c:0;--r:3}
.i-av-iroman-body-2{--c:1;--r:3}
.i-av-luigi-body-1{--c:2;--r:3}
.i-av-mario-body-1{--c:3;--r:3}
.i-av-saber-body-1{--c:4;--r:3}
.i-av-saber-body-2{--c:5;--r:3}
.i-av-default-weapon{--c:6;--r:3}
.i-av-ash-weapon-1{--c:7;--r:3}
.i-av-ash-weapon-2{--c:0;--r:4}
.i-av-batman-weapon-1{--c:1;--r:4}
.i-av-batman-weapon-2{--c:2;--r:4}
.i-av-demi-god-weapon-1{--c:3;--r:4}
.i-av-demi-god-weapon-2{--c:4;--r:4}
.i-av-demi-god-weapon-3{--c:5;--r:4}
.i-av-goku-weapon-1{--c:6;--r:4}
.i-av-iroman-weapon-1{--c:7;--r:4}
.i-av-iroman-weapon-2{--c:0;--r:5}
.i-av-luigi-weapon-1{--c:1;--r:5}
.i-av-luigi-weapon-2{--c:2;--r:5}
.i-av-mario-weapon-1{--c:3;--r:5}
.i-av-mario-weapon-2{--c:4;--r:5}
.i-av-saber-weapon-1{--c:5;--r:5}
.i-av-saber-weapon-2{--c:6;--r:5}
.i-av-default-slash{--c:7;--r:5}
.i-av-default-air{--c:0;--r:6}
/* -- end of the icons -- */

/* -- the studio of a Moetan: her values, the stage with its timeline, and her pictures ---- */

.studio { display: grid; grid-template-columns: 22rem minmax(0, 1fr) 21rem; gap: var(--gap); align-items: start; }
.st-middle { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.st-values, .st-assets { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.st-stage .card-head { flex-wrap: wrap; gap: .5rem; }
.st-stage .chips { margin: 0; }
.st-screen { display: grid; place-items: center; padding: .75rem; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.st-canvas { display: block; width: 100%; max-width: 34rem; height: auto; aspect-ratio: 1; }
.st-poster { max-height: 28rem; border-radius: 10px; }
.st-transport { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .625rem 1rem; border-top: 1px solid var(--rule); }
.st-scrub { flex: 1 1 10rem; min-width: 0; accent-color: var(--pink); }
.st-check { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; }
.st-note { margin: 0; padding: .625rem 1rem; }
.st-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; padding: .75rem; background: var(--navy) url("../img/board-bg.png") 0 0 / 106px 240% repeat-x; }
.st-level { margin: 0; padding: .5rem; border: 3px solid var(--pink); border-radius: 10px; background: var(--paper); text-align: center; font-size: .875rem; }
.st-level svg { display: block; width: 100%; height: auto; max-height: 18rem; }
.st-body { fill: var(--cell); stroke: var(--name); stroke-width: .05; }
.st-trigger { fill: rgba(245, 67, 153, .35); stroke: var(--pink-deep); stroke-width: .04; }
.st-clips { list-style: none; margin: 0; padding: .5rem 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.st-clip { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 13rem; align-items: center; gap: .75rem; padding: .25rem .375rem; border-radius: var(--radius-s); }
.st-clip.is-playing { background: var(--cell); }
.st-clip-name { justify-self: start; padding: .125rem .5rem; border: 1px solid var(--line-field); border-radius: var(--radius-s); background: #FFF; color: var(--ink); font: inherit; text-align: left; overflow-wrap: anywhere; }
button.st-clip-name { cursor: pointer; }
button.st-clip-name:hover, .st-clip.is-playing .st-clip-name { border-color: var(--pink); color: var(--pink-deep); }
.st-track { display: block; height: 1.125rem; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--rule) calc(10% - 1px) 10%); }
.st-bar { display: block; height: 100%; border-radius: 4px; background: var(--pink); }
.st-clip.is-playing .st-bar { background: var(--gold); }
.st-clip-facts { font-size: .8125rem; color: var(--dim); text-align: right; }
.st-pictures { list-style: none; margin: 0; padding: .625rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 6px; }
.st-picture { display: flex; flex-direction: column; gap: .25rem; padding: .25rem; border: 2px solid var(--rule); border-radius: var(--radius-s); background: #FFF; color: var(--ink); font-size: .6875rem; line-height: 1.15; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.st-picture img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--soft); }
.st-picture:hover { border-color: var(--pink); }
.st-picture[aria-current="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--pink); }
.st-chosen { display: flex; flex-direction: column; gap: .625rem; padding: .75rem 1rem 1rem; border-top: 1px solid var(--rule); }
.st-chosen > * { margin: 0; }
.st-chosen h3 { overflow-wrap: anywhere; }
.st-chosen-picture { display: grid; place-items: center; padding: .5rem; background: var(--soft); border-radius: var(--radius-s); }
.st-chosen-picture img { max-width: 100%; max-height: 16rem; width: auto; height: auto; }
.st-chosen form { display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 86rem) {
  .studio { grid-template-columns: minmax(0, 1fr) 20rem; }
  .st-values { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 56rem) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .st-assets { position: static; max-height: none; }
  .st-clip { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
  .st-clip-facts { text-align: left; }
}
.len-1 { width: 5%; }
.len-2 { width: 10%; }
.len-3 { width: 15%; }
.len-4 { width: 20%; }
.len-5 { width: 25%; }
.len-6 { width: 30%; }
.len-7 { width: 35%; }
.len-8 { width: 40%; }
.len-9 { width: 45%; }
.len-10 { width: 50%; }
.len-11 { width: 55%; }
.len-12 { width: 60%; }
.len-13 { width: 65%; }
.len-14 { width: 70%; }
.len-15 { width: 75%; }
.len-16 { width: 80%; }
.len-17 { width: 85%; }
.len-18 { width: 90%; }
.len-19 { width: 95%; }
.len-20 { width: 100%; }
.st-tracks { display: block; width: 100%; height: auto; border-top: 1px solid var(--rule); background: #FFF; cursor: pointer; }
.st-canvas.is-moving { cursor: grabbing; }
.st-transport select { height: 1.75rem; padding: 0 .25rem; }
.st-sides { margin: 0; padding: .5rem .75rem 0; }
.st-node { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--rule); }
.st-node > * { margin: 0; }
.st-node h3 { overflow-wrap: anywhere; font-size: 1rem; }
.st-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.st-field { display: flex; flex-direction: column; gap: .125rem; font-size: .8125rem; color: var(--dim); }
.st-field input { width: 100%; min-width: 0; height: 2rem; padding: 0 .5rem; border: 1px solid var(--line-field); border-radius: var(--radius-s); background: #FFF; color: var(--ink); font-family: var(--mono); font-size: .875rem; }
.st-layers { list-style: none; margin: 0; padding: .5rem; display: flex; flex-direction: column; gap: 1px; }
.st-layer { display: flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; border-radius: var(--radius-s); color: var(--ink); font-size: .8125rem; text-decoration: none; overflow-wrap: anywhere; }
.st-layer:hover { background: var(--cell); }
.st-layer[aria-current="true"] { background: var(--pink); color: #FFF; }
.st-layer.is-hidden { opacity: .55; }
.st-layer-kind { flex: none; width: .625rem; height: .625rem; border-radius: 50%; border: 2px solid var(--sky); }
.st-layer-kind.k-sprite { border-radius: 2px; border-color: var(--pink-deep); background: var(--gold); }
.st-layer-kind.k-node { background: transparent; }
.depth-1 { margin-left: .75rem; }
.depth-2 { margin-left: 1.5rem; }
.depth-3 { margin-left: 2.25rem; }
.depth-4 { margin-left: 3rem; }
.depth-0 { margin-left: 0; }
.st-modes { margin: 0; padding: .5rem .75rem; border-bottom: 1px solid var(--rule); }
.st-level-side { display: flex; flex-direction: column; gap: .625rem; padding: .75rem 1rem; }
.st-level-side > * { margin: 0; }
.st-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.st-place { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border: 2px solid var(--rule); border-radius: var(--radius-s); background: #FFF; color: var(--ink); font-size: .875rem; text-decoration: none; }
.st-place b { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: #FFF; font-size: .8125rem; }
.st-place:hover { border-color: var(--pink); }
.st-place[aria-current="true"] { border-color: var(--gold); background: #FFF8E1; }
.st-place[aria-current="true"] b { background: var(--gold); color: var(--ink); }
.st-move { padding: 0; border: 0; }
.st-part { margin: 0; padding: .75rem 1rem 0; border-top: 1px solid var(--rule); }
.st-part + .st-chosen { border-top: 0; padding-top: .5rem; }
.st-place-whole b { background: var(--sky); }
.st-how { margin: 0; padding-left: 1.125rem; display: grid; gap: .125rem; }
.st-level-side form { margin: 0; }
.st-zoom .muted { font-size: .875rem; }
.pill[hidden] { display: none; }
.st-canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.st-zoom .muted { flex: 1 1 16rem; }
.st-motions { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-motion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .5rem; padding: .375rem .625rem .25rem; border: 2px solid var(--rule); border-radius: var(--radius-s); background: #FFF; color: var(--ink); text-decoration: none; }
.st-motion strong { color: var(--name); }
.st-motion span { grid-column: 1; font-size: .8125rem; color: var(--dim); line-height: 1.25; }
.st-motion small { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .75rem; color: var(--dim); text-align: right; }
.st-motion:hover { border-color: var(--pink); }
.st-motion[aria-current="true"] { border-color: var(--gold); background: #FFF8E1; }
.st-motion-form { padding-top: .625rem; border-top: 1px solid var(--rule); }
.st-motion-form .st-field input { font-family: inherit; }
.st-slider { display: flex; flex-direction: column; gap: .125rem; margin: 0; font-size: .875rem; color: var(--maroon); }
.st-slider > span { display: flex; justify-content: space-between; gap: .5rem; }
.st-slider output { font-family: var(--mono); color: var(--ink); }
.st-slider input { width: 100%; accent-color: var(--pink); }
.st-slider.is-none { opacity: .7; }
.st-lanes { display: block; width: 100%; height: auto; border-top: 1px solid var(--rule); background: #FFF; cursor: pointer; }
.st-play { min-width: 4.5rem; }
.st-more { flex: 1 1 100%; font-size: .875rem; }
.st-more summary { cursor: pointer; color: var(--dim); }
.st-more-in { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-top: .5rem; }
.st-parts { min-width: 0; margin: 0; padding: .375rem .625rem .5rem; border: 2px solid var(--rule); border-radius: var(--radius-s); display: grid; gap: .25rem; }
.st-parts legend { padding: 0 .25rem; font-size: .875rem; color: var(--maroon); }
.sc-waiting { margin: 0; padding: 2rem 1rem; color: #FFF; text-align: center; }
.sc-stack { display: grid; width: 100%; max-width: 40rem; }
.sc-stack > canvas { grid-area: 1 / 1; max-width: none; }
.sc-over { position: relative; }
.st-place.is-off { opacity: .6; }
.st-place small { margin-left: auto; color: var(--dim); }
.vo-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: .75rem; padding: .75rem; align-items: start; }
.vo-group { min-width: 0; padding: .625rem .75rem .75rem; border: 2px solid var(--rule); border-radius: 10px; background: var(--paper); display: flex; flex-direction: column; gap: .5rem; }
.vo-group > * { margin: 0; }
.vo-group h3 { color: var(--name); font-size: 1.0625rem; }
.vo-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vo-clip { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); align-items: center; gap: .625rem; padding: .25rem .5rem; border: 2px solid var(--rule); border-radius: var(--radius-s); background: #FFF; }
.vo-name { display: flex; flex-direction: column; min-width: 0; }
.vo-name small { color: var(--dim); font-size: .75rem; }
.vo-clip audio { width: 100%; height: 2rem; }
@media (max-width: 30rem) { .vo-clip { grid-template-columns: minmax(0, 1fr); } }

/* -- the gacha banners: cards, the machines of the one that is open, and its pool ---------- */

.gb-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.gb-banner { display: flex; flex-direction: column; gap: .25rem; padding: .625rem .75rem; border: 3px solid var(--frame); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; }
.gb-banner:hover { border-color: var(--pink); }
.gb-banner.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px var(--pink); }
.gb-banner.is-free { background: var(--cream); }
.gb-banner strong { color: var(--name); font-size: 1.0625rem; line-height: 1.2; }
.gb-banner small { color: var(--dim); font-size: .8125rem; }
.gb-prices { display: flex; flex-direction: column; font-size: .875rem; }
.gb-prices b { color: var(--maroon); font-weight: normal; }
.gb-pills { margin-top: auto; padding-top: .25rem; }
.gb-body { display: flex; flex-direction: column; gap: .875rem; }
.gb-body > * { margin: 0; }
.gb-machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.gb-machine { padding: .625rem .75rem; border: 2px solid var(--rule); border-radius: 10px; background: #FFF; }
.gb-machine h3 { margin: 0; font-size: 1rem; color: var(--maroon); }
.gb-machine p { margin: .125rem 0 0; }
.gb-price strong { font-size: 1.375rem; color: var(--name); }
.gb-price a { margin-left: .5rem; font-size: .875rem; }
.gb-pool { display: flex; flex-direction: column; gap: .625rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.gb-pool > * { margin: 0; }
.gb-pool-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.gb-pool-head h3 { margin: 0; }
.gb-pool-head h3 .muted { font-size: .875rem; }
.gb-bar { display: block; width: 100%; height: 1.5rem; border: 2px solid var(--frame); border-radius: 8px; background: var(--soft); }
.gb-part.p1, .gb-key.p1 { fill: var(--pink); background: var(--pink); }
.gb-part.p2, .gb-key.p2 { fill: var(--violet); background: var(--violet); }
.gb-part.p3, .gb-key.p3 { fill: var(--sky); background: var(--sky); }
.gb-part.p4, .gb-key.p4 { fill: var(--gold); background: var(--gold); }
.gb-part.p5, .gb-key.p5 { fill: var(--ok); background: var(--ok); }
.gb-part.p6, .gb-key.p6 { fill: var(--neu); background: var(--neu); }
.gb-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; }
.gb-legend li { display: flex; align-items: center; gap: .375rem; }
.gb-key { width: .75rem; height: .75rem; border-radius: 3px; }
.gb-kind h4, .gb-table caption { margin: 0 0 .375rem; color: var(--maroon); font-size: .9375rem; text-align: left; }
.gb-kind h4 .muted, .gb-table caption .muted { font-size: .8125rem; }
.gb-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 5px; }
.gb-item { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .25rem .5rem; border: 2px solid var(--rule); border-radius: 8px; background: #FFF; font-size: .8125rem; }
.gb-item.is-changed { border-color: var(--gold); background: #FFF8E1; }
.gb-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.gb-chance { flex: none; color: var(--dim); font-size: .75rem; }
.gb-edit { display: flex; flex-direction: column; gap: .75rem; }
.gb-edit > * { margin: 0; }
.gb-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.gb-table thead th { padding: .25rem .5rem; border-bottom: 2px solid var(--rule); color: var(--dim); font-weight: normal; text-align: left; }
.gb-table tbody th, .gb-table td { padding: .1875rem .5rem; border-bottom: 1px solid var(--rule); font-weight: normal; text-align: left; }
.gb-table input { width: 7rem; height: 1.875rem; padding: 0 .375rem; border: 2px solid var(--line-field); border-radius: 6px; background: #FFF; color: var(--ink); font-family: var(--mono); font-size: .875rem; }
.gb-table tr.is-changed input, .gb-table tr.is-typed input { border-color: var(--gold); background: #FFF8E1; }
.gb-table input.is-wrong { border-color: var(--bad); }
.gb-save { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border-left: 5px solid var(--gold); background: #FFF3C4; }
.gb-icons { display: flex; gap: 2px; min-height: 1.625rem; }
.gb-prices > span { display: flex; align-items: center; gap: .25rem; }
form.gb-price { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: .25rem 0 0; }
form.gb-price input { width: 6.5rem; height: 2.25rem; padding: 0 .5rem; border: 3px solid var(--line-field); border-radius: var(--radius-s); background: #FFF; color: var(--name); font: inherit; font-size: 1.25rem; }
p.gb-price { display: flex; align-items: center; gap: .375rem; }
.gb-gives { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.gb-item { align-items: center; justify-content: flex-start; }
.gb-item .gb-chance { margin-left: auto; }
.gb-table tbody th { display: flex; align-items: center; gap: .375rem; }
.gb-new { justify-content: center; border-style: dashed; background: transparent; color: #FFF; text-shadow: 0 1px 2px #000; }
.gb-new strong { color: #FFF; }
.gb-new small { color: #FFF; }
.gb-window { padding: .375rem .625rem; border-left: 5px solid var(--pink); background: var(--cell); border-radius: 4px; }

/* -- the news: the notices in numbers, and the desk they are read and written at ---------- */

.nw-kpis { display: grid; grid-template-columns: repeat(4, minmax(7rem, 9.5rem)) minmax(14rem, 1fr) minmax(14rem, 1fr); gap: .625rem; }
.nw-kpi { display: flex; flex-direction: column; justify-content: center; gap: .125rem; min-height: 4.5rem; padding: .5rem .75rem; border: 3px solid var(--frame); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; }
.nw-kpi b { font-size: 1.75rem; line-height: 1; color: var(--name); }
.nw-kpi > span { font-size: .8125rem; color: var(--dim); }
a.nw-kpi:hover { border-color: var(--pink); }
.nw-kpi.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px var(--pink); }
.nw-bar { height: .875rem; border-width: 0; border-radius: 5px; }
.nw-split small { display: flex; flex-wrap: wrap; gap: .125rem .625rem; font-size: .75rem; color: var(--dim); }
.nw-split small > span { display: inline-flex; align-items: center; gap: .25rem; }
.nw-yrs { display: flex; align-items: flex-end; gap: 4px; height: 2.75rem; }
.nw-yr { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 1px; }
.nw-yr i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--pink); }
.nw-yr small { font-size: .625rem; color: var(--dim); }
.nw-desk { display: grid; grid-template-columns: 23rem minmax(0, 1fr) 17rem; gap: var(--gap); align-items: start; }
.nw-col { position: sticky; top: 1rem; }
.nw-search { display: flex; gap: .375rem; padding: .5rem; border-bottom: 1px solid var(--rule); }
.nw-search input { flex: 1; min-width: 0; height: 2.125rem; padding: 0 .5rem; border: 2px solid var(--line-field); border-radius: var(--radius-s); background: #FFF; color: var(--ink); font: inherit; }
.nw-filter { margin: 0; padding: .5rem; border-bottom: 1px solid var(--rule); }
.nw-filter .chip small { margin-left: .375rem; opacity: .8; }
.nw-list { list-style: none; margin: 0; padding: .375rem; display: grid; gap: 2px; max-height: calc(100vh - 14rem); min-height: 12rem; overflow-y: auto; }
.nw-year { display: flex; justify-content: space-between; align-items: baseline; position: sticky; top: -.375rem; padding: .375rem .5rem .125rem; background: var(--paper); color: var(--maroon); font-size: .875rem; }
.nw-year small { color: var(--dim); font-size: .75rem; }
.nw-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: start; padding: .3125rem .5rem; border-radius: 8px; color: var(--ink); text-decoration: none; }
.nw-row:hover { background: var(--cell); }
.nw-row[aria-current="true"] { background: #FFF8E1; box-shadow: inset 0 0 0 2px var(--gold); }
.nw-row.is-hidden { opacity: .55; }
.nw-thumb { width: 2.25rem; height: 1.5rem; margin-top: .125rem; border-radius: 4px; background: var(--soft); }
.nw-thumb.has { background: linear-gradient(135deg, var(--pink-deep), var(--pink)); }
.nw-rt { display: flex; flex-direction: column; min-width: 0; }
.nw-rt strong { font-weight: normal; color: var(--name); line-height: 1.2; overflow-wrap: anywhere; }
.nw-rt small { color: var(--dim); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-rd { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--dim); white-space: nowrap; }
.nw-dot { flex: none; display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; background: var(--neu); }
.nw-dot.t-news { background: var(--pink); }
.nw-dot.t-promotion { background: var(--violet); }
.nw-dot.t-releasenote { background: var(--sky); }
.nw-count, .nw-none { margin: 0; padding: .375rem .75rem .625rem; font-size: .8125rem; }
.nw-mid { min-width: 0; }
.nw-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .875rem; border-bottom: 1px solid var(--rule); font-size: .875rem; }
.nw-seg { display: inline-flex; border: 2px solid var(--frame); border-radius: 8px; overflow: hidden; }
.nw-seg a { padding: .125rem .625rem; color: var(--ink); text-decoration: none; }
.nw-seg a[aria-current="true"] { background: var(--pink); color: #FFF; }
.nw-read { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.25rem 1.25rem; }
.nw-read > * { margin: 0; }
.nw-read h2 { color: var(--name); font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.nw-banner { display: block; max-width: 100%; max-height: 16rem; border-radius: 10px; }
.nw-nobanner { padding: .625rem .75rem; border: 2px dashed var(--line-field); background: var(--soft); color: var(--dim); font-size: .875rem; overflow-wrap: anywhere; }
.nw-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; color: var(--dim); font-size: .875rem; }
.nw-text { max-width: 46rem; line-height: 1.5; overflow-wrap: anywhere; }
.nw-written { max-width: 46rem; margin: 0; padding: .75rem; border-radius: var(--radius-s); background: var(--soft); font-family: var(--mono); font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.nw-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.nw-box { padding: .625rem .75rem .75rem; }
.nw-box h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--maroon); }
.nw-box p { margin: 0 0 .5rem; }
.nw-box .help { margin: .5rem 0 0; }
.nw-stack { display: flex; flex-direction: column; gap: .375rem; }
.nw-stack .btn { justify-content: center; }
.nw-near { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.nw-near a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .375rem; align-items: center; color: var(--ink); font-size: .875rem; line-height: 1.2; text-decoration: none; }
.nw-near a:hover span { text-decoration: underline; }
.nw-near small { grid-column: 2; color: var(--dim); font-size: .75rem; }
.nw-form { display: flex; flex-direction: column; gap: .25rem; }
.nw-form .field { max-width: none; }
.nw-ai { min-width: 0; margin: 0 0 1rem; padding: .625rem .875rem .75rem; border: 2px dashed var(--line-field); border-radius: 10px; background: var(--paper); }
.nw-ai > legend { padding: 0 .375rem; font-size: .9375rem; color: var(--maroon); }
.nw-ai .field { margin-bottom: .5rem; }
.nw-ai .actions { margin: 0; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.nw-preview { padding: .75rem; border: 2px dashed var(--line-field); border-radius: 10px; background: #FFF; }
.nw-preview > h3 { margin: 0 0 .25rem; color: var(--maroon); }
@media (max-width: 86rem) {
  .nw-desk { grid-template-columns: 21rem minmax(0, 1fr); }
  .nw-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .nw-side > * { flex: 1 1 15rem; }
  .nw-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nw-split, .nw-years { grid-column: span 2; }
}
@media (max-width: 56rem) {
  .nw-desk { grid-template-columns: minmax(0, 1fr); }
  .nw-col { position: static; }
  .nw-list { max-height: 22rem; }
  .nw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nw-h0 { height: 0%; }
.nw-h1 { height: 5%; }
.nw-h2 { height: 10%; }
.nw-h3 { height: 15%; }
.nw-h4 { height: 20%; }
.nw-h5 { height: 25%; }
.nw-h6 { height: 30%; }
.nw-h7 { height: 35%; }
.nw-h8 { height: 40%; }
.nw-h9 { height: 45%; }
.nw-h10 { height: 50%; }
.nw-h11 { height: 55%; }
.nw-h12 { height: 60%; }
.nw-h13 { height: 65%; }
.nw-h14 { height: 70%; }
.nw-h15 { height: 75%; }
.nw-h16 { height: 80%; }
.nw-h17 { height: 85%; }
.nw-h18 { height: 90%; }
.nw-h19 { height: 95%; }
.nw-h20 { height: 100%; }

/* A window over a page, opened by the script of the windows: it asks before something is done, or holds the
   pictures to choose from. The ground is the window's own, so a click beside it closes. */
dialog.modal { position: fixed; inset: 0; margin: auto; height: fit-content; width: 100%; max-width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 4px solid var(--frame); border-radius: 12px; background: var(--cream); color: var(--ink); box-shadow: 0 1.25rem 3.5rem rgba(42, 21, 18, .45); }
.card > dialog.modal, .upload-how > dialog.modal { margin: auto; }
dialog.modal::backdrop { background: rgba(42, 21, 18, .55); }
dialog.modal-wide { max-width: min(68rem, calc(100vw - 2rem)); }
.modal-in { padding: 1.25rem 1.5rem; }
.modal-in > h3, .modal-head h3 { margin: 0 0 .5rem; color: var(--maroon); font-size: 1.25rem; }
.modal-in .actions { margin-bottom: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.modal-head h3 { margin: 0; }

.upload-how .field[hidden], .upload-pick[hidden] { display: none; }
.upload-pick .actions { margin: 0 0 .375rem; }
.upload-pick .help { margin: 0 0 .25rem; }
.link { padding: 0; border: 0; background: none; color: var(--pink-deep); font: inherit; text-decoration: underline; cursor: pointer; }

.pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 1.25rem; align-items: start; }
.pick-side { min-width: 0; }
.pick-find { display: flex; align-items: center; gap: .625rem; margin: 0 0 .625rem; }
.pick-find input { flex: 1; min-width: 0; }
.pick-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pick-list { max-height: min(60vh, 34rem); overflow-y: auto; margin: 0; padding: 2px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.pick-list li[hidden] { display: none; }
.pick-item { width: 100%; padding: 0; border: 2px solid var(--line-field); border-radius: 8px; background: #FFF; color: var(--ink); font: inherit; text-align: left; overflow: hidden; cursor: pointer; }
.pick-item:hover, .pick-item:focus-visible { border-color: var(--pink); }
.pick-item[aria-pressed="true"] { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink); }
.pick-item img { display: block; width: 100%; height: auto; aspect-ratio: 550 / 238; object-fit: cover; background: var(--paper); }
.pick-item span { display: block; padding: .25rem .5rem .1875rem; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-look { position: sticky; top: 0; min-width: 0; }
.pick-large { aspect-ratio: 550 / 238; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line-field); border-radius: 8px; background: var(--paper); overflow: hidden; }
.pick-large img { width: 100%; height: 100%; object-fit: contain; }
.pick-large span { padding: 1rem; color: var(--dim); font-size: .875rem; text-align: center; }
.pick-name { min-height: 1.5rem; margin: .5rem 0 .75rem; font-size: .8125rem; overflow-wrap: anywhere; }
@media (max-width: 52rem) { .pick { grid-template-columns: minmax(0, 1fr); } .pick-look { position: static; order: -1; } .pick-list { max-height: 40vh; } }

/* The reports: counts and what needs attention across the top, and under them the desk of
   the notices again (.nw-desk), for the bug reports and for the errors. */
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .625rem; }
.rp-alarm b { color: #9A1036; }
.rp-health { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.rp-health > .card { margin: 0; }
.rp-attn { list-style: none; margin: 0; padding: .375rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.rp-attn a { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .625rem; align-items: center; padding: .4375rem .5rem; border-radius: 8px; color: var(--ink); font-size: .875rem; line-height: 1.3; text-decoration: none; }
.rp-attn a:hover { background: var(--cell); }
.rp-attn small { display: block; color: var(--dim); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-what { display: block; color: var(--name); overflow-wrap: anywhere; }
.rp-key { display: flex; gap: .875rem; font-size: .75rem; }
.rp-key i { display: inline-block; width: .625rem; height: .625rem; margin-right: .25rem; border-radius: 2px; }
.rp-k1, .rp-b1 { background: var(--pink); fill: var(--pink); }
.rp-k2, .rp-b2 { background: var(--navy); fill: var(--navy); }
.rp-week { display: block; width: calc(100% - 1.75rem); height: 5.25rem; margin: .875rem .875rem 0; border-bottom: 2px solid var(--rule); }
.rp-axis { display: flex; padding: .125rem .875rem .625rem; font-size: .6875rem; color: var(--dim); }
.rp-axis span { flex: 1; text-align: center; }
.rp-tabs .chip { min-height: 2.25rem; padding-inline: 1rem; font-size: 1.0625rem; }

.rp-dot { flex: none; width: .625rem; height: .625rem; margin-top: .3125rem; border-radius: 50%; background: var(--neu); }
.rp-dot.s-open { background: #D6223F; }
.rp-dot.s-in_progress { background: var(--warn); }
.rp-dot.s-resolved { background: var(--ok); }
.rp-who { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; font-size: .6875rem; color: var(--dim); white-space: nowrap; }
.rp-ava { flex: none; display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--navy); color: #FFF; font-size: .6875rem; line-height: 1; text-transform: uppercase; }
.rp-ava.rp-none { background: none; border: 1.5px dashed var(--line-field); color: var(--dim); }
.rp-quote { max-width: 46rem; padding: .75rem 1rem; border-left: 4px solid var(--pink); border-radius: 0 10px 10px 0; background: #FFF; line-height: 1.5; }
.rp-h { margin: 0 0 .375rem; font-size: 1rem; color: var(--maroon); }
.rp-thread { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.rp-thread li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; font-size: .875rem; line-height: 1.35; }
.rp-thread small { display: block; color: var(--dim); font-size: .75rem; overflow-wrap: anywhere; }
.rp-event { color: var(--dim); font-style: italic; }
.nw-box .field { max-width: none; }

.rp-order { margin: 0; padding: .375rem .625rem; border-bottom: 1px solid var(--rule); font-size: .8125rem; color: var(--dim); }
.rp-order a[aria-current="true"] { color: var(--name); text-decoration: none; }
.rp-erow { grid-template-columns: 3rem minmax(0, 1fr) 4rem; align-items: center; }
.rp-erow b { text-align: right; font-size: 1.0625rem; color: var(--name); font-variant-numeric: tabular-nums; }
.rp-erow strong { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-spark { display: block; width: 4rem; height: 1.25rem; fill: var(--pink); }
.rp-said { font-family: var(--mono); font-size: 1rem; line-height: 1.45; }
.rp-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
.rp-big div { display: flex; flex-direction: column; padding: .5rem .625rem; border: 2px solid var(--rule); border-radius: 8px; background: #FFF; }
.rp-big dd { margin: 0; font-size: 1.25rem; color: var(--name); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-big dt { font-size: .75rem; color: var(--dim); }
.rp-hours { padding: .5rem .625rem .25rem; border: 2px solid var(--rule); border-radius: 8px; background: #FFF; }
.rp-hours svg { display: block; width: 100%; height: 4.5rem; fill: var(--pink); border-bottom: 2px solid var(--rule); }
.rp-hours figcaption { display: flex; justify-content: space-between; padding-top: .125rem; font-size: .6875rem; color: var(--dim); }
@media (max-width: 70rem) { .rp-health, .rp-attn { grid-template-columns: minmax(0, 1fr); } }

/* The game data: the game as it is on the left, in the words of the game, and the one thing
   that is open on the right with what can be changed of it. */
.gd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.gd-nav .chip { min-height: 2.375rem; padding-inline: 1.125rem; font-size: 1.0625rem; }
.gd-raw { margin-left: auto; font-size: .875rem; color: #FFF; }
.gd-view { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--gap); align-items: start; }
.gd-view.gd-indexed { grid-template-columns: 13rem minmax(0, 1fr) 24rem; }
.gd-main { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.gd-main > .card, .gd-side > .card, .gd-view > .gd-index, .gd-group > .card { margin: 0; }
.gd-index { position: sticky; top: 1rem; padding: .5rem .375rem .625rem; }
.gd-index h4 { margin: .5rem .625rem .125rem; color: var(--maroon); font-size: .9375rem; }
.gd-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gd-index a { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .3125rem .625rem; border-radius: 8px; color: var(--ink); font-size: .9375rem; text-decoration: none; }
.gd-index a:hover { background: var(--cell); }
.gd-index small { color: var(--dim); font-size: .75rem; white-space: nowrap; }
.gd-side { position: sticky; top: 1rem; min-width: 0; }
.gd-sub { margin: 0; padding: .625rem .75rem; border-bottom: 1px solid var(--rule); }
.gd-kinds .chip small, .gd-sub .chip small { margin-left: .375rem; opacity: .8; }

.gd-shelf { list-style: none; margin: 0; padding: .875rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .875rem; }
.gd-prod { position: relative; display: flex; flex-direction: column; height: 100%; border: 3px solid var(--rule); border-radius: 14px; background: #FFF; color: var(--ink); text-decoration: none; overflow: hidden; }
.gd-prod:hover, .gd-day:hover, .gd-tile:hover, .gd-step:hover, .gd-art:hover, .gd-piece:hover, .gd-hero:hover { border-color: var(--pink); }
.gd-prod[aria-current="true"], .gd-day[aria-current="true"], .gd-tile[aria-current="true"], .gd-step[aria-current="true"], .gd-art[aria-current="true"], .gd-piece[aria-current="true"], .gd-hero[aria-current="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px var(--pink); }
.gd-pic { display: grid; place-items: center; height: 7rem; padding: .5rem; background: linear-gradient(var(--paper), var(--cream)); }
.gd-pic img { width: auto; max-width: 100%; height: 6rem; object-fit: contain; }
.gd-in { flex: 1; display: flex; flex-direction: column; gap: .25rem; padding: .5rem .75rem .625rem; }
.gd-in strong { font-weight: normal; color: var(--name); font-size: 1.0625rem; line-height: 1.2; overflow-wrap: anywhere; }
.gd-says { color: var(--dim); font-size: .8125rem; line-height: 1.35; overflow-wrap: anywhere; }
.gd-tag { margin-top: auto; align-self: flex-start; padding: .1875rem .625rem .0625rem; border-radius: 8px; background: var(--maroon); color: #FFF; font-size: .9375rem; }
.gd-tag small { font-size: .75rem; opacity: .85; }
.gd-ribbon { position: absolute; top: .5rem; left: .5rem; padding: .0625rem .5rem; border-radius: 6px; background: var(--pink); color: #FFF; font-size: .75rem; }
.gd-edited { padding: .0625rem .4375rem; border-radius: 6px; background: var(--gold); color: var(--ink); font-size: .6875rem; white-space: nowrap; }
.gd-prod > .gd-edited { position: absolute; top: .5rem; right: .5rem; }

.gd-days { list-style: none; margin: 0; padding: .875rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.gd-day { display: flex; flex-direction: column; align-items: center; gap: .25rem; height: 100%; padding: .75rem .5rem .625rem; border: 3px solid var(--rule); border-radius: 14px; background: #FFF; color: var(--ink); text-align: center; text-decoration: none; }
.gd-d { color: var(--maroon); font-size: .8125rem; }
.gd-day b { font-weight: normal; font-size: 1.75rem; line-height: 1; color: var(--name); font-variant-numeric: tabular-nums; }
.gd-day > span { font-size: .8125rem; }
.gd-vip { margin-top: .25rem; padding: .125rem .5rem; border-radius: 6px; background: #FFF3C4; font-size: .75rem; }
.gd-vip.gd-none { background: none; color: var(--dim); }
.gd-read { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

.gd-group { display: flex; flex-direction: column; gap: .75rem; }
.gd-ghead { margin: 0; padding: 0 .25rem; color: #FFF; font-size: 1.375rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.gd-sec > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .75rem 1rem .5rem; cursor: pointer; }
.gd-sec > summary h3, .gd-sechead h3 { margin: 0; color: var(--maroon); font-size: 1.125rem; }
.gd-sec > summary p, .gd-sechead p { margin: 0; color: var(--dim); font-size: .875rem; }
.gd-sum { margin-left: auto; color: var(--dim); font-size: .8125rem; }
.gd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .75rem; padding: .25rem 1rem 1rem; }
.gd-tile { display: flex; flex-direction: column; gap: .25rem; min-height: 7.5rem; padding: .75rem .875rem; border: 3px solid var(--rule); border-radius: 14px; background: #FFF; color: var(--ink); text-decoration: none; }
.gd-tile b { font-weight: normal; font-size: 2rem; line-height: 1; color: var(--name); font-variant-numeric: tabular-nums; }
.gd-tile b small { margin-left: .25rem; font-size: .9375rem; color: var(--dim); }
.gd-tile strong { font-weight: normal; font-size: .9375rem; line-height: 1.25; }
.gd-tile > span:last-child { margin-top: auto; color: var(--dim); font-size: .75rem; line-height: 1.3; }
.gd-tile.gd-off b { color: var(--dim); }
.gd-words .gd-tile b { font-size: 1.125rem; line-height: 1.2; overflow-wrap: anywhere; }
.gd-tile.gd-changed { background: #FFF8E1; border-color: var(--gold); }
.gd-flag { align-self: flex-start; padding: 0 .4375rem; border-radius: 6px; background: var(--gold); color: var(--ink); font-size: .6875rem; }
.gd-note { margin: 0; padding: 0 1rem .75rem; max-width: 46rem; font-size: .9375rem; line-height: 1.45; }
.gd-note b { font-weight: normal; color: var(--name); }
.gd-curve { display: block; width: calc(100% - 2rem); height: 6rem; margin: 0 1rem .25rem; border-bottom: 2px solid var(--rule); }
.gd-curve path { fill: none; stroke: var(--pink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.gd-axis { display: flex; justify-content: space-between; margin: 0 1rem .75rem; font-size: .6875rem; color: var(--dim); }
.gd-levels { width: 100%; border-collapse: collapse; font-size: .875rem; }
.gd-sec > .gd-levels { width: calc(100% - 2rem); margin: 0 1rem 1rem; }
.gd-levels th { padding: .25rem .5rem; text-align: right; font-weight: normal; font-size: .75rem; color: var(--dim); }
.gd-levels td { padding: .3125rem .5rem; border-top: 1px dashed var(--rule); text-align: right; color: var(--name); font-variant-numeric: tabular-nums; }
.gd-levels th:first-child, .gd-levels td:first-child { text-align: left; }
.gd-steps { list-style: none; margin: 0; padding: .25rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: .375rem; }
.gd-step { display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .5rem .25rem; border: 3px solid var(--rule); border-radius: 12px; background: #FFF; color: var(--ink); text-decoration: none; }
.gd-step small { color: var(--dim); font-size: .6875rem; }
.gd-step b { font-weight: normal; font-size: 1.25rem; color: var(--name); }
.gd-list { padding: 0 1rem .5rem; max-width: 30rem; }

.gd-sechead { padding: .75rem 1rem .25rem; }
.gd-arts { list-style: none; margin: 0; padding: .5rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .625rem; }
.gd-art { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: start; height: 100%; padding: .625rem .75rem .6875rem; border: 3px solid var(--rule); border-radius: 12px; background: #FFF; color: var(--ink); text-decoration: none; }
.gd-art > .ico { grid-row: 1 / span 2; align-self: center; }
.gd-art strong { font-weight: normal; color: var(--name); font-size: 1.0625rem; line-height: 1.2; }
.gd-rar { padding: .0625rem .4375rem; border-radius: 6px; background: var(--cell); font-size: .6875rem; white-space: nowrap; }
.gd-rar.gd-r1 { background: #DDF2D6; }
.gd-rar.gd-r2 { background: #E7DCF8; }
.gd-rar.gd-r3 { background: #FBD3E2; }
.gd-eff { grid-column: 2 / -1; font-size: .9375rem; line-height: 1.3; }
.gd-eff b { font-weight: normal; color: #1F7A1F; font-variant-numeric: tabular-nums; }
.gd-eff.gd-lowers b { color: #1D5FA8; }
.gd-cap { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--dim); }
.gd-bar { flex: 1; height: .375rem; border-radius: 4px; background: var(--soft); fill: var(--pink); }
.gd-bar.gd-endless { fill: #F58CBD; }
.gd-eq { list-style: none; margin: 0; padding: .875rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: .625rem; }
.gd-piece { display: flex; flex-direction: column; align-items: center; gap: .1875rem; height: 100%; padding: .5rem .375rem .5625rem; border: 3px solid var(--rule); border-bottom-width: 6px; border-radius: 12px; background: #FFF; color: var(--ink); text-align: center; text-decoration: none; }
.gd-piece.gd-r1 { border-bottom-color: #63B84F; }
.gd-piece.gd-r2 { border-bottom-color: #8E63D6; }
.gd-piece.gd-r3 { border-bottom-color: var(--pink); }
.gd-piece strong { font-weight: normal; color: var(--name); font-size: .875rem; line-height: 1.2; }
.gd-piece small, .gd-hero small { display: block; color: var(--dim); font-size: .6875rem; }
.gd-heroes { list-style: none; margin: 0; padding: .5rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .625rem; }
.gd-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; align-items: center; height: 100%; padding: .625rem .75rem; border: 3px solid var(--rule); border-radius: 12px; background: #FFF; color: var(--ink); text-decoration: none; }
.gd-hero strong { font-weight: normal; color: var(--name); font-size: 1.0625rem; }
.gd-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-top: .5rem; border-top: 1px dashed var(--rule); }
.gd-pair > span { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .8125rem; line-height: 1.2; }

.gd-pin { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.125rem 1.125rem; }
.gd-pin > * { margin: 0; }
.gd-crumb { color: var(--dim); font-size: .8125rem; }
.gd-phead { display: flex; align-items: center; gap: .875rem; }
.gd-phead img { max-width: 6rem; max-height: 6rem; border-radius: 10px; }
.gd-phead h2 { margin: 0; color: var(--name); font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.gd-about { color: var(--dim); line-height: 1.4; }
.gd-panel .field { max-width: none; margin-bottom: .625rem; }
.gd-num { display: flex; align-items: stretch; border: 2px solid var(--line-field); border-radius: 10px; background: #FFF; overflow: hidden; }
.gd-num input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 .75rem; border: 0; background: #FFF; color: var(--ink); font: inherit; font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.gd-num:focus-within { border-color: var(--pink); }
.gd-unit { display: grid; place-items: center; padding: 0 .75rem; border-left: 2px solid var(--line-field); background: var(--paper); color: var(--dim); font-size: .875rem; white-space: nowrap; }
.gd-was { margin: -.25rem 0 .625rem; font-size: .8125rem; color: var(--pink-deep); }
.gd-was b { font-weight: normal; }
.gd-save { padding-top: .75rem; border-top: 1px dashed var(--rule); }
.gd-h { margin: 0 0 .25rem; font-size: .9375rem; color: var(--maroon); }
.gd-pin > .gd-note { padding: 0; font-size: .8125rem; color: var(--dim); }
@media (max-width: 76rem) { .gd-view, .gd-view.gd-indexed { grid-template-columns: minmax(0, 1fr); } .gd-side, .gd-index { position: static; } .gd-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gd-arrange { margin: 0; padding: .5rem .875rem 0; font-size: .875rem; }
.gd-act { padding-top: .75rem; border-top: 1px dashed var(--rule); }
.gd-act .actions { margin: 0; }
.gd-order { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.gd-order li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .25rem .375rem .25rem .625rem; border: 2px solid var(--rule); border-radius: 8px; background: #FFF; font-size: .875rem; line-height: 1.25; }
.gd-order form { display: flex; gap: .25rem; }
.gd-order .btn { min-width: 2rem; padding-inline: .375rem; }
.gd-boardacts { padding: 0 .875rem .75rem; }
.gd-boardacts .actions { margin: 0; }

/* The audit log as a day book: the areas and the admins as chips, then a title bar for each
   day and a line for each entry: its time, who, a pill, the sentence and the way to what it
   was done to. A line that is open shows what changed in place, under it. */
.au-filters { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; }
.au-who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.au-who .chips { flex: 1 1 auto; }
.au-who .avatar { width: 1.375rem; height: 1.375rem; margin-right: .375rem; border-width: 1px; border-radius: 4px; font-size: .8125rem; }
.au-quiet { font-size: .875rem; white-space: nowrap; }
.au-book .card-head span { font-size: .875rem; }
.au-lines { list-style: none; margin: 0; padding: 0; }
.au-line { display: grid; grid-template-columns: 3.5rem auto 13rem minmax(0, 1fr) auto; gap: .375rem .875rem; align-items: center; padding: .5rem 1rem; border-bottom: 1px dashed var(--rule); }
.au-line:last-child { border-bottom: 0; }
.au-line.is-quiet { opacity: .6; }
.au-line.is-open { background: #FFF8E1; box-shadow: inset 4px 0 0 var(--gold); }
.au-time { color: var(--dim); font-size: .8125rem; }
.au-what { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; }
.au-x { padding: .0625rem .375rem 0; border-radius: 6px; background: var(--maroon); color: #FFF; font-size: .75rem; }
.au-say { min-width: 0; color: var(--name); line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.au-say:hover { color: #C2185B; }
.au-say small { display: block; color: var(--dim); font-size: .75rem; }
.au-on { font-size: .8125rem; white-space: nowrap; }
.au-drop { grid-column: 4 / -1; display: flex; flex-direction: column; gap: .625rem; padding: .25rem 0 .375rem; }
.au-drop > * { margin: 0; }
.au-cmp { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.au-cmp th { padding: .25rem .5rem; border-bottom: 2px solid var(--rule); color: var(--dim); font-size: .8125rem; font-weight: normal; text-align: left; }
.au-cmp td { padding: .375rem .5rem; border-bottom: 1px dashed var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.au-old { color: #8F1026; text-decoration: line-through; text-decoration-thickness: 1px; }
.au-new { color: #1B4D0C; }
.au-facts { max-width: 40rem; margin: 0; font-size: .875rem; }
.au-raw summary { color: var(--maroon); font-size: .875rem; cursor: pointer; }
.au-raw pre { margin: .375rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 60rem) {
  .au-line { grid-template-columns: 3rem minmax(0, 1fr); }
  .au-line > .avatar, .au-line > .au-what { display: none; }
  .au-on, .au-drop { grid-column: 2; }
}