/* aria-live.app · home v3: the rules only the home page uses (the four-space cards, the four-space diagram). Loaded after global.css. */
.row-spaces { grid-template-columns: 56px 1fr; }
.row-spaces .row-main { padding-top: 7px; min-width: 0; }
.row-spaces h3 { padding-top: 0; }
.row-spaces .body { padding-top: 8px; max-width: 640px; }
.spaces {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 12px;
    column-gap: 12px;
  }
.spaces .group { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; }
.spaces .group .kicker { color: var(--text-label); }
.spaces .group .rule { flex: 1; height: 1px; background: var(--line); }
.spaces .group .layout { font-size: 11.5px; font-weight: 500; color: var(--text-3); letter-spacing: -0.005em; }
.spaces .g-rooms { grid-column: 1 / 3; grid-row: 1; }
.spaces .g-sessions { grid-column: 3 / 5; grid-row: 1; margin-left: 12px; }
.spaces .sp1 { grid-column: 1; grid-row: 2; }
.spaces .sp2 { grid-column: 2; grid-row: 2; }
.spaces .sp3 { grid-column: 3; grid-row: 2; margin-left: 12px; }
.spaces .sp4 { grid-column: 4; grid-row: 2; }
.space {
    position: relative; min-width: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 45%), var(--surface-2);
    box-shadow: var(--shadow-2);
    padding: 14px 14px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
.space:hover { border-color: var(--line-strong); box-shadow: var(--shadow-pop); }
.space-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 22px; }
.space-top .kicker { color: var(--text-2); font-size: 10.5px; letter-spacing: 0.1em; }
.space-top .num { font-size: 11px; font-weight: 500; color: var(--text-4); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.space-top .marks { display: inline-flex; align-items: center; gap: 8px; }
.space-top .live-tag { font-size: 9.5px; padding: 3px 7px 3px 6px; gap: 5px; }
.space-top .live-tag .pip { width: 5px; height: 5px; box-shadow: none; }
.diagram { width: 100%; aspect-ratio: 4 / 3; }
.diagram svg { width: 100%; height: 100%; }
.space-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: -0.008em;
  }
.space-foot svg { width: 14px; height: 14px; stroke-width: 1.6; color: var(--text-4); flex-shrink: 0; }
.space-foot .access { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.space-foot .extra { color: var(--text-4); white-space: nowrap; }
.g   { fill: none; stroke: var(--line); }
.f   { fill: rgba(255,255,255,0.015); stroke: var(--line-strong); }
.fd  { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.s   { fill: var(--seat); stroke: var(--line-strong); }
.h   { fill: var(--seat-host); stroke: var(--line-strong); }
.e   { fill: none; stroke: var(--line-2); stroke-dasharray: 2 2.4; }
.m   { fill: none; stroke: var(--text-4); }
.lv  { fill: var(--violet); }
.ring { fill: none; stroke: url(#ringc); stroke-width: 1.5; }

/* Responsive placement for the four space cards. These must come after the desktop
   placement above; in the shared sheet they lost the cascade and phones got four columns. */
@media (max-width: 960px) {
    .spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; }
    .spaces .g-rooms { grid-column: 1 / 3; grid-row: 1; }
    .spaces .sp1 { grid-column: 1; grid-row: 2; }
    .spaces .sp2 { grid-column: 2; grid-row: 2; }
    .spaces .g-sessions { grid-column: 1 / 3; grid-row: 3; margin: 8px 0 0; }
    .spaces .sp3 { grid-column: 1; grid-row: 4; margin-left: 0; }
    .spaces .sp4 { grid-column: 2; grid-row: 4; }
}
@media (max-width: 600px) {
    .spaces { gap: 10px; margin-top: 28px; }
}