/*
 * Sign-up and the console
 * (resources/views/central). The phone app's tokens (app/src/css/app.scss, docs/design/system): one action
 * colour, status tones that always come with a word, 44px tap targets, fields at 16px. Light and dark
 * follow the phone's setting. Sofia Sans (latin, SIL Open Font License) as in the app; Chinese falls back
 * to the phone's own fonts.
 */
@font-face {
  font-family: 'Sofia Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 1 1000;
  src: url(sofia-sans.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --ez-page: #fbf9ff;
  --ez-surface: #f2effa;
  --ez-surface-high: #e8e4f5;
  --ez-line: #cdc7de;
  --ez-outline: #77728a;
  --ez-ink: #1c1a24;
  --ez-ink-muted: #4b4759;
  --ez-primary: #4c43c0;
  --ez-on-primary: #ffffff;
  --ez-primary-soft: #e3dfff;
  --ez-on-primary-soft: #211a78;
  --ez-in: #17733a;
  --ez-in-soft: #d9f2e0;
  --ez-low: #8c4900;
  --ez-low-soft: #fbe7cc;
  --ez-red: #b3261e;
  --ez-red-soft: #f9dedc;
  --ez-red-solid: #b3261e;
  --ez-on-solid: #ffffff;
  --ez-r-sm: 8px;
  --ez-r-md: 16px;
  --ez-r-lg: 24px;
  --ez-tap: 44px;
  --ez-body: 'Sofia Sans Variable', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ez-page: #131218;
    --ez-surface: #1e1c26;
    --ez-surface-high: #2a2833;
    --ez-line: #48455a;
    --ez-outline: #8f8aa2;
    --ez-ink: #e7e3f0;
    --ez-ink-muted: #c9c4d8;
    --ez-primary: #c4beff;
    --ez-on-primary: #241b88;
    --ez-primary-soft: #39319f;
    --ez-on-primary-soft: #e5e1ff;
    --ez-in: #7fe09c;
    --ez-in-soft: #103a20;
    --ez-low: #ffbb63;
    --ez-low-soft: #3e2a0e;
    --ez-red: #ffb4ab;
    --ez-red-soft: #561814;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ez-page);
  color: var(--ez-ink);
  font-family: var(--ez-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ez-primary); font-weight: 650; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--ez-primary); outline-offset: 2px; }

.page { max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; }
.page.wide { max-width: 760px; }
.top { display: flex; align-items: center; gap: 10px; min-height: var(--ez-tap); margin-bottom: 8px; }
.mark { width: 36px; height: 36px; flex: none; color: var(--ez-primary); }
.mark .tick { stroke: var(--ez-on-primary); }
.brand { font-weight: 800; font-size: 17px; margin-right: auto; }
.langs { display: flex; gap: 2px; }
.langs a, .langs span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ez-tap); min-height: var(--ez-tap); padding: 0 8px; border-radius: var(--ez-r-md); text-decoration: none; font-size: 14px; }
.langs span { background: var(--ez-primary-soft); color: var(--ez-on-primary-soft); font-weight: 750; }

h1 { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 12px 0 8px; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 800; line-height: 1.25; margin: 26px 2px 10px; }
h3 { font-size: 16px; font-weight: 800; margin: 18px 0 6px; }
p { margin: 0 0 10px; }
.lead { font-size: 16px; color: var(--ez-ink-muted); margin-bottom: 16px; }
.soft { color: var(--ez-ink-muted); }
.small { font-size: 13.5px; }

.card { background: var(--ez-surface); border-radius: var(--ez-r-lg); padding: 18px 16px; margin: 0 0 12px; }
.card > :last-child { margin-bottom: 0; }

/* Fields: the label above, the hint and any error under it */
.field { margin: 0 0 16px; }
.field label { display: block; font-weight: 700; margin: 0 0 6px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date], .field select, .field textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--ez-ink); background: var(--ez-page);
  border: 1px solid var(--ez-outline); border-radius: var(--ez-r-md);
}
.field textarea { min-height: 80px; resize: vertical; }
.field select { appearance: auto; }
.field .hint { font-size: 13.5px; color: var(--ez-ink-muted); margin-top: 5px; }
.field .error, .problem { color: var(--ez-red); font-weight: 700; font-size: 14px; margin-top: 6px; }
.field.bad input, .field.bad select { border-color: var(--ez-red); border-width: 2px; }
.check, .field label.check { display: flex; gap: 12px; align-items: flex-start; min-height: var(--ez-tap); padding: 6px 0; margin: 0; cursor: pointer; font-weight: 500; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--ez-primary); }
.show-pw { margin-top: 2px; }

/* Buttons: one main action per form, low on the page */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ez-tap); padding: 0 18px; border: 0; border-radius: var(--ez-r-md);
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  background: var(--ez-surface-high); color: var(--ez-ink);
}
.btn.main { width: 100%; min-height: 52px; font-size: 16px; background: var(--ez-primary); color: var(--ez-on-primary); }
.btn.tonal { background: var(--ez-primary-soft); color: var(--ez-on-primary-soft); }
.btn.danger { background: var(--ez-red-solid); color: var(--ez-on-solid); }
.btn.main.danger { background: var(--ez-red-solid); color: var(--ez-on-solid); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions { margin-top: 22px; }
.actions + p { margin-top: 10px; }
form.inline { display: inline; margin: 0; }

/* Status: a word on a soft tone, never colour alone */
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 750; white-space: nowrap; }
.pill.active { background: var(--ez-in-soft); color: var(--ez-in); }
.pill.suspended { background: var(--ez-red-soft); color: var(--ez-red); }
.pill.new { background: var(--ez-low-soft); color: var(--ez-low); }
.pill.plain { background: var(--ez-surface-high); color: var(--ez-ink-muted); }
.pills { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.notice { border-radius: var(--ez-r-md); padding: 12px 14px; margin: 0 0 14px; font-weight: 650; }
.notice.good { background: var(--ez-in-soft); color: var(--ez-in); }
.notice.bad { background: var(--ez-red-soft); color: var(--ez-red); }
.notice.info { background: var(--ez-primary-soft); color: var(--ez-on-primary-soft); }

/* The console's academies: one card each, tapped for its page */
.list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.list > li > a, .list > li > .item { display: block; background: var(--ez-surface); border-radius: 6px; padding: 12px 16px; min-height: 64px; color: var(--ez-ink); text-decoration: none; font-weight: 500; }
.list > li:first-child > * { border-top-left-radius: var(--ez-r-lg); border-top-right-radius: var(--ez-r-lg); }
.list > li:last-child > * { border-bottom-left-radius: var(--ez-r-lg); border-bottom-right-radius: var(--ez-r-lg); }
.item-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.item-name { font-weight: 750; font-size: 16px; overflow-wrap: anywhere; }
.item-meta { font-size: 13.5px; color: var(--ez-ink-muted); margin-top: 3px; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.facts div { font-size: 13px; color: var(--ez-ink-muted); }
.facts b { display: block; font-size: 17px; color: var(--ez-ink); font-weight: 800; }
dl.table { display: grid; grid-template-columns: minmax(7em, auto) 1fr; gap: 8px 14px; margin: 0; }
dl.table dt { color: var(--ez-ink-muted); font-weight: 650; }
dl.table dd { margin: 0; overflow-wrap: anywhere; }
.link-box { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: var(--ez-page); border: 1px solid var(--ez-outline); border-radius: var(--ez-r-md); padding: 12px; overflow-wrap: anywhere; user-select: all; margin: 8px 0; }
.log { font-size: 13.5px; }
.log li { padding: 8px 0; border-bottom: 1px solid var(--ez-line); list-style: none; }
.log { padding: 0; margin: 0; }
/* A direct academy's payments: the newest can be taken back */
.card > h3:first-of-type { margin-top: 0; }
.payments form.undo { margin-top: 8px; }
.payments a.tap { display: inline-flex; align-items: center; min-height: var(--ez-tap); }

/* Terms and the data processing agreement */
.doc h2 { margin-top: 22px; }
.doc ol, .doc ul { padding-left: 22px; margin: 0 0 10px; }
.doc li { margin-bottom: 6px; }

.foot { margin-top: 28px; font-size: 13.5px; color: var(--ez-ink-muted); }
.foot a { display: inline-flex; align-items: center; min-height: var(--ez-tap); margin-right: 14px; }
[hidden] { display: none !important; }