/* A level is a browsable sequence. Each unit or lesson card opens its planning details. */
.library-browse .browse-level-head.browse-title{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:end;column-gap:27px;margin:0 0 24px}
.browse-level-head>div:first-child{min-width:0}
.browse-level-head .browse-level-tools{margin:0}
.browse-level-head .browse-local-search{width:100%;min-width:0}
[data-browse-results]{overflow-anchor:none}
.browse-level-head h1{font-size:40px;font-weight:700;line-height:1.2;letter-spacing:-.02em;text-wrap:pretty;font-family:Lato,Arial,sans-serif;color:#161616}
.browse-level-context{display:flex;align-items:center;flex-wrap:wrap;gap:5px 17px;margin-top:9px}
.browse-level-head .browse-selected-level{margin:0;max-width:none;font-size:14px;line-height:1.6;color:var(--muted)}
.browse-level-context>.text-button{min-height:44px;padding:8px 0;font-size:12px;font-weight:700;color:#136F84;gap:6px;border-radius:8px;transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out}
@media(hover:hover) and (pointer:fine){.browse-level-context>.text-button:hover{background:#F3F4F6;color:#161616;text-decoration:none}}
.browse-level-context>.text-button svg{width:14px;height:14px}
.browse-level-tools{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:13px 24px;margin:0 0 21px}
.browse-local-search{display:block;width:min(100%,460px);min-width:220px}
.browse-local-search>span:first-child{display:block;font-size:12px;font-weight:700;line-height:1.4;color:#4D5056;margin-bottom:8px;font-family:Inter,Arial,sans-serif}
.browse-local-input{display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:0 13px;background:#FFFFFF;border:1px solid #D5D7DA;border-radius:8px;transition:border-color 180ms ease-out,box-shadow 180ms ease-out;padding-inline:12px}
.browse-local-input:focus-within{border-color:#297D77;box-shadow:0 0 0 3px #297D7726}
.browse-local-input>svg{flex:0 0 18px;width:18px;height:18px;color:var(--muted)}
.browse-local-input>input{display:block;min-width:0;flex:1;height:44px;margin:0;padding:8px 0;border:0;background:transparent;color:#000000;font:inherit;font-size:16px;outline:0;font-family:Lato,Arial,sans-serif}
.browse-local-input>input:focus-visible{outline:0}
.browse-local-input>input::placeholder{color:var(--muted);opacity:1}
.browse-results-status{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;font-size:12px;line-height:1.55;color:var(--muted);min-height:36px}
.browse-results-status:empty{display:none}
.browse-results-status>.text-button{font-size:12px;min-height:44px;padding:8px 0;color:#136F84;text-decoration:underline;text-underline-offset:4px;border-radius:8px;transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out}

@media(hover:hover) and (pointer:fine){.browse-results-status>.text-button:hover{background:#F3F4F6;color:#161616;text-decoration:none}}

/* Source exam domains remain open so teachers can scan all available lessons. */
.browse-domain-section{min-width:0;margin:0 0 30px}
.browse-domain-section:last-child{margin-bottom:0}
.browse-domain-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid #D5D7DA;border-color:#D5D7DA}
.browse-domain-heading h2{margin:0;color:#161616;letter-spacing:-.02em;font:700 24px/1.2 Lato,Arial,sans-serif}
.browse-domain-heading>span{color:var(--muted);font-size:12px;line-height:1.5;white-space:nowrap}

.browse-lesson-card h3 .open-arrow{display:inline-flex;margin-left:6px;vertical-align:middle}

/* One card and one destination for each unit. */
.unit-list.unit-browser{display:flex;flex-direction:column;gap:0;grid-template-columns:none;border:1px solid #D5D7DA;border-radius:8px;overflow:hidden;background:#FFFFFF}
.unit-browser .browse-unit-card.unit-row{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr) 154px;grid-template-rows:1fr;align-content:normal;align-items:center;gap:24px;width:100%;min-width:0;min-height:136px;margin:0;padding:20px 24px;border:0;border-bottom:1px solid #E5E7EB;border-radius:0;background:#FFFFFF;overflow:hidden;box-shadow:none;scroll-margin-top:20px;transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out}
@media(hover:hover) and (pointer:fine){.unit-browser .browse-unit-card:hover:not(:has(:is(.compare-toggle,.wk-add):is(:hover,:focus-visible))){background:#F0FDFA;color:#216861;border-color:#297D77;box-shadow:none;text-decoration:none;outline:1px solid #297D77;outline-offset:-1px}}
.browse-unit-media{display:block;align-self:center;grid-column:1;grid-row:1;min-width:0}
.browse-unit-media .slide-preview{width:100%;margin:0}
.browse-unit-media .slide-preview img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:4px;border-color:#D5D7DA;box-shadow:none}
.browse-unit-copy{display:block;grid-column:2;grid-row:1;min-width:0;padding:0}
.browse-unit-number{display:block;margin:0 0 6px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none}
.unit-browser .browse-unit-card h2{margin:0;letter-spacing:-.02em;text-wrap:pretty;overflow-wrap:normal;color:#161616;font:700 22px/1.25 Lato,Arial,sans-serif}
.browse-unit-card h2 .open-arrow{display:none}
.browse-unit-card h2>.card-primary{display:block;min-height:0;margin:0;padding:0;background:none;border:0;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:left}
.browse-unit-card .browse-unit-summary{margin:8px 0 0;color:#4D5056;font-size:14px;line-height:1.5;max-width:640px;text-wrap:pretty}
.browse-unit-coverage{display:block;margin:8px 0 0;color:#4D5056;font-size:12px;font-weight:700;line-height:1.5}
.unit-focus-label{font-weight:700;color:#4D5056}
.unit-browser .browse-unit-card:not(:has(.browse-unit-media)){grid-template-columns:minmax(0,1fr) 154px}
.unit-browser .browse-unit-card:not(:has(.browse-unit-media))>.browse-unit-copy{grid-column:1}
.unit-browser .browse-unit-card:not(:has(.browse-unit-media))>.browse-unit-actions{grid-column:2}
.browse-unit-actions{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;align-self:center;grid-column:3;grid-row:1;min-width:0;min-height:0;margin:0;padding:0;border:0}
.browse-unit-actions>.card-action-hint{display:flex;justify-content:center;min-height:44px;font-size:14px;line-height:1.4;gap:8px;color:#297D77;font-family:Lato,Arial,sans-serif;font-weight:700}
.browse-unit-actions .open-arrow{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin:0;flex:none;opacity:1}
.browse-unit-actions .open-arrow svg{display:block;width:16px;height:16px;stroke-width:2.6;transform:none!important}
.browse-unit-card mark{padding:0 .09em;border-radius:2px;background:#F0FDFA;color:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.browse-unit-card .card-primary:focus-visible::after{outline:2px solid #297D77;outline-offset:-3px;border-radius:inherit}

.browse-lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;min-width:0}
.browse-lesson-card{display:grid;grid-template-columns:minmax(100px,.82fr) minmax(0,1.18fr);align-content:start;align-items:start;grid-template-rows:minmax(0,1fr) auto;gap:0 17px;min-width:0;padding:16px 16px 0;background:#FFFFFF;border:1px solid #D5D7DA;border-radius:8px;color:#161616;overflow:hidden;transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out}
@media(hover:hover) and (pointer:fine){.browse-lesson-card:hover:not(:has(:is(.compare-toggle,.wk-add):is(:hover,:focus-visible))){background:#F0FDFA;color:#216861;border-color:#297D77;box-shadow:none;text-decoration:none}}
.browse-lesson-media{display:block;grid-column:1;grid-row:1;min-width:0}
.browse-lesson-media .slide-preview{width:100%;margin:0}
.browse-lesson-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border:1px solid #D5D7DA;border-radius:4px;box-shadow:0 1px 3px #0000001A}
.browse-lesson-copy{grid-column:2;grid-row:1;min-width:0;padding:1px 0 15px}
.browse-lesson-meta{display:block;margin:0 0 6px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.45}
.browse-lesson-card h3{margin:0;letter-spacing:-.02em;text-wrap:pretty;overflow-wrap:normal;color:#161616;font:700 20px/1.2 Lato,Arial,sans-serif}
.browse-lesson-card h3>.card-primary{display:block;padding:0;margin:0;min-height:0;background:none;border:0;color:inherit;text-align:left;font:inherit;line-height:inherit;letter-spacing:inherit}
.browse-lesson-focus{margin:9px 0 0;font-size:14px;line-height:1.5;color:#4D5056;text-wrap:pretty;font-family:Lato,Arial,sans-serif}
.browse-lesson-card:not(:has(.browse-lesson-media)){grid-template-columns:minmax(0,1fr)}
.browse-lesson-card:not(:has(.browse-lesson-media)) .browse-lesson-copy{grid-column:1}
.browse-lesson-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;grid-column:1/-1;align-self:end;min-width:0;min-height:53px;margin-top:auto;padding:8px 0;border-top:1px solid #D5D7DA;border-color:#E5E7EB}
.browse-lesson-actions>.card-action-hint{min-height:36px;color:#297D77;font-size:12px;line-height:1.4;gap:4px;font-family:Lato,Arial,sans-serif;font-weight:700}
.browse-lesson-actions .open-arrow{display:inline-flex;align-items:center;justify-content:center;margin:0;flex:none;width:16px;height:16px;opacity:1}
.browse-lesson-actions .open-arrow svg{display:block;width:15px;height:15px;stroke-width:2.6;transform:none!important}

.browse-lesson-card mark{padding:0 .09em;border-radius:2px;background:#F0FDFA;color:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.browse-lesson-card .card-primary:focus-visible::after{outline:2px solid #297D77;outline-offset:-3px;border-radius:inherit}

@media(max-width:1200px){
 .library-browse .browse-level-head.browse-title{display:block}
 .browse-level-head .browse-level-tools{margin-top:17px}
 .browse-level-head .browse-local-search{width:min(100%,460px)}
 .browse-lesson-card{grid-template-columns:minmax(100px,.82fr) minmax(0,1.18fr);gap:0 13px;padding:15px 15px 0}
 .browse-lesson-card h3{font-size:18px}
}
@media(max-width:950px) and (min-width:800px){
 .library-browse .browse-level-head.browse-title{display:grid;grid-template-columns:minmax(0,1fr) 270px;column-gap:24px}
 .browse-level-head .browse-level-tools{margin-top:0}
}
@media(max-width:950px){
 .browse-level-head h1{font-size:32px;font-family:Lato,Arial,sans-serif}
}
@media(max-width:640px){
 .library-browse .browse-level-head.browse-title{margin-bottom:20px}
 .browse-level-head h1{font-size:32px;line-height:1.19;letter-spacing:-.02em;font-family:Lato,Arial,sans-serif}
 .browse-level-context{gap:0 13px;margin-top:9px}
 .browse-level-head .browse-selected-level{font-size:13px;line-height:1.6}
 .browse-level-context>.text-button{font-size:12px;min-height:44px}
 .browse-level-tools{display:block;margin-bottom:19px}
 .browse-level-head .browse-level-tools{margin-top:17px;margin-bottom:0}
 .browse-local-search{width:100%;min-width:0}
 .browse-local-search>span:first-child{font-size:12px;font-family:Inter,Arial,sans-serif}
 .browse-local-input{min-height:47px}
 .browse-local-input>input{font-size:16px;height:45px;font-family:Lato,Arial,sans-serif}
 .browse-results-status{margin:9px 0 -4px;font-size:12px}
.browse-lesson-actions .open-arrow{opacity:1}
 .browse-lesson-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .browse-lesson-card{grid-template-columns:120px minmax(0,1fr);grid-template-rows:min-content auto auto auto;gap:0 15px;padding:16px 16px 0;border-radius:8px}
 .browse-lesson-media{grid-column:1;grid-row:1/3;align-self:start;width:100%;max-width:none;margin:0}
 .browse-lesson-copy{display:contents}
 .browse-lesson-meta{grid-column:2;grid-row:1;margin:1px 0 6px;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
 .browse-lesson-card h3{grid-column:2;min-width:0;font-size:20px;line-height:1.23;overflow-wrap:anywhere;hyphens:auto}
 .browse-lesson-card:is(.detail-overview-card,:has(.browse-lesson-meta)) h3{grid-row:2;align-self:start}
 .browse-lesson-card:not(.detail-overview-card):not(:has(.browse-lesson-meta)) h3{grid-row:1/3;align-self:center}
 .browse-lesson-focus{grid-column:1/-1;grid-row:3;margin:14px 0;font-size:13px;line-height:1.58;font-family:Lato,Arial,sans-serif}
 .browse-lesson-card:not(:has(.browse-lesson-media)) .browse-lesson-copy{display:block;grid-column:1/-1;grid-row:1;padding-bottom:0}
 .browse-lesson-grid>.browse-lesson-card:not(:has(.browse-lesson-focus)) .browse-lesson-actions{margin-top:14px}
 .browse-lesson-actions{grid-column:1/-1;grid-row:4;min-height:60px;padding:8px 0;gap:8px}
 .browse-lesson-actions>.card-action-hint{font-size:12px;font-family:Lato,Arial,sans-serif}
 .unit-browser .browse-unit-card.unit-row{grid-template-columns:88px minmax(0,1fr);gap:14px 16px;padding:16px;min-height:0}
 .unit-browser .browse-unit-card:not(:has(.browse-unit-media)){grid-template-columns:1fr}
 .unit-browser .browse-unit-card:not(:has(.browse-unit-media))>.browse-unit-actions{grid-column:1;grid-row:2}
 .unit-browser .browse-unit-card h2{font-size:20px}
 .browse-unit-number{margin-bottom:4px}
 .browse-unit-card .browse-unit-summary{font-size:13px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .browse-unit-actions{grid-column:1/-1;grid-row:2;flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
 .browse-unit-actions>.card-action-hint{justify-content:flex-start}
}
@media(max-width:379px){
 .browse-lesson-card{grid-template-columns:97px minmax(0,1fr);gap:0 12px;padding:16px 16px 0;border-radius:8px}
 .browse-lesson-card h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
 .browse-unit-actions .open-arrow{transition:none}
 .browse-local-input{transition:none}
.browse-lesson-actions .open-arrow{transition:none}
}
@media print{
 .unit-browser .browse-unit-card.unit-row{break-inside:avoid}
 .browse-level-tools{display:none!important}
.browse-level-context>.text-button{display:none!important}
.browse-lesson-actions>.compare-toggle{display:none!important}
.browse-lesson-card{break-inside:avoid;margin-bottom:12px}
}


