/* Online Seder highlight customization — loaded after the mature workspace. */

.learn-selection-toolbar {
  flex-wrap: wrap;
  justify-content: center;
}

.learn-tanakh-color-bubble {
  gap: 10px !important;
  padding: 11px !important;
}

body.generic-corpus-learn-active .learn-tanakh-color-bubble > button {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  flex-basis: 58px !important;
  border: 2px solid rgba(255, 255, 255, .82) !important;
  box-shadow: 0 5px 14px rgba(24, 50, 46, .23) !important;
}

body.generic-corpus-learn-active .learn-tanakh-color-bubble > button:hover,
body.generic-corpus-learn-active .learn-tanakh-color-bubble > button:focus-visible {
  outline: 3px solid rgba(23, 77, 71, .28);
  outline-offset: 3px;
  transform: translateY(-2px) scale(1.04);
}

body.generic-corpus-learn-active .learn-tanakh-color-bubble > button > i:empty {
  width: 36px !important;
  height: 36px !important;
  border-color: rgba(255, 255, 255, .56) !important;
  background: var(--tool-color) !important;
}

body.generic-corpus-learn-active .learn-tanakh-color-bubble > .learn-generic-color-add {
  --tool-color: #174d47 !important;
  color: #fffdf8 !important;
  border: 2px dashed rgba(255, 255, 255, .78) !important;
  background: #174d47 !important;
}

body.generic-corpus-learn-active .learn-tanakh-color-bubble > .learn-generic-color-add i {
  display: grid !important;
  width: auto !important;
  height: auto !important;
  place-items: center;
  border: 0 !important;
  background: transparent !important;
  font-size: 29px;
  line-height: 1;
}

.generic-color-dots {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  align-items: center;
}

.generic-color-dots > [data-generic-color-slot] {
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(24, 47, 43, .14);
  border-radius: 50%;
  background: var(--learn-color-fill);
  box-shadow: 0 3px 9px rgba(24, 47, 43, .13);
}

.generic-color-dots > [data-generic-color-slot].hidden {
  display: none !important;
}

.generic-color-add {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  color: #fffdf8;
  border: 2px dashed rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: #174d47;
  box-shadow: 0 4px 12px rgba(23, 77, 71, .18);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.generic-color-add:hover,
.generic-color-add:focus-visible {
  outline: 3px solid rgba(23, 77, 71, .22);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.learn-scheme-dialog {
  width: min(1040px, calc(100vw - 24px)) !important;
  max-width: min(1040px, calc(100vw - 24px)) !important;
}

.learn-scheme-card > h2 {
  max-width: 19ch !important;
}

.learn-scheme-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.learn-scheme-row {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(160px, 1fr) 54px minmax(145px, .8fr) minmax(82px, .45fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dcd4c5;
  border-radius: 16px;
  background: #fff;
}

.learn-scheme-preview {
  display: flex;
  min-width: 0;
  gap: 9px;
  align-items: center;
}

.learn-scheme-preview i {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--scheme-preview, #6c7f7a);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

i.learn-drawn-icon {
  font-size: 0 !important;
}

i.learn-drawn-icon::before {
  content: "";
  display: block;
  width: 62%;
  height: 62%;
  background: currentColor;
  -webkit-mask: var(--learn-drawn-icon) center / contain no-repeat;
  mask: var(--learn-drawn-icon) center / contain no-repeat;
}

.learn-scheme-preview b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-scheme-row input[type="text"],
.learn-scheme-row select {
  width: 100%;
  min-height: 46px;
  min-width: 0;
  padding: 9px 11px;
  color: #17332f;
  border: 1px solid #c8d3cf;
  border-radius: 11px;
  background: #fff;
  font: inherit;
}

.learn-scheme-row input[type="color"] {
  width: 54px;
  height: 46px;
  padding: 3px;
  border: 1px solid #c8d3cf;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

.learn-scheme-remove,
.learn-generic-color-row button {
  min-height: 42px;
  padding: 7px 12px;
  color: #8c3532;
  border: 1px solid rgba(140, 53, 50, .3);
  border-radius: 999px;
  background: #fff7f5;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.learn-scheme-remove:hover,
.learn-scheme-remove:focus-visible,
.learn-generic-color-row button:hover,
.learn-generic-color-row button:focus-visible {
  color: #fff;
  background: #8c3532;
}

.learn-scheme-drawing {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 112px minmax(170px, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  min-width: 0;
  margin: 2px 0 0;
  padding: 12px;
  border: 1px solid #c8d3cf;
  border-radius: 14px;
  background: #f7fbfa;
}

.learn-scheme-drawing legend {
  padding: 0 6px;
  font-weight: 900;
}

.learn-scheme-drawing canvas {
  grid-row: 1 / span 3;
  width: 96px;
  height: 96px;
  border: 2px solid #174d47;
  border-radius: 13px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #edf3f1 25%, transparent 25%),
    linear-gradient(-45deg, #edf3f1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #edf3f1 75%),
    linear-gradient(-45deg, transparent 75%, #edf3f1 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  cursor: crosshair;
  touch-action: none;
}

.learn-scheme-drawing canvas:focus-visible {
  outline: 4px solid rgba(213, 161, 47, .55);
  outline-offset: 3px;
}

.learn-scheme-drawing-help,
.learn-scheme-drawing-status {
  margin: 0;
  color: #526965;
  font-size: 13px;
  line-height: 1.35;
}

.learn-scheme-drawing-status {
  color: #174d47;
  font-weight: 800;
}

.learn-scheme-drawing-actions {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 3;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.learn-scheme-drawing-actions button {
  min-height: 40px;
  padding: 7px 11px;
  color: #174d47;
  border: 1px solid #aebfba;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.learn-scheme-drawing-actions .learn-scheme-use-drawing {
  color: #fff;
  border-color: #174d47;
  background: #174d47;
}

.learn-generic-color-dialog {
  width: min(620px, calc(100vw - 24px)) !important;
  max-width: min(620px, calc(100vw - 24px)) !important;
}

.learn-generic-color-choice {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 14px 18px;
  border: 1px solid #dcd4c5;
  border-radius: 16px;
  background: #fff;
  font-weight: 850;
}

.learn-generic-color-choice input[type="color"] {
  width: 86px;
  height: 52px;
  padding: 3px;
  border: 1px solid #c8d3cf;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.learn-generic-color-list {
  display: grid;
  gap: 8px;
}

.learn-generic-color-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid #ded6ca;
  border-radius: 14px;
  background: #fff;
}

.learn-generic-color-row > span {
  display: block;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(24, 47, 43, .14);
  border-radius: 50%;
  background: var(--generic-color);
}

.learn-generic-color-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="dark"] .learn-scheme-dialog,
[data-theme="dark"] .learn-scheme-dialog {
  color: #17332f;
  background: #f8f0db;
}

body[data-theme="dark"] .learn-scheme-row,
body[data-theme="dark"] .learn-generic-color-choice,
body[data-theme="dark"] .learn-generic-color-row,
[data-theme="dark"] .learn-scheme-row,
[data-theme="dark"] .learn-generic-color-choice,
[data-theme="dark"] .learn-generic-color-row {
  background: #fffaf0;
}

@media (max-width: 900px) {
  .learn-scheme-row {
    grid-template-columns: minmax(140px, .8fr) minmax(160px, 1fr) 54px;
  }

  .learn-scheme-row select,
  .learn-scheme-row .learn-scheme-custom-icon,
  .learn-scheme-row .learn-scheme-remove {
    grid-row: 2;
  }

  .learn-scheme-drawing {
    grid-row: auto;
  }
}

@media (max-width: 620px) {
  .learn-selection-toolbar {
    width: calc(100vw - 20px);
    border-radius: 24px;
  }

  body.generic-corpus-learn-active .learn-tanakh-color-bubble > button {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
  }

  .learn-tanakh-color-bubble {
    max-width: calc(100vw - 20px);
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 24px !important;
  }

  .learn-scheme-row {
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  .learn-scheme-preview,
  .learn-scheme-row input[type="text"],
  .learn-scheme-row select,
  .learn-scheme-row .learn-scheme-custom-icon,
  .learn-scheme-row .learn-scheme-remove {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .learn-scheme-row input[type="color"] {
    grid-column: 2;
    grid-row: 1;
  }

  .learn-scheme-drawing {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .learn-scheme-drawing canvas {
    grid-row: 1 / span 2;
  }

  .learn-scheme-drawing-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-tanakh-color-bubble > button,
  .generic-color-add {
    transition: none !important;
  }
}