/* Isolated 2010 camera chrome. The rest of Groven is not restyled here. */
dialog.grove-camera {
  --camera-apple: var(--retro-apple, #83b749);
  color-scheme: dark;
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  border-radius: 0; color: #edf1e8; background: #171b17;
  font: 14px/1.4 Arial, Helvetica, sans-serif;
  overflow: hidden; box-sizing: border-box;
  box-shadow: none; overscroll-behavior: contain;
}
.grove-camera::backdrop { background: #10130f; }
.grove-camera *, .grove-camera *::before, .grove-camera *::after { box-sizing: border-box; }
.grove-camera [hidden], .grove-camera-file { display: none !important; }
.grove-camera-shell { height: 100%; display: flex; flex-direction: column; }
.grove-camera-bar {
  flex: 0 0 auto; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: 12px; padding: max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  border-bottom: 1px solid #0a0e08; background: linear-gradient(#737c6c 0%,#424b3b 48%,#293323 50%,#1b2618 100%);
  box-shadow: inset 0 1px #a3ada0, 0 2px 8px #0007;
  z-index: 1;
}
.grove-camera-bar > div { text-align: center; min-width: 0; }
.grove-camera-brand { display: block; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-shadow: 0 -1px #152110; }
.grove-camera-brand i { color: #c7efa0; font-style: normal; }
.grove-camera h2 { margin: 1px 0 0; color: #f2f5ec; font: bold 17px/1.2 Arial, sans-serif; }
.grove-camera button {
  -webkit-appearance: none; appearance: none;
  min-width: 0; min-height: 44px; border: 1px solid #10160e;
  border-radius: 5px; padding: 10px 14px; margin: 0;
  background: linear-gradient(#697260,#414a39 48%,#303a29 50%,#3b4830);
  box-shadow: inset 0 1px #ffffff42, 0 1px #ffffff16;
  color: #fff; font: 700 12px/1.25 Arial, sans-serif; text-shadow: 0 -1px #0007;
  cursor: pointer; touch-action: manipulation;
  transition: opacity 140ms ease, box-shadow 140ms ease;
}
.grove-camera button:disabled { cursor: default; opacity: .42; }
.grove-camera button:active:not(:disabled) { box-shadow: inset 0 2px 5px #0005; }
.grove-camera :focus-visible { outline: 3px solid #d4f6aa; outline-offset: 3px; }
.grove-camera-bar > button:first-child { justify-self: start; }
.grove-camera-bar > button:last-child { justify-self: end; }
.grove-camera-workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 320px; padding: 24px; gap: 24px; }
.grove-camera-view {
  position: relative; min-height: 0; min-width: 0; overflow: hidden;
  display: grid; place-items: center; background: #0c100b;
  border: 1px solid #090b08; box-shadow: 0 1px #a3ac9755, inset 0 1px 12px #0009;
}
.grove-camera canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* WebKit may suspend frames for display:none video. Keep the actual video in
   the viewport, with the filtered canvas above it once a frame is ready. */
.grove-camera video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.grove-camera canvas { position: relative; z-index: 1; background: #0c100b; }
.grove-camera[data-stage="live"]:not([data-camera-painted="true"]) canvas { visibility: hidden; }
.grove-camera[data-stage="review"] video { visibility: hidden; }
.grove-camera[data-camera-facing="user"] video { transform: scaleX(-1); }
.grove-camera-enable, .grove-camera-view-label { z-index: 2; }
.grove-camera-enable { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; background: radial-gradient(ellipse,#3c5130,#11170e 70%); }
.grove-camera-enable:has(button[hidden]) { display: none; }
.grove-camera-lens { display: block; width: 90px; height: 90px; border-radius: 50%; border: 9px solid #747a6d; background: radial-gradient(circle at 40% 34%,#b3d88a 0 5%,#1e3924 8% 16%,#08170f 18% 27%,#395637 29% 31%,#06120c 33% 49%,#38533a 51% 54%,#0b1c13 56%); box-shadow: 0 0 0 2px #11180f,0 0 0 5px #47513e,0 12px 25px #0005,inset 0 2px 5px #0009; }
.grove-camera-view-label { position: absolute; bottom: 12px; left: 12px; color: #eaf6d9; text-shadow: 0 1px 3px #000; font: 9px/1.2 monospace; letter-spacing: .1em; pointer-events: none; }
.grove-camera-tools { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; padding-bottom: max(0px,env(safe-area-inset-bottom)); }
.grove-camera-caption { margin-bottom: 14px; }
.grove-camera-caption > p:first-child { margin: 0 0 12px; color: #c0cdaf; font: italic 20px/1.3 Georgia,serif; }
.grove-camera-status { color: #d5dfc7; font-size: 12px; line-height: 1.5; min-height: 36px; margin: 0; overflow-wrap: anywhere; }
.grove-camera-presets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 4px 0 20px; }
.grove-camera button[aria-pressed="true"], .grove-camera button.grove-camera-use { color: #14230a; background: linear-gradient(#d0e9ae,#a9ce76 49%,var(--camera-apple) 51%,#95c455); border-color: #516b36; text-shadow: 0 1px #ffffff80; box-shadow: inset 0 1px #f2ffe5,0 1px #0005; }
.grove-camera-adjust { display: grid; gap: 20px; margin: 0 0 24px; }
.grove-camera-adjust label { display: grid; grid-template-columns: minmax(0,1fr) 40px; align-items: center; gap: 3px 10px; font-size: 12px; }
.grove-camera-adjust label > span { grid-column: 1 / -1; }
.grove-camera-adjust input { width: 100%; min-width: 0; height: 34px; margin: 0; accent-color: var(--camera-apple); cursor: pointer; }
.grove-camera-adjust output { text-align: end; font: 11px monospace; color: #bbcca9; }
.grove-camera-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; align-items: center; margin-top: auto; }
.grove-camera button.grove-camera-shutter { justify-self: center; width: 76px; height: 76px; padding: 7px; border-radius: 50%; border: 1px solid #0d130b; background: linear-gradient(#f2f4ec,#a5ac9b 49%,#737d68 51%,#c5cbbd); box-shadow: inset 0 2px #fff,0 3px 5px #0008; }
.grove-camera-shutter > span:first-child { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(#d3e7ab,#a9ca72 48%,#769c43 51%,#9abd65); border: 1px solid #52693a; box-shadow: inset 0 1px #edffd6; }
.grove-camera[data-stage="review"] .grove-camera-live-actions, .grove-camera[data-stage="live"] .grove-camera-review-actions { display: none; }
.grove-camera-privacy { margin: 18px 0 0; color: #9ea995; font-size: 10px; line-height: 1.5; }
.grove-camera-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .grove-camera-bar { padding-inline: max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)); gap: 8px; }
  .grove-camera-bar > button { padding-inline: 10px; font-size: 11px; }
  .grove-camera-brand { font-size: 9px; }
  .grove-camera h2 { font-size: 15px; }
  .grove-camera-workspace { display: flex; flex-direction: column; padding: 0; gap: 0; overflow-y: auto; }
  .grove-camera-view { flex: 1 0 min(48dvh,390px); min-height: 180px; border-width: 0 0 1px; }
  .grove-camera-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .grove-camera-tools { flex: 0 0 auto; padding: 13px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); overflow: visible; background: linear-gradient(#3b4434,#1b2217); box-shadow: inset 0 1px #84907666; }
  .grove-camera-caption { margin-bottom: 10px; }
  .grove-camera-caption > p:first-child { display: none; }
  .grove-camera-status { min-height: 0; font-size: 11px; text-align: center; }
  .grove-camera-presets { margin: 0 0 10px; }
  .grove-camera-adjust { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 10px; }
  .grove-camera-actions { gap: 10px; }
  .grove-camera-privacy { text-align: center; margin-top: 10px; font-size: 10px; }
  .grove-camera[data-stage="review"] .grove-camera-view { flex-basis: min(44dvh,360px); }
}
@media (prefers-reduced-motion: reduce) { .grove-camera button { transition: none; } }