/* ─────────────────────────────────────────────────────────────────────────
   Photogram — the design system, in one file.

   Until 2026-09-20 every page carried its own copy of these tokens and they
   had drifted: radius 24 against 26, hairlines at .10 against .12, and one
   white called --paper here, --glass there and --bg-2 on a third page. The
   app also used the system font stack while its own marketing site used
   Bricolage Grotesque, so the two halves of the product did not look related.

   Everything shared now lives here and every page links it. A page keeps only
   the rules that are genuinely its own — the camera stage, the photo viewer,
   the marketing layout. If you are about to paste a token into a page, put it
   here instead.

   TWO THINGS THAT ARE TESTED, so read before changing them:
   · --bg must equal pwa.THEME. guest.html also declares it inline, because
     test_the_theme_colour_matches_the_page_background greps that file.
   · partners.html must carry no <script> at all (test_pages, SCRIPTLESS).
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* ---- ground ---- */
  --bg:#FFF6EC;                 /* MUST equal pwa.THEME */
  --paper:#FFFFFF;
  --paper-2:#FFFBF4;            /* quiet panels: consent, callouts */
  --field:#FFFCF7;              /* input wells */

  /* ---- ink ---- */
  --ink:#17131F;
  --ink-2:#5C5566;              /* secondary text — 6.9:1 on paper */
  --ink-3:#6B6076;              /* captions — 5.4:1 on paper */
  --line:rgba(23,19,31,.12);
  --line-2:rgba(23,19,31,.20);

  /* ---- the three inks, and the darker sibling each one needs ----
     The bright values are FILLS. As text they fail: magenta 3.5:1, cyan
     2.5:1, yellow 1.6:1 against the 4.5:1 a 13px label needs. So anything
     carrying words — a link, a label, a button — uses the -ink value. */
  --cyan:#00B5D6;     --cyan-ink:#00707F;
  --magenta:#FF2D87;  --magenta-ink:#C2185B;
  --yellow:#FFC02E;   --yellow-ink:#8A6200;
  --mint:#12BE96;     --mint-ink:#0A7D63;
  --violet:#8B5CF6;
  --coral:#FF5C5C;
  --red:#E02D5A;      --red-ink:#C4234E;

  /* The one action colour. White on it measures 6.1:1.
     The old primary was dark ink on a magenta→orange gradient, which read as
     a disabled control — the single least obvious button on the screen was
     the one everybody had to press. */
  --brand:#C2185B;
  --brand-2:#9E1049;            /* hover / pressed */
  --brand-tint:#FFE4EF;         /* chips and soft backgrounds */

  /* Gradients survive for the marketing page, where nothing has to look
     tappable. They are not interface. */
  --grad-hot:linear-gradient(118deg,#FF2D87 0%,#FF8A3D 100%);
  /* The same warmth, dark enough to read as text: 6.1:1 falling to 4.3:1. */
  --grad-ink:linear-gradient(118deg,#C2185B 0%,#CC4E18 100%);
  --grad-cool:linear-gradient(118deg,#22C9E8 0%,#9B7BFF 100%);
  --grad-sun:linear-gradient(118deg,#FFC02E 0%,#FF5C5C 100%);

  /* ---- type ---- */
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ---- shape ---- */
  --r:20px; --r-sm:14px; --r-lg:24px; --pill:999px;
  --pop:0 1px 2px rgba(23,19,31,.04), 0 12px 28px -18px rgba(23,19,31,.34);
  --pop-lg:0 2px 4px rgba(23,19,31,.05), 0 24px 48px -28px rgba(23,19,31,.45);
  --tap:44px;                   /* nothing tappable is smaller than this */

  /* ---- aliases kept so older page rules still resolve ---- */
  --muted:var(--ink-2); --dim:var(--ink-3);
  --glass:var(--paper); --glass-2:var(--paper); --bg-2:var(--paper);
  --m-ink:var(--magenta-ink); --c-ink:var(--cyan-ink); --y-ink:var(--yellow-ink);
  --ok:var(--mint-ink);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ----------
   Display face for headings only; everything a person reads at length is
   Instrument Sans, which was drawn for it. */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
         margin:0}
h1{font-size:34px;line-height:1.05;margin-bottom:8px}
h2{font-size:19px;line-height:1.2;letter-spacing:-.02em;margin-bottom:4px}
.sub{color:var(--ink-2);font-size:15px;line-height:1.5;margin:0}
.note{color:var(--ink-3);font-size:12.5px;line-height:1.6;margin-top:12px}
.mono{font-family:var(--mono)}

/* The gradient-filled word in a heading — the one piece of the old look worth
   keeping. It uses the dark pair: this is text, and the bright pair failed at
   every size a heading is ever set in. */
.grad{background:var(--grad-ink);-webkit-background-clip:text;
      background-clip:text;color:transparent}
/* A browser with no background-clip support shows the fallback colour, not
   transparent text on cream. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{color:var(--brand);background:none}
}

/* ---------- the wordmark ----------
   Three bars: cyan, magenta, yellow — the dye layers of a colour print, and
   the mark the marketing site already used. It replaces the conic rainbow
   ring in the app and the flat pink dot on the QR landing; the product was
   wearing three different logos.

   Drawn from one element's background so every page keeps whatever empty
   element it already had. */
.brand{display:flex;align-items:center;gap:10px;margin:0 0 26px}
.mark,.brand .o{
  width:22px;height:22px;flex:none;border-radius:0;background:none;
  background-image:
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--magenta),var(--magenta)),
    linear-gradient(var(--yellow),var(--yellow));
  background-size:5px 17px,5px 22px,5px 17px;
  background-position:0 50%,8.5px 50%,17px 50%;
  background-repeat:no-repeat;
  box-shadow:none;
}
.mark::after,.brand .o::after{content:none}
.wordmark{font-family:var(--display);font-weight:800;font-size:18px;
          letter-spacing:-.03em}
.wordmark em{font-style:normal;color:inherit}

/* ---------- surfaces ---------- */
.card{background:var(--paper);border:1px solid var(--line);
      border-radius:var(--r);padding:20px;margin-top:18px;
      box-shadow:var(--pop)}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);
      padding:6px 12px;font-size:12.5px;font-weight:600;
      background:rgba(23,19,31,.07);color:var(--ink-2)}
.chip.on{background:var(--brand-tint);color:var(--brand)}

/* ---------- buttons ----------
   Solid fills, no gradients, no coloured glow. One primary per screen. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:18px;min-height:52px;padding:15px 24px;
  border:0;border-radius:var(--pill);
  background:var(--brand);color:#FFFFFF;
  font:inherit;font-weight:600;font-size:16px;letter-spacing:-.005em;
  cursor:pointer;transition:background .15s ease,transform .1s ease;
}
.btn:hover{background:var(--brand-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:rgba(23,19,31,.09);color:var(--ink-2);
              cursor:not-allowed;transform:none}

.btn-glass{background:var(--paper);color:var(--ink);
           border:1.5px solid var(--line-2);font-weight:600}
.btn-glass:hover{background:var(--paper);border-color:var(--ink)}
.btn-glass:disabled{background:var(--paper);border-color:var(--line);
                    color:var(--ink-3)}

.btn-quiet{background:transparent;color:var(--ink-2);
           border:1.5px solid var(--line-2)}
.btn-quiet:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

.btn-danger{background:transparent;color:var(--red-ink);
            border:1.5px solid rgba(196,35,78,.35)}
.btn-danger:hover{background:rgba(224,45,90,.07);color:var(--red-ink);
                  border-color:var(--red-ink)}

.btn-sm{width:auto;margin-top:0;min-height:40px;padding:10px 18px;
        font-size:14px}

/* An icon-only control. Square, never below the tap minimum. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--pill);
  background:transparent;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.icon-btn:hover{background:rgba(23,19,31,.06)}
.icon-btn svg{display:block}

/* ---------- links ---------- */
a{color:var(--brand)}
a:hover{color:var(--brand-2)}
.link{background:none;border:0;color:var(--ink-2);font:inherit;font-size:14px;
      cursor:pointer;padding:10px 0;text-decoration:underline;
      text-underline-offset:3px;font-weight:600}
.link:hover{color:var(--brand)}
.alink{color:var(--brand);text-decoration:underline;text-underline-offset:3px;
       font-weight:600}
.inlink{background:none;border:0;font:inherit;cursor:pointer;padding:0;
        color:var(--brand);text-decoration:underline;text-underline-offset:3px;
        font-weight:600}

/* ---------- fields ---------- */
label.lab,.lab{display:block;font-size:12.5px;color:var(--ink-2);
               margin:16px 0 7px;font-weight:600;letter-spacing:0;
               text-transform:none}
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=date],input[type=number],select,textarea{
  width:100%;background:var(--field);border:1.5px solid var(--line-2);
  color:var(--ink);border-radius:var(--r-sm);padding:14px 15px;
  font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;background:var(--paper);border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(194,24,91,.14)}
input[type=file]{width:100%;color:var(--ink-2);font-size:13px;margin-top:6px;
                 background:none;border:0;padding:0}

/* ---------- messages ---------- */
.err{color:var(--red-ink);font-size:14px;margin-top:14px;font-weight:600;
     background:rgba(224,45,90,.08);border:1px solid rgba(196,35,78,.22);
     border-radius:var(--r-sm);padding:11px 14px}
.ok{color:var(--mint-ink);font-size:14px;margin-top:14px;font-weight:600;
    background:rgba(18,190,150,.10);border:1px solid rgba(10,125,99,.22);
    border-radius:var(--r-sm);padding:11px 14px}
.consent{margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.65;
         background:var(--paper-2);border:1px solid var(--line);
         border-radius:var(--r-sm);padding:14px 16px}

/* ---------- utility ---------- */
.hidden{display:none!important}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;
     flex-wrap:wrap;margin-top:14px}
.skel{height:14px;border-radius:7px;background:var(--line);
      animation:pg-pulse 1.1s ease-in-out infinite}
@keyframes pg-pulse{50%{opacity:.45}}

/* A page-wide column. The admin and studio pages used to put a form at the
   far left of a 1400px window with nothing beside it. */
.wrap{max-width:820px;margin-inline:auto;padding:34px 22px 72px}
.wrap-wide{max-width:1120px}

@media (max-width:640px){
  h1{font-size:29px}
  .card{padding:18px;border-radius:var(--r-sm);margin-top:16px}
  .wrap{padding:22px 16px calc(40px + env(safe-area-inset-bottom));
        padding-top:calc(22px + env(safe-area-inset-top))}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}