/* ============================================================
   product-shared.css — shared form controls for the Three-Mode Hub.
   Owned by t-008 (worker-8). Imported by:
     css/product-form.css        (worker-5, Mode A)
     css/product-import-csv.css  (worker-6, Mode B)
     css/product-import-photos.css (worker-7, Mode C)

   Visual tokens: colors_and_type.css (terra accent, DM Sans + Fraunces).
   The pages should @import url('../colors_and_type.css') before this file,
   or include both <link>s. All controls below use --terra / --ink / --canvas
   variables and fall back to safe defaults if the parent stylesheet is missing.
   ============================================================ */

:root {
  /* Local fallbacks — only kick in if colors_and_type.css hasn't loaded. */
  --ps-accent:        var(--terra-500, #B8451F);
  --ps-accent-hover:  var(--terra-600, #9E3818);
  --ps-accent-soft:   var(--terra-100, #F6E2D1);
  --ps-ink:           var(--ink,       #1A1412);
  --ps-ink-soft:      var(--ink-soft,  #3A2F2A);
  --ps-ink-muted:     var(--ink-muted, #7A6F68);
  --ps-bg:            var(--canvas,    #FBF7F1);
  --ps-bg-soft:       var(--canvas-soft, #F3EADC);
  --ps-border:        var(--border,    rgba(26, 20, 18, 0.10));
  --ps-danger:        #B91C1C;
  --ps-danger-soft:   #FEE2E2;
  --ps-success:       #15803D;
  --ps-radius:        var(--radius-md, 12px);
  --ps-radius-sm:     var(--radius-sm, 8px);
}

/* ============================================================
   Form fields — wrapper + label + input + helper/error
   ============================================================ */
.ps-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ps-label {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-ink);
  letter-spacing: 0.01em;
}
.ps-label .ps-required { color: var(--ps-accent); margin-left: 2px; }
.ps-helper {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ps-ink-muted);
}
.ps-error {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ps-danger);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ps-error::before { content: '!'; display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 999px; background: var(--ps-danger); color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }

/* ============================================================
   Inputs — text, number, select, textarea share the .ps-input base
   ============================================================ */
.ps-input,
.ps-select,
.ps-textarea {
  width: 100%;
  min-height: 44px;            /* mobile touch target */
  padding: 10px 14px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 15px;
  color: var(--ps-ink);
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.ps-textarea { min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.ps-input::placeholder,
.ps-textarea::placeholder { color: var(--ps-ink-muted); opacity: 0.7; }

.ps-input:hover,
.ps-select:hover,
.ps-textarea:hover { border-color: var(--ps-ink-muted); }

.ps-input:focus,
.ps-select:focus,
.ps-textarea:focus {
  outline: none;
  border-color: var(--ps-accent);
  box-shadow: 0 0 0 3px rgba(184, 69, 31, 0.15);
}

.ps-input[disabled],
.ps-select[disabled],
.ps-textarea[disabled] { background: var(--ps-bg-soft); color: var(--ps-ink-muted); cursor: not-allowed; }

/* Invalid state — pair with .ps-error below the field. */
.ps-input[aria-invalid="true"],
.ps-select[aria-invalid="true"],
.ps-textarea[aria-invalid="true"] {
  border-color: var(--ps-danger);
  background: #FEF7F7;
}

/* Number inputs — strip spinner on Firefox + add RM prefix support */
.ps-input[type="number"] { -moz-appearance: textfield; }
.ps-input[type="number"]::-webkit-outer-spin-button,
.ps-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ps-input-prefix {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ps-input-prefix > span {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ps-ink-muted);
  background: var(--ps-bg-soft);
  border: 1px solid var(--ps-border);
  border-right: none;
  border-radius: var(--ps-radius-sm) 0 0 var(--ps-radius-sm);
}
.ps-input-prefix > .ps-input { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Select chevron */
.ps-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%237A6F68' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ============================================================
   Buttons — primary / secondary / danger / ghost
   ============================================================ */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--ps-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
  user-select: none;
  white-space: nowrap;
}
.ps-btn:active { transform: translateY(1px); }
.ps-btn:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-btn[disabled],
.ps-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.ps-btn-primary {
  background: var(--ps-accent);
  color: #fff;
}
.ps-btn-primary:hover { background: var(--ps-accent-hover); }

.ps-btn-secondary {
  background: #fff;
  color: var(--ps-ink);
  border-color: var(--ps-border);
}
.ps-btn-secondary:hover { background: var(--ps-bg-soft); border-color: var(--ps-ink-muted); }

.ps-btn-danger {
  background: #fff;
  color: var(--ps-danger);
  border-color: var(--ps-danger-soft);
}
.ps-btn-danger:hover { background: var(--ps-danger-soft); }

.ps-btn-ghost {
  background: transparent;
  color: var(--ps-ink-soft);
}
.ps-btn-ghost:hover { color: var(--ps-accent); background: var(--ps-bg-soft); }

.ps-btn-sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.ps-btn-block { width: 100%; }

/* Loading spinner inside a primary button */
.ps-btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.ps-btn-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 999px;
  animation: ps-spin 700ms linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Empty state — used by all three modes' initial views
   ============================================================ */
.ps-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  border: 1.5px dashed var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-bg-soft);
  color: var(--ps-ink-muted);
  gap: 12px;
}
.ps-empty h3 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ps-ink);
  margin: 0;
}
.ps-empty p { font-size: 14px; line-height: 1.55; margin: 0; max-width: 380px; }
.ps-empty .ps-btn { margin-top: 4px; }

/* ============================================================
   Banner / toast — inline page messages
   ============================================================ */
.ps-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--ps-radius-sm);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid;
}
.ps-banner-info    { background: var(--ps-bg-soft);  border-color: var(--ps-border);     color: var(--ps-ink); }
.ps-banner-error   { background: var(--ps-danger-soft); border-color: rgba(185,28,28,0.25); color: var(--ps-danger); }
.ps-banner-success { background: #DCFCE7; border-color: rgba(21,128,61,0.25); color: var(--ps-success); }

/* ============================================================
   Mobile (≤640px) — looser tap targets, full-width buttons
   ============================================================ */
@media (max-width: 640px) {
  .ps-input,
  .ps-select,
  .ps-textarea { font-size: 16px; }    /* avoid iOS auto-zoom on focus */
  .ps-btn      { width: 100%; }
  .ps-btn-inline { width: auto; }      /* opt-out for nav rows */
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ps-btn, .ps-input, .ps-select, .ps-textarea { transition: none; }
  .ps-btn-loading::after { animation: none; }
}