#frame{position:relative;max-width:720px;margin:0 auto;background:var(--surface-2);border:.5px solid var(--border-strong);border-radius:16px;overflow:hidden;container-type:inline-size;container-name:frame}#app{--inset: max(16px, env(safe-area-inset-left, 0px));--row-padding: 11px;--font-size: 17px;--grip-size: 44px;--bullet-size: 44px;display:flex;flex-direction:column;max-height:calc(100dvh - 48px)}#app.fine{--row-padding: 7px;--font-size: 15px;--grip-size: 36px;--bullet-size: 36px}@container frame (min-width: 560px){#app{--inset: 24px}}#scroller{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;position:relative;-webkit-overflow-scrolling:touch;scrollbar-width:none}#scroller::-webkit-scrollbar{display:none;width:0;height:0}@media(max-width:520px){body{padding:0}#frame{border:none;border-radius:0;max-width:none}#app{height:100dvh;max-height:none}#scroller{flex:1 1 auto}}#scroller.move-mode #viewport{position:sticky;top:0;overflow:hidden}#add-area{padding-bottom:env(safe-area-inset-bottom,0px)}#add-area.with-toast{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}#scroll-thumb{position:absolute;right:3px;top:0;width:3px;height:40px;border-radius:2px;background:var(--border-stronger);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:5}#scroll-thumb.visible{opacity:1;transition:opacity 80ms ease}#header{position:relative;height:calc(44px + env(safe-area-inset-top,0px));flex-shrink:0;border-bottom:.5px solid var(--border)}.header-row{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:opacity .15s ease}#list-header{padding:0 var(--inset)}#move-header{padding:0 6px;opacity:0;pointer-events:none}#header.moving #list-header{opacity:0;pointer-events:none}#header.moving #move-header{opacity:1;pointer-events:auto}.title{margin:0;font-size:17px;font-weight:500;white-space:nowrap}#count{margin-left:4px;font-size:13px;font-weight:400;color:var(--text-secondary)}#hint{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--text-secondary)}.header-button{border:none;background:transparent;height:44px;min-width:44px;padding:0 10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius)}#move-delete{color:var(--text-danger);font-size:20px}#move-position{font-size:15px;font-weight:500}#move-done{color:var(--text-accent);font-size:17px;font-weight:500}#install-hint:not([hidden]){display:flex}#install-hint{align-items:center;gap:8px;padding:6px 6px 6px var(--inset);border-bottom:.5px solid var(--border);background:var(--bg-accent);color:var(--text-accent);font-size:14px}#install-text{flex:1;min-width:0}#install-accept{border:none;background:transparent;height:44px;padding:0 10px;font-size:15px;font-weight:500;cursor:pointer}#install-dismiss{border:none;background:transparent;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}#list{list-style:none;margin:0;padding:0}#list li,#add-row,#pull-box{position:relative;display:flex;align-items:center;gap:6px;padding:0 6px 0 calc(var(--inset) - 12px);font-family:var(--font-sans);font-size:var(--font-size);font-weight:400;letter-spacing:normal;line-height:22px;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}#list li{background:var(--surface-2);cursor:text;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:transform .16s ease,background .12s,color .12s}#list li:after{content:"";position:absolute;left:calc(var(--inset) - 12px + var(--bullet-size) + 6px);right:0;bottom:0;height:.5px;background:var(--border);pointer-events:none}#list li:focus-visible{outline:2px solid var(--fill-accent);outline-offset:-2px}#add-row{cursor:text}#pull{height:0;overflow:hidden;display:flex;align-items:flex-end}#pull-box{flex:1;height:calc(var(--row-padding) * 2 + 22px);flex-shrink:0;background:var(--surface-1);color:var(--text-secondary);transition:color .12s,background .12s}#pull.ready #pull-box{background:var(--bg-accent);color:var(--text-accent)}.lead{width:var(--bullet-size);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-accent);font-size:18px}#list .bullet{position:relative;align-self:flex-start;margin:calc(var(--row-padding) + 11px - var(--bullet-size) / 2) 0 0;flex-shrink:0;width:var(--bullet-size);height:var(--bullet-size);min-width:0;min-height:0;padding:0;border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--text-primary);cursor:pointer;line-height:0}#list .bullet:before{content:"";position:absolute;inset:calc(var(--bullet-size) / 2 - 16px);border-radius:8px;transition:background .1s}#list .bullet:active:before{background:var(--fill-ghost-selected)}#list .bullet:focus-visible{outline:2px solid var(--fill-accent);outline-offset:-4px}#list .bullet .dot{position:relative;width:8px;height:8px}#list .bullet .cross{position:relative;display:none;font-size:18px}#list li.done .bullet{color:var(--text-secondary)}#list li.done .bullet .dot{display:none}#list li.done .bullet .cross{display:block}#list .text{flex:1;min-width:0;padding:var(--row-padding) 0;white-space:normal;overflow-wrap:anywhere;font:inherit;line-height:22px;transition:color .15s}#list.compact .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#list li.done .text{color:var(--text-secondary)}textarea.field{display:block;flex:1;min-width:0;height:calc(var(--row-padding) * 2 + 22px);min-height:0;max-height:none;border:none;padding:var(--row-padding) 0;margin:0;background:transparent;box-shadow:none;outline:none;border-radius:0;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-appearance:none;appearance:none;font-family:var(--font-sans);font-size:var(--font-size);font-weight:400;letter-spacing:normal;line-height:22px;color:inherit;user-select:text;-webkit-user-select:text}textarea.field::placeholder{color:var(--text-muted)}#list li.done textarea.field{color:var(--text-secondary)}#list li.editing{outline:2px solid var(--fill-accent);outline-offset:-2px;z-index:1}#list li.selected{background:var(--bg-accent);color:var(--text-accent);outline:2px solid var(--fill-accent);outline-offset:-2px;z-index:2;transition:background .12s}#list li.selected:after,#list li.editing:after{display:none}#list .grip{position:relative;align-self:center;flex-shrink:0;width:var(--grip-size);height:var(--grip-size);min-height:0;margin:0;padding:0;border:none;background:transparent;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-secondary);cursor:pointer;transition:opacity .12s}#list .grip:before{content:"";position:absolute;inset:calc(var(--grip-size) / 2 - 16px);border-radius:8px;transition:background .1s}#list .grip:active:before{background:var(--fill-ghost-selected)}#list .grip .icon{position:relative}#list .grip:focus-visible{outline:2px solid var(--fill-accent);outline-offset:-4px}#list li.selected .bullet,#list li.selected .grip,#list li.selected .text{color:var(--text-accent)}#list.moving li:not(.selected),#list.moving li:not(.selected) .bullet{color:var(--text-secondary)}#list li.new{background:var(--bg-accent)}@media(hover:hover){#list .grip:hover:before,#list .bullet:hover:before{background:var(--fill-ghost-hover)}}#app.fine #list li .grip{opacity:0}#app.fine #list.moving .grip{opacity:1}#app.fine #list li:hover .grip,#app.fine #list li:focus-within .grip,#app.fine #list li:focus .grip{opacity:1}#empty-state{padding:40px 24px 20px;text-align:center}.empty-title{margin:0 0 4px;font-size:17px;font-weight:500}.empty-body{margin:0;font-size:15px;line-height:1.5;color:var(--text-secondary)}#add-error{font-size:13px;color:var(--text-danger);margin:0 0 10px calc(var(--inset) - 12px + var(--bullet-size) + 6px)}#toast{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:480px;margin:0 auto;height:48px;display:flex;align-items:center;gap:8px;padding:0 4px 0 16px;border-radius:12px;background:var(--fill-primary);color:var(--on-primary);font-size:15px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;z-index:6}#toast.visible{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .18s ease,transform .18s ease}#toast-message{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#toast-undo{border:none;background:transparent;color:var(--on-primary);font-size:15px;font-weight:500;height:44px;padding:0 12px;cursor:pointer}.caret-mirror{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;white-space:pre-wrap;overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){#list li,#list,#add-area,#viewport,#pull,#toast,.header-row,#list li.selected,#toast.visible,#list .grip,#list .text{transition:none}}
