/* ==========================================================================
   Komunidad Platform — product chrome

   Sign-in, the single-pane assistant, the usage dashboard, and the workspace
   activation pages. The assembler at /build/ and the landing page carry their
   own stylesheets; this one has to agree with them, because a person crosses
   between the two in a single session and a change of palette mid-flow reads
   as a change of product.

   So the palette here is the one from landing.css and assembler.css — cool
   teal on white — and not the warm paper stock this file used to carry. There
   is deliberately no dark variant: /build/ has none, and a machine set to dark
   would otherwise show a dark sign-in page and a light app behind it.

   Pure CSS, no framework. All tokens are custom properties.
   ========================================================================== */

:root {
  /* Surfaces — the assembler's working surfaces, so the two agree */
  --paper:        #f4f7f8;
  --surface:      #ffffff;
  --surface-2:    #fafcfc;
  --surface-sunk: #eef2f4;

  /* Ink */
  --ink:          #17262b;
  --ink-2:        #41545c;
  --ink-3:        #6b7a84;
  --ink-faint:    #93a3ab;

  /* Rules and edges */
  --rule:         #e2eaec;
  --rule-strong:  #cfdade;

  /* Brand. #1d969e, not the #2dd4bf of the dark marketing pages: mint on
     white fails contrast for text and small controls. */
  --accent:       #1d969e;
  --accent-2:     #17787f;
  --accent-soft:  #eaf6f7;
  --accent-ink:   #135c62;
  --accent-line:  #a9d9dd;

  /* Semantic */
  --warn:         #8a5a06;
  --warn-soft:    #fdf5e6;
  --danger:       #b4322f;
  --danger-soft:  #fdefee;
  --ok:           #1c7a52;
  --ok-soft:      #eaf6f0;

  /* Type. Poppins throughout, self-hosted in css/fonts.css. --font-mono and
     --font-serif are kept as roles so existing rules need no rewriting; all
     three resolve to the one family, and the tabular-figure rules below do the
     digit alignment the monospace face used to. */
  --font-sans: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif;
  --font-mono: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif;
  --font-serif: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", sans-serif;

  /* Metrics. Rounded rather than the old 3px filing-card corners, to match
     the 26px composer pill on the landing page. */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --gutter:    20px;
  --rhythm:    24px;
  --shadow:    0 1px 2px rgba(20, 60, 66, .04),
               0 4px 16px rgba(20, 60, 66, .06);
  --shadow-lg: 0 2px 8px rgba(20, 60, 66, .06),
               0 20px 48px rgba(20, 60, 66, .10);
  --ring:      0 0 0 3px rgba(29, 150, 158, .16);
  --maxw:      1320px;
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .92rem; }

p { margin: 0 0 var(--rhythm); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }

code, kbd, .mono, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent-soft); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  height: 58px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(180%) blur(8px);
}

/* The mark is a link home, and it is the real logo rather than a text
   wordmark plus a square — the same lockup the landing page opens with, so
   crossing from / to /login/ does not look like arriving somewhere else. */
.masthead__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.masthead__logo {
  height: 24px;
  width: auto;
  display: block;
  transition: opacity .15s ease;
}
.masthead__mark:hover .masthead__logo { opacity: .72; }

.masthead__rule {
  width: 1px;
  height: 18px;
  background: var(--rule);
}

.masthead__sub {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masthead__nav { display: flex; gap: 4px; margin-left: auto; }

.masthead__link {
  padding: 7px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.masthead__link:hover {
  border-color: var(--accent-line);
  color: var(--accent-ink);
}
.masthead__link[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--rhythm) var(--gutter) 56px;
}

/* --------------------------------------------------------------------------
   Panel — the core "record card"
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}

.panel__title {
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.panel__meta { margin-left: auto; font-size: .78rem; color: var(--ink-3); }

.panel__body { padding: 18px; }

/* --------------------------------------------------------------------------
   Chat
   -------------------------------------------------------------------------- */

/* Four rows, because the panel has four children: header, turn meter, log,
   composer. It declared three, so the meter took the flexible row and floated
   in the middle of the page with the log collapsed underneath it. */
.chat {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: calc(100dvh - 58px - var(--rhythm) * 2);
  min-height: 520px;
  overflow: hidden;
}

.chat__log {
  overflow-y: auto;
  padding: 8px 22px 18px;
  scroll-behavior: smooth;
}

/* The ruled-paper gradient that used to live here belonged to the warm filing
   aesthetic. Against white it reads as banding rather than texture, and it
   scrolled with `background-attachment: local` so the lines slid under the
   text. Entries carry their own separators instead. */

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

.entry {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 14px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  animation: entry-in .22s ease-out both;
  transition: border-color .15s ease, background .15s ease;
}
.entry:last-child { margin-bottom: 0; }

/* The assistant's turns are the ones people re-read, so they get the surface
   and the user's stay plain — the asymmetry is what makes a thread skimmable
   without avatars or coloured bubbles. */
.entry--assistant {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.entry--user:hover { background: var(--surface-2); border-color: var(--rule); }

@keyframes entry-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entry { animation: none; }
}

.entry__gutter {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}

.entry__role { display: block; font-weight: 600; color: var(--ink-3); }
.entry__seq  { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }

.entry__body { min-width: 0; }

.entry__body p { margin: 0 0 .7em; }
.entry__body p:last-child { margin-bottom: 0; }

.entry--assistant .entry__body {
  font-size: .97rem;
  line-height: 1.62;
  color: var(--ink);
}

.entry--system .entry__body {
  font-size: .86rem;
  color: var(--ink-3);
  font-style: italic;
}

.entry__footnote {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.entry__footnote span + span::before {
  content: "·";
  margin: 0 7px;
  color: var(--rule-strong);
}

/* Typing indicator */
.typing { display: inline-flex; gap: 4px; align-items: center; height: 1.4em; }
.typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-faint);
  animation: pulse 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none; opacity: .5; }
}

/* Empty state */
.chat__empty {
  max-width: 46ch;
  margin: auto;
  padding: 6vh 0;
  text-align: center;
  color: var(--ink-3);
}
/* `margin: auto` only centres inside a flex/grid parent. */
.chat__log:has(.chat__empty) { display: grid; place-items: center; }
.chat__empty h2 { margin-bottom: 8px; color: var(--ink); }
.chat__empty p  { font-size: .9rem; }

/* --------------------------------------------------------------------------
   Turn meter (rate-limit indicator)
   -------------------------------------------------------------------------- */

.meter {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  font-size: .78rem;
  transition: background .25s ease, border-color .25s ease;
}

.meter__label {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--ink-2);
  white-space: nowrap;
}
.meter__label b { color: var(--ink); font-weight: 650; }

.meter__pips { display: flex; gap: 3px; }

.meter__pip {
  width: 16px; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  transition: background .2s ease, border-color .2s ease;
}
.meter__pip[data-spent="true"] { background: var(--accent); border-color: var(--accent); }

.meter__note { margin-left: auto; color: var(--ink-3); }

/* Warning state — 8/10 and 9/10 */
.meter[data-state="warning"] {
  background: var(--warn-soft);
  border-bottom-color: var(--warn);
}
.meter[data-state="warning"] .meter__label b,
.meter[data-state="warning"] .meter__note { color: var(--warn); }
.meter[data-state="warning"] .meter__pip[data-spent="true"] {
  background: var(--warn); border-color: var(--warn);
}

/* Exhausted state — 10/10 */
.meter[data-state="exhausted"] {
  background: var(--danger-soft);
  border-bottom-color: var(--danger);
}
.meter[data-state="exhausted"] .meter__label b,
.meter[data-state="exhausted"] .meter__note { color: var(--danger); }
.meter[data-state="exhausted"] .meter__pip[data-spent="true"] {
  background: var(--danger); border-color: var(--danger);
}

/* --------------------------------------------------------------------------
   Composer
   -------------------------------------------------------------------------- */

.composer {
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  padding: 13px 18px;
}

.composer__row { display: flex; gap: 11px; align-items: flex-end; }

.composer__input {
  flex: 1;
  min-height: 44px;
  max-height: 200px;
  padding: 11px 13px;
  resize: none;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 22px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.composer__input::placeholder { color: var(--ink-faint); }
.composer__input:hover:not(:disabled) { border-color: var(--accent-line); }
.composer__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.composer__input:disabled {
  background: var(--surface-sunk);
  color: var(--ink-faint);
  cursor: not-allowed;
  border-color: var(--rule);
}

.composer__hint {
  margin-top: 7px;
  font-size: .72rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  font: inherit;
  font-size: .86rem;
  font-weight: 550;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, transform .06s ease;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent-line); color: var(--accent-ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn--sm { height: 32px; padding: 0 14px; font-size: .78rem; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .88rem;
  animation: entry-in .2s ease-out both;
}
.notice__title { font-weight: 650; margin-bottom: 3px; }
.notice__body  { color: var(--ink-2); }
.notice__body p:last-child { margin-bottom: 0; }
.notice__actions { margin-top: 11px; display: flex; gap: 8px; }

.notice--warning { background: var(--warn-soft); }
.notice--danger  { background: var(--danger-soft); }
.notice--ok      { background: var(--ok-soft); }

.notice--warning .notice__title { color: var(--warn); }
.notice--danger  .notice__title { color: var(--danger); }
.notice--ok      .notice__title { color: var(--ok); }

/* --------------------------------------------------------------------------
   Analytics
   -------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: var(--rhythm);
}
.toolbar__spacer { margin-left: auto; }

.select {
  height: 34px;
  padding: 0 30px 0 11px;
  font: inherit;
  font-size: .84rem;
  color: var(--ink);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2378726a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  appearance: none;
  cursor: pointer;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: var(--rhythm);
}

.stat {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.stat:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.stat__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}

.stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 550;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.stat__foot { margin-top: 5px; font-size: .74rem; color: var(--ink-3); }

.stat--alert .stat__value { color: var(--danger); }
.stat--good  .stat__value { color: var(--ok); }

/* Bars */
.bars { display: grid; gap: 11px; }

.bar__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .82rem;
  margin-bottom: 5px;
}
.bar__name  { font-weight: 550; }
.bar__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }

.bar__track {
  height: 8px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: var(--radius-pill);
  transition: width .4s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .bar__fill { transition: none; }
}

/* Daily-spend column chart.

   `flex: 1` alone made one day of data a single slab the width of the card,
   which reads as a filled progress bar rather than a chart. Columns now have a
   sane maximum and the row starts from the left, so a sparse window looks
   sparse — which is the honest picture. */
.spark {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
  height: 120px;
  padding-top: 8px;
}
.spark__col {
  flex: 1 1 auto;
  min-width: 3px;
  max-width: 46px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: 4px 4px 0 0;
  opacity: .86;
  transition: opacity .14s ease, transform .14s ease;
  transform-origin: bottom;
}
.spark__col:hover { opacity: 1; transform: scaleY(1.02); }
.spark__col[data-blocked="true"] {
  background: linear-gradient(180deg, var(--danger) 0%, #8f2724 100%);
}

@media (prefers-reduced-motion: reduce) {
  .spark__col { transition: none; }
  .spark__col:hover { transform: none; }
}

.spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: .68rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Table */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--rhythm);
  margin-bottom: var(--rhythm);
}

.table { width: 100%; border-collapse: collapse; font-size: .85rem; }

.table th {
  text-align: left;
  padding: 8px 12px;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }

.table .num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.table__wrap { overflow-x: auto; }

.tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 2px;
  background: var(--surface-sunk);
  color: var(--ink-2);
}
.tag--alert { background: var(--danger-soft); color: var(--danger); }
.tag--ok    { background: var(--ok-soft);     color: var(--ok); }

.empty-row { padding: 28px; text-align: center; color: var(--ink-faint); font-size: .86rem; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-sunk) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 2px;
  color: transparent !important;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

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

/* ==========================================================================
   Phone and tablet — assistant, analytics and sign-in

   Same rules of thumb as the assembler: dvh instead of vh so the composer is
   not hidden behind a mobile browser toolbar, 16px inputs so iOS does not zoom
   the page on focus, and nothing interactive smaller than a fingertip.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --gutter: 14px; --rhythm: 18px; }

  .masthead {
    height: auto;
    min-height: 54px;
    padding: 8px var(--gutter);
    gap: 10px 12px;
    flex-wrap: wrap;
  }
  .masthead__sub { display: none; }
  .masthead__nav { margin-left: auto; gap: 2px; }
  .masthead__link { padding: 8px 10px; }
  .masthead__session {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .masthead__user { max-width: 12ch; }

  .shell { padding: var(--rhythm) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); }

  /* The chat fills the screen below the masthead rather than guessing at a
     fixed height; 100dvh tracks the visible viewport as the toolbar hides. */
  .chat {
    height: calc(100dvh - 54px - var(--rhythm) * 2);
    min-height: 380px;
  }
  .chat__log { padding: 14px 12px; }

  .panel__head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .panel__meta { order: 3; width: 100%; }

  .composer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer__row { gap: 8px; }
  .composer__input { font-size: 16px; min-height: 46px; }
  .composer__hint { display: none; }

  .btn { min-height: 44px; }
  .btn--sm { min-height: 38px; }
  .select { height: 42px; font-size: 16px; }

  .toolbar { gap: 8px; }
  .toolbar h1 { width: 100%; }
  .toolbar__spacer { display: none; }

  .stat-grid { grid-template-columns: 1fr 1fr; }

  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry__gutter { display: flex; gap: 10px; }
  .meter__note { display: none; }

  /* Wide tables scroll in their own box; the page itself must never scroll
     sideways. */
  .table__wrap { -webkit-overflow-scrolling: touch; }
  .table { font-size: .8rem; }
  .table th, .table td { padding-left: 8px; padding-right: 8px; }

  .auth { margin-top: 4vh; }
  /* Sign-in fields inherit 15px from the body, which is under iOS Safari's
     16px zoom threshold — focusing one would zoom the whole page. */
  .field__input { font-size: 16px; height: 46px; }
  .auth__submit { height: 48px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .masthead__user { display: none; }
}

/* --------------------------------------------------------------------------
   Auth
   -------------------------------------------------------------------------- */

.auth {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 7vh auto 0;
}

/* Self-contained card rather than .panel: the sign-in page has no chrome to
   share with the rest of the app, and a titled header bar above a form that
   already says "Sign in" in three other places is one label too many. */
.auth__card {
  padding: 34px 32px 30px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: auth-in .42s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes auth-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 26px;
}

.auth__logo { width: 210px; max-width: 78%; height: auto; }

.auth__lede {
  margin: 16px 0 0;
  font-size: .9rem;
  color: var(--ink-3);
}

.auth__form { display: grid; gap: 16px; }

/* The notice is a sibling of the form, so the form's own gap does not apply
   to it and it would otherwise sit flush against the first label. */
.auth__card .notice { margin-bottom: 20px; }

.auth__submit {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  font-size: .92rem;
}

.auth__foot {
  margin-top: 14px;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-3);
}
.auth__foot + .auth__foot { margin-top: 6px; }

.field { display: grid; gap: 7px; }

.field__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field__wrap { position: relative; display: grid; }

.field__input {
  height: 46px;
  padding: 0 15px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field__input::placeholder { color: var(--ink-faint); }

.field__input:hover { border-color: var(--accent-line); }

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

/* Room for the reveal button so a long password never runs under it. */
.field__input--reveal { padding-right: 68px; }

.field__reveal {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: .76rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--surface-sunk);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.field__reveal:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.field__reveal:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* In flight. Not :disabled — a disabled submit is dropped from the POST body
   by some browsers and the form would arrive without it. */
.auth__submit[data-busy="true"] {
  opacity: .75;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Water behind the sign-in card

   Same path and same four-layer parallax as the landing page. Fixed, behind
   the content, and inert to the pointer.
   -------------------------------------------------------------------------- */

.authwaves {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  min-height: 170px;
  z-index: 0;
  pointer-events: none;
}
.authwaves svg { width: 100%; height: 100%; display: block; }

.authwaves__set > use { animation: auth-wave-drift 26s cubic-bezier(.55, .5, .45, .5) infinite; }
.authwaves__l1 { animation-delay: -2s; animation-duration:  9s; fill: rgba(29, 150, 158, .16); }
.authwaves__l2 { animation-delay: -3s; animation-duration: 13s; fill: rgba(45, 180, 190, .11); }
.authwaves__l3 { animation-delay: -4s; animation-duration: 17s; fill: rgba(29, 150, 158, .08); }
.authwaves__l4 { animation-delay: -5s; animation-duration: 24s; fill: rgba(29, 150, 158, .22); }

@keyframes auth-wave-drift {
  from { transform: translate3d(-90px, 0, 0); }
  to   { transform: translate3d( 85px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .authwaves__set > use { animation: none; }
  .auth__card { animation: none; }
}

@media (max-width: 520px) {
  .auth { margin-top: 4vh; }
  .auth__card { padding: 26px 20px 24px; }
  .auth__logo { width: 180px; }
}

/* Masthead session control */
.masthead__session {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--rule);
}

.masthead__user {
  font-size: .8rem;
  color: var(--ink-2);
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.masthead__logout {
  padding: 0;
  font: inherit;
  font-size: .8rem;
  color: var(--ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.masthead__logout:hover { color: var(--danger); }

/* --------------------------------------------------------------------------
   Checkout

   An invoice, and it stays one: the order is a real table with quantity and
   rate beside every amount, because a page that shows only a total asks to be
   trusted rather than checked, and the moment somebody is about to pay is the
   moment they are most entitled to check.

   What changed is the dressing. It is wider, it is quieter, and it tints itself
   with `--co-accent` — the accent of the *workspace's own* app template, passed
   in by the view. Paying for something should look like the thing being paid
   for, and a payment page in a palette of its own reads as a third party.

   Every tint below is `color-mix` off that one value, so there is one colour on
   the page and eight shades of it. No second hue, and nothing hard-coded: the
   amber hatching the test band used to wear was a warning sticker slapped over
   the design, and it is gone.
   -------------------------------------------------------------------------- */

.co {
  /* Falls back to the product accent for any render that has no workspace. */
  --co-accent: var(--accent);
  --co-wash: color-mix(in srgb, var(--co-accent) 7%, transparent);
  --co-line: color-mix(in srgb, var(--co-accent) 22%, var(--rule));
  --co-deep: color-mix(in srgb, var(--co-accent) 78%, #06202a);

  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 40px) 0 64px;
}

.co__card {
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius-lg) + 4px);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 60, 66, .05), 0 24px 60px -34px rgba(20, 60, 66, .38);
  overflow: hidden;
}

/* --- Test mode ------------------------------------------------------------
   Ink, not amber. It has to be unmissable without pretending to be a hazard —
   nothing here is dangerous, it just is not real money. */

.co__test {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px clamp(18px, 3vw, 34px);
  background: linear-gradient(100deg, #10242c 0%, var(--co-deep) 140%);
  color: rgba(255, 255, 255, .82);
  font-size: .84rem;
}
.co__testtag {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.co__testtxt b { color: #fff; font-weight: 600; }

/* --- Head ----------------------------------------------------------------- */

.co__head {
  position: relative;
  padding: clamp(24px, 3vw, 34px) clamp(18px, 3vw, 34px) clamp(20px, 2.5vw, 26px);
  /* The one flourish on the page: the accent fading out of the top-left corner.
     Enough to say whose app this is, not enough to compete with the total. */
  background:
    radial-gradient(120% 150% at 0% 0%, var(--co-wash) 0%, transparent 62%);
  border-bottom: 1px solid var(--rule);
}

.co__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--co-accent);
}
/* The workspace's template, named quietly beside the eyebrow. */
.co__tmpl {
  padding: 2px 9px;
  border: 1px solid var(--co-line);
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  letter-spacing: .08em;
}

.co__h1 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.co__sub { margin: 0; font-size: .92rem; color: var(--ink-2); max-width: 70ch; }
.co__sub b { color: var(--ink); font-weight: 600; }

/* --- The order table ------------------------------------------------------ */

.co__scroll { overflow-x: auto; }

.co__tbl {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .89rem;
}

.co__tbl thead th {
  padding: 10px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--rule);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  white-space: nowrap;
}

.co__tbl tbody th,
.co__tbl tbody td,
.co__tbl tfoot th,
.co__tbl tfoot td {
  padding: 16px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
.co__tbl tbody tr:hover { background: var(--co-wash); }

.co__item { display: block; font-weight: 600; color: var(--ink); }
.co__note {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-3);
  max-width: 52ch;
}

/* Right-aligned tabular figures, so the money lines up on the decimal point. */
.co__num {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.co__num i { font-style: normal; font-size: .74rem; color: var(--ink-faint); }
.co__amt { color: var(--ink); font-weight: 600; }

.co__tbl tfoot th { color: var(--ink-2); }
.co__save td { color: var(--ok); }

.co__total th, .co__total td {
  border-bottom: 0;
  background: linear-gradient(90deg, transparent 0%, var(--co-wash) 100%);
}
.co__total th { color: var(--ink); font-weight: 600; }
.co__total td {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.03em;
}
.co__total .co__note { font-weight: 400; }

/* --- Detail blocks -------------------------------------------------------- */

.co__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(22px, 3vw, 30px) clamp(18px, 3vw, 34px);
  border-top: 1px solid var(--rule);
}

.co__h2 {
  margin: 0 0 12px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.co__feats { list-style: none; margin: 0; padding: 0; }
.co__feats li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: .86rem;
  color: var(--ink-2);
}
.co__feats li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 12px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--co-accent);
  border-bottom: 2px solid var(--co-accent);
  transform: rotate(-45deg);
}

.co__defs { width: 100%; border-collapse: collapse; font-size: .86rem; }
.co__defs th {
  padding: 6px 14px 6px 0;
  text-align: left;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
  vertical-align: top;
}
.co__defs td { padding: 6px 0; color: var(--ink); overflow-wrap: anywhere; }
.co__defs code {
  font-size: .8rem;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-sunk);
}

/* --- Actions -------------------------------------------------------------- */

.co__acts, .co__done {
  padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 34px);
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--surface) 0%, var(--co-wash) 100%);
}
.co__acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.co__acts form { margin: 0; }

.co__go {
  display: inline-block;
  padding: 13px 30px;
  border: 0;
  border-radius: var(--radius);
  /* The gradient is the accent against a deepened version of itself, so the
     button belongs to the same colour as everything else on the page. */
  background: linear-gradient(135deg, var(--co-accent) 0%, var(--co-deep) 100%);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--co-accent) 80%, transparent);
}
.co__go:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--co-accent) 85%, transparent);
}
.co__go:active:not(:disabled) { transform: translateY(0); }
.co__go:disabled { opacity: .6; cursor: progress; transform: none; }

.co__cancel {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .84rem;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.co__cancel:hover { color: var(--danger); }

.co__done p { margin: 0 0 8px; font-size: .9rem; color: var(--ink-2); }
.co__done p:last-of-type { margin-bottom: 16px; }
.co__done b { color: var(--ink); }

.co__fine {
  margin: 0;
  padding: 16px clamp(18px, 3vw, 34px) 20px;
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  color: var(--ink-3);
}
.co__fine code { font-size: .74rem; }

@media (max-width: 720px) {
  .co__cols { grid-template-columns: 1fr; }
  .co__test { flex-direction: column; gap: 8px; }
}

/* The lift and the hover shift are decoration; the colour change is not. */
@media (prefers-reduced-motion: reduce) {
  .co__go { transition: none; }
  .co__go:hover:not(:disabled) { transform: none; }
}

/* --- Card entry ------------------------------------------------------------
   The number input is the only field on this product that a person will check
   character by character against an object in their hand, so it is set in a
   monospace face at a size that survives being read off a card in bad light.
   ------------------------------------------------------------------------- */

.co__pay {
  margin: 0;
  padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 34px);
  border-top: 1px solid var(--rule);
}

.co__payhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.co__payhead .co__h2 { margin: 0; }

/* The detected brand, named as you type. Reassurance that the field is being
   read, and a check that the right card came out of the wallet. */
.co__brand {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--co-accent);
}

.co__cardmsg {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--surface-sunk);
  font-size: .84rem;
  color: var(--ink-2);
}
.co__cardmsg b { color: var(--ink); }
.co__cardmsg[data-tone="bad"] { background: var(--danger-soft); }
.co__cardmsg[data-tone="bad"] b { color: var(--danger); }

/* The test numbers. Deliberately plain and deliberately present: a stand-in
   gateway that rejects every card is indistinguishable from a broken one, and
   somebody trying to make it work will eventually reach for a real card. */
.co__testcards {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .8rem;
  color: var(--ink-2);
}
.co__testcards p { margin: 0 0 8px; }
.co__testcards b { color: var(--ink); }
.co__testcards ul { margin: 0; padding-left: 18px; }
.co__testcards li { padding: 2px 0; }
.co__testcards code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  color: var(--ink);
  margin-right: 6px;
}
.co__testcards-note { margin: 8px 0 0 !important; color: var(--ink-3); }

.co__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.co__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.co__field--wide { grid-column: 1 / -1; }

.co__field > span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.co__field input {
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Monospace and a touch of tracking on the three that hold digits: grouped
   numerals in a proportional face do not line up with the card. */
#card-number, #card-exp, #card-cvc {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}
.co__field input:focus {
  outline: none;
  border-color: var(--co-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-accent) 18%, transparent);
}
.co__field input[aria-invalid="true"] { border-color: var(--danger); }
.co__field input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.co__err {
  min-height: 1em;
  font-style: normal;
  font-size: .76rem;
  color: var(--danger);
}

.co__paynote { margin: 0; font-size: .8rem; color: var(--ink-3); }
.co__paynote[data-state="bad"] { color: var(--danger); }

.co__afterpay {
  padding: 0 clamp(18px, 3vw, 34px) 4px;
}
.co__afterpay form { margin: 0; }

/* The `.co__acts` inside the pay form carries no background of its own — it is
   part of the form, not a footer under it. */
.co__pay .co__acts {
  padding: 18px 0 0;
  border-top: 0;
  background: none;
}

@media (max-width: 560px) {
  .co__fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .co__field input { transition: none; }
}

/* --- The payment dialog -----------------------------------------------------
   Native <dialog>, so the browser owns Escape, the backdrop and focus. Two
   panels share it: the card form, and the completion state checkout.js swaps in
   once the server confirms. Tinted from --co-accent like the rest of the
   checkout, so the dialog visibly belongs to the page that opened it.
   -------------------------------------------------------------------------- */

.paydlg {
  /* The Komunidad logo's own gradient stops, from k_logo_color.svg. The page
     behind the dialog wears the workspace's accent; the dialog is the moment
     money changes hands, and it wears the brand of the company taking it, the
     same way a hosted Stripe page wears Stripe's. */
  --kbrand-1: #1F3556;
  --kbrand-2: #21495F;
  --kbrand-3: #1F7079;
  --kbrand-4: #2BA093;
  --kbrand: linear-gradient(135deg, var(--kbrand-1) 0%, var(--kbrand-2) 42%,
                            var(--kbrand-3) 70%, var(--kbrand-4) 100%);
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius-lg) + 2px);
  background: var(--surface);
  box-shadow: 0 24px 70px -28px rgba(20, 60, 66, .45);
}
.paydlg::backdrop {
  background: rgba(13, 27, 33, .45);
  backdrop-filter: blur(2px);
}

.paydlg[open] { animation: paydlg-in .18s ease-out; }
@keyframes paydlg-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.paydlg__form, .paydlg__done { padding: 22px 24px 24px; }

.paydlg__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.paydlg__eyebrow {
  margin: 0 0 4px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kbrand-4);
}
.paydlg__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.paydlg__title small {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

.paydlg__close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
}
.paydlg__close svg { width: 16px; height: 16px; fill: currentColor; }
.paydlg__close:hover { color: var(--ink); border-color: var(--rule-strong); }

/* The test numbers, compact inside the dialog. Dashed border on purpose: it
   reads as scaffolding, which is what it is. */
.paydlg__test {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .76rem;
  color: var(--ink-2);
}
.paydlg__test p { margin: 0 0 6px; }
.paydlg__test b { color: var(--ink); }
.paydlg__test ul { margin: 0; padding: 0; list-style: none; }
.paydlg__test li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.paydlg__test code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
}
.paydlg__test span { color: var(--ink-3); white-space: nowrap; }
.paydlg__testnote { margin: 6px 0 0 !important; color: var(--ink-3); }

.paydlg__msg { margin-bottom: 14px; }

.paydlg .co__field input:focus {
  border-color: var(--kbrand-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kbrand-4) 20%, transparent);
}
.paydlg .co__brand { color: var(--kbrand-3); }

/* Inside the dialog the fields stack in one narrow column; expiry and the
   security code still share a row. */
.paydlg .co__fields { grid-template-columns: 1fr 1fr; }
.paydlg .co__field--wide { grid-column: 1 / -1; }

/* The detected brand sits inside the number field's corner rather than in a
   header row the dialog does not have. */
.paydlg .co__field--wide { position: relative; }
.paydlg .co__brand {
  position: absolute;
  right: 12px;
  bottom: 34px;
  pointer-events: none;
}

.paydlg__pay {
  width: 100%;
  margin-top: 18px;
  text-align: center;
  background: var(--kbrand);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--kbrand-3) 80%, transparent);
}
.paydlg__pay:hover:not(:disabled) {
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--kbrand-3) 85%, transparent);
}

.paydlg__note {
  margin: 10px 0 0;
  text-align: center;
  font-size: .76rem;
  color: var(--ink-3);
}

/* --- Completion ------------------------------------------------------------
   What a customer screenshots: the amount, the reference, where the receipt
   went. The check is drawn, and drawn in the page's own accent. */

.paydlg__done { text-align: center; }

.paydlg__check {
  width: 52px;
  height: 52px;
  margin: 6px auto 14px;
  display: block;
}
.paydlg__check path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: paydlg-tick .4s ease-out .15s forwards;
}
@keyframes paydlg-tick { to { stroke-dashoffset: 0; } }

.paydlg__sub {
  margin: 8px 0 18px;
  font-size: .88rem;
  color: var(--ink-2);
}

.paydlg__ref {
  display: grid;
  gap: 1px;
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rule);
  text-align: left;
}
.paydlg__ref > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
}
.paydlg__ref dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.paydlg__ref dd {
  margin: 0;
  font-size: .88rem;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-align: right;
}
.paydlg__ref code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  letter-spacing: .03em;
}

.paydlg__done .co__go {
  width: 100%;
  text-align: center;
  background: var(--kbrand);
}
.paydlg__ref code { color: var(--kbrand-3); }

.paydlg__sites {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-align: left;
}
.paydlg__sites b { color: var(--ink); }
.paydlg__sites a { color: var(--kbrand-3); font-weight: 600; }

.co__cancelform { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .paydlg[open] { animation: none; }
  .paydlg__check path { animation: none; stroke-dashoffset: 0; }
}