/* Staff page. Files under /assets are cached for a year as immutable, so bump the
   number in this file's name (and in staff/index.html) when changing it. */

[hidden]{display:none !important}
.brand--light{color:#fff; margin-right:0}
.staff .eyebrow{color:var(--link)}

/* sign-in */
.gate{min-height:100vh; min-height:100dvh; display:grid}
@media (min-width:56rem){ .gate{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.gate__brand{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:3rem;
  min-height:21rem; padding:clamp(1.5rem,4vw,3.5rem); background:var(--deep); color:var(--deep-ink);
}
.gate__brand > *{position:relative}
.gate__brand .brand{align-self:flex-start}
.gate__brand .gate__mark{position:absolute; right:-4%; bottom:-10%; width:auto; height:clamp(15rem,42vw,35rem); opacity:.2}
.gate__intro{max-width:30rem}
.staff .gate__intro .eyebrow{color:var(--deep-link)}
.gate__intro h2{font-size:clamp(2.125rem,4.4vw,3.375rem); line-height:1.05; letter-spacing:-.03em}
.gate__intro p{margin-top:1rem; font-size:1.125rem; color:var(--deep-ink-2)}
.gate__panel{display:flex; flex-direction:column; justify-content:center; padding:clamp(2rem,5vw,4rem) clamp(1.5rem,5vw,4.5rem); background:var(--surface)}
.gate__view{width:100%; max-width:26rem; margin-inline:auto}
.gate__view h1{font-size:2.125rem; line-height:1.1; letter-spacing:-.025em}
.gate__view > .muted{margin-top:.75rem}
.gate__view .actions{margin-top:1.5rem}
.google-btn{
  width:100%; min-height:56px; margin-top:1.75rem; display:flex; align-items:center; justify-content:center; gap:.75rem;
  border:1px solid var(--rule-strong); border-radius:12px; background:#fff; color:var(--ink); font:inherit; font-weight:700; cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.google-btn:hover{border-color:var(--link); box-shadow:0 6px 16px rgba(12,36,42,.1)}
.google-btn:disabled,.link-btn:disabled{opacity:.6; cursor:progress}
.link-btn{
  display:block; width:100%; min-height:44px; margin-top:.5rem; border:0; background:none; color:var(--link); font:inherit;
  font-size:.9375rem; font-weight:600; text-decoration:underline; cursor:pointer;
}
.gate__message{margin-top:1rem; padding:.75rem 1rem; border-radius:10px; background:#FBEBC8; color:#5C3A00; font-size:.9375rem}
.gate__back{display:flex; justify-content:center}
.spinner{
  display:block; width:32px; height:32px; margin-bottom:1.25rem; border:3px solid var(--rule); border-top-color:var(--link);
  border-radius:50%; animation:staff-spin .9s linear infinite;
}
@keyframes staff-spin{ to{transform:rotate(360deg)} }

/* applications */
.apps-hero{position:relative; overflow:hidden; background:var(--deep); color:var(--deep-ink)}
.apps-hero__mark{position:absolute; right:2%; top:-1.875rem; width:auto; height:21.25rem; opacity:.14}
.apps-hero__inner{position:relative; max-width:65rem; padding-block:.75rem clamp(2rem,5vw,3rem)}
.apps-nav{display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1rem; margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.apps-nav .brand{margin-right:auto}
.apps-nav__email{font-size:.875rem; color:var(--deep-ink-2); overflow-wrap:anywhere}
.apps-nav__out{
  min-height:44px; padding:0 .875rem; border:1px solid #3E6470; border-radius:10px; background:transparent; color:#fff;
  font:inherit; font-size:.9375rem; font-weight:700; cursor:pointer; transition:border-color .15s;
}
.apps-nav__out:hover{border-color:#fff}
.staff .apps-hero .eyebrow{color:var(--deep-link); margin-bottom:.625rem}
.apps-hero h1{font-size:clamp(2.25rem,5vw,3.625rem); outline:0}
.apps-hero p{margin-top:.625rem; font-size:1.0625rem; color:var(--deep-ink-2)}
.apps-hero :focus-visible{outline-color:var(--deep-link)}
.apps-main{max-width:65rem; padding-block:1.5rem 2.5rem}
.apps-note{margin-top:1.5rem}

.stage-filter{display:inline-flex; flex-wrap:wrap; gap:.25rem; padding:.25rem; margin-bottom:1.25rem; border:1px solid var(--rule); border-radius:12px; background:var(--surface)}
.stage-filter button{min-height:44px; padding:0 1rem; border:0; border-radius:9px; background:transparent; color:var(--ink-2); font:inherit; font-size:.9375rem; font-weight:700; cursor:pointer; transition:background-color .15s,color .15s}
.stage-filter button[aria-pressed="true"]{background:var(--ink); color:#fff}

.apps-list{display:grid; gap:1rem}
.app-card{display:flex; flex-wrap:wrap; gap:1.25rem 2rem; padding:clamp(1.25rem,3vw,1.75rem); border:1px solid var(--rule); border-radius:18px; background:var(--surface)}
.app-card__id{flex:1 1 11.25rem; display:flex; align-items:flex-start; gap:.875rem; min-width:0}
.app-card__id img{width:52px; height:52px; flex:none; border-radius:12px; object-fit:contain}
.app-card__id h2{margin-top:.5rem; font-size:1.5rem; line-height:1.15; letter-spacing:-.02em}
.app-card__rows{flex:999 1 28.75rem; min-width:0; display:grid; gap:1.125rem}
.app-row{display:flex; flex-wrap:wrap; gap:.375rem .75rem}
.app-row h3{flex:0 0 6.5rem; margin:0; padding-top:.875rem; font-family:inherit; font-size:.9375rem; letter-spacing:0}
.app-row__links{flex:1 1 18.75rem; min-width:0; display:grid; gap:.5rem; padding-left:1.625rem}

.dest{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.125rem .75rem; min-height:56px; padding:.5rem .875rem;
  border:1px solid var(--rule); border-radius:12px; background:var(--surface); color:var(--ink); text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.dest--stg{background:#FFF8E8; border-color:#EAD8A6}
.dest__tick{position:absolute; left:calc(-1.25rem - 1px); top:27px; width:1.25rem; height:2px; background:#4ABFBB; transform-origin:left}
.dest__line{position:absolute; left:calc(-1.25rem - 1px); top:27px; bottom:-35px; width:2px; background:linear-gradient(180deg,#67C192,#16BAE4); transform-origin:top}
.dest__stage{flex:0 0 6.5rem; display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:700; color:#0F5F47}
.dest--stg .dest__stage{color:#6B4300}
.dest__stage i{width:10px; height:10px; flex:none; border-radius:50%; background:#1C8A68}
.dest--stg .dest__stage i{background:#C98A12}
.dest__host{flex:1 1 12.5rem; min-width:0; font-family:'JBMono',ui-monospace,Menlo,monospace; font-weight:500; font-size:.8125rem; color:var(--ink-2); overflow-wrap:anywhere}
.dest svg{flex:none; color:var(--link)}
.dest:hover{border-color:var(--link)}
.dest--stg:hover{border-color:#C98A12}

/* motion: signing in reveals the branches from each interface toward its environments */
@media (prefers-reduced-motion:no-preference){
  @keyframes staff-rise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
  @keyframes staff-slide{ from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none} }
  @keyframes staff-grow-x{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
  @keyframes staff-grow-y{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
  @keyframes staff-fade{ from{opacity:0} to{opacity:1} }

  .gate__view:not([hidden]){animation:staff-fade .25s ease both}
  #view-signed-out:not([hidden]){animation:none}
  .apps-hero__inner > *{animation:staff-fade .35s ease both}
  .app-card{animation:staff-rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--card) * 90ms)}
  .dest{animation:staff-slide .4s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--card) * 90ms + var(--link-i) * 110ms + 340ms)}
  .dest__tick{animation:staff-grow-x .22s ease-out both; animation-delay:calc(var(--card) * 90ms + var(--link-i) * 110ms + 240ms)}
  .dest__line{animation:staff-grow-y .3s ease-out both; animation-delay:calc(var(--card) * 90ms + var(--link-i) * 110ms + 300ms)}

  /* Changing the filter shouldn't replay the whole entrance. */
  .apps-list.is-filtering .app-card{animation:none}
  .apps-list.is-filtering .dest{animation:staff-fade .2s ease both}
  .apps-list.is-filtering .dest__tick,.apps-list.is-filtering .dest__line{animation:none}

  @media (hover:hover){
    .dest:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(12,36,42,.08)}
  }
}