@layer reset, base, theme, components, utilities;

@layer reset {
  html,
  body,
  h1,
  h2,
  p,
  figure {
    margin: 0;
    padding: 0;
  }

  button,
  input {
    font: inherit;
    color: inherit;
  }
}

@layer theme {
  :root {
    --font-serif: "Cormorant Garamond", Georgia, serif;
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

    --color-linen-bg: #efe6d8;
    --color-espresso-deep: #1e120c;
    --color-espresso-warm: #3c2214;
    --color-caramel-amber: #c67d3b;
    --color-caramel-glow: #e59a54;
    --color-cream-ivory: #fbf7f0;
    --color-cream-soft: #f3eadc;
    --color-dock-surface: rgba(34, 22, 15, 0.72);
    --color-dock-border: rgba(251, 247, 240, 0.16);
    --color-pill-bg: rgba(251, 247, 240, 0.09);
    --color-pill-hover: rgba(251, 247, 240, 0.18);
    --color-pill-active-bg: #f6ede0;
    --color-pill-active-fg: #23140d;
    --color-text-primary: #fbf6ee;
    --color-text-muted: rgba(251, 246, 238, 0.68);
    --color-danger-tint: rgba(217, 94, 74, 0.24);
    --color-danger-border: rgba(242, 132, 114, 0.42);

    --radius-pill: 999px;
    --radius-dock: 16px;
    --shadow-dock: 0 10px 28px rgba(20, 11, 6, 0.28), 0 2px 6px rgba(20, 11, 6, 0.14);
  }
}

@layer base {
  html,
  body {
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    background-color: var(--color-linen-bg);
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    user-select: none;
    -webkit-font-smoothing: antialiased;
  }

  #app-shell {
    position: relative;
    inline-size: 100vw;
    block-size: 100vh;
    overflow: hidden;
  }

  #webgl-canvas {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    cursor: crosshair;
    touch-action: none;
  }
}

@layer components {
  /* Ultra-Slim Top Edge Corner Pills (< 32px height, open center) with iOS/Android safe area */
  .top-bar {
    position: fixed;
    inset-block-start: max(0.55rem, env(safe-area-inset-top));
    inset-inline: max(0.65rem, env(safe-area-inset-left)) max(0.65rem, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    pointer-events: none;
    z-index: 10;
  }

  .top-pill-left {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-block: 0.22rem;
    padding-inline: 0.65rem 0.32rem;
    border-radius: var(--radius-pill);
    background: var(--color-dock-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-dock-border);
    box-shadow: var(--shadow-dock);
  }

  .brand-title {
    font-family: var(--font-serif);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-cream-ivory);
    white-space: nowrap;
  }

  .top-sep {
    inline-size: 1px;
    block-size: 0.9rem;
    background: rgba(251, 247, 240, 0.18);
  }

  .camera-presets {
    display: flex;
    align-items: center;
    gap: 0.22rem;
  }

  .telemetry-bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    padding-block: 0.26rem;
    padding-inline: 0.68rem;
    border-radius: var(--radius-pill);
    background: var(--color-dock-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-dock-border);
    box-shadow: var(--shadow-dock);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .telemetry-item strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-cream-ivory);
    margin-inline-start: 0.15rem;
  }

  .telemetry-dot {
    color: var(--color-caramel-glow);
    font-weight: 700;
  }

  /* Ultra-Compact Floating Dock (Bottom Center) with iOS/Android safe area */
  .floating-dock {
    position: fixed;
    inset-block-end: max(0.55rem, env(safe-area-inset-bottom));
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: fit-content;
    max-inline-size: 96vw;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-block: 0.38rem;
    padding-inline: 0.62rem;
    border-radius: var(--radius-dock);
    background: var(--color-dock-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-dock-border);
    box-shadow: var(--shadow-dock);
    z-index: 20;
    transition: padding 0.2s ease, border-radius 0.2s ease;
  }

  .floating-dock.is-collapsed {
    border-radius: var(--radius-pill);
    padding-block: 0.26rem;
    padding-inline: 0.45rem;
  }

  .floating-dock.is-collapsed .collapsible-item {
    display: none;
  }

  .dock-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.42rem;
  }

  .dock-row-secondary {
    padding-block-start: 0.28rem;
    border-block-start: 1px solid rgba(251, 247, 240, 0.1);
  }

  .control-group {
    display: flex;
    align-items: center;
    gap: 0.28rem;
  }

  .group-label {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 600;
    color: var(--color-caramel-glow);
    white-space: nowrap;
  }

  .pill-group,
  .pill-segmented {
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }

  .pill-segmented {
    padding: 0.12rem;
    border-radius: var(--radius-pill);
    background: rgba(15, 9, 6, 0.42);
    border: 1px solid rgba(251, 247, 240, 0.1);
  }

  .dock-divider {
    inline-size: 1px;
    block-size: 1.15rem;
    background: rgba(251, 247, 240, 0.14);
  }

  /* Compact Pill Buttons */
  .pill-btn {
    appearance: none;
    border: 1px solid rgba(251, 247, 240, 0.12);
    border-radius: var(--radius-pill);
    padding-block: 0.22rem;
    padding-inline: 0.54rem;
    background: var(--color-pill-bg);
    color: var(--color-text-primary);
    font-size: 0.71rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, scale 0.12s ease;
  }

  .compact-btn {
    padding-block: 0.16rem;
    padding-inline: 0.48rem;
    font-size: 0.68rem;
  }

  .collapse-toggle-btn {
    padding-inline: 0.46rem;
    font-size: 0.68rem;
    color: var(--color-cream-soft);
    background: rgba(251, 247, 240, 0.06);
  }

  .pill-btn:hover:not(:disabled) {
    background: var(--color-pill-hover);
    border-color: rgba(251, 247, 240, 0.32);
  }

  .pill-btn:active:not(:disabled) {
    scale: 0.97;
  }

  .pill-btn:focus-visible {
    outline: 2px solid var(--color-caramel-glow);
    outline-offset: 2px;
  }

  .pill-btn[aria-pressed="true"] {
    background: var(--color-pill-active-bg);
    color: var(--color-pill-active-fg);
    border-color: var(--color-cream-ivory);
    box-shadow: 0 1px 6px rgba(251, 247, 240, 0.2);
  }

  .espresso-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #b86b2b, #e3964f);
    color: #190d07;
    border-color: #f4b678;
  }

  .cream-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #fffdf9, #eedec7);
    color: #21130b;
    border-color: #ffffff;
  }

  .accent-outline-btn {
    border-color: rgba(229, 154, 84, 0.48);
    color: var(--color-caramel-glow);
  }

  .preset-pour-btn {
    background: rgba(198, 125, 59, 0.18);
    border-color: rgba(229, 154, 84, 0.35);
    color: #f7dfc6;
  }

  .danger-btn {
    background: var(--color-danger-tint);
    border-color: var(--color-danger-border);
    color: #ffd7cf;
  }

  .danger-btn:hover:not(:disabled) {
    background: rgba(217, 94, 74, 0.38);
  }

  /* Compact Inline Range Sliders Following modern-web-guidance 'slider' Specification */
  .slider-group {
    display: flex;
    align-items: center;
    gap: 0.32rem;
  }

  .slider-output {
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-cream-soft);
    min-inline-size: 2.3rem;
    text-align: end;
  }

  input[type="range"] {
    --slider-track-size: 0.28rem;
    --slider-thumb-size: 0.78rem;
    --slider-track-radius: 999px;
    --slider-thumb-radius: 50%;
    --slider-track-color: rgba(251, 247, 240, 0.2);
    --slider-fill-color: var(--color-caramel-glow);
    --slider-thumb-color: var(--color-cream-ivory);
    --slider-direction: to right;

    &:dir(rtl) {
      --slider-direction: to left;
    }

    --attr-min: attr(min type(<number>), 0);
    --attr-max: attr(max type(<number>), 100);
    --control-value: attr(value type(<number>), 50);
    --slider-progress: calc(
      progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
    );

    appearance: none;
    inline-size: 78px;
    block-size: 1.15rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
  }

  @supports not (opacity: progress(1, 0, 100)) {
    input[type="range"] {
      --slider-progress: calc(
        (var(--control-value) - var(--attr-min)) /
        (var(--attr-max) - var(--attr-min)) * 100%
      );
    }
  }

  /* WebKit/Blink separate rule block */
  input[type="range"]::-webkit-slider-runnable-track {
    block-size: var(--slider-track-size);
    border: 0;
    border-radius: var(--slider-track-radius);
    background: linear-gradient(
      var(--slider-direction),
      var(--slider-fill-color) var(--slider-progress),
      var(--slider-track-color) var(--slider-progress)
    );
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: var(--slider-thumb-size);
    block-size: var(--slider-thumb-size);
    margin-block-start: calc(
      (var(--slider-track-size) - var(--slider-thumb-size)) / 2
    );
    border: 1.5px solid var(--color-caramel-amber);
    border-radius: var(--slider-thumb-radius);
    background: var(--slider-thumb-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }

  /* Firefox separate rule blocks */
  input[type="range"]::-moz-range-track {
    block-size: var(--slider-track-size);
    border: 0;
    border-radius: var(--slider-track-radius);
    background: var(--slider-track-color);
  }

  input[type="range"]::-moz-range-progress {
    block-size: var(--slider-track-size);
    border-radius: var(--slider-track-radius);
    background: var(--slider-fill-color);
  }

  input[type="range"]::-moz-range-thumb {
    inline-size: var(--slider-thumb-size);
    block-size: var(--slider-thumb-size);
    border: 1.5px solid var(--color-caramel-amber);
    border-radius: var(--slider-thumb-radius);
    background: var(--slider-thumb-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }

  input[type="range"]:focus-visible {
    outline: 2px solid var(--slider-fill-color);
    outline-offset: 2px;
  }
}

@media (max-width: 820px) {
  .dock-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .top-bar {
    gap: 0.35rem;
  }

  .top-pill-left {
    padding-block: 0.2rem;
    padding-inline: 0.48rem 0.25rem;
    gap: 0.32rem;
  }

  .brand-title {
    font-size: 0.82rem;
  }

  .top-sep {
    block-size: 0.75rem;
  }

  .camera-presets {
    gap: 0.16rem;
  }

  .compact-btn {
    padding-block: 0.14rem;
    padding-inline: 0.36rem;
    font-size: 0.64rem;
  }

  .telemetry-bar {
    padding-block: 0.2rem;
    padding-inline: 0.48rem;
    font-size: 0.65rem;
    gap: 0.25rem;
  }

  .telemetry-item-secondary {
    display: none;
  }

  .floating-dock {
    max-inline-size: 96vw;
    inline-size: min(96vw, 420px);
    padding-block: 0.28rem;
    padding-inline: 0.42rem;
    gap: 0.22rem;
  }

  .dock-row-primary {
    justify-content: center;
    gap: 0.2rem;
  }

  .dock-row-secondary {
    justify-content: center;
    gap: 0.24rem;
  }

  .group-label {
    font-size: 0.72rem;
  }

  .pill-btn {
    padding-block: 0.18rem;
    padding-inline: 0.40rem;
    font-size: 0.65rem;
  }

  .slider-group {
    gap: 0.22rem;
  }

  input[type="range"] {
    inline-size: 58px;
  }

  .slider-output {
    min-inline-size: 1.9rem;
    font-size: 0.62rem;
  }

  .dock-divider {
    display: none;
  }
}