/* Responsive, keyboard-accessible rating interface. No external assets. */
:root { color-scheme:light; --paper:#faf9f8; --surface:#fff; --ink:#022819; --muted:#545454; --line:#b5bdb8; --control:#6b7d70; --accent:#033220; --selected:#bfdfd2; --inset:#e8ece9; font:100%/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none!important; }
button,input,textarea,select { font:inherit; color:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; min-width:2.75rem; padding:.55rem .85rem; background:var(--surface); border:1px solid var(--control); border-radius:6px; cursor:pointer; text-decoration:none; font-weight:600; text-align:center; line-height:1.4; }
button:hover { background:var(--inset); }
button:disabled { opacity:.55; cursor:default; }
button[aria-disabled=true] { opacity:.65; cursor:wait; }
.primary { background:var(--accent); color:#faf9f8; border-color:var(--accent); }
button.primary:hover { background:#124c36; }
:focus-visible { outline:3px solid #367a5d; outline-offset:3px; }
button,input,a,[tabindex] { scroll-margin-block:5rem; }
input:not([type=checkbox]):not([type=radio]),textarea { display:block; width:100%; min-height:2.75rem; border:1px solid var(--control); border-radius:5px; padding:.6rem; background:var(--surface); font-size:1rem; }
input[type=checkbox],input[type=radio] { width:1.25rem; height:1.25rem; accent-color:var(--accent); flex-shrink:0; margin:0; }
label { display:block; }
p { margin:0 0 .875rem; }
h1 { font-size:1.5rem; line-height:1.3; margin:0 0 1rem; }
h2 { font-size:1.2rem; margin:0 0 .875rem; }
h3 { font-size:1.05rem; margin:.75rem 0; }
p,h1,h2,h3,legend,label { overflow-wrap:anywhere; }
fieldset { min-width:0; padding:0; border:0; margin:0; }
legend { padding:0; font-weight:650; margin-bottom:.625rem; max-width:100%; }
.eyebrow { font-size:.875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:.375rem; }
.hint { font-size:.875rem; color:var(--muted); margin:0; }
.narrow { max-width:51rem; margin:auto; padding:2rem 1rem; }
.card { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:1.5rem; margin:1.25rem 0; min-width:0; }
.check { display:flex; gap:.75rem; align-items:center; min-height:2.75rem; margin:1rem 0; cursor:pointer; }
.prewrap { white-space:pre-wrap; }
#pid { max-width:26rem; margin-top:.5rem; }
#pid-help { margin-top:.375rem; }
.tag { font-size:.875rem; background:var(--selected); padding:.2rem .6rem; border-radius:1rem; }
.skip-link { position:absolute; left:1rem; top:-8rem; z-index:20; background:var(--surface); color:var(--ink); padding:.75rem; border:2px solid var(--accent); }
.skip-link:focus { top:.5rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.property-type { font-style:italic; font-weight:400; }
/* Researcher form: separate controls from copy without spreading text lines. */
#researcher { line-height:1.4; }
#researcher #login { margin-block:1.5rem 2rem; }
#researcher #login label { font-weight:600; margin-bottom:.625rem; }
#researcher #key-help { margin-top:.625rem; line-height:1.4; }
#researcher #login button { margin-top:1.5rem; }
#researcher #status:empty { display:none; }
#researcher #results .actions { gap:.75rem; margin-bottom:1.75rem; }
#researcher #results h2 { margin-bottom:.75rem; }
#researcher #studies,#researcher #sessions { display:grid; gap:1rem; }
#researcher #studies { margin-bottom:2rem; }
#researcher #studies p,#researcher #sessions p { margin:0; line-height:1.45; }
.completion-code-row { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.completion-code-row #completion-code { flex:1 1 10rem; min-width:0; max-width:18rem; font-family:ui-monospace,monospace; font-weight:700; letter-spacing:.08em; }
#copy-status:not(:empty) { margin-top:.75rem; }
/* Rating: title and image stay together. Both scales always run top to bottom. */
#rate { min-height:100vh; min-height:100svh; }
#bar { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:var(--surface); flex-wrap:wrap; font-size:.875rem; }
.grow { flex:1; }
.jump { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; min-width:0; }
.jump #position { width:4.5rem; }
progress { width:6rem; max-width:100%; height:.5rem; accent-color:var(--accent); }
#work { display:grid; grid-template-columns:minmax(0,1fr) minmax(19rem,27rem); align-items:start; }
#listing-card { min-width:0; padding:1.25rem; position:sticky; top:0; }
#listing-title { font-size:1.35rem; }
#image-pane { background:var(--inset); display:flex; align-items:center; justify-content:center; padding:.5rem; border-radius:6px; margin-bottom:.5rem; }
#zoom { border:0; background:transparent; padding:0; width:100%; cursor:zoom-in; }
#listing-image { display:block; max-width:100%; max-height:calc(100vh - 14rem); max-height:calc(100svh - 14rem); width:auto; height:auto; object-fit:contain; margin:auto; }
#image-error { padding:1rem; text-align:center; max-width:28rem; }
#panel { min-width:0; border-left:1px solid var(--line); padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
#rating-help { margin-bottom:.75rem; }
#scores { display:flex; flex-direction:column; gap:.5rem; }
.choice { display:flex; align-items:center; gap:.75rem; padding:.625rem .75rem; border:1px solid var(--control); border-radius:6px; cursor:pointer; min-height:3rem; }
.choice:has(input:checked) { background:var(--selected); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline:3px solid #367a5d; outline-offset:3px; }
.choice strong { min-width:1rem; }
.save-row { font-size:.875rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:1.5rem; flex-wrap:wrap; }
.error { color:#9a2727; }
nav { display:flex; gap:.625rem; flex-wrap:wrap; }
nav button { flex:1; }
/* Full introduction and matching reference dialog. */
#start { max-width:95rem; width:100%; padding:1.5rem; }
.instruction-layout { display:grid; grid-template-columns:minmax(17rem,1fr) minmax(0,2fr); gap:1.75rem; align-items:start; }
.instruction-layout section { min-width:0; }
.scale-guide { display:block; padding-left:1.8rem; margin:0 0 1.25rem; }
.scale-guide li { padding:.25rem 0; }
.scale-guide li::marker { font-weight:700; }
.anchors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.anchor { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.875rem; min-width:0; }
.anchor-title { font-size:1rem; line-height:1.4; margin:0 0 .75rem; }
.example-photo { width:100%; padding:0; border:0; border-radius:0; background:var(--inset); cursor:zoom-in; }
.anchor img { width:100%; height:11rem; object-fit:contain; display:block; }
.example-score { margin:.75rem 0; font-weight:700; }
.explanation { font-size:.9375rem; margin:0; }
.explanation strong { display:block; margin-bottom:.25rem; }
/* Named native dialogs retain keyboard focus, including Escape to close. */
dialog { max-width:70rem; width:calc(100% - 2rem); max-height:90vh; max-height:90svh; border:1px solid var(--control); border-radius:8px; padding:0; background:var(--paper); color:var(--ink); overflow:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#02281999; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line); padding:.75rem 1rem; z-index:1; flex-wrap:wrap; }
.dialog-header h2 { margin:0; }
.dialog-content { padding:1.25rem; }
#instructions .instruction-layout { grid-template-columns:1fr; }
#confirm { max-width:38rem; }
.actions { display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; }
#photo-dialog { max-width:80rem; }
#photo-frame { overflow:auto; max-height:60vh; max-height:60svh; margin-top:.75rem; background:var(--inset); padding:.5rem; border:1px solid var(--control); }
#photo-image { display:block; max-width:100%; max-height:55vh; max-height:55svh; object-fit:contain; margin:auto; }
#photo-frame.actual-size #photo-image { max-width:none; max-height:none; margin:0; }
#photo-help { margin-top:.5rem; }
@media(min-width:85rem) { #start .anchors { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:60rem) { .instruction-layout { grid-template-columns:1fr; } #work { grid-template-columns:minmax(0,1fr) minmax(17rem,1fr); } #bar>.grow { display:none; } }
@media(max-width:46rem) {
 #bar { padding:.625rem .75rem; gap:.5rem; }
 #bar>strong,#bar>.tag,#bar>progress { display:none; }
 #bar>.jump { flex:1 1 100%; }
 #bar>#examples { margin-left:auto; }
 #work { display:block; }
 #listing-card { position:static; padding:1rem; }
 #listing-image { max-height:40vh; max-height:40svh; }
 #listing-title { font-size:1.2rem; }
 #panel { border-left:0; border-top:1px solid var(--line); padding:1rem; }
 #start { padding:1rem; }
 .card { padding:1rem; }
 .instruction-layout { gap:1.25rem; }
 .anchors { grid-template-columns:1fr; }
 .anchor img { height:auto; max-height:19rem; }
 .dialog-content { padding:1rem; }
 dialog { width:calc(100% - 1rem); max-height:95vh; max-height:95svh; }
}
@media(max-height:30rem) { #listing-card { position:static; } #listing-image { max-height:70vh; max-height:70svh; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media(forced-colors:active) { .choice:has(input:checked) { outline:2px solid Highlight; } button,.choice,input { border-color:ButtonText; } :focus-visible { outline-color:Highlight; } }