/* volition.im/feedback (#2549): one question to a screen, large and centred in a column. Its own look, apart from the
   rest of the site: the system's own face (SF Pro on Apple devices), tight headings, quiet greys for what's
   secondary, hairlines and soft glass. The site is Warm only, so opened directly it is Warm paper, whatever the
   system's appearance. The desktop app's Feedback window sets data-look on <html> to the owner's look ("light",
   "dark"; Warm has none), live, so the form always matches the app. Greys stay past 4.5:1 on their paper, which the
   browser test checks. */
:root {
  color-scheme: light;
  --paper: #f6f3ec; --paper-rgb: 246, 243, 236; --rgb: 28, 29, 26; --strong: #1c1d1a; --strong-hover: #34352f; --on-strong: #f6f3ec;
  --ink: #1c1d1a; --soft: #4d4e49; --grey: #686963; --line: rgba(28, 29, 26, .16); --card: rgba(28, 29, 26, .04);
  --glass: rgba(251, 250, 247, .72); --toast: rgba(251, 250, 247, .96); --select: rgba(28, 29, 26, .16);
  --danger: #b3261e; --ease: cubic-bezier(.22, 1, .36, 1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root[data-look="light"] { --paper: #fcfcfb; --paper-rgb: 252, 252, 251; --on-strong: #fcfcfb; }
:root[data-look="dark"] {
  color-scheme: dark;
  --paper: #080a08; --paper-rgb: 8, 10, 8; --rgb: 255, 255, 255; --strong: #fff; --strong-hover: #e8e8ed; --on-strong: #080a08;
  --ink: #f5f5f7; --soft: #a1a1a6; --grey: #86868b; --line: rgba(255, 255, 255, .16); --card: rgba(255, 255, 255, .06);
  --glass: rgba(28, 28, 30, .6); --toast: rgba(44, 44, 46, .94); --select: rgba(255, 255, 255, .28);
  --danger: #ff6961;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body {
  margin: 0; min-height: var(--vh, 100vh); display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  font: 17px/1.47 var(--sans); letter-spacing: -.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
p, h1, h2, ul { margin: 0; }
a { color: inherit; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
::selection { background: var(--select); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trap { position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; }

/* A thin bar across the top says how far along you are. */
.progress { position: fixed; z-index: 3; top: 0; left: 0; right: 0; height: 3px; background: rgba(var(--rgb), .08); }
#meter { display: block; width: 0; height: 100%; background: var(--strong); border-radius: 0 2px 2px 0; transition: width .6s var(--ease); }

.top { padding: 24px 32px 0; }
.brand { font-size: 17px; font-weight: 600; letter-spacing: -.022em; text-decoration: none; }
.screen { flex: 1 0 auto; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 32px; }

/* Every question starts on the same row, so going on never jumps. */
.step { padding: clamp(40px, 15vh, 150px) 0 56px; }
.step > * + * { margin-top: 28px; }
.step h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -.028em; }
.step h2:focus { outline: 0; }
/* An optional question says so beside it, quietly. */
.optional { margin-left: .35em; color: var(--grey); font-size: 15px; font-weight: 400; letter-spacing: -.01em; vertical-align: baseline; white-space: nowrap; }
.step > h2 + .hint { margin-top: 12px; }
.hint { color: var(--soft); font-size: 19px; line-height: 1.42; }
.hint:empty { display: none; }
.meta { color: var(--grey); font-size: 13px; }
.keys { color: var(--grey); font-size: 12px; letter-spacing: .01em; }
.error { color: var(--danger); font-size: 15px; }
.error:empty { display: none; }

/* Choices are cards, each with its key; a chosen card fills and takes a tick. */
.choices { display: grid; gap: 10px; max-width: 440px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 12px 18px 12px 13px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); font-size: 19px; letter-spacing: -.016em;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.choice span::before {
  content: attr(data-key); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(var(--rgb), .3);
  border-radius: 7px; color: var(--soft); font-size: 13px; font-weight: 600; text-transform: uppercase; transition: inherit;
}
.choice span::after { content: ''; margin-left: auto; font-size: 17px; }
.choice:hover span { background: rgba(var(--rgb), .1); border-color: rgba(var(--rgb), .3); }
.choice:active span { transform: scale(.985); }
.choice input:checked + span { background: rgba(var(--rgb), .16); border-color: var(--strong); }
.choice input:checked + span::before { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.choice input:checked + span::after { content: '\2713'; }
.choice input:focus-visible + span { outline: 2px solid var(--strong); outline-offset: 3px; }

/* A click waits a moment before going on: the line fills, and Stay takes it back. */
.pending { display: flex; align-items: center; gap: 14px; }
.wait::after { content: ''; display: inline-block; vertical-align: middle; width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(var(--strong), var(--strong)) no-repeat 0 0 / 0 100%, rgba(var(--rgb), .16); }

/* A field is one underlined line that grows; focused, the line turns white. */
.field textarea, .field input {
  display: block; width: 100%; margin: 0; padding: 8px 0 10px; border: 0; border-bottom: 1px solid rgba(var(--rgb), .3); border-radius: 0;
  background: none; color: var(--ink); font: inherit; font-size: 26px; line-height: 1.32; letter-spacing: -.02em; caret-color: var(--strong);
  outline: 0; resize: none; -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 52px; overflow: hidden; }
.field textarea:focus, .field input:focus { border-bottom-color: var(--strong); box-shadow: 0 1px 0 var(--strong); }
.field ::placeholder { color: var(--grey); opacity: 1; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 4em var(--paper) inset; }
.count { margin-top: 8px !important; }

/* Buttons are pills: white for going on, outlined for the rest. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.actions button, .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 980px;
  background: var(--strong); color: var(--on-strong); font-size: 17px; font-weight: 600; letter-spacing: -.016em; text-decoration: none; cursor: pointer;
  transition: background-color .2s, transform .15s var(--ease);
}
/* Skip, OK ✓ and Send swap as the owner types: one width for all three, so the Enter hint beside it never moves. */
.actions button { min-width: 112px; }
.actions button.ok::after { content: '\00a0\2713'; }
.actions button:hover, .button:hover { background: var(--strong-hover); }
.actions button:active, .button:active, .quiet:active { transform: scale(.97); }
.quiet, .button.quiet {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid rgba(var(--rgb), .28); border-radius: 980px;
  background: rgba(var(--rgb), .04); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background-color .2s, border-color .2s, transform .15s var(--ease);
}
.quiet:hover, .button.quiet:hover { background: rgba(var(--rgb), .1); border-color: rgba(var(--rgb), .45); }
.link { padding: 0; border: 0; background: none; color: var(--ink); font-size: inherit; text-decoration: underline; text-decoration-color: rgba(var(--rgb), .4);
  text-underline-offset: 3px; cursor: pointer; }
.link:hover { text-decoration-color: var(--strong); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.feedback :is(a, button):focus-visible { outline: 2px solid var(--strong); outline-offset: 3px; }

/* Attachments sit under the message: one button (drop and paste work anywhere), then a glass tray of what's
   attached. The limits show only when one is crossed. */
.attach { margin-top: 20px !important; }
#choose::before { content: '+'; margin-right: 8px; font-size: 19px; font-weight: 400; line-height: 1; }
.dragging #choose { border-color: var(--strong); background: rgba(var(--rgb), .14); }
.files {
  list-style: none; display: grid; gap: 2px; margin-top: 12px; padding: 6px; border: 1px solid rgba(var(--rgb), .1); border-radius: 16px;
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.files:empty { display: none; }
.file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px; border-radius: 10px; }
.file + .file { border-top: 1px solid rgba(var(--rgb), .06); border-radius: 0; }
.thumb { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: rgba(var(--rgb), .08);
  color: var(--soft); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.thumb img, .thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.file .name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.file .meta { display: block; }
.remove { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(var(--rgb), .08); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .2s; }
.remove:hover { background: rgba(var(--rgb), .18); }
.attach .error { margin-top: 10px; }

/* Sending: a bar a file, and one for everything. */
#send-list .file { grid-template-columns: minmax(0, 1fr) minmax(80px, 160px) 64px; padding: 10px 8px; }
.track { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(var(--rgb), .12); }
.fill { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--strong); transition: width .2s linear; }
.pct { color: var(--grey); font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.overall { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; max-width: 440px; }
.overall:empty { display: none; }
.check { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--strong); color: var(--on-strong); font-size: 26px; }
.check::before { content: '\2713'; }

/* At the foot of the page: back, and the site's own links. What just happened floats above it, briefly. */
.nav {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 32px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(var(--paper-rgb), 0), var(--paper) 45%); color: var(--grey); font-size: 13px;
}
#back { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: 980px;
  background: none; color: var(--soft); font-size: 14px; cursor: pointer; transition: border-color .2s, color .2s; }
#back::before { content: '\2190'; margin-right: 6px; }
#back:hover { border-color: rgba(var(--rgb), .4); color: var(--ink); }
.nav .off { visibility: hidden; }
.foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; color: var(--grey); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.status {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); max-width: calc(100vw - 32px); width: max-content;
  padding: 10px 18px; border: 1px solid rgba(var(--rgb), .12); border-radius: 980px; background: var(--toast); color: var(--ink);
  font-size: 14px; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.status:empty { display: none; }

/* Phones: a narrower column, and nothing about keys. Fields stay at 16px or more, so Safari never zooms. */
@media (max-width: 639px) {
  .top { padding: 18px 22px 0; }
  .screen { padding: 0 22px; }
  .step { padding-top: clamp(28px, 8vh, 72px); }
  .step h2 { font-size: 26px; }
  .hint { font-size: 17px; }
  .field textarea, .field input { font-size: 21px; }
  .choices { max-width: none; }
  .nav { padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); }
}
@media (hover: none) and (pointer: coarse) {
  .keys { display: none; }
}

/* Each question rises in and fades up; going back, it comes down. A refusal is a short shake. */
@media (prefers-reduced-motion: no-preference) {
  .step.enter { animation: rise .55s var(--ease) both; }
  .step.enter.back { animation-name: fall; }
  .step.tear { animation: shake .36s var(--ease); }
  .pending:not([hidden]) .wait::after { animation: wait 1.5s linear both; }
  .dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
  .status:not(:empty) { animation: toast .35s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes fall { from { opacity: 0; transform: translateY(-28px); } }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes wait { to { background-size: 100% 100%, auto; } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }