/* MSR WhatsUpCrew's own content (STYLE.md). Every shared look is the kit's, the colours brand.css's. */
:root { --bubble-in:#ffffff; --bubble-out:#fdeccb; --bubble-ink:#1f2328; --unread-bg:#efad42; --unread-ink:#1f2328; --toast-bg:#323232; --toast-ink:#fff; --selected-bg:#fdf3df;
        --tcard-bg:#e4f3dc; --tcard-ink:#1f2328; --tcard-edge:#9ccc8a;
        --log-bg:#10151a; --log-ink:#e6e8eb; --log-line:#222a33; --log-warn:#ffc72c; --log-error:#ff7b8a; }
@media (prefers-color-scheme: dark) {
  :root { --bubble-in:#222a33; --bubble-out:#4a3610; --bubble-ink:#e6e8eb; --unread-bg:#f4c076; --unread-ink:#1f2328; --toast-bg:#e6e7ea; --toast-ink:#1c1e21; --selected-bg:#3d2e10;
          --tcard-bg:#1f3324; --tcard-ink:#e6e8eb; --tcard-edge:#3f6b45;
          --log-bg:#10151a; --log-ink:#e6e8eb; --log-line:#222a33; --log-warn:#ffc72c; --log-error:#ff7b8a; }
}
.kit-fire-ban, a.kit-fire-ban, .kit-fire-clear, a.kit-fire-clear { color:var(--banner-ink); }          /* (the kit writes these in --on-accent, which is dark on amber: they sit on deep red and deep green) */
.kit-test-banner { display:none; } body.dry .kit-test-banner { display:block; }
.admin-intro { margin:0 0 var(--gap); }
@media (min-width:760px) {          /* side by side, as the BDO hub's; a long section, open, across both */
  .admin-grid, .voice-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--gap); align-items:start; }
  .voice-grid { align-items:stretch; }
  .admin-grid > .wide[open] { grid-column:1 / -1; }
}
/* The Voice page's cards, the BDO hub's tiles: three bands, the buttons at the foot */
.card.voice-tile { display:flex; flex-direction:column; }
.voice-tile .tile-top h2 { margin-bottom:8px; }
.voice-tile .tile-top p { margin:4px 0; } .voice-tile .tile-top .pill { margin:2px 0 6px; }
.voice-tile p.big { font-size:1.6rem; font-weight:700; line-height:1.2; margin:2px 0; overflow-wrap:anywhere; }
.voice-tile .tile-mid > :empty { display:none; } .voice-tile .tile-mid > * { margin-top:10px; }
.voice-tile .preview { background:var(--bg); border-left:4px solid var(--kit-header); padding:10px 12px; border-radius:6px; }
.voice-tile .tile-bottom { margin-top:auto; padding-top:14px; } .voice-tile .tile-bottom .buttons { margin:0; }
.voice-tile .until-row > .field { flex:1 1 6rem; }
.voice-tile button[aria-pressed="true"] { background:var(--kit-header); color:var(--kit-on-header); border-color:var(--kit-header); }
.voice-grid > h2 { grid-column:1 / -1; margin:8px 0 10px; }
#brand-mark { width:auto; height:48px; border-radius:6px; object-fit:contain; }

.card { overflow-wrap:anywhere; }

/* The parts of the app: plain buttons, the one in use filled */
/* The greeting and the buttons live in the header, the kit's greeting (Kit.greet, 1rem bold, kit 2.19.2) first on the part bar's line (.hello-row is the kit's .kit-greet-row); the triangles hide the buttons on a phone. */
.page-bar { flex:1 0 100%; order:9; min-width:0; }
.page-bar:not(:has(.kit-greet)):not(:has(> nav:not(.hidden))) { display:none; }          /* (kit 2.20.0: with no greeting and no buttons in it, as on a member's page of one part, it takes no line of the header) */
.hello-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tabs { display:flex; gap:6px; margin:6px 0 0; flex-wrap:wrap; }
body.typing #tabs, body.typing .part-bar { display:none; }
/* MSR-B5: on a phone, upright or on its side, the buttons fold to one bar naming the part, with ‹ › and a dot for each part; a tablet or computer keeps the row */
.part-bar { display:none; flex:none; align-items:center; gap:4px; }
@media (max-width:759px), (max-height:500px) { body.tabs-hidden #tabs { display:none; } body.tabs-hidden .part-bar:not(.hidden) { display:flex; }
  body.tabs-hidden .hello-row:has(.part-bar:not(.hidden)) #tab-switch { display:none; }
  /* a person's name is never cut (the owner's standing order): the bar's part name gives way first, and a name too long for the line wraps with the bar on the line below */
  body.tabs-hidden .hello-row:has(.part-bar:not(.hidden)) { flex-wrap:wrap; row-gap:6px; }
  body.tabs-hidden .hello-row:has(.part-bar:not(.hidden)) .part-bar { flex:1 1 11rem; min-width:0; justify-content:flex-end; } }
@media (min-width:760px) and (min-height:501px) { #tab-switch { display:none; } }
.part-bar button { margin:0; min-height:44px; } #part-prev, #part-next { flex:none; width:44px; padding:0; font-size:1.4rem; }
.part-bar.no-arrows :is(#part-prev, #part-next) { display:none; }          /* short of room, ‹ › go first (app.js fitBar); a swipe and the name still reach every part */
#part-name { flex:0 1 auto; min-width:0; max-width:10rem; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 10px; font-size:.95rem; }
#part-name > span:first-child { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.part-dots { display:flex; gap:5px; } .part-dots i { width:6px; height:6px; border-radius:50%; background:var(--on-header-edge); } .part-dots i.on { background:var(--kit-on-header); }
@media (max-width:999px) { body:has(.view:not(.hidden) > .messages.reading, .view:not(.hidden) > .chat-screen:not(.hidden)) :is(#tabs, .part-bar) { display:none; }
  body:has(.view:not(.hidden) > .messages.reading, .view:not(.hidden) > .chat-screen:not(.hidden)) .page-bar:not(:has(.kit-greet)) { display:none; }          /* (nor in an open conversation, where the bar and the buttons have gone) */
  /* an open chat is the screen itself, as BDO messaging: nothing behind it scrolls or bounces, so the header stays put and the box to write in stays on screen */
  html:has(.view:not(.hidden) > .messages.reading, .view:not(.hidden) > .chat-screen:not(.hidden)) { overscroll-behavior:none; }
  body:has(.view:not(.hidden) > .messages.reading, .view:not(.hidden) > .chat-screen:not(.hidden)) { position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh; overflow:hidden; } }
header .tabs button { flex:1 1 auto; min-width:0; margin:0; padding:0 8px; font-size:.88rem; white-space:nowrap; }

/* Messages: the conversations on the left and the one open on the right on a wide screen; one at a time on a phone (Back returns to the list) */
.messages { display:grid; gap:14px; }
@media (max-width:999px) { .messages:not(.reading) .chat-screen { display:none; } }
@media (min-width:1000px) { .messages { position:fixed; top:var(--head-h, 100px); bottom:0; left:0; right:0; padding:14px max(16px, calc(50% - 660px)); background:var(--bg); grid-template:minmax(0, 1fr) / minmax(0, 22rem) minmax(0, 1fr); }
  .messages .threads { margin:0; overflow-y:auto; overscroll-behavior:contain; } .messages .chat-screen { position:static; background:none; }
  .messages .cs-inner { max-width:none; border:1px solid var(--line); border-radius:12px; overflow:hidden; } .messages .cs-back { display:none; } }
.thread-row { display:flex; align-items:flex-start; gap:10px; width:100%; margin:0; padding:10px 4px; text-align:left; background:none; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; font:inherit; cursor:pointer; min-height:44px; }
.thread-row:hover, .thread-row.selected { background:var(--selected-bg); }
.thread-row .text { display:flex; flex-direction:column; min-width:0; flex:1; }
.thread-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-row .muted { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.thread-row time { font-size:.78rem; color:var(--grey); white-space:nowrap; }
.unread { margin-left:6px; display:inline-block; min-width:1.4rem; padding:1px 6px; border-radius:999px; background:var(--unread-bg); color:var(--unread-ink); font-size:.78rem; font-weight:700; text-align:center; }
.kind-mark { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--grey); }
html { scrollbar-gutter:stable; }
.bubbles { display:flex; flex-direction:column; gap:8px; padding:4px 2px; }
.bubble.found { outline:2px solid var(--highlight); }
.found-words { font-size:.85rem; color:var(--grey); overflow-wrap:anywhere; }
.bubble { min-width:min(75%, 28rem); max-width:85%; padding:8px 12px; border-radius:12px; background:var(--bubble-in); color:var(--bubble-ink); border:1px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; align-self:flex-start; }
.bubble.out { align-self:flex-end; background:var(--bubble-out); }
.bubble .meta { display:block; margin-top:4px; font-size:.75rem; color:var(--grey); white-space:normal; }
.bubble .ways { float:right; display:flex; gap:3px; margin:1px -4px 2px 8px; color:var(--grey); line-height:0; }          /* (both ways a message went, owner, 2026-11-07) */
.bubble .way { display:block; }
.bubble .way svg { display:block; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bubble .who { display:block; font-size:.78rem; font-weight:700; color:var(--heading); margin-bottom:2px; }
.bubble.failed { border-color:var(--danger); }
.plan-steps { padding-left:1.4rem; margin:0; }
.plan-steps li { margin-bottom:10px; }
.plan-steps p { margin:2px 0; }
.plan-arrow { color:var(--grey); }
.plan-step { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
/* A step, with a small picture of what the member sees beside it. While writing, the fields keep their room, so on a phone the picture goes under them. */
.plan-step-row { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-start; }
.plan-step-main { flex:1 1 120px; min-width:0; }
.plan-step .plan-step-main { flex-basis:300px; }
.plan-preview, .plan-nothing { flex:0 0 150px; width:150px; font-size:.75rem; }
.plan-nothing { margin:0; }
.plan-preview { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); }
.plan-preview-bar { padding:3px 8px; background:var(--kit-header); color:var(--kit-on-header); font-weight:700; }
.plan-preview .bubble { min-width:0; max-width:none; margin:6px; padding:5px 7px; border-radius:8px; }
.plan-preview .bubble .who { font-size:inherit; }
.plan-preview .bubble .ways { margin:0 -2px 0 4px; }
.plan-preview .bubble .way svg { width:10px; height:10px; }
.plan-preview .bubble .meta:empty { display:none; }
.plan-preview .poll { gap:3px; margin-top:5px; }
.plan-preview .poll button, .plan-preview .bubble-tools button { min-height:0; padding:1px 6px; font-size:inherit; }
.choice-row select { flex:1; }
.composer { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
/* Pictures and PDFs in a message, and the files chosen for the next one (files.py, owner, 2026-11-07): a picture in its place, never wider than the bubble; a PDF, and each file being sent, a chip. */
.bubble .files { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; white-space:normal; }
.file-picture { display:block; max-width:100%; line-height:0; }
.file-picture img { display:block; max-width:min(100%, 260px); max-height:260px; border-radius:8px; border:1px solid var(--line); }
.file-chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.file-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; min-height:32px; padding:2px 4px 2px 10px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); font-size:.85rem; overflow-wrap:anywhere; }
a.file-chip { padding-right:10px; color:var(--link); }
.file-chip.failed { border-color:var(--danger); }
.file-chip .name { min-width:0; }
.file-chip button { flex:none; width:auto; min-height:32px; margin:0; padding:0 8px; }
.file-rows { border-top:1px solid var(--line); margin:8px 0; }
.file-row { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line); }
.file-row input { flex:none; margin-top:3px; }
.file-row .text { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.file-row .muted { font-size:.85rem; }
.in-chat .field { margin:4px 0; padding:2px 0; } .in-chat .chat-row { margin:6px 0 8px; }
@media (max-height:500px) { .in-chat .send-row label, .in-chat > .field { display:none; } }
.choice-row { display:flex; gap:8px; align-items:center; }
.choice-row input { flex:1; }
.choice-row button { width:auto; flex:none; margin:0; }

/* Members: one line a person, a tap opens their card */
.member-row { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; margin:0; padding:10px 4px; text-align:left; background:none; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; font:inherit; cursor:pointer; min-height:44px; }
.member-row:hover { background:var(--selected-bg); }
.member-row .text { display:flex; flex-direction:column; min-width:0; }
.facts { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:4px 14px; margin:6px 0 12px; }
.facts dt { color:var(--grey); font-size:.85rem; } .facts dd { margin:0; overflow-wrap:anywhere; }

.field { margin:10px 0; padding:6px 8px; border-left:3px solid transparent; }
.field.changed { background:var(--changed-bg); border-left-color:var(--highlight); }
.field .muted { margin:4px 0 0; }
input[type=checkbox] { width:20px; height:20px; padding:0; margin:0; flex:none; accent-color:var(--accent); }
label.tick { display:flex; align-items:center; gap:10px; font-weight:600; margin:14px 0 4px; }
.checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:4px 12px; margin:6px 0; }
.checks label { display:flex; align-items:center; gap:8px; font-weight:500; margin:2px 0; }
/* A user's ticks, each with the parts of the page it opens under its name (owner, 2026-11-06); one a tick above holds is ticked and greyed */
.role-ticks { grid-template-columns:minmax(0, 1fr); gap:8px; }
.role-ticks label { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:8px; row-gap:2px; }
.role-ticks .tick-sees { grid-column:2; color:var(--grey); font-size:.85rem; font-weight:400; overflow-wrap:anywhere; }
.role-ticks input[data-held] + .tick-name, .role-ticks input[data-held] ~ .tick-sees { color:var(--grey); }
.buttons { display:flex; gap:10px; flex-wrap:wrap; } .buttons button { flex:1; min-width:8rem; }
.threads .buttons + button { margin-top:10px; }
.threads .list + h2 { margin-top:var(--gap); }
/* Edit, Save and Cancel (the BDO hub's): on the left, values greyed until Edit, a changed one highlighted */
.edit-bar { margin:4px 0 8px; } .edit-bar button { margin-top:0; flex:0 1 auto; min-width:6rem; }
.edit-bar.foot { margin-top:12px; }
.pair { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 12px; }
.pair input { min-width:0; max-width:100%; }
@media (max-width:420px) { .pair:has(input[type="date"]) { grid-template-columns:minmax(0, 1fr); } }
.pill { display:inline-block; border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:700; background:var(--busy-bg); color:var(--grey); text-transform:none; letter-spacing:0; white-space:nowrap; }
td .pill { white-space:normal; }          /* (a long status in a table wraps inside its cell, never past the card on a phone) */
.pill.ok { background:var(--ok-bg); color:var(--ok-ink); } .pill.warn { background:var(--note-bg); color:var(--ink); } .pill.bad { background:var(--err-bg); color:var(--err-ink); }
.pills { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; flex:none; max-width:55%; }
.setup-step { padding:6px 0; border-top:1px solid var(--line); } .setup-step:first-of-type { border-top:0; }
.setup-step h3 { margin:4px 0; } .setup-step ol { margin:4px 0 8px; padding-left:1.4rem; } .setup-step button { width:auto; margin:4px 8px 4px 0; }
.upload-change { padding:8px 0; border-top:1px solid var(--line); } .upload-change ul { margin:4px 0 8px; padding-left:1.2rem; overflow-wrap:anywhere; }
.fire-today { margin:10px 0; } .fire-today h3 { margin:0 0 6px; }
.swatch { display:inline-block; width:44px; height:44px; flex:0 0 44px; border-radius:8px; border:1px solid var(--line); }
.number-card { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.number-line { display:flex; flex-direction:column; flex:1 1 11rem; min-width:0; }
.number-label { font-size:.85rem; font-weight:700; color:var(--heading); }
.number-value { font-size:1.5rem; line-height:1.25; color:var(--ink); white-space:nowrap; }
.number-card .buttons { margin:0; flex:1 1 11rem; gap:8px; } .number-card .buttons a { flex:1 1 4rem; width:auto; margin:0; }
.number-card .buttons > * { display:inline-flex; align-items:center; justify-content:center; min-height:44px; height:44px; padding:0 10px; font-size:.9rem; white-space:nowrap; }
.number-note { flex:1 1 100%; margin:0; font-size:.85rem; }
.number-card.for-team .for-member, .number-card:not(.for-team) .for-team, .number-card.away { display:none; }

/* Admin sections, tables and the Server Log (the BDO hub's, as Pager Alerts copies them) */
table { width:100%; border-collapse:collapse; font-size:.9rem; margin:6px 0 12px; }
th { text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--grey); border-bottom:2px solid var(--accent); padding:6px 8px; }
td { padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.scroll-x { overflow-x:auto; }
.tile { border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:0; }
.tile h3 { margin:0 0 4px; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); }
.tile .figure { font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums; } .tile .muted { margin:2px 0 0; font-size:.78rem; }
.log-box { height:320px; overflow:auto; background:var(--log-bg); color:var(--log-ink); border-radius:8px; padding:10px; margin:8px 0 0; font:12px/1.45 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; -webkit-overflow-scrolling:touch; }
.log-box div { padding:2px 0; border-bottom:1px solid var(--log-line); }
.log-box .WARNING { color:var(--log-warn); }
.log-box .ERROR, .log-box .CRITICAL { color:var(--log-error); }
.log-levels { display:flex; flex-wrap:wrap; gap:6px 18px; }
.log-levels label { display:flex; align-items:center; gap:6px; margin:0; font-weight:400; padding:6px 0; }
.load-table td { padding:6px 8px 6px 0; vertical-align:top; border-bottom:1px solid var(--line); font-size:.85rem; overflow-wrap:normal; word-break:normal; }
button.wide { width:100%; }
.bulk { float:right; margin-left:10px; white-space:nowrap; }
.bulk button { width:auto; min-height:0; margin:0 0 0 2px; padding:0 8px; background:none; border:1px solid var(--field-line); border-radius:6px; color:var(--link); font-size:1rem; line-height:1.5; cursor:pointer; }
header .bulk { float:none; margin:0; flex:none; } header .bulk button { height:32px; min-width:44px; margin:0; padding:0 8px; background:var(--on-header-soft); border-color:var(--on-header-edge); color:var(--kit-on-header); font-size:1rem; }
@media (pointer:coarse) { header .bulk button { height:44px; } }

#toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100% - 32px); background:var(--toast-bg); color:var(--toast-ink); padding:10px 16px; border-radius:10px; box-shadow:0 4px 14px var(--shadow); z-index:50; }
@media print { #page-bar, #toast, .composer { display:none; } }

/* Deployments (DESIGN.md s.2): columns by where each crew is, each crew a light-green T-card, short crews edged red; a card prints alone */
.board { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap:12px; }
.board-column { min-width:0; } .board-column h3 { margin:0 0 6px; }
@media (max-width:760px) { .board-column.vacant { display:none; } }
.tcard summary { background:var(--tcard-bg); color:var(--tcard-ink); }
.tcard-tab { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; margin:0 0 8px; padding:10px 12px; text-align:left; font:inherit; cursor:pointer;
  background:var(--tcard-bg); color:var(--tcard-ink); border:1px solid var(--tcard-edge); border-radius:8px; min-height:44px; overflow-wrap:anywhere; }
.tcard-tab.short { border-color:var(--danger); border-width:2px; }
.tcard-tab .tcard-crew { font-weight:700; font-size:1.05rem; } .tcard-tab .muted { font-size:.82rem; }
.short-words { color:var(--err-ink); font-weight:600; font-size:.85rem; }
.tcard { background:var(--tcard-bg); color:var(--tcard-ink); border:1px solid var(--tcard-edge); border-radius:8px; padding:10px 12px; margin:8px 0 12px; }
.tcard h3 { margin:12px 0 4px; }
.sides button { flex:0 1 auto; min-width:6rem; }
.sides button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.crew-person { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 0; border-bottom:1px solid var(--tcard-edge); }
.crew-person .text { display:flex; flex-direction:column; min-width:0; flex:1 1 12rem; }
.crew-actions { display:flex; flex-wrap:wrap; gap:6px; flex:1 1 100%; } .crew-actions select { flex:1 1 100%; } .crew-actions button { flex:1 1 0; margin:0; }
.crew-actions.solo button { width:auto; flex:0 0 auto; }
@media (min-width:761px) { .crew-actions select { flex:2 1 12rem; } }
.fatigue-why { flex:1 1 100%; font-size:.82rem; }
.equip-list { display:flex; flex-wrap:wrap; gap:6px; } .equip { border:1px solid var(--tcard-edge); border-radius:6px; padding:2px 8px; font-size:.85rem; color:var(--grey); }
.equip.on { color:var(--tcard-ink); font-weight:600; }
.alarm { border-bottom:1px solid var(--line); padding:6px 0 10px; } .alarm p { margin:4px 0; } .alarm button { width:auto; }
.print-only { display:none; }
.member-filters { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap:0 12px; }
.pills { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
.stages { list-style:none; margin:8px 0 12px; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:6px; }
.stage { border:1px solid var(--line); border-radius:8px; padding:6px 8px; min-width:0; display:flex; flex-direction:column; gap:2px; } .stage strong { font-size:.9rem; } .stage .muted { font-size:.78rem; }
.stage.done { border-color:var(--accent); } .stage.current { background:var(--accent); color:var(--on-accent); border-color:var(--accent); } .stage.current .muted { color:var(--on-accent); }
.timeline-row { border-bottom:1px solid var(--line); padding:8px 0; } .timeline-row p { margin:2px 0; } .timeline-row time { color:var(--grey); font-size:.82rem; }
.addr { display:block; overflow-wrap:anywhere; margin:2px 0; } .addr.wrong { color:var(--danger); } .addr-label { margin:6px 0 2px; }
@media print {
  body.print-card > *:not(.modal-back) { display:none; }
  body.print-card .modal-back { position:static; background:none; } body.print-card .modal { box-shadow:none; max-height:none; } body.print-card .scroll-x { overflow:visible; }
  body.print-card .modal-actions, body.print-card .sides, body.print-card .buttons, body.print-card .crew-actions { display:none; }
  body.print-card .tcard-side.hidden { display:block !important; } body.print-card .tcard { border:1px solid var(--tcard-edge); }
  body.print-card .modal-body { overflow:visible; } body.print-card .no-print { display:none; } body.print-card .print-only { display:inline; }
}
/* Spend and Usage Stats: the BDO hub's Spend cards. */
.spend-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:var(--gap); margin-bottom:var(--gap); }
.spend-card { border:1px solid var(--line); border-radius:10px; padding:14px 16px; min-width:0; overflow-x:auto; }
.spend-card h3 { margin:0 0 6px; }
.spend-total { font-size:1.7rem; font-weight:700; line-height:1.2; }
.spend-aud { color:var(--grey); font-size:.85rem; }
.spend-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:.88rem; overflow-wrap:break-word; }
.spend-table td { padding:6px; border-bottom:1px solid var(--line); }
.spend-table th { font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--grey); text-align:left; padding:4px 6px; }
.spend-table .amt { text-align:right; white-space:nowrap; }
.spend-table td.amt { font-weight:600; }
.spend-table th.amt { white-space:normal; }
.spend-table tr.spend-sum td { font-weight:700; border-top:2px solid var(--line); }

/* The web chat (BDO's messaging look): a quoted message, an @name, a poll's choices, what can be done with a message, and the box to write in */
.bubble .quote { display:flex; flex-direction:column; margin:0 0 6px; padding:4px 8px; border-left:3px solid var(--accent); background:var(--card); border-radius:4px; font-size:.85rem; white-space:normal; }
.bubble .quote span { color:var(--grey); overflow:hidden; text-overflow:ellipsis; }
.bubble a { color:var(--link); overflow-wrap:anywhere; }
.mention { font-weight:700; color:var(--link); }
.poll { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.poll button { width:auto; margin:0; }
.bubble-tools { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:4px; }
.bubble-tools button { width:auto; margin:0; min-height:0; padding:2px 6px; }
.mention-list { display:flex; flex-direction:column; gap:2px; margin:4px 0 8px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mention-list button { width:100%; margin:0; text-align:left; border:0; border-radius:0; }
.replying { display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:6px 8px; border-left:3px solid var(--accent); background:var(--selected-bg); border-radius:4px; }
.replying .text { display:flex; flex-direction:column; min-width:0; flex:1; }
.replying .muted { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replying button { width:auto; flex:none; margin:0; }
/* A member's chats: three cards, each opening a screen: a bar with Back, a list or conversation, the box to write in at its foot */
.chat-tiles { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin:10px 0; }
@media (min-width:760px) { .chat-tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.chat-tile { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; margin:0; padding:14px; text-align:left; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; font:inherit; cursor:pointer; min-height:72px; }
.chat-tile:hover { background:var(--selected-bg); }
.chat-tile strong { display:flex; align-items:center; font-size:1.05rem; color:var(--heading); }
.chat-tile .muted { max-width:100%; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-screen { position:fixed; left:0; right:0; top:var(--head-h, 100px); bottom:0; z-index:50; display:flex; justify-content:center; background:var(--bg); }
.cs-inner { width:100%; max-width:760px; min-height:0; display:flex; flex-direction:column; background:var(--card); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.cs-bar { flex:none; display:flex; align-items:center; gap:10px; min-height:56px; padding:8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); border-bottom:1px solid var(--line); }
.cs-bar .cs-back { flex:none; width:auto; margin:0; }
.cs-bar h2 { flex:1; min-width:0; margin:0; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-bar h2 .sub { display:block; font-weight:400; font-size:.78rem; color:var(--grey); text-transform:none; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; }
.cs-tools button { width:auto; margin:0; }
.cs-note { flex:none; max-height:7em; overflow-y:auto; margin:0; padding:6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); font-size:.82rem; color:var(--grey); border-bottom:1px solid var(--line); }
.cs-scroll { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
.cs-foot { flex:none; max-height:55%; overflow-y:auto; padding:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); background:var(--card); }
.cs-foot:empty { display:none; }
.cs-foot .composer { border-top:1px solid var(--line); margin:0 calc(-1 * max(12px, env(safe-area-inset-left))); padding-bottom:calc(8px + env(safe-area-inset-bottom)); padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
.cs-row { display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:10px 4px; min-height:64px; text-align:left; background:none; color:var(--ink); border:0; border-bottom:1px solid var(--line); border-radius:0; font:inherit; cursor:pointer; }
.cs-row:hover { background:var(--selected-bg); }
.cs-row .avatar { flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.95rem; }
.cs-row .text { flex:1; min-width:0; display:flex; flex-direction:column; }
.cs-row .top { display:flex; align-items:baseline; gap:8px; }
.cs-row strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-row time { flex:none; font-size:.78rem; color:var(--grey); }
.cs-row .muted { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; }
.cs-row.unread-row strong, .cs-row.unread-row .muted { color:var(--ink); font-weight:700; }
.contact-prompt { flex:1 1 100%; }
.contact-prompt .buttons { margin-top:6px; } .contact-prompt .buttons > * { flex:1 1 6rem; }
header #help-open svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.chat-box { background:var(--card); margin:0; padding:8px 0 calc(8px + env(safe-area-inset-bottom)); }
.chat-row { display:flex; gap:8px; align-items:flex-end; }
/* The bar a message is written in, BDO messaging's #cbar: a round paperclip and Template Content, the box, and a round arrow to send, 44 px to touch. */
.chat-row textarea { flex:1; min-width:0; min-height:2.75rem; max-height:min(40dvh, 16rem); margin:0; padding:10px 14px; border-radius:20px; line-height:1.35; resize:none; }
.chat-row button { flex:none; display:grid; place-items:center; width:44px; height:44px; min-height:44px; margin:0; padding:0; border-radius:50%; }
.chat-row button.hidden { display:none; }
.chat-row .bar-tool { border:1px solid var(--field-line); background:var(--card); color:var(--link); }
.chat-row .bar-send { margin-left:auto; border:0; background:var(--accent); color:var(--on-accent); }
.chat-row svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.chat-box a.secondary { display:block; margin-top:8px; text-align:center; }
.send-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 10px; }
.send-row > .field { min-width:0; }
.send-row > .hidden + * , .send-row > :only-child { grid-column:1 / -1; }
.find-row { display:flex; align-items:center; gap:8px; margin:10px 0; }
.find-row input { flex:1; min-width:0; margin:0; }
.find-row button { width:auto; flex:none; margin:0; white-space:nowrap; }
.thread-filters { border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:10px; }
.thread-filters > button { width:auto; margin:0; }
.chat-help { margin-top:14px; }
.help-part { border-top:1px solid var(--line); padding:10px 0; }
.help-part summary { font-weight:600; cursor:pointer; min-height:28px; }
header #bell { position:relative; } header #bell svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.bell-count { position:absolute; top:-8px; right:-8px; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:var(--kit-on-header); color:var(--kit-header); font-size:.72rem; font-weight:700; line-height:18px; text-align:center; }
.bell-note:empty { display:none; }
.bell-row { padding:10px 2px; border-bottom:1px solid var(--line); } .bell-row:last-child { border-bottom:none; }
.bell-row p { margin:0 0 6px; } .bell-row .bell-when { font-size:.85rem; } .bell-row.bell-new .bell-words { font-weight:700; } .bell-row .buttons { margin:0; }

/* the Licence and Terms: the line under the log-in form, gone with the form; the link at the foot of the page. Then the documents (documents.py): /terms and Admin's /documents/... */
#terms-line { max-width:480px; margin:12px auto 0; padding:0 16px; text-align:center; font-size:.9rem; }
#kit-sign-in.hidden + #terms-line { display:none; }
#terms-foot { margin:20px 0 0; text-align:center; font-size:.8rem; }
#terms-foot + #kit-version { margin-top:4px; }
.document-title { margin:16px 0 4px; }
.document > p { line-height:1.5; }
.document-part { margin:28px 0 8px; font-size:1.15rem; }
.document .card { overflow-wrap:anywhere; }
.document .card h3 { margin:0 0 8px; font-size:1.05rem; }
.document .card h4 { margin:14px 0 6px; font-size:1rem; }
.document .card p, .document .card li { margin:0 0 10px; line-height:1.5; }
.document .card > :last-child { margin-bottom:0; }
.document ol { margin:0 0 10px; padding-left:1.4rem; }
.document a { color:var(--link); }
.document-note { color:var(--muted); font-size:.92rem; border-left:3px solid var(--line); padding-left:10px; }
.document-table { overflow-x:auto; margin:0 0 10px; }
.document-table table { width:100%; border-collapse:collapse; font-size:.85rem; }
.document-table th, .document-table td { text-align:left; vertical-align:top; padding:6px 8px 6px 0; border-bottom:1px solid var(--line); }
.document-back { margin:20px 0 0; text-align:center; }
.document-row { display:flex; flex-direction:column; gap:4px; padding:10px 0; border-bottom:1px solid var(--line); }
.document-buttons { margin-top:4px; flex-wrap:nowrap; } .document-buttons button { min-width:0; flex:1 1 auto; white-space:nowrap; padding-left:8px; padding-right:8px; }
@media print { .document-back, .kit-copy-button, .kit-copy-note { display:none; } .document header, body > header { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
#kit-sign-in:not(.hidden) ~ #terms-foot { display:none; }
#terms-line a, #terms-foot a, .document-back a { color:var(--link); }