/* meet.armagi.co: page-specific rules on top of base.css */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.link { padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.link:nth-child(3) { background: var(--gold-bg); border-color: var(--gold-line); }
.link:last-child { background: #0f1d3d; border-color: #0f1d3d; color: #e6ebf5; }
.link:last-child p { color: #a4b0c8; }
.link .n { font-family: var(--mono); font-size: 12px; color: var(--gold-ink); }
.link:last-child .n { color: var(--gold-soft); }
.link b { display: block; font-size: 17px; margin-top: 2px; }
.link p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }

.tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.track { display: flex; flex-direction: column; gap: 10px; min-height: 120px; padding: 18px; text-align: left; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.track .said { font-size: 18px; font-weight: 600; }
.track .thought { font-size: 15px; color: var(--muted); font-style: italic; filter: blur(5px); transition: filter .25s; }
.track[aria-pressed="true"] { background: #0f1d3d; border-color: #0f1d3d; color: #e6ebf5; }
.track[aria-pressed="true"] .thought { filter: none; color: var(--gold-soft); }

.grid9-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.grid9 { display: grid; grid-template-columns: 7.5em repeat(3, minmax(0, 1fr)); gap: 6px; }
.grid9 .head { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; align-self: end; }
.grid9 .side { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); align-self: center; }
.cellbtn { min-height: 64px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.cellbtn:hover { border-color: var(--gold-soft); }
.cellbtn[aria-pressed="true"] { background: #1B3A7B; border-color: #1B3A7B; color: #fff; }
.card { padding: 20px 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); animation: fade .3s ease-out; }
.card > .tag { color: var(--gold-ink); }
.card > b { display: block; font-size: 20px; margin-top: 4px; }
.card .eg { margin: 4px 0 12px; color: var(--ink-2); }
.rows9 { display: grid; gap: 8px; }
.r9 { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line); }
.r9 .tag { color: var(--muted); }
.r9.do .v { font-weight: 600; color: var(--navy); }
.r9.never .tag, .r9.never .v { color: var(--red); }

@media (max-width: 860px) {
  .chain, .tracks { grid-template-columns: minmax(0, 1fr); }
  .track { min-height: 0; }
  .grid9-wrap { grid-template-columns: minmax(0, 1fr); }
  .grid9 { grid-template-columns: 5.5em repeat(3, minmax(0, 1fr)); }
  .cellbtn { font-size: 13px; padding: 8px 6px; }
  .r9 { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}