/* Signed-in controls for both landing pages (landing.html, factory-landing.html).
   landing-account.js fills #nav-signed and sets body.is-signed-in, which hides
   everything marked data-signed-out: Log in, Start free, Contact us and the
   switch to the other audience's page. The card is the same account card the
   storefront and /home use, so it reads as one product wherever it opens. */

.is-signed-in [data-signed-out] { display: none !important; }
.nav-signed { display: flex; align-items: center; gap: 12px; }
.nav-signed[hidden] { display: none !important; }

/* The way into their side of Ceramify: the buyer's home page, or the
   factory's dashboard. Same shape as /home's back button. The landing pages
   hide most nav links on small screens, so this one opts back in. */
.nav-links .nav-signed a.acct-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 16px 0 10px;
  border: 1px solid #E0D8CC;
  border-radius: 999px;
  background: #fff;
  font: 600 14px var(--font-sans);
  color: #2C2420;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nav-links .nav-signed a.acct-pill:hover { border-color: #C97D4E; box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05); }
.acct-pill-arrow { width: 15px; height: 15px; color: #A0582A; transition: transform .18s ease; }
/* Holds the button's place for the second the account details take. */
.acct-pill.is-loading {
  display: inline-block;
  width: 150px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #EFE7DB;
  background: linear-gradient(90deg, #F6F1EA 25%, #FDFBF7 50%, #F6F1EA 75%) 0 0 / 200% 100%;
  animation: acct-loading 1.2s ease-in-out infinite;
}
@keyframes acct-loading { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .acct-pill.is-loading { animation: none; } }
@media (max-width: 640px) { .acct-pill.is-loading { width: 64px; height: 38px; } }
.acct-pill:hover .acct-pill-arrow { transform: translateX(2px); }
.acct-stack { display: inline-flex; }
.acct-stack:empty { display: none; }
.acct-stack span,
.acct-mark {
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 9.5px var(--font-sans);
  background: #A0582A center / cover no-repeat;
}
.acct-stack span { width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; border: 2px solid #fff; }
.acct-stack span:first-child { margin-left: 0; }
.acct-mark { width: 28px; height: 28px; border-radius: 8px; font: 800 11px var(--font-sans); }

.acct-wrap { position: relative; }
.acct-btn { position: relative; padding: 3px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.acct-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E8B08A;
  color: #1A1714;
  display: grid;
  place-items: center;
  font: 700 12.5px var(--font-sans);
  transition: box-shadow .18s ease;
}
.acct-btn:hover .acct-avatar,
.acct-btn[aria-expanded="true"] .acct-avatar { box-shadow: 0 0 0 3px #F1E7DB, 0 0 0 4px #E8B08A; }
.acct-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201,125,78,.22), 0 0 0 1.5px #C97D4E; }
/* A factory login carries its factory's mark, so it never looks like a buyer. */
.acct-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid #FAF7F2;
  display: grid;
  place-items: center;
  font: 800 7.5px var(--font-sans);
  color: #fff;
  background: #A0582A center / cover no-repeat;
}
.acct-dot { position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: #C97D4E; border: 2px solid #FAF7F2; }

.acct-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #EFE7DB;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  font-family: var(--font-sans);
  text-align: left;
  animation: acct-card-in .16s ease-out;
}
.acct-card[hidden] { display: none; }
@keyframes acct-card-in { from { opacity: .4; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .acct-card { animation: none; } }
.acct-top { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 10px 16px; margin-bottom: 8px; background: #FAF7F2; border-radius: 14px; }
.acct-email { font-size: 12.5px; color: #6B6056; word-break: break-all; }
.acct-big { position: relative; width: 64px; height: 64px; margin: 10px 0 8px; border-radius: 50%; background: #E8B08A; color: #1A1714; display: grid; place-items: center; font: 700 21px var(--font-sans); }
.acct-big .acct-badge { right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 8px; border-width: 3px; font-size: 9px; }
.acct-hello { margin: 0; font: 700 19px var(--font-sans); color: #1A1714; }
.acct-who { margin: 2px 0 12px; font-size: 12.5px; color: #9C9289; }
.acct-who:last-child { margin-bottom: 0; }
.acct-role { display: inline-block; margin-left: 5px; padding: 1px 7px; border: 1px solid #EFE7DB; border-radius: 999px; background: #fff; font: 700 10.5px var(--font-sans); color: #A0582A; text-transform: uppercase; letter-spacing: .06em; vertical-align: 1px; }
.acct-card a.acct-manage {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid #E0D8CC;
  border-radius: 999px;
  background: #fff;
  font: 600 12.5px var(--font-sans);
  color: #2C2420;
  text-decoration: none;
}
.acct-card a.acct-manage:hover { border-color: #C97D4E; }
.acct-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.acct-card a.acct-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid #EFE7DB;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
}
.acct-card a.acct-tile:hover { border-color: #C97D4E; }
.acct-tile svg { width: 18px; height: 18px; color: #C97D4E; margin-bottom: 4px; }
.acct-tile b { font-size: 13.5px; color: #1A1714; }
.acct-tile span { font-size: 12px; font-weight: 600; color: #A0582A; }
.acct-tile span.is-quiet { font-weight: 500; color: #9C9289; }
.acct-card a.acct-row,
.acct-card button.acct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  font: 500 13.5px var(--font-sans);
  color: #2C2420;
  text-decoration: none;
  cursor: pointer;
}
.acct-card a.acct-row:hover,
.acct-card button.acct-row:hover { background: #FAF7F2; }
.acct-row svg { width: 16px; height: 16px; color: #9C9289; flex: 0 0 auto; }
.acct-card .acct-row.is-quiet { color: #6B6056; }
.acct-note { margin: 2px 4px 6px; padding: 9px 11px; border-radius: 10px; background: #FAF7F2; font-size: 12px; line-height: 1.45; color: #6B6056; }
.acct-sep { height: 1px; margin: 4px 0; background: #EFE7DB; }
.acct-legal { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; padding: 8px 11px 4px; border-top: 1px solid #EFE7DB; }
.acct-card .acct-legal a,
.acct-card .acct-legal button { padding: 0; border: 0; background: none; font: 400 11.5px var(--font-sans); color: #9C9289; text-decoration: none; cursor: pointer; }
.acct-card .acct-legal a:hover,
.acct-card .acct-legal button:hover { color: #2C2420; text-decoration: underline; }

/* Below 960px both landing pages hide every link in .nav-links to save room,
   and below 640px they shrink and stop wrapping them. The card lives inside
   .nav-links, so its links opt back in. */
.nav-links .acct-card a.acct-manage { display: inline-flex !important; }
.nav-links .acct-card a.acct-tile { display: flex !important; }
.nav-links .acct-card a.acct-row { display: flex !important; }
.nav-links .acct-card .acct-legal a { display: inline !important; }
.nav-links .acct-card a,
.nav-links .acct-card button { white-space: normal; }

@media (max-width: 640px) {
  /* On a phone the pill keeps its marks and arrow and loses its words. */
  .acct-pill-label { display: none; }
  .nav-links .nav-signed a.acct-pill { height: 38px; padding: 0 10px; font-size: 13px; }
  .nav-signed { gap: 8px; }
  .acct-card { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; }
}