/* Only type changes size; no zoom or transform-based scaling. */
html { font-size:16px; }
html[data-font-size="medium"] { font-size:18px; }
html[data-font-size="large"] { font-size:20px; }
.font-size-toggle { display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;height:36px;flex-shrink:0;background:var(--white);color:var(--muted); }
.font-size-icon { display:flex;align-items:center;justify-content:center;width:24px; }
.font-size-toggle button { display:grid;place-items:center;width:25px;height:28px;padding:0;border-radius:5px;background:transparent;color:inherit;font-size:11px;font-weight:600;line-height:1; }
.font-size-toggle button:hover { background:var(--sage);color:var(--ink); }
.font-size-toggle button[aria-pressed="true"] { background:var(--sage);color:var(--ink); }
/* Keep the identity and control chrome steady while the content reflows. */
.brand-name { font-size:24px; }.sidebar .brand-name { font-size:21px; }
.nav-end { gap:14px; }.top-members { gap:12px; }
.top-nav nav { gap:22px; }
.workspace-top,.chat-header { min-height:78px;height:auto;padding-top:14px;padding-bottom:14px; }
.chat-header { min-height:83px; }.chat-header p { overflow-wrap:anywhere; }
.task-title,.board-card h3,.workspace-tile h2 { overflow-wrap:anywhere; }
.hero h1 { font-size:clamp(3.3rem,5.9vw,5.375rem); }
@media(max-width:1100px) { .free-pill { display:none; }.top-nav { gap:16px; }.top-nav nav { gap:16px; }.top-nav nav a:last-child { display:none; } }
@media(max-width:800px) { .top-nav nav { display:none; }.workspace-top .avatar-stack { display:none; }.top-members { gap:8px; }.sidebar .brand-name { display:none; } }
@media(max-width:640px) {
 .top-nav { height:auto;min-height:73px;flex-wrap:wrap;gap:12px;padding:16px 20px; }.top-nav .brand-name { font-size:19px; }
 .nav-end { margin-left:auto;gap:8px; }.font-size-icon { display:none; }.font-size-toggle { height:32px; }.font-size-toggle button { width:22px;height:24px; }
 .workspace-top { min-height:63px;padding:10px 12px;gap:8px; }.breadcrumb { min-width:0; }.breadcrumb b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
 .top-members { flex-shrink:0;gap:6px; }.top-members .button { padding:7px 8px; }
 .hero h1 { font-size:clamp(3rem,14vw,3.8125rem); }
 .chat-header { min-height:70px; }.task-table-head,.task-row { grid-template-columns:minmax(0,1fr) 90px; }
}

/* Full-width header surface with centered, responsive contents. */
.top-nav{width:100%;max-width:none;height:auto;min-height:0;padding:0;display:block}
.top-nav-inner{box-sizing:border-box;width:100%;max-width:1320px;margin:0 auto;padding:16px 48px;min-height:91px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.top-nav-inner>.brand,.top-nav-inner>.nav-end{flex-shrink:0}
@media(max-width:1100px){.top-nav-inner{padding:16px 35px;gap:16px}}
@media(max-width:800px){.top-nav-inner{padding:14px 24px;min-height:76px}}
@media(max-width:640px){.top-nav-inner{padding:16px 20px;min-height:73px;gap:12px}.top-nav-inner>.nav-end{flex-wrap:wrap;max-width:100%}}

/* iOS Safari zooms focused fields below 16px. Keep pinch-to-zoom available.
   Use actual font sizing (including S/M/L), never zoom or transform scaling.
   Coarse pointers cover phones in landscape as well as portrait. */
@media (any-pointer: coarse), (max-width: 1024px) {
 input, textarea, select, [contenteditable]:not([contenteditable="false"]) {
  font-size: max(16px, 1rem) !important;
 }
}