/* Augmentique Times — the sign-in page.
   Lifted verbatim out of this page's inline <style>: same bytes, same order, now
   cacheable. Nothing here is shared with another page (see index.css for why there
   is no suite-wide app.css).
   Linked with ?v=<app version>, which is the ONLY thing that busts the cache — so
   edit this file and bump APP_VERSION in app.py in the same commit. */
  :root {
    --linen: #f2e6d3; --card: rgba(255,252,246,.85);
    --ink: #423d52; --ink-2: #6d6680; --muted: #9b93ab;
    --butter-ink: #8a6b1f;
    --blush: rgba(203,135,146,.22);
    --sky-wash: rgba(127,160,184,.18);
    /* AI-mark tier (matches office/shared/src/avatar/compose/aiMark.ts): cyan is every
       Augmentique agent today. When the second kind of AI arrives, swap this one value
       to the violet tier — #C08BFF — nothing else about the mark needs to change.
       Unreferenced since the hand-drawn halo left this sheet: Tic's SVG carries the
       real mark and its own colour. Kept as the page's record of which tier he is. */
    --ai-glow: #5BE9E0;
  }
  * { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
  body {
    font-family: "Quicksand", ui-rounded, -apple-system, sans-serif; color: var(--ink);
    background: linear-gradient(180deg, #f2e6d3 0%, #f3e3cb 45%, rgba(227,162,118,.55) 100%);
    min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
    -webkit-font-smoothing: antialiased;
    padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
    overflow: hidden; position: relative;
  }

  /* ---- Clock scene ---- */
  .clock-scene {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 0;
    display: flex; align-items: center; justify-content: center;
    animation: clockPulse 4s ease-in-out infinite;
  }
  @keyframes clockPulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: .75; }
  }
  .clock-face {
    width: min(620px, 92vmin); aspect-ratio: 1; border-radius: 50%;
    position: relative;
    /* 60 tick marks around the rim via repeating-conic-gradient, masked to a thin ring */
    background: repeating-conic-gradient(
      from 0deg,
      rgba(138,107,31,.42) 0deg .45deg,
      transparent .45deg 6deg
    );
    -webkit-mask: radial-gradient(circle, transparent 61.5%, #000 62.5%, #000 65.5%, transparent 66.5%);
            mask: radial-gradient(circle, transparent 61.5%, #000 62.5%, #000 65.5%, transparent 66.5%);
  }
  /* 12 hour dots positioned around the ring */
  .dot {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: rgba(138,107,31,.55); opacity: .6;
    box-shadow: 0 0 6px rgba(138,107,31,.15);
    animation: dotGlow 2s ease-in-out infinite;
  }
  .dot:nth-child(1)  { animation-delay: 0s; }
  .dot:nth-child(2)  { animation-delay: .17s; }
  .dot:nth-child(3)  { animation-delay: .33s; }
  .dot:nth-child(4)  { animation-delay: .5s; }
  .dot:nth-child(5)  { animation-delay: .67s; }
  .dot:nth-child(6)  { animation-delay: .83s; }
  .dot:nth-child(7)  { animation-delay: 1s; }
  .dot:nth-child(8)  { animation-delay: 1.17s; }
  .dot:nth-child(9)  { animation-delay: 1.33s; }
  .dot:nth-child(10) { animation-delay: 1.5s; }
  .dot:nth-child(11) { animation-delay: 1.67s; }
  .dot:nth-child(12) { animation-delay: 1.83s; }
  @keyframes dotGlow {
    0%, 100% { opacity: .35; box-shadow: 0 0 0 0 rgba(138,107,31,.5); }
    50%      { opacity: .85; box-shadow: 0 0 8px 2px rgba(138,107,31,.35); }
  }
  .dot-n1  { top: 3%;  left: 50%; transform: translate(-50%, -50%); }
  .dot-n2  { top: 10%; left: 77%; transform: translate(-50%, -50%); }
  .dot-n3  { top: 27%; left: 93%; transform: translate(-50%, -50%); }
  .dot-n4  { top: 50%; left: 97%; transform: translate(-50%, -50%); }
  .dot-n5  { top: 73%; left: 93%; transform: translate(-50%, -50%); }
  .dot-n6  { top: 90%; left: 77%; transform: translate(-50%, -50%); }
  .dot-n7  { top: 97%; left: 50%; transform: translate(-50%, -50%); }
  .dot-n8  { top: 90%; left: 23%; transform: translate(-50%, -50%); }
  .dot-n9  { top: 73%; left: 7%;  transform: translate(-50%, -50%); }
  .dot-n10 { top: 50%; left: 3%;  transform: translate(-50%, -50%); }
  .dot-n11 { top: 27%; left: 7%;  transform: translate(-50%, -50%); }
  .dot-n12 { top: 10%; left: 23%; transform: translate(-50%, -50%); }

  /* Sweeping second hand */
  @keyframes sweep { to { transform: rotate(360deg); } }
  .hand {
    position: absolute; bottom: 50%; left: 50%;
    width: 1.5px; height: 36%;
    background: #c9a040; opacity: .7; border-radius: 1px;
    transform-origin: bottom center;
    animation: sweep 60s linear infinite;
    margin-left: -.75px;
  }
  .hand::after {
    content: ""; position: absolute;
    bottom: 100%; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: #c9a040; margin-bottom: -3px;
  }
  .hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 50%; background: #c9a040; opacity: .8; z-index: 1;
  }
  .counterweight {
    position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%; background: #c9a040; opacity: .45;
  }

  /* ---- Time-dust particles ---- */
  .particle {
    position: fixed; width: 4px; height: 4px; border-radius: 50%; background: #c9a040;
    pointer-events: none; opacity: 0; z-index: 1;
    animation: dust var(--dt, 6s) var(--dd, 0s) ease-in-out infinite;
  }
  @keyframes dust {
    0%, 100% { opacity: 0;   transform: translate(0, 0) scale(0); }
    15%      { opacity: .75; transform: translate(var(--dx), var(--dy)) scale(2.2); }
    85%      { opacity: .3;  transform: translate(var(--dx2), var(--dy2)) scale(1); }
  }

  /* ---- Stage & card layout ---- */
  .stage {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; width: 380px; max-width: 94vw;
  }
  /* Portrait, because the figure is: a 0.43-0.55-aspect Tic letterboxed into the old
     square 148px box only drew ~70px wide and read smaller than the robot did. */
  .bot-wrap {
    width: 116px; height: 172px; margin-bottom: -65px; z-index: 3; position: relative;
  }
  /* Narrowed with the box so the ground shadow sits under his feet, not past them. */
  .bot-wrap::after {
    content: ""; position: absolute; bottom: -2px; left: 24%;
    width: 52%; height: 14px;
    background: rgba(66,61,82,.1); border-radius: 50%; filter: blur(5px);
    z-index: -1;
  }
  @keyframes botIn {
    from { opacity: 0; transform: translateY(-40px) scale(.75); }
    65%  { opacity: .8; transform: translateY(8px) scale(1.04); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* .bot-visual carries the entrance/idle/celebrate transforms — not .bot-wrap, which
     stays put so the ground shadow below doesn't lift off with him. It used to also
     exist so a hand-drawn halo overlay could ride along; the halo now lives inside
     Tic's own SVG, but the transforms are still the reason this element is here. */
  .bot-visual {
    position: relative; width: 100%; height: 100%;
    transition: transform .3s cubic-bezier(.34,1.45,.64,1);
    animation: botIn .6s cubic-bezier(.34,1.45,.64,1) both;
    animation-delay: .12s;
  }
  .bot-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  @keyframes bob { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(-2deg)} }
  .bot-idle { animation: bob 3.2s ease-in-out infinite; }

  @keyframes celebrate {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.22) rotate(4deg); }
    60%  { transform: scale(.94) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); }
  }
  .bot-yay { animation: celebrate .5s cubic-bezier(.34,1.45,.64,1); }

  /* The hand-drawn .ai-halo overlay and its six per-pose --halo-x/--halo-y anchors used
     to live here: the suite's AI tell, hand-fitted to each robot PNG's head. Tic's SVG
     is composed with the real one from office/shared/src/avatar/compose/aiMark.ts, so
     keeping this would have put two halos on one head. See docs/TIC-AVATAR.md. */

  .card {
    width: 100%; padding: 64px 30px 28px;
    background: rgba(255,252,246,.85);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    border: 1px solid rgba(66,61,82,.07);
    border-radius: 24px;
    box-shadow: 0 12px 40px -12px rgba(66,61,82,.28);
    text-align: center;
    animation: cardIn .55s cubic-bezier(.34,1.45,.64,1) both;
  }
  @keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.92); } }

  @keyframes shake {
    0%,100% { transform: translateX(0); }
    15%,45%,75% { transform: translateX(-7px); }
    30%,60%,90% { transform: translateX(7px); }
  }
  .card.shake { animation: shake .45s ease; }

  /* ---- Brand & headings ---- */
  .brand { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; margin-bottom: 8px; }
  .brand .a { font-family: "Quicksand", ui-rounded, -apple-system, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
  .brand .t { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 17px; color: var(--butter-ink); }
  h1 { font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
  .lede { font-size: 12.5px; color: var(--muted); margin-bottom: 22px; font-weight: 500; }
  .version-foot { margin-top: 18px; text-align: center; font-size: 11px; color: var(--muted); opacity: .7; letter-spacing: .02em; }

  /* ---- Form ---- */
  label {
    display: block; text-align: left; font-size: 11.5px; font-weight: 800;
    color: var(--butter-ink); text-transform: uppercase; letter-spacing: .07em;
    margin: 14px 0 5px;
  }
  input {
    width: 100%; font-family: inherit; font-size: 16px;
    background: rgba(242,230,211,.55);
    border: 2px solid rgba(66,61,82,.1);
    border-radius: 16px; padding: 12px 14px; color: var(--ink);
    transition: background .25s, border-color .25s, box-shadow .25s;
    -webkit-appearance: none; appearance: none;
  }
  input::placeholder { color: var(--muted); opacity: .7; }
  input:focus {
    outline: none; background: #fff; border-color: #948ab0;
    box-shadow: 0 0 0 4px rgba(148,138,176,.18);
  }
  button {
    width: 100%; margin-top: 22px; font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; border: none; padding: 13px;
    background: #423d52; color: #f2e6d3; border-radius: 16px;
    transition: transform .2s cubic-bezier(.34,1.45,.64,1), background .2s, box-shadow .2s;
  }
  /* Gated: on touch, Safari keeps :hover after the tap, so the sign-in button stayed
     lifted and darkened while the request was in flight. :active below is the feel. */
  @media (hover: hover) {
    button:not(:disabled):hover {
      background: #37334a; transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(66,61,82,.25);
    }
  }
  button:not(:disabled):active { transform: scale(.97); }
  button:disabled { opacity: .55; cursor: not-allowed; }
  button:focus-visible, input:focus-visible { outline: 3px solid #948ab0; outline-offset: 2px; }

  /* ---- Banner messages ---- */
  .banner {
    display: block;
    background: var(--blush); color: var(--ink); border-radius: 12px;
    padding: 9px 13px; font-size: 13.5px; font-weight: 600; text-align: center;
    margin-top: 14px; min-height: 1.2em; transition: background .3s;
  }
  .banner:empty,
  .banner.hidden-init { display: none; }
  .banner.timer { background: var(--sky-wash); display: block; }
  .banner .countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

  /* ---- Responsive ---- */
  @media (max-width: 480px) {
    body { padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); }
    .clock-face { width: min(340px, 86vmin); }
    .dot { width: 8px; height: 8px; }
    .hand { width: 1px; height: 30%; }
    .hub { width: 8px; height: 8px; }
    .counterweight { width: 6px; height: 6px; }
    .stage { max-width: 98vw; }
    .bot-wrap { width: 88px; height: 130px; margin-bottom: -49px; }
    .card { padding: 56px 20px 22px; border-radius: 20px; }
    h1 { font-size: 22px; }
    .bot-wrap::after { width: 56%; left: 22%; height: 10px; }
  }
  @media (min-width: 481px) and (max-width: 1023px) {
    .clock-face { width: min(480px, 74vmin); }
  }
  @media (max-height: 500px) {
    body { overflow-y: auto; align-items: flex-start; padding-top: 20px; }
    .bot-wrap { width: 66px; height: 98px; margin-bottom: -37px; }
    .bot-wrap::after { width: 56%; left: 22%; height: 8px; }
    .card { padding: 44px 20px 16px; }
    .brand .a { font-size: 16px; }
    .brand .t { font-size: 15px; }
    h1 { font-size: 20px; margin-bottom: 2px; }
    .lede { font-size: 11.5px; margin-bottom: 14px; }
    label { margin-top: 10px; }
    input { padding: 10px 12px; font-size: 15px; }
    button { margin-top: 16px; padding: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .clock-scene, #particles { display: none; }
  }