/*
 * INDEX board-layout renderer styles.
 *
 * Brand: teal, pixelated, grid-based, dark-mode-first. The renderer is
 * loaded in any page that needs to display a board layout (currently
 * just the dashboard). All section types share the tokens below.
 */

.ix-layout {
  --ixl-gap: 16px;
  --ixl-cap-color: var(--text-mid, #888);
  display: flex;
  flex-direction: column;
  gap: var(--ixl-gap);
  font-family: var(--font-mono, ui-monospace, "IBM Plex Mono", monospace);
}

.ix-layout-meta {
  border: 1px solid var(--border, #232323);
  background: var(--surface, #141414);
  padding: 14px 16px;
}
.ix-layout-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 18px;
  letter-spacing: 1.2px;
  color: var(--text, #e0e0e0);
  margin: 0 0 6px;
}
.ix-layout-summary {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text, #e0e0e0);
  margin: 0;
  white-space: pre-wrap;
}
.ix-layout-byline {
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim, #555);
  margin-top: 8px;
}

.ix-layout-sections {
  display: flex;
  flex-direction: column;
  gap: var(--ixl-gap);
}

.ix-layout-section {
  border: 1px solid var(--border, #232323);
  background: var(--surface, #141414);
  padding: 14px 16px;
}

.ix-layout-section h2,
.ix-layout-section h3,
.ix-layout-section h4 {
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 1px;
  color: var(--text, #e0e0e0);
}

.ix-chart {
  margin: 0;
}
.ix-chart-cap {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mid, #888);
  margin-bottom: 10px;
}
.ix-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  shape-rendering: crispEdges;
}
.ix-chart text {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  fill: var(--text-mid, #888);
}
.ix-chart-value-label {
  fill: var(--text, #e0e0e0);
  font-size: 11px;
}
.ix-chart-axis line, .ix-chart-grid line {
  stroke: var(--border2, #2e2e2e);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ix-chart-empty {
  border: 1px dashed var(--border2, #2e2e2e);
  padding: 18px;
  text-align: center;
  color: var(--text-dim, #555);
}
.ix-chart-empty-eyebrow {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--text-dim, #555);
  margin-bottom: 6px;
}

.ix-chart-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.ix-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-mid, #888);
  margin-bottom: 8px;
}
.ix-chart-legend-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid var(--border2, #2e2e2e);
}

/* Image gallery */
.ix-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  border: 1px solid var(--border, #232323);
  padding: 6px;
  background: rgba(255,255,255,0.015);
}
.ix-gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border, #232323);
  background: var(--surface2, #1a1a1a);
}
.ix-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ix-gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4px 6px;
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text, #e0e0e0);
  background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .ix-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (min-width: 1200px) {
  .ix-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Callout */
.ix-callout {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #232323);
  background: var(--surface2, #1a1a1a);
}
.ix-callout-bar {
  width: 4px;
  flex: 0 0 4px;
  background: var(--teal, #6C86B5);
}
.ix-callout.is-info    .ix-callout-bar { background: var(--teal, #6C86B5); }
.ix-callout.is-success .ix-callout-bar { background: var(--ok,   #7aad6c); }
.ix-callout.is-warn    .ix-callout-bar { background: var(--warn, #c0935a); }
.ix-callout.is-error   .ix-callout-bar { background: var(--err,  #c0635a); }
.ix-callout-title {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text, #e0e0e0);
  margin-bottom: 4px;
}
.ix-callout-text { font-size: 12px; color: var(--text, #e0e0e0); margin: 0; line-height: 1.55; }

/* Metrics */
.ix-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.ix-metric {
  border: 1px solid var(--border, #232323);
  padding: 12px;
  background: var(--surface2, #1a1a1a);
}
.ix-metric-label {
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-mid, #888);
  margin-bottom: 6px;
}
.ix-metric-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--text, #e0e0e0);
}
.ix-metric-trend { font-size: 11px; margin-left: 4px; }
.ix-metric-trend.is-up   { color: var(--ok, #7aad6c); }
.ix-metric-trend.is-down { color: var(--err, #c0635a); }
.ix-metric-trend.is-flat { color: var(--text-dim, #555); }

/* Comparison table */
.ix-comparison {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ix-comparison th, .ix-comparison td {
  border: 1px solid var(--border2, #2e2e2e);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.ix-comparison th {
  background: var(--surface2, #1a1a1a);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-mid, #888);
}

/* Key-value */
.ix-kv {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: 6px 14px;
  font-size: 12px;
}
.ix-kv-key {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-mid, #888);
  align-self: start;
}
.ix-kv-value { color: var(--text, #e0e0e0); }

/* Timeline */
.ix-timeline { display: flex; flex-direction: column; gap: 8px; }
.ix-timeline-event {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  border-left: 2px solid var(--teal, #6C86B5);
  padding: 8px 12px;
  background: var(--surface2, #1a1a1a);
}
.ix-timeline-date {
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-mid, #888);
}
.ix-timeline-title {
  font-size: 12px;
  color: var(--text, #e0e0e0);
  margin: 0 0 4px;
}
.ix-timeline-desc { font-size: 12px; color: var(--text-mid, #888); margin: 0; line-height: 1.55; }

/* Quote */
.ix-quote {
  border-left: 3px solid var(--teal, #6C86B5);
  padding: 8px 14px;
  margin: 0;
  font-size: 13px;
  color: var(--text, #e0e0e0);
  line-height: 1.6;
}
.ix-quote-attribution {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-mid, #888);
}

/* Code */
.ix-code {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border2, #2e2e2e);
  background: var(--surface2, #1a1a1a);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text, #e0e0e0);
  overflow-x: auto;
  white-space: pre;
}

/* Bullets / numbered */
.ix-bullets, .ix-numbered { margin: 0; padding-left: 22px; font-size: 12px; line-height: 1.7; color: var(--text, #e0e0e0); }
.ix-bullets li, .ix-numbered li { margin-bottom: 2px; }
.ix-bullets.is-square { list-style: square; }
.ix-bullets.is-dot    { list-style: disc; }
.ix-bullets.is-dash   { list-style: none; }
.ix-bullets.is-dash li::before { content: '— '; color: var(--text-mid, #888); }

/* Refresh-summary affordance */
.ix-layout-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  border: 1px solid var(--border, #232323);
  background: var(--surface, #141414);
  color: var(--text-mid, #888);
  padding: 6px 10px;
  cursor: pointer;
}
.ix-layout-refresh.is-stale {
  border-color: var(--warn, #c0935a);
  color: var(--warn, #c0935a);
}
.ix-layout-refresh:hover { color: var(--text, #e0e0e0); }

.ix-layout-empty {
  border: 1px dashed var(--border2, #2e2e2e);
  padding: 24px;
  text-align: center;
  color: var(--text-dim, #555);
  font-size: 12px;
}