/* ============================================================
   V9 item-form shell — the shared surface for the Add dock and the Edit dock.
   Both roots carry .v9-item-form; the Add dock adds .v9-add-dock for its
   add-only bits (kind pills, card-lookup, the "+ Add a photo" dropzone). These
   rules were factored out of add.css so Add and Edit render identically and
   can't drift. Structural class names keep the .v9-add-* prefix (shared) to
   avoid a churny rename across add-panel.js — neutralise to .v9-item-form-* in
   Stage C. Loaded BEFORE add.css.
   ============================================================ */

/* ---- panel layout: content scrolls, the save bar is a pinned footer OUTSIDE
        the scroll region (root is flex-column, min-height:100% from shell.css). ---- */
.v9-item-form { height: 100%; min-height: 0; padding: 0; gap: 0; }
.v9-item-form .v9-add-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--v9-space-3);
  padding: var(--v9-space-3) var(--v9-space-4) var(--v9-space-2);
}
.v9-item-form .v9-add-scroll > * { flex: 0 0 auto; }
/* Override the detail dock's hard-fit hero rule (shell.css forces width +
   max-width:100% !important on stage children). Specificity (0,3,1) + !important
   beats it: the dropzone goes full-width, the art caps to a tidy card size. */
.v9-item-form .card-detail-visual-stage.v9-add-hero { display: block; padding: 0; place-items: stretch; }
.v9-item-form .card-detail-visual-stage.v9-add-hero > .v9-add-hero-zone { width: auto !important; max-width: 100% !important; height: auto !important; }
.v9-item-form .card-detail-visual-stage.v9-add-hero > .v9-add-hero-img { width: 9.5rem !important; height: auto !important; max-width: none !important; max-height: none !important; }

/* ---- form controls: filled + borderless, width:100% + min-width:0 so a select
        never blows out its grid cell. ---- */
.v9-item-form .v9-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 2.15rem;
  padding: 0 var(--v9-space-2);
  border: 0;
  border-radius: var(--v9-r-sm);
  /* background-COLOR (not the shorthand) so it doesn't wipe a select's chevron. */
  background-color: var(--v9-raised);
  color: var(--v9-text);
  font: 400 var(--v9-text-sm) var(--v9-font-ui);
}
.v9-item-form textarea.v9-input { padding: var(--v9-space-1) var(--v9-space-2); resize: vertical; min-height: 2.8rem; line-height: 1.4; }
.v9-item-form .v9-input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--v9-accent); }
/* Add select keeps kit.css's chevron now that the fill is background-COLOR (no
   longer wiped); this just positions it. The Edit pane's legacy <select> gets
   its chevron drawn at the end of this file (after the edit fill). */
.v9-item-form .v9-select { background-position: right 0.6rem center; padding-right: 1.9rem; }

/* ---- type: small calm labels, accent section headers (larger than fields). ---- */
.v9-item-form .t-eyebrow { font-size: var(--v9-text-xs); letter-spacing: 0.04em; color: var(--v9-text-mute); }
.v9-item-form .card-detail-disclosure-trigger .t-eyebrow { font-size: 0.78rem; color: var(--v9-accent); font-weight: 600; letter-spacing: 0.02em; }

/* ---- hero base (the slim-dropzone vs art treatment is per-dock) ---- */
.v9-item-form .card-detail-visual-stage.v9-add-hero { position: relative; min-height: 0; padding: 0; }
.v9-item-form .v9-add-hero-img { object-fit: contain; display: block; margin: 0 auto; border-radius: var(--v9-r-md); }

/* ---- identity: eyebrow + name-as-title ---- */
.v9-item-form .v9-add-id { display: grid; gap: var(--v9-space-1); }
.v9-item-form .v9-add-eyebrow { color: var(--v9-text-mute); }
.v9-item-form .v9-add-title-input {
  width: 100%; min-width: 0; box-sizing: border-box;
  margin: 0; padding: 2px 0;
  border: 0; border-bottom: 1px solid var(--v9-line);
  background: transparent; color: var(--v9-text);
  font: 500 1.15rem/1.18 var(--v9-font-ui); letter-spacing: -0.01em;
}
.v9-item-form .v9-add-title-input::placeholder { color: var(--v9-text-faint); font-weight: 400; }
.v9-item-form .v9-add-title-input:focus-visible { outline: none; border-bottom-color: var(--v9-accent); }

/* ---- essentials: asking price figure + qty pill ---- */
.v9-item-form .v9-add-essentials { border: 0; padding: 0; background: transparent; }
.v9-item-form .card-detail-actionblock-figures { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--v9-space-3); flex-wrap: wrap; }
.v9-item-form .card-detail-price-block { display: grid; gap: 2px; min-width: 0; }
.v9-item-form .v9-add-price-wrap { display: flex; align-items: baseline; gap: 3px; }
.v9-item-form .v9-add-price-wrap::before { content: "$"; color: var(--v9-text-faint); font: 400 1.4rem/1 var(--v9-font-mono); }
.v9-item-form .v9-add-price-input {
  width: 7rem; min-width: 0; border: 0; background: transparent; padding: 0;
  color: var(--v9-text); font: 400 1.4rem/1 var(--v9-font-mono); letter-spacing: -0.01em;
}
.v9-item-form .v9-add-price-input::placeholder { color: var(--v9-text-faint); }
.v9-item-form .v9-add-price-input:focus-visible { outline: none; color: var(--v9-accent); }
.v9-item-form .v9-add-qty {
  display: flex; align-items: baseline; gap: var(--v9-space-1);
  border: 1px solid var(--v9-line); border-radius: var(--v9-r-pill);
  padding: 0.25rem var(--v9-space-2);
}
.v9-item-form .v9-add-qty .v9-add-qty-input { width: 2.2rem; border: 0; background: transparent; padding: 0; color: var(--v9-text); font: 500 var(--v9-text-md) var(--v9-font-mono); text-align: right; }
.v9-item-form .v9-add-qty .v9-add-qty-input:focus-visible { outline: none; }

/* ---- field grids ---- */
.v9-item-form .v9-add-field { display: grid; gap: 3px; min-width: 0; }
.v9-item-form .v9-add-field > .t-eyebrow { color: var(--v9-text-mute); }
.v9-item-form .v9-add-grid { display: grid; gap: var(--v9-space-2); min-width: 0; }
.v9-item-form .v9-add-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v9-space-2); min-width: 0; }
.v9-item-form .v9-add-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--v9-space-2); min-width: 0; }
.v9-item-form .v9-add-grid-2 > *, .v9-item-form .v9-add-grid-3 > * { min-width: 0; }
.v9-item-form .v9-add-checks { display: flex; flex-wrap: wrap; gap: var(--v9-space-3); padding-top: 2px; }
.v9-item-form .v9-add-check { display: flex; align-items: center; gap: 6px; color: var(--v9-text); font-size: var(--v9-text-sm); }
.v9-item-form .v9-add-hint { font-size: var(--v9-text-xs); color: var(--v9-text-faint); line-height: 1.35; }
.v9-item-form .v9-add-check-toggle { align-items: flex-start; gap: var(--v9-space-2); }
.v9-item-form .v9-add-check-toggle input { margin-top: 3px; flex: 0 0 auto; }
.v9-item-form .v9-add-check-copy { display: grid; gap: 1px; }
.v9-item-form .v9-add-check-title { color: var(--v9-text); font-size: var(--v9-text-sm); }

/* ---- save bar: a pinned footer below the scroll region ---- */
.v9-item-form .v9-add-savebar {
  flex: 0 0 auto; margin: 0;
  display: flex; align-items: center; gap: var(--v9-space-2);
  padding: var(--v9-space-2) var(--v9-space-4) var(--v9-space-3);
  border-top: 1px solid var(--v9-line);
  background: var(--v9-surface);
}
.v9-item-form .v9-add-save { flex: 1 1 auto; min-height: 2.5rem; font-weight: 600; }
.v9-item-form .v9-add-another { flex: 0 0 auto; }
.v9-item-form .v9-add-counter { margin-right: auto; color: var(--v9-pos); font-size: var(--v9-text-xs); }

/* ============================================================
   Edit-dock specifics (.v9-edit-pane): the edit pane reuses the legacy field
   builders (editStats/editCell/editTextarea/locationEditSection), so re-skin
   their markup (.input/.select/.textarea/.field/.card-detail-stats) to the V9
   filled look, plus the item-art hero + a compact replace-photo row.
   ============================================================ */
.v9-edit-pane .input,
.v9-edit-pane .select,
.v9-edit-pane select,
.v9-edit-pane .textarea,
.v9-edit-pane textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 2.15rem; padding: 0 var(--v9-space-2);
  border: 0; border-radius: var(--v9-r-sm);
  background-color: var(--v9-raised); color: var(--v9-text);
  font: 400 var(--v9-text-sm) var(--v9-font-ui);
}
.v9-edit-pane .textarea,
.v9-edit-pane textarea { padding: var(--v9-space-1) var(--v9-space-2); resize: vertical; min-height: 2.8rem; line-height: 1.4; }
.v9-edit-pane .input:focus-visible,
.v9-edit-pane .select:focus-visible,
.v9-edit-pane select:focus-visible,
.v9-edit-pane .textarea:focus-visible,
.v9-edit-pane textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--v9-accent); }

/* field wrappers (editCell/editSelect = bare <div>; location uses .field <label>) */
.v9-edit-pane .card-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v9-space-2); min-width: 0; }
.v9-edit-pane .card-detail-stats > div,
.v9-edit-pane .card-detail-stats > .field { display: grid; gap: 3px; min-width: 0; align-content: start; }
.v9-edit-pane .card-detail-stats > div > .t-eyebrow,
.v9-edit-pane .card-detail-stats > .field > span { color: var(--v9-text-mute); }
.v9-edit-pane .v9-edit-notes { display: grid; gap: var(--v9-space-2); }
.v9-edit-pane .v9-edit-notes > div { display: grid; gap: 3px; min-width: 0; }
.v9-edit-pane .field-hint { font-size: var(--v9-text-xs); color: var(--v9-text-faint); line-height: 1.35; }

/* JP/KR checkbox rows span the grid */
.v9-edit-pane .detail-checkbox-field { display: flex; align-items: flex-start; gap: var(--v9-space-2); grid-column: 1 / -1; color: var(--v9-text); }
.v9-edit-pane .detail-checkbox-field input { margin-top: 3px; flex: 0 0 auto; }
.v9-edit-pane .detail-checkbox-copy { display: grid; gap: 1px; }
.v9-edit-pane .detail-checkbox-copy strong { color: var(--v9-text); font-size: var(--v9-text-sm); font-weight: 500; }
.v9-edit-pane .detail-checkbox-copy span { font-size: var(--v9-text-xs); color: var(--v9-text-faint); }

/* reused location section: drop its wrapper chrome + own title (the disclosure supplies it) */
.v9-edit-pane .card-detail-location-editor { display: block; padding: 0; margin: 0; border: 0; background: transparent; }
.v9-edit-pane .card-detail-location-editor > .card-detail-section-title { display: none; }

/* hero: the item card art at a tidy size */
.v9-edit-pane .card-detail-visual-stage.v9-edit-hero { display: grid; place-items: center; padding: 0; }
.v9-edit-pane .card-detail-visual-stage.v9-edit-hero > * { width: 9.5rem !important; max-width: 9.5rem !important; height: auto !important; }

/* compact replace-photo row under the hero */
.v9-edit-pane .v9-edit-photo { display: flex; align-items: center; justify-content: center; gap: var(--v9-space-2); }
.v9-edit-pane .v9-edit-photo-btn { min-height: 2rem; padding-inline: var(--v9-space-3); font-size: var(--v9-text-sm); }
.v9-edit-pane .v9-edit-photo-clear { background: none; border: 0; color: var(--v9-text-faint); font-size: var(--v9-text-sm); cursor: pointer; }
.v9-edit-pane .v9-edit-photo-clear:hover { color: var(--v9-text-mute); }
.v9-edit-pane .sr-only-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Chevron for the edit pane's reused legacy <select> (kit's .v9-select doesn't
   match it). Placed last so its padding-right wins over the fill shorthand. */
.v9-edit-pane select,
.v9-edit-pane .select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 1.9rem;
}