html.editor-drawer-open { overflow: hidden; }
dialog.editor-drawer { box-sizing:border-box; inset:0 0 0 auto; margin:0; width:min(880px,95vw); height:100dvh; max-height:100dvh; max-width:100vw; border:0; border-left:1px solid var(--tone-526b7c,#526b7c); border-radius:18px 0 0 18px; padding:0; background:var(--tone-172733,#172733); color:var(--tone-e5edf2,#e5edf2); box-shadow:-20px 0 70px var(--tone-0007,#0007); }
dialog.editor-drawer[open] { display:flex; flex-direction:column; }
dialog.editor-drawer::backdrop { background:var(--tone-030b14a6,#030b14a6); }
.editor-drawer .editor-drawer-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; margin:0; border-bottom:1px solid var(--tone-405463,#405463); flex-shrink:0; }
.editor-drawer .editor-drawer-header h2 { margin:5px 0 0; font-size:21px; overflow-wrap:anywhere; }
.editor-drawer .editor-drawer-close { flex:0 0 42px; width:42px; height:42px; margin:0; padding:0; font-size:28px; }
.editor-drawer-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:20px 24px 0; }
.editor-drawer-body form { margin:0; }
.editor-drawer-body fieldset { min-width:0; margin:0; padding:0; border:0; }
.editor-drawer-body .fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.editor-drawer-body .actions:last-child,.editor-drawer-body .editor-actions { position:sticky; bottom:0; z-index:2; display:flex; flex-wrap:wrap; gap:10px; padding:16px 0; margin:20px 0 0; background:var(--tone-172733,#172733); border-top:1px solid var(--tone-526b7c,#526b7c); box-shadow:0 -12px 18px var(--tone-172733,#172733); }
.editor-feedback,.editor-discard { flex-shrink:0; max-height:30dvh; overflow:auto; margin:12px 24px 0; padding:12px; }
.editor-discard { background:var(--tone-413522,#413522); border:1px solid var(--tone-af9159,#af9159); border-radius:10px; }
.editor-discard button { margin:4px 8px 0 0; }
@media(max-width:600px){dialog.editor-drawer{width:100vw;border-radius:0}.editor-drawer .editor-drawer-header{padding:14px 16px}.editor-drawer-body{padding:16px 16px 0}.editor-drawer-body .fields{grid-template-columns:1fr}.editor-feedback,.editor-discard{margin-left:16px;margin-right:16px}}
@media(prefers-reduced-motion:no-preference){dialog.editor-drawer[open]{animation:editor-slide .18s ease-out}@keyframes editor-slide{from{transform:translateX(30px);opacity:.6}to{transform:translateX(0);opacity:1}}}

.department-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 18px; padding:12px; background:var(--tone-101d29,#101d29); border:1px solid var(--tone-42596c,#42596c); border-radius:14px; }
.department-tabs .department-tab { flex:1 1 155px; min-height:62px; margin:0; padding:12px 15px; text-align:left; white-space:normal; line-height:1.4; font-size:14px; font-weight:600; border:1px solid var(--tone-415b70,#415b70); background:var(--tone-203243,#203243); color:var(--tone-c7d7e4,#c7d7e4); border-radius:9px; }
.department-tabs .department-tab:hover { background:var(--tone-2c4658,#2c4658); }
.department-tabs .department-tab.selected { background:var(--tone-265146,#265146); border-color:var(--tone-79ddc7,#79ddc7); color:var(--tone-e1fff6,#e1fff6); box-shadow:inset 0 3px var(--tone-79ddc7,#79ddc7); }
@media(max-width:600px){.department-tabs{flex-wrap:nowrap;overflow-x:auto;padding:8px;scroll-snap-type:x proximity}.department-tabs .department-tab{flex:0 0 180px;scroll-snap-align:start}}

.department-tabs .pill{display:inline-block;margin-left:.4rem;font-size:.75rem;padding:2px 7px}

/* Table editing uses the available screen width and keeps cell boundaries visible. */
dialog.editor-drawer:has(.tep-grid){width:min(1400px,98vw)}
.tep-grid table{min-width:900px;width:100%;border-collapse:collapse}
.tep-grid th,.tep-grid td{padding:8px;border:1px solid var(--tone-526b7c,#526b7c);vertical-align:top}
.tep-grid input{box-sizing:border-box;width:100%;min-width:85px;margin:0}
.tep-grid td:first-child{width:25%;min-width:220px}
.tep-grid input[type=checkbox]{min-width:0;width:auto}

/* Keep context and fields in one scroll area; messages never consume the entire form viewport. */
.editor-drawer-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-block:12px}
.editor-drawer-content>.editor-context{display:flow-root}
.editor-drawer:not(.editor-fullscreen)>.editor-drawer-content>.editor-drawer-body{overflow:visible;flex:none}
.editor-context>.editor-feedback,.editor-context>.editor-discard{max-height:none;overflow:visible;overflow-wrap:anywhere}
.editor-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.editor-drawer-header>div:first-child{min-width:0}
.editor-drawer .editor-message-link{font-size:12px;padding:7px 9px;min-height:36px}
.editor-drawer.editor-fullscreen>.editor-drawer-content{display:flex;flex-direction:column}
.editor-drawer.editor-fullscreen>.editor-drawer-content>.editor-context{flex:none}
.editor-drawer.editor-fullscreen>.editor-drawer-content>.editor-drawer-body{flex:1 0 65dvh}
@media(max-width:600px){.editor-drawer .editor-drawer-header h2{font-size:18px}.editor-header-actions{gap:5px}.editor-drawer .editor-message-link{padding:6px}.editor-drawer.editor-fullscreen>.editor-drawer-content>.editor-drawer-body{flex:1 0 70dvh}}

/* Optional form actions stay outside the scroll area and its fieldset boundaries. */
.editor-drawer .editor-drawer-footer{flex:0 0 auto;min-height:0;max-height:45dvh;overflow:auto;box-sizing:border-box;padding:16px 24px;background:var(--surface,var(--tone-172733,#172733));border-top:2px solid var(--line,var(--tone-526b7c,#526b7c));overscroll-behavior:contain}
.editor-drawer-footer>fieldset{min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.editor-drawer-footer .actions{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.editor-drawer-footer .actions>button{min-height:46px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){.editor-drawer .editor-drawer-footer{padding:12px 16px}.editor-drawer-footer .actions>button{flex:1 1 140px}}
