/* Logo → search → navigation → actions; source order also matches keyboard order. */
:root{--header-height:120px}
header.header{height:var(--header-height);display:grid;grid-template-columns:64px minmax(240px,1fr) auto auto;grid-template-rows:72px 48px;column-gap:32px;padding:0 32px;background:#fff;align-items:center}
header.header .wordmark,header.header .header-discovery,header.header .header-actions{position:static;inset:auto;transform:none}
header.header .wordmark{align-self:center;text-decoration:none;outline-offset:6px}
header.header .wordmark .oq{font-family:var(--editorial);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.055em}
header.header[data-logo="classic"] .wordmark .oq{font-family:"Syne",sans-serif;font-weight:700;font-size:38px;letter-spacing:-.08em}
header.header[data-logo="classic-heavy"] .wordmark .oq{font-family:"Syne",sans-serif;font-weight:800;font-size:38px;letter-spacing:-.08em}
header.header .header-discovery{display:flex;justify-content:flex-start;width:100%;min-width:0}
header.header .search,header.header .search:focus-within{width:100%;max-width:none;height:42px;border:1px solid #ebebed;border-radius:9px;background:#f6f6f7;box-shadow:none;padding:0 14px;gap:10px;transition:background .18s,border-color .18s,box-shadow .18s}
header.header .search:hover{border-color:#d8d8dc}header.header .search:focus-within{background:#fff;border-color:#b4b4bb;box-shadow:0 0 0 3px #11111108}
header.header .search svg{flex:none;width:18px;height:18px;color:#717178}header.header .search input{width:100%;min-width:0;font-size:14px;line-height:1.4;background:none}header.header .search input::placeholder{color:#82828a}
header.header .mode-switch{gap:26px;align-self:center;justify-self:end;white-space:nowrap}
header.header .mode-switch button{position:relative;height:40px;padding:8px 0;letter-spacing:0;font-size:14px;font-weight:500;color:#707078;border-radius:0;box-shadow:none}
header.header .mode-switch button:hover,header.header .mode-switch button.active{color:#111}header.header .mode-switch button.active::after{content:'';position:absolute;bottom:4px;left:0;right:0;height:1px;background:#111}
header.header .header-actions{gap:14px;justify-self:end;margin:0}header.header .add{width:34px;height:34px;font-size:23px;border:0;border-radius:8px;background:#f5f5f6;box-shadow:none;color:#333}header.header .add:hover{background:#eaeaec}
header.header .account-button{max-width:none;white-space:nowrap;background:none;padding:10px 0;font-size:12px!important;color:#707078}header.header .column-switch{display:flex;gap:4px}header.header .column-switch button{width:27px;height:27px;font-size:11px}
.header-filters{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:0;height:48px;border-top:1px solid #f1f1f3}
.header-filters .filters{display:flex;align-items:center;gap:26px;flex-wrap:nowrap;overflow:auto;scrollbar-width:none;min-width:0;margin:0;padding:0;height:100%}
.header-filters .filters button{flex:none;height:38px;border:0;border-radius:0;background:none;padding:8px 0;font-size:13px;font-weight:500;text-transform:none;color:#74747c;letter-spacing:0;box-shadow:none}
.header-filters .filters button.active{color:#111;background:none;box-shadow:0 1px 0 #111}.header-filters .filters button:hover{color:#111}
.header-filters .filter-selects{display:flex;gap:22px;flex:none;margin:0;padding:0}.header-filters .dock-select{width:auto;max-width:160px;height:36px;border:0;border-radius:0;background:none;padding:4px 16px 4px 0;color:#74747c;font-size:12px;box-shadow:none}
.header-filters button:focus-visible,header.header button:focus-visible,header.header .wordmark:focus-visible{outline:2px solid #777;outline-offset:4px}
.grid-view,.canvas-view,.library-view{top:var(--header-height)}.drop-overlay{top:calc(var(--header-height) + 12px)}
@media(max-width:1180px){header.header{column-gap:24px;grid-template-columns:60px minmax(200px,1fr) auto auto;padding:0 24px}header.header .column-switch{display:none}header.header .mode-switch{gap:22px}.header-filters .filters{gap:22px}}
@media(max-width:820px){header.header{column-gap:18px;grid-template-columns:54px minmax(140px,1fr) auto auto;padding:0 20px}header.header .mode-switch{gap:18px}header.header .header-actions{gap:10px}.header-filters{gap:18px}.header-filters .filter-selects{gap:12px}.header-filters .filters{gap:20px}}
@media(max-width:700px){
 :root{--header-height:158px}
 header.header{grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:64px 42px 52px;column-gap:12px;padding:0 16px}
 header.header .wordmark{grid-column:1;grid-row:1}header.header .wordmark .oq{font-size:38px}header.header[data-logo="classic"] .wordmark .oq{font-size:32px}
 header.header .header-discovery{grid-column:2;grid-row:1}header.header .search,header.header .search:focus-within{height:40px;padding:0 10px;gap:7px}header.header .search svg{width:16px;height:16px}header.header .search input{font-size:16px}
 header.header .mode-switch{grid-column:1/-1;grid-row:2;justify-self:end;gap:26px}header.header .mode-switch button{font-size:14px;height:36px}
 header.header .header-actions{grid-column:3;grid-row:1;gap:8px}header.header .account-button{position:relative;width:26px;height:34px;font-size:0!important;padding:0;max-width:26px;overflow:hidden}
 header.header .account-button::before{content:'';position:absolute;top:6px;left:9px;width:8px;height:8px;border:1px solid #666;border-radius:50%}header.header .account-button::after{content:'';position:absolute;bottom:6px;left:5px;width:16px;height:8px;border:1px solid #666;border-bottom:0;border-radius:9px 9px 0 0}
 header.header .add{width:30px;height:32px}
 .header-filters{grid-row:3;height:52px;overflow:auto;scrollbar-width:none;gap:26px}.header-filters .filters{overflow:visible;flex:none;gap:22px}.header-filters .filters button{height:38px;font-size:13px}.header-filters .filter-selects{flex:none}
}
@media(prefers-reduced-motion:reduce){header.header .search{transition:none}}
/* A distributed discovery rail, with compact sorting at its trailing edge. */
header.header{grid-template-columns:96px minmax(240px,1fr) auto auto}
.header-filters .filters{flex:1;gap:8px}
.header-filters .filters button{flex:1;min-width:64px;height:34px;padding:7px 12px;border-radius:18px;font-size:14px;transition:background .18s,color .18s}
.header-filters .filters button:hover{background:#f4f4f5}
.header-filters .filters button.active{background:#eeeeef;color:#111;box-shadow:none}
.header-filters .filter-selects{border-top:0}
@media(max-width:1180px){header.header{grid-template-columns:96px minmax(200px,1fr) auto auto}}
@media(max-width:820px){header.header{grid-template-columns:96px minmax(100px,1fr) auto auto}}
@media(max-width:700px){
 header.header{grid-template-columns:70px minmax(0,1fr) auto}
 header.header[data-logo="classic-heavy"] .wordmark .oq{font-size:28px}
 .header-filters .filters{flex:1 0 auto;gap:8px}
 .header-filters .filters button{flex:1;min-width:76px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.header-filters .filters button{transition:none}}