/* =============================================================================
   secret.onfiremedia.com — additions to the design system.

   This file exists so `app.css` can keep shipping as the designer wrote it. Every rule below
   is for a component added after the handoff; nothing here overrides a measured value. Only
   existing tokens are used, so both themes and every contrast measurement still hold.

   Load order: tokens.css -> app.css -> extra.css.

   1. GENERATOR PREVIEW COPY BUTTON
   ============================================================================= */

/* The preview is now a real <button> so it is keyboard operable and in the tab order. It keeps
   the dashed monospace panel look from `.genpanel-preview`; these rules only undo the parts of
   the UA button styling that fight it. The focus ring comes from the global :focus-visible rule
   in app.css, untouched. */
button.genpanel-preview {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
button.genpanel-preview:hover { background-color: var(--surface-hover); }

/* Same confirmation vocabulary as the other copy buttons in app.css section 9: green treatment,
   copy icon swaps to a check. Written out here rather than reused because `.genpanel-preview`
   sets its own literal background and dashed border, so the `.btn[data-copied]` custom
   properties would not reach it. */
button.genpanel-preview[data-copied="true"] {
  background-color: var(--ok-bg);
  border-color: var(--ok-line);
  color: var(--ok);
}
button.genpanel-preview[data-copied="true"] .icon-copy { display: none; }
button.genpanel-preview:not([data-copied="true"]) .icon-check { display: none; }

/* The password must stay selectable with the mouse: a user dragging to grab part of it is doing
   something reasonable, and the click handler bails out when a selection exists rather than
   copying over the top of it. Buttons suppress selection by default, hence the explicit value. */
.gen-preview-value {
  -webkit-user-select: text;
  user-select: text;
  overflow-wrap: anywhere;
  text-align: left;
}

.gen-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* -----------------------------------------------------------------------------
   2. DISCLOSURE SUMMARY STATE
   -------------------------------------------------------------------------- */

/* "More options" ships collapsed, and both checkboxes inside it now default to on. The summary
   therefore has to say what is enabled, or a sender turns on a retrieval step and recipient
   deletion without ever seeing either. Lighter than the summary label so it reads as a status,
   not as part of the heading. */
.disclosure-state {
  font-weight: 400;
  color: var(--ink-2);
}

/* -----------------------------------------------------------------------------
   3. THEME TOGGLE: THREE MODES, THREE GLYPHS
   -------------------------------------------------------------------------- */

/* Breathing room under the "Passphrase" label on the unlock gate. Scoped to the gate so the
   create form's own label spacing is untouched. */
.gate-form .field-label { margin-bottom: var(--sp-2); }

/* Separate the delete panel from the secret above it. */
.dangerzone { margin-top: var(--sp-6); }

/* Space above the "send it to someone" link on /password. */
.gen-backlink { margin-top: var(--sp-6); }

/* Footer tagline sits beside the copyright on one line. */
.footer-tag { color: var(--ink-3); white-space: nowrap; }
.footer-tag::before { content: "\00b7"; margin: 0 var(--sp-2); color: var(--ink-3); }
/* One line at every width, per request. */
.footer-note { white-space: nowrap; }

/* On phones the two halves stack: copyright, then the tagline on its own line. */
@media (max-width: 30rem) {
  .footer-note { white-space: normal; }
  .footer-tag { display: block; white-space: normal; }
  .footer-tag::before { content: none; }
}