/* One variable font for the whole product: Cyrillic and Latin share every weight. */
@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ground: #fff;
  --surface: #fff;
  --paper: #fffefa;
  --paper-focus: #f6f6f2;
  --paper-locked: #f4f3ee;
  --message-in: #f1f0eb;
  --ink: #3d4542;
  --ink-hover: #505c54;
  /* Text that lands on a solid accent or a stored profile colour. Those stay
     light in every theme, so this one does not follow --ink when it inverts. */
  --accent-ink: #3d4542;
  --soft-ink: #626d66;
  --faint-ink: #6f7872;
  --line: #dedfd7;
  --line-strong: #c9cbc3;
  --knob: #fffefa;
  --celadon: #b9cec1;
  --celadon-soft: #edf3ee;
  --apricot: #efc9aa;
  --apricot-hover: #e9c697;
  --apricot-soft: #faeee3;
  --powder: #cbd8df;
  --powder-soft: #eef3f5;
  --blush: #e7ced1;
  --blush-soft: #f7edef;
  --stone: #d7d0c4;
  --ok-ink: #7fa38a;
  --wait-ink: #7a6753;
  --warn-ink: #8f6d4f;
  --stop-ink: #8f625e;
  --stop-soft-ink: #986d69;
  --stop-dot: #c58f8a;
  --knob-shadow: 0 2px 7px rgba(61, 69, 66, .12);
  --panel-shadow: 0 22px 70px rgba(61, 69, 66, .12);
  /* Watercolour on white, multiplied into the page. A dark page gives it a
     sheet to sit on instead. */
  --art-card: transparent;
  --art-card-pad: 0;
  color-scheme: light;
  /* Type roles, not sizes: a rule picks the job the text does, and the job sets
     the size. Home, Settings, Profile and Guide get the roomy values below;
     .inbox-body redefines the same four one step tighter. */
  --text-meta: 13px;   /* labels, captions, chips, counts, timestamps */
  --text-body: 15px;   /* prose, field values, anything read for content */
  --text-title: 17px;  /* the name of a row or item */
  --text-header: 18px; /* a heading over a group */
  --page-content-width: 1160px;
  --page-content-inset: clamp(0px, 2vw, 28px);
  --page-content-gap: clamp(58px, 7vw, 105px);
}


/* Working dims the room. Ground and panels stay neutral, so the tints below
   are still the only colour on the page. */
:root[data-theme="working"] {
  --ground: #212120;
  --surface: #2a2a28;
  --paper: #333331;
  --paper-focus: #3b3b38;
  --paper-locked: #2e2e2c;
  --message-in: #37362f;
  --ink: #e8e6df;
  --ink-hover: #d5d2ca;
  --accent-ink: #212120;
  --soft-ink: #aaa9a2;
  --faint-ink: #93928b;
  --line: #3a3a38;
  --line-strong: #545452;
  --knob: #e6e4dd;
  --celadon-soft: #2f4238;
  --apricot-soft: #453728;
  --powder-soft: #2b3941;
  --blush-soft: #442f34;
  --ok-ink: #93bca1;
  --wait-ink: #cdb18b;
  --warn-ink: #d9b183;
  --stop-ink: #d8a49e;
  --stop-soft-ink: #cda19c;
  --stop-dot: #dda6a0;
  --knob-shadow: 0 2px 7px rgba(0, 0, 0, .4);
  --panel-shadow: 0 22px 70px rgba(0, 0, 0, .45);
  --art-card: #ece8dd;
  --art-card-pad: 24px;
  color-scheme: dark;
}

/* Dark takes the ground to near-black. The four accents are untouched. */
:root[data-theme="dark"] {
  --ground: #111111;
  --surface: #1a1a19;
  --paper: #232322;
  --paper-focus: #2b2b29;
  --paper-locked: #1f1f1e;
  --message-in: #272624;
  --ink: #eceae3;
  --ink-hover: #d8d5cd;
  --accent-ink: #171716;
  --soft-ink: #a3a29b;
  --faint-ink: #888781;
  --line: #2d2d2b;
  --line-strong: #474745;
  --knob: #e6e4dd;
  --celadon-soft: #21332a;
  --apricot-soft: #352a1f;
  --powder-soft: #1f2b32;
  --blush-soft: #342327;
  --ok-ink: #8fb79c;
  --wait-ink: #c7ab85;
  --warn-ink: #d3a97c;
  --stop-ink: #d29b95;
  --stop-soft-ink: #c79a95;
  --stop-dot: #d9a09a;
  --knob-shadow: 0 2px 7px rgba(0, 0, 0, .5);
  --panel-shadow: 0 22px 70px rgba(0, 0, 0, .55);
  --art-card: #ece8dd;
  --art-card-pad: 24px;
  color-scheme: dark;
}

/* The inbox is the work surface: same roles, denser scale. */
.inbox-body {
  --text-meta: 12px;
  --text-body: 14px;
  --text-title: 15px;
  --text-header: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--ground);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  color: inherit;
}

button {
  appearance: none;
}

img {
  display: block;
  max-width: 100%;
}

form {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-mark {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--apricot);
}

.page-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 100dvh;
  padding: 30px clamp(26px, 5vw, 74px) 24px;
}

.page-shell-scroll {
  height: auto;
  min-height: 100dvh;
}

.page-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 9px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -.03em;
  text-decoration: none;
}

.page-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.page-footer-with-name {
  justify-content: space-between;
}

.page-name {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 30px;
  font-weight: 410;
  line-height: 1;
  letter-spacing: -.05em;
}

.page-name .page-name-link,
.page-name .page-name-link:hover {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
}

.page-name-suffix {
  white-space: pre;
}

.page-footer-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-footer a,
.page-footer button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 15px;
  color: var(--soft-ink);
  background: transparent;
  font-size: var(--text-meta);
  text-decoration: none;
  cursor: pointer;
}

.page-footer a:hover,
.page-footer button:hover {
  color: var(--ink);
  background: var(--celadon-soft);
}

/* Volume waiting for the team, and in apricot the part that is this operator's. */
.inbox-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 7px;
  padding: 0 3px;
  border-radius: 999px;
}

/* An empty mark waits for the next count without opening a gap in the label. */
.inbox-mark:empty {
  margin-left: 0;
  padding: 0;
}

/* A mark that just grew answers with colour once, then settles. */
.inbox-mark.arrived {
  animation: count-arrived 1.5s ease-out;
}

@keyframes count-arrived {
  from {
    background: var(--apricot-soft);
  }

  to {
    background: transparent;
  }
}

.inbox-mark-team {
  color: var(--faint-ink);
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.inbox-mark-mine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--apricot);
  font-size: var(--text-meta);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The same mark rides the dark Home action, where the quiet count needs light ink. */
.primary-action .inbox-mark {
  margin-left: 10px;
}

.primary-action .inbox-mark-team {
  color: var(--paper);
  opacity: .68;
}

.home-main {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: var(--page-content-gap);
  width: min(var(--page-content-width), 100%);
  margin: 0 auto;
}

.home-copy {
  padding-left: var(--page-content-inset);
}

.home-copy h1 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(54px, 5.5vw, 80px);
  font-weight: 350;
  line-height: .96;
  letter-spacing: -.065em;
}

.home-copy p {
  max-width: 480px;
  margin: 27px 0 0;
  color: var(--soft-ink);
  font-size: var(--text-body);
  line-height: 1.75;
}

.home-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}


.primary-action,
.quiet-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: var(--paper);
  background: var(--ink);
  font-size: var(--text-meta);
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.primary-action:active,
.quiet-save:active {
  transform: translateY(1px);
}

.quiet-save:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.bot-waiting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--soft-ink);
  font-size: var(--text-meta);
}


.home-art {
  display: grid;
  min-height: 460px;
  margin: 0;
  padding: var(--art-card-pad);
  border-radius: 34px;
  background: var(--art-card);
  place-items: center;
}

.home-art img {
  width: min(520px, 100%);
  max-height: 520px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.form-error,
.form-success {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--ink);
  background: var(--blush-soft);
  font-size: var(--text-body);
  line-height: 1.5;
}

.form-success {
  background: var(--celadon-soft);
}

@media (max-width: 900px) {
  .page-shell {
    height: auto;
    min-height: 100dvh;
    padding: 24px 20px 18px;
  }

  /* The same mark rides the dark Home action, where the quiet count needs light ink. */
.primary-action .inbox-mark {
  margin-left: 10px;
}

.primary-action .inbox-mark-team {
  color: var(--paper);
  opacity: .68;
}

.home-main {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 64px 0;
  }

  .home-art {
    min-height: 280px;
  }

  .home-art img {
    width: min(410px, 100%);
  }
}

@media (max-width: 600px) {
  .page-footer-with-name {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .page-footer-menu {
    align-self: flex-end;
  }

  .page-name {
    font-size: 24px;
  }

  .page-footer a,
  .page-footer button {
    padding: 0 8px;
  }
}

@media (max-width: 600px) {
  .home-copy h1 {
    font-size: clamp(50px, 15vw, 72px);
  }

  .home-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Keyboard cues appear only while navigating, leaving the resting page quiet. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 20px;
  z-index: 10;
  padding: 12px 16px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 12px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.primary-action:hover, .quiet-save:not(:disabled):hover { background: var(--ink-hover); }
.page-footer a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.home-copy h1, .page-name { overflow-wrap: anywhere; }