/** @format */

/* Request panel for /entrepreneurs.

   Built entirely on the variables in entrepreneurs.css, so recolouring the
   palette recolours this too and the two can never drift apart.

   One rule here is load-bearing rather than cosmetic: every text input is
   16px. Below 16px iOS Safari zooms the viewport on focus and does not zoom
   back out, which strands the requester at 1.3x with the form half off screen.
   Do not shrink it to fit a narrow layout. */

.ent-foot {
  margin: 2.25rem auto 0;
  max-width: 720px;
  text-align: center;
}

/* ------------------------------------------------------------- trigger ---*/

/* The trigger carries .ent-shuffle, so it inherits the hero buttons' shape,
   colour and hover wholesale. Only the open/close state belongs here: the plus
   turns 45 degrees into a cross when the panel is open, which says "this closes
   again" without a second label. The .ent-shuffle hover spins its icon 180
   degrees, and 45 + 180 still reads as a cross, so the two compose. */
.req-trigger[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.req-trigger[aria-expanded="true"]:hover svg {
  transform: rotate(225deg);
}

.req-trigger[aria-expanded="true"] {
  color: var(--parchment);
  border-color: var(--edge-lit);
}

/* --------------------------------------------------------------- panel ---*/

.req-panel {
  /* Makes the browser draw its own controls dark: unchecked checkboxes stop
     being white squares on the dark panel, and the native select dropdown
     opens dark instead of flashing a light list. */
  color-scheme: dark;
  margin-top: 1.5rem;
  padding: 2rem;
  text-align: left;
  background: var(--canopy);
  border: 1px solid var(--edge);
  border-radius: 14px;
}

/* ---------------------------------------------------------------- tweet ---*/

.req-tweet {
  display: block;
  margin-bottom: 1.6rem;
  padding: 1.1rem 1.2rem;
  background: var(--bark);
  border: 1px solid var(--edge);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.req-tweet:hover {
  border-color: var(--edge-lit);
  background: var(--soil);
}

.req-tweet-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.req-tweet-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: block;
}

.req-tweet-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.req-tweet-name {
  color: var(--parchment);
  font-family: var(--display);
  font-size: 1.05rem;
}

.req-tweet-handle {
  color: var(--sage-dim);
  font-size: 0.82rem;
}

/* Pushed to the far edge, the way the bird sits on a real tweet. */
.req-tweet-bird {
  width: 17px;
  height: 17px;
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--sage-dim);
  transition: color 0.3s var(--ease);
}

.req-tweet:hover .req-tweet-bird {
  color: var(--sage);
}

.req-tweet-text {
  display: block;
  margin-top: 0.85rem;
  color: var(--parchment);
  font-family: var(--display);
  font-size: 1.28rem;
  line-height: 1.45;
}

.req-tweet-date {
  display: block;
  margin-top: 0.7rem;
  color: var(--sage-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.req-note {
  margin: 0 0 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--edge);
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.7;
}

.req-note a {
  color: var(--sage);
  text-decoration: underline;
  text-decoration-color: var(--edge-lit);
  text-underline-offset: 3px;
}

.req-note a:hover {
  color: var(--parchment);
}

/* ------------------------------------------------------------- fields ---*/

.req-field {
  margin-bottom: 1.5rem;
}

.req-field[hidden] {
  display: none;
}

.req-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--parchment);
  font-family: var(--display);
  font-size: 1.05rem;
}

.req-hint {
  margin: 0.4rem 0 0;
  color: var(--sage-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}

.req-input {
  width: 100%;
  /* 16px minimum. See the note at the top of this file. */
  font-size: 16px;
  font-family: var(--body);
  color: var(--parchment);
  background: var(--bark);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  line-height: 1.5;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.req-input:focus {
  outline: none;
  border-color: var(--edge-lit);
  background: var(--soil);
}

.req-input::placeholder {
  color: var(--lichen);
}

.req-textarea {
  resize: vertical;
  min-height: 4.5rem;
}

select.req-input {
  cursor: pointer;
}

/* --------------------------------------------------------------- types ---*/

.req-types {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}

.req-legend {
  padding: 0;
  margin-bottom: 0.6rem;
  color: var(--parchment);
  font-family: var(--display);
  font-size: 1.05rem;
}

.req-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.req-seg-opt {
  flex: 1 1 auto;
}

.req-seg-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.req-seg-opt span {
  display: block;
  text-align: center;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  color: var(--sage);
  background: var(--bark);
  border: 1px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.req-seg-opt:hover span {
  border-color: var(--edge-lit);
}

.req-seg-opt input:checked + span {
  background: var(--fern);
  color: var(--parchment);
  border-color: var(--edge-lit);
}

.req-seg-opt input:focus-visible + span {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- links ---*/

.req-link-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 2rem;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.req-link-drop {
  appearance: none;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--sage-dim);
  font-size: 1.1rem;
  line-height: 1;
  height: 2.4rem;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.req-link-drop:hover {
  color: var(--ochre);
  border-color: var(--edge-lit);
}

.req-check {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  cursor: pointer;
  color: var(--cream);
  font-size: 0.92rem;
}

.req-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--sage);
  flex: 0 0 auto;
}

.req-check em {
  color: var(--sage-dim);
  font-style: normal;
}

/* --------------------------------------------------------------- buttons ---*/

.req-submit {
  display: inline-block;
  appearance: none;
  font-family: var(--body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  background: var(--fern);
  border: 1px solid var(--edge-lit);
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.req-submit:hover {
  background: var(--lichen);
}

.req-submit:active {
  transform: translateY(1px);
}

.req-mini {
  appearance: none;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--sage);
  font-family: var(--body);
  font-size: 0.82rem;
  padding: 0.45rem 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.req-mini:hover {
  border-color: var(--edge-lit);
  color: var(--parchment);
}

.req-mini:disabled {
  cursor: default;
  opacity: 0.55;
}

.req-mini:disabled:hover {
  border-color: var(--edge);
  color: var(--sage);
}

.req-error {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: rgba(200, 107, 168, 0.1);
  border: 1px solid rgba(200, 107, 168, 0.35);
  color: var(--ochre);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- output ---*/

.req-out-title {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--parchment);
}

/* Both halves of the instruction live here: who to send from, and the two
   ways to send if the mail button is no use. It sits above the message so it
   is read before the text rather than after it. */
.req-out-lead {
  margin: 0 0 1.5rem;
  color: var(--cream);
  font-size: 0.92rem;
  line-height: 1.65;
}

.req-out-lead a {
  color: var(--sage);
  text-decoration: underline;
  text-decoration-color: var(--edge-lit);
  text-underline-offset: 3px;
}

.req-out-lead a:hover {
  color: var(--parchment);
}

.req-out-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  /* pre-wrap, not pre: the padded label columns still line up, but a bio
     paragraph wraps instead of running off the right edge where the requester
     cannot read back what they are about to send. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.req-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

/* When the composed mailto: is long enough that mail clients may truncate it,
   Copy becomes the primary path and moves to the front. */
.req-actions.is-copy-first .req-mail {
  order: 2;
  background: none;
  color: var(--sage);
}

.req-actions.is-copy-first .req-copy {
  order: 1;
}

.req-copy-done {
  display: none;
}

.req-copy.is-copied {
  background: var(--lichen);
}

.req-copy.is-copied .req-copy-idle {
  display: none;
}

.req-copy.is-copied .req-copy-done {
  display: inline;
}

.req-status {
  margin: 0.8rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--sage);
}

/* ---------------------------------------------------------------- mobile ---*/

@media (max-width: 620px) {
  .req-panel {
    padding: 1.4rem 1.1rem;
  }

  /* The link row cannot survive a phone side by side. Type and the remove
     button share the top line, the address spans the one below. Both children
     are placed explicitly: left to flow, the button lands alone in the wide
     first column and reads as a stray full-width control. */
  .req-link-row {
    grid-template-columns: 1fr 2.4rem;
    gap: 0.45rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed var(--edge);
  }

  .req-link-row .req-link-kind {
    grid-column: 1;
    grid-row: 1;
  }

  .req-link-row .req-link-drop {
    grid-column: 2;
    grid-row: 1;
  }

  .req-link-row .req-link-url {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .req-seg-opt {
    flex: 1 1 100%;
  }

  .req-actions {
    flex-direction: column;
  }

  .req-submit {
    width: 100%;
  }

  .ent-foot {
    margin-top: 1.75rem;
  }
}