/* The ring on a bubble while its file goes up (uploadRing.tsx). Dark disc, white arc: reads on a picture, a lime bubble and a white one. */
.up-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: rgba(10, 16, 13, 0.62);
  color: #fff;
}
.up-ring > svg {
  position: absolute;
  inset: 0;
}
.up-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 3;
}
.up-arc {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}
@media (prefers-reduced-motion: no-preference) {
  .up-ring:not(.up-failed) > svg {
    animation: up-spin 2.4s linear infinite;
  }
}
@keyframes up-spin {
  to {
    transform: rotate(360deg);
  }
}
.up-x,
.up-retry {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.up-give {
  position: absolute;
  top: -7px;
  right: -9px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: #101a15;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.up-pct {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(10, 16, 13, 0.62);
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
/* over the middle of a picture or a video: nothing in the bubble changes size */
.up-slot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(10, 16, 13, 0.22);
}
/* over a document's icon */
.gd-row {
  position: relative;
}
.up-doc {
  position: absolute;
  left: 2px;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
}
/* a picture in a bubble opens the viewer */
.gm-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* A PLACE IN A CHAT (PlaceMap.tsx): the small map in the bubble and the full screen view of the same point. Sizes are rem. */
.pm-tap {
  position: absolute;
  inset: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pm-tap:focus-visible {
  outline: 0.125rem solid var(--ring, #0b3d2e);
  outline-offset: -0.125rem;
}
.pm-frame .smp {
  position: absolute;
  inset: 0;
  min-height: 0;
}
/* The pin is smaller in the bubble's frame than on a card. */
.pm-frame .smp-pin {
  width: 2rem;
  height: 2.55rem;
}
.pm-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.pm-idle {
  background: #f3f2ed;
}

.pm-full {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--card, #ffffff);
  color: var(--ink, #101a15);
  overscroll-behavior: contain;
}
.pm-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 0.9rem 0.7rem;
  border-bottom: 1px solid var(--line2, rgba(16, 26, 21, 0.14));
}
.pm-back {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 1rem;
  background: var(--bg, #f5f5f2);
  color: inherit;
  display: grid;
  place-items: center;
  box-shadow: none;
}
.pm-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pm-who b {
  font-size: 1.11rem;
  font-weight: 700;
  line-height: 1.25;
}
.pm-who small {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ink2, #5a655f);
  overflow-wrap: anywhere;
}
.pm-map {
  position: relative;
  flex: 1;
  min-height: 0;
}
.pm-map .smp {
  position: absolute;
  inset: 0;
}
.pm-zoom {
  position: absolute;
  right: 0.85rem;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pm-zoom button {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #101a15;
  display: grid;
  place-items: center;
  box-shadow: 0 0.125rem 0.625rem rgba(16, 26, 21, 0.25), 0 0 0.0625rem rgba(16, 26, 21, 0.14);
}

/* A place with no map: the pin and the words, a small bubble (the server did not send where). */
.gm-where {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-weight: 600;
}
.gm-where .ico {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 0.15em;
  opacity: 0.75;
}
/* Vettar One 1.6 task rows (behind VITE_TASK_ROWS=on). No side stripes, no pale fills: colour only the verb label, the dot and "You". */
No side stripes, no pale fills: colour only the verb label, the figure's dot and "You". */
.tasks {
  padding: 6px 16px 4px;
}
.tk-group {
  margin-top: 14px;
}
.tk-gh {
  display: flex;
  justify-content: space-between;
  margin: 0 6px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink3);
}
.tk-list {
  background: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: 22px;
  box-shadow: var(--shadow1);
  overflow: hidden;
}
.tk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 64px;
  padding: 0 14px 0 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tk-row:first-child {
  border-top: 0;
}
.tk-verb {
  flex: none;
  min-width: 64px;
  padding: 5px 7px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg2);
  color: var(--ink2);
}
.tk-verb[data-v="approve"],
.tk-verb[data-v="confirm"] {
  background: var(--lime);
  color: var(--forest);
}
.tk-verb[data-v="wait"],
.tk-verb[data-v="read"] {
  color: var(--ink3);
}
.tk-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-t b {
  font-weight: 620;
  font-size: 0.94rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-chain {
  font-size: 0.76rem;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-chain i {
  font-style: normal;
  opacity: 0.7;
}
.tk-chain em {
  font-style: normal;
}
.tk-chain em[data-me] {
  color: var(--acc);
  font-weight: 750;
}
.tk-fig {
  flex: none;
  max-width: 34%;
  font-weight: 720;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
}
.tk-dot[data-t="look"] {
  background: var(--amber);
}
.tk-dot[data-t="grey"] {
  background: var(--ink3);
}
.tk-empty {
  margin-top: 14px;
  padding: 26px 16px;
  border-radius: 22px;
  background: var(--card);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink2);
}
.tk-empty b {
  color: var(--ink);
}
.tk-msgs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 16px 0 2px;
}
.tk-m {
  max-width: 92%;
  padding: 7px 12px;
  border-radius: 15px;
  background: var(--bg2);
  color: var(--ink);
  font-size: 0.86rem;
}
.tk-m small {
  font-size: 0.74rem;
  color: var(--ink3);
}
.tk-m-me {
  align-self: flex-end;
  background: var(--mine);
  color: var(--mineInk);
}
.tk-m-sys {
  align-self: center;
  max-width: 100%;
  padding: 1px 4px;
  background: none;
  color: var(--ink3);
  font-size: 0.8rem;
  text-align: center;
}
.tk-ghost {
  height: 46px;
  border-radius: 99px;
  border: 1px solid var(--line2);
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 620;
  font-size: 0.92rem;
}
.tk-ghost[data-on] {
  color: var(--acc);
}
/* Vettar One 1.6: tick to select, the one-line peek, and the conversation as a sheet */
.tk-rw {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tk-rw:first-child {
  border-top: 0;
}
.tk-rw .tk-row {
  border-top: 0;
  flex: 1;
  min-width: 0;
}
.tk-rw[data-tick] .tk-row {
  padding-left: 8px;
}
.tk-tick {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  background: var(--card);
  color: #fff;
  display: grid;
  place-items: center;
}
.tk-tick .ico {
  width: 15px;
  height: 15px;
}
.tk-rw[data-sel] .tk-tick {
  background: var(--forest);
  border-color: var(--forest);
}
.tk-list:has(.tk-rw[data-sel]) {
  overflow: visible;
}
.tk-rw[data-sel] {
  z-index: 1;
  margin: 0 5px;
  border-radius: 16px;
  border-top-color: transparent;
  background: var(--card);
  box-shadow: 0 3px 14px rgba(11, 61, 46, 0.22), 0 0 0 1px var(--cardBorder);
}
.tk-rw[data-sel] + .tk-rw {
  border-top-color: transparent;
}
.tk-rw[data-sel] .tk-t b {
  font-weight: 800;
}
.tk-selbar {
  flex: none;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.tk-selrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tk-selrow b {
  font-size: 0.98rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.tk-clear {
  padding: 8px 16px;
  min-height: 38px;
}
.tk-selbar .hold {
  flex: none;
  min-height: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-rw[data-sel] .tk-tick {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--forest);
  }
}
:root[data-theme="dark"] .tk-rw[data-sel] .tk-tick {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--forest);
}
.tk-row:active {
  background: var(--bg2);
}
/* while rows are ticked the selection bar takes the place of the chat bar */
.app:has(> .tk-selbar) > .dock {
  display: none;
}
/*
 * THE NEW PROJECT FORM (newProject.tsx; founder's design, 26 Oct 2026). Light only, like the rest of One17.
 * Founder's rules of 26 Oct 2026: a chosen chip is the business lime #D4E85C with forest #0B3D2E words and icon; no shadows on
 * buttons or chips (a hairline #E5E5E0 border instead); Create is one flat colour when it is off (no opacity, nothing shows through).
 */
.npf {
  --npf-line: #e5e5e0;
  --npf-forest: #0b3d2e;
  --npf-lime: #d4e85c;
  --npf-ink: #17201b;
  --npf-soft: #8d958f;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  color: var(--npf-ink);
}
.npf-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--npf-line);
  border-radius: 20px;
  background: #ffffff;
}
.npf-l {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--npf-ink);
}
.npf-l b {
  font-weight: 700;
}
.npf-opt {
  font-weight: 400;
  color: var(--npf-soft);
}
.npf-star {
  font-weight: 700;
  color: #d92d20;
}
.npf-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--npf-soft);
}
.npf-ph-h {
  margin-bottom: 10px;
}
.npf-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 140px;
  padding: 18px 12px;
  border: 1.5px dashed #86b896;
  border-radius: 14px;
  background: #f2f8f2;
  color: var(--npf-forest);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
.npf-drop b {
  margin-top: 2px;
  font-size: 0.95rem;
  font-weight: 700;
}
.npf-drop span {
  font-size: 0.78rem;
  color: var(--npf-soft);
}
.npf-drop[data-has] {
  padding: 0;
  overflow: hidden;
  cursor: default;
  border-style: solid;
  border-color: var(--npf-line);
  background: #ffffff;
  align-items: stretch;
  gap: 0;
}
.npf-drop img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.npf-ph-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
}
.npf-link {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--npf-forest);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
}
.npf-f {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.npf-box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50px;
  border: 1px solid var(--npf-line);
  border-radius: 14px;
  background: #ffffff;
  box-sizing: border-box;
}
.npf-box:focus-within {
  border-color: var(--npf-forest);
  outline: 2px solid var(--npf-forest);
  outline-offset: -2px;
}
.npf-f[data-bad] .npf-box {
  border-color: #d92d20;
}
.npf-box[data-tall] {
  align-items: flex-start;
}
.npf-lead {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  color: #4a4e49;
}
.npf-box[data-tall] .npf-lead {
  height: 50px;
}
.npf-box input,
.npf-box textarea {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--npf-ink);
  font: inherit;
  font-size: 1rem;
}
.npf-box textarea {
  height: auto;
  min-height: 88px;
  padding: 13px 14px 13px 0;
  line-height: 1.4;
  resize: none;
}
.npf-box input::placeholder,
.npf-box textarea::placeholder {
  color: #9aa09b;
}
.npf-date {
  flex: 1;
  padding-right: 8px;
  font-size: 1rem;
  color: var(--npf-ink);
}
.npf-date[data-empty] {
  color: #9aa09b;
}
.npf-cal {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  color: var(--npf-ink);
}
/* the phone's own date picker, laid over the whole box and see through, so a tap anywhere opens it */
.npf-box input.npf-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.npf-err {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #b42318;
}
.npf-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.npf-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 4px;
  border: 1px solid var(--npf-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--npf-ink);
  font: inherit;
  /* "Infrastructure" has to fit whole, chosen (bolder) or not, at 390 px: a third of the width less the gutters */
  font-size: 0.8rem;
  box-shadow: none;
  cursor: pointer;
}
.npf-chip span {
  min-width: 0;
  white-space: nowrap;
}
.npf-chip[data-on] {
  border-color: var(--npf-lime);
  background: var(--npf-lime);
  color: var(--npf-forest);
  font-weight: 600;
}
.npf-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 26px;
  background: var(--npf-forest);
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
}
.npf-go:disabled {
  /* one flat colour: no opacity, so nothing darker shows through across the middle */
  opacity: 1;
  background: #9db3a8;
  cursor: default;
}
.npf-done {
  width: 100%;
  box-shadow: none;
}

/* the same chips inside the Edit sheet (projedit.tsx) */
.npf.npf-in {
  padding: 0;
  gap: 8px;
}
/* THE CHAT DOODLES (founder, 31 Oct 2026: "chat screen should have construction doodles inside it just like whatsapp/telegram",
   then his own doodle sheet: "trace them out and use.. they should be traced as lines so we can easily adjust their thickness").
   His sheet, traced to centre lines (assets/chat-doodle.svg, one path of strokes): hard hats, cranes, bricks, mixers, trucks,
   cones, excavators, scaffolds, plans, levels, tripods, trowels, vests and the small sparkles between them.
   Line thickness and ink are in the two SVG files (stroke-width, stroke, stroke-opacity), the same thickness in both.
   The sheet is drawn 470 px wide and repeats down the thread; it sits on the scroller with the default background-attachment
   (not fixed), so scrolling never repaints it. About 7 percent ink on light and 6 percent on dark, so words stay easy to read. */
:root {
  --doodle: url("/assets/chat-doodle-zwe2Wpi9.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --doodle: url("/assets/chat-doodle-dark-BeLA35Ma.svg");
  }
}
:root[data-theme="dark"] {
  --doodle: url("/assets/chat-doodle-dark-BeLA35Ma.svg");
}
.gc-scroll,
.app.one17 .pg17[data-pane="home"] > #scroll {
  background-image: var(--doodle);
  background-size: 470px auto;
  background-repeat: repeat;
  background-position: center 0;
}
/* The full screen media viewer (mediaViewer.tsx). Always dark, edge to edge. Under the sheets (2000), over the chat's pages. */
.mv {
  --mv-bar: 62px;
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: #000;
  color: #fff;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.mv-stage {
  position: absolute;
  inset: 0;
  display: grid;
  /* One cell exactly the size of the screen, so the picture's 100% height means the screen's height. Without it the row grows to
     the picture: on a wide screen (a Mac) a portrait video or photo was drawn the full width and its top third filled the screen
     (founder, 25 Oct 2026). */
  grid-template: 100% / 100%;
  place-items: center;
  touch-action: none;
  will-change: transform;
}
.mv-media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  object-fit: contain;
  background: #000;
  -webkit-user-drag: none;
}
.mv-wait {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: mv-spin 0.9s linear infinite;
}
@keyframes mv-spin {
  to {
    transform: rotate(360deg);
  }
}
.mv-fail {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}
.mv-fail p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}
.mv-fail button {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #101a15;
  font: inherit;
  font-weight: 700;
  padding: 9px 20px;
}

/* the top bar: back, who and when, star, forward, menu */
.mv-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 22px 4px;
  background: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
  transition: opacity 0.22s ease;
}
.mv-b {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
}
.mv-b .ico {
  width: 22px;
  height: 22px;
}
.mv-off {
  opacity: 0.45;
}
.mv-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-left: 2px;
}
.mv-who b {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv-who span {
  font-size: 0.78rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.mv-menu {
  position: absolute;
  right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 52px);
  z-index: 6;
  width: 220px;
  padding: 6px;
  border-radius: 16px;
  background: #232725;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.mv-menu button {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  text-align: start;
  cursor: pointer;
}
.mv-menu button:active {
  background: rgba(255, 255, 255, 0.1);
}
.mv-menu button[data-danger] {
  color: #ff7b72;
}
.mv-menu .ico {
  width: 20px;
  height: 20px;
}
.mv-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* the middle: play and pause */
.mv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(20, 24, 22, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.22s ease;
}
.mv-play .ico {
  width: 34px;
  height: 34px;
}
.mv-play[data-hide],
.mv-top[data-hide],
.mv-bottom[data-hide] {
  opacity: 0;
  pointer-events: none;
}

/* the bottom: caption, the chip, seek, speed, Reply and the reactions */
.mv-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
  transition: opacity 0.22s ease;
}
.mv-cap {
  margin: 0;
  max-height: 4.6em;
  overflow: auto;
  font-size: 0.95rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mv-chip {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}
.mv-chip .ico {
  width: 16px;
  height: 16px;
}
.mv-seekrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mv-time {
  flex: none;
  min-width: 38px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}
.mv-time:last-of-type {
  text-align: end;
}
.mv-seek {
  flex: 1;
  min-width: 0;
  height: 30px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
  cursor: pointer;
}
.mv-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(to right, #fff var(--p, 0%), rgba(255, 255, 255, 0.32) var(--p, 0%));
}
.mv-seek::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.32);
}
.mv-seek::-moz-range-progress {
  height: 4px;
  border-radius: 99px;
  background: #fff;
}
.mv-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.mv-seek::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.mv-rate {
  flex: none;
  height: 28px;
  min-width: 46px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.mv-reply {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mv-replybtn {
  flex: 1;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 1rem;
  text-align: start;
  cursor: pointer;
}
.mv-replybtn .ico {
  width: 18px;
  height: 18px;
}
.mv-e {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.mv-e[data-on] {
  background: rgba(255, 255, 255, 0.22);
}
.mv-e .ico {
  width: 24px;
  height: 24px;
}
.mv-picker {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.5);
}
.mv-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 12px 10px calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-radius: 22px 22px 0 0;
  background: rgba(34, 38, 36, 0.98);
}
.mv-grid .mv-e {
  width: 100%;
}
.mv-toast {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
  z-index: 8;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(240, 244, 241, 0.96);
  color: #101a15;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}
.mv-toast button {
  margin-left: 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .mv-top,
  .mv-bottom,
  .mv-play {
    transition: none;
  }
}
/* A quoted message (quote.tsx): in a sent bubble (.gb-q) and in the bar above the composer (.gr-bar). */
.gb-q[data-rich] {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.gr-q .qt-line {
  color: var(--ink2);
  opacity: 1;
}
.qt-main {
  flex: 1;
  min-width: 0;
  display: block;
}
.gb-q .qt-main > b,
.gr-q .qt-main > b {
  display: block;
}
.qt-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  font-style: normal;
  font-size: 0.84rem;
  opacity: 0.85;
}
.qt-line > .ico {
  width: 14px;
  height: 14px;
  flex: none;
}
.qt-line > i {
  flex: 1;
  min-width: 0;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qt-line > small {
  flex-basis: 100%;
  padding-left: 20px;
  font-size: 0.74rem;
  opacity: 0.8;
}
.qt-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  align-self: center;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(16, 26, 21, 0.16);
}
.qt-thumb img,
.qt-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CALLS SLICE 1 (restyled 31 Oct 2026 to the founder's mockups): the call screen, the ring screen, the pill at the top, the card that
   slides down from it, the quick reply sheet, the sentence sheet and a call in the thread as a card. The app's forest green and
   lime, from its own tokens. Motion is transform and opacity only, and stops with reduced motion. */
.cl-screen {
  position: absolute;
  inset: 0;
  z-index: 3500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 24px calc(env(safe-area-inset-bottom, 0px) + 36px);
  background: radial-gradient(120% 60% at 50% 38%, rgba(48, 128, 96, 0.34) 0%, rgba(48, 128, 96, 0) 62%), linear-gradient(180deg, #0f4a38 0%, #0b3d2e 48%, #06251c 100%);
  color: #fff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: cl-in 0.32s var(--spring, cubic-bezier(0.2, 0.9, 0.3, 1)) backwards;
}
@keyframes cl-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
/* The top row: the shrink chevron on the left, the signal bars and the running time in the middle. */
.cl-top {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}
.cl-shrink {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: grid;
  place-items: center;
}
.cl-shrink:disabled {
  visibility: hidden;
}
.cl-clock {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}
.cl-clock .ico {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.cl-who {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}
.cl-who .ava {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06), 0 0 0 18px rgba(255, 255, 255, 0.03);
  margin-bottom: 18px;
}
.cl-who .ava-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.cl-who h2 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cl-title {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.66);
}
.cl-status {
  margin: 10px 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lime, #dcef4e);
  font-variant-numeric: tabular-nums;
  min-height: 1.5em;
}
.cl-status[data-phase="ended"] {
  color: #fff;
}
.cl-mic {
  margin: 6px 0 0;
  max-width: 280px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}
/* Under the name: the option buttons, then End. The grid has room for the buttons that are coming; Video and Add people join
   it with slice 2 and slice 3, and today's two sit in the middle. */
.cl-ctl {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  touch-action: manipulation;
}
.cl-grid {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 12px;
}
.cl-grid .cl-b {
  width: 96px;
}
.cl-btns {
  width: 100%;
  max-width: 340px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  touch-action: manipulation;
}
.cl-btns.cl-two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 300px;
}
.cl-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.cl-c {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  transition: transform 0.12s, background 0.18s;
}
.cl-c .ico {
  width: 28px;
  height: 28px;
}
.cl-b:active .cl-c {
  transform: scale(0.94);
}
.cl-b[data-on] .cl-c {
  background: #fff;
  color: #0b3d2e;
}
.cl-end .cl-c {
  background: #e5483d;
}
.cl-ans .cl-c {
  background: #2cae68;
}
.cl-endbig .cl-c {
  width: 74px;
  height: 74px;
}
.cl-down {
  display: grid;
  transform: rotate(135deg);
}
.cl-incoming[data-missed] .cl-who h2 {
  color: #fff;
}
/* "Message", under Decline and Answer on a ring. */
.cl-msg {
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.cl-msg .ico {
  width: 20px;
  height: 20px;
}
.cl-msg:active {
  background: rgba(255, 255, 255, 0.18);
}
/* The quick replies, a sheet over the ring. */
.cl-rs-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 16, 11, 0.5);
  animation: cl-fade 0.2s ease backwards;
}
.cl-rs {
  width: 100%;
  max-width: 480px;
  padding: 14px 8px calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-radius: 24px 24px 0 0;
  background: var(--card, #fff);
  color: var(--ink, #101a15);
  box-shadow: var(--shadow2, 0 -10px 40px rgba(0, 0, 0, 0.3));
  animation: cl-up 0.26s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
}
.cl-rs-h {
  margin: 0 0 4px;
  padding: 2px 16px 8px;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink3, #8d958f);
}
.cl-rs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-rs li + li {
  border-top: 1px solid var(--line, rgba(16, 26, 21, 0.07));
}
.cl-rs button {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.cl-rs button:active {
  background: var(--line, rgba(16, 26, 21, 0.07));
}
.cl-rs .cl-rs-own {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  color: var(--forest, #0b3d2e);
}
.cl-rs .cl-rs-own .ico {
  width: 20px;
  height: 20px;
}
@keyframes cl-fade {
  from {
    opacity: 0;
  }
}
@keyframes cl-up {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}

/* The pill: small, dark green, at the top of the app over every tab and page. */
.cl-pillbar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  left: 10px;
  right: 10px;
  z-index: 3450;
  height: 46px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 23px;
  background: #0b3d2e;
  color: #fff;
  box-shadow: 0 6px 18px rgba(4, 22, 15, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  animation: cl-drop 0.26s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
}
@keyframes cl-drop {
  from {
    transform: translateY(-14px);
    opacity: 0;
  }
}
.cl-pill-open {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.cl-pill-open .ava {
  flex: none;
}
.cl-pill-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 650;
}
.cl-pill-time {
  flex: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lime, #dcef4e);
  font-variant-numeric: tabular-nums;
}
.cl-pill-b {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.cl-pill-b[data-on] {
  background: #fff;
  color: #0b3d2e;
}
.cl-pill-b.cl-pill-end {
  background: #e5483d;
}
.cl-pill-b .ico {
  width: 20px;
  height: 20px;
}
/* While the call is a pill (or its card) the app's pages start below it. */
.app.one17[data-incall] {
  padding-top: calc(env(safe-area-inset-top, 0px) + 54px);
}
.app.one17[data-incall] > .top.t17 {
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  padding-top: 8px;
}
.app.one17[data-incall] .overlay:not(.overlay .overlay, .cl-screen) {
  top: calc(env(safe-area-inset-top, 0px) + 54px);
}
/* The card: slides down from the top. Swipe up for the full screen. */
.cl-cardwrap {
  position: absolute;
  inset: 0;
  z-index: 3480;
}
.cl-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: rgba(4, 16, 11, 0.5);
  animation: cl-fade 0.2s ease backwards;
}
.cl-xcard {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 10px;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(180deg, #0d4634 0%, #0a3326 100%);
  color: #fff;
  box-shadow: 0 14px 40px rgba(2, 12, 8, 0.45);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: cl-slide 0.3s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
}
@keyframes cl-slide {
  from {
    transform: translateY(-40%);
    opacity: 0;
  }
}
.cl-xhead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.cl-xhead .ava {
  flex: none;
}
.cl-xwho {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cl-xwho b {
  font-size: 1.12rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-xwho small {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.66);
}
.cl-xtime {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lime, #dcef4e);
  font-variant-numeric: tabular-nums;
}
.cl-xchev {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
}
.cl-xcard .cl-ctl {
  gap: 18px;
}
.cl-xcard .cl-c {
  width: 60px;
  height: 60px;
}
.cl-xcard .cl-endbig .cl-c {
  width: 64px;
  height: 64px;
}
.cl-xcard .cl-grid {
  gap: 12px 8px;
}
.cl-grab {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
}
.cl-grab span {
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .cl-screen,
  .cl-pillbar,
  .cl-xcard,
  .cl-scrim,
  .cl-rs,
  .cl-rs-wrap {
    animation: none;
  }
}
.cl-notice-wrap {
  position: absolute;
  inset: 0;
  z-index: 3600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: rgba(8, 18, 14, 0.42);
}
.cl-notice {
  width: 100%;
  max-width: 420px;
  padding: 20px 18px 14px;
  border-radius: 20px;
  background: var(--card, #fff);
  color: var(--ink, #101a15);
  box-shadow: var(--shadow2, 0 16px 40px rgba(0, 0, 0, 0.3));
}
.cl-notice p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.45;
}
.cl-notice button {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: var(--forest, #0b3d2e);
  color: #fff;
  font: inherit;
  font-weight: 650;
}
/* The phone icon in a private chat's header. */
.ct-call {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.ct-call:active {
  background: rgba(16, 26, 21, 0.07);
}

/* A call in the thread: a rounded card. A coloured circle with a handset, a bold title, a grey line, the time. Pale green when the
   call happened, pale red when it did not; a missed call for the one who missed it also has a Call back button. The tints are
   rgba over the page, so the same rules serve the light and the dark theme. */
.cl-line {
  align-self: center;
  width: min(100%, 340px);
  margin: 8px 0 2px;
}
.cl-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 11px 14px 11px 11px;
  border-radius: 20px;
  /* The tint is a layer over the solid card colour, so the doodles never show through the card. */
  background: linear-gradient(rgba(44, 174, 104, 0.075), rgba(44, 174, 104, 0.075)), var(--card);
  box-shadow: var(--shadow1);
  color: var(--ink);
}
.cl-card[data-bad] {
  background: linear-gradient(rgba(217, 74, 61, 0.08), rgba(217, 74, 61, 0.08)), var(--card);
}
.cl-card[data-bad]:not([data-back]) {
  background: var(--card);
}
.cl-card[data-back] {
  cursor: pointer;
}
.cl-ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(44, 174, 104, 0.2);
  color: #1c7a4a;
}
.cl-card[data-bad] .cl-ic {
  background: rgba(217, 74, 61, 0.16);
  color: #b2392c;
}
.cl-ic .ico {
  width: 24px;
  height: 24px;
}
.cl-tx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cl-t {
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--ink);
}
.cl-s {
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--ink2);
}
.cl-at {
  align-self: center;
  font-size: 0.84rem;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.cl-back {
  grid-column: 1 / -1;
  margin-top: 11px;
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--forest, #0b3d2e);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.cl-back .ico {
  width: 20px;
  height: 20px;
}
.cl-back:active {
  filter: brightness(1.15);
}
/* In the dark theme the Call back button is the app's accent (lime with dark text), as its other main buttons are. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cl-back {
    background: var(--acc);
    color: var(--accOn);
  }
}
:root[data-theme="dark"] .cl-back {
  background: var(--acc);
  color: var(--accOn);
}
/* SETUP WITH REMY (SetupChat.tsx, SetupShell.tsx): the approved prototype in the app's own look. Light only, as the
   One17 shell. Quick replies are 48 px pills; nothing here is red. */

/* ── the chat ── */
.su-scroll {
  display: flex;
  flex-direction: column;
}
.su-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding-bottom: 8px;
}
.su-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.su-msg {
  animation: su-rise 0.25s ease-out both;
}
.su-msg .remy-text b {
  font-weight: 650;
}
@keyframes su-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── the bar while a step is open ── */
.su-dock {
  position: relative;
}
.su-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 4px 10px;
}
.su-q {
  flex: none;
  height: 48px;
  padding: 0 18px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: su-rise 0.25s ease-out both;
  cursor: pointer;
}
.su-q[data-main] {
  background: var(--forest);
  color: #fff;
  border-color: transparent;
}
.su-q:disabled {
  color: var(--ink3);
  background: var(--bg);
  cursor: default;
}
.su-q .ico {
  width: 18px;
  height: 18px;
}
.su-q:not(:disabled):active {
  transform: scale(0.96);
}
.su-bar .bar-field input[data-kind="code"] {
  text-transform: uppercase;
}
.su-bar .bar-field input[data-kind="code"]::placeholder {
  text-transform: none;
}
.su-bar .bar-field input[data-kind="otp"] {
  letter-spacing: 0.18em;
}
.su-bar .bar-field input[data-kind="otp"]::placeholder {
  letter-spacing: normal;
}

/* Saved: a small moment over the bar when something is kept. */
.su-saved {
  position: absolute;
  left: 50%;
  top: -52px;
  transform: translate(-50%, 8px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 99px;
  background: var(--card);
  box-shadow: 0 2px 4px rgba(16, 26, 21, 0.05), 0 12px 32px rgba(16, 26, 21, 0.1);
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 5;
}
.su-saved[data-on] {
  opacity: 1;
  transform: translate(-50%, 0);
}
.su-saved-i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--lime);
  display: grid;
  place-items: center;
}
.su-saved-i .ico {
  width: 13px;
  height: 13px;
}

/* ── the Setup pill in the title row ── */
.su-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  border-radius: 99px;
  background: var(--card);
  box-shadow: var(--shadow1);
  border: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}
.su-ring {
  transform: rotate(-90deg);
  flex: none;
}
.su-trk {
  stroke: var(--line);
}
.su-val {
  stroke: var(--forest);
  transition: stroke-dashoffset 0.28s ease-out;
}
.su-pill[data-tick] {
  animation: su-pop 0.3s ease-out;
}
.su-pill[data-done] {
  animation: su-pop 0.3s ease-out, su-fade 0.3s ease-in 1.9s forwards;
}
@keyframes su-pop {
  0% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes su-fade {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* ── the list behind the pill ── */
.su-list {
  padding: 4px 22px calc(22px + env(safe-area-inset-bottom, 0px));
}
.su-list h3 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.su-prog {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 10px;
}
.su-prog > span:last-child {
  font-size: 0.88rem;
  color: var(--ink2);
  font-weight: 600;
}
.su-thin {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.su-thin b {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--forest);
  transition: width 0.28s ease-out;
}
/* A row is tapped to choose it. The chosen one has a light lime tint and a forest edge, no shadow; the line between rows
   is drawn inside, so it can step aside for the chosen row. */
.su-li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% + 20px);
  min-height: 56px;
  margin: 0 -10px;
  padding: 0 10px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.su-li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--line);
}
.su-prog + .su-li::before,
.su-li[data-sel]::before,
.su-li[data-sel] + .su-li::before {
  display: none;
}
.su-li[data-sel] {
  background: rgba(212, 232, 92, 0.28);
  border-color: #0b3d2e;
}
.su-li:focus-visible {
  outline: 2px solid #d4e85c;
  outline-offset: 1px;
}
.su-st {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.su-st[data-ok] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--forest);
}
.su-st .ico {
  width: 15px;
  height: 15px;
}
.su-li-t {
  flex: 1;
  min-width: 0;
}
.su-li-t b {
  display: block;
  font-weight: 600;
}
.su-li-t span {
  font-size: 0.86rem;
  color: var(--ink2);
}
.su-tag {
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--ink2);
  background: var(--line);
  border-radius: 99px;
  padding: 4px 10px;
}
.su-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 99px;
  background: var(--forest);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  margin-top: 20px;
  cursor: pointer;
}
.su-btn .ico {
  width: 22px;
  height: 22px;
}
.su-btn:disabled {
  background: var(--line);
  color: var(--ink2);
  cursor: default;
}

/* ── a tab that needs a business ── */
.su-lock {
  margin: 28px 16px 0;
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 2px 4px rgba(16, 26, 21, 0.05), 0 12px 32px rgba(16, 26, 21, 0.1);
  padding: 28px 22px;
  text-align: center;
}
.su-lock-ic {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #eef5c6;
  color: var(--forest);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.su-lock-ic .ico {
  width: 28px;
  height: 28px;
}
.su-lock h3 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.su-lock p {
  margin: 8px 0 0;
  color: var(--ink2);
}

/* ── the shell of an account with no business yet ── */
.su-me {
  padding: 0;
  border: 0;
  background: none;
}
.su-prof {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 24px;
}
.su-prof-av {
  width: 84px;
  height: 84px;
  font-size: 1.8rem;
}
.su-prof b {
  font-size: 1.25rem;
  margin-top: 12px;
  color: var(--ink);
}
.su-prof span:not(.su-prof-av) {
  color: var(--ink2);
  font-size: 0.92rem;
}
.su-srow {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .su-msg,
  .su-q,
  .su-pill[data-tick] {
    animation: none;
  }
  .su-pill[data-done] {
    animation: su-fade 0.01s linear 1.9s forwards;
  }
}
/* Home (homecalm.tsx): centred, on a very light warm page. Light only: One17 forces light. */
.app.one17[data-tab="home"] {
  --bg: #f9faf6;
}
.hc-slot[data-out] {
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  transition: height 0.35s ease, opacity 0.25s ease;
}
.hc-hero,
.hc-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
}
.hc-hero {
  position: relative;
  z-index: 0;
  /* sits lower on the page (founder, 26 Oct 2026: "it needs to come down a bit") */
  padding-top: clamp(48px, 13vh, 120px);
}
.hc-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  margin: 0 auto;
}
/* the wide, faint halo */
.hc-orb::before {
  content: "";
  position: absolute;
  inset: -52px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(128, 224, 80, 0.62) 0%, rgba(128, 224, 80, 0.56) 48%, rgba(128, 224, 80, 0.3) 62%, rgba(128, 224, 80, 0.11) 80%, rgba(128, 224, 80, 0) 100%);
  z-index: -1;
  pointer-events: none;
  animation: hc-glow 7s ease-in-out infinite;
}
.hc-orb .orb {
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.28), inset 0 3px 5px rgba(255, 255, 255, 0.08), 0 6px 22px rgba(11, 61, 46, 0.22);
}
@keyframes hc-glow {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}
.hc-hello {
  margin: 38px 0 0;
  font-size: clamp(1.9rem, 9.9vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #5d6a65;
}
.hc-hello[data-long] {
  font-size: clamp(1.7rem, 8.4vw, 2.1rem);
}
.hc-hello span {
  color: #0e1a14;
}
.hc-status {
  padding-top: 26px;
  padding-bottom: 8px;
}
.hc-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #3b4540;
}
.hc-head {
  text-align: left;
}
.hc-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #80dc57;
  box-shadow: 0 0 0 4px rgba(128, 220, 87, 0.2), 0 0 14px 4px rgba(128, 220, 87, 0.45);
}
.hc-status[data-tone="risk"] .hc-dot {
  background: #e8a92e;
  box-shadow: 0 0 0 4px rgba(232, 169, 46, 0.2), 0 0 14px 4px rgba(232, 169, 46, 0.4);
}
.hc-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-width: 22.5rem;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #5d6a65;
}
.hc-list li {
  position: relative;
  padding-left: 16px;
}
.hc-list li + li {
  margin-top: 8px;
}
.hc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9a06a;
}
.hc-more {
  max-width: 22.5rem;
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #8a928d;
}
.hc-foot {
  max-width: 24em;
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #8a928d;
}
.hc-status[data-tone="risk"] .hc-foot {
  margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .hc-orb::before {
    animation: none;
  }
}
/* THE CALL LOG ON THE TEAM TAB (calllog.tsx), to the founder's mockup (31 Oct 2026): the Chats | Calls switch with an icon in each
   half, the search and filter, and the rows in one white rounded card. Tints are rgba over the page's own tokens, so the light and
   the dark theme both work. */
.cl17-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 99px;
  background: var(--card);
  box-shadow: var(--shadow1);
}
.cl17-seg button {
  position: relative;
  height: 42px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: var(--ink2);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.cl17-seg button .ico {
  width: 20px;
  height: 20px;
}
.cl17-seg button[data-on] {
  background: #d4e85c;
  color: #0b3d2e;
  font-weight: 750;
}
.cl17-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--danger, #c2362b);
  color: #fff;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* The search and the filter button. */
.cl17-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cl17-bar .tm17-search {
  flex: 1;
  min-width: 0;
}
.cl17-fwrap {
  position: relative;
  flex: none;
}
.cl17-filter {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow1);
  display: grid;
  place-items: center;
  position: relative;
}
.cl17-filter .ico {
  width: 20px;
  height: 20px;
}
.cl17-filter[data-on]::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8fb81f;
  box-shadow: 0 0 0 2px var(--card);
}
/* Small menus: the filter's choices and a row's Message and Call. */
.cl17-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow2);
  border: 1px solid var(--line, rgba(16, 26, 21, 0.07));
  display: flex;
  flex-direction: column;
  animation: cl17-pop 0.14s var(--ease, ease-out) backwards;
}
.cl17-menu[data-dir="up"] {
  top: auto;
  bottom: calc(100% + 6px);
}
@keyframes cl17-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cl17-menu {
    animation: none;
  }
}
.cl17-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 550;
  text-align: left;
}
.cl17-menu button:active,
.cl17-menu button[data-on] {
  background: rgba(212, 232, 92, 0.3);
}
.cl17-menu button .ico {
  width: 19px;
  height: 19px;
  color: var(--ink2);
}
.cl17-fmenu button span {
  flex: 1;
}
.cl17-fmenu button[data-on] .ico {
  color: var(--forest, #0b3d2e);
}
/* The rows, in one white rounded card. */
.cl17-card {
  margin: 0 16px;
  padding: 2px 10px 2px 14px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow1);
}
.cl17-item {
  position: relative;
  border-bottom: 1px solid var(--line, rgba(16, 26, 21, 0.07));
}
.cl17-item[data-last] {
  border-bottom: 0;
}
.cl17-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 0;
}
.cl17-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.cl17-open .ava {
  flex: none;
}
.cl17-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cl17-main b {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl17-open time {
  flex: none;
  font-size: 0.84rem;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.cl17-w {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.86rem;
  color: var(--ink2);
}
.cl17-w > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl17-ar {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--ok, #1c7a4a);
}
.cl17-w[data-red] {
  color: var(--danger, #c2362b);
}
.cl17-w[data-red] .cl17-ar {
  color: var(--danger, #c2362b);
}
/* The round call button: pale green, or pale red on a missed or declined call. */
.cl17-ring {
  flex: none;
  width: 42px;
  height: 42px;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(44, 174, 104, 0.16);
  color: #0b5d3b;
  display: grid;
  place-items: center;
}
.cl17-ring[data-red] {
  background: rgba(217, 74, 61, 0.14);
  color: #c2362b;
}
.cl17-ring .ico {
  width: 20px;
  height: 20px;
}
.cl17-mwrap {
  position: relative;
  flex: none;
}
.cl17-dots {
  width: 30px;
  height: 42px;
  border: 0;
  background: none;
  color: var(--ink2);
  display: grid;
  place-items: center;
}
.cl17-dots .ico {
  width: 20px;
  height: 20px;
}
/* The chat list leaves 120px under it for the bottom bar (inbox.css .ib17); here Load more sits right under the card and the room is under it. */
.cl17-list {
  padding-top: 12px;
  padding-bottom: 120px;
}
.cl17-list .ib17 {
  margin-bottom: 0;
}
.cl17-more {
  margin: 10px 16px 0;
  text-align: center;
}
.cl17-more p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--danger, #c2362b);
}
/*
 * The Profile tab (profileview.tsx), as the founder drew it, 27 Oct 2026. Forest #0B3D2E and lime #D4E85C; white cards with a
 * soft grey edge (#E5E5E0), radius 16; light grey icon tiles (#F1F1EC); no shadows. Sizes match Team and Home: row labels
 * 0.95rem, values 0.78rem, section headings 1rem.
 */
.prw {
  padding: 4px 16px 0;
}
.prw .pf-find {
  padding: 0 0 12px;
}

/* the top card */
.prw-top {
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}
/* the photo on the left, the name, role and the role pill beside it (the founder's picture) */
.prw-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.prw-ava {
  position: relative;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  flex: none;
}
.prw-ava .ava {
  display: grid;
  place-items: center;
}
.prw-cam {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0b3d2e;
  color: #fff;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
}
.prw-cam svg {
  width: 14px;
  height: 14px;
}
.prw-name {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prw-role {
  margin-top: 2px;
  font-size: 0.86rem;
  color: var(--ink3);
}
.prw-biz {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  border: 0;
  background: #d4e85c;
  color: #0b3d2e;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.prw-biz > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prw-biz-i {
  width: 16px;
  height: 16px;
  flex: none;
}
.prw-biz-c {
  width: 14px;
  height: 14px;
  flex: none;
  color: #0b3d2e;
}

/* a section: heading, grey line, card of rows */
.prw-sec {
  margin-top: 22px;
}
.prw-top + .prw-sec {
  margin-top: 16px;
}
.prw-h {
  margin: 0 4px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prw-sub {
  margin: 2px 4px 0;
  font-size: 0.78rem;
  color: var(--ink3);
}
.prw-card {
  margin-top: 10px;
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 16px;
  overflow: hidden;
}
.prw-sec > .prw-card:first-child {
  margin-top: 0;
}
.prw-card .prw-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid #e5e5e0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.prw-card .prw-row:last-child {
  border-bottom: 0;
}
.prw-tile {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #f1f1ec;
  color: #4a524d;
  display: grid;
  place-items: center;
}
.prw-tile svg {
  width: 20px;
  height: 20px;
}
.prw-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.prw-main b {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.prw-main span {
  font-size: 0.78rem;
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prw-chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink3);
}
.prw-state {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ececE7;
  color: #6b736e;
  font-size: 0.78rem;
  font-weight: 700;
}
.prw-state[data-on] {
  background: #d4e85c;
  color: #0b3d2e;
}

/* A switch at the right of a row (Biometrics): lime track with a forest knob when on, grey when off. No shadow. */
.prw-sw {
  flex: none;
  position: relative;
  width: 50px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #dcddd7;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.prw-sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.22s, background 0.2s;
}
.prw-sw[aria-checked="true"] {
  background: #d4e85c;
}
.prw-sw[aria-checked="true"]::after {
  background: #0b3d2e;
  transform: translateX(20px);
}
.prw-sw:focus-visible {
  outline: 2px solid #0b3d2e;
  outline-offset: 2px;
}

/* Log out, then Delete account */
.prw-sec[data-sec="foot"] {
  margin-top: 22px;
}
.prw-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid #f3d4d2;
  border-radius: 16px;
  background: #fdf0ef;
  color: #c0392b;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.prw-logout .prw-tile {
  background: #fadbd8;
  color: #c0392b;
}
.prw-logout .prw-lt {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
}
.prw-logout .prw-chev {
  color: #c0392b;
}
.prw-delete {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 14px 8px;
  border: 0;
  background: none;
  color: #c0392b;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.prw-delete svg {
  width: 18px;
  height: 18px;
}
.prw-none {
  margin: 28px 0;
  text-align: center;
  color: var(--ink3);
  font-size: 0.9rem;
}

/* Turn off Biometrics: asks first */
.bio-ask h3 {
  margin: 4px 0 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.bio-ask p {
  margin: 8px 0 4px;
  color: var(--ink2);
}
.prw-ask-btn {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 12px;
  border: 0;
  border-radius: 99px;
  background: #0b3d2e;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.prw-ask-keep {
  background: #ececE7;
  color: #0b3d2e;
}

/* Biometrics' line is longer than the others: it wraps instead of being cut. */
.prw-row[data-row="biometrics"] .prw-main span {
  white-space: normal;
}
/*
 * The FAQ, Privacy policy and Terms pages inside the app (legalpage.tsx, drawn in sidebar.tsx WebPage). Forest #0B3D2E, lime
 * #D4E85C, hairline #E5E5E0, light grey #F1F1EC; no shadows. Body text 0.95rem, headings and notes in the app's own sizes.
 */
.web17 {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.web17 .ov-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lg {
  padding: 8px 18px 8px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.lg a {
  color: #0b3d2e;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #d4e85c;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.lg-lead {
  margin: 0 0 10px;
  color: var(--ink3);
}
.lg-jump {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0 6px;
  padding: 12px 14px;
  border: 1px solid #e5e5e0;
  border-radius: 16px;
  background: #fff;
}
.lg-jump b {
  margin-bottom: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lg-jump a {
  padding: 5px 0;
  font-size: 0.9rem;
  text-decoration: none;
}
.lg-h3 {
  margin: 28px 0 8px;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #0b3d2e;
  scroll-margin-top: 8px;
}
.lg-h4 {
  margin: 18px 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.lg-p {
  margin: 8px 0;
}
.lg-small {
  margin: 18px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink3);
}
.lg-note {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f1f6d8;
  border-left: 4px solid #d4e85c;
}
.lg-note .lg-p,
.lg-note p {
  margin: 0;
}
.lg-list {
  margin: 8px 0;
  padding-left: 22px;
}
.lg-list li {
  margin: 5px 0;
  padding-left: 2px;
}
.lg-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.lg-trow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e5e5e0;
  border-radius: 14px;
  background: #fff;
}
.lg-cell {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  line-height: 1.45;
}
.lg-cl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink3);
}
.lg-q {
  margin: 8px 0;
  border: 1px solid #e5e5e0;
  border-radius: 16px;
  background: #fff;
}
.lg-q summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  font-weight: 650;
  color: #0b3d2e;
  cursor: pointer;
  list-style: none;
}
.lg-q summary::-webkit-details-marker {
  display: none;
}
.lg-q summary span {
  flex: 1;
  min-width: 0;
}
.lg-q summary svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink3);
  transition: transform 0.2s ease;
}
.lg-q[open] summary svg {
  transform: rotate(180deg);
}
.lg-q[open] {
  background: #fafaf6;
}
.lg-a {
  padding: 0 14px 12px;
}
.lg-a .lg-p:first-child {
  margin-top: 0;
}
.lg-updated {
  margin: 30px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e5e5e0;
  font-size: 0.82rem;
  color: var(--ink3);
  text-align: center;
}
/*
 * The Profile tab's Text size and Help sheets (profilesheets.tsx), as the founder drew them, 27 Oct 2026. Forest #0B3D2E, lime
 * #D4E85C, hairline #E5E5E0, light grey tiles and round buttons (#EFEFEA); no shadows on the cards or the sheet.
 */
.sheet.ps-sheet {
  box-shadow: none;
}
.ps-pad {
  padding: 8px 18px 22px;
}
.ps-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.ps-ht {
  flex: 1;
  min-width: 0;
}
.ps-title {
  margin: 4px 0 0;
  font-size: 1.45rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #0b3d2e;
}
.ps-sub {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--ink3);
  line-height: 1.35;
}
.ps-x {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #efefea;
  color: #0b3d2e;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ps-x svg {
  width: 18px;
  height: 18px;
}
.ps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* the cards share one look: white, a hairline, radius 18 */
.ps-opt,
.ps-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #e5e5e0;
  border-radius: 18px;
  background: #fff;
  color: #0b3d2e;
  font: inherit;
  text-align: left;
}
.ps-opt {
  cursor: pointer;
}
.ps-opt[data-on] {
  background: #f1f6d8;
  border-color: #0b3d2e;
  box-shadow: inset 0 0 0 0.5px #0b3d2e;
}
.ps-ot {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-ot b {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0b3d2e;
}
.ps-ot span {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink3);
}

/* Text size: the Aa tile, grey, or lime when chosen; the radio, empty or filled forest */
.ps-aa {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #efefea;
  color: #0b3d2e;
  display: grid;
  place-items: center;
  font-weight: 700;
  line-height: 1;
}
.ps-opt[data-on] .ps-aa {
  background: #d4e85c;
}
.ps-radio {
  flex: none;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #a3a39d;
  background: transparent;
}
.ps-opt[data-on] .ps-radio {
  border-color: #0b3d2e;
  background: radial-gradient(circle, #0b3d2e 0 46%, transparent 50%);
}

/* Help: the tiles are a pale lime (#E9F4C0, the picture's), the chosen Aa tile above is the full lime; a card is the link (tile, words, the number or address) and a round copy button */
.ps-card {
  padding: 0;
  gap: 0;
}
.ps-go {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 12px 12px;
  color: inherit;
  text-decoration: none;
}
.ps-tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #e9f4c0;
  color: #0b3d2e;
  display: grid;
  place-items: center;
}
.ps-tile svg {
  width: 24px;
  height: 24px;
}
.ps-val {
  flex: none;
  max-width: 46%;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0b3d2e;
  text-align: right;
  overflow-wrap: anywhere;
}
.ps-copy {
  flex: none;
  min-width: 36px;
  height: 36px;
  margin: 0 10px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #efefea;
  color: #0b3d2e;
  display: grid;
  place-items: center;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}
.ps-copy svg {
  width: 18px;
  height: 18px;
}
.ps-copy[data-copied] {
  background: #d4e85c;
  padding: 0 12px;
}

/* Language: the same cards as Text size. The tile holds the language's short mark, grey, or lime when chosen. A language that is not ready is greyed, with a grey "Coming soon" pill and no radio. */
.ps-lg {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #efefea;
  color: #0b3d2e;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
.ps-opt[data-on] .ps-lg {
  background: #d4e85c;
}
.ps-opt:disabled {
  cursor: default;
}
.ps-soon {
  cursor: default;
  background: #fafaf7;
}
.ps-soon .ps-lg {
  background: #f1f1ed;
  color: #a3a39d;
}
.ps-soon .ps-ot b {
  color: #8a8a84;
}
.ps-pill {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: #efefea;
  color: #6f6f69;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.ps-note {
  margin: 14px 2px 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink3);
}
.ps-err {
  margin: 12px 2px 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #a33b2e;
}