:root{
  --tmx-brand: #CC9752;
  --tmx-sticky-top: 0px;
  --tmx-radius: 12px;
  --tmx-ok:   #16a34a; /* green-600 */
  --tmx-warn: #e61102; /* red-600 */
}

/* hide helper */
#tmx-picker [hidden]{ display:none !important; }
#tmx-picker{ position: relative; z-index: 1005; }

/* ====================== ALERT STRIPE (icon | text | Change) ====================== */
/* ====================== ALERT STRIPE ====================== */
#tmx-picker .tmx-pill{
  position: sticky; top: var(--tmx-sticky-top);
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem;

  background:#fff !important;
  color:#111 !important;

  /* thicker, more prominent */
  border:2px solid rgba(204,151,82,.35);     /* default brand-tinted outline */
  border-left:10px solid var(--tmx-brand);   /* thicker rail */
  border-radius:10px;

  padding:.85rem 1.15rem;                    /* thicker stripe */
  font-weight:700;
  box-shadow:none;
  cursor:default;
  -webkit-tap-highlight-color: transparent;
}

/* Outline/rail color by state */
#tmx-picker .tmx-pill[data-state="ok"]{
  border-color: rgba(22,163,74,.40);         /* green outline */
  border-left-color: var(--tmx-ok);          /* green rail */
}
#tmx-picker .tmx-pill[data-state="warn"]{
  border-color: rgba(220,38,38,.35);         /* red outline */
  border-left-color: var(--tmx-warn);        /* red rail */
}
#tmx-picker .tmx-pill[data-state="prompt"]{
  border-color: #e5e7eb;                     /* neutral outline */
  border-left-color: var(--tmx-brand);       /* brand rail */
}

/* text + inline info icon */
#tmx-picker .tmx-pill__text{
  min-width:0;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size: clamp(.86rem, 2vw, 1rem);       /* a touch bigger */
  line-height:1.25; white-space:normal;
}
#tmx-picker .tmx-pill__icon{ font-size:1.15em; }
#tmx-picker .tmx-pill[data-state="warn"] .tmx-pill__icon{ color: var(--tmx-warn); } /* for non-emoji icons */

/* text + inline info button */
#tmx-picker .tmx-pill__text{
  min-width:0;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size: clamp(.82rem, 1.8vw, .95rem);
  line-height:1.25; white-space:normal;
}

/* circle info button (never squished) */
#tmx-picker .tmx-pill__note-btn{
  -webkit-appearance: none; appearance: none; box-sizing: content-box;
  width: 1.15rem; height: 1.15rem; min-width: 1.15rem; min-height: 1.15rem;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background:#111; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.82rem; line-height:1;
}
@media (max-width: 480px){
  #tmx-picker .tmx-pill__note-btn{
    width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem;
  }
}

/* popover anchored to pill */
#tmx-picker .tmx-pill{ position: relative; }
#tmx-picker .tmx-pill__note-pop{
  position:absolute; right:10px; bottom:calc(100% + 8px);
  background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:.5rem;
  padding:.55rem .65rem; max-width:28rem; box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-size:.9em; z-index:1010; white-space:pre-wrap;
}
#tmx-picker .tmx-pill__note-pop::after{
  content:""; position:absolute; right:12px; top:100%;
  border-width:8px 8px 0 8px; border-style:solid;
  border-color:#e5e7eb transparent transparent transparent;
}
#tmx-picker .tmx-pill__note-pop::before{
  content:""; position:absolute; right:13px; top:calc(100% - 1px);
  border-width:7px 7px 0 7px; border-style:solid;
  border-color:#fff transparent transparent transparent;
}

/* link */
#tmx-picker .tmx-pill__change{
  white-space: nowrap; font-size: .85em; font-weight: 600;
  font-style: italic; text-decoration: underline; cursor: pointer;
}

/* ====================== PANEL ====================== */
#tmx-picker .tmx-panel{
  background: var(--tmx-brand); color: #111;
  padding: .9rem 1rem 1rem; border-top: 1px solid rgba(0,0,0,.08);
  border-radius: var(--tmx-radius); margin-top: .4rem;
}
#tmx-picker .tmx-panel__header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem;
}
#tmx-picker .tmx-panel__title{ margin:0; color:#000; font-size:1.05rem; font-weight:800; }
#tmx-picker .tmx-close{
  background:transparent; border:0; color:#000; cursor:pointer;
  font-size:1.1rem; line-height:1; padding:.25rem .35rem; border-radius:8px;
}
#tmx-picker .tmx-close:hover{ background: rgba(0,0,0,.08); }

#tmx-picker .tmx-panel__body{ display:grid; gap:.75rem; }
#tmx-picker .tmx-field{ display:grid; gap:.35rem; }
#tmx-picker .tmx-label{ font-weight:700; color:#000; }
#tmx-picker .tmx-select{
  width:100%; background:#fff; color:#111;
  border:1px solid #ddd; border-radius:8px; padding:.65rem .75rem; line-height:1.25;
}
#tmx-picker .tmx-select:disabled{ opacity:.6; cursor:not-allowed; }

/* Save button is back */
#tmx-picker .tmx-panel__footer{
  margin-top:.75rem; display:flex; justify-content:center;
}
#tmx-picker .tmx-save{
  background:#2a2a2a; color:#fff; border:0; padding:.7rem 1.2rem;
  border-radius:9999px; font-weight:800; cursor:pointer;
}
#tmx-picker .tmx-save:disabled{ opacity:.5; cursor:not-allowed; }

@media (min-width: 992px){
  #tmx-picker .tmx-panel__body{ grid-template-columns: repeat(3, 1fr); }
}