/* per-page polish: cli-login
   Scoped exclusively to structures in cli-login.html.
*/

/* ════════════════════════════════════════════════════════════
   G3 ─ Floom brand mark on the auth card, exactly like login.html
   has it. login.html renders `.logo` = 42x42, the masked-chevron
   Floom mark (background:var(--ink)), centered, margin 0 auto 22px,
   as the first child of the sign-in card. cli-login.html's proto
   card has no such element, so polish/cli-login.js injects an empty
   `.fl-mark` as the first child of #card; this styles it identically
   to login's mark so the two auth screens match visually. ── */
main.c #card .fl-mark,
main.c .cc .fl-mark {
  width: 42px;
  height: 42px;
  margin: 0 auto 22px;
  background: var(--ink);
  opacity: .88;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 26h20l22 22a3 3 0 0 1 0 4l-22 22H32a6 6 0 0 1-6-6V32a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 26h20l22 22a3 3 0 0 1 0 4l-22 22H32a6 6 0 0 1-6-6V32a6 6 0 0 1 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: opacity .2s;
}

/* ── Main card ── */
main.c .cc {
  text-align: center;
}
/* CANON sec 10  -  auth-card h1 = 28 / 660 / -.025em. */
main.c .cc h1 {
  font-size: 28px;
  letter-spacing: -.025em;
  font-weight: 660;
  line-height: 1.12;
}

/* ── Device code display: steel-tinted secure block ── */
main.c .code {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)) !important;
  border-color: var(--accent-line) !important;
  border-radius: var(--r-lg) !important;
  position: relative;
}
main.c .code::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--edge);
  pointer-events: none;
}

/* The big code digits */
main.c .code .v {
  font-size: 30px;
  font-weight: 640;
  letter-spacing: .18em;
  color: var(--ink) !important;
  font-family: var(--font-mono);
  /* remove right-padding from letter-spacing on last char */
  margin-right: -.18em;
}
html.dark main.c .code .v {
  color: var(--accent) !important;
}
main.c .code .l {
  color: var(--ink-mute);
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .05em;
}

/* ── Machine context block ── */
main.c .mc {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  text-align: left;
}
main.c .mc strong {
  display: block;
  color: var(--ink) !important;
  font-weight: 600;
  font-family: var(--font) !important;
  font-size: 12.5px;
  margin-bottom: 3px;
}

/* CANON sec 3 primary (46h) / sec 5 ghost (40h). Polish lifts proto btn-sm hits. */
main.c .acts .btn-primary { height: 46px; min-width: 110px; padding: 0 28px; }
main.c .acts .btn:not(.btn-primary) { height: 40px; }

/* ── State marker icons: ok / no / mute ── */
main.c .stmark {
  transition: transform .3s var(--ease), opacity .3s;
}

/* ── Proto state-switch pills: visually de-emphasised (not real UI) ── */
main.c .stswitch {
  margin-top: 20px;
  border-top-color: var(--line-soft) !important;
  opacity: .6;
  font-size: 10px;
}
main.c .stswitch button {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border-color: var(--line);
  color: var(--ink-mute);
  transition: border-color var(--t-fast), color var(--t-fast);
}
main.c .stswitch button:hover {
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

/* ── Mobile ── */
@media (max-width: 480px) {
  main.c .acts {
    flex-direction: column;
    gap: 8px !important;
  }
  main.c .acts .btn {
    width: 100%;
  }
  main.c .code .v {
    font-size: 24px;
    letter-spacing: .14em;
  }
  /* P0 — prevent 360 overflow: cards + content fit the viewport, long
     device codes wrap. */
  main.c .cc,
  main.c #card,
  main.c .code,
  main.c .mc {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }
  /* R1  -  mobile h1 = 24. */
  main.c .cc h1 {
    font-size: 24px !important;
  }
}