/* The chat sign-in page.
 *
 * Moved out of utyk/templates/chat_auth.html on 2026-08-31: the 1 top-level
 * block of it. 0 blocks stayed inline because they render inside
 * {% if %} and a <link> cannot be conditional.
 *
 * Inline CSS is re-sent on every request and cached by nobody.
 * url_for('static', ...) keys this URL on the file's own CONTENT hash
 * and serves it immutable for a year.
 */

    * { box-sizing:border-box; }
    body { margin:0; background:var(--uk-backdrop); color:var(--uk-text);
           font-family:Inter,system-ui,-apple-system,sans-serif;
           min-height:100vh; display:flex; flex-direction:column; }
    a { color:var(--uk-accent); text-decoration:none; }
    /* The top inset is added rather than max()'d: this is a real bar with a
       border, so its background has to keep painting up under the clock. 0
       in a browser tab, where it stays exactly 20px. */
    .nav { display:flex; align-items:center; justify-content:space-between;
           padding:calc(20px + env(safe-area-inset-top, 0px)) 40px 20px;
           border-bottom:1px solid var(--uk-line);
           background:var(--uk-bg); }
    /* 125x24 as painted. Same expander as the other public shells, and it
       matters most here: this is the way back out of a sign-in page someone
       reached by mistake. Vertical only, the header has a link to its right. */
    .logo { font-weight:900; font-size:20px; letter-spacing:-.02em;
            color:var(--uk-text); position:relative; }
    .logo::before { content:''; position:absolute; left:0; right:0;
                    top:-12px; bottom:-12px; }
    .logo span { color:var(--uk-accent); }
    /* 52x20 of paint, and on /register it is the ONLY route to signing in, for
       someone who already has an account and landed on the wrong page. Same
       expander as the wordmark opposite it, vertical only so the two cannot
       reach across the header and steal each other's taps. */
    .nav a.alt { color:var(--uk-dim); font-size:var(--utyk-fs-body);
                 font-weight:600; position:relative; }
    .nav a.alt::before { content:''; position:absolute; left:0; right:0;
                         top:-12px; bottom:-12px; }
    .wrap { flex:1; display:grid; place-items:center; padding:40px 20px 64px;
            background:radial-gradient(80% 90% at 50% 0%,
                        rgba(245,160,60,.14), transparent 60%); }
    .card { width:100%; max-width:420px; background:var(--uk-card);
            border:1px solid var(--uk-line); border-radius:18px; padding:32px; }
    h1 { font-size:27px; line-height:1.15; letter-spacing:-.03em; margin:0 0 8px;
         font-weight:900; }
    .sub { color:var(--uk-dim); font-size:var(--utyk-fs-body); line-height:1.6; margin:0 0 26px; }
    /* Her face beside the headline, not above it: at 56px it reads as
       confirmation of who he picked rather than a second hero competing
       with the form he is here to fill in. */
    .invitee { display:flex; gap:14px; align-items:flex-start; }
    .invitee-img { width:56px; height:56px; border-radius:50%;
                   object-fit:cover; flex-shrink:0;
                   border:1px solid var(--uk-line); }
    .invitee h1 { font-size:24px; }
    label { display:block; font-size:var(--utyk-fs-quiet); font-weight:800;
            letter-spacing:.1em;
            text-transform:uppercase; color:var(--uk-label); margin:0 0 8px; }
    input { width:100%; min-height:var(--utyk-tap-min); padding:0 15px;
            border-radius:12px;
            border:1px solid var(--uk-line); background:var(--uk-bg);
            color:var(--uk-text); font-family:inherit;
            font-size:var(--utyk-fs-body);
            margin-bottom:18px; }
    input:focus { outline:none; border-color:var(--uk-accent);
                  box-shadow:var(--utyk-focus); }
    /* The pre-signup opener. Shares the input's box so the form reads as one
       thing, but keeps its own rule: `input` above pins a min-height and a
       zero vertical padding that a multi-line field cannot use. */
    .firstmsg { width:100%; padding:13px 15px; border-radius:12px;
                border:1px solid var(--uk-line); background:var(--uk-bg);
                color:var(--uk-text); font-family:inherit;
                font-size:var(--utyk-fs-msg); line-height:1.5;
                resize:vertical; margin-bottom:8px; }
    .firstmsg:focus { outline:none; border-color:var(--uk-accent);
                      box-shadow:var(--utyk-focus); }
    .firstmsg-note { margin:0 0 18px; color:var(--uk-muted);
                     font-size:var(--utyk-fs-quiet); line-height:1.5; }
    /* Optional says so ON the label. A required-looking field this late in a
       form is what makes a man who has already written a sentence give up. */
    .opt { color:var(--uk-muted); font-weight:400; text-transform:none;
           letter-spacing:0; }
    .btn { display:flex; align-items:center; justify-content:center;
           width:100%; min-height:52px; border-radius:12px; font-weight:800;
           font-size:16px; border:0; cursor:pointer; font-family:inherit;
           background:var(--utyk-accent); color:var(--utyk-on-accent);
           box-shadow:0 16px 40px -18px var(--utyk-accent-glow); }
    .btn:hover { background:var(--utyk-accent-hover); }
    /* An error is not an action: it gets the danger colour, never the
       accent. It used to be pink, which was the same pink as the button
       directly under it. */
    .err { background:color-mix(in srgb, var(--utyk-danger) 12%, transparent);
           border:1px solid color-mix(in srgb, var(--utyk-danger) 45%, transparent);
           color:var(--uk-text); border-radius:11px; padding:11px 14px;
           font-size:var(--utyk-fs-meta); line-height:1.55; margin-bottom:18px; }
    .alt-line { text-align:center; color:var(--uk-dim);
                font-size:var(--utyk-fs-body);
                margin:22px 0 0; }
    .trust { display:flex; align-items:center; gap:10px; margin-top:22px;
             padding-top:18px; border-top:1px solid var(--uk-line);
             color:var(--uk-faint); font-size:var(--utyk-fs-meta); line-height:1.55; }
    /* The consent sentence. Readable, not fine print: it is the thing the
       user is agreeing to, and LINE's email permission is granted on the
       condition that we ask before collecting. */
    .consent { font-size:var(--utyk-fs-meta); line-height:1.6; color:var(--uk-dim);
               background:rgba(255,255,255,.03); border:1px solid var(--uk-line);
               border-radius:11px; padding:11px 13px; margin:0 0 16px; }
    .consent strong { color:var(--uk-text); font-weight:700; }
    .consent a { color:var(--uk-accent); text-decoration:underline; }
    .socials { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
    .social { display:flex; align-items:center; justify-content:center; gap:10px;
              min-height:var(--utyk-tap-min); border-radius:12px; font-weight:800;
              font-size:var(--utyk-fs-body);
              border:1px solid var(--uk-line); background:transparent;
              color:var(--uk-text); }
    .social svg { width:18px; height:18px; display:block; flex:0 0 auto; }
    /* Each brand's own mark, in its own colour, on this card's dark surface.
       Google's is multicoloured by their brand rules; the others inherit. */
    .social-facebook svg { color:#1877F2; }
    .social-line svg { color:#06C755; }
    .social-discord svg { color:#5865F2; }
    /* The Thai instruction for a lady arriving by her own link. Green
       rather than the brand amber, so it reads as being about the LINE
       button below it and not as another marketing panel. */
    .lady-hint { border:1px solid #06C755; border-radius:12px;
                 background:rgba(6,199,85,.08); padding:14px 16px;
                 margin:0 0 20px; }
    .lady-hint-t { font:800 17px 'Noto Sans Thai',Inter,sans-serif;
                   color:var(--uk-text); margin-bottom:4px; }
    .lady-hint-b { font:400 14px/1.6 'Noto Sans Thai',Inter,sans-serif;
                   color:var(--uk-dim); }
    .divider { display:flex; align-items:center; gap:12px; margin:0 0 18px;
               color:var(--uk-faint); font-size:var(--utyk-fs-quiet); }
    .divider::before, .divider::after { content:""; flex:1; height:1px;
                                        background:var(--uk-line); }
    footer { padding:22px 40px 36px; color:var(--uk-faint);
             font-size:var(--utyk-fs-meta);
             text-align:center; }
    /* 42-54 x 18. This shell has its OWN footer rather than the .foot-links
       row the other public pages share, so widening those two left these
       three behind: the sign-in and sign-up pages were the only public pages
       still handing out sub-44 footer targets. Vertical only, because the
       three sit on one centred line separated by a middot and a horizontal
       inset would swallow the separator and reach the neighbour. One row is
       also why this needs no row-gap change, unlike .foot-links, which wraps
       to two on a phone. The footer's own 22/36px padding holds the taller
       target. */
    footer a { color:var(--uk-faint); text-decoration:underline;
               position:relative; }
    footer a::before { content:''; position:absolute; left:0; right:0;
                       top:-13px; bottom:-13px; }
    @media (max-width:600px) {
      /* Keeps the top inset. A bare `padding:16px 20px` here is what puts
         the wordmark back under the clock, which is the same mistake
         utyk_base.html's .uk-head override records having made once. */
      .nav { padding:calc(16px + env(safe-area-inset-top, 0px)) 20px 16px; }
      .card { padding:24px 20px; border-radius:16px; }
      h1 { font-size:23px; }
    }