/* Meaningful groups differ in lightness and shape, as well as colour. */
:root {--ink:#17324d;--muted:#3d5268;--blue:#164f9d;--line:#7c8fa2;--sky:#fff;--strategy-dark:#17324d;--strategy-light:#ffcf40;}
body {background:#fff;}
:is(.visual-card,.sharing-card,.tips-library,.daily-card,.trainer-start-card,.trainer-progress-card) {border-color:#7c8fa2;}
:is(.operation-switch,.child-tabs,.daily-card,#learn,#train,#test,.quiz,.trainer,dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select) {border-color:#506780;}
:is(.secondary,.rows button,.number-pad button,.trainer-keypad button,.dojo-keypad button) {border-color:#506780;}
.quiz .answer-entry[data-result="correct"] input#answer {border-color:#146b37;}
.quiz .answer-entry[data-result="incorrect"] input#answer {border-color:#912323;}
.operation-switch {border-color:#506780;}
.operation-switch button.active {background:#fff3bd;color:#17324d;box-shadow:inset 0 0 0 2px #17324d;}
.operation-switch button.active .operation-symbol {color:#17324d;border-color:#17324d;}
.child-tabs button {border-color:#7c8fa2;color:#17324d;}
.child-tabs button.active {border-color:#17324d;color:#17324d;background:#fff3bd;box-shadow:inset 0 -3px 0 #17324d;}
:is(button,a,input,select,summary):focus-visible {outline:3px solid #17324d;outline-offset:4px;}
#factor::-webkit-slider-runnable-track {background:#506780;}
#factor::-moz-range-track {background:#506780;}
.point-array .row-brace,.point-array .group-brace,.point-row-label {color:#17324d;}
#dots .dot,#dots .dot:nth-child(2n) {background:#17324d;}
.point-array {--point-top-space:.75rem;}
#dots.swap-points {--point-row-step:max(23px,1.5rem);height:calc(2*var(--point-top-space) + (var(--point-rows) - 1)*var(--point-row-step) + var(--point-size));}
#dots.swap-points .swap-point {top:calc(var(--point-top-space) + var(--point-row)*var(--point-row-step));}
#dots.swap-points .point-row-label {top:calc(var(--point-top-space) + var(--point-row)*var(--point-row-step) + var(--point-size)/2);}
.sharing-coin {background:#ffcf40;color:#17324d;border-color:#17324d;box-shadow:none;}
.sharing-plate {border-color:#506780;}
.trainer-hint-dot {background:#17324d;}
.trainer-hint-group {background:#fff;border:2px solid #506780;}

/* Solid circles, light squares and crossed-out outlines stay distinct in grey. */
#tips-collection .row-dot-first {fill:#17324d;}
#tips-collection .row-dot-second {fill:#ffcf40;stroke:#17324d;stroke-width:1.6;}
#tips-collection .row-dot-away {fill:#fff;stroke:#17324d;stroke-width:1.4;stroke-dasharray:2 1.5;}
#tips-collection .row-dot-cross {stroke:#17324d;stroke-width:1.8;}
#tips-collection .row-trick-key i {width:14px;height:14px;}
#tips-collection .row-key-first {background:#17324d;border:1px solid #17324d;border-radius:50%;}
#tips-collection .row-key-second {background:#ffcf40;border:2px solid #17324d;border-radius:2px;}
#tips-collection .row-trick-key .row-key-second {border-radius:2px;}
#tips-collection .row-key-away {position:relative;background:#fff;border:1.5px dashed #17324d;border-radius:50%;}
#tips-collection .row-key-away::before,#tips-collection .row-key-away::after {content:"";position:absolute;left:1px;top:5px;width:9px;height:1.5px;background:#17324d;transform:rotate(45deg);}
#tips-collection .row-key-away::after {transform:rotate(-45deg);}
#tips-collection :is(.row-trick,.tips-category) {border-color:#7c8fa2;}
#tips-collection .row-trick[open] {border-color:#17324d;}
#tips-collection .row-trick-picture {border:2px solid #506780;}
#tips-collection .row-trick-answer {background:#fff3bd;color:#17324d;border:2px solid #506780;}
#tips-collection .strategy-shape-key {margin:0 16px 16px;font-size:16px;line-height:1.6;color:#17324d;}

/* The live decomposition and turning pictures use the same two shapes. */
:is(#visual-aids,.visual-aids) {--va-first:#17324d;--va-second:#17324d;}
:is(#visual-aids,.visual-aids) .va-part {border:2px solid #17324d;border-left-width:5px;border-radius:10px;background:#fff;color:#17324d;}
:is(#visual-aids,.visual-aids) .va-part.va-color-1 {border-style:dashed;background:#fff8df;color:#17324d;}
:is(#visual-aids,.visual-aids) .va-decomposition-dot,:is(#visual-aids,.visual-aids) .va-swap-dot {background:#17324d;}
:is(#visual-aids,.visual-aids) .va-color-1 .va-decomposition-dot,:is(#visual-aids,.visual-aids) .va-swap-dot.va-color-1 {background:#ffcf40;border:2px solid #17324d;border-radius:1px;}
:is(#visual-aids,.visual-aids) .va-part-label::before {content:"";display:inline-block;width:12px;height:12px;margin-right:7px;background:#17324d;border-radius:50%;vertical-align:-1px;}
:is(#visual-aids,.visual-aids) .va-color-1 .va-part-label::before {background:#ffcf40;border:2px solid #17324d;border-radius:1px;}
:is(#visual-aids,.visual-aids) .va-color-0 .va-number-group {background:#17324d;color:#fff;border:2px solid #17324d;}
:is(#visual-aids,.visual-aids) .va-color-1 .va-number-group {background:#ffcf40;color:#17324d;border:2px dashed #17324d;}
:is(#visual-aids,.visual-aids) .va-term.va-color-0 {padding:1px 5px;border-radius:12px;background:#17324d;color:#fff;}
:is(#visual-aids,.visual-aids) .va-term.va-color-1 {padding:0 4px;border:2px solid #17324d;border-radius:1px;background:#ffcf40;color:#17324d;}
:is(#visual-aids,.visual-aids) .va-note {color:#3d5268;}
:is(#visual-aids,.visual-aids) :is(.va-axis,.va-axis-arrow,.va-tick,.va-jump,.va-jump-arrow) {stroke:#17324d;stroke-width:2;}
:is(#visual-aids,.visual-aids) :is(.va-tick-label,.va-jump-label) {fill:#17324d;}

/* Place value can be read from Z/E and solid/outlined boxes without colour. */
#tips-collection .tips-nine-key span {display:inline-flex;align-items:center;gap:7px;color:#17324d;}
#tips-collection .tips-nine-key span::before {display:inline-grid;place-items:center;width:1.5em;height:1.5em;font-size:14px;font-weight:700;line-height:1;border:2px solid #17324d;}
#tips-collection .tips-nine-key span:first-child::before {content:"Z";background:#17324d;color:#fff;border-radius:4px;}
#tips-collection .tips-nine-key span:last-child::before {content:"E";background:#ffcf40;color:#17324d;border-radius:0;}
#tips-collection .tips-nine-pattern li {border-color:#506780;letter-spacing:0;}
#tips-collection .tips-tens,#tips-collection .tips-ones {display:inline-flex;flex-direction:column;align-items:center;min-width:1em;margin:0 1px;padding:2px;border:2px solid #17324d;line-height:1.2;}
#tips-collection .tips-tens {background:#17324d;color:#fff;border-radius:4px;}
#tips-collection .tips-ones {background:#ffcf40;color:#17324d;border-radius:0;}
#tips-collection .tips-tens::before,#tips-collection .tips-ones::before {display:block;font-size:12px;font-weight:700;line-height:1.2;margin-bottom:2px;}
#tips-collection .tips-tens::before {content:"Z";}
#tips-collection .tips-ones::before {content:"E";}

@media(forced-colors:active) {
  #tips-collection .row-dot-first {fill:CanvasText;}
  #tips-collection :is(.row-dot-second,.row-dot-away) {fill:Canvas;stroke:CanvasText;}
  #tips-collection .row-dot-cross {stroke:CanvasText;}
  #dots .dot,.trainer-hint-dot,:is(#visual-aids,.visual-aids) :is(.va-decomposition-dot,.va-swap-dot),:is(#visual-aids,.visual-aids) .va-part-label::before {forced-color-adjust:none;background:CanvasText;}
  :is(#visual-aids,.visual-aids) .va-color-1 .va-decomposition-dot,:is(#visual-aids,.visual-aids) .va-swap-dot.va-color-1,:is(#visual-aids,.visual-aids) .va-color-1 .va-part-label::before {background:Canvas;border-color:CanvasText;}
  #tips-collection :is(.row-key-first,.row-key-second,.row-key-away) {forced-color-adjust:none;background:Canvas;border-color:CanvasText;}
  #tips-collection .row-key-first {background:CanvasText;}
  #tips-collection .row-key-away::before,#tips-collection .row-key-away::after {background:CanvasText;}
}