/* The account corner of the header (templates/_account.html). Only #account and its children: the page styles in
   app.css are left alone so a redesign can restyle them without touching this file (D-14). */

#account {
  position: relative;
  display: flex;
  align-items: center;
}

#account [hidden] {
  display: none !important;
}

/* "Sign in with Google", light theme of Google's branding guidelines: white fill, 1 px #747775 stroke, #1F1F1F
   text, 12 px before the G, 10 px between the G and the text, 12 px after it. Google Sans is not loaded (CSP
   font-src 'self'), so the system font at weight 500 stands in. */
#account .gsi-btn,
#pass-signin .gsi-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

#account .gsi-btn:hover,
#pass-signin .gsi-btn:hover {
  background: #f8f9fa;
}

#account .gsi-btn:focus-visible,
#pass-signin .gsi-btn:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

#account .gsi-btn img,
#pass-signin .gsi-btn img {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

/* Signed in: first name and minutes left; the summary opens a small menu. */
#account .account-menu > summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

#account .account-menu > summary::-webkit-details-marker {
  display: none;
}

#account .account-name {
  display: inline-block;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-weight: 600;
}

/* The menu opens as a small dropdown under the summary. */
#account .account-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 160px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--lns, rgba(127, 127, 127, 0.35));
  border-radius: var(--r2, 6px);
  background: var(--sf, Canvas);
  color: var(--tx, CanvasText);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

#account .account-panel form {
  margin: 0;
}

#account .account-panel .btn {
  width: 100%;
  justify-content: flex-start;
}

/* 05-07: the Pro line above "Manage Pro"; the payment-failed note in the error colour. */
#account .account-pro {
  margin: 0;
  padding: 4px 10px;
  font-size: 14px;
  white-space: normal;
}

#account .account-pro-failed {
  color: var(--err, #b3261e);
}

#account .btn-danger-text {
  color: var(--err, #b3261e);
}

/* "Delete account": the dialog sits in the top layer; it reuses .dialog from app.css and only adds the forfeit row. */
#account .account-dialog {
  white-space: normal;
  font-size: 15px;
  line-height: 22px;
}

#account .account-delete-error {
  color: var(--err, #b3261e);
}

#account .account-forfeit {
  font-weight: 600;
}

#account .account-forfeit-row label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

#account .account-notice {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin: 6px 0 0;
  padding: 6px 10px;
  max-width: 280px;
  border-radius: 4px;
  background: var(--err-bg, #fce8e6);
  color: var(--tx, #3c1414);
  font-size: 13px;
  line-height: 18px;
  white-space: normal;
}

/* Phone (the header's 640 px breakpoint in app.css): the header stays one row, so the sign-in button shows only
   the G mark (Google's icon-only variant) and keeps its label for screen readers; the name is shortened and the
   minutes move out of the summary (they are in the header quota line). */
@media (max-width: 640px) {
  #account .gsi-btn {
    height: 40px;
    padding: 0 9px;
  }

  #account .gsi-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #account .account-name {
    max-width: 6em;
  }
}