/* ==========================================================================
   Family Orbit - the project's own visual layer.

   Bootstrap supplies the responsive grid, form reset and accessible component
   behaviour. Everything below exists so the result does not read as a stock
   Bootstrap dashboard: organic shapes, floating bubbles, a loose constellation
   of identity icons, wavy dividers and a cloud-shaped composer.

   Two rules hold everywhere in this file:

   1. The composition is free-flowing; the controls are not. Every interactive
      element keeps a predictable position, a visible focus ring, a real label
      and a 44x44px minimum hit area, no matter how the decoration is arranged.
   2. Decorative shapes are inert. They are pointer-events:none and marked
      aria-hidden in the markup, so nothing that drifts can be mistaken for a
      button.
   ========================================================================== */

:root {
  /* Colour tokens, per docs/architecture.md section 8. */
  --fo-primary: #6d5ce7;
  --fo-primary-dark: #5142c7;
  --fo-secondary: #3b82f6;
  --fo-sky: #dceeff;
  --fo-lavender: #eeeafe;
  --fo-canvas: #f7f8fc;
  --fo-surface: #ffffff;
  --fo-text: #20243a;
  --fo-muted: #5c637a;
  --fo-success: #1f9d78;
  --fo-danger: #d6455d;

  /* Text-bearing variants of the three accent tokens above.
     The palette in docs/architecture.md section 8 is the brand palette and
     stays exactly as documented - but Secondary, Success and Danger do not
     reach 4.5:1 against white, and the document itself says an accent must
     pass contrast wherever it carries text or state. These deeper shades are
     used on any surface with words on it; the originals stay for fills,
     borders and decoration. Ratios are checked in
     tests/security/test_colour_contrast.py. */
  --fo-secondary-deep: #0d64f4;
  --fo-success-deep: #167056;
  --fo-danger-deep: #d12e49;

  /* Restrained accents. Decorative unless they carry state, and never the
     only channel through which state is communicated. */
  --fo-aqua: #5fd2d2;
  --fo-coral: #ff8f6b;
  --fo-sunny: #ffd166;

  --fo-radius-sm: 12px;
  --fo-radius: 22px;
  --fo-radius-lg: 36px;
  --fo-radius-pill: 999px;

  --fo-shadow-soft: 0 10px 30px rgba(32, 36, 58, 0.08);
  --fo-shadow-lift: 0 16px 40px rgba(81, 66, 199, 0.18);
  --fo-focus: 0 0 0 4px rgba(109, 92, 231, 0.35);

  --fo-touch: 44px;

  --fo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.fo-body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  font-family: var(--fo-font);
  color: var(--fo-text);
  background: var(--fo-canvas);
  overflow-x: hidden;
}

.fo-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fo-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  color: #fff;
  background: var(--fo-primary-dark);
  border-radius: 0 0 var(--fo-radius-sm) var(--fo-radius-sm);
  text-decoration: none;
}

.fo-skip-link:focus {
  top: 0;
}

/* One focus treatment for everything interactive, so a keyboard user is never
   left guessing where they are inside a playful layout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fo-primary-dark);
  outline-offset: 3px;
  border-radius: var(--fo-radius-sm);
}

.fo-identity__input:focus-visible + .fo-identity,
.fo-bubble__input:focus-visible + .fo-bubble {
  outline: 3px solid var(--fo-primary-dark);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Decorative sky: blobs, orbits and drifting specks
   -------------------------------------------------------------------------- */

.fo-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fo-blob {
  position: absolute;
  display: block;
  filter: blur(2px);
  opacity: 0.55;
}

.fo-blob--one {
  top: -120px;
  left: -140px;
  width: 460px;
  height: 420px;
  background: radial-gradient(circle at 35% 35%, #b7a9ff, #6d5ce7);
  border-radius: 58% 42% 38% 62% / 52% 46% 54% 48%;
  animation: fo-drift-a 26s ease-in-out infinite;
}

.fo-blob--two {
  right: -180px;
  bottom: -160px;
  width: 520px;
  height: 480px;
  background: radial-gradient(circle at 60% 40%, #9ccaff, #3b82f6);
  border-radius: 44% 56% 62% 38% / 48% 58% 42% 52%;
  opacity: 0.42;
  animation: fo-drift-b 32s ease-in-out infinite;
}

.fo-blob--three {
  top: 42%;
  right: 12%;
  width: 210px;
  height: 200px;
  background: radial-gradient(circle at 40% 40%, var(--fo-aqua), #79c8e8);
  border-radius: 62% 38% 46% 54% / 40% 56% 44% 60%;
  opacity: 0.3;
  animation: fo-drift-a 22s ease-in-out infinite reverse;
}

.fo-orbit {
  position: absolute;
  display: block;
  border: 2px dashed rgba(109, 92, 231, 0.18);
  border-radius: 50%;
}

.fo-orbit--wide {
  top: 8%;
  left: 50%;
  width: 720px;
  height: 720px;
  margin-left: -360px;
  animation: fo-spin 90s linear infinite;
}

.fo-orbit--tight {
  bottom: 6%;
  left: 14%;
  width: 320px;
  height: 320px;
  border-color: rgba(59, 130, 246, 0.16);
  animation: fo-spin 64s linear infinite reverse;
}

.fo-speck {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.7;
}

.fo-speck--a { top: 18%; left: 22%; background: var(--fo-sunny); animation: fo-bob 7s ease-in-out infinite; }
.fo-speck--b { top: 62%; left: 8%;  background: var(--fo-coral); animation: fo-bob 9s ease-in-out infinite 1s; }
.fo-speck--c { top: 30%; right: 18%; background: var(--fo-aqua);  animation: fo-bob 8s ease-in-out infinite .5s; }
.fo-speck--d { bottom: 18%; right: 28%; background: var(--fo-primary); animation: fo-bob 11s ease-in-out infinite 2s; }

@keyframes fo-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(24px, 28px, 0) rotate(8deg); }
}

@keyframes fo-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-30px, -22px, 0) rotate(-6deg); }
}

@keyframes fo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fo-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* --------------------------------------------------------------------------
   Header and layout
   -------------------------------------------------------------------------- */

.fo-header {
  position: relative;
  z-index: 2;
  background: linear-gradient(120deg, var(--fo-primary) 0%, var(--fo-secondary-deep) 100%);
  color: #fff;
}

.fo-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 8px;
}

.fo-wave {
  display: block;
  width: 100%;
  height: 48px;
  margin-bottom: -1px;
  fill: var(--fo-canvas);
}

.fo-mark {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: var(--fo-touch);
  color: #fff;
  text-decoration: none;
}

.fo-mark__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
}

.fo-mark__name {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
}

.fo-mark__sub {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
}

.fo-session {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.fo-session__badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--fo-radius-pill);
}

.fo-session__who {
  margin: 0;
  font-weight: 600;
}

.fo-main {
  position: relative;
  z-index: 1;
}

.fo-canvas {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.fo-canvas--narrow { max-width: 560px; }
.fo-canvas--wide { max-width: 1180px; }

.fo-footer {
  position: relative;
  z-index: 1;
  padding: 0 16px 32px;
  text-align: center;
}

.fo-footer__note {
  margin: 0;
  color: var(--fo-muted);
  font-size: 0.85rem;
}

.fo-headline {
  margin: 8px 0 20px;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
}

.fo-headline__small {
  display: block;
  /* Small uppercase text, so it takes the darker shade of the same colour.
     Primary itself is 4.56:1 here - passing, but with nothing to spare. */
  color: var(--fo-primary-dark);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Status messages. State is never colour alone: each carries an icon and
   words, so it survives a colour-vision difference and a greyscale print.
   -------------------------------------------------------------------------- */

.fo-status { min-height: 8px; }

.fo-alert {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 14px 18px;
  font-weight: 600;
  border-radius: var(--fo-radius);
  box-shadow: var(--fo-shadow-soft);
}

.fo-alert--success { color: #12684f; background: #dbf5ec; }
.fo-alert--error { color: #8d1e33; background: #ffe2e7; }
.fo-alert--info { color: #23417c; background: var(--fo-sky); }

.fo-alert__detail {
  flex-basis: 100%;
  font-weight: 400;
  font-size: 0.9rem;
}

.fo-empty {
  margin: 0;
  padding: 18px;
  color: var(--fo-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Quick Send steps
   -------------------------------------------------------------------------- */

.fo-step { margin-bottom: 30px; }

.fo-step__heading {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 700;
}

.fo-step__number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 0.95rem;
  background: var(--fo-primary);
  border-radius: 50%;
}

/* Recipient bubbles. Each sits at a slightly different offset so the row
   reads as a drift of name balloons rather than a row of buttons, while the
   DOM order, tab order and hit areas stay conventional. */
.fo-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-bubbles__item--0 { transform: translateY(-6px); }
.fo-bubbles__item--1 { transform: translateY(8px); }
.fo-bubbles__item--2 { transform: translateY(-2px); }
.fo-bubbles__item--3 { transform: translateY(10px); }
.fo-bubbles__item--4 { transform: translateY(-9px); }

.fo-bubble__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fo-bubble {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: var(--fo-touch);
  padding: 10px 22px;
  color: var(--fo-text);
  font-weight: 700;
  background: var(--fo-surface);
  border: 2px solid transparent;
  border-radius: var(--fo-radius-pill);
  box-shadow: var(--fo-shadow-soft);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.fo-bubble:hover { transform: translateY(-3px); }

.fo-bubble--everyone { background: var(--fo-sky); }

/* Selected state uses colour, a border, a shadow and a tick - not colour alone. */
.fo-bubble__input:checked + .fo-bubble {
  color: #fff;
  background: var(--fo-primary);
  border-color: var(--fo-primary-dark);
  box-shadow: var(--fo-shadow-lift);
}

.fo-bubble__input:checked + .fo-bubble::after {
  content: "\2713";
  font-weight: 800;
}

/* The cloud-shaped composer. */
.fo-cloud {
  position: relative;
  padding: 22px 22px 16px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius-lg) var(--fo-radius-lg) var(--fo-radius-lg) 14px;
  box-shadow: var(--fo-shadow-soft);
}

.fo-cloud::before,
.fo-cloud::after {
  content: "";
  position: absolute;
  background: var(--fo-surface);
  border-radius: 50%;
  pointer-events: none;
}

.fo-cloud::before { top: -18px; left: 34px; width: 56px; height: 56px; }
.fo-cloud::after { top: -30px; left: 82px; width: 38px; height: 38px; }

.fo-cloud__field {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--fo-text);
  background: var(--fo-canvas);
  border: 2px solid #e3e6f3;
  border-radius: var(--fo-radius);
  resize: vertical;
}

.fo-cloud__field:focus {
  border-color: var(--fo-primary);
  box-shadow: var(--fo-focus);
  outline: none;
}

.fo-cloud__help,
.fo-cloud__count {
  margin: 10px 0 0;
  color: var(--fo-muted);
  font-size: 0.85rem;
}

.fo-cloud__count { text-align: right; }
.fo-cloud__count.is-tight { color: var(--fo-danger); font-weight: 700; }

/* The identity constellation. Twelve circles, each nudged to a different
   offset so the group scatters, with DOM order left intact so keyboard and
   screen-reader traversal stays a simple 1-to-12 sweep. */
.fo-constellation {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

.fo-constellation__item--1  { transform: translateY(-14px); }
.fo-constellation__item--2  { transform: translateY(6px); }
.fo-constellation__item--3  { transform: translateY(-4px); }
.fo-constellation__item--4  { transform: translateY(16px); }
.fo-constellation__item--5  { transform: translateY(-10px); }
.fo-constellation__item--6  { transform: translateY(4px); }
.fo-constellation__item--7  { transform: translateY(14px); }
.fo-constellation__item--8  { transform: translateY(-8px); }
.fo-constellation__item--9  { transform: translateY(10px); }
.fo-constellation__item--10 { transform: translateY(-12px); }
.fo-constellation__item--11 { transform: translateY(2px); }
.fo-constellation__item--12 { transform: translateY(-6px); }

.fo-identity__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fo-identity {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  font-size: 1.7rem;
  color: var(--fo-primary);
  background: var(--fo-surface);
  border: 3px solid #e8e6fb;
  border-radius: 52% 48% 46% 54% / 48% 52% 48% 52%;
  box-shadow: var(--fo-shadow-soft);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.fo-identity:hover { transform: scale(1.06); }

.fo-identity__input:checked + .fo-identity {
  color: #fff;
  background: linear-gradient(140deg, var(--fo-primary), var(--fo-secondary-deep));
  border-color: var(--fo-primary-dark);
  box-shadow: var(--fo-shadow-lift);
  animation: fo-pick 320ms ease;
}

.fo-identity--static {
  width: 40px;
  height: 40px;
  font-size: 1rem;
  cursor: default;
}

.fo-constellation--compact .fo-identity { width: 56px; height: 56px; font-size: 1.35rem; }

@keyframes fo-pick {
  0% { transform: scale(1); }
  45% { transform: scale(1.18) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* PIN entry and keypad. */
.fo-pin {
  max-width: 340px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background: var(--fo-lavender);
  border-radius: var(--fo-radius-lg);
  box-shadow: var(--fo-shadow-soft);
}

/* Kept in the DOM and focusable so a keyboard or assistive-technology user can
   type the PIN directly; the on-screen keypad is an addition, not the only way in. */
.fo-pin__field {
  width: 100%;
  max-width: 200px;
  padding: 12px;
  font-size: 1.4rem;
  letter-spacing: 0.7em;
  text-align: center;
  background: var(--fo-surface);
  border: 2px solid #ddd8f7;
  border-radius: var(--fo-radius);
}

.fo-pin__dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 14px 0 6px;
}

.fo-pin__dot {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--fo-primary);
  border-radius: 50%;
}

.fo-pin__dot.is-filled { background: var(--fo-primary); }

.fo-pin__help {
  margin: 0 0 14px;
  color: var(--fo-muted);
  font-size: 0.85rem;
}

.fo-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.fo-key {
  min-width: var(--fo-touch);
  min-height: 56px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--fo-primary-dark);
  background: var(--fo-surface);
  border: 2px solid #e2ddfa;
  border-radius: var(--fo-radius);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.fo-key:hover { background: #fff; transform: translateY(-2px); }
.fo-key:active { transform: translateY(1px); }
.fo-key--muted { color: var(--fo-muted); }

/* The send action. Large, high contrast, and always in the same place. */
.fo-send { text-align: center; }

.fo-send__button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 16px 44px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  background: linear-gradient(120deg, var(--fo-primary), var(--fo-secondary-deep));
  border: none;
  border-radius: var(--fo-radius-pill);
  box-shadow: var(--fo-shadow-lift);
  cursor: pointer;
  transition: transform 160ms ease;
}

.fo-send__button:hover { transform: translateY(-3px) scale(1.02); }
.fo-send__button:active { transform: translateY(1px); }

.fo-secondary { margin-top: 34px; text-align: center; }

.fo-secondary__link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: var(--fo-touch);
  padding: 10px 20px;
  color: var(--fo-muted);
  font-weight: 600;
  text-decoration: none;
  border: 2px dashed #d7dbe9;
  border-radius: var(--fo-radius-pill);
}

.fo-secondary__link:hover { color: var(--fo-primary-dark); border-color: var(--fo-primary); }

/* --------------------------------------------------------------------------
   Panels, buttons and forms
   -------------------------------------------------------------------------- */

.fo-panel {
  margin-bottom: 24px;
  padding: 28px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius-lg);
  box-shadow: var(--fo-shadow-soft);
}

.fo-panel--centre { text-align: center; }
.fo-panel--wide { padding: 24px; }

.fo-panel--warning {
  border-top: 6px solid var(--fo-danger);
}

.fo-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.fo-panel__icon {
  margin: 0 0 8px;
  font-size: 2.4rem;
  color: var(--fo-danger);
}

.fo-panel__title { margin: 0 0 12px; font-size: 1.45rem; font-weight: 800; }
.fo-panel__title--sub { margin-top: 24px; font-size: 1.1rem; }
.fo-panel__body { margin: 0 0 20px; font-size: 1.02rem; line-height: 1.6; }
.fo-panel__note { margin: 0 0 18px; color: var(--fo-muted); font-size: 0.9rem; }
.fo-panel__actions { margin: 0 0 12px; }
.fo-panel__alt { margin: 12px 0 0; }

.fo-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: var(--fo-touch);
  padding: 12px 24px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--fo-radius-pill);
  cursor: pointer;
}

.fo-button--primary {
  color: #fff;
  background: var(--fo-primary);
  box-shadow: var(--fo-shadow-lift);
}

.fo-button--primary:hover { background: var(--fo-primary-dark); color: #fff; }

.fo-button--danger { color: #fff; background: var(--fo-danger-deep); }
.fo-button--danger:hover { color: #fff; background: #b8394e; }

.fo-button--quiet {
  color: var(--fo-primary-dark);
  background: var(--fo-lavender);
}

.fo-button--quiet:hover { color: var(--fo-primary-dark); background: #e3ddfd; }

.fo-button--block { width: 100%; }
.fo-button--small { min-height: var(--fo-touch); padding: 8px 16px; font-size: 0.9rem; }

.fo-field { margin-bottom: 20px; }
.fo-field--check { display: flex; gap: 10px; align-items: center; }

.fo-field__label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.fo-field__input {
  display: block;
  width: 100%;
  min-height: var(--fo-touch);
  padding: 12px 14px;
  font-size: 1rem;
  background: var(--fo-canvas);
  border: 2px solid #e3e6f3;
  border-radius: var(--fo-radius);
}

.fo-field__input:focus {
  border-color: var(--fo-primary);
  box-shadow: var(--fo-focus);
  outline: none;
}

.fo-field__help { margin: 6px 0 0; color: var(--fo-muted); font-size: 0.85rem; }

.fo-fieldset { margin: 0 0 22px; padding: 0; border: 0; }
.fo-fieldset__legend { margin-bottom: 8px; font-size: 1rem; font-weight: 700; }

.fo-inline-form {
  padding: 16px 0;
  border-top: 1px dashed #e3e6f3;
}

/* --------------------------------------------------------------------------
   Conversations
   -------------------------------------------------------------------------- */

.fo-people { margin-bottom: 24px; }
.fo-people__heading { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; }

.fo-people__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-people__item--0 { transform: translateY(-5px); }
.fo-people__item--1 { transform: translateY(6px); }
.fo-people__item--2 { transform: translateY(-2px); }
.fo-people__item--3 { transform: translateY(8px); }
.fo-people__item--4 { transform: translateY(-7px); }

.fo-people__link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: var(--fo-touch);
  padding: 10px 20px;
  color: var(--fo-text);
  font-weight: 700;
  text-decoration: none;
  background: var(--fo-surface);
  border-radius: var(--fo-radius-pill);
  box-shadow: var(--fo-shadow-soft);
}

.fo-people__link:hover { color: var(--fo-primary-dark); transform: translateY(-2px); }
.fo-people__link--everyone { background: var(--fo-sky); }

/* Unread carries a starburst, a count and screen-reader words, so the state
   survives a colour-vision difference and never depends on the fill alone. */
.fo-people__link--unread {
  border: 2px solid var(--fo-primary);
  font-weight: 800;
}

.fo-unread {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 4px;
  padding: 2px 10px 2px 6px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--fo-secondary-deep);
  border-radius: var(--fo-radius-pill);
}

.fo-unread__burst {
  font-size: 0.8rem;
  animation: fo-twinkle 2.4s ease-in-out infinite;
}

@keyframes fo-twinkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.15); }
}

/* Notices inside a conversation: why this view behaves differently. Always
   an icon plus a sentence, never a colour on its own. */
.fo-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  padding: 12px 18px;
  color: var(--fo-muted);
  font-size: 0.9rem;
  background: var(--fo-canvas);
  border-radius: var(--fo-radius);
}

.fo-notice--history { color: #7a4a10; background: #fff1d6; }
.fo-notice--closed { color: #5c6178; background: #e9ebf3; }

.fo-earlier { margin: 0 0 16px; text-align: center; }

.fo-people__note {
  margin-left: 6px;
  color: var(--fo-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.fo-people__link--inactive { opacity: 0.75; }

.fo-thread {
  padding: 24px;
  background: var(--fo-surface);
  border-radius: var(--fo-radius-lg);
  box-shadow: var(--fo-shadow-soft);
}

.fo-thread--empty { text-align: center; }
.fo-thread__prompt { margin: 0; padding: 30px 0; color: var(--fo-muted); }
.fo-thread__heading { margin: 0 0 18px; font-size: 1.3rem; font-weight: 800; }

.fo-thread__list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  max-height: 52vh;
  overflow-y: auto;
}

.fo-thread__empty { color: var(--fo-muted); text-align: center; }

.fo-msg {
  position: relative;
  max-width: 78%;
  margin-bottom: 14px;
  padding: 14px 18px;
  border-radius: var(--fo-radius);
}

/* Slight alternating rotation keeps the stack from reading as a rigid list
   without moving anything out of reading order. */
.fo-msg:nth-child(odd) { transform: rotate(-0.4deg); }
.fo-msg:nth-child(even) { transform: rotate(0.3deg); }

.fo-msg--mine {
  margin-left: auto;
  background: var(--fo-lavender);
  border-bottom-right-radius: 6px;
}

.fo-msg--theirs {
  margin-right: auto;
  background: var(--fo-sky);
  border-bottom-left-radius: 6px;
}

.fo-msg--deleted { background: #f1f2f7; font-style: italic; color: var(--fo-muted); }

.fo-msg__meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--fo-muted);
}

.fo-msg__sender { font-weight: 700; color: var(--fo-text); }

/* Message text. pre-wrap preserves the sender's own line breaks, and
   overflow-wrap keeps a long unbroken URL - which is never a link - from
   pushing the layout sideways. */
.fo-msg__body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Delivery state on your own messages. Quiet by design: useful when you go
   looking for it, not competing with the message itself. */
.fo-msg__status {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  margin: 6px 0 0;
  color: var(--fo-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.fo-msg__status--read { color: var(--fo-success-deep); }

.fo-msg__delete { position: absolute; top: 6px; right: 6px; }

.fo-msg__delete-button {
  display: grid;
  place-items: center;
  width: var(--fo-touch);
  height: var(--fo-touch);
  color: var(--fo-muted);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.fo-msg__delete-button:hover { color: var(--fo-danger); background: rgba(214, 69, 93, 0.1); }

/* The composer stays docked at the bottom of the thread so sending is always
   in the same place, however playful the rest of the page is. */
.fo-composer {
  position: relative;
  padding: 18px;
  background: var(--fo-canvas);
  border-radius: var(--fo-radius-lg);
}

.fo-composer__field {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  background: var(--fo-surface);
  border: 2px solid #e3e6f3;
  border-radius: var(--fo-radius);
  resize: vertical;
}

.fo-composer__field:focus { border-color: var(--fo-primary); box-shadow: var(--fo-focus); outline: none; }
.fo-composer__count { margin: 8px 0; color: var(--fo-muted); font-size: 0.8rem; text-align: right; }
.fo-composer__count.is-tight { color: var(--fo-danger); font-weight: 700; }

.fo-composer__error {
  margin-bottom: 10px;
  padding: 10px 14px;
  color: #8d1e33;
  font-weight: 600;
  background: #ffe2e7;
  border-radius: var(--fo-radius-sm);
}

.fo-composer__send {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: var(--fo-touch);
  padding: 12px 28px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(120deg, var(--fo-primary), var(--fo-secondary-deep));
  border: none;
  border-radius: var(--fo-radius-pill);
  cursor: pointer;
}

.fo-expiry {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px 18px;
  font-weight: 600;
  color: #7a4a10;
  background: #fff1d6;
  border-radius: var(--fo-radius);
}

/* --------------------------------------------------------------------------
   Administration
   -------------------------------------------------------------------------- */

.fo-adminnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.fo-adminnav__link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: var(--fo-touch);
  padding: 10px 18px;
  color: var(--fo-primary-dark);
  font-weight: 700;
  text-decoration: none;
  background: var(--fo-surface);
  border-radius: var(--fo-radius-pill);
  box-shadow: var(--fo-shadow-soft);
}

.fo-adminnav__link:hover { color: #fff; background: var(--fo-primary); }

.fo-table { margin: 0; }
.fo-table th, .fo-table td { vertical-align: middle; }
.fo-table__sub { color: var(--fo-muted); font-size: 0.85rem; }

.fo-tag {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef0f7;
  border-radius: var(--fo-radius-pill);
}

.fo-tag--ok { color: #12684f; background: #dbf5ec; }
.fo-tag--off { color: #5c6178; background: #e9ebf3; }
.fo-tag--warn { color: #7a4a10; background: #fff1d6; }
.fo-tag--admin { color: #3f2fa5; background: var(--fo-lavender); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* The playful offsets are a desktop-only flourish. On a phone the whole
     composition collapses to one honest column. */
  .fo-bubbles__item,
  .fo-constellation__item,
  .fo-people__item,
  .fo-msg:nth-child(odd),
  .fo-msg:nth-child(even) {
    transform: none;
  }

  .fo-msg { max-width: 92%; }
  .fo-panel { padding: 20px; }
  .fo-orbit--wide { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion. Everything decorative stops; nothing that conveys state or
   position depends on movement, so the interface stays complete without it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .fo-bubble:hover,
  .fo-identity:hover,
  .fo-send__button:hover,
  .fo-people__link:hover,
  .fo-key:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Forced colours and high contrast
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .fo-sky { display: none; }

  .fo-identity,
  .fo-bubble,
  .fo-key {
    border: 2px solid ButtonText;
  }

  .fo-identity__input:checked + .fo-identity,
  .fo-bubble__input:checked + .fo-bubble {
    border-width: 4px;
  }
}

/* The "who has something waiting" banner on the homepage.
   Sits above the composer so it is read before anything else, and uses the
   info tone rather than a colour nobody has been taught. */
.fo-waiting { margin: 0 0 1rem; }

.fo-waiting__chime {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 2px solid var(--fo-sky);
  border-radius: 999px;
  background: #fff;
  color: #23417c;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}

.fo-waiting__chime:hover { background: var(--fo-sky); }

/* The icon-and-PIN reply view.
   Deliberately plainer than a conversation: a short list of what came in, and
   one box to answer it. Nothing to browse, nothing to get lost in. */
.fo-quickview { margin: 1.5rem 0; }

.fo-quickview__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.fo-quickview__item {
  padding: 1rem 1.15rem;
  background: #fff;
  border-radius: var(--fo-radius);
  box-shadow: var(--fo-shadow-soft);
}

.fo-quickview__body {
  margin: .35rem 0 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--fo-text);
  /* A message is text. Long words and pasted addresses wrap rather than
     stretching the card off the side of a phone. */
  overflow-wrap: anywhere;
}

.fo-quickview__empty {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--fo-muted);
  background: var(--fo-canvas);
  border-radius: var(--fo-radius);
}

.fo-cloud__select {
  width: 100%;
  min-height: 44px;
  margin-bottom: .75rem;
  padding: .6rem .9rem;
  border: 2px solid #e3e6f3;
  border-radius: var(--fo-radius);
  background: #fff;
  font-size: 1rem;
  color: var(--fo-text);
}

.fo-cloud__select:focus-visible {
  outline: 3px solid var(--fo-primary);
  outline-offset: 2px;
}