/* Studio component: the prayer times sheet (DRAFT v0.2, inbox #3). Reads tokens only.
   Rows: .row (.past | .next | .minor), cells .n .adhan .iqama. A .day divider names tomorrow. Gold text uses gold-ink (4.9:1+). */

.times {
  display: grid; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-sheet); box-shadow: var(--elevation-sheet);
}
.times .head, .times .row { display: grid; grid-template-columns: 1fr 72px 82px; align-items: center; column-gap: 8px; padding-inline: 16px; }
.times .head { min-height: 40px; font: 600 12px/1 var(--font-family-body); letter-spacing: var(--font-tracking-caps, .08em); text-transform: uppercase; color: var(--color-gold-ink); }
.times .head span:nth-child(n+2) { text-align: end; }
.times .row { min-height: 56px; border-radius: var(--radius-row); color: var(--color-fg); border-inline-start: 3px solid transparent; }
.times .row { position: relative; }
.times .row + .row:not(.next)::before { content: ""; position: absolute; inset-inline: 16px; top: 0; height: 1px; background: var(--color-line); }
.times .row .n { font: 500 17px/1.2 var(--font-family-body); }
.times .row .adhan, .times .row .iqama { text-align: end; font: 600 18px/1 var(--font-family-name); font-variant-numeric: tabular-nums; }
.times .row .iqama { font-size: 16px; color: var(--color-accent); }
.times .row .iqama small { display: block; margin-bottom: 3px; font: 600 11px/1 var(--font-family-body); letter-spacing: .02em; color: var(--color-gold-ink); }
.times .row.minor { min-height: 44px; }
.times .row.minor .n { font-size: 15px; font-weight: 400; color: var(--color-muted); }
.times .row.minor .adhan { font-size: 16px; color: var(--color-muted); }
.times .row.past, .times .row.past .adhan, .times .row.past .iqama, .times .row.past .iqama small { color: var(--color-muted); }
.times .row.next { background: var(--color-raise); border-inline-start-color: var(--color-accent); }
.times .row.next .n { font-weight: 600; color: var(--color-accent); }
.times .day { padding: 16px 16px 6px; font: 600 12px/1 var(--font-family-body); letter-spacing: var(--font-tracking-caps, .08em); text-transform: uppercase; color: var(--color-muted); }

.notice { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-row); background: var(--color-notice-fill); color: var(--color-notice-ink); font: 400 14px/1.4 var(--font-family-body); }
.notice .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-grid; place-items: center; min-height: var(--size-tap); padding: 0 16px; border-radius: var(--radius-chip); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-accent); font: 600 14px/1 var(--font-family-body); text-decoration: none; }