/* Design tokens cloned from frontend/src/styles/global.scss so mockups
   feel native without the full Vue app shell. */
:root {
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px;
  --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
  --color-bg: #fdf6ee; --color-surface: #fff9f2; --color-surface-2: #f5ead8;
  --color-border: #e8d9c4; --color-text: #3a2e22; --color-text-muted: #8a7060;
  --color-primary: #c97c3a; --color-primary-fg: #ffffff;
  --color-secondary: #e8d9c4; --color-destructive: #c0392b;
  --color-lock: #c49a20;
  --shadow-card: 0 2px 4px rgba(58, 46, 34, 0.06);
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--text-base);
}
button { font-family: inherit; cursor: pointer; }

/* Mac-friendly viewport — show the mobile width centered on a wide screen */
.frame {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  position: relative;
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.topbar h1 { font-size: var(--text-xl); margin: 0; font-weight: 700; }
.topbar__tabs { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.topbar__tab {
  background: transparent; border: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.topbar__tab--active { color: var(--color-text); background: var(--color-surface-2); }

/* Generic chip / button */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted);
}
.chip--on { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
.chip--lock { background: #fff4d1; border-color: var(--color-lock); color: #6b5210; }
.chip--lock-on { background: var(--color-lock); color: white; border-color: var(--color-lock); }
.chip--device { padding: 3px 8px; font-size: var(--text-xs); }

/* Photo placeholder — colored gradient so each one is visually distinct */
.photo {
  display: block; width: 100%; aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #d4a37e, #8c5a3a);
  position: relative; overflow: hidden;
}
.photo--p1 { background: linear-gradient(135deg, #c97c3a, #6b3e1e); }
.photo--p2 { background: linear-gradient(135deg, #3a8a6e, #1f4d3d); }
.photo--p3 { background: linear-gradient(135deg, #8c6fc1, #4c3a82); }
.photo--p4 { background: linear-gradient(135deg, #e0a85c, #a5602c); }
.photo--p5 { background: linear-gradient(135deg, #5e9bb0, #2f5f72); }
.photo--p6 { background: linear-gradient(135deg, #d4a37e, #8c5a3a); }
.photo--p7 { background: linear-gradient(135deg, #6f8c5e, #3e5630); }
.photo--p8 { background: linear-gradient(135deg, #c1715a, #6e3a2d); }
.photo--p9 { background: linear-gradient(135deg, #a08fb1, #62506f); }
.photo--p10{ background: linear-gradient(135deg, #d3a87b, #84583a); }

/* Portrait-aspect variant for the photo simulating a portrait crop */
.photo--portrait { aspect-ratio: 3/4; }

/* Footer nav (decorative, just to look like the real PWA) */
.bottomnav {
  position: sticky; bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3); display: flex; gap: var(--space-4);
  justify-content: space-around; font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.bottomnav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bottomnav__item--active { color: var(--color-primary); }

/* Mockup note panel */
.note {
  background: #fff5dc;
  border: 1px dashed var(--color-lock);
  border-radius: var(--radius-sm);
  padding: var(--space-3); margin: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: #6b5210;
}
.note b { color: #3a2e22; }