/* VELTRA tokens in shadcn's variable contract, carried over from the design mock.
   Layout: one filtered grid; a photo opens in an overlay that holds the compare, the evidence and
   the decision. `primary` is Science Blue (the console's interactive colour); `brand` is the VELTRA
   wordmark blue #7CA0BF. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  --background:0 0% 100%;
  --foreground:342 23% 14%;
  --card:49 73% 97%;  --card-foreground:342 23% 14%;
  --popover:0 0% 100%; --popover-foreground:342 23% 14%;
  --primary:207 100% 43%; --primary-foreground:0 0% 100%;
  --brand:208 34% 62%; --brand-foreground:0 0% 100%;
  --secondary:49 40% 94%; --secondary-foreground:342 23% 14%;
  --muted:48 30% 95%; --muted-foreground:340 8% 42%;
  --accent:207 92% 95%; --accent-foreground:207 100% 30%;
  --destructive:11 62% 38%; --destructive-foreground:0 0% 100%;
  --success:140 44% 28%; --success-foreground:0 0% 100%;
  --warning:32 72% 33%; --warning-foreground:0 0% 100%;
  --soft-destructive:11 85% 94%; --soft-warning:36 85% 92%;
  --soft-success:140 40% 92%; --soft-primary:207 92% 94%;
  --border:45 20% 87%; --input:45 20% 84%; --ring:207 100% 43%;
  --radius:8px; --photo-ground:45 14% 90%; --scrim:342 23% 14%;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --background:340 12% 9%; --foreground:45 30% 93%;
  --card:340 11% 13%; --card-foreground:45 30% 93%;
  --popover:340 11% 15%; --popover-foreground:45 30% 93%;
  --primary:207 92% 66%; --primary-foreground:207 100% 12%;
  --brand:208 40% 68%; --brand-foreground:340 12% 9%;
  --secondary:340 9% 18%; --secondary-foreground:45 30% 93%;
  --muted:340 9% 17%; --muted-foreground:40 10% 66%;
  --accent:207 45% 22%; --accent-foreground:207 92% 84%;
  --destructive:11 82% 72%; --destructive-foreground:11 60% 12%;
  --success:140 46% 64%; --success-foreground:140 50% 10%;
  --warning:36 80% 66%; --warning-foreground:32 60% 12%;
  --soft-destructive:11 40% 18%; --soft-warning:34 40% 17%;
  --soft-success:140 30% 15%; --soft-primary:207 45% 20%;
  --border:340 8% 24%; --input:340 8% 28%; --ring:207 92% 66%;
  --photo-ground:340 8% 20%; --scrim:340 20% 4%;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --background:340 12% 9%; --foreground:45 30% 93%;
  --card:340 11% 13%; --card-foreground:45 30% 93%;
  --popover:340 11% 15%; --popover-foreground:45 30% 93%;
  --primary:207 92% 66%; --primary-foreground:207 100% 12%;
  --brand:208 40% 68%; --brand-foreground:340 12% 9%;
  --secondary:340 9% 18%; --secondary-foreground:45 30% 93%;
  --muted:340 9% 17%; --muted-foreground:40 10% 66%;
  --accent:207 45% 22%; --accent-foreground:207 92% 84%;
  --destructive:11 82% 72%; --destructive-foreground:11 60% 12%;
  --success:140 46% 64%; --success-foreground:140 50% 10%;
  --warning:36 80% 66%; --warning-foreground:32 60% 12%;
  --soft-destructive:11 40% 18%; --soft-warning:34 40% 17%;
  --soft-success:140 30% 15%; --soft-primary:207 45% 20%;
  --border:340 8% 24%; --input:340 8% 28%; --ring:207 92% 66%;
  --photo-ground:340 8% 20%; --scrim:340 20% 4%;
  color-scheme:dark;
}
body{background:hsl(var(--background));color:hsl(var(--foreground));margin:0;padding:0;
  font:13.5px "Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif}
.tnum{font-variant-numeric:tabular-nums}
.safe-x{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:hsl(var(--card))}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
.stick{position:sticky;top:calc(env(safe-area-inset-top,0px) + 94px)}
kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;padding:0 4px;border-radius:4px;
  background:hsl(var(--muted));border:1px solid hsl(var(--border));border-bottom-width:2px;color:hsl(var(--muted-foreground))}
.frame{position:relative;overflow:hidden;background:hsl(var(--photo-ground));max-width:100%}
.frame .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:background-size .18s}
.frame.zoom .img{background-size:260%}
.frame .img.is-empty::after{content:attr(data-empty);position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;color:hsl(var(--muted-foreground))}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
.toolbar-on-accent :focus-visible{outline-offset:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.hidescroll{overflow-x:auto}

.vbtn[aria-pressed="true"]{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 2px rgb(0 0 0 / .14)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;background:none;
  border:1px solid transparent;border-radius:calc(var(--radius) - 2px);cursor:pointer;
  color:hsl(var(--muted-foreground));font:inherit;font-weight:500}
.btn-ghost:hover{background:hsl(var(--secondary));color:hsl(var(--foreground))}
.btn-ghost:disabled{opacity:.45;cursor:default;background:none}
.btn-primary{display:inline-flex;align-items:center;height:32px;padding:0 14px;background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));border:0;border-radius:calc(var(--radius) - 2px);font:inherit;font-weight:600;cursor:pointer}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.5;cursor:default;filter:none}
.dbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:calc(var(--radius) - 2px);
  border:1px solid hsl(var(--border));background:hsl(var(--background));cursor:pointer;font:inherit;font-weight:600}
.dbtn:hover{border-color:currentColor}
.dbtn:disabled{opacity:.4;cursor:default;border-color:hsl(var(--border))}
.dbtn[aria-pressed="true"]{background:hsl(var(--soft-primary));border-color:hsl(var(--primary));box-shadow:inset 0 0 0 1px hsl(var(--primary))}
.chip{border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--secondary));color:hsl(var(--muted-foreground));
  padding:3px 11px;font:inherit;font-size:12px;cursor:pointer}
.chip[aria-pressed="true"]{background:hsl(var(--soft-success));border-color:hsl(var(--success));color:hsl(var(--success));font-weight:600}
.sec-ttl{display:block;font-family:Montserrat,"Noto Sans JP",sans-serif;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:hsl(var(--muted-foreground));margin-bottom:7px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12.5px;margin:0}
.kv dt{color:hsl(var(--muted-foreground))}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;border-radius:4px;padding:1px 7px;font-size:11px;font-weight:600;border:1px solid}
.b-risk{background:hsl(var(--soft-destructive));color:hsl(var(--destructive));border-color:hsl(var(--destructive))}
.b-warn{background:hsl(var(--soft-warning));color:hsl(var(--warning));border-color:hsl(var(--warning))}
.b-ok{background:hsl(var(--soft-success));color:hsl(var(--success));border-color:hsl(var(--success))}
.b-mute{background:hsl(var(--secondary));color:hsl(var(--muted-foreground));border-color:hsl(var(--border))}
.b-gone{background:hsl(var(--foreground));color:hsl(var(--background));border-color:hsl(var(--foreground))}
.th{text-align:left;padding:5px 8px;border-bottom:1px solid hsl(var(--border));font-family:Montserrat,sans-serif;
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--muted-foreground));font-weight:600}
.td{padding:5px 8px;border-bottom:1px solid hsl(var(--border))}
.num{text-align:right;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
tbody tr:hover{background:hsl(var(--secondary))}
.flt-lbl{font-family:Montserrat,"Noto Sans JP",sans-serif;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:hsl(var(--muted-foreground))}
.flt{height:32px;padding:0 9px;background-color:hsl(var(--background));border:1px solid hsl(var(--input));
  border-radius:calc(var(--radius) - 2px);font:inherit;color:hsl(var(--foreground))}
.flt::placeholder{color:hsl(var(--muted-foreground))}
/* A native select paints its arrow in its own gutter and ignores padding-right, so the chevron ends up
   flush against the border. Draw our own instead, with real room on both sides of it. */
select.flt,select#bulk-act{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23555c6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>")}
select.flt::-ms-expand,select#bulk-act::-ms-expand{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) select.flt,:root:not([data-theme="light"]) select#bulk-act{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a7aeba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>")}
}
:root[data-theme="dark"] select.flt,:root[data-theme="dark"] select#bulk-act{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a7aeba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>")}

/* tile: the body opens the photo, the checkbox selects it */
.tile{position:relative;overflow:hidden;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius)}
.tile[data-sel="true"]{border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--accent))}
.tile-open{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.tile-open:hover .tile-strip{background:hsl(var(--secondary))}
.tile-pick{position:absolute;left:8px;top:8px;z-index:2;width:22px;height:22px;border-radius:5px;cursor:pointer;
  background:hsl(var(--background));border:1px solid hsl(var(--input));display:grid;place-items:center;padding:0}
.tile-pick[aria-pressed="true"]{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.tile-pick svg{width:13px;height:13px;opacity:0}
.tile-pick[aria-pressed="true"] svg{opacity:1}

/* detail overlay */
.scrim{position:fixed;inset:0;z-index:50;background:hsl(var(--scrim)/.55);display:grid;place-items:start center;overflow-y:auto;
  padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.sheet{width:min(1180px,100%);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden}

/* ---------------------------------------------------------------- sign in
   Its own screen, NOT the .scrim/.sheet pair the photo detail uses: a modal overlay over an empty
   page reads as a dimmed backdrop over nothing, and --card (VELTRA off-white) is a panel tint that
   turns a full-width card beige. Plain background, one bordered card. */
.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: hsl(var(--background));
}
.signin-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}