/*
  Padkos brand stylesheet for the two public web pages served out of the API's wwwroot:
  /get/ (the store chooser) and /delete-account/ (the Google Play deletion resource).

  This is the v2 tribal dark identity, hand-written as plain CSS. It is NOT generated from the app's
  SCSS and there is no build step - these are static files. The token values below are copied verbatim
  from Padkos.App/src/theme/variables.scss; that file remains the source of truth. If a value changes
  there, change it here. Do not invent a second scale.

  Two rules this file exists to enforce, both carried from CLAUDE.md:

  * EVERY declaration references a token. The :root block below is the only place a raw colour value
    appears anywhere in the web side. A hex, a px font size or an ad-hoc margin further down is a bug.

  * SAME ORIGIN ONLY. Fonts and images are served from /brand/. Nothing here reaches a third-party
    host, because a store reviewer on a locked-down network has to be able to use these pages.

  Both consuming pages must stay readable if this file 404s - which is not hypothetical, the first
  deploy of the deletion page reached the server without its wwwroot at all. Keep their markup semantic
  and ordered.
*/

/* ---------------------------------------------------------------------------------------------- */
/* Fonts                                                                                           */
/* ---------------------------------------------------------------------------------------------- */

/*
  font-display: swap on all three. The fallback stack renders immediately and is replaced when the
  woff2 arrives; a slow or missing font never blanks the text.
*/
@font-face {
  font-family: 'Breul Grotesk';
  src: url('/brand/fonts/BreulGroteskA-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Breul Grotesk';
  src: url('/brand/fonts/BreulGroteskA-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Breul Grotesk';
  src: url('/brand/fonts/BreulGroteskA-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------------------------- */
/* Tokens - the only place a literal value appears                                                  */
/* ---------------------------------------------------------------------------------------------- */

:root {
  /* Palette. Values from variables.scss :root, client-confirmed 2026-07-15. */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue: #2f49ba;
  --color-gold: #ddb966;
  --color-green: #103e0d;
  --color-orange: #da6d13;
  --color-red: #b61414;
  --color-grey: #8a877a;

  /*
    Surfaces. Not in variables.scss - the app builds these from Ionic's shade/tint machinery, which
    does not exist here. They are the black background lifted just far enough to separate a card from
    the page, and a warning tint that keeps orange text above 4.5:1.
  */
  --color-surface: #121212;
  --color-surface-raised: #1c1c1c;
  --color-warn-surface: #2a1a08;

  /* Font. Same fallback stack the deletion page used before this file existed. */
  --font-family-base: 'Breul Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 0 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 4px 10px 0 rgba(0, 0, 0, 0.55);

  --line-height-base: 1.5;
  --line-height-tight: 1.25;

  --border-width: 1px;
  --border-width-accent: 5px;

  --content-width: 40rem;

  /*
    Store badge height. One value for both, and height rather than width, so the two badges are the same
    height by construction - a pair of hand-picked widths would drift the moment either vendor reissues
    its artwork. Both files bleed their pill to the full box, so equal box height IS equal badge height:
    measured 2026-08-13 on the rendered page at 48 px box, both pills 48 px of visible artwork.
    Re-measure if either badge file is replaced; do not assume.
  */
  --badge-height: 3rem;
}

/* ---------------------------------------------------------------------------------------------- */
/* Base                                                                                            */
/* ---------------------------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--space-lg) var(--space-md) var(--space-3xl);
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
}

h1,
h2,
h3 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-white);
}

h1 {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-sm);
}

h2 {
  font-size: var(--font-size-lg);
  margin: var(--space-lg) 0 var(--space-sm);
}

h3 {
  font-size: var(--font-size-base);
  margin: var(--space-md) 0 var(--space-xs);
}

p {
  margin: 0 0 var(--space-sm);
}

ul {
  margin: 0 0 var(--space-sm);
  padding-left: var(--space-lg);
}

li {
  margin-bottom: var(--space-xs);
}

a {
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: var(--border-width-accent) solid var(--color-gold);
  outline-offset: var(--space-xs);
}

strong {
  font-weight: var(--font-weight-bold);
}

/* Grey on black measures 5.8:1 - above the 4.5:1 AA floor for body text, and it is only ever used
   for supporting copy, never for the only copy that matters. */
.lede,
.hint,
.muted {
  color: var(--color-grey);
}

.hint {
  font-size: var(--font-size-sm);
}

.app-name {
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
}

.wordmark {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: auto;
  margin: 0 auto var(--space-lg);
}

[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------------------------- */
/* Components                                                                                      */
/* ---------------------------------------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-md);
}

.callout--warn {
  background: var(--color-warn-surface);
  border: var(--border-width) solid var(--color-orange);
  border-left-width: var(--border-width-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.callout--warn h2 {
  margin-top: 0;
  color: var(--color-orange);
}

.field {
  display: block;
  width: 100%;
  /* 1rem or larger. Anything smaller and iOS Safari zooms the page on focus, which on a form that
     asks for a phone number is a fight the user did not start. */
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) solid var(--color-grey);
  border-radius: var(--radius-sm);
  background: var(--color-black);
  color: var(--color-white);
}

.field::placeholder {
  color: var(--color-grey);
}

label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

.btn {
  display: block;
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: var(--color-black);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  text-align: center;
}

.btn--danger {
  background: var(--color-red);
  color: var(--color-white);
}

.btn--ghost {
  display: inline-block;
  width: auto;
  padding: 0;
  margin-top: var(--space-md);
  background: none;
  box-shadow: none;
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}

.btn:disabled {
  /* Opacity, not a lighter colour, and only on a control whose label is not the page's only
     instruction. Text that must stay readable is dimmed with an explicit token instead - see
     .badge--disabled. */
  opacity: 0.55;
  cursor: default;
}

.status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border: var(--border-width) solid var(--color-grey);
  background: var(--color-surface-raised);
}

.status.info {
  border-color: var(--color-blue);
}

.status.error {
  border-color: var(--color-red);
}

.status.done {
  border-color: var(--color-gold);
}

/*
  Tribal divider. banner.png, the real artwork lifted from the mockup, stretched to full width with
  no seam - the same asset and the same technique as .tribal-divider in the app's _patterns.scss.
  rectangle-thin.svg is NOT interchangeable with it: that one is a generated stand-in that paints a
  solid white band the mockup does not have.
*/
.tribal-divider {
  width: 100%;
  height: var(--space-md);
  margin: var(--space-lg) 0;
  background: url('/brand/img/banner.png') no-repeat;
  background-size: 100% 100%;
}

.badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/*
  Store badges. No frame of any kind - no border, no background, no padding. The badge artwork is the
  control; anything drawn around it is Padkos decorating somebody else's trademark, and both vendors
  prohibit that.

  Height is set and width follows, so the two badges are the same height by construction rather than by
  a pair of hand-picked widths that would drift the moment either asset is replaced.
*/
.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.badge img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--badge-height);
}

/*
  There is deliberately no disabled/dimmed badge variant. Both stores are live, and if one ever is not,
  the answer is to remove that badge rather than to grey it out - dimming, recolouring or framing store
  artwork is prohibited by both vendors, and opacity would fail AA on anything inside it.
*/

footer {
  color: var(--color-grey);
  font-size: var(--font-size-sm);
  text-align: center;
  margin-top: var(--space-xl);
}

/* ---------------------------------------------------------------------------------------------- */
/* Wider than a phone                                                                              */
/* ---------------------------------------------------------------------------------------------- */

/*
  Mobile first, and the only breakpoint is the one the badges need. Most of the chooser's traffic
  arrives from a phone camera; the desktop case is a person who scanned nothing and typed the URL.
*/
@media (min-width: 30rem) {
  .badges {
    flex-direction: row;
    justify-content: center;
  }

  .badge {
    flex: 1 1 0;
  }

  h1 {
    font-size: var(--font-size-3xl);
  }
}