/* 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, 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, h3 { font-weight: 800; }
header .brand img { border: 2px solid var(--edge); border-radius: 10px; }
header .brand:has(> .kit-greet) h1 { line-height: 1.1; }          /* (the greeting under the name: the two fit in the buttons' 44px, so it adds no height) */
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: its width, centring and side gutter are the kit's (BDO's page width in every app, kit 2.11.0) */
main > * { min-width: 0; }
.intro { margin: 0 0 var(--gap); }
: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 { min-width: min(75%, 28rem); max-width: 85%; 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; min-width: 0; 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; width: 100%; 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, main .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; }
}

/* A call coming from Vonage VCC: at the top of every page; while it rings it stays in view as the page scrolls (its top is set under the header), where the screen is tall enough */
.incoming-call {
  width: min(calc(100% - 32px), 1068px);
  margin: 12px auto;
  border: 2px solid var(--accent);
  box-shadow: var(--sticker);
}
@media (min-height: 600px) {
  .incoming-call.ringing { position: sticky; z-index: 150; }
}
.incoming-call:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 14px; }
.incoming-call > * { grid-column: 1; margin: 0; }
.incoming-call > h2 { font-size: 0.875rem; }
.incoming-call > .actions { grid-column: 2; grid-row: 1 / span 4; }
.incoming-who { font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; }
.page-pui .incoming-call { flex: none; }

/* 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; }
}

/* A button holding a whole sentence (a quick reply, a Scrubber item) */
button.choice { flex: 1 1 12rem; min-width: 0; min-height: 44px; height: auto; white-space: normal; text-align: left; overflow-wrap: anywhere; }

/* /pui: the page is the screen, as /msg is: status and dialler on top, Recent and Favourites in the room that is left, scrolling inside; side by side when there is room */
.page-pui { display: flex; flex-direction: column; height: 100dvh; }
.page-pui main { flex: 1; min-height: 0; width: 100%; padding-top: 8px; padding-bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
.page-pui #kit-version { margin-top: 4px; }
.calls { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; max-width: 560px; margin-inline: auto; }
.calls-top { display: grid; gap: 8px; flex: none; min-width: 0; }
.calls-status { display: grid; gap: 4px; }
.calls-status p { margin: 0; overflow-wrap: anywhere; }
.calls-status select { font-weight: 700; }
.calls-status.good select { border-color: var(--ok); color: var(--ok); }
.calls-status.warn select { border-color: var(--warn); color: var(--warn); }
.calls-status.bad select { border-color: var(--danger); color: var(--danger); }
.calls-status option { color: var(--ink); }
.calls-problem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--danger); border-radius: var(--kit-radius); }
.calls-problem p { flex: 1 1 12rem; margin: 0; }
.calls-dial { display: grid; gap: 8px; min-width: 0; }
.calls-dial > p { margin: 0; }
.dial-box { position: relative; min-width: 0; }
.dial-entry { display: flex; gap: 8px; align-items: flex-start; }
.dial-entry .field { flex: 1; min-width: 0; }
.dial-box .dial-matches { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 45dvh; overflow-y: auto; overscroll-behavior: contain; margin: 4px 0 0; padding: 6px; background: var(--card); border: 2px solid var(--edge); border-radius: var(--kit-radius); }
.field.inline { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-width: 0; }
.field.inline > .whole-choice { flex: 1 1 auto; max-width: 100%; }
/* A long choice wraps and the field grows to hold it: the dropdown keeps its edge and focus ring, its own one line of words stays clear, and the whole words and an arrow sit on top. */
.whole-choice { position: relative; display: grid; min-width: 0; }
.whole-choice > * { grid-area: 1 / 1; min-width: 0; }
.whole-choice > select { height: 100%; color: transparent; -webkit-appearance: none; appearance: none; }
.whole-choice > select option { color: var(--ink); }
.whole-choice > span { display: flex; align-items: center; min-height: var(--kit-field-h); padding: 8px 30px 8px 11px; line-height: 1.25; overflow-wrap: anywhere; pointer-events: none; }
.whole-choice > span::after { content: ""; position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; margin-top: -5px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.field.inline > label { margin: 0; font-size: 0.875rem; }
.field.inline > .error { flex-basis: 100%; }
.list .dial-match { display: flex; align-items: center; gap: 4px; }
.calls-go { display: grid; grid-template-columns: 1fr auto; }
.calls-go button { width: auto; margin: 0; }
.calls-lists { display: flex; flex-direction: column; flex: 1; min-height: 120px; min-width: 0; border: 1px solid var(--edge); border-radius: var(--kit-radius); background: var(--card); overflow: hidden; }
.calls-tabs { display: grid; grid-template-columns: 1fr 1fr; flex: none; border-bottom: 1px solid var(--line); }
.calls-tabs button { width: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.calls-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.calls-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.calls-list > p { margin: 0 0 8px; }
.calls-rows + button { margin-top: 8px; }
.calls-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.calls-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.calls-row:last-child { border-bottom: 0; }
.calls-pick { flex: 1; min-width: 0; min-height: 44px; width: auto; margin: 0; padding: 4px; display: grid; gap: 0; text-align: left; background: none; border: 0; box-shadow: none; color: var(--ink); font-weight: 400; }
.calls-pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calls-pick:disabled { background: none; }
.calls-missed { color: var(--danger); font-weight: 700; }
button.calls-star { flex: none; width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0; font-size: 1.25rem; line-height: 1; background: none; border: 0; box-shadow: none; color: var(--ink); }
.pui-drop .calls { height: auto; }
.pui-drop .calls-list { max-height: 36dvh; }
@media (max-width: 640px), (max-height: 500px) { .not-on-phone { display: none !important; } }
/* On its side, or on a wide screen: two columns, each scrolling by itself */
@media (max-height: 500px) and (min-width: 480px), (min-width: 900px) {
  .page-pui main .calls { flex-direction: row; max-width: none; }
  .page-pui main .calls-top { flex: 1 1 50%; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
  .page-pui main .calls-lists { flex: 1 1 50%; }
}
/* The Messages page's list: what can be done (the greeting is in the header, the kit's) */
.list-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
/* The red dot: on the cog while calls still need something set, and on the row that sets it */
.dial-matches:empty { display: none; }
.dial-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 320px; margin-inline: auto; }
.dial-pad[hidden] { display: none; }
.dial-pad .dial-key { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; width: auto; margin: 0; padding: 4px; font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.dial-letters { min-height: 0.75rem; font-size: 0.625rem; font-weight: 400; letter-spacing: 0.08em; }
.dial-pad .dial-wide { grid-column: span 2; font-size: 1rem; }

/* The Audit Trail's entries: the log's own dark colours in light and dark mode, as a Server Log */
.log-box { height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px; background: var(--log-bg); color: var(--log-ink); border-radius: var(--kit-radius); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.log-box div { padding: 3px 0; border-bottom: 1px solid var(--log-line); overflow-wrap: anywhere; white-space: pre-wrap; }
.log-box div:last-child { border-bottom: 0; }
.log-box .WARNING { color: var(--log-warn); }
.log-box .ERROR, .log-box .CRITICAL { color: var(--log-error); }
/* The Server Log's other parts: what the log holds, and Server Load's lights */
.log-info p { margin: 0 0 6px; }
.pill { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.pill:empty { display: none; }
.load-table .pill { margin-left: 0; white-space: nowrap; }
.pill.good { background: var(--ok-bg); color: var(--ok-ink); }
.pill.warn { background: var(--note-bg); color: var(--ink); }
.pill.bad { background: var(--err-bg); color: var(--err-ink); }
.scroll-x { overflow-x: auto; }
.load-table { width: 100%; border-collapse: collapse; }
.load-table td { padding: 4px 8px 4px 0; font-size: 0.85rem; vertical-align: top; white-space: normal; overflow-wrap: break-word; }
.date-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--gap); }
.date-pair[hidden] { display: none; }

/* A file with a message: the one waiting beside the composer, and a picture or a file's name in a bubble */
.attached { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); min-width: 0; }
.attached > span { min-width: 0; overflow-wrap: anywhere; }
.attached .error { flex-basis: 100%; margin: 0; }
.bubble-picture { display: block; margin-bottom: 4px; }
.bubble-picture img { display: block; max-width: 100%; max-height: 16rem; border-radius: 10px; }
.bubble-file { display: block; margin-bottom: 4px; font-weight: 700; color: inherit; overflow-wrap: anywhere; }

/* /join/<code>: a public opt-in form. The website box is for robots, so people never see it */
.join { max-width: 34rem; margin: 0 auto; padding: var(--gap); padding-left: max(var(--gap), env(safe-area-inset-left, 0px)); padding-right: max(var(--gap), env(safe-area-inset-right, 0px)); }
.join-agree label { display: flex; gap: 10px; align-items: flex-start; }
.join-agree input[type="checkbox"] { flex: none; }
.join-website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }