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

/*

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

*/
@import "tailwindcss/base";
/* Have all of Avo's custom and plugins styles available. */
@import "../../../../tmp/avo/avo.base.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/*

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

*/

/* ------------------------------------------------------------------ */
/* Payouts Flow concourse board. See docs/payouts-flow-dashboard.md    */
/* World: rail-concourse split-flap board fused with GIFQ brand inks.  */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(/fonts/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(/fonts/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.pf-board {
  --pf-ground: #0A0B0D;
  --pf-flap: #101114;
  --pf-flap-hi: #17181C;
  --pf-flap-lo: #0B0C0E;
  --pf-ink: #F2F2F2;
  --pf-steel: #B6BBC2;
  --pf-steel-dim: #8A929D;
  --pf-rule: #262A30;
  --pf-frame: #31363E;
  --pf-amber: #FFB400;
  --pf-red: #E5484D;
  --pf-lime: #CBFD12;
  --pf-blue: #2D56ED;
  /* Text/fill tones darken in light mode so state colors keep AA contrast. */
  --pf-lime-text: #CBFD12;
  --pf-amber-text: #FFB400;
  --pf-red-text: #E5484D;
  --pf-lime-fill: #CBFD12;
  --pf-map-base: #20242A;
  --pf-map-data: #CBFD12;
  --pf-map-stroke: #08090B;
  --pf-cell-h: 2.125rem;
  --pf-cell-w: 1.375rem;
  --pf-master-size: clamp(1.25rem, 1.1vw + 0.75rem, 1.75rem);
  --pf-count-scale: 1;
  position: relative;
  background: var(--pf-ground);
  color: var(--pf-ink);
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  border: 1px solid var(--pf-frame);
  border-radius: 0.375rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.pf-board a { color: inherit; }
.pf-board a:hover .pf-ink-link, .pf-board a:hover.pf-ink-link { color: var(--pf-lime-text); }
.pf-board a:focus-visible, .pf-board button:focus-visible {
  outline: 2px solid var(--pf-lime-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Light mode: a daylight concourse. The ground turns paper; the flap
   hardware, plates and takeover stay inked - that is the board's identity. */
html.pf-light .pf-board {
  --pf-ground: #F1F2EE;
  --pf-ink: #16181B;
  --pf-steel: #454B54;
  --pf-steel-dim: #656D78;
  --pf-rule: #D9DBD4;
  --pf-frame: #C2C5BD;
  --pf-lime-text: #5B7000;
  --pf-amber-text: #8A6200;
  --pf-red-text: #B3282D;
  --pf-lime-fill: #7A9A00;
  --pf-map-base: #DCDFD7;
  --pf-map-data: #6E8A00;
  --pf-map-stroke: #F1F2EE;
}
html.pf-light .pf-board .pf-cell { color: #F2F2F2; }
html.pf-light .pf-board .pf-digits--lime .pf-cell { color: var(--pf-lime); }
html.pf-light .pf-board .pf-plate--ok { color: #F2F2F2; }
html.pf-light .pf-board .pf-plate--ink { color: #F1F2EE; }
html.pf-light .pf-board .pf-footer-logo { filter: invert(1); }
html.pf-light .pf-board .pf-row--link:hover { background: rgba(0, 0, 0, 0.04); }
/* The takeover is dark hardware in both themes; restore its dark-context inks. */
html.pf-light .pf-board .pf-takeover { --pf-ink: #F2F2F2; --pf-steel-dim: #8A929D; --pf-lime-text: #CBFD12; }

.pf-board[data-tv='true'] {
  --pf-cell-h: 3.4rem;
  --pf-cell-w: 2.15rem;
  --pf-master-size: clamp(2.25rem, 3.4vh + 0.5vw, 3.6rem);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pf-display {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pf-label {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pf-steel-dim);
}
.pf-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* Flap digit cells: split-flap character units with the midline seam. */
.pf-digits { display: inline-flex; gap: 2px; }
.pf-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pf-cell-w);
  height: var(--pf-cell-h);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--pf-flap-hi) 0%, var(--pf-flap) 48%, var(--pf-flap-lo) 52%, var(--pf-flap) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.55);
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: calc(var(--pf-cell-h) * 0.56);
  line-height: 1;
  backface-visibility: hidden;
}
.pf-cell::after {
  content: '';
  position: absolute;
  inset: calc(50% - 1px) 0 auto 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
}
.pf-cell--narrow { width: calc(var(--pf-cell-w) * 0.55); background: none; box-shadow: none; }
.pf-cell--narrow::after { content: none; }

/* Lamps: the board's state hardware. The halo is the lamp's own light. */
.pf-lamp {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: var(--pf-steel-dim);
}
.pf-lamp[data-tone='lime'] { background: var(--pf-lime-fill); box-shadow: 0 1px 6px 1px rgba(203, 253, 18, 0.55); }
.pf-lamp[data-tone='amber'] { background: var(--pf-amber); box-shadow: 0 1px 6px 1px rgba(255, 180, 0, 0.55); }
.pf-lamp[data-tone='red'] { background: var(--pf-red); box-shadow: 0 1px 6px 1px rgba(229, 72, 77, 0.6); }
.pf-lamp--pulse { animation: pf-lamp-pulse 2.4s ease-in-out infinite; }
.pf-board[data-stale='true'] .pf-lamp--pulse { animation: none; background: var(--pf-steel-dim); box-shadow: none; }

/* Status plates: filled flap plates for states that demand the eye. */
.pf-plate {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.18em 0.55em;
  border-radius: 3px;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.25;
  border: 1px solid transparent;
}
.pf-plate--ok { color: var(--pf-ink); border-color: var(--pf-rule); background: var(--pf-flap); }
.pf-plate--lime { color: #0A0B0D; background: var(--pf-lime); }
.pf-plate--amber { color: #0A0B0D; background: var(--pf-amber); }
.pf-plate--red { color: #FFF4F4; background: var(--pf-red); }
.pf-plate--blue { color: #F4F7FF; background: var(--pf-blue); }
.pf-plate--steel { color: var(--pf-steel); border-color: var(--pf-frame); background: transparent; }
.pf-plate--ink { color: #0A0B0D; background: var(--pf-ink); }

/* Master line: the concourse annunciator. */
.pf-master { border-bottom: 1px solid var(--pf-frame); }
.pf-master__text { font-size: var(--pf-master-size); line-height: 1.1; }
.pf-master[data-state='clear'] { background: linear-gradient(90deg, rgba(203, 253, 18, 0.10), rgba(203, 253, 18, 0.02) 60%); }
.pf-master[data-state='attention'] { background: linear-gradient(90deg, rgba(255, 180, 0, 0.14), rgba(255, 180, 0, 0.03) 60%); }
.pf-master[data-state='disruption'] { background: linear-gradient(90deg, rgba(229, 72, 77, 0.18), rgba(229, 72, 77, 0.04) 60%); }
.pf-master[data-state='clear'] .pf-master__word { color: var(--pf-lime-text); }
.pf-master[data-state='attention'] .pf-master__word { color: var(--pf-amber-text); }
.pf-master[data-state='disruption'] .pf-master__word { color: var(--pf-red-text); }

/* Poll sweep: a lime rule that fills over one refresh interval. */
.pf-sweep { height: 2px; background: var(--pf-rule); overflow: hidden; }
.pf-sweep__bar {
  height: 100%;
  width: 100%;
  background: var(--pf-lime-fill);
  transform-origin: left;
  transform: scaleX(0);
}
.pf-sweep__bar--run { animation: pf-sweep var(--pf-sweep-ms, 30000ms) linear forwards; }
.pf-board[data-stale='true'] .pf-sweep__bar { animation: none; transform: scaleX(1); background: var(--pf-steel-dim); }

/* Board tables: ruled rows, never nested cards. */
.pf-rule-b { border-bottom: 1px solid var(--pf-rule); }
.pf-rule-t { border-top: 1px solid var(--pf-rule); }
.pf-row { border-bottom: 1px solid var(--pf-rule); }
.pf-row:last-child { border-bottom: 0; }
.pf-row--link:hover { background: rgba(255, 255, 255, 0.035); }
.pf-row--failed { background: rgba(229, 72, 77, 0.07); }
.pf-row--stuck { background: rgba(255, 180, 0, 0.06); }
.pf-row--vacant .pf-lamp { background: var(--pf-rule); }

/* The feed's scrollbar is board hardware, not the OS default. */
.pf-board [data-pause-on-hover] { scrollbar-width: thin; scrollbar-color: var(--pf-frame) var(--pf-ground); }
.pf-board [data-pause-on-hover]::-webkit-scrollbar { width: 8px; }
.pf-board [data-pause-on-hover]::-webkit-scrollbar-track { background: var(--pf-ground); }
.pf-board [data-pause-on-hover]::-webkit-scrollbar-thumb { background: var(--pf-frame); border-radius: 4px; }

/* Chart ink. */
.pf-bar-gc { background: var(--pf-blue); }
.pf-bar-cr { background: var(--pf-ink); }
.pf-gridline { border-top: 1px dashed var(--pf-rule); }

.pf-digits--lime .pf-cell { color: var(--pf-lime); }

.pf-board [hidden] { display: none !important; }

/* Atlas sizing: width-driven at the desk, height-driven on the wall. */
.pf-board [data-map-frame] svg { display: block; width: 100%; height: auto; }
.pf-board[data-tv='true'] [data-map-frame] { display: flex; height: 100%; align-items: center; justify-content: center; }
.pf-board[data-tv='true'] [data-map-frame] svg { height: 100%; width: auto; max-width: 100%; }

/* Live update choreography: one system, three verbs.                  */
/* write-in (new rows), flip (changed digits), flash (changed figures) */
.pf-arrive { animation: pf-arrive 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.pf-flip .pf-cell { animation: pf-flip 0.5s cubic-bezier(0.35, 0.8, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.pf-flash { animation: pf-flash 1.4s ease-out; }

@keyframes pf-flip {
  0% { transform: perspective(240px) rotateX(0deg); filter: brightness(1); }
  45% { transform: perspective(240px) rotateX(-88deg); filter: brightness(1.6); }
  100% { transform: perspective(240px) rotateX(0deg); filter: brightness(1); }
}
@keyframes pf-arrive {
  0% { opacity: 0; transform: translateY(-0.5rem); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pf-flash {
  0% { background-color: rgba(203, 253, 18, 0.22); }
  100% { background-color: transparent; }
}
@keyframes pf-sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes pf-lamp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Annunciator takeover: a new departure seizes the board, character by character. */
.pf-takeover {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(5, 6, 7, 0.94);
  cursor: pointer;
  text-transform: uppercase;
  animation: pf-takeover-in 0.35s ease-out;
}
.pf-board[data-tv='true'] .pf-takeover { position: fixed; }
.pf-takeover--leaving { animation: pf-takeover-out 0.4s ease-in forwards; }
.pf-takeover__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  --pf-cell-h: clamp(3.25rem, 9vh, 6rem);
  --pf-cell-w: clamp(2rem, 5.6vh, 3.7rem);
}
.pf-board[data-tv='true'] .pf-takeover__line {
  --pf-cell-h: clamp(4.5rem, 14vh, 9.5rem);
  --pf-cell-w: clamp(2.8rem, 8.8vh, 6rem);
}
.pf-takeover__line--sub {
  --pf-cell-h: clamp(2rem, 5vh, 3.25rem);
  --pf-cell-w: clamp(1.25rem, 3.1vh, 2rem);
}
.pf-board[data-tv='true'] .pf-takeover__line--sub {
  --pf-cell-h: clamp(2.6rem, 7vh, 4.75rem);
  --pf-cell-w: clamp(1.6rem, 4.4vh, 3rem);
}
.pf-takeover__line--sub .pf-cell { color: var(--pf-lime); }
.pf-takeover .pf-cell { animation: pf-cell-in 0.55s cubic-bezier(0.35, 0.8, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.pf-takeover__hint { position: absolute; bottom: 1.25rem; }

@keyframes pf-takeover-in {
  from { opacity: 0; }
}
@keyframes pf-takeover-out {
  to { opacity: 0; }
}
@keyframes pf-cell-in {
  0% { transform: perspective(420px) rotateX(92deg); opacity: 0; }
  55% { transform: perspective(420px) rotateX(-14deg); opacity: 1; filter: brightness(1.6); }
  100% { transform: perspective(420px) rotateX(0deg); opacity: 1; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-arrive, .pf-flash, .pf-lamp--pulse { animation: none !important; }
  .pf-flip .pf-cell, .pf-takeover .pf-cell { animation: none !important; }
  .pf-sweep { display: none; }
}

@layer components {
  .container {
    @apply mx-auto;
    max-width: 100%;
  }

  /* Ensure proper max-widths at different breakpoints */
  /* @screen sm {
    .container {
      max-width: 640px;
    }
  }
  @screen md {
    .container {
      max-width: 768px;
    }
  }
  @screen lg {
    .container {
      max-width: 1024px;
    }
  }
  @screen xl {
    .container {
      max-width: 1280px;
    }
  }
  @screen 2xl {
    .container {
      max-width: 1536px;
    }
  } */
}
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * 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.
 *


 */