@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --brand: #003f87;
  --brand-dark: #002a5c;
  --page: #f3f5f8;
  --soft: #e3e8ef;
  --campfire: #d9651c;
  --ink: #1c2430;
  --muted: #5a6472;
  --line: #d5dbe4;
  --card: #ffffff;
  --late: #b3261e;
  --warn: #9a6200;
}
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--page); }
a { color: var(--brand); }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 0 0 12px; }
main { max-width: 1500px; margin: 0 auto; padding: 24px 20px 60px; }
main.narrow { max-width: 980px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.late { color: var(--late); font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }

.top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--brand); color: #fff; padding: 10px 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand img { width: 60px; height: 60px; object-fit: contain; }
.brand strong { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.brand small { display: block; font-size: 13px; opacity: .85; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.top nav a { color: #fff; text-decoration: none; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.top nav a:hover { background: var(--brand-dark); }
.top nav a.on { background: var(--page); color: var(--brand-dark); }
.who { display: flex; align-items: center; gap: 8px; }
.who .muted { color: #d5e2f3; }
.who select { font-size: 15px; padding: 6px 8px; min-height: 0; width: auto; }

button, .button { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--brand); background: #fff; color: var(--brand); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .button:hover { background: #e6eef8; }
button.primary { background: var(--brand); color: #fff; }
button.primary:hover { background: var(--brand-dark); }
button.link { border: 0; background: none; color: inherit; text-decoration: underline; padding: 4px; }
.top button.link { color: #d5e2f3; }
input, select, textarea { font: inherit; width: 100%; padding: 9px 10px; border: 1.5px solid #aab3c0; border-radius: 8px; background: #fff; min-height: 44px; }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; accent-color: var(--brand); flex: none; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; padding: 4px 0; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.tag { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tag-pack { background: #dbe9fb; color: #0f3f77; }
.tag-troop { background: #dcefd0; color: #24500c; }
.tag-crew { background: #fbe6c2; color: #6a3d00; }
.pill { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 6px; color: #fff; white-space: nowrap; }
.pill.plain { background: var(--soft); color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--soft); border-radius: 999px; padding: 3px 10px; font-size: 14px; margin: 0 6px 6px 0; }
.chip button { border: 0; background: none; padding: 0 2px; font-size: 18px; line-height: 1; color: var(--ink); }
.chips { margin-bottom: 6px; }

ul.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task-text { flex: 1; }
.task.done .task-text { text-decoration: line-through; color: var(--muted); }
.due { font-size: 14px; color: var(--muted); white-space: nowrap; }
.due.late { color: var(--late); }
.empty { color: var(--muted); margin: 0; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 14px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--line); }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }

/* Board */
.board { display: grid; grid-template-columns: repeat(7, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--soft); border-radius: 12px; display: flex; flex-direction: column; min-height: 320px; }
.col-head { color: #fff; border-radius: 12px 12px 0 0; padding: 10px 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
.col-head small { flex-basis: 100%; font-size: 12.5px; opacity: .9; }
.col-head strong { font-size: 16px; }
.col-head .count { background: rgba(255,255,255,.25); border-radius: 999px; padding: 0 9px; font-size: 14px; font-weight: 600; }
.col-body { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.col.over, .zone.over { outline: 3px dashed var(--campfire); outline-offset: -3px; }
.card { background: #fff; border-radius: 10px; border: 1px solid var(--line); border-left: 6px solid var(--stage, #888); padding: 10px 12px; cursor: grab; }
.card:active { cursor: grabbing; }
.card.dragging { opacity: .4; }
.card h3 { font-size: 16px; margin: 0 0 2px; line-height: 1.3; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 6px 0 0; font-size: 14px; line-height: 1.35; }
.card .sub { color: var(--muted); margin-top: 0; }
.card .tags { margin-top: 6px; }
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.zone { background: #fff; border: 2px dashed #aab3c0; border-radius: 12px; padding: 12px 14px; }
.zone h3 { margin: 0; font-size: 16px; }
.zone ul { margin: 8px 0 0; padding-left: 18px; font-size: 15px; }
.zone li { margin-bottom: 4px; }

/* Events */
.event { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: start; }
.event .when { background: var(--brand); color: #fff; border-radius: 10px; text-align: center; padding: 8px 4px; font-weight: 600; line-height: 1.25; }
.event .when small { display: block; font-weight: 400; font-size: 13px; opacity: .9; }
.event h2 { margin-bottom: 4px; }
.event p { margin: 4px 0; }
.event .do { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }
.fill { font-weight: 600; }
.fill.short { color: var(--campfire); }
.fill.full { color: var(--brand); }
@media (max-width: 720px) { .event { grid-template-columns: 1fr; } }

details.group { border-bottom: 1px solid var(--line); }
details.group:last-child { border-bottom: 0; }
details.group summary { display: grid; grid-template-columns: 1fr 80px 80px 100px; gap: 8px; padding: 12px 4px; cursor: pointer; align-items: center; list-style: none; }
details.group summary::-webkit-details-marker { display: none; }
details.group summary:hover { background: var(--page); }
details.group .inner { padding: 0 4px 12px 16px; }
.cols-head { display: grid; grid-template-columns: 1fr 80px 80px 100px; gap: 8px; padding: 0 4px 8px; font-size: 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--line); }
.seg { display: inline-flex; border: 1.5px solid var(--brand); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; }
.seg button.on { background: var(--brand); color: #fff; }

.dialog { border: 0; border-radius: 14px; padding: 24px; width: min(520px, 92vw); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.dialog::backdrop { background: rgba(0, 42, 92, .55); }
.dialog h2 { font-size: 22px; }
.field { margin-bottom: 14px; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.error { color: var(--late); font-weight: 600; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--brand-dark); color: #fff; padding: 12px 20px; border-radius: 10px; font-weight: 600; z-index: 50; max-width: 90vw; }
.note { background: #fff7e0; border: 1px solid #e8d48a; border-radius: 10px; padding: 10px 14px; font-size: 15px; margin-bottom: 20px; }
dl.facts { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }

/* Units worksheet */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters button { padding: 6px 12px; border-radius: 999px; font-size: 15px; }
.filters button.on { background: var(--brand); color: #fff; }
.filters button span { opacity: .75; font-weight: 400; margin-left: 4px; }
.stats { display: flex; gap: 28px; flex-wrap: wrap; }
.stats div { font-size: 14px; color: var(--muted); }
.stats strong.up { color: #2c6e12; }
.stats strong { display: block; font-size: 24px; color: var(--ink); line-height: 1.2; }
table.dense { font-size: 14.5px; font-variant-numeric: tabular-nums; }
table.dense th { padding: 6px 8px; white-space: nowrap; position: sticky; top: 0; background: var(--card); }
table.dense th button { border: 0; background: none; padding: 0; color: inherit; font-size: inherit; }
table.dense td { padding: 3px 8px; vertical-align: middle; white-space: nowrap; }
table.dense tr:hover td { background: #f1f5fa; }
table.dense td.clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.dense td.num { text-align: right; }
table.dense th.num { text-align: right; }
.cell { border: 1px dashed transparent; background: none; font-weight: 400; color: var(--ink); padding: 4px 6px; width: 100%; text-align: left; min-height: 30px; border-radius: 6px; font-size: inherit; overflow: hidden; text-overflow: ellipsis; }
.cell:hover { border-color: #aab3c0; background: #fff; }
.cell.blank { color: transparent; }
.cell.blank:hover { color: var(--muted); }
.flag { border: 0; background: none; padding: 2px 6px; font-size: 18px; color: #c2c9d3; line-height: 1; }
.flag.on { color: var(--campfire); }
.badge-new { background: var(--campfire); color: #fff; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.mtag { background: var(--soft); border-radius: 4px; padding: 1px 6px; font-size: 13px; margin-right: 4px; }
.up { color: #2c6e12; font-weight: 600; }
.down { color: var(--late); font-weight: 600; }

/* Digest preview */
.mail { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mail-head { background: var(--brand); color: #fff; padding: 18px 24px; }
.mail-head h2 { color: #fff; margin: 0; }
.mail-body { padding: 8px 24px 24px; }
.mail-body h3 { font-size: 17px; margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.mail-meta { max-width: 640px; margin: 0 auto 12px; font-size: 15px; }

/* Board density: S1 leads are one line each, later stages are full cards */
.col.packed .col-body { gap: 4px; padding: 8px 6px; }
.card.tight { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-left-width: 4px; border-radius: 6px; }
.card.tight h3 { flex: 1; min-width: 0; margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.tight .tag { font-size: 11px; padding: 0 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #d99a00; flex: none; }

/* Youth pipeline scoreboard at the top of the board */
.scoreboard { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 12px; margin-bottom: 22px; }
.score { display: flex; align-items: center; gap: 16px; background: var(--brand-dark); color: #fff; border-radius: 14px; padding: 16px 22px; }
.score strong { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.score span { font-size: 17px; font-weight: 700; line-height: 1.25; }
.score small { display: block; font-size: 13px; font-weight: 500; opacity: .8; }
.score.lead { background: #c2540f; }
.score.done { background: none; padding: 0 0 10px; }
.zone.grad { background: #2c6e12; border: 2px dashed rgba(255,255,255,.7); color: #fff; }
.zone.grad h3 { color: #fff; }
.zone.grad p { margin: 2px 0 0; opacity: .9; }
.zone.grad.over { outline-color: #fff; }
.score.lead strong { font-size: 60px; }
.score.lead span { font-size: 20px; }
@media (max-width: 1150px) { .scoreboard { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .scoreboard { grid-template-columns: 1fr; } }

/* Collapse and expand */
.card { cursor: pointer; }
.card:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.chev { display: inline-block; width: 14px; color: var(--muted); font-size: 12px; }
.col-toggle { border: 0; background: rgba(255,255,255,.2); color: #fff; padding: 0 7px; border-radius: 6px; font-size: 14px; margin-right: 6px; line-height: 1.5; }
.col-toggle:hover { background: rgba(255,255,255,.4); }

/* Cards carry a light tint of their column's color */
.board .card { background: color-mix(in srgb, var(--stage) 10%, #fff); border-color: color-mix(in srgb, var(--stage) 28%, #fff); border-left-color: var(--stage); }

/* Card actions */
.card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px !important; }
.card-actions button { padding: 3px 10px; font-size: 13px; border-width: 1px; background: #fff; }
.card-actions a { font-size: 13px; margin-left: auto; }
.pencil { border: 0; background: none; padding: 0 2px; font-size: 15px; color: var(--muted); line-height: 1; }
.pencil:hover { color: var(--brand); background: none; }

.crumbs { display: flex; gap: 8px; align-items: center; font-size: 15px; margin-bottom: 10px; color: var(--muted); }
.crumbs a { font-weight: 700; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Column headers share one row so they are all the same height, even when a name wraps */
.board { grid-template-rows: auto 1fr; }
.col { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
.col-head { align-content: start; }
.col, .col-head, .col-body { min-width: 0; }

/* Always-editable details on the unit page */
.edit-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.edit-grid label { margin: 0; font-weight: 500; color: var(--muted); }
.edit-grid input, .edit-grid select { min-height: 38px; padding: 6px 10px; }
@media (max-width: 520px) { .edit-grid { grid-template-columns: 1fr; gap: 2px; } .edit-grid input, .edit-grid select { margin-bottom: 8px; } }

.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-actions label { margin: 0; font-size: 14px; color: var(--muted); }
.head-actions select { width: auto; min-height: 40px; }

/* Collapsed cards are two lines: the place, then number, kind, and youth */
.card.tight { display: block; padding: 5px 8px; }
.card.tight h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.tight .row2 { display: flex; align-items: center; gap: 6px; margin: 2px 0 0 14px; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.card.tight .row2 > * { flex: none; }
.card.tight .row2 .pencil { margin-left: auto; }

/* Event summary on an expanded board card */
.card-event { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 6px 8px; border: 0; border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0; background: rgba(255,255,255,.75); font-weight: 400; color: var(--ink); font-size: 13px; line-height: 1.35; }
.card-event:hover { background: #fff; }
.card-event strong, .card-event span { display: block; }
.card-event strong { font-size: 13.5px; }
.card-actions a { margin-left: 0; flex-basis: 100%; text-align: right; }

.score.win { background: #2c6e12; }
.score.win a { color: #fff; }