/* Thesis: white paper ground, one red accent (CLEAResult wordmark red, same as
   bpi.brenergy.net), Barlow superfamily only (Semi Condensed 700 for the one
   display size, Barlow for everything else), one structural gesture: the red
   rule across the top. Light only, no dark scheme, same as the BPI site. */
:root {
  --paper: #ffffff;
  --surface: oklch(97% 0.004 60);
  --line: oklch(88% 0.006 60);
  --text: oklch(25% 0.01 60);
  --dim: oklch(48% 0.012 60);
  --red: #d73927;
  --red-deep: #b32f1f;
  --red-tint: #fcebe8;
  --amber: oklch(62% 0.14 70);
  --blue: oklch(48% 0.1 240);
  --ink-on-color: #ffffff;
  --r: 4px;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.4 var(--font-body);
  color: var(--text);
  background: var(--paper);
  border-top: 4px solid var(--red);
  display: flex;
  flex-direction: column;
}
button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
#meta input:focus-visible, #meta select:focus-visible, #lb-comment:focus-visible { outline-offset: -1px; }

/* Header: wordmark on its own row, then four columns of job fields in two
   rows and a half. The action buttons sit on the tab row below. */
#bar {
  display: grid; gap: 8px 16px; padding: 16px 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
#bar .logo-row { grid-column: 1 / 5; display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
#bar .logo { height: 22px; width: auto; display: block; }
#collapse { border: 0; background: none; color: var(--red); font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: var(--r); cursor: pointer; }
#collapse:hover { background: var(--red-tint); }
body.collapsed #meta label { display: none; }
body.collapsed #bar .logo-row { margin: 0; }
#meta { display: contents; }
#meta label {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
}
#meta label.wide { grid-column: span 2; }
#meta input, #meta select {
  font-size: 15px; line-height: 1; height: 32px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--text); min-width: 0; width: 100%;
}
#meta input:hover, #meta select:hover { border-color: var(--dim); }
.btn {
  height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--text); font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.btn:hover { border-color: var(--red); color: var(--red); }
.btn.primary { background: var(--red); border-color: var(--red); color: var(--ink-on-color); font-weight: 600; }
.btn.primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--ink-on-color); }
.btn.has { border-color: var(--red); color: var(--red); }

/* Bucket tabs: text tabs on one hairline, the active one underlined in red,
   the action buttons pushed to the right end of the same row. */
#tabs {
  display: flex; align-items: flex-end; gap: 4px; padding: 0 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
#tabs > button {
  font-size: 14px; font-weight: 500; height: 40px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; background: transparent; color: var(--dim); cursor: pointer;
}
#tabs > button b { font-weight: 600; color: var(--text); margin-left: 4px; font-variant-numeric: tabular-nums; }
#tabs > button:hover { color: var(--text); }
#tabs > button.on { color: var(--text); border-bottom-color: var(--red); }
#actions { display: flex; gap: 8px; margin-left: auto; align-self: center; padding: 4px 0; }
/* The span is a flex item inside .btn, so its leading space survives only as pre. */
#actions .d { white-space: pre; }

#selbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 24px; font-size: 14px;
  background: var(--red-tint); border-bottom: 1px solid var(--line);
}
#selbar[hidden] { display: none; }
#selbar .lbl { color: var(--dim); margin-left: 8px; }
#selbar button {
  height: 28px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--text); cursor: pointer;
}
#selbar button:hover { border-color: var(--red); color: var(--red); }
#selbar button[data-b] { font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 0 8px; }
#selbar button.danger { color: var(--red); }
#selbar #sel-clear { margin-left: auto; }

/* Claims: one chip per cover-page finding, flag letter in a colored tab. */
#claims {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; font-size: 14px;
  border-bottom: 1px solid var(--line);
}
#claims .chip, #newclaim {
  display: inline-flex; align-items: center; gap: 8px; max-width: 360px; height: 32px; padding: 0 10px 0 0;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--text); cursor: pointer; text-align: left;
}
#claims .chip:hover { border-color: var(--red); }
#newclaim { padding: 0 12px; color: var(--red); border-color: var(--red); font-weight: 600; }
#newclaim:hover { background: var(--red); color: var(--ink-on-color); }
#claims .chip b {
  padding: 0 7px; height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 3px 0 0 3px; color: var(--ink-on-color); font-size: 11px; letter-spacing: .04em;
}
#claims .chip.W b { background: var(--red); }
#claims .chip.B b { background: var(--amber); }
#claims .chip.F b { background: var(--blue); }
#claims .chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#claims .chip i { font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; }
#claims .chip.on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
#claims .chip.over { box-shadow: 0 0 0 2px var(--red); }
#selbar select, #lb-claim {
  font-size: 14px; height: 28px; max-width: 320px; padding: 0 6px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--text);
}
#lb-claim { max-width: none; height: 32px; }

/* Claim dialog: same card as the BPI exit dialog, red rule on top. */
#cd { border: 0; border-top: 4px solid var(--red); padding: 0; width: min(720px, 94vw); max-height: 92vh; background: var(--paper); color: var(--text); border-radius: var(--r); }
#cd::backdrop { background: rgb(0 0 0 / .4); }
#cd form { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
#cd h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; }
#cd label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); flex: 1; min-width: 0; }
#cd .row { display: flex; gap: 16px; }
#cd select, #cd textarea {
  width: 100%; box-sizing: border-box; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--text); resize: vertical;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
#cd-fails { display: flex; flex-direction: column; max-height: 32vh; overflow: auto; font-size: 14px; border-top: 1px solid var(--line); }
#cd-fails label {
  flex-direction: row; align-items: baseline; gap: 12px; color: var(--text); padding: 8px 0; cursor: pointer;
  border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px;
}
#cd-fails label:hover { background: var(--surface); }
#cd-fails input { accent-color: var(--red); margin: 0 0 0 4px; }
#cd-fails b { white-space: nowrap; color: var(--dim); font-weight: 600; }
#cd-btns { display: flex; gap: 8px; justify-content: flex-end; }
#cd-btns button {
  height: 36px; padding: 0 16px; border: 0; border-radius: var(--r);
  background: none; color: var(--red); font-weight: 600; cursor: pointer;
}
#cd-btns button:hover { background: var(--red-tint); }
#cd-btns button.primary { background: var(--red); color: var(--ink-on-color); padding: 0 24px; }
#cd-btns button.primary:hover { background: var(--red-deep); }
#cd-btns button.danger { color: var(--dim); margin-right: auto; }

#wrap { flex: 1; overflow: auto; padding: 24px; }
#grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
  align-content: start;
}
.zone {
  display: none; margin: 0 0 16px; padding: 12px; text-align: center; font-size: 14px; color: var(--dim);
  border: 1px dashed var(--line); border-radius: var(--r);
}
.zone[data-zone=end] { margin: 16px 0 0; }
body.dragging .zone { display: block; }
.zone.over { border-color: var(--red); color: var(--red); }
.pick {
  position: absolute; top: 0; right: 0; padding: 8px; cursor: pointer;
}
.pick input { width: 18px; height: 18px; margin: 0; display: block; cursor: pointer; accent-color: var(--red); }
.card {
  background: var(--paper); border-radius: var(--r); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); position: relative;
}
.card:hover { border-color: var(--dim); }
.card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.card .cap {
  font-size: 13px; color: var(--dim); padding: 6px 8px 0; margin-bottom: 6px; min-height: 30px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card .cap.none { font-style: italic; }
.badge {
  position: absolute; top: 8px; left: 8px; height: 24px; padding: 0 7px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--ink-on-color);
}
.badge.W { background: var(--red); }
.badge.B { background: var(--amber); }
.badge.F { background: var(--blue); }
.badge.P { background: var(--dim); }
.card.dragging { opacity: .4; }
.card.over { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.card.sel { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
body.drop #grid { outline: 2px dashed var(--red); outline-offset: -8px; }

#empty { display: none; margin: auto; color: var(--dim); font-family: var(--font-display); font-weight: 700; font-size: 28px; }
body.none #empty { display: block; }
body.none #wrap { display: none; }

/* Lightbox: dark stage for the photo, paper sidebar for the controls. */
#lb { border: 0; padding: 0; width: 96vw; height: 94vh; max-width: none; max-height: none; background: var(--paper); border-radius: var(--r); }
#lb::backdrop { background: rgb(0 0 0 / .6); }
#lb[open] { display: grid; grid-template-columns: 1fr 320px; }
#lb-stage-wrap { position: relative; background: oklch(18% 0.01 60); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#lb-x {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .55); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
#lb-x:hover { background: var(--red); }
#lb-stage { position: relative; display: inline-block; line-height: 0; }
#lb-img { max-width: calc(96vw - 320px); max-height: 94vh; object-fit: contain; }
#lb-draw { position: absolute; left: 0; top: 0; pointer-events: none; }
/* touch-action none keeps a finger drag on the canvas as pointer events; without it
   the browser claims the touch for panning and cancels the draw at the first move. */
#lb-draw.live { pointer-events: auto; cursor: crosshair; touch-action: none; }
#lb-tools { display: flex; gap: 4px; align-items: center; }
#lb-tools button {
  height: 32px; min-width: 32px; padding: 0 6px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#lb-tools button:hover { border-color: var(--red); color: var(--red); }
#lb-tools button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#lb-tools button.on { background: var(--red); border-color: var(--red); color: var(--ink-on-color); }
#lb-tools button:disabled { opacity: .4; cursor: default; }
#lb-tools .sw { display: inline-flex; gap: 4px; margin: 0 4px; }
#lb-tools .sw button { width: 20px; min-width: 0; height: 20px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--line); }
#lb-tools .sw button.on { border-color: var(--text); }
#lb-rotate { margin-left: auto; font-size: 18px; }
#lb-side { padding: 16px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--line); }
#lb-name { font-size: 12px; color: var(--dim); word-break: break-all; }
#lb-keys { display: flex; gap: 4px; }
#lb-keys button {
  flex: 1; height: 40px; font-weight: 700; font-size: 13px; letter-spacing: .04em; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--text); cursor: pointer;
}
#lb-keys button:hover { border-color: var(--dim); }
#lb-keys button.on[data-b=W] { background: var(--red); border-color: var(--red); color: var(--ink-on-color); }
#lb-keys button.on[data-b=B] { background: var(--amber); border-color: var(--amber); color: var(--ink-on-color); }
#lb-keys button.on[data-b=F] { background: var(--blue); border-color: var(--blue); color: var(--ink-on-color); }
#lb-keys button.on[data-b=P] { background: var(--dim); border-color: var(--dim); color: var(--ink-on-color); }
#lb-comment {
  flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--text); resize: none;
}
#lb-count { font-size: 12px; color: var(--dim); text-align: right; margin-top: -6px; font-variant-numeric: tabular-nums; }
#lb-count.full { color: var(--red); font-weight: 700; }
#lb-nav { display: flex; align-items: center; justify-content: space-between; color: var(--dim); font-size: 13px; }
#lb-side button[type=button] {
  height: 32px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--text); cursor: pointer;
}
#lb-side button[type=button]:hover { border-color: var(--red); color: var(--red); }
#lb-del { color: var(--red); }

#status {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: var(--paper); padding: 8px 16px; border-radius: var(--r); font-size: 14px;
}

/* Phone: two field columns, codes only on the tabs, the four actions sharing one
   full row, the lightbox stacked photo over controls at the full viewport. */
@media (max-width: 720px) {
  #bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 16px; }
  #bar .logo-row { grid-column: 1 / 3; }
  #tabs, #claims, #selbar { padding-left: 16px; padding-right: 16px; }
  #tabs > button { padding: 0 8px; }
  .d { display: none; }
  #actions { flex: 1 1 100%; margin-left: 0; padding: 6px 0 8px; }
  #actions .btn { flex: 1; justify-content: center; padding: 0 6px; font-size: 14px; }
  #selbar { flex-wrap: wrap; }
  #selbar select { max-width: 100%; }
  #wrap { padding: 16px; }
  #grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .pick input { width: 22px; height: 22px; }
  /* dvh and margin 0: a 100vh dialog is taller than the phone viewport while the
     URL bar shows, and the centered overflow clips the top of the stage. */
  #lb { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
  #lb[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  #lb-img { max-width: 100vw; max-height: 48dvh; }
  #lb-side { border-left: 0; border-top: 1px solid var(--line); max-height: 52dvh; overflow: auto; padding: 12px 16px; }
  #lb-comment { min-height: 56px; }
  #lb-side button[type=button] { height: 36px; }
  #cd { width: 100vw; max-height: 100vh; border-radius: 0; }
  #cd form { padding: 16px; gap: 12px; }
  #cd .row, #cd-btns { flex-wrap: wrap; }
}