/* Palette from dark mode.svg: charcoal, translucent teal, and pale cyan. */
:root{--surface:#fff;--page:#efefef;--photo-hover:.35}
html:not([data-theme=dark]) .session-panel{--surface:#f6f7f7;background:var(--surface)}
.rail .brand{opacity:.5}
.theme-toggle{perspective:240px;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:12px;background:transparent;color:inherit}
.theme-toggle:hover{background:#ffffff28}
.profile .theme-toggle{margin-bottom:12px}
.theme-toggle svg{grid-area:1 / 1;width:24px;height:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:center;transition:transform 480ms cubic-bezier(.22,.75,.25,1)}
.theme-toggle .theme-sun{transform:rotateY(0deg)}
.theme-toggle .theme-moon{transform:rotateY(-180deg)}
[data-theme=dark] .theme-toggle .theme-sun{transform:rotateY(180deg)}
[data-theme=dark] .theme-toggle .theme-moon{transform:rotateY(0deg)}
[data-theme=dark] .theme-moon{color:var(--muted)}
.mobile-appearance{display:none}
/* Photo actions match Picture states.svg in either appearance. */
.selected-card:is(:hover,:focus-within) .image-button .selected-photo-ring{opacity:var(--photo-hover)}
.selected-card.is-active .image-button .selected-photo-ring{opacity:1}
.remove-image{z-index:3;width:44px;height:44px;right:max(3px,calc(6% - 6px));top:max(3px,calc(6% - 6px));background:transparent!important;border-radius:50%;corner-shape:round;color:#fff!important;isolation:isolate}
.remove-image::before{content:"";position:absolute;inset:6px;border-radius:50%;corner-shape:round;background:rgb(0 0 0 / 50%);z-index:-1;transition:background 160ms}
.remove-image:is(:hover,:focus-visible)::before{background:#ff0040}
.remove-image svg{width:28px;height:28px}
.remove-image .tile,.remove-image .focus{display:none}
.note-indicator{bottom:-10px;left:24px;right:auto;z-index:2;display:grid;place-items:center;width:34px;height:26px;padding:4px 5px;background:#454545;color:#fff;border:2px solid var(--surface);border-radius:20px;corner-shape:round}
.note-indicator svg{width:20px;height:16px}
.number-badge{border-color:var(--surface)}
html[data-theme=dark]{color-scheme:dark;--accent:#72e0fc;--accent-ink:#72e0fc;--ink:#ededed;--muted:#adadad;--line:#444444;--surface:#242424;--page:#1c1c1c;--soft:#2f2f2f;--teal-soft:rgb(61 170 197 / 30%);--teal-hover:rgb(61 170 197 / 50%)}
[data-theme=dark] body{background:var(--page)}
[data-theme=dark] :is(.session-panel,dialog,.noscript){background:var(--surface);box-shadow:0 5px 35px #0004}
[data-theme=dark] .rail{background:#303030;color:var(--accent)}
[data-theme=dark] .profile,[data-theme=dark] .rail-button{color:var(--accent)}
[data-theme=dark] :is(.icon-button,.quiet,.session-menu-item>.icon){color:var(--ink)}
[data-theme=dark] :is(.icon-button,.quiet,.theme-toggle):hover{background:rgb(255 255 255 / 10%)}
[data-theme=dark] .tile{fill:#fff;fill-opacity:0}
[data-theme=dark] .icon:is(:hover,:focus-visible,.is-playing) .tile{fill-opacity:.15}
[data-theme=dark] .handle{fill:var(--surface)}
[data-theme=dark] .icon:is(:hover,:focus-visible,.is-playing) .handle{fill:#3a3a3a}
[data-theme=dark] .focus{stroke:var(--accent)}
[data-theme=dark] :is(.empty-selection,.welcome-mark,.complete-mark){background:var(--soft)}
[data-theme=dark] .primary{background:var(--teal-soft);color:var(--accent)}
[data-theme=dark] .primary:not(:disabled):hover{background:var(--teal-hover);color:#b4f0ff;box-shadow:none}
[data-theme=dark] .primary:disabled{background:rgb(255 255 255 / 15%);color:rgb(255 255 255 / 40%);opacity:1}
[data-theme=dark] .secondary{background:transparent;color:rgb(114 224 252 / 70%);border-color:rgb(114 224 252 / 70%)}
[data-theme=dark] .secondary:not(:disabled):hover{background:transparent;color:rgb(114 224 252 / 100%);border-color:rgb(114 224 252 / 100%)}
[data-theme=dark] :is(input:not([type=radio]),textarea){background:var(--page);color:var(--ink);border-color:rgb(255 255 255 / 8%)}
[data-theme=dark] :is(input,textarea)::placeholder{color:var(--muted)}
[data-theme=dark] .settings-content :is(input:not([type=radio]),textarea){background:var(--soft);border-color:transparent}
[data-theme=dark] .question-choice{color:var(--ink)}
[data-theme=dark] .question-selecting .question-heading{background:var(--teal-soft)}
@media(hover:hover) and (pointer:fine){[data-theme=dark] .question-choice:hover{background:var(--teal-soft)}}
[data-theme=dark] .question-choice:has(input:checked){background:var(--teal-hover)}
[data-theme=dark] .saved-session{background:var(--soft)}
[data-theme=dark] .saved-session:hover{background:var(--teal-soft)}
[data-theme=dark] .new-session-menu{background:rgb(36 36 36 / 96%)}
[data-theme=dark] .session-menu-item:not(:disabled):hover{background:var(--teal-soft)}
[data-theme=dark] .session-menu-item small{color:var(--muted)}
[data-theme=dark] .session-menu-item:disabled,[data-theme=dark] .session-menu-item:disabled small{color:#808080}
[data-theme=dark] .expand-shade{background:#0002}
[data-theme=dark] dialog::backdrop{background:#0005}
[data-theme=dark] .question-dialog::backdrop{background:#0002}
[data-theme=dark] .discussion-dialog::backdrop{background:transparent}
[data-theme=dark] :is(.number-badge,.mobile-session-count){background:#285661;color:#b4f0ff}
[data-theme=dark] .error{color:#ff7899}
[data-theme=dark] input[aria-invalid=true]{border-color:#ff7899}
@media (max-width:600px), (max-width:900px) and (max-height:500px){
 .mobile-appearance{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-weight:600}
 .mobile-appearance .theme-toggle{color:var(--accent-ink);background:#47b3cf20}
 [data-theme=dark] .rail{background:transparent}
 [data-theme=dark] :is(.rail,.mobile-session-bar)::before{background:rgb(36 36 36 / 90%)}
 [data-theme=dark] .rail-button{border-color:var(--line);color:var(--ink)}
 [data-theme=dark] .rail-button:is(:hover,:focus-visible,:active){background:var(--teal-soft);color:var(--accent)}
 [data-theme=dark] .rail-button[aria-expanded=true]{background:transparent;color:var(--ink)}
 [data-theme=dark] :is(dialog .dialog-heading,dialog .dialog-footer,.review-footer,.is-expanded .session-footer){background:var(--surface)}
 .note-indicator{left:18px;bottom:-7px;width:27px;height:23px;padding:3px}
 .note-indicator svg{width:17px;height:14px}
}
/* Touch browsers can retain :hover after a tap. Only keyboard focus keeps a highlight. */
@media (max-width:600px), (max-width:900px) and (max-height:500px), (hover:none) {
 .rail-button.refresh:not(:focus-visible),[data-theme=dark] .rail-button.refresh:not(:focus-visible){background:transparent;color:var(--ink)}
 .rail-button.refresh:not(:focus-visible) .tile{fill-opacity:0}
 .rail-button.refresh:not(.is-playing) .refresh-art{transform:none}
}

/* Neutral chrome; cyan remains reserved for the accent treatments. */
[data-theme=dark] :is(.rail,.mobile-session-bar,.new-session-menu){box-shadow:0 3px 18px #0003}
[data-theme=dark] .mobile-appearance .theme-toggle{background:#ffffff10}

[data-theme=dark] .number-badge{border:0}
/* Quiet session chrome and a centred, unboxed empty state. */
#session-tools .icon{color:var(--muted)}
.session-body:has(#empty-selection:not([hidden]):not(.is-leaving)){display:flex;flex-direction:column}
.session-body #session-content:has(#empty-selection:not([hidden]):not(.is-leaving)){display:flex;flex:1;flex-direction:column;align-items:stretch}
#empty-selection{background:transparent;color:var(--muted);border:0;border-radius:0;box-shadow:none;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0;padding:24px 12px;height:auto;min-height:100px;max-width:none;align-self:stretch}
#session-content:has(#empty-selection:not([hidden]):not(.is-leaving)) .selected-images{display:none}
@media (min-width:601px) and (max-width:900px) and (min-height:501px){
 .workspace:not(.is-expanded) .session-body #session-content:has(#empty-selection:not([hidden]):not(.is-leaving)){flex-direction:row;align-items:center}
 .workspace:not(.is-expanded) #empty-selection{min-height:0;padding:12px;align-self:stretch}
}
[data-theme=dark] .profile img{border-color:#6f6f6f}

@media (max-width:600px), (max-width:900px) and (max-height:500px){
 [data-theme=dark] .rail .rail-button,[data-theme=dark] .rail .rail-button:is(:hover,:focus-visible,:active,[aria-expanded=true]){color:#b7b7b7}
}
@media (max-width:600px), (max-width:900px) and (max-height:500px){
 .rail::before{-webkit-backdrop-filter:blur(15px) grayscale(1);backdrop-filter:blur(15px) grayscale(1)}
 .rail .tile{fill:#fff}
 [data-theme=dark] .rail .rail-button:is(:hover,:focus-visible,:active){background:rgb(255 255 255 / 10%)}
 [data-theme=dark] .rail .rail-button[aria-expanded=true],
 [data-theme=dark] .rail .rail-button.refresh:not(:focus-visible){background:transparent}
}
@media (max-width:600px), (max-width:900px) and (max-height:500px){
 [data-theme=dark] .rail .rail-button.refresh:not(:focus-visible){color:#b7b7b7}
}

.profile > span{color:var(--muted)}
html:not([data-theme=dark]) .profile > span{color:#fff}

/* Image actions sit in opposite right-hand corners. */
.selected-card .remove-image{top:auto;bottom:max(3px,calc(6% - 6px));padding:0}
.selected-card .image-button{cursor:default}
.expand-image{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:#fff;isolation:isolate;opacity:0;pointer-events:none;transition:opacity 160ms}
.expand-image::before{content:'';position:absolute;inset:6px;border-radius:50%;corner-shape:round;background:rgb(0 0 0 / 50%);z-index:-1;transition:background 160ms}
.expand-image:hover::before{background:rgb(0 0 0 / 70%)}
.selected-card:is(:hover,:focus-within) .expand-image{opacity:1;pointer-events:auto}
.expand-image svg{width:40px;height:40px}
.expand-image .arrow-turn{transform:rotate(180deg)}
.expand-image .arrow-offset{transition:transform 280ms cubic-bezier(.2,.75,.25,1)}
.expand-image:is(:hover,:focus-visible) .arrow-offset{transform:translate(var(--dx),var(--dy))}
@media(hover:none){.expand-image{opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.expand-image .arrow-offset{transition:none}}

/* Reveal confirmation text inside the expanding lozenge. */
.remove-image{overflow:hidden;white-space:nowrap}
.remove-image .remove-label{display:block;max-width:100%;overflow:hidden;animation:remove-label-in 120ms ease 100ms both}
@keyframes remove-label-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.remove-image{transition:none}.remove-image .remove-label{animation:none}}

/* Phone photo controls are revealed explicitly, rather than through sticky hover. */
@media(max-width:600px),(max-width:900px) and (max-height:500px){
 .selected-card .image-button{cursor:pointer;touch-action:manipulation}
 .selected-card .image-button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
 .selected-card:is(:hover,:focus-within) :is(.expand-image,.remove-image),
 .selected-card :is(.expand-image,.remove-image){visibility:hidden;opacity:0;pointer-events:none}
 .selected-card.controls-visible :is(.expand-image,.remove-image){visibility:visible;opacity:1;pointer-events:auto}
}

.mobile-profile{display:none}
@media(max-width:600px),(max-width:900px) and (max-height:500px){
 .rail .rail-button,.rail .rail-button.plus{border-right:0;border-left:0}
 .rail .rail-button.plus{border-radius:0}
 .rail-tools>.mobile-profile{display:grid;place-items:center;flex:1;min-width:0;height:56px}
 .mobile-profile img{display:block;width:32px;height:32px;object-fit:cover;border:2px solid #fff;border-radius:50%;corner-shape:round}
 [data-theme=dark] .mobile-profile img{border-color:#6f6f6f}
}

/* A quiet edge separates the floating session bar from the dark board. */
[data-theme=dark] .mobile-session-bar::before{box-shadow:inset 0 0 0 1px rgb(255 255 255 / 12%)}

@media(max-width:600px),(max-width:900px) and (max-height:500px){
 [data-theme=dark] .rail::before{box-shadow:inset 0 0 0 1px rgb(255 255 255 / 12%)}
}

/* Lift the dark artwork off the charcoal disclaimer surface. */
.prototype-intro .intro-logo{color:var(--accent);filter:none;opacity:.8;margin-bottom:14px}

.avatar-trigger img{transition:border-color 200ms ease,box-shadow 200ms ease}
@media(hover:hover){
 .avatar-trigger:hover img{border-color:#d4f6ff;box-shadow:0 0 0 2px rgb(255 255 255 / 18%)}
 [data-theme=dark] .avatar-trigger:hover img{border-color:#adadad;box-shadow:0 0 0 2px rgb(255 255 255 / 10%)}
}
.avatar-trigger:focus-visible img{border-color:var(--accent);box-shadow:0 0 0 2px rgb(71 179 207 / 25%)}
@media(prefers-reduced-motion:reduce){.avatar-trigger img{transition:none}}

/* Optical weight correction for the session header on dark surfaces. */
[data-theme=dark] #session-tools :is(.arrow-turn path,.settings-stem path,.settings-handles){stroke-width:1.8}

/* Match the header's dark-mode optical weight, including outlined fill artwork. */
[data-theme=dark] .rail-button:is(.plus,.folder) svg path{stroke-width:1.8}
[data-theme=dark] .rail-button.squares svg path{stroke-width:.2}
[data-theme=dark] .rail-button.refresh .refresh-art{filter:url(#toolbar-lighten-stroke)}

/* Session image actions share the same bottom-left anchor and circle size. */
.selected-card .image-button{cursor:pointer}
.selected-card .number-badge{z-index:4;left:max(9px,6%);bottom:max(9px,6%);width:32px;min-width:32px;height:32px;border:0;font-size:15px;background:rgb(0 0 0 / 50%);color:#fff}
.selected-card .remove-image{left:max(3px,calc(6% - 6px));right:auto;bottom:max(3px,calc(6% - 6px));top:auto;width:44px;height:44px;transform:translateX(0);opacity:0;pointer-events:none;transition:transform 280ms var(--ease),opacity 180ms,width 180ms var(--ease)}
.selected-card:is(:hover,:focus-within) .remove-image{transform:translateX(38px);opacity:1;pointer-events:auto;transition-delay:500ms,500ms,0ms}
.selected-card .remove-image.is-confirming{width:96px;transform:translateX(38px);pointer-events:auto;transition-delay:0ms}
@media(hover:none),(pointer:coarse){
 .selected-card .remove-image,.selected-card:is(:hover,:focus-within) .remove-image{visibility:visible;opacity:1;pointer-events:auto;transform:translateX(38px);transition-delay:0ms}
}
@media(prefers-reduced-motion:reduce){.selected-card .remove-image{transition:none}}
.session-footer #discuss-images{width:100%;grid-column:1/-1}

@media(min-width:901px){
 .session-footer{width:100%;max-width:250px;align-self:center}
 .is-expanded .session-footer{width:clamp(180px,24vw,330px);max-width:100%}
}
@media(min-width:1600px){.workspace:not(.is-expanded) .session-footer{max-width:280px}}

/* Notes use the same inset circular treatment as the session image controls. */
.selected-card .note-indicator{left:auto;right:max(9px,6%);bottom:max(9px,6%);z-index:4;width:32px;height:32px;padding:0;border:0;border-radius:50%;corner-shape:round;background:rgb(0 0 0 / 50%);color:#fff;display:grid;place-items:center}
.selected-card .note-indicator svg{width:20px;height:20px}
.selected-card .note-indicator[hidden]{display:none}

@media(max-width:600px),(max-width:900px) and (max-height:500px){
 #session-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #session-footer #discuss-images,#session-footer #review-session{grid-column:auto;width:100%;min-width:0;min-height:48px;padding:10px 8px;font-size:14px;white-space:normal}
 #session-footer #back-to-board{grid-column:1/-1;width:100%}
 #review-form>.review-footer{flex-direction:column;align-items:stretch;gap:8px}
 #review-form>.review-footer .primary{order:0;flex:none;width:100%}
 #review-form>.review-footer .quiet{order:1;flex:none;width:100%;gap:6px}
}

#review-form>.review-footer :is(.primary,.quiet){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border:1px solid transparent;line-height:1.4}
#review-form>.review-footer .quiet{gap:6px}
#review-form>.review-footer .quiet svg{display:block;width:9px;height:18px;flex:none}

/* Review headings and fields share their vertical alignment across columns. */
#review-question,.review-details .field,.actions-heading h3{font-size:20px;line-height:1.5}
@media(min-width:901px){
 .review-details{padding-top:var(--review-heading-offset,30px)}
 .review-summary-heading{display:block;min-height:var(--review-heading-height,30px)}
}
/* Actions are a single editable surface, with the remove control inside. */
#review-actions{gap:10px}
#review-actions .action-row{gap:0;border-radius:12px;background:rgb(71 179 207 / 15%);overflow:hidden;transition:background 200ms ease}
#review-actions .action-row input{background:transparent;border:0;box-shadow:none;padding:12px 16px;font-size:16px;font-weight:600;line-height:1.5}
#review-actions .action-row .icon-button{flex:none;width:42px;height:44px;margin-right:5px;color:var(--ink);opacity:0;transition:opacity 180ms ease;background:transparent}
#review-actions .action-row .icon-button svg{width:28px;height:28px}
#review-actions .action-row:focus-within .icon-button{opacity:1}
/* The plus SVG already includes about 6px of space after its artwork. */
#add-action{display:flex;justify-content:center;align-items:center;gap:0;margin:14px auto 0}
[data-theme=dark] #review-actions .action-row{background:rgb(61 170 197 / 15%)}
@media(hover:hover){
 #review-actions .action-row:hover{background:rgb(71 179 207 / 25%)}
 #review-actions .action-row:hover .icon-button{opacity:1}
 [data-theme=dark] #review-actions .action-row:hover{background:rgb(61 170 197 / 25%)}
}
@media(hover:none){#review-actions .action-row .icon-button{opacity:1}}

#review-actions .action-row .icon-button{overflow:hidden;transition:width 180ms var(--ease),opacity 180ms ease;white-space:nowrap}
#review-actions .action-row .icon-button.is-confirming{width:96px;height:34px;opacity:1;background:#ff0040;color:#fff;border-radius:999px;corner-shape:round;padding:6px 16px;font:600 13px 'Open Sans',sans-serif}
#review-actions .remove-label{display:block;white-space:nowrap}
@media(prefers-reduced-motion:reduce){#review-actions .action-row .icon-button{transition:none}}

/* Anchor action controls independently of the editable text layout. */
#review-actions .action-row{position:relative}
#review-actions .action-row input{padding-right:52px}
@media(max-width:600px),(max-width:900px) and (max-height:500px){
 /* Optical alignment: lift the input text without changing the row height. */
 #review-actions .action-row input{padding-top:10px;padding-bottom:14px}
}
#review-actions .action-row:has(.is-confirming) input{padding-right:106px}
#review-actions .action-row .icon-button{position:absolute;right:5px;top:50%;margin:0;transform:translateY(-50%)}
#review-actions .action-row .icon-button:not(.is-confirming) svg{transform:none;animation:none}

#review-dialog .review-images-section h3{margin-bottom:6px}

#review-dialog .dialog-heading .close{display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border-radius:12px;background:transparent}
#review-dialog .dialog-heading .close svg{display:block;width:24px;height:24px}
#review-dialog .dialog-heading .close:hover{background:rgb(128 128 128 / 25%)}

#empty-selection .empty-selection-label{display:block;color:var(--muted)}
#empty-selection .empty-board-button{display:none}
@media(max-width:600px),(max-width:900px) and (max-height:500px){
 #empty-selection .empty-selection-label{display:none}
 #empty-selection .empty-board-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:0;background:transparent;box-shadow:none;color:var(--muted);font:inherit}
}

@media(max-width:600px),(max-width:900px) and (max-height:500px){
 .rail-button.plus::before{display:none}
}

@media(max-width:600px),(max-width:900px) and (max-height:500px){
 .rail .rail-button:is(:hover,:focus-visible,:active){background:transparent}
 .rail .rail-button .tile{fill-opacity:0}
}

@media(max-width:600px),(max-width:900px) and (max-height:500px){
 #complete-dialog[open]{display:flex;flex-direction:column;justify-content:safe center}
 #complete-dialog>*{flex-shrink:0}
 #complete-dialog .dialog-footer{position:static;padding-bottom:12px}
}

/* Supplied desktop artwork retains its intrinsic dimensions and stroke weights. */
.desktop-nav-logo,.desktop-nav-art{display:none}
@media(min-width:901px),(min-width:601px) and (min-height:501px){
 .rail .brand,.rail-button.plus::before,.rail-button:is(.plus,.folder)>[data-icon]{display:none}
 .rail .desktop-nav-logo{display:block;width:42px;height:42px;flex:none;align-self:center}
 .rail .desktop-nav-art{display:flex;align-items:center;justify-content:center}
 .rail #new-session .desktop-nav-art svg{width:34px;height:34px}
 .rail #saved-sessions .desktop-nav-art svg{width:32px;height:28px;overflow:visible}
 .rail :is(#new-session,#saved-sessions) .desktop-nav-art svg path{stroke-width:2}
 .desktop-plus-art{transform-origin:17px 17px}
 .desktop-folder-front{transform-origin:1px 26px;transition:transform 280ms cubic-bezier(.2,.75,.25,1)}
 .plus:is(:hover,:focus-visible,.is-playing) .desktop-plus-art{--wobble:5deg;animation:plus-wobble 600ms ease-in-out}
 .folder:is(:hover,:focus-visible,.is-playing) .desktop-folder-front{transform:skewX(-12deg) scaleY(.82)}
}
@media(prefers-reduced-motion:reduce){.desktop-plus-art,.desktop-folder-front{animation:none!important;transition:none!important;transform:none!important}}

@media(min-width:901px),(min-width:601px) and (min-height:501px){
 html:not([data-theme=dark]) .rail .desktop-nav-art svg path{stroke:#fff}
 html:not([data-theme=dark]) .rail .desktop-nav-logo{content:url("/prototypes/image-insight/nav-logo-light.svg?v=20261025-2");filter:none}
}

[data-theme=dark] .rail .desktop-nav-logo{opacity:.5}

@media(min-width:901px),(min-width:601px) and (min-height:501px){
 :root{--rail:78px}
 .rail{width:78px;padding:21px 10px 18px}
}

/* Consistent standard rounded corners on text buttons. */
.primary,.secondary,.quiet{border-radius:12px}
#discussion-dialog :is(#toggle-notes,#notes-done){border-radius:12px}

.secondary{transition:color 180ms ease,border-color 180ms ease}
html:not([data-theme=dark]) .secondary:not(:disabled):hover{background:transparent;color:#389fb9;border-color:#389fb9}

/* White writing surfaces in light mode. */
html:not([data-theme=dark]) :is(.settings-content input:not([type=radio]),.settings-content textarea,#discussion-dialog #image-notes){background:#fff}
html:not([data-theme=dark]) #review-actions .action-row{background:rgb(71 179 207 / 15%)}
html:not([data-theme=dark]) #review-actions .action-row input{background:transparent}
@media(hover:hover){html:not([data-theme=dark]) #review-actions .action-row:hover{background:rgb(71 179 207 / 25%)}}

/* Keep the welcome message centred without an empty header above it. */
#session-panel:has(#welcome:not([hidden])) .session-header{display:none}
#session-panel:has(#welcome:not([hidden])) .session-body{display:flex;flex-direction:column}
#session-panel #welcome{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:safe center;min-height:0;height:auto;text-align:center;gap:18px;padding-block:16px}
#session-panel #welcome .welcome-mark{display:grid;place-items:center;width:48px;height:48px;margin:0 0 -6px;background:transparent;border-radius:0;color:var(--accent);opacity:.8}
#session-panel #welcome .welcome-mark svg{display:block;width:48px;height:48px}
#session-panel #welcome h2{display:block}

@media(min-width:901px),(min-width:601px) and (min-height:501px){
 .new-session-menu{left:calc(50% + var(--rail) / 2 + 6px)}
}

@media(prefers-reduced-motion:no-preference){#saved-dialog[open]{animation-duration:300ms}}

/* Match icon hover surfaces to the light-mode action fields. */
html:not([data-theme=dark]) .icon-button:hover{background:rgb(71 179 207 / 15%)}
html:not([data-theme=dark]) .icon:is(:hover,:focus-visible,.is-playing) .tile{fill:rgb(71 179 207);fill-opacity:.15}
/* Icon buttons already paint the tint on their outer surface. */
html:not([data-theme=dark]) .icon.icon-button .tile{fill-opacity:0}


/* Transparent handle centres reveal the real surface, including hover and theme fades.
   Matching animated cutouts hide the stems underneath without a painted fill. */
#session-settings .settings-handles .handle{fill:none}
#session-settings #settings-stem-mask .handle{fill:#000}

/* Desktop focus experiment: a notes sheet slides out from behind the image. */
@media(min-width:901px),(min-width:601px) and (min-height:501px){
 #discussion-dialog{--sheet-shift:0px;--sheet-peek:0px;--sheet-overlap:calc(var(--sheet-image-size) * .32);isolation:isolate}
 #discussion-dialog .discussion-image{z-index:2;pointer-events:none;transform:translateX(var(--sheet-shift));transition:transform 520ms cubic-bezier(.22,1,.36,1)}
 #discussion-dialog #discussion-image{pointer-events:auto}
 #discussion-dialog.has-notes{--sheet-shift:calc(var(--sheet-image-size) * -.4)}
 #discussion-dialog:not(.has-notes):has(#discussion-image:hover,.discussion-actions:hover,#toggle-notes:focus-visible),
 #discussion-dialog.has-saved-notes:not(.has-notes){--sheet-peek:52px}
 #discussion-dialog .discussion-actions,
 #discussion-dialog.has-notes .discussion-actions{
  z-index:1;left:calc(50% - var(--sheet-image-size) * .3 - var(--sheet-overlap));top:calc(var(--notes-top) + 2px);
  width:calc(var(--sheet-image-size) * .8 + var(--sheet-overlap));height:calc(var(--sheet-image-size) - 4px);max-height:none;
  margin:0;padding:0;gap:0;border:0;border-radius:0 calc(var(--sheet-image-size) * .16) calc(var(--sheet-image-size) * .16) 0;
  background:var(--surface);box-shadow:none;overflow:hidden;
  clip-path:inset(0 0 0 55%);opacity:0;transform:translateX(var(--sheet-peek));
  transition:transform 520ms cubic-bezier(.22,1,.36,1),opacity 200ms ease;
 }
 #discussion-dialog:has(#discussion-image:hover,.discussion-actions:hover,#toggle-notes:focus-visible) .discussion-actions,
 #discussion-dialog.has-saved-notes .discussion-actions{opacity:1}
 #discussion-dialog.has-notes .discussion-actions{clip-path:none;opacity:1;transform:translateX(calc(var(--sheet-image-size) * .4))}
 #discussion-dialog #toggle-notes{position:absolute;inset:0 0 0 auto;width:52px;height:100%;padding:0;align-items:center;justify-content:center;border-radius:0;background:transparent;color:var(--accent)}
 #discussion-dialog #toggle-notes svg{margin:0;width:23px;height:23px;flex:none}
 #discussion-dialog #toggle-notes span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #discussion-dialog #toggle-notes:hover{color:var(--accent);background:transparent}
 #discussion-dialog #toggle-notes:focus{outline:none;box-shadow:none}
 #discussion-dialog #toggle-notes:focus-visible svg{outline:2px solid var(--accent);outline-offset:5px;border-radius:4px}
 html[data-input=pointer] #discussion-dialog #toggle-notes:focus svg{outline:none}
 #discussion-dialog.has-notes #toggle-notes{visibility:visible;pointer-events:auto;z-index:1}
 #discussion-dialog .notes-field{height:100%;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,36px);padding-left:calc(var(--sheet-overlap) + clamp(20px,3vw,36px));padding-right:64px;overflow:hidden}
 #discussion-dialog #image-notes{flex:1;min-height:0;width:100%;height:auto;padding:4px;background:transparent;resize:none}
 #discussion-dialog #notes-done{flex:none;margin:0 auto;padding:10px 26px;border-radius:12px;background:rgb(128 128 128 / 10%)}
 #discussion-dialog #notes-done:hover{background:rgb(128 128 128 / 18%)}
 #discussion-dialog .discussion-nav{transform:translate(var(--sheet-shift),-50%);transition:transform 520ms cubic-bezier(.22,1,.36,1),opacity 300ms ease}
 #discussion-dialog .discussion-position{transform:translateX(calc(-50% + var(--sheet-shift)));transition:transform 520ms cubic-bezier(.22,1,.36,1)}
 #discussion-dialog.has-notes .notes-field{animation:sheet-content-in 300ms 150ms both}
 @media(hover:none){#discussion-dialog:not(.has-notes){--sheet-peek:52px}#discussion-dialog .discussion-actions{opacity:1}}
 @media(prefers-reduced-motion:reduce){
  #discussion-dialog :is(.discussion-image,.discussion-actions,.discussion-nav,.discussion-position){transition:none}
  #discussion-dialog.has-notes .notes-field{animation:none}
 }
}
@keyframes sheet-content-in{from{opacity:0}to{opacity:1}}

/* Apply the shadow outside the photo's clipping layer so it stays visible. */
#discussion-dialog .discussion-image{filter:drop-shadow(0 5px 12px rgb(0 0 0 / 16%))}
#discussion-dialog .discussion-image img{filter:none}
[data-theme=dark] #discussion-dialog .discussion-image{filter:drop-shadow(0 5px 14px rgb(0 0 0 / 35%))}

#discussion-dialog.is-closing .discussion-actions{opacity:0}


/* Mobile counterpart: a full-size photo with its notes sheet tucked underneath. */
@media(max-width:600px),(max-width:900px) and (max-height:500px){
 #discussion-dialog{
  --sheet-shift:0px;
  --sheet-overlap:calc(var(--sheet-image-size) * .32);
  --sheet-frame-height:calc(var(--unfocused-height,100svh) - 24px);
  /* Clip sliding cards at the screen edge, not the inset resting frame. */
  width:100%;left:0;right:0;margin-inline:0;
  isolation:isolate;
 }
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog[open],body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog.has-notes[open]{display:block;padding:0;overflow:hidden;gap:0}
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog .discussion-image,
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog.has-notes .discussion-image{
  position:absolute;inset:0 0 auto;width:100%;height:var(--sheet-frame-height);margin:0;
  z-index:2;pointer-events:none;transform:translateY(var(--sheet-shift));
  transition:transform 520ms cubic-bezier(.22,1,.36,1);
 }
 #discussion-dialog #discussion-image{pointer-events:auto}
 #discussion-dialog.has-notes{--sheet-shift:calc(var(--sheet-image-size) * -.4)}
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog .discussion-actions,
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog.has-notes .discussion-actions{
  position:absolute;z-index:1;left:calc(50% - var(--sheet-image-size) / 2 + 2px);right:auto;
  top:calc(var(--sheet-frame-height) / 2 - var(--sheet-image-size) * .3 - var(--sheet-overlap));
  width:calc(var(--sheet-image-size) - 4px);height:calc(var(--sheet-image-size) * .8 + var(--sheet-overlap));
  min-height:0;max-height:none;margin:0;padding:0;gap:0;border:0;box-shadow:none;
  border-radius:calc(var(--sheet-image-size) * .16);
  background:var(--surface);overflow:hidden;clip-path:inset(55% 0 0);opacity:1;
  transform:translateY(44px);
  transition:transform 520ms cubic-bezier(.22,1,.36,1),top 520ms cubic-bezier(.22,1,.36,1),height 520ms cubic-bezier(.22,1,.36,1),opacity 200ms ease;
 }
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog.has-notes .discussion-actions{clip-path:none;transform:translateY(calc(var(--sheet-image-size) * .4))}
 #discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]){
  position:absolute;inset:auto 0 0;width:100%;height:44px;min-height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  color:var(--accent);background:transparent;border-radius:0;z-index:1;
 }
 #discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]):hover{color:var(--accent);background:transparent}
 #discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]) svg{width:23px;height:23px;margin:0;flex:none}
 #discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]):focus{outline:none;box-shadow:none}
 #discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]):focus-visible svg{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
 html[data-input=pointer] #discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]):focus svg{outline:none}
 #discussion-dialog.has-notes :is(#toggle-notes,[data-preview-id="toggle-notes"]){visibility:visible;pointer-events:auto}
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog .notes-field{
  position:static;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:8px;margin:0;
  padding:calc(var(--sheet-overlap) + 16px) 20px 48px;overflow:hidden;
  transition:padding-top 520ms cubic-bezier(.22,1,.36,1);
 }
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog .notes-field[hidden]{display:none}
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog :is(#image-notes,[data-preview-id="image-notes"]){flex:1;min-height:0;width:100%;height:0;padding:4px;border:0;border-radius:0;background:transparent;resize:none;overflow-y:auto}
 #discussion-dialog :is(#notes-done,[data-preview-id="notes-done"]){display:flex;align-self:center;border:0;flex:none;margin:0 auto;padding:10px 26px;border-radius:12px;background:rgb(128 128 128 / 10%)}
 #discussion-dialog :is(#notes-done,[data-preview-id="notes-done"]):hover{background:rgb(128 128 128 / 18%)}
 #discussion-dialog .discussion-position{z-index:0;transform:translate(-50%,44px);transition:transform 520ms cubic-bezier(.22,1,.36,1)}
 #discussion-dialog.has-notes .discussion-position{transform:translate(-50%,calc(var(--sheet-image-size) * .4))}
 #discussion-dialog.notes-editing .discussion-position{opacity:0}
 #discussion-dialog .discussion-actions{touch-action:auto}
 #discussion-dialog .discussion-actions button{touch-action:none}
 #discussion-dialog #image-notes{touch-action:pan-y}
 #discussion-dialog .swipe-notes-preview{pointer-events:none}
 #discussion-dialog .swipe-notes-preview .notes-field{animation:none}
 body #discussion-dialog.notes-dragging:is(.has-notes,:not(.has-notes)) :is(.discussion-image,.discussion-actions,.notes-field,.discussion-position){transition:none;animation:none}
 body #discussion-dialog.notes-dragging:is(.has-notes,:not(.has-notes)) .discussion-actions{clip-path:none}
 /* Editing lifts the unchanged photo clear of the visible screen. The sheet
    then occupies the visual viewport above the native keyboard. */
 #discussion-dialog.has-notes.notes-editing{--sheet-shift:calc(var(--sheet-frame-height) / -2 - var(--sheet-image-size) / 2 - 24px)}
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog.has-notes.notes-editing .discussion-actions{
  top:0;transform:translateY(0);height:100%;border-radius:20px;
 }
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog.has-notes.notes-editing .notes-field{padding-top:20px}
 /* The sheet already follows the gesture; restarting its content fade on
    release makes the placeholder disappear once after opening. */
 #discussion-dialog.has-notes .notes-field{animation:none}
 /* Override the mobile surface rule, including its explicit opacity:1. */
 body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog.is-closing .discussion-actions{opacity:0;visibility:hidden;pointer-events:none;transition:none}
 #discussion-dialog.is-closing .discussion-actions :is(#toggle-notes,[data-preview-id="toggle-notes"]){visibility:hidden}
 @media(prefers-reduced-motion:reduce){
  body:is(.keyboard-open,:not(.keyboard-open)) #discussion-dialog :is(.discussion-image,.discussion-actions,.notes-field,.discussion-position){transition:none;animation:none}
 }
}

/* Keep appearance status secondary to its label in either theme. */
[data-theme-state]{color:#858585;opacity:.75}
[data-theme=dark] [data-theme-state]{color:#adadad}

/* A small optical weight increase for the mobile toolbar plus. */
@media(max-width:600px),(max-width:900px) and (max-height:500px){
 .rail #new-session>[data-icon=plus] svg path{stroke-width:2.1}
 [data-theme=dark] .rail #new-session>[data-icon=plus] svg path{stroke-width:1.9}
}

/* Keep the focus notes glyph neutral, including saved notes and swipe previews. */
#discussion-dialog :is(#toggle-notes,[data-preview-id="toggle-notes"]) svg{color:var(--muted)}

@media(max-width:600px),(max-width:900px) and (max-height:500px){
 html:not([data-theme=dark]) #back-to-board:hover{background:rgb(71 179 207 / 15%)}
}

/* Give the scroll mask room for the question’s 16px left overhang.
   Matching padding and margin preserve the content alignment and width. */
.session-panel .session-body{padding-left:20px;margin-left:-20px}

/* Hover surface sits outside the text without changing its alignment. */
#edit-question{position:relative;isolation:isolate;padding:9px 36px 9px 16px;width:calc(100% + 16px);margin-left:-16px;border-radius:12px}
#edit-question::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;background:rgb(71 179 207 / 15%);opacity:0;pointer-events:none;transition:opacity 300ms ease}
[data-theme=dark] #edit-question::after{background:rgb(255 255 255 / 10%)}
@media(hover:hover) and (pointer:fine){#edit-question:hover::after{opacity:1}}
#edit-question:focus-visible::after{opacity:1}
@media(prefers-reduced-motion:reduce){#edit-question::after{transition:none}}

#edit-question>span{flex:1;min-width:0}
#edit-question>svg{position:absolute;right:8px;top:50%;margin:0;transform:translateY(-50%)}
@media(min-width:901px){
 .is-expanded #edit-question{padding-left:36px;padding-right:36px;width:100%;margin-left:0}
 .is-expanded #edit-question::before{display:none}
}

#review-form>.dialog-heading{justify-content:flex-start;align-items:baseline;gap:18px}
#review-form>.dialog-heading>.close{margin-left:auto;align-self:flex-start}
.review-title-editor{position:relative;flex:1;min-width:0;max-width:420px;border-radius:12px;transition:background-color 300ms ease}
#review-name{display:block;width:100%;padding:6px 42px 10px 12px;background:transparent;border:0;color:var(--muted);font-size:24px;line-height:1.35;font-weight:600;text-overflow:ellipsis}
.review-name-edit{position:absolute;right:4px;top:2px;display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;background:transparent;opacity:0;transition:opacity 200ms ease}
.review-name-edit svg{width:18px;height:18px}
.review-title-editor:is(:hover,:focus-within){background:rgb(71 179 207 / 15%)}
[data-theme=dark] .review-title-editor:is(:hover,:focus-within){background:rgb(255 255 255 / 10%)}
.review-title-editor:is(:hover,:focus-within) .review-name-edit{opacity:1}
#review-name:focus{color:var(--ink);text-overflow:clip}
.review-title-editor .error{padding:0 12px 8px;font-size:12px}
@media(min-width:901px){
 #review-summary{height:var(--review-note-height,180px);min-height:0}
}
@media(max-width:900px){
 #review-form>.dialog-heading{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:4px 12px}
 #review-form>.dialog-heading>.close{grid-column:2;grid-row:1}
 .review-title-editor{grid-column:1/-1;max-width:none;margin-left:-12px}
 #review-name{font-size:22px}
 .review-name-edit{opacity:.6}
}

/* Empty session artwork and two-line prompt. */
#empty-selection{gap:28px;font-size:16px;line-height:1.4;font-weight:400}
#empty-selection .empty-selection-art{overflow:visible;display:block;width:69%;max-width:210px;height:auto;max-height:28.5dvh;object-fit:contain;flex-shrink:1}
#empty-selection .empty-board-button{line-height:1.4}

/* Neutral placeholders: minimum 4.5:1 against each field surface.
   Action rows use their hover surface, the lowest-contrast state. */
:root{--field-placeholder:#767676}
html[data-theme=dark]{--field-placeholder:#848484}
html :is(input,textarea)::placeholder{color:var(--field-placeholder);opacity:1}
html[data-theme=dark] :is(input,textarea)::placeholder{color:var(--field-placeholder);opacity:1}
#review-name{--field-placeholder:#6d6d6d}
[data-theme=dark] #review-name{--field-placeholder:#a3a3a3}
[data-theme=dark] .settings-content{--field-placeholder:#969696}
[data-theme=dark] #discussion-dialog{--field-placeholder:#8b8b8b}
#review-actions{--field-placeholder:#686868}
[data-theme=dark] #review-actions{--field-placeholder:#adadad}

/* Shared pale-grey panel surfaces in light mode, including scroll fades. */
html:not([data-theme=dark]) :is(#review-dialog,.session-panel.is-settings){--surface:#f6f7f7;background:var(--surface)}
html:not([data-theme=dark]) #review-dialog :is(.dialog-heading,.review-footer,.dialog-footer){background:var(--surface);--review-fade-surface:var(--surface)}
html:not([data-theme=dark]) .session-panel :is(.settings-content,.settings-footer){background:var(--surface)}
/* Preserve placeholder contrast on the newly grey-backed translucent fields. */
html:not([data-theme=dark]) #review-name{--field-placeholder:#696969}
html:not([data-theme=dark]) #review-actions{--field-placeholder:#646464}

/* Consistent writing surfaces; reserve the border space to avoid hover shifts. */
:root{--field-fill:#fff;--field-rest-border:rgb(53 72 86 / 6%);--field-hover-border:rgb(53 72 86 / 16%)}
html[data-theme=dark]{--field-fill:#1c1c1c;--field-rest-border:rgb(255 255 255 / 5%);--field-hover-border:rgb(255 255 255 / 12%)}
html body :is(input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea),
html body #review-name,
html body #discussion-dialog :is(#image-notes,[data-preview-id="image-notes"]){border:1px solid var(--field-rest-border);background:var(--field-fill)}
@media(hover:hover) and (pointer:fine){
 html body :is(input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea):hover,
 html body #review-name:hover,
 html body #discussion-dialog :is(#image-notes,[data-preview-id="image-notes"]):hover{border-color:var(--field-hover-border)}
}

/* The review title reads as a heading until hovered. */
html body #review-name{background:transparent;border-color:transparent}
@media(hover:hover) and (pointer:fine){
 html body #review-name:hover{background:var(--field-fill)}
}
html body .review-title-editor:is(:hover,:focus-within){background:transparent}

/* Action strips retain their accent-tinted surface rather than the writing-field fill. */
html body #review-actions .action-row input{background:transparent;border:0}

/* Website motif ripple, with a quiet fade instead of drawing the centre. */
.empty-selection-art.is-waiting{visibility:hidden}
.empty-selection-art .empty-tile{transform-box:view-box;transform-origin:164px 164px}
.empty-selection-art.is-entering .empty-tile-centre{animation:empty-centre-fade 1800ms ease-out both}
.empty-selection-art.is-entering .empty-tile-inner{animation:empty-tile-ripple 1500ms 180ms cubic-bezier(.22,1,.36,1) both}
.empty-selection-art.is-entering .empty-tile-outer{animation:empty-tile-ripple 1500ms 390ms cubic-bezier(.22,1,.36,1) both}
@keyframes empty-centre-fade{from{opacity:0}to{opacity:1}}
@keyframes empty-tile-ripple{
 0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.86)}
 55%{opacity:1;transform:translate(calc(var(--dx) * -.035),calc(var(--dy) * -.035)) scale(1.015)}
 100%{opacity:1;transform:translate(0,0) scale(1)}
}
@media(prefers-reduced-motion:reduce){.empty-selection-art.is-entering .empty-tile{animation:none}}

/* Fade the empty state behind the first card without delaying its arrival. */
#session-content{position:relative}
#empty-selection.is-leaving{position:absolute;z-index:2;pointer-events:none;margin:0;min-height:0;max-width:none}

#session-content:has(#empty-selection.is-leaving) .selected-images{position:relative;z-index:3}

/* New-session setup is completed via Continue, not the panel chevron. */
@media(max-width:600px),(max-width:900px) and (max-height:500px){
 .workspace.is-session-setup :is(#mobile-session-bar,#session-settings){display:none}
}