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%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.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;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Custom styles */
#mobile-menu {
  display: none;
}

#mobile-menu.show {
  display: block;
}

/* Form styles - only keeping non-conflicting custom styles */
.form-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

/* ---- Radar scope background (shared across pages) — matches login screen look ---- */
.radar-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0a1a10 0%, #04100a 70%);
}
.radar-bg .scope {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92vmin, 780px);
  height: min(92vmin, 780px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(51, 255, 102, 0.08);
  box-shadow: 0 0 60px rgba(51, 255, 102, 0.03), inset 0 0 90px rgba(51, 255, 102, 0.015);
}
.radar-bg .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(51, 255, 102, 0.05);
}
.radar-bg .ring.r1 { inset: 12%; }
.radar-bg .ring.r2 { inset: 25%; }
.radar-bg .ring.r3 { inset: 38%; }
.radar-bg .ring.r4 { inset: 50%; }
.radar-bg .cross-x {
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(51, 255, 102, 0.04);
}
.radar-bg .cross-y {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(51, 255, 102, 0.04);
}
.radar-bg .afterglow {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(51, 255, 102, 0.04), rgba(51, 255, 102, 0.015) 55deg, transparent 85deg);
  filter: blur(10px);
  animation: radar-bg-sweep 16s linear infinite;
}
.radar-bg .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(51, 255, 102, 0.12), rgba(51, 255, 102, 0.03) 35deg, transparent 65deg);
  animation: radar-bg-sweep 16s linear infinite;
}
@keyframes radar-bg-sweep {
  to { transform: rotate(360deg); }
}
.radar-bg .blip {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(51, 255, 102, 0.7);
  box-shadow: 0 0 4px rgba(51, 255, 102, 0.3), 0 0 10px rgba(51, 255, 102, 0.2);
  animation: radar-bg-blip 7s ease-in-out infinite;
  opacity: 0;
}
@keyframes radar-bg-blip {
  0%   { opacity: 0; transform: scale(0.5); }
  8%   { opacity: 1; transform: scale(1.3); }
  22%  { opacity: 0.5; transform: scale(1); }
  55%  { opacity: 0; transform: scale(0.8); }
  100% { opacity: 0; }
}
.radar-bg-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 2px, transparent 2px, transparent 4px);
  opacity: 0.7;
  mix-blend-mode: multiply;
  animation: crt-flicker 0.1s infinite;
}
@keyframes crt-flicker {
  0%   { opacity: 0.65; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.65; }
}
.radar-vignette-soft {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.5) 88%, rgba(0, 0, 0, 0.7) 100%);
}

/* ---- Digital ticker banner (flash notices) ---- */
.ticker-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(7, 20, 16, 0.85);
  border: 1px solid rgba(51, 255, 102, 0.18);
  border-radius: 0.5rem;
  padding: 0.25rem 0.45rem;
  box-shadow: 0 0 10px rgba(51, 255, 102, 0.05);
  overflow: hidden;
  position: relative;
}
.ticker-label {
  flex-shrink: 0;
  font-family: 'VT323', 'Share Tech Mono', monospace !important;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #33ff66;
  padding: 0.15rem 0.5rem 0.12rem;
  background: rgba(51, 255, 102, 0.06);
  border: 1px solid rgba(51, 255, 102, 0.15);
  border-radius: 0.35rem;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(51, 255, 102, 0.32), 0 0 1px rgba(51, 255, 102, 0.25);
  -webkit-text-stroke: 0.35px rgba(51, 255, 102, 0.17);
}
.ticker-track {
  flex: 1;
  overflow: hidden;
  display: flex;
}
.ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
}
.ticker-inner span {
  flex-shrink: 0;
  padding-right: 1rem;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  font-family: 'VT323', 'Share Tech Mono', monospace !important;
  color: #8FCDB2;
  text-shadow: 0 0 3px rgba(143, 205, 178, 0.14), 0 0 1px rgba(143, 205, 178, 0.10);
  -webkit-text-stroke: 0.25px rgba(143, 205, 178, 0.10);
  paint-order: stroke fill;
}
.ticker-inner .ticker-num {
  color: #E8FFF3;
  text-shadow: 0 0 4px rgba(232, 255, 243, 0.30), 0 0 1px rgba(143, 205, 178, 0.22);
  -webkit-text-stroke: 0.25px rgba(232, 255, 243, 0.14);
  font-weight: 400;
}
.ticker-inner .ticker-sep {
  color: #8FCDB2;
  opacity: 0.38;
  text-shadow: none;
  -webkit-text-stroke: 0;
  font-weight: 400;
  padding: 0 0.22rem;
}
.ticker-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  white-space: nowrap;
}
.ticker-pair .ticker-num + span {
  letter-spacing: 0.01em;
}
/* ── WISP WIRE — old news-wire / stock ticker — distinct warm black/brown track, aged-paper type ──
   Theme ticker colors are scoped to .ticker-bar:not(.wisp-wire) so this reads as its own component. */
.ticker-bar.wisp-wire {
  background: #100E09;
  border-color: rgba(201, 168, 106, 0.28);
  box-shadow: inset 0 1px 0 rgba(201, 168, 106, 0.18), inset 0 -1px 0 rgba(201, 168, 106, 0.14), 0 2px 12px rgba(0, 0, 0, 0.35);
  padding: 0.2rem 0 0.2rem 0.4rem;
  gap: 0;
}
.ticker-bar.wisp-wire .ticker-label {
  color: #C9A86A;
  background: rgba(201, 168, 106, 0.10);
  border-color: rgba(201, 168, 106, 0.28);
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.ticker-bar.wisp-wire .ticker-label .ticker-bolt {
  color: #C9A86A;
}
.ticker-bar.wisp-wire .ticker-track {
  background: #100E09;
  border-top: 1px solid rgba(201, 168, 106, 0.22);
  border-bottom: 1px solid rgba(201, 168, 106, 0.22);
  margin-left: 0.4rem;
  padding: 0.22rem 0;
  position: relative;
}
.ticker-bar.wisp-wire .ticker-track::before,
.ticker-bar.wisp-wire .ticker-track::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 2.2rem;
  pointer-events: none;
  z-index: 2;
}
.ticker-bar.wisp-wire .ticker-track::before {
  left: 0;
  background: linear-gradient(to right, #100E09 35%, rgba(16, 14, 9, 0) 100%);
}
.ticker-bar.wisp-wire .ticker-track::after {
  right: 0;
  background: linear-gradient(to left, #100E09 35%, rgba(16, 14, 9, 0) 100%);
}
.ticker-bar.wisp-wire .ticker-inner {
  animation: ticker-scroll 55s linear infinite;
}
.ticker-bar.wisp-wire .ticker-inner span {
  color: #E4C98F;
  font-size: 1.50rem;
  font-weight: 400;
  font-family: 'VT323', 'Share Tech Mono', ui-monospace, monospace !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(201, 168, 106, 0.35), 0 0 14px rgba(201, 168, 106, 0.15);
  -webkit-text-stroke: 0;
  paint-order: fill;
  animation: wire-teletype 9s ease-in-out infinite;
}
.ticker-bar.wisp-wire .ticker-inner .ticker-num {
  color: #FFF1C7;
  text-shadow: 0 0 5px rgba(255, 241, 199, 0.24);
  -webkit-text-stroke: 0;
  font-weight: 700;
}
.ticker-bar.wisp-wire .ticker-inner .ticker-sep {
  color: #E4C98F;
  opacity: 0.95;
  text-shadow: none;
  -webkit-text-stroke: 0;
  font-weight: 700;
  font-size: 1.15em;
  padding: 0 0.55rem;
  vertical-align: middle;
}
.ticker-bar.wisp-wire .ticker-inner > span {
  padding-right: 4.5rem;
}
.ticker-bar.wisp-wire .ticker-moving-text {
  display: inline-flex;
  align-items: center;
}
.ticker-bar.wisp-wire .ticker-word,
.ticker-bar.wisp-wire .ticker-pair,
.ticker-bar.wisp-wire .ticker-pair span,
.ticker-bar.wisp-wire .ticker-word span {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0, #000 2px, transparent 2px, transparent 3px);
  mask-image: repeating-linear-gradient(to bottom, #000 0, #000 2px, transparent 2px, transparent 3px);
}
.ticker-bar.wisp-wire .ticker-sep {
  display: inline-block;
  flex: 0 0 auto;
  align-self: center;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  aspect-ratio: 1 / 1;
  margin: 0 0.65rem;
  vertical-align: middle;
  background: #C9A86A;
  border-radius: 999px;
  opacity: 0.72;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}
@keyframes wire-teletype {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.04); }
  73%       { filter: brightness(0.99); }
}
/* ── WISP WIRE — SCROLLING TICKER TAPE (no LED) ──
   Stationary WISP WIRE label + one continuous line scrolling right→left.
   Uses WISP's normal condensed interface font (Share Tech Mono) — no VT323,
   no dot-matrix mask, no scanlines, no glow. Slim ribbon housing preserved. */
.ticker-bar.wisp-wire.wisp-wire--ticker {
  padding: 0.20rem 0.35rem 0.20rem 0.4rem;
  gap: 0.45rem;
  min-height: 2.15rem;
}
.wisp-ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  background: #100E09;
  border-top: 1px solid rgba(201, 168, 106, 0.20);
  border-bottom: 1px solid rgba(201, 168, 106, 0.20);
  border-radius: 0.35rem;
  margin-left: 0.15rem;
  padding: 0.22rem 0;
}
.wisp-ticker-viewport::before,
.wisp-ticker-viewport::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1.6rem;
  pointer-events: none;
  z-index: 2;
}
.wisp-ticker-viewport::before {
  left: 0;
  background: linear-gradient(to right, #100E09 45%, rgba(16,14,9,0) 100%);
}
.wisp-ticker-viewport::after {
  right: 0;
  background: linear-gradient(to left, #100E09 45%, rgba(16,14,9,0) 100%);
}
.wisp-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: wisp-ticker-scroll 38s linear infinite;
}
.wisp-ticker__segment {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
  padding-right: 8rem;
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: #E4C98F;
  /* kill any inherited LED treatments */
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.wisp-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}
.wisp-ticker__icon {
  font-size: 0.72rem;
  color: #C9A86A;
  opacity: 0.9;
  flex-shrink: 0;
}
.wisp-ticker__num,
.wisp-ticker__strong {
  color: #FFF1C7;
  font-weight: 700;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.wisp-ticker__label {
  color: #E4C98F;
  opacity: 0.92;
}
.wisp-ticker__sep {
  color: rgba(201, 168, 106, 0.55);
  font-weight: 400;
  padding: 0 0.9rem;
  flex-shrink: 0;
}
.wisp-ticker__dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}
.wisp-ticker__dot--current { background: #34d399; }
.wisp-ticker__dot--aging { background: #fbbf24; }
.wisp-ticker__dot--delayed { background: #f87171; }
.wisp-ticker__dot--none { background: #71717a; }
.wisp-ticker__state {
  font-size: 0.86rem;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.wisp-ticker__state--current { color: #86efac; }
.wisp-ticker__state--aging { color: #fcd34d; }
.wisp-ticker__state--delayed { color: #fca5a5; }
/* Keep the new presentation free of LED distortion even though old
   global wisp-wire rules still exist for legacy ticker-inner markup */
.ticker-bar.wisp-wire.wisp-wire--ticker .wisp-ticker__segment,
.ticker-bar.wisp-wire.wisp-wire--ticker .wisp-ticker__segment * {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  animation: none !important;
}
@keyframes wisp-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Pause on hover / focus — calm reading */
.wisp-ticker-viewport:hover .wisp-ticker-track,
.wisp-ticker-viewport:focus-within .wisp-ticker-track {
  animation-play-state: paused;
}
/* Narrow screens: keep scrolling, never compress into cells */
@media (max-width: 640px) {
  .wisp-ticker-viewport { overflow-x: hidden; }
  .wisp-ticker__segment { font-size: 0.84rem; gap: 0.28rem; padding-right: 4rem; }
  .wisp-ticker__icon { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wisp-ticker-track { animation: none !important; transform: none !important; }
  .wisp-ticker__segment[aria-hidden="true"] { display: none !important; }
  .wisp-ticker-viewport { overflow-x: auto; scrollbar-width: none; }
  .wisp-ticker-viewport::-webkit-scrollbar { display: none; }
  .wisp-wire .ticker-inner span { animation: none; }
  .ticker-bar.wisp-wire .ticker-inner { animation: none; }
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-bolt {
  display: inline-block;
  animation: ticker-bolt-pulse 2.8s ease-in-out infinite;
}
@keyframes ticker-bolt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px rgba(51,255,102,0.35)); }
  50%       { opacity: 0.65; transform: scale(0.92); filter: drop-shadow(0 0 1px rgba(51,255,102,0.15)); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-bolt { animation: none; }
}

/* ---- ZME pink: Larry's pill color (2026-08-17) ----
   All pink status pills (badge-error: the NEEDED pill, missing-hazard ✗
   marks, LLWS tags, etc.) come from Daisy's error color. Override the night
   theme's error to #FF5C62 so every pill matches, everywhere.
   badge-error reads --fallback-er (a direct color) first; --color-error
   keeps the rest of the error family (btn-error, alert-error) in sync. */
[data-theme="night"] {
  --fallback-er: #FF5C62;
  --color-error: #FF5C62;
}

/* ---- Sweep-scan phosphor (Larry, 2026-08-17) ----
   As the radar beam crosses a NEEDED row, the pink status items inside the
   row catch the light — the missing-hazard badges surge and glow for the
   instant the beam passes, like the scope is picking them out. Painted with
   box-shadow + brightness (NOT a row filter — filters don't render on table
   rows in Chrome). Larry's refinement (2026-08-17): the ITEMS glow, not the
   whole row — no row-wide wash, no edge light, just the badges flaring.
   The needed pill's own pulse keeps running; the X-marks do the flaring.
   No loop, no flash. */
/* Items catch the light fast as the beam arrives, but fade out slowly —
   the sweep leaves a phosphor trail behind it (Larry, 2026-08-17).
   Directional transition: the BASE style's transition governs the fade-out
   (long), the .sweep-lit style's transition governs the fast catch (short). */
[data-controller~="sweep-scan"] .badge-error,
[data-controller~="sweep-scan"] .badge-error i,
[data-controller~="sweep-scan"] .badge-success,
[data-controller~="sweep-scan"] .badge-success i,
[data-controller~="sweep-scan"] .badge-cwa,
[data-controller~="sweep-scan"] .badge-sigmet,
[data-controller~="sweep-scan"] .badge-airmet,
[data-controller~="sweep-scan"] .badge-airport {
  transition: box-shadow 1.4s ease-out, filter 1.4s ease-out, text-shadow 1.4s ease-out;
}
.sweep-lit.badge-error,
.sweep-lit .badge-error,
.sweep-lit.badge-error i,
.sweep-lit .badge-error i,
.sweep-lit.badge-success,
.sweep-lit .badge-success,
.sweep-lit.badge-success i,
.sweep-lit .badge-success i,
.sweep-lit.badge-cwa,
.sweep-lit .badge-cwa,
.sweep-lit.badge-sigmet,
.sweep-lit .badge-sigmet,
.sweep-lit.badge-airmet,
.sweep-lit .badge-airmet,
.sweep-lit.badge-airport,
.sweep-lit .badge-airport {
  transition: box-shadow 0.15s ease-in, filter 0.15s ease-in, text-shadow 0.15s ease-in;
}
.sweep-lit.badge-error,
.sweep-lit .badge-error {
  /* Stronger flare per Larry 2026-08-22 — keep 16s sequence untouched */
  box-shadow: 0 0 34px rgba(255, 92, 98, 0.88), 0 0 14px rgba(255, 92, 98, 0.62);
  filter: brightness(1.38) saturate(1.12);
}
.sweep-lit.badge-error,
.sweep-lit .badge-error,
.sweep-lit.badge-error i,
.sweep-lit .badge-error i {
  text-shadow: 0 0 16px rgba(255, 92, 98, 0.95);
}
/* The NEEDED pill's ● blips on like a radar contact the moment the beam
   crosses the row — a bright, momentary illumination, then it settles back
   as the sweep keeps scanning (Larry, 2026-08-17). */
.sweep-lit.badge-error i.fa-circle,
.sweep-lit .badge-error i.fa-circle {
  filter: brightness(2.3);
  text-shadow: 0 0 10px rgba(255, 92, 98, 1), 0 0 28px rgba(255, 92, 98, 0.8);
}
/* GREEN + Driven By also flare when the sweep crosses — same timing as red
   (Larry) — red unchanged, these are added. */
.sweep-lit.badge-success,
.sweep-lit .badge-success {
  box-shadow: 0 0 34px rgba(51, 255, 102, 0.88), 0 0 14px rgba(51, 255, 102, 0.62);
  filter: brightness(1.38) saturate(1.12);
  text-shadow: 0 0 16px rgba(51, 255, 102, 0.95);
}
.sweep-lit.badge-success i,
.sweep-lit .badge-success i {
  text-shadow: 0 0 16px rgba(51, 255, 102, 0.95);
}
.sweep-lit.badge-cwa,
.sweep-lit .badge-cwa,
.sweep-lit.badge-sigmet,
.sweep-lit .badge-sigmet,
.sweep-lit.badge-airmet,
.sweep-lit .badge-airmet,
.sweep-lit.badge-airport,
.sweep-lit .badge-airport {
  box-shadow: 0 0 34px rgba(251, 191, 36, 0.88), 0 0 14px rgba(251, 191, 36, 0.62);
  filter: brightness(1.38) saturate(1.12);
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.95);
}
/* Slow idle breathe for the NEEDED dot (Larry, 2026-08-28: "have the black
   dot pulse slowly too") — a quiet contact blip between sweeps. Opacity only,
   so it never fights the sweep's brightness/text-shadow on the same icon. */
.needed-dot {
  animation: needed-dot-breathe 3.5s ease-in-out infinite;
}
@keyframes needed-dot-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
/* CREDITED check now breathes slowly like the NEEDED dot (Larry) — the pill
   itself no longer pulses (cred-pulse removed from the badge). */
.credited-check {
  animation: needed-dot-breathe 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .needed-dot, .credited-check { animation: none; }
}
/* ---- NEEDED pill responds to the sweep only (Larry, 2026-08-28) ----
   The idle breathing stand-in is gone — the pill sits steady and flares only
   when the radar beam crosses the row, exactly like the approved 2026-08-17
   behavior. The sweep-lit rules above own the glow. Reduced motion handled
   by the scope panel (sweep stops -> controller lights nothing). */

/* ---- Hazard pill aging — thin loading bar (Larry, 2026-08-28) ----
   Original pills/checks stay completely unchanged. A thin bar sits directly
   BENEATH each pill/check and fills left→right across the 60-min freshness
   window (--hazard-fill 0.0 → 1.0 from the corrected clock: requirement
   activation before the first qualifying PIREP, reset from the most recent
   qualifying PIREP after).
   COLOR: the bar always matches its indicator — red (--fallback-er, the same
   token badge-error uses) under a NEEDED pill, teal (--fallback-su, the same
   token badge-success uses) under a CREDITED check. When a check expires and
   flips back to red, the bar flips teal→red with it (status drives variant).
   · 0–29 min: quiet progressive fill, no animation.
   · 30+ min: slow restrained pulse of the bar.
   · 55+ min: brighter traveling shimmer across the bar every few seconds.
   · 60+ min: hold full with a steady hot glow until a PIREP resets.
   ONLY the bar animates — never the pill, check, text, OVERALL badge, or row.
   WIDTH: fixed (36px) and identical for every hazard column — never sized
   from the pill above, so CIG · VIS can't stretch it; centered beneath the
   indicator on desktop and mobile alike. */
.hazard-loadbar {
  --loadbar: var(--fallback-er, var(--er, #ff5c62));
  display: block;
  width: 36px;
  height: 3px;
  margin: 2px auto 0;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--loadbar) 16%, transparent);
  position: relative;
  overflow: hidden;
  pointer-events: none;
  /* Whole-bar glow — the container's own box-shadow is NOT clipped by its
     overflow:hidden, so the bar reads as a glowing line in its indicator's
     color at every stage (Larry, 2026-08-28: "make the whole bar glow more"). */
  box-shadow: 0 0 4px color-mix(in srgb, var(--loadbar) 55%, transparent),
              0 0 10px color-mix(in srgb, var(--loadbar) 30%, transparent);
}
.hazard-loadbar--teal {
  /* DaisyUI theme tokens store RAW oklch channels (--su = "78.452% 0.132529
     181.911977"), NOT a usable color — so `background: var(--su)` paints
     nothing and the teal bar was invisible (Larry, 2026-08-28: "no green
     bar under the checkmark"). Wrap the channels in oklch() exactly like
     DaisyUI's own .badge-success consumes them. */
  --loadbar: oklch(var(--su, 78.452% 0.132529 181.911977));
}
.hazard-loadbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--loadbar);
  opacity: 0.75;
  width: calc(var(--hazard-fill, 0) * 100%);
  transition: width 1s linear;
}
/* 45–54 AGING: gentle slow pulse (Larry, 2026-08-30 — first indication) */
.hazard-loadbar--pulse::before {
  animation: hazard-loadbar-pulse 3.2s ease-in-out infinite;
}
@keyframes hazard-loadbar-pulse {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50%      { opacity: 1;    filter: brightness(1.35); }
}
/* 55–59 EXPIRING: noticeably stronger glow + white streak (unmistakably
   different from 45–54, without being obnoxious). */
.hazard-loadbar--shimmer {
  box-shadow: 0 0 10px color-mix(in srgb, var(--loadbar) 80%, transparent),
              0 0 22px color-mix(in srgb, var(--loadbar) 55%, transparent),
              0 0 34px color-mix(in srgb, var(--loadbar) 35%, transparent);
}
.hazard-loadbar--shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 70%;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--loadbar) 10%, white 90%) 50%,
    transparent);
  filter: brightness(1.9);
  box-shadow: 0 0 10px color-mix(in srgb, var(--loadbar) 30%, white 70%),
              0 0 18px color-mix(in srgb, var(--loadbar) 50%, white 50%);
  animation: hazard-loadbar-shimmer 2.0s ease-in-out infinite;
}
@keyframes hazard-loadbar-shimmer {
  0%   { left: -70%; opacity: 0.9; }
  15%  { opacity: 1; }
  35%  { left: 110%; opacity: 1; }
  100% { left: 110%; opacity: 0.9; }
}
/* 60+ STALE: full bar with a MUCH brighter slow pulse/glow. No racing
   white streak — movement simplifies, the persistent hot glow communicates
   the state (Larry, 2026-08-30 — much brighter). Mask check: the glow lives
   on the BAR CONTAINER's box-shadow (not clipped by its own overflow:hidden);
   wanting it visible requires the table wrapper NOT clip it — overflow-x-auto
   keeps horizontal scroll but vertical is visible enough for the halo. */
.hazard-loadbar--hot {
  animation: hazard-loadbar-hot 2.4s ease-in-out infinite;
  /* Ensure the hot halo isn't clipped by any cell/card rounding quirk */
  isolation: isolate;
}
.hazard-loadbar--hot::before {
  width: 100% !important;
  opacity: 1;
  filter: none;
  animation: none;
}
@keyframes hazard-loadbar-hot {
  0%, 100% {
    box-shadow: 0 0 8px var(--loadbar),
                0 0 22px color-mix(in srgb, var(--loadbar) 75%, transparent),
                0 0 42px color-mix(in srgb, var(--loadbar) 55%, transparent),
                0 0 64px color-mix(in srgb, var(--loadbar) 32%, transparent);
    filter: brightness(1.15);
  }
  50% {
    box-shadow: 0 0 16px var(--loadbar),
                0 0 38px color-mix(in srgb, var(--loadbar) 95%, transparent),
                0 0 68px color-mix(in srgb, var(--loadbar) 75%, transparent),
                0 0 92px color-mix(in srgb, var(--loadbar) 52%, transparent);
    filter: brightness(1.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hazard-loadbar--pulse::before,
  .hazard-loadbar--shimmer::after { animation: none; }
}
/* ---- Popovers above everything (Larry, 2026-08-22) ----
   The hazard/weather popovers are fixed-position floating panels. The sweep's
   lit pills get `filter: brightness()` — a filter creates its OWN stacking
   context, which let a glowing pill paint OVER an open popover and hide it.
   Two fixes:
   1) Every JS popover is fixed with a guaranteed z-index (our stylesheet,
      not a CDN utility).
   2) Header popovers live INSIDE the table header — tbody paints AFTER thead
      in DOM order, so a lit pill in tbody would naturally paint over a thead
      popover even at z-40. Pin the whole thead above tbody so header
      popovers stay readable while the sweep passes. */
[data-weather-popover-target="popover"] {
  position: fixed !important;
  z-index: 1000 !important;
}
/* ---- Popover font bump (Larry 2026-09-06) ----
   Every weather/hazard popover throughout the app was a little small
   at the scope. Bumping all text inside popovers up ~15% so it's
   readable without squinting — only inside popovers, nowhere else. */
[data-weather-popover-target="popover"] .text-\[10px\] { font-size: 12px !important; }
[data-weather-popover-target="popover"] .text-\[11px\] { font-size: 13px !important; }
[data-weather-popover-target="popover"] .text-xs { font-size: 0.875rem !important; line-height: 1.35 !important; }
[data-weather-popover-target="popover"] .text-\[13px\] { font-size: 15px !important; line-height: 1.45 !important; }
[data-weather-popover-target="popover"] .text-sm { font-size: 1rem !important; line-height: 1.45 !important; }
[data-weather-popover-target="popover"] .text-base { font-size: 1.125rem !important; line-height: 1.4 !important; }
[data-weather-popover-target="popover"] .text-\[8px\] { font-size: 10px !important; }
.sector-status-table thead {
  position: relative;
  z-index: 20;
}
.hazard-header-popover {
  z-index: 1000 !important;
}
/* ---- Sector form map preview "Preview" flash (Larry, 2026-08-20) ----
   Clicking a band's Preview button flashes that band's polygons on the map
   preview so the user can see which altitude layer they're looking at. */
g[data-band].band-flash polygon {
  stroke-width: 4;
  fill-opacity: 0.45;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
}
/* ---- Showdown sweep glow (Larry, 2026-08-17) ----
   The radar beam scans the trophy case too: when it crosses the Champion of
   the Day or Grand Champions card, the card catches a warm gold halo, the
   crown/award icons flare, and tiny star sparkles twinkle — then it fades
   with the same phosphor trail as the board. Gold, not pink: champions are
   glory, not errors. */
.sweep-champion {
  position: relative;
  transition: filter 1.6s ease-out;
}
.sweep-lit.sweep-champion {
  transition: filter 0.15s ease-in;
  filter: brightness(1.18) saturate(1.12)
          drop-shadow(0 0 22px rgba(251, 191, 36, 0.45))
          drop-shadow(0 0 60px rgba(251, 191, 36, 0.22));
}
.sweep-lit.sweep-champion .fa-crown,
.sweep-lit.sweep-champion .fa-award,
.sweep-lit.sweep-champion .fa-trophy {
  text-shadow: 0 0 16px rgba(251, 191, 36, 1), 0 0 36px rgba(251, 191, 36, 0.7);
}
/* Sparkle glints — solid gold stars that twinkle while the beam is over the
   card (Font Awesome solid-star glyphs on pseudo-elements; they vanish the
   moment the sweep moves on). */
.sweep-lit.sweep-champion::before,
.sweep-lit.sweep-champion::after {
  content: "\f005";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  color: #fde68a;
  text-shadow: 0 0 10px rgba(251, 191, 36, 1), 0 0 22px rgba(251, 191, 36, 0.8);
  position: absolute;
  z-index: 5;
  pointer-events: none;
  animation: sweep-sparkle 1.3s ease-out infinite;
}
.sweep-lit.sweep-champion::before {
  top: 14px;
  left: 18px;
}
.sweep-lit.sweep-champion::after {
  bottom: 14px;
  right: 18px;
  animation-delay: 0.45s;
}
@keyframes sweep-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  45%      { opacity: 1; transform: scale(1.2) rotate(8deg); }
  70%      { opacity: 0.6; transform: scale(0.9) rotate(2deg); }
}
/* ---- Achievement strip sweep flare (Larry, 2026-08-17) ----
   The Showdown's achievement banner (hat trick, streak, double lead,
   breakaway, photo finish, year crown race) flares hot when the radar beam
   crosses it. The streak fire never sits still: a constant low flicker
   (scale/rotate, NOT filter — the sweep needs filter for its own flare), so
   it reads as a live flame even when the beam is elsewhere. When the sweep
   passes, the icon flares WHITE-HOT — brightness up, hue shifted toward the
   white-hot core — then settles back with the same phosphor trail. */
.sweep-streak .fa-fire {
  display: inline-block;
  animation: fire-flicker 1.2s ease-in-out infinite;
  transition: filter 1.6s ease-out, text-shadow 1.6s ease-out, color 1.6s ease-out;
}
.sweep-lit.sweep-streak .fa-fire {
  transition: filter 0.15s ease-in, text-shadow 0.15s ease-in, color 0.15s ease-in;
  filter: brightness(2.2) saturate(1.7);
  color: #ffedd5;
  text-shadow: 0 0 12px rgba(251, 191, 36, 1),
               0 0 30px rgba(249, 115, 22, 0.9),
               0 0 55px rgba(249, 115, 22, 0.6);
}
@keyframes fire-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  25%      { transform: scale(1.07) rotate(1.5deg); }
  50%      { transform: scale(0.96) rotate(2deg); }
  75%      { transform: scale(1.05) rotate(-1.5deg); }
}
/* The other achievement icons (bolt / rocket / camera / crown) flare the
   same way — no idle flicker, just the white-hot catch + phosphor fade. */
.sweep-streak i {
  transition: filter 1.6s ease-out, text-shadow 1.6s ease-out, color 1.6s ease-out;
}
.sweep-lit.sweep-streak i:not(.fa-fire) {
  transition: filter 0.15s ease-in, text-shadow 0.15s ease-in, color 0.15s ease-in;
  filter: brightness(2) saturate(1.5);
  color: #ffedd5;
  text-shadow: 0 0 12px rgba(251, 191, 36, 1), 0 0 28px rgba(251, 191, 36, 0.75);
}

/* ---- Amber glow pulse when a sector is credited ---- */
@keyframes cred-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(51, 255, 102, 0.35); }
  50%      { box-shadow: 0 0 16px rgba(51, 255, 102, 0.85); }
}
.cred-pulse {
  animation: cred-pulse 2s ease-in-out infinite;
}

/* ---- Amber "chase" pulse — the TO LEAD line on Showdown Current Shift
   cards glows when an area is within 2 points of taking the daily lead.
   Amber stays amber across all themes (trophy/leader accents are sacred). */
@keyframes lead-chase-pulse {
  0%, 100% { text-shadow: 0 0 2px rgba(251, 191, 36, 0.25); }
  50%      { text-shadow: 0 0 12px rgba(251, 191, 36, 0.9); }
}
.lead-chase {
  color: #fbbf24;
  animation: lead-chase-pulse 1.4s ease-in-out infinite;
}

/* ---- 2-point trophy bling on the PIREP log (Larry, 2026-08-21) ----
   A report that answered a sector's open solicitation earns 2 points —
   the chip glows warm gold so the high-value catches stand out from the
   1-point chips. Breathing halo + glowing trophy icon + slight shimmer
   on the number. Reduced motion = steady glow, no pulse. */
@keyframes pirep-pts2-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.35), 0 0 14px rgba(251, 191, 36, 0.22), inset 0 0 4px rgba(251, 191, 36, 0.10);
  }
  50% {
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.75), 0 0 26px rgba(251, 191, 36, 0.45), inset 0 0 8px rgba(251, 191, 36, 0.25);
  }
}
.pirep-pts2 {
  animation: pirep-pts2-pulse 2.2s ease-in-out infinite;
  border-color: rgba(251, 191, 36, 0.55) !important;
}
.pirep-pts2 i {
  color: #ffd54d;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.95), 0 0 14px rgba(251, 191, 36, 0.55);
}
.pirep-pts2 .pts-num {
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8), 0 0 16px rgba(251, 191, 36, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .pirep-pts2 {
    animation: none;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5), 0 0 22px rgba(251, 191, 36, 0.28), inset 0 0 6px rgba(251, 191, 36, 0.18);
  }
}

/* ---- Area winner badge halo (Larry, 2026-08-21) ----
   The trophy-case winner badges (Month History + standings) breathe with a
   bright halo in the winning Area's OWN color — each Area has its own glow
   RGB below so the champion badge pops off the dim runner-up pills. Runs on
   the same 30s refresh the Showdown body uses. Reduced motion = steady glow. */
@keyframes area-winner-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(var(--area-winner-rgb), 0.55), 0 0 20px rgba(var(--area-winner-rgb), 0.3), inset 0 0 5px rgba(var(--area-winner-rgb), 0.12);
  }
  50% {
    box-shadow: 0 0 14px rgba(var(--area-winner-rgb), 0.95), 0 0 34px rgba(var(--area-winner-rgb), 0.55), inset 0 0 8px rgba(var(--area-winner-rgb), 0.22);
  }
}
.area-winner-badge {
  animation: area-winner-pulse 2.4s ease-in-out infinite;
}
.area-winner-a1 { --area-winner-rgb: 64, 181, 208; }     /* bright cyan    #40b5d0 */
.area-winner-a2 { --area-winner-rgb: 236, 162, 38; }     /* golden amber   #eca226 */
.area-winner-a3 { --area-winner-rgb: 168, 87, 244; }     /* lavender       #a857f4 */
.area-winner-a4 { --area-winner-rgb: 229, 78, 73; }      /* soft coral     #e54e49 */
.area-winner-a5 { --area-winner-rgb: 136, 203, 39; }     /* electric lime  #88cb27 */
.area-winner-a6 { --area-winner-rgb: 113, 131, 155; }    /* darker slate blue #71839b */
@media (prefers-reduced-motion: reduce) {
  .area-winner-badge {
    animation: none;
    box-shadow: 0 0 12px rgba(var(--area-winner-rgb), 0.6), 0 0 26px rgba(var(--area-winner-rgb), 0.35), inset 0 0 6px rgba(var(--area-winner-rgb), 0.15);
  }
}

/* ---- PIREP Log UUA marker — brighter red with a restrained slow pulse */
@keyframes pirep-log-uua-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.55), 0 0 11px rgba(185, 28, 28, 0.28);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 9px rgba(248, 50, 50, 0.82), 0 0 18px rgba(185, 28, 28, 0.52);
    filter: brightness(1.16);
  }
}
@keyframes pirep-log-uua-icon-pulse {
  0%, 100% {
    color: #ef3030;
    text-shadow: 0 0 3px rgba(239, 48, 48, 0.7), 0 0 7px rgba(185, 28, 28, 0.45);
  }
  50% {
    color: #fff7f7;
    text-shadow: 0 0 3px #ffffff, 0 0 8px #ff3b3b, 0 0 14px rgba(255, 30, 30, 0.9);
  }
}
.uua-pulse {
  animation: pirep-log-uua-pulse 3.2s ease-in-out infinite;
}
.uua-pulse i {
  color: #ef3030;
  animation: pirep-log-uua-icon-pulse 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .uua-pulse {
    animation: none;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.55), 0 0 15px rgba(239, 68, 68, 0.28);
  }
}

/* ---- LIVE pill in Month History — outline + electrical current shimmer
   (Larry, 2026-08-21): the live month's badge is a hollow outline pill with
   a bright current that sweeps along its face like electricity, plus a
   subtle glow breathing. The bolt icon flickers with it. Reduced motion =
   static outline glow, no sweep. */
@keyframes live-pill-sweep {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
@keyframes live-pill-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(251, 191, 36, 0.30), inset 0 0 4px rgba(251, 191, 36, 0.08); }
  50%      { box-shadow: 0 0 12px rgba(251, 191, 36, 0.70), inset 0 0 8px rgba(251, 191, 36, 0.18); }
}
.live-pill {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: transparent;
  color: #fcd34d;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.55);
  animation: live-pill-glow 1.8s ease-in-out infinite;
}
.live-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(255, 209, 92, 0.45) 42%,
    rgba(255, 230, 150, 0.85) 50%,
    rgba(255, 209, 92, 0.45) 58%,
    transparent 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: live-pill-sweep 1.6s linear infinite;
  pointer-events: none;
}
.live-pill i {
  position: relative;
  animation: live-pill-flicker 1.6s linear infinite;
  text-shadow: 0 0 10px rgba(255, 209, 92, 0.9), 0 0 20px rgba(251, 191, 36, 0.5);
}
@keyframes live-pill-flicker {
  0%, 7%, 14%, 100% { opacity: 1; }
  10%, 12%          { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .live-pill::after,
  .live-pill i {
    animation: none;
  }
  .live-pill {
    animation: none;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.45), inset 0 0 5px rgba(251, 191, 36, 0.10);
  }
}

/* ---- Bottom-left LIVE/WISP status pill (Larry, 2026-08-21) ----
   The ONE live indicator, bottom-left on every screen — replaces the old
   static W.I.S.P. label on the radar scope. Resting = dim outline "WISP"
   (brand, quiet). When the page is refreshing correctly it flips to LIVE
   with the same electrical shimmer as the old pills. Driven by the
   live_status Stimulus controller (listens for zme:page-refreshed from the
   auto-refresh controller + turbo stream renders); a page that stalls dims
   back to WISP. Reduced motion = steady glow, no sweep. */
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--zme-phosphor)/0.30);
  color: rgb(var(--zme-phosphor)/0.55);
  letter-spacing: 0.3em;
  font-size: 11px;
  text-shadow: 0 0 8px rgb(var(--zme-phosphor)/0.4);
  transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}
.live-status__bolt {
  display: none;
  font-size: 9px;
}
.live-status.live-status--live {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fcd34d;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.55);
  animation: live-pill-glow 1.8s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.live-status.live-status--live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(255, 209, 92, 0.45) 42%, rgba(255, 230, 150, 0.85) 50%,
    rgba(255, 209, 92, 0.45) 58%, transparent 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: live-pill-sweep 1.6s linear infinite;
  pointer-events: none;
}
.live-status.live-status--live .live-status__bolt {
  display: inline-block;
  animation: live-pill-flicker 1.6s linear infinite;
  text-shadow: 0 0 10px rgba(255, 209, 92, 0.9), 0 0 20px rgba(251, 191, 36, 0.5);
}
.live-status.live-status--live .live-status__text {
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  .live-status.live-status--live {
    animation: none;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.45), inset 0 0 5px rgba(251, 191, 36, 0.10);
  }
  .live-status.live-status--live::after,
  .live-status.live-status--live .live-status__bolt {
    animation: none;
  }
}

/* ---- RIVALS pill crack/explode (Larry, 2026-08-21) ----
   The SHOWDOWN header's RIVALS badge periodically lets off an energy burst:
   jagged lightning cracks shoot outward from the pill while it jolts with a
   bright flash, then everything settles. Pure decoration, no sound. The
   rivals_crack Stimulus controller spawns the SVG cracks on a 3.5–7.5s
   rhythm. Reduced motion = static pill, no cracks. */
.rivals-crack {
  position: relative;
}
.rivals-crack__svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}
.rivals-crack__mark {
  fill: none;
  stroke: rgb(var(--zme-glow));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgb(var(--zme-glow)/0.9)) drop-shadow(0 0 14px rgb(var(--zme-glow)/0.45));
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: rivals-crack-draw 0.75s ease-out forwards;
}
@keyframes rivals-crack-draw {
  0%   { stroke-dashoffset: 140; opacity: 0; }
  12%  { opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Expanding shockwave ring — one per burst, radiates from the pill's center
   and fades as it grows (Larry, 2026-08-21). */
.rivals-crack__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid rgb(var(--zme-glow)/0.85);
  box-shadow: 0 0 18px rgb(var(--zme-glow)/0.5), inset 0 0 12px rgb(var(--zme-glow)/0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  animation: rivals-crack-ring 0.95s ease-out forwards;
}
@keyframes rivals-crack-ring {
  0%   { transform: scale(0.25); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.rivals-crack--jolt {
  animation: rivals-crack-jolt 0.85s ease-out;
}
@keyframes rivals-crack-jolt {
  0%   { transform: scale(1); filter: brightness(1); }
  12%  { transform: scale(1.18); filter: brightness(1.9) drop-shadow(0 0 14px rgb(var(--zme-glow)/0.95)); }
  35%  { transform: scale(0.97) rotate(-1deg); filter: brightness(1.35); }
  55%  { transform: scale(1.04) rotate(0.5deg); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rivals-crack__svg,
  .rivals-crack__ring,
  .rivals-crack--jolt {
    display: none;
  }
}

/* ---- One-time green flash when a sector flips NEEDED → CREDITED ----
   Fires on the whole board row the moment the sector earns credit, so the
   controller catches it at a glance. Pure visual — no sound. */
@keyframes row-just-credited {
  0%   { background-color: rgba(51, 255, 102, 0.45); box-shadow: inset 0 0 0 2px rgba(51, 255, 102, 0.9); }
  60%  { background-color: rgba(51, 255, 102, 0.14); box-shadow: inset 0 0 0 2px rgba(51, 255, 102, 0.35); }
  100% { background-color: transparent; box-shadow: none; }
}
.row-just-credited {
  animation: row-just-credited 2.4s ease-out;
}

/* ---- Per-requirement aging — PIREP Board only (Larry, 2026-08-28)
   Glow removed — the hover tooltip ("Last qualifying PIREP HHMM · Xhr YYmin ago")
   is the only aging indicator left. No violet edge-light / halo. */


/* ---- Combined-sector "patch cable" wire (board + dashboard) ----
   A thin glowing rail down the left edge links every sector in a combine
   group; each joined row gets a short stub and a phosphor dot. Drawn by the
   combine-wire Stimulus controller — positions are measured from the rows. */
.combine-wire-rail,
.combine-wire-stub {
  position: absolute;
  background: rgba(51, 255, 102, 0.55);
  box-shadow: 0 0 6px rgba(51, 255, 102, 0.45);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}
.combine-wire-rail { width: 2px; }
.combine-wire-stub { height: 2px; }
.combine-wire-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #33ff66;
  box-shadow: 0 0 8px rgba(51, 255, 102, 0.9);
  pointer-events: none;
  z-index: 1;
}

/* ---- Breathing glow on card borders — the radar's "live" feel ----
   EVERY card in the app breathes with this subtle theme-aware glow, so the
   radar sweep looks like it's lighting up the whole UI like a CRT screen
   (Larry, 2026-08-21: "every card in the app to glow... like a CRT screen").
   Uses the theme's glow token so it adapts to every theme. The :where()
   selector has zero specificity, so explicit variants (card-glow-red alert,
   card-glow-needed) always win over the default. */
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 22px rgb(var(--zme-glow)/0.14), 0 0 0 1px rgb(var(--zme-glow)/0.10); }
  50%      { box-shadow: 0 0 52px rgb(var(--zme-glow)/0.42), 0 0 0 1px rgb(var(--zme-glow)/0.20); }
}
:where(.card) {
  animation: card-glow 8s ease-in-out infinite;
}
.card-glow,
.ticker-bar {
  animation: card-glow 8s ease-in-out infinite;
}

/* Sectors Requiring Action card — pulses ~25% brighter so the exception view
   stands out on the dashboard (Larry, 2026-08-21). */
@keyframes card-glow-needed {
  0%, 100% { box-shadow: 0 0 22px rgb(var(--zme-glow)/0.18), 0 0 0 1px rgb(var(--zme-glow)/0.13); }
  50%      { box-shadow: 0 0 52px rgb(var(--zme-glow)/0.52), 0 0 0 1px rgb(var(--zme-glow)/0.25); }
}
.card-glow-needed {
  animation: card-glow-needed 8s ease-in-out infinite;
}

/* Red variant for the alert card — breathes red, not green */
@keyframes card-glow-red {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 92, 98, 0.08), 0 0 0 1px rgba(255, 92, 98, 0.06); }
  50%      { box-shadow: 0 0 46px rgba(255, 92, 98, 0.32), 0 0 0 1px rgba(255, 92, 98, 0.16); }
}
.card-glow-red {
  animation: card-glow-red 8s ease-in-out infinite;
}

/* ---- Trophy Case badges (Larry, 2026-08-20) ----
   Compact neon chips, one per achievement type, colored by rarity tier.
   Rarity is shown ONLY through the treatment — no COMMON/EPIC labels.
   Standard (double lead, photo finish, win streak, shift champion):
     plain phosphor outline.
   Notable (breakaway, surge, dead heat, three-way fight): cyan edge.
   Rare (comeback, last-minute takeover, triple crown): violet glow.
   Elite (hat trick): amber glow + pulse.
   Top-tier (dynasty): white-hot platinum — above gold, steady pulse.
   Locked silhouettes: dim grey, no glow, tiny lock — something to chase. */
.trophy-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid;
  font-family: var(--zme-mono, "Share Tech Mono", monospace);
  font-size: 1rem;
  line-height: 1;
  cursor: help;
  user-select: none;
}
/* Bigger badge icons — the main icon is the first child in both earned and
   locked badges (the locked one's tiny lock icon is a later sibling, so it
   stays small). Larry, 2026-08-18: easier to see at a glance. */
.trophy-badge > i:first-child {
  font-size: 1.5rem;
}
/* Custom inline-SVG achievement icons — inherit the badge's currentColor so
   rarity tints apply exactly like FA icons. Sized to match the FA glyphs. */
.trophy-custom-icon {
  width: 1.35em;
  height: 1.35em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.18em;
}
.trophy-custom-hat { width: 1.70em; height: 1.70em; }
.trophy-custom-diamond { width: 1.38em; height: 1.38em; }
/* Diamond home-plate burst: gold accent at home plate. Brighter when earned
   (top-tier white-hot keeps gold readable via drop-shadow); dimmed when locked
   so the badge stays visually consistent with other locked silhouettes. */
.trophy-custom-diamond .diamond-home-burst { filter: drop-shadow(0 0 5px rgba(251,191,36,0.9)); }
.trophy-locked .trophy-custom-diamond .diamond-home-burst { filter: none; opacity: 0.42; }
.trophy-top .trophy-custom-diamond .diamond-home-burst { filter: drop-shadow(0 0 7px rgba(251,191,36,1)) drop-shadow(0 0 3px rgba(253,230,138,0.9)); }
@media (prefers-reduced-motion: reduce) {
  .trophy-custom-diamond .diamond-home-burst { filter: none; }
}
/* NOTE: no transform/filter on badges or their hover states — a transform or
   filter on an ancestor changes the containing block for the fixed-position
   weather popover, so the popover would fly off-screen. Glow effects use
   box-shadow only. */
.trophy-count {
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.9;
}

.trophy-standard {
  border-color: rgba(52, 211, 153, 0.35);
  color: rgba(110, 231, 183, 0.85);
  background: rgba(52, 211, 153, 0.05);
}
.trophy-notable {
  border-color: rgba(34, 211, 238, 0.45);
  color: rgba(103, 232, 249, 0.9);
  background: rgba(34, 211, 238, 0.06);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.08);
}
.trophy-rare {
  border-color: rgba(167, 139, 250, 0.55);
  color: rgba(196, 181, 253, 0.95);
  background: rgba(167, 139, 250, 0.07);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.18);
}
.trophy-elite {
  border-color: rgba(251, 191, 36, 0.6);
  color: rgba(252, 211, 77, 0.95);
  background: rgba(251, 191, 36, 0.07);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.25);
  animation: trophy-elite-pulse 3s ease-in-out infinite;
}
/* Top-tier (dynasty): WHITE-HOT platinum — deliberately distinct from the
   amber elite tier so the rarest achievements (5+ wins in a row) read as
   "above gold" at a glance, like overdriven phosphor (Larry, 2026-08-18:
   the top two rungs were both gold and blurred together). */
.trophy-top {
  border-color: rgba(255, 255, 255, 0.75);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.15);
  animation: trophy-top-pulse 2.4s ease-in-out infinite;
}
@keyframes trophy-elite-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.18), inset 0 0 5px rgba(251, 191, 36, 0.08); }
  50%      { box-shadow: 0 0 26px rgba(251, 191, 36, 0.55), inset 0 0 9px rgba(251, 191, 36, 0.2); }
}
@keyframes trophy-top-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 255, 255, 0.25), inset 0 0 5px rgba(255, 255, 255, 0.08); }
  50%      { box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.2); }
}
.trophy-locked {
  border-color: rgba(148, 163, 184, 0.18);
  color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.03);
}

/* ---- Trophy badge SIZE escalation (Larry, 2026-08-18) ----
   Higher rarity = physically bigger, so the ladder reads at a glance even on
   the 1920x1080 big screen — not just a color difference, but a SIZE one.
   Locked badges stay small and dim so earned badges dominate. */
.trophy-standard { font-size: 0.82rem; }
.trophy-standard > i:first-child { font-size: 1.15rem; }
.trophy-notable { font-size: 0.88rem; }
.trophy-notable > i:first-child { font-size: 1.3rem; }
.trophy-rare { font-size: 0.95rem; }
.trophy-rare > i:first-child { font-size: 1.5rem; }
.trophy-elite { font-size: 1.05rem; }
.trophy-elite > i:first-child { font-size: 1.7rem; }
.trophy-top { font-size: 1.15rem; }
.trophy-top > i:first-child { font-size: 1.9rem; }
.trophy-locked { font-size: 0.78rem; }
.trophy-locked > i:first-child { font-size: 1.05rem; }

/* ---- TV-monitor ZME logo (navbar) ---- */
.tv-monitor {
  display: inline-block;
  width: 60px;
  height: 42px;
  border-radius: 7px;
  background: #141414;
  border: 2px solid rgba(51, 255, 102, 0.5);
  box-shadow: 0 0 12px rgba(51, 255, 102, 0.25), inset 0 0 6px rgba(51, 255, 102, 0.12);
  position: relative;
  padding: 3px;
  flex-shrink: 0;
}

/* ---- Hamburger menu (navbar dropdown) — scroll internally instead of
   spilling past the bottom of the window when the screen is short.
   Plain CSS so it always ships (Tailwind's arbitrary class never compiled,
   Larry, 2026-08-21: "i can't get to the bottom of the hamburger menu"). ----
   DaisyUI's .menu uses flex-wrap:wrap, which would pack items into columns
   instead of scrolling — force nowrap + a viewport-height cap + vertical
   scroll. */
.navbar .dropdown-content.menu,
.navbar .dropdown-content,
.navbar [data-dropdown-toggle-target="panel"] {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overflow-x: hidden;
  flex-wrap: nowrap;
}
.navbar .dropdown-content .menu,
.navbar [data-dropdown-toggle-target="panel"] .menu {
  max-height: none;
  overflow: visible;
  flex-wrap: nowrap;
}
/* Hamburger single column — prevent DaisyUI .menu wrapping into 2 columns */
.navbar [data-dropdown-toggle-target="panel"] .menu,
.navbar [data-dropdown-toggle-target="panel"] ul.menu {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.tv-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #030a10;
  border-radius: 4px;
  color: #33ff66;
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0 6px rgba(51, 255, 102, 0.8);
}
/* Bigger TV variant (login page) */
.tv-monitor-lg {
  width: 88px;
  height: 62px;
}
.tv-monitor-lg .tv-screen {
  font-size: 2.3rem;
  letter-spacing: 0.04em;
}
.tv-scanlines {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0px, rgba(0, 0, 0, 0.4) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
  animation: tv-flicker 0.12s infinite;
}
@keyframes tv-flicker {
  0%   { opacity: 0.45; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.45; }
}

/* ---- Faint glowing frame around the viewport ---- */
.radar-frame-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border: 1px solid rgba(51, 255, 102, 0.07);
  box-shadow: inset 0 0 18px rgba(51, 255, 102, 0.04), inset 0 0 2px rgba(51, 255, 102, 0.10);
}

/* ---- Weather mosaic layer (ERAM-style pixelated precipitation cells) ---- */
.weather-mosaic {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.wc {
  position: absolute;
  width: 14px;
  height: 14px;
}
/* Light returns — small ragged cell */
.wc-a {
  background: rgba(51, 255, 102, 0.06);
  box-shadow:
    14px 0 0 rgba(51, 255, 102, 0.06),
    0 14px 0 rgba(51, 255, 102, 0.06),
    14px 14px 0 rgba(51, 255, 102, 0.07),
    28px 14px 0 rgba(51, 255, 102, 0.06),
    14px 28px 0 rgba(51, 255, 102, 0.07),
    28px 28px 0 rgba(51, 255, 102, 0.06);
}
/* Moderate returns — bigger cell with a brighter core */
.wc-b {
  background: rgba(51, 255, 102, 0.09);
  box-shadow:
    14px 0 0 rgba(51, 255, 102, 0.09),
    28px 0 0 rgba(51, 255, 102, 0.09),
    0 14px 0 rgba(51, 255, 102, 0.09),
    14px 14px 0 rgba(51, 255, 102, 0.12),
    28px 14px 0 rgba(51, 255, 102, 0.09),
    42px 14px 0 rgba(51, 255, 102, 0.09),
    0 28px 0 rgba(51, 255, 102, 0.09),
    14px 28px 0 rgba(51, 255, 102, 0.12),
    28px 28px 0 rgba(51, 255, 102, 0.09),
    14px 42px 0 rgba(51, 255, 102, 0.09),
    28px 42px 0 rgba(51, 255, 102, 0.09);
}
/* Heavy returns — dense cell, yellow-green core, still green-family */
.wc-c {
  background: rgba(51, 255, 102, 0.13);
  box-shadow:
    14px 0 0 rgba(51, 255, 102, 0.13),
    28px 0 0 rgba(51, 255, 102, 0.13),
    0 14px 0 rgba(51, 255, 102, 0.13),
    14px 14px 0 rgba(190, 242, 100, 0.11),
    28px 14px 0 rgba(51, 255, 102, 0.13),
    42px 14px 0 rgba(51, 255, 102, 0.13),
    0 28px 0 rgba(51, 255, 102, 0.13),
    14px 28px 0 rgba(51, 255, 102, 0.15),
    28px 28px 0 rgba(190, 242, 100, 0.13),
    42px 28px 0 rgba(51, 255, 102, 0.13),
    14px 42px 0 rgba(51, 255, 102, 0.13),
    28px 42px 0 rgba(51, 255, 102, 0.13),
    42px 42px 0 rgba(51, 255, 102, 0.13);
}
@keyframes mosaic-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1%, 0.5%); }
  100% { transform: translate(1%, -0.5%); }
}

/* ---- Sector table row hover glow ---- */
.hover-glow:hover td {
  background: rgba(51, 255, 102, 0.07);
  transition: background 0.15s ease;
}
.hover-glow:hover td:first-child {
  box-shadow: inset 3px 0 0 rgba(51, 255, 102, 0.55);
}

/* ---- Dashboard-specific softer radar layers ---- */
.radar-bg-scanlines--soft {
  opacity: 0.3;
}
.radar-vignette--soft {
  opacity: 0.6;
}
.radar-bg--soft .sweep {
  opacity: 0.55;
}
.radar-bg--soft .afterglow {
  opacity: 0.5;
}

/* ---- Vintage computer fonts (Pip-Boy / CRT terminal) ----
   !important keeps Tailwind utility classes from overriding the faces. */
body, .font-mono, code, kbd, pre, samp, .badge, .btn, input, select, textarea {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
/* Big display text gets the chunky Pip-Boy terminal face */
h1 {
  font-family: 'VT323', 'Share Tech Mono', ui-monospace, monospace !important;
  letter-spacing: 0.02em;
}
/* Stat values (shift summary PIREP totals, etc.) — match the rest of WISP's
   Share Tech Mono instead of the blocky VT323 face (Larry, 2026-08-21). */
.stat-value {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: 0.02em;
}
h1 {
  text-shadow: 0 0 12px rgba(51, 255, 102, 0.3);
}
/* Pills/badges: keep text neatly inside the rounded shape */
.badge {
  white-space: nowrap;
  line-height: 1.5;
  height: auto;
  min-height: 1.5rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

/* SIGMET tags — metallic silver (Larry: red read too "needed" on the board) */
.badge-sigmet {
  background: rgba(203, 213, 225, 0.12);
  border-color: rgba(203, 213, 225, 0.5);
  color: #e2e8f0;
  box-shadow: 0 0 10px rgba(203, 213, 225, 0.12);
}

/* CWA tags — amber outline (unfilled, same style family as SIGMET) */
.badge-cwa {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.1);
}

/* G-AIRMET tags — cyan outline */
.badge-airmet {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.5);
  color: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.1);
}

/* Airport IFR (METAR/TAF) tags — blue-violet outline, matches the map's IFR color */
.badge-airport {
  background: rgba(192, 132, 252, 0.1);
  border-color: rgba(192, 132, 252, 0.5);
  color: #c084fc;
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.1);
}

/* Wall display: hide the mouse cursor when idle (30s, cursor-hide controller) */
body.cursor-hidden, body.cursor-hidden * {
  cursor: none !important;
}

/* ---- Record drawer: force the radar theme on the vendor slide-over ---- */
.llama-drawer-panel {
  background: #071410 !important;
  color: #aaffc4;
  border-left: 1px solid rgba(52, 211, 153, 0.3);
  box-shadow: 0 0 40px rgba(52, 211, 153, 0.15);
}
.llama-drawer-panel .bg-white,
.llama-drawer-panel .sticky.bg-white {
  background: #071410 !important;
  border-color: rgba(52, 211, 153, 0.15) !important;
}
.llama-drawer-panel .text-gray-900 { color: #aaffc4 !important; }
.llama-drawer-panel .text-gray-500,
.llama-drawer-panel .text-gray-600,
.llama-drawer-panel .text-gray-700 { color: rgba(125, 255, 168, 0.65) !important; }
.llama-drawer-panel .hover\:text-gray-800:hover { color: #33ff66 !important; }
.llama-drawer-panel .hover\:bg-gray-100:hover,
.llama-drawer-panel .hover\:bg-red-50:hover { background: rgba(52, 211, 153, 0.1) !important; }
.llama-drawer-panel .border-gray-100,
.llama-drawer-panel .border-gray-200,
.llama-drawer-panel .border-gray-300 { border-color: rgba(52, 211, 153, 0.2) !important; }
.llama-drawer-panel .bg-blue-600,
.llama-drawer-panel .hover\:bg-blue-500:hover {
  background: #33ff66 !important;
  color: #04100a !important;
}
.llama-drawer-panel .border-red-200 {
  border-color: rgba(248, 113, 113, 0.4) !important;
}
.llama-drawer-panel .text-red-600,
.llama-drawer-panel .hover\:text-red-800:hover { color: #f87171 !important; }
.llama-drawer-panel h2 {
  font-family: 'VT323', 'Share Tech Mono', monospace !important;
  color: #7dffa8 !important;
  letter-spacing: 0.03em;
}
.llama-drawer-panel svg { color: #7dffa8; }

/* ---- Tab strips (area / stratum selectors) ----
   Daisy pins .tab to a fixed 2rem height with line-height 2, which shoves
   larger labels low in the box. Let the tab's padding size it and center
   the label properly. */
.tabs-boxed .tab {
  height: auto;
  line-height: 1.2;
}

/* ---- Big-screen (kiosk) mode — facility TV / projector ----
   Scoped to .kiosk so the normal pages are untouched. Sized for a 1920x1080
   widescreen TV viewed from 20+ feet: BIG fonts, generous cell padding, and
   each area only has 6–7 sectors so there's plenty of room to fill the
   screen without scrolling (Larry, 2026-08-18: "fill the space... we need
   to see this stuff from more than 20 feet away"). */
.kiosk .sector-status-table thead th { font-size: 1.5rem !important; letter-spacing: 0.1em; padding: 0.5rem 0.7rem; }
/* Rows sized so EVERY area fits on a 1080p screen — AREA 4 has 7 sectors,
   and the last row (S43) was spilling below the fold (Larry, 2026-08-18).
   Big enough to read from 20 feet, compact enough to always fit. */
.kiosk tbody td { padding: 0.55rem 0.8rem; }
/* The big first column is ONLY for the sector board's sector-number column.
   Scoped to .sector-status-table so the Month History table (and any future
   table) keeps its own sizing. */
.kiosk .sector-status-table tbody td:first-child { font-size: 2.8rem; }
.kiosk .sector-status-table tbody td:first-child span.block { font-size: 1.1rem; }
/* Stratum separator rows — roomy and legible from across the room. */
.kiosk .stratum-row td { font-size: 1.1rem; padding: 0.45rem 0.7rem; }
.kiosk .stratum-row div { font-size: 1.1rem; }
.kiosk .stratum-row .fa-layer-group { font-size: 1rem; }
/* Month History (trophy case) first column = the month label; match the
   area pills in the same card (.kiosk .badge sizing below). */
.kiosk .month-history td:first-child { font-size: 1rem; }
.kiosk td.text-center { font-size: 1.4rem; }
.kiosk .stat-value { font-size: 2.4rem; }
.kiosk .stat-title { font-size: 0.9rem; letter-spacing: 0.18em; }
.kiosk .stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.kiosk .card-title { font-size: 1.6rem; }
.kiosk .badge-lg { font-size: 1.3rem; padding: 0.45rem 1rem; }
.kiosk .badge { font-size: 1.1rem; padding: 0.4rem 0.85rem; }
/* Overall NEEDED / CREDITED pills — normal PIREP Board bump = 50% of Big Screen size (Larry 2026-08-31) */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(2) .badge-error,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(2) .badge-success { font-size: 0.95rem !important; padding: 0.32rem 0.7rem !important; line-height: 1.2 !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(2) .badge-error i,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(2) .badge-success i { font-size: 0.78rem !important; }
/* Overall NEEDED / CREDITED pills — matched to hazard size (Big Screen only, Larry 2026-08-31) */
.kiosk .sector-status-table td:nth-child(2) .badge-error,
.kiosk .sector-status-table td:nth-child(2) .badge-success { font-size: 1.09rem !important; padding: 0.38rem 0.8rem !important; line-height: 1.2 !important; }
.big-screen-mode .sector-status-table td:nth-child(2) .badge-error,
.big-screen-mode .sector-status-table td:nth-child(2) .badge-success { font-size: 1.16rem !important; padding: 0.40rem 0.82rem !important; line-height: 1.2 !important; }
.kiosk .sector-status-table td:nth-child(2) .badge-error i,
.kiosk .sector-status-table td:nth-child(2) .badge-success i,
.big-screen-mode .sector-status-table td:nth-child(2) .badge-error i,
.big-screen-mode .sector-status-table td:nth-child(2) .badge-success i { font-size: 0.85rem !important; }
/* Hazard pills (CONV/TURB/ICING/AIRPORTS/LLWS) — 75% of Overall on Big Screen (Larry 2026-08-31) */
.kiosk .sector-status-table td:nth-child(3) .badge,
.kiosk .sector-status-table td:nth-child(4) .badge,
.kiosk .sector-status-table td:nth-child(5) .badge,
.kiosk .sector-status-table td:nth-child(6) .badge,
.kiosk .sector-status-table td:nth-child(7) .badge { font-size: 1.09rem !important; padding: 0.38rem 0.8rem !important; line-height: 1.2 !important; }
.big-screen-mode .sector-status-table td:nth-child(3) .badge,
.big-screen-mode .sector-status-table td:nth-child(4) .badge,
.big-screen-mode .sector-status-table td:nth-child(5) .badge,
.big-screen-mode .sector-status-table td:nth-child(6) .badge,
.big-screen-mode .sector-status-table td:nth-child(7) .badge { font-size: 1.16rem !important; padding: 0.40rem 0.82rem !important; line-height: 1.2 !important; }
.kiosk .sector-status-table td:nth-child(3) .badge i,
.kiosk .sector-status-table td:nth-child(4) .badge i,
.kiosk .sector-status-table td:nth-child(5) .badge i,
.kiosk .sector-status-table td:nth-child(6) .badge i,
.kiosk .sector-status-table td:nth-child(7) .badge i,
.big-screen-mode .sector-status-table td:nth-child(3) .badge i,
.big-screen-mode .sector-status-table td:nth-child(4) .badge i,
.big-screen-mode .sector-status-table td:nth-child(5) .badge i,
.big-screen-mode .sector-status-table td:nth-child(6) .badge i,
.big-screen-mode .sector-status-table td:nth-child(7) .badge i { font-size: 0.85rem !important; }
/* Driven By product tags — compact on Big Screen (Larry 2026-08-21).
   Compact stays for SIGMET/CWA/AIRMET, but AIRPORT tags match the hazard
   pill size (75% of Overall) so the board reads evenly — Larry 2026-08-31. */
.kiosk .sector-status-table td .badge-sm,
.big-screen-mode .sector-status-table td .badge-sm {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  gap: 0.25rem;
}
.kiosk .sector-status-table td .badge-sm i,
.big-screen-mode .sector-status-table td .badge-sm i {
  font-size: 0.5rem;
}
.kiosk .sector-status-table td:nth-child(8) .badge-airport,
.big-screen-mode .sector-status-table td:nth-child(8) .badge-airport {
  font-size: 1.09rem !important;
  padding: 0.38rem 0.8rem !important;
  line-height: 1.2 !important;
}
.kiosk .sector-status-table td:nth-child(8) .badge-airport i,
.big-screen-mode .sector-status-table td:nth-child(8) .badge-airport i {
  font-size: 0.85rem !important;
}
.kiosk .max-w-\[300px\] { max-width: 560px; }
/* Area tabs — bigger hit targets and labels for a TV. */
.kiosk .tabs .tab { font-size: 1.25rem; padding: 0.55rem 1.1rem; }
/* Tag colors legend — keep the pills small on the big screen too; the
   generic .kiosk .badge rule below would inflate them for TV. The legend is
   a reference, not a control (Larry, 2026-08-22). */
.kiosk .tag-legend .badge {
  font-size: 0.7rem;
  padding: 0.12rem 0.45rem;
  gap: 0.25rem;
}
.kiosk .tag-legend .badge i {
  font-size: 0.5rem;
}
.kiosk .tag-legend {
  font-size: 0.7rem;
  gap-x: 1rem;
}
/* Kiosk area tabs — kill DaisyUI's default blue "active" state (the night
   theme's primary color) and use the ZME theme glow instead, so the selected
   Area reads phosphor green/amber in every theme (Larry, 2026-08-21: "when
   selecting an area in the pirep board, it hovers blue — change it to match
   the theme"). DaisyUI's .tabs-boxed .tab-active beats the element's own
   emerald classes, so these overrides carry !important. */
.kiosk .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
.kiosk .tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover {
  background-color: rgb(var(--zme-glow)/0.22) !important;
  color: rgb(var(--zme-phosphor)) !important;
  box-shadow: 0 0 14px rgb(var(--zme-glow)/0.18), inset 0 0 6px rgb(var(--zme-glow)/0.10);
}
.kiosk .tabs-boxed .tab:not(.tab-active):hover {
  background-color: rgb(var(--zme-glow)/0.08) !important;
  color: rgb(var(--zme-phosphor)) !important;
}
/* Airport IFR Detail panel — the right-hand column needs to be as big as
   the table so the screen reads evenly (Larry, 2026-08-18). */
.kiosk #airport_ifr_detail div.font-bold { font-size: 1.4rem; }
.kiosk #airport_ifr_detail li { font-size: 1.2rem; }
.kiosk #airport_ifr_detail p { font-size: 1rem; }
.kiosk #airport_ifr_detail .badge { font-size: 1.05rem; padding: 0.3rem 0.65rem; }
/* Big Screen Sector Status + Airport Ceiling/Visibility — slight bump on the
   TV ONLY (Larry). Map + Showdown untouched — scoped to the board canvas + airport card. */
.kiosk .big-screen-canvas .sector-status-table .badge {
  font-size: 1.02rem !important;
  line-height: 1.05 !important;
  padding: 0.38rem 0.80rem !important;
}
/* Big Screen ONLY — nudge Overall + hazard pills down to meet Driven By (Larry).
   Regular board untouched — class only exists in the kiosk branch. */
.kiosk .kiosk-nudge { transform: translateY(4px); }
.kiosk #airport_ifr_detail .airport-code-pill {
  font-size: 1.31rem !important;
  line-height: 1.05 !important;
  padding: 0.38rem 1.03rem !important;
  min-height: 0;
  box-shadow: 0 0 12px rgb(var(--zme-glow)/0.25), inset 0 0 8px rgb(var(--zme-glow)/0.08);
}
.kiosk #airport_ifr_detail .badge {
  font-size: 1.21rem !important;
  line-height: 1.05 !important;
  padding: 0.34rem 0.75rem !important;
  min-height: 0;
}

/* Big-screen board panel — fills its flex slot, never scrolls, never
   page-transforms (the fit-to-screen scaler is gone; this fits via CSS).
   1920×1080 maximize (Larry 2026-09-06): use nearly the full viewport,
   maximize vertical real estate for 7–8 sector rows + strata. */
.big-screen-mode .big-screen-canvas:not(.hidden) {
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.big-screen-mode .big-screen-canvas.hidden { display: none !important; }
/* 1080p maximize — use nearly full 1920×1080 viewport (Larry 2026-09-06).
   Tight outer margins, compact chrome, max vertical for Sector Status card. */
.big-screen-mode {
  /* Give the Sector Status card a clear left edge so its combine cable and
     sector numbers do not crowd the TV bezel. Keep the locked 78/22 split. */
  padding-left: 1rem !important;
  padding-right: 0.40rem !important;
  padding-top: 0.20rem !important;
  padding-bottom: 0.15rem !important;
  gap: 0.25rem !important;
}
.big-screen-mode .kiosk-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.big-screen-mode .kiosk-header h1 { font-size: 1.75rem !important; line-height: 1 !important; }
.big-screen-mode [data-kiosk-rotate-target="tabs"] { margin-bottom: 0 !important; }
.big-screen-mode .kiosk-header .badge { font-size: 1.05rem !important; padding: 0.18rem 0.50rem !important; }
.big-screen-mode .kiosk-header .btn { padding: 0.18rem 0.55rem !important; font-size: 0.82rem !important; min-height: 0 !important; }
.big-screen-mode .kiosk-rotate-controls { bottom: 0.30rem !important; right: 0.30rem !important; }
/* Canvas = full flex height; grid fills it so Sector Status card is tall */
.big-screen-mode .big-screen-canvas > div.grid { align-items: stretch !important; }
.big-screen-mode .big-screen-canvas > div.grid > div:first-child {
  display: flex !important; flex-direction: column !important; min-height: 0 !important;
}
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .card {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .card,
.big-screen-mode .big-screen-canvas > div.grid > div:last-child #airport_ifr_detail {
  border-width: 2px !important;
  border-color: rgb(var(--zme-phosphor) / 0.78) !important;
  box-shadow: 0 0 5px rgb(var(--zme-glow) / 0.52), 0 0 18px rgb(var(--zme-glow) / 0.34), 0 0 34px rgb(var(--zme-glow) / 0.16), inset 0 0 14px rgb(var(--zme-glow) / 0.12) !important;
}
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .card-body {
  flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important;
}
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .sector-table-shell {
  flex: 1 1 auto !important; min-height: 0 !important;
}
/* Airport card also stretches to full height for even wall display */
.big-screen-mode .big-screen-canvas > div.grid > div:last-child { display: flex !important; flex-direction: column !important; }
.big-screen-mode .big-screen-canvas > div.grid > div:last-child #airport_ifr_detail { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }
.big-screen-mode .big-screen-canvas > div.grid > div:last-child #airport_ifr_detail .card-body { flex: 1 1 auto !important; }

/* Big Screen — restore original large readable scale (undo 2026-09-06
   shrink). Only tighten horizontal spacing so AREA IFR (9th column) fits
   with no scrollbar. No font-size / row-height / pill shrinkage. */
.big-screen-mode .sector-table-shell {
  overflow: hidden !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}
.big-screen-mode .sector-status-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
}
/* FINAL Big Screen — 78/22: Sector Status dominates, Airport is a skinny sidebar.
   One header grid, every header centered over its data. No horizontal scroll.
   1080p stretch: grid fills the full canvas height so the card is tall. */
.big-screen-mode .big-screen-canvas > div.grid {
  display: grid !important;
  grid-template-columns: minmax(0, 78fr) minmax(210px, 22fr) !important;
  gap: 0.55rem !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.big-screen-mode .big-screen-canvas > div.grid > div:first-child { min-width: 0 !important; }
.big-screen-mode .big-screen-canvas > div.grid > div:last-child { min-width: 210px !important; max-width: 100% !important; }
.big-screen-mode .sector-status-table {
  border-collapse: collapse !important;
  table-layout: fixed !important;
}
/* Header grid — 1080p: visibly larger for across-the-room reading, still one line */
.big-screen-mode .sector-status-table thead th {
  vertical-align: bottom !important;
  text-align: center !important;
  padding: 0.42rem 0.20rem 0.50rem !important;
  line-height: 1.02 !important;
  overflow-wrap: anywhere;
  font-size: 1.32rem !important;
  letter-spacing: 0.045em !important;
  font-weight: 700 !important;
}
/* All Sector Status headers: one line, centered (Larry) — AREA IFR + DRIVEN BY included */
.big-screen-mode .sector-status-table th:nth-child(1),
.big-screen-mode .sector-status-table th:nth-child(2),
.big-screen-mode .sector-status-table th:nth-child(3),
.big-screen-mode .sector-status-table th:nth-child(4),
.big-screen-mode .sector-status-table th:nth-child(5),
.big-screen-mode .sector-status-table th:nth-child(6),
.big-screen-mode .sector-status-table th:nth-child(7),
.big-screen-mode .sector-status-table th:nth-child(8),
.big-screen-mode .sector-status-table th:nth-child(9) {
  white-space: nowrap !important;
}
/* AREA IFR + DRIVEN BY: same size as every other hazard title — all headers one line (Larry) */
.big-screen-mode .sector-status-table thead th > span.inline-flex {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100%;
}
.big-screen-mode .sector-status-table tbody td {
  padding: 0.34rem 0.18rem !important;
  vertical-align: middle !important;
}
/* 1080p readability — keep 78/22 widths, just slightly larger for distance */
.big-screen-mode .sector-status-table td:nth-child(1) { font-size: 2.5rem !important; }
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .card-body { padding: 0.55rem 0.65rem !important; }
/* Full width of the Sector Status card — spread 9 columns across it */
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .card { width: 100% !important; }
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .card-body { width: 100% !important; }
.big-screen-mode .sector-table-shell { width: 100% !important; }
.big-screen-mode .sector-status-table { width: 100% !important; max-width: 100% !important; }
/* SECTOR — one line, keep large numbers */
.big-screen-mode .sector-status-table th:nth-child(1),
.big-screen-mode .sector-status-table td:nth-child(1) {
  width: 7.2% !important;
  min-width: 62px !important;
  max-width: none !important;
}
/* OVERALL — one line, keep NEEDED/CREDITED pills */
.big-screen-mode .sector-status-table th:nth-child(2),
.big-screen-mode .sector-status-table td:nth-child(2) {
  width: 14.3% !important;
  min-width: 104px !important;
  max-width: none !important;
}
/* CONV / TURB / ICING / LLWS — compact */
.big-screen-mode .sector-status-table th:nth-child(3),
.big-screen-mode .sector-status-table td:nth-child(3),
.big-screen-mode .sector-status-table th:nth-child(4),
.big-screen-mode .sector-status-table td:nth-child(4),
.big-screen-mode .sector-status-table th:nth-child(5),
.big-screen-mode .sector-status-table td:nth-child(5),
.big-screen-mode .sector-status-table th:nth-child(8),
.big-screen-mode .sector-status-table td:nth-child(8) {
  width: 9.0% !important;
  min-width: 70px !important;
  max-width: none !important;
}
.big-screen-mode .sector-status-table th:nth-child(6),
.big-screen-mode .sector-status-table td:nth-child(6) { width: 11.5% !important; min-width: 70px !important; max-width: none !important; } /* AREA IFR — two lines */
.big-screen-mode .sector-status-table th:nth-child(7),
.big-screen-mode .sector-status-table td:nth-child(7) { width: 13.5% !important; min-width: 76px !important; max-width: none !important; } /* AIRPORTS — VIS · CIG */
/* DRIVEN BY — compact, tiny pills wrap */
.big-screen-mode .sector-status-table th:nth-child(9),
.big-screen-mode .sector-status-table td:nth-child(9) {
  width: 17.5% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.big-screen-mode .sector-status-table td:nth-child(9) {
  padding-left: 0.10rem !important;
  padding-right: 0.18rem !important;
}
.big-screen-mode .sector-status-table td:nth-child(9) .flex {
  max-width: none !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 0.20rem !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* DRIVEN BY source pills — 50% larger than their original compact size */
.big-screen-mode .sector-status-table td:nth-child(9) .badge {
  font-size: 0.87rem !important;
  line-height: 1.05 !important;
  padding: 0.21rem 0.54rem !important;
  gap: 0.27rem !important;
  min-height: 0 !important;
}
.big-screen-mode .sector-status-table td:nth-child(9) .badge i { font-size: 0.65rem !important; }
/* Green credited hazard pills must remain exactly the same size as red hazard pills. */
.big-screen-mode .sector-status-table td:nth-child(n+3):nth-child(-n+8) .badge-success {
  font-size: 1.16rem !important;
  line-height: 1.2 !important;
  padding: 0.40rem 0.82rem !important;
}
.big-screen-mode .sector-status-table td:nth-child(n+3):nth-child(-n+8) .badge-success i {
  font-size: 0.85rem !important;
}
/* Operational pills stay prominent — do not shrink sector numbers / NEEDED / hazard pills */
.big-screen-mode .sector-status-table thead th i { font-size: 0.68em !important; margin-right: 0 !important; display: block; margin-bottom: 2px; }
/* Skinny Airport sidebar — 22%: same width, slightly larger 1080p text (Larry 2026-09-06) */
.big-screen-mode .big-screen-canvas > div.grid > div:first-child .card-title { font-size: 2rem !important; line-height: 1.05 !important; }
.big-screen-mode #airport_ifr_detail .card-body { padding: 0.50rem 0.55rem !important; gap: 0.32rem !important; }
.big-screen-mode #airport_ifr_detail .card-title { font-size: 1.46rem !important; line-height: 1.05 !important; letter-spacing: 0.04em !important; }
.big-screen-mode #airport_ifr_detail .card-body > p { font-size: 0.95rem !important; line-height: 1.25 !important; margin-bottom: 0.14rem !important; }
.big-screen-mode #airport_ifr_detail .rounded-xl { padding: 0.38rem 0.42rem !important; }
.big-screen-mode #airport_ifr_detail .rounded-xl > div.font-bold { font-size: 1.22rem !important; line-height: 1.1 !important; }
.big-screen-mode #airport_ifr_detail li { font-size: 1.10rem !important; line-height: 1.25 !important; }
.big-screen-mode #airport_ifr_detail .airport-code-pill { font-size: 1.32rem !important; padding: 0.28rem 0.60rem !important; }
.big-screen-mode #airport_ifr_detail .badge { font-size: 1.14rem !important; padding: 0.24rem 0.48rem !important; }
.big-screen-mode #airport_ifr_detail .nearest-badge { font-size: 0.90rem !important; }
.big-screen-mode #airport_ifr_detail .flex.flex-wrap { gap: 0.24rem !important; flex-wrap: wrap !important; }
.big-screen-mode #airport_ifr_detail li .flex.flex-wrap { flex-wrap: wrap !important; }
.big-screen-mode #airport_ifr_detail .text-xs { overflow-wrap: anywhere; }

/* Airport cards — dynamic compact (Big Screen only, Larry 2026-08-24):
   the kiosk-airport-compact controller sets data-airport-compact="0..4"
   on the panel based on live airport + overridden counts. Levels 1-4
   progressively tighten padding/gaps so the whole dashboard stays on one
   1920x1080 screen with no scrolling or clipping. Level 0 is untouched. */
.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail .card-body { padding: 0.75rem !important; gap: 0.4rem; }
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .card-body { padding: 0.5rem !important; gap: 0.3rem; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .card-body { padding: 0.4rem !important; gap: 0.2rem; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .card-body { padding: 0.3rem !important; gap: 0.15rem; }

.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail .grid { gap: 0.4rem !important; }
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .grid { gap: 0.3rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .grid { gap: 0.2rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .grid { gap: 0.15rem !important; }

.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail .rounded-xl { padding: 0.5rem !important; }
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .rounded-xl { padding: 0.35rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .rounded-xl { padding: 0.25rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .rounded-xl { padding: 0.2rem !important; }

.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail ul.space-y-1\.5 { gap: 0.25rem !important; }
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail ul.space-y-1\.5 { gap: 0.2rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail ul.space-y-1\.5 { gap: 0.12rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail ul.space-y-1\.5 { gap: 0.08rem !important; }
.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail ul.space-y-1\.5 > * + * { margin-top: 0.25rem; }
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail ul.space-y-1\.5 > * + * { margin-top: 0.2rem; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail ul.space-y-1\.5 > * + * { margin-top: 0.12rem; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail ul.space-y-1\.5 > * + * { margin-top: 0.08rem; }

.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail li { font-size: 0.95rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail li { font-size: 0.85rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail li { font-size: 0.78rem !important; }
/* Area 4 is the reference — every area's pills lock to the same size
   on the Big Screen board (Larry). Compact tightens card padding/gaps ONLY,
   never pill size — badges stay identical across areas. */
.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail .airport-code-pill,
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .airport-code-pill,
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .airport-code-pill,
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .airport-code-pill { font-size: 1.19rem !important; padding: 0.35rem 0.94rem !important; min-height: 0 !important; line-height: 1.05 !important; }
.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail .badge,
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .badge,
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .badge,
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .badge { font-size: 1.10rem !important; padding: 0.31rem 0.68rem !important; min-height: 0 !important; line-height: 1.05 !important; }

/* Overridden section — same progressive tighten */
.big-screen-mode [data-airport-compact="1"] #airport_ifr_detail .mt-4 { margin-top: 0.5rem !important; }
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .mt-4 { margin-top: 0.35rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .mt-4 { margin-top: 0.25rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .mt-4 { margin-top: 0.2rem !important; }
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .mt-4 .flex-wrap { gap: 0.3rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .mt-4 .flex-wrap { gap: 0.2rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .mt-4 .flex-wrap { gap: 0.15rem !important; }

/* Header text tighten at high density — keep readable, just less air */
.big-screen-mode [data-airport-compact="2"] #airport_ifr_detail .card-body > p { margin-bottom: 0.2rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .card-body > p { margin-bottom: 0.12rem !important; font-size: 0.7rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .card-body > p { margin-bottom: 0.08rem !important; font-size: 0.65rem !important; }
.big-screen-mode [data-airport-compact="3"] #airport_ifr_detail .card-title { font-size: 1rem !important; }
.big-screen-mode [data-airport-compact="4"] #airport_ifr_detail .card-title { font-size: 0.95rem !important; }

/* Height breakpoints for the big-screen board — compress spacing and
   typography BEFORE anything overflows on shorter TVs (1366x768, 1280x720,
   intermediate heights). Replace the removed whole-page scaler with
   real height-responsive sizing (Larry, 2026-08-21). */
@media (max-height: 800px) {
  .kiosk .sector-status-table thead th { font-size: 1.3rem !important; padding: 0.35rem 0.5rem; }
  .kiosk tbody td { padding: 0.35rem 0.55rem; }
  .kiosk .sector-status-table tbody td:first-child { font-size: 2.1rem; }
  .kiosk .stratum-row td { font-size: 0.9rem; padding: 0.3rem 0.5rem; }
  .kiosk td.text-center { font-size: 1.1rem; }
  .kiosk .stat-value { font-size: 1.8rem; }
  .kiosk .stat-title { font-size: 0.75rem; }
  .kiosk .card-title { font-size: 1.3rem; }
  .kiosk .badge-lg { font-size: 1.1rem; padding: 0.35rem 0.8rem; }
  .kiosk .badge { font-size: 0.95rem; padding: 0.3rem 0.7rem; }
  .kiosk .tabs .tab { font-size: 1rem; padding: 0.4rem 0.9rem; }
  .kiosk #airport_ifr_detail div.font-bold { font-size: 1.1rem; }
  .kiosk #airport_ifr_detail li { font-size: 1rem; }
}
@media (max-height: 700px) {
  .kiosk .sector-status-table thead th { font-size: 1.15rem !important; padding: 0.25rem 0.4rem; }
  .kiosk tbody td { padding: 0.25rem 0.45rem; }
  .kiosk .sector-status-table tbody td:first-child { font-size: 1.7rem; }
  .kiosk td.text-center { font-size: 0.95rem; }
  .kiosk .stat-value { font-size: 1.4rem; }
  .kiosk .card-title { font-size: 1.1rem; }
  .kiosk .badge-lg { font-size: 0.95rem; padding: 0.25rem 0.6rem; }
  .kiosk .badge { font-size: 0.8rem; padding: 0.25rem 0.55rem; }
}

/* ---- Kiosk SHOWDOWN — purpose-built television presentation (Larry,
   2026-08-21). NOT the shared /trophy_case page shrunk: a fixed four-region
   composition (compact top bar / competition row / year ribbon / achievement
   banner) sized to ONE 100dvh viewport with TV-safe margins and extra bottom
   protection. Scoped to .kiosk so the regular Showdown page keeps its roomy
   layout untouched. ---- */

/* The kiosk page itself: exactly one viewport, nothing overflows. Flex
   column so the panels (flex:1) fill the space below the header. Scoped to
   the EXPLICIT big-screen state (.big-screen-mode) so ordinary pages never
   inherit any of this (Larry, 2026-08-21: fit-to-viewport is big-screen-only). */
.kiosk,
.big-screen-mode {
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.big-screen-mode) { overflow: hidden; }

/* Compact shared kiosk header (Larry, 2026-08-21: ~1/3 shorter). */
.kiosk .kiosk-header,
.big-screen-mode .kiosk-header { flex: 0 0 auto; }
.kiosk .kiosk-header h1,
.big-screen-mode .kiosk-header h1 { letter-spacing: 0.04em; }
.kiosk .kiosk-header-subtitle,
.big-screen-mode .kiosk-header-subtitle { letter-spacing: 0.22em; }

/* Each rotating panel fills the kiosk's flex column (rotation hides/shows). */
.kiosk [data-kiosk-rotate-target="panel"]:not(.hidden),
.big-screen-mode [data-kiosk-rotate-target="panel"]:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
}

/* The trophy panel fills the kiosk's flex column (rotation still hides it). */
.kiosk .kiosk-trophy-panel:not(.hidden),
.big-screen-mode .kiosk-trophy-panel:not(.hidden) { display: flex; flex: 1; min-height: 0; }

/* Root grid: four fixed regions, one viewport, TV-safe margins, extra
   bottom padding so overscanning TVs never cut the banner. */
.kiosk-showdown {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.1vh, 0.9rem);
  padding: clamp(0.5rem, 1.5vh, 1.1rem);
  padding-bottom: clamp(0.9rem, 2.6vh, 2rem); /* extra bottom protection */
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}

/* SHOWDOWN identity chips in the page top bar — hidden unless the Showdown
   panel is active (kiosk-rotate toggles). Uses the SAME font as the normal
   Showdown page (font-mono → Share Tech Mono, Larry 2026-08-21: no Big
   Screen-only font family), amber-tinted trophy chip. Reclaims the panel's
   old heading-row height. */
.kiosk-header-showdown {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.4rem, 1vh, 0.7rem);
  margin-left: clamp(0.3rem, 0.8vh, 0.6rem);
  padding-left: clamp(0.4rem, 1vh, 0.7rem);
  border-left: 1px solid rgb(var(--zme-glow)/0.25);
}
.kiosk-header-showdown__title {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1rem, 2.4vh, 1.7rem);
  letter-spacing: 0.12em;
  color: rgb(var(--zme-phosphor));
  text-shadow: 0 0 10px rgb(var(--zme-glow)/0.5);
  line-height: 1;
}
.kiosk-header-showdown__rivals {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: clamp(0.5rem, 1.2vh, 0.8rem);
  letter-spacing: 0.14em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--zme-glow)/0.4);
  color: rgb(var(--zme-phosphor)/0.9);
  background: rgb(var(--zme-panel)/0.55);
  white-space: nowrap;
}
.kiosk-header-showdown__rivals i { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }

/* Region 1 — primary competition row (~40% of usable height). The old
   heading row was merged into the top bar, so its height is reclaimed for
   bigger competition content (Larry, 2026-08-21). */
.kiosk-showdown__row {
  flex: 0 1 clamp(240px, 42%, 500px);
  min-height: 0;
  display: flex;
  gap: clamp(0.5rem, 1.2vh, 1rem);
  min-width: 0;
}

/* Today's Leader (28%) — compact, centered, readable across the room.
   Stronger border + soft championship glow + sparkles (the SAME leader
   treatment as the Monthly Recap's gold panel, Larry 2026-08-21). */
.kiosk-showdown__leader {
  flex: 0 0 28%;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.15rem, 0.5vh, 0.35rem);
  padding: clamp(0.4rem, 1.2vh, 0.9rem);
  border-radius: 1rem;
  border: 1px solid rgba(251,191,36,0.75);
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgb(var(--zme-glow)/0.10), transparent 70%),
    rgb(var(--zme-panel)/0.8);
  overflow: hidden;
  animation: kiosk-leader-gold-breathe 4s ease-in-out infinite;
}
.kiosk-showdown__leader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.15rem, 0.5vh, 0.35rem);
  padding: clamp(0.4rem, 1.2vh, 0.9rem);
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}
.kiosk-showdown__leader-inner.leader-sparkle--live,
.kiosk-showdown__leader-inner.leader-sparkle--final,
.kiosk-showdown__banner-inner.leader-sparkle--live,
.kiosk-showdown__banner-inner.leader-sparkle--final {
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}
@keyframes kiosk-leader-gold-breathe {
  0%, 100% { box-shadow: 0 0 44px rgba(251,191,36,0.44), 0 0 75px rgba(251,191,36,0.22), inset 0 0 29px rgba(251,191,36,0.07); border-color: rgba(251,191,36,0.72); }
  50% { box-shadow: 0 0 79px rgba(251,191,36,0.74), 0 0 128px rgba(251,191,36,0.31), inset 0 0 44px rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .kiosk-showdown__leader { animation: none; }
}
.kiosk-leader__kicker {
  font-size: clamp(0.6rem, 1.5vh, 1rem);
  letter-spacing: 0.12em;
  color: rgba(253, 230, 138, 0.85); /* amber-200 — same tone as the regular page */
  text-transform: uppercase;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(252, 211, 77, 0.5);
}
.kiosk-leader__tied { color: rgba(253, 230, 138, 0.7); }
.kiosk-leader__areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.8rem;
  position: relative;
}
/* Soft gold radiance right behind the leader's Area name. */
.kiosk-leader__areas::before {
  content: "";
  position: absolute;
  inset: -40% -30%;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(252, 211, 77, 0.18), transparent 70%);
  pointer-events: none;
}
.kiosk-leader__area {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.9rem, 6.2vh, 4.4rem);
  font-weight: 900;
  line-height: 1.02;
  position: relative;
}
/* Bright gold Area name — the same metallic bevel + glow treatment the
   SHIFT LEADER text wears, in amber-300 (matching the regular page's
   text-amber-300, Larry 2026-08-22). */
.kiosk-leader__area--gold {
  color: #fcd34d;
  text-shadow:
    0 0 10px rgba(252, 211, 77, 0.85),
    0 1px 0 rgba(255, 235, 180, 0.55),
    0 -1px 0 rgba(120, 80, 10, 0.6);
  /* Always gold — slow heat breathe like the achievement banner icon */
  animation: leader-area-heat 3.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes leader-area-heat {
  0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 10px rgba(252, 211, 77, 0.7)); }
  50%      { transform: scale(1.08); filter: brightness(1.4) drop-shadow(0 0 22px rgba(251, 191, 36, 1)) drop-shadow(0 0 36px rgba(249, 115, 22, 0.6)); }
}
@media (prefers-reduced-motion: reduce) {
  .kiosk-leader__area--gold { animation: none; }
}
.grand-champion-glow {
  animation: grand-champion-heat 3.6s ease-in-out infinite;
}
@keyframes grand-champion-heat {
  0%, 100% { box-shadow: 0 0 14px rgba(251,191,36,0.28), 0 0 28px rgba(251,191,36,0.18), inset 0 0 10px rgba(251,191,36,0.08); }
  50%      { box-shadow: 0 0 32px rgba(251,191,36,0.75), 0 0 58px rgba(249,115,22,0.35), inset 0 0 18px rgba(251,191,36,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .grand-champion-glow { animation: none; }
}
.kiosk-leader__pts {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.4rem, 3.8vh, 2.9rem);
  font-weight: 900;
  color: #fcd34d;
  text-shadow: 0 0 14px rgba(252, 211, 77, 0.6);
  line-height: 1.05;
}
.kiosk-leader__empty {
  font-size: clamp(1.4rem, 4vh, 2.8rem);
  color: rgba(252, 211, 77, 0.35);
  line-height: 1;
}
.kiosk-leader__meta {
  font-size: clamp(0.55rem, 1.3vh, 0.9rem);
  letter-spacing: 0.12em;
  color: rgba(253, 230, 138, 0.8);
}
.kiosk-leader__countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(0.15rem, 0.5vh, 0.4rem);
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(252, 211, 77, 0.4);
  background: rgb(var(--zme-inset)/0.65);
  font-size: clamp(0.6rem, 1.5vh, 1rem);
  letter-spacing: 0.08em;
  color: rgba(253, 230, 138, 0.9);
  white-space: nowrap;
}
.kiosk-leader__countdown-time { font-weight: 900; color: #fcd34d; text-shadow: 0 0 8px rgba(252, 211, 77, 0.6); }
.kiosk-leader__yesterday {
  margin-top: clamp(0.15rem, 0.5vh, 0.35rem);
  border-top: 1px solid rgba(252, 211, 77, 0.2);
  padding-top: clamp(0.2rem, 0.6vh, 0.45rem);
  font-size: clamp(0.55rem, 1.3vh, 0.9rem);
  letter-spacing: 0.04em;
  color: rgba(253, 230, 138, 0.85);
  line-height: 1.3;
}

/* Current Shift (72%) — header + six compact landscape cards, one row. */
.kiosk-showdown__shift {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(0.35rem, 1vh, 0.75rem);
  border-radius: 1rem;
  border: 1px solid rgb(var(--zme-glow)/0.25);
  background: rgb(var(--zme-panel)/0.7);
  box-shadow: 0 0 24px rgb(var(--zme-glow)/0.06);
  overflow: hidden;
}
.kiosk-shift__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 0.9vh, 0.7rem);
  padding-bottom: clamp(0.2rem, 0.6vh, 0.45rem);
  border-bottom: 1px solid rgb(var(--zme-glow)/0.15);
  margin-bottom: clamp(0.25rem, 0.7vh, 0.5rem);
}
.kiosk-shift__title {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.95rem, 2.4vh, 1.7rem);
  letter-spacing: 0.1em;
  color: rgb(var(--zme-phosphor));
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.kiosk-shift__chip {
  font-size: clamp(0.55rem, 1.35vh, 0.9rem);
  letter-spacing: 0.08em;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--zme-glow)/0.25);
  color: rgb(var(--zme-phosphor)/0.85);
  white-space: nowrap;
}
.kiosk-shift__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.55rem, 1.3vh, 0.9rem);
  letter-spacing: 0.1em;
  color: rgb(var(--zme-phosphor)/0.85);
  white-space: nowrap;
}
.kiosk-shift__live-dot {
  width: clamp(0.35rem, 0.9vh, 0.6rem);
  height: clamp(0.35rem, 0.9vh, 0.6rem);
  border-radius: 50%;
  background: rgb(var(--zme-phosphor));
  box-shadow: 0 0 8px rgb(var(--zme-glow)/0.6);
  animation: kiosk-live-pulse 1.6s ease-in-out infinite;
}
@keyframes kiosk-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Six compact cards — equal height (grid stretch), landscape, no towers. */
.kiosk-shift__cards {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.3rem, 0.9vh, 0.6rem);
  align-items: stretch;
}
/* Ordinary cards stay subdued so the leader clearly stands out; Area colors
   (applied to the Area name) carry the identity, not bright surfaces.
   Each card is three zones stacked to fill its full height: header (rank +
   Area), the shift score as the dominant middle, and bottom stats (TODAY |
   TO LEAD). The leader card gets a restrained theme glow + SHIFT LEADER tag
   but keeps the SAME dimensions (Larry, 2026-08-21). */
.kiosk-shift-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  text-align: center;
  padding: clamp(0.35rem, 0.9vh, 0.7rem);
  border-radius: 0.8rem;
  border: 1px solid rgb(var(--zme-glow)/0.14);
  background: rgb(var(--zme-inset)/0.7);
  overflow: hidden;
}
/* Area color identity on the card SURFACE (Larry, 2026-08-22): every Area's
   shift card wears its own color as a border + soft tint so the race reads
   by color from across the room — the way the Month History badges do. Only
   TWO cards break the pattern: the current shift leader (silver, below) and
   the day winner (gold). These sit BEFORE the leader rule so silver wins
   when an Area leads both the shift and the day. */
.kiosk-shift-card--area1 {
  border-color: rgba(64, 181, 208, 0.9);
  background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(64, 181, 208, 0.14), transparent 72%), rgb(var(--zme-inset)/0.75);
  box-shadow: 0 0 24px rgba(64, 181, 208, 0.5), inset 0 0 8px rgba(64, 181, 208, 0.08);
}
.kiosk-shift-card--area2 {
  border-color: rgba(236, 162, 38, 0.9);
  background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(236, 162, 38, 0.14), transparent 72%), rgb(var(--zme-inset)/0.75);
  box-shadow: 0 0 24px rgba(236, 162, 38, 0.5), inset 0 0 8px rgba(236, 162, 38, 0.08);
}
.kiosk-shift-card--area3 {
  border-color: rgba(168, 87, 244, 0.9);
  background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(168, 87, 244, 0.14), transparent 72%), rgb(var(--zme-inset)/0.75);
  box-shadow: 0 0 24px rgba(168, 87, 244, 0.5), inset 0 0 8px rgba(168, 87, 244, 0.08);
}
.kiosk-shift-card--area4 {
  border-color: rgba(229, 78, 73, 0.9);
  background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(229, 78, 73, 0.14), transparent 72%), rgb(var(--zme-inset)/0.75);
  box-shadow: 0 0 24px rgba(229, 78, 73, 0.5), inset 0 0 8px rgba(229, 78, 73, 0.08);
}
.kiosk-shift-card--area5 {
  border-color: rgba(136, 203, 39, 0.9);
  background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(136, 203, 39, 0.14), transparent 72%), rgb(var(--zme-inset)/0.75);
  box-shadow: 0 0 24px rgba(136, 203, 39, 0.5), inset 0 0 8px rgba(136, 203, 39, 0.08);
}
.kiosk-shift-card--area6 {
  border-color: rgba(113, 131, 155, 0.9);
  background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(113, 131, 155, 0.14), transparent 72%), rgb(var(--zme-inset)/0.75);
  box-shadow: 0 0 24px rgba(113, 131, 155, 0.5), inset 0 0 8px rgba(113, 131, 155, 0.08);
}
/* Day winner — GOLD card (Larry, 2026-08-22): the Area holding the day's
   highest total gets a gold border + warm gold glow. Same dimensions as the
   other five cards; the gold crown + DAY LEADER field still show in the
   bottom stats. */
.kiosk-shift-card--daywinner {
  border-color: rgba(251, 191, 36, 0.7);
  background:
    radial-gradient(ellipse 90% 70% at 50% 20%, rgba(251, 191, 36, 0.16), transparent 70%),
    rgb(var(--zme-inset)/0.75);
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.22), inset 0 0 16px rgba(251, 191, 36, 0.10);
}
/* Zone 1 — header: rank upper-left, Area name centered (Area color).
   Rank and Area ~25-30% larger than the previous layout. */
.kiosk-shift-card__header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.35rem, 0.9vh, 0.65rem);
  white-space: nowrap;
}
.kiosk-shift-card__rank {
  font-size: clamp(0.7rem, 1.8vh, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgb(var(--zme-phosphor)/0.75);
}
.kiosk-shift-card__area {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.3rem, 3.8vh, 2.8rem);
  font-weight: 900;
  line-height: 1.02;
}
/* Compact SHIFT LEADER marker — only the leader card shows it, but the slot
   is reserved on every card so all six stay identical in height. */
.kiosk-shift-card__leader-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: clamp(1.05rem, 2.4vh, 1.6rem);
  margin: 0 auto;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  font-size: clamp(0.5rem, 1.2vh, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  border: 1px solid transparent;
  color: transparent;
}
/* Crown color semantics (Larry, 2026-08-21): SILVER = leading the CURRENT
   SHIFT; GOLD = leading the full operational DAY (and the year). Silver is
   a metallic treatment (bright bevel + cool glow) — deliberately NOT a flat
   gray that could read as disabled, and readable in every theme. */
.kiosk-crown-silver {
  color: #f2f8fd;
  text-shadow:
    0 0 10px rgba(225, 240, 255, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 -1px 0 rgba(120, 140, 160, 0.5);
}
.kiosk-crown-gold {
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7));
}
/* Today's Leader crown — bigger + white-hot (Larry, 2026-08-22) */
.kiosk-showdown__leader .kiosk-crown-gold {
  font-size: 1.65em;
  vertical-align: -0.08em;
  color: #ffd84d;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 18px rgba(251, 191, 36, 1)) drop-shadow(0 0 32px rgba(249, 115, 22, 0.55));
  animation: leader-crown-hot 1.9s ease-in-out infinite;
}
@keyframes leader-crown-hot {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)) drop-shadow(0 0 16px rgba(251,191,36,0.9)) drop-shadow(0 0 28px rgba(249,115,22,0.45)); }
  50%      { transform: scale(1.18) rotate(2deg); filter: drop-shadow(0 0 12px rgba(255,255,255,1)) drop-shadow(0 0 26px rgba(251,191,36,1)) drop-shadow(0 0 42px rgba(249,115,22,0.7)); }
}
@media (prefers-reduced-motion: reduce) {
  .kiosk-showdown__leader .kiosk-crown-gold { animation: none; }
}
/* Shift Leader — SILVER treatment (Larry, 2026-08-21: silver = leading the
   current shift, gold = leading the full day; refined 2026-08-22: full
   silver card — translucent silver surface wash, silver border + soft outer
   glow, silver-white shift points, metallic gradient + shimmer. The AREA #
   keeps its canonical Area color so identity stays visible). SAME
   dimensions as the other five cards. */
.kiosk-shift-card--leader {
  position: relative;
  border-color: rgba(235, 244, 252, 0.95);
  background:
    radial-gradient(ellipse 90% 70% at 50% 20%, rgba(240, 248, 255, 0.28), transparent 70%),
    linear-gradient(160deg, rgba(235, 244, 252, 0.16), rgba(180, 200, 220, 0.06)),
    rgb(var(--zme-panel)/0.95);
  box-shadow: 0 0 36px rgba(220, 235, 250, 0.5), inset 0 0 22px rgba(235, 245, 255, 0.18);
}
.kiosk-shift-card--leader .kiosk-shift-card__shift {
  color: #f6fafd; /* bright silver-white — clearly distinct from AREA 6 grey */
  text-shadow:
    0 0 12px rgba(220, 235, 250, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(120, 140, 160, 0.5);
}
.kiosk-shift-card--leader .kiosk-shift-card__shift-label {
  color: rgba(225, 238, 250, 0.85);
}
.kiosk-shift-card--leader .kiosk-shift-card__stat-value {
  color: #f0f6fb;
  text-shadow: 0 0 10px rgba(220, 235, 250, 0.7);
}
.kiosk-shift-card--leader .kiosk-shift-card__leader-tag {
  border-color: rgba(230, 242, 252, 0.75);
  background: linear-gradient(160deg, rgba(240, 248, 255, 0.22), rgba(190, 210, 230, 0.12));
  color: #eef4fa;
  box-shadow: 0 0 14px rgba(220, 235, 250, 0.4);
}
.kiosk-shift-card--leader .kiosk-shift-card__leader-tag i {
  color: #f2f8fd;
  filter: drop-shadow(0 0 8px rgba(230, 244, 255, 0.9));
  font-size: 1.4em;
  line-height: 1;
}
/* Leader card top sheen removed per Larry 2026-08-22 — was still shooting across the top */
.kiosk-shift-card--leader::after { display: none !important; }
/* Zone 2 — primary value: the shift score is the dominant content,
   vertically centered in the middle of the card. ~45% larger than before. */
.kiosk-shift-card__primary {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.1rem, 0.3vh, 0.2rem);
}
.kiosk-shift-card__shift {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(2.4rem, 6.8vh, 5rem);
  font-weight: 900;
  color: rgb(var(--zme-phosphor));
  text-shadow: 0 0 12px rgb(var(--zme-glow)/0.4);
  white-space: nowrap;
  line-height: 1;
}
.kiosk-shift-card__shift-label {
  font-size: clamp(0.6rem, 1.6vh, 1.1rem);
  letter-spacing: 0.14em;
  color: rgb(var(--zme-phosphor)/0.6);
  font-weight: 400;
}
/* Zone 3 — bottom stats: two side-by-side fields (TODAY | TO LEAD) with a
   faint theme divider. Values ~20-25% larger, labels quieter. */
.kiosk-shift-card__stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.3rem, 0.8vh, 0.55rem);
  border-top: 1px solid rgb(var(--zme-glow)/0.12);
  padding-top: clamp(0.2rem, 0.5vh, 0.4rem);
  margin-top: clamp(0.15rem, 0.4vh, 0.3rem);
}
.kiosk-shift-card__stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.05rem, 0.15vh, 0.1rem);
}
.kiosk-shift-card__stat-divider {
  flex: 0 0 1px;
  align-self: stretch;
  margin: clamp(0.1rem, 0.25vh, 0.2rem) 0;
  background: rgb(var(--zme-glow)/0.18);
}
.kiosk-shift-card__stat-value {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.85rem, 2.2vh, 1.6rem);
  font-weight: 900;
  color: rgb(var(--zme-phosphor));
  line-height: 1;
}
.kiosk-shift-card__stat-label {
  font-size: clamp(0.45rem, 1.1vh, 0.75rem);
  letter-spacing: 0.14em;
  color: rgb(var(--zme-phosphor)/0.55);
  font-weight: 400;
}
.kiosk-shift-card__dayleader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  color: #fbbf24;
  font-weight: 900;
  font-size: clamp(0.55rem, 1.4vh, 1rem);
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  white-space: nowrap;
  line-height: 1;
}
.kiosk-shift-card__dayleader-label {
  font-size: 0.8em;
  letter-spacing: 0.08em;
}
/* The day-leader crown sits on its own line now (Larry, 2026-08-22) — give
   it room to be a proper crown instead of a tiny inline glyph. */
.kiosk-shift-card__dayleader .kiosk-crown-gold {
  font-size: 1.7em;
  line-height: 1;
}
/* Optional very thin theme progress line along the bottom edge — the Area's
   shift points relative to the shift leader. Subtle, no labels. */
.kiosk-shift-card__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: rgb(var(--zme-glow)/0.35);
  box-shadow: 0 0 6px rgb(var(--zme-glow)/0.3);
  border-radius: 0 2px 2px 0;
}
@keyframes kiosk-leader-sheen {
  0%, 55%  { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}

/* Region 3 — year standings ribbon: six equal compact cells, one row. */
.kiosk-showdown__year {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.3vh, 1rem);
  min-width: 0;
}
.kiosk-showdown__year-label {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.8rem, 2vh, 1.4rem);
  letter-spacing: 0.14em;
  color: rgb(var(--zme-phosphor)/0.85);
  white-space: nowrap;
}
.kiosk-showdown__year-cells {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.3rem, 0.9vh, 0.6rem);
}
/* Ordinary cells stay quiet; the leader cell stands out. */
.kiosk-year-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 0.7vh, 0.5rem);
  padding: clamp(0.2rem, 0.6vh, 0.45rem);
  border-radius: 0.6rem;
  border: 1px solid rgb(var(--zme-glow)/0.12);
  background: rgb(var(--zme-inset)/0.65);
  white-space: nowrap;
  overflow: hidden;
}
/* Year leader — crown marker, stronger border, subtle glow, brighter pts. */
.kiosk-year-cell--leader {
  position: relative;
  border-color: rgb(var(--zme-glow)/0.7);
  background:
    radial-gradient(ellipse 90% 80% at 50% 30%, rgb(var(--zme-glow)/0.12), transparent 70%),
    rgb(var(--zme-panel)/0.95);
  box-shadow: 0 0 16px rgb(var(--zme-glow)/0.22);
}
.kiosk-year-cell__crown {
  color: #fbbf24;
  font-size: clamp(0.7rem, 1.8vh, 1.3rem);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7));
}
.kiosk-year-cell__rank {
  font-size: clamp(0.55rem, 1.4vh, 0.95rem);
  color: rgb(var(--zme-phosphor)/0.7);
}
.kiosk-year-cell__area {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.7rem, 1.9vh, 1.35rem);
  font-weight: 900;
}
.kiosk-year-cell__pts {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.9rem, 2.4vh, 1.75rem);
  font-weight: 900;
  color: rgb(var(--zme-phosphor));
}
.kiosk-year-cell--leader .kiosk-year-cell__pts {
  color: rgb(var(--zme-phosphor));
  text-shadow: 0 0 10px rgb(var(--zme-glow)/0.55);
}
.kiosk-year-cell__pts-label {
  font-size: clamp(0.45rem, 1.1vh, 0.75rem);
  letter-spacing: 0.06em;
  color: rgb(var(--zme-phosphor)/0.6);
}

/* Region 4 — achievement banner: the big broadcast moment. ~15% of the
   usable height, fully inside the bottom TV-safe area. Bigger icon + name +
   message, theme-aware glow, subtle shimmer. The message stays on one line
   at normal widths (no break after "IN"); only truly long copy scales down
   and balances to two lines. */
.kiosk-showdown__banner {
  flex: 0 1 clamp(96px, 15%, 200px);
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vh, 1.2rem);
  padding: clamp(0.3rem, 0.9vh, 0.7rem);
  border-radius: 1rem;
  border: 1px solid rgba(251,191,36,0.75);
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgb(var(--zme-glow)/0.12), transparent 75%),
    rgb(var(--zme-panel)/0.8);
  overflow: hidden;
  animation: kiosk-banner-gold-breathe 4s ease-in-out infinite;
}
@keyframes kiosk-banner-gold-breathe {
  0%, 100% { box-shadow: 0 0 44px rgba(251,191,36,0.44), 0 0 75px rgba(251,191,36,0.22), inset 0 0 29px rgba(251,191,36,0.07); border-color: rgba(251,191,36,0.72); }
  50% { box-shadow: 0 0 79px rgba(251,191,36,0.74), 0 0 128px rgba(251,191,36,0.31), inset 0 0 44px rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .kiosk-showdown__banner { animation: none; }
}
/* Banner top sheen removed per Larry 2026-08-22 — was distracting */
.kiosk-showdown__banner::after { display: none !important; }
.kiosk-showdown__banner-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 0 12px rgb(var(--zme-glow)/0.5));
}
.kiosk-showdown__banner-glyph {
  font-size: clamp(1.4rem, 3.9vh, 3rem);
  color: #fcd34d; /* amber-300 — matches the regular page */
  filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.7));
}
/* Achievement glyph pulse (Larry, 2026-08-22): the kiosk banner icon breathes
   with a gentle pulse — random sparkles + glows come from the leader-sparkle
   controller on the banner, NOT the radar sweep (Larry, 2026-08-22). */
@keyframes kiosk-banner-glyph-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.7)); }
  50%      { transform: scale(1.14); filter: drop-shadow(0 0 22px rgba(252, 211, 77, 1)); }
}
.kiosk-showdown__banner-glyph {
  animation: kiosk-banner-glyph-pulse 3s ease-in-out infinite;
  transform-origin: center;
}
/* Random white-hot flare (Larry, 2026-08-22): the achievement icon briefly
   overdrives to a white-hot filament — bright white core, blazing glow —
   then cools down GRADUALLY like something that got really hot and faded
   out: quick white-hot peak, then a long warm-gold glow that slowly dims
   back to the resting pulse. Triggered at random by the achievement_flare
   controller; reduced motion = never applied. */
@keyframes achievement-flare-hot {
  0%   { transform: scale(1.05); color: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,0.9)) brightness(1.1); }
  12%  { transform: scale(1.35); color: #fff; filter: drop-shadow(0 0 32px rgba(255,255,255,1)) brightness(2.6) saturate(0.15); }
  30%  { transform: scale(1.18); color: #ffe9b0; filter: drop-shadow(0 0 24px rgba(255,230,170,0.95)) brightness(1.9) saturate(0.5); }
  55%  { transform: scale(1.08); color: #fcd34d; filter: drop-shadow(0 0 18px rgba(252,211,77,0.9)) brightness(1.5) saturate(0.9); }
  100% { transform: scale(1);    color: #fcd34d; filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.7)) brightness(1); }
}
.achievement-flare-hot {
  animation: achievement-flare-hot 1.4s ease-out !important;
}
/* Heat-haze shimmer on the banner text while the icon cools (Larry,
   2026-08-22): a faint rising wobble + soft brightness breathe, like hot
   air rising off the glowing icon. Added by the achievement_flare controller
   alongside the white-hot flare; reduced motion = never applied. */
@keyframes achievement-heat-haze {
  0%   { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
  20%  { transform: translateY(-1px) scale(1.005); filter: blur(0.4px); opacity: 0.95; }
  45%  { transform: translateY(-2px) scale(1.01); filter: blur(0.7px); opacity: 0.9; }
  70%  { transform: translateY(-1px) scale(1.005); filter: blur(0.3px); opacity: 0.95; }
  100% { transform: translateY(0) scale(1); filter: blur(0); opacity: 1; }
}
.achievement-flare-active .kiosk-showdown__banner-text {
  animation: achievement-heat-haze 1.4s ease-out;
  will-change: transform, filter;
}

/* Twinkling stars on the big screen Today's Leader card (Larry, 2026-08-22):
   small gold stars scattered near the card's edges, twinkling on staggered
   rhythms — restrained decoration that never covers the centered text. */
.kiosk-leader__star {
  position: absolute;
  color: #ffd87a;
  font-size: clamp(0.55rem, 1.4vh, 0.9rem);
  text-shadow: 0 0 8px rgba(255, 216, 122, 0.9), 0 0 16px rgba(251, 191, 36, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.kiosk-leader__star--1 { top: 8%;  left: 7%;  animation: kiosk-leader-star 4.2s ease-in-out infinite; }
.kiosk-leader__star--2 { top: 12%; right: 9%; animation: kiosk-leader-star 3.6s ease-in-out infinite 0.7s; }
.kiosk-leader__star--3 { bottom: 26%; left: 5%;  animation: kiosk-leader-star 5s ease-in-out infinite 1.6s; }
.kiosk-leader__star--4 { bottom: 20%; right: 6%; animation: kiosk-leader-star 3.9s ease-in-out infinite 2.3s; }
.kiosk-leader__star--5 { top: 44%; right: 12%; animation: kiosk-leader-star 4.6s ease-in-out infinite 3.1s; }
@keyframes kiosk-leader-star {
  0%, 100% { opacity: 0;    transform: scale(0.5) rotate(0deg); }
  30%      { opacity: 1;    transform: scale(1.1) rotate(15deg); }
  55%      { opacity: 0.35; transform: scale(0.8) rotate(-8deg); }
  75%      { opacity: 0.9;  transform: scale(1) rotate(5deg); }
}
.kiosk-showdown__banner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.1rem, 0.35vh, 0.25rem);
  min-width: 0;
  text-align: center;
}
/* Title (WIN STREAK) — small, spaced, clearly subordinate to the message. */
.kiosk-showdown__banner-label {
  font-size: clamp(0.65rem, 1.7vh, 1.15rem);
  letter-spacing: 0.22em;
  color: rgba(253, 230, 138, 0.85); /* amber-200 — matches the regular page */
  white-space: nowrap;
}
/* Message (AREA 3 · 2 STRAIGHT DAILY WINS) — the star of the banner. One line at
   normal widths; very long copy scales down and balances to two lines. */
.kiosk-showdown__banner-headline {
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.15rem, 3.1vh, 2.4rem);
  font-weight: 900;
  color: #fcd34d; /* amber-300 — matches the regular page's text-amber-300 */
  text-shadow: 0 0 14px rgba(252, 211, 77, 0.55);
  line-height: 1.1;
  max-width: 95%;
  white-space: nowrap;
}
.kiosk-showdown__banner-headline--long {
  font-size: clamp(0.9rem, 2.4vh, 1.8rem);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Height breakpoints — tighten spacing/typography before anything overflows
   on shorter displays (1366x768, 1280x720, intermediate heights). Sizes are
   scaled from the new larger card typography (Larry, 2026-08-21). */
@media (max-height: 800px) {
  .kiosk-showdown { gap: clamp(0.3rem, 1vh, 0.6rem); padding: clamp(0.4rem, 1.2vh, 0.8rem); padding-bottom: clamp(0.7rem, 2.2vh, 1.2rem); }
  .kiosk-showdown__row { flex-basis: 36%; }
  .kiosk-showdown__banner { flex-basis: 15%; }
  .kiosk-leader__area { font-size: clamp(1.4rem, 5vh, 3.4rem); }
  .kiosk-leader__pts { font-size: clamp(1.1rem, 3.2vh, 2.3rem); }
  .kiosk-shift-card__shift { font-size: clamp(1.85rem, 5.2vh, 3.8rem); }
  .kiosk-shift-card__area { font-size: clamp(1rem, 2.9vh, 2.1rem); }
  .kiosk-shift-card__stat-value { font-size: clamp(0.7rem, 1.8vh, 1.3rem); }
  .kiosk-shift-card__dayleader { font-size: clamp(0.5rem, 1.25vh, 0.9rem); }
  .kiosk-showdown__banner-headline { font-size: clamp(0.95rem, 2.6vh, 1.9rem); }
  .kiosk-showdown__banner-glyph { font-size: clamp(1.2rem, 3.2vh, 2.4rem); }
  .kiosk-year-cell__pts { font-size: clamp(0.75rem, 2vh, 1.4rem); }
  .kiosk-year-cell__area { font-size: clamp(0.6rem, 1.6vh, 1.1rem); }
}
@media (max-height: 700px) {
  .kiosk-showdown { gap: 0.25rem; }
  .kiosk-shift__head { margin-bottom: 0.2rem; }
  .kiosk-leader__countdown { padding: 0.12rem 0.6rem; }
  .kiosk-showdown__banner { flex-basis: 16%; }
  .kiosk-leader__area { font-size: clamp(1.1rem, 4.2vh, 2.6rem); }
  .kiosk-shift-card__shift { font-size: clamp(1.5rem, 4.25vh, 3rem); }
  .kiosk-shift-card__area { font-size: clamp(0.85rem, 2.4vh, 1.7rem); }
  .kiosk-shift-card__stat-value { font-size: clamp(0.6rem, 1.5vh, 1.05rem); }
  .kiosk-showdown__banner-headline { font-size: clamp(0.8rem, 2.2vh, 1.5rem); }
}

/* Tall displays (>=900px viewport height, e.g. 1080p and 4K): use more of
   the available screen so the presentation occupies ~85-90% of the safe
   viewport with ~4-5% protected at the bottom for overscan. Row height and
   typography scale up; the banner grows slightly and settles lower in the
   composition (Larry, 2026-08-21). Shorter displays keep the sizing above. */
@media (min-height: 900px) {
  .kiosk-showdown {
    justify-content: space-between; /* row top, year middle, banner near bottom */
  }
  .kiosk-showdown__row {
    flex-basis: clamp(280px, 48%, 580px);
  }
  .kiosk-leader__kicker { font-size: clamp(0.7rem, 1.7vh, 1.15rem); }
  .kiosk-leader__area { font-size: clamp(2.2rem, 7vh, 5rem); }
  .kiosk-leader__pts { font-size: clamp(1.6rem, 4.4vh, 3.4rem); }
  .kiosk-leader__meta { font-size: clamp(0.65rem, 1.5vh, 1rem); }
  .kiosk-leader__countdown { font-size: clamp(0.7rem, 1.7vh, 1.15rem); }
  .kiosk-leader__yesterday { font-size: clamp(0.65rem, 1.5vh, 1rem); }
  .kiosk-shift-card__area { font-size: clamp(1.5rem, 4.3vh, 3.2rem); }
  .kiosk-shift-card__shift { font-size: clamp(2.75rem, 7.7vh, 5.8rem); }
  .kiosk-shift-card__stat-value { font-size: clamp(1rem, 2.5vh, 1.85rem); }
  .kiosk-shift-card__stat-label { font-size: clamp(0.55rem, 1.3vh, 0.9rem); }
  .kiosk-showdown__year-label { font-size: clamp(0.9rem, 2.2vh, 1.55rem); }
  .kiosk-year-cell__area { font-size: clamp(0.8rem, 2.1vh, 1.5rem); }
  .kiosk-year-cell__pts { font-size: clamp(1rem, 2.7vh, 2rem); }
  .kiosk-year-cell__pts-label { font-size: clamp(0.5rem, 1.2vh, 0.85rem); }
  .kiosk-showdown__banner {
    flex-basis: clamp(120px, 18%, 240px);
  }
  .kiosk-showdown__banner-glyph { font-size: clamp(1.7rem, 4.6vh, 3.6rem); }
  .kiosk-showdown__banner-label { font-size: clamp(0.8rem, 2vh, 1.4rem); }
  .kiosk-showdown__banner-headline { font-size: clamp(1.4rem, 3.7vh, 2.9rem); }
}

/* Reduced motion — presentation stays readable, no pulse/shimmer. Static
   glow + hierarchy remain (Larry, 2026-08-21). */
@media (prefers-reduced-motion: reduce) {
  .kiosk-shift__live-dot { animation: none; }
  .kiosk-shift-card--leader::after,
  .kiosk-showdown__banner::after { display: none; }
  .kiosk-shift-card--leader { box-shadow: 0 0 18px rgba(195, 215, 235, 0.25); }
  .kiosk-showdown__banner-glyph { animation: none; }
  .kiosk-leader__star { display: none; }
}

/* ---- Big Screen rotation controls (Larry, 2026-08-21) ----
   Remote-style pause + fast-forward buttons, bottom-right, subtle ghost
   theme buttons that never fight the presentation. The pause button flips
   to play (and the control cluster gains a paused state) while frozen. */
.kiosk-rotate-controls {
  transition: opacity 0.25s ease;
}
.kiosk-rotate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.4rem, 4.5vh, 3.4rem);
  height: clamp(2.4rem, 4.5vh, 3.4rem);
  border-radius: 999px;
  border: 1px solid rgb(var(--zme-glow)/0.3);
  background: rgb(var(--zme-panel)/0.55);
  color: rgb(var(--zme-phosphor)/0.8);
  box-shadow: 0 0 12px rgb(var(--zme-glow)/0.12);
  font-size: clamp(0.8rem, 1.6vh, 1.15rem);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease,
              box-shadow 0.2s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.kiosk-rotate-btn:hover,
.kiosk-rotate-btn:focus-visible {
  border-color: rgb(var(--zme-glow)/0.6);
  color: rgb(var(--zme-phosphor));
  background: rgb(var(--zme-panel)/0.8);
  box-shadow: 0 0 18px rgb(var(--zme-glow)/0.22);
  outline: none;
}
.kiosk-rotate-btn:active {
  transform: scale(0.92);
}
/* Paused state — amber-tinted pause/play button so the frozen state is
   obvious from across the room (semantic amber, same as other live controls). */
.kiosk[data-kiosk-paused="true"] .kiosk-rotate-controls {
  border-radius: 999px;
  padding: 0.25rem;
  background: rgb(var(--zme-panel)/0.6);
}
.kiosk[data-kiosk-paused="true"] .kiosk-rotate-btn:first-child {
  border-color: rgba(251, 191, 36, 0.6);
  color: #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.3);
  background: rgb(var(--zme-panel)/0.85);
}

/* ---- Normal Showdown page — Current Shift tiles (Larry, 2026-08-21) ----
   The normal /trophy_case page's six Area tiles reuse the SAME three-zone
   .kiosk-shift-card structure as the Big Screen (header / primary score /
   bottom stats) so the two stay synchronized — silver SHIFT LEADER crown,
   gold DAY LEADER, progress line, all shared. These #trophy_body-scoped
   sizes fit the normal page (the kiosk keeps its own vh-based sizing). */
#trophy_body .kiosk-shift-card {
  gap: 0.15rem;
  padding: 0.45rem 0.35rem;
  border-radius: 0.7rem;
}
#trophy_body .kiosk-shift-card__header { gap: 0.35rem; }
#trophy_body .kiosk-shift-card__rank { font-size: 0.85rem; }
#trophy_body .kiosk-shift-card__area { font-size: 1.15rem; }
#trophy_body .kiosk-shift-card__leader-tag { font-size: 0.55rem; min-height: 1.1rem; }
#trophy_body .kiosk-shift-card__shift { font-size: 2.7rem; }
#trophy_body .kiosk-shift-card__shift-label { font-size: 0.6rem; }
#trophy_body .kiosk-shift-card__stat-value { font-size: 0.95rem; }
#trophy_body .kiosk-shift-card__stat-label { font-size: 0.55rem; }
#trophy_body .kiosk-shift-card__dayleader { font-size: 0.6rem; }

/* Today's Leader + Achievement banner — SHARED partials (Larry, 2026-08-22):
   the SAME kiosk classes render on the normal page and the big screen so the
   two look and act identically. The kiosk sizes use viewport-height clamps;
   these #trophy_body overrides fit the normal page's window instead. */
#trophy_body .kiosk-showdown__leader {
  flex: none;
  width: 100%;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
}
#trophy_body .kiosk-leader__kicker { font-size: 0.7rem; }
#trophy_body .kiosk-leader__area { font-size: 2.6rem; }
#trophy_body .kiosk-leader__pts { font-size: 1.4rem; }
#trophy_body .kiosk-leader__meta { font-size: 0.65rem; }
#trophy_body .kiosk-leader__countdown { font-size: 0.7rem; }
#trophy_body .kiosk-leader__yesterday { font-size: 0.65rem; }
#trophy_body .kiosk-leader__star { font-size: 0.6rem; }
#trophy_body .kiosk-showdown__banner {
  flex: none;
  width: 100%;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  margin-top: 0.75rem;
}
#trophy_body .kiosk-showdown__banner-glyph { font-size: 1.7rem; }
#trophy_body .kiosk-showdown__banner-label { font-size: 0.7rem; }
#trophy_body .kiosk-showdown__banner-headline { font-size: 1.15rem; }

/* ---- Compact inline collapse (admin logins) ----
   The CREATE LOGIN / EDIT LOGIN menus sit beside (or inline with) btn-sm
   buttons; Daisy's collapse-title forces a chunky 3.75rem min-height, so
   shrink it to match a button (2rem tall) and center the label text and
   the arrow in both open/closed states. line-height: 1 keeps the Share Tech
   Mono glyphs optically centered in the 2rem box. */
.admin-collapse-sm > .collapse-title {
  min-height: 0;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  line-height: 1;
}
.admin-collapse-sm.collapse-arrow > .collapse-title:after {
  top: 50%;
  --tw-translate-y: -50%;
}

/* ---- Floating hover tooltip (terminal style) ----
   Shown by the tooltip Stimulus controller for any [data-tooltip] element.
   position: fixed escapes table overflow clipping; pointer-events: none so
   it never steals the hover. */
.app-tooltip {
  position: fixed;
  z-index: 100;
  max-width: 280px;
  /* Theme-driven — follows the signed-in user's theme (green / amber /
     cyan / violet / silver / magenta) instead of a hardcoded palette. */
  background: rgb(var(--zme-inset) / 0.97);
  border: 1px solid rgb(var(--zme-glow) / 0.4);
  color: rgb(var(--zme-phosphor));
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7), 0 0 14px rgb(var(--zme-glow) / 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  pointer-events: none;
}
.app-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ---- PIREP log hazard highlights (Larry, 2026-08-19) ----
   The report column marks the exact words that earned each hazard tag.
   Default: a soft color-coded tint + underline per hazard. Hovering a
   hazard pill sets data-lit-hazard on the row: that hazard's marks light
   up bright while every other mark dims so the eye jumps straight to the
   words that earned the tag. */
mark.hz-hl {
  background: rgb(var(--zme-phosphor)/0.20);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  box-shadow: inset 0 -1.5px 0 rgb(var(--zme-phosphor)/0.6);
  transition: background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.2s ease;
}
mark.hz-hl[data-hazard~="CONVECTION"] { background: rgba(244, 63, 94, 0.32);  box-shadow: inset 0 -1.5px 0 rgba(244, 63, 94, 0.9);  text-shadow: 0 0 6px rgba(244, 63, 94, 0.8); }
mark.hz-hl[data-hazard~="TURBULENCE"] { background: rgba(251, 191, 36, 0.32); box-shadow: inset 0 -1.5px 0 rgba(251, 191, 36, 0.9); text-shadow: 0 0 6px rgba(251, 191, 36, 0.8); }
mark.hz-hl[data-hazard~="ICING"]      { background: rgba(34, 211, 238, 0.32); box-shadow: inset 0 -1.5px 0 rgba(34, 211, 238, 0.9); text-shadow: 0 0 6px rgba(34, 211, 238, 0.8); }
mark.hz-hl[data-hazard~="IFR"]        { background: rgba(167, 139, 250, 0.34); box-shadow: inset 0 -1.5px 0 rgba(167, 139, 250, 0.9); text-shadow: 0 0 6px rgba(167, 139, 250, 0.8); }
mark.hz-hl[data-hazard~="LLWS"]       { background: rgba(248, 113, 113, 0.32); box-shadow: inset 0 -1.5px 0 rgba(248, 113, 113, 0.9); text-shadow: 0 0 6px rgba(248, 113, 113, 0.8); }

/* Plain English hazard underlines — same hazard colors as raw, but ONLY an underline (Larry 2026-08-30).
   The words stay white/readable; the color is just the underline so it pops at a glance. */
.plain-hz {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--zme-phosphor));
}
.plain-hz[data-hazard="CONVECTION"] { text-decoration-color: rgba(244, 63, 94, 0.95); }
.plain-hz[data-hazard="TURBULENCE"] { text-decoration-color: rgba(251, 191, 36, 0.95); }
.plain-hz[data-hazard="ICING"]      { text-decoration-color: rgba(34, 211, 238, 0.95); }
.plain-hz[data-hazard="IFR"]        { text-decoration-color: rgba(167, 139, 250, 0.95); }
.plain-hz[data-hazard="LLWS"]       { text-decoration-color: rgba(248, 113, 113, 0.95); }

/* Hover focus: dim every mark, then relight only the hovered hazard's. */
tr[data-lit-hazard] mark.hz-hl {
  opacity: 0.2;
  filter: grayscale(0.9);
}
tr[data-lit-hazard="CONVECTION"] mark.hz-hl[data-hazard~="CONVECTION"],
tr[data-lit-hazard="TURBULENCE"] mark.hz-hl[data-hazard~="TURBULENCE"],
tr[data-lit-hazard="ICING"]      mark.hz-hl[data-hazard~="ICING"],
tr[data-lit-hazard="IFR"]        mark.hz-hl[data-hazard~="IFR"],
tr[data-lit-hazard="LLWS"]       mark.hz-hl[data-hazard~="LLWS"] {
  opacity: 1;
  filter: none;
  box-shadow: inset 0 -1.5px 0 currentColor, 0 0 14px rgb(var(--zme-glow)/0.55);
}

/* ---- PIREP log — fresh age pill (Larry, 2026-08-21) ----
   Reports still inside the credit window (under an hour at the default 60-min
   setting) get a theme-token "live" pill instead of Daisy's hardcoded success
   green, which read as a light blue that clashed with every theme. Every
   color comes from the active theme's tokens (phosphor + glow), so the pill
   adapts automatically to all six themes. */
.pirep-age-fresh {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--zme-glow)/0.45);
  background: rgb(var(--zme-phosphor)/0.08);
  color: rgb(var(--zme-phosphor));
  box-shadow: 0 0 10px rgb(var(--zme-glow)/0.2), inset 0 0 8px rgb(var(--zme-glow)/0.06);
}
.pirep-age-fresh .pirep-age-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgb(var(--zme-phosphor));
  box-shadow: 0 0 6px rgb(var(--zme-glow)/0.8);
  animation: pirep-age-pulse 2s ease-in-out infinite;
}
@keyframes pirep-age-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .pirep-age-fresh .pirep-age-dot { animation: none; }
}

/* ---- Navbar pending-count pill (Larry, 2026-08-21) ----
   The Admin Settings pending count used Daisy's hardcoded red badge-error,
   which clashed with every theme. Now a theme-token pill — phosphor text,
   glow border, soft tinted surface — so it reads like the rest of the app in
   all six themes. */
.nav-pending-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  border: 1px solid rgb(var(--zme-glow)/0.45);
  background: rgb(var(--zme-phosphor)/0.1);
  color: rgb(var(--zme-phosphor));
  box-shadow: 0 0 8px rgb(var(--zme-glow)/0.25), inset 0 0 6px rgb(var(--zme-glow)/0.08);
}

/* ---- Airport IFR Detail — airport ID pill (Larry, 2026-08-21) ----
   The airport code was a filled amber badge-warning; now an outline/glow
   pill matching the other themed pills (theme tokens — phosphor text, glow
   border, soft surface — so it reads in every theme). */
.airport-code-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgb(var(--zme-glow)/0.5);
  background: rgb(var(--zme-panel)/0.55);
  color: rgb(var(--zme-phosphor));
  box-shadow: 0 0 8px rgb(var(--zme-glow)/0.2), inset 0 0 6px rgb(var(--zme-glow)/0.06);
}

/* ---- Radar weather-field layer (Larry, 2026-08-19) ----
   The radar lives in its own layer (a sibling of the map svg) so frames can
   crossfade instead of being hard-swapped by the auto-refresh. The PNG is
   already transparent outside echoes and RGB-blurred server-side; this adds
   the windy-style polish: a soft radial edge mask (no hard rectangle), gentle
   display blur for smooth interpolation, and the crossfade transition. */
.radar-frame {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  will-change: opacity;
  transition: opacity 0.45s ease-in-out;
  /* soft radial fade so the image rect never reads as a hard-edged frame */
  -webkit-mask-image: radial-gradient(ellipse at center, black 80%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 80%, transparent 100%);
  /* ERAM mosaic — crisp, unsmoothed categorical pixels (no blur/saturate) */
}

/* ---- Facility Map — visual hierarchy (Larry, 2026-08-19)
   RADAR/WEATHER = conditions · NEUTRAL BOUNDARIES = sector geometry ·
   COLORED S## LABELS = Area identity · SUBTLE AREA FILL = selected emphasis ·
   LOW/HIGH/UH = altitude filtering.
   BASE BOUNDARY NETWORK (.boundary-line): permanent neutral gray, always the
   same opacity/width, shared edges drawn once. It NEVER participates in Area
   emphasis or hover, and there is NO boundary highlight overlay — exactly one
   visible boundary network, affected only by altitude filtering (Larry,
   2026-08-19). */
polygon.sector-fill { transition: fill-opacity 0.12s ease; }
text.sector-label   { transition: fill-opacity 0.12s ease, filter 0.12s ease; }
polyline.boundary-line { transition: stroke-opacity 0.12s ease; }

/* Single-sector hover: faint tint + label to full. The base boundary network
   stays untouched — hover never changes a boundary stroke. */
.sector-fill.sector-lit   { fill-opacity: 0.06; }
.sector-label.sector-lit  { fill-opacity: 1; }

/* Area emphasis (dots 1–6): the selected Area gets a strong tint (Larry,
   2026-08-22: "make highlights more opaque") and labels to 100% with a soft
   white glow. A gentle edge glow rides the selected Area's own shape so the
   boundary reads without touching the neutral boundary network. Other
   Areas' labels dim to ~1/3 but stay readable. Boundaries are NEVER touched
   by Area emphasis — exactly one permanent boundary network. Radar and
   weather are untouched. */
.sector-fill.area-lit   { fill-opacity: 0.30; filter: drop-shadow(0 0 5px rgba(255,255,255,0.30)) drop-shadow(0 0 14px rgba(255,255,255,0.12)); }
.sector-label.area-lit  { fill-opacity: 1; filter: drop-shadow(0 0 3px rgba(255,255,255,0.45)); }
.sector-label.area-dim  { fill-opacity: 0.35; }

/* Lightning observation tooltip — shows the timestamp of the bolt under the
   cursor. Plain text, matches the radar-scope aesthetic. */
.lightning-tooltip {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgb(var(--zme-phosphor));
  background: rgb(var(--zme-inset) / 0.96);
  border: 1px solid rgb(var(--zme-glow) / 0.4);
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 12px rgb(var(--zme-glow) / 0.25);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   MONTHLY RECAP LEADER PANEL — restrained sparkle + glow (Larry, 2026-08-20)
   The big gold panel is the recap's focal point. LIVE = active race (breathing
   gold glow, drifting ambient light, occasional small corner/border sparkles,
   a gentle sweep along the border). FINAL = settled championship (refined
   glow, fewer slower sparkles, an occasional celebratory shimmer). All effects
   stay INSIDE the panel (overflow hidden), never cover the centered text, and
   disappear on their own — no constant particle field, no confetti.
   Reduced motion → static soft glow only (no moving sparkles/shimmer).
   The auto-refresh swaps the recap section every 30s; the controller's
   disconnect() removes any in-flight effects so none accumulate. */
.leader-sparkle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Breathing border glow — live is livelier, final is settled + prestigious. */
.leader-sparkle--live {
  background-image:
    radial-gradient(ellipse 45% 35% at 25% 30%, rgba(251, 191, 36, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 30% at 75% 70%, rgba(251, 191, 36, 0.10), transparent 60%);
  background-size: 140% 140%;
  animation: leader-glow-live 9s ease-in-out infinite,
             leader-ambient-drift 12s ease-in-out infinite alternate;
}
.leader-sparkle--final {
  animation: leader-glow-final 11s ease-in-out infinite;
}
@keyframes leader-glow-live {
  0%, 100% { box-shadow: 0 0 18px rgba(251, 191, 36, 0.22), 0 0 0 rgba(251, 191, 36, 0); }
  50%      { box-shadow: 0 0 28px rgba(251, 191, 36, 0.38), 0 0 14px rgba(251, 191, 36, 0.18); }
}
@keyframes leader-glow-final {
  0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.24); }
  50%      { box-shadow: 0 0 30px rgba(251, 191, 36, 0.36); }
}
@keyframes leader-ambient-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 8% 6%; }
}

/* Slightly stronger emphasis around the AREA name while live — gentle
   brightness breathing, NOT a heavy text shadow. Final stays settled. */
.leader-sparkle--live .leader-area-name {
  animation: leader-area-breathe 9s ease-in-out infinite;
}
@keyframes leader-area-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.22); }
}

/* Occasional small gold sparkle near the border/corners — spawned by the
   controller, fades in and out, removed after one pass. */
.leader-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #ffd87a;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(255, 209, 102, 1), 0 0 4px rgba(255, 224, 130, 1);
  opacity: 0;
  pointer-events: none;
  animation: leader-spark-life 0.9s ease-out forwards;
}
@keyframes leader-spark-life {
  0%   { opacity: 0; transform: rotate(45deg) scale(0.2); }
  25%  { opacity: 1; }
  60%  { opacity: 0.8; transform: rotate(45deg) scale(1.25); }
  100% { opacity: 0; transform: rotate(45deg) scale(0.3); }
}

/* Gentle highlight sweeping along the top border at irregular intervals. */
.leader-sweep {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 120, 1), transparent);
  border-radius: 999px;
  filter: drop-shadow(0 0 9px rgba(251, 191, 36, 0.95));
  opacity: 0;
  pointer-events: none;
  animation: leader-sweep-run 1.2s ease-in-out forwards;
}
.leader-sweep--bottom {
  top: auto;
  bottom: 0;
  animation-name: leader-sweep-run-reverse;
}
@keyframes leader-sweep-run {
  0%   { transform: translateX(-100%); opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 0.9; }
  100% { transform: translateX(320%); opacity: 0; }
}
@keyframes leader-sweep-run-reverse {
  0%   { transform: translateX(320%); opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 0.9; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* Finalized only — an occasional soft celebratory shimmer across the panel. */
.leader-shimmer {
  position: absolute;
  inset: -30% -10%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 45%, rgba(255, 230, 160, 0.26) 50%, transparent 55%);
  transform: translateX(-70%);
  opacity: 0;
  animation: leader-shimmer-pass 1.6s ease-in-out forwards;
}
@keyframes leader-shimmer-pass {
  0%   { transform: translateX(-70%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateX(70%); opacity: 0; }
}

/* Paused when the tab is hidden (controller toggles the class) — CSS
   animations freeze instead of burning cycles nobody can see. */
.leader-sparkle--paused,
.leader-sparkle--paused * {
  animation-play-state: paused !important;
}

/* Accessibility — reduced motion gets a static soft glow, no movement. */
@media (prefers-reduced-motion: reduce) {
  .leader-sparkle--live,
  .leader-sparkle--final {
    animation: none;
  }
  .leader-sparkle .leader-ambient,
  .leader-sparkle .leader-spark,
  .leader-sparkle .leader-sweep,
  .leader-sparkle .leader-shimmer,
  .leader-sparkle--live .leader-area-name {
    display: none !important;
  }
}

/* ---- PIREP log Report toggle — RAW ↔ PLAIN (layman's, UUA-banner style) ----
   Same row, one tap flips the whole log. CSS is driven by
   data-pirep-report-mode on the card wrapper so Turbo-streamed rows obey too. */
[data-pirep-report-mode="raw"] .pirep-plain { display: none !important; }
[data-pirep-report-mode="plain"] .pirep-raw { display: none !important; }

/* ── READABILITY LIFT — NORMAL SITE ONLY (Larry, 2026-08-31) ──
   Modest bump for standard facility monitors / older eyes. Applies ONLY
   to the normal WISP website; Big Screen (.kiosk / .big-screen-mode) is
   explicitly excluded and reverted below so it stays exactly where you
   set it. No bolding, no layout changes, just size + a touch more
   contrast on very small helper text. */
:where(:not(.kiosk):not(.big-screen-mode)) .text-\[8px\]  { font-size: 10px !important; line-height: 1.45 !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-\[9px\]  { font-size: 11px !important; line-height: 1.45 !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-\[10px\] { font-size: 12px !important; line-height: 1.45 !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-\[11px\] { font-size: 13px !important; line-height: 1.5 !important; }
/* text-xs is 12px → 13px; text-sm stays ~14px but gets a hair more line-height */
:where(:not(.kiosk):not(.big-screen-mode)) .text-xs { font-size: 13px !important; line-height: 1.45 !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-sm { font-size: 14px !important; line-height: 1.45 !important; }
/* Buttons read a touch larger without feeling oversized */
:where(:not(.kiosk):not(.big-screen-mode)) .btn-xs { font-size: 12px !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .btn-sm { font-size: 13px !important; }
/* Very small helper/secondary text — +2px already handled above + slight
   contrast lift so 11-12px mono helpers don't wash out on dark panels */
:where(:not(.kiosk):not(.big-screen-mode)) .text-emerald-200\/50 { color: rgb(167 243 208 / 0.72) !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-emerald-200\/55 { color: rgb(167 243 208 / 0.78) !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-emerald-100\/50 { color: rgb(209 250 229 / 0.72) !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-emerald-100\/55 { color: rgb(209 250 229 / 0.78) !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .text-emerald-200\/60 { color: rgb(167 243 208 / 0.80) !important; }
/* Airport Ceiling/Vis distance bubbles — same size as the airport pill */
:where(:not(.kiosk):not(.big-screen-mode)) .nearest-badge { font-size: 0.7rem !important; line-height: 1.3 !important; padding: 0.15rem 0.55rem !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .nearest-badge i { font-size: 0.7rem !important; }
/* Normal PIREP Board — hazard + airport pills matched + top-aligned with Overall (Larry 2026-08-31) */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(2) .badge,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(3) .badge,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(4) .badge,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(5) .badge,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(6) .badge,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(7) .badge,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(8) .badge-airport { font-size: 0.95rem !important; padding: 0.32rem 0.7rem !important; line-height: 1.2 !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(2) .badge i,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(3) .badge i,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(4) .badge i,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(5) .badge i,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(6) .badge i,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(7) .badge i,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(8) .badge-airport i { font-size: 0.78rem !important; }
/* Pills sit where Overall sat before — nudge down so hazard + overall read centered */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td { vertical-align: middle !important; }
/* FIT-WITHOUT-SCROLL (Larry, 2026-09-01): compact every cell's vertical padding
   on the normal board so an Area's sectors fit the viewport without scrolling.
   Big Screen keeps its own sizes — everything here is scoped away from .kiosk. */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table tbody td { padding-top: 0.3rem !important; padding-bottom: 0.15rem !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(2) .badge,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(3) .group,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(4) .group,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(5) .group,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(6) .group,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td:nth-child(7) .group { position: relative; top: 8px; }
/* LAST-ROW ABSORPTION (Larry, 2026-09-01 — "slightly scroll" on 7-sector areas):
   the 8px nudge above renders every pill stack ~6px below its layout slot. On
   the LAST row that poke lands PAST the table bottom, so the overflow-x wrapper
   (whose overflow-y computes to auto) grows a phantom ~6px vertical scrollbar
   and the bottom countdown clips — the "slight scroll". Padding the shell
   absorbs the nudge: the box simply extends and nothing ever scrolls inside.
   Normal board only — Big Screen untouched. */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-table-shell { padding-bottom: 12px; }
/* position:relative + top instead of transform (Larry 2026-09-01). A transform
   on this wrapper makes it the containing block for the fixed CREDITED popover
   inside — the popover then positioned against the tiny pill instead of the
   screen, landed in the wrong place, and inflated the table wrapper's scroll
   area (board card scrolled/jittered on hover). Relative positioning nudges
   the pills identically WITHOUT capturing the popover. Never put a transform
   on a weather-popover ancestor. */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td .group { justify-content: center !important; }
/* More fit-without-scroll compaction (Larry, 2026-09-01): header row, stratum
   rows, the countdown labels beneath the pills (Overall's invisible spacer and
   the visible hazard countdown shrink TOGETHER so the pills stay aligned), the
   card padding, and the area tabs. */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table thead th { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table tr.stratum-row td { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; }
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td .hazard-pct,
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table td span.invisible { font-size: 10px !important; margin-top: 2px !important; }
:where(:not(.kiosk):not(.big-screen-mode)) #sector_board .card-body { padding: 0.75rem !important; }
:where(:not(.kiosk):not(.big-screen-mode)) a[href*="board?area="] { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
/* Headers — match pill text size (Larry 2026-08-31) */
:where(:not(.kiosk):not(.big-screen-mode)) .sector-status-table thead th { font-size: 0.95rem !important; line-height: 1.2 !important; }
/* Airport Ceiling / Visibility — airport code pill matches hazard pill size */
:where(:not(.kiosk):not(.big-screen-mode)) .airport-code-pill { font-size: 0.95rem !important; padding: 0.32rem 0.7rem !important; line-height: 1.2 !important; }
/* Area selection tabs +25% (Larry 2026-08-31) */
:where(:not(.kiosk):not(.big-screen-mode)) a[href*="board?area="],
:where(:not(.kiosk):not(.big-screen-mode)) a[href*="board?area="].tab { font-size: 1.05rem !important; }

/* ── BIG SCREEN REVERT — must stay exactly as shipped ──
   Undo every bump above inside the TV presentation so not a single
   pixel changes there. Placed AFTER the lift so it wins. */
.kiosk .text-\[8px\],  .big-screen-mode .text-\[8px\]  { font-size: 8px !important; line-height: inherit !important; }
.kiosk .text-\[9px\],  .big-screen-mode .text-\[9px\]  { font-size: 9px !important; line-height: inherit !important; }
.kiosk .text-\[10px\], .big-screen-mode .text-\[10px\] { font-size: 10px !important; line-height: inherit !important; }
.kiosk .text-\[11px\], .big-screen-mode .text-\[11px\] { font-size: 11px !important; line-height: inherit !important; }
.kiosk .text-xs,       .big-screen-mode .text-xs       { font-size: 0.75rem !important; line-height: 1rem !important; }
.kiosk .text-sm,       .big-screen-mode .text-sm       { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.kiosk .btn-xs,        .big-screen-mode .btn-xs        { font-size: 0.75rem !important; }
.kiosk .btn-sm,        .big-screen-mode .btn-sm        { font-size: 0.875rem !important; }
.kiosk .text-emerald-200\/50,       .big-screen-mode .text-emerald-200\/50       { color: rgb(167 243 208 / 0.5) !important; }
.kiosk .text-emerald-200\/55,       .big-screen-mode .text-emerald-200\/55       { color: rgb(167 243 208 / 0.55) !important; }
.kiosk .text-emerald-100\/50,       .big-screen-mode .text-emerald-100\/50       { color: rgb(209 250 229 / 0.5) !important; }
.kiosk .text-emerald-100\/55,       .big-screen-mode .text-emerald-100\/55       { color: rgb(209 250 229 / 0.55) !important; }
.kiosk .text-emerald-200\/60,       .big-screen-mode .text-emerald-200\/60       { color: rgb(167 243 208 / 0.6) !important; }

/* ---- PIREP PTS HEX — HUD segmented hexagon (Larry 2026-09-11)
   Clean futuristic: dark hex fill + segmented outline with corner breaks.
   Same shape for all values; color distinguishes tier. Thin, crisp, small. ---- */
.pts-hex {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(7, 14, 26, 0.98);
  clip-path: polygon(50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  isolation: isolate;
  transition: filter 0.15s ease, transform 0.12s ease;
}
/* segmented outline — 6 edge segments with gaps at each corner (HUD break) */
.pts-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}
/* subtle inner hairline hex for depth — very faint */
.pts-hex::after {
  content: "";
  position: absolute;
  inset: 5.5px;
  clip-path: polygon(50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  border: 1px solid currentColor;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}
/* hide legacy diamond ticks — replaced by segmented corners */
.pts-hex i.pts-tick, .pts-hex .pts-tick { display: none !important; }
.pts-hex:hover { transform: scale(1.05); }
/* tiers: same HUD hex, color = tier — 1 blue, 2 cyan/teal, 3 amber/gold, 4 orange/red, 5 purple */
.pts-hex--1 { color: #dbeafe; --hex-glow: rgba(59,130,246,0.55); text-shadow: 0 0 7px rgba(59,130,246,0.85); filter: drop-shadow(0 0 5px rgba(59,130,246,0.55)); }
.pts-hex--2 { color: #ccfbf1; --hex-glow: rgba(20,184,166,0.55); text-shadow: 0 0 7px rgba(20,184,166,0.85); filter: drop-shadow(0 0 5px rgba(20,184,166,0.55)); }
.pts-hex--3 { color: #fef9c3; --hex-glow: rgba(234,179,8,0.50); text-shadow: 0 0 7px rgba(234,179,8,0.85); filter: drop-shadow(0 0 5px rgba(234,179,8,0.50)); }
.pts-hex--4 { color: #ffedd5; --hex-glow: rgba(249,115,22,0.55); text-shadow: 0 0 7px rgba(249,115,22,0.85); filter: drop-shadow(0 0 5px rgba(249,115,22,0.55)); }
.pts-hex--5 { color: #f3e8ff; --hex-glow: rgba(168,85,247,0.60); text-shadow: 0 0 8px rgba(168,85,247,0.90); filter: drop-shadow(0 0 6px rgba(168,85,247,0.55)); }
.pts-hex--5 { width: 38px; height: 42px; font-size: 17px; filter: drop-shadow(0 0 7px rgba(168,85,247,0.60)); }
/* segmented outline SVG per tier — 6 lines with corner gaps, stroke = tier color */
.pts-hex--1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40'%3E%3Cg fill='none' stroke='%233b82f6' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20.6' y1='2.9' x2='29.4' y2='9.1'/%3E%3Cline x1='32' y1='14.4' x2='32' y2='25.6'/%3E%3Cline x1='29.4' y1='30.9' x2='20.6' y2='37.1'/%3E%3Cline x1='15.4' y1='37.1' x2='6.6' y2='30.9'/%3E%3Cline x1='4' y1='25.6' x2='4' y2='14.4'/%3E%3Cline x1='6.6' y1='9.1' x2='15.4' y2='2.9'/%3E%3C/g%3E%3C/svg%3E"); }
.pts-hex--2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40'%3E%3Cg fill='none' stroke='%2314b8a6' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20.6' y1='2.9' x2='29.4' y2='9.1'/%3E%3Cline x1='32' y1='14.4' x2='32' y2='25.6'/%3E%3Cline x1='29.4' y1='30.9' x2='20.6' y2='37.1'/%3E%3Cline x1='15.4' y1='37.1' x2='6.6' y2='30.9'/%3E%3Cline x1='4' y1='25.6' x2='4' y2='14.4'/%3E%3Cline x1='6.6' y1='9.1' x2='15.4' y2='2.9'/%3E%3C/g%3E%3C/svg%3E"); }
.pts-hex--3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40'%3E%3Cg fill='none' stroke='%23eab308' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20.6' y1='2.9' x2='29.4' y2='9.1'/%3E%3Cline x1='32' y1='14.4' x2='32' y2='25.6'/%3E%3Cline x1='29.4' y1='30.9' x2='20.6' y2='37.1'/%3E%3Cline x1='15.4' y1='37.1' x2='6.6' y2='30.9'/%3E%3Cline x1='4' y1='25.6' x2='4' y2='14.4'/%3E%3Cline x1='6.6' y1='9.1' x2='15.4' y2='2.9'/%3E%3C/g%3E%3C/svg%3E"); }
.pts-hex--4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40'%3E%3Cg fill='none' stroke='%23f97316' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20.6' y1='2.9' x2='29.4' y2='9.1'/%3E%3Cline x1='32' y1='14.4' x2='32' y2='25.6'/%3E%3Cline x1='29.4' y1='30.9' x2='20.6' y2='37.1'/%3E%3Cline x1='15.4' y1='37.1' x2='6.6' y2='30.9'/%3E%3Cline x1='4' y1='25.6' x2='4' y2='14.4'/%3E%3Cline x1='6.6' y1='9.1' x2='15.4' y2='2.9'/%3E%3C/g%3E%3C/svg%3E"); }
.pts-hex--5::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40'%3E%3Cg fill='none' stroke='%23a855f7' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20.6' y1='2.9' x2='29.4' y2='9.1'/%3E%3Cline x1='32' y1='14.4' x2='32' y2='25.6'/%3E%3Cline x1='29.4' y1='30.9' x2='20.6' y2='37.1'/%3E%3Cline x1='15.4' y1='37.1' x2='6.6' y2='30.9'/%3E%3Cline x1='4' y1='25.6' x2='4' y2='14.4'/%3E%3Cline x1='6.6' y1='9.1' x2='15.4' y2='2.9'/%3E%3C/g%3E%3C/svg%3E"); }
/* 2) multi-hazard pulse — 4pts (3 hazards) subtle, 5+ (4 hazards) stronger — like a hot report */
@keyframes pts-hex-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px currentColor) brightness(1); }
  50%       { transform: scale(1.07); filter: drop-shadow(0 0 16px currentColor) brightness(1.25); }
}
@keyframes pts-hex-pulse-strong {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 18px rgba(168,85,247,0.45)) brightness(1); }
  50%       { transform: scale(1.09); filter: drop-shadow(0 0 18px currentColor) drop-shadow(0 0 30px rgba(168,85,247,0.65)) brightness(1.35); }
}
.pts-hex--pulse { animation: pts-hex-pulse 1.9s ease-in-out infinite; }
.pts-hex--pulse-strong { animation: pts-hex-pulse-strong 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pts-hex--pulse, .pts-hex--pulse-strong { animation: none !important; }
}