/* Corners: cards 18px, inner parts 12px, buttons and chips full pills, avatars round.
   Layers: background menu 5, skip link 40, messages 60. The panel sits above these in the browser's top layer. */
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
/* Board of Operations (board.gvrpjunction.com). Stands alone: it doesn't load the staff site's styles. */
.pill-info { background: color-mix(in srgb, var(--q-met) 14%, transparent); color: var(--q-met); }
.ob-open { all: unset; cursor: pointer; font-weight: 600; color: inherit; }
.ob-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.ob-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.ob-none { font-size: 0.85rem; }
.ob-wait { display: block; margin-top: 3px; font-size: 0.78rem; font-weight: 600; color: var(--warn); }
.ob-lock { display: inline-flex; align-items: center; gap: 4px; font: 600 0.78rem var(--font); color: var(--muted); }
.ob-flash { display: flex; gap: 10px; padding: 12px 16px; margin: 0 0 22px; border-radius: 12px; background: var(--accent-soft); font-size: 0.95rem; }
.ob-flash i { color: var(--accent); margin-top: 4px; }
.ob-flash .ob-open { text-decoration: underline; text-underline-offset: 3px; }
.ob-summary { color: var(--muted); }
.ob-summary b { color: var(--bad); }

/* Dialog */
#ob-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
#ob-dlg::backdrop { background: rgba(8, 11, 16, 0.6); }
#ob-dlg h2 { font-size: 1.4rem; margin: 12px 0 6px; outline: none; }
#ob-dlg .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ob-ev { margin-top: 14px !important; }
#ob-dlg h3 { margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid var(--border); }
#ob-dlg p { margin: 0 0 8px; }
#ob-dlg label:not(.ob-verdict label) { display: block; margin-top: 12px; font-size: 0.88rem; font-weight: 600; }
#ob-dlg input:not([type='radio']), #ob-dlg select, #ob-dlg textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; font: 400 1rem var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px; }
.ob-dlg-head { display: flex; align-items: center; justify-content: space-between; }
.ob-x { width: 34px; height: 34px; border: 0; border-radius: 12px; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.ob-x:hover { background: var(--bg-alt); color: var(--text); }
.ob-supports { font-size: 0.9rem; }
.ob-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 14px 0 0; }
.ob-facts dt { font-size: 0.76rem; color: var(--muted); }
.ob-facts dd { margin: 0; font-weight: 600; }
.ob-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ob-verdict { display: flex; gap: 8px; padding: 0; margin: 0; border: 0; }
.ob-verdict legend { font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.ob-verdict input { position: absolute; opacity: 0; }
.ob-verdict span { display: block; padding: 7px 16px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.ob-verdict input:checked + span { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.ob-verdict input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.ob-dlg-foot:empty { display: none; }

/* Comment thread */
.ob-count { font-weight: 700; color: var(--muted); }
.ob-thread { list-style: none; margin: 0 0 10px; padding: 0; }
.ob-thread li { display: flex; gap: 10px; padding: 8px 0; }
.ob-thread li > div { min-width: 0; flex: 1; }
#ob-dlg .ob-thread p { margin: 0; }
.ob-thread p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 0.86rem; }
.ob-thread small { color: var(--muted); }
.ob-tag { padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 800; }
.ob-del { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ob-post { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
#ob-dlg .ob-post textarea { flex: 1; margin-top: 0; }
.ob-post .btn { flex: none; }
#ob-dlg .ob-wait { margin-bottom: 8px; }
.w-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fbfbfd; font-weight: 900; font-size: 0.9rem; }

/* Expectations and Audits tabs */
.ob-exp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.ob-exp .card { padding: 20px; box-shadow: none; }
.ob-exp .rank-h { margin-top: 0; }
.ob-exp ul { margin: 0; padding-left: 1.1em; font-size: 0.95rem; }
.ob-exp li + li { margin-top: 6px; }
.ob-rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.ob-rounds .card { padding: 20px; box-shadow: none; }
.ob-rounds .stat-label { margin: 0 0 6px; font-size: 0.88rem; font-weight: 800; color: var(--muted); }
.ob-rounds h3 { margin-bottom: 8px; }
.ob-rounds p:last-child { margin-bottom: 0; font-size: 0.92rem; }
.ob-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }


:root {
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Nunito', system-ui, sans-serif;
  --paper: #fbfbfd; --bg: #f4f4f7; --bg-alt: #e9e9ef; --surface: var(--paper); --border: #e4e4ea; --border-strong: #cdcdd6;
  --text: #1d1d26; --muted: #62626f; --radius: 18px;
  --accent: #b8442a; --accent-fill: #ec6d4d; --on-accent: #210b05; --accent-soft: rgba(236, 109, 77, 0.14);
  --ok: #17753f; --warn: #8f5500; --bad: #b42318; --q-met: #2c63c9;
  --shadow: 0 2px 4px rgba(15, 15, 30, 0.12), 0 14px 30px -14px rgba(15, 15, 30, 0.4);
  --rk-director: #2859b8; --rk-asst: #9b3cc0; --rk-lead: #c42a45; --rk-admin: #2f7a3a;
}
:root[data-theme='dark'] {
  --bg: #17171f; --bg-alt: #24242e; --surface: #1f1f29; --border: #32323e; --border-strong: #454554;
  --text: #f1f1f5; --muted: #adadba; --accent: #ff9a80; --ok: #5fd08a; --warn: #f2b453; --bad: #ff8577; --q-met: #8fb0ff;
  --rk-director: #9ec2ff; --rk-asst: #eaabff; --rk-lead: #ff7a8f; --rk-admin: #a3c189;
}
.rk-director { --rk: var(--rk-director); } .rk-asst { --rk: var(--rk-asst); } .rk-lead { --rk: var(--rk-lead); } .rk-admin { --rk: var(--rk-admin); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 600 1rem/1.45 var(--font); color: var(--text); background: #1c2230; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.15; margin: 0 0 0.4em; }
.wrap { width: 100%; max-width: none; margin: 0; padding-inline: 24px; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0.6em 1.2em; border: 1px solid transparent; border-radius: 999px; font: 800 0.95rem var(--font); cursor: pointer; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.pill { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.pill-counted { background: rgba(31, 157, 85, 0.14); color: var(--ok); }
.pill-review { background: rgba(217, 119, 6, 0.17); color: var(--warn); }
.pill-rejected { background: rgba(220, 38, 38, 0.13); color: var(--bad); }
.pill-muted { background: var(--bg-alt); color: var(--muted); }
.pill-wait { background: rgba(217, 119, 6, 0.12); color: var(--warn); }
.pill-ic { display: inline-flex; }
.rank { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; color: var(--rk); background: color-mix(in srgb, var(--rk) 14%, transparent); }

/* Wallpapers. --ink is the text that sits directly on the wall. */
.wall-page { min-height: 100dvh; padding: 22px 0 90px; color: var(--ink); background-size: cover; background-position: center; }
.wall { --ink: #fbfbfd; --ink-soft: rgba(251, 251, 253, 0.88); --glass: rgba(10, 10, 25, 0.34); --glass-line: rgba(255, 255, 255, 0.2); }
.wall-head { display: flex; align-items: center; gap: 14px; padding: 0 24px; margin-bottom: 16px; }
.wall-head img { border-radius: 12px; }
.wall-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.wall-head p { margin: 0; color: var(--ink-soft); }

/* Bar: who, tabs, the "needs you" note */
.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 0 24px; margin-bottom: 12px; }
.st-who { display: flex; align-items: center; gap: 8px; }
.st-who .muted { color: var(--ink-soft); }
.st-tabs { display: flex; gap: 6px; margin-left: auto; }
.st-tabs button { padding: 7px 16px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--ink); font: 800 0.9rem var(--font); cursor: pointer; }
.st-tabs button[aria-pressed='true'] { background: var(--paper); color: #1d1d26; border-color: var(--paper); }
.ob-flash { margin: 0 24px 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.w-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px; margin-bottom: 18px; }
.w-chip { padding: 5px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); font-size: 0.86rem; color: var(--ink); }
.w-chip b { font-weight: 900; }

/* Your wallpaper: a personal setting, in the bar */
.w-walls { position: relative; }
.w-walls summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--ink); font-weight: 800; font-size: 0.9rem; cursor: pointer; list-style: none; }
.w-walls summary::-webkit-details-marker { display: none; }
.w-walls > div { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; display: grid; gap: 6px; width: 230px; padding: 10px; border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.w-walls button { display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 12px; background: none; color: inherit; font: 700 0.9rem var(--font); text-align: left; cursor: pointer; }
.w-walls button:hover, .w-walls button[aria-pressed='true'] { background: var(--bg-alt); }
.w-swatch { flex: none; width: 44px; height: 30px; border-radius: 12px; background-size: cover; background-position: center; }

/* The shelf: columns side by side, scrolling sideways when they run out of room */
.w-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 18px; padding: 0 24px 12px; overflow-x: auto; align-items: start; scrollbar-width: thin; scrollbar-color: var(--glass-line) transparent; scroll-snap-type: x proximity; scroll-padding-inline: 24px; }
.w-col { min-width: 0; scroll-snap-align: start; }
.w-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.w-col-head h2 { margin: 0; font-size: 1.3rem; }
.w-col-head p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.w-col-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: 6px 0 10px; font-size: 0.82rem; color: var(--ink-soft); }
.w-col-sub .ob-lock { color: var(--ink-soft); font-weight: 700; }
.w-plus { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); color: #1d1d26; font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.15s; }
.w-plus:hover { transform: scale(1.08); }

/* Pinned expectations */
.w-pin { margin-bottom: 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); font-size: 0.88rem; }
.w-pin summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; }
.w-pin summary::-webkit-details-marker { display: none; }
.w-pin summary span { margin-left: auto; font-weight: 800; color: var(--ink-soft); }
.w-pin ul { margin: 0; padding: 0 14px 12px 32px; color: var(--ink-soft); }
.w-pin li + li { margin-top: 5px; }
.w-pin-note { display: flex; gap: 8px; padding: 10px 14px; color: var(--ink-soft); }

/* Cards */
.w-card { padding: 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); transition: transform 0.15s; }
.w-card:hover { transform: translateY(-2px); }
.w-by { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.w-by span:nth-child(2) { min-width: 0; margin-right: auto; line-height: 1.15; }
.w-by b { display: block; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-by small { color: var(--muted); font-size: 0.76rem; }
.w-card .ob-open { display: block; width: 100%; padding-block: 3px; font-size: 1.04rem; font-weight: 800; line-height: 1.28; }
.w-ev { display: flex; gap: 6px; align-items: center; margin: 9px 0 0; padding: 7px 10px; border-radius: 12px; background: var(--bg); font-size: 0.82rem; color: var(--muted); }
.w-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 0.82rem; }
.w-foot .ob-wait { margin: 0; }
.w-stamp { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.w-done { color: var(--ok); } .w-missed { color: var(--bad); } .w-excused { color: var(--muted); }
.w-talk { display: inline-flex; align-items: center; gap: 4px; margin: -8px -8px -8px auto; padding: 8px; min-height: 36px; border-radius: 12px; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.ob-exp .card, .ob-rounds .card { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); }
.rank-h { color: var(--rk); }
.table-scroll { overflow-x: auto; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.data th, .data td { padding: 10px 14px; text-align: left; vertical-align: top; }
.data thead th { font-size: 0.82rem; color: var(--muted); }
.data tbody tr { border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .wall-head, .st-bar, .w-chips, .w-shelf { padding-inline: 16px; }
  .w-shelf { grid-auto-columns: 84vw; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
  .ob-flash { margin-inline: 16px; }
  .st-tabs { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .w-card, .w-plus { transition: none; } }

/* Bar extras, sign-in and small states */
.st-who .w-av { width: 30px; height: 30px; }
img.w-av { object-fit: cover; }
.w-theme, .w-out { padding: 7px 12px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--ink); font: 800 0.9rem var(--font); cursor: pointer; }
.w-bad-text { color: var(--bad) !important; }
.w-empty { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--glass-line); color: var(--ink-soft); font-size: 0.88rem; }
.w-toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px; border-radius: 12px; background: #1d1d26; color: #fbfbfd; box-shadow: var(--shadow); }
.w-trial { margin: 0 0 6px; font-size: 0.82rem; font-weight: 800; color: var(--warn); }
.w-sched { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 18px; }
.w-sched label { display: grid; gap: 4px; font-size: 0.88rem; font-weight: 700; }
.w-sched input, .w-expadd input { padding: 8px 12px; font: 600 0.95rem var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; }
.w-expadd { display: flex; gap: 8px; margin-top: 12px; }
.w-expadd input { flex: 1; min-width: 0; }
.ob-exp li { display: list-item; }
.ob-exp .ob-del { margin-left: 6px; padding: 0; vertical-align: middle; }
.w-ev span { min-width: 0; overflow-wrap: anywhere; }
.btn-sm { padding: 0.45em 1em; font-size: 0.88rem; }
.btn:focus-visible, .ob-x:focus-visible, .w-plus:focus-visible, .st-tabs button:focus-visible, .w-theme:focus-visible, .w-out:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 1001px) { .ob-exp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Frosted controls so they stay readable on any wallpaper (a solid fill where blur isn't wanted). */
.w-chip, .w-pin, .st-tabs button:not([aria-pressed='true']), .w-walls summary, .w-theme, .w-out { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (prefers-reduced-transparency: reduce) {
  .wall { --glass: rgba(16, 18, 28, 0.9); }
    .w-chip, .w-pin, .st-tabs button:not([aria-pressed='true']), .w-walls summary, .w-theme, .w-out { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Press feedback */
.btn, .w-plus, .st-tabs button, .w-theme, .w-out, .w-walls summary, .ob-verdict span { transition: transform 0.12s var(--ease-out); }
.btn:active:not([disabled]), .w-plus:active, .st-tabs button:active, .w-theme:active, .w-out:active, .w-walls summary:active { transform: scale(0.96); }
.w-plus:hover { transform: scale(1.06); }
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
.st-tabs button:focus-visible, .w-theme:focus-visible, .w-out:focus-visible, .w-plus:focus-visible, .w-walls summary:focus-visible, .w-shelf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Icon and label controls in the bar */
.w-theme, .w-out { min-height: 38px; }
.w-out { display: inline-flex; align-items: center; gap: 6px; }

/* While the board loads: the shape of the wall */
.w-skel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 18px; padding: 56px 24px 0; overflow: hidden; }
.w-skel i { display: block; height: 128px; margin-bottom: 12px; border-radius: 18px; background: var(--glass); animation: w-pulse 1.4s ease-in-out infinite alternate; }
.w-skel i:first-child { height: 44px; border-radius: 12px; }
@keyframes w-pulse { to { opacity: 0.5; } }

/* The wall arrives once, on first load; the panel opens from where you are. */
.w-first .w-card { animation: w-in 0.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes w-in { from { opacity: 0; transform: translateY(10px); } }
#ob-dlg[open] { animation: w-open 0.2s var(--ease-out); }
@keyframes w-open { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) {
  .w-first .w-card, #ob-dlg[open], .w-skel i { animation: none; }
  .btn, .w-plus, .st-tabs button, .w-theme, .w-out, .w-walls summary, .ob-verdict span { transition: none; }
}

@media (max-width: 640px) {
  .st-bar { gap: 8px; }
  .st-who { flex: 1; min-width: 0; }
  .st-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-walls summary span, .w-out span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .w-walls summary, .w-theme, .w-out { width: 40px; height: 40px; justify-content: center; padding: 0; }
  .w-walls > div { left: auto; right: -96px; }
  .st-tabs { order: 5; width: 100%; margin: 0; }
  .st-tabs button { flex: 1; min-height: 40px; padding-inline: 8px; }
  .w-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .w-chip { flex: none; }
  .w-skel { grid-auto-columns: 84vw; padding: 56px 16px 0; }
}
.ob-head-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Skip link, field errors, panel header buttons */
.skip { position: absolute; left: 16px; top: -60px; z-index: 40; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 12px; background: var(--paper); color: #1d1d26; font-weight: 800; }
.skip:focus { top: 12px; }
#app:focus { outline: none; }
.ob-err { margin: 4px 0 0 !important; color: var(--bad); font-size: 0.86rem; font-weight: 700; }
[aria-invalid='true'] { border-color: var(--bad) !important; }
.ob-dlg-head > span:last-child { display: flex; flex: none; }

/* Comfortable tap targets on phones and other touch screens */
@media (max-width: 640px), (pointer: coarse) {
  .w-plus, .w-walls summary, .w-theme, .w-out, .ob-x { min-width: 44px; min-height: 44px; }
  .w-plus { width: 44px; height: 44px; }
  .st-tabs button, .w-walls button, .btn, .w-pin summary { min-height: 44px; }
  .w-talk { min-width: 44px; min-height: 44px; justify-content: center; margin-block: -10px; }
  .w-card .ob-open { min-height: 44px; display: flex; align-items: center; padding-block: 8px; }
  .ob-del { min-width: 44px; min-height: 44px; }
  .ob-flash .ob-open { min-height: 0; }
}

::placeholder { color: var(--muted); opacity: 1; }

/* ========== The look: calm page, a block of colour heading each area, badge tags ========== */
:root {
  --font: 'Manrope', system-ui, sans-serif; --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --paper: #fdfdfe; --bg: #f5f6f8; --bg-alt: #eceef2; --surface: #fdfdfe; --border: #e2e5eb; --border-strong: #cbd0da;
  --text: #16181d; --muted: #5a606c; --accent: #bf3a1c; --accent-fill: #ef6240; --on-accent: #1d0a05; --radius: 18px;
  --ok: #137046; --warn: #8a5600; --bad: #bc2519; --q-met: #2a4fc4;
  --rk-director: #3355d6; --rk-asst: #ef6240; --rk-lead: #f4bd3c; --rk-admin: #27a56b;
  --shadow: 0 1px 2px rgba(30, 36, 50, 0.06);
}
.wall { --ink: #16181d; --ink-soft: #5a606c; --glass: #fdfdfe; --glass-line: #e2e5eb; }
.rk-director { --on: #fdfdfe; --tint: #e7ecfd; --deep: #2a48bd; }
.rk-asst { --on: #16181d; --tint: #fde9e3; --deep: #bf3a1c; }
.rk-lead { --on: #16181d; --tint: #fdf3d6; --deep: #875a00; }
.rk-admin { --on: #16181d; --tint: #dff4e9; --deep: #137046; }
.wall-page { padding-top: 32px; }
.wall-head { padding-inline: 32px; margin-bottom: 20px; }
.wall-head img { width: 60px; height: 60px; }
.wall-head h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.wall-head p { margin-top: 6px; font-size: 1.02rem; font-weight: 500; }
.st-bar { padding-inline: 32px; }
.st-tabs button, .w-out { background: none; backdrop-filter: none; border-color: transparent; font-weight: 700; }
.st-tabs button[aria-pressed='true'] { background: #16181d; color: #fdfdfe; border-color: #16181d; }
.ob-flash { margin-inline: 32px; background: #fdf3d6; box-shadow: none; }
.ob-flash i { color: #875a00; }
.w-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 8px 32px 26px; padding: 0; }
.w-chip { display: grid; padding: 0 0 0 18px; border: 0; border-left: 1px solid var(--border-strong); border-radius: 0; background: none; backdrop-filter: none; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.w-chip b { font: 800 2.2rem/1.1 var(--display); letter-spacing: -0.03em; color: var(--text); }
.w-chip.w-bad b { color: var(--accent); }
.w-shelf { gap: 20px; padding-inline: 32px; scroll-padding-inline: 32px; }
.w-col-head h2 { font-weight: 800; letter-spacing: -0.025em; }
.w-pin { background: none; backdrop-filter: none; border: 0; }
.w-pin summary { padding: 0 2px 8px; }
.w-card { padding: 16px; border: 1px solid var(--border); }
.w-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(30, 36, 50, 0.3); }
.w-card:has(.pill-rejected) { background: #fff4f0; border-color: #f4bdb0; }
.w-card .ob-open { font: 700 1.14rem/1.2 var(--display); letter-spacing: -0.01em; }
.w-plus { box-shadow: none; }

/* 1. Colour tops: a solid block of colour heads each column */
.w-col-head { padding: 16px 16px 18px; border-radius: 18px; background: var(--rk); color: var(--on); }
.w-col-head h2 { font-size: clamp(1.55rem, 2.2vw, 1.95rem); line-height: 1.05; color: var(--on); }
.w-col-head p { color: var(--on); }
.w-plus { background: #16181d; color: #fdfdfe; }
.w-col-sub { margin: 10px 4px 8px; }


.pill { --c: #5a606c; --t: #eceef2; --l: #fafbfc; --on: #fdfdfe; font: 800 0.74rem/1 var(--font); letter-spacing: 0.005em; background: none; padding: 0; border-radius: 999px; color: var(--c); }
.pill-counted { --c: #0f7a4c; --t: #d5f3e3; --l: #effbf5; }
.pill-rejected { --c: #cc2a1d; --t: #fddcd6; --l: #fff2ef; }
.pill-review { --c: #a65b00; --t: #fde7bb; --l: #fff8e8; }
.pill-wait { --c: #9a5a00; --t: #fdeecb; --l: #fffaf0; }
.pill-info { --c: #2a4fc4; --t: #dbe3fc; --l: #f1f4fe; }
.pill-muted { --c: #5a606c; --t: #e6e8ee; --l: #f7f8fa; }
.pill-ic { display: inline-grid; place-items: center; flex: none; font-size: 0.95rem; line-height: 1; }
.w-foot { gap: 6px; }
.w-ev { padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); color: #3f444f; font-weight: 700; }
.w-ev i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(30, 36, 50, 0.12); color: var(--accent); }
.ob-lock { padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--border-strong), 0 1px 1px rgba(30, 36, 50, 0.05); color: #3f444f; font-weight: 800; }
.ob-tag { padding: 2px 8px; }

/* Badge: an icon in a solid coin, on a two-tone pill with a fine inner ring */
.pill { padding: 3px 10px 3px 3px; gap: 5px; background: linear-gradient(180deg, var(--l), var(--t)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 1px 2px color-mix(in srgb, var(--c) 18%, transparent); }
.pill-ic { width: 19px; height: 19px; border-radius: 50%; background: var(--c); color: var(--on); font-size: 0.8rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }


.pill-ic i { display: block; width: 12px; height: 12px; font-size: 12px; line-height: 1; }
.pill-ic i { transform: translateY(0.5px); }
.pill-ic .ph-check { transform: translate(-0.1px, 0); }
.pill-ic .ph-arrow-clockwise { transform: translate(-0.3px, 0.5px); }
.pill-ic .ph-x, .pill-ic .ph-minus, .pill-ic .ph-hourglass-medium { transform: translateY(0.4px); }
.pill-ic i::before { display: block; }
.pill { padding: 3px 10px 3px 3px; }
.pill-ic { width: 20px; height: 20px; }
.rank { color: var(--deep); background: var(--tint); }
.rank-h { color: var(--deep); }

/* Text that sits straight on the page */
.w-chip { color: var(--ink-soft); border-left-color: var(--glass-line); }
.w-chip b { color: var(--ink); }
.w-pin, .w-pin summary span { color: var(--ink); }
.st-tabs button, .w-out { color: var(--ink); }
.w-pin-note { color: var(--ink-soft); }

/* Personal backgrounds */
.wall-page { background-color: var(--bg); }
.wall[data-wall='dots'] .wall-page { background-image: radial-gradient(rgba(40, 50, 80, 0.2) 1.5px, transparent 1.5px); background-size: 22px 22px; }
.wall[data-wall='city'] { --ink: #fbfbfd; --ink-soft: rgba(251, 251, 253, 0.86); --glass: rgba(14, 16, 22, 0.62); --glass-line: rgba(255, 255, 255, 0.24); }
.wall[data-wall='city'] .wall-page { background-image: linear-gradient(rgba(12, 14, 22, 0.74), rgba(12, 14, 22, 0.82)), url(/assets/img/downtown-night.webp); background-size: cover; background-position: center; }
.wall[data-wall='city'] .st-tabs button[aria-pressed='true'] { background: var(--paper); color: #16181d; border-color: var(--paper); }
.w-swatch-clean { background: #f5f6f8; box-shadow: inset 0 0 0 1px #cbd0da; }
.w-swatch-city { background-image: url(/assets/img/downtown-night.webp); }
.w-swatch-dots { background-color: #f5f6f8; background-image: radial-gradient(rgba(40, 50, 80, 0.4) 1px, transparent 1px); background-size: 7px 7px; box-shadow: inset 0 0 0 1px #cbd0da; }

/* Dark */
:root[data-theme='dark'] {
  --paper: #1d2027; --bg: #14161b; --bg-alt: #262a33; --surface: #1d2027; --border: #2e323c; --border-strong: #454a56;
  --rk-director: #3355d6; --rk-asst: #ef6240; --rk-lead: #f4bd3c; --rk-admin: #27a56b;
  --text: #f0f1f4; --muted: #adb3bf; --accent: #ff9478; --ok: #62d399; --warn: #f5c25b; --bad: #ff8d7f; --q-met: #9db3ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
:root[data-theme='dark'] .wall:not([data-wall='city']) { --ink: #f0f1f4; --ink-soft: #adb3bf; --glass: #1d2027; --glass-line: #2e323c; }
:root[data-theme='dark'] .rk-director { --tint: #1e2747; --deep: #a9bbff; }
:root[data-theme='dark'] .rk-asst { --tint: #3b211b; --deep: #ffa68f; }
:root[data-theme='dark'] .rk-lead { --tint: #3a2f12; --deep: #f8d27a; }
:root[data-theme='dark'] .rk-admin { --tint: #16332a; --deep: #7fdcae; }
:root[data-theme='dark'] .wall[data-wall='dots'] .wall-page { background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1.5px, transparent 1.5px); }
:root[data-theme='dark'] .st-tabs button[aria-pressed='true'] { background: #f0f1f4; color: #16181d; border-color: #f0f1f4; }
:root[data-theme='dark'] .w-card:has(.pill-rejected) { background: #2c1d1c; border-color: #6d352c; }
:root[data-theme='dark'] .ob-flash { background: #3a2f12; }
:root[data-theme='dark'] .ob-flash i { color: #f5c25b; }
:root[data-theme='dark'] .pill { --l: color-mix(in srgb, var(--c) 22%, #1d2027); --t: color-mix(in srgb, var(--c) 14%, #1d2027); }
:root[data-theme='dark'] .pill-counted { --c: #62d399; --on: #0c2a1c; }
:root[data-theme='dark'] .pill-rejected { --c: #ff8d7f; --on: #3a0f0a; }
:root[data-theme='dark'] .pill-review, :root[data-theme='dark'] .pill-wait { --c: #f5c25b; --on: #33240a; }
:root[data-theme='dark'] .pill-info { --c: #9db3ff; --on: #121c3f; }
:root[data-theme='dark'] .pill-muted { --c: #adb3bf; --on: #1d2027; }
:root[data-theme='dark'] .w-ev { color: #c9ced8; }
:root[data-theme='dark'] .ob-lock { color: #c9ced8; }

@media (max-width: 640px) {
  .wall-head, .st-bar { padding-inline: 16px; }
  .wall-head img { width: 44px; height: 44px; }
  .ob-flash { margin-inline: 16px; }
  .w-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; margin-inline: 16px; }
  .w-shelf { padding-inline: 16px; scroll-padding-inline: 16px; }
}
.w-col-sub .ob-lock { color: #3f444f; }
:root[data-theme='dark'] .w-col-sub .ob-lock { color: #c9ced8; }
.wall[data-wall='city'] .w-chip.w-bad b { color: #ffa48d; }

/* Sign-in: one centered card with the board's four colour tops behind it */
.wall-page:has(.w-gate) { display: grid; place-items: center; padding: 24px 16px; }
#app:has(.w-gate) { width: 100%; }
.w-gate { width: min(100%, 620px); margin-inline: auto; }
.w-gate-tops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.w-gate-tops span { --on: #16181d; height: 112px; padding: 14px 12px; border-radius: 18px 18px 0 0; background: var(--rk); color: var(--on); font: 800 0.92rem/1.1 var(--display); letter-spacing: -0.01em; }
.w-gate-tops .rk-director { --on: #fdfdfe; }
.w-gate-card { position: relative; display: grid; justify-items: center; gap: 4px; margin: -58px 0 0; padding: 30px clamp(20px, 6vw, 48px) 28px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); text-align: center; box-shadow: 0 24px 48px -28px rgba(30, 36, 50, 0.45); }
.w-gate-card img { margin-bottom: 8px; border-radius: 16px; }
.w-gate-card h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.w-gate-card p { margin: 6px 0 0; max-width: 40ch; color: var(--muted); font-size: 1.04rem; font-weight: 500; }
.w-gate-card small { margin-top: 14px; color: var(--muted); font-size: 0.86rem; font-weight: 600; }
.w-gate-btn { width: min(100%, 300px); min-height: 50px; margin-top: 22px; font-size: 1rem; text-decoration: none; }
.w-gate-btn i { font-size: 1.3rem; }
.w-discord { background: #4752c4; color: #fdfdfe; transition: background-color 0.15s, transform 0.12s var(--ease-out); }
.w-discord:hover { background: #3c45a5; }
.w-gate-btn:active { transform: scale(0.98); }
.w-gate-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.w-gate-card .w-bad-text { margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 12%, transparent); font-size: 0.92rem; font-weight: 700; }
@media (max-width: 480px) {
  .w-gate-tops { gap: 5px; }
  .w-gate-tops span { height: 92px; padding: 10px 7px; font-size: 0.7rem; border-radius: 14px 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .w-discord { transition: none; } }
#w-status { top: 0; }

/* Expectations and Audits sit on a sheet, readable on any background */
.w-sheet { margin: 6px 32px 0; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 18px 40px -30px rgba(30, 36, 50, 0.4); }
.w-sheet .card { background: var(--bg); box-shadow: none; }
.w-sheet > .muted:first-of-type { margin-top: 0; }
.w-sched { padding: 14px 16px; border-radius: 12px; background: var(--bg); width: fit-content; max-width: 100%; }
.w-sched input { background: var(--surface); min-height: 44px; }
.w-sched .btn { min-height: 44px; }

/* No audits yet */
.w-noaudit { display: grid; justify-items: center; gap: 4px; padding: clamp(20px, 5vw, 56px) 8px; text-align: center; }
.w-noaudit-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 18px; background: var(--tint, #e7ecfd); color: var(--rk-director); font-size: 2rem; }
.w-noaudit h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.025em; }
.w-noaudit > p { max-width: 46ch; margin: 6px 0 0; color: var(--muted); font-size: 1.04rem; font-weight: 500; }
.w-noaudit .w-sched { justify-content: center; margin: 22px 0 0; text-align: left; }
.w-noaudit-who { font-weight: 700 !important; color: var(--text) !important; }
:root[data-theme='dark'] .w-noaudit-ic { background: #1e2747; color: #a9bbff; }

[data-input='mouse'] :focus-visible { outline: none; }

@media (max-width: 640px) {
  .w-sheet { margin-inline: 16px; }
  .w-sched { width: 100%; }
  .w-sched label, .w-sched input, .w-sched .btn { width: 100%; }
}
@media (max-width: 1000px) { .ob-exp, .ob-rounds { grid-template-columns: minmax(0, 1fr); } }
.w-expadd input { width: 0; }
.ob-exp li { overflow-wrap: anywhere; }

/* Logins */
.w-login-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.w-login-top h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -0.025em; }
.w-login-top p { margin: 4px 0 0; }
.w-login-top .w-sched { margin: 0; }
.w-login-top .w-sched input { width: 240px; max-width: 100%; }
.w-logins th, .w-logins td { vertical-align: middle; }
.w-logins thead th { white-space: nowrap; }
.w-person { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.w-person b { display: block; font-size: 0.95rem; font-weight: 800; }
.w-person small { color: var(--muted); font-weight: 600; }
.w-acc { min-height: 38px; min-width: 104px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: 700 0.9rem var(--font); cursor: pointer; }
.w-acc:not([data-v='view']) { border-color: var(--deep); background: var(--tint); color: var(--deep); }
.w-acc[data-v='view'] { color: var(--muted); }
.w-acc[disabled] { cursor: not-allowed; }
.w-acc:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.w-login-act { white-space: nowrap; text-align: right; }
.w-login-act .ob-del { margin-left: 4px; vertical-align: middle; }
.w-off { opacity: 0.72; }
.w-login-note { margin: 14px 0 0; max-width: 90ch; font-size: 0.9rem; }

@media (max-width: 760px) {
  .w-login-top .w-sched input { width: 100%; }
  .w-sheet .table-scroll:has(.w-logins) { border: 0; background: none; overflow: visible; }
  .w-logins, .w-logins tbody, .w-logins tr, .w-logins th, .w-logins td { display: block; width: auto; }
  .w-logins thead { display: none; }
  .w-logins tr { margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
  .w-logins th, .w-logins td { padding: 0; border: 0; }
  .w-logins td[data-l] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 0.9rem; font-weight: 700; }
  .w-logins td[data-l]::before { content: attr(data-l); color: var(--muted); }
  .w-acc { min-height: 44px; min-width: 130px; }
  .w-login-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; text-align: left; }
}