/* The factory hub (#80): Material 3 Expressive, as close to Google/Android as plain CSS gets.
   Color roles from a teal seed (light + dark scheme), Roboto (Android's own face), the M3 type
   scale with emphasized weights, expressive shapes (extra-large cards, full pills, shape morph on
   press), spring motion, a large top app bar that collapses on scroll, state layers. */

:root {
  color-scheme: light dark;
  /* M3 color roles, light (seed #1f6f78) */
  --md-primary: #00696f; --md-on-primary: #ffffff;
  --md-primary-container: #9cf0f7; --md-on-primary-container: #002022;
  --md-secondary-container: #cce8e9; --md-on-secondary-container: #051f21;
  --md-tertiary-container: #d6e3ff; --md-on-tertiary-container: #071c36;
  --md-error: #ba1a1a; --md-error-container: #ffdad6; --md-on-error-container: #410002;
  --md-surface: #f4fbfb; --md-on-surface: #161d1d; --md-on-surface-variant: #3f4949;
  --md-surface-container-lowest: #ffffff; --md-surface-container-low: #eef5f5;
  --md-surface-container: #e9efef; --md-surface-container-high: #e3e9e9; --md-surface-container-highest: #dde4e4;
  --md-outline: #6f7979; --md-outline-variant: #bec8c9;
  /* shape (M3 Expressive corner scale) */
  --md-shape-xs: 4px; --md-shape-sm: 8px; --md-shape-md: 12px; --md-shape-lg: 16px;
  --md-shape-xl: 28px; --md-shape-xxl: 48px; --md-shape-full: 999px;
  /* motion: expressive springs (CSS linear() approximations of the M3 spring tokens) */
  --md-spring-fast: linear(0, 0.26 8%, 0.85 22%, 1.06 32%, 1.04 42%, 1 60%, 1);
  --md-spring-default: linear(0, 0.18 7%, 0.66 19%, 0.97 30%, 1.05 40%, 1.02 55%, 1 72%, 1);
  --md-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --font: "Google Sans Flex", "Google Sans", "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #80d4db; --md-on-primary: #003739;
    --md-primary-container: #004f53; --md-on-primary-container: #9cf0f7;
    --md-secondary-container: #324b4d; --md-on-secondary-container: #cce8e9;
    --md-tertiary-container: #364763; --md-on-tertiary-container: #d6e3ff;
    --md-error: #ffb4ab; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
    --md-surface: #0e1415; --md-on-surface: #dde4e4; --md-on-surface-variant: #bec8c9;
    --md-surface-container-lowest: #090f10; --md-surface-container-low: #161d1d;
    --md-surface-container: #1a2121; --md-surface-container-high: #252b2b; --md-surface-container-highest: #2f3636;
    --md-outline: #899393; --md-outline-variant: #3f4949;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--md-surface); }
body {
  margin: 0; min-height: 100dvh; background: var(--md-surface); color: var(--md-on-surface);
  font: 400 16px/24px var(--font); letter-spacing: 0.5px;
  overscroll-behavior-y: contain; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: var(--md-primary); }
button { font: inherit; letter-spacing: inherit; }
.icon { width: 24px; height: 24px; flex: none; }
.spacer { flex: 1; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--md-ease-emphasized); }

/* state layers (hover 8%, pressed 10%) */
.icon-btn, .avatar, .menu-item, .item-link, .google-btn, .fab { position: relative; overflow: hidden; isolation: isolate; }
.icon-btn::after, .avatar::after, .menu-item::after, .item-link::after, .google-btn::after, .fab::after {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 150ms linear;
  z-index: -1; border-radius: inherit; pointer-events: none;
}
@media (hover: hover) { .icon-btn:hover::after, .avatar:hover::after, .menu-item:hover::after, .item-link:hover::after,
  .google-btn:hover::after, .fab:hover::after { opacity: 0.08; } }
.icon-btn:active::after, .avatar:active::after, .menu-item:active::after, .item-link:active::after,
.google-btn:active::after, .fab:active::after { opacity: 0.1; }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* --- top app bar: large, collapses to small on scroll ------------------------------------ */
.appbar {
  position: sticky; top: 0; z-index: 10; background: var(--md-surface);
  padding: 4px 4px 4px 16px; transition: background-color 200ms linear;
  animation: appbar-tint linear both; animation-timeline: scroll(root); animation-range: 0 72px;
}
@keyframes appbar-tint { to { background: var(--md-surface-container); } }
.appbar-row { display: flex; align-items: center; gap: 4px; height: 56px; }
.appbar-logo { border-radius: var(--md-shape-md); margin-right: 8px; }
.appbar-small-title {
  font: 500 22px/28px var(--font); letter-spacing: 0; opacity: 0;
  animation: fade-in linear both; animation-timeline: scroll(root); animation-range: 40px 88px;
}
@keyframes fade-in { to { opacity: 1; } }
.appbar-headline {
  max-width: 840px; margin: 0 auto; padding: 12px 16px 20px; font: 600 36px/44px var(--font); letter-spacing: -0.25px;
  transform-origin: left bottom;
  animation: headline-collapse linear both; animation-timeline: scroll(root); animation-range: 0 88px;
}
@keyframes headline-collapse { to { opacity: 0; transform: translateY(-12px) scale(0.86); } }
@supports not (animation-timeline: scroll()) { .appbar-small-title { opacity: 0; } }

.icon-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--md-shape-full);
  color: var(--md-on-surface-variant); background: none; border: 0; cursor: pointer;
  transition: border-radius 300ms var(--md-spring-fast);
}
.icon-btn:active { border-radius: var(--md-shape-md); }
.icon-btn.spin .icon { animation: spin 800ms var(--md-ease-emphasized) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.avatar {
  display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 4px 8px 4px 4px;
  border-radius: var(--md-shape-full); border: 0; cursor: pointer;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
  font: 500 16px/1 var(--font); transition: border-radius 300ms var(--md-spring-fast);
}
.avatar:active { border-radius: var(--md-shape-md); }
.avatar-lg { width: 48px; height: 48px; margin: 0; font-size: 20px; cursor: default; }

/* --- account menu (native popover) -------------------------------------------------------- */
.menu {
  margin: 0; inset: auto 12px auto auto; top: calc(env(safe-area-inset-top) + 64px);
  min-width: 260px; max-width: calc(100vw - 24px); padding: 8px 0; border: 0;
  border-radius: var(--md-shape-lg); background: var(--md-surface-container); color: var(--md-on-surface);
  box-shadow: 0 2px 6px 2px rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.3);
  opacity: 0; transform: translateY(-8px) scale(0.96); transform-origin: top right;
  transition: opacity 150ms linear, transform 350ms var(--md-spring-default), overlay 350ms allow-discrete, display 350ms allow-discrete;
}
.menu:popover-open { opacity: 1; transform: none; }
@starting-style { .menu:popover-open { opacity: 0; transform: translateY(-8px) scale(0.96); } }
.menu-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 8px; }
.menu-who { display: flex; flex-direction: column; min-width: 0; }
.menu-who .label { font: 500 12px/16px var(--font); color: var(--md-on-surface-variant); }
.menu-who .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.menu form { margin: 0; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 16px;
  border: 0; background: none; color: var(--md-on-surface); text-align: left; cursor: pointer; font-size: 16px;
}
.menu-item .icon { color: var(--md-on-surface-variant); }

/* --- content ------------------------------------------------------------------------------ */
main { max-width: 840px; margin: 0 auto; padding: 0 16px 112px; }
.summary { margin: 0 0 16px 4px; color: var(--md-on-surface-variant); font: 500 14px/20px var(--font); letter-spacing: 0.1px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.item {
  background: var(--md-surface-container-low); border-radius: var(--md-shape-xl); padding: 4px 4px 16px;
  animation: rise 500ms var(--md-spring-default) both;
}
.item:nth-child(2) { animation-delay: 40ms; } .item:nth-child(3) { animation-delay: 80ms; } .item:nth-child(n+4) { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.item-link {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 16px 8px 16px;
  border-radius: calc(var(--md-shape-xl) - 4px); color: inherit; text-decoration: none;
  transition: border-radius 350ms var(--md-spring-fast);
}
.item-link:active { border-radius: var(--md-shape-lg); }
.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 12px/16px var(--font); letter-spacing: 0.5px; color: var(--md-on-surface-variant); }
.item-meta .repo { color: var(--md-primary); text-transform: uppercase; letter-spacing: 0.8px; }
.dot { opacity: 0.6; }
.item-title { grid-column: 1; margin: 0; font: 500 18px/24px var(--font); letter-spacing: 0; overflow-wrap: anywhere; }
.item-open { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--md-on-surface-variant); }
.item-note { margin: 4px 20px 0; color: var(--md-on-surface-variant); font-size: 14px; line-height: 20px; }
.qs { list-style: none; margin: 4px 12px 0; padding: 0; display: grid; gap: 8px; }
.q { background: var(--md-surface-container-lowest); border-radius: var(--md-shape-lg); padding: 12px 16px 14px; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--md-shape-sm);
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font: 500 12px/16px var(--font); letter-spacing: 0.5px;
}
.q-ask { margin: 8px 0 0; overflow-wrap: anywhere; }
.rec {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px;
  border-radius: var(--md-shape-md); background: var(--md-primary-container); color: var(--md-on-primary-container);
  font-size: 14px; line-height: 20px;
}
.rec .icon, .opt .icon { width: 18px; height: 18px; margin-top: 1px; }
.opts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--md-shape-md);
  border: 1px solid var(--md-outline-variant); font-size: 14px; line-height: 20px;
}
.opt-key { font-weight: 700; min-width: 1ch; }
.opt-text { flex: 1; overflow-wrap: anywhere; }
.opt-rec { border-color: transparent; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.progress {
  display: block; width: calc(100% - 40px); height: 4px; margin: 14px 20px 0; border: 0; border-radius: var(--md-shape-full);
  appearance: none; background: var(--md-secondary-container); overflow: hidden;
}
.progress::-webkit-progress-bar { background: var(--md-secondary-container); }
.progress::-webkit-progress-value { background: var(--md-primary); border-radius: var(--md-shape-full); }
.progress::-moz-progress-bar { background: var(--md-primary); }
.empty { display: grid; justify-items: center; text-align: center; padding: 48px 16px; color: var(--md-on-surface-variant); }
.empty .icon { width: 72px; height: 72px; color: var(--md-primary); stroke-width: 1.5; }
.empty h2 { margin: 16px 0 4px; font: 500 24px/32px var(--font); color: var(--md-on-surface); }
.empty p { margin: 0; }
.foot { margin: 24px 4px 0; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.banner {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 14px 16px;
  border-radius: var(--md-shape-lg); background: var(--md-surface-container-high); font-size: 14px; line-height: 20px; text-align: left;
}
.banner.error { background: var(--md-error-container); color: var(--md-on-error-container); }

/* --- extended FAB (Install) --------------------------------------------------------------- */
.fab {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 16px; border: 0;
  border-radius: var(--md-shape-lg); background: var(--md-primary-container); color: var(--md-on-primary-container);
  font: 500 16px/24px var(--font); letter-spacing: 0.15px; cursor: pointer;
  box-shadow: 0 4px 8px 3px rgb(0 0 0 / 0.15), 0 1px 3px rgb(0 0 0 / 0.3);
  transition: border-radius 350ms var(--md-spring-fast), transform 450ms var(--md-spring-default);
}
.fab:active { border-radius: var(--md-shape-xl); transform: scale(0.97); }
.fab[hidden] { display: none; }

/* --- pull to refresh (installed app) ------------------------------------------------------ */
.ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); z-index: 20; width: 40px; height: 40px;
  margin-left: -20px; border-radius: var(--md-shape-full); background: var(--md-surface-container-high);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); display: grid; place-items: center;
  transform: translateY(calc(var(--pull, 0) * 1px - 56px)); opacity: var(--pull-o, 0); pointer-events: none;
}
.ptr.release { transition: transform 400ms var(--md-spring-default), opacity 200ms linear; }
.ptr-spinner {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--md-primary); border-right-color: transparent;
  transform: rotate(calc(var(--pull, 0) * 4deg));
}
.ptr.loading .ptr-spinner { animation: spin 700ms linear infinite; }

/* --- sign in ------------------------------------------------------------------------------ */
.page-signin main { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.signin {
  width: 100%; max-width: 420px; text-align: center; padding: 40px 24px 28px;
  background: var(--md-surface-container-low); border-radius: var(--md-shape-xxl);
  animation: rise 600ms var(--md-spring-default) both;
}
.signin-logo { width: 96px; height: 96px; border-radius: 30px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); }
.signin-title { margin: 20px 0 8px; font: 600 32px/40px var(--font); letter-spacing: 0; }
.signin-sub { margin: 0 auto 24px; max-width: 30ch; color: var(--md-on-surface-variant); }
.signin-actions { display: grid; justify-items: center; gap: 12px; min-height: 44px; }
.gsi { display: flex; justify-content: center; width: 100%; max-width: 320px; min-height: 0; }
.gsi:empty { display: none; }
/* with the Google-rendered button up, the redirect button becomes a quiet secondary link (it stays:
   GIS can render a button that then fails) */
.gsi.ready + .google-btn {
  width: auto; height: 40px; border: 0; background: none; color: var(--md-primary); font-size: 14px;
}
.gsi.ready + .google-btn .g-logo, .gsi.ready + .google-btn span { display: none; }
.gsi.ready + .google-btn::before { content: "Sign in another way"; }
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 320px;
  height: 44px; padding: 0 16px; border-radius: var(--md-shape-full); border: 1px solid #747775;
  background: #ffffff; color: #1f1f1f; text-decoration: none;
  font: 500 14px/20px Roboto, var(--font); letter-spacing: 0.25px;
  transition: border-radius 300ms var(--md-spring-fast);
}
.google-btn:active { border-radius: var(--md-shape-md); }
@media (prefers-color-scheme: dark) { .google-btn { background: #131314; color: #e3e3e3; border-color: #8e918f; } }
.g-logo { width: 20px; height: 20px; flex: none; }
.hint { margin: 0; font-size: 14px; color: var(--md-error); }
.signin-foot { margin: 24px 0 0; font: 500 12px/16px var(--font); color: var(--md-on-surface-variant); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  @view-transition { navigation: none; }
}
@media (min-width: 600px) { .appbar { padding-left: 24px; } .appbar-headline { padding-left: 24px; padding-right: 24px; } main { padding-left: 24px; padding-right: 24px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }