/* Planner21 · quiet white planning surface with blue focus and amber warnings. */
#plannerView { min-width:0; }
#plannerBoard .p21-column-sort { display:grid; gap:4px; min-width:0; margin:10px 12px; color:#536777; font-size:12px; }
#plannerBoard .p21-column-sort select { width:100%; min-width:0; min-height:44px; padding:8px 28px 8px 10px; border:1px solid #c8d4df; border-radius:10px; background:#fff; color:#263d49; font:inherit; }
#plannerBoard .p21-column-sort select:focus-visible { outline:3px solid #377cb3; outline-offset:2px; }
#plannerBoard .planner-card-sort-detail { font-size:12px; color:#536777; }
@media(max-width:700px){ #plannerBoard .p21-column-sort select { font-size:16px; } }
#plannerView .tenant-planner-heading h2 { font-size:2rem; letter-spacing:-.04em; }
#plannerView .tenant-planner-heading p { font-size:.875rem; }
#plannerView .tenant-planner-heading .eyebrow { font-size:.75rem; }
#plannerView .tenant-planner-toolbar { box-shadow:none; background:#fff; align-items:center; }
#plannerView .tenant-planner-toolbar label span,
#plannerView .tenant-planner-toolbar button,
#plannerView .tenant-planner-toolbar input,
#plannerView .tenant-planner-status { font-size:.875rem; }
#plannerView .tenant-planner-toolbar>div { flex-wrap:wrap; }
#plannerView .tenant-planner-board.is-schedule { display:block; overflow:visible; padding:0; min-width:0; }
.p21-schedule { --p21-ink:#1c3040; --p21-muted:#536777; --p21-line:#dce4eb; color:var(--p21-ink); font-size:1rem; min-width:0; }
.p21-schedule *, .p21-schedule *::before, .p21-schedule *::after { box-sizing:border-box; }
.p21-schedule button,.p21-schedule input,.p21-schedule select { font:inherit; }
.p21-schedule button { cursor:pointer; }
.p21-schedule button:focus-visible,.p21-schedule input:focus-visible,.p21-schedule select:focus-visible,.p21-table-scroll:focus-visible { outline:3px solid #377cb3; outline-offset:3px; }
.p21-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:end; justify-content:space-between; margin:10px 0 24px; }
.p21-week-nav,.p21-filters { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.p21-controls label { display:grid; gap:6px; color:var(--p21-muted); font-size:.875rem; }
.p21-controls button,.p21-controls select,.p21-controls input { min-height:42px; max-width:100%; border:1px solid #c8d4df; border-radius:9px; padding:8px 12px; background:#fff; color:var(--p21-ink); font-size:.875rem; }
.p21-week-nav>label { margin-left:8px; }
.p21-controls button:hover { background:#eaf2f9; border-color:#82a8c7; }
.p21-week-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.p21-week-heading h3 { margin:0 0 5px; font-size:1.3rem; letter-spacing:-.025em; }
.p21-week-heading p,.p21-week-heading>span { margin:0; color:var(--p21-muted); font-size:.875rem; }
.p21-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border:1px solid var(--p21-line); border-radius:14px; overflow:hidden; margin-bottom:18px; background:var(--p21-line); }
.p21-summary>div { display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff; }
.p21-summary strong { font-size:1.65rem; font-variant-numeric:tabular-nums; }
.p21-summary span { color:var(--p21-muted); font-size:.875rem; line-height:1.4; }
.p21-summary .p21-warning { background:#fff5e6; color:#88520f; }
.p21-table-scroll { max-width:100%; overflow:auto; border:1px solid var(--p21-line); border-radius:14px; background:#fff; }
.p21-table { width:100%; min-width:1330px; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.p21-table th,.p21-table td { padding:10px; vertical-align:top; border-right:1px solid var(--p21-line); border-bottom:1px solid var(--p21-line); text-align:left; white-space:normal; }
.p21-table tr>*:last-child { border-right:0; }
.p21-table tbody tr:last-child>* { border-bottom:0; }
.p21-table thead th { background:#f5f8fb; font-size:.875rem; font-weight:500; padding:14px 12px; }
.p21-table thead th strong { display:block; margin-top:4px; font-size:1rem; }
.p21-table thead th small { display:block; margin-top:4px; color:#185a8c; }
.p21-table th:first-child { position:sticky; left:0; width:175px; z-index:1; background:#f5f8fb; }
.p21-table tbody th { padding:18px 14px; font-size:.875rem; }
.p21-person { display:block; overflow-wrap:anywhere; line-height:1.45; }
.p21-table tbody th small { display:block; margin-top:7px; color:var(--p21-muted); font-weight:400; font-size:.8125rem; }
.p21-table .is-weekend { background:#f6f7f9; }
.p21-table .is-today { background:#edf5fd; }
.p21-table td { height:112px; }
.p21-empty-cell { display:block; margin:22px 0; text-align:center; color:#657c8c; }
.p21-order { display:grid; gap:5px; width:100%; padding:11px; margin:0 0 8px; border:1px solid #bfd0df; border-left:3px solid #3475a8; border-radius:9px; background:#fff; color:var(--p21-ink); text-align:left; overflow-wrap:anywhere; transition:border-color .15s; }
.p21-order:hover { border-color:#3475a8; background:#f8fbff; }
.p21-order:last-child { margin-bottom:0; }
.p21-order>strong { font-size:.875rem; line-height:1.45; }
.p21-order>span:not(.p21-order-top),.p21-order>small { font-size:.8125rem; line-height:1.45; }
.p21-order>span:not(.p21-order-top),.p21-order .p21-slot { font-size:.875rem; }
.p21-order>small { color:var(--p21-muted); }
.p21-order-top { display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:space-between; }
.p21-order-top>b { font-size:.75rem; }
.p21-status { font-size:.75rem; line-height:1.35; padding:3px 5px; border-radius:5px; background:#edf1f4; color:#455969; }
.p21-status-planned { color:#1a568a; background:#e4effa; }
.p21-status-in_progress { color:#176047; background:#e2f4ec; }
.p21-status-waiting { color:#88520f; background:#fff0d9; }
.p21-status-done { color:#4b5965; background:#edf0f3; }
.p21-order.has-conflict { border-left-color:#b36a15; background:#fffaf1; }
.p21-order em,.p21-order .p21-missing { color:#895313; font-size:.8125rem; font-style:normal; line-height:1.4; }
.p21-order .p21-slot { border-top:1px solid #e5ebf0; padding-top:6px; font-variant-numeric:tabular-nums; font-weight:600; color:#295b81; }
.p21-explanation { font-size:.8125rem; color:var(--p21-muted); line-height:1.65; margin:14px 0 24px; max-width:1150px; }
.p21-lower { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; }
.p21-lower>section { padding:20px; background:#fff; border:1px solid var(--p21-line); border-radius:14px; min-width:0; }
.p21-lower header { margin-bottom:16px; }
.p21-lower h3 { display:flex; align-items:center; gap:9px; margin:0; font-size:1.05rem; }
.p21-lower h3 span { border-radius:6px; padding:3px 7px; font-size:.875rem; background:#edf2f6; }
.p21-lower header p { color:var(--p21-muted); font-size:.8125rem; margin:6px 0 0; }
.p21-backlog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start; max-height:450px; overflow:auto; padding:3px; }
.p21-backlog .p21-order { margin:0; }
.p21-milestones { display:grid; gap:8px; max-height:450px; overflow:auto; padding:3px; }
.p21-milestones button { display:grid; gap:5px; text-align:left; padding:12px; border:1px solid var(--p21-line); border-radius:9px; background:#f8fafc; color:var(--p21-ink); }
.p21-milestones strong { font-size:.875rem; }
.p21-milestones span { font-size:.8125rem; overflow-wrap:anywhere; }
.p21-milestone-type { color:#295b81; }
.p21-empty { font-size:.875rem; line-height:1.55; color:var(--p21-muted); }
.p21-backlog>.p21-empty { grid-column:1/-1; }
.p21-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#plannerScheduleHint { padding:12px 14px; border:1px solid #d6e2ee; border-radius:10px; background:#f0f6fc; color:#244b6b; font-size:.875rem; line-height:1.5; }
#plannerScheduleHint.is-warning { background:#fff6e8; border-color:#dfbd8a; color:#835013; }
@media(max-width:1100px) { .p21-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .p21-lower { grid-template-columns:1fr; } }
@media(max-width:700px) { .p21-controls,.p21-filters { align-items:stretch; } .p21-filters>label { flex:1 1 140px; min-width:0; } .p21-week-nav { width:100%; } .p21-week-nav>label { margin-left:0; } .p21-summary>div { display:grid; gap:4px; padding:13px; } .p21-backlog { grid-template-columns:1fr; } .p21-table th:first-child { width:125px; } .p21-table { min-width:1280px; } .p21-lower>section { padding:15px; } }