/* One shared layout for the daily, weekly and memo headers. */
@media screen{
 :root{--control-font:ui-monospace,SFMono-Regular,Menlo,Consolas,'Hiragino Kaku Gothic ProN',monospace;--save-saved:#78c2a5;--save-pending:#e4bc73;--save-error:#ee9991}
 html[data-theme=light]{--save-saved:#26795f;--save-pending:#966320;--save-error:#b34b45}
}
@media screen{
 :is(#today,#week-today,#month-today,#year-today).current-period{display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;height:auto;min-height:28px;padding:4px 9px;border:0;border-radius:4px;background:transparent;color:#9ed2e8;font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;white-space:nowrap;cursor:pointer}
 :is(#today,#week-today,#month-today,#year-today).current-period:hover{color:#d1effb;text-decoration:underline;text-underline-offset:3px}
 :is(#today,#week-today,#month-today,#year-today).current-period:disabled{opacity:.5;cursor:default}
 html[data-theme=light] :is(#today,#week-today,#month-today,#year-today).current-period{background:transparent;color:#266b8a}
 html[data-theme=light] :is(#today,#week-today,#month-today,#year-today).current-period:hover{color:#174b65}
 .period-navigation,#daily-view .date-title-row{display:grid;grid-template-columns:max-content max-content max-content;align-items:center;justify-content:start;gap:8px;width:max-content;max-width:100%}
 .period-navigation .current-period{grid-column:1 / -1;justify-self:center}
 .period-navigation h1,.period-navigation h2{margin:0}
 .week-toolbar,.annual-view > .year-navigation{align-items:flex-start}
 .annual-view > .year-navigation{padding-top:0}
 #history-view .sidebar-top{display:block;padding-top:0}
 #history-view .sidebar-top .month-stat{display:flex;flex-direction:row;align-items:baseline;gap:5px;margin:3px 0 0;padding:0;border:0;white-space:nowrap;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
 #history-view .sidebar-top .month-stat strong,#history-view .sidebar-top .month-stat span{font:inherit}
 @media(max-width:699px){.period-navigation,#daily-view .date-title-row{gap:6px}#daily-view .editor-head{flex-wrap:wrap}#daily-view .entry-actions{margin-left:auto}}
}
@media screen{
 :is(#print-daily,#week-print,#habit-print,#memo-print,#history-print-selected){display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border-color:#e2edf2;background:#e2edf2;color:#172631}
 #daily-view #print-daily,.week-toolbar #week-print,#habit-year-panel #habit-print,.memo-toolbar #memo-print,.history-print-tools #history-print-selected{padding:7px 10px;box-shadow:none;font:400 11px/1.2 var(--control-font);letter-spacing:normal}
 :is(#print-daily,#week-print,#habit-print,#memo-print,#history-print-selected)::before{content:'';display:block;flex:none;width:16px;height:16px;background:currentColor;--print-icon:var(--icon-print);mask:var(--print-icon) center/contain no-repeat;-webkit-mask:var(--print-icon) center/contain no-repeat}
 #daily-view .notebook-header,.week-toolbar{padding-top:22px}
 :is(#print-daily,#week-print,#habit-print,#memo-print,#history-print-selected):not(:disabled):hover{border-color:#fff;background:#fff;color:#172631}
 html[data-theme=light] :is(#print-daily,#week-print,#habit-print,#memo-print,#history-print-selected){border-color:#263b49;background:#263b49;color:#fff}
 html[data-theme=light] :is(#print-daily,#week-print,#habit-print,#memo-print,#history-print-selected):not(:disabled):hover{border-color:#385568;background:#385568;color:#fff}
}
@media screen{
 body>.wrap{padding-top:0}
 body>.wrap>header{width:calc(100vw - 60px);margin-left:calc((100% - 100vw)/2 + 30px)}
 body>.wrap>header,.memo-header,.week-header{display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:62px}
 body>.wrap>header .menu-toggle,.memo-header .menu-toggle,.week-header .menu-toggle{flex:none;margin:0}
 body>.wrap>header .brand,.memo-header strong,.week-header strong{display:block;flex:0 0 120px;width:120px;margin:0;overflow:hidden;white-space:nowrap;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
 body>.wrap>header .brand small{display:block;margin:0;font:inherit;color:inherit;letter-spacing:inherit}
 body>.wrap>header .sticky-entry-date,.memo-header .header-context,.week-header .header-context{flex:1 1 0;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:#d7e5ee}
 body>.wrap>header #entry-badge,.memo-header #memo-save,.week-header #week-save{flex:none;margin:0;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;white-space:nowrap;color:#aebecb}
 body>.wrap>header .account,.memo-header .header-account,.week-header .header-account{flex:none;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto;gap:14px}
 html[data-theme=light] body>.wrap>header .sticky-entry-date,html[data-theme=light] .memo-header .header-context,html[data-theme=light] .week-header .header-context{color:#263846}
 html[data-theme=light] body>.wrap>header #entry-badge,html[data-theme=light] .memo-header #memo-save,html[data-theme=light] .week-header #week-save{color:#526f7f}
 @media(max-width:600px){
  body>.wrap>header,.memo-header,.week-header{gap:8px}
  body>.wrap>header .brand,.memo-header strong,.week-header strong{display:block;flex-basis:80px;width:80px;font-size:8px}
  body>.wrap>header .sticky-entry-date,.memo-header .header-context,.week-header .header-context{font-size:10px}
  body>.wrap>header #entry-badge,.memo-header #memo-save,.week-header #week-save{font-size:10px;white-space:normal;max-width:80px;overflow-wrap:anywhere}
  body>.wrap>header .account,.memo-header .header-account,.week-header .header-account{gap:8px}
  .memo-header #header-username,.week-header #header-username,.memo-header #header-demo,.week-header #header-demo{display:none}
 }
 @media(max-width:699px){body>.wrap>header{width:calc(100vw - 24px);margin-left:calc((100% - 100vw)/2 + 12px)}}
}

@media screen{
 body>.wrap>header .header-view-context{flex:1 1 0;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:#d7e5ee}
 html[data-theme=light] body>.wrap>header .header-view-context{color:#263846}
 body:has(#journal:not([hidden]))> .wrap>header .date{display:none}
 body:not(:has(#journal:not([hidden])))> .wrap>header .header-view-context{display:none}
 @media(max-width:600px){body>.wrap>header .header-view-context{font-size:10px}}
}
/* Save status appears beside each page's editing controls. */
@media screen{
 .entry-actions #entry-badge,.week-toolbar #week-save,.memo-toolbar #memo-save{display:inline-block;flex:none;margin:0;color:#a9c0d0;font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:normal;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere}
 .week-toolbar #week-save:empty,.memo-toolbar #memo-save:empty{display:none}
 html[data-theme=light] .entry-actions #entry-badge,html[data-theme=light] .week-toolbar #week-save,html[data-theme=light] .memo-toolbar #memo-save{color:#3e6071}
}
/* Keep save feedback in the same corner even when the controls wrap. */
@media screen{
 #daily-view,.week-shell #journal,.memo-shell #journal{position:relative}
 .memo-toolbar{padding-top:22px}
 .entry-actions #entry-badge,.week-toolbar #week-save,.memo-toolbar #memo-save{position:absolute;top:10px;right:14px;max-width:calc(100% - 28px);min-width:0;min-height:0;text-align:right;white-space:normal;color:#91b6c4}
 .memo-toolbar #memo-save{top:-14px;right:-16px}
 @media(max-width:699px){.memo-toolbar #memo-save{top:-6px;right:2px}}
 body[data-embedded-memo=true] .memo-toolbar #memo-save{top:-2px;right:2px}
 html :is(.entry-actions #entry-badge,.week-toolbar #week-save,.memo-toolbar #memo-save)[data-save-state=saved]{color:var(--save-saved)}
 html :is(.entry-actions #entry-badge,.week-toolbar #week-save,.memo-toolbar #memo-save)[data-save-state=pending]{color:var(--save-pending)}
 html :is(.entry-actions #entry-badge,.week-toolbar #week-save,.memo-toolbar #memo-save)[data-save-state=error]{color:var(--save-error)}
}
/* Place print controls on the right edge of each page's card. */
@media screen{
 .memo-toolbar .memo-move-label{order:1}
 .memo-toolbar #memo-print{order:2;margin-left:auto;font:400 11px ui-monospace,SFMono-Regular,Menlo,Consolas,'Hiragino Kaku Gothic ProN',monospace;letter-spacing:normal}
 #history-view{position:relative}
 #history-view #history-print-selected{position:absolute;top:24px;right:24px}
 @media(max-width:699px){#history-view #history-print-selected{right:14px}}
}
@media screen{
 .header-today{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:5px 9px;border:1px solid #52697a;border-radius:4px;background:transparent;color:#c5d7e1;text-decoration:none;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;white-space:nowrap;cursor:pointer}
 .header-today:hover{background:#304452}
 html[data-theme=light] .header-today{border-color:#b7cbd5;color:#315f76}
 html[data-theme=light] .header-today:hover{background:#dcebf2}
 @media(max-width:600px){
  body>.wrap>header #username:not([hidden]),.memo-header #header-username,.week-header #header-username{display:inline!important;max-width:55px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body>.wrap>header .account,.memo-header .header-account,.week-header .header-account{min-width:0;max-width:52vw}
  .header-today{padding:4px 6px;font-size:10px}
 }
}

/* Keep the page name and its current date, period or memo title together. */
@media screen{
 body>.wrap>header .brand,.memo-header strong,.week-header strong{flex:0 1 auto;width:auto;max-width:40%;text-overflow:ellipsis}
 body>.wrap>header .sticky-entry-date,body>.wrap>header .header-view-context,.memo-header .header-context,.week-header .header-context{display:none!important}
}


/* Page-edge index tabs, with room for the journal alongside them. */
@media screen and (min-width:700px){
 body:has(.journal-index):not(:has(#auth:not([hidden]))):not(:has(#loading:not([hidden]))){--journal-left:max(38px,calc((100vw - 750px)/2));padding-left:calc(var(--journal-left) - 30px)}
 body:has(.journal-index):not(:has(#auth:not([hidden]))):not(:has(#loading:not([hidden]))) > .wrap{margin-left:0;margin-right:0;padding-left:30px;padding-right:30px}
 body:has(.journal-index):not(:has(#auth:not([hidden]))):not(:has(#loading:not([hidden]))) > .wrap > header{width:calc(100vw - var(--journal-left) - 30px);margin-left:0}
 .journal-index{position:fixed;top:110px;left:calc(var(--journal-left) - 32px);z-index:78;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:32px;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin}
 .journal-index-tab{display:flex;align-items:center;justify-content:center;min-height:44px;padding:7px 4px;border:1px solid #405464;border-right:0;border-radius:6px 0 0 6px;background:#1c2832;color:#aebfca;text-decoration:none;text-align:center;font:700 11px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
 .journal-index-tab{min-height:72px}
 .journal-index-tab span{writing-mode:vertical-rl;transform:rotate(180deg)}
 .journal-index-tab[data-page="daily"]{min-height:120px}
 .journal-index-tab:hover{background:#2a3d49;color:#e1edf3}.journal-index-tab[aria-current=page]{background:#344b59;border-color:#678493;color:#f2f8fb}
 .journal-index-short{display:none}
 html[data-theme=light] .journal-index-tab{background:#e3edf2;border-color:#c1d1d9;color:#557487}
 html[data-theme=light] .journal-index-tab:hover{background:#d7e8ef;color:#294e63}
 html[data-theme=light] .journal-index-tab[aria-current=page]{background:#f8fbfd;border-color:#a9c2ce;color:#294e63}
 .journal-index-tab[data-page="daily"]{background:#295c54;border-color:#68a994;color:#f0fff9}
 .journal-index-tab[data-page="daily"]:hover,.journal-index-tab[data-page="daily"][aria-current=page]{background:#367668;color:#fff}
 html[data-theme=light] .journal-index-tab[data-page="daily"]{background:#b9e7d8;border-color:#80bead;color:#22594c}
 html[data-theme=light] .journal-index-tab[data-page="daily"]:hover,html[data-theme=light] .journal-index-tab[data-page="daily"][aria-current=page]{background:#9edac6;color:#174b3f}
 body:has(#auth:not([hidden])) .journal-index,body:has(#loading:not([hidden])) .journal-index{display:none}
}
@media screen and (max-width:699px){.journal-index{display:none}}
@media print{.journal-index{display:none!important}}

/* Match the daily card width across journal pages. */
@media screen{
 body > .wrap:has(#journal:not([hidden]) #daily-view[hidden]){max-width:810px}
 body:not([data-embedded-memo]) > .memo-shell #journal{max-width:750px}
 @media(min-width:700px){body > .week-shell #journal{max-width:750px}}
 @media(max-width:699px){body:not([data-embedded-memo]) > .memo-shell{padding-left:18px;padding-right:18px}body:not([data-embedded-memo]) > .memo-shell > .memo-header{width:calc(100vw - 24px);margin-left:-6px}}
}

/* Give the main journal cards a shared surface across pages and themes. */
@media screen{
 body > .wrap #daily-view,body > .wrap #history-view,body > .wrap #habit-year-panel,body:not([data-embedded-memo]) > .week-shell #journal,body:not([data-embedded-memo]) > .memo-shell #journal{background:#191f28;border:1px solid #343c49;border-radius:6px;box-shadow:0 18px 48px #0004}
 html[data-theme=light] body > .wrap #daily-view,html[data-theme=light] body > .wrap #history-view,html[data-theme=light] body > .wrap #habit-year-panel,html[data-theme=light] body:not([data-embedded-memo]) > .week-shell #journal,html[data-theme=light] body:not([data-embedded-memo]) > .memo-shell #journal{background:#fff;border-color:#ced8e0;box-shadow:0 10px 30px #18344614}
}

/* Keep the shared header across the viewport independently of card width. */
@media screen and (min-width:700px){
 body:has(.journal-index):not(:has(#auth:not([hidden]))):not(:has(#loading:not([hidden]))) > .wrap > header,
 body:has(.journal-index) > .week-shell > .week-header,
 body:has(.journal-index) > .memo-shell > .memo-header{width:calc(100vw - 60px);margin-left:calc(30px - var(--journal-left,30px))}
}

/* Smooth same-origin page changes when the browser supports them. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
 ::view-transition-old(root),::view-transition-new(root){animation-duration:120ms}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media screen{.journal-index-tab[aria-busy=true]{opacity:.65}}

@media screen{.week-toolbar #week-save{min-width:9ch;min-height:1.3em}.week-toolbar #week-save:empty{display:inline-block;visibility:hidden}}

/* Extend the header surface to the viewport edges while keeping controls inset. */
@media screen{
 body > .wrap > header{width:100vw;margin-left:calc((100% - 100vw)/2);padding-left:30px;padding-right:30px}
 body > .week-shell > .week-header,body:not([data-embedded-memo]) > .memo-shell > .memo-header{width:100vw;margin-left:-30px;padding-left:30px;padding-right:30px}
 @media(min-width:700px){
  body:has(.journal-index):not(:has(#auth:not([hidden]))):not(:has(#loading:not([hidden]))) > .wrap > header,
  body:has(.journal-index) > .week-shell > .week-header,
  body:has(.journal-index) > .memo-shell > .memo-header{width:100vw;margin-left:calc(-1 * var(--journal-left,30px))}
 }
 @media(max-width:699px){
  body > .wrap > header{width:100vw;margin-left:calc((100% - 100vw)/2);padding-left:12px;padding-right:12px}
  body > .week-shell > .week-header{margin-left:-12px;padding-left:12px;padding-right:12px}
  body:not([data-embedded-memo]) > .memo-shell > .memo-header{width:100vw;margin-left:-18px;padding-left:12px;padding-right:12px}
 }
}

/* Keep the demo notice aligned with the full-width header. */
@media screen{
 body > .wrap > .demo-banner{width:100vw;margin-left:calc((100% - 100vw)/2);padding-left:30px;padding-right:30px;border-radius:0}
 body > .week-shell > .demo-banner,body:not([data-embedded-memo]) > .memo-shell > .demo-banner{width:100vw;margin-left:-30px;padding-left:30px;padding-right:30px;border-radius:0}
 @media(min-width:700px){
  body:has(.journal-index):not(:has(#auth:not([hidden]))):not(:has(#loading:not([hidden]))) > .wrap > .demo-banner,
  body:has(.journal-index) > .week-shell > .demo-banner,
  body:has(.journal-index) > .memo-shell > .demo-banner{margin-left:calc(-1 * var(--journal-left,30px))}
 }
 @media(max-width:699px){
  body > .wrap > .demo-banner{margin-left:calc((100% - 100vw)/2);padding-left:12px;padding-right:12px}
  body > .week-shell > .demo-banner{margin-left:-12px;padding-left:12px;padding-right:12px}
  body:not([data-embedded-memo]) > .memo-shell > .demo-banner{margin-left:-18px;padding-left:12px;padding-right:12px}
 }
}

/* Keep the floating memo beside the account controls. */
@media screen{
 header #floating-memo-open{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 11px;border:1px solid #637b89;border-radius:999px;background:transparent;color:#c5d7e1;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
 header #floating-memo-open::before{content:'';display:block;width:16px;height:16px;flex:none;background:currentColor;--memo-icon:var(--icon-memo);mask:var(--memo-icon) center/contain no-repeat;-webkit-mask:var(--memo-icon) center/contain no-repeat}
 header #floating-memo-open:hover{background:#304452}
 body > .wrap > header #floating-memo-open:not([hidden]) + .account,.week-header #floating-memo-open:not([hidden]) + .header-account{margin-left:0;padding-left:16px;border-left:1px solid #526978}
 html[data-theme=light] header #floating-memo-open{border-color:#b7cbd5;color:#315f76}
 html[data-theme=light] header #floating-memo-open:hover{background:#dcebf2}
 html[data-theme=light] body > .wrap > header #floating-memo-open:not([hidden]) + .account,html[data-theme=light] .week-header #floating-memo-open:not([hidden]) + .header-account{border-color:#c4d5de}
 @media(max-width:600px){header #floating-memo-open{gap:4px;padding:5px 8px;font-size:10px}header #floating-memo-open::before{width:13px;height:13px}body > .wrap > header #floating-memo-open:not([hidden]) + .account,.week-header #floating-memo-open:not([hidden]) + .header-account{padding-left:8px}}
}
/* Keep the page from bouncing past its top or bottom when scrolling. */
@media screen{html,body{overscroll-behavior-y:none}}

@media screen{html[data-past-notebook="true"] :is(#today,#week-today,#month-today,#year-today).current-period{display:none}}
@media screen{
 #daily-view,#history-view,#habit-year-panel,.week-shell #journal,.memo-shell #journal{position:relative}
 .notebook-year-label{position:absolute;top:10px;left:30px;z-index:2;color:#a9c0d0;font:700 14px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
 html[data-theme=light] .notebook-year-label{color:#42677b}
 #history-view{padding-top:52px}
 #habit-year-panel .year-navigation{min-height:32px}
 body[data-embedded-memo=true] .notebook-year-label{left:12px;top:4px}
 @media(max-width:699px){.notebook-year-label{left:12px}#history-view{padding-top:48px}}
}