/* Learning uses the shared book and cloth palette; category hues are identities, not scores. */
.learning-catalog [hidden],.learning-dialog [hidden],.learning-ribbons [hidden]{display:none!important}
.learning-catalog input:not([type="checkbox"]):not([type="radio"]),.learning-catalog textarea,.learning-catalog select,.learning-dialog input:not([type="checkbox"]):not([type="radio"]),.learning-dialog textarea,.learning-dialog select{background:var(--field-bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:400 .9rem/1.45 var(--ui);min-height:42px;box-sizing:border-box}
.learning-catalog input:focus-visible,.learning-dialog input:focus-visible,.learning-catalog textarea:focus-visible,.learning-dialog textarea:focus-visible,.learning-dialog select:focus-visible{outline:2px solid var(--fern);outline-offset:2px}
.learning-category-grid>p{grid-column:1/-1}
html:has(#learningDialog[open]),html:has(.learning-editor[open]){overflow:hidden}
[data-color="green"]{--learning-color:light-dark(#285B43,#9CCDAE);--learning-on:light-dark(#FFFFFF,#10281B)}
[data-color="blue"]{--learning-color:light-dark(#315D87,#A6C7E7);--learning-on:light-dark(#FFFFFF,#142B41)}
[data-color="burgundy"]{--learning-color:light-dark(#793D53,#DEADBD);--learning-on:light-dark(#FFFFFF,#361B26)}
[data-color="purple"]{--learning-color:light-dark(#665083,#C7B6E1);--learning-on:light-dark(#FFFFFF,#2F233E)}
[data-color="teal"]{--learning-color:light-dark(#276465,#A0CFCA);--learning-on:light-dark(#FFFFFF,#15302E)}
[data-color="ochre"]{--learning-color:light-dark(#805B24,#DFCA93);--learning-on:light-dark(#FFFFFF,#342912)}
[data-color="slate"]{--learning-color:light-dark(#53616A,#B9C7D0);--learning-on:light-dark(#FFFFFF,#232D33)}
.learning-ribbons{display:flex;justify-content:flex-end;gap:6px;max-width:var(--page-max);margin:0 auto;position:relative;height:0;z-index:41}
@media(min-width:601px){header.cover:has(.learning-ribbon)+main .pagehead{padding-right:160px}}
@media(max-width:600px){header.cover:has(.learning-ribbon)+main>.view:not(.learning-catalog){padding-top:30px}}
.learning-ribbon{position:relative;display:block;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--learning-on);cursor:pointer;touch-action:manipulation}
.learning-ribbon:focus-visible{outline:2px solid var(--fern);outline-offset:2px}
.ribbon-clip{position:absolute;left:6px;top:0;width:32px;height:40px;overflow:hidden;pointer-events:none}
.ribbon-swatch{display:flex;align-items:flex-start;justify-content:center;width:32px;height:40px;padding-top:7px;background:var(--learning-color);font-size:1rem;line-height:1;clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);transform:translateY(-28px);transition:transform .16s ease}
.learning-ribbon[data-revealed="true"] .ribbon-swatch{transform:translateY(0)}
.ribbon-label{position:absolute;top:46px;right:0;width:max-content;max-width:min(260px,calc(100vw - 32px));background:var(--card);color:var(--ink);font:500 .75rem/1.4 var(--ui);padding:5px 9px;border:1px solid var(--line);border-radius:5px;opacity:0;pointer-events:none;white-space:normal;overflow-wrap:anywhere}
.learning-ribbon[data-revealed="true"] .ribbon-label{opacity:1}
.learning-dot{position:absolute;right:9px;top:2px;width:5px;height:5px;background:var(--learning-on);border-radius:50%;outline:2px solid var(--learning-color);pointer-events:none;transition:top .16s ease}
.learning-ribbon[data-revealed="true"] .learning-dot{top:5px}
.learning-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:0 24px 80px #0005;overflow:auto}
.learning-dialog::backdrop{background:#07191099}
.learning-dialog{margin:auto;overscroll-behavior:contain}
.learning-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px 16px;border-bottom:1px solid var(--line)}
.learning-dialog h2{margin:3px 0;font-family:var(--heading, "Besley",serif);font-size:1.5rem}
.learning-dialog .iconbtn{color:var(--ink);flex:none}
.learning-dialog>.learning-toolbar{padding:12px 26px;border-bottom:1px solid var(--line);margin:0}
.learning-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0}
.learning-toolbar>a:last-child{margin-left:auto;font:.82rem var(--ui)}
.learning-body{padding:22px 26px 28px;min-height:180px}
.learning-question{font-size:1.2rem;line-height:1.6;margin-bottom:18px;overflow-wrap:anywhere}
.learning-question>:first-child{margin-top:0}
.learning-muted{color:var(--ink-soft);font:400 .83rem/1.55 var(--ui)}
.learning-instruction{font:600 .8rem var(--ui);margin:0 0 12px;color:var(--ink-soft)}
.learning-choices{display:grid;gap:9px;border:0;padding:0;margin:0 0 20px;min-width:0}
.learning-choice{--answer-accent:light-dark(#315D87,#A6C7E7);--answer-tint:light-dark(#EDF4FB,#182F43);display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg);cursor:pointer;font:400 1rem/1.5 var(--ui);overflow-wrap:anywhere}
.learning-choice input{margin-top:5px;flex:none;accent-color:var(--answer-accent)}
.learning-choice:has(input:checked),.learning-result-choice[data-answer-state="missed-correct"]{border-color:var(--answer-accent);box-shadow:inset 3px 0 var(--answer-accent);background:var(--answer-tint)}
.learning-choice:has(input:focus-visible){outline:2px solid var(--answer-accent);outline-offset:2px}
.learning-choice input:focus-visible{outline-color:var(--answer-accent)}
.learning-result-title{font:600 1.05rem var(--ui);margin:0 0 16px}
.learning-result-choice{cursor:default}
.learning-result-choice[data-answer-state="selected-correct"]{--answer-accent:var(--fern);--answer-tint:var(--fern-tint)}
.learning-result-choice[data-answer-state="selected-wrong"]{--answer-accent:var(--madder);--answer-tint:var(--madder-tint)}
.learning-result-choice[data-answer-state="missed-correct"]{--answer-accent:var(--fern);--answer-tint:var(--madder-tint)}
.learning-result-choice input{pointer-events:none}
.learning-answer-content{display:flex;align-items:baseline;gap:.4rem;min-width:0;flex:1}
.learning-answer-text{min-width:0;overflow-wrap:anywhere}
.learning-answer-mark{flex:none;font-size:1rem;line-height:1}
.answer-mark-wrong{color:var(--madder)}
.answer-mark-correct{color:var(--fern)}
.learning-explanation{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);line-height:1.65;overflow-wrap:anywhere}
.learning-status{font:.85rem/1.5 var(--ui);color:var(--ink-soft)}
.learning-status:not(:empty){padding:12px 0}
.learning-dialog>.learning-status:not(:empty){padding:12px 26px 0}
.learning-status.error,.learning-editor-status.error{color:var(--madder-ink)}
.learning-flag{margin-top:24px;font:.8rem/1.5 var(--ui);color:var(--ink-soft)}
.learning-flag summary{cursor:pointer}
.learning-flag textarea{display:block;width:100%;margin:10px 0;min-height:70px}
.learning-feedback-item{border-bottom:1px solid var(--line);padding:16px 0}
.learning-feedback-item:first-child{padding-top:0}
.learning-feedback-item p{margin:6px 0;overflow-wrap:anywhere}
.learning-catalog{padding-top:18px}
.learning-catalog .pagehead{align-items:flex-end;margin-bottom:24px;padding-right:150px}
.learning-catalog h3{font-family:"Besley",serif;font-size:1.12rem;margin:0 0 12px}
.learning-panel{padding:22px 24px;margin:24px 0;background:var(--card);border:1px solid var(--line);border-radius:10px;scroll-margin-top:100px}
.learning-active-list{display:flex;flex-wrap:wrap;gap:10px}
.learning-active-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-left:4px solid var(--learning-color);border-radius:6px;font:.85rem var(--ui)}
.learning-active-item .iconbtn{color:var(--ink);width:30px;height:30px}
.learning-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.learning-category-card{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-top:4px solid var(--learning-color);border-radius:10px;background:var(--card);box-shadow:var(--shadow);min-width:0}
.learning-category-card h3{display:flex;gap:10px;align-items:center;overflow-wrap:anywhere}
.learning-category-card h3 i{color:var(--learning-color)}
.learning-category-card p{line-height:1.5;overflow-wrap:anywhere;margin:0 0 14px}
.learning-category-card .learning-toolbar{margin-top:auto;margin-bottom:0;padding-top:14px}
.learning-category-card .btn{padding:7px 10px;font-size:.78rem}
.learning-category-card.archived{opacity:.8}
.learning-filters input[type="search"]{flex:1;min-width:160px}
.learning-check{display:inline-flex;align-items:center;gap:7px;font:.85rem var(--ui)}
.learning-question-row{padding:15px 0;border-bottom:1px solid var(--line)}
.learning-question-row p{margin:5px 0;overflow-wrap:anywhere;white-space:pre-wrap}
.learning-question-row .learning-toolbar{margin:8px 0 0}
.learning-editor{width:min(760px,calc(100vw - 32px))}
.learning-form{padding:20px 26px 26px}
.learning-form label,.learning-panel form>label{display:block;font:600 .82rem var(--ui);margin:14px 0 7px}
.learning-form input:not([type="checkbox"]):not([type="radio"]),.learning-form textarea,.learning-form select,.learning-panel form>textarea,.learning-panel form>input{width:100%;box-sizing:border-box;min-width:0}
.learning-form textarea,.learning-panel textarea{resize:vertical;line-height:1.5}
.learning-form fieldset{border:1px solid var(--line);padding:14px;margin:18px 0;min-width:0;border-radius:8px}
.learning-form legend{font:600 .82rem var(--ui)}
.learning-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.learning-choice-edit{display:flex;align-items:center;gap:8px;margin:8px 0}
.learning-choice-edit label{margin:0;display:flex;align-items:center;gap:5px;flex:none;font-weight:400}
.learning-choice-edit textarea{flex:1;min-width:0;height:54px}
.learning-choice-edit .iconbtn{width:32px;height:36px;padding:4px}
.learning-editor-status:not(:empty){font:.85rem/1.5 var(--ui);margin:16px 0}
#learningImportText{font: .82rem/1.5 ui-monospace,monospace}
#learningImportForm>.btn{margin-top:14px}
#learningImportPreview{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;overflow-wrap:anywhere}
#learningImportPreview details{margin:8px 0}
#learningImportPreview pre{white-space:pre-wrap;font:.75rem/1.5 ui-monospace,monospace;max-height:260px;overflow:auto;background:var(--inset);padding:12px;border-radius:5px}
#learningQuestionPreview{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.learning-settings-link{font:.85rem/1.6 var(--ui);margin:0 0 20px;color:var(--ink-soft)}
/* Compact B sizing applies to practice and coaching; authoring dialogs keep their room. */
#learningDialog{width:min(480px,calc(100vw - 32px));border-radius:10px}
#learningDialog .learning-dialog-head{padding:14px 18px 12px;gap:12px}
#learningDialog h2{font-size:1.25rem;line-height:1.25}
#learningDialog .learning-dialog-head .iconbtn{width:32px;height:32px}
#learningDialog>.learning-toolbar{padding:8px 18px;gap:7px}
#learningDialog>.learning-toolbar .btn{padding:5px 10px;font-size:.75rem;line-height:1.3;min-height:28px;border-radius:6px}
#learningDialog>.learning-toolbar>a{font-size:.75rem}
#learningDialog .learning-body{padding:16px 18px 18px;min-height:0}
#learningDialog .learning-body>.eyebrow{margin-bottom:10px}
#learningDialog .learning-question{font-size:1.0625rem;line-height:1.5;margin-bottom:12px}
#learningDialog .learning-instruction{font-size:.75rem;line-height:1.4;margin-bottom:8px}
#learningDialog .learning-choices,#learningQuestionPreview .learning-choices{gap:7px;margin-bottom:0}
#learningDialog .learning-choice,#learningQuestionPreview .learning-choice{display:flex;margin:0;padding:8px 11px;gap:10px;font:400 .875rem/1.5 var(--ui);border-radius:7px}
#learningDialog .learning-choice input,#learningQuestionPreview .learning-choice input{margin-top:4px}
#learningQuestionPreview>.btn{margin-top:15px}
#learningDialog .learning-body .learning-toolbar{margin:15px 0 0;gap:8px}
#learningDialog .learning-body .btn{font-size:.8125rem;line-height:1.35;padding:8px 12px;border-radius:7px}
#learningDialog .learning-flag{margin-top:16px;font-size:.75rem}
#learningDialog .learning-explanation{margin-top:15px;padding-top:12px;font-size:.875rem;line-height:1.6}
#learningDialog .learning-result-title{font-size:1rem;margin-bottom:10px}
#learningDialog .learning-feedback-item{padding:12px 0;font-size:.875rem}
#learningDialog>.learning-status:not(:empty){padding:10px 18px 0}
@media(max-width:1000px){.learning-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.learning-category-grid{grid-template-columns:1fr}.learning-catalog .pagehead{padding-right:0;padding-top:12px;display:block}.learning-catalog .stamp{display:block;margin-top:8px}.learning-panel{padding:18px}.learning-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:10px}.learning-dialog-head,.learning-body,.learning-form{padding:18px}.learning-dialog>.learning-toolbar{padding:12px 18px}.learning-form-grid{grid-template-columns:1fr;gap:0}.learning-choice-edit{flex-wrap:wrap}.learning-choice-edit textarea{flex-basis:65%}.learning-toolbar>.btn{min-height:42px}.learning-filters label:first-child{width:100%}.learning-dialog .learning-toolbar>a:last-child{margin-left:0}#learningDialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}#learningDialog .btn,#learningDialog .iconbtn,#learningDialog>.learning-toolbar .btn{min-height:44px;min-width:44px}#learningDialog .learning-choice{min-height:44px}}
@media(pointer:coarse){#learningDialog .btn,#learningDialog .iconbtn,#learningDialog>.learning-toolbar .btn{min-height:44px;min-width:44px}#learningDialog .learning-choice{min-height:44px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .ribbon-swatch,html:not([data-motion="full"]) .learning-dot{transition:none}}
[data-motion="reduce"] .ribbon-swatch,[data-motion="reduce"] .learning-dot{transition:none}
[data-contrast="on"] .learning-choice,[data-contrast="on"] .learning-category-card,[data-contrast="on"] .learning-panel{border-width:2px}
[data-contrast="on"] .learning-category-card{border-top-width:5px}
@media print{.learning-ribbons,.learning-dialog{display:none!important}}
