/* Worship Center theme
   Palette: calm blue for action, amber for "this week", soft grey page.
   Colour-blind safe: built on the blue/orange axis (Okabe-Ito), never relies on red vs green,
   and status pills carry a symbol as well as a colour.
   Light is the default; theme.js sets data-theme="dark" on <html> for dark mode. */
:root{
  color-scheme:light;
  --ink:#1F2937;
  --primary:#2F64C7; --primary-rgb:47,100,199;
  --primary-dark:#234E9E; --primary-dark-rgb:35,78,158;
  --on-primary:#FFFFFF;
  --primary-tint:#E9F0FB; --primary-line:#C9D8F2;
  --accent:#E69F00;
  --accent-dark:#8A5A00;
  --accent-tint:#FDF4E3;
  --page:#F4F6F8;
  --surface:#FFFFFF;
  --muted:#5B6472;
  --line:#DFE3E8;
  --ok:#0B6E8A; --ok-tint:#E3F1F5; --ok-line:#B7DAE4; --ok-ink:#085A70;
  --warn:#8A5A00; --warn-tint:#FDF4E3; --warn-line:#F2D39A; --warn-ink:#6E4800;
  --bad:#B04A00; --bad-tint:#FBEDE3; --bad-line:#F0CDB4; --bad-ink:#8C3B00;
  --nav-bg:#1E2A44;
  --auth-glow:#E4ECF8;
  --brand-gradient:linear-gradient(135deg,#2F64C7 0%,#2C8DA8 100%);
  --shadow-sm:0 1px 2px rgba(31,41,55,.05),0 1px 3px rgba(31,41,55,.06);
  --shadow-md:0 4px 12px rgba(31,41,55,.08),0 2px 4px rgba(31,41,55,.04);

  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --bs-body-font-family:var(--sans);
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--page);
  --bs-emphasis-color:var(--ink);
  --bs-link-color:var(--primary);
  --bs-link-color-rgb:var(--primary-rgb);
  --bs-link-hover-color:var(--primary-dark);
  --bs-link-hover-color-rgb:var(--primary-dark-rgb);
  --bs-border-color:var(--line);
  --bs-secondary-color:var(--muted);
  --bs-focus-ring-color:rgba(var(--primary-rgb),.35);
}
/* Dark: same blue/amber axis, lifted for contrast on a deep slate background.
   Buttons switch to dark text on a lighter blue so they stay above 4.5:1. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E4E8EE;
  --primary:#7AA5F0; --primary-rgb:122,165,240;
  --primary-dark:#A3C1F5; --primary-dark-rgb:163,193,245;
  --on-primary:#0E1726;
  --primary-tint:#1B2A45; --primary-line:#2D4673;
  --accent:#E69F00;
  --accent-dark:#F2B544;
  --accent-tint:#2E2510;
  --page:#0F141B;
  --surface:#171E28;
  --muted:#9AA5B4;
  --line:#2A3441;
  --ok:#6EC1DB; --ok-tint:#11303A; --ok-line:#22505E; --ok-ink:#93D3E6;
  --warn:#F2B544; --warn-tint:#2E2510; --warn-line:#5A4516; --warn-ink:#F5C76B;
  --bad:#F0935A; --bad-tint:#36210F; --bad-line:#5C3418; --bad-ink:#F5AD80;
  --nav-bg:#141B28;
  --auth-glow:#15213A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 14px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.25);
}
[data-theme="dark"] .app-nav{border-bottom:1px solid var(--line)}
[data-theme="dark"] .brand-logo,[data-theme="dark"] .site-foot img{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.dropdown-menu{--bs-dropdown-bg:var(--surface);--bs-dropdown-border-color:var(--line);--bs-dropdown-link-color:var(--ink);--bs-dropdown-link-hover-bg:var(--primary-tint);--bs-dropdown-link-hover-color:var(--ink);--bs-dropdown-link-active-color:var(--on-primary);--bs-dropdown-divider-bg:var(--line)}

/* Theme toggle */
.theme-toggle{display:inline-flex;align-items:center;gap:.6rem;background:none;border:0;color:rgba(255,255,255,.78);font-weight:500;padding:.5rem .7rem;border-radius:999px;transition:background-color .15s,color .15s}
.theme-toggle:hover{color:#fff;background:rgba(255,255,255,.07)}
.theme-toggle svg{width:1.15rem;height:1.15rem;flex:none}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.theme-toggle.floating{position:fixed;top:1rem;right:1rem;z-index:10;padding:.6rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.theme-toggle.floating:hover{color:var(--ink);background:var(--surface)}
@media (max-width:991.98px){.app-nav .theme-toggle{width:100%;padding:.7rem .8rem;border-radius:10px}}
body{font-size:1rem;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3,.h1,.h2,.h3{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
h1,.h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.25rem);line-height:1.15}
h2,.h2{font-size:1.3rem}
h3,.h3{font-size:1.08rem}
.text-muted{color:var(--muted)!important}
.prewrap{white-space:pre-wrap}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.btn:focus-visible,.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem var(--bs-focus-ring-color);border-color:var(--primary)}

/* Buttons */
.btn{font-weight:600;border-radius:10px;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-primary{--bs-btn-color:var(--on-primary);--bs-btn-hover-color:var(--on-primary);--bs-btn-active-color:var(--on-primary);--bs-btn-disabled-color:var(--on-primary);--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary-dark);--bs-btn-hover-border-color:var(--primary-dark);--bs-btn-active-bg:var(--primary-dark);--bs-btn-active-border-color:var(--primary-dark);--bs-btn-disabled-bg:var(--primary);--bs-btn-disabled-border-color:var(--primary);box-shadow:0 1px 3px rgba(var(--primary-rgb),.25)}
.btn-primary:hover{box-shadow:0 3px 10px rgba(var(--primary-rgb),.3)}
.btn-outline-primary{--bs-btn-hover-color:var(--on-primary);--bs-btn-active-color:var(--on-primary);--bs-btn-color:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary);--bs-btn-hover-border-color:var(--primary);--bs-btn-active-bg:var(--primary-dark);--bs-btn-active-border-color:var(--primary-dark)}
.btn-ghost{--bs-btn-color:var(--muted);--bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--page);--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;padding:.2rem .5rem}
.btn-ghost.danger{--bs-btn-hover-color:var(--bad);--bs-btn-hover-bg:var(--bad-tint)}

/* Navigation */
.app-nav{background:var(--nav-bg);padding:.6rem 0;box-shadow:0 2px 10px rgba(31,41,55,.14)}
.app-nav .navbar-brand{display:flex;align-items:center;gap:.65rem;font-weight:700;letter-spacing:-.01em;font-size:1.1rem;max-width:70vw}
.app-nav .navbar-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-logo{width:2.1rem;height:2.1rem;flex:none;border-radius:9px}
.brand-mark{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:9px;background:var(--brand-gradient);color:#fff;font-family:var(--sans);font-weight:700;font-size:.8rem;flex:none}
.app-nav .nav-link{color:rgba(255,255,255,.78);font-weight:500;padding:.5rem .85rem;border-radius:999px;transition:background-color .15s,color .15s}
.app-nav .nav-link:hover,.app-nav .nav-link:focus{color:#fff;background:rgba(255,255,255,.07)}
.app-nav .nav-link.active{color:#fff;background:rgba(122,165,240,.2);box-shadow:inset 0 -2px 0 #7AA5F0}
.app-nav .dropdown-menu{border-color:var(--line);border-radius:12px;box-shadow:var(--shadow-md)}
.app-nav .dropdown-item{padding:.5rem 1rem}
.app-nav .dropdown-item.active,.app-nav .dropdown-item:active{background:var(--primary);color:var(--on-primary)}
@media (max-width:991.98px){.app-nav .navbar-nav{padding-top:.5rem}.app-nav .nav-link{padding:.7rem .8rem;border-radius:10px}}

/* Page structure */
.page{padding:1.75rem 0 3rem}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1rem;margin-bottom:1.5rem}
.page-head h1{margin:0}
.page-head .sub{color:var(--muted);margin:.25rem 0 0}
.page-head .actions{display:flex;flex-wrap:wrap;gap:.5rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow-sm)}
.panel + .panel{margin-top:1rem}
.panel h2{margin-bottom:.9rem}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:2rem 0 .75rem}
.section-title h2{margin:0}
.narrow{max-width:640px}

/* Date block: the planner's signature element */
.date-block{flex:none;width:4.25rem;text-align:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.35rem 0 .45rem;line-height:1}
.date-block .dow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.date-block .day{display:block;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:1.9rem;margin:.2rem 0 .15rem}
.date-block .mon{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.date-block.now{border:2px solid var(--primary);background:var(--primary-tint)}
.date-block.now .day,.date-block.now .dow,.date-block.now .mon{color:var(--primary-dark)}
.date-block.lg{width:5.25rem}
.date-block.lg .day{font-size:2.5rem}

/* Plan rows */
.plan-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
.plan-list > li{min-width:0}
.plan-row > form,.plan-row > div:last-child.d-flex{flex:none}
@media (max-width:575.98px){li.plan-row{flex-wrap:wrap}li.plan-row > .d-flex{width:100%;padding-left:5.25rem}}
.plan-row{display:flex;gap:1rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.75rem 1rem;color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,transform .15s}
a.plan-row:hover{border-color:rgba(var(--primary-rgb),.45);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.plan-row .body{flex:1;min-width:0}
.plan-row .title{font-weight:600;font-size:1.05rem}
.plan-row .meta{color:var(--muted);font-size:.9rem}
.plan-row .songs{font-size:.9rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.week-label{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--muted);margin:1.6rem 0 .6rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.week-label::after{content:"";flex:1;border-top:1px solid var(--line)}
.week-label.now{color:var(--primary-dark)}

/* Featured "this week" */
.feature{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:1.4rem 1.25rem 1.25rem 1.4rem;display:flex;gap:1.25rem;flex-wrap:wrap;box-shadow:var(--shadow-md)}
.feature::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--brand-gradient)}
.feature .body{flex:1;min-width:14rem}
.feature h2{font-size:1.6rem;margin:0 0 .25rem}
.feature .theme{font-style:italic;color:var(--muted);margin-bottom:.75rem}
.feature-songs{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.25rem}
.feature-songs li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line);padding:.3rem 0}

/* Pills / chips */
.pill{display:inline-block;font-size:.76rem;font-weight:600;padding:.18rem .6rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.pill.draft{border-color:var(--line);color:var(--muted);background:var(--surface)}
.pill.published{background:var(--primary-tint);color:var(--primary-dark)}
.pill.pending{background:var(--warn-tint);color:var(--warn)}
.pill.accepted{background:var(--ok-tint);color:var(--ok)}
.pill.declined{background:var(--bad-tint);color:var(--bad)}
/* Symbol cues so status never depends on colour alone */
.pill.accepted::before{content:"\2713\00a0"}
.pill.declined::before{content:"\2715\00a0"}
.pill.pending::before{content:"\25CB\00a0"}
.pill.role{background:var(--page);border-color:var(--line);color:var(--ink)}
.key-chip{flex:none;display:inline-grid;place-items:center;min-width:2.6rem;height:2.6rem;padding:0 .4rem;border-radius:10px;background:var(--primary-tint);color:var(--primary-dark);font-weight:700;font-size:1.02rem}

/* Plan detail */
.plan-head{display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.25rem}
.plan-head .body{flex:1;min-width:14rem}
.plan-head h1{margin:0 0 .2rem}
.plan-head .theme{font-style:italic;color:var(--muted);margin:.25rem 0 .5rem}
.plan-head .actions{display:flex;flex-wrap:wrap;gap:.5rem;width:100%}
@media (min-width:768px){.plan-head .actions{width:auto}}
.callout{border:1px solid var(--warn-line);background:var(--accent-tint);border-radius:14px;padding:.85rem 1rem;margin-bottom:1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.plan-tabs{border-bottom:0;gap:.25rem;flex-wrap:nowrap;overflow-x:auto}
.plan-tabs .nav-link{color:var(--muted);font-weight:600;border:1px solid transparent;border-radius:12px 12px 0 0;white-space:nowrap}
.plan-tabs .nav-link:hover{color:var(--primary)}
.plan-tabs .nav-link.active{color:var(--primary-dark);background:var(--surface);border-color:var(--line) var(--line) var(--surface);box-shadow:inset 0 3px 0 var(--primary)}
.plan-tabs .count{font-weight:500;color:var(--muted);margin-left:.25rem}
.tab-panel{border-top-left-radius:0}

.setlist{list-style:none;counter-reset:song;margin:0;padding:0}
.setlist li{counter-increment:song;display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.setlist li:last-child{border-bottom:0}
.setlist li::before{content:counter(song);flex:none;width:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary);text-align:right}
.setlist .main{flex:1;min-width:0}
.setlist .title{font-weight:600}
.setlist .meta{color:var(--muted);font-size:.88rem}
.row-tools{display:flex;gap:.15rem;flex:none}
.row-tools form{display:inline}

/* Drag-and-drop ordering */
.sortable li{background:var(--surface);border-radius:10px;transition:box-shadow .15s,background-color .15s}
.drag-handle{flex:none;display:inline-grid;place-items:center;width:2rem;height:2.25rem;margin-left:-.25rem;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:grab;touch-action:none}
.drag-handle:hover{color:var(--primary);background:var(--primary-tint)}
.drag-handle svg{width:1.15rem;height:1.15rem}
.sortable.is-sorting{cursor:grabbing;user-select:none}
.sortable.is-sorting .drag-handle{cursor:grabbing}
.sortable li.dragging{position:relative;z-index:2;background:var(--primary-tint);box-shadow:var(--shadow-md),0 0 0 2px var(--primary);border-bottom-color:transparent}
.rename-form{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.rename-form .form-control{flex:1 1 12rem;min-width:0}

/* Service templates */
.template-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.25rem;padding:.65rem .75rem;margin-bottom:1rem;border:1px solid var(--line);border-radius:12px;background:var(--page)}
.template-bar form{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.template-bar .form-label{font-size:.85rem;margin-right:.15rem}
.template-bar .form-select,.template-bar .form-control{width:auto;min-width:0;max-width:100%}
.template-bar .template-apply .form-select:first-of-type{min-width:11rem}
.template-bar .template-save .form-control{width:13rem}
@media (max-width:575.98px){
  .template-bar form{width:100%}
  .template-bar .form-select,.template-bar .form-control,.template-bar .template-save .form-control{flex:1 1 100%;width:100%}
  .template-bar .btn{flex:1 1 auto}
}
.template-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.template-card{display:flex;gap:1rem;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.template-card:hover{border-color:rgba(var(--primary-rgb),.45);box-shadow:var(--shadow-md);color:inherit}
.template-card .body{min-width:0;flex:1}
.template-card .title{font-weight:700;font-size:1.05rem}
.template-card .meta{color:var(--muted);font-size:.9rem}
.template-card .preview{color:var(--muted);font-size:.85rem;margin-top:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-card .stats{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;flex:none}
.template-card .stats span{font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--primary-dark);background:var(--primary-tint);border-radius:999px;padding:.1rem .55rem}
.template-details{margin-top:1rem;padding-top:1.1rem}

/* Order of service tab */
.order-summary{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem}
.order-summary span{font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--primary-dark);background:var(--primary-tint);border-radius:999px;padding:.15rem .65rem}
details.add-box summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;color:var(--primary)}
details.add-box summary::-webkit-details-marker{display:none}
details.add-box summary::before{content:"+";display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:6px;background:var(--primary-tint);font-weight:700}
details.add-box[open] summary::before{content:"\2212"}
details.add-box summary h3{margin:0;color:inherit}
details.add-box[open] summary{margin-bottom:.9rem}

/* Order table. Full table from 768px up; below that each row becomes a stacked card. */
.runsheet{width:100%;border-collapse:collapse}
.runsheet td,.runsheet th{padding:.65rem .6rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;overflow-wrap:anywhere}
.runsheet th{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--page);white-space:nowrap;overflow-wrap:normal}
.runsheet thead th:first-child{border-top-left-radius:8px}
.runsheet thead th:last-child{border-top-right-radius:8px}
.runsheet tbody tr:hover{background:var(--primary-tint)}
.runsheet .type-cell{width:8.5rem}
.type-tag{display:inline-block;font-size:.76rem;font-weight:600;white-space:nowrap;padding:.12rem .55rem;border-radius:6px;background:var(--page);border:1px solid var(--line);color:var(--ink)}
.runsheet .item-cell{font-weight:600}
.runsheet .mins{width:5rem;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.runsheet th.mins{text-align:right}
.runsheet .person-cell{width:18%}
.runsheet .notes-cell{width:26%;color:var(--muted);font-size:.92rem}
.runsheet .tools-cell{width:1%;white-space:nowrap}
.runsheet .handle-cell{width:2.5rem;padding-left:.25rem;padding-right:0;vertical-align:middle}
.runsheet .handle-cell .drag-handle{margin-left:0}
.new-row-mark{display:inline-grid;place-items:center;width:2rem;color:var(--muted);font-weight:700;font-size:1.1rem}
[data-sortable].is-sorting{cursor:grabbing;user-select:none}
[data-sortable].is-sorting .drag-handle{cursor:grabbing}
.runsheet tr.dragging td{position:relative;z-index:2;background:var(--primary-tint);border-top:2px solid var(--primary);border-bottom:2px solid var(--primary)}
.runsheet tfoot td{font-weight:700;border-bottom:0}
.runsheet .new-row td{background:var(--page);border-bottom:2px dashed var(--line);vertical-align:middle;padding:.5rem .35rem}
.runsheet tbody tr.new-row:hover{background:none}
.runsheet .new-row .form-control,.runsheet .new-row .form-select,
.runsheet .is-editing .form-control,.runsheet .is-editing .form-select{font-size:.9rem;padding-top:.35rem;padding-bottom:.35rem;min-width:0}
.runsheet .new-row .mins .form-control,.runsheet .is-editing .mins .form-control{text-align:right}
.runsheet .new-row .form-control::placeholder,.runsheet .is-editing .form-control::placeholder{color:var(--muted);opacity:.8}
/* A row being edited inline */
.runsheet tbody tr.is-editing,.runsheet tbody tr.is-editing:hover{background:var(--primary-tint)}
.runsheet tr.is-editing td{vertical-align:middle;padding:.5rem .35rem}

@media (max-width:767.98px){
  .runsheet,.runsheet tbody,.runsheet tfoot{display:block;width:100%}
  .runsheet thead{display:none}
  .runsheet tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .75rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
  .runsheet tbody tr:hover{background:none}
  .runsheet td{display:block;border:0;padding:0;width:auto;min-width:0;white-space:normal}
  .runsheet td:empty,.runsheet tr:not(.is-editing) td:has(> [data-row-view]:empty){display:none}
  .runsheet .type-cell{grid-column:1;grid-row:1;width:auto}
  .runsheet .mins{grid-column:2;grid-row:1;align-self:center;width:auto}
  .runsheet .item-cell{grid-column:1 / -1;grid-row:2;font-size:1.02rem}
  .runsheet .person-cell{grid-column:1 / -1;grid-row:3;font-size:.92rem;width:auto}
  .runsheet .notes-cell{grid-column:1 / -1;grid-row:4;width:auto}
  .runsheet .tools-cell{grid-column:1 / -1;grid-row:5;width:auto;white-space:normal}
  .runsheet .tools-cell .row-tools{justify-content:flex-start!important;margin-left:-.5rem}
  .runsheet tbody .mins [data-row-view]:not(:empty)::after{content:" min";color:var(--muted)}
  .runsheet tbody .person-cell [data-row-view]::before{content:"Led by: ";color:var(--muted)}
  .runsheet tfoot tr{border-bottom:0}
  .runsheet tfoot .item-cell{grid-row:1;grid-column:1}
  .runsheet tfoot .mins{grid-row:1;grid-column:2}
  .runsheet tfoot .mins::after{content:" min"}

  /* Editors: each item is a card with one field per line, the drag handle top left
     and its buttons (Edit/✕, or Save/Cancel) bottom right. Flex, not grid, so hidden empty
     fields leave no gaps. */
  .runsheet.is-editable tbody tr{display:flex;flex-direction:column;gap:.35rem;position:relative;
    margin-bottom:.6rem;padding:.7rem .75rem .5rem 2.85rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .runsheet.is-editable tbody .handle-cell{position:absolute;top:.5rem;left:.4rem;width:auto;padding:0}
  .runsheet.is-editable tbody td{width:auto;text-align:left;align-self:stretch}
  .runsheet.is-editable tbody .item-cell{font-size:1.05rem;line-height:1.3}
  .runsheet.is-editable tbody .mins{color:var(--muted);font-size:.92rem}
  .runsheet.is-editable tbody .tools-cell{align-self:flex-end;margin-top:.1rem}
  .runsheet.is-editable .tools-cell .row-tools{justify-content:flex-end!important;margin:0 -.35rem 0 0;gap:.35rem}
  .runsheet.is-editable tbody tr[data-id] .tools-cell .btn{padding:.35rem .7rem}
  .runsheet.is-editable tfoot .handle-cell{display:none}
  .runsheet.is-editable tfoot tr{padding:.6rem .25rem 0}
  .runsheet tr.dragging,.runsheet.is-editable tbody tr.dragging{background:var(--primary-tint);border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
  .runsheet tr.dragging td{background:none;border:0}

  /* A row being edited: full-width inputs, one per line */
  .runsheet.is-editable tbody tr.is-editing{gap:.5rem;padding-bottom:.75rem;border-color:var(--primary-line);background:var(--primary-tint)}
  .runsheet .is-editing .form-control,.runsheet .is-editing .form-select{font-size:1rem;padding-top:.5rem;padding-bottom:.5rem}
  .runsheet .is-editing .mins .form-control{text-align:left}

  /* Blank entry row as a dashed card, also one field per line */
  .runsheet.is-editable tbody .new-row{gap:.5rem;margin:.75rem 0 0;padding:.85rem;border:2px dashed var(--line);background:var(--page)}
  .runsheet .new-row td{background:none;border:0;padding:0}
  .runsheet .new-row .handle-cell{display:none}
  .runsheet .new-row .mins .form-control{text-align:left}
  .runsheet .new-row .form-control,.runsheet .new-row .form-select{font-size:1rem;padding-top:.5rem;padding-bottom:.5rem}
  .runsheet.is-editable tbody .new-row .tools-cell{align-self:stretch}
  .runsheet .new-row .tools-cell .btn{width:100%;padding-top:.55rem;padding-bottom:.55rem}
}

.role-group{padding:.75rem 0;border-bottom:1px solid var(--line)}
.role-group:last-child{border-bottom:0}
.role-group h3{font-size:.95rem;font-weight:600;margin:0 0 .4rem}
.person{display:flex;align-items:center;gap:.6rem;padding:.2rem 0;flex-wrap:wrap}
.person .name{font-weight:500}
.open-slot{color:var(--muted);font-size:.9rem}

.add-box{margin-top:1.25rem;padding-top:1.25rem;border-top:1px dashed var(--line)}
.add-box h3{font-size:1rem;font-weight:600}

/* Lists, tables */
.table{--bs-table-bg:transparent}
.table > :not(caption) > * > *{padding:.7rem .6rem}
.table thead th{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom-color:var(--line)}
.empty{color:var(--muted);padding:1.25rem 0;margin:0}
.member-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.member{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:var(--shadow-sm)}
.member .name{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0}
.check-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.35rem .75rem}
.check-list li{display:flex;align-items:center;gap:.5rem}
.check-list input{width:1.1rem;height:1.1rem;accent-color:var(--primary)}

/* Forms */
.form-label{font-weight:600;font-size:.92rem;margin-bottom:.3rem}
.form-control,.form-select{background-color:var(--surface);border-radius:10px;border-color:var(--line);padding:.55rem .75rem;font-size:1rem}
.form-text{color:var(--muted)}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}

/* Alerts */
.flash-stack{margin-top:1rem}
.alert{border-radius:12px;border-width:1px}
.alert-success{background:var(--ok-tint);border-color:var(--ok-line);color:var(--ok-ink)}
.alert-danger{background:var(--bad-tint);border-color:var(--bad-line);color:var(--bad-ink)}
.alert-warning{background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn-ink)}
.alert-info{background:var(--primary-tint);border-color:var(--primary-line);color:var(--primary-dark)}

/* Announcements (planned downtime etc.) */
.announcements{margin-top:1rem}
.announcement{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}
.announcement[hidden]{display:none}
.announcement-text{flex:1;min-width:0}
.announcement-when{font-weight:600;font-size:.92rem;margin-top:.15rem}
.announcement-body{white-space:pre-line;margin-top:.25rem}
.auth-card .announcements{margin:0 0 1rem}
.pill.live{background:var(--ok-tint);color:var(--ok)}
.pill.scheduled{background:var(--warn-tint);color:var(--warn)}
.pill.ended{border-color:var(--line);color:var(--muted);background:var(--surface)}
.danger-zone{border-color:var(--bad-line)}

/* Two-factor sign-in */
.mfa-qr{display:block;max-width:100%;height:auto;border-radius:8px;background:#fff}
.mfa-secret code{font-size:1rem;letter-spacing:.04em;word-break:break-word;color:var(--ink)}
.recovery-codes{columns:2;column-gap:2rem;padding-left:1.5rem;margin:1rem 0 1.25rem}
.recovery-codes li{margin-bottom:.35rem}
.recovery-codes code{font-size:1rem;color:var(--ink)}
@media print{.app-nav,.site-foot,.announcements,.flash-stack,.recovery-codes ~ div{display:none !important}}

/* Auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:linear-gradient(180deg,var(--auth-glow) 0%,var(--page) 60%)}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2rem 1.75rem;box-shadow:var(--shadow-md)}
.auth-head{text-align:center;margin-bottom:1.5rem}
.auth-head p{margin:0}
.auth-card h1{font-size:1.75rem;margin:.9rem 0 .25rem}
.auth-card .brand-logo{display:block;margin:0 auto;width:3.5rem;height:3.5rem;border-radius:14px}
.auth-card .brand-mark{width:2.5rem;height:2.5rem;font-size:.95rem}

.auth-wrap{align-content:center;gap:1rem}
.auth-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.25rem;font-size:.9rem}
.auth-links a{color:var(--muted);text-decoration:none}
.auth-links a:hover{color:var(--primary)}

/* Footer */
.site-foot{color:var(--muted);font-size:.9rem;background:var(--surface);border-top:1px solid var(--line);padding:2.5rem 0 1.25rem;margin-top:auto}
.foot-grid{display:grid;gap:2rem 1.5rem;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}
@media (max-width:767.98px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}}
@media (max-width:399.98px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-logo{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:700;font-size:1.05rem;text-decoration:none;letter-spacing:-.01em}
.foot-logo:hover{color:var(--ink)}
.foot-logo img{width:1.9rem;height:1.9rem;border-radius:8px}
.foot-brand p{margin:.6rem 0 .8rem;max-width:22rem;line-height:1.5}
.version-pill{display:inline-block;font-size:.76rem;font-weight:600;color:var(--primary-dark);background:var(--primary-tint);border-radius:999px;padding:.15rem .65rem;text-decoration:none}
.version-pill:hover{color:var(--primary-dark);box-shadow:0 0 0 1px var(--primary-line)}
.foot-col h2{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 .7rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot-col a{color:var(--muted);text-decoration:none}
.foot-col a:hover{color:var(--primary);text-decoration:underline}
.site-foot.compact{padding:.9rem 0;font-size:.82rem}
.foot-compact{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
.foot-compact .foot-logo{font-size:.92rem}
.foot-compact .foot-logo img{width:1.35rem;height:1.35rem;border-radius:6px}
.foot-compact-links{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}
.foot-compact-links a{color:var(--muted);text-decoration:none}
.foot-compact-links a:hover{color:var(--primary);text-decoration:underline}
.foot-compact-meta{margin-left:auto}
@media (max-width:575.98px){.foot-compact{justify-content:center;text-align:center}.foot-compact-meta{margin-left:0;width:100%}}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.82rem}

/* Public pages (overview, about, changelog) */
.public-main{flex:1}
.nav-cta{white-space:nowrap}
@media (max-width:767.98px){.app-nav .nav-cta{display:block;width:100%;margin:.4rem 0 .6rem}}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:.6rem}
.lead{font-size:1.15rem;color:var(--muted);line-height:1.6}
.hero{padding:3.5rem 0 3rem;background:linear-gradient(180deg,var(--auth-glow) 0%,var(--page) 100%)}
.hero-grid{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
@media (max-width:991.98px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 1.2rem}
.hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;color:var(--muted);font-size:.9rem}
.hero-points li::before{content:"\2713\00a0";color:var(--ok);font-weight:700}
.preview-window{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(31,41,55,.12),var(--shadow-sm);overflow:hidden}
[data-theme="dark"] .preview-window{box-shadow:0 18px 40px rgba(0,0,0,.45)}
.preview-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:var(--page);border-bottom:1px solid var(--line)}
.preview-bar span{width:.6rem;height:.6rem;border-radius:50%;background:var(--line)}
.preview-bar em{font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted);margin-left:.5rem}
.preview-body{padding:1rem 1rem .5rem}
.preview-table .person-cell{width:auto}
@media (max-width:767.98px){.preview-body{padding:.75rem 1rem}}
.section{padding:3.5rem 0}
.section-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-intro{max-width:40rem;margin-bottom:2rem}
.section-intro h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:.4rem}
.section-intro p{color:var(--muted);font-size:1.05rem;margin:0}
.feature-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.feature-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.4rem;box-shadow:var(--shadow-sm)}
.feature-card h3{font-size:1.08rem;margin:.9rem 0 .35rem}
.feature-card p{color:var(--muted);margin:0}
.feature-icon{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--primary-tint);color:var(--primary-dark)}
.feature-icon svg{width:1.35rem;height:1.35rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.steps h3{font-size:1.08rem;margin:.8rem 0 .3rem}
.steps p{color:var(--muted);margin:0}
.step-num{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:700}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;padding:2rem 2.25rem;border-radius:20px;background:var(--brand-gradient);color:#fff}
.cta-band h2{color:#fff;margin:0 0 .3rem}
.cta-band p{margin:0;color:rgba(255,255,255,.88)}
.cta-actions{display:flex;flex-wrap:wrap;gap:.6rem}
@media (max-width:575.98px){.cta-band{padding:1.5rem}.cta-actions,.cta-actions .btn,.hero-actions .btn{width:100%}}
.page-hero{padding:3rem 0 1rem}
.page-hero h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.75rem);letter-spacing:-.03em}
.page-hero .lead{max-width:42rem}
.page-hero + .section{padding-top:1.5rem}
.about-grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media (max-width:767.98px){.about-grid{grid-template-columns:minmax(0,1fr)}}
.prose{max-width:44rem}
.prose h2{font-size:1.35rem;margin:0 0 .6rem}
.prose h2:not(:first-child){margin-top:2rem}
.prose p{color:var(--ink);line-height:1.7}
.value-list{padding-left:1.1rem;display:grid;gap:.6rem;line-height:1.6}
.about-side{display:grid;gap:1rem}
.about-side .panel + .panel{margin-top:0}
.facts{margin:0;display:grid;gap:.6rem}
.facts div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line);padding-bottom:.5rem}
.facts div:last-child{border-bottom:0;padding-bottom:0}
.facts dt{font-weight:600;color:var(--muted)}
.facts dd{margin:0;text-align:right;overflow-wrap:anywhere}
.releases{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;max-width:56rem}
.release{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1.25rem}
@media (max-width:575.98px){.release{grid-template-columns:minmax(0,1fr);gap:.5rem}}
.release-meta{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding-top:1.1rem}
@media (max-width:575.98px){.release-meta{flex-direction:row;flex-wrap:wrap;align-items:center;padding-top:0}}
.release-version{font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.release-meta time{font-size:.85rem;color:var(--muted)}
.release-latest{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-primary);background:var(--primary);border-radius:999px;padding:.1rem .55rem}
.release.latest .release-body{border-color:var(--primary-line);box-shadow:var(--shadow-md)}
.release-body h2{font-size:1.15rem;margin-bottom:.8rem}
.change-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.change-list li{display:flex;gap:.7rem;align-items:baseline}
.change-kind{flex:none;min-width:5.6rem;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:.12rem .4rem}
.change-kind.added{background:var(--primary-tint);color:var(--primary-dark)}
.change-kind.added::before{content:"+\00a0"}
.change-kind.improved{background:var(--ok-tint);color:var(--ok-ink)}
.change-kind.improved::before{content:"\2191\00a0"}
.change-kind.fixed{background:var(--warn-tint);color:var(--warn-ink)}
.change-kind.fixed::before{content:"\2713\00a0"}
.pagination{--bs-pagination-color:var(--primary);--bs-pagination-bg:var(--surface);--bs-pagination-border-color:var(--line);--bs-pagination-active-color:var(--on-primary);--bs-pagination-active-bg:var(--primary);--bs-pagination-active-border-color:var(--primary)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}