/* Compact workspace: the list stays close to the top; editing and management
   controls appear only in their respective modes. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.app{display:block;background:#fafbf8}
.app main{max-width:760px;padding:0 24px 40px;margin:0 auto}
.workspace-header{display:flex;align-items:center;gap:18px;height:68px;border-bottom:1px solid var(--line)}
.workspace-header .brand{font-size:21px;letter-spacing:-.7px;flex-shrink:0}
.workspace-header .brand-icon{width:28px;height:28px;font-size:20px;border-radius:8px;margin-right:8px}
.list-switcher{display:block;flex:1;min-width:0}
.list-switcher select{width:100%;max-width:350px;border:0;background:transparent;color:#283e34;font-size:18px;font-weight:600;padding:10px 24px 10px 0;text-overflow:ellipsis}
#connection{font-size:10px;color:#71836b;white-space:nowrap}
.mode-nav{display:flex;gap:24px;height:48px;border-bottom:1px solid var(--line);margin-bottom:0}
.mode-nav button{background:none;color:#7e8978;font-size:13px;padding:0 2px;border-bottom:2px solid transparent}
.mode-nav button[aria-pressed=true]{color:#27634b;border-color:#27634b;font-weight:700}
.app .shopping-toolbar{margin-top:16px;justify-content:start}
.app .filter-tabs{gap:20px}
.app .filter-tabs button{font-size:12px;padding-bottom:10px}
.app .progress{margin-bottom:6px;height:1px}
.app .category-heading{margin:14px 0 0;font-size:11px;letter-spacing:0;font-weight:600}
.app .category-symbol{width:21px;height:21px;background:transparent;font-size:15px}
.app .item-row{padding:0;min-height:53px;gap:14px}
.app .item-label{min-height:53px;gap:13px;font-size:16px;line-height:1.4;padding:10px 0}
.app .item-label input{width:24px;height:24px;border-radius:7px}
.app .quantity{font-size:13px;color:#7f8d75}
.app .checked .item-text{color:#8a9581}
.app[data-mode=shop] .delete-item{display:none}
.app .delete-item{width:40px;height:44px}
.app .add-item{margin-top:16px;padding:12px 14px;box-shadow:none;border-radius:9px}
.app .item-input-wrap input{font-size:16px;padding:10px 12px}
.app .item-options{padding-left:0;gap:8px;flex-wrap:nowrap;margin-top:10px}
.app .item-options input,.app .item-options select{padding:10px;font-size:12px}
.app .item-options input{width:88px}
.app .item-options select{max-width:none;flex:1}
.app .item-options .primary{font-size:12px;padding:11px 16px;gap:12px}
.app .items-empty{padding:45px 10px}
.app .items-empty h3{font:400 20px Arial,sans-serif;color:#71816a;margin:0 0 20px}
.app .empty-state{padding:60px 10px}
.app .empty-state h1{font:500 25px Arial,sans-serif;letter-spacing:-.5px}
.app .empty-state p{font-size:14px}
#manage-view>h1{font:600 21px Arial,sans-serif;letter-spacing:-.5px;margin:26px 0}
.management-section{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.management-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.management-heading h2{font:600 14px Arial,sans-serif;letter-spacing:0;margin:0}
.management-heading .secondary,.management-section>.secondary{font-size:12px;padding:10px 12px}
.app #new-list{display:inline-flex;position:static}
.management-caption{font-size:13px;color:#76856e;margin:15px 0 0}
.app #list-nav{display:block;overflow:visible;padding:0}
.app .nav-list{width:100%;max-width:none;margin:4px 0;padding:12px;flex-shrink:1;font-size:14px}
.app .list-meta{margin:12px 0 20px;font-size:13px;line-height:1.6;align-items:center}
.account-section{display:flex;align-items:center;gap:12px;font-size:13px}
.account-section .text-button{margin-left:auto;font-size:13px;padding:10px}
.add-item{position:relative}
#suggestions{position:absolute;left:0;right:0;top:62px;z-index:3;max-height:300px;overflow:auto;border:1px solid #dce3d6;border-radius:9px;background:white;box-shadow:0 8px 24px #193c331a}
.suggestion{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 16px;background:white;color:#283e34;min-height:44px}
.suggestion small,.dictionary-entry small{color:#7f8b80;font-size:11px}
.suggestion:hover,.suggestion[aria-selected=true]{background:#edf2e5}
.edit-item{background:transparent;color:#56754c;font-size:11px;padding:10px 2px;min-height:44px}
.app[data-mode=shop] .edit-item{display:none}
#dictionary-status{font-size:12px;color:#76856e;line-height:1.5}
#dictionary-results{max-height:310px;overflow:auto;margin:12px 0 24px;border-bottom:1px solid var(--line)}
.dictionary-row{display:flex;align-items:center;border-top:1px solid var(--line)}
.dictionary-entry{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;align-items:start;padding:12px 4px;background:transparent;text-align:left;color:#283e34;font-size:14px;overflow-wrap:anywhere}
#dictionary-form label{margin:14px 0}
#dictionary-form select,#edit-category{padding:12px;border:1px solid #dfe5da;border-radius:9px;background:white;color:#283e34;width:100%}
#dictionary-form .primary{font-size:13px}
@media(max-width:600px){
 .app main{padding:0 16px 24px}
 .workspace-header{height:56px;gap:12px}
 .workspace-header .wordmark{display:none}
 .workspace-header .brand-icon{margin:0;width:27px;height:27px}
 .list-switcher select{font-size:17px}
 #connection{font-size:0;width:9px;overflow:hidden}
 #connection::first-letter{font-size:10px}
 .mode-nav{height:44px;gap:26px}
 .mode-nav button{font-size:13px}
 .app .shopping-toolbar{margin-top:12px}
 .app .category-heading{margin-top:12px}
 .app .item-row,.app .item-label{min-height:56px}
 .app[data-mode=add] .item-row{gap:7px;flex-wrap:wrap}
 .app[data-mode=add] .item-label{flex-basis:55%}
 .app[data-mode=add] .quantity{max-width:55px}
 .app .item-options input{width:64px}
 .app .item-options select{width:100px;font-size:11px}
 .app .item-options .primary{padding:11px 12px}
 .app .item-options .primary span{display:none}
}
/* Header actions and list drawer. */
.workspace-header #connection{margin-left:auto}
.header-button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:10px;background:transparent;color:var(--green);font-size:24px}
.header-button:hover{background:#edf2e5}
.add-toggle{background:var(--green);color:white;font-size:30px}
.add-toggle:hover{background:#1a4d38}
.workspace-header #mode-shop{font-size:12px;padding:10px}
#navigation-dialog{position:fixed;inset:0 auto 0 0;margin:0;width:min(340px,90vw);max-width:none;max-height:100dvh;height:100dvh;border:0;border-right:1px solid var(--line);border-radius:0;padding:24px 20px;overflow:auto}
.drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.drawer-heading h2{font:600 20px Arial,sans-serif;margin:0}
#navigation-dialog .dialog-close{position:static;width:44px;height:44px}
#navigation-dialog #list-nav{display:block;max-height:calc(100dvh - 265px);overflow:auto;padding:0;margin-bottom:16px}
#navigation-dialog .nav-list{width:100%;max-width:none;margin:4px 0;min-height:48px;font-size:14px}
#navigation-dialog .nav-list.selected .nav-label::after{content:' · активный';font-size:11px;font-weight:400}
#navigation-dialog #new-list{display:block;position:static;width:100%;text-align:left;font-size:13px}
.drawer-manage{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:24px;padding:18px 8px;border-top:1px solid var(--line);background:transparent;color:var(--green);font-size:14px;text-align:left}
/* Known products need only name, quantity and submit in one row. */
.app .add-item.dictionary-selected{display:grid;grid-template-columns:minmax(0,1fr) 80px auto;align-items:center;gap:8px;padding:8px 10px}
.dictionary-selected .item-input-wrap{min-width:0;gap:4px}
.dictionary-selected .item-input-wrap>span{display:none}
.app .dictionary-selected .item-input-wrap input{padding:10px 4px}
.app .dictionary-selected .item-options{display:contents}
.app .dictionary-selected .item-options input{width:100%}
.app .dictionary-selected .item-options .primary{margin:0}
.dictionary-selected #suggestions{top:100%}
@media(max-width:600px){
 .workspace-header{gap:8px}
 .app .add-item.dictionary-selected{grid-template-columns:minmax(0,1fr) 60px auto;gap:6px}
 .app .dictionary-selected .item-options .primary{font-size:11px;padding:11px 9px}
}
@media(max-width:600px){
 .app[data-mode=add] .item-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto 32px;gap:7px}
 .app[data-mode=add] .item-label{min-width:0}
 .app[data-mode=add] .delete-item{width:32px}
}