trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

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

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

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

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

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

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

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*

*/

/* ── ActionText / Trix overrides ──────────────────────────────── */

/* Trix toolbar — rule-separated, no background box */
.trix-button-group {
  border: none !important;
  margin-right: 8px !important;
}

.trix-button {
  border:      none !important;
  border-right: 1px solid var(--rule) !important;
  background:  transparent !important;
  color:       var(--grey-3) !important;
  padding:     3px 8px !important;
  font-family: var(--mono) !important;
  font-size:   0.65rem !important;
  transition:  color 0.15s ease !important;
}

.trix-button:hover,
.trix-button--active {
  background: transparent !important;
  color:      var(--ink) !important;
}

.trix-button:last-child { border-right: none !important; }

/* Content area */
.trix-content {
  font-family: 'AnekOdia-Regular', Georgia, serif;
  font-size:   0.9rem;
  line-height: 1.65;
  color:       var(--ink);
}

.trix-content p       { margin-bottom: 0.8rem; }
.trix-content h1      { font-family: var(--serif); font-size: 1.4rem; }
.trix-content blockquote {
  border-left:  2px solid var(--ink);
  padding-left: 14px;
  color:        var(--grey-4);
  font-style:   italic;
  margin:       1rem 0;
}

.trix-content pre {
  font-family:   var(--mono);
  font-size:     0.78rem;
  background:    transparent;
  border-left:   2px solid var(--rule);
  padding:       10px 0 10px 14px;
  color:         var(--grey-4);
}

/* Gallery: image grid (keep existing proportions) */
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex:      1 0 33%;
  padding:   0 0.5em;
  max-width: 33%;
}

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

.trix-content action-text-attachment .attachment {
  padding:   0 !important;
  max-width: 100% !important;
}
/* ═══════════════════════════════════════════════════════════════
   KI_App — Dashboard Stylesheet
   Newspaper editorial. Rules carry the structure. No boxes.
   ═══════════════════════════════════════════════════════════════ */

/* ── MASTHEAD ─────────────────────────────────────────────────── */
.dash-masthead {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  padding:         24px 0 16px;
  border-bottom:   2px solid var(--rule-heavy);
}

.dash-masthead__kicker {
  display:        block;
  font-family:    var(--mono);
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--grey-3);
  margin-bottom:  6px;
}

.dash-masthead__name {
  font-family: var(--serif);
  font-size:   clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color:       var(--ink);
  line-height: 1;
  margin:      0;
  border:      none;
  padding:     0;
}

.dash-masthead__surname { font-style: italic; }

.dash-masthead__right {
  text-align:     right;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            6px;
  padding-bottom: 2px;
}

.dash-masthead__role {
  font-family:    var(--mono);
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--ink);
  border-bottom:  2px solid var(--ink);
  padding-bottom: 2px;
}

.dash-masthead__date {
  font-family: var(--mono);
  font-size:   0.6rem;
  color:       var(--grey-3);
}

/* ── URGENCY BAR ──────────────────────────────────────────────── */
.dash-urgency {
  display:       flex;
  align-items:   center;
  gap:           0;
  border-bottom: 1px solid var(--rule);
  flex-wrap:     wrap;
}

.dash-urgency__label {
  font-family:    var(--mono);
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--grey-3);
  padding:        10px 16px 10px 0;
  border-right:   1px solid var(--rule);
  margin-right:   12px;
  flex-shrink:    0;
}

.dash-urgency__pill {
  font-family:     var(--mono);
  font-size:       0.65rem;
  font-weight:     500;
  padding:         10px 14px;
  color:           var(--ink);
  text-decoration: none;
  background-image: none !important;
  border-right:    1px solid var(--rule);
  transition:      opacity var(--t);
}

.dash-urgency__pill:hover { opacity: 0.5; }

/* ── BENTO GRID ───────────────────────────────────────────────── */
.dash-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0;
  border-top:            1px solid var(--rule);
  margin-top:            0;
}

/* Column rules via left border on inner cards */
.dash-grid > .dash-card:not(:nth-child(3n+1)) {
  border-left: 1px solid var(--rule);
}

/* ── CARD ─────────────────────────────────────────────────────── */
.dash-card {
  background:     transparent;
  padding:        28px 24px;
  display:        flex;
  flex-direction: column;
  gap:            0;
  border-bottom:  1px solid var(--rule);
  animation:      dashFadeIn 0.35s ease both;
  box-shadow:     none;
}

.dash-card:nth-child(1) { animation-delay: 0.05s; }
.dash-card:nth-child(2) { animation-delay: 0.10s; }
.dash-card:nth-child(3) { animation-delay: 0.15s; }
.dash-card:nth-child(4) { animation-delay: 0.20s; }
.dash-card:nth-child(5) { animation-delay: 0.25s; }
.dash-card:nth-child(6) { animation-delay: 0.30s; }

@keyframes dashFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dash-card--span2 {
  grid-column: span 2;
}

.dash-card--span3 {
  grid-column: span 3;
  border-left: none !important;
}

/* ── CARD TYPOGRAPHY ──────────────────────────────────────────── */
.dash-card__kicker {
  font-family:    var(--mono);
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--grey-3);
  margin-bottom:  8px;
}

.dash-card__title {
  font-family:   var(--serif);
  font-size:     1.25rem;
  font-weight:   400;
  color:         var(--ink);
  line-height:   1.2;
  margin-bottom: 18px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  border:        none;
  padding:       0;
}

.dash-card__action {
  margin-top:  auto;
  padding-top: 16px;
  border-top:  1px solid var(--rule);
}

/* ── HERO NUMBERS ─────────────────────────────────────────────── */
.dash-hero-number {
  font-family:   var(--serif);
  font-size:     2.6rem;
  font-weight:   400;
  color:         var(--ink);
  line-height:   1;
  letter-spacing: -0.02em;
  display:       block;
  margin-bottom: 4px;
}

.dash-hero-number--sm { font-size: 1.9rem; }

.dash-hero-sub {
  font-family:   var(--mono);
  font-size:     0.62rem;
  color:         var(--grey-3);
  display:       block;
  margin-bottom: 18px;
}

/* ── PROGRESS BAR ─────────────────────────────────────────────── */
.dash-progress-track {
  height:     4px;
  background: var(--grey-2);
  margin:     8px 0 4px;
  position:   relative;
  overflow:   hidden;
}

.dash-progress-track--sm { height: 2px; }

.dash-progress-fill {
  position:   absolute;
  inset:      0 auto 0 0;
  background: var(--ink);
  transition: width 0.9s cubic-bezier(0.16,1,0.3,1);
}

.dash-progress-labels {
  display:         flex;
  justify-content: space-between;
  font-family:     var(--mono);
  font-size:       0.57rem;
  color:           var(--grey-3);
  margin-bottom:   14px;
}

/* Milestones */
.dash-milestones {
  display: flex;
  gap:     0;
  margin:  4px 0 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.dash-milestone {
  font-family:    var(--mono);
  font-size:      0.7rem;
  font-weight:    500;
  padding:        5px 10px;
  color:          var(--grey-3);
  border-right:   1px solid var(--rule);
  flex:           1;
  text-align:     center;
  transition:     color var(--t);
}

.dash-milestone:last-child { border-right: none; }

.dash-milestone--reached {
  color:       var(--ink);
  font-weight: 700;
}

/* ── STAT ROW ─────────────────────────────────────────────────── */
.dash-stat-row {
  display:  flex;
  gap:      0;
  flex-wrap: wrap;
  margin:   14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.dash-stat-row--tight { gap: 0; }

.dash-stat {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding:        10px 16px 10px 0;
  margin-right:   16px;
  border-right:   1px solid var(--rule);
}

.dash-stat:last-child {
  border-right: none;
  margin-right: 0;
}

.dash-stat__label {
  font-family:    var(--mono);
  font-size:      0.54rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--grey-3);
}

.dash-stat__value {
  font-family: var(--serif);
  font-size:   1.05rem;
  color:       var(--ink);
  line-height: 1;
}

/* Trend */
.dash-trend     { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; }
.dash-trend--up { color: var(--ink); }
.dash-trend--down { color: var(--grey-4); }
.dash-trend-sub { font-family: var(--mono); font-size: 0.57rem; color: var(--grey-3); margin-left: 4px; }

/* ── HORIZONTAL RULE ──────────────────────────────────────────── */
.dash-rule {
  height:     1px;
  background: var(--rule);
  margin:     16px 0;
  border:     none;
}

/* ── KEY-VALUE PAIR ───────────────────────────────────────────── */
.dash-kv {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         7px 0;
  border-bottom:   1px solid var(--rule);
  gap:             16px;
}

.dash-kv:last-child { border-bottom: none; }

.dash-kv__key {
  font-family: var(--mono);
  font-size:   0.62rem;
  color:       var(--grey-3);
}

.dash-kv__val {
  font-family: var(--mono);
  font-size:   0.72rem;
  color:       var(--ink);
  font-weight: 600;
}

/* ── BADGES ───────────────────────────────────────────────────── */
.dash-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

.dash-badge {
  font-family:    var(--mono);
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        3px 0;
  border-bottom:  1.5px solid;
}

.dash-badge--positive { border-color: var(--ink);   color: var(--ink); }
.dash-badge--warning  { border-color: var(--grey-4); color: var(--grey-4); font-style: italic; }
.dash-badge--neutral  { border-color: var(--grey-2); color: var(--grey-3); }

/* ── NOTIF COUNT ──────────────────────────────────────────────── */
.dash-notif-count {
  font-family: var(--mono);
  font-size:   0.6rem;
  font-weight: 700;
  color:       var(--paper);
  background:  var(--ink);
  padding:     1px 6px;
  min-width:   20px;
  text-align:  center;
  display:     inline-block;
}

/* ── MICRO LIST ───────────────────────────────────────────────── */
.dash-micro-list { list-style: none; padding: 0; margin: 0 0 8px; }

.dash-micro-item {
  display:       flex;
  align-items:   baseline;
  gap:           10px;
  padding:       8px 0;
  border-bottom: 1px solid var(--rule);
  border-top:    none;
  background:    transparent;
}

.dash-micro-item:last-child { border-bottom: none; }

.dash-micro-item__name {
  font-family:   var(--mono);
  font-size:     0.7rem;
  font-weight:   600;
  color:         var(--ink);
  flex:          1;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

.dash-micro-item__meta {
  font-family: var(--mono);
  font-size:   0.58rem;
  color:       var(--grey-3);
  flex-shrink: 0;
}

.dash-micro-item__value {
  font-family: var(--mono);
  font-size:   0.7rem;
  font-weight: 700;
  color:       var(--ink);
  flex-shrink: 0;
}

.dash-micro-link {
  display:         flex;
  width:           100%;
  align-items:     baseline;
  gap:             10px;
  text-decoration: none;
  color:           inherit;
  background-image: none !important;
  transition:      opacity var(--t);
}

.dash-micro-link:hover { opacity: 0.55; }

/* ── MY LOAN ──────────────────────────────────────────────────── */
.dash-my-loan {
  border-top: 1px solid var(--rule);
  padding:    12px 0;
  margin:     4px 0;
}

.dash-my-loan__status {
  font-family:    var(--mono);
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:  6px;
}

.dash-my-loan__status--active  { color: var(--ink); }
.dash-my-loan__status--pending { color: var(--grey-4); }

.dash-my-loan__amount {
  font-family:   var(--serif);
  font-size:     1.2rem;
  color:         var(--ink);
  margin-bottom: 3px;
}

.dash-my-loan__due {
  font-family: var(--mono);
  font-size:   0.6rem;
  color:       var(--grey-4);
}

/* ── GOVERNANCE INNER GRID ────────────────────────────────────── */
.dash-grid-inner {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
}

.dash-gov-block {
  padding-right: 24px;
  border-right:  1px solid var(--rule);
}

.dash-gov-block:last-child {
  border-right: none;
  padding-right: 0;
}

.dash-gov-block__title {
  font-family:   var(--serif);
  font-size:     0.95rem;
  color:         var(--ink);
  margin-bottom: 10px;
  font-style:    italic;
  border:        none;
  padding:       0;
}

.dash-gov-block__date {
  font-family:   var(--mono);
  font-size:     0.75rem;
  font-weight:   700;
  color:         var(--ink);
  margin-bottom: 2px;
}

.dash-gov-block__sub {
  font-family:   var(--mono);
  font-size:     0.6rem;
  color:         var(--grey-3);
  margin-bottom: 12px;
}

/* Attendance row */
.dash-attendance-row {
  display:     flex;
  gap:         0;
  align-items: baseline;
  border-top:  1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin:      10px 0;
}

.dash-att-divider {
  width:      1px;
  height:     28px;
  background: var(--rule);
  flex-shrink: 0;
  align-self:  center;
}

.dash-att-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  padding:        8px 12px;
  flex:           1;
}

.dash-att-stat:not(:last-child) { border-right: 1px solid var(--rule); }

.dash-att-stat__num {
  font-family: var(--serif);
  font-size:   1.6rem;
  color:       var(--ink);
  line-height: 1;
}

.dash-att-stat__lbl {
  font-family:    var(--mono);
  font-size:      0.52rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--grey-3);
}

/* Quick nav */
.dash-nav-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.dash-nav-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         9px 0;
  border-bottom:   1px solid var(--rule);
  font-family:     var(--mono);
  font-size:       0.7rem;
  color:           var(--ink);
  text-decoration: none;
  background-image: none !important;
  transition:      opacity var(--t);
}

.dash-nav-item:hover { opacity: 0.5; }
.dash-nav-item:last-child { border-bottom: none; }

/* ── ACTIVITY FEED ────────────────────────────────────────────── */
.dash-feed {
  display:        flex;
  flex-direction: column;
  max-height:     380px;
  overflow-y:     auto;
  scrollbar-width: none;
}

.dash-feed::-webkit-scrollbar { display: none; }

.dash-feed-item {
  display:       flex;
  gap:           14px;
  padding:       10px 0;
  border-bottom: 1px solid var(--rule);
  align-items:   flex-start;
  background:    transparent;
}

.dash-feed-item:last-child { border-bottom: none; }

.dash-feed-item__icon {
  width:         22px;
  flex-shrink:   0;
  font-family:   var(--mono);
  font-size:     0.75rem;
  color:         var(--grey-3);
  margin-top:    2px;
  text-align:    center;
}

.dash-feed-item__body {
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     3px;
}

.dash-feed-item__text {
  font-family: var(--mono);
  font-size:   0.7rem;
  color:       var(--ink);
  line-height: 1.45;
}

.dash-feed-item__time {
  font-family: var(--mono);
  font-size:   0.56rem;
  color:       var(--grey-3);
}

/* ── NOTIFICATIONS PANEL ──────────────────────────────────────── */
.dash-notif-list {
  display:        flex;
  flex-direction: column;
  max-height:     380px;
  overflow-y:     auto;
  scrollbar-width: none;
}

.dash-notif-list::-webkit-scrollbar { display: none; }

.dash-notif-item {
  padding:       10px 0;
  border-bottom: 1px solid var(--rule);
  display:       flex;
  flex-direction: column;
  gap:           3px;
  background:    transparent;
}

.dash-notif-item:last-child { border-bottom: none; }

.dash-notif-item__title {
  font-family: var(--mono);
  font-size:   0.7rem;
  font-weight: 700;
  color:       var(--ink);
}

.dash-notif-item__msg {
  font-family: var(--mono);
  font-size:   0.62rem;
  color:       var(--grey-4);
  line-height: 1.45;
}

.dash-notif-item__time {
  font-family: var(--mono);
  font-size:   0.54rem;
  color:       var(--grey-3);
}

/* ── LINKS ────────────────────────────────────────────────────── */
.dash-link {
  font-family:     var(--mono);
  font-size:       0.67rem;
  font-weight:     700;
  letter-spacing:  0.08em;
  color:           var(--ink);
  text-decoration: none;
  background-image: none !important;
  border-bottom:   1.5px solid var(--ink);
  padding-bottom:  1px;
  transition:      opacity var(--t);
}

.dash-link:hover { opacity: 0.45; background-size: 0 !important; }

.dash-link--urgent { letter-spacing: 0.06em; }

/* ── EMPTY STATES ─────────────────────────────────────────────── */
.dash-empty-note {
  font-family: var(--mono);
  font-size:   0.62rem;
  color:       var(--grey-3);
  font-style:  italic;
  padding:     6px 0;
}

.dash-empty-note--feed { padding: 20px 0; text-align: center; }

/* ── SIGNED-OUT LANDING ───────────────────────────────────────── */
.dash-landing {
  min-height:    58vh;
  display:       flex;
  flex-direction: column;
  justify-content: center;
  padding:       48px 0;
  border-top:    2px solid var(--rule-heavy);
}

.dash-landing__eyebrow {
  font-family:    var(--mono);
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--grey-3);
  margin-bottom:  18px;
}

.dash-landing__title {
  font-family:  var(--serif);
  font-size:    clamp(2.4rem, 7vw, 4.8rem);
  font-weight:  400;
  color:        var(--ink);
  line-height:  1.05;
  margin:       0 0 22px;
  border:       none;
  padding:      0;
}

.dash-landing__sub {
  font-family:  var(--mono);
  font-size:    0.8rem;
  color:        var(--grey-4);
  line-height:  1.65;
  margin:       0 0 32px;
  max-width:    52ch;
}

.dash-landing__prompt {
  font-family:   var(--mono);
  font-size:     0.72rem;
  font-weight:   700;
  color:         var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  cursor:        pointer;
  transition:    opacity var(--t);
  background-image: none !important;
}

.dash-landing__prompt:hover { opacity: 0.5; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-card--span3 { grid-column: span 2; }

  .dash-grid > .dash-card:nth-child(odd)  { border-left: none; }
  .dash-grid > .dash-card:nth-child(even) { border-left: 1px solid var(--rule); }

  .dash-grid-inner { grid-template-columns: repeat(2, 1fr); gap: 0; }

  .dash-gov-block {
    padding:       16px 16px 16px 0;
    border-bottom: 1px solid var(--rule);
    border-right:  none;
  }

  .dash-gov-block:nth-child(odd)  { border-right: 1px solid var(--rule); }
  .dash-gov-block:last-child { border-bottom: none; }
}

@media (max-width: 600px) {
  .dash-grid { grid-template-columns: 1fr; }

  .dash-card--span2,
  .dash-card--span3 { grid-column: span 1; }

  .dash-card { padding: 20px 0; border-left: none !important; }
  .dash-grid > .dash-card:nth-child(even) { border-left: none !important; }

  .dash-grid-inner { grid-template-columns: 1fr; }
  .dash-gov-block  { border-right: none !important; padding-right: 0; }

  .dash-masthead { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash-masthead__right { align-items: flex-start; }

  .dash-hero-number    { font-size: 2rem; }
  .dash-landing__title { font-size: 2.2rem; }
}
/* ═══════════════════════════════════════════════════════════════
   KI_App — Editorial Monochrome System
   Extends dashboard.css aesthetic to the entire application.
   Import AFTER application.css and dashboard.css.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

/* ── Shared tokens (mirrors dashboard.css) ────────────────────── */
:root {
  --ed-black:       #0a0a0a;
  --ed-white:       #f8f8f6;
  --ed-grey-50:     #f7f6f4;
  --ed-grey-100:    #f0efed;
  --ed-grey-200:    #e0dedb;
  --ed-grey-400:    #9e9b96;
  --ed-grey-600:    #5a5752;
  --ed-rule:        1px solid rgba(10,10,10,0.10);
  --ed-rule-heavy:  2px solid #0a0a0a;
  --ed-pad:         24px;
  --ed-serif:       'DM Serif Display', Georgia, serif;
  --ed-mono:        'IBM Plex Mono', 'Courier New', monospace;
  --ed-transition:  0.18s ease;
}

body.dark-mode {
  --ed-black:      #f8f8f6;
  --ed-white:      #0e0e0e;
  --ed-grey-50:    #141414;
  --ed-grey-100:   #181818;
  --ed-grey-200:   #242424;
  --ed-grey-400:   #6a6760;
  --ed-grey-600:   #9a9790;
  --ed-rule:       1px solid rgba(248,248,246,0.10);
  --ed-rule-heavy: 2px solid #f8f8f6;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT SHELL
   ═══════════════════════════════════════════════════════════════ */

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ed-pad) var(--ed-pad);
}

/* ── Page masthead (h1 on every scaffold page) ────────────────── */
h1 {
  font-family:   var(--ed-serif);
  font-size:     clamp(1.6rem, 4vw, 2.6rem);
  font-weight:   400;
  color:         var(--ed-black);
  line-height:   1.1;
  border-bottom: var(--ed-rule-heavy);
  padding-bottom: 12px;
  margin-bottom:  20px;
  margin-top:    20px;
}

h2 {
  font-family:  var(--ed-serif);
  font-size:    1.15rem;
  font-weight:  400;
  color:        var(--ed-black);
  line-height:  1.2;
  margin-bottom: 10px;
}

h3 {
  font-family:    var(--ed-mono);
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ed-grey-400);
  margin-bottom:  8px;
}

/* ═══════════════════════════════════════════════════════════════
   NOTICE / ALERT FLASH
   ═══════════════════════════════════════════════════════════════ */

.notice, .alert, p.notice, p.alert {
  font-family:    var(--ed-mono);
  font-size:      0.72rem;
  font-weight:    500;
  padding:        8px var(--ed-pad);
  border-bottom:  var(--ed-rule);
  letter-spacing: 0.04em;
  background:     var(--ed-grey-100);
  color:          var(--ed-black);
  margin:         0;
  min-height:     0;
}

.notice:empty, .alert:empty { display: none; }

.alert {
  border-left: 3px solid var(--ed-black);
}

/* ═══════════════════════════════════════════════════════════════
   EDITORIAL KICKER UTILITY
   ═══════════════════════════════════════════════════════════════ */

.ed-kicker {
  display:        block;
  font-family:    var(--ed-mono);
  font-size:      0.58rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--ed-grey-400);
  margin-bottom:  4px;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES  (meetings index, members, transactions, run_down, etc.)
   ═══════════════════════════════════════════════════════════════ */

table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--ed-mono);
  font-size:       0.75rem;
  margin-bottom:   1.5rem;
}

thead {
  border-bottom: var(--ed-rule-heavy);
}

th {
  font-family:    var(--ed-mono);
  font-size:      0.58rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ed-grey-400);
  padding:        8px 10px;
  text-align:     left;
  background:     transparent;
}

td {
  padding:        10px 10px;
  border-bottom:  var(--ed-rule);
  color:          var(--ed-black);
  vertical-align: middle;
  text-align:     left;
}

tr:last-child td { border-bottom: none; }

tbody tr {
  transition: background var(--ed-transition);
}

tbody tr:hover {
  background: var(--ed-grey-50);
}

/* Run-down table variant */
.tdr {
  background: transparent;
}

.table {
  margin-top: 1.5rem;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
select,
textarea {
  font-family:  var(--ed-mono);
  font-size:    0.8rem;
  color:        var(--ed-black);
  background:   var(--ed-white);
  border:       1px solid var(--ed-grey-200);
  border-radius: 0;
  padding:      8px 10px;
  width:        100%;
  max-width:    420px;
  display:      block;
  transition:   border-color var(--ed-transition);
  margin-top:   4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline:      none;
  border-color: var(--ed-black);
}

textarea {
  min-height:  120px;
  resize:      vertical;
  max-width:   100%;
}

select {
  appearance:   none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239e9b96'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

label {
  font-family:    var(--ed-mono);
  font-size:      0.62rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--ed-grey-600);
  display:        block;
  margin-bottom:  4px;
  margin-top:     16px;
}

/* Form field grouping */
.field {
  margin-bottom: 8px;
}

/* Error state */
#error_explanation {
  border:        var(--ed-rule-heavy);
  padding:       var(--ed-pad);
  margin-bottom: 20px;
  background:    var(--ed-grey-50);
}

#error_explanation h2 {
  font-family: var(--ed-mono);
  font-size:   0.72rem;
  font-weight: 700;
  color:       var(--ed-black);
  margin:      0 0 8px;
  border:      none;
  padding:     0;
}

#error_explanation ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

#error_explanation li {
  font-family: var(--ed-mono);
  font-size:   0.68rem;
  color:       var(--ed-grey-600);
  padding:     4px 0;
  border:      none;
  margin:      0;
}

/* File field */
input[type="file"] {
  font-family: var(--ed-mono);
  font-size:   0.72rem;
  padding:     6px 0;
  border:      none;
  max-width:   100%;
  cursor:      pointer;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  width:  16px;
  height: 16px;
  margin-right: 6px;
  accent-color: var(--ed-black);
}

/* ═══════════════════════════════════════════════════════════════
   SUBMIT / ACTION BUTTONS
   ═══════════════════════════════════════════════════════════════ */

input[type="submit"],
button[type="submit"],
.submit,
.btn {
  font-family:    var(--ed-mono);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        9px 20px;
  border:         1.5px solid var(--ed-black);
  background:     transparent;
  color:          var(--ed-black);
  cursor:         pointer;
  transition:     background var(--ed-transition), color var(--ed-transition);
  text-decoration: none;
  display:        inline-block;
  margin-top:     16px;
  /* override application.css underline animation */
  background-image: none !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.submit:hover,
.btn:hover {
  background:      var(--ed-black);
  color:           var(--ed-white);
  background-size: 0 !important;
}

/* Destructive / secondary variant */
button.destroy,
.btn-destroy {
  border-color: var(--ed-grey-400);
  color:        var(--ed-grey-400);
}

button.destroy:hover {
  background:   var(--ed-grey-400);
  border-color: var(--ed-grey-400);
  color:        var(--ed-white);
}

/* ═══════════════════════════════════════════════════════════════
   LINKS — keep the existing underline-slide but with mono font
   ═══════════════════════════════════════════════════════════════ */

a.ed-link,
.dash-link {
  font-family:  var(--ed-mono);
  font-size:    0.72rem;
  font-weight:  500;
  color:        var(--ed-black);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ed-black);
  padding-bottom: 1px;
  background-image: none !important;
  transition:   opacity var(--ed-transition);
}

a.ed-link:hover,
.dash-link:hover {
  opacity: 0.5;
  background-size: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD / TILE  — newspaper column card
   ═══════════════════════════════════════════════════════════════ */

.tile,
.card {
  background:    var(--ed-white);
  border:        var(--ed-rule);
  padding:       var(--ed-pad);
  margin-bottom: 1px;   /* gap = rule, like bento grid */
  position:      relative;
  transition:    box-shadow var(--ed-transition);
}

.tile:hover {
  box-shadow: 0 4px 16px rgba(10,10,10,0.08);
}

body.dark-mode .tile:hover {
  box-shadow: 0 4px 16px rgba(248,248,246,0.06);
}

/* ── Ed-card: named newspaper card ───────────────────────────── */
.ed-card {
  background:    var(--ed-white);
  padding:       var(--ed-pad);
  display:       flex;
  flex-direction: column;
  gap:           0;
  position:      relative;
  animation:     edFadeIn 0.3s ease both;
}

@keyframes edFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ed-card__kicker {
  font-family:    var(--ed-mono);
  font-size:      0.58rem;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--ed-grey-400);
  margin-bottom:  6px;
}

.ed-card__title {
  font-family:   var(--ed-serif);
  font-size:     1.2rem;
  font-weight:   400;
  color:         var(--ed-black);
  line-height:   1.25;
  margin-bottom: 14px;
}

.ed-card__body {
  font-family: var(--ed-mono);
  font-size:   0.75rem;
  color:       var(--ed-grey-600);
  line-height: 1.6;
}

.ed-card__action {
  margin-top:  auto;
  padding-top: 16px;
  border-top:  var(--ed-rule);
}

/* ── Ed-rule ──────────────────────────────────────────────────── */
.ed-rule {
  height:     1px;
  background: var(--ed-grey-200);
  margin:     16px 0;
}

/* ── Ed-kv (key-value pair row) ───────────────────────────────── */
.ed-kv {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         7px 0;
  border-bottom:   var(--ed-rule);
  gap:             16px;
}

.ed-kv:last-child { border-bottom: none; }

.ed-kv__key {
  font-family: var(--ed-mono);
  font-size:   0.62rem;
  color:       var(--ed-grey-400);
  flex-shrink: 0;
}

.ed-kv__val {
  font-family: var(--ed-mono);
  font-size:   0.72rem;
  color:       var(--ed-black);
  font-weight: 500;
  text-align:  right;
}

/* ── Ed-badge ────────────────────────────────────────────────── */
.ed-badge {
  font-family:    var(--ed-mono);
  font-size:      0.6rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  padding:        3px 8px;
  border:         1px solid var(--ed-black);
  color:          var(--ed-black);
  display:        inline-block;
}

.ed-badge--muted {
  border-color: var(--ed-grey-200);
  color:        var(--ed-grey-400);
}

.ed-badge--filled {
  background: var(--ed-black);
  color:      var(--ed-white);
}

/* ── Status indicators ────────────────────────────────────────── */
.ed-status {
  font-family:    var(--ed-mono);
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ed-status--pending  { color: var(--ed-grey-600); }
.ed-status--active   { color: var(--ed-black); }
.ed-status--agreed   { color: var(--ed-black); font-style: italic; }
.ed-status--denied   { color: var(--ed-grey-400); text-decoration: line-through; }

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════ */

/* Generic bento-style row wrapper */
.ed-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   1px;
  background:            var(--ed-grey-200);
  border:                var(--ed-rule-heavy);
  margin-bottom:         2rem;
}

.ed-grid > * {
  background: var(--ed-white);
}

body.dark-mode .ed-grid > * {
  background: var(--ed-white); /* uses dark-mode var */
}

/* Two-column detail layout */
.ed-detail-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   1px;
  background:            var(--ed-grey-200);
  border:                var(--ed-rule-heavy);
  margin-bottom:         2rem;
}

.ed-detail-grid > * {
  background: var(--ed-white);
  padding:    var(--ed-pad);
}

@media (max-width: 700px) {
  .ed-detail-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   INDEX LISTS (members, meetings, chapters, clauses, votes, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* Override the old .row-wrap tile rendering for index pages */
.ed-list {
  list-style: none;
  padding:    0;
  margin:     0 0 2rem;
  border-top: var(--ed-rule-heavy);
}

.ed-list-item {
  display:       flex;
  align-items:   center;
  gap:           16px;
  padding:       12px 0;
  border-bottom: var(--ed-rule);
  transition:    padding-left var(--ed-transition);
}

.ed-list-item:hover {
  padding-left: 6px;
}

.ed-list-item__icon {
  width:           32px;
  height:          32px;
  border:          1px solid var(--ed-grey-200);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--ed-mono);
  font-size:       0.65rem;
  color:           var(--ed-grey-600);
  flex-shrink:     0;
}

.ed-list-item__body {
  flex:    1;
  min-width: 0;
}

.ed-list-item__title {
  font-family: var(--ed-mono);
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--ed-black);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.ed-list-item__meta {
  font-family: var(--ed-mono);
  font-size:   0.6rem;
  color:       var(--ed-grey-400);
  margin-top:  2px;
}

.ed-list-item__action {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION LIST  (notifications/index, votes/index)
   ═══════════════════════════════════════════════════════════════ */

.notifications {
  width:      100%;
  max-width:  800px;
  margin:     0 auto;
}

.notification-type-group {
  margin-bottom: 2px;
}

/* Group heading / accordion trigger */
.notification-type-group > h2.js-tile {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        12px var(--ed-pad);
  border:         var(--ed-rule);
  border-left:    var(--ed-rule-heavy);
  cursor:         pointer;
  margin-bottom:  0;
  font-family:    var(--ed-mono);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--ed-black);
  background:     var(--ed-white);
  transition:     background var(--ed-transition);
}

.notification-type-group > h2.js-tile::after {
  content:     "▾";
  font-size:   0.7rem;
  color:       var(--ed-grey-400);
}

.notification-type-group > h2.js-tile:hover {
  background: var(--ed-grey-50);
}

.notification-list {
  padding:    0;
  margin:     0 0 2px;
  list-style: none;
  border:     var(--ed-rule);
  border-top: none;
}

.notification-list li {
  padding:       12px var(--ed-pad);
  border-bottom: var(--ed-rule);
  margin:        0;
  font-family:   var(--ed-mono);
  font-size:     0.72rem;
  color:         var(--ed-black);
  background:    var(--ed-white);
  transition:    background var(--ed-transition);
}

.notification-list li:last-child { border-bottom: none; }
.notification-list li:hover      { background: var(--ed-grey-50); }

.notification-list li strong {
  display:     block;
  font-size:   0.72rem;
  font-weight: 700;
  margin-bottom: 3px;
}

.notification-list li p {
  font-size: 0.65rem;
  color:     var(--ed-grey-600);
  margin:    0;
}

.notification-list li.seen {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   PAGY PAGINATION
   ═══════════════════════════════════════════════════════════════ */

nav.pagy-nav, .pagy-nav {
  display:     flex;
  gap:         2px;
  margin:      1.5rem 0;
  font-family: var(--ed-mono);
  font-size:   0.68rem;
}

.pagy-nav a,
.pagy-nav span {
  padding:         5px 10px;
  border:          1px solid var(--ed-grey-200);
  color:           var(--ed-black);
  text-decoration: none;
  background-image: none !important;
  font-family:     var(--ed-mono);
  transition:      background var(--ed-transition), border-color var(--ed-transition);
  margin:          0;
}

.pagy-nav a:hover {
  background:   var(--ed-black);
  color:        var(--ed-white);
  border-color: var(--ed-black);
  background-size: 0 !important;
}

.pagy-nav span.current {
  background:   var(--ed-black);
  color:        var(--ed-white);
  border-color: var(--ed-black);
}

/* ═══════════════════════════════════════════════════════════════
   TRIX / RICH TEXT EDITOR
   ═══════════════════════════════════════════════════════════════ */

trix-editor {
  font-family: 'AnekOdia-Regular', Georgia, serif;
  font-size:   0.9rem;
  border:      1px solid var(--ed-grey-200) !important;
  border-top:  none !important;
  padding:     12px !important;
  min-height:  140px;
  border-radius: 0 !important;
  background:  var(--ed-white) !important;
  color:       var(--ed-black) !important;
}

trix-toolbar {
  border:      1px solid var(--ed-grey-200) !important;
  border-radius: 0 !important;
  background:  var(--ed-grey-50) !important;
  padding:     4px 8px !important;
}

trix-toolbar .trix-button {
  border-radius: 0 !important;
}

trix-toolbar .trix-button--active,
trix-toolbar .trix-button:hover {
  background: var(--ed-grey-200) !important;
}

/* ═══════════════════════════════════════════════════════════════
   "SHOW" PAGE — detail view layout
   ═══════════════════════════════════════════════════════════════ */

.ed-show-header {
  border-bottom:  var(--ed-rule-heavy);
  padding-bottom: 14px;
  margin-bottom:  20px;
}

.ed-show-header__kicker {
  font-family:    var(--ed-mono);
  font-size:      0.58rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--ed-grey-400);
  margin-bottom:  4px;
}

.ed-show-header__title {
  font-family: var(--ed-serif);
  font-size:   1.8rem;
  font-weight: 400;
  color:       var(--ed-black);
  line-height: 1.1;
  margin:      0;
}

.ed-show-actions {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  padding:     14px 0;
  border-top:  var(--ed-rule);
  border-bottom: var(--ed-rule);
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   MEMBERS — role badge on member card
   ═══════════════════════════════════════════════════════════════ */

.member-role {
  font-family:    var(--ed-mono);
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border:         1.5px solid var(--ed-black);
  padding:        2px 7px;
  display:        inline-block;
  margin-top:     4px;
}

/* ═══════════════════════════════════════════════════════════════
   MEETINGS — attendance table row states
   ═══════════════════════════════════════════════════════════════ */

tr.attendance--present td { }
tr.attendance--absent td  { color: var(--ed-grey-400); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   VOTE WIDGET  (votes/_vote.html.erb)
   ═══════════════════════════════════════════════════════════════ */

[data-controller="vote"] {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* Popup card for yes/no vote */
[data-vote-target="popup"] .bg-white {
  background:    var(--ed-white) !important;
  border:        var(--ed-rule-heavy) !important;
  border-radius: 0 !important;
  box-shadow:    0 16px 48px rgba(10,10,10,0.18) !important;
  padding:       24px !important;
}

[data-vote-target="popup"] h3 {
  font-family: var(--ed-serif);
  font-size:   1.1rem;
  color:       var(--ed-black);
  margin-bottom: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Vote yes/no buttons — override Tailwind */
[data-vote-target="popup"] button {
  font-family:    var(--ed-mono);
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        8px 16px;
  border:         1.5px solid var(--ed-black);
  background:     transparent;
  color:          var(--ed-black);
  border-radius:  0 !important;
  background-image: none !important;
  cursor:         pointer;
  transition:     background var(--ed-transition), color var(--ed-transition);
}

[data-vote-target="popup"] button:hover {
  background:  var(--ed-black);
  color:       var(--ed-white);
  background-size: 0 !important;
}

[data-vote-target="popup"] button.bg-gray-300 {
  border-color: var(--ed-grey-200);
  color:        var(--ed-grey-600);
}

[data-vote-target="popup"] button.bg-gray-300:hover {
  background:   var(--ed-grey-200);
  color:        var(--ed-black);
}

/* ═══════════════════════════════════════════════════════════════
   AGREEMENTS / CLAUSES  — content previews
   ═══════════════════════════════════════════════════════════════ */

.text-previews {
  font-family: 'AnekOdia-Regular', Georgia, serif;
  font-size:   0.85rem;
  line-height: 1.65;
  color:       var(--ed-black);
  max-width:   52ch;
}

.chapter {
  width:      100%;
  max-width:  800px;
  margin:     0 auto 1px;
}

/* ═══════════════════════════════════════════════════════════════
   STATEMENTS — PDF thumbnail card
   ═══════════════════════════════════════════════════════════════ */

.statement-thumb {
  display:        flex;
  flex-direction: column;
  border:         var(--ed-rule);
  overflow:       hidden;
}

.statement-thumb img {
  width:       100%;
  display:     block;
  filter:      grayscale(100%);
  transition:  filter var(--ed-transition);
}

.statement-thumb:hover img {
  filter: grayscale(0%);
}

/* ═══════════════════════════════════════════════════════════════
   REPORT / RUN-DOWN  (members/report, members/run_down)
   ═══════════════════════════════════════════════════════════════ */

.rundown-member-block {
  margin-bottom: 2.5rem;
  border-top:    var(--ed-rule-heavy);
  padding-top:   12px;
}

.rundown-member-block h3 {
  font-family: var(--ed-serif);
  font-size:   1.1rem;
  color:       var(--ed-black);
  font-weight: 400;
  font-style:  italic;
  margin-bottom: 12px;
  letter-spacing: 0;
  text-transform: none;
}

/* Report filter form */
.report-filter {
  display:         flex;
  flex-wrap:       wrap;
  gap:             16px;
  align-items:     flex-end;
  padding:         var(--ed-pad);
  border:          var(--ed-rule-heavy);
  margin-bottom:   20px;
  background:      var(--ed-grey-50);
}

.report-filter label {
  margin-top: 0;
  font-size:  0.55rem;
}

.report-filter select {
  max-width: 140px;
}

.report-filter input[type="submit"] {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   WILL — password prompt
   ═══════════════════════════════════════════════════════════════ */

.container {
  max-width: 560px;
  margin:    0 auto;
  padding:   var(--ed-pad);
  border:    var(--ed-rule-heavy);
}

.container h2 {
  font-family:   var(--ed-serif);
  font-size:     1.4rem;
  font-weight:   400;
  color:         var(--ed-black);
  margin-bottom: 12px;
  border:        none;
  padding:       0;
}

.container p {
  font-family:   var(--ed-mono);
  font-size:     0.72rem;
  color:         var(--ed-grey-600);
  margin-bottom: 16px;
}

.form-control {
  font-family:  var(--ed-mono);
  font-size:    0.8rem;
  border:       1px solid var(--ed-grey-200);
  border-radius: 0;
  padding:      8px 10px;
  width:        100%;
  background:   var(--ed-white);
  color:        var(--ed-black);
  display:      block;
  margin-bottom: 12px;
}

.form-control:focus {
  outline:      none;
  border-color: var(--ed-black);
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAV  — minor refinements
   ═══════════════════════════════════════════════════════════════ */

.top-nav {
  background: var(--clr-bg, var(--ed-white));
  border-bottom: 1px solid var(--ed-grey-200);
}

/* Dropdown */
.dropdown-content {
  border-radius: 0 !important;
  font-family:   var(--ed-mono) !important;
  font-size:     0.72rem !important;
}

.dropdown-content a {
  font-family: var(--ed-mono) !important;
  font-size:   0.72rem !important;
  padding:     8px 12px !important;
  background-image: none !important;
}

/* Subscribe button */
#subscribe, #unsubscribe {
  font-family:    var(--ed-mono);
  font-size:      0.6rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        5px 12px;
  border:         1px solid var(--ed-grey-200);
  color:          var(--ed-grey-600);
  background-image: none !important;
  cursor:         pointer;
  transition:     border-color var(--ed-transition);
}

#subscribe:hover, #unsubscribe:hover {
  border-color: var(--ed-black);
  color:        var(--ed-black);
  background-size: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DEVISE FORMS  (login, signup, password)
   ═══════════════════════════════════════════════════════════════ */

.column-wrap .tile,
.row-wrap .tile {
  border: var(--ed-rule-heavy);
  box-shadow: none;
  padding: var(--ed-pad);
  min-width: 300px;
}

.column-wrap .tile h2 {
  font-family: var(--ed-serif);
  font-size:   1.3rem;
  border:      none;
  padding:     0;
  margin-bottom: 16px;
}

/* ── Devise shared links ───────────────────────────────────────── */
.row-wrap.margin-top-3 a,
.devise-links a {
  font-family:  var(--ed-mono) !important;
  font-size:    0.7rem !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ed-grey-200);
  padding-bottom: 1px;
  margin: 0.2rem 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════
   INITIATE MEETING — attendance form table
   ═══════════════════════════════════════════════════════════════ */

.initiate-table select {
  max-width: 100px;
  padding:   4px 6px;
  font-size: 0.68rem;
}

.initiate-table input[type="text"] {
  max-width: 180px;
  padding:   4px 6px;
  font-size: 0.68rem;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL  (seconding, assign-role)
   ═══════════════════════════════════════════════════════════════ */

/* Overlay */
.fixed.inset-0.bg-gray-600 {
  background: rgba(10,10,10,0.55) !important;
  backdrop-filter: blur(2px);
}

/* Modal card */
.relative.top-20.mx-auto,
.fixed.inset-0 .bg-white,
.relative.top-20 {
  background:    var(--ed-white) !important;
  border:        var(--ed-rule-heavy) !important;
  border-radius: 0 !important;
  box-shadow:    0 24px 64px rgba(10,10,10,0.18) !important;
  padding:       var(--ed-pad) !important;
}

.relative.top-20 h3,
.mt-3.text-center h3 {
  font-family: var(--ed-serif) !important;
  font-size:   1.15rem !important;
  font-weight: 400 !important;
  color:       var(--ed-black) !important;
  margin-bottom: 14px;
}

/* Buttons inside modals */
.relative.top-20 .mt-4 button,
.relative.top-20 .mt-4 input[type="submit"] {
  border-radius: 0 !important;
  font-family:   var(--ed-mono) !important;
  font-size:     0.68rem !important;
  font-weight:   600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding:       8px 16px !important;
  background-image: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SUBSCRIPTIONS / PUSH
   ═══════════════════════════════════════════════════════════════ */

.subscription-info .tile {
  font-family: var(--ed-mono);
  font-size:   0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE  — propagate to new classes
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .ed-card,
body.dark-mode .tile,
body.dark-mode .card {
  background: var(--ed-white); /* re-uses dark-mode token */
}

body.dark-mode trix-editor {
  background: var(--ed-grey-100) !important;
  color:      var(--ed-black) !important;
  border-color: var(--ed-grey-200) !important;
}

body.dark-mode trix-toolbar {
  background: var(--ed-grey-50) !important;
  border-color: var(--ed-grey-200) !important;
}

body.dark-mode .container {
  border-color: var(--ed-grey-200);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode select,
body.dark-mode textarea {
  background:   var(--ed-grey-100);
  border-color: var(--ed-grey-200);
  color:        var(--ed-black);
}

body.dark-mode .notification-type-group > h2.js-tile,
body.dark-mode .notification-list li {
  background: var(--ed-grey-100);
}

body.dark-mode input[type="submit"],
body.dark-mode button[type="submit"],
body.dark-mode .submit,
body.dark-mode .btn {
  border-color: var(--ed-black);
  color:        var(--ed-black);
}

body.dark-mode input[type="submit"]:hover,
body.dark-mode button[type="submit"]:hover,
body.dark-mode .submit:hover,
body.dark-mode .btn:hover {
  background: var(--ed-black);
  color:      var(--ed-white);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  :root { --ed-pad: 16px; }

  h1 { font-size: 1.5rem; }

  .ed-grid {
    grid-template-columns: 1fr;
  }

  .report-filter {
    flex-direction: column;
    gap: 8px;
  }

  .report-filter select { max-width: 100%; }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    max-width: 100%;
  }

  .column-wrap .tile,
  .row-wrap .tile {
    min-width: 0;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT  — clean newspaper print output
   ═══════════════════════════════════════════════════════════════ */

@media print {
  .top-nav, #subscribe, #unsubscribe, .dash-urgency,
  .ed-show-actions, .right-text .submit { display: none !important; }

  body { background: white; color: black; }

  h1, h2, h3 { color: black; }

  table { font-size: 0.7rem; }
}
/* ═══════════════════════════════════════════════════════════════
   KI_App — Editorial Components
   Classes used by chapters, members, and other rewritten views.
   Drop into app/assets/stylesheets/editorial_components.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Page masthead ────────────────────────────────────────────── */
.content-header {
  padding-bottom: 14px;
  border-bottom:  2px solid var(--rule-heavy);
  margin-top:     24px;
}

.content-header--flex {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
}

.page-kicker {
  display:        block;
  font-family:    var(--mono);
  font-size:      0.55rem;
  font-weight:    700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--grey-3);
  margin-bottom:  6px;
}

/* h1 secondary word (e.g. second name) inside a masthead */
.h1-secondary {
  font-family: var(--body);
  font-size:   0.45em;
  font-weight: 400;
  color:       var(--grey-3);
  vertical-align: middle;
  margin-left:  6px;
}

/* Role badge on member masthead — rule-underlined, no box */
.masthead-role {
  font-family:    var(--mono);
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ink);
  border-bottom:  2px solid var(--ink);
  padding-bottom: 2px;
  flex-shrink:    0;
}

/* ── Page toolbar (action strip below masthead) ───────────────── */
.page-toolbar {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
  padding:     10px 0;
  border-bottom: 1px solid var(--rule);
}

/* Destructive action — muted, no emphasis */
.toolbar-destroy {
  font-family:      var(--mono);
  font-size:        0.68rem;
  color:            var(--grey-3);
  background:       none;
  border:           none;
  border-bottom:    1px solid var(--rule);
  padding:          0 0 1px;
  cursor:           pointer;
  background-image: none !important;
}

.toolbar-destroy:hover { color: var(--ink); border-color: var(--ink); opacity: 1; }

/* Small count label in toolbar */
.item-count {
  font-family:    var(--mono);
  font-size:      0.62rem;
  color:          var(--grey-3);
  letter-spacing: 0.04em;
}

/* ── Section header (kicker above a sub-list) ─────────────────── */
.section-header {
  padding:       10px 0;
  border-bottom: 1px solid var(--rule);
}

.section-kicker {
  font-family:    var(--mono);
  font-size:      0.55rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--grey-3);
}

/* ── Editorial row (chapters index) ──────────────────────────── */
.editorial-row {
  display:          flex;
  align-items:      baseline;
  gap:              20px;
  padding:          18px 0;
  border-bottom:    1px solid var(--rule);
  color:            var(--ink);
  text-decoration:  none;
  background-image: none !important;
  transition:       padding-left var(--t);
}

.editorial-row:hover { padding-left: 8px; opacity: 1; }

.editorial-row__index {
  font-family: var(--mono);
  font-size:   0.58rem;
  color:       var(--grey-3);
  width:       28px;
  flex-shrink: 0;
  padding-top: 2px;
}

.editorial-row__body {
  flex:       1;
  min-width:  0;
  display:    flex;
  flex-direction: column;
  gap:        4px;
}

.editorial-row__title {
  font-family: var(--serif);
  font-size:   1.15rem;
  font-weight: 400;
  color:       var(--ink);
  line-height: 1.2;
}

.editorial-row__meta {
  font-family: var(--mono);
  font-size:   0.6rem;
  color:       var(--grey-3);
}

.editorial-row__arrow {
  font-family: var(--mono);
  font-size:   0.8rem;
  color:       var(--grey-3);
  flex-shrink: 0;
  transition:  opacity var(--t);
  opacity:     0;
}

.editorial-row:hover .editorial-row__arrow { opacity: 1; }

/* ── Clause row (chapters show) ──────────────────────────────── */
.clause-row {
  display:       flex;
  gap:           20px;
  padding:       20px 0;
  border-bottom: 1px solid var(--rule);
}

.clause-row__index {
  font-family: var(--mono);
  font-size:   0.56rem;
  color:       var(--grey-3);
  width:       28px;
  flex-shrink: 0;
  padding-top: 4px;
}

.clause-row__body {
  flex:    1;
  min-width: 0;
}

.clause-row__content {
  font-family:   var(--body);
  font-size:     0.9rem;
  line-height:   1.65;
  color:         var(--ink);
  margin-bottom: 10px;
}

.clause-row__footer {
  display:     flex;
  align-items: center;
  gap:         16px;
}

/* ── Status indicator (rule-based, not a box) ─────────────────── */
.status {
  font-family:    var(--mono);
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status--pending { color: var(--grey-3); }

.status--agreed {
  color:         var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
}

.status--denied {
  color:           var(--grey-3);
  text-decoration: line-through;
}

/* ── Muted link ───────────────────────────────────────────────── */
.muted-link {
  font-family:      var(--mono);
  font-size:        0.62rem;
  color:            var(--grey-3);
  border-bottom:    1px solid var(--rule);
  padding-bottom:   1px;
  background-image: none !important;
}

.muted-link:hover { color: var(--ink); background-size: 0 !important; }

/* ── Directory (members index) ───────────────────────────────── */
.directory-header,
.directory-row {
  display:     grid;
  grid-template-columns: 1fr 120px 160px 60px;
  gap:         0;
  align-items: center;
}

.directory-header {
  padding:       8px 0;
  border-bottom: 2px solid var(--rule-heavy);
}

.directory-row {
  padding:       14px 0;
  border-bottom: 1px solid var(--rule);
  transition:    padding-left var(--t);
}

.directory-row:hover { padding-left: 6px; }

.directory-col {
  font-family: var(--mono);
  font-size:   0.54rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:       var(--grey-3);
}

.directory-col--action { text-align: right; }

/* Member name in directory */
.member-name { display: inline-flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }

.member-name__surname {
  font-family: var(--serif);
  font-size:   1.05rem;
  font-weight: 400;
  color:       var(--ink);
  line-height: 1.2;
}

.member-name__comma { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }

.member-name__given {
  font-family: var(--serif);
  font-size:   1.05rem;
  font-style:  italic;
  color:       var(--ink);
}

.member-name__second {
  font-family: var(--mono);
  font-size:   0.6rem;
  color:       var(--grey-3);
}

.linked-indicator {
  font-family: var(--mono);
  font-size:   0.5rem;
  color:       var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-left: 6px;
  vertical-align: middle;
}

.role-label {
  font-family:    var(--mono);
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--grey-4);
}

.phone-label { font-family: var(--mono); font-size: 0.65rem; color: var(--grey-4); }

.em-dash { font-family: var(--mono); font-size: 0.7rem; color: var(--grey-2); }

/* ── Profile grid (members show) ─────────────────────────────── */
.profile-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   0;
  border-top:            1px solid var(--rule);
}

.profile-grid__main {
  padding:      24px 32px 24px 0;
  border-right: 1px solid var(--rule);
}

.profile-grid__aside {
  padding: 24px 0 24px 28px;
}

/* Key-value row */
.kv-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             16px;
  padding:         9px 0;
  border-bottom:   1px solid var(--rule);
}

.kv-row:last-child { border-bottom: none; }

.kv-row__key {
  font-family: var(--mono);
  font-size:   0.62rem;
  color:       var(--grey-3);
  flex-shrink: 0;
}

.kv-row__val {
  font-family: var(--mono);
  font-size:   0.72rem;
  color:       var(--ink);
  font-weight: 600;
  text-align:  right;
}

/* Large stat number */
.profile-stat {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--rule);
}

.profile-stat__number {
  display:     block;
  font-family: var(--serif);
  font-size:   2.4rem;
  font-weight: 400;
  color:       var(--ink);
  line-height: 1;
}

.profile-stat__label {
  font-family: var(--mono);
  font-size:   0.58rem;
  color:       var(--grey-3);
}

/* ── Inline role assignment (members show toolbar) ───────────── */
.inline-role-assign {
  display:     flex;
  align-items: center;
  gap:         8px;
  position:    relative;
}

.role-assign__label {
  font-family: var(--mono);
  font-size:   0.6rem;
  color:       var(--grey-3);
}

.role-assign__current {
  font-family:    var(--mono);
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--ink);
}

.role-assign__btn {
  font-family:      var(--mono);
  font-size:        0.58rem;
  color:            var(--grey-3);
  background:       none;
  border:           none;
  border-bottom:    1px solid var(--rule);
  padding:          0 0 1px;
  cursor:           pointer;
  background-image: none !important;
}

.role-assign__btn:hover { color: var(--ink); border-color: var(--ink); opacity: 1; }

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
  font-family: var(--mono);
  font-size:   0.72rem;
  color:       var(--grey-3);
  font-style:  italic;
  padding:     32px 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  .directory-header,
  .directory-row {
    grid-template-columns: 1fr 80px 40px;
  }

  .directory-col--phone { display: none; }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-grid__main {
    border-right:  none;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
  }

  .profile-grid__aside { padding-left: 0; }

  .content-header--flex { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════════
   KI_App — Mobile overrides
   Same newspaper system, scaled for small screens.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {

  :root { --pad: 14px; }

  /* Typography scale down */
  h1 { font-size: 1.5rem; padding-bottom: 10px; margin-top: 16px; }
  h2 { font-size: 1.1rem; }

  /* Content */
  .content { padding: 0 var(--pad) var(--pad); }

  /* Top nav */
  .top-nav { padding: 8px var(--pad); }
  .top-nav .ps-nav-slot { right: 46px; }

  /* Kill image icon sizes that crowd mobile */
  .tiny-square-image { width: 1.6rem; height: 1.6rem; }
  .square-image      { width: 1.6rem; height: 1.6rem; }

  /* Notifications full-width */
  .notifications { width: 100%; }

  /* Tables scroll */
  .table, table { overflow-x: auto; display: block; }

  /* Forms full-width */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea { max-width: 100%; }

  /* Row wraps stack */
  .row-wrap { flex-direction: column; }

  /* Member tile adjustments */
  .force-row { gap: 6px; }

  /* Dashboard */
  .dash-masthead__name { font-size: 1.8rem; }
}
/* ═══════════════════════════════════════════════════════════════
   Persona Switcher — Newspaper Editorial
   Panel opens as a full overlay. No rounded corners, no shadows.
   Structure is pure type + rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── Trigger ──────────────────────────────────────────────────── */
.ps-nav-slot {
  display:     flex;
  align-items: center;
}

.ps-trigger {
  display:          flex;
  align-items:      center;
  gap:              6px;
  background:       none;
  border:           none;
  border-bottom:    2px solid var(--ink);
  padding:          4px 0;
  cursor:           pointer;
  color:            var(--ink);
  font-family:      var(--mono);
  font-size:        0.72rem;
  font-weight:      700;
  background-image: none !important;
  transition:       opacity var(--t);
  letter-spacing:   0.08em;
}

.ps-trigger:hover { opacity: 0.5; }

.ps-trigger__avatar {
  width:           24px;
  height:          24px;
  background:      var(--ink);
  color:           var(--paper);
  font-size:       0.6rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-family:     var(--mono);
}

.ps-trigger__avatar--inactive {
  background: var(--grey-2);
  color:      var(--grey-3);
}

.ps-trigger__name {
  font-size:   0.68rem;
  font-weight: 700;
  max-width:   80px;
  overflow:    hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ps-trigger__caret {
  font-size:   2rem;
  opacity:     0.5;
  margin-left: 2px;
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.ps-backdrop {
  position:    fixed;
  inset:       0;
  background:  rgba(10,10,10,0.55);
  z-index:     900;
  opacity:     0;
  transition:  opacity 0.20s ease;
  backdrop-filter: blur(1px);
}

body.dark-mode .ps-backdrop {
  background: rgba(248,248,246,0.35);
}

.ps-backdrop--visible { opacity: 1; }

/* ── Panel ────────────────────────────────────────────────────── */
.ps-panel {
  position:    fixed;
  top:         50%;
  left:        50%;
  transform:   translate(-50%, -46%) scale(0.97);
  z-index:     901;
  width:       min(94vw, 840px);
  max-height:  88vh;
  overflow-y:  auto;
  background:  var(--paper);
  border-top:  3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  opacity:     0;
  transition:  opacity 0.20s ease, transform 0.20s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-2) transparent;
  box-shadow:  none;
}

.ps-panel::-webkit-scrollbar       { width: 3px; }
.ps-panel::-webkit-scrollbar-thumb { background: var(--grey-2); }

.ps-panel--visible {
  opacity:   1;
  transform: translate(-50%, -50%) scale(1);
}

body.dark-mode .ps-panel {
  background: var(--grey-1);
  border-top-color: var(--ink);
}

/* ── Panel header ─────────────────────────────────────────────── */
.ps-panel__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  padding:         24px 28px 16px;
  border-bottom:   1px solid var(--rule);
  position:        sticky;
  top:             0;
  background:      var(--paper);
  z-index:         1;
}

body.dark-mode .ps-panel__header { background: var(--grey-1); }

.ps-panel__eyebrow {
  display:        block;
  font-family:    var(--mono);
  font-size:      0.54rem;
  font-weight:    700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--grey-3);
  margin-bottom:  5px;
}

.ps-panel__title h2 {
  font-family: var(--serif);
  font-size:   1.5rem;
  font-weight: 400;
  color:       var(--ink);
  margin:      0;
  line-height: 1.1;
  border:      none;
  padding:     0;
}

.ps-panel__close {
  background:       none;
  border:           none;
  border-bottom:    1.5px solid var(--grey-2);
  font-size:        0.72rem;
  font-family:      var(--mono);
  font-weight:      700;
  cursor:           pointer;
  color:            var(--grey-3);
  padding:          2px 0;
  background-image: none !important;
  transition:       color var(--t), border-color var(--t);
  flex-shrink:      0;
  margin-top:       4px;
}

.ps-panel__close:hover {
  color:        var(--ink);
  border-color: var(--ink);
  opacity:      1;
  background-size: 0 !important;
}

.ps-panel__sub {
  padding:   0 28px;
  font-family: var(--mono);
  font-size:  0.62rem;
  color:      var(--grey-3);
  margin:     10px 0 0;
}

/* ── Grid ─────────────────────────────────────────────────────── */
.ps-grid {
  padding: 0 28px 16px;
}

.ps-section { margin-bottom: 0; }

.ps-section__label {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--mono);
  font-size:      0.54rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--grey-3);
  padding:        14px 0 8px;
  border-bottom:  1px solid var(--rule);
  margin-bottom:  0;
}

/* ── Cards ────────────────────────────────────────────────────── */
.ps-card-form { display: contents; }

.ps-card {
  display:          flex;
  align-items:      center;
  gap:              14px;
  width:            100%;
  background:       none;
  border:           none;
  border-bottom:    1px solid var(--rule);
  padding:          12px 0;
  cursor:           pointer;
  text-align:       left;
  color:            var(--ink);
  font-family:      var(--mono);
  background-image: none !important;
  transition:       opacity var(--t);
}

.ps-card:last-of-type { border-bottom: none; }

.ps-card:hover:not(:disabled) { opacity: 0.6; }

.ps-card:active:not(:disabled) { opacity: 0.4; }

.ps-card--active {
  opacity: 1 !important;
  cursor:  default;
}

.ps-card--alert { border-left: 2px solid var(--ink); padding-left: 8px; }

/* Avatar */
.ps-card__avatar {
  width:           34px;
  height:          34px;
  background:      var(--ink);
  color:           var(--paper);
  font-size:       0.68rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-family:     var(--mono);
}

.ps-card--active .ps-card__avatar {
  background: var(--paper);
  color:      var(--ink);
  outline:    2px solid var(--ink);
}

body.dark-mode .ps-card--active .ps-card__avatar {
  background: var(--grey-1);
}

.ps-card__avatar[data-role="chairman"]  { font-style: italic; }
.ps-card__avatar[data-role="member"]    { opacity: 0.75; }

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

.ps-card__name {
  font-family: var(--mono);
  font-size:   0.78rem;
  font-weight: 700;
  color:       var(--ink);
  display:     flex;
  align-items: center;
  gap:         8px;
  line-height: 1.3;
}

.ps-card__you {
  font-family:    var(--mono);
  font-size:      0.52rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom:  1.5px solid var(--ink);
  color:          var(--ink);
  padding-bottom: 1px;
}

.ps-card__tagline {
  font-family:   var(--mono);
  font-size:     0.62rem;
  color:         var(--grey-3);
  margin-top:    3px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.ps-card__meta {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  5px;
}

.ps-card__stat {
  font-family: var(--mono);
  font-size:   0.56rem;
  color:       var(--grey-3);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}

.ps-card__alert-badge {
  font-family:    var(--mono);
  font-size:      0.54rem;
  font-weight:    700;
  color:          var(--ink);
  border-bottom:  2px solid var(--ink);
  padding-bottom: 1px;
  letter-spacing: 0.06em;
}

.ps-card__arrow {
  font-family: var(--mono);
  color:       var(--grey-3);
  font-size:   0.8rem;
  opacity:     0;
  transition:  opacity var(--t);
  flex-shrink: 0;
}

.ps-card:hover .ps-card__arrow { opacity: 1; }

/* ── Footer ───────────────────────────────────────────────────── */
.ps-panel__footer {
  padding:    14px 28px 20px;
  font-family: var(--mono);
  font-size:  0.6rem;
  color:      var(--grey-3);
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}

.ps-panel__footer code {
  font-family:  var(--mono);
  font-size:    0.65rem;
  border-bottom: 1px solid var(--rule);
  color:        var(--ink);
  padding-bottom: 1px;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ps-panel {
    top:       auto;
    bottom:    0;
    left:      0;
    right:     0;
    transform: translateY(6px);
    width:     100%;
    max-height: 85vh;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
  }

  .ps-panel--visible { transform: translateY(0); }

  .ps-trigger__name { display: none; }
  .ps-card__tagline { display: none; }
  .ps-panel__header { padding: 18px 16px 14px; }
  .ps-grid          { padding: 0 16px 12px; }
  .ps-card          { padding: 10px 0; }
  .ps-panel__footer { padding: 12px 16px 18px; }
  .ps-panel__sub    { padding: 0 16px; }
}
/* ═══════════════════════════════════════════════════════════════
   KI_App — Table stylesheet
   Kept minimal — application.css owns the table system now.
   These are specific run-down / report overrides only.
   ═══════════════════════════════════════════════════════════════ */

/* Run-down report heading */
.rundown-member-block {
  margin-bottom: 2.5rem;
  border-top:    2px solid var(--rule-heavy);
  padding-top:   16px;
}

.rundown-member-block h3 {
  font-family:    var(--serif);
  font-size:      1.15rem;
  color:          var(--ink);
  font-weight:    400;
  font-style:     italic;
  margin-bottom:  14px;
  letter-spacing: 0;
  text-transform: none;
}

/* Report filter strip */
.report-filter-strip {
  display:       flex;
  flex-wrap:     wrap;
  gap:           24px;
  align-items:   flex-end;
  padding:       20px 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}

.report-filter-strip label { margin-top: 0; }

.report-filter-strip select { max-width: 140px; }

/*
 * This is a manifest file that'll be compiled into application.css.


 */

/* ═══════════════════════════════════════════════════════════════
   KI_App — The Newspaper
   One aesthetic. No boxes. Rules and type carry everything.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'AnekOdia-SemiBold';
  src: url(/assets/AnekOdia-SemiBold-fb7d3c5eba80a0cba47ac13afe4d14948acef3da676b21287a715604a05123f9.ttf) format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'AnekOdia-Regular';
  src: url(/assets/AnekOdia-Regular-06f3fc33772e8a1309ca093731f901cbd1caab6ac78eeb23210130bc8f4d453e.ttf) format('truetype');
  font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --ink:        #0a0a0a;
  --paper:      #f8f8f6;
  --rule:       rgba(10,10,10,0.12);
  --rule-heavy: #0a0a0a;
  --grey-1:     #f0efed;
  --grey-2:     #e0dedb;
  --grey-3:     #2c82cd;
  --grey-4:     #5a5752;
  --serif:      'DM Serif Display', Georgia, serif;
  --mono:       'IBM Plex Mono', 'Courier New', monospace;
  --body:       'AnekOdia-Regular', Georgia, serif;
  --pad:        28px;
  --t:          0.16s ease;
}

body.dark-mode {
  --ink:    #f8f8f6;
  --paper:  #0e0e0e;
  --rule:   rgba(248,248,246,0.10);
  --rule-heavy: #f8f8f6;
  --grey-1: #141414;
  --grey-2: #1e1e1e;
  --grey-3: #579ddb;
  --grey-4: #9a9790;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ─────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:      var(--body);
  font-size:        16px;
  line-height:      1.55;
  background-color: var(--paper);
  color:            var(--ink);
  transition:       background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ───────────────────────────────────────────────── */
h1 {
  font-family: var(--serif);
  font-size:   clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.05;
  color:       var(--ink);
  margin:      24px 0 0;
  padding-bottom: 14px;
  border-bottom:  2px solid var(--rule-heavy);
}

h2 {
  font-family: var(--serif);
  font-size:   1.3rem;
  font-weight: 400;
  line-height: 1.15;
  color:       var(--ink);
  margin-bottom: 10px;
}

h3 {
  font-family:    var(--mono);
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--grey-3);
  margin-bottom:  6px;
}

p {
  font-family:   var(--body);
  font-size:     0.95rem;
  line-height:   1.65;
  color:         var(--ink);
  margin-bottom: 0.8rem;
}

strong, b { font-family: 'AnekOdia-SemiBold', Georgia, serif; }

/* ── Links ────────────────────────────────────────────────────── */
a {
  font-family:      var(--mono);
  font-size:        0.78rem;
  color:            var(--ink);
  text-decoration:  none;
  padding:          0.05rem 0;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size:  100% 1px;
  transition:       background-size var(--t), opacity var(--t);
}

a:hover {
  background-size: 0% 1px;
  opacity: 0.55;
}

.no-decoration {
  background-image: none !important;
  background: none !important;
}

/* ── Images ───────────────────────────────────────────────────── */
img { transition: filter 0.4s ease; }
body.dark-mode img { filter: invert(0.88) hue-rotate(180deg); }

/* Sized SVG icon helpers */
.tinier-square-image { width: 1.2rem;  height: 1.2rem;  object-fit: contain; }
.tiny-square-image   { width: 2.2rem;  height: 2.2rem;  object-fit: contain; }
.square-image        { width: 2rem;    height: 2rem;    object-fit: contain; }
.center-image        { width: 5rem;    height: 3.5rem;  object-fit: contain; }
.large-image         { width: 4rem;    height: 4rem;    object-fit: contain; }
.larger-image        { width: 8rem;    height: 8rem;    object-fit: contain; }

.clickable-image {
  cursor:  pointer;
  display: inline-flex;
  align-items: center;
}

body.dark-mode .clickable-image img { filter: invert(1); }

/* ── Layout ───────────────────────────────────────────────────── */
.content {
  max-width: 1180px;
  margin:    0 auto;
  padding:   0 var(--pad) var(--pad);
}

.row-wrap {
  display:   flex;
  flex-wrap: wrap;
  gap:       0;
}

.column-wrap {
  display:        flex;
  flex-direction: column;
}

.force-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.right-text  { text-align: right; }
.left-text   { text-align: left; }
.flex-end    { justify-content: flex-end; }
.left-margin { margin-left: 5%; }

/* spacing */
.square-margin-1 { margin: 0.75rem; }
.margin-top-1    { margin-top: 0.75rem; }
.margin-top-2    { margin-top: 2rem; }
.margin-top-3    { margin-top: 1.5rem; }
.large-font      { font-size: 1.15rem; }
.tiny-text       { font-size: 0.68rem; font-family: var(--mono); }

.hidden { display: none !important; }

/* ── Top navigation ───────────────────────────────────────────── */
.top-nav {
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  padding:         10px var(--pad);
  border-bottom:   2px solid var(--rule-heavy);
  background:      var(--paper);
}

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

.top-nav .left  { position: absolute; left: var(--pad); display: flex; align-items: center; gap: 6px; }
.top-nav .right { position: absolute; right: var(--pad); display: flex; align-items: center; }
.top-nav .ps-nav-slot { position: absolute; right: calc(var(--pad) + 48px); }

/* Dropdown */
.dropdown         { display: inline-block; position: relative; }
.dropbtn {
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         var(--ink);
  display:       flex;
  align-items:   center;
  gap:           4px;
  padding:       4px;
  background-image: none !important;
}

.dropdown-content {
  display:        none;
  position:       absolute;
  right:          0;
  top:            100%;
  background:     var(--paper);
  border-top:     2px solid var(--rule-heavy);
  border-bottom:  1px solid var(--rule);
  border-left:    1px solid var(--rule);
  border-right:   1px solid var(--rule);
  min-width:      200px;
  z-index:        200;
}

.dropdown-content a {
  display:          block;
  padding:          10px 16px;
  font-family:      var(--mono);
  font-size:        0.68rem;
  color:            var(--ink);
  border-bottom:    1px solid var(--rule);
  background-image: none !important;
  transition:       background var(--t);
}

.dropdown-content a:hover {
  background: var(--grey-1);
  opacity:    1;
  background-size: 0 !important;
}

.dropdown-content a:last-child { border-bottom: none; }
.dropdown:hover .dropdown-content { display: block; }

/* Dark mode dropdown */
body.dark-mode .dropdown-content { background: var(--grey-1); }
body.dark-mode .dropdown-content a:hover { background: var(--grey-2); }

/* Subscribe strip */
#subscribe, #unsubscribe {
  font-family:    var(--mono);
  font-size:      0.58rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        5px 12px;
  border:         none;
  border-bottom:  1px solid var(--rule);
  color:          var(--grey-3);
  background:     transparent;
  background-image: none !important;
  cursor:         pointer;
  width:          100%;
  text-align:     center;
  display:        block;
  transition:     color var(--t);
}

#subscribe:hover, #unsubscribe:hover {
  color: var(--ink);
  background-size: 0 !important;
}

/* ── Buttons ──────────────────────────────────────────────────── */
button {
  font-family:   var(--mono);
  font-size:     0.72rem;
  background:    none;
  border:        none;
  color:         var(--ink);
  cursor:        pointer;
  padding:       0;
  background-image: linear-gradient(var(--grey-3), var(--grey-3));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
  transition:    background-size var(--t), opacity var(--t);
}

button:hover {
  background-size: 0% 1px;
  opacity: 0.6;
}

/* Primary submit */
.submit,
input[type="submit"],
button[type="submit"] {
  font-family:      var(--mono);
  font-size:        0.68rem;
  font-weight:      700;
  letter-spacing:   0.14em;
  text-transform:   uppercase;
  color:            var(--ink);
  background:       transparent;
  background-image: none !important;
  border:           none;
  border-bottom:    2px solid var(--ink);
  padding:          6px 0;
  cursor:           pointer;
  text-decoration:  none;
  display:          inline-block;
  transition:       opacity var(--t);
}

.submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  opacity: 0.5;
}

/* ── Flash messages ───────────────────────────────────────────── */
.notice, p.notice {
  font-family:    var(--mono);
  font-size:      0.65rem;
  letter-spacing: 0.06em;
  padding:        8px var(--pad);
  border-bottom:  1px solid var(--rule);
  color:          var(--grey-4);
  background:     transparent;
  margin:         0;
}

.alert, p.alert {
  font-family:    var(--mono);
  font-size:      0.65rem;
  letter-spacing: 0.06em;
  padding:        8px var(--pad);
  border-bottom:  1px solid var(--rule);
  border-left:    3px solid var(--ink);
  color:          var(--ink);
  background:     var(--grey-1);
  margin:         0;
}

p.notice:empty, p.alert:empty { display: none; }

/* ── Forms ────────────────────────────────────────────────────── */
label {
  font-family:    var(--mono);
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--grey-3);
  display:        block;
  margin-bottom:  5px;
  margin-top:     18px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
select,
textarea {
  font-family:    var(--mono);
  font-size:      0.8rem;
  color:          var(--ink);
  background:     transparent;
  border:         none;
  border-bottom:  1px solid var(--rule);
  border-radius:  0;
  padding:        8px 0;
  width:          100%;
  max-width:      480px;
  display:        block;
  outline:        none;
  transition:     border-color var(--t);
  appearance:     none;
}

input:focus,
select:focus,
textarea:focus {
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
}

textarea {
  min-height:  140px;
  resize:      vertical;
  max-width:   100%;
  padding-top: 10px;
}

select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239e9b96'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 4px center;
  padding-right:       20px;
  cursor:              pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width:        15px;
  height:       15px;
  accent-color: var(--ink);
  cursor:       pointer;
}

input[type="file"] {
  font-family: var(--mono);
  font-size:   0.72rem;
  color:       var(--grey-4);
  border:      none;
  padding:     8px 0;
  cursor:      pointer;
}

.field { margin-bottom: 4px; }

/* Rich text editor */
trix-toolbar {
  border:         none !important;
  border-bottom:  1px solid var(--rule) !important;
  border-radius:  0 !important;
  background:     transparent !important;
  padding:        6px 0 !important;
}

trix-editor {
  font-family:   var(--body) !important;
  font-size:     0.9rem !important;
  line-height:   1.6 !important;
  border:        none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background:    transparent !important;
  color:         var(--ink) !important;
  padding:       10px 0 !important;
  min-height:    140px;
}

trix-editor:focus { border-bottom-color: var(--ink) !important; }

/* Error messages */
#error_explanation,
div[style*="color: red"] {
  font-family:   var(--mono);
  font-size:     0.68rem;
  color:         var(--ink);
  padding:       0;
  margin-bottom: 20px;
  border:        none;
  border-left:   3px solid var(--ink);
  padding-left:  12px;
}

#error_explanation h2,
div[style*="color: red"] h2 {
  font-family:   var(--mono);
  font-size:     0.65rem;
  font-weight:   700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  border:        none;
  padding:       0;
  color:         var(--ink);
}

#error_explanation ul,
div[style*="color: red"] ul {
  list-style: none;
  padding:    0;
}

#error_explanation li,
div[style*="color: red"] li {
  font-size:     0.65rem;
  color:         var(--grey-4);
  padding:       3px 0;
  border:        none;
  margin:        0;
}

/* ── Tables ───────────────────────────────────────────────────── */
table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--mono);
  font-size:       0.72rem;
  margin:          1.5rem 0;
}

thead {
  border-bottom: 2px solid var(--rule-heavy);
}

th {
  font-family:    var(--mono);
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--grey-3);
  padding:        6px 8px;
  text-align:     left;
  background:     transparent;
}

td {
  padding:       10px 8px;
  border-bottom: 1px solid var(--rule);
  color:         var(--ink);
  vertical-align: middle;
  text-align:    left;
}

tr:last-child td { border-bottom: none; }

tbody tr { transition: background var(--t); }
tbody tr:hover { background: var(--grey-1); }

body.dark-mode tbody tr:hover { background: var(--grey-2); }

/* Old selectors kept for compatibility */
.table    { margin-top: 1.5rem; overflow-x: auto; }
.thead    { border-bottom: 2px solid var(--rule-heavy); }
.th       { padding: 6px 8px; }
.td       { padding: 10px 8px; border-bottom: 1px solid var(--rule); }
.tdr      { background: transparent; }

/* ── Tile / Card → no box, use rules ─────────────────────────── */
.tile, .card, .no-padding {
  background:    transparent;
  box-shadow:    none !important;
  border:        none;
  border-top:    1px solid var(--rule);
  padding:       var(--pad) 0;
  margin:        0;
  border-radius: 0;
}

.tile:hover, .card:hover { box-shadow: none !important; }

/* js-tile (collapsible section header) */
.js-tile {
  cursor:        pointer;
  padding:       10px 0;
  border-top:    1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family:   var(--mono);
  font-size:     0.68rem;
  font-weight:   700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:         var(--ink);
  background:    transparent;
  box-shadow:    none !important;
}

.js-tile:hover { background: transparent; box-shadow: none !important; }

/* ── Notifications ────────────────────────────────────────────── */
.notifications {
  width:     100%;
  max-width: 720px;
}

.notification-type-group {
  margin-bottom: 0;
}

.notification-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.notification-list li {
  padding:       12px 0;
  border-bottom: 1px solid var(--rule);
  margin:        0;
  font-family:   var(--mono);
  font-size:     0.72rem;
  color:         var(--ink);
  background:    transparent;
}

.notification-list li:hover { background: transparent; }

.notification-list li strong {
  display:       block;
  font-size:     0.72rem;
  font-weight:   700;
  margin-bottom: 3px;
}

.notification-list li p {
  font-size:     0.63rem;
  color:         var(--grey-3);
  margin:        0;
  font-family:   var(--mono);
}

.notification-list .right-text {
  margin-top: 6px;
}

.seen { opacity: 0.4; }

/* ── List item (seen/unseen dot) ──────────────────────────────── */
li {
  padding:       10px 0;
  border-bottom: 1px solid var(--rule);
  list-style:    none;
  font-family:   var(--mono);
  font-size:     0.72rem;
}

/* ── Text preview areas ───────────────────────────────────────── */
.text-previews {
  font-family: var(--body);
  font-size:   0.88rem;
  line-height: 1.65;
  color:       var(--ink);
  max-width:   60ch;
}

.chapter { width: 100%; }

/* ── Attendance specific ──────────────────────────────────────── */
.field select.form-control {
  font-family: var(--mono);
  font-size:   0.72rem;
  border:      none;
  border-bottom: 1px solid var(--rule);
  padding:     5px 0;
}

/* ── Password / will prompt ───────────────────────────────────── */
.container {
  max-width:   560px;
  margin:      0 auto;
  padding:     var(--pad) 0;
}

.container h2 {
  font-family: var(--serif);
  font-size:   1.4rem;
  font-weight: 400;
  border:      none;
  padding:     0 0 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.container p {
  font-family: var(--mono);
  font-size:   0.72rem;
  color:       var(--grey-4);
}

.form-control {
  font-family:  var(--mono);
  font-size:    0.8rem;
  background:   transparent;
  border:       none;
  border-bottom: 1px solid var(--rule);
  padding:      8px 0;
  width:        100%;
  color:        var(--ink);
  border-radius: 0;
  outline:      none;
}

.form-control:focus { border-bottom-color: var(--ink); }

/* Alert danger */
.alert-danger {
  font-family: var(--mono);
  font-size:   0.65rem;
  color:       var(--ink);
  padding:     6px 0;
  border-left: 2px solid var(--ink);
  padding-left: 10px;
  margin-bottom: 10px;
}

/* ── Pagy pagination ──────────────────────────────────────────── */
nav.pagy-nav, .pagy-nav {
  display:     flex;
  gap:         0;
  margin:      2rem 0;
  font-family: var(--mono);
  font-size:   0.65rem;
  border-top:  1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding:     8px 0;
  flex-wrap:   wrap;
}

.pagy-nav a,
.pagy-nav span {
  padding:         4px 10px;
  color:           var(--ink);
  text-decoration: none;
  background-image: none !important;
  font-family:     var(--mono);
  border-right:    1px solid var(--rule);
  transition:      opacity var(--t);
  margin:          0;
}

.pagy-nav a:hover { opacity: 0.5; background-size: 0 !important; }

.pagy-nav span.current {
  font-weight: 700;
  color:       var(--ink);
}

/* ── Modal overlays ───────────────────────────────────────────── */
.fixed.inset-0 {
  background: rgba(10,10,10,0.6) !important;
  backdrop-filter: blur(2px);
}

/* The white inner card → strip all rounding/shadow */
.bg-white.p-6.rounded-lg.shadow-xl,
.relative.top-20.mx-auto.p-5 {
  background:    var(--paper) !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  border-top:    3px solid var(--ink) !important;
  padding:       var(--pad) !important;
}

body.dark-mode .bg-white.p-6.rounded-lg.shadow-xl,
body.dark-mode .relative.top-20.mx-auto.p-5 {
  background: var(--grey-1) !important;
}

/* Modal heading */
.bg-white h3, .relative.top-20 h3 {
  font-family:   var(--serif) !important;
  font-size:     1.1rem !important;
  font-weight:   400 !important;
  color:         var(--ink) !important;
  margin-bottom: 14px;
  border:        none;
  padding:       0;
  letter-spacing: 0;
  text-transform: none;
}

/* Modal buttons */
.bg-green-500, .bg-red-500, .bg-gray-300,
.bg-blue-600, .bg-white.border {
  font-family:      var(--mono) !important;
  font-size:        0.65rem !important;
  font-weight:      700 !important;
  letter-spacing:   0.12em !important;
  text-transform:   uppercase !important;
  background:       transparent !important;
  border:           none !important;
  border-bottom:    2px solid var(--ink) !important;
  border-radius:    0 !important;
  color:            var(--ink) !important;
  padding:          6px 0 !important;
  margin-right:     16px !important;
  box-shadow:       none !important;
  background-image: none !important;
  cursor:           pointer;
  transition:       opacity var(--t) !important;
}

.bg-green-500:hover, .bg-red-500:hover,
.bg-blue-600:hover, .bg-white.border:hover {
  opacity: 0.5 !important;
}

.bg-gray-300 {
  border-bottom-color: var(--grey-2) !important;
  color: var(--grey-4) !important;
}

/* Tailwind hidden override */
.hidden { display: none !important; }

/* ── Dark mode toggle ─────────────────────────────────────────── */
#darkModeToggle { cursor: pointer; }

/* ── Members / un-member page ─────────────────────────────────── */
.force-row .larger-image { opacity: 0.3; }

/* ── Dark mode propagation ────────────────────────────────────── */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode trix-editor,
body.dark-mode .form-control {
  color:        var(--ink);
  border-color: var(--rule);
  background:   transparent;
}

body.dark-mode label { color: var(--grey-3); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root { --pad: 16px; }

  h1 { font-size: 1.6rem; }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea { max-width: 100%; }

  .top-nav .ps-nav-slot { right: 50px; }

  .dropdown-content { right: -40px; }
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .top-nav, #subscribe, #unsubscribe { display: none !important; }
  body { background: white; color: black; }
  a { text-decoration: underline; }
}