.workshop-summary,
.active-workshop {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 7px 14px;
  border: 1px solid rgba(242, 103, 58, .28);
  border-radius: 999px;
  color: #b9461a;
  background: #fff0e9;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.access-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-left: auto;
  padding: 0 16px;
  border: 1px solid rgba(18, 34, 56, .14);
  border-radius: 999px;
  color: #122238;
  background: rgba(255, 255, 255, .7);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}

.access-button + .my-ideas-button { margin-left: 8px; }

/* Option-card look (title, subline, selected state) lives in selection-controls.css. */
.cats.timing-group,
.cats.benchmark-group {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cats.saving-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.saving-hint { max-width: 72ch; margin: 10px 0 0; color: #59697d; font-size: 14px; line-height: 1.5; }
.scope-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.scope-columns>div{min-width:0}.scope-columns>div>small{display:block;margin-bottom:10px;color:#5d6979;font-size:12px;font-weight:800;letter-spacing:.08em}

.upload .photo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.upload .photo-actions button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #122238;
  border-radius: 10px;
  color: #122238;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.upload .photo-actions button:first-child {
  border-color: #c4471c;
  color: #fff;
  background: #c4471c;
}

.photo-count {
  margin: 12px 0 0;
  color: #59697d;
  font-size: 14px;
  font-weight: 700;
}

.photo-error {
  min-height: 14px;
  margin: 8px 0 0;
  color: #a13e34;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.photo-error:empty { min-height: 0; margin: 0; }

.previews figure {
  position: relative;
  margin: 0;
}

/* 44x44 hit area; the transparent border leaves a 34px visible circle with a white ring. */
.previews figure button {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 5px solid transparent;
  border-radius: 50%;
  color: #fff;
  background: rgba(18, 34, 56, .88) padding-box;
  box-shadow: inset 0 0 0 2px #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.previews figure button:focus-visible { outline: 3px solid var(--orange); outline-offset: -2px; }

.previews figure { min-width: 0; }

.previews .file-preview {
  display: flex;
  width: 100%;
  aspect-ratio: 1;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px 16px;
  border-radius: 9px;
  color: #122238;
  background: #eef1f4;
  text-align: center;
}

.previews .file-preview span {
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  background: #c4471c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.previews .file-preview b {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workshop-create {
  margin: 20px;
  padding: 22px;
  border: 1px solid #d9dde1;
  border-radius: 12px;
  background: #f7f8fa;
}

.workshop-create > header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.workshop-create > header > b {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #c4471c;
  font-size: 13px;
}

.workshop-create > header span {
  display: flex;
  flex-direction: column;
}

.workshop-create > header small {
  color: #b9461a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

.workshop-create > header strong {
  margin-top: 3px;
  font: 400 24px/1.2 Georgia, serif;
}

.workshop-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 16px 14px;
}

.workshop-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: #122238;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.workshop-fields input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #c9d0d7;
  border-radius: 10px;
  color: #122238;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Choice fields (user organization): the input box above with a chevron; the placeholder choice is grey. */
.workshop-fields select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 40px 0 12px;
  border: 1px solid #c9d0d7;
  border-radius: 10px;
  color: #122238;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23122238' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 9px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  appearance: none;
  cursor: pointer;
}

.workshop-fields select:has(> option[value=""]:checked) { color: #657286; }
.workshop-fields select option { color: #122238; }

.workshop-create > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  color: #5a6676;
  font-size: 14px;
}

.payback-threshold-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.payback-threshold-preview span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
}

.payback-threshold-preview b { font-size: 13px; letter-spacing: .06em; }
.payback-threshold-preview small { font-size: 14px; }
.payback-threshold-preview .green { color: #236c53; background: #e4f3ed; }
.payback-threshold-preview .amber { color: #805817; background: #fff1cb; }
.payback-threshold-preview .red { color: #9b3934; background: #fde6e4; }

.payback-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.payback-indicator.green { color: #236c53; background: #e4f3ed; }
.payback-indicator.amber { color: #805817; background: #fff1cb; }
.payback-indicator.red { color: #9b3934; background: #fde6e4; }
.payback-indicator.neutral { color: #556274; background: #edf0f3; }

.workshop-create > footer button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #122238;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 760px) {
  .workshop-fields { grid-template-columns: 1fr 1fr; }
  .workshop-create > footer { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
  .workshop-fields { grid-template-columns: 1fr; }
  .payback-threshold-preview { grid-template-columns: 1fr; }
  .workshop-summary, .active-workshop { line-height: 1.4; border-radius: 14px; }
  .upload .photo-actions { width: 100%; flex-direction: column; padding: 0 4px; }
  .upload .photo-actions button { width: 100%; min-height: 48px; }
  .previews .file-preview { padding-bottom: 12px; }
  .cats.saving-group, .cats.timing-group, .cats.benchmark-group { grid-template-columns: 1fr 1fr; }
  .cats.timing-group button:last-child:nth-child(odd), .cats.benchmark-group button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .scope-columns { grid-template-columns: 1fr; }
}