/*
  File Purpose: Wearable chassis shells for Face Concepts board and Face Base.
  Primary: Apple squircle, Pixel round, Samsung bezel-ring, Pebble soft-rect.
  I/O: Board sets data-chassis on an ancestor; Face Base uses .dial.case-watch-*.
  Stack: CSS custom properties + finish metal via --finish / --bezel-*.
*/

/* ===== Face Concepts board (.case / .crown / .sidebtn / .screen) ===== */

[data-chassis="apple"] .case,
.case {
  --chassis-case-r: 31%;
  --chassis-screen-r: 29%;
  --chassis-pad: 4px;
  aspect-ratio: 198 / 244;
  border-radius: var(--chassis-case-r);
  padding: var(--chassis-pad);
}

[data-chassis="apple"] .screen,
.case .screen {
  border-radius: var(--chassis-screen-r);
}

[data-chassis="apple"] .crown,
.case .crown {
  top: 31%;
  width: 6px;
  height: 13%;
  border-radius: 2px 3px 3px 2px;
  right: -4px;
}

[data-chassis="apple"] .sidebtn,
.case .sidebtn {
  display: block;
  top: 47%;
  width: 4px;
  height: 11%;
  border-radius: 2px;
  right: -4px;
}

[data-chassis="apple"] .case::before,
[data-chassis="apple"] .crown.crown--secondary {
  display: none;
}

/* Pixel Watch — true circle, dual crown stack */
[data-chassis="pixel"] .case {
  --chassis-case-r: 50%;
  --chassis-screen-r: 50%;
  --chassis-pad: 5px;
  aspect-ratio: 1 / 1;
  width: min(100%, 200px);
  border-radius: 50%;
  padding: var(--chassis-pad);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px color-mix(in srgb, var(--finish, #2a2e35) 40%, #fff);
}

@media (max-width: 679px) {
  [data-chassis="pixel"] .case { width: min(38vw, 150px); }
}

[data-chassis="pixel"] .screen {
  border-radius: 50%;
}

[data-chassis="pixel"] .crown {
  top: 28%;
  width: 7px;
  height: 11%;
  border-radius: 3px;
  right: -5px;
}

/* Board mockups use a single crown control — a second knurled stack read as a
   duplicate side knob next to the interactive crown. */
[data-chassis="pixel"] .sidebtn {
  display: none;
}

[data-chassis="pixel"] .case::before {
  display: none;
}

/* Samsung Gear / Galaxy Watch — circle + rotating bezel ring + side key */
[data-chassis="samsung"] .case {
  --chassis-case-r: 50%;
  --chassis-screen-r: 50%;
  --chassis-pad: 11px;
  aspect-ratio: 1 / 1;
  width: min(100%, 208px);
  border-radius: 50%;
  padding: var(--chassis-pad);
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 58%,
      color-mix(in srgb, var(--finish), #000 25%) 59%,
      color-mix(in srgb, var(--finish), #fff 18%) 72%,
      color-mix(in srgb, var(--finish), #000 35%) 86%,
      var(--finish) 100%
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--finish), #ffffff 28%) 0%,
      var(--finish) 44%,
      color-mix(in srgb, var(--finish), #000000 34%) 100%
    );
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

@media (max-width: 679px) {
  [data-chassis="samsung"] .case { width: min(40vw, 156px); }
}

[data-chassis="samsung"] .case::before {
  content: "";
  position: absolute;
  inset: 5.5%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--finish), #fff 22%) 0deg 2.2deg,
    transparent 2.2deg 6deg
  );
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 69% 92%, transparent 93%);
  mask: radial-gradient(circle, transparent 68%, #000 69% 92%, transparent 93%);
  opacity: 0.85;
}

[data-chassis="samsung"] .screen {
  border-radius: 50%;
}

[data-chassis="samsung"] .crown {
  top: 38%;
  width: 5px;
  height: 16%;
  border-radius: 2px;
  right: -4px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--finish), #fff 40%),
    color-mix(in srgb, var(--finish), #000 35%)
  );
}

[data-chassis="samsung"] .sidebtn {
  display: none;
}

/* Pebble — soft rectangle, flat chrome, top-right button */
[data-chassis="pebble"] .case {
  --chassis-case-r: 12%;
  --chassis-screen-r: 8%;
  --chassis-pad: 7px;
  aspect-ratio: 5 / 4;
  width: min(100%, 220px);
  border-radius: 14px;
  padding: var(--chassis-pad);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--finish), #ffffff 35%) 0%,
    var(--finish) 48%,
    color-mix(in srgb, var(--finish), #000000 28%) 100%
  );
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.48),
    0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}

@media (max-width: 679px) {
  [data-chassis="pebble"] .case { width: min(42vw, 168px); }
}

[data-chassis="pebble"] .case::before {
  display: none;
}

[data-chassis="pebble"] .screen {
  border-radius: 8px;
}

[data-chassis="pebble"] .crown {
  top: 18%;
  width: 5px;
  height: 14%;
  border-radius: 2px;
  right: -4px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--finish), #fff 45%),
    color-mix(in srgb, var(--finish), #000 30%)
  );
}

[data-chassis="pebble"] .sidebtn {
  display: none;
}

/* ===== Face Base dial hosts (.dial.case-watch-*) ===== */

.dial.case-watch-pixel,
.dial.case-watch-samsung {
  --case-r: 50%;
  --screen-r: 50%;
  width: var(--dial-size);
  height: var(--dial-size);
  min-width: 0;
  margin-inline: 0.85rem;
}

.dial.case-watch-pixel {
  --watch-pad: 3.8%;
}

.dial.case-watch-samsung {
  --watch-pad: 9.5%;
}

.dial.case-watch-pebble {
  --case-r: 12%;
  --screen-r: 8%;
  --watch-pad: 4.2%;
  width: calc(var(--dial-size) * 5 / 4);
  height: var(--dial-size);
  min-width: 0;
  margin-inline: 0.85rem;
}

.dial.case-watch-pixel .layer-case,
.dial.case-watch-samsung .layer-case,
.dial.case-watch-pebble .layer-case {
  border-radius: var(--case-r);
  overflow: visible;
}

.dial.case-watch-pixel .dial-shadow,
.dial.case-watch-samsung .dial-shadow {
  inset: 8%;
  border-radius: 50%;
}

.dial.case-watch-pebble .dial-shadow {
  inset: 6% 5% 2% 5%;
  border-radius: var(--case-r);
}

.dial.case-watch-pixel .dial-bezel,
.dial.case-watch-samsung .dial-bezel,
.dial.case-watch-pebble .dial-bezel {
  inset: 0;
  border-radius: var(--case-r);
  clip-path: none;
  background:
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--bezel-hi) 42%, var(--bezel-mid)) 0%,
      var(--bezel-mid) 42%,
      color-mix(in srgb, var(--bezel-lo) 70%, #000) 100%
    );
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 color-mix(in srgb, var(--bezel-hi) 45%, transparent),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px color-mix(in srgb, #000 55%, transparent);
}

.dial.case-watch-samsung .dial-bezel {
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 52%,
      color-mix(in srgb, var(--bezel-lo) 80%, #000) 54%,
      color-mix(in srgb, var(--bezel-hi) 50%, var(--bezel-mid)) 68%,
      color-mix(in srgb, var(--bezel-lo) 70%, #000) 84%,
      var(--bezel-mid) 100%
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--bezel-hi) 42%, var(--bezel-mid)) 0%,
      var(--bezel-mid) 50%,
      color-mix(in srgb, var(--bezel-lo) 70%, #000) 100%
    );
}

.dial.case-watch-samsung .dial-bezel::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--bezel-hi) 55%, #fff) 0deg 2deg,
    transparent 2deg 6deg
  );
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 90%, transparent 91%);
  mask: radial-gradient(circle, transparent 62%, #000 63% 90%, transparent 91%);
  opacity: 0.8;
  box-shadow: none;
}

.dial.case-watch-pixel .dial-bezel::before,
.dial.case-watch-pebble .dial-bezel::before {
  content: "";
  position: absolute;
  inset: 1.1%;
  border-radius: calc(var(--case-r) - 1%);
  pointer-events: none;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #000 75%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--bezel-lo) 80%, #000);
}

.dial.case-watch-pixel .dial-bezel::after,
.dial.case-watch-samsung .dial-bezel::after,
.dial.case-watch-pebble .dial-bezel::after {
  inset: var(--watch-pad);
  border-radius: var(--screen-r);
  clip-path: none;
  background:
    radial-gradient(circle at 32% 28%, var(--face-hi) 0%, var(--face-mid) 42%, var(--face) 78%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.88),
    inset 0 10px 22px var(--groove),
    inset 0 -6px 14px var(--rim-light),
    inset 0 0 48px color-mix(in srgb, #000 32%, transparent);
}

.dial.case-watch-pebble .dial-bezel::after {
  border-radius: 8px;
}

.dial.case-watch-pixel .watch-hardware,
.dial.case-watch-samsung .watch-hardware,
.dial.case-watch-pebble .watch-hardware {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.dial.case-watch-pixel .watch-crown,
.dial.case-watch-pixel .watch-sidebtn,
.dial.case-watch-samsung .watch-crown,
.dial.case-watch-pebble .watch-crown {
  position: absolute;
  right: -3.2%;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bezel-hi) 55%, #fff) 0 1.2px,
    color-mix(in srgb, var(--bezel-lo) 70%, #000) 1.2px 2.4px
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.55);
}

.dial.case-watch-pixel .watch-crown {
  top: 28%;
  width: 3.6%;
  height: 11%;
  border-radius: 3px;
}

.dial.case-watch-pixel .watch-sidebtn {
  top: 44%;
  right: -3.2%;
  width: 3.6%;
  height: 11%;
  border-radius: 3px;
}

.dial.case-watch-samsung .watch-crown {
  top: 38%;
  width: 2.8%;
  height: 16%;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bezel-hi) 40%, var(--bezel-mid)),
    color-mix(in srgb, var(--bezel-lo) 75%, #000)
  );
}

.dial.case-watch-samsung .watch-sidebtn {
  display: none;
}

.dial.case-watch-pebble .watch-crown {
  top: 18%;
  width: 2.6%;
  height: 14%;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bezel-hi) 45%, var(--bezel-mid)),
    color-mix(in srgb, var(--bezel-lo) 70%, #000)
  );
}

.dial.case-watch-pebble .watch-sidebtn {
  display: none;
}

.dial.case-watch-pixel .layer-plate,
.dial.case-watch-pixel .layer-dress,
.dial.case-watch-samsung .layer-plate,
.dial.case-watch-samsung .layer-dress,
.dial.case-watch-pebble .layer-plate,
.dial.case-watch-pebble .layer-dress {
  inset: var(--watch-pad);
  border-radius: var(--screen-r);
  overflow: hidden;
}

.dial.case-watch-pebble .layer-plate,
.dial.case-watch-pebble .layer-dress {
  border-radius: 8px;
}

.dial.case-watch-pixel .dial-grain,
.dial.case-watch-pixel .dial-groove,
.dial.case-watch-pixel .dial-bays,
.dial.case-watch-pixel .dial-disc,
.dial.case-watch-pixel .dial-plate,
.dial.case-watch-pixel .dress-ticks,
.dial.case-watch-pixel .dress-hands,
.dial.case-watch-pixel .dial-sector-field,
.dial.case-watch-samsung .dial-grain,
.dial.case-watch-samsung .dial-groove,
.dial.case-watch-samsung .dial-bays,
.dial.case-watch-samsung .dial-disc,
.dial.case-watch-samsung .dial-plate,
.dial.case-watch-samsung .dress-ticks,
.dial.case-watch-samsung .dress-hands,
.dial.case-watch-samsung .dial-sector-field {
  border-radius: 50%;
}

.dial.case-watch-pebble .dial-grain,
.dial.case-watch-pebble .dial-groove,
.dial.case-watch-pebble .dial-bays,
.dial.case-watch-pebble .dial-disc,
.dial.case-watch-pebble .dial-plate,
.dial.case-watch-pebble .dress-ticks,
.dial.case-watch-pebble .dress-hands,
.dial.case-watch-pebble .dial-sector-field {
  border-radius: 8px;
}