/* Prep: only what the feature adds to the client page. Everything else is app.css, and
   nothing here changes a rule of it. Lime is for the one thing to press. Nothing outlined
   sits beside a question at rest. */

/* Words from other people's pages can be one long unbroken run: they wrap, on any screen. */
.prep-x, .prep-note { overflow-wrap: anywhere; }

/* A Prep field's border goes mid-grey when it has the cursor. No ring. A keyboard's place on a
   button, a tab or a menu's line is shown by its ground, not by an outline. */
.prep-x input:focus, .prep-x textarea:focus { border-color: var(--line-strong); box-shadow: none; }
.prep-x button:focus-visible, .prep-x a:focus-visible, .folder-tab:focus-visible, .prep-pop .pop-item:focus-visible, .prep-note button:focus-visible { outline: none; background: var(--hover); }
.prep-x button.primary:focus-visible { background: #ECFF7F; }
.prep-x button.link:focus-visible, .prep-note button.link:focus-visible { background: none; text-decoration-color: currentColor; }

/* The card with its two tabs, cut like a folder's. They sit in the sheet and stand above it. */
.sheet.card.tabbed { position: relative; margin-top: 37px; border-top-left-radius: 0; }
.folder-tabs { position: absolute; left: -1px; bottom: 100%; z-index: 1; display: flex; align-items: flex-end; }
.folder-tab {
  position: relative; padding: 8px 26px 9px; margin-bottom: 1px; border: 1px solid var(--line); border-bottom: none;
  border-radius: 12px 12px 0 0; background: var(--lift); color: var(--soft); font-size: 13.5px; font-weight: 600;
}
.folder-tab:hover { background: var(--raised); color: var(--ink); text-decoration: none; }
.folder-tab + .folder-tab { margin-left: -9px; padding-left: 30px; }
.folder-tab.on { z-index: 2; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; background: var(--bg); color: var(--ink); }
.folder-tab.on:hover { background: var(--bg); }
@media (min-width: 821px) {
  .sheet.card.tabbed { min-height: calc(100vh - 48px - 37px); min-height: calc(100dvh - 48px - 37px); }
}
/* One tab pressed for the other: the card stays where it is. */
.backdrop.still, .backdrop.still > .sheet { animation: none; }
/* The small sheet that asks first sits over the card. */
.backdrop.prep-ask { z-index: 12; animation: none; }

/* The Question Prep tab, empty: who they are, and one button */
.prep-tab { padding-top: 2px; }
.prep-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 6px 0 40px; }
.prep-empty .guest-row { width: min(560px, 100%); }
.prep-boxes { display: flex; flex-direction: column; gap: 8px; width: min(560px, 100%); }
.prep-boxes > input { padding: 8px 10px; font-size: 13.5px; }
.prep-words { width: min(560px, 100%); min-height: 58px; resize: vertical; }
.new-prep .prep-words { width: 100%; margin: 4px 0; }
/* What a host pastes from a guest's LinkedIn: the same box as the few words, with room for a profile. */
.prep-paste { min-height: 104px; }
.prep-x textarea[hidden] { display: none; }
.prep-ask .prep-paste { width: 100%; min-height: 150px; margin-top: 6px; }
.prep-empty .guest-row input, .new-prep .guest-row input { padding: 8px 10px; font-size: 13.5px; }
.prep-empty button.primary, .new-prep button.primary { padding: 8px 18px; font-size: 13.5px; }
.prep-empty > .row { gap: 16px; flex-wrap: wrap; }
.prep-now .link.quiet:hover, .prep-role .link.quiet:hover { color: var(--ink); }
.prep-fail { max-width: 560px; color: var(--soft); font-size: 14px; }

/* While it works */
.prep-working { max-width: 640px; padding: 4px 0 40px; }
.prep-who { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 14px; }
.prep-now { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 13px; min-height: 22px; }
.prep-now .pulse { background: var(--ink); animation: pulse 1.2s ease-in-out infinite; }
.prep-now .link.quiet { margin-left: 6px; }
/* A bar that keeps the time. Not lime: lime is for what can be pressed. */
.prep-bar { height: 4px; max-width: 420px; margin: 2px 0 12px; border-radius: 2px; background: var(--line); overflow: hidden; }
.prep-bar > span { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--ink); transition: width 0.5s linear; }
.prep-carry { margin: 14px 0 0; max-width: 420px; }
.src {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--raised);
  font: 11px/18px var(--mono); color: var(--faint); white-space: nowrap; vertical-align: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
a.src:hover { color: var(--ink); background: var(--hover); text-decoration: none; }

/* The brief */
.prep { padding-bottom: 8px; }
.prep-notices:empty { display: none; }
.prep-notices { margin-bottom: 14px; }
.prep-notices .prep-now { margin-bottom: 10px; }
.prep-line { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.prep-id { flex: 1; min-width: 0; }
.prep-id .prep-who { margin: -6px 0 2px; }
.prep-role { font-size: 15px; color: var(--soft); margin: -6px 0 12px; }
.prep-who + .prep-role { margin-top: 0; }
.prep-role .link.quiet { font-size: 12.5px; margin-left: 10px; }
.names { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.names-label { font-size: 12.5px; color: var(--faint); margin-right: 4px; }
.name-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; background: var(--raised); font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.name-chip button.x { min-width: 18px; min-height: 18px; padding: 2px; margin-right: -5px; }
.prep-actions { display: flex; gap: 8px; flex: none; }
.prep-actions button { padding: 7px 14px; }
.prep-actions button.x { padding: 4px; }
.prep-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; padding-top: 18px; }
.prep-about { min-width: 0; }
.prep-trust { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

.qs { list-style: none; margin: 0; padding: 0; }
.q { display: flex; align-items: flex-start; gap: 12px; padding: 11px 10px; border-radius: 9px; }
.q + .q { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.q.run-start { border-top-color: var(--line-strong); margin-top: 10px; padding-top: 16px; }
.q:hover, .q:focus-within { background: rgba(255, 255, 255, 0.03); }
.q-n { flex: none; width: 20px; padding-top: 3px; font: 11.5px/1.4 var(--mono); color: var(--faint); cursor: grab; text-align: right; user-select: none; }
.q-body { flex: 1; min-width: 0; }
.q-line { font-size: 15.5px; line-height: 1.42; }
.q-text, .q-lead { border-radius: 4px; outline: none; cursor: text; overflow-wrap: anywhere; }
.q-lead { color: var(--soft); }
.q-text:focus, .q-lead:focus { background: var(--raised); box-shadow: 0 0 0 4px var(--raised); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* A question that has only just been written in: marked for a few seconds, so it is seen to have come. */
@keyframes q-fresh { from { background: var(--lift); } to { background: transparent; } }
.q.fresh { animation: q-fresh 8s ease-out; }
@media (prefers-reduced-motion: reduce) { .q.fresh { animation: none; background: var(--lift); } }
.q-note { color: var(--faint); font-size: 12.5px; margin-top: 4px; }
.q-out { color: var(--sunrise); font-size: 12.5px; margin-top: 4px; }
.q.left-out .q-text, .q.left-out .q-lead { color: var(--faint); }
.q-err { font-size: 12.5px; margin-top: 4px; }
/* The question for the cold open: it sits where it will be asked, and reads as the one to open on. */
.q.cold, .q.cold:hover, .q.cold:focus-within { background: var(--lift); }
.qs .q.cold { border-top: none; border-radius: 12px; padding: 14px 10px; margin: 10px 0; }
.qs .q.cold + .q { border-top: none; }
.cold-label { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.q.cold .q-text { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.q.cold .q-lead { display: block; margin-bottom: 4px; }
/* Where a question comes from. The page is named at the end of the row at rest. Reaching for
   the row swaps the name for the controls. In the question, the fact shows, with a link to the page. */
.q-side { position: relative; flex: none; width: 168px; min-height: 28px; display: flex; justify-content: flex-end; align-items: flex-start; }
.q-from { margin: 3px 0 0; background: none; padding: 0; }
.q-side .q-tools { position: absolute; right: 0; top: 0; }
.q:hover .q-from, .q:focus-within .q-from { visibility: hidden; }
.q-why { display: none; color: var(--soft); font-size: 12.5px; line-height: 1.5; margin-top: 5px; overflow-wrap: anywhere; }
.q-why .src { margin-left: 2px; }
.q:focus-within .q-why { display: block; }
.q-tools { flex: none; display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.q:hover .q-tools, .q:focus-within .q-tools { opacity: 1; }
.q-tools .pulse { margin: 5px; background: var(--ink); animation: pulse 1.2s ease-in-out infinite; }
/* The arrows are for a keyboard and a phone: with a mouse a question is dragged by its number. */
.q-move { display: none; }
.q:focus-within .q-move { display: inline-flex; }
/* On a touch screen the page's name and the controls only show while a question is being written. */
@media (hover: none) {
  .q-side { display: none; }
  .q:focus-within { flex-wrap: wrap; }
  .q:focus-within .q-side { display: flex; width: 100%; justify-content: flex-end; }
  .q:focus-within .q-tools { position: static; opacity: 1; }
  .q:focus-within .q-from { display: none; }
}
.q.dragging { opacity: 0.35; }
.q-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.q-foot .error { flex-basis: 100%; margin-top: 0; }
.q-add, .more-on, .prep-add { display: flex; gap: 6px; align-items: center; }
.q-add { flex: 1 1 320px; }
.more-on { flex: 1 1 220px; max-width: 340px; }
.more-on button .pulse { display: inline-block; margin-right: 6px; background: var(--ink); animation: pulse 1.2s ease-in-out infinite; vertical-align: middle; }
.more-came { flex-basis: 100%; }
.more-came:empty { display: none; }
.q-add input, .more-on input, .prep-add input { padding: 4px 10px; font-size: 13px; }
.offer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 13.5px; }
.offer span { flex: 1; min-width: 180px; }

.about-block { margin-bottom: 22px; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 6px 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.facts li + li { border-top: 1px solid var(--line); }
.facts .why { display: block; color: var(--faint); font-size: 12.5px; }
.facts a.plain { text-decoration: underline; text-decoration-color: rgba(237, 233, 226, 0.35); text-underline-offset: 2px; }
.facts .not-right { margin-left: 8px; white-space: nowrap; }

/* New prep: the New episode sheet, cut down */
.sheet.new-episode.new-prep { max-width: 620px; }
.new-prep .guest-row { margin: 6px 0 4px; }
.prep-full { margin: 10px 0 0; }
.prep-waiting h3 { margin: 16px 0 8px; }
.prep-there { flex-wrap: wrap; }
.sheet.small.prep-x input { margin-top: 12px; }
.sheet.small.prep-x p.soft { margin: 6px 0 0; }
.prep-more-fields { display: flex; flex-direction: column; }

/* The Prep page */
.prep-page { max-width: 980px; width: 100%; }
.prep-page h3 { margin: 30px 0 0; font-size: 13px; font-weight: 600; color: var(--soft); }
.prep-find { max-width: 280px; margin-bottom: 4px; }
/* A folder a guest: the tab carries the episode, and stands on the folder's top left corner. */
.prep-folders { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 16px; }
.prep-folder { position: relative; display: flex; min-width: 0; }
.prep-row { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 172px; padding: 16px 16px 14px; background: var(--lift); border: 1px solid var(--line); border-radius: 0 12px 12px 12px; color: var(--ink); overflow-wrap: anywhere; }
.prep-row::before { content: attr(data-tab); position: absolute; left: -1px; bottom: 100%; max-width: 100%; padding: 4px 12px 3px; background: var(--lift); border: 1px solid var(--line); border-bottom: none; border-radius: 9px 9px 0 0; font: 11.5px/1.4 var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prep-row[data-tab=""]::before { display: none; }
.prep-row:hover { background: var(--raised); text-decoration: none; }
.prep-row:hover::before { background: var(--raised); }
.prep-row b { padding-right: 30px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.prep-role-line { margin-top: -8px; font-size: 13px; color: var(--soft); }
.prep-first-q { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prep-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prep-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.prep-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.prep-state.working i { animation: pulse 1.2s ease-in-out infinite; }
.prep-count { font: 12px/1.4 var(--mono); color: var(--faint); white-space: nowrap; }
.prep-folder.done .prep-row { background: transparent; }
.prep-folder.done .prep-row::before { background: var(--bg); }
.prep-folder.done .prep-row:hover, .prep-folder.done .prep-row:hover::before { background: var(--lift); }
.prep-folder .prep-more { position: absolute; top: 10px; right: 8px; color: var(--faint); }
/* Before anyone has been added: what this is, in three steps, and the one button */
.prep-first { max-width: 640px; margin-top: 26px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; }
.prep-first h2 { margin: 0 0 20px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.prep-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 26px; padding: 0; }
.prep-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soft); }
.prep-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 50%; font: 12px var(--mono); color: var(--faint);
}
.prep-steps b { font-size: 14px; font-weight: 600; color: var(--ink); }

/* The mark on a tile, beside the message count: there is a brief. It breathes while one is being written. */
.tile-meta .meta.prep-mark:first-child { margin-right: 0; }
.meta.prep-mark.working .icon { animation: pulse 1.6s ease-in-out infinite; }

/* A show's page: its hosts, and the questions it always asks */
.prep-hosts { flex-wrap: wrap; margin-bottom: 10px; }
.prep-hosts:empty { display: none; }
.prep-add { max-width: 520px; margin-top: 8px; }
.prep-standing .useful-title { white-space: normal; font-weight: 500; }

/* A word at the foot with a way back: the page's own note, a step above it, so neither covers
   the other. And the one red line in a menu. */
.prep-note {
  position: fixed; left: 50%; bottom: 66px; z-index: 46; max-width: min(460px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 10px; background: var(--raised);
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 13px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 0.18s, transform 0.18s;
}
.prep-note.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.prep-pop .pop-item.danger { color: #F08A6C; }

@media (max-width: 820px) {
  .sheet.card.tabbed { margin-top: 0; padding-top: 0; }
  .folder-tabs { position: static; margin: 0 -24px 12px; padding: 8px 8px 0; background: var(--pit); border-bottom: 1px solid var(--line); }
  .folder-tab { flex: 1; text-align: center; margin-bottom: 0; }
  .folder-tab.on { margin-bottom: -1px; }
  .prep-line { flex-direction: column; gap: 14px; }
  .prep-first { margin-top: 14px; padding: 22px 20px; }
  .prep-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .prep-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .prep-steps li::before { grid-row: span 2; margin: 0; }
  .prep-first button.primary { width: 100%; justify-content: center; padding: 11px 18px; font-size: 15px; }
  .prep-bar, .prep-carry { max-width: none; }
  .prep-actions { width: 100%; justify-content: space-between; }
  .prep-actions button:not(.x) { padding: 9px 8px; margin-left: -8px; }
  .prep-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .prep-folders { grid-template-columns: minmax(0, 1fr); }
  .more-on { max-width: none; }
  /* An iPhone zooms the page when what is being written is under 16px, and stays zoomed. */
  .q-line, .q.cold .q-lead { font-size: 16px; }
  .prep-x input:not(.big-field), .prep-x textarea,
  .prep-empty .guest-row input, .new-prep .guest-row input, .prep-boxes > input, .q-add input, .more-on input, .prep-add input { font-size: 16px; }
}