/* The navigation: top bar, the account menu, the sidebar, the dashboard cards and the engagement lists. Layout only, tokens only (fraction-ds owns the colours). */
.tab { display: inline-flex; align-items: center; gap: 6px; }

.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; display: flex; border-radius: 999px; }
.acct > summary::-webkit-details-marker { display: none; }
.acct__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--r-2, 10px); background: var(--bg-2); box-shadow: var(--shadow-menu); }
.acct__item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--ink-2); font-size: var(--fs-ui); }
.acct__item:hover, .acct__item:focus-visible { background: var(--accent-soft); color: var(--ink); }
.acct__rule { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.acct__form { display: contents; }

.nav-rail { --w-rail: 232px; }
.nav-soon { font-family: inherit; color: var(--ink-4); }

.dash, .eng, .soon { display: grid; gap: var(--s4, 16px); align-content: start; max-width: 1000px; padding: var(--pad-main, 24px); }
.dash__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s4, 16px); }
.dash__card { display: grid; gap: 2px; padding: var(--s4, 16px); color: inherit; text-decoration: none; }
.dash__card:hover { border-color: var(--accent); }
.dash__card--act { border-color: var(--accent); }
.dash__go { margin-top: var(--s2, 8px); justify-self: start; }
.dash__value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.eng__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2, 8px); }
/* .card (the design system) is a column; a room row is a line: the name and who/when on the left, its status at the end. */
.card.eng__row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s3, 12px); }
.eng__link { display: grid; gap: 2px; flex: 1; min-width: 0; text-align: left; color: inherit; text-decoration: none; }
.eng__group { margin: var(--s3, 12px) 0 0; display: flex; align-items: baseline; gap: 8px; }

@media (max-width: 860px) {
  .nav-rail { --w-rail: min(86vw, 320px); }
}

.eng__table { overflow-x: auto; }
.eng__table table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.eng__table th, .eng__table td { padding: 9px 8px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
.eng__table thead th { border-top: 0; color: var(--ink-3); font-weight: 500; font-size: var(--fs-meta); }
.eng__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.eng__actions .btn { display: inline-flex; align-items: center; }
.eng__form { display: contents; }
.eng__soon { opacity: .45; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Narrow screens (one breakpoint, as the DS shell has it): the rail is the DS overlay that the bottom Menu button opens. */
@media (max-width: 600px) {
  .hdr__right { gap: 6px; }
}

/* The bell: a <details> dropdown (never a side panel). A click or tap opens it; a mouse over the bell, or keyboard focus, peeks it. */
.notif { position: relative; display: block; }
.notif > summary { list-style: none; cursor: pointer; display: flex; }
.notif > summary::-webkit-details-marker { display: none; }
.notif__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; }
.notif__panel::before { content: ""; position: absolute; top: -10px; right: 0; left: 0; height: 10px; }  /* the hover bridge */
@media (hover: hover) and (pointer: fine) {
  .notif::details-content { content-visibility: visible; }
  .notif > .notif__panel { display: none; }
  .notif:hover > .notif__panel, .notif[open] > .notif__panel, .notif:has(:focus-visible) > .notif__panel { display: block; }
}

.marks { display: grid; gap: var(--s4, 16px); align-content: start; max-width: 800px; padding: var(--pad-main, 24px); }
.marks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2, 8px); }
.marks__row { display: flex; align-items: center; gap: var(--s3, 12px); }
.marks__name { flex: 1; font-weight: 600; }
.marks__buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.marks__form { display: contents; }
.marks__buttons .btn { display: inline-flex; align-items: center; }

.pf__password { display: grid; gap: var(--s2, 8px); max-width: 380px; }

.settings { display: grid; gap: var(--s3, 16px); align-content: start; max-width: 680px; padding: var(--pad-main, 24px); }
.settings__section { align-items: start; text-align: left; }
.settings__section p { margin: 0 0 var(--s2, 8px); }
.settings__section h2 { margin: 0 0 var(--s2, 8px); font-size: var(--text-md, 1rem); }
.settings__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1, 4px) var(--s3, 16px); margin: 0; }
.settings__facts dt { color: var(--muted, inherit); }
.settings__facts dd { margin: 0; }
.settings__section .theme-switch { align-self: flex-start; }

.spend { display: grid; gap: var(--s4, 16px); align-content: start; max-width: 800px; padding: var(--pad-main, 24px); }
.spend__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3, 16px); }
.spend__stat { align-items: flex-start; text-align: left; }
.spend__value { font-size: var(--text-xl, 1.5rem); }
.spend__h { margin: 0 0 var(--s2, 8px); font-size: var(--text-md, 1rem); }
.spend__table, .spend__trend { width: 100%; border-collapse: collapse; }
.spend__table th, .spend__table td, .spend__trend th, .spend__trend td { padding: var(--s2, 8px); text-align: left; border-bottom: 1px solid var(--line, currentColor); }
.spend__trend progress { width: 100%; }
.spend__table .spend__amount, .spend__trend .spend__amount { text-align: right; white-space: nowrap; }

.twin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); margin: var(--s2, 8px) 0 0; }

.coll__list { list-style: none; margin: 0 0 var(--s3, 16px); padding: 0; display: grid; gap: var(--s2, 8px); }
.coll__form { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; }
.coll__move { display: inline-block; }
.coll__move[open] > .coll__form { margin-top: var(--s2, 8px); }

.backlink { justify-self: start; align-self: flex-start; flex: none; margin-left: -12px; }   /* the DS ghost button (shared/_back_link), its words on the text's edge; flex: none keeps it 36px tall in a fixed-height flex frame (the client page) */

.agentpage { display: grid; gap: var(--s3, 16px); align-content: start; max-width: 720px; width: 100%; margin-inline: auto; padding: var(--pad-main, 24px); box-sizing: border-box; }
.agentpage__form { display: grid; gap: var(--s2, 8px); }
.agentpage__check { display: flex; align-items: flex-start; gap: var(--s2, 8px); }
.agentpage__what p { margin: 0 0 var(--s2, 8px); }

.acct__item--static { cursor: default; justify-content: space-between; }
.acct__item--static:hover { background: transparent; color: var(--ink-2); }

.flow { display: grid; gap: var(--s4, 16px); align-content: start; max-width: 880px; width: 100%; margin-inline: auto; padding: var(--pad-main, 24px); box-sizing: border-box; }
.flow__actions { display: inline-flex; gap: var(--s2, 8px); margin-left: var(--s2, 8px); }
.engage__form { display: grid; gap: var(--s2, 8px); }

/* the task tracker on Engagements: a kanban. Four lanes (a lane is a --board surface with a firm edge), cards raised on them; a phone stacks the lanes. */
.board { display: grid; gap: var(--s3, 12px); margin-bottom: var(--s4, 16px); }
.board__pills { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }
.board__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3, 12px); align-items: stretch; }
.board__col { display: flex; flex-direction: column; gap: var(--s2, 8px); min-height: 75vh; padding: var(--s3, 12px); background: var(--board); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.board__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s1, 4px); padding-bottom: var(--s2, 8px); border-bottom: 1px solid var(--line-2); font-size: var(--fs-ui, 14px); font-weight: 600; color: var(--ink); }
.board__title { display: inline-flex; align-items: center; gap: var(--s2, 8px); }
.board__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2, 8px); }
.board__card { display: grid; gap: 4px; background: var(--bg-2); border-color: var(--line-2); color: var(--ink); }
.board__card:hover { border-color: var(--accent); }
.board__empty { display: grid; place-items: center; flex: 1; min-height: 96px; margin: 0; border: 1px dashed var(--line-2); border-radius: var(--r-2); }
.eng__rooms > summary { cursor: pointer; display: flex; align-items: center; gap: var(--s2, 8px); margin: var(--s3, 12px) 0; }
@media (max-width: 900px) { .board__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board__col { min-height: 0; } }
@media (max-width: 560px) { .board__cols { grid-template-columns: 1fr; } }

/* the light/dark button beside the bell: the moon while the page is light (press for dark), the sun while it is dark */
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: inline-block; }

/* Find a professional: a grid of expert tiles, and a Filters button that drops a panel (no side column) */
.xg { display: grid; gap: var(--s4, 16px); max-width: none; }
.xg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); }
.xg__filterbox { position: relative; }
.xg__filterbtn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2, 8px); }
.xg__filterbtn::-webkit-details-marker { display: none; }
.xg__panel { display: none; flex: 1 0 100%; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4, 16px); padding: var(--s4, 16px); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.xg__bar:has(.xg__filterbox[open]) .xg__panel { display: grid; }
.xg__group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2, 8px); align-content: start; min-width: 0; }
.xg__legend { padding: 0; margin-bottom: var(--s1, 4px); font-size: var(--fs-meta, 12px); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.xg__check { display: flex; align-items: center; gap: var(--s2, 8px); font-size: var(--fs-ui, 14px); color: var(--ink); }
.xg__actions { grid-column: 1 / -1; display: flex; gap: var(--s2, 8px); }
.xg__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }
.xg__tag { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.xg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4, 16px); align-items: stretch; }
.xt { position: relative; display: flex; flex-direction: column; gap: var(--s3, 12px); padding: var(--s4, 16px); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.xt__id { display: flex; align-items: center; gap: var(--s3, 12px); }
.xt__avatar { display: inline-flex; flex: none; text-decoration: none; }
.xt__who { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.xt__name { margin: 0; font-size: var(--fs-b, 16px); font-weight: 600; }
.xt__name a { color: var(--ink); text-decoration: none; }
.xt__name a:hover { color: var(--accent); }
.xt__sub { margin: 0; font-size: var(--fs-ui, 14px); }
.xt__desc { flex: 1; display: grid; gap: var(--s2, 8px); align-content: start; font-size: var(--fs-ui, 14px); }
.xt__desc p { margin: 0; }
.xt__foot { display: grid; gap: var(--s2, 8px); padding-top: var(--s3, 12px); border-top: 1px solid var(--line-2); }
.xt__price { margin: 0; }
.xt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); }

.marks__corner { margin-left: auto; display: inline-flex; gap: var(--s2, 8px); }
.marks__corner .marks__form { display: inline-flex; }
.btn.btn--sm.xt__icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-2); }
.btn.xt__icon .icon { width: 18px; height: 18px; }
.xt { min-height: 380px; }
.xt__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2, 8px); margin: 0; padding: var(--s3, 12px) 0; border-top: 1px solid var(--line-2); }
.xt__stats > div { display: grid; gap: 2px; justify-items: center; text-align: center; }
.xt__stats dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.xt__stats dt { font-size: var(--fs-meta, 12px); color: var(--ink-3); }
.xt__twinbtn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2, 8px); }
.xt__twinbtn::-webkit-details-marker { display: none; }
.xt__twin[open] .xt__twinbtn .icon:last-child { transform: rotate(180deg); }
.xt__twinbody { display: grid; gap: var(--s2, 8px); margin-top: var(--s2, 8px); padding: var(--s3, 12px); background: var(--board); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.xt__twinbody p { margin: 0; }
.xt__skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* every lane is the same neutral surface; only its head is a tinted band in the stage's colour (neutral, violet, amber, green), so the stages read apart
   at a glance without four coloured columns (Milan, 21 Oct). The band runs edge to edge: it takes back the lane's padding (--col-pad) and the lane clips
   its corners. No stripe or one-sided border. */
.board__col { --lane: var(--ink-3); --col-pad: var(--s3, 12px); padding: var(--col-pad); overflow: hidden; }
.board__col--doing { --lane: var(--accent); }
.board__col--review { --lane: var(--warn); }
.board__col--done { --lane: var(--ok); }
.board__col .board__head { margin: calc(var(--col-pad) * -1) calc(var(--col-pad) * -1) 0; padding: 12px var(--col-pad); border-bottom: 0; background: color-mix(in srgb, var(--lane) 14%, var(--board)); }
[data-theme="dark"] .board__col .board__head { background: color-mix(in srgb, var(--lane) 22%, var(--board)); }   /* the dark surface needs a little more to read */
.board__col .board__title .icon { color: var(--lane); }
.board__col .board__head .chip { background: color-mix(in srgb, var(--lane) 16%, var(--bg-2)); }
.board__hint { display: flex; align-items: center; gap: var(--s2, 8px); margin: 0; font-size: var(--fs-ui, 14px); }
.board__card--example { opacity: .82; border-style: dashed; }
.board__card--example small { display: block; }
.board__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.topup { display: grid; justify-items: start; text-align: left; gap: var(--s3, 12px); max-width: 520px; background: var(--bg-2); border-color: var(--line-2); }
.topup__amounts { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }
.topup__legend { padding: 0; margin-bottom: var(--s2, 8px); font-size: var(--fs-meta, 12px); font-weight: 500; color: var(--ink-2); }
.topup__amount { display: inline-flex; align-items: center; gap: var(--s2, 8px); padding: var(--s2, 8px) var(--s3, 12px); border: 1px solid var(--line-2); border-radius: var(--r-2); font-weight: 600; }
.topup .btn { justify-self: start; }
/* the account menu: who you are, the mode switch, the A2A details */
.acct__who { display: grid; gap: 4px; padding: var(--s2, 8px) var(--s3, 12px); justify-items: start; }
.acct__name { font-size: var(--fs-ui, 14px); }
.acct__a2a > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s2, 8px); }
.acct__a2a > summary::-webkit-details-marker { display: none; }
.acct__a2a > summary .chip { margin-left: auto; }
.acct__a2abody { display: grid; gap: var(--s2, 8px); padding: var(--s2, 8px) var(--s3, 12px) var(--s3, 12px); justify-items: start; }
.acct__a2abody p { margin: 0; }
.a2areveal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); max-width: 100%; }
.a2areveal__input { flex: 1 1 100%; min-width: 0; font-family: var(--mono); font-size: var(--fs-meta, 12px); }
.a2acard__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); margin: 0; }
.board__who { display: flex; align-items: center; gap: 6px; }