/*
Trix 1.3.2
Copyright © 2024 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }
trix-toolbar * {
  box-sizing: border-box; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%; }
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-dialogs {
  position: relative; }
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }
trix-toolbar .trix-dialog--link {
  max-width: 600px; }
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight; }
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }
trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }
trix-editor .trix-button-group {
  display: inline-flex; }
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }
trix-editor .attachment__metadata-container {
  position: relative; }
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }
@charset "UTF-8";
.trix-content {
  line-height: 1.5; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' · '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*

*/

/* Action Text gallery overrides */
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ============================================================
   Enrollment Trix Editor — Delightful Pill Toolbar
   Inspired by modern editors: big icons, generous spacing,
   rounded pill groups, soft shadows, clean minimal feel.
   ============================================================ */

/* ── Toolbar — Full-width Pill ────────────────────────────── */
.enrollment-trix-editor trix-toolbar {
  background: #f4f5f7;
  border: 1.5px solid #e8eaed;
  border-bottom: none;
  border-radius: 1rem 1rem 0 0;
  padding: 0.5rem 0.625rem;
}

.enrollment-trix-editor trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  align-items: center;
  overflow-x: auto;
}

/* ── Button Groups — Rounded Pill Clusters ────────────────── */
.enrollment-trix-editor trix-toolbar .trix-button-group {
  display: flex;
  gap: 0;
  border: 1.5px solid #e0e2e6;
  border-radius: 0.625rem;
  background: white;
  padding: 3px;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ── Individual Buttons — Big & Clean ─────────────────────── */
.enrollment-trix-editor trix-toolbar .trix-button {
  background: transparent;
  border: none;
  border-bottom: none;
  border-radius: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.enrollment-trix-editor trix-toolbar .trix-button:hover {
  background: #f0f1f3;
}

.enrollment-trix-editor trix-toolbar .trix-button.trix-active {
  background: #e8e0f4;
}

/* ── Button Icons — Bigger & Centered ─────────────────────── */
.enrollment-trix-editor trix-toolbar .trix-button::before {
  opacity: 0.7;
  transition: opacity 0.15s ease;
  width: 17px;
  height: 17px;
  background-size: contain;
  /* Override Trix default absolute positioning — use static for flex centering */
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
}

.enrollment-trix-editor trix-toolbar .trix-button:hover::before {
  opacity: 0.9;
}

.enrollment-trix-editor trix-toolbar .trix-button.trix-active::before {
  opacity: 1;
}

/* ── Dialogs (link input) ─────────────────────────────────── */
.enrollment-trix-editor trix-toolbar .trix-dialog {
  background: white;
  border: 1.5px solid #e0e2e6;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 0.75rem;
  margin-top: 0.375rem;
}

.enrollment-trix-editor trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.enrollment-trix-editor trix-toolbar .trix-dialog input[type="url"],
.enrollment-trix-editor trix-toolbar .trix-dialog input[type="text"] {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #e0e2e6;
  border-radius: 0.5rem;
  background: #f9fafb;
  outline: none;
  transition: all 0.15s ease;
  font-family: 'Inter var', system-ui, sans-serif;
}

.enrollment-trix-editor trix-toolbar .trix-dialog input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background: white;
}

.enrollment-trix-editor trix-toolbar .trix-dialog .trix-button-group {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.375rem;
  box-shadow: none;
}

.enrollment-trix-editor trix-toolbar .trix-dialog .trix-button-group .trix-button {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter var', system-ui, sans-serif;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #2563eb;
  color: white;
  text-indent: 0;
}

.enrollment-trix-editor trix-toolbar .trix-dialog .trix-button-group .trix-button::before {
  display: none;
}

.enrollment-trix-editor trix-toolbar .trix-dialog .trix-button-group .trix-button:hover {
  background: #1d4ed8;
}

.enrollment-trix-editor trix-toolbar .trix-dialog .trix-button-group .trix-button:last-child {
  background: #f0f1f3;
  color: #374151;
}

.enrollment-trix-editor trix-toolbar .trix-dialog .trix-button-group .trix-button:last-child:hover {
  background: #e5e7eb;
}

/* ── Editor Area ──────────────────────────────────────────── */
.enrollment-trix-editor trix-editor {
  min-height: 100px;
  border: 1.5px solid #e8eaed;
  border-top: 1px solid #eef0f2;
  border-radius: 0 0 1rem 1rem;
  padding: 1rem 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  font-family: 'Inter var', system-ui, sans-serif;
  background: white;
  color: #1a1a1a;
  transition: all 0.15s ease;
}

.enrollment-trix-editor trix-editor:focus {
  border-color: #c5cad0;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  outline: none;
}

.enrollment-trix-editor trix-editor:empty:not(:focus)::before {
  color: #adb1b8;
}

.enrollment-trix-editor trix-editor ul,
.enrollment-trix-editor trix-editor ol {
  padding-left: 1.5rem;
}

.enrollment-trix-editor trix-editor h1 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0.75rem 0 0.375rem;
  letter-spacing: -0.02em;
}

.enrollment-trix-editor trix-editor blockquote {
  border-left: 3px solid #2563eb;
  padding-left: 1rem;
  color: #6b7280;
  margin: 0.625rem 0;
}

.enrollment-trix-editor trix-editor pre {
  background: #f4f5f7;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
}

.enrollment-trix-editor trix-editor [data-trix-mutable]:not(.attachment--preview) {
  box-shadow: none;
}

/* ============================================================
   Dark Mode
   ============================================================ */
.dark .enrollment-trix-editor trix-toolbar {
  background: #1e2533;
  border-color: #2d3548;
}

.dark .enrollment-trix-editor trix-toolbar .trix-button-group {
  background: #252d3d;
  border-color: #353e50;
}

.dark .enrollment-trix-editor trix-toolbar .trix-button:hover {
  background: #2d3548;
}

.dark .enrollment-trix-editor trix-toolbar .trix-button.trix-active {
  background: #3b2e5a;
}

.dark .enrollment-trix-editor trix-toolbar .trix-button::before {
  filter: invert(0.88);
}

.dark .enrollment-trix-editor trix-toolbar .trix-button.trix-active::before {
  filter: invert(0.88) sepia(1) saturate(3) hue-rotate(220deg) brightness(1.2);
  opacity: 1;
}

.dark .enrollment-trix-editor trix-toolbar .trix-dialog {
  background: #1e2533;
  border-color: #2d3548;
}

.dark .enrollment-trix-editor trix-toolbar .trix-dialog input {
  background: #151b28;
  border-color: #2d3548;
  color: #e5e7eb;
}

.dark .enrollment-trix-editor trix-toolbar .trix-dialog input:focus {
  border-color: #3b82f6;
}

.dark .enrollment-trix-editor trix-toolbar .trix-dialog .trix-button-group .trix-button:last-child {
  background: #2d3548;
  color: #d1d5db;
}

.dark .enrollment-trix-editor trix-editor {
  background: #151b28;
  border-color: #2d3548;
  color: #e5e7eb;
}

.dark .enrollment-trix-editor trix-editor:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dark .enrollment-trix-editor trix-editor blockquote {
  border-left-color: #3b82f6;
  color: #9ca3af;
}

.dark .enrollment-trix-editor trix-editor pre {
  background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   Images
   ============================================================ */
.enrollment-trix-editor trix-editor img,
.trix-content img,
.prose action-text-attachment img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.trix-content action-text-attachment,
.prose action-text-attachment {
  max-width: 600px;
  display: block;
  margin: 0.5rem 0;
}


/* ============================================================
   Discussions composer — house editor skin (see enrollment-trix
   above) with a teal accent and dark-mode support. Scoped to the
   discussion-trix Stimulus wrapper; the toolbar itself is pruned
   to the cross-platform subset (B/I/S/link/lists) in JS.
   ============================================================ */

[data-controller="discussion-trix"] trix-toolbar {
  background: #f4f5f7;
  border: 1.5px solid #e8eaed;
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 0.375rem 0.5rem;
}

[data-controller="discussion-trix"] trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  overflow-x: visible;
}

[data-controller="discussion-trix"] trix-toolbar .trix-button-group {
  display: flex;
  gap: 0;
  border: 1.5px solid #e0e2e6;
  border-radius: 0.625rem;
  background: white;
  padding: 2px;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-controller="discussion-trix"] trix-toolbar .trix-button-group--history-tools {
  margin-left: auto;
}

[data-controller="discussion-trix"] trix-toolbar .trix-button {
  background: transparent;
  border: none !important;
  border-radius: 0.5rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-controller="discussion-trix"] trix-toolbar .trix-button:hover {
  background: #f0f1f3;
}

[data-controller="discussion-trix"] trix-toolbar .trix-button.trix-active {
  background: #ccfbf1; /* teal-100 */
}

[data-controller="discussion-trix"] trix-toolbar .trix-button::before {
  opacity: 0.7;
  width: 16px;
  height: 16px;
  background-size: contain;
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
}

[data-controller="discussion-trix"] trix-toolbar .trix-button:hover::before,
[data-controller="discussion-trix"] trix-toolbar .trix-button.trix-active::before {
  opacity: 1;
}

/* Link dialog */
[data-controller="discussion-trix"] trix-toolbar .trix-dialog {
  background: white;
  border: 1.5px solid #e0e2e6;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 0.75rem;
  margin-top: 0.375rem;
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog input[type="url"] {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #e0e2e6;
  border-radius: 0.5rem;
  background: #f9fafb;
  outline: none;
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog input[type="url"]:focus {
  border-color: #0d9488; /* teal-600 */
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
  background: white;
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog .trix-button-group {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.375rem;
  box-shadow: none;
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog .trix-button-group .trix-button {
  font-size: 0.75rem;
  font-weight: 600;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #0d9488; /* teal-600 */
  color: white;
  text-indent: 0;
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog .trix-button-group .trix-button::before {
  display: none;
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog .trix-button-group .trix-button:hover {
  background: #0f766e; /* teal-700 */
}
[data-controller="discussion-trix"] trix-toolbar .trix-dialog .trix-button-group .trix-button:last-child {
  background: #f0f1f3;
  color: #374151;
}

/* Editor area fused under the toolbar */
[data-controller="discussion-trix"] trix-editor {
  min-height: 6.5rem;
  border: 1.5px solid #e8eaed;
  border-top: 1px solid #eef0f2;
  border-radius: 0 0 0.75rem 0.75rem !important;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  background: white;
  color: #1a1a1a;
  transition: all 0.15s ease;
}
[data-controller="discussion-trix"] trix-editor:focus {
  border-color: #14b8a6; /* teal-500 */
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.10);
  outline: none;
}

/* ── Dark mode ────────────────────────────────────────────── */
.dark [data-controller="discussion-trix"] trix-toolbar {
  background: #1f2937; /* gray-800 */
  border-color: #374151;
}
.dark [data-controller="discussion-trix"] trix-toolbar .trix-button-group {
  background: #111827; /* gray-900 */
  border-color: #374151;
  box-shadow: none;
}
.dark [data-controller="discussion-trix"] trix-toolbar .trix-button:hover {
  background: #374151;
}
.dark [data-controller="discussion-trix"] trix-toolbar .trix-button.trix-active {
  background: #134e4a; /* teal-900 */
}
.dark [data-controller="discussion-trix"] trix-toolbar .trix-button::before {
  filter: invert(0.85);
}
.dark [data-controller="discussion-trix"] trix-toolbar .trix-dialog {
  background: #1f2937;
  border-color: #374151;
}
.dark [data-controller="discussion-trix"] trix-toolbar .trix-dialog input[type="url"] {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
.dark [data-controller="discussion-trix"] trix-editor {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
.dark [data-controller="discussion-trix"] trix-editor:focus {
  border-color: #14b8a6;
}
@import 'actiontext.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dark Mode CSS Custom Properties for OKLCH Colors */
:root {
  /* Primary gradient colors (purple/blue theme) */
  --color-primary: oklch(62.3% 0.214 259.815);
  --color-primary-light: oklch(65% 0.20 280);

  /* Admin gradient (red/orange) */
  --color-admin: oklch(55% 0.22 25);
  --color-admin-light: oklch(65% 0.19 40);

  /* Teacher gradient (blue/indigo) */
  --color-teacher: oklch(60% 0.18 250);
  --color-teacher-light: oklch(65% 0.15 270);

  /* Student gradient (green) */
  --color-student: oklch(65% 0.17 145);
  --color-student-light: oklch(70% 0.14 160);

  /* Parent gradient (purple/pink) */
  --color-parent: oklch(60% 0.20 320);
  --color-parent-light: oklch(65% 0.17 340);

  /* Gradients */
  --gradient-primary: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
  --gradient-admin: linear-gradient(to right, var(--color-admin), var(--color-admin-light));
  --gradient-teacher: linear-gradient(to right, var(--color-teacher), var(--color-teacher-light));
  --gradient-student: linear-gradient(to right, var(--color-student), var(--color-student-light));
  --gradient-parent: linear-gradient(to right, var(--color-parent), var(--color-parent-light));
}

.dark {
  /* Lighten colors for dark mode (increase lightness, reduce chroma slightly) */
  --color-primary: oklch(72% 0.18 259.815);
  --color-primary-light: oklch(75% 0.16 280);

  --color-admin: oklch(68% 0.18 25);
  --color-admin-light: oklch(72% 0.15 40);

  --color-teacher: oklch(70% 0.15 250);
  --color-teacher-light: oklch(73% 0.12 270);

  --color-student: oklch(73% 0.14 145);
  --color-student-light: oklch(76% 0.12 160);

  --color-parent: oklch(70% 0.17 320);
  --color-parent-light: oklch(73% 0.14 340);
}

.turbo-progress-bar {
  visibility: hidden;
}

/* AI Assistant Markdown Styles */
.prose {
  color: #374151;
}

.dark .prose {
  color: #d1d5db;
}

.prose p {
  margin-bottom: 0.75em;
  line-height: 1.6;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #111827;
}

.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4 {
  color: #f3f4f6;
}

.prose h1 { font-size: 1.5em; }
.prose h2 { font-size: 1.3em; }
.prose h3 { font-size: 1.1em; }

.prose strong {
  font-weight: 600;
  color: #111827;
}

.dark .prose strong {
  color: #f9fafb;
}

.prose em {
  font-style: italic;
  color: #6b7280;
}

.dark .prose em {
  color: #9ca3af;
}

.prose code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: 'Courier New', Courier, monospace;
  color: #dc2626;
}

.dark .prose code {
  background-color: #374151;
  color: #fca5a5;
}

.prose pre {
  background-color: #1f2937;
  color: #f9fafb;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.75em 0;
}

.dark .prose pre {
  background-color: #111827;
}

.prose pre code {
  background-color: transparent;
  color: #f9fafb;
  padding: 0;
  font-size: 0.875em;
}

.prose ul, .prose ol {
  margin: 0.75em 0;
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 0.25em;
  line-height: 1.6;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75em 0;
}

.prose th {
  background-color: #f3f4f6;
  font-weight: 600;
  text-align: left;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
}

.dark .prose th {
  background-color: #374151;
  border-color: #4b5563;
}

.prose td {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
}

.dark .prose td {
  border-color: #4b5563;
}

.prose blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  margin: 0.75em 0;
  font-style: italic;
  color: #6b7280;
}

.dark .prose blockquote {
  border-left-color: #4b5563;
  color: #9ca3af;
}

.prose a {
  color: #2563eb;
  text-decoration: underline;
}

.dark .prose a {
  color: #60a5fa;
}

.prose a:hover {
  color: #1d4ed8;
}

.dark .prose a:hover {
  color: #93c5fd;
}

.prose hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.5em 0;
}

.dark .prose hr {
  border-top-color: #4b5563;
}

/* Landing Page Animations */
@keyframes blob {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes gradient {
  0%, 100% {
    background-size: 200% 200%;
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

/* Row highlight animation for newly created items */
@keyframes row-highlight-flash {
  0%, 10% {
    background-color: rgb(220, 252, 231); /* green-100 */
  }
  100% {
    background-color: transparent;
  }
}

.animate-row-highlight {
  animation: row-highlight-flash 2.5s ease-out;
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
  @keyframes row-highlight-flash {
    0%, 10% {
      background-color: rgba(34, 197, 94, 0.2); /* green-500 with opacity */
    }
    100% {
      background-color: transparent;
    }
  }
}

.dark .animate-row-highlight {
  animation: row-highlight-flash-dark 2.5s ease-out;
}

@keyframes row-highlight-flash-dark {
  0%, 10% {
    background-color: rgba(34, 197, 94, 0.2); /* green-500 with opacity */
  }
  100% {
    background-color: transparent;
  }
}

/* Fade-in-up animation for modals/overlays */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.25s ease-out;
}

/* Native <dialog> modals (showModal()) get the same fade+scale entrance the
   div-based modals get from openModalWithAnimation()/.modal-panel. Applied
   globally so showModal()/close() call sites need no changes. Exit is not
   animated: dialog.close() removes the element from the top layer at once. */
@keyframes modal-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

dialog[open] {
  animation: modal-dialog-in 0.25s ease-out;
}

dialog[open]::backdrop {
  animation: modal-backdrop-in 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop {
    animation: none;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

/* Shake animation for validation errors */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Flashy Text Animations */
@keyframes text-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
                 0 0 20px rgba(255, 255, 255, 0.2),
                 0 0 30px rgba(255, 255, 255, 0.1);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
                 0 0 30px rgba(255, 255, 255, 0.4),
                 0 0 40px rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
  }
}

@keyframes text-wave {
  0%, 100% {
    transform: translateY(0px);
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  50% {
    transform: translateY(-10px);
    text-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  }
}

@keyframes text-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(37, 99, 235, 0.5),
      0 0 40px rgba(79, 70, 229, 0.3),
      0 0 60px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow:
      0 0 30px rgba(37, 99, 235, 0.8),
      0 0 60px rgba(79, 70, 229, 0.5),
      0 0 90px rgba(37, 99, 235, 0.3),
      0 0 120px rgba(79, 70, 229, 0.2);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

.animate-shimmer {
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 2s ease-in-out infinite;
}

.animate-text-shimmer {
  animation: text-shimmer 3s linear infinite;
}

.animate-text-glow {
  animation: text-glow 2s ease-in-out infinite;
}

.animate-text-wave {
  animation: text-wave 3s ease-in-out infinite;
}

.animate-text-pulse {
  animation: text-pulse 2.5s ease-in-out infinite;
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

.animation-delay-300 {
  animation-delay: 0.3s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

.animation-delay-500 {
  animation-delay: 0.5s;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-1500 {
  animation-delay: 1.5s;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-2500 {
  animation-delay: 2.5s;
}

.animation-delay-3000 {
  animation-delay: 3s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Hover lift effect for cards */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 3D Hover Effect for Screenshots */
.perspective-container {
  perspective: 1500px;
}

.hover-3d {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.hover-3d:hover {
  transform: rotateY(5deg) rotateX(-3deg) translateZ(20px) scale(1.02);
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.25),
    0 18px 36px -18px rgba(0, 0, 0, 0.3),
    0 -5px 36px -8px rgba(0, 0, 0, 0.025);
}

.hover-3d img {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Smooth scroll optimization */
* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

img {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Animated Gradient Glow for AI Assistant */
@keyframes ai-glow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.ai-glow-container {
  background: linear-gradient(
    90deg,
    #10b981,
    #14b8a6,
    #06b6d4,
    #3b82f6,
    #8b5cf6,
    #ec4899,
    #f43f5e,
    #f59e0b,
    #10b981
  );
  background-size: 300% 300%;
  animation: ai-glow 15s ease-in-out infinite;
  box-shadow:
    0 0 40px rgba(16, 185, 129, 0.8),
    0 0 80px rgba(20, 184, 166, 0.6),
    0 0 120px rgba(6, 182, 212, 0.4),
    0 0 160px rgba(59, 130, 246, 0.3);
  filter: brightness(1.2);
}

/* Mobile-friendly adjustments */
@media (max-width: 640px) {
  .hover-3d:hover {
    transform: rotateY(2deg) rotateX(-1deg) translateZ(10px) scale(1.01);
  }

  .ai-glow-container {
    box-shadow:
      0 0 30px rgba(16, 185, 129, 0.6),
      0 0 60px rgba(20, 184, 166, 0.4),
      0 0 90px rgba(6, 182, 212, 0.3);
  }
}

/* Features Page Cards */
.feature-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid rgba(37, 99, 235, 0.1);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(37, 99, 235, 0.3);
}

@media (min-width: 640px) {
  .feature-card {
    padding: 2rem;
  }
}

/* Mobile navigation improvements */
@media (max-width: 640px) {
  nav .flex.items-center.space-x-4 {
    gap: 0.5rem;
  }

  nav .flex.items-center.space-x-4 a {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* Dark mode date input calendar icon fix */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* Hide native calendar icon when using custom icon */
.date-input-no-icon::-webkit-calendar-picker-indicator {
  display: none;
}

/* Color scheme for dark mode inputs */
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"] {
  color-scheme: dark;
}

/* @layer components { .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Move Bullet N+1 query warnings to top left */
div[style*="position: fixed"][style*="background-color: #fdf2f2"] {
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  right: auto !important;
}

/* ============================================
   iOS 26 LIQUID GLASS NAVIGATION
   ============================================ */

@layer components {

/* Base glass container */
.liquid-glass-nav {
  position: fixed !important;
  top: 1.25rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;

  width: calc(100% - 2rem);
  max-width: 1000px;
  padding: 1.1rem 2rem;

  /* Vibrant frosted glass with prominent blue glow */
  background: linear-gradient(
    135deg,
    rgba(191, 219, 254, 0.55) 0%,
    rgba(219, 234, 254, 0.45) 25%,
    rgba(224, 242, 254, 0.4) 50%,
    rgba(191, 219, 254, 0.5) 75%,
    rgba(147, 197, 253, 0.45) 100%
  );
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.1);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.1);

  border-radius: 22px;
  border: 1px solid rgba(147, 197, 253, 0.6);

  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 20px -5px rgba(0, 0, 0, 0.08),
    0 25px 50px -12px rgba(0, 0, 0, 0.1);

  will-change: transform, border-radius;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  contain: layout style;
  transition: box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Specular highlight layer (top shine) - enhanced glass reflection */
.liquid-glass-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 100%
  );
  border-radius: 22px 22px 100% 100%;
  pointer-events: none;
  opacity: 1;
}

/* Subtle blue glows behind the glass */
.liquid-glass-nav::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 130%;
  background: radial-gradient(
    ellipse at center,
    rgba(37, 99, 235, 0.5) 0%,
    rgba(59, 130, 246, 0.3) 35%,
    transparent 65%
  );
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
  animation: glow-slide-1 3s ease-in-out infinite;
}

/* Liquid warp container - holds additional glow elements */
.liquid-glass-nav .liquid-warp {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  pointer-events: none;
}

/* Second glow - moves opposite direction */
.liquid-glass-nav .liquid-warp::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 20%;
  transform: translate(50%, -50%);
  width: 35%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    rgba(29, 78, 216, 0.45) 0%,
    rgba(59, 130, 246, 0.25) 40%,
    transparent 65%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
  animation: glow-slide-2 3.5s ease-in-out infinite 0.8s;
}

/* Third glow - gentle pulse in center */
.liquid-glass-nav .liquid-warp::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 110%;
  background: radial-gradient(
    ellipse at center,
    rgba(37, 99, 235, 0.4) 0%,
    rgba(59, 130, 246, 0.2) 45%,
    transparent 70%
  );
  filter: blur(15px);
  pointer-events: none;
  z-index: -1;
  animation: glow-pulse-3 2.5s ease-in-out infinite 0.4s;
}

@keyframes glow-slide-1 {
  0%, 100% {
    left: 22%;
    opacity: 0.7;
  }
  50% {
    left: 33%;
    opacity: 0.9;
  }
}

@keyframes glow-slide-2 {
  0%, 100% {
    right: 17%;
    opacity: 0.65;
  }
  50% {
    right: 28%;
    opacity: 0.85;
  }
}

@keyframes glow-pulse-3 {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Liquid blob that follows cursor - enhanced glow */
.liquid-glass-nav .liquid-blob {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.15) 60%,
    transparent 80%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  filter: blur(20px);
  transition: opacity 0.4s ease;
}

.liquid-glass-nav:hover .liquid-blob {
  opacity: 1;
}

/* Navigation content wrapper */
.liquid-glass-nav .nav-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigation links styling */
.liquid-glass-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.liquid-glass-nav .nav-link {
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  font-size: 1rem;
  color: rgba(55, 65, 81, 0.95);
  border-radius: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.liquid-glass-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #2563eb;
  transform: translateY(-1px);
}

.liquid-glass-nav .nav-link:active {
  transform: translateY(0);
}

/* CTA button in glass nav */
.liquid-glass-nav .nav-cta {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 12px;
  transition: all 0.25s ease;
  box-shadow:
    0 2px 8px -2px rgba(37, 99, 235, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.liquid-glass-nav .nav-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 20px -4px rgba(37, 99, 235, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.liquid-glass-nav .nav-cta:active {
  transform: translateY(0) scale(1);
}

/* Login link styling */
.liquid-glass-nav .nav-login {
  padding: 0.625rem 1rem;
  font-weight: 500;
  font-size: 0.9375rem;
  color: rgba(55, 65, 81, 0.9);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.liquid-glass-nav .nav-login:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #2563eb;
}

/* Liquid morph animation */
@keyframes liquid-morph {
  0%, 100% {
    border-radius: 22px;
  }
  25% {
    border-radius: 24px 20px 22px 24px;
  }
  50% {
    border-radius: 20px 24px 24px 20px;
  }
  75% {
    border-radius: 24px 22px 20px 24px;
  }
}

.liquid-glass-nav.morphing {
  animation: liquid-morph 0.5s ease-out;
}

/* Scroll state - maintains subtle blue tint while being more visible */
.liquid-glass-nav.scrolled {
  background: linear-gradient(
    135deg,
    rgba(219, 234, 254, 0.45) 0%,
    rgba(255, 255, 255, 0.35) 30%,
    rgba(224, 242, 254, 0.4) 70%,
    rgba(191, 219, 254, 0.4) 100%
  );
  -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(1.15);
  backdrop-filter: blur(50px) saturate(220%) brightness(1.15);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(147, 197, 253, 0.2),
    0 0 30px -5px rgba(59, 130, 246, 0.25),
    0 0 60px -10px rgba(59, 130, 246, 0.2),
    0 8px 25px -5px rgba(0, 0, 0, 0.1),
    0 20px 40px -10px rgba(0, 0, 0, 0.12);
}

/* Smooth base transitions */
.liquid-glass-nav {
  transition:
    box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo and actions base state */
.liquid-glass-nav .nav-logo,
.liquid-glass-nav .nav-actions {
  display: flex;
  align-items: center;
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  transition:
    opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

/* Minimized state - only show center links (desktop only) */
@media (min-width: 768px) {
  .liquid-glass-nav.minimized {
    padding: 0.75rem 1.75rem;
    max-width: 420px;
  }

  .liquid-glass-nav.minimized .nav-content {
    justify-content: center;
  }

  .liquid-glass-nav.minimized .nav-logo {
    opacity: 0;
    transform: scale(0.8);
    width: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .liquid-glass-nav.minimized .nav-actions {
    opacity: 0;
    transform: scale(0.8);
    width: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .liquid-glass-nav.minimized .nav-links {
    margin: 0;
  }
}

/* Mobile menu button */
.liquid-glass-nav .mobile-menu-btn {
  display: none;
  padding: 0.5rem;
  border-radius: 10px;
  color: rgba(55, 65, 81, 0.9);
  transition: all 0.2s ease;
}

.liquid-glass-nav .mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Mobile dropdown menu glass effect - matching frosty style */
.liquid-glass-mobile-menu {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.1);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.1);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    0 10px 40px -10px rgba(0, 0, 0, 0.15),
    0 20px 50px -15px rgba(0, 0, 0, 0.12);
}

/* Mobile menu animation */
@keyframes mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.liquid-glass-mobile-menu.animate-in {
  animation: mobile-menu-in 0.25s ease-out forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .liquid-glass-nav {
    top: 1rem;
    width: calc(100% - 1.5rem);
    padding: 0.75rem 1rem;
    border-radius: 18px;
  }

  .liquid-glass-nav::before {
    border-radius: 18px 18px 50% 50%;
  }

  .liquid-glass-nav .nav-links {
    display: none;
  }

  .liquid-glass-nav .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .liquid-glass-nav .nav-cta {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (min-width: 769px) {
  .liquid-glass-nav .mobile-menu-btn {
    display: none;
  }
}

/* Touch device - disable blob */
.liquid-glass-nav.touch-device .liquid-blob {
  display: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass-nav,
  .liquid-glass-nav .liquid-blob,
  .liquid-glass-nav .nav-link,
  .liquid-glass-nav .nav-cta,
  .liquid-glass-mobile-menu {
    transition: none !important;
    animation: none !important;
  }

  .liquid-glass-nav .liquid-blob {
    display: none;
  }
}

} /* End @layer components for liquid glass */

/* ---- AI report-card builder (rc-) ------------------------------------- */
/* Staggered entrance for builder sections. Delay set inline per section. */
@keyframes rc-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rc-reveal { animation: rc-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Indeterminate progress shimmer for the extraction stages card. */
@keyframes rc-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
.rc-shimmer-track { overflow: hidden; }
.rc-shimmer-bar {
  width: 40%;
  animation: rc-shimmer 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Soft pulse ring behind the active extraction stage icon. */
@keyframes rc-ping {
  0%   { transform: scale(1); opacity: 0.55; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}
.rc-ping { animation: rc-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .rc-reveal, .rc-shimmer-bar, .rc-ping { animation: none !important; }
  .rc-reveal { opacity: 1; transform: none; }
}

/* Infinite decorative Tailwind animations must not loop forever when the user
   asked for reduced motion (WCAG 2.2.2). Covers the active-term pulse dot
   (.animate-ping), skeleton loaders (.animate-pulse) and bounces. Functional
   spinners (.animate-spin) are left alone as progress feedback. Lives in the
   Tailwind build so it applies under both the app and minimal error layouts.
   (MT-024 / UI-R-08) */
@media (prefers-reduced-motion: reduce) {
  .animate-ping,
  .animate-pulse,
  .animate-bounce {
    animation: none !important;
  }
}
/*
 * Global styles for date inputs
 * Hide native date picker icon and provide consistent styling
 */

/* Hide the native date picker icon for date inputs that have the no-icon class */
.date-input-no-icon::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.date-input-no-icon::-webkit-inner-spin-button {
  display: none;
}

.date-input-no-icon {
  -moz-appearance: textfield;
}

/* Standard date input styling */
input[type="date"] {
  cursor: pointer;
}

/* Focus styles for date inputs */
input[type="date"]:focus {
  outline: none;
}
/*
 * Mushaf page rendering — the Hifz recitation modal's Mushaf tab.
 *
 * The engine (vendor/javascript/digitalkhatt-mushaf.js) builds the page out of
 * SVG glyph paths and plain divs and carries no styles of its own, so the
 * class names below are a contract with it: `.page`, `.line`, `.linesuran`,
 * `.innersura`, the tajweed colour classes, and `.ayah` / `.ayah-hit`. Renaming
 * one here without renaming it in tools/mushaf_engine/src/page_view.ts breaks
 * rendering silently.
 *
 * Picked up automatically by application.css's `require_tree .`.
 */

/* The page itself. Kept parchment-white in both themes: it is a document, and
 * a tinted or inverted mushaf page is not something a hifz teacher wants to
 * read from. The surrounding modal chrome carries the dark theme instead. */
.mushaf-page {
  line-height: 1.77em;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  isolation: isolate;
  /* Upstream draws each line into an SVG twice the line's height, which
     overflows the page box by design. Clipping it shears the ascenders off
     the first line and the descenders off the last. */
  overflow: visible;
  background-color: #fff;
  background-clip: content-box;
  white-space: nowrap;
  box-sizing: border-box;
  direction: rtl;
  border-radius: 0.5rem;
  /* outline, not border: the engine sizes lines against the page's own width,
     and with box-sizing:border-box a border would quietly take 2px out of
     every line's measured width. An outline draws the card edge without
     participating in the box at all. */
  outline: 1px solid rgb(229 231 235);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

.dark .mushaf-page {
  outline-color: rgb(75 85 99);
}

.mushaf-page .line {
  position: relative;
}

.mushaf-page .line:first-child {
  padding-top: 0.4em;
}

/* Sura heading lines: the surah's name as one calligraphic glyph from
 * surah_names.ttf, sitting inside the decorative frame the engine expects as a
 * background image. The engine sets the family and size per line (they scale
 * with the page); everything here is what the glyph needs to form at all. */
.mushaf-page .linesuran {
  text-align: center;
  background: url(/mushaf/v1/ayaframe.svg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: content-box;
  background-clip: content-box;
  box-sizing: content-box;
}

.mushaf-page .linesuran .innersura {
  position: relative;
  top: -0.15em;
}

.mushaf-page .linesuran .innersura-name {
  /* `surahNNN` becomes one glyph through a standard ligature, and Blink
     suppresses ligature formation whenever letter-spacing is not zero — an
     inherited tracking value anywhere above this would render the token as
     eight loose Latin letters instead of the name. */
  letter-spacing: normal;
  font-variant-ligatures: common-ligatures;
  /* The glyph is drawn on its em box; the -0.15em that centres the Arabic
     under the frame sits it too high. */
  top: 0;
}

/* Glyph paths default to black; tajweed overrides the fill per class. */
.mushaf-page svg path {
  fill: #000;
}

/* Tajweed colours, carried over from the engine's own stylesheet. */
.mushaf-page .green { fill: rgb(0 166 80); }
.mushaf-page .tafkim { fill: rgb(0 102 148); }
.mushaf-page .lgray { fill: rgb(180 180 180); }
.mushaf-page .lkalkala { fill: rgb(0 173 239); }
.mushaf-page .red1 { fill: rgb(195 138 8); }
.mushaf-page .red2 { fill: rgb(244 114 22); }
.mushaf-page .red3 { fill: rgb(236 0 140); }
.mushaf-page .red4 { fill: rgb(140 0 0); }

/* ── Selection ──────────────────────────────────────────────────────────────
 * One transparent rect per ayah, painted behind its glyphs. It is both the tap
 * target (so a tap need not land on ink) and the highlight. */
.mushaf-page .ayah-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
  transition: fill 120ms ease-out;
}

.mushaf-page .ayah:hover .ayah-hit {
  fill: rgb(59 130 246 / 0.08);
}

.mushaf-page .ayah.selected .ayah-hit {
  fill: rgb(59 130 246 / 0.18);
}

/* The first tap of a range reads as an anchor until the second lands. */
.mushaf-page .ayah.anchor .ayah-hit {
  fill: rgb(59 130 246 / 0.28);
}

.mushaf-page-wrap {
  display: flex;
  justify-content: center;
  min-height: 12rem;
  padding: 0.5rem 0;
}

/* The two elements the engine measures line widths against. They must be laid
 * out — visibility:hidden, never display:none — or every line measures zero
 * and the page renders as a pile of overlapping glyphs.
 *
 * Kept last on purpose: the justify element also carries .mushaf-page (it needs
 * the page's line metrics to measure against), and these rules have to win. */
.mushaf-measure {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: pre;
  pointer-events: none;
  top: 0;
  left: 0;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Move Bullet N+1 query warnings to top left */
div[style*="position: fixed"][style*="background-color: #fdf2f2"] {
  top: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  right: auto !important;
}

/* Animated dropdown menus — HARD RULE: every dropdown menu fades + scales in/out.
   The shared `dropdown` Stimulus controller adds `.dropdown-anim` (closed state)
   and toggles `.dropdown-open` (visible state); any custom dropdown/reveal can
   reuse the same two classes. See CLAUDE.md → Frontend conventions. */
.dropdown-anim {
  opacity: 0;
  transform: scale(0.96) translateY(-6px);
  transform-origin: top right;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.dropdown-anim.dropdown-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-anim { transition: none; }
}

/* Multi-school child pills (public enrollment form): the check mark inside the
   pill face renders only while the sibling sr-only checkbox is checked. The
   fill/border/text colors are Tailwind peer-checked utilities on .pill-face;
   this rule exists because peer-checked can only style siblings, never a
   sibling's DESCENDANTS — and the icon lives inside the face. */
.school-pill .pill-check { display: none; }
.school-pill input:checked + .pill-face .pill-check { display: inline; }

/* Thin, unobtrusive scrollbar for filter popover lists (Stripe/Linear feel). */
.af-scroll { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.5) transparent; }
.af-scroll::-webkit-scrollbar { width: 8px; }
.af-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.45); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
.af-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.6); border: 2px solid transparent; background-clip: padding-box; }
.af-scroll::-webkit-scrollbar-track { background: transparent; }

/* Fully hidden scrollbar for horizontally-swipeable chrome (e.g. the
   Attendance Command Center's mobile tab-pill rail) — the content still
   scrolls natively, it just doesn't show scrollbar chrome while doing it. */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   Typed-name signature fonts (consent / acknowledgement fields).

   Served from public/fonts rather than the asset pipeline: this app's sprockets
   manifest links images/stylesheets/JS but not fonts, and the main stylesheet is
   plain CSS (no ERB, no sass), so there is no asset-url helper available here.
   A static path is stable in dev and prod alike.

   These are the latin-ext woff2 SUBSETS (~80KB total). The full TTFs live in
   app/assets/fonts and are server-side only — Prawn embeds them when drawing a
   signature into an application PDF. Keys must stay in sync with
   EnrollmentFormField::SIGNATURE_STYLES.

   Fonts: Dancing Script, Great Vibes, Caveat — all SIL Open Font License 1.1.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "MTSignatureDancing";
  src: url(/fonts/DancingScript-SemiBold-latin-ext.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTSignatureVibes";
  src: url(/fonts/GreatVibes-Regular-latin-ext.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MTSignatureCaveat";
  src: url(/fonts/Caveat-SemiBold-latin-ext.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* The rendered signature. `cursive` is the last-resort fallback so a failed font
   load still reads as a signature rather than as body copy. */
.mt-signature { font-family: "MTSignatureDancing", cursive; line-height: 1.35; }
.mt-signature-dancing_script { font-family: "MTSignatureDancing", cursive; }
.mt-signature-great_vibes    { font-family: "MTSignatureVibes", cursive; }
.mt-signature-caveat         { font-family: "MTSignatureCaveat", cursive; }