/* Nodeward client support. Fonts ship from this site; see fonts/LICENSE.txt. */
@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/sora-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/sora-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --bg: #F3F5F8; --surface: #FFFFFF; --field: #FFFFFF; --fg: #1A1F2C; --muted: #5B6475; --line: #D5DAE3; --control: #8A93A6;
  --accent: #007A70; --on-accent: #FFFFFF; --alert: #A84A10; --alert-soft: #FBEFE6; --staff: #E3F2F0; --staff-line: #B8DDD8; --staff-muted: #4A5262;
  --night: #11151F; --night-line: #2C3445; --night-card: #1A1F2C; --on-night: #F3F5F8; --on-night-muted: #C9CFDA; --on-night-faint: #A3AEBB; --signal: #00B8A9; --bar-border: #5B6475; --stat-warn: #FF8C42; --band-edge: #11151F;
  --soft: #E3F2F0; --soft-ink: #005E56; --warn: #FBEFDD; --warn-ink: #8A3C0C; --warn-line: #A84A10; --mute: #F3F5F8; --mute-ink: #4A5262; --tile: #D5DAE3; --tile-ink: #1A1F2C; --dot-off: #8A93A6; --line-off: #D5DAE3;
  --display: "Sora", "Segoe UI", sans-serif; --body: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #11151F; --surface: #1A1F2C; --field: #11151F; --fg: #F3F5F8; --muted: #A3AEBB; --line: #2C3445;
  --accent: #00B8A9; --on-accent: #11151F; --alert: #F0AD5B; --alert-soft: #3A2A14; --staff: #17352F; --staff-line: #2A5A52; --staff-muted: #C9CFDA; --band-edge: #2C3445;
  --soft: #123A3A; --soft-ink: #7FE3DA; --warn: #3A2A1A; --warn-ink: #FFB27F; --warn-line: #FF8C42; --mute: #2C3445; --mute-ink: #C9CFDA; --tile: #2C3445; --tile-ink: #F3F5F8; --dot-off: #5B6475; --line-off: #2C3445;
  color-scheme: dark;
} }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/26px var(--body); -webkit-text-size-adjust: 100%; }
h1, h2, p, dl, dd { margin: 0; }
h1 { font: 700 40px/48px var(--display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
h2 { font: 600 24px/32px var(--display); }
a { color: var(--accent); overflow-wrap: anywhere; }
a:hover { color: var(--fg); }
label { display: block; font-size: 14px; line-height: 22px; font-weight: 500; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top :focus-visible, .band :focus-visible, .need :focus-visible { outline-color: var(--signal); }

/* Header: night in both colour schemes, with a line to part it from the band */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 24px; background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--night-line); }
.logo-full { display: block; width: 150px; height: auto; }
.logo-mark { display: none; width: 32px; height: 32px; }
#who { margin-left: auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.who-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 12px; font-weight: 600; background: var(--night-line); border-radius: 4px; }
.who-company { margin-left: -4px; }
.onbar { flex: none; min-height: 44px; padding: 0 16px; font-size: 14px; color: var(--on-night); background: transparent; border: 1px solid var(--bar-border); border-radius: 4px; }
.onbar:hover { border-color: var(--on-night); }
.banner { padding: 12px 24px; background: var(--alert-soft); color: var(--alert); font-weight: 600; }

/* Pages */
.page { max-width: 960px; margin: 0 auto; padding: 48px 24px; display: flex; flex-direction: column; gap: 24px; }
.wide { max-width: 1136px; margin: 0 auto; padding: 32px 24px 48px; }
.head { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eyebrow { font: 500 12px/16px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); overflow-wrap: anywhere; }
.muted { color: var(--muted); font-size: 14px; line-height: 22px; }
.error { color: var(--alert); font-weight: 600; overflow-wrap: anywhere; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-wide { display: flex; flex-direction: column; gap: 16px; }
.wide.stack-wide { gap: 24px; }
.narrow { max-width: 640px; }
.split-col > div:empty, .narrow > div:empty, .column-main > div:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Controls: 4px radius, at least 44px to tap */
input, textarea { display: block; width: 100%; font: inherit; color: var(--fg); background: var(--field); border: 1px solid var(--control); border-radius: 4px; }
input { min-height: 48px; padding: 0 16px; }
textarea { padding: 12px; resize: vertical; }
input[type="file"] { padding: 6px 8px; font-size: 14px; line-height: 34px; }
input[type="file"]::file-selector-button { min-height: 34px; margin-right: 12px; padding: 0 12px; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--control); border-radius: 4px; cursor: pointer; }
::placeholder { color: var(--muted); opacity: 1; }
.go, .ghost { min-height: 48px; padding: 8px 24px; font-size: 16px; line-height: 24px; border-radius: 4px; text-align: center; }
.go { font-weight: 600; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); }
.go:hover:enabled { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.ghost { font-weight: 500; color: var(--fg); background: var(--surface); border: 1px solid var(--control); }
.ghost:hover:enabled { border-color: var(--fg); }
.link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 0; font-size: 14px; color: var(--accent); background: none; border: 0; text-decoration: underline; text-align: left; }
.link:hover { color: var(--fg); }

/* Sign in, code and closed: the split page, with no header */
.split { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--surface); }
.split-brand { flex: 1 1 420px; min-width: 0; padding: 48px 0 48px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; background: var(--night); color: var(--on-night); }
.split-brand img { display: block; width: 190px; height: auto; }
.split-title { display: flex; flex-direction: column; gap: 16px; }
.split-title .eyebrow { color: var(--signal); }
.split-title h1 { padding-right: 48px; }
.split-rule { height: 2px; margin-top: 16px; background: var(--signal); }
.split-note { padding-right: 48px; font-size: 14px; line-height: 22px; color: var(--control); }
.split-side { flex: 1 1 420px; min-width: 0; padding: 48px; display: flex; align-items: center; justify-content: center; }
.split-col { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 24px; }
.split-col form { display: flex; flex-direction: column; gap: 24px; }
.split-col .go { width: 100%; }
.split-col .muted-lead { color: var(--muted); }

/* The dark band at the head of the home and ticket pages */
.band { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--band-edge); }
.band-art { position: absolute; top: -40px; right: 0; color: var(--signal); opacity: 0.32; pointer-events: none; }
.band-in { position: relative; max-width: 1136px; margin: 0 auto; padding: 48px 24px 32px; display: flex; flex-direction: column; gap: 32px; }
.band-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.band-row > .head { flex: 1 1 320px; }
.band .eyebrow { color: var(--signal); }
.band-line { font-size: 19px; line-height: 30px; color: var(--on-night-muted); }
.band .go { color: var(--night); background: var(--signal); border-color: var(--signal); }
.band .go:hover:enabled { color: var(--night); background: var(--on-night); border-color: var(--on-night); }
.band .link { color: var(--signal); }
.band .link:hover { color: var(--on-night); }
.band-ticket .band-in { padding-top: 24px; gap: 24px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--night-line); border: 1px solid var(--night-line); border-radius: 8px; overflow: hidden; }
.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 24px; background: var(--night-card); }
.stat-value { font: 700 32px/40px var(--display); color: var(--on-night); }
.stat-value.warm { color: var(--stat-warn); }
.stat-value.teal { color: var(--signal); }
.stat-label { font-size: 14px; line-height: 22px; color: var(--on-night-muted); }
.target { flex: none; max-width: 100%; display: flex; flex-direction: column; padding: 12px 16px; background: var(--night-card); border: 1px solid var(--night-line); border-radius: 8px; }
.target span { font-size: 14px; line-height: 22px; color: var(--on-night-muted); }
.target strong { font: 600 18px/26px var(--display); }

/* Two columns that fold to one */
.columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.column-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.column-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel-card, .need { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.panel-title { font: 600 18px/26px var(--display); }
.need { gap: 8px; background: var(--night-card); color: var(--on-night); border-color: var(--night-line); }
.need p { font-size: 14px; line-height: 22px; color: var(--on-night-muted); }
.need .contact-link { color: var(--signal); }
.need .contact-link:hover { color: var(--on-night); }
.card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }

/* Ticket cards */
.tickets-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tabs { display: flex; border: 1px solid var(--control); border-radius: 4px; overflow: hidden; }
.tab { min-height: 44px; padding: 0 16px; font-size: 14px; color: var(--fg); background: transparent; border: 0; }
.tab[aria-pressed="true"] { font-weight: 600; color: var(--on-accent); background: var(--accent); }
.tab:focus-visible { outline-offset: -4px; outline-color: var(--fg); }
.tcards { display: flex; flex-direction: column; gap: 16px; }
.tcard { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 16px 24px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-align: left; transition: border-color 0.15s ease, transform 0.15s ease; }
.tcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.tcard-warn { border-color: var(--warn-line); }
.tcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tcard-top strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tcard-number { font: 500 14px/22px var(--mono); color: var(--muted); }
.chip { margin-left: auto; padding: 2px 8px; font-size: 14px; line-height: 22px; font-weight: 500; border-radius: 4px; color: var(--mute-ink); background: var(--mute); }
.chip.warn { color: var(--warn-ink); background: var(--warn); }
.chip.good { color: var(--soft-ink); background: var(--soft); }
.tcard-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 22px; color: var(--muted); overflow-wrap: anywhere; }
.tcard-preview strong { font-weight: 500; color: var(--fg); }
.tcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; line-height: 22px; color: var(--muted); }
.tcard-files { margin-left: auto; }
.mini { flex: none; display: flex; align-items: center; width: 140px; }
.mini-dot { flex: none; width: 10px; height: 10px; border: 2px solid var(--dot-off); border-radius: 50%; }
.mini-dot.done { background: var(--accent); border-color: var(--accent); }
.mini-dot.current { border-color: var(--accent); }
.mini-line { flex: 1; height: 2px; background: var(--line-off); }
.mini-line.done { background: var(--accent); }

/* Support hours and the agreement */
.support-now { display: flex; align-items: flex-start; gap: 12px; }
.support-now strong { font-weight: 600; }
.live { flex: none; position: relative; width: 10px; height: 10px; margin-top: 8px; background: var(--signal); border-radius: 50%; }
.live::after, .node.pulse::before { content: ""; position: absolute; border-radius: 50%; background: var(--signal); animation: pulse 2.2s ease-out infinite; }
.live::after { inset: 0; }
.live.off { background: var(--dot-off); }
.live.off::after { display: none; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.contact-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.sla { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.sla th { padding: 8px; font-weight: 500; text-align: left; vertical-align: top; color: var(--muted); }
.sla td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
.sla td:first-child { font-weight: 500; }
.sla th:first-child, .sla td:first-child { padding-left: 0; }
.sla th:last-child, .sla td:last-child { padding-right: 0; }

/* Category tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.tile { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 16px 24px; font-weight: 500; text-align: left; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.tile:hover { border-color: var(--accent); }
.tile .icon { flex: none; color: var(--accent); }

/* The progress line, on the band */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.track { display: flex; align-items: center; }
.node { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid var(--bar-border); border-radius: 50%; }
.node::after { content: ""; position: relative; width: 8px; height: 8px; border-radius: 50%; }
.node.pulse::before { inset: 2px; }
.bar { flex: 1; height: 2px; background: var(--night-line); }
.step:last-child .bar { background: transparent; }
.step-body { display: flex; flex-direction: column; padding-right: 8px; min-width: 0; }
.step-label { font-size: 14px; line-height: 22px; color: var(--on-night-faint); }
.step-at { font-size: 14px; line-height: 22px; color: var(--on-night-faint); }
.step.done .node, .step.current .node { border-color: var(--signal); }
.step.done .node::after, .step.current .node::after { background: var(--signal); }
.step.done .bar { background: var(--signal); }
.step.done .step-label { color: var(--on-night); }
.step.current .step-label { font-weight: 600; color: var(--on-night); }
.step.alert .node { border-color: var(--stat-warn); }
.step.alert .node::after, .step.alert .node.pulse::before { background: var(--stat-warn); }
.step.alert .step-label { color: var(--stat-warn); }

/* The panel that asks the client to confirm a fix */
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 24px; background: var(--soft); border: 1px solid var(--accent); border-radius: 8px; }
.confirm-text { flex: 1 1 320px; min-width: 0; }
.confirm-text p { margin-top: 4px; }
.pair { display: flex; flex-wrap: wrap; gap: 16px; }

/* Conversation */
.day { display: flex; align-items: center; gap: 16px; font-size: 14px; line-height: 22px; color: var(--muted); }
.day-rule { flex: 1; height: 1px; background: var(--line); }
.msg { display: flex; align-items: flex-start; gap: 12px; }
.msg-tile { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 14px; font-weight: 600; color: var(--tile-ink); background: var(--tile); border-radius: 4px; }
.msg.staff .msg-tile { color: var(--signal); background: var(--night); border: 1px solid var(--night-line); }
.msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.msg.staff .msg-body { background: var(--staff); border-color: var(--staff-line); }
.msg-head { align-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 22px; }
.msg-head strong { font-weight: 600; }
.msg-tag, .msg-at { color: var(--muted); }
.msg.staff .msg-tag, .msg.staff .msg-at { color: var(--staff-muted); }
.msg-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.join { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; }
.join:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.file-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; line-height: 22px; }
.file-link .icon { flex: none; }
.reply { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.picked { overflow-wrap: anywhere; }
.picked:empty { display: none; }
.reply-actions { align-items: center; justify-content: space-between; gap: 8px; }
.reply-actions .go { margin-left: auto; }
.add-file { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font-size: 14px; }

/* About this ticket and Files */
.facts { display: flex; flex-direction: column; gap: 12px; }
.facts div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 22px; }
.facts dt { flex: none; color: var(--muted); }
.facts dd { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.file-row { display: flex; flex-direction: column; justify-content: center; min-height: 44px; font-size: 14px; line-height: 22px; text-decoration: none; }
.file-name { text-decoration: underline; }
.file-meta { color: var(--muted); }

/* Refused for being outside the UAE: the popup over a dimmed page, then a blank dark page */
.outside { width: min(480px, calc(100vw - 32px)); max-width: none; padding: 24px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.outside::backdrop { background: rgba(17, 21, 31, 0.72); }
.outside h2 { overflow-wrap: anywhere; }
.outside p { margin: 12px 0 24px; overflow-wrap: anywhere; }
.outside .go { width: 100%; }
.outside-page { min-height: 100vh; background: var(--night); color: var(--on-night); }
.outside-blank { max-width: 640px; margin: 0 auto; padding: 64px 24px; display: flex; flex-direction: column; gap: 16px; }
.outside-blank h1 { font: 600 28px/36px var(--display); letter-spacing: 0; }
.outside-blank p { color: var(--on-night-muted); overflow-wrap: anywhere; }
.outside-blank a { color: var(--signal); }
.outside-blank a:hover { color: var(--on-night); }

.turnstile:empty { display: none; }
/* Room kept for the visible widget, so the page doesn't move when it draws. The compact one is taller. */
.turnstile { max-width: 100%; line-height: 0; }
.turnstile.reserved:empty { display: block; }
.turnstile.reserved, .turnstile:not(:empty) { min-height: 65px; }
@media (max-width: 339px) { .turnstile.reserved, .turnstile:not(:empty) { min-height: 140px; } }
.code-timers { display: flex; flex-direction: column; }
.countdown { font-variant-numeric: tabular-nums; }
.again { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 44px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The line under the sign-in form */
.not-client { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.not-client a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .live::after, .node.pulse::before { animation: none; display: none; }
  .tcard { transition: none; }
  .tcard:hover { transform: none; }
}

@media (max-width: 640px) {
  h1 { font: 600 24px/32px var(--display); letter-spacing: 0; }
  .top { flex-wrap: nowrap; justify-content: space-between; padding: 12px 16px; }
  .logo-full { display: none; }
  .logo-mark { display: block; flex: none; }
  #who { margin-left: 0; flex: 1; justify-content: center; text-align: center; }
  .who-company { display: none; }
  .who-tile { display: none; }
  .onbar { padding: 0 12px; }
  .banner { padding: 12px 16px; }
  .page { padding: 16px; gap: 16px; }
  .wide { padding: 16px 16px 32px; }
  .wide.stack-wide { gap: 16px; }
  .head { gap: 4px; }
  .actions > button { width: 100%; }
  .go, .ghost { padding: 8px 16px; }

  .split { align-content: flex-start; }
  .split-brand { flex-basis: 100%; padding: 32px 0 32px 16px; gap: 24px; }
  .split-brand img { width: 150px; }
  .split-title { gap: 8px; }
  .split-title h1 { padding-right: 16px; font: 700 28px/36px var(--display); letter-spacing: -0.015em; }
  .split-rule { margin-top: 8px; }
  .split-note { padding-right: 16px; }
  .split-side { flex-basis: 100%; padding: 32px 16px; align-items: flex-start; }

  .band-in { padding: 24px 16px; gap: 24px; }
  .band-ticket .band-in { padding: 8px 16px 24px; gap: 16px; }
  .band-art { top: -24px; width: 400px; height: 212px; opacity: 0.22; }
  .band-row { gap: 16px; }
  .band-row > .head { flex-basis: 100%; }
  .band-row > .go, .target { width: 100%; }
  .band-line { font-size: 16px; line-height: 26px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 12px 16px; }
  .stat-value { font-size: 24px; line-height: 32px; }

  .columns { gap: 16px; }
  .column-main, .column-side { flex-basis: 100%; }
  .panel-card, .need, .card, .confirm { padding: 16px; }
  .tcard { padding: 16px; }
  .tcard-top strong { flex-basis: 100%; order: 2; }
  .tcard-number { order: 1; }
  .chip { order: 1; }
  .tiles .tile { min-height: 72px; padding: 16px; }

  /* The progress line stands upright, so a date fits under every step */
  .steps { display: flex; flex-direction: column; }
  .step { flex-direction: row; gap: 12px; }
  .track { flex-direction: column; align-self: stretch; }
  .bar { flex: 1; width: 2px; height: auto; min-height: 8px; }
  .step-body { padding: 0 0 12px; }
  .step:last-child .step-body { padding-bottom: 0; }

  .confirm { flex-direction: column; align-items: stretch; gap: 16px; }
  .confirm-text { flex: none; }
  .confirm-text h2 { font-size: 18px; line-height: 26px; }
  .pair { flex-direction: column; gap: 8px; }
  .pair > button { width: 100%; }
  .reply-actions .go { margin-left: 0; }
  .add-file { justify-content: center; }

  .msg { gap: 8px; }
  .msg-tile { width: 32px; height: 32px; font-size: 12px; }
  .msg-body { padding: 12px; }
  .join { align-self: stretch; }
}