/* Shared visual palette: LecRAWApp/Theme.swift. Touch targets remain >=44px. */
:root{font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e8e8e8;background:#181818;--panel:#232323;--line:#353535;--muted:#999;--selection:#adadad;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden}*[hidden]{display:none!important}
button,select{font:inherit;color:inherit;background:var(--line);border:1px solid transparent;border-radius:3px;min-height:40px;padding:8px 12px;cursor:pointer;touch-action:manipulation}
button:hover{background:#404040}button.active{background:#353535;border-color:#777}button:focus-visible,select:focus-visible{outline:2px solid #bbb;outline-offset:2px}button:disabled{opacity:.4;cursor:default}
.icon,.folderIcon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
header{height:60px;display:flex;align-items:center;gap:18px;padding:8px 16px;background:var(--panel);border-bottom:1px solid #111}
.brand{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px;font-weight:600}.brand small{font-size:12px;font-weight:400;color:var(--muted);margin-left:5px}.monogram{display:block;flex-shrink:0}
#project{flex:1;border-left:1px solid var(--line);padding-left:18px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#connection{color:var(--muted);font-size:11px;white-space:nowrap}#connection:before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;background:#777;border-radius:50%}#connection[data-state=connected]:before{background:#5eb06e}
header button{background:transparent;color:#bcbcbc;min-height:40px}
main{height:calc(100dvh - 60px)}
#welcome{height:100%;max-width:460px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;margin:auto}.welcomeIcon{width:104px;height:104px;background:#232323;display:grid;place-items:center;border:1px solid #303030;border-radius:14px;margin-bottom:22px}.welcomeIcon .monogram{width:88px;height:88px}
h1{font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.4px;margin:0 0 10px}p{color:var(--muted);line-height:1.6}.muted{font-size:11px;color:var(--muted)}#connect{min-width:180px;margin-top:12px}#welcome .muted{margin-top:24px}
#projectsView{height:100%;overflow:auto;padding:40px max(24px,calc((100% - 1050px)/2));overscroll-behavior:contain}#projectsStatus{font-size:12px;margin:26px 0 12px}
#projectsList{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}#projectsList:empty{display:none}
.projectCard{border-radius:0;display:flex;align-items:center;text-align:left;gap:18px;min-height:90px;padding:20px;background:var(--panel);min-width:0}.projectCard:hover{background:#2d2d2d}.projectCard:disabled{opacity:1;color:#777;background:#202020}.folderIcon{width:32px;height:32px;color:#aaa}.projectCard:disabled .folderIcon{color:#666}.projectCopy{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px}.projectCopy strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}.projectCopy>span{font-size:12px;color:var(--muted)}.projectArrow{font-size:22px;color:#888}.projectCard:disabled .projectArrow{visibility:hidden}
#workspace{height:100%;display:flex;flex-direction:column}
nav{display:flex;gap:12px;align-items:center;min-height:56px;flex-shrink:0;padding:6px 14px;background:var(--panel);border-bottom:1px solid #111}
nav button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;white-space:nowrap}.modeControls{display:flex;gap:3px;border-left:1px solid var(--line);padding-left:12px}.modeControls button{border:0}.modeControls button.active{background:var(--line)}#position{flex:1;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}select{padding:5px 8px;min-height:36px}
#grid{flex:1;overflow-y:scroll;overflow-x:hidden;position:relative;min-height:0;overscroll-behavior:contain}#gridSpace{width:1px;pointer-events:none}#tiles{position:absolute;inset:0}.tile{position:absolute;padding:10px;border:1px solid transparent;border-radius:0;background:transparent;overflow:hidden;text-align:left}.tile:hover{background:#252525}.tile.selected{background:#282828;border-color:#888}.tile img{width:100%;height:calc(100% - 26px);object-fit:contain;display:block;background:#181818}.tile .caption{font-size:11px;display:flex;align-items:center;gap:5px;margin-top:7px;color:#aaa;white-space:nowrap}.tile .name{overflow:hidden;text-overflow:ellipsis;flex:1}.dot{width:7px;height:7px;display:inline-block;flex-shrink:0}.stack{font-size:13px;color:#bbb}
#viewer{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#181818;touch-action:none;user-select:none;-webkit-touch-callout:none}canvas{max-width:100%;max-height:100%;object-fit:contain;will-change:transform}
#markHint{position:absolute;bottom:32px;border:1px solid #888;background:#232323ed;padding:12px 20px;border-radius:3px;pointer-events:none}
footer{display:flex;gap:6px;align-items:center;padding:7px 14px calc(7px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid #111;min-height:58px;flex-wrap:wrap}footer>button{background:transparent;font-size:19px;min-width:44px}#filename{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#bbb}#labels,#ratings{display:flex;gap:2px;align-items:center}#labels{margin-left:auto;border-right:1px solid var(--line);padding-right:10px;margin-right:5px}#labels button{position:relative;width:40px;height:40px;padding:0;background:transparent;border-radius:0;border:1px solid transparent}#labels button:before{content:'';position:absolute;width:17px;height:17px;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color)}#labels button[data-label=None]:before{border:1px solid #999;background:linear-gradient(135deg,transparent 46%,#999 47%,#999 53%,transparent 54%)}#labels button.active{border-color:#999}#ratings button{font-size:23px;min-width:36px;min-height:40px;padding:0 3px;background:transparent;color:#888}#ratings button.filled{color:#ddd}#ratings button.active{border-color:transparent}#writeState{font-size:11px;color:var(--muted);min-width:84px;text-align:right}
details{border-top:1px solid var(--line);font-size:11px;color:var(--muted);padding:5px 14px;max-height:30px;overflow:auto;flex-shrink:0;background:#1b1b1b}details[open]{max-height:38dvh}summary{cursor:pointer;min-height:20px}pre{white-space:pre-wrap;margin:7px 0}.diagnosticActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}details .muted{margin:8px 0}#notice{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#303030;border:1px solid #777;border-radius:4px;max-width:90vw;z-index:5;box-shadow:0 6px 24px #0006}
@media(pointer:coarse){button,header button,select{min-height:44px;min-width:44px}#labels button{width:44px;height:44px}#ratings button{min-width:44px;min-height:44px}}
@media(max-width:900px){.brand>span{font-size:13px}.brand small{display:none}header{gap:8px;padding:6px 12px}#project{padding-left:10px}.modeControls{gap:0;padding-left:7px}nav{gap:7px;padding:6px 10px}nav button{padding:8px}#labels{margin-left:0}#filename{margin-right:auto}#writeState{flex:1}footer{gap:3px}#projectsView{padding:28px 20px}}
@media(max-width:600px){header{height:56px}.brand>span{display:none}#connection{max-width:90px;white-space:normal;line-height:1.3;font-size:10px}#project{font-size:12px}header button{padding:4px 7px;font-size:11px}main{height:calc(100dvh - 56px)}nav{flex-wrap:wrap}nav button span{display:none}#position{font-size:11px}footer{padding:5px 8px calc(5px + env(safe-area-inset-bottom))}#filename{max-width:calc(100% - 110px)}#labels{border:0;padding:0;margin:0;flex-basis:100%;flex-wrap:wrap}#ratings{margin-left:auto}#writeState{text-align:left;order:2}#projectsList{grid-template-columns:1fr}#projectsView{padding:24px 16px}.projectCard{min-height:84px;padding:18px}h1{font-size:22px}}

/* Flow filmstrip retains only a small window of thumbnails, including on older iPads. */
#flowStrip{display:flex;align-items:center;gap:6px;flex-shrink:0;height:80px;padding:3px 8px;background:#202020;border-top:1px solid var(--line);min-width:0}
#flowStrip>button{min-width:44px;min-height:44px;background:transparent;font-size:26px}#stackPosition{width:60px;flex-shrink:0;text-align:center;color:var(--muted);font-size:11px;white-space:pre-line}
#stackThumbnails{display:flex;gap:5px;flex:1;min-width:0;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none}#stackThumbnails::-webkit-scrollbar{display:none}
.stripTile{width:82px;height:68px;flex:0 0 82px;padding:3px;background:#181818;border:1px solid transparent;border-radius:0;position:relative}.stripTile img{display:block;width:100%;height:48px;object-fit:contain;pointer-events:none}.stripTile small{display:block;font-size:10px;line-height:12px;color:#aaa}.stripTile.active{border-color:#aaa}.stripTile .dot{position:absolute;top:5px;right:5px;width:9px;height:9px}#flowHelp{font-size:11px;color:var(--muted);max-width:130px;line-height:1.5}
#viewer canvas{pointer-events:none;width:100%;height:100%;object-fit:contain}#viewer{overscroll-behavior:none}#markHint{z-index:2;max-width:90%;text-align:center;border-color:var(--mark-color,#888);box-shadow:0 3px 20px #0008}
body.compact header{height:44px;padding:0 8px;gap:8px}body.compact main{height:calc(100dvh - 44px)}body.compact .brand>span,body.compact nav button span,body.compact #filename,body.compact #flowHelp{display:none}body.compact nav{min-height:48px;padding:2px 6px;gap:4px;flex-wrap:nowrap}body.compact nav button{padding:5px;min-width:44px;min-height:44px}body.compact footer{flex-wrap:nowrap;min-height:48px;padding:2px 5px;overflow-x:auto}body.compact #labels{flex-basis:auto;flex-wrap:nowrap;margin-left:auto;flex-shrink:0}body.compact #ratings{flex-shrink:0}body.compact #writeState{min-width:72px;flex-shrink:0}body.compact #flowStrip{height:66px}body.compact .stripTile{height:58px;width:72px;flex-basis:72px}body.compact .stripTile img{height:38px}
#exitFullscreen{position:fixed;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));z-index:4;min-height:44px;background:#232323dc;border:1px solid #666}#immersiveStatus{position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 11px;border-radius:4px;background:#181818d9;color:#eee;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums;pointer-events:none}#immersiveLabel{display:inline-flex;align-items:center;gap:6px;min-width:0}#immersiveLabelSwatch{width:12px;height:12px;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #ffffff30}#immersiveLabelName{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#immersiveWriteState{color:#bbb}#immersiveWriteState:empty{display:none}body.immersive #markHint{bottom:72px}
body.immersive header,body.immersive nav,body.immersive footer,body.immersive details{display:none}body.immersive main{height:100dvh}body.immersive #workspace{height:100%}body.immersive #flowStrip{padding-bottom:env(safe-area-inset-bottom);height:calc(80px + env(safe-area-inset-bottom))}body.immersive.compact #flowStrip{height:calc(66px + env(safe-area-inset-bottom))}
@media(max-width:900px){#flowHelp{display:none}nav{gap:4px}nav button{padding:6px}.modeControls{padding-left:4px}}
@media(max-width:600px){#flowStrip{gap:2px;padding-left:2px;padding-right:2px}#stackPosition{width:40px;font-size:10px}body.compact #project{display:none}body.compact #position{font-size:10px}body.compact .modeControls{border:0;padding:0}body.compact nav{overflow-x:auto}#exitFullscreen span{display:none}}

@media(min-width:601px) and (max-width:1100px){nav button span{display:none}nav{gap:5px}}

.tile::after,.stripTile::after{content:"";position:absolute;inset:1px;border:3px solid var(--label-color,transparent);border-radius:3px;pointer-events:none;z-index:2}.stripTile.active{outline:1px solid #eee;outline-offset:-1px}#fullscreen,#compactMode,body.compact #fullscreen,body.compact #compactMode{font-size:30px;line-height:1;width:52px;min-width:52px;height:48px;padding:3px}.edgeArrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:76px;z-index:3;font-size:46px;line-height:1;background:#232323df;border:1px solid #888;border-radius:6px;touch-action:manipulation}#edgePrevious{left:max(8px,env(safe-area-inset-left))}#edgeNext{right:max(8px,env(safe-area-inset-right))}

#filesView{height:100%;overflow:auto;padding:18px;overscroll-behavior:contain}.fileActions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}#filesList{border:1px solid var(--line);margin:12px 0}.fileRow{display:block;width:100%;text-align:left;overflow-wrap:anywhere;min-height:44px;background:var(--panel);border-radius:0;border-bottom:1px solid var(--line)}.fileDirectory{display:flex}.fileDirectory .fileRow{flex:1}.fileDirectory>button:last-child{flex-shrink:0}#filesStatus{white-space:pre-wrap}body.compact #browseFiles{font-size:11px}

#fileSave{padding:10px 14px;min-height:44px;background:var(--panel);border:1px solid var(--line);border-radius:5px;color:var(--text);text-decoration:none}

/* The folder picker mirrors the native sidebar; the working grid stays separate. */
.libraryHeading,.folderHeading{display:flex;justify-content:space-between;align-items:center;gap:16px}.libraryHeading h1,.folderHeading h1{margin:8px 0}.libraryHeading p,#folderSummary{color:var(--muted);margin:5px 0}.libraryTools{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.libraryTools input{flex:1;min-width:180px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--text);padding:10px}.libraryTools button[aria-pressed="true"]{background:#444;border-color:#888}.projectItem{border:1px solid var(--line);background:var(--panel);min-width:0}.projectItem .projectCard{width:100%;border:0;min-height:110px}.projectPin{display:block;width:100%;border:0;border-top:1px solid var(--line);border-radius:0;font-size:12px;text-align:left;color:#bbb}.projectCopy span{overflow-wrap:anywhere}
#filesView{display:grid;grid-template-columns:190px minmax(0,1fr);padding:0;overflow:hidden}#filePlaces{padding:18px 10px;overflow:auto;background:var(--panel);border-right:1px solid var(--line)}#filePlaces h2{font-size:11px;font-weight:500;text-transform:uppercase;color:var(--muted);letter-spacing:.08em;margin:20px 6px 8px}.place{width:100%;text-align:left;min-height:44px;border:0;border-radius:4px;background:transparent;overflow-wrap:anywhere}.place:hover{background:#393939}.fileContent{overflow:auto;padding:16px;overscroll-behavior:contain;min-width:0}.fileActions{margin:0 0 12px}.primaryAction{background:#e0e0e0;color:#171717;border-color:#ddd;min-height:48px;font-weight:600;flex-shrink:0}.primaryAction:disabled{background:#444;color:#888;border-color:#555}.folderHeading{position:sticky;top:-16px;padding:10px 0;background:var(--bg);z-index:3}#filesStatus{color:var(--muted);font-size:13px;line-height:1.5}#fileBreadcrumbs{display:flex;gap:4px;flex-wrap:wrap;border:0;padding:0;min-height:0}#fileBreadcrumbs button{font-size:12px;padding:5px 8px;min-height:36px}#filesList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;margin:16px 0}.fileTile{border:1px solid var(--line);background:var(--panel);border-radius:6px;overflow:hidden;min-width:0}.fileTile.active{border-color:#ddd;outline:1px solid #ddd}.fileRow{display:flex;flex-direction:column;align-items:flex-start;gap:7px;border:0;padding:14px;min-height:132px}.fileRow strong{font-size:13px;font-weight:500;line-height:1.4;word-break:break-word}.fileRow small{font-size:11px;color:var(--muted)}.fileIcon{font-size:30px;color:#b8b8b8;line-height:1}.directory .fileIcon{color:#cfb98f}.copyFolder{font-size:11px;width:100%;border:0;border-top:1px solid var(--line);border-radius:0;color:var(--muted);min-height:36px}#fileOperations{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}#fileOperations summary{cursor:pointer;min-height:36px}#fileOperations p{color:var(--muted);font-size:12px}#saveProject{font-size:12px;min-height:44px}#saveProject[aria-pressed="true"]{color:#e3c77f}
@media(max-width:1050px){#filesList{grid-template-columns:repeat(2,minmax(0,1fr))}.folderHeading{align-items:flex-start;flex-direction:column}.folderHeading .primaryAction{width:100%}#filesView{grid-template-columns:170px minmax(0,1fr)}.libraryHeading{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){#filesView{grid-template-columns:125px minmax(0,1fr)}#filePlaces{padding:8px 5px}.place{font-size:11px;padding:6px}.fileContent{padding:10px}.fileRow{padding:9px;min-height:120px}.fileRow strong{font-size:11px}#filesList{gap:6px}.fileActions button{font-size:11px;padding:6px}.folderHeading{top:-10px}.copyFolder{font-size:10px}.libraryTools input{min-width:120px}}

:root{--bg:#181818;--text:#e8e8e8}
#fileOperations,#fileOperations[open]{max-height:none}

.place{display:flex;align-items:center;gap:9px}.place .folderIcon{width:22px;height:22px;flex-shrink:0}.fileIcon .folderIcon{width:38px;height:32px;color:inherit}

#labelFilters{display:flex;align-items:center;gap:6px;padding:3px 12px;background:var(--panel);border-bottom:1px solid var(--line);min-height:44px;flex-shrink:0;overflow-x:auto}#filterColors{display:flex;gap:3px;flex-shrink:0}#labelFilters button{min-width:40px;min-height:40px;padding:3px;background:transparent}#labelFilters button[aria-pressed=true]{border-color:#bbb;background:#333}#filterColors button::before{content:'';display:block;width:15px;height:15px;background:var(--color);margin:auto}#filterColors button[data-filter=None]::before{border:1px solid #999;background:linear-gradient(135deg,transparent 46%,#999 47%,#999 53%,transparent 54%)}.filterTitle,#filterCount{font-size:11px;color:var(--muted);white-space:nowrap}#filterCount{margin-left:auto}#emptyFilter{padding:16px;text-align:center;color:var(--muted)}body.immersive #labelFilters{display:none}body.compact #labelFilters{padding:0 5px}body.compact .filterTitle{display:none}

#gestureControls,#sortControls{display:flex;align-items:center;gap:6px;flex-shrink:0}#gestureControls label,#sortControls label{color:var(--muted);font-size:11px;white-space:nowrap}#gestureControls{margin-left:auto;padding-right:8px}#gestureControls select{min-height:44px}#gestureControls:not([hidden])~#labels{margin-left:0}#sortControls{padding-left:10px;border-left:1px solid var(--line)}#photoSort{max-width:190px}#labelFilters #sortDirection{font-size:20px;min-width:44px}select:disabled{opacity:.4;cursor:default}
@media(max-width:1100px){#gestureControls{margin-left:0}#gestureControls label{max-width:65px;white-space:normal;line-height:1.3}#sortControls label{display:none}}
@media(max-width:600px){#gestureControls{flex-basis:100%;padding-right:0}#gestureControls label{max-width:none;margin-right:auto}#gestureControls select{max-width:130px}#photoSort{max-width:150px}}
body.compact #gestureControls{flex-basis:auto;margin-left:0;flex-shrink:0}body.compact #gestureControls label{max-width:65px;white-space:normal;line-height:1.3}

/* Older iPad WebKit needs the prefixed selection rule for the large preview. */
#viewer,#viewer canvas,#markHint,.tile,.stripTile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#viewer canvas,.tile img,.stripTile img{-webkit-user-drag:none;user-drag:none}#viewer canvas{pointer-events:none}