/* ============================================================
   Team messages, as drawn (session 384, mh-team-messages-mockups-v1: Main, Send, Shoutouts, Settings, Dashboard-Moved). The brief: "The
   inline styles are the specification, not a reference picture." Every value below is the drawings' own (sizes, weights, colours, radii,
   paddings, gaps, shadows). Every rule sits under one wrapper, .txm, and every class carries the tx- prefix, so nothing else in the Hub
   changes. The drawings' top bar, stripe and left column were context only: the Hub keeps its own.
   ============================================================ */

body:has(#page > .txm){ background:#f2f4f5 }
.txm{ font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:#16181a; font-size:14px; line-height:1.45; font-weight:450; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; gap:22px; min-width:0; margin:-10px auto -8px }
.txm.tx-w1180{ max-width:1180px }
.txm.tx-w1120{ max-width:1120px }
.txm *{ box-sizing:border-box }
.txm a{ color:#1d6e77; text-decoration:none }
.txm a:hover{ color:#144d54; text-decoration:underline }
.txm button{ font:inherit; cursor:pointer }
.txm button, .txm input, .txm select, .txm textarea{ line-height:normal; letter-spacing:normal }
.txm :focus-visible{ outline:3px solid #6fd5d4; outline-offset:2px }
.txm .tx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* the page title and its line */
.txm .tx-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap }
.txm .tx-tt{ display:flex; flex-direction:column; gap:6px }
.txm .tx-h1{ margin:0; font-size:clamp(28px, 4vw, 40px); font-weight:800; letter-spacing:-0.035em; line-height:1.02; color:#16181a }
.txm .tx-lead{ margin:0; font-size:15px; color:#4d545a }
.txm .tx-fresh{ margin:0; font-size:11.5px; color:#6b747b }
.txm .tx-back{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; align-self:flex-start }
.txm .tx-acts{ display:flex; gap:10px; flex-wrap:wrap }
.txm .tx-tabs{ display:flex; gap:4px; flex-wrap:wrap }
.txm .tx-tab{ padding:8px 14px; border-radius:999px; font-weight:600; font-size:13.5px; color:#4d545a; background:transparent; border:0; min-height:36px }
.txm .tx-tab:hover{ background:#e9ecee; text-decoration:none; color:#4d545a }
.txm .tx-tab.tx-on{ background:#144d54; color:#ffffff }

/* the one yellow button on each screen, and the grey ones */
.txm .tx-y{ font-weight:700; font-size:14px; color:#16181a !important; background:linear-gradient(180deg, #ffd13a, #f5c21c); border:0; border-radius:10px; padding:12px 18px;
  box-shadow:0 6px 16px 0 rgba(217,106,24,0.28); display:inline-flex; align-items:center; gap:8px; text-decoration:none !important }
.txm .tx-y:hover{ filter:brightness(1.03); box-shadow:0 8px 20px rgba(217,106,24,.34) }
.txm .tx-y:disabled{ opacity:.55; cursor:default; filter:none }
.txm .tx-g{ font-weight:700; font-size:14px; color:#144d54; background:#e9ecee; border:0; border-radius:10px; padding:12px 16px; display:inline-flex; align-items:center; gap:8px; text-decoration:none !important }
.txm .tx-g:hover{ background:#dfe3e6 }
.txm .tx-g:disabled{ opacity:.55; cursor:default }
.txm .tx-g.tx-sm, .txm .tx-y.tx-sm{ padding:11px 16px }
.txm .tx-link{ font-size:13px; font-weight:700; color:#1d6e77; background:none; border:0; padding:0; text-decoration:none }
.txm .tx-link:hover{ color:#144d54; text-decoration:underline }
.txm .tx-link:disabled{ color:#9aa4ab; cursor:default; text-decoration:none }

/* the orange banner */
.txm .tx-banner{ display:flex; align-items:center; gap:12px; background:#ffe8d6; color:#9a4a0e; border-radius:14px; padding:14px 18px; text-decoration:none }
.txm .tx-banner:hover{ text-decoration:none; color:#9a4a0e; filter:brightness(.99) }
.txm .tx-banner span:first-of-type{ flex-grow:1; font-size:14px; font-weight:600 }
.txm .tx-banner b{ font-size:13px; font-weight:700; white-space:nowrap; text-decoration:underline }

/* the 12-column grid; stat tiles span 3, hero and lead cards span 6 */
.txm .tx-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:22px }
.txm .tx-s6{ grid-column:span 6 } .txm .tx-s3{ grid-column:span 3 } .txm .tx-s12{ grid-column:span 12 }
@media (max-width:1180px){ .txm .tx-s3{ grid-column:span 6 } .txm .tx-s6{ grid-column:span 12 } }
@media (max-width:760px){ .txm .tx-s3{ grid-column:span 12 } }

/* the dark hero */
.txm .tx-hero{ background:linear-gradient(135deg, #144d54, #0e363b); color:#ffffff; border-radius:18px; box-shadow:0 10px 30px 0 rgba(14,54,59,0.22); padding:24px;
  display:flex; flex-direction:column; gap:18px }
.txm .tx-hk{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.txm .tx-hk > span:first-child{ font-size:12.5px; font-weight:600; color:#6fd5d4 }
.txm .tx-hk > span:last-child{ font-size:11.5px; color:rgba(255,255,255,0.75) }
.txm .tx-hbig{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.txm .tx-hn{ font-size:64px; font-weight:800; letter-spacing:-0.04em; line-height:0.9 }
.txm .tx-hof{ font-size:24px; font-weight:700; color:rgba(255,255,255,0.8) }
.txm .tx-hw{ font-size:15px; font-weight:600; margin-left:6px }
.txm .tx-bar{ display:flex; height:12px; border-radius:999px; overflow:hidden; gap:3px; background:rgba(255,255,255,0.10) }
.txm .tx-bar > div{ min-width:0 }
.txm .tx-hc{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px }
.txm .tx-hc > div{ display:flex; flex-direction:column; gap:2px }
.txm .tx-hc b{ font-size:24px; font-weight:800 }
.txm .tx-hc span{ font-size:12.5px; font-weight:600 }
.txm .tx-hfoot{ font-size:13px; color:rgba(255,255,255,0.85); border-top:1px solid rgba(255,255,255,0.18); padding-top:12px }

/* cards, section heads */
.txm .tx-card{ background:#ffffff; border-radius:14px; box-shadow:0 4px 14px 0 rgba(14,54,59,0.08); border:0 }
.txm .tx-pad{ padding:20px 22px; display:flex; flex-direction:column; gap:14px }
.txm .tx-clip{ overflow:hidden }
.txm .tx-ch{ display:flex; align-items:center; gap:12px }
.txm .tx-chp{ padding:18px 22px; flex-wrap:wrap }
.txm .tx-ic{ width:40px; height:40px; border-radius:10px; background:#144d54; color:#ffffff; display:flex; align-items:center; justify-content:center; flex:0 0 40px }
.txm .tx-chw{ display:flex; flex-direction:column; flex-grow:1; min-width:0 }
.txm .tx-h2{ margin:0; font-size:clamp(19px, 2.2vw, 24px); font-weight:700; letter-spacing:-0.025em; color:#16181a }
.txm .tx-h2s{ margin:0; font-size:17px; font-weight:700; letter-spacing:-0.015em; color:#16181a }
.txm .tx-cs{ font-size:13px; color:#4d545a }
.txm .tx-note{ font-size:11.5px; color:#6b747b }
.txm .tx-hint{ font-size:12.5px; color:#6b747b }

/* Coming up rows */
.txm .tx-rows{ display:flex; flex-direction:column }
.txm .tx-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #dfe3e6 }
.txm .tx-ri{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.txm .tx-rw{ display:flex; flex-direction:column; flex-grow:1; min-width:0 }
.txm .tx-rw b{ font-size:15px; font-weight:700 }
.txm .tx-rw span{ font-size:13px; color:#4d545a }
.txm .tx-amber{ background:#fdf0d8; color:#b7791f } .txm .tx-teal{ background:#dceff0; color:#1d6e77 } .txm .tx-orange{ background:#ffe8d6; color:#9a4a0e }
.txm .tx-green{ background:#e2f4ee; color:#2e9c7c } .txm .tx-yellow{ background:#fff5cc; color:#7a5312 } .txm .tx-grey{ background:#e9ecee; color:#4d545a }

/* stat tiles */
.txm .tx-tile{ background:#ffffff; border-radius:14px; box-shadow:0 4px 14px 0 rgba(14,54,59,0.08); padding:18px 20px; display:flex; flex-direction:column; gap:10px }
.txm .tx-tn{ font-size:clamp(28px, 3vw, 36px); font-weight:800; letter-spacing:-0.035em; line-height:1 }
.txm .tx-tn.tx-hot{ color:#d96a18 }
.txm .tx-tl{ font-size:12.5px; font-weight:600; color:#4d545a }
.txm .tx-tile a, .txm .tx-tile .tx-note{ font-size:11.5px }
.txm .tx-tile a{ font-weight:600 }

/* tables: header #e9ecee, 12.5px 600; rows 14px 22px, hairline #dfe3e6 */
.txm .tx-tw{ overflow-x:auto }
.txm table.tx-t{ width:100%; border-collapse:collapse; border-spacing:0; table-layout:auto }
.txm .tx-t th{ background:#e9ecee; text-align:left; padding:10px 12px; font-size:12.5px; font-weight:600; color:#4d545a; text-transform:none; letter-spacing:normal; position:static;
  box-shadow:none; white-space:nowrap; line-height:1.45; cursor:default; user-select:auto; border:0 }
.txm .tx-t td{ padding:14px 12px; border-top:1px solid #dfe3e6; border-bottom:0; vertical-align:middle; white-space:normal; overflow:visible; text-overflow:clip; max-width:none; font-size:14px; line-height:1.45 }
.txm .tx-t th:first-child, .txm .tx-t td:first-child{ padding-left:22px }
.txm .tx-t th:last-child, .txm .tx-t td:last-child{ padding-right:22px }
.txm .tx-t .tx-r{ text-align:right; white-space:nowrap }
.txm .tx-t tr.tx-warm td{ background:#fffaf3 }
.txm .tx-who{ display:flex; flex-direction:column; gap:2px }
.txm .tx-who b{ font-size:15px; font-weight:700 }
.txm .tx-who span{ font-size:13px; color:#6b747b }
.txm .tx-t .tx-last{ font-size:13px; color:#4d545a }
.txm .tx-t .tx-r a, .txm .tx-t .tx-r button{ margin-left:14px }
.txm .tx-t .tx-r a:first-child, .txm .tx-t .tx-r button:first-child{ margin-left:0 }
.txm .tx-min760{ min-width:760px } .txm .tx-min860{ min-width:860px }

/* pills: 12.5px 600, radius 999 */
.txm .tx-pill{ display:inline-block; font-size:12.5px; font-weight:600; border-radius:999px; padding:4px 10px; white-space:nowrap }
.txm .tx-p-orange{ background:#ffe8d6; color:#9a4a0e } .txm .tx-p-amber{ background:#fdf0d8; color:#7a5312 } .txm .tx-p-green{ background:#e2f4ee; color:#08513f }
.txm .tx-p-red{ background:#fbe4e0; color:#8a2617 } .txm .tx-p-grey{ background:#e9ecee; color:#4d545a } .txm .tx-p-teal{ background:#dceff0; color:#144d54 }
.txm .tx-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.txm .tx-chipk{ font-size:12.5px; font-weight:600; color:#4d545a; margin-right:4px }
.txm .tx-foot{ padding:16px 22px 18px; border-top:1px solid #dfe3e6; display:flex; flex-direction:column; gap:12px }
.txm .tx-oneline{ padding:16px 22px; display:flex; align-items:center; gap:10px; font-size:14px; color:#4d545a }

/* the Tomorrow / Today switch */
.txm .tx-seg{ display:flex; background:#e9ecee; border-radius:999px; padding:3px }
.txm .tx-seg button{ font-size:13px; font-weight:600; border:0; border-radius:999px; padding:7px 14px; background:transparent; color:#4d545a }
.txm .tx-seg button:hover{ background:#dfe3e6 }
.txm .tx-seg button.tx-on{ font-weight:700; background:#144d54; color:#ffffff }

/* Send a message */
.txm .tx-two{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start }
.txm .tx-steps{ flex:999 1 520px; min-width:0; padding:24px; display:flex; flex-direction:column; gap:26px }
.txm .tx-aside{ flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:14px }
.txm .tx-step{ display:flex; flex-direction:column; gap:12px }
.txm .tx-sh{ display:flex; align-items:center; gap:10px }
.txm .tx-sn{ width:28px; height:28px; border-radius:999px; background:#144d54; color:#ffffff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 28px }
.txm .tx-opt{ font-size:13px; font-weight:600; border:1px solid #c9d0d4; background:#ffffff; color:#4d545a; border-radius:999px; padding:9px 15px }
.txm .tx-opt:hover{ border-color:#1d6e77 }
.txm .tx-opt[aria-pressed="true"]{ font-weight:700; border:2px solid #144d54; background:#dceff0; color:#144d54; padding:8px 14px }
.txm .tx-opt.tx-dash{ border-style:dashed; color:#1d6e77 }
.txm .tx-kinds{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
.txm .tx-kind{ text-align:left; border:1px solid #dfe3e6; background:#ffffff; border-radius:12px; padding:14px 15px; display:flex; gap:12px; align-items:center }
.txm .tx-kind:hover{ border-color:#1d6e77 }
.txm .tx-kind[aria-pressed="true"]{ border:2px solid #144d54; background:#dceff0; padding:13px 14px }
.txm .tx-kind.tx-wide{ grid-column:span 2; border-style:dashed; border-color:#c9d0d4 }
.txm .tx-kind[aria-pressed="true"].tx-wide{ border-style:solid; border-color:#144d54 }
.txm .tx-ki{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.txm .tx-kind[aria-pressed="true"] .tx-ki{ background:#144d54; color:#ffffff }
.txm .tx-kw{ display:flex; flex-direction:column }
.txm .tx-kw b{ font-size:15px; font-weight:700; color:#16181a }
.txm .tx-kw span{ font-size:12.5px; color:#4d545a }
.txm .tx-hows{ display:flex; flex-wrap:wrap; gap:12px }
.txm .tx-how{ display:flex; align-items:center; gap:10px; border:1px solid #dfe3e6; border-radius:12px; padding:12px 16px; flex:1 1 200px; cursor:pointer }
.txm .tx-how input{ width:18px; height:18px; accent-color:#144d54; margin:0 }
.txm .tx-how b{ font-size:14px; font-weight:700; display:block }
.txm .tx-how span{ font-size:12.5px; color:#6b747b }
.txm .tx-how.tx-off{ opacity:.55; cursor:default }
.txm .tx-when{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.txm .tx-when label{ display:flex; align-items:center; gap:8px; font-size:13px; color:#4d545a }
.txm .tx-time{ font:inherit; border:1px solid #c9d0d4; border-radius:6px; padding:6px 8px; width:96px }
.txm .tx-send{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; border-top:1px solid #dfe3e6; padding-top:20px; align-items:center }
.txm .tx-picks{ display:flex; flex-wrap:wrap; gap:6px 14px; max-height:240px; overflow:auto; border:1px solid #dfe3e6; border-radius:12px; padding:12px 14px }
.txm .tx-picks label{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#16181a; min-width:200px; cursor:pointer }
.txm .tx-picks input{ width:16px; height:16px; accent-color:#144d54; margin:0 }
.txm .tx-picks .tx-x{ font-size:12px; color:#6b747b }
.txm .tx-field{ display:flex; flex-direction:column; gap:6px }
.txm .tx-field > span{ font-size:12.5px; font-weight:600; color:#4d545a }
.txm .tx-area, .txm .tx-input{ font:inherit; font-size:14px; border:1px solid #c9d0d4; border-radius:10px; padding:10px 12px; width:100%; background:#ffffff; color:#16181a; resize:vertical }
.txm .tx-area:focus, .txm .tx-input:focus{ border-color:#1d6e77; outline:0; box-shadow:0 0 0 3px rgba(111,213,212,.45) }
.txm .tx-err{ font-size:13px; color:#8a2617 }
.txm .tx-okm{ font-size:13px; color:#08513f; font-weight:600 }
/* what she'll see */
.txm .tx-see{ padding:20px; display:flex; flex-direction:column; gap:14px }
.txm .tx-page{ display:flex; align-items:center; gap:6px }
.txm .tx-pg{ width:32px; height:32px; border-radius:8px; border:1px solid #c9d0d4; background:#ffffff; color:#4d545a; display:flex; align-items:center; justify-content:center; padding:0 }
.txm .tx-pg:hover{ border-color:#1d6e77 }
.txm .tx-pg:disabled{ opacity:.45; cursor:default }
.txm .tx-pgn{ font-size:12.5px; font-weight:600; color:#4d545a }
.txm .tx-av{ width:36px; height:36px; border-radius:999px; background:#dceff0; color:#144d54; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 36px }
.txm .tx-bubble{ background:#e9ecee; border-radius:18px 18px 18px 6px; padding:14px 16px; font-size:14px; line-height:1.5; white-space:pre-line; color:#16181a; overflow-wrap:anywhere }
.txm .tx-en{ background:#fff5cc; border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:6px }
.txm .tx-en b{ font-size:12.5px; font-weight:700; color:#7a5312 }
.txm .tx-en span{ font-size:13px; line-height:1.5; color:#4d545a; white-space:pre-line; overflow-wrap:anywhere }
.txm .tx-pushk{ display:flex; flex-direction:column; gap:8px; border-top:1px solid #dfe3e6; padding-top:12px }
.txm .tx-pushk > span{ font-size:12.5px; font-weight:600; color:#4d545a }
.txm .tx-push{ display:flex; gap:10px; align-items:flex-start; background:#f2f4f5; border-radius:12px; padding:10px 12px }
.txm .tx-pm{ width:28px; height:28px; border-radius:7px; background:#144d54; color:#ffd13a; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.txm .tx-push b{ font-size:13px; font-weight:700; display:block }
.txm .tx-push span{ font-size:13px; color:#4d545a }
.txm .tx-checks{ padding:18px 20px; display:flex; flex-direction:column; gap:10px }
.txm .tx-check{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#16181a }
.txm .tx-check i{ width:20px; height:20px; border-radius:999px; flex:0 0 20px; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; font-weight:800 }
.txm .tx-check i.tx-okc{ background:#e2f4ee; color:#08513f } .txm .tx-check i.tx-warnc{ background:#fdf0d8; color:#7a5312 }

/* Shout-outs */
.txm .tx-shero{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-end }
.txm .tx-chart{ flex:1 1 300px; display:flex; flex-direction:column; gap:8px; min-width:0 }
.txm .tx-bars{ position:relative; height:92px; display:flex; align-items:flex-end; gap:10px; border-bottom:1px solid rgba(255,255,255,0.25); padding-top:6px }
.txm .tx-bw{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px }
.txm .tx-bw > div{ width:100%; border-radius:4px 4px 0 0 }
.txm .tx-goal{ position:absolute; left:0; right:0; border-top:2px dashed #ffd13a }
.txm .tx-hero.tx-g16{ gap:16px } .txm .tx-g12{ gap:12px }
.txm .tx-hl{ font-size:12.5px; font-weight:600; color:#6fd5d4 }
.txm .tx-h2c{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; border-top:1px solid rgba(255,255,255,0.18); padding-top:12px }
.txm .tx-h2c div{ display:flex; flex-direction:column; gap:2px } .txm .tx-h2c b{ font-size:24px; font-weight:800 } .txm .tx-h2c span{ font-size:12.5px; font-weight:600; color:#6fd5d4 }
.txm .tx-duechips{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.txm .tx-duechip{ display:flex; align-items:center; gap:10px; background:#ffe8d6; color:#9a4a0e; border:0; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600 }
.txm .tx-duechip b{ font-weight:700; color:#16181a }
.txm .tx-duechip:hover{ filter:brightness(.97) }
.txm .tx-bk{ display:flex; justify-content:space-between; font-size:11.5px; color:rgba(255,255,255,0.75) }
.txm .tx-hstats{ display:flex; gap:28px; flex-wrap:wrap }
.txm .tx-hstats div{ display:flex; flex-direction:column }
.txm .tx-hstats b{ font-size:28px; font-weight:800; letter-spacing:-0.03em }
.txm .tx-hstats span{ font-size:12.5px; font-weight:600; color:#6fd5d4 }
.txm .tx-list{ display:flex; flex-direction:column }
.txm .tx-li{ display:flex; align-items:center; gap:12px; padding:13px 22px; border-top:1px solid #dfe3e6 }
.txm .tx-li .tx-who{ flex-grow:1; min-width:0 }
.txm .tx-due{ font-size:13px; font-weight:700; color:#9a4a0e; white-space:nowrap }

/* Settings > Team messages */
.txm .tx-crumb{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#6b747b; flex-wrap:wrap }
.txm .tx-side{ display:grid; grid-template-columns:220px minmax(0, 1fr); gap:22px; align-items:start }
.txm .tx-snav{ position:sticky; top:84px; padding:10px; display:flex; flex-direction:column; gap:2px }
.txm .tx-snav a{ padding:9px 12px; border-radius:10px; color:#4d545a; font-weight:600; font-size:14px; text-decoration:none }
.txm .tx-snav a:hover{ background:#e9ecee; text-decoration:none; color:#4d545a }
.txm .tx-snav a.tx-on{ background:#dceff0; color:#144d54; font-weight:700 }
.txm .tx-col{ display:flex; flex-direction:column; gap:22px; min-width:0 }
.txm .tx-sec{ padding:20px 22px; display:flex; flex-direction:column; gap:4px; scroll-margin-top:96px }
.txm .tx-sech{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
.txm .tx-rule{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid #dfe3e6; flex-wrap:wrap }
.txm .tx-rule.tx-first{ border-top:0 }
.txm .tx-rule.tx-sub{ padding-left:22px }
.txm .tx-rt{ display:flex; flex-direction:column; gap:3px; flex:1 1 360px; min-width:0 }
.txm .tx-rt b{ font-size:15px; font-weight:700 }
.txm .tx-rt span{ font-size:13px; color:#4d545a }
.txm .tx-sent{ font-size:14.5px; color:#16181a; line-height:2 }
.txm .tx-rv{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.txm .tx-sw{ position:relative; width:46px; height:26px; border-radius:999px; background:#1d6e77; border:0; flex:0 0 46px; padding:0 }
.txm .tx-sw::after{ content:''; position:absolute; right:3px; top:3px; width:20px; height:20px; border-radius:999px; background:#ffffff }
.txm .tx-sw[aria-checked="false"]{ background:#c9d0d4 }
.txm .tx-sw[aria-checked="false"]::after{ right:auto; left:3px }
.txm .tx-sw:disabled{ opacity:.45; cursor:not-allowed }
.txm .tx-segs{ display:inline-flex; background:#e9ecee; border-radius:999px; padding:3px; vertical-align:middle }
.txm .tx-segs button{ font-size:13px; font-weight:600; border:0; border-radius:999px; padding:6px 12px; background:transparent; color:#4d545a }
.txm .tx-segs button.tx-on{ font-weight:700; background:#144d54; color:#ffffff }
.txm .tx-segs button:disabled{ cursor:default }
.txm .tx-days{ display:inline-flex; gap:6px; vertical-align:middle }
.txm .tx-days button{ width:32px; height:32px; border-radius:999px; border:1px solid #c9d0d4; background:#ffffff; color:#4d545a; font-size:13px; font-weight:700; padding:0 }
.txm .tx-days button.tx-on{ background:#144d54; border-color:#144d54; color:#ffffff }
.txm .tx-in{ font:inherit; font-size:14px; font-weight:700; color:#144d54; border:1px solid #c9d0d4; border-radius:8px; padding:5px 8px; width:64px; text-align:center; background:#ffffff; vertical-align:middle }
.txm .tx-in.tx-tm{ width:104px }
.txm .tx-in.tx-wide{ width:180px; text-align:left }
.txm .tx-in:focus{ border-color:#1d6e77; outline:0; box-shadow:0 0 0 3px rgba(111,213,212,.45) }
.txm .tx-sel{ font:inherit; font-size:14px; font-weight:700; color:#144d54; border:1px solid #c9d0d4; border-radius:8px; padding:5px 8px; background:#ffffff; vertical-align:middle }
.txm .tx-lock{ font-size:12px; font-weight:600; color:#6b747b; display:inline-flex; align-items:center; gap:4px }
.txm .tx-need{ font-size:11.5px; font-weight:700; background:#e9ecee; color:#4d545a; border-radius:999px; padding:2px 8px; white-space:nowrap }
.txm .tx-shows{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.txm .tx-scr{ font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; background:#dceff0; color:#144d54; text-decoration:none }
.txm .tx-savebar{ position:sticky; bottom:12px; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:#ffffff;
  border-radius:14px; box-shadow:0 10px 30px rgba(14,54,59,.22); padding:12px 16px }
.txm .tx-wtabs{ display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 10px }
.txm .tx-wtabs button{ font-size:13px; font-weight:600; border:0; background:#e9ecee; color:#4d545a; border-radius:999px; padding:8px 14px }
.txm .tx-wtabs button.tx-on{ font-weight:700; background:#144d54; color:#ffffff }
.txm .tx-word{ display:flex; flex-wrap:wrap; gap:16px; padding:0 }
.txm .tx-word + .tx-word{ border-top:1px solid #dfe3e6; padding-top:16px }
.txm .tx-word .tx-wk, .txm .tx-word .tx-fill{ flex:1 1 100% }
.txm .tx-wk{ grid-column:1 / -1; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center }
.txm .tx-wk b{ font-size:15px; font-weight:700 }
.txm .tx-fill{ display:flex; gap:6px; flex-wrap:wrap }
.txm .tx-fill span{ font-size:12px; font-weight:600; background:#e9ecee; color:#4d545a; border-radius:999px; padding:2px 8px }
.txm .tx-wl{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#4d545a }
.txm .tx-wbox{ font:inherit; font-size:14px; line-height:1.5; border:1px solid #c9d0d4; border-radius:10px; padding:12px 14px; width:100%; resize:vertical; color:#16181a; background:#ffffff; white-space:pre-wrap }
.txm .tx-wbox[readonly]{ background:#f8fafa; color:#4d545a }

/* Settings, as the Settings board draws it */
.txm .tx-savebar[hidden]{ display:none }
.txm .tx-crumbk{ font-size:13px; font-weight:600; color:#6b747b }
.txm .tx-secnav{ display:flex; flex-wrap:wrap; gap:8px }
.txm .tx-secnav a{ background:#e9ecee; color:#4d545a; font-size:13px; font-weight:600; border-radius:999px; padding:8px 14px; text-decoration:none }
.txm .tx-secnav a:hover{ background:#dfe3e6; text-decoration:none; color:#4d545a }
.txm .tx-secnav a.tx-on{ background:#144d54; color:#ffffff; font-weight:700 }
.txm .tx-sec2{ scroll-margin-top:96px }
.txm .tx-blk{ border-top:1px solid #dfe3e6; padding:16px 22px; display:flex; flex-direction:column; gap:12px }
.txm .tx-blkoff{ background:#f2f4f5 }
.txm .tx-blkoff .tx-rt b{ color:#4d545a } .txm .tx-blkoff .tx-rt span{ color:#6b747b }
.txm .tx-bh{ display:flex; gap:16px; align-items:flex-start }
.txm .tx-bh .tx-rt{ flex-grow:1; display:flex; flex-direction:column; gap:2px }
.txm .tx-bh .tx-rt b{ font-size:16px; font-weight:700 }
.txm .tx-onoff{ display:flex; align-items:center; gap:8px }
.txm .tx-onw{ font-size:12.5px; font-weight:600; color:#08513f } .txm .tx-offw{ font-size:12.5px; font-weight:600; color:#6b747b }
.txm .tx-frow{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center }
.txm .tx-fld{ display:flex; align-items:center; gap:8px; font-size:13px; color:#4d545a; flex-wrap:wrap }
.txm .tx-ctl{ font:inherit; font-size:13px; font-weight:600; color:#16181a; border:1px solid #c9d0d4; border-radius:6px; padding:6px 8px; background:#ffffff }
/* the Hub's own form rule (tokens.css) makes every input and select full width and 38px high; the drawings' controls size to their content */
.txm .tx-ctl, .txm .tx-time, .txm .tx-in, .txm .tx-plan, .txm .tx-sel{ width:auto; height:auto; min-height:0; margin:0 }
.txm select.tx-ctl, .txm select.tx-plan{ padding-right:30px; background-position:right 10px center }
.txm .tx-ctl:focus{ border-color:#1d6e77; outline:0; box-shadow:0 0 0 3px rgba(111,213,212,.45) }
.txm .tx-ctln{ width:56px; text-align:center }
.txm .tx-day{ font-size:12.5px; font-weight:700; width:32px; height:32px; border-radius:999px; border:0; background:#144d54; color:#ffffff; padding:0 }
.txm .tx-day.tx-dayoff{ font-weight:600; border:1px solid #c9d0d4; background:#ffffff; color:#6b747b }
.txm .tx-chk{ display:flex; align-items:center; gap:8px; font-size:14px; color:#16181a; flex-wrap:wrap }
.txm .tx-chk input[type=checkbox], .txm .tx-chk input[type=radio], .txm .tx-cb{ width:18px; height:18px; accent-color:#144d54; margin:0 }
.txm .tx-inset{ background:#f2f4f5; border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:10px }
.txm .tx-inset > b{ font-size:13px; font-weight:700; color:#4d545a }
.txm .tx-wcol{ flex:1 1 360px; display:flex; flex-direction:column; gap:8px; min-width:0 }
.txm .tx-wacts{ display:flex; gap:14px }

/* the Dashboard's part: Changed overnight, No cleaner yet today */
.txm.tx-dash{ margin:0 0 18px; gap:18px }
.txm .tx-item{ border-top:1px solid #dfe3e6; padding:18px 22px 20px; display:flex; flex-direction:column; gap:14px }
.txm .tx-item.tx-hotb{ background:#fffaf3 }
.txm .tx-itop{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap }
.txm .tx-iic{ width:48px; height:48px; border-radius:10px; background:#ffe8d6; color:#9a4a0e; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.txm .tx-iw{ flex:999 1 320px; display:flex; flex-direction:column; gap:6px; min-width:0 }
.txm .tx-iw > b{ font-size:17px; font-weight:700 }
.txm .tx-iw > span{ font-size:14px; color:#4d545a }
.txm .tx-promise{ display:inline-flex; align-self:flex-start; align-items:center; gap:6px; background:#fdf0d8; color:#7a5312; font-size:12.5px; font-weight:600; border-radius:999px; padding:4px 10px }
.txm .tx-ibtn{ display:flex; gap:10px; flex-wrap:wrap; padding-left:62px }
.txm .tx-ilinks{ flex:1 1 200px; display:flex; gap:14px; justify-content:flex-end; align-items:center; padding-top:4px }
.txm .tx-open{ margin-left:62px; background:#ffffff; border-radius:12px; box-shadow:0 4px 14px 0 rgba(14,54,59,0.08); overflow:hidden }
.txm .tx-oh{ padding:12px 16px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; background:#e9ecee; font-size:12.5px }
.txm .tx-oh span:first-child{ font-weight:600; color:#4d545a } .txm .tx-oh span:last-child{ color:#6b747b }
.txm .tx-orow{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid #dfe3e6; flex-wrap:wrap }
.txm .tx-orow > div{ flex-grow:1; display:flex; flex-direction:column; min-width:200px }
.txm .tx-orow b{ font-size:15px; font-weight:700 } .txm .tx-orow span{ font-size:13px; color:#6b747b }
.txm .tx-ofoot{ padding:10px 16px 12px; border-top:1px solid #dfe3e6; font-size:12.5px; color:#6b747b }
.txm .tx-plan{ font:inherit; font-size:13px; font-weight:700; border:0; border-radius:999px; padding:6px 10px }
.txm .tx-plan.tx-fill{ color:#9a4a0e; background-color:#ffe8d6 } .txm .tx-plan.tx-slide{ color:#08513f; background-color:#e2f4ee } .txm .tx-plan.tx-wait{ color:#7a5312; background-color:#fdf0d8 }
.txm .tx-guest{ font-size:14px; color:#4d545a } .txm .tx-guest.tx-today{ font-weight:700; color:#9a4a0e }
.txm .tx-noteedit{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.txm .tx-noteedit .tx-input{ width:260px; max-width:100%; padding:7px 10px; font-size:13px }
.txm .tx-decided{ font-size:13px; color:#08513f; font-weight:600 }
/* Session 392: what she was told (rule 6) and the evidence under each home (rule 7) */
.txm .tx-told{ font-size:13px; font-weight:600; color:#08513f }
.txm .tx-told.tx-told-no{ color:#9a4a0e }
.txm .tx-ev{ display:flex; flex-direction:column; gap:2px; background:#f4f6f7; border-radius:8px; padding:8px 10px; font-size:12.5px; color:#4d545a }
.txm .tx-ev b{ color:#1f2529; font-weight:700 }
.txm .tx-ev a{ align-self:flex-start; font-weight:700; color:#1d6e77; text-decoration:underline }
.txm .tx-ev a:hover{ color:#144d54 }
.txm .tx-ev a:focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }

/* Staff page and appointment page pieces */
.txm.tx-inline{ margin:0; gap:14px }

/* a phone: 16px gutters, nothing sideways */
@media (max-width:760px){
  .txm .tx-side{ grid-template-columns:minmax(0, 1fr) }
  .txm .tx-snav{ position:static; flex-direction:row; flex-wrap:wrap }
  .txm .tx-kinds{ grid-template-columns:minmax(0, 1fr) }
  .txm .tx-kind.tx-wide{ grid-column:auto }
  .txm .tx-hc{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .txm .tx-ibtn{ padding-left:0 } .txm .tx-open{ margin-left:0 }
  .txm .tx-word{ grid-template-columns:minmax(0, 1fr) }
  .txm .tx-hn{ font-size:52px }
}
/* Session 387: Good morning by first home, and follow-ups as minutes after: rules written as sentences with their controls inside */
.txm .tx-rlines{ display:flex; flex-direction:column; gap:10px }
.txm .tx-rline{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:14px; color:#16181a; line-height:1.5 }
.txm .tx-at{ font-size:13px; color:#6b747b; font-weight:500 }
.txm .tx-rw .tx-mt{ font-size:13px; font-weight:700; color:#16181a }
/* Session 388: phone notifications. The Notifications on tile with who isn't, the sign-up section, the office's help card. */
.txm .tx-ntt{ display:flex; align-items:center; gap:16px; padding:18px 22px; flex-wrap:wrap }
.txm .tx-ntw{ display:flex; flex-direction:column; gap:6px; flex:1 1 260px; min-width:0 }
.txm .tx-nt .tx-note{ font-size:12.5px; color:#6b747b }
.txm .tx-nt .tx-who span{ white-space:normal }
.txm .tx-ntst{ font-size:14px; color:#16181a }
.txm .tx-pre{ white-space:pre-wrap; font-size:13.5px; color:#16181a; background:#ffffff; border-radius:10px; padding:10px 12px; line-height:1.5; overflow-wrap:anywhere }
.txm .tx-ntsend{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.txm .tx-help2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px }
.txm .tx-helpc{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.txm .tx-helpc > b{ font-size:15px; font-weight:700 }
.txm .tx-steps1{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.5; color:#16181a }
.txm .tx-seg button:focus-visible, .txm .tx-link:focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }
@media (max-width:760px){
  .txm .tx-help2{ grid-template-columns:minmax(0, 1fr) }
  .txm .tx-ntt{ padding:16px }
}

/* Session 413 (briefs/session-413-brief.md A2): Nudge the ones still missing, under the availability count on Home. The words in English, then the
   buttons and their one confirm. */
.txm .tx-avfoot{ display:flex; flex-direction:column; gap:14px; padding:16px 22px 20px; border-top:1px solid #dfe3e6 }
.txm .tx-avw{ display:flex; flex-direction:column; gap:8px }
.txm .tx-avbox{ display:flex; flex-direction:column; gap:3px; background:#f4f6f7; border-radius:10px; padding:12px 14px; font-size:14px; color:#16181a; max-width:640px }
.txm .tx-avk{ font-size:12px; font-weight:600; color:#6b747b }
.txm .tx-avtext{ white-space:pre-line; color:#2b3136 }
.txm .tx-avacts{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.txm .tx-avacts b{ font-size:14px; color:#16181a }
@media (max-width:760px){ .txm .tx-avfoot{ padding:14px 16px 16px } }