/* Google Sheets question cookbook — additions on top of /blog/blog.css.
   Generated pages only (homepage/questions/build.mjs); blog.css stays the base. */

/* A spreadsheet as the reader will see it: formula bar, column letters, row numbers. */
.sheet { margin: 1.25rem 0 0.4rem; border: 1px solid var(--border-hov); border-radius: 10px;
  background: var(--bg-2); overflow: hidden; }
.sheet-bar { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-hov);
  font-family: var(--font-mono); font-size: 0.8rem; }
.sheet-bar .fx { flex: 0 0 auto; padding: 0.45rem 0.7rem; color: var(--ink-soft); font-style: italic;
  border-right: 1px solid var(--border-hov); }
.sheet-bar .fx-text { flex: 1 1 auto; min-width: 0; padding: 0.45rem 0.7rem; color: #a9e2c4;
  white-space: nowrap; overflow-x: auto; }
.sheet-bar .fx-text.plain { color: var(--ink-mute); }
.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sheet-grid { border-collapse: collapse; font-size: 0.84rem; line-height: 1.35; min-width: 100%;
  font-variant-numeric: tabular-nums; }
table.sheet-grid th, table.sheet-grid td { border: 1px solid rgba(255,255,255,0.07); padding: 0.32rem 0.6rem;
  white-space: nowrap; text-align: left; }
table.sheet-grid thead th { background: rgba(255,255,255,0.035); color: var(--ink-soft); font-weight: 400;
  font-size: 0.72rem; text-align: center; }
table.sheet-grid tbody th { background: rgba(255,255,255,0.035); color: var(--ink-soft); font-weight: 400;
  font-size: 0.72rem; text-align: center; width: 2.4rem; }
table.sheet-grid td { color: var(--ink); }
table.sheet-grid td.n { text-align: right; }
table.sheet-grid tr.h td { font-weight: 700; color: #fff; }
table.sheet-grid tr.t td { font-weight: 700; color: #fff; border-top: 1px solid var(--border-hov); }
table.sheet-grid tr.more td { color: var(--ink-soft); text-align: center; }
table.sheet-grid td.anchor { box-shadow: inset 0 0 0 2px #4f9b73; }
.sheet-tabs { display: flex; gap: 0.25rem; padding: 0 0.5rem; border-top: 1px solid var(--border-hov);
  font-size: 0.75rem; color: var(--ink-soft); }
.sheet-tabs span { padding: 0.3rem 0.8rem; }
.sheet-tabs span.on { color: var(--ink); background: rgba(255,255,255,0.05); border-bottom: 2px solid #4f9b73; }
.sheet-cap { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 1.6rem; }
.sheet-cap strong { color: var(--ink-mute); font-weight: 700; }

/* "Example on sample data" tag above each result. */
.ex-tag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #a9e2c4; border: 1px solid rgba(169,226,196,0.35); border-radius: 999px; padding: 0.1rem 0.55rem;
  margin: 0.4rem 0 0; }

.answer-short { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }

/* Related questions list. */
ul.related { list-style: none; margin: 0 0 1.5rem; }
ul.related li { margin: 0 0 0.55rem; padding-left: 1.1rem; position: relative; }
ul.related li::before { content: '\2192'; position: absolute; left: 0; color: var(--ink-soft); }

/* Index page groups. */
.cb-group { margin-top: 2.6rem; }
.cb-group .hub-grid { margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cb-group .post-card h2 { font-size: 1.12rem; line-height: 1.35; }
.data-list li code { white-space: nowrap; }

@media (max-width: 640px) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
  table.sheet-grid { font-size: 0.78rem; }
  .wrap pre { font-size: 0.78rem; }
}

/* Formulas must read exactly as typed: no ">=" to "≥" ligatures from the mono font. */
.wrap code, .wrap pre code, .sheet-bar, table.sheet-grid { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* On a phone, let a long =QUIRIZ question wrap instead of hiding behind a scrollbar. */
@media (max-width: 640px) {
  .wrap pre.ask code { white-space: pre-wrap; overflow-wrap: anywhere; }
}