/* Sonigo Project Manager UI. Tokens, type scale and base styles come from bobby-crm (public/assets/app.css)
   so both Sonigo tools look the same. Two themes, light and dark; Poppins throughout. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #f0f1f4;
  --border: #e5e7ec;
  --border-strong: #d7dae1;
  --text: #252533;
  --text-2: #565b6b;
  --text-3: #6b7080;
  --primary: #252533;
  --primary-ink: #ffffff;
  --primary-hover: #34344a;
  --accent: #FF7300;
  --accent-ink: #b45200;
  --accent-soft: #fff4ea;
  --accent-line: #ffd9b8;
  --focus: #FF7300;
  --active: #eef0f4;
  --bubble-out: #eef0f4;

  --ok: #2f7a57; --ok-soft: #eef7f1; --ok-line: #d6ebdd;
  --info: #3c6a99; --info-soft: #eef4fa; --info-line: #d8e5f2;
  --warn: #93661c; --warn-soft: #fcf6e9; --warn-line: #f0e4c8;
  --danger: #b04138; --danger-soft: #fcefed; --danger-line: #f3d8d4;
  --neutral: #616676; --neutral-soft: #f3f4f6; --neutral-line: #e4e6ea;

  --chart-income: #E0700F;
  --chart-expenses: #498BCA;
  --chart-grid: #edeef2;

  --shadow-sm: 0 1px 2px rgba(37, 37, 51, .03);
  --shadow-md: 0 8px 30px rgba(37, 37, 51, .08);
  --shadow-lg: -15px 0 80px rgba(37, 37, 51, .12);
  --backdrop: rgba(37, 37, 51, .25);

  /* Type scale: every font size in the app is one of these. Nothing goes below 11px, and 11px is
     only for uppercase labels and counts. The sizes are the ones where Poppins draws whole letter tops on a
     standard (1x) screen: the text baseline lands on a whole pixel, so the size decides where the top of the
     capitals and of the lowercase falls. Measured in Chrome for weights 400-700 (strength of the top pixel row,
     1.0 = solid): 12px 0.44-0.53, 13px 0.16-0.20 at 500/600, 16px 0.27-0.32, 20px 0.11-0.24, all of which look
     shaved; 12.5, 14, 17 and 21px are solid. Second lines are 14px like body text and stay lighter and greyer. */
  --fs-2xs: 12.5px;    /* uppercase labels, table headers, counts */
  --fs-xs: 12.5px;   /* timestamps, hints, badges */
  --fs-sm: 14px;     /* second lines, inputs (same size as body; lighter weight or colour) */
  --fs-md: 14px;     /* body, table cells, messages, nav, buttons */
  --fs-lg: 17px;     /* card titles */
  --fs-xl: 21px;     /* section titles */
  --fs-2xl: 24px;    /* stat values (figures) */
  --fs-3xl: 28px;    /* page titles */
  /* Poppins sits about 1 px high in its line box (measured in Chrome at 1x and 2x: 10 px above the capitals and 12 px
     below the baseline in a 34 px button), which reads as text cut off at the top. Every boxed control (buttons,
     badges, chips, tabs, menu rows, sidebar links, date fields) has 1 px more padding on top than below, so the
     text sits in the middle and the control keeps its height. Keep that when adding one. Selects and text inputs
     keep even padding: the browser already centres their text.
     Buttons and the other clickable chips use 14 px, not 13 px: at 13 px Poppins' capitals are 9.24 px tall, so on a
     standard (1x) screen their top row draws at a quarter strength and the top of T, E or B looks cut off; at 14 px
     both the capitals and the lowercase tops land on whole pixels. */

  color-scheme: light;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414;
    --surface: #1c1c1c;
    --surface-2: #202020;
    --surface-3: #282828;
    --border: #2e2e2e;
    --border-strong: #3b3b3b;
    --text: #f2f2f2;
    --text-2: #b4b4b4;
    --text-3: #8f8f8f;
    --primary: #f2f2f2;
    --primary-ink: #141414;
    --primary-hover: #ffffff;
    --accent-ink: #ffa75a;
    --accent-soft: rgba(255, 115, 0, .12);
    --accent-line: rgba(255, 115, 0, .32);
    --active: #282828;
    --bubble-out: #2a2a2a;
    --ok: #86d1a8; --ok-soft: rgba(122, 212, 163, .1); --ok-line: rgba(122, 212, 163, .22);
    --info: #94bce3; --info-soft: rgba(73, 139, 202, .12); --info-line: rgba(73, 139, 202, .28);
    --warn: #e8c178; --warn-soft: rgba(232, 193, 120, .1); --warn-line: rgba(232, 193, 120, .24);
    --danger: #f19a91; --danger-soft: rgba(241, 154, 145, .1); --danger-line: rgba(241, 154, 145, .25);
    --neutral: #b4b4b4; --neutral-soft: rgba(255, 255, 255, .05); --neutral-line: rgba(255, 255, 255, .1);
    --chart-grid: #2e2e2e;
    --shadow-sm: none;
    --shadow-md: 0 8px 30px rgba(0, 0, 0, .3);
    --shadow-lg: -15px 0 80px rgba(0, 0, 0, .35);
    --backdrop: rgba(0, 0, 0, .6);
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
  }
}

:root[data-theme="dark"] {
  --bg: #141414;
  --surface: #1c1c1c;
  --surface-2: #202020;
  --surface-3: #282828;
  --border: #2e2e2e;
  --border-strong: #3b3b3b;
  --text: #f2f2f2;
  --text-2: #b4b4b4;
  --text-3: #8f8f8f;
  --primary: #f2f2f2;
  --primary-ink: #141414;
  --primary-hover: #ffffff;
  --accent-ink: #ffa75a;
  --accent-soft: rgba(255, 115, 0, .12);
  --accent-line: rgba(255, 115, 0, .32);
  --active: #282828;
  --bubble-out: #2a2a2a;
  --ok: #86d1a8; --ok-soft: rgba(122, 212, 163, .1); --ok-line: rgba(122, 212, 163, .22);
  --info: #94bce3; --info-soft: rgba(73, 139, 202, .12); --info-line: rgba(73, 139, 202, .28);
  --warn: #e8c178; --warn-soft: rgba(232, 193, 120, .1); --warn-line: rgba(232, 193, 120, .24);
  --danger: #f19a91; --danger-soft: rgba(241, 154, 145, .1); --danger-line: rgba(241, 154, 145, .25);
  --neutral: #b4b4b4; --neutral-soft: rgba(255, 255, 255, .05); --neutral-line: rgba(255, 255, 255, .1);
  --chart-grid: #2e2e2e;
  --shadow-sm: none;
  --shadow-md: 0 8px 30px rgba(0, 0, 0, .3);
  --shadow-lg: -15px 0 80px rgba(0, 0, 0, .35);
  --backdrop: rgba(0, 0, 0, .6);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.2px; }
p { margin: 0; }
svg.i { width: 18px; height: 18px; display: block; flex: none; stroke: currentColor; stroke-width: 1.65; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.muted { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- App shell ---------- */
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar { width: 256px; flex: none; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; padding: 26px 22px 22px 26px; }
.brand-word { font-weight: 700; font-size: 21px; letter-spacing: -.7px; line-height: 1; color: var(--text); }
.brand-word span { color: var(--accent); }
.nav { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px 20px; }
.nav-group { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-2xs); letter-spacing: 1.4px; font-weight: 600; color: var(--text-3); padding: 18px 12px 9px; text-transform: uppercase; }
.nav-group button { border: 0; background: none; color: var(--text-3); padding: 2px; border-radius: 5px; letter-spacing: 0; }
.nav-group button:hover { color: var(--text); background: var(--surface-3); }
.nav-group button svg.i { width: 15px; height: 15px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 8px 12px 7px; white-space: nowrap; border-radius: 8px; font-size: var(--fs-md); font-weight: 500; color: var(--text-2); margin-bottom: 2px; }
.nav a svg.i { width: 17px; height: 17px; }
.nav a:hover { background: var(--surface-3); color: var(--text); }
.nav a.active { background: var(--active); color: var(--text); font-weight: 600; }
.nav a .name { overflow: hidden; text-overflow: ellipsis; }
.nav .count { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; min-width: 20px; padding: 2px 7px 0; border-radius: 5px; text-align: center; background: var(--surface-3); color: var(--text-2); }
.nav a.active .count { background: var(--surface); }
.nav .count.hot { background: var(--danger-soft); color: var(--danger); }
.sidebar-foot { border-top: 1px solid var(--border); padding: 14px 22px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-3); }
.sidebar-foot .btn { margin-left: auto; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 66px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 32px; border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar .menu-btn { display: none; }
.topbar .crumb { font-size: var(--fs-sm); color: var(--text-3); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.content { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.6px; }
.page-head .sub { color: var(--text-3); font-weight: 400; margin-top: 4px; }
.page-head .who { display: flex; align-items: center; gap: 16px; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; padding: 8px 14px 7px; font-size: var(--fs-md); font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); white-space: nowrap; line-height: 1.5; }
.btn svg.i { width: 14px; height: 14px; }
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.sm { padding: 5px 10px 4px; border-radius: 6px; }
.btn.icon { padding: 7px; }
.select, .input, .textarea { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 7px; padding: 7px 10px; font-size: var(--fs-sm); color: var(--text); min-width: 0; }
.input, .textarea { width: 100%; padding: 9px 12px; font-size: var(--fs-md); }
.textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--text-3); box-shadow: 0 0 0 3px var(--surface-3); }
.field { display: grid; gap: 6px; }
.field > span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; padding: 2px; background: var(--surface); }
.segmented button { border: 0; background: none; padding: 5px 12px 4px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.segmented button.on { background: var(--active); color: var(--text); font-weight: 600; }

/* ---------- Cards, badges, avatars ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-sm); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px 0; flex-wrap: wrap; }
.card-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.card-head .sub { font-size: var(--fs-sm); color: var(--text-3); font-weight: 400; }
.card-body { padding: 16px 22px 20px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 2px; border-radius: 5px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; line-height: 1.5; border: 1px solid var(--neutral-line); background: var(--neutral-soft); color: var(--neutral); }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.badge.info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge.danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.badge.accent { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.badge.dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; flex: none; letter-spacing: .3px; background: var(--surface-3); color: var(--text-2); }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.avatar.lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
.avatar.c0 { background: #f6ece2; color: #805334; }
.avatar.c1 { background: #e6ecf6; color: #405c83; }
.avatar.c2 { background: #e5f1ea; color: #38694f; }
.avatar.c3 { background: #ebe9f5; color: #554d86; }
.avatar.c4 { background: #f2ebe6; color: #74523f; }
.avatar.c5 { background: #e4eff4; color: #345f75; }
:root[data-theme="dark"] .avatar[class*=" c"] { background: var(--surface-3); color: var(--text-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar[class*=" c"] { background: var(--surface-3); color: var(--text-2); } }
.bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.bar.ok > i { background: var(--ok); }
.empty { padding: 28px 22px; text-align: center; color: var(--text-3); font-weight: 400; }

/* ---------- Dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { padding: 16px 18px; }
.stat .label { font-size: var(--fs-2xs); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--text-3); }
.stat .value { font-size: var(--fs-2xl); font-weight: 600; margin-top: 6px; letter-spacing: -.4px; }
.stat .value.danger { color: var(--danger); }
.stat .value.warn { color: var(--warn); }
.stat .hint { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-col { display: grid; gap: 18px; min-width: 0; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 16px 22px 22px; }
.member-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: grid; gap: 12px; background: var(--surface-2); transition: border-color .15s; }
.member-card:hover { border-color: var(--border-strong); }
.member-card .top { display: flex; align-items: center; gap: 12px; }
.member-card .top strong { display: block; font-weight: 600; }
.member-card .top span { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.member-card .pct { margin-left: auto; font-size: var(--fs-lg); font-weight: 600; }
.member-card .counts { display: flex; gap: 6px; flex-wrap: wrap; }
.member-card .focus { font-size: var(--fs-sm); color: var(--text-2); font-weight: 400; border-top: 1px solid var(--border); padding-top: 10px; }
.member-card .focus b { display: block; font-size: var(--fs-2xs); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 4px; }
.member-card .focus div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card .stale { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.member-card .stale.warn { color: var(--warn); }
.proj-list { display: grid; gap: 14px; }
.proj-row .line { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: var(--fs-sm); }
.proj-row .line span { color: var(--text-3); font-weight: 400; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feed li { display: flex; gap: 10px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-2); }
.feed li strong { color: var(--text); font-weight: 600; }
.feed li .when { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.feed li .note { display: block; margin-top: 3px; color: var(--text); background: var(--surface-3); border-radius: 7px; padding: 6px 9px; }
.attention { list-style: none; margin: 0; padding: 0; }
.attention li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.attention li:first-child { border-top: 0; padding-top: 0; }
.attention li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Member tasks ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { flex: 1; min-width: 180px; max-width: 320px; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 12px; min-height: 120px; display: grid; gap: 10px; align-content: start; }
.col.drop { border-color: var(--accent); background: var(--accent-soft); }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; font-size: var(--fs-sm); font-weight: 600; }
.col-head .n { font-size: var(--fs-xs); color: var(--text-3); }
.task { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 12px; display: grid; gap: 8px; cursor: pointer; text-align: left; width: 100%; box-shadow: var(--shadow-sm); }
.task:hover { border-color: var(--border-strong); }
.task.dragging { opacity: .4; }
.task .title { font-weight: 600; line-height: 1.4; }
.task .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.task .meta .due { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.task .meta .due.late { color: var(--danger); font-weight: 600; }
.task .last { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-table { width: 100%; border-collapse: collapse; }
.task-table th { text-align: left; font-size: var(--fs-2xs); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.task-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
.task-table tr:last-child td { border-bottom: 0; }
.task-table tbody tr { cursor: pointer; }
.task-table tbody tr:hover td { background: var(--surface-2); }
.task-table .bar { width: 90px; }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: var(--backdrop); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--surface); border-radius: 13px; box-shadow: var(--shadow-md); width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.modal-body { padding: 18px 22px; display: grid; gap: 14px; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); }
.modal-foot .spacer { flex: 1; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-sm); font-weight: 400; }
.history li { border-left: 2px solid var(--border-strong); padding-left: 10px; }
.history .when { font-size: var(--fs-xs); color: var(--text-3); }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--primary-ink); padding: 10px 16px 9px; border-radius: 8px; font-size: var(--fs-sm); z-index: 60; box-shadow: var(--shadow-md); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .app.nav-open .sidebar { transform: none; }
  .topbar { padding: 0 16px; }
  .topbar .menu-btn { display: inline-flex; }
  .content { padding: 20px 16px 40px; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .task-table .hide-sm { display: none; }
  .page-head h1 { font-size: var(--fs-xl); }
}

/* ---------- Overflow guards ----------
   Grid and flex children default to min-width: auto, so one long unbroken line (a task title kept on one
   line for the ellipsis, a long project name) widens its card past the column. Let them shrink, and let
   long words break instead of running past the border. */
.stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.team-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.member-card, .member-card > *, .member-card .top > div, .col, .task, .proj-row, .feed li > div { min-width: 0; }
.member-card .top strong, .member-card .top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task .title, .feed li, .proj-row .line strong, .page-head h1, .history li, .attention li .t, .task-table td strong { overflow-wrap: anywhere; }
.proj-row .line strong { min-width: 0; }
.proj-row .line span { flex: none; }
.attention li { flex-wrap: wrap; row-gap: 4px; }
.attention li .t { flex: 1 1 200px; white-space: normal; }
.page-head > div, .page-head .who > div { min-width: 0; }