/* Angel — palette and the few page rules the kit's references ask for.
   Palette, pairing and radius dealt by tasteskill (start.mjs): blue-black-cornflower, host, soft. */

:root {
  --p-bg: #0a0d14; --p-surface: #131824; --p-ink: #e9edf3; --p-muted: #8891a1;
  --p-accent: #5ab9fc; --p-accent-ink: #0a0d14; --p-action: #5ab9fc; --p-action-ink: #0a0d14;
  --p-inv-bg: #e9edf3; --p-inv-surface: #d7dbe1; --p-inv-ink: #0a0d14; --p-inv-muted: #54575f;
  --p-inv-accent: #0a0d14; --p-inv-accent-ink: #e9edf3;
  --p-inv-action: #0a0d14; --p-inv-action-ink: #e9edf3;
  --font-display: "Host Grotesk", system-ui, sans-serif;
  --font-text: "Host Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.04em;
  --ly-scale: 1;
}

/* the hero's art frame: the lit sky ground, one soft light, no grain (the page's own ground stays near-black) */
.hero__art {
  background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 80%, white), transparent 70%),
    radial-gradient(60% 50% at 90% 100%, color-mix(in oklab, var(--ground-bg) 80%, var(--ground-accent)), transparent 70%),
    var(--ground-bg);
}
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 280px; } }

/* the queue's rows without a time column, its content keeping --ly-cut-room clear at the right so the
   frame cuts empty margin after the status chip */
.ly-piece--main .d-row { grid-template-columns: minmax(0, 1fr) 92px 92px; }
.ly-piece--main .d-main { padding-right: var(--ly-cut-room); }
.ly-piece--main .d-thumb { display: grid; place-items: center; font: 500 13px/1 var(--font-text); color: #4d5257; background: #e9edf1; }
@media (max-width: 639px) {
  .ly-piece--main .d-row { grid-template-columns: minmax(0, 1fr) 92px; padding-block: 5px; }
  .ly-piece--main .d-row .num { display: none; }
  /* the frame keeps its height on a phone: the queue shows two rows, neither of them cut */
  .ly-piece--main .d-rows .d-row:nth-of-type(n + 3) { display: none; }
}

/* the small card over the window's lower-left */
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); text-align: left; }
.d-note__line:first-of-type { border-top: 0; }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e7f4ec; color: #17673f; font-style: normal; font-size: 12px; font-weight: 500; }
.d-note__line i.warn { background: #fdf0dc; color: #8a5300; }
.d-note__line b { font-weight: 500; color: #16181a; }

/* app-frame (references/sections-library.md, app-frame): one window, the queue beside the open check log */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
/* the list pane carries no sidebar of its own: its rows take the whole pane */
.app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* the four checks: one panel height for the group, a shorter one when the phone stacks the tiles */
#checks .panel { --p-h: 336px; }
@media (max-width: 640px) { #checks .panel { --p-h: 140px; } }

/* the statement moment's section keeps a whole screen on the tablet and holds its own rows under the line */
#questions { --g-screen: 100svh; align-content: center; }
/* the five answers take the screen they are given: the list spreads, no empty band before the footer */
@media (min-width: 640px) {
  #questions .faq { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100svh - 172px); }
  #questions .faq__item { padding-block: var(--s-5); }
  #questions .faq__item:last-child { border-bottom: 0; }
}
.faq-ask { margin-top: var(--s-5); }
@media (max-width: 639px) {
  /* the phone shows the hero's action, not the bar's (copy.md rule 5): the sheet keeps its own copy */
  .nav:not(.is-open) .nav__actions { display: none; }
  .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: auto; }
  /* the member view plus five open answers need two phone screens */
  #questions { --hm: 2; align-content: center; }
  #questions .faq__item { padding-block: var(--s-4); }
  .footer.closing { padding-top: 48px; padding-bottom: 48px; }
  .footer.closing > .wrap { row-gap: var(--s-4); }
  /* on a phone the close takes the height its words need, the links follow it (no stretched row) */
  .footer--statement .closing__cta { flex: 0 0 auto; }
  .footer--statement .closing__links { align-self: start; }
  .faq-ask { margin-top: var(--s-4); }
  .faq-ask .link { display: flex; width: 100%; }
  /* the answers take the two screens they are given, so the section ends on the footer, not on air */
  #questions .faq { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(200svh - 662px); }
  .footer--statement .closing__cta { gap: var(--s-4); }
  .footer--statement .closing__links { gap: 12px; }
  .footer--statement .closing__links > .grid { row-gap: 8px; }
  .footer--statement .footer__col h3 { margin-bottom: 4px; }
  .footer--statement .footer__lede { margin-bottom: 0; }
  .footer--statement .stack-4 { gap: 8px; }
  .footer--statement .cta-type { padding-bottom: var(--s-7); margin-bottom: var(--s-7); }
  .footer__legal { margin-top: 0; }
}
#setup .setup__sub { margin-top: var(--s-6); max-width: 52ch; font-size: var(--t-lead); line-height: 1.5; color: color-mix(in oklab, var(--ink) 78%, var(--p-bg)); }
#setup .setup-rows { margin-top: var(--s-7); max-width: 760px; }
#setup .setup-rows li { min-height: 56px; align-items: center; }
#setup .setup-rows .rows__name { font-weight: 500; }
#setup .setup-rows .rows__value { text-align: right; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 639px) {
  #questions { --g-screen: 100lvh; }
  #setup .setup-rows { margin-top: var(--s-6); }
  #setup .setup-rows li { min-height: 64px; align-items: start; padding-block: var(--s-3); }
  #setup .setup-rows .rows__value { max-width: 54%; }
}
@media (min-width: 640px) and (max-width: 1023px) { #setup .mo-lt__type { font-size: clamp(72px, 15vw, 160px); } }

/* the closing part of the footer is told apart by air, not by a rule */
.footer--statement .cta-type { border-bottom: 0; }

/* the FAQ's member view: the message a joining member actually sees */
.member-panel { margin-top: var(--s-6); max-width: 400px; --p-h: 264px; }
.member-panel .stage { padding: 0; }
.member-panel .ui-chat { width: 100%; border: 0; box-shadow: none; }
.member-panel .ui-chat__ph { color: color-mix(in oklab, var(--ink) 68%, var(--p-bg)); }
/* the footer's action is the page's action: one look for "Add Angel to Discord" */
.footer--statement { --action: #5ab9fc; --action-ink: #0a0d14; }
@media (max-width: 639px) {
  .member-panel { --p-h: 214px; }
  .member-panel .ui-chat__day { display: none; }
}

/* the tablet stacks the four checks: let each row's panels take the height its screen leaves */
@media (min-width: 640px) and (max-width: 1023px) {
  #checks .group > .grid, #checks > .wrap > .grid { flex: 1 1 auto; align-content: stretch; }
  #checks .card { height: 100%; }
  #checks .card > .panel { flex: 1 1 auto; }
}