/* P14 follows the approved warm, practical Shelf interface, in both themes. */
.ss-offer,.ss-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,18px);overflow:hidden}
.ss-offer{padding:var(--space-16);margin-bottom:var(--space-16)}
.ss-bubble{display:flex;align-items:flex-start;gap:var(--space-12);margin:var(--space-16) 0;color:var(--ink-2);line-height:1.4}
.ss-avatar{width:40px;height:40px;flex:none;object-fit:contain}
.ss-bubble strong{display:block;color:var(--ink);font-family:var(--font-display)}
.ss-offer .ss-bubble{margin-top:0}.ss-counts{display:flex;gap:8px;margin:12px 0;font:var(--fs-xs)/1.5 var(--font-mono)}.ss-counts span,.ss-chip{background:var(--surface-2);border-radius:var(--r-sm,6px);padding:4px 8px}.ss-counts span:last-child{color:var(--accent-ink)}
.ss-actions{display:flex;gap:var(--space-12)}.ss-actions>.ss-primary{flex:1}
.ss-panel,.ss-panel *,.ss-offer *,.ss-settings *{box-sizing:border-box;min-width:0}
.ss-panel{position:fixed;z-index:var(--z-modal,1000);inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:var(--fs-base)/1.4 var(--font-ui);min-width:0;overflow:hidden}
.ss-panel button,.ss-offer button,.ss-settings button{cursor:pointer;font:inherit;color:inherit;min-height:var(--target-min);border:1px solid var(--line);border-radius:var(--r-md,10px);background:var(--surface);padding:8px 12px}
.ss-panel button:disabled,.ss-settings button:disabled{opacity:.55;cursor:default}
.ss-panel button,.ss-panel input,.ss-panel textarea,.ss-panel select{max-width:100%}
.ss-panel button{white-space:normal;overflow-wrap:anywhere}
.ss-panel p,.ss-panel strong,.ss-panel small,.ss-panel h2,.ss-panel span{overflow-wrap:anywhere}
.ss-panel .ss-initial,.ss-panel .ss-compact-item img{flex-shrink:0}
.ss-panel .ss-title textarea{flex:1;width:0;resize:vertical;overflow-wrap:anywhere}
.ss-panel .ss-qty{gap:10px;flex-wrap:wrap}
.ss-panel .ss-qty button{flex:0 0 44px}
.ss-panel .ss-accessory{flex-wrap:wrap}
.ss-panel .ss-accessory>span{flex:1 1 100px}
.ss-panel .ss-accessory select{width:auto;flex:0 1 auto}
.ss-panel .ss-action-option>span{flex:1}
.ss-panel button:focus-visible,.ss-panel input:focus-visible,.ss-panel textarea:focus-visible,.ss-settings input:focus-visible,.ss-settings button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-panel .ss-primary,.ss-offer .ss-primary{background:var(--accent-strong,var(--accent));border-color:var(--accent-strong,var(--accent));color:var(--on-accent);font-weight:var(--fw-bold);min-height:56px}
.ss-panel .ss-link{border:0;background:transparent;color:var(--accent-ink);padding:4px;font-size:var(--fs-sm);text-align:left}
.ss-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;gap:8px;flex:none}
.ss-header button{background:transparent;border:0}.ss-counter,.ss-eyebrow{font:var(--fs-xs)/1.5 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ss-progress{height:4px;margin:0 16px;flex:none;background:var(--line);border-radius:4px;overflow:hidden}.ss-progress>span{height:100%;display:block;background:var(--accent);transform-origin:left}
.ss-scroll{overflow:auto;overscroll-behaviour:contain;min-height:0;flex:1;padding:14px 16px 20px}
.ss-photo{position:relative;border-radius:var(--r-lg,18px);overflow:hidden;height:clamp(130px,24dvh,240px);background:var(--surface-2)}
.ss-photo>img{height:100%;width:100%;object-fit:cover}.ss-photo-placeholder{display:grid;height:100%;place-items:center;color:var(--muted)}
.ss-thumbs{position:absolute;bottom:10px;left:10px;right:10px;display:flex;gap:6px;overflow:auto}.ss-thumbs button{height:44px;width:44px;flex:none;padding:0;overflow:hidden;border:2px solid var(--surface)}.ss-thumbs img{width:100%;height:100%;object-fit:cover}
.ss-title{display:flex;align-items:center;gap:8px;margin:12px 0 0}.ss-title h2{margin:0;flex:1;font:var(--fw-bold) var(--fs-xl)/1.15 var(--font-display);overflow-wrap:anywhere}.ss-title button{border:0;background:transparent}.ss-title textarea{font:var(--fw-bold) var(--fs-lg)/1.3 var(--font-display)}
.ss-panel input:not([type=checkbox]),.ss-panel textarea,.ss-panel select,.ss-settings input:not([type=checkbox]),.ss-settings select{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md,10px);background:var(--surface);color:var(--ink);font:inherit}
.ss-panel input[type=checkbox],.ss-settings input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent-strong,var(--accent));flex:none}
.ss-row{display:flex;gap:12px;align-items:center;padding:10px 14px;min-height:56px;border-bottom:1px solid var(--line)}
.ss-row:last-child{border:0}.ss-row>span:first-child{flex:0 0 29%;color:var(--ink-2);font-size:var(--fs-sm)}.ss-row>.ss-value{flex:1;min-width:0}.ss-value>button{width:100%;border:0;text-align:left;background:transparent;padding:0}.ss-value strong{display:block}.ss-value small{display:block;color:var(--muted);line-height:1.3}.ss-chips{display:flex;flex-wrap:wrap;gap:5px}.ss-chip{font-size:var(--fs-sm)}
.ss-qty{display:flex;align-items:center;gap:14px}.ss-qty button{width:44px;padding:0}.ss-qty output{font-weight:var(--fw-bold)}
.ss-footer{flex:none;padding:10px 16px max(16px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.ss-footer>.ss-primary{width:100%}.ss-footer p{margin:0;color:var(--danger-ink);font-size:var(--fs-sm)}
.ss-compact-item{display:flex;gap:12px;align-items:center}.ss-compact-item img{height:72px;width:72px;object-fit:cover;border-radius:var(--r-md,10px)}.ss-compact-item h2{font:var(--fw-bold) var(--fs-lg)/1.2 var(--font-display);margin:0}.ss-compact-item p{margin:4px 0;color:var(--muted)}
.ss-question{background:var(--surface);padding:12px 14px;border-radius:var(--r-lg,18px);flex:1}.ss-question p{margin:0}
.ss-search{margin-bottom:12px}.ss-recents{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}.ss-panel [aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.ss-destination{display:flex!important;align-items:center;gap:12px;width:100%;text-align:left;border:0!important;border-radius:0!important;border-bottom:1px solid var(--line)!important;min-height:64px!important}.ss-destination>span:nth-child(2){flex:1}.ss-destination small{display:block;color:var(--muted);font-size:var(--fs-xs)}.ss-initial{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm,6px);background:var(--surface-2);font:var(--fs-sm) var(--font-mono)}
.ss-similar{display:flex;align-items:center;gap:10px;min-height:44px;font-size:var(--fs-sm);margin:12px 0}
.ss-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ss-photo-grid img,.ss-photo-grid button{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md,10px)}.ss-photo-grid button{border-style:dashed;padding:4px;font-size:var(--fs-sm)}
.ss-accessory{display:flex;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--line);min-height:56px}.ss-accessory span{flex:1}.ss-accessory small{color:var(--muted);font-size:var(--fs-xs)}.ss-accessory select{width:auto}.ss-note{color:var(--muted);font-size:var(--fs-sm);margin:12px 0}.ss-serial-frame{min-height:200px;display:grid;place-items:center;padding:32px;border-radius:var(--r-lg,18px);background:var(--surface-2);margin:14px 0}.ss-serial-frame button{width:100%;min-height:100px;border:2px solid var(--line-2);font-family:var(--font-mono);background:transparent}
.ss-result{display:flex;gap:10px;align-items:center;padding:12px;margin-bottom:14px;border-radius:var(--r-lg,18px);background:var(--surface)}.ss-result span{flex:1}.ss-result strong{display:block;font-family:var(--font-mono)}
.ss-done{text-align:center;padding-top:24px}.ss-done>.ss-avatar{width:96px;height:96px}.ss-done h2{font:var(--fw-bold) var(--fs-2xl)/1.2 var(--font-display)}.ss-summary{text-align:left;margin:18px 0}.ss-summary>.ss-eyebrow{padding:12px 14px 4px}.ss-summary .ss-row{justify-content:space-between}.ss-summary .ss-row>span:first-child{flex:auto;color:var(--ink);font-size:var(--fs-base)}
.ss-skeleton{min-height:100px;background:var(--surface-2);border-radius:var(--r-lg,18px);margin:16px 0;animation:ss-loading 1.5s ease infinite}.ss-settings{max-width:600px;color:var(--ink);padding-bottom:24px}.ss-settings h2{font:var(--fw-bold) var(--fs-2xl)/1.2 var(--font-display)}.ss-settings .ss-group{margin:10px 0 22px}.ss-settings .ss-row{justify-content:space-between}.ss-settings .ss-row>span:first-child{flex:1;color:var(--ink);font-size:var(--fs-base)}.ss-settings .ss-row input:not([type=checkbox]),.ss-settings .ss-row select{max-width:50%}.ss-settings .ss-chips{padding:12px}.ss-settings .ss-chip{display:flex;align-items:center}.ss-settings .ss-chip button{border:0;background:transparent;padding:0 6px}
.ss-kbd,.ss-desktop-head,.ss-dropstrip{display:none}
@keyframes ss-loading{50%{opacity:.5}}
@media(min-width:701px){
  .ss-panel{inset:0 0 0 auto;width:410px;border-left:1px solid var(--line);background:var(--surface);z-index:var(--z-panel,90)}
  .ss-footer{background:var(--surface)}
  .ss-panel .ss-photo{height:210px}
  .ss-panel .ss-row{padding:8px 10px;min-height:52px}
  .ss-panel .ss-title h2{font-size:var(--fs-lg)}
  .ss-panel .ss-bubble{font-size:var(--fs-sm)}
  .ss-panel .ss-group{border-radius:var(--r-md,10px)}
  .ss-desktop-head{display:flex;gap:8px;align-items:center;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
  .ss-desktop-head .ss-avatar{height:28px;width:28px}
  .ss-header>.ss-skip{display:none}
  .ss-header{padding-inline:12px}
  .ss-kbd{font-size:var(--fs-xs);color:var(--muted)}
  .ss-kbd kbd{font-family:var(--font-mono);background:var(--surface);border:1px solid var(--line);padding:2px 4px;border-radius:3px}
  .ss-dropstrip{display:none;flex-wrap:wrap;gap:8px;padding:12px;margin:12px 0;background:var(--surface);border-radius:var(--r-lg,18px)}
  body.ss-dragging .ss-dropstrip{display:flex}
  .ss-dropstrip>small{flex:1 0 100%;font:var(--fs-xs) var(--font-mono);color:var(--muted)}
  .ss-dropstrip button{min-height:64px;flex:1;min-width:100px;border:1px dashed var(--line);border-radius:var(--r-md,10px);background:var(--surface);color:var(--ink);text-align:left;padding:8px;cursor:pointer}
  .ss-dropstrip button.ss-dragover{border:2px solid var(--accent);background:var(--surface-2)}
  body.ss-open .list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  body.ss-open .tosort-card{display:flex;flex-direction:column;padding:0;overflow:hidden;align-items:stretch;position:relative;border-radius:var(--r-md,10px);gap:0}
  body.ss-open .tosort-card .lph{width:100%;height:130px;aspect-ratio:auto;border-radius:0}
  body.ss-open .tosort-card .lph img{width:100%;height:100%;object-fit:cover}
  body.ss-open .tosort-card .li{padding:8px;min-width:0}
  body.ss-open .tosort-card .ln{font-size:var(--fs-sm)}
  body.ss-open .tosort-card .la{display:none}
  body.ss-open .tosort-card .tosort-check{position:absolute;top:4px;left:4px;z-index:2}
  .ss-current,.ss-selected{outline:2px solid var(--accent);outline-offset:2px}
  .ss-filed{opacity:.45}
  .ss-filed .lm{color:var(--success-ink,var(--ink-2))}
}
@media(max-width:700px){.ss-panel{z-index:2147483000}.ss-header{padding-top:max(12px,env(safe-area-inset-top))}.ss-panel .ss-desktop-only{display:none!important}.ss-panel .ss-mobile-only{display:block}.ss-panel .ss-row{min-height:54px;padding-block:8px}.ss-panel .ss-bubble{margin-block:12px;font-size:var(--fs-sm)}.ss-panel .ss-photo{height:clamp(120px,23dvh,220px)}.ss-panel .ss-title h2{font-size:var(--fs-lg)}}
@media(prefers-reduced-motion:reduce){.ss-skeleton{animation:none}}
.ss-mobile-only{display:block}
.ss-panel button.ss-compact-item{width:100%;padding:0;border:0;background:transparent;text-align:left}
.ss-compact-item>div{flex:1;min-width:0}
body.ss-open>.sel-bar{display:none!important}
body.ss-open #mscrim.show{z-index:2147483001!important}
body.ss-open #modal.show{z-index:2147483002!important}
.ss-undo{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:24px;z-index:2147483004;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 48px);padding:12px 16px;background:var(--ink);color:var(--surface);border-radius:var(--r-md,12px);box-shadow:0 5px 20px #19130f26;font:var(--fs-sm)/1.4 var(--font-ui)}
.ss-undo button{flex-shrink:0;border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-height:44px;background:var(--surface);color:var(--ink);font:600 var(--fs-sm) var(--font-ui);cursor:pointer}
.ss-panel .p18-kinds{margin:12px 0}
.ss-quick-actions{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;color:var(--muted)}
.ss-panel .ss-quick-actions button{border:0;background:transparent;padding:2px 4px;font-size:var(--fs-xs);min-height:36px;color:var(--ink-2)}
.ss-panel .p18-kinds button[aria-pressed=true]{background:var(--surface-2);border:2px solid var(--accent);color:var(--ink)}
.ss-action-heading{font:var(--fw-bold) var(--fs-xl)/1.2 var(--font-display);margin:18px 0 8px}
.ss-action-options{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.ss-action-option{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md,10px);background:var(--surface)}
.ss-action-option:has(input:checked){border-color:var(--accent);background:var(--surface-2)}
.ss-action-option input{flex:none;width:20px!important;height:20px;min-height:20px!important;padding:0!important;margin:0;accent-color:var(--accent)}
.ss-action-option strong,.ss-action-option small{display:block}.ss-action-option small{color:var(--muted);margin-top:4px}
.ss-action-target img{width:42px;height:42px;object-fit:cover;border-radius:8px;flex:none}
.ss-action-target>span{flex:1;min-width:0;overflow-wrap:anywhere}
.ss-home-pick strong,.ss-home-pick small{white-space:normal;overflow-wrap:anywhere;max-width:100%;display:block}
.ss-home-pick{min-width:0;max-width:100%}
.ss-value>.ss-link{display:block;width:100%;white-space:normal;margin-top:4px;overflow-wrap:anywhere}
.ss-summary .ss-row>span:first-child{flex:1}
.ss-summary .ss-row>span:last-child{flex:none}
@media(max-width:999px){.ss-undo{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:none;font-size:12px}}
@media(min-width:1000px){.ss-panel .ss-mobile-only{display:none}}

/* P23: paper-and-ink split workspace. Only the middle review area scrolls. */
.ss-item-header{flex:none;padding:12px 16px;border-bottom:1px solid var(--line)}
.ss-item-header .ss-compact-item img,.ss-item-header .ss-initial{width:64px;height:64px;flex:0 0 64px;border-radius:var(--r-md,10px)}
.ss-item-header .ss-compact-item h2{font-size:var(--fs-base);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-item-header .ss-compact-item p{font-size:var(--fs-xs);margin:4px 0 0}
.ss-item-header .ss-link{display:none}
.ss-footer{position:relative;gap:8px}
.ss-support{position:relative;flex:none;padding:8px 16px;background:var(--bg);border-top:1px solid var(--line)}
.ss-support:empty{display:none}
.ss-support.ss-hints-only{display:none}
.ss-panel.ss-keyboard .ss-hints-only{display:block}
.ss-support p{margin:0 0 8px;color:var(--danger-ink);font-size:var(--fs-sm)}
.ss-support p.ss-note{color:var(--muted)}
.ss-support .ss-kbd{margin-bottom:6px}
.ss-footer .ss-actions{width:100%}
.ss-footer .ss-actions:only-child{margin:0}
.ss-footer .ss-actions{flex-direction:row;flex-wrap:nowrap;align-items:center}
.ss-footer .ss-actions>button{min-height:48px;white-space:nowrap}
.ss-footer .ss-actions>.ss-primary{margin-left:auto;flex:0 1 66%}
.ss-more{position:relative;flex:none}
.ss-more>summary{display:flex;align-items:center;min-height:48px;padding:0 8px;cursor:pointer;list-style:none;font-size:var(--fs-sm);white-space:nowrap}
.ss-more>summary::-webkit-details-marker{display:none}
.ss-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-quick-actions{display:flex;flex-direction:column;gap:4px;position:absolute;bottom:calc(100% + 8px);left:0;min-width:170px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,10px);box-shadow:var(--shadow);z-index:3}
.ss-panel .ss-quick-actions button{border:1px solid var(--line);border-radius:var(--r-md,10px);min-height:44px;font-size:var(--fs-xs);padding:6px}
.ss-kbd{display:none;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.ss-kbd-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important;flex:1}
.ss-panel .ss-shortcuts{flex:none;min-height:28px;padding:2px 4px;border:0;background:transparent;font-size:var(--fs-xs);color:var(--muted)}
.ss-shortcut-tooltip{display:none;position:absolute;bottom:100%;right:12px;left:12px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,10px);box-shadow:var(--shadow);white-space:normal;z-index:2}
.ss-shortcuts:hover+.ss-shortcut-tooltip,.ss-shortcuts:focus+.ss-shortcut-tooltip,.ss-shortcuts[aria-expanded=true]+.ss-shortcut-tooltip{display:block}
.ss-panel.ss-keyboard .ss-kbd{display:flex}
@media(hover:hover) and (pointer:fine){.ss-panel .ss-kbd{display:flex}.ss-support.ss-hints-only{display:block}}
@media(pointer:coarse){
  .ss-panel .ss-mobile-only{display:block}
  .ss-panel .ss-desktop-only{display:none!important}
}
@media(min-width:701px){
  body.ss-open{--ss-panel-w:clamp(320px,44vw,410px);padding-right:var(--ss-panel-w)}
  body.ss-open .ss-panel{width:var(--ss-panel-w);z-index:var(--z-panel,90)}
  body.ss-open .ss-support{background:var(--surface)}
  body.ss-open #dock{right:var(--ss-panel-w)}
  body.ss-open #mobFab{right:calc(var(--ss-panel-w) + 16px)}
  body.ss-open #stageInner{padding-right:0!important}
  body.ss-open .ss-header{padding-top:max(12px,env(safe-area-inset-top))}
}