/* Coloring shares the worksheet sidebar, with its own palette and no grading. */
.coloring-page .color-choice[data-color='#ed8220'] span{background:#ed8220}
.coloring-page .color-choice[data-color='#ffd43b'] span{background:#ffd43b}
.coloring-page .color-choice[data-color='#28a4b8'] span{background:#28a4b8}
.coloring-page .color-choice[data-color='#f074ac'] span{background:#f074ac}
.coloring-page .color-choice[data-color='#955e32'] span{background:#955e32}
.coloring-page .color-choice[data-color='#ffffff'] span{background:#fff}
.tablet-page.coloring-page .tool-group[aria-label='Choose a paint color']{grid-template-columns:repeat(3,44px);justify-content:space-between;gap:6px}
.tablet-page.coloring-page .tablet-heading>.coloring-pickers{position:static;display:grid;grid-template-columns:1fr;gap:8px;width:auto;height:auto;min-width:0;overflow:visible;clip-path:none}
.coloring-page .coloring-pickers .sheet-picker{min-width:0}
.coloring-page #drawing[data-tool=fill]{cursor:crosshair}
.coloring-page #page-context{font-weight:700}
.coloring-page .tablet-paper{touch-action:none}
.tablet-page.coloring-page #save-copy{width:100%;font-size:14px}
.tablet-page.coloring-page #show-tools{min-height:44px;border:2px solid #000!important;background:#b28aff!important;color:#000!important;--brand-ink:#000!important}
@media(max-width:700px){.tablet-page.coloring-page .tablet-sidebar{bottom:0}}

/* --- Phones: one compact dock plus a bottom sheet; never a side overlay. --- */
.tablet-page.coloring-page #focus-quick{display:none}
.coloring-dock{display:none}
.coloring-sheet-backdrop{display:none}
.sheet-head{display:none}
.coloring-warning{margin:0;padding:6px 8px;border:2px solid #174A7E;border-radius:10px;background:#fff;color:#174A7E;font-size:12px;font-weight:700}
@media(max-width:700px){
 .tablet-page.coloring-page #tools-toggle{display:none}
 .tablet-page.coloring-page .tablet-top{gap:8px;padding:4px 10px}
 .tablet-page.coloring-page .tablet-top .portal-logo{order:2;margin:0 auto;font-size:16px;gap:4px}
 .tablet-page.coloring-page .tablet-top .portal-rune{width:18px;height:18px}
 .tablet-page.coloring-page .tablet-top #back-to-set{order:1;margin-left:0;max-width:none;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tablet-page.coloring-page .tablet-top #focus-quick{order:3;display:inline-flex;min-width:44px;min-height:44px;padding:6px;border:1px solid #174A7E;border-radius:10px;background:#fff;color:#174A7E}
 .tablet-page.coloring-page #focus-quick svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .tablet-page.coloring-page #focus-quick[aria-pressed=true]{background:#174A7E!important;color:#fff!important;border-color:#174A7E!important}

 .tablet-page.coloring-page .coloring-dock{display:grid;grid-column:1;grid-row:2;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-sizing:border-box;background:#D2F9F6;border-top:2px solid #174A7E;z-index:14}
 .tablet-page.coloring-page.tablet-focus .coloring-dock{display:none}
 .tablet-page.coloring-page .dock-colors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(44px,auto);gap:4px;align-items:center}
 .tablet-page.coloring-page .dock-color{min-width:0;width:100%;height:46px;min-height:46px;padding:0;background:transparent!important;border:2px solid transparent;border-radius:12px}
 .tablet-page.coloring-page .dock-color span{width:30px;height:30px;margin:auto}
 .tablet-page.coloring-page .coloring-dock .dock-color[aria-pressed=true]{border-color:#174A7E!important;background:#fff!important;box-shadow:none;text-decoration:none}
 .tablet-page.coloring-page .dock-more-colors{display:grid;grid-template-rows:auto auto;place-items:center;gap:1px;min-width:44px;min-height:46px;padding:2px 4px;font-size:11px;font-weight:700;line-height:1;color:#174A7E;background:#fff;border:1px solid #174A7E;border-radius:12px}
 .tablet-page.coloring-page .dock-plus{font-size:16px;line-height:1;color:#174A7E}
 .tablet-page.coloring-page .dock-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .tablet-page.coloring-page .dock-tool{flex-direction:column;gap:2px;min-width:0;min-height:56px;padding:4px 2px;font-size:12px;line-height:1.1;text-decoration:none;color:#174A7E;background:#fff;border:1px solid #174A7E;border-radius:12px}
 .tablet-page.coloring-page .dock-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .tablet-page.coloring-page .coloring-dock .dock-tool[aria-pressed=true]{background:#174A7E!important;color:#fff!important;border-color:#174A7E!important;box-shadow:none;text-decoration:none}
 /* Portal theme colours descendants from --brand-ink; the chosen tool stays white throughout. */
 .tablet-page.coloring-page .coloring-dock .dock-tool[aria-pressed=true] :is(span,svg){color:#fff!important;stroke:#fff!important;fill:none!important}
 .tablet-page.coloring-page .dock-glyph{font-size:20px;line-height:1}
 .tablet-page.coloring-page .dock-more-dot{display:block;width:20px;height:20px;border-radius:50%;background:#28a4b8;box-shadow:inset 0 0 0 1px #0003}

 .coloring-sheet-backdrop{display:none;position:fixed;inset:0;border:0;background:#174A7E59;z-index:26}
 .tablet-page.coloring-page.tablet-tools-open .coloring-sheet-backdrop{display:block}
 .tablet-page.coloring-page .tablet-sidebar{display:none;position:fixed;inset:auto 0 0 0;width:auto;max-height:min(55dvh,calc(100dvh - 96px));overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:10px 12px calc(14px + env(safe-area-inset-bottom));background:#fff;color:#174A7E;border:0;border-top:2px solid #174A7E;border-radius:18px 18px 0 0;box-shadow:0 -10px 28px #174A7E2e;z-index:30}
 .tablet-page.coloring-page.tablet-tools-open .tablet-sidebar{display:block}
 .tablet-page.coloring-page.tablet-focus .tablet-sidebar{display:none}
 .tablet-page.coloring-page .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-10px;z-index:2;margin:0 0 8px;padding:4px 0;background:#fff}
 .tablet-page.coloring-page .sheet-head h2{margin:0;font-size:20px;color:#174A7E}
 /* The header already carries Full screen on a phone; the sheet keeps only real tools. */
 .tablet-page.coloring-page .tablet-sidebar #focus-view,.tablet-page.coloring-page .tablet-sidebar #focus-help{display:none}
 .tablet-page.coloring-page .tablet-sidebar .tool-group[aria-label='Choose a tool']{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .tablet-page.coloring-page .tablet-sidebar .tool-group[aria-label='Choose a tool'] button{min-height:60px;padding:4px 2px;font-size:12px;line-height:1.1}
 .tablet-page.coloring-page .tablet-sidebar :is(button,select,.tool-link):not(.color-choice){border-color:#174A7E;color:#174A7E}
 .tablet-page.coloring-page .tablet-sidebar .tool-group button[aria-pressed=true]:not(.color-choice){background:#174A7E!important;color:#fff!important;border-color:#174A7E!important;box-shadow:none;text-decoration:none}
 .tablet-page.coloring-page .tablet-sidebar #save-copy{background:#174A7E!important;color:#fff!important;border:2px solid #174A7E!important}
 .tablet-page.coloring-page .tablet-sidebar #sheet-close{min-width:44px;min-height:44px;padding:6px 12px;border:2px solid #174A7E;border-radius:12px}
 .tablet-page.coloring-page .tablet-sidebar #pen-size:disabled{opacity:.5}
 .tablet-page.coloring-page .tablet-sidebar .tool-group[aria-label='Choose a paint color']{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));justify-content:initial;gap:6px}
 .tablet-page.coloring-page .tablet-sidebar .color-choice{justify-self:center}
}