@font-face { font-family:"Patrol Display"; src:url("/anton-logo.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
:root { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#202620; background:#fff; font-size:13px; --line:#cbd0cb; --muted:#596259; --selected:#dcebdc; --accent:#215327; --header-height:52px; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:360px; }
button,input,textarea { font:inherit; color:inherit; border-radius:0; }
button { border:1px solid #b9c0b9; background:#f7f8f7; padding:5px 8px; cursor:pointer; line-height:1.2; }
button:hover { background:#e8ece8; border-color:#8c998c; }
button:disabled { cursor:default; color:#818981; background:#f4f5f4; border-color:#dde0dd; }
input,textarea { border:1px solid #aeb8ae; background:#fff; padding:5px 7px; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,.image-stage:focus-visible,#timeline:focus-visible { outline:2px solid #277a35; outline-offset:2px; }
a { color:#24542c; text-underline-offset:2px; }
::selection { background:#c5e3c8; }
kbd { font:inherit; font-size:11px; color:#4c584c; background:#e7ebe7; padding:1px 3px; white-space:nowrap; }
h1,h2 { font:inherit; font-weight:700; margin:0; }
.topbar { height:var(--header-height); display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:0 10px; background:#f0f2f0; border-bottom:1px solid var(--line); }
.review-title { display:flex; align-items:center; gap:8px; min-width:0; }
.patrol-car { width:84px; height:42px; object-fit:contain; flex:none; }
.brand-copy { display:flex; flex-direction:column; gap:1px; min-width:0; }
.brand-line { display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; }
.tool-tagline { color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.055em; white-space:nowrap; }
.tool-title { font-family:"Patrol Display",sans-serif; font-size:22px; line-height:1.15; font-weight:400; letter-spacing:0; color:#143322; white-space:nowrap; }
.progress-text { grid-column:1/-1; color:#505b50; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.account-controls { display:grid; align-items:center; width:224px; flex:none; min-width:0; height:28px; }
.account-controls #login,.account-signed-in { grid-area:1 / 1; min-width:0; transition:opacity 180ms cubic-bezier(.16,1,.3,1), visibility 0s; }
.account-controls #login { width:100%; height:28px; justify-content:center; opacity:1; visibility:visible; }
.account-signed-in { display:flex; align-items:center; gap:6px; opacity:0; visibility:hidden; pointer-events:none; }
.account-controls[data-auth-state="signed-in"] #login { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 140ms ease-out, visibility 0s 140ms; }
.account-controls[data-auth-state="signed-in"] .account-signed-in { opacity:1; visibility:visible; pointer-events:auto; }
.account-controls .account-profile { flex:1; min-width:0; }
.account-controls #logout { flex:none; }
.account-avatar-slot { display:inline-flex; width:24px; height:24px; flex:none; background:#e0e5e0; }
.export-slot { width:44px; flex:none; opacity:0; transition:opacity 180ms cubic-bezier(.16,1,.3,1); }
.account-controls[data-auth-state="signed-in"] ~ .export-slot { opacity:1; }
.account-profile { display:inline-flex; align-items:center; gap:5px; max-width:180px; min-width:0; font-weight:650; text-decoration:none; }
.account-avatar { width:24px; height:24px; flex:none; object-fit:cover; opacity:0; transition:opacity 140ms ease-out; }
.account-avatar[data-ready="true"] { opacity:1; }
#account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-message { color:#a22e22; font-size:12px; line-height:1.4; margin-bottom:8px; overflow-wrap:anywhere; }
.top-actions a { margin:0 4px; }
#login[aria-busy="true"] { display:inline-flex; align-items:center; gap:6px; }
#login[aria-busy="true"]::before { content:""; width:12px; height:12px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:login-spin .8s linear infinite; }
@keyframes login-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { #login[aria-busy="true"]::before { animation:none; } }
@media (prefers-reduced-motion:reduce) { .account-controls[data-auth-state] #login,.account-signed-in,.account-avatar,.export-slot { transition:none; } }
.workspace { height:calc(100dvh - var(--header-height)); display:grid; grid-template-columns:minmax(0,1fr) 270px; }
.review-workspace { --controls-min:300px; --viewer-size:calc(100dvh - var(--header-height) - 16px); min-width:0; min-height:0; display:block; padding:8px; overflow:auto; }
.inspection-area { display:grid; grid-template-columns:var(--viewer-size) minmax(var(--controls-min),1fr); gap:10px; height:100%; align-items:start; }
.image-stage { position:relative; width:100%; height:var(--viewer-size); aspect-ratio:1; overflow:hidden; background:#202420; display:grid; place-items:center; cursor:default; touch-action:pan-y; }
.image-stage.can-pan { cursor:grab; touch-action:none; }
.image-stage.dragging { cursor:grabbing; }
.image-stage img { position:absolute; max-width:none; max-height:none; transform-origin:center; user-select:none; }
.image-message { padding:20px; color:#e1e7e1; text-align:center; }
.controls-rail { display:flex; flex-direction:column; height:100%; gap:6px; min-width:0; min-height:0; overflow-y:auto; padding:0 3px 0 0; scrollbar-width:thin; }
.observation-nav { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.observation-position { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:6px; row-gap:2px; min-height:20px; margin-right:4px; }
.counter { font-variant-numeric:tabular-nums; white-space:nowrap; }
.primary-button { background:var(--accent); color:#fff; border-color:#163b1b; font-weight:650; padding:7px 10px; }
.primary-button:enabled:hover { background:#173f1c; }
.primary-button kbd { background:#3b6f40; color:#fff; margin-left:8px; }
.primary-button:disabled { background:#f4f5f4; color:#818981; border-color:#dde0dd; }
.primary-button:disabled kbd { background:#e7ebe7; color:#818981; }
#submit-review { margin-left:2px; min-width:128px; }
#submit-review[data-saved="true"] { color:#355b37; border-color:#b5c2b5; background:#f0f2f0; }
.review-badge { font-size:11px; color:#355b37; background:#e4eee4; padding:2px 4px; }
.photo-controls { display:flex; flex-direction:column; gap:5px; border-top:1px solid var(--line); padding-top:8px; flex:none; }
.photo-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:4px; align-items:center; }
.photo-nav button,.photo-toolbar button { padding:4px 5px; font-size:12px; }
.photo-count { white-space:nowrap; font-size:12px; min-width:30px; text-align:center; }
.photo-toolbar { display:flex; flex-wrap:wrap; gap:4px; }
#original { flex:1; }
.zoom-display { color:#525e52; font-size:12px; font-variant-numeric:tabular-nums; }
.filmstrip { display:flex; align-items:center; gap:5px; min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:thin; padding:2px 0; min-height:68px; }
.thumbnail { border:2px solid transparent; width:52px; height:42px; flex:none; padding:0; background:#d9dfd9; position:relative; }
.thumbnail img { width:100%; height:100%; object-fit:cover; display:block; }
.thumbnail[aria-pressed="true"] { border-color:#1d6b29; width:90px; height:64px; background:#202420; cursor:crosshair; touch-action:none; }
.thumbnail[aria-pressed="true"] img { object-fit:contain; }
.thumbnail span { position:absolute; bottom:0; right:0; background:#fff; color:#182c1a; font-size:10px; padding:0 2px; }
.thumbnail .thumbnail-viewport { position:absolute; display:block; pointer-events:none; background:rgba(255,255,255,.08); border:1px solid #fff; outline:1px solid #111; padding:0; right:auto; bottom:auto; min-width:2px; min-height:2px; }
.photo-information { display:flex; flex-direction:column; gap:4px; font-size:11px; line-height:1.4; color:#596459; overflow-wrap:anywhere; }
.classification { flex:none; }
.classification-heading { display:flex; align-items:baseline; justify-content:space-between; gap:5px; margin-bottom:5px; flex-wrap:wrap; }
.classification-heading span { font-size:12px; color:var(--muted); }
.categories { display:grid; gap:6px; }
.category-group { min-width:0; margin:0; padding:0; border:0; }
.category-group legend { padding:0; margin-bottom:3px; font-size:12px; font-weight:650; }
.category-options { display:flex; flex-wrap:wrap; gap:3px; }
.category-verdicts { border-top:1px solid var(--line); padding-top:6px; }
.category { display:inline-flex; align-items:center; gap:4px; text-align:left; min-height:23px; padding:2px 5px; font-size:12px; line-height:1.2; background:#fff; }
.category .check { border:1px solid #8f9d8f; width:11px; height:11px; flex:none; background:#fff; display:grid; place-items:center; font-size:10px; }
.category[aria-pressed="true"] { border-color:#45724a; background:var(--selected); color:#193d1e; }
.category[aria-pressed="true"] .check { background:#2c6034; border-color:#2c6034; color:#fff; }
.category-mnemonic { text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.category kbd { padding:0 2px; margin-left:2px; }
.review-comment-row,.review-identification-row { display:flex; flex-direction:column; gap:5px; flex:none; }
.review-comment-row label,.review-identification-row label { font-size:12px; font-weight:650; }
.identification-input { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
.identification-input input { min-width:0; width:100%; }
.taxon-results { position:fixed; z-index:10; max-height:180px; overflow-y:auto; border:1px solid var(--line); background:#fff; }
.taxon-option { padding:5px 6px; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.taxon-option + .taxon-option { border-top:1px solid var(--line); }
.taxon-option[aria-selected="true"],.taxon-option:hover { background:var(--selected); }
.taxon-scientific { font-weight:600; }
.taxon-detail { font-size:12px; color:var(--muted); }
#taxon-search-status:empty { display:none; }
.review-identification-row:has(#taxon-search-status:not(:empty)) #identification-hint { display:none; }
.review-comment-row textarea { width:100%; min-height:44px; max-height:180px; resize:vertical; font-size:13px; }
.field-hint { font-size:11px; color:var(--muted); line-height:1.4; }
.project-selection { font-size:12px; display:flex; align-items:flex-start; gap:5px; flex-wrap:wrap; }
.project-selection input { accent-color:#215327; margin:1px 0 0; }
/* Keep one status line even when empty, so first/last selections do not resize the rail. */
.save-status { flex:none; min-height:1.4em; font-size:12px; line-height:1.4; color:#4a654b; }
.save-status.error { color:#a22e22; }
.source-panel { border-left:1px solid var(--line); padding:11px 12px 18px; overflow-y:auto; scrollbar-gutter:stable; background:#fafbfa; }
.source-heading { display:flex; flex-direction:column; gap:6px; padding-bottom:11px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.source-heading a { font-weight:650; }
#observation-meta { font-size:12px; color:#586258; }
.source-notes { padding:11px 0; border-bottom:1px solid var(--line); }
.source-notes h2 { margin-bottom:6px; }
.source-text { font-size:14px; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; }
.empty-text { color:#647064; font-size:12px; }
.observation-details { padding:6px 0; font-size:12px; line-height:1.4; }
.observation-details p { margin:3px 0; overflow-wrap:anywhere; }
.current-identification { font-size:13px; font-weight:700; padding:5px 0 9px; overflow-wrap:anywhere; }
.discussion-heading { display:flex; align-items:baseline; justify-content:space-between; gap:5px; padding:6px 0; border-bottom:2px solid #b5c2b5; }
#discussion-count { color:#5d685d; font-size:11px; white-space:nowrap; }
.comment { padding:10px 0; border-bottom:1px solid #cbd3cb; }
.comment-header { display:flex; flex-wrap:wrap; gap:3px 8px; align-items:baseline; justify-content:space-between; margin-bottom:5px; }
.comment-author { font-size:13px; font-weight:750; color:#1e4a28; overflow-wrap:anywhere; }
.comment time { font-size:11px; color:#5d685d; }
.timeline-identification { font-size:13px; line-height:1.4; color:#233e29; margin-bottom:5px; overflow-wrap:anywhere; }
.timeline-event-label { font-weight:600; font-size:11px; color:#596259; margin-right:5px; }
.identification-status { font-size:11px; color:#657065; margin-left:5px; }
.timeline-agree { display:inline-flex; align-items:baseline; gap:4px; margin-left:8px; vertical-align:baseline; white-space:nowrap; font-size:inherit; color:#233e29; cursor:pointer; }
.agree-identification { align-self:center; margin:0; accent-color:#215327; }
.timeline-agree:has(input:disabled) { color:#657065; cursor:default; }
.agree-identification:focus-visible { outline:2px solid #277a35; outline-offset:2px; }
.withdrawn { color:#657065; }
.comment-body { font-size:14px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.project-section { margin-top:15px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; }
.project-title { font-weight:650; margin-bottom:8px; }
.project-title span { display:block; font-weight:400; color:#4b664d; margin-top:4px; }
.project-section p { line-height:1.4; }
.project-section label { display:block; margin:8px 0 4px; }
.project-section input { width:100%; }
summary { cursor:pointer; font-size:12px; font-weight:650; }
.legacy-review-notes { padding:7px 0; border-top:1px solid var(--line); color:#596259; font-size:12px; white-space:pre-wrap; }
.help-panel { position:fixed; top:46px; right:12px; width:min(470px,calc(100vw - 24px)); max-height:calc(100dvh - 60px); overflow-y:auto; background:#fff; border:2px solid #697769; padding:16px; z-index:5; }
.help-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.help-panel dl { margin:12px 0; }
.help-panel dl div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #dde3dd; padding:6px 0; }
.help-panel dd { margin:0; text-align:right; }
.help-panel p { font-size:12px; color:#596459; line-height:1.5; }
@media (max-width:1150px) {
  .workspace { grid-template-columns:minmax(0,1fr) 240px; }
  .review-workspace { --controls-min:280px; }
  .topbar { gap:10px; }
  .tool-title { font-size:20px; }
  .patrol-car { width:72px; height:36px; }
  .account-controls { width:190px; }
  .top-actions .export-slot { display:none; }
  .top-actions .export-link,.review-badge { display:none; }
  .account-profile { max-width:140px; }
}
@media (max-width:900px) {
  .workspace { grid-template-columns:minmax(0,1fr) 225px; }
  .review-workspace { --controls-min:230px; }
  :root { --header-height:92px; }
  .topbar { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:42px 38px; padding:6px 8px; gap:0 8px; }
  .observation-nav { grid-column:1/-1; grid-row:2; justify-content:flex-end; }
  .observation-position { margin-right:auto; }
  .help-label { display:none; }
  .controls-rail { gap:8px; }
  .photo-nav button,.photo-toolbar button,.observation-nav button { font-size:12px; }
}
@media (max-width:700px) {
  .topbar { position:sticky; top:0; z-index:4; height:auto; min-height:44px; grid-template-rows:auto auto; padding:6px 8px; grid-template-columns:minmax(0,1fr) auto; gap:5px; }
  .review-title { display:flex; gap:6px; }
  .patrol-car { width:44px; height:26px; }
  .brand-line { flex-direction:column; align-items:flex-start; gap:0; }
  .tool-tagline { font-size:11px; }
  .progress-text { display:block; font-size:10px; max-width:90px; }
  .top-actions { justify-content:flex-end; gap:5px; }
  .top-actions .export-slot { display:none; }
  .account-controls { width:145px; }
  .review-title .tool-title { display:block; font-size:15px; }
  .account-profile { max-width:120px; }
  .observation-nav { grid-column:1/-1; grid-row:2; gap:5px; }
  .observation-nav button { flex:1; padding:7px 5px; }
  .observation-nav button kbd { display:none; }
  .observation-position { min-width:0; max-width:90px; }
  #submit-review { min-width:0; }
  .observation-position { margin:0 2px 0 0; }
  .counter { font-size:11px; }
  .primary-button kbd { margin-left:3px; }
  .workspace { display:flex; flex-direction:column; height:auto; }
  .review-workspace { overflow:visible; }
  .inspection-area { display:flex; flex-direction:column; height:auto; gap:8px; }
  .image-stage { width:100%; height:min(calc(100vw - 16px),50svh); aspect-ratio:auto; flex:none; }
  .controls-rail { height:auto; display:flex; flex-direction:column; gap:9px; overflow:visible; padding:0; }
  .classification { order:1; }
  .photo-controls { order:0; border-top:0; padding-top:0; }
  .photo-nav { display:flex; gap:6px; }
  .photo-nav button { flex:1; }
  .photo-toolbar button { flex:1; white-space:nowrap; }
  .zoom-display { font-size:11px; }
  .photo-information { font-size:11px; }
  .review-identification-row { order:2; }
  .review-comment-row { order:3; }
  .project-selection { order:4; }
  .save-status { order:5; }
  .categories { gap:8px; }
  .category { min-height:30px; padding:4px 5px; }
  .source-panel { overflow:visible; border-left:0; border-top:1px solid var(--line); }
}

.image-status { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px; } .image-quality { font-size:11px; color:#596459; }

/* Photo tools belong to the viewer; the middle column is for review inputs. */
.viewer-panel { position:relative; width:100%; height:var(--viewer-size); min-width:0; }
.viewer-panel .photo-controls { position:absolute; z-index:2; top:0; left:0; right:0; display:flex; flex-direction:row; align-items:center; gap:5px; padding:5px; border:0; border-bottom:1px solid var(--line); background:#f0f2f0; overflow-x:auto; scrollbar-width:thin; }
.viewer-panel .photo-nav { display:flex; flex:none; gap:4px; }
.viewer-panel .photo-toolbar { display:flex; flex-wrap:nowrap; gap:4px; }
.viewer-panel .photo-controls button { flex:none; white-space:nowrap; padding:4px 5px; font-size:12px; }
.viewer-panel .photo-controls kbd { display:none; }
.viewer-panel .photo-nav kbd { display:inline; }
.viewer-panel #original { flex:none; }
.viewer-footer { position:absolute; z-index:2; bottom:0; left:0; right:0; padding:4px 6px; background:#f0f2f0; display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,40%); gap:6px; align-items:center; }
.viewer-footer .image-status { grid-column:1/-1; }
.viewer-footer .filmstrip { grid-column:1; grid-row:2; }
.viewer-footer .photo-information { grid-column:2; grid-row:2; font-size:10px; gap:3px; max-height:68px; overflow-y:auto; }
@media (max-width:700px) {
  .viewer-panel { height:auto; flex:none; }
  .viewer-panel .image-stage { height:min(calc(100vw - 16px),50svh); }
  .viewer-panel .photo-controls { gap:3px; padding:3px; }
  .viewer-panel .photo-controls button { font-size:11px; padding:4px; }
  .viewer-footer { position:static; display:flex; flex-wrap:wrap; padding:4px 0; background:#fff; }
  .viewer-footer .filmstrip { flex:1; }
  .viewer-footer .photo-information { display:none; }
}