/* Shared component styles. Utilities come from UnoCSS (uno.css); these classes are used across pages
   and keep the templates readable. Colours follow the home page (slate, blue). The page follows the system's colour
   scheme: colours that the site frame has a token for come from the token (dark with data-la-theme="auto" on <html>);
   the others (green chip, pressed button, steps, thanks) have their own dark values at the end of this file. */
:root { color-scheme: light dark; }

.panel { background: var(--la-bg, #fff); border: 1px solid var(--la-border, #e2e8f0); border-radius: .75rem; padding: 1.25rem; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.panel-title { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 700; color: var(--la-text, #0f172a); }
.panel-thanks { border-color: #fecdd3; background: #fff1f2; }
.panel-main { border: 2px solid #2563eb; }

.chip { padding: .125rem .625rem; border-radius: 999px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.check { padding-left: 1.75rem; position: relative; }
.check::before { content: "✓"; position: absolute; left: 0; top: -.05em; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: #d1fae5; color: #065f46; font-weight: 700; font-size: .8rem; display: grid; place-items: center; }

.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: .5rem; font: inherit; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; border: 1px solid transparent; min-height: 44px; }
.btn:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.btn-lg { padding: .75rem 1.25rem; font-size: 1.0625rem; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: var(--la-bg, #fff); color: var(--la-text, #1e293b); border-color: var(--la-line, #cbd5e1); }
.btn-secondary:hover { border-color: var(--la-control, #64748b); }
.btn-light { background: #fff; color: #1e3a8a; }
.btn[aria-pressed="true"], .btn:disabled { cursor: default; }
.btn[aria-pressed="true"] { background: #dcfce7; color: #14532d; border-color: #86efac; }
.btn:disabled:not([aria-pressed="true"]) { opacity: .5; }

.field { font: inherit; padding: .55rem .75rem; border-radius: .5rem; border: 1px solid var(--la-line, #cbd5e1); background: var(--la-bg, #fff); color: var(--la-text, #0f172a); min-height: 44px; }
.field:focus { outline: 3px solid #93c5fd; outline-offset: 1px; border-color: #2563eb; }
textarea.field { resize: vertical; font-size: .875rem; }
.field-dark { background: #1e293b; border-color: #334155; color: #fff; }
.field-dark::placeholder { color: #94a3b8; }

.qr svg { display: block; width: 7.5rem; height: 7.5rem; }

.app-card:hover { border-color: #93c5fd; }

.reminder { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 30; max-width: 36rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .75rem 1rem; border-radius: .75rem; background: #0f172a; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.reminder[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The listing as steps (enter.njk): vertical on a phone, a row from 48rem; the colour says who acts. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: flow; }
.flow-step { position: relative; padding-left: 2.75rem; counter-increment: flow; overflow-wrap: anywhere; --flow: #64748b; --flow-bg: #f1f5f9; --flow-fg: #334155; }
.flow-step[data-who="you"] { --flow: #2563eb; --flow-bg: #dbeafe; --flow-fg: #1e3a8a; }
.flow-step[data-who="team"] { --flow: #059669; --flow-bg: #d1fae5; --flow-fg: #065f46; }
.flow-step::before { content: counter(flow); position: absolute; left: 0; top: 0; z-index: 1; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; font-weight: 700; background: var(--la-bg, #fff); color: var(--flow); border: 2px solid var(--flow); }
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: -1.25rem; width: 2px; background: var(--la-line, #cbd5e1); }
.flow-who { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; background: var(--flow-bg); color: var(--flow-fg); }
@media (min-width: 48rem) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .flow-step { padding-left: 0; padding-top: 2.75rem; }
  .flow-step:not(:last-child)::after { left: 2rem; right: -1rem; top: calc(1rem - 1px); bottom: auto; width: auto; height: 2px; }
}

/* The colours that have no token of the frame: their dark values. */
@media (prefers-color-scheme: dark) {
  .panel-thanks { border-color: #9f1239; background: #2a0f1a; }
  .chip { background: #052e1a; color: #86efac; border-color: #166534; }
  .check::before { background: #14532d; color: #bbf7d0; }
  .btn[aria-pressed="true"] { background: #14532d; color: #bbf7d0; border-color: #166534; }
  .reminder { border: 1px solid #334155; }
  .flow-step { --flow: #94a3b8; --flow-bg: #1e293b; --flow-fg: #e2e8f0; }
  .flow-step[data-who="you"] { --flow: #60a5fa; --flow-bg: #172554; --flow-fg: #bfdbfe; }
  .flow-step[data-who="team"] { --flow: #34d399; --flow-bg: #064e3b; --flow-fg: #a7f3d0; }
}