/* chordigits/chordigits.css: the full-screen camera page, on shared/ui/page.css.
 * The camera picture fills the window behind the page; the hand drawings sit
 * on top of everything (they never take a tap). Theme variables only. */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* Everything lives in #stage, sized to the window by chordigits.js, or turned
   sideways on an upright phone so the page never turns vertical (as the
   Piano): body.turned, body.flipped the other way round. Sizes use the stage's
   own units (cqw, cqh) and body classes (compact, narrow), since vw, vh and
   media queries would measure the upright screen. The safe areas (notch, home
   bar) follow the turn, with a little extra room for rounded corners. */
#stage {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; container-type: size;
  --corner: 0px;
  --safe-t: env(safe-area-inset-top); --safe-r: env(safe-area-inset-right);
  --safe-b: env(safe-area-inset-bottom); --safe-l: env(safe-area-inset-left);
}
body.phone #stage { --corner: 14px; }
body.turned #stage {
  transform-origin: 0 0; transform: rotate(90deg) translateY(-100%);
  --safe-t: env(safe-area-inset-right); --safe-r: env(safe-area-inset-bottom);
  --safe-b: env(safe-area-inset-left); --safe-l: env(safe-area-inset-top);
}
body.turned.flipped #stage {
  transform: rotate(-90deg) translateX(-100%);
  --safe-t: env(safe-area-inset-left); --safe-r: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-right); --safe-l: env(safe-area-inset-bottom);
}
.centered-modal { width: min(420px, calc(100cqw - 32px)); max-height: calc(100cqh - 24px); }
#webcam, #overlay { position: fixed; inset: 0; width: 100%; height: 100%; }
/* The camera picture as in Choordination: inside the theme's frame, faded into
   the page colour (60%) and coloured by the theme, so each theme shows its world. */
#webcam, #cam-noise { position: fixed; inset: 0; z-index: 0; clip-path: inset(var(--fy-top) var(--fx) var(--fy-bottom) var(--fx) round var(--frame-radius)); }
#webcam {
  object-fit: cover; transform: scaleX(-1); opacity: 0; transition: opacity 0.4s ease, filter 0.5s ease;
  /* The theme's colours, then your own (Settings > Camera picture, shared/camera-look.js). */
  filter: var(--theme-filter,) brightness(var(--cam-brightness, 1)) contrast(var(--cam-contrast, 1)) saturate(var(--cam-saturation, 1)) hue-rotate(var(--cam-hue, 0deg));
}
body.camera-on #webcam { opacity: 0.6; }
body:not(.camera-on) #cam-noise { display: none; }
body[data-theme="liquid"] #webcam { --theme-filter: saturate(1.1) contrast(1.05); }
body[data-theme="y2k"] #webcam { --theme-filter: saturate(1.5) contrast(1.1); }
body[data-theme="pink"] #webcam { --theme-filter: saturate(1.45) contrast(1.02) brightness(1.15) hue-rotate(333deg); }
body[data-theme="bw"] #webcam { --theme-filter: grayscale(1) contrast(1.4); }
body[data-theme="retro"] #webcam { --theme-filter: sepia(0.8) hue-rotate(80deg) contrast(1.2) brightness(0.9); }
body[data-theme="rouge"] #webcam { --theme-filter: sepia(0.45) saturate(1.6) hue-rotate(-25deg) contrast(1.15) brightness(0.8); }
body[data-theme="snap"] #webcam { --theme-filter: sepia(0.35) saturate(1.25) contrast(0.95) brightness(1.1); }
/* Frames page.css doesn't draw: Monochrome's black bars, Rouge's dark red
   vignette, Retrosnap's instant-photo border (wider at the bottom). */
#theme-frame { z-index: 1; } /* between the picture and the controls, as in Choordination */
body[data-theme="bw"] #theme-frame { border-top: var(--fy-top) solid #000; border-bottom: var(--fy-bottom) solid #000; }
body[data-theme="rouge"] #theme-frame { box-shadow: inset 0 0 140px 30px rgba(42, 6, 16, 0.9); }
body[data-theme="snap"] { --frame-top: 12px; --frame-sides: 12px; --frame-bottom: 40px; --frame-radius: 2px; }
body[data-theme="snap"] #theme-frame { border: solid var(--color-panel); border-width: var(--fy-top) var(--fx) var(--fy-bottom); border-radius: calc(var(--frame-radius) + var(--fy-top)); box-shadow: inset 0 0 0 1px rgba(75, 48, 0, 0.18), inset 0 2px 10px rgba(75, 48, 0, 0.25); }
#overlay { z-index: 3; pointer-events: none; }
/* The chord's wave across the screen: over the picture, under the controls and the hands. */
#wave { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.page {
  position: absolute; inset: 0; z-index: 2; max-width: none; min-height: 0;
  padding: calc(var(--fy-top) + var(--space-4) + max(var(--safe-t), var(--corner) / 2)) calc(var(--fx) + var(--gutter) + max(var(--safe-r), var(--corner)))
           calc(var(--fy-bottom) + var(--space-4) + max(var(--safe-b), var(--corner) / 2)) calc(var(--fx) + var(--gutter) + max(var(--safe-l), var(--corner)));
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Over the camera, panels get a solid-enough backing to stay readable in every theme. */
body.camera-on :is(.tool-header .icon-btn, .cdg-bar, .cdg-chord, .cdg-status:not(:empty)) {
  background: color-mix(in srgb, var(--bg-page) 72%, transparent);
}
/* The name big at the top left, as Choordination's; the links free in the bottom corners. */
/* The name, big and in capitals: it shows in the videos people share. A tap on
   it opens About, as Choordination's name does. */
.title-btn { all: unset; cursor: pointer; display: inline-block; transition: transform 0.2s ease; }
.title-btn:hover { transform: scale(1.03); }
.title-btn:focus-visible { outline: 2px solid var(--color-right); outline-offset: 4px; border-radius: 6px; }
.tool-header .tool-title { font-size: clamp(30px, 5cqw, 58px); line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; text-shadow: var(--credit-shadow); }
.tool-header { flex-wrap: wrap; } /* a narrow window: the buttons go under the name, on the right */
.header-actions { margin-left: auto; }
.tool-footer { text-shadow: var(--credit-shadow); }

.cdg { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 0; }

/* The chord being played, big, in the theme's title font. */
.cdg-chord { text-align: center; padding: var(--space-2) var(--space-5); border-radius: var(--radius-panel); }
.cdg-name {
  font-family: var(--font-display); font-weight: var(--title-weight); letter-spacing: var(--title-spacing);
  color: var(--color-title); font-size: clamp(34px, 9cqh, 72px); line-height: 1.05;
}
.cdg-sub { font-size: 16px; font-weight: 700; color: var(--color-right); margin-top: 2px; }
.cdg-chord.fading { opacity: 0.35; transition: opacity 0.7s ease; }

/* Only when the camera or hand tracking fails: what happened, and the way on without it. */
.cdg-start { width: min(560px, 100%); display: flex; flex-direction: column; gap: var(--space-3); margin: auto 0; min-height: 0; overflow-y: auto; }
.cdg-start[hidden] { display: none; }
.cdg-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; line-height: 1.45; }
.cdg-how strong { color: var(--color-right); }
.cdg-start-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cdg-start-btns .btn { flex: 1 1 200px; }

.cdg-status { margin: 0; min-height: 1.3em; font-size: 15px; font-weight: 700; color: var(--color-right); text-align: center; padding: 2px 12px; border-radius: var(--radius-control); }

/* The seven numbers (twelve notes in Chromatic) and the kind of chord. */
.cdg-bar { width: min(980px, 100%); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.cdg-numbers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.cdg-numbers.chromatic { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-1); }
.num-btn { min-height: 54px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13px; }
.num-btn b { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.num-btn span { font-weight: 600; color: var(--color-text-inactive); overflow-wrap: anywhere; }
.cdg-numbers.chromatic .num-btn b { font-size: 16px; }
.cdg-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.cdg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.chip { min-height: 44px; padding: 6px 12px; font-size: 14px; }
/* Lit: specific enough to beat a theme's own button colours (Soft Pink's). */
body[data-theme] .cdg-bar :is(.num-btn.on, .chip[aria-pressed="true"]) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.num-btn.on span { color: inherit; }
/* While the no-camera card shows, it has the room. */
.cdg-start:not([hidden]) ~ .cdg-bar { display: none; }

/* Record button: a dot, the running time while recording. */
#record-btn svg { width: 16px; height: 16px; color: var(--color-bad); }
#record-btn.recording { width: auto; padding: 0 12px; gap: 6px; border-radius: var(--radius-control); }
.rec-time { font-size: 14px; font-variant-numeric: tabular-nums; }
.rec-voice { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; min-height: 44px; }
.rec-voice input { width: 20px; height: 20px; }

.cdg-busy { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: var(--bg-overlay); }
.cdg-busy[hidden] { display: none; }
.cdg-busy p { margin: 0; font-weight: 700; }


/* A short stage (a sideways phone): smaller and airier, so the camera picture
   and the hands have the screen (Drephie: room for the videos people post). */
body.compact .page { gap: var(--space-2); padding-top: calc(var(--fy-top) + var(--space-2) + max(var(--safe-t), var(--corner) / 2)); padding-bottom: calc(var(--fy-bottom) + var(--space-2) + max(var(--safe-b), var(--corner) / 2)); }
body.compact .tool-header .tool-title { font-size: 28px; }
body.compact .cdg-name { font-size: clamp(24px, 9cqh, 36px); }
body.compact .cdg-sub { font-size: 12px; }
body.compact .cdg-kinds { gap: var(--space-1) var(--space-4); }
body.compact .cdg-start { padding: var(--space-4); }
body.compact .cdg-bar { width: min(600px, 100%); padding: 6px; gap: 4px; }
body.compact.camera-on .cdg-bar { background: color-mix(in srgb, var(--bg-page) 55%, transparent); }
body.compact .cdg-numbers { gap: 4px; }
body.compact .num-btn { min-height: 36px; padding: 2px; font-size: 10px; }
body.compact .num-btn b { font-size: 15px; }
body.compact .chip { min-height: 30px; padding: 2px 9px; font-size: 12px; }
body.compact .tool-header .icon-btn { width: 36px; height: 36px; }
body.compact .tool-header .icon-btn svg { width: 18px; height: 18px; }
body.compact .header-actions { gap: 6px; }
body.compact .cdg-chord { padding: 2px 14px; }
body.compact .tool-footer { font-size: 11px; }
/* How to play on a short stage: small enough to read whole, its button always in view. */
body.compact #how-modal { padding: 14px 16px; gap: 8px; }
body.compact #how-modal .cdg-how { font-size: 13px; line-height: 1.35; gap: 4px; }
body.compact #how-modal .about-small { font-size: 12px; }
body.compact #how-modal .modal-header h2 { font-size: 17px; }
#how-ok { position: sticky; bottom: 0; flex: none; }
body.narrow .cdg-numbers.chromatic { grid-template-columns: repeat(6, minmax(0, 1fr)); }