/* Hallmark · genre: modern-minimal · macrostructure: Workbench · Plungo brand system
 * Shared product UI. P4 H4 E4 S5 R5 V4; functional surfaces, no decorative motion. */

body { font-size: var(--text-body); -webkit-font-smoothing: antialiased; }
h1 { font-size: var(--text-title); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
h2 { font-size: var(--text-md); font-weight: 580; letter-spacing: -.01em; }
h3 { font-size: var(--text-md); font-weight: 560; }
button, .button { font-size: var(--text-body); font-weight: 500; min-height: 2.125rem; border-radius: var(--radius-md); }
input, select, textarea { font-size: var(--text-body); background: var(--color-field); border-color: var(--color-field-boundary); min-height: 2.25rem; }
label { font-size: var(--text-body); font-weight: 500; gap: var(--space-2); }
button.primary { font-weight: 600; }
.field-help { font-size: var(--text-sm); line-height: 1.6; }
.eyebrow { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .08em; font-weight: 500; }
.page-head { margin-bottom: var(--space-6); align-items: center; }
.page-head .eyebrow { display: none; }
.page-head h1 + p { margin-top: var(--space-2); font-size: var(--text-body); max-width: 44rem; line-height: 1.6; }
.panel { border-radius: var(--radius-lg); }
.panel-header { min-height: 3.25rem; padding: var(--space-3) var(--space-5); }
.panel-header h2 { font-size: var(--text-md); font-weight: 550; }
.panel-header p { font-size: var(--text-sm); }
.panel-header > svg { display: none; }
.panel-body { padding: var(--space-5); }
.panel-status { padding: var(--space-3) var(--space-5); }
.status { font-size: var(--text-body); }
.badge { border-radius: var(--radius-sm); font: 400 var(--text-xs)/1.5 var(--font-body); }
.form-details > summary { font-size: var(--text-body); }
.form-details > .form-stack { padding-top: var(--space-4); }
.form-columns { gap: var(--space-4); }
.empty-state { padding: var(--space-7); font-size: var(--text-body); line-height: 1.7; }

/* A quiet rail with work up front, and secondary destinations grouped. */
.app-shell { grid-template-columns: 13.5rem minmax(0, 1fr); }
.sidebar { padding: var(--space-5) var(--space-3) var(--space-4); background: var(--color-paper); }
.sidebar .wordmark { padding: var(--space-1) var(--space-3); gap: var(--space-2); }
.wordmark > span { font-family: var(--font-display); font-weight: 650; font-size: 1.3rem; letter-spacing: -.05em; }
.wordmark > small { font-family: var(--font-body); font-size: .625rem; margin-left: 0; }
.sidebar .wordmark img { width: 1.625rem; height: 1.625rem; }
.workspace { margin: var(--space-6) var(--space-1) var(--space-3); min-height: 2.875rem; padding: var(--space-2); background: var(--color-paper-2); gap: var(--space-2); }
.workspace-icon { width: 1.75rem; height: 1.75rem; border: 0; background: var(--color-paper-4); color: var(--color-body); }
.workspace strong { font-size: var(--text-sm); font-weight: 500; }
.workspace small { font-size: var(--text-xs); margin-top: .125rem; }
.nav { gap: .125rem; }
.nav a, .nav-folder > summary { min-height: 2.125rem; padding: var(--space-2) var(--space-3); gap: var(--space-3); font-size: var(--text-body); font-weight: 450; }
.nav a svg, .nav-folder > summary > svg { width: .9375rem; height: .9375rem; opacity: .85; }
.nav a[aria-current="page"] { background: var(--color-accent-soft); border-color: var(--color-transparent); color: var(--color-ink); }
.nav a[aria-current="page"] svg { color: var(--color-brand); opacity: 1; }
.nav-folder { min-width: 0; }
.nav-label { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); color: var(--color-muted); font: 600 var(--text-xs)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.nav-folder:first-of-type { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.nav-folder > summary { display: flex; align-items: center; color: var(--color-muted); border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; list-style: none; }
.nav-folder > summary::-webkit-details-marker { display: none; }
.nav-folder > summary:hover { background: var(--color-paper-3); color: var(--color-ink); }
.nav-folder .nav-caret { margin-left: auto; width: .75rem; }
.nav-folder[open] .nav-caret { transform: rotate(90deg); }
.nav-folder > div { display: grid; gap: .125rem; padding: var(--space-1) 0 var(--space-2) var(--space-3); margin-left: var(--space-5); border-left: 1px solid var(--color-rule); }
.nav-folder > div a { min-height: 2rem; padding-block: var(--space-1); font-size: var(--text-sm); }
.breadcrumb-group { display: inline-flex; align-items: center; gap: var(--space-2); }
.sidebar-foot { font-size: var(--text-xs); padding-top: var(--space-6); }
.sidebar-foot .status-dot { width: .375rem; height: .375rem; box-shadow: none; }
.topbar { min-height: 3.25rem; padding: var(--space-2) var(--space-7); }
.breadcrumb { font-size: var(--text-sm); gap: var(--space-2); }
.top-actions { gap: var(--space-4); }
.avatar { width: 1.875rem; height: 1.875rem; font-size: var(--text-sm); font-weight: 500; }
#global-new-task { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
#global-new-task svg { width: .875rem; height: .875rem; }
#workspace-content { max-width: 100rem; padding: var(--space-7) var(--space-7) var(--space-10); }

/* The assignment is a composer. Access and context remain real form controls. */
.product-home-head h1 { font-size: var(--text-home); font-weight: 550; letter-spacing: -.035em; }
#product-assignment { background: var(--color-paper-2); border-color: var(--color-field-boundary); border-radius: var(--radius-lg); }
.composer-heading { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5) 0; }
.composer-mark { display: grid; place-items: center; color: var(--color-brand); }
.composer-mark svg { width: 1rem; height: 1rem; }
.composer-heading h2 { font-size: var(--text-body); font-weight: 550; }
.composer-hint { margin-left: auto; color: var(--color-muted); font-size: var(--text-xs); }
.product-composer { gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-4); }
.composer-prompt { gap: 0; }
.product-composer textarea[name="description"] { min-height: 6rem; max-height: 22rem; resize: vertical; border: 0; padding: var(--space-2) 0; background: var(--color-transparent); font-size: var(--text-md); line-height: 1.7; border-radius: 0; }
.product-composer textarea[name="description"]:focus-visible { outline-offset: var(--space-2); border-radius: var(--radius-sm); }
.product-assignment-examples { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-assignment-examples button { min-height: 1.875rem; padding: var(--space-1) var(--space-2); border-color: var(--color-rule); background: var(--color-transparent); font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
.product-assignment-examples button svg { width: .8125rem; height: .8125rem; }
.product-assignment-examples button:hover { color: var(--color-ink); border-color: var(--color-rule-strong); background: var(--color-paper-3); }
.composer-context { padding-block: var(--space-1); }
.composer-context > summary { display: inline-flex; gap: var(--space-1); align-items: center; color: var(--color-muted); font-size: var(--text-xs); cursor: pointer; list-style: none; }
.composer-context > summary::-webkit-details-marker { display: none; }
.composer-context > summary svg { width: .8125rem; height: .8125rem; }
.composer-context[open] { border-block: 1px solid var(--color-rule); padding-block: var(--space-3); }
.composer-context[open] > summary { color: var(--color-ink); }
.composer-context[open] > summary svg { transform: rotate(45deg); }
.composer-context .form-stack { padding-top: var(--space-4); }
.composer-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); border-top: 1px solid var(--color-rule); padding-top: var(--space-3); position: relative; }
.composer-profile { display: flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 15rem; }
.composer-profile > svg { color: var(--color-muted); width: .875rem; }
.composer-profile select { min-width: 5rem; width: auto; max-width: 12rem; min-height: 2rem; background: var(--color-transparent); border-color: var(--color-transparent); padding-inline: var(--space-1); font-size: var(--text-sm); text-overflow: ellipsis; }
.composer-footer > .primary { margin-left: auto; padding-inline: var(--space-3); min-height: 2rem; font-size: var(--text-sm); }
.composer-footer > .primary svg { width: .875rem; }
.composer-access { min-width: 0; }
.composer-access > summary { display: flex; align-items: center; gap: var(--space-1); list-style: none; cursor: pointer; font-size: var(--text-xs); color: var(--color-muted); padding: var(--space-2); border-radius: var(--radius-md); }
.composer-access > summary::-webkit-details-marker { display: none; }
.composer-access > summary svg { width: .8125rem; height: .8125rem; }
.composer-access-level { color: var(--color-body); font-size: var(--text-xs); padding: .125rem var(--space-1); background: var(--color-paper-4); border-radius: var(--radius-sm); margin-left: var(--space-1); }
.composer-access[open] { width: 100%; order: 3; }
.composer-access[open] > summary { width: fit-content; padding-left: 0; color: var(--color-ink); }
.composer-access[open] > .form-stack { padding: var(--space-3); background: var(--color-field); border: 1px solid var(--color-rule); border-radius: var(--radius-md); margin-top: var(--space-1); }
.composer-budget { margin-top: 0 !important; font-size: var(--text-xs); }
.composer-onboarding { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--color-rule); padding-top: var(--space-4); }
.composer-onboarding strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 500; }
.composer-onboarding p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-1); line-height: 1.6; }
#product-assignment[data-needs-profile="true"] .composer-footer,
#product-assignment[data-needs-profile="true"] .composer-context,
#product-assignment[data-needs-profile="true"] .product-assignment-examples,
#product-assignment[data-needs-profile="true"] .composer-budget { display: none; }
/* The agents beside the composer: a name, its model and limit in one line, and Edit for administrators. */
.teammate-panel { grid-area: teammate; display: grid; gap: var(--space-4); padding: var(--space-1) 0; border: 0; border-radius: 0; background: var(--color-transparent); }
.teammate-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.teammate-intro h2 { font-size: var(--text-md); font-weight: 600; }
.teammate-intro p { font-size: var(--text-sm); margin-top: var(--space-1); }
#product-profile-refresh { width: 2rem; min-height: 2rem; border: 0; background: var(--color-transparent); color: var(--color-muted); }
.home-agent-list { list-style: none; margin: 0; padding: 0; }
.home-agent-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: center; padding-block: var(--space-3); border-top: 1px solid var(--color-rule); }
.home-agent-list > li:last-child { border-bottom: 1px solid var(--color-rule); }
.home-agent-list strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 500; overflow-wrap: anywhere; }
.home-agent-list .muted { grid-column: 1; font-size: var(--text-sm); line-height: 1.5; }
.home-agent-list > li > button { grid-column: 2; grid-row: 1 / 3; justify-self: end; min-height: 2rem; font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border-color: var(--color-transparent); background: var(--color-transparent); color: var(--color-accent); }
.home-agent-list > li > button:hover { background: var(--color-paper-3); color: var(--color-ink); }
.profile-add { justify-content: flex-start; color: var(--color-muted); border: 1px dashed var(--color-rule-strong); background: var(--color-transparent); font-size: var(--text-sm); }
.profile-add svg { width: .875rem; height: .875rem; }
.home-context-links { display: grid; border-top: 1px solid var(--color-rule); padding-top: var(--space-2); }
.home-context-links a { display: flex; align-items: flex-start; gap: var(--space-2); padding-block: var(--space-3); color: var(--color-body); font-size: var(--text-sm); }
.home-context-links a:hover { text-decoration: none; color: var(--color-ink); }
.home-context-links a > svg:first-child { width: .875rem; height: .875rem; margin-top: .125rem; color: var(--color-muted); }
.home-context-links a > svg:last-child { width: .75rem; height: .75rem; margin-left: auto; margin-top: .125rem; }
.home-context-links small { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.6; }
.profile-workbench { width: min(calc(100% - 3rem), 46rem); max-height: calc(100dvh - 4rem); }
.profile-workbench .dialog-header { padding: var(--space-5) var(--space-6); }
.profile-workbench .dialog-header h2 { font-size: var(--text-lg); margin-block: var(--space-1); }
#product-profile-setup { padding: var(--space-6); }
#product-profile-setup > summary { display: none; }
#product-profile-form { gap: var(--space-6); }
#product-profile-form .product-grants { background: var(--color-field); padding: var(--space-4); }
#product-profile-form .product-grants legend { font-size: var(--text-sm); color: var(--color-body); }

/* Connection directory: choose a tool, then configure it in its working screen. */
.connection-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.connection-search { position: relative; flex: 1; max-width: 24rem; }
.connection-search > svg { position: absolute; left: var(--space-3); top: .65rem; color: var(--color-muted); width: .875rem; height: .875rem; }
.connection-search input { padding-left: var(--space-7); }
.connection-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.connection-tabs button { border: 0; background: var(--color-transparent); color: var(--color-muted); font-size: var(--text-sm); }
.connection-tabs button[aria-pressed="true"] { background: var(--color-paper-4); color: var(--color-ink); }
.connection-group { margin-bottom: var(--space-7); }
.connection-group > h3 { margin-bottom: var(--space-3); font-size: var(--text-body); color: var(--color-muted); font-weight: 500; }
.connection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.connection-card { display: flex; flex-direction: column; min-width: 0; gap: var(--space-3); border: 1px solid var(--color-rule); background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-5); color: var(--color-body); }
.connection-card:hover { border-color: var(--color-rule-strong); background: var(--color-paper-3); text-decoration: none; }
.connection-card-head { display: flex; align-items: center; gap: var(--space-3); }
.connection-symbol { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); background: var(--color-paper); flex-shrink: 0; }
.connection-card h4 { font-size: var(--text-md); font-weight: 550; }
.connection-card p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.65; }
.connection-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; font-size: var(--text-xs); padding-top: var(--space-2); }
.connection-card-foot .connection-state { color: var(--color-muted); }
.connection-card-foot .connection-state[data-connected="true"] { color: var(--color-success); }
.connection-card-foot .connection-state[data-connected="failing"] { color: var(--color-error); }
.connection-card-foot svg { width: .875rem; height: .875rem; color: var(--color-muted); }
.connection-count { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-5); }
.connection-catalog > h2, .connected-systems-section > h2 { color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; }
.connection-catalog-lead { margin: var(--space-1) 0 var(--space-4); color: var(--color-muted); font-size: var(--text-body); }

/* Connected systems: one card per registered system with its status, what Polo can reach in it, and its actions. */
.connected-systems-section { display: grid; gap: var(--space-3); margin-bottom: var(--space-9); }
.connected-systems-summary { margin: 0; color: var(--color-body); font-size: var(--text-body); }
.connected-systems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); align-items: start; gap: var(--space-3); }
.connected-system { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-5); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.connected-system:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.connected-system[data-state="failing"] { border-color: color-mix(in oklab, var(--color-error) 40%, var(--color-rule)); }
.connected-system-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); }
.connected-system-title { min-width: 0; }
.connected-system-title h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.connected-system-kind { margin: .125rem 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.connection-reach { margin: 0; color: var(--color-body); font-size: var(--text-sm); line-height: 1.5; }
.connection-reach[data-state="failing"] { color: var(--color-error); }
.connection-reach[data-state="attention"] { color: var(--color-warning); }
.connection-reach[data-state="disabled"] { color: var(--color-muted); }
.connected-system-reach { display: grid; gap: var(--space-2); min-width: 0; }
.connected-system-label { margin: 0; color: var(--color-muted); font: 500 var(--text-xs)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.connected-system-targets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.connected-system-targets li { display: grid; gap: .125rem; min-width: 0; line-height: 1.5; }
.connected-system-targets strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 520; overflow-wrap: anywhere; }
.connected-system-targets span { color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.connected-system-targets small { color: var(--color-body); font-size: var(--text-sm); overflow-wrap: anywhere; }
.connected-system-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.connected-system-foot:has(> details[open]) { justify-content: flex-end; }
.connected-system-foot > details { flex: 1 1 auto; min-width: 0; }
.connected-system-foot > details[open] { flex-basis: 100%; order: 2; }
.connected-system-foot > details > summary { font-size: var(--text-sm); }
.connected-system-foot > :is(.button, button) { min-height: 2rem; padding-inline: var(--space-3); font-size: var(--text-sm); }
.connected-system-details .operation-facts { margin-block: var(--space-3); }
.connected-systems-sources { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.connected-systems-disabled { margin-top: var(--space-2); }
.connected-systems-disabled > summary { font-size: var(--text-sm); }
.connected-systems-disabled > .connected-systems { margin-top: var(--space-3); }

/* Account entry stays calm and legible, with the same product type and controls. */
.auth-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
.auth-hero { padding: clamp(2rem, 6vw, 6rem); background: var(--color-paper-2); }
.auth-copy { margin-top: clamp(2rem, 8vh, 6rem); }
.auth-copy h1 { font-size: clamp(2.5rem, 4.7vw, 4.5rem); font-weight: 550; line-height: 1.08; letter-spacing: -.045em; }
.auth-copy > p:last-child { font-size: var(--text-md); line-height: 1.8; max-width: 23rem; }
.auth-art { border: 0; min-height: 12rem; place-items: start; padding-block: var(--space-6); }
.auth-art img { width: 6rem; transform: none; filter: none; }
.auth-art .art-grid, .auth-art .art-label { display: none; }
.auth-foot { line-height: 1.7; font-size: var(--text-xs); }
.auth-panel { padding: var(--space-8); }
.auth-form-wrap { width: min(100%, 23rem); }
#auth-title { font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
#auth-intro { font-size: var(--text-body); margin-bottom: var(--space-6); line-height: 1.7; }
.auth-panel input { min-height: 2.75rem; }
.auth-panel .primary { min-height: 2.75rem; justify-content: center; }
.auth-panel .primary svg { width: .875rem; }

@media (min-width: 1500px) {
  #workspace-content { padding-inline: var(--space-8); }
}
@media (max-width: 1150px) {
  #product-profiles { border-top: 1px solid var(--color-rule); padding-top: var(--space-5); }
  .home-context-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { padding: var(--space-3) var(--space-4); gap: var(--space-2); min-height: 3.75rem; }
  .top-actions { gap: var(--space-2); }
  .mobile-wordmark > span { display: none; }
  .mobile-wordmark img { width: 1.625rem; height: 1.625rem; }
  .mobile-navigation { margin-right: auto; max-width: 12rem; min-width: 0; }
  .mobile-navigation select { font-size: var(--text-body); font-weight: 500; min-height: 2.5rem; background: var(--color-transparent); border-color: var(--color-transparent); padding-inline: var(--space-1); }
  .topbar #global-new-task { min-height: 2.5rem; font-size: var(--text-sm); padding-inline: var(--space-3); }
  .topbar .avatar { width: 2.5rem; height: 2.5rem; }
  #global-new-task svg { display: none; }
  #workspace-content { padding: var(--space-6) var(--space-4) var(--space-8); }
  .page-head { align-items: flex-start; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
  .page-head h1 { font-size: 1.375rem; }
  .product-home-head h1 { font-size: var(--text-title); }
  .composer-heading { padding: var(--space-4) var(--space-4) 0; }
  .composer-hint { display: none; }
  .product-composer { padding: var(--space-3) var(--space-4) var(--space-4); }
  .product-composer textarea[name="description"] { min-height: 7rem; font-size: var(--text-md); }
  .product-assignment-examples { gap: var(--space-1); }
  .product-assignment-examples button { min-height: 2.5rem; }
  .composer-profile { max-width: 12rem; }
  .composer-profile select { max-width: 9rem; }
  .composer-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .composer-footer .composer-profile { grid-column: 1 / -1; max-width: none; padding-bottom: var(--space-1); }
  .composer-footer .composer-profile select { max-width: none; width: 100%; }
  .composer-footer > .primary { min-height: 2.5rem; }
  .composer-access { grid-row: 2; grid-column: 1; margin-right: auto; }
  .composer-access > summary { min-height: 2.5rem; }
  .composer-footer > .primary { grid-row: 2; grid-column: 2; }
  .composer-access[open] { grid-row: 3; grid-column: 1 / -1; }
  .composer-onboarding { flex-direction: column; align-items: flex-start; }
  .composer-context > summary { min-height: 2.5rem; }
  .home-context-links { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .profile-workbench { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .profile-workbench .dialog-header { padding: var(--space-4); }
  #product-profile-setup { padding: var(--space-5) var(--space-4); }
  .connection-grid { grid-template-columns: minmax(0, 1fr); }
  .connection-card { padding: var(--space-4); }
  .connected-systems { grid-template-columns: minmax(0, 1fr); }
  .connected-system { padding: var(--space-4); }
  .connected-system-head { grid-template-columns: auto minmax(0, 1fr); }
  .connected-system-head > .badge { grid-column: 2; justify-self: start; }
  .connected-system-foot > :is(.button, button) { min-height: 2.5rem; }
  .connected-system-foot > details > summary, .connected-systems-disabled > summary { line-height: 2.5rem; }
  .connection-card-foot { padding-top: 0; }
  .connection-toolbar { align-items: stretch; flex-direction: column; gap: var(--space-3); }
  .connection-search { max-width: none; }
  .connection-tabs button { min-height: 2.25rem; font-size: var(--text-xs); }
  .auth-layout { display: block; }
  .auth-hero { display: none; }
  .auth-panel { padding: var(--space-6); min-height: 100dvh; }
  .mobile-brand { display: flex; margin-bottom: var(--space-8); }
}
@media (max-width: 375px) {
  .topbar { padding-inline: var(--space-3); }
  .mobile-navigation { max-width: 8.5rem; }
  #workspace-content { padding-inline: var(--space-3); }
  .composer-profile { max-width: 9rem; }
  .composer-profile select { max-width: 7rem; }
  .composer-footer { gap: var(--space-1); }
  .composer-footer > .primary { padding-inline: var(--space-2); }
  .composer-footer > .primary svg { display: none; }
}
@media (pointer: coarse) {
  button, .button, input, select, .nav-folder > summary { min-height: 2.75rem; }
  .composer-access > summary, .composer-context > summary { min-height: 2.75rem; }
  .product-assignment-examples button { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; }
}