/* The service's own pages: the bar, the forms, the messages. The guide itself is styled by guide.css (a
   copy of the portal's); the end of this file adjusts it for a page without the portal around it.
   Colours are the guide's (navy #0b1b33, blue #0f4fa8). */

:root{
  --tg-navy:#0b1b33; --tg-blue:#0f4fa8; --tg-ink:#121a26; --tg-ink-2:#465264; --tg-line:#dfe4ec; --tg-panel:#f5f7fa;
  --tg-bad:#a1251c; --tg-bad-tint:#fde7e6; --tg-ok:#1f6b3d; --tg-ok-tint:#ebf6ef;
  --tg-sans:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --tg-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--tg-ink);font:400 16px/1.6 var(--tg-sans);-webkit-font-smoothing:antialiased}
a{color:var(--tg-blue);text-underline-offset:3px}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--tg-blue);outline-offset:2px}

/* bar */
.tg-bar{background:var(--tg-navy);color:#fff}
.tg-bar-in{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px;min-height:60px}
.tg-brand{font:600 19px/1 var(--tg-serif);letter-spacing:.01em}
.tg-tag{font:600 11px/1 var(--tg-sans);letter-spacing:.12em;text-transform:uppercase;color:#c8d4e6;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 8px}
.tg-bar .tg-btn{margin-left:auto;white-space:nowrap}
.tg-brand{white-space:nowrap}
@media (max-width:480px){.tg-tag{display:none}.tg-bar .tg-btn{padding:0 14px;font-size:13px}}

/* buttons */
.tg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--tg-navy);color:#fff;font:500 15px/1.2 var(--tg-sans);text-align:center;text-decoration:none;cursor:pointer}
.tg-btn:hover{opacity:.92}
.tg-btn-light{background:#fff;color:var(--tg-navy);min-height:38px;padding:0 16px;font-size:14px}
.tg-wide{width:100%;margin-top:16px}
.tg-link{background:none;border:0;padding:0;color:var(--tg-blue);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* the small pages: landing, email, code, messages */
.tg-main{min-height:60vh}
.tg-card{max-width:520px;margin:56px auto;padding:0 16px}
.tg-card h1{font:600 clamp(28px,6vw,36px)/1.15 var(--tg-serif);margin:8px 0 12px;text-wrap:balance}
.tg-kicker{font:600 12px/1 var(--tg-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tg-blue);margin:0}
.tg-card label{display:block;font-weight:500;margin:20px 0 6px}
.tg-card input[type=email],.tg-card input[type=text]{width:100%;min-height:48px;padding:0 14px;border:1px solid #c6cfdb;border-radius:8px;background:#fff;color:inherit;font:inherit;font-size:17px}
#tg-code{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:.3em}
.tg-resend{margin-top:20px}
.tg-fine{font-size:14px;color:var(--tg-ink-2)}
.tg-msg{padding:12px 14px;border-radius:8px;margin:16px 0;font-size:15px}
.tg-msg.bad{background:var(--tg-bad-tint);color:var(--tg-bad)}
.tg-msg.ok{background:var(--tg-ok-tint);color:var(--tg-ok)}

/* the tutorial page */
.tg-viewer{max-width:772px;margin:20px auto 0;padding:0 16px;font-size:13px;color:var(--tg-ink-2)}
.tg-cta{max-width:740px;margin:0 auto 24px;padding:28px 24px;border-radius:8px;background:var(--tg-panel);text-align:center}
.tg-cta h2{font:600 24px/1.25 var(--tg-serif);margin:0 0 8px}
.tg-cta p{margin:0 0 18px;color:var(--tg-ink-2)}

/* footer */
.tg-foot{border-top:1px solid var(--tg-line);margin-top:48px}
.tg-foot-in{max-width:1100px;margin:0 auto;padding:20px 16px;font-size:13px;color:var(--tg-ink-2)}

/* guide.css comes from the portal: undo what only makes sense there */
.guide{
  margin:0;                                  /* the portal pulls it over its content padding */
  --fvg-sans:"IBM Plex Sans"; --fvg-mono:"IBM Plex Mono"; --fvg-serif:"Source Serif 4"; /* next/font sets these in the portal */
}
.tg-guide{max-width:772px;margin:0 auto;padding-inline:16px}
.guide a.shot{text-decoration:none}          /* the zoom button became a link to the full-size image */