/* Translayo — demo signup page, application layer for the v1.0 design system.
   Loads after fonts/fonts.css and design/*.css (see demo.html). The page reuses
   the design system's login card; only the consent row, the message box and the
   form rhythm are specific to it. */

/* demo.js hides the message box with the `hidden` attribute, and .login-card
   sets its children to display:block/flex — so this needs !important, exactly as
   the main app does. design/tokens.css ships `.hidden`, not the attribute form. */
[hidden]{display:none!important}

.login-card h1{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.login-card .brand-sub{font-size:.78rem;color:var(--ink-3);margin-top:2px}
.demo-brand{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}

#demoForm{display:flex;flex-direction:column;gap:14px;text-align:left}
#demoForm .set-field{margin-bottom:0}
#demoForm .btn-primary{width:100%}

/* Consent is a genuine choice, so it stays left-aligned and full width. */
.consent{display:flex;align-items:flex-start;gap:9px;font-size:.79rem;
  color:var(--ink-2);line-height:1.5;cursor:pointer;text-align:left}
.consent input{accent-color:var(--green);width:15px;height:15px;flex:none;margin-top:2px}
.consent a{color:var(--green);font-weight:600;text-decoration:none}
.consent a:hover{text-decoration:underline}

/* Notices follow the design's colour rules: green for information, red for a
   failure the visitor has to act on. */
.message{border-radius:var(--r-md);padding:12px 14px;font-size:.79rem;
  line-height:1.5;text-align:left}
.message.info{background:var(--green-tint);border:1px solid var(--green-edge);color:#0B5D36}
.message.error{background:var(--red-tint);border:1px solid var(--red);color:var(--red)}