/* ============================================================================
   Tool pages in the new frame (S2, 29 October 2026), linked after shell.css by every page drawn with the old theme's markup (Frame.page, oldTheme). shell.css styles only x- classes (tests/shell_test.js);
   this file is where the page's own markup, which keeps the old theme's classes, is given the approved layout: these rules, all under body.x-doc, give it the approved layout
   (DESIGN-RULES rounds 44 to 47): cyan frames on the sections, actions at the right with Cancel to the left of the main button (the reading and keyboard order is unchanged: only
   the row is reversed), the current tab a pale cyan pill, radio groups in columns, a confirm under the button that opened it. Nothing here hides or reorders a control.
   ========================================================================= */
/* the bar's line, meta list and buttons, for the page's own markup in the bar */
.x-band .lead,.x-band .x-lead{margin-top:6px;font-size:15px;line-height:1.6;color:var(--x-bt2);text-align:start;max-width:none}
.x-band ul.meta{display:flex;flex-wrap:wrap;gap:4px 24px;margin:10px 0 0;font-size:14px;color:var(--x-bt2)}
.x-band ul.meta b{font-weight:600}
.x-band nav.pills{display:flex;gap:8px;margin:12px 0 0;justify-content:flex-start}
.x-band nav.pills .x-btn[aria-current]{background:var(--x-bbtn);border-color:var(--x-bbtn);color:var(--x-bbtnt);font-weight:600}
.x-band .x-rha{gap:8px}
/* the bar's More: a panel under its button (a details, so it opens without script too) */
.x-md{position:relative}
.x-md>summary{list-style:none;cursor:pointer}.x-md>summary::-webkit-details-marker{display:none}
.x-md[open]>summary{background:var(--x-bhov)}
.x-mdp{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:20;width:264px;background:var(--x-sf);color:var(--x-tx);border:1px solid var(--x-ln);border-radius:12px;box-shadow:var(--x-sh);padding:8px;box-sizing:border-box}
.x-band .x-mdp a.x-mi,.x-band .x-mdp button.x-mi{color:var(--x-tx)}
.x-mdp form{margin:0}.x-mdp .x-gl{color:var(--x-mu)}
.x-band .x-mdp .x-mi:hover{background:var(--x-s2)}
@media (max-width:1023px){.x-mdp{inset-inline-end:auto;inset-inline-start:0}}

/* cyan frames on the sections, tiles and asks (inner dividers and input borders are unchanged) */
body.x-doc .card,body.x-doc .tile,body.x-doc .tile2,body.x-doc .ask .askbox,body.x-doc .ask,body.x-doc .note-box,body.x-doc .x-kpi,body.x-doc .x-fig{border-color:var(--x-frame)}
body.x-doc details.ask{border:0}
/* the current tab or choice is a pale cyan pill, label in the text colour (the strip's tabs are drawn by .x-tabs above) */
body.x-doc .ltabs a[aria-current=page],body.x-doc .seg a[aria-current=page],body.x-doc .sfbtn[aria-pressed=true],body.x-doc .seg input:checked+span{background:var(--x-cur);border:1px solid var(--x-frame);color:var(--x-tx);font-weight:600}
body.x-doc .sfbtn[aria-pressed=true]{border-width:1px}

/* actions at the right: a form's last row (the main button first in the markup, Cancel or Back after it) reads Cancel, then the main button, ending on the right edge (the left edge in Arabic).
   Only the row is reversed, so the keyboard and reading order stay as they were. */
body.x-doc form .row:has(> button[type=submit]),body.x-doc form .row:has(> .btn[type=submit]){flex-direction:row-reverse;justify-content:flex-start}
body.x-doc .send{display:flex;justify-content:flex-end}
body.x-doc .delq{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
/* a confirm opens under its button, as wide as its card; its buttons end on the right, Cancel to the left of the main one */
body.x-doc .ask .askbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;flex-direction:row-reverse;gap:8px;margin-top:8px;background:var(--x-s2)}
body.x-doc .ask .askbox>p{flex:1 1 100%;margin:0}
body.x-doc .ask .askbox>form{margin:0;flex:0 1 auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
body.x-doc .ask .askbox>form .field{flex:1 1 220px;margin:0}
body.x-doc .ask .askbox .x-btn{height:44px}
body.x-doc .acts>.ask[open]{flex:1 1 100%}
body.x-doc .ask>summary{list-style:none}

/* radio groups in columns: 2 or 3 options in one row, 4 to 6 in 2 columns, 7 or more in 3; one column on a phone */
body.x-doc .checks[role=radiogroup],body.x-doc fieldset.sh-from{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 16px}
@media (min-width:640px){
  body.x-doc .checks[role=radiogroup]:has(> label:nth-of-type(2):last-of-type),body.x-doc fieldset.sh-from:has(> label:nth-of-type(2):last-of-type){grid-template-columns:repeat(2,minmax(0,1fr))}
  body.x-doc .checks[role=radiogroup]:has(> label:nth-of-type(3):last-of-type),body.x-doc fieldset.sh-from:has(> label:nth-of-type(3):last-of-type){grid-template-columns:repeat(3,minmax(0,1fr))}
  body.x-doc .checks[role=radiogroup]:has(> label:nth-of-type(4)),body.x-doc fieldset.sh-from:has(> label:nth-of-type(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  body.x-doc .checks[role=radiogroup]:has(> label:nth-of-type(7)),body.x-doc fieldset.sh-from:has(> label:nth-of-type(7)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
body.x-doc fieldset.sh-from>legend{grid-column:1/-1}

/* the dashboard: three cards and two charts, then the page's own sections */
.x-dash{margin:0 0 20px}
.x-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 16px}
.x-kpi{display:flex;flex-direction:column;gap:2px;box-sizing:border-box;padding:18px 20px;background:var(--x-sf);border:1px solid var(--x-frame);border-radius:12px;color:var(--x-tx);min-width:0}
.x-kt{font-size:14px;font-weight:600;line-height:20px;margin:0}
.x-kb{font-size:32px;line-height:40px;font-weight:600;margin:2px 0 0}
.x-kn{font-size:16px;line-height:24px;font-weight:500;color:var(--x-mu)}
.x-ku{font-size:15px;font-weight:500;color:var(--x-mu)}
.x-ks{font-size:13px;line-height:20px;color:var(--x-mu);margin:0;overflow-wrap:anywhere}
.x-kl{align-self:flex-end;margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--x-tx)}
.x-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.x-fig{box-sizing:border-box;margin:0;padding:16px;background:var(--x-sf);border:1px solid var(--x-frame);border-radius:12px;color:var(--x-tx);min-width:0}
.x-fig h3{font-size:16px;font-weight:600;margin:0}
@media (max-width:1023px){.x-kpis,.x-charts{grid-template-columns:minmax(0,1fr)}}
/* no amber: the chart's "nothing to show" line is a watch note (pale cyan, cyan frame) */
body.x-doc .tgp-chart-msg{background:var(--x-wab);border:1px solid var(--x-frame);color:var(--x-wa)}
/* single buttons stacked in a side card share one width; a lone submit under a form's fields ends on the right */
body.x-doc aside .acts.top{display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch}
body.x-doc aside .acts.top .btn{justify-content:center}
body.x-doc .card form:has(> button.btn[type=submit]:last-child):not(.row):not([class]){display:flow-root}
body.x-doc .card form>button.btn[type=submit]:last-child{float:inline-end}
body.x-doc aside .acts.top>details.ask>summary{display:flex;justify-content:center;width:100%;box-sizing:border-box}
/* ---- S2 review ---- */
/* the dashboard: an empty chart is one line, the quick links sit under the charts, Open now is the board's "Recent and mine" between the cards and the charts */
.x-fig-empty{display:flex;flex-direction:column;gap:2px;justify-content:center}
.x-charts{align-items:stretch;margin:0 0 16px}
/* cards in one row are as tall as the tallest; the "Show as table" button sits at each card's bottom (6 Nov 2026) */
.x-fig:not(.x-fig-empty){display:flex;flex-direction:column}
.x-fig>.tgp-chart-data{margin-top:auto;padding-top:10px}
.x-qlinks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;box-sizing:border-box;padding:16px 20px;margin:0 0 20px;background:var(--x-sf);border:1px solid var(--x-frame);border-radius:12px}
.x-qlinks .x-end{margin-inline-start:auto;font-weight:600;color:var(--x-tx)}
.x-qlinks .x-btn{height:44px;padding:0 16px;border-radius:9999px;text-decoration:none}
body.x-doc .x-dash+.card{margin-top:0}
/* a confirm that deletes or removes is the outline-danger button, wherever it is; its Cancel is to its left with 8 px between */
body.x-doc form[action$="/delete"] .btn[type=submit],body.x-doc form[action$="/remove"] .btn[type=submit],body.x-doc .btn.d{background:transparent;border:1px solid var(--x-bad);color:var(--x-bad)}
body.x-doc form[action$="/delete"] .btn[type=submit]:hover,body.x-doc form[action$="/remove"] .btn[type=submit]:hover,body.x-doc .btn.d:hover{background:var(--x-badb)}
body.x-doc form .row{gap:8px}
/* ONE rule for action rows in the new frame (TGP rule, phone review 13 Nov 2026): buttons sit at the right of their row, at every width.
   A card's .acts, the Board's .ap-acts, a form's foot (its note at the left, the button at the right), a fold's Open button */
body.x-doc .card .acts,body.x-doc .ap-acts{justify-content:flex-end}
body.x-doc .formfoot{justify-content:flex-end}
body.x-doc .formfoot>p{flex:1 1 220px;min-width:0}
body.x-doc .formfoot>.btn:first-child{order:2;margin-inline-start:auto}
body.x-doc .tpl>summary .fold{margin-inline-start:auto}
body.x-doc .card form.row>.btn:not(.btn ~ .btn){margin-inline-start:auto}
body.x-doc .ask .askbox{gap:8px}
body.x-doc form[action$="/delete"] .row,body.x-doc form[action$="/delete"]>div:last-child{justify-content:flex-start}
/* the Projects table: one More menu per row, at the right; the table head keeps its contrast in dark mode */
body.x-doc .stbl td.pj{text-align:end;white-space:nowrap;width:1%}
body.x-doc .x-md.x-row{display:inline-block;position:relative}
body.x-doc .x-md.x-row>summary{background:var(--x-sf);color:var(--x-tx);border:1px solid var(--x-cb);height:44px;min-width:96px}
body.x-doc .x-md.x-row .x-mdp{inset-inline-end:0;inset-inline-start:auto;text-align:start}
body.x-doc .x-md.x-row .x-mdp a{color:var(--x-tx)}
body.x-doc .stbl{overflow:visible}
:root[data-theme="dark"] body.x-doc .stbl thead th{background:var(--x-th-bg);color:var(--x-th-tx)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.x-doc .stbl thead th{background:var(--x-th-bg);color:var(--x-th-tx)}}
/* a pill group in the page (the template language, the add-people choice): the current one is the pale cyan pill, whatever value aria-current has */
body.x-doc .seg a[aria-current]{background:var(--x-cur);border:1px solid var(--x-frame);color:var(--x-tx);font-weight:600}
body.x-doc nav.seg.tlang{margin:0 0 16px}
body.x-doc .seg a{min-height:44px;align-items:center;display:inline-flex;text-decoration:none}
/* a survey's page: the two columns end level, the facts read label over value (nothing wraps beside its label), the stacked buttons share a width */
body.x-doc .runw{align-items:start}
body.x-doc .runw>div,body.x-doc .runw>aside{display:flex;flex-direction:column}
body.x-doc .kv li{display:block}
body.x-doc .kv li>span{display:block;font-size:.8125rem;color:var(--x-mu)}
body.x-doc .kv li>b{display:block;text-align:start;font-weight:600;margin-top:2px}
body.x-doc aside .acts.top .btn,body.x-doc aside .acts.top>.ask>summary{width:100%;box-sizing:border-box;justify-content:center}
/* the question editor: Up, Down and Remove with room between them, 44 px to touch on a phone, and the Required tick with its label at ease */
body.x-doc .qhead .tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.x-doc .qhead .tools .tool[data-act=remove],body.x-doc .qhead .tools .tool[data-act=oremove]{margin-inline-start:8px}
body.x-doc .qhead .tools label{display:inline-flex;align-items:center;gap:8px;margin-inline-end:8px;min-height:44px;padding-inline:4px}
body.x-doc .qhead .tools input[type=checkbox]{width:1.15rem;height:1.15rem;margin:0}
@media (max-width:639px){body.x-doc .qhead .tools .tool,body.x-doc .orow .tool{min-height:44px;min-width:44px}}
@media (max-width:1023px){.x-qlinks .x-end{margin-inline-start:0}}
.x-qlinks .x-kl{align-self:center;margin-top:0;padding-top:0}
/* a form that is itself the row (the delete, move and merge confirms): the same order, Cancel to the left of the main button, 8 px between, ending on the right */
body.x-doc form.row:has(> button[type=submit]),body.x-doc form.row:has(> .btn[type=submit]){flex-direction:row-reverse;justify-content:flex-start;gap:8px}
body.x-doc form.row>input[type=hidden]{display:none}
/* the template language switch and any pill group made of links */
body.x-doc nav.seg{display:flex;flex-wrap:wrap;gap:8px}
body.x-doc nav.seg a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--c-line-strong,var(--x-cb));border-radius:9999px;padding:.5rem 1.1rem;color:var(--x-tx);text-decoration:none;font-weight:500;background:var(--x-sf)}

/* ---- S3: Learning (29 October 2026) ---- */
/* the dashboard: three cards in a row, then the two charts (the Learning charts keep their own frames); the cards share a height */
.x-kpis.x-k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-kpis.x-k4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1279px){.x-kpis.x-k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.x-kpis.x-k4{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1023px){.x-kpis.x-k3{grid-template-columns:minmax(0,1fr)}}
.x-lcharts.ch-grid{margin:0 0 20px}
body.x-doc .x-lcharts .ch-pair>.tgp-chart{border-color:var(--x-frame)}
/* the language switch of a Results page (it sat in the old bar) stays at the top of the page */
.x-langnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.x-langnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--x-cb);border-radius:9999px;color:var(--x-tx);text-decoration:none;background:var(--x-sf)}
.x-langnav a[aria-current]{background:var(--x-cur);border-color:var(--x-frame);font-weight:600}
/* the program's More: a row of its own at the right under the bar, its asks open under their buttons */
body.x-learning .card.tabcard{background:transparent;border:0;box-shadow:none;padding:0}
body.x-learning .tabcard .navrow{justify-content:flex-end}
/* a confirm that archives, withdraws, merges or stops something is the outline-danger button, like delete and remove */
body.x-learning form[action$="/archive"] .btn[type=submit],body.x-learning form[action$="/logo-remove"] .btn[type=submit],body.x-learning form[action$="/withdraw"] .btn[type=submit],body.x-learning form[action$="/stop-calendar"] .btn[type=submit],body.x-learning form[action$="/runners/merge"] .btn[type=submit],body.x-learning form[action$="/unlink"] .btn[type=submit]{background:transparent;border:1px solid var(--x-bad);color:var(--x-bad)}
body.x-learning form[action$="/archive"] .btn[type=submit]:hover,body.x-learning form[action$="/logo-remove"] .btn[type=submit]:hover,body.x-learning form[action$="/withdraw"] .btn[type=submit]:hover,body.x-learning form[action$="/stop-calendar"] .btn[type=submit]:hover,body.x-learning form[action$="/runners/merge"] .btn[type=submit]:hover,body.x-learning form[action$="/unlink"] .btn[type=submit]:hover{background:var(--x-badb)}
/* ---- S3 review (29 October 2026) ---- */
/* the language switch: the current one is the board's solid pill (cyan, dark text: readable in light and dark), in Learning's results pages and Surveys' templates */
body.x-doc .x-langnav a[aria-current],body.x-doc nav.seg.tlang a[aria-current]{background:var(--x-sel);border:1px solid var(--x-sel);color:var(--x-selt);font-weight:600}
/* every table head is white on the brand blue (13 Nov 2026, Akram), 13 px text, centred; the number cells are centred under it */
body.x-doc.x-doc.x-doc table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th{background:var(--x-th-bg);color:var(--x-th-tx);font-size:13px;font-weight:600;text-align:center;vertical-align:middle}
body.x-doc.x-doc.x-doc table td.n,body.x-doc.x-doc.x-doc table td.c,body.x-doc.x-doc.x-doc table th.n,body.x-doc.x-doc.x-doc table th.c{text-align:center}
/* the learners page: Add learners ends the row at the right with the tick and its hint on the left of it; Send invitations and Change end the way-in box at the right */
body.x-learning #paste-form{display:flex;flex-wrap:wrap;gap:0 16px;align-items:center}
body.x-learning #paste-form>*{flex:1 1 100%}
body.x-learning #paste-form>.invrow{order:1;flex:1 1 280px;margin:14px 0 0}
body.x-learning #paste-form>.acts{order:2;flex:0 0 auto;margin:14px 0 0;margin-inline-start:auto}
body.x-learning .route{justify-content:flex-end}
body.x-learning .route .acts{margin-inline-start:auto}
/* the dashboard's two charts sit as a pair, level; each stands on its own card on a phone */
.x-lcharts.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.x-lcharts.ch-grid>.ch.wide,.x-lcharts.ch-grid>.ch-pair.wide{grid-column:auto}
@media (max-width:899px){.x-lcharts.ch-grid{grid-template-columns:minmax(0,1fr)}}
/* two charts side by side from 900 px, equal width and height: the last pair no longer spans both columns (7 Nov 2026) */
.x-lcharts.ch-grid.s2.ev>.ch-pair:last-child{grid-column:auto}
/* a table that stacks into cards on a phone reads label then value, both from the left */
@media (max-width:639px){
  body.x-doc.x-doc table.cards tbody td,body.x-doc.x-doc table.cards tbody td.n,body.x-doc.x-doc table.cards tbody td.c,body.x-doc.x-doc .stbl.cards tbody td{text-align:start}
  body.x-doc.x-doc table.cards tbody td::before{text-align:start}
  body.x-learning .x-backrow a[data-short]>span{display:none}
  body.x-learning .x-backrow a[data-short]::after{content:attr(data-short);font-weight:inherit}
}

/* ---- S4: CRM (29 October 2026) ---- */
/* a confirm that archives a company or dismisses a suggested prospect is the outline-danger button, like delete and remove. Scoped to the CRM page class: no other tool's forms are touched */
body.x-crm form[action$="/archive"] .btn[type=submit],body.x-crm form[action$="/dismiss"] .btn[type=submit]{background:transparent;border:1px solid var(--x-bad);color:var(--x-bad)}
body.x-crm form[action$="/archive"] .btn[type=submit]:hover,body.x-crm form[action$="/dismiss"] .btn[type=submit]:hover{background:var(--x-badb)}
/* the pipeline and companies cards keep their header row when the New lead / New company button has moved to the bar */
body.x-crm .hhead{min-height:0}
/* design review (30 October 2026): a button never runs past its card, and its words wrap on a phone (the deal page's Save) */
body.x-crm .card form.logbox{display:flow-root}
body.x-crm .card .btn{max-width:100%;box-sizing:border-box;white-space:normal;height:auto}
/* This week: the date column is as wide as its words ("Since 9 Oct 2026"), so it never meets the deal name */
@media (min-width:640px){body.x-crm .trow{grid-template-columns:minmax(130px,auto) minmax(0,1fr) auto}}
/* "Link quote" reads left to right: the number field, then its button */
body.x-crm form[action$="/quote"].row:has(> button[type=submit]){flex-direction:row;justify-content:flex-start;align-items:flex-end}
body.x-crm form[action$="/quote"].row>.lblin{flex:1 1 220px}
/* a long chip (the quote-differs warning) wraps inside its card on the phone instead of pushing the page wider */
body.x-crm .chips .word{min-width:0;white-space:normal;overflow-wrap:anywhere;border-radius:12px}
/* the reminder list on Offer reminders sits clear of the heading above it */
body.x-crm .wk-list{margin-top:12px}
/* the CRM's "Link a Pricing client" confirm holds its field, its question and its button in one form: the form lets them be the box's own items, so the box reads field, question, then Cancel at the left of the main button on the last line */
body.x-crm.x-doc .card .ask .askbox>form:has(> .field):has(> button.btn[type=submit]:last-child){display:contents}
body.x-crm .ask .askbox>form:has(> .field)>.field,body.x-crm .ask .askbox>form:has(> .field)>p{order:0;flex:1 1 100%;margin:0}
body.x-crm .ask .askbox>form:has(> .field)>.btn[type=submit]{order:1}
body.x-crm .ask .askbox>.x-cancel{order:2}
/* A button never wider than its card on a Learning page (29 October 2026); the expected-number row is in host/learning/pages.js (LCSS), for both frames. */
body.x-learning .card .btn,body.x-learning .card summary.btn{max-width:100%;box-sizing:border-box}
/* in the narrow side card (the company's More: Archive) the confirm's two buttons share the line, Cancel at the left, the main button at the right, instead of one under the other */
body.x-crm.x-doc .ask .askbox .btn[type=submit],body.x-crm.x-doc .ask .askbox>.x-cancel{flex:1 1 0;min-width:0;width:auto}

/* ---- S5: Pricing (31 October 2026). Every rule starts with Pricing's own page class, so no other tool's page is touched ---- */
/* voiding a quotation number is the outline-danger button, like delete and remove (its confirm is the page's own data-ask question) */
body.x-pricing form[action="/pricing/void"] .btn[type=submit]{background:transparent;border:1px solid var(--x-bad);color:var(--x-bad)}
body.x-pricing form[action="/pricing/void"] .btn[type=submit]:hover{background:var(--x-badb)}
/* the Void toggle on an issued quote is a <details> summary, not the form button: same 44 px outline-danger look */
body.x-pricing .vd>summary{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:0 16px;border:1px solid var(--x-bad);color:var(--x-bad);background:transparent}
body.x-pricing .vd>summary:hover{background:var(--x-badb)}
/* "Change client or project name" shares the toggle but is not a danger: brand blue, at the right (phone review, 13 Nov 2026) */
body.x-pricing #details.vd>summary{display:flex;width:fit-content;max-width:100%;margin-inline-start:auto;border-color:var(--x-tx);color:var(--x-tx)}
body.x-pricing #details.vd>summary:hover{background:var(--x-s2)}
/* a button never runs past its card, and its words wrap on a phone */
body.x-pricing .card .btn,body.x-pricing .card summary.btn{max-width:100%;box-sizing:border-box}
body.x-pricing .card .btn{white-space:normal}
/* the invoice table's Create buttons keep their words on one line ("pro-forma" never breaks at its hyphen); the table scrolls in its own box (phone review, 13 Nov 2026) */
body.x-pricing #invoicing .ptbl .btn{white-space:nowrap}
/* the dashboard cards: a late invoice count keeps its word beside it (the Late word is the page's own chip) */
body.x-pricing .x-kpi .word{display:inline-block;margin-inline-end:4px}
/* ---- S5 design review (31 October 2026) ---- */
/* the teal bar's facts (reference, practice, version, status) are plain text on the bar, at the start, not centred pills */
body.x-pricing .x-band ul.meta{justify-content:flex-start;padding:0}
body.x-pricing .x-band ul.meta li{background:none;border:0;padding:0}
/* tables: a hairline under each row, no cyan grid on every cell */
body.x-pricing .ptbl th,body.x-pricing .ptbl td{border:0;border-bottom:1px solid var(--x-ln)}
/* the rate card fits its card: its columns are not held at the old 1410 px */
body.x-pricing .rp .rct{min-width:0;width:100%}
@media (max-width:640px){
  body.x-pricing .rp .rct,body.x-pricing .rp .rct tbody{display:block;width:100%}
  body.x-pricing .rp .rct thead{display:none}
  body.x-pricing .rp .rct tr:not(.editing){display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;border:1px solid var(--x-frame);border-radius:12px;padding:10px 12px;margin:0 0 10px;box-sizing:border-box}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(1),body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(2),body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(3),body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(6),body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(9){display:block;border:0;padding:0;flex:1 1 40%;min-width:0}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(1){flex-basis:100%;font-weight:600}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(2)::before,body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(3)::before,body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(6)::before{display:block;font-size:.75rem;font-weight:600;color:var(--x-mu)}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(2)::before{content:"Category"}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(3)::before{content:"Unit"}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(6)::before{content:"Selling price (AED)"}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(9){flex:0 0 auto;margin-inline-start:auto}
}
/* the quote page: the Summary sits under the main column until the screen is wide enough for both, so the lines table has the whole width */
@media (min-width:1000px) and (max-width:1599px){
  body.x-pricing .qgrid{grid-template-columns:minmax(0,1fr)}
  body.x-pricing .qgrid>.pb{grid-column:1;grid-row:1}
  body.x-pricing .qside{grid-column:1;grid-row:2;order:0;position:static}
}
/* ...and below 1280 px the lines table stacks each row as a card, as it does on a phone, so nothing is cut */
@media (min-width:641px) and (max-width:1279px){
  body.x-pricing .qt.cards{min-width:0!important;border:0}
  body.x-pricing .qt.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.x-pricing .qt.cards,body.x-pricing .qt.cards tbody{display:block;width:100%}
  body.x-pricing .qt.cards colgroup{display:none}
  body.x-pricing .qt.cards tr{display:flex;flex-direction:column;border:1px solid var(--x-frame);border-radius:12px;margin:0 0 12px;padding:4px 14px;background:var(--x-sf)}
  body.x-pricing .qt.cards td{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:10px;align-items:center;min-height:44px;box-sizing:border-box;padding:6px 0;border:0;border-bottom:1px solid var(--x-ln)}
  body.x-pricing .qt.cards td:last-child{border-bottom:0}
  body.x-pricing .qt.cards td::before{font-size:.75rem;font-weight:600;color:var(--x-mu)}
  body.x-pricing .qt.cards td>*{grid-column:2;justify-self:start;max-width:100%}
  body.x-pricing .qt.cards input,body.x-pricing .qt.cards select{min-height:44px;min-width:44px}
  body.x-pricing .qt.cards tr.line>td:nth-child(1)::before{content:"Program"}
  body.x-pricing .qt.cards tr.line>td:nth-child(2)::before{content:"Item"}
  body.x-pricing .qt.cards tr.line>td:nth-child(3)::before{content:"Description"}
  body.x-pricing .qt.cards tr.line>td:nth-child(4)::before{content:"Qty"}
  body.x-pricing .qt.cards tr.line>td:nth-child(5)::before{content:"Unit"}
  body.x-pricing .qt.cards tr.line>td:nth-child(6)::before{content:"Cost per unit (internal)"}
  body.x-pricing .qt.cards tr.line>td:nth-child(7)::before{content:"Price per unit (AED)"}
  body.x-pricing .qt.cards tr.line>td:nth-child(8)::before{content:"Amount (AED)"}
}
/* More is in the bar now: the empty row it leaves in the page is not drawn */
body.x-pricing .qtabrow:empty{display:none}
/* buttons end on the card's right edge, the primary first (round 47): the quote's Quotation and files, the lock box and the versions */
body.x-pricing #actions .acts,body.x-pricing #exports,body.x-pricing #actions .xopts,body.x-pricing #versions .row,body.x-pricing .lockbox .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
/* the dashboard's list: full width, the Open button at the right edge, an outline button */
body.x-pricing .slist .shead,body.x-pricing .slist .srow{width:100%;box-sizing:border-box}
body.x-pricing .slist .srow .c-acts{justify-self:end;display:flex;justify-content:flex-end}
body.x-pricing .slist .srow .c-acts .btn{background:transparent;color:var(--x-tx);border:1px solid var(--x-cb)}
body.x-pricing .slist .srow .c-acts .btn:hover{background:var(--x-s2)}
/* the rate card's last column holds Edit item and Remove: it is as wide as they are, on one line */
@media (min-width:641px){body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(9){white-space:nowrap;width:1%}}
body.x-pricing .rp .rct .rp-edit{white-space:nowrap}
/* the units and the other editing tables fit a phone: their old fixed minimum width is dropped */
@media (max-width:640px){body.x-pricing .ptbl.edit,body.x-pricing .uct{min-width:0}body.x-pricing .uct input,body.x-pricing .uct select{min-width:0}}
/* ---- S5 design recheck (31 October 2026) ---- */
/* the quote and rate card pages hold their body to the bar's width, as the dashboard does */
@media (min-width:1360px){body.x-pricing .content>.wrap{max-width:1280px;margin-inline:auto;box-sizing:border-box}}
/* a file box and a date box in the new look: the file button is the outline button, the date a field like the others (these sit in .field boxes, so they are matched there as well) */
body.x-pricing .field input[type=file]::file-selector-button,body.x-pricing input[type=file]::file-selector-button{font:inherit!important;font-weight:600!important;font-size:14px!important;height:44px!important;padding:0 18px!important;margin-inline-end:12px!important;border-radius:8px!important;border:1px solid var(--x-cb)!important;background:var(--x-sf)!important;color:var(--x-tx)!important;cursor:pointer}
body.x-pricing .field input[type=date],body.x-pricing input[type=date]{min-height:44px;box-sizing:border-box;width:100%;padding:8px 12px;border:1px solid var(--x-cb)!important;border-radius:10px;background:var(--x-sf)!important;color:var(--x-tx)!important;font:inherit}
/* "Last changed" is a muted line inside the Rate card */
body.x-pricing .x-lastchg{margin:0 0 12px;color:var(--x-mu);font-size:.8125rem}
/* stacked rows: every label and value starts at the start edge */
body.x-pricing .qt.cards td::before{text-align:start;justify-self:start}
body.x-pricing .qt.cards td>*{text-align:start}
body.x-pricing .qt.cards td.n,body.x-pricing .qt.cards td .n{text-align:start}
/* the quote page's Invoices table stacks as cards on a phone and a narrow screen, every cell under its label */
@media (max-width:1279px){
  body.x-pricing .ptbl.x-inv{min-width:0;border:0}
  body.x-pricing .ptbl.x-inv thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.x-pricing .ptbl.x-inv,body.x-pricing .ptbl.x-inv tbody{display:block;width:100%}
  body.x-pricing .ptbl.x-inv tr{display:flex;flex-direction:column;border:1px solid var(--x-frame);border-radius:12px;margin:0 0 12px;padding:4px 14px;background:var(--x-sf);height:auto}
  body.x-pricing .ptbl.x-inv td{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:10px;align-items:center;min-height:44px;box-sizing:border-box;padding:6px 0;border:0;border-bottom:1px solid var(--x-ln);height:auto;text-align:start}
  body.x-pricing .ptbl.x-inv td:last-child{border-bottom:0}
  body.x-pricing .ptbl.x-inv td::before{font-size:.75rem;font-weight:600;color:var(--x-mu);text-align:start}
  body.x-pricing .ptbl.x-inv td>*{grid-column:2;justify-self:start;max-width:100%}
  body.x-pricing .ptbl.x-inv td:nth-child(1)::before{content:"Milestone"}
  body.x-pricing .ptbl.x-inv td:nth-child(2)::before{content:"%"}
  body.x-pricing .ptbl.x-inv td:nth-child(3)::before{content:"Amount"}
  body.x-pricing .ptbl.x-inv td:nth-child(4)::before{content:"Invoices"}
  body.x-pricing .ptbl.x-inv td:nth-child(5)::before{content:"Create"}
}
@media (max-width:640px){
  /* the rate card's actions sit on their own line, right-aligned, 44 px */
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(9){flex:1 1 100%;display:flex;justify-content:flex-end;align-items:center;gap:8px;width:auto;margin-inline-start:0}
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(9) button{min-height:44px;min-width:44px}
  /* the editing tables of the rate card (units, the default milestones) stack: the first field takes the row, the others share the next */
  body.x-pricing #r-units .ptbl.edit,body.x-pricing #r-defaults .ptbl.edit,body.x-pricing #r-units .ptbl.edit tbody,body.x-pricing #r-defaults .ptbl.edit tbody{display:block;width:100%;min-width:0}
  body.x-pricing #r-units .ptbl.edit thead,body.x-pricing #r-defaults .ptbl.edit thead{display:none}
  body.x-pricing #r-units .ptbl.edit tr,body.x-pricing #r-defaults .ptbl.edit tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--x-frame);border-radius:12px;padding:10px 12px;margin:0 0 10px;box-sizing:border-box}
  body.x-pricing #r-units .ptbl.edit td,body.x-pricing #r-defaults .ptbl.edit td{display:block;border:0;padding:0;flex:1 1 40%;min-width:0}
  body.x-pricing #r-units .ptbl.edit td:first-child,body.x-pricing #r-defaults .ptbl.edit td:first-child{flex:1 1 100%}
  body.x-pricing #r-units .ptbl.edit td input,body.x-pricing #r-defaults .ptbl.edit td input,body.x-pricing #r-units .ptbl.edit td select,body.x-pricing #r-defaults .ptbl.edit td select{width:100%;min-width:0;box-sizing:border-box}
  body.x-pricing #r-units .uct tr>td:last-child{flex:0 0 auto}
  body.x-pricing #r-defaults .ptbl.edit td:nth-child(2){flex:1 1 100%}
}
body.x-pricing .ptbl.x-inv td>*{text-align:start;overflow-wrap:anywhere}
body.x-pricing .ptbl.x-inv td .chip,body.x-pricing .ptbl.x-inv td a{white-space:normal;max-width:100%}
@media (max-width:640px){body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(6) input{text-align:start}}
/* ---- S5 phone recheck (31 October 2026) ---- */
@media (max-width:1279px){
  body.x-pricing .ptbl.x-inv td{justify-items:start;text-align:start!important}
  body.x-pricing .ptbl.x-inv td::before{text-align:start!important;justify-self:start}
}
@media (max-width:640px){
  body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(6),body.x-pricing .rp .rct tr:not(.editing)>td:nth-child(6)::before{text-align:start!important}
  /* the remove button of a unit and of a rate card item is a 44 px outline button */
  body.x-pricing #r-units .uct [data-remove-unit],body.x-pricing .rp .rct [data-remove-item]{min-width:44px;min-height:44px;box-sizing:border-box}
  /* labels on the stacked rows of the units and the default milestones (the header row is hidden there) */
  body.x-pricing #r-units .uct tr>td:nth-child(1)::before,body.x-pricing #r-units .uct tr>td:nth-child(2)::before,body.x-pricing #r-defaults .ptbl.edit td{text-align:start}
  body.x-pricing #r-units .uct tr>td:nth-child(1)::before,body.x-pricing #r-units .uct tr>td:nth-child(2)::before,body.x-pricing #r-defaults .ptbl.edit td::before{text-align:start;display:block;font-size:.75rem;font-weight:600;color:var(--x-mu);margin:0 0 2px}
  body.x-pricing #r-units .uct tr>td:nth-child(1)::before{content:"Unit"}
  body.x-pricing #r-units .uct tr>td:nth-child(2)::before{content:"Counted"}
  body.x-pricing #r-defaults .ptbl.edit td:nth-child(1)::before{content:"Milestone"}
  body.x-pricing #r-defaults .ptbl.edit td:nth-child(2)::before{content:"When"}
  body.x-pricing #r-defaults .ptbl.edit td:nth-child(3)::before{content:"Percent"}
}
/* Programs: the "No program" row carries the same labels as the program rows, and its empty cell is not drawn (a phone and a narrow screen) */
@media (max-width:640px){
  body.x-pricing .pgt.cards tr.noprog>td:nth-child(3)::before{content:"List"}
  body.x-pricing .pgt.cards tr.noprog>td:nth-child(4)::before{content:"Discount amount"}
  body.x-pricing .pgt.cards tr.noprog>td:nth-child(5)::before{content:"Net"}
  body.x-pricing .pgt.cards tr.noprog>td:empty{display:none}
}

/* ---- S6: Consultant Hub (31 October 2026). Every rule starts with the Hub's own page class, so no other tool's page is touched ---- */
/* a button never runs past its card, and its words wrap on a phone */
body.x-consultants .card .btn,body.x-consultants .card summary.btn{max-width:100%;box-sizing:border-box}
body.x-consultants .card .btn{white-space:normal}
/* the dashboard cards: a warning keeps its icon beside the title */
body.x-consultants .x-kpi .word{display:inline-block;margin-inline-end:4px}
/* the palette is locked: no amber. The Hub's own "warning" tokens (No Arabic yet, Needs fixing, a tentative hold, a note to check) are the watch colours of the new look: dark teal words, pale cyan fill, cyan ring */
body.x-consultants{--c-warn:var(--x-wa);--c-warn-bg:var(--x-wab)}
/* a chart's "watch" series (Still to fix) is cyan: the dark teal of the words sat against the green at 1.08:1 */
body.x-consultants figure[data-tgp-chart]{--c-warn:#30CBCF}
/* the Hub's pages hold their body to the bar's width, as the other tools do (the old Hub let it run to 1560 px) */
@media (min-width:1360px){body.x-consultants .content>.wrap{max-width:1280px;margin-inline:auto;box-sizing:border-box}}
/* the teal bar's facts (as of ...) are plain text on the bar, at the start, not a centred pill */
body.x-consultants .x-band ul.meta{justify-content:flex-start;padding:0}
body.x-consultants .x-band ul.meta li{background:none;border:0;padding:0}
/* tables: the head row is white on the brand blue, the theme rule (the Directory, the shortlist's team) */
body.x-consultants .dtable thead th,body.x-consultants .sltbl thead th{background:var(--x-th-bg);color:var(--x-th-tx);border-bottom:1px solid var(--x-th-ln)}
body.x-consultants .dtable thead .sorth,body.x-consultants .dtable thead th a{color:var(--x-th-tx)}
body.x-consultants .dtable thead :focus-visible{outline-color:var(--x-th-tx)}
/* the Directory's results fit their card at 1440: the name keeps a readable width, the skills may wrap */
body.x-consultants .dresults{min-width:0;overflow-x:auto}
@media (min-width:900px){body.x-consultants .dbody{grid-template-columns:232px minmax(0,1fr)}}
@media (min-width:641px){
  body.x-consultants .dtable .c-name{min-width:170px}
  body.x-consultants .dtable .c-skills{min-width:160px;max-width:240px}
}
@media (min-width:900px) and (max-width:1199px){
  body.x-consultants .dbody{grid-template-columns:224px minmax(0,1fr)}
  body.x-consultants .dtable .c-skills{min-width:120px;max-width:150px}
  body.x-consultants .dtable .c-name{min-width:130px}
  body.x-consultants .dtable .c-photo{display:none}
  body.x-consultants .dtable thead th:nth-child(2){display:none}
  body.x-consultants .dtable .c-card{min-width:90px}
}
body.x-consultants .dtable .c-skills .sk{white-space:normal;overflow-wrap:anywhere;max-width:100%}
@media (min-width:641px){body.x-consultants .dtable .c-card{min-width:104px}}
body.x-consultants .dtable .c-card .word{white-space:normal}
@media (min-width:641px){
  body.x-consultants .dtable thead th{white-space:normal;padding:0 6px}
  body.x-consultants .dtable tbody td,body.x-consultants .dtable tbody th{padding:5px 6px}
}
/* the shortlist's action column wraps instead of being cut off at the card's edge */
body.x-consultants .sltbl .sl-act{white-space:normal}
body.x-consultants .sltbl .sl-act>*{margin:2px 0}
/* every Hub button is at least 44 px, on a phone too */
body.x-consultants .card .btn,body.x-consultants .card button.tool,body.x-consultants .selbar .btn,body.x-consultants .selbar .tool{min-height:44px;box-sizing:border-box}
body.x-consultants .tp-table th{background:var(--x-th-bg);color:var(--x-th-tx)}
body.x-consultants .dtable thead th,body.x-consultants .sltbl thead th,body.x-consultants .tp-table thead th{text-align:center}
@media (min-width:641px){body.x-consultants .tbl th,body.x-consultants .tbl td{border:0;border-bottom:1px solid var(--x-ln)}}
@media (max-width:640px){body.x-consultants .tbl th,body.x-consultants .tbl td{border:0}}
body.x-consultants .tp-table td{border-color:var(--x-ln)}
@media (max-width:640px){
  /* the availability grid keeps its cell size and scrolls inside its card instead of squeezing the days together */
  body.x-consultants .av-wrapt{overflow-x:auto}
  body.x-consultants table.av{min-width:620px}
  /* the Team pack's internal note: each person is a labelled card */
  body.x-consultants .tp-table,body.x-consultants .tp-table tbody{display:block;width:100%}
  body.x-consultants .tp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.x-consultants .tp-table tr{display:flex;flex-direction:column;border:1px solid var(--x-frame);border-radius:12px;margin:0 0 12px;padding:4px 14px;background:var(--x-sf)}
  body.x-consultants .tp-table td{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:10px;align-items:center;min-height:44px;box-sizing:border-box;padding:6px 0;border:0;border-bottom:1px solid var(--x-ln);text-align:start}
  body.x-consultants .tp-table td:last-child{border-bottom:0}
  body.x-consultants .tp-table td::before{font-size:.75rem;font-weight:600;color:var(--x-mu)}
  body.x-consultants .tp-table td:nth-child(1)::before{content:"Consultant"}
  body.x-consultants .tp-table td:nth-child(2)::before{content:"Availability"}
  body.x-consultants .tp-table td:nth-child(3)::before{content:"Last confirmed"}
  body.x-consultants .tp-table td:nth-child(4)::before{content:"Profile changed"}
  body.x-consultants .tp-table td:nth-child(5)::before{content:"Check"}
  body.x-consultants .x-rha .x-btn{min-height:44px}
  /* the Directory's cards: the Card badge is on its own line under the name, so a name never wraps over four lines beside it */
  body.x-consultants .dtable tbody tr{grid-template-areas:"pick photo name name" "pick photo card card" "pick photo when when" ". . avail based" ". . deliv deliv" ". . skills skills"}
  body.x-consultants .dtable .c-card{justify-self:start;text-align:start}
  /* Skills: Save the list stays in reach at the foot of the screen */
  body.x-consultants .card:has(>.row>#skills-save){position:sticky;bottom:0;z-index:5;background:var(--x-sf);border:0;border-top:1px solid var(--x-frame);border-radius:0;box-shadow:none;margin-bottom:0;margin-inline:-16px}
  /* Groups: Move up, Move down and Remove share one row (each keeps its label for a screen reader) */
  body.x-consultants .gtbl .gacts{flex-wrap:nowrap}
  /* Team pack: each EN / AR choice is a 44 px row */
  body.x-consultants .seg2,body.x-consultants .seg2 label{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
  /* the shortlist's row actions keep a gap */
  body.x-consultants .sltbl .sl-act{display:flex;flex-wrap:wrap;gap:8px}
  body.x-consultants .sltbl .sl-act>*{margin:0}
  body.x-consultants .selbar .selgo{display:flex;flex-wrap:wrap;gap:8px}
  body.x-consultants .selbar .selgo>*{flex:1 1 140px}
}
body.x-consultants .fopt .fl{overflow-wrap:normal;word-break:normal;hyphens:none}
/* the CV file button of Import a CV is the brand button, 44 px */
body.x-consultants #cv-file::file-selector-button{font:inherit;font-weight:600;font-size:14px;height:44px;padding:0 18px;margin-inline-end:12px;border-radius:8px;border:1px solid var(--x-pr);background:var(--x-pr);color:var(--x-onp);cursor:pointer}
/* Arabic: the Back arrow points the way a right-to-left reader goes back (to the right) */
body.x-consultants:lang(ar) .x-back svg{transform:scaleX(-1)}
/* the timeline scrolls sideways, so the first and last week labels are cut by the edge of the window: they fade out there instead of ending in a hard cut */
body.x-consultants .tk-host .gantt-container{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
/* Team pack: each EN / AR choice is a 44 px row on a phone */
@media (max-width:640px){body.x-consultants .tp-opts label{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;box-sizing:border-box;padding-inline-end:12px}}

/* ---- S7: Admin (1 November 2026): Users and access, the Sign-in log, the NDA part, Email templates, Do-not-contact. Every rule starts with the Admin page class, so no other tool's page is touched ---- */
/* the palette is locked: no amber. The pages' own "warning" tokens (an outside address, a note to check) are the watch colours of the new look: dark teal words, pale cyan fill */
body.x-admin{--c-warn:var(--x-wa);--c-warn-bg:var(--x-wab)}
/* the pages hold their body to the bar's width, as the other tools do */
@media (min-width:1360px){body.x-admin .content>.wrap{max-width:1280px;margin-inline:auto;box-sizing:border-box}}
/* a button never runs past its card, its words wrap, and every control is at least 44 px (a phone too) */
body.x-admin .card .btn,body.x-admin .card button,body.x-admin .card summary.btn{max-width:100%;box-sizing:border-box;min-height:44px}
body.x-admin .card .btn,body.x-admin .card button.btn{white-space:normal}
body.x-admin .content select,body.x-admin .content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]){min-height:44px;box-sizing:border-box;max-width:100%}
body.x-admin .content input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:14px;height:44px;padding:0 18px;margin-inline-end:12px;border-radius:8px;border:1px solid var(--x-pr);background:var(--x-pr);color:var(--x-onp);cursor:pointer}
body.x-admin .content summary{min-height:44px;box-sizing:border-box}
/* tables: the head row is white on the brand blue; column headers are centred, the house rule (tests/th_center_test.js) */
body.x-admin table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th,body.x-admin .al-t th,body.x-admin .dn-t th{background:var(--x-th-bg);color:var(--x-th-tx);text-align:center;vertical-align:middle;border-bottom:1px solid var(--x-th-ln)}
body.x-admin .al-t td,body.x-admin .dn-t td,body.x-admin .ndap td{border-color:var(--x-ln)}
/* names, addresses and long reasons wrap inside their cell, at a word where there is one (a word is cut only when it is longer than its cell); a date with its time and the person who did it never break */
body.x-admin .content td,body.x-admin .content th{overflow-wrap:break-word}
@media (min-width:640px){body.x-admin .al-t td[data-l="When"],body.x-admin .al-t td[data-l="By"],body.x-admin .dn-t td.dn-when{white-space:nowrap}}
body.x-admin .ac-env{margin:0 0 12px}
body.x-admin .ac-env summary{cursor:pointer;color:var(--x-tx)}
body.x-admin .ac-env ul{margin:8px 0 0;padding-inline-start:20px}
/* a person's Save and Remove are two forms one under the other: 12 px between them */
body.x-admin form[action="/access/remove"]{margin-block-start:12px}
body.x-admin .ndap .scroll{overflow-x:auto}
/* the tool ticks and the log filters keep a readable width and wrap instead of squeezing */
body.x-admin .ac-grid{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
body.x-admin .al-f>div{min-width:0;flex:1 1 180px}
body.x-admin .al-f input[type=text]{width:100%}
body.x-admin .al-pg{flex-wrap:wrap}
/* the cards of one column are spaced as the other tools' cards are */
body.x-admin .content>.wrap>.card,body.x-admin .content>.wrap>section.card{margin-block-end:16px}
@media (max-width:640px){
  /* phone: the action rows stack, every button takes the width it needs and no more, and the fields take the line */
  body.x-admin .ac-row{align-items:stretch}
  body.x-admin .ac-row>.btn,body.x-admin .ac-row>button{flex:1 1 100%}
  body.x-admin .ac-row input,body.x-admin .ac-row select{flex:1 1 100%;width:100%}
  body.x-admin .dn-row .btn,body.x-admin section[aria-labelledby="dn-add"] form>.btn{flex:1 1 100%;width:100%;justify-content:center}
  /* the log's rows are stacked cells on a phone: their text starts at the start of the line (the column heads are hidden there) */
  body.x-admin.x-doc.x-doc table.al-t td,body.x-admin.x-doc.x-doc table.al-t td.c{text-align:start}
  /* a stacked cell with nothing in it (the log's Where) shows no label either */
  body.x-admin.x-doc.x-doc table.al-t td:empty{display:none}
  body.x-admin .dn-f{grid-template-columns:minmax(0,1fr)}
  body.x-admin .al-f .btn{flex:1 1 100%;justify-content:center}
  body.x-admin .chk{min-height:44px}
}
/* ---- S10: Pricing money pages (Payments, Check and issue), 1 November 2026. Their page class is "x-pricing x-pricing-money", so the Pricing rules above apply to them too; every rule below starts with body.x-pricing-money. Look only: no figure, order or word changes ---- */
/* tables: the pale head of the new look, column headers centred (tests/th_center_test.js), money in tabular figures at the end of its cell */
body.x-pricing-money table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th{background:var(--x-th-bg);color:var(--x-th-tx);text-align:center;vertical-align:middle;border-bottom:1px solid var(--x-th-ln)}
body.x-pricing-money table td{border-color:var(--x-ln)}
body.x-pricing-money td.n,body.x-pricing-money .money,body.x-pricing-money .mcount,body.x-pricing-money .optc span{font-variant-numeric:tabular-nums}
body.x-pricing-money td.n{text-align:end}
/* a card, a chip, a table or a long reference never makes the page wider than the phone */
body.x-pricing-money .card,body.x-pricing-money .co,body.x-pricing-money .pend,body.x-pricing-money .notice{min-width:0;overflow-wrap:anywhere}
body.x-pricing-money .scroll{max-width:100%;overflow-x:auto}
/* every control is at least 44 px */
body.x-pricing-money .card input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),body.x-pricing-money .card select{min-height:44px;box-sizing:border-box;max-width:100%}
body.x-pricing-money .card .btn,body.x-pricing-money .card button,body.x-pricing-money .card summary{min-height:44px;box-sizing:border-box}
body.x-pricing-money .x-tabs a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
body.x-pricing-money .pgchips li,body.x-pricing-money .pgopt,body.x-pricing-money .optc{min-height:44px}
/* the issue step: the meter and the option cards in the palette of the new look */
body.x-pricing-money .meterx{background:var(--x-ln)}
body.x-pricing-money .meterx>span,body.x-pricing-money .pgbar>span{background:var(--x-pr)}
body.x-pricing-money .pgbar{background:var(--x-ln)}
body.x-pricing-money .optc[aria-current=true],body.x-pricing-money .pgopt:has(input:checked){border-color:var(--x-pr);background:var(--x-cur)}
body.x-pricing-money .notice{border-color:var(--x-frame);background:var(--x-wab);color:var(--x-tx)}
@media (min-width:1360px){body.x-pricing-money .content>.wrap{max-width:1280px;margin-inline:auto;box-sizing:border-box}}
@media (max-width:640px){
  /* the action rows of a card stack and fill the line */
  body.x-pricing-money .golive .btn,body.x-pricing-money .golive button,body.x-pricing-money .pend .acts .btn,body.x-pricing-money .pend .acts button{width:100%;justify-content:center}
  body.x-pricing-money .pgopts{grid-template-columns:minmax(0,1fr)}
  body.x-pricing-money .cohead .money{margin-inline-start:0}
}

/* a hidden section stays hidden whatever display its own class sets (the quote's Price, Files and History views hide the cards of the other views; the builder script still finds them) */
body.x-pricing [hidden]{display:none!important}

/* ---- S7 follow-up (1 November 2026, Akram's screenshots): one spacing scale for every Admin section and form ----
   scale: 6 px label to its own field, 8 px heading to its line, 16 px between a line and what follows, between fields and before a button, 24 px before a sub-heading */
body.x-admin .content .card>h2{margin:0 0 8px}
body.x-admin .content .card>h2+.hint,body.x-admin .content .card>h2+p{margin:0 0 16px}
body.x-admin .content .ac-p .who{margin:0 0 16px}
body.x-admin .content .card>.hint+.card,body.x-admin .content .card>.ac-note+.card{margin-top:0}
/* Engagement access: each engagement is a card inside the section, with room inside and 12 px between the cards */
body.x-admin details.eg{padding:16px 20px;margin:0 0 12px}
body.x-admin details.eg:last-of-type{margin-bottom:0}
body.x-admin .eg .eg-form{margin:16px 0 0;padding-top:16px}
body.x-admin .eg .eg-form h3{margin:0 0 12px}
body.x-admin .eg .ac-log{margin-top:12px}
/* a label sits on top of its own field (6 px) and the next label is 16 px further down; a row with a button in it stays one line of controls */
body.x-admin .content form .ac-row:not(:has(> button)):not(:has(> .btn)){flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px;margin:0 0 16px}
body.x-admin .content form .ac-row:not(:has(> button)):not(:has(> .btn))>label{margin:0}
body.x-admin .content form .ac-row:not(:has(> button)):not(:has(> .btn))>input,body.x-admin .content form .ac-row:not(:has(> button)):not(:has(> .btn))>select{flex:none;width:100%;max-width:100%}
body.x-admin .content fieldset.ac-grid:has(> .ac-row){gap:16px}
body.x-admin .content fieldset.ac-grid>.ac-row{margin:0}
body.x-admin .content form>.ac-row:has(> button:only-child),body.x-admin .content form>.ac-row:has(> .btn:only-child){margin-top:16px}
/* a note that introduces the fields after it reads as a sub-heading, with room above */
body.x-admin .ndap form>p.hint{margin:24px 0 12px;font-weight:600;font-size:.9375rem;color:var(--x-tx)}
body.x-admin .content form>.ac-row:has(> button:only-child),body.x-admin .content form>.ac-row:has(> .btn:only-child){justify-content:flex-end}
/* the notes of the email screens use the watch colours of the new look (pale cyan, dark teal words), never amber */
body.x-doc .mp-flash,body.x-doc .mp-pill.ed,body.x-doc .mpj-flash,body.x-doc .mpj-pill.ed{background:var(--x-wab);color:var(--x-wa)}
/* a row that holds a button: its label sits tight on its field (6 px, as every label), and a submit button ends the row at the inline end (Add a person) */
body.x-admin .content form .ac-row:has(> button){row-gap:6px}
body.x-admin .content form .ac-row:has(> button)>label{margin:0}
body.x-admin .content form .ac-row>button.btn[type=submit]:last-child{margin-inline-start:auto}
/* two full-width buttons one under the other (the CRM legal details): 8 px between them */
body.x-crm .card>details+details,body.x-crm .card>details+form+details{margin-top:8px}
body.x-admin .dn-f{gap:16px 12px}
body.x-admin .dn-f label{margin:0 0 6px}
body.x-admin .dn-f+.btn,body.x-admin form>.dn-f+*{margin-top:4px}
/* the palette is locked: no amber on any tool page. Every old-theme page reads its "warning" tokens as the watch colours (dark teal words on pale cyan, cyan words on deep teal in dark), with a 1 px cyan ring and the diamond (1 Nov 2026, design review) */
body.x-doc{--c-warn:var(--x-wa);--c-warn-bg:var(--x-wab)}
body.x-doc .word.chk,body.x-doc .wk-sev.amber,body.x-doc .tag.akram{border-color:var(--x-wr);background:var(--x-wab);color:var(--x-wa)}
body.x-doc .word.chk::before,body.x-doc .wk-sev.amber::before{content:"";display:inline-block;width:7px;height:7px;background:currentColor;transform:rotate(45deg);border-radius:1px;margin-inline-end:7px;vertical-align:middle}
body.x-doc .wk-item.amber,body.x-doc .card.proposals,body.x-doc .pcard,body.x-doc .pcard.late{border-color:var(--x-wr)}
body.x-doc .wk-item.amber{background:var(--x-wab)}
/* a chosen colour shows on the tabs, chips and links as the line colour (words in Mid Blue on white are 3.7:1, under AA, so words stay Deep Blue) */
:root[data-x-accent] body.x-doc .ltabs a[aria-current=page],:root[data-x-accent] body.x-doc .seg a[aria-current=page],:root[data-x-accent] body.x-doc .sfbtn[aria-pressed=true]{border-width:2px;border-color:var(--x-frame)}
:root[data-x-accent] body.x-doc .word:not(.chk){border-color:var(--x-frame)}
:root[data-x-accent] body.x-doc a:not(.x-btn):not(.btn){text-decoration-color:var(--x-frame);text-decoration-thickness:2px;text-underline-offset:3px}
body.x-doc figure[data-tgp-chart]{--c-warn:var(--x-wr)}
/* ---- S12: Finance (Accounts and Books), 2 November 2026. Their page class is "x-pricing x-finance", so the Pricing rules above apply to them too; every rule below starts with body.x-finance. Look only: no figure, order or word changes ---- */
/* tables: the pale head of the new look, column headers centred (tests/th_center_test.js), money in tabular figures at the end of its cell */
body.x-finance table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th{background:var(--x-th-bg);color:var(--x-th-tx);text-align:center;vertical-align:middle;border-bottom:1px solid var(--x-th-ln)}
body.x-finance table td{border-color:var(--x-ln)}
body.x-finance td.n,body.x-finance .money,body.x-finance .bk-tbl td.n,body.x-finance .db-tbl td.n{font-variant-numeric:tabular-nums}
body.x-finance .content td,body.x-finance .content th{overflow-wrap:break-word}
/* a card, a figure, a table or a long reference never makes the page wider than the phone */
body.x-finance .card,body.x-finance .bk-fig,body.x-finance .bk-stat,body.x-finance .bk-job,body.x-finance .bk-hgrp{min-width:0;overflow-wrap:anywhere}
body.x-finance .scroll,body.x-finance .bk-wrap{max-width:100%;overflow-x:auto}
/* every control is at least 44 px */
body.x-finance .content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),body.x-finance .content select{min-height:44px;box-sizing:border-box;max-width:100%}
body.x-finance .content .btn,body.x-finance .content button,body.x-finance .content summary{min-height:44px;box-sizing:border-box;max-width:100%}
body.x-finance .content .btn,body.x-finance .content button.btn{white-space:normal}
body.x-finance .x-tabs a,body.x-finance .ltabs a,body.x-finance .billtabs a,body.x-finance .cl-tabs a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
body.x-finance .ltabs a[aria-current="page"],body.x-finance .ltabs a[aria-current="true"],body.x-finance .billtabs a[aria-current="page"],body.x-finance .cl-tabs a[aria-current="page"]{background:var(--x-cur);border:1px solid var(--x-frame);color:var(--x-tx);font-weight:600}
/* Books' own menu (the page keeps it): its panel in the palette of the new look */
body.x-finance .bk-mgrps{background:var(--x-sf);border-color:var(--x-ln)}
body.x-finance .bk-mgrp li a[aria-current=page]{background:var(--x-cur);font-weight:600;text-decoration:none}
body.x-finance .bk-flag.ok,body.x-finance .bk-chip.ok{background:var(--x-cur);border-color:var(--x-frame);color:var(--x-tx)}
body.x-finance .bk-bar>i{background:var(--x-pr)}
/* Money overview: the Board's blocks, in their folds */
body.x-finance .bd-money summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;min-height:44px;box-sizing:border-box}
body.x-finance .bd-money summary::-webkit-details-marker{display:none}
body.x-finance .bd-money summary>.bd-chev{margin-inline-start:auto;flex:none}
body.x-finance .bd-money details[open]>summary>.bd-chev{transform:rotate(180deg)}
body.x-finance .bd-money summary:hover{background:var(--x-s2)}
/* Finance is English only (6 November 2026): a ?lang=ar address goes to the English page, so the EN / Arabic links of the Books pages are not drawn */
body.x-finance a.btn[hreflang][href^="/accounts/books"],body.x-finance nav.bk-acts[aria-label="Language"]:has(a[href^="/accounts/books"]){display:none}
body.x-finance .bd-money .asof::first-letter{text-transform:uppercase}
@media (min-width:1360px){body.x-finance .content>.wrap{max-width:1280px;margin-inline:auto;box-sizing:border-box}}
@media (max-width:640px){
  /* the action rows of a card stack and fill the line */
  body.x-finance .bk-acts .btn,body.x-finance .bk-acts button{flex:1 1 100%;justify-content:center}
  body.x-finance .content form .btn[type=submit]{justify-content:center}
}

/* S12 design review (2 November 2026): figures in tabular numerals and amounts at the end of their cell; the trail on its own line above the title; menu items 44 px; the language switch as one small control in the bar */
body.x-finance .content{font-variant-numeric:tabular-nums}
body.x-finance td.n,body.x-finance td[data-label="Total"],body.x-finance td[data-label="Amount"],body.x-finance td[data-label="Still owed"],body.x-finance td[data-label="Value"],body.x-finance td[data-label="Weighted"],body.x-finance td[data-label="Invoiced"],body.x-finance td[data-label="Paid"],body.x-finance td[data-label="Deals"]{text-align:end;white-space:nowrap}
body.x-finance .x-crumbs ol{display:flex;flex-wrap:wrap;align-items:center}
body.x-finance .x-crumbs li:last-child{flex:1 0 100%}
body.x-finance .x-crumbs .x-lastsep{display:none}
body.x-finance .x-pop .x-mi{min-height:44px;box-sizing:border-box}
body.x-finance .x-langsw{display:inline-flex;gap:4px}
body.x-finance .x-langsw .x-btn{min-height:44px;width:auto;padding:0 12px;box-sizing:border-box}
body.x-finance .x-langsw .x-btn[aria-current="true"]{background:var(--x-bbtn);border-color:var(--x-bbtn);color:var(--x-bbtnt);font-weight:600}
@media (max-width:640px){
  /* the invoice list: one card per invoice, three lines (number and status, client and date, total); a field with nothing in it is not drawn; the rest only when it has something to say */
  body.x-finance .itbl.cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 14px}
  body.x-finance .itbl.cards td{display:block;border:0;padding:0;min-width:0;text-align:start}
  body.x-finance .itbl.cards td::before{display:none}
  body.x-finance .itbl.cards td:empty{display:none}
  body.x-finance .itbl.cards td[data-label="Number"]{grid-column:1;grid-row:1;font-weight:600}
  body.x-finance .itbl.cards td[data-label="Status"]{grid-column:2;grid-row:1;justify-self:end}
  body.x-finance .itbl.cards td[data-label="Client"]{grid-column:1;grid-row:2}
  body.x-finance .itbl.cards td[data-label="Date"]{grid-column:2;grid-row:2;justify-self:end}
  body.x-finance .itbl.cards td[data-label="Total"]{grid-column:1/-1;grid-row:3;font-weight:600}
  body.x-finance .itbl.cards td[data-label="Type"],body.x-finance .itbl.cards td[data-label="From"],body.x-finance .itbl.cards td[data-label="Money"],body.x-finance .itbl.cards td[data-label="Odoo"]{grid-column:1/-1;font-size:.8125rem}
  body.x-finance .itbl.cards td[data-label="Type"]{grid-row:4}
  body.x-finance .itbl.cards td[data-label="From"]{grid-row:5}
  body.x-finance .itbl.cards td[data-label="Odoo"]{grid-row:7}
  body.x-finance tr.m-cap{display:none}
  body.x-finance .itbl.cards td[data-label="Money"]{grid-row:6}
  body.x-finance .itbl.cards td[data-label="From"]::before,body.x-finance .itbl.cards td[data-label="Money"]::before,body.x-finance .itbl.cards td[data-label="Odoo"]::before{display:inline;content:attr(data-label) ": ";font-weight:600}
  /* Money overview: the pipeline and invoiced tables as one card per row (stage, deals, value, chance, weighted), no sideways scroll */
  body.x-finance .pvt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.x-finance .pvt,body.x-finance .pvt tbody,body.x-finance .pvt tfoot{display:block;width:100%}
  body.x-finance .pvt tr{display:block;border:1px solid var(--x-ln);border-radius:12px;padding:10px 12px;margin:0 0 10px}
  body.x-finance .pvt th[scope=row]{display:block;text-align:start;font-weight:700;padding:0 0 6px;border:0}
  body.x-finance .pvt td{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 0;text-align:end}
  body.x-finance .pvt td::before{content:attr(data-label);font-weight:600;color:var(--x-mu);text-align:start}
  body.x-finance .pvt td:empty{display:none}
  body.x-finance .pv-wrap{overflow:visible}
}
/* ---- S8: Board, Automations and Approvals (1 November 2026). Every rule starts with the Board's own page class, so no other tool's page is touched ---- */
/* the palette is locked: no amber. The Board's own "warning" tokens (a stale panel, a part payment, a late note, a money tag) are the watch colours of the new look: dark teal words, pale cyan fill, cyan ring */
body.x-board{--c-warn:var(--x-wa);--c-warn-bg:var(--x-wab)}
/* a button never runs past its card, its words wrap, and every control is at least 44 px (a phone too) */
body.x-board .content .btn,body.x-board .content button,body.x-board .content summary.btn{max-width:100%;box-sizing:border-box;min-height:44px}
body.x-board .content .btn,body.x-board .content button.btn{white-space:normal}
body.x-board .content select,body.x-board .content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]){min-height:44px;box-sizing:border-box;max-width:100%}
body.x-board .content summary{min-height:44px;box-sizing:border-box}
/* the page's own view tabs (Today, Team, Week, Finance, Delivery): the current one is the pale cyan pill of the new look, not a solid block */
body.x-board .bd-tab[aria-current="page"],body.x-board .bd-lnk[aria-current="page"],body.x-board .ltabs a[aria-current="page"],body.x-board .ltabs a[aria-current="true"]{background:var(--x-cur);border:1px solid var(--x-frame);color:var(--x-tx);font-weight:600}
body.x-board .bd-tab[aria-current="page"] .tgi,body.x-board .bd-lnk[aria-current="page"] .tgi{color:var(--x-tx)}
/* the Approvals tab of the Board (2 November 2026): a plain link to its own page that sits in the row of the Board's view tabs, drawn like them. It is only there in the new look, so the rules are here and not in the page's own style */
body.x-board .bd-lnk{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:6px 10px;border-radius:11px;text-decoration:none;color:var(--bd-text);font-size:.9375rem;font-weight:500;text-align:center;line-height:1.2;box-sizing:border-box}
body.x-board .bd-lnk .tgi{color:var(--bd-icon)}
body.x-board .bd-lnk:hover{background:var(--bd-hover)}
/* the number on a tab is the same pale round pill on every page; on a phone the icon sits above and the label and its number share ONE line, so every tab is the same height */
body.x-board .bd-tabs .bd-n{background:var(--x-s2);color:var(--x-tx);border:1px solid var(--x-ln);box-sizing:border-box}
@media (max-width:560px){
body.x-board .bd-tabs .bd-tab,body.x-board .bd-tabs .bd-lnk{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;align-content:center;align-items:center;column-gap:6px;row-gap:2px;font-size:.8125rem;padding:6px 2px;min-height:56px}
body.x-board .bd-tabs .bd-tab>.tgi,body.x-board .bd-tabs .bd-lnk>.tgi{grid-column:1/-1}
body.x-board .bd-tabs.n5{grid-template-columns:repeat(3,minmax(0,1fr))}
body.x-board .ap-item,body.x-board .ap-item[data-risk="money"]{border:0;border-radius:0;padding-left:0;padding-right:0}
body.x-board #mail-hold .mh-list{gap:0}
body.x-board #mail-hold .mh-item{border:0;border-top:1px solid var(--x-ln);border-radius:0;background:transparent;padding:12px 0}
body.x-board #mail-hold .mh-item:first-child{border-top:0}
body.x-board .x-nyr li:has(.x-btn[href^="/board/approvals"]) .x-b{display:none}
body.x-board .x-nyr li .x-btn[href^="/board/approvals"]{grid-column:1/-1;justify-self:stretch;justify-content:center;width:100%}
}
/* a card is framed by the section round it, not by a dark outline of its own (a money change was drawn in the Deep Blue); real keyboard focus keeps its ring */
body.x-board .ap-item[data-risk="money"]{border-color:var(--bd-line)}
body.x-board .ap-counts{margin:0 0 12px;font-size:1rem;font-weight:500}
/* "Open" on a change is an outline button like Reject, with a 44 px tap area */
body.x-board .ap-acts a.lnk{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:44px;box-sizing:border-box;padding:0 1rem;border:1px solid var(--x-cb);border-radius:9999px;background:transparent;color:var(--x-tx);font-weight:500;text-decoration:none}
body.x-board .ap-acts a.lnk:hover{background:var(--x-s2)}
/* tables: the head row is the pale head of the new look; column headers are centred, the house rule (tests/th_center_test.js) */
body.x-board table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th{background:var(--x-th-bg);color:var(--x-th-tx);text-align:center;vertical-align:middle;border-bottom:1px solid var(--x-th-ln)}
body.x-board table td{border-color:var(--x-ln)}
body.x-board .content td,body.x-board .content th{overflow-wrap:break-word}
/* the Dashboard's split table */
body.x-board .x-split{width:100%;border-collapse:collapse}
body.x-board .x-split td.num{text-align:center;white-space:nowrap}
body.x-board .x-split td.act{text-align:end}
body.x-board .x-split td,body.x-board .x-split th{padding:10px 12px;border-bottom:1px solid var(--x-ln)}
/* the Approvals page: cards one under the other, a decision group at the right end of its row, Reject opening its reason beside it */
body.x-board .ap-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
body.x-board .ap2g .ap-gacts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:0 0 4px}
body.x-board .ap2 .ap-acts{justify-content:flex-end;align-items:center}
body.x-board .ap2 .ap-acts .lnk{display:inline-flex;align-items:center;min-height:44px}
body.x-board .ap2 .ap-rejform{flex:1 1 320px;min-width:0;margin:0}
body.x-board .ap-rejform,body.x-board .ap-askbox form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
body.x-board .ap-rejform input,body.x-board .ap-askbox form input[type=text]{flex:1 1 220px;min-width:0}
body.x-board .ap-fold{margin:16px 0 0}
body.x-board .ap-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:600}
body.x-board .ap-fold>summary::-webkit-details-marker{display:none}
body.x-board .ap-fold>summary .bd-chev{margin-inline-start:auto;transition:transform .15s}
body.x-board .ap-fold[open]>summary .bd-chev{transform:rotate(180deg)}
body.x-board .flabel{font-weight:600;margin-inline-end:8px}
body.x-board .ap-confirm .btn{margin-inline-start:8px}
@media (max-width:640px){
  /* phone: the action rows stack, every button takes the width it needs and no more, and the fields take the line */
  body.x-board .ap2 .ap-acts{justify-content:stretch}
  body.x-board .ap2 .ap-acts>form,body.x-board .ap2 .ap-acts>.btn{flex:1 1 100%}
  body.x-board .ap2 .ap-rejform input{flex:1 1 100%}
  body.x-board .ap2 .ap-rejform .btn{flex:1 1 100%}
  body.x-board .ap2 .ap-acts>form .btn{width:100%;justify-content:center}
  /* the reason takes its line, then Reject and Approve side by side, Approve at the right; Open under them at the right (phone review, 13 Nov 2026).
     The reject form's box is dropped (display:contents) so its field and button join the row; the button still sends its own form. */
  body.x-board .ap2 .ap-acts>form.ap-rejform{display:contents}
  body.x-board .ap2 .ap-acts>form.ap-rejform .btn{flex:1 1 calc(50% - 4px);min-width:0;width:auto}
  body.x-board .ap2 .ap-acts>form:not(.ap-rejform){flex:1 1 calc(50% - 4px);min-width:0}
  body.x-board .ap2 .ap-acts>form .btn{min-width:0}
  body.x-board .ap2 .ap-acts>a.lnk{margin-inline-start:auto}
  body.x-board .ap2g .ap-gacts>details{flex:1 1 100%}
  body.x-board .x-split td.act{text-align:start}
}
/* folds show their chevron at the right of the row, turned up when open (DESIGN-RULES, the Office legend included); the whole row is the click target */
body.x-board #bd summary > .bd-chev{margin-inline-start:auto;flex:none}
body.x-board #bd details[open] > summary > .bd-chev{transform:rotate(180deg)}
body.x-board #bd .ts-legend>summary::before{display:none}
body.x-board #bd .ts-legend>summary::after{content:"";margin-inline-start:auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
body.x-board #bd .ts-legend[open]>summary::after{transform:rotate(-135deg)}
body.x-board #bd summary:hover{background:var(--x-s2)}
/* Automations (S8 design review): the three small columns of the switchboard are table cells at every width but a phone (the theme's .meta rule had made them flex boxes, which stacked them) */
body.x-board .au td.meta{display:table-cell}
/* the Pause controls: "Pause all" at the end of its row; the tool list and its Pause button on one row, the button at the inline end */
body.x-board .au .pauses{flex-direction:column;align-items:stretch;gap:12px}
body.x-board .au .pauses>form:not(.one){align-self:flex-end}
body.x-board .au .pauses .one{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
body.x-board .au .pauses .one select{flex:1 1 auto;min-width:0}
body.x-board .au .pauses .one button{margin-inline-start:auto;flex:none}
/* the current Automations tab is the pale cyan pill, like every other tab row */
body.x-board .au .tabs a.to[aria-current="page"]{background:var(--x-cur);border:1px solid var(--x-frame);color:var(--x-tx);font-weight:600}
body.x-board .au .tabs a.to{min-height:44px;box-sizing:border-box}
/* labels that start a sentence start with a capital ("Not received yet", "As of ...") */
body.x-board .asof::first-letter,body.x-board .meta.asof::first-letter{text-transform:uppercase}
/* the Delivery tracker's empty text reads from the start of the line */
body.x-board .dl-empty .none,body.x-board .dl-emptyh,body.x-board .dl-empty{text-align:start}
@media (max-width:760px){
  body.x-board .au td.meta{display:block}
  /* the three tabs share the width one to a line, so none sits alone */
  body.x-board .au .tabs a.to{flex:1 1 100%;justify-content:center}
}
body.x-board .ap2g h2,body.x-board .ap2 .ap-sum{overflow-wrap:anywhere}
body.x-board .dl-empty{justify-content:flex-start;text-align:start}
body.x-board .dl-empty .dl{width:100%}
@media (max-width:640px){
  body.x-board .ap2g .ap-gacts summary.btn{width:100%;justify-content:center;box-sizing:border-box}
  body.x-board .ap2g .ap-askbox form{justify-content:flex-end}
  body.x-board .ap2g .ap-askbox .btn{flex:1 1 100%}
}
/* S8 design re-check: held emails (Send all, Open, Discard) end on the inline-end edge of their rows */
body.x-board .mh-group>.ap-acts,body.x-board .mh-item .ap-acts{justify-content:flex-end}
body.x-board .mh-item .ap-acts .btn,body.x-board .mh-item .ap-more>summary{min-height:44px}
/* the Delivery tracker's empty state: the text and Refresh on one line, Refresh at the inline end */
body.x-board .dl-empty .dl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
body.x-board .dl-empty .dl-emptyh{flex:1 1 100%;margin:0}
body.x-board .dl-empty .dl .none{flex:1 1 280px;margin:0}
body.x-board .dl-empty .dl>:last-child:not(.none):not(.dl-emptyh){margin-inline-start:auto}
@media (max-width:640px){
  /* the two group decisions share one row at the inline end; an opened one takes the full width so its confirm sits right under its own button */
  body.x-board .ap2g .ap-gacts{justify-content:flex-end;flex-wrap:wrap}
  body.x-board .ap2g .ap-gacts>details{flex:0 1 auto}
  body.x-board .ap2g .ap-gacts>details[open]{flex:1 1 100%}
  body.x-board .ap2g .ap-gacts summary.btn{width:auto}
  body.x-board .ap2g .ap-gacts>details[open] summary.btn{width:100%}
}

/* ===== Work Tracker (S9, 1 November 2026): the engagements list, the shell around the workspace, the staff pages. Everything is scoped to body.x-tracker. The workspace's own markup (its ids, data attributes, form names) is not touched: it is only restyled and the old white bar, whose three controls the strip carries now, is not drawn. ===== */
/* the old white bar keeps what the strip does not carry: the breadcrumb, More (#ws-file and its menu: Reset all, the careful tools, Reports, Charts, KPIs, the BPM view, new engagement), Print and Dark. Only what the strip replaces is not drawn: the logo, the title, TGP Tools, Sign out and the name (all ids stay in the page). */
body.x-tracker header.masthead.ws-masthead .wordmark,:root[data-theme] body.tools.x-tracker header.masthead.ws-masthead img.wordmark,:root body.tools.x-tracker header.masthead.ws-masthead img.wordmark,body.x-tracker header.masthead.ws-masthead h1,body.x-tracker header.masthead.ws-masthead #ws-tools,body.x-tracker header.masthead.ws-masthead form.so,body.x-tracker header.masthead.ws-masthead #ws-me{display:none!important}
body.x-tracker header.masthead.ws-masthead,:root[data-theme] body.tools.x-tracker header.masthead.ws-masthead{background:var(--x-band);color:var(--x-bt);border-bottom:0}
body.x-tracker header.masthead.ws-masthead>.wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:8px 28px 0;max-width:var(--d-app,1380px);margin:0 auto;box-sizing:border-box}
/* the crumbs, More, Print and Dark ride on the teal bar: white, outlined */
body.x-tracker .ws-crumbs ol,body.x-tracker .ws-crumbs li+li::before{color:var(--x-bt2)}
body.x-tracker .ws-crumbs a,body.x-tracker .ws-crumbs [aria-current=page]{color:var(--x-bt)}
body.x-tracker .ws-crumbs [aria-current=page]{font-weight:600}
body.x-tracker header.masthead.ws-masthead .barend>button,body.x-tracker header.masthead.ws-masthead .barend>.menuwrap>button,body.tools.x-tracker header.masthead.ws-masthead .barend .menuwrap>button#ws-file{background:transparent;color:var(--x-bt);border:1px solid var(--x-bt);border-radius:999px}
body.x-tracker header.masthead.ws-masthead .barend>button:hover,body.x-tracker header.masthead.ws-masthead .barend>.menuwrap>button:hover,body.tools.x-tracker header.masthead.ws-masthead .barend .menuwrap>button#ws-file:hover{background:var(--x-bhov);color:var(--x-bt)}
body.x-tracker header.masthead.ws-masthead :focus-visible{outline:2px solid var(--x-bt);outline-offset:2px}
body.x-tracker header.masthead.ws-masthead .menu button{color:var(--x-tx)}
body.x-tracker header.masthead.ws-masthead .barend button,body.x-tracker header.masthead.ws-masthead .barend .menuwrap>button{min-height:44px;min-width:44px}
/* the workspace page only (its body has the class tools): its own Print and Dark (#ws-print, #ws-theme, driven by its scripts) stay, so the strip's account menu does not offer a second pair. Every other Tracker page keeps the strip's pair. */
body.tools.x-tracker .x-pop [data-x-print],body.tools.x-tracker .x-pop [data-x-theme]{display:none}
/* the banners the page script puts first in the body (base error, sandbox, preview) sit below the strip */
body.x-tracker{display:flex;flex-direction:column}
body.x-tracker>.x-strip{order:-1}
/* 7 Nov 2026 (Akram's screenshots): the Apps menu and the bell panel opened BEHIND the tracker's sticky header (ws_design.css masthead z-index 56). 58: above the masthead, below the tracker dialogs (.modal 60) and the toast (70) */
body.x-tracker>.x-strip{z-index:58}
body.x-tracker>*{min-width:0}
body.x-tracker .tgp-band,:root[data-theme] body.x-tracker .tgp-band{background:var(--x-band);color:var(--x-bt);padding:6px 0 16px}
body.x-tracker .tgp-band .tgp-art,body.x-tracker .tgp-tail{display:none}
body.x-tracker .tgp-band h1,body.x-tracker .tgp-band .lead{color:var(--x-bt);text-align:start;margin-inline:0;max-width:none}
body.x-tracker .tgp-band h1{font-size:1.5rem}
body.x-tracker nav#ws-tabs.maintabs,:root[data-theme] body.x-tracker nav#ws-tabs.maintabs{background:var(--x-band);border-bottom:0}
body.x-tracker nav#ws-tabs .maintabs-in button,:root[data-theme] body.x-tracker nav#ws-tabs .maintabs-in button{min-height:44px;background:transparent;color:var(--x-bt);border:1px solid transparent;box-shadow:none}
body.x-tracker nav#ws-tabs .maintabs-in button:hover{background:var(--x-bhov);color:var(--x-bt)}
body.x-tracker nav#ws-tabs .maintabs-in button.on,:root[data-theme] body.x-tracker nav#ws-tabs .maintabs-in button.on{background:var(--x-cur);color:var(--x-tx);border-color:var(--x-frame);font-weight:600}
body.x-tracker nav#ws-tabs .maintabs-in button:focus-visible{outline:2px solid var(--x-bt);outline-offset:2px}
body.x-tracker #toolbar .bar-in button,body.x-tracker #toolbar .bar-in .menu button{min-height:44px}
body.x-tracker .wshead{position:relative}
html[dir=rtl] body.x-tracker .tgp-band h1{text-align:start}
/* the staff pages and the Engagements list (the shared frame) */
body.x-tracker{--c-warn:var(--x-wa);--c-warn-bg:var(--x-wab)}
@media (min-width:1360px){body.x-tracker .content>.wrap{max-width:1280px;margin-inline:auto;box-sizing:border-box}}
body.x-tracker .content select,body.x-tracker .content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),body.x-tracker .content .btn,body.x-tracker .content button{min-height:44px;box-sizing:border-box;max-width:100%}
body.x-tracker .content summary{min-height:44px;box-sizing:border-box}
body.x-tracker table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th,body.x-tracker .eg-t th{background:var(--x-th-bg);color:var(--x-th-tx);text-align:center;vertical-align:middle;border-bottom:1px solid var(--x-th-ln)}
body.x-tracker .content td,body.x-tracker .content th{overflow-wrap:break-word}
body.x-tracker .eg-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
body.x-tracker .eg-filter .x-btn[aria-current=page]{background:var(--x-cur);border-color:var(--x-frame);font-weight:600}
body.x-tracker .eg-n{display:inline-block;min-width:1.4em;padding:0 6px;border-radius:999px;background:var(--x-s2);text-align:center;font-size:12px}
body.x-tracker .eg-wrap{border:1px solid var(--x-frame);border-radius:12px;overflow:hidden}
body.x-tracker .eg-t{width:100%;border-collapse:collapse}
body.x-tracker .eg-t td{padding:12px 14px;border-top:1px solid var(--x-ln);text-align:start;vertical-align:middle}
body.x-tracker .eg-t td:first-child a{display:inline-block;min-height:44px;line-height:44px;font-weight:600}
body.x-tracker .eg-st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
body.x-tracker .eg-st::before{content:"";width:10px;height:10px;flex:none;background:var(--x-ok);border-radius:50%}
body.x-tracker .eg-st.eg-parked::before{background:transparent;border:2px solid var(--x-wa);border-radius:50%;box-sizing:border-box}
body.x-tracker .eg-st.eg-draft::before{background:var(--x-wa);transform:rotate(45deg);border-radius:1px;width:8px;height:8px}
body.x-tracker .eg-st.eg-closed::before{background:var(--x-mu);border-radius:50%}
@media (max-width:640px){
  body.x-tracker .eg-t thead{position:absolute;left:-9999px}
  body.x-tracker .eg-t,body.x-tracker .eg-t tbody,body.x-tracker .eg-t tr,body.x-tracker .eg-t td{display:block;width:100%;box-sizing:border-box}
  body.x-tracker .eg-t tr{border-top:1px solid var(--x-ln);padding:8px 0}
  body.x-tracker .eg-t td{border:0;padding:4px 14px;text-align:start}
  body.x-tracker .eg-t td::before{content:attr(data-l);display:block;font-size:12px;color:var(--x-mu)}
}

/* Work Tracker staff pages, the second pass (S9): the plan builder, a new engagement, Edit the plan and the settings keep their own markup and sheets; here their theme tokens are the new look's, buttons take the 8 px corners, section frames are cyan, heads are centred, targets are 44 px, nothing runs sideways. */
body.x-tracker .pb,body.x-tracker .content{--c-text:var(--x-tx);--c-text-muted:var(--x-mu);--c-surface:var(--x-sf);--c-surface-2:var(--x-s2);--c-line:var(--x-ln);--c-line-strong:var(--x-cb);--c-primary:var(--x-pr);--c-primary-hover:var(--x-prh);--c-on-primary:var(--x-onp);--c-focus:var(--x-pr);--c-bad:var(--x-bad)}
body.x-tracker .pb{padding-top:20px;max-width:100%;overflow-wrap:anywhere}
body.x-tracker .pb button,body.x-tracker .pb summary,body.x-tracker .pb a.btn,body.x-tracker .content a.btn,body.x-tracker .content button.btn{border-radius:8px;min-height:44px}
body.x-tracker .pb .segs{border-radius:8px}
body.x-tracker .pb .card,body.x-tracker .pb section.panel,body.x-tracker .content .card{border:1px solid var(--x-frame);border-radius:12px;box-shadow:none}
body.x-tracker .pb .opt,body.x-tracker .pb .steps button{border-radius:12px}
body.x-tracker .pb .opt:has(input:checked),body.x-tracker .pb .opt.sel,body.x-tracker .pb .steps button[aria-current],body.x-tracker .pb .steps button.on{background:var(--x-cur);border:1px solid var(--x-frame)}
body.x-tracker .pb input[type=checkbox],body.x-tracker .pb input[type=radio]{min-width:20px;min-height:20px}
body.x-tracker .pb .ticks label,body.x-tracker .pb .opt{min-height:44px}
body.x-tracker .pb table th,body.x-tracker .content table th{text-align:center;vertical-align:middle;background:var(--x-s2);color:var(--x-tx)}
body.x-tracker .pb table thead th,body.x-tracker .content table thead th{background:var(--x-th-bg);color:var(--x-th-tx)}
body.x-tracker .pb table,body.x-tracker .content table{max-width:100%}
body.x-tracker .pb .wrap-x,body.x-tracker .pb .tbl{overflow-x:auto;max-width:100%}
body.x-tracker .pb-top,body.x-tracker .pb .foot{gap:8px 12px}
html[dir=rtl] body.x-tracker .pb .flip{transform:scaleX(-1)}
@media (max-width:640px){
  body.x-tracker .pb,body.x-tracker .pb *{min-width:0;max-width:100%}
  body.x-tracker .pb .fgrid.two,body.x-tracker .pb .fgrid.three,body.x-tracker .pb .fgrid.four{grid-template-columns:minmax(0,1fr)}
  body.x-tracker .pb button,body.x-tracker .pb a.btn{white-space:normal}
}

/* ===== Work Tracker, round 2 (S9, 2 November 2026): the design review's seven points. Every selector is under body.x-tracker. ===== */
/* 2. the Search box: the page's own input rule drew over the strip's, so the icon sat on the word */
body.x-tracker .x-fa .x-in{padding-inline-start:38px;padding-inline-end:12px;box-sizing:border-box}
@media (max-width:1240px) and (min-width:1024px){body.x-tracker .x-fa .x-in{padding-inline:0}}
/* 4. the filter chips wrap, whatever their length */
body.x-tracker #today .ftabs{display:flex;flex-wrap:wrap;gap:8px}
body.x-tracker #today .ftabs button{white-space:normal;max-width:100%;min-height:44px}
/* 6. Show all N under a long Today list */
body.x-tracker #today .t-all{display:flex;justify-content:flex-start;margin:12px 0 0}
/* 3. the workspace tabs: one row, the ones that do not fit fold into More (the script is shell.js, foldTabs); Today and the open tab never fold */
/* the page's own phone rules make the row a grid of icon over word (with !important): in the new look it is one row of 44 px tabs (a second line only when Today and the open tab alone do not fit), and the script folds the rest into More */
body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in{display:flex!important;flex-wrap:wrap!important;grid-template-columns:none;align-items:center;overflow:visible!important;position:relative;gap:4px}
body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in>button,body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in>.x-tabmore{flex:none;width:auto;flex-direction:row;white-space:nowrap}
body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in>button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:12px}
body.x-tracker nav#ws-tabs .x-tabmore{position:relative;margin-inline-start:auto}
body.x-tracker nav#ws-tabs .x-tabpanel{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:30;min-width:220px;max-width:calc(100vw - 32px);padding:6px;background:var(--x-sf);border:1px solid var(--x-frame);border-radius:12px;box-shadow:var(--x-sh)}
body.x-tracker nav#ws-tabs .maintabs-in .x-tabpanel button,:root[data-theme] body.x-tracker nav#ws-tabs .maintabs-in .x-tabpanel button{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 8px;width:100%;min-height:44px;padding:6px 12px;background:transparent;color:var(--x-tx);border:1px solid transparent;border-radius:8px;text-align:start;white-space:nowrap}
body.x-tracker nav#ws-tabs .maintabs-in .x-tabpanel button:hover{background:var(--x-s2);color:var(--x-tx)}
body.x-tracker nav#ws-tabs .maintabs-in .x-tabpanel button:focus-visible{outline:2px solid var(--x-pr)}
/* 7. the Engagements table: the headings are centred (the house rule, tests/th_center_test.js), so the cells are centred under them on the table; the phone cards keep the start */
@media (min-width:641px){body.x-tracker .eg-t td{text-align:center}}
/* 7. Plan builder: the buttons at the right end of their rows, room above the Kickoff date */
body.x-tracker .pb-list .row-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
body.x-tracker .pb-list fieldset.opts+.fgrid,body.x-tracker .pb-list fieldset.opts.three+.fgrid{margin-top:24px}
/* the crumbs line up with the title (same left edge) and sit on one line of 44 px */
body.x-tracker .ws-crumbs{margin-inline:0}
body.x-tracker .ws-crumbs ol{align-items:center}
body.x-tracker .ws-crumbs li{display:inline-flex;align-items:center}
@media (max-width:700px){
  body.x-tracker header.masthead.ws-masthead>.wrap{padding:8px 16px 0}
  body.x-tracker .ws-crumbs{order:1;flex:1 1 100%}
  body.x-tracker header.masthead.ws-masthead .barend{order:2;margin-inline-start:auto}
}
/* 5. under 1024 px the strip is the logo, the tool, Menu and the bell on one row: the name "Work Tracker" is longer than the other tools', so it wraps to two lines instead of pushing the bell down */
@media (max-width:1023px){
  body.x-tracker .x-tool{max-width:100px}
  body.x-tracker .x-tool .x-tn{white-space:normal}
}
/* the page's own icon rule keeps the account button's chevron on narrow screens: the account button is the avatar alone there, as in the other tools */
@media (max-width:1365px){body.x-tracker .x-user svg{display:none}body.x-tracker .x-user{padding-inline:4px;justify-content:center}}
/* the More tab reads as a tab with a chevron */
body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in>.x-tabmore>button{display:inline-flex;flex-direction:row;width:auto;white-space:nowrap;align-items:center;gap:8px;min-height:44px;padding-inline:14px;background:transparent;color:var(--x-bt);border:1px solid var(--x-bt);border-radius:999px}
body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in>.x-tabmore>button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in>.x-tabmore>button[aria-expanded=true]::after{transform:rotate(225deg)}

/* ===== Work Tracker, round 3 (S9, 2 November 2026): the design re-check ===== */
/* 2. the chosen segment (All SMEs / Some / None): Mid Blue fill, white text, no inner square; the group's rounded ends clip it */
body.x-tracker #today .segs button[aria-pressed=true],body.x-tracker .segs button[aria-pressed=true]{box-shadow:none;border-radius:0;background:var(--x-pr);color:var(--x-bt);font-weight:600}
body.x-tracker #today .segs button[aria-pressed=true]:hover,body.x-tracker .segs button[aria-pressed=true]:hover{background:var(--x-pr);color:var(--x-bt)}
body.x-tracker #today .segs,body.x-tracker .segs{overflow:hidden}
/* 3. an empty Billing card (no PO yet, nothing set up) is one line: "Billing | No PO yet". The words that are folded away stay for a screen reader. */
body.x-tracker #erp-strip .es-card:has(.es-empty){display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:10px 16px}
body.x-tracker #erp-strip .es-card:has(.es-empty)>header{display:contents}
body.x-tracker #erp-strip .es-card:has(.es-empty)>header h3{margin:0;font-size:15px}
body.x-tracker #erp-strip .es-card:has(.es-empty) .es-facts{display:contents}
body.x-tracker #erp-strip .es-card:has(.es-empty) .es-facts>div{display:contents}
body.x-tracker #erp-strip .es-card:has(.es-empty) .es-facts dd{margin:0;padding-inline-start:10px;border-inline-start:1px solid var(--x-frame)}
body.x-tracker #erp-strip .es-card:has(.es-empty) .es-facts dt,body.x-tracker #erp-strip .es-card:has(.es-empty) .es-empty,body.x-tracker #erp-strip .es-card:has(.es-empty) .es-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* on a phone the empty Billing line comes after Today and Coming up, not before them */
@media (max-width:999px){
  body.x-tracker #pane-overview:has(#erp-strip .es-empty){display:flex;flex-direction:column;gap:var(--d-3,16px)}
  body.x-tracker #pane-overview:has(#erp-strip .es-empty) #today{display:contents}
  body.x-tracker #pane-overview:has(#erp-strip .es-empty) #today>.strip{order:1}
  body.x-tracker #pane-overview:has(#erp-strip .es-empty) #today>.t-needs{order:2}
  body.x-tracker #pane-overview:has(#erp-strip .es-empty) #today>.t-coming{order:3}
  body.x-tracker #pane-overview:has(#erp-strip .es-empty) #erp-strip{order:4}
  body.x-tracker #pane-overview:has(#erp-strip .es-empty) #today>.t-prog{order:5}
  body.x-tracker #pane-overview:has(#erp-strip .es-empty) #today>.t-aux{order:6}
}
/* 4. the workspace's cards take the shell's cyan frame, like every other page */
body.x-tracker #today>section,body.x-tracker #erp-strip .es-card,body.x-tracker main.ws-main section.card,body.x-tracker main.ws-main .card,body.x-tracker main.ws-main .tile{border-color:var(--x-frame)}
/* the page's own card classes on every tab (their border colours are set several ways, so the colour is named once here) */
body.x-tracker main.ws-main :is(.sfig,.xcard,.slwrap,.t-needs,.t-coming,.t-prog,.t-aux,.tgp-paper,.crx-tile,.crx-phase,.crx-fig,.kcard,.panel,.narrative,.ruleset,.gate){border-color:var(--x-frame)!important}
/* 6. the tab row starts where the title does (the pill's left edge on the title's left edge) */
body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in{max-width:var(--d-app,1380px);margin-inline:auto;padding-inline:14px!important;box-sizing:border-box}
@media (max-width:640px){body.tools.x-tracker nav#ws-tabs .navrow>.maintabs-in{padding-inline:0!important}}
/* 5. New engagement on a phone: the bar at the foot is one summary line (an ellipsis if it is long), a thin outline on top, room for the phone's home bar, and the fields clear it when they scroll into view */
@media (max-width:999px){
  body.x-tracker .pb-foot{border-top:1px solid var(--x-frame);box-shadow:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  body.x-tracker .pb-foot>p{flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.x-tracker .eg{padding-bottom:var(--eg-foot,88px)}
  body.x-tracker .eg .fld,body.x-tracker .eg .card,body.x-tracker .eg button,body.x-tracker .eg input,body.x-tracker .eg select,body.x-tracker .eg textarea{scroll-margin-bottom:120px}
}

/* ------------------------------------------------------------------ the public pages (host/core/shell/public.js, 13 November 2026): the content lines up with the bar's title; a narrow column (forms, sign-in) is centred with its bar */
body.x-pub .content{padding-top:28px}
body.x-pub .content>.wrap{padding-inline:40px}
body.x-pub.x-pub-n .content>.wrap{max-width:800px}
@media (max-width:1023px){body.x-pub .content>.wrap{padding-inline:20px}}
@media (max-width:639px){body.x-pub .content{padding-top:20px}}/* the band's facts (a survey's trainer and date) read as plain lines on the bar, at its start, not as centred pills */
body.x-pub .x-band ul.meta{justify-content:flex-start;padding:0}
body.x-pub .x-band ul.meta li{background:none;border:0;border-radius:0;padding:0;font-size:14px;color:var(--x-bt2)}/* the /start look on the public pages: cards with the thin cyan line, the /start radius and no drop shadow; buttons are the /start rounded rectangle (8 px), never a pill */
body.x-pub .card,body.x-pub .flash{border-radius:12px;box-shadow:none}
body.x-pub .card{border-color:var(--x-frame)}
body.x-pub .btn{border-radius:8px}
/* ---- table heads: white on the brand blue, everywhere in the new look (13 Nov 2026, Akram: "tables headers should be in white on blue background"). ONE pair of tokens (--x-th-bg, --x-th-tx, --x-th-ln in shell.css, light and dark); the page rules above set the same pair, this block settles what is inside a head (links, sort arrows, icons, hints, ticks, buttons), the line between head cells and the sticky heads ---- */
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th){background:var(--x-th-bg);color:var(--x-th-tx);border-color:var(--x-th-ln)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th a:not(.btn),body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) a:not(.btn),body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th a:not(.btn):visited,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) a:not(.btn):visited,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th button:not(.btn),body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) button:not(.btn),body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th label,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) label,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th small,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) small,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th .hint,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) .hint,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th .sorth,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) .sorth,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th abbr,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) abbr,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th svg,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) svg,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th .tgi,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) .tgi{color:var(--x-th-tx)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th button:not(.btn),body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) button:not(.btn){background:transparent;border-color:transparent;font:inherit;cursor:pointer}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th a:not(.btn):hover,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) a:not(.btn):hover,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th button:not(.btn):hover,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) button:not(.btn):hover,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th a:not(.btn):focus-visible,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) a:not(.btn):focus-visible,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th button:not(.btn):focus-visible,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) button:not(.btn):focus-visible{text-decoration:underline;text-underline-offset:3px;background-color:var(--x-th-hov)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th input[type=checkbox],body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) input[type=checkbox]{accent-color:var(--x-th-tx)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th :focus-visible,body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) th[scope=col]:not(.dl-gh > th) :focus-visible{outline:2px solid var(--x-th-tx);outline-offset:2px}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) thead th+th{border-inline-start:1px solid var(--x-th-ln)}
/* ---- table lines: cyan between rows and between columns, in every data table of the new look (13 Nov 2026, Akram). The line is --x-tbl-ln (the theme cyan, --tgp-cyan, the same cyan as the card borders), collapsed so the outer edge is ONE line and never doubled. A data table is one with a head row; the heat maps, the availability grid and the timeline keep their own cell gaps. The page rules that draw a line with --c-line follow the cyan too. ---- */
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline){--c-line:var(--x-tbl-ln);--c-line-strong:var(--x-tbl-ln)}
@media (min-width:641px){
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline):not(.dtable,.sltbl,.tp-table){border-collapse:collapse;border-spacing:0}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline):not(.dtable,.sltbl,.tp-table) > :is(thead,tbody,tfoot) > tr:not(.dl-gh) > :is(th,td){border:1px solid var(--x-tbl-ln)}
}
@media (min-width:900px){
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline):is(.dtable,.sltbl,.tp-table){border-collapse:collapse;border-spacing:0}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline):is(.dtable,.sltbl,.tp-table) > :is(thead,tbody,tfoot) > tr:not(.dl-gh) > :is(th,td){border:1px solid var(--x-tbl-ln)}
}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) > thead > tr > th{border-color:var(--x-tbl-ln)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) > thead > tr > th:not(:last-child){border-inline-end-color:var(--x-th-ln)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table:has(> thead th,> tbody > tr > th[scope=col]):not(.hm-t):not(.htm-t):not(.av):not(.tgp-timeline) > thead > tr > th:not(:first-child){border-inline-start-color:var(--x-th-ln)}
@media (max-width:640px){
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table.cards > tbody > tr{border:1px solid var(--x-tbl-ln)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table.cards > tbody > tr > td{border:0;border-top:1px solid var(--x-tbl-ln)}
body:is(.x-doc,.x-tracker):is(.x-doc,.x-tracker):is(.x-doc,.x-tracker) table.cards > tbody > tr > td:first-child{border-top:0}
}
/* Pricing's quote list is a grid of rows, not a <table> (role=row, role=columnheader): its head row is the same blue with white text, its rows are parted by the cyan line (from 1024 px, where it is a table; below that the head is hidden and each row is a card) */
@media (min-width:1024px){
body.x-pricing .slist .shead{background:var(--x-th-bg);color:var(--x-th-tx);padding:10px 20px;border:1px solid var(--x-tbl-ln);align-items:center;text-align:start}
}
body.x-pricing .slist .srow{border-top-color:var(--x-tbl-ln)}