/* One centered paper frame contains the list, sidebar, add field and footer. */
.room{max-width:760px}
.list-card{--rail-width:56px;--tab-length:76px;--tab-overhang:8px;display:grid;grid-template-columns:minmax(0,1fr) var(--rail-width);grid-template-rows:minmax(0,1fr) auto auto;min-height:0;border:1px solid #e1e4d9;border-radius:0 0 18px 18px;background:var(--paper);box-shadow:0 12px 35px -15px #4545380f;overflow:visible}
.list-panel{grid-column:1;grid-row:1;min-width:0;border:0;background:var(--paper);padding:24px 24px 18px;position:relative;z-index:1;transition:none}
.list-heading{margin-bottom:18px}
.card-header{grid-column:2;grid-row:1;min-height:0;width:calc(100% + var(--tab-overhang) + 6px);border:0;border-left:1px solid #e1e4d9;padding:0;display:flex;align-items:stretch;background:transparent;overflow:hidden;contain:paint;isolation:isolate;z-index:0}
.list-card>.add-form{grid-column:1 / -1;grid-row:2;margin:0 24px 22px;min-width:0;min-height:53px}
.card-footer{grid-column:1 / -1;grid-row:3;min-width:0;border:0;border-top:1px solid var(--line);border-radius:0 0 18px 18px;background:#fdfdf8;box-shadow:none;padding:15px 24px;gap:12px;position:relative;z-index:1;transition:none}

/* The sidebar remains vertically scrollable, with fixed navigation gutters. */
.list-selector{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;gap:0}
.list-selector .tabs-viewport{flex:1;min-height:0;min-width:0;width:100%;order:0;overflow:hidden;isolation:isolate;clip-path:inset(0)}
.tabs-viewport .tabs-scroll{height:100%;width:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;overscroll-behavior-x:auto;scroll-snap-type:none}
.tabs-rail{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;height:max-content;min-height:100%;padding:0}
.tabs-rail .tabs{display:flex;flex-direction:column;align-items:stretch;flex:0 0 auto;width:100%;min-width:0;max-width:none;min-height:0;height:max-content;gap:6px;padding:9px 0}

/* Each tab animates in place; there is no travelling selection highlight. */
.tabs .tab{flex:0 0 var(--tab-height,76px);height:var(--tab-height,76px);min-height:0;width:calc(100% - 6px);min-width:0;max-width:none;flex-direction:column;justify-content:center;gap:5px;padding:10px 5px;border:1px solid color-mix(in srgb,var(--list-color,#e7eedb) 18%,#d5dbcd);border-left:0;border-radius:0 14px 14px 0;background:color-mix(in srgb,var(--list-color,#e7eedb) 18%,var(--paper));color:var(--list-muted-ink,#35492e);font-weight:400;transform:scale(.97);transform-origin:left center;box-shadow:1px 2px 3px #3c463312;transition:transform 190ms ease,background-color 190ms ease,border-color 190ms ease,box-shadow 190ms ease,color 190ms ease,font-weight 190ms ease}
.tabs .tab:not(.active){border:1px solid color-mix(in srgb,var(--list-color,#e7eedb) 18%,#d5dbcd);border-left:0;background:color-mix(in srgb,var(--list-color,#e7eedb) 18%,var(--paper));color:var(--list-muted-ink,#35492e)}
.tabs .tab:not(.active):hover{background:color-mix(in srgb,var(--list-color,#e7eedb) 28%,var(--paper));box-shadow:1px 2px 4px #3c46331a}
.tabs .tab.active{background:color-mix(in srgb,var(--list-color,#e7eedb) 55%,var(--paper));color:var(--list-ink,#35492e);border-color:color-mix(in srgb,var(--list-color,#e7eedb) 45%,#aab69c);font-weight:650;transform:scale(1.025);box-shadow:1px 3px 6px #3c463324;z-index:2}
.tabs .tab-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:24px;line-height:1.15;writing-mode:horizontal-tb;transform:none;flex-shrink:0;display:block}
.tabs .tab-count{position:absolute;top:-5px;right:-4px;min-width:18px;width:auto;height:18px;padding:0 4px;box-sizing:border-box;box-shadow:0 2px 5px #3c46331a;pointer-events:none}
.tabs .tab-count,.tabs .tab.active .tab-count{background:#fffefa;color:#35492e}
.tabs-rail #add-list{flex:0 0 44px;width:var(--rail-width);min-width:0;height:44px;min-height:44px;margin:4px 0 0;padding:10px;justify-content:center;border-radius:9px}
.list-selector .tab-scroll-arrow{flex:0 0 56px;width:var(--rail-width);min-width:0;height:56px;min-height:56px;flex-direction:column;padding:5px;gap:3px;box-shadow:none}
.list-selector .tab-scroll-arrow svg{transform:rotate(90deg);width:16px;height:16px;flex-shrink:0}
.list-selector .tab-scroll-arrow .hidden-item-count{flex:0 0 18px;height:18px;width:24px}

/* Soft edge effects are painted only within the sidebar, never over the list. */
.tabs-viewport::before,.tabs-viewport::after{width:100%;height:28px;left:0;right:0;bottom:auto;top:0}
.tabs-viewport::before{background:linear-gradient(to bottom,var(--paper),#fffefa80);mask-image:linear-gradient(to bottom,#000,transparent);-webkit-mask-image:linear-gradient(to bottom,#000,transparent)}
.tabs-viewport::after{top:auto;bottom:0;background:linear-gradient(to top,var(--paper),#fffefa80);mask-image:linear-gradient(to top,#000,transparent);-webkit-mask-image:linear-gradient(to top,#000,transparent)}
@media(max-width:600px){.list-card{--rail-width:48px;--tab-length:72px}.list-panel{padding:20px 15px 16px}.list-card>.add-form{margin:0 15px 16px;padding-left:12px;padding-right:12px;gap:9px}.card-footer{padding:12px 15px;flex-wrap:wrap;gap:7px;min-height:0;line-height:1.5}.retention{min-width:0;font-size:9px}.retention svg{flex-shrink:0}.save-status{font-size:8px}.list-selector .tab-scroll-arrow{flex-basis:52px;height:52px;min-height:52px}.tabs .tab{padding:10px 5px}.list-title-group h1{font-size:15px}}
@media(max-height:550px){.list-selector .tab-scroll-arrow{flex-basis:46px;height:46px;min-height:46px}.tabs .tab{padding-top:8px;padding-bottom:8px}.list-panel{padding-top:14px;padding-bottom:12px}.list-heading{margin-bottom:8px}.list-card>.add-form{margin-bottom:12px}}
/* Fade the tab content itself, including its overhang, without painting a white
   overlay outside the frame. Blur remains confined to the sidebar. */
.tabs-viewport{--fade-start:0px;--fade-end:0px}
.tabs-viewport.has-overflow-left{--fade-start:24px}
.tabs-viewport.has-overflow-right{--fade-end:24px}
.tabs-viewport .tabs-scroll{mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%)}
.tabs-viewport::before,.tabs-viewport::after{background:transparent}