:root {
  --bg: #f6f7f9;
  --surface: #fff;
  --ink: #1a1d21;
  /* Readable on every shared surface, including the slightly darker title strip. */
  --muted: #667085;
  --line: #e3e6ea;
  --accent: #1a5fb4;
  /* Colour is reserved for actual warnings and errors. Imported status labels
     share one neutral pill because their vocabulary has no complete severity scale. */
  --warn-fg: #a45f00;
  --bad-bg: #fff1f0; --bad-fg: #c4322a;
  /* Feed families use separate hue groups, not neighbouring shades. Each is
     dark enough to carry a white line icon without sacrificing contrast. */
  --feed-email: #0f766e;
  --feed-sms: #c2410c;
  --feed-note: #475569;
  --feed-system: #6d28d9;
  --feed-system-soft: #f5f3ff;
  --radius: 8px;
  --strip: #f2f4f7;   /* card title bars — a shade off the surface, no more */

  /* Every control in the app is built from these three values. */
  --control-h: 34px;
  --control-r: 6px;
  --ring: 0 0 0 3px rgba(26, 95, 180, .22);
}

/* Reserve the vertical scrollbar's space even on short pages such as Home.
   Otherwise the centred navigation shifts when the destination starts scrolling. */
html { scrollbar-gutter: stable; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }


/* ── Controls ────────────────────────────────────────────────────────────
   One field, one button, one focus ring, everywhere. Component sections
   below set width and position only — never border, height or type size. */

.search input,
.login input,
.pager .jump input,
.filters > label input,
.filters > label select,
.schedule-filter-controls > label input,
.schedule-filter-controls > label select,
.filter-multi > details > summary {
  box-sizing: border-box; height: var(--control-h); padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--control-r);
  font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
}

.search button,
.login button,
.pager .jump button,
.filters button {
  box-sizing: border-box; height: var(--control-h); padding: 0 18px;
  border: 1px solid var(--accent); border-radius: var(--control-r);
  font-size: 14px; font-family: inherit; font-weight: 500;
  background: var(--accent); color: #fff; cursor: pointer;
}
.search button:hover,
.login button:hover,
.filters button:hover { filter: brightness(1.1); }

/* Keyboard focus is visible on every control, not just the search box. */
input:focus-visible,
select:focus-visible,
button:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
summary:focus-visible, a:focus-visible { border-radius: 3px; }

/* Disclosures are text, not boxes: muted until pointed at. */
.raw > summary,
.quoted > summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; }
.raw > summary:hover,
.quoted > summary:hover { color: var(--ink); }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 20px; min-height: calc(var(--control-h) + 21px);
  padding: 10px 20px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.topbar-start { grid-column: 1; min-width: 0; height: var(--control-h); display: flex; align-items: center; gap: clamp(12px, 3vw, 64px); }
.brand { flex: 0 0 auto; font-weight: 700; font-size: 17px; color: var(--ink); display: flex; flex-direction: column; line-height: 1.1; }
.brand span { font-size: 11px; font-weight: 400; color: var(--muted); }
.search { display: flex; gap: 6px; }
.topbar .search { flex: 1 1 auto; min-width: 0; max-width: 540px; }
.search input { flex: 1; min-width: 0; }
.topbar nav { grid-column: 2; grid-row: 1; justify-self: center; display: flex; gap: 14px; font-size: 14px; }
/* Sign out ends the session — it is not navigation, so it sits apart. */
.topbar .signout { grid-column: 3; grid-row: 1; justify-self: end; padding-left: 16px; border-left: 1px solid var(--line); }
.topbar nav a { color: var(--muted); display: inline-flex; flex-direction: column; align-items: center; }
/* Reserve each label's semibold width before it becomes current, so selecting
   one page never nudges its neighbours sideways. */
.topbar nav a::after {
  content: attr(data-label); height: 0; overflow: hidden; visibility: hidden;
  font-weight: 600; pointer-events: none; user-select: none;
}
.topbar nav a.on { color: var(--ink); font-weight: 600; }

main { max-width: 1500px; margin: 0 auto; padding: 20px; }

/* ── Home ────────────────────────────────────────────────────────────── */
.home-intro {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 20px 0 12px;
}
.hero { width: 100%; min-width: 0; text-align: center; }
.hero h1 { margin: 0 0 6px; font-size: 26px; }
.hero .muted { max-width: 640px; margin: 0 auto 18px; }
.search.big { width: 100%; max-width: 680px; margin: 0 auto; }
.search.big input, .search.big button { height: 44px; font-size: 16px; }
.search.big input { padding: 0 14px; }
.search.big button { padding: 0 24px; }
.home-archive-image {
  display: block; width: 100%; max-width: 260px; height: auto;
}

@media (max-width: 780px) {
  .home-intro { gap: 14px; padding-top: 16px; }
  .home-archive-image { max-width: 180px; }
}

.archive-summary { max-width: 1048px; margin: 22px auto 0; }
.archive-summary h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(150px, 200px)); justify-content: center; gap: 12px; margin: 0; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); }
.tile:hover { border-color: var(--accent); text-decoration: none; }
.tile .n { font-size: 24px; font-weight: 700; }
.tile .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); }
}

/* ── Page furniture ──────────────────────────────────────────────────── */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 6px 0 18px; }
.page-head h1 { margin: 2px 0 6px; font-size: 22px; }
/* The heading names the record, so it stays ink — it is a title that happens to
   navigate, not a link. The underline on hover is the only affordance it needs. */
.page-head h1 a { color: inherit; text-decoration: none; }
.page-head h1 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.title-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.beside { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.meta + .meta { margin-top: 3px; }
/* Small caps name the value that follows, so no chip is left to be guessed at. */
.meta .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-right: 2px; }
.meta .dot { color: var(--line); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.card h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.card .count { background: var(--bg); border-radius: 10px; padding: 1px 7px; font-size: 11px; color: var(--muted); }
.card h3 { margin: 12px 0 4px; font-size: 13px; }
.empty { color: var(--muted); font-size: 14px; margin: 4px 0; }
.error { color: var(--bad-fg); background: var(--bad-bg); border-left: 4px solid var(--bad-fg); border-radius: 6px; padding: 9px 10px; font-size: 14px; margin: 0; }
.feedback .empty { background: var(--strip); border-left: 4px solid var(--muted); border-radius: 6px; padding: 9px 10px; margin: 0; }
.feedback-action { margin: 10px 0 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 6px; border-bottom: 1px solid var(--line); font-weight: 600; }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #fafbfc; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.date { white-space: nowrap; color: var(--muted); }

dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 6px 0 0; font-size: 13px; }
dt { color: var(--muted); }
dd { margin: 0; }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }

/* ── Contacts ────────────────────────────────────────────────────────── */
.contact { padding: 8px 0; border-bottom: 1px solid var(--line); }
.contact:last-child { border-bottom: 0; }
.contact ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.contact li { padding: 1px 0; }
.dtype { display: inline-block; min-width: 54px; font-size: 11px; color: var(--muted); text-transform: uppercase; }

/* ── Addresses / inventory ───────────────────────────────────────────── */
.addr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .addr-pair { grid-template-columns: 1fr; } }
.addr h3 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.addr p { margin: 0 0 2px; }
/* Two columns, not three: at three, item names wrap onto a second line and the
   list becomes harder to read than the space it saves is worth. */
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 24px; font-size: 14px; }
@media (max-width: 640px) { .inv-grid { grid-template-columns: 1fr; } }
.inv .q { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Legs ────────────────────────────────────────────────────────────── */
.leg { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
/* The head strip is darker than the card body so a run of legs reads as
   separate cards rather than one long ruled table. */
.leg-head { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 10px 14px; background: var(--strip); border-bottom: 1px solid var(--line); }
.leg-head .spacer { flex: 1; }
.leg-no { background: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; color: var(--muted); padding: 0 6px; }

/* Full-width bands down the card; two of them are split in half. */
.leg-row { padding: 12px 14px; border-top: 1px solid var(--line); }
.leg-row:first-of-type { border-top: 0; }
.leg-row .value { font-size: 14px; }
.leg-row.two { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.leg-row.two .cell { padding: 12px 14px; min-width: 0; }
.leg-row.two .cell + .cell { border-left: 1px solid var(--line); }
@media (max-width: 800px) {
  .leg-row.two { grid-template-columns: 1fr; }
  .leg-row.two .cell + .cell { border-left: 0; border-top: 1px solid var(--line); }
}

.leg-row .pin { font-size: 14px; padding-left: 16px; position: relative; }
.leg-row .pin::before { content: ''; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.leg .raw { margin: 0 14px; padding: 8px 0 12px; }

.field { margin-top: 12px; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); font-weight: 700; margin-bottom: 4px; }

/* ── Record panels (the lossless layer) ──────────────────────────────── */
.raw { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
/* One gap between any disclosure and whatever it opens onto. */
.raw[open] > summary { margin-bottom: 12px; }
.raw > summary::-webkit-details-marker { display: none; }
.raw > summary::before { content: '▸ '; }
.raw[open] > summary::before { content: '▾ '; }
.raw > summary .count { background: var(--bg); border-radius: 10px; padding: 0 6px; font-size: 11px; }
.raw-list { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 2px 14px; margin: 0 0 2px; font-size: 13px; }
.raw-list dt { color: var(--muted); }
.raw-list dd { margin: 0; overflow-wrap: anywhere; }

/* ── Invoices ────────────────────────────────────────────────────────── */
.invoice { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
/* Same treatment as a leg: repeated cards need a title bar to be told apart. */
.invoice-head { font-size: 14px; padding: 10px 14px; background: var(--strip); border-bottom: 1px solid var(--line); }
.invoice-body { padding: 2px 14px 12px; }
/* The balance is the answer to the question staff are actually asking, so it
   carries a step more weight than the charge and payment figures around it —
   enough to find at a glance, not enough to shout. */
td.balance { font-size: 15px; font-weight: 600; }
td.owing { color: var(--bad-fg); }
td.settled { color: var(--ink); }
.invoice .label { margin: 12px 0 2px; }
.invoice table { margin-bottom: 2px; }
.payments { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 2px; }
.raw-group { margin: 14px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); font-weight: 700; }
.raw-group:first-child { margin-top: 0; }

/* ── Activity feed ───────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 12px; }
/* Activity is paginated, so the document itself can scroll naturally instead
   of trapping keyboard and wheel users inside a second 1,400px scroll area. */
.feed-item {
  flex: 0 0 auto; min-width: 0;
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 6px; background: #fff; overflow: hidden;
}
/* Type icon on a strip, message below it — the same shape as a leg or invoice. */
.feed-strip { padding: 8px 14px; background: var(--strip); border-bottom: 1px solid var(--line); }
.feed-body { padding: 10px 14px; }
.feed-item.email-out,
.feed-item.email-in { border-left-color: var(--feed-email); }
.feed-item.sms-out { border-left-color: var(--feed-sms); }
.feed-item.note,
.feed-item.other { border-left-color: var(--feed-note); }
.feed-item.pinned { background: #fffdf3; }
.feed-item.pinned .feed-strip { background: #f8f2dc; }

/* Generated audit events speak the same card language as correspondence, but
   a blue accent and quieter, tighter body keep them recognisably different. */
.feed-item.system-event {
  border-left-color: var(--feed-system);
}
.system-event .feed-strip { background: var(--feed-system-soft); }
.system-event .feed-type-icon { background: var(--feed-system); }
.system-event-body { padding-top: 8px; padding-bottom: 8px; }
.system-event-message {
  color: var(--muted); font-style: italic;
}
.system-email-open .system-event-message { color: var(--ink); font-style: normal; }
.system-event-body .raw { margin-top: 8px; }
.feed-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.feed-type-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--feed-note);
}
.feed-type-icon svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.email-out .feed-type-icon,
.email-in .feed-type-icon { background: var(--feed-email); }
.sms-out .feed-type-icon { background: var(--feed-sms); }
.note .feed-type-icon,
.other .feed-type-icon { background: var(--feed-note); }
.feed-item[class*="system-"] .feed-type-icon { background: var(--feed-system); }
.feed-head .type { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.feed-head time { margin-left: auto; white-space: nowrap; }
.feed-head .tag { background: var(--bg); border-radius: 3px; padding: 0 6px; }
.subject { font-weight: 600; margin: 3px 0 1px; font-size: 14px; }
.who { font-size: 13px; color: var(--muted); }
.body { font-size: 14px; overflow-wrap: anywhere; }
.body summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.body.html img, .html img { max-width: 100%; height: auto; }
.html table { font-size: 13px; }
.html p { margin: 6px 0; }

/* ── Lists, filters, pager ───────────────────────────────────────────── */
.results { list-style: none; margin: 0; padding: 0; }
.results li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.results li:last-child { border-bottom: 0; }

.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.filters > label,
.schedule-filter-controls > label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Every control in the bar is the same height, border and type size, whether it
   is an input, a native date field, a disclosure or the submit button. */
.filters > label input,
.schedule-filter-controls > label input { min-width: 190px; }
.filters > label input[type="date"],
.schedule-filter-controls > label input[type="date"] { min-width: 150px; }
.filters .clear { display: flex; align-items: center; height: var(--control-h); font-size: 13px; color: var(--muted); }

.pager { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 10px 0 30px; font-size: 14px; flex-wrap: wrap; }
.pager .jump { display: flex; align-items: center; gap: 8px; }
.pager .jump label { color: var(--muted); }
.pager .jump input { width: 72px; text-align: center; }
.pager .jump button { padding: 0 12px; }
.pager .pos { color: var(--muted); }
.pager .off { color: var(--muted); }

.notes { margin: 0; padding-left: 18px; font-size: 14px; }
.notes li { margin-bottom: 5px; }
/* In the top bar it is one more nav item, not a call to action. */
.topbar .signout { display: flex; }
.topbar .signout button { padding: 0; height: auto; border: 0; background: none; color: var(--muted); font-size: 14px; font-family: inherit; font-weight: 400; cursor: pointer; }
.topbar .signout button:hover { color: var(--ink); text-decoration: underline; }
.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 20px; }

/* ── Login ───────────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 32px; width: 320px; text-align: center; }
.login h1 { margin: 0 0 2px; font-size: 22px; }
.login p { margin: 0 0 18px; font-size: 13px; }
.login input, .login button { width: 100%; height: 38px; }
.login input { margin-bottom: 10px; }
.login .error { margin: 0 0 18px; padding: 7px; font-size: 13px; text-align: left; }

/* Original message source opens separately as authenticated plain text. */
.source-link { margin: 6px 0 2px; }
#activity { scroll-margin-top: 12px; }

/* Pinned notes sit above the timeline; they are the sticky notes on the file. */
.feed-pinned { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 10px 12px; background: #fffdf3; border: 1px solid #f0e6c8; border-radius: var(--radius); }
.feed-group-head { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.feed .feed-group-head {
  padding: 2px 2px 0;
}
.feed-pinned .feed-item { background: #fff; }

/* Pointers from a customer to the job conversations that live one level down. */
.job-convos { list-style: none; margin: 0; padding: 0; }
.job-convos li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.job-convos li:last-child { border-bottom: 0; }
.job-convos time { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Inventory leads with the volume; the item list sits behind a disclosure. */
.volume { display: flex; align-items: baseline; gap: 16px; padding: 2px 0 10px; }
/* The page title is 22px; a figure inside a card should not outrank it. */
.volume .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.volume .u { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.volume-meta { font-size: 14px; }
.volume .source { color: var(--ink); }
.volume .mismatch { color: var(--warn-fg); }
.inv-group + .inv-group { margin-top: 22px; }
.inv-group-head { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; }

/* Single-column record layout: sections stack in reading order, full width. */
.stack { display: block; }
.stack .card { max-width: 1100px; }
.stack table { width: auto; min-width: 60%; }
.stack td, .stack th { padding-right: 22px; }

/* Status filter: many values, toggled in combination. */
.filters .filter-multi { position: relative; align-self: flex-end; }
.filters .cap { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.filter-multi > details > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; min-width: 180px; white-space: nowrap;
}
.filter-multi > details > summary::-webkit-details-marker { display: none; }
.filter-multi > details > summary::marker { content: ''; }
.filter-multi > details > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.filter-multi > details[open] > summary { border-color: var(--accent); }
.filter-multi > details[open] > summary::after { content: '▴'; }
.filter-multi .options {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px; max-height: 300px; overflow-y: auto;
}
.filter-multi .opt-group + .opt-group { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.filter-multi .opt-group-head { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); font-weight: 700; padding: 2px 6px 6px; }
.filter-multi .opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px;
  font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer;
}
.filter-multi .opt:hover { background: var(--bg); }
.filter-multi .opt input { width: 14px; height: 14px; min-width: 0; margin: 0; padding: 0; flex: none; }
.filter-multi .opt .muted { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Plain-text bodies keep their line breaks; HTML bodies carry their own layout. */
.plain { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Schedule ───────────────────────────────────────────────────────── */
.schedule-data-warning { color: var(--warn-fg); font-weight: 600; }

.schedule-view-switch {
  flex: none; min-inline-size: 0; margin: 0; padding: 0; border: 0;
}
.schedule-view-switch > legend {
  margin: 0 0 5px; padding: 0;
  color: var(--muted); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.schedule-view-options {
  display: inline-grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 3px;
  padding: 3px; border: 1px solid var(--line); border-radius: var(--control-r); background: var(--strip);
}
.schedule-view-option { position: relative; min-width: 0; cursor: pointer; }
.schedule-view-option > input {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.schedule-view-option > span {
  min-height: var(--control-h); padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: calc(var(--control-r) - 2px);
  color: var(--muted); background: transparent; font-size: 14px; font-weight: 600;
}
.schedule-view-option:hover > input:not(:checked) + span { color: var(--ink); background: var(--surface); }
.schedule-view-option > input:checked + span {
  border-color: var(--accent); color: #fff; background: var(--accent);
}
.schedule-view-option > input:focus-visible + span {
  position: relative; z-index: 2; outline: none; box-shadow: var(--ring);
}
.schedule-view-option > input:disabled { cursor: not-allowed; }
.schedule-view-option > input:disabled + span { opacity: .55; }

.schedule-period-nav {
  display: grid; grid-template-columns: var(--control-h) 210px var(--control-h);
  align-items: center; justify-content: center; gap: 16px;
  margin: 0 0 12px; padding: 8px 12px; font-size: 14px;
}
.schedule-period-current {
  min-width: 0; width: 100%; height: var(--control-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.3; text-align: center;
}
.schedule-period-current .schedule-period-label {
  margin: 0; color: var(--ink); font-size: 14px; font-weight: 700;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
}
.schedule-nav-button {
  width: var(--control-h); height: var(--control-h); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--control-r); color: var(--accent); background: var(--surface);
  font-size: 18px; line-height: 1; text-decoration: none;
}
.schedule-nav-button:hover { border-color: var(--accent); text-decoration: none; }
.schedule-nav-button.off { color: var(--muted); background: var(--strip); }
.schedule-period-nav .off { color: var(--muted); }

.schedule-filters { align-items: flex-end; flex-wrap: nowrap; }
.schedule-filter-controls {
  min-width: 0; margin-left: auto;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
}
.schedule-filters .filter-multi { min-width: 190px; }
.schedule-filters .filter-multi > details > summary { min-width: 190px; }
.schedule-filters .filter-multi .options { min-width: 300px; }

.schedule-month-card { padding: 0; overflow: hidden; }
.schedule-month-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.schedule-month-grid { min-width: 980px; }
.schedule-month-weekdays, .schedule-month-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.schedule-month-weekday {
  padding: 5px 7px; border-right: 1px solid var(--line);
  color: var(--muted); background: var(--strip); font-size: 11px; font-weight: 600; text-align: center;
}
.schedule-month-weekday:nth-child(n + 6) { background: #eceff3; }
.schedule-month-weekday:last-child { border-right: 0; }
.schedule-month-day {
  height: 224px; min-width: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: var(--surface);
}
.schedule-month-week .schedule-month-day:last-child { border-right: 0; }
.schedule-month-day.outside-month { color: var(--muted); background: #fafbfc; }
.schedule-month-week > .schedule-month-day:nth-child(n + 6) { background: #f7f8fa; }
.schedule-month-day-head {
  min-height: 30px; padding: 4px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
}
.schedule-month-date-link { color: inherit; border-radius: 4px; }
.schedule-month-date-link:hover { color: var(--accent); text-decoration: none; }
.schedule-month-number { font-size: 13px; font-weight: 600; }
.schedule-month-counts {
  min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.2;
  text-overflow: ellipsis; white-space: nowrap;
}
.schedule-month-day.has-legs .schedule-month-counts { color: var(--accent); }
.schedule-month-events {
  flex: 1 1 auto; min-height: 0; padding: 0 3px 4px; overflow-y: auto; scrollbar-gutter: stable;
}
.schedule-month-event {
  --schedule-resource-colour: #e5e7eb;
  --schedule-resource-ink: #1a1d21;
  --schedule-payment-band: #a8afb8;
  --schedule-leg-band: #a8afb8;
  position: relative; display: block; min-width: 0; margin: 0 0 3px; padding: 3px 9px;
  border: 1px solid rgba(17, 24, 39, .22); border-radius: 4px;
  color: var(--schedule-resource-ink); background: var(--schedule-resource-colour);
  box-shadow: inset 7.5px 0 var(--schedule-payment-band), inset -7.5px 0 var(--schedule-leg-band);
  font-size: 9px; line-height: 1.2;
}
.schedule-month-event:hover { color: var(--schedule-resource-ink); outline: 1px solid var(--accent); outline-offset: -1px; text-decoration: none; }
.schedule-month-event:focus-visible {
  box-shadow: var(--ring), inset 7.5px 0 var(--schedule-payment-band), inset -7.5px 0 var(--schedule-leg-band);
}
.schedule-month-event:hover,
.schedule-month-event:focus { z-index: 25; }
.schedule-month-event:hover > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 90ms, 0s;
}
.schedule-month-event:focus > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.schedule-month-event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.schedule-month-event-head strong,
.schedule-month-event-person { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-month-event-head strong { font-weight: 600; }
.schedule-month-event-head time { flex: none; font-weight: 700; white-space: nowrap; }
.schedule-month-event-person { display: block; padding-right: 3px; }

.schedule-month-event.resource-unassigned,
.schedule-month-event.resource-unresolved {
  --schedule-resource-colour: #eceff2;
  --schedule-resource-ink: #303640;
  background-image: repeating-linear-gradient(135deg, rgba(79, 88, 101, .08) 0 5px, transparent 5px 10px);
}
.schedule-month-event.resource-unresolved { border-style: dashed; }

.schedule-timeline-card { padding: 0; overflow: visible; }
.schedule-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 8px; }
.schedule-timeline-grid { --schedule-label-width: 190px; --schedule-track-width: 2880px; min-width: calc(var(--schedule-label-width) + var(--schedule-track-width)); }
.schedule-axis-row, .schedule-resource-row {
  display: grid; grid-template-columns: var(--schedule-label-width) var(--schedule-track-width);
}
.schedule-axis-row { position: sticky; top: 0; z-index: 6; border-bottom: 1px solid var(--line); }
.schedule-resource-label {
  position: sticky; left: 0; z-index: 5; min-width: 0;
  padding: 10px 12px; border-right: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; justify-content: center; font-size: 13px;
}
.schedule-axis-row .schedule-resource-label { background: var(--strip); }
.schedule-resource-name { min-width: 0; display: flex; align-items: center; gap: 7px; }
.schedule-resource-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-resource-swatch {
  --schedule-resource-colour: #e5e7eb;
  width: 13px; height: 13px; flex: none; border: 1px solid rgba(17, 24, 39, .25); border-radius: 3px;
  background: var(--schedule-resource-colour);
}
.schedule-resource-row[data-resource-kind="unassigned"] .schedule-resource-swatch,
.schedule-resource-row[data-resource-kind="unresolved"] .schedule-resource-swatch {
  background-color: #eceff2;
  background-image: repeating-linear-gradient(135deg, rgba(79, 88, 101, .12) 0 3px, transparent 3px 6px);
}
.schedule-resource-row[data-resource-kind="unresolved"] .schedule-resource-swatch { border-style: dashed; }
.schedule-resource-note { color: var(--muted); font-size: 10px; line-height: 1.2; }
.schedule-axis {
  position: relative; height: 42px;
  background: var(--strip); border-bottom: 1px solid var(--line);
}
.schedule-tick {
  position: absolute; left: var(--schedule-tick-left); top: 0; bottom: 0;
  border-left: 1px solid #d6dae0; color: var(--muted); font-size: 10px;
}
.schedule-tick > span { position: absolute; top: 5px; transform: translateX(-50%); white-space: nowrap; }
.schedule-tick.first > span { transform: none; padding-left: 3px; }
.schedule-tick[data-initial-scroll] > span { transform: none; padding-left: 3px; }
.schedule-tick.last > span { transform: translateX(-100%); padding-right: 3px; }
.schedule-resource-group-head {
  min-width: calc(var(--schedule-label-width) + var(--schedule-track-width));
  border-bottom: 1px solid var(--line); background: #e9edf2;
}
.schedule-resource-group-head > h3 {
  position: sticky; left: 0; z-index: 4; width: var(--schedule-label-width);
  margin: 0; padding: 7px 12px; border-right: 1px solid var(--line);
  background: #e9edf2; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
}
.schedule-resource-row { border-bottom: 1px solid var(--line); }
.schedule-resource-track {
  position: relative; min-height: calc(var(--schedule-lanes) * 58px + 12px);
  background-color: #fff;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 60px 100%;
}
.schedule-row-empty {
  position: sticky; left: calc(var(--schedule-label-width) + 10px); z-index: 1;
  width: max-content; height: calc(var(--schedule-lanes) * 58px + 12px);
  display: flex; align-items: center; color: var(--muted); font-size: 12px;
}
.schedule-no-resources { margin: 14px; color: var(--muted); }

.schedule-event {
  --schedule-resource-colour: #eef5fc;
  --schedule-resource-ink: #1a1d21;
  --schedule-payment-band: #a8afb8;
  --schedule-leg-band: #a8afb8;
  position: absolute; z-index: 2; overflow: visible;
  left: var(--schedule-left); top: calc(6px + var(--schedule-lane) * 58px);
  width: var(--schedule-width); min-height: 50px; padding: 5px 9px 5px 11px;
  display: flex; justify-content: space-between; gap: 7px;
  border: 1px solid rgba(17, 24, 39, .28); border-left: 7.5px solid var(--schedule-payment-band); border-radius: 5px;
  color: var(--schedule-resource-ink); background: var(--schedule-resource-colour);
  font-size: 10px; line-height: 1.25; text-decoration: none;
  box-shadow: inset -7.5px 0 var(--schedule-leg-band);
}
.schedule-event:hover { color: var(--schedule-resource-ink); text-decoration: none; }
.schedule-event:focus-visible { outline: none; box-shadow: var(--ring), inset -7.5px 0 var(--schedule-leg-band); }
.schedule-event.resource-unassigned,
.schedule-event.resource-unresolved {
  --schedule-resource-colour: #eceff2;
  --schedule-resource-ink: #303640;
  background-image: repeating-linear-gradient(135deg, rgba(79, 88, 101, .08) 0 5px, transparent 5px 10px);
}
.schedule-event.resource-unresolved { border-style: dashed; border-left-style: solid; }
.schedule-event-main { min-width: 0; width: 100%; display: flex; flex-direction: column; }
.schedule-event-main strong, .schedule-event-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-event-tooltip {
  position: fixed; z-index: 45; left: 50%; top: 16px; bottom: auto; transform: translateX(-50%);
  display: block; width: min(420px, calc(100vw - 32px)); padding: 10px 12px;
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid #24243d; border-radius: 4px;
  color: #fff; background: #111027; box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 220ms;
  pointer-events: none; font-size: 12px; line-height: 1.3;
}
.schedule-event:hover, .schedule-event:focus-within { z-index: 25; }
.schedule-event-tooltip-status {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.schedule-event-tooltip-state {
  min-width: 0; padding: 4px 7px; display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .08);
}
.schedule-event-tooltip-state > strong {
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.schedule-event-tooltip-state > span { min-width: 0; overflow-wrap: anywhere; }
.schedule-event-tooltip-row {
  display: grid; grid-template-columns: minmax(82px, auto) minmax(0, 1fr); gap: 10px;
}
.schedule-event-tooltip-row + .schedule-event-tooltip-row { margin-top: 3px; }
.schedule-event-tooltip-row + .schedule-event-tooltip-row.is-group-start,
.schedule-event-tooltip-status + .schedule-event-tooltip-row.is-group-start {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.schedule-event-tooltip-row.is-note {
  padding: 5px 6px; border-radius: 3px; color: #e1e5ec; background: rgba(255, 255, 255, .07);
}
.schedule-event-tooltip-row > strong { color: #fff; font-weight: 700; }
.schedule-event-tooltip-row > span { min-width: 0; overflow-wrap: anywhere; }
.schedule-event:hover > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 90ms, 0s;
}
.schedule-event:focus > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 0s;
}

.schedule-event-detail {
  padding: 0; border: 0; background: transparent; background-image: none; box-shadow: none;
}
.schedule-event-detail:hover { filter: none; }
.schedule-event-detail > summary {
  position: relative; min-height: 50px; padding: 5px 9px 5px 11px;
  display: flex; justify-content: space-between; gap: 7px;
  border: 1px dashed rgba(17, 24, 39, .28); border-left: 7.5px solid var(--schedule-payment-band); border-radius: 5px;
  color: var(--schedule-resource-ink); background-color: var(--schedule-resource-colour);
  background-image: repeating-linear-gradient(135deg, rgba(79, 88, 101, .08) 0 5px, transparent 5px 10px);
  box-shadow: inset -7.5px 0 var(--schedule-leg-band);
  cursor: pointer; list-style: none; font-size: 10px; line-height: 1.25;
}
.schedule-event-detail > summary::-webkit-details-marker { display: none; }
.schedule-event-detail > summary::marker { content: ''; }
.schedule-event-detail:not([open]) > summary:hover > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 90ms, 0s;
}
.schedule-event-detail:not([open]) > summary:focus > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.schedule-event-detail[open] > summary { border-color: var(--accent); box-shadow: var(--ring), inset -7.5px 0 var(--schedule-leg-band); }
.schedule-event-detail[open] > summary > .schedule-event-tooltip { display: none; }
.schedule-event-body {
  position: relative; z-index: 30; width: min(430px, calc(100vw - 48px));
  margin-top: 5px; padding: 12px 14px; border: 1px solid #b8c2cf; border-radius: 6px;
  color: var(--ink); background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  font-size: 13px;
}
.schedule-event-body dl { grid-template-columns: minmax(105px, auto) minmax(0, 1fr); }
.schedule-event-body dd { overflow-wrap: anywhere; }
.schedule-event-body .badge { white-space: normal; }
.schedule-event-body .schedule-data-warning { margin: 0 0 8px; font-size: 12px; }
.schedule-crew { list-style: none; margin: 0; padding: 0; }
.schedule-crew li + li { margin-top: 2px; }

.schedule-exception-section { min-width: 0; }
.schedule-exception-event {
  --schedule-resource-colour: #eef5fc;
  --schedule-resource-ink: #1a1d21;
  --schedule-payment-band: #a8afb8;
  --schedule-leg-band: #a8afb8;
  position: relative; display: block; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 5px solid var(--schedule-payment-band); border-radius: 6px;
  color: var(--schedule-resource-ink); background: var(--schedule-resource-colour);
  box-shadow: inset -5px 0 var(--schedule-leg-band); font-size: 12px; text-decoration: none;
}
.schedule-exception-event + .schedule-exception-event { margin-top: 8px; }
.schedule-exception-main { display: flex; flex-direction: column; }
.schedule-exception-event:hover { color: var(--schedule-resource-ink); text-decoration: none; }
.schedule-exception-event:focus-visible { outline: none; box-shadow: var(--ring), inset -5px 0 var(--schedule-leg-band); }
.schedule-exception-event:hover > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 90ms, 0s;
}
.schedule-exception-event:focus > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.schedule-exception-event.resource-unassigned,
.schedule-exception-event.resource-unresolved {
  --schedule-resource-colour: #eceff2;
  --schedule-resource-ink: #303640;
  background-image: repeating-linear-gradient(135deg, rgba(79, 88, 101, .08) 0 5px, transparent 5px 10px);
}
.schedule-exception-event.resource-unresolved { border-style: dashed; border-left-style: solid; }
.schedule-exception-detail {
  padding: 0; background: transparent; background-image: none; box-shadow: none;
}
.schedule-exception-detail:hover { filter: none; }
.schedule-exception-detail > summary {
  position: relative; padding: 8px 10px; display: block;
  color: var(--schedule-resource-ink); background-color: var(--schedule-resource-colour);
  background-image: repeating-linear-gradient(135deg, rgba(79, 88, 101, .08) 0 5px, transparent 5px 10px);
  box-shadow: inset -5px 0 var(--schedule-leg-band);
  cursor: pointer; list-style: none; font-size: 12px;
}
.schedule-exception-detail > summary::-webkit-details-marker { display: none; }
.schedule-exception-detail > summary::marker { content: ''; }
.schedule-exception-detail:not([open]) > summary:hover > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 90ms, 0s;
}
.schedule-exception-detail:not([open]) > summary:focus > .schedule-event-tooltip {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
.schedule-exception-detail[open] > summary { border-bottom: 1px solid var(--line); }
.schedule-exception-detail[open] > summary > .schedule-event-tooltip { display: none; }
.schedule-exception-detail .schedule-event-body {
  position: static; width: auto; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
}

/* Onexfort's two edge bands remain separate from the exported truck colour.
   Keep this shared mapping after every tile's neutral defaults so Month, Day,
   and exception tiles resolve the same payment and leg-status colours. */
.schedule-payment-unpaid { --schedule-payment-band: #ff0000; }
.schedule-payment-partial { --schedule-payment-band: #ff7f50; }
.schedule-payment-paid { --schedule-payment-band: #028001; }
.schedule-payment-neutral { --schedule-payment-band: #a8afb8; }
.schedule-status-awaiting { --schedule-leg-band: #ff0000; }
.schedule-status-confirmed { --schedule-leg-band: #028001; }
.schedule-status-completed { --schedule-leg-band: #000000; }
.schedule-status-neutral { --schedule-leg-band: #a8afb8; }

@media (max-width: 850px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; min-height: calc(var(--control-h) + 17px); padding: 8px 12px; }
  .topbar-start { display: contents; }
  .topbar .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .topbar .search { grid-column: 1 / -1; grid-row: 3; max-width: none; }
  .topbar .search input { min-width: 0; }
  .topbar nav {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center;
    min-width: 0; overflow-x: auto; padding-bottom: 2px; white-space: nowrap;
  }
  .topbar .signout { grid-column: 2; grid-row: 1; padding-left: 12px; }
  main { padding: 12px; }
  .schedule-view-options { width: 100%; }
  .schedule-filters { align-items: stretch; flex-wrap: wrap; }
  .schedule-view-switch, .schedule-filter-controls { width: 100%; }
  .schedule-filter-controls { margin-left: 0; justify-content: stretch; }
  .schedule-filter-controls > label, .schedule-filters .filter-multi { width: 100%; }
  .schedule-filter-controls > label input, .schedule-filters .filter-multi > details > summary { width: 100%; }
  .schedule-filters .filter-multi .options { position: static; width: 100%; margin-top: 4px; box-shadow: none; }
}

@media (max-width: 600px) {
  .topbar nav { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .search.big { flex-direction: column; }
  .search.big input { flex: none; width: 100%; }
  .search.big button { width: 100%; }
  .schedule-period-nav {
    grid-template-columns: var(--control-h) minmax(0, 210px) var(--control-h);
    gap: 8px; padding-inline: 0;
  }
  .schedule-period-current { height: 40px; }
  .schedule-period-current .schedule-period-label { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-event, .schedule-month-day { scroll-behavior: auto; }
  .schedule-event-tooltip { transition: none; }
}

/* Quoted history uses <details>, so it behaves sensibly even before this
   stylesheet loads—new message content itself is never collapsed. */
.quoted > summary {
  display: inline-block; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 8px; line-height: 18px; background: var(--bg); margin-top: 4px;
}
.quoted > summary::-webkit-details-marker { display: none; }
.quoted[open] > summary::after { content: ' — hide'; }

.quote-body { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line); color: var(--muted); font-size: 13px; }

/* Plain-text bodies keep their line breaks; HTML bodies carry their own layout. */
.plain { white-space: pre-wrap; overflow-wrap: anywhere; }