/* ClickProduction Studio. Load last on workspace, portal and authentication pages.
   Shared material and type roles; layouts and interaction semantics stay owned
   by their component sheets. Orange is the existing glass-v2 brand anchor. */
:root {
  --studio-orange: #FF702E;
  --studio-orange-highlight: #FF9B57;
  --studio-ink: #191C21;
  --studio-secondary: #363B43;
  --studio-muted: #444A53;
  --studio-canvas: #DEE0E2;
  --studio-surface: #F1F2F3;
  --studio-elevated: #FAFBFC;
  --studio-line: #92969D;
  --studio-control-line: #7F858E;
  --studio-dark: #202226;
  --studio-dark-secondary: #D5D8DE;
  --studio-teal: #087F7C;
  --studio-teal-text: #076C6A;
  --studio-success: #087248;
  --studio-danger: #B4233B;
  --studio-focus: #8F3511;
  --studio-edge: rgba(255, 255, 255, .68);
  --studio-pane: rgba(241, 242, 243, .52);
  --studio-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 10px 28px -18px rgba(24, 27, 33, .29);
  --accent: var(--studio-orange);
  --ink: var(--studio-ink);
  --muted: var(--studio-muted);
  --line: rgba(63, 69, 78, .23);
  --agency-text: var(--studio-ink);
  --agency-secondary: var(--studio-secondary);
  --agency-pane: var(--studio-pane);
  --agency-edge: var(--studio-edge);
  --agency-line: var(--line);
  --glass-shadow: var(--studio-shadow);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-synthesis: none;
}

/* The selected snowy glass scene: broad orange light, platinum mist and charcoal.
   Panes reveal the scenery independently; no opaque workspace backing layer. */
body:has(.app-shell), body.client-portal-page, body:has(.auth-layout) {
  color: var(--studio-ink);
  background-color: #92969D;
  background-image:
    radial-gradient(ellipse 21% 31% at 87% -2%, rgba(255, 112, 46, .98) 0%, rgba(255, 120, 56, .78) 34%, transparent 81%),
    radial-gradient(ellipse 18% 11% at 19% 42%, rgba(255, 112, 46, .94) 0%, rgba(247, 113, 50, .56) 43%, transparent 88%),
    radial-gradient(ellipse 28% 14% at 69% 91%, rgba(255, 130, 72, .94) 0%, rgba(255, 137, 87, .54) 42%, transparent 86%),
    radial-gradient(ellipse 21% 18% at 102% 58%, rgba(255, 112, 46, .94) 0%, rgba(255, 127, 69, .5) 47%, transparent 89%),
    radial-gradient(ellipse 12% 28% at 7% 82%, rgba(249, 106, 38, .84) 0%, rgba(224, 89, 30, .35) 39%, transparent 79%),
    radial-gradient(ellipse 21% 31% at 74% 15%, rgba(32, 34, 38, .86), transparent 82%),
    radial-gradient(ellipse 23% 26% at 96% 93%, rgba(32, 34, 38, .8), transparent 84%),
    radial-gradient(ellipse 38% 42% at 39% 48%, rgba(230, 232, 234, .97), rgba(214, 216, 220, .59) 55%, transparent 96%),
    radial-gradient(ellipse 30% 24% at 60% 8%, rgba(236, 237, 239, .9), transparent 95%),
    linear-gradient(124deg, #3C4047 3%, #B6B8BD 40%, #A4A8AF 64%, #343940 100%);
  background-attachment: fixed;
  background-size: cover;
  -webkit-font-smoothing: antialiased;
}
body:has(.app-shell)::before { opacity: .65; }
.app-shell .workspace { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
::selection { background: #FFB38E; color: var(--studio-ink); }
button, input, select, textarea { font-family: inherit; }

.app-shell #sidebar {
  background: linear-gradient(145deg, rgba(25, 27, 31, .89), rgba(24, 27, 31, .8));
  border: 1px solid rgba(231, 235, 241, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 20px 42px -20px rgba(15, 17, 22, .42);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  backdrop-filter: blur(26px) saturate(115%);
}
#sidebar .nav-item { color: #D4D9E1; font-weight: 500; }
#sidebar .nav-item:hover { color: #F7F8FA; background: rgba(222, 228, 237, .08); }
#sidebar .nav-item.active {
  color: var(--studio-ink);
  border-color: #FFB68C;
  background: linear-gradient(110deg, var(--studio-orange), #FF8A45);
  box-shadow: inset 0 1px 0 rgba(255, 235, 223, .7), inset 0 -1px 0 rgba(116, 45, 13, .2), 0 4px 8px -5px rgba(255, 112, 46, .5);
  font-weight: 700;
}
#sidebar .nav-item.active svg, #sidebar .nav-item.active small { color: var(--studio-ink); }
#sidebar > nav .nav-item { gap: 8px; padding-inline: 10px; }
#sidebar > nav .nav-item > span {
  flex: 1 1 auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}
#sidebar .nav-label { color: #A7AFBC; font-weight: 600; letter-spacing: .1em; }
#sidebar .brand strong { color: #F4F6F8; font-weight: 700; }
#sidebar .brand strong > span { color: var(--studio-orange); }
.app-shell .topbar {
  background: rgba(233, 235, 237, .45);
  border: 1px solid rgba(255, 255, 255, .64);
  box-shadow: var(--studio-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(112%);
  backdrop-filter: blur(26px) saturate(112%);
}
.app-shell .topbar .topbar-search {
  background: rgba(250, 251, 252, .52);
  border: 1.5px solid var(--studio-control-line);
  color: var(--studio-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.app-shell .topbar .topbar-search:hover { background: rgba(240, 241, 242, .86); border-color: #939AA5; }
.app-shell .topbar-search kbd { color: var(--studio-muted); }
.app-shell #main-content {
  color: var(--studio-ink);
  background: rgba(222, 224, 226, .52);
  border: 1px solid rgba(255, 255, 255, .66);
  border-bottom-color: rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 45px -27px rgba(19, 23, 29, .38);
  -webkit-backdrop-filter: blur(26px) saturate(112%);
  backdrop-filter: blur(26px) saturate(112%);
}

/* Strong titles, readable supporting information, unembellished body text. */
#main-content :is(.heading, .ag-heading, .ai-heading, .co-heading, .auto-heading, .sd-heading, .da-heading, .cp-admin-heading, .wa-heading) h1,
#main-content > .heading h1 {
  color: var(--studio-ink);
  font-weight: 700;
  letter-spacing: -.04em;
  text-wrap: balance;
}
#main-content :is(.heading, .ag-heading, .ai-heading, .co-heading, .auto-heading, .sd-heading, .da-heading, .cp-admin-heading, .wa-heading) p {
  color: var(--studio-secondary);
  font-weight: 400;
}
#main-content :is(.panel, .ag-panel, .co-panel, .ai-panel, .auto-card, .sd-panel, .int-card, .cp-panel) > h2,
#main-content :is(.section-title, .ag-section-title, .ai-section-heading, .co-section, .auto-section-title, .da-queue-title) h2 {
  color: var(--studio-ink);
  font-weight: 700;
  letter-spacing: -.025em;
}
#main-content :is(.agency-operations, .agency-insights, .content-operations, .cp-admin) {
  --ag-ink: var(--studio-ink);
  --ag-muted: var(--studio-muted);
  --ag-border: var(--studio-edge);
  --ai-ink: var(--studio-ink);
  --ai-muted: var(--studio-muted);
  --co-ink: var(--studio-ink);
  --co-muted: var(--studio-muted);
  --cp-ink: var(--studio-ink);
  --cp-muted: var(--studio-muted);
}
#main-content :is(.muted, .hint, .footnote, .ag-muted, .ai-muted, .co-muted, .co-note, .int-note, .auto-muted, .sd-muted, .cp-muted) {
  color: var(--studio-muted);
}
#main-content :is(.ag-field, .ai-field, .co-field, .auto-field, .int-field, .sd-field, .field, .compact-field, .cp-form-field, .cp-field, .da-filters label) {
  color: var(--studio-secondary);
  font-size: 12px;
  font-weight: 600;
}
#main-content :is(.ag-table, .ai-table, .co-table, .table-wrap table, .cp-table, .cp-invoice-table) {
  font-variant-numeric: tabular-nums;
}
#main-content :is(.ag-table, .ai-table, .co-table, .table-wrap table, .cp-table, .cp-invoice-table) th {
  color: var(--studio-secondary);
  background: rgba(222, 224, 226, .48);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
  border-bottom-color: rgba(79, 87, 101, .24);
}
#main-content :is(.ag-table, .ai-table, .co-table, .table-wrap table, .cp-table, .cp-invoice-table) td {
  color: var(--studio-ink);
  font-size: 13px;
  border-bottom-color: rgba(79, 87, 101, .16);
}
#main-content :is(.ag-table, .ai-table, .co-table, .table-wrap table, .cp-table, .cp-invoice-table) td small {
  color: var(--studio-muted);
  font-size: 12px;
}
#main-content :is(.ag-table, .ai-table, .co-table, .table-wrap table, .cp-table, .cp-invoice-table) td :is(.record-title, .text-link) {
  color: var(--studio-ink);
  font-weight: 600;
}
#main-content :is(.metric > strong, .bd-stat-content > strong, .ag-metrics strong, .co-metrics strong, .ai-cards article > strong, .da-count strong, .cp-metrics strong) {
  color: var(--studio-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}
#main-content :is(.metric > span, .bd-stat-content > span, .ag-metrics span, .co-metrics span, .ai-cards article > span, .da-count span, .cp-metrics span) {
  color: var(--studio-secondary);
  font-size: 12px;
  font-weight: 600;
}
#main-content :is(.metric > small, .ag-metrics small, .co-metrics small, .ai-cards article > small, .cp-metrics small,
  .cs-save, .co-provenance, .co-save-status, .ai-provenance, .cs-properties > span, .cs-comment time,
  .co-table small, .cs-preview-top small, .cs-preview-foot span, .da-row small, .da-kind,
  .auto-rule-main > small, .auto-job small, .auto-engine small, .auto-journey-rules small) {
  color: var(--studio-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* Snowy inner panes retain enough diffusion for dense working text. */
.app-shell #main-content[data-view] :is(.panel, .ag-panel, .co-panel, .ai-panel, .metric, .ag-metrics > article, .co-metrics > article, .ai-cards > article,
  .bd-stat, .connected-workflow, .journey, .table-wrap, .wf-test, .auto-card, .sd-panel, .int-card, .cp-panel, .cp-metrics > article,
  .team-access-panel, .da-count, .wa-summary, .wa-list, .wa-detail) {
  background: linear-gradient(140deg, rgba(250, 251, 252, .56), rgba(241, 242, 243, .44) 60%, rgba(222, 224, 226, .48));
  border: 1px solid rgba(255, 255, 255, .7);
  border-top-color: rgba(255, 255, 255, .86);
  border-bottom-color: rgba(255, 255, 255, .44);
  border-radius: 16px;
  box-shadow: var(--studio-shadow);
}
#main-content :is(.ag-editor, .co-editor, .cs-preview, .cs-resource) {
  background: rgba(250, 251, 252, .68);
  border: 1.5px solid var(--studio-control-line);
  box-shadow: var(--studio-shadow);
}
#main-content :is(.bd-board .board-column, .ag-board-column, .delivery .board-column) {
  background: rgba(239, 240, 242, .28);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
#main-content :is(.bd-board .board-column, .ag-board-column, .delivery .board-column) > header h2 {
  color: var(--studio-ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
}
#main-content :is(.column-total, .column-empty, .customer-results, .da-row p, .da-queue-title > small, .wa-row small, .wa-row > span:not(.badge)) {
  color: var(--studio-secondary);
  font-size: 12px;
}
.app-shell #main-content :is(.bd-card, .deal-card, .service-card, .cs-card, .segment-card) {
  background: linear-gradient(145deg, rgba(59, 62, 69, .87), rgba(30, 33, 38, .9) 76%);
  border: 1px solid rgba(235, 239, 245, .52);
  border-top-color: rgba(255, 255, 255, .6);
  border-bottom-color: rgba(255, 255, 255, .25);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 9px 20px -13px rgba(16, 19, 25, .43);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  backdrop-filter: blur(16px) saturate(110%);
  color: #F4F6F8;
}
.app-shell #main-content :is(.bd-card, .deal-card, .service-card, .cs-card, .segment-card):hover {
  border-color: rgba(255, 171, 124, .58);
}
/* Match the older component sheet's state specificity so its solid base cannot
   turn these translucent cards back into stacked slabs. */
.app-shell #main-content :is(.bd-card, .deal-card, .service-card, .cs-card):not(.is-selected) {
  border-top-color: rgba(255, 255, 255, .6);
  border-bottom-color: rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 9px 20px -13px rgba(16, 19, 25, .43);
}
.app-shell #main-content :is(.bd-card-company, .deal-card h3, .deal-card .record-title, .service-card > h2, .service-card .record-title,
  .cs-card-open > strong, .segment-card > strong) {
  color: #F4F6F8;
  font-weight: 650;
  letter-spacing: -.015em;
}
#main-content .bd-card .bd-card-title { color: var(--studio-dark-secondary); font-weight: 400; }
#main-content .cs-card-open > span, #main-content .cs-card-open > p, #main-content .cs-card > footer,
#main-content .segment-card > small, #main-content .segment-card > p { color: var(--studio-dark-secondary); font-size: 12px; }
.app-shell #main-content .cs-card.is-selected,
.app-shell #main-content .segment-card.selected {
  border-color: #FFAB7C;
  box-shadow: inset 0 0 0 1px #FFAB7C, 0 9px 18px -10px rgba(13, 19, 29, .4);
}
#main-content .cs-day-label, #main-content .cs-day-head > time { color: var(--studio-secondary); font-size: 12px; }
#main-content .cs-day.is-today time { background: var(--studio-orange); color: var(--studio-ink); }
#main-content .cs-calendar-scroll { background: rgba(225, 226, 228, .36); border-color: rgba(90, 100, 116, .25); }

/* Shared controls: one orange action treatment, quieter secondary actions. */
#main-content :is(.btn, .ag-button, .ai-button, .co-button, .auto-button, .sd-button, .cp-button),
:is(.drawer, .form-dialog, .cp-drawer, .cp-modal, .cs-dialog) :is(.btn, .ag-button, .cp-button) {
  font-weight: 600;
  font-size: 12px;
  border-radius: 8px;
}
#main-content :is(.btn, .ag-button, .ai-button, .co-button, .auto-button, .sd-button, .cp-button):where(:not(.primary, .ag-primary, .co-primary, .sd-primary, .ai-primary, .quiet, .selected, .is-active, .active, .danger, .danger-text, [aria-current], [aria-pressed='true'], [aria-selected='true'], :disabled)) {
  background: rgba(250, 251, 252, .82);
  border: 1.5px solid var(--studio-control-line);
  color: var(--studio-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}
.app-shell #main-content :is(.btn.primary, .ag-button.ag-primary, .ai-button.ai-primary, .co-button.co-primary, .auto-button.primary, .sd-button.sd-primary, .cp-button.primary),
.client-portal-page .cp-button.primary {
  background: linear-gradient(145deg, #FF9B57, #FF702E 70%);
  color: var(--studio-ink);
  border: 1.5px solid #B54A14;
  border-top-color: #FFB483;
  box-shadow: inset 0 1px 0 rgba(255, 239, 225, .7), inset 0 -1px 0 rgba(121, 43, 8, .18), 0 2px 0 rgba(128, 45, 9, .25), 0 9px 14px -11px rgba(127, 53, 20, .65);
  font-weight: 700;
}
.app-shell #main-content :is(.btn.primary, .ag-button.ag-primary, .ai-button.ai-primary, .co-button.co-primary, .auto-button.primary, .sd-button.sd-primary, .cp-button.primary):not(:disabled):hover,
.client-portal-page .cp-button.primary:not(:disabled):hover { background: #FF854D; border-color: #C8501D; }
.app-shell #main-content :is(.btn, .ag-button, .ai-button, .co-button, .auto-button, .sd-button, .cp-button):disabled,
.client-portal-page .cp-button:disabled {
  background: #C4C8CE;
  color: #535C69;
  border-color: #9DA4AF;
  box-shadow: none;
  opacity: 1;
}
#main-content :is(.ag-field, .ai-field, .co-field, .auto-field, .sd-field, .field, .compact-field, .cp-form-field, .cp-field, .da-filters label) :is(input, select, textarea) {
  color: var(--studio-ink);
  background: var(--studio-elevated);
  border: 1.5px solid var(--studio-control-line);
  font-weight: 400;
  box-shadow: inset 0 1px 2px rgba(26, 33, 44, .025);
}
#main-content :is(input, textarea)::placeholder { color: #535B67; opacity: 1; }
#main-content :is(.ag-segmented, .int-tabs) { background: rgba(76, 84, 99, .1); border-color: rgba(84, 94, 110, .2); }
#main-content :is(.cs-nav .ag-button[aria-current='page'], .ag-segmented .ag-button[aria-pressed='true'], .int-tabs button[aria-selected='true'], .co-nav a[aria-current='page']) {
  color: #F5F6F8;
  background: #303640;
  border-color: #454E5C;
  box-shadow: inset 0 -2px 0 var(--studio-orange);
}
#main-content :is(.ag-table, .ai-table, .co-table) tbody tr:hover { background: rgba(240, 241, 242, .48); }
#main-content :is(.co-bars i, .ai-bar > i) { background: linear-gradient(90deg, #BA4B1B, var(--studio-orange)); }

/* Task completion, due date and editing remain independent hit targets. */
:is(#main-content, .drawer) .task-row:has(> input[data-task]) {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) max-content max-content;
  align-items: start;
  gap: 8px 12px;
  cursor: default;
}
:is(#main-content, .drawer) .task-row > span > label {
  display: block;
  color: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
:is(#main-content, .drawer) .task-row > input[data-task] { margin: 3px 0 0; }
:is(#main-content, .drawer) .task-row > time { max-width: 110px; white-space: normal; }
:is(#main-content, .drawer) .task-row > [data-action='edit-task'] { align-self: start; margin-top: -7px; }

/* Drawers keep a quiet, near-opaque reading surface above the scenery. */
:is(.drawer, .form-dialog, .cp-drawer, .cp-modal, .cs-dialog) {
  background: linear-gradient(142deg, rgba(250, 251, 252, .97), rgba(241, 242, 243, .96) 63%, rgba(222, 224, 226, .97));
  color: var(--studio-ink);
  border: 1.5px solid #7F858E;
  border-top-color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 25px 65px rgba(20, 23, 29, .29);
}
:is(.drawer, .form-dialog, .cp-drawer, .cp-modal, .cs-dialog) :is(h2, h3, .record-title, .properties dd, .linked-row > strong) {
  color: var(--studio-ink);
  font-weight: 600;
}
:is(.drawer, .form-dialog, .cp-drawer, .cp-modal, .cs-dialog) :is(p, small, label, .field, .properties dt, .hint, .note p, .linked-row, .activity time) { color: var(--studio-secondary); }
:is(.drawer, .form-dialog, .cp-drawer, .cp-modal, .cs-dialog) :is(input:not([type='checkbox']), select, textarea) {
  background: var(--studio-elevated);
  color: var(--studio-ink);
  border: 1.5px solid var(--studio-control-line);
}
:is(.drawer, .form-dialog, .cp-drawer, .cp-modal, .cs-dialog) :is(.quote-card, .note, .cp-note, .cp-connected-card) { background: #F4F5F6; border-color: #92969D; }
.form-dialog footer, .cp-drawer-bottom { background: #E3E5E8; border-color: #92969D; }

/* Team access has a silver frame around deliberately dark role and member cards. */
#main-content .team-access-panel { color: var(--studio-ink); }
#main-content .team-access-panel :is(.team-access-heading p, .team-section-heading h3 span, .team-loading, .team-empty, .team-empty p, .team-history article small) { color: var(--studio-secondary); }
#main-content .team-access-panel .team-eyebrow { color: var(--studio-focus); }
#main-content .team-access-panel > .team-hint,
#main-content .team-access-panel .team-history .team-hint { color: var(--studio-secondary); }
#main-content .team-access-panel .team-access-notice {
  background: #FFE5CD;
  color: #8F3511;
  border-color: #C57E4C;
}
#main-content .team-access-panel .team-access-notice p { color: #71371D; }
#main-content .team-access-panel :is(.team-role-grid article, .team-invite-form, .team-member, .team-invitation) { color: #F2F4F8; }
#main-content .team-access-panel .team-invite-form :is(h3, label) { color: #F2F4F8; }
#main-content .team-access-panel .team-invite-form .team-hint { color: #C5CEDE; }
#main-content .team-access-panel .team-confirmation { color: #FFE6D3; }
#main-content .team-access-panel .team-confirmation p { color: #F3DECA; }
#main-content .team-access-panel .team-error { color: #FFE0E7; }
#main-content .team-access-panel .team-success { color: #D8F4E8; }
#main-content .team-access-panel .team-danger-text { color: var(--studio-danger) !important; }

/* The client workspace uses the same silver, orange and charcoal materials. */
.client-portal-page {
  --cp-ink: var(--studio-ink);
  --cp-muted: var(--studio-muted);
  --cp-panel: var(--studio-pane);
  --cp-line: var(--studio-edge);
  --cp-orange: var(--studio-orange);
  font-family: inherit;
}
.client-portal-page .cp-topbar { background: rgba(32, 34, 38, .89); border-bottom: 1px solid rgba(255, 255, 255, .36); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.client-portal-page :is(.cp-hero, .cp-panel, .cp-content-card, .cp-metrics article) {
  background: linear-gradient(140deg, rgba(250, 251, 252, .72), rgba(241, 242, 243, .65) 60%, rgba(222, 224, 226, .68));
  border: 1px solid rgba(255, 255, 255, .7);
  border-top-color: rgba(255, 255, 255, .86);
  border-bottom-color: rgba(255, 255, 255, .46);
  box-shadow: var(--studio-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(110%);
  backdrop-filter: blur(24px) saturate(110%);
}
.client-portal-page .cp-hero { background: linear-gradient(125deg, rgba(250, 251, 252, .76), rgba(227, 229, 232, .64)); }
.client-portal-page .cp-hero h1 { color: var(--studio-ink); font-weight: 700; letter-spacing: -.045em; }
.client-portal-page :is(.cp-panel h2, .cp-section h2, .cp-content-card h3, .cp-metrics strong) { color: var(--studio-ink); font-weight: 700; }
.client-portal-page :is(.cp-hero p, .cp-panel p, .cp-content-card > p, .cp-metrics span, .cp-metrics small, .cp-content-footer small) { color: var(--studio-secondary); }
.client-portal-page :is(.cp-content-card > p, .cp-metrics span, .cp-metrics small, .cp-content-footer small, .cp-copy h4, .cp-asset, .cp-button, .cp-kicker) { font-size: 12px; }
.client-portal-page .cp-copy { background: rgba(250, 251, 252, .76); border-color: #92969D; }
.client-portal-page .cp-copy p { color: var(--studio-ink); }
.client-portal-page .cp-nav { background: #292F38; border-color: #4D5664; }
.client-portal-page .cp-nav button[aria-current] { background: #E2E4E7; color: var(--studio-ink); box-shadow: inset 0 -2px 0 var(--studio-orange); }
.client-portal-page .cp-nav button span { background: var(--studio-orange); color: var(--studio-ink); }

/* Sign-in and recovery keep their existing layout and form behaviour. */
body:has(.auth-layout) .auth-story { background: linear-gradient(145deg, rgba(32, 34, 38, .9), rgba(48, 51, 57, .83)); border: 1px solid rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
body:has(.auth-layout) .auth-card {
  background: linear-gradient(140deg, rgba(250, 251, 252, .84), rgba(241, 242, 243, .75) 70%, rgba(222, 224, 226, .78));
  border: 1.5px solid #7F858E;
  border-top-color: #FFFFFF;
  box-shadow: var(--studio-shadow), 0 30px 65px -29px rgba(10, 17, 29, .5);
  -webkit-backdrop-filter: blur(28px) saturate(110%);
  backdrop-filter: blur(28px) saturate(110%);
}
.auth-card h2 { color: var(--studio-ink); font-weight: 700; letter-spacing: -.04em; }
.story-content h1 { font-weight: 700; }
.auth-card :is(.auth-intro, .auth-note, .auth-foot, label) { color: var(--studio-secondary); }
.auth-card :is(label, .text-button, .password-input > button, .auth-foot) { font-size: 12px; }
.auth-card :is(input) { color: var(--studio-ink); background: var(--studio-elevated); border: 1.5px solid var(--studio-control-line); }
.auth-card .submit-button { background: linear-gradient(145deg, #FF9B57, #FF702E 70%); color: var(--studio-ink); border: 1.5px solid #B54A14; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 239, 225, .7), 0 2px 0 rgba(128, 45, 9, .25), 0 9px 14px -11px rgba(127, 53, 20, .65); }
.auth-card .submit-button:not(:disabled):hover { background: #FF854D; }
.auth-card .submit-button:disabled { background: #C4C8CE; color: #535C69; box-shadow: none; }

/* Focus remains distinguishable from hover; dark cards need the lighter ring. */
#main-content :is(a, button, input, select, textarea, summary):focus-visible,
.client-portal-page :is(a, button, input, select, textarea, summary):focus-visible,
.auth-card :is(a, button, input):focus-visible {
  outline: 3px solid var(--studio-focus);
  outline-offset: 3px;
}
#main-content :is(.bd-card, .deal-card, .service-card, .cs-card, .segment-card) :is(a, button, input, select, summary):focus-visible,
#sidebar :is(a, button):focus-visible { outline-color: #FFB38E; }

/* Delicate highlights give glass its depth without a heavy solid base. */
.app-shell #main-content[data-view] :is(.metric, .bd-stat, .ag-metrics > article, .co-metrics > article, .ai-cards > article, .cp-metrics > article, .da-count) {
  border-top: 1px solid rgba(255, 255, 255, .86);
  border-bottom-width: 1px;
  background: linear-gradient(135deg, rgba(250, 251, 252, .58), rgba(241, 242, 243, .42) 65%, rgba(222, 224, 226, .46));
  box-shadow: var(--studio-shadow);
}
.app-shell #main-content[data-view] :is(.bd-stat-icon, .workflow-step-icon, .auto-engine-icon) {
  color: #8F3511;
  background: linear-gradient(140deg, #FFE0C6, #FFAB6F);
  border: 1.5px solid #C56832;
  border-top-color: #FFF2E4;
  box-shadow: inset 1px 1px 0 #FFF5E9, inset -1px -2px 0 rgba(133, 51, 12, .15), 0 3px 0 rgba(119, 52, 18, .14);
}
.app-shell #main-content .bd-board .board-column > header {
  background: rgba(236, 238, 240, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.app-shell #main-content[data-view] :is(.workflow-step, .flow-preview > span) {
  background: linear-gradient(135deg, rgba(250, 251, 252, .66), rgba(232, 234, 237, .52));
  color: var(--studio-ink);
  border: 1px solid rgba(255, 255, 255, .72);
  border-top-color: #FFFFFF;
  box-shadow: var(--studio-shadow);
}
.app-shell #main-content[data-view] .workflow-step:hover { border-color: #B54A14; background: #FAFBFC; }
.app-shell #main-content :is(.workflow-arrow, .flow-preview > span svg) { color: #B54A14; }
.app-shell #main-content[data-view='workflows'] :is(.workflow-toolbar, .wf-palette, .wf-inspector, .wf-canvas-heading, .canvas-controls) {
  background: rgba(241, 242, 243, .72);
  border-color: #92969D;
  color: var(--studio-ink);
}
.app-shell #main-content[data-view='workflows'] .workflow-workspace { background: rgba(222, 224, 226, .2); }
.app-shell #main-content[data-view='workflows'] .wf-scroll {
  background-color: rgba(222, 224, 226, .2);
  background-image: radial-gradient(rgba(91, 98, 109, .3) .8px, transparent .8px);
}
.app-shell #main-content[data-view='workflows'] :is(.wf-canvas-heading strong, .wf-canvas-heading span, .wf-palette p, .palette-legend) { color: var(--studio-secondary); }
.app-shell #main-content[data-view='workflows'] .wf-palette > button { color: var(--studio-ink); background: rgba(250, 251, 252, .62); border-color: #92969D; }
.app-shell #main-content[data-view='workflows'] .wf-canvas-area {
  background-color: rgba(224, 226, 229, .35);
  background-image: radial-gradient(circle, rgba(91, 98, 109, .35) 1px, transparent 1px);
}
.app-shell #main-content[data-view='workflows'] .wf-node {
  background: linear-gradient(145deg, rgba(61, 65, 73, .9), rgba(32, 34, 38, .94) 78%);
  border: 1px solid rgba(235, 239, 245, .58);
  border-top-color: rgba(255, 255, 255, .69);
  border-bottom-color: rgba(255, 255, 255, .27);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 11px 24px -15px rgba(15, 18, 24, .43);
}
.app-shell #main-content[data-view='workflows'] .wf-node strong { font-weight: 700; }
.app-shell #main-content[data-view='workflows'] .wf-node.selected {
  border-color: #FF9B57;
  box-shadow: inset 0 1px 0 rgba(255, 229, 207, .3), 0 0 0 3px rgba(255, 112, 46, .22), 0 13px 26px -16px rgba(15, 18, 24, .5);
}
.app-shell #main-content[data-view='workflows'] .wf-node.complete { background: linear-gradient(145deg, #087F7C, #075344); border-color: #5AC9B1; border-top-color: #A2EAD3; }
.app-shell #main-content[data-view='workflows'] .wf-node.waiting { background: linear-gradient(145deg, #795516, #493516); border-color: #EDB650; border-top-color: #FFDB8C; }
.app-shell #main-content[data-view='workflows'] .wf-node.failed { background: linear-gradient(145deg, #8F2C43, #5A2133); border-color: #ED91A5; }
.app-shell #main-content[data-view='workflows'] .wf-node:is(.complete, .waiting, .failed) :is(strong, small, .node-kind) { color: #FAFBFC; }
.app-shell #main-content[data-view='workflows'] .wf-node .node-port { background: #FAFBFC; border-color: #FF9B57; }
.app-shell #main-content :is(.badge.green, .auto-status.enabled, .auto-status.completed),
.client-portal-page .cp-pill.green { color: var(--studio-success); background: #DDF5E8; border: 1px solid #6FAF8E; }
.app-shell #main-content :is(.badge.orange, .auto-status.pending, .auto-status.running),
.client-portal-page .cp-pill.orange { color: #8F3511; background: #FFE5CD; border: 1px solid #C57E4C; }
.app-shell #main-content :is(.auto-status.blocked, .auto-status.failed),
.client-portal-page .cp-pill.red { color: var(--studio-danger); background: #FFF0F2; border: 1px solid #CE8391; }
.app-shell #main-content .cloud-status { color: #075C3B; background: #DDF5E8; border-color: #6FAF8E; font-weight: 650; }
.app-shell #main-content .cloud-status:is(.error, .conflict) { color: var(--studio-danger); background: #FFF0F2; border-color: #CE8391; }
.app-shell #main-content .cloud-status.saving { color: #8F3511; background: #FFE5CD; border-color: #C57E4C; }
.app-shell #main-content :is(.ag-button, .ai-button, .co-button, .auto-button, .sd-button, .cp-button, .btn):not(:disabled):hover {
  border-color: #626B78;
}
.app-shell #main-content :is(.btn.primary, .ag-button.ag-primary, .ai-button.ai-primary, .co-button.co-primary, .auto-button.primary, .sd-button.sd-primary, .cp-button.primary):not(:disabled):hover,
.client-portal-page .cp-button.primary:not(:disabled):hover {
  background: linear-gradient(145deg, #FFB16F, #FF8545);
  border-color: #963B12;
}
.client-portal-page .cp-hero-mark {
  background: linear-gradient(142deg, rgba(255, 244, 224, .78), transparent 43%), radial-gradient(circle at 62% 27%, #FFAD69, #FF702E 58%, #B64817);
  border: 2px solid #FFD3AE;
  border-bottom-color: #B54A14;
  box-shadow: inset 2px 2px 1px rgba(255, 249, 237, .84), inset -3px -4px 0 rgba(130, 45, 11, .25), 5px 7px 0 rgba(142, 55, 20, .3), 16px 27px 28px -14px rgba(66, 30, 21, .45);
}
.client-portal-page .cp-section > .cp-section-title,
.client-portal-page .cp-invoice-details {
  background: linear-gradient(140deg, #FAFBFCF0, #E5E7EAB8);
  border: 1.5px solid #92969D;
  border-top-color: #FFFFFF;
  box-shadow: var(--studio-shadow);
}
.client-portal-page :is(.cp-timeline article, .cp-invoice-totals) { background: #F1F2F3; border-color: #92969D; }
.client-portal-page .cp-timeline-marker { color: #8F3511; background: linear-gradient(135deg, #FFE0C6, #FFAB6F); border-color: #C56832; border-top-color: #FFF2E4; }
.client-portal-page .cp-timeline-marker.complete { color: #075C3B; background: linear-gradient(135deg, #E9FFF2, #A7E3C3); border-color: #66A588; }
.client-portal-page .cp-timeline > li:not(:last-child)::before { background: #7F858E; }
.client-portal-page .cp-check.done { background: var(--studio-success); border-color: #075C3B; }
.client-portal-page .cp-review-panel { border: 2px solid #C56832; box-shadow: var(--studio-shadow), 0 0 0 3px rgba(255, 112, 46, .14); }
.client-portal-page .cp-stages li.current { color: var(--studio-ink); background: #FFD7B6; border-color: #B54A14; font-weight: 700; }

/* Directory and record headers are part of the same neutral glass system. */
.app-shell #main-content .cp-directory-wrap { background: rgba(241, 242, 243, .48); border-color: var(--studio-edge); box-shadow: var(--studio-shadow); }
.app-shell #main-content .cp-directory th { color: var(--studio-secondary); background: rgba(222, 224, 226, .58); border-color: rgba(90, 98, 110, .25); }
.app-shell #main-content .cp-directory tbody tr:hover { background: rgba(250, 251, 252, .38); }
.app-shell #main-content :is(.cp-search, .cp-select-label select, .cp-quiet-btn) { color: var(--studio-ink); background: rgba(250, 251, 252, .8); border-color: var(--studio-control-line); }

@media (max-width: 700px) {
  /* Keep the conversation notice readable beside its icon, with the action below. */
  #main-content[data-view='conversations'] .int-policy {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  #main-content[data-view='conversations'] .int-policy > div {
    grid-column: 2;
    min-width: 0;
  }
  #main-content[data-view='conversations'] .int-policy > .btn {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    min-height: 42px;
    margin-left: 0;
    white-space: normal;
  }
  #main-content :is(.ag-button, .ai-button, .co-button, .auto-button, .sd-button, .cp-button) { min-height: 42px; }
  #main-content :is(.metric > span, .bd-stat-content > span, .ag-metrics span, .co-metrics span, .ai-cards article > span, .da-count span) { font-size: 12px; }
  #main-content :is(.cs-nav .ag-button, .co-nav a, .cs-card > footer, .cs-card-open > span, .cs-preview-foot span, .co-metrics small, .ai-cards article > small, .da-row small) { font-size: 12px; }
  body:has(.app-shell), body.client-portal-page, body:has(.auth-layout) { background-attachment: scroll; }
  :is(#main-content, .drawer) .task-row:has(> input[data-task]) {
    grid-template-columns: 17px minmax(0, 1fr) auto;
    gap: 6px 9px;
  }
  :is(#main-content, .drawer) .task-row > input[data-task] { grid-column: 1; grid-row: 1; }
  :is(#main-content, .drawer) .task-row > span { grid-column: 2; grid-row: 1; }
  :is(#main-content, .drawer) .task-row > time { grid-column: 2; grid-row: 2; max-width: none; text-align: left; }
  .app-shell #main-content[data-view] .task-row > time { max-width: none; text-align: left; }
  :is(#main-content, .drawer) .task-row > [data-action='edit-task'] {
    grid-column: 3;
    grid-row: 1 / 3;
    min-height: 42px;
    margin-top: -7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell #main-content :is(.bd-card, .cs-card, .segment-card, .btn.primary, .ag-button.ag-primary) { transition: none; }
  .client-portal-page :is(.cp-content-card, .cp-button) { transition: none; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body:has(.app-shell), body.client-portal-page, body:has(.auth-layout) { background: #A7ABB2; }
  .app-shell .topbar, .app-shell #main-content { background: var(--studio-canvas); }
  .app-shell #sidebar, body:has(.auth-layout) .auth-story { background: var(--studio-dark); }
  .app-shell #main-content :is(.panel, .ag-panel, .co-panel, .ai-panel, .metric, .ag-metrics > article, .co-metrics > article, .ai-cards > article,
    .bd-stat, .connected-workflow, .journey, .table-wrap, .wf-test, .auto-card, .sd-panel, .int-card, .cp-panel, .cp-metrics > article,
    .team-access-panel, .da-count, .wa-summary, .wa-list, .wa-detail),
  .client-portal-page :is(.cp-hero, .cp-panel, .cp-content-card, .cp-metrics article), body:has(.auth-layout) .auth-card { background: var(--studio-surface); }
  .app-shell #main-content :is(.bd-board .board-column, .ag-board-column, .delivery .board-column) { background: #DDE0E4; }
  .app-shell #main-content :is(.bd-card, .deal-card, .service-card, .cs-card, .segment-card) { background: var(--studio-dark); }
  .app-shell #main-content[data-view='workflows'] :is(.wf-node, .wf-node.selected) { background: var(--studio-dark); }
  .app-shell #main-content[data-view='workflows'] .wf-node.complete { background: #075F52; }
  .app-shell #main-content[data-view='workflows'] .wf-node.waiting { background: #604617; }
  .app-shell #main-content[data-view='workflows'] .wf-node.failed { background: #77283C; }
  .app-shell #main-content[data-view='workflows'] :is(.workflow-workspace, .wf-canvas-area, .wf-scroll) { background-color: #DDE0E4; }
  .app-shell #sidebar, .app-shell .topbar, .app-shell #main-content,
  .app-shell #main-content :is(.panel, .ag-panel, .co-panel, .ai-panel, .metric, .bd-stat, .connected-workflow, .table-wrap, .auto-card, .sd-panel, .int-card, .cp-panel, .bd-card, .deal-card, .service-card, .cs-card, .segment-card),
  .client-portal-page :is(.cp-hero, .cp-panel, .cp-content-card, .cp-metrics article), body:has(.auth-layout) :is(.auth-story, .auth-card) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app-shell #main-content[data-view] :is(.panel, .ag-panel, .co-panel, .ai-panel, .metric, .ag-metrics > article, .co-metrics > article, .ai-cards > article,
    .bd-stat, .connected-workflow, .journey, .table-wrap, .wf-test, .auto-card, .sd-panel, .int-card, .cp-panel, .cp-metrics > article,
    .team-access-panel, .da-count, .wa-summary, .wa-list, .wa-detail, .workflow-step, .flow-preview > span, .cp-directory-wrap, .workflow-toolbar, .wf-palette, .wf-inspector, .wf-canvas-heading, .canvas-controls) {
    background: var(--studio-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:has(.app-shell), body.client-portal-page, body:has(.auth-layout) { background: #A7ABB2; }
  .app-shell .topbar, .app-shell #main-content { background: var(--studio-canvas); }
  .app-shell #sidebar { background: var(--studio-dark); }
  .app-shell #main-content[data-view] :is(.panel, .ag-panel, .co-panel, .ai-panel, .metric, .ag-metrics > article, .co-metrics > article, .ai-cards > article,
    .bd-stat, .connected-workflow, .journey, .table-wrap, .wf-test, .auto-card, .sd-panel, .int-card, .cp-panel, .cp-metrics > article,
    .team-access-panel, .da-count, .wa-summary, .wa-list, .wa-detail, .workflow-step, .flow-preview > span, .workflow-toolbar, .wf-palette, .wf-inspector, .wf-canvas-heading, .canvas-controls),
  .client-portal-page :is(.cp-hero, .cp-panel, .cp-content-card, .cp-metrics article), body:has(.auth-layout) .auth-card { background: var(--studio-surface); }
  .app-shell #main-content :is(.bd-board .board-column, .ag-board-column, .delivery .board-column) { background: #DDE0E4; }
  .app-shell #main-content :is(.bd-card, .deal-card, .service-card, .cs-card, .segment-card), body:has(.auth-layout) .auth-story { background: var(--studio-dark); }
  .app-shell #main-content[data-view='workflows'] :is(.wf-node, .wf-node.selected) { background: var(--studio-dark); }
  .app-shell #main-content[data-view='workflows'] .wf-node.complete { background: #075F52; }
  .app-shell #main-content[data-view='workflows'] .wf-node.waiting { background: #604617; }
  .app-shell #main-content[data-view='workflows'] .wf-node.failed { background: #77283C; }
  .app-shell #main-content[data-view='workflows'] :is(.workflow-workspace, .wf-canvas-area, .wf-scroll) { background-color: #DDE0E4; }
}
@media (forced-colors: active) {
  body:has(.app-shell), body.client-portal-page, body:has(.auth-layout),
  .app-shell #sidebar, .app-shell .topbar, .app-shell #main-content,
  .app-shell #main-content :is(.panel, .ag-panel, .co-panel, .ai-panel, .metric, .ag-metrics > article, .co-metrics > article, .ai-cards > article,
    .bd-stat, .connected-workflow, .journey, .table-wrap, .wf-test, .auto-card, .sd-panel, .int-card, .cp-panel, .cp-metrics > article,
    .team-access-panel, .da-count, .wa-summary, .wa-list, .wa-detail, .bd-card, .deal-card, .service-card, .cs-card, .segment-card),
  .client-portal-page :is(.cp-hero, .cp-panel, .cp-content-card, .cp-metrics article),
  body:has(.auth-layout) :is(.auth-story, .auth-card), .auth-card .submit-button {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #sidebar .nav-item.active { background: Highlight; color: HighlightText; border-color: Highlight; box-shadow: none; }
  #main-content :is(.btn, .ag-button, .ai-button, .co-button, .auto-button, .sd-button, .cp-button):not(:disabled),
  .client-portal-page .cp-button.primary { background: ButtonFace; color: ButtonText; border-color: ButtonText; box-shadow: none; }
  #main-content :is(a, button, input, select, textarea, summary):focus-visible,
  .client-portal-page :is(a, button, input, select, textarea, summary):focus-visible,
  .auth-card :is(a, button, input):focus-visible { outline-color: Highlight; }
  .app-shell #main-content[data-view] :is(.panel, .ag-panel, .co-panel, .ai-panel, .metric, .ag-metrics > article, .co-metrics > article, .ai-cards > article,
    .bd-stat, .connected-workflow, .journey, .table-wrap, .wf-test, .auto-card, .sd-panel, .int-card, .cp-panel, .cp-metrics > article,
    .team-access-panel, .da-count, .wa-summary, .wa-list, .wa-detail, .workflow-step, .flow-preview > span, .wf-node,
    .wf-node:is(.selected, .complete, .waiting, .failed), .workflow-toolbar, .wf-palette, .wf-inspector, .wf-canvas-heading, .canvas-controls, .wf-canvas-area,
    .bd-stat-icon, .workflow-step-icon, .auto-engine-icon),
  .client-portal-page :is(.cp-hero-mark, .cp-section > .cp-section-title, .cp-invoice-details, .cp-timeline article, .cp-invoice-totals, .cp-timeline-marker, .cp-timeline-marker.complete, .cp-review-panel, .cp-check.done, .cp-stages li.current) {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .app-shell #main-content :is(.badge.green, .badge.orange, .auto-status, .auto-status.enabled, .auto-status.completed, .auto-status.pending, .auto-status.running, .auto-status.blocked, .auto-status.failed),
  .client-portal-page :is(.cp-pill.green, .cp-pill.orange, .cp-pill.red) { background: Canvas; color: CanvasText; border-color: ButtonText; }
  .app-shell #main-content :is(.btn.primary, .ag-button.ag-primary, .ai-button.ai-primary, .co-button.co-primary, .auto-button.primary, .sd-button.sd-primary, .cp-button.primary):not(:disabled),
  .client-portal-page .cp-button.primary:not(:disabled) { background: ButtonFace; color: ButtonText; border-color: ButtonText; box-shadow: none; }
  #sidebar .nav-item.active :is(svg, small) { color: HighlightText; }
  #main-content .team-access-panel,
  #main-content .team-access-panel :is(.team-access-heading p, .team-section-heading h3 span, .team-loading, .team-empty, .team-empty p, .team-history article small, .team-eyebrow, .team-hint, .team-access-notice, .team-access-notice p, .team-role-grid article, .team-invite-form, .team-invite-form h3, .team-invite-form label, .team-invite-form .team-hint, .team-member, .team-invitation, .team-confirmation, .team-confirmation p, .team-error, .team-success) { color: CanvasText; }
  #main-content .team-access-panel :is(.team-access-notice, .team-confirmation, .team-error, .team-success) { background: Canvas; border-color: CanvasText; }
  #main-content .team-access-panel .team-danger-text { color: ButtonText !important; }
}