/* ─────────────────────────────────────────────────────────────────
   css/props-panel-polish.css

   Wave 7.x (2026-05-09) — NN/g polish pass on the Edit Tile (right
   sidebar) panel. Bundles 6 audit-flagged fixes:

     1. Sticky header (title + ✕ close) so they don't scroll out of
        reach on tall forms / phone.
     2. Sticky action footer (Done) for the same reason — primary
        action always one tap away.
     3. Soft section blocks — each .props-group gets a subtle
        background tint so the eye groups related fields.
     4. Action-button hierarchy — Done = full-width amber primary
        (was bright blue, fought the brand); Duplicate = secondary
        ghost (was bright green, competed with Done).
     5. Custom Voice button hierarchy — Record = primary tint
        (the action that PRODUCES new state); Play + Clear =
        secondary ghost (review / undo).
     6. Inline help text style — small italic hint below Label
        and Spoken Text inputs to teach the difference without
        forcing a tutorial.

   Loaded LAST in the cascade (after wave7-mobile.css) so its
   targeted overrides win over the generic builder.css rules.
   Pure CSS, no JS, no functional impact if the file is missing
   (graceful degrade to the prior styling).

   builder.css is at YELLOW (989/1000); this file isolates the
   polish so builder.css stays under threshold.

   LABEL: PILOT-READY. Visual polish only — live test on iOS
   Safari + Android Chrome before PRODUCTION-READY (sticky
   positioning + flex layouts can break in unexpected ways on
   in-app WebView shells like FB / Instagram browser).
───────────────────────────────────────────────────────────────── */

/* ── 1+2. Sticky header + sticky footer ─────────────────────── */
/* Wrap the props-inner in a column flex so we can pin the title
   to top and a (synthesized) footer to bottom while the body
   scrolls between them. */
.props-panel .props-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}
.props-panel .props-title {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface, #fff);
  margin: 0 -1rem 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 1.05rem;
}
.props-panel .props-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.props-panel .props-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1A1A2E;
}

/* ── 3. Section blocks ──────────────────────────────────────── */
.props-panel .props-group {
  background: rgba(232, 168, 56, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.7rem;
}
.props-panel .props-group:last-of-type {
  margin-bottom: 0;
}
/* The label inside each group reads as a subtle uppercase header
   over the field, more legible against the new tinted block. */
.props-panel .props-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0.45rem;
}
/* Sub-label / friendly subtitle paired with technical field name. */
.props-panel .props-sublabel {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.5);
  margin-top: -0.3rem;
  margin-bottom: 0.5rem;
  font-style: italic;
}
/* Inline help text style. Pairs with a <small class="props-hint">
   element placed RIGHT AFTER the input — describes valid input
   without forcing a separate tutorial. */
.props-panel .props-hint {
  display: block;
  font-size: 0.74rem;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.4;
  margin-top: 0.4rem;
  font-style: italic;
}

/* ── 4. Action button hierarchy ─────────────────────────────── */
.props-panel .props-actions-row {
  background: transparent;
  border: none;
  padding: 0.5rem 0;
  margin-top: 0.3rem;
}
/* Duplicate becomes a quiet secondary text-button. The shared
   .props-delete-btn class on it carries old red+white styling;
   override here so the bright green doesn't fight Done. */
.props-panel #propsDuplicateTile {
  background: transparent !important;
  color: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  font-weight: 600 !important;
  padding: 0.55rem 0.75rem !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  cursor: pointer;
  transition: background 0.12s ease;
}
.props-panel #propsDuplicateTile:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1A1A2E !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}

/* Done button — primary amber, full-width, sticky to the bottom
   of the panel so phone users always have it in reach. */
.props-panel #propsDone {
  background: var(--amber, #E8A838) !important;
  color: #FFF !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.85rem 1.1rem !important;
  border-radius: 12px !important;
  border: none !important;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(232, 168, 56, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.props-panel #propsDone:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 168, 56, 0.4);
}
.props-panel #propsDone:active {
  transform: translateY(0);
}
/* Wrap the Done button in a sticky footer slot. Uses the
   .props-group around it as the anchor — that group already exists
   in the markup; we just pin it. */
.props-panel .props-group:has(#propsDone) {
  position: sticky;
  bottom: 0;
  margin: 0.8rem -1rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface, #fff);
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  z-index: 4;
}

/* ── 5. Custom Voice — Record primary, Play + Clear ghost ───── */
.props-panel #propsRecordBtn {
  background: rgba(196, 30, 58, 0.08) !important;
  color: #C41E3A !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
  font-weight: 700 !important;
}
.props-panel #propsRecordBtn:hover {
  background: rgba(196, 30, 58, 0.14) !important;
  border-color: rgba(196, 30, 58, 0.4) !important;
}
.props-panel #propsRecordBtn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.props-panel #propsPlayBtn,
.props-panel #propsClearBtn {
  background: transparent !important;
  color: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  font-weight: 600 !important;
}
.props-panel #propsPlayBtn:hover:not([disabled]),
.props-panel #propsClearBtn:hover:not([disabled]) {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1A1A2E !important;
}

/* ── 6. Image-mode tabs — visual weight ─────────────────────── */
/* The 3 tabs (Emoji / Image / AAC Art) currently look like
   buttons. Make them read as a segmented control — pill row with
   the active tab amber-filled, inactive tabs as quiet ghosts.
   NN/g #4 (consistency): same pattern as the Sentence-Builder
   ⚡/📝 toggle on /use.html. */
.props-panel .props-image-mode {
  display: flex;
  gap: 0.25rem;
  padding: 3px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  margin-bottom: 0.65rem;
}
.props-panel .props-img-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.props-panel .props-img-tab.active {
  background: var(--amber, #E8A838);
  color: #FFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.props-panel .props-img-tab:not(.active):hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1A1A2E;
}

/* ── Big emoji-preview ──────────────────────────────────────── */
/* Add a subtle "click to change" affordance ring on hover so the
   top preview's interactivity is discoverable on touch devices
   (the title-attribute tooltip is desktop-only). */
.props-panel .props-emoji-preview {
  position: relative;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.props-panel .props-emoji-preview:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.props-panel .props-emoji-preview::after {
  content: '✏️ tap to change';
  position: absolute;
  left: 50%;
  bottom: -1.4em;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
}