/* Notes app layout. Tokens in theme.css. */
body{display:flex;height:100vh;height:100dvh;overflow:hidden}
#side{width:288px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--side);min-height:0}
#acct{padding:var(--s3) var(--s3) var(--s2)}
#state{display:flex;align-items:center;gap:var(--s2);font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--s2);line-height:1.3}
#dot{width:10px;height:10px;border-radius:50%;background:var(--warn-dot);flex:none}
#state.server #dot{background:var(--ok)}
#acctbtns{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
#importbar{margin:var(--s2) var(--s3);padding:var(--s3);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-md);font-size:var(--fs-sm);display:flex;flex-direction:column;gap:var(--s2)}
#importbar label{margin:0;display:flex;gap:var(--s2);align-items:flex-start;font-weight:400}
#importbar label input{margin-top:2px}
#importbar>div:last-child{display:flex;gap:var(--s2);flex-wrap:wrap}
#bar{padding:var(--s2) var(--s3);display:flex;gap:var(--s2)}#bar button{flex:1;padding:0 var(--s2)}
#search{margin:0 var(--s3) var(--s2);width:calc(100% - 24px)}
#list:empty{display:none}
#list{flex:1;overflow:auto;margin:0;padding:0 var(--s2) var(--s2);list-style:none;min-height:0}
#list li{margin:0 0 2px;border-radius:var(--r-sm);cursor:pointer;overflow:hidden}
#list li:hover{background:color-mix(in srgb,var(--sel) 60%,transparent)}
#list li.on{background:var(--sel)}
#list li button.item{all:unset;box-sizing:border-box;display:block;width:100%;padding:var(--s2) var(--s3);min-height:var(--tap);cursor:pointer;border-radius:var(--r-sm)}
#list li button.item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#list li .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-md);line-height:1.35}
#list li.on .t{font-weight:600}
#list li .d{display:block;font-size:var(--fs-xs);color:var(--muted)}
#listempty{margin:0;padding:var(--s4);color:var(--muted);font-size:var(--fs-sm)}
#main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
#topbar{display:flex;align-items:center;gap:var(--s2);border-bottom:1px solid var(--line);padding:0 var(--s4);min-height:32px}
#menu{display:none}
#status{padding:var(--s1) 0;color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
#loading{margin:0;padding:var(--s5);color:var(--muted)}
#scrim{display:none}
#ed{flex:1;overflow:hidden;min-height:0;display:flex;flex-direction:column}
#ed>.ck-editor{flex:1;min-height:0;display:flex;flex-direction:column}
/* never overflow:auto here: dropdown panels live inside the toolbar, and a scrolling container scrolls the toolbar out of view when one opens */
.ck-editor__top{flex:none;position:relative;z-index:3;overflow:visible}
.ck-editor__main{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.ck-editor__main>.ck-editor__editable,.ck-editor__main>.ck-source-editing-area{flex:1 0 auto}
.ck-source-editing-area textarea{min-height:100%}
/* the editor is the hero: borderless paper, readable measure, comfortable type */
.ck.ck-editor__editable_inline{padding:var(--s5) max(var(--s5),calc((100% - 780px)/2));font:var(--fs-md)/1.7 var(--font);font-size:16px;border:0!important;box-shadow:none!important}
.ck.ck-editor__editable_inline.ck-focused{outline:0}
.ck.ck-editor__editable_inline h1{font-size:2em;line-height:1.25}.ck.ck-editor__editable_inline h2{font-size:1.55em;line-height:1.3}.ck.ck-editor__editable_inline h3{font-size:1.25em;line-height:1.35}
.ck.ck-dropdown__panel{max-height:calc(100dvh - 120px);overflow-y:auto}
.ck.ck-editor__editable_inline,.ck.ck-editor__editable_inline>*{color:var(--text)}
.ck.ck-editor__editable_inline{background:var(--surface)!important}
.ck.ck-editor__editable_inline a{color:var(--accent)}
.ck.ck-editor__editable_inline blockquote{border-left:4px solid var(--line-strong);color:var(--muted)}
.ck.ck-editor{border:0!important}
.ck.ck-toolbar{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
.ck-source-editing-area textarea{padding:var(--s5) max(var(--s5),calc((100% - 780px)/2))!important;font:14px/1.6 var(--font-mono)!important;border:0!important}
/* CKEditor colours follow the page theme */
:root{
  --ck-color-base-foreground:var(--side);--ck-color-base-background:var(--surface);--ck-color-base-border:var(--line);--ck-color-base-text:var(--text);--ck-color-text:var(--text);
  --ck-color-base-active:var(--accent);--ck-color-base-active-focus:var(--accent-hover);--ck-color-base-focus:var(--accent);--ck-color-focus-border:var(--accent);--ck-color-base-error:var(--danger);
  --ck-color-toolbar-background:var(--surface);--ck-color-toolbar-border:var(--line);
  --ck-color-button-default-hover-background:var(--sel);--ck-color-button-default-active-background:var(--accent-soft);
  --ck-color-button-on-background:var(--accent-soft);--ck-color-button-on-hover-background:var(--sel);--ck-color-button-on-active-background:var(--accent-soft);--ck-color-button-on-color:var(--accent);
  --ck-color-panel-background:var(--surface);--ck-color-panel-border:var(--line);--ck-color-dropdown-panel-background:var(--surface);--ck-color-dropdown-panel-border:var(--line);
  --ck-color-list-background:var(--surface);--ck-color-list-button-hover-background:var(--sel);--ck-color-list-button-on-background:var(--accent);--ck-color-list-button-on-text:var(--accent-ink);
  --ck-color-input-background:var(--surface);--ck-color-input-border:var(--line-strong);--ck-color-input-text:var(--text);
  --ck-color-engine-placeholder-text:var(--muted);--ck-color-labeled-field-label-background:var(--surface);
  --ck-color-shadow-drop:rgba(0,0,0,.2);--ck-color-shadow-inner:rgba(0,0,0,.1);--ck-color-link-default:var(--accent);
  --ck-color-widget-editable-focus-background:var(--surface);
}
@media (max-width:700px){
  body{flex-direction:column}
  #topbar{padding:0 var(--s2);gap:var(--s2);min-height:var(--tap)}
  #menu{display:inline-flex;min-height:var(--tap);padding:0 var(--s3);border-color:transparent;background:transparent;font-weight:600}
  #menu:hover{background:var(--sel)}
  #status{font-size:var(--fs-sm)}
  #side{position:fixed;z-index:20;top:0;bottom:0;left:0;width:min(320px,88vw);height:auto;border-right:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  body.drawer-open #side{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
  body.drawer-open #scrim{display:block;position:fixed;inset:0;z-index:10;background:var(--scrim)}
  .ck.ck-editor__editable_inline{padding:var(--s4)}
  .ck-source-editing-area textarea{padding:var(--s4)!important}
  /* toolbar: CKEditor groups overflowing items into a 'more' dropdown on narrow screens (app.js) */
  dialog{padding:var(--s4)}
}