/* A colourful but calm home for the learning tools. Text and selected states
   keep a strong dark outline, so colour is never the only cue. */
body:not(.worksheets-page) {
  background: #fdfaf4;
  color: #17324d;
}
body:not(.worksheets-page) > header {
  border-bottom-color: #d8e1e7;
}
body:not(.worksheets-page) .brand-icon {
  background: #19519a;
  box-shadow: 3px 3px 0 #f5d96d;
}
body:not(.worksheets-page) .worksheet-entry a {
  border-color: #9cb8d6;
  color: #164f9d;
  background: #fff;
}
body:not(.worksheets-page) .worksheet-entry a:last-child {
  background: #fff3cb;
  border-color: #ddbd64;
}
body:not(.worksheets-page) .choice-prompt {
  color: #17324d;
  letter-spacing: -.01em;
}
body:not(.worksheets-page) .operation-switch {
  gap: 7px;
  padding: 6px;
  background: #f3eee5;
  border: 1px solid #c5d3da;
  border-radius: 18px;
}
body:not(.worksheets-page) .operation-switch button {
  border: 2px solid transparent;
  color: #17324d;
  background: #fff;
  border-radius: 13px;
}
body:not(.worksheets-page) .operation-switch button[data-operation="multiplication"] .operation-symbol {
  background: #e6f3ec;
  color: #246e55;
  border-color: #6b9f87;
}
body:not(.worksheets-page) .operation-switch button[data-operation="division"] .operation-symbol {
  background: #eee9fb;
  color: #5c4690;
  border-color: #9988bf;
}
body:not(.worksheets-page) .operation-switch button[data-operation="mixed"] .operation-symbol {
  background: #fff1cd;
  color: #8d5812;
  border-color: #c7a45c;
}
body:not(.worksheets-page) .operation-switch button.active {
  background: #fff3cb;
  border-color: #19519a;
  box-shadow: inset 0 -3px 0 #19519a;
  color: #17324d;
}
body:not(.worksheets-page) .range-choice button.active {
  background: #e4f4eb;
  border-color: #19519a;
}
body:not(.worksheets-page) .daily-card {
  background: #fff2cc;
  border: 1px solid #d5b968;
  box-shadow: 0 4px 0 #eedca7;
}
body:not(.worksheets-page) .daily-symbol {
  background: #f6d872;
  color: #65430b;
}
body:not(.worksheets-page) .daily-card .daily-eyebrow {
  color: #604912;
  font-weight: 700;
}
body:not(.worksheets-page) .intro h1 {
  color: #17324d;
}
body:not(.worksheets-page) .child-tabs button {
  border-color: #9fb2c0;
  color: #17324d;
}
body:not(.worksheets-page) .child-tabs [data-tab="learn"] { background: #e8f5ed; }
body:not(.worksheets-page) .child-tabs [data-tab="train"] { background: #e9f2ff; }
body:not(.worksheets-page) .child-tabs [data-tab="test"] { background: #f3edfb; }
body:not(.worksheets-page) .child-tabs [data-tab="trainer"] { background: #fff1d6; }
body:not(.worksheets-page) .child-tabs button.active {
  border-color: #19519a;
  color: #17324d;
  box-shadow: inset 0 -4px 0 #19519a;
}
body:not(.worksheets-page) .child-tabs button > small { color: #334e66; }
body:not(.worksheets-page) .learn-prompt {
  background: #e5f4eb;
  color: #20523d;
  border: 1px solid #b7d7c4;
}
body:not(.worksheets-page) :is(.visual-card,.sharing-card,.quiz,.trainer-progress-card) {
  background: #fff;
  border-color: #a9bcc8;
  box-shadow: 0 4px 0 rgba(38,80,112,.07);
}
body:not(.worksheets-page) :is(.settings,.trainer-start-card,#trainer-play) {
  background: #eef4ff;
  border-color: #b3c9df;
}
body:not(.worksheets-page) :is(.squares-card,.tips-library,.sequence-card) {
  border-color: #b6c9d4;
}
body:not(.worksheets-page) :is(button,a,input,select,summary):focus-visible {
  outline: 3px solid #17324d;
  outline-offset: 3px;
}
@media (hover:hover) and (pointer:fine) {
  body:not(.worksheets-page) .operation-switch button:hover,
  body:not(.worksheets-page) .child-tabs button:hover {
    border-color: #19519a;
  }
}
@media (max-width: 400px) {
  body:not(.worksheets-page) .operation-switch { gap: 3px; padding: 4px; }
  body:not(.worksheets-page) .operation-switch button { padding: 8px 4px; }
  body:not(.worksheets-page) .daily-card { display:block; position:relative; }
  body:not(.worksheets-page) .daily-symbol { position:absolute; left:16px; top:17px; width:40px; height:40px; }
  body:not(.worksheets-page) .daily-symbol svg { width:24px; height:24px; }
  body:not(.worksheets-page) .daily-card .daily-eyebrow,
  body:not(.worksheets-page) .daily-card h2 { padding-left:50px; }
  body:not(.worksheets-page) .daily-actions { margin-top:15px; }
}