/* Raptors design system: matches tryouteval.chippewavalleyraptors.com */
:root { --navy: #0c192e; --navy-deep: #070f1c; --navy-2: #12264a; --lime: #4cb049; --lime-dark: #3a8a37; --green-soft: #d4edcf; --lgray: #e4e4ec; --stitch: #c8102e; --amber: #f0a020; --paper: #f0f0f4; --chalk: #f4f4f8; --ink: #0c192e; --muted: #5a5f72; --line: #d4d4de; --radius: 10px; --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --body: "Barlow", system-ui, "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); }
button { font-family: inherit; }
/* ---------- App bar ---------- */
.appbar { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; border-bottom: 3px solid var(--lime); box-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.appbar-inner { max-width: 640px; margin: 0 auto; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.appbar-inner.wide { max-width: 980px; }
.appbar-inner.xwide { max-width: 1280px; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.appbar-logo { flex: none; filter: drop-shadow(0 0 10px rgba(76, 176, 73, .35)); }
.spacer { flex: 1; }
.who { text-align: right; font-size: 12px; line-height: 1.25; opacity: .9; min-width: 0; }
.who b { display: block; font-size: 13px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who form { margin: 0; }
.link-btn { background: none; border: 0; padding: 2px 0; color: var(--lime); font: 600 13px var(--body); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
/* ---------- Bottom nav ---------- */
/* ---------- Page + cards ---------- */
.page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 16px 14px 96px; }
.panel { background: #fff; }
h1 { font: 900 30px/1.05 var(--display); margin: 0 0 10px; color: var(--navy); text-transform: uppercase; }
h2 { font: 700 22px/1.1 var(--display); margin: 28px 0 12px; color: var(--navy); text-transform: uppercase; }
.lede { margin: 0 0 18px; max-width: 36em; }
.muted { color: var(--muted); font-size: 15px; }
a { color: var(--navy-2); }
/* ---------- Forms ---------- */
.stack { display: flex; flex-direction: column; gap: 10px; }
label { font-weight: 600; font-size: 13px; }
input { width: 100%; font: inherit; font-size: 16px; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-transform: none; letter-spacing: normal; }
.btn { display: inline-block; font: 700 20px/1 var(--display); text-transform: uppercase; letter-spacing: 1px; background: var(--lime); color: #fff; border: 0; border-radius: var(--radius); padding: 15px 26px; margin-top: 6px; cursor: pointer; text-decoration: none; text-align: center; box-shadow: inset 0 -4px 0 var(--lime-dark); }
.stack .btn { width: 100%; }
.btn:hover { background: var(--lime-dark); }
.btn:focus-visible, a:focus-visible, .link-btn:focus-visible, button:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-form div { display: flex; flex-direction: column; gap: 6px; }
.grid-form .full { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .grid-form { grid-template-columns: 1fr; }
}
/* ---------- Messages ---------- */
.alert, .notice { padding: 12px 14px; border-radius: 8px; margin: 0 0 16px; font-weight: 600; font-size: 15px; }
.alert { background: #fde8eb; color: #8e0b20; border-left: 4px solid var(--stitch); }
.notice { background: var(--green-soft); color: var(--navy); border-left: 4px solid var(--lime); }
.devbox { margin-top: 20px; padding: 14px; border: 2px dashed var(--amber); border-radius: 8px; }
.devbox p { margin: 0 0 6px; font-size: 14px; color: inherit; opacity: .8; }
/* ---------- Lists, tables ---------- */
.empty { background: var(--paper); border-radius: var(--radius); padding: 16px 18px; }
.empty p { margin: 0 0 8px; }
.empty p:last-child { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--line); }
/* ---------- Sign-in gate (matches the tryout app's admin gate) ---------- */
body.gate { background: var(--navy-deep); color: #fff; justify-content: center; align-items: center; padding: 24px 16px; }
.gate-box { width: 100%; max-width: 380px; text-align: center; }
.gate-logo { width: auto; margin: 0 auto 18px; display: block; }
.gate-sub { font: 700 13px var(--body); color: #8fa0b3; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 26px; }
.gate h1 { color: #fff; font-size: 26px; margin: 0 0 10px; }
.gate .lede, .gate p { color: #b6c2d0; }
.gate .muted { color: #8fa0b3; }
.gate strong { color: #fff; }
.gate a { color: var(--lime); }
.gate label { color: #8fa0b3; text-align: left; }
.gate input { background: #1a2f4a; border: 2px solid #334466; color: #fff; border-radius: 10px; padding: 14px 16px; font-size: 18px; text-align: center; }
.gate input::placeholder { color: #6f819a; }
.gate input:focus { border-color: var(--lime); box-shadow: none; }
.gate .btn { width: 100%; }
.gate .alert { text-align: left; }
.gate-card { background: #0f1e36; border: 1px solid #ffffff15; border-radius: 16px; padding: 22px 20px; text-align: center; }
.gate .foot { padding: 28px 0 0; color: #456; }
@media (max-width: 480px) {
  .panel { padding: 16px 14px 18px; }
  h1 { font-size: 26px; }
  .who b { max-width: 120px; }
}
/* ---------- scheduler ---------- */
.page.wide { max-width: 980px; }
.panel + .panel, .back + .panel { margin-top: 18px; }
.page > .notice, .page > .alert { margin-bottom: 14px; }
.back { display: inline-block; margin: 0 0 12px; padding: 7px 12px; border-radius: 8px; background: #fff; border: 1.5px solid var(--line); color: var(--navy); font-weight: 600; font-size: 14px; text-decoration: none; }
.back::before { content: "← "; }
.back:hover { text-decoration: underline; }
.panel > h2:first-child { margin-top: 0; }
.signed { text-align: center; color: var(--muted); font-size: 14px; margin: 18px 0 0; }
.fine { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; font-weight: 400; }
.athlete-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.athlete-head h1 { margin: 0; }
.panel.athlete .btn { margin-top: 18px; }
.chip { font: 700 22px var(--display); background: var(--navy); color: #fff; border-radius: 8px; padding: 2px 12px; box-shadow: inset 0 -3px 0 var(--lime-dark); }
.pill { display: inline-block; font: 700 14px/1.2 var(--display); text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px; border-radius: 6px; background: var(--lgray); color: var(--navy); white-space: nowrap; border: 1px solid transparent; }
.pill.ok { background: var(--green-soft); border-color: var(--lime); color: var(--navy-deep); }
.pill.wait { background: #fdeccb; border-color: var(--amber); color: #5a3a00; }
/* reservation + session lists */
.res-list { list-style: none; margin: 0; padding: 0; }
.res { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.res:last-child { border-bottom: 0; }
.res-when { font-weight: 600; }
.res-what { color: var(--muted); font-size: 15px; }
.res-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.res-side form { margin: 0; }
.res-side .fine { margin: 0; }
.program { margin-top: 26px; padding-top: 4px; }
.program:first-of-type { margin-top: 18px; }
.program h2 { margin-top: 0; }
.rule { background: var(--paper); border-left: 4px solid var(--lime); padding: 10px 12px; border-radius: 0 8px 8px 0; font-size: 14.5px; }
.spots { font-size: 14px; color: var(--muted); }
.btn-small { font: 700 17px/1 var(--display); text-transform: uppercase; letter-spacing: .6px; background: var(--lime); color: #fff; border: 0; border-radius: 8px; padding: 11px 16px; cursor: pointer; min-width: 110px; box-shadow: inset 0 -3px 0 var(--lime-dark); text-align: center; }
.btn-small:hover { background: var(--lime-dark); }
.btn-small:disabled, .btn:disabled { background: var(--lgray); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn-ghost { font: 600 14px var(--body); background: #fff; border: 1.5px solid var(--navy); color: var(--navy); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn-ghost.danger { color: var(--stitch); border-color: var(--stitch); }
.btn-ghost.danger:hover { background: #fdeef0; }
/* admin */
.grid-form label input, .grid-form label select { margin-top: 6px; font-weight: 400; }
select { width: 100%; font: inherit; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks legend { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.check { font-weight: 500; font-size: 15px; text-transform: none; letter-spacing: normal; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); }
.pair { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair div { display: flex; flex-direction: column; gap: 6px; }
.grid-form .full .fine { display: inline; margin-left: 10px; }
td a { font-weight: 600; }
@media (max-width: 560px) {
  .res { flex-direction: column; align-items: stretch; }
  .res-side { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; }
  .grid-form .full .fine { display: block; margin: 6px 0 0; }
}
/* schedule import */
textarea { width: 100%; font: 15px/1.5 var(--body); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink); resize: vertical; }
input[type="file"] { padding: 10px; background: var(--paper); }
.h-sub { font: 500 15px var(--body); margin-left: 8px; text-transform: none; letter-spacing: normal; }
table.import td:first-child, table.import th:first-child { width: 36px; }
table.import input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }
details.warn { background: #fff7e0; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
details.warn summary { cursor: pointer; font-weight: 600; color: #6b4b00; }
details.warn ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
/* ---------- rounds builder ---------- */
.page.xwide { max-width: 1280px; }
.tight { margin: 4px 0 0; }
.head-actions { display: flex; align-items: center; gap: 12px; }
.head-actions form { margin: 0; }
.label-like { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 8px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
table.defaults input { padding: 8px 10px; }
table.defaults td:nth-child(2) { width: 120px; }
.cal { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.day { min-height: 86px; border: 1.5px solid var(--line); border-radius: 8px; padding: 5px; cursor: pointer; background: #fff; display: flex; flex-direction: column; gap: 3px; }
.day:hover { border-color: #9fb0c0; }
.day:focus-visible { outline: 3px solid var(--lime); outline-offset: 1px; }
.day.selected { border-color: var(--navy); background: var(--green-soft); box-shadow: inset 0 -3px 0 var(--lime-dark), inset 0 0 0 1px var(--navy); }
.day.out { background: transparent; border: 1.5px dashed #e3e8ec; cursor: default; }
.chip-s { align-items: center; gap: 2px; line-height: 1.25; background: color-mix(in srgb, var(--c) 30%, #fff); border-left: 4px solid var(--c); }
.chip-s a { color: var(--ink); text-decoration: none; flex: 1; min-width: 0; }
.chip-s a:hover { text-decoration: underline; }
.chip-s form { margin: 0; }
.chip-s .x { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); padding: 0 2px; }
.chip-s .x:hover { color: #8a1820; }
.chip-s .taken { font-weight: 700; font-size: 11px; background: var(--navy); color: #fff; border-radius: 9px; padding: 0 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.link-dark { background: none; border: 0; color: var(--navy-2); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 500; }
.chips, .presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets { width: 100%; margin-top: 4px; }
.act { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; border: 1.5px solid var(--line); border-left: 6px solid var(--c); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.act:has(input:checked) { background: color-mix(in srgb, var(--c) 28%, #fff); border-color: var(--navy); border-left-color: var(--c); }
.act input { accent-color: var(--navy); }
.btn:disabled { background: #e8edf2; color: var(--muted); cursor: not-allowed; }
@media (max-width: 640px) {
  .week { grid-template-columns: 1fr; }
  .day.out { display: none; }
  .day { min-height: 0; }
}
/* ---------- round setup steps ---------- */
.setup { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.setup .panel + .panel { margin-top: 0; }
.step h2 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
h3 { font: 600 20px var(--display); color: var(--navy); margin: 22px 0 10px; }
.x { border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--muted); padding: 2px 6px; }
.x:hover { color: #8a1820; }
.inline-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-add label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 120px; }
.inline-add .btn-small { flex: none; }
table.types input { padding: 8px 10px; }
table.types td:nth-child(2) { width: 90px; }
table.types td:nth-child(4) { text-align: center; }
.row-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.row-actions form { margin: 0; }
.radio-row { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 4px 0; }
.radio-row input { width: 18px; height: 18px; accent-color: var(--navy); }
.act.wide { width: 100%; white-space: normal; }
.fine-inline { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--muted); }
@media (max-width: 980px) {
  .setup { grid-template-columns: 1fr; }
}
[hidden] { display: none !important; }
.act input, .radio-row input { width: 18px; height: 18px; flex: none; margin: 0; }
.act.wide { justify-content: flex-start; text-align: left; }
/* ---------- seasons, read-only, reports ---------- */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain:disabled input, fieldset.plain:disabled select { background: var(--paper); color: var(--muted); }
.ro form[method="post"]:not(.keep), .ro .inline-add, .ro .chip-s .x { display: none !important; }
.ro .day { cursor: default; }
a.btn-ghost { text-decoration: none; display: inline-block; }
table.rep th.n, table.rep td.n { text-align: right; }
table.rep tfoot td { font-weight: 700; }
@media print {
  .appbar, .no-print, .foot, .back { display: none !important; }
  .page { margin: 0; max-width: none; padding: 0; }
  .panel { box-shadow: none; border: 0; padding: 0; }
  table.rep { font-size: 11px; }
  table.rep td, table.rep th { white-space: normal; padding: 4px; }
  a { color: inherit; text-decoration: none; }
}
/* ---------- setup page ---------- */
.season.done { background: #fbfcfd; }
.rounds { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
details.round { border: 1.5px solid var(--line); background: #fff; }
details.round > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
details.round > summary::-webkit-details-marker { display: none; }
details.round > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.round[open] > summary::before { transform: rotate(90deg); }
.r-name { font: 700 22px var(--display); color: var(--navy); text-transform: uppercase; letter-spacing: .4px; }
.r-dates { color: var(--muted); font-size: 15px; }
.r-stats { font-size: 14px; color: var(--muted); margin-left: auto; }
a.btn-small { text-decoration: none; display: inline-block; }
table.types.compact th, table.types.compact td { padding: 6px; }
.small { font-size: 14px; margin: 0 0 8px; }
.inline-add.wrap { margin-top: 12px; }
.inline-add.wrap select { padding: 12px; }
@media (max-width: 900px) {
  .r-stats { margin-left: 0; width: 100%; }
}
/* ---------- design-system details ---------- */
select, textarea { text-transform: none; letter-spacing: normal; color: var(--ink); font-size: 16px; font-weight: 400; }
.radio-row, .act, .check { text-transform: none; letter-spacing: normal; }
.radio-row, .act { color: var(--ink); font-size: 15px; }
.act:has(input:checked) { box-shadow: inset 0 -3px 0 var(--navy); }
.panel h2:first-child, .step h2 { margin-top: 0; }
details.round { border-radius: var(--radius); }
details.round[open] { border-color: var(--navy); box-shadow: 0 2px 8px rgba(12, 25, 46, .12); }
table.rep thead th { background: var(--navy); color: #fff; border-bottom: 0; }
table.rep tbody tr:nth-child(even) td { background: #fafafc; }
table.rep tfoot td { border-top: 2px solid var(--navy); }
.gate-help { margin: 16px 0 0; font-size: 14px; line-height: 1.5; }
.gate-card h1 { font-size: 26px; }
.gate-card p { margin: 0 0 12px; }
.gate-card .btn { margin-top: 8px; }
/* Section banner, as in the tryout app */
.banner { background: var(--navy); color: #fff; font: 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: 1px; padding: 9px 14px; border-radius: 6px; margin: 0 0 12px; box-shadow: inset 0 -3px 0 var(--lime-dark); }
.program h2.banner { margin-top: 0; }
.panel.athlete + .panel.athlete { margin-top: 14px; }
h3 { text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 420px) {
  .who b { display: none; }
}
/* ---------- time blocks (Cage Time) ---------- */
.block { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.block .btn-small { min-width: 0; width: 100%; padding: 9px 6px; font-size: 15px; }
.block .pill { align-self: center; }
.block.full { background: var(--paper); }
.block.mine { border-color: var(--lime); background: var(--green-soft); }
/* ---------- limits ---------- */
table.limits td, table.limits th { padding: 6px; }
table.limits .lim-n { width: 80px; padding: 8px 10px; }
table.limits .lim-n:disabled { background: var(--paper); color: var(--muted); }
.limits-form .btn-ghost { margin-top: 6px; }
table.types select { padding: 8px; width: auto; }
.limit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.limit-card { border: 1.5px solid var(--line); border-left: 5px solid var(--c); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.lc-name { font: 700 16px var(--display); text-transform: uppercase; letter-spacing: .4px; color: var(--navy); }
.limit-card .lim-n { padding: 7px 9px; }
.limit-card .lim-n:disabled { background: var(--paper); color: var(--muted); }
.limit-card .check { font-size: 13px; }
.limits-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; }
.pill.open-all { background: #e3edff; border-color: #6d8fd6; color: var(--navy); }
.unlock-fields { display: flex; flex-direction: column; gap: 6px; }
.unlock-fields .label-like { margin: 0; }
.unlock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.unlock-row .unlock-n { width: 80px; padding: 9px 10px; }
.unlock-row .unlock-unit { width: auto; padding: 9px 10px; }
.unlock-row .unlock-n:disabled, .unlock-row .unlock-unit:disabled { background: var(--paper); color: var(--muted); }
.unlock-before { font-size: 14px; color: var(--muted); }
/* ---------- settings ---------- */
.w-name { min-width: 150px; }
.move { display: flex; flex-direction: column; }
.move form { margin: 0; }
.move .x { font-size: 11px; padding: 1px 4px; }
.move .x:disabled { opacity: .25; cursor: default; }
.settings-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; margin-top: 18px; align-items: start; }
.settings-2 .panel + .panel { margin-top: 0; }
.list-edit { list-style: none; margin: 0 0 14px; padding: 0; }
.list-edit li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.list-edit li > form { margin: 0; }
.inline-edit { display: flex; gap: 6px; align-items: center; flex: 1; margin: 0; }
.inline-edit input { padding: 8px 10px; max-width: 180px; }
.preset-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); margin: 0; }
.preset-edit .ages { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.preset-edit .w-name { padding: 8px 10px; width: 150px; min-width: 0; }
.preset-edit.new { border-bottom: 0; }
/* ---------- family calendar ---------- */
.usage { margin: 12px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.link-dark.sm { font-size: 12px; }
.block form { margin: 0; }
/* ---------- who's signed up ---------- */
.wl { margin: 10px 0 4px; }
.going { font-size: 14px; color: var(--ink); margin-top: 6px; line-height: 1.4; }
.going > span, .going summary { font-weight: 700; color: var(--muted); }
.going summary { cursor: pointer; }
.going.none { color: var(--muted); font-style: italic; }
.going b { color: var(--lime-dark); }
.going.sm { font-size: 11.5px; margin: 0; color: var(--muted); }
.block .going.sm b { color: var(--lime-dark); }
#family .fine-inline { margin-left: 6px; }
.waitlist-check { align-self: flex-end; padding-bottom: 8px; }
/* ---------- Settings tab bar ---------- */
.t-short { display: none; }
/* ---------- schedules, who signs up, sharing, public sheets ---------- */
table.levels td { vertical-align: top; }
table.levels td.def { white-space: normal; min-width: 240px; color: var(--ink); font-size: 14px; }
table.levels input { padding: 8px 10px; min-width: 120px; }
.mode-form fieldset { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.mode-opt { flex: 1 1 220px; display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; text-transform: none; letter-spacing: normal; color: var(--ink); font-size: 15px; cursor: pointer; }
.mode-opt.on, .mode-opt:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--lime-dark); }
.mode-opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.mode-opt b { display: block; font: 700 16px var(--display); text-transform: uppercase; letter-spacing: .3px; color: var(--navy); }
.mode-opt .fine { margin-top: 2px; }
.mode-form .btn-ghost { align-self: center; }
.share-box { display: flex; gap: 14px; align-items: center; margin-top: 12px; background: var(--paper); border-radius: var(--radius); padding: 12px; flex-wrap: wrap; }
.share-box img { background: #fff; border-radius: 8px; padding: 4px; }
.share-main { flex: 1; min-width: 220px; }
.share-row input { padding: 8px 10px; font-size: 14px; }
/* ---------- schedule-scoped settings ---------- */
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip-filter a { text-decoration: none; font: 700 14px var(--display); text-transform: uppercase; padding: 5px 10px; border-radius: 6px; border: 1.5px solid var(--line); color: var(--navy); background: #fff; }
.chip-filter a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.inline-group { margin: 0; }
.inline-group select { width: auto; padding: 6px 8px; font-size: 14px; }
select[multiple] { padding: 6px; }
/* ---------- Settings home ---------- */
.home-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.home-head .head-actions { display: flex; gap: 8px; }
.list-title { margin: 22px 2px 10px; }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.sched-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); border-top: 5px solid var(--lime); transition: border-color .12s, box-shadow .12s; }
.sched-card:hover { border-color: var(--navy); border-top-color: var(--lime); box-shadow: 0 4px 14px rgba(12, 25, 46, .12); }
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-name { font: 900 26px/1 var(--display); text-transform: uppercase; color: var(--navy); letter-spacing: .4px; }
.sc-levels { font-size: 13px; color: var(--muted); font-weight: 600; }
.sc-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.sc-stats b { color: var(--navy); font-size: 16px; }
.sc-next { font-size: 14px; color: var(--navy); background: var(--paper); border-radius: 6px; padding: 6px 8px; }
.archived { margin-top: 18px; }
.archived summary { cursor: pointer; font-weight: 700; color: var(--navy-2); }
.crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.crumb { text-decoration: none; font-weight: 700; font-size: 14px; color: var(--navy-2); background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.crumb:hover { border-color: var(--navy); }
/* ---------- board cards with actions ---------- */
.sched-card { padding: 0; }
.sc-main { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 10px; text-decoration: none; color: inherit; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 18px 14px; border-top: 1px solid var(--line); }
.sc-actions form { margin: 0; }
.sc-actions .btn-small { min-width: 0; padding: 8px 14px; font-size: 15px; text-decoration: none; }
.sc-actions .btn-ghost { padding: 7px 12px; }
.sched-card.is-archived { border-top-color: var(--lgray); background: #fbfbfd; }
.archived-link { margin: 18px 4px 0; }
.archived-link a { font-weight: 700; color: var(--navy-2); }
.copy-form .mode-opt { flex: none; }
label .fine { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--muted); }
.sc-main { flex: 1; }
/* ---------- tags ---------- */
.tag-boxes { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.tag-box { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--body); text-transform: none; letter-spacing: normal; color: var(--muted); border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 4px; cursor: pointer; }
.tag-box input { width: 14px; height: 14px; margin: 0; accent-color: var(--navy); }
.tag-box.on { color: var(--navy); border-color: var(--navy); background: #eef3ff; }
.tag-filter { border-style: dashed !important; }
.bulk-tag { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.bulk-tag select { width: auto; padding: 7px 8px; }
.bulk-tag .label-like { margin: 0; }
.only-for { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.claim-pill { display: inline-block; margin-top: 4px; font-size: 11px; }
.people-row td { background: var(--paper); }
/* ---------- board settings: numbered steps ---------- */
.steps { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.steps a { flex: 1 1 0; min-width: 130px; display: flex; align-items: center; gap: 8px; text-decoration: none; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 10px; color: var(--navy); }
.steps a:hover { border-color: var(--navy); }
.steps a[aria-current="step"] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--lime-dark); }
@media (max-width: 700px) {
  .steps a { min-width: 120px; }
}
/* ---------- calendar / list switch ---------- */
.explain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.explain > div { background: var(--paper); border-radius: var(--radius); padding: 12px 14px; font-size: 15px; }
.explain .fine { margin-top: 6px; }
@media (max-width: 700px) {
  .explain { grid-template-columns: 1fr; }
}
.banner-sum { cursor: pointer; font: 800 18px var(--display); text-transform: uppercase; color: var(--navy); }
.need { border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; font-size: 15px; }
.need.yes { background: #fff6e5; border-left: 5px solid #e69a4a; }
.need.no { background: #eef7ea; border-left: 5px solid var(--lime); }
.mode-opt .fine strong { font-weight: 700; color: var(--navy); }
/* ---------- Claim It logo ---------- */
.gate-brand { margin: 0 0 4px; line-height: 0; }
.gate-logo { width: min(420px, 92vw); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.appbar-logo { width: auto; display: block; }
.appbar-logo { height: 60px; margin: -6px 0; }
@media (max-width: 420px) {
  .appbar-logo { height: 52px; }
}
/* ---------- New claim board: compact structure cards ---------- */
.copy-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.copy-from select { width: auto; padding: 7px 8px; }
.copy-from .label-like { margin: 0; }
.copy-from .fine { flex-basis: 100%; }
/* ---------- 1-2 level board page: numbered steps ---------- */
/* ---------- New page: grouped board options ---------- */
/* =====================================================================
   Modern theme: soft cards, Inter for text, tinted selections with ✓.
   Barlow Condensed stays for titles, buttons, and the athletic feel.
   ===================================================================== */
:root { --page: #f4f6fa; --accent: #84cc16; --accent-tint: #f3fae4; --accent-ink: #3f6212; --line: #e1e6ee; --line-strong: #cfd6e2; --text-2: #475569; --muted: #64748b; --body: "Inter", system-ui, "Segoe UI", Arial, sans-serif; --radius: 12px; --shadow: 0 1px 2px rgba(11, 25, 48, .04), 0 4px 14px rgba(11, 25, 48, .05); }
body { background: var(--page); font: 400 15px/1.55 var(--body); }
.panel { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.panel + .panel, .panel + section, section + .panel { margin-top: 16px; }
h1 { letter-spacing: .4px; }
h2 { letter-spacing: .3px; }
.lede { color: var(--text-2); }
.fine, .muted { color: var(--muted); }
/* form fields */
label { font: 600 13px/1.4 var(--body); text-transform: none; letter-spacing: 0; color: #334155; }
.label-like, .checks legend { font: 700 12px var(--body) !important; letter-spacing: .6px !important; text-transform: uppercase; color: var(--muted) !important; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input:not([type]), select, textarea { border: 1px solid var(--line-strong); border-radius: 8px; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(132, 204, 22, .25); }
/* buttons */
.btn-ghost { border-width: 1px; border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--navy); background: #fff; }
.btn, .btn-small { box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
/* choice cards everywhere: tinted when selected, with a check */
.mode-opt, .choice { border: 1px solid var(--line-strong) !important; border-radius: 10px !important; background: #fff; box-shadow: none !important; transition: border-color .12s, background .12s; position: relative; }
.mode-opt:hover, .choice:hover { border-color: #9aa6b8 !important; }
.mode-opt:has(input:checked), .choice:has(input:checked) { border-color: var(--accent) !important; background: var(--accent-tint) !important; }
.mode-opt:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 12px/20px var(--body); text-align: center; }
.mode-opt b { padding-right: 24px; }
.mode-opt input { accent-color: var(--accent-ink); }
/* admin: lighter section headings instead of solid navy bars */
.admin-area .banner { background: none; color: var(--navy); box-shadow: none; border-left: 4px solid var(--accent); border-radius: 0; padding: 2px 0 2px 10px; font: 800 18px/1.2 var(--display); letter-spacing: .5px; }
.admin-area .steps a { border-width: 1px; border-radius: 10px; }
.admin-area .steps a[aria-current="step"] { box-shadow: none; }
.admin-area .round { border-width: 1px; }
.admin-area .sched-card { border: 1px solid var(--line); border-top: 4px solid var(--accent); box-shadow: var(--shadow); }
.admin-area .limit-card { border-width: 1px; }
.admin-area .tag-box.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
.admin-area .tip, .admin-area .explain > div { background: #f8fafc; border: 1px solid var(--line); }
.admin-area table th { font: 700 12px var(--body); letter-spacing: .5px; color: var(--muted); }
/* ---------- New claim board wizard ---------- */
.wizard { max-width: 780px; margin: 0 auto; }
.wz-progress { list-style: none; display: flex; padding: 0; counter-reset: s; }
.wz-progress li { flex: 1; display: flex; border-radius: 10px; }
.wz-progress li span { width: 24px; height: 24px; border-radius: 50%; place-items: center; background: #dfe5ee; color: var(--muted); font-size: 13px; }
.wz-progress li.on { background: var(--accent-tint); }
.wz-progress li.on span { background: var(--accent); color: #fff; }
.wz-progress li.now { box-shadow: inset 0 0 0 1.5px var(--accent); }
.wz-step h2 { margin: 0 0 4px; color: var(--navy); }
.wz-step .field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.wz-step .field input { font-size: 17px; }
.tip { font-size: 14px; color: var(--text-2); }
.tip b { margin-right: 6px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-row.three { grid-template-columns: repeat(3, 1fr); }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer; text-transform: none; letter-spacing: 0; font: 400 13px/1.4 var(--body); color: var(--text-2); }
.choice > input { position: absolute; opacity: 0; pointer-events: none; }
.choice-body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding-right: 22px; }
.choice-body b { font: 700 16px var(--display); text-transform: uppercase; letter-spacing: .3px; color: var(--navy); }
.choice-body b em { font: 600 12px var(--body); font-style: normal; color: var(--muted); text-transform: none; margin-left: 4px; }
.choice-body .lv { font-weight: 600; color: var(--navy-2); }
.choice-body .ex { font-style: italic; font-size: 12px; color: var(--muted); }
.choice-icon { font-size: 26px; line-height: 1; width: 40px; height: 40px; display: grid; place-items: center; background: #f1f4f8; border-radius: 10px; flex: none; }
.choice:has(input:checked) .choice-icon { background: #fff; }
.choice-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); font: 800 12px/18px var(--body); text-align: center; color: transparent; }
.choice:has(input:checked) .choice-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(132, 204, 22, .35) !important; }
.wizard .q { border: 0; padding: 0; margin: 16px 0 0; }
.wizard .q legend { font: 800 15px var(--display); text-transform: uppercase; letter-spacing: .4px; color: var(--navy); margin-bottom: 8px; padding: 0; }
.wz-summary { margin-top: 18px; background: #0c192e; color: #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.wz-summary .label-like { color: var(--accent) !important; }
.wz-summary p { margin: 4px 0 0; font-size: 14px; }
.wz-summary b { color: #fff; }
.wz-nav { display: flex; align-items: center; gap: 10px; padding-top: 16px; }
.wz-nav .spacer { flex: 1; }
.wz-nav .btn-small { justify-content: center; }
@media (max-width: 640px) {
  .choice-grid, .choice-row, .choice-row.three { grid-template-columns: 1fr; }
  .wz-progress li { font-size: 13px; padding: 8px; }
  .panel { padding: 18px 16px; }
}
table.places input { padding: 7px 9px; min-width: 160px; }
table.places input.addr { min-width: 280px; }
.place-add .grow { flex: 2 1 280px; }
.loc-link { font-weight: 600; color: var(--navy-2); text-decoration: none; white-space: nowrap; }
.loc-link:hover { text-decoration: underline; }
.used-n { font-size: 13px; color: var(--muted); font-weight: 600; }
/* ---------- top navigation (computers) ---------- */
@media (min-width: 900px) {
  body { padding-bottom: 0 !important; }
}
/* =====================================================================
   Admin pages: clean app style (sentence-case headings in Inter)
   ===================================================================== */
.admin-area h1 { font: 700 26px/1.2 var(--body); text-transform: none; letter-spacing: -.01em; color: var(--navy); }
.admin-area h2 { font: 700 18px/1.3 var(--body); text-transform: none; letter-spacing: -.005em; color: var(--navy); }
.admin-area h3 { font: 600 16px var(--body); text-transform: none; letter-spacing: 0; }
.admin-area .banner, .admin-area .sc-name, .admin-area .banner-sum, .admin-area .wz-step h2, .admin-area .r-name, .admin-area .lc-name, .admin-area .mode-opt b, .admin-area .choice-body b, .admin-area .wizard .q legend { font-family: var(--body) !important; text-transform: none !important; letter-spacing: 0 !important; }
.admin-area .banner { font-weight: 700 !important; font-size: 17px !important; }
.admin-area .sc-name { font-weight: 700; font-size: 20px; }
.admin-area .mode-opt b, .admin-area .choice-body b { font-weight: 600; font-size: 15px; }
.admin-area .btn, .admin-area .btn-small, .admin-area .btn-ghost, .admin-area .steps a { font-family: var(--body) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
.admin-area .btn-small { border-radius: 999px; padding: 9px 18px; }
.admin-area .btn-ghost { border-radius: 999px; padding: 7px 14px; }
.admin-area .pill { font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 999px; }
.pill.warn { border-color: #fed7aa; }
.admin-area .crumb { border-radius: 999px; border-width: 1px; font-weight: 600; }
/* ---------- board page ---------- */
.st-n { font: 700 26px/1.1 var(--body); color: var(--navy); }
.st-l { font-size: 13px; color: var(--muted); }
.board-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); gap: 16px; align-items: start; }
.bc-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.bc-side .panel + .panel { margin-top: 0; }
.bc-head { align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bc-head h2 { margin: 0; }
.edit-rules > summary { display: inline-block; cursor: pointer; list-style: none; }
.edit-rules[open] > summary { margin-bottom: 10px; }
.side-card .share-box { flex-direction: column; align-items: flex-start; }
.side-card .share-row { flex-wrap: wrap; }
@media (max-width: 899px) {
  .board-cols { grid-template-columns: 1fr; }
  .bc-side { position: static; }
}
/* item list rows read like a list, not a spreadsheet */
/* =====================================================================
   New claim board wizard: mockup style
   ===================================================================== */
.wz-progress { gap: 10px; margin: 18px 0 20px; }
.wz-progress li { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; background: none !important; box-shadow: none !important; font: 600 12px var(--body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--muted); }
.wz-progress li::before { content: ""; height: 6px; border-radius: 999px; background: #e5e9f0; }
.wz-progress li.on::before { background: var(--accent); }
.wz-progress li.on { color: var(--navy); }
.wz-progress li span { display: none; }
.wz-step { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.wz-step h2 { font: 700 20px var(--body) !important; text-transform: none !important; margin-bottom: 2px; }
.wz-step .field { font: 600 14px var(--body); color: #334155; }
.wz-step .field input { border-radius: 999px; padding: 12px 18px; background: #fff; }
.tip { background: #fff !important; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-top: 12px; }
.tip b { display: block; color: var(--navy) !important; font-size: 15px; margin-bottom: 4px; }
.tip b::before { content: "💡 "; }
.wz-nav { border-top: 0; margin-top: 16px; }
.wz-nav .btn-small { background: #0b1220; color: #fff; border-radius: 999px; min-width: 0; padding: 11px 22px; box-shadow: none; }
.wz-nav .btn-small:hover { background: #1e293b; }
#wz-next::after { content: " →"; }
.wz-nav .btn-ghost { border-radius: 999px; }
.wz-nav .btn-ghost[disabled] { opacity: .45; cursor: default; }
.choice { background: #fff; }
/* phones: each item becomes a small card instead of a wide table row */
@media (max-width: 640px) {
  .st-n { font-size: 22px; }
}
.items-empty { padding: 6px 2px; }
/* ---------- items and areas (1-2 level boards) ---------- */
.areas { display: flex; flex-direction: column; gap: 14px; }
.area { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; background: #fff; }
.claim-note { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.claim-note input { width: 190px; padding: 8px 10px; font-size: 14px; }
/* ---------- item list: read-only rows, Edit opens the boxes ---------- */
.danger-link { color: #b91c1c !important; background: none; border: 0; cursor: pointer; font-weight: 600; }
/* ---------- rules card: read view + edit mode ---------- */
.rc-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-list > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #eef1f5; padding-bottom: 7px; }
.rc-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rc-list dt { font-size: 13px; color: var(--muted); }
.rc-list dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); text-align: right; }
.rc-form { display: none; }
.rc-form fieldset { border: 0; margin: 0; padding: 0 0 12px; border-bottom: 1px solid #eef1f5; }
.rc-form legend { font: 600 14px var(--body); color: var(--navy); margin-bottom: 6px; padding: 0; }
.rc-form .radio-row { display: flex; align-items: center; gap: 8px; font: 400 14px var(--body); color: var(--text-2); margin: 4px 0; text-transform: none; }
.rc-form input[type=datetime-local] { width: auto; padding: 6px 8px; }
/* publish checklist */
/* add panel stands apart from the list */
.ilist-head { margin: 18px 0 2px; font: 700 15px var(--body); color: var(--navy); }
.area .ilist-head { margin-top: 12px; }
/* edit boxes size to their text */
/* ---------- check-in ---------- */
/* edit row: dropdowns match the text boxes */
/* add form: labels over each field, lined up with the button */
/* example text in every field is light, so it never looks like a typed answer */
::placeholder { color: #a7b0bf !important; font-weight: 400 !important; font-style: normal; opacity: 1; }
/* ---------- Claim Board Setup: one form, section cards, one save bar ---------- */
.setup-form { display: flex; flex-direction: column; gap: 16px; }
.field-l { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.field-l textarea { min-height: 64px; font: 400 14px var(--body); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.field-l .opt { font-weight: 400; color: #94a3b8; }
.opt-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.opt-row.three { grid-template-columns: repeat(3, 1fr); }
.q-label { margin: 14px 0 6px; font: 600 14px var(--body); color: var(--navy); }
.sub-q { margin-top: 4px; padding-left: 12px; border-left: 3px solid #e8eef6; }
@media (max-width: 640px) {
  .opt-row, .opt-row.three { grid-template-columns: 1fr; }
}
/* ---------- Setup: answers with Edit ---------- */
.q-block { border-top: 1px solid #eef1f5; padding: 10px 0; }
.q-sum { display: flex; align-items: baseline; gap: 12px; }
.q-lab { flex: 0 0 210px; font-size: 14px; color: var(--muted); }
.q-val { flex: 1; font-weight: 600; color: var(--navy); }
.q-edit-btn { background: none; border: 0; cursor: pointer; font-weight: 700; color: var(--navy-2); padding: 2px 4px; }
.q-block.open .q-sum .q-val { color: var(--accent-ink); }
.q-edit { margin-top: 10px; }
.q-edit .opt-row { margin-bottom: 4px; }
@media (max-width: 640px) {
  .q-sum { flex-wrap: wrap; }
  .q-lab { flex-basis: 100%; }
}
.q-actions { display: flex; gap: 8px; margin-top: 10px; }
.q-block.open { background: #fbfdf7; margin: 0 -12px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #dcefbd; }
.q-block.just-saved .q-val { background: var(--accent-tint); border-radius: 6px; transition: background .4s; }
.setup-form { padding-bottom: 20px; }
/* ---------- board settings: header, tiles, two columns ---------- */
.h-sub { font-weight: 500; }
.board-cols .setup-form { gap: 16px; }
.chip-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.chip-line .q-lab { flex: 0 0 100%; font-size: 13px; }
.chip-s { font-size: 13px; font-weight: 600; background: #f1f5f9; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--navy); }
.side-card .btn-ghost { margin-top: 4px; }
/* ---------- board settings, v2: inline header edits, one setup panel ---------- */
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.h-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.inl { display: inline-flex; align-items: center; gap: 6px; }
.inl-view { display: inline-flex; align-items: center; gap: 6px; }
.inl-view h1 { margin: 0; }
.pencil { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; }
.pencil:hover { color: var(--navy); background: #eef2f7; }
.inl-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inl-form input { width: auto; padding: 6px 10px; font-size: 14px; }
.inl-form .inl-name { font: 700 22px var(--body); padding: 6px 12px; min-width: 320px; }
.inl-form .btn-small, .inl-form .btn-ghost { padding: 6px 14px; }
.meta { display: inline-flex; align-items: center; gap: 6px; }
.meta b { color: var(--navy); font-weight: 600; }
.meta .ico { color: #94a3b8; }
.setup-panel { padding: 20px 22px; }
.ss { border-top: 1px solid #eef1f5; padding: 16px 0; }
.setup-panel .bc-head + .ss { border-top: 0; padding-top: 4px; }
.ss-head { display: flex; align-items: flex-start; gap: 12px; }
.ss-ico, .card-head .ss-ico { width: 38px; height: 38px; border-radius: 10px; background: #eef4ff; color: #2563eb; display: grid; place-items: center; flex: none; }
.ss-ico .ico { width: 20px; height: 20px; }
.ss-titles { flex: 1; min-width: 0; }
.ss-titles h3 { margin: 0; font: 700 16px var(--body); color: var(--navy); }
.ss-titles .fine { margin: 2px 0 0; }
.ss-edit { display: inline-flex; align-items: center; gap: 6px; }
.ss-rows { margin: 10px 0 0 50px; display: flex; flex-direction: column; }
.ss-rows > div { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid #f1f4f8; }
.ss-rows > div:first-child { border-top: 0; }
.ss-rows dt { flex: 0 0 200px; font-size: 14px; color: var(--muted); }
.ss-rows dd { margin: 0; font-size: 14px; color: var(--navy); }
.ss-form { margin: 12px 0 0 50px; }
.ss.open { background: #fbfdf7; margin: 0 -12px; padding: 16px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px #dcefbd; }
.ss.just-saved .ss-rows { background: var(--accent-tint); border-radius: 8px; transition: background .4s; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-head h2 { flex: 1; margin: 0; }
.card-head .btn-ghost { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; }
@media (max-width: 640px) {
  .ss-rows, .ss-form { margin-left: 0; }
  .ss-rows dt { flex-basis: 120px; }
  .inl-form .inl-name { min-width: 0; width: 100%; }
}
.mode-opt .fine strong, .choice-body span strong { display: inline; font: inherit; font-weight: 700; color: var(--navy); text-transform: none; }
.card-head .pill { font-size: 12px; }
.card-head h2 { text-overflow: ellipsis; min-width: 0; }
.card-head .btn-ghost { flex: none; }
/* Teams & tags page: compact intro, definitions on each card */
.page-intro h1 { margin: 0 0 4px; }
.page-intro .fine { margin: 0; max-width: 760px; }
.copy-from-d { margin-top: 8px; font-size: 14px; }
.copy-from-d > summary { cursor: pointer; color: var(--navy-2); font-weight: 600; }
.copy-from-d .copy-from { border-top: 0; padding-top: 6px; margin-top: 4px; }
.card-def { margin: 0 0 10px; font-size: 14px; color: var(--text-2); }
.explain-1 { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0 12px; font-size: 14px; }
.explain-1 p { margin: 0 0 6px; }
.explain-1 p:last-child { margin: 0; }
.page-help { margin: 4px 0 10px; font-size: 14px; max-width: 760px; }
/* ---------- where am I: trail + Board/Settings tabs ---------- */
/* App settings by the email */
.tag-add { margin-bottom: 10px; background: var(--accent-tint); border: 1px solid #d9efb0; border-radius: 10px; padding: 10px; }
.ex { display: block; margin-top: 3px; font-size: 12px; font-style: italic; color: #8a96a8; }
p.ex { margin: 2px 0 8px; }
.ss-titles .ex { display: block; }
.mode-opt .ex, .choice-body .ex, .ex { font-weight: 400 !important; }
.rc-form select { width: auto; padding: 5px 8px; font-size: 14px; }
/* ---------- board screen: home base ---------- */
.share-pop { position: relative; }
.share-pop > summary { list-style: none; cursor: pointer; }
.share-pop > summary::-webkit-details-marker { display: none; }
.share-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(460px, 90vw); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(11, 25, 48, .18); padding: 12px; }
.bc-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-one { max-width: 900px; }
.side-card .rc-list dd { text-align: right; }
.card-head h2 { white-space: normal; overflow: visible; font-size: 17px; line-height: 1.25; }
/* Save/Cancel sit on the right, with the main action last (Cancel · Save) */
.q-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; }
.rules-fields.ss-form { gap: 14px; }
.rules-fields.ss-form[hidden] { display: none !important; }
.rules-fields.ss-form:not([hidden]) { display: flex !important; flex-direction: column; }
.setup-panel > .ss:first-child { border-top: 0; padding-top: 4px; }
/* ---------- board Edit window (Claim Boards card) ---------- */
.edit-dlg { border: 0; border-radius: 16px; padding: 0; width: min(720px, 94vw); max-height: 90vh; box-shadow: 0 20px 60px rgba(11, 25, 48, .35); }
.edit-dlg::backdrop { background: rgba(11, 25, 48, .45); }
.dlg-form { display: flex; flex-direction: column; max-height: 90vh; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; font: 700 19px var(--body); color: var(--navy); }
.dlg-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.dlg-body { padding: 14px 20px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.dlg-body h3 { margin: 10px 0 0; font: 700 15px var(--body); color: var(--navy); }
.dlg-body .field-l { max-width: none; }
.dlg-body textarea { font: 400 14px var(--body); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg-actions { padding: 12px 20px; border-top: 1px solid var(--line); margin: 0; }
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}
.organizer { margin: 0 0 8px; }
/* ---------- container engine: drill-down Setup ---------- */
.drill { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; margin: -4px 0 14px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.drill a { color: var(--navy-2); font-weight: 600; text-decoration: none; }
.drill a:hover { text-decoration: underline; }
.drill [aria-current] { font-weight: 700; color: var(--navy); }
.drill .sep { color: #b6c0cf; }
.rc-list dd .src { display: block; font-size: 11px; font-weight: 500; color: #94a3b8; }
.node-settings { display: flex; flex-direction: column; gap: 4px; }
.node-settings fieldset { border: 0; border-bottom: 1px solid #eef1f5; margin: 0; padding: 8px 0 10px; }
.node-settings legend { font: 700 14px var(--body); color: var(--navy); padding: 0; margin-bottom: 4px; }
.node-settings .radio-row { display: flex; align-items: center; gap: 8px; font: 400 14px var(--body); color: var(--text-2); margin: 3px 0; }
.node-settings input[type=datetime-local], .node-settings select { width: auto; padding: 5px 8px; }
.node-settings .who-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 26px; }
.node-settings .q-actions { margin-top: 10px; }
.struct-levels { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.struct-levels li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fbfcfe; }
.struct-levels li .fine { grid-column: 1; }
.struct-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; color: var(--navy); font-size: 14px; }
.lock-note { background: #fff8eb; border: 1px solid #fde3b0; border-radius: 10px; padding: 8px 12px; font-size: 14px; color: #7a4a00; margin: 4px 0; }
.wizard .field-l { margin-top: 10px; }
.wizard .field-l input, .wizard .field-l textarea { background: #fff; }
.wz-names { margin-top: 14px; }
.wizard .field-l { max-width: none; }
.dlg-body > * { flex-shrink: 0; }
input[type=time]:disabled { background: #f1f4f8; color: #9aa6b8; cursor: not-allowed; }
/* ---------- board outline (twisties) ---------- */
.tree { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.btn-ghost.sm { padding: 5px 10px !important; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.tbody { padding: 4px 12px 12px 40px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) {
  .tbody { padding-left: 14px; }
}
select.place-picker { width: 100%; padding: 10px 12px; font-size: 15px; }
.place-dlg { width: min(520px, 94vw); z-index: 100; }
.tag-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.field-lbl { display: block; font: 600 13px/1.4 var(--body); color: #334155; margin-bottom: 2px; }
.grid-form .tag-checks label.tag-box { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; width: auto; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font: 600 14px var(--body); color: var(--navy); background: #fff; cursor: pointer; }
.grid-form .tag-checks label.tag-box input { width: auto; margin: 0; }
.grid-form .tag-checks label.tag-box:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.grid-form .tag-checks { display: flex; flex-direction: row !important; flex-wrap: wrap; gap: 6px; }
/* ---------- import people ---------- */
#imp-form textarea { font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.imp-grid { grid-template-columns: repeat(3, 1fr); }
.imp-grid select[multiple] { height: auto; }
.imp-sum { font-size: 15px; color: var(--text-2); }
.pill.info { background: #eef4ff; color: #1d4ed8; border-color: #c7d7fe; }
@media (max-width: 900px) {
  .imp-grid { grid-template-columns: 1fr; }
}
.imp-emails { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; max-height: 170px; overflow: auto; margin: 0; }
.imp-emails .radio-row { display: flex; gap: 6px; align-items: center; font: 400 14px var(--body); margin: 2px 0; text-transform: none; }
/* ---------- add people (top of the people card) ---------- */
.add-people { background: var(--accent-tint); border: 1px solid #d9efb0; border-radius: 12px; padding: 10px 14px 14px; margin: 10px 0 6px; }
.ap-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.ap-tab { background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; font: 600 14px var(--body); color: var(--muted); cursor: pointer; }
.ap-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.add-people .grid-form input, .add-people .grid-form select { background: #fff; }
.ap-actions { display: flex; justify-content: flex-end; }
.ap-search { width: 100%; padding: 8px 12px; margin-bottom: 6px; background: #fff; }
.ap-list { max-height: 220px; overflow: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; }
.ap-person { display: flex; gap: 8px; align-items: center; padding: 4px 0; font: 400 14px var(--body); text-transform: none; color: var(--navy); }
.ap-person[hidden] { display: none; }
.ap-existing label select { background: #fff; }
.ap-person { justify-content: flex-start; }
.ap-person input[type=checkbox] { width: auto !important; flex: none; margin: 0; }
.ap-existing label select, .ap-existing select { max-width: 320px; }
.list-edit input[name=name], .list-edit input[type=text] { min-width: 150px; }
.ap-existing > label { display: flex; flex-direction: column; gap: 4px; font: 600 13px var(--body); color: #334155; text-transform: none; }
/* ---------- People directory ---------- */
.dir-table td { vertical-align: top; font-size: 14px; }
.role-pill { display: inline-block; font: 600 12px var(--body); border-radius: 999px; padding: 1px 8px; margin: 0 4px 2px 0; background: #f1f5f9; color: var(--navy); }
.role-pill.r-athlete { background: #eef4ff; color: #1d4ed8; }
.role-pill.r-parent { background: var(--accent-tint); color: var(--accent-ink); }
.role-pill.r-coach { background: #fff1e6; color: #c2410c; }
.role-pill.r-volunteer { background: #f3e8ff; color: #7e22ce; }
.chip-s.coach { background: #fff1e6; border-color: #fed7aa; color: #9a3412; }
.chip-s { display: inline-block; margin: 0 4px 4px 0; }
.fam-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fam-list li { align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; }
.fam-list form { margin: 0; }
.grid-form textarea { width: 100%; font: 400 14px var(--body); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; }
.add-wrap > summary { list-style: none; display: inline-flex; cursor: pointer; }
.add-wrap > summary::-webkit-details-marker { display: none; }
.add-wrap[open] > summary { margin-bottom: 4px; }
.dir-table td .fine { display: inline; }
.dir-table td:last-child { min-width: 170px; }
.dir-table .chip-s { white-space: normal; }
div.radio-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 3px 0; font: 400 14px var(--body); color: var(--text-2); }
div.radio-row label.rr { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: inherit; color: inherit; text-transform: none; cursor: pointer; }
.foot .ver { margin-bottom: 2px; }
/* Number boxes always have room to show their number (they were being squeezed to ~0 in rows) */
input[type=number] { min-width: 4.5em; flex: none; padding-left: 8px !important; padding-right: 4px !important; }
input.spots-in, .spots-in { width: 5.5em !important; min-width: 5.5em; flex: none; }
div.radio-row input, .radio-row input[type=number], .radio-row input[type=datetime-local], .radio-row select { flex: none; }
.radio-row input[type=datetime-local] { min-width: 13em; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.hub-card { display: flex; flex-direction: column; }
.hub-sum { margin: 2px 0 6px; font-size: 15px; color: var(--navy); }
.hub-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.where-note { display: flex; flex-direction: column; gap: 4px; background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid #7fa7d9; border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text-2); margin-bottom: 12px; }
.where-note > b { color: var(--navy); }
.head-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.head-btns .add-wrap { flex: 1 1 100%; }
.head-btns .add-wrap:not([open]) { flex: 0 0 auto; }
.hub-grid > .panel { margin-top: 0 !important; }
.hub-sum { overflow-wrap: anywhere; }
/* ---------- People lists ---------- */
.lchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; font: 600 14px var(--body); color: var(--navy); background: #fff; text-decoration: none; cursor: pointer; list-style: none; }
.lchip span { font-weight: 700; color: var(--muted); font-size: 12px; }
.lchip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.lchip.on span { color: #cbd5e1; }
.lchip.add { border-style: dashed; color: var(--navy-2); }
.new-list { position: relative; }
.new-list > summary::-webkit-details-marker { display: none; }
.new-list .inline-add { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(11,25,48,.15); width: 340px; }
.list-head { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.list-manage { position: relative; }
.list-manage > summary { list-style: none; cursor: pointer; font-size: 13px; }
.lm-box { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 8px 24px rgba(11,25,48,.15); display: flex; flex-direction: column; gap: 8px; width: 340px; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; opacity: .6; }
.bulk-bar.has { opacity: 1; border-color: var(--accent); background: var(--accent-tint); }
.bulk-bar select, .bulk-bar input { width: auto; padding: 6px 8px; }
.bulk-count { font-weight: 700; color: var(--navy); font-size: 14px; }
.dir-table td input[type=checkbox], .dir-table th input[type=checkbox] { width: auto; }
.lchip-f { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px 4px 0; }
/* ---------- My Claims (people) : big and simple ---------- */
.state { font-weight: 700; color: var(--muted); }
.state.ok { color: var(--accent-ink); }
.claim-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted.big { font-size: 17px; }
.mc-head h1 { margin: 0 0 4px; }
/* ---------- My Claims: a size smaller, with twisties ---------- */
.member-area .panel h2 { font-size: 18px; }
.btn-small.big { font-size: 15px !important; padding: 9px 18px !important; min-height: 40px; }
.state { font-size: 13px; }
.claim-f input { min-width: 160px; padding: 8px 10px; font-size: 15px; }
.mc-head h1 { font-size: 24px; }
/* ---------- My Claims: wider, compact header, person chips ---------- */
.member-area .page.xwide, .page.xwide { max-width: 1200px; }
/* ---------- My Claims: activity sections, standout "Signing up", smaller switch ---------- */
@media (max-width: 640px) {
  .claim-f { width: auto; }
  .claim-f .btn-small.big { flex: none; padding: 9px 16px !important; }
}
/* =====================================================================
   My Claims dashboard (body.dash only). Matches the approved mockup.
   ===================================================================== */
body.dash { --d-navy: #0B1930; --d-lime: #8DDC32; --d-lime-d: #6fbf1c; --d-bg: #F4F6FA; --d-line: #E3E8F0; --d-slate: #5B6B82; --d-r: 12px; --d-sh: 0 1px 2px rgba(11,25,48,.05), 0 4px 14px rgba(11,25,48,.05); background: var(--d-bg); font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif; color: var(--d-navy); }
:where(body.dash) :where(svg) { width: 20px; height: 20px; flex: none; }
/* header */
.dh { background: var(--d-navy); top: 0; }
.dh-in { margin: 0 auto; display: flex; align-items: center; }
.dh-logo img { display: block; }
.dh-nav { display: flex; gap: 6px; align-items: center; }
.dh-nav a { display: inline-flex; align-items: center; color: #fff; text-decoration: none; font: 600 17px Inter, sans-serif; }
.dh-nav a:hover { background: rgba(255,255,255,.07); }
.dh-nav a[aria-current] { background: var(--d-lime); color: var(--d-navy); }
.dh-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.dh-acct { position: relative; }
.dh-acct > summary { list-style: none; display: flex; align-items: center; color: #fff; cursor: pointer; }
.dh-acct > summary::-webkit-details-marker { display: none; }
.dh-acct > summary > svg:last-child { width: 16px; height: 16px; opacity: .8; }
.dh-who { display: flex; flex-direction: column; line-height: 1.25; }
.dh-who b { font: 600 15px Inter, sans-serif; }
.dh-who small { color: #d5dceb; }
.dh-menu { position: absolute; right: 18px; top: calc(100% + 10px); background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(11,25,48,.25); display: flex; flex-direction: column; }
.dh-menu a, .dh-menu button { text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--d-navy); text-decoration: none; font: 500 14px Inter, sans-serif; background: none; border: 0; cursor: pointer; width: 100%; }
.dh-menu a:hover, .dh-menu button:hover { background: var(--d-bg); }
.dh-burger { display: none; margin-left: auto; }
.dh-burger > summary { list-style: none; color: #fff; cursor: pointer; padding: 8px; }
.dh-burger > summary::-webkit-details-marker { display: none; }
.dh-burger > summary svg { width: 28px; height: 28px; }
.dh-sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--d-navy); padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.dh-sheet a, .dh-sheet button { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 8px; color: #fff; text-decoration: none; font: 600 16px Inter, sans-serif; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.dh-sheet a[aria-current] { background: var(--d-lime); color: var(--d-navy); }
.dh-sheet form button { color: var(--d-lime); }
.dh-sheet-who { display: flex; align-items: center; gap: 10px; color: #fff; padding: 10px 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 6px; }
.dh-sheet-who svg { width: 30px; height: 30px; }
.dh-sheet-who span { display: flex; flex-direction: column; }
.dh-sheet-who small { color: #c7d0e0; }
/* page */
.dash-page { flex: 1; width: 100%; }
body.dash .notice, body.dash .alert { max-width: 1632px; margin: 14px auto 0; }
/* welcome banner */
.d-wrap { margin: 0 auto; }
/* alerts */
.d-alerts { display: flex; flex-direction: column; }
.d-alert { display: flex; align-items: center; text-decoration: none; color: var(--d-navy); border: 1px solid; }
.d-alert.blue { background: #EAF2FD; border-color: #B9D4F6; }
.d-alert.green { background: #EEF7EA; border-color: #CFE6C3; }
.d-alert-ic { border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.d-alert.blue .d-alert-ic { background: #3B82F6; }
.d-alert.green .d-alert-ic { background: #4CAF50; }
.d-alert-t { flex: 1; }
.d-alert-t b { font-weight: 700; }
.d-alert .see { color: #1a6fe0; font-weight: 600; white-space: nowrap; }
.d-chev { color: #1d4ed8; display: grid; place-items: center; }
.d-alert:hover { filter: brightness(.985); box-shadow: var(--d-sh); }
/* two columns */
.d-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.d-card { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r); box-shadow: var(--d-sh); }
.d-card-h { display: flex; align-items: center; }
.d-card-ic svg { color: var(--d-navy); }
.d-card-h h2 { margin: 0; font: 700 25px Inter, sans-serif; color: var(--d-navy); flex: 1; letter-spacing: -.01em; }
/* family filter */
.d-fam { display: flex; flex-wrap: wrap; gap: 6px; }
.d-fam a { border-radius: 999px; border: 1px solid #c9d1de; background: #fff; color: var(--d-navy); font: 600 14px Inter, sans-serif; text-decoration: none; }
.d-fam a[aria-current] { background: var(--d-navy); border-color: var(--d-navy); color: #fff; }
/* claims */
.d-group { border: 1px solid var(--d-line); border-radius: 10px; background: #FBFCFE; }
.d-group-h { display: flex; align-items: center; }
.d-group-h > b { font: 700 21px Inter, sans-serif; flex: 1; }
.d-group-s { color: var(--d-slate); }
.d-group-s b { color: var(--d-navy); font-weight: 700; }
.d-thumb { flex: none; border-radius: 6px; overflow: hidden; }
.d-thumb img { display: block; }
.d-claim { display: flex; align-items: stretch; }
.d-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F1F3F7; border: 1px solid var(--d-line); border-radius: 8px; }
.d-date small { font: 500 15px Inter, sans-serif; color: #42526a; letter-spacing: .02em; }
.d-date b { font: 600 16px Inter, sans-serif; color: var(--d-navy); }
.d-claim-b { flex: 1; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid var(--d-line); border-radius: 8px; min-width: 0; }
.d-claim { position: relative; }
.d-claim-t { display: flex; align-items: center; gap: 8px; }
.d-claim-t b { font: 700 19px Inter, sans-serif; }
.d-claim-b > span { color: var(--d-slate); }
.d-cancel { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
.d-cancel button { display: inline-flex; align-items: center; background: #fff; border: 1.5px solid #7b8798; border-radius: 8px; font: 600 15px Inter, sans-serif; color: var(--d-navy); cursor: pointer; }
.d-cancel button svg { color: #d62828; }
.d-cancel button:hover { border-color: #d62828; color: #b91c1c; }
.d-late { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--d-slate); max-width: 110px; text-align: right; }
.d-claim.past { opacity: .6; }
.d-pill { font: 700 11px Inter, sans-serif; border-radius: 999px; padding: 2px 8px; background: #eef1f5; color: var(--d-slate); }
.d-pill.wl { background: #fff4e0; color: #9a5b00; }
.d-more { display: block; text-align: center; padding: 10px; font: 600 15px Inter, sans-serif; color: #1a6fe0; text-decoration: none; }
.d-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 1px dashed #cfd6e2; border-radius: 10px; color: var(--d-slate); }
.d-empty svg { color: #9aa8bd; }
.d-empty b { color: var(--d-navy); }
.d-empty a { color: #1a6fe0; }
/* tabs */
/* board cards */
.d-board { display: flex; align-items: center; border: 1px solid var(--d-line); border-radius: 10px; margin: 0 2px 12px; }
.d-board .d-thumb { border-radius: 8px; }
.d-board-b { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.d-board-b > b { font: 700 21px Inter, sans-serif; }
.d-board-l1 { font-size: 15px; color: var(--d-slate); white-space: pre; }
.d-board-meta { display: flex; flex-wrap: wrap; font-size: 15px; color: var(--d-slate); }
.d-board-meta > span { display: inline-flex; align-items: center; }
.d-board-meta svg { color: #5a6a82; }
.d-board-desc { color: var(--d-slate); }
.d-signup { display: inline-flex; align-items: center; font: 700 17px Inter, sans-serif; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.d-signup { background: #4FB028; color: #0B1930; }
.d-signup:hover { filter: brightness(1.06); }
/* quick access */
.d-q { display: flex; align-items: center; border-radius: var(--d-r); border: 1px solid; text-decoration: none; color: var(--d-navy); }
.d-q.blue { background: #EAF2FD; border-color: #B9D4F6; }
.d-q.green { background: #EEF7EA; border-color: #CFE6C3; }
.d-q .d-chev { color: var(--d-navy); }
.d-q:hover { box-shadow: var(--d-sh); }
/* focus + busy */
body.dash a:focus-visible, body.dash button:focus-visible, body.dash summary:focus-visible { outline: 3px solid #3B82F6; outline-offset: 2px; }
body.dash .busy { opacity: .6; pointer-events: none; cursor: progress; }
body.dash .foot { background: transparent; }
/* ---- responsive ---- */
@media (max-width: 1360px) {
  .dh-in { gap: 16px; }
  .dh-nav a { padding: 0 14px; font-size: 16px; }
}
@media (max-width: 1180px) {
  .dh-nav, .dh-right { display: none; }
  .dh-burger { display: block; }
  .d-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .d-alert { gap: 12px; }
  .d-alert-ic { width: 38px; height: 38px; }
  .d-alert .see { white-space: normal; }
  .d-card { padding: 12px 10px; }
  .d-card-ic svg { width: 28px; height: 28px; }
  .d-group-h > b { font-size: 17px; }
  .d-thumb.sm { width: 52px; height: 38px; }
  .d-group-h { flex-wrap: wrap; gap: 8px 12px; }
  .d-date small, .d-date b { font-size: 13px; }
  .d-claim-t b { font-size: 16px; }
  .d-claim-b > span { font-size: 13px; }
  .d-cancel { top: auto; transform: none; right: 10px; }
  .d-cancel button { padding: 8px 14px; min-height: 40px; }
  .d-late { top: auto; bottom: 12px; transform: none; max-width: none; }
  .d-board { flex-wrap: wrap; gap: 12px; }
  .d-board-b { flex: 1 1 calc(100% - 100px); }
  .d-board-b > b { font-size: 18px; }
  .d-board-l1 { white-space: normal; }
  .d-board-meta { gap: 6px 16px; font-size: 14px; }
  .d-signup { width: 100%; justify-content: center; }
  .d-q { padding: 14px 16px; min-height: 0; }
}
body.dash h1, body.dash h2, body.dash h3 { text-transform: none; font-family: Inter, system-ui, sans-serif; letter-spacing: -.01em; }
.d-thumb { background: radial-gradient(circle at 50% 60%, #1c3557, #0B1930 70%); display: inline-grid; place-items: center; }
.d-thumb img { width: 92%; height: auto; object-fit: contain; }
@media (max-width: 700px) {
  .d-card-h { flex-wrap: nowrap; gap: 8px; }
  .d-card-h h2 { line-height: 1.2; }
  .d-fam { margin-top: 0; }
  .d-fam a { font-size: 13px; padding: 5px 11px; }
}
.img-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.img-prev { width: 120px; height: 90px; border-radius: 10px; overflow: hidden; background: #0B1930; display: grid; place-items: center; flex: none; border: 1px solid var(--line); }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.img-prev.logo img { object-fit: contain; width: 90%; height: auto; }
.img-ctl { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 340px; }
.img-btn { cursor: pointer; }
/* ---------- My Claims dashboard: accent strip + about 20–25% smaller ---------- */
.dh-in { padding: 0 20px; max-width: 1440px; }
.dh-nav a { gap: 8px; border-radius: 6px; }
.dh-nav a svg { width: 18px; height: 18px; }
.dh-acct > summary { gap: 8px; }
.dh-acct > summary > svg:first-child { width: 26px; height: 26px; }
.dh-who b { font-size: 13px; }
.dh-who small { font-size: 12px; }
.d-wrap { max-width: 1440px; padding: 14px 24px 22px; }
.d-alerts { gap: 8px; margin-bottom: 14px; }
.d-alert { height: 46px; gap: 14px; padding: 0 16px 0 10px; border-radius: 10px; }
.d-alert-ic { width: 30px; height: 30px; }
.d-alert-ic svg { width: 16px; height: 16px; }
.d-alert-t { font-size: 15px; }
.d-chev svg { width: 18px; height: 18px; }
.d-cols { gap: 18px; }
.d-card { padding: 12px 12px 10px; }
.d-card-h { gap: 10px; padding: 0 2px 10px; }
.d-card-ic svg { width: 24px; height: 24px; }
.d-card-h h2 { font-size: 19px; }
.d-fam { margin: -2px 2px 10px; }
.d-fam a { font-size: 12px; padding: 4px 11px; }
.d-group { padding: 8px 6px 6px; margin-bottom: 10px; }
.d-group-h { gap: 12px; padding: 0 6px 6px; }
.d-group-h > b { font-size: 16px; }
.d-group-s { font-size: 13px; }
.d-thumb.sm { width: 56px; height: 40px; }
.d-claim { gap: 6px; margin-top: 6px; }
.d-date { width: 76px; padding: 6px 4px; }
.d-date small { font-size: 12px; }
.d-date b { font-size: 13px; }
.d-claim-b { padding: 8px 12px; gap: 2px; }
.d-claim-t b { font-size: 15px; }
.d-claim-b > span { font-size: 13px; }
.d-cancel button { padding: 6px 11px; font-size: 13px; gap: 6px; }
.d-cancel button svg { width: 14px; height: 14px; }
.d-board { gap: 14px; padding: 10px; margin-bottom: 10px; }
.d-board .d-thumb { width: 112px; height: 86px; }
.d-board-b { gap: 5px; }
.d-board-b > b { font-size: 16px; }
.d-board-l1, .d-board-meta { font-size: 13px; }
.d-board-meta { gap: 4px 18px; }
.d-board-meta > span { gap: 6px; }
.d-board-meta svg { width: 16px; height: 16px; }
.d-board-desc { font-size: 12px; }
.d-signup { padding: 8px 16px; font-size: 14px; gap: 6px; border-radius: 6px; }
.d-signup svg { width: 14px; height: 14px; }
.d-q { padding: 12px 18px; gap: 14px; min-height: 64px; }
.d-empty { padding: 20px 12px; }
.d-empty svg { width: 26px; height: 26px; }
.d-empty b { font-size: 14px; }
.d-thumb.photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .d-wrap { padding: 10px 10px 20px; }
  .d-alert { height: auto; padding: 8px 10px; }
  .d-alert-t { font-size: 13px; }
  .d-claim-b { padding: 8px 10px 44px; }
  .d-cancel { bottom: 6px; }
  .d-date { width: 62px; }
  .d-board .d-thumb { width: 64px; height: 52px; }
  .d-signup { min-height: 40px; }
  .d-card-h h2 { font-size: 16px; }
}
/* short-code tiles, open list, type badges */
.d-thumb.code { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1c3557, #0B1930 72%); }
.d-thumb.code b { color: #8DDC32; font: 900 34px/1 "Barlow Condensed", Inter, sans-serif; letter-spacing: .04em; font-style: italic; }
.d-thumb.sm.code b { font-size: 18px; }
.img-prev.code { background: radial-gradient(circle at 50% 40%, #1c3557, #0B1930 72%); }
.img-code { display: none; color: #8DDC32; font: 900 38px/1 "Barlow Condensed", Inter, sans-serif; font-style: italic; letter-spacing: .04em; }
.img-prev.code .img-code { display: block; }
.code-l { display: flex; flex-direction: column; gap: 3px; font: 600 13px var(--body); color: #334155; }
.code-in { width: 6em; text-transform: uppercase; font: 800 18px var(--body); letter-spacing: .1em; padding: 6px 10px; }
.d-open-h { display: flex; align-items: center; gap: 8px; margin: -2px 4px 10px; font-size: 14px; color: var(--d-navy); }
.d-open-h i { font-style: normal; font-size: 12px; font-weight: 700; background: #CFF2A4; border-radius: 999px; padding: 1px 8px; }
.d-open-h a { margin-left: auto; font-size: 13px; font-weight: 600; color: #1a6fe0; text-decoration: none; }
.d-type { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font: 700 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; }
.d-type svg { width: 13px !important; height: 13px !important; }
.d-type.train { background: #E4F5D2; color: #2f6d0c; }
.d-type.vol { background: #EAF2FD; color: #1d4ed8; }
/* reports (engine) */
.r-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 8px; }
.r-top h1 { margin: 0; font: 700 24px Inter, sans-serif; color: #0B1930; margin-right: auto; }
.r-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.r-pick select { width: auto; padding: 7px 10px; font-size: 14px; }
.r-note { font-size: 13px; color: #5B6B82; background: #fff8eb; border: 1px solid #fde3b0; border-radius: 8px; padding: 6px 10px; }
.r-tabs { display: flex; gap: 6px; margin: 6px 0 10px; }
.r-tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid #c9d1de; background: #fff; color: #0B1930; font: 600 13px Inter, sans-serif; text-decoration: none; }
.r-tabs a[aria-current] { background: #0B1930; color: #fff; border-color: #0B1930; }
.r-tabs a i { font-style: normal; opacity: .7; margin-left: 4px; }
.r-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.r-table th { text-align: left; font-size: 12px; color: #5B6B82; text-transform: uppercase; letter-spacing: .04em; padding: 8px; border-bottom: 1px solid #E3E8F0; }
.r-table td { padding: 8px; border-bottom: 1px solid #EEF1F5; vertical-align: top; }
.r-yes { color: #2f6d0c; font-weight: 700; }
.r-no { color: #b91c1c; font-weight: 700; }
/* menu bar: a bit taller, bigger logo, no accent strip */
.dh { box-shadow: 0 2px 10px rgba(11,25,48,.18); }
.dh-in { height: 84px; gap: 24px; }
.dh-nav a { height: 50px; padding: 0 16px; font-size: 15px; }
@media (max-width: 1180px) {
  .dh-in { height: 70px; }
}
/* logo hangs below the bar like a badge */
.dh { position: sticky; z-index: 60; }
.dh-in { position: relative; }
.dh-logo { position: relative; align-self: stretch; width: 214px; flex: none; z-index: 2; }
.dh-logo::before { content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 118px; background: var(--d-navy); border-radius: 0 0 20px 20px; box-shadow: 0 8px 18px rgba(11,25,48,.28); border-bottom: 3px solid var(--d-lime); }
.dh-logo img { position: absolute; left: 0; top: 8px; height: 104px; width: auto; max-width: none; }
.dash-page .d-wrap { padding-top: 22px; }
.dash-page .d-wrap > :first-child { margin-left: 0; }
@media (min-width: 1181px) {
  .dash-page .d-alerts, .dash-page .d-cols:first-child, .dash-page .r-top { padding-left: 0; }
  .dash-page .d-wrap { padding-top: 46px; }
}
@media (max-width: 1180px) {
  .dh-logo { width: 150px; }
  .dh-logo::before { height: 90px; left: -8px; right: -8px; border-radius: 0 0 16px 16px; }
  .dh-logo img { height: 78px; top: 6px; }
  .dash-page .d-wrap { padding-top: 30px; }
}
@media (max-width: 1180px) {
  .dh-sheet { padding-top: 34px; }
}
/* logo: no badge background; it floats over the bar's edge with a shadow (option A) */
.dh-logo::before { display: none; }
.dh-logo img { filter: drop-shadow(0 6px 10px rgba(11,25,48,.45)) drop-shadow(0 0 1px rgba(0,0,0,.4)); }
/* =====================================================================
   Board sign-up page (body.dash): header, navy toolbar, list accordions, calendar
   ===================================================================== */
/* navy toolbar */
.b-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--d-navy); color: #fff; border-radius: var(--d-r); padding: 10px 16px; margin-bottom: 12px; }
.b-people { display: flex; gap: 6px; flex-wrap: wrap; }
.b-people a { padding: 6px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); color: #fff; text-decoration: none; font: 600 14px Inter, sans-serif; }
.b-people a:hover { border-color: var(--d-lime); }
.b-people a[aria-current] { background: var(--d-lime); border-color: var(--d-lime); color: var(--d-navy); }
.b-bar-lim { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: #d9e1ee; }
.b-bar-lim b { color: #fff; }
.b-bar-lim svg { width: 20px !important; height: 20px !important; color: #fff; }
.b-bar-extra { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.2); }
.b-bar-extra svg { width: 18px !important; height: 18px !important; color: #F59E0B; }
.b-pick { font-size: 16px; background: #fff8eb; border: 1px solid #fde3b0; border-radius: 10px; padding: 12px 16px; color: var(--d-navy); }
/* view toggle + filters + month nav */
.b-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 12px; }
.b-filters { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.b-f { display: flex; flex-direction: column; gap: 3px; font: 600 12px Inter, sans-serif; color: var(--d-slate); }
.b-f select { width: auto; min-width: 150px; padding: 6px 10px; font: 500 13px Inter, sans-serif; border-radius: 8px; border-color: #c9d1de; background: #fff; }
.c-nav { display: flex; align-items: center; gap: 14px; margin: 0 auto; }
.c-nav a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #c9d1de; background: #fff; color: var(--d-navy); }
.c-nav a svg { width: 16px !important; height: 16px !important; }
.c-nav b { font: 700 18px Inter, sans-serif; min-width: 150px; text-align: center; }
.c-legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--d-line); border-radius: 8px; padding: 6px 10px; font: 600 12px Inter, sans-serif; }
.c-legend span { display: inline-flex; align-items: center; gap: 5px; }
.c-legend i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); }
.c-legend .full i { border-color: #cbd5e1; background: #f1f5f9; }
.b-tools:has(.c-nav) .b-filters { margin-left: 0; }
/* list accordions */
details.b-sec { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r); box-shadow: var(--d-sh); margin-bottom: 10px; overflow: hidden; }
details.b-sec > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid transparent; }
details.b-sec[open] > summary { border-bottom-color: var(--d-line); }
details.b-sec > summary::-webkit-details-marker { display: none; }
.b-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
.b-ic svg { width: 16px !important; height: 16px !important; }
details.b-sec > summary > b { font: 700 16px Inter, sans-serif; color: var(--d-navy); }
.b-crumb { font-size: 13px; color: var(--d-slate); }
.b-lim { font: 700 11px Inter, sans-serif; color: #2f6d0c; background: #E4F5D2; border-radius: 999px; padding: 2px 9px; }
.b-lim.none { color: #9a3412; background: #fff1e6; }
.b-count { margin-left: auto; font: 600 13px Inter, sans-serif; color: var(--d-navy); }
.b-chev { width: 10px; height: 10px; border-right: 2px solid var(--d-navy); border-bottom: 2px solid var(--d-navy); transform: rotate(45deg); margin: -4px 4px 0 6px; transition: transform .15s; }
details.b-sec[open] .b-chev { transform: rotate(-135deg); margin-top: 4px; }
.b-rows { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.b-row { display: grid; grid-template-columns: 78px 190px 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--d-line); border-radius: 10px; padding: 6px 10px 6px 6px; background: #fff; }
.b-row .d-date { width: 78px; padding: 5px 2px; }
.b-row .d-date small { font-size: 11px; }
.b-row .d-date b { font-size: 13px; }
.b-row-main { display: flex; flex-direction: column; }
.b-time { font: 700 15px Inter, sans-serif; color: var(--d-navy); }
.b-title { font-size: 12px; color: var(--d-slate); }
.b-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--d-slate); min-width: 0; }
.b-dot { color: #b6c0cf; }
.b-elig, .b-loc { display: inline-flex; align-items: center; gap: 6px; }
.b-elig svg, .b-loc svg { width: 16px !important; height: 16px !important; }
.b-lo { color: #1d4ed8; font-weight: 600; }
.b-going { flex-basis: 100%; font-size: 12px; color: #7a889c; }
.b-row-act { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.b-claimf { display: flex; gap: 8px; align-items: center; margin: 0; }
.b-claimf input { width: 180px; padding: 6px 9px; font-size: 13px; }
.b-claim { background: #4FB028; color: #0B1930; border: 0; border-radius: 6px; padding: 7px 26px; font: 700 14px Inter, sans-serif; cursor: pointer; min-width: 90px; }
.b-claim:hover { filter: brightness(1.06); }
.b-claim.big { padding: 10px 30px; font-size: 15px; }
.b-row.mine { background: #F1F9E8; border-color: #cde9a0; }
.b-claimed { display: inline-flex; align-items: center; gap: 6px; font: 700 14px Inter, sans-serif; color: #2f6d0c; }
.b-claimed svg { width: 18px !important; height: 18px !important; }
.b-cancelf { margin: 0; }
.b-cancelf button { background: #fff; border: 1px solid #7b8798; border-radius: 6px; padding: 6px 16px; font: 600 13px Inter, sans-serif; color: var(--d-navy); cursor: pointer; }
.b-cancelf button:hover { border-color: #d62828; color: #b91c1c; }
.b-state, .b-late { font: 600 12px Inter, sans-serif; color: var(--d-slate); }
.b-row.lo { border-color: #bfdbfe; background: #f5f9ff; }
.b-row.flash { box-shadow: 0 0 0 3px rgba(141,220,50,.5); }
/* calendar */
.c-wrap { background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r); box-shadow: var(--d-sh); overflow: hidden; }
.c-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.c-wd { padding: 8px; text-align: center; font: 600 13px Inter, sans-serif; color: var(--d-navy); border-bottom: 1px solid var(--d-line); background: #fafbfd; }
.c-day { min-height: 112px; border-right: 1px solid #EEF1F5; border-bottom: 1px solid #EEF1F5; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-day:nth-child(7n/**/+7) { border-right: 0; }
.c-day.out { background: #fbfcfd; }
.c-num { font: 600 13px Inter, sans-serif; color: var(--d-navy); }
.c-day.today .c-num { background: var(--d-navy); color: #fff; border-radius: 999px; padding: 0 7px; align-self: flex-start; }
.c-chip { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 6px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--d-line); border-left: 3px solid var(--c); border-radius: 6px; padding: 4px 6px; cursor: pointer; font-family: Inter, sans-serif; }
.c-chip:hover { border-color: var(--c); box-shadow: var(--d-sh); }
.c-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); }
.c-t { display: flex; flex-direction: column; min-width: 0; }
.c-t b { font-size: 12px; color: var(--d-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-t small { font-size: 11px; color: var(--d-slate); white-space: nowrap; }
.c-s { display: inline-flex; align-items: center; gap: 3px; font: 700 11px Inter, sans-serif; color: #2f6d0c; white-space: nowrap; }
.c-s svg { width: 12px !important; height: 12px !important; }
.c-chip.mine { background: #F1F9E8; }
.c-chip.off { opacity: .55; }
.c-chip.off .c-s { color: var(--d-slate); }
.c-more { background: none; border: 0; color: #1a6fe0; font: 600 12px Inter, sans-serif; cursor: pointer; text-align: left; padding: 2px 4px; }
.c-agenda { display: none; padding: 8px; }
.c-ag-day h4 { margin: 10px 4px 6px; font: 700 14px Inter, sans-serif; color: var(--d-navy); }
.c-ag-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--d-line); border-left: 3px solid var(--c); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.c-ag-t { display: flex; flex-direction: column; }
.c-ag-t b { font-size: 14px; }
.c-ag-t small { font-size: 12px; color: var(--d-slate); }
/* session details pop-up */
.b-dlg { border: 0; border-radius: 14px; padding: 0; width: min(560px, 94vw); box-shadow: 0 20px 60px rgba(11,25,48,.35); font-family: Inter, sans-serif; }
.b-dlg::backdrop { background: rgba(11,25,48,.45); }
.b-dlg-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--d-line); }
.b-dlg-h > b { flex: 1; font-size: 17px; }
.b-dlg-t { flex: 1; display: flex; flex-direction: column; }
.b-dlg-t b { font-size: 17px; color: var(--d-navy); }
.b-dlg-t small { font-size: 12px; color: var(--d-slate); }
.b-dlg-b { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.b-dlg .b-row { grid-template-columns: 70px 1fr auto; }
.b-dlg .b-row-meta { grid-column: 2 / 4; }
.b-facts { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 14px; }
.b-facts div { display: contents; }
.b-facts dt { color: var(--d-slate); font-weight: 600; }
.b-facts dd { margin: 0; color: var(--d-navy); }
.b-dlg-act { display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--d-line); }
/* responsive */
@media (max-width: 1180px) {
  .b-row { grid-template-columns: 70px 150px 1fr auto; }
  .b-bar-lim { margin-left: 0; flex-basis: 100%; }
  .b-bar-extra { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .b-bar { padding: 10px 12px; }
  .b-people a { padding: 6px 14px; }
  .b-tools { align-items: stretch; }
  .b-filters { margin-left: 0; width: 100%; }
  .b-f { flex: 1; }
  .b-f select { min-width: 0; width: 100%; }
  .c-nav { width: 100%; justify-content: space-between; }
  .c-legend { width: 100%; }
  .b-row { grid-template-columns: 62px 1fr; gap: 6px 10px; padding: 8px; }
  .b-row-meta { grid-column: 1 / 3; }
  .b-row-act { grid-column: 1 / 3; justify-content: stretch; }
  .b-row-act .b-claimf { width: 100%; }
  .b-claim { flex: 1; padding: 10px; }
  .b-claimf input { flex: 1; width: auto; }
  details.b-sec > summary { flex-wrap: wrap; }
  .b-count { margin-left: 0; }
  .c-grid { display: none; }
  .c-agenda { display: block; }
  .c-ag-row { grid-template-columns: 12px 1fr; }
  .c-ag-row .b-row-act { grid-column: 1 / 3; }
}
/* board header: plain row, smaller back button, date + location beside the title */
.b-wrap { padding-top: 30px; }
@media (max-width: 1180px) {
  .b-wrap { padding-top: 24px; }
}
/* same-day sessions: one date block beside all of them; alternating shade per day */
.b-dayg { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: stretch; padding: 4px; border-radius: 10px; }
.b-dayg.alt { background: #F5F7FB; }
.b-dayg > .d-date { width: 78px; height: auto; align-self: stretch; padding: 8px 2px; border-color: #d8dfea; }
.b-dayg > .d-date b { font-size: 14px; }
.b-dayg-rows { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.b-row.nod { grid-template-columns: 190px 1fr auto; padding-left: 12px; }
.b-act { display: inline-flex; align-items: center; gap: 6px; font: 700 12px Inter, sans-serif; color: var(--d-navy); }
.b-act i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--c); }
.b-act small { font-weight: 500; color: var(--d-slate); margin-left: 2px; }
.b-row.nod:has(.b-act) { grid-template-columns: 230px 1fr auto; }
.b-group { align-items: center; border: 1px solid #c9d1de; font: 600 13px Inter, sans-serif; }
.b-group span { color: var(--d-slate); padding: 0 6px; }
.b-ic.wk { background: var(--d-navy); }
@media (max-width: 1180px) {
  .b-row.nod { grid-template-columns: 150px 1fr auto; }
}
@media (max-width: 760px) {
  .b-dayg { grid-template-columns: 58px 1fr; gap: 6px; padding: 3px; }
  .b-dayg > .d-date { width: 58px; }
  .b-row.nod, .b-row.nod:has(.b-act) { grid-template-columns: 1fr; padding: 8px; }
  .b-row.nod .b-row-meta, .b-row.nod .b-row-act { grid-column: 1; }
  .b-group { width: 100%; justify-content: center; }
}
/* dismissible, fading messages */
.notice, .alert { position: relative; transition: opacity .35s, transform .35s, max-height .35s, margin .35s, padding .35s; }
.notice:has(.flash-x), .alert:has(.flash-x) { padding-right: 40px; }
.flash-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; padding: 4px; }
.flash-x:hover { opacity: 1; }
.flash-out { opacity: 0; transform: translateY(-6px); }
.b-group span { display: none; }
/* "Group by" sits above its box, styled like the Show / Activity labels */
.b-none { color: var(--d-slate); font-style: italic; }
.b-act .b-lim, .c-legend .b-lim { margin-left: 6px; font-size: 10px; padding: 1px 7px; }
.b-facts .b-lim { margin-right: 4px; }
/* Your Upcoming Claims: Who / When filters */
.d-filt { display: flex; flex-direction: column; gap: 6px; margin: -2px 2px 10px; }
.d-filt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-filt-l { font: 700 12px Inter, sans-serif; color: var(--d-slate); width: 40px; text-transform: uppercase; letter-spacing: .04em; }
.d-filt .d-fam { margin: 0; }
@media (max-width: 700px) {
  .d-filt-l { width: 100%; }
}
/* account dropdown holds Request a change, App Settings, Sign Out */
.dh-acct > summary { border-right: 0; padding-right: 0; }
.dh-menu { padding: 6px; }
.dh-menu a, .dh-menu button { display: flex; align-items: center; gap: 10px; }
.dh-menu svg { width: 17px !important; height: 17px !important; color: #5B6B82; }
.dh-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid #E3E8F0; }
.dh-signout { color: #b91c1c !important; }
.dh-signout svg { color: #b91c1c !important; }
/* footer: one line */
.foot { font-size: 12px; color: #8a96a8; text-align: center; padding: 18px 12px 26px; }
.foot .ver { display: inline; font-size: 12px; color: #8a96a8; margin: 0; }
.foot-dot { margin: 0 4px; }
.dh-menu { min-width: 270px; }
.dh-menu a, .dh-menu button { white-space: nowrap; }
/* sign-in: password, link, text code */
.signin .pw-row { display: flex; justify-content: space-between; align-items: baseline; }
.signin .forgot { font-size: 13px; }
.btn-alt { background: #fff !important; color: var(--navy) !important; border: 1.5px solid var(--line-strong) !important; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 2px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-box { font: 700 22px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; text-align: center; }
.dev-code { display: block; font: 800 28px ui-monospace, monospace; letter-spacing: .25em; margin-top: 6px; }
/* ---------- My Account ---------- */
.a-wrap { padding-top: 34px; }
.a-top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.a-top h1 { margin: 0; font: 800 24px Inter, sans-serif; color: #0B1930; }
.a-who { color: #5B6B82; font-size: 14px; }
.a-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.a-col { display: flex; flex-direction: column; gap: 14px; }
.a-card { padding: 14px 16px; }
.a-h { display: flex; align-items: center; gap: 10px; }
.a-h h2 { margin: 0; font: 700 17px Inter, sans-serif; flex: 1; }
.a-lock { font: 600 11px Inter, sans-serif; color: #5B6B82; background: #f1f4f8; border-radius: 999px; padding: 2px 9px; }
.a-sub { margin: 4px 0 10px; font-size: 13px; color: #5B6B82; }
.a-form { display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; }
.a-form label { display: flex; flex-direction: column; gap: 3px; font: 600 13px Inter, sans-serif; color: #334155; flex: 1; text-transform: none; }
.a-form input, .a-form select, .a-form textarea { font: 400 14px Inter, sans-serif; padding: 8px 10px; border: 1px solid #c9d1de; border-radius: 8px; width: 100%; }
.a-row { display: flex; gap: 10px; }
.a-act { display: flex; justify-content: flex-end; }
.a-inline { flex-direction: row; align-items: flex-end; gap: 10px; }
.a-inline label { flex: 1; }
.b-cancelf-btn { background: #fff; border: 1px solid #7b8798; border-radius: 6px; padding: 8px 14px; font: 600 13px Inter, sans-serif; color: #0B1930; cursor: pointer; white-space: nowrap; }
.a-cur { font: 600 15px Inter, sans-serif; color: #0B1930; margin: 0 0 8px; }
.a-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.a-list li { display: flex; flex-direction: column; gap: 1px; border: 1px solid #E3E8F0; border-radius: 10px; padding: 8px 12px; background: #fbfcfe; }
.a-list li b { color: #0B1930; }
.a-list li span { font-size: 13px; color: #5B6B82; }
.a-facts { grid-template-columns: 90px 1fr; }
.a-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.a-tabs button { border: 1px solid #c9d1de; background: #fff; border-radius: 999px; padding: 5px 12px; font: 600 13px Inter, sans-serif; color: #0B1930; cursor: pointer; }
.a-tabs button.on { background: #0B1930; color: #fff; border-color: #0B1930; }
.a-h3 { margin: 14px 0 6px; font: 700 14px Inter, sans-serif; }
.a-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.a-reqs li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; border-bottom: 1px solid #EEF1F5; padding-bottom: 6px; }
.d-pill.ok { background: #E4F5D2; color: #2f6d0c; }
.d-pill.no { background: #fde8e8; color: #b91c1c; }
@media (max-width: 900px) {
  .a-cols { grid-template-columns: 1fr; }
  .a-row, .a-inline { flex-direction: column; align-items: stretch; }
}
/* admin requests */
.rq-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rq { display: grid; grid-template-columns: 1fr 320px; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.rq-done { grid-template-columns: 1fr; opacity: .8; }
.rq-main { display: flex; flex-direction: column; gap: 3px; }
.rq-note { font-style: italic; color: var(--text-2); }
.rq-act { display: flex; flex-direction: column; gap: 8px; }
.rq-act input, .rq-act select { width: 100%; padding: 6px 8px; }
.rq-decline { flex-direction: row !important; gap: 6px; }
.rq-past { margin-top: 14px; }
.rq-past > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 800px) {
  .rq { grid-template-columns: 1fr; }
}
.gate-row { display: flex; gap: 10px; }
.gate-row > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.gate-card textarea { width: 100%; font: 400 15px var(--body); padding: 10px 12px; border-radius: 10px; }
.link-btn.skip { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; margin-top: 8px; font-size: 14px; }
.welcome .stack { margin-top: 10px; }
.acc-set fieldset { border: 0; padding: 0; margin: 0 0 10px; }
.acc-set legend { font: 700 15px var(--body); color: var(--navy); margin-bottom: 6px; }
.acc-set .radio-row { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; font: 400 14px var(--body); text-transform: none; }
.acc-set .radio-row .fine { display: block; }
.si-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.si-hist { margin-top: 10px; }
.si-hist > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.si-hist ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.si-hist li { display: flex; flex-direction: column; font-size: 13px; border-bottom: 1px solid #eef1f5; padding: 3px 0; }
.si-hist li.ok b { color: #2f6d0c; }
.si-hist li.no b { color: #b91c1c; }
.rq-notify { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 14px; color: var(--text-2); }
.rq-notify details { display: inline-flex; align-items: center; }
.rq-notify summary { list-style: none; cursor: pointer; font-size: 13px; }
.rq-notify summary::-webkit-details-marker { display: none; }
.rq-notify details[open] summary { display: none; }
.rq-edit { display: inline-flex; gap: 6px; }
.rq-edit input { width: 280px; padding: 6px 8px; }
/* Locations: Add a place on top (green panel), list below */
.place-addbox { background: var(--accent-tint); border: 1px solid #d9efb0; border-radius: 12px; padding: 10px 14px; margin: 8px 0 12px; }
.place-addbox .ia-title { display: block; font: 700 14px var(--body); color: #2f6d0c; margin-bottom: 6px; }
.place-addbox .inline-add { margin: 0; }
.place-addbox input { background: #fff; }
.place-addbox .fine { margin: 6px 0 0; }
.addr-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(11,25,48,.15); padding: 4px; margin-top: 2px; }
.addr-sug button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; }
.addr-sug button:hover, .addr-sug button.on { background: var(--accent-tint); }
.addr-sug b { font-size: 14px; color: var(--navy); font-weight: 600; }
.addr-sug span { font-size: 12px; color: var(--muted); }
.addr-err { padding: 8px 10px; font-size: 13px; color: #9a3412; }
/* public link (no account) */
.b-bar-guest { gap: 12px; font-size: 14px; }
.b-bar-guest svg { width: 22px !important; height: 22px !important; flex: none; }
.dh-guest { display: flex !important; }
.dh-signin { color: #fff; border: 1.5px solid var(--d-lime); border-radius: 8px; padding: 7px 16px; font: 600 14px Inter, sans-serif; text-decoration: none; }
.dh-signin:hover { background: var(--d-lime); color: var(--d-navy); }
.gc-what { font-size: 13px; }
.b-acct { text-align: center; margin-top: 14px; }
@media (max-width: 1180px) {
  .dh-guest { display: flex !important; margin-left: auto; }
}
.gc-when { font: 700 17px Inter, sans-serif; }
.gc-go { background: #d64545 !important; color: #fff !important; margin: 8px 0 4px; }
.share-row { display: flex; gap: 6px; margin: 8px 0; }
.share-url { flex: 1; font: 13px ui-monospace, monospace; padding: 7px 9px; }
.share-qr { display: flex; gap: 12px; align-items: center; }
.share-qr img { border: 1px solid var(--line); border-radius: 8px; }
.share-qr span { display: flex; flex-direction: column; gap: 6px; }
/* Upcoming Claims: Details + Cancel side by side */
.d-acts { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }
.d-acts .d-cancel, .d-acts .d-late { position: static; transform: none; }
.d-claim-b { padding-right: 200px; }
.d-det { background: #fff; border: 1.5px solid #c9d1de; border-radius: 8px; padding: 6px 12px; font: 600 13px Inter, sans-serif; color: var(--d-navy); cursor: pointer; }
.d-det:hover { border-color: var(--d-navy); }
.dt-h { margin: 12px 0 4px; font: 700 14px Inter, sans-serif; color: var(--d-navy); }
.dt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dt-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; border-bottom: 1px solid #EEF1F5; font-size: 14px; }
.dt-list li span { color: var(--d-slate); }
.dt-list li.me b::after { content: " · your family"; font-weight: 500; color: var(--d-slate); font-size: 12px; }
@media (max-width: 700px) {
  .d-acts { top: auto; bottom: 8px; transform: none; right: 10px; }
  .d-claim-b { padding-right: 12px; }
}
/* the new menu bar on every page (variables available outside My Claims too) */
:root { --d-navy: #0B1930; --d-lime: #8DDC32; --d-lime-d: #6fbf1c; --d-bg: #F4F6FA; --d-line: #E3E8F0; --d-slate: #5B6B82; --d-r: 12px; }
.dh { font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif; }
.dh svg { flex: none; }
body:not(.dash) .page { padding-top: 34px; }
@media (max-width: 1180px) {
  body:not(.dash) .page { padding-top: 26px; }
}
.dh :where(svg) { width: 20px; height: 20px; }
/* every page uses the same width as My Claims */
body:not(.dash) main.page, body:not(.dash) main.page.wide, body:not(.dash) main.page.xwide { max-width: 1440px; padding-left: 24px; padding-right: 24px; padding-bottom: 28px; }
@media (max-width: 700px) {
  body:not(.dash) main.page, body:not(.dash) main.page.wide, body:not(.dash) main.page.xwide { padding-left: 10px; padding-right: 10px; }
}
/* ---------- Check-in (new boards) ---------- */
.ck-days { display: flex; align-items: center; gap: 10px; }
.ck-days b { font: 700 16px Inter, sans-serif; color: #0B1930; }
.ck-days a, .ck-days .off { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #c9d1de; background: #fff; color: #0B1930; }
.ck-days .off { opacity: .35; }
.ck-days svg { width: 18px; height: 18px; }
.ck-days a.ck-today { width: auto; height: auto; border-radius: 999px; padding: 6px 14px; font: 600 13px Inter, sans-serif; text-decoration: none; }
.ck-list { display: flex; flex-direction: column; gap: 10px; }
.ck-card { display: grid; grid-template-columns: 150px 1fr 220px 24px; align-items: center; gap: 14px; background: #fff; border: 1px solid #E3E8F0; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(11,25,48,.06); text-decoration: none; color: inherit; }
.ck-card:hover { border-color: #8DDC32; }
.ck-time { font: 800 15px Inter, sans-serif; color: #0B1930; }
.ck-what { display: flex; flex-direction: column; }
.ck-what b { font: 700 16px Inter, sans-serif; color: #0B1930; }
.ck-what small { color: #5B6B82; font-size: 13px; }
.ck-nums { font-size: 13px; color: #5B6B82; }
.ck-nums b { color: #0B1930; }
.ck-bar { display: block; height: 6px; background: #EEF1F5; border-radius: 99px; margin-top: 6px; overflow: hidden; }
.ck-bar i { display: block; height: 100%; background: #4FB028; }
.ck-go svg { width: 20px; height: 20px; color: #5B6B82; }
.ck-sum { font-size: 15px; color: #5B6B82; }
.ck-sum b { color: #0B1930; font-size: 20px; }
.ck-allf { margin: 0 0 10px; display: flex; justify-content: flex-end; }
.ck-card-list { padding: 4px 12px; }
.ck-roster { list-style: none; margin: 0; padding: 0; }
.ck-p { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #EEF1F5; }
.ck-p:last-child { border-bottom: 0; }
.ck-name { display: flex; flex-direction: column; }
.ck-name b { font: 700 16px Inter, sans-serif; color: #0B1930; }
.ck-name small { font-size: 12px; color: #5B6B82; }
.ck-ans { color: #2f6d0c !important; }
.ck-btns { display: flex; gap: 8px; margin: 0; }
.ck-btns button { min-width: 108px; min-height: 44px; border-radius: 10px; border: 2px solid #c9d1de; background: #fff; font: 700 15px Inter, sans-serif; color: #5B6B82; cursor: pointer; }
.ck-p[data-state="here"] .ck-here { background: #4FB028; border-color: #4FB028; color: #fff; }
.ck-p[data-state="noshow"] .ck-no { background: #d64545; border-color: #d64545; color: #fff; }
.ck-p[data-state="here"] { background: #F3FAEB; }
.ck-p[data-state="noshow"] { background: #fdf2f2; }
.ck-walk { margin-top: 14px; padding: 14px 16px; }
.ck-walk h3 { margin: 0; font: 700 16px Inter, sans-serif; }
@media (max-width: 700px) {
  .ck-card { grid-template-columns: 1fr 20px; gap: 4px 10px; }
  .ck-time { grid-column: 1; }
  .ck-what { grid-column: 1; }
  .ck-nums { grid-column: 1; }
  .ck-go { grid-column: 2; grid-row: 1 / 4; }
  .ck-p { flex-direction: column; align-items: stretch; gap: 8px; }
  .ck-btns button { flex: 1; min-height: 50px; }
  .ck-days b { font-size: 14px; }
}
/* a spot's People page (admins) */
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sp-who { display: flex; flex-direction: column; gap: 2px; }
.sp-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.pill.warn { background: #fff1e6; color: #9a3412; }
.sp-rm { display: flex; align-items: center; gap: 12px; margin: 0; }
.sp-add select { width: 100%; }
.sp-add .radio-row { display: flex; gap: 10px; align-items: flex-start; text-transform: none; font: 400 14px var(--body); }
@media (max-width: 700px) {
  .sp-row { flex-direction: column; align-items: flex-start; }
}
/* "this board only" scope notes */
.scope-note { font-size: 13px; color: var(--text-2); background: #f6f8fb; border-left: 3px solid var(--d-lime); border-radius: 6px; padding: 7px 10px; margin: 4px 0 10px; }
.scope-note svg { width: 13px; height: 13px; vertical-align: -2px; }
/* =====================================================================
   Board Setup: header, tabs, and three panels (structure · contents · settings)
   ===================================================================== */
.sb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid #c9d1de; border-radius: 8px; background: #fff; color: #0B1930; font: 600 13px Inter, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sb-btn svg { width: 15px; height: 15px; }
.sb-btn:hover { border-color: #0B1930; }
.sb-btn.primary { background: #8DDC32; border-color: #8DDC32; color: #0B1930; }
.sb-btn.primary:hover { background: #7fcd27; }
.sb-btn.danger { color: #b91c1c; border-color: #f1c0c0; }
.sb-btn.danger:hover { border-color: #b91c1c; }
.sb-btn.sm { padding: 5px 9px; font-size: 12px; }
.sb-btn.wide { width: 100%; justify-content: center; margin-top: 10px; }
.bh2 { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: #0B1930; color: #fff; border-radius: 14px 14px 0 0; padding: 14px 18px; }
.bh2-l { display: flex; align-items: center; gap: 14px; }
.bh2-tile { width: 54px; height: 42px; }
.bh2-tile.code b { font-size: 18px; }
.bh2-t { display: flex; align-items: center; gap: 10px; }
.bh2-t h1 { margin: 0; font: 800 24px Inter, sans-serif; color: #fff; text-transform: none; letter-spacing: -.01em; }
.bh2-st { font: 700 12px Inter, sans-serif; border-radius: 999px; padding: 3px 10px; }
.bh2-st.pub { background: #8DDC32; color: #0B1930; }
.bh2-st.draft { background: #fde68a; color: #713f12; }
.bh2-st.arch { background: #cbd5e1; color: #1e293b; }
.bh2-meta { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: #c8d2e2; margin-top: 3px; }
.bh2-meta svg { width: 14px; height: 14px; }
.bh2-meta a { color: #c8d2e2; }
.bh2-acts { display: flex; gap: 8px; align-items: center; }
.bh2-acts form { margin: 0; }
.bh2-acts .sb-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.bh2-acts .sb-btn:hover { border-color: #8DDC32; }
.bh2-acts .sb-btn.primary { background: #8DDC32; color: #0B1930; border-color: #8DDC32; }
.bh2-acts .share-pop { position: relative; }
.bh2-acts .share-panel { position: absolute; right: 0; top: 110%; z-index: 30; width: 360px; color: #0B1930; }
.bh2-tabs { display: flex; gap: 2px; background: #EEF1F5; border-radius: 0 0 14px 14px; padding: 6px; margin-bottom: 14px; border-bottom: 3px solid #8DDC32; }
.bh2-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 8px; color: #0B1930; font: 600 14px Inter, sans-serif; text-decoration: none; }
.bh2-tabs a svg { width: 16px; height: 16px; }
.bh2-tabs a[aria-current] { background: #8DDC32; }
.bh2-tabs a:not([aria-current]):hover { background: #fff; }
.sp3 { display: grid; grid-template-columns: minmax(250px, 25%) 1fr minmax(300px, 30%); gap: 14px; align-items: start; }
.sp3 > * { background: #fff; border: 1px solid #E3E8F0; border-radius: 14px; box-shadow: 0 1px 3px rgba(11,25,48,.06); min-width: 0; }
.sp3-tree, .sp3-right { position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow: auto; }
.sp3-tree { padding: 0 0 10px; }
.spt-h, .st-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #E3E8F0; }
.spt-h h3, .st-h h3 { margin: 0; flex: 1; font: 700 16px Inter, sans-serif; color: #0B1930; }
.spt-h > svg, .st-h > svg { width: 20px; height: 20px; color: #0B1930; }
.sp3-tree .spt-h { background: #0B1930; border-radius: 14px 14px 0 0; }
.sp3-tree .spt-h h3, .sp3-tree .spt-h > svg { color: #fff; }
.sp3-right .st-h { background: #0B1930; border-radius: 14px 14px 0 0; margin: -14px -14px 12px; }
.sp3-right .st-h h3, .sp3-right .st-h > svg { color: #fff; }
.spt-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px; border: 1px solid #c9d1de; border-radius: 8px; padding: 0 10px; }
.spt-search svg { width: 16px; height: 16px; color: #5B6B82; }
.spt-search input { border: 0 !important; outline: none; padding: 7px 0 !important; width: 100%; font: 14px Inter, sans-serif; box-shadow: none !important; background: transparent; }
.spt, .spt ul { list-style: none; margin: 0; padding: 0; }
.spt ul { padding-left: 16px; display: none; }
.spt .tn.open > ul { display: block; }
.spt .tn.hide { display: none; }
.tn-row { display: flex; align-items: center; gap: 2px; margin: 1px 8px; border-radius: 8px; }
.tn-row:hover { background: #F4F6FA; }
.tn-row.on { background: #8DDC32; }
.tn-row.on .tn-link, .tn-row.on .tn-c { color: #0B1930; font-weight: 700; }
.tn-tog { width: 22px; height: 26px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: #5B6B82; padding: 0; flex: none; }
.tn-tog svg { width: 14px; height: 14px; transition: transform .15s; }
.tn.open > .tn-row .tn-tog svg { transform: rotate(90deg); }
.tn-tog.none { cursor: default; }
.tn-link { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px; color: #0B1930; text-decoration: none; font: 500 14px Inter, sans-serif; }
.tn-link svg { width: 17px; height: 17px; flex: none; color: #334155; }
.tn-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn.hit > .tn-row .tn-name { text-decoration: underline; text-decoration-color: #8DDC32; text-decoration-thickness: 3px; }
.tn-c { font-size: 11px; color: #5B6B82; flex: none; }
.tn-more { position: relative; flex: none; }
.tn-dots { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; color: #334155; opacity: 0; }
.tn-row:hover .tn-dots, .tn-row.on .tn-dots, .tn-dots:focus { opacity: 1; }
.tn-menu { position: absolute; right: 0; top: 100%; z-index: 40; background: #fff; border: 1px solid #E3E8F0; border-radius: 10px; box-shadow: 0 10px 24px rgba(11,25,48,.18); padding: 4px; min-width: 190px; display: flex; flex-direction: column; }
.tn-menu[hidden] { display: none; }
.tn-menu button { display: flex; align-items: center; gap: 8px; background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 7px; font: 500 13px Inter, sans-serif; color: #0B1930; cursor: pointer; }
.tn-menu button:hover { background: #F4F6FA; }
.tn-menu button svg { width: 15px; height: 15px; }
.tn-menu .danger { color: #b91c1c; }
.spt .tn.root { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid #EEF1F5; }
.spt-empty { padding: 0 16px; }
.sp3-center { padding: 14px 16px 16px; min-height: 420px; }
.sp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: #5B6B82; margin-bottom: 10px; }
.sp-crumbs a { display: inline-flex; align-items: center; gap: 5px; color: #334155; text-decoration: none; }
.sp-crumbs a:hover { text-decoration: underline; }
.sp-crumbs svg { width: 15px; height: 15px; }
.sp-crumbs b { color: #0B1930; }
.sp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sp-ico svg { width: 30px; height: 30px; color: #0B1930; }
.sp-title { flex: 1; min-width: 180px; }
.sp-title h2 { margin: 0; font: 800 24px Inter, sans-serif; color: #0B1930; text-transform: none; }
.sp-title span { font-size: 13px; color: #5B6B82; }
.sp-acts { display: flex; gap: 8px; }
.sp-card { border: 1px solid #E3E8F0; border-radius: 12px; overflow: hidden; }
.sp-card-h { display: flex; align-items: center; gap: 8px; background: #0B1930; color: #fff; padding: 10px 12px; }
.sp-card-h svg { width: 18px; height: 18px; }
.sp-card-h b { font: 700 15px Inter, sans-serif; }
.sp-card-h .fine { color: #c8d2e2; flex: 1; }
.sp-card-h .sb-btn { margin-left: auto; }
.ss-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ss-row { display: grid; grid-template-columns: 58px 1fr 170px auto; align-items: center; border: 1px solid #E3E8F0; border-radius: 10px; padding: 8px 10px; }
.ss-row:hover { border-color: #8DDC32; }
.ss-date { display: flex; flex-direction: column; align-items: center; background: #F4F6FA; border-radius: 8px; padding: 4px 2px; line-height: 1.1; }
.ss-date small { font: 700 10px Inter, sans-serif; color: #5B6B82; }
.ss-date b { font: 800 20px Inter, sans-serif; color: #0B1930; }
.ss-date.nodate { padding: 10px 0; }
.ss-date.nodate svg { width: 20px; height: 20px; }
.ss-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-main b { font: 700 15px Inter, sans-serif; color: #0B1930; }
.ss-main span { align-items: center; gap: 5px; font-size: 13px; color: #5B6B82; }
.ss-main svg { width: 14px; height: 14px; flex: none; }
.ss-fill { font-size: 13px; color: #5B6B82; }
.ss-fill b { color: #0B1930; font-size: 14px; }
.ss-fill small { font-size: 11px; }
.ss-bar { display: block; height: 7px; background: #EEF1F5; border-radius: 99px; margin: 4px 0 2px; overflow: hidden; }
.ss-bar i { display: block; height: 100%; background: #4FB028; }
.ss-acts { display: flex; }
.kid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 12px; }
.kid { display: flex; flex-direction: column; gap: 4px; border: 1px solid #E3E8F0; border-radius: 10px; padding: 12px; text-decoration: none; color: #0B1930; }
.kid:hover { border-color: #8DDC32; box-shadow: 0 2px 8px rgba(11,25,48,.08); }
.kid b { font: 700 16px Inter, sans-serif; }
.kid-ico svg { width: 22px; height: 22px; }
.kid-own { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font: 600 11px Inter, sans-serif; color: #2f6d0c; background: #E4F5D2; border-radius: 999px; padding: 2px 8px; }
.kid-own svg { width: 12px; height: 12px; }
.sp-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 12px; color: #5B6B82; text-align: center; }
.sp-empty svg { width: 28px; height: 28px; }
.sp-empty b { color: #0B1930; }
.sp3-right { padding: 14px; }
.st-name { margin: 0 0 10px; }
.st-name label { display: flex; flex-direction: column; gap: 4px; font: 600 13px Inter, sans-serif; color: #334155; }
.st-name-row { display: flex; gap: 6px; }
.st-name-row input { flex: 1; }
.st-sub { margin: 10px 0 4px; font: 700 14px Inter, sans-serif; color: #0B1930; }
.st-note { font-size: 13px; color: #5B6B82; margin: 4px 0 10px; }
.st-list { margin: 0; }
.st-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #EEF1F5; }
.st-list dt { font: 600 13px Inter, sans-serif; color: #334155; }
.st-list dd { margin: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; color: #0B1930; }
.src-tag { font: 600 10px Inter, sans-serif; border-radius: 999px; padding: 1px 8px; background: #EEF1F5; color: #5B6B82; white-space: nowrap; }
.src-tag.here { background: #8DDC32; color: #0B1930; }
.src-tag.board { background: #EEF1F5; color: #475569; }
.src-tag.from { background: #E0EAFF; color: #1d4ed8; }
.st-legend { font-size: 11px; color: #5B6B82; margin: 8px 0 0; line-height: 1.8; }
.st-edit > summary { list-style: none; }
.st-edit > summary::-webkit-details-marker { display: none; }
.st-edit[open] > summary { display: none; }
.st-edit .node-settings { margin-top: 6px; }
.sd { width: min(520px, 94vw); }
.sd-row { display: flex; gap: 10px; }
.sd-row label { flex: 1; }
.sd-err { color: #b91c1c; }
@media (max-width: 1200px) {
  .sp3 { grid-template-columns: minmax(230px, 30%) 1fr; }
  .sp3-right { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 800px) {
  .sp3 { grid-template-columns: 1fr; }
  .sp3-tree { position: static; max-height: 50vh; }
  .ss-row { grid-template-columns: 52px 1fr; }
  .ss-fill, .ss-acts { grid-column: 1 / -1; }
  .bh2-tabs { overflow-x: auto; }
}
.st-why { font-size: 11px; color: #5B6B82; }
.ss-row { grid-template-columns: 56px minmax(0, 1fr) 132px auto; gap: 10px; }
.ss-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; }
.sb-btn.ic { padding: 6px 7px; }
.sb-btn.ic svg { width: 16px; height: 16px; }
.ss-acts { gap: 4px; }
.sd-rep { border: 1px solid #E3E8F0; border-radius: 10px; padding: 8px 12px; margin: 0; }
.sd-rep[hidden] { display: none; }
.sd-rep .radio-row { display: flex; gap: 8px; align-items: center; text-transform: none; font: 400 14px Inter, sans-serif; }
.sd-rep-b { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sd-rep-b[hidden] { display: none; }
.sd-days { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-days label { cursor: pointer; }
.sd-days input { position: absolute; opacity: 0; width: 0; }
.sd-days span { display: inline-block; min-width: 46px; text-align: center; border: 1.5px solid #c9d1de; border-radius: 999px; padding: 5px 8px; font: 600 13px Inter, sans-serif; color: #334155; }
.sd-days input:checked + span { background: #8DDC32; border-color: #8DDC32; color: #0B1930; }
.sd-days input:focus-visible + span { outline: 2px solid #0B1930; }
.sd-count { margin: 0; font-weight: 600; color: #2f6d0c; }
.sd > form { padding: 0 18px 16px; }
.sd .dlg-head { margin: 0 -18px 6px; padding-left: 18px; padding-right: 18px; }
.sd .q-actions { margin-top: 6px; }
.del-dlg { width: min(520px, 94vw); }
.del-dlg > form { padding: 0 18px 16px; }
.del-dlg .dlg-head { margin: 0 -18px 6px; padding: 0 18px; }
.del-list { margin: 0 0 4px; padding-left: 20px; font-size: 14px; }
.del-list li { margin: 3px 0; }
.del-go { background: #d64545 !important; border-color: #d64545 !important; color: #fff !important; }
.del-go:disabled { opacity: .45; cursor: not-allowed; }
/* right panel: each setting editable in place */
.st-item { border-bottom: 1px solid #EEF1F5; }
.st-item.editing { background: #F7FBF1; margin: 0 -14px; padding: 0 14px; }
.st-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; }
.st-row dt { flex: 1; font: 600 13px Inter, sans-serif; color: #334155; }
.st-row dd { margin: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; color: #0B1930; }
.st-list > .st-item > .st-row { border: 0; }
.st-editl { background: none; border: 0; color: #1a6fe0; font: 600 12px Inter, sans-serif; cursor: pointer; padding: 2px 0 0 4px; white-space: nowrap; }
.st-editl:hover { text-decoration: underline; }
.st-item.editing .st-editl { color: #5B6B82; }
.st-inline { padding: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.st-inline[hidden] { display: none; }
.st-inline fieldset { border: 0; padding: 0; margin: 0; }
.st-inline .radio-row { font-size: 13px; }
.st-inline-acts { display: flex; justify-content: flex-end; gap: 8px; }
.st-list > .st-item { display: block; padding: 0; justify-content: initial; }
.st-row dd { flex: none; max-width: 60%; }
.st-inline { padding-left: 2px; }
.st-list > .st-item.editing { padding: 0 14px; margin: 0 -14px; }
/* admin preview of a sign-up page */
.prev-banner { background: #FDE68A; color: #713f12; text-align: center; font: 500 14px Inter, sans-serif; padding: 8px 12px; border-bottom: 1px solid #f5c84c; }
.prev-banner b { text-transform: uppercase; letter-spacing: .05em; margin-right: 6px; }
.b-bar-prev { gap: 10px 14px; }
.prev-as { margin: 0; }
.prev-as select { padding: 6px 10px; border-radius: 8px; font: 600 14px Inter, sans-serif; min-width: 240px; }
.b-claim:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
/* back buttons (instead of the breadcrumb) on board pages */
.back-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #c9d1de; border-radius: 8px; background: #fff; color: #0B1930; font: 600 13px Inter, sans-serif; text-decoration: none; }
.back-btn:hover { border-color: #0B1930; }
.back-btn svg { width: 15px; height: 15px; }
/* All Boards: description beside the title, slimmer header */
.home-head { padding-top: 12px; padding-bottom: 12px; align-items: center; }
.hh-line { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.hh-line h1 { margin: 0; }
.hh-line p { margin: 0; }
/* =====================================================================
   Claim Board Dashboard (All Boards)
   ===================================================================== */
.dm { display: flex; align-items: center; gap: 12px; border: 1px solid #d9efb0; background: linear-gradient(90deg, #F1F9E8 0 64px, #fff 64px); border-radius: 12px; }
.dm-ic { width: 40px; display: grid; place-items: center; }
.dm-ic svg { color: #2f6d0c; }
.dm b { display: block; font: 800 22px/1.1 Inter, sans-serif; color: #0B1930; }
.dm small { font-size: 13px; color: #334155; }
.dt-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 8px; padding: 7px 14px; font: 600 13px Inter, sans-serif; color: #0B1930; cursor: pointer; }
.dt-tab svg { width: 16px; height: 16px; }
.dt-tab i { font-style: normal; color: #5B6B82; font-weight: 500; }
.dt-tab.on { background: #0B1930; color: #fff; box-shadow: inset 0 -3px 0 #8DDC32; }
.dt-tab.on i { color: #c8d2e2; }
.dt-tab:not(.on):hover { background: #fff; }
.dt-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; border: 1px solid #c9d1de; border-radius: 8px; padding: 0 10px; background: #fff; }
.dt-search svg { width: 16px; height: 16px; color: #5B6B82; }
.dt-search input { border: 0 !important; outline: none; padding: 8px 0 !important; width: 100%; font: 14px Inter, sans-serif; box-shadow: none !important; background: transparent; }
.dt-sort { display: flex; align-items: center; gap: 6px; font: 600 12px Inter, sans-serif; color: #5B6B82; text-transform: none; }
.dt-sort select { width: auto; padding: 7px 10px; border-radius: 8px; font: 500 13px Inter, sans-serif; }
.dlist-h { margin: 4px 0 10px; font: 800 20px Inter, sans-serif; color: #0B1930; text-transform: none; }
.d-none { color: #5B6B82; padding: 16px 4px; }
/* board cards */
.bc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3E8F0; border-radius: 14px; box-shadow: 0 1px 3px rgba(11,25,48,.06); overflow: hidden; }
.bc[hidden] { display: none; }
.bc:hover { box-shadow: 0 6px 18px rgba(11,25,48,.10); }
.bc-head { position: relative; display: block; background: #0B1930; color: #fff; text-decoration: none; border-top: 4px solid #8DDC32; overflow: hidden; }
.bc-img { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; background-size: cover; background-position: center; }
.bc-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0B1930 0%, #0B1930 38%, rgba(11,25,48,.86) 55%, rgba(11,25,48,.35) 100%); }
.bc-head:not(.has-img) .bc-shade { background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(141,220,50,.18) 34px 44px) right / 160px 100% no-repeat; }
.bc-code { position: absolute; top: 50%; transform: translateY(-50%); font: 900 italic 44px/1 "Barlow Condensed", Inter, sans-serif; color: rgba(141,220,50,.85); letter-spacing: .04em; }
/* the title is in the same place on every card, image or not */
.bc-top { position: absolute; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.bc-type { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: #0B1930; border-radius: 999px; padding: 2px 10px; font: 700 12px Inter, sans-serif; }
.bc-type svg { width: 14px; height: 14px; color: #2f6d0c; }
.bc-st { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font: 700 12px Inter, sans-serif; }
.bc-st svg { width: 13px; height: 13px; }
.bc-st.pub { background: #8DDC32; color: #0B1930; }
.bc-st.draft { background: #fff; color: #0B1930; }
.bc-st.arch { background: #cbd5e1; color: #1e293b; }
.bc-title { position: absolute; z-index: 1; font: 800 22px/1.2 Inter, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.bc-levels { position: absolute; z-index: 1; color: #c8d2e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.bc-body { flex: 1; display: flex; flex-direction: column; }
.bc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #EEF1F5; }
.bc-stats span { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bc-stats span + span { border-left: 1px solid #E3E8F0; }
.bc-stats b { font: 800 22px/1.1 Inter, sans-serif; color: #0B1930; }
.bc-stats small { color: #334155; }
.bc-next { display: flex; align-items: center; gap: 8px; color: #0B1930; border-bottom: 1px solid #EEF1F5; }
.bc-next svg { color: #334155; flex: none; }
.bc-next b { font-weight: 700; }
.bc-pill { margin-left: auto; background: #E0EAFF; color: #1d4ed8; border-radius: 999px; font: 700 11px Inter, sans-serif; white-space: nowrap; }
.bc-acts { display: flex; margin-top: auto; flex-wrap: wrap; }
.bc-acts form { margin: 0; display: flex; }
.bc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1.5px solid #c9d1de; border-radius: 9px; background: #fff; color: #0B1930; font: 700 13px Inter, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bc-btn svg { width: 15px; height: 15px; }
.bc-btn:hover { border-color: #0B1930; }
.bc-btn.primary { background: #8DDC32; border-color: #8DDC32; color: #0B1930; flex: 1; }
.bc-btn.primary:hover { background: #7fcd27; border-color: #7fcd27; }
.bc-btn.big { padding: 11px 20px; font-size: 15px; }
.bc-btn.danger { color: #b91c1c; border-color: #f1c0c0; }
@media (max-width: 1180px) {
  .bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bc-grid { grid-template-columns: 1fr; }
  .dt-sort { width: 100%; }
  .dt-sort select { flex: 1; }
}
/* dashboard header = Board Setup header (navy band + gray tab bar) */
.dash-tile { display: grid; place-items: center; background: #13284a; border-radius: 8px; }
.dash-tile svg { width: 26px; height: 26px; color: #8DDC32; }
.dash-tabs { align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.dash-tabs .dt-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 8px; color: #0B1930; font: 600 14px Inter, sans-serif; background: none; box-shadow: none; }
.dash-tabs .dt-tab svg { width: 16px; height: 16px; }
.dash-tabs .dt-tab i { color: #5B6B82; font-weight: 500; font-style: normal; }
.dash-tabs .dt-tab.on { background: #8DDC32; color: #0B1930; box-shadow: none; }
.dash-tabs .dt-tab.on i { color: #2f6d0c; }
.dash-tabs .dt-tab:not(.on):hover { background: #fff; }
.dash-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.dash-tools .dt-search { min-width: 240px; padding: 0 10px; }
.dash-tools .dt-search input { padding: 6px 0 !important; }
.dash-tools .dt-sort select { padding: 6px 10px; }
@media (max-width: 1000px) {
  .dash-tools { margin-left: 0; width: 100%; }
  .dash-tools .dt-search { flex: 1; min-width: 0; }
}
/* dashboard cards: 4 per row on laptops, a little more compact */
.bc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bc-head { height: 112px; }
.bc-top { left: 14px; right: 12px; top: 10px; }
.bc-type, .bc-st { font-size: 11px; padding: 2px 8px; }
.bc-type svg, .bc-st svg { width: 12px; height: 12px; }
.bc-title { left: 14px; right: 14px; top: 44px; font-size: 18px; }
.bc-levels { left: 14px; right: 14px; top: 74px; font-size: 12px; }
.bc-code { font-size: 36px; right: 14px; }
.bc-body { padding: 10px 12px 12px; }
.bc-stats b { font-size: 18px; }
.bc-stats small { font-size: 11px; }
.bc-stats { padding-bottom: 8px; }
.bc-next { min-height: 34px; padding: 6px 2px; font-size: 12px; margin-bottom: 10px; }
.bc-next svg { width: 15px; height: 15px; }
.bc-pill { font-size: 10px; padding: 2px 8px; }
.bc-acts { gap: 6px; }
.bc-acts .bc-btn { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.bc-acts .bc-btn svg { width: 14px; height: 14px; }
@media (max-width: 1320px) {
  .bc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .bc-grid { grid-template-columns: 1fr; }
}
.bc-head:not(.has-img) .bc-title, .bc-head:not(.has-img) .bc-levels { right: 92px; }
.bc-next > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-pill { flex: none; }
.dm { padding: 6px 12px 6px 10px; }
.dm b { font-size: 20px; }
.dm-ic svg { width: 24px; height: 24px; }
.bc-next .muted { font-size: 12px; }
.dash-tabs { margin-bottom: 14px; }
/* Board details as a tab panel under the header */
.bd-panel { border-radius: 14px; }
.bd-panel[hidden], .sp3[hidden] { display: none; }
.bd-panel .dlg-head { padding: 14px 20px 6px; border-bottom: 0; display: block; }
.bd-panel .dlg-head h2 { margin: 0; font: 800 20px Inter, sans-serif; color: #0B1930; }
.bd-panel .dlg-body, .bd-panel .dlg-form { max-height: none !important; overflow: visible !important; }
.bd-panel .dlg-actions { position: static !important; justify-content: flex-start; flex-direction: row-reverse; }
.where-note { margin: 4px 0 10px; }
.qa-more { margin-top: 2px; }
.qa-more > summary { cursor: pointer; font-size: 13px; list-style: none; }
.qa-more > summary::-webkit-details-marker { display: none; }
.qa-more > summary::before { content: "+ "; }
.qa-more[open] > summary::before { content: "− "; }
.qa-grid { margin-top: 8px; padding: 10px 12px; background: #f6f8fb; border-radius: 10px; }
.qa-kind { display: flex; gap: 16px; flex-wrap: wrap; }
.bulk-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-tag .danger { color: #b91c1c; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.qa-grid > .full { grid-column: 1 / -1; }
.qa-grid > [hidden] { display: none; }
.qa-kind { flex-direction: row; }
.qa-kind .radio-row { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
@media (max-width: 700px) {
  .qa-grid { grid-template-columns: 1fr; }
}
.grid-form .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.grid-form .qa-kind { flex-direction: row; gap: 18px; }
.grid-form .qa-grid > [hidden] { display: none; }
@media (max-width: 700px) {
  .grid-form .qa-grid { grid-template-columns: 1fr; }
}
/* ---------- card grid + card views on the board tabs (like App settings) ---------- */
.ch-img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; }
.ch-code { display: inline-block; background: #0B1930; color: #8DDC32; font: 900 italic 18px "Barlow Condensed", Inter, sans-serif; border-radius: 6px; padding: 4px 10px; }
[data-hub] [data-card][hidden] { display: none !important; }
/* Board details: in the card grid, no form fields or buttons show; in a card, just its section */
.bd-panel { max-width: none; background: none; border: 0; box-shadow: none; }
.ovr-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ovr-list li { display: flex; gap: 14px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #EEF1F5; font-size: 14px; }
.ovr-list li span { color: #5B6B82; text-align: right; }
/* App Settings header (same as the board / dashboard headers) */
.app-tabs { margin-bottom: 14px; }
.app-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; color: #0B1930; font: 600 14px Inter, sans-serif; text-decoration: none; }
.app-tabs a svg { width: 16px; height: 16px; }
.app-tabs a[aria-current] { background: #8DDC32; }
.app-tabs a:not([aria-current]):hover { background: #fff; }
.app-badge { font-style: normal; background: #d64545; color: #fff; border-radius: 999px; padding: 0 7px; font: 700 11px/18px Inter, sans-serif; }
.app-tools form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.app-tools select, .app-tools input[type=search] { padding: 6px 10px; border-radius: 8px; font: 500 13px Inter, sans-serif; width: auto; }
.app-tools input[type=search] { min-width: 220px; }
.app-tools label { display: inline-flex; align-items: center; gap: 6px; font: 600 13px Inter, sans-serif; color: #334155; text-transform: none; }
.sub-top { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.sub-top h2 { margin: 0; font: 800 20px Inter, sans-serif; color: #0B1930; text-transform: none; }
.dir-filters-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dir-filters-bar select { max-width: 160px; }
.app-intro { margin-top: 0; }
.app-tools { justify-content: flex-end; }
.add-wrap > summary.add-sum { display: none; }
/* four tabs: filters fit on the same line again */
.app-tools { flex-basis: auto; margin: 0 0 0 auto; }
@media (max-width: 1250px) {
  .app-tools { flex-basis: 100%; justify-content: flex-end; margin-top: 4px; }
}
.req-note { display: flex; align-items: center; gap: 12px; background: #FFF5F5; border: 1px solid #f5c2c2; border-left: 4px solid #d64545; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: 14px; }
.req-note span { color: #5B6B82; flex: 1; }
.req-note .sb-btn { margin-left: auto; }
.head-btns:has(> .add-wrap:not([open])) { display: none; }
/* page toolbars under the App Settings header (that page's own buttons and filters) */
.pp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: -4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #EEF1F5; }
.pp-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-acts .new-list { position: relative; }
.pp-acts .new-list > summary { list-style: none; }
.pp-acts .new-list > summary::-webkit-details-marker { display: none; }
.nl-pop { position: absolute; left: 0; top: 110%; z-index: 20; background: #fff; border: 1px solid #E3E8F0; border-radius: 10px; box-shadow: 0 10px 24px rgba(11,25,48,.15); padding: 8px; width: 340px; }
.pp-filters .dir-filters-bar { justify-content: flex-end; }
.pp-filters select, .pp-filters input[type=search] { padding: 6px 10px; border-radius: 8px; font: 500 13px Inter, sans-serif; width: auto; }
.pp-filters input[type=search] { min-width: 210px; }
.page-toolbar { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 12px; }
.sub-tools { margin-left: auto; }
.sub-tools form { display: flex; align-items: center; gap: 8px; margin: 0; }
.sub-tools select, .sub-tools input[type=search] { padding: 6px 10px; border-radius: 8px; font: 500 13px Inter, sans-serif; width: auto; }
.sub-tools label { display: inline-flex; align-items: center; gap: 6px; font: 600 13px Inter, sans-serif; text-transform: none; }
/* second row of tabs, for areas with more than one page */
.sub-tabs a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
/* sub-tabs as folder tabs on a white sheet */
.sub-tabs { display: flex; gap: 4px; margin: 0; padding: 0 14px; position: relative; z-index: 1; }
.sub-tabs a { padding: 9px 20px 8px; border: 1px solid #DDE3EC; border-bottom: 0; border-radius: 10px 10px 0 0; background: #E9EDF3; color: #5B6B82; font: 600 13px Inter, sans-serif; margin-bottom: -1px; box-shadow: none; }
.sub-tabs a:hover { background: #F6F8FB; color: #0B1930; border-color: #DDE3EC; }
.sub-tabs a[aria-current] { background: #fff; color: #0B1930; font-weight: 700; border-color: #DDE3EC; box-shadow: inset 0 3px 0 #8DDC32; padding-bottom: 9px; }
.sub-body { background: #fff; border: 1px solid #DDE3EC; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(11,25,48,.06); margin-bottom: 16px; }
.sub-body > .panel, .sub-body > section.panel { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; }
.sub-body > :last-child { margin-bottom: 0; }
.sub-body > .req-note { margin-top: 0; }
.page-toolbar .dt-search { flex: none; width: 300px; min-width: 0; }
/* People: Status pills and list chips */
.st-pill { display: inline-block; border-radius: 999px; padding: 2px 9px; font: 700 11px Inter, sans-serif; white-space: nowrap; }
.st-pill.ok { background: #E4F5D2; color: #2f6d0c; }
.st-pill.info { background: #E0EAFF; color: #1d4ed8; }
.st-pill.plain { background: #EEF1F5; color: #475569; }
.st-pill.warn { background: #FEF3C7; color: #92400e; }
.st-pill.bad { background: #FDE8E8; color: #b91c1c; }
.st-date { display: block; margin-top: 2px; }
.st-cell { white-space: nowrap; }
.chip-s.list { background: #F1F9E8; border-color: #d9efb0; color: #2f6d0c; }
.self-form .radio-row { display: flex; gap: 10px; align-items: flex-start; text-transform: none; font: 400 14px var(--body); }
.self-form .radio-row .fine { display: block; }
/* Board details: folder sub-tabs (same look as App Settings) */
.bd-panel .sub-body { max-width: none; }
.bd-panel .bd-pre:empty { display: none; }
.bd-panel .bd-sec[hidden] { display: none; }
.bd-panel .dlg-body { padding: 0; }
.bd-panel .dlg-form { background: none; border: 0; box-shadow: none; }
.bd-panel .dlg-actions { padding: 14px 0 0; border-top: 1px solid #EEF1F5; margin-top: 12px; }
.bd-panel .bd-sec > h3:first-child { margin-top: 0; }
/* Access & people sub-tabs */
.am-body > section.panel[hidden] { display: none; }
.sub-n { font-style: normal; background: #EEF1F5; color: #475569; border-radius: 999px; padding: 0 7px; font: 700 11px/18px Inter, sans-serif; }
.sub-tabs a[aria-current] .sub-n { background: #E4F5D2; color: #2f6d0c; }
.am-toolbar { flex-direction: row-reverse; justify-content: space-between; }
.am-toolbar .ilist-head { margin: 0; }
.sub-body .am-body > section.panel { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; }
.sub-body .am-body > section#people:not([hidden]) { background: #f6f8fb; border: 1px solid #E3E8F0; border-radius: 12px; padding: 14px 16px; }
/* Board defaults sub-tabs: show only that group's sections */
.settings-one[data-sub] { max-width: none; }
.settings-one[data-sub="who"] .ss:not([data-card="who"]):not([data-card="see"]), .settings-one[data-sub="limits"] .ss:not([data-card="limits"]):not([data-card="timing"]), .settings-one[data-sub="qa"] .ss:not([data-card="question"]):not([data-card="attendance"]), .settings-one[data-sub="levels"] .ss:not([data-card="levels"]) { display: none; }
.sub-body .settings-one .ss { box-shadow: none; }
.sub-body .scope-note { margin: 0 0 12px; }
.sub-body .settings-one > section.setup-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
.sub-body .settings-one > section.setup-panel > .ss:first-child { border-top: 0; padding-top: 0; }
/* My Claims: the same header as other pages, and navy card bars with optional pictures */
.mc-head { border-radius: 14px 14px 0 0; }
.mc-underline { height: 6px; background: #EEF1F5; border-bottom: 3px solid #8DDC32; border-radius: 0 0 14px 14px; margin-bottom: 16px; }
.d-card-h.mc-bar { position: relative; overflow: hidden; background: #0B1930; color: #fff; margin: -1px -1px 12px; padding: 14px 18px; border-radius: 14px 14px 0 0; min-height: 56px; border-top: 4px solid #8DDC32; }
.d-card-h.mc-bar h2 { color: #fff; position: relative; z-index: 1; margin: 0; }
.d-card-h.mc-bar .d-card-ic { position: relative; z-index: 1; background: rgba(141,220,50,.15); }
.d-card-h.mc-bar .d-card-ic svg { color: #8DDC32; }
.mc-img { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background-size: cover; background-position: center; }
.mc-shade { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(141,220,50,.16) 34px 44px) right / 180px 100% no-repeat; }
.mc-bar.has-img .mc-shade { background: linear-gradient(90deg, #0B1930 0%, #0B1930 40%, rgba(11,25,48,.82) 58%, rgba(11,25,48,.25) 100%); }
/* Organization → Pictures */
.ap-pics { display: flex; flex-direction: column; gap: 18px; }
.ap-pic { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px 16px; }
.ap-pic-h { grid-column: 1 / -1; display: flex; flex-direction: column; }
.ap-pic-h b { font: 700 15px Inter, sans-serif; }
.ap-pic-prev { position: relative; height: 72px; border-radius: 12px; overflow: hidden; background: #0B1930; background-size: 60% 100%; background-position: right center; background-repeat: no-repeat; border-top: 4px solid #8DDC32; }
.ap-pic-prev .ap-pic-shade { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(141,220,50,.16) 34px 44px) right / 180px 100% no-repeat; }
.ap-pic-prev.has .ap-pic-shade { background: linear-gradient(90deg, #0B1930 0%, #0B1930 40%, rgba(11,25,48,.82) 58%, rgba(11,25,48,.25) 100%); }
.ap-pic-prev.has { background-size: cover; }
.ap-pic-prev.has::before { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background: inherit; }
.ap-pic-t { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #fff; font: 800 18px Inter, sans-serif; z-index: 1; }
.ap-pic-ctl { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
@media (max-width: 760px) {
  .ap-pic { grid-template-columns: 1fr; }
}
.ap-pic-prev { background-image: none !important; }
.ap-pic-prev.has::before { content: none; }
.ap-pic-prev:not(.has) .mc-img { display: none; }
/* the card bars run edge to edge across the top of their cards */
.d-card { overflow: hidden; }
.d-card > .d-card-h.mc-bar { margin: -16px -16px 12px; border-radius: 0; }
@media (max-width: 1000px) {
  .d-card > .d-card-h.mc-bar { margin: -12px -12px 10px; }
}
.bd-panel .bd-when, .bd-panel .bd-views { margin-top: 6px; }
.bd-panel .bd-sec .dlg-views[hidden] { display: none; }
.bd-views .bd-noviews { display: none; }
.bd-views .dlg-views[hidden] + .bd-noviews { display: block; }
/* Organizers: one row each */
.org-rows { display: flex; flex-direction: column; gap: 8px; }
.org-row { align-items: flex-end; }
.org-row .org-x { margin-bottom: 10px; font-size: 18px; }
.org-add { margin-top: 8px; align-self: flex-start; }
.field-row.org-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 10px; align-items: end; }
.field-row.org-row .org-x { margin: 0 0 12px; justify-self: center; }
@media (max-width: 640px) {
  .field-row.org-row { grid-template-columns: 1fr 32px; }
  .field-row.org-row label:nth-child(2) { grid-column: 1; }
  .field-row.org-row .org-x { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}
/* ===== the sign-up page: header, view tabs, sub-tabs, white sheet (same pattern as other pages) ===== */
.b-hd-tile { overflow: hidden; display: grid; place-items: center; }
.b-hd-tile img { width: 100%; height: 100%; object-fit: cover; }
.b-hd-tile.code { background: #13284a; }
.b-hd-tile.code b { color: #8DDC32; font: 900 italic 18px "Barlow Condensed", Inter, sans-serif; letter-spacing: .03em; }
.b-hd-type { display: inline-block; margin-left: 10px; background: #fff; color: #0B1930; border-radius: 999px; padding: 2px 10px; font: 700 11px Inter, sans-serif; vertical-align: middle; }
.b-hd .bh2-t { display: flex; align-items: center; flex-wrap: wrap; }
.b-hd .bh2-meta a { color: #c8d2e2; }
.b-sheet.no-subs { margin-top: 0; }
/* the "Signing up for" bar sits on the sheet as a light toolbar */
.b-sheet .b-bar { background: #F6F8FB; color: #0B1930; border: 1px solid #E3E8F0; border-radius: 10px; margin: 0 0 12px; }
.b-sheet .b-bar-lim, .b-sheet .b-bar-lim b { color: #0B1930; }
.b-sheet .b-bar-lim svg { color: #2f6d0c; }
.b-sheet .b-people a { border-color: #c9d1de; color: #0B1930; background: #fff; }
.b-sheet .b-people a[aria-current] { background: #8DDC32; border-color: #8DDC32; color: #0B1930; }
/* sign-up page: who's signing up in the header; group toggle + filters on one row */
.b-sheet .b-bar:not(:has(.b-bar-lim, .b-bar-extra, b)) { display: none; }
.b-sheet .b-tools { display: flex; gap: 10px 16px; flex-wrap: wrap; }
.b-sheet .b-tools .b-group, .b-sheet .b-tools .c-nav { margin-right: auto; }
.b-sheet .b-tools .b-filters { margin-left: auto; }
.b-group { display: inline-flex; background: #EEF1F5; border-radius: 10px; padding: 3px; gap: 2px; }
.b-group a { padding: 7px 14px; border-radius: 8px; font: 600 13px Inter, sans-serif; color: #475569; text-decoration: none; }
.b-group a[aria-current] { background: #fff; color: #0B1930; box-shadow: 0 1px 2px rgba(11,25,48,.12); }
@media (max-width: 760px) {
  .b-hd { flex-wrap: wrap; }
}
.b-sheet .b-bar { justify-content: flex-start; padding: 8px 12px; }
.b-sheet .b-bar .b-bar-lim { margin-left: 0; }
.b-sheet .b-bar .b-bar-extra { margin-left: auto; }
/* sign-up page: gray bar = who's signing up (left) + remaining spots (right); List / Calendar as folder sub-tabs */
.b-whobar { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
.b-who { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.b-who-l { font: 600 13px Inter, sans-serif; color: #475569; margin: 0 6px 0 4px; }
.b-who > a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; color: #0B1930; font: 600 14px Inter, sans-serif; text-decoration: none; }
.b-who > a[aria-current] { background: #8DDC32; }
.b-who > a:not([aria-current]):hover { background: #fff; }
.b-who .prev-as select { padding: 6px 10px; border-radius: 8px; font: 600 13px Inter, sans-serif; min-width: 240px; }
.b-who-guest { gap: 8px; padding: 6px 8px; font-size: 14px; color: #0B1930; }
.b-who-guest svg { width: 18px; height: 18px; color: #2f6d0c; }
.b-left { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; color: #0B1930; padding-right: 6px; }
.b-left svg { width: 16px; height: 16px; color: #2f6d0c; }
.b-left-x { display: inline-flex; align-items: center; gap: 4px; color: #1d4ed8; font-weight: 600; }
.fine-w { color: #5B6B82; }
.b-sheet .b-bar-fam, .b-sheet .b-bar-prev, .b-sheet .b-bar-guest { display: none !important; }
.b-vsubs { margin-top: 0; }
/* sign-up page: only the list / calendar scrolls */
.b-scroll { overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 6px; scrollbar-gutter: stable; }
html.b-fixed, html.b-fixed body { overflow: hidden; height: 100%; }
html.b-fixed footer.foot, html.b-measure footer.foot { display: none; }
html.b-fixed .b-acct { margin: 8px 0 0; }
html.b-fixed .b-sheet { margin-bottom: 0; }
/* sign-up page: a tighter fixed area so the list gets the room */
.b-hd { padding-top: 10px; padding-bottom: 10px; }
.b-hd-desc { display: block; max-width: 100%; margin-top: 3px; padding: 0; border: 0; background: none; color: #E4F5D2; font: 400 13px Inter, sans-serif; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.b-hd-desc.open { white-space: normal; }
.b-hd .bh2-l > div { min-width: 0; }
.b-hd .bh2-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-row { margin-bottom: 8px; }
.b-whobar { margin-bottom: 10px; padding-top: 4px; padding-bottom: 4px; }
.b-sheet { padding-top: 12px; }
.b-sheet .b-tools { margin-bottom: 10px; align-items: center; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.b-sheet .b-f select { padding: 6px 10px; font-size: 13px; }
@media (max-width: 760px) {
  .b-hd .b-hd-tile { display: none; }
  .b-hd h1 { font-size: 18px; }
  .b-hd .b-hd-type { margin-left: 6px; }
  .b-whobar .b-who-l { display: none; }
  .b-whobar { gap: 2px 8px; }
  .b-who > a { padding: 6px 12px; }
  .b-left { font-size: 12px; }
  .b-sheet { padding: 10px 10px 8px; }
  .b-sheet .b-tools { flex-wrap: nowrap; gap: 6px; }
  .b-sheet .b-tools .b-filters { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }
  .b-sheet .b-f select { max-width: 120px; padding: 5px 6px; font-size: 12px; }
  .b-group a { padding: 6px 9px; font-size: 12px; }
  .back-row { margin-bottom: 6px; }
}
/* My Account: header, tabs, sub-tabs; one part shown at a time */
.a-tabs-main { margin-bottom: 14px; }
.a-tabs-main a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; color: #0B1930; font: 600 14px Inter, sans-serif; text-decoration: none; }
.a-tabs-main a[aria-current] { background: #8DDC32; }
.a-tabs-main a:not([aria-current]):hover { background: #fff; }
.a-sheet .a-cols { display: block; }
.a-sheet .a-col { display: contents; }
.a-sheet .a-card { border: 0; box-shadow: none; padding: 0; margin: 0 0 18px; background: transparent; }
.a-sheet .a-card:last-child { margin-bottom: 0; }
.a-sheet .a-card { display: none; }
.a-sheet[data-sub="profile"] #profile, .a-sheet[data-sub="profile"] #phone, .a-sheet[data-sub="email"] #email, .a-sheet[data-sub="password"] #password, .a-sheet[data-sub="access"] #access, .a-sheet[data-sub="members"] #family, .a-sheet[data-sub="sharing"] #sharing, .a-sheet[data-sub="add"] #requests, .a-sheet[data-sub="chg"] #requests, .a-sheet[data-sub="list"] #requests { display: block; }
.a-sheet #requests .a-tabs { display: none; }
.a-sheet #requests [data-p] { display: none; }
.a-sheet[data-sub="add"] #requests [data-p="add"], .a-sheet[data-sub="chg"] #requests [data-p="chg"], .a-sheet[data-sub="list"] #requests [data-p="list"] { display: block; }
.a-sheet[data-sub="profile"] #phone { border-top: 1px solid #EEF1F5; padding-top: 16px; }
/* My Account → Profile: rows with the current value and Change */
.a-sheet[data-sub="profile"] .a-cols { display: flex; flex-direction: column; }
.a-sheet[data-sub="profile"] #profile { order: 1; }
.a-sheet[data-sub="profile"] #phone { order: 2; }
.a-sheet[data-sub="profile"] #email { order: 3; }
.a-sheet[data-sub="profile"] #password { order: 4; }
.a-sheet[data-sub="profile"] #email, .a-sheet[data-sub="profile"] #password { display: block; }
.a-sheet[data-sub="profile"] .a-rowcard { border-top: 1px solid #EEF1F5 !important; padding: 14px 0 !important; margin: 0 !important; }
.a-sheet[data-sub="profile"] .a-rowcard:first-child, .a-sheet[data-sub="profile"] #profile { border-top: 0 !important; padding-top: 0 !important; }
.a-rowcard .a-h { margin-bottom: 2px; }
.a-rowcard .a-h h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #5B6B82; }
.a-sum { display: flex; align-items: center; gap: 12px; }
.a-sum-v { flex: 1; font-size: 15px; color: #0B1930; }
.a-chg { padding: 5px 14px; }
.a-edit { display: none; margin-top: 10px; padding: 12px 14px; background: #F6F8FB; border: 1px solid #E3E8F0; border-radius: 10px; }
.a-rowcard.editing .a-edit { display: block; }
.a-rowcard.editing .a-chg { display: none; }
.a-edit .a-cur { display: none; }
.a-edit-sub { margin: 0 0 8px; }
.a-cancel { margin-top: 8px; font-size: 13px; }
.a-sheet[data-sub="profile"] .a-cols { align-items: stretch; }
.a-sheet[data-sub="profile"] .a-rowcard { width: 100%; box-sizing: border-box; }
/* My Account → Family members: Add button, and Change on each person */
.fam-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.fam-add { padding: 12px 14px; background: #F6F8FB; border: 1px solid #E3E8F0; border-radius: 10px; margin-bottom: 12px; }
.fam-add[hidden] { display: none; }
.fam-add .a-h3 { margin-top: 0; }
.fam-row { display: flex; align-items: flex-start; gap: 12px; }
.fam-who { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fam-chgform { margin-top: 8px; padding: 10px 12px; background: #F6F8FB; border: 1px solid #E3E8F0; border-radius: 10px; }
.fam-chgform[hidden] { display: none; }
.fam-chgform .a-act { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.a-sheet[data-sub="members"] #family .a-loc { display: none; }
.fam-list li { display: block; padding: 10px 14px; }
.fam-list .fam-row { width: 100%; }
.fam-list .fam-who { align-items: flex-start; text-align: left; }
.fam-list .fam-chg { margin-left: auto; flex: none; }
.a-sheet #family .a-lock { display: none; }
/* ===== Check-in: header, gray bar, sub-tabs, sheet ===== */
.ck-gbar { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; padding-top: 4px; padding-bottom: 4px; }
.ck-gbar .ck-days { display: inline-flex; align-items: center; gap: 10px; }
.ck-gbar .ck-days a, .ck-gbar .ck-days .off { place-items: center; color: #0B1930; }
.ck-gbar .ck-days a:hover { background: #fff; }
.ck-gbar .ck-days .off { opacity: .35; }
.ck-gbar .ck-days b { font: 700 15px Inter, sans-serif; }
.ck-gbar .ck-days svg { width: 18px; height: 18px; }
.ck-gbar .ck-sum { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #0B1930; padding-left: 6px; }
.ck-bar-p { display: inline-block; width: 120px; height: 6px; background: #dfe5ee; border-radius: 99px; overflow: hidden; margin-left: 8px; }
.ck-bar-p i { display: block; height: 100%; background: #8DDC32; }
.ck-gbar .ck-allf { margin: 0; }
.ck-sheet .ck-list { margin: 0; }
.ck-sheet .d-card { border: 0; box-shadow: none; padding: 0; background: transparent; margin: 0; }
.ck-sheet[data-sub] .ck-p-roster, .ck-sheet[data-sub] .ck-p-waitlist { display: none; }
.ck-sheet[data-sub="roster"] .ck-p-roster, .ck-sheet[data-sub="waitlist"] .ck-p-waitlist { display: block; }
.ck-scroll { overflow-y: auto; overscroll-behavior: contain; }
.ck-walk h3 { margin-top: 0; }
@media (max-width: 760px) {
  .ck-bar-p { width: 70px; }
  .ck-gbar .ck-allf { width: 100%; }
  .ck-gbar .ck-allf .sb-btn { width: 100%; justify-content: center; }
}
/* list-only scrolling: ignore "fill the window" minimum heights while measuring and while fixed */
html.b-measure body, html.b-measure main, html.b-measure .page, html.b-measure .app, html.b-measure .shell, html.b-fixed body, html.b-fixed main, html.b-fixed .page, html.b-fixed .app, html.b-fixed .shell { min-height: 0 !important; }
.ck-wrap { max-width: none; padding-top: 0; }
/* Reports: header, gray bar (board/team + CSV), sub-tabs, sheet */
.r-wrap { max-width: none; padding-top: 0; }
.r-gbar { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; padding-top: 4px; padding-bottom: 4px; }
.r-gbar .r-pick { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.r-pick-l { font: 600 13px Inter, sans-serif; color: #475569; margin-left: 4px; }
.r-gbar .r-pick select { padding: 6px 10px; border-radius: 8px; font: 600 13px Inter, sans-serif; width: auto; min-width: 220px; }
.r-gbar .sb-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.r-sheet .r-card { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.r-sheet .r-note, .r-sheet .r-lim { margin: 0 0 10px; }
@media (max-width: 760px) {
  .r-gbar .r-pick select { min-width: 0; max-width: 100%; }
}
/* Check-in: normal page width (like everything else); one list with + Add walk-in */
.ck-wrap, .r-wrap { max-width: 1440px; }
.ck-listbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ck-listbar h3, .ck-wlh { margin: 0; font: 700 15px Inter, sans-serif; color: #0B1930; }
.ck-wlh { margin: 16px 0 8px; }
.ck-sheet .ck-walk { background: #F6F8FB !important; border: 1px solid #E3E8F0 !important; border-radius: 12px; padding: 12px 14px !important; margin: 0 0 12px !important; }
.ck-walk[hidden] { display: none; }
.ck-walk .a-act { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.ck-sheet .ck-p-roster, .ck-sheet .ck-p-waitlist { display: block !important; }
/* phones: big tap targets, tidy bars */
@media (max-width: 760px) {
  .ck-hd h1 { font-size: 20px; }
  .ck-hd .bh2-meta { white-space: normal; }
  .ck-gbar .ck-days b { font-size: 14px; }
  .ck-gbar .ck-sum { font-size: 13px; }
  .ck-p { flex-wrap: wrap; gap: 8px; }
  .ck-p .ck-name { flex: 1 1 100%; }
  .ck-p .ck-btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ck-p .ck-btns button { min-height: 46px; font-size: 16px; }
  .ck-card { grid-template-columns: 1fr auto; }
  .ck-card .ck-time { grid-column: 1 / -1; }
  .ck-walk .a-row { flex-direction: column; }
}
/* Check-in: lock note; centered day arrows */
.ck-lock { font: 600 12px Inter, sans-serif; color: #2f6d0c; background: #E4F5D2; border-radius: 999px; padding: 3px 10px; margin-left: auto; margin-right: 4px; }
.ck-lock.on { color: #92400e; background: #FEF3C7; }
.ck-btns button:disabled { opacity: .45; cursor: not-allowed; }
.ck-gbar .ck-days a, .ck-gbar .ck-days .off { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; line-height: 0; border: 1px solid #c9d1de; border-radius: 8px; background: #fff; box-sizing: border-box; }
.ck-gbar .ck-days .off { background: transparent; border-color: #dfe5ee; }
.ck-gbar .ck-days a svg, .ck-gbar .ck-days .off svg { display: block; width: 16px; height: 16px; margin: 0; }
.ck-gbar .ck-days a:hover { border-color: #0B1930; }
@media (max-width: 760px) {
  .ck-lock { margin-left: 0; }
}
/* a session's People page (Board setup): board header, session line, one list with + Add someone */
.sp-session { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid #EEF1F5; }
.sp-session b { font: 800 20px Inter, sans-serif; color: #0B1930; }
.sp-session span { font-size: 14px; color: #5B6B82; }
.sp-addbox { background: #F6F8FB; border: 1px solid #E3E8F0; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.sp-addbox[hidden] { display: none; }
.sp-addbox h3 { margin: 0 0 8px; font: 700 15px Inter, sans-serif; }
.sp-addbox .q-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.sp-in .sp-list { margin-top: 0; }
/* Create Board: header, step tabs, sheet */
.wz-tabs { margin-bottom: 14px; }
.wz-tabs .wz-progress { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wz-tabs .wz-progress li { margin: 0; padding: 0; border: 0; background: none; flex: none; }
.wz-tabs .wz-progress li::before, .wz-tabs .wz-progress li::after { content: none; }
.wz-tabs .wz-progress button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 8px; background: none; color: #475569; font: 600 14px Inter, sans-serif; cursor: pointer; }
.wz-tabs .wz-progress button span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #dfe5ee; color: #475569; font: 700 12px Inter, sans-serif; }
.wz-tabs .wz-progress li.now button { background: #8DDC32; color: #0B1930; }
.wz-tabs .wz-progress li.now button span { background: #0B1930; color: #8DDC32; }
.wz-tabs .wz-progress li.done button { color: #0B1930; }
.wz-tabs .wz-progress li.done button span { background: #2f6d0c; color: #fff; font-size: 0; }
.wz-tabs .wz-progress li.done button span::after { content: "✓"; font-size: 12px; }
.wz-tabs .wz-progress li.done button:hover { background: #fff; }
.wz-tabs .wz-progress button:disabled { cursor: default; opacity: .7; }
.sub-body.wizard { max-width: none; }
.wizard .wz-h3 { margin: 18px 0 8px; font: 800 16px Inter, sans-serif; color: #0B1930; }
.wizard .wz-h3:first-child { margin-top: 0; }
.wizard .wz-h3 .opt { font: 400 12px Inter, sans-serif; color: #5B6B82; }
.wizard .wz-nav { border-top: 1px solid #EEF1F5; margin-top: 16px; padding-top: 14px; }
.sub-body.wizard form, .sub-body.wizard .wz-step { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0; }
.wizard .wz-nav #wz-next, .wizard .wz-nav #wz-create { background: #8DDC32; border-color: #8DDC32; color: #0B1930; border-radius: 9px; }
.wizard .wz-nav #wz-next:hover, .wizard .wz-nav #wz-create:hover { background: #7fcd27; }
.wizard .wz-nav #wz-back { border-radius: 9px; }
/* Duplicate board */
.cp-gbar { padding: 10px 14px; margin-bottom: 14px; }
.cp-has { font-size: 14px; color: #0B1930; }
.cp-has b { font-weight: 700; }
.cp-sheet .copy-form { max-width: 860px; }
.cp-acts { display: flex; gap: 12px; align-items: center; border-top: 1px solid #EEF1F5; padding-top: 14px; margin-top: 6px; }
.cp-acts { flex-direction: row !important; justify-content: flex-end !important; }
/* public-link cancel page */
.gc-sheet { max-width: none; }
.gc-box { max-width: 560px; margin: 8px auto; text-align: center; padding: 20px 22px; border: 1px solid #E3E8F0; border-radius: 14px; background: #fff; }
.gc-box h2 { margin: 0 0 10px; font: 800 22px Inter, sans-serif; color: #0B1930; }
.gc-box.done h2 { color: #2f6d0c; }
.gc-who { margin: 0; font-size: 17px; }
.gc-when { margin: 4px 0 14px; color: #475569; }
.gc-form { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; align-items: center; }
.gc-back { text-align: center; margin: 12px 0 0; }
/* ===== People import ===== */
.imp1 .choice-row { margin-bottom: 14px; }
.imp-drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px; border: 2px dashed #c9d1de; border-radius: 12px; background: #F6F8FB; margin-bottom: 12px; }
.imp-drop.over { border-color: #8DDC32; background: #F1F9E8; }
.imp-drop svg { width: 26px; height: 26px; color: #2f6d0c; flex: none; }
.imp-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.imp-drop #imp-fname { margin-left: auto; font-weight: 600; color: #0B1930; }
.imp-map-top .imp-kind { margin-left: 8px; white-space: nowrap; }
.imp-sect { border-top: 1px solid #EEF1F5; padding-top: 12px; margin-top: 12px; }
.imp-sect h3 { margin: 0 0 8px; font: 800 15px Inter, sans-serif; color: #0B1930; }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.imp-grid select, .imp-par select { width: 100%; }
.imp-pars { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.imp-par { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #F6F8FB; border-radius: 10px; }
.imp-ready { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.imp-sum b.warn { color: #92400e; }
.imp-sum b.bad { color: #b91c1c; }
.imp-dlg { width: min(1280px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(11,25,48,.3); }
.imp-dlg form { display: flex; flex-direction: column; max-height: 92vh; }
.imp-dlg-h { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #0B1930; color: #fff; }
.imp-dlg-h h2 { margin: 0; color: #fff; font: 800 20px Inter, sans-serif; }
.imp-dlg-h .fine { color: #c8d2e2; margin: 2px 0 0; }
.imp-dlg-h .dlg-x { color: #fff; }
.imp-dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: #EEF1F5; border-bottom: 3px solid #8DDC32; flex-wrap: wrap; }
.imp-filt { display: flex; gap: 4px; flex-wrap: wrap; }
.imp-filt a { padding: 6px 12px; border-radius: 8px; color: #0B1930; font: 600 13px Inter, sans-serif; text-decoration: none; }
.imp-filt a[aria-current] { background: #8DDC32; }
.imp-filt a i { font-style: normal; color: #5B6B82; margin-left: 2px; }
.imp-dlg-body { overflow: auto; flex: 1; padding: 0 14px; }
.imp-rt { width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-rt th { position: sticky; top: 0; background: #fff; text-align: left; font: 700 11px Inter, sans-serif; text-transform: uppercase; color: #5B6B82; padding: 10px 8px; border-bottom: 1px solid #E3E8F0; z-index: 1; }
.imp-rt td { padding: 9px 8px; border-bottom: 1px solid #EEF1F5; vertical-align: top; }
.imp-r.st-problem { background: #FFF7F7; }
.imp-r.st-match { background: #FFFBEB; }
.imp-ps { font-size: 12px; color: #475569; }
.imp-det { max-width: 300px; }
.imp-msgs { margin: 0; padding-left: 16px; }
.imp-msgs li { margin: 1px 0; }
.imp-msgs li.w { color: #92400e; }
.imp-pick { list-style: none; margin-left: -16px !important; margin-top: 4px !important; }
.imp-pick select { max-width: 340px; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1.5px solid #d97706; }
.imp-edrow td { background: #F6F8FB; }
.imp-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.imp-ed label { display: flex; flex-direction: column; gap: 3px; font: 600 11px Inter, sans-serif; color: #475569; text-transform: none; }
.imp-ed input, .imp-ed select, .imp-ed-p input { padding: 6px 8px; font-size: 13px; border-radius: 7px; }
.imp-ed-ps { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.imp-ed-p { display: grid; grid-template-columns: 70px repeat(4, minmax(0, 1fr)) 28px; gap: 6px; align-items: center; font-size: 12px; }
.imp-dlg-f { display: flex; justify-content: space-between; padding: 12px 18px; border-top: 1px solid #E3E8F0; flex-wrap: wrap; background: #fff; }
.imp-tolist-r { display: flex; gap: 8px; }
.imp-dlg-acts { display: flex; gap: 10px; align-items: center; }
.imp-done-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.imp-done-acts form { margin: 0; }
@media (max-width: 760px) {
  .imp-ed-p { grid-template-columns: 1fr 1fr; }
  .imp-ed-p b { grid-column: 1 / -1; }
}
.imp-r.out td { opacity: 1; }
.imp-r.out td:nth-child(-n/**/+4) { opacity: .5; }
.imp-r.out td:nth-child(5) { opacity: .75; }
.imp-ps { margin-top: 4px; }
.imp-lbl { display: block; font: 700 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #5B6B82; }
.imp-p1 { font-size: 12px; color: #0B1930; line-height: 1.45; }
.imp-em { color: #5B6B82; word-break: break-all; }
.imp-tolist-r { flex-wrap: wrap; align-items: center; }
.imp-tolist-r input[name=new_lists] { min-width: 380px; flex: 1; padding: 6px 10px; border-radius: 8px; }
.imp-dlg-f .imp-tolist { flex: 1; min-width: 0; }
.imp-lists .imp-tolist-r input { min-width: 0; width: 100%; flex-basis: 100%; }
.imp-tolist-r .tag-box { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; width: auto !important; white-space: nowrap; padding: 4px 10px; font-size: 12px; }
.imp-dlg-f { flex-direction: column; align-items: stretch; gap: 10px; }
.imp-dlg-f .imp-dlg-acts { justify-content: flex-end; }
.imp-dlg-f .imp-lists, .imp-dlg-f .imp-tolist { flex: none; }
.imp-lists .imp-tolist { display: block; }
.imp-lists .imp-tolist > span:first-child { display: block; margin-bottom: 6px; }
.imp-dlg form > .imp-dlg-body { flex: 1 1 auto; min-height: 120px; }
.imp-lists { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; align-items: flex-start; }
.imp-lists > .imp-tolist { flex: 1 1 320px; min-width: 0; }
.imp-dlg form > .imp-dlg-f { flex: none !important; }
/* ===== App Settings → People → Communication ===== */
.cm-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cm-h h2, .cm-group h2 { margin: 0 0 4px; font: 800 18px Inter, sans-serif; color: #0B1930; }
.cm-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: #334155; margin-top: 8px; }
.cm-sum code, .cm-subj, .cm-chip { font: 600 12px ui-monospace, Menlo, monospace; }
.cm-bform { margin-top: 14px; border-top: 1px solid #EEF1F5; padding-top: 14px; }
.cm-bform[hidden] { display: none; }
.cm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cm-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cm-logo img { height: 56px; max-width: 220px; background: #0B1930; padding: 6px 10px; border-radius: 8px; }
.cm-colors { display: flex; gap: 16px; }
.cm-colors label { display: flex; flex-direction: column; gap: 4px; font: 600 12px Inter, sans-serif; text-transform: none; }
.cm-colors input[type=color] { width: 64px; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid #c9d1de; }
.cm-vars { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.cm-var { display: flex; align-items: center; gap: 4px; }
.cm-var input { padding: 6px 8px; border-radius: 7px; font-size: 13px; }
.cm-var input[name=var_name] { width: 160px; font-family: ui-monospace, Menlo, monospace; }
.cm-var input[name=var_value] { flex: 1; max-width: 420px; }
.cm-br, .cm-eq { color: #5B6B82; font: 600 13px ui-monospace, Menlo, monospace; }
.cm-table td { vertical-align: top; }
.cm-table td:first-child b { display: block; }
.cm-table .st-pill { margin-top: 3px; }
.cm-subj { color: #334155; background: #F6F8FB; padding: 2px 6px; border-radius: 5px; }
.cm-meta { margin: -4px 0 12px; }
.cm-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cm-form { display: flex; flex-direction: column; gap: 10px; }
.cm-form textarea { font: 14px/1.5 Inter, sans-serif; }
.cm-vars-pick > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 4px 0; }
.cm-vg { font: 700 11px Inter, sans-serif; text-transform: uppercase; color: #5B6B82; width: 86px; }
.cm-chip { border: 1px solid #c9d1de; background: #fff; border-radius: 999px; padding: 3px 9px; color: #0B1930; cursor: pointer; }
.cm-chip:hover { border-color: #8DDC32; background: #F1F9E8; }
.cm-acts { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #EEF1F5; padding-top: 12px; }
.cm-acts > span { display: flex; gap: 8px; }
.cm-prev { position: sticky; top: 96px; padding: 0; overflow: hidden; }
.cm-prev-h { padding: 10px 14px; border-bottom: 1px solid #EEF1F5; }
.cm-prev-subj { padding: 8px 14px; background: #F6F8FB; font-size: 13px; border-bottom: 1px solid #EEF1F5; }
.cm-prev iframe { width: 100%; height: 620px; border: 0; display: block; background: #f3f5f9; }
@media (max-width: 1000px) {
  .cm-edit, .cm-cols { grid-template-columns: 1fr; }
  .cm-prev { position: static; }
}
/* ===== Shadow mode ===== */
.sh-bar { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; background: repeating-linear-gradient(135deg, #7c2d12 0 14px, #9a3412 14px 28px); color: #fff; font: 500 14px Inter, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sh-tag { background: #fde68a; color: #7c2d12; border-radius: 999px; padding: 2px 10px; font: 800 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.sh-who span { opacity: .85; }
.sh-note { opacity: .85; font-size: 13px; }
.sh-bar a { color: #fff; font-weight: 700; }
.sh-held { margin-left: auto; }
.sh-exit { background: #fff; color: #7c2d12 !important; border-radius: 8px; padding: 5px 12px; text-decoration: none; }
.sh-cont { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 14px; border: 2px dashed #f59e0b; border-radius: 12px; background: rgba(245,158,11,.1); }
.sh-cont > b { color: #b45309; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.sh-intro p { margin: 0; }
.sh-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.sh-cols h3 { margin: 0 0 10px; font: 800 16px Inter, sans-serif; }
.sh-find { width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; }
.sh-list { max-height: 520px; overflow: auto; border: 1px solid #EEF1F5; border-radius: 10px; }
.sh-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #EEF1F5; margin: 0; }
.sh-row[hidden] { display: none; }
.sh-p { flex: 1; display: flex; flex-direction: column; }
.sh-rh { margin-top: 18px !important; }
.sh-recent { margin: 0; padding-left: 18px; font-size: 13px; color: #334155; }
.sh-person { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.sh-ob { background: #f3f5f9; font-family: Inter, sans-serif; }
.sh-ob-wrap { max-width: 900px; margin: 0 auto; padding: 20px; }
.sh-ob-h { display: flex; justify-content: space-between; align-items: center; }
.sh-ob-m { background: #fff; border: 1px solid #E3E8F0; border-radius: 10px; margin: 10px 0; padding: 10px 14px; }
.sh-ob-m summary { cursor: pointer; }
.sh-ob-m iframe { width: 100%; height: 560px; border: 0; margin-top: 10px; }
@media (max-width: 900px) {
  .sh-cols { grid-template-columns: 1fr; }
  .sh-held { margin-left: 0; }
}
.sh-ob-acts { display: flex; gap: 8px; margin-top: 10px; }
.sh-ob-acts form, .sh-ob-all { margin: 0; }
.sh-ob-all { margin: 8px 0; }
.sh-ob-m summary .st-pill { margin-left: 8px; }
.sh-ob-ok, .sh-ob-err { padding: 8px 12px; border-radius: 8px; }
.sh-ob-ok { background: #E4F5D2; color: #2f6d0c; }
.sh-ob-err { background: #FDE8E8; color: #b91c1c; }
.sh-ob h1 { text-transform: none; letter-spacing: 0; font: 800 24px Inter, sans-serif; color: #0B1930; margin: 0; }
.sh-vlist { max-height: 300px; margin-bottom: 6px; }
.sh-links { padding-left: 18px; }
.sh-links li { margin: 4px 0; }
.sh-links-a { margin-left: auto; }
.sh-links-a + .sh-held { margin-left: 0; }
.sh-ob h3 { text-transform: none; letter-spacing: 0; font: 800 16px Inter, sans-serif; color: #0B1930; margin: 18px 0 6px; }
/* Board → Notifications */
/* Board → Notifications */
.nt-sheet { display: flex; flex-direction: column; gap: 4px; }
.nt-sec { padding: 4px 0 14px; border-bottom: 1px solid #EEF1F5; margin-bottom: 10px; }
.nt-sec h3 { margin: 0 0 4px; font: 800 16px Inter, sans-serif; color: #0B1930; }
.nt-when select { max-width: 260px; }
.nt-sw { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; text-transform: none; font: 400 14px Inter, sans-serif; }
.nt-sw .fine { display: block; }
.mg-pick select { max-width: 520px; }
.mg-pv { margin-top: 12px; padding: 12px 14px; background: #F6F8FB; border: 1px solid #E3E8F0; border-radius: 10px; }
.mg-pv h3 { margin: 0 0 6px; font: 800 16px Inter, sans-serif; }
.mg-pv ul { margin: 0 0 10px; padding-left: 18px; }
.mg-link { margin: 0 0 10px; }
.cm-btns { white-space: nowrap; }
.cm-btns .sb-btn + .sb-btn { margin-left: 6px; }
/* import: Not in this file · Clean up */
.imp-miss h2 { margin: 0 0 4px; font: 800 18px Inter, sans-serif; }
.imp-miss-pick select { max-width: 360px; }
.imp-miss-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.imp-miss-a { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px 12px; background: #F6F8FB; border-radius: 10px; }
.cu-warn { color: #b45309; font-weight: 600; margin-top: 2px; }
.cu-bulk { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.cu-t td { vertical-align: top; }
@media (max-width: 800px) {
  .imp-miss-acts { grid-template-columns: 1fr; }
}
/* Organization → Old data */
.od h3 { margin: 16px 0 6px; font: 800 16px Inter, sans-serif; }
.od-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.od-step { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; background: #F6F8FB; border: 1px solid #E3E8F0; border-radius: 12px; }
.od-rm { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 800px) {
  .od-steps { grid-template-columns: 1fr; }
}
/* board tabs on phones: one line each, the bar scrolls sideways (five tabs don't fit) */
@media (max-width: 760px) {
  .board-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .board-tabs::-webkit-scrollbar { display: none; }
  .board-tabs a { flex: none; white-space: nowrap; }
}

/* ===================================================================================================
   CONSISTENCY STANDARD (applies everywhere; it comes last, so it wins)
   1. Page top: the same space below the top bar on every page. 2. Back row: always above the header,
   one height, one gap to the header; nothing else above the header. 3. Form buttons: right-aligned,
   Cancel first then the main action, 16px below the last field. 4. One look for the main button (lime),
   outlined for secondary, red outline for Delete/Remove.
   =================================================================================================== */
.page, .d-wrap, .dash-page .d-wrap { padding-top: 28px !important; }
@media (max-width: 760px) { .page, .d-wrap, .dash-page .d-wrap { padding-top: 16px !important; } }
.back-row { display: flex; align-items: center; min-height: 32px; margin: 0 0 10px !important; padding: 0 !important; }
.back-btn { height: 32px; box-sizing: border-box; padding: 0 12px !important; font: 600 13px Inter, sans-serif !important; }
.back-btn svg { width: 15px; height: 15px; }
/* button rows */
.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .imp-dlg-acts, .fam-chgform .a-act, .ck-walk .a-act {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-end !important; align-items: center !important;
  gap: 10px !important; margin: 16px 0 0 !important; padding-top: 0 !important; border-top: 0 !important; width: 100%; }
.stack > .q-actions, .stack > .a-act, .a-form > .a-act, .ss-form > .q-actions, .grid-form > .q-actions { margin-top: 6px !important; }   /* those forms already space their rows 10px apart */
.q-actions > .btn-ghost:not(.danger), .q-actions > .link-dark, .q-actions > .ss-cancel, .q-actions > a.btn-ghost, .a-act > .link-dark, .a-act > .btn-ghost,
.dlg-actions > .btn-ghost, .dlg-actions > .link-dark, .st-inline-acts > .btn-ghost, .st-inline-acts > .link-dark, .imp-dlg-acts > .btn-ghost { order: -1; }
.q-actions > .danger, .a-act > .danger { order: -2; margin-right: auto; }   /* Delete/Remove sits apart, on the left */
/* the main button: lime */
.btn-small, .q-actions .b-claim, .a-act .b-claim, .st-inline-acts .b-claim, .ck-walk .a-act .b-claim, .fam-chgform .b-claim {
  background: #8DDC32 !important; border: 1px solid #8DDC32 !important; color: #0B1930 !important; border-radius: 9px !important;
  font: 700 14px Inter, sans-serif !important; padding: 9px 18px !important; min-height: 38px; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
.btn-small:hover, .q-actions .b-claim:hover, .a-act .b-claim:hover { background: #7fcd27 !important; border-color: #7fcd27 !important; }
.q-actions .btn-ghost, .a-act .btn-ghost, .dlg-actions .btn-ghost, .st-inline-acts .btn-ghost, .imp-dlg-acts .btn-ghost, .q-actions .link-dark, .a-act .link-dark {
  border-radius: 9px !important; font: 600 14px Inter, sans-serif !important; padding: 9px 16px !important; min-height: 38px; box-sizing: border-box; }
.q-actions .link-dark, .a-act .link-dark { border: 1px solid #c9d1de !important; background: #fff !important; color: #0B1930 !important; text-decoration: none !important; display: inline-flex; align-items: center; }
/* the gap above a button row is always 16px: whatever sits just above it gives up its own bottom spacing */
.wz-nav, .cm-acts { margin: 16px 0 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.wz-nav { display: flex; justify-content: flex-end; gap: 10px; } .wz-nav #wz-back { order: -1; margin-right: auto; }
:is(form, .wz-step, .ss-form, .a-form) :is(*):has(+ :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts)) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
:is(form, .ss-form, .a-form) :is(*):has(+ :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts)) :is(:last-child) { margin-bottom: 0 !important; }
/* small action forms (Requests' Approve / Mark done, Old data's Remove) follow the same rule */
.rq-act form.stack > button:last-child, .od-rm > button:last-child { margin-top: 6px !important; align-self: flex-end; }
.od-rm { gap: 10px !important; }
/* exact 16px above every button row, whatever the container spaces its parts by:
   each container states its own spacing (--row-gap, not inherited) and the row subtracts it */
@property --row-gap { syntax: "<length>"; inherits: false; initial-value: 0px; }
.stack, .dlg-body, .cm-form, .self-form { --row-gap: 10px; } .st-inline { --row-gap: 6px; } .rc-form, .grid-form { --row-gap: 14px; }
.nt-sheet { --row-gap: 4px; } .ap-pics { --row-gap: 18px; }
:is(.stack, .dlg-body, .cm-form, .self-form, .st-inline, .rc-form, .grid-form, .nt-sheet, .ap-pics, form, .ss-form, .a-form, .panel, .sub-body, div, section) > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) {
  margin-top: calc(16px - var(--row-gap-parent, 0px)) !important; }

.stack > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 6px !important; }
.dlg-body > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 6px !important; }
.cm-form > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 6px !important; }
.self-form > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 6px !important; }
.st-inline > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 10px !important; }
.rc-form > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 2px !important; }
.grid-form > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 2px !important; }
.nt-sheet > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 12px !important; }
.ap-pics > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: -2px !important; }
.ss-form:not(.rc-form) > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts), .a-form > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts) { margin-top: 16px !important; }
.a-form > :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts) { margin-top: 8px !important; }   /* .a-form spaces its parts 8px apart */
.st-inline > fieldset, .rc-form > fieldset { padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* everything nested at the bottom of what sits above a button row gives up its bottom spacing (form controls keep theirs) */
:has(+ :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts)) :is(:last-child):not(input, textarea, select, button, .choice, .tag-box, .cm-chip) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
:has(+ :is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .wz-nav, .cm-acts)):not(input, textarea, select, .choice) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* a row of choice cards (or a script tag) just above the buttons shouldn't add space either */
.opt-row:last-child, .opt-row:has(+ script:last-child), :has(+ script + :is(.q-actions, .a-act, .dlg-actions, .st-inline-acts, .cp-acts)) .opt-row:last-child,
:has(+ script + :is(.q-actions, .a-act, .dlg-actions, .st-inline-acts, .cp-acts)), .sub-q:last-of-type > .opt-row:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
:has(+ script + :is(.q-actions, .a-act, .dlg-actions, .st-inline-acts, .cp-acts)) :is(:last-child):not(input, textarea, select, button, .choice, .mode-opt, .tag-box) { margin-bottom: 0 !important; }
/* text boxes sit on their own line, with no extra space under them */
textarea { display: block; vertical-align: top; }
/* My Account → Change rows: the field takes the width, then Cancel · Save below (like every form) */
.a-edit .a-inline { display: block !important; } .a-edit .a-inline label { display: flex; flex-direction: column; gap: 4px; }
.a-edit .a-inline input { width: 100%; box-sizing: border-box; } .a-edit > .a-cancel { display: none; }
/* Requests: Decline matches Approve (note, then the button below, right) */
.rq-decline { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.rq-decline > button { align-self: flex-end; margin-top: 6px !important; }
/* one-line add / rename / filter rows: the same spacing and heights everywhere */
:is(.inline-add, .inline-edit, .bulk-tag, .bulk-bar, .rq-notify, .copy-from) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:is(.inline-add, .inline-edit, .bulk-tag, .bulk-bar, .rq-notify, .copy-from) :is(input, select, button) { min-height: 36px; box-sizing: border-box; margin: 0 !important; }
/* every main (submit) button in a button row: lime, and every button in a row the same height */
:is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .imp-dlg-acts, .wz-nav) > button[type=submit]:not(.danger):not(.link-dark):not(.btn-ghost) {
  background: #8DDC32 !important; border: 1px solid #8DDC32 !important; color: #0B1930 !important; border-radius: 9px !important; font: 700 14px Inter, sans-serif !important; padding: 9px 18px !important; }
:is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .imp-dlg-acts, .wz-nav, .cm-acts) :is(button, a) { min-height: 38px !important; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
:is(.q-actions, .a-act, .st-inline-acts, .dlg-actions, .cp-acts, .imp-dlg-acts, .wz-nav, .cm-acts) > :is(button, a, form, span) { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; }
.a-edit .a-inline > .a-act { margin-top: 16px !important; }
.rq-decline { gap: 0 !important; } .rq-decline > button { margin-top: 16px !important; }
.rq-act form.stack:not(.rq-decline) { gap: 0 !important; } .rq-act form.stack:not(.rq-decline) > button:last-child { margin-top: 16px !important; }
.rq-act form.stack.rq-decline > button:last-child { margin-top: 16px !important; }
/* Decline / Remove / Delete: red outline, the same size and corners as the other buttons */
.rq-decline > button, .q-actions > .danger, .a-act > .danger, .od-rm > button.danger, .btn-ghost.danger { color: #b91c1c !important; border: 1px solid #f0b4b4 !important; background: #fff !important;
  border-radius: 9px !important; min-height: 38px; padding: 9px 16px !important; font: 600 14px Inter, sans-serif !important; box-sizing: border-box; }
.rq-decline > button:hover, .btn-ghost.danger:hover { background: #fdf2f2 !important; border-color: #e58c8c !important; }
/* phones: nothing wider than the screen. Folder sub-tabs scroll sideways (like the board tabs); summary lines and toolbars wrap */
@media (max-width: 760px) {
  .sub-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tabs > a { flex: none; white-space: nowrap; }
  .bh2-meta, .bh2-meta * { white-space: normal !important; } .bh2-l { min-width: 0; flex-wrap: wrap; } .bh2-t { flex-wrap: wrap; min-width: 0; }
  .sub-top, .sub-tools, .c-legend, .rq-edit, .dash-tabs, .bh2-tabs:not(.board-tabs) { flex-wrap: wrap !important; min-width: 0; max-width: 100%; }
  .sub-top > *, .sub-tools > * { min-width: 0; }
  .panel, section, .sub-body { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 760px) {
  .panel, .sub-body, .sh-cols, .sh-cols > *, .sh-row, .sh-p { min-width: 0 !important; overflow-wrap: anywhere; }
  select, input:not([type=checkbox]):not([type=radio]), textarea { max-width: 100%; min-width: 0; }
  .sub-tools form, .sub-tools, form.inline-add, form.inline-edit, .copy-from, .preset-edit { flex-wrap: wrap !important; max-width: 100%; }
  .sub-tools form > *, .copy-from > *, .preset-edit > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 760px) { .settings-2, .hub-grid { grid-template-columns: minmax(0, 1fr) !important; } }
/* ===== People table: six columns, fixed widths, everything wraps inside its own column ===== */
.dir2 { table-layout: fixed; width: 100%; border-collapse: collapse; }
.dir2 col.c-chk { width: 40px; } .dir2 col.c-person { width: 22%; } .dir2 col.c-contact { width: 20%; } .dir2 col.c-family { width: 21%; } .dir2 col.c-lists { width: auto; } .dir2 col.c-status { width: 150px; }
.dir2 th { text-align: left; font: 700 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #5B6B82; padding: 10px 10px; border-bottom: 1px solid #E3E8F0; }
.dir2 td { padding: 12px 10px; border-bottom: 1px solid #EEF1F5; vertical-align: top; overflow-wrap: anywhere; min-width: 0; }
.dir2 .dir-name { font-weight: 700; color: #0B1930; text-decoration: underline; text-underline-offset: 2px; }
.dir2 .dir-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; } .dir2 .dir-team { font-size: 13px; color: #334155; }
.dir2 .dir-contact span { display: block; font-size: 13px; color: #334155; line-height: 1.45; }
.dir2 .dir-family { font-size: 13px; color: #334155; line-height: 1.45; } .dir2 .dir-lbl { display: block; font: 700 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #5B6B82; margin-bottom: 1px; }
.dir2 .dir-chips { display: flex; flex-wrap: wrap; gap: 4px; } .dir2 .dir-chips + .dir-chips { margin-top: 6px; }
.dir2 .dir-chip { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font: 600 12px/1.3 Inter, sans-serif; padding: 3px 9px; border-radius: 999px; }
.dir2 .dir-chip.list { background: #E4F5D2; color: #2f6d0c; border: 1px solid #c9e9a8; }
.dir2 .dir-chip.board { background: #EEF2F8; color: #0B1930; border: 1px solid #d6deea; border-radius: 7px; }
.dir2 .dir-more { align-self: center; }
.dir2 .st-cell { white-space: normal; } .dir2 td:last-child { min-width: 0; }
/* phones: each person is a card */
@media (max-width: 760px) {
  .dir2, .dir2 tbody, .dir2 tr, .dir2 td { display: block; width: 100%; box-sizing: border-box; } .dir2 thead, .dir2 colgroup { display: none; }
  .dir2 tr { position: relative; padding: 12px 12px 10px 42px; border: 1px solid #E3E8F0; border-radius: 12px; margin-bottom: 10px; }
  .dir2 td { padding: 3px 0; border: 0; } .dir2 td:first-child { position: absolute; left: 12px; top: 14px; width: auto; padding: 0; }
  .dir2 td[data-l]:not([data-l=""]):not([data-l="Person"])::before { content: attr(data-l); display: block; font: 700 10px Inter, sans-serif; text-transform: uppercase; color: #5B6B82; margin-top: 6px; }
  .dir2 .dir-family .dir-lbl { display: none; }
}
/* ===== RSVP ===== */
.rv { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 230px; } .rv-form input[name=note] { width: 100%; max-width: 260px; padding: 6px 9px; border-radius: 8px; font-size: 13px; }
.rv-btns { display: flex; gap: 6px; } .rv-b { min-height: 36px; padding: 7px 14px; border-radius: 9px; font: 700 13px Inter, sans-serif; cursor: pointer; border: 1px solid #c9d1de; background: #fff; color: #0B1930; }
.rv-b.yes.on { background: #8DDC32; border-color: #8DDC32; } .rv-b.no.on { background: #fde8e8; border-color: #f0b4b4; color: #b91c1c; }
.rv-b.yes:not(.on):hover { border-color: #8DDC32; } .rv-b.no:not(.on):hover { border-color: #f0b4b4; }
.rv-now { display: inline-flex; align-items: center; gap: 5px; font: 700 13px Inter, sans-serif; } .rv-now.yes { color: #2f6d0c; } .rv-now.no { color: #b91c1c; } .rv-now.none { color: #5B6B82; font-weight: 600; }
.rv-now svg { width: 15px; height: 15px; } .rv-note { font-size: 12px; color: #475569; font-style: italic; }
.rv-sum { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .rv-c { padding: 6px 12px; border-radius: 999px; font-size: 14px; background: #F6F8FB; border: 1px solid #E3E8F0; }
.rv-c.yes { background: #E4F5D2; border-color: #c9e9a8; } .rv-c.no { background: #fdf2f2; border-color: #f0c4c4; }
.rv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .rv-cols h3 { margin: 0 0 8px; font: 800 15px Inter, sans-serif; color: #0B1930; }
.rv-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .rv-h h3 { margin: 0; } .rv-h form { margin: 0; }
.rv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .rv-list li { padding: 8px 10px; border: 1px solid #EEF1F5; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.rv-list .rv-note { flex-basis: 100%; } .rv-foot { margin-top: 12px; }
@media (max-width: 900px) { .rv-cols { grid-template-columns: minmax(0, 1fr); } .rv { align-items: stretch; min-width: 0; } .rv-form input[name=note] { max-width: none; } }
/* ===== sign-in help (dark sign-in screens) ===== */
.gh-box { width: 100%; max-width: 440px; margin: 18px auto 0; text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 14px 16px; color: #dfe7f2; box-sizing: border-box; }
.gh-box summary { cursor: pointer; font: 800 16px Inter, sans-serif; color: #fff; list-style: none; } .gh-box summary::-webkit-details-marker { display: none; }
.gh-box summary::after { content: "▾"; float: right; color: #8DDC32; } .gh-box:not([open]) summary::after { content: "▸"; }
.gh-steps { counter-reset: gh; list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.gh-steps li { counter-increment: gh; position: relative; padding-left: 38px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.gh-steps li::before { content: counter(gh); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #8DDC32; color: #0B1930; font: 800 13px/26px Inter, sans-serif; text-align: center; }
.gh-steps .gh-t { color: #fff; font-weight: 700; } .gh-steps span { color: #c8d3e3; } .gh-steps.gh-tight { margin: 12px 0; }
.gh-more { margin: 12px 0 0; font-size: 14px; } .gh-more a, .gh-need a { color: #8DDC32; font-weight: 700; }
.gh-need { margin: 10px 0 0; font-size: 13px; color: #c8d3e3; } .gh-note { background: rgba(141,220,50,.12); border: 1px solid rgba(141,220,50,.35); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: #e8f6d6; text-align: left; }
.gh-page { text-align: left; max-width: 620px; } .gh-page h2 { margin: 18px 0 6px; font: 800 17px Inter, sans-serif; color: #fff; text-transform: none; letter-spacing: 0; }
.gh-faq { margin: 0; } .gh-faq dt { color: #fff; font-weight: 700; margin-top: 10px; } .gh-faq dd { margin: 2px 0 0; color: #c8d3e3; font-size: 14px; line-height: 1.5; }
.gh-back { margin-top: 18px; text-align: center; }
@media print { body.gate { background: #fff !important; } .gh-page, .gh-page * { color: #000 !important; background: none !important; } .gh-steps li::before { border: 1px solid #000; } .gh-back { display: none; } }
.gh-back .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; color: #0B1930 !important; text-decoration: none; font-weight: 800; }