/* Step 1 (customer/templates/wizard/step1.html) wears intake.css, the tm-intake__ contract, as it is. This file fits the
   app's own pieces to it -- the provider logos as images, the upload glyph, the machinery classes service-tiles.js and the
   upload and picker scripts find their parts by -- and gives the light theme the contract's tokens. Loaded after intake.css. */
.step.active[data-step="1"], :root:not([data-theme="light"]) .step.active[data-step="1"] { box-shadow: none; }
:root[data-theme="light"] .tm-intake {
  --tm-panel: #fff; --tm-tile: #f4f0e9; --tm-tile-hover: #ebe6dd; --tm-border: rgba(28, 24, 36, .16); --tm-text: #1c1a22;
  --tm-muted: #625e6b; --tm-gold: #8f5405; --tm-focus: #8f5405;
}
:root[data-theme="light"] .tm-intake__panel { background: #fff; box-shadow: 0 20px 55px rgba(28, 24, 36, .1); }
:root[data-theme="light"] .tm-intake__input-wrap { background: #f4f0e9; border-color: rgba(28, 24, 36, .28); }
:root[data-theme="light"] .tm-intake__input::placeholder { color: #7a7584; }
:root[data-theme="light"] .tm-intake__provider-icon { box-shadow: 0 0 0 1px rgba(28, 24, 36, .12); }

/* A desktop shows the chosen source's page in place of the cards, as a phone does (service-tiles.js): no rule between
   the cards and the page, and Change source keeps its word beside the chevron so the way back is read, not guessed. */
@media (min-width: 760px) {
  .tm-intake__detail { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
  #source-root[data-way="ask"] .tm-intake__back { width: auto; margin-inline-start: -4px; padding-inline-end: 12px; justify-content: flex-start; }
  #source-root[data-way="ask"] .tm-intake__back-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* A provider's name on as many lines as it has words, as the reference draws it. */
.tm-intake__option-name { white-space: pre-line; }
.tm-intake__option[aria-pressed="true"] { border-color: var(--tm-gold); }
.tm-intake__provider-icon img { display: block; width: 28px; height: 28px; }
.tm-intake__provider-heading .tm-intake__provider-icon img { width: 32px; height: 32px; }
.tm-intake__provider-icon--plain svg { fill: none; stroke: var(--tm-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tm-intake__upload-option svg, .tm-intake__back svg { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tm-intake__back svg { stroke: currentColor; stroke-width: 2; }
.tm-intake__upload-option[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tm-gold); }

/* The tile tapped, while what it started is still at work (service-tiles.js markTileWorking, upload/photo-pick.js):
   pressed in, with a ring that breathes -- a tap whose page took seconds to come read as a tap that had missed. */
.tm-intake__option.is-working, .tm-intake__upload-option.is-working, .pick-open.is-working {
  border-color: var(--tm-gold); box-shadow: 0 0 0 2px var(--tm-gold); transform: scale(.97);
  animation: tm-intake-working 1.1s ease-in-out infinite;
}
@keyframes tm-intake-working { 50% { box-shadow: 0 0 0 5px rgba(143, 84, 5, .3); } }
@media (prefers-reduced-motion: reduce) {
  .tm-intake__option.is-working, .tm-intake__upload-option.is-working, .pick-open.is-working { animation: none; }
}

/* The link box: the app's global input rules give way to the wrapper's own look. */
.tm-intake__input { width: 100%; border-radius: 0; box-shadow: none; }
.tm-intake__input:focus-visible { box-shadow: none; }
.tm-intake__field-hint { display: block; }
.tm-intake__field-hint:empty { display: none; }
.tm-intake__field-error { min-height: 0; }
.tm-intake__button { margin: 0; }
.tm-intake__button.checking { cursor: progress; }
.tm-intake__help, .tm-intake__small-privacy { margin-bottom: 0; }
.tm-intake__help { margin-bottom: 14px; }
.tm-intake__external { display: inline-block; }
.tm-intake__small-privacy details p strong { display: block; color: var(--tm-text); }

/* Google Photos' "choose another way" once a way is chosen: a quiet link under the heading. */
.tm-intake .change-way { margin: -4px 0 12px; padding: 6px 0; border: 0; background: none; color: var(--tm-gold); font-size: 13px; font-weight: 650; }
/* A service that is also picked from (Google Photos) opens on its album link and nothing else: the chevron alone as the back
   control with the service's logo on the same row, the heading, the line of how to get the link, the box, the how-to right
   under it, then (once the album is found) the card, Continue and the shortcut. The picker is one quiet sentence at the very
   bottom, behind a confirmation. The sources without a picker keep the plain form. */
#source-root[data-way="ask"] :is(#album-url-label, #album-url-hint) { display: none; }
#source-root[data-way="ask"] .tm-intake__detail-inner { position: relative; }
#source-root[data-way="ask"] .tm-intake__back { width: 44px; margin-inline-start: -12px; justify-content: center; }
#source-root[data-way="ask"] .tm-intake__back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#source-root[data-way="ask"] .tm-intake__back svg { width: 20px; height: 20px; }
#source-root[data-way="ask"] .tm-intake__provider-heading { display: block; margin: 0; }
#source-root[data-way="ask"] #source-head-badge { position: absolute; top: 8px; inset-inline-end: 0; width: 28px; height: 28px; }
#source-root[data-way="ask"] #source-head-badge img { width: 20px; height: 20px; }
#source-root[data-way="ask"] .tm-intake__provider-subtitle { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
#source-root[data-way="ask"] .tm-intake__field { margin-top: 18px; }
#source-root[data-way="ask"] .tm-intake__input { font-size: 16px; }   /* 16 px: iOS does not zoom the page on focus */
/* The check's own line and the error sit right under the box. */
.tm-intake .album-checking { margin: 8px 0 0; }
/* The how-to under the box: a quiet line that opens three steps, each with a picture of what to do. */
#source-link .tm-intake__help { border: 0; margin: 4px 0 14px; }
#source-link .tm-intake__help summary { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; padding: 0 2px; }
#source-link .tm-intake__help summary::after { margin-inline-start: auto; }
#source-link .howto-glyph { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#source-link .tm-intake__help-content { padding: 0 0 6px; }
#source-link .tm-intake__help-content ol { display: grid; gap: 10px; margin: 2px 0 6px; padding: 0; list-style: none; counter-reset: howto; }
#source-link .tm-intake__help-content li { counter-increment: howto; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--tm-border); border-radius: 12px; background: var(--tm-tile); font-size: 14px; color: var(--tm-text); }
#source-link .tm-intake__help-content li::before { content: counter(howto); flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; border: 1.5px solid var(--tm-gold); color: var(--tm-gold); font: italic 13px Georgia, serif; }
#source-link .tm-intake__help-content li svg { margin-inline-start: auto; flex: none; width: 22px; height: 22px; fill: none; stroke: var(--tm-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#source-link .tm-intake__external { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
/* Once the album is found the how-to has done its work. */
#source-link.is-verified .tm-intake__help { display: none; }
/* The found card sits between the box and Continue; an album that is there but cannot be a film shows no "found" tick. */
#source-link .cover-preview { margin: 14px 0 12px; max-width: none; padding: 10px; gap: 12px; border-color: rgba(120, 200, 150, .45); background: rgba(120, 200, 150, .07); }
#source-link .cover-preview img { width: 56px; height: 56px; border-radius: 10px; }
#source-link .cover-preview .cover-info strong { font-size: 15px; }
#source-link .cover-found { display: flex; align-items: center; gap: 5px; color: #8fd9ac; text-transform: none; letter-spacing: 0; font-size: 12px; }
#source-link .cover-found svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#source-link .cover-preview.is-refused { border-color: var(--tm-border); background: transparent; }
#source-link .cover-preview.is-refused .cover-found { display: none; }
/* The shortcut is the second way on: outlined, never the filled button, one short line under it. */
#source-link .auto-create-block { margin-top: 10px; }
#source-link .auto-create { border: 1px solid rgba(239, 169, 71, .6); background: transparent; color: var(--tm-text); }
/* The small links under the link panel (the sharing note) belong to the link; the upload and a picker's own page have none. */
.source-small-links { margin-top: 6px; }
.source-small-links .tm-intake__small-privacy summary { justify-content: space-between; }
#source-root[data-way="pick"] .source-small-links, #source-view-b:has(#source-upload:not([hidden])) .source-small-links { display: none; }
/* The picker next to the album link: only its quiet sentence, far below Continue, a small text link and not a button. Its own
   button, status and Continue belong to the picker's page (data-way="pick"). */
#source-root[data-way="ask"] .pick-panel > :not(.pick-alt):not(.pick-confirm) { display: none; }
#source-root:not([data-way="ask"]) :is(.pick-alt, .pick-confirm) { display: none; }
.tm-intake .pick-alt { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--tm-border); text-align: center; }
.tm-intake .pick-alt-open { display: inline; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--tm-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
/* The confirmation before the picker opens: a sheet over a dimmed page. */
.pick-confirm { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .6); }
.pick-confirm[hidden] { display: none; }
.pick-confirm-sheet { width: 100%; max-width: 480px; padding: 20px 18px 18px; border-radius: 22px 22px 0 0; border: 1px solid var(--tm-border); background: var(--tm-panel, #1b1920); color: var(--tm-text); }
.pick-confirm-sheet h3 { margin: 0 0 6px; font: 500 21px/1.2 Georgia, 'Times New Roman', serif; }
.pick-confirm-sheet p { margin: 0 0 16px; font-size: 14px; color: var(--tm-muted); }
.pick-confirm-sheet .tm-intake__button { display: block; width: 100%; margin-bottom: 8px; }
.pick-confirm-sheet .pick-confirm-back { background: transparent; border-color: transparent; color: var(--tm-muted); }

/* The picker's and the upload's panels keep their own parts; the buttons wear the contract's. */
.tm-intake .pick-panel > p { color: var(--tm-muted); font-size: 13px; }
.tm-intake .pick-open { margin: 14px 0 10px; }
.tm-intake .pick-open img { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; box-sizing: border-box; }
/* A Continue not yet pressable stays in sight, dimmed, as the reference draws its own. */
/* The footer's links stay secondary (the reference's footer), with a finger-sized target. */
.site-foot { justify-content: center; gap: 0 20px; }
/* min-width as well as min-height: a short word is still a finger's target. English's own "Terms" is wide
   enough, but German's "AGB" came to 22px and Japanese is shorter still. */
.site-foot .suggest-open, .site-foot .sandbox-mark { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; font-size: 11px; color: var(--muted); opacity: 1; }
/* The wrapper carries the focus ring; the input inside it draws none of its own. */
.tm-intake .tm-intake__input:focus-visible { outline: none; }
.tm-intake .change-way { margin-bottom: -8px; }
.tm-intake__small-privacy summary { color: var(--tm-muted); }

/* Where the app's own rules (h2, input, button, summary) outrank the contract's classes, the contract's values are said again
   with the weight to win: intake.css is the source of truth for every one of these. */
.tm-intake h2.tm-intake__title { margin: 0; font: 500 clamp(27px, 4.2vw, 36px)/1.14 Georgia, 'Times New Roman', serif; letter-spacing: -.032em; }
.tm-intake h3.tm-intake__provider-title { font: 500 clamp(24px, 4vw, 30px)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; margin: 0; }
.tm-intake .tm-intake__field-label, .tm-intake .tm-intake__input-wrap { color: var(--tm-text); }
.tm-intake .tm-intake__input-wrap, .tm-intake input.tm-intake__input, .tm-intake button.tm-intake__paste, .tm-intake .tm-intake__small-privacy summary { font-weight: 400; }
.tm-intake button.tm-intake__paste { font-size: 12px; padding: 8px 11px; }
.tm-intake .tm-intake__help summary, .tm-intake .tm-intake__small-privacy summary { min-height: 0; }
.tm-intake #inspect { margin: 0; }
.tm-intake__back { min-height: 44px; margin: -10px 0 8px; padding: 0; }   /* a finger's target, the text where the reference puts it */
/* No example line under the box: the reference has the placeholder say the shape of the link. */
.tm-intake #album-example { display: none; }
/* The folded summaries: a finger's height each, the help one as the reference draws it, the privacy one centred on its line. */
.tm-intake .tm-intake__help summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.tm-intake .tm-intake__help summary::after { float: none; }
.tm-intake .tm-intake__small-privacy summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }

/* The provider cards read as buttons, not as a row of logos (the owner: the upload button looked like the only way on): a gold
   rim like the upload button's, a raised face, a chevron in the corner, and a press that gives. */
.tm-intake .tm-intake__option { position: relative; border: 1px solid var(--tm-border); background: linear-gradient(180deg, #2a2730, #1e1c23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 16px -10px rgba(0, 0, 0, .9); }
.tm-intake .tm-intake__option::after { content: ""; position: absolute; inset-inline-end: 11px; bottom: 11px; width: 7px; height: 7px;
  border-inline-end: 2px solid var(--tm-muted); border-bottom: 2px solid var(--tm-muted); transform: rotate(calc(-45deg * var(--flow))); }
.tm-intake .tm-intake__option:hover::after, .tm-intake .tm-intake__option[aria-pressed="true"]::after { border-color: var(--tm-gold); }
.tm-intake .tm-intake__option[aria-pressed="true"] { border-color: var(--tm-gold); box-shadow: 0 0 0 1px var(--tm-gold); }
.tm-intake .tm-intake__option:hover { border-color: var(--tm-gold); background: linear-gradient(180deg, #332d2f, #231f25); }
.tm-intake .tm-intake__option:active { transform: scale(.97); background: rgba(239, 169, 71, .14); }
:root[data-theme="light"] .tm-intake .tm-intake__option { background: linear-gradient(180deg, #fffdf9, #f1ece3); box-shadow: 0 8px 16px -12px rgba(28, 24, 36, .5); }
:root[data-theme="light"] .tm-intake .tm-intake__option:hover { background: #fff; }

/* 5. Continue off: a flat, plainly inactive button (not the gold dimmed); on: the gold. */
.tm-intake #inspect:disabled { opacity: 1; cursor: not-allowed; color: var(--tm-muted); background: var(--tm-tile); border-color: var(--tm-border); box-shadow: none; }
.tm-intake #inspect:not(:disabled) { box-shadow: 0 10px 24px -16px rgba(239, 169, 71, .6); }
/* 6. Sharing and privacy folds with a chevron, like the help line. */
.tm-intake .tm-intake__small-privacy summary { list-style: none; justify-content: space-between; padding: 0 2px; }
.tm-intake .tm-intake__small-privacy summary::-webkit-details-marker { display: none; }
.tm-intake .tm-intake__small-privacy summary::after { content: ""; width: 7px; height: 7px; margin-inline-end: 3px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(calc(45deg * var(--flow))); transition: transform .15s ease; }
.tm-intake .tm-intake__small-privacy details[open] summary::after { transform: rotate(calc(-135deg * var(--flow))); }
.tm-intake .tm-intake__small-privacy details p { padding: 0 2px; }
/* 4. The one line of what to do, over the box. */
.tm-intake .tm-intake__field-lead { display: block; margin: -2px 0 8px; font-size: 13px; line-height: 1.4; color: var(--tm-muted); }
/* 2. New album has nothing to start over from while the album is being chosen -- step 1 only; the start page keeps it
   in the menu (it opens step 1 afresh). The form keeps step 1 marked active behind the review, the progress screen and the finished
   film (a page opened at ?job= never walks the steps at all), so the wizard must be the screen on show for
   this to hide anything: without that test the way out was gone from every screen after Create. */
.shell:not([data-screen="landing"]):has(#wizard:not([hidden]) .step[data-step="1"].active) .start-over { display: none; }
/* 7. Less air on a phone: the header, the step line and the bottom of a source's form. 1 and 7: the two dots become
   "Step 1 of 2" (each dot carries its count; only the current one shows). */
@media (max-width: 759px) {
  .shell { padding-top: 22px; }
  .brand { padding-bottom: 12px; }
  .stepper { margin: 10px 0 2px; }
  .stepper-dot:not(.active), .stepper-line, .stepper-dot.active .dot-num { display: none; }
  .stepper-dot.active { padding: 6px 0; }
  .stepper-dot.active .dot-count { display: inline; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tm-gold, var(--accent)); }
  .tm-intake__panel { padding: 22px 18px 18px; }
  .tm-intake__help { margin: 10px 0; }
  .tm-intake__small-privacy { margin-top: 6px; }
  .tm-intake__provider-heading { margin-bottom: 12px; }
}
.dot-count { display: none; }
/* The one line over the box is plain text (the label's weight stops at its title); the privacy fold sits right under Continue. */
.tm-intake .tm-intake__field-lead { font-weight: 400; }
.tm-intake .tm-intake__small-privacy details { margin: 0; padding: 0; border: 0; background: none; }
.tm-intake .tm-intake__small-privacy { margin-top: 0; }
/* The price and retention note under the start cards (payments on only): quiet small type, like the other notes. */
.tm-intake .start-price, .tm-intake .start-note { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--tm-muted); text-align: start; overflow-wrap: anywhere; }
.tm-intake .start-note { margin-block-start: 4px; font-size: 12px; }