/* Teamak app overrides on top of teamak.css (the mockup v1.4 design system). */
:root { --mbar-h: 0px; --slate: #6A7080; } /* no mockup control bar; brand slate per CLAUDE.md */
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/IBMPlexSansArabic-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/IBMPlexSansArabic-SemiBold.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Teamak Arabic"; src: local("IBM Plex Sans Arabic"), url(fonts/IBMPlexSansArabic-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

.app { min-height: 100vh; }
.side { top: 0; height: 100vh; }
.topbar { top: 0; }
.topbar .lang { font-size: 13px; font-weight: 600; color: var(--slate-2); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.topbar .lang:hover { text-decoration: none; border-color: var(--royal-200); color: var(--royal); }
.side .co .switch select { margin-top: 6px; font-size: 12.5px; padding: 6px 8px; }
.side .foot { display: grid; gap: 8px; padding-top: 10px; }
.side .foot .btn { justify-content: flex-start; }
.demo-flag { font-size: 12px; color: var(--amber); background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: 10px; padding: 8px 10px; }
.demo-flag.offline { color: var(--red); background: var(--red-50); border-color: var(--red-200); }   /* no AI key on the server (journey fixes, 27 Oct) */
.notice { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.notice.ok { background: var(--green-50); color: var(--green); border: 1px solid var(--green-200); }
.notice.err { background: var(--red-50); color: var(--red); border: 1px solid var(--red-200); }
.ask { display: flex; gap: 8px; }
.ask .input { flex: 1; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stack-s { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* one column that never grows past its box (UX18) */
.kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.kv-row:last-child { border-bottom: 0; }
/* a status chip at the end of a row stays a chip — never stretched to the row's height (QA 22 Oct: «Alerts» drawn as a circle) */
.kv-row > .chip { align-self: center; flex: none; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.field-grid label { font-size: 13px; font-weight: 600; display: grid; gap: 4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th, table.t td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.t th { font-size: 12.5px; color: var(--slate); font-weight: 600; background: var(--sunken); white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }

/* Sign-in / sign-up (server-rendered pages) */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 14px; }
.auth-card.wide { max-width: 880px; }
.terms h2 { font-size: 18px; margin: 22px 0 8px; }
.terms li, .terms p { line-height: 1.75; }
.terms .hl { border: 1px solid var(--line); border-inline-start: 4px solid var(--teal, #0f766e); border-radius: 12px; padding: 4px 16px; }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--sh-2); }
.auth-brand { display: flex; justify-content: center; margin-bottom: 20px; }
.auth-brand img { height: 46px; width: auto; display: block; }
/* Teamak logo (assets/brand/build_brand.py): full lockup in the sidebar; the mark alone in the phone top bar. */
.side-logo { display: flex; align-items: center; padding: 6px 8px 14px; flex: none; }
.side .side-logo:hover { background: none; }
.side-logo img { height: 34px; width: auto; display: block; }
.top-mark { display: none; flex: none; }
.top-mark img { width: 30px; height: 30px; display: block; }
@media (max-width: 1020px) { .side .side-logo { display: none; } .topbar .top-mark { display: inline-flex; } }
.inv-logo { height: 38px; width: auto; display: block; margin: 0 0 10px auto; }
[dir=rtl] .inv-logo { margin: 0 auto 10px 0; }
.mark { display: grid; grid-template-columns: repeat(3, 8px); gap: 2px; padding: 6px; background: var(--royal); border-radius: 9px; }
.mark i { width: 8px; height: 8px; border-radius: 2px; background: #fff; } .mark i.t { background: var(--teal); } .mark i.n { background: transparent; }
.auth-body h1 { font-size: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.auth-form label { font-size: 13.5px; font-weight: 600; }
.auth-form .btn { margin-top: 8px; min-height: 44px; }
.auth-form .auth-by { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.auth-form .auth-by legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.auth-form .auth-by label { font-weight: 400; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.auth-form .auth-by .tiny { flex-basis: 100%; }
.auth-form .code { font-size: 22px; letter-spacing: .3em; text-align: center; }
.auth-form .seg { border: 0; padding: 0; margin: 0 0 4px; display: flex; gap: 16px; flex-wrap: wrap; }
.auth-form .seg legend { font-weight: 600; margin-bottom: 6px; }
.err { background: var(--red-50); color: var(--red); border-radius: 10px; padding: 8px 12px; }
.auth-foot { text-align: center; }

/* Phone and tablet: one column; the navigation moves to the bottom tab bar (UX E1, below). */
@media (max-width: 1020px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .cols2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .main { padding: 0 16px 48px; }
  .topbar { margin: 0 -16px 16px; padding: 0 16px; }
  .topbar .search { display: none; }
  .brief .cols { grid-template-columns: minmax(0, 1fr); }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .tm-row { grid-template-columns: auto minmax(0, 1fr); }
  .tm-row > :last-child { grid-column: 1 / -1; justify-self: start; }
  .locked-state { grid-template-columns: minmax(0, 1fr); }
}

/* First-run setup top bar (mockup v1.4 .wtop): logo in one line; the time hint gives way on phones. */
.wtop .brand { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink); flex: none; }
.wtop .brand img { height: 30px; width: auto; display: block; }

@media (max-width: 640px) { .wtop .hide-s { display: none; } }

/* Printable invoice */
.invoice-sheet { max-width: 820px; margin: 28px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
@media print { .no-print { display: none !important; } .invoice-sheet { border: 0; margin: 0; padding: 0; } body { background: #fff; } }

/* Chains: the employees of a chain, in order */
.chain-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.chain-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; flex-wrap: wrap; }
.chain-steps li.dim { opacity: .6; }
.input.sm { padding: 6px 8px; font-size: 13px; }
@media (max-width: 640px) { .chain-steps li select.input { flex-basis: 100%; max-width: none !important; } }

/* Designs: scaled live previews of the template HTML */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.design-card { padding: 10px; }
.design-frame { width: 260px; overflow: hidden; border-radius: 10px; border: 1px solid var(--line-2); margin: 0 auto; }
.design-frame iframe { border: 0; transform-origin: 0 0; display: block; pointer-events: none; }
[dir="rtl"] .design-frame iframe { transform-origin: 100% 0; }


/* ===== Company Brain (ADR-27) ===== */
.mt0 { margin-top: 0; }
.side .switch select { max-width: 100%; text-overflow: ellipsis; }
.brain-head { align-items: center; }
.brain-ring { --p: 0; flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(var(--teal-deep) calc(var(--p) * 1%), var(--line-2) 0); }
.brain-ring .num { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.brain-ring small { font-size: 11px; color: var(--slate); }
.brain-ring.sm { width: 60px; height: 60px; } .brain-ring.sm .num { font-size: 15px; }
.brief-panel { min-height: 260px; }
.brief-text { font-size: 14.5px; line-height: 1.7; max-height: 760px; overflow: auto; padding-inline-end: 4px; }
.brief-text h4 { margin: 14px 0 4px; font-size: 14px; color: var(--royal-700); }
.brief-text h4:first-child { margin-top: 0; }
.brief-text p { margin: 0 0 6px; }
.brief-text .bl { padding-inline-start: 16px; position: relative; margin: 2px 0; }
.brief-text .bl::before { content: ""; position: absolute; inset-inline-start: 4px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-deep); }
.brief-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); gap: 8px; }
.sec-title { margin: 26px 0 12px; }
.feed-tile { display: grid; gap: 8px; align-content: start; }
.feed-tile .fi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-deep); flex: none; }
.feed-tile p { margin: 0; }
.answer { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--teal-50); border: 1px solid var(--teal-100); }
.answer.unknown { background: var(--amber-50); border-color: var(--amber-200); }
.answer p { margin: 0 0 8px; white-space: pre-line; }
.written { margin-top: 12px; background: var(--sunken); font-size: 14px; line-height: 1.6; }
.sug-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sug { padding: 14px; display: grid; gap: 6px; align-content: start; }
.sug-val { font-size: 14px; line-height: 1.55; white-space: pre-line; }
.sug-cur { font-size: 12.5px; color: var(--slate); border-inline-start: 3px solid var(--amber-200); padding-inline-start: 8px; }
.sug-logo { max-width: 120px; max-height: 80px; border-radius: 8px; border: 1px solid var(--line); background: #fff; padding: 4px; }
.swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); display: inline-block; }
.swatches { align-items: center; }
.q-sec { margin: 22px 0 6px; color: var(--royal-700); }
.q { display: grid; gap: 6px; margin: 10px 0; font-weight: 600; font-size: 14px; }
.q textarea { font-weight: 400; }
.q-save { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0 4px; border-top: 1px solid var(--line-2); margin-top: 12px; }
.dropzone { display: flex; gap: 10px; align-items: center; border: 1.5px dashed var(--royal-200); background: var(--royal-50); border-radius: 12px; padding: 14px; cursor: pointer; font-size: 13.5px; color: var(--royal-700); position: relative; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatch-pick { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; background: var(--surface); }
.swatch-pick input[type=color] { width: 44px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.swatch-pick input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .swatch-pick input[type=color]::-webkit-color-swatch { border: 1px solid var(--line); border-radius: 8px; }
.pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fl { display: grid; gap: 4px; font-size: 13px; font-weight: 600; margin-top: 12px; }
.btn.save { margin-top: 14px; }
.doc.md { white-space: normal; line-height: 1.65; }
.doc.md p { margin: 0 0 6px; } .doc.md .md-h { margin: 12px 0 6px; font-size: 14.5px; color: var(--royal-700); }
.doc.md .md-list { margin: 4px 0 8px; padding-inline-start: 20px; } .doc.md .md-list li { margin: 2px 0; } .doc.md .md-list li.md-num { list-style: none; margin-inline-start: -16px; }
.doc.md .md-n { font-weight: 700; color: var(--slate-2); }
.doc.md .md-table { overflow-x: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .doc.md table.t { font-size: 12.5px; } .doc.md table.t td { vertical-align: top; }
.doc.md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.out .doc { white-space: pre-wrap; background: var(--sunken); border-radius: 10px; padding: 12px; font-size: 13.5px; line-height: 1.65; }
.learn-site { margin-bottom: 16px; }
.learn-site .fi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--royal); flex: none; }
.upl { position: relative; overflow: hidden; } .upl input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.offer-tbl td { padding: 6px 8px; } .offer-tbl .input { min-width: 90px; }
.policy-row { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.brand-logo { width: 96px; height: 96px; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.empty-logo { display: grid; place-items: center; color: var(--slate); }
@media (max-width: 640px) {
  .brain-ring { width: 68px; height: 68px; } .brain-ring .num { font-size: 16px; }
  .sug-grid { grid-template-columns: minmax(0, 1fr); }
  .offer-tbl .input { min-width: 70px; }
}
.side .co .co-logo { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 3px; flex: none; }
.audit-t td:nth-child(1) { white-space: nowrap; } .audit-t td:nth-child(2) { min-width: 130px; } .audit-t td:nth-child(3) { min-width: 150px; }
.nowrap { white-space: nowrap; }
/* records scroll sideways on a phone instead of breaking words; the audit log becomes one card per action */
.rec-t { min-width: 760px; }
@media (max-width: 640px) {
  .audit-t thead { display: none; }
  .audit-t tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .audit-t td { display: block; border: 0 !important; padding: 0 !important; min-width: 0 !important; }
  .audit-t td:nth-child(2) { font-weight: 600; }
  .audit-t td:nth-child(3), .audit-t td:nth-child(4) { grid-column: 1 / -1; }
  .audit-t td:nth-child(4) { color: var(--slate-2); }
}
/* My team: employees grouped by department (collapsible); helpers, locked and coming roles folded by default */
.team-q { min-width: 260px; }
.dept { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 12px 10px; margin-bottom: 10px; }
.dept.dim { background: var(--sunken); }
.dept > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 15px; }
.dept > summary::-webkit-details-marker { display: none; }
.dept > summary .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dept > summary .chip { margin-inline-start: 2px; }
.dept > summary > .ic:last-child { margin-inline-start: auto; color: var(--slate); transform: rotate(90deg); transition: transform .15s; }
.dept[open] > summary > .ic:last-child { transform: rotate(-90deg); }
.dept .stack-s { padding-top: 2px; }
.dept .grid3 { padding-top: 4px; }
a.tm-row { color: inherit; text-decoration: none; }
a.tm-row:hover { text-decoration: none; border-color: var(--royal-200); }
@media (max-width: 640px) { .team-q { min-width: 0; width: 100%; } .ph .acts { width: 100%; } }

/* The deal board (Sales Desk, addendum §2): stage columns (right to left in Arabic by the grid itself), cards, the drawer.
   Phones: a stage picker and one column. */
.pl-stats { margin-bottom: 14px; }
.pl-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.pl-filters .input { width: auto; min-width: 140px; }
.pl-filters input.input { min-width: 220px; }
.pl-picker { display: none; }
.pl-board { display: grid; grid-template-columns: repeat(7, minmax(210px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.pl-col { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px; min-height: 120px; display: grid; gap: 8px; align-content: start; }
.pl-col.over { border-color: var(--royal); background: var(--royal-50); }
.pl-col header { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; padding: 2px 4px; }
.pl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px; display: grid; gap: 4px; cursor: pointer; box-shadow: var(--sh-1); }
.pl-card[draggable=true] { cursor: grab; }
.pl-card:hover, .pl-card:focus-visible { border-color: var(--royal-200); outline: none; }
.pl-card.late { border-inline-start: 3px solid var(--red); }
.pl-card.quiet { border-inline-start: 3px solid var(--amber); }
.pl-card .chip { justify-self: start; }
.pl-empty { padding: 4px; margin: 0; }
.pl-shade { z-index: 85; }
.pl-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(560px, 100%); background: var(--surface); box-shadow: var(--sh-3); z-index: 90; overflow: auto; padding: 22px; display: grid; gap: 16px; align-content: start; }
.pl-drawer .x { position: absolute; top: 14px; inset-inline-end: 14px; border: 0; background: var(--sunken); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }
.pl-tl { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.pl-tl li { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
@media (max-width: 640px) {
  .pl-picker { display: block; width: 100%; }
  .pl-filters .input, .pl-filters input.input { min-width: 0; flex: 1 1 140px; }
  .pl-board { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .pl-col:not(.picked) { display: none; }
  .pl-tl li { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Phones: five tabs at the bottom and a «More» sheet with everything else (UX E1) ===== */
.tabbar, .sheet-bg { display: none; }
@media (max-width: 1020px) {
  .side { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset-inline: 0; bottom: 0; z-index: 75; background: var(--surface);
            border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(16,19,34,.06); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 48px;
            padding: 4px 2px; border: 0; border-radius: 10px; background: none; color: var(--slate-2); font: inherit; font-size: 11.5px; font-weight: 500; text-decoration: none; cursor: pointer; }
  .tabbar .ic { width: 21px; height: 21px; color: var(--slate); }
  .tabbar .on, .tabbar .on .ic { color: var(--royal-700); }
  .tabbar .on { background: var(--royal-50); }
  .tabbar span:not(.cnt) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbar .cnt { position: absolute; top: 2px; inset-inline-start: calc(50% + 6px); background: var(--amber-s); color: var(--ink); border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 16px; padding: 0 6px; }
  .main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .sheet-bg { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(16,19,34,.48); animation: fade .15s ease-out; }
  .sheet { position: absolute; inset-inline: 0; bottom: 0; max-height: 84vh; overflow: auto; background: var(--surface); border-radius: 18px 18px 0 0;
           padding: 16px 16px calc(88px + env(safe-area-inset-bottom)); box-shadow: var(--sh-3); animation: rise .18s ease-out; }
  .sheet .co { display: flex; gap: 10px; align-items: center; padding: 4px 2px 12px; border-bottom: 1px solid var(--line-2); }
  .sheet .co .av { width: 34px; height: 34px; font-size: 12px; background: var(--ink); }
  .sheet .co .co-logo { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 3px; flex: none; }
  .sheet .co b { display: block; font-size: 14px; line-height: 1.3; }
  .sheet .switch select { margin-top: 6px; max-width: 100%; }
  .sheet .grp { font-size: 12px; color: var(--slate); font-weight: 500; padding: 14px 2px 6px; }
  .sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sheet-grid a { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: 10px; background: var(--sunken); color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none; }
  .sheet-grid a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-grid a .ic { width: 17px; height: 17px; color: var(--slate); flex: none; }
  .sheet-grid a.on { background: var(--royal-50); color: var(--royal-700); }
  .sheet-grid a.on .ic { color: var(--royal); }
  .sheet-grid a.lockd { color: var(--slate); }
  .sheet-grid a .lk, .sheet-grid a .cnt { margin-inline-start: auto; }
  .sheet-grid a .lk { width: 13px; height: 13px; color: #A9AFBE; }
  .sheet-grid a .cnt { background: var(--amber-s); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 6px; line-height: 18px; }
  .sheet .planbox { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--sunken); font-size: 12.5px; display: grid; gap: 6px; }
  .sheet-foot { margin-top: 14px; gap: 8px; align-items: center; }
  .sheet .demo-flag { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sheet-bg, .sheet, .notes { animation: none; } }

/* ===== The bell: what needs you — decisions, attention, what was done (UX E13) ===== */
.topbar .iconbtn .pip.n { width: auto; height: auto; min-width: 17px; top: -5px; inset-inline-end: -5px; padding: 0 4px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 15px; color: var(--ink); text-align: center; }
.notes-bg { position: fixed; inset: 0; z-index: 64; }
.notes { position: fixed; top: calc(var(--mbar-h) + 64px); inset-inline-end: 24px; z-index: 65; width: min(360px, calc(100vw - 24px)); max-height: 70vh; overflow: auto;
         background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3); padding: 6px; display: grid; gap: 2px; animation: rise .15s ease-out; }
@media (max-width: 640px) { .notes { inset-inline: 12px; width: auto; top: 64px; } }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.note:hover { background: var(--sunken); text-decoration: none; }
.note > .ic { width: 18px; height: 18px; color: var(--royal); flex: none; margin-top: 2px; }
.note.warn > .ic { color: var(--amber); }
.note b { display: block; font-size: 13.5px; margin-bottom: 2px; }

/* ===== Today: what happened to each request (UX E4) ===== */
.asks { display: grid; gap: 6px; margin: -8px 0 18px; }
.ask-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font-size: 13.5px; }
.ask-row > .ic { color: var(--teal-deep); flex: none; }
.ask-row.working { background: var(--royal-50); border-color: transparent; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--royal-200); border-top-color: var(--royal); animation: tkspin .8s linear infinite; flex: none; }
@keyframes tkspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* ===== Outputs: by day, two lines until opened; designs as images (UX E5, D7) ===== */
.day-h { font-size: 13px; color: var(--slate); font-weight: 600; margin: 18px 2px 8px; }
.outs { align-items: start; }
.out-h { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.out-t { display: grid; gap: 2px; text-align: start; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.out-t b { overflow-wrap: anywhere; }
.out-peek { margin: 0; color: var(--slate-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.out-acts { margin-top: 8px; gap: 6px; }
.out-img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line-2); background: var(--sunken); }
button.chip { border: 0; cursor: pointer; font-family: inherit; }
.copy .c2 { display: none; }
.copy.copied .c1 { display: none; }
.copy.copied .c2 { display: inline; }
.copy.copied { color: var(--teal-deep); }

/* ===== Records: what the team keeps; the file before it is imported (UX E6) ===== */
.rec-t th.kept { color: var(--slate); }
.rec-t th.kept .ic, .kept-note .ic { width: 13px; height: 13px; color: var(--royal-200); vertical-align: -2px; margin-inline-start: 3px; }
.kept-note { margin: -10px 0 14px; }
.csv-preview { max-height: 260px; overflow: auto; }
.csv-preview .chip { margin-inline-start: 6px; }

/* ===== Company Brief: the team's rules (UX E7) ===== */
.team-rules { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--sunken); border-inline-start: 3px solid var(--royal-200); }
.team-rules .tr-h { font-size: 12.5px; font-weight: 600; color: var(--slate-2); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }

/* ===== Rules per employee, by department (UX E9) ===== */
.rules-t td { vertical-align: middle; }
.rules-t select.input.sm { min-width: 170px; }
.rules-t .lv-row td { background: var(--sunken); }
.rules-t .lv-row .panel { background: var(--surface); }
details.dept summary .tiny { margin-inline-start: 6px; }

/* ===== Connections: try the chat on the phone (UX E10) ===== */
.qr-try { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.qr { width: 132px; height: 132px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; image-rendering: pixelated; flex: none; }

/* ===== Approvals: «Why is this here?» — the work behind a request, with its buttons kept in reach ===== */
.appr.open { grid-column: 1 / -1; }
.appr .why-btn { flex: none; }
.why-box { display: grid; gap: 14px; border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; background: var(--sunken); font-size: 13px; }
.why-box section { min-width: 0; }
.why-box h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--slate); }
.why-box .kv { font-size: 13px; }
.why-box .kv dd { overflow-wrap: anywhere; }
.why-box ol.log { margin: 0; padding-inline-start: 20px; display: grid; gap: 3px; }
.why-box ul.before { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.why-box ul.before li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.appr.open .bar { position: sticky; bottom: 0; z-index: 1; background: var(--surface); padding: 10px 0 2px; border-top: 1px solid var(--line-2); }

/* ===== Approvals: a design is shown as itself (scaled to the card: wide cards 460px, narrow ones 280px) ===== */
.appr { container-type: inline-size; }
.appr-design { margin: 0; display: grid; gap: 6px; justify-items: center; }
.appr-design .design-frame { --pw: 280; width: calc(var(--pw) * 1px); height: calc(var(--fh) * var(--pw) / var(--fw) * 1px); }
.appr-design .design-frame iframe { transform: scale(calc(var(--pw) / var(--fw))); }
@container (min-width: 560px) { .appr-design .design-frame { --pw: 460; } }
/* several designs to choose from (22 Oct): side by side (two on a phone), the chosen one outlined; wide formats one under another */
.appr-designs { display: grid; gap: 12px 10px; justify-content: center; margin-bottom: 6px; }
.appr-designs.many { grid-template-columns: repeat(2, auto); }
.appr-designs.many .appr-design { width: min-content; align-content: start; }
.appr-designs.many .design-frame { --pw: 140; }
.appr-designs.many.wide { grid-template-columns: minmax(0, 1fr); }
.appr-designs.many.wide .appr-design { width: auto; }
.appr-designs.many.wide .design-frame { --pw: 280; }
@container (min-width: 440px) { .appr-designs.many { grid-template-columns: repeat(3, auto); } .appr-designs.many .design-frame { --pw: 128; } .appr-designs.many.wide { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 560px) { .appr-designs.many .design-frame { --pw: 164; } .appr-designs.many.wide .design-frame { --pw: 460; } }
.appr-design.on .design-frame { outline: 3px solid var(--royal); outline-offset: 2px; }
.appr-design figcaption { width: 100%; }
.appr-design figcaption .rc { padding: 8px; gap: 8px; }
/* the designer's brief: format cards in a tidy grid, groups labelled */
.fmt-pick { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 6px 0 10px; }
.fmt-pick .rc { padding: 10px; }
.fmt-group { margin-top: 6px; }

/* ===== Today: three tiles, one list open at a time; Brain, usage and team in one row (UX E2, 21 Oct) ===== */
.brief .glance .col { font: inherit; color: inherit; text-align: start; border: 1px solid transparent; cursor: pointer; width: 100%; transition: border-color .15s, background .15s; }
.brief .glance .col:hover { background: #2A3046; }
.brief .glance .col:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.brief .glance .col.on { border-color: var(--teal); background: #2A3046; }
.brief .glance .it { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brief .glance .more { font-size: 12px; color: #8E95B0; }
.today-list { margin-top: 14px; animation: rise .15s ease-out; }
.att-row, .done-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.att-row:last-child, .done-row:last-child { border-bottom: 0; }
.att-row > .ic { color: var(--amber); margin-top: 3px; flex: none; }
.att-row .btn { flex: none; }
.att-items summary { cursor: pointer; color: var(--royal); margin-top: 4px; }
.att-items ul { margin: 4px 0 0; padding-inline-start: 18px; }
.done-row .av { width: 26px; height: 26px; font-size: 10px; flex: none; }
.mini-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.mini { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
.mini:hover { text-decoration: none; border-color: var(--royal-200); }
.mini > span:last-child, .mini .grow { display: grid; gap: 3px; min-width: 0; }
.mini b { font-size: 14px; }
.mini > .ic { width: 22px; height: 22px; color: var(--royal); flex: none; }
.mini .meter { display: block; margin-top: 3px; }
.brain-ring.xs { width: 46px; height: 46px; } .brain-ring.xs .num { font-size: 12.5px; }
@media (max-width: 640px) {
  .mini-strip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .att-row { flex-wrap: wrap; } .att-row .btn { margin-inline-start: 26px; }
}
@media (prefers-reduced-motion: reduce) { .today-list { animation: none; } }

/* ===== My team: one line per employee, departments folded to name, count and faces (21 Oct) ===== */
.team-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: 0 0 14px; color: var(--slate-2); font-size: 13.5px; }
.team-sum b { color: var(--ink); font-size: 15px; }
.team-sum span + span::before { content: "·"; margin-inline-end: 16px; color: var(--line); }
.dept > summary .av-stack { display: inline-flex; margin-inline-start: auto; }
.dept > summary .av-stack .av { width: 24px; height: 24px; font-size: 9px; border: 2px solid var(--surface); margin-inline-start: -6px; }
.dept > summary .av-stack + .ic { margin-inline-start: 8px !important; }
.dept[open] > summary .av-stack { display: none; }
.dept[open] > summary .av-stack + .ic { margin-inline-start: auto !important; }
.tm-row.compact { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.tm-row.compact .why.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-row.compact > .ic { color: var(--slate); flex: none; }
a.tm-row.compact:not([href]) { cursor: default; }
@media (max-width: 640px) { .tm-row.compact { display: flex; } .tm-row.compact .why.one { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } }
/* Your team on a phone: the «works on its own» switch and the star go under the employee — beside it they ran off the screen (QA 22 Oct) */
@media (max-width: 640px) { .tm-line { flex-wrap: wrap; row-gap: 4px !important; } .tm-line > .tm-row { flex-basis: 100%; } }
@media (max-width: 640px) {
  .brief { padding: 16px; gap: 12px; }
  .brief .cols.glance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .brief .glance .col { padding: 10px; gap: 4px; }
  .brief .glance .col .h { flex-direction: column-reverse; align-items: flex-start; gap: 2px; font-size: 12px; }
  .brief .glance .it, .brief .glance .more { display: none; }
  .mini { padding: 10px 12px; }
}

/* ===== Rules: the rules in one sentence; the rest one tap away (21 Oct) ===== */
.rules-sum { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; background: var(--royal-50); border-color: var(--royal-100, var(--line)); }
.rules-sum > .ic { color: var(--royal); flex: none; margin-top: 3px; }
.rules-sum p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.more-set { margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.more-set > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--royal-700); }
.more-set > summary::-webkit-details-marker { display: none; }
.more-set > summary .ic { transform: rotate(90deg); transition: transform .15s; }
.more-set[open] > summary .ic { transform: rotate(-90deg); }
.dept > summary .mode-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-inline-start: auto; }
.dept > summary .mode-chips + .ic { margin-inline-start: 8px !important; }
@media (max-width: 640px) { .dept > summary { flex-wrap: wrap; } .dept > summary .mode-chips { order: 5; flex-basis: 100%; margin-inline-start: 20px; } }

/* ===== Chains: one line per chain (faces in order), steps on a tap; finished jobs folded (21 Oct) ===== */
.dept.chain > summary { align-items: center; }
.dept.chain > summary .grow { display: grid; gap: 2px; min-width: 0; }
.dept.chain .chain-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dept.chain[open] .chain-desc { white-space: normal; }
.chain-faces { display: inline-flex; align-items: center; flex: none; }
.chain-faces .av { width: 22px; height: 22px; font-size: 8.5px; border: 2px solid var(--surface); margin-inline-start: -5px; }
.chain-faces .av.dimmed { opacity: .4; }
.dept.chain > summary > .ic:last-child { margin-inline-start: 6px; }
.chain-switch { display: flex; gap: 8px; align-items: center; margin: 2px 4px 8px; }
@media (max-width: 640px) { .dept.chain > summary { flex-wrap: wrap; } .chain-faces { order: 5; flex-basis: 100%; padding-inline-start: 8px; } }

.coming-line { margin-top: 22px; }
.try-btn { float: inline-end; margin-inline-start: 8px; }

/* ===== Outputs: newest day open, earlier days folded (21 Oct) ===== */
details.day > summary.day-h { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
details.day > summary.day-h::-webkit-details-marker { display: none; }
details.day > summary .ic { transform: rotate(90deg); transition: transform .15s; color: var(--slate); }
details.day[open] > summary .ic { transform: rotate(-90deg); }
details.day:not([open]) { border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
@media (max-width: 640px) { .dept > summary .mode-chips + .ic { margin-inline-start: auto !important; } }

/* ===== Settings: one page for every setup screen; a guide first where there is one (21 Oct) ===== */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.set-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.set-card .grow { display: grid; gap: 4px; min-width: 0; }
.set-card b { font-size: 15px; }
.set-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--royal-50); color: var(--royal); flex: none; }
.set-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 640px) { .set-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Guides: a few plain questions, one per step (21 Oct) ===== */
.wiz.one { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.chip-btn.on { border-color: var(--royal); background: var(--royal-50); color: var(--royal-700); }
.rc .cb { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #B9C0D2; flex: none; margin-top: 2px; display: grid; place-items: center; background: #fff; }
.rc.on .cb { background: var(--royal); border-color: var(--royal); color: #fff; }
.rc.on .cb .ic { width: 13px; height: 13px; }
.guide-sum { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.guide-sum li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sunken); font-size: 14.5px; line-height: 1.6; }
.guide-sum li .ic { color: var(--royal); flex: none; margin-top: 4px; }
.guide-done { text-align: center; padding: 18px 0 6px; }
.gd-ic { width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--teal-50); color: var(--teal-deep); margin-bottom: 10px; }
.gd-ic .ic { width: 30px; height: 30px; }

/* ===== The sidebar: the desks fold to one line (21 Oct) ===== */
.side-fold > summary.grp { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 8px; }
.side-fold > summary.grp::-webkit-details-marker { display: none; }
.side-fold > summary.grp:hover { background: var(--sunken); color: var(--ink); }
.side-fold > summary .cnt-s { font-size: 11px; background: var(--sunken); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.side-fold > summary .ic { margin-inline-start: auto; transform: rotate(90deg); transition: transform .15s; }
.side-fold[open] > summary .ic { transform: rotate(-90deg); }
.side-fold > a { display: flex; }

/* ===== Help: how do I…, where things are (21 Oct) ===== */
.help-list { display: grid; gap: 6px; }
.help-q { border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; background: var(--surface); }
.help-q > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 600; font-size: 14.5px; }
.help-q > summary::-webkit-details-marker { display: none; }
.help-q > summary .ic { margin-inline-start: auto; transform: rotate(90deg); transition: transform .15s; color: var(--slate); flex: none; }
.help-q[open] > summary .ic { transform: rotate(-90deg); }
.help-q p { margin: 0 0 10px; line-height: 1.7; color: var(--slate-2); }
.help-q .btn { margin-bottom: 12px; }
.help-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.help-place { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--sunken); color: var(--ink); text-decoration: none; }
.help-place:hover { text-decoration: none; background: var(--royal-50); }
.help-place > .ic { color: var(--royal); flex: none; margin-top: 2px; }
.help-place > span { display: grid; gap: 2px; }

/* ===== Records on a phone: one card per record, each value under its name (21 Oct) ===== */
@media (max-width: 640px) {
  .rec-t { min-width: 0; }
  .rec-t thead { display: none; }
  .rec-t tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .rec-t td { display: grid; gap: 1px; border: 0 !important; padding: 0 !important; white-space: normal !important; }
  .rec-t td[data-label]::before { content: attr(data-label); font-size: 11.5px; color: var(--slate); font-weight: 600; }
  .rec-t td:empty, .rec-t td[data-label=""] { display: none; }
  .rec-t td:last-child:not([data-label]) { grid-column: 1 / -1; justify-self: start; }
}
.more-set.flat { margin-top: 0; border-top: 0; padding-top: 0; }
.more-set.flat > summary h3 { margin: 0; color: var(--ink); font-size: 16px; }
.more-set.flat[open] > summary { margin-bottom: 12px; }

/* Phones: a long page name in the top bar shortens with «…» — it used to push the language, bell and profile buttons onto a second line (QA 22 Oct, Sources and the guides) */
@media (max-width: 640px) { .topbar { flex-wrap: nowrap; } .topbar .crumb { flex: 1 1 auto; min-width: 0; } .topbar .crumb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar .sp { display: none; } }

/* ===== «Your decisions» round (B3, 22 Oct): filters, one or two per row, what happened next, the done details, text that reads its own way ===== */
.bidi.blk { display: block; }
.appr-title { font-size: 15px; line-height: 1.4; display: block; overflow-wrap: anywhere; }
.appr-title .bidi[dir=rtl] { text-align: right; }
.appr-title .bidi[dir=ltr] { text-align: left; }
.appr-wrap { container-type: inline-size; }
.appr-list { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* two per row only when the list itself is wide enough that a card keeps its text and design picker readable (never on a phone or a narrow window) */
@container (min-width: 1180px) { .appr-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: «Why is this here?» is its icon, so the title keeps the card's width */
@media (max-width: 640px) { .appr .why-btn .why-t { display: none; } }
.appr-list > .appr.open { grid-column: 1 / -1; }
.dec-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 6px; }
.dec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--slate-2); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fchip .n { font-size: 11.5px; font-weight: 600; color: var(--slate); background: var(--line-2); border-radius: 999px; padding: 0 7px; line-height: 1.6; }
.fchip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fchip.on .n { background: rgba(255,255,255,.18); color: #fff; }
.fchip:disabled { opacity: .45; cursor: default; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.tapq { margin: 8px 0; }
.dec-layout { margin-inline-start: auto; }
.dec-layout button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1499px) { .dec-layout { display: none; } }   /* below a large screen: always one per row (a 1366 laptop too), nothing to choose */
.dec-more { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: end; padding-top: 6px; }
.dec-more > div:first-child { grid-column: 1 / -1; display: grid; gap: 6px; }
.dec-more label { display: grid; gap: 4px; }
.dec-showing { margin: 6px 0 10px; color: var(--slate-2); }
.edited-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--royal-700); background: var(--royal-50); border-radius: 8px; padding: 4px 10px; justify-self: start; }
/* the decision just taken: where it went and what comes next */
.appr-outcome { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--green-50); border-radius: var(--r-l); padding: 16px; margin-bottom: 14px; box-shadow: var(--sh-1); }
.appr-outcome.no { border-color: var(--red-50); }
ul.went { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
ul.went li { display: flex; gap: 8px; align-items: baseline; }
ul.went li .ic { flex: none; color: var(--green); position: relative; top: 2px; }
.appr-outcome.no ul.went li .ic { color: var(--red); }
.next-step { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 14px; background: var(--sunken); border-radius: 10px; padding: 8px 12px; }
.next-step .k { font-size: 12px; font-weight: 600; color: var(--slate); }
/* Done: one row per decision, each opens its details */
.done-hint { margin: 12px 16px 0; }
.done-list { display: grid; }
.done-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none; }
.done-row:hover { background: var(--sunken); text-decoration: none; }
.done-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .done-row { grid-template-columns: auto minmax(0, 1fr) auto; } .done-row > .chip { grid-column: 2; justify-self: start; } .done-row > .ic { grid-row: 1; grid-column: 3; } }
.dec-detail { display: grid; gap: 12px; }
.dec-detail h3 { margin: 0; }
.dec-detail h4 { margin: 8px 0 0; font-size: 13px; color: var(--slate); }
.dec-answer { margin: 0; font-weight: 600; }
.sent-msg { display: grid; gap: 6px; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; }
.sent-msg .doc { background: var(--sunken); border-radius: 10px; padding: 12px; font-size: 13.5px; }
.dec-detail > .doc { background: var(--sunken); border-radius: 10px; padding: 12px; font-size: 13.5px; }
.diff { display: grid; gap: 2px; font-size: 13.5px; }
.diff .dl { padding: 2px 8px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff .dl.removed { text-decoration: line-through; color: var(--red); background: var(--red-50); }
.diff .dl.added { color: var(--green); background: var(--green-50); }
.diff .dl.same { color: var(--slate-2); }
ul.dec-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.dec-files li { display: flex; gap: 8px; align-items: center; }
.dec-detail ol.log { margin: 0 0 8px; padding-inline-start: 20px; display: grid; gap: 3px; font-size: 13px; }
/* Today's «Waiting for your decision»: the same card style as the decisions page (rounded, soft shadow, no side border) */
.wait-card { border-radius: 12px; box-shadow: var(--sh-2); border-color: var(--line-2); }
/* ---- desks round B4 (22 Oct): the owner's schedule, «Run now» progress, richer opportunities ---- */
.sched { display: grid; gap: 8px; margin-top: 8px; }
.sched-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sched-edit { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--royal-100); border-radius: 10px; background: var(--surface); max-width: 460px; }
.sched-edit label { display: grid; gap: 4px; max-width: 160px; }
.sched-edit .days { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-edit .day { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--slate-2); }
.sched-edit .day.on { background: var(--royal-100); border-color: var(--royal-200); color: var(--royal-700); font-weight: 600; }
.sched-ok { color: var(--green); }
.tm-sched { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: -2px 0 6px; padding-inline-start: 56px; }
.tm-sched .sched { margin-top: 0; width: 100%; }
.rp { margin-bottom: 14px; border-color: var(--royal-200); }
.rp.rp-done { border-color: var(--green-200); background: var(--green-50); }
.rp.rp-failed, .rp.rp-stopped { border-color: var(--red-200); background: var(--red-50); }
.rp.rp-waiting, .rp.rp-held { border-color: var(--amber-200); background: var(--amber-50); }
.rp-h { display: flex; gap: 10px; align-items: flex-start; }
.rp-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--royal-100); color: var(--royal-700); }
.rp-starting .rp-mark, .rp-running .rp-mark { border: 3px solid var(--royal-100); border-top-color: var(--royal); background: transparent; animation: rp-spin 0.9s linear infinite; }
.rp-done .rp-mark { background: var(--green); color: #fff; }
.rp-failed .rp-mark, .rp-stopped .rp-mark { background: var(--red); color: #fff; }
.rp-waiting .rp-mark, .rp-held .rp-mark { background: var(--amber-s); color: #fff; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-starting .rp-mark, .rp-running .rp-mark { animation: none; } }
.rp-steps { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.rp-steps li { display: flex; gap: 8px; align-items: center; color: var(--slate); }
.rp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #C3C8D4; }
.rp-steps li.st-done { color: var(--slate-2); } .rp-steps li.st-done .rp-dot { background: var(--green); }
.rp-steps li.st-now { color: var(--ink, #101322); font-weight: 600; } .rp-steps li.st-now .rp-dot { background: var(--royal); box-shadow: 0 0 0 3px var(--royal-100); }
.rp-steps li.st-waiting .rp-dot { background: var(--amber-s); } .rp-steps li.st-failed { color: var(--red); } .rp-steps li.st-failed .rp-dot { background: var(--red); }
.rp-links { gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rp-why { margin-top: 6px; }
.opp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.opp-b { min-width: 0; display: grid; gap: 4px; }
.opp-t { font-weight: 600; color: var(--ink, #101322); text-decoration: none; }
.opp-t:hover { color: var(--royal); text-decoration: underline; }
.opp-x { margin: 0; font-size: 13.5px; unicode-bidi: isolate; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.opp-x.full { display: block; -webkit-line-clamp: unset; overflow: visible; margin-bottom: 10px; }
.opp .why { unicode-bidi: isolate; font-size: 13px; }
.opp-m { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.opp-m > span { display: inline-flex; gap: 4px; align-items: center; }
.opp-soon { color: var(--amber); font-weight: 600; }
.opp-a { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .opp { grid-template-columns: auto minmax(0, 1fr); }
  .opp > :last-child:not(.opp-b) { grid-column: 1 / -1; justify-self: start; }
  .tm-sched { padding-inline-start: 0; }
}

/* ---------------- desks round (23 Oct, addendum «Desks and money roles» v1.0) — Your team as 12 desk cards ----------------
   A desk card: its icon, name, first-person line, how many jobs work on their own and the desk switch (on / mixed / off); its
   jobs unfold below. Kept in this section only (other rounds edit other sections). */
/* founder, 24 Oct: the page scrolled sideways and pushed the menu off the screen — a grid track sized to its widest content took
   the one-line job descriptions (white-space: nowrap) at their full length, so a desk card ran 1,000 px past the main column.
   Every track here is minmax(0, 1fr) and every item may shrink: a long line is cut with «…», never widens the page (check UX18). */
.desk-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.desk-list > *, .desk-card, .desk-jobs, .desk-jobs .stack-s, .desk-jobs .stack-s > *, .tm-line, .tm-line > .tm-row { min-width: 0; }
.desk-jobs .stack-s, .desk-list .stack-s { grid-template-columns: minmax(0, 1fr); }
.desk-intro, .desk-head .why { overflow-wrap: anywhere; }
.tm-line > .tm-switch, .tm-line > .btn { flex: none; }
.tm-asked { padding-inline: 4px; }
.desk-lead { margin-top: 0; }
.desk-list > .ph2 { margin-bottom: 0; }
.desk-title { display: flex; align-items: center; gap: 8px; }
.desk-title h3 { margin: 0; }
.desk-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 14px; }
.desk-card.core { border-color: var(--line-2); }
.desk-head { display: flex; align-items: center; gap: 12px; }
.desk-head > .grow { min-width: 0; }
.desk-head .nm { font-size: 15.5px; }
.desk-head .why { font-size: 13.5px; }
.desk-ic { width: 44px; height: 44px; flex: none; }
.av.face.desk-ic.xs { width: 22px; height: 22px; }
.av.face.desk-ic.sm { width: 28px; height: 28px; }
.desk-count { margin-top: 2px; }
.desk-switch { flex: none; }
.toggle.mixed { background: var(--teal-deep); opacity: 1; }
.toggle.mixed::after { inset-inline-start: 11px; }
.desk-jobs { margin-top: 8px; }
.desk-jobs > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; color: var(--slate); font-weight: 600; }
.desk-jobs > summary::-webkit-details-marker { display: none; }
.desk-jobs > summary .ic { transform: rotate(90deg); transition: transform .15s; }
.desk-jobs[open] > summary .ic { transform: rotate(-90deg); }
.desk-intro { border-inline-start: 3px solid var(--line-2); padding: 2px 12px; margin: 4px 0 10px; color: var(--slate); }
.desk-intro p { margin: 4px 0; }
.desk-intro b { color: var(--ink, #101322); }
.desk-more > .desk-list { margin-top: 6px; }
.help-desk > summary .desk-ic { width: 28px; height: 28px; }
.help-desk > summary .ic { margin-inline-start: auto; }
@media (max-width: 640px) {
  .desk-head { flex-wrap: wrap; }
  .desk-head > .grow { flex: 1 1 calc(100% - 60px); }
  .desk-switch { margin-inline-start: 56px; }
  .desk-ic { width: 40px; height: 40px; }
}

/* ===== CN — the continuation popup (23 Oct): after a decision, the work carrying on — Ui/ContinueSheet.razor ===== */
.cn-bg { display: none; }
.cn { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 66; width: min(440px, calc(100vw - 48px)); max-height: calc(100vh - 120px); overflow: auto;
      background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3); padding: 18px 18px 0; animation: rise .2s ease-out; }
.cn:focus { outline: none; }
.cn:focus-visible { outline: 2px solid var(--royal-200); outline-offset: 2px; }
.cn-grip { display: none; }
.cn-head { display: flex; gap: 12px; align-items: flex-start; }
.cn-head h2 { font-size: 18px; margin: 2px 0 2px; letter-spacing: -.01em; }
.cn-sub { margin: 0; font-size: 13.5px; color: var(--slate-2); }
.cn-mark { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; background: var(--green); color: #fff; }
.cn-running .cn-mark, .cn-deciding .cn-mark { background: var(--royal-50); }
.cn-mark .spin { width: 20px; height: 20px; }
.cn-stopped .cn-mark, .cn-failed .cn-mark { background: var(--red); }
.cn-waiting .cn-mark, .cn-held .cn-mark, .cn-recorded .cn-mark { background: var(--amber-s); }
.cn-x { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--slate-2); flex: none; }
.cn-x .ic { width: 16px; height: 16px; }
.cn-title { margin: 10px 0 4px; padding: 8px 12px; border-radius: 10px; background: var(--sunken); font-size: 13.5px; font-weight: 500; }
.cn-tl { list-style: none; margin: 12px 0 4px; padding: 0; }
.cn-st { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 0 0 12px; font-size: 14px; }
.cn-st:not(:last-child)::before { content: ""; position: absolute; top: 22px; bottom: 0; inset-inline-start: 10px; width: 2px; background: var(--line); }
.cn-st.st-done:not(:last-child)::before { background: var(--green-200); }
.cn-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; border: 2px solid var(--line); background: var(--surface); color: #fff; }
.cn-st.st-done .cn-dot { background: var(--green); border-color: var(--green); }
.cn-st.st-now .cn-dot { border-color: var(--royal); box-shadow: 0 0 0 4px var(--royal-100); }
.cn-st.st-now .cn-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--royal); animation: cn-pulse 1.4s ease-in-out infinite; }
.cn-st.st-waiting .cn-dot, .cn-st.st-held .cn-dot { border-color: var(--amber-s); background: var(--amber-50); color: var(--amber); }
.cn-st.st-failed .cn-dot, .cn-st.st-stopped .cn-dot { background: var(--red); border-color: var(--red); }
.cn-st.st-next .cn-t { color: var(--slate-2); }
.cn-st.st-now .cn-t { font-weight: 600; }
.cn-t { min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.cn-t a { color: inherit; text-decoration: underline; text-decoration-color: var(--royal-200); text-underline-offset: 3px; }
.cn-when { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; background: var(--royal-50); color: var(--royal-700); font-size: 12px; font-weight: 500; white-space: nowrap; vertical-align: 1px; }
.cn-when .ic { width: 12px; height: 12px; }
@keyframes cn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cn-res { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--green-50); border: 1px solid var(--green-200); }
.cn-res h3 { font-size: 13px; margin: 0 0 6px; color: var(--green); font-weight: 600; }
.cn-res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.cn-res li { display: flex; gap: 8px; align-items: flex-start; }
.cn-res li .ic { width: 15px; height: 15px; color: var(--green); flex: none; margin-top: 3px; }
.cn-none { margin: 4px 0 10px; font-size: 13.5px; color: var(--slate-2); }
.cn-caught { display: grid; gap: 4px; margin: 4px 0 10px; padding: 12px; border-radius: 12px; background: var(--teal-50); border: 1px solid var(--teal-100); }
.cn-caught > b { color: var(--teal-h); font-size: 14px; }
.cn-now { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--slate-2); }
.cn-now li::before { content: "•"; color: var(--teal-deep); margin-inline-end: 6px; }
.cn-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 16px; margin-top: 4px; background: var(--surface); border-top: 1px solid var(--line-2); }
.cn-foot .btn { flex: 0 1 auto; }
.cn-foot .btn.ghost { margin-inline-start: auto; }
/* a phone: the same as a bottom sheet over the tab bar; tapping outside closes it (the work goes on) */
@media (max-width: 1020px) {
  .cn-bg { display: block; position: fixed; inset: 0; z-index: 76; background: rgba(16,19,34,.32); animation: fade .15s ease-out; }
  .cn { inset-inline: 0; bottom: 0; width: auto; max-height: 86vh; border-radius: 18px 18px 0 0; border-bottom: 0; z-index: 77; padding: 8px 16px 0; }
  .cn-grip { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 10px; }
  .cn-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .cn-foot .btn { flex: 1 1 auto; justify-content: center; }
  .cn-foot .btn.ghost { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .cn, .cn-bg { animation: none; } .cn-st.st-now .cn-dot::after { animation: none; } }
/* «Next decision» lands here: the item first and marked; «All caught up» says what the team is doing */
.appr.focus { box-shadow: 0 0 0 2px var(--royal-200), var(--sh-2); }
.caught-up .cn-now { justify-content: center; max-width: 520px; margin: 8px auto 0; text-align: start; }
.caught-up b { color: var(--ink); }
/* a desk's progress panel: the decision it waits for, right there */
.rp-dec { display: grid; gap: 8px; margin-top: 10px; }
.rp-dec-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--amber-200); }
.rp-dec-row > .grow { flex: 1 1 200px; min-width: 0; font-size: 13.5px; }
/* ===== end CN ===== */
/* ===== intuitive round (23 Oct) ===== */
/* Today's first-days hint: what happens next, closes with «Got it» or by itself after three days */
.first-days { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.first-days > .grow { flex: 1 1 auto; min-width: 0; }
.first-days ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13.5px; }
/* a job's page: the way back to its desk */
.back-crumb { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; margin-bottom: 8px; color: var(--slate, #6A7080); }
.back-crumb a { color: inherit; }
/* a card's who / when / channel, folded under «Why is this here?» */
.why-meta { margin-top: 8px; }
/* ===== end intuitive ===== */
/* ===== the Chief of Staff's plans (B17) ===== */
.cos-plans { margin-bottom: 18px; }
.plan-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: var(--surface); min-width: 0; }
.plan-card.wait { margin: 8px 0; border-inline-start: 4px solid var(--royal); }
.plan-h { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; min-width: 0; }
.plan-h b { overflow-wrap: anywhere; }
.plan-tl { margin-top: 10px; }
.plan-tl .cn-t { overflow-wrap: anywhere; min-width: 0; }
.plan-rep { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 8px; }
.plan-rep ul { margin: 6px 0 0; padding-inline-start: 18px; }
.plan-f { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 8px; }
.plan-steps { margin: 8px 0; padding-inline-start: 22px; display: grid; gap: 10px; }
.plan-steps li { min-width: 0; overflow-wrap: anywhere; }
.plan-steps .chip { margin-inline-end: 6px; }
.plan-steps.editing textarea { margin-top: 4px; width: 100%; }
.plan-ask .radio-cards { margin-top: 8px; }
/* ===== end plans ===== */
/* ===== B19 (reject-feedback): reject asks why and what now; ask for changes; the revision on the card ===== */
.fb-step { border: 1px solid var(--line, #E3E6EE); border-radius: 12px; padding: 12px; margin: 8px 0; background: var(--sunken, #F5F6FA); display: grid; gap: 8px; min-width: 0; }
.fb-step h4 { margin: 0; font-size: 14px; }
.fb-step textarea, .fb-step input.input { width: 100%; box-sizing: border-box; }
.fb-next { display: grid; gap: 6px; }
.fb-next .rc { width: 100%; text-align: start; }
.fb-next .rc[disabled] { opacity: .55; cursor: not-allowed; }
.fb-remember { display: flex; gap: 8px; align-items: center; }
.fb-step .bar { margin: 0; }
.fb-rev { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; overflow-wrap: anywhere; }
.fb-lines { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; font-size: 14px; }
.fb-lines li { display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
/* ===== end B19 ===== */
/* ===== the work file (B21): «All work» and /work/{id} — every column may shrink (min-width: 0) and long words wrap: no sideways scroll ===== */
.wf-states { margin-bottom: 12px; }
.wf-filters { display: grid; gap: 8px; margin-bottom: 14px; min-width: 0; }
.wf-filters .field-grid { margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.wf-more > summary { cursor: pointer; color: var(--slate); }
.wf-more h4 { margin: 10px 0 4px; font-size: 13px; color: var(--slate); }
.wf-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.wf-faces { display: inline-flex; flex: none; }
.wf-faces .av + .av { margin-inline-start: -8px; }
.wf-main { display: grid; gap: 2px; min-width: 0; }
.wf-title, .wf-sub { overflow-wrap: anywhere; min-width: 0; }
.wf-row > .chip { white-space: normal; text-align: center; }
.wf { display: grid; gap: 14px; min-width: 0; }
.wf > .panel, .wf > .notice { margin: 0; min-width: 0; }
.wf > .ph { margin-bottom: 0; align-items: flex-start; }
.wf-head { min-width: 0; flex: 1 1 240px; }
.wf-head h2 { overflow-wrap: anywhere; }
.wf-said { margin: 0 0 6px; overflow-wrap: anywhere; }
.wf-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wf-step { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.wf-step.st-waiting { border-color: var(--amber-s, #E6A23C); }
.wf-step.st-failed { border-color: var(--red); }
.wf-step-h { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: start; min-width: 0; }
.wf-dec .wf-step-h, .wf-msg .wf-step-h { grid-template-columns: minmax(0, 1fr) auto; }
.wf-n { width: 22px; height: 22px; border-radius: 50%; background: var(--royal-50); color: var(--royal-700); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.wf-who { min-width: 0; overflow-wrap: anywhere; }
.wf-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wf-chips .chip { white-space: normal; }
.wf-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; background: var(--sunken); border-radius: 10px; padding: 10px 12px; margin: 0; min-width: 0; }
.wf-text.full { max-height: 420px; overflow: auto; }
.wf-out { display: grid; gap: 4px; min-width: 0; }
.wf-files { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.wf-files .chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.wf-kv { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); font-size: 13px; }
.wf-kv dt, .wf-kv dd { overflow-wrap: anywhere; min-width: 0; }
.wf-note { color: var(--slate-2); background: var(--amber-50); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
.wf-dec, .wf-msg { border-bottom: 1px solid var(--line-2); padding: 10px 0; display: grid; gap: 6px; min-width: 0; }
.wf-dec:last-child, .wf-msg:last-child { border-bottom: 0; }
.wf-lines { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; overflow-wrap: anywhere; }
.wf-tl li { grid-template-columns: 110px minmax(0, 1fr) 0; }
.wf-tl li > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .wf-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wf-row > .wf-cr { grid-column: 2; }
  .wf-step-h { grid-template-columns: auto minmax(0, 1fr); }
  .wf-step-h > .av { display: none; }
  .wf-step-h > .wf-chips { grid-column: 1 / -1; justify-content: flex-start; }
  .wf-dec .wf-step-h, .wf-msg .wf-step-h { grid-template-columns: minmax(0, 1fr); }
  .wf-dec .wf-chips, .wf-msg .wf-step-h > .chip { justify-content: flex-start; justify-self: start; }
  .wf-kv { grid-template-columns: minmax(0, 1fr); }
  .wf-tl li { grid-template-columns: minmax(0, 1fr); }
}
/* ===== end work file ===== */
/* ===== save bar (ADR-47): settings keep a copy until Save; Cancel puts the saved values back ===== */
.savebar { position: sticky; bottom: 0; z-index: 60; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); }
.savebar.dirty { border-color: var(--amber-200); background: var(--amber-50); }
@media (max-width: 1020px) { .savebar { bottom: calc(62px + env(safe-area-inset-bottom)); } }
.perm-group { border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; }
.perm-group > b { display: block; margin-bottom: 6px; }
.perm-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
/* ===== end save bar ===== */

/* B23 — what the team learned from decisions and outcomes (Today, Company Brain → Suggestions) */
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.learn-card { padding: 14px; display: grid; gap: 8px; align-content: start; border-inline-start: 4px solid var(--teal); }
.learn-card .learn-plain { margin: 0; font-size: 14px; line-height: 1.55; }
.learn-card .learn-und { display: grid; gap: 4px; background: var(--teal-50); border-radius: 10px; padding: 10px 12px; }
.learn-card .learn-rule { font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--ink); }
.learn-card .learn-und textarea { width: 100%; }
.learn-sbs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.learn-sbs > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: grid; gap: 2px; }
.learn-sbs .was { background: var(--amber-50); border-color: var(--amber-200); }
.learn-sbs .new { background: var(--teal-50); border-color: var(--teal-100); }
.learn-src { line-height: 1.6; }
.learn-today { margin-bottom: 18px; }
.learn-tint { border-inline-start: 4px solid var(--teal); }
.learn-added ul { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 6px; }
@media (max-width: 640px) {
  .learn-grid { grid-template-columns: minmax(0, 1fr); }
  .learn-sbs { grid-template-columns: minmax(0, 1fr); }
}
/* ===== B25 feedback button (ADR-44) — Api/Ui/FeedbackButton.razor + wwwroot/js/feedback.js. One marked section; nothing above is touched. ===== */
.fb-open { display: inline-flex; align-items: center; gap: 6px; font: inherit; cursor: pointer; }
.fb-open .ic { width: 16px; height: 16px; }
.fb-open.fb-bar { font-size: 13px; font-weight: 600; color: var(--slate-2); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.fb-open.fb-bar:hover { border-color: var(--royal-200); color: var(--royal); }
.fb-open.fb-link { background: none; border: 0; padding: 0; color: var(--royal); font-size: inherit; text-decoration: none; }
.fb-open.fb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fb-open.fb-link .ic { display: none; }
.fb-open.fb-float { position: fixed; inset-inline-end: 14px; bottom: 14px; z-index: 60; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--slate-2); font-size: 13px; font-weight: 600; box-shadow: var(--sh-2); }
.fb-open.fb-float:hover { border-color: var(--royal-200); color: var(--royal); }
.fb-open.fb-cta { background: var(--royal); color: #fff; border: 1px solid transparent; border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: 14px; }
.fb-open.fb-cta:hover { background: var(--royal-h); }
@media (max-width: 640px) { .topbar .fb-open.fb-bar { padding: 6px 8px; } .topbar .fb-open.fb-bar .fb-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.fb-bg { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16,19,34,.48); overscroll-behavior: contain; animation: fade .15s ease-out; }
.fb-panel { width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--ink);
  border-radius: 16px; box-shadow: var(--sh-3); padding: 18px 20px 20px; }
.fb-panel *, .fb-panel *::before, .fb-panel *::after { box-sizing: border-box; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.fb-head h2 { font-size: 19px; margin: 0; }
.fb-x { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 22px; line-height: 1; color: var(--slate-2); }
.fb-x:hover { border-color: var(--royal-200); color: var(--royal); }
.fb-form { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.fb-form > * { min-width: 0; }
.fb-intro { margin: 0; color: var(--slate-2); font-size: 14px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kind { position: relative; }
.fb-kind input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fb-kind span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--slate-2); }
.fb-kind input:checked + span { background: var(--royal-50); border-color: var(--royal); color: var(--royal-700); }
.fb-kind input:focus-visible + span { outline: 2px solid var(--royal); outline-offset: 2px; }
.fb-text { resize: vertical; min-height: 96px; max-height: 40vh; }
.fb-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.fb-check input { width: 18px; height: 18px; flex: none; accent-color: var(--royal); margin: 0; }
.fb-shotbox { min-width: 0; }
.fb-shotbox .fb-note { margin: 0 0 8px; font-size: 13px; color: var(--slate); }
.fb-shot { display: block; width: auto; max-width: 100%; height: auto; max-height: min(36vh, 320px); border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); }
.fb-shotbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fb-what { font-size: 13px; color: var(--slate-2); }
.fb-what summary { cursor: pointer; font-weight: 600; color: var(--royal); }
.fb-what ul { margin: 8px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.fb-priv { margin: 0; }
.fb-err { margin: 0; }
.fb-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.fb-done { display: grid; gap: 12px; }
.fb-ref { margin: 0; font-size: 15px; }
.fb-refno { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--royal-50); color: var(--royal-700); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
@media (max-width: 640px) {
  .fb-bg { align-items: flex-end; padding: 0; }
  .fb-panel { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); animation: fb-up .2s ease-out; }
  .fb-actions .btn { flex: 1 1 0; }
}
@keyframes fb-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fb-bg, .fb-panel { animation: none; } }
@media print { .fb-open, .fb-bg { display: none !important; } }
/* the staff console's Feedback page and menu badge */
.side .nav-badge { margin-inline-start: auto; background: var(--amber-s); color: var(--ink); border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 17px; padding: 0 7px; }
.fb-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.fb-filters label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--slate-2); min-width: 0; }
.fb-set { display: grid; gap: 10px; max-width: 420px; margin-bottom: 8px; }
.fb-set label { display: grid; gap: 4px; }
.t tr.fb-new td { background: var(--amber-50); }
/* ===== end B25 ===== */

/* ===== B26 pilot UX: the value meter, gentle prompts, the first win, a capability preview (ADR-51) ===== */
.vm { margin-top: 18px; }
.vm .ph2 { flex-wrap: wrap; gap: 8px; }
.vm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.vm-tile { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
a.vm-tile:hover { text-decoration: none; border-color: var(--royal-200); }
.vm-tile .n { font-size: 22px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.vm-tile .l { font-size: 12.5px; color: var(--slate-2); }
.vm-tile.hrs { background: var(--teal-50); border-color: var(--teal-200); }
.vm-tile.hrs .n { color: var(--teal-deep); }
.vm-basis { margin: 8px 0 0; font-size: 12px; color: var(--slate); }
.vm-empty { display: flex; gap: 12px; align-items: flex-start; color: var(--slate-2); font-size: 14px; }
.vm-empty .ic { color: var(--teal-deep); flex: none; }
.gp { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--royal-200); background: var(--royal-50); border-radius: var(--r-l); margin-bottom: 14px; }
.gp.trial-end { border-color: var(--teal-200); background: var(--teal-50); }
.gp .grow { flex: 1 1 auto; min-width: 0; }
.gp .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gp .x { flex: none; }
.win { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-l); border: 1px solid var(--teal-200); background: linear-gradient(180deg, var(--teal-50), var(--surface)); margin-bottom: 14px; }
.win .badge { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; }
.win .grow { flex: 1 1 auto; min-width: 0; }
.win h3 { margin: 0 0 4px; font-size: 17px; }
.win p { margin: 0; font-size: 14px; color: var(--slate-2); overflow-wrap: anywhere; }
.preview-card { border: 1px dashed var(--royal-200); background: var(--royal-50); border-radius: var(--r-m); padding: 12px 14px; margin-top: 8px; }
.week-lines { margin: 10px 0 0; padding-inline-start: 18px; display: grid; gap: 6px; }
@media (max-width: 900px) { .vm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .vm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vm-tile .n { font-size: 19px; }
  .gp, .win { padding: 12px 14px; }
}

/* ===== The Company Brain wheel (founder, 29 Oct, #8) and the tap questions (#7) ===== */
.wheel { margin: 4px 0 18px; }
.wheel-h { margin: 0 0 10px; font-size: 18px; }
.wheel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.wheel-fig { max-width: 420px; width: 100%; margin-inline: auto; }
.wheel-svg { width: 100%; height: auto; display: block; overflow: visible; }
.wheel-seg { cursor: pointer; outline: none; }
.wheel-track { fill: var(--line-2); stroke: var(--surface); stroke-width: 1; }
.wheel-fill { stroke: var(--surface); stroke-width: 1.5; opacity: .88; transition: opacity .15s; }
.wheel-seg:hover .wheel-fill, .wheel-seg.on .wheel-fill { opacity: 1; }
.wheel-seg.on .wheel-track { stroke: var(--ink); stroke-width: 2; }
.wheel-seg:focus-visible .wheel-track { stroke: var(--royal); stroke-width: 3; }
.wheel-pct { font-size: 13px; font-weight: 700; pointer-events: none; }
.wheel-hub { fill: var(--surface); stroke: var(--line); }
.wheel-big { font-size: 42px; font-weight: 700; fill: var(--ink); }
.wheel-sub { font-size: 15px; fill: var(--slate); }
.wheel-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wheel-tile { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; text-align: start; min-height: 48px; }
.wheel-tile:hover { border-color: var(--royal-200); }
.wheel-tile:focus-visible { outline: 3px solid var(--royal-200); outline-offset: 1px; }
.wheel-tile.on { border-color: var(--royal); background: var(--royal-50); }
.wheel-tile .sw, .wheel-dh .sw { width: 12px; height: 12px; border-radius: 4px; flex: none; display: inline-block; }
.wheel-tile .nm { flex: 1; font-size: 13.5px; line-height: 1.35; }
.wheel-tile .pc { font-size: 14px; }
.wheel-detail { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.wheel-dh { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.wheel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wheel-box { padding: 10px 12px; border-radius: 12px; background: var(--sunken); }
.wheel-quick { margin: 10px 0; background: var(--royal-50); }
.wheel-list { margin: 6px 0 0; padding-inline-start: 18px; font-size: 14px; }
.tapq .chips-pick .chip-btn { padding: 8px 14px; min-height: 40px; }
.tapq .chip-btn.other { border-style: dashed; }
.q-card { padding: 12px 0; border-top: 1px solid var(--line-2); }
@media (max-width: 720px) { .wheel-grid, .wheel-cols { grid-template-columns: minmax(0, 1fr); } .wheel-big { font-size: 38px; } }

/* ---- the daily questions card (Round 3, 30 Oct 2026) ---- */
.dq { border-inline-start: 4px solid var(--royal); }
.dq .dq-h { margin: 0 0 4px; font-size: 18px; }
.dq-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.dq-list li { padding: 8px 12px; border-radius: 12px; background: var(--sunken); }
.dq-pick { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 600; }
.dq-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dq-progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0 12px; }
.dq-progress > i { display: block; height: 100%; background: var(--royal); border-radius: 999px; transition: width .25s ease; }
.dq-unlock { margin: 8px 0 0; }
.dq-done { display: flex; gap: 16px; align-items: center; }
.dq-ring { position: relative; width: 64px; height: 64px; flex: none; }
.dq-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; }
.dq-ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.dq-ring-fg { fill: none; stroke: var(--teal, #00B8A9); stroke-width: 6; stroke-linecap: round; }
.dq-gain { color: var(--teal-700, #00897d); }
@media (max-width: 720px) { .dq-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* MO - mobile overflow guard (founder feedback 14). Content must never be wider than the screen: body{overflow-x:hidden} hides
   the symptom (RTL clips at the left edge, LTR at the right), so the cause is fixed here: every flex/grid child may shrink,
   long unbroken words/URLs/ids wrap, and nowrap chips/buttons truncate instead of pushing the page wider. */
.app, .main, .main > * { min-width: 0; max-width: 100%; }
.main { overflow-wrap: anywhere; }
.main :where(div, section, article, header, form, label, ul, ol, li, p, h1, h2, h3, h4, a, span, b, small, details, summary) { min-width: 0; }   /* zero specificity: any explicit min-width still wins */
.main :where(.row, .row.wrapx) { max-width: 100%; }
.main :where(img, svg, video, canvas, iframe, table, pre) { max-width: 100%; }
.main :where(.chip, .btn) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wheel-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1020px) {
  .main :where(.grid2, .grid3, .grid4, .g21, .g12, .split, .set-grid, .rgrid) { grid-template-columns: minmax(0, 1fr); }
  .main .btn { white-space: normal; }
  .main .panel, .main .tbl { max-width: 100%; }
}

/* ---- instant feedback on a menu tap (office round #29): the top progress bar, the pressed link and a page skeleton, shown the moment a link is tapped (portal.js) ---- */
#tk-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 300; opacity: 0; pointer-events: none; transition: opacity .1s;
    background: linear-gradient(90deg, transparent, var(--teal) 30%, var(--royal) 70%, transparent); background-size: 50% 100%; background-repeat: no-repeat; }
html.tk-busy #tk-progress { opacity: 1; animation: tk-slide 1s linear infinite; }
@keyframes tk-slide { from { background-position: -50% 0; } to { background-position: 150% 0; } }
html.tk-busy, html.tk-busy a { cursor: progress; }
a.tk-pending { background: var(--royal-50, rgba(47,75,224,.12)) !important; box-shadow: inset 0 0 0 1.5px var(--royal-200, rgba(47,75,224,.35)); transform: scale(.985); transition: transform .08s; }
#tk-skel { position: fixed; z-index: 60; overflow: hidden; background: var(--paper, #FBFBFA); padding: 20px 24px; display: none; box-sizing: border-box; }
html.tk-busy #tk-skel { display: block; animation: tk-in .12s ease-out; }
@keyframes tk-in { from { opacity: 0; } to { opacity: 1; } }
#tk-skel .sk { border-radius: 10px; background: linear-gradient(90deg, var(--line, #E6E8EE) 25%, rgba(255,255,255,.7) 50%, var(--line, #E6E8EE) 75%); background-size: 200% 100%; animation: tk-shimmer 1.2s linear infinite; margin-bottom: 14px; }
#tk-skel .sk-h { height: 26px; width: 38%; }
#tk-skel .sk-p { height: 14px; width: 62%; }
#tk-skel .sk-card { height: 96px; }
#tk-skel .sk-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
#tk-skel .sk-row .sk { height: 84px; margin: 0; }
@keyframes tk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { html.tk-busy #tk-progress { animation: none; background: var(--teal); } #tk-skel .sk { animation: none; } }
/* a card that loads after the first paint (Ui/Later.razor): a quiet placeholder of the card's height */
.later-sk { border-radius: 14px; background: linear-gradient(90deg, var(--line, #E6E8EE) 25%, rgba(255,255,255,.7) 50%, var(--line, #E6E8EE) 75%); background-size: 200% 100%; animation: tk-shimmer 1.2s linear infinite; margin: 12px 0; }
@media (prefers-reduced-motion: reduce) { .later-sk { animation: none; } }


/* ---- Arabic text, done once (founder feedback 19, 26, 28; 31 Oct): the Arabic face first for every Arabic run, joined letters
   never spaced or cased, one direction per run. The cause list of «the letters look wrong»: letter-spacing / text-transform on a
   joined script breaks the joins; a Latin face first in the stack and no lang on a foreign run mixed the faces inside one word;
   the stray <style> line in teamak.css dropped the first font rule. ---- */
:root { --font-ar-first: "IBM Plex Sans Arabic", "Teamak Arabic", "IBM Plex Sans", system-ui, "Segoe UI", Tahoma, sans-serif; }
html[lang="ar"], [lang="ar"], [dir="rtl"] { font-family: var(--font-ar-first); }
html[lang="ar"] *, [lang="ar"] *, [dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; word-spacing: normal; }
html[lang="ar"] body, [lang="ar"], [dir="rtl"] { font-kerning: normal; font-variant-ligatures: normal; font-feature-settings: "calt" 1, "liga" 1, "ccmp" 1, "mark" 1, "mkmk" 1; text-rendering: optimizeLegibility; font-synthesis: none; }
html[lang="ar"] code, html[lang="ar"] .mono, html[lang="ar"] .keyrow { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* a run of the other language, isolated, with its own face */
bdi[lang="en"], .xl[lang="en"] { font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; }
bdi[lang="ar"], .xl[lang="ar"] { font-family: var(--font-ar-first); }
.ltr-iso { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.bidi-num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
/* a title / text in another language than the page: original on its own line, a small language tag, an optional translation under it */
.xl-block { display: grid; gap: 2px; min-width: 0; }
.xl-title { font-weight: 600; overflow-wrap: anywhere; }
.xl-tag { display: inline-block; font-size: 10.5px; line-height: 1; padding: 2px 5px; margin-inline-end: 6px; border-radius: 5px; background: var(--sunken, #f1f2f6); color: var(--slate); font-weight: 600; vertical-align: .1em; font-family: "IBM Plex Sans", system-ui, sans-serif; unicode-bidi: isolate; direction: ltr; }
.xl-trans { font-size: 13px; color: var(--slate-2, var(--slate)); }
.xl-meta, .xl-why { display: block; font-size: 12.5px; color: var(--slate); overflow-wrap: anywhere; }
.xl-meta .sep { margin-inline: 4px; }
/* markdown the employees write, shown as text (bold, lists, line breaks) */
.md-inline b, .md-body b { font-weight: 600; }
.md-body p { margin: 0 0 .5em; } .md-body p:last-child { margin-bottom: 0; }
.md-body ul, .md-body ol { margin: .2em 0 .5em; padding-inline-start: 1.3em; }

/* the Conversation: a card is the width of the column; the actions are separate buttons, never two links glued together */
.thread .msg { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; justify-self: auto; display: flex; gap: 10px; margin: 10px 0; align-items: flex-start; }
.thread .msg.mine { flex-direction: row-reverse; }
.thread .bubble { flex: 1 1 0; min-width: 0; max-width: 100%; padding: 10px 14px; border-radius: 12px; background: var(--paper-2, #F3F4F6); }
.thread .msg.mine .bubble { flex: 0 1 auto; max-width: min(34rem, 85%); background: var(--royal-50, #EEF1FD); }
.thread .bub-who { margin-bottom: 2px; }
.thread .bub-who .sep { margin-inline: 3px; }
.thread .bub-text { overflow-wrap: anywhere; }
.thread .bub-acts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; align-items: center; }
.thread .bub-acts.taps { padding-top: 8px; border-top: 1px dashed var(--line); }
.thread .pill { display: inline-block; margin-top: 4px; }
.xl-row { display: grid; gap: 3px; min-width: 0; }
.xl-row .row { margin-top: 4px; }
span.num, bdi.num { unicode-bidi: isolate; direction: ltr; }

.xl-row > .chip { justify-self: start; }
.xl-row > b { min-width: 0; }

/* ===== «Do you want to enrich <area>?» (#22, 31 Oct): the area panel is never an empty box ===== */
.wheel-enrich { margin: 10px 0; background: var(--royal-50); }
.wheel-enrich .enrich-item:first-of-type { border-top: 0; }
.enrich-item .chips-pick .chip-btn { min-height: 40px; padding: 8px 18px; }
.conflict-card { padding: 10px 0; border-top: 1px solid var(--line-2); }
.conflict-card:first-of-type { border-top: 0; }
.conflict-taps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }