/* CampOffice office screens that Filament's own styles don't cover. */
.cb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cb-label { font-size: .875rem; font-weight: 600; }
.cb-select { border: 1px solid rgb(209 213 219); border-radius: .5rem; padding: .35rem 2rem .35rem .6rem; font-size: .875rem; background-color: transparent; }
.cb-select--small { padding: .1rem 1.6rem .1rem .4rem; font-size: .75rem; }
.cb-hint, .cb-muted { color: rgb(107 114 128); font-size: .875rem; }
.cb-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cb-bunk { border: 1px solid rgb(229 231 235); border-radius: .75rem; padding: .75rem; background: #fff; min-height: 6rem; }
.cb-bunk--unplaced { border-style: dashed; border-color: rgb(209 213 219); }
.cb-bunk--over { border-color: rgb(248 113 113); }
.cb-bunk--over .cb-count { color: rgb(220 38 38); }
.cb-bunk__title { display: flex; justify-content: space-between; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.cb-count { color: rgb(107 114 128); font-variant-numeric: tabular-nums; }
.cb-list { display: grid; gap: .25rem; }
.cb-camper { cursor: grab; border-radius: .5rem; background: rgb(249 250 251); padding: .35rem .5rem; font-size: .875rem; }
.cb-camper--placed { background: rgb(240 249 255); }
.cb-camper--suggested { border: 1px dashed rgb(125 211 252); background: transparent; color: rgb(3 105 161); cursor: default; }
.cb-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cb-note { margin-top: .15rem; font-size: .75rem; color: rgb(107 114 128); }
.cb-note--suggest { color: rgb(3 105 161); }
.cb-remove { font-size: .75rem; color: rgb(107 114 128); padding: 0 .25rem; }
.cb-remove:hover { color: rgb(220 38 38); }
.dark .cb-bunk { background: rgb(17 24 39); border-color: rgb(255 255 255 / .1); }
.dark .cb-camper { background: rgb(255 255 255 / .05); }
.dark .cb-camper--placed { background: rgb(14 165 233 / .12); }
.dark .cb-select { border-color: rgb(255 255 255 / .15); }
@media (prefers-reduced-motion: no-preference) { .cb-camper { transition: background-color .2s; } }

/* Assistant */
/* The assistant (App\Livewire\Concerns\TalksToOfficeAssistant): the conversation on the Assistant screen and in the panel on
   every screen (filament/office/assistant-turns, assistant-compose). One column, the assistant on the left with its mark,
   the person on the right in the camp's color, each change a card that waits for a yes, and the box that stays open. */
.ca { --ca-line: rgb(226 232 240); --ca-soft: rgb(248 250 252); --ca-ink: rgb(15 23 42); --ca-mute: rgb(100 116 139); display: grid; gap: 1rem; }
.ca-chat { display: grid; gap: 1rem; align-content: start; }
.ca-empty { display: grid; justify-items: start; gap: .6rem; padding: 1.25rem 1.35rem 1.35rem; border: 1px solid var(--ca-line); border-radius: 1rem; background: var(--ca-soft); }
.ca-empty__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--primary-50); color: var(--primary-600); }
.ca-empty__mark svg { width: 1.35rem; height: 1.35rem; }
.ca-empty__title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ca-ink); }
.ca-empty__text { margin: 0; max-width: 40rem; font-size: .9rem; line-height: 1.55; color: var(--ca-mute); }
.ca-examples { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.ca-example { font: inherit; font-size: .8125rem; font-weight: 500; text-align: left; padding: .4rem .75rem; border: 1px solid var(--ca-line); border-radius: 999px; background: #fff; color: var(--ca-ink); cursor: pointer; }
.ca-example:hover, .ca-example:focus-visible { border-color: var(--primary-500); color: var(--primary-700); background: var(--primary-50); }
.ca-turn { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.ca-turn--user { grid-template-columns: minmax(0, 1fr); justify-items: end; padding-left: 3rem; }
.ca-turn__who { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--primary-600); color: #fff; margin-top: .15rem; }
.ca-turn__who svg { width: 1rem; height: 1rem; }
.ca-turn__body { display: grid; gap: .6rem; min-width: 0; max-width: 100%; }
.ca-turn--user .ca-turn__body { justify-items: end; }
.ca-bubble { max-width: min(100%, 48rem); border-radius: 1rem; padding: .7rem 1rem; font-size: .925rem; line-height: 1.55; color: var(--ca-ink); background: #fff; border: 1px solid var(--ca-line); box-shadow: 0 1px 2px rgb(15 23 42 / .04); overflow-wrap: anywhere; }
.ca-turn--assistant .ca-bubble { border-top-left-radius: .35rem; }
.ca-turn--user .ca-bubble { border-top-right-radius: .35rem; background: var(--primary-600); border-color: var(--primary-600); color: #fff; box-shadow: none; }
.ca-turn--waiting .ca-bubble { opacity: .55; }
.ca-bubble > * + * { margin-top: .55rem; }
.ca-bubble ol { list-style: decimal; padding-left: 1.25rem; }
.ca-bubble ul { list-style: disc; padding-left: 1.25rem; }
.ca-bubble li + li { margin-top: .2rem; }
.ca-bubble h1, .ca-bubble h2, .ca-bubble h3 { font-size: 1em; font-weight: 700; }
.ca-bubble a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.ca-turn--user .ca-bubble a { color: inherit; }
.ca-bubble code { font-size: .875em; padding: .05rem .3rem; border-radius: .3rem; background: rgb(15 23 42 / .06); }
.ca-bubble table { border-collapse: collapse; font-size: .875em; }
.ca-bubble th, .ca-bubble td { padding: .25rem .6rem .25rem 0; border-bottom: 1px solid var(--ca-line); text-align: left; vertical-align: top; }
.ca-bubble--working { display: flex; align-items: center; gap: .6rem; color: var(--ca-mute); background: var(--ca-soft); }
.ca-bubble__hint { display: block; font-size: .8em; opacity: .85; }
.ca-dots { display: inline-flex; gap: .2rem; }
.ca-dots i { width: .4rem; height: .4rem; border-radius: 999px; background: var(--primary-500); animation: ca-dot 1.1s infinite ease-in-out; }
.ca-dots i:nth-child(2) { animation-delay: .15s; }
.ca-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ca-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-.25rem); opacity: 1; } }
.ca-card { display: grid; gap: .5rem; max-width: 100%; padding: .8rem 1rem .85rem; border: 1px solid rgb(251 191 36 / .7); border-left: 4px solid rgb(217 127 18); border-radius: .85rem; background: rgb(255 251 235); font-size: .9rem; color: var(--ca-ink); }
.ca-card__head { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: rgb(146 64 14); }
.ca-card__head svg { width: 1rem; height: 1rem; }
.ca-card__text { margin: 0; line-height: 1.5; white-space: pre-line; }
.ca-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ca-card__actions--all { padding-top: .1rem; }
.ca-decided { display: flex; flex-wrap: wrap; gap: .35rem; }
.ca-decided__chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.ca-decided__chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; }
.ca-decided__chip--yes { color: rgb(18 128 92); background: rgb(18 128 92 / .1); }
.ca-decided__chip--no { color: var(--ca-mute); background: rgb(100 116 139 / .12); }
.ca-compose { position: sticky; bottom: 0; padding-top: .5rem; background: inherit; }
.ca-compose__box { display: grid; border: 1px solid var(--ca-line); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .05); transition: border-color .15s, box-shadow .15s; }
.ca-compose__box:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); }
.ca-input { width: 100%; min-height: 3.25rem; max-height: 220px; resize: none; border: 0; border-radius: 1rem 1rem 0 0; padding: .8rem 1rem .4rem; font: inherit; font-size: .925rem; line-height: 1.5; color: var(--ca-ink); background: transparent; }
.ca-input:focus { outline: none; box-shadow: none; }
.ca-compose__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .35rem .6rem .55rem .75rem; }
.ca-compose__bar .co-mic--docked { position: static; }
.ca-compose__hint { font-size: .72rem; color: var(--ca-mute); }
.ca-compose__grow { flex: 1; }
.ca-compose__link { font: inherit; font-size: .8125rem; color: var(--ca-mute); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }
.ca-compose__link:hover { color: var(--ca-ink); }
.ca-send { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border: 0; border-radius: .7rem; background: var(--primary-600); color: #fff; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.ca-send svg { width: 1rem; height: 1rem; }
.ca-send:hover { background: var(--primary-700); }
.ca-send[disabled] { opacity: .5; cursor: default; }
@media (max-width: 640px) { .ca-turn--user { padding-left: 1rem; } .ca-compose__hint { display: none; } }
.dark .ca { --ca-line: rgb(255 255 255 / .12); --ca-soft: rgb(255 255 255 / .04); --ca-ink: rgb(241 245 249); --ca-mute: rgb(148 163 184); }
.dark .ca-empty__mark { background: rgb(255 255 255 / .08); color: var(--primary-400); }
.dark .ca-example, .dark .ca-bubble, .dark .ca-compose__box { background: rgb(17 24 39); }
.dark .ca-example:hover { background: rgb(255 255 255 / .06); color: var(--primary-300); }
.dark .ca-turn--user .ca-bubble { background: var(--primary-600); }
.dark .ca-bubble--working { background: rgb(255 255 255 / .04); }
.dark .ca-bubble code { background: rgb(255 255 255 / .1); }
.dark .ca-card { background: rgb(251 191 36 / .08); border-color: rgb(251 191 36 / .35); border-left-color: rgb(217 127 18); }
.dark .ca-card__head { color: rgb(253 230 138); }
.dark .ca-decided__chip--yes { color: rgb(110 231 183); }
.dark .ca-compose__box:focus-within { box-shadow: 0 0 0 3px rgb(255 255 255 / .08); }
/* In the side panel: the same parts, a little tighter, and the box scrolls with the panel's bottom. */
.ca--panel { --ca-soft: rgb(248 250 252); gap: .85rem; }
.ca--panel .ca-turn { grid-template-columns: 1.6rem minmax(0, 1fr); gap: .45rem; }
.ca--panel .ca-turn--user { grid-template-columns: minmax(0, 1fr); padding-left: 1.5rem; }
.ca--panel .ca-turn__who { width: 1.6rem; height: 1.6rem; }
.ca--panel .ca-turn__who svg { width: .85rem; height: .85rem; }
.ca--panel .ca-bubble { font-size: .875rem; padding: .6rem .85rem; }
.ca--panel .ca-empty { padding: 1rem 1.1rem 1.15rem; }
.co-howdoi__form.ca { padding: .6rem .9rem .9rem; }
.co-howdoi__form.ca .ca-compose { position: static; padding-top: 0; }
.co-howdoi__form .ca-input { border: 0; border-radius: 1rem 1rem 0 0; resize: none; }
.co-howdoi__form .ca-compose__hint { display: none; }
.co-howdoi__title { display: grid; gap: .1rem; min-width: 0; }
.co-assist__where { margin: 0; font-size: .75rem; color: rgb(100 116 139); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .co-assist__where { color: rgb(148 163 184); }
.ca-remote { margin-bottom: 1rem; }
.ca-remote p, .ca-remote li { font-size: .875rem; line-height: 1.5; }
.ca-remote__ways { list-style: disc; padding-left: 1.25rem; margin: 0 0 .75rem; display: grid; gap: .35rem; overflow-wrap: anywhere; }
.ca-remote__note { color: rgb(75 85 99); }
.dark .ca-remote__note { color: rgb(156 163 175); }
.ca-remote__heading { margin: 1.25rem 0 .5rem; font-size: .875rem; font-weight: 600; }
.ca-remote__log { display: grid; gap: .5rem; max-height: 28rem; overflow-y: auto; }
.ca-remote__msg { display: grid; gap: .15rem; padding: .5rem .75rem; border-radius: .5rem; background: rgb(243 244 246); font-size: .875rem; overflow-wrap: anywhere; }
.ca-remote__msg--out { background: rgb(239 246 255); }
.dark .ca-remote__msg { background: rgb(255 255 255 / .05); }
.dark .ca-remote__msg--out { background: rgb(59 130 246 / .12); }
.ca-remote__meta { font-size: .75rem; color: rgb(107 114 128); }

/* Bunk board: group headings, school / class / neighborhood under a name, and the toolbar divider. */
.cb-group { margin-top: .5rem; padding: .15rem .25rem; font-size: .75rem; font-weight: 600; color: rgb(75 85 99); border-bottom: 1px solid rgb(229 231 235); }
.cb-tags { display: block; font-size: .72rem; color: rgb(107 114 128); }
.cb-divider { width: 1px; height: 1.5rem; background: rgb(229 231 235); }
.dark .cb-group { color: rgb(209 213 219); border-color: rgb(255 255 255 / .1); }

/* Who's here, reports and the application view: simple tables, number tiles, pictures. */
.co-muted { color: rgb(107 114 128); font-size: .875rem; margin: 0; }
.co-danger { color: rgb(185 28 28); }
.co-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.co-tile { display: grid; gap: .1rem; border: 1px solid rgb(229 231 235); border-radius: .75rem; padding: .6rem .8rem; font-size: .85rem; }
.co-tile-number { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-table-wrap { overflow-x: auto; }
.co-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.co-table th { text-align: left; font-weight: 600; color: rgb(107 114 128); padding: .4rem .75rem .4rem 0; border-bottom: 1px solid rgb(229 231 235); }
.co-table td { padding: .45rem .75rem .45rem 0; border-bottom: 1px solid rgb(243 244 246); vertical-align: top; }
.co-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-full td { color: rgb(185 28 28); font-weight: 600; }
.co-picture { max-width: 100%; height: auto; border: 1px solid rgb(229 231 235); border-radius: .5rem; background: #fff; }
.co-dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .875rem; margin: 0; }
.co-dl dt { color: rgb(107 114 128); }
.co-dl dd { margin: 0; }
.dark .co-tile, .dark .co-table th, .dark .co-table td { border-color: rgb(255 255 255 / .1); }
/* Billing: ledger, recalculate preview, charge a card (the processor's card fields reuse the family page's class names). */
.cbl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cbl-balance { margin-left: auto; font-size: .9rem; }
.cbl-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cbl-table th { text-align: left; font-size: .75rem; font-weight: 600; color: rgb(107 114 128); padding: .4rem .5rem; border-bottom: 1px solid rgb(209 213 219); }
.cbl-table td { padding: .4rem .5rem; border-bottom: 1px solid rgb(229 231 235); vertical-align: top; }
.cbl-table tfoot td { border-bottom: none; border-top: 1px solid rgb(209 213 219); font-size: .8rem; color: rgb(75 85 99); }
.cbl-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbl-row--bounced td { color: rgb(200 55 45); }
.cbl-row--write_off td, .cbl-row--credit td, .cbl-row--carry_forward td { color: rgb(3 105 161); }
.cbl-title { font-size: .8rem; font-weight: 600; margin: .75rem 0 .25rem; }
.cbl-columns { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cbl-total { margin-top: .75rem; font-size: .9rem; }
.cbl-form { display: flex; flex-wrap: wrap; gap: 1rem; }
.cbl-field { display: grid; gap: .25rem; min-width: min(100%, 16rem); }
.cbl-field .cb-select { width: 100%; }
.cbl-check { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; font-size: .875rem; }
.cbl-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; font-size: .875rem; }
.cbl-facts dt { color: rgb(107 114 128); font-size: .75rem; }
.cbl-error { color: rgb(200 55 45); font-size: .875rem; margin-top: .5rem; }
.cbl-error:empty { display: none; }
.co-charge .fp-choices { display: grid; gap: .5rem; }
.co-charge .fp-choices--row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.co-charge .fp-choice { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid rgb(229 231 235); border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; cursor: pointer; }
.co-charge .fp-note, .co-charge .fp-paybox { border: 1px dashed rgb(209 213 219); border-radius: .5rem; padding: .75rem; font-size: .875rem; }
.co-charge .fp-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.co-charge .fp-field { display: grid; gap: .25rem; }
.co-charge .fp-field input { border: 1px solid rgb(209 213 219); border-radius: .5rem; padding: .35rem .6rem; background: transparent; }
.co-charge .fp-ifield { width: 100%; height: 2.4rem; border: 1px solid rgb(209 213 219); border-radius: .5rem; }
.co-charge .fp-ifield-box { min-height: 3rem; }
.co-charge .fp-error { color: rgb(200 55 45); font-size: .8rem; }
.dark .cbl-table th, .dark .cbl-table td { border-color: rgb(255 255 255 / .1); }
.dark .co-charge .fp-choice, .dark .co-charge .fp-note, .dark .co-charge .fp-paybox { border-color: rgb(255 255 255 / .15); }
.cbl-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.cbl-tile { display: grid; gap: .1rem; border: 1px solid rgb(229 231 235); border-radius: .75rem; padding: .75rem 1rem; background: #fff; }
.cbl-tile span { font-size: .75rem; color: rgb(107 114 128); }
.cbl-tile strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cbl-tile small { font-size: .75rem; color: rgb(107 114 128); }
.cbl-tile--danger { border-color: rgb(248 113 113); }
.cbl-tile--danger strong { color: rgb(200 55 45); }
.cbl-tile--warning { border-color: rgb(251 191 36); }
.dark .cbl-tile { background: rgb(17 24 39); border-color: rgb(255 255 255 / .1); }
/* Season picker in the header, and the banner when looking at another season. */
.co-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-season-picker { display: flex; align-items: center; gap: .35rem; margin-inline-end: .5rem; }
.co-season-picker select { border: 1px solid rgb(209 213 219); border-radius: .5rem; padding: .3rem 1.8rem .3rem .55rem; font-size: .8125rem; background-color: transparent; color: inherit; max-width: none; }
.co-season-picker--away select { border-color: rgb(217 127 18); background-color: rgb(255 247 237); color: rgb(124 45 18); }
.co-season-picker--away span { color: rgb(217 127 18); }
.co-season-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; padding: .65rem .9rem; border: 1px solid rgb(251 191 36); border-radius: .75rem; background: rgb(255 251 235); color: rgb(120 53 15); font-size: .875rem; }
.co-season-banner button { border: 1px solid rgb(217 119 6); border-radius: .5rem; padding: .25rem .7rem; font-weight: 600; background: #fff; color: rgb(146 64 14); }
.dark .co-season-banner { background: rgb(251 191 36 / .08); color: rgb(253 230 138); border-color: rgb(251 191 36 / .4); }
.dark .co-season-picker select { border-color: rgb(255 255 255 / .15); }
.dark .co-season-picker--away select { background-color: rgb(217 127 18 / .15); color: rgb(254 215 170); }

/* Camper photo when pointing at a name on the bunk board. */
.cb-name { position: relative; }
.cb-photo { display: none; position: absolute; z-index: 20; left: 0; top: 1.4rem; padding: .2rem; border-radius: .6rem; background: #fff; box-shadow: 0 8px 24px rgb(15 23 42 / .18); }
.cb-photo img { display: block; width: 6rem; height: 6rem; object-fit: cover; border-radius: .45rem; }
.cb-name:hover .cb-photo, .cb-name:focus .cb-photo { display: block; }

/* Families list: campers as small chips in their grade's color. */
.co-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.co-chip { display: inline-flex; align-items: baseline; gap: .25rem; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--chip); background: color-mix(in srgb, var(--chip) 12%, transparent); border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent); }
.co-chip small { font-weight: 500; opacity: .8; }
.co-chip--off { color: rgb(107 114 128); background: transparent; border-style: dashed; border-color: rgb(209 213 219); }

/* A family's history. */
.co-timeline__filters { margin-bottom: .75rem; }
.co-timeline { display: grid; gap: .1rem; }
.co-timeline__item { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding: .5rem 0 .5rem .75rem; border-left: 3px solid rgb(203 213 225); }
.co-timeline__item time { font-size: .8rem; color: rgb(75 85 99); font-variant-numeric: tabular-nums; }
.co-timeline__item time small { display: block; color: rgb(107 114 128); }
.co-timeline__title { font-size: .875rem; font-weight: 600; }
.co-timeline__detail { font-size: .8rem; color: rgb(75 85 99); white-space: pre-line; }
.co-timeline__item--success { border-left-color: rgb(18 128 92); }
.co-timeline__item--info { border-left-color: rgb(2 132 199); }
.co-timeline__item--warning { border-left-color: rgb(217 127 18); }
.co-timeline__item--danger { border-left-color: rgb(200 55 45); }
@media (max-width: 640px) { .co-timeline__item { grid-template-columns: 1fr; gap: .15rem; } }
.dark .co-timeline__item time, .dark .co-timeline__detail { color: rgb(156 163 175); }

/* Previous / next family. */
.co-family-nav { font-size: .8rem; color: rgb(107 114 128); }

/* Bunk board: the grade's color along the top of each bunk, and shared-bunk grade counts. */
.cb-bunk { border-top: 3px solid var(--grade, rgb(229 231 235)); }
.cb-shared { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

/* Grades overview. */
.co-grade-totals { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; color: rgb(55 65 81); }
.co-grade-totals strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; margin-right: .2rem; }
.co-grade-group { margin-top: .5rem; font-size: 1rem; font-weight: 700; }
.co-grade-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.co-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; border: 1px solid rgb(229 231 235); border-top: 4px solid var(--grade); border-radius: .75rem; padding: .85rem; background: #fff; }
.co-grade__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.co-grade__head h3 { font-weight: 700; }
.co-grade__nick { font-size: .8rem; font-weight: 600; color: var(--grade); }
.co-grade__numbers, .co-grade__placed, .co-grade__pending { font-size: .85rem; color: rgb(55 65 81); }
.co-grade__warn { font-size: .8rem; color: rgb(200 55 45); font-weight: 600; }
.co-progress { height: .5rem; border-radius: 999px; background: rgb(241 245 249); overflow: hidden; }
.co-progress span { display: block; height: 100%; border-radius: inherit; background: rgb(148 163 184); }
.co-progress--done span { background: rgb(18 128 92); }
.co-progress--part span { background: rgb(217 127 18); }
.co-progress--low span { background: rgb(200 55 45); }
.co-grade__terms { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8rem; color: rgb(75 85 99); }
.co-grade__terms div { display: flex; gap: .3rem; }
.co-grade__terms dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.co-grade__links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding-top: .35rem; border-top: 1px solid rgb(241 245 249); }
.dark .co-grade { background: rgb(17 24 39); border-color: rgb(255 255 255 / .1); border-top-color: var(--grade); }
.dark .co-grade-totals, .dark .co-grade__numbers, .dark .co-grade__placed, .dark .co-grade__pending, .dark .co-grade__terms { color: rgb(209 213 219); }
.dark .co-progress { background: rgb(255 255 255 / .08); }

/* Budget and expenses from a statement (docs/architecture/expenses.md) */
.co-budget-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.co-budget-tile { display: grid; gap: .15rem; border: 1px solid rgb(229 231 235); border-radius: .75rem; padding: .75rem .9rem; background: #fff; }
.co-budget-tile span { font-size: .8rem; color: rgb(75 85 99); }
.co-budget-tile strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.co-budget-tile small { font-size: .75rem; color: rgb(107 114 128); }
.co-budget-tile--over strong, .co-budget-neg { color: rgb(200 55 45); }
.co-budget-stand { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.co-budget-stand dt { font-size: .85rem; color: rgb(75 85 99); }
.co-budget-stand dd { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-budget-stand p { font-size: .8rem; color: rgb(107 114 128); }
.co-budget-empty { font-size: .9rem; color: rgb(75 85 99); }
.co-budget-rows { display: grid; }
.co-budget-row { display: grid; grid-template-columns: minmax(8rem, 1.4fr) minmax(6rem, 2fr) repeat(3, minmax(5.5rem, 1fr)); gap: .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid rgb(241 245 249); font-size: .9rem; }
.co-budget-row--head { font-size: .75rem; font-weight: 600; color: rgb(107 114 128); text-transform: uppercase; letter-spacing: .03em; }
.co-budget-row--total { font-weight: 700; border-bottom: 0; }
.co-budget-name { display: grid; }
.co-budget-name a { font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: rgb(203 213 225); text-underline-offset: 3px; }
.co-budget-name small, .co-budget-bar-col small { font-size: .75rem; color: rgb(107 114 128); }
.co-budget-bar-col { display: grid; gap: .2rem; }
.co-budget-num { text-align: right; font-variant-numeric: tabular-nums; }
.co-budget-bar--ok span { background: rgb(18 128 92); }
.co-budget-bar--near span { background: rgb(217 127 18); }
.co-budget-bar--over span { background: rgb(200 55 45); }
@media (max-width: 640px) {
    .co-budget-row { grid-template-columns: 1fr 1fr; }
    .co-budget-row--head { display: none; }
    .co-budget-bar-col { grid-column: 1 / -1; order: 5; }
}
.dark .co-budget-tile { background: rgb(17 24 39); border-color: rgb(255 255 255 / .1); }
.dark .co-budget-tile span, .dark .co-budget-stand dt, .dark .co-budget-empty { color: rgb(209 213 219); }
.dark .co-budget-row { border-color: rgb(255 255 255 / .08); }

.co-statement { width: 100%; border-collapse: collapse; font-size: .85rem; }
.co-statement th { text-align: left; font-size: .75rem; font-weight: 600; color: rgb(107 114 128); padding: .4rem .35rem; border-bottom: 1px solid rgb(229 231 235); }
.co-statement td { padding: .35rem; border-bottom: 1px solid rgb(241 245 249); vertical-align: top; }
.co-statement tr.is-off td { opacity: .55; }
.co-statement input[type=text], .co-statement input[type=date], .co-statement select { width: 100%; min-width: 6rem; border: 1px solid rgb(209 213 219); border-radius: .4rem; padding: .25rem .4rem; font-size: .85rem; background: #fff; }
.co-statement .co-statement__amount { text-align: right; min-width: 6.5rem; font-variant-numeric: tabular-nums; }
.co-statement__flag { display: block; margin-top: .2rem; font-size: .75rem; color: rgb(180 83 9); }
.co-statement__desc { display: block; margin-top: .2rem; font-size: .75rem; color: rgb(107 114 128); }
.co-statement-wrap { overflow-x: auto; }
.co-statement-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-top: .75rem; font-size: .9rem; }
.dark .co-statement input, .dark .co-statement select { background: rgb(17 24 39); border-color: rgb(255 255 255 / .15); color: inherit; }
/* The application next to the form the family sent (fillable PDF, scan or photos). */
.co-pdf-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1100px) { .co-pdf-compare { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.co-pdf-frame { width: 100%; height: 70vh; min-height: 420px; border: 1px solid rgb(229 231 235); border-radius: .5rem; background: #fff; }
.co-needs-look { margin: 0; padding-left: 1.1rem; list-style: disc; font-size: .875rem; display: grid; gap: .35rem; }
/* The season picker shows its whole name. On a phone or a narrow tablet, and on a small laptop where the side menu takes
   its room, the top bar has no room for it beside Assistant, How do I…?, Support, search and the person's menu (which it
   pushed off the right edge), so it sits above the page instead. */
.co-season-picker--page { display: none; }
@media (max-width: 899px), (min-width: 1024px) and (max-width: 1199px) {
    .co-season-picker--topbar { display: none; }
    .co-season-picker--page { display: flex; margin: 0 0 1rem; }
    .co-season-picker--page select { flex: 1; padding-block: .45rem; font-size: .875rem; }
}
/* "You're seeing the office as …" (App\Support\SeeAs). */
.co-see-as { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; padding: .65rem .9rem; border-radius: .75rem; background: rgb(238 242 255); border: 1px solid rgb(165 180 252); color: rgb(49 46 129); font-size: .875rem; }
.co-see-as button { border: 1px solid rgb(99 102 241); border-radius: .5rem; padding: .25rem .7rem; font-weight: 600; background: #fff; color: rgb(55 48 163); }
.dark .co-see-as { background: rgb(99 102 241 / .12); color: rgb(199 210 254); border-color: rgb(99 102 241 / .4); }

/* Dashboard: the four parts of the camp's year (App\Support\SeasonPhase), above the greeting. */
.co-phases { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.co-phases ol { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.co-phase-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px;
    font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2; color: inherit; background: rgb(127 127 127 / .1); border: 0; }
button.co-phase-btn { cursor: pointer; }
button.co-phase-btn:hover { background: rgb(127 127 127 / .2); }
.co-phase-num { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; font-size: .75rem;
    background: rgb(127 127 127 / .18); font-variant-numeric: tabular-nums; }
.co-phase--past .co-phase-btn { opacity: .7; }
.co-phase--now .co-phase-btn { background: #f2c14e; color: #1a1205; box-shadow: 0 0 0 2px rgb(242 193 78 / .35); }
.co-phase--now .co-phase-num { background: #1a1205; color: #f2c14e; }
.co-phase-follow { font: inherit; font-size: .8rem; text-decoration: underline; text-underline-offset: .2em; background: none; border: 0; padding: 0; color: inherit; opacity: .8; cursor: pointer; }
.co-phase-focus { margin: -.5rem 0 1.25rem; max-width: 34rem; font-size: .95rem; }
.co-today-label--only { font-size: .95rem; font-weight: 600; color: inherit; }
@media (max-width: 640px) {
    .co-hero { grid-template-columns: minmax(0, 1fr) !important; }
    .co-phase-btn { font-size: .8rem; }
}

/* "How a season works": the welcome steps (filament.office.welcome-steps). */
.co-welcome { display: grid; gap: 1.25rem; }
.co-welcome-intro { max-width: 46rem; margin: 0; font-size: 1rem; }
.co-welcome-steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .co-welcome-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.co-welcome-step { counter-increment: step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .25rem .85rem; align-items: start;
    padding: 1rem 1.1rem; border-radius: .9rem; border: 1px solid rgb(127 127 127 / .2); }
.co-welcome-step::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
    font-weight: 700; background: rgb(127 127 127 / .12); grid-column: 1; grid-row: 1 / span 4; }
.co-welcome-step > * { grid-column: 2; }
.co-welcome-step--done::before { content: "\2713"; background: #e3f3ea; color: #0f6346; }
.co-welcome-step--now { border-color: #e0a526; box-shadow: 0 0 0 1px #e0a526; }
.co-welcome-step h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.co-welcome-step p { margin: 0; font-size: .9rem; opacity: .85; }
.co-welcome-step .co-welcome-when { font-size: .8rem; font-weight: 600; opacity: .7; }
.co-welcome-step a { justify-self: start; margin-top: .4rem; font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.co-welcome-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* "How do I…?" in the top bar (App\Livewire\Office\HowDoI) */
.co-howdoi__button { display: inline-flex; align-items: center; gap: .35rem; margin-inline-end: .5rem; padding: .35rem .7rem; border: 1px solid rgb(209 213 219); border-radius: 999px; font-size: .8125rem; font-weight: 600; color: inherit; background: transparent; cursor: pointer; white-space: nowrap; }
.co-howdoi__button:hover { background: rgb(243 244 246); }
.co-howdoi__button svg { width: 1.1rem; height: 1.1rem; color: var(--primary-600); }
@media (max-width: 40rem) { .co-howdoi__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .co-howdoi__button { padding: .4rem; } }
[x-cloak].co-howdoi__layer { display: none; }
.co-howdoi__layer { position: fixed; inset: 0; z-index: 60; }
.co-howdoi__backdrop { position: absolute; inset: 0; background: rgb(17 24 39 / .35); }
.co-howdoi__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(28rem, 100%); display: flex; flex-direction: column; background: #fff; color: rgb(17 24 39); box-shadow: -12px 0 32px -12px rgb(0 0 0 / .3); }
.co-howdoi__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgb(229 231 235); }
.co-howdoi__head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.co-howdoi__close { font-size: 1.5rem; line-height: 1; padding: 0 .35rem; color: rgb(107 114 128); background: none; border: 0; cursor: pointer; }
.co-howdoi__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: grid; align-content: start; gap: 1rem; font-size: .9rem; line-height: 1.55; }
.co-howdoi__intro { color: rgb(55 65 81); display: grid; gap: .5rem; }
.co-howdoi__intro p { margin: 0; }
.co-howdoi__examples { font-weight: 600; }
.co-howdoi__intro ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.co-howdoi__intro li button { text-align: left; border: 1px solid rgb(229 231 235); border-radius: .6rem; padding: .4rem .65rem; width: 100%; background: rgb(249 250 251); cursor: pointer; font-size: .875rem; }
.co-howdoi__intro li button:hover { border-color: var(--primary-600); }
.co-howdoi__turn { display: grid; gap: .5rem; }
.co-howdoi__q { justify-self: end; max-width: 90%; margin: 0; padding: .5rem .8rem; border-radius: .9rem; background: var(--primary-600); color: #fff; }
.co-howdoi__a { padding: .6rem .85rem; border-radius: .9rem; background: rgb(243 244 246); overflow-wrap: anywhere; }
.co-howdoi__a > * + * { margin-top: .5rem; }
.co-howdoi__a ol { list-style: decimal; padding-left: 1.2rem; }
.co-howdoi__a ul { list-style: disc; padding-left: 1.2rem; }
.co-howdoi__a a, .co-howdoi__intro a { color: var(--primary-600); text-decoration: underline; font-weight: 600; }
.co-howdoi__matches { border-top: 1px solid rgb(229 231 235); padding: .6rem 1.25rem; font-size: .85rem; }
.co-howdoi__matches p { margin: 0 0 .25rem; color: rgb(107 114 128); font-weight: 600; }
.co-howdoi__matches ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.co-howdoi__matches a { display: inline-block; padding: .2rem .6rem; border: 1px solid rgb(229 231 235); border-radius: 999px; color: var(--primary-600); font-weight: 600; text-decoration: none; }
.co-howdoi__matches a:hover { border-color: var(--primary-600); }
.dark .co-howdoi__matches { border-color: rgb(255 255 255 / .1); }
.dark .co-howdoi__matches a { border-color: rgb(255 255 255 / .15); }
.co-howdoi__working { margin: 0; color: rgb(107 114 128); font-style: italic; }
.co-assist__hint { display: block; font-size: 0.8em; font-style: normal; }
.co-howdoi__form { border-top: 1px solid rgb(229 231 235); padding: .75rem 1.25rem 1rem; display: grid; gap: .5rem; }
.co-howdoi__form textarea { width: 100%; resize: vertical; border: 1px solid rgb(209 213 219); border-radius: .6rem; padding: .5rem .65rem; font-size: .9rem; background: transparent; color: inherit; }
.co-howdoi__actions { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; }
.co-howdoi__send { padding: .45rem 1.1rem; border-radius: .5rem; background: var(--primary-600); color: #fff; font-weight: 600; font-size: .875rem; border: 0; cursor: pointer; }
.co-howdoi__send[disabled] { opacity: .6; }
.co-howdoi__link { font-size: .8125rem; color: rgb(107 114 128); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.dark .co-howdoi__button { border-color: rgb(255 255 255 / .15); }
.dark .co-howdoi__button:hover { background: rgb(255 255 255 / .05); }
.dark .co-howdoi__panel { background: rgb(17 24 39); color: rgb(243 244 246); }
.dark .co-howdoi__head, .dark .co-howdoi__form { border-color: rgb(255 255 255 / .1); }
.dark .co-howdoi__intro { color: rgb(209 213 219); }
.dark .co-howdoi__intro li button { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); }
.dark .co-howdoi__a { background: rgb(255 255 255 / .06); }
.dark .co-howdoi__form textarea { border-color: rgb(255 255 255 / .15); }

/* Assistant panel on every screen (App\Livewire\Office\AssistantPanel): How do I…'s panel, plus approval cards and a spreadsheet drop. */
.co-assist .co-howdoi__button svg { width: 1.05rem; height: 1.05rem; color: var(--primary-600); }
.co-assist__panel.co-howdoi__panel { width: min(32rem, 100%); }
.co-assist__card { border: 1px solid rgb(209 213 219); border-left: 4px solid var(--primary-600); border-radius: .6rem; padding: .6rem .8rem; display: grid; gap: .5rem; background: #fff; }
.co-assist__card p { margin: 0; }
.co-assist__card-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.co-assist__decided { margin: 0; font-size: .8125rem; color: rgb(107 114 128); }
.co-assist__drop { display: grid; gap: .25rem; padding: .9rem 1rem; border: 2px dashed rgb(209 213 219); border-radius: .75rem; font-size: .85rem; color: rgb(75 85 99); cursor: pointer; text-align: center; }
.co-assist__drop strong { color: rgb(17 24 39); }
.co-assist__drop:hover, .co-assist__drop--over { border-color: var(--primary-600); background: rgb(249 250 251); }
.co-assist__error { margin: 0; color: rgb(185 28 28); font-size: .85rem; }
.dark .co-assist__card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .15); border-left-color: var(--primary-500); }
.dark .co-assist__drop { border-color: rgb(255 255 255 / .2); color: rgb(209 213 219); }
.dark .co-assist__drop strong { color: rgb(243 244 246); }
.dark .co-assist__drop:hover, .dark .co-assist__drop--over { background: rgb(255 255 255 / .05); }
.dark .co-assist__error { color: rgb(252 165 165); }
.co-hero-program { font-weight: 600; }
.co-hero-program-change { margin-left: .35rem; text-decoration: underline; font-size: .8125rem; }
/* The support widget sits in the same corner as the panel's Ask button: hidden while the panel is open. */
html.co-howdoi-open [data-flexvivid-support] { display: none !important; }
.co-assist__page-drop { margin-bottom: 1rem; }

/* CampOffice Admin: its menu group sits apart under the camp's groups (App\Support\Admin). */
.fi-sidebar-group[data-group-label="CampOffice Admin"] { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgb(127 127 127 / .25); }
/* CampOffice Admin in a customer's office (resources/views/filament/office/admin-bar.blade.php). */
.co-adminbar { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; align-items: center; padding: 8px 16px; background: #1e1b4b; color: #e0e7ff; font: 500 13px/1.4 system-ui, sans-serif; }
.co-adminbar a { color: #a5b4fc; text-decoration: underline; }
/* The assistant's "go there" buttons under an answer (filament/office/assistant-links). */
.co-assist__links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.co-assist__link { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--primary-600); border-radius: .5rem; font-size: .8125rem; font-weight: 600; color: var(--primary-700); background: #fff; text-decoration: none; }
.co-assist__link:hover, .co-assist__link:focus-visible { background: var(--primary-50); }
.co-assist__link svg { width: .95rem; height: .95rem; }
.dark .co-assist__link { background: transparent; color: var(--primary-300); border-color: var(--primary-500); }
.dark .co-assist__link:hover { background: rgb(255 255 255 / .05); }
/* Bus board */
.bb-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bb-input { padding-right: .6rem; width: 11rem; }
.bb-input--limit { width: 9rem; }
.bb-input--small { width: 4.5rem; padding-right: .4rem; }
.bb-board { display: grid; gap: 1rem; grid-template-columns: minmax(16rem, 22rem) 1fr; align-items: start; }
@media (max-width: 900px) { .bb-board { grid-template-columns: 1fr; } }
.bb-zone + .bb-zone { margin-top: .75rem; }
.bb-zone__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem; cursor: grab; }
.bb-zone__title .cb-muted { font-weight: 400; font-size: .72rem; }
.bb-count { display: inline-flex; align-items: center; gap: .25rem; }
.bb-warn { width: 1.1rem; height: 1.1rem; color: rgb(220 38 38); }
.bb-over { color: rgb(220 38 38); font-weight: 600; }
.bb-limit { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.bb-stop { color: rgb(3 105 161); }
.bb-bus { background: #fff; }
.dark .bb-bus { background: rgb(17 24 39); }
.dark .bb-stop { color: rgb(125 211 252); }
.bb-link { font-size: .75rem; color: rgb(3 105 161); text-decoration: underline; }
.bb-stop-form { display: grid; gap: .35rem; margin-top: .3rem; }
.bb-stop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bb-input--stop { width: 100%; padding-right: .4rem; }
.dark .bb-link { color: rgb(125 211 252); }
.bb-route { margin-bottom: .5rem; padding: .4rem .55rem; border-radius: .4rem; background: rgb(241 245 249); }
.bb-route__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.bb-route .cb-note { display: flex; align-items: flex-start; gap: .3rem; margin: 0; }
.bb-route--stale { background: rgb(254 243 199); }
.bb-route--stale .bb-warn { color: rgb(180 83 9); }
.dark .bb-route { background: rgb(255 255 255 / .05); }
.dark .bb-route--stale { background: rgb(120 53 15 / .35); }
.bb-stops summary { cursor: pointer; margin-top: .3rem; list-style: none; text-decoration: underline; text-underline-offset: .2em; }
.bb-stops summary::-webkit-details-marker { display: none; }
.bb-stops summary::before { content: '▸ '; }
.bb-stops[open] summary::before { content: '▾ '; }
.bb-stop-list { margin: .3rem 0 0 1.1rem; padding: 0; list-style: decimal; font-size: .75rem; }
.bb-stop-list li { margin: .1rem 0; overflow-wrap: anywhere; }
.bb-time { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .25rem; }
/* Menu: "More" under each group (sidebar-more) */
.co-menu-more { list-style: none; }
.co-menu-more__btn { margin: .15rem 0 .25rem; padding: .3rem .75rem; font-size: .8rem; font-weight: 500; color: rgb(107 114 128); border-radius: .5rem; width: 100%; text-align: start; }
.co-menu-more__btn:hover, .co-menu-more__btn:focus-visible { color: rgb(17 24 39); background: rgb(243 244 246); }
.dark .co-menu-more__btn:hover, .dark .co-menu-more__btn:focus-visible { color: #fff; background: rgb(255 255 255 / .06); }
/* Field help behind an ⓘ (help-icons) */
.co-help-i { display: inline-flex; margin-inline-start: .3rem; vertical-align: -3px; color: var(--primary-600, rgb(3 105 161)); cursor: help; }
.co-help-i:hover, .co-help-i:focus-visible, .co-help-i[aria-expanded="true"] { color: var(--primary-500, rgb(14 165 233)); }
.dark .co-help-i { color: var(--primary-400, rgb(125 211 252)); }
.co-dash-more { display: flex; justify-content: center; }
.co-welcome-next { border: 1px solid rgb(229 231 235); border-radius: .75rem; padding: .75rem 1rem; margin-bottom: .75rem; }
.co-welcome-next h3 { font-weight: 600; margin: .1rem 0 .25rem; }
.co-welcome-all { margin-bottom: .75rem; }
.co-welcome-all > summary { cursor: pointer; font-size: .875rem; font-weight: 500; color: rgb(3 105 161); margin-bottom: .5rem; }
.dark .co-welcome-next { border-color: rgb(255 255 255 / .1); }
.dark .co-welcome-all > summary { color: rgb(125 211 252); }
/* Review applicants: one at a time beside a large photo, or the photo wall (ReviewStaffApplications). */
.ar { --ar-line: rgb(229 231 235); --ar-soft: rgb(249 250 251); --ar-card: #fff; display: grid; gap: 1rem; }
.dark .ar { --ar-line: rgb(255 255 255 / .1); --ar-soft: rgb(255 255 255 / .04); --ar-card: rgb(17 24 39); }
.ar-toolbar__end { display: inline-flex; gap: .5rem; margin-inline-start: auto; }
.ar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ar-nav__count { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: center; }
.ar-review { display: grid; gap: 1.5rem; grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .ar-review { grid-template-columns: minmax(0, 1fr); } }
.ar-photo-col { position: sticky; top: 5rem; }
@media (max-width: 900px) { .ar-photo-col { position: static; max-width: 22rem; } }
.ar-photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; border-radius: 1rem; border: 1px solid var(--ar-line); background: var(--ar-soft); }
.ar-initials { display: grid; place-content: center; justify-items: center; gap: .25rem; font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; letter-spacing: .04em; color: var(--primary-600, rgb(3 105 161)); background: var(--primary-50, rgb(240 249 255)); }
.ar-initials small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: rgb(107 114 128); }
.dark .ar-initials { color: var(--primary-300, rgb(125 211 252)); background: rgb(255 255 255 / .05); }
.ar-info { display: grid; gap: 1rem; min-width: 0; }
.ar-name { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0; }
.ar-sub { margin: .2rem 0 .5rem; color: rgb(75 85 99); }
.dark .ar-sub { color: rgb(156 163 175); }
.ar-head__line { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ar-rating { font-size: .8rem; font-weight: 600; color: rgb(180 83 9); white-space: nowrap; }
.ar-rating--big { font-size: 1rem; }
.dark .ar-rating { color: rgb(252 211 77); }
.ar-facts { display: grid; gap: .5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin: 0; }
.ar-facts dt { font-size: .75rem; font-weight: 600; color: rgb(107 114 128); }
.ar-facts dd { margin: 0; overflow-wrap: anywhere; }
.ar-notes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.ar-note { display: grid; gap: .5rem; align-content: start; justify-items: start; padding: 1rem; border: 2px solid var(--primary-200, rgb(186 230 253)); border-radius: 1rem; background: var(--ar-card); }
.dark .ar-note { border-color: rgb(255 255 255 / .15); }
.ar-note__title { font-size: 1.1rem; font-weight: 700; }
.ar-note .cb-hint { margin: 0; }
.ar-textarea { width: 100%; min-height: 10rem; resize: vertical; padding: .6rem .75rem; border: 1px solid rgb(209 213 219); border-radius: .6rem; background: transparent; font: inherit; line-height: 1.5; }
.dark .ar-textarea { border-color: rgb(255 255 255 / .15); }
.ar-textarea:focus { outline: 2px solid var(--primary-500, rgb(14 165 233)); outline-offset: 1px; }
.ar-error { color: rgb(220 38 38); font-size: .8rem; margin: 0; }
.ar-stars { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.ar-star { font-size: 1.75rem; line-height: 1; padding: 0 .1rem; color: rgb(209 213 219); background: none; border: 0; cursor: pointer; }
.ar-star--on { color: rgb(245 158 11); }
.ar-star:focus-visible { outline: 2px solid var(--primary-500, rgb(14 165 233)); border-radius: .25rem; }
.ar-star:disabled { cursor: default; }
.ar-stars .cb-hint { margin-inline-start: .5rem; }
.ar-more { border: 1px solid var(--ar-line); border-radius: .75rem; padding: .6rem .9rem; background: var(--ar-card); }
.ar-more > summary { cursor: pointer; font-weight: 600; }
.ar-answers { display: grid; gap: .2rem; margin: .6rem 0 0; }
.ar-answers dt { font-size: .75rem; font-weight: 600; color: rgb(107 114 128); margin-top: .4rem; }
.ar-answers dd { margin: 0; white-space: pre-line; }
.ar-list { display: grid; gap: .6rem; margin: .6rem 0 0; font-size: .9rem; }
.ar-pre { white-space: pre-line; margin-top: .2rem; }
.ar-wall { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.ar-card { display: grid; gap: .35rem; width: 100%; text-align: start; padding: .5rem; border: 1px solid var(--ar-line); border-radius: .9rem; background: var(--ar-card); cursor: pointer; }
.ar-card:hover, .ar-card:focus-visible { border-color: var(--primary-400, rgb(56 189 248)); }
.ar-card__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; border-radius: .6rem; }
.ar-card .ar-initials { font-size: 2.5rem; }
.ar-card__name { font-weight: 600; line-height: 1.25; }
.ar-card__line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
@media (prefers-reduced-motion: no-preference) { .ar-card { transition: border-color .2s, transform .2s; } .ar-card:hover { transform: translateY(-2px); } }
.ar-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Calendar (Pages\Calendar): a week, each day in three colored parts, each plan in its division's color */
.co-cal-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; }
.co-cal-bar__weeks { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.co-cal-bar__label { font-size: 1.05rem; font-weight: 700; margin-inline-start: .35rem; }
.co-cal-bar__filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.co-cal-field { display: grid; gap: .15rem; font-size: .75rem; font-weight: 500; color: rgb(75 85 99); }
.co-cal-input { border: 1px solid rgb(209 213 219); border-radius: .5rem; padding: .3rem .5rem; font-size: .875rem; background: #fff; color: rgb(17 24 39); }
.co-cal-scroll { overflow-x: auto; border: 1px solid rgb(229 231 235); border-radius: .75rem; background: #fff; }
.co-cal { width: 100%; min-width: calc(6.5rem + var(--days, 6) * 9.5rem); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.co-cal th, .co-cal td { border-right: 1px solid rgb(229 231 235); border-bottom: 1px solid rgb(229 231 235); vertical-align: top; text-align: start; }
.co-cal tr > :last-child { border-right: 0; }
.co-cal tbody tr:last-child > * { border-bottom: 0; }
.co-cal__corner { width: 6.5rem; }
.co-cal__day { padding: .5rem .6rem; font-weight: 600; font-size: .85rem; }
.co-cal__day--today { box-shadow: inset 0 3px 0 var(--primary-500, rgb(14 165 233)); }
.co-cal__dayname, .co-cal__date { display: block; }
.co-cal__date { font-weight: 400; font-size: .75rem; color: rgb(107 114 128); }
.co-cal__copy { margin-top: .2rem; font-size: .7rem; font-weight: 500; color: rgb(3 105 161); text-decoration: underline; }
.co-cal__section { padding: .6rem; font-size: .8rem; font-weight: 700; background: var(--band); color: rgb(31 41 55); }
.co-cal__cell { padding: .35rem; height: 7.5rem; background: color-mix(in srgb, var(--band) 70%, #fff); }
.co-cal__add { display: block; width: 100%; margin-top: .15rem; padding: .15rem .3rem; border-radius: .4rem; font-size: .72rem; color: rgb(75 85 99); text-align: start; opacity: .55; }
.co-cal__cell:hover .co-cal__add, .co-cal__add:focus-visible { opacity: 1; background: rgb(255 255 255 / .6); }
.co-cal-chip { display: block; width: 100%; margin-bottom: .25rem; padding: .2rem .4rem; border-radius: .4rem; border-left: 4px solid var(--chip); background: color-mix(in srgb, var(--chip) 12%, #fff); font-size: .78rem; line-height: 1.25; text-align: start; color: rgb(17 24 39); }
button.co-cal-chip:hover, button.co-cal-chip:focus-visible { background: color-mix(in srgb, var(--chip) 22%, #fff); }
.co-cal-chip strong { color: var(--chip); }
.co-cal-chip small { display: block; font-size: .68rem; color: rgb(75 85 99); }
.co-cal-chip--trip { border-left-style: double; border-left-width: 5px; }
.co-cal-chip__note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-cal-legend { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; color: rgb(75 85 99); }
.dark .co-cal-field, .dark .co-cal-legend { color: rgb(209 213 219); }
.dark .co-cal-input { background: rgb(17 24 39); border-color: rgb(255 255 255 / .15); color: #fff; }
.dark .co-cal-scroll { background: rgb(17 24 39); border-color: rgb(255 255 255 / .1); }
.dark .co-cal th, .dark .co-cal td { border-color: rgb(255 255 255 / .1); }
.dark .co-cal__date, .dark .co-cal-chip small, .dark .co-cal__add { color: rgb(156 163 175); }
.dark .co-cal__copy { color: rgb(125 211 252); }
.dark .co-cal__section { background: color-mix(in srgb, var(--band) 30%, rgb(17 24 39)); color: #fff; }
.dark .co-cal__cell { background: color-mix(in srgb, var(--band) 14%, rgb(17 24 39)); }
.dark .co-cal-chip { background: color-mix(in srgb, var(--chip) 22%, rgb(17 24 39)); color: #fff; }
.dark button.co-cal-chip:hover { background: color-mix(in srgb, var(--chip) 32%, rgb(17 24 39)); }
.dark .co-cal-chip strong { color: color-mix(in srgb, var(--chip) 55%, #fff); }
/* Section home screens (SectionHome, App\Support\OfficeSections) */
.co-section { display: grid; gap: .5rem; }
.co-section-label { margin: 1rem 0 .1rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(107 114 128); }
.co-section-tiles { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.co-section-tile { position: relative; border-radius: var(--radius-card, .75rem); background: var(--card, #fff); box-shadow: var(--card-shadow, 0 0 0 1px rgb(0 0 0 / .08)); transition: box-shadow .15s, transform .15s; }
.co-section-tile:hover { box-shadow: var(--card-shadow-raised, 0 6px 18px -10px rgb(0 0 0 / .25)); transform: translateY(-1px); }
.co-section-tile__link { display: grid; grid-template-columns: auto 1fr; gap: .15rem .65rem; padding: .85rem 2.4rem .85rem .9rem; color: inherit; text-decoration: none; height: 100%; }
.co-section-tile__icon { grid-row: span 2; width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--primary, #2f5bff); }
.co-section-tile__name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 600; font-size: .95rem; }
.co-section-tile__line { grid-column: 2; font-size: .82rem; color: rgb(75 85 99); line-height: 1.35; }
.co-section-tile__badge { font-size: .7rem; font-weight: 700; padding: 0 .45rem; border-radius: 999px; background: rgb(254 243 199); color: rgb(146 64 14); }
.co-section-tile--now { box-shadow: 0 0 0 2px var(--primary, #2f5bff), var(--card-shadow, none); }
.co-section-tile--extra .co-section-tile__icon { color: rgb(180 83 9); }
.co-section-tiles--small { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.co-section-tiles--small .co-section-tile__line { display: none; }
.co-section-tiles--small .co-section-tile__link { padding-block: .6rem; }
.co-section-tiles--small .co-section-tile__icon { grid-row: auto; }
.co-section-pin { position: absolute; top: .55rem; right: .55rem; width: 1.7rem; height: 1.7rem; border-radius: 999px; font-size: 1rem; line-height: 1; color: rgb(156 163 175); }
.co-section-pin:hover, .co-section-pin:focus-visible { color: rgb(180 83 9); background: rgb(254 243 199 / .6); }
.co-section-pin.is-pinned { color: rgb(217 119 6); }
.co-section-recent { display: flex; flex-wrap: wrap; gap: .4rem; }
.co-section-chip { padding: .2rem .75rem; border-radius: 999px; font-size: .85rem; background: var(--card, #fff); box-shadow: var(--card-shadow, 0 0 0 1px rgb(0 0 0 / .1)); color: inherit; text-decoration: none; }
.co-section-chip:hover { box-shadow: 0 0 0 1px var(--primary, #2f5bff); }
.co-section-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem; border-radius: var(--radius-card, .75rem); background: color-mix(in srgb, var(--highlight, #ffc83a) 18%, var(--card, #fff)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight, #ffc83a) 55%, transparent); }
.co-section-callout p { margin: .15rem 0 0; font-size: .9rem; color: rgb(75 85 99); }
.co-section-hint { margin-top: 1rem; font-size: .8rem; color: rgb(107 114 128); }
.dark .co-section-tile__line, .dark .co-section-callout p { color: rgb(156 163 175); }
.dark .co-section-tile__badge { background: rgb(120 53 15 / .5); color: rgb(253 230 138); }
/* Color War: each section in the short menu wears its team color. */
[data-look='colorwar'] .fi-sidebar-item-btn[href*='/sections/sign-ups'] .fi-icon, [data-look='colorwar'] .fi-sidebar-item-btn[href*='/sections/families'] .fi-icon { color: var(--team-blue); }
[data-look='colorwar'] .fi-sidebar-item-btn[href*='/sections/summer'] .fi-icon, [data-look='colorwar'] .fi-sidebar-item-btn[href*='/sections/paperwork'] .fi-icon { color: var(--team-green); }
[data-look='colorwar'] .fi-sidebar-item-btn[href*='/sections/money'] .fi-icon { color: #d39a00; }
[data-look='colorwar'] .fi-sidebar-item-btn[href*='/sections/messages'] .fi-icon { color: var(--team-red); }
/* "Support" in the top bar (CampOffice support) */
.co-support-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.co-support-btn:hover { box-shadow: inset 0 0 0 1px var(--primary, #2f5bff); color: var(--primary, #2f5bff); }
.co-support-btn__icon { width: 1rem; height: 1rem; }
.dark .co-support-btn { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
@media (max-width: 640px) { .co-support-btn span { display: none; } }

.co-support-btn { position: relative; }
/* Something waits for the camp in Support (a question, a reply, a fix to approve, done): a count until they open it. */
.co-support-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: #c8372d; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; }
@media (max-width: 640px) { .co-support-badge { position: absolute; top: -.3rem; right: -.3rem; } }

/* Set up your camp (Pages\SetUpYourCamp), its bar on other screens (Livewire\Office\SetupBar) and its dashboard card (Widgets\SetupProgress). */
.sw { --sw-line: rgb(229 231 235); --sw-soft: rgb(249 250 251); --sw-mute: rgb(107 114 128); --sw-ok: rgb(22 163 74); --sw-ok-soft: rgb(240 253 244); --sw-todo-soft: rgb(255 251 235); --sw-todo: rgb(180 83 9); display: grid; gap: 1rem; }
.sw-progress { display: grid; gap: .4rem; }
.sw-bar { display: block; height: .5rem; border-radius: 999px; background: var(--sw-line); overflow: hidden; }
.sw-bar > span { display: block; height: 100%; background: var(--primary-600, rgb(37 99 235)); border-radius: 999px; }
.sw-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .sw-layout { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } }
.sw-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sw-rail__step { width: 100%; display: grid; grid-template-columns: 1.9rem 1fr; gap: .6rem; align-items: center; text-align: left; padding: .55rem .65rem; border: 1px solid var(--sw-line); border-radius: .7rem; background: transparent; cursor: pointer; }
.sw-rail__step:hover { background: var(--sw-soft); }
.sw-rail__step:focus-visible { outline: 2px solid var(--primary-600, rgb(37 99 235)); outline-offset: 2px; }
.sw-rail__step.is-current { border-color: var(--primary-600, rgb(37 99 235)); box-shadow: 0 0 0 1px var(--primary-600, rgb(37 99 235)); }
.sw-rail__mark { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; border: 2px solid rgb(209 213 219); font-weight: 700; font-size: .85rem; }
.sw-rail__step.is-done .sw-rail__mark { background: var(--sw-ok); border-color: var(--sw-ok); color: #fff; }
.sw-rail__step.is-current .sw-rail__mark { border-color: var(--primary-600, rgb(37 99 235)); }
@media (max-width: 63.99rem) {
  .sw-rail ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sw-rail__step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .25rem; padding: .45rem .3rem; }
  .sw-rail__title { font-size: .75rem; line-height: 1.15; }
  .sw-rail__state { display: none; }
}
.sw-rail__title { display: block; font-weight: 600; font-size: .9rem; }
.sw-rail__state { display: block; font-size: .78rem; color: var(--sw-mute); }
.sw-panel { border: 1px solid var(--sw-line); border-radius: .9rem; padding: 1.25rem; background: #fff; display: grid; gap: .8rem; min-width: 0; }
.sw-panel__count { margin: 0; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sw-mute); }
.sw-panel__title { margin: 0; font-size: 1.35rem; font-weight: 700; }
.sw-panel__intro { margin: 0; color: var(--sw-mute); max-width: 46rem; }
.sw-status { border-radius: .6rem; padding: .6rem .8rem; background: var(--sw-soft); font-size: .9rem; overflow-wrap: anywhere; }
.sw-status ul { margin: .25rem 0 0; padding-left: 1.2rem; list-style: disc; }
.sw-status--done { background: var(--sw-ok-soft); color: rgb(20 83 45); }
.sw-status--todo { background: var(--sw-todo-soft); color: var(--sw-todo); }
.sw-work { display: grid; gap: .8rem; }
.sw-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .4rem; }
.sw-muted { color: var(--sw-mute); font-size: .9rem; margin: 0; }
.sw-link { text-decoration: underline; overflow-wrap: anywhere; }
.sw-nav { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; border-top: 1px solid var(--sw-line); padding-top: .9rem; margin-top: .3rem; }
.sw-nav__spacer { flex: 1 1 auto; }
.dark .sw { --sw-line: rgb(255 255 255 / .12); --sw-soft: rgb(255 255 255 / .05); --sw-mute: rgb(156 163 175); --sw-ok-soft: rgb(22 163 74 / .15); --sw-todo-soft: rgb(245 158 11 / .12); --sw-todo: rgb(252 211 77); }
.dark .sw-panel { background: rgb(17 24 39); }
.dark .sw-status--done { color: rgb(134 239 172); }

.sw-guide-ctn { position: sticky; top: 4.5rem; z-index: 20; }
.sw-guide { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .6rem .9rem; margin-bottom: 1rem; border-radius: .7rem; border: 1px solid rgb(191 219 254); background: rgb(239 246 255); color: rgb(30 58 138); font-size: .9rem; }
.sw-guide--done { border-color: rgb(187 247 208); background: rgb(240 253 244); color: rgb(20 83 45); }
.sw-guide__mark { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 2px solid currentColor; font-weight: 700; }
.sw-guide__text { flex: 1 1 16rem; display: grid; min-width: 0; overflow-wrap: anywhere; }
.sw-guide__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sw-guide__back, .sw-guide__next { padding: .3rem .7rem; border-radius: .5rem; font-weight: 600; white-space: nowrap; }
.sw-guide__back { border: 1px solid currentColor; }
.sw-guide__next { background: var(--primary-600, rgb(37 99 235)); color: #fff; }
.sw-guide__leave { padding: .1rem .45rem; font-size: 1.2rem; line-height: 1; opacity: .7; }
.sw-guide__leave:hover { opacity: 1; }
.dark .sw-guide { background: rgb(23 37 84); border-color: rgb(96 165 250 / .35); color: rgb(191 219 254); }
.dark .sw-guide--done { background: rgb(20 54 34); border-color: rgb(74 222 128 / .3); color: rgb(187 247 208); }

.sw-card { display: grid; gap: .9rem; }
.sw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sw-chip { padding: .25rem .65rem; border-radius: 999px; border: 1px solid rgb(229 231 235); font-size: .82rem; color: rgb(107 114 128); }
.sw-chip.is-done { border-color: rgb(187 247 208); background: rgb(240 253 244); color: rgb(21 128 61); }
.sw-chip.is-next { border-color: var(--primary-600, rgb(37 99 235)); color: var(--primary-700, rgb(29 78 216)); font-weight: 600; }
.sw-card__next h3 { margin: .1rem 0; font-size: 1.1rem; font-weight: 700; }
.sw-card .sw-panel__count, .sw-card .sw-muted { color: rgb(107 114 128); }
.dark .sw-chip { border-color: rgb(255 255 255 / .12); color: rgb(156 163 175); }
.dark .sw-chip.is-done { background: rgb(22 163 74 / .15); border-color: rgb(74 222 128 / .3); color: rgb(134 239 172); }
.dark .sw-chip.is-next { color: rgb(147 197 253); }

/* The top bar on the narrowest phones (320px): Assistant, How do I…?, search, the bell, the light/dark button and the
   person's menu need about 390px with Filament's spacing, so the person's menu was cut off the right edge. Tighter
   spacing below 400px keeps everything on screen. */
/* Whatever the width, the person's menu keeps its size and the search box gives up its room first (down to its
   magnifier). The season picker keeps its whole name; only a very long one is cut short with "…" (the list shows it whole). */
.fi-topbar .fi-topbar-end { min-width: 0; }
.fi-topbar .fi-user-menu { flex: none; }
.fi-topbar .fi-global-search-ctn { min-width: 2.75rem; }
.fi-topbar .co-season-picker--topbar { flex: none; }
.fi-topbar .co-season-picker--topbar select { max-width: 15rem; text-overflow: ellipsis; }
@media (max-width: 25rem) {
  .fi-topbar { padding-inline: .75rem; }
  .fi-topbar .fi-topbar-open-sidebar-btn, .fi-topbar .fi-topbar-close-sidebar-btn { margin-inline-end: .5rem; }
  .fi-topbar-end { column-gap: .5rem; }
  .co-howdoi__button { margin-inline-end: 0; }
  .co-theme-toggle { width: 2rem; }
  /* The search box is only its magnifier here (it opens wide when tapped); it must not take the person's menu's room. */
  .fi-topbar .fi-global-search-ctn { flex: 0 1 auto; min-width: 0; }
  .fi-topbar .fi-global-search-field .fi-input { padding-inline-end: 0; }
}

/* Support as a side panel over the screen (filament.office.support-drawer), like the studio's old widget. */
.co-support-drawer__backdrop { position: fixed; inset: 0; z-index: 55; background: rgb(15 23 42 / .3); }
.co-support-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 56; width: min(30rem, 100%); display: flex; flex-direction: column; background: rgb(248 250 252); color: rgb(15 23 42); box-shadow: -16px 0 40px -16px rgb(0 0 0 / .35); }
.co-support-drawer--in { transition: transform .2s ease-out; }
.co-support-drawer--from { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .co-support-drawer--in { transition: none; } }
.co-support-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid rgb(226 232 240); background: #fff; }
.co-support-drawer__head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.co-support-drawer__close { font-size: 1.6rem; line-height: 1; padding: .1rem .5rem; border-radius: .5rem; background: none; border: 0; color: rgb(100 116 139); cursor: pointer; }
.co-support-drawer__close:hover { background: rgb(241 245 249); color: inherit; }
.co-support-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.5rem; overscroll-behavior: contain; }
.co-support-recording { position: fixed; right: 1rem; bottom: 1rem; z-index: 57; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; border: 0; background: rgb(200 55 45); color: #fff; font-weight: 600; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .45); cursor: pointer; }
.co-support-recording span { width: .6rem; height: .6rem; border-radius: 999px; background: #fff; }
.dark .co-support-drawer { background: rgb(17 24 39); color: rgb(241 245 249); }
.dark .co-support-drawer__head { background: rgb(24 24 27); border-color: rgb(255 255 255 / .1); }
.dark .co-support-drawer__close:hover { background: rgb(255 255 255 / .06); }