/* Page layout around Modal's design system (/static/ds/components.css).
   Colours, type and spacing come from the design system tokens only. RTL first, logical properties. */

.mi-paint { position: absolute; width: 0; height: 0; overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: inherit; }
a.mi-btn { text-decoration: none; }
.link { color: var(--gold-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }
.lead { font-size: 17px; line-height: 28px; color: var(--ink); margin: var(--space-3) 0; }
.small { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
h1, h2, h3, p { margin-block: 0; }

/* ── top bar ── */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) var(--space-5); }
.top-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.top-brand__logo { width: 48px; height: 48px; object-fit: contain; }
.top-brand__name { font-family: var(--font-modern); font-weight: 600; font-size: 18px; line-height: 26px; color: var(--ink); }
.top-nav { display: flex; gap: var(--space-5); margin-inline-start: var(--space-4); }
.top-nav__link { position: relative; font-family: var(--font-hand); font-size: 19px; color: var(--ink-muted); text-decoration: none; padding-bottom: 6px; }
.top-nav__link:hover, .top-nav__link.is-active { color: var(--ink); }
.top-nav__link.is-active::after { content: ""; position: absolute; inset-inline: -8px; bottom: -2px; height: 10px; background: var(--gold-ink);
  -webkit-mask: var(--mi-tex-underline1) 0 0 / 100% 100% no-repeat; mask: var(--mi-tex-underline1) 0 0 / 100% 100% no-repeat; }
.top-session { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.top-session__user { font-family: var(--font-latin); font-size: 13px; color: var(--ink-muted); }

/* ── the screen ── */
.screen { max-width: var(--reading-max); margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }
.screen--wide { max-width: var(--content-max); }
.screen-head { display: flex; flex-direction: column; gap: 2px; }
.screen-note { font-family: var(--font-hand); font-size: 17px; line-height: 22px; color: var(--ink-muted); margin-top: 4px; }
.section-title { font-family: var(--font-modern); font-size: 22px; line-height: 30px; font-weight: 600; color: var(--ink); margin-top: var(--space-5); }

.mi-sheet.sheet-narrow { padding: var(--space-6) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.sheet-actions { margin-top: var(--space-3); }
.sheet-form { padding: var(--space-6); }

/* ── Modal home ── */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-5) var(--space-6); }
.hero__mark { width: 160px; height: 160px; object-fit: contain; margin-bottom: var(--space-4); }
.hero__title { font-family: var(--font-modern); font-size: 40px; line-height: 48px; font-weight: 300; color: var(--ink); max-width: 18em; }
.hero__note { font-family: var(--font-hand); font-size: 22px; line-height: 28px; color: var(--ink-muted); }
.hero__actions { margin-top: var(--space-5); }

/* ── sign-in ── */
.login__providers { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-block: var(--space-4); }

/* ── tiles, cards, stats ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.tile__value { font-family: var(--font-latin); font-size: 28px; line-height: 36px; margin-top: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-5); }
.card-wide { width: 100%; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4) var(--space-5); margin: 0 0 var(--space-3); }
.stats__item dt { font-family: var(--font-hand); font-size: 17px; line-height: 22px; color: var(--ink-muted); }
.stats__item dd { margin: 2px 0 0; font-family: var(--font-latin); font-size: 24px; line-height: 32px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats__item--text dd { font-size: 15px; line-height: 24px; padding-top: 4px; }
.toolbar { display: flex; justify-content: flex-end; }

/* ── forms ── */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-top: var(--space-5); }
.form--inline .mi-field { flex: 1 1 220px; }
.form__actions { display: flex; gap: var(--space-3); }
.mi-table form { margin: 0; }
.choices { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.choices legend { margin-bottom: var(--space-2); }
.mi-btn[aria-pressed="true"] { --paint: var(--primary); color: var(--on-primary); }
.file { font: inherit; font-size: 14px; color: var(--ink-muted); }

/* the field pages' scripts set .notice.ok / .notice.alert on their result line */
.notice { position: relative; isolation: isolate; padding: 14px 18px; font-size: 15px; line-height: 24px; color: var(--ink); }
.notice::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px 38px 18px 30px / 30px 18px 34px 22px; background: var(--blue-soft); filter: url(#mi-wash-3); }
.notice.ok::before { background: var(--success-soft); }
.notice.alert::before { background: var(--danger-soft); }
.notice[hidden] { display: none; }

/* ── footer ── */
.foot { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5); display: flex; justify-content: center; }
.foot__powered { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-latin); font-size: 12px; color: var(--ink-muted); }
.foot__powered img { width: 28px; height: 28px; object-fit: contain; }
.foot__type { font-family: var(--font-latin); font-weight: 500; letter-spacing: .16em; font-size: 13px; color: var(--ink); }
.foot__type span { color: var(--gold-ink); }

@media (max-width: 640px) {
  .top { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .top-nav { margin-inline-start: 0; order: 3; width: 100%; }
  .screen { padding: var(--space-4) var(--space-4) var(--space-7); }
  .mi-sheet.sheet-narrow, .sheet-form { padding: var(--space-5) var(--space-4); }
  .hero__title { font-size: 32px; line-height: 40px; }
}