/* The Account (#account) and parts quote (#quote) popups: js/account-overlay.js, js/quote-overlay.js,
   overlays/account.html, overlays/quote.html. Builds on css/overlay.css (load that first); only the
   pieces those two sheets add. Also the nav's Account link on the home and about pages. */

/* ---- Nav: Account, a quiet link just before "Get started for free" ------------------------- */
@media (min-width: 721px) {
  .nav__account { position: relative; margin-left: 6px; padding-left: 6px; }
  .nav__account::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: rgb(255 255 255 / 0.16);
  }
}

/* ---- Rows that are buttons (Manage Unlayered Pro) ------------------------------------------ */
.ov-row--button {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ov-row--button[disabled] { cursor: progress; opacity: 0.6; }
.ov .ov-row--button:focus-visible { outline-offset: -2px; border-radius: 20px; }

/* ---- Account ------------------------------------------------------------------------------ */
.ov-acct__body { display: grid; gap: 22px; align-content: start; }

/* While /api/session answers: three bars where the rows will be */
.ov-acct__wait {
  height: 180px;
  border-radius: 20px;
  border: 1px solid var(--ov-hair);
  background:
    linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.05) 50%, transparent 70%) 0 0 / 200% 100%,
    rgb(255 255 255 / 0.03);
  animation: ov-acct-shimmer 1.4s linear infinite;
}
@keyframes ov-acct-shimmer { to { background-position: -200% 0, 0 0; } }

/* Who you are: the initial, the name, the plan */
.ov-acct__who {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}

.ov-acct__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #7f9fff, var(--ov-accent) 60%, #2b4fc4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 24px rgb(77 125 255 / 0.35);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.ov-acct__id { display: grid; gap: 6px; min-width: 0; }
.ov-acct__name { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere; }

.ov-acct__plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ov-muted);
}

.ov-acct__badge {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ov-edge);
  background: rgb(255 255 255 / 0.06);
  font-size: 13px;
  font-weight: 600;
  color: var(--ov-ink);
}
.ov-acct__badge.is-paid { border-color: rgb(77 125 255 / 0.6); background: rgb(77 125 255 / 0.2); }

.ov-acct__hi { color: #b9c9ff; }

.ov-acct__out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}
.ov-acct__out .ov-note { max-width: 40ch; }

.ov-acct__go { display: grid; gap: 12px; justify-items: start; }
.ov-acct__msg { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ov-muted); }

@media (max-width: 480px) {
  .ov-acct__out { flex-direction: column; align-items: stretch; }
  .ov-acct__go { justify-items: stretch; }
  .ov-acct__avatar { width: 48px; height: 48px; font-size: 20px; }
}

/* ---- Parts quote -------------------------------------------------------------------------- */
.ov-quote__why { display: grid; gap: 8px; margin: -8px 0 0; padding: 0; list-style: none; }
.ov-quote__why li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ov-muted);
}
.ov-quote__why li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ov-accent); }
.ov-quote__why strong { color: var(--ov-ink); font-weight: 600; }

.ov-quote__form[hidden] { display: none; }

/* The drop zone: the one loud thing on the sheet */
.ov-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 30px 20px 26px;
  border-radius: 22px;
  border: 1.5px dashed rgb(157 180 255 / 0.45);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(77 125 255 / 0.16), transparent 70%),
    rgb(4 8 20 / 0.3);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--ov-ease);
}
.ov-drop[hidden], .ov-file[hidden] { display: none; }
.ov-drop:hover { border-color: rgb(157 180 255 / 0.8); }
.ov-drop.is-over { border-color: var(--ov-accent); border-style: solid; background-color: rgb(77 125 255 / 0.14); transform: scale(1.01); }
.ov-drop:focus-visible { outline: 2px solid var(--ov-ink); outline-offset: 3px; }
.ov-drop[aria-disabled="true"] { cursor: progress; opacity: 0.6; }

.ov-drop__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: rgb(77 125 255 / 0.18);
  color: #b9c9ff;
}
.ov-drop__icon svg { width: 24px; height: 24px; }
.ov-drop.is-over .ov-drop__icon { animation: ov-drop-bob 0.9s ease-in-out infinite alternate; }
@keyframes ov-drop-bob { to { transform: translateY(-4px); } }

.ov-drop__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ov-drop__title u { text-decoration-color: rgb(157 180 255 / 0.6); text-underline-offset: 3px; }
.ov-drop__sub { font-size: 13px; color: var(--ov-faint); }

/* A chosen file, and the parts already added */
.ov-file,
.ov-quote__parts li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgb(77 125 255 / 0.45);
  background: rgb(77 125 255 / 0.1);
}
.ov-file .ov-drop__icon { width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.ov-file.is-over { border-color: var(--ov-accent); }

.ov-file__text { display: grid; gap: 2px; min-width: 0; }
.ov-file__name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-file__size { font-size: 13px; color: var(--ov-muted); }
.ov-file__acts { display: flex; gap: 4px; }

.ov-textbtn {
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #b9c9ff;
  font: 600 13px/1 "Inter Tight", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.ov-textbtn:hover { background: rgb(255 255 255 / 0.08); color: var(--ov-ink); }
.ov-textbtn[disabled] { opacity: 0.5; cursor: default; }

.ov-quote__parts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ov-quote__parts[hidden] { display: none; }
.ov-quote__parts li { border-color: var(--ov-hair); background: rgb(255 255 255 / 0.035); padding: 10px 10px 10px 14px; }

.ov-quote__idx {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ov-quote__partno { margin: 4px 0 -8px; font-size: 13px; font-weight: 600; color: rgb(245 245 242 / 0.78); }
.ov-quote__partno[hidden] { display: none; }

.ov-quote__notice { margin: 0; font-size: 14px; line-height: 1.5; color: #b9c9ff; }
.ov-quote__notice[hidden] { display: none; }
.ov-error[hidden] { display: none; }
.ov-error a { color: #fff; }

.ov-quote .ov-input[disabled] { opacity: 0.6; }
.ov-quote .ov-btn--primary[disabled] { cursor: progress; }

@media (max-width: 760px) {
  .ov-quote .ov-more { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ov-file { grid-template-columns: auto 1fr; }
  .ov-file__acts { grid-column: 1 / -1; justify-content: flex-end; margin: -6px -6px -6px 0; }
  .ov-drop { padding: 24px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-acct__wait, .ov-drop.is-over .ov-drop__icon { animation: none; }
  .ov-drop.is-over { transform: none; }
}

/* Free accounts: "Get Unlayered Pro" leads the Account popup's rows (js/account-overlay.js) */
.ov-row--pro { background: linear-gradient(120deg, rgb(77 125 255 / 0.22), rgb(77 125 255 / 0.06)); }
.ov-row--pro:hover { background: linear-gradient(120deg, rgb(77 125 255 / 0.32), rgb(77 125 255 / 0.1)); }
.ov-row--pro .ov-row__icon { background: #4d7dff; color: #fff; }
.ov-row--pro .ov-row__title { font-size: 17px; }
.ov-row--pro .ov-row__sub { color: #c4d2ff; }
.ov-row--pro .ov-row__go { color: #fff; }