/* css/modals.css — shared modal styles for Tech Hub slim shell. */

/* ============================================
   Condition Selector + Add Condition (Slice 3.5a)
   ============================================ */

.th-cond-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.th-cond-overlay--open { opacity: 1; }

/* Critical: hidden attribute must beat display:flex above. Without this,
   .th-cond-add-overlay (z-index:9100) sits invisible above the main modal
   and intercepts every click. */
.th-cond-overlay[hidden] { display: none; }

.th-cond-add-overlay { z-index: 9100; }

.th-cond-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  background: var(--bds-surface-1, #181818);
  border-top: 1px solid var(--bds-border-1, #2a2a2a);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(24px);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
.th-cond-overlay--open .th-cond-sheet { transform: translateY(0); }

.th-cond-add-sheet {
  max-width: 440px;
  border-radius: 18px;
  align-self: center;
  margin-bottom: 10vh;
}

@media (min-width: 640px) {
  .th-cond-overlay { align-items: center; }
  .th-cond-sheet { border-radius: 18px; }
}

.th-cond-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--bds-border-1, #2a2a2a);
}

.th-cond-back,
.th-cond-close {
  background: transparent;
  border: none;
  color: var(--bds-text-2, #aaa);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 8px;
  transition: background 0.12s;
}
.th-cond-back:hover,
.th-cond-close:hover { background: var(--bds-surface-2, #222); color: #fff; }

.th-cond-title {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bds-text-1, #fff);
  text-align: center;
  letter-spacing: -0.01em;
}

.th-cond-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.th-cond-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 18px;
  border-top: 1px solid var(--bds-border-1, #2a2a2a);
  background: var(--bds-surface-1, #181818);
}

.th-cond-btn-confirm {
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--bds-success, #22c55e);
  color: #000;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: opacity 0.12s, transform 0.08s;
}
.th-cond-btn-confirm:active { transform: scale(0.98); }
.th-cond-btn-confirm:disabled {
  background: var(--bds-surface-2, #222);
  color: var(--bds-text-3, #666);
  cursor: not-allowed;
}

.th-cond-btn-cancel {
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  background: transparent;
  color: var(--bds-text-2, #aaa);
  border: 1px solid var(--bds-border-1, #2a2a2a);
  border-radius: 12px;
  cursor: pointer;
}
.th-cond-btn-cancel:hover { color: #fff; border-color: var(--bds-border-2, #444); }

/* ----- RO picker ----- */

.th-cond-list-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bds-text-3, #777);
  margin-bottom: 10px;
}

.th-cond-rolist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.th-cond-roitem {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "num chev"
    "meta chev"
    "eq chev";
  gap: 4px 12px;
  padding: 14px 14px;
  background: var(--bds-surface-2, #222);
  border: 1px solid var(--bds-border-1, #2a2a2a);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--bds-text-1, #fff);
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.th-cond-roitem:hover {
  border-color: var(--case-ih-red, #c8102e);
  background: var(--bds-surface-3, #2a2a2a);
}
.th-cond-roitem:active { transform: scale(0.99); }

.th-cond-roitem-num {
  grid-area: num;
  font-size: 1rem;
  font-weight: 800;
  color: var(--case-ih-red, #c8102e);
  letter-spacing: -0.01em;
}
.th-cond-roitem-meta {
  grid-area: meta;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bds-text-1, #fff);
}
.th-cond-roitem-due {
  font-size: 0.72rem;
  color: var(--accent-gold, #c6a24c);
  font-weight: 700;
}
.th-cond-roitem-eq {
  grid-area: eq;
  font-size: 0.78rem;
  color: var(--bds-text-3, #888);
}
.th-cond-roitem-chev {
  grid-area: chev;
  align-self: center;
  color: var(--bds-text-3, #666);
}

/* ----- Condition list ----- */

.th-cond-roinfo {
  padding: 12px 14px;
  background: var(--bds-surface-2, #222);
  border-radius: 10px;
  margin-bottom: 14px;
}
.th-cond-roinfo-num {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--case-ih-red, #c8102e);
}
.th-cond-roinfo-cust {
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 2px;
  color: var(--bds-text-1, #fff);
}
.th-cond-roinfo-eq {
  font-size: 0.78rem;
  color: var(--bds-text-3, #888);
  margin-top: 2px;
}

.th-cond-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.th-cond-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bds-surface-2, #222);
  border: 2px solid var(--bds-border-1, #2a2a2a);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--bds-text-1, #fff);
  transition: all 0.12s;
}
.th-cond-item:hover { border-color: var(--bds-border-2, #444); }
.th-cond-item:active { transform: scale(0.99); }
.th-cond-item--selected {
  border-color: var(--bds-success, #22c55e);
  background: rgba(34, 197, 94, 0.10);
}
.th-cond-item--pending {
  background: rgba(198, 162, 76, 0.06);
  border-style: dashed;
}

.th-cond-item-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--bds-text-3, #777);
  min-width: 36px;
  text-align: center;
}
.th-cond-item--selected .th-cond-item-num { color: var(--bds-success, #22c55e); }

.th-cond-item-details { flex: 1; min-width: 0; }
.th-cond-item-type {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
.th-cond-item-desc {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bds-text-1, #fff);
  overflow-wrap: anywhere;
}

.th-cond-item-check {
  color: var(--bds-success, #22c55e);
  opacity: 0;
  transition: opacity 0.12s;
}
.th-cond-item--selected .th-cond-item-check { opacity: 1; }

.th-cond-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  margin-top: 12px;
  background: transparent;
  border: 2px dashed var(--bds-border-1, #2a2a2a);
  border-radius: 10px;
  color: var(--bds-text-2, #aaa);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.th-cond-add-btn:hover {
  border-color: var(--case-ih-red, #c8102e);
  color: var(--case-ih-red, #c8102e);
}
.th-cond-add-btn span {
  font-size: 1.2rem;
  line-height: 1;
}

/* ----- Empty state ----- */

.th-cond-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--bds-text-2, #aaa);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.th-cond-empty svg { color: var(--accent-gold, #c6a24c); }
.th-cond-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bds-text-1, #fff);
}
.th-cond-empty-sub {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bds-text-3, #888);
}
.th-cond-empty .th-cond-btn-confirm { margin-top: 4px; align-self: stretch; }

/* ----- Add Condition ----- */

.th-cond-add-hint {
  font-size: 0.78rem;
  color: var(--bds-text-3, #888);
  margin-bottom: 14px;
  line-height: 1.4;
}
.th-cond-add-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bds-text-3, #777);
  margin: 12px 0 8px;
}
.th-cond-add-label:first-child { margin-top: 0; }

.th-cond-add-typegrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.th-cond-add-type {
  padding: 10px 6px;
  background: var(--bds-surface-2, #222);
  border: 2px solid var(--bds-border-1, #2a2a2a);
  border-radius: 8px;
  color: var(--bds-text-2, #aaa);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.th-cond-add-type:hover { border-color: var(--bds-border-2, #444); color: #fff; }
.th-cond-add-type--active {
  border-color: var(--case-ih-red, #c8102e);
  background: rgba(200, 16, 46, 0.10);
  color: #fff;
}

.th-cond-add-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bds-surface-2, #222);
  border: 2px solid var(--bds-border-1, #2a2a2a);
  border-radius: 10px;
  color: var(--bds-text-1, #fff);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s;
}
.th-cond-add-input:focus { border-color: var(--case-ih-red, #c8102e); }
.th-cond-add-input::placeholder { color: var(--bds-text-3, #666); }

@media (prefers-reduced-motion: reduce) {
  .th-cond-overlay,
  .th-cond-sheet,
  .th-cond-item,
  .th-cond-roitem,
  .th-cond-add-type,
  .th-cond-btn-confirm { transition: none !important; transform: none !important; }
}

/* ============================================
   RO question pre-setup screen (Slice 3.5a)
   ============================================ */

.th-insp-roq-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.th-insp-roq-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 16px;
  background: var(--bds-surface-2, #222);
  border: 2px solid var(--bds-border-1, #2a2a2a);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--bds-text-1, #fff);
  transition: border-color 0.14s, background 0.14s, transform 0.08s;
}
.th-insp-roq-card:hover {
  border-color: var(--case-ih-red, #c8102e);
  background: var(--bds-surface-3, #2a2a2a);
}
.th-insp-roq-card:active { transform: scale(0.99); }

.th-insp-roq-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(200, 16, 46, 0.12);
  color: var(--case-ih-red, #c8102e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-insp-roq-card--standalone .th-insp-roq-card-icon {
  background: rgba(198, 162, 76, 0.12);
  color: var(--accent-gold, #c6a24c);
}

.th-insp-roq-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.th-insp-roq-card-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.th-insp-roq-card-sub {
  font-size: 0.82rem;
  color: var(--bds-text-3, #888);
  line-height: 1.35;
}
.th-insp-roq-card-chev {
  color: var(--bds-text-3, #666);
}

.th-insp-roq-selected-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--bds-text-1, #fff);
}
.th-insp-roq-selected-info svg { color: var(--bds-success, #22c55e); flex-shrink: 0; }
.th-insp-roq-selected-info b { font-weight: 800; color: var(--bds-success, #22c55e); }
.th-insp-roq-selected-info-pending {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--accent-gold, #c6a24c);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   Shared Tech Hub bottom sheets
   ============================================ */

.th-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 32%),
    rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.th-modal-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--bds-text-1, #fff);
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.56);
  transform: translateY(0);
}

.th-modal-sheet--large {
  max-width: 620px;
}

@media (min-width: 720px) {
  .th-modal-overlay {
    align-items: center;
    padding: 22px;
  }

  .th-modal-sheet {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
  }
}

.th-modal-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.th-modal-header h2 {
  margin: 0;
  font-size: 1.38rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.th-modal-eyebrow {
  margin-bottom: 5px;
  color: var(--case-ih-red, #d11134);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.th-modal-close {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.34);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.th-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px 22px;
  -webkit-overflow-scrolling: touch;
}

.th-modal-footer {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  padding: 14px 24px calc(18px + env(safe-area-inset-bottom));
  background: rgba(28, 28, 30, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.th-modal-context {
  display: grid;
  gap: 4px;
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.th-modal-context span,
.th-modal-context em,
.th-modal-hint {
  color: rgba(255, 255, 255, 0.48);
  font-style: normal;
}

.th-modal-context span {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.th-modal-context strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.th-modal-field {
  display: grid;
  gap: 9px;
  margin-bottom: 17px;
}

.th-modal-field > span,
.th-modal-check > span > strong {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.th-modal-field input,
.th-modal-field textarea,
.th-modal-field select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  outline: none;
  font: inherit;
  resize: vertical;
}

.th-modal-field textarea {
  line-height: 1.42;
}

.th-modal-field input:focus,
.th-modal-field textarea:focus,
.th-modal-field select:focus {
  border-color: rgba(209, 17, 52, 0.82);
  box-shadow: 0 0 0 4px rgba(209, 17, 52, 0.14);
}

.th-modal-field input::placeholder,
.th-modal-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.th-modal-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.th-modal-segments--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.th-modal-segments--wrap {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.th-modal-segments button {
  min-height: 52px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.045);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}

.th-modal-segments button.is-active {
  color: #fff;
  background: rgba(209, 17, 52, 0.18);
  border-color: var(--case-ih-red, #d11134);
}

.th-modal-upload {
  display: grid;
  gap: 6px;
  place-items: center;
  min-height: 92px;
  padding: 18px;
  margin: 4px 0 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
}

.th-modal-upload--large {
  min-height: 156px;
}

.th-modal-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.th-modal-upload span {
  font-size: 1.03rem;
  font-weight: 850;
}

.th-modal-upload em,
.th-modal-check em {
  color: rgba(255, 255, 255, 0.44);
  font-style: normal;
  line-height: 1.35;
}

.th-modal-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px;
  margin-bottom: 17px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  cursor: pointer;
}

.th-modal-check--hot {
  background: rgba(209, 17, 52, 0.12);
  border-color: rgba(209, 17, 52, 0.55);
}

.th-modal-check input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--case-ih-red, #d11134);
}

.th-modal-check span {
  display: grid;
  gap: 3px;
}

.th-modal-hint {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.th-modal-button {
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.th-modal-button--primary {
  background: var(--case-ih-red, #d11134);
  box-shadow: 0 14px 34px rgba(209, 17, 52, 0.28);
}

.th-modal-button--success {
  color: #05130a;
  background: #30d158;
}

.th-modal-button--warn {
  color: #101010;
  background: #ff9f0a;
}

.th-modal-button:disabled {
  color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: not-allowed;
}

.th-modal-block {
  display: grid;
  gap: 8px;
  padding: 15px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.045);
  border-left: 4px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

.th-modal-block span {
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.th-modal-block p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.4;
}

.th-modal-block--danger {
  border-color: #ff453a;
  background: rgba(255, 69, 58, 0.11);
}

.th-modal-block--success {
  border-color: #30d158;
  background: rgba(48, 209, 88, 0.1);
}

.th-modal-block--warn {
  border-color: #ff9f0a;
  background: rgba(255, 159, 10, 0.12);
}

.th-ai-summary {
  display: grid;
  gap: 5px;
  padding: 18px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.35), rgba(10, 132, 255, 0.12));
  border-radius: 16px;
}

.th-ai-summary-store {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 850;
}

.th-ai-summary strong {
  font-size: 1.12rem;
}

.th-ai-summary span {
  color: rgba(255, 255, 255, 0.72);
}

.th-modal-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.th-modal-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.th-modal-grid > div {
  display: grid;
  place-items: center;
  min-height: 82px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.24);
  border-radius: 14px;
}

.th-modal-grid strong {
  font-size: 1.35rem;
}

.th-modal-grid span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.th-part-line {
  display: grid;
  grid-template-columns: minmax(92px, 0.7fr) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.24);
  border-radius: 12px;
}

.th-part-line + .th-part-line {
  margin-top: 8px;
}

.th-part-line b {
  color: #0a84ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.th-part-line span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.th-part-line em {
  color: #30d158;
  font-style: normal;
  font-weight: 850;
}

@media (max-width: 420px) {
  .th-modal-header,
  .th-modal-body,
  .th-modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .th-modal-footer,
  .th-modal-segments,
  .th-modal-segments--grid,
  .th-modal-segments--wrap {
    grid-template-columns: 1fr;
  }

  .th-part-line {
    grid-template-columns: 1fr auto;
  }

  .th-part-line span {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .th-modal-overlay,
  .th-modal-sheet,
  .th-modal-button,
  .th-modal-segments button {
    transition: none !important;
  }
}