/*
  The staff Welcome page (class.staff_welcome.php, welcome.php for the pilot): the hero is the
  employer welcome's (svy_hero, css/employer_surveys.css); under it Your way around — a card in
  the Getting-up-and-running look (css/employer_welcome.css), a row a section, each a link.
  px throughout (a rem is 10px on this site).
*/

.sw_hero .svy_intro_buttons .btn { margin: 0; }

/* ---- the card ---- */

.sw_sections
{
  margin: 18px 0 24px;
  background: #ffffff;
  border: 1px solid #dfe8ea;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(16, 38, 52, .05);
  overflow: hidden;
}
.sw_sections_head { padding: 22px 26px 14px; }
.sw_sections_title
{
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: #16211f;
}
.sw_sections_sub { margin-top: 4px; color: #6b7a7e; font-size: 14px; }

.sw_row_list { padding: 0 10px 8px; }

/* a row: the teal icon box, the words, a caret on the right; the whole row is the link */
.sw_row
{
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background .15s;
}
.sw_row:hover, .sw_row:focus { background: #f4f9f9; color: inherit; text-decoration: none; }
.sw_row:not(:last-child)::after
{
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 1px;
  background: #e6eeef;
}
.sw_row + .sw_row { margin-top: 1px; }

.sw_row_icon
{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e3f1f2;
  color: #0f7777;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw_row:hover .sw_row_icon { background: darkcyan; color: #ffffff; }

.sw_row_text { min-width: 0; }
.sw_row_title { font-weight: 700; font-size: 16px; color: #16211f; line-height: 1.3; }
.sw_row_copy { margin-top: 2px; color: #58696b; font-size: 13.5px; line-height: 1.45; }
.sw_row_caret { color: #b0bec2; font-size: 14px; padding-right: 2px; }

.sw_foot { padding: 12px 26px 20px; color: #6b7a7e; font-size: 13.5px; line-height: 1.5; border-top: 1px solid #e6eeef; }
.sw_foot a { color: darkcyan; }

@media (max-width: 767px)
{
  .sw_sections { margin: 14px 0 24px; border-radius: 14px; }
  .sw_sections_head { padding: 18px 16px 12px; }
  .sw_sections_title { font-size: 22px; }
  .sw_row_list { padding: 0 6px 6px; }
  .sw_row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px 10px; }
  .sw_row_icon { width: 40px; height: 40px; font-size: 18px; }
  .sw_row_copy { font-size: 13px; line-height: 1.4; }
  .sw_foot { padding: 12px 16px 18px; }
}

/* ---- the tour's samples (staff_tour::sample_*): the page's own rows inside a container that
   says Sample — dashed teal edge, a faint tint, nothing tappable. each sits in the real page's
   list beside the real rows (hidden), so the page's tabs and bars stay real ---- */
.sw_sample_tasks, .sw_sample_inline { position: relative; padding: 14px 14px 18px; border: 2px dashed #7fc9c9; border-radius: 16px; background: repeating-linear-gradient(135deg, #f4fbfb 0, #f4fbfb 14px, #eef8f8 14px, #eef8f8 28px); }
.sw_sample_tasks.hide_me, .sw_sample_inline.hide_me { display: none !important; }
/* the wrapper is empty while the sample is hidden: no ghost padding under the real list */
.sw_sample_wrap:has(.sw_sample_tasks.hide_me) { display: none; }
.sw_sample_banner { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #0f5f5f; font-size: 13px; line-height: 1.4; }
.sw_sample_pill { flex: none; background: darkcyan; color: white; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; }
.sw_sample_tasks .todo_window_item { cursor: default; pointer-events: none; }
.sw_sample_tasks .todo_window_item:hover { background: #fff; }
.sw_sample_tasks .todo_page_head { padding-top: 0; }
.sw_sample_inline > :not(.sw_sample_banner) { pointer-events: none; }
/* inside Home's Shifts pane and the Insights pane (prev_ rows sit flush; the box keeps a gutter) */
.sw_home_sample, .sw_insights_sample { margin: 12px 16px 8px; }
.sw_home_sample .prev_sec_head:first-of-type { margin-top: 0; }
.sw_home_sample .prev_card, .sw_home_sample .prev_action_card, .sw_home_sample .prev_past_row { background: white; }
/* inside the inbox: the rows carry their own rules */
.sw_inbox_sample { margin: 12px 0 80px; }
.sw_inbox_sample .ipx_row { background: white; }
.sw_inbox_sample .ipx_swipe_wrap { border-radius: 0; }
/* inside the Work and Coworkers lists */
.sw_employers_sample, .sw_coworkers_sample { margin: 12px 0 24px; }
.sw_employers_sample .employer_list, .sw_coworkers_sample .employer_list { margin: 0; }
@media (max-width: 767px)
{
  .sw_sample_tasks, .sw_sample_inline { padding: 12px 10px 14px; border-radius: 14px; }
  .sw_home_sample, .sw_insights_sample { margin: 10px 8px 8px; }
}