/* 🔨 The Builders window (js/contrib-ui.js): a GitHub repo in ZAZA World's navy and gold (owner, 2026-10-27: "the tab is
   also not very nice either... to submit or work on stuff.. is quite small", "make it look more like github.. with the
   contributors circles on the side.."). The repo's header with underlined tabs, the issues in a list box, each issue as
   comment boxes on a timeline, and an About column with the contributors' round pictures. The whole screen, on
   computers too (owner, 2026-11-03: "make builders also occupy full screen so its easier to read"): there the repo sits
   in a 1400 px column down the middle, as GitHub's does, with bigger words (the block at the end); on phones the
   column goes under the list. ui.js openModal sets .ws-modal for this window only. */
.modal-backdrop:has(> .ws-modal) { padding: 0; }
.modal.ws-modal { --ws-top: 0px; --ws-max: 1400px; display: flex; flex-direction: column; width: 100% !important; height: 100dvh; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: #111a4a; }
html.standalone .modal.ws-modal { --ws-top: var(--mobile-top-safe, 0px); }
.modal.ws-modal > #modalBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal.ws-modal > .modal-x { top: calc(14px + var(--ws-top)); right: 14px; z-index: 3; }
.ws { --ws-card: linear-gradient(180deg, #1a2663, #141e52); --ws-edge: #34468a; --ws-line: #2a3a7a; --ws-bar: #1a2663; --ws-box: #131c50; --ws-hint: #bcc5ea; --ws-link: #9fd0ff;
  flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); color: #fff; }
.ws [hidden] { display: none !important; }
.ws i { font-style: normal; line-height: 1; }
.modal .ws p { margin: 0; font-size: 14px; line-height: 1.5; }
.ws-dim, .modal .ws .ws-dim { color: var(--ws-hint); font-size: 13px; }

/* the repo's header: name, tagline, underlined tabs with counts */
.ws-head { padding: calc(16px + var(--ws-top)) max(62px, (100% - var(--ws-max)) / 2 + 24px) 0 max(24px, (100% - var(--ws-max)) / 2 + 24px); border-bottom: 1px solid var(--ws-edge); background: radial-gradient(ellipse 45% 160% at 0 0, rgba(255, 210, 63, 0.09), transparent 70%), linear-gradient(180deg, #1c2868, #151f58); }
.ws-repo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.modal .ws-head h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.ws-public { padding: 4px 10px; border: 1px solid var(--ws-edge); border-radius: 999px; color: var(--ws-hint); font: 400 12px/1 var(--display); }
.modal .ws .ws-tag { margin: 5px 0 10px; color: var(--ws-hint); }
.ws-tabs { display: flex; gap: 4px; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.ws-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: #c8d0ef; font: 400 15px/1 var(--display); white-space: nowrap; cursor: pointer; }
.ws-tabs button > span { line-height: 1; }
.ws-tabs button:hover { color: #fff; border-bottom-color: #4a5e9e; }
.ws-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #ffd23f; }
.ws-count, .ws-badge { min-width: 20px; padding: 3px 7px; border-radius: 999px; font: 400 12px/1 var(--display); text-align: center; }
.ws-count { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ws-badge { background: #ff4b4b; color: #fff; }

/* the main column and the About column */
.ws-frame { width: min(100%, var(--ws-max)); min-height: 0; justify-self: center; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.ws-pane { min-height: 0; display: flex; flex-direction: column; }
.ws-err { margin: 14px 24px 0; padding: 9px 12px; border-radius: 8px; background: rgba(255, 75, 75, 0.14); color: #ffb0b0; }
.modal .ws .ws-err { font-size: 14px; }
.ws-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 28px; }
.ws-side { min-height: 0; overflow-y: auto; padding: 20px 22px 24px 4px; }
.ws-empty { padding: 34px 12px; text-align: center; color: var(--ws-hint); }
.ws-bar-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.ws-new { padding: 10px 16px; font: 400 15px/1 var(--display); }
.modal .ws .ws-page-h { margin: 0 0 14px; color: #fff; font: 400 22px/1.2 var(--display); }

/* About, Contributors, Kitchen */
.ws-box { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--ws-line); }
.ws-box h3 { margin: 0 0 10px; color: #fff; font: 400 16px/1.2 var(--display); }
.ws-box > p + p, .ws-box > p + .ws-you, .ws-you + p { margin-top: 8px; }
.ws-you { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 13px; }
.ws-links { display: grid; gap: 4px; margin-top: 12px; }
.ws-link, .ws-more, .ws-h-link { padding: 0; border: 0; background: none; cursor: pointer; }
.ws-link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 0; color: var(--ws-link); font: 700 14px/1.2 system-ui, sans-serif; }
.ws-link:hover, .ws-more:hover { text-decoration: underline; }
.ws-h-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: inherit; }
.ws-h-link b { padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font: 400 12px/1 var(--display); }
.ws-h-link:hover { color: #ffd23f; }
.ws-circles { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-circle { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.ws-circle:hover .ws-face { transform: translateY(-2px); }
.ws-more { margin-top: 10px; color: var(--ws-link); font: 700 13px/1.2 system-ui, sans-serif; }
.ws-kitchen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ws-kitchen > div { display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; border: 1px solid var(--ws-edge); border-radius: 10px; background: var(--ws-card); }
.ws-kitchen b { color: #fff; font: 400 22px/1 var(--display); }
.ws-kitchen .cook b { color: #ffb070; }
.ws-kitchen .rev b { color: #8ad0ff; }
.ws-kitchen .live b { color: #ffd23f; }
.ws-kitchen span { color: var(--ws-hint); font-size: 12.5px; }
.modal .ws .ws-legend { color: #8f99c4; font-size: 12px; line-height: 1.55; }
.ws-legend b { color: #dfe5ff; }
.ws-tips ul { margin: 0; padding-left: 18px; color: #dfe5ff; font-size: 14px; line-height: 1.5; }
.ws-tips li + li { margin-top: 5px; }
.ws-code { margin-top: 10px !important; padding: 8px 10px; border: 1px dashed #ffd23f; border-radius: 8px; }
.ws-code code { color: #ffd23f; font-size: 14px; }

/* a round picture: an X picture fills it, a hero's head sits in it pixel-sharp, else the name's first letter; the ring is
   the level's colour, as the frames on the Contributors' Wall were (👑 gold, ⭐ silver-blue, 🔧 copper, 💡 oak) */
.ws-face { --ring: #34468a; flex: none; display: grid; place-items: center; width: var(--s, 32px); height: var(--s, 32px); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2b3f8e, #121a45); box-shadow: 0 0 0 2px var(--ring), 0 2px 0 2px #070b1c; transition: transform 0.12s; }
.ws-face img { width: 88%; height: 88%; object-fit: contain; image-rendering: pixelated; }
.ws-face.pic img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.ws-face > i { color: #dfe5ff; font: 400 calc(var(--s, 32px) * 0.46) / 1 var(--display); }
.ws-face.r-owner { --ring: #ffd23f; }
.ws-face.r-trusted { --ring: #c8d4ec; }
.ws-face.r-builder, .ws-face.r-leveled { --ring: #e08a4a; }
.ws-face.r-player { --ring: #c49c68; }

.ws-level { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ws-edge); background: #101848; color: #fff; font: 400 12px/1 var(--display); white-space: nowrap; }
.ws-level > span { line-height: 1; }
.ws-level.trusted { border-color: #c8d4ec; color: #e4ecff; }
.ws-level.owner { border-color: #ffd23f; background: #ffd23f; color: #1b1424; }
.ws-level.builder, .ws-level.leveled { border-color: #e08a4a; color: #ffc890; }

/* 📋 Issues: GitHub's list box */
.ws-listbox { border: 1px solid var(--ws-edge); border-radius: 10px; overflow: hidden; background: var(--ws-box); }
.ws-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; border-bottom: 1px solid var(--ws-edge); background: var(--ws-bar); }
.ws-states, .ws-kinds-f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ws-kinds-f { gap: 6px; }
.ws-state-f { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--ws-hint); font: 400 14px/1 var(--display); cursor: pointer; }
.ws-state-f > span { line-height: 1; }
.ws-state-f.on { color: #fff; }
span.ws-state-f { cursor: default; }
.ws-kind-f { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--ws-edge); border-radius: 999px; background: #101848; color: var(--ws-hint); font: 400 13px/1 var(--display); cursor: pointer; }
.ws-kind-f > span { line-height: 1; }
.ws-kind-f.on { border-color: #ffd23f; background: #ffd23f; color: #1b1424; }
.ws-rows { margin: 0; padding: 0; list-style: none; }
.ws-row-i { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--ws-line); cursor: pointer; }
.ws-row-i:first-child { border-top: 0; }
.ws-row-i:hover { background: rgba(255, 255, 255, 0.035); }
.ws-row-i:hover .ws-title { color: #ffd23f; }
.ws-ico { --st: #2ea043; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0b1238; box-shadow: inset 0 0 0 2px var(--st); font-size: 15px; }
.ws-ico.done { --st: #a371f7; }
.ws-ico.closed { --st: #6e7681; }
.ws-ico.pr { --st: #ffd23f; }
.ws-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.ws-title { color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ws-meta { color: var(--ws-hint); font-size: 12.5px; }
.ws-meta .a { color: #7ee2a0; } .ws-meta .d { color: #ff8f9d; }
.ws-row-side { flex: none; display: flex; align-items: center; gap: 12px; }
.ws-notes-n { color: var(--ws-hint); font-size: 13px; white-space: nowrap; }
.ws-notes-n.none { opacity: 0.45; }
/* 💬 New replies on a ticket you follow: a gold dot before its title and a gold count; inside, each new reply has New. */
.ws-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.22); }
.ws-notes-n.new { color: #ffd23f; font-weight: 700; }
.ws-fresh { padding: 3px 9px; border-radius: 999px; background: #ffd23f; color: #1b1424; font: 400 11px/1 var(--display); }
.ws-c.fresh .ws-cbox { border-color: #ffd23f; }
.ws-label { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid #d73a4a; border-radius: 999px; background: rgba(215, 58, 74, 0.18); color: #ffb0b8; font: 700 12px/1.1 system-ui, sans-serif; }
.ws-label.idea { border-color: #d8aa2c; background: rgba(255, 210, 63, 0.14); color: #ffe07a; }
.ws-vote { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--ws-edge); border-radius: 8px; background: #0e1540; color: #ffd23f; font: 400 15px/1 "Jersey 10", var(--display); cursor: pointer; }
.ws-vote b { font-size: 10px; color: var(--ws-hint); }
.ws-vote small { color: var(--ws-hint); font: 400 12px/1 var(--display); }
.ws-vote:hover { border-color: #ffd23f; }
.ws-vote.on { border-color: #ffd23f; background: #ffd23f; color: #1b1424; }
.ws-vote.on b, .ws-vote.on small { color: #1b1424; }
.ws-vote.wide { margin-left: auto; padding: 7px 12px; font-size: 19px; }
.ws-chip { flex: none; padding: 3px 9px; border-radius: 999px; background: #22306e; color: #dfe5ff; font-size: 12px; line-height: 1.15; white-space: nowrap; }
.ws-chip.cook { background: #5a3a12; color: #ffd08a; }
.ws-chip.rev { background: #1f3f8a; color: #bfe0ff; }
.ws-chip.ok { background: #1f4a3a; color: #a9f0c4; }
.ws-chip.live { background: #ffd23f; color: #1b1424; font-weight: 700; }
.ws-chip.bad { background: #5a1f28; color: #ffb4bd; }
.ws-chip.off { background: #2a2f4a; color: #8f99c4; }
.ws-tier { padding: 3px 9px; border-radius: 999px; font-size: 12px; line-height: 1.15; }
.ws-tier.small { background: #1f4a3a; color: #a9f0c4; }
.ws-tier.big { background: #4a2a5a; color: #e9c4ff; }

/* an issue's page: title, state, the timeline of comment boxes, the reply box */
.ws-back { margin: 0 0 14px; padding: 0; border: 0; background: none; color: var(--ws-link); font: 700 14px/1.2 system-ui, sans-serif; cursor: pointer; }
.ws-back:hover { text-decoration: underline; }
.ws-i-head { padding: 0 0 16px; margin: 0 0 20px; border-bottom: 1px solid var(--ws-line); }
.modal .ws .ws-i-title { margin: 0 0 10px; color: #fff; font: 400 26px/1.2 var(--display); overflow-wrap: anywhere; }
.ws-num { color: #8f99c4; }
.ws-i-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ws-i-sub b { color: #fff; }
.ws-state { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #238636; color: #fff; font: 400 14px/1 var(--display); }
.ws-state > span { line-height: 1; }
.ws-state.done { background: #8957e5; }
.ws-state.closed { background: #5a6270; }
.ws-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ws-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.ws-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 19px; width: 2px; background: var(--ws-line); }
.ws-c { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 14px; margin: 0 0 18px; }
.ws-cbox { min-width: 0; border: 1px solid var(--ws-edge); border-radius: 10px; overflow: hidden; background: var(--ws-box); }
.ws-chead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 14px; border-bottom: 1px solid var(--ws-edge); background: var(--ws-bar); font-size: 14px; }
.ws-author { margin-left: auto; padding: 3px 9px; border: 1px solid var(--ws-edge); border-radius: 999px; color: var(--ws-hint); font: 400 11px/1 var(--display); }
.ws-cbody { padding: 13px 15px; }
.modal .ws .ws-cbody p { color: #eef1ff; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.modal .ws .ws-cbody p + p, .ws-cbody p + .ws-act { margin-top: 8px; }
.ws-ev { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ws-edge); background: var(--ws-bar); font-size: 18px; }
.ws-ev.done { background: #8957e5; color: #fff; }
.ws-ev.closed { background: #5a6270; color: #fff; }
.ws-closed { align-items: center; }
.ws-fix .ws-cbox { border-color: #5a4d1e; }
.ws-fix .ws-chead { background: #2a2a4e; }
.modal .ws .ws-ask { color: #ffe9a8; font-style: italic; }
.ws-bad { color: #ffb4bd; }
.modal .ws .ws-files { color: var(--ws-hint); font-size: 12.5px; overflow-wrap: anywhere; }
.ws-files code { color: #fff; font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace; }
.ws-files .a { color: #7ee2a0; } .ws-files .d { color: #ff8f9d; }
/* a fix's demo: its screenshots two a row, numbered with what each shows; a tap makes one the box's width (the code is
   only on the team page: owner, 2026-10-28) */
.ws-demo .ws-cbox { border-color: #8a7424; }
.ws-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 10px 0 2px; }
.ws-shots figure { margin: 0; min-width: 0; }
.ws-shots figure.on { grid-column: 1 / -1; }
.ws-shot { display: block; width: 100%; padding: 0; border: 1px solid var(--ws-edge); border-radius: 8px; overflow: hidden; background: #070c26; cursor: zoom-in; }
.ws-shots figure.on .ws-shot { cursor: zoom-out; }
.ws-shot:hover, .ws-shot:focus-visible { border-color: #ffd23f; outline: none; }
.ws-shot img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; } /* a computer's, a phone's or one window's: whole */
.ws-shots figure.on .ws-shot img { max-height: 80vh; }
.ws-shots figcaption { display: flex; gap: 7px; margin-top: 6px; color: var(--ws-hint); font-size: 13px; line-height: 1.4; }
.ws-shots figcaption b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ffd23f; color: #141e52; font: 400 11px/1 var(--display); }
.ws-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-cbody .ws-act { margin-top: 12px; }
.ws-act .ws-why { flex: 1 1 200px; width: auto; }
.ws .btn { font: 400 14px/1 var(--display); padding: 10px 15px; }
.ws-cook { display: grid; gap: 8px; margin: 4px 0 18px 54px; padding: 14px; border: 1px dashed #ffd23f; border-radius: 10px; background: rgba(255, 210, 63, 0.05); }
.ws-cook label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: #ffd23f; font: 400 16px/1.2 var(--display); }
.ws-cook label .ws-dim { font-family: system-ui, sans-serif; }

/* the boxes you write in: a new issue, a reply */
.ws-composer { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 14px; }
.ws-reply { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--ws-line); }
.ws-write { display: flex; flex-direction: column; }
.ws-write-tab { padding: 9px 14px; border-bottom: 1px solid var(--ws-edge); background: var(--ws-bar); color: #fff; font: 400 13px/1 var(--display); }
.ws-composer .ws-kinds + .ws-title-in + .ws-write, .ws-composer .ws-title-in + .ws-write { border-top: 1px solid var(--ws-edge); }
.ws input:not([type]), .ws input[type="text"], .ws textarea, .ws-why { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ws-edge); border-radius: 8px; background: #0b1238; color: #fff; font: 15px/1.45 system-ui, sans-serif; resize: vertical; }
.ws input:focus, .ws textarea:focus { outline: none; border-color: #ffd23f; }
.ws-write textarea { border: 0; border-radius: 0; padding: 13px 15px; }
.ws-write textarea:focus { box-shadow: inset 0 0 0 1px #ffd23f; }
.ws-form .ws-write textarea { min-height: 240px; }
.ws-title-in { display: block; width: calc(100% - 28px) !important; margin: 14px; font-size: 17px !important; font-weight: 700 !important; }
.ws-cfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ws-edge); background: var(--ws-bar); }
.ws-form .ws-cfoot .btn-gold { min-width: 180px; padding: 12px 22px; font-size: 17px; }
.ws-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 14px 0; }
.ws-kinds label { position: relative; }
.ws-kinds input { position: absolute; opacity: 0; }
.ws-kinds label > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 5px; height: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--ws-edge); border-radius: 10px; background: var(--ws-card); cursor: pointer; }
.ws-kinds label > span > i { grid-row: span 2; font-size: 28px; }
.ws-kinds b { color: #fff; font: 400 18px/1 var(--display); }
.ws-kinds small { color: var(--ws-hint); font: 13px/1.35 system-ui, sans-serif; }
.ws-kinds label:hover > span { border-color: #5a70c8; }
.ws-kinds input:checked + span { border-color: #ffd23f; box-shadow: inset 0 0 0 1px #ffd23f; }
.ws-kinds input:checked + span b { color: #ffd23f; }
.ws-kinds input:focus-visible + span { outline: 2px solid #3ab8ff; }

/* 🏆 Contributors: GitHub's contributors list, a bar for what each did */
.ws-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ws-people li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ws-edge); border-radius: 12px; background: var(--ws-card); }
.ws-people li.ws-l-owner { border-color: #8a7020; }
.ws-rank { color: #ffd23f; font: 400 22px/1 "Jersey 10", var(--display); }
.ws-person { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-name { color: #fff; font: 400 17px/1.2 var(--display); overflow-wrap: anywhere; }
.ws-graph { display: block; height: 6px; border-radius: 3px; background: #0b1238; overflow: hidden; }
.ws-graph i { display: block; height: 100%; min-width: 4px; border-radius: 3px; background: linear-gradient(90deg, #d8aa2c, #ffd23f); }

/* phones: the whole screen; the column under the list, everything scrolls as one */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .modal.ws-modal > .modal-x { top: calc(10px + var(--ws-top)); right: 10px; }
  .ws-head { padding: calc(12px + var(--ws-top)) 50px 0 14px; }
  .modal .ws-head h2 { font-size: 21px; }
  .ws-public { display: none; }
  .modal .ws .ws-tag { margin: 3px 0 6px; font-size: 12.5px; }
  /* the tabs share the row, icon over word, so Contributors never scrolls out of sight */
  .ws-tabs { gap: 0; overflow: visible; }
  .ws-tabs button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 4px; padding: 8px 2px 9px; font-size: 12.5px; }
  .ws-tabs button > i { font-size: 18px; font-style: normal; line-height: 1; }
  .ws-tabs .ws-count, .ws-tabs .ws-badge { position: absolute; top: 3px; left: calc(50% + 11px); min-width: 16px; padding: 2px 5px; font-size: 10px; }
  .ws-frame { display: block; overflow-y: auto; }
  .ws-pane { display: block; }
  .ws-body { overflow: visible; padding: 14px 12px 20px; }
  .ws-err { margin: 12px 12px 0; }
  .ws-side { overflow: visible; padding: 18px 14px 24px; border-top: 1px solid var(--ws-edge); background: rgba(6, 10, 36, 0.3); }
  .ws-row-i { gap: 10px; padding: 11px 12px; }
  .ws-row-side { flex-direction: column; align-items: flex-end; gap: 6px; }
  .ws-c, .ws-composer { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .ws-c > .ws-face, .ws-composer > .ws-face { --s: 32px !important; }
  .ws-ev { width: 32px; height: 32px; font-size: 15px; }
  .ws-timeline::before { left: 15px; }
  .ws-cook { margin-left: 0; }
  .modal .ws .ws-i-title { font-size: 21px; }
  .ws-vote.wide { margin-left: 0; }
  .ws-kinds { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 10px 0; }
  .ws-form .ws-composer { grid-template-columns: minmax(0, 1fr); }
  .ws-form .ws-composer > .ws-face { display: none; }
  .ws-kinds label > span { align-content: start; padding: 10px; column-gap: 8px; }
  .ws-kinds label > span > i { grid-row: auto; font-size: 22px; }
  .ws-kinds small { grid-column: 1 / -1; }
  .ws-kinds b { font-size: 15px; }
  .ws-title-in { width: calc(100% - 20px) !important; margin: 10px; }
  .ws-form .ws-write textarea { min-height: 170px; }
  .ws-form .ws-cfoot .btn-gold { flex: 1 1 100%; }
  .ws-people { grid-template-columns: minmax(0, 1fr); }
}

/* computers: bigger words, so the issues read like a page and not like small print (the pixel font reads small: 18 px
   of it looks like 13 px of most fonts; the system-font links and boxes need less). The phone block above keeps its own. */
@media (min-width: 761px) and (min-height: 501px) {
  .ws-frame { grid-template-columns: minmax(0, 1fr) 340px; }
  .modal .ws p { font-size: 20px; line-height: 1.45; }
  .ws-dim, .modal .ws .ws-dim, .ws-meta, .modal .ws .ws-files { font-size: 18px; }
  .modal .ws-head h2 { font-size: 30px; }
  .ws-public, .ws-count, .ws-badge, .ws-level, .ws-tier, .ws-h-link b { font-size: 14px; }
  .modal .ws .ws-tag, .ws-tabs button, .ws-i-sub, .ws-chead, .ws-cook label, .ws-new { font-size: 18px; }
  .modal .ws .ws-err, .ws-tips ul, .ws-state-f, .ws-state, .ws .btn, .ws-write-tab, .ws-kind-f, .ws-chip, .ws-notes-n, .ws-shots figcaption, .ws-you { font-size: 17px; }
  .ws-link, .ws-back, .ws-kinds small { font-size: 16px; }
  .ws-more, .ws-label, .ws-author, .ws-fresh { font-size: 15px; }
  .modal .ws .ws-page-h { font-size: 26px; }
  .ws-box h3 { font-size: 20px; }
  .ws-kitchen b { font-size: 26px; }
  .ws-kitchen span, .modal .ws .ws-legend, .ws-files code { font-size: 16px; }
  .ws-code code { font-size: 18px; }
  .ws-ico { width: 34px; height: 34px; font-size: 17px; }
  .ws-title { font-size: 20px; }
  .ws-dot { width: 13px; height: 13px; }
  .ws-vote { font-size: 20px; }
  .ws-vote b { font-size: 13px; }
  .ws-vote small { font-size: 15px; }
  .ws-vote.wide { font-size: 22px; }
  .modal .ws .ws-i-title { font-size: 32px; }
  .modal .ws .ws-cbody p { font-size: 21px; }
  .ws-shots figcaption b { width: 22px; height: 22px; font-size: 12px; }
  .ws input:not([type]), .ws input[type="text"], .ws textarea, .ws-why { font-size: 17px; }
  .ws-title-in { font-size: 19px !important; }
  .ws-kinds b { font-size: 20px; }
  .ws-rank { font-size: 26px; }
  .ws-name { font-size: 20px; }
}