:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #203330; background: #f3f6f3; line-height: 1.55; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.topbar { background: #173f37; color: white; padding: 1.6rem max(1.2rem, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.6rem; margin-bottom: 0; letter-spacing: -.03em; }
h2 { font-size: 1.65rem; letter-spacing: -.025em; margin-bottom: .6rem; }
h3 { font-size: 1.15rem; }
.eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; margin-bottom: .35rem; }
.topbar .eyebrow { color: #b9d6c9; }
main { max-width: 1160px; padding: 1.5rem 1.2rem 3rem; margin: auto; }
footer { text-align: center; padding: 1rem; font-size: .8rem; color: #51655e; }
#session { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
#message { min-height: 1.6rem; overflow-wrap: anywhere; }
#message.error { color: #922a22; font-weight: 600; }
.card { background: white; border: 1px solid #d5dfd9; border-radius: 12px; padding: 1.5rem; box-shadow: 0 3px 12px #183b3005; }
.login-card { max-width: 470px; margin: 2rem auto; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
input, textarea, button, select { font: inherit; }
select { width: 100%; padding: .65rem; border: 1px solid #8a9e94; border-radius: 6px; background: white; }
#capture-workspace { margin-bottom: 1.3rem; }
.capture-list { margin: 1.3rem 0; }
#capture-detail { border-top: 1px solid #d5dfd9; padding-top: 1rem; }
#upload-files, details { margin: 1rem 0; }
summary { cursor: pointer; font-weight: 600; }
.camera-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
#camera-preview, #media-preview img, #media-preview video { display: block; max-width: 100%; max-height: 480px; margin: 1rem 0; }
.media-list { padding: 0; list-style: none; }
.media-list li { border: 1px solid #d5dfd9; border-radius: 6px; padding: 1rem; margin: .7rem 0; overflow-wrap: anywhere; }
.media-list button { margin-right: .6rem; }
#media-viewer { margin-top: 1rem; border-top: 1px solid #d5dfd9; padding-top: 1rem; }
input, textarea { width: 100%; border: 1px solid #8a9e94; border-radius: 6px; padding: .65rem .75rem; background: #fff; color: #203330; }
textarea { resize: vertical; }
#login-form input { margin-bottom: 1.1rem; }
button { background: #21624f; color: white; border: 1px solid #21624f; padding: .65rem 1.05rem; border-radius: 6px; cursor: pointer; font-weight: 600; }
button:hover { background: #174d3d; }
button.secondary { background: #fff; color: #174d3d; border-color: #a0b9ae; }
button.secondary:hover { background: #e9f2ec; }
button.danger { background: #8b2f28; border-color: #8b2f28; color: white; }
button.danger:hover { background: #6f211d; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: default; opacity: .6; }
:focus-visible { outline: 3px solid #c1760b; outline-offset: 3px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.current-banner { background: #e0eee5; padding: 1rem 1.25rem; border-left: 4px solid #21624f; border-radius: 4px; margin: 1.4rem 0; display: flex; gap: 1rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.3rem; margin-bottom: 1.3rem; }
.subject-list { list-style: none; padding: 0; margin: 0; }
.subject-list li + li { margin-top: .7rem; }
.subject-list button { width: 100%; text-align: left; overflow-wrap: anywhere; }
.subject-list small { display: block; font-weight: 400; margin-top: .25rem; }
dt { font-size: .8rem; font-weight: 700; color: #51655e; }
dd { margin: .15rem 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem; }
.form-actions { grid-column: 1 / -1; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; }
caption { text-align: left; font-weight: 600; margin-bottom: 1rem; }
td, th { padding: .8rem; border-bottom: 1px solid #d5dfd9; overflow-wrap: anywhere; }
th { background: #f3f6f3; }
.topbar { padding-block: .65rem; position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: .65rem; }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 5px; background: #dcebe0; color: #173f37; font-weight: 800; }
.topbar h1 { font-size: 1.15rem; letter-spacing: 0; }
#header-subject { border-right: 1px solid #76988b; padding-right: 1rem; }
main { padding-top: .8rem; }
#owner-panel { min-width: 0; }
.activity { position: sticky; top: 3.55rem; z-index: 15; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .25rem 1rem; align-items: center; background: #e5f2e9; border-left: 4px solid #21624f; padding: .7rem 1rem; margin-bottom: .8rem; box-shadow: 0 2px 5px #173f3712; }
.activity.error { position: static; background: #f9ebe7; border-left-color: #a83e30; }
.activity-main p { margin: 0; }
#activity-message, #activity-error { font-weight: 700; }
#activity-next { font-size: .9rem; color: #38594a; }
#activity-error { color: #822a22; }
#activity-action { max-width: 14rem; padding: .45rem .75rem; white-space: normal; }
.activity-steps { grid-column: 1; display: flex; flex-wrap: wrap; gap: .1rem .45rem; list-style: none; padding: 0; margin: .3rem 0 0; font-size: .78rem; }
.activity-steps li { color: #687d70; }
.activity-steps li:not(:last-child)::after { content: '›'; margin-left: .45rem; color: #879e90; }
.activity-steps li.done { color: #21624f; }
.activity-steps li.current { color: #173f37; font-weight: 700; }
#activity-details { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; font-size: .82rem; }
#activity-details summary { font-size: .82rem; }
#activity-extra { margin: .3rem 0 0; overflow-wrap: anywhere; }
.workspace-tabs { display: flex; border-bottom: 1px solid #cddbd2; gap: .2rem; margin-bottom: .8rem; }
.workspace-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #40584c; font-weight: 400; padding: .5rem .8rem; }
.workspace-tabs button:hover { background: #e8f2eb; }
.workspace-tabs button[aria-selected=true] { color: #173f37; border-bottom-color: #21624f; font-weight: 700; }
#candidate-count { border-radius: 1rem; background: #dcece1; color: #20533b; padding: .05rem .38rem; margin-left: .2rem; }
#panel-subjects, #panel-capture, #panel-candidates { min-width: 0; }
#panel-subjects h2, #panel-capture h2, #panel-candidates h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.current-banner { margin: .5rem 0 .8rem; padding: .5rem .8rem; }
.workspace-grid { gap: .8rem; margin-bottom: .8rem; }
.card { padding: .85rem 1rem; border-radius: 3px; box-shadow: none; }
.create-card summary { font-size: 1rem; }
.create-card form, #capture-create form { margin-top: .8rem; }
.capture-layout { display: grid; grid-template-columns: minmax(220px, 27%) minmax(0,1fr); gap: .8rem; align-items: start; }
.capture-list-box, .capture-detail-box { min-width: 0; }
.capture-list-box { padding: .55rem 0; }
.capture-list-box .section-heading { padding: 0 .85rem .45rem; }
.capture-list-box h3, .capture-detail-box h3 { margin: 0; }
.capture-list { margin: 0; }
#change-capture { display: none; }
.capture-list li + li { margin-top: 0; border-top: 1px solid #d5dfd9; }
.capture-list button { border: 0; border-left: 3px solid transparent; border-radius: 0; padding: .5rem .75rem; }
.capture-list button[aria-current=true] { border-left-color: #21624f; background: #eff8f2; }
.capture-list small { margin-top: 0; }
#capture-create { border-bottom: 1px solid #d5dfd9; padding-bottom: .45rem; margin-bottom: .55rem; }
#capture-placeholder { color: #51655e; margin: .2rem 0; }
#capture-detail { border-top: 0; padding-top: 0; }
#capture-status { margin: .1rem 0 .5rem; color: #51655e; font-size: .85rem; }
#capture-detail h4 { margin: .65rem 0 .35rem; border-top: 1px solid #d5dfd9; padding-top: .55rem; }
#capture-acquire { border-top: 1px solid #d5dfd9; padding-top: .65rem; }
#capture-acquire details { margin: .5rem 0; }
#media-empty { margin: .35rem 0; }
#media-list { margin: 0; }
#media-list li, #inventory-list li { border: 0; border-top: 1px solid #d5dfd9; border-radius: 0; padding: .55rem 0; margin: 0; }
.derived-frame-heading { color: #38594a; font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.derived-frame { background: #f5faf6; padding-inline: .45rem !important; }
.derived-frame-provenance { color: #38594a; }
.media-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.media-main p { margin: 0; }
.media-sub { color: #51655e; font-size: .82rem; margin: .1rem 0 .3rem; }
.media-actions, .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.media-actions button, .action-row button, .section-heading button { padding: .35rem .65rem; }
.media-job { font-size: .85rem; margin: .35rem 0 0; }
.candidate-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.candidate-head strong { font-size: .95rem; }
.candidate-tag { color: #20533b; background: #e3f2e7; font-size: .75rem; padding: .05rem .35rem; }
.candidate-evidence { font-size: .85rem; margin-top: .35rem; overflow-wrap: anywhere; }
.candidate-evidence p { margin: .2rem 0; }
#inventory-context { color: #51655e; font-size: .85rem; margin: 0; }
.review-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.review-actions[hidden] { display: none; }
.candidate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .8rem; }
.candidate-head, .candidate-actions, .candidate-evidence { grid-column: 1; }
.candidate-thumbnail { grid-column: 2; grid-row: 1 / span 3; width: 96px; min-height: 72px; padding: .2rem; align-self: start; }
.candidate-thumbnail img { display: block; max-width: 100%; max-height: 96px; margin: auto; }
.candidate-actions { display: flex; flex-wrap: wrap; align-items: start; gap: .35rem; }
.candidate-edit form { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0; }
.candidate-edit input { width: min(14rem, 100%); }
#candidate-image-dialog { width: min(96vw, 1200px); max-width: none; max-height: 94vh; padding: .7rem; border: 1px solid #60756b; border-radius: .5rem; }
#delete-capture-dialog { width: min(92vw, 34rem); border: 1px solid #60756b; border-radius: .5rem; padding: 1.2rem; }
#delete-capture-dialog::backdrop { background: rgb(10 25 19 / 60%); }
#delete-capture-error { color: #822a22; font-weight: 700; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
#candidate-image-dialog::backdrop { background: rgb(10 25 19 / 75%); }
.image-dialog-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-bottom: .4rem; }
.image-dialog-scroll { overflow: auto; max-height: calc(94vh - 5rem); text-align: center; }
.image-dialog-scroll img { display: block; max-width: 100%; max-height: calc(94vh - 5rem); width: auto; height: auto; margin: auto; object-fit: contain; }
#candidate-image-dialog.actual-size .image-dialog-scroll img { max-width: none; max-height: none; }
@media (max-width: 700px) { .topbar { align-items: flex-start; flex-direction: column; gap: .35rem; } .brand { min-height: 2rem; padding-right: 5.4rem; } #session { width: 100%; gap: .5rem; font-size: .8rem; white-space: nowrap; } #logout { position: absolute; top: .55rem; right: 1rem; padding: .35rem .5rem; } #header-subject { padding-right: .5rem; } .activity { top: 5.2rem; grid-template-columns: 1fr; row-gap: .2rem; } .activity-main { grid-row: 1; } #activity-action { grid-row: 2; justify-self: start; } .activity-steps { display: none; } #activity-details { grid-column: 1; grid-row: 4; justify-self: stretch; } .activity::after { content: attr(data-step); font-size: .78rem; grid-column: 1; grid-row: 3; justify-self: start; align-self: center; } .capture-layout, .workspace-grid, .field-grid { grid-template-columns: minmax(0,1fr); } #change-capture { display: inline-block; } .capture-list li:not(.selected) { display: none; } .capture-list.expanded li { display: list-item; } .card { padding: .7rem; } .capture-list-box { padding: .5rem 0; } .workspace-tabs button { padding: .45rem .55rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; } }