/* cookbook-import.css — reScribe 2.0 Phase 6: Paste a link (RecipeLink) and
 * Scan a page (RecipeScan). 2.0 tokens only; the flow chrome (header,
 * intro, wells, pill buttons, spinner) comes from flows.css. */

/* ---- Paste a link ---- */
.v2-ri__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.v2-ri__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.v2-ri__glyph {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--accent-ink);
  pointer-events: none;
}
.v2-ri__input {
  width: 100%;
  padding-left: 38px;
  text-overflow: ellipsis;
}
.v2-ri__paste {
  margin-left: 0;
  height: auto;
  min-height: var(--hit-min);
  border-radius: var(--r2-card);
  padding: 0 16px;
  font-weight: 650;
}
.v2-ri__progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 11px;
  row-gap: 10px;
  padding: 13px 14px;
}
.v2-ri__tile {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  color: var(--accent-ink);
}
.v2-ri__ptext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.v2-ri__phase {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--t-primary);
}
.v2-ri__meta,
.v2-ri__sub {
  font-size: 12.5px;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
.v2-ri__sub {
  grid-column: 1 / -1;
}
/* Item 3 (2026-10-07 batch): ONE live status line — what the server is doing
   right now, in the card's muted text. Its line is always reserved (even
   before the first step arrives) and it never wraps, so the card's height
   doesn't change when the text does. */
.v2-ri__status {
  grid-column: 1 / -1;
  display: block;
  min-height: 1.35em;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-ri__soft {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-ri__caption {
  min-height: 8rem;
}
.v2-ri__capbtn {
  align-self: flex-end;
}
.v2-ri__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v2-ri__chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r2-chip);
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  color: var(--t-nav);
  font-size: 13px;
  font-weight: 570;
}
/* §1 (batch 7): the "Report a problem" text link at the end of the last
   muted caption — the house inline-link button (Journal's tidy-note "Try
   again"): no box, the skill's accent ink, inherits the caption's size. */
.v2-ri__reportlink {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

/* ---- Scan a page ---- */
.v2-rs__frame {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--r2-bigcard);
  background: var(--s-well);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-well);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The scanned page, whole (the scanner already cropped it to its edges). */
.v2-rs__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Nothing scanned yet: one honest button, no fake viewfinder brackets —
 * the real edge detection lives in Apple's scanner (Randy 2026-10-01). */
.v2-rs__start {
  width: 100%;
  aspect-ratio: 1 / 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r2-bigcard);
  background: var(--s-well);
  border: 1.5px dashed var(--accent-tint-line);
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
}
.v2-rs__start-label {
  font-size: 16px;
  font-weight: 700;
}
.v2-rs__hint {
  max-width: 80%;
  text-align: center;
  font-size: 13px;
  color: var(--t-muted);
}
/* The in-frame status (reading / nothing found / couldn't read): the app
 * toast's look — inverted surface, small radius, soft lift, centered — so a
 * problem reads as calm information, not red text (Randy 2026-09-30). */
.v2-rs__status {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 5px;
  background: var(--t-primary);
  color: var(--s-page);
  box-shadow: var(--sh-nav);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
/* Page tiles (Randy 2026-10-01: the 30px tiles' ✕ hung off the corner
 * inside a scrolling row that clipped it — hard to see, hard to hit). Each
 * tile is a real page picture with its number under it; its remove button
 * sits INSIDE the tile's top-right corner, on a scrim, 26px with a 36px hit
 * area. The row wraps instead of scrolling, so nothing is ever clipped. */
.v2-rs__pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.v2-rs__page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 4.25rem;
}
.v2-rs__thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: 10px;
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  color: var(--t-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  font: inherit;
  cursor: pointer;
}
.v2-rs__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-rs__page.is-on .v2-rs__thumb {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.v2-rs__thumb.is-add {
  background: none;
  box-shadow: none;
  border: 1.5px dashed var(--accent-tint-line);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
}
.v2-rs__thumb.is-add:disabled {
  opacity: 0.5;
}
.v2-rs__x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r2-round);
  background: rgba(0, 0, 0, 0.62);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.v2-rs__x::after {
  content: "";
  position: absolute;
  inset: -5px;
}
.v2-rs__num {
  font-size: 12px;
  font-weight: 650;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
.v2-rs__page.is-on .v2-rs__num {
  color: var(--accent-ink);
}
.v2-rs__alt {
  align-self: flex-start;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ---- Import a file (Randy 2026-09-30) ---- */
.v2-rf__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 11rem;
  padding: 24px 16px;
  border-radius: var(--r2-bigcard);
  background: var(--s-well);
  border: 1px dashed var(--accent-tint-line);
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
}
/* Files · Photos side by side (Randy 2026-10-04: screenshots import too). */
.v2-rf__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.v2-rf__sources .v2-rf__drop {
  min-height: 9.5rem;
  padding: 18px 10px;
  text-align: center;
}
.v2-rf__agains {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.v2-rf__drop:disabled {
  opacity: 0.5;
}
.v2-rf__dropicon {
  display: flex;
}
.v2-rf__droptitle {
  font-size: 16px;
  font-weight: 680;
}
.v2-rf__dropsub {
  font-size: 12.5px;
  color: var(--t-muted);
}
.v2-rf__file {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
}
.v2-rf__tile {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  color: var(--accent-ink);
}
.v2-rf__ftext {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-rf__fname {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--t-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-rf__fmeta {
  font-size: 12.5px;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
.v2-rf__again {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 620;
  cursor: pointer;
}
/* The toast's look (same as Scan's .v2-rs__status), in the flow. */
.v2-rf__status {
  align-self: center;
  margin: 0;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 5px;
  background: var(--t-primary);
  color: var(--s-page);
  box-shadow: var(--sh-nav);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.v2-rf__alt {
  align-self: center;
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 620;
  text-decoration: none;
}

/* Item 19: the draft's language notice in Write it in — "<Language>
   detected · Translate to English" / "Translated from … · Show original". */
/* Batch 8 §10: the review's ONE notices row (import-notices.js). The
 * general line keeps the notice style; the badge sits at its right end; the
 * other notices live inside the same box, revealed by a ~200 ms height
 * animation (grid rows 0fr → 1fr), each divided by a 0.5 px line in the
 * notice's ink. */
.v2-rw__notices {
  display: block;
  padding: 0;
}
.v2-rw__noticerow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
button.v2-rw__noticerow {
  cursor: pointer;
  touch-action: manipulation;
}
.v2-rw__noticerow p {
  flex: 1 1 auto;
  min-width: 0;
}
.v2-rw__noticebadge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-tint-line);
  background: var(--s-card);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.v2-rw__noticemore {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}
.v2-rw__notices.is-open .v2-rw__noticemore {
  grid-template-rows: 1fr;
}
.v2-rw__noticemore-inner {
  min-height: 0;
  overflow: hidden;
}
.v2-rw__noticeitem {
  padding: 10px 14px 12px 38px;
  border-top: 0.5px solid var(--accent-ink);
  font-size: 12.5px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
.v2-rw__noticeitem p {
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .v2-rw__noticemore {
    transition: none;
  }
}
.v2-rw__trnotice {
  align-items: center;
}
.v2-rw__trnotice svg {
  margin-top: 0;
}
.v2-rw__trbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  margin: -0.25rem 0;
  font: inherit;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.v2-rw__trbtn:disabled {
  opacity: 0.6;
  text-decoration: none;
}