/* Guides app. Brand tokens only (npm run app:check fails on raw colors, primitives and gradients). */
.back{display:inline-flex;align-items:center;gap:2px;min-height:var(--tap);margin:-10px 0 var(--space-1) -6px;padding:0 var(--space-2) 0 2px;border-radius:var(--r-sm);color:var(--hero-muted);font-weight:var(--weight-strong);font-size:var(--fs-md);text-decoration:none}
.back:hover{color:var(--hero-ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guide-pick{margin:0}
.view{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-4)}
.view[hidden]{display:none}
.hint{margin:0}

/* Add photos button wraps a hidden file input */
.add-photos{position:relative;cursor:pointer}
.add-photos input{position:absolute;inset:0;opacity:0;cursor:pointer}
.add-photos:focus-within{outline:3px solid var(--accent);outline-offset:2px}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.photo-grid.small{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.photo{display:flex;flex-direction:column;gap:var(--space-1);padding:0;border:var(--bw-base) solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit}
.photo:hover{border-color:var(--accent)}
.photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--panel)}
.photo small{padding:0 var(--space-2) var(--space-2);color:var(--muted);font-size:var(--fs-xs)}

/* Spots */
.spot-card{padding:0}
.spot{align-items:flex-start}
.spot .thumb{flex:none;width:84px;aspect-ratio:16/10;border-radius:var(--r-xs);background:var(--panel);object-fit:cover;border:var(--bw-hair) solid var(--line)}
.spot .thumb.art{object-fit:contain;background:var(--surface)}
.spot .grow strong{display:block;font-size:var(--fs-md);line-height:1.3}
.spot .file{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);word-break:break-all}
.spot .acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.pick-list{max-height:45vh;overflow:auto}
.pick-list li{cursor:pointer}
.pick-list li:hover strong{color:var(--accent)}
.use-img{display:block;width:100%;max-height:30vh;object-fit:contain;border-radius:var(--r-md);background:var(--panel)}

/* Text */
.text-bar{display:flex;gap:var(--space-3);align-items:flex-end}
.text-bar .grow{flex:1;min-width:0}
.text-bar .b-field{margin:0}
.editor{min-height:55vh;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.6;resize:vertical}
.text-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.text-acts .b-subtle{margin:0}
.verify summary{cursor:pointer;font-weight:var(--weight-ui);padding:var(--space-2) 0}
.verify li{cursor:pointer}

/* Preview */
.preview{width:100%;height:75vh;border:var(--bw-hair) solid var(--line);border-radius:var(--r-md);background:var(--panel)}

/* Crop */
.crop-wrap{display:flex;justify-content:center;padding:var(--space-3);background:var(--panel);border-radius:var(--r-md)}
.crop-box{position:relative;overflow:hidden;background:var(--surface);cursor:grab;touch-action:none;outline:var(--bw-base) solid var(--accent)}
.crop-box.round{border-radius:var(--r-pill)}
.crop-box.dragging{cursor:grabbing}
.crop-box img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.crop-box.contain img{object-fit:contain}
input[type=range]{width:100%;accent-color:var(--accent)}

/* Auto-sort */
.photo .guess{padding:0 var(--space-2);color:var(--accent);font-size:var(--fs-xs);font-weight:var(--weight-strong);line-height:1.3}
.sort-card{display:flex;flex-direction:column;gap:var(--space-2)}
.sort-card h3{margin:0;font-size:var(--fs-md)}
.sort-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.sort-card li{display:flex;align-items:center;gap:var(--space-3)}
.sort-card li img{flex:none;width:56px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-xs);background:var(--panel)}
.sort-card li .grow{flex:1;min-width:0}
.sort-card li small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.pick-list li.best strong::after{content:" · best guess";color:var(--accent);font-size:var(--fs-xs)}

/* Comment mode and to-dos */
#comment[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.preview.commenting{outline:var(--bw-base) solid var(--accent);outline-offset:2px}
.note-text{min-height:110px;resize:vertical}
.note-body{margin:0;font-size:var(--fs-md);white-space:pre-wrap}
.danger-text{color:var(--danger)}
#todo-list li,#done-list li{cursor:pointer}
#done-list strong{text-decoration:line-through;color:var(--muted)}
.b-count:empty{display:none}
.sort-card li strong{font-size:var(--fs-sm);line-height:1.3}

/* Sign in */
.signin{display:flex;flex-direction:column;gap:var(--space-3);max-width:420px;margin:var(--space-5) auto}
.signin h2{margin:0}
.signin form{display:flex;flex-direction:column;gap:var(--space-3)}
.signin .b-field,.signin .b-note{margin:0}
.signed-in{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-6)}
#app-body[hidden],.signin[hidden]{display:none}