/* Shared desktop finish. Surface styling only: workspace geometry and scrolling
   remain owned by the existing responsive styles. No large-area backdrop blur. */
:root {
  --mac-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mac-edge: #cdd0d5;
  --mac-divider: #e0e2e6;
  --mac-paper: #fff;
  --mac-chrome: linear-gradient(180deg, #fafafa, #edeef0);
  --mac-control: linear-gradient(180deg, #fff, #f5f5f6);
  --mac-inset: inset 0 1px 0 #ffffffdf;
  --mac-card-shadow: 0 1px 2px #18202c0b, 0 5px 12px -7px #18202c30;
  --mac-window-shadow: 0 0 0 1px #1c25300a, 0 2px 5px #1c253014, 0 20px 45px -18px #1c25304d;
  --mac-menu-shadow: 0 0 0 1px #1c25300c, 0 4px 10px #1c253015, 0 16px 36px -10px #1c253045;
}
:root[data-mode="dark"] {
  --mac-edge: #484c53;
  --mac-divider: #353940;
  --mac-paper: #202329;
  --mac-chrome: linear-gradient(180deg, #30333a, #272a30);
  --mac-control: linear-gradient(180deg, #383c44, #30333a);
  --mac-inset: inset 0 1px 0 #ffffff0e;
  --mac-card-shadow: 0 1px 2px #0002, 0 5px 12px -7px #0007;
  --mac-window-shadow: 0 0 0 1px #0003, 0 2px 5px #0003, 0 20px 45px -18px #0008;
}
/* Pearl title bars and precise window edges. */
.preview-scroll .preview-plate,
.tool-workspace, .tools-console, .plan-stage, .conversation {
  border-color: var(--mac-edge);
  border-radius: 8px;
  box-shadow: var(--mac-inset), var(--mac-window-shadow);
}
.preview-scroll .preview-plate {
  background: linear-gradient(150deg, #ffffffd9, #e9e9edc7);
}
.preview-wrap:not(.max) .preview-frame {border-radius: 6px; border-color: #bfc3ca}
.preview-chrome, .tool-workspace__bar, .tools-console__bar, .window-bar, .chat-top,
body[data-surface="plans"] .top {
  background: var(--mac-chrome);
  border-bottom-color: var(--mac-edge);
  box-shadow: var(--mac-inset);
  font-family: var(--mac-ui);
}
.composer-dots span, .preview-dots span, .window-lights i {
  box-shadow: inset 0 0 0 1px #00000016, inset 0 1px 1px #ffffff35;
}
/* Compact floating controls use an opaque reading surface, with glass-like rims. */
html .composer-shell,
html.engaged .composer-shell,
html.docked .composer-shell,
html.appfull .composer-shell {
  border-color: #ffffffb8;
  border-radius: 8px;
  background: linear-gradient(160deg, #fafafaf5, #eeeff2f5);
  box-shadow: var(--mac-inset), var(--mac-window-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .composer-shell .composer-surface {
  border-color: #d5d8dd;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f8f9fa);
  box-shadow: inset 0 1px 2px #18202c05, 0 1px 0 #fff;
}
.composer-shell .composer-header,
.composer-shell .composer-actions,
.composer-shell .ci-input,
.composer-shell .ci-mode,
.composer-shell .ct-log {font-family: var(--mac-ui)}
.composer-shell .ca-left > .ca-chip,
.composer-shell .mkt-btn {border-radius: 5px}
.composer-shell .ca-left > .ca-chip.pinned,
.composer-shell .ca-left > .ca-chip[aria-pressed="true"] {
  background: var(--mac-control);
  border-color: #c6cbd2;
  box-shadow: var(--mac-inset), 0 1px 3px #1c25301a;
}
.composer-shell .ci-input:focus,
.composer-shell .ci-input:focus-visible {outline: none; box-shadow: none}
html.engaged .ct-q {background: #e8ebef; border-color: #dde1e6}
.composer-shell .ci-send, #guide-send {
  background: linear-gradient(180deg, #353b44, #252a31);
  box-shadow: inset 0 1px 0 #ffffff25, 0 1px 2px #18202c20;
  border: 1px solid #20242a;
  border-radius: 5px;
}
.composer-shell .ci-send:disabled, #guide-send:disabled {
  background: #e6e8eb; border-color: #d9dde2; box-shadow: none; color: #838b96;
}
/* Menus retain the same navigation and responsive sizing. */
.tn-header {font-family: var(--mac-ui); border-bottom-color: #d3d5da}
.tn-header .tn-dropdown-panel, .tn-header .tn-mobile-panel,
.composer-shell .mkt-menu, .composer-shell .ci-results {
  border: 1px solid #cdd1d7;
  border-radius: 7px;
  background: linear-gradient(145deg, #fffffff9, #f4f5f7fa);
  box-shadow: var(--mac-inset), var(--mac-menu-shadow);
}
.tn-header .tn-login > summary, .tn-header .tn-mobile > summary,
.tn-header .tn-workspace-close {
  background: var(--mac-control);
  border-color: var(--mac-edge);
  border-radius: 5px;
  box-shadow: var(--mac-inset), 0 1px 2px #18202c0c;
}
.tn-header .tn-primary {
  border-radius: 5px;
  background: linear-gradient(180deg, #30353d, #1b1f25);
  box-shadow: inset 0 1px 0 #ffffff20, 0 1px 3px #18202c20;
}
/* Cards sit above a quieter canvas, with familiar native-style controls. */
body[data-surface="plans"] {--ui: var(--mac-ui)}
body[data-surface="plans"] .blk,
body[data-surface="plans"] .plan,
.feature-card, .resource-feature, .resource-topics > a, .journey-card,
.spotlight, .next-step {
  border-color: var(--mac-divider);
  border-radius: 7px;
  background: var(--mac-paper);
  box-shadow: var(--mac-inset), var(--mac-card-shadow);
}
body[data-surface="plans"] .blk__h {
  background: var(--mac-chrome);
  border-bottom-color: var(--mac-divider);
  border-radius: 6px 6px 0 0;
}
body[data-surface="plans"] .plan__carrier {border-bottom-color: var(--mac-divider)}
body[data-surface="plans"] .pick,
.tool-row__action, .resource-action, .journey-action,
.preview-chrome .pv-max, .suggestions button, .detail-chip {
  background: var(--mac-control);
  border: 1px solid var(--mac-edge);
  border-radius: 5px;
  box-shadow: var(--mac-inset), 0 1px 2px #18202c0d;
}
body[data-surface="plans"] .pick:hover {
  background: var(--mac-paper); border-color: #9fa8b4;
}
body[data-surface="plans"] .plan:hover {
  box-shadow: var(--mac-inset), 0 2px 4px #18202c0c, 0 9px 20px -11px #18202c45;
}
body[data-surface="plans"] .plan.is-picked {border-color: var(--ink)}
body[data-surface="plans"] .is-picked .pick {
  color: var(--bg); background: var(--ink); border-color: var(--ink);
}
body[data-surface="plans"] .cmpbar,
body[data-surface="plans"] .cmpview__panel {
  border-color: var(--mac-edge);
  border-radius: 8px;
  box-shadow: var(--mac-inset), var(--mac-window-shadow);
}
.price__n, .crow b {font-variant-numeric: tabular-nums}
/* No new motion or blur on the scrolling canvas; touch hit areas are inherited. */
@media (prefers-contrast: more) {
  :root {--mac-edge: #737b87; --mac-divider: #929ba7}
  html .composer-shell {border-color: #737b87; background: #fff}
}