/* The website's form pages (login.php, review.php), on top of site.css and search.css: the app's
   fields, list groups, segmented controls, star tiles and chips, laid out for a wide screen. */

.hide
{
  display: none !important;
}

.form_page main
{
  min-width: 0;
}

/* ── log in: a brand panel beside the form ── */

.split_card
{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  max-width: 980px;
  margin: 36px auto 72px;
  border-radius: 28px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 24px 50px rgba(22,34,44,0.10);
}

.split_brand
{
  padding: 44px 40px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(224,58,87,0.32), transparent 60%),
    var(--rmr_slate);
  color: white;
}

.split_brand .eyebrow
{
  color: #F7A6B4;
}

.split_brand h1
{
  font-size: 36px;
  letter-spacing: -1.2px;
  color: white;
}

.split_brand h1 span
{
  color: #FF8DA1;
}

.split_brand ul
{
  margin: 28px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  font-size: 15.5px;
  color: rgba(255,255,255,0.88);
}

.split_brand li
{
  display: flex;
  gap: 10px;
  align-items: center;
}

.split_brand li svg
{
  flex: none;
  width: 20px;
  height: 20px;
}

.split_note
{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

.split_form
{
  padding: 44px 44px 40px;
}

.split_form h2,
.review_form h2
{
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -0.8px;
}

.lead
{
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--rmr_muted);
}

.lead b
{
  color: var(--rmr_ink);
}

.reason
{
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--rmr_red_soft);
  color: #A3243B;
  font-size: 14.5px;
  font-weight: 600;
}

/* fields: a label over a rounded input */
.field
{
  display: block;
  margin-bottom: 14px;
}

.field > span:first-child,
.field_label
{
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rmr_ink);
}

.field input,
.field textarea
{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--rmr_line);
  background: white;
  font: inherit;
  font-size: 16px;
  color: var(--rmr_ink);
  outline: none;
}

.field textarea
{
  height: auto;
  min-height: 180px;
  padding: 14px;
  line-height: 1.55;
  resize: vertical;
}

.field input:focus,
.field textarea:focus
{
  border-color: var(--rmr_red);
}

.field_row
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pw
{
  position: relative;
  display: block;
}

.pw input
{
  padding-right: 70px;
}

.eye
{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--rmr_muted);
  cursor: pointer;
}

.btn.full
{
  width: 100%;
  margin-top: 6px;
}

.btn[disabled]
{
  opacity: 0.6;
  cursor: default;
}

.link_btn
{
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--rmr_red_dark);
  cursor: pointer;
}

.link_btn.inline
{
  margin-left: 6px;
}

.split_form > .form_step > .link_btn
{
  display: block;
  margin: 18px auto 0;
}

.form_links
{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.form_error
{
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(200,45,60,0.08);
  border: 1px solid rgba(200,45,60,0.28);
  color: #b3202f;
  font-size: 14px;
}

.notice
{
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 12px;
  background: var(--rmr_green_soft);
  color: var(--rmr_green);
  font-size: 15px;
  line-height: 1.5;
}

.segmented
{
  display: flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #ECE8E4;
}

.segmented button
{
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rmr_muted);
  cursor: pointer;
}

.segmented button.on
{
  background: white;
  color: var(--rmr_slate);
  box-shadow: 0 2px 6px rgba(22,34,44,0.12);
}

.f_check a
{
  color: var(--rmr_red_dark);
  font-weight: 600;
}

/* ── write a review: the form beside a sticky summary ── */

/* as wide as the search page (search.css), nav included */
.review_page
{
  --page: 1440px;
}

.review_layout
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
  padding: 10px 0 72px;
}

.review_title
{
  padding: 18px 0 20px;
}

.review_title h1
{
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: -1.2px;
}

.review_title p
{
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--rmr_muted);
}

.review_form
{
  display: grid;
  gap: 18px;
}

.review_form .panel
{
  padding: 26px;
  border-radius: 20px;
}

.section_title
{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.section_title .num
{
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: var(--rmr_red);
  color: white;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section_title.done .num
{
  background: var(--rmr_green);
}

.section_title h2
{
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.4px;
}

.section_lead
{
  margin: 0 0 18px 42px;
  font-size: 14.5px;
  color: var(--rmr_muted);
}

/* the program: a search box with results under it, or the chosen program */
.picker
{
  position: relative;
}

.picks
{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  max-height: 340px;
  overflow-y: auto;
  border-radius: 14px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 18px 40px rgba(22,34,44,0.14);
}

.pick
{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--rmr_line);
  background: white;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pick:first-child
{
  border-top: 0;
}

.pick:hover
{
  background: #FCFBFA;
}

.pick .badge,
.chosen .badge
{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 14px;
}

.pick b,
.chosen b
{
  display: block;
  font-size: 15px;
  color: var(--rmr_slate);
}

.pick span,
.chosen span
{
  font-size: 13.5px;
  color: var(--rmr_muted);
}

.chosen
{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid var(--rmr_line);
  background: #FCFBFA;
}

.chosen > div:not(.badge)
{
  flex: 1;
  min-width: 0;
}

.chosen .badge,
.pick .badge
{
  flex: none;
}

/* a select inside a labelled field */
.field .f_select
{
  display: block;
}

/* your time there: the year and the role, the app's list group */
.time_grid
{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}

.roles
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.role
{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid var(--rmr_line);
  background: white;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.role:hover
{
  border-color: rgba(224,58,87,0.45);
}

.role.on
{
  border-color: var(--rmr_red);
  background: #FFF8F9;
}

.role .icon
{
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--rmr_bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.role .icon svg
{
  width: 21px;
  height: 21px;
}

.role b
{
  font-size: 15px;
  color: var(--rmr_slate);
}

.role span
{
  font-size: 13px;
  color: var(--rmr_muted);
}

/* ratings: a row of tappable star tiles per category */
.rate_rows
{
  display: grid;
  gap: 2px;
}

.rate_row
{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--rmr_line);
}

.rate_row:first-child
{
  border-top: 0;
}

.rate_name
{
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--rmr_ink);
}

.rate_name small
{
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--rmr_muted);
}

.rate_name em
{
  font-style: normal;
  color: var(--rmr_red);
}

.star_btns
{
  display: flex;
  gap: 6px;
}

.star_btn
{
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #DDD8D3;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.star_btn::after
{
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.6l2.75 5.95 6.5.72-4.85 4.4 1.33 6.4L12 16.8l-5.73 3.27 1.33-6.4-4.85-4.4 6.5-.72z'/%3E%3C/svg%3E") center / 74% no-repeat;
}

.star_btn.on,
.star_btns:hover .star_btn.hover
{
  background: var(--rmr_red);
}

.star_btn:active
{
  transform: scale(1.12);
}

.rate_value
{
  width: 72px;
  font-size: 13px;
  color: var(--rmr_muted);
  text-align: right;
}

/* pros and cons: common chips plus your own */
.pc_cols
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pc_col h3
{
  margin: 0 0 10px;
  font-size: 15px;
}

.pc_col.pros h3
{
  color: var(--rmr_green);
}

.pc_col.cons h3
{
  color: #A3243B;
}

.chip_set
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pc_chip
{
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--rmr_line);
  background: white;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--rmr_ink);
  cursor: pointer;
}

.pc_col.pros .pc_chip.on
{
  background: var(--rmr_green_soft);
  border-color: #BFE0CC;
  color: var(--rmr_green);
}

.pc_col.cons .pc_chip.on
{
  background: var(--rmr_red_soft);
  border-color: #F3C3CC;
  color: #A3243B;
}

.own_add
{
  display: flex;
  gap: 8px;
}

.own_add input
{
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--rmr_line);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.own_add input:focus
{
  border-color: var(--rmr_red);
}

.own_add button
{
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 0;
  background: var(--rmr_bg);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--rmr_slate);
  cursor: pointer;
}

.own_tags
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.own_tags .tag button
{
  border: 0;
  background: transparent;
  padding: 0 0 0 4px;
  font-size: 15px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.char_count
{
  margin-top: -6px;
  font-size: 12.5px;
  color: #9AA4AC;
  text-align: right;
}

/* your information: pseudonym and email, with suggestions */
.pseudo_row
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 14px;
}

.pseudo_row > span
{
  font-size: 13px;
  font-weight: 600;
  color: var(--rmr_muted);
}

.guidelines
{
  display: flex;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  border-radius: 14px;
  background: #EEF3F6;
  color: #2E4757;
  font-size: 14px;
  line-height: 1.45;
}

.guidelines svg
{
  flex: none;
  width: 22px;
  height: 22px;
}

.guidelines ul
{
  margin: 4px 0 0;
  padding-left: 18px;
}

/* the sticky side: the program and what's left to do */
.review_side
{
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
}

.review_side .panel
{
  padding: 22px;
  border-radius: 20px;
}

.checklist
{
  display: grid;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--rmr_muted);
}

.checklist li
{
  display: flex;
  gap: 10px;
  align-items: center;
}

.checklist li::before
{
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  border: 2px solid var(--rmr_line);
}

.checklist li.ok
{
  color: var(--rmr_ink);
}

.checklist li.ok::before
{
  border-color: var(--rmr_green);
  background: var(--rmr_green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.review_done
{
  max-width: 620px;
  margin: 60px auto 90px;
  padding: 48px 40px;
  border-radius: 28px;
  background: white;
  border: 1px solid var(--rmr_line);
  box-shadow: 0 24px 50px rgba(22,34,44,0.08);
  text-align: center;
}

.review_done .mark
{
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  border-radius: 42px;
  background: var(--rmr_green_soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.review_done .mark svg
{
  width: 40px;
  height: 40px;
}

.review_done h1
{
  font-size: 34px;
  letter-spacing: -1px;
}

.review_done p
{
  margin: 12px auto 26px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rmr_muted);
}

.review_done .buttons
{
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ── narrower screens ── */

@media (max-width: 1020px)
{
  .review_layout
  {
    grid-template-columns: 1fr;
  }

  .review_side
  {
    position: static;
    order: -1;
  }

  .review_side .checklist,
  .review_side .submit_side
  {
    display: none;
  }
}

@media (max-width: 760px)
{
  .split_card
  {
    grid-template-columns: 1fr;
    margin: 16px 0 48px;
  }

  .split_brand
  {
    display: none;
  }

  .split_form
  {
    padding: 28px 22px;
  }

  .time_grid,
  .pc_cols,
  .field_row
  {
    grid-template-columns: 1fr;
  }

  .roles
  {
    grid-template-columns: 1fr;
  }

  .role
  {
    flex-direction: row;
    align-items: center;
  }

  .rate_row
  {
    flex-wrap: wrap;
  }

  .rate_name
  {
    flex-basis: 100%;
  }

  .rate_value
  {
    text-align: left;
  }

  .section_lead
  {
    margin-left: 0;
  }

  .review_form .panel
  {
    padding: 20px;
  }

  .review_done .buttons
  {
    flex-direction: column;
  }
}

/* ── the contact page (contact.php): a heading and the fields, on the page itself ── */

.contact_wrap
{
  max-width: 760px;
  padding-top: 40px;
  padding-bottom: 80px;
}

.contact_title
{
  margin: 0 0 8px;
  font-size: 38px;
  letter-spacing: -1px;
  color: var(--rmr_slate);
}

.contact_lead
{
  margin: 0 0 28px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--rmr_muted);
}

.contact_lead b
{
  color: var(--rmr_ink);
}

.contact_send
{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}

.contact_send .btn
{
  flex: none;
  height: 48px;
  padding: 0 26px;
}

.contact_note
{
  font-size: 13.5px;
  line-height: 1.45;
  color: #9AA4AC;
}

#contact_sent .notice
{
  margin-bottom: 16px;
}

/* two fields side by side (name and email), one above the other on a phone */
.two_up
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

/* the program a message is about, when it came from a program page */
.contact_program
{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: -6px 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--rmr_bg);
  border: 1px solid var(--rmr_line);
  font-size: 14.5px;
}

.contact_program_label
{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rmr_muted);
}

.contact_program a
{
  color: var(--rmr_muted);
}

.contact_program a b
{
  color: var(--rmr_slate);
}

.contact_program a:hover b
{
  color: var(--rmr_red_dark);
}

@media (max-width: 760px)
{
  .two_up
  {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px)
{
  .contact_wrap
  {
    padding-top: 22px;
  }

  .contact_title
  {
    font-size: 30px;
  }

  .contact_send
  {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}