/* Slope-scope's own additions to the synced Slop Scope stylesheet (styles.css stays a byte-identical copy of the main
   app's). Owner's order of 2026-10-03: the image shows the moment it is chosen and the analysis is drawn on it, the
   model download is a rainbow-edged button, and Classify sits above the image with a one-line consent whose full text
   is a tooltip. The rainbow edge is the owner's exception to DESIGN.md's no-warm-light rule, for that button only. */

/* The model download: a rotating rainbow edge (the owner's example, without its halo). */
@property --edge-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes edge-turn{to{--edge-angle:360deg}}
@keyframes sparkle{0%,100%{transform:none;opacity:1}50%{transform:scale(1.12) rotate(10deg);opacity:.85}}
.rainbow-button{--edge-fill:oklch(24% .035 262);display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 22px;border:2px solid transparent;border-radius:999px;background:linear-gradient(var(--edge-fill),var(--edge-fill)) padding-box,conic-gradient(from var(--edge-angle),#ff0080,#ff8c00,#ffef00,#00ff00,#00cfff,#6f00ff,#ff0080) border-box;color:oklch(99% .003 262);font-size:15px;font-weight:650;line-height:1.2;animation:edge-turn 3s linear infinite;transition:transform 200ms ease,box-shadow 200ms ease}
.rainbow-button:enabled:hover{--edge-fill:oklch(31% .035 262);transform:scale(1.02);box-shadow:0 10px 26px -12px oklch(20% .03 258 / .55)}
.rainbow-button:enabled:active{transform:scale(.98)}
.rainbow-button:disabled{opacity:.5;animation-play-state:paused}
.rainbow-button .sparkle{width:20px;height:20px;flex:none;fill:currentColor;animation:sparkle 2s ease-in-out infinite}
.rainbow-button:disabled .sparkle{animation-play-state:paused}

/* The analysis drawn on the image: a soft veil, a band of light sweeping down the plate, and a label naming the phase.
   Under reduced motion the band stays out of view and the veil and label remain. */
@keyframes plate-scan{from{background-position:0 100%,0 0}to{background-position:0 0,0 0}}
.plate::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--medium) var(--ease);background:linear-gradient(180deg,oklch(98% .025 262 / 0) 40%,oklch(98% .025 262 / .6) 50%,oklch(98% .025 262 / 0) 60%) 0 100% / 100% 300% no-repeat,oklch(26% .03 262 / .16)}
.booth[data-phase="warming"] .plate::after,.booth[data-phase="assessing"] .plate::after{opacity:1;animation:plate-scan 1.8s cubic-bezier(.45,0,.55,1) infinite}
.booth[data-phase="assessing"] .plate::after{animation-duration:2.6s}
.plate-status{position:absolute;left:50%;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 16px);padding:5px 11px;overflow:hidden;border-radius:999px;background:oklch(22% .02 258 / .74);color:oklch(99% 0 0);font-size:12px;font-weight:550;line-height:1.4;white-space:nowrap;text-overflow:ellipsis;transform:translateX(-50%);box-shadow:0 4px 12px -6px oklch(18% .02 258 / .5)}
.plate-status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent-line);animation:breathe 1.4s ease-in-out infinite}

/* Classify above the image. The consent keeps its checkbox on one line; the full statement is a tooltip on hover, on
   keyboard focus and on a tap of the info button, and stays the checkbox's accessible description throughout. It opens
   upward so it never covers the Classify button below. */
.classify-row{display:grid;gap:10px}
.consent-compact{position:relative;display:flex;align-items:center;gap:4px}
.consent-compact .consent-row{flex:1;align-items:center;margin:0;padding:6px 8px;font-size:13px}
.consent-compact .consent-row input{margin:0}
.consent-terms{color:var(--ink-3)}
/* Measured and ready: the consent tick is highlighted until it is ticked, then Classify until it is pressed. A blue
   ring pulses outward; under reduced motion a still ring stays instead. */
@keyframes consent-ring{from{box-shadow:inset 0 0 0 1px var(--accent-line),0 0 0 0 oklch(50% .125 262 / .5)}to{box-shadow:inset 0 0 0 1px var(--accent-line),0 0 0 8px oklch(50% .125 262 / 0)}}
@keyframes classify-ring{from{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .18),0 8px 18px -10px oklch(40% .12 262 / .7),0 0 0 0 oklch(50% .125 262 / .55)}to{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .18),0 8px 18px -10px oklch(40% .12 262 / .7),0 0 0 9px oklch(50% .125 262 / 0)}}
.classify-row[data-ready] .consent-row:has(input:not(:checked)){background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--accent-strong);font-weight:550;animation:consent-ring 1.6s ease-out infinite}
.classify-row[data-ready] .consent-row input:not(:checked){outline:2px solid var(--accent);outline-offset:2px}
.classify-row[data-ready] .primary-button:enabled{animation:classify-ring 1.6s ease-out infinite}
@media(prefers-reduced-motion:reduce){
  .classify-row[data-ready] .consent-row:has(input:not(:checked)){box-shadow:inset 0 0 0 1px var(--accent-line),0 0 0 3px oklch(50% .125 262 / .25)}
  .classify-row[data-ready] .primary-button:enabled{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .18),0 8px 18px -10px oklch(40% .12 262 / .7),0 0 0 3px var(--accent-line)}
}
/* Choosing the detector: once a second one is loaded each row has a radio; the selected row is highlighted and tagged.
   The report names the detector it used. */
.model-pick{display:flex;flex:1;align-items:center;gap:10px;min-width:0;cursor:pointer}
.model-pick:has(.model-radio:disabled){cursor:default}
.model-radio{flex:none;width:16px;height:16px;margin:0;accent-color:var(--accent)}
.model-text{display:grid;gap:2px;min-width:0}
.model-title{display:flex;align-items:center;gap:8px;min-width:0}
.model-title strong{min-width:0;color:var(--ink)}
.model-badge{display:inline-flex;flex:none;align-items:center;padding:1px 8px;border-radius:999px;background:var(--accent);color:oklch(99% 0 0);font-size:11px;font-weight:650;line-height:1.6;white-space:nowrap}
.model-row[data-selected]{padding:8px 10px;border-radius:var(--radius-sm);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.model-row[data-selected] .model-text>span:last-child{color:var(--accent-strong)}
/* The basis line starts 16px left so that its separator hides when it wraps to the row start; a hanging indent keeps
   that first line and brings any further line of a long basis (a third-party detector's) back inside the card. */
.result-basis{padding-left:16px;text-indent:-16px}
.model-used{margin:0 0 6px;color:var(--ink);font-weight:550}
.model-used .model-badge{margin-right:8px;vertical-align:1px}
/* Each optional detector in its own frame: choice, status and action, then its credits and rule. The selected frame is
   tinted and tagged like our detector's row. */
.extra-model{display:grid;gap:6px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.extra-model>.field-note{margin:0}
.extra-model[data-selected]{border-color:var(--accent-line);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.extra-model[data-selected] .model-text>span:last-child{color:var(--accent-strong)}
/* A third-party result is short: the rail scrolls with the page instead of being held to the window's height with a
   scrollbar of its own (which hid the image and cut the card off above the footer). */
.workspace-grid:has(.standalone-report)>.rail{position:static;max-height:none;overflow-y:visible}

.tip-button{display:grid;flex:none;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:help;transition:background var(--fast),color var(--fast)}
.tip-button:hover,.consent-compact[data-open] .tip-button{background:var(--surface-2);color:var(--accent-strong)}
.tip-button .icon{width:17px;height:17px}
.tip-body{position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:20;display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-card);color:var(--ink-2);font-size:12.5px;line-height:1.5;opacity:0;visibility:hidden;transform:translateY(2px);transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility 0s linear var(--fast)}
@media(hover:hover){.consent-compact:hover .tip-body{opacity:1;visibility:visible;transform:none;transition-delay:300ms}}
.consent-compact:has(:focus-visible) .tip-body,.consent-compact[data-open] .tip-body{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.consent-compact[data-quiet] .tip-body{opacity:0;visibility:hidden;transition-delay:0s}