/* الدخول and لوحة اليوم (sheikh/today.js). Number cards, lists and rows come from sheikh.css; cards and tags from
   interview.css. */

/* ش١ الدخول (the navy design canvas): without the menu, the brand in navy on the start side and the card on the other;
   on a phone the brand on top. The real side's card keeps its own logo and wordmark, hidden here (the brand carries them). */
body:has(.td-screen) .i-page { padding: 0; }
.td-screen { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.td-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: 64px 72px; background: var(--grad); color: var(--on-accent); }
.td-brand::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; top: -220px; inset-inline-end: -260px; background: radial-gradient(closest-side, rgba(255, 255, 255, .1), transparent); pointer-events: none; }
.td-brand::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; bottom: -260px; inset-inline-start: -180px; border: 1px solid rgba(233, 211, 160, .22);
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .025), 0 0 0 140px rgba(255, 255, 255, .02); pointer-events: none; }
.td-brand .logo { border-radius: 24px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 22px 40px -18px rgba(0, 0, 0, .55); }
.td-dots { position: absolute; top: 48px; inset-inline-end: 56px; width: 70px; height: 46px; opacity: .28; background-image: radial-gradient(#fff 1.3px, transparent 1.6px); background-size: 8px 8px; }
.td-brand-word { margin: 0; font-size: 64px; font-weight: 800; line-height: 1.05; }
.td-rule { width: 56px; height: 3px; border-radius: 3px; background: #E9C77D; }
.td-tagline { margin: 0; max-width: 440px; font-size: var(--text-xl); font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, .84); text-wrap: balance; }
.td-foot { position: absolute; bottom: 36px; inset-inline-start: 72px; margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 500; color: rgba(255, 255, 255, .7); }
.td-login { display: grid; place-items: center; padding: 48px 32px; }
.td-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; padding: 36px 34px 28px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); }
.td-card > .logo, .td-card > .td-word { display: none; }
.td-card h1 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.15; }
.td-sub { margin: 6px 0 0; font-size: var(--text-base); color: var(--ink-2); }
.td-card .field { gap: 7px; }
.td-card .field > label, .td-label-row label { font-size: var(--text-md); font-weight: 700; color: var(--ink); }
.td-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.td-card .field input { height: 50px; padding: 0 14px; background: var(--fill); text-align: left; }
.td-card .field input:focus { background: var(--surface); }
.td-card .field input::placeholder { color: #8E96AE; }
.td-card .btn.primary { height: 52px; margin-top: 4px; font-size: var(--text-input); font-weight: 700; }
.td-forgot { min-height: 28px; padding: 0; font-size: var(--text-md); font-weight: 700; }
.td-card > .td-forgot { align-self: center; }
.td-err, .td-sent { margin: 0; }
.td-invite { display: flex; align-items: flex-start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--text-sm); text-wrap: pretty; }
.td-invite svg { flex: none; margin-top: 2px; color: var(--brand); }
@media (max-width: 760px) {
  .td-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .td-brand { gap: 14px; padding: 36px 24px 32px; }
  .td-brand .logo { width: 60px; height: 60px; border-radius: 17px; }
  .td-brand-word { font-size: 44px; }
  .td-tagline { font-size: var(--text-lg); }
  .td-foot { display: none; }
  .td-login { align-items: start; padding: 20px 16px 32px; }
  .td-card { padding: 26px 20px 22px; }
}

/* ش٢ لوحة اليوم. The look Yahya picked on 2026-10-27 (DASHBOARD.md §2 Look): direction A's hero, day line and cards
   between; direction C's week, top readers and khatma. Teal is the mark's leaf (base.css --teal, --teal-ink for text). */
.td-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; border: 1px solid var(--gold-edge); border-radius: var(--radius-lg); background: var(--amber-bg); color: var(--amber); }
.td-alert-ic { flex: none; display: grid; place-items: center; }
.td-alert-t { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.6; }
.td-alert-t b { font-size: var(--text-input); font-weight: 600; }
.td-alert-t span { font-size: var(--text-md); color: var(--ink); }
.td-alert .btn { flex: none; }

.td-grid { display: grid; gap: 18px; align-items: start; }
.td-main, .td-side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1100px) { .td-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
.page-actions .btn.sm { height: 36px; }

/* a card's head: its icon on a tinted tile (navy; gold for the Quran and the reports, teal for messages), the title, and
   how many: quiet beside it, a filled pill on what waits for him (as A) */
.td-grid .sec-head { flex-wrap: wrap; row-gap: 4px; }
.td-grid .sec-head h2 { font-weight: 800; }
.td-grid .sec-head > a { margin-inline-start: auto; }   /* the way to all of them stays at the end, wrapped or not */
.td-tile { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.td-gold .td-tile { background: var(--gold); color: var(--gold-ink); }
.td-teal .td-tile { background: var(--teal-soft); color: var(--teal-ink); }
.sec-head h2 .count { font-size: var(--text-base); font-weight: 500; color: var(--ink-3); }
.td-wait .sec-head h2 .count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); display: inline-grid; place-items: center;
  background: var(--brand); color: var(--on-accent); font-size: var(--text-md); font-weight: 800; }
.td-wait.td-gold .sec-head h2 .count { background: var(--gold-ink); }
.td-wait.td-teal .sec-head h2 .count { background: var(--teal-ink); }
.td-chev { flex: none; display: grid; color: #A3AAC0; }
.td-mini { margin: 0; font-size: var(--text-md); color: var(--ink-3); }
.td-grid .row .rt small { font-size: var(--text-md); line-height: 1.5; }
.td-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-nb { min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--teal-ink); color: var(--on-accent); font-size: var(--text-sm); font-weight: 700; display: inline-grid; place-items: center; }

/* the hero (A): navy with a faint khatam lattice and a teal glow; the mark, the date and «غياب»; the greeting and a gold
   rule; on glass the room open now (or the next session) with the one teal button. Focus shows white on the navy. */
.td-hero { position: relative; overflow: hidden; isolation: isolate; padding: 18px; border-radius: var(--radius-xl); color: var(--on-accent);
  background: radial-gradient(120% 80% at 0% 0%, rgba(58, 197, 191, .22), rgba(58, 197, 191, 0) 50%), linear-gradient(165deg, var(--navy-deep) 0%, #1B2B63 62%, #24387F 100%);
  box-shadow: 0 20px 36px -20px rgba(28, 35, 74, .7); }
.td-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 0L17 17M56 0L39 17M0 56L17 39M56 56L39 39M28 0V12.4M28 56V43.6M0 28H12.4M56 28H43.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px;
  -webkit-mask-image: linear-gradient(195deg, #000 0%, rgba(0, 0, 0, .5) 35%, transparent 70%); mask-image: linear-gradient(195deg, #000 0%, rgba(0, 0, 0, .5) 35%, transparent 70%); }
.td-hero :focus-visible { outline-color: var(--on-accent); }
.td-hero-top { display: flex; align-items: center; gap: 10px; }
/* the mark (brand/isnad-mark.svg) as a mask: its top 18% is the leaf (teal), the rest the chain (white) */
.td-hero-mark, .td-f-mark { flex: none; aspect-ratio: 2432 / 4752;
  -webkit-mask: url(../brand/isnad-mark.svg) center / 100% 100% no-repeat; mask: url(../brand/isnad-mark.svg) center / 100% 100% no-repeat; }
.td-hero-mark { width: 19px; background: linear-gradient(180deg, var(--teal) 0 18%, var(--on-accent) 18%); }
.td-hero-date { margin: 0; font-size: var(--text-md); font-weight: 500; color: #B3B9D0; }
.td-ghost { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: var(--on-accent); font-size: var(--text-md); font-weight: 500; text-decoration: none; }
.td-ghost:hover { background: rgba(255, 255, 255, .16); }
.td-hello { margin: 4px 0 0; font-size: 30px; font-weight: 800; line-height: 1.25; color: var(--on-accent); }
.td-hero-rule { display: block; width: 44px; height: 3px; margin: 10px 0 16px; border-radius: 3px; background: var(--gold-light); }
.td-hero:not(:has(.td-now)) .td-hero-rule { margin-bottom: 2px; }
.td-now { padding: 14px; border-radius: var(--radius-card); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.td-now-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.td-live { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: rgba(58, 197, 191, .14); color: #A3EDE8; font-size: var(--text-md); font-weight: 700; }
.td-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(58, 197, 191, .28); }
.td-live.is-next { background: rgba(255, 255, 255, .1); color: #DCE1EF; font-weight: 500; }
.td-live.is-next i { background: transparent; box-shadow: inset 0 0 0 2px #DCE1EF; }
.td-now-when { font-size: var(--text-md); color: #C9CEE0; }
.td-now-who { display: flex; align-items: center; gap: 14px; margin: 14px 0 16px; }
.td-now-who .small-avatar { width: 54px; height: 54px; box-shadow: 0 0 0 2px #232C5C, 0 0 0 4px var(--teal); }
.td-now-who > span { min-width: 0; }
.td-now-who b { display: block; font-size: 21px; font-weight: 800; line-height: 1.3; }
.td-now-who small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font-size: var(--text-md); color: #C9CEE0; }
.td-pos-d { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(233, 199, 125, .1);
  box-shadow: inset 0 0 0 1px rgba(233, 199, 125, .36); color: #F5DCA2; font-size: var(--text-md); font-weight: 700; }
.td-hero .btn.td-go { width: 100%; gap: 10px; border: 0; background: var(--teal); color: var(--navy-deep); font-size: var(--text-input); font-weight: 800;
  box-shadow: 0 12px 24px -14px rgba(58, 197, 191, .9); }
.td-hero .btn.td-go:hover { filter: brightness(1.06); }
.td-hero .btn.td-go[disabled] { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #C9CEE0; font-weight: 700; cursor: not-allowed; }
@media (min-width: 1100px) {
  .td-hero { padding: 22px 26px 24px; }
  .td-hello { font-size: 34px; }
  .td-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 16px 18px; }
  .td-now-top { grid-column: 1 / -1; }
  .td-now-who { margin: 14px 0 0; }
  .td-hero .btn.td-go { width: auto; min-width: 230px; margin-top: 14px; }
}

/* «جلسات اليوم» (A): the day as a line with a mark per state: amber called off, grey with a tick over, teal open, a navy
   ring next. The session in the hero and one that is over are a short line. */
.td-line { list-style: none; margin: 0; padding: 0; }
.td-line > li.td-row { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 0; padding-inline-start: 30px; border: 0; }
.td-row::before { content: ""; position: absolute; inset-inline-start: 7px; top: 0; bottom: 0; width: 2px; background: #E3E7F1; }
.td-row:first-child::before { top: 22px; }
.td-row:last-child::before { bottom: auto; height: 22px; }
.td-row:only-child::before { display: none; }
.td-row + .td-row::after { content: ""; position: absolute; top: 0; inset-inline: 30px 0; height: 1px; background: var(--divider); }
.td-mark { position: absolute; inset-inline-start: 1px; top: 15px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); box-shadow: inset 0 0 0 2px #C3CADB; color: var(--on-accent); }
.td-mark svg { stroke-width: 3; }
.is-off .td-mark { background: var(--amber-bg); box-shadow: inset 0 0 0 2px var(--gold-edge); }
.is-over .td-mark { background: #A9B0C2; box-shadow: none; }
.is-open .td-mark { background: var(--teal); box-shadow: 0 0 0 4px rgba(58, 197, 191, .25); }
.td-row.is-next .td-mark { background: var(--surface); box-shadow: inset 0 0 0 3.5px var(--brand); }
.td-rtop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 28px; }
.td-t { font-size: var(--text-input); font-weight: 800; }
.td-rtop small { font-size: var(--text-md); color: var(--ink-2); }
.td-end { margin-inline-start: auto; }
.td-endcell { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; }
.td-name { font-size: var(--text-input); font-weight: 700; color: var(--ink); text-decoration: none; }
.td-name:hover { color: var(--brand); }
.is-over .td-t, .is-over .td-name { font-weight: 500; color: var(--ink-2); }
.is-off .td-name { color: var(--ink-2); }
.td-who-line { display: flex; align-items: center; gap: 12px; }
.td-who-line .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.td-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.td-who-line .rt small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-md); color: var(--ink-2); }
.td-pos { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; background: var(--gold); color: var(--gold-ink); font-size: var(--text-md); font-weight: 700; }
.chip.td-now-chip { gap: 6px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 700; }
.chip.td-now-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-ink); }
.chip.td-next { background: var(--neutral-bg); color: var(--neutral); }
/* «اعتذار» and the room: side by side, the room's button the wider on a phone; at the end of the row on a laptop */
.td-room { display: flex; flex-direction: column; gap: 6px; }
.td-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-acts .btn { flex: 1 1 auto; height: 44px; }
.td-acts .btn.td-apo { flex: none; padding-inline: 18px; color: var(--ink-2); background: transparent; font-size: var(--text-md); }
.td-room .btn.td-apo:hover { border-color: var(--danger); color: var(--danger); }
.td-room .btn[disabled] { background: var(--neutral-bg); border-color: transparent; color: #6B7390; cursor: not-allowed; }
.td-room .tag.td-off { height: auto; min-height: 28px; padding-block: 4px; line-height: 1.5; }
@media (min-width: 761px) {
  .td-acts { justify-content: flex-end; }
  .td-acts .btn { flex: none; height: 40px; }
  .td-room { align-items: flex-end; }
}

/* «تعويضات تنتظرك»: a called-off session and the two ways to answer it; on a phone the buttons go under the name */
.td-mk-row { flex-wrap: wrap; padding-block: 12px; }
.td-mk-row .rt { flex: 1 1 180px; }
.td-mk-row .re { flex-wrap: wrap; }

/* the apology sheet (.overlay/.dialog/.dialog-actions from room.css) */
.td-dialog { max-width: 460px; }
.td-dialog strong { font-weight: 600; }
.td-dialog .dialog-actions { flex-wrap: wrap; }
.td-dialog .btn.td-danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.td-dialog .err { color: var(--danger); font-size: var(--text-sm); }
.td-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }

/* «طلابك» (A): the card's title, the number and its label, the bar, and the week's hours */
.kpi.td-cap-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; text-decoration: none; color: inherit; }
.kpi.td-cap-card:hover { box-shadow: var(--shadow-lift); }
.kpi.td-cap-card > .td-cap-head { display: flex; align-items: center; gap: 8px; }
.td-cap-head h2 { flex: 1; margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--ink); }
.kpi.td-cap-card > .td-cap-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--text-md); color: var(--ink-2); }
.kpi.td-cap-card .td-cap-n b { font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.kpi.td-cap-card .td-cap { display: block; height: 8px; margin: 2px 0 0; }
.kpi.td-cap-card .td-sub { margin: 0; font-size: var(--text-md); color: var(--ink-2); }

/* «أداؤك هذا الأسبوع» (C's bento): «آية سمعتها» the big teal tile with the mark; «جلسة» navy and «متوسط النتائج» gold;
   «تقرير ينتظر اعتمادك» a gold row that opens the reports. The DOM order stays sessions, ayat, average, waiting. */
.td-figs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "a b" "a c" "d d"; gap: 10px; }
.td-fig { position: relative; overflow: hidden; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px; border-radius: 18px; color: inherit; text-decoration: none; }
.td-fig b { font-size: 30px; font-weight: 800; line-height: 1.1; }
.td-fig-l { font-size: var(--text-md); color: var(--ink-2); }
.td-f-ayat { grid-area: a; min-height: 190px; background: linear-gradient(165deg, var(--teal-ink) 0%, #075B57 100%); color: var(--on-accent); }
.td-f-ayat b { font-size: 52px; }
.td-f-ayat .td-fig-l { font-size: var(--text-base); color: #F0FAF9; }
.td-f-mark { position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; background: linear-gradient(180deg, #7DE0DA 0 18%, rgba(255, 255, 255, .22) 18%); }
.td-f-sessions { grid-area: b; background: var(--brand-soft); }
.td-f-sessions b { color: var(--brand); }
.td-f-avg { grid-area: c; background: var(--gold); }
.td-f-avg b { color: var(--gold-ink); }
.td-f-wait { grid-area: d; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; background: var(--amber-bg); box-shadow: inset 0 0 0 1px var(--gold-edge);
  transition: background-color 150ms ease-out; }
.td-f-wait:hover { background: #F8EACC; }
.td-f-wait b { color: var(--amber); }
.td-f-wait .td-fig-l { flex: 1; font-size: var(--text-base); font-weight: 500; color: var(--ink); }
@media (min-width: 761px) {
  .td-figs { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b c" "a d d"; }
  .td-f-ayat { min-height: 170px; }
}

/* «الأكثر قراءةً هذا الأسبوع» (C): the three side by side, the first in gold; a medal under each photo */
.td-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.td-podium a { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 18px; background: var(--fill);
  text-align: center; text-decoration: none; color: inherit; transition: background-color 150ms ease-out; }
.td-podium a:hover b { color: var(--brand); }
.td-podium li:first-child a { background: linear-gradient(180deg, #FBF1DA, #FDF8EC); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.td-podium .small-avatar { width: 48px; height: 48px; }
.td-podium li:first-child .small-avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-light); }
.td-medal { position: relative; z-index: 1; width: 24px; height: 24px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--surface); background: #F3E6D6; color: #7A4E1E; font-size: var(--text-sm); font-weight: 800; }
.td-podium li:nth-child(1) .td-medal { background: linear-gradient(145deg, #F0D697, #D2A44B); color: var(--navy-deep); }
.td-podium li:nth-child(2) .td-medal { background: #E6E9F1; color: var(--neutral); }
.td-podium b { font-size: var(--text-md); font-weight: 700; line-height: 1.35; text-wrap: balance; overflow-wrap: anywhere; }
.td-podium small { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.4; }

/* «الأقرب إلى الختم» (C): a teal ring with the percent in it, the line, and «المتوقّع للختم» in gold */
.td-khatm .rt { gap: 3px; }
.td-ring { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; }
.td-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.td-ring circle { fill: none; stroke-width: 3.2; }
.td-ring-track { stroke: #E2F4F3; }
.td-ring-fill { stroke: var(--teal-ink); stroke-linecap: round; }
.td-ring em { position: relative; font-style: normal; font-size: var(--text-md); font-weight: 800; color: var(--teal-ink); }
.td-khatm .rt small.td-expect { color: var(--gold-ink); font-weight: 700; }

/* «حضوري» beside an in-person student's name, and his «حضر» on the hero (sheikh/attend.js) */
.chip.td-inperson { background: var(--brand-soft); color: var(--brand); }
.td-hero .at-done { width: 100%; justify-content: center; margin-top: 14px; }
.td-hero .at-done .btn { color: #E6E9F2; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.td-hero .at-done .at-to { color: #E6E9F2; }