/**
 * Handwritten CSS
 *
 * Styles here should be minimal; most of the stuff should go into
 * `build-tools/heroku/tailwind/styles.css` (and then run `build-tools/heroku/tailwind/generate-development-css` to regenerate
 * the generated css file).
 */

#output {
  white-space: pre-wrap;
}

.code-teacher {
  background-color: #dddddd;
  color: #000000;
  padding: 0.25rem;
  font-family: monospace;
  border-radius: 0.25rem;
}

.command-highlighted {
  background-color: #272822;
  color: #ff6188;
  padding: 0.25rem;
  font-family: monospace;
  border-radius: 0.25rem;
}

/* #868 hide ace's default mobile context menu until there is configuration to remove it */
.ace_mobile-menu {
  display: none;
}

input:checked ~ .dot {
  transform: translateX(100%);
  background-color: #48bb78;
}

#confetti{
  width: 100%;
  position: absolute;
  height: auto;
  top: 20%;
  left: 30%;
}

#repair_button:hover{
  content: url('../images/Hedylightbulb_2.svg');
}

/*Media Queries*/
@media only screen and (max-width: 1280px) {
  #repair_button{
    margin-left: 12rem !important;
  }
}

/*
https://github.com/ajaxorg/ace/issues/1104
Force the gutter to be smaller, looks better from 1-999 lines (probably all of our programs)
*/
#editor .ace_gutter {
    width: 32px !important;
}

body[dir='ltr'] #editor .ace_gutter {
    margin-right: auto;
    left: 0;
}

body[dir='rtl'] #editor .ace_gutter {
    margin-left: auto;
    right: 0;
}

body[dir='ltr'] #editor .ace_scroller {
    left: 32px !important;
    right: 0px !important;
}

body[dir='rtl'] #editor .ace_scroller {
    left: 0px !important;
    right: 32px !important;
}

/**
 * This solves the Ace editor's background initially being white on Safari (until you click it)
 *
 * Not quite sure why, but it seems to help.
 */
.ace_scroller {
    background-color: transparent !important;
}

#editor .ace_layer .ace_gutter-layer {
    width: 32px !important;
}

body[dir='ltr'] #editor .ace_gutter-layer > * {
    margin-left: 2px;
    margin-right: 0px;
    padding-left: 2px;
    padding-right: 0px;
    text-align: left;
}

body[dir='rtl'] #editor .ace_gutter-layer > * {
    margin-left: 0px;
    margin-right: 2px;
    padding-left: 0px;
    padding-right: 2px;
    text-align: right;
}

.ace_gutter-cell.ace_breakpoint {
    visibility: hidden;
}

.ace_gutter-cell.ace_breakpoint::after {
    visibility: visible;
    border-radius: 14px 14px 14px 14px;
    width: 21px;
    content: "😴";
    z-index: 3;
    position: absolute;
    left: 0;
}

.ace_layer.ace_gutter-layer.ace_folding-enabled {
    width: 36px !important;
}

.ace-disabled {
    text-decoration: line-through;
}

.debugLine {
    position: absolute;
    background: #2D6099;
    z-index: 20
}

/* #grid-table td,
#grid-table th {
  width: 100px;
} */

/* Set the height of each row */
/* #grid-table tr {
  height: 50px;
} */

/* Remove any default padding and margin from the table */
/* #grid-table,
#grid-table td,
#grid-table th {
  padding: 0;
  margin: 0;
  border-collapse: collapse;
} */

/* Add some padding and a border to the table cells */
/* #grid-table td,
#grid-table th {
  padding: 8px;
  border: 1px solid #ddd;
} */

/* Add some background color to the header row */
/* #grid-table {
  width: 100%;
} */

.student_adventure_checkbox::before  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.checkbox-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-wrapper {
  position: absolute;
  bottom: 1px;
  right: 3px;
}

div[data-te-input-notch-ref] {
  border-radius: 0.25rem;
  border: 1px rgb(104 211 145 / var(--tw-border-opacity))  solid;
}

.group[data-te-input-focused] {
  box-sizing: content-box;
  border-radius: 0.25rem;
  border: 2px black solid;
}

.group[data-te-input-focused] > * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 400px));
  grid-gap: 1.5rem;
  justify-content: center;
}

.current {
  font-weight: bold;
  background-color: #edf2f7;
}

.option {
  padding: 8px;
  cursor: pointer;
  
  &.selected {
    background-color: rgb(0 0 0 / 0.05);
  }

  &:not(.default).selected::after {
    content: "✓";
    margin: 1em;
  }

  &:hover {
    background-color: rgb(0 0 0 / 0.05);
  }
  
}

.ck-balloon-panel {
  display: none !important;
}


.ck-editor, .ck-editor__editable {
    min-height: 24rem;
    width: 100% !important;
}
.ck-toolbar__items, .ck-editor__editable {
    background-color: var(--tw-bg-gray-200) !important;
}

.ck-editor pre code {
  background-color: unset !important;
  color: var(--tw-bg-gray-300);
}

.ck-editor[dir=rtl] pre code {
  text-align: right;
}

.ck-editor[dir=rtl] pre[data-language]:after {
  left: 10px;
  right: unset !important;
}

.ck-editor {
  & ol, ul {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

kbd {
    display: inline-block;
    background: #f5f5f5;
    border: solid 1px #b5c6d2;
    border-bottom-color: #97afbf;
    box-shadow: inset 0 -1px 0 #97afbf;
    font-size: .8em;
    padding: 0.25em 0.5em;
    line-height: 1em;
    vertical-align: middle;
    border-radius: 3px;
}

.teacher-adv pre {
  max-height: 22rem;
  overflow-y: scroll;
}

.answer-block {
  pre {
    text-align: start;
  } 
}


#loading_spinner {
  border: 16px solid #f7f7f7;
  border-top: 16px solid #2977ff;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  z-index: 101;
  animation: spin 2s linear infinite;
  position: fixed;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loading_mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
}

.teacher-table-shell {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.teacher-table {
  width: 100%;
  border-collapse: collapse;
}

.teacher-table-head {
  background-color: #edf2f7;
}

.teacher-table-head .teacher-table-th {
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

@media (min-width: 640px) {
  .teacher-table-head .teacher-table-th {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.teacher-table-head tr {
  border-bottom: 1px solid #cbd5e0;
}

.teacher-table-body {
  background-color: #ffffff;
}

.teacher-table-body tr + tr {
  border-top: 1px solid #edf2f7;
}

.teacher-table-td {
  padding: 0.75rem 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .teacher-table-td {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.teacher-menu-button {
  padding: 0.375rem;
  display: flex;
  justify-content: center;
  border-radius: 9999px;
}

.teacher-context-menu {
  z-index: 30;
  width: 14rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.teacher-context-menu-item {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  color: #2c5282;
  transition: background-color 100ms ease-in;
}

.teacher-context-menu-item:hover {
  background-color: #edf2f7;
}

.teacher-context-menu-item:active {
  background-color: #cbd5e0;
}

.teacher-context-menu-item-danger,
.teacher-context-menu-item-danger span,
.teacher-context-menu-item-danger i {
  color: #c53030;
}


/* ---------------------------------------------------------------------------
   Editor explanation panel (adventure content / solution tabs)

   The glyphs in this panel illustrate CKEditor toolbar buttons; they are not
   controls. Teachers reported pressing them instead of the real toolbar
   buttons, so they deliberately carry no button chrome: no background, no
   border, no hover fill, no focus ring. Hovering or clicking one highlights
   the matching toolbar button instead of doing anything to the content.
   --------------------------------------------------------------------------- */

.hedy-tool-hint {
  margin: 0.75rem 0;
}

.hedy-tool-glyph {
  display: inline-flex;
  vertical-align: -0.15em;
  margin-inline-end: 0.35em;
  cursor: help;
}

.hedy-tool-glyph svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

/* Spotlight applied to the real toolbar button while its glyph is hovered or
   was just clicked. Deliberately not one of CKEditor's own state classes, so
   it never reads as "this tool is currently on". */
.hedy-tool-spotlight {
  position: relative;
  outline: 2px solid #2b6cb0;
  outline-offset: 1px;
  border-radius: var(--ck-border-radius, 2px);
  animation: hedy-tool-pulse 0.6s ease-out 2;
}

@keyframes hedy-tool-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 108, 176, 0.5); }
  100% { box-shadow: 0 0 0 6px rgba(43, 108, 176, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hedy-tool-spotlight {
    animation: none;
  }
}

/* --- Teacher slides overview (for-teachers/slides.html) --- */
.slides-level-list {
  max-height: 32rem;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .slides-level-list {
    width: 14rem;
    flex: 0 0 14rem;
  }
}

.slides-level-item {
  display: block;
  padding: 0.5rem 1rem;
  color: #2b6cb0;
  text-decoration: none;
}

.slides-level-item:hover {
  background-color: #ebf8ff;
  text-decoration: none;
}

.slides-level-item-active,
.slides-level-item-active:hover {
  background-color: #bee3f8;
  color: #2a4365;
  font-weight: 600;
}

.slides-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.slides-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
  The "prepare a level" page under Teaching materials reads as a light document
  rather than as an extension of the editor.  Everything here is scoped to that
  page, so the same content rendered in the teacher manual keeps its own look.
*/

/*
  Inline code, light instead of the dark editor theme.  The global `code` rule
  sets its background with `!important`, so this has to as well; it wins on
  specificity rather than on order.
*/
.prepare-level code {
  background: #edf2f7 !important;
  color: #e53e3e;
  border: 1px solid #e2e8f0;
}

/*
  The panel holding the page contents.  Follows the configure class and configure
  level pages, but roomier: those hold a narrow column, this one runs the full width,
  where `p-5` leaves the text sitting on the border.  Tailwind's built CSS has no
  `md:p-12`, hence the rule here.
*/
.prepare-level .content-panel { padding: 1.5rem; }
@media (min-width: 768px) {
  .prepare-level .content-panel { padding: 3rem; }
}

/*
  Tailwind's reset zeroes list padding, and Hedy restores the indent only inside
  `.text-display-copy`, `.text-business-copy` and `.text-adventure-copy`. The teacher
  manual is one of those, this page is not, so bullets hung outside the text column.
  Match what the manual gives the very same markdown -- `ml-10` and `mt-2` between
  items -- as logical properties, so it also reads correctly right to left.
*/
.prepare-level .level-guide-copy ul,
.prepare-level .level-guide-copy ol {
  margin-inline-start: 2.5rem;
}
.prepare-level .level-guide-copy li + li {
  margin-top: 0.5rem;
}

/*
  Common mistakes as two labelled beats: what goes wrong, then the fix. The entries ran
  together and nothing said which code was broken, so each half takes a coloured edge
  and a label, and a rule separates one mistake from the next. Logical properties, so
  the edges sit on the correct side right to left.
*/
.prepare-level .mistake + .mistake {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid #e2e8f0;
}
.prepare-level .mistake-beat {
  padding-inline-start: 1rem;
  border-inline-start: 3px solid transparent;
}
.prepare-level .mistake-beat + .mistake-beat { margin-top: 1.5rem; }
.prepare-level .beat-problem { border-inline-start-color: #fc8181; }
.prepare-level .beat-fix { border-inline-start-color: #68d391; }
.prepare-level .beat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prepare-level .beat-problem .beat-label { color: #c53030; }
.prepare-level .beat-fix .beat-label { color: #276749; }
/* The label is the beat's first line; the prose under it should not push away from it. */
.prepare-level .mistake-beat .beat-label + p { margin-top: 0.35rem; }

/*
  Material names, one step down from the section headings around them.
*/
.prepare-level .material-name {
  font-family: 'Balsamiq Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.3;
}

/*
  Mistake titles, given the blue slab heading the rest of the app uses -- the same
  values as an `h3`.  The markdown filter wraps the title in a `p`, which is why
  the font has to be set on both.
*/
.prepare-level .mistake-title,
.prepare-level .mistake-title p {
  font-family: 'Balsamiq Sans', sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  color: rgb(43 108 176);
}

/*
  Common mistakes examples only become editors once they scroll into view. Until then
  the <pre> holds the raw code, which the global `pre` rule colours white on no
  background -- an empty white box. Give it the editor's background meanwhile.
*/
pre.common-mistakes:not(:has(.cm-editor)) {
  background: #272822;
  padding: 0.25rem 0.5rem;
}