/* The account dialog (sign in, create account, recovery, publish). Used by
   the builder and the home page, so it brings the few base rules it needs,
   scoped to the dialog. Theme values from gui.css / theme-local.css. */

.gui-dialog, .gui-dialog * { box-sizing: border-box; }
.gui-dialog .gui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.gui-dialog .gui-button:is(:disabled, [aria-disabled="true"]) { cursor: default; }
/* the title takes focus when a view opens: no ring on it */
.gui-dialog .dialog-title:is(:focus, :focus-visible) { outline: none; }
.gui-dialog.gui[data-mode] .gui-button.icon[data-variant],
.gui-dialog.gui[data-mode] .gui-button.icon[data-variant]:is(:hover:not(:disabled):not([aria-disabled="true"]), :focus-visible, :disabled) {
  padding: var(--space-xs);
}
.gui-dialog .gui-icon {
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.gui-dialog .stop-field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.gui-dialog .stop-field .gui-description { color: var(--cte-text-muted); }
.gui-dialog .gui-input { width: 100%; min-width: 0; }
.gui-dialog .gui-input::placeholder { color: var(--cte-text-muted); opacity: 1; }

/* ---------- account dialog: the theme's Dialog (popover neutral-2,
   radius m, padding l, shadow m; title m medium; description neutral-7) ---------- */
.gui-dialog {
  width: min(400px, calc(100vw - 2 * var(--space-s)));
  padding: var(--space-l);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--neutral-2);
  color: var(--neutral-10);
  box-shadow: var(--shadow-m), 0 0 0 1px var(--neutral-4-transparent);
  font-family: var(--font-ui);
}
.gui-dialog::backdrop { background: color-mix(in srgb, var(--neutral-1) 60%, transparent); }
.gui-dialog[open] { display: flex; flex-direction: column; gap: var(--space-s); }

/* Opening: rises a touch and settles in with the backdrop; closing: slips
   away a little quicker. CSS only, so the X, Escape, a tap outside and
   Done all leave the same way. Browsers without @starting-style just
   switch, as before. */
.gui-dialog {
  --dialog-ease: cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition:
    opacity 0.16s ease-in,
    transform 0.16s ease-in,
    overlay 0.16s allow-discrete,
    display 0.16s allow-discrete;
}
.gui-dialog[open] {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.22s var(--dialog-ease),
    transform 0.32s var(--dialog-ease),
    overlay 0.32s allow-discrete,
    display 0.32s allow-discrete;
}
.gui-dialog::backdrop {
  opacity: 0;
  transition: opacity 0.16s ease-in, overlay 0.16s allow-discrete, display 0.16s allow-discrete;
}
.gui-dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 0.26s ease-out, overlay 0.26s allow-discrete, display 0.26s allow-discrete;
}
@starting-style {
  .gui-dialog[open] { opacity: 0; transform: translateY(12px) scale(0.97); }
  .gui-dialog[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gui-dialog, .gui-dialog[open] { transform: none; transition-duration: 0.12s; }
  .gui-dialog::backdrop, .gui-dialog[open]::backdrop { transition-duration: 0.12s; }
  @starting-style { .gui-dialog[open] { transform: none; } }
}
.dialog-close-row { position: absolute; top: var(--space-xs); right: var(--space-xs); margin: 0; }
.dialog-title {
  margin: 0;
  padding-right: var(--space-xl);
  font-size: var(--size-m);
  line-height: var(--line-m);
  font-weight: var(--weight-ui-medium);
}
.dialog-view { display: flex; flex-direction: column; gap: var(--space-s); }
.dialog-view[hidden] { display: none; }
.dialog-desc { margin: 0 0 var(--space-xs); color: var(--neutral-7); font-size: var(--size-s); line-height: var(--line-s); }
.dialog-error { margin: 0; color: var(--error-text); font-size: var(--size-s); line-height: var(--line-s); }
.dialog-error[hidden] { display: none; }
.gui-dialog .gui-button[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.gui-dialog [hidden] { display: none !important; }

/* a text button, for "Back" and the recovery route */
.gui .link-btn {
  align-self: center;
  padding: var(--space-xxs) var(--space-xs);
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--neutral-7);
  font: inherit;
  font-size: var(--size-s);
  line-height: var(--line-s);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gui .link-btn:hover { color: var(--neutral-10); }

/* the recovery code, big and copyable */
.code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-s) var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background: var(--neutral-3);
}
.code-box code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--size-m); letter-spacing: 0.06em; user-select: all; }
.code-input { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; }

/* resumetee.me/ + the name, as one field: the box is styled as the theme's
   input, the prefix is ordinary text in it and the name input fills the
   rest, so the two can't overlap however wide the prefix is */
.gui[data-mode] .slug-field.gui-input,
.gui[data-mode] .slug-field.gui-input:is(:hover:not(:disabled):not([aria-disabled="true"]), :focus, :focus-within) { display: flex; align-items: baseline; gap: 0; cursor: text; }
.gui .slug-field:focus-within { outline: 2px solid var(--cte-focus); outline-offset: 2px; }
.slug-prefix { flex: none; color: var(--cte-text-muted); white-space: nowrap; }
.gui .slug-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  outline: none;
}
.slug-status { margin: 0; min-height: var(--line-s); font-size: var(--size-s); line-height: var(--line-s); color: var(--cte-text-muted); }
.slug-status.ok { color: var(--success-text); }
.slug-status.bad { color: var(--error-text); }
.published-link { color: var(--neutral-10); font-size: var(--size-s); overflow-wrap: anywhere; }

/* the account's published tees */
.tee-list { list-style: none; margin: 0 0 var(--space-xs); padding: 0; display: flex; flex-direction: column; gap: var(--space-xxs); }
.tee-list:empty { display: none; }
.tee-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s); border-radius: var(--radius-s); background: var(--neutral-3); font-size: var(--size-s); }
.tee-list a { color: var(--neutral-10); }
.tee-list .tee-actions { display: flex; gap: var(--space-xxs); }