/* Loupilo landing: open workbench and compact evidence intake (2 Nov 2026).
   Presentation only. Review method cards, CTA states and all event handlers stay
   in their existing modules. Loaded last so it can safely supersede legacy
   boxed .intake-workbench rules from craft.css and mobile brand.css. */

.intake-workbench.intake-workbench--open {
  box-sizing: border-box;
  margin: 0 0 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.intake-workbench--open > .row {
  align-items: baseline;
  gap: 12px 24px;
  margin: 0 0 25px;
  padding: 0 0 16px;
  border-bottom: 1px solid #3C4246;
}
.intake-workbench--open > .row h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.intake-workbench--open > .row .fine {
  line-height: 1.5;
  text-align: right;
}

/* More space for method choice; intake occupies ~38%, not half the layout. */
.intake-workbench--open > .grid2 {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(28px, 4.2vw, 54px);
  align-items: start;
}
.intake-workbench--open .intake-source-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}
.intake-workbench--open .intake-source-panel > .row[role="group"] {
  margin: 0;
  gap: 8px;
}
.intake-workbench--open .intake-source-panel button.intake-kind {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
}

/* Upload is a compact inline drop zone, rather than a large empty panel.
   Existing label still launches the native image picker; drag/drop is unchanged. */
.intake-workbench--open .intake-source-panel > .drop,
.intake-workbench--open .intake-source-panel > .drop:has(+ .step-list .step-item) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  min-height: 88px;
  padding: 14px 16px;
  margin: 0;
  border-radius: 10px;
  text-align: left;
  min-width: 0;
}
.intake-workbench--open .intake-source-panel > .drop strong {
  grid-column: 1;
  grid-row: 1;
  font-size: 14px;
  line-height: 1.35;
}
.intake-workbench--open .intake-source-panel > .drop > p.fine {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}
.intake-workbench--open .intake-source-panel > .drop > .upload-choice {
  box-sizing: border-box;
  grid-column: 2;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 9px 13px;
  white-space: nowrap;
}
.intake-workbench--open .intake-source-panel > .drop #intake-files {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
}

/* Evidence list: same thumbnails, ordering and removal controls, less chrome. */
.intake-workbench--open .intake-source-panel > .step-list {
  gap: 6px;
  margin: 0;
}
.intake-workbench--open .intake-source-panel .step-item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 52px;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
}
.intake-workbench--open .intake-source-panel .step-item img,
.intake-workbench--open .intake-source-panel .step-item .mock-thumb {
  display: block;
  width: 42px;
  height: 34px;
  min-width: 42px;
  object-fit: cover;
  border-radius: 5px;
}
.intake-workbench--open .intake-source-panel .step-item .mock-thumb {
  display: grid;
  place-items: center;
}
.intake-workbench--open .intake-source-panel .step-item > span:not(.mock-thumb) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: 12px;
}
.intake-workbench--open .intake-source-panel .step-item button {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  min-height: 38px;
  padding: 6px;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.intake-workbench--open .intake-source-panel button.intake-example {
  min-height: 40px;
  width: fit-content;
  margin: -1px 0 1px;
  padding: 6px 0;
  font-size: 12px;
}

/* Task and user context remain visible and editable; optional context
   stays collapsed by default. This changes only spacing, not field values. */
.intake-workbench--open .intake-source-panel > .field {
  margin: 0;
}
.intake-workbench--open .intake-source-panel > .field label {
  margin-bottom: 6px;
  line-height: 1.4;
}
.intake-workbench--open .intake-source-panel > .field textarea {
  min-height: 76px;
  max-width: 100%;
  padding: 10px 12px;
  line-height: 1.45;
}
.intake-workbench--open .intake-source-panel > .field input {
  min-height: 44px;
  padding: 10px 12px;
}
.intake-workbench--open .intake-source-panel > details {
  min-width: 0;
  margin: 2px 0 0;
  border: 0;
}
.intake-workbench--open .intake-source-panel > details summary {
  width: fit-content;
  min-height: 40px;
  display: list-item;
  padding: 10px 0;
  font-size: 12px;
  cursor: pointer;
}
.intake-workbench--open .intake-source-panel > details[open] .field {
  margin-bottom: 12px;
}
.intake-workbench--open .intake-source-panel > details[open] .field:first-of-type {
  margin-top: 8px;
}

/* The method selection area deliberately keeps its existing cards, hierarchy,
   selected/disabled treatments and primary/AI CTA styles. */
.intake-workbench--open .intake-method-panel {
  min-width: 0;
}
.intake-workbench--open #intake-error:empty {
  display: none;
}
.intake-workbench--open #intake-error:not(:empty) {
  margin: 16px 0 0;
}

/* On smaller tablet sizes, a full-width intake is more usable than a cramped
   two-column input. Method cards continue to use their existing breakpoints. */
@media (max-width: 920px) {
  .intake-workbench--open > .grid2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .intake-workbench--open .intake-source-panel {
    max-width: 680px;
  }
  .intake-workbench--open > .row .fine {
    text-align: left;
  }
}
@media (max-width: 600px) {
  .intake-workbench.intake-workbench--open {
    padding: 0;
    margin-bottom: 36px;
  }
  .intake-workbench--open > .row {
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 12px;
  }
  .intake-workbench--open > .row h2 { font-size: 21px; }
  .intake-workbench--open > .grid2 { gap: 26px; }
  .intake-workbench--open .intake-source-panel { gap: 10px; }
  .intake-workbench--open .intake-source-panel > .drop,
  .intake-workbench--open .intake-source-panel > .drop:has(+ .step-list .step-item) {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
    padding: 13px 14px;
    gap: 5px;
  }
  .intake-workbench--open .intake-source-panel > .drop strong {
    grid-column: 1;
    grid-row: 1;
  }
  .intake-workbench--open .intake-source-panel > .drop > p.fine {
    grid-column: 1;
    grid-row: 2;
  }
  .intake-workbench--open .intake-source-panel > .drop > .upload-choice {
    grid-column: 1;
    grid-row: 3;
    margin-top: 5px;
    width: fit-content;
  }
  .intake-workbench--open .intake-source-panel .step-item button {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    min-height: 44px;
  }
  .intake-workbench--open .intake-source-panel .step-item {
    min-height: 56px;
  }
}

/* One explanation on the landing page; all review setup lives in the workspace. */
#app .landing-review-loop{padding-top:40px}
#app .landing-review-loop h2{max-width:none}
.landing-loop-art{width:100%;aspect-ratio:4.4;background:url('/art/review-loop.webp') center 36% / 100% auto no-repeat;margin:24px 0}
.landing-loop-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0}
.landing-loop-steps li{border-top:1px solid var(--line,#404448);padding-top:18px;min-width:0}
.landing-loop-steps h3{margin:12px 0;font-size:22px;line-height:1.25}
.landing-loop-steps p{color:var(--muted,#b5b7b5);line-height:1.6;margin:0}
.landing-loop-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin:36px 0 0}
.landing-loop-actions .button,.landing-loop-actions button{min-height:44px;max-width:100%;text-align:center}
@media(max-width:740px){.landing-loop-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}.landing-loop-steps h3{font-size:20px}.landing-loop-art{margin:20px 0 28px}}
@media(max-width:420px){.landing-loop-steps{grid-template-columns:1fr;gap:20px}.landing-loop-steps li{padding-top:14px}.landing-loop-steps h3{margin:8px 0}.landing-loop-actions .button{width:100%}}


/* Mobile landing hero: shorten the editorial pause around copy and inspection artwork. */
@media (max-width: 740px) {
  #app .crafted-intro { gap: 0; }
  #app .crafted-intro .intake-hero { padding: 25px 0 0; }
  #app .crafted-intro .intake-hero h1 { margin: 15px 0 13px; line-height: 1.06; }
  #app .crafted-intro .intake-hero > p { line-height: 1.5; margin: 0 0 12px; }
  #app .crafted-intro .intake-hero > p.fine { margin: 8px 0 0; }
  #app .crafted-intro .inspection-art {
    max-width: 320px;
    margin: -16px auto 2px!important;
  }
  #app .landing-review-loop { padding-top: 23px; }
}
@media (max-width: 390px) {
  #app .crafted-intro .intake-hero { padding-top: 21px; }
  #app .crafted-intro .inspection-art {
    max-width: 295px;
    margin-top: -9px!important;
  }
}