/* 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-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, #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; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--lu-line); }
.lineup-topbar h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; letter-spacing: -.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, #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; padding: 4px; gap: 2px; border: 1px solid var(--lu-line); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.lineup-seg button { position: relative; z-index: 1; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--lu-muted); font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; transition: color .18s; }
.lineup-seg button.active { color: #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, .2); box-shadow: inset 0 0 0 1px rgba(245, 184, 46, .6); transition: transform .24s ease, width .24s ease; }
.lineup-datenav { display: flex; align-items: center; gap: 8px; justify-self: center; }
.lineup-datebtn { min-width: 150px; min-height: 46px; padding: 4px 14px; 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); font-size: 11px; font-weight: 800; letter-spacing: .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: #4a8fe8; color: #0d1220; }
.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(.98); }
@media (max-width: 1100px) {
  .lineup-topbar { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 10px; }
  .lineup-topbar .lineup-seg { grid-column: 1 / 2; grid-row: 2; justify-self: stretch; display: flex; }
  .lineup-topbar .lineup-seg button { flex: 1; }
  .lineup-datenav { grid-column: 2 / 4; grid-row: 2; 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); gap: 14px; padding: 14px 16px 16px; }
.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 .15s; }
.lineup-people.is-over { box-shadow: inset 0 0 0 2px #ed6b62; }
.lineup-people > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px; }
.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, .18); color: var(--lu-accent); 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); color: var(--lu-accent); background: rgba(245, 184, 46, .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: #0e1014; color: inherit; font: inherit; }
.lineup-hint { margin: 8px 14px 6px; color: var(--lu-muted); font-size: 12.5px; line-height: 1.35; }
.lineup-hint b { color: var(--lu-accent); }
.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: #181b25; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: border-color .12s, background .12s; }
.lineup-person.is-placed { background: #14161e; }
.lineup-person.is-placed strong { color: var(--lu-muted); }
.lineup-person.is-armed { border-color: var(--lu-accent); background: rgba(245, 184, 46, .12); box-shadow: 0 0 0 1px var(--lu-accent) inset; }
.lineup-person.is-dragging { opacity: .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: #262a36; color: #cdd3e2; font-size: 10px; font-style: normal; font-weight: 850; letter-spacing: .04em; }
.lineup-tag.is-open, .lineup-tag.is-close { background: #000; color: #fff; border: 1px solid #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 #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: rgba(255, 255, 255, .03); }
.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, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(245, 184, 46, .6); }
.lineup-meta { flex: 1; margin: 0; min-width: 160px; color: var(--lu-muted); font-size: 13px; }
.lineup-warn { color: #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: .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%, #444b5c); border-radius: 12px; background: rgba(0, 0, 0, .25); 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: .6; }
.lineup-slot.is-filled { border-style: solid; border-color: var(--area); background: color-mix(in srgb, var(--area) 30%, #12141b); color: #fff; }
.lineup-slot.is-stale { border-color: #ed8179; }
.lineup-slot em { color: #ffb4ae; font-style: normal; font-weight: 900; }
.lineup-slot.is-over { background: color-mix(in srgb, var(--area) 55%, #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: .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: #20232d; font-size: 13px; letter-spacing: .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: #161922; font-size: 13.5px; }
.lineup-hour li em { color: var(--lu-accent); 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: .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: #0e1014; color: inherit; font: inherit; resize: vertical; }

/* ---- schedule ---- */
.lineup-schedule { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; display: grid; gap: 14px; align-content: start; }
.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); font-size: 11px; font-weight: 850; letter-spacing: .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); background: rgba(245, 184, 46, .12); }
.lineup-days button.active em, .lineup-days button.active small { color: var(--lu-accent); }
.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: .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: #fff; font-size: 9px; }
.lineup-source-pill { padding: 3px 8px; border-radius: 8px; background: #20232d; font-size: 11px; font-weight: 800; }
.lineup-source-pill.is-hotschedules { background: rgba(63, 185, 122, .18); color: #63c99e; }
.lineup-source-pill.is-csv { background: rgba(74, 143, 232, .18); color: #7ab0f5; }
.lineup-source-pill.is-manual { background: rgba(245, 184, 46, .18); color: var(--lu-accent); }
.lineup-del { min-height: 36px; padding: 0 12px; border: 1px solid #5a2f2c; border-radius: 10px; background: transparent; color: #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: #20232d; border: 1px solid #3a3f4c; color: #fff; font-weight: 700; box-shadow: 0 14px 40px #000a; }
.lineup-toast.error { background: #3a1a18; border-color: #7a3a36; color: #ffb4ae; }
.lineup-menu { position: fixed; z-index: 2147483100; width: 220px; padding: 10px; border: 1px solid #3a3f4c; border-radius: 14px; background: #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: #262a36; color: #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, .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 #2d3040; border-radius: 18px; background: #14161b; color: #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: #5a9bff; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.lineup-modal > header h2 { margin: 2px 0 0; font-size: 22px; }
.lineup-modal > header p { margin: 4px 0 0; color: var(--lu-muted, #9aa3b8); font-size: 13px; }
.lineup-modal > header > button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #353945; border-radius: 50%; background: #1d2027; color: #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: #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: #9aa3b8; font-size: 12px; font-weight: 800; letter-spacing: .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 #2d3140; border-radius: 12px; background: #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: #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: #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 #262a35; border-radius: 14px; background: #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 #2d3140; border-radius: 12px; background: #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 #2d3140; border-radius: 10px; background: #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 #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: #8f97aa; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lineup-stepper button, .lineup-mini { min-width: 38px; min-height: 38px; padding: 0 8px; border: 1px solid #2d3140; border-radius: 10px; background: #1d2029; color: #cdd3e2; font: inherit; font-weight: 800; cursor: pointer; }
.lineup-stepper button.active { background: rgba(245, 184, 46, .2); border-color: #f5b82e; color: #fff; }
.lineup-mini.is-danger { color: #ed8179; }
.lineup-add { display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 1.5px dashed #4a4130; border-radius: 12px; background: rgba(245, 184, 46, .06); color: #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 #2d3140; border-radius: 10px; background: #1d2029; color: #cdd3e2; font: inherit; font-weight: 750; cursor: pointer; }
.lineup-hours-pick button.active { background: rgba(245, 184, 46, .2); border-color: #f5b82e; color: #fff; }
.lineup-rule { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #cdd3e2; flex-wrap: wrap; }
.lineup-rule input { width: 76px; min-height: 44px; padding: 8px; border: 1px solid #2d3140; border-radius: 10px; background: #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: #20232d; font-size: 14px; }
.lineup-name-chip button { width: 30px; height: 30px; border: 0; border-radius: 15px; background: #2c303c; color: #cdd3e2; cursor: pointer; }
.lineup-addname { display: flex; gap: 8px; }
.lineup-addname input { flex: 1; min-height: 44px; padding: 8px 12px; border: 1px solid #2d3140; border-radius: 10px; background: #0e1014; color: inherit; font: inherit; }

/* ---- print: a copy of the paper sheet on one portrait letter page ---- */
.lineup-print-preview { width: min(1060px, 100%); height: min(900px, var(--lu-dialog-height)); 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 #353945; border-radius: 50%; background: #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: #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: #b6bdd0; font-size: 14px; }
.lineup-preview-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid #30343e; border-radius: 12px; background: #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: .15in .1in .1in .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: #9aa3b8; font-size: 13px; }
.lineup-print-preview button:disabled { opacity: .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: .15in .1in .1in .15in; }
  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; }
}
.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 .bl { border-left: .5px solid #000; }
.lineup-sheet .br { border-right: .5px solid #000; }
.lineup-sheet .bt { border-top: .5px solid #000; }
.lineup-sheet .bb { border-bottom: .5px solid #000; }
.lineup-sheet .bk { border: 1px solid #000; }
.lineup-sheet .ps-notes-text { white-space: pre-wrap; padding: 2px 4px; font-size: calc(var(--s) * 10pt); line-height: 1.15; }
.lineup-sheet .ps-notes-label { position: absolute; right: 4px; bottom: 2px; font-size: calc(var(--s) * 9pt); color: #666; }


/* 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: -.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; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 0; max-height: 150px; overflow-y: auto; }
.lineup-plan-tab { min-height: 62px; padding: 8px 16px; 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, .lineup-plan-tab small, .lineup-plan-tab em { display: block; }
.lineup-plan-tab strong { font-size: 15px; }.lineup-plan-tab small { margin-top: 3px; font-size: 12px; }
.lineup-plan-tab em { margin-top: 4px; color: #e5b45e; font-size: 11px; font-style: normal; }
.lineup-plan-tab.active { border-color: #4a8fe8; background: #4a8fe81a; color: #eef1f8; }
.lineup-plan-summary { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
.lineup-plan-summary h2 { margin: 4px 0; font-size: 23px; letter-spacing: -.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-columns: 280px minmax(0, 1fr); 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; flex-wrap: wrap; 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: #73cda2; }.lineup-coverage.partial { color: #ebbb6b; }
.lineup-plan-area-nav { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; background: var(--bg, #0d0f12); }
.lineup-plan-area-nav button { min-height: 42px; 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: #fff; background: #4a8fe826; border-color: #4a8fe8; }
.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; gap: 6px; padding: 6px; border: 0; }
.lineup-planning-body .lineup-position-name { font-size: 13px; color: var(--lu-muted); }
.lineup-planning-body .lineup-slots { display: flex; flex-direction: column; min-width: 0; }
.lineup-planning-body .lineup-slot { width: 100%; min-height: 62px; height: auto; padding: 10px 12px; 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-size: 16px; font-weight: 750; }
.lineup-planning-body .lineup-slot small { display: block; margin-top: 4px; font-size: 11px; color: #bbc6d8; }
.lineup-planning-body .lineup-slot-empty { display: flex; justify-content: space-between; 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: #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; accent-color: #4a8fe8; }
.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 #303746; border-radius: 12px; background: #1a1e27; color: #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: #9aa3b8; }
@media (min-width: 760px) and (max-width: 1000px) { .lineup-planning-body { grid-template-columns: 245px minmax(0, 1fr); } }
@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 { grid-template-columns: minmax(0, 1fr); grid-template-rows: 210px minmax(0, 1fr); }
  .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: rgba(255, 255, 255, .03); }
.lineup-toggle button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--lu-muted); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.lineup-toggle button.active { color: #fff; background: rgba(245, 184, 46, .2); box-shadow: inset 0 0 0 1px rgba(245, 184, 46, .6); }
.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; max-height: 96px; }
.lineup-plan-tab { min-height: 40px; padding: 4px 12px; display: flex; align-items: baseline; 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 > header { gap: 8px; }
.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 ---- */
.lineup-planning-body { grid-template-columns: 350px minmax(0, 1fr); }
@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: .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 #3a3f4c; background: transparent; color: #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: -.02em; }
.lineup-break-clock strong.is-over { color: #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); background: rgba(245, 184, 46, .14); color: #fff; }
.lineup-area-full { margin-left: auto; }
.lineup-fullplan { display: grid; gap: 10px; }
.lineup-fp-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.lineup-fp-area { border: 1px solid var(--lu-line); border-radius: 14px; background: color-mix(in srgb, var(--area, #888) 10%, var(--lu-card)); overflow: hidden; }
.lineup-fp-area h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; font-size: 14px; }
.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; padding: 4px 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; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.lineup-fp-foot > div { padding: 10px 12px; 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); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.lineup-fp-foot span { color: var(--lu-text); }
.lineup-fp-areas { display: block; column-width: 340px; column-gap: 10px; }
.lineup-fp-area { break-inside: avoid; 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 { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 10px; align-items: start; }
.lineup-fp-areas { column-width: 300px; }
.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); font-size: 11px; letter-spacing: .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; padding: 2px 0; break-inside: avoid; font-size: 13px; line-height: 1.35; }
.lineup-fp-list li b { color: #8fd1b4; font-variant-numeric: tabular-nums; }
.lineup-fp-list li b.is-over { color: #ef6b62; }
.lineup-fp-list p { margin: 0; color: var(--lu-muted); }
.lineup-fp-list.is-needs h4 { color: #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)); gap: 6px 10px; padding: 8px 12px 12px; }
.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: #e9a63a; font-size: 12px; font-weight: 700; }
.lineup-pick-sep { margin: 14px 0 4px; color: var(--lu-muted); font-size: 11px; letter-spacing: .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: .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 .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: #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: rgba(255, 255, 255, .07); }
.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: #ff9b94; }
.lineup-blockmenu .is-danger svg { stroke: #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: #fff; background: transparent; border: 0; }
.lineup-plan-area-nav .lineup-areaseg .lineup-seg-thumb { background: rgba(74, 143, 232, .22); box-shadow: inset 0 0 0 1px rgba(74, 143, 232, .75); }

/* ---- grouped cards: spots side by side ---- */
.lineup-planning-body .lineup-slots.is-row { display: grid; grid-template-columns: repeat(var(--span, 1), minmax(0, 1fr)); gap: 6px; }
.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 { padding: 6px 8px 8px; border: 1px solid color-mix(in srgb, var(--area) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--area) 9%, transparent); }
.lineup-count { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px; background: rgba(255, 255, 255, .1); 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 { display: flex; flex-direction: row; gap: 6px; }
.lineup-planning-body .lineup-slots.is-row > .lineup-spot { flex: 1 1 0; 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; inset: -3px -4px; 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; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lineup-plan-warnings { position: relative; flex: none; margin: 0; }
.lineup-plan-warnings > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #6b5527; border-radius: 12px; background: #2a2314; color: #f1c777; font-size: 14px; 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; z-index: 25; width: min(360px, 80vw); margin: 0; padding: 10px 12px 10px 28px; border: 1px solid var(--lu-line); border-radius: 14px; background: #1a1d27; box-shadow: 0 18px 40px #000a; color: var(--lu-text); font-size: 13.5px; line-height: 1.45; }
.lineup-plan-warnings li { margin: 4px 0; }
.lineup-area-grid { gap: 16px 20px; padding: 14px 18px 18px; }
.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); background: rgba(245, 184, 46, .14); color: var(--lu-accent); box-shadow: 0 0 0 1px var(--lu-accent) inset; }
.lineup-people.is-picking { border-color: var(--lu-accent); 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 { position: sticky; bottom: 0; z-index: 6; margin: 0; padding: 10px 0 2px; background: var(--bg, #0d0f12); }
.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 { overflow: visible; max-height: none; 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 ---- */
body .tool-workspace-screen[data-tool="lineup-hub"] { grid-template-rows: minmax(0, 1fr); }
.lineup-planning-body .lineup-areas { display: flex; flex-direction: column; }
.lineup-planning-body .lineup-areas > .lineup-area { flex: 1 1 auto; display: flex; flex-direction: column; }
.lineup-planning-body .lineup-areas > .lineup-area > .lineup-area-grid { flex: 1 1 auto; align-content: space-evenly; }
.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, .22); box-shadow: inset 0 0 0 1px rgba(74, 143, 232, .75); }
.lineup-fp-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 12px; align-items: start; }
.lineup-fp-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; column-width: auto; align-items: start; }
.lineup-fp-area { margin: 0; padding: 0 0 6px; border: 1px solid var(--lu-line); border-left: 4px solid var(--area, #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: .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%, #1d2029); border: 1px solid color-mix(in srgb, var(--area, #888) 55%, transparent); color: #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-list { columns: 2; column-gap: 12px; }
.lineup-pp-row { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name where" "shift where"; gap: 0 10px; align-items: center; margin-bottom: 8px; padding: 9px 14px; border: 1px solid var(--lu-line); border-radius: 12px; background: var(--lu-card); }
.lineup-pp-name { grid-area: name; font-size: 16px; 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 { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c, #888) 24%, #1d2029); border: 1px solid color-mix(in srgb, var(--c, #888) 60%, transparent); color: #fff; font-size: 13.5px; font-style: normal; font-weight: 750; white-space: nowrap; }
.lineup-pp-spot.is-none { background: transparent; border: 1px dashed #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 { columns: auto 250px; column-gap: 10px; }
.lineup-pp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name where"; margin-bottom: 6px; padding: 6px 10px; 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); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; columns: auto; flex: none; }
.lineup-pp-row { margin-bottom: 0; }

.lineup-pp-list { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.lineup-pp-list { 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; min-width: 0; }
.lineup-nav-left .lineup-fpseg { animation: lineup-fp-in .22s ease both; }
@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 .26s cubic-bezier(.3, .8, .3, 1), width .26s cubic-bezier(.3, .8, .3, 1); }
.lineup-toggle { position: relative; }
.lineup-toggle button { position: relative; z-index: 1; }
.lineup-toggle button.active { background: transparent; box-shadow: none; color: #fff; }
.lineup-toggle .lineup-seg-thumb { top: 3px; bottom: 3px; border-radius: 9px; background: rgba(245, 184, 46, .2); box-shadow: inset 0 0 0 1px rgba(245, 184, 46, .6); }
.lineup-enter { animation: lineup-enter .24s cubic-bezier(.3, .8, .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; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.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: rgba(255, 255, 255, .03); text-align: left; }
.lineup-pt th > button, .lineup-pt th > span { display: block; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--lu-muted); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.lineup-pt th > button { cursor: pointer; }
.lineup-pt th > button.active { color: var(--lu-accent); }
.lineup-pt td { height: 32px; padding: 3px 12px; 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: rgba(255, 255, 255, .025); }
.lineup-pt col.c-name, .lineup-pt th:nth-child(1) { width: 36%; }
.lineup-pt th:nth-child(2) { width: 18%; }
.lineup-pt th:nth-child(3) { width: 24%; }
.lineup-pt th:nth-child(4) { width: 22%; }
.lineup-pt-wrap:not(.is-split) .lineup-pt th:nth-child(1) { width: 30%; }
.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; }
.lineup-pt .lineup-pp-spot { padding: 2px 9px; font-size: 13px; }

/* ---- table columns sized so nothing is clipped in the two-table layout ---- */
.lineup-pt td { padding: 3px 8px; }
.lineup-pt th > button, .lineup-pt th > span { padding: 9px 8px; }
.lineup-pt th:nth-child(1) { width: 27%; }
.lineup-pt th:nth-child(2) { width: 19%; }
.lineup-pt th:nth-child(3) { width: 28%; }
.lineup-pt th:nth-child(4) { width: 26%; }
.lineup-pt-wrap:not(.is-split) .lineup-pt th:nth-child(1) { width: 25%; }
.lineup-pt .lineup-pp-spot { padding: 2px 8px; font-size: 12.5px; }
.lineup-pt .lineup-tag { font-size: 9.5px; padding: 2px 6px; }
.lineup-pt .lineup-tag.is-onbreak, .lineup-pt .lineup-tag.is-taken { font-size: 11px; }
.lineup-pt-shift { font-size: 13px; }

.lineup-pt th:nth-child(1) { width: 24%; }
.lineup-pt th:nth-child(2) { width: 24%; }
.lineup-pt th:nth-child(3) { width: 27%; }
.lineup-pt th:nth-child(4) { width: 25%; }
.lineup-pt-shift { font-size: 12.5px; }
.lineup-pt th:nth-child(1) { width: 22%; }
.lineup-pt th:nth-child(2) { width: 28%; }
.lineup-pt th:nth-child(3) { width: 26%; }
.lineup-pt th:nth-child(4) { width: 24%; }
.lineup-pt-shift { font-size: 12.5px; letter-spacing: -.01em; }
.lineup-pt td { padding: 3px 6px; }
.lineup-pt th > button, .lineup-pt th > span { padding: 9px 6px; }
.lineup-pt th:nth-child(1) { width: 23%; }
.lineup-pt th:nth-child(2) { width: 25%; }
.lineup-pt th:nth-child(3) { width: 27%; }
.lineup-pt th:nth-child(4) { width: 25%; }
.lineup-pt .lineup-tag { font-size: 9px; padding: 2px 5px; letter-spacing: .02em; }
.lineup-pt .lineup-pp-spot { padding: 2px 7px; font-size: 12px; }
.lineup-pt th:nth-child(1) { width: 22%; }
.lineup-pt th:nth-child(2) { width: 28%; }
.lineup-pt th:nth-child(3) { width: 26%; }
.lineup-pt th:nth-child(4) { width: 24%; }
.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 .15s, background .15s; }
.lineup-fp-list.is-action:hover, .lineup-fp-list.is-action:focus-visible { border-color: var(--lu-accent); 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; gap: 6px; padding: 14px; border: 1px solid var(--lu-line); border-radius: 16px; background: #181b25; }
.lineup-bk-card.is-over { border-color: #8a3a35; background: #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: -.02em; color: #8fd1b4; }
.lineup-bk-clock.is-over, .lineup-bk-card.is-over .lineup-bk-clock { color: #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: #181b25; color: var(--lu-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .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 #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, .12); }
.lineup-nb-card.is-on i { border-color: #e9a63a; background: #e9a63a; color: #1a1308; }
.lineup-modal footer button[disabled] { opacity: .45; cursor: default; }

.lineup-fp-list.is-empty { opacity: .5; cursor: default; }
.lineup-fp-list.is-empty h4 em { opacity: .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: rgba(255, 255, 255, .08); 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: #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: rgba(255, 255, 255, .07); }
.lineup-bk-menu .is-danger { color: #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 .15s, background .15s, color .15s; }
.lineup-nb-mode button.active { border-color: var(--lu-accent); background: rgba(245, 184, 46, .14); color: #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; background: linear-gradient(to right, var(--lu-accent) var(--p, 0%), #2a2e3b var(--p, 0%)); }
.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; background: #2a2e3b; }
.lineup-range::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--lu-accent); }
.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, .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 { color: var(--lu-muted); 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%), #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: #3a3f4e; }
.lineup-range::-moz-range-thumb { border-color: #f5b82e; }
.lineup-when-out small { color: #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); 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); background: rgba(245, 184, 46, .1); color: var(--lu-accent); 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; }