/*
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's navigation progress bar. It was hidden app-wide (a61bc3b9, an
   incidental part of a gradebook search change), which left every slow
   navigation in the app with no feedback at all: the click looked ignored
   until the new page swapped in. Turbo only shows it after progressBarDelay
   (500ms), so a fast navigation never flashes it — it appears exactly when
   the user would otherwise start wondering. */
.turbo-progress-bar {
  height: 3px;
  background-color: #10b981; /* emerald-500 */
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* 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;
  }
}

/* The billing dashboard's invoices frame dims while a refresh is in flight —
   the search box submits on a debounce, so a slow answer should read as
   "working", not "ignored". Turbo sets [busy] on the frame for the duration. */
turbo-frame#billing_invoices[busy] {
  opacity: 0.55;
  transition: opacity 150ms ease-in-out;
}

/* Attendance Command Center: the same treatment for its two nested frames.
   Turbo sets [busy] the instant a frame navigation starts, so the click
   registers within a frame instead of leaving the old tab looking fully
   interactive for a whole round-trip. #center covers a tab pill or a
   Year/Term change; #center_tab an in-tab filter, pager or toggle — and
   because #center_tab nests inside #center, dimming the outer one already
   dims the inner, so a tab switch fades once, not twice. */
turbo-frame#center[busy],
turbo-frame#center_tab[busy] {
  opacity: 0.55;
  transition: opacity 150ms ease-in-out;
}

/* Any other tab set that swaps in a frame opts into the same dim by carrying
   data-tab-frame on its turbo-frame (e.g. infractions/_list_frame) — one rule
   instead of a new selector per page. See CLAUDE.md → "Tabs swap in a frame". */
turbo-frame[data-tab-frame][busy] {
  opacity: 0.55;
  transition: opacity 150ms ease-in-out;
}

/* Content arriving in either frame fades up rather than popping. The
   previous design had a fixed-height skeleton that never matched the real
   content (304px–2805px), so every navigation jolted the eye twice: once
   for the skeleton, once for the content replacing it. Now the old content
   simply dims in place and the new content fades in. */
@media (prefers-reduced-motion: no-preference) {
  turbo-frame#center_tab > * {
    animation: center-tab-fade-in 150ms ease-out;
  }
}

@keyframes center-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/*
 * 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;
}
/* Public product pages. Scoped so these editorial styles do not enter the app. */
.fp-page {
  --fp-ink: #142a36;
  --fp-muted: #5d6d74;
  --fp-accent: #2563eb;
  --fp-tint: #edf3fc;
  --fp-line: #dce4e6;
  color: var(--fp-ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fp-tone-teal {
  --fp-accent: #087c72;
  --fp-tint: #e8f3ef;
}
.fp-page * {
  box-sizing: border-box;
}
.fp-page a {
  text-decoration: none;
}
.fp-page a:focus-visible,
.fp-page summary:focus-visible {
  outline: 3px solid var(--fp-accent);
  outline-offset: 6px;
  border-radius: 4px;
}
.fp-shell {
  width: min(1240px, calc(100% - 96px));
  margin: 0 auto;
}
.fp-page h1,
.fp-page h2,
.fp-page h3,
.fp-page p,
.fp-page figure {
  margin: 0;
}
.fp-page h1 {
  font-size: clamp(42px, 4.6vw, 66px);
  line-height: 1.075;
  letter-spacing: -0.055em;
  font-weight: 600;
}
.fp-page h2 {
  font-size: clamp(30px, 3.2vw, 43px);
  line-height: 1.14;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-wrap: balance;
}
.fp-page h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
}
.fp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-accent);
}
.fp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 48px;
  padding: 13px 21px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition:
    background 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.fp-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #142a3612;
}
.fp-button-primary {
  background: #183c43;
  color: #fff;
}
.fp-button-primary:hover {
  background: #0c292f;
}
.fp-button-light {
  background: #f5f8ed;
  color: #183c43;
}
.fp-button-light:hover {
  background: #fff;
}
.fp-button-outline {
  border-color: #ffffff60;
  color: #fff;
  background: transparent;
}
.fp-button-outline:hover {
  background: #ffffff10;
}
.fp-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.fp-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-ink);
  line-height: 1.5;
}
.fp-text-link:hover {
  color: var(--fp-accent);
}
.fp-hero {
  background: #fafbf8;
  padding: 30px 0 0;
  overflow: hidden;
}
.fp-breadcrumb {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #68777c;
  font-size: 11px;
}
.fp-breadcrumb a {
  color: inherit;
}
.fp-breadcrumb a:hover {
  color: var(--fp-accent);
}
.fp-hero-heading {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  padding: 48px 0 42px;
}
.fp-feature-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fp-line);
  border-radius: 7px;
  background: white;
  font-size: 12px;
}
.fp-hero h1 {
  margin-top: 20px;
}
.fp-hero h1 span {
  color: var(--fp-accent);
}
.fp-hero-intro {
  padding-bottom: 3px;
}
.fp-hero-intro > p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--fp-muted);
  max-width: 420px;
}
.fp-hero-intro .fp-actions {
  margin-top: 25px;
}
.fp-hero-stage {
  position: relative;
  padding: 18px 50px 0;
  border: 1px solid #d5e3de;
  border-radius: 12px 12px 0 0;
  background-color: #e7eee8;
  background-image:
    linear-gradient(#ffffff45 1px, transparent 1px),
    linear-gradient(90deg, #ffffff45 1px, transparent 1px);
  background-size: 44px 44px;
}
.fp-stage-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #47645b;
}
.fp-stage-label > span:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}
.fp-stage-label > span:last-child {
  letter-spacing: 0;
  font-size: 11px;
}
.fp-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #087c72;
  box-shadow: 0 0 0 3px #087c7212;
}
.fp-product-shot {
  min-width: 0;
}
.fp-shot-link {
  display: block;
  position: relative;
  background: white;
  border: 1px solid #192c3518;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 12px 34px #17362f0d;
}
.fp-product-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s;
}
.fp-hero-stage .fp-shot-link {
  height: 465px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 10px 40px #193c3820;
}
.fp-hero-stage .fp-product-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.fp-hero-stage .fp-product-shot figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 35px 20px 13px;
  justify-content: center;
  color: #243f39;
  background: linear-gradient(transparent, #e7eee8 68%);
  font-size: 10px;
  pointer-events: none;
}
.fp-enlarge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #e1e8e9;
  border-radius: 6px;
  background: #fffffff5;
  color: #28464a;
  font-size: 10px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.fp-shot-link:hover .fp-enlarge,
.fp-shot-link:focus-visible .fp-enlarge {
  opacity: 1;
  transform: translateY(0);
}
.fp-product-shot figcaption {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 10px;
  line-height: 1.65;
  color: #647879;
  margin-top: 12px;
}
.fp-caption-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #82958a;
  flex-shrink: 0;
  margin-top: 6px;
}
.fp-highlights {
  margin: 0;
  padding: 25px 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 60px;
  font-size: 12px;
  color: #4d6263;
}
.fp-highlights li {
  display: flex;
  gap: 9px;
  align-items: center;
}
.fp-highlights li > span {
  color: #087c72;
}
.fp-section-nav {
  position: sticky;
  top: 64px;
  z-index: 30;
  border-block: 1px solid var(--fp-line);
  background: #ffffffed;
  backdrop-filter: blur(15px);
}
.fp-section-nav-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 58px;
}
.fp-section-nav-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.fp-section-links {
  display: flex;
  gap: 26px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 19px 3px;
}
.fp-section-links::-webkit-scrollbar {
  display: none;
}
.fp-section-links a {
  white-space: nowrap;
  font-size: 11px;
  color: #607177;
  transition: color 0.18s;
}
.fp-section-links a:hover {
  color: var(--fp-accent);
}
.fp-stories {
  padding: 10px 0 30px;
}
.fp-story {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 65px;
  align-items: center;
  padding: 88px 0;
  border-bottom: 1px solid var(--fp-line);
  scroll-margin-top: 155px;
}
.fp-story:last-child {
  border-bottom: 0;
}
.fp-story-reverse {
  grid-template-columns: 1.15fr 0.85fr;
}
.fp-story-reverse .fp-story-copy {
  order: 2;
}
.fp-story-reverse .fp-story-visual {
  order: 1;
}
.fp-section-number {
  font-variant-numeric: tabular-nums;
  color: #95a29f;
  font-size: 10px;
  letter-spacing: 0;
  padding-right: 10px;
  border-right: 1px solid #d6e2dd;
}
.fp-story h2 {
  margin-top: 18px;
}
.fp-story-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--fp-muted);
  margin-top: 22px !important;
}
.fp-story-points {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.fp-story-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #425a60;
  font-size: 12px;
  line-height: 1.85;
  margin-top: 12px;
}
.fp-story-points li > span {
  color: var(--fp-accent);
  font-size: 12px;
  flex-shrink: 0;
}
.fp-story-visual {
  min-width: 0;
  padding: 24px;
  border-radius: 10px;
  background: var(--fp-tint);
  border: 1px solid #1d524b0a;
}
.fp-story-visual .fp-shot-link {
  max-height: 510px;
}
.fp-story-visual img {
  max-height: 510px;
  object-fit: cover;
  object-position: top;
}
.fp-mobile-section {
  position: relative;
  background: #123c38;
  color: #fff;
  overflow: hidden;
  margin-top: 15px;
}
.fp-mobile-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  padding: 80px 0 0;
}
.fp-mobile-copy {
  padding-bottom: 80px;
}
.fp-mobile-copy .fp-eyebrow {
  color: #a0d1be;
}
.fp-mobile-copy h2 {
  margin-top: 25px;
  font-size: clamp(35px, 3.5vw, 49px);
}
.fp-mobile-copy > p:not(.fp-eyebrow) {
  font-size: 15px;
  line-height: 1.85;
  color: #bad0c7;
  margin-top: 24px;
}
.fp-mobile-copy .fp-story-points li {
  color: #d2e1da;
}
.fp-mobile-copy .fp-story-points li > span {
  color: #b5d9a5;
}
.fp-platforms {
  display: flex;
  gap: 12px;
  margin-top: 35px;
}
.fp-platforms > span {
  display: flex;
  gap: 9px;
  align-items: center;
  border: 1px solid #ffffff29;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 11px;
}
.fp-platforms i {
  font-size: 17px;
}
.fp-mobile-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
  padding-top: 0;
}
.fp-mobile-ring {
  position: absolute;
  width: 540px;
  height: 540px;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #b7d8aa28;
  border-radius: 50%;
  box-shadow:
    0 0 0 60px #b7d8aa06,
    0 0 0 120px #b7d8aa04;
}
.fp-phone {
  position: relative;
  display: block;
  width: 270px;
  border: 7px solid #233d38;
  outline: 1px solid #ffffff50;
  border-radius: 39px;
  box-shadow: 0 25px 65px #001a1860;
  overflow: hidden;
  transform: rotate(3deg);
  background: white;
}
.fp-phone img {
  width: 100%;
  height: auto;
  display: block;
}
.fp-mobile-visual figcaption {
  font-size: 10px;
  color: #b6d0c1;
  margin: 22px 0 24px;
  position: relative;
  text-align: center;
}
.fp-details {
  padding: 100px 0;
}
.fp-details > h2 {
  margin-top: 18px;
}
.fp-details > h2 > span {
  color: #789086;
}
.fp-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  margin-top: 45px;
}
.fp-detail-grid article {
  border-top: 1px solid #dce4e0;
  padding-top: 22px;
}
.fp-detail-mark {
  display: block;
  font-size: 10px;
  color: #81958b;
  margin-bottom: 25px;
}
.fp-detail-grid h3 {
  font-size: 16px;
}
.fp-detail-grid p {
  color: var(--fp-muted);
  font-size: 12px;
  line-height: 1.8;
  margin-top: 10px;
}
.fp-faq {
  border-top: 1px solid var(--fp-line);
  padding: 80px 0 100px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  scroll-margin-top: 150px;
}
.fp-faq h2 {
  margin-top: 18px;
}
.fp-faq > div > p:not(.fp-eyebrow) {
  color: var(--fp-muted);
  font-size: 13px;
  line-height: 1.8;
  margin: 22px 0 12px;
}
.fp-faq details {
  border-bottom: 1px solid var(--fp-line);
}
.fp-faq summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  padding: 24px 0;
  line-height: 1.6;
}
.fp-faq summary::-webkit-details-marker {
  display: none;
}
.fp-faq summary > span {
  font-size: 22px;
  font-weight: 300;
  color: #758b83;
  transition: transform 0.2s;
}
.fp-faq details[open] summary > span {
  transform: rotate(45deg);
}
.fp-faq details > p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--fp-muted);
  padding: 0 25px 25px 0;
  animation: fp-answer-in 0.2s ease;
}
@keyframes fp-answer-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fp-related-section {
  background: #f7f9f5;
  padding: 65px 0 75px;
  border-top: 1px solid #e4e9e0;
}
.fp-related-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
}
.fp-related-heading h2 {
  margin-top: 15px;
}
.fp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 35px;
}
.fp-related-card {
  display: block;
  background: #fff;
  border: 1px solid #dfe6de;
  border-radius: 8px;
  padding: 27px;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.fp-related-card:hover {
  transform: translateY(-4px);
  border-color: #92b3a4;
}
.fp-related-card > i {
  font-size: 19px;
  color: #356c60;
}
.fp-related-card h3 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  margin: 25px 0 11px;
}
.fp-related-card h3 span {
  font-weight: 400;
  color: #749185;
}
.fp-related-card p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--fp-muted);
}
.fp-cta {
  position: relative;
  background: #153a34;
  padding: 90px 0;
  overflow: hidden;
  color: #fff;
}
.fp-cta-inner {
  position: relative;
  text-align: center;
}
.fp-cta .fp-eyebrow {
  justify-content: center;
  color: #aec7a7;
}
.fp-cta h2 {
  font-size: clamp(34px, 4vw, 53px);
  margin: 20px auto;
  line-height: 1.16;
}
.fp-cta-inner > p:not(.fp-eyebrow) {
  font-size: 14px;
  color: #bacdc2;
}
.fp-cta .fp-actions {
  justify-content: center;
  margin-top: 28px;
}
.fp-cta-note {
  display: block;
  color: #9ab6a7;
  font-size: 10px;
  margin-top: 25px;
}
.fp-cta-orbit {
  position: absolute;
  width: 750px;
  height: 750px;
  border: 1px solid #bdd4a912;
  border-radius: 50%;
  right: -450px;
  top: -120px;
  box-shadow:
    0 0 0 85px #bdd4a905,
    0 0 0 170px #bdd4a905;
}
.fp-overview {
  background: #fcfcf9;
}
.fp-overview-hero {
  padding: 80px 0 0;
}
.fp-overview-hero h1 {
  font-size: clamp(44px, 5.3vw, 75px);
  margin-top: 22px;
  line-height: 1.07;
}
.fp-overview-hero h1 > span {
  color: #087c72;
}
.fp-overview-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 30px;
}
.fp-overview-intro > p {
  color: var(--fp-muted);
  font-size: 15px;
  line-height: 1.9;
}
.fp-category-nav {
  display: flex;
  gap: 35px;
  padding: 27px 0;
  margin-top: 55px;
  border-block: 1px solid var(--fp-line);
}
.fp-category-nav a {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 12px;
  color: #456057;
}
.fp-category-nav a:hover {
  color: #087c72;
}
.fp-category-nav a > span {
  color: #90a399;
}
.fp-featured {
  padding: 55px 0 0;
}
.fp-collection-heading h2 {
  margin: 14px 0 12px;
}
.fp-collection-heading > p:not(.fp-eyebrow) {
  color: var(--fp-muted);
  font-size: 14px;
  line-height: 1.8;
}
.fp-featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 30px;
}
.fp-featured-card {
  border: 1px solid #d9e3dc;
  border-radius: 12px;
  background: #eef3ee;
  overflow: hidden;
  scroll-margin-top: 90px;
}
.fp-featured-card:nth-child(2) {
  background: #e6f0e9;
}
.fp-featured-card:nth-child(3) {
  background: #edf1f7;
}
.fp-featured-card:nth-child(4) {
  background: #f0f1e6;
}
.fp-featured-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--fp-ink);
}
.fp-featured-copy {
  padding: 34px 35px 25px;
}
.fp-featured-copy h3 {
  font-size: 32px;
  line-height: 1.15;
  margin: 18px 0 13px;
  letter-spacing: -0.045em;
}
.fp-featured-copy h3 > span {
  color: var(--fp-accent);
}
.fp-featured-copy > p:not(.fp-eyebrow) {
  font-size: 13px;
  line-height: 1.8;
  color: var(--fp-muted);
  max-width: 420px;
}
.fp-card-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 21px;
  color: #294d43;
}
.fp-card-link > span {
  transition: transform 0.2s;
}
.fp-featured-link:hover .fp-card-link > span,
.fp-directory-card a:hover .fp-card-link > span {
  transform: translateX(4px);
}
.fp-featured-image {
  height: 255px;
  margin: 0 0 0 35px;
  overflow: hidden;
  border: 1px solid #243c431a;
  border-radius: 8px 0 0 0;
  box-shadow: 0 8px 30px #183c4310;
  background: white;
  transition: transform 0.3s;
  transform-origin: bottom right;
  margin-top: auto;
}
.fp-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.fp-featured-link:hover .fp-featured-image {
  transform: translateY(-3px);
}
.fp-collection {
  padding-top: 90px;
  scroll-margin-top: 90px;
}
.fp-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.fp-directory-card {
  border: 1px solid var(--fp-line);
  border-radius: 8px;
  background: white;
  scroll-margin-top: 90px;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.fp-directory-card:hover {
  border-color: #94b8a8;
  box-shadow: 0 8px 24px #153a3408;
}
.fp-directory-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 27px;
  color: var(--fp-ink);
}
.fp-directory-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: #eef5ee;
  border: 1px solid #deeadc;
  border-radius: 8px;
  color: #397365;
  font-size: 15px;
}
.fp-directory-card h3 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 0 11px;
  font-size: 17px;
}
.fp-directory-card h3 > span {
  font-weight: 400;
  color: #8da299;
}
.fp-directory-card p {
  font-size: 12px;
  color: var(--fp-muted);
  line-height: 1.85;
  flex: 1;
}
.fp-autopilot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  border-radius: 10px;
  background: #172a2e;
  color: white;
  margin: 65px 0 85px;
  padding: 38px 42px;
}
.fp-autopilot .fp-eyebrow {
  color: #9eb8a7;
}
.fp-autopilot h2 {
  font-size: 30px;
  margin: 12px 0;
}
.fp-autopilot p:not(.fp-eyebrow) {
  color: #b8c7c4;
  font-size: 13px;
  line-height: 1.8;
}
@media (min-width: 1600px) {
  .fp-hero-stage .fp-shot-link {
    height: 510px;
  }
}
@media (max-width: 1100px) {
  .fp-shell {
    width: calc(100% - 64px);
  }
  .fp-hero-heading {
    gap: 35px;
    grid-template-columns: 1.15fr 1fr;
  }
  .fp-page h1 {
    font-size: 48px;
  }
  .fp-story {
    gap: 35px;
    padding: 65px 0;
  }
  .fp-story-visual {
    padding: 16px;
  }
  .fp-highlights {
    gap: 28px;
  }
  .fp-section-nav-name {
    display: none;
  }
  .fp-section-nav-inner {
    gap: 0;
  }
  .fp-section-links {
    gap: 24px;
  }
  .fp-mobile-inner {
    gap: 45px;
  }
  .fp-detail-grid {
    gap: 20px;
  }
  .fp-faq {
    gap: 40px;
  }
  .fp-featured-copy {
    padding: 27px;
  }
  .fp-featured-copy h3 {
    font-size: 28px;
  }
  .fp-featured-image {
    margin-left: 27px;
    height: 210px;
  }
}
@media (max-width: 760px) {
  .fp-shell {
    width: calc(100% - 40px);
  }
  .fp-hero {
    padding-top: 24px;
  }
  .fp-hero-heading {
    display: block;
    padding: 35px 0 30px;
  }
  .fp-page h1 {
    font-size: clamp(37px, 7.7vw, 55px);
    letter-spacing: -0.05em;
  }
  .fp-hero h1 {
    margin-top: 18px;
  }
  .fp-hero-intro {
    margin-top: 24px;
  }
  .fp-hero-intro > p {
    font-size: 14px;
    max-width: 580px;
  }
  .fp-hero-intro .fp-actions {
    margin-top: 22px;
  }
  .fp-actions {
    gap: 18px;
  }
  .fp-hero-stage {
    padding: 12px 14px 0;
  }
  .fp-stage-label {
    font-size: 8px;
    margin-bottom: 12px;
  }
  .fp-stage-label > span:last-child {
    font-size: 9px;
  }
  .fp-hero-stage .fp-shot-link {
    height: 280px;
  }
  .fp-hero-stage .fp-product-shot img {
    min-width: 620px;
    object-fit: cover;
    object-position: top left;
  }
  .fp-hero-stage .fp-product-shot figcaption {
    font-size: 8px;
    padding: 25px 10px 9px;
  }
  .fp-highlights {
    justify-content: flex-start;
    gap: 9px;
    flex-wrap: wrap;
    padding: 18px 0;
    font-size: 10px;
  }
  .fp-highlights li {
    gap: 5px;
    margin-right: 12px;
  }
  .fp-section-nav {
    top: 64px;
  }
  .fp-section-nav-inner {
    min-height: 50px;
  }
  .fp-section-links {
    padding: 16px 2px;
    gap: 22px;
  }
  .fp-section-links a {
    font-size: 10px;
  }
  .fp-story,
  .fp-story-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 0;
  }
  .fp-story-reverse .fp-story-copy,
  .fp-story-reverse .fp-story-visual {
    order: initial;
  }
  .fp-page h2 {
    font-size: 33px;
  }
  .fp-story-text {
    font-size: 14px;
    margin-top: 18px !important;
  }
  .fp-story-points li {
    font-size: 12px;
    margin-top: 10px;
  }
  .fp-story-visual {
    padding: 15px;
  }
  .fp-story-visual img,
  .fp-story-visual .fp-shot-link {
    max-height: 380px;
  }
  .fp-product-shot figcaption {
    font-size: 9px;
  }
  .fp-enlarge {
    opacity: 1;
    transform: none;
    font-size: 8px;
    padding: 6px 8px;
  }
  .fp-mobile-inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 48px;
  }
  .fp-mobile-copy {
    padding-bottom: 25px;
  }
  .fp-mobile-copy h2 {
    font-size: 36px;
  }
  .fp-mobile-copy > p:not(.fp-eyebrow) {
    font-size: 14px;
  }
  .fp-mobile-visual {
    width: 100%;
    padding-top: 20px;
  }
  .fp-phone {
    width: 240px;
  }
  .fp-mobile-ring {
    width: 420px;
    height: 420px;
  }
  .fp-details {
    padding: 60px 0;
  }
  .fp-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px 20px;
    margin-top: 30px;
  }
  .fp-detail-mark {
    margin-bottom: 18px;
  }
  .fp-detail-grid h3 {
    font-size: 15px;
  }
  .fp-faq {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 50px 0 60px;
  }
  .fp-faq summary {
    font-size: 13px;
    padding: 20px 0;
  }
  .fp-related-section {
    padding: 45px 0;
  }
  .fp-related-heading {
    align-items: start;
    flex-direction: column;
    gap: 17px;
  }
  .fp-related-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 25px;
  }
  .fp-related-card {
    padding: 24px;
  }
  .fp-related-card h3 {
    margin: 18px 0 8px;
  }
  .fp-cta {
    padding: 60px 0;
  }
  .fp-cta h2 {
    font-size: 36px;
  }
  .fp-cta-inner > p:not(.fp-eyebrow) {
    font-size: 13px;
    line-height: 1.8;
  }
  .fp-cta .fp-actions {
    gap: 12px;
  }
  .fp-cta-note {
    line-height: 1.8;
  }
  .fp-overview-hero {
    padding-top: 48px;
  }
  .fp-overview-hero h1 {
    font-size: clamp(36px, 8vw, 56px);
  }
  .fp-overview-intro {
    flex-direction: column;
    align-items: start;
    gap: 24px;
    margin-top: 24px;
  }
  .fp-overview-intro > p {
    font-size: 14px;
  }
  .fp-desktop-break {
    display: none;
  }
  .fp-category-nav {
    gap: 24px;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 34px;
    padding: 20px 0;
  }
  .fp-category-nav a {
    gap: 12px;
    font-size: 11px;
  }
  .fp-featured {
    padding-top: 36px;
  }
  .fp-featured-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .fp-featured-copy {
    padding: 27px;
  }
  .fp-featured-copy h3 {
    font-size: 30px;
  }
  .fp-featured-image {
    height: 240px;
  }
  .fp-collection {
    padding-top: 55px;
  }
  .fp-directory-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 23px;
  }
  .fp-directory-card > a {
    padding: 25px;
  }
  .fp-directory-card h3 {
    margin-top: 18px;
  }
  .fp-autopilot {
    flex-direction: column;
    align-items: start;
    gap: 23px;
    margin: 40px 0 55px;
    padding: 28px;
  }
  .fp-collection-heading h2 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-page *,
  .fp-page *::before,
  .fp-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .fp-phone {
    transform: none;
  }
}
/* Keep horizontal section navigation comfortably tappable and product images
   fully recognizable on a phone. Each image also opens at its original size. */
.fp-text-link {
  min-height: 44px;
}
.fp-section-links {
  padding-block: 0;
}
.fp-section-links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 0;
}
@media (max-width: 760px) {
  .fp-hero-stage .fp-shot-link {
    height: auto;
    aspect-ratio: 1.5;
  }
  .fp-hero-stage .fp-product-shot img {
    min-width: 0;
    object-position: top;
    object-fit: cover;
  }
  .fp-section-links {
    padding-block: 0;
  }
  .fp-section-links a {
    min-height: 50px;
    padding: 15px 0;
    font-size: 11px;
  }
  .fp-story-text,
  .fp-hero-intro > p,
  .fp-mobile-copy > p:not(.fp-eyebrow) {
    font-size: 15px;
  }
  .fp-story-points li,
  .fp-detail-grid p,
  .fp-directory-card p,
  .fp-related-card p,
  .fp-faq details > p {
    font-size: 13px;
  }
  .fp-faq summary {
    font-size: 14px;
    min-height: 64px;
  }
  .fp-category-nav {
    padding-block: 0;
  }
  .fp-category-nav a {
    min-height: 52px;
  }
}
/* Homepage design-system alignment.
   The feature pages keep their editorial structure and real product imagery,
   while sharing the landing page's Geist type, blue accent, neutral surfaces,
   rounded cards and restrained shadows. */
.fp-page,
.fp-tone-teal {
  --fp-ink: #0a0a0a;
  --fp-muted: #6b7280;
  --fp-accent: #2563eb;
  --fp-accent-hover: #1d4ed8;
  --fp-tint: #eff6ff;
  --fp-line: #e5e7eb;
}
.fp-page {
  font-family:
    "Geist",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--fp-ink);
}
.fp-shell {
  width: min(1280px, calc(100% - 64px));
}
.fp-page h1,
.fp-page h2,
.fp-page h3 {
  letter-spacing: -0.025em;
}
.fp-page h1,
.fp-page h2 {
  font-weight: 700;
}
.fp-page h3 {
  font-weight: 600;
}
.fp-eyebrow {
  display: inline-flex;
  width: fit-content;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.fp-feature-icon {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
}
.fp-button {
  min-height: 44px;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.fp-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgb(37 99 235 / 0.45);
}
.fp-button-primary {
  background: #2563eb;
  color: #fff;
}
.fp-button-primary:hover {
  background: #1d4ed8;
}
.fp-text-link,
.fp-card-link {
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}
.fp-breadcrumb {
  color: #6b7280;
  font-size: 12px;
}
.fp-hero {
  padding-top: 36px;
  background: #fff;
}
.fp-hero-heading {
  padding: 56px 0 48px;
}
.fp-hero h1 span,
.fp-overview-hero h1 > span,
.fp-featured-copy h3 > span {
  color: #2563eb;
}
.fp-hero-intro > p,
.fp-overview-intro > p {
  color: #6b7280;
  line-height: 1.75;
}
.fp-hero-stage {
  padding: 20px 52px 0;
  border: 1px solid #e5e7eb;
  border-radius: 16px 16px 0 0;
  background: #f3f4f6;
  background-image:
    radial-gradient(circle at 18% 18%, rgb(37 99 235 / 0.08), transparent 30%),
    radial-gradient(circle at 82% 72%, rgb(96 165 250 / 0.09), transparent 32%);
}
.fp-stage-label {
  color: #6b7280;
  font-weight: 500;
}
.fp-live-dot {
  background: #2563eb;
  box-shadow: 0 0 0 4px rgb(37 99 235 / 0.1);
}
.fp-shot-link {
  border-color: #e5e7eb;
  border-radius: 10px;
  box-shadow:
    0 8px 40px -8px rgb(0 0 0 / 0.18),
    0 2px 8px -2px rgb(0 0 0 / 0.06);
}
.fp-hero-stage .fp-shot-link {
  border-radius: 10px 10px 0 0;
  box-shadow:
    0 8px 40px -8px rgb(0 0 0 / 0.18),
    0 2px 8px -2px rgb(0 0 0 / 0.06);
}
.fp-hero-stage .fp-product-shot figcaption {
  color: #4b5563;
  background: linear-gradient(transparent, #f3f4f6 70%);
}
.fp-enlarge {
  border-color: #e5e7eb;
  border-radius: 8px;
  color: #374151;
}
.fp-product-shot figcaption {
  color: #6b7280;
}
.fp-caption-dot {
  background: #60a5fa;
}
.fp-highlights {
  color: #4b5563;
}
.fp-highlights li > span,
.fp-story-points li > span {
  color: #2563eb;
}
.fp-section-nav {
  border-color: #e5e7eb;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.025);
}
.fp-section-nav-name {
  color: #111827;
}
.fp-section-links a {
  color: #6b7280;
  font-weight: 500;
}
.fp-story {
  border-color: #e5e7eb;
}
.fp-section-number {
  border-color: #bfdbfe;
  color: #60a5fa;
}
.fp-story-text,
.fp-story-points li {
  color: #6b7280;
}
.fp-story-visual {
  padding: 24px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #eff6ff;
}
.fp-mobile-section {
  margin-top: 16px;
  background: #111827;
}
.fp-mobile-copy .fp-eyebrow,
.fp-autopilot .fp-eyebrow {
  border-color: rgb(96 165 250 / 0.28);
  background: rgb(37 99 235 / 0.14);
  color: #60a5fa;
}
.fp-mobile-copy > p:not(.fp-eyebrow),
.fp-autopilot p:not(.fp-eyebrow) {
  color: #d1d5db;
}
.fp-mobile-copy .fp-story-points li {
  color: #e5e7eb;
}
.fp-mobile-copy .fp-story-points li > span {
  color: #60a5fa;
}
.fp-platforms > span {
  padding: 10px 15px;
  border-color: rgb(255 255 255 / 0.18);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
}
.fp-mobile-ring {
  border-color: rgb(96 165 250 / 0.16);
  box-shadow:
    0 0 0 60px rgb(37 99 235 / 0.04),
    0 0 0 120px rgb(37 99 235 / 0.025);
}
.fp-phone {
  border: 9px solid #111827;
  outline-color: rgb(255 255 255 / 0.28);
  border-radius: 40px;
  box-shadow: 0 25px 70px rgb(0 0 0 / 0.48);
}
.fp-mobile-visual figcaption {
  color: #9ca3af;
}
.fp-details > h2 > span {
  color: #2563eb;
}
.fp-detail-grid {
  gap: 18px;
}
.fp-detail-grid article {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
}
.fp-detail-mark {
  margin-bottom: 24px;
  color: #60a5fa;
}
.fp-detail-grid p {
  color: #6b7280;
  font-size: 13px;
}
.fp-faq,
.fp-faq details {
  border-color: #e5e7eb;
}
.fp-faq summary {
  color: #111827;
  font-weight: 600;
}
.fp-faq summary > span {
  color: #2563eb;
}
.fp-related-section {
  border-color: #e5e7eb;
  background: #f9fafb;
}
.fp-related-card {
  padding: 28px;
  border-color: #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.025);
}
.fp-related-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.13);
}
.fp-related-card > i,
.fp-related-card h3 span {
  color: #2563eb;
}
.fp-cta {
  border-top: 1px solid #e5e7eb;
  background:
    radial-gradient(circle at 50% 120%, rgb(37 99 235 / 0.11), transparent 42%),
    #fff;
  color: #0a0a0a;
}
.fp-cta .fp-eyebrow {
  margin-inline: auto;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}
.fp-cta-inner > p:not(.fp-eyebrow),
.fp-cta-note {
  color: #6b7280;
}
.fp-cta .fp-button-light {
  background: #2563eb;
  color: #fff;
}
.fp-cta .fp-button-light:hover {
  background: #1d4ed8;
}
.fp-cta .fp-button-outline {
  border-color: #d1d5db;
  background: #fff;
  color: #374151;
}
.fp-cta .fp-button-outline:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.fp-cta-orbit {
  border-color: rgb(37 99 235 / 0.08);
  box-shadow:
    0 0 0 85px rgb(37 99 235 / 0.025),
    0 0 0 170px rgb(37 99 235 / 0.018);
}
.fp-overview {
  background: #fff;
}
.fp-category-nav {
  border-color: #e5e7eb;
}
.fp-category-nav a {
  color: #4b5563;
  font-weight: 500;
}
.fp-category-nav a:hover,
.fp-category-nav a > span {
  color: #2563eb;
}
.fp-featured-card {
  border-color: #e5e7eb;
  border-radius: 16px;
  background: #f9fafb;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.025);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}
.fp-featured-card:nth-child(2) {
  background: #eff6ff;
}
.fp-featured-card:nth-child(3),
.fp-featured-card:nth-child(4) {
  background: #f9fafb;
}
.fp-featured-card:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.13);
}
.fp-featured-copy h3 {
  letter-spacing: -0.025em;
  font-weight: 700;
}
.fp-featured-image {
  border-color: #e5e7eb;
  border-radius: 10px 0 0;
  box-shadow:
    0 8px 40px -8px rgb(0 0 0 / 0.16),
    0 2px 8px -2px rgb(0 0 0 / 0.05);
}
.fp-directory-card {
  border-color: #e5e7eb;
  border-radius: 16px;
}
.fp-directory-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.13);
}
.fp-directory-icon {
  width: 38px;
  height: 38px;
  border-color: #dbeafe;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}
.fp-directory-card h3 > span {
  color: #2563eb;
}
.fp-autopilot {
  border-radius: 16px;
  background: #111827;
}

@media (max-width: 760px) {
  .fp-shell {
    width: calc(100% - 32px);
  }
  .fp-hero-stage {
    padding: 12px 12px 0;
    border-radius: 14px 14px 0 0;
  }
  .fp-page h1 {
    letter-spacing: -0.03em;
  }
  .fp-story-visual {
    padding: 12px;
    border-radius: 14px;
  }
  .fp-detail-grid {
    gap: 12px;
  }
  .fp-detail-grid article {
    padding: 20px;
    border-radius: 14px;
  }
  .fp-featured-card,
  .fp-directory-card,
  .fp-related-card,
  .fp-autopilot {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-page *,
  .fp-page *::before,
  .fp-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .fp-phone {
    transform: 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; }
}

/* Collapsed class cards (level page, class_card_collapse controller): with the
   students section hidden, the card header's border-b would double up against
   the card's own border — fade it out while collapsed. */
.card-collapsed .class-card-header {
  border-bottom-color: transparent;
}

/* 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; }

/* AI import — account-creation progress.
   Progress only reaches the browser between batches, so a purely server-driven
   bar sits perfectly still while a batch runs and reads as frozen. Both of
   these animate client-side, which is what makes the screen look alive between
   updates rather than stuck. */
@keyframes mt-import-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(500%); }
}

/* Before the first batch lands there is no honest percentage to show, so the
   bar sweeps instead of claiming a number it does not have. */
.mt-import-progress-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, #10b981, #14b8a6, transparent);
  animation: mt-import-sweep 1.4s ease-in-out infinite;
}

@keyframes mt-import-stripes {
  from { background-position: 0 0; }
  to   { background-position: 1.5rem 0; }
}

/* Once there is a real percentage the bar fills to it and the stripes keep
   moving, so a long batch still reads as work in progress. Background is set
   here rather than with a Tailwind gradient class — both set background-image
   and would otherwise fight. */
.mt-import-progress-bar {
  background-color: #10b981;
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, 0.25) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
  background-size: 1.5rem 1.5rem;
  animation: mt-import-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mt-import-progress-sweep,
  .mt-import-progress-bar { animation: none; }
}

/* The logged-in app shell: a viewport-tall <body> that never scrolls; pages
   scroll inside #main-content (layouts/application.html.erb).

   This used to be Tailwind's `overflow-hidden` on <body> — the same class ~40
   modal, drawer and viewer scripts add to <body> on open and REMOVE on close.
   Each removal stripped the layout's own lock for the rest of the visit, and
   the whole document then scrolled past the page. The file viewer does it on
   every turbo:before-cache, which an advancing frame fires too, so ONE filter
   click on Communications was enough. A full page visit hid it by swapping in
   a fresh <body>; a frame visit does not.

   A class no modal touches, and !important so an inline
   `body.style.overflow = 'auto'` (modals.js) cannot undo it either. Modals are
   fixed-position and scroll themselves, so they never needed the body lock. */
.app-shell {
  overflow: hidden !important;
/* ──────────────────────────────────────────────────────────────────────────
   Mobile web (phones). This file loads AFTER tailwind.css, so a plain rule
   here beats a Tailwind utility of equal specificity. That matters because
   app/assets/builds/tailwind.css is prebuilt and gitignored: a utility the
   repo has never used before emits no rule at all, so anything structural
   for mobile is written here rather than as a new Tailwind class.
   ────────────────────────────────────────────────────────────────────────── */

/* Safe areas. The app layout now ships viewport-fit=cover so that the
   env(safe-area-inset-*) padding already present on 14 fixed bottom bars
   actually resolves. The flip side of viewport-fit=cover is that content may
   also slide UNDER the status bar / notch and into the landscape ear, so the
   fixed chrome has to claim those insets back. Every value carries a 0px
   fallback: without one, a browser that does not understand env() drops the
   whole calc() and the padding disappears entirely. */
header.mt-topbar {
  height: calc(3.5rem + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: calc(0.75rem + env(safe-area-inset-left, 0px));
  padding-right: calc(0.75rem + env(safe-area-inset-right, 0px));
}
#main-content {
  padding-top: calc(5rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}
@media (min-width: 1024px) {
  #main-content {
    padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
  }
}
#mobile-menu-button { top: calc(1rem + env(safe-area-inset-top, 0px)); }
#sidebar { padding-top: env(safe-area-inset-top, 0px); }

/* The breadcrumb is a per-tab JOURNEY (breadcrumb_trail_controller.js), not a
   hierarchy, and each crumb is capped at max-w-[12rem]. On a phone that makes
   every crumb an ellipsis — "… › Submissi… › Submissi… › Dashbo…" — costing a
   full row and saying nothing, while implying false parentage between records.
   Hidden below md; the pages that show it all carry a back arrow beside the
   title. Targeted by attribute, not by a utility class, because render() calls
   classList.toggle("hidden", …) on this element and would fight a class. */
@media (max-width: 767px) {
  nav[aria-label="Breadcrumb"] { display: none; }
}

/* Top bar on phones. The row has to hold: hamburger spacer, school logo +
   name + caret, search, and the year/term chip. Everything except the school
   name is fixed-size, so the name is what gets squeezed — it was rendering at
   32px of the 154px it needs ("Al-…"). Tightening the chrome's own padding
   here (rather than adding Tailwind classes that are not in the prebuilt
   stylesheet) hands that space back to the name. */
@media (max-width: 639px) {
  header.mt-topbar { gap: 0.375rem; }
  header.mt-topbar #termPickerContainer > button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0.375rem;
  }
}

/* Page headers on phones.
   There is no shared page-header partial in this app: a dozen index views each
   hand-roll `flex items-center justify-between` with a title block on the left
   and three or four buttons on the right, and none of them carry a single
   responsive class. At 393px that pushes the buttons off the right edge — the
   Classes header hid 264px of itself, and on the class page the "Collapse All"
   button rendered on top of the word "Fiqh".
   Tagging those two elements (.mt-page-head / .mt-page-actions) and handling
   the wrap here keeps the change to one class per view instead of restructuring
   every template, and it cannot introduce a Tailwind class that the prebuilt
   stylesheet does not contain. */
@media (max-width: 767px) {
  .mt-page-head {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.75rem;
  }
  .mt-page-head > * { min-width: 0; }

  /* Two header shapes need opposite flex-basis, and getting this wrong is
     invisible to every overflow metric — it renders the title UNDERNEATH the
     buttons with zero horizontal overflow:
       · header WITH an action group (Classes, Hifz, Calendar): the title must
         claim a whole line so the actions wrap below it. Flex breaks a line
         when the bases exceed 100%, so basis 0% + the actions' 100% sums to
         exactly 100%, fits on one line, and collapses the title to 0 wide.
       · header WITHOUT one (Command Center: back arrow + title): the title
         must shrink instead, or its content width pushes it to a second line
         and strands the arrow alone on the first. */
  .mt-page-head:has(> .mt-page-actions) > div:not(.mt-page-actions) {
    flex: 1 1 100%;
    min-width: 0;
  }
  .mt-page-head:not(:has(> .mt-page-actions)) > div {
    flex: 1 1 0%;
    min-width: 0;
  }

  /* Actions take a full row of their own and wrap among themselves. */
  .mt-page-head > .mt-page-actions {
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  /* Tailwind's space-x-* is `.space-x-4 > :not([hidden]) ~ :not([hidden])`
     (specificity 0,3,0) and sets margin-left, which both double-counts against
     `gap` and indents the first item of every wrapped row. !important is the
     only thing that reliably outranks that compound selector from here. */
  .mt-page-head > .mt-page-actions > * { margin-left: 0 !important; }

  /* text-3xl over two or three lines is most of a phone screen spent on a word
     the user just tapped to get to. */
  .mt-page-head h1 { font-size: 1.5rem; line-height: 2rem; }
  .mt-page-head h1 + p { margin-top: 0.125rem; }
}

/* Gradebooks list on phones.
   Each row is an <a> 327px wide whose contents lay out to 584px, inside a box
   with overflow:visible and NO scrollable ancestor — so the teacher name was
   cut mid-word and the "last updated" date and the "View" chip rendered off
   the right edge with no way to scroll to them. The row tap still worked, so
   the page looked fine while silently hiding half its columns.
   Nothing could shrink: gap-6 plus min-w-[120px]/min-w-[80px] on the stats and
   no min-w-0 anywhere. Letting the stats wrap onto their own line fixes it
   without touching the desktop layout. */
@media (max-width: 767px) {
  .mt-gb-main { flex-wrap: wrap; row-gap: 0.375rem; }
  .mt-gb-stats {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }
  .mt-gb-stats > * { min-width: 0; }
  .mt-gb-stats .truncate { max-width: 60vw; }
}

/* Wide tables on phones (Classes, Hifz).
   These already sit in an overflow-x-auto wrapper, so the columns past the
   right edge ARE reachable — but nothing on screen says so, and because the
   cells wrap, a class called "Year 3 Quran Hifz" became four lines and made
   each row ~200px tall. Keeping cells on one line makes the rows compact and
   the horizontal scroll obvious; the fade on the right edge is the affordance
   that the table continues. */
@media (max-width: 767px) {
  .mt-table-scroll { position: relative; }
  .mt-table-scroll table th,
  .mt-table-scroll table td { white-space: nowrap; }
  /* The fade is decoration only: pointer-events none so it can never eat a tap
     on the row underneath it. */
  .mt-table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.75rem;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
  }
  .dark .mt-table-scroll::after {
    background: linear-gradient(to right, rgba(31, 41, 55, 0), rgba(31, 41, 55, 0.92));
  }
}

/* Attendance Command Center on phones.
   Measured before: the tab nav — the only way to reach Requests, Records,
   Students or Teachers — started at y=749 on a 393x852 iPhone and was BELOW
   THE FOLD entirely on a 375x667 SE, behind a two-line title, a two-line
   subtitle, two half-width filter rows and six stat cards. 88% of the opening
   screen was chrome (112% on the SE).
   The frame's DOM order is load-bearing for the two-frame tab contract, so
   this reorders visually only, and only under md: filters, then the tabs,
   then the stat strip, then the tab body. Nothing is hidden and the desktop
   layout is untouched. */
@media (max-width: 767px) {
  #center { display: flex; flex-direction: column; }
  #center > [data-testid="attendance-center-filters"] { order: 1; }
  #center > nav[data-testid="attendance-center-tabs"] { order: 2; margin-top: 0.75rem; }
  #center > .mt-ac-kpis { order: 3; }
  #center > .mt-ac-body { order: 4; }

  /* Year and Term each took a full row; side by side they fit. */
  [data-testid="attendance-center-filters"] { gap: 0.5rem; }
  [data-testid="attendance-center-filters"] select { max-width: 9.5rem; }
}

/* Text-entry controls on phones.
   Mobile Safari zooms the whole page whenever a focused field computes below
   16px, and it does not zoom back out afterwards — the admin is left on a
   magnified, sideways-scrolling page. 16 screens had at least one such field,
   including New invoice and New email, which are the two an admin is most
   likely to be typing into on a phone.
   Scoped to real text entry: checkboxes, radios, buttons and file inputs are
   not affected, and nothing changes from md up. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    /* !important because the size that matters here is a behaviour, not a
       style: anything under 16px makes iOS zoom and stay zoomed. A bare
       `select` selector is specificity 0,0,1 and loses to `.text-sm`, and the
       roster filter selects carry `.h-9.text-xs` (0,2,0), so no reasonable
       selector outranks every call site. */
    font-size: 16px !important;
  }
}

/* Full-bleed bands (`-mx-6 px-6`) on phones.
   18 views use this idiom to make a header band span the page gutters — the
   settings tab strip, every tuition/invoices header, the student report
   headers. The -1.5rem pull is sized for the container's desktop `lg:p-6`,
   but below lg the container is `p-4` (1rem), so the band over-pulls by 8px
   on each side and drags the whole page sideways: that was the 39px of
   horizontal scroll on Settings and the 8px on New Invoice. Matching the pull
   and the inner padding to the container's actual mobile padding fixes all of
   them at once. */
@media (max-width: 767px) {
  #main-content .-mx-6 { margin-left: -1rem; margin-right: -1rem; }
  #main-content .-mx-6.px-6 { padding-left: 1rem; padding-right: 1rem; }
  nav.flex.overflow-x-auto { max-width: 100%; min-width: 0; }
  /* A full-bleed band holding a horizontally-scrolling tab strip must not let
     that strip's width leak outward, or the whole page scrolls sideways
     alongside the strip (Settings did, and raising form controls to 16px made
     it worse). The strip keeps its own scroll — only the leak is clipped. */
  #main-content .-mx-6.px-6 { overflow-x: hidden; }
}

/* A search form used as a page-header action (Billing Archive) carries a
   fixed w-64 input; on its own row it should just fill the width. */
@media (max-width: 767px) {
  form.mt-page-actions { width: 100%; }
  form.mt-page-actions input[type="text"],
  form.mt-page-actions input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Class card actions (Gradebook / Modules / Resources / Discussions + the
   collapse chevron) on the class page. The row measured 671px inside a 361px
   card with no scrollable ancestor, which is why this page hid 422px of itself
   — the worst single screen in the audit. Wrapping the buttons keeps every one
   of them tappable. space-x-2's margin-left is neutralised so the second row
   does not start indented and does not double up with the gap. */
@media (max-width: 767px) {
  .mt-class-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
  }
  .mt-class-actions > * { margin-left: 0 !important; }

  /* …and let the card's own row wrap, so the class meta (teacher, roll, time)
     gets the full width instead of being squeezed into a narrow left column
     beside the stacked buttons. Same basis trick as the page header: the meta
     needs basis 100% or the two share one line. */
  div:has(> .mt-class-actions) { flex-wrap: wrap; row-gap: 0.75rem; }
  div:has(> .mt-class-actions) > .mt-class-actions { flex: 0 0 100%; }
  div:has(> .mt-class-actions) > *:not(.mt-class-actions) { flex: 1 1 100%; min-width: 0; }
}