/* SendMoreStuff's own content, after the UI kit (kit.css) and the brand file (brand.css): the brand's character (the rounded display type, the
   wordmark's chat pill, the sticker edge and shadow), the pages' widths and grids, and what only this app has (the messages, While You Wait, the
   Calls panel). It never sets a card's, a section's, a heading's or a field's size, padding or gap: those are the kit's. Every colour is a token from
   brand.css; no page sets a style attribute. */

/* The brand's character */
header h1, .kit-panel h2, .hello, h3 { font-family: var(--heading-font); }          /* (the kit sets it on card and popup headings) */
header h1, .card h2, .card summary, .modal-head h2, .kit-panel h2, .hello, h3 { font-weight: 800; }
header .brand img { border: 2px solid var(--edge); border-radius: 10px; }
header .wordmark { color: inherit; text-decoration: none; letter-spacing: -0.02em; font-weight: 900; }
@media (max-width: 420px) { header .brand img { display: none; } }          /* (a phone held upright: the name keeps its room beside the cog, Refresh and Log Out) */
header .wordmark .more {                               /* More, in a Bubblegum chat pill */
  display: inline-block;
  margin: 0 0.12em;
  padding: 0 0.32em 0.04em;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--edge);
  border-radius: 0.6em 0.6em 0.6em 0.15em;
  transform: rotate(-4deg);
}
.card { border-color: var(--edge); box-shadow: var(--sticker); }          /* the sticker: a Kelp edge and a hard shadow (colours only; the size is the kit's) */
:is(button, a):is(.primary, .secondary, .danger, .quiet) { border-radius: 999px; font-family: var(--heading-font); font-weight: 700; }
:is(button, a).primary { border-color: var(--edge); box-shadow: var(--sticker); transition: transform 80ms ease, box-shadow 80ms ease; }
:is(button, a).primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge); }
a { color: var(--link); }
/* The keyboard focus ring never covers words: a button's sits just outside it (the space around every button is wider than the ring), a field's is drawn on
   its own edge, inside the box, so it never reaches the label above or a message below, a tick box's hugs it, and a link's hugs its words, clear of the
   lines above and below. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus-visible { outline-offset: -3px; }
:is(input[type="checkbox"], input[type="radio"]):focus-visible { outline-offset: 1px; }
a:not(.primary, .secondary, .danger, .quiet):focus-visible { outline-width: 2px; outline-offset: 1px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* The page: one column, at most 1100 px, with the header's own side gutter */
main {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
}
main > * { min-width: 0; }
.intro { margin: 0 0 var(--gap); }
.hello { margin: 0; font-size: 1.6rem; line-height: 1.2; }
:where(.stack, .modal-body, .intro, .list > li, .part) > p { margin: 0; }          /* (the kit's own paragraphs, such as the sign-in's note, keep their space; :where
   keeps this below the block spacing, so a note under buttons still gets its 12 px) */
.small { font-size: 0.875rem; }
.stack > * + * { margin-top: 12px; }                  /* the blocks inside a card; card after card keeps the kit's gap (margins meet, never add) */
.stack > .card + .card { margin-top: var(--gap); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }          /* buttons beside each other (the kit's button.small) */
.actions.foot { margin-top: 12px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.modal-body > * + * { margin-top: 12px; }

/* The portal's parts: tiles side by side, the cards' own gap between rows */
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); column-gap: var(--gap); }
.part { display: block; color: inherit; text-decoration: none; }
.part:hover { border-color: var(--accent); }

/* A field: its Now line and its error beside it (the box itself is the kit's) */
.field .now { margin: 0 0 4px; }
.field .error { margin: 4px 0 0; color: var(--danger); font-weight: 600; font-size: 0.9rem; }
.field .error:empty { display: none; }
[aria-invalid="true"] { border-color: var(--danger); }

/* Tick boxes in a row, each 44 px to touch */
.checks { display: flex; flex-wrap: wrap; gap: 0 16px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 600; }
.checks input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

/* Lists of people, sender IDs, flags: rows that wrap on a phone */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list > li { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--card); display: grid; gap: 6px; overflow-wrap: anywhere; }
.list > li .row { justify-content: space-between; }

/* Status, always in words; the count badge */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.status.good { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.bad { color: var(--danger); }
.badge { display: inline-block; padding: 1px 10px; border: 2px solid var(--edge); border-radius: 999px; background: var(--highlight); color: var(--on-highlight);
         font: 800 0.8125rem var(--heading-font); }

/* While You Wait: a typing bubble, then the initials and what they stand for */
.working { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.working .line { min-width: 0; }
.working .typing { flex: none; display: inline-flex; gap: 4px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 18px 18px 18px 4px; background: var(--bubble-in); }
.working .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: typing 1.2s ease-in-out infinite; }
.working .typing span:nth-child(2) { animation-delay: 0.15s; }
.working .typing span:nth-child(3) { animation-delay: 0.3s; }
.working .initials { font-family: var(--heading-font); font-weight: 800; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
#kit-sign-in .working { margin-top: 12px; }

/* A short message at the foot of the screen */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 400;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 600;
}

/* Message bubbles: theirs on the left, ours (sent) on the right in Bubblegum */
.thread { display: grid; gap: 10px; align-content: start; }
.bubble { max-width: 78%; padding: 10px 14px; border: 2px solid var(--edge); border-radius: 18px 18px 18px 4px; background: var(--bubble-in); overflow-wrap: anywhere; }
.bubble.sent { justify-self: end; border-radius: 18px 18px 4px 18px; background: var(--accent); color: var(--on-accent); }
.bubble.note { justify-self: center; max-width: 90%; background: var(--highlight); color: var(--on-highlight); border-style: dashed; }
.bubble .meta { display: block; font-size: 0.8125rem; opacity: 0.8; margin-top: 2px; }
.bubble .failed { display: block; color: var(--danger); font-weight: 700; font-size: 0.8125rem; }
.bubble.sent .failed { color: var(--on-accent); text-decoration: underline; }

/* /msg: the page is the screen; the conversation list and the conversation side by side on a wide screen, one at a time on a phone */
.page-msg { display: flex; flex-direction: column; height: 100dvh; }
.page-msg main { flex: 1; min-height: 0; max-width: none; padding-top: 12px; padding-bottom: 0; }
.page-msg #kit-version { margin-top: 8px; }
.messenger { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--gap); height: 100%; min-height: 0; }
.messenger > * { min-width: 0; min-height: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--edge); border-radius: var(--kit-radius); background: var(--card); overflow: hidden; }
.pane-head { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.pane-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px; min-height: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
:is(.filters, .actions) button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--edge); }
.threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.threads button {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 10px 12px;
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink);
}
.threads button:hover, .threads button[aria-current="true"] { border-color: var(--edge); background: var(--bubble-in); }
.threads button:focus-visible { outline-offset: -3px; }          /* (a row's ring sits inside it, as a field's does, never on the next row) */
.threads .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threads .when { color: var(--grey); font-size: 0.8125rem; }
.threads .last { grid-column: 1 / -1; color: var(--grey); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.thread-head .who { flex: 1 1 10rem; min-width: 0; }
.thread-head .who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { display: none; }
.composer { padding: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.composer textarea { min-height: 44px; max-height: 40dvh; }
.composer .count { color: var(--grey); font-size: 0.8125rem; margin-left: auto; }
.empty-pane { display: grid; place-items: center; text-align: center; gap: 10px; height: 100%; color: var(--grey); }
@media (max-width: 760px) {
  .messenger { grid-template-columns: 1fr; }
  .messenger.show-thread .list-pane, .messenger:not(.show-thread) .thread-pane { display: none; }
  .back { display: inline-block; }
}

/* Calls, dropped down from the header */
.pui-drop {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  z-index: 200;
  width: min(440px, calc(100% - 32px));
  max-height: 78dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: var(--bg);
  border: 2px solid var(--edge);
  border-radius: var(--kit-radius);
  box-shadow: var(--sticker);
}

@media (prefers-reduced-motion: reduce) {
  header .wordmark .more { transform: none; }
  :is(button, a).primary { transition: none; }
  .working .typing span { animation: none; opacity: 1; }
}