/*
Raster Feedback Terminal — Raster Feedback Terminal additions layer
====================================
This file owns two things Raster deliberately dropped, restored / folded in on top
of the Raster (Overscan Terminal) visual template:

  1. The Feedback Loop two-column SIDEBAR layout (Home1-3 / Single1-3 widget
     areas) — the wrappers are made 70/30 again and the .fl-sidebar column is
     styled for the drafting-paper shell.

  2. The Market Terminal TICKER tape, styled for the terminal chrome. Because it
     lives in the header (outside #main) it uses the --os-* chrome tokens, so
     it flips correctly between TERMINAL (dark) and SCHEMATIC (light).

Loaded AFTER overscan-chrome.css so every rule here wins.

Both modes are driven by the --os-* custom properties defined in
overscan-chrome.css.
*/

/* ==========================================================================
   TICKER TAPE — MarketTerminal, styled for the terminal chrome
   ========================================================================== */
.ticker{
  display:flex; align-items:stretch;
  background:var(--os-chromesolid);
  border-bottom:1px solid var(--os-chromeline);
  height:30px; overflow:hidden;
  font-family:var(--font-mono);
}
.ticker-label{
  flex:none; display:flex; align-items:center;
  background:var(--os-fl); color:var(--os-chromebg);
  font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  padding:0 14px; white-space:nowrap;
}
html.fl-schematic .ticker-label{ color:#fff; }
.ticker-viewport{ flex:1; overflow:hidden; position:relative; min-width:0; }
.ticker-inner{
  display:flex; align-items:center; width:max-content; white-space:nowrap;
  animation:ticker-scroll var(--ticker-speed,45s) linear infinite;
  will-change:transform;
}
.ticker-viewport:hover .ticker-inner{ animation-play-state:paused; }
.ticker-item{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:0 22px; border-right:1px solid var(--os-chromeline);
  font-size:.7rem; color:var(--os-chrometext);
}
.t-sym{ color:var(--os-cyan); font-weight:800; letter-spacing:.06em; }
.t-name{ color:var(--os-chromedim); text-transform:uppercase; letter-spacing:.08em; }
.t-price{ font-weight:700; font-variant-numeric:tabular-nums; }
.t-chg{ font-weight:800; font-variant-numeric:tabular-nums; }
.t-chg.up{ color:var(--os-up); }
.t-chg.down{ color:var(--os-dn); }
.ticker-item.flash-up{ animation:flash-up .7s ease; }
.ticker-item.flash-down{ animation:flash-down .7s ease; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes flash-up{ 0%{ background:color-mix(in srgb, var(--os-up) 26%, transparent); } 100%{ background:transparent; } }
@keyframes flash-down{ 0%{ background:color-mix(in srgb, var(--os-dn) 26%, transparent); } 100%{ background:transparent; } }

/* ==========================================================================
   FEEDBACK LOOP SIDEBAR — two-column wrappers restored, 70/30 content/sidebar.
   .fl-fullwidth-wrap stays single-column: page-nosidebar.php uses it with no
   aside at all. page.php (which does have a sidebar) uses .fl-content-wrap.
   ========================================================================== */
.fl-home-wrap,
.fl-content-wrap,
.fl-single-wrap{
  display:grid;
  grid-template-columns:70% 30%;
  gap:28px;
  align-items:start;
}
.fl-fullwidth-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
}

.fl-home-wrap > main,
.fl-home-wrap > aside,
.fl-content-wrap > main,
.fl-content-wrap > aside,
.fl-fullwidth-wrap > main,
.fl-fullwidth-wrap > aside,
.fl-single-wrap > main,
.fl-single-wrap > aside{
  min-width:0;
}

.fl-sidebar{
  background:var(--os-paper2);
  border:1px solid var(--os-grid2);
  border-top:0; border-bottom:0;
  padding:20px 6px 20px 20px;
  font-family:var(--font-mono);
  color:var(--os-inkdim);
}
.fl-sidebar::before{
  content:"// SIDEBAR";
  display:block;
  color:var(--os-inkfaint);
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  border-bottom:1px solid var(--os-grid2);
  padding-bottom:10px; margin-bottom:18px;
}
.fl-sidebar .fl-widget{ margin-bottom:26px; }
.fl-sidebar .fl-widget-title{
  color:var(--os-ink);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:2px solid var(--os-ink);
  padding-bottom:6px;
}
.fl-sidebar ul{ list-style:none; margin:0; padding:0; }
.fl-sidebar li{ margin:0 0 4px; }
.fl-sidebar li a{ color:var(--os-inkdim); font-size:.78rem; }
.fl-sidebar li a:hover{ color:var(--os-cyan); }
.fl-sidebar-divider{ border:0; border-top:1px solid var(--os-grid2); margin:18px 0; }
.fl-ad-sidebar{ margin-bottom:22px; }

/* ==========================================================================
   Responsive — collapse the sidebar to a single column on tablets/phablets
   ========================================================================== */
@media screen and (max-width: 900px){
  .fl-home-wrap,
  .fl-content-wrap,
  .fl-fullwidth-wrap,
  .fl-single-wrap{
    grid-template-columns:1fr;
    gap:20px;
  }
  .fl-sidebar{
    border-left:0; border-top:1px solid var(--os-grid2);
    border-bottom:1px solid var(--os-grid2);
    padding:16px 0 0;
  }
}

/* ── 1.3.0: ticker pause control (WCAG 2.2.2) + screen-reader dedup ── */
.ticker-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.ticker-pause {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	min-height: 24px;
	align-self: stretch;
	background: transparent;
	border: none;
	border-right: 1px solid var(--os-chromeline);
	color: var(--os-chromedim);
	cursor: pointer;
	padding: 0 8px;
}
.ticker-pause:hover,
.ticker-pause:focus-visible {
	color: var(--os-chrometext);
}
.ticker-pause-icon {
	width: 9px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.ticker--paused .ticker-pause-icon {
	width: 0;
	height: 0;
	border-left: 10px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: none;
}
.ticker--paused .ticker-inner {
	animation-play-state: paused;
}
.ticker-viewport:focus-within .ticker-inner {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.ticker-inner {
		animation: none;
	}
	.ticker-item.flash-up,
	.ticker-item.flash-down {
		animation: none;
	}
}