/* The real app (app.js): one firm's day, hours and invoices on each person's phone, in
   Pronto's own look, the same as the screens before it (entering, the terms) and the site:
   white cards on a light green-grey, green buttons, and lime only for what is on now and the
   part of the app one is in. The owner's four parts sit at the foot, where the thumb is; the
   person's initial at the top opens their profile (the terms, the privacy policy, help and
   the way out). Menus and questions rise from the foot; forms take the whole screen, which
   is what works with the keyboard. The system font, so it opens fast and feels like the phone. */
:root {
  --bg: #EDF1EE;
  --card: #fff;
  --ink: #121614;
  --text: #2B3530;
  --label: #4B5751;
  --muted: #59655F;
  --line: #D8E0DA;
  --line-soft: #E6ECE8;
  --green: #0B6B4C;
  --green-deep: #08513A;
  --green-bg: #E3F1EA;
  --lime: #D6F26A;
  --lime-bg: #F4F9E3;
  --lime-line: #DCE8B4;
  --due: #8A5300;
  --due-bg: #FFF1D6;
  --due-line: #F0D49A;
  --danger: #A3281D;
  --danger-line: #F1C6BE;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(11, 107, 76, 0.45); outline-offset: 2px; }
.app { max-width: 560px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
body.tabbed .app { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.app h1, .app h2, .app h3, .app p { margin: 0; }
.loading { padding: 64px 0; text-align: center; color: var(--muted); }

/* ---------- the top: the firm, the person's initial (their profile), where one is ---------- */
.app-head { padding: 0 0 18px; }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.firm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.me { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -3px; padding: 0; border: 0; border-radius: 50%; background: none; }
.me .av { width: 38px; height: 38px; font-size: 16px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line); }
.me:active .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--green); }
.app-head h1 { margin: 8px 0 2px; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.date { color: var(--muted); font-size: 15px; }
.net { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--due-line); border-radius: 14px; background: #FFF8E8; color: #6F5210; font-size: 14px; line-height: 1.4; }
.tip { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--lime-line); border-radius: 14px; background: var(--lime-bg); color: var(--text); font-size: 14px; }
.tip .link { margin-top: 6px; }

/* the owner's four parts, at the foot */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.tabs > div { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; margin: 0 auto; }
.tabs button { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 58px; padding: 2px 0; border: 0; border-radius: 14px; background: none; font-size: 12px; font-weight: 600; line-height: 1.1; color: var(--muted); }
.tabs .ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background 0.15s; }
.tabs svg { width: 22px; height: 22px; }
.tabs [aria-selected="true"] { color: var(--green-deep); font-weight: 700; }
.tabs [aria-selected="true"] .ico { background: var(--lime); }

/* ---------- pieces ---------- */
.app h3 { margin: 24px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.hint { margin-top: 8px; color: var(--muted); font-size: 13.5px; }
.hint a { color: var(--green); font-weight: 600; }
.lead { margin: 0 0 16px; color: var(--text); }
.av { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c, var(--lime)); color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1; }
.av.sm { width: 28px; height: 28px; font-size: 13px; }
.av.lg { width: 56px; height: 56px; font-size: 23px; }
.chip { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.chip.todo { background: var(--bg); color: var(--label); }
.chip.doing { background: var(--lime); color: var(--green-deep); }
.chip.done { background: var(--green-bg); color: var(--green-deep); }
.chip.due { background: var(--due-bg); color: var(--due); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border: 1.5px solid transparent; border-radius: 14px; font-weight: 700; font-size: 16px; line-height: 1.15; text-align: center; text-decoration: none; transition: background 0.15s; }
.btn.primary, .btn.finish { background: var(--green); color: #fff; }
.btn.primary:active, .btn.finish:active { background: var(--green-deep); }
.btn.ghost { background: var(--card); border-color: #CFDCD4; color: var(--green); }
.btn.ghost:active { background: var(--lime-bg); }
.btn.small { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; }
.btn.wide { width: 100%; }
.btn.danger, .btn.ghost.danger { background: var(--card); border-color: var(--danger-line); color: var(--danger); }
.btn:disabled { opacity: 0.6; cursor: default; }
.link { padding: 0; border: 0; background: none; color: var(--green); font-size: 14px; font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.row .btn { flex: 1 1 auto; }
/* A list of things in one card, one line each: the hours, the team, the clients, the invoices. */
.lines, .crew, .list, .people, .invoices, .pick { list-style: none; margin: 0; padding: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.lines li + li, .crew li + li, .list li + li, .people li + li, .invoices li + li, .pick li + li { border-top: 1px solid var(--line-soft); }

/* the job on now: the strongest card on the screen */
.now { margin: 0 0 16px; padding: 16px 16px 14px; background: var(--green-deep); color: #fff; border-radius: 20px; box-shadow: 0 16px 30px -20px rgba(8, 81, 58, 0.8); }
.now .kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.now .kicker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: live 1.6s ease-in-out infinite; }
.now strong { display: block; margin: 6px 0 2px; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.now .since { font-size: 14.5px; color: #BFD6CB; font-variant-numeric: tabular-nums; }
.now .btn { width: 100%; margin-top: 14px; background: var(--lime); color: var(--ink); }
.now .btn:active { background: #C4E255; }
.now.late { background: var(--card); color: var(--ink); border: 1.5px solid var(--danger-line); box-shadow: none; }
.now.late .kicker { color: var(--danger); }
.now.late .kicker::before { background: var(--danger); animation: none; }
.now.late .since { color: var(--muted); }
.now.late .btn { background: var(--green); color: #fff; }
@keyframes live { 50% { opacity: 0.35; } }

/* the day's clients */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.job { display: grid; gap: 3px; padding: 15px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.job-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.job strong { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.addr { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.addr a { color: var(--green); font-weight: 600; text-decoration: none; }
.note { margin-top: 8px; padding: 10px 12px; background: #FFF8E8; border: 1px solid var(--due-line); border-radius: 12px; color: #4A3A12; font-size: 14px; }
.job .note { background: var(--lime-bg); border-color: var(--lime-line); color: var(--text); }
.job .btn { margin-top: 12px; }
.job.done { background: rgba(255, 255, 255, 0.62); }
.foot { margin-top: 18px; color: var(--muted); font-size: 13.5px; }

/* hours, as lines that open to correct them */
.lines button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 0; background: none; text-align: left; }
.lines button:active, .list button:active, .invoices button:active, .pick button:active { background-color: var(--lime-bg); }
.lines .t { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.lines span.who { display: block; font-size: 13px; color: var(--muted); }
.lines .h { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines .h.on { color: var(--green); }
.day-head { margin: 16px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); }

/* the team right now */
.crew li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; }
.crew b { display: block; }
.crew div span { font-size: 13.5px; color: var(--muted); }

/* the month */
.month { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.month b { font-size: 16px; }
.month button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; font-size: 24px; line-height: 1; color: var(--green); }
.month button:active { background: var(--lime-bg); }
.month button:disabled { color: #B8C2BC; cursor: default; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { min-width: 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.tile b { display: block; overflow: hidden; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.tile span { display: block; font-size: 12.5px; line-height: 1.25; color: var(--muted); }
@media (max-width: 359px) { .tiles { grid-template-columns: 1fr; } }
.bars { list-style: none; margin: 0; padding: 14px; display: grid; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.bars li { display: grid; grid-template-columns: auto max(50px, var(--name, 0px)) 1fr auto; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.meter { height: 10px; overflow: hidden; background: var(--line-soft); border-radius: 6px; }
.meter i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tbl th, .tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; white-space: nowrap; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl th { text-align: left; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.tbl th span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
@media (max-width: 350px) { .tbl th, .tbl td { padding: 10px 7px; } }
.empty { padding: 18px 16px; background: rgba(255, 255, 255, 0.55); border: 1.5px dashed #C5D1C9; border-radius: 18px; color: var(--muted); }
.empty .btn { margin-top: 14px; }

/* invoices */
.invoices button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 0; background: none; text-align: left; }
.invoices b { display: block; font-size: 15.5px; overflow-wrap: anywhere; }
.invoices button > span > span { font-size: 13px; color: var(--muted); }
.amt { display: grid; justify-items: end; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px; border: 0; background: none; font-weight: 700; font-size: 15px; line-height: 1; color: var(--green); }
.back::before { content: ""; width: 8px; height: 8px; margin-right: 1px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); }
.paper { margin-top: 6px; padding: 16px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 12px 26px -18px rgba(16, 21, 19, 0.45); }
.paper header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.paper header b { display: block; font-size: 15px; }
.paper header span { display: block; color: var(--muted); }
.paper .meta { text-align: right; }
.paper .to { margin: 6px 0; overflow-wrap: anywhere; }
.paper .to span { display: block; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.paper table { width: 100%; margin: 10px 0 0; border-collapse: collapse; }
.paper th, .paper td { padding: 5px 3px; border-bottom: 1px solid var(--line-soft); text-align: right; font-variant-numeric: tabular-nums; }
.paper th { font-size: 11px; color: var(--muted); font-weight: 600; }
.paper th:first-child, .paper td:first-child { text-align: left; }
.paper dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 10px 0 0; }
.paper dt { text-align: right; color: var(--muted); }
.paper dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.paper .total { margin-top: 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.invoices + .month-wrap, .invoices + .hint + .month-wrap { margin-top: 22px; }
.inv-do { display: grid; gap: 10px; margin-top: 16px; }
.inv-do .row { margin-top: 0; }
.inv-do .hint { margin-top: 0; }
.inv-do .note { display: grid; gap: 8px; margin: 0; }
.inv-do .note .btn { justify-self: start; }
.inv-do .note span { font-size: 13px; color: #6F5210; }
.paid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 11px 12px; background: var(--due-bg); border: 1px solid var(--due-line); border-radius: 14px; }
.paid p { font-size: 14px; font-weight: 700; color: var(--due); }
.paid.yes { background: var(--green-bg); border-color: #BFDCCB; }
.paid.yes p { color: var(--green-deep); }

/* the firm: clients, people, prices, its details for the invoices (a line opens each) */
.list button, .pick button, .people button { width: 100%; display: grid; gap: 2px; padding: 13px 42px 13px 14px; border: 0; text-align: left; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 4.5l5.5 5.5-5.5 5.5' fill='none' stroke='%239AA59F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.list b, .pick b { font-size: 16px; overflow-wrap: anywhere; }
.list span, .pick span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.people button { display: flex; align-items: center; gap: 12px; }
.people button:active { background-color: var(--lime-bg); }
.people button div { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.people b { font-size: 16px; }
.people div span { font-size: 13px; color: var(--muted); }
/* the team's heading, with how many of the plan's places are taken; the plan full */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 0 8px; }
.app .sec-head h3 { margin: 0; }
.sec-head span { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.note.full { display: grid; gap: 10px; margin-top: 12px; }
.note.full .btn { justify-self: start; }

/* ---------- sheets: a form over the whole screen, or a menu or a question from the foot ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain; padding: max(10px, env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); background: var(--card); animation: enter 0.22s ease-out; }
.sheet > form, .sheet > .form { max-width: 520px; margin: 0 auto; }
.sheet form, .form { display: grid; gap: 14px; }
.sheet .back { justify-self: start; }
.sheet h2 { margin: 0 0 2px; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.sheet .hint { margin: 0; color: var(--muted); }
.sheet label, .form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--label); }
.sheet input, .sheet select, .sheet textarea { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-size: 17px; line-height: 1.3; color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.sheet input:focus, .sheet select:focus, .sheet textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(11, 107, 76, 0.13); }
.sheet input::placeholder, .sheet textarea::placeholder { color: #9AA59F; }
.sheet input::-webkit-date-and-time-value { text-align: left; }
.sheet select { -webkit-appearance: none; appearance: none; padding-right: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%230B6B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.sheet textarea { min-height: 84px; padding: 12px 14px; resize: vertical; }
.sheet .two { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8px; }
.sheet .err { margin: 0; padding: 11px 12px; border: 1px solid var(--danger-line); border-radius: 12px; background: #FDF1EF; color: #8F241A; font-size: 14px; font-weight: 600; line-height: 1.4; }
.sheet .err[hidden] { display: none; }
/* an email with a slip in it: what it probably is, a tap away */
.suggest { display: grid; gap: 3px; margin: 0; padding: 10px 12px; border: 1px solid var(--lime-line); border-radius: 12px; background: var(--lime-bg); color: var(--text); font-size: 13.5px; line-height: 1.4; }
.suggest[hidden] { display: none; }
.suggest button { padding: 0; border: 0; background: none; text-align: left; font-size: 15px; font-weight: 700; color: var(--green); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.gate .suggest { margin-top: 12px; }
.sheet .btn { width: 100%; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.days label { display: block; }
.days input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.days span { display: grid; place-items: center; min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; color: var(--muted); }
.days input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.days input:focus-visible + span { outline: 3px solid rgba(11, 107, 76, 0.45); outline-offset: 2px; }

/* the firm's details for its invoices, and how an invoice was paid */
.sheet .two.street { grid-template-columns: 1fr 80px; }
.sheet .two.town { grid-template-columns: 108px 1fr; }
.sheet label .hint { margin: 0; font-weight: 400; }
.sheet details summary { padding: 4px 0; font-size: 14.5px; font-weight: 700; color: var(--green); cursor: pointer; }
.sheet details > label { margin-top: 12px; }
.ways { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.ways legend { margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--label); }
.sheet .ways label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-size: 16px; color: var(--ink); cursor: pointer; }
.sheet .ways input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--green); }
.sheet .ways label:has(input:checked) { border-color: var(--green); background: var(--lime-bg); }

/* from the foot: the profile, a menu, a question */
.sheet.bottom { display: flex; flex-direction: column; justify-content: flex-end; padding: 0; overflow: hidden; background: rgba(18, 22, 20, 0.45); touch-action: none; animation: dim 0.2s ease-out; }
.sheet.bottom .panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100% - 40px); margin: 0 auto; padding: 28px 18px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px -14px rgba(16, 21, 19, 0.3); animation: rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet.bottom .panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line); }
.sheet .x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--label); }
.sheet .x svg { width: 18px; height: 18px; }
.sheet.bottom h2 { padding-right: 44px; font-size: 22px; }
.sheet.bottom .form { gap: 12px; }
.me-card { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; padding-right: 44px; }
.me-card div { display: grid; min-width: 0; }
.me-card b { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.me-card div span { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.me-card .role { margin-top: 2px; color: var(--green); font-weight: 600; }
.menu { display: grid; margin: 0 0 10px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.menu > * + * { border-top: 1px solid var(--line-soft); }
.menu a, .menu button { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border: 0; background: none; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; text-decoration: none; }
.menu a:active, .menu button:active { background: var(--lime-bg); }
.menu svg { flex: none; width: 21px; height: 21px; color: var(--label); }
.menu span { flex: 1; min-width: 0; }
.menu svg.ext { width: 17px; height: 17px; color: #9AA59F; }
.menu .leave, .menu .leave svg { color: var(--danger); }
.sheet .made { margin: 16px 0 0; text-align: center; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise { from { opacity: 0.5; transform: translateY(48px); } }
@keyframes dim { from { background: rgba(18, 22, 20, 0); } }

/* what was just done, at the foot, over the four parts */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: 9px; width: max-content; max-width: min(calc(100vw - 32px), 420px); padding: 11px 15px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 14px 30px -14px rgba(16, 21, 19, 0.55); opacity: 0; transform: translate(-50%, 16px); transition: opacity 0.22s, transform 0.22s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { flex: none; width: 20px; height: 20px; }
body.tabbed .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet .panel, .now .kicker::before { animation: none; } .toast { transition: none; } }

/* ---------- before the app: Pronto's own screens (entering, the terms, not ready yet) ----------
   The site's and the code email's colours, on one card, with the site's links at the foot. */
body.gated { background: #EDF1EE; }
body.gated .app { max-width: 460px; padding-top: 0; padding-bottom: 0; }
.gate { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: max(28px, 6vh) 0 calc(18px + env(safe-area-inset-bottom)); }
.gate-card { background: #fff; border: 1px solid #D8E0DA; border-radius: 22px; padding: 26px 22px 24px; box-shadow: 0 1px 2px rgba(16, 21, 19, 0.04), 0 14px 34px -14px rgba(16, 21, 19, 0.16); }
.gate .mark { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 26px; font: 800 24px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.035em; color: #121614; }
.gate .mark svg { width: 19px; height: 19px; margin-top: 3px; }
.gate h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: #121614; }
.gate .gate-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0B6B4C; }
.gate .gate-lead { margin: 0 0 22px; font-size: 15.5px; line-height: 1.5; color: #2B3530; }
.gate .gate-lead b { color: #121614; overflow-wrap: anywhere; }
.gate-form { display: grid; }
.gate-form label[for] { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: #4B5751; }
.gate-form input:not([type="checkbox"]) { width: 100%; height: 52px; padding: 0 14px; border: 1.5px solid #D8E0DA; border-radius: 14px; background: #fff; font-size: 17px; color: #121614; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.gate-form input::placeholder { color: #9AA59F; }
.gate-form input:focus { border-color: #0B6B4C; box-shadow: 0 0 0 4px rgba(11, 107, 76, 0.13); }
.gate-form .code-in { height: 64px; font-size: 28px; font-weight: 700; letter-spacing: 0.42em; text-indent: 0.42em; text-align: center; font-variant-numeric: tabular-nums; }
.gate .gate-err { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; padding: 11px 12px; border: 1px solid #F1C6BE; border-radius: 12px; background: #FDF1EF; color: #8F241A; font-size: 14px; font-weight: 600; line-height: 1.4; }
.gate .gate-err[hidden] { display: none; }
.gate-err svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.gate-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 16px; border: 0; border-radius: 14px; background: #0B6B4C; color: #fff; font-size: 16.5px; font-weight: 700; }
.gate-btn:active { background: #08513A; }
.gate-btn:disabled { opacity: 0.6; }
.gate-btn.ghost { background: #fff; color: #0B6B4C; border: 1.5px solid #CFDCD4; }
a.gate-btn { text-decoration: none; }
.gate-btn + .gate-btn { margin-top: 10px; }
.gate .gate-hint { margin: 16px 0 0; font-size: 13.5px; color: #6B7670; text-align: center; }
.gate-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-top: 8px; }
.gate-alt button { padding: 6px 0; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: #0B6B4C; }
.gate-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid #D8E0DA; border-radius: 14px; font-size: 15px; line-height: 1.45; color: #2B3530; cursor: pointer; }
.gate-check:has(input:checked) { border-color: #0B6B4C; background: #F4F9E3; }
.gate-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #0B6B4C; }
.gate-check a { color: #0B6B4C; font-weight: 600; }
.gate-list { display: grid; gap: 10px; }
.gate-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px; border: 1.5px solid #D8E0DA; border-radius: 14px; background: #fff; font-size: 16px; font-weight: 700; color: #121614; text-align: left; }
.gate-list button svg { flex: none; width: 18px; height: 18px; color: #6B7670; }
.gate-foot { margin-top: auto; padding-top: 28px; text-align: center; font-size: 13px; line-height: 1.6; color: #6B7670; }
.gate .gate-foot p { margin: 0; }
.gate .gate-foot p + p { margin-top: 4px; font-size: 12px; color: #8A948F; }
.gate-foot a, .gate-foot button { padding: 0; border: 0; background: none; color: #4B5751; font-size: 13px; text-decoration: none; }
/* The card in the middle of the screen, the site's links at its foot; what a screen says in
   short paragraphs, the email the code went to on a line of its own. */
.gate { padding-top: 20px; }
.gate-card { margin: auto 0; }
.gate .gate-leads { margin: 0 0 22px; }
.gate .gate-leads p { margin: 0; font-size: 15.5px; line-height: 1.5; color: #2B3530; }
.gate .gate-leads p + p { margin-top: 6px; }
.gate .gate-leads .gate-email { margin-top: 2px; font-weight: 700; color: #121614; overflow-wrap: anywhere; }
.gate .gate-leads .gate-email + p { margin-top: 10px; }

/* Pronto's mark, small: at the foot of the profile */
.mark-s { display: inline-flex; align-items: center; gap: 4px; font: 800 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.03em; color: #121614; opacity: 0.55; }
.mark-s svg { width: 12px; height: 12px; margin-top: 2px; }
.made a { text-decoration: none; }