/* PartnerLane workspace styles: the app shell and the page-level patterns from
   design/handoff/partnerlane-app/app.css. Tokens and components load first; every value is a token. */
@import url("tokens.css");
@import url("components.css");

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { min-height: 100vh; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
small { font-size: 13px; color: var(--ink-muted); }

/* ----- Text helpers ----- */
.page-sub { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.section-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.amount { color: var(--ink); font-weight: 600; font-size: 14px; }
.overline { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.linkbtn:hover { color: var(--brand); }
.link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--brand); text-decoration: none; font-weight: 600; cursor: pointer; }
.link:hover { color: var(--brand-hover); }
.backlink { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.error { font-size: 13px; line-height: 18px; color: var(--danger); }
.error:empty { display: none; }
.right { text-align: right; justify-self: end; }
.spread { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

/* ----- Logo: the supplied PNG, never redrawn. In dark the wordmark half is inverted; the icon keeps its purple. ----- */
.pl-logo { position: relative; display: inline-block; height: 26px; aspect-ratio: 1858 / 282; flex: none; }
.pl-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-logo img:first-child { clip-path: inset(0 86.3% 0 0); }
.pl-logo img:last-child { clip-path: inset(0 0 0 13.7%); }
[data-theme="dark"] .pl-logo img:last-child { filter: invert(1); }
.pl-logo--icon { aspect-ratio: auto; width: 22px; overflow: hidden; }
.pl-logo--icon img { width: auto; max-width: none; clip-path: none; left: -3px; }
.pl-logo--icon img:last-child { display: none; }

/* ----- App shell ----- */
.app-shell { min-height: 100vh; }
.app-shell > .pl-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; overflow-y: auto; }
.sidebar-foot { margin-top: auto; padding-top: var(--space-4); }
.app-main { margin-left: var(--sidebar-width); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar { position: sticky; top: 0; z-index: 15; flex: none; justify-content: space-between; gap: var(--space-4); }
.topbar-mobile { display: none; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); white-space: nowrap; min-width: 0; overflow: hidden; }
.breadcrumb .pl-icon { width: 14px; height: 14px; color: var(--ink-faint); }
.crumb { background: none; border: 0; padding: 0; font: inherit; color: inherit; overflow: hidden; text-overflow: ellipsis; }
button.crumb { cursor: pointer; }
button.crumb:hover { color: var(--brand); }
.crumb[aria-current="page"] { color: var(--ink); font-weight: 600; }
.workspace-save-status { margin-left: var(--space-4); font-size: 12px; color: var(--ink-faint); }
.topbar-search { width: 280px; }
.topbar-divider { width: 1px; height: 24px; background: var(--line); margin: 0 var(--space-1); }
.partner-chooser { width: 170px; }
.search-toggle, .topbar-avatar { display: none; }
.topbar-avatar { border: 0; background: none; padding: 0; border-radius: var(--radius-full); cursor: pointer; }
.app-content { flex: 1; width: 100%; max-width: calc(var(--content-max) + 2 * var(--space-10)); margin: 0 auto; padding: var(--space-8) var(--space-10); display: flex; flex-direction: column; gap: var(--space-5); }
.app-tabbar { display: none; }
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); }

/* ----- Menus and popovers ----- */
.popover-anchor { position: relative; }
.menu-popover { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 30; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.menu-popover > .overline { padding: var(--space-2) var(--space-3) var(--space-1); }
.menu-popover > .meta { padding: var(--space-3); margin: 0; }
.account-menu { position: fixed; top: auto; right: auto; left: var(--space-3); bottom: 72px; width: calc(var(--sidebar-width) + 40px); }
.menu-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.menu-head > div { display: flex; flex-direction: column; min-width: 0; }
.menu-head b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head span { font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }
.menu-nav { display: none; flex-direction: column; gap: 2px; padding-bottom: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-3); font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.menu-row > span { display: inline-flex; align-items: center; gap: var(--space-3); }
.activity-menu { width: 380px; max-height: 70vh; overflow: auto; }
.search-results { left: 0; right: auto; width: 400px; max-height: 70vh; overflow: auto; }
.search-result { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 0; background: none; border-radius: var(--radius-md); text-align: left; cursor: pointer; color: var(--ink-muted); width: 100%; }
.search-result:hover { background: var(--surface-hover); }
.search-result > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.search-result b { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ----- Page and section headers ----- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 0; min-width: min(100%, 320px); }
.page-head--entity { align-items: center; }
.page-head__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.entity { display: flex; align-items: center; gap: var(--space-4); }
/* Partner logos are supplied artwork on a light ground, so their tile stays white in both themes. */
.partner-logo { width: 112px; height: 64px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--line); background: #ffffff; }
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 2px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section-head > div:first-child { flex: 1; min-width: min(100%, 260px); }
.section-head .meta { margin-top: 2px; max-width: 720px; }

/* ----- Tab row, filter menu and chips ----- */
.tabrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.tabrow > .pl-tabs { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabrow__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.filter-menu { position: absolute; top: calc(var(--control-md) + var(--space-2)); right: 0; width: 480px; max-width: calc(100vw - 2 * var(--space-4)); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 12; display: flex; overflow: hidden; }
.filter-facets { width: 176px; flex: none; border-right: 1px solid var(--line); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; background: var(--surface-sunken); }
.filter-facets .overline { padding: var(--space-2) var(--space-3) 6px; }
.filter-facets .pl-side-item, .filter-value { height: 36px; font-weight: 500; gap: var(--space-2); }
.filter-facets .pl-side-item > span:first-child { flex: 1; }
.filter-facets .pl-side-item .pl-icon { width: 14px; height: 14px; color: var(--ink-faint); }
.filter-facets .pl-badge { height: 18px; padding: 0 6px; }
.filter-values { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.filter-search { padding: 10px var(--space-3) 6px; }
.filter-list { height: 236px; overflow: auto; padding: 0 var(--space-2) var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.filter-value { gap: 10px; }
.filter-value__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.filter-box { width: 16px; height: 16px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line-control); background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center; }
.filter-box--radio { border-radius: var(--radius-full); }
.filter-box .pl-icon { width: 12px; height: 12px; color: var(--on-brand); stroke-width: 3; }
.filter-value[aria-checked="true"] .filter-box { background: var(--brand); border-color: var(--brand); }
.filter-none { margin: 0; padding: var(--space-3); }
.filter-foot { border-top: 1px solid var(--line); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.filter-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: calc(-1 * var(--space-2)); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--surface-sunken); border: 1px solid var(--line); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); }
button.chip { cursor: pointer; }
.chip .pl-icon { width: 14px; height: 14px; }
.chip--applied, .chip--toggle[aria-pressed="true"] { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); }
.chip__facet { font-weight: 500; }
.chip--toggle:hover { border-color: var(--line-control); }
.chip--toggle:disabled { opacity: var(--disabled); }
.chip-clear { font-size: 13px; color: var(--brand); }

/* ----- Data grid (div-based table) ----- */
.tbl { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.tbl--inset { border-radius: var(--radius-md); }
.tbl--inset .tr { gap: var(--space-3); }
.tbl--scroll { overflow-x: auto; }
.tbl--scroll .tr { min-width: 540px; }
.tr { display: grid; align-items: center; gap: var(--space-4); padding: 12px var(--space-5); border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; width: 100%; min-width: 0; }
.tr > * { min-width: 0; }
.tr:first-child { border-top: 0; }
.tr.th { padding: 10px var(--space-5); background: var(--surface-sunken); }
.tr.th > span, .th-sort { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.th-sort { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; justify-self: start; }
.th-sort.right { justify-self: end; }
.th-sort .pl-icon { width: 12px; height: 12px; }
.th-sort.active { color: var(--brand); }
button.tr { cursor: pointer; }
button.tr:hover { background: var(--surface-hover); }
.tr[aria-selected="true"] { background: var(--brand-soft); }
.tr[aria-selected="true"] .cell-title { color: var(--brand-ink); }
.tbl--inset .tr { padding-left: var(--space-4); padding-right: var(--space-4); }
.cell-title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; }
.cell-text { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cell-sub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; }
.cell-sub--warning { color: var(--warning); font-weight: 600; }
.cell-lead { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cell-lead > span:last-child { min-width: 0; }
.table-foot { margin-top: calc(-1 * var(--space-2)); }
.tbl .pl-empty { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* ----- Overview: priority cards, list and detail ----- */
.prio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.prio { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow 150ms cubic-bezier(.2,0,0,1); position: relative; }
.prio:hover { box-shadow: var(--shadow-md); }
.prio[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); }
.prio[aria-pressed="true"]::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px 2px 0 0; }
.prio .lbl, .stat .lbl, .amount-box .lbl, .leaderboard .lbl { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.prio[aria-pressed="true"] .lbl, .prio[aria-pressed="true"] .val { color: var(--brand-ink); }
.prio .val, .stat .val, .leaderboard .val { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.prio .note, .stat .note, .amount-box .note, .leaderboard .note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.stat { display: flex; flex-direction: column; gap: 2px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); min-width: 0; }
.stat .val { overflow-wrap: anywhere; }
.stat-text { font-size: 22px; line-height: 28px; }
.stat-grid { display: grid; gap: var(--space-5); }
.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.stat-inline .stat { padding: 0; border: 0; background: none; }
.stat-inline .stat .val { font-size: 28px; line-height: 34px; }
.priority-layout { display: flex; gap: var(--space-5); align-items: flex-start; }
.priority-list { flex: 1; min-width: 0; padding: 0; gap: 0; overflow: hidden; }
.priority-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); }
.priority-list__head .meta { margin-top: 2px; }
.priority-items { border-top: 1px solid var(--line); }
.priority-items > .banner, .priority-items > .priority-loading { margin: var(--space-4) var(--space-5); }
.priority-list__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.priority-side { width: 440px; flex: none; display: flex; flex-direction: column; gap: var(--space-5); }
.priority-detail { padding-top: var(--space-3); }
.detail-bar, .peek-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.detail-bar { margin: 0 calc(-1 * var(--space-2)); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.peek-nav { gap: var(--space-1); }
.priority-detail .quote { max-height: 220px; overflow: auto; }
.detail-context { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.peek-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.peek-head .section-title { margin-top: 2px; overflow-wrap: anywhere; }
.peek-head .meta { margin-top: 2px; }
.peek-copy { font-size: 15px; line-height: 22px; white-space: pre-line; overflow-wrap: anywhere; }
.peek-copy + .peek-copy { margin-top: var(--space-2); }
.activity-strip { display: flex; align-items: center; gap: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; }
.activity-strip .overline { flex: none; }
.activity-strip__item { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.activity-strip__item:hover { color: var(--ink); }
.activity-strip__item b { color: var(--ink); font-weight: 600; }
.activity-strip .link { margin-left: auto; flex: none; font-size: 13px; }

/* ----- Shared content patterns ----- */
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.split__main, .split__side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.split__side.sticky { position: sticky; top: calc(var(--topbar-height) + var(--space-5)); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-5); }
.pl-card > .pl-btn, .banner__body > .pl-btn { align-self: flex-start; }
#partner-tags-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.card-copy { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact > span { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.fact b { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fact b.soft { font-weight: 500; }
.fact b.mono { font-family: var(--font-mono); font-size: 14px; }
.quote { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 21px; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.quote.terms { max-height: 320px; overflow: auto; }
.hint { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.hint .pl-icon { width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; color: var(--ink-faint); }
.banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.banner > .pl-icon { margin-top: 2px; }
.banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.banner--warning { background: var(--warning-soft); color: var(--warning); }
.banner--danger { background: var(--danger-soft); color: var(--danger); }
.banner .meta, .banner .linkbtn { color: inherit; }
.rows { display: flex; flex-direction: column; gap: var(--space-2); }
.step-row, .bank-row, .milestone-row, .leaderboard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.step-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.step-number { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); font-size: 12px; font-weight: 700; }
.bank-row > div, .milestone-row > div { display: flex; flex-direction: column; min-width: 0; }
.leaderboard__row { justify-content: flex-start; }
.leaderboard__row b { flex: 1; font-weight: 600; }
.leaderboard { display: flex; flex-direction: column; gap: var(--space-4); }
.leaderboard__own { display: flex; flex-direction: column; gap: 2px; }
.detailpair { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; font-size: 14px; line-height: 20px; border-top: 1px solid var(--line); }
.detailpair:first-child, .overline + .detailpair { border-top: 0; }
.detailpair > span:first-child { color: var(--ink-muted); }
.detailpair > :last-child { text-align: right; }
.detailpair.total { font-size: 16px; }
.detailpair.total > span { color: var(--ink); font-weight: 600; }
.role-guide .detailpair > :last-child { text-align: left; flex: 1; color: var(--ink-muted); }
.role-guide .detailpair > strong { width: 150px; flex: none; }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--space-2) 0; width: 100%; }
.bank-details { display: flex; flex-direction: column; gap: var(--space-3); }
.bank-details__head, .bank-details__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.amount-box { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.amount-box .val { font-size: 22px; line-height: 28px; font-weight: 700; }
.reward-row { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.reward-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.reward-row__head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 15px; }
.reward-check { align-items: center; padding: 10px 14px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.reward-check input { margin: 0; }
.reward-check__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.duplicate-claim { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.timeline { display: flex; flex-direction: column; }
.activity { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; font-size: 14px; line-height: 20px; text-align: left; }
.activity + .activity { border-top: 1px solid var(--line); }
.activity .dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand); margin-top: 6px; flex: none; }
.activity b { font-weight: 600; }
.activity .meta { display: block; }
button.activity { border-left: 0; border-right: 0; border-bottom: 0; background: none; font-family: inherit; color: inherit; cursor: pointer; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); width: 100%; }
button.activity + button.activity { border-top: 0; }
button.activity:hover { background: var(--surface-hover); }
.disclosure { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.disclosure summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--brand); }
.disclosure[open] summary { margin-bottom: var(--space-3); }
.address-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.address-line .pl-input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font-size: 15px; box-shadow: none; }
.is-archived .pl-list-item__title { color: var(--ink-muted); }
.pl-list-item__trailing .pl-btn { color: var(--brand); }
.pl-list-item__trailing .meta, .pl-list-item__trailing .mono { color: var(--ink-muted); }
.pl-list-item__trailing .amount { color: var(--ink); }

/* ----- Choice lists (add a referral, refer a hotel) ----- */
.choices { display: flex; flex-direction: column; gap: var(--space-2); }
.choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.choice:hover { background: var(--surface-hover); }
.choice[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); }
.choice__radio { width: 18px; height: 18px; flex: none; margin-top: 7px; border-radius: var(--radius-full); border: 2px solid var(--line-control); display: inline-flex; align-items: center; justify-content: center; }
.choice[aria-checked="true"] .choice__radio { border-color: var(--brand); }
.choice[aria-checked="true"] .choice__radio::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand); }
.choice__icon { width: 32px; height: 32px; flex: none; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; }
.choice__icon .pl-icon { width: 18px; height: 18px; }
.choice__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice__text b { font-weight: 600; }
.choice__note { font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.choice--card { align-items: center; padding: var(--space-4); }
.choice--card > .pl-icon { color: var(--ink-faint); }

/* ----- Forms ----- */
form { display: flex; flex-direction: column; gap: var(--space-4); }
form.split { display: grid; }
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-section { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.settings-form { max-width: 560px; }
.tag-form { flex-direction: row; align-items: center; gap: var(--space-2); }
.tag-form .pl-input { flex: 1; min-width: 0; }
.step-editor { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.summary-amount { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.015em; }
.actionbar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 calc(-1 * var(--space-10)) calc(-1 * var(--space-8)); padding: var(--space-3) var(--space-10); background: var(--surface-raised); border-top: 1px solid var(--line); }

/* ----- Settings ----- */
.settings-layout { display: flex; gap: var(--space-8); align-items: flex-start; }
.settings-nav { width: 260px; flex: none; }
.settings-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.settings-card { max-width: 720px; }
.settings-card .pl-field { max-width: 560px; }
.settings-card .language-switch { height: var(--control-md); font-size: 15px; }

/* ----- Reports ----- */
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--space-5); align-items: start; }
.report-bar { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: var(--space-1) 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.report-bar__head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.report-bar__head b { font-weight: 600; }
.report-bar .pl-progress { height: 10px; border-radius: 5px; }
.report-bar:hover .pl-progress > i { background: var(--brand-hover); }
.stage-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stage-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); font: inherit; cursor: pointer; }
.stage-chip:hover { background: var(--surface-hover); }

/* ----- Dialog, side panel and peek: the one <dialog id="modal"> ----- */
#modal { color: var(--ink); font-family: var(--font-sans); }
#modal[open] { display: flex; flex-direction: column; gap: var(--space-4); }
#modal::backdrop { background: var(--overlay); }
#modal:focus { outline: none; }
#modal.pl-dialog { max-width: 520px; max-height: calc(100dvh - 2 * var(--space-6)); overflow: hidden; }
#modal.pl-dialog--wide { max-width: 640px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex: none; }
.dialog-head .pl-icon-btn { margin: -10px -10px 0 0; flex: none; }
.dialog-title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dialog-title .pl-sheet__desc { margin-top: var(--space-1); }
.dialog-body { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pl-dialog .dialog-body { margin: 0 calc(-1 * var(--space-6)); padding: 2px var(--space-6); }
.dialog-foot { flex: none; }
#modal.panel, #modal.peek { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: none; height: 100dvh; max-height: none; padding: 0; gap: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--surface-raised); box-shadow: var(--shadow-lg); }
#modal.peek { z-index: 25; }
#modal.panel.wide-preview { width: min(1180px, 96vw); }
#modal.panel .dialog-head { padding: var(--space-5) var(--space-5) var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
#modal.panel .dialog-head .pl-icon-btn { margin: -6px 0 0; }
#modal.panel .pl-sheet__title { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.peek-bar { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); flex: none; }
.peek-bar .pl-icon-btn { width: 36px; height: 36px; }
#modal.panel .dialog-body, #modal.peek .dialog-body { flex: 1; padding: var(--space-6); }
#modal.panel .dialog-foot, #modal.peek .dialog-foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }
.hotel-preview-frame { width: 100%; height: 640px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-md); background: #ffffff; }

/* ----- Toast ----- */
#toast { position: fixed; left: 50%; bottom: var(--space-6); z-index: 60; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms cubic-bezier(.2,0,0,1); }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ----- Class names used by server-rendered pages (invitation, sign-in) ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-control); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-hover); color: var(--ink); }
.btn.primary { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); }
.standalone { max-width: 480px; margin: 10vh auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.standalone .pl-page-title { font-size: 28px; line-height: 34px; }

/* ----- Tablet: the sidebar collapses to icons ----- */
@media (max-width: 1024px) {
  :root { --sidebar-width: 64px; }
  .app-shell > .pl-sidebar { padding-left: var(--space-2); padding-right: var(--space-2); align-items: center; }
  .pl-sidebar .pl-logo { aspect-ratio: auto; width: 22px; overflow: hidden; }
  .pl-sidebar .pl-logo img { width: auto; max-width: none; clip-path: none; left: -3px; }
  .pl-sidebar .pl-logo img:last-child { display: none; }
  .pl-sidebar__brand { padding-left: 0; padding-right: 0; justify-content: center; }
  .pl-sidebar__group, .pl-side-item__label, .pl-sidebar .pl-side-item__count, .pl-sidebar__user, .pl-sidebar__footer > .pl-icon { display: none; }
  .pl-sidebar > .pl-side-item { width: 44px; padding: 0; justify-content: center; }
  .pl-sidebar > .pl-side-item[aria-current="page"]::before { left: -10px; }
  .pl-sidebar__footer { padding: var(--space-1); }
  .account-menu { left: calc(var(--sidebar-width) + var(--space-2)); bottom: var(--space-4); width: 300px; }
  .app-content { padding: var(--space-6); }
  .actionbar { margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-3) var(--space-6); }
  .split, .report-grid { grid-template-columns: minmax(0, 1fr); }
  .split__side.sticky { position: static; }
  .stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-layout { flex-direction: column; align-items: stretch; }
  .pl-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .priority-side { width: 100%; }
  .topbar-search { width: 220px; }
  .settings-layout { flex-direction: column; gap: var(--space-5); }
  .settings-nav { width: 100%; }
  .workspace-save-status { display: none; }
}

/* ----- Mobile: bottom tab bar, one column, sheets instead of dialogs ----- */
@media (max-width: 767px) {
  .app-shell > .pl-sidebar, .breadcrumb, .topbar-divider, .mode-switch, .partner-chooser { display: none; }
  .app-main { margin-left: 0; padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }
  .app-topbar { padding: 0 var(--space-2) 0 var(--space-4); gap: var(--space-2); }
  .topbar-mobile, .search-toggle, .topbar-avatar { display: flex; }
  .pl-topbar__actions { gap: 0; }
  .topbar-search { display: none; position: absolute; top: var(--topbar-height); left: 0; right: 0; width: auto; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
  .topbar-search.open { display: block; }
  .search-results { position: static; width: auto; margin-top: var(--space-2); box-shadow: none; max-height: 50vh; }
  .activity-menu { position: fixed; top: calc(var(--topbar-height) + var(--space-2)); left: var(--space-4); right: var(--space-4); width: auto; }
  .app-content { padding: var(--space-4); gap: var(--space-4); }
  .pl-page-title { font-size: 28px; line-height: 34px; letter-spacing: -0.015em; }
  .page-head { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .page-head__actions { width: 100%; }
  .page-head__actions .pl-btn--primary { flex: 1; height: var(--control-lg); font-size: 15px; }
  .app-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }
  .account-menu { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-width: 1px 0 0; box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-3) calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-3)); z-index: 19; }
  .menu-nav { display: flex; }
  .account-menu .pl-side-item { height: var(--touch-target); }
  .tabrow { flex-wrap: wrap; }
  .tabrow > .pl-tabs { flex-basis: 100%; }
  .filter-menu { position: fixed; top: auto; left: var(--space-4); right: var(--space-4); bottom: calc(var(--tabbar-height) + var(--space-4)); width: auto; }
  .filter-facets { width: 132px; }
  .tr.th { display: none; }
  .tr { display: flex; flex-wrap: wrap; padding: var(--space-3) var(--space-4); gap: var(--space-2) var(--space-3); min-height: 60px; }
  .tr > .sm-hide { display: none; }
  .tr > :first-child:not(.pl-check), .tr > .pl-check + * { flex: 1 1 50%; }
  .prio-grid, .stat-grid--3, .stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .prio, .stat { padding: var(--space-4); }
  .prio .val, .stat .val { font-size: 28px; line-height: 34px; }
  .stat-inline { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .twocol { grid-template-columns: minmax(0, 1fr); }
  .pl-card { padding: var(--space-4); }
  .pl-card.priority-list { padding: 0; }
  .pl-list-item__trailing .meta { display: none; }
  .activity-strip { flex-direction: column; align-items: flex-start; gap: var(--space-2); white-space: normal; }
  .activity-strip .link { margin-left: 0; }
  .actionbar { bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); }
  .entity .pl-avatar--xl { width: 48px; height: 48px; font-size: 17px; }
  #modal.pl-dialog { margin: auto 0 0; width: 100%; max-width: none; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-width: 1px 0 0; padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .pl-dialog .dialog-body { margin: 0 calc(-1 * var(--space-4)); padding: 2px var(--space-4); }
  .pl-dialog .pl-sheet__actions { flex-direction: column-reverse; }
  .pl-dialog .pl-sheet__actions .pl-btn { width: 100%; height: var(--control-lg); }
  #modal.panel, #modal.peek { width: 100vw; border-left: 0; }
  #modal.panel .dialog-body, #modal.peek .dialog-body { padding: var(--space-4); }
  #toast { bottom: calc(var(--tabbar-height) + var(--space-4)); max-width: calc(100vw - 2 * var(--space-4)); }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }