/* Shared interface geometry. Original product artwork is never redrawn.
   Native corner-shape is progressive: older engines retain the same radii.
   Reference: https://drafts.csswg.org/css-borders-4/#corner-shape */
:root {
  --grid-unit: 4px;
  --space-2: calc(2 * var(--grid-unit));
  --space-3: calc(3 * var(--grid-unit));
  --space-4: calc(4 * var(--grid-unit));
  --space-6: calc(6 * var(--grid-unit));
  --control-height: calc(11 * var(--grid-unit));
  --control-padding: var(--space-3);
  --control-content-height: 18px;
  --frame-inset: var(--space-2);
  /* Window profiles, not hardware measurements. CSS cannot identify an Apple
     model's physical screen radius. Resizing, rotation and split view all
     select the appropriate profile without a device list or fingerprinting. */
  --shape-lift: 0px;
  --radius-nested-control: var(--radius-control);
  --radius-small: var(--space-2);
  --radius-control: calc(5 * var(--grid-unit) + var(--shape-lift));
  --radius-frame: calc(5 * var(--grid-unit) + var(--shape-lift));
  --radius-panel: calc(var(--space-6) + var(--shape-lift));
  --radius-dialog: calc(var(--radius-control) + var(--space-6));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Symmetric side clearances preserve the grid in either landscape direction.
     Safe areas are exclusion zones, never proxies for the screen's radius. */
  --safe-inline: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --floating-offset: var(--space-4);
  scroll-padding-top: calc(110px + var(--safe-top));
}
@media (max-width: 1024px) {
  :root { --shape-lift: calc(var(--grid-unit) / 2); }
}
@media (max-width: 600px) {
  :root { --shape-lift: var(--grid-unit); }
}
@media (max-width: 720px) {
  :root { --floating-offset: 10px; }
}
[data-design] body {
  padding: var(--safe-top) var(--safe-inline) var(--safe-bottom);
}
[data-design] .site-header { top: var(--safe-top); }
[data-design] .skip:focus { top: calc(10px + var(--safe-top)); }

/* One shape rule also covers inset images, decorative charts, future controls
   and their pseudo-elements. A zero radius still produces a square corner. */
[data-design],
[data-design] *,
[data-design] *::before,
[data-design] *::after {
  corner-shape: squircle;
}
/* These are semantic point markers, not rounded rectangular surfaces. Icon
   circles and pencil paths likewise retain their original vector geometry. */
[data-design] .vr-draft-dot,
[data-design] .vr-journey-list li::before { corner-shape: round; }

[data-design] :is(.ask-button, .close-button, .circle-arrow, .question-list button) {
  border-radius: var(--radius-control);
  corner-shape: squircle;
}
/* Balance the complete label/icon group, not just the surrounding frame.
   18px content + 12px padding on each side + 2px border = 44px. */
[data-design] .ask-button {
  --control-inner-radius: max(0px, calc(var(--radius-control) - var(--control-padding)));
  min-height: var(--control-height);
  padding: var(--control-padding);
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  line-height: var(--control-content-height);
  border-radius: calc(var(--control-inner-radius) + var(--control-padding));
}
[data-design] .ask-button .ui-icon { width: var(--control-content-height); height: var(--control-content-height); }
[data-design] .ask-button .ask-label { line-height: var(--control-content-height); }
[data-design] :is(.close-button, .circle-arrow) {
  display: grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  min-width: var(--control-height);
  padding: var(--control-padding);
  margin-top: 0;
  line-height: 1;
}
[data-design] :is(.close-button, .circle-arrow) .ui-icon { width: var(--control-content-height); height: var(--control-content-height); }
[data-design] .question-list { gap: var(--space-2); }
[data-design] .question-list button {
  --question-inset: var(--space-4);
  --question-inner-radius: max(0px, calc(var(--radius-control) - var(--question-inset)));
  min-height: var(--control-height);
  padding: var(--question-inset);
  border-radius: calc(var(--question-inner-radius) + var(--question-inset));
  line-height: 20px;
}
[data-design] .dialog-head { gap: var(--space-4); }
[data-design] .appearance select {
  min-height: var(--control-height);
  line-height: var(--control-content-height);
  padding: var(--control-padding);
  /* The native arrow is part of the content group, so reserve its width. */
  padding-inline-end: calc(var(--control-padding) + 20px);
}
[data-design] :is(.appearance select, .archive-tag, .systems-visual span) {
  border-radius: var(--radius-small);
  corner-shape: squircle;
}
[data-design] :is(.project-stage, .case-cover, .decision, .flow-column, .screen-explanation, .vr-interaction-detail, .cs-project-image, .team-photo) {
  border-radius: var(--radius-panel);
  corner-shape: squircle;
}
[data-design] .cs-project-image { overflow: hidden; }
[data-design] .evidence-figure > button {
  border-radius: var(--radius-frame);
  corner-shape: squircle;
  overflow: hidden;
}
/* Keep the inset image's curve concentric with its surrounding media frame.
   Full-bleed images share the frame's radius instead of a second tiny curve. */
[data-design] .evidence-figure { --evidence-inset: 16px; }
[data-design='contact'] .evidence-figure { --evidence-inset: 12px; }
[data-design] :is(.vr-prototype-pair, .vr-feedback-pair) .evidence-figure,
[data-design] :is(.vr-board-figure, .vr-email-figure, .vr-performance-figure) {
  --evidence-inset: 0px;
}
[data-design] .evidence-figure img {
  border-radius: max(0px, calc(var(--radius-frame) - var(--evidence-inset)));
}
[data-design] dialog {
  --dialog-inset: var(--space-6);
  --dialog-inner-radius: var(--radius-control);
  padding: var(--dialog-inset);
  border-radius: calc(var(--dialog-inner-radius) + var(--dialog-inset));
  corner-shape: squircle;
  inset-block: var(--safe-top) var(--safe-bottom);
  inset-inline: var(--safe-inline);
  max-width: calc(100% - 2 * var(--safe-inline) - 24px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--dialog-viewport-gap, 50px));
}
[data-design] .image-dialog { --dialog-inset: var(--space-4); --dialog-viewport-gap: 24px; }
[data-design] .snapshot-dialog { --dialog-viewport-gap: 40px; }
[data-design] :is(.snapshot-dialog img, .image-dialog img, .team-photo img) {
  border-radius: var(--radius-control);
  corner-shape: squircle;
}
[data-design] :is(.intro-portrait, .phone-shot, .cs-flicker-screen, .cs-mobile-shot, .case-cover img, .screen-explanation > img, .vr-interaction-detail > img) {
  corner-shape: squircle;
}
[data-design] .intro-portrait { border-radius: calc(var(--radius-panel) - 2px); }
[data-design] .vr-cover .vr-cover-evidence img { border-radius: var(--radius-frame); }
[data-design] .vr-interaction-detail > img { border-radius: var(--radius-control); }
[data-design] .cs-portrait-print { border-radius: calc(var(--radius-panel) + 2px); corner-shape: squircle; }
[data-design] .cs-portrait-print > img { border-radius: calc(var(--radius-panel) - 10px); corner-shape: squircle; }

/* One frame inset on all four sides. Label padding is a second, consistent
   inset inside the control row, balancing text optically with its height.
   Outer radius = inner radius + frame inset; the border stays outside it. */
[data-design='contact'] .site-header {
  --floating-inset: var(--frame-inset);
  --floating-button-radius: var(--radius-nested-control);
  top: calc(var(--floating-offset) + var(--safe-top));
  padding: var(--floating-inset);
  border-radius: calc(var(--floating-button-radius) + var(--floating-inset));
  corner-shape: squircle;
}
[data-design='contact'] .site-header .header-inner {
  height: var(--control-height);
  gap: var(--space-3);
}
[data-design='contact'] .site-header .wordmark {
  height: var(--control-height);
  min-height: var(--control-height);
  flex-shrink: 0;
  padding-inline: var(--space-3);
  line-height: 1;
}
[data-design='contact'] .site-header .nav { gap: var(--grid-unit); flex-shrink: 0; }
[data-design='contact'] .site-header .nav a { height: var(--control-height); padding-inline: var(--space-3); }
[data-design='contact'] .site-header .ask-button {
  height: var(--control-height);
  min-height: var(--control-height);
  flex-shrink: 0;
  justify-content: center;
  padding-inline: var(--space-3);
  border-radius: var(--floating-button-radius);
  corner-shape: squircle;
}
@media (max-width: 720px) {
  [data-design='contact'] .site-header .header-inner { gap: var(--space-2); }
  [data-design='contact'] .site-header .nav { gap: 0; }
  [data-design='contact'] .site-header .nav a { padding-inline: var(--space-2); }
}
@media (max-width: 480px) {
  [data-design] .site-header .ask-button { width: var(--control-height); padding: 0; }
  [data-design] .site-header .ask-button .ask-label { display: none; }
  [data-design] .site-header .ask-button .ui-icon { display: block; width: 20px; height: 20px; }
}