/* SchoolDay v267.10 -- the spelling sheet editor.

   Loaded after styles.css, whose word-grid rules it answers -- and BEFORE
   admin-function-shell-v2365.css, which has to stay the last stylesheet on the
   page, because that is the whole reason the sweep can avoid !important at every
   rule.

   The grid items used to be the <input> elements themselves; they are now a
   wrapper holding the word, its "ph" button and its phonic chips, so the four
   later rules that assumed the item WAS the input are answered here rather than
   edited in four places. */

/* ------------------------------------------------------------- word cells -- */
.spelling-cell-wrap-v26710 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  min-width: 0;
}

/* A contenteditable div, not an input: an input cannot render part of its own
   text bold and underlined, which is what a tagged phonic has to look like.
   styles.css already gives .spelling-grid-input its border, padding and font. */
.spelling-cell-wrap-v26710 .spelling-grid-input {
  flex: 1 1 5rem;
  min-width: 0;
  min-height: 1.3rem;
  background: #fff;
  overflow-wrap: anywhere;
  cursor: text;
}
.spelling-cell-wrap-v26710 .spelling-grid-input:focus {
  outline: 2px solid #1765a8;
  outline-offset: 1px;
}
.spelling-phonic-mark-v26710 {
  font-weight: 800;
  text-decoration: underline;
}

.spelling-ph-button-v26710 {
  flex: 0 0 auto;
  min-width: 2rem;
  padding: .3rem .45rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
  border-radius: .4rem;
}

/* To the right of the word, and onto a second line inside the same cell when
   the cell is too narrow for both -- which in the bulk editor, where a column
   can be 160px, it often is. */
.spelling-tags-v26710 {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  min-width: 0;
}
.spelling-tags-v26710.hidden { display: none; }
.spelling-tag-v26710 {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .1rem .2rem .1rem .35rem;
  border: 1px solid #9ec0dd;
  border-radius: 999px;
  background: #eaf3fb;
  font-size: .78rem;
  font-weight: 700;
  color: #123b5d;
  white-space: nowrap;
}
.spelling-tag-v26710 button {
  border: 0;
  background: transparent;
  color: #4a6a8a;
  font-size: .95rem;
  line-height: 1;
  padding: 0 .15rem;
  cursor: pointer;
}
.spelling-tag-v26710 button:hover { color: #a31f2f; }

/* ---------------------------------------------------------------- headers -- */
/* Full width whatever the column count is, so a header always reads as a band
   across the list rather than as one more word box. */
.spelling-header-row-v26710 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .4rem;
  border: 1px solid #9ec0dd;
  border-radius: .45rem;
  background: #eaf2fa;
  min-width: 0;
}
.spelling-header-row-v26710.is-dragging { opacity: .45; }
.spelling-header-grip-v26710 {
  flex: 0 0 auto;
  cursor: grab;
  padding: .1rem .3rem;
  border-radius: .3rem;
  background: #ffffff;
  border: 1px solid #c3d7e9;
  color: #4a6a8a;
  font-weight: 700;
  letter-spacing: .1em;
  user-select: none;
}
.spelling-header-grip-v26710:active { cursor: grabbing; }
.spelling-header-text-v26710 {
  flex: 1 1 auto;
  min-width: 0;
  padding: .28rem .4rem;
  border: 1px solid #cddced;
  border-radius: .35rem;
  background: #fff;
  font-weight: 700;
  color: #123b5d;
  overflow-wrap: anywhere;
}
.spelling-header-text-v26710:focus {
  outline: 2px solid #1765a8;
  outline-offset: 1px;
}
.spelling-header-text-v26710:empty::before {
  content: attr(data-placeholder);
  color: #7d8fa1;
  font-weight: 400;
}
.spelling-header-remove-v26710 {
  flex: 0 0 auto;
  border: 1px solid #d9b6bb;
  background: #fff;
  color: #a31f2f;
  border-radius: .35rem;
  font-size: 1rem;
  line-height: 1;
  padding: .2rem .4rem;
  cursor: pointer;
}

/* The tool, and the tray a new header waits in. The dashed tray is deliberately
   NOT the same as a placed header: an unplaced header is not saved, and it has
   to look unfinished. */
.spelling-header-tool-v26710 { margin-top: .5rem; }
.spelling-header-staging-v26710 { display: grid; gap: .35rem; margin: .45rem 0; }
.spelling-header-staging-v26710:empty { display: none; }
.spelling-header-staging-v26710 .spelling-header-row-v26710 {
  grid-column: auto;
  border-style: dashed;
  background: #fff7e6;
}

/* Where a dragged header would land. */
.spelling-cell-wrap-v26710.is-drop-before { box-shadow: -3px 0 0 0 #1765a8; }
.spelling-cell-wrap-v26710.is-drop-after { box-shadow: 3px 0 0 0 #1765a8; }

/* The bulk editor squeezes this grid to a 105px minimum, which fitted a bare
   input and does not fit a word, a button and a chip. */
.bulk-editor-panel .spelling-grid-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

/* -------------------------------------------------------- phonic picker -- */
.spelling-phonic-picker-v26710 {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 25, 43, .5);
}
.spelling-phonic-picker-panel-v26710 {
  width: min(32rem, 100%);
  max-height: 85vh;
  overflow: auto;
  background: #fff;
  border-radius: .7rem;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 18px 44px rgba(8, 25, 43, .3);
}
.spelling-phonic-picker-panel-v26710 h3 { margin: 0 0 .25rem; }
.spelling-phonic-picker-panel-v26710 p { margin: 0 0 .7rem; }
.spelling-phonic-picker-list-v26710 { display: grid; gap: .4rem; }
.spelling-phonic-picker-list-v26710 button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .1rem .6rem;
  width: 100%;
  text-align: left;
  padding: .5rem .6rem;
  border: 1px solid #c3d7e9;
  border-radius: .5rem;
  background: #f7fbff;
  color: #123b5d;
  cursor: pointer;
}
.spelling-phonic-picker-list-v26710 button:hover,
.spelling-phonic-picker-list-v26710 button:focus-visible {
  border-color: #1765a8;
  background: #eaf3fb;
}
.spelling-phonic-picker-list-v26710 img {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.spelling-phonic-picker-list-v26710 strong { font-size: 1.1rem; }
.spelling-phonic-picker-list-v26710 span { font-size: .85rem; color: #4a6a8a; }

/* --------------------------------------- extension section and recorder -- */
.spelling-extension-fields-v26710 {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: .6rem;
  margin-top: .9rem;
}
.spelling-extension-fields-v26710 > label { display: grid; gap: .2rem; }
.spelling-extension-fields-v26710 .small-help { grid-column: 1 / -1; margin: 0; }
.spelling-extension-fields-v26710 > [data-spelling-column-note-v26710] { grid-column: 1 / -1; }
/* v267.11: the Upload sound field and the Record sound buttons were touching.
   They are two different ways of doing the same job, and a gap is what says so. */
.spelling-recorder-v26710 { margin-top: .9rem; }
.spelling-recorder-v26710 .maths-media-grid { margin-bottom: .75rem; }
.spelling-recorder-v26710 .maths-record-actions {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid #dce7f2;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* v267.11: the letter INSIDE a split digraph. e_e is one phonic covering three
   letters and being two of them, so the m in meme sits inside the mark and is
   styled back out of it -- the teacher sees m(e)m(e) while the tag stays one
   element, which is what lets its chip find the mark it removes. */
.spelling-phonic-mark-v26710 i,
.spelling-phonic-mark-v26710 .spelling-phonic-mark-v26710-gap {
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
}

/* The site and the SQL deploy separately, so a sheet can be open on a database
   that has not had this release's columns yet. It says so here rather than
   failing the save. */
.spelling-column-warn-v26710 {
  margin: .6rem 0 0;
  padding: .5rem .65rem;
  border: 1px solid #e0b96a;
  border-left: 4px solid #d89b1f;
  border-radius: .4rem;
  background: #fdf6e6;
  color: #5c4310;
  font-size: .9rem;
}

@media (max-width: 640px) {
  .spelling-extension-fields-v26710 { grid-template-columns: 1fr; }
}