/* ---- theme tokens: dark values are the original colours, light values follow the page theme (generated by scripts/theme-tokens.cjs; edit freely) ---- */
:root {
  --lu-accent-text: #f5b82e;
  --lu-slot-bg: rgba(0, 0, 0, 0.25);
  --lu-surface-0d0f12: #0d0f12;
  --lu-surface-1a1f33: #1a1f33;
  --lu-surface-rgba255255255003: rgba(255, 255, 255, 0.03);
  --lu-text-fff: #fff;
  --lu-surface-0e1014: #0e1014;
  --lu-surface-181b25: #181b25;
  --lu-surface-14161e: #14161e;
  --lu-surface-262a36: #262a36;
  --lu-text-cdd3e2: #cdd3e2;
  --lu-surface-000: #000;
  --lu-line-3a3f4c: #3a3f4c;
  --lu-text-ed8179: #ed8179;
  --lu-line-444b5c: #444b5c;
  --lu-surface-12141b: #12141b;
  --lu-text-ffb4ae: #ffb4ae;
  --lu-surface-20232d: #20232d;
  --lu-surface-161922: #161922;
  --lu-text-63c99e: #63c99e;
  --lu-text-7ab0f5: #7ab0f5;
  --lu-line-5a2f2c: #5a2f2c;
  --lu-surface-3a1a18: #3a1a18;
  --lu-line-7a3a36: #7a3a36;
  --lu-surface-1b1e29: #1b1e29;
  --lu-line-2d3040: #2d3040;
  --lu-surface-14161b: #14161b;
  --lu-text-eef1f8: #eef1f8;
  --lu-text-5a9bff: #5a9bff;
  --lu-text-9aa3b8: #9aa3b8;
  --lu-line-353945: #353945;
  --lu-surface-1d2027: #1d2027;
  --lu-text-aab3c9: #aab3c9;
  --lu-text-b6bdd0: #b6bdd0;
  --lu-line-2d3140: #2d3140;
  --lu-line-262a35: #262a35;
  --lu-surface-171a21: #171a21;
  --lu-line-222632: #222632;
  --lu-text-8f97aa: #8f97aa;
  --lu-surface-1d2029: #1d2029;
  --lu-line-4a4130: #4a4130;
  --lu-text-f0bd57: #f0bd57;
  --lu-surface-2c303c: #2c303c;
  --lu-line-30343e: #30343e;
  --lu-surface-242730: #242730;
  --lu-text-e5b45e: #e5b45e;
  --lu-text-73cda2: #73cda2;
  --lu-text-ebbb6b: #ebbb6b;
  --lu-text-bbc6d8: #bbc6d8;
  --lu-text-edbe7b: #edbe7b;
  --lu-line-303746: #303746;
  --lu-surface-1a1e27: #1a1e27;
  --lu-text-8fd1b4: #8fd1b4;
  --lu-text-ef6b62: #ef6b62;
  --lu-text-e9a63a: #e9a63a;
  --lu-surface-1a1d27: #1a1d27;
  --lu-surface-rgba255255255007: rgba(255, 255, 255, 0.07);
  --lu-text-ff9b94: #ff9b94;
  --lu-surface-rgba25525525501: rgba(255, 255, 255, 0.1);
  --lu-line-6b5527: #6b5527;
  --lu-surface-2a2314: #2a2314;
  --lu-text-f1c777: #f1c777;
  --lu-line-888: #888;
  --lu-line-4a4f60: #4a4f60;
  --lu-surface-rgba2552552550025: rgba(255, 255, 255, 0.025);
  --lu-line-8a3a35: #8a3a35;
  --lu-surface-241719: #241719;
  --lu-surface-rgba255255255008: rgba(255, 255, 255, 0.08);
  --lu-surface-3a3f4e: #3a3f4e;
  --lu-text-f5d27a: #f5d27a;
}
:root[data-theme="light"] {
  --lu-accent-text: #8a5a00;
  --lu-slot-bg: rgba(24, 34, 48, 0.06);
  --lu-surface-0d0f12: #ffffff;
  --lu-surface-1a1f33: #f8fafc;
  --lu-surface-rgba255255255003: rgba(24, 34, 48, 0.027);
  --lu-text-fff: #0f1a2b;
  --lu-surface-0e1014: #ffffff;
  --lu-surface-181b25: #f8fafc;
  --lu-surface-14161e: #ffffff;
  --lu-surface-262a36: #edf1f5;
  --lu-text-cdd3e2: #2a3648;
  --lu-surface-000: #ffffff;
  --lu-line-3a3f4c: #c3ccd7;
  --lu-text-ed8179: #b3261e;
  --lu-line-444b5c: #9aa6b4;
  --lu-surface-12141b: #ffffff;
  --lu-text-ffb4ae: #b3261e;
  --lu-surface-20232d: #f3f6f9;
  --lu-surface-161922: #ffffff;
  --lu-text-63c99e: #1d7a52;
  --lu-text-7ab0f5: #1d5fa8;
  --lu-line-5a2f2c: #c3ccd7;
  --lu-surface-3a1a18: #f3f6f9;
  --lu-line-7a3a36: #9aa6b4;
  --lu-surface-1b1e29: #f8fafc;
  --lu-line-2d3040: #c3ccd7;
  --lu-surface-14161b: #ffffff;
  --lu-text-eef1f8: #1d5fa8;
  --lu-text-5a9bff: #1d5fa8;
  --lu-text-9aa3b8: #5c6b7c;
  --lu-line-353945: #c3ccd7;
  --lu-surface-1d2027: #f8fafc;
  --lu-text-aab3c9: #2a3648;
  --lu-text-b6bdd0: #2a3648;
  --lu-line-2d3140: #c3ccd7;
  --lu-line-262a35: #c3ccd7;
  --lu-surface-171a21: #ffffff;
  --lu-line-222632: #c3ccd7;
  --lu-text-8f97aa: #5c6b7c;
  --lu-surface-1d2029: #f8fafc;
  --lu-line-4a4130: #9aa6b4;
  --lu-text-f0bd57: #8a5a00;
  --lu-surface-2c303c: #edf1f5;
  --lu-line-30343e: #c3ccd7;
  --lu-surface-242730: #f3f6f9;
  --lu-text-e5b45e: #8a5a00;
  --lu-text-73cda2: #1d7a52;
  --lu-text-ebbb6b: #8a5a00;
  --lu-text-bbc6d8: #2a3648;
  --lu-text-edbe7b: #8a5a00;
  --lu-line-303746: #c3ccd7;
  --lu-surface-1a1e27: #f8fafc;
  --lu-text-8fd1b4: #1d7a52;
  --lu-text-ef6b62: #b3261e;
  --lu-text-e9a63a: #8a5a00;
  --lu-surface-1a1d27: #f8fafc;
  --lu-surface-rgba255255255007: rgba(24, 34, 48, 0.063);
  --lu-text-ff9b94: #b3261e;
  --lu-surface-rgba25525525501: rgba(24, 34, 48, 0.09);
  --lu-line-6b5527: #9aa6b4;
  --lu-surface-2a2314: #f3f6f9;
  --lu-text-f1c777: #8a5a00;
  --lu-line-888: #9aa6b4;
  --lu-line-4a4f60: #9aa6b4;
  --lu-surface-rgba2552552550025: rgba(24, 34, 48, 0.023);
  --lu-line-8a3a35: #9aa6b4;
  --lu-surface-241719: #ffffff;
  --lu-surface-rgba255255255008: rgba(24, 34, 48, 0.072);
  --lu-surface-3a3f4e: #e6ebf1;
  --lu-text-f5d27a: #8a5a00;
}

/* Lineup Hub: drag-and-drop lineup, schedule, settings, and the printable sheet. */
.tool-workspace-screen[data-tool="lineup-hub"] > .tool-workspace-header {
  display: none !important;
}
.tool-workspace-screen[data-tool="lineup-hub"] .tool-workspace-canvas {
  overflow: hidden;
  padding: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lineup windows (break, new block, schedule...) are attached to <body>, outside .lineup-app, so these tokens must exist on :root too.
   Without them the primary buttons (Start break, Submit, Okay) had no background and disappeared into the window. */
:root {
  --lu-accent: #f5b82e;
  --lu-line: var(--line, #2d3552);
  --lu-card: var(--card, #141722);
  --lu-muted: var(--muted, #9aa3b8);
  --lu-text: var(--text, #eef1f8);
}
.lineup-app {
  --lu-accent: #f5b82e;
  --lu-line: var(--line, #2d3552);
  --lu-card: var(--card, #141722);
  --lu-muted: var(--muted, #9aa3b8);
  --lu-text: var(--text, #eef1f8);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg, var(--lu-surface-0d0f12));
  color: var(--lu-text);
  font-family: inherit;
}
.lineup-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- top bar ---- */
.lineup-topbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  border-bottom: 1px solid var(--lu-line);
}
.lineup-topbar h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.lineup-topbar h1 .suite-app-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.lineup-icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--bg, var(--lu-surface-1a1f33));
  color: var(--lu-text);
  cursor: pointer;
}
.lineup-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lineup-seg {
  position: relative;
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  border: 1px solid var(--lu-line);
  border-radius: 14px;
  background: var(--lu-surface-rgba255255255003);
}
.lineup-seg button {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lu-muted);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: color 0.18s;
}
.lineup-seg button.active {
  color: var(--lu-text-fff);
}
.lineup-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 10px;
  background: rgba(245, 184, 46, 0.2);
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.6);
}
.lineup-datenav {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
}
.lineup-datebtn {
  min-width: 150px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-card);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.lineup-datebtn strong {
  display: block;
  font-size: 16px;
  line-height: 1.15;
}
.lineup-datebtn small {
  display: block;
  color: var(--lu-accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lineup-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lineup-primary,
.lineup-ghost,
.lineup-danger {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.lineup-primary {
  border: 0;
  background: var(--lu-accent);
  color: #1a1405;
}
.lineup-ghost {
  border: 1px solid var(--lu-line);
  background: transparent;
  color: var(--lu-text);
}
.lineup-danger {
  border: 0;
  background: #ed6b62;
  color: #1a0d0c;
}
.lineup-primary:active,
.lineup-ghost:active {
  transform: scale(0.98);
}
@media (max-width: 1100px) {
  .lineup-topbar {
    row-gap: 10px;
  }
  .lineup-topbar .lineup-seg {
    justify-self: stretch;
    display: flex;
  }
  .lineup-topbar .lineup-seg button {
    flex: 1;
  }
  .lineup-datenav {
    justify-self: stretch;
  }
  .lineup-datebtn {
    flex: 1;
  }
}

/* ---- lineup body ---- */
.lineup-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}
.lineup-people {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--lu-line);
  border-radius: 16px;
  background: var(--lu-card);
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.lineup-people.is-over {
  box-shadow: inset 0 0 0 2px #ed6b62;
}
.lineup-people > header {
  justify-content: space-between;
}
.lineup-people h2 {
  margin: 0;
  font-size: 17px;
}
.lineup-people h2 span {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(245, 184, 46, 0.18);
  color: var(--lu-accent-text);
  font-size: 13px;
}
.lineup-chip {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--lu-line);
  border-radius: 18px;
  background: transparent;
  color: var(--lu-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.lineup-chip.active {
  border-color: var(--lu-accent-text);
  color: var(--lu-accent-text);
  background: rgba(245, 184, 46, 0.1);
}
.lineup-search {
  display: block;
  margin: 0 14px;
}
.lineup-search input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-surface-0e1014);
  color: inherit;
  font: inherit;
}
.lineup-hint {
  color: var(--lu-muted);
}
.lineup-hint b {
  color: var(--lu-accent-text);
}
.lineup-people-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 10px 12px;
  -webkit-overflow-scrolling: touch;
}
.lineup-person {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-surface-181b25);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.lineup-person.is-placed {
  background: var(--lu-surface-14161e);
}
.lineup-person.is-placed strong {
  color: var(--lu-muted);
}
.lineup-person.is-armed {
  border-color: var(--lu-accent-text);
  background: rgba(245, 184, 46, 0.12);
  box-shadow: 0 0 0 1px var(--lu-accent) inset;
}
.lineup-person.is-dragging {
  opacity: 0.35;
}
.lineup-person-main strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}
.lineup-person-main small {
  display: block;
  margin-top: 2px;
  color: var(--lu-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lineup-person-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lineup-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--lu-surface-262a36);
  color: var(--lu-text-cdd3e2);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.04em;
}
.lineup-tag.is-open,
.lineup-tag.is-close {
  background: var(--lu-surface-000);
  color: var(--lu-text-fff);
  border: 1px solid var(--lu-line-3a3f4c);
}
.lineup-tag.is-minor {
  background: #2f86dc;
  color: #fff;
}
.lineup-tag.is-money {
  background: transparent;
  font-size: 13px;
  padding: 0 2px;
}
.lineup-tag.is-break {
  background: transparent;
  border: 1px solid var(--lu-line-3a3f4c);
  color: var(--lu-muted);
}
.lineup-placed {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--lu-accent);
  color: #17191f;
  font-size: 11px;
}
.lineup-muted {
  color: var(--lu-muted);
}
.lineup-pad {
  padding: 12px;
}
.lineup-empty {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 24px 14px;
  text-align: center;
  color: var(--lu-muted);
}
.lineup-empty strong {
  color: var(--lu-text);
}

/* ---- board ---- */
.lineup-board {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.lineup-board-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lineup-sets {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--lu-line);
  border-radius: 14px;
  background: var(--lu-surface-rgba255255255003);
}
.lineup-sets button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lu-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
}
.lineup-sets button.active {
  background: rgba(245, 184, 46, 0.2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.6);
}
.lineup-meta {
  flex: 1;
  margin: 0;
  min-width: 160px;
  color: var(--lu-muted);
  font-size: 13px;
}
.lineup-warn {
  color: var(--lu-text-ed8179);
}
.lineup-areas {
  display: grid;
  gap: 12px;
}
.lineup-area {
  --area: #e0742f;
  border: 1px solid color-mix(in srgb, var(--area) 45%, var(--lu-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--area) 7%, var(--lu-card));
  overflow: hidden;
}
.lineup-area > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--area) 20%, transparent);
}
.lineup-area > header i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--area);
}
.lineup-area h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.lineup-area-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 6px 22px;
  padding: 10px 14px 12px;
}
.lineup-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--area) 14%, transparent);
}
.lineup-position-name {
  flex: 1 1 0;
  min-width: 92px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.lineup-slots {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.lineup-slot {
  width: 102px;
  height: 44px;
  padding: 0 8px;
  border: 1.5px dashed color-mix(in srgb, var(--area) 50%, var(--lu-line-444b5c));
  border-radius: 12px;
  background: var(--lu-slot-bg);
  color: var(--lu-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.lineup-slot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-slot-empty {
  font-size: 20px;
  font-weight: 500;
  opacity: 0.6;
}
.lineup-slot.is-filled {
  border-style: solid;
  border-color: var(--area);
  background: color-mix(in srgb, var(--area) 30%, var(--lu-surface-12141b));
  color: var(--lu-text-fff);
}
.lineup-slot.is-stale {
  border-color: #ed8179;
}
.lineup-slot em {
  color: var(--lu-text-ffb4ae);
  font-style: normal;
  font-weight: 900;
}
.lineup-slot.is-over {
  background: color-mix(in srgb, var(--area) 55%, var(--lu-surface-12141b));
  border-style: solid;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--area) 55%, transparent);
  transform: scale(1.04);
}
.lineup-slot.is-dragging {
  opacity: 0.4;
}
body.lineup-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.lineup-ghost-chip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--lu-accent);
  color: #17191f;
  font-weight: 850;
  box-shadow: 0 10px 30px #000a;
  pointer-events: none;
}
.lineup-hours {
  margin-top: 14px;
  border: 1px solid var(--lu-line);
  border-radius: 16px;
  background: var(--lu-card);
  overflow: hidden;
}
.lineup-hours > header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px 6px;
}
.lineup-hours h3 {
  margin: 0;
  font-size: 16px;
}
.lineup-hours small {
  color: var(--lu-muted);
}
.lineup-hours-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 6px 14px 14px;
}
.lineup-hour h4 {
  margin: 0 0 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--lu-surface-20232d);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.lineup-hour ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.lineup-hour li {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--lu-surface-161922);
  font-size: 13.5px;
}
.lineup-hour li em {
  color: var(--lu-accent-text);
  font-style: normal;
  font-weight: 800;
}
.lineup-notes {
  display: block;
  margin-top: 14px;
}
.lineup-notes span {
  display: block;
  margin-bottom: 6px;
  color: var(--lu-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lineup-notes textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-surface-0e1014);
  color: inherit;
  font: inherit;
  resize: vertical;
}

/* ---- schedule ---- */
.lineup-schedule {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 24px;
}
.lineup-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--lu-line);
  border-radius: 16px;
  background: var(--lu-card);
}
.lineup-eyebrow {
  color: var(--lu-accent-text);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lineup-source h2 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.lineup-source p {
  margin: 0;
  color: var(--lu-muted);
  font-size: 13.5px;
}
.lineup-source-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lineup-days {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.lineup-days button {
  padding: 8px 4px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-card);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.lineup-days button small,
.lineup-days button em {
  display: block;
  color: var(--lu-muted);
  font-size: 11px;
  font-style: normal;
}
.lineup-days button strong {
  display: block;
  margin: 2px 0;
  font-size: 14px;
}
.lineup-days button.active {
  border-color: var(--lu-accent-text);
  background: rgba(245, 184, 46, 0.12);
}
.lineup-days button.active em,
.lineup-days button.active small {
  color: var(--lu-accent-text);
}
.lineup-table-card {
  border: 1px solid var(--lu-line);
  border-radius: 16px;
  background: var(--lu-card);
  overflow: hidden;
}
.lineup-table-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px 8px;
}
.lineup-table-card h2 {
  margin: 0;
  font-size: 18px;
}
.lineup-table-card small {
  color: var(--lu-muted);
}
.lineup-table {
  width: 100%;
  border-collapse: collapse;
}
.lineup-table th {
  padding: 8px 14px;
  border-bottom: 1px solid var(--lu-line);
  color: var(--lu-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.lineup-table td {
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--lu-line) 60%, transparent);
  font-size: 14px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.lineup-table td small {
  display: block;
  color: var(--lu-muted);
  font-size: 11.5px;
}
.lineup-table tr:last-child td {
  border-bottom: 0;
}
.lineup-table td.is-open,
.lineup-table td.is-close {
  font-weight: 850;
}
.lineup-table td.is-open::before,
.lineup-table td.is-close::before {
  content: "●";
  margin-right: 5px;
  color: var(--lu-text-fff);
  font-size: 9px;
}
.lineup-source-pill {
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--lu-surface-20232d);
  font-size: 11px;
  font-weight: 800;
}
.lineup-source-pill.is-hotschedules {
  background: rgba(63, 185, 122, 0.18);
  color: var(--lu-text-63c99e);
}
.lineup-source-pill.is-csv {
  background: rgba(74, 143, 232, 0.18);
  color: var(--lu-text-7ab0f5);
}
.lineup-source-pill.is-manual {
  background: rgba(245, 184, 46, 0.18);
  color: var(--lu-accent-text);
}
.lineup-del {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--lu-line-5a2f2c);
  border-radius: 10px;
  background: transparent;
  color: var(--lu-text-ed8179);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.lineup-empty-line {
  margin: 0;
  padding: 24px 18px;
  color: var(--lu-muted);
}

/* ---- toast / menu ---- */
.lineup-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2147483100;
  max-width: min(520px, 90vw);
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--lu-surface-20232d);
  border: 1px solid var(--lu-line-3a3f4c);
  color: var(--lu-text-fff);
  font-weight: 700;
  box-shadow: 0 14px 40px #000a;
}
.lineup-toast.error {
  background: var(--lu-surface-3a1a18);
  border-color: var(--lu-line-7a3a36);
  color: var(--lu-text-ffb4ae);
}
.lineup-menu {
  position: fixed;
  z-index: 2147483100;
  width: 220px;
  padding: 10px;
  border: 1px solid var(--lu-line-3a3f4c);
  border-radius: 14px;
  background: var(--lu-surface-1b1e29);
  box-shadow: 0 18px 40px #000b;
  display: grid;
  gap: 6px;
}
.lineup-menu strong {
  padding: 4px 6px 6px;
  font-size: 14px;
}
.lineup-menu button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--lu-surface-262a36);
  color: var(--lu-text-fff);
  font: inherit;
  font-weight: 700;
  text-align: left;
  padding: 0 12px;
  cursor: pointer;
}

/* ---- dialogs ---- */
.lineup-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(4, 6, 12, 0.62);
  --lu-dialog-height: calc(100dvh - var(--suite-content-top, 0px) - 32px - env(safe-area-inset-bottom, 0px));
}
.lineup-modal {
  box-sizing: border-box;
  width: min(560px, 100%);
  max-height: var(--lu-dialog-height);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--lu-line-2d3040);
  border-radius: 18px;
  background: var(--lu-surface-14161b);
  color: var(--lu-text-eef1f8);
  box-shadow: 0 24px 60px #000a;
}
.lineup-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lineup-modal > header span {
  color: var(--lu-text-5a9bff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.lineup-modal > header h2 {
  margin: 2px 0 0;
  font-size: 22px;
}
.lineup-modal > header p {
  margin: 4px 0 0;
  color: var(--lu-muted, var(--lu-text-9aa3b8));
  font-size: 13px;
}
.lineup-modal > header > button {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--lu-line-353945);
  border-radius: 50%;
  background: var(--lu-surface-1d2027);
  color: var(--lu-text-aab3c9);
  cursor: pointer;
}
.lineup-modal > header > button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.lineup-modal-text {
  color: var(--lu-text-b6bdd0);
  line-height: 1.5;
  font-size: 14px;
}
.lineup-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.lineup-field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.lineup-field > span {
  color: var(--lu-text-9aa3b8);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lineup-field input,
.lineup-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--lu-line-2d3140);
  border-radius: 12px;
  background: var(--lu-surface-0e1014);
  color: inherit;
  font: inherit;
}
.lineup-field textarea {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}
.lineup-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lineup-error {
  margin: 10px 0 0;
  color: var(--lu-text-ffb4ae);
  font-size: 13.5px;
}
.lineup-settings-modal {
  width: min(980px, 100%);
  height: min(var(--lu-dialog-height), 760px);
  padding: 0;
  overflow: hidden;
}
.lineup-settings-modal > .settings-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.lineup-settings-modal > .settings-shell > .settings-footer {
  margin-top: 0;
}
.lineup-settings-modal .settings-layout {
  flex: 1;
  min-height: 0;
}
.lineup-settings-content {
  overflow-y: auto;
}
.lineup-lead {
  color: var(--lu-text-9aa3b8);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 14px;
}
.lineup-set-area,
.lineup-set-card {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--lu-line-262a35);
  border-radius: 14px;
  background: var(--lu-surface-171a21);
}
.lineup-set-area > header,
.lineup-set-card > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lineup-set-area input[type="color"] {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 4px;
  border: 1px solid var(--lu-line-2d3140);
  border-radius: 12px;
  background: var(--lu-surface-0e1014);
}
.lineup-set-area input:not([type]),
.lineup-set-card input:not([type]),
.lineup-set-card input[type="text"],
.lineup-set-pos input:not([type]) {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--lu-line-2d3140);
  border-radius: 10px;
  background: var(--lu-surface-0e1014);
  color: inherit;
  font: inherit;
}
.lineup-set-pos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lu-line-222632);
  flex-wrap: wrap;
}
.lineup-set-area > header input:not([type]) {
  flex: 1 1 auto;
}
.lineup-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lineup-stepper span {
  margin-right: 4px;
  color: var(--lu-text-8f97aa);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lineup-stepper button,
.lineup-mini {
  min-width: 38px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--lu-line-2d3140);
  border-radius: 10px;
  background: var(--lu-surface-1d2029);
  color: var(--lu-text-cdd3e2);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.lineup-stepper button.active {
  background: rgba(245, 184, 46, 0.2);
  border-color: #f5b82e;
  color: #fff;
}
.lineup-mini.is-danger {
  color: var(--lu-text-ed8179);
}
.lineup-add {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border: 1.5px dashed var(--lu-line-4a4130);
  border-radius: 12px;
  background: rgba(245, 184, 46, 0.06);
  color: var(--lu-text-f0bd57);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.lineup-hours-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lineup-hours-pick button {
  min-width: 62px;
  min-height: 40px;
  border: 1px solid var(--lu-line-2d3140);
  border-radius: 10px;
  background: var(--lu-surface-1d2029);
  color: var(--lu-text-cdd3e2);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.lineup-hours-pick button.active {
  background: rgba(245, 184, 46, 0.2);
  border-color: #f5b82e;
  color: #fff;
}
.lineup-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--lu-text-cdd3e2);
  flex-wrap: wrap;
}
.lineup-rule input {
  width: 76px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--lu-line-2d3140);
  border-radius: 10px;
  background: var(--lu-surface-0e1014);
  color: inherit;
  font: inherit;
  text-align: center;
}
.lineup-names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.lineup-name-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  border-radius: 18px;
  background: var(--lu-surface-20232d);
  font-size: 14px;
}
.lineup-name-chip button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 15px;
  background: var(--lu-surface-2c303c);
  color: var(--lu-text-cdd3e2);
  cursor: pointer;
}
.lineup-addname {
  display: flex;
  gap: 8px;
}
.lineup-addname input {
  flex: 1;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--lu-line-2d3140);
  border-radius: 10px;
  background: var(--lu-surface-0e1014);
  color: inherit;
  font: inherit;
}

/* ---- print: a copy of the paper sheet on one portrait letter page ---- */
.lineup-print-preview {
  width: min(1060px, 100%);
  max-height: var(--lu-dialog-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lineup-print-preview > header {
  flex: none;
}
.lineup-print-preview > header > .settings-close {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 1px solid var(--lu-line-353945);
  border-radius: 50%;
  background: var(--lu-surface-1d2027);
}
.lineup-print-preview .settings-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.lineup-print-options {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: end;
  flex: none;
  position: relative;
  z-index: 2;
}
.lineup-print-options .lineup-field {
  margin-top: 0;
  font-size: 16px;
}
.lineup-print-week {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--lu-text-b6bdd0);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.lineup-print-week button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 24px;
}
.lineup-print-status {
  flex: none;
  min-height: 20px;
  margin: 12px 0;
  color: var(--lu-text-b6bdd0);
  font-size: 14px;
}
.lineup-preview-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--lu-line-30343e);
  border-radius: 12px;
  background: var(--lu-surface-242730);
  box-sizing: border-box;
}
.lineup-preview-space {
  position: relative;
  margin: 0 auto;
}
.lineup-preview-paper {
  box-sizing: border-box;
  width: 816px;
  height: 1056px;
  padding: 0.15in 0.1in 0.1in 0.15in;
  transform-origin: top left;
  background: white;
  color: black;
  box-shadow: 0 4px 18px #0005;
  pointer-events: none;
}
.lineup-print-preview footer {
  flex: none;
  align-items: center;
  flex-wrap: wrap;
}
.lineup-print-preview footer > span {
  margin-right: auto;
  color: var(--lu-text-9aa3b8);
  font-size: 13px;
}
.lineup-print-preview button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .lineup-print-preview {
    padding: 16px;
  }
  .lineup-print-options {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lineup-print-preview footer > span {
    width: 100%;
  }
}
.lineup-print-root {
  display: none;
}
@media print {
  @page {
    size: letter portrait;
    margin: 0;
  }
  html:has(body.lineup-printing),
  body.lineup-printing {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.lineup-printing {
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.lineup-printing > *:not(.lineup-print-root) {
    display: none !important;
  }
  body.lineup-printing .lineup-print-root {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    break-inside: avoid;
    box-sizing: border-box;
    width: auto;
    padding: 0.15in 0.1in 0.1in 0.15in !important;
    page-break-after: avoid;
  }
  body.lineup-print-ios .lineup-print-root {
    padding: 0 !important;
  }
}
.lineup-sheet {
  box-sizing: border-box;
  display: grid;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
.lineup-sheet * {
  box-sizing: border-box;
}
.lineup-sheet .pc {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  font-size: calc(var(--s) * 10pt);
}
.lineup-sheet .pb {
  font-weight: 700;
}
.lineup-sheet .ps-notes-text {
  white-space: pre-wrap;
  font-size: calc(var(--s) * 10pt);
  line-height: 1.15;
}
.lineup-sheet .ps-notes-label {
  position: absolute;
  left: 6px;
  top: 3px;
  font-size: calc(var(--s) * 8pt);
  font-weight: 700;
  color: #555;
}

/* iPad portrait: the team list becomes a strip across the top so the board gets the full width */
@media (max-width: 1000px) {
  .lineup-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
  }
  .lineup-people {
    max-height: 214px;
  }
  .lineup-people > header {
    padding: 10px 14px 4px;
  }
  .lineup-hint {
    margin: 4px 14px;
  }
  .lineup-people-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 12px 12px;
  }
  .lineup-person {
    flex: 0 0 200px;
    margin-top: 0;
  }
  .lineup-empty {
    width: 100%;
  }
}

/* settings: pictures */
.lineup-plan-welcome {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}
.lineup-plan-welcome h2 {
  max-width: 650px;
  margin: 14px 0 8px;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.lineup-plan-welcome p {
  max-width: 530px;
  margin: 0 0 24px;
  color: var(--lu-muted);
  font-size: 17px;
  line-height: 1.6;
}
.lineup-plan-welcome > small {
  margin-top: 24px;
  color: var(--lu-muted);
  font-size: 13px;
}
.lineup-plan-starts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}
.lineup-plan-art {
  display: flex;
  gap: 8px;
  align-items: end;
  height: 64px;
  margin-bottom: 24px;
}
.lineup-plan-art i {
  display: block;
  width: 42px;
  height: 45px;
  border: 1px solid #e0742f;
  background: #e0742f25;
  border-radius: 9px;
  transform: rotate(-6deg);
}
.lineup-plan-art i:nth-child(2) {
  height: 60px;
  border-color: #2fa766;
  background: #2fa76625;
  transform: none;
}
.lineup-plan-art i:nth-child(3) {
  border-color: #2f86dc;
  background: #2f86dc25;
  transform: rotate(6deg);
}
.lineup-plan-strip {
  flex: none;
  display: flex;
  overflow-y: auto;
}
.lineup-plan-tab {
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-card);
  color: var(--lu-muted);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.lineup-plan-tab strong {
  font-size: 15px;
}
.lineup-plan-tab small {
  margin-top: 3px;
}
.lineup-plan-tab em {
  margin-top: 4px;
  color: var(--lu-text-e5b45e);
  font-size: 11px;
  font-style: normal;
}
.lineup-plan-tab.active {
  color: var(--lu-text-eef1f8);
}
.lineup-plan-summary {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lineup-plan-summary h2 {
  letter-spacing: -0.025em;
}
.lineup-plan-summary p {
  margin: 0;
  font-size: 13px;
  color: var(--lu-muted);
}
.lineup-plan-summary > div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lineup-planning-body {
  grid-template-rows: minmax(0, 1fr);
}
.lineup-planning-body .lineup-people {
  max-height: none;
}
.lineup-planning-body .lineup-people-list {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
}
.lineup-planning-body .lineup-person {
  margin-top: 7px;
  padding: 12px;
  cursor: pointer;
}
.lineup-planning-body .lineup-person-main {
  min-width: 0;
}
.lineup-planning-body .lineup-person-main strong {
  font-size: 16px;
}
.lineup-coverage {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}
.lineup-coverage.full {
  color: var(--lu-text-73cda2);
}
.lineup-coverage.partial {
  color: var(--lu-text-ebbb6b);
}
.lineup-plan-area-nav {
  top: 0;
  padding: 0 0 10px;
  background: var(--bg, var(--lu-surface-0d0f12));
}
.lineup-plan-area-nav button {
  padding: 0 12px;
  border: 1px solid var(--lu-line);
  border-radius: 10px;
  background: var(--lu-card);
  color: var(--lu-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lineup-plan-area-nav button.active {
  color: var(--lu-text-fff);
}
.lineup-planning-body .lineup-area-cols {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 8px;
}
.lineup-planning-body .lineup-area-col {
  display: contents;
}
.lineup-planning-body .lineup-position {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-content: start;
  border: 0;
}
.lineup-planning-body .lineup-position-name {
  color: var(--lu-muted);
}
.lineup-planning-body .lineup-slots {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lineup-planning-body .lineup-slot {
  width: 100%;
  height: auto;
  justify-content: space-between;
  text-align: left;
}
.lineup-planning-body .lineup-slot span {
  white-space: normal;
  overflow: visible;
}
.lineup-planning-body .lineup-slot strong {
  display: block;
  font-weight: 750;
}
.lineup-planning-body .lineup-slot small {
  display: block;
  color: var(--lu-text-bbc6d8);
}
.lineup-planning-body .lineup-slot-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-size: 12px;
}
.lineup-slot-empty b {
  font-size: 22px;
  font-weight: 400;
}
.lineup-plan-warnings {
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid #b27b3955;
  border-radius: 12px;
  color: var(--lu-text-edbe7b);
  background: #b27b3910;
  font-size: 14px;
}
.lineup-plan-warnings summary {
  cursor: pointer;
  min-height: 22px;
}
.lineup-plan-warnings li {
  margin-top: 6px;
  line-height: 1.45;
}
.lineup-plan-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.lineup-copy-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 16px;
}
.lineup-copy-check input {
  width: 22px;
  height: 22px;
}
.lineup-plan-dialog {
  width: min(620px, 100%);
}
.lineup-plan-dialog .lineup-field {
  font-size: 17px;
}
.lineup-plan-dialog .lineup-field > span {
  font-size: 12px;
}
.lineup-pick-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  max-height: 45vh;
  overflow-y: auto;
}
.lineup-pick-list button {
  padding: 12px 16px;
  min-height: 74px;
  border: 1px solid var(--lu-line-303746);
  border-radius: 12px;
  background: var(--lu-surface-1a1e27);
  color: var(--lu-text-eef1f8);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lineup-pick-list strong {
  display: block;
  font-size: 17px;
}
.lineup-pick-list small {
  display: block;
  margin-top: 4px;
  color: var(--lu-text-9aa3b8);
}
@media (min-width: 760px) and (max-width: 1000px) {
}
@media (max-width: 1100px) {
  .lineup-topbar {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }
  .lineup-topbar > .lineup-icon-btn {
    grid-column: 1;
    grid-row: 1;
  }
  .lineup-topbar h1 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .lineup-top-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .lineup-topbar .lineup-seg {
    grid-column: 1 / 3;
    grid-row: 2;
    min-width: 0;
  }
  .lineup-seg button {
    white-space: nowrap;
  }
  .lineup-datenav {
    grid-column: 3;
    grid-row: 2;
    min-width: 270px;
  }
}
@media (max-width: 759px) {
  .lineup-plan-summary {
    align-items: start;
    flex-direction: column;
  }
  .lineup-plan-summary h2 {
    font-size: 20px;
  }
  .lineup-planning-body .lineup-people-list {
    display: block;
  }
  .lineup-planning-body .lineup-person {
    margin-top: 6px;
  }
  .lineup-plan-strip {
    max-height: 100px;
  }
  .lineup-plan-tab {
    min-height: 55px;
    padding: 6px 10px;
  }
}
@media (max-width: 500px) {
  .lineup-topbar {
    gap: 8px;
    padding: 8px 10px;
  }
  .lineup-topbar h1 {
    font-size: 17px;
    gap: 6px;
  }
  .lineup-topbar h1 .suite-app-icon {
    width: 20px;
    height: 20px;
  }
  .lineup-top-actions {
    gap: 6px;
  }
  .lineup-top-actions [data-print] {
    font-size: 12px;
    padding: 0 10px;
  }
  .lineup-topbar .lineup-seg {
    grid-column: 1 / -1;
  }
  .lineup-datenav {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lineup-app * {
    transition: none !important;
  }
}
.lineup-img-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lineup-img-row img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
}
.lineup-img-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- tighter header area + Available toggle ---- */
.lineup-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-surface-rgba255255255003);
}
.lineup-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--lu-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.lineup-hint {
  height: 18px;
  margin: 6px 14px 4px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lineup-topbar {
  padding: 6px 14px;
  gap: 10px;
}
.lineup-topbar h1 {
  font-size: 20px;
}
.lineup-seg button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 14px;
}
.lineup-seg {
  padding: 3px;
}
.lineup-datebtn {
  min-height: 40px;
  padding: 2px 12px;
}
.lineup-datenav .lineup-icon-btn,
.lineup-top-actions .lineup-icon-btn {
  width: 40px;
  height: 40px;
}
.lineup-top-actions .lineup-ghost {
  min-height: 40px;
}
.lineup-plan-strip {
  padding: 8px 16px 0;
  gap: 6px;
}
.lineup-plan-tab {
  min-height: 40px;
  padding: 4px 12px;
  display: flex;
  gap: 8px;
}
.lineup-plan-tab strong,
.lineup-plan-tab small,
.lineup-plan-tab em {
  display: inline;
  margin-top: 0;
}
.lineup-plan-tab small {
  font-size: 12px;
}
.lineup-plan-summary {
  padding: 8px 16px 0;
}
.lineup-plan-summary > div:first-child {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.lineup-plan-summary h2 {
  margin: 0;
  font-size: 18px;
}
.lineup-plan-summary .lineup-eyebrow {
  order: 2;
}
.lineup-plan-summary > div:last-child .lineup-ghost,
.lineup-plan-summary > div:last-child .lineup-primary {
  min-height: 38px;
}
.lineup-body {
  padding: 8px 16px 12px;
  gap: 12px;
}
.lineup-people > header {
  padding: 10px 12px 6px;
}
.lineup-plan-area-nav {
  padding-bottom: 8px;
}
.lineup-plan-area-nav button {
  min-height: 38px;
}

/* ---- schedule: reliable touch scrolling on iPad ---- */
.lineup-schedule {
  display: flex;
  flex-direction: column;
  align-content: normal;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.lineup-schedule > * {
  flex: none;
}
.lineup-content {
  touch-action: pan-y;
}
.lineup-people h2 {
  white-space: nowrap;
}
.lineup-toggle button {
  white-space: nowrap;
  padding: 0 10px;
}
.lineup-plan-summary .lineup-eyebrow {
  display: none;
}

/* ---- team card: tags stacked on the right, wider column ---- */
@media (min-width: 760px) and (max-width: 1000px) {
  .lineup-planning-body {
    grid-template-columns: 310px minmax(0, 1fr);
  }
}
.lineup-planning-body .lineup-person {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.lineup-planning-body .lineup-person-tags {
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
  flex: none;
}
.lineup-planning-body .lineup-person-tags .lineup-tag {
  white-space: nowrap;
}
.lineup-plan-tab {
  align-items: center;
  align-content: center;
}

/* ---- breaks, Full Plan ---- */
.lineup-tag.is-needs {
  border: 0;
  background: #e9a63a;
  color: #1a1308;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
}
.lineup-tag.is-onbreak {
  border: 0;
  background: #2b6f5a;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.lineup-tag.is-onbreak.is-over {
  background: #c4423a;
}
.lineup-tag.is-taken {
  border: 1px solid var(--lu-line-3a3f4c);
  background: transparent;
  color: var(--lu-text-8fd1b4);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}
.lineup-break-req {
  margin-right: 8px;
  color: var(--lu-muted);
}
.lineup-flag-cell .lineup-tag {
  margin-right: 4px;
}
.lineup-break-clock {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 18px 0 6px;
}
.lineup-break-clock strong {
  font-size: 54px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.lineup-break-clock strong.is-over {
  color: var(--lu-text-ef6b62);
}
.lineup-break-clock small {
  color: var(--lu-muted);
}
.lineup-break-actions {
  flex-wrap: wrap;
}
.lineup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lineup-chips button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: transparent;
  color: var(--lu-muted);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.lineup-chips button.active {
  border-color: var(--lu-accent-text);
  background: rgba(245, 184, 46, 0.14);
  color: var(--lu-text-fff);
}
.lineup-area-full {
  margin-left: auto;
}
.lineup-fp-area {
  overflow: hidden;
}
.lineup-fp-area h3 i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--area, #888);
}
.lineup-fp-area ul {
  list-style: none;
  margin: 0;
  padding: 0 6px 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.lineup-fp-area li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--lu-line) 55%, transparent);
  font-size: 12.5px;
  min-width: 0;
}
.lineup-fp-area li span {
  color: var(--lu-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lineup-fp-area li b {
  font-weight: 750;
  white-space: nowrap;
  color: #5b6275;
}
.lineup-fp-area li.is-filled b {
  color: var(--lu-text);
}
.lineup-fp-foot {
  display: grid;
  gap: 10px;
}
.lineup-fp-foot > div {
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-card);
  font-size: 13px;
  line-height: 1.4;
}
.lineup-fp-foot strong {
  display: block;
  margin-bottom: 3px;
  color: var(--lu-accent-text);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lineup-fp-foot span {
  color: var(--lu-text);
}
.lineup-fp-areas {
  column-gap: 10px;
}
.lineup-fp-area {
  margin-bottom: 10px;
}
.lineup-fp-area li {
  padding: 3px 6px;
}
.lineup-fp-foot {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lineup-fp-foot > div {
  padding: 8px 12px;
}
.lineup-fp-empty {
  margin: 4px 0;
  padding: 16px;
  border: 1px dashed var(--lu-line);
  border-radius: 12px;
  color: var(--lu-muted);
  text-align: center;
}

/* ---- Full Plan: filled positions on the left, vertical lists on the right, no scrolling ---- */
.lineup-fullplan {
  grid-template-columns: minmax(0, 1fr) 232px;
  align-items: start;
}
.lineup-fp-side {
  display: grid;
  gap: 8px;
}
.lineup-fp-list {
  padding: 8px 12px 10px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: var(--lu-card);
}
.lineup-fp-list h4 {
  margin: 0 0 4px;
  color: var(--lu-accent-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lineup-fp-list h4 em {
  margin-left: 4px;
  color: var(--lu-muted);
  font-style: normal;
}
.lineup-fp-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 12px;
}
.lineup-fp-list.is-break ul {
  columns: 1;
}
.lineup-fp-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  break-inside: avoid;
  line-height: 1.35;
}
.lineup-fp-list li b {
  color: var(--lu-text-8fd1b4);
  font-variant-numeric: tabular-nums;
}
.lineup-fp-list li b.is-over {
  color: var(--lu-text-ef6b62);
}
.lineup-fp-list p {
  margin: 0;
  color: var(--lu-muted);
}
.lineup-fp-list.is-needs h4 {
  color: var(--lu-text-e9a63a);
}
.lineup-board.is-fullplan .lineup-notes,
.lineup-board.is-fullplan .lineup-plan-bottom {
  display: none;
}

/* ---- plan board grid ---- */
.lineup-area-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.lineup-planning-body .lineup-position {
  padding: 2px 0;
  gap: 3px;
}
.lineup-planning-body .lineup-position-name {
  font-size: 12.5px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-planning-body .lineup-slot {
  min-height: 46px;
  padding: 5px 10px;
}
.lineup-planning-body .lineup-slot strong {
  font-size: 14px;
  line-height: 1.15;
}
.lineup-planning-body .lineup-slot small {
  font-size: 11px;
  margin-top: 1px;
}
.lineup-area-grid.cols-4 .lineup-slot {
  padding: 5px 8px;
}
.lineup-area-grid.cols-4 .lineup-slot-empty i {
  display: none;
}
.lineup-area-grid.cols-4 .lineup-slot-empty {
  justify-content: center;
}
.lineup-where {
  display: block;
  margin-top: 3px;
  color: var(--lu-text-e9a63a);
  font-size: 12px;
  font-weight: 700;
}
.lineup-pick-sep {
  margin: 14px 0 4px;
  color: var(--lu-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lineup-cellsel {
  display: grid;
  gap: 2px;
  min-width: 72px;
}
.lineup-cellsel > span {
  color: var(--lu-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lineup-cellsel .cfa-select > button {
  min-height: 40px;
  padding: 6px 10px;
}

/* ---- block options menu ---- */
.lineup-blockmenu-wrap {
  position: relative;
  flex: none;
}
.lineup-blockbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lineup-blockbtn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s;
}
.lineup-blockbtn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.lineup-blockmenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--lu-line);
  border-radius: 14px;
  background: var(--lu-surface-1a1d27);
  box-shadow: 0 18px 40px #000a;
}
.lineup-blockmenu[hidden] {
  display: none;
}
.lineup-blockmenu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lu-text);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.lineup-blockmenu button:hover,
.lineup-blockmenu button:focus-visible {
  background: var(--lu-surface-rgba255255255007);
}
.lineup-blockmenu svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--lu-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lineup-blockmenu hr {
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid var(--lu-line);
}
.lineup-blockmenu .is-danger {
  color: var(--lu-text-ff9b94);
}
.lineup-blockmenu .is-danger svg {
  stroke: var(--lu-text-ff9b94);
}

/* ---- work-area slider ---- */
.lineup-areaseg {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.lineup-areaseg::-webkit-scrollbar {
  display: none;
}
.lineup-plan-area-nav .lineup-areaseg button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lu-muted);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}
.lineup-plan-area-nav .lineup-areaseg button.active {
  color: var(--lu-text-fff);
  background: transparent;
  border: 0;
}
.lineup-plan-area-nav .lineup-areaseg .lineup-seg-thumb {
  background: rgba(74, 143, 232, 0.22);
  box-shadow: inset 0 0 0 1px rgba(74, 143, 232, 0.75);
}

/* ---- grouped cards: spots side by side ---- */
.lineup-spot {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: end;
}
.lineup-spot-note {
  color: var(--lu-muted);
  font-size: 10.5px;
  line-height: 1;
  padding-left: 4px;
}

/* ---- several people on one position: clearly one group, with a count ---- */
.lineup-planning-body .lineup-position.is-multi {
  border-radius: 14px;
}
.lineup-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--lu-surface-rgba25525525501);
  color: var(--lu-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  vertical-align: 1px;
}
.lineup-count.is-many {
  background: var(--area);
  color: #14161b;
}

/* ---- cards fill their row; spots share the card's width ---- */
.lineup-planning-body .lineup-slots.is-row {
  flex-direction: row;
}
.lineup-planning-body .lineup-slots.is-row > .lineup-spot {
  min-width: 0;
}

/* ---- every name box is the same width: card width divided by its number of spots ---- */
.lineup-planning-body .lineup-slots.is-row {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  gap: 6px;
}
.lineup-planning-body .lineup-slots.is-row > .lineup-spot {
  flex: none;
}

/* ---- multi-person outline drawn outside the card so every name box is exactly the same width ---- */
.lineup-planning-body .lineup-position.is-multi {
  position: relative;
  padding: 2px 0;
  border: 0;
  background: none;
}
.lineup-planning-body .lineup-position.is-multi::before {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--area) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--area) 9%, transparent);
  pointer-events: none;
  z-index: 0;
}
.lineup-planning-body .lineup-position.is-multi > * {
  position: relative;
  z-index: 1;
}

/* ---- coverage flags sit on the right of the area switch; breathing room around grouped positions ---- */
.lineup-plan-area-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.lineup-plan-warnings {
  position: relative;
  margin: 0;
}
.lineup-plan-warnings > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--lu-line-6b5527);
  background: var(--lu-surface-2a2314);
  color: var(--lu-text-f1c777);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.lineup-plan-warnings > summary::-webkit-details-marker {
  display: none;
}
.lineup-plan-warnings > summary svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lineup-plan-warnings ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(360px, 80vw);
  margin: 0;
  border: 1px solid var(--lu-line);
  border-radius: 14px;
  background: var(--lu-surface-1a1d27);
  box-shadow: 0 18px 40px #000a;
  color: var(--lu-text);
}
.lineup-planning-body .lineup-position.is-multi::before {
  inset: -5px -7px;
}

/* ---- spot picked first: the spot and the team list both show that a name is expected ---- */
.lineup-slot.is-target {
  border-style: solid;
  border-color: var(--lu-accent-text);
  background: rgba(245, 184, 46, 0.14);
  color: var(--lu-accent-text);
  box-shadow: 0 0 0 1px var(--lu-accent) inset;
}
.lineup-people.is-picking {
  border-color: var(--lu-accent-text);
  box-shadow: 0 0 0 1px var(--lu-accent) inset;
}
.lineup-people.is-picking .lineup-person:not(.is-placed) {
  border-color: color-mix(in srgb, var(--lu-accent) 55%, var(--lu-line));
}

/* ---- compact flag button level with the area switch; block notes always in view ---- */
.lineup-plan-area-nav {
  align-items: center;
}
.lineup-plan-warnings > summary {
  box-sizing: border-box;
  height: 46px;
  min-height: 0;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 14px;
}
.lineup-planning-body .lineup-notes {
  bottom: 0;
  z-index: 6;
}
.lineup-planning-body .lineup-notes > span {
  display: none;
}
.lineup-planning-body .lineup-notes textarea {
  display: block;
  min-height: 56px;
  height: 56px;
  padding: 8px 12px;
  resize: none;
  font-size: 14px;
}
.lineup-area-grid {
  gap: 12px 20px;
  padding: 12px 18px 16px;
}

/* ---- a flag never changes the layout; notes are docked under the board instead of floating over it ---- */
.lineup-plan-tab {
  position: relative;
}
.lineup-tab-flag {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e9a63a;
  color: #1a1308;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}
.lineup-planning-body .lineup-board {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lineup-planning-body .lineup-board > .lineup-plan-area-nav {
  position: static;
  flex: none;
}
.lineup-planning-body .lineup-board > .lineup-areas,
.lineup-planning-body .lineup-board > .lineup-fullplan {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.lineup-planning-body .lineup-notes {
  position: static;
  flex: none;
  margin: 10px 0 0;
  padding: 0;
  background: none;
}
/* the flag button is only the summary: the old banner box around it is gone, so the row never changes height */
.lineup-plan-area-nav .lineup-plan-warnings {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  height: 46px;
}
.lineup-plan-area-nav .lineup-plan-warnings > summary {
  height: 46px;
}
.lineup-plan-area-nav {
  min-height: 46px;
}

/* ---- one row for the plan tabs, the fill count and Block options (saves a whole row of height) ---- */
.lineup-plan-strip {
  align-items: center;
}
.lineup-plan-stat {
  margin-left: auto;
  color: var(--lu-muted);
  font-size: 13px;
  white-space: nowrap;
}
.lineup-plan-strip .lineup-blockmenu-wrap {
  margin-left: 0;
}
.lineup-plan-strip .lineup-blockbtn {
  min-height: 40px;
}

/* ---- use the whole screen height: the hidden header used to leave an empty row under the board ---- */
.lineup-planning-body .lineup-areas {
  display: flex;
  flex-direction: column;
}
.lineup-planning-body .lineup-areas > .lineup-area {
  flex-direction: column;
}
.lineup-app {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

/* same approach Prep Hub uses on the iPad: the canvas is pinned to the screen's four edges, so no leftover row can leave a gap */
body .tool-workspace-screen[data-tool="lineup-hub"] {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
body .tool-workspace-screen[data-tool="lineup-hub"] .tool-workspace-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0;
}

/* iPad Safari sizes fixed screens to the small window until the page is scrolled, then stretches them. Lock the page's own scroll while Lineup Hub is open and size the screen to the live (dynamic) viewport height. */
html:has(.tool-workspace-screen[data-tool="lineup-hub"]:not(.hidden)),
html:has(.tool-workspace-screen[data-tool="lineup-hub"]:not(.hidden)) body {
  overflow: hidden;
  overscroll-behavior: none;
}
body .tool-workspace-screen[data-tool="lineup-hub"]:not(.hidden) {
  bottom: auto;
  height: calc(100vh - var(--suite-content-top, 0px));
  height: calc(100dvh - var(--suite-content-top, 0px));
}
.lineup-app {
  overscroll-behavior: none;
}

/* ---- iPad Safari reports a viewport 36px too short for a fixed screen (found by tuning on the device); other screens use the exact height ---- */
:root {
  --lu-extend: 0px;
}
@media (pointer: coarse) {
  :root {
    --lu-extend: 36px;
  }
}
body .tool-workspace-screen[data-tool="lineup-hub"]:not(.hidden) {
  height: calc(100vh - var(--suite-content-top, 0px) + var(--lu-extend, 0px));
  height: calc(100dvh - var(--suite-content-top, 0px) + var(--lu-extend, 0px));
}

/* the screen height is a maximum, not a size to fill: each area keeps its natural height (Dining Room stays short) and the notes stay docked at the bottom */
.lineup-planning-body .lineup-areas > .lineup-area {
  flex: 0 0 auto;
  display: block;
}
.lineup-planning-body .lineup-areas > .lineup-area > .lineup-area-grid {
  flex: none;
  align-content: start;
}

/* ---- Full Plan: easier to read ---- */
.lineup-fullplan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lineup-fp-bar {
  display: flex;
}
.lineup-fpseg button {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}
.lineup-fpseg .lineup-seg-thumb {
  background: rgba(74, 143, 232, 0.22);
  box-shadow: inset 0 0 0 1px rgba(74, 143, 232, 0.75);
}
.lineup-fp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 12px;
}
.lineup-fp-area {
  margin: 0;
  padding: 0 0 6px;
  border: 1px solid var(--lu-line);
  border-left: 4px solid var(--area, var(--lu-line-888));
  border-radius: 14px;
  background: var(--lu-card);
  break-inside: auto;
}
.lineup-fp-area h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lu-muted);
}
.lineup-fp-area h3 i {
  display: none;
}
.lineup-fp-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-top: 1px solid color-mix(in srgb, var(--lu-line) 60%, transparent);
}
.lineup-fp-label {
  color: var(--lu-muted);
  font-size: 14px;
  font-weight: 700;
}
.lineup-fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lineup-fp-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--area, #888) 22%, var(--lu-surface-1d2029));
  border: 1px solid color-mix(in srgb, var(--area, var(--lu-line-888)) 55%, transparent);
  color: var(--lu-text-fff);
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
}
.lineup-fp-list li {
  font-size: 14.5px;
  padding: 3px 0;
}
.lineup-fp-list h4 {
  font-size: 12px;
}
.lineup-pp-row {
  break-inside: avoid;
  display: grid;
  gap: 0 10px;
  align-items: center;
  border: 1px solid var(--lu-line);
  background: var(--lu-card);
}
.lineup-pp-name {
  grid-area: name;
  font-weight: 750;
}
.lineup-pp-shift {
  grid-area: shift;
  color: var(--lu-muted);
  font-size: 12.5px;
}
.lineup-pp-where {
  grid-area: where;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.lineup-pp-spot {
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, #888) 24%, var(--lu-surface-1d2029));
  border: 1px solid color-mix(in srgb, var(--c, var(--lu-line-888)) 60%, transparent);
  color: var(--lu-text-fff);
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}
.lineup-pp-spot.is-none {
  background: transparent;
  border: 1px dashed var(--lu-line-4a4f60);
  color: var(--lu-muted);
  font-weight: 650;
}
.lineup-board.is-fullplan .lineup-notes,
.lineup-planning-body .lineup-board.is-fullplan .lineup-notes {
  display: block;
}

/* ---- By person: one compact line per person so a full block fits without scrolling ---- */
.lineup-pp-list {
  column-gap: 10px;
}
.lineup-pp-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name where";
  border-radius: 11px;
}
.lineup-pp-name {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lineup-pp-spot {
  padding: 3px 9px;
  font-size: 13px;
}

/* three columns, read top to bottom (alphabetical down each column) */
.lineup-pp-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 1), auto);
  columns: auto;
  flex: none;
}
.lineup-pp-row {
  margin-bottom: 0;
}

.lineup-pp-list {
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 5px 10px;
}
.lineup-pp-row {
  padding: 4px 10px;
}

/* ---- the By position / By person switch lives beside the area switch, only while Full Plan is selected ---- */
.lineup-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
@keyframes lineup-fp-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lineup-nav-left .lineup-fpseg {
    animation: none;
  }
}

/* ---- shared glide for every switch, and content that eases in when you change area or view ---- */
.lineup-seg-thumb {
  transition:
    transform 0.26s cubic-bezier(0.3, 0.8, 0.3, 1),
    width 0.26s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.lineup-toggle {
  position: relative;
}
.lineup-toggle button {
  position: relative;
  z-index: 1;
}
.lineup-toggle button.active {
  background: transparent;
  box-shadow: none;
  color: var(--lu-text-fff);
}
.lineup-toggle .lineup-seg-thumb {
  top: 3px;
  bottom: 3px;
  border-radius: 9px;
  background: rgba(245, 184, 46, 0.2);
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.6);
}
.lineup-enter {
  animation: lineup-enter 0.24s cubic-bezier(0.3, 0.8, 0.3, 1) both;
}
@keyframes lineup-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lineup-enter {
    animation: none;
  }
  .lineup-seg-thumb {
    transition: none;
  }
}

/* ---- By person: a real table ---- */
.lineup-pt-wrap {
  display: grid;
  gap: 12px;
}
.lineup-pt-wrap.is-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lineup-pt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--lu-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--lu-card);
  table-layout: fixed;
}
.lineup-pt th {
  padding: 0;
  border-bottom: 1px solid var(--lu-line);
  background: var(--lu-surface-rgba255255255003);
  text-align: left;
}
.lineup-pt th > button,
.lineup-pt th > span {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--lu-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.lineup-pt th > button {
  cursor: pointer;
}
.lineup-pt th > button.active {
  color: var(--lu-accent-text);
}
.lineup-pt td {
  height: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--lu-line) 55%, transparent);
  font-size: 14px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lineup-pt tbody tr:last-child td {
  border-bottom: 0;
}
.lineup-pt tbody tr:nth-child(even) td {
  background: var(--lu-surface-rgba2552552550025);
}
.lineup-pt col.c-name,
.lineup-pt th:nth-child(1) {
  width: 36%;
}
.lineup-pt-name strong {
  font-weight: 750;
}
.lineup-pt-name .lineup-tag {
  margin-left: 8px;
}
.lineup-pt-shift {
  color: var(--lu-muted);
  font-variant-numeric: tabular-nums;
}
.lineup-pt-none {
  color: #596072;
}

/* ---- table columns sized so nothing is clipped in the two-table layout ---- */
.lineup-pt-wrap:not(.is-split) .lineup-pt th:nth-child(1) {
  width: 25%;
}
.lineup-pt .lineup-tag.is-onbreak,
.lineup-pt .lineup-tag.is-taken {
  font-size: 11px;
}
.lineup-pt-shift {
  letter-spacing: -0.01em;
}
.lineup-pt td {
  padding: 3px 6px;
}
.lineup-pt th > button,
.lineup-pt th > span {
  padding: 9px 6px;
}
.lineup-pt .lineup-tag {
  font-size: 9px;
  padding: 2px 5px;
  letter-spacing: 0.02em;
}
.lineup-pt .lineup-pp-spot {
  padding: 2px 7px;
  font-size: 12px;
}
.lineup-pt th:nth-child(1) {
  width: 22%;
}
.lineup-pt-shift {
  font-size: 12px;
}

/* ---- By person: tables stay half width; rows fill one column, then wrap into the next ---- */
.lineup-pt-wrap {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.lineup-pt-wrap.is-split .lineup-pt th:nth-child(1) {
  width: 22%;
}
.lineup-pt-wrap.is-split .lineup-pt th:nth-child(1),
.lineup-pt th:nth-child(1) {
  width: 25%;
}
.lineup-pt th:nth-child(2) {
  width: 26%;
}
.lineup-pt th:nth-child(3) {
  width: 26%;
}
.lineup-pt th:nth-child(4) {
  width: 23%;
}
.lineup-pt td.lineup-pt-shift {
  font-size: 12.5px;
}

/* ---- Full Plan boxes open windows ---- */
.lineup-fp-list.is-action {
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.lineup-fp-list.is-action:hover,
.lineup-fp-list.is-action:focus-visible {
  border-color: var(--lu-accent-text);
  background: color-mix(in srgb, var(--lu-accent) 6%, var(--lu-card));
  outline: none;
}
.lineup-fp-list h4 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lineup-fp-list h4 svg {
  width: 14px;
  height: 14px;
  margin-left: auto;
  fill: none;
  stroke: var(--lu-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lineup-bk-modal {
  width: min(860px, 100%);
}
.lineup-bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.lineup-bk-card {
  display: grid;
  padding: 14px;
  border: 1px solid var(--lu-line);
  border-radius: 16px;
  background: var(--lu-surface-181b25);
}
.lineup-bk-card.is-over {
  border-color: var(--lu-line-8a3a35);
  background: var(--lu-surface-241719);
}
.lineup-bk-card header {
  display: grid;
  gap: 2px;
}
.lineup-bk-card header strong {
  font-size: 16px;
}
.lineup-bk-card header small,
.lineup-bk-card p {
  margin: 0;
  color: var(--lu-muted);
  font-size: 12.5px;
}
.lineup-bk-clock {
  font-size: 40px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--lu-text-8fd1b4);
}
.lineup-bk-clock.is-over,
.lineup-bk-card.is-over .lineup-bk-clock {
  color: var(--lu-text-ef6b62);
}
.lineup-bk-card footer {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  justify-content: stretch;
}
.lineup-bk-card footer button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 8px;
}
.lineup-nb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin: 6px 0 14px;
}
.lineup-nb-card {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 10px 40px 10px 14px;
  border: 1.5px solid var(--lu-line);
  border-radius: 14px;
  background: var(--lu-surface-181b25);
  color: var(--lu-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.lineup-nb-card strong {
  font-size: 15px;
}
.lineup-nb-card small {
  color: var(--lu-muted);
  font-size: 12px;
}
.lineup-nb-card i {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 1.5px solid var(--lu-line-4a4f60);
  border-radius: 50%;
  color: transparent;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
}
.lineup-nb-card.is-on {
  border-color: #e9a63a;
  background: rgba(233, 166, 58, 0.12);
}
.lineup-nb-card.is-on i {
  border-color: #e9a63a;
  background: #e9a63a;
  color: #1a1308;
}
.lineup-modal footer button[disabled] {
  opacity: 0.45;
  cursor: default;
}

.lineup-fp-list.is-empty {
  opacity: 0.5;
  cursor: default;
}
.lineup-fp-list.is-empty h4 em {
  opacity: 0.7;
}

/* ---- bigger close button in every Lineup Hub window ---- */
.lineup-modal > header > button[data-lineup-close] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.lineup-modal > header > button[data-lineup-close] svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.4;
}

/* ---- On break window: one clear action per card ---- */
.lineup-bk-card {
  gap: 8px;
}
.lineup-bk-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.lineup-bk-card > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lineup-bk-more {
  position: relative;
  flex: none;
}
.lineup-bk-more > summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -6px -6px 0 0;
  border-radius: 12px;
  color: var(--lu-muted);
  cursor: pointer;
  list-style: none;
}
.lineup-bk-more > summary::-webkit-details-marker {
  display: none;
}
.lineup-bk-more > summary svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.lineup-bk-more[open] > summary {
  background: var(--lu-surface-rgba255255255008);
  color: var(--lu-text);
}
.lineup-bk-menu {
  position: absolute;
  top: 38px;
  right: -4px;
  z-index: 5;
  display: grid;
  gap: 2px;
  width: 230px;
  padding: 6px;
  border: 1px solid var(--lu-line);
  border-radius: 14px;
  background: var(--lu-surface-1a1d27);
  box-shadow: 0 18px 40px #000a;
}
.lineup-bk-menu button {
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lu-text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.lineup-bk-menu button:hover {
  background: var(--lu-surface-rgba255255255007);
}
.lineup-bk-menu .is-danger {
  color: var(--lu-text-ff9b94);
}
.lineup-bk-back {
  width: 100%;
  min-height: 50px;
  font-size: 16px;
}

/* ---- Needs break window: choose the kind of mark ---- */
.lineup-nb-mode {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.lineup-nb-mode button {
  min-height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--lu-line);
  border-radius: 14px;
  background: transparent;
  color: var(--lu-muted);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.lineup-nb-mode button.active {
  border-color: var(--lu-accent-text);
  background: rgba(245, 184, 46, 0.14);
  color: var(--lu-text-fff);
}

/* ---- "When did" choices are sliding switches ---- */
.lineup-whenseg {
  display: flex;
  align-self: start;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.lineup-whenseg::-webkit-scrollbar {
  display: none;
}
.lineup-whenseg button {
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
}

/* ---- draggable "how long ago" slider with the time printed beside it ---- */
.lineup-when {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 0;
}
.lineup-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 48px;
  margin: 0;
  background: transparent;
  touch-action: pan-y;
  cursor: pointer;
}
.lineup-range:focus {
  outline: none;
}
.lineup-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
}
.lineup-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  margin-top: -13px;
  border: 3px solid var(--lu-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 10px #0009;
}
.lineup-range::-moz-range-track {
  height: 10px;
  border-radius: 5px;
}
.lineup-range::-moz-range-progress {
  height: 10px;
  border-radius: 5px;
}
.lineup-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 3px solid var(--lu-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 10px #0009;
}
.lineup-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 4px rgba(245, 184, 46, 0.35),
    0 3px 10px #0009;
}
.lineup-when-out {
  display: grid;
  gap: 2px;
  min-width: 150px;
  text-align: right;
}
.lineup-when-out strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.lineup-when-out small {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* the generic form-field look must not draw a box behind the slider */
.lineup-field .lineup-range,
.lineup-modal .lineup-range {
  width: auto;
  min-height: 0;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* windows live outside the app root, so the slider uses fixed colors */
.lineup-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #f5b82e var(--p, 0%), var(--lu-surface-3a3f4e) var(--p, 0%));
}
.lineup-range::-webkit-slider-thumb {
  border-color: #f5b82e;
}
.lineup-range::-moz-range-progress {
  background: #f5b82e;
}
.lineup-range::-moz-range-track {
  background: var(--lu-surface-3a3f4e);
}
.lineup-range::-moz-range-thumb {
  border-color: #f5b82e;
}
.lineup-when-out small {
  color: var(--lu-text-9aa3b8);
}

/* ---- name picked first: the open spots glow, the same way the team list glows when a spot is picked first ---- */
.lineup-board.is-picking .lineup-area {
  border-color: var(--lu-accent-text);
  box-shadow: 0 0 0 1px var(--lu-accent) inset;
}
.lineup-board.is-picking .lineup-slot:not(.is-filled) {
  border-style: solid;
  border-color: var(--lu-accent-text);
  background: rgba(245, 184, 46, 0.1);
  color: var(--lu-accent-text);
  box-shadow: 0 0 0 1px var(--lu-accent) inset;
}
.lineup-board.is-picking.is-fullplan .lineup-area {
  border-color: var(--lu-line);
  box-shadow: none;
}

/* every empty spot shows just a plus, in every area */
.lineup-planning-body .lineup-slot-empty {
  justify-content: center;
}

/* ---- create window: six options in one sliding switch ---- */
.lineup-startseg button {
  padding: 0 12px;
  font-size: 14px;
}

/* ---- many blocks: the tab lane scrolls sideways ---- */
.lineup-plan-strip {
  flex-wrap: nowrap;
  max-height: none;
  overflow: visible;
}
.lineup-plan-scroll {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 9px 10px 4px 2px;
  margin: -9px 0 -4px -2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.lineup-plan-scroll::-webkit-scrollbar {
  display: none;
}
.lineup-plan-scroll .lineup-plan-tab {
  flex: none;
}
.lineup-plan-scroll.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.lineup-plan-scroll.fade-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
}
.lineup-plan-scroll.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}
.lineup-newblock {
  flex: none;
}
.lineup-plan-stat {
  flex: none;
}

/* ---- Available box: unplaced people only, search on request, add-a-shift at the bottom ---- */
.lineup-people > header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lineup-search-btn {
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: transparent;
  color: var(--lu-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lineup-search-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.lineup-search-btn[aria-expanded="true"] {
  color: var(--lu-accent-text);
  border-color: var(--lu-accent-text);
}
.lineup-search-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0 14px;
  transition:
    grid-template-rows 0.24s cubic-bezier(0.3, 0.8, 0.3, 1),
    opacity 0.2s ease,
    padding 0.24s ease;
}
.lineup-search-wrap.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 2px 14px 6px;
}
.lineup-search-wrap > .lineup-search {
  overflow: hidden;
  min-height: 0;
  margin: 0;
}
.lineup-hint {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lineup-hint > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-hint-x {
  flex: none;
  padding: 2px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--lu-surface-rgba255255255008);
  color: var(--lu-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.lineup-avail-foot {
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--lu-line);
}
.lineup-avail-add {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lineup-avail-add svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* the box slides away on Full Plan and the plan takes the room; it slides back on the area tabs */
.lineup-planning-body {
  --avail-w: 350px;
  --avail-gap: 12px;
  grid-template-columns: var(--avail-w) minmax(0, 1fr);
  column-gap: var(--avail-gap);
  transition:
    grid-template-columns 0.32s cubic-bezier(0.3, 0.8, 0.3, 1),
    column-gap 0.32s cubic-bezier(0.3, 0.8, 0.3, 1),
    grid-template-rows 0.32s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.lineup-planning-body.avail-hidden {
  --avail-w: 0px;
  --avail-gap: 0px;
}
.lineup-planning-body .lineup-people {
  min-width: 0;
  overflow: hidden;
  transition: opacity 0.22s ease;
}
.lineup-planning-body.avail-hidden .lineup-people {
  opacity: 0;
  pointer-events: none;
  border-width: 0;
}
@media (min-width: 760px) and (max-width: 1000px) {
  .lineup-planning-body {
    --avail-w: 310px;
  }
}
@media (max-width: 759px) {
  .lineup-planning-body {
    --avail-h: 210px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--avail-h) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 10px;
  }
  .lineup-planning-body.avail-hidden {
    --avail-h: 0px;
    row-gap: 0;
  }
}

/* by-person position chips are buttons */
.lineup-pp-spot.is-pick {
  font-family: inherit;
  cursor: pointer;
}
.lineup-pp-spot.is-pick:active {
  transform: scale(0.96);
}

/* schedule tab header actions */
.lineup-table-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
}
.lineup-table-actions .lineup-ghost {
  min-height: 40px;
  padding: 0 14px;
}

/* ---- layout hardening: nothing in these rows may wrap, grow past its lane, or change the row height ---- */
.lineup-plan-area-nav {
  flex-wrap: nowrap;
  min-width: 0;
}
.lineup-nav-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lineup-nav-left::-webkit-scrollbar {
  display: none;
}
.lineup-nav-left > * {
  flex: none;
}
.lineup-plan-warnings {
  flex: none;
}
.lineup-plan-warnings > summary {
  white-space: nowrap;
}
.lineup-plan-warnings ul {
  width: min(360px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}
.lineup-plan-stat,
.lineup-newblock,
.lineup-blockmenu-wrap {
  white-space: nowrap;
}
.lineup-slot > span {
  min-width: 0;
}
.lineup-slot strong,
.lineup-slot small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-person-main {
  min-width: 0;
}
.lineup-person-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-table-card > header small {
  margin-left: 10px;
}

/* ---- lanes: same soft edges on the area switch; tighter buttons on narrower screens so more fits ---- */
.lineup-nav-left {
  position: relative;
}
.lineup-nav-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.lineup-nav-left.fade-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
}
.lineup-nav-left.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
@media (max-width: 900px) {
  .lineup-plan-area-nav .lineup-areaseg button {
    padding: 0 12px;
    font-size: 13.5px;
  }
  .lineup-fpseg button {
    padding: 0 10px;
    font-size: 13.5px;
  }
  .lineup-nav-left {
    gap: 8px;
  }
}

/* ---- print preview: settings left, the whole sheet right ---- */
.lineup-print-preview {
  width: min(900px, 100%);
}
.lineup-pv {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
}
.lineup-pv-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.lineup-pv-settings .lineup-field {
  margin-top: 0;
}
.lineup-pv-settings .lineup-print-status {
  margin: 0;
  min-height: 40px;
}
.lineup-pv-settings footer {
  margin-top: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lineup-pv-days {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lineup-pv-days > button {
  flex: none;
  min-width: 40px;
  min-height: 48px;
  padding: 0 10px;
  font-size: 22px;
}
.lineup-dayseg {
  flex: 1 1 auto;
  min-width: 0;
}
.lineup-dayseg button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 0 4px;
  display: grid;
  place-content: center;
  gap: 0;
  line-height: 1.15;
}
.lineup-dayseg button small {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.lineup-dayseg button strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.lineup-pv-week {
  color: var(--lu-text-9aa3b8);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.lineup-print-preview .lineup-preview-viewport {
  place-items: center;
  overflow: hidden;
  padding: 14px;
}
.lineup-preview-note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  color: var(--lu-text-aab3c9);
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .lineup-pv {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .lineup-pv-settings {
    overflow: visible;
  }
}
/* settings stay on the left down to a narrow tablet; only a phone stacks them */
@media (max-width: 900px) and (min-width: 701px) {
  .lineup-pv {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: none;
  }
  .lineup-pv-settings {
    overflow-y: auto;
  }
  .lineup-pv-days > button {
    min-width: 32px;
    padding: 0 6px;
  }
  .lineup-dayseg button strong {
    font-size: 15px;
  }
}

.lineup-startseg button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- navigation: the area switch spans the top, above the Available box, so it never moves ---- */
.lineup-content > .lineup-plan-area-nav {
  flex: none;
  padding: 10px 16px 0;
  background: none;
  position: static;
}
.lineup-fp-body {
  align-items: start;
}
.lineup-fp-main {
  min-width: 0;
}
/* narrower screens: the three lists sit under the plan instead of beside it */
@media (max-width: 900px) {
  .lineup-fp-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .lineup-fp-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  /* By person: the name table is always half width, so one table sits in the left half just as two share the row */
  .lineup-pt-wrap.is-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .lineup-pt-wrap.is-split {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}

/* ---- swiping between pages: the old page leaves one way while the new one arrives from the other ---- */
.lineup-planning-body.is-swiping {
  position: relative;
  overflow: clip;
  transition: none !important;
}
.lineup-planning-body.is-swiping .lineup-people {
  transition: none;
}

/* ---- no motion when only the block changes; the side lists always reach the right edge ---- */
.lineup-planning-body,
.lineup-planning-body .lineup-people {
  transition: none !important;
}
.lineup-nav-left .lineup-fpseg {
  animation: none;
}
.lineup-fullplan > .lineup-fp-body {
  width: 100%;
  align-self: stretch;
}

/* ---- By position: first area on the left, the rest always stacked on the right ---- */
.lineup-fp-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-width: auto;
  gap: 12px;
  align-items: start;
}
.lineup-fp-col {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.lineup-fp-col .lineup-fp-area {
  margin: 0;
}

/* ---- every selected-state toggle uses the standard yellow ---- */
.lineup-plan-tab.active {
  border-color: #f5b82e;
  background: rgba(245, 184, 46, 0.12);
}
.lineup-plan-area-nav button.active {
  border-color: transparent;
  background: transparent;
}
.lineup-copy-check input {
  accent-color: #f5b82e;
}
.lineup-plan-area-nav .lineup-areaseg .lineup-seg-thumb,
.lineup-fpseg .lineup-seg-thumb {
  background: rgba(245, 184, 46, 0.2);
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.6);
}
.lineup-fpseg {
  padding: 4px;
}

.lineup-top-actions .lineup-primary {
  min-height: 40px;
}

/* ---- the Full Plan view switch matches the area switch exactly: same height, padding, thumb inset and font ---- */
.lineup-fpseg,
.lineup-plan-area-nav .lineup-areaseg {
  padding: 3px;
  gap: 2px;
  border-radius: 14px;
}
.lineup-fpseg button,
.lineup-plan-area-nav .lineup-areaseg button {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 750;
  border-radius: 10px;
}
.lineup-fpseg .lineup-seg-thumb,
.lineup-plan-area-nav .lineup-areaseg .lineup-seg-thumb {
  top: 3px;
  bottom: 3px;
  border-radius: 10px;
}

/* ---- flag popup sits above everything and reads larger ---- */
.lineup-plan-area-nav {
  position: relative;
  z-index: 60;
}
.lineup-plan-warnings ul {
  z-index: 80;
  width: min(460px, calc(100vw - 32px));
  padding: 12px 16px 12px 32px;
  font-size: 16.5px;
  line-height: 1.5;
}
.lineup-plan-warnings li {
  margin: 8px 0;
}
.lineup-flag-name {
  color: var(--lu-text-fff);
  font-weight: 800;
}
.lineup-flag-time {
  padding: 1px 7px;
  border-radius: 7px;
  background: rgba(245, 184, 46, 0.22);
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.6);
  color: #ffd36e;
  font-weight: 800;
  white-space: nowrap;
}

/* ---- the Full Plan view switch: no leftover border on the inactive side ---- */
.lineup-plan-area-nav .lineup-fpseg button {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ---- By person: room for full times like 8:30am–4:30pm ---- */
.lineup-pt-wrap .lineup-pt th:nth-child(1) {
  width: 25%;
}
.lineup-pt-wrap .lineup-pt th:nth-child(2) {
  width: 28%;
}
.lineup-pt-wrap .lineup-pt th:nth-child(3) {
  width: 24%;
}
.lineup-pt-wrap .lineup-pt th:nth-child(4) {
  width: 23%;
}

/* ---- paper sheet: every line is the same weight and colour; shared edges overlap so they never double up ---- */
.lineup-sheet {
  --lw: 0.6px;
  --lc: #3d424a;
}
.lineup-sheet .bl {
  border-left: var(--lw) solid var(--lc);
  margin-left: calc(var(--lw) * -1);
}
.lineup-sheet .br {
  border-right: var(--lw) solid var(--lc);
}
.lineup-sheet .bt {
  border-top: var(--lw) solid var(--lc);
  margin-top: calc(var(--lw) * -1);
}
.lineup-sheet .bb {
  border-bottom: var(--lw) solid var(--lc);
}
.lineup-sheet .bk {
  border: var(--lw) solid var(--lc);
  margin: calc(var(--lw) * -1) 0 0 calc(var(--lw) * -1);
}

/* ---- paper sheet: absolute boxes ---- */
.lineup-sheet .vb {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}
.lineup-sheet .vl {
  border: var(--lw) solid var(--lc);
}
.lineup-sheet .pcap {
  position: absolute;
  left: calc(var(--s) * 0.05in);
  top: calc(var(--s) * var(--sy) * 0.028in);
  font-size: calc(var(--s) * 6pt);
  font-weight: 700;
  color: #555;
  line-height: 1;
  white-space: nowrap;
}
.lineup-sheet .ps-notes-text {
  padding: calc(var(--s) * 0.16in) calc(var(--s) * 0.06in) 0;
}

.lineup-pv {
  transition: none;
}
.lineup-print-preview .lineup-preview-viewport {
  width: 100%;
}
.lineup-preview-note[hidden] {
  display: none;
}

/* ---- print preview: the dialog is as tall as its content, so the frame has the same border on every side ---- */
.lineup-print-preview {
  height: auto;
}
.lineup-print-preview .lineup-pv {
  margin-top: 10px;
  column-gap: 24px;
  align-items: start;
}
.lineup-print-preview .lineup-pv-settings {
  align-self: stretch;
}
.lineup-print-preview .lineup-preview-viewport {
  justify-self: end;
  position: relative;
  display: block;
}
.lineup-print-preview .lineup-preview-space {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ---- print preview: daypart / block list ---- */
.lineup-pv-list {
  display: grid;
  gap: 6px;
}
.lineup-pv-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--lu-line);
  border-radius: 12px;
  background: transparent;
  color: var(--lu-text);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.lineup-pv-list button small {
  color: var(--lu-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lineup-pv-list button.active {
  border-color: rgba(245, 184, 46, 0.6);
  background: rgba(245, 184, 46, 0.14);
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.6);
}
.lineup-pv-list button.active small {
  color: var(--lu-text-f5d27a);
}
.lineup-pv-empty {
  margin: 0;
  padding: 12px 2px;
  color: var(--lu-muted);
  font-size: 14px;
}

/* ---- print preview: Cancel and Print sit under the page, bottom right ---- */
.lineup-pv-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  justify-self: end;
}
.lineup-pv-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex: none;
}
.lineup-pv-foot button {
  min-height: 46px;
}
.lineup-print-preview .lineup-pv-main .lineup-preview-viewport {
  justify-self: auto;
  flex: none;
  min-height: 0;
}
.lineup-print-preview .lineup-pv-foot {
  margin: 0;
}

/* ---- coverage flags are red everywhere: the count on a block tab, the flags button, and the name and time highlighted in its list ---- */
/* (.lineup-plan-tab em turns every em in a tab into plain inline text, so the badge rule has to outrank it) */
.lineup-plan-tab .lineup-tab-flag {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: #e5484d;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.lineup-plan-warnings > summary {
  border-color: rgba(229, 72, 77, 0.6);
  background: rgba(229, 72, 77, 0.14);
  color: #ff9ea1;
}
.lineup-plan-warnings {
  border-color: rgba(229, 72, 77, 0.35);
  background: rgba(229, 72, 77, 0.08);
  color: #ffb4b6;
}
.lineup-flag-time {
  background: rgba(229, 72, 77, 0.2);
  box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.6);
  color: #ff9ea1;
}
:root[data-theme="light"] .lineup-plan-warnings > summary {
  color: #b3262b;
}
:root[data-theme="light"] .lineup-plan-warnings {
  color: #8a1f23;
}
:root[data-theme="light"] .lineup-flag-time {
  color: #b3262b;
}