/* One calm toolbar on desktop; two deliberate rows on phones. */
:root{--app-header-height:80px;--side-width:235px}
.topbar.app-header{
  position:fixed;inset:0 0 auto;z-index:30;height:var(--app-header-height);
  display:grid;grid-template-columns:var(--side-width) minmax(0,1fr) auto;
  align-items:center;gap:0;padding:0;color:#f5f7ef;
  background:var(--header-bg);border-bottom:1px solid #ffffff12;
  box-shadow:0 1px 0 #00000008;
}
.app-header .header-brand{
  display:flex;align-items:center;gap:10px;min-width:0;height:100%;padding:0 22px;
  border-right:1px solid #ffffff12;color:inherit;font-size:18px;letter-spacing:-.5px;
}
.header-mark{display:block;flex-shrink:0;width:34px;height:34px}
.header-wordmark{white-space:nowrap}.header-wordmark .brand-light{font-weight:400;opacity:.82}
.header-context{display:flex;align-items:center;gap:24px;min-width:0;padding:0 28px}
.app-header .header-clock{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:4px;min-width:0;font-size:13px;font-weight:600;line-height:1.3;color:inherit;letter-spacing:.05px;white-space:nowrap}
.app-header .header-clock time{font-size:12px;font-weight:400;letter-spacing:.35px;color:#ffffffb3;font-variant-numeric:tabular-nums}
.app-header .header-date-full{display:inline}.app-header .header-date-compact{display:none}
.app-header .header-streak{display:flex;align-items:center;gap:7px;flex-shrink:0;min-height:34px;padding:0 0 0 22px;border:0;border-left:1px solid #ffffff25;border-radius:0;background:none;color:inherit}
.app-header .streak-icon{display:flex;color:#e5d3a7}.app-header .streak-icon .icon{width:18px;height:18px}
.streak-copy{display:flex;align-items:baseline;gap:5px}
.app-header .header-streak strong{font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap}
.app-header .streak-label{font-size:11px;font-weight:400;color:#ffffffb3}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding-right:28px}
.header-tools{display:flex;align-items:center;gap:0;height:44px;border-radius:12px;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff1a}
.app-header .header-tools>.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:10px;background:none;color:#f5f7ef}
.app-header .header-tools>.icon-button:hover{background:#ffffff18;color:#fff}
.app-header .header-tools>.icon-button .icon{width:19px;height:19px}
.app-header .ai-open{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;min-width:0;height:44px;min-height:44px;margin:0;padding:0 18px;border:1px solid #ffffff55;border-radius:12px;background:#f6f8f2;color:#293c32;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 2px 5px #0000000a}
.app-header .ai-open:hover{background:#fff;transform:none;box-shadow:0 3px 10px #00000015}
.app-header .ai-open .icon{width:18px;height:18px}
.app-header .ai-open .ai-label-full{display:inline}.app-header .ai-open .ai-label-short{display:none}
.app-header button:focus-visible,.app-header .header-brand:focus-visible{outline:2px solid #fff;outline-offset:3px}
.app-header .palette-menu button:focus-visible{outline-color:var(--accent);outline-offset:-2px}
.sidebar{width:var(--side-width);top:var(--app-header-height)}
.main{margin-left:var(--side-width);padding-top:var(--app-header-height)}

@media (min-width:1024px){
  .main > .content{max-width:none;margin-inline:0;padding-inline:var(--desktop-gutter,28px)}
  .content > .home-page{max-width:none}
}

@media(max-width:1200px){
  :root{--side-width:205px;--desktop-gutter:22px}
  .app-header .header-brand{padding-inline:17px;font-size:17px;gap:9px}
  .header-context{padding-inline:22px;gap:16px}
  .app-header .header-streak{padding-left:16px}
  .header-actions{padding-right:22px;gap:12px}
}
@media(min-width:701px) and (max-width:1050px){
  :root{--desktop-gutter:16px}
  .header-context{padding-inline:16px;gap:12px}
  .app-header .header-clock{font-size:12px}
  .app-header .header-clock time{font-size:11px}
  .app-header .header-streak{padding-left:12px;gap:6px}
  .app-header .streak-copy{flex-direction:column;align-items:flex-start;gap:1px}
  .app-header .header-streak strong{font-size:12px}
  .header-actions{padding-right:16px;gap:10px}
  .app-header .ai-open{padding-inline:12px}
  .app-header .ai-open .ai-label-full{display:none}.app-header .ai-open .ai-label-short{display:inline}
}
@media(min-width:701px) and (max-width:820px){
  .app-header .header-date-full{display:none}.app-header .header-date-compact{display:inline}
  .header-context{padding-inline:12px;gap:10px}
  .app-header .header-streak{padding-left:10px}
  .header-actions{padding-right:12px;gap:8px}
}
@media(max-width:700px){
  .topbar.app-header{
    position:relative;inset:auto;height:120px;
    grid-template-columns:minmax(0,1fr) auto 132px;grid-template-rows:44px 44px;
    gap:8px;padding:12px;
  }
  .app-header .header-brand{grid-row:1;grid-column:1 / 3;height:44px;width:fit-content;padding:0;border:0;font-size:17px;gap:9px}
  .header-mark{width:30px;height:30px}
  .header-context,.header-actions{display:contents}
  .app-header .header-tools{grid-row:1;grid-column:3;justify-self:end;width:132px}
  .app-header .header-clock{grid-row:2;grid-column:1;align-self:center;font-size:12px;gap:3px;letter-spacing:0}
  .app-header .header-clock time{font-size:11px;letter-spacing:.1px;color:#ffffffb3}
  .app-header .header-date-full{display:none}.app-header .header-date-compact{display:inline}
  .app-header .header-streak{grid-row:2;grid-column:2;height:36px;min-height:0;justify-self:end;gap:5px;padding:0 8px 0 0;border:0;background:none}
  .app-header .streak-copy{flex-direction:column;align-items:flex-start;gap:0}
  .app-header .header-streak strong{font-size:12px}.app-header .streak-label{font-size:10px}
  .app-header .streak-icon .icon{width:17px;height:17px}
  .app-header .ai-open{grid-row:2;grid-column:3;width:132px;height:44px;padding:0 10px;border-radius:11px;font-size:12px}
  .app-header .ai-open .ai-label-full{display:none}.app-header .ai-open .ai-label-short{display:inline}
  .main{margin-left:0;padding-top:0}
}
@media(max-width:359px){
  .app-header .brand-owner{display:none}.app-header .header-wordmark .brand-light{font-weight:600;opacity:1}
  .app-header .header-streak{padding-right:0;gap:4px}.app-header .header-streak strong{font-size:11px}
  .app-header .header-clock{font-size:11px}.app-header .header-clock time{font-size:10px}
}

/* Standard uses the same neutral surfaces in the header as in the workspace. */
:root[data-palette=standard] .app-header {--muted:inherit;color:var(--text);border-color:var(--border)}
[data-palette=standard] .app-header :is(.header-brand,.header-streak,.focus-launch) {border-color:var(--border)}
[data-palette=standard] .app-header :is(.header-tools,.focus-launch) {background:var(--surface-soft)}
[data-palette=standard] .app-header :is(.streak-icon,.streak-label,.header-clock time) {color:var(--muted)}
[data-palette=standard] .app-header .header-tools>.icon-button {color:var(--text)}
[data-palette=standard] .app-header .header-tools>.icon-button:hover {background:var(--accent-soft)}
[data-palette=standard] .app-header .ai-open {background:var(--accent);color:var(--surface);border-color:var(--accent)}
[data-palette=standard] .app-header :focus-visible {outline-color:var(--accent)}
[data-palette=standard][data-theme=light] .palette-toggle img {filter:invert(1)}