/* This edition's declared theme. The installer, sign-in, confirmation, /setup,
   the Lobby, the run site and the development outbox read these --rer-* tokens;
   the app serves this file and its fonts. Pantry's look: matte stoneware tiles,
   one aubergine glaze, the accountant's double rule (public/pantry.css). */
:root {
  --rer-font-body: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', Arial, sans-serif;
  --rer-font-heading: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', Arial, sans-serif;
  --rer-page: #FBFAF8;
  --rer-surface: #FFFFFF;
  --rer-text: #1A1A1B;
  --rer-muted: #5B5753;
  --rer-border: #8A8580;
  --rer-focus: #41203C;
  --rer-link: #41203C;
  --rer-radius: 14px;
  --rer-accent: #41203C;
  --rer-accent-text: #FFFFFF;
  --rer-wordmark-weight: 700;
  --rer-logo: url('/brand/mark.svg');

  /* Pantry's palette and materials, shared by the app (pantry.css), the run site and the frames below. */
  --paper: var(--rer-page); --surface: var(--rer-surface); --ink: var(--rer-text); --muted: var(--rer-muted); --field: var(--rer-border);
  --stone: #E2DFDB; --stone-edge: #CFCBC6; --line: #E3E0DC; --pill: #212122;
  --glaze: var(--rer-accent); --glaze-hover: #5A2D53; --glaze-tint: #F1E9EF; --on-glaze: var(--rer-accent-text);
  --warn-ink: #7A4A12; --warn-tint: #F6EEE2; --bad-ink: #8E2430; --bad-tint: #F7E9EA;
  --texture: url('/brand/stone.png') 0 0 / 256px;
  --gloss: inset 0 1px 0 rgba(255, 255, 255, .18);
  --double-rule: linear-gradient(var(--glaze), var(--glaze)) left bottom / 100% 2px no-repeat, linear-gradient(var(--glaze), var(--glaze)) left calc(100% - 5px) / 100% 2px no-repeat;
  --card-shadow: 0 1px 0 var(--stone-edge), 0 6px 18px rgba(26, 26, 27, .06);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 var(--stone-edge), 0 14px 26px rgba(26, 26, 27, .10);
  --font: var(--rer-font-body);
}

/* Sign-in, confirmation and first-run setup: a stoneware card; the sign-in frame
   (main > .brand) adds three tilted blank tiles around it (decorative).
   html.rer-themed outranks each frame's own .rer-themed rules. */
html.rer-themed { background: var(--paper); overflow-x: clip; }
html.rer-themed body { isolation: isolate; overflow-x: clip; font-family: var(--rer-font-body); -webkit-font-smoothing: antialiased; }
html.rer-themed main {
  position: relative; max-width: 500px; padding: 52px 56px 56px; border: 1px solid #D9D5D0; border-radius: 18px;
  background: var(--texture), #F7F6F3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 0 #DAD6D1, 0 24px 44px rgba(26, 26, 27, .14);
}
html.rer-themed main:has(> .brand)::before, html.rer-themed main:has(> .brand)::after, html.rer-themed main:has(> .brand) > h1::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 22px;
  background: var(--texture), #ECEAE6; box-shadow: 0 4px 0 #DAD6D1, 0 18px 32px rgba(26, 26, 27, .08);
}
html.rer-themed main:has(> .brand)::before { width: 340px; height: 480px; left: -350px; top: 90px; transform: rotate(-12deg); }
html.rer-themed main:has(> .brand)::after { width: 340px; height: 480px; right: -350px; top: 170px; transform: rotate(12deg); }
html.rer-themed main:has(> .brand) > h1::before { width: 420px; height: 300px; left: 110px; top: -112px; transform: rotate(8deg); }
html.rer-themed .brand, html.rer-themed .rer-brand { gap: 18px; margin: 0 0 56px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
html.rer-themed .brand::before, html.rer-themed .rer-brand::before { width: 46px; height: 46px; }
html.rer-themed h1 { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; margin: 0 0 36px; color: var(--ink); }
html.rer-themed .rer-brand + h1 { font-size: 56px; margin-bottom: 20px; }
html.rer-themed p { color: var(--muted); font-size: 18px; }
html.rer-themed label { font-size: 17px; font-weight: 500; color: var(--ink); }
html.rer-themed input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 56px; margin-bottom: 28px; border: 1px solid var(--field); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 17px; }
html.rer-themed input:focus-visible { outline: 3px solid var(--glaze); outline-offset: 2px; }
html.rer-themed button, html.rer-themed .action { min-height: 60px; border: 0; border-radius: 999px; background: var(--glaze); color: var(--on-glaze); font-size: 18px; font-weight: 500; box-shadow: var(--gloss); }
html.rer-themed button:hover, html.rer-themed .action:hover { background: var(--glaze-hover); box-shadow: none; }
html.rer-themed button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
html.rer-themed :focus-visible { outline-color: var(--glaze); }
html.rer-themed .divider::before, html.rer-themed .divider::after { border-color: var(--stone-edge); }
/* First run lists the owner's name and email as read-only fields. */
html.rer-themed dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 24px; }
html.rer-themed main:has(> .rer-brand) { max-width: 580px; margin-top: 56px; }
html.rer-themed dt { color: var(--ink); font-size: 17px; font-weight: 500; }
html.rer-themed dd { box-sizing: border-box; margin: 0 0 18px; min-height: 56px; display: flex; align-items: center; padding: 10px 18px; border: 1px solid var(--stone-edge); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 18px; }
/* The confirmation checkbox is a round glaze control, as the picks draw it. */
html.rer-themed input[type=checkbox] { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--surface); cursor: pointer; }
html.rer-themed input[type=checkbox]:checked { border-color: var(--glaze); background: var(--glaze); box-shadow: inset 0 0 0 4px var(--surface), var(--gloss); }
@media (max-width: 1180px) {
  html.rer-themed main:has(> .brand)::before { left: -250px; }
  html.rer-themed main:has(> .brand)::after { right: -250px; }
}
@media (max-width: 480px) {
  html.rer-themed main { padding: 32px 24px 34px; }
  html.rer-themed main:has(> .rer-brand) { margin-top: 8px; }
  html.rer-themed .brand, html.rer-themed .rer-brand { font-size: 22px; margin-bottom: 32px; gap: 14px; }
  html.rer-themed .brand::before, html.rer-themed .rer-brand::before { width: 36px; height: 36px; }
  html.rer-themed h1 { font-size: 30px; margin-bottom: 24px; }
  html.rer-themed .rer-brand + h1 { font-size: 40px; }
  html.rer-themed p { font-size: 16px; }
  html.rer-themed input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 48px; margin-bottom: 22px; font-size: 16px; }
  html.rer-themed dd { min-height: 48px; margin-bottom: 14px; padding: 8px 16px; font-size: 16px; }
  html.rer-themed button, html.rer-themed .action { min-height: 52px; font-size: 17px; }
  /* Sign-in on a phone: the mark and title centred, three tiles fanned symmetrically behind the card. */
  html.rer-themed main:has(> .brand) { margin-top: 72px; }
  html.rer-themed main:has(> .brand) > .brand { justify-content: center; }
  html.rer-themed main:has(> .brand) > h1 { text-align: center; }
  html.rer-themed main:has(> .brand)::before { width: 150px; height: 190px; left: 0; top: -58px; transform: rotate(-12deg); }
  html.rer-themed main:has(> .brand)::after { width: 150px; height: 190px; right: 0; left: auto; top: -58px; transform: rotate(12deg); }
  html.rer-themed main:has(> .brand) > h1::before { width: 170px; height: 190px; left: calc(50% - 85px); top: -84px; transform: none; }
}