/* Brand: imbik.ai's Identity R2 tokens and type, from imbik-ai/imbik.ai site/index.html and
   .claude/design/brand-tokens.md. R2's light mode, as on imbik.ai's contact band and footer:
   apricot ground under cherry ink, and a cherry pill with apricot text for the button. The dark
   mode (mahogany under pewter) read as heavy for a page that is one small form. Copper, the
   accent in both modes, is too pale on apricot to carry text, so cherry carries it here. app.js
   reads these custom properties and hands them to Clerk, so the sign-in form and the rest of the
   page take their colours from this block alone. */

/* Licensed GT Era (Grilli Type, order 125210), the woff2 files imbik.ai serves. GT Era only on
   this site, no Pantheon. The ?v= is each file's content hash, the same as imbik.ai's. */
@font-face{font-family:'GT Era';src:url('fonts/GT-Era-Text-Regular.woff2?v=10e92ae0') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GT Era';src:url('fonts/GT-Era-Text-Medium.woff2?v=5387d43d') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'GT Era';src:url('fonts/GT-Era-Text-Bold.woff2?v=746eb7f9') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root {
  --ground: #F5C5AE;     /* apricot */
  --ink: #791313;        /* cherry */
  --muted: #9E4841;      /* cherry let down into apricot, for asides */
  --line: #D69887;       /* hairlines and field borders */
  --well: #F8D5C4;       /* fields: apricot lifted a step */
  --accent: #791313;     /* cherry: the button, links, focus */
  --accent-ink: #F5C5AE; /* text on the button */
  --danger: #A10E0E;
  --sans: 'GT Era', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
::selection { background: var(--accent); color: var(--accent-ink); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground); color: var(--ink);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
/* main fills the viewport and centres the visible section both ways. The centring is on main and
   not on body because ClerkJS appends its own elements to body, and in a body grid each one is a
   row that pushes main off centre. The sign-in section has no width cap, so the Clerk card
   (25rem) is centred on its own width instead of overflowing a narrower column to the right. */
/* .page holds main and the footer: main takes the screen less the footer's row, so the footer sits at
   the bottom of the first screen. */
.page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main {
  padding: 1.5rem 1rem;
  display: grid; place-items: center; text-align: center;
}
main > section { display: grid; justify-items: center; width: 100%; max-width: 26rem; }
main > section[hidden] { display: none; }
main > #sign-in { max-width: none; }
#sign-in-mount { display: flex; justify-content: center; width: 100%; }

/* The loading box: the Clerk card's measured outline (25rem wide, or the screen less 2.5rem as
   Clerk does; 412.92px tall with the Google button), plain apricot. No part of the card is drawn in
   it, because any part drawn twice (the logo, the footer band) judders when the real card replaces
   it. It holds only the loader, centred, which the card covers. The text is for screen readers only.
   Measured on @clerk/ui 1.38. */
.placeholder {
  width: 25rem; max-width: calc(100vw - 2.5rem); height: 412.92px;
  border: 1px solid var(--line); background: var(--ground);
  display: grid; place-items: center;
}

/* The loader: the imbik mark's slanted panels on a conveyor, right to left, in cherry alone. Each one
   comes in faint and out of focus, is sharp in the middle, and goes out the same way. Five panels a
   fifth of a cycle apart. The same motion as the Rectifier dashboard's, in this page's one colour. */
.loader { --w: 1.4rem; --t: 2.4s; position: relative; width: calc(var(--w) * 4.5); height: calc(var(--w) * 2.1); overflow: hidden; }
.loader span { position: absolute; top: 0; left: 0; width: var(--w); height: 100%; opacity: 0; background: var(--ink);
               clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%); animation: conveyor var(--t) linear infinite; }
.loader span:nth-child(2) { animation-delay: calc(var(--t) * -.2); }
.loader span:nth-child(3) { animation-delay: calc(var(--t) * -.4); }
.loader span:nth-child(4) { animation-delay: calc(var(--t) * -.6); }
.loader span:nth-child(5) { animation-delay: calc(var(--t) * -.8); }
@keyframes conveyor {
  0%   { transform: translateX(calc(var(--w) * 4.5)); opacity: 0; filter: blur(5px); }
  25%  { opacity: 1; filter: blur(0); }
  70%  { opacity: 1; filter: blur(0); }
  100% { transform: translateX(calc(var(--w) * -1.2)); opacity: 0; filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .loader span { animation: hold 1.6s ease-in-out infinite; opacity: 1; }
  .loader span:nth-child(1) { transform: translateX(calc(var(--w) * .4)); }
  .loader span:nth-child(2) { transform: translateX(calc(var(--w) * 1.45)); }
  .loader span:nth-child(3) { transform: translateX(calc(var(--w) * 2.5)); }
  .loader span:nth-child(n+4) { display: none; }
  @keyframes hold { 50% { opacity: .45; } }
}
.placeholder p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

h1 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin: 0 0 .75rem; text-wrap: balance; }
p { margin: 0 0 1rem; }
.aside { color: var(--muted); font-size: .9rem; margin-top: 2rem; }

ul#choices { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; width: 100%; }
ul#choices button {
  width: 100%; text-align: left; display: grid; gap: .15rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: 0; background: var(--well); color: var(--ink);
  font: inherit; font-weight: 500; cursor: pointer;
}
ul#choices button:hover, ul#choices button:focus-visible { border-color: var(--accent); outline: none; }
ul#choices button span { color: var(--muted); font-size: .9rem; font-weight: 400; }
ul#choices button { grid-template-columns: [text] 1fr; column-gap: .9rem; align-items: center; }
ul#choices.with-product button { grid-template-columns: [product] 2rem [text] 1fr; }
ul#choices.with-org button { grid-template-columns: [text] 1fr [org] 2rem; }
ul#choices.with-product.with-org button { grid-template-columns: [product] 2rem [text] 1fr [org] 2rem; }
ul#choices button strong { grid-area: 1 / text; }
ul#choices button span { grid-area: 2 / text; }
ul#choices .product, ul#choices .org { grid-row: 1 / span 2; width: 2rem; height: 2rem; object-fit: cover; }
ul#choices .product { grid-column: product; }
ul#choices .org { grid-column: org; }

/* The create and Terms steps: a narrow form on the page's own colours, its button the copper pill's
   shape in cherry, as Clerk's primary button is drawn in app.js. */
.form { display: grid; gap: 1rem; width: 100%; margin-top: .5rem; text-align: left; }
.field { display: grid; gap: .35rem; font-weight: 500; }
.field input {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--well);
  border: 1px solid var(--line); border-radius: 0; padding: .6rem .75rem;
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.summary { font-size: .9rem; color: var(--ink); border-left: 2px solid var(--line); padding-left: .9rem; }
.summary p { margin: 0; }
.summary p + p { margin-top: .5rem; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: .95rem; }
.check input { margin: .2rem 0 0; width: 1.05rem; height: 1.05rem; }
button.primary {
  justify-self: start; font: inherit; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 999px; padding: .65rem 1.4rem;
  cursor: pointer;
}
button.primary:disabled { opacity: .55; cursor: default; }
.form-error { color: var(--danger); margin: 0; font-size: .95rem; }
.form-error[hidden] { display: none; }

button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
a { color: var(--accent); text-underline-offset: 3px; }
button.link:hover, a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The R1 symbol as a watermark behind everything: whole, never cropped, anchored at the bottom
   right and as large as the screen allows. Where the screen is too small for it to read as a
   background shape rather than a second logo, it is not drawn at all. */
body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  right: 4vmin; bottom: 4vmin;
  height: min(88vh, 62vw); aspect-ratio: 107.4 / 103;
  background: url('symbol.svg') center / contain no-repeat;
}
@media (max-width: 900px), (max-height: 560px) { body::before { display: none; } }

/* imbik.ai's footer, from its site/index.html (.legacy footer), on this page's apricot. The four
   runs and their column widths are imbik.ai's; the type scales with the width as there (24 units of
   a 2560 artboard, capped at 24px). The tower's windows are cut in the ground colour, and the
   policy link is underlined in imbik.ai's copper. */
footer { --bg: var(--ground); --copper: #FA9D73; padding: 1rem 0 40px; color: var(--ink); }
footer .row {
  max-width: 2560px; margin: 0 auto; padding: 0 max(20px, 1.953vw);
  display: grid; grid-template-columns: 27.9% 27.8% 18.5% minmax(0, 1fr); align-items: center;
}
footer .caps, footer .legal {
  color: var(--ink); font-weight: 500; font-size: min(max(.7rem, .9375vw), 24px);
  letter-spacing: .03em; text-transform: uppercase;
  padding-block: 19px; margin-block: -19px; display: inline-block;
}
footer .place { display: inline-flex; align-items: center; gap: .55rem; }
footer .tower { height: 1.45rem; width: auto; color: var(--ink); flex: 0 0 auto; }
footer .legal {
  padding: 23px 0 .35em; margin-top: -23px; border-bottom: 1px solid var(--copper);
  text-decoration: none; transition: border-color .2s ease;
}
footer .legal:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 899px) { footer .row { grid-template-columns: minmax(0, 1fr); row-gap: .7rem; } }