/* global-fullpage.css
 * Loaded alongside the shared style.css on the Global "Full screen" page.
 * Reuses all --ol- design tokens (colors, fonts) from style.css so the two
 * pages can never visually drift apart; this file only adds the jumbo
 * wall-display layout that's unique to this page.
 */

html, body{ height: 100%; }

.fp-wrap{
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.25rem clamp(1.25rem, 3vw, 3rem) 1.5rem;
}

/* header row: title left, Exit fullscreen + Light mode right */
.fp-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.fp-title{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 3rem);
  letter-spacing: .03em;
  background: linear-gradient(120deg, var(--ol-gold-dim), var(--ol-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.fp-header-actions{
  display: flex;
  gap: .6rem;
  flex-shrink: 0;
}
.fp-btn{
  border: 1px solid var(--ol-border);
  background: var(--ol-surface-raised);
  color: var(--ol-gold);
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s;
}
.fp-btn:hover{ border-color: var(--ol-gold-dim); }

/* subline: /GLOBAL . clock . UPDATES EVERY [interval] [stepper] */
.fp-subline{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 1.25rem;
  font-family: 'Syne', sans-serif;
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ol-text-muted);
}
.fp-dot{ opacity: .5; }
.fp-clock{
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(1rem, 1.8vw, 1.75rem);
  color: var(--ol-text);
  letter-spacing: .04em;
}
.fp-clock .blink{ transition: opacity .1s linear; }
.fp-clock .blink.dim{ opacity: .15; }

/* interval stepper -- deliberately understated, not a focal element */
.fp-stepper{
  display: inline-flex;
  flex-direction: column;
  line-height: 0;
  margin-left: 2px;
  vertical-align: middle;
}
.fp-stepper button{
  background: none;
  border: none;
  color: var(--ol-text-muted);
  font-size: 8px;
  line-height: 1;
  padding: 1px 3px;
  cursor: pointer;
  opacity: .6;
}
.fp-stepper button:hover{ opacity: 1; color: var(--ol-gold); }
.fp-stepper button:disabled{ opacity: .2; cursor: default; }
.fp-stepper button:disabled:hover{ color: var(--ol-text-muted); }

/* jumbo 3x2 stat grid -- fills remaining viewport height */
.fp-grid{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  background: var(--ol-border);
  border: 1px solid var(--ol-border);
  min-height: 0;
}

/* ticker tape, scaled up from the standard app -- this page is meant to be
   read from across a room, so the usual compact tape size doesn't cut it */
.fp-wrap .tape-frame{
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.fp-wrap .tape{ padding: 16px 0; }
.fp-wrap .tape-item{
  font-size: clamp(1rem, 1.7vw, 1.6rem);
  gap: 12px;
  padding: 0 2.2rem;
}
.fp-cell{
  background: var(--ol-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  min-width: 0;
  min-height: 0;
}
.fp-cell-label{
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.75rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ol-text-muted);
  margin: 0 0 .5vh;
}
.fp-cell-value{
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: clamp(2.5rem, 6.5vw, 7rem);
  line-height: 1;
  margin: 0;
  color: var(--ol-text);
  max-width: 100%;
}
.fp-cell-value.up{ color: var(--ol-jade); }
.fp-cell-value.down{ color: var(--ol-garnet); }

.fp-loading{
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ol-text-muted);
}

@media (max-width: 900px){
  .fp-grid{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .fp-grid{ grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); }
  .fp-cell-value{ font-size: clamp(2rem, 12vw, 4rem); }
}