/* A page shown in a window of the desk (html.embed, see common.js): the window is the glass (css/desk.css), so
   the page itself is transparent and its cards are calm, lighter layers on that glass. Colour still means the
   area (yellow money, orange clients, lavender tasks, mint projects, olive insight), as softer tints. */

html.embed {
  --canvas: transparent; --ground: transparent; --surface: transparent;
  --c-card: rgba(255, 255, 255, var(--c-card-a, .42)); --c-card-hi: rgba(255, 255, 255, .62); --c-edge: rgba(255, 255, 255, .7);
  --c-field: rgba(255, 255, 255, .55); --panel: rgba(246, 248, 252, .82);
  --line: rgba(15, 20, 27, .1); --line2: rgba(15, 20, 27, .2);
  --btn-prime: #10151C; --btn-prime-ink: #E8E8DF;
  --tint: 62%;
}
html.embed[data-theme="dark"] {
  --c-card: rgba(255, 255, 255, var(--c-card-a, .06)); --c-card-hi: rgba(255, 255, 255, .1); --c-edge: rgba(255, 255, 255, .1);
  --c-field: rgba(0, 0, 0, .22); --panel: rgba(24, 28, 36, .86);
  --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .2);
  --btn-prime: #E8E8DF; --btn-prime-ink: #0B0B0B;
  --tint: 86%;
}
html.embed, html.embed body { background: transparent !important; }
html.embed body { font-size: 15px; }
html.embed :is(nav.side, #topbar, .tabbar, .phone-sheet, .sheet-backdrop, .nav-key) { display: none !important; }
html.embed .app { display: block; min-height: 0; }
html.embed main { padding: 10px 28px 40px; gap: 14px; max-width: none; }
html.embed { scrollbar-width: thin; scrollbar-color: rgba(127, 127, 127, .4) transparent; }

/* the window title already names the page: one quiet headline line */
html.embed h1 { font-size: clamp(24px, 2.4vw, 36px); color: var(--canvas-ink); }
html.embed h1 .ol:has(+ .solid) { display: none; }
html.embed .page-head > div:first-child > .muted, html.embed .page-head > div:first-child > #counts { margin-top: 8px; background: var(--c-card); border-color: var(--c-edge); }

/* ---------- calm content cards on the glass ---------- */
html.embed :is(.panel, .t-card, .dash-card, .member-card, .stat, .inbox-thread, .inbox-item, .cal-box, .wants-box, .kcol, .msg, .agenda-rail .ev-add) {
  background: var(--c-card); border: 1px solid var(--c-edge) !important; border-radius: var(--card-r, 26px); box-shadow: inset 0 1px 0 var(--c-card-hi); }
html.embed .panel.late { border-color: var(--c-edge) !important; }
html.embed .t-card.hot { border-color: var(--c-edge) !important; }

/* coloured cards become tinted glass of their area */
html.embed .area-money { background: color-mix(in srgb, var(--money) var(--tint), transparent) !important; }
html.embed .area-clients { background: color-mix(in srgb, var(--clients) var(--tint), transparent) !important; }
html.embed .area-tasks, html.embed .report-cards > .panel { background: color-mix(in srgb, var(--tasks) var(--tint), transparent) !important; }
html.embed .area-projects { background: color-mix(in srgb, var(--projects) var(--tint), transparent) !important; }
html.embed .area-insight { background: color-mix(in srgb, var(--insight) var(--tint), transparent) !important; }
html.embed [class*="area-"] { border: 1px solid rgba(255, 255, 255, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }

/* project, task and KPI cards: glass with a thin top edge in the colour of their area */
html.embed :is(.card, .kcard, .kpi-card) {
  --ink: var(--canvas-ink); --ink2: var(--canvas-ink); --muted: color-mix(in srgb, var(--canvas-ink) 62%, transparent);
  --line: rgba(127, 127, 127, .2); --line2: rgba(127, 127, 127, .35); --accent: var(--canvas-ink);
  color: var(--canvas-ink); background: var(--c-card) !important; border: 1px solid var(--c-edge) !important; border-radius: var(--card-r, 24px); }
html.embed .card { box-shadow: inset 0 3px 0 var(--mark-projects, var(--projects)), inset 0 1px 0 var(--c-card-hi); }
html.embed .kcard { box-shadow: inset 0 3px 0 var(--mark-tasks, var(--tasks)), inset 0 1px 0 var(--c-card-hi); }
html.embed .kpi-card { box-shadow: inset 0 3px 0 var(--mark-insight, var(--insight)), inset 0 1px 0 var(--c-card-hi); }
html.embed .card .sub, html.embed .kcard .meta { color: var(--muted); }
html.embed .card .chips span, html.embed .card .chips .cover { border-color: var(--line2); color: var(--canvas-ink); }
html.embed .mono { background: var(--canvas-ink); color: var(--projects); }
html.embed :is(.card, .kcard, .kpi-card):hover { background: var(--c-card-hi) !important; }

/* ---------- controls ---------- */
html.embed .btn { background: var(--c-field); border-color: var(--c-edge); color: var(--canvas-ink); }
html.embed .btn:hover { background: var(--c-card-hi); }
html.embed .btn.primary { background: var(--btn-prime); border-color: var(--btn-prime); color: var(--btn-prime-ink); }
html.embed .btn.primary:hover { filter: brightness(1.15); }
html.embed [class*="area-"] .btn { background: rgba(255, 255, 255, .35); border-color: rgba(0, 0, 0, .18); color: #0B0B0B; }
html.embed :is(input[type=text], input[type=search], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=url], select, textarea) {
  background: var(--c-field); border-color: var(--c-edge); color: var(--canvas-ink); }
html.embed :is(.seg, .segmented, .tabs) { background: var(--c-card); border-color: var(--c-edge); }
html.embed .seg button[aria-pressed="true"], html.embed .segmented button[aria-pressed="true"], html.embed .tabs button[aria-selected="true"] {
  background: var(--btn-prime) !important; color: var(--btn-prime-ink) !important; border-color: var(--btn-prime) !important; }
html.embed .chip, html.embed .tag-chip { background: var(--c-card); }

/* ---------- things that float: frosted glass over the page ---------- */
html.embed :is(dialog, .inv-panel, .menu-list, .filter-panel, .bell-panel) {
  background: var(--panel); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--c-edge); box-shadow: 0 30px 80px -20px rgba(20, 30, 50, .35), inset 0 1px 0 var(--c-card-hi); }
html.embed dialog { border-radius: 32px; }
html.embed dialog::backdrop, html.embed .inv-backdrop { background: rgba(20, 30, 50, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.embed .inv-panel { border-radius: 32px 0 0 32px; }
html.embed .inv-bar { background: transparent; }

/* ---------- details ---------- */
html.embed table.pay th { background: transparent; }
html.embed table.pay tr.clickable-row:hover, html.embed .lead-row:hover { background: var(--c-card-hi); }
html.embed .test-banner { margin: 0 0 4px; }
html.embed .chat-msg.them .chat-bubble { box-shadow: 0 6px 16px -8px rgba(255, 81, 40, .6); }
html.embed .chat-compose textarea { background: var(--c-field); }
html.embed .ec-tip { background: var(--btn-prime); color: var(--btn-prime-ink); border-color: transparent; }

/* motion inside a window: content settles in softly when the page opens (the cards' own rise comes from era.css) */
@keyframes glass-settle { from { opacity: 0; transform: translateY(10px); } }
html.embed main > * { animation: glass-settle .5s cubic-bezier(.2, .8, .2, 1) backwards; }
html.embed main > :nth-child(2) { animation-delay: .04s; } html.embed main > :nth-child(3) { animation-delay: .08s; }
html.embed main > :nth-child(n+4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { html.embed main > * { animation: none; } }

/* ---------- responsive inside a window: a card sizes its big figures to its own width, never past its edge ---------- */
/* (only on cards that sit in a grid track: a container has no width of its own, so a flex item would collapse) */
html.embed :is(.today-cards > .t-card, .dash > .dash-card, .kpi-cards > .kpi-card, .stat-trio > *) { container-type: inline-size; min-width: 0; }
html.embed .t-big { flex-wrap: wrap; row-gap: 6px; column-gap: 16px; margin: 26px 0 20px; }
html.embed .t-big .t-count { font-size: clamp(38px, 22cqi, 72px); }
html.embed .t-big .t-count.money { font-size: clamp(30px, 15cqi, 64px); }
html.embed .t-big span { font-size: clamp(16px, 6cqi, 22px); flex: 1 1 120px; min-width: 0; }
html.embed .dash-big strong { font-size: clamp(30px, 14cqi, 48px); overflow-wrap: break-word; }
html.embed .stat-trio b { font-size: clamp(30px, 16cqi, 60px); }
html.embed :is(.kpi-card .figure, .kpi-figure) { font-size: clamp(26px, 12cqi, 44px); }
html.embed .t-card.big { padding: clamp(20px, 6cqi, 32px) clamp(18px, 6cqi, 36px); }
html.embed :is(.t-card, .dash-card, .panel) :is(li, p, a, span) { overflow-wrap: break-word; }
html.embed :is(table) { max-width: 100%; }
html.embed :is(.table-wrap, .pay-wrap) { overflow-x: auto; }
html.embed img, html.embed svg, html.embed canvas { max-width: 100%; }
html.embed .today-cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
html.embed .page-head { flex-wrap: wrap; row-gap: 12px; }
html.embed .page-head > * { min-width: 0; }

/* Messages: the conversation list and the thread are glass too; in a narrow window they stack */
html.embed :is(.msg-thread, .msg-list, .msg-list-head, .msg-panel, .thread-top, .comp) { background: transparent !important; }
html.embed .msg-thread { background: var(--c-card) !important; }
@media (max-width: 1250px) {
  html.embed .msg-panel { background: var(--panel) !important; -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border-radius: 26px 0 0 26px; }
}
@media (max-width: 860px) {
  html.embed .inbox { grid-template-columns: minmax(0, 1fr); }
  html.embed main { padding: 8px 16px 32px; }
}
html.embed main.msg-main .dash { max-height: none; }
html.embed main.msg-main { padding-bottom: 24px; }
html.embed .msg { border-radius: 26px; border: 1px solid var(--c-edge) !important; }
html.embed, html.embed body { overflow-x: clip; }   /* a page in a window never scrolls sideways; wide boards keep their own scroller */

/* ---------- second responsive pass ---------- */
html.embed main { container: page / inline-size; }
/* dashboards: as many columns of at least 260px as the window holds; wide cards never ask for more columns than exist */
html.embed .dash { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
html.embed .dash > .dash-card[style*="span 3"], html.embed .dash > .dash-card[style*="span 4"] { grid-column: 1 / -1 !important; }
@container page (max-width: 560px) { html.embed .dash > .dash-card { grid-column: 1 / -1 !important; } }
html.embed .ec-ring svg { max-width: 132px; height: auto; }
/* tab and filter rows wrap instead of sitting in a clipped band */
html.embed :is(.tabs, .seg, .segmented, .msg-filters, .filters, .chips-row) { flex-wrap: wrap; overflow: visible; background: transparent; border: 0; padding: 0; height: auto; row-gap: 8px; }
/* project cards on the board: names wrap rather than being cut */
html.embed .card .card-title h3.clip { white-space: normal; overflow: visible; text-overflow: clip; font-size: 17px; line-height: 1.2; }
html.embed .card .card-title .sub.clip { white-space: normal; }
/* the project page and other two-column pages: panels fill the column they are in */
html.embed .cols > :is(.wide, .narrow) > *, html.embed .cols > .panel { width: auto; align-self: stretch; }
@container page (max-width: 700px) { html.embed .cols { align-items: stretch; } }
/* avatars and initials stay readable on glass */
html.embed :is(.avatar, .ava, .mono-av) { color: #0B0B0B; }

/* ---------- in a window, what floats over the page (menus, filters, the bell, dialogs, the invoice and couple
   drawers) is nearly solid frosted glass, so the page under it never shows through ---------- */
html.embed :is(.menu-list, .filter-panel, .bell-panel, dialog, .inv-panel, .phone-sheet, [role="menu"], [role="listbox"]:not(select)) {
  background: var(--panel, rgba(250, 246, 240, .95)) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important; backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid var(--c-edge) !important;
  box-shadow: inset 0 1px 0 var(--c-card-hi), 0 24px 60px -18px rgba(20, 16, 12, .38), 0 4px 14px rgba(20, 16, 12, .08) !important; }
@media (max-width: 1250px) { html.embed .msg-panel { background: var(--panel) !important; } }
html.embed :is(.menu-list, .filter-panel, .bell-panel) { z-index: 60 !important; }