/* The hidden attribute outranks every display rule below it. Board panels
   are full of `display: grid` labels and flex rows, and each one quietly beat
   [hidden] until this existed: three separate "why is everything showing at
   once" bugs traced back here (Furi, 9-1). */
[hidden] { display: none !important; }

/* The QR maker's mode row: this picks what the whole form is asking, so it
   reads as a real choice, centred and large, not as a row of tags. */
.rt-board-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: .2rem 0 1.2rem; }
.rt-board-mode {
  padding: .55rem 1.15rem;
  border: 2px solid var(--rt-primary, #1f3b73);
  border-radius: 999px;
  background: var(--rt-paper, #fff);
  color: var(--rt-primary, #1f3b73);
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.rt-board-mode:hover { background: var(--rt-cream, #f2f6fa); }
.rt-board-mode.is-on { background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); }

/* Background color and its see-through switch belong together. */
.rt-board-bg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; grid-column: 1 / -1; margin: .3rem 0 0; }
.rt-board-bg label { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; }
.rt-board-bg input[type="color"] { width: 2.6rem; height: 2rem; padding: 0; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .4rem; }

/* Board Mode: the floating pill and the /board/ pages. Brand tokens come
   from the site's palette (--rt-*); every color here has a fallback. */

/* ---- The pill ---------------------------------------------------------- */
.rt-board-pill { position: fixed; right: 1rem; bottom: 1rem; z-index: 9000; font-family: inherit; }
.rt-board-pill-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border: 0; border-radius: 999px; background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; }
.rt-board-pill-btn:hover, .rt-board-pill-btn[aria-expanded="true"] { background: var(--rt-primary-bright, #2d5bb0); }
.rt-board-menu { position: absolute; right: 0; bottom: calc(100% + .5rem); min-width: 15rem; padding: .5rem; border-radius: .9rem; background: #fff; color: var(--rt-ink, #1a202c); box-shadow: 0 12px 40px rgba(0,0,0,.25); display: grid; gap: .1rem; }
.rt-board-menu[hidden] { display: none; }
.rt-board-menu a, .rt-board-menu button { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border: 0; border-radius: .5rem; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer; width: 100%; }
.rt-board-menu a:hover, .rt-board-menu button:hover { background: var(--rt-cream, #f2f6fa); }
.rt-board-menu i { width: 1.1rem; text-align: center; color: var(--rt-primary, #1f3b73); }
.rt-board-menu-hi { margin: .2rem .7rem .3rem; font-size: .8rem; font-weight: 700; color: var(--rt-gray, #6b6b6b); text-transform: uppercase; letter-spacing: .06em; }
.rt-board-menu-out { border-top: 1px solid var(--rt-line, #e2e8f0); margin-top: .2rem; }
.rt-board-mode button { font-size: .9rem; }

/* ---- The /board/ pages -------------------------------------------------- */
.rt-board { max-width: min(1100px, 94vw); margin: 0 auto; }
.rt-board-h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.rt-board-h2 i { color: var(--rt-primary-bright, #229ce0); }
.rt-board-h3 { margin: 2rem 0 .6rem; font-size: 1.1rem; }
.rt-board-lead { color: var(--rt-gray, #6b6b6b); margin: 0 0 1.2rem; }
.rt-board-fine { font-size: .9rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-crumb a { font-weight: 700; text-decoration: none; }
.rt-board-chips { margin: 0 0 .8rem; }
.rt-board-chip { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--rt-cream, #f2f6fa); color: var(--rt-primary, #1f3b73); font-size: .8rem; font-weight: 700; text-decoration: none; }
.rt-board-chip.is-on { background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); }
.rt-board-google i { margin-right: .4rem; }

.rt-board-cards { display: grid; gap: 1rem; justify-content: center; grid-template-columns: repeat(3, minmax(0, 340px)); }
.rt-board-cards--n1 { grid-template-columns: repeat(1, minmax(0, 340px)); }
.rt-board-cards--n2 { grid-template-columns: repeat(2, minmax(0, 340px)); }
.rt-board-card { display: grid; gap: .35rem; padding: 1.2rem 1.2rem 1.3rem; border-radius: 1rem; background: #fff; border: 1px solid var(--rt-line, #e2e8f0); box-shadow: 0 4px 16px rgba(0,0,0,.06); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.rt-board-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.rt-board-card i { font-size: 1.6rem; color: var(--rt-primary-bright, #229ce0); }
.rt-board-card b { font-size: 1.1rem; }
.rt-board-card span { font-size: .9rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-empty { grid-column: 1 / -1; text-align: center; color: var(--rt-gray, #6b6b6b); }

.rt-board-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rt-board-log li { padding: .45rem .7rem; border-radius: .5rem; background: var(--rt-cream, #f2f6fa); font-size: .95rem; }
.rt-board-log span { color: var(--rt-gray, #6b6b6b); font-size: .8rem; margin-left: .3rem; }

.rt-board-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rt-line, #e2e8f0); }
.rt-board-mode--page button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid var(--rt-line, #e2e8f0); border-radius: 999px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.rt-board-mode--page i { color: var(--rt-primary, #1f3b73); font-size: 1.2rem; }
.rt-board-out { font-weight: 600; }

.rt-board-notice { padding: .7rem 1rem; border-radius: .6rem; background: var(--rt-cream, #f2f6fa); border-left: 4px solid var(--rt-primary-bright, #229ce0); font-weight: 600; }

/* ---- Panels ------------------------------------------------------------- */
.rt-board-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; }
.rt-board-stats div { padding: .8rem; border-radius: .8rem; background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); text-align: center; }
.rt-board-stats b { display: block; font-size: 1.5rem; }
.rt-board-stats span { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.rt-board-switch { margin: 0 0 .5rem; }

.rt-board-add { margin: 0 0 1.4rem; border: 1px solid var(--rt-line, #e2e8f0); border-radius: .8rem; background: #fff; }
.rt-board-add summary { display: inline-flex; align-items: center; gap: .4rem; margin: .8rem 1rem; padding: .55rem 1.1rem; border-radius: 999px; background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); font-weight: 700; cursor: pointer; list-style: none; }
.rt-board-add summary::-webkit-details-marker, .rt-board-add summary::marker { display: none; content: ""; }
.rt-board-add summary:hover { background: var(--rt-primary-bright, #229ce0); color: var(--rt-on-primary, #fff); }
.rt-board-add[open] summary { border-radius: 999px; }
.rt-board-add summary i { color: var(--rt-on-primary, #fff); }
.rt-board-add form { padding: 0 1rem 1rem; }
.rt-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem .9rem; }
.rt-board-grid label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 700; }
.rt-board-grid input, .rt-board-grid select { font: inherit; font-weight: 400; padding: .5rem .6rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .5rem; width: 100%; }
.rt-board-wide { grid-column: 1 / -1; }
.rt-board-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 0; }
.rt-board-cancel { font-weight: 600; }

.rt-board-filter input { width: 100%; max-width: 420px; font: inherit; padding: .55rem .8rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: 999px; }
.rt-board-tablewrap { overflow-x: auto; }
.rt-board-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rt-board-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rt-gray, #6b6b6b); padding: .5rem .6rem; border-bottom: 2px solid var(--rt-line, #e2e8f0); }
.rt-board-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--rt-line, #edf2f7); vertical-align: top; }
.rt-board-table small { display: block; color: var(--rt-gray, #6b6b6b); font-size: .78rem; }
.rt-board-table tr.is-test td { opacity: .55; text-decoration: line-through; }
.rt-board-table tr.is-test td.rt-board-rowactions, .rt-board-table tr.is-test .rt-board-tag { text-decoration: none; opacity: 1; }
.rt-board-tag { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: var(--rt-primary-bright, #229ce0); color: var(--rt-on-primary, #fff); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.rt-board-rowactions { white-space: nowrap; }
.rt-board-rowactions a, .rt-board-link { display: inline-block; padding: .2rem .4rem; border: 0; background: none; color: var(--rt-primary, #1f3b73); font: inherit; cursor: pointer; }
.rt-board-rowactions a:hover, .rt-board-link:hover { color: var(--rt-primary-bright, #229ce0); }

@media (max-width: 720px) {
	.rt-board-cards, .rt-board-cards--n2, .rt-board-cards--n1 { grid-template-columns: minmax(0, 1fr); }
	.rt-board-pill { right: .6rem; bottom: .6rem; }
}

/* ---- Sign-in card ------------------------------------------------------- */
.rt-board--signin { display: flex; justify-content: center; padding: 1rem 0 2rem; }
.rt-board-signin-card { display: grid; justify-items: center; gap: .9rem; width: min(420px, 100%); padding: 2.2rem 2rem; border-radius: 1.2rem; background: #fff; border: 1px solid var(--rt-line, #e2e8f0); box-shadow: 0 12px 40px rgba(0,0,0,.08); text-align: center; }
.rt-board-signin-logo { max-height: 90px; width: auto; }
.rt-board-signin-org { margin: 0; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.rt-board-signin-org span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rt-gray, #6b6b6b); }
.rt-board-google { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.3rem .7rem .8rem; border-radius: 999px; background: #fff; border: 1px solid #dadce0; color: #3c4043; font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.rt-board-google:hover { background: #f8faff; border-color: #c6dafc; }
.rt-board-google-mark { display: inline-flex; }

/* ---- Board nav ---------------------------------------------------------- */
/* A real MENU BAR, not chips (Furi, 9-1: chips scream filter). The team-hub
   tab language: uppercase tabs seated on a brand baseline, the open panel
   solid. Icons stay for the phone strip; on a desktop the words are the menu.
   A tab can grow a dropdown later without changing this shape. */
.rt-board-nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 0 0 1.6rem; border-bottom: 3px solid var(--rt-primary, #1f3b73); }
.rt-board-nav a { display: inline-flex; align-items: center; gap: .45rem; padding: 10px 16px 8px; border: 1px solid var(--rt-line, #e2e8f0); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--rt-cream, #f2f6fa); color: var(--rt-ink, #1a202c); font-weight: 800; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.rt-board-nav a i { color: inherit; }
@media (min-width: 721px) { .rt-board-nav a i { display: none; } }
.rt-board-nav a:hover, .rt-board-nav a:focus { background: var(--rt-paper, #fff); color: var(--rt-primary, #1f3b73); box-shadow: inset 0 3px 0 var(--rt-primary, #1f3b73); }
.rt-board-nav a.is-on:hover, .rt-board-nav a.is-on:focus { background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); box-shadow: none; }
.rt-board-menu a:hover, .rt-board-menu button:hover { color: var(--rt-ink, #1a202c); }
.rt-board-card:hover { color: inherit; }
/* The open panel's tab is solid brand, seated on the baseline. */
.rt-board-nav a.is-on { background: var(--rt-primary, #1f3b73); border-color: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); }
.rt-board-nav a.is-on i { color: var(--rt-on-primary, #fff); }
/* Sign Out sits apart at the end of the bar, quiet until wanted. */
.rt-board-nav-out { margin-left: auto; color: var(--rt-gray, #6b6b6b); }
.rt-board-section { margin-top: 1.6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rt-gray, #6b6b6b); }
.rt-board-cards { margin-bottom: .4rem; }
.rt-board-prefix { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.rt-board-prefix input { min-width: 0; }
.rt-board-hits b { font-size: 1.05rem; }
.rt-board-muted { color: var(--rt-gray, #6b6b6b); }
.rt-board-prefix code { font-size: .85rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-dest { max-width: 360px; overflow-wrap: anywhere; }
.rt-board-add--open { padding: 1rem 1rem .2rem; }
.rt-board-add--open form { padding: 0; }
.rt-board-inline { display: inline-flex; gap: .3rem; align-items: center; }
.rt-board-inline input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .4rem; width: 160px; }
.rt-btn--sm { padding: .35rem .8rem; font-size: .8rem; }
@media (max-width: 720px) {
	.rt-board-nav a span { display: none; }
	.rt-board-nav a { padding: .55rem .7rem; }
}

/* ---- Add a Link: paste, preview, one button ------------------------------ */
.rt-board-paste { margin: 0 0 2rem; }
.rt-board-paste-label { display: block; margin: 0 0 .5rem; font-weight: 800; font-size: 1.2rem; }
.rt-board-paste-row { display: flex; gap: .6rem; }
.rt-board-paste-row input { flex: 1; font: inherit; font-size: 1.1rem; padding: .8rem 1rem; border: 2px solid var(--rt-primary, #1f3b73); border-radius: .8rem; }
.rt-board-paste-row .rt-btn { white-space: nowrap; }
.rt-board-preview { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 1rem; background: #fff; border: 1px solid var(--rt-line, #e2e8f0); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.rt-board-preview-art { min-height: 180px; background: var(--rt-cream, #f2f6fa) center / cover no-repeat; }
.rt-board-preview-body { padding: 1.4rem 1.5rem 1.2rem; }
.rt-board-preview-kind { margin: 0 0 .8rem; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--rt-gray, #6b6b6b); }
.rt-board-preview-kind i { color: var(--rt-primary-bright, #229ce0); margin-right: .3rem; }
.rt-board-preview-title { width: 100%; font: inherit; font-size: 1.3rem; font-weight: 800; padding: .5rem .7rem; border: 1px dashed var(--rt-line, #cbd5e0); border-radius: .6rem; background: #fff; }
.rt-board-preview-title:focus { border-style: solid; outline: none; border-color: var(--rt-primary, #1f3b73); }
.rt-board-preview-date { display: block; margin: .8rem 0 0; font-weight: 600; font-size: .9rem; }
.rt-board-preview-date input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .5rem; }
.rt-board-preview-then { margin: 1rem 0 .2rem; font-size: 1.05rem; font-weight: 600; }
.rt-board-preview-then i { color: var(--rt-primary, #1f3b73); margin-right: .3rem; }
.rt-board-preview-url { margin: 0; font-size: .8rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-preview .rt-board-actions { justify-content: flex-end; }
.rt-board-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rt-board-queue li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: .7rem; background: var(--rt-cream, #f2f6fa); }
.rt-board-queue small { color: var(--rt-gray, #6b6b6b); }
.rt-board-queue-actions { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; }
@media (min-width: 720px) { .rt-board-preview.has-art { grid-template-columns: 260px minmax(0, 1fr); } }
.rt-board-check { display: flex !important; align-items: center; gap: .5rem; font-weight: 600 !important; }
.rt-board-check input { width: auto !important; }
.rt-board-tag--muted { background: var(--rt-gray, #6b6b6b); color: #fff; }
.rt-board-dest-preview { display: block; min-height: 1.2em; margin-top: .25rem; font-size: .8rem; font-weight: 500; color: var(--rt-gray, #6b6b6b); overflow-wrap: anywhere; }
.rt-board-pill.is-off .rt-board-pill-btn { padding: .55rem .65rem; opacity: .45; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.rt-board-pill.is-off:hover .rt-board-pill-btn, .rt-board-pill.is-off .rt-board-pill-btn[aria-expanded="true"] { opacity: 1; }

/* ---- Sponsors panel ------------------------------------------------------ */
.rt-board-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.rt-board-tabs-new { margin-left: auto; }
.rt-board-logo-cell { width: 72px; }
.rt-board-logo-cell img { width: 64px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--rt-line, #e2e8f0); border-radius: .4rem; padding: 3px; }
.rt-board-logo-none { display: inline-flex; width: 64px; height: 48px; align-items: center; justify-content: center; border: 1px dashed var(--rt-line, #cbd5e0); border-radius: .4rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-logo-current { display: block; max-height: 90px; width: auto; margin: .3rem 0; padding: 4px; background: #fff; border: 1px solid var(--rt-line, #e2e8f0); border-radius: .4rem; }
.rt-board-logo-field small { font-weight: 500; color: var(--rt-gray, #6b6b6b); }
.rt-board-grid input[type="file"] { padding: .4rem 0; border: 0; }

/* ---- Data view ------------------------------------------------------------ */
.rt-board-dv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 0 0 .6rem; }
.rt-board-dv-search { flex: 1 1 260px; max-width: 420px; font: inherit; padding: .55rem .8rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: 999px; }
.rt-board-dv-archived { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; }
.rt-board-dv-count { margin-left: auto; font-size: .8rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-table th[data-sort-key] { cursor: pointer; user-select: none; white-space: nowrap; }
.rt-board-table th[data-sort-key]:hover, .rt-board-table th.is-sorted { color: var(--rt-primary, #1f3b73); }
.rt-board-dv-sorticon { opacity: .4; margin-left: .2rem; }
.rt-board-table th.is-sorted .rt-board-dv-sorticon { opacity: 1; }
.rt-board-table tr.is-archived td { opacity: .6; }
.rt-board-table tr.is-archived td.rt-board-rowactions { opacity: 1; }
.rt-board-dv-empty { padding: 1rem; text-align: center; color: var(--rt-gray, #6b6b6b); }
.rt-board-dv-pager { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin: .8rem 0 0; }
.rt-board-dv-pager button { min-width: 2.2rem; padding: .4rem .6rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .5rem; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.rt-board-dv-pager button.is-on { background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); border-color: var(--rt-primary, #1f3b73); }
.rt-board-grid textarea { font: inherit; font-weight: 400; padding: .5rem .6rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .5rem; width: 100%; }
.rt-board-preview-hint { margin: .3rem 0 0; font-size: .8rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-preview-refresh { margin: .2rem 0 .4rem; font-size: .9rem; color: var(--rt-gray, #6b6b6b); }
.rt-board-preview-refresh i { color: var(--rt-primary-bright, #229ce0); margin-right: .3rem; }
.rt-board-section-note { margin: .2rem 0 0; font-size: .85rem; color: var(--rt-gray, #6b6b6b); text-align: center; }
.rt-board-section-note i { color: var(--rt-primary-bright, #229ce0); margin-right: .3rem; }

/* =========================================================================
   Mobile pass (Furi, 8-28): no crazy wraps, no giant buttons, tables that
   read on a phone. Later rules win, so everything mobile lives here.
   ========================================================================= */
@media (max-width: 720px) {
	/* Nav: one scrolling strip of icon tabs, labels only on the active one. */
	.rt-board-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; }
	.rt-board-nav::-webkit-scrollbar { display: none; }
	.rt-board-nav a { flex: 0 0 auto; padding: .5rem .7rem; font-size: .8rem; }
	.rt-board-nav a span { display: none; }
	.rt-board-nav a.is-on span, .rt-board-nav a.rt-board-nav-home span { display: inline; }
	.rt-board-nav-out { margin-left: auto; }

	/* Headings and lead copy. */
	.rt-board-h2 { font-size: 1.35rem; line-height: 1.2; }
	.rt-board-lead, .rt-board-fine { font-size: .9rem; }
	.rt-board-chips { display: flex; flex-wrap: wrap; gap: .3rem; }

	/* Cards: one column, compact. */
	.rt-board-cards, .rt-board-cards--n1, .rt-board-cards--n2 { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
	.rt-board-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8rem; row-gap: .1rem; padding: .9rem 1rem; align-items: center; }
	.rt-board-card i { grid-row: 1 / span 2; font-size: 1.4rem; }
	.rt-board-card b { font-size: 1rem; }
	.rt-board-card span { font-size: .82rem; }

	/* Buttons: normal size, full width in action rows, never wrapping mid-word. */
	.rt-board .rt-btn, .rt-board .rt-btn--lg { font-size: .9rem; padding: .6rem 1rem; white-space: normal; }
	.rt-board-actions { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
	.rt-board-actions .rt-btn { width: 100%; }
	.rt-board-actions .rt-board-cancel { text-align: center; }
	.rt-board-tabs { gap: .4rem; }
	.rt-board-tabs-new { margin-left: 0; width: 100%; justify-content: center; }
	.rt-board-add summary { margin: .6rem; width: calc(100% - 1.2rem); justify-content: center; }
	.rt-board-add--open { padding: .8rem .8rem .2rem; }

	/* Forms. */
	.rt-board-grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
	.rt-board-grid input, .rt-board-grid select, .rt-board-grid textarea { font-size: 16px; } /* no iOS zoom */
	.rt-board-prefix { flex-wrap: nowrap; }
	.rt-board-prefix code { font-size: .8rem; }

	/* Paste box and preview. */
	.rt-board-paste-label { font-size: 1.05rem; }
	.rt-board-paste-row { flex-direction: column; }
	.rt-board-paste-row input { font-size: 16px; padding: .7rem .8rem; }
	.rt-board-preview.has-art { grid-template-columns: minmax(0, 1fr); }
	.rt-board-preview-art { min-height: 120px; }
	.rt-board-preview-body { padding: 1rem; }
	.rt-board-preview-title { font-size: 1.1rem; }
	.rt-board-preview-then { font-size: .95rem; }
	.rt-board-preview .rt-board-actions { flex-direction: column-reverse; }

	/* Data view: the bar stacks; tables become stacked cards. */
	.rt-board-dv-bar { gap: .5rem; }
	.rt-board-dv-search { max-width: none; font-size: 16px; }
	.rt-board-dv-count { margin-left: 0; width: 100%; }
	.rt-board-tablewrap { overflow: visible; }
	.rt-board-table, .rt-board-table tbody, .rt-board-table tr { display: block; width: 100%; }
	.rt-board-table thead { display: none; }
	.rt-board-table tbody tr { margin: 0 0 .6rem; padding: .6rem .8rem; border: 1px solid var(--rt-line, #e2e8f0); border-radius: .7rem; background: #fff; }
	.rt-board-table tbody tr[hidden] { display: none; }
	.rt-board-table td { display: block; padding: .15rem 0; border: 0; overflow-wrap: anywhere; }
	.rt-board-table td:empty { display: none; }
	.rt-board-table td small { display: inline; margin-left: .3rem; }
	.rt-board-table td.rt-board-rowactions { display: flex; gap: .6rem; justify-content: flex-end; padding-top: .4rem; margin-top: .3rem; border-top: 1px dashed var(--rt-line, #e2e8f0); white-space: normal; }
	.rt-board-table td.rt-board-rowactions .rt-board-link, .rt-board-table td.rt-board-rowactions a { padding: .4rem .6rem; }
	.rt-board-logo-cell { width: auto; }
	.rt-board-logo-cell img, .rt-board-logo-none { width: 48px; height: 36px; }
	.rt-board-dest { max-width: none; }
	.rt-board-hits b { font-size: 1rem; }
	.rt-board-dv-pager button { min-width: 2.4rem; padding: .5rem .6rem; }

	/* Stats strip. */
	.rt-board-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
	.rt-board-stats b { font-size: 1.2rem; }

	/* Footer + pill. */
	.rt-board-foot { flex-direction: column; gap: .6rem; }
	.rt-board-mode--page button { width: 100%; justify-content: center; }
	.rt-board-pill-btn { padding: .55rem .8rem; font-size: .75rem; }
	.rt-board-menu { min-width: 13rem; max-width: calc(100vw - 2rem); }

	/* Sign-in card. */
	.rt-board-signin-card { padding: 1.6rem 1.2rem; }
	.rt-board-signin-logo { max-height: 70px; }
	.rt-board-google { width: 100%; justify-content: center; }
}

/* In-place panels: a soft busy state while a save or a view loads, and a notice that fades. */
[data-rt-board-panel] { transition: opacity .15s ease; }
[data-rt-board-panel].is-busy { opacity: .55; pointer-events: none; }
.rt-board-notice { transition: opacity .4s ease; }
.rt-board-notice.is-fading { opacity: 0; }

/* ---- Bottom tab bar (phones only) ---------------------------------------- */
.rt-board-tabbar { display: none; }
@media (max-width: 720px) {
	body.rt-board-on { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	.rt-board-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; align-items: stretch; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--rt-line, #e2e8f0); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
	.rt-board-tabbar-scroll { display: flex; flex: 1 1 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.rt-board-tabbar-scroll::-webkit-scrollbar { display: none; }
	.rt-board-tab { flex: 1 0 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .4rem .3rem; border: 0; background: none; color: var(--rt-gray, #6b6b6b); font: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
	.rt-board-tab i { font-size: 1.15rem; }
	/* On the white tab bar, pure primary can be too light (Henry gold): lean it toward ink. */
	.rt-board-tab.is-on { color: color-mix(in srgb, var(--rt-primary, #1f3b73) 55%, var(--rt-ink, #1a202c)); }
	.rt-board-tab.is-on i { transform: translateY(-1px); }
	.rt-board-tab-more { flex: 0 0 64px; border-left: 1px solid var(--rt-line, #e2e8f0); }
	/* The pill goes away; its menu rises above the bar when More opens it. */
	.rt-board-pill:not(.is-off) .rt-board-pill-btn { display: none; }
	.rt-board-pill { right: .6rem; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
	.rt-board-pill .rt-board-menu { max-height: 70vh; overflow-y: auto; }
	/* The top board nav is the tab bar's job now. */
	.rt-board-nav { display: none; }
}

/* ---- The editing zone: unmistakable ------------------------------------- */
.rt-board-sheet-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: .7rem 1rem; border-radius: .7rem .7rem 0 0; background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); font-weight: 800; font-size: 1.05rem; }
.rt-board-sheet-title i { color: var(--rt-on-primary, #fff); }
.rt-board-sheet-close { margin-left: auto; color: var(--rt-on-primary, #fff) !important; font-size: 1.2rem; line-height: 1; padding: .2rem .4rem; text-decoration: none; }
.rt-board-add--open.rt-board-sheet { padding: 0 0 .2rem; border: 2px solid var(--rt-primary, #1f3b73); box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.rt-board-add--open.rt-board-sheet form { padding: 0 1.2rem 1rem; }
details.rt-board-sheet[open] { border: 2px solid var(--rt-primary, #1f3b73); box-shadow: 0 14px 40px rgba(0,0,0,.14); }
details.rt-board-sheet[open] > summary { display: none; }
details.rt-board-sheet[open] > form { padding: 0 1.2rem 1rem; }
/* While a form is open the list steps back. */
.rt-board-add--open ~ .rt-board-dv, details.rt-board-sheet[open] ~ .rt-board-dv, .rt-board-add--open ~ .rt-board-tabs, details.rt-board-sheet[open] ~ .rt-board-stats { opacity: .35; pointer-events: none; filter: grayscale(.4); }
@media (max-width: 720px) {
	.rt-board-add--open.rt-board-sheet, details.rt-board-sheet[open] { position: fixed; inset: 0; z-index: 9500; margin: 0; border: 0; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; padding-bottom: 2rem; }
	.rt-board-sheet-title { position: sticky; top: 0; z-index: 1; border-radius: 0; padding: .9rem 1rem; padding-top: calc(.9rem + env(safe-area-inset-top, 0px)); }
	.rt-board-add--open.rt-board-sheet form, details.rt-board-sheet[open] > form { padding: 0 1rem 1rem; }
	.rt-board-add--open.rt-board-sheet .rt-board-actions, details.rt-board-sheet[open] .rt-board-actions { position: sticky; bottom: 0; margin: 1rem -1rem 0; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--rt-line, #e2e8f0); }
	.rt-board-add--open ~ .rt-board-dv, details.rt-board-sheet[open] ~ .rt-board-dv { opacity: 1; filter: none; }
}

/* ---- Drop zone (membership import) --------------------------------------- */
.rt-board-drop-wrap { padding: 1rem; }
.rt-board-drop { display: grid; justify-items: center; gap: .3rem; padding: 1.6rem 1rem; border: 2px dashed var(--rt-primary-bright, #229ce0); border-radius: .9rem; background: var(--rt-cream, #f2f6fa); text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.rt-board-drop i { font-size: 1.8rem; color: var(--rt-primary, #1f3b73); }
.rt-board-drop b { font-size: 1.05rem; }
.rt-board-drop span { font-size: .85rem; color: var(--rt-gray, #6b6b6b); max-width: 420px; }
.rt-board-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rt-board-drop.is-over { background: #fff; border-color: var(--rt-primary, #1f3b73); border-style: solid; }
.rt-board-drop.is-loading { opacity: .6; }
.rt-board-drop-how { margin: .6rem 0 0; font-size: .8rem; color: var(--rt-gray, #6b6b6b); text-align: center; }
.rt-board-stats--inline { margin: .2rem 1rem 1rem; }
.rt-board-inline-cancel .rt-board-actions { margin-top: 0; }

/* ---- Hub tabs inside a panel (the team-page pattern) ------------------- */
.rt-board-hubtabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; margin: .2rem 0 1.3rem; border-bottom: 3px solid var(--rt-primary, #1f3b73); }
.rt-board-hubtab { padding: 12px 26px 10px; border: 1px solid var(--rt-line, #e2e8f0); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--rt-cream, #f2f6fa); color: var(--rt-ink, #1a202c); font: inherit; font-weight: 800; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.rt-board-hubtab.is-on { background: var(--rt-primary, #1f3b73); border-color: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); }
.rt-board-hubtab:not(.is-on):hover, .rt-board-hubtab:not(.is-on):focus-visible { background: var(--rt-paper, #fff); color: var(--rt-primary, #1f3b73); box-shadow: inset 0 3px 0 var(--rt-primary, #1f3b73); transform: translateY(-2px); }
.rt-board-hubtab-n { margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(0,0,0,.1); font-size: .75rem; letter-spacing: 0; }
.rt-board-hubtab.is-on .rt-board-hubtab-n { background: rgba(255,255,255,.22); }
.rt-board-hubpanel { margin: 0; }
.rt-board-tag--soft { background: var(--rt-cream, #f2f6fa); color: var(--rt-primary, #1f3b73); text-transform: none; font-size: .75rem; }
.rt-board-qrbtn { white-space: nowrap; }
@media (max-width: 720px) {
	.rt-board-hubtab { flex: 1; padding: 10px 6px 8px; font-size: .78rem; letter-spacing: .02em; }
	.rt-board-hubtab-n { margin-left: .25rem; padding: 0 .4rem; }
}
@media (prefers-reduced-motion: reduce) { .rt-board-hubtab { transition: none; } .rt-board-hubtab:not(.is-on):hover { transform: none; } }

/* ---- The QR look picker (every download passes through it) ------------ */
.rt-board-qrdlg { width: min(760px, 94vw); max-width: 94vw; padding: 0; border: 0; border-radius: 1rem; box-shadow: 0 24px 70px rgba(0,0,0,.32); font-family: inherit; color: var(--rt-ink, #1a202c); background: #fff; }
.rt-board-qrdlg::backdrop { background: rgba(10, 20, 40, .58); }
.rt-board-qrdlg-head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.1rem; background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); font-weight: 800; font-size: 1.05rem; }
.rt-board-qrdlg-head i { color: var(--rt-on-primary, #fff); }
.rt-board-qrdlg-x { margin-left: auto; border: 0; background: none; color: var(--rt-on-primary, #fff); font-size: 1.3rem; line-height: 1; padding: .2rem .4rem; cursor: pointer; }
.rt-board-qrdlg-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.3rem; padding: 1.2rem 1.3rem; }
.rt-board-qrdlg-preview { display: grid; gap: .55rem; justify-items: center; align-content: start; }
.rt-board-qrdlg-canvas { width: 256px; height: 256px; border-radius: .7rem; border: 1px solid var(--rt-line, #e2e8f0); background: #fff; overflow: hidden; }
.rt-board-qrdlg-canvas.is-clear { background-color: #fff; background-image: conic-gradient(#e4e8ee 25%, transparent 0 50%, #e4e8ee 0 75%, transparent 0); background-size: 18px 18px; }
.rt-board-qrdlg-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.rt-board-qrdlg-url { margin: 0; max-width: 256px; font-size: .78rem; color: var(--rt-gray, #6b6b6b); overflow-wrap: anywhere; text-align: center; }
.rt-board-qrdlg-opts { display: grid; gap: .9rem; align-content: start; }
.rt-board-qrdlg-opts fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.rt-board-qrdlg-opts legend { margin: 0 0 .35rem; padding: 0; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--rt-gray, #6b6b6b); }
.rt-board-qrdlg-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rt-board-qrdlg-chip { padding: .42rem .9rem; border: 2px solid var(--rt-primary, #1f3b73); border-radius: 999px; background: var(--rt-paper, #fff); color: var(--rt-primary, #1f3b73); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.rt-board-qrdlg-chip:hover { background: var(--rt-cream, #f2f6fa); }
.rt-board-qrdlg-chip.is-on { background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); }
.rt-board-qrdlg-color { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .85rem; font-weight: 700; }
.rt-board-qrdlg-color input[type="color"] { width: 2.6rem; height: 2rem; padding: 0; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .4rem; background: none; }
.rt-board-qrdlg-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; }
.rt-board-qrdlg-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.3rem 1.1rem; border-top: 1px solid var(--rt-line, #e2e8f0); }
.rt-board-qrdlg-foot .rt-btn { margin: 0; }
@media (max-width: 720px) {
	.rt-board-qrdlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
	.rt-board-qrdlg-body { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; }
	.rt-board-qrdlg-canvas { width: 200px; height: 200px; }
	.rt-board-qrdlg-foot { position: sticky; bottom: 0; background: #fff; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
}
.rt-board-qrdlg-foot .rt-board-cancel { border: 0; background: none; padding: .4rem .2rem; color: var(--rt-primary, #1f3b73); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---- Membership vs enrollment chart (Board Mode, FURIOPS-144) ---------- */
.rt-board-mbchart { position: relative; margin: 0 0 1.6rem; padding: 1rem 1.1rem .6rem; border: 1px solid var(--rt-line, #e2e8f0); border-radius: .8rem; background: #fff; }
.rt-board-mbchart-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 .4rem; }
.rt-board-mbchart-bar label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; }
.rt-board-mbchart-bar select { font: inherit; font-weight: 400; padding: .3rem .5rem; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .5rem; }
.rt-board-mbchart-tablebtn { margin-left: auto; }
.rt-board-mbchart-fig { margin: 0; }
.rt-board-mbchart-fig figcaption { font-size: .85rem; font-weight: 700; color: var(--rt-gray, #6b6b6b); margin: 0 0 .3rem; }
.rt-mbc-grid { stroke: #eef1f5; stroke-width: 1; }
.rt-mbc-axis { stroke: #d4dae2; stroke-width: 1; }
.rt-mbc-bar { fill: var(--rt-primary, #2566b6); }
.rt-mbc-bar.is-hover { fill-opacity: .85; }
.rt-mbc-bar--est { fill-opacity: .45; }
.rt-mbc-bar--est.is-hover { fill-opacity: .35; }
.rt-mbc-cap { font-size: 11px; font-weight: 700; fill: var(--rt-gray, #6b6b6b); }
.rt-mbc-year { font-size: 11px; font-weight: 700; fill: var(--rt-ink, #1a202c); }
.rt-mbc-n { font-size: 10px; fill: var(--rt-gray, #6b6b6b); font-variant-numeric: tabular-nums; }
.rt-mbc-tick { font-size: 10px; fill: var(--rt-gray, #6b6b6b); font-variant-numeric: tabular-nums; }
.rt-mbc-hit { fill: transparent; cursor: pointer; outline-offset: -2px; }
.rt-board-mbtip { position: absolute; z-index: 5; padding: .5rem .7rem; border-radius: .5rem; background: var(--rt-ink, #1a202c); color: #fff; font-size: .8rem; line-height: 1.35; pointer-events: none; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.rt-board-mbtip p { margin: 0; }
.rt-board-mbtip b { font-size: .95rem; }
.rt-board-mbtip-year { font-weight: 800; margin-bottom: .15rem !important; }
.rt-board-mbchart-table { margin-top: .5rem; }
@media (max-width: 720px) {
	.rt-board-mbchart { padding: .8rem .7rem .4rem; }
	.rt-board-mbchart-bar { gap: .6rem; }
	.rt-board-mbchart-tablebtn { margin-left: 0; }
}

/* Chart view tabs, the line/bar switch, and the by-type legend. */
.rt-board-mbchart-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.rt-board-mbchart-tab { padding: .4rem .95rem; border: 2px solid var(--rt-primary, #1f3b73); border-radius: 999px; background: var(--rt-paper, #fff); color: var(--rt-primary, #1f3b73); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.rt-board-mbchart-tab:hover { background: var(--rt-cream, #f2f6fa); }
.rt-board-mbchart-tab.is-on { background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); }
.rt-board-mbchart-type { display: inline-flex; border: 1px solid var(--rt-line, #cbd5e0); border-radius: .5rem; overflow: hidden; margin-left: auto; }
.rt-board-mbchart-type button { border: 0; background: #fff; padding: .35rem .6rem; font-size: .9rem; color: var(--rt-gray, #6b6b6b); cursor: pointer; }
.rt-board-mbchart-type button + button { border-left: 1px solid var(--rt-line, #cbd5e0); }
.rt-board-mbchart-type button.is-on { background: var(--rt-primary, #1f3b73); color: var(--rt-on-primary, #fff); }
.rt-board-mbchart-type button.is-on i { color: var(--rt-on-primary, #fff); }
.rt-board-mbchart-type ~ .rt-board-mbchart-tablebtn { margin-left: 0; }
.rt-mbc-line { stroke-width: 2; stroke-linecap: round; }
.rt-mbc-line--brand { stroke: var(--rt-primary, #2566b6); }
.rt-mbc-line--est { stroke-dasharray: 4 4; }
.rt-mbc-line.is-hover { stroke-opacity: .85; }
.rt-mbc-dot { stroke: #fff; stroke-width: 2; }
.rt-mbc-dot--brand { fill: var(--rt-primary, #2566b6); }
.rt-mbc-dot--est { fill: #fff; stroke: var(--rt-primary, #2566b6); }
.rt-mbc-seg.is-hover, .rt-mbc-dot.is-hover { opacity: .85; }
.rt-board-mbc-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .3rem 0 .2rem; font-size: .82rem; font-weight: 600; color: var(--rt-ink, #1a202c); }
.rt-board-mbc-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.rt-board-mbc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rt-board-mbtip-key { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
@media (max-width: 720px) {
	.rt-board-mbchart-tab { font-size: .78rem; padding: .35rem .7rem; }
	.rt-board-mbchart-type { margin-left: 0; }
}