/* Controls the app's modes share: the ghost button, its line icons, and the
   toast, with the link it offers to copy by hand. */

/* ---- generic ghost button ---- */
.ghost {
  background: none; border: 1px solid var(--ink-soft); color: var(--paper-dim);
  font-family: var(--font-label); font-size: var(--type-1); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.26em; padding: 10px 18px;
  border-radius: 40px; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-breath), border-color var(--dur-hover) var(--ease-breath), opacity var(--dur-hover) var(--ease-breath);
}
.ghost:hover { color: var(--paper); border-color: var(--accent); }
.ghost.solid { border-color: var(--accent); color: var(--accent); }
.ghost:disabled, .ghost.is-disabled { opacity: 0.32; cursor: default; pointer-events: none; }
/* buttons that carry a line-icon (compose share/download/send + read share) */
.action-row .ghost, .ghost.has-ico { display: inline-flex; align-items: center; gap: 9px; }
.btn-ico { width: 14px; height: 14px; flex: none; display: block; }
.btn-ico path {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* the share button wears the icon of what it does here: a link, or the share sheet */
.ico-sheet, [data-share="sheet"] .ico-link { display: none; }
[data-share="sheet"] .ico-sheet { display: block; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 132px; left: 50%; transform: translateX(-50%) translateY(12px);
  z-index: var(--z-toast);
  background: color-mix(in srgb, var(--ink-deep) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--ink-soft));
  color: var(--paper); font-family: var(--font-label); font-size: var(--type-2); letter-spacing: 0.06em;
  padding: 12px 22px; border-radius: 40px; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-breath), transform var(--dur-hover) var(--ease-breath);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* a link the clipboard refused, offered to copy by hand */
.toast.has-field {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  pointer-events: auto; width: min(620px, 92vw);
}
.toast-field {
  flex: 1 1 22ch; min-width: 0; padding: 6px 0;
  background: none; border: none; border-bottom: 1px solid var(--ink-soft);
  color: var(--paper-dim); font: inherit; letter-spacing: 0.02em;
}
.toast-field:focus-visible { outline-color: transparent; border-bottom-color: var(--accent); color: var(--paper); }
.toast .toast-action { padding: 6px 16px; }

@media (max-width: 640px) {
  .toast { bottom: 116px; width: max-content; max-width: 88vw; }
  /* in read the controls take three rows on a phone: the notice rises above them */
  [data-mode="read"] .toast { bottom: 176px; }
  .toast.has-field { width: 88vw; }
  /* the share and save targets meet the 44px of the arrows and dots (in read, read.css) */
  .action-row .ghost, .toast .toast-action { min-height: 44px; }
}

/* the toast fades in place, without rising */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.show { transform: translateX(-50%); transition: opacity var(--dur-hover) var(--ease-breath); }
}