/* The centre's pages: JSBridge's layout styles (Pages/Shared/_Layout.cshtml at
   213af15), moved into a file of their own. */
/* The table's own colours (css/table.css), so the lobby and the table are one place. */
:root { --felt-top: rgb(30 104 66); --felt-bottom: rgb(16 57 36); --page: #11161a; --chrome: #1b2227;
        --chrome-2: #242d33; --ink: #e8ece9; --ink-soft: #9fb0a8; --rule: #33403a; --accent: #f2c14e; --red: #ff6b6b; }
* { box-sizing: border-box; }
/* The scrollbar's room is kept whether or not there is one, so a page
   that grows or shrinks as it loads never moves its text: without it, a
   scrollbar that came and went took its width and re-wrapped every line. */
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.45 system-ui, "Segoe UI", sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--chrome); border-bottom: 1px solid var(--rule); }
header .brand { font-weight: 600; color: var(--ink); text-decoration: none; }
header .brand .pip { color: var(--accent); }
header a.brand:hover { text-decoration: underline; }
header .who { margin-left: auto; color: var(--ink-soft); display: flex; gap: 12px; align-items: center; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
a { color: var(--accent); }
.panel { background: linear-gradient(var(--felt-top), var(--felt-bottom)); border-radius: 10px; padding: 18px; }
label { display: block; margin: 10px 0 4px; color: var(--ink-soft); font-size: 13px; }
input, select { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--ink); font: inherit; }
button, .button { display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--rule);
                  background: var(--chrome-2); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
button.primary, .button.primary { background: var(--accent); color: #1b1b1b; border-color: var(--accent); font-weight: 600; }
header form button { margin: 0; padding: 4px 10px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.error { color: var(--red); margin: 8px 0; }
.note { color: var(--ink-soft); font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
th { color: var(--ink-soft); font-weight: 500; font-size: 13px; }
td .button { margin: 0; }
.seat-open { color: var(--accent); }
.seat-bot { color: var(--ink-soft); }
form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
form.inline button { margin: 0; padding: 4px 12px; }
label.check { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--ink); font-size: 14px; }
label.check input { width: auto; }
button.danger { border-color: var(--red); color: var(--red); background: transparent; }
.note.ok { color: #9fe3b5; font-size: 14px; }
.tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; color: #1b1b1b; background: var(--accent); }
.row-form { display: flex; gap: 8px; margin-top: 10px; padding: 10px; }
.row-form button { margin: 0; white-space: nowrap; }
main.wide { max-width: 1000px; }
dialog.ask { width: min(380px, calc(100vw - 32px)); padding: 18px 20px 16px; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--chrome); color: var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
dialog.ask::backdrop { background: rgb(0 0 0 / .55); }
dialog.ask p { margin: 0 0 16px; font-size: 15px; }
.ask-buttons { display: flex; justify-content: flex-end; gap: 10px; }
.ask-buttons button { margin: 0; }
.ask-buttons button.danger { background: var(--red); border-color: var(--red); color: #1b1b1b; font-weight: 600; }
/* Buttons stand up off the page and go down when pressed - staying down
   half a second (the script adds .pressed), so a press is seen. */
button, .button {
  background-image: linear-gradient(rgb(255 255 255 / .14), rgb(0 0 0 / .14));
  border-color: rgb(255 255 255 / .2) rgb(0 0 0 / .4) rgb(0 0 0 / .55);
  box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 4px 8px rgb(0 0 0 / .28);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
button.danger { border-color: var(--red); }
:is(button, .button):hover:not(:disabled) { filter: brightness(1.12); }
:is(button, .button):is(:active, .pressed):not(:disabled) {
  transform: translateY(3px);
  background-image: linear-gradient(rgb(0 0 0 / .18), rgb(255 255 255 / .04));
  box-shadow: 0 0 0 rgb(0 0 0 / .45), inset 0 2px 5px rgb(0 0 0 / .5);
}
button:disabled { opacity: .45; box-shadow: none; background-image: none; }
.tag.social { color: #1b1b1b; background: #9fe3b5; }
.tag.mini { color: #1b1b1b; background: #9fc7ff; }
.tag.practice { color: #1b1b1b; background: #e6c3ff; }
/* The kibitzers' password only while they are let watch. */
form:has(input[name="AllowKibitzers"]:not(:checked)) .kibitz-password { display: none; }
.kibitz-password { max-width: 360px; }
form.practice label.check { display: flex; }
/* Minibridge has no auction, so the systems do not matter: faded, still there. */
form:has(select.game option[value="minibridge"]:checked) .sys { opacity: .45; }
form:has(select.game option[value="minibridge"]:checked) .sys label::after { content: " - not in Minibridge"; }
label.social-choice { margin-top: 12px; }
.tag.quiet { color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); }
/* A wide table scrolls in its own box on a phone, not the whole page. */
.scroll { overflow-x: auto; }
.scroll table { min-width: 620px; }
td.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
td.actions .button, td.actions button { margin: 0; }
tr.times td { border-bottom: 1px solid var(--rule); padding-top: 0; }
section.session { margin-top: 24px; padding: 4px 12px 12px; border: 1px solid var(--rule); border-radius: 10px; }
section.session > form { margin-bottom: 8px; }
time .yours { color: var(--ink-soft); }
/* Scheduling fields only when scheduling is ticked. */
form:has(#sched) .when { display: none; }
form:has(#sched:checked) .when { display: flex; }
label.schedule { margin-top: 12px; }
table.accounts { min-width: 900px; }
table.accounts tr.state td { border-top: 0; padding-top: 0; font-size: 13px; }
tr.inactive td { color: var(--ink-soft); }
tr.inactive.state b { color: var(--red); }
.manage { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
details summary { cursor: pointer; color: var(--ink-soft); }
form.deactivate { max-width: 560px; margin: 8px 0; }
form.deactivate textarea { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--ink); font: inherit; }
input.months { width: 5em; }
b.disabled { color: var(--accent); }
form.bulk { margin-top: 12px; }
form.bulk textarea { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--ink); font: inherit; }
form.bulk select { width: auto; }
form.bulk .row-form { padding: 0; align-items: center; flex-wrap: wrap; }
table.accounts input[type="checkbox"] { width: auto; }
form.limits .row-form { padding: 4px 0; align-items: center; margin: 0; }
form.limits .what { width: 9em; }
dl.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.details dt { color: var(--ink-soft); font-size: 13px; padding-top: 1px; }
dl.details dd { margin: 0; }
details.change { margin-top: 10px; }
details.change form { max-width: 420px; }
.score-plus { color: #9fe3b5; }
.score-minus { color: var(--red); }
.pages { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
header .who .me { color: var(--ink); text-decoration: none; font-weight: 600; }
/* The menu under the name. */
.me-menu { position: relative; }
.me-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.me-menu > summary::-webkit-details-marker { display: none; }
.me-menu > summary::after { content: "\25BE"; margin-left: 4px; font-size: 11px; color: var(--ink-soft); }
.me-menu > summary:hover { text-decoration: underline; }
.me-menu .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 250px; display: flex; flex-direction: column; padding: 6px;
                 background: var(--chrome); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .45); }
.me-menu .menu a { padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; display: flex; align-items: center; white-space: nowrap; }
.me-menu .menu a:hover { background: var(--chrome-2); }
.badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--red); color: #fff;
         font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
/* Comments: a conversation, the reader's own on the right. */
.chat { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.msg { max-width: min(560px, 88%); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--rule); }
.msg.mine { align-self: flex-end; background: #1e4d36; }
.msg.theirs { align-self: flex-start; background: var(--chrome); }
.msg .meta { margin: 0; font-size: 12px; color: var(--ink-soft); }
.msg .text { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .read { text-align: right; }
.chat-note { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--chrome); border-radius: 6px; }
/* A text box grows downwards, if its writer drags its corner, and never out of its place. */
textarea { resize: vertical; max-width: 100%; }
/* Where a file is dropped (site/deals.js): lit while one is carried over it. */
/* A big target: the whole zone takes a dropped file, and a click anywhere on it chooses one. */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
            min-height: 190px; margin: 14px 0 4px; padding: 28px 20px; box-sizing: border-box;
            border: 2px dashed rgb(255 255 255 / .35); border-radius: 12px; background: rgb(0 0 0 / .18);
            text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover { border-color: rgb(255 255 255 / .6); }
.dropzone .drop-title { margin: 0; font-size: 21px; font-weight: 600; color: var(--ink); }
.dropzone .drop-or { margin: 4px 0 0; }
.dropzone label.button { display: inline-flex; align-items: center; margin: 12px 0 0; font-size: 15px; color: var(--ink); }
.dropzone:focus-within label.button { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone.over { border-color: var(--accent); border-style: solid; background: rgb(255 215 0 / .12); }
.dropzone.has-file { border-color: var(--accent); border-style: solid; }
.dropzone .chosen { margin: 12px 0 0; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
/* Seen by nobody, but there for the keyboard and a screen reader: the file box behind "Choose a file". */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
details.paste { margin-top: 12px; }
details.paste textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--ink); font: 13px/1.4 ui-monospace, Consolas, monospace; }
/* The visitors' lobby (Pages/Visit) and the way into it from Sign in. */
.lead { font-size: 17px; margin: 0 0 8px; }
.visit-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.visit-game h3 { margin: 0 0 6px; font-size: 18px; }
.visit-game p { margin: 0 0 8px; }
.visit-more li { margin: 4px 0; }
.visit-join { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.visit-join .button, .visit-blog-actions .button { margin: 0; }
.visit-manage { margin-top: 28px; }
.visit-manage label.check { display: flex; margin: 6px 0; }
.visit-blog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.visitor-entry { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.visitor-entry .button { margin: 6px 0 0; }
th.tick, td.tick { width: 1%; text-align: center; }
th.tick input, td.tick input { width: auto; }
form.bulk-delete { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
form.bulk-delete button { margin: 0; }
div.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.chat-form textarea { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--ink); font: inherit; }
table.comments-list tr.waiting td { font-weight: 600; }
.chat-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.chat-ok button { margin: 0; }
header .who a { white-space: nowrap; }
/* On a narrow screen the header's links wrap rather than push the page sideways. */
header { flex-wrap: wrap; }
header .who { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
/* Glyphs (Assets/Icons/btn-*.svg) as masks in the colour of the text beside them. */
.ico { display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 -2px; vertical-align: -3px; background-color: currentColor;
       -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-table { --ico: url(/Assets/Icons/btn-table.svg); }  .ico-log { --ico: url(/Assets/Icons/btn-log.svg); }
.ico-open { --ico: url(/Assets/Icons/btn-open.svg); }
.ico-admin { --ico: url(/Assets/Icons/btn-admin.svg); }  .ico-account { --ico: url(/Assets/Icons/btn-account.svg); }
.ico-leave { --ico: url(/Assets/Icons/btn-leave.svg); }  .ico-filter { --ico: url(/Assets/Icons/btn-filter.svg); }
.ico-start { --ico: url(/Assets/Icons/btn-start.svg); }  .ico-practice { --ico: url(/Assets/Icons/btn-practice.svg); }
.ico-schedule { --ico: url(/Assets/Icons/btn-schedule.svg); } .ico-delete { --ico: url(/Assets/Icons/btn-delete.svg); }
.ico-save { --ico: url(/Assets/Icons/btn-save.svg); }  .ico-notice { --ico: url(/Assets/Icons/btn-notice.svg); }
.ico-info { --ico: url(/Assets/Icons/btn-info.svg); }  .ico-blog { --ico: url(/Assets/Icons/btn-blog.svg); }
.ico-align-left { --ico: url(/Assets/Icons/btn-align-left.svg); }  .ico-align-center { --ico: url(/Assets/Icons/btn-align-center.svg); }
.ico-align-right { --ico: url(/Assets/Icons/btn-align-right.svg); }  .ico-align-justify { --ico: url(/Assets/Icons/btn-align-justify.svg); }
.ico-indent { --ico: url(/Assets/Icons/btn-indent.svg); }  .ico-outdent { --ico: url(/Assets/Icons/btn-outdent.svg); }
.ico-grid { --ico: url(/Assets/Icons/btn-grid.svg); }
/* The formatted-text editor (wwwroot/site/editor.js). */
.rich { margin: 12px 0; }
.rich-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0; }
.rich-group { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rich-bar button { margin: 0; padding: 3px 9px; font-size: 13px; min-width: 32px; }
.rich-bar button .ico { margin: 0; }
.rich-bar button:has(.ico):not(:has(.ico + *)) { padding: 3px 7px; }
.rich-bar select { width: auto; margin: 0; padding: 3px 6px; font-size: 13px; }
.rich-colour { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; margin: 0;
               border: 1px solid var(--rule); border-radius: 6px; background: var(--chrome-2); cursor: pointer; font-weight: 700; }
.rich-colour span { border-bottom: 4px solid #f2c14e; line-height: 1; }
.rich-colour.behind span { border: 0; padding: 1px 4px; background: #1e6842; border-radius: 3px; }
.rich-colour input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.rich-cells { display: none; }
.rich.in-table .rich-cells { display: inline-flex; }
.rich-table { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; padding: 8px 10px;
              border: 1px solid var(--rule); border-radius: 8px; background: var(--chrome); }
.rich-table[hidden] { display: none; }
.rich-table label { margin: 0; }
.rich-table input[type="number"] { width: 4.5em; margin-left: 4px; }
.rich-table input[type="checkbox"] { width: auto; }
.rich-table button { margin: 0; }
.rich-area { min-height: 7em; max-height: 60vh; overflow-y: auto; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--rule);
             background: var(--chrome-2); color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.rich-area:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rich-count.over { color: var(--red); font-weight: 600; }
/* Formatted text as it is shown: a description, a blog post. */
.written { line-height: 1.55; overflow-wrap: anywhere; }
.written > :first-child { margin-top: 0; } .written > :last-child { margin-bottom: 0; }
.written blockquote { margin: 8px 0; padding: 2px 14px; border-left: 3px solid var(--accent); color: var(--ink-soft); }
.written h2 { font-size: 22px; } .written h3 { font-size: 19px; } .written h4 { font-size: 17px; } .written h5 { font-size: 15px; }
.written { overflow-x: auto; }
.written table { border-collapse: collapse; margin: 10px 0; }
.written th, .written td { border: 1px solid var(--rule); padding: 5px 10px; vertical-align: top; min-width: 3em; }
.written th { text-align: left; background: var(--chrome-2); }
/* A long text folded: More... shows the rest, Less folds it away again. */
.more-line { margin: 8px 0 0; }
.more-line .more-toggle { margin: 0; padding: 3px 14px; font-size: 13px; }
/* ...and, in the editor, where the fold is. */
.rich-area more-break { display: block; margin: 14px 0; border-top: 2px dashed var(--accent); text-align: center; line-height: 0; user-select: none; }
.rich-area more-break::after { content: "More\2026  readers see only what is above this at first"; display: inline-block; padding: 0 8px;
  background: var(--chrome-2); color: var(--accent); font-size: 12px; line-height: 1.5; }
button.desc { margin: 0 2px; padding: 0 4px; min-width: 0; background: transparent; border: 0; box-shadow: none; color: var(--accent); vertical-align: -2px; }
button.desc .ico { margin: 0; }
dialog.desc { max-width: min(560px, calc(100vw - 32px)); width: 100%; padding: 18px 20px 16px; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--chrome); color: var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
dialog.desc::backdrop { background: rgb(0 0 0 / .55); }
dialog.desc h2 { margin: 0 0 10px; font-size: 19px; }
.room-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
article.post { margin: 18px 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--chrome); }
article.post h2 { margin: 0 0 2px; }
article.post .by { color: var(--ink-soft); font-size: 13px; margin: 0 0 10px; }
article.post .post-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* A post whole, or its first sentences, or its heading alone (wwwroot/site/blog.js). */
article.post.show-full .post-excerpt, article.post.show-excerpt .post-body,
article.post.show-title .post-body, article.post.show-title .post-excerpt { display: none; }
article.post.show-title { padding: 8px 16px; margin: 8px 0; }
article.post.show-title .by { margin: 0; }
article.post:not(.show-full) { cursor: pointer; }
article.post:not(.show-full):hover { border-color: var(--accent); }
article.post .post-open, article.post .post-more { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform: none; filter: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
article.post .post-more { color: var(--accent); text-decoration: underline; font-size: 14px; }
.post-excerpt { margin: 0; color: var(--ink); line-height: 1.5; }
.site-about { margin: 0 0 12px; }
/* The sign-in page: the form, and beside it (below it on a phone) what the site offers. */
.signin-page { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px 36px; align-items: start; }
.welcome-box { padding: 16px 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--chrome); }
.welcome-box h2 { margin-top: 0; }
.welcome-box li { margin: 6px 0; }
@media (max-width: 760px) { .signin-page { grid-template-columns: minmax(0, 1fr); } }

/* The visitors' lobby (Pages/Visit) and the way into it from Sign in. (JSBridge's layout at 213af15.) */
.visit-club { margin: 0 0 22px; }
.visit-club h2 .note { font-size: 14px; font-weight: normal; margin-left: 6px; }
.visit-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.visit-game h3 { margin: 0 0 6px; font-size: 18px; }
.visit-game p { margin: 0 0 8px; }
.visit-more li { margin: 4px 0; }
.visit-join { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.visit-join .button, .visit-blog-actions .button { margin: 0; }
.visit-join .note { flex-basis: 100%; margin: 0; }
.visit-manage { margin-top: 28px; }
.visit-manage label.check { display: flex; margin: 6px 0; }
.visit-blog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.visitor-entry { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.visitor-entry .button { margin: 6px 0 0; }
/* A notice: in front of everything until it is read. */
dialog.notice { max-width: min(560px, calc(100vw - 32px)); width: 100%; padding: 18px 20px 16px; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--chrome); color: var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
dialog.notice::backdrop { background: rgb(0 0 0 / .6); }
dialog.notice h2 { margin: 4px 0 10px; }
.notice-from { color: var(--ink-soft); font-size: 13px; margin: 0; }
.notice-text { white-space: pre-wrap; overflow-wrap: anywhere; }
form.notice-form textarea { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--ink); font: inherit; }
form.notice-form fieldset { border: 1px solid var(--rule); border-radius: 8px; margin: 10px 0; padding: 6px 12px 10px; min-width: 0; flex: 1 1 260px; }
form.notice-form input[type="checkbox"] { width: auto; }
form.notice-form .roles { flex-wrap: wrap; padding: 0; }
form.notice-form input:not([type="checkbox"]) { max-width: 480px; }
form.notice-form .rooms-pick label.check { display: block; }
form.notice-form .level-3 { padding-left: 18px; } form.notice-form .level-4 { padding-left: 36px; }
table.notices td.when { white-space: nowrap; }
/* The activity log: its own times only when "From and to" is chosen. */
form.activity-filter .custom-time { display: none; }
form.activity-filter:has(select.range option[value="custom"]:checked) .custom-time { display: block; }
form.activity-filter .button { margin-left: 8px; }
table.activity { min-width: 860px; font-size: 14px; }
table.activity th a { color: var(--ink-soft); }
table.activity td.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kind { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; color: #1b1b1b; background: var(--ink-soft); }
.kind-accounts { background: #9fc7ff; } .kind-signing { background: #9fe3b5; } .kind-tables { background: var(--accent); }
.kind-at { background: #e6c3ff; } .kind-administration { background: #ffb4a8; } .kind-rooms { background: #f3e08a; } .kind-notices { background: #ffd0e8; } .kind-writing { background: #c8f0f0; }
/* Rooms: the way back up, and a card for each room. */
nav.crumbs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink-soft); font-size: 14px; margin-bottom: 6px; }
nav.crumbs + h1 { margin-top: 0; }
form.short input:not([type="checkbox"]) { max-width: 360px; }
.manage-room form { margin-bottom: 4px; }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
a.room-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px;
              background: var(--chrome-2); color: var(--ink); text-decoration: none; }
a.room-card:hover { border-color: var(--accent); }
.tag.danger-tag { color: #1b1b1b; background: #ffb4a8; }
.manage-room h3 { margin: 18px 0 6px; font-size: 16px; }
.manage-room textarea { width: 100%; max-width: 480px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--rule); background: var(--chrome-2); color: var(--ink); font: inherit; }
.manage-room .roles { flex-wrap: wrap; padding: 0; }
.manage-room input[type="checkbox"] { width: auto; }
form:has(input[name="open"]:checked) .access-rest { opacity: .45; }

/* The landing page (Pages/Welcome): the ways in at the top, then the games
   and what the centre does, in cards of the table's colours. */
.landing-hero { padding: 26px 24px 18px; border-radius: 14px; background: radial-gradient(ellipse at top, var(--felt-top), var(--felt-bottom)); }
.landing-hero h1 { font-size: 28px; margin: 0 0 8px; }
.landing-hero .lead { font-size: 17px; max-width: 46em; margin: 0; }
.landing-ways { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 8px; }
.landing-ways .button { display: inline-flex; align-items: center; font-size: 16px; padding: 10px 18px; }
.landing-hero .note { color: rgb(232 236 233 / .8); margin: 12px 0 0; }
.landing-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.landing-game { padding: 14px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--chrome); }
.landing-game h3 { margin: 0 0 6px; font-size: 18px; }
.landing-game .suit { color: var(--accent); } .landing-game .suit.red { color: var(--red); }
.landing-game p { margin: 0 0 8px; }
.landing-game ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14px; }
.landing-game li { margin: 4px 0; }
.landing-centre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 4px 20px; }
.landing-centre h3 { margin: 10px 0 2px; font-size: 15px; color: var(--accent); }
.landing-centre p { margin: 0; color: var(--ink-soft); font-size: 14px; }
@media (max-width: 600px) { .landing-hero { padding: 18px 16px 14px; } .landing-hero h1 { font-size: 23px; } }