/* Change text placeholder color to gray */
trix-editor:empty:not(:focus)::before {
  color: #6c7280;
}

/* Trix editor */
trix-editor {
  border-radius: 3px;
  margin-top: 4px;
  padding: 0.2em 1em;
  min-height: 5em;
  outline: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-color: #333;
  font-size: 0.9rem;
  line-height: 1.25rem;
}

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 pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  background-color: #eee;
  color: #333;
  border-radius: 4px;
  overflow-x: auto;
  text-wrap: wrap;
}

trix-editor pre strong {
  color: #ffffff !important;
}

trix-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

trix-editor .trix-button.trix-active {
  background: #e0e0e0;
}

/* Trix content */

.trix-content * {
  margin-bottom: 10px;
  margin-top: 5px;
}

.trix-content h1 {
  font-size: 2em;
  line-height: 1.6;
  font-weight: 700;
}
.trix-content h2 {
  font-size: 1.5em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  font-weight: 700;
}
.trix-content h3 {
  font-size: 1.3em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .trix-content h1 {
    font-size: 1.6em;
  }

  .trix-content h2 {
    font-size: 1.3em;
  }
  .trix-content h3 {
    font-size: 1.1em;
  }
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  border-radius: 4px;
  overflow-x: auto;
  text-wrap: wrap;
}

.trix-content pre strong {
  color: #ffffff;
}

/* Trix Toolbar */

/* Make the toolbar sticky by adding a "relative" class for the rich text parent div */
trix-toolbar {
  border-bottom: #d1d5dc 1px solid;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0.4em;
  position: sticky;
  top: 0;
  background-color: #fff;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
}

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.3em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 4px;
  background: transparent;
  margin-right: 4px;
}
trix-toolbar .trix-button.trix-active {
  background: #e6e5e5;
  color: black;
}
trix-toolbar .trix-button:hover {
  background: #f1f1f1;
}

trix-toolbar .trix-button--icon {
  width: 2.4em;
  height: 2.2em;
  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:after {
  display: none;
}
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;
}

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%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-heading-1%22%3E%3Cpath%20d%3D%22M4%2012h8%22/%3E%3Cpath%20d%3D%22M4%2018V6%22/%3E%3Cpath%20d%3D%22M12%2018V6%22/%3E%3Cpath%20d%3D%22m17%2012%203-2v8%22/%3E%3C/svg%3E);
}
trix-toolbar .trix-button--icon-heading-2::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-heading-2%22%3E%3Cpath%20d%3D%22M4%2012h8%22/%3E%3Cpath%20d%3D%22M4%2018V6%22/%3E%3Cpath%20d%3D%22M12%2018V6%22/%3E%3Cpath%20d%3D%22M21%2018h-4c0-4%204-3%204-6%200-1.5-2-2.5-4-1%22/%3E%3C/svg%3E);
}
trix-toolbar .trix-button--icon-heading-3::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-heading-3%22%3E%3Cpath%20d%3D%22M4%2012h8%22/%3E%3Cpath%20d%3D%22M4%2018V6%22/%3E%3Cpath%20d%3D%22M12%2018V6%22/%3E%3Cpath%20d%3D%22M17.5%2010.5c1.7-1%203.5%200%203.5%201.5a2%202%200%200%201-2%202%22/%3E%3Cpath%20d%3D%22M17%2017.5c2%201.5%204%20.3%204-1.5a2%202%200%200%200-2-2%22/%3E%3C/svg%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-redo {
  margin-right: 0px;
}

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-dialog {
  position: absolute;
  top: 3.3em;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 15px;
  background: #fff;
  box-shadow: 0 0.3em 1em #00000038;
  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;
  border-radius: 0.4rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog:focus {
  border-color: #888;
  --tw-ring-color: #888;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #f00 0px 0px 1.5px 1px;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
  border: none;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
  width: 100%;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  .trix-button--dialog {
    padding: 0.5em 0.8em;
    border-radius: 3px;
    border: 1px solid #e2e2e2;
    cursor: pointer;
  }

  .trix-button--dialog:last-of-type {
    margin-left: 0.25rem;
  }
}
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/

.link_to_embed {
  white-space: normal;
  margin-top: 1rem;
  margin-left: 1rem;

  [data-behavior="embed_url"] {
    display: inline-block;
    margin-left: 0.75rem;
  }
}

trix-editor:empty:not(:focus)::before {
  color: #9ca3af;
}

.trix-content img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.trix-content a {
  color: #1b64f3;
  text-decoration: underline;
}

.trix-content a:hover {
  color: #1c4ed8;
}

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

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

  .embed {
    display: inline-block;
    line-height: 1;
    margin: 1em 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  iframe,
  twitter-widget {
    display: inline-block !important;
  }
}

/* Trix attachment formatting */
.attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}

/* Tribute styles */

.tribute-container ul {
  list-style-type: disc;
  margin: 0;
  padding: 0;
}

.tribute-container {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.05);

  ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
  }

  li {
    background: #fff;
    padding: 0.2em 1em;
    min-width: 15em;
    max-width: 100%;
  }

  .highlight {
    background: #f2f2f2;
    color: #fff;

    span {
      font-weight: bold;
    }
  }
}

/* Tweet embeds */
blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px;
  max-width: 468px;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}

blockquote.twitter-tweet {
  position: relative;
  background: white;
  padding: 72px 20px 28px !important;
  box-shadow: none;
  border: 1px solid #e1e8ed;
  border-radius: 4px;
  margin: 0;
  font-style: normal;
  text-align: left;
  width: 500px;
  max-width: 100%;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet {
    padding: 60px 17.5px 21.5px !important;
  }
}

blockquote.twitter-tweet:before {
  content: "Follow";
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5.5px 12px 6.5px 33px;
  background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.89 7.012c.808-.496 1.343-1.173 1.605-2.034-.786.417-1.569.703-2.351.861-.703-.756-1.593-1.14-2.66-1.14-1.043 0-1.924.366-2.643 1.078-.715.717-1.076 1.588-1.076 2.605 0 .309.039.585.117.819-3.076-.105-5.622-1.381-7.628-3.837-.34.601-.51 1.213-.51 1.846 0 1.301.549 2.332 1.645 3.089-.625-.053-1.176-.211-1.645-.47 0 .929.273 1.705.82 2.388.549.676 1.254 1.107 2.115 1.291-.312.08-.641.118-.979.118-.312 0-.533-.026-.664-.083.23.757.664 1.371 1.291 1.841.625.472 1.344.721 2.152.743-1.332 1.045-2.855 1.562-4.578 1.562-.422 0-.721-.006-.902-.038 1.697 1.102 3.586 1.649 5.676 1.649 2.139 0 4.029-.542 5.674-1.626 1.645-1.078 2.859-2.408 3.639-3.974.784-1.564 1.172-3.192 1.172-4.892v-.468c.758-.57 1.371-1.212 1.84-1.921-.68.293-1.383.492-2.11.593z' fill='%23ccc'/%3E%3C/svg%3E") 9px center no-repeat;
  background-size: 21px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #ccc;
  font-size: 14px;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet:before {
    display: none;
  }
}

blockquote.twitter-tweet:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  background: #eee url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 12c2.21 0 4-1.795 4-4 0-2.21-1.79-4-4-4s-4 1.79-4 4c0 2.205 1.79 4 4 4zm0 2c-2.665 0-8 1.335-8 4v2h16v-2c0-2.665-5.335-4-8-4z' fill='%23444'/%3E%3C/svg%3E") center center no-repeat;
  border-radius: 4px;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet:after {
    top: 17.5px;
    left: 17.5px;
  }
}

blockquote.twitter-tweet p {
  white-space: pre-wrap;
  margin: 0 0 28px;
}

@media (max-width: 369px) {
  blockquote.twitter-tweet p {
    font-size: 14px;
    margin-bottom: 16px;
  }
}

blockquote.twitter-tweet a {
  border: 0;
  box-shadow: none;
  color: #2b7bb9;
}

blockquote.twitter-tweet > a {
  color: #888;
}
/* Step Up Boards — admin Analytics dashboard.
   Recreated from the Claude Design handoff. Builds on colors_and_type.css
   (design tokens already defined there). Scoped to .adm-* / .an-* classes so it
   does not leak into the rest of the app — no global element resets here. */

/* ── Shell + header (subset of handoff admin.css) ─────────────────── */
.adm-shell {
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--sub-bg);
}

.adm-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--sub-deep-navy);
  color: var(--sub-warm-ivory);
  border-bottom: 1px solid var(--sub-navy-900);
  position: sticky; top: 0; z-index: 50;
}

.adm-brand { display: flex; align-items: center; gap: 10px; }
.adm-logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--sub-mint);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.adm-wordmark { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.adm-wordmark-name { font-family: var(--sub-font-display); font-weight: 800; font-size: 15px; }
.adm-wordmark-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sub-mint-300);
}

.adm-nav { display: flex; gap: 2px; margin-left: 12px; }

/* Header buttons / nav pills */
.adm-hdr-btn {
  background: transparent;
  color: var(--sub-warm-ivory);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font: 700 13px var(--sub-font-display);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: background 120ms var(--sub-ease-out);
  white-space: nowrap;
}
.adm-hdr-btn:hover { background: rgba(255,255,255,0.10); }
.adm-hdr-btn.active {
  background: rgba(95,191,175,0.18);
  border-color: rgba(95,191,175,0.40);
  color: var(--sub-mint-300);
}

/* Header search */
.adm-search { position: relative; flex: 1; max-width: 460px; }
.adm-search input {
  width: 100%;
  background: rgba(255,255,255,0.10);
  color: var(--sub-warm-ivory);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 8px 14px 8px 36px;
  font-size: 13px;
  outline: none;
  transition: all 120ms var(--sub-ease-out);
}
.adm-search input::placeholder { color: rgba(255,255,255,0.55); }
.adm-search input:focus {
  background: rgba(255,255,255,0.18);
  border-color: var(--sub-mint);
  box-shadow: 0 0 0 3px rgba(95,191,175,0.25);
}
.adm-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.55); width: 14px; height: 14px;
}

/* User chip */
.adm-user { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.adm-user-stack { display: flex; flex-direction: column; line-height: 1.15; }
.adm-user-name { font-weight: 700; font-size: 12px; }
.adm-user-role {
  font-size: 10px; color: var(--sub-mint-300); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.adm-avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: var(--sub-deep-navy);
  background: var(--sub-mint);
  font-family: var(--sub-font-display);
  flex-shrink: 0;
}

/* Filter top-bar */
.adm-topbar {
  border-bottom: 1px solid var(--sub-border);
  background: var(--sub-ivory-bright);
  padding: 12px 20px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.adm-topbar-label {
  font: 800 12px var(--sub-font-display);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sub-fg-2);
  margin-right: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.adm-topbar-label svg { width: 14px; height: 14px; }

/* Toolbar buttons */
.adm-tbtn {
  background: #fff;
  color: var(--sub-fg-1);
  border: 1px solid var(--sub-border);
  border-radius: 10px;
  padding: 7px 12px;
  font: 700 13px var(--sub-font-display);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 120ms var(--sub-ease-out);
  white-space: nowrap;
}
.adm-tbtn:hover { border-color: var(--sub-deep-navy); }
.adm-tbtn.ghost { background: transparent; border-color: transparent; }
.adm-tbtn.ghost:hover { background: var(--sub-ivory-shade); }
.adm-tbtn svg { width: 14px; height: 14px; }

/* Filter chip + dropdown (was inline in the prototype) */
.adm-fwrap { position: relative; }
.adm-fchip {
  background: #fff;
  color: var(--sub-fg-1);
  border: 1px solid var(--sub-border);
  border-radius: 999px;
  padding: 6px 12px;
  font: 700 13px var(--sub-font-display);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 120ms var(--sub-ease-out);
}
.adm-fchip svg { width: 12px; height: 12px; }
.adm-fchip.active {
  background: var(--sub-soft-mint);
  color: var(--sub-mint-900);
  border-color: var(--sub-border-mint);
}
.adm-fcount {
  background: var(--sub-mint);
  color: var(--sub-deep-navy);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
}
.adm-fchip:not(.active) .adm-fcount { display: none; }

.adm-fdrop {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff;
  border: 1px solid var(--sub-border);
  border-radius: 12px;
  box-shadow: var(--sub-shadow-2);
  padding: 8px;
  min-width: 220px; max-width: 320px;
  max-height: 360px; overflow-y: auto;
  z-index: 40;
}
.adm-fdrop[hidden] { display: none; }

/* Filter dropdown option rows */
.flt-list { display: flex; flex-direction: column; gap: 1px; }
.flt-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--sub-fg-1);
  cursor: pointer;
  transition: background 100ms var(--sub-ease-out);
}
.flt-item:hover { background: var(--sub-ivory-shade); }
.flt-item.active { background: var(--sub-soft-mint); color: var(--sub-mint-900); font-weight: 700; }
.flt-item input { position: absolute; opacity: 0; pointer-events: none; }
.flt-item-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Checkbox / radio markers inside dropdowns */
.adm-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--sub-border);
  border-radius: 5px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 120ms var(--sub-ease-out);
}
.adm-check svg { width: 11px; height: 11px; color: #fff; }
.flt-item:hover .adm-check { border-color: var(--sub-mint); }
.flt-item input:checked + .adm-check {
  background: var(--sub-mint);
  border-color: var(--sub-mint);
}
.adm-radio {
  width: 14px; height: 14px; border-radius: 999px;
  border: 1.5px solid var(--sub-border);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.adm-radio::after {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--sub-mint); transform: scale(0);
  transition: transform 120ms var(--sub-ease-out);
}
.flt-item input:checked + .adm-radio { border-color: var(--sub-mint); }
.flt-item input:checked + .adm-radio::after { transform: scale(1); }

/* Status dot in filter items */
.flt-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

/* Difficulty pips */
.adm-pips { display: inline-flex; gap: 3px; }
.adm-pip { width: 6px; height: 12px; border-radius: 2px; background: var(--sub-ivory-shade); }
.adm-pip.on { background: var(--sub-deep-navy); }

/* ── Analytics dashboard (handoff analytics.css) ──────────────────── */
.an-scroll { min-height: 0; overflow-y: auto; background: var(--sub-bg); }

.an-subhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 26px 40px 18px; background: var(--sub-bg);
}
.an-subhead h1 {
  margin: 0; font-family: var(--sub-font-display); font-size: 26px;
  font-weight: 800; letter-spacing: -0.01em; color: var(--sub-fg-1);
}
.an-subhead p {
  margin: 5px 0 0; font-size: 13px; color: var(--sub-fg-2);
  max-width: 560px; line-height: 1.5;
}
.an-subhead .sub-eyebrow {
  font: 800 12px var(--sub-font-display); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sub-mint-900); margin-bottom: 4px;
}

.an-scroll .adm-topbar { position: sticky; top: 0; z-index: 30; }

/* Segmented layout toggle */
.an-seg {
  display: inline-flex; background: #fff;
  border: 1px solid var(--sub-border); border-radius: 999px;
  padding: 3px; box-shadow: var(--sub-shadow-1);
}
.an-seg button,
.an-seg a {
  border: 0; background: transparent; padding: 7px 16px; border-radius: 999px;
  font: 800 12.5px var(--sub-font-display); color: var(--sub-fg-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 150ms var(--sub-ease-out); white-space: nowrap;
  text-decoration: none;
}
.an-seg button svg,
.an-seg a svg { width: 14px; height: 14px; }
.an-seg button.active,
.an-seg a.active {
  background: var(--sub-deep-navy); color: var(--sub-warm-ivory);
  box-shadow: var(--sub-shadow-1);
}
.an-seg button:not(.active):hover,
.an-seg a:not(.active):hover { color: var(--sub-fg-1); }

/* Content wrappers */
.an-content { padding: 22px 40px 64px; }
.an-content.report { max-width: 980px; margin: 0 auto; }

/* Active filter chips */
.an-actives {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 8px 40px 0;
}
.an-actives-label {
  font-size: 11px; font-weight: 700; color: var(--sub-fg-2);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.an-active-chip {
  background: var(--sub-soft-mint); color: var(--sub-mint-900);
  border: 1px solid var(--sub-border-mint); border-radius: 999px;
  padding: 3px 8px 3px 10px; font: 700 11px var(--sub-font-display);
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.an-active-chip svg { width: 11px; height: 11px; }
.an-active-chip .facet { opacity: 0.7; }
.an-active-clear {
  background: transparent; border: 0; padding: 3px 6px;
  font: 700 11px var(--sub-font-display); color: var(--sub-fg-2);
  cursor: pointer; text-decoration: underline;
}

/* KPI strip */
.an-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.an-kpi {
  background: #fff; border: 1px solid var(--sub-border); border-radius: 18px;
  box-shadow: var(--sub-shadow-1); padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; position: relative; overflow: hidden;
}
.an-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.an-kpi-label {
  font: 800 10.5px var(--sub-font-display); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--sub-fg-2);
}
.an-kpi-ic {
  width: 28px; height: 28px; border-radius: 9px; background: var(--sub-soft-mint);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--sub-mint-900);
}
.an-kpi-ic svg { width: 15px; height: 15px; }
.an-kpi-val {
  font-family: var(--sub-font-display); font-weight: 800; font-size: 34px;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--sub-fg-1);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.an-kpi-val small { font-size: 16px; font-weight: 700; color: var(--sub-fg-3); margin-left: 2px; }
.an-kpi-sub {
  font-size: 12px; color: var(--sub-fg-2); font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.an-kpi-spark { height: 4px; border-radius: 999px; background: var(--sub-ivory-shade); overflow: hidden; margin-top: 8px; }
.an-kpi-spark > span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 600ms var(--sub-ease-out); }

/* Cards */
.an-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.an-card {
  background: #fff; border: 1px solid var(--sub-border); border-radius: 20px;
  box-shadow: var(--sub-shadow-1); padding: 20px 22px 22px;
  display: flex; flex-direction: column; min-width: 0;
}
.an-card-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.an-card-hd h3 {
  margin: 0; font-family: var(--sub-font-display); font-size: 15px; font-weight: 800;
  letter-spacing: -0.005em; color: var(--sub-fg-1); white-space: nowrap;
}
.an-card-hd .an-card-note { font-size: 12px; color: var(--sub-fg-2); font-weight: 700; }
.an-card-eyebrow {
  font: 800 10px var(--sub-font-display); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sub-mint-900); margin-bottom: 3px;
}

/* Bar rows */
.an-bars { display: flex; flex-direction: column; gap: 11px; }
.an-bar { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
.an-bar-lbl {
  font-size: 13px; font-weight: 700; color: var(--sub-fg-1);
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.an-bar-lbl .an-bar-lbl-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-track { height: 14px; background: var(--sub-ivory-shade); border-radius: 999px; overflow: hidden; position: relative; }
.an-bar-fill { height: 100%; border-radius: 999px; width: 0; transition: width 620ms var(--sub-ease-out); min-width: 3px; }
.an-bar-val {
  font: 800 13px var(--sub-font-display); color: var(--sub-fg-1);
  font-variant-numeric: tabular-nums; text-align: right; min-width: 30px;
}
.an-bar-val small { font-size: 11px; font-weight: 700; color: var(--sub-fg-3); margin-left: 3px; }
.an-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }

/* Stacked pipeline bar */
.an-pipe {
  display: flex; height: 30px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--sub-border); background: var(--sub-ivory-shade);
}
.an-pipe-seg {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font: 800 12px var(--sub-font-display); color: #fff;
  transition: flex-grow 620ms var(--sub-ease-out);
  min-width: 0; overflow: hidden; white-space: nowrap; flex: 0 1 0;
}
.an-pipe-legend { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 16px; }
.an-pipe-leg { display: flex; align-items: center; gap: 9px; }
.an-pipe-leg .an-leg-sw { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
.an-pipe-leg .an-leg-txt { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.an-pipe-leg .an-leg-name { font: 700 13px var(--sub-font-body); color: var(--sub-fg-1); }
.an-pipe-leg .an-leg-num { font: 800 13px var(--sub-font-display); color: var(--sub-fg-1); font-variant-numeric: tabular-nums; }
.an-pipe-leg .an-leg-pct { font-size: 11.5px; color: var(--sub-fg-2); font-weight: 600; }

/* Coverage table */
.an-cov-row { padding: 12px 0; border-bottom: 1px solid var(--sub-border); }
.an-cov-row:last-child { border-bottom: none; }
.an-cov-head { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 16px; cursor: pointer; }
.an-cov-name { display: flex; align-items: center; gap: 9px; font: 800 14px var(--sub-font-display); color: var(--sub-fg-1); }
.an-cov-board {
  font: 800 9px var(--sub-font-display); letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--sub-soft-mint); color: var(--sub-mint-900);
}
.an-cov-board.abpm { background: var(--sub-navy-100); color: var(--sub-navy-500); }
.an-cov-count { font: 800 14px var(--sub-font-display); color: var(--sub-fg-1); font-variant-numeric: tabular-nums; text-align: right; min-width: 56px; }
.an-cov-count small { font-weight: 700; font-size: 11px; color: var(--sub-fg-3); }
.an-cov-sub {
  margin-top: 12px; padding-left: 26px;
  display: flex; flex-direction: column; gap: 8px;
  animation: anCovIn 220ms var(--sub-ease-out);
}
.an-cov-sub[hidden] { display: none; }
@keyframes anCovIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.an-chev { width: 14px; height: 14px; transition: transform 180ms var(--sub-ease-out); color: var(--sub-fg-2); }
.an-cov-head.open .an-chev { transform: rotate(90deg); }

/* Quality leaderboard */
.an-q-row {
  display: grid; grid-template-columns: 64px 1fr 132px 46px; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--sub-border);
}
.an-q-row:last-child { border-bottom: none; }
.an-q-id { font: 700 11px var(--sub-font-mono); color: var(--sub-fg-2); }
.an-q-stem {
  font-size: 13px; font-weight: 600; color: var(--sub-fg-1); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.an-q-meta { font-size: 11px; color: var(--sub-fg-2); font-weight: 600; margin-top: 1px; }
.an-q-pct { font: 800 14px var(--sub-font-display); text-align: right; font-variant-numeric: tabular-nums; }
.an-q-empty { color: var(--sub-fg-2); font-size: 13px; padding: 8px 0; }

/* Quality summary */
.an-qual-top { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.an-qual-avg { font: 800 40px var(--sub-font-display); letter-spacing: -0.02em; line-height: 1; }
.an-qual-avg-lbl { font-size: 12px; font-weight: 700; color: var(--sub-fg-2); margin-bottom: 5px; white-space: nowrap; }
.an-qual-bands { display: flex; flex-direction: column; gap: 9px; }
.an-qual-band { display: flex; align-items: center; gap: 10px; }
.an-qual-band .an-dot { width: 10px; height: 10px; }
.an-qual-band-name { font-size: 13px; font-weight: 700; color: var(--sub-fg-1); white-space: nowrap; }
.an-qual-band-note { font-size: 11.5px; color: var(--sub-fg-3); font-weight: 700; white-space: nowrap; }
.an-qual-band-count { margin-left: auto; font: 800 14px var(--sub-font-display); color: var(--sub-fg-1); font-variant-numeric: tabular-nums; }
.an-qual-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sub-border);
  font-size: 12px; color: var(--sub-fg-2); font-weight: 600;
}

/* Empty filter result */
.an-empty {
  text-align: center; padding: 60px 24px; color: var(--sub-fg-2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.an-empty svg { width: 28px; height: 28px; color: var(--sub-fg-3); }
.an-empty h3 { margin: 0; font-family: var(--sub-font-display); font-size: 18px; color: var(--sub-fg-1); }

/* Section header (report layout) */
.an-sec-hd { margin: 34px 2px 14px; }
.an-sec-hd:first-child { margin-top: 6px; }
.an-sec-hd .ttl { font-family: var(--sub-font-display); font-size: 19px; font-weight: 800; color: var(--sub-fg-1); margin: 2px 0 0; letter-spacing: -0.01em; }
.an-sec-hd .eb { font: 800 10px var(--sub-font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub-mint-900); }

.an-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@import "colors_and_type.css";
@import "actiontext.css";
@import "trix.css";

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

@layer utilities {
  .answer-eliminated {
    opacity: 0.5;
  }

  .answer-eliminated .answer-choice-text {
    text-decoration: line-through;
  }
}
/* Step Up Boards — auth (sign in / sign up) two-column layout.
 *
 * Everything is scoped under `.auth` because application.css pulls this in via
 * `require_tree .`, so unscoped element selectors would leak onto every page.
 * Design tokens come from colors_and_type.css.
 */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* Only shown once the columns stack and the form moves above the panel. */
.auth-mobile-brand {
  display: none;
}

/* ---------- LEFT: value panel ---------- */
.auth-value {
  background: var(--sub-deep-navy);
  color: var(--sub-fg-on-navy);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

.auth-value::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: var(--sub-radius-pill);
  background: radial-gradient(circle, rgba(95, 191, 175, 0.22) 0%, rgba(95, 191, 175, 0) 70%);
  right: -180px;
  top: -140px;
  pointer-events: none;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* The horizontal lockup is navy-on-transparent, so it needs an ivory plaque to
   read against the navy panel. */
.auth-brand .plaque {
  background: var(--sub-warm-ivory);
  border-radius: var(--sub-radius-md);
  padding: 10px 18px;
  display: inline-flex;
  box-shadow: var(--sub-shadow-1);
}

.auth-brand img {
  height: 42px;
  width: auto;
  display: block;
}

.auth-value-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 520px;
}

.auth-eyebrow {
  font-family: var(--sub-font-display);
  font-size: 12px;
  font-weight: var(--sub-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-mint-300);
}

.auth-headline {
  margin: 12px 0 0;
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-black);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sub-warm-ivory);
  text-wrap: pretty;
}

.auth-headline em {
  font-style: normal;
  color: var(--sub-mint);
}

.auth-lead {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: var(--sub-lh-base);
  color: rgba(246, 244, 239, 0.72);
  max-width: 66ch;
  text-wrap: pretty;
}

/* hero graphic — framed product screen + floating proof cards */

/* The `100% - 96px` clamp reserves 48px each side so the overhanging float
   cards are not clipped by the panel's overflow:hidden. */
.auth .hero-stage {
  position: relative;
  width: 100%;
  max-width: min(376px, 100% - 96px);
  margin: 8px auto 4px;
}

.auth .hero-window {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(246, 244, 239, 0.18);
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.auth .hero-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sub-border);
  background: var(--sub-ivory-bright);
}

.auth .hero-window-dots {
  display: flex;
  gap: 6px;
}

.auth .hero-window-dots > span {
  width: 9px;
  height: 9px;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-ivory-shade);
}

.auth .hero-window-dots > span:first-child {
  background: var(--sub-mint);
}

.auth .hero-window-label {
  font-family: var(--sub-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sub-mint-900);
  margin-left: 6px;
}

.auth .hero-window-screen {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.auth .hero-window-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.auth .hero-window-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

.auth .float-card {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: 210px;
  background: #fff;
  border-radius: var(--sub-radius-lg);
  border: 1px solid var(--sub-border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sub-font-display);
}

.auth .float-card > div:last-child {
  min-width: 0;
}

.auth .float-card .fc-icn {
  width: 32px;
  height: 32px;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-soft-mint);
  color: var(--sub-mint-900);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Wraps on purpose — white-space:nowrap overflows the 210px cap. */
.auth .float-card .fc-label {
  font-size: 10px;
  font-weight: var(--sub-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub-cool-gray);
  line-height: 1.35;
}

.auth .float-card .fc-value {
  font-size: 16px;
  font-weight: var(--sub-fw-black);
  color: var(--sub-deep-navy);
  line-height: 1.15;
  white-space: nowrap;
}

.auth .float-card--explanations {
  top: 30%;
  left: -8%;
  transform: rotate(-3deg);
}

.auth .float-card--complications {
  top: 56%;
  right: -8%;
  transform: rotate(3deg);
}

.auth .float-card--complications .fc-value {
  color: var(--sub-mint-900);
}

.auth .float-card--reading {
  bottom: -7%;
  left: 2%;
  transform: rotate(-2deg);
}

.auth-value-foot {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-family: var(--sub-font-display);
  font-size: 11px;
  font-weight: var(--sub-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.5);
}

/* ---------- RIGHT: form panel ---------- */
.auth-form-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: var(--sub-warm-ivory);
}

.auth-form {
  width: 100%;
  max-width: 404px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--sub-ivory-shade);
  border-radius: var(--sub-radius-pill);
}

/* Real links rather than buttons: each mode is its own Rails route. */
.auth-tab {
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-bold);
  font-size: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--sub-radius-pill);
  background: transparent;
  color: var(--sub-cool-gray);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--sub-dur-base) var(--sub-ease-out),
              color var(--sub-dur-base) var(--sub-ease-out);
}

.auth-tab:hover {
  color: var(--sub-deep-navy);
}

.auth-tab.active {
  background: #fff;
  color: var(--sub-deep-navy);
  box-shadow: var(--sub-shadow-1);
}

.auth-title {
  margin: 0;
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-black);
  font-size: 30px;
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sub-deep-navy);
}

.auth-sub {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: var(--sub-lh-base);
  color: var(--sub-cool-gray);
}

.freebar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sub-soft-mint);
  border: 1px solid var(--sub-border-mint);
  border-radius: 16px;
  padding: 14px 16px;
}

.freebar-icn {
  width: 32px;
  height: 32px;
  border-radius: var(--sub-radius-sm);
  color: var(--sub-mint-900);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.freebar-title {
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-bold);
  font-size: 14px;
  color: var(--sub-deep-navy);
  line-height: 1.3;
}

.freebar-meta {
  font-size: 12.5px;
  color: var(--sub-mint-900);
  margin-top: 2px;
}

/* Field tuning. The SubField/SubSelect components already carry the box styling
   (radius, border, inset shadow, mint focus ring); these rules only close the
   remaining gaps to the design and are scoped so other screens are unaffected. */
.auth-form label > span {
  font-size: 13px;
  margin-bottom: 7px;
}

.auth-form input,
.auth-form select {
  font-family: var(--sub-font-body);
  font-size: 15px;
}

.auth-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Placeholder gray while the prompt option is still the selected one. */
.auth-form select:has(option[value=""]:checked) {
  color: var(--sub-fg-3);
}

/* The <form> is its own flex column so its children sit on the same 20px
   rhythm as the tabs/title/freebar that live outside it. */
.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* CTA. SubButton (primary/lg/full) already supplies the mint fill, navy text,
   pill radius, mint glow and press scale; these are the remaining deltas to the
   design's spec and are scoped so other screens keep the standard button. */
.auth-form button[data-controller="sub-button"] {
  font-weight: var(--sub-fw-bold);
  font-size: 17px;
  padding: 16px 24px;
}

.auth-form button[data-controller="sub-button"]:hover:not(:disabled) {
  filter: brightness(0.95);
}

.auth-form button[data-controller="sub-button"]:active:not(:disabled) {
  box-shadow: var(--sub-shadow-1);
}

.auth-form button[data-controller="sub-button"]:disabled {
  box-shadow: none;
}

.auth-fine {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sub-cool-gray);
}

.auth-fine a {
  color: var(--sub-mint-900);
  font-weight: var(--sub-fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-fine a:hover {
  color: var(--sub-deep-navy);
}

.auth-swap {
  font-size: 14px;
  color: var(--sub-cool-gray);
  text-align: center;
}

.auth-swap a,
.auth-remember a {
  color: var(--sub-mint-900);
  font-weight: var(--sub-fw-bold);
  text-decoration: none;
}

.auth-swap a:hover,
.auth-remember a:hover {
  color: var(--sub-deep-navy);
}

/* A button_to that has to read as a link (phone verification resend). */
.auth-linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--sub-mint-900);
  font-weight: var(--sub-fw-bold);
  cursor: pointer;
}

.auth-linkish:hover {
  color: var(--sub-deep-navy);
}

.auth-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
}

.auth-remember label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--sub-cool-gray);
  cursor: pointer;
}

/* Flowbite's CDN stylesheet sets appearance:none on checkboxes, which makes
   accent-color a no-op and leaves the box Flowbite blue. Restore the native
   control so the mint accent actually renders. */
.auth-remember input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--sub-mint);
  width: 15px;
  height: 15px;
  background-image: none;
  border-radius: 0;
}

.auth .enter {
  animation: auth-enter var(--sub-dur-slow) var(--sub-ease-out) both;
}

@keyframes auth-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth .enter {
    animation: none;
  }
}

@media (max-width: 1080px) {
  .auth-value {
    padding: 40px 36px;
  }

  .auth-headline {
    font-size: 34px;
  }

  .auth .hero-stage {
    max-width: min(330px, 100% - 96px);
  }
}

@media (max-width: 880px) {
  /* Stacked, the navy panel is about a screen tall. Leading with it would bury
     the login / reset / verification controls below the fold, so the form goes
     first and the panel becomes supporting copy underneath it. */
  .auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Matches the form column's ivory so the two read as one block. */
  .auth-mobile-brand {
    order: 1;
    display: flex;
    justify-content: center;
    padding: 28px 24px 0;
    background: var(--sub-warm-ivory);
  }

  .auth-mobile-brand img {
    height: 34px;
    width: auto;
    display: block;
  }

  .auth-form-col {
    order: 2;
    padding: 28px 24px 44px;
  }

  .auth-value {
    order: 3;
    gap: 26px;
    padding: 40px 32px;
  }

  /* The mobile header above the form already carries the lockup. */
  .auth-value .auth-brand {
    display: none;
  }
}

@media (max-width: 520px) {
  .auth-value {
    padding: 28px 20px;
  }

  .auth-headline {
    font-size: 29px;
  }

  .auth-field-row {
    grid-template-columns: 1fr;
  }

  .auth .hero-stage {
    max-width: 100%;
  }

  /* The cards only work as overlays on the hero image. Stacked below it they
     push the form off-screen, so drop them entirely at phone widths. */
  .auth .float-card {
    display: none;
  }
}
/* Public blog. Built from the Claude Design handoff (blog home, category,
   article). Every colour, radius and shadow here is a --sub-* token: the design
   palette and the design system palette are the same set, and hard-coding a hex
   would fork them the first time a token moved.

   Two naming traps worth knowing while reading this file against the handoff:
   the handoff's Navy200 is --sub-navy-100, its Navy400 is --sub-navy-300, and
   its "Sand" is --sub-ivory-shade. */

.blog { color: var(--sub-fg-1); }
.blog a { text-decoration: none; }

/* ---------- shared bits ---------- */

/* Helper text under an admin field. `.qadmin-field > span` is the console's
   label style (uppercase, letter-spaced) and outranks a Tailwind utility on
   specificity, so the hint needs a selector of its own rather than classes. */
.qadmin-field > span.qadmin-hint {
  color: var(--sub-fg-2);
  font-size: 12px; font-weight: 400;
  letter-spacing: normal; text-transform: none;
}


.blog-eyebrow {
  color: var(--sub-mint-900);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

.blog-meta { color: var(--sub-fg-2); font-size: 13px; line-height: 1.5; }

.blog-more {
  color: var(--sub-mint-900);
  font-size: 14px; font-weight: 700;
  transition: opacity var(--sub-dur-fast) var(--sub-ease-out);
}
.blog-more:hover { opacity: .75; }

.blog-avatar {
  align-items: center; display: inline-flex; justify-content: center;
  background: var(--sub-mint); color: var(--sub-deep-navy);
  border-radius: 999px; flex: none; overflow: hidden;
  font-weight: 700; letter-spacing: .02em;
}
.blog-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Cards lift on hover and step up one shadow level. 150ms, the design system's
   fast duration, on its standard easing. */
.blog-card {
  background: var(--sub-bg-elev);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-lg);
  box-shadow: var(--sub-shadow-1);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--sub-dur-fast) var(--sub-ease-out),
              box-shadow var(--sub-dur-fast) var(--sub-ease-out);
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--sub-shadow-2); }
.blog-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sub-bg), 0 0 0 4px var(--sub-mint);
}

/* Every editorial image in the design is a placeholder, and posts without a
   cover are expected. The category's tone fills the frame instead, which is what
   the mockup already draws. */
.blog-media { background: var(--sub-mint-100); display: block; width: 100%; }
.blog-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-media--16x9 { aspect-ratio: 16 / 9; }
.blog-media--3x2  { aspect-ratio: 3 / 2; }
.blog-media--2x1  { aspect-ratio: 2 / 1; }
.blog-media--1x1  { aspect-ratio: 1 / 1; border-radius: var(--sub-radius-md); }
.blog-media--21x9 { aspect-ratio: 21 / 9; border-radius: var(--sub-radius-xl); }

.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.blog-card-category {
  color: var(--sub-mint-900);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.blog-card-title { font-size: 19px; font-weight: 700; line-height: 1.3; }
.blog-card:hover .blog-card-title { color: var(--sub-mint-900); }
.blog-card-excerpt { color: var(--sub-fg-2); font-size: 14px; line-height: 1.55; }

.blog-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- masthead ---------- */

.blog-masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; padding: 8px 0 32px;
}
.blog-masthead-text { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.blog-masthead h1 {
  font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
}
.blog-masthead p { color: var(--sub-fg-2); font-size: 18px; line-height: 1.55; text-wrap: pretty; }

.blog-search {
  align-items: center; display: inline-flex; gap: 8px;
  background: var(--sub-bg-elev);
  border: 1px solid var(--sub-border); border-radius: 999px;
  box-shadow: var(--sub-shadow-inset);
  padding: 10px 18px; min-width: 300px;
}
.blog-search svg { color: var(--sub-fg-2); flex: none; }
.blog-search input {
  background: transparent; border: 0; outline: none; width: 100%;
  color: var(--sub-fg-1); font-size: 14px;
}
.blog-search:focus-within {
  border-color: var(--sub-mint);
  box-shadow: var(--sub-shadow-inset), 0 0 0 3px rgba(95, 191, 175, .25);
}
.blog-search input::placeholder { color: var(--sub-fg-3); }

/* ---------- category strip ---------- */

.blog-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 32px; border-bottom: 1px solid var(--sub-border);
}
.blog-strip a {
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  border-radius: 999px; color: var(--sub-fg-1);
  font-size: 14px; font-weight: 700; padding: 8px 16px;
  transition: background var(--sub-dur-fast) var(--sub-ease-out);
}
.blog-strip a:hover { background: var(--sub-soft-mint); }
.blog-strip a.active {
  background: var(--sub-deep-navy); border-color: var(--sub-deep-navy); color: var(--sub-warm-ivory);
}

/* ---------- featured row ---------- */

.blog-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; padding: 40px 0; }
/* With no editor's picks beside it the second column has nothing to hold, and a
   1.25fr card next to 1fr of nothing reads as a layout that failed to load. */
.blog-featured--solo { grid-template-columns: 1fr; }

.blog-feature-card {
  border-radius: var(--sub-radius-xl);
  box-shadow: var(--sub-shadow-2);
}
.blog-feature-card:hover { box-shadow: var(--sub-shadow-3); }
.blog-feature-card .blog-card-body { gap: 14px; padding: 28px 32px 32px; }
.blog-feature-card h2 { font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.blog-feature-card p { color: var(--sub-fg-2); font-size: 16px; line-height: 1.55; }

.blog-picks { display: flex; flex-direction: column; gap: 16px; }
.blog-pick {
  align-items: center;
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-lg); box-shadow: var(--sub-shadow-1);
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px;
  transition: transform var(--sub-dur-fast) var(--sub-ease-out),
              box-shadow var(--sub-dur-fast) var(--sub-ease-out);
}
.blog-pick:hover { transform: translateY(-2px); box-shadow: var(--sub-shadow-2); }
.blog-pick-title { font-size: 16px; font-weight: 700; line-height: 1.3; }

/* ---------- practice exam CTA, one component in three shapes ---------- */

.blog-cta { background: var(--sub-soft-mint); border-radius: var(--sub-radius-xl); }
.blog-cta-text { display: flex; flex-direction: column; gap: 10px; }
.blog-cta h2 { font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.blog-cta p { color: var(--sub-fg-2); line-height: 1.55; }
.blog-cta-mascot { flex: none; overflow: hidden; border-radius: var(--sub-radius-xl); }
.blog-cta-mascot img { display: block; }
.blog-cta-note { color: var(--sub-fg-2); font-size: 13px; text-align: center; }

/* panel: the full-width block at the end of the home page and the article

   Two columns, not the three the mascot once needed: it is commented out of both
   of these variants in _practice_exam_cta, so `auto 1fr auto` sized the copy to
   its own content and handed the entire 1fr to the button, which then sat
   centred in a track a third of the panel wide with the rest of it empty. Here
   the copy takes the free space and the button is sized to itself, hard against
   the padding. Put the mascot back and this needs its third column back too. */
.blog-cta--panel,
.blog-cta--article {
  align-items: center; display: grid; grid-template-columns: 1fr auto;
}
.blog-cta--panel { gap: 40px; padding: 40px 56px; }
.blog-cta--panel h2 { font-size: 30px; }
/* Wide enough for the blurb to run as one line at full width; the cap is still
   here so the copy never stretches the whole panel on an ultrawide screen. */
.blog-cta--panel p { font-size: 16px; max-width: 720px; }
.blog-cta--article { gap: 20px; padding: 32px; }
/* Sized so mascot + text + button fit on one line at the 1000px layout floor.
   Changing the copy or the type size means re-checking for overflow. */
.blog-cta--article h2 { font-size: 24px; white-space: nowrap; }
.blog-cta--article p { font-size: 15px; white-space: nowrap; }

/* tile: the small one in the editor's picks column */
.blog-cta--tile {
  align-items: center; display: grid; grid-template-columns: 96px 1fr;
  gap: 16px; padding: 14px; border-radius: var(--sub-radius-lg);
}
/* The tile's button is a pill beside the copy, not a full-width bar: the text
   column is a flex column, which would otherwise stretch it. */
.blog-cta--tile .blog-cta-text { align-items: flex-start; }

/* card: the sidebar and article rail */
.blog-cta--card {
  border-radius: var(--sub-radius-lg);
  display: flex; flex-direction: column; gap: 12px; padding: 22px;
}
.blog-cta--card h2 { font-size: 15px; }
.blog-cta--card p { font-size: 13px; line-height: 1.5; }
.blog-cta--card .blog-cta-note { font-size: 12px; }

/* ---------- pagination ---------- */

.blog-pagination {
  align-items: center; display: flex; gap: 6px; justify-content: center; padding-top: 16px;
}
.blog-pagination a, .blog-pagination span {
  align-items: center; border-radius: 999px; display: inline-flex; justify-content: center;
  font-size: 14px; font-weight: 700; min-width: 36px; height: 36px; padding: 0 10px;
  color: var(--sub-deep-navy);
}
.blog-pagination .current { background: var(--sub-deep-navy); color: var(--sub-warm-ivory); }
.blog-pagination .disabled { color: var(--sub-fg-3); cursor: not-allowed; }
.blog-pagination a:hover { background: var(--sub-soft-mint); }

/* ---------- category page ---------- */

.blog-breadcrumb {
  color: var(--sub-fg-2); font-size: 13px; padding: 8px 0 24px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.blog-breadcrumb a { color: var(--sub-fg-2); }
.blog-breadcrumb a:hover { color: var(--sub-fg-1); }
.blog-breadcrumb .current { color: var(--sub-fg-1); font-weight: 700; }

.blog-category-header { padding-bottom: 40px; border-bottom: 1px solid var(--sub-border); }
/* Exactly 75% of the container, a reviewer-mandated cap: the heading and the
   description both wrap inside that measure, with no separate max-width. */
.blog-category-header-text { width: 75%; display: flex; flex-direction: column; gap: 12px; }
.blog-category-header h1 { font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.blog-category-header p { color: var(--sub-fg-2); font-size: 18px; line-height: 1.55; }
.blog-category-count { color: var(--sub-fg-2); font-size: 14px; font-weight: 700; }

.blog-body-grid { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; padding-top: 32px; }
.blog-toolbar { align-items: center; display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.blog-subfilters { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-subfilters a {
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border); border-radius: 999px;
  color: var(--sub-fg-1); font-size: 13px; font-weight: 700; padding: 7px 14px;
  transition: background var(--sub-dur-fast) var(--sub-ease-out);
}
.blog-subfilters a:hover { background: var(--sub-soft-mint); }
.blog-subfilters a.active { background: var(--sub-deep-navy); border-color: var(--sub-deep-navy); color: var(--sub-warm-ivory); }
/* Sort by. A <details> disclosure, so the trigger reads as a sentence and the
   menu needs no JavaScript. */
.blog-sort { position: relative; color: var(--sub-fg-2); font-size: 13px; }
.blog-sort > summary {
  align-items: center; display: inline-flex; gap: 6px;
  cursor: pointer; padding: 6px 2px; white-space: nowrap;
}
.blog-sort strong { color: var(--sub-fg-1); font-weight: 700; }
.blog-sort-menu {
  position: absolute; right: 0; top: 100%; z-index: 20; min-width: 160px;
  display: flex; flex-direction: column;
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-sm); box-shadow: var(--sub-shadow-2); padding: 6px;
}
.blog-sort-menu a {
  border-radius: var(--sub-radius-xs); color: var(--sub-fg-1);
  font-size: 14px; padding: 8px 10px;
}
.blog-sort-menu a:hover { background: var(--sub-soft-mint); }
.blog-sort-menu a.active { color: var(--sub-mint-900); font-weight: 700; }

.blog-empty {
  color: var(--sub-fg-2); font-size: 16px; line-height: 1.55;
  padding: 40px 0; max-width: 520px;
}

.blog-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.blog-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }
.blog-browse {
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-lg); padding: 22px;
}
.blog-browse a {
  align-items: baseline; display: flex; justify-content: space-between;
  color: var(--sub-fg-1); font-size: 14px; font-weight: 700; padding: 6px 0;
}
.blog-browse a:hover { color: var(--sub-mint-900); }
.blog-browse a span { color: var(--sub-fg-3); font-size: 12px; font-weight: 400; }

/* ---------- article ---------- */

.blog-article-header {
  align-items: center; display: flex; flex-direction: column; gap: 20px;
  margin: 0 auto; max-width: 960px; padding: 16px 0 32px; text-align: center;
}
.blog-article-header h1 {
  font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance;
}
.blog-article-standfirst { color: var(--sub-fg-2); font-size: 19px; line-height: 1.5; }

.blog-byline { align-items: center; display: flex; gap: 12px; }
.blog-byline-name { color: var(--sub-fg-1); font-weight: 700; }
.blog-byline-meta { color: var(--sub-fg-2); font-size: 14px; }

.blog-hero { margin: 0 auto; max-width: 1000px; }

.blog-reading {
  display: grid; grid-template-columns: 200px minmax(0, 780px) 200px;
  gap: 40px; justify-content: center; align-items: start; padding-top: 48px;
}

/* 24px rather than the 80px the index sidebars clear: the article page's navbar
   is static (.landing-nav--static), so the rail has nothing overhead to sit under. */
.blog-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.blog-toc { display: flex; flex-direction: column; margin-top: 10px; border-left: 2px solid var(--sub-border); }
/* Quiet until active: the rail is wayfinding, not a second table of contents
   competing with the prose beside it. */
.blog-toc a {
  border-left: 2px solid transparent; color: var(--sub-fg-3);
  font-size: 13px; line-height: 1.35; margin-left: -2px; padding: 5px 14px;
  transition: color var(--sub-dur-fast) var(--sub-ease-out);
}
.blog-toc a.active { border-left-color: var(--sub-mint); color: var(--sub-fg-1); font-weight: 700; }
.blog-toc a:hover { color: var(--sub-fg-2); }

.blog-share { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.blog-share button, .blog-share a {
  align-items: center; display: inline-flex; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  color: var(--sub-fg-1); cursor: pointer;
  transition: background var(--sub-dur-fast) var(--sub-ease-out);
}
.blog-share button:hover, .blog-share a:hover { background: var(--sub-soft-mint); }
.blog-share-flash { color: var(--sub-mint-900); font-size: 13px; font-weight: 700; margin-top: 8px; }
/* The byline copy is dead weight on desktop, where the rail sits beside the
   prose and is already in view. It only earns its place once that rail has
   collapsed to the foot of the page. */
.blog-share-block--byline { display: none; }

/* Article body. ActionText emits plain tags, so the reading styles have to be
   selectors rather than utility classes on the elements. Paragraphs are <div>s
   as often as <p>s: a div is the only paragraph Trix has, and it is what the
   importer stores, so nothing below keys on <p>. */
.blog-article-body { color: var(--sub-fg-1); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
/* ActionText wraps the document in .trix-content, so the flow spacing has to
   reach through it rather than target direct children. */
.blog-article-body .trix-content > * + * { margin-top: 22px; }
.blog-article-body h2 {
  font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em;
  margin-top: 40px; scroll-margin-top: 96px;
}
.blog-article-body h3 { font-size: 22px; font-weight: 700; line-height: 1.3; margin-top: 28px; }
.blog-article-body ul, .blog-article-body ol { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; }
.blog-article-body ul { list-style: disc; }
.blog-article-body ol { list-style: decimal; }
.blog-article-body a { color: var(--sub-mint-900); border-bottom: 1.5px solid currentColor; }
.blog-article-body blockquote {
  border-left: 3px solid var(--sub-mint);
  font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em;
  padding: 4px 0 4px 24px;
}
.blog-article-body img { border-radius: var(--sub-radius-lg); }
/* An ActionText attachment renders as <figure class="attachment"> with the
   image and, when there is one, a caption. The figure is the paragraph here,
   so it carries the block spacing and the image fills it. */
.blog-article-body action-text-attachment { display: block; }
.blog-article-body .attachment { margin: 0; width: 100%; }
.blog-article-body .attachment img { display: block; margin: 0 auto; }
/* A caption is the image's paperwork, not the article's prose: set the same
   small and quiet way as the disclaimer and the references below. */
.blog-article-body figcaption {
  color: var(--sub-fg-2); font-size: 14px; font-weight: 400; letter-spacing: normal; line-height: 1.6;
  text-align: center; margin-top: 10px;
}
/* Nothing to say about the image but its filename and weight is not a caption. */
.blog-article-body .attachment__name, .blog-article-body .attachment__size { display: none; }
.blog-article-body table { border-collapse: collapse; width: 100%; font-size: 16px; }
.blog-article-body th, .blog-article-body td {
  border: 1px solid var(--sub-border); padding: 8px 12px; text-align: left;
}
.blog-article-body th { background: var(--sub-ivory-shade); font-weight: 700; }

/* FAQ accordion. BlogArticleBody folds the questions under a "Frequently asked
   questions" heading into <details>, so the reader opens the ones they have. */
.blog-faq { display: flex; flex-direction: column; gap: 10px; }
.blog-faq-item {
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-md);
}
.blog-faq-item summary {
  align-items: center; cursor: pointer; display: flex; gap: 16px; justify-content: space-between;
  list-style: none; padding: 16px 20px;
}
.blog-faq-item summary::-webkit-details-marker { display: none; }
/* A plus that becomes a minus. U+2212, the minus sign, not a dash. */
.blog-faq-item summary::after {
  content: "+"; color: var(--sub-mint-900); flex: none;
  font-size: 22px; font-weight: 400; line-height: 1;
}
.blog-faq-item[open] summary::after { content: "\2212"; }
.blog-faq-item summary:hover { color: var(--sub-mint-900); }
.blog-article-body .blog-faq-item summary h3,
.blog-article-body .blog-faq-item summary h4 {
  font-size: 17px; font-weight: 700; line-height: 1.35; margin-top: 0;
}
.blog-faq-answer { font-size: 16px; line-height: 1.6; padding: 0 20px 18px; }
.blog-faq-answer > * + * { margin-top: 12px; }

/* Endnotes: the disclaimer and the references. Set small and quiet, the way a
   footnote is, so they read as the article's paperwork rather than its last
   two sections. The references are mostly URLs, which have to be allowed to
   break or they widen the column. */
.blog-endnote { color: var(--sub-fg-2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.blog-article-body .trix-content > .blog-endnote {
  border-top: 1px solid var(--sub-border); margin-top: 40px; padding-top: 24px;
}
.blog-article-body .trix-content > .blog-endnote + .blog-endnote { border-top: 0; margin-top: 24px; padding-top: 0; }
/* A label, not a heading: BlogArticleBody turns the section heading into a
   <p> so the endnotes stay out of the rail and out of the document outline. */
.blog-endnote-label {
  color: var(--sub-fg-2); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.4; text-transform: uppercase;
}
.blog-endnote > * + * { margin-top: 10px; }
.blog-endnote ul, .blog-endnote ol { gap: 6px; }

.blog-author-card {
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-lg);
  display: flex; gap: 20px; padding: 24px; font-size: 15px; line-height: 1.55;
  margin-top: 40px;
}
/* Scoped through .blog-article-body as well, because the card renders inside the
   prose column and a bare `.blog-author-card h2` ties on specificity with the
   article's own `h2` rule. Losing that tie put a 40px prose margin above the
   name, dropping it a full line below the avatar it should line up with, and let
   the mobile override further down size the name at 24px. */
.blog-article-body .blog-author-card h2,
.blog-author-card h2 {
  font-size: 16px; font-weight: 700; line-height: 1.2; margin-top: 0;
}
.blog-author-card p { color: var(--sub-fg-2); margin-top: 4px; }

.blog-keep-reading { padding-top: 56px; }
.blog-section-head {
  align-items: baseline; display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px;
}
.blog-section-head h2 { font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

/* ---------- responsive ----------
   The prototype is desktop-only and says so; these are the handoff's stated
   collapse rules rather than anything measured off the mock. */

@media (max-width: 1100px) {
  .blog-reading { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blog-rail { position: static; }
  /* space-between is sized for the 200px desktop rail, where it just distributes
     five icons across a narrow column. Once the rail stacks full-width under the
     article it stretches them to the page edges instead, so they group up. */
  .blog-share { justify-content: flex-start; gap: 12px; }
  .blog-share-block--byline { display: block; }
  .blog-share-block--byline .blog-share { justify-content: center; }
  /* Ahead of the practice-exam card, so the rail's copy lands directly under the
     author card that closes the article rather than trailing the whole page. */
  .blog-rail .blog-share-block--rail { order: -1; }
  .blog-toc-rail { display: none; }
  .blog-featured { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .blog-body-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blog-sidebar { position: static; }
  .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .blog-cta--panel, .blog-cta--article {
    grid-template-columns: 1fr; justify-items: start; gap: 20px; padding: 32px;
  }
  .blog-cta--article h2, .blog-cta--article p { white-space: normal; }
  .blog-cta--panel h2 { font-size: 26px; }
  .blog-category-header-text { width: 100%; }
}

@media (max-width: 720px) {
  .blog-masthead { flex-direction: column; align-items: stretch; gap: 20px; }
  .blog-search { min-width: 0; width: 100%; }
  .blog-masthead h1, .blog-category-header h1 { font-size: 34px; }
  .blog-article-header h1 { font-size: 32px; }
  .blog-article-body { font-size: 17px; }
  .blog-article-body h2 { font-size: 24px; }
  .blog-grid-2, .blog-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .blog-pick, .blog-cta--tile { grid-template-columns: 72px 1fr; }
  .blog-cta--panel, .blog-cta--article { padding: 24px; }
  .blog-hero .blog-media--21x9 { aspect-ratio: 16 / 9; }
}
/* Step Up Boards — admin Citation Checker.
   Recreated from the design handoff (citations.css), scoped to .cit-* classes and built on the
   shared design tokens in colors_and_type.css and the .adm-*/.an-* console chrome in
   analytics_console.css. Only the production layout is kept: side-by-side master-detail, top-bar
   filters, callout surfacing, score-style AI suggestion. */

/* ── subhead reuses .an-subhead; result count + chips sit under the triage ──────── */
.cit-result-count {
  padding: 4px 40px 0;
  font-size: 12.5px; font-weight: 700; color: var(--sub-fg-2);
}
.cit-result-count .tnum { color: var(--sub-fg-1); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── triage toolbar + tiles ─────────────────────────────────────────────────────── */
.cit-triage-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 40px 0;
}
.cit-triage-bar form { margin: 0; }
.cit-checking-note {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px var(--sub-font-display); color: var(--sub-fg-2);
}

.cit-triage {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 14px 40px 18px;
}
.cit-tile {
  text-align: left; background: var(--sub-bg-elev);
  border: 1px solid var(--sub-border); border-radius: 16px;
  padding: 16px 18px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--sub-shadow-1);
  transition: transform 150ms var(--sub-ease-out), box-shadow 150ms var(--sub-ease-out), border-color 150ms;
}
.cit-tile:hover { transform: translateY(-2px); box-shadow: var(--sub-shadow-2); }
.cit-tile.active { border-color: var(--sub-deep-navy); border-width: 1.5px; box-shadow: var(--sub-shadow-2); }
.cit-tile-top { display: flex; align-items: center; justify-content: space-between; }
.cit-tile-icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cit-tile-icon svg { width: 17px; height: 17px; }
.cit-tile-num {
  font-family: var(--sub-font-display); font-weight: 800; font-size: 28px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cit-tile-label { font-size: 12px; font-weight: 700; color: var(--sub-fg-2); }

/* ── assignment segmented control (top bar) ─────────────────────────────────────── */
.cit-seg {
  display: inline-flex; background: var(--sub-bg-elev);
  border: 1px solid var(--sub-border); border-radius: 999px; padding: 2px;
}
.cit-seg label {
  padding: 6px 14px; font: 700 12px var(--sub-font-display);
  border-radius: 999px; cursor: pointer; color: var(--sub-fg-2);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 120ms var(--sub-ease-out);
}
.cit-seg label.active { background: var(--sub-deep-navy); color: var(--sub-warm-ivory); }
.cit-seg input { position: absolute; opacity: 0; pointer-events: none; }

/* ── master-detail grid ─────────────────────────────────────────────────────────── */
.cit-md-grid {
  display: grid; grid-template-columns: minmax(360px, 1fr) minmax(440px, 1.05fr);
  align-items: start; margin-top: 8px;
  border-top: 1px solid var(--sub-border);
}
.cit-md-list { min-width: 0; border-right: 1px solid var(--sub-border); }
.cit-md-detail {
  position: sticky; top: 0; align-self: start;
  max-height: calc(100vh - 56px); overflow-y: auto;
  z-index: 20; background: var(--sub-bg);
}
@media (max-width: 1100px) {
  .cit-md-grid { grid-template-columns: 1fr; }
  .cit-md-list { border-right: 0; }
  .cit-md-detail { position: static; max-height: none; border-top: 1px solid var(--sub-border); }
}

/* ── group heading ──────────────────────────────────────────────────────────────── */
.cit-group-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 8px; position: sticky; top: 0; z-index: 2;
  background: linear-gradient(var(--sub-bg) 70%, rgba(246, 244, 239, 0));
}
.cit-group-title {
  font: 800 12px var(--sub-font-display); letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.cit-group-title svg { width: 13px; height: 13px; }
.cit-group-count {
  font-size: 11px; font-weight: 700; color: var(--sub-fg-2);
  background: var(--sub-ivory-shade); border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

/* ── list row ───────────────────────────────────────────────────────────────────── */
.cit-row {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 14px;
  padding: 14px 20px 14px 16px; border-bottom: 1px solid var(--sub-border);
  cursor: pointer; background: var(--sub-bg); text-decoration: none; color: inherit;
  transition: background 120ms var(--sub-ease-out); align-items: center;
}
.cit-row:hover { background: var(--sub-ivory-bright); }
.cit-row.selected { background: var(--sub-soft-mint); }
.cit-accent { width: 4px; height: 100%; border-radius: 999px; align-self: stretch; }
.cit-row-body { min-width: 0; }
.cit-row-title {
  font-size: 14px; font-weight: 700; color: var(--sub-fg-1); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cit-row-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 5px; font-size: 12px; color: var(--sub-fg-2);
}
.cit-row-src { font-weight: 600; }
.cit-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cit-row-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--sub-mint-900);
}
.cit-row-flag svg { width: 11px; height: 11px; color: var(--sub-mint-700); }
.cit-row-flag.checking { color: var(--sub-fg-2); }

/* ── PMID chip ──────────────────────────────────────────────────────────────────── */
.cit-pmid {
  font-family: var(--sub-font-mono); font-size: 11.5px; font-weight: 700;
  background: var(--sub-soft-mint); color: var(--sub-navy-900);
  padding: 2px 7px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}
.cit-pmid-label { opacity: 0.6; font-weight: 800; letter-spacing: 0.04em; }
.cit-pmid.bad { background: #F6E7C9; color: #8A5A12; }
.cit-pmid.missing { background: var(--sub-ivory-shade); color: var(--sub-fg-2); }

/* ── assignment chip ────────────────────────────────────────────────────────────── */
.cit-assign {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.cit-assign svg { width: 12px; height: 12px; }
.cit-assign.on { background: var(--sub-soft-mint); color: var(--sub-mint-900); }
.cit-assign.off { background: var(--sub-ivory-shade); color: var(--sub-fg-2); }

/* ── status pill ────────────────────────────────────────────────────────────────── */
.cit-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font: 700 11.5px var(--sub-font-display); white-space: nowrap;
}
.cit-status svg { width: 13px; height: 13px; }

/* ── detail panel ───────────────────────────────────────────────────────────────── */
.cit-detail-inner { padding: 24px 28px 48px; max-width: 720px; }
.cit-detail-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.cit-detail-id { font-family: var(--sub-font-mono); font-size: 12px; font-weight: 700; color: var(--sub-fg-2); }
.cit-detail-checked { font-size: 11px; color: var(--sub-fg-3); }
.cit-detail-title {
  font-family: var(--sub-font-display); font-size: 21px; font-weight: 800;
  color: var(--sub-deep-navy); line-height: 1.3; margin: 0 0 8px;
}
.cit-detail-cite { font-size: 13.5px; color: var(--sub-fg-2); margin-bottom: 18px; line-height: 1.5; }
.cit-detail-pmid { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.cit-detail-pmid-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--sub-fg-2);
}
.cit-pubmed-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--sub-mint-900); text-decoration: none;
}
.cit-pubmed-link svg { width: 12px; height: 12px; }

.cit-block {
  background: var(--sub-bg-elev); border: 1px solid var(--sub-border);
  border-radius: 16px; padding: 18px 20px; box-shadow: var(--sub-shadow-1);
}
.cit-block + .cit-block { margin-top: 14px; }
.cit-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cit-block-head .cit-block-eyebrow { margin-bottom: 0; }
.cit-block-head form { margin: 0 0 0 auto; }
.cit-block-eyebrow {
  font: 800 11px var(--sub-font-display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sub-fg-2); margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}
.cit-block-eyebrow svg { width: 13px; height: 13px; }

.cit-run-lookup { text-align: center; padding: 28px 20px; }
.cit-run-lookup .cit-run-lookup-icon { width: 26px; height: 26px; color: var(--sub-fg-3); }
.cit-run-lookup p { margin: 10px 0 14px; font-size: 13px; color: var(--sub-fg-2); }
.cit-run-lookup form { display: inline-block; margin: 0; }
.cit-run-lookup .qadmin-spinner { margin: 0 auto; }

/* ── callout ────────────────────────────────────────────────────────────────────── */
.cit-callout {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.cit-callout-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cit-callout-icon svg { width: 17px; height: 17px; }
.cit-callout-title { font: 800 14px var(--sub-font-display); margin: 0 0 3px; }
.cit-callout-body { font-size: 13px; line-height: 1.55; margin: 0; color: var(--sub-fg-2); }
.cit-callout.danger { background: #FBEAE4; border: 1px solid #ECC4B8; }
.cit-callout.warning { background: #FAF0D9; border: 1px solid #EAD4A4; }
.cit-callout.success { background: var(--sub-soft-mint); border: 1px solid var(--sub-border-mint); }
.cit-callout.success .cit-callout-body { color: var(--sub-mint-900); }
.cit-callout.neutral { background: var(--sub-ivory-shade); border: 1px solid var(--sub-border); }

.cit-detail-moved {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.5;
  background: var(--sub-ivory-shade); border: 1px solid var(--sub-border); color: var(--sub-fg-2);
}
.cit-detail-moved-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(31, 58, 95, 0.08); color: var(--sub-fg-1);
}
.cit-detail-moved-icon svg { width: 15px; height: 15px; }
.cit-detail-moved-message { margin: 0; padding-top: 1px; }
.cit-detail-moved strong { font-weight: 700; color: var(--sub-fg-1); }
.cit-detail-moved.verified {
  background: var(--sub-soft-mint); border-color: var(--sub-border-mint); color: var(--sub-mint-900);
}
.cit-detail-moved.verified .cit-detail-moved-icon { background: rgba(46, 126, 112, 0.14); color: var(--sub-mint-900); }
.cit-detail-moved.verified strong { color: var(--sub-mint-900); }

/* ── comparison table ───────────────────────────────────────────────────────────── */
.cit-cmp { display: flex; flex-direction: column; }
.cit-cmp-headrow {
  display: grid; grid-template-columns: 96px 1fr 1fr; gap: 14px;
  border-bottom: 1px solid var(--sub-border); margin-bottom: 4px;
}
.cit-cmp-head {
  font: 800 10px var(--sub-font-display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sub-fg-3); padding-bottom: 6px;
}
.cit-cmp-row {
  display: grid; grid-template-columns: 96px 1fr 1fr; gap: 14px;
  padding: 11px 0; border-top: 1px dashed var(--sub-border); align-items: start;
}
.cit-cmp-row:first-of-type { border-top: 0; }
.cit-cmp-field {
  font: 800 10.5px var(--sub-font-display); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sub-fg-2); padding-top: 2px; display: flex; align-items: center; gap: 6px;
}
.cit-cmp-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sub-danger); flex-shrink: 0; }
.cit-cmp-val { font-size: 13px; line-height: 1.45; color: var(--sub-fg-1); }
.cit-cmp-val.muted, .cit-cmp-val .muted { color: var(--sub-fg-3); font-style: italic; }
.cit-cmp-val.bad { color: var(--sub-danger); }
.cit-cmp-stored { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.cit-cmp-stored > span { min-width: 0; overflow-wrap: anywhere; }
.cit-inline-edit { position: relative; flex: 0 0 auto; }
.cit-inline-edit summary {
  width: 20px; height: 20px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sub-fg-3); list-style: none;
}
.cit-inline-edit summary::-webkit-details-marker { display: none; }
.cit-inline-edit summary:hover { background: var(--sub-soft-mint); color: var(--sub-mint-900); }
.cit-inline-edit summary svg { width: 12px; height: 12px; }
.cit-inline-edit-form {
  position: absolute; z-index: 100; left: 0; top: 24px;
  display: flex; align-items: center; gap: 6px; width: min(330px, 44vw);
  background: #fff; border: 1px solid var(--sub-border); border-radius: 10px;
  padding: 8px; box-shadow: var(--sub-shadow-2);
}
.cit-inline-edit-input {
  min-width: 0; flex: 1; border: 1px solid var(--sub-border); border-radius: 8px;
  padding: 7px 9px; font: 600 13px var(--sub-font-body); color: var(--sub-fg-1);
}
.cit-inline-edit-save {
  width: 30px; height: 30px; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sub-mint); color: var(--sub-deep-navy);
}
.cit-inline-edit-save svg { width: 14px; height: 14px; }

/* ── AI suggestion (score style) ────────────────────────────────────────────────── */
.cit-ai {
  border: 1.5px solid var(--sub-border-mint);
  background: linear-gradient(180deg, var(--sub-soft-mint) 0%, #fff 60%);
  border-radius: 16px; padding: 18px 20px; margin-top: 14px;
}
.cit-ai.muted {
  background: var(--sub-soft-mint);
}
.cit-ai.failed {
  border-color: #EAD4A4;
  background: #FAF0D9;
}
.cit-ai-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cit-ai-hd svg { width: 16px; height: 16px; }
.cit-ai-hd .qadmin-spinner { width: 15px; height: 15px; }
.cit-ai-title { font: 800 14px var(--sub-font-display); color: var(--sub-mint-900); }
.cit-ai-helper { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--sub-fg-2); }
.cit-conf { display: inline-flex; align-items: center; gap: 7px; font: 800 12px var(--sub-font-display); color: var(--sub-mint-900); }
.cit-conf-track { width: 64px; height: 6px; border-radius: 999px; background: var(--sub-mint-100); overflow: hidden; }
.cit-conf-fill { height: 100%; background: var(--sub-mint); border-radius: 999px; }
.cit-ai-pmid { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.cit-ai-should { font-size: 13px; color: var(--sub-fg-2); font-weight: 700; }
.cit-ai-rec-title { font-size: 13px; color: var(--sub-fg-1); font-weight: 700; }
.cit-ai-rec-cite { font-size: 12.5px; color: var(--sub-fg-2); margin-bottom: 10px; }
.cit-ai-why summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--sub-mint-900);
}
.cit-ai-why summary::-webkit-details-marker { display: none; }
.cit-ai-why-chev { width: 13px; height: 13px; color: var(--sub-mint-900); transition: transform 150ms var(--sub-ease-out); }
.cit-ai-why[open] .cit-ai-why-chev { transform: rotate(90deg); }
.cit-ai-reason {
  font-size: 13px; line-height: 1.6; color: var(--sub-navy-900);
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--sub-border-mint);
  border-radius: 10px; padding: 11px 13px; margin-top: 8px;
}
.cit-ai-actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.cit-ai-actions form { margin: 0; }
.cit-resolved-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 800 12px var(--sub-font-display); color: var(--sub-mint-900);
}
.cit-resolved-flag svg { width: 15px; height: 15px; }

/* ── action bar ─────────────────────────────────────────────────────────────────── */
.cit-actionbar { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.cit-actionbar form { margin: 0; }
.cit-open-questions {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--sub-mint-900); text-decoration: none;
}
.cit-open-questions svg { width: 13px; height: 13px; }

/* ── buttons ────────────────────────────────────────────────────────────────────── */
.cit-btn {
  border: 0; border-radius: 999px; cursor: pointer;
  font: 800 13px var(--sub-font-display);
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
  transition: transform 120ms var(--sub-ease-out), filter 120ms;
}
.cit-btn svg { width: 14px; height: 14px; }
.cit-btn:active { transform: scale(0.97); }
.cit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cit-btn.mint { background: var(--sub-mint); color: var(--sub-deep-navy); box-shadow: var(--sub-shadow-mint); }
.cit-btn.mint:hover { filter: brightness(0.97); }
.cit-btn.navy { background: var(--sub-deep-navy); color: var(--sub-warm-ivory); }
.cit-btn.ghost { background: transparent; color: var(--sub-fg-1); box-shadow: inset 0 0 0 1.5px var(--sub-border); }
.cit-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sub-deep-navy); }
.cit-btn.sm { padding: 7px 14px; font-size: 12px; }

/* ── empty / placeholder ────────────────────────────────────────────────────────── */
.cit-empty-ic, .cit-detail-empty-ic {
  width: 64px; height: 64px; border-radius: 999px; background: var(--sub-soft-mint);
  display: flex; align-items: center; justify-content: center; color: var(--sub-mint-900);
}
.cit-empty-ic svg, .cit-detail-empty-ic svg { width: 26px; height: 26px; }
.cit-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 360px; text-align: center; padding: 60px 32px; color: var(--sub-fg-2); gap: 14px;
}
.cit-detail-empty-title { font-family: var(--sub-font-display); font-weight: 800; font-size: 18px; color: var(--sub-fg-1); }
.cit-detail-empty p { margin: 6px 0 0; max-width: 320px; font-size: 13px; line-height: 1.55; }

/* ── toast ──────────────────────────────────────────────────────────────────────── */
.cit-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--sub-deep-navy); color: var(--sub-warm-ivory);
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--sub-shadow-3);
  font: 700 13px var(--sub-font-display); z-index: 200;
  display: inline-flex; align-items: center; gap: 8px;
  animation: citToastIn 220ms var(--sub-ease-bounce);
}
.cit-toast svg { width: 14px; height: 14px; }
@keyframes citToastIn {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
:root {
  /* ---------- BRAND PALETTE ---------- */
  --sub-deep-navy:   #1F3A5F;
  --sub-mint:        #5FBFAF;
  --sub-soft-mint:   #E6F4F1;
  --sub-warm-ivory:  #F6F4EF;
  --sub-cool-gray:   #6B7280;

  /* ---------- TINTS / SHADES ---------- */
  --sub-navy-900:    #142540;
  --sub-navy-700:    #1F3A5F;
  --sub-navy-500:    #34527C;
  --sub-navy-300:    #7E92AE;
  --sub-navy-100:    #D5DCE6;

  --sub-mint-900:    #2E7E70;
  --sub-mint-700:    #4AA797;
  --sub-mint-500:    #5FBFAF;
  --sub-mint-300:    #92D4C8;
  --sub-mint-100:    #C9E9E2;

  --sub-ivory-bright: #FBFAF6;
  --sub-ivory:        #F6F4EF;
  --sub-ivory-shade:  #ECE8DF;

  /* ---------- SEMANTIC ---------- */
  --sub-success:     #4AA797;
  --sub-warning:     #E0A24A;
  --sub-danger:      #C8553D;
  --sub-info:        #34527C;

  /* ---------- ROLES ---------- */
  --sub-bg:          var(--sub-warm-ivory);
  --sub-bg-alt:      var(--sub-soft-mint);
  --sub-bg-elev:     #FFFFFF;
  --sub-bg-inverse:  var(--sub-deep-navy);

  --sub-fg-1:        var(--sub-deep-navy);
  --sub-fg-2:        var(--sub-cool-gray);
  --sub-fg-3:        #9AA1AC;
  --sub-fg-on-mint:  var(--sub-deep-navy);
  --sub-fg-on-navy:  var(--sub-warm-ivory);

  --sub-border:        #E1DDD2;
  --sub-border-mint:   #BFE0D8;
  --sub-border-strong: #1F3A5F;

  /* ---------- TYPE ---------- */
  --sub-font-display: "Nunito", "Nunito Sans", system-ui, sans-serif;
  --sub-font-body:    "Nunito", "Nunito Sans", system-ui, sans-serif;
  --sub-font-mono:    ui-monospace, "JetBrains Mono", Menlo, monospace;

  --sub-fs-display: 56px;
  --sub-fs-h1:      40px;
  --sub-fs-h2:      32px;
  --sub-fs-h3:      24px;
  --sub-fs-h4:      20px;
  --sub-fs-body:    16px;
  --sub-fs-small:   14px;
  --sub-fs-micro:   12px;

  --sub-lh-tight: 1.15;
  --sub-lh-snug:  1.3;
  --sub-lh-base:  1.55;
  --sub-lh-loose: 1.75;

  --sub-fw-regular: 400;
  --sub-fw-medium:  600;
  --sub-fw-bold:    700;
  --sub-fw-black:   800;

  /* ---------- SPACING ---------- */
  --sub-space-1:  4px;
  --sub-space-2:  8px;
  --sub-space-3:  12px;
  --sub-space-4:  16px;
  --sub-space-5:  20px;
  --sub-space-6:  24px;
  --sub-space-8:  32px;
  --sub-space-10: 40px;
  --sub-space-12: 48px;
  --sub-space-16: 64px;
  --sub-space-20: 80px;

  /* ---------- RADII ---------- */
  --sub-radius-xs:   6px;
  --sub-radius-sm:   10px;
  --sub-radius-md:   14px;
  --sub-radius-lg:   20px;
  --sub-radius-xl:   28px;
  --sub-radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --sub-shadow-1: 0 1px 2px rgba(31,58,95,0.06), 0 1px 1px rgba(31,58,95,0.04);
  --sub-shadow-2: 0 4px 14px rgba(31,58,95,0.08), 0 2px 4px rgba(31,58,95,0.04);
  --sub-shadow-3: 0 12px 32px rgba(31,58,95,0.12), 0 4px 10px rgba(31,58,95,0.06);
  --sub-shadow-mint: 0 6px 18px rgba(95,191,175,0.30);
  --sub-shadow-inset: inset 0 1px 2px rgba(31,58,95,0.08);

  /* ---------- MOTION ---------- */
  --sub-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --sub-ease-soft:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --sub-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sub-dur-fast: 150ms;
  --sub-dur-base: 220ms;
  --sub-dur-slow: 400ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.sub-body    { font-family: var(--sub-font-body);    font-size: var(--sub-fs-body); line-height: var(--sub-lh-base); color: var(--sub-fg-1); background: var(--sub-bg); }
.sub-display { font-family: var(--sub-font-display); font-size: var(--sub-fs-display); font-weight: 800; line-height: var(--sub-lh-tight); letter-spacing: -0.02em;  color: var(--sub-fg-1); }
.sub-h1      { font-family: var(--sub-font-display); font-size: var(--sub-fs-h1);      font-weight: 700; line-height: var(--sub-lh-tight); letter-spacing: -0.015em; color: var(--sub-fg-1); }
.sub-h2      { font-family: var(--sub-font-display); font-size: var(--sub-fs-h2);      font-weight: 700; line-height: var(--sub-lh-snug);  letter-spacing: -0.01em;  color: var(--sub-fg-1); }
.sub-h3      { font-family: var(--sub-font-display); font-size: var(--sub-fs-h3);      font-weight: 700; line-height: var(--sub-lh-snug);  color: var(--sub-fg-1); }
.sub-h4      { font-family: var(--sub-font-display); font-size: var(--sub-fs-h4);      font-weight: 700; line-height: var(--sub-lh-snug);  color: var(--sub-fg-1); }
.sub-p       { font-family: var(--sub-font-body);    font-size: var(--sub-fs-body);    font-weight: 400; line-height: var(--sub-lh-base);  color: var(--sub-fg-1); }
.sub-small   { font-size: var(--sub-fs-small); color: var(--sub-fg-2); line-height: var(--sub-lh-base); }
.sub-micro   { font-size: var(--sub-fs-micro); color: var(--sub-fg-2); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
.sub-eyebrow { font-size: var(--sub-fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub-mint-900); }
.sub-link    { color: var(--sub-mint-900); text-decoration: none; border-bottom: 1.5px solid currentColor; transition: opacity var(--sub-dur-fast) var(--sub-ease-out); }
.sub-link:hover { opacity: 0.7; }

/* Native <details> disclosure for "show more" card sections. Hides the default
   marker, which otherwise renders as an arrow outside the card, and rotates an
   in-card chevron when open. */
.sub-disclosure > summary { list-style: none; cursor: pointer; }
.sub-disclosure > summary::-webkit-details-marker { display: none; }
.sub-disclosure__chevron { transition: transform var(--sub-dur-fast) var(--sub-ease-out); }
.sub-disclosure[open] > summary .sub-disclosure__chevron { transform: rotate(180deg); }

code, .sub-code {
  font-family: var(--sub-font-mono);
  font-size: 0.92em;
  background: var(--sub-soft-mint);
  color: var(--sub-navy-900);
  padding: 2px 6px;
  border-radius: var(--sub-radius-xs);
}

/* ============================================================
   COMPONENT KEYFRAMES
   Used by sub-mascot-bubble Stimulus controller for entrance.
   ============================================================ */

@keyframes sub-bubble-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

.sub-bubble-enter {
  animation: sub-bubble-in var(--sub-dur-slow) var(--sub-ease-bounce) both;
}
/* Expanded view for question figures. Shared by the member test view and the
   admin console preview pane, so it stays outside question_console.css. */

.sub-figure-button {
  cursor: zoom-in;
  display: block;
  padding: 0;
  width: 100%;
}

.sub-lightbox {
  background: transparent;
  border: 0;
  max-height: 100vh;
  max-width: 100vw;
  padding: 0;
}

.sub-lightbox::backdrop {
  background: rgba(23, 26, 31, .82);
}

.sub-lightbox-inner {
  padding: 24px;
  position: relative;
}

.sub-lightbox-img {
  border-radius: var(--sub-radius-md);
  display: block;
  margin: 0 auto;
  max-height: 84vh;
  max-width: 100%;
  object-fit: contain;
}

.sub-lightbox-caption {
  color: #fff;
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
}

.sub-lightbox-close {
  align-items: center;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: #fff;
  display: flex;
  height: 36px;
  justify-content: center;
  position: absolute;
  right: 28px;
  top: 28px;
  width: 36px;
}

.sub-lightbox-close:hover {
  background: rgba(255, 255, 255, .28);
}
/* The navbar is shared with the blog, where it renders outside .landing-page,
   so the tokens it needs are declared on both. */
.landing-page,
.landing-nav {
  --landing-navy-900: #16293F;
  --landing-mint-900: #2C8577;
  --landing-mint-300: #A9D9CF;
  --landing-ivory-bright: #FBF9F4;
  --landing-ivory-shade: #ECE7DB;
  --landing-amber: #D98A2B;
  --landing-star: #E0A24A;
  --landing-brick: #C15A3C;
}

.landing-page {
  min-height: 100vh;
  background: var(--sub-warm-ivory);
  color: var(--sub-deep-navy);
  font-family: var(--sub-font-body);
  overflow-x: clip;
}

.landing-page *,
.landing-page *::before,
.landing-page *::after {
  box-sizing: border-box;
}

.landing-container {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: 48px;
}

.landing-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.landing-eyebrow {
  margin: 0 0 14px;
  color: var(--landing-mint-900);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.landing-copy {
  margin: 14px 0 22px;
  max-width: 560px;
  color: var(--sub-cool-gray);
  font-size: 16px;
  line-height: 1.6;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border: 0;
  border-radius: var(--sub-radius-pill);
  padding: 12px 22px;
  font: 700 15px/1 var(--sub-font-display);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sub-dur-fast) var(--sub-ease-out),
    filter var(--sub-dur-fast) var(--sub-ease-out),
    box-shadow var(--sub-dur-base) var(--sub-ease-out),
    color var(--sub-dur-fast) var(--sub-ease-out);
}

.landing-btn:hover {
  transform: translateY(-1px);
}

.landing-btn:active {
  transform: scale(0.98);
}

.landing-btn:focus-visible,
.landing-page button:focus-visible,
.landing-page a:focus-visible,
.landing-page input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sub-bg), 0 0 0 4px var(--sub-mint);
}

.landing-btn--primary {
  background: var(--sub-mint);
  color: var(--sub-deep-navy);
  box-shadow: var(--sub-shadow-mint);
}

.landing-btn--primary:hover {
  filter: brightness(0.95);
}

.landing-btn--ghost {
  background: transparent;
  color: var(--sub-deep-navy);
}

.landing-btn--ghost:hover {
  color: var(--landing-mint-900);
}

.landing-btn--outline {
  border: 1.5px solid var(--sub-deep-navy);
  background: transparent;
  color: var(--sub-deep-navy);
}

.landing-btn--xl {
  min-height: 56px;
  padding: 16px 28px;
  font-size: 17px;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 72px;
  border-bottom: 1px solid transparent;
  background: rgba(246, 244, 239, 0.85);
  backdrop-filter: blur(12px);
  transition: border-color var(--sub-dur-base) var(--sub-ease-out);
}

.landing-nav.is-scrolled {
  border-bottom-color: var(--sub-border);
}

/* Opted out of by the blog article page, which scrolls the navbar away rather
   than pinning it: see the render in layouts/application.html.erb. */
.landing-nav--static {
  position: static;
}

.landing-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 72px;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.landing-brand img {
  display: block;
  width: 190px;
  max-width: 100%;
  height: 36px;
  object-fit: contain;
}

.landing-nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.landing-nav__links button,
.landing-nav__links a,
.landing-footer__links button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.landing-nav__links button,
.landing-nav__links a {
  color: var(--sub-deep-navy);
  font: 700 15px/1 var(--sub-font-display);
  transition: color var(--sub-dur-fast) var(--sub-ease-out);
}

.landing-nav__links button:hover,
.landing-nav__links a:hover {
  color: var(--landing-mint-900);
}

.landing-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-hero {
  padding: 48px 0 64px;
  background: var(--sub-warm-ivory);
}

.landing-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 1fr);
  align-items: center;
  gap: 48px;
}

.landing-hero__title {
  margin: 0;
  max-width: 720px;
  color: var(--sub-deep-navy);
  font: 800 clamp(40px, 4.8vw, 58px)/1.04 var(--sub-font-display);
  letter-spacing: -0.025em;
}

.landing-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--landing-mint-900);
}

.landing-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6px;
  right: -7px;
  bottom: 9px;
  height: 14px;
  border-radius: 4px;
  background: #D5EBE6;
  transform: skewX(-9deg);
}

.landing-hero__lead {
  margin: 18px 0 0;
  max-width: 540px;
  color: var(--sub-cool-gray);
  font-size: 18px;
  line-height: 1.55;
}

.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.landing-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
  margin-top: 20px;
  color: var(--sub-cool-gray);
  font-size: 14px;
}

.landing-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.landing-trust span + span::before {
  content: "";
  width: 1px;
  height: 24px;
  margin-inline: 16px;
  background: var(--sub-border);
}

.landing-trust strong {
  color: var(--sub-deep-navy);
  font-weight: 800;
}

.landing-stars {
  color: var(--landing-star);
  letter-spacing: 0.03em;
}

.landing-hero__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 500px);
}

.landing-window {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--sub-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sub-shadow-3);
}

.landing-window__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sub-border);
  background: var(--landing-ivory-bright);
  color: var(--sub-cool-gray);
  font: 600 12px/1 var(--sub-font-mono);
}

.landing-window__dots {
  display: inline-flex;
  gap: 6px;
}

.landing-window__dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--landing-ivory-shade);
}

.landing-window__dots span:first-child {
  background: var(--sub-mint);
}

.landing-window__screen {
  position: relative;
  height: 400px;
  padding: 0;
  overflow: hidden;
}

.landing-window__screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

.landing-window__image {
  display: block;
  width: 100%;
  height: auto;
}

.landing-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px;
  box-shadow: var(--sub-shadow-2);
}

.landing-float > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--sub-soft-mint);
  color: var(--landing-mint-900);
}

.landing-float small {
  display: block;
  color: var(--sub-cool-gray);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.landing-float strong {
  display: block;
  margin-top: 4px;
  color: var(--sub-deep-navy);
  font: 800 18px/1.1 var(--sub-font-display);
}

.landing-float--streak {
  top: 40%;
  left: -6%;
  transform: rotate(-3deg);
}

.landing-float--mastered {
  top: 58%;
  right: -10%;
  transform: rotate(3deg);
}

.landing-float--mastered strong {
  color: var(--landing-mint-900);
}

.landing-float--reading {
  bottom: -3%;
  left: 8%;
  min-width: 290px;
  transform: rotate(-2deg);
}

.landing-section {
  padding: 72px 0;
}

.landing-section--try {
  padding: 40px 0;
  background: linear-gradient(180deg, var(--sub-warm-ivory) 0%, var(--sub-soft-mint) 100%);
}

.landing-section--try .landing-section__header {
  margin-bottom: 18px;
}

.landing-section--try .landing-section__header h2 {
  font-size: 32px;
}

.landing-section--try .landing-section__header p:last-child {
  margin-top: 10px;
  font-size: 16px;
}

.landing-section__header {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.landing-section__header h2,
.landing-split h2 {
  margin: 0;
  color: var(--sub-deep-navy);
  font: 800 38px/1.1 var(--sub-font-display);
  letter-spacing: -0.02em;
}

.landing-section__header p:last-child {
  margin: 14px auto 0;
  max-width: 680px;
  color: var(--sub-cool-gray);
  font-size: 17px;
  line-height: 1.55;
}

.landing-qcard {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-xl);
  background: #fff;
  padding: 22px 26px;
  box-shadow: var(--sub-shadow-3);
}

.landing-qcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--sub-cool-gray);
  font: 700 12px/1.2 var(--sub-font-mono);
  letter-spacing: 0.04em;
}

.landing-progress {
  height: 4px;
  margin: 10px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--landing-ivory-shade);
}

.landing-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--sub-mint);
  transition: width var(--sub-dur-base) var(--sub-ease-out);
}

.landing-qcard h3 {
  margin: 0 0 14px;
  color: var(--sub-deep-navy);
  font: 800 20px/1.3 var(--sub-font-display);
}

.landing-options {
  display: grid;
  gap: 8px;
}

.landing-qopt,
.landing-qexp {
  width: 100%;
  border-radius: 14px;
  background: #fff;
  padding: 11px 16px;
  text-align: left;
}

.landing-qopt {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--sub-border);
  color: var(--sub-deep-navy);
  font: 700 15px/1.35 var(--sub-font-display);
  cursor: pointer;
  transition: transform var(--sub-dur-fast) var(--sub-ease-out),
    border-color var(--sub-dur-fast) var(--sub-ease-out),
    background var(--sub-dur-fast) var(--sub-ease-out);
}

.landing-qopt:hover {
  border-color: var(--sub-mint);
  background: var(--landing-ivory-bright);
  transform: translateY(-1px);
}

.landing-qopt span,
.landing-qexp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.landing-qopt span {
  border: 1.5px solid var(--sub-deep-navy);
}

.landing-qexp {
  border: 1.5px solid rgba(193, 90, 60, 0.45);
  background: rgba(193, 90, 60, 0.05);
  animation: landing-rise var(--sub-dur-slow) var(--sub-ease-out) both;
}

.landing-qexp.is-correct {
  border-color: var(--sub-mint);
  background: var(--sub-soft-mint);
}

.landing-qexp__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.landing-qexp__icon {
  background: var(--landing-brick);
  color: #fff;
}

.landing-qexp.is-correct .landing-qexp__icon {
  background: var(--sub-mint);
}

.landing-qexp__content {
  flex: 1;
  min-width: 0;
}

.landing-qexp__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--sub-deep-navy);
  font: 800 15px/1.3 var(--sub-font-display);
}

.landing-qexp__title span:first-child {
  min-width: 0;
}

.landing-qexp__badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sub-deep-navy);
  color: #fff;
  padding: 5px 8px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.landing-qexp__why {
  margin: 4px 0 0;
  color: var(--sub-cool-gray);
  font-size: 13px;
  line-height: 1.45;
}

.landing-reading-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  border: 1px solid var(--sub-border);
  border-radius: 16px;
  background: #fff;
  padding: 14px 16px;
  color: var(--sub-deep-navy);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--sub-shadow-1);
}

.landing-reading-alert span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--sub-mint);
  color: #fff;
}

.landing-reading-alert span:nth-child(2) {
  flex: 1 1 auto;
}

.landing-reading-alert strong {
  font-weight: 600;
}

.landing-reading-alert a {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--landing-mint-900);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.is-hidden {
  display: none !important;
}

.landing-qcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sub-border);
}

.landing-qcard__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-qcard__tools span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sub-cool-gray);
  font: 700 13px/1 var(--sub-font-display);
}

.landing-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 10px;
  margin-top: 12px;
}

.landing-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--landing-ivory-shade);
}

.landing-dots .is-current { background: var(--sub-mint); }
.landing-dots .is-correct { background: var(--landing-mint-300); }
.landing-dots .is-wrong { background: var(--landing-brick); }

.landing-split {
  display: grid;
  align-items: center;
  gap: 56px;
}

.landing-dashboard {
  padding: 100px 0;
}

.landing-split--dashboard {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
}

.landing-split--reading {
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1fr);
}

.landing-split--reading .landing-reading-card {
  order: -1;
}

.landing-checklist {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--sub-cool-gray);
  font-size: 15px;
  line-height: 1.55;
}

.landing-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.landing-checklist li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--sub-mint);
  color: #fff;
}

.landing-checklist li > p {
  margin: 0;
}

.landing-checklist strong {
  color: var(--sub-deep-navy);
}

.landing-dashboard-card,
.landing-reading-card {
  position: relative;
  border: 1px solid var(--sub-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sub-shadow-3);
}

.landing-dashboard-card {
  padding: 22px;
}

.landing-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.landing-tabs span {
  border-radius: var(--sub-radius-pill);
  padding: 8px 13px;
  background: var(--sub-soft-mint);
  color: var(--landing-mint-900);
  font-size: 13px;
  font-weight: 800;
}

.landing-tabs span.is-active {
  background: var(--sub-deep-navy);
  color: #fff;
}

.landing-plan-strip small {
  display: block;
  font: 800 11px/1.2 var(--sub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-domain-list {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.landing-domain-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 180px 44px;
  align-items: center;
  gap: 14px;
  color: var(--sub-deep-navy);
  font-size: 14px;
  font-weight: 700;
}

.landing-domain-row strong {
  color: var(--sub-cool-gray);
  font: 800 12px/1 var(--sub-font-mono);
  text-align: right;
}

.landing-domain-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--landing-ivory-shade);
}

.landing-domain-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.landing-domain-bar__fill--mint { background: var(--sub-mint); }
.landing-domain-bar__fill--amber { background: var(--landing-amber); }
.landing-domain-bar__fill--brick { background: var(--landing-brick); }

.landing-plan-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 18px;
  background: var(--sub-deep-navy);
  padding: 18px;
  color: #fff;
}

.landing-plan-strip small {
  color: var(--landing-mint-300);
}

.landing-plan-strip strong {
  display: block;
  margin-top: 6px;
  font: 800 18px/1.2 var(--sub-font-display);
}

.landing-plan-strip span {
  display: block;
  margin-top: 5px;
  color: rgba(246, 244, 239, 0.72);
  font-size: 13px;
}

.landing-plan-strip button {
  border: 0;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-mint);
  color: var(--sub-deep-navy);
  padding: 11px 18px;
  font-weight: 800;
  cursor: pointer;
}

.landing-dashboard-bubble {
  position: absolute;
  right: -18px;
  bottom: -64px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-dashboard-bubble p {
  max-width: 210px;
  margin: 0;
  border-radius: 18px;
  background: #fff;
  padding: 14px 16px;
  color: var(--sub-deep-navy);
  font-weight: 800;
  box-shadow: var(--sub-shadow-2);
}

.landing-dashboard-bubble img {
  width: 90px;
  height: auto;
}

.landing-reading {
  position: relative;
  padding: 100px 0;
  background:
    radial-gradient(circle at 8% 95%, rgba(95,191,175,0.22), rgba(95,191,175,0) 32%),
    var(--landing-ivory-bright);
}

.landing-callout {
  max-width: 590px;
  border-radius: 18px;
  background: var(--sub-soft-mint);
  padding: 18px 20px;
  color: var(--sub-deep-navy);
  font-size: 16px;
  line-height: 1.55;
}

.landing-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.landing-chip-row span {
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-pill);
  background: #fff;
  padding: 8px 12px;
  color: var(--sub-deep-navy);
  font-size: 13px;
  font-weight: 800;
}

.landing-reading-card {
  padding: 24px;
}

.landing-toast {
  position: absolute;
  top: -16px;
  right: 22px;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-deep-navy);
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

.landing-toast span {
  color: var(--sub-mint);
}

.landing-reading-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.landing-reading-card h3 {
  margin: 0;
  color: var(--sub-deep-navy);
  font: 800 18px/1.2 var(--sub-font-display);
}

.landing-reading-card header span {
  border-radius: var(--sub-radius-pill);
  background: var(--sub-soft-mint);
  color: var(--landing-mint-900);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.landing-reading-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 12px;
}

.landing-reading-tabs span:first-child {
  border-radius: var(--sub-radius-pill);
  background: var(--sub-deep-navy);
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

.landing-reading-tabs span:last-child {
  color: var(--sub-cool-gray);
  font: 700 12px/1 var(--sub-font-mono);
}

.landing-reading-items {
  display: grid;
  gap: 6px;
}

.landing-reading-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 11px;
}

.landing-reading-item.is-new {
  background: linear-gradient(90deg, rgba(95,191,175,0.22), rgba(95,191,175,0));
}

.landing-reading-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sub-soft-mint);
  color: var(--landing-mint-900);
}

.landing-reading-item p {
  margin: 0;
  color: var(--sub-deep-navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.landing-reading-item p strong {
  display: inline-flex;
  margin-left: 5px;
  border-radius: var(--sub-radius-xs);
  background: var(--sub-mint);
  color: #fff;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}

.landing-reading-item small {
  display: block;
  margin-top: 4px;
  color: var(--sub-cool-gray);
  font: 700 10px/1.3 var(--sub-font-mono);
}

.landing-reading-item small b {
  color: var(--landing-mint-900);
}

.landing-reading-item__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--sub-border);
  border-radius: 999px;
  color: #fff;
}

.landing-reading-item__status.is-complete {
  border-color: var(--sub-mint);
  background: var(--sub-mint);
}

.landing-features {
  background: var(--landing-ivory-bright);
}

.landing-feature-grid,
.landing-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.landing-testimonial-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  margin-inline: auto;
}

.landing-feature-card,
.landing-testimonial-card {
  border: 1px solid var(--sub-border);
  border-radius: 24px;
  background: #fff;
  padding: 22px;
}

.landing-feature-card {
  transition: transform var(--sub-dur-base) var(--sub-ease-out),
    box-shadow var(--sub-dur-base) var(--sub-ease-out);
}

.landing-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sub-shadow-2);
}

.landing-feature-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--sub-soft-mint);
  color: var(--landing-mint-900);
}

.landing-feature-card h3 {
  margin: 16px 0 6px;
  color: var(--sub-deep-navy);
  font: 800 18px/1.25 var(--sub-font-display);
}

.landing-feature-card p {
  margin: 0;
  color: var(--sub-cool-gray);
  font-size: 14px;
  line-height: 1.55;
}

.landing-stories {
  background: var(--sub-warm-ivory);
}

.landing-testimonial-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.landing-quote {
  color: var(--sub-mint);
  font: 800 48px/0.8 Georgia, serif;
}

.landing-testimonial-card p {
  margin: 14px 0;
  color: var(--sub-deep-navy);
  font: 700 16px/1.55 var(--sub-font-display);
}

.landing-testimonial-card footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--sub-border);
  padding-top: 16px;
}

.landing-testimonial-avatar {
  flex: 0 0 auto;
  width: 75px;
  height: 75px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--sub-soft-mint);
}

.landing-testimonial-card footer strong,
.landing-testimonial-card footer small {
  display: block;
}

.landing-testimonial-card footer strong {
  color: var(--sub-deep-navy);
  font-size: 15px;
}

.landing-testimonial-card footer small {
  color: var(--sub-cool-gray);
  font: 800 11px/1.2 var(--sub-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-footer-cta {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background:
    radial-gradient(circle at 92% 50%, rgba(95,191,175,0.28), rgba(95,191,175,0) 34%),
    var(--sub-deep-navy);
  color: var(--sub-warm-ivory);
}

.landing-footer-cta .landing-eyebrow {
  color: rgba(246, 244, 239, 0.62);
}

.landing-footer-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  align-items: end;
  gap: 48px;
}

.landing-footer-cta h2 {
  margin: 0;
  color: var(--sub-warm-ivory);
  font: 800 42px/1.08 var(--sub-font-display);
  letter-spacing: -0.02em;
}

.landing-footer-cta p {
  max-width: 680px;
  color: rgba(246, 244, 239, 0.75);
  font-size: 16px;
  line-height: 1.6;
}

.landing-micro {
  margin-top: 14px !important;
  color: rgba(246, 244, 239, 0.72) !important;
  font: 700 12px/1.4 var(--sub-font-mono) !important;
}

.landing-footer-cta__mascot {
  display: flex;
  justify-content: center;
}

.landing-footer-cta__mascot img {
  width: min(100%, 280px);
  height: auto;
}

.landing-footer {
  padding: 40px 0 48px;
  background: var(--landing-navy-900);
  color: rgba(246, 244, 239, 0.68);
}

.landing-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.landing-footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.landing-footer__brand img {
  width: 160px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.landing-footer__links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.landing-footer__links a,
.landing-footer__links button {
  color: rgba(246, 244, 239, 0.68);
  text-decoration: none;
  transition: color var(--sub-dur-fast) var(--sub-ease-out);
}

.landing-footer__links a:hover,
.landing-footer__links button:hover {
  color: var(--sub-warm-ivory);
}

.landing-footer__disclaimer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 244, 239, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-footer__disclaimer p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(246, 244, 239, 0.5);
}

@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .landing-hero__grid,
  .landing-split,
  .landing-footer-cta__grid {
    grid-template-columns: 1fr;
  }

  .landing-split--reading .landing-reading-card {
    order: 0;
  }

  .landing-hero__copy,
  .landing-split > div:first-child {
    max-width: 760px;
  }

  .landing-hero__visual {
    margin-top: 12px;
  }

  .landing-feature-grid,
  .landing-testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-dashboard-bubble {
    position: static;
    justify-content: flex-end;
    margin-top: 18px;
  }
}

@media (max-width: 720px) {
  .landing-container {
    padding-inline: 20px;
  }

  .landing-nav__links {
    display: none;
  }

  .landing-nav__actions .landing-btn--ghost {
    display: none;
  }

  /* Below this width the navbar is just the logo and the primary CTA, and the
     CTA's label is the one thing here that must not wrap: "Take free practice
     test" folding to a second line pushes the button past the nav's fixed 72px
     and breaks the row. So the button keeps its intrinsic width and the logo is
     what gives, scaling down to whatever is left over — with a floor, or it
     shrinks to nothing long before the label needs the room. */
  .landing-nav__inner {
    gap: 12px;
  }

  .landing-nav__actions .landing-btn {
    flex: none;
    white-space: nowrap;
  }

  .landing-brand {
    min-width: 0;
  }

  .landing-brand img {
    width: auto;
    min-width: 120px;
    max-width: 100%;
  }

  .landing-hero {
    padding: 36px 0 52px;
  }

  .landing-hero__grid {
    gap: 36px;
  }

  .landing-hero__lead {
    font-size: 18px;
  }

  .landing-cta-row,
  .landing-btn--xl,
  .landing-qcard__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-cta-row .landing-btn,
  .landing-qcard__footer .landing-btn {
    width: 100%;
  }

  .landing-cta-row .landing-btn .landing-icon {
    display: none;
  }

  .landing-split h2 br {
    display: none;
  }

  .landing-trust {
    display: grid;
  }

  .landing-trust span + span::before {
    content: none;
  }

  .landing-window__screen {
    height: 380px;
  }

  .landing-float {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    transform: none;
  }

  .landing-float--reading {
    min-width: 0;
  }

  .landing-section {
    padding: 56px 0;
  }

  .landing-section--try {
    padding: 40px 0;
  }

  .landing-section__header h2,
  .landing-split h2,
  .landing-footer-cta h2 {
    font-size: 30px;
  }

  .landing-qcard {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .landing-qcard__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-qexp__title {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-domain-row {
    grid-template-columns: 1fr 62px;
    gap: 8px 12px;
  }

  .landing-domain-bar {
    grid-column: 1 / -1;
    order: 3;
  }

  .landing-plan-strip,
  .landing-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-feature-grid,
  .landing-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .landing-reading-item {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .landing-reading-item__status {
    grid-column: 2;
    justify-self: start;
  }

  .landing-footer__links {
    flex-wrap: wrap;
  }
}

@media (max-width: 430px) {
  .landing-nav__actions .landing-btn {
    padding-inline: 14px;
    font-size: 13px;
  }

  .landing-brand img {
    height: 32px;
  }

  .landing-window__screen {
    height: 340px;
  }
}
/* ============================================================
   ONBOARDING TOUR
   Restyles the Shepherd.js popup to match the StepUpBoards
   design system: a soft white card with a top caret, a
   full-width progress bar, an "n/total" counter, and circular
   arrow nav buttons. Scoped to `.sub-tour-step` (added via the
   controller's defaultStepOptions) so these rules outrank the
   Shepherd CDN defaults and never leak elsewhere.
   ============================================================ */

/* Dimmed backdrop behind the highlighted element */
.shepherd-modal-overlay-container {
  opacity: 0.5;
}

/* ---------- Card ---------- */
.shepherd-element.sub-tour-step {
  width: 380px;
  max-width: calc(100vw - 32px);
}

/* The final step carries two labelled buttons; widen it so both fit on one line */
.shepherd-element.sub-tour-step--wide {
  width: 500px;
}

.shepherd-element.sub-tour-step .shepherd-content {
  background: var(--sub-bg-elev);
  border-radius: var(--sub-radius-xl);
  box-shadow: var(--sub-shadow-3);
  padding: 24px 24px 20px;
  font-family: var(--sub-font-body);
}

/* The caret pointing at the anchored element */
.shepherd-element.sub-tour-step .shepherd-arrow::before {
  background: var(--sub-bg-elev);
}

/* ---------- Header (title + cancel) ---------- */
.shepherd-element.sub-tour-step .shepherd-header {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.shepherd-element.sub-tour-step .shepherd-title {
  font-family: var(--sub-font-display);
  font-size: 21px;
  font-weight: var(--sub-fw-black);
  line-height: var(--sub-lh-snug);
  letter-spacing: -0.01em;
  color: var(--sub-deep-navy);
}

/* Skip control — kept functional (and clickable for specs) but understated */
.shepherd-element.sub-tour-step .shepherd-cancel-icon,
.shepherd-element.sub-tour-step .shepherd-cancel-icon span {
  color: var(--sub-fg-3);
  font-size: 22px;
  line-height: 1;
  margin-left: 12px;
  transition: color var(--sub-dur-fast) var(--sub-ease-out);
}

.shepherd-element.sub-tour-step .shepherd-cancel-icon:hover,
.shepherd-element.sub-tour-step .shepherd-cancel-icon:hover span {
  color: var(--sub-fg-1);
}

/* ---------- Body ---------- */
.shepherd-element.sub-tour-step .shepherd-text {
  margin-top: 8px;
  padding: 0;
  font-size: var(--sub-fs-body);
  line-height: var(--sub-lh-base);
  color: var(--sub-fg-2);
}

/* ---------- Progress bar (injected before the footer) ---------- */
.shepherd-element.sub-tour-step .sub-tour-progress {
  height: 6px;
  margin: 20px 0 2px;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-ivory-shade);
  overflow: hidden;
}

.shepherd-element.sub-tour-step .sub-tour-progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-mint);
  transition: width var(--sub-dur-base) var(--sub-ease-out);
}

/* ---------- Footer ---------- */
.shepherd-element.sub-tour-step .shepherd-footer {
  padding: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "n/total" counter — pinned left, pushes the buttons to the right */
.shepherd-element.sub-tour-step .sub-tour-count {
  margin-right: auto;
  font-size: var(--sub-fs-small);
  font-weight: var(--sub-fw-medium);
  color: var(--sub-fg-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.shepherd-element.sub-tour-step .shepherd-button {
  margin: 0;
  border: 0;
  cursor: pointer;
  font-family: var(--sub-font-body);
  transition: transform var(--sub-dur-fast) var(--sub-ease-out),
              filter var(--sub-dur-fast) var(--sub-ease-out),
              background var(--sub-dur-fast) var(--sub-ease-out);
}

/* Circular arrow nav (Next / Back) */
.shepherd-element.sub-tour-step .sub-tour-btn--next,
.shepherd-element.sub-tour-step .sub-tour-btn--back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--sub-radius-pill);
}

.shepherd-element.sub-tour-step .sub-tour-btn--next,
.shepherd-element.sub-tour-step .sub-tour-btn--next:not(:disabled):hover {
  background: var(--sub-mint);
  color: #fff;
}

.shepherd-element.sub-tour-step .sub-tour-btn--next:not(:disabled):hover {
  filter: brightness(0.97);
}

.shepherd-element.sub-tour-step .sub-tour-btn--back {
  background: var(--sub-soft-mint);
  color: var(--sub-mint-900);
}

.shepherd-element.sub-tour-step .sub-tour-btn--back:not(:disabled):hover {
  background: var(--sub-mint-100);
}

.shepherd-element.sub-tour-step .sub-tour-btn--next:active,
.shepherd-element.sub-tour-step .sub-tour-btn--back:active {
  transform: scale(0.94);
}

.shepherd-element.sub-tour-step .sub-tour-btn--next svg,
.shepherd-element.sub-tour-step .sub-tour-btn--back svg {
  width: 20px;
  height: 20px;
}

/* Pill CTA (advance / start steps — needs a label, so it keeps text) */
.shepherd-element.sub-tour-step .sub-tour-btn--cta,
.shepherd-element.sub-tour-step .sub-tour-btn--cta:not(:disabled):hover {
  background: var(--sub-mint);
  color: var(--sub-deep-navy);
}

.shepherd-element.sub-tour-step .sub-tour-btn--cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--sub-radius-pill);
  font-size: 15px;
  font-weight: var(--sub-fw-medium);
  box-shadow: var(--sub-shadow-mint);
  white-space: nowrap;
}

.shepherd-element.sub-tour-step .sub-tour-btn--cta:not(:disabled):hover {
  filter: brightness(0.97);
}

.shepherd-element.sub-tour-step .sub-tour-btn--cta:active {
  transform: scale(0.97);
}

.shepherd-element.sub-tour-step .sub-tour-btn--cta svg {
  width: 16px;
  height: 16px;
}

/* Navy pill (secondary CTA, e.g. "Unlock full access") */
.shepherd-element.sub-tour-step .sub-tour-btn--navy,
.shepherd-element.sub-tour-step .sub-tour-btn--navy:not(:disabled):hover {
  background: var(--sub-deep-navy);
  color: var(--sub-warm-ivory);
}

.shepherd-element.sub-tour-step .sub-tour-btn--navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--sub-radius-pill);
  font-size: 15px;
  font-weight: var(--sub-fw-medium);
  box-shadow: var(--sub-shadow-2);
  white-space: nowrap;
}

.shepherd-element.sub-tour-step .sub-tour-btn--navy:not(:disabled):hover {
  filter: brightness(1.15);
}

.shepherd-element.sub-tour-step .sub-tour-btn--navy:active {
  transform: scale(0.97);
}

.shepherd-element.sub-tour-step .sub-tour-btn--navy svg {
  width: 16px;
  height: 16px;
}
/* ============================================================
   Payment-success modal
   Shown the moment Stripe checkout clears: celebration header,
   paid receipt, a note from the founders, then actions.
   Desktop center dialog + mobile bottom sheet, recreated from
   the design handoff. Tokens come from colors_and_type.css.
   ============================================================ */

/* ── Overlay: blurs the dashboard behind + navy scrim ──────────────────────── */
.ps-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(31, 58, 95, 0.52);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  opacity: 0;
  transition: opacity var(--sub-dur-base) var(--sub-ease-out);
  overflow-y: auto;
}

.ps-overlay[hidden] {
  display: none;
}

.ps-overlay.is-open {
  opacity: 1;
}

/* ── Modal shell (desktop dialog) ──────────────────────────────────────────── */
.ps-modal {
  position: relative;
  width: 480px;
  max-width: 100%;
  background: #fff;
  border-radius: var(--sub-radius-xl);
  box-shadow: 0 16px 56px rgba(31, 58, 95, 0.34), 0 0 0 1px rgba(31, 58, 95, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sub-dur-slow) var(--sub-ease-out),
              transform var(--sub-dur-slow) var(--sub-ease-out);
}

.ps-overlay.is-open .ps-modal {
  opacity: 1;
  transform: none;
}

/* Drag handle — mobile sheet only */
.ps-handle {
  display: none;
  padding: 12px 0 2px;
  justify-content: center;
}

.ps-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: var(--sub-radius-pill);
  background: rgba(31, 58, 95, 0.18);
}

/* Close button — floats over the mint header */
.ps-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--sub-radius-pill);
  background: rgba(31, 58, 95, 0.06);
  color: var(--sub-mint-900);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ps-close:hover {
  background: rgba(31, 58, 95, 0.10);
}

.ps-close svg {
  width: 15px;
  height: 15px;
}

/* ── Celebration header (soft-mint band + Stepper + check seal) ────────────── */
.ps-header {
  position: relative;
  background: var(--sub-soft-mint);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* gentle ivory wash behind the mascot */
.ps-header-wash {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(246, 244, 239, 0.9) 0%, rgba(246, 244, 239, 0) 70%);
  pointer-events: none;
}

.ps-mascot-wrap {
  position: relative;
  margin-bottom: 12px;
}

.ps-mascot {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sub-border-mint);
  box-shadow: 0 6px 18px rgba(95, 191, 175, 0.30);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.ps-mascot img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

.ps-seal {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sub-mint);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(31, 58, 95, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-deep-navy);
}

.ps-seal svg {
  width: 18px;
  height: 18px;
}

.ps-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-mint-900);
  margin-bottom: 7px;
}

.ps-headline {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--sub-deep-navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ps-sub {
  font-size: 13.5px;
  color: var(--sub-mint-900);
  margin-top: 8px;
  line-height: 1.5;
  max-width: 380px;
  text-wrap: pretty;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.ps-body {
  padding: 20px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Receipt row ───────────────────────────────────────────────────────────── */
.ps-receipt {
  background: var(--sub-ivory-shade);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ps-receipt-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--sub-border);
  color: var(--sub-deep-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ps-receipt-icon svg {
  width: 19px;
  height: 19px;
}

.ps-receipt-mid {
  flex: 1;
  min-width: 0;
}

.ps-receipt-to {
  font-family: var(--sub-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sub-deep-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-receipt-meta {
  font-size: 12px;
  color: var(--sub-cool-gray);
  margin-top: 2px;
}

.ps-receipt-amount {
  text-align: right;
  flex-shrink: 0;
}

.ps-amount {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--sub-deep-navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ps-paid {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub-mint-900);
}

/* ── Founders note ─────────────────────────────────────────────────────────── */
.ps-founders {
  background: var(--sub-soft-mint);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.ps-founders-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-avatars {
  display: flex;
  align-items: center;
}

.ps-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2.5px var(--sub-soft-mint);
}

.ps-avatar + .ps-avatar {
  margin-left: -10px;
}

.ps-founders-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub-mint-900);
}

.ps-founders-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sub-deep-navy);
  text-wrap: pretty;
}

.ps-signature {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.ps-signature-names {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--sub-deep-navy);
  letter-spacing: -0.01em;
}

.ps-signature-role {
  font-size: 12px;
  color: var(--sub-mint-900);
  font-weight: 600;
}

/* ── Actions ───────────────────────────────────────────────────────────────── */
.ps-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--sub-font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 28px;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-mint);
  color: var(--sub-deep-navy);
  box-shadow: 0 6px 18px rgba(95, 191, 175, 0.30);
  border: 0;
  cursor: pointer;
  transition: transform var(--sub-dur-fast) var(--sub-ease-out), filter var(--sub-dur-fast) var(--sub-ease-out);
}

.ps-cta-button:hover {
  filter: brightness(0.97);
}

.ps-cta-button:active {
  transform: scale(0.97);
}

.ps-cta-button svg {
  width: 18px;
  height: 18px;
}

.ps-text-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sub-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sub-mint-900);
  padding: 4px 0;
}

.ps-text-button:hover {
  opacity: 0.8;
}

/* ── Mobile bottom sheet (≤520px) ──────────────────────────────────────────── */
@media (max-width: 520px) {
  .ps-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .ps-modal {
    width: 100%;
    max-width: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 48px rgba(31, 58, 95, 0.30);
    transform: translateY(100%);
  }

  .ps-overlay.is-open .ps-modal {
    transform: none;
  }

  .ps-handle {
    display: flex;
  }

  .ps-header {
    padding: 20px 18px 18px;
  }

  .ps-mascot {
    width: 84px;
    height: 84px;
  }

  .ps-seal {
    width: 30px;
    height: 30px;
  }

  .ps-seal svg {
    width: 16px;
    height: 16px;
  }

  .ps-headline {
    font-size: 21px;
  }

  .ps-sub {
    font-size: 13px;
  }

  .ps-body {
    padding: 16px 18px 26px;
    gap: 15px;
  }

  .ps-founders {
    padding: 16px;
    gap: 11px;
  }

  .ps-avatar {
    width: 34px;
    height: 34px;
  }

  .ps-founders-body {
    font-size: 13px;
  }

  .ps-signature-names {
    font-size: 13.5px;
  }
}

/* ── Respect reduced-motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ps-overlay,
  .ps-modal {
    transition: none;
  }
}
/* ============================================================
   Subscription paywall modal (STE-10)
   Desktop center dialog + mobile bottom sheet, recreated from the
   design handoff. Tokens come from colors_and_type.css.
   ============================================================ */

/* ── Overlay: blurs the real dashboard behind + navy scrim ─────────────────── */
.pw-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(31, 58, 95, 0.52);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  backdrop-filter: blur(3px) saturate(0.92);
  opacity: 0;
  transition: opacity var(--sub-dur-base) var(--sub-ease-out);
  overflow-y: auto;
}

.pw-overlay[hidden] {
  display: none;
}

.pw-overlay.is-open {
  opacity: 1;
}

/* ── Modal shell (desktop dialog) ──────────────────────────────────────────── */
.pw-modal {
  width: 520px;
  max-width: 100%;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 16px 56px rgba(31, 58, 95, 0.34), 0 0 0 1px rgba(31, 58, 95, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sub-dur-slow) var(--sub-ease-out),
              transform var(--sub-dur-slow) var(--sub-ease-out);
}

.pw-overlay.is-open .pw-modal {
  opacity: 1;
  transform: none;
}

/* Drag handle — mobile sheet only */
.pw-handle {
  display: none;
  padding: 14px 0 10px;
  justify-content: center;
}

.pw-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: var(--sub-radius-pill);
  background: rgba(31, 58, 95, 0.18);
}

/* ── Header (desktop: navy band) ───────────────────────────────────────────── */
.pw-header {
  background: var(--sub-deep-navy);
  padding: 22px 26px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.pw-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub-mint);
  margin-bottom: 7px;
}

.pw-headline {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--sub-warm-ivory);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.pw-sub {
  font-size: 13.5px;
  color: rgba(246, 244, 239, 0.70);
  margin-top: 7px;
  line-height: 1.5;
  text-wrap: pretty;
}

.pw-close {
  flex-shrink: 0;
  margin-top: 2px;
  width: 32px;
  height: 32px;
  border-radius: var(--sub-radius-pill);
  background: rgba(246, 244, 239, 0.10);
  color: rgba(246, 244, 239, 0.70);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pw-close svg {
  width: 15px;
  height: 15px;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.pw-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ── Price-math callout ────────────────────────────────────────────────────── */
.pw-math {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pw-math-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.pw-card {
  flex: 1;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pw-card--cost {
  background: var(--sub-ivory-shade);
}

.pw-card--offer {
  background: var(--sub-soft-mint);
}

.pw-num {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pw-card--cost .pw-num {
  color: var(--sub-deep-navy);
}

.pw-card--offer .pw-num {
  color: var(--sub-mint-900);
}

.pw-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pw-card--cost .pw-label {
  color: var(--sub-cool-gray);
}

.pw-card--offer .pw-label {
  color: var(--sub-mint-900);
}

.pw-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pw-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  color: var(--sub-mint-900);
}

.pw-arrow svg {
  width: 18px;
  height: 18px;
}

.pw-note {
  font-size: 12px;
  color: var(--sub-cool-gray);
  line-height: 1.45;
  padding-left: 2px;
  text-wrap: pretty;
}

/* ── Referral credit ───────────────────────────────────────────────────────── */
/* Struck-through list price sitting beside the price the referred user pays.
   aria-hidden is not used: the old price is meaningful to a screen reader too,
   and <s> would be wrong here since the price is not "no longer accurate" for
   everyone, only for this viewer. */
.pw-num--was,
.pw-price--was {
  text-decoration: line-through;
  opacity: 0.5;
  font-weight: 700;
}

.pw-price-stack {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}

.pw-credit {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--sub-border-mint);
  border-radius: 14px;
  background: var(--sub-soft-mint);
}

.pw-credit-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--sub-bg-elev);
  color: var(--sub-mint-900);
  flex-shrink: 0;
}

.pw-credit-chip svg { width: 16px; height: 16px; }

.pw-credit-title {
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-bold);
  font-size: 14.5px;
  color: var(--sub-mint-900);
}

.pw-credit-body {
  font-size: 12px;
  color: var(--sub-mint-900);
  opacity: 0.8;
}

/* ── Plan card ─────────────────────────────────────────────────────────────── */
.pw-plan {
  background: var(--sub-soft-mint);
  border: 2px solid var(--sub-mint);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.pw-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--sub-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pw-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.pw-plan-mid {
  flex: 1;
  min-width: 0;
}

.pw-plan-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pw-plan-name {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--sub-deep-navy);
}

.pw-badge {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub-deep-navy);
  background: var(--sub-mint);
  padding: 3px 8px;
  border-radius: var(--sub-radius-pill);
  white-space: nowrap;
}

.pw-plan-per {
  font-size: 12.5px;
  color: var(--sub-mint-900);
  margin-top: 3px;
}

.pw-plan-meta {
  font-size: 11.5px;
  color: var(--sub-mint-900);
  margin-top: 3px;
  opacity: 0.8;
}

.pw-plan-price {
  text-align: right;
  flex-shrink: 0;
}

.pw-price {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--sub-deep-navy);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Reasons ───────────────────────────────────────────────────────────────── */
.pw-reasons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pw-reason {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pw-chip {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--sub-soft-mint);
  color: var(--sub-deep-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pw-chip svg {
  width: 20px;
  height: 20px;
}

.pw-reason-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1px;
}

.pw-reason-title {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.005em;
  color: var(--sub-deep-navy);
}

.pw-reason-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sub-cool-gray);
  text-wrap: pretty;
}

/* ── CTA ───────────────────────────────────────────────────────────────────── */
.pw-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pw-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--sub-font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 28px;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-mint);
  color: var(--sub-deep-navy);
  box-shadow: 0 6px 18px rgba(95, 191, 175, 0.30);
  text-decoration: none;
  transition: transform var(--sub-dur-fast) var(--sub-ease-out), filter var(--sub-dur-fast) var(--sub-ease-out);
}

.pw-cta-button:hover {
  filter: brightness(0.97);
}

.pw-cta-button:active {
  transform: scale(0.97);
}

.pw-cta-button svg {
  width: 18px;
  height: 18px;
}

/* ── Mobile bottom sheet (≤520px) ──────────────────────────────────────────── */
@media (max-width: 520px) {
  .pw-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .pw-modal {
    width: 100%;
    max-width: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 48px rgba(31, 58, 95, 0.30);
    transform: translateY(100%);
  }

  .pw-overlay.is-open .pw-modal {
    transform: none;
  }

  .pw-handle {
    display: flex;
  }

  .pw-header {
    background: transparent;
    padding: 0 18px 14px;
  }

  .pw-eyebrow {
    font-size: 10px;
    color: var(--sub-mint-900);
    margin-bottom: 5px;
  }

  .pw-headline {
    font-size: 19px;
    color: var(--sub-deep-navy);
  }

  .pw-sub {
    display: none;
  }

  .pw-close {
    background: var(--sub-ivory-shade);
    color: var(--sub-deep-navy);
  }

  .pw-body {
    padding: 0 18px 28px;
    gap: 13px;
  }

  .pw-reasons {
    gap: 9px;
  }

  .pw-chip {
    width: 34px;
    height: 34px;
  }

  .pw-chip svg {
    width: 18px;
    height: 18px;
  }

  .pw-reason-title {
    font-size: 14px;
  }

  /* Compact reasons: title only */
  .pw-reason-body {
    display: none;
  }
}

/* ── Respect reduced-motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pw-overlay,
  .pw-modal {
    transition: none;
  }
}
.question-console-body {
  height: 100vh;
  height: 100dvh;
  margin: 0;
  min-width: 1320px;
  overflow: hidden;
  background: var(--sub-warm-ivory);
  color: var(--sub-deep-navy);
  font-family: var(--sub-font-body);
}

.qadmin-shell {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(520px, 1.1fr);
  grid-template-rows: 56px auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

.qadmin-header {
  align-items: center;
  background: var(--sub-deep-navy);
  border-bottom: 1px solid var(--sub-navy-900);
  color: var(--sub-warm-ivory);
  display: flex;
  gap: 16px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.qadmin-brand,
.qadmin-header-actions,
.qadmin-editor-actions,
.qadmin-row-meta,
.qadmin-editor-meta,
.qadmin-tabs,
.qadmin-chips {
  align-items: center;
  display: flex;
}

.qadmin-brand {
  gap: 10px;
}

.qadmin-logo {
  background: var(--sub-warm-ivory);
  border-radius: 6px;
  box-sizing: border-box;
  display: block;
  height: 34px;
  object-fit: contain;
  padding: 4px 8px;
  width: auto;
}

.qadmin-brand-kicker {
  color: var(--sub-mint-300);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.qadmin-header-actions {
  gap: 10px;
}

.qadmin-list,
.qadmin-editor {
  min-height: 0;
  overflow: auto;
}

/* ---- Header search (relocated from the old filters rail) ---- */
.qadmin-header-search {
  align-items: center;
  background: var(--sub-navy-900);
  border: 1px solid var(--sub-navy-900);
  border-radius: var(--sub-radius-pill);
  color: var(--sub-mint-300);
  display: flex;
  box-sizing: border-box;
  flex: 0 1 420px;
  gap: 8px;
  height: 34px;
  margin: 0 24px;
  padding: 0 18px;
}

.qadmin-header-search:focus-within {
  border-color: var(--sub-mint);
}

.qadmin-header-search-icon {
  flex: none;
  height: 16px;
  width: 16px;
}

.qadmin-header-search-input {
  background: transparent;
  border: 0;
  color: var(--sub-warm-ivory);
  font: inherit;
  font-size: 14px;
  outline: none;
  width: 100%;
}

.qadmin-header-search-input::placeholder {
  color: var(--sub-cool-gray);
}

/* ---- Filter bar: full-width row of pill dropdowns below the header ---- */
.qadmin-filterbar {
  align-items: center;
  background: var(--sub-ivory-bright);
  border-bottom: 1px solid var(--sub-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 10px 20px;
}

.qadmin-filterbar-label {
  align-items: center;
  color: var(--sub-cool-gray);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qadmin-filterbar-form {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 10px;
}

.qadmin-filterbar-clear {
  align-items: center;
  color: var(--sub-mint-900);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
  margin-left: auto;
  text-decoration: none;
}

.qadmin-pill {
  appearance: none;
  background-color: var(--sub-ivory-bright);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-pill);
  color: var(--sub-deep-navy);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 32px 8px 16px;
}

.qadmin-pill:focus {
  border-color: var(--sub-mint);
  box-shadow: 0 0 0 2px var(--sub-bg), 0 0 0 4px var(--sub-mint);
  outline: none;
}

.qadmin-pill--compact {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qadmin-visually-hidden {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.qadmin-list h1,
.qadmin-editor h2,
.qadmin-card h3,
.qadmin-modal h2 {
  margin: 0;
}

.qadmin-card h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.qadmin-card h3 {
  color: var(--sub-mint-900);
  margin-bottom: 14px;
}

.qadmin-clear-link,
.qadmin-chip {
  color: var(--sub-mint-900);
  font-size: 12px;
  font-weight: 800;
}

.qadmin-field,
.qadmin-row-side,
.qadmin-editor-form,
.qadmin-choice-fields {
  display: flex;
  flex-direction: column;
}

.qadmin-field {
  gap: 6px;
}

.qadmin-field > span {
  color: var(--sub-cool-gray);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qadmin-input {
  background: var(--sub-ivory-bright);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-sm);
  box-shadow: var(--sub-shadow-inset);
  color: var(--sub-deep-navy);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  width: 100%;
}

.qadmin-input:focus {
  border-color: var(--sub-mint);
  box-shadow: 0 0 0 2px var(--sub-bg), 0 0 0 4px var(--sub-mint);
  outline: none;
}

.qadmin-textarea {
  min-height: 84px;
  resize: vertical;
}

.qadmin-multi {
  min-height: 96px;
}

.qadmin-primary,
.qadmin-secondary,
.qadmin-danger,
.qadmin-icon-button,
.qadmin-tab,
.qadmin-sort-link {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  text-decoration: none;
}

.qadmin-primary {
  background: var(--sub-mint);
  border-radius: var(--sub-radius-md);
  box-shadow: var(--sub-shadow-mint);
  color: var(--sub-navy-900);
  padding: 10px 14px;
}

.qadmin-primary.is-saved {
  background: var(--sub-ivory-shade);
  box-shadow: none;
  color: var(--sub-cool-gray);
}

.qadmin-secondary {
  background: var(--sub-ivory-bright);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-md);
  color: var(--sub-deep-navy);
  padding: 10px 14px;
}

.qadmin-secondary.is-disabled {
  opacity: .4;
  pointer-events: none;
}

.qadmin-icon {
  height: 16px;
  width: 16px;
}

.qadmin-inline-icon {
  height: 13px;
  width: 13px;
}

.qadmin-list {
  background: var(--sub-warm-ivory);
  border-right: 1px solid var(--sub-border);
}

.qadmin-list-toolbar {
  align-items: center;
  background: var(--sub-warm-ivory);
  border-bottom: 1px solid var(--sub-border);
  display: flex;
  justify-content: space-between;
  min-height: 56px;
  padding: 12px 20px;
}

.qadmin-list-toolbar h1 {
  font-size: 16px;
  font-weight: 800;
}

.qadmin-list-toolbar p,
.qadmin-row-side,
.qadmin-helper,
.qadmin-empty p {
  color: var(--sub-cool-gray);
  font-size: 12px;
  margin: 0;
}

.qadmin-sort {
  background: var(--sub-ivory-shade);
  border-radius: var(--sub-radius-pill);
  display: flex;
  padding: 3px;
}

.qadmin-sort-link {
  border-radius: var(--sub-radius-pill);
  color: var(--sub-cool-gray);
  padding: 7px 10px;
}

.qadmin-sort-link.is-active {
  background: var(--sub-deep-navy);
  color: var(--sub-warm-ivory);
}

.qadmin-chips {
  border-bottom: 1px solid var(--sub-border);
  color: var(--sub-cool-gray);
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 800;
  gap: 8px;
  padding: 8px 20px;
  text-transform: uppercase;
}

.qadmin-chip {
  background: var(--sub-soft-mint);
  border: 1px solid var(--sub-border-mint);
  border-radius: var(--sub-radius-pill);
  padding: 5px 9px;
  text-transform: none;
}

.qadmin-row {
  color: inherit;
  display: grid;
  gap: 14px;
  grid-template-columns: 64px 1fr auto;
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--sub-border);
}

.qadmin-row:hover {
  background: var(--sub-ivory-bright);
}

.qadmin-row.is-selected {
  background: var(--sub-soft-mint);
  box-shadow: inset 3px 0 0 var(--sub-mint);
}

.qadmin-row-id {
  color: var(--sub-cool-gray);
  font-family: var(--sub-font-mono);
  font-size: 11px;
}

.qadmin-row-stem {
  display: -webkit-box;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.qadmin-row-meta,
.qadmin-editor-meta,
.qadmin-preview-eyebrow {
  color: var(--sub-cool-gray);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  gap: 8px;
  margin-top: 8px;
}

.qadmin-mint-meta {
  align-items: center;
  color: var(--sub-mint-900);
  display: inline-flex;
  gap: 4px;
}

.qadmin-row-taxonomy {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.qadmin-row-pips {
  flex-shrink: 0;
  gap: 3px;
}

.qadmin-row-pips .qadmin-difficulty-pip {
  height: 10px;
  width: 5px;
}

.qadmin-board-pill,
.qadmin-status {
  align-items: center;
  border-radius: var(--sub-radius-pill);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
}

.qadmin-board-pill {
  border: 1px solid var(--sub-navy-100);
  color: var(--sub-navy-700);
}

.qadmin-status-draft {
  background: var(--sub-ivory-shade);
  color: #7b8491;
}

.qadmin-status-in-review {
  background: var(--sub-navy-100);
  color: var(--sub-deep-navy);
}

.qadmin-status-published {
  background: var(--sub-mint-100);
  color: var(--sub-mint-900);
}

.qadmin-status-retired {
  background: #f4dad3;
  color: var(--sub-danger);
}

.qadmin-row-side {
  align-items: flex-end;
  gap: 8px;
  min-width: 128px;
  text-align: right;
}

.qadmin-editor {
  background: var(--sub-warm-ivory);
}

.qadmin-editor-form {
  min-height: 100%;
}

.qadmin-editor-sticky {
  background: var(--sub-ivory-bright);
  box-shadow: var(--sub-shadow-1);
  position: sticky;
  top: 0;
  z-index: 4;
}

.qadmin-editor-head {
  align-items: flex-start;
  background: var(--sub-ivory-bright);
  border-bottom: 1px solid var(--sub-border);
  display: flex;
  justify-content: space-between;
  padding: 18px 32px 14px;
}

.qadmin-editor-head h2 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 8px;
}

.qadmin-editor-actions {
  gap: 10px;
}

.qadmin-tabs {
  background: var(--sub-ivory-bright);
  border-bottom: 1px solid var(--sub-border);
  gap: 20px;
  padding: 0 32px;
}

.qadmin-tab {
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--sub-cool-gray);
  padding: 13px 0 11px;
}

.qadmin-tab.is-active {
  border-bottom-color: var(--sub-mint);
  color: var(--sub-deep-navy);
}

.qadmin-tab-count {
  background: var(--sub-soft-mint);
  border-radius: var(--sub-radius-pill);
  color: var(--sub-mint-900);
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
}

.qadmin-editor-scroll {
  padding: 22px 32px 40px;
}

.qadmin-card,
.qadmin-preview-card,
.qadmin-modal-card {
  background: #fff;
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-lg);
  box-shadow: var(--sub-shadow-1);
}

.qadmin-card {
  margin-bottom: 18px;
  padding: 20px;
}

.qadmin-grid-2 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qadmin-classification-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
}

.qadmin-difficulty-field {
  grid-column: 1;
}

.qadmin-difficulty-options {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qadmin-difficulty-option {
  cursor: pointer;
  position: relative;
}

.qadmin-difficulty-radio {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.qadmin-difficulty-card {
  align-items: flex-start;
  background: #fff;
  border: 1.5px solid var(--sub-border);
  border-radius: var(--sub-radius-md);
  color: var(--sub-deep-navy);
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-height: 58px;
  padding: 9px 7px;
  transition: background var(--sub-dur-fast) var(--sub-ease-out), border-color var(--sub-dur-fast) var(--sub-ease-out), color var(--sub-dur-fast) var(--sub-ease-out);
}

.qadmin-difficulty-radio:focus-visible + .qadmin-difficulty-card {
  box-shadow: 0 0 0 2px var(--sub-bg), 0 0 0 4px var(--sub-mint);
}

.qadmin-difficulty-radio:checked + .qadmin-difficulty-card {
  background: var(--sub-deep-navy);
  border-color: var(--sub-deep-navy);
  color: var(--sub-warm-ivory);
}

.qadmin-difficulty-pips {
  display: flex;
  gap: 4px;
}

.qadmin-difficulty-pip {
  background: var(--sub-ivory-shade);
  border-radius: 3px;
  display: block;
  height: 15px;
  width: 7px;
}

.qadmin-difficulty-pip.is-filled {
  background: var(--sub-deep-navy);
}

.qadmin-difficulty-radio:checked + .qadmin-difficulty-card .qadmin-difficulty-pip {
  background: rgba(255, 255, 255, .65);
}

.qadmin-difficulty-radio:checked + .qadmin-difficulty-card .qadmin-difficulty-pip.is-filled {
  background: var(--sub-mint-300);
}

.qadmin-difficulty-label {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.qadmin-assignee-field {
  grid-column: 2;
}

.qadmin-taxonomy-field {
  grid-column: auto;
}

.qadmin-choice {
  align-items: flex-start;
  background: var(--sub-ivory-bright);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-md);
  display: grid;
  gap: 12px;
  grid-template-columns: 32px 1fr 34px;
  margin-bottom: 10px;
  padding: 12px;
}

.qadmin-source-row {
  background: var(--sub-ivory-bright);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
}

.qadmin-source-tag {
  align-self: flex-start;
}

.qadmin-source-head {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: 78px minmax(160px, 1fr) 34px;
}

.qadmin-source-line {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
}

.qadmin-source-primary {
  align-items: center;
  color: var(--sub-cool-gray);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  min-height: 42px;
}

.qadmin-source-primary input {
  accent-color: var(--sub-mint);
}

.qadmin-source-add {
  margin-bottom: 18px;
}

.qadmin-metadata-grid {
  margin-top: 2px;
}

.qadmin-choice-letter {
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  position: relative;
  width: 28px;
}

.qadmin-choice-letter input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  margin: 0;
  position: absolute;
  opacity: 0;
  width: 100%;
  z-index: 1;
}

.qadmin-choice-letter span {
  align-items: center;
  border: 1px solid var(--sub-border);
  border-radius: 999px;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  pointer-events: none;
  position: relative;
  width: 28px;
  z-index: 0;
}

.qadmin-choice-letter input:checked + span {
  background: var(--sub-mint);
  border-color: var(--sub-mint);
  box-shadow: 0 0 0 4px rgba(95, 191, 175, .2);
  color: var(--sub-navy-900);
}

.qadmin-choice-fields {
  gap: 8px;
}

.qadmin-icon-button {
  background: transparent;
  border-radius: var(--sub-radius-sm);
  color: var(--sub-cool-gray);
  height: 34px;
  width: 34px;
}

.qadmin-icon-button:hover {
  background: var(--sub-ivory-shade);
  color: var(--sub-danger);
}

.qadmin-icon-button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.qadmin-helper {
  margin-top: 10px;
}

.qadmin-image-row {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.qadmin-image-preview {
  align-items: center;
  background: var(--sub-ivory-shade);
  border-radius: var(--sub-radius-sm);
  display: flex;
  flex: 0 0 auto;
  height: 72px;
  justify-content: center;
  overflow: hidden;
  width: 72px;
}

.qadmin-image-thumb {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.qadmin-image-placeholder {
  color: var(--sub-cool-gray);
}

.qadmin-image-fields {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.qadmin-image-label {
  font-size: 12px;
  font-weight: 600;
}

.qadmin-file-input {
  font-size: 13px;
  padding: 6px 8px;
}

.qadmin-image-fields .qadmin-helper {
  margin-top: 0;
}

.qadmin-figure-button {
  cursor: zoom-in;
  display: block;
  padding: 0;
  width: 100%;
}

.qadmin-danger-card {
  border-color: #e9b7aa;
}

.qadmin-danger-card h3,
.qadmin-danger {
  color: var(--sub-danger);
}

.qadmin-danger {
  background: #f8e6e0;
  border-radius: var(--sub-radius-md);
  padding: 10px 14px;
}

.qadmin-preview-card {
  margin: 0 auto;
  max-width: 720px;
  padding: 32px;
}

.qadmin-preview-card h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  margin: 18px 0;
}

.qadmin-preview-figures {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 18px;
}

.qadmin-preview-figure {
  margin: 0;
}

.qadmin-preview-figure-img {
  border-radius: var(--sub-radius-md);
  box-shadow: var(--sub-shadow-1);
  width: 100%;
}

.qadmin-preview-figure figcaption {
  color: var(--sub-cool-gray);
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
}

.qadmin-preview-hint {
  color: var(--sub-cool-gray);
  font-size: 13px;
  margin-bottom: 12px;
}

.qadmin-preview-pane.is-revealed .qadmin-preview-hint {
  display: none;
}

.qadmin-preview-choices {
  display: grid;
  gap: 10px;
}

.qadmin-preview-choice {
  align-items: flex-start;
  background: var(--sub-ivory-bright);
  border: 1.5px solid var(--sub-border);
  border-radius: var(--sub-radius-md);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  transition: background var(--sub-dur-fast) var(--sub-ease-out), border-color var(--sub-dur-fast) var(--sub-ease-out);
  width: 100%;
}

.qadmin-preview-choice:hover {
  background: var(--sub-soft-mint);
}

.qadmin-preview-pane.is-revealed .qadmin-preview-choice {
  cursor: default;
}

.qadmin-preview-pane.is-revealed .qadmin-preview-choice:hover {
  background: var(--sub-ivory-bright);
}

.qadmin-preview-choice-letter {
  align-items: center;
  background: var(--sub-ivory-shade);
  border-radius: 999px;
  display: flex;
  flex-shrink: 0;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.qadmin-preview-choice-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding-top: 3px;
}

.qadmin-preview-selected-badge {
  background: var(--sub-deep-navy);
  border-radius: var(--sub-radius-pill);
  color: #fff;
  display: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-left: 8px;
  padding: 2px 8px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.qadmin-preview-choice.is-selected .qadmin-preview-selected-badge {
  display: inline-block;
}

.qadmin-preview-choice-explanation {
  color: var(--sub-cool-gray);
  display: none;
  font-size: 13px;
  line-height: 1.5;
}

.qadmin-preview-pane.is-revealed .qadmin-preview-choice-explanation {
  display: block;
}

.qadmin-preview-choice-icon {
  flex-shrink: 0;
}

.qadmin-preview-icon {
  display: none;
  height: 20px;
  width: 20px;
}

.qadmin-preview-choice.is-correct {
  background: var(--sub-soft-mint);
  border-color: var(--sub-mint);
}

.qadmin-preview-choice.is-correct .qadmin-preview-icon-correct {
  color: var(--sub-mint-900);
  display: block;
}

.qadmin-preview-choice.is-correct .qadmin-preview-choice-explanation {
  color: var(--sub-mint-900);
}

.qadmin-preview-choice.is-incorrect {
  background: #f8e6e0;
  border-color: var(--sub-danger);
}

.qadmin-preview-choice.is-incorrect .qadmin-preview-icon-incorrect {
  color: var(--sub-danger);
  display: block;
}

.qadmin-preview-choice.is-incorrect .qadmin-preview-choice-explanation {
  color: var(--sub-danger);
}

.qadmin-preview-result {
  display: none;
  margin-top: 18px;
}

.qadmin-preview-pane.is-revealed .qadmin-preview-result {
  display: block;
}

.qadmin-preview-result-label {
  color: var(--sub-cool-gray);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.qadmin-preview-explanation p {
  color: var(--sub-deep-navy);
  font-size: 14px;
  line-height: 1.6;
}

.qadmin-preview-references {
  margin-top: 16px;
}

.qadmin-preview-references ul {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qadmin-preview-references li {
  font-size: 13px;
}

.qadmin-preview-reference-meta {
  color: var(--sub-fg-3);
}

.qadmin-preview-footer {
  align-items: center;
  display: none;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.qadmin-preview-pane.is-revealed .qadmin-preview-footer {
  display: flex;
}

.qadmin-preview-reset {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.qadmin-history-empty {
  color: var(--sub-cool-gray);
  font-size: 14px;
  padding: 8px 0;
}

.qadmin-history-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 74px 1fr;
  padding: 14px 0;
}

.qadmin-history-row + .qadmin-history-row {
  border-top: 1px dashed var(--sub-border);
}

.qadmin-history-chip {
  align-self: start;
  background: var(--sub-navy-100);
  border-radius: var(--sub-radius-pill);
  color: var(--sub-deep-navy);
  font-family: var(--sub-font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px;
  text-align: center;
}

.qadmin-history-title {
  color: var(--sub-deep-navy);
  font-size: 14px;
  font-weight: 800;
}

.qadmin-history-meta {
  color: var(--sub-cool-gray);
  font-size: 12px;
  margin-top: 4px;
}

.qadmin-history-chip-created {
  background: var(--sub-mint-100);
  color: var(--sub-mint-900);
}

.qadmin-history-chip-removed {
  background: color-mix(in srgb, var(--sub-danger) 16%, transparent);
  color: var(--sub-danger);
}

.qadmin-history-changes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.qadmin-history-change {
  align-items: baseline;
  column-gap: 6px;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.4;
}

.qadmin-history-field {
  color: var(--sub-deep-navy);
  font-weight: 700;
}

.qadmin-history-field::after {
  content: ":";
}

.qadmin-history-old {
  color: var(--sub-cool-gray);
  text-decoration: line-through;
  word-break: break-word;
}

.qadmin-history-arrow {
  color: var(--sub-cool-gray);
}

.qadmin-history-new {
  color: var(--sub-navy-900);
  word-break: break-word;
}

.qadmin-empty,
.qadmin-editor-empty {
  align-items: center;
  color: var(--sub-cool-gray);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 360px;
  padding: 32px;
  text-align: center;
}

.qadmin-empty h2,
.qadmin-editor-empty h2 {
  color: var(--sub-deep-navy);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.qadmin-empty-icon {
  background: var(--sub-soft-mint);
  border-radius: 999px;
  color: var(--sub-mint-900);
  height: 72px;
  padding: 20px;
  width: 72px;
}

.qadmin-modal {
  background: transparent;
  border: 0;
  padding: 0;
  width: min(540px, calc(100vw - 48px));
}

.qadmin-modal::backdrop {
  background: rgba(31, 58, 95, .45);
}

.qadmin-modal-card {
  overflow: hidden;
}

.qadmin-modal-head,
.qadmin-modal-foot {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 18px 20px;
}

.qadmin-modal-head {
  border-bottom: 1px solid var(--sub-border);
}

.qadmin-modal-body {
  padding: 20px;
}

.qadmin-modal-foot {
  background: var(--sub-ivory-bright);
  border-top: 1px solid var(--sub-border);
}

.qadmin-toast {
  align-items: center;
  background: var(--sub-deep-navy);
  border-radius: var(--sub-radius-pill);
  bottom: 24px;
  box-shadow: var(--sub-shadow-3);
  color: var(--sub-warm-ivory);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  left: 50%;
  padding: 12px 16px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 10;
}

.is-hidden {
  display: none !important;
}

.qadmin-list::-webkit-scrollbar,
.qadmin-editor::-webkit-scrollbar {
  width: 10px;
}

.qadmin-list::-webkit-scrollbar-thumb,
.qadmin-editor::-webkit-scrollbar-thumb {
  background: rgba(31, 58, 95, .22);
  border-radius: 999px;
}

/* AI busy / loading state for reword + originality panels */
.qadmin-ai-busy {
  align-items: center;
  color: var(--sub-cool-gray);
  display: none;
  font-size: .875rem;
  gap: 8px;
  margin-top: 12px;
}

.qadmin-card.is-busy .qadmin-ai-busy {
  display: flex;
}

.qadmin-card.is-busy .qadmin-card-head a {
  opacity: .5;
  pointer-events: none;
}

.qadmin-spinner {
  animation: qadmin-spin .6s linear infinite;
  border: 2px solid var(--sub-border);
  border-radius: 50%;
  border-top-color: var(--sub-deep-navy);
  display: inline-block;
  height: 16px;
  width: 16px;
}

@keyframes qadmin-spin {
  to { transform: rotate(360deg); }
}

/* Expand editor: hide the filter bar and the question list so the editor takes over
   the full space. Toggled by question-console#toggleExpand. */
.qadmin-shell.is-editor-expanded {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
}

.qadmin-shell.is-editor-expanded .qadmin-filterbar,
.qadmin-shell.is-editor-expanded .qadmin-list {
  display: none;
}

.qadmin-minimize-icon {
  display: none;
}

.qadmin-shell.is-editor-expanded .qadmin-expand-icon {
  display: none;
}

.qadmin-shell.is-editor-expanded .qadmin-minimize-icon {
  display: inline-flex;
}

/* ---- Card head: title left, action (e.g. Show original) right ---- */
.qadmin-card-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.qadmin-card-head h3 {
  margin-bottom: 0;
}

.qadmin-card-title {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- "AI edited" pill ---- */
.qadmin-ai-pill {
  align-items: center;
  background: var(--sub-soft-mint);
  border: 1px solid var(--sub-border-mint);
  border-radius: var(--sub-radius-pill);
  color: var(--sub-mint-900);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  letter-spacing: .04em;
  padding: 2px 8px;
  text-transform: none;
}

/* ---- "Review pending" pill (amber) ---- */
.qadmin-review-pill {
  align-items: center;
  background: rgba(224, 162, 74, .16);
  border: 1px solid rgba(224, 162, 74, .4);
  border-radius: var(--sub-radius-pill);
  color: #8B6010;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  letter-spacing: .04em;
  padding: 2px 8px;
  text-transform: none;
}

.qadmin-citation-pill {
  align-items: center;
  background: rgba(79, 110, 224, .14);
  border: 1px solid rgba(79, 110, 224, .38);
  border-radius: var(--sub-radius-pill);
  color: #2F4496;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  letter-spacing: .04em;
  padding: 2px 8px;
  text-transform: none;
}

/* ---- "Member flagged" pill (rose) ---- */
.qadmin-flag-pill {
  align-items: center;
  background: rgba(214, 69, 80, .14);
  border: 1px solid rgba(214, 69, 80, .4);
  border-radius: var(--sub-radius-pill);
  color: #A32330;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  letter-spacing: .04em;
  padding: 2px 8px;
  text-transform: none;
}

/* ---- Member flags card (editor) ---- */
.qadmin-flags-card {
  background: rgba(214, 69, 80, .05);
  border-color: rgba(214, 69, 80, .32);
}

.qadmin-flags-card h3 {
  color: #A32330;
}

.qadmin-flags-summary {
  color: #A32330;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.qadmin-flags-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qadmin-flags-list li {
  color: var(--sub-navy-700);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
}

.qadmin-flags-list .qadmin-flags-when {
  color: var(--sub-navy-500);
  flex-shrink: 0;
}

.qadmin-flags-more {
  color: var(--sub-navy-500);
  font-size: 11px;
  margin-top: 6px;
}

/* ---- Show/hide original toggle ---- */
.qadmin-original-toggle {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  gap: 6px;
  padding: 6px 12px;
}

.qadmin-original-toggle-sm {
  font-size: 11px;
  padding: 4px 10px;
  white-space: nowrap;
}

.qadmin-stem-card.is-open .qadmin-original-toggle,
.qadmin-choice.is-open .qadmin-original-toggle {
  background: var(--sub-soft-mint);
  border-color: var(--sub-border-mint);
  color: var(--sub-mint-900);
}

/* ---- Read-only original source panel ---- */
.qadmin-original-readonly {
  background: var(--sub-ivory-shade);
  border: 1px dashed var(--sub-border);
  border-radius: var(--sub-radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0;
  padding: 14px;
}

.qadmin-original-readonly[hidden] {
  display: none;
}

.qadmin-original-readonly-head {
  align-items: center;
  color: var(--sub-cool-gray);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.qadmin-original-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qadmin-original-label {
  color: var(--sub-cool-gray);
  font-size: 11px;
  font-weight: 700;
}

.qadmin-original-text {
  color: var(--sub-deep-navy);
  font-size: 14px;
  line-height: 1.5;
}

.qadmin-original-text p {
  margin: 0 0 6px;
}

.qadmin-original-text p:last-child {
  margin-bottom: 0;
}

/* ---- Choice text + toggle row ---- */
.qadmin-choice-text-row {
  align-items: center;
  display: flex;
  gap: 8px;
}

.qadmin-choice-text-row .qadmin-input {
  flex: 1;
  min-width: 0;
}

/* ---- AI rewording history (each row re-opens the review screen) ---- */
.qadmin-reword-review-link {
  margin-bottom: 12px;
}

.qadmin-reword-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qadmin-reword-history-row {
  align-items: center;
  background: var(--sub-ivory-bright);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-md);
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.qadmin-reword-history-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--sub-dur-fast) var(--sub-ease-out), background var(--sub-dur-fast) var(--sub-ease-out);
}

.qadmin-reword-history-link:hover {
  background: var(--sub-soft-mint);
  border-color: var(--sub-border-mint);
}

.qadmin-reword-history-meta {
  color: var(--sub-cool-gray);
  flex: 1;
  font-size: 12px;
  min-width: 0;
}

.qadmin-reword-history-review {
  align-items: center;
  color: var(--sub-mint-900);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

/* AI citation finder */
.qadmin-ai-busy.is-visible {
  display: flex;
}

.qadmin-citation-candidates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.qadmin-citation-candidate {
  align-items: flex-start;
  border: 1px solid var(--sub-border);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.qadmin-citation-candidate.is-accepted {
  background: var(--sub-mint-50, #f0fdf9);
  border-color: var(--sub-mint-900, #0f766e);
}

.qadmin-citation-candidate.is-source-match {
  border-color: var(--sub-mint-900, #0f766e);
  box-shadow: 0 0 0 1px var(--sub-mint-900, #0f766e);
}

.qadmin-citation-candidate-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.qadmin-citation-candidate-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qadmin-citation-candidate-title {
  color: var(--sub-deep-navy);
  font-weight: 700;
}

.qadmin-citation-source-pill {
  align-items: center;
  background: var(--sub-mint-900, #0f766e);
  border-radius: 999px;
  color: var(--sub-warm-ivory, #fff);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  gap: 4px;
  padding: 2px 9px;
}

.qadmin-citation-candidate-meta {
  align-items: center;
  color: var(--sub-cool-gray);
  display: flex;
  flex-wrap: wrap;
  font-size: .8125rem;
  gap: 8px;
}

.qadmin-citation-tag {
  background: var(--sub-border);
  border-radius: 999px;
  color: var(--sub-deep-navy);
  font-weight: 700;
  padding: 1px 8px;
}

.qadmin-citation-rationale {
  color: var(--sub-cool-gray);
  font-size: .8125rem;
  margin: 0;
}

.qadmin-citation-candidate-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
}
/* ============================================================
   AI QUESTION REWRITE — REVIEW / APPROVAL EXPERIENCE
   Recreated from the Step Up Boards hi-fi prototype.
   ============================================================ */

.qreview-body {
  margin: 0;
  background: var(--sub-warm-ivory);
  color: var(--sub-deep-navy);
  font-family: var(--sub-font-body);
}

.qreview-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.qreview-icon { width: 16px; height: 16px; flex-shrink: 0; }
.qreview-chip-icon { width: 11px; height: 11px; flex-shrink: 0; }

.qreview-spin { animation: qreview-spin 0.8s linear infinite; }
@keyframes qreview-spin { to { transform: rotate(360deg); } }
@keyframes qreview-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.qreview-fade-up { animation: qreview-fade-up 320ms var(--sub-ease-out) both; }

/* ---------- Nav ---------- */
.qreview-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sub-border);
}

.qreview-nav-left { display: flex; align-items: center; gap: 16px; }

.qreview-logo {
  width: 28px;
  height: 28px;
  background: var(--sub-deep-navy);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qreview-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub-cool-gray); }
.qreview-crumb-current { font-weight: 700; color: var(--sub-deep-navy); }

/* ---------- Regenerating banner ---------- */
.qreview-regen-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--sub-deep-navy);
  color: var(--sub-warm-ivory);
  padding: 11px 40px;
  font-size: 13px;
  font-weight: 600;
}
.qreview-regen-banner .qreview-icon { color: var(--sub-mint); }

.qreview-page.is-regenerating .qreview-regen-banner { display: flex; }
.qreview-page.is-regenerating .qreview-main { opacity: 0.4; transition: opacity 300ms; }
.qreview-page.is-regenerating .qreview-actionbar .qreview-btn { opacity: 0.4; pointer-events: none; }

/* ---------- Main ---------- */
.qreview-main {
  flex: 1;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 40px 120px;
}

.qreview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.qreview-chips { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.qreview-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sub-font-display);
}
.qreview-chip-mint { background: var(--sub-soft-mint); color: var(--sub-mint-900); }
.qreview-chip-ivory { background: var(--sub-ivory-shade); color: var(--sub-deep-navy); }

.qreview-title { font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--sub-deep-navy); font-family: var(--sub-font-display); }
.qreview-subtitle { margin: 8px 0 0; max-width: 620px; font-size: 13px; line-height: 1.5; color: var(--sub-cool-gray); }

.qreview-count {
  flex-shrink: 0;
  background: var(--sub-soft-mint);
  border: 1px solid var(--sub-border-mint);
  border-radius: 14px;
  padding: 12px 20px;
  text-align: center;
}
.qreview-count-number { font-size: 34px; font-weight: 800; line-height: 1; color: var(--sub-mint-900); font-family: var(--sub-font-display); }
.qreview-count-label { font-size: 10px; font-weight: 700; margin-top: 3px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub-mint-700); }

.qreview-sections { display: flex; flex-direction: column; gap: 12px; }

/* ---------- QA report ---------- */
.qreview-qa {
  background: var(--sub-soft-mint);
  border: 1px solid var(--sub-border-mint);
  border-radius: 16px;
  padding: 16px 20px;
}
.qreview-qa-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qreview-qa-spark { width: 14px; height: 14px; color: var(--sub-mint-700); }
.qreview-qa-title { font-size: 13px; font-weight: 700; color: var(--sub-deep-navy); }
.qreview-qa-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.qreview-qa-item { display: flex; gap: 9px; align-items: flex-start; }
.qreview-qa-icon {
  margin-top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(95, 191, 175, 0.2);
  color: var(--sub-mint-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qreview-qa-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub-mint-900); margin-bottom: 2px; }
.qreview-qa-value { font-size: 12px; color: var(--sub-deep-navy); line-height: 1.45; }

.qreview-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.qreview-pill-ok { background: rgba(74, 167, 151, 0.14); color: var(--sub-mint-900); }
.qreview-pill-warn { background: rgba(224, 162, 74, 0.14); color: #8B6010; }

/* ---------- Diff cards ---------- */
.qreview-card {
  border: 1px solid var(--sub-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sub-shadow-1);
}
.qreview-card-head {
  padding: 10px 18px;
  background: var(--sub-warm-ivory);
  border-bottom: 1px solid var(--sub-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qreview-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub-mint-900); font-family: var(--sub-font-display); }
.qreview-card-count { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--sub-mint-900); }

.qreview-card-body { display: grid; grid-template-columns: 1fr 1px 1fr; }
.qreview-divider { background: var(--sub-border); }
.qreview-side { padding: 16px 18px; }
.qreview-side-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub-cool-gray); margin-bottom: 6px; }
.qreview-side-label-ai { color: var(--sub-mint-900); }
.qreview-side-text { font-size: 14px; color: var(--sub-cool-gray); line-height: 1.55; }
.qreview-side-text-ai { color: var(--sub-deep-navy); }
.qreview-side-ai.is-changed { background: rgba(230, 244, 241, 0.3); }

.qreview-hi {
  background: rgba(95, 191, 175, 0.22);
  color: var(--sub-mint-900);
  border-radius: 3px;
  padding: 1px 3px;
  font-style: normal;
  font-weight: 600;
}

/* ---------- Choices diff ---------- */
.qreview-choice-row { display: grid; grid-template-columns: 1fr 1px 1fr; border-top: 1px solid var(--sub-ivory-shade); }
.qreview-choice-row.is-first { border-top: none; }
.qreview-choice-side { padding: 12px 16px; display: flex; gap: 10px; }
.qreview-choice-side-ai.is-changed { background: rgba(230, 244, 241, 0.3); }
.qreview-letter {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--sub-ivory-shade);
  color: var(--sub-deep-navy);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--sub-font-display);
}
.qreview-letter.is-correct { background: var(--sub-mint); }
.qreview-choice-text { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.qreview-choice-text-original { color: var(--sub-cool-gray); }
.qreview-choice-text-ai { color: var(--sub-deep-navy); }
.qreview-correct-tag { margin-left: 7px; font-size: 10px; color: var(--sub-mint-700); font-weight: 700; }
.qreview-choice-rationale { font-size: 12px; line-height: 1.45; }
.qreview-rationale-original { color: var(--sub-cool-gray); }
.qreview-rationale-ai { color: var(--sub-deep-navy); }

/* ---------- Action bar ---------- */
.qreview-actionbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 64px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  background: rgba(246, 244, 239, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--sub-border);
}
.qreview-actionbar-inner { max-width: 960px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.qreview-actionbar-left { display: flex; gap: 10px; }
.qreview-actionbar-right { display: flex; gap: 10px; }

.qreview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sub-font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms var(--sub-ease-out);
}
.qreview-btn:active { transform: scale(0.97); }
.qreview-btn-lg { font-size: 15px; padding: 13px 28px; }
.qreview-btn-primary { background: var(--sub-mint); color: var(--sub-deep-navy); box-shadow: var(--sub-shadow-mint); }
.qreview-btn-danger { background: transparent; color: var(--sub-danger); box-shadow: inset 0 0 0 1.5px var(--sub-danger); }
.qreview-btn-ghost { background: transparent; color: var(--sub-deep-navy); box-shadow: inset 0 0 0 1.5px var(--sub-border); }

/* ---------- Approving (loading) state ---------- */
.qreview-btn-label { display: inline-flex; align-items: center; gap: 7px; }
.qreview-btn-busy { display: none; align-items: center; gap: 7px; }

.qreview-page.is-approving .qreview-actionbar .qreview-btn { pointer-events: none; }
.qreview-page.is-approving .qreview-btn-danger,
.qreview-page.is-approving .qreview-btn-ghost { opacity: 0.4; }
.qreview-page.is-approving .qreview-btn-primary .qreview-btn-label { display: none; }
.qreview-page.is-approving .qreview-btn-primary .qreview-btn-busy { display: inline-flex; }
/* Referral modal ("give $50, get $50"). Structure mirrors paywall.css.
   Every value comes from the design-system custom properties in
   colors_and_type.css — the design handoff's hexes are already defined there,
   so nothing is hardcoded. */

/* Boxless wrapper around the header and the modal, so both sit under one
   Stimulus controller without introducing a box. A real box here would confine
   the header's `position: sticky` to the wrapper's own height and stop it
   sticking; `display: contents` leaves the header's layout untouched. */
.rf-root { display: contents; }

/* ── Navbar pill ─────────────────────────────────────────────────────────── */
/* No `display` here on purpose. application.css loads after the Tailwind build,
   so a `display` declaration in this class would tie with `.hidden` on
   specificity and win on source order — leaving the desktop pill visible on
   mobile, where `hidden sm:inline-flex` is meant to remove it, and putting two
   "Earn $50" links on the page at once. The utility owns display; this owns the
   look. */
.rf-pill {
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border: 1.5px solid var(--sub-border-mint);
  border-radius: var(--sub-radius-pill);
  background: var(--sub-bg-elev);
  color: var(--sub-fg-1);
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-bold);
  font-size: 14px;
  transition: border-color var(--sub-dur-fast) var(--sub-ease-out),
              background-color var(--sub-dur-fast) var(--sub-ease-out),
              transform var(--sub-dur-fast) var(--sub-ease-out);
}

.rf-pill:hover {
  border-color: var(--sub-mint);
  background: var(--sub-soft-mint);
}

.rf-pill:active { transform: scale(0.98); }

.rf-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sub-bg), 0 0 0 4px var(--sub-mint);
}

.rf-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--sub-soft-mint);
  color: var(--sub-mint-900);
  flex-shrink: 0;
}

/* ── Overlay + panel ─────────────────────────────────────────────────────── */
.rf-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  /* Centring is done with `margin: auto` on the panel, not `align-items:
     center`. This overlay is the scroll container, and a centred flex item
     taller than the viewport overflows equally in both directions — putting its
     top above the scrollable area, where it can never be scrolled back into
     view. Auto margins collapse to zero once the free space runs out, so a tall
     panel starts at the top edge and stays reachable. */
  align-items: flex-start;
  justify-content: center;
  padding: 28px;
  /* Navy scrim, never black. */
  background: rgba(31, 58, 95, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 220ms var(--sub-ease-out);
  /* The overlay scrolls, not the panel: a percentage max-height on a flex item
     collapses to zero height in Firefox, which silently clips the whole dialog.
     Same arrangement as paywall.css. */
  overflow-y: auto;
}

/* The author-level `display: flex` above beats the UA's `[hidden] {display:none}`,
   so without this the closed overlay still covers the page and swallows every
   click on the app behind it. */
.rf-overlay[hidden] {
  display: none;
}

.rf-overlay.is-open { opacity: 1; }

.rf-panel {
  display: flex;
  flex-direction: column;
  /* Centres the dialog in the viewport; see the note on .rf-overlay. */
  margin: auto;
  width: 452px;
  max-width: 100%;
  background: var(--sub-ivory-bright);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(31, 58, 95, 0.24);
  transform: translateY(8px);
  transition: transform 400ms var(--sub-ease-out);
}

.rf-overlay.is-open .rf-panel { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .rf-overlay,
  .rf-panel { transition: none; }
  .rf-panel { transform: none; }
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.rf-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 26px 0;
  border-bottom: 1px solid var(--sub-border);
}

.rf-tablist { display: flex; align-items: center; gap: 18px; }

.rf-tab {
  padding-bottom: 10px;
  border-bottom: 2.5px solid transparent;
  background: none;
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-bold);
  font-size: 17px;
  color: var(--sub-fg-2);
}

.rf-tab[aria-selected="true"] {
  color: var(--sub-fg-1);
  border-bottom-color: var(--sub-mint);
}

.rf-icon-btn {
  padding: 4px;
  background: none;
  color: var(--sub-fg-2);
  transition: color var(--sub-dur-fast) var(--sub-ease-out);
}

.rf-icon-btn:hover { color: var(--sub-fg-1); }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.rf-panel-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 26px 28px;
}

.rf-panel-body[hidden] { display: none; }

.rf-offer { display: flex; align-items: flex-start; gap: 14px; }
.rf-offer-copy { display: flex; flex-direction: column; gap: 8px; }

.rf-title {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--sub-fg-1);
}

.rf-body {
  font-size: 15px;
  line-height: var(--sub-lh-base);
  color: var(--sub-fg-2);
}

.rf-mascot { width: 74px; flex-shrink: 0; margin-top: -4px; }

/* ── Link card ───────────────────────────────────────────────────────────── */
.rf-link-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  background: var(--sub-bg-elev);
  border: 1px solid var(--sub-border);
  border-radius: 14px;
}

.rf-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--sub-soft-mint);
  color: var(--sub-mint-900);
  flex-shrink: 0;
}

.rf-link-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rf-link-label { font-size: 12px; color: var(--sub-fg-2); }

.rf-link-value {
  font-weight: var(--sub-fw-bold);
  font-size: 15px;
  color: var(--sub-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Primary CTA ─────────────────────────────────────────────────────────── */
.rf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 22px;
  border-radius: var(--sub-radius-pill);
  background: var(--sub-mint);
  color: var(--sub-fg-on-mint);
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-bold);
  font-size: 16px;
  box-shadow: 0 6px 18px rgba(95, 191, 175, 0.30);
  transition: transform var(--sub-dur-fast) var(--sub-ease-out),
              filter var(--sub-dur-fast) var(--sub-ease-out);
}

.rf-cta:hover:not(:disabled) { background: var(--sub-mint-700); }
.rf-cta:active:not(:disabled) { transform: scale(0.98); }

.rf-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Share row ───────────────────────────────────────────────────────────── */
.rf-share { display: flex; align-items: center; justify-content: center; gap: 12px; }

.rf-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sub-border);
  border-radius: 999px;
  background: var(--sub-bg-elev);
  color: var(--sub-fg-1);
  transition: border-color var(--sub-dur-fast) var(--sub-ease-out),
              background-color var(--sub-dur-fast) var(--sub-ease-out);
}

.rf-share-btn:hover {
  border-color: var(--sub-mint);
  background: var(--sub-soft-mint);
}

.rf-share-btn--text {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 15px;
}

.rf-fine-print {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sub-fg-3);
}

/* ── Rewards tab ─────────────────────────────────────────────────────────── */
.rf-rewards { display: flex; flex-direction: column; gap: 16px; }

.rf-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rf-total {
  font-family: var(--sub-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--sub-fg-1);
}

.rf-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--sub-fw-bold);
  font-size: 14px;
  color: var(--sub-fg-2);
}

.rf-list {
  padding: 4px 16px;
  background: var(--sub-bg-elev);
  border: 1px solid var(--sub-border);
  border-radius: 16px;
}

.rf-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sub-border);
}

.rf-row:last-child { border-bottom: none; }

.rf-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.rf-row-name {
  font-family: var(--sub-font-display);
  font-weight: var(--sub-fw-bold);
  font-size: 15px;
  color: var(--sub-fg-1);
}

.rf-row-status { font-size: 13.5px; color: var(--sub-fg-2); }

.rf-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.rf-chip {
  padding: 5px 11px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
}

.rf-chip--earned { background: var(--sub-soft-mint); color: var(--sub-mint-900); }
.rf-chip--neutral { background: var(--sub-ivory-shade); color: var(--sub-fg-1); font-weight: var(--sub-fw-bold); font-size: 13px; }

.rf-row-date { font-size: 12.5px; color: var(--sub-fg-2); }

.rf-empty {
  padding: 20px 0;
  text-align: center;
  font-size: 14.5px;
  line-height: var(--sub-lh-base);
  color: var(--sub-fg-2);
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */
.rf-skeleton { display: flex; flex-direction: column; gap: 16px; }

.rf-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
  background: var(--sub-bg-elev);
  border: 1px solid var(--sub-border);
  border-radius: 16px;
}

.rf-skeleton-bar {
  height: 14px;
  border-radius: 6px;
  background: var(--sub-ivory-shade);
}

.rf-skeleton-bar--total { height: 22px; width: 60%; }

/* ── Mobile: bottom sheet ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rf-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .rf-panel {
    /* Auto margins outrank align-items, so they have to go for the sheet to
       sit on the bottom edge. */
    margin: 0;
    width: 100%;
    /* vh, not a percentage, so this one resolves against the viewport. */
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 28px 28px 0 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.
 *


 */

/* example - include a custom font (put file in app/assets/fonts) */
 /* @font-face {
   font-family: 'Retrcade Regular';
   font-style: normal;
   font-weight: normal;
   src: url(https://app.stepupboards.com/RetrcadeRegular.woff) format('woff');
 } */