/* HWD · the door. One modal, used by the landing page and the Studio.
   Sharp corners, Jost and Plex Mono, the same ink and gold as everything else. */
.hwd-auth { position: fixed; inset: 0; z-index: 900; display: none; }
.hwd-auth.on { display: block; }
.hwd-auth .scrim { position: absolute; inset: 0; background: rgba(23,27,31,.42); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: hwdAuthFade .22s ease both; }
.hwd-auth .holder { position: absolute; inset: 0; display: flex; padding: 24px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* margin:auto, not align-items:center. Centred the other way, a card taller than the screen
   overflows past the top and that part can never be scrolled to — which is what happened to the
   sign-up card on a short screen, or any phone with the keyboard up. */
.hwd-auth .box { position: relative; margin: auto; width: 404px; max-width: 100%; display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: #F8F9F9; box-shadow: 0 0 0 1px rgba(23,27,31,.14), 0 30px 70px rgba(23,27,31,.32); animation: hwdAuthUp .26s cubic-bezier(.2,.7,.1,1) both; }
@keyframes hwdAuthFade { from { opacity: 0; } }
@keyframes hwdAuthUp { from { opacity: 0; transform: translateY(14px); } }

.hwd-auth .x { position: absolute; z-index: 2; top: 6px; right: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: #8A949B; }
.hwd-auth .x:hover { color: #171B1F; }
/* The form scrolls; everything that tells you where you are stays put. On the sign-in view the
   mark, the heading and the two tabs sit above the form in their own block, so that block keeps
   its height and only the one below it moves. */
.hwd-auth .pad { padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hwd-auth .pad.hwd-head { flex: none; overflow: visible; }
.hwd-auth .tabs { flex: none; }
.hwd-auth .brand { display: flex; align-items: center; gap: 10px; font-family: Michroma, monospace; font-size: 13px; letter-spacing: .22em; color: #171B1F; }
.hwd-auth .brand i { width: 6px; height: 6px; border-radius: 50%; background: #C69A2B; margin-left: -4px; }
.hwd-auth h2 { margin: 0; font-weight: 200; font-size: 29px; line-height: 1.1; letter-spacing: -.01em; color: #171B1F; }
.hwd-auth .why { margin: 0; font-size: 15px; line-height: 1.5; color: #4A535A; }
.hwd-auth .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8A949B; }

.hwd-auth .tabs { display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 -1px 0 rgba(23,27,31,.18); }
.hwd-auth .tab { height: 44px; background: none; border: 0; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8A949B; }
.hwd-auth .tab[aria-selected="true"] { color: #171B1F; box-shadow: inset 0 -2px 0 #171B1F; }

.hwd-auth .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 50px; padding: 0 20px; width: 100%; border: 0; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; background: none; color: #171B1F; }
.hwd-auth .btn.dark { background: #171B1F; color: #F8F9F9; }
.hwd-auth .btn.line { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(23,27,31,.3); }
.hwd-auth .btn.line:hover { background: #EDEFF1; }
.hwd-auth .btn[disabled] { opacity: .5; cursor: default; }
.hwd-auth .btn.g { position: relative; }
.hwd-auth .btn.g svg { position: absolute; left: 18px; }
/* Google's own button, scaled invisibly over ours: theirs takes the click, ours is the one
   that is seen, and the hover has to be handed across because the frame swallows it. */
.hwd-auth .gwrap { position: relative; }
.hwd-auth .gwrap:hover .btn.line { background: #EDEFF1; }
/* The holder itself never takes a click — empty, as it is until Google's script arrives and
   for good if it never does, it would sit on top of our button and swallow every press.
   Only what Google actually renders into it is clickable. */
.hwd-auth .gsi { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.hwd-auth .gsi > * { position: absolute; top: 0; left: 0; pointer-events: auto; }
.hwd-auth .spin { width: 14px; height: 14px; border: 1.5px solid rgba(248,249,249,.35); border-top-color: #F8F9F9; border-radius: 50%; animation: hwdSpin .8s linear infinite; }
.hwd-auth .btn.line .spin { border-color: rgba(23,27,31,.25); border-top-color: #171B1F; }
@keyframes hwdSpin { to { transform: rotate(360deg); } }

.hwd-auth .or { display: flex; align-items: center; gap: 14px; }
.hwd-auth .or::before, .hwd-auth .or::after { content: ""; height: 1px; background: rgba(23,27,31,.18); flex: 1; }
.hwd-auth .field { display: flex; flex-direction: column; gap: 7px; }
.hwd-auth .field .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hwd-auth input { height: 48px; padding: 0 14px; width: 100%; background: #FFFFFF; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(23,27,31,.18); font-family: Jost, Futura, sans-serif; font-weight: 300; font-size: 16px; color: #171B1F; }
.hwd-auth input:focus { outline: none; box-shadow: inset 0 0 0 1px #C69A2B, 0 0 0 3px rgba(198,154,43,.18); }
.hwd-auth input.bad { box-shadow: inset 0 0 0 1px #B5483B; }
.hwd-auth .pw { position: relative; }
.hwd-auth .pw input { padding-right: 62px; }
.hwd-auth .peek { position: absolute; right: 0; top: 0; height: 48px; padding: 0 14px; background: none; border: 0; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8A949B; }
.hwd-auth .peek:hover { color: #171B1F; }
.hwd-auth .hint { display: block; font-size: 12.5px; color: #8A949B; line-height: 1.45; }
.hwd-auth .link { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 2px; cursor: pointer; color: #4A535A; }
.hwd-auth .link:hover { color: #171B1F; }

/* The beat that says it worked. The ring draws, the tick follows it, and the words are there
   from the first frame so a reduced-motion setting loses nothing but the drawing. */
.hwd-auth .pad.land { align-items: flex-start; gap: 14px; padding-bottom: 34px; }
.hwd-auth .tick { color: #C69A2B; margin-top: 6px; }
.hwd-auth .tick svg { display: block; }
.hwd-auth .tick .ring { stroke-dasharray: 151; stroke-dashoffset: 151; animation: hwdRing .5s cubic-bezier(.3,.7,.2,1) forwards; }
.hwd-auth .tick .mark { stroke-dasharray: 30; stroke-dashoffset: 30; animation: hwdMark .32s cubic-bezier(.3,.7,.2,1) .38s forwards; }
@keyframes hwdRing { to { stroke-dashoffset: 0; } }
@keyframes hwdMark { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hwd-auth .tick .ring, .hwd-auth .tick .mark { animation: none; stroke-dashoffset: 0; }
}

.hwd-auth .err { padding: 10px 12px; font-size: 14.5px; line-height: 1.45; color: #A13E32; background: rgba(181,72,59,.08); }
.hwd-auth .ok { padding: 12px 14px; font-size: 14.5px; line-height: 1.45; color: #8A6914; background: rgba(198,154,43,.12); }
.hwd-auth .code { display: flex; gap: 8px; }
.hwd-auth .code input { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 22px; letter-spacing: .1em; height: 56px; padding: 0; }
.hwd-auth .foot { flex: none; padding: 14px 32px; background: #EDEFF1; box-shadow: inset 0 1px 0 rgba(23,27,31,.12); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hwd-auth .fine { margin: 0; font-size: 12px; line-height: 1.45; color: #8A949B; }
.hwd-auth .fine a { color: #8A6914; border-bottom: 1px solid rgba(198,154,43,.5); text-decoration: none; }
.hwd-auth .hwd-cap { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8A6914; background: rgba(198,154,43,.14); padding: 3px 7px; align-self: flex-start; }
.hwd-auth .turnstile:empty { display: none; }

/* The account button and its menu, in every header on the site.

   Every class in here is named hwd-something for a reason the Studio found the hard way: this
   menu used to be a plain `.menu`, and the Studio has a `.menu` of its own — its bottom sheet —
   declared `position: fixed; inset: 0`. The page's stylesheet loads after this one, so the four
   offsets `inset` writes came through underneath the two this rule sets, and the account menu was
   laid out from the left edge of a 38 px button with nowhere to go but off the side of the screen,
   and squeezed to no height at all. A component dropped into somebody else's page cannot hold a
   name that page might want. The offsets are also written out in full below, so that nothing a
   host page says about position can reach in again. */
.hwd-acct { position: relative; }
.hwd-acct .who { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: none; border: 0; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; color: #4A535A; white-space: nowrap; }
.hwd-acct .who:hover { color: #171B1F; }
/* Signed out it is a small button, sized to the words in it. Pages over a photograph say what it
   should look like there; this is what it looks like on paper. */
.hwd-acct .who.guest { width: auto; height: 36px; padding: 0 13px; color: #171B1F; box-shadow: inset 0 0 0 1px rgba(23,27,31,.2); }
.hwd-acct .who.guest:hover { background: rgba(23,27,31,.05); }
.hwd-acct .who:hover .pip { box-shadow: 0 0 0 2px rgba(198,154,43,.5); }
.hwd-acct .pip { width: 30px; height: 30px; transition: box-shadow .14s; flex: none; border-radius: 50%; background: #171B1F; color: #F8F9F9; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; text-transform: uppercase; background-size: cover; background-position: center; }
.hwd-acct .hwd-acct-menu { position: absolute; top: calc(100% + 8px); right: 0; bottom: auto; left: auto; width: 236px; max-width: calc(100vw - 24px); height: auto; max-height: none; margin: 0; background: #F8F9F9; box-shadow: 0 0 0 1px rgba(23,27,31,.14), 0 20px 44px rgba(23,27,31,.22); display: none; flex-direction: column; z-index: 800; }
.hwd-acct .hwd-acct-menu.on { display: flex; }
.hwd-acct .hwd-acct-menu .hwd-acct-head { padding: 13px 15px; box-shadow: inset 0 -1px 0 rgba(23,27,31,.12); display: flex; flex-direction: column; gap: 3px; }
.hwd-acct .hwd-acct-menu .hwd-acct-head b { font-weight: 400; font-size: 14px; color: #171B1F; overflow: hidden; text-overflow: ellipsis; }
.hwd-acct .hwd-acct-menu a, .hwd-acct .hwd-acct-menu button { display: flex; align-items: center; width: auto; min-height: 42px; height: 42px; padding: 0 15px; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left; text-decoration: none; font-family: Jost, Futura, sans-serif; font-weight: 300; font-size: 14.5px; letter-spacing: normal; color: #171B1F; }
.hwd-acct .hwd-acct-menu a:hover, .hwd-acct .hwd-acct-menu button:hover { background: #EDEFF1; }

@media (max-width: 560px) {
  .hwd-auth .holder { padding: 0; }
  /* A sheet off the bottom edge. It never grows past the screen — the form inside it scrolls
     instead — so the mark, the heading and the two tabs stay put while somebody types. */
  .hwd-auth .box { width: 100%; margin: auto auto 0; max-height: 100vh; max-height: 100dvh; animation: hwdAuthSheet .3s cubic-bezier(.2,.7,.1,1) both; will-change: transform; }
  .hwd-auth .pad { padding: 20px 20px 18px; gap: 14px; }
  .hwd-auth .foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
  .hwd-auth h2 { font-size: 26px; }
  .hwd-auth .btn { height: 52px; }
  .hwd-auth .x { top: 2px; right: 2px; }
  /* Blurring the whole page behind a sheet that is sliding up is the one thing here that feels
     cheap on a mid-range phone: the blur repaints every frame of the animation. The sheet covers
     most of the screen anyway, so a plain scrim costs nothing and reads the same. */
  .hwd-auth .scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(23,27,31,.55); }
  @keyframes hwdAuthSheet { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .hwd-auth .box, .hwd-auth .scrim { animation: none; }
}

/* headers get tight before the modal does */


/* ---------- HWD · the small door ----------
   The question the product asks, in the product's own clothes. Same furniture as the sign-in
   door above: sharp corners, ink and gold, and a sheet off the bottom edge on a phone. */
.hwd-say { position: fixed; inset: 0; z-index: 950; display: none; }
.hwd-say.on { display: block; }
.hwd-say .say-scrim { position: absolute; inset: 0; background: rgba(23,27,31,.42); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: hwdAuthFade .2s ease both; }
.hwd-say .say-holder { position: absolute; inset: 0; display: flex; padding: 24px; overflow: auto; overscroll-behavior: contain; }
.hwd-say .say-box { position: relative; margin: auto; width: 440px; max-width: 100%; display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: #F8F9F9; box-shadow: 0 0 0 1px rgba(23,27,31,.14), 0 30px 70px rgba(23,27,31,.32); animation: hwdAuthUp .24s cubic-bezier(.2,.7,.1,1) both; }
.hwd-say .say-box.danger { box-shadow: 0 0 0 1px rgba(181,72,59,.45), 0 30px 70px rgba(23,27,31,.32); }
.hwd-say .say-x { position: absolute; z-index: 2; top: 6px; right: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: #8A949B; }
.hwd-say .say-x:hover { color: #171B1F; }
.hwd-say .say-pad { padding: 28px 32px 22px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hwd-say .say-brand { font-family: Michroma, monospace; font-size: 13px; letter-spacing: .22em; color: #171B1F; display: inline-flex; align-items: baseline; }
.hwd-say .say-brand i { width: 6px; height: 6px; border-radius: 50%; background: #C69A2B; margin-left: 2px; }
.hwd-say h2 { margin: 0; font-weight: 200; font-size: 27px; line-height: 1.12; letter-spacing: -.01em; color: #171B1F; }
.hwd-say .say-body { margin: 0; font-size: 15.5px; line-height: 1.55; color: #4A535A; }
.hwd-say .say-foot { flex: none; display: flex; gap: 10px; padding: 16px 32px calc(20px + env(safe-area-inset-bottom)); background: #EDEFF1; box-shadow: inset 0 1px 0 rgba(23,27,31,.12); }
.hwd-say .say-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 18px; border: 0; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; background: none; color: #171B1F; }
.hwd-say .say-btn.dark { background: #171B1F; color: #F8F9F9; }
.hwd-say .say-btn.bad { background: #B5483B; color: #F8F9F9; }
.hwd-say .say-btn.line { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(23,27,31,.3); }
.hwd-say .say-btn.line:hover { background: #EDEFF1; }
.hwd-say .say-btn:focus-visible { outline: 2px solid #C69A2B; outline-offset: -3px; }
@media (max-width: 560px) {
  .hwd-say .say-holder { padding: 0; }
  .hwd-say .say-box { width: 100%; margin: auto auto 0; max-height: 100vh; max-height: 100dvh; animation: hwdAuthSheet .28s cubic-bezier(.2,.7,.1,1) both; }
  .hwd-say .say-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(23,27,31,.55); }
  .hwd-say .say-pad { padding: 22px 20px 18px; }
  .hwd-say .say-foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); flex-direction: column-reverse; }
  .hwd-say h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hwd-say .say-box, .hwd-say .say-scrim { animation: none; }
}