/* Unit location stays visible while teachers move between planning tabs. */
.detail-workspace-title.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.unit-orientation{padding:15px 24px;background:#F3F4F6;border-bottom:1px solid #D5D7DA;scroll-margin-top:calc(var(--planning-header-height,76px) + 10px);border-color:#D5D7DA}
.unit-orientation-label{display:flex;justify-content:space-between;gap:20px;margin-bottom:10px;color:#4D5056;font-size:13px}
.unit-orientation-label>span:first-child{display:flex;align-items:center;gap:8px;font-weight:700}
.unit-orientation svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lesson-identity svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.unit-neighbors svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.applied-scope svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.unit-sequence{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}
.unit-sequence button{border:1px solid #D5D7DA;background:#FFFFFF;padding:9px;border-radius:8px;text-align:left;display:flex;align-items:center;gap:9px;min-width:0;min-height:78px;cursor:pointer;color:#161616;transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out}
@media(hover:hover) and (pointer:fine){.unit-sequence button:hover,.detail-polished .unit-sequence button:hover{border-color:#297D77;background:#F0FDFA;color:#216861}}
.unit-sequence button[aria-pressed=true]{background:#F0FDFA;border:2px solid #297D77;padding:8px;box-shadow:none}
.unit-sequence img{width:56px;height:48px;flex:none;object-fit:contain;background:#fff;border-radius:6px}
.unit-sequence small{display:block;font-size:12px;color:#297D77;margin-bottom:3px;font-weight:700;font-family:Inter,Arial,sans-serif}
.unit-sequence strong{font-size:12px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#4D5056}
.unit-overview-icon{display:flex;align-items:center;justify-content:center;height:48px;width:33px;flex:none;background:#F3F4F6;border-radius:8px}
.unit-overview-icon svg{width:27px;height:27px;stroke-width:1.8}
.lesson-sticky-context{position:sticky;top:var(--planning-header-height,76px);z-index:8;background:#fff;border-bottom:1px solid #D5D7DA}
.inline-planning-detail .lesson-sticky-context>.detail-tabs{position:static;border-bottom:0}
.lesson-identity{padding:11px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lesson-identity>span{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lesson-identity strong{font-size:14px}.lesson-identity small{font-size:12px;color:var(--muted)}
.lesson-identity button{border:0;background:none;display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;color:#297D77;font-size:12px;font-weight:700;min-height:36px}
@media(hover:hover) and (pointer:fine){.lesson-identity button:hover{background:#F3F4F6;color:#161616;text-decoration:none}}
/* Previous and next use one shared style on every lesson tab. */
.unit-neighbors{display:flex;justify-content:space-between;align-items:stretch;gap:16px;padding:16px 24px;border-top:1px solid #D5D7DA;background:#FFFFFF}
.unit-neighbors button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:fit-content;max-width:min(360px,46%);min-width:0;min-height:68px;padding:11px 14px;border:1px solid #D5D7DA;border-radius:8px;background:#FFFFFF;color:#297D77;font:inherit;font-size:14px;font-weight:700;line-height:1.45;text-align:left;cursor:pointer;transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out}
.unit-neighbors button>span:not(.reverse){flex:1;min-width:0}
.unit-neighbors button small{display:block;margin:0 0 4px;font-size:14px;line-height:1.4;font-weight:700;color:#297D77}
.unit-neighbors button strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:400;line-height:1.5;color:#4D5056}
@media(hover:hover) and (pointer:fine){.unit-neighbors button:hover{background:#F0FDFA;border-color:#297D77;color:#216861;box-shadow:none}}
.unit-neighbors button:active{background:#F0FDFA;border-color:#297D77;color:#216861;box-shadow:none}
.unit-neighbors>span{align-self:center;font-size:12px;color:var(--muted)}
.unit-neighbors .reverse{display:flex;flex:none;transform:rotate(180deg)}
.unit-neighbors button svg{translate:0 0;transition:translate 180ms ease-out}
@media(hover:hover) and (pointer:fine){.unit-neighbors button:hover svg{translate:4px 0}}
.inline-planning-detail.has-unit-navigator .detail-banner{padding-top:24px;padding-bottom:24px}
.has-unit-navigator .detail-kicker{color:#4D5056}
/* Applied filters describe the visible results; draft changes still wait for Search. */
.applied-scope{margin:16px 0 0;padding:16px;border:1px solid #D5D7DA;border-radius:8px;background:#FFFFFF}
.scope-heading{display:flex;align-items:center;gap:15px}.scope-heading>div:first-child{flex:1;min-width:0}
.scope-heading .eyebrow{font-size:12px;letter-spacing:1px}.scope-heading p{font-size:15px;margin:5px 0 0;color:#4D5056}
.scope-result-count{font-size:13px;font-weight:700;white-space:nowrap}
.scope-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.scope-chips button{display:flex;gap:10px;align-items:center;border:1px solid #D5D7DA;border-radius:9999px;background:#FFFFFF;color:#297D77;font-size:13px;font-weight:700;padding:9px 12px;min-height:42px;cursor:pointer;text-align:left;font-family:Lato,Arial,sans-serif}
@media(hover:hover) and (pointer:fine){.scope-chips button:hover{background:#F3F4F6;border-color:#D5D7DA;color:#161616}}
.scope-chips svg{width:15px;height:15px}
.scope-chips .scope-clear{border-color:transparent;background:transparent;text-decoration:none}

.scope-explanation{margin:9px 0 0;font-size:12px;color:var(--muted);line-height:1.5}.scope-unrestricted{font-size:14px;color:#4D5056}
.scope-filter-control .filter-trigger{min-height:40px;padding:7px 10px;font-size:12px;background:#fff}.scope-filter-control .filter-trigger svg{width:16px;height:16px}
body[data-planning-view=search] .results-title>.results-count{display:none}
.unit-sequence button:focus-visible{outline:2px solid #297D77;outline-offset:3px}
.lesson-identity button:focus-visible{outline:2px solid #297D77;outline-offset:3px}
.unit-neighbors button:focus-visible{outline:2px solid #297D77;outline-offset:3px}
.unit-neighbors button:focus-visible svg{translate:4px 0}
.scope-chips button:focus-visible{outline:2px solid #297D77;outline-offset:3px}
@media(max-width:760px){
 .unit-orientation{padding:13px 15px}.unit-orientation-label{font-size:12px;gap:8px}.unit-orientation-label>span:last-child{display:none}
 .unit-sequence{grid-template-columns:repeat(2,minmax(0,1fr))}.unit-sequence button{min-height:66px}.unit-sequence button:first-child{grid-column:1/-1;min-height:40px;padding-block:5px}.unit-sequence button:first-child>span:last-child{display:flex;align-items:center;gap:8px}.unit-sequence button:first-child small{margin:0}.unit-overview-icon{height:28px}.unit-sequence img{width:46px;height:38px}.unit-sequence strong{font-size:12px}
 .lesson-identity{padding:10px 14px 0}.lesson-identity>span{display:block}.lesson-identity small{display:block;font-size:12px;margin-top:3px}.lesson-identity strong{font-size:13px}.unit-neighbors{flex-direction:column;gap:10px;padding:16px}.unit-neighbors button{width:100%;max-width:none;min-height:68px;padding:11px 14px;gap:12px}.unit-neighbors>span{display:none}.applied-scope{padding:15px}.scope-chips button{font-size:12px;font-family:Lato,Arial,sans-serif}
}
@media(max-width:500px){.scope-heading{flex-wrap:wrap;gap:10px}.scope-heading>div:first-child{flex-basis:70%}.scope-result-count{order:3;flex-basis:100%;font-size:12px}.scope-heading p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.unit-sequence button,.unit-neighbors button,.unit-neighbors button svg{transition:none}.unit-neighbors button:is(:hover,:focus-visible) svg{translate:0 0}}

.lesson-identity [data-view-unit-sequence] svg{transform:rotate(-90deg)}

