/*
  Agilis web app.
  Hand-written, no framework. Values are taken from the real brand sources:
  #180054 / #13003A from the Android theme, #FB698E with its 26px pill and 49px
  height from the public site CSS, #E8E1F9 and #746698 from the Android palette.
*/

/* ----------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --indigo: #180054;
  --indigo-dark: #13003A;
  --indigo-mid: #2B155C;
  --pink: #FB698E;          /* brand fill - never used for text on white */
  --pink-text: #C92654;     /* same family, passes 4.5:1 on white */
  --pink-text-hover: #8E1A3D;
  --pink-soft: #FDECEF;
  --magenta: #d60ad6;
  --lavender: #E8E1F9;
  --lavender-pale: #F7F5FC;
  --muted-purple: #746698;

  --ink: #222222;
  --ink-2: #333333;
  --grey: #6A6A78;
  --grey-light: #6A6A78;
  --line: #EBEBEB;
  --line-2: #DBDBDB;
  --control-edge: #8A8A99;  /* borders that show where a control is: 3.4:1 on white (WCAG 1.4.11) */
  --sunk: #F5F5F5;
  --paper: #FFFFFF;

  --good: #22C55E;
  --good-soft: #E8F8ED;
  --warn: #ECA338;
  --warn-soft: #FFF8EE;

  --radius: 12px;
  --radius-sm: 8px;
  --pill: 26px;

  --sans: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --display: 'Raleway', 'Segoe UI', Arial, sans-serif;

  --shell: 1240px;
}

/* ----------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--sunk);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--indigo);
  margin: 0 0 0.5em;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--pink-text); }
a:hover { color: var(--pink-text-hover); }

img { max-width: 100%; height: auto; }

/* A visible focus ring everywhere. Never remove this. */
:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-indigo :focus-visible { outline-color: #ffffff; }

/* Screen-reader-only text, still focusable when it needs to be. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -100px;
  z-index: 100;
  background: var(--paper); color: var(--indigo);
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
/* A skip link inside the page (chat: "Skip to the message box"): hidden until
   it has keyboard focus; screen readers always find it. */
.skip-inline {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-inline:focus {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  display: inline-block; margin: 10px 24px 0; padding: 8px 14px; border-radius: 20px;
  background: var(--indigo); color: #ffffff; font-weight: 700; text-decoration: none;
}

/* ----------------------------------------------------------------- layout */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: var(--gap, 18px); }
/* Top and bottom only: a shorthand here zeroed .shell's side padding, so on phones every page ran to the screen edges. */
.page { padding-top: 28px; padding-bottom: 64px; }

/* "Back to ..." at the top of a page: a quiet pill with a chevron, not a bare underlined link. */
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 18px 0 12px;
  border: 1px solid var(--line-2); border-radius: 20px;
  background: var(--paper); color: var(--indigo);
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.backlink:hover { background: var(--lavender-pale); border-color: var(--lavender); color: var(--indigo); }
.backlink__icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.backlink:hover .backlink__icon { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) {
  .backlink, .backlink__icon { transition: none; }
  .backlink:hover .backlink__icon { transform: none; }
}

.masthead {
  background: var(--indigo);
  color: #ffffff;
}
.masthead__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px;
  max-width: var(--shell); margin: 0 auto; padding: 0 20px;
}
.masthead__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* 120 x 44, the size www shows it at (its header's img width="120" height="44"). */
.masthead__brand img { display: block; height: 44px; width: auto; }

/* Main navigation: the look of the www header (uppercase bold, pink on
   hover, the current page underlined), so the app and the site feel like one
   product. */
.mainnav { margin-left: auto; }
.mainnav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.mainnav a {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px;
  color: #ffffff; text-decoration: none;
  font-size: 0.8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color .2s ease-in-out;
}
.mainnav a:hover { color: var(--pink); }
.mainnav a[aria-current="page"] { color: var(--pink); border-bottom-color: #ffffff; }

/* Sign out: the pill shape of www's JOIN FREE, but outlined, so it reads as
   a quiet action and never competes with the page's own buttons. */
/* Pushed to the right, also on pages with no main menu (the sign-up steps). */
.masthead__signout { margin-left: auto; }
.mainnav + .masthead__signout { margin-left: 8px; }
.signout-btn {
  min-height: 40px; padding: 0 18px;
  border-radius: var(--pill);
  border: 2px solid var(--pink);
  background: transparent; color: #ffffff;
  font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s ease-in-out, color .3s ease-in-out;
}
.signout-btn:hover { background: var(--pink); color: var(--indigo); }

/* Narrow screens: the navigation wraps onto its own rows under the logo.
   It used to scroll sideways with the scrollbar hidden, so items off the
   edge could not be seen at all (audit M10). */
@media (max-width: 1100px) {
  .masthead__inner { flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 6px; }
  .masthead__signout, .mainnav + .masthead__signout { margin-left: auto; }
  .mainnav { order: 3; flex-basis: 100%; margin-left: 0; }
  .mainnav ul { flex-wrap: wrap; }
  .mainnav a { white-space: nowrap; padding: 0 8px; }
}

/* Verify your photos on a computer: the code on one side, the steps on the
   other; one column when narrow (audit M10). */
.verify-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.verify-grid svg { max-width: 100%; height: auto; }
.verify-grid .code-box span { overflow-wrap: anywhere; }
@media (max-width: 700px) { .verify-grid { grid-template-columns: minmax(0, 1fr); } }

/* Signed out: a way back to the marketing site, which is the front door. */
.masthead__back {
  margin-left: auto;
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 10px; color: var(--lavender); text-decoration: none; font-size: 0.9rem;
}
.masthead__back:hover { background: rgba(232, 225, 249, .14); color: #ffffff; }

/* Footer: the international footer of www.agilis.dating. */
.gfoot { margin-top: 48px; }
.gfoot__top { background: #f5f5f5; padding: 40px 20px 16px; border-top: 1px solid var(--line); }
.gfoot__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; gap: 24px 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.gfoot__heading {
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  color: #000000; text-transform: uppercase; margin: 0 0 16px;
}
.gfoot ul { list-style: none; margin: 0; padding: 0; }
.gfoot li { padding-bottom: 10px; }
.gfoot a { font-size: .94rem; color: #000000; text-decoration: none; transition: color .3s ease-in-out; }
.gfoot a:hover { color: var(--pink-text); }
.gfoot img { display: block; max-width: 167px; height: auto; }
.gfoot__bottom { background: #EBEBEB; padding: 16px 20px; }
.gfoot__bottom p { max-width: var(--shell); margin: 0 auto; color: #3C3C3C; font-size: .875rem; }

.count-pill {
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--pink); color: var(--indigo);
  font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.count-pill[hidden] { display: none; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card--flush { padding: 0; overflow: hidden; }

.panel-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.lede { color: var(--grey); font-size: .95rem; }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: 20px; }
.field > label,
.fieldset__legend {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.field__hint { display: block; font-size: .8rem; color: var(--grey); margin-top: 6px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink-2);
  background: var(--paper);
  border: 1.5px solid var(--control-edge);
  border-radius: var(--radius-sm);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--indigo); }

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--magenta);
  background: #fffafd;
}

fieldset { border: 0; margin: 0 0 20px; padding: 0; }
legend { padding: 0; }

.error-text {
  display: block;
  margin-top: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: #b4008f;
}

/* Choice groups: real radios and checkboxes, restyled but never replaced. */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices--stack { flex-direction: column; }

.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 24px;
  border: 1.5px solid var(--control-edge);
  background: var(--paper);
  font-size: .95rem;
}
.choice input:checked + span {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #ffffff;
  font-weight: 600;
}
.choice input:focus-visible + span { outline: 3px solid var(--indigo); outline-offset: 2px; }
/* A chosen chip in a choose-several group (languages, interests) carries a tick,
   so those groups read differently from choose-one groups. */
.choice input[type="checkbox"]:checked + span::before {
  content: ""; width: 7px; height: 12px; margin: -3px 10px 0 -4px; flex: none;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
/* The 2px offset leaves a white gap, so the indigo ring shows beside an indigo chip. */

.choice--block span { justify-content: flex-start; min-height: 56px; border-radius: var(--radius-sm); }

/* Toggle rows */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.switch-row + .switch-row { margin-top: 10px; }
.switch-row label { font-weight: 600; font-size: .95rem; }
.switch-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--pink-text); flex: none; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 49px; padding: 0 30px;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--pink); color: var(--indigo); }
.btn--primary:hover { background: #f9537e; color: var(--indigo); }
.btn--secondary { background: var(--indigo); color: #ffffff; }
.btn--secondary:hover { background: var(--indigo-dark); color: #ffffff; }
.btn--quiet { background: var(--paper); border-color: var(--line); color: var(--grey); font-weight: 600; }
.btn--quiet:hover { background: var(--sunk); color: var(--ink-2); }
.btn--danger { background: var(--paper); border-color: var(--magenta); color: #b4008f; }
.btn--small { min-height: 40px; padding: 0 18px; font-size: .875rem; border-radius: 20px; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-row--split { justify-content: space-between; }
/* Sign-up steps: Previous on the left, Next on the right (even with no Previous). */
.btn-row--steps .btn-row__forward {
  margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
}
.btn-row--steps .btn-row__forward .field__hint { margin: 0; }

/* A button that is the only content of a form, used for POST actions. */
.inline-form { display: inline; }

/* ----------------------------------------------------------------- messages */

.flashes { margin: 0 0 20px; padding: 0; list-style: none; }
.flash {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--grey);
  background: var(--paper);
  font-size: .95rem;
}
.flash + .flash { margin-top: 10px; }
.flash--success { border-left-color: var(--good); background: var(--good-soft); }
.flash--error { border-left-color: var(--magenta); background: var(--pink-soft); }
.flash--info { border-left-color: var(--indigo); background: var(--lavender-pale); }

.error-summary {
  border: 2px solid var(--magenta);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 22px;
  background: var(--paper);
}
.error-summary h2 { color: #b4008f; font-size: 1.05rem; margin-bottom: .4em; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: #b4008f; font-weight: 600; }

.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--lavender-pale);
  border: 1.5px solid var(--lavender);
  font-size: .9rem;
}
.notice--warn { background: var(--warn-soft); border-color: var(--warn); }

/* ----------------------------------------------------------------- progress */

/* One row, however many steps: wrapping put the last bars on a second line. */
.steps { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 6px; }
.steps li { flex: 1 1 0; min-width: 0; }
.steps .steps__bar {
  display: block; height: 6px; border-radius: 3px; background: var(--line);
}
.steps .is-done .steps__bar { background: var(--pink); }
.steps .is-current .steps__bar { background: var(--indigo); }

.meter { display: flex; gap: 5px; margin-top: 8px; }
.meter span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.meter[data-bars="1"] span:nth-child(-n+1),
.meter[data-bars="2"] span:nth-child(-n+2) { background: var(--magenta); }
.meter[data-bars="3"] span:nth-child(-n+3) { background: var(--warn); }
.meter[data-bars="4"] span { background: var(--good); }

/* ----------------------------------------------------------------- grid */

.people {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.person {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.person__media { position: relative; aspect-ratio: 3 / 4; background: var(--lavender); }
/* Profile photos are stored at the apps' 14:23 frame; show all of it. */
.person__media--photo { aspect-ratio: 14 / 23; }
.person__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__photo-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; }
.person__photo-link:hover img { filter: brightness(1.05); }
.person__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--lavender), #FFA8E4);
  color: #ffffff; font-family: var(--display); font-size: 2rem; font-weight: 800;
}
.person__badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 12px;
  background: rgba(13, 0, 51, .74); color: #ffffff;
  font-size: .7rem; font-weight: 700;
}
.person__body { padding: 13px 14px 15px; }
.person__heading { margin: 0; font-size: 1rem; line-height: 1.3; }
.person__name { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--indigo); text-decoration: none; }
.person__name:hover { color: var(--magenta); }
.person__meta { font-size: .8rem; color: var(--grey); margin-top: 3px; }
/* Pass, Like and Super like as the apps' round icon buttons, centred under the card */
.person__actions { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 2px 14px 14px; }
.person__act { display: inline-flex; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform .12s ease; }
.person__act img { display: block; width: 52px; height: 52px; }
.person__act--super img { width: 42px; height: 42px; }
.person__act:hover { transform: scale(1.06); }
.person__act:active { transform: scale(.95); }
.person__act:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .person__act { transition: none; } .person__act:hover, .person__act:active { transform: none; } }

/* ----------------------------------------------------------------- chat */

/* Chat itself is styled in the "Chat (design option A)" block at the end of this
   file. The round picture here is also used by account/people-list. */
.chat__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; background: var(--lavender); }

/* ----------------------------------------------------------------- misc */

.empty { text-align: center; padding: 56px 24px; color: var(--grey); }
.empty h2 { color: var(--indigo); }

.definition { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: .95rem; }
.definition dt { color: var(--grey); }
.definition dd { margin: 0; color: var(--ink-2); font-weight: 600; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tag {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 13px;
  border-radius: 16px; border: 1.5px solid var(--lavender);
  background: var(--paper); color: var(--indigo);
  font-size: .8rem;
}

.qr { display: block; width: 220px; height: 220px; background: var(--paper); padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }

.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: .95rem;
  word-break: break-all;
}

.split { display: grid; grid-template-columns: 440px minmax(0, 1fr); min-height: 100vh; }
.split__aside { background: var(--indigo); color: #ffffff; padding: 48px 44px; }
.split__aside h1 { color: #ffffff; }
.split__aside p { color: var(--lavender); }
/* The panel's big line looks like a heading but isn't one: the form beside it has the page's only h1 (audit M1). */
.split__aside .split__title { margin-top: 36px; font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.2; color: #ffffff; }
.split__main { padding: 48px 56px; background: var(--paper); }

/* ----------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__aside { padding: 28px 20px; }
  .split__main { padding: 28px 20px; }
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat__list { border-right: 0; border-bottom: 1px solid var(--line); }
  .message { max-width: 85%; }
  .masthead__inner { flex-wrap: wrap; padding-bottom: 8px; }
  .mainnav { margin-left: 0; width: 100%; }
  .mainnav ul { justify-content: space-between; }
  .mainnav a { padding: 0 10px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .masthead, .mainnav, .composer, .btn { display: none !important; }
  body { background: #ffffff; }
}

/* ------------------------------------------------- password strength meter */

.strength { margin-top: 10px; }
.strength .meter { margin-top: 0; }
.strength__label {
  margin: 6px 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--grey);
  text-align: right;
}

/* ------------------------------------------------------ social sign-in */

.social { margin-top: 28px; }
.social__divider {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px;
  color: var(--grey); font-size: .85rem;
}
.social__divider::before,
.social__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.social__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.social__btn {
  display: flex; align-items: center; gap: 12px;
  min-height: 49px; padding: 0 18px;
  border: 1.5px solid var(--control-edge); border-radius: var(--pill);
  background: var(--paper); color: var(--ink-2);
  font-size: .95rem; font-weight: 600; text-decoration: none;
}
.social__btn:hover { background: var(--sunk); color: var(--indigo); }
/* The provider's own mark, as in the apps. */
.social__mark { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; }
.social__mark svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------- Add your photos
   Design option A (29 Sep 2026): progress, a verification prompt, then six
   portrait slots like the apps. Words carry every status; colour only
   reinforces it. */
.photos-page { max-width: 880px; margin: 0 auto; }
.photos-page > * + * { margin-top: 22px; }
.photos-page > .lede { margin-top: 10px; }
.photos-page > .photo-slots { margin-top: 24px; } /* .photo-slots resets its margin */

.photos-progress { display: flex; align-items: center; gap: 16px; }
.photos-progress__text { margin: 0; font-weight: 700; color: var(--indigo); white-space: nowrap; }
.photos-progress__bar { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.photos-progress__bar > span { height: 8px; border-radius: 4px; background: var(--line); }
.photos-progress__bar > .is-filled { background: var(--pink); }

.photos-verify {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--lavender-pale); border: 1px solid var(--lavender);
}
.photos-verify > svg {
  width: 28px; height: 28px; flex: none;
  fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.photos-verify p { margin: 0; flex: 1; color: var(--ink-2); }
.photos-verify strong { color: var(--indigo); }

.photos-page__nav { border-top: 1px solid var(--line); padding-top: 22px; }

.photo-slots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.photo-slot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* 3:4 as in the chosen mockup: an overview, so the frame shows the upper
   part of each 14:23 photo (where the face usually is); the profile page
   shows the whole photo. */
.photo-slot__frame {
  position: relative; aspect-ratio: 3 / 4;
  border-radius: var(--radius); overflow: hidden; background: var(--lavender);
}
.photo-slot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.photo-slot__frame--no::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 3px solid #A3123A; border-radius: inherit;
}
.photo-slot__num {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 10px; border-radius: 12px;
  background: var(--paper); color: var(--indigo); font-size: .75rem; font-weight: 700;
}
.photo-slot__num--first { background: var(--indigo); color: #ffffff; }
.photo-slot__status {
  position: absolute; left: 10px; bottom: 10px; right: 10px; width: max-content; max-width: calc(100% - 20px);
  display: flex; align-items: center; gap: 5px; margin: 0;
  padding: 5px 10px; border-radius: 14px; background: var(--paper);
  font-size: .8rem; font-weight: 700; line-height: 1.25;
  box-shadow: 0 1px 3px rgba(24, 0, 84, .18);
}
.photo-slot__status svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }
.photo-slot__status--ok { color: #1D6B3A; }
.photo-slot__status--no { color: #A3123A; }
.photo-slot__status--pending { color: var(--grey); font-weight: 600; }

.photo-slot__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.photo-slot__actions > form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.photo-slot__actions .btn { width: 100%; padding: 0 10px; }

/* A file picker laid over its button: taps, clicks and screen readers all
   reach the real input, and it shows the button's focus ring. */
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
.file-btn:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; }
.file-btn:hover { background: var(--sunk); }

.photo-add { display: flex; flex-direction: column; gap: 10px; }
.photo-add__tile {
  position: relative; aspect-ratio: 3 / 4; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 2px dashed var(--line-2); border-radius: var(--radius); background: #FAFAFC;
  color: var(--indigo); font-family: var(--display); font-weight: 700; text-align: center;
  cursor: pointer;
}
.photo-add__tile:hover { border-color: var(--indigo); background: var(--lavender-pale); }
.photo-add__tile:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; }
.photo-add__tile input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
.photo-add__plus {
  width: 52px; height: 52px; border-radius: 50%; background: var(--pink);
  display: flex; align-items: center; justify-content: center;
}
.photo-add__plus svg { width: 24px; height: 24px; fill: none; stroke: var(--indigo); stroke-width: 2.5; stroke-linecap: round; }
.photo-slot--spare .photo-add__tile { color: var(--grey); }
.photo-slot--spare .photo-add__plus { background: var(--line); }
.photo-slot--spare .photo-add__plus svg { stroke: var(--grey); }

.busy-status { margin: 0; font-weight: 700; color: var(--indigo); }
.is-sending [data-autosubmit] { pointer-events: none; opacity: .6; }
.is-sending [data-autosubmit][aria-busy="true"] { opacity: 1; }
/* "Uploading photo 2" on the photo being sent (autosubmit.js), where the eye already is. */
.slot-busy {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 12px; background: rgba(247, 245, 252, .92); border-radius: inherit;
  color: var(--indigo); font-weight: 700; text-align: center;
}
.slot-busy__spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid var(--lavender); border-top-color: var(--indigo);
  animation: slot-spin .8s linear infinite;
}
@keyframes slot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .slot-busy__spinner { animation-duration: 2.4s; } }
/* The hidden attribute must win over .btn's display, e.g. on the no-script Upload buttons. */
.btn[hidden], [data-autosubmit-fallback][hidden], [data-js-only][hidden] { display: none; }

@media (max-width: 640px) {
  .photo-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .photos-verify { flex-wrap: wrap; }
  .photos-verify p { flex-basis: calc(100% - 44px); }
  .photos-progress { flex-wrap: wrap; gap: 8px; }
  .photos-progress__bar { flex-basis: 100%; }
}

/* Chat: verified tick, day separators, the unverified notice, scam warnings. */
/* "Photos verified": the apps' pink seal with a white check (partials/verified-tick). */
.vtick { display: inline-block; vertical-align: -0.15em; flex: none; }
.vtick--sm { width: 1.05em; height: 1.05em; }
.vtick--md { width: 0.8em; height: 0.8em; vertical-align: -0.05em; }
.vtick__seal { fill: #FB698E; }
.vtick__check { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vtick-label { margin: -6px 0 0; color: var(--pink-text); font-weight: 700; font-size: .9rem; }
.pill.pill--verified { display: inline-flex; align-items: center; gap: 6px; background: var(--pink-soft); color: var(--pink-text); }
.message-day { align-self: center; list-style: none; margin: 10px 0; font-size: .78rem; font-weight: 700; color: var(--grey); }
.chat-notice { list-style: none; align-self: stretch; margin: 4px 0 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--lavender-pale); color: var(--indigo); font-size: .85rem; line-height: 1.5; }
/* Red Flags: the flagged message and its flag are styled in the chat block at
   the end of this file. The flag opens the warning (iOS LureSheets, Android
   ChatScamBottomSheet / ChatFraudBottomSheet) - centred on a computer, a bottom
   sheet on a phone. */

.scam-warning {
  margin-top: 10px; padding: 22px; border-radius: 16px;
  background: var(--paper); border: 1.5px solid #E5484D;
  color: #000000; font-size: .95rem; line-height: 1.5;
  display: flex; flex-direction: column; gap: 14px;
}
.scam-warning p { margin: 0; }
.scam-warning[hidden] { display: none; }
.scam-warning__icon {
  align-self: center; width: 80px; height: 80px; border-radius: 50%; background: #FFF0F4;
  display: flex; align-items: center; justify-content: center;
}
.scam-warning__icon svg { width: 40px; height: 40px; }
.scam-warning__title { margin: 0; text-align: center; font-size: 1.25rem; color: #000000; }
.scam-warning__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.scam-warning__list li { position: relative; padding-left: 18px; }
.scam-warning__list li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
}
.pink-tick {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 14px;
  background: #FFE4EC; font-size: .9em; white-space: nowrap; vertical-align: 1px;
}
.pink-tick svg { width: 14px; height: 14px; }
.scam-warning__box { padding: 14px 16px; border-radius: 10px; }
.scam-warning__box--edge { background: #FFF4E5; border-left: 5px solid #DD982A; }
.scam-warning__box--alert { background: #FFD9DA; }
.scam-warning__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scam-warning__actions .inline-form, .scam-warning__actions .btn { width: 100%; }
.scam-warning__actions .btn { padding: 0 12px; }
.btn--grey { background: var(--line); color: var(--ink); }
.btn--grey:hover { background: var(--line-2); color: var(--ink); }

/* The warning as a dialog (redflag.js). */
.redflag-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: 20px; background: var(--paper);
  box-shadow: 0 20px 60px rgba(19, 0, 58, .35);
}
.redflag-dialog::backdrop { background: rgba(19, 0, 58, .55); }
.redflag-dialog .scam-warning { margin: 0; border: 0; padding: 28px; }
.redflag-dialog .scam-warning__title:focus { outline: none; }
@media (max-width: 640px) {
  .redflag-dialog {
    width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 90vh;
  }
  .redflag-dialog .scam-warning { padding: 24px 20px 28px; }
}

/* Discover cards: activity, liked-you, Taken, alert match. */
.activity { font-weight: 700; }
/* The coloured dot the apps show next to the wording (A2-383): green online,
   amber within a day, grey otherwise. It is decoration only; the words carry
   the meaning, so nothing depends on seeing colour. */
.activity::before {
  content: ""; display: inline-block; width: .6em; height: .6em;
  border-radius: 50%; margin-right: .4em; vertical-align: .05em;
  background: #CBD0DA;
}
.activity--online::before { background: #22C55E; }
.activity--day::before { background: #FBBF24; }
/* A2-383 criterion 7: a Taken profile keeps its wording; its dot stays muted. */
.person--taken .activity::before { background: #D2D2D2; }
.activity--profile.activity--week::before,
.activity--profile.activity--month::before,
.activity--profile.activity--old::before { background: #9CA3AF; }
.activity--online { color: #1D6B3A; }
.activity--day { color: #8A5A00; }
.activity--week, .activity--month, .activity--old { color: var(--grey); }
.person__liked { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--pink-text); }
.person--taken .person__media img { filter: grayscale(1); opacity: .75; }
/* Likes: everything that is not a new like is lightly faded, as in the apps
   (A2-611/612). The words say it too ("new like" in the name). */
.person--seen .person__media, .person--seen .person__body { opacity: .75; }
.person__badge--taken { left: auto; right: 10px; background: var(--grey); color: #fff; }
.person--alert { outline: 3px solid var(--warn); outline-offset: -3px; }

/* Voice and photo openers recorded in the apps */
.opener-audio { display: block; width: 100%; max-width: 420px; }
.opener-photo { display: block; width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-sm, 10px); }

/* Chat attachments */
.message__video { display: block; width: 100%; max-width: 320px; border-radius: 10px; background: #000; }

/* Opener: answer with a recording or a photo (partials/openers-fields).
   A pill that opens a panel with the two choices side by side, "or" between
   them; stacked on a phone. */
.opener-add { margin-top: 10px; }
.opener-add__toggle {
  display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
  min-height: 40px; padding: 6px 16px 6px 12px; border-radius: 20px;
  border: 1.5px solid var(--lavender); background: var(--lavender-pale);
  color: var(--indigo); font-weight: 700; font-size: .9rem;
}
.opener-add__toggle::-webkit-details-marker { display: none; }
.opener-add__toggle::marker { content: ""; }
.opener-add__toggle:hover { border-color: var(--indigo); }
.opener-add[open] > .opener-add__toggle { background: var(--indigo); border-color: var(--indigo); color: #ffffff; }
.opener-add__icons { display: inline-flex; gap: 2px; }
.opener-add svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.opener-add__body {
  margin-top: 12px; padding: 16px; border-radius: var(--radius);
  background: var(--lavender-pale); border: 1px solid var(--lavender);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px;
}
.opener-add__option {
  min-width: 0; padding: 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.opener-add__option .field__hint { margin: 0; }
.opener-add__title { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--indigo); }
.opener-add__or { margin: 0; align-self: center; color: var(--grey); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.opener-add__chosen { font-size: .875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.opener-add__chosen:empty { display: none; }
.opener-add__preview { margin: 0; width: 100%; max-width: 240px; }
.opener-add__preview img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; background: var(--lavender); transition: opacity .2s; }
.opener-add__preview.is-uploading img { opacity: .45; }
.opener-add__status { margin: 0; font-weight: 700; font-size: .9rem; }
.opener-add__status:empty { display: none; }
.opener-add__status--busy { color: var(--indigo); }
.opener-add__status--ok { color: #1D6B3A; }
.opener-add__status--error { color: #A3123A; }
/* Plain file fields without scripting; buttons once openers-photo.js runs. */
.opener-pick__label { display: none; }
.is-enhanced .opener-pick {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; border-radius: 20px; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink-2); font-weight: 700; font-size: .875rem; cursor: pointer;
}
.is-enhanced .opener-pick__label { display: inline; }
.is-enhanced .opener-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.is-enhanced .opener-pick:hover { background: var(--sunk); }
.is-enhanced .opener-pick:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; }
@media (max-width: 640px) {
  .opener-add__body { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  .opener-add__or { justify-self: center; }
}
.voice-recorder { margin: 0; width: 100%; }
.voice-recorder__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.voice-recorder__time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.5em; }
.voice-recorder audio { display: block; width: 100%; max-width: 420px; margin-top: 8px; }
/* display:block above would otherwise beat [hidden]: a removed recording stayed on screen. */
.voice-recorder audio[hidden] { display: none; }

/* One centred reading column (announcements). */
.column { max-width: 760px; margin: 0 auto; }

/* Empty states: the apps' artwork, title, text and optional button, centred
   (Android CommonUI.NoDataUI / AppListNoDataUI). */
/* Empty states, design option C (partials/empty-state): artwork beside the
   words and next steps; stacked and centred in a narrow space (a container
   query, so it also stacks inside the chat list's column). */
.empty-wrap { container-type: inline-size; }
.empty-state {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: center;
  padding: 28px 32px; text-align: left;
}
.empty-state--small { grid-template-columns: 110px minmax(0, 1fr); gap: 24px; padding: 18px 20px; }
.empty-state--no-art { grid-template-columns: minmax(0, 1fr); }
.empty-state__art { width: 100%; height: auto; justify-self: center; }
.empty-state__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.empty-state__title { font-size: 1.5rem; margin: 0; color: var(--indigo); }
.empty-state--small .empty-state__title { font-size: 1.15rem; }
.empty-state__text { color: var(--grey); max-width: 52ch; margin: 0; line-height: 1.55; }
.empty-state__action { margin: 6px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
@container (max-width: 560px) {
  .empty-state { grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: center; justify-items: center; padding: 24px 16px; }
  .empty-state__art { width: 140px; }
  .empty-state--small .empty-state__art { width: 96px; }
  .empty-state__body { align-items: center; }
  .empty-state__action { justify-content: center; }
}

/* Discover's empty state: the filters in force, each removable, and the alert prompt. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; padding: 0; list-style: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px 0 14px;
  border-radius: 18px; background: var(--lavender-pale); border: 1px solid var(--lavender);
  color: var(--indigo); font-weight: 600; font-size: .9rem;
}
.filter-chip form { display: inline; margin: 0; }
.filter-chip button {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--indigo);
}
.filter-chip button:hover { background: var(--lavender); }
.filter-chip button:focus-visible { outline: 3px solid var(--indigo); outline-offset: 1px; }
.filter-chip svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.alert-prompt {
  margin-top: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px; background: var(--lavender-pale); border: 1px solid var(--lavender); text-align: left;
}
.alert-prompt__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--lavender); display: flex; align-items: center; justify-content: center; flex: none; }
.alert-prompt__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alert-prompt__text { flex: 1 1 240px; }
.alert-prompt__text strong { display: block; color: var(--indigo); }
.alert-prompt__text span { color: var(--grey); font-size: .9rem; }
.alert-prompt form { margin: 0; }

/* Account (design option A): a profile strip, then two panels of settings
   rows like the apps' Account tab. 12px between panels, nothing half empty. */
.acct-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
.acct-top__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.acct-top__avatar--empty {
  display: grid; place-items: center; background: var(--lavender); color: var(--indigo);
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
}
.acct-top__who { flex: 1; min-width: 180px; }
.acct-top__name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--indigo); margin: 0; }
.acct-top__email { margin: 1px 0 0; color: var(--grey); font-size: .9rem; overflow-wrap: anywhere; }
.acct-top__meta { margin: 2px 0 0; color: var(--grey); font-size: .9rem; }
.acct-top__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 10px; border-radius: 99px; border: 1px solid; }
.pill--warn { color: #8A5A00; background: var(--warn-soft); border-color: #F3D29B; }
.pill--good { color: #1D6B3A; background: var(--good-soft); border-color: #A8E2BC; }

.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 760px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }

.setpanel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.setpanel__heading {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey); margin: 0; padding: 16px 16px 6px;
}
.setrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 52px;
  color: var(--indigo); text-decoration: none; font-weight: 600;
  border-top: 1px solid var(--line);
}
.setpanel__heading + .setrow { border-top: 0; }
a.setrow:hover { background: var(--lavender-pale); color: var(--indigo); }
.setrow__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--indigo-mid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.setrow__label { flex: 1; min-width: 0; }
.setrow__label small { display: block; font-weight: 400; color: var(--grey); font-size: .82rem; }
.setrow__chev { color: #B7AFCB; font-size: 1.2rem; line-height: 1; }
.setrow--form { margin: 0; }
.setrow--danger, a.setrow--danger:hover { color: #B42318; }
.setrow--danger .setrow__icon { stroke: #B42318; }

/* An on/off switch drawn over a real checkbox (role="switch"). */
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 44px; height: 26px; border-radius: 99px; background: #767676; position: relative;
  transition: background-color .2s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s ease;
}
/* Both tracks are at least 3:1 against white (#767676 is 4.5:1, --pink-text 5.2:1). */
.switch:checked { background: var(--pink-text); }
.switch:checked::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* Profile page (design option A): the photo gallery on the left stays in view while
   the details scroll. Photos are stored at the apps' 14:23 portrait frame. The width
   is chosen so the large photo and its thumbnail row fit the window together. */
.profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.gallery { position: sticky; top: 16px; width: clamp(260px, calc((100vh - 140px) / 1.95), 400px); }
.gallery__main {
  position: relative; aspect-ratio: 14 / 23; max-width: 100%;
  border-radius: var(--radius); overflow: hidden; background: var(--lavender);
}
.gallery__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__count {
  position: absolute; top: 10px; right: 10px;
  background: rgba(24, 0, 84, .75); color: #ffffff;
  font-size: .75rem; font-weight: 700; border-radius: 99px; padding: 2px 10px;
}
.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--indigo);
  font-size: 1.7rem; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.gallery__arrow[hidden] { display: none; }
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }
.gallery__arrow:hover { background: #ffffff; }
.gallery__thumbs {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
}
.gallery__thumbs a {
  display: block; aspect-ratio: 14 / 23; border-radius: 8px; overflow: hidden;
  opacity: .7; transition: opacity .15s ease;
}
.gallery__thumbs a:hover, .gallery__thumbs a[aria-current="true"] { opacity: 1; }
.gallery__thumbs a[aria-current="true"] { box-shadow: 0 0 0 3px var(--pink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__empty { aspect-ratio: 14 / 23; border-radius: var(--radius); }
@media (max-width: 860px) {
  .profile { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: static; width: min(100%, 420px); margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .gallery__thumbs a { transition: none; } }

/* "Typing…": three dots in a grey bubble on their side, each rising in turn, as in both apps */
.typing__bubble { display: inline-flex; gap: 5px; align-items: center; padding: 15px 16px; background: var(--sunk); border-color: var(--sunk); }
.typing__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); opacity: .4; animation: typing-dot 1.2s infinite; }
.typing__dot:nth-child(2) { animation-delay: .4s; }
.typing__dot:nth-child(3) { animation-delay: .8s; }
@keyframes typing-dot { 0%, 33% { transform: translateY(-3px); opacity: 1; } 34%, 100% { transform: none; opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .typing__dot { animation: none; opacity: .7; } }

/* The review prompt (review-prompt.js): the apps' review sheet. Centred on a
   large screen; a bottom sheet on a phone, as in the apps. */
.review-dialog {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  box-sizing: border-box; padding: 16px 32px 24px; border: 0; border-radius: 24px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px rgba(19, 0, 58, .35);
  text-align: center;
}
.review-dialog[open] { display: flex; flex-direction: column; align-items: center; }
.review-dialog::backdrop { background: rgba(19, 0, 58, .6); }
.review-dialog__top { align-self: stretch; display: flex; justify-content: flex-end; margin: 0 -16px 0 0; }
.review-dialog__close {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}
.review-dialog__close:hover { background: var(--lavender-pale); }
.review-dialog__art { display: block; margin: 0 0 16px; }
.review-dialog__title { margin: 0 0 12px; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--indigo); }
.review-dialog__text { margin: 0 0 28px; font-size: 1rem; line-height: 1.6; }
.review-dialog__hint { margin: 8px 0 0; font-size: .8125rem; color: var(--grey); }
.review-dialog form:last-child { align-self: stretch; margin-top: 8px; }
.review-dialog__later {
  width: 100%; min-height: 48px; border: 0; border-radius: var(--pill); background: transparent;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); cursor: pointer;
}
.review-dialog__later:hover { background: var(--lavender-pale); }
@media (max-width: 640px) {
  .review-dialog {
    width: 100vw; max-width: 100vw; margin: auto 0 0; padding: 12px 24px 28px;
    border-radius: 24px 24px 0 0; max-height: 90vh;
  }
  .review-dialog__title { font-size: 1.5rem; }
  .review-dialog__text { margin-bottom: 24px; }
}

/* Your own profile: "Preview" bar above it (people/show.php). */
.preview-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 8px 8px 8px 16px; border-radius: 28px;
  background: var(--lavender-pale); border: 1px solid var(--lavender); color: var(--indigo);
}
.preview-bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.preview-bar p { margin: 0; flex: 1; min-width: 12em; }

/* Filter, design option A (discover/filters.php): a compact list of rows that
   open in place, and a bar at the bottom of the screen. */
.filters { max-width: 760px; margin: 0 auto; }
.flist { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.frow { border-bottom: 1px solid var(--line); }
.frow:last-child { border-bottom: 0; }
.frow__head {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px;
  list-style: none; cursor: pointer;
}
.frow__head::-webkit-details-marker { display: none; }
.frow__head::marker { content: ""; }
.frow__head:hover { background: var(--lavender-pale); }
.frow__head:focus-visible { outline: 3px solid var(--indigo); outline-offset: -3px; }
.frow__label { flex: 1; font-weight: 700; color: var(--indigo); }
.frow__value { color: var(--grey); text-align: right; }
.frow__value.is-set { color: var(--indigo); font-weight: 700; }
.frow__chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--grey); stroke-width: 2; stroke-linecap: round; transition: transform .15s; }
.frow[open] .frow__chev { transform: rotate(180deg); stroke: var(--indigo); }
.frow__body { padding: 2px 22px 20px; }
.frow__body > .field__hint:first-child { margin: 0 0 12px; }
.frow--switch { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px; }
.frow--switch .frow__label { cursor: pointer; }
.flist__group {
  margin: 0; padding: 16px 22px 8px; border-bottom: 1px solid var(--line); background: #FBFAFE;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey);
}
.flist__sub { border: 0; margin: 0 0 14px; padding: 0; }
.flist__sub legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9rem; }
.frange { display: flex; gap: 14px; flex-wrap: wrap; }
.frange > div { flex: 0 1 180px; }
.choices--compact { gap: 8px; }
.choices--compact .choice span { min-height: 40px; padding: 0 16px; font-size: .9rem; }

/* A switch made from a real checkbox, so it keeps its label, focus and states. */
.toggle {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 46px; height: 26px; border-radius: 13px; background: var(--line-2, #C9C4D6); position: relative;
  transition: background .15s;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s;
}
.toggle:checked { background: var(--indigo); }
.toggle--pink:checked { background: var(--pink-text); }
.toggle:checked::after { transform: translateX(20px); }
.toggle:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .toggle, .toggle::after, .frow__chev { transition: none; } }

.fbar {
  position: sticky; bottom: 0; z-index: 5; margin-top: 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--lavender); border-radius: var(--radius);
  background: var(--paper); box-shadow: 0 -8px 24px rgba(24, 0, 84, .08);
}
.fbar__alert { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; }
.fbar__alert label { font-weight: 700; color: var(--indigo); cursor: pointer; }
.fbar__alert .field__hint { display: block; margin: 0; }
@media (max-width: 640px) {
  .frow__head, .frow--switch { padding-left: 16px; padding-right: 16px; }
  .frow__body { padding: 2px 16px 18px; }
  .fbar { border-radius: 16px 16px 0 0; margin: 18px -16px 0; padding: 12px 16px; }
  .fbar .btn--primary { flex: 1; }
}

/* Town suggestions (places-suggest.js), on Offers. */
.place-suggest { position: relative; }
.place-suggest__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--lavender); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(24, 0, 84, .16);
}
.place-suggest__list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.place-suggest__list li:hover, .place-suggest__list li[aria-selected="true"] { background: var(--lavender-pale); }
.place-suggest__list li[aria-selected="true"] { outline: 2px solid var(--indigo); outline-offset: -2px; }
.place-suggest__main { font-weight: 700; color: var(--indigo); }
.place-suggest__more { font-size: .85rem; color: var(--grey); }

/* Announcements, design option C: a grid of cards (content/announcements.php)
   opening each in full (content/announcement.php). */
.ann-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ann-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .15s, transform .15s;
}
.ann-card:hover { box-shadow: 0 10px 28px rgba(24, 0, 84, .1); transform: translateY(-2px); }
.ann-card:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; }
.ann-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--lavender-pale); display: flex; align-items: center; justify-content: center; }
.ann-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-card__media .ann-card__art { width: 40%; height: auto; object-fit: contain; }
.ann-card__new { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 11px; background: #ffffff; color: var(--pink-text); font-size: .75rem; font-weight: 700; }
.ann-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ann-card__date { margin: 0; color: var(--grey); font-size: .85rem; }
.ann-card__title { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.ann-card__title a { color: var(--indigo); text-decoration: none; }
.ann-card__title a::after { content: ""; position: absolute; inset: 0; } /* the whole card opens it */
.ann-card__title a:focus-visible { outline: none; }
.ann-card__text { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.ann-card__likes { margin: auto 0 0; padding-top: 10px; display: flex; align-items: center; gap: 8px; color: var(--grey); font-size: .85rem; }
.ann-card__likes svg, .ann-like__btn svg { width: 22px; height: 22px; flex: none; }
.ann-card__likes svg circle, .ann-like__btn svg circle { fill: #8A8796; }
.ann-card__likes.is-liked svg circle, .ann-like__btn[aria-pressed="true"] svg circle { fill: var(--pink-text); }
.ann-card__likes svg path, .ann-like__btn svg path { fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-linejoin: round; }
@media (max-width: 1000px) { .ann-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ann-grid { grid-template-columns: minmax(0, 1fr); } }

.ann-full { display: flex; flex-direction: column; gap: 10px; }
.ann-full__image { width: 100%; border-radius: var(--radius-sm); margin-bottom: 8px; }
.ann-full__title { margin: 0; }
.ann-full__text { line-height: 1.65; }
.ann-like { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ann-like__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 10px; cursor: pointer;
  border-radius: 22px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-2);
  font: inherit; font-weight: 700; font-size: .9rem;
}
.ann-like__btn:hover { border-color: var(--grey); }
.ann-like__btn[aria-pressed="true"] { background: var(--pink-soft); border-color: #F7B6C7; color: var(--pink-text); }
.ann-like__count { color: var(--grey); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .ann-card { transition: none; } .ann-card:hover { transform: none; } }

/* === Small pages (design option A, 1 Oct 2026) === */
/* Page not found and Something went wrong (errors/404, errors/500): a white
   card on the pale band, the artwork beside the words and two ways on;
   stacked and centred on phones. */
.oops {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 48px 20px 64px; background: var(--lavender-pale);
}
.oops__card {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: center;
  width: 100%; max-width: 880px; padding: 48px 56px;
  background: var(--paper); border-radius: 20px; box-shadow: 0 1px 3px rgba(24, 0, 84, .08);
}
.oops__art { width: 100%; height: auto; }
.oops__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.oops__code { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-text); }
.oops__title { margin: 0; font-size: 2.25rem; line-height: 1.15; }
.oops__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--grey); }
.oops__actions { margin: 10px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.oops__note { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--grey); text-align: center; }

/* The quieter of two buttons: white, a light edge, indigo words. */
.btn--plain { background: var(--paper); border-color: var(--line); color: var(--indigo); }
.btn--plain:hover { background: var(--sunk); color: var(--indigo); }

/* Password changed and Welcome (auth/password-changed, auth/onboarding): the
   sign-in page's two panels, on the pale band, with the words centred
   vertically beside the indigo panel. */
.split--small .split__aside { display: flex; flex-direction: column; }
.split--small .split__aside > a { align-self: flex-start; }
.split--small .split__main { display: flex; align-items: center; padding: 48px clamp(20px, 7vw, 96px); background: var(--lavender-pale); }
.split__aside-art { width: 240px; max-width: 100%; height: auto; margin: auto 0 0 -16px; padding-top: 32px; }
.split__column { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 440px; }
.split__column--wide { gap: 20px; max-width: 560px; }
.split__column h1 { margin: 0; font-size: 2.25rem; line-height: 1.15; }
.split__column .flashes { margin: 0; }
.split__column .lede { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.split__art { width: 200px; height: auto; margin-left: -12px; }
.split__go { margin: 12px 0 0; }
.split__intro { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.split__small-print { margin: 4px 0 0; font-size: .875rem; color: var(--grey); }

/* Welcome's four steps: a pink number beside each. */
.how { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.how__item { display: flex; gap: 16px; align-items: flex-start; }
.how__num {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink-soft); color: var(--pink-text); font-weight: 700;
}
.how__text { margin: 6px 0 0; font-size: .9375rem; line-height: 1.55; }
.how__text strong { color: var(--indigo); }

@media (max-width: 900px) {
  .split--small .split__main { display: block; padding: 24px 16px 40px; }
  .split__aside-art { display: none; }
  .split__column, .split__column--wide { max-width: none; }
  .split__column h1 { font-size: 1.75rem; line-height: 1.2; }
}

@media (max-width: 640px) {
  .oops { padding: 20px 16px 40px; gap: 16px; }
  .oops__card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 24px; text-align: center; justify-items: center; }
  .oops__art { width: 200px; }
  .oops__body { align-items: center; gap: 12px; }
  .oops__title { font-size: 1.75rem; line-height: 1.2; }
  .oops__text { font-size: 1rem; }
  .oops__actions { flex-direction: column; align-self: stretch; margin-top: 8px; }
  .oops__actions .btn, .split__column .btn-row .btn { width: 100%; }
  .how__item { gap: 12px; }
  .how__num { width: 32px; height: 32px; font-size: .875rem; }
  .how__text { margin-top: 4px; font-size: .875rem; }
}

/* === Offers (design option C, 1 Oct 2026) === */
/* The "voucher wall" (content/offers.php): a lavender band with the town
   search, chips that jump to each category, then each offer as a ticket with a
   dashed tear line and a notch at each end. The whole ticket is one link: the
   title's ::after covers it, so any click opens the offer (which records the
   View). The notches are the page colour, so they read as bites. */
.offers-band { background: var(--lavender); }
.offers-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 36px; }
.offers-band__title { margin: 0; font-size: 2.6rem; }
.offers-band__lede { margin: 8px 0 0; color: #3F2F70; font-size: 1.1rem; }
.offers-band__lede:empty { display: none; }
.offers-band .flashes { margin: 16px 0 0; }
.offers-band__art { width: 190px; height: auto; justify-self: center; }

.offers-search { margin-top: 22px; }
.offers-search__row { display: flex; gap: 14px; align-items: flex-end; }
.offers-search__field > label { display: block; margin-bottom: 6px; color: var(--indigo); font-size: .875rem; font-weight: 700; }
.offers-search__field--town { flex: 1; min-width: 0; }
.offers-search__field--sort { width: 210px; flex: none; }
/* The rounded town box: pin, the suggestions combobox and the button in one
   pill. The suggestion list hangs from the whole pill, not just the input. */
.offers-search__town {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 58px; padding: 5px 5px 5px 18px;
  background: var(--paper); border: 1px solid var(--control-edge); border-radius: 29px;
}
.offers-search__town .place-suggest { position: static; flex: 1; min-width: 0; }
.offers-search__town input[type="search"] {
  width: 100%; height: 46px; margin: 0; padding: 0 4px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 17px; color: var(--ink);
}
@supports selector(:has(*)) {
  .offers-search__town:has(input:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 2px; }
  .offers-search__town input[type="search"]:focus-visible { outline: none; }
}
.offers-search__pin { width: 20px; height: 20px; flex: none; fill: none; stroke: #5E4C89; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offers-search__go {
  flex: none; min-height: 48px; padding: 0 26px; cursor: pointer;
  border: 0; border-radius: 24px; background: var(--pink); color: var(--indigo);
  font: inherit; font-size: .95rem; font-weight: 700;
}
.offers-search__go:hover { background: #f9537e; }
.offers-search__select { position: relative; }
.offers-search__select select {
  width: 100%; height: 58px; margin: 0; padding: 0 42px 0 20px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--control-edge); border-radius: 29px; background: var(--paper);
  font: inherit; font-size: 16px; color: var(--ink);
}
.offers-search__select svg {
  position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none;
  fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.offers-search__hint { margin: 10px 0 0; color: #3F2F70; font-size: .875rem; }

.offers-chips { margin-bottom: 32px; }
.offers-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.offers-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: 22px; background: var(--paper);
  color: var(--indigo); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.offers-chip:hover { border-color: var(--indigo); color: var(--indigo); }
.offers-chip__count { color: var(--grey); font-weight: 400; }

.offers-group { margin-bottom: 48px; }
.offers-group:last-child { margin-bottom: 0; }
.offers-group__title { margin: 0 0 18px; font-size: 1.6rem; scroll-margin-top: 16px; }

.voucher-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.voucher {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  transition: border-color .15s, box-shadow .15s;
}
.voucher:hover { border-color: #B9AEDB; box-shadow: 0 10px 28px rgba(24, 0, 84, .08); }
.voucher:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; }
.voucher__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 19px 19px 0 0;
  background: var(--lavender-pale); display: flex; align-items: center; justify-content: center;
}
.voucher__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voucher__media .voucher__art { width: 34%; height: auto; object-fit: contain; }
.voucher__new {
  position: absolute; top: 14px; left: 14px; padding: 4px 12px; border-radius: 12px;
  background: var(--pink); color: var(--indigo);
  font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase;
}
/* The tear line: a dashed rule with a half-circle notch at each edge. */
.voucher__tear, .offer-voucher__tear { position: relative; height: 0; margin: 0 18px; border-top: 2px dashed var(--line-2); }
.voucher__tear::before, .voucher__tear::after,
.offer-voucher__tear::before, .offer-voucher__tear::after {
  content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sunk); border: 1px solid var(--line);
}
.voucher__tear::before, .offer-voucher__tear::before { left: -30px; clip-path: inset(0 0 0 50%); }
.voucher__tear::after, .offer-voucher__tear::after { right: -30px; clip-path: inset(0 50% 0 0); }
.voucher__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.voucher__company, .offer-voucher__company, .offer-more__company {
  margin: 0; color: var(--pink-text); font-size: .75rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase;
}
.voucher__title { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.voucher__link, .offer-more__link { color: var(--indigo); text-decoration: none; }
.voucher__link:hover, .offer-more__link:hover { color: var(--indigo); }
.voucher:hover .voucher__link, .offer-more__item:hover .offer-more__link { text-decoration: underline; }
.voucher__link::after, .offer-more__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; } /* the whole card opens it */
.offer-more__link::after { border-radius: 18px; }
.voucher__link:focus-visible, .offer-more__link:focus-visible { outline: none; }
.voucher__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.voucher__ends { margin: 0; color: var(--grey); font-size: .875rem; }
.voucher__see { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--indigo); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.voucher__see svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) {
  .voucher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offers-band__inner { grid-template-columns: minmax(0, 1fr); }
  .offers-band__art { display: none; }
}
@media (max-width: 640px) {
  .offers-band__inner { padding-top: 22px; padding-bottom: 22px; }
  .offers-band__title { font-size: 1.75rem; }
  .offers-band__lede { font-size: .95rem; }
  .offers-search { margin-top: 16px; }
  .offers-search__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .offers-search__field--sort { width: auto; display: flex; align-items: center; gap: 10px; }
  .offers-search__field--sort > label { margin: 0; flex: none; }
  .offers-search__select { flex: 1; }
  .offers-search__town { height: 54px; padding: 4px 4px 4px 14px; border-radius: 27px; }
  .offers-search__town input[type="search"] { height: 44px; font-size: 16px; }
  .offers-search__go { min-height: 44px; padding: 0 18px; }
  .offers-search__select select { height: 44px; border-radius: 22px; padding-left: 16px; font-size: 15px; }
  .offers-chips { margin-bottom: 22px; }
  .offers-group__title { font-size: 1.3rem; margin-bottom: 12px; }
  .voucher-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .voucher { border-radius: 18px; }
  .voucher__media { border-radius: 17px 17px 0 0; }
  .voucher__link::after { border-radius: 18px; }
  .voucher__body { padding: 14px 16px 16px; }
  .voucher__title { font-size: 1.15rem; }
}

/* One offer (content/offer.php): a single centred voucher over the band, the
   terms below its tear line, then "More in <category>". */
.offer-band { background: var(--lavender); height: 220px; }
.offer-band__back { margin: 0; padding-top: 20px; }
.offer-page { max-width: 760px; margin-top: -150px; padding-bottom: 64px; }
.offer-voucher { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; }
.offer-voucher__image { display: block; width: 100%; border-radius: 23px 23px 0 0; }
.offer-voucher__main { padding: 32px 44px 36px; text-align: center; }
.offer-voucher__title { margin: 10px 0 0; font-size: 2.5rem; }
.offer-voucher__tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.offer-voucher__tag { padding: 5px 14px; border-radius: 16px; background: var(--lavender-pale); border: 1px solid var(--line); color: var(--indigo); font-size: .875rem; font-weight: 600; }
.offer-voucher__tag--category { background: var(--lavender); border-color: var(--lavender); color: #3F2F70; font-weight: 700; }
.offer-voucher__text { max-width: 520px; margin: 22px auto 0; font-size: 1.06rem; line-height: 1.6; color: var(--ink-2); }
.offer-voucher__claim {
  display: flex; width: 100%; max-width: 320px; margin: 28px auto 0; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border-radius: 27px;
  background: var(--pink); color: var(--indigo); font-size: 1.125rem; font-weight: 700; text-decoration: none;
}
.offer-voucher__claim:hover { background: #f9537e; color: var(--indigo); }
.offer-voucher__claim svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.offer-voucher__note { margin: 10px 0 0; color: var(--grey); font-size: .875rem; }
.offer-voucher__tear { margin: 0 24px; }
.offer-voucher__tear::before, .offer-voucher__tear::after { top: -14px; width: 26px; height: 26px; }
.offer-voucher__tear::before { left: -38px; }
.offer-voucher__tear::after { right: -38px; }
.offer-voucher__small { padding: 26px 44px 30px; }
.offer-voucher__terms-title { margin: 0; font-size: 1.06rem; }
.offer-voucher__terms { margin-top: 10px; color: var(--grey); font-size: .94rem; }
.offer-voucher__added { margin: 14px 0 0; color: var(--grey); font-size: .8rem; }

.offer-more { margin-top: 44px; }
.offer-more__title { margin: 0 0 16px; font-size: 1.4rem; }
.offer-more__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.offer-more__item {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  transition: border-color .15s;
}
.offer-more__item:hover { border-color: #B9AEDB; }
.offer-more__item:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; }
.offer-more__thumb {
  flex: none; width: 96px; height: 96px; overflow: hidden; border-radius: 12px;
  background: var(--lavender-pale); display: flex; align-items: center; justify-content: center;
}
.offer-more__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-more__thumb .offer-more__art { width: 60%; height: auto; object-fit: contain; }
.offer-more__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.offer-more__company { font-size: .7rem; }
.offer-more__name { margin: 0; font-size: 1.06rem; font-weight: 800; line-height: 1.3; }
.offer-more__ends { margin: 0; color: var(--grey); font-size: .8rem; }
@media (max-width: 640px) {
  .offer-band { height: 150px; }
  .offer-band__back { padding-top: 14px; }
  .offer-page { margin-top: -80px; }
  .offer-voucher { border-radius: 20px; }
  .offer-voucher__image { border-radius: 19px 19px 0 0; }
  .offer-voucher__main { padding: 24px 20px 26px; }
  .offer-voucher__title { font-size: 1.75rem; }
  .offer-voucher__text { font-size: 1rem; }
  .offer-voucher__tear { margin: 0 16px; }
  .offer-voucher__tear::before { left: -30px; }
  .offer-voucher__tear::after { right: -30px; }
  .offer-voucher__small { padding: 22px 20px 24px; }
  .offer-more__list { grid-template-columns: minmax(0, 1fr); }
  .offer-more__thumb { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) { .voucher, .offer-more__item { transition: none; } }

/* === Likes and Views (design option A, 1 Oct 2026) === */
/* Likes (people/likes.php): Received and Sent as link tabs, a 10-step meter
   for the open tab, then a grid of cards with round Pass and Like back
   buttons, or Withdraw. Views (people/views.php) uses the same grid with
   Discover's card and no buttons. Everything is scoped to .lv-*, so
   Discover's own grid is unchanged. */
.lv-tabs {
  display: inline-flex; gap: 8px; margin: 0 0 16px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
}
.lv-tabs a {
  min-height: 48px; padding: 0 26px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; color: var(--indigo); text-decoration: none; font-size: .95rem; font-weight: 700;
}
.lv-tabs a:hover { background: var(--lavender-pale); color: var(--indigo); }
.lv-tabs a[aria-current="page"] { background: var(--indigo); color: #ffffff; }
.lv-tabs__count { padding: 3px 10px; border-radius: 999px; background: var(--lavender); color: var(--indigo); font-size: .8rem; }
.lv-tabs a[aria-current="page"] .lv-tabs__count { background: var(--pink); color: var(--indigo); }

.lv-meter {
  display: flex; align-items: center; gap: 20px; margin: 0 0 24px; padding: 16px 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
}
.lv-meter__bars { display: flex; gap: 4px; flex: none; }
.lv-meter__bars span { width: 18px; height: 8px; border-radius: 4px; background: var(--lavender); }
.lv-meter__bars span.is-on { background: var(--pink); }
.lv-meter__text { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.lv-meter__text strong { color: var(--indigo); }
.lv-meter--full { border-color: var(--warn); background: var(--warn-soft); }

.lv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lv-grid .person { border-radius: 18px; }
.lv-grid .person__body { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lv-grid .person__heading { font-size: 1.15rem; }
.lv-grid .person__name { font-weight: 800; font-size: 1.15rem; }
.lv-grid .person__name:hover { color: var(--pink-text); }
.lv-grid .person__meta { margin: 0; font-size: .875rem; }
/* "Liked your profile" as a tag, on Views and Likes alike */
.lv-grid .person__liked {
  align-self: flex-start; margin: 4px 0 0; padding: 4px 12px; border-radius: 999px;
  background: var(--pink-soft); color: var(--pink-text); font-size: .8rem; line-height: 1.4;
}
.lv-grid--views .person__body { padding-bottom: 18px; }

.lv-pill {
  position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.2;
}
.lv-pill--super { left: 12px; background: var(--indigo); color: #ffffff; }
.lv-pill--super svg { width: 14px; height: 14px; fill: var(--pink); }
.lv-pill--new { right: 12px; background: #ffffff; color: var(--pink-text); }

.lv-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 16px 16px;
}
.lv-actions__profile {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--indigo); font-size: .9rem; font-weight: 700;
}
.lv-actions__profile:hover { color: var(--pink-text); }
.lv-actions__round { display: flex; gap: 10px; margin-left: auto; }
.lv-round {
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--indigo); cursor: pointer; text-decoration: none;
}
.lv-round svg { width: 22px; height: 22px; }
.lv-round--pass { background: var(--paper); border: 1.5px solid var(--control-edge); }
.lv-round--pass svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.lv-round--pass:hover { background: var(--lavender-pale); color: var(--indigo); }
.lv-round--like { background: var(--pink); border: 0; }
.lv-round--like svg { fill: currentColor; }
.lv-round--like:hover { background: #f9537e; }
.lv-round:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 50%; }
.lv-withdraw { min-height: 44px; padding: 0 14px; border-color: var(--control-edge); color: var(--indigo); font-size: .9rem; font-weight: 700; }
.lv-withdraw:hover { color: var(--indigo); }

.lv-confirm { padding: 0 16px 16px; }
.lv-confirm__question { margin: 0 0 10px; font-weight: 700; color: var(--indigo); font-size: .9rem; }
.lv-confirm__more { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-2); }
.lv-confirm__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-confirm__buttons .inline-form { display: flex; flex: 1 1 auto; }
.lv-confirm__buttons .btn { flex: 1 1 auto; min-height: 44px; padding: 0 14px; font-size: .9rem; }

.lv-tile {
  grid-column: span 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border: 2px dashed #CFC4EE; border-radius: 18px;
}
.lv-tile__text { margin: 0; color: var(--indigo); font-size: .95rem; line-height: 1.4; }
.lv-tile .btn { min-height: 44px; padding: 0 20px; font-size: .9rem; }

@media (max-width: 1000px) {
  .lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lv-grid .person { border-radius: 16px; }
  .lv-grid .person__body { padding: 12px 12px 10px; }
  .lv-grid .person__heading, .lv-grid .person__name { font-size: 1.05rem; }
  .lv-actions, .lv-confirm { padding: 0 12px 12px; }
  .lv-actions__profile { order: 2; width: 100%; justify-content: center; }
  .lv-actions__round { margin: 0 auto; }
  .lv-pill { top: 8px; padding: 4px 9px; font-size: .72rem; }
  .lv-pill--super { left: 8px; }
  .lv-pill--new { right: 8px; }
  .lv-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; padding: 5px; }
  .lv-tabs a { padding: 0 10px; gap: 8px; }
  .lv-meter { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .lv-meter__bars span { flex: 1 1 0; width: auto; }
  .lv-meter__text { font-size: .9rem; }
}

/* === Account sub-pages (pattern B, 1 Oct 2026) === */
/* Openers, Notifications, Knowledge base, Blocked people, Known ghosts, Your
   location and Delete your profile: a white header band (partials/subpage-header)
   with the back link, an icon tile, the section and the title, then the page's
   cards in one centred 760px column on the pale lavender page. */
body:has(.sub-head) { background: var(--lavender-pale); }

.sub-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.sub-head__in { max-width: 760px; margin: 0 auto; padding: 22px 20px 30px; }
.sub-head .backlink { min-height: 44px; padding: 0 18px 0 12px; border-radius: 22px; font-size: .95rem; }
.sub-head__row { display: flex; align-items: center; gap: 18px; margin-top: 24px; flex-wrap: wrap; }
.sub-head__tile {
  width: 60px; height: 60px; border-radius: 18px; background: var(--lavender);
  display: grid; place-items: center; flex: none;
}
.sub-head__tile svg { width: 30px; height: 30px; fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sub-head__titles { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sub-head__section {
  margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey);
}
.sub-head__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.125rem); }
.sub-head__aside { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.sub-head__lede { margin: 16px 0 0; max-width: 62ch; color: var(--grey); }

/* The column under the band. Flashes land here (<!--flashes-->), above the cards. */
.sub-body { max-width: 760px; margin: 0 auto; padding: 28px 20px 72px; display: flex; flex-direction: column; gap: 18px; }
.sub-body > .flashes { margin: 0; }
.sub-body > .error-summary, .sub-body > .notice { margin: 0; }
/* At least 44px, so every target on these pages is big enough to tap. */
.sub-body .btn--small { min-height: 44px; border-radius: 22px; }

.sub-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px 26px; display: flex; flex-direction: column; gap: 14px;
}
.sub-card > * { margin: 0; }
.sub-card--flush { padding: 0; overflow: hidden; display: block; }
.sub-card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sub-card__title { margin: 0; font-size: 1.25rem; font-family: var(--display); font-weight: 800; color: var(--indigo); }
.sub-card__text { margin: 0; color: var(--ink-2); }
.sub-card__panel { display: flex; flex-direction: column; gap: 12px; }
.sub-card__panel > * { margin: 0; }
.sub-card__panel[hidden] { display: none; }
.sub-card__foot {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  border-top: 1px solid var(--line); padding-top: 18px;
}
.sub-card__foot--split { justify-content: space-between; }
.sub-card .field { margin: 0; }
.sub-card fieldset { margin: 0; min-width: 0; }
.sub-card legend.sub-card__title { margin-bottom: 12px; }

/* Notifications: the browser state beside its heading (push.js shows one). */
.sub-pill {
  margin-left: auto; display: inline-flex; align-items: center;
  font-size: .82rem; font-weight: 700; padding: 3px 12px; border-radius: 99px; line-height: 1.4;
}
.sub-pill[hidden] { display: none; }
.sub-pill--off { background: var(--lavender); color: #4B3F78; }
.sub-pill--blocked { background: var(--pink-soft); color: #A31E47; }
.sub-pill--on { background: var(--good-soft); color: #1D6B3A; }
.sub-steps { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 6px; }

/* Rows of switches in a card: each row edge to edge, a rule between them. */
.sub-card--rows { padding: 22px 0; gap: 0; }
.sub-card--rows > .sub-card__title { padding: 0 26px 14px; }
.sub-card--rows > .sub-card__foot { margin: 18px 26px 0; }
.sub-row { display: flex; align-items: center; gap: 20px; padding: 16px 26px; border-top: 1px solid var(--line); min-height: 64px; }
.sub-row__text { flex: 1; min-width: 0; }
.sub-row__text label { display: block; font-weight: 700; color: var(--indigo); cursor: pointer; }
.sub-row__text .field__hint { margin-top: 2px; font-size: .875rem; }
.sub-row .switch { width: 48px; height: 28px; }
.sub-row .switch::after { width: 22px; height: 22px; }
.sub-row .switch:checked::after { transform: translateX(20px); }

/* Openers: the three slots beside the title. */
.sub-slots { display: flex; gap: 6px; }
.sub-slots__slot { width: 36px; height: 8px; border-radius: 4px; background: var(--lavender); }
.sub-slots__slot.is-used { background: var(--pink-text); }
.sub-slots__text { font-size: .875rem; font-weight: 700; color: var(--indigo); }

/* Openers: partials/openers-fields is shared with registration, so its fields
   are drawn as cards from here. An answered opener (it has a Delete link) is a
   solid card; an open prompt is dashed, waiting for an answer. */
.sub-openers > .error-text { margin: 0; }
.sub-openers form > fieldset { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sub-openers form > fieldset > .fieldset__legend { font-size: .95rem; color: var(--indigo); margin-bottom: 8px; }
.sub-openers form > fieldset > .field__hint { margin: 0 !important; font-size: .875rem; }
.sub-openers form > fieldset > .field {
  margin: 0; padding: 22px 26px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 20px;
}
.sub-openers form > fieldset > .field:not(:has(a[href^="/openers/delete"])) { border: 1px dashed #B9ADDB; }
.sub-openers form > fieldset > .field > label,
.sub-openers form > fieldset > .field > p:first-child {
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--indigo); margin: 0 0 10px;
}
.sub-openers .sub-savebar { margin-top: 18px; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 26px; }
.sub-savebar__text { flex: 1 1 260px; color: var(--grey); font-size: .875rem; }

/* Knowledge base: two columns of cards; the title's link covers the card. */
.sub-kb { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sub-kb__item {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
}
.sub-kb__item--link:hover { border-color: #B9ADDB; }
.sub-kb__item--link:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; }
.sub-kb__title { margin: 0; display: flex; align-items: flex-start; gap: 10px; font-size: 1.05rem; line-height: 1.3; }
.sub-kb__title a { flex: 1; color: var(--indigo); text-decoration: none; }
.sub-kb__title a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.sub-kb__title a:focus-visible { outline: none; }
.sub-kb__item--link:hover .sub-kb__title a { text-decoration: underline; }
.sub-kb__out { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--indigo-mid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sub-kb__text { color: var(--grey); font-size: .875rem; line-height: 1.5; }
.sub-kb__text p { margin: 0 0 .5em; }
.sub-kb__text p:last-child { margin-bottom: 0; }
.sub-ask { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; align-items: center; }
.sub-ask__art { width: 100%; height: auto; }
.sub-ask__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sub-ask__body > * { margin: 0; }

/* Blocked people and Known ghosts: one card per person. */
.sub-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sub-person { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 22px; }
.sub-person__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--lavender); color: var(--indigo);
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.1rem;
}
.sub-person__name { flex: 1; min-width: 0; font-weight: 700; color: var(--indigo); overflow-wrap: anywhere; }
.sub-person__ask { flex-basis: 100%; font-weight: 700; color: var(--indigo); }
.sub-person__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Your location: where the person is now, beside the title. */
.sub-now { margin: 0; line-height: 1.35; }
.sub-now__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.sub-now strong { color: var(--indigo); font-size: 1.05rem; }
.sub-search__icon {
  position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; pointer-events: none;
  fill: none; stroke: var(--grey); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sub-search input[type="search"] { padding-left: 44px; }
.sub-search .place-suggest__list li { min-height: 52px; justify-content: center; }
.sub-field > label { font-size: .95rem; color: var(--indigo); }
.sub-place { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--lavender-pale); font-weight: 700; color: var(--indigo); }
.sub-place svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Choose-one lists (location matches, reasons to delete): real radios, visible, in tappable rows. */
.sub-options { display: flex; flex-direction: column; gap: 8px; }
.sub-option {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); cursor: pointer; font-size: .95rem;
}
.sub-option input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--indigo); }
.sub-option:hover { border-color: var(--control-edge); }
.sub-option:has(input:checked) { border-color: var(--indigo); background: var(--lavender-pale); font-weight: 600; color: var(--indigo); }

/* Delete your profile: what goes, and the gentler alternative. */
.sub-warn { background: var(--pink-soft); border-radius: 20px; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.sub-warn > * { margin: 0; }
.sub-warn__title { margin: 0; font-size: 1.25rem; color: #8E1A3D; }
.sub-warn__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sub-warn__list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper); border-radius: 12px; font-weight: 600; color: var(--indigo); }
.sub-warn__list svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #B42318; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sub-warn__alt { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.sub-warn__alt p { flex: 1 1 280px; margin: 0; }
.sub-confirm {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px; cursor: pointer;
  border: 2px solid var(--magenta); border-radius: 14px; font-weight: 600;
}
.sub-confirm input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: #b4008f; }
.sub-confirm + .error-text { margin-top: -6px; }

@media (max-width: 640px) {
  .sub-head__in { padding: 16px 16px 24px; }
  .sub-head__row { gap: 14px; margin-top: 18px; }
  .sub-head__tile { width: 48px; height: 48px; border-radius: 14px; }
  .sub-head__tile svg { width: 24px; height: 24px; }
  .sub-head__aside { margin-left: 0; flex-basis: 100%; align-items: flex-start; text-align: left; }
  .sub-body { padding: 20px 16px 56px; }
  .sub-card { padding: 20px; }
  .sub-card--rows { padding: 20px 0; }
  .sub-card--rows > .sub-card__title { padding: 0 20px 12px; }
  .sub-card--rows > .sub-card__foot { margin: 18px 20px 0; }
  .sub-row { padding: 14px 20px; gap: 14px; }
  .sub-openers form > fieldset > .field { padding: 18px 20px; }
  .sub-openers .sub-savebar { padding: 16px 20px; }
  .sub-openers .sub-savebar .btn { flex: 1; }
  .sub-card__foot .btn { flex: 1 1 auto; }
  .sub-kb { grid-template-columns: minmax(0, 1fr); }
  .sub-ask { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .sub-warn { padding: 20px; }
  .sub-warn__list { grid-template-columns: minmax(0, 1fr); }
  .sub-person { padding: 14px 16px; }
}

/* === Edit profile (design option A, 1 Oct 2026) === */
/* My profile (account/profile.php): Filter's rows that open in place (.flist,
   .frow, .fbar above), grouped under headings, with photos and verification in
   a side column on a wide screen and above the rows on a phone. */
.pedit {
  display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 0 32px; align-items: start;
  grid-template-areas: "head side" "form side";
  max-width: 1048px; margin: 0 auto;
}
.pedit__head { grid-area: head; min-width: 0; }
.pedit__head h1 { margin-bottom: .25em; }
.pedit__form { grid-area: form; min-width: 0; }
.pedit__group { font-size: 1.1rem; margin: 28px 4px 10px; }

/* Rows: what is on the profile now in grey, "Not added yet" in pink. */
.pedit .frow__label { flex: 0 1 auto; max-width: 45%; }
.pedit .frow__value {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--pink-text); font-weight: 700;
}
.pedit .frow__value.is-set { color: var(--grey); font-weight: 400; }
.frow--link { color: inherit; text-decoration: none; }
.frow--link:hover { color: inherit; }
.pedit .frow__body fieldset, .pedit .frow__body > .field, .pedit .frange > .field { margin-bottom: 0; }
.pedit .frow__body fieldset > .field__hint { margin: 0 0 12px; }
.pedit .frow__body .fieldset__legend { margin-bottom: 10px; }
.pedit .frange { max-width: 560px; }
.pedit .frange > .field { flex: 1 1 140px; }
.pedit__narrow { max-width: 320px; }
.pedit__notice { margin: 16px; }

/* Save bar: "changes not saved yet" (filters.js) on the left, buttons on the right. */
.pedit__unsaved { flex: 1 1 auto; margin: 0; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.pedit__unsaved:empty { display: none; }
.pedit__bar .btn--quiet { margin-left: auto; }

/* Side column: photos, verification, and the profile as others see it. */
.pedit__side { grid-area: side; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.pedit__side .card { padding: 20px; }
.pedit__side h2 { font-size: 1.1rem; margin: 0; }
.pedit__photos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.pedit__count { font-size: .85rem; color: var(--grey); }
.pedit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.pedit__thumb { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); background: var(--lavender); }
.pedit__add {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  aspect-ratio: 3 / 4; min-height: 44px; border: 2px dashed var(--control-edge); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--indigo); font-size: .8rem; font-weight: 700; text-decoration: none;
}
.pedit__add:hover { background: var(--lavender-pale); color: var(--indigo); }
.pedit__add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pedit__add--slot { border-color: var(--line-2); }
.pedit__verify { background: var(--pink-soft); border-color: #F8D3DC; }
.pedit__verify h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pedit__verify p { font-size: .9rem; margin: 0 0 14px; }
.pedit__verify p:last-child { margin-bottom: 0; }
.pedit__verify--done { background: var(--paper); border-color: var(--line); }
.pedit__verify--done .vtick { width: 1.1em; height: 1.1em; }
.pedit__shield { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--pink-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .pedit { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "form"; }
  .pedit__side { position: static; padding-top: 8px; }
  .pedit__verify { order: -1; } /* on a phone the verification call comes first, as the apps show it */
  .pedit__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 640px) {
  .pedit .frow__label { max-width: 55%; }
  .pedit__add-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .pedit__unsaved { flex-basis: 100%; }
  .pedit__bar .btn--quiet { margin-left: 0; }
}

/* === Chat (design option A, 1 Oct 2026) === */
/* Split cards (chat/index.php): the list card and the conversation card side by
   side, each scrolling on its own. The conversation's header has the person,
   Voice call and Video call (indigo), then the quiet Mute, Report and Block; on
   a narrower screen those three move to a strip under the header. On a phone
   one card shows at a time: the list at /chat, the conversation (with Back) at
   /chat/{room}, and the call buttons become round. Their bubbles lavender,
   yours indigo. Report and Block (chat/report.php, chat/block.php) match. */
.chat {
  display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px;
  height: clamp(520px, calc(100vh - 150px), 900px);
}
.chat-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
}
.chat-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A member's picture: their photo filling the circle, or their initial (chat/avatar.php). */
.chat-av {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  background: var(--lavender); color: var(--indigo); font-weight: 700; font-size: 1.125rem; line-height: 1;
}
.chat-av img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.chat-av--lg { width: 56px; height: 56px; font-size: 1.3rem; }
.chat-av--xl { width: 76px; height: 76px; font-size: 1.75rem; }

/* The list */
.chat__list { border: 1px solid var(--line); }
.chat__list-title { margin: 0; padding: 20px 20px 8px; font-size: 1.375rem; }
.chat__rows { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.chat-row {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px;
  border-radius: 14px; color: var(--ink); text-decoration: none;
}
.chat-row:hover { background: var(--lavender-pale); color: var(--ink); }
.chat-row[aria-current="page"] { background: var(--lavender); }
.chat-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-row__who { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: .94rem; color: var(--indigo); }
.chat-row__preview { font-size: .875rem; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row__preview--new { color: var(--ink); font-weight: 600; }
.chat-row__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: .75rem; color: var(--grey); }
/* Grey is under 4.5:1 on lavender, so the open conversation's row uses a darker one. */
.chat-row[aria-current="page"] .chat-row__preview,
.chat-row[aria-current="page"] .chat-row__side { color: #4E4E60; }
.chat-row__muted { display: inline-flex; align-items: center; gap: 4px; }
.chat-row__muted .chat-ic { width: 14px; height: 14px; }

/* The conversation's header */
.chat__choose { margin: auto; }
.chat-head {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.chat-head__back {
  display: none; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--indigo);
}
.chat-head__back:hover { background: var(--lavender-pale); color: var(--indigo); }
.chat-head__back .chat-ic { width: 22px; height: 22px; }
.chat-head__who {
  flex: 1 1 auto; min-width: 0; min-height: 44px; margin-right: 8px;
  display: flex; align-items: center; gap: 12px; color: var(--indigo); text-decoration: none;
}
.chat-head__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-head__name { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 1.2rem; }
.chat-head__profile { font-size: .8125rem; font-weight: 600; color: var(--pink-text); text-decoration: underline; text-underline-offset: 2px; }
a.chat-head__who:hover { color: var(--indigo); }
a.chat-head__who:hover .chat-head__profile { color: var(--pink-text-hover); }
.chat-head__calls, .chat-head__safety { display: flex; align-items: center; gap: 8px; }
.chat-head .inline-form { display: flex; }
/* .inline-form's display beat the hidden attribute, so the call buttons showed even where a call cannot work. */
.chat-head .inline-form[hidden] { display: none; }
.chat-head .btn--small { min-height: 44px; padding: 0 14px; gap: 6px; font-size: .8125rem; font-weight: 700; }
.chat-head .btn--quiet { color: var(--indigo); }
.chat-head .btn--quiet:hover { background: var(--lavender-pale); color: var(--indigo); }
.chat-head__rule { width: 1px; height: 28px; margin: 0 4px; background: var(--line); }
.chat-head__calls:not(:has(form:not([hidden]))) + .chat-head__rule { display: none; }

/* Messages: the list scrolls inside the card; a short conversation sits at the bottom. */
.messages {
  list-style: none; margin: 0; padding: 20px 24px; flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; background: var(--paper);
}
.messages > :first-child { margin-top: auto; }
.message { flex: none; display: flex; flex-direction: column; max-width: 72%; }
.message--theirs { align-self: flex-start; align-items: flex-start; }
.message--mine { align-self: flex-end; align-items: flex-end; }
.message__bubble { margin: 0; padding: 10px 14px; border-radius: 18px; font-size: .94rem; line-height: 1.45; overflow-wrap: anywhere; }
.message--theirs .message__bubble { background: var(--lavender); color: var(--ink); border-bottom-left-radius: 6px; }
.message--mine .message__bubble { background: var(--indigo); color: #ffffff; border-bottom-right-radius: 6px; }
.message__meta { margin: 4px 6px 0; font-size: .75rem; color: var(--grey); }
.message-day {
  flex: none; align-self: center; list-style: none; margin: 6px 0; padding: 4px 12px; border-radius: 999px;
  background: var(--lavender-pale); color: var(--grey); font-size: .75rem; font-weight: 600;
}
.message .scam-warning { align-self: stretch; }
/* A photo or video: no bubble, rounded corners */
.message .message__bubble.message__bubble--media { padding: 0; background: none; border-radius: 16px; overflow: hidden; }
.message__bubble--media img { display: block; max-width: min(260px, 100%); height: auto; border-radius: 16px; }
.message__bubble--media .message__video { border-radius: 16px; }
/* A missed or unanswered call: a bubble with a round phone badge, as in the apps; pressing it calls back */
.message__call-form { margin: 0; }
.message__bubble--call {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border: 0;
  font: inherit; font-size: .94rem; text-align: left; cursor: pointer;
}
.message--theirs .message__bubble--call { font-weight: 600; }
.message__bubble--call:hover { box-shadow: 0 0 0 2px #CFC3EF; }
.call-badge { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.call-badge--mine { background: #ffffff; color: var(--indigo); }
.call-badge--missed { background: #D93036; color: #ffffff; }
.call-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Red Flags: a white bubble outlined in red, the flag beside it, and the pink line under it */
.message__flagged { display: flex; align-items: flex-start; gap: 6px; max-width: 100%; }
.message--theirs .message__bubble--flagged { background: var(--paper); border: 2px solid #D93036; }
.message__text { min-width: 0; overflow-wrap: anywhere; }
.redflag-btn { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.redflag-btn svg { width: 30px; height: 30px; display: block; }
.redflag-btn:hover svg circle { fill: #FFE4E6; }
.message__flaglink {
  margin: 6px 6px 0; min-height: 24px; display: inline-flex; align-items: center;
  font-size: .8125rem; font-weight: 700; color: var(--pink-text); text-decoration: none;
}
.message__flaglink:hover { color: var(--pink-text-hover); text-decoration: underline; }
/* "Typing": the three dots in a lavender bubble on their side */
.typing__dot { background: #4E4E60; }

/* Writing a message */
.composer { flex: none; display: block; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--paper); }
.composer__row { display: flex; align-items: flex-end; gap: 12px; }
.composer__box { flex: 1; min-width: 0; }
.composer textarea {
  display: block; width: 100%; min-height: 48px; max-height: 160px; padding: 12px 18px;
  border-radius: 24px; background: var(--lavender-pale); font-size: .94rem; line-height: 1.45;
  resize: none; field-sizing: content;
}
.composer textarea::placeholder { color: var(--grey); }
.composer__attach {
  flex: none; width: 44px; height: 44px; margin-bottom: 2px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line); color: var(--indigo);
}
.composer__attach:hover { background: var(--lavender-pale); }
.composer__file:focus-visible + .composer__attach { outline: 3px solid var(--indigo); outline-offset: 2px; }
.composer__send { flex: none; min-height: 48px; padding: 0 24px; gap: 8px; }
.composer__hint { margin: 8px 0 0 56px; font-size: .78rem; color: var(--grey); }
.composer__chosen { font-weight: 600; color: var(--indigo); }
.composer__chosen:empty { display: none; }

/* Report and Block */
.chat-sheet-page { max-width: 560px; margin: 0 auto; }
.chat-sheet-page--narrow { max-width: 480px; }
.chat-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--indigo); font-size: .875rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.chat-back:hover { color: var(--indigo-mid); }
.chat-sheet { margin-top: 8px; padding: 32px 36px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.chat-sheet__head { display: flex; align-items: center; gap: 14px; }
.chat-sheet h1 { margin: 0; font-size: 1.75rem; }
.chat-sheet .lede { margin: 14px 0 0; font-size: 1rem; line-height: 1.55; color: #4E4E60; }
.report-form { margin-top: 22px; display: flex; flex-direction: column; gap: 22px; }
.report-form .error-summary { margin: 0; }
.report-form__reasons { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.report-form__reasons legend { margin-bottom: 10px; font-size: .94rem; font-weight: 700; color: var(--indigo); }
.report-form__reasons .error-text { margin: 0 0 4px; }
.report-reason {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper);
  font-size: .94rem; font-weight: 600; color: var(--ink);
}
.report-reason:hover { background: var(--lavender-pale); }
.report-reason input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--indigo); cursor: pointer; }
.report-reason:has(input:checked) { padding: 0 17px; border: 2px solid var(--indigo); background: var(--lavender-pale); }
.report-form__note { margin: 0; }
.report-form__note > label { font-size: .94rem; color: var(--indigo); }
.report-form__note textarea { min-height: 110px; border-radius: 14px; }
.chat-sheet__notice {
  margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: var(--lavender); color: var(--indigo); font-size: .875rem; font-weight: 600;
}
.chat-sheet--centre { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px; }
.chat-sheet--centre h1 { margin-top: 20px; }
.chat-sheet__who { position: relative; }
.chat-sheet__blocked {
  position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-text); color: #ffffff; border: 3px solid var(--paper);
}
.chat-sheet__blocked .chat-ic { width: 16px; height: 16px; }
.chat-confirm { margin-top: 26px; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.chat-confirm form { margin: 0; }
.chat-confirm .btn { width: 100%; }
.chat-confirm .btn--quiet { color: var(--indigo); font-weight: 700; }
.chat-confirm .btn--danger { background: var(--pink-text); border-color: var(--pink-text); color: #ffffff; }
.chat-confirm .btn--danger:hover { background: var(--pink-text-hover); border-color: var(--pink-text-hover); color: #ffffff; }
.chat-sheet__aside { margin: 20px 0 0; font-size: .875rem; color: #4E4E60; }
.chat-sheet__aside a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* Narrower screens: Mute, Report and Block in a strip under the header. */
@media (max-width: 1180px) {
  .chat-head__rule { display: none; }
  .chat-head__safety {
    order: 5; flex: 1 0 100%; margin: 6px -20px -14px; padding: 8px 20px;
    background: var(--lavender-pale); border-top: 1px solid var(--line);
  }
  .chat-head__safety > * { flex: 1 1 0; }
  .chat-head__safety .btn { width: 100%; }
}

/* A phone: one card at a time, Back to the list, round call buttons, a round Send. */
@media (max-width: 900px) {
  .chat { grid-template-columns: minmax(0, 1fr); gap: 0; height: calc(100vh - 24px); height: calc(100svh - 24px); min-height: 460px; }
  .chat:not(.chat--open) { height: auto; min-height: 0; }
  .chat--open .chat__list, .chat:not(.chat--open) .chat__pane { display: none; }
  .chat__list { border: 1px solid var(--line); }
  .chat-head { padding: 10px 12px 10px 6px; }
  .chat-head__back { display: inline-flex; }
  .chat-head__who { gap: 10px; margin-right: 0; }
  .chat-head .chat-av { width: 40px; height: 40px; font-size: 1rem; }
  .chat-head__name { font-size: 1.06rem; }
  .chat-head__profile { font-size: .75rem; }
  .chat-head .chat-head__call { width: 44px; padding: 0; border-radius: 50%; }
  .chat-head__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chat-head__safety { margin: 6px -12px -10px -6px; padding: 8px 12px; }
  .messages { padding: 14px 16px; gap: 8px; }
  .message { max-width: 85%; }
  .composer { padding: 12px; }
  .composer__row { gap: 8px; }
  .composer__send { width: 48px; padding: 0; border-radius: 50%; }
  .composer__send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .composer__hint { margin-left: 52px; }
  .chat-sheet { padding: 24px 20px; }
}

/* === Call screens (design option B, 1 Oct 2026) === */
/* The call (call/show) and the incoming call (call/incoming) fill the window, as
   the apps' screens do: the layout drops the masthead and footer for /call
   (body.call-page). Option B's dark, full-screen look, with option A's words
   under each round button so nobody has to guess what an icon means. */
body.call-page { background: var(--indigo); }
.call {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--indigo); color: #ffffff;
}
/* Placed by row, since the middle leaves the flow when their video shows (below). */
.call__bar { grid-row: 1; }
.call__who { grid-row: 2; }
.call__dock { grid-row: 3; }
.call--video { background: #2A2340; }
/* Bars around a picture that doesn't fill the window are black, as in the apps */
.call--remote-video { background: #000000; }
.call :focus-visible { outline-color: #ffffff; }
.call__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.call kbd, .incoming-call kbd {
  font: 600 12px/1 var(--sans); color: #ffffff;
  border: 1px solid rgba(207, 198, 236, .5); border-radius: 6px; padding: 3px 6px;
}

/* The bar across the top: the logo (a plain image: nothing here leaves the call) and
   the heading. Translucent over video, so the picture runs under it. */
.call__bar {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  min-height: 68px; padding: 0 32px;
}
.call--video .call__bar { background: rgba(14, 10, 26, .72); }
.call__logo { display: block; width: 120px; height: 44px; }
.call__title { grid-column: 2; margin: 0; max-width: min(520px, 40vw); color: #ffffff; font-size: 1.125rem; text-align: center; }

/* The other person's video: the whole window, under everything else. */
.call__remote { position: absolute; inset: 0; z-index: 0; }

/* The middle: their photo (or initial), name, the state and the timer. */
.call__who {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 32px 20px; text-align: center;
}
.call__avatar {
  flex: none; width: 160px; height: 160px; margin-bottom: 44px;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 18px rgba(232, 225, 249, .10), 0 0 0 40px rgba(232, 225, 249, .05);
}
.call__avatar--initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--pink); color: var(--indigo); font: 800 64px/1 var(--display);
}
.call__name { margin: 0; color: #ffffff; font: 800 2.75rem/1.15 var(--display); overflow-wrap: anywhere; }
.call__status { margin: 0; max-width: 640px; color: #DCD5F2; font-size: 1rem; text-wrap: balance; }
.call__hint { margin: 0; color: #DCD5F2; }
.call__timer {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0;
  font: 700 1.75rem/1 var(--sans); font-variant-numeric: tabular-nums;
}
.call__timer[hidden] { display: none; }
.call__timer-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.call__noscript, .call__who .flashes { max-width: 520px; margin: 16px 0 0; color: var(--ink-2); text-align: left; }
/* Before the other person is there the state is the big line ("Calling Anna…"); once
   connected their name is, with the state and the timer under it (boards B3 and B5). */
.call:not(.call--connected) .call__name { display: none; }
.call:not(.call--connected) .call__status { color: #ffffff; font: 800 2rem/1.2 var(--display); }
.call--connected .call__hint { display: none; }

/* Their video is showing: the middle moves up into the bar, the state and a timer pill
   on the right (board B4), and the picture has the window. */
.call--remote-video .call__avatar,
.call--remote-video .call__name,
.call--remote-video .call__hint { display: none; }
.call.call--remote-video .call__who {
  position: absolute; top: 0; right: 32px; z-index: 3;
  height: 68px; padding: 0; flex-direction: row; gap: 12px;
}
.call.call--remote-video .call__status { max-width: 280px; color: #DCD5F2; font: 400 .875rem/1.3 var(--sans); text-align: right; }
.call--remote-video .call__timer {
  margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); font-size: .95rem;
}
.call--remote-video .call__timer-dot { display: inline-block; }

/* You, in the corner. */
.call__self {
  position: absolute; z-index: 2; top: 92px; right: 32px;
  width: 256px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; border: 2px solid rgba(255, 255, 255, .2); background: #3A3352;
}
.call__self[hidden] { display: none; }
.call__local { position: absolute; inset: 0; }
.call--camera-off .call__local { opacity: .35; }
.call__you {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(14, 10, 26, .7); color: #ffffff; font: 600 12px/1 var(--sans);
}

/* The bottom: the 60-minute notice, "Turn on sound" when the browser holds sound back,
   and the controls. */
.call__dock {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 16px 32px;
}
.call__limit {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 10px 18px; border-radius: 999px;
  background: var(--lavender); color: var(--indigo); font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 24px rgba(14, 10, 26, .35);
}
.call__limit[hidden] { display: none; }
.call__controls {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px;
  padding: 12px 14px 10px; border-radius: 28px;
  background: rgba(24, 0, 84, .9);
}
.call--voice .call__controls { background: rgba(255, 255, 255, .08); }
.call__hangup-form, .call__answer-form { margin: 0; display: flex; }

/* One control: a round button with its name under it. The whole thing is the button,
   so the target is the circle and the words together, well over 48px. */
.call__ctl {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 88px; padding: 0 4px 2px;
  border: 0; border-radius: 14px; background: none; color: #ffffff;
  font: 600 13px/1.25 var(--sans); text-align: center; cursor: pointer;
}
.call__ctl[hidden] { display: none; }
.call__ctl[disabled] { cursor: progress; opacity: .7; }
.call__ctl:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.call__dot {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #ffffff;
  transition: background-color .15s ease;
}
.call__ctl:hover .call__dot { background: rgba(255, 255, 255, .26); }
/* Muted, or the camera off: a white button with the struck-through icon (board B5). */
.call__ctl[data-on="true"] .call__dot { background: #ffffff; color: var(--indigo); }
.call__ctl[data-on="true"] [data-when="off"],
.call__ctl:not([data-on="true"]) [data-when="on"] { display: none; }
.call__ctl--hangup .call__dot { width: 88px; border-radius: 999px; background: var(--pink-text); color: #ffffff; }
.call__ctl--hangup:hover .call__dot { background: var(--pink-text-hover); }
.call__ctl--answer .call__dot { background: var(--pink); color: var(--indigo); }
.call__ctl--answer:hover .call__dot { background: #f9537e; }

/* The incoming-call page (board B2): the caller, big, with Decline and Answer. */
.call--incoming .call__bar { grid-template-columns: minmax(0, 1fr); }
.call--incoming .call__who { padding-bottom: 72px; }
.call--incoming .call__avatar {
  width: 168px; height: 168px; margin-bottom: 64px;
  box-shadow: 0 0 0 18px rgba(232, 225, 249, .10), 0 0 0 38px rgba(232, 225, 249, .06), 0 0 0 60px rgba(232, 225, 249, .03);
}
.call__incoming-title { margin: 0; color: #ffffff; font-size: 2.625rem; line-height: 1.15; overflow-wrap: anywhere; }
.call__type { display: flex; align-items: center; gap: 8px; margin: 0; color: #CFC6EC; font-size: 1.125rem; }
.call__answer { display: flex; justify-content: center; gap: 96px; margin-top: 44px; }
.call__ctl--big { min-width: 120px; gap: 12px; font-size: 15px; font-weight: 700; }
.call__ctl--big .call__dot { width: 80px; height: 80px; border-radius: 50%; }
.call--incoming .call__hint { margin-top: 22px; font-size: .875rem; color: #CFC6EC; }

/* The incoming-call banner on any other page (board B1): an indigo bar that drops from
   the top of the window. incoming-call.js builds it. */
.incoming-call {
  position: fixed; top: 0; left: 50%; z-index: 1000; transform: translateX(-50%);
  width: min(760px, 100%);
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px 14px 24px;
  background: var(--indigo); color: #ffffff;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 18px 40px rgba(24, 0, 84, .32);
}
.incoming-call:focus-visible { outline: 3px solid #ffffff; outline-offset: -6px; }
.incoming-call :focus-visible { outline-color: #ffffff; }
.incoming-call__avatar {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 4px 0 6px; border-radius: 50%;
  background: var(--pink); color: var(--indigo); font: 800 24px/1 var(--display);
  box-shadow: 0 0 0 5px rgba(251, 105, 142, .28), 0 0 0 11px rgba(251, 105, 142, .12);
}
.incoming-call__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.incoming-call__title { margin: 0; color: #ffffff; font: 800 19px/1.25 var(--display); overflow-wrap: anywhere; }
.incoming-call__type { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; color: #CFC6EC; font-size: 14px; }
.incoming-call__actions { flex: none; display: flex; gap: 4px; }
.incoming-call .call__ctl { min-width: 72px; }
.incoming-call .call__ctl--hangup .call__dot { width: 56px; border-radius: 50%; }
/* Escape means nothing on a touch screen. */
@media (hover: none) and (pointer: coarse) { .incoming-call__esc { display: none; } }

@media (max-width: 900px) {
  .call__bar { grid-template-columns: minmax(0, 1fr); min-height: 64px; padding: 0 16px; }
  .call__logo { display: none; }
  .call--incoming .call__logo { display: block; }
  .call__title { grid-column: 1; max-width: none; text-align: left; font-size: 1.05rem; }
  .call--remote-video .call__bar { align-items: start; padding-top: 10px; }
  .call--remote-video .call__title { padding-right: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .call.call--remote-video .call__who { left: 16px; right: 16px; height: 64px; align-items: flex-end; justify-content: space-between; padding-bottom: 8px; }
  .call.call--remote-video .call__status { font-size: .75rem; text-align: left; }
  .call--remote-video .call__timer { padding: 6px 12px; font-size: .875rem; }
  .call__self { top: 76px; right: 12px; width: 96px; aspect-ratio: 3 / 4; border-radius: 14px; }
  .call__you { left: 6px; bottom: 6px; padding: 4px 8px; font-size: 11px; }
  .call__avatar { width: 120px; height: 120px; margin-bottom: 40px; }
  .call__avatar--initial { font-size: 48px; }
  .call__name { font-size: 2rem; }
  .call:not(.call--connected) .call__status { font-size: 1.5rem; }
  .call__dock { padding-bottom: 24px; }
  .call__controls { gap: 2px; padding: 10px 8px 8px; }
  .call__ctl { min-width: 76px; font-size: 12px; }
  .call__ctl--hangup .call__dot { width: 72px; }
  .call--incoming .call__avatar { width: 136px; height: 136px; margin-bottom: 56px; }
  .call__incoming-title { font-size: 2rem; }
  .call__answer { gap: 48px; }
  .call__ctl--big .call__dot { width: 72px; height: 72px; }
}
@media (max-width: 600px) {
  .incoming-call { gap: 12px; padding: 12px 12px 10px 16px; border-radius: 0 0 20px 20px; }
  .incoming-call__avatar { width: 44px; height: 44px; margin: 0; font-size: 19px; box-shadow: 0 0 0 4px rgba(251, 105, 142, .28); }
  .incoming-call__title { font-size: 16px; }
  .incoming-call .call__ctl { min-width: 60px; }
  .incoming-call .call__dot, .incoming-call .call__ctl--hangup .call__dot { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .incoming-call { animation: incoming-call-drop .25s ease-out; }
}
@keyframes incoming-call-drop {
  from { transform: translate(-50%, -100%); }
  to { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .call__dot { transition: none; } }