/* utono. v2.0 / Phase 1: official visual system and responsive app shell.
   Structural visual layer only. Source of truth: approved v1.1 design guide + color HTML.
   Keep old v1.5.3 sync, note format, AI, media and collaboration behavior unchanged. */
:root {
  --utono-ivory:#FAF9F6; --utono-stone:#E7E2DA; --utono-sand:#DCC9A8;
  --utono-sage:#A7B89F; --utono-sky:#D6E9F6; --utono-ink:#1F1F1E;
  --utono-charcoal:#0F1110; --utono-elevated:#1A1D1C; --utono-dark-stone:#272B29;
  --utono-dark-sage:#7A8F7E; --utono-dark-sky:#8CB3D9; --utono-off-white:#EDEDE8;
  --utono-space-1:4px; --utono-space-2:8px; --utono-space-3:12px; --utono-space-4:16px;
  --utono-space-5:20px; --utono-space-6:24px; --utono-space-8:32px; --utono-space-10:40px;
  --utono-radius-xs:6px; --utono-radius-sm:8px; --utono-radius-md:12px; --utono-radius-lg:16px;
  --utono-radius-xl:24px; --utono-pill:999px; --utono-duration-fast:140ms; --utono-duration-panel:200ms;
  --utono-font:"Inter Tight", Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --utono-content-max:760px;
  font-family:var(--utono-font);
}
.theme-light {
  color-scheme:light;
  --utono-bg:#FAF9F6;--utono-pane:#F3F1EC;--utono-canvas:#FFFFFF;--utono-card:#FFFFFF;
  --utono-border:#D9D8D1;--utono-text:#1F1F1E;--utono-muted:#5F625E;--utono-subtle:#767A73;
  --utono-action:#536D56;--utono-action-hover:#4B654F;--utono-action-ink:#FAF9F6;
  --utono-selected:#E5EBE3;--utono-link:#285C74;--utono-focus:#2D604C;--utono-danger:#B6423D;
  --utono-shadow:rgba(31,31,30,.065);
  /* Legacy aliases until v1.5.3 visual selectors have been retired. */
  --bg:var(--utono-bg);--sidebar:var(--utono-pane);--surface:var(--utono-card);
  --surface-raised:var(--utono-canvas);--surface-hover:#E7EDE6;--line:#E7E2DA;
  --line-strong:var(--utono-border);--text:var(--utono-text);--muted:var(--utono-muted);
  --subtle:var(--utono-subtle);--input:#FFFFFF;--shadow:var(--utono-shadow);
  --accent:var(--utono-action);--accent-strong:#4B654F;--accent-soft:var(--utono-selected);
  --danger:var(--utono-danger);--success:#2D604C;--lilac:#A7B89F;--lime:#A7B89F;--mint:#D6E9F6;--rose:#FBE4DB;
}
.theme-dark {
  color-scheme:dark;
  --utono-bg:#0F1110;--utono-pane:#171A18;--utono-canvas:#0F1110;--utono-card:#1A1D1C;
  --utono-border:#272B29;--utono-text:#EDEDE8;--utono-muted:#B8BCB6;--utono-subtle:#9CA49A;
  --utono-action:#7A8F7E;--utono-action-hover:#94A895;--utono-action-ink:#0F1110;
  --utono-selected:#27332B;--utono-link:#8CB3D9;--utono-focus:#8CB3D9;--utono-danger:#EC9C94;
  --utono-shadow:rgba(0,0,0,.16);
  --bg:var(--utono-bg);--sidebar:var(--utono-pane);--surface:var(--utono-card);
  --surface-raised:#222623;--surface-hover:#27332B;--line:var(--utono-border);
  --line-strong:#39433C;--text:var(--utono-text);--muted:var(--utono-muted);
  --subtle:var(--utono-subtle);--input:#1A1D1C;--shadow:var(--utono-shadow);
  --accent:var(--utono-action);--accent-strong:var(--utono-action-hover);--accent-soft:var(--utono-selected);
  --danger:var(--utono-danger);--success:#B4D4B8;--lilac:#7A8F7E;--lime:#7A8F7E;--mint:#8CB3D9;--rose:#D6C9A8;
}
html,body,#app {width:100%;max-width:100%;overflow-x:clip;}
html {font-family:var(--utono-font);}
body {font-family:var(--utono-font);font-size:14px;line-height:1.55;}
button,input,textarea,select {font-family:inherit;}
:where(button,a,input,textarea,select,[role="button"]):focus-visible {outline:2px solid var(--utono-focus)!important;outline-offset:3px;}
::selection {background:color-mix(in srgb,var(--utono-action) 25%,transparent)}
/* Official asset polarity: -dark artwork has INK text for light surfaces; -light artwork has WHITE text for dark surfaces. */
.utono-logo-on-dark {display:none;}
.theme-dark .utono-logo-on-dark {display:block;}
.theme-dark .utono-logo-on-light {display:none;}
.theme-light .utono-logo-on-light {display:block;}
.theme-light .utono-logo-on-dark {display:none;}
.sidebar {flex-basis:238px;width:238px;background:var(--utono-pane);border-color:var(--utono-border);transition:transform var(--utono-duration-panel),width var(--utono-duration-panel);}
.sidebar-head {display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:109px;padding:25px 21px 18px;}
.utono-logo-set{width:min(100%,175px);display:flex;align-items:center;min-height:47px;}
.utono-logo-set img{display:block;width:100%;height:auto;max-height:46px;object-fit:contain;object-position:left center;}
.utono-logo-set .utono-logo-on-dark{display:none;}
.theme-dark .utono-logo-set .utono-logo-on-dark{display:block;}
.theme-dark .utono-logo-set .utono-logo-on-light{display:none;}
.utono-sidebar-tagline{font-size:11px;letter-spacing:.02em;color:var(--utono-muted);margin-left:2px;white-space:nowrap;}
.sidebar-content {padding:0 13px 25px;scrollbar-color:var(--utono-border) transparent;}
.primary-new {background:var(--utono-action);color:var(--utono-action-ink);border-radius:12px;min-height:44px;margin:0 4px 25px;width:calc(100% - 8px);box-shadow:0 2px 8px var(--utono-shadow);font-size:13px;font-weight:650;transition:background var(--utono-duration-fast),transform var(--utono-duration-fast);}
.primary-new:hover{background:var(--utono-action-hover);transform:none;}
.section-title {font-size:10px;letter-spacing:.095em;color:var(--utono-subtle);padding:0 12px;margin-bottom:10px;font-weight:700;}
.sidebar-section {margin-bottom:21px;}
.nav-item {min-height:42px;font-size:13px;font-weight:530;border-radius:10px;margin-bottom:3px;gap:11px;color:var(--utono-muted);}
.nav-item.active {background:var(--utono-selected);color:var(--utono-text);font-weight:660;}
.nav-item.active>.ico{color:var(--utono-action);}
.nav-count {font-weight:560;color:var(--utono-subtle);}
.folder-row .nav-item {padding-right:40px;}
.folder-more{display:flex;opacity:0;}
.folder-row:hover .folder-more,.folder-row:focus-within .folder-more {opacity:1;}
.sidebar-footer {padding:12px 14px 19px;background:var(--utono-pane);border-top-color:var(--utono-border);}
.footer-button {min-height:37px;color:var(--utono-muted);border-radius:9px;}
.footer-note {font-size:10px;line-height:1.5;}
.workspace {min-width:0;flex:1;background:var(--utono-bg);}
.topbar {background:var(--utono-bg);min-height:64px;height:64px;border-bottom-color:var(--utono-border);grid-template-columns:minmax(90px,1fr) minmax(160px,390px) max-content;gap:12px;padding:0 clamp(13px,2.3vw,31px);}
.topbar-left .breadcrumb {font-size:12px;color:var(--utono-muted);}
.topbar .breadcrumb>span {font-size:11px;letter-spacing:.015em;}
.topbar-right .icon-btn,.topbar .avatar {min-width:39px;width:39px;height:39px;border-radius:11px;}
.topbar .avatar {border:1px solid var(--utono-border);background:var(--utono-card);color:var(--utono-text);}
.topbar .avatar:hover {background:var(--utono-selected);border-color:var(--utono-action);}
.topbar .icon-btn.strong {background:var(--utono-action);color:var(--utono-action-ink);border-color:transparent;}
.topbar .icon-btn.strong:hover{background:var(--utono-action-hover);}
.search-input {height:42px;border-radius:12px;background:var(--utono-card);border-color:var(--utono-border);font-size:12px;}
.search-input:focus{border-color:var(--utono-action);box-shadow:0 0 0 2px color-mix(in srgb,var(--utono-action) 20%,transparent);}
.search-kbd {color:var(--utono-subtle);}
.utono-mobile-brand {display:none;}
.utono-content-frame {flex:1;min-height:0;min-width:0;display:flex;width:100%;overflow:hidden;}
.utono-content-frame .main-content {flex:1;min-width:0;width:0;max-width:none;background:var(--utono-bg);scrollbar-color:var(--utono-border) transparent;}
.utono-note-rail {display:none;}
.utono-content-frame.utono-has-note .utono-note-rail {display:flex;flex-direction:column;flex:0 0 317px;width:317px;min-width:0;min-height:0;background:var(--utono-pane);border-right:1px solid var(--utono-border);}
.utono-rail-header{padding:24px 21px 10px;}
.utono-rail-overline{font-size:9px;font-weight:750;letter-spacing:.17em;color:var(--utono-subtle);}
.utono-rail-titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;}
.utono-rail-titlebar h2{font-size:23px;font-weight:730;letter-spacing:-.04em;line-height:1.2;margin:0;}
.utono-rail-new{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:12px;background:var(--utono-action);color:var(--utono-action-ink);}
.utono-rail-new:hover{background:var(--utono-action-hover);}
.utono-rail-subtitle{font-size:11px;color:var(--utono-muted);}
.utono-rail-filter{display:flex;gap:7px;padding:13px 18px 14px;border-bottom:1px solid var(--utono-border);}
.utono-rail-filter button{border:1px solid transparent;background:transparent;border-radius:999px;color:var(--utono-muted);min-height:30px;padding:4px 12px;font-size:11px;}
.utono-rail-filter button.selected{background:var(--utono-selected);color:var(--utono-text);font-weight:680;}
.utono-rail-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 11px 25px;scrollbar-width:thin;scrollbar-color:var(--utono-border) transparent;}
.utono-rail-note{width:100%;display:flex;gap:11px;text-align:left;align-items:flex-start;background:transparent;border:1px solid transparent;border-radius:12px;min-height:89px;padding:12px 9px;color:var(--utono-text);cursor:pointer;}
.utono-rail-note:hover{background:var(--utono-selected);}
.utono-rail-note.selected{background:var(--utono-card);border-color:var(--utono-border);box-shadow:0 2px 9px var(--utono-shadow);}
.utono-rail-note-icon{flex:0 0 48px;height:53px;display:grid;place-items:center;background:var(--utono-selected);border-radius:9px;color:var(--utono-action);}
.utono-rail-note-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;}
.utono-rail-note-text strong{font-size:12.5px;letter-spacing:-.01em;line-height:1.4;font-weight:720;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.utono-rail-note-text>span{font-size:11px;line-height:1.45;color:var(--utono-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;}
.utono-rail-note-text small{font-size:10px;color:var(--utono-subtle);}
.utono-rail-star{flex:0 0 auto;color:var(--utono-action);}
.utono-rail-empty {padding:15px;color:var(--utono-muted);font-size:12px;}
/* Library/list styling */
.page {padding:clamp(21px,3vw,39px);max-width:1660px;}
.page-header{margin-bottom:23px;}
.page-header h1{font-size:32px;line-height:1.2;letter-spacing:-.045em;font-weight:740;}
.page-subtitle{font-size:13px;color:var(--utono-muted);}
.eyebrow{font-size:10px;color:var(--utono-action);letter-spacing:.14em;}
.notes-grid{gap:15px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));}
.note-card{height:258px;border-radius:16px;border-color:var(--utono-border);background:var(--utono-card);padding:21px 19px 16px;box-shadow:0 2px 12px var(--utono-shadow);}
.note-card:hover,.note-row:hover {border-color:var(--utono-action);box-shadow:0 8px 24px var(--utono-shadow);transform:translateY(-1px);}
.card-title{font-size:15px;font-weight:720;}
.card-preview{font-size:12px;line-height:1.7;}
.card-meta,.card-bottom{color:var(--utono-muted);}
.note-row{border-color:var(--utono-border);background:var(--utono-card);border-radius:12px;}
.select-control,.toolbar-group,.text-field{border-color:var(--utono-border);background:var(--utono-card);}
.action-btn,.assistant-primary{background:var(--utono-action)!important;color:var(--utono-action-ink)!important;border-radius:12px;font-weight:680;min-height:42px;}
.action-btn:hover,.assistant-primary:hover{background:var(--utono-action-hover)!important;}
.action-btn.ghost{background:var(--utono-card)!important;color:var(--utono-text)!important;border:1px solid var(--utono-border)!important;}
.action-btn.ghost:hover{background:var(--utono-selected)!important;}
.action-btn.danger{background:var(--utono-danger)!important;color:#fff!important;}
.note-card .card-menu,.note-card .card-star:not(.is-starred){opacity:.85;}
/* Editor typography, calmer toolbars, legible legacy docs */
.utono-editor-layout{max-width:1470px;padding:20px clamp(20px,3vw,38px) 50px;}
.utono-editor-compose{max-width:940px;}
.utono-content-frame.utono-has-note .utono-editor-layout{display:block;padding:18px clamp(15px,2.1vw,37px) 50px;max-width:none;}
.utono-content-frame.utono-has-note .utono-editor-compose{max-width:860px;}
.utono-content-frame.utono-has-note .utono-editor-inspector{display:none;position:fixed;top:75px;right:15px;bottom:18px;width:283px;max-height:none;z-index:80;box-shadow:0 18px 55px var(--utono-shadow);}
.utono-content-frame.utono-has-note .utono-editor-inspector.inspector-open{display:block;}
.utono-content-frame.utono-has-note .utono-inspector-toggle{display:grid;}
.editor-actions{background:var(--utono-bg);border-bottom:1px solid var(--utono-border);padding:7px 0 13px;flex-wrap:nowrap;gap:4px;}
.editor-actions-right{flex-wrap:nowrap;gap:5px;}
.editor-title{font-size:36px;line-height:1.18;font-weight:730;letter-spacing:-.025em;margin:37px 0 20px;}
.editor-meta{font-size:12px;border-bottom-color:var(--utono-border);}
.editor-meta select{font-size:12px;}
.format-toolbar{border-radius:12px;background:var(--utono-card);border:1px solid var(--utono-border);gap:6px;}
.format-action{border-radius:8px;}
.format-action:hover{background:var(--utono-selected);}
.utono-rich-segment{font-size:17px;line-height:1.65;}
.utono-rich-content{line-height:1.65;}
.utono-rich-line.kind-heading[data-level="1"] .utono-rich-content{font-size:30px;}
.utono-rich-line.kind-heading[data-level="2"] .utono-rich-content{font-size:23px;}
.utono-rich-line.kind-heading[data-level="3"] .utono-rich-content{font-size:19px;}
.doc-embed,.media-card,.doc-link {border-radius:13px;}
.utono-editor-inspector{background:var(--utono-card);border-color:var(--utono-border);}
.utono-inspector-tabs{background:var(--utono-pane);}
.utono-inspector-tabs button.active{background:var(--utono-selected);}
.utono-inspector-content>button{border-color:var(--utono-border);}
.utono-sticky-share{background:var(--utono-action)!important;color:var(--utono-action-ink)!important;}
.utono-sticky-assistant{color:var(--utono-text)!important;}
.editor-bottom{color:var(--utono-muted);background:var(--utono-bg);border-top-color:var(--utono-border);}
.cloud-pill.cloud-quiet{background:var(--utono-card);color:var(--utono-muted);border-color:var(--utono-border);}
/* Older pages, assistant, and capture UI use the same semantic surface layer. */
.home-heading span,.assistant-eyebrow,.assistant-sparkle,.assistant-link,.welcome-label,.remember-kicker{color:var(--utono-action);}
.home-tile.lavender{background:linear-gradient(135deg,#D6E9F6,#A7B89F);}
.home-tile.lime{background:linear-gradient(145deg,#E7E2DA,#DCC9A8);}
.home-tile strong,.home-tile small{color:var(--utono-ink);}
.assistant-tile:hover{border-color:var(--utono-action);}
.assistant-tile-icon{background:var(--utono-selected);color:var(--utono-action);}
.assistant-dot{background:var(--utono-action);}
.assistant-check input{accent-color:var(--utono-action);}
.assistant-floating-notice{border-color:var(--utono-action);}
.assistant-floating-notice button{background:var(--utono-action);color:var(--utono-action-ink);}
.modal,.capture-sheet,.popover{border-color:var(--utono-border);}
.modal-backdrop{background:rgba(8,13,10,.60);}
/* Tablet: collapse sidebar using existing drawer logic. Keep usable independent panes. */
@media (min-width:1440px){.sidebar{flex-basis:248px;width:248px}.utono-content-frame.utono-has-note .utono-note-rail{flex-basis:352px;width:352px}}
@media (max-width:1199px){.topbar{grid-template-columns:minmax(60px,1fr) minmax(140px,360px) max-content}.utono-content-frame.utono-has-note .utono-note-rail{flex-basis:285px;width:285px}}
@media (max-width:1100px){.sidebar{width:min(280px,88vw);flex-basis:0;}.sidebar.open{box-shadow:12px 0 45px var(--utono-shadow);}}
@media (max-width:899px){.utono-content-frame.utono-has-note .utono-note-rail{display:none}.utono-content-frame .main-content{width:100%}.utono-editor-layout{display:block;}.utono-editor-compose{max-width:760px}.utono-editor-inspector{display:none;position:fixed;right:15px;top:73px;bottom:20px;width:min(320px,calc(100vw - 30px));max-height:none;z-index:140;}.utono-editor-inspector.inspector-open{display:block}.utono-inspector-toggle{display:grid}}
/* Phone behavior: one screen at a time; no sideways viewport, bottom safe-area controls. */
@media (max-width:720px){
  html,body,#app{overflow-x:clip;width:100%;max-width:100%;}
  .topbar {grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:50px 41px;min-height:101px;height:101px;padding:7px 14px 5px;gap:2px 8px;}
  .topbar-left{grid-column:1;grid-row:1;gap:7px;}
  .topbar-center{grid-column:1/-1;grid-row:2;display:block;}
  .topbar-right{grid-column:2;grid-row:1;gap:5px;}
  .utono-mobile-brand{display:flex;align-items:center;width:84px;height:34px;flex:0 0 84px;}
  .utono-mobile-brand img{width:100%;height:auto;max-height:33px;object-fit:contain;}
  .utono-mobile-brand .utono-logo-on-dark{display:none;}
  .theme-dark .utono-mobile-brand .utono-logo-on-dark{display:block;}
  .theme-dark .utono-mobile-brand .utono-logo-on-light{display:none;}
  .topbar-left .breadcrumb{display:none;}
  .utono-note-open .topbar{grid-template-rows:51px;min-height:59px;height:59px;}
  .utono-note-open .topbar-center,.utono-note-open .utono-mobile-brand{display:none;}
  .utono-note-open .topbar-left .breadcrumb{display:flex;}
  .utono-note-open .topbar .breadcrumb strong{max-width:30vw;}
  .topbar .avatar{display:none!important;}
  .topbar .icon-btn.strong{display:none;}
  .topbar .topbar-right .icon-btn{min-width:34px;width:34px;height:35px;}
  .search-input{height:37px;border-radius:11px;}
  .topbar .cloud-pill.cloud-quiet{width:35px;min-width:35px;max-width:35px;height:35px;}
  .page{padding:23px 17px 88px;}
  .page-header h1{font-size:26px;}
  .notes-grid{grid-template-columns:1fr;gap:12px;}
  .note-card{height:185px;box-shadow:none;}
  .utono-editor-layout,.utono-content-frame.utono-has-note .utono-editor-layout{padding:15px 16px 95px;}
  .editor-actions{gap:5px;}
  .editor-back{font-size:12px;}
  .editor-title{font-size:28px;line-height:1.2;margin:27px 0 17px;}
  .utono-rich-segment{font-size:16px;}
  .utono-rich-line.kind-heading[data-level="1"] .utono-rich-content{font-size:26px;}
  .utono-sticky-share{min-width:35px;}
  .utono-sticky-assistant{min-width:35px;}
  .format-toolbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  .format-toolbar [data-action="toggle-preview"] span{display:none;}
  .mobile-bottom-nav{min-height:calc(64px + env(safe-area-inset-bottom));padding:7px 9px calc(7px + env(safe-area-inset-bottom));background:var(--utono-pane);border-top-color:var(--utono-border);}
  .mobile-bottom-nav>button{min-height:45px;gap:4px;color:var(--utono-muted);font-size:10px;}
  .mobile-bottom-nav>button.current{color:var(--utono-action);}
  .mobile-bottom-nav>button.capture-fab{background:var(--utono-action);color:var(--utono-action-ink);width:50px;height:50px;flex:0 0 50px;border-radius:50%;margin-top:-18px;box-shadow:0 5px 20px var(--utono-shadow);}
  .account-popover{max-width:calc(100vw - 20px);}
}
@media(max-width:380px){.utono-mobile-brand{width:69px;flex-basis:69px}.utono-note-open .topbar .breadcrumb strong{display:none}.topbar .topbar-right .icon-btn{width:32px;min-width:32px}.page{padding-inline:12px}.utono-content-frame.utono-has-note .utono-editor-layout{padding-inline:12px}.editor-actions-left{max-width:34%}.editor-actions-right{gap:2px}}
@media(prefers-reduced-motion:reduce){.sidebar,.note-card,.note-row,.utono-rail-note{transition:none!important;animation:none!important}}