/* Barback hi-fi v2: how pictures sit in the system's media slots, and the
   palette art.js draws bottles and fresh things from. Drinks are photographs
   (img/); screens never name a colour of their own.

   Taken from the Week 5 concept boards (the icon sheet and the photography
   direction): gold-rimmed glass, dark amber bottle glass, warm low light. */

:root {
  /* glass and light */
  --art-rim: #E2A84F;
  --art-rim-dk: #9B6A2C;
  --art-glass: #F7E9D2;
  --art-bottle-glass: #2A1C10;
  --art-shine: #FFFFFF;
  --art-shade: #000000;
  --art-glow: #F2A33E;
  --art-ice: #FFF7EA;

  /* bottles */
  --art-amber: #D6761C;     --art-amber-hi: #F2A64A;
  --art-mure: #5C1A3E;
  --art-bourbon: #C46A1C;
  --art-rye: #A44F16;
  --art-clear: #E9E4D2;
  --art-gin: #D9E6CF;
  --art-campari: #C8211B;
  --art-aperol: #EE6A1F;
  --art-vermouth: #6E1A1A;
  --art-dry: #E8DDA8;
  --art-pimm: #7E3417;
  --art-dark: #3A1A0C;
  --art-herbal: #7FA33A;
  --art-blue: #2E7FC0;
  --art-cream: #E8D9BC;
  --art-bitters: #5A1A10;
  --art-label: #EFE3C8;
  --art-label-dk: #2B1C10;
  --art-label-red: #A8261C;
  --art-label-green: #3E6B3A;
  --art-cap: #1C130C;
  --art-cork: #B98A57;
  --art-cork-dk: #7A5532;
  --art-foil: #C9A04E;
  --art-metal: #B9B2A6;
  --art-yellow-cap: #E9B826;
  --art-bubbly: #23331F;

  /* fresh */
  --art-lemon: #F2C531;     --art-lemon-dk: #B58A14;
  --art-lime: #8BBE3A;      --art-lime-dk: #4E7F1F;
  --art-orange: #F0861F;    --art-orange-dk: #B5520F;
  --art-pith: #FBEFCF;
  --art-pink: #EE7360;
  --art-leaf: #4E9A45;      --art-leaf-dk: #2D6630;
  --art-leaf-hi: #7CC067;
  --art-cherry: #A3141F;    --art-cherry-dk: #5E0A10;
  --art-berry: #3A1436;     --art-rasp: #D2344F;
  --art-stem: #6B4A22;
  --art-cucumber: #4F8A2E;  --art-cucumber-dk: #2E5A1A;
  --art-cucumber-in: #D8EBA8;
  --art-olive: #7D8D2E;
  --art-ginger: #D7B07A;
  --art-egg: #F3E6CF;
  --art-white: #F6F0E4;
  --art-carton: #F1E8D8;
  --art-apple: #7DB43C;
  --art-cranberry: #9E1A2C;
  --art-pineapple: #F1C23A;
  --art-tomato: #C9301E;
  --art-cola: #2A1209;
  --art-soda: #DCEBEB;
  --art-honey: #D99A1F;
  --art-grenadine: #B0102A;
  --art-coffee: #3B2314;
}

/* Media slots that hold art: the system's sizes, the art fills them. */
.media.art { background: var(--color-primary-tint); }
.media.art > svg { width: 100%; height: 100%; display: block; }
/* Photographs fill their slot; they stay dark in Light mode, as a photo would. */
.media.photo { background: var(--color-primary-tint); }
.media.photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.hero.photo > img { object-position: 50% 60%; }
/* Ingredients stand on the card itself, no tile behind them (as in the concept boards) */
.media.art.ing { background: none; border-radius: 0; overflow: visible; }
.media.art.ing > svg { width: 100%; height: 100%; margin: auto; }
.media.art.ing > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.media.art.bottle { width: 44px; height: 44px; }

/* The logo mark: the app icon from the logo board */
.mark.art { padding: 0; overflow: hidden; background: var(--art-bottle-glass); }
.mark.art > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Welcome: the splash logo over the photograph, in the upper third (2026-10-12
   reference): the app icon, the wordmark, a short gold rule, the line in gold. */
.full.welcome .body { overflow: hidden; justify-content: flex-start; padding-top: calc(var(--space-32) * 2 + var(--space-24)); }
.splash { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
/* a soft pool of shade so the gold line holds against the bokeh */
.splash::before { content: ""; position: absolute; inset: calc(-1 * var(--space-32)) calc(-1 * var(--space-32) * 2); z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--art-shade) 62%, transparent), transparent); pointer-events: none; }
.splash-icon { width: 72px; height: 72px; border-radius: var(--space-16); border: var(--stroke-hairline) solid var(--color-primary-text); overflow: hidden; background: var(--art-bottle-glass); box-shadow: 0 var(--space-8) var(--space-24) var(--color-shadow); }
.splash-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.splash .wordmark { font-size: calc(var(--space-32) + var(--space-8)); line-height: 1; letter-spacing: var(--space-8); margin-right: calc(-1 * var(--space-8)); padding-top: var(--space-16); }
.splash .rule { margin-block: var(--space-4); }
.splash .rule { display: block; width: calc(var(--space-32) * 4); height: var(--stroke-hairline); background: linear-gradient(to right, transparent, var(--color-primary-text) 20%, var(--color-primary-text) 80%, transparent); }
.full .splash .t-label.gold { color: var(--color-primary-text); letter-spacing: calc(var(--type-label-tracking) * 3); }

/* A full-bleed photograph-style hero: edge to edge, fading into the page */
.bleed { position: relative; margin-inline: calc(-1 * var(--space-16)); margin-top: calc(-1 * var(--space-8)); flex: none; }
/* 340 tall so the glass (its foot at 61 to 76% of a hero, depending on the drink) sits
   above the title that overlaps the bottom, and the fade starts under the foot. */
.bleed .media.hero { width: 100%; height: 340px; border-radius: 0; }
/* the photo fades out into whatever is behind it (the room, in either mode) */
.bleed .media.hero { -webkit-mask-image: linear-gradient(to bottom, var(--art-shade) 76%, transparent); mask-image: linear-gradient(to bottom, var(--art-shade) 76%, transparent); }
.bleed .over { position: absolute; left: var(--space-16); right: var(--space-16); bottom: var(--space-8); z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.phone .body > .bleed:first-child { margin-top: calc(-1 * var(--space-8)); }

/* A drink header card (Swap, skip or shop; Saved) */
.drinkhead { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-8); background: var(--color-surface); border: var(--stroke-hairline) solid var(--color-border); border-radius: var(--radius-card); }
.drinkhead .media.thumb { width: 80px; height: 80px; }
.drinkhead .stack { flex: 1; }

/* Stock up: the bottle is the hero of the card */
.unlock .media.thumb { width: 72px; height: 88px; }
.plus { font: var(--type-display); letter-spacing: var(--type-display-tracking); color: var(--color-primary-text); }

/* Full-screen photo screens (Welcome, Cheers): the portrait photograph fills the
   phone, shaded top and bottom so the bar and the words sit on it. These screens
   stay dark in Light mode, the way a photograph would. */
.phone.full { position: relative; }
.full .media.portrait { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: 0; background: var(--art-bottle-glass); }
.full .media.portrait > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.full .media.portrait::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--art-shade) 55%, transparent) 0%, transparent 16%, transparent 50%, color-mix(in srgb, var(--art-shade) 88%, transparent) 78%, var(--art-shade) 100%); }
.full .appbar, .full .body, .full .actionbar { position: relative; z-index: 1; background: transparent; }
.full .body { justify-content: flex-end; }
.full .t-display, .full .t-title, .full .t-label, .full .t-body { color: var(--art-ice); }
.full .muted { color: var(--art-ice); opacity: .78; }
.full .words { display: flex; flex-direction: column; gap: var(--space-8); padding-bottom: var(--space-8); }


/* Backdrop/Back bar (Week 4 system, 2026-10-12): the Welcome photo's back bar, blurred
   until only warm light is left (img/bg/backbar.jpg), behind every screen without a
   photograph of its own, under an 80% wash of color/background. Dark mode only: Light
   keeps its solid cream. Cards and rows keep their solid surfaces. */
:root { --bg-wash: color-mix(in srgb, var(--color-background) 80%, transparent); }
.phone:not(.full) {
  background: linear-gradient(var(--bg-wash), var(--bg-wash)), url("img/bg/backbar.jpg") center / cover no-repeat, var(--color-background);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .phone:not(.full) { background: var(--color-background); } }
:root[data-theme="light"] .phone:not(.full) { background: var(--color-background); }
.phone:not(.full) > .appbar, .phone:not(.full) > .actionbar, .phone:not(.full) > .tabbar { background: transparent; }

/* Light mode, The recipe: a dark photograph fading into cream turns grey under the
   name, so in Light the name sits just below the photo, on the page itself. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bleed .over { position: static; padding: var(--space-16) var(--space-16) 0; }
  :root:not([data-theme="dark"]) .bleed .media.hero { -webkit-mask-image: linear-gradient(to bottom, var(--art-shade) 76%, transparent); mask-image: linear-gradient(to bottom, var(--art-shade) 76%, transparent); }
}
:root[data-theme="light"] .bleed .over { position: static; padding: var(--space-16) var(--space-16) 0; }
:root[data-theme="light"] .bleed .media.hero { -webkit-mask-image: linear-gradient(to bottom, var(--art-shade) 76%, transparent); mask-image: linear-gradient(to bottom, var(--art-shade) 76%, transparent); }