/* UNIMATIC B2B sign-in. Values from docs/brand/README.md: panel #F6F6F6 on white, ink #000,
   Helvetica Neue, mono uppercase labels, rounded black band, pill button. Mobile first. */

:root {
  --bg: #F6F6F6;
  --ink: #000;
  --ink70: rgba(0, 0, 0, .7);
  --hair: rgba(0, 0, 0, .15);
  --accent: #AFFF00;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: #fff; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); }

.panel { max-width: 420px; margin: 0 auto; padding: 12px 16px 20px; background: var(--bg); border-radius: 10px; }
.band { background: #000; border-radius: 10px; padding: 22px 20px; margin: 0 0 24px; }
.band img { display: block; width: 144px; max-width: 100%; height: auto; }

h1 { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 0 0 20px; }

label { display: block; margin: 0 0 6px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink70); }
input { display: block; width: 100%; min-height: 48px; margin: 0 0 18px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: 8px; }

button { display: block; width: 100%; min-height: 50px; margin: 6px 0 0; padding: 12px 20px; font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #000; border: 0; border-radius: 999px; cursor: pointer; }
button:disabled { opacity: .55; cursor: progress; }

/* Visible focus: a black ring with a lime halo, clear on the grey panel and on white. */
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent); }

.status { min-height: 1.5em; margin: 16px 0 4px; font-weight: 700; }
.status:empty { margin-top: 8px; }
.note { margin: 0; font-size: 14px; color: var(--ink70); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .4); text-underline-offset: 2px; overflow-wrap: anywhere; }

.shop { margin: 20px 0 0; }
.shop-link { display: block; min-height: 50px; padding: 12px 20px; text-align: center; text-decoration: none; font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--ink); border-radius: 999px; }

@media (min-width: 600px) {
  body { padding: 48px 24px; }
  .panel { padding: 16px 28px 28px; }
}