/* ================== BLOCK SCHEDULE (class.block_schedule.php) ==================
   bs_ classes: the employer page (employers?a=blocks) and its drawers. the page borrows the
   meetings page's shell (cm_ hero note, steps, pills, detail rows, tallies) and the settings-row
   list look from global.css */

/* the page */
.employer_tool_drawer_blocks .svy_intro_buttons, .employer_tool_drawer_blocks .svy_list_top .svy_create { display: none; }
.bs_page, .bs_page * { min-width: 0; }
.bs_page .settings_row_label { overflow-wrap: anywhere; }
.bs_top .svy_list_sub a.bs_year_link { color: #0f7777; font-weight: 700; text-decoration: none; border-bottom: 1px dotted #0f7777; }
.bs_lock { color: #8a9a9f; font-size: 12px; margin-left: 2px; }
.bs_years { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.bs_year_pill { font: inherit; font-size: 13px; font-weight: 700; color: #4b5b62; background: #fff; border: 1px solid #d3e2e3; border-radius: 999px; padding: 5px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bs_year_pill.bs_year_on { background: #0f7777; border-color: #0f7777; color: #fff; }
/* a group's title with the + on the right */
.bs_group_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 28px 0 8px; }
.bs_group_head .settings_group_title { margin: 0; }
.bs_plus { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid darkcyan; background: #fff; color: darkcyan; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.bs_plus:hover { background: #eef7f7; }
.bs_empty { padding: 18px 16px; font-size: 14px; color: #6b7b80; }
.bs_row_desc { margin-top: 3px; color: #5b6b70; white-space: pre-line; }
/* a block's number in the icon box */
.bs_block_icon span { font-weight: 800; font-size: 15px; }
/* a rotation's icon box wears its kind */
.settings_row_icon.bs_rot_department { background: #e2efef; color: #0f5e63; }
.settings_row_icon.bs_rot_off_service { background: #eceaf7; color: #5b4bb5; }
.settings_row_icon.bs_rot_elective { background: #fff4de; color: #9a6400; }
.settings_row_icon.bs_rot_leave { background: #e3f4ea; color: #1f7a45; }
.settings_row_icon.bs_rot_other { background: #eef0f2; color: #4b5b62; }
.bs_cat_pill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; background: #eef0f2; color: #4b5b62; }
.bs_cat_department { background: #e6f3f3; color: #0f7777; }
.bs_cat_off_service { background: #eceaf7; color: #5b4bb5; }
.bs_cat_elective { background: #fff4de; color: #9a6400; }
.bs_cat_leave { background: #e3f4ea; color: #1f7a45; }

/* the hero's drawing: the year as a strip of blocks */
.bs_hero_art { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; padding: 10px 0 30px; }
.bs_art { background: #fff; border: 1px solid #cfe9e8; border-radius: 16px; padding: 18px 20px; box-shadow: 0 10px 26px rgba(16, 38, 52, .08); width: 100%; max-width: 480px; }
.bs_art_label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0f5e63; margin-bottom: 10px; }
.bs_art_strip { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 5px; }
.bs_art_cell { aspect-ratio: 1 / 1.5; border-radius: 7px; background: #e2efef; color: #0f5e63; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bs_art_cell.bs_art_on { background: #0f7777; color: #fff; box-shadow: 0 0 0 2px #ffd166 inset; }
.bs_art_legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #435b64; margin-top: 10px; }
.bs_art_dot { width: 10px; height: 10px; border-radius: 3px; background: #0f7777; box-shadow: 0 0 0 2px #ffd166 inset; }
.bs_steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .bs_steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .bs_steps { grid-template-columns: 1fr; } .bs_hero_art { min-height: 0; padding: 0 0 20px; } }

/* the forms (the process-drawer look; cm_pd_row lines from the meetings form) */
.bs_form_container .form-control { width: 100%; min-width: 0; box-sizing: border-box; }
.bs_form_container .pd_label:first-child { margin-top: 0; }
.bs_form_container .pd_form textarea.form-control, .bs_duty_form_container .pd_form textarea.form-control { height: auto; resize: vertical; }
.bs_form_container .bs_year_preview { margin: 8px 2px 0; min-height: 18px; }
.bs_cat_btns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs_cat_btns .cm_where { padding: 10px 4px 8px; font-size: 13px; }
.bs_cat_btns .cm_where i { font-size: 20px; }
.bs_in_dept.hide_me { display: none; }
.bs_tick_row { display: flex; }
.bs_tick_row .custom_checkbox_container { flex: none; margin-left: 10px; }
/* Who can have it: a class row's per-block number, shown once the class is ticked */
.bs_rot_classes { background: #fff; border: 1.5px solid var(--pd_line, #dbe4e6); border-radius: 10px; overflow: hidden; }
.bs_rot_classes .settings_row { padding: 10px 12px; }
.bs_rot_classes .settings_row_label { min-width: 0; }
.bs_class_n_wrap { display: none; flex: none; align-items: center; gap: 6px; margin-left: 8px; }
.bs_rot_class.bs_class_on .bs_class_n_wrap { display: flex; }
.bs_rot_classes .bs_class_n.form-control { width: 58px; height: 38px; padding: 0 6px; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.bs_rot_classes .bs_class_n::-webkit-outer-spin-button, .bs_rot_classes .bs_class_n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs_class_n_wrap span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--pd_faint, #8a9a9f); white-space: nowrap; }
@media (max-width: 420px) { .bs_class_n_wrap span { display: none; } }
.bs_rot_classes + .pd_hint { margin-top: 8px; }
/* an attested rotation read-only: the details as a list */
.bs_view_group { background: #fff; border: 1.5px solid var(--pd_line, #dbe4e6); border-radius: 10px; overflow: hidden; }
.bs_view_row { cursor: default; }
.bs_view_row:hover { background: #fff; }
.bs_view_row .settings_row_label { min-width: 0; }
.bs_view_row .settings_row_sub { white-space: normal; overflow-wrap: anywhere; }
.bs_view_group + .pd_hint { margin-top: 10px; }
.bs_attested_line { flex: 1 1 100%; font-size: 13px; }
.bs_chips { margin-bottom: 4px; }
.bs_roles .pd_card { min-height: 52px; }
.bs_roles .pd_card_icon { width: 34px; height: 34px; font-size: 16px; }
/* the top-picks stepper: minus, the number with its word, plus */
.bs_stepper { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--pd_line, #dbe4e6); border-radius: 10px; padding: 8px 10px; }
.bs_step { flex: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #d3e2e3; background: #f7fbfb; color: #0f7777; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.bs_step:hover { background: #eef7f7; }
.bs_step_value { flex: 1; text-align: center; line-height: 1.1; }
.bs_step_value b { display: block; font-size: 24px; color: #0b5f5f; }
.bs_step_value span { display: block; font-size: 12px; color: #6b7b80; margin-top: 2px; }
.bs_form_container .cm_form_tail { height: 24px; }
@media (max-width: 767px) { .bs_form_container .cm_form_tail { height: 56px; } }
.bs_foot { display: flex; flex-wrap: wrap; gap: 8px; }
.bs_foot .btn { flex: 1; }
.bs_foot .bs_remove { flex: 0 0 auto; }

/* the request drawer */
.bs_tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs_not_ready { background: #fff4de; border-color: #f1dfae; color: #6b4a00; }
.bs_not_ready i { color: #9a6400; }

/* ================== steps 2–4 ================== */
.bs_role_tag { display: inline-block; font-size: 11px; font-weight: 700; color: #4b5b62; background: #eef0f2; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
/* the level drawer: a stepper per rotation */
.bs_owed { background: #fff; }
.bs_owed_row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #e4eeee; }
.bs_owed_row:last-child { border-bottom: 0; }
.bs_owed_row .settings_row_icon { width: 30px; height: 30px; font-size: 14px; }
.bs_owed_name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
.bs_mini_stepper { display: flex; align-items: center; gap: 6px; }
.bs_mini_stepper .bs_step { width: 32px; height: 32px; font-size: 13px; }
.bs_owed_value { min-width: 22px; text-align: center; font-size: 17px; color: #0b5f5f; }
.bs_owed_total { font-weight: 500; text-transform: none; letter-spacing: 0; color: #6b7b80; }
/* a rotation chip: short name coloured by kind */
.bs_rc { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .02em; border-radius: 6px; padding: 3px 8px; background: #eef0f2; color: #4b5b62; white-space: nowrap; }
.bs_rc_department { background: #d9eeee; color: #0b5f5f; }
.bs_rc_off_service { background: #e5e1f5; color: #4a3aa3; }
.bs_rc_elective { background: #ffefc9; color: #7a4f00; }
.bs_rc_leave { background: #d9f0e2; color: #1a6a3b; }
.bs_rc_ghost { opacity: .5; }
.bs_owe_ok, .bs_owe_short { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin: 2px 4px 0 0; }
.bs_owe_ok { background: #e3f4ea; color: #1f7a45; }
.bs_owe_short { background: #fff4de; color: #9a6400; }
/* the assign grid */
.bs_assign_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bs_top .svy_list_sub a.bs_back { color: #0f7777; font-weight: 700; text-decoration: none; }
.bs_grid_wrap { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid #d3e2e3; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(11, 61, 64, 0.06); }
.bs_grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.bs_grid th, .bs_grid td { border-bottom: 1px solid #e4eeee; border-right: 1px solid #eef3f3; padding: 6px 8px; text-align: center; vertical-align: middle; white-space: nowrap; }
.bs_grid thead th { position: sticky; top: 0; background: #f4f9f9; z-index: 3; font-size: 12px; color: #0f5e63; }
.bs_grid th.bs_g_name, .bs_grid td.bs_g_name { position: sticky; left: 0; background: #fff; z-index: 2; text-align: left; min-width: 170px; max-width: 220px; white-space: normal; }
.bs_grid thead th.bs_g_name { z-index: 4; background: #f4f9f9; }
.bs_grid tfoot td { position: sticky; bottom: 0; background: #f4f9f9; z-index: 3; font-size: 11px; white-space: normal; min-width: 90px; }
.bs_grid tfoot td.bs_g_foot { z-index: 4; font-weight: 700; color: #0f5e63; }
.bs_g_block a { color: inherit; text-decoration: none; display: block; }
.bs_g_block a b { display: block; }
.bs_g_block a span { display: block; font-weight: 500; color: #6b7b80; font-size: 11px; }
.bs_g_block a:hover b { color: darkcyan; text-decoration: underline; }
.bs_g_person { font-weight: 700; font-size: 14px; }
.bs_g_sub { font-size: 12px; color: #6b7b80; }
.bs_g_owe { margin-top: 2px; }
.bs_g_cell { cursor: pointer; min-width: 74px; }
.bs_g_cell:hover { background: #eaf4f4; }
.bs_g_set { background: #fbfdfd; }
.bs_g_dash { color: #c3cfd2; }
.bs_g_star { color: #e0a500; font-size: 12px; margin-left: 3px; }
.bs_g_match { color: #1f7a45; font-size: 12px; margin-left: 3px; }
.bs_g_match.bi-star-fill { color: #e0a500; }
.bs_load { display: inline-block; margin: 1px 2px; }
.bs_load_over { color: #b91c1c; font-weight: 800; }
.bs_cell_rots .pd_card.bs_full { opacity: .5; }
.bs_cell_rots .pd_card_icon.bs_rot_off_service { background: #eceaf7; color: #5b4bb5; }
.bs_cell_rots .pd_card_icon.bs_rot_elective, .bsr_rots .pd_card_icon.bs_rot_elective { background: #fff4de; color: #9a6400; }
.bs_cell_rots .pd_card_icon.bs_rot_leave, .bsr_rots .pd_card_icon.bs_rot_leave { background: #e3f4ea; color: #1f7a45; }
.bsr_rots .pd_card_icon.bs_rot_off_service { background: #eceaf7; color: #5b4bb5; }
/* the ED block page */
.bs_tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 4px; }
.bs_tile { background: #fff; border: 1px solid #d3e2e3; border-radius: 12px; padding: 12px 10px; text-align: center; }
.bs_tile b { display: block; font-size: 22px; color: #0b5f5f; }
.bs_tile span { font-size: 12px; color: #6b7b80; }
.bs_tile_warn b { color: #b91c1c; }
@media (max-width: 600px) { .bs_tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bs_ini { font-weight: 800; font-size: 13px; }
.bs_bar { height: 5px; background: #e4eeee; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.bs_bar_fill { height: 100%; background: #e0a500; border-radius: 999px; }
.bs_bar_fill.bs_bar_full { background: #1f7a45; }
.bs_ed .alert-success { background: #e3f4ea; border-color: #bfe3cc; color: #1a5c35; }
.bs_assign .alert-success { background: #e3f4ea; border-color: #bfe3cc; color: #1a5c35; }
.bs_group_cards .pd_card_check { color: #8a9a9f; }
.pd_busy { opacity: .6; }
/* the days-off drawer */
.bs_days { background: #fff; border: 1px solid #d3e2e3; border-radius: 12px; padding: 10px; }
.bs_days_head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 11px; font-weight: 700; color: #8a9a9f; margin-bottom: 4px; }
.bs_days_grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bs_day { font: inherit; border: 1px solid #e4eeee; background: #fff; border-radius: 8px; min-height: 46px; padding: 4px 2px; cursor: pointer; line-height: 1.1; -webkit-tap-highlight-color: transparent; }
.bs_day b { display: block; font-size: 14px; }
.bs_day span { display: block; font-size: 9.5px; color: #6b7b80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs_day_pad { border: 0; background: transparent; cursor: default; }
.bs_day_off { background: #fdeaea; border-color: #f2c4c4; color: #b91c1c; }
.bs_day_no { background: #fff4de; border-color: #f1dfae; color: #7a4f00; }
.bs_day_work { background: #d9eeee; border-color: #b9dcdc; color: #0b5f5f; }
/* the resident's ranking */
.bsr_container .settings_row, .bsr_block { display: flex; }
.bsr_block { cursor: default; }
.bsr_block.bsr_open { cursor: pointer; }
.bsr_pick_line { margin-top: 5px; }
.bsr_none { font-size: 13px; color: #8a9a9f; font-style: italic; }
.bsr_star { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #e4eeee; background: #fff; color: #c3cfd2; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bsr_star_on { color: #e0a500; border-color: #f1dfae; background: #fff9e8; }
.bsr_star[disabled] { cursor: default; }
.bsr_star_ghost { border: 0; background: transparent; }
.bsr_owe { display: flex; flex-wrap: wrap; gap: 2px; }
.bsr_container .pd_form textarea.form-control { height: auto; resize: vertical; width: 100%; box-sizing: border-box; }
.bs_busy { opacity: .5; pointer-events: none; }

/* the blocks against today and the schedule: past dimmed, Now on the running one, a dot for a block with shifts */
.bs_block_past { opacity: 0.6; }
.bs_block_now .bs_block_icon { background: #0f7777; color: white; }
.bs_block_dates { font-weight: 400; color: #55707a; margin-left: 6px; }
.bs_block_days { font-weight: 400; color: #8a9a9f; font-size: 12px; margin-left: 4px; }
.bs_pill { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px; }
.bs_pill_now { background: #0f7777; color: white; }
.bs_dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.bs_dot_live { background: #22a06b; box-shadow: 0 0 0 2px rgba(34,160,107,0.18); }
.bs_dot_draft { background: transparent; border: 2px solid #b8a04a; }

/* levels: the PGY a class is in this year; held over = past the programme's length */
.bs_pgy_tag { display: inline-block; font-size: 11px; font-weight: 700; color: #0f7777; background: #e3f2f2; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.bs_pgy_held { color: #7a5a00; background: #fff3d6; }

/* duty hours: the rules drawer (settings rows, a + in the header) and a rule's form over it */
.bs_duty_count { font-size: 12px; font-weight: 700; color: #8a9a9f; letter-spacing: .02em; }
.bs_duty_row_num { color: #0f7777; font-weight: 800; }
.settings_row_icon.bs_duty_icon_own { background: #e2efef; color: #0f5e63; box-shadow: 0 0 0 2px #0f7777 inset; }
.bs_duty_pub_note { background: #e6f3f4; border-radius: 6px; padding: 10px 12px; margin: 0 0 14px; color: #0b5f5f; }
.bs_duty_pub_note i, .bs_duty_form_container .pd_hint > i { margin-right: 4px; }
.bs_duty_tick_row { margin-bottom: 4px; }
.bs_duty_source { font-size: 13px; color: #55707a; margin: 8px 0 0 2px; }
.bs_duty_source a { color: #0f7777; }

/* the block drawer: the ⋮ menu and the people list */
.bs_tools .dropdown-menu > li > a.bs_menu i { font-size: 15px; color: #0f7777; margin-right: 8px; }
.bs_tools .dropdown-menu > li > a.bs_menu[style] i { color: inherit; }
.bs_person_load { display: block; color: #8a9a9f; font-size: 12px; }

/* the block drawer: dates under the name in the header; the calendar, the line and the search
   locked above the scrolling list; a tapped person's shifts drawn on the calendar */
.bs_block_container .mchat_header > div:nth-child(2) { white-space: normal; }
.bs_bd_sub { font-size: 12px; font-weight: 500; opacity: .85; margin-top: 1px; }
.bs_bd_pinned { flex: none; background: white; border-bottom: 1px solid #e3ebeb; padding: 12px 16px 10px; }
.bs_bd_cal { margin-bottom: 6px; }
.bs_bd_cal .meetup_cal_title { font-size: 13px; margin-bottom: 4px; }
.bs_bd_cal .meetup_cal_grid { gap: 2px; }
.bs_bd_cal .meetup_cal_dow { font-size: 10px; padding: 0; }
.bs_bd_day { padding: 3px 0 2px; min-height: 36px; font-size: 12px; line-height: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: default; }
.bs_bd_day:hover { background: transparent; }
.bs_bd_num { font-weight: 600; }
.bs_bd_out .bs_bd_num { color: #c3cdd0; font-weight: 400; }
.bs_bd_lbl { font-size: 9px; font-weight: 700; letter-spacing: .01em; color: white; min-height: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs_bd_day.is_selected { background: #0f7777; color: white; border-color: #0f7777; }
.bs_bd_day.is_selected.is_draft { background: #eaf7f8; color: #0b5f5f; border-color: #0f7777; border-style: dashed; }
.bs_bd_day.is_selected.is_draft .bs_bd_lbl { color: #0b5f5f; }
.bs_bd_day.is_today:not(.is_selected) { border-color: #0f7777; }
.bs_bd_line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #435b64; min-height: 24px; }
.bs_bd_line_person { font-weight: 700; color: #16211f; }
.bs_bd_clear { margin-left: auto; border: 0; background: #eef0f2; color: #435b64; border-radius: 50%; width: 22px; height: 22px; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.bs_bd_search { position: relative; margin-top: 8px; }
.bs_bd_search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #8a9a9f; font-size: 13px; }
.bs_bd_search .form-control { padding-left: 32px; height: 36px; border-radius: 8px; box-shadow: none; }
.bs_block_container .mchat_messages { padding-top: 12px !important; }
.bs_bd_person { cursor: pointer; }
.bs_bd_tick { color: transparent; }
.bs_bd_person.bs_bd_on { background: #eaf7f8; }
.bs_bd_person.bs_bd_on .bs_bd_tick { color: #0f7777; }
.bs_bd_desc { margin-bottom: 10px; }
.bs_bd_clear.hide_me, .bs_bd_line_person.hide_me, .bs_bd_line_text.hide_me { display: none; }

/* the page's tools ⋮ beside New year (the phone drawer carries its own in the header) */
.bs_top_actions { display: flex; align-items: center; gap: 8px; }
.bs_page_tools .dropdown-menu { min-width: 240px; border-radius: 8px; padding: 6px 0; }
.bs_tools_menu > li > a.bs_menu { padding: 9px 16px; display: flex; align-items: center; gap: 10px; }
.bs_tools_menu > li > a.bs_menu i { font-size: 16px; color: #0f7777; }
.bs_page_tools_header .dropdown-toggle:hover, .bs_page_tools_header .dropdown-toggle:focus, .bs_page_tools_header.open .dropdown-toggle { background: rgba(255,255,255,0.15) !important; color: white !important; }
.employer_tool_drawer_blocks .bs_top_actions .bs_page_tools { display: none; }
.bs_tools_menu > li > a.bs_menu.bs_menu_danger, .bs_tools_menu > li > a.bs_menu.bs_menu_danger i { color: #b42318; }

/* Delete the year (placeholder): the warning cards; the typed confirmation sits in the footer
   above the red button (cm_btn_primary cm_btn_danger, disabled until the year is typed) */
.bs_del_warn { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 10px; border-radius: 10px; background: #fff4e5; border: 1px solid #f6c98a; color: #7a4a00; font-size: 13px; line-height: 1.45; }
.bs_del_warn > i { font-size: 20px; flex: none; color: #d97706; margin-top: 1px; }
.bs_del_warn_red { background: #fdecec; border-color: #f2a8a8; color: #7a1f1f; }
.bs_del_warn_red > i { color: #b42318; }
.bs_del_icon { background: #fdecec; color: #b42318; }
.bs_foot .bs_del_confirm_wrap { flex: 1 1 100%; }
.bs_foot .bs_del_confirm_wrap .pd_hint { margin: 0 0 6px; }
.bs_foot .bs_del_button i { margin-right: 6px; }
.pd_card.pd_muted { opacity: .55; }
.pd_card.pd_muted.pd_on { opacity: 1; }

/* the year's setup list: one row a step, the green tick when done, the next thing lit */
.bs_setup_count { font-size: 18px; font-weight: 800; color: #0f7777; }
.bs_setup_count span { font-size: 13px; color: #9aa6aa; font-weight: 600; }
.bs_setup_done { display: inline-flex; align-items: center; color: #1a9a6a; font-size: 24px; line-height: 1; padding-right: 2px; flex: none; }
.bs_setup_row.bs_setup_is_done .settings_row_icon { background: #e6f5ee; color: #1a9a6a; }
.bs_setup_row.bs_setup_next { background: linear-gradient(110deg, #edfbfa 0%, #ffffff 60%, #f5edfb 100%); }
.bs_setup_row.bs_setup_next .settings_row_icon { background: darkcyan; color: white; }
.bs_duty_confirmed { display: flex; align-items: center; gap: 8px; color: #1a9a6a; font-weight: 600; font-size: 14px; padding: 4px 0; }

/* inside the phone drawer the header carries the title, the year and the dates: the page's own top goes */
.employer_tool_drawer_blocks .bs_top { display: none; }
.employer_tool_drawer_blocks .bs_page > .bs_years { margin-top: 0; }
.bs_pill_quiet { background: #eef0f2; color: #55707a; }
.bs_year_pick_on { background: #f4f9f9; }
.bs_tools_menu > li.divider { margin: 6px 0; }

/* the program event form's day picker; the years page's back link */
.bs_pe_days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 0 0 4px; }
.bs_pe_day { border: 1px solid #c3d1d4; background: white; color: #16211f; border-radius: 999px; padding: 7px 0; font-size: 12.5px; font-weight: 600; text-align: center; min-width: 0; }
.bs_pe_day.pd_on { background: #0f7777; border-color: #0f7777; color: white; }
.bs_pe_when_recurring.hide_me, .bs_pe_when_once.hide_me, .bs_pe_place.hide_me, .bs_pe_link.hide_me { display: none; }
.bs_years_back { font-size: 13px; font-weight: 600; color: #0f7777; }
.pac-container { z-index: 100000; }
.bs_pe_two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs_pe_container .cm_where_btns { margin-bottom: 4px; }
.bs_pe_invite_on .settings_row_icon { background: #e6f5ee; color: #1a9a6a; }
.bs_pe_invites { margin-bottom: 6px; }
.bs_foot .bs_confirm { flex: 1 1 100%; margin-bottom: 4px; }
.bs_foot .bs_confirm .bs_confirm_box { flex: 0 0 30px; width: 30px; height: 30px; }
.bs_asg_bar { height: 4px; background: #e6eeef; border-radius: 2px; overflow: hidden; margin-top: 6px; max-width: 220px; }
.bs_asg_bar > div { height: 100%; background: linear-gradient(90deg, #1db4b4, #3fb58a); border-radius: 2px; }
.bs_pe_date_icon { flex-direction: column; line-height: 1; }
.bs_pe_date_icon .hr_day_mon { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #0f7777; }
.bs_pe_date_icon .hr_day_num { font-size: 15px; font-weight: 800; }
.bs_pe_past_n { color: #8a9a9f; font-weight: 500; }

/* room under the last group so it is not pressed against the bottom of the screen */
.bs_page_tail { height: 40px; }
@media (max-width: 767px) { .bs_page_tail { height: calc(72px + env(safe-area-inset-bottom)); } }

/* insights: the duty-hours drawer — stat tiles, the chart, the people */
.bs_stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.bs_stat { background: #f4f9f9; border: 1px solid #e3ebeb; border-radius: 8px; padding: 10px 12px; }
.bs_stat_num { font-size: 22px; font-weight: 800; color: #16211f; line-height: 1.1; }
.bs_stat_num span { font-size: 13px; font-weight: 600; color: #55707a; margin-left: 2px; }
.bs_stat_label { font-size: 12px; font-weight: 700; color: #435b64; margin-top: 2px; }
.bs_stat_sub { font-size: 11px; color: #8a9a9f; margin-top: 1px; }
.bs_stat_good .bs_stat_num { color: #1a9a6a; }
.bs_stat_bad .bs_stat_num { color: #b8433a; }
.bs_ds_chart_head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #16211f; min-height: 22px; margin-bottom: 2px; }
.bs_ds_chart_head .bs_bd_clear { margin-left: auto; }
.bs_ds_chart { width: 100%; }
.bs_ds_person { cursor: pointer; }
.bs_ds_person.bs_bd_on { background: #eaf7f8; }
.bs_ds_person.bs_bd_on .bs_bd_tick { color: #0f7777; }
.bs_ds_icon_bad { background: #fdf4f3; color: #b8433a; }
.bs_owed_bar { height: 6px; background: #e6eeef; border-radius: 3px; overflow: hidden; margin: 2px 0 4px; }
.bs_owed_bar > div { height: 100%; background: linear-gradient(90deg, #1db4b4, #3fb58a); border-radius: 3px; transition: width .2s; }
.bs_req_ok { color: #1a9a6a; }
.bs_req_short { color: #b8433a; }
.bs_confirm_off { opacity: .6; }
.bs_confirm_off .cm_confirm_box[disabled] { cursor: not-allowed; }
.bs_role_owes.hide_me { display: none; }
.bs_step_off { opacity: .35; cursor: not-allowed; }

/* a rotation's place: the address line and the map with its circle */
.bs_rot_place { padding: 12px 14px; }
.bs_rot_place_head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: 14px; }
.bs_rot_place_head i { color: #0f7777; font-size: 18px; margin-top: 1px; }
.bs_rot_place_addr { color: #55707a; font-size: 12.5px; }
.bs_rot_map { height: 220px; border-radius: 8px; background: #e6eeef; }
.bs_rot_progress { display: flex; align-items: center; gap: 8px; color: #7a5a00; font-weight: 600; font-size: 13.5px; padding: 4px 0; }
.bs_rot_progress i { color: #b8a04a; }
.bs_foot .bs_rotation_attest { flex: 1 1 100%; }

/* a rotation's places: organizer-style section, a card per place with its map; the ⋮ items */
.bs_rot_locations { margin-top: 12px; }
.bs_rot_place { margin: 8px 0; }
.bs_rot_place_head { align-items: center; }
.bs_rot_place_head > div { flex: 1; min-width: 0; }
.bs_rot_place_off { border: 0; background: #eef0f2; color: #435b64; border-radius: 50%; width: 26px; height: 26px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.bs_loc_pick .meetup_drawer_footer { display: none; padding: 10px 0 0; }
.bs_loc_pick.has_pick .meetup_drawer_footer { display: block; }
.bs_tools .dropdown-menu > li > a.bs_menu { display: flex; align-items: center; gap: 10px; padding: 9px 16px; white-space: nowrap; }
.bs_tools .dropdown-menu { min-width: 200px; }

/* the request drawer's people: a status filter, a search, one row each with a pill or a tick */
.bs_rq_filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.bs_rq_filter { font: inherit; font-size: 13px; font-weight: 700; color: #4b5b62; background: #fff; border: 1px solid #d3e2e3; border-radius: 999px; padding: 5px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bs_rq_filter b { font-weight: 500; opacity: .75; margin-left: 2px; }
.bs_rq_filter.bs_rq_on { background: #0f7777; border-color: #0f7777; color: #fff; }
.bs_rq_filter.bs_rq_on b { opacity: .85; }
.bs_rq_search_box { margin: 0 0 10px; }
.bs_rq_list_title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bs_rq_tick_all { font: inherit; font-size: 12.5px; font-weight: 700; color: #0f7777; background: transparent; border: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
/* the status where the tick sits: a green paper plane once sent, an hourglass while they are on it, a filled green box with a check once it is back */
.bs_rq_person .bs_rq_mark { flex: none; margin: 0 0 0 10px; width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.bs_rq_mark_not_invited { background: #eef0f2; color: #6b7280; }
.bs_rq_mark_invited { background: #fff; border: 2px solid #1f7a45; color: #1f7a45; font-size: 14px; }
.bs_rq_mark_pending { background: #fff4de; border: 2px solid #e6c98a; color: #9a6400; }
.bs_rq_mark_submitted { background: #1f7a45; border: 2px solid #1f7a45; color: #fff; font-size: 17px; }
.bs_rq_person .bs_rq_box { flex: none; margin: 0 0 0 10px; width: 30px; height: 30px; padding: 4px; background: white; border: 2px solid #9aa5a5; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.bs_rq_person .bs_rq_box.checkbox_active { border-color: #0f7777; }
.bs_rq_person .bs_rq_box .custom_checkbox_checker { top: 0; line-height: 1; color: #0f7777; font-size: 13px; }
.bs_rq_person .bs_rq_box .custom_checkbox_checker.hide_me { display: none; }
.bs_rq_person.bs_rq_pick { cursor: pointer; }
.bs_rq_person.hide_me { display: none; }
.bs_rot_place_row .bs_rot_place_off { margin-left: 6px; }
.bs_rot_place .bs_rot_place_addr { color: #55707a; font-size: 12.5px; margin: -4px 0 8px; }
.bs_rot_place .bs_rot_map { margin-top: 4px; }
.bs_helper { display: flex; gap: 8px; align-items: flex-start; background: #eef0f2; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; color: #55707a; margin: 8px 0 12px; }
.bs_helper i { color: #8a9a9f; font-size: 14px; margin-top: 1px; flex: none; }

/* ---- the resident's ranking board: the tray (a tally), the placed chips, the in-row chooser ---- */
/* the process-drawer tokens the note box (.pd_form) reads, so it wears the brand border on focus */
.bsr_container { --pd_ink: #0F2044; --pd_line: #dbe4e6; --pd_brand: #007A85; --pd_radius: 10px; }
/* who it is for, the stars card */
.bsr_who b { color: #0b5f5f; }
.bsr_stars_card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3ebeb; border-radius: 6px; padding: 12px 14px; margin: 12px 0 4px; }
.bsr_stars_glyphs { display: inline-flex; gap: 4px; font-size: 22px; color: #d4dde0; flex: none; }
.bsr_stars_glyphs .bsr_sg_on { color: #e0a500; }
.bsr_stars_text { font-size: 14px; color: #4b5b62; }
.bsr_stars_text b { color: #0b5f5f; font-size: 16px; }
.bsr_stars_sub { color: #8a9a9f; font-size: 13px; }
.bsr_stars_no { animation: bsr_shake .35s ease both; }
/* Available rotations: one row, the chips folded under it */
.bsr_avail { margin-bottom: 12px; }
.bsr_avail_row .settings_row_chevron i { display: inline-block; transition: transform .18s; }
.bsr_avail_open .bsr_avail_row .settings_row_chevron i { transform: rotate(90deg); }
.bsr_tray { background: #fbfdfd; border-top: 1px solid #e4eeee; padding: 12px 14px 8px; }
.bsr_tray.hide_me { display: none; }
.bsr_tray_chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 6px; }
.bsr_tray_other { border-top: 1px dashed #e4eeee; padding-top: 8px; margin-top: 2px; }
.bsr_tray_also { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a9a9f; margin-right: 2px; }
.bsr_chip { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 7px 12px; border-radius: 8px; user-select: none; -webkit-user-select: none; }
.bsr_chip_name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsr_tray_chip, .bsr_pop_chip { flex: none; max-width: 100%; }
.bsr_chip_other { background: #fff; border: 1px dashed #c3cfd2; color: #4b5b62; }
.bsr_chip_done { opacity: .45; }
.bsr_chip_n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(0, 0, 0, .12); font-size: 11.5px; font-weight: 800; line-height: 1; flex: none; }
.bsr_chip_done .bsr_chip_n { background: transparent; font-size: 13px; }
/* a placed chip: one width for every block, the name cut with an ellipsis, the × on the end */
.bsr_placed { width: 150px; box-sizing: border-box; padding-right: 6px; justify-content: space-between; }
.bsr_chip_x { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .08); color: inherit; font-size: 15px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bsr_chip_x:hover { background: rgba(0, 0, 0, .18); }
.bsr_drop { display: inline-flex; align-items: center; gap: 4px; width: 150px; box-sizing: border-box; font-size: 12.5px; color: #8a9a9f; border: 1px dashed #c3cfd2; border-radius: 8px; padding: 6px 12px 6px 10px; background: #fbfdfd; }
/* the number and the star sit at the top of the row, level with the block's name */
.bsr_block { position: relative; align-items: flex-start; }
.bsr_block .bs_block_icon, .bsr_block .bsr_star { margin-top: 2px; }
.bsr_block.bsr_asking { background: #fbfdfd; }
.bsr_menu { margin-top: 10px; background: #fff; border: 1px solid #cfe2e2; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .10); overflow: hidden; transform-origin: 20px 0; animation: bsr_pop_in .18s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes bsr_pop_in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.bsr_menu_title { font-size: 12px; font-weight: 700; color: #5b6b70; padding: 9px 12px 7px; border-bottom: 1px solid #e4eeee; background: #f4f9f9; white-space: normal; }
/* the in-row chooser: the tray's chips, opening where the tap was */
.bsr_pop_chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.bsr_pop_chip { border: 0; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bsr_pop_chip:active { transform: scale(.96); }
.bsr_pop_none { padding: 12px; font-size: 13px; color: #6b7b80; }
/* a star past the limit: a shake and a note under the row */
.bsr_star_no { animation: bsr_shake .35s ease both; }
@keyframes bsr_shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.bsr_pop_sub { font-size: 12px; font-weight: 700; color: #8a9a9f; padding: 10px 12px 0; }
.bsr_pop .bsr_menu_item { border-top: 1px solid #eef3f3; }
.bsr_menu_item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 0; padding: 10px 12px; font-size: 14px; color: #1f2d32; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bsr_menu_item:hover { background: #f4f9f9; }
.bsr_menu_item > i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #d9eeee; color: #0b5f5f; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.bsr_menu_item > span { display: flex; flex-direction: column; min-width: 0; white-space: normal; }
.bsr_menu_item > span small { font-size: 12px; color: #6b7b80; }
.bsr_pop_remove > i, .bsr_swap_cancel > i { background: #f1f4f4; color: #6b7b80; }
/* swap mode: the source waits, every other block is a target */
.bsr_swap_mode .bsr_block { cursor: pointer; }
.bsr_swap_mode .bsr_block:not(.bsr_swap_from) { box-shadow: inset 0 0 0 2px #9fd3d8; background: #f4fbfb; }
.bsr_swap_from { background: #fff9e8; }
.bsr_swap_mode .bsr_star { pointer-events: none; opacity: .5; }
.bsr_done_container .mchat_messages { display: flex; flex-direction: column; justify-content: center; }
.bsr_done_container .bs_foot .pd_next { flex: 1; }
.bsr_closed_note { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 12px; padding: 12px 14px; border-radius: 10px; background: #fdecec; border: 1px solid #f2a8a8; color: #7a1f1f; font-size: 13.5px; line-height: 1.45; }
.bsr_closed_note > i { font-size: 18px; flex: none; color: #b42318; margin-top: 1px; }
.bsr_rot_full { opacity: .45; cursor: default; }
@media (min-width: 768px) { .bsr_chip { font-size: 13.5px; } }

/* ================== THE ASSIGN BOARD (class.block_board.php) ==================
   bsb_ classes: the desktop table (people down, blocks across) and the phone's one-person card,
   one render; the bar with the three fill steps; the synopsis; the tutorial fold */
.bsb_page { --bsb-teal: #0f7777; --bsb-teal-d: #0b5f5f; --bsb-mute: #6b7b80; --bsb-line: #d3e2e3; --bsb-line-2: #e4eeee; --bsb-star: #e0a500; --bsb-ok: #1f7a45; --bsb-bad: #b91c1c; }
.bsb_top_m { display: none; }
/* the bar */
.bsb_actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.bsb_btn { border: 1px solid var(--bsb-line); background: #fff; color: var(--bsb-teal); font: inherit; font-weight: 700; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; -webkit-tap-highlight-color: transparent; }
.bsb_btn:hover { background: #eaf4f4; }
.bsb_btn.bsb_primary { background: var(--bsb-teal); border-color: var(--bsb-teal); color: #fff; margin-left: auto; }
.bsb_btn.bsb_primary:hover { background: #0c6a6a; }
.bsb_btn.bsb_ghost_btn { background: transparent; border-color: transparent; color: var(--bsb-mute); }
.bsb_btn:disabled { opacity: .45; cursor: default; }
.bsb_stages { display: inline-flex; border: 1px solid var(--bsb-line); border-radius: 10px; overflow: hidden; background: #fff; }
.bsb_stage { border: 0; border-right: 1px solid var(--bsb-line-2); background: #fff; color: var(--bsb-teal); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; -webkit-tap-highlight-color: transparent; }
.bsb_stage:last-child { border-right: 0; }
.bsb_stage:hover { background: #eaf4f4; }
.bsb_stage:disabled { opacity: .45; cursor: default; background: #fff; }
.bsb_no { width: 18px; height: 18px; border-radius: 50%; background: #e6f2f2; color: var(--bsb-teal); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bsb_stage_done { color: var(--bsb-ok); }
.bsb_stage_done .bsb_no { background: #e3f4ea; color: var(--bsb-ok); }
.bsb_stage_next { background: #eaf4f4; }
.bsb_stage_next .bsb_no { background: var(--bsb-teal); color: #fff; }
/* the tiles */
.bsb_tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.bsb_tile { background: #fff; border: 1px solid var(--bsb-line); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 2px rgba(11, 61, 64, .05); }
.bsb_tile b { display: block; font-size: 19px; color: var(--bsb-teal-d); line-height: 1.1; }
.bsb_tile span { font-size: 12px; color: var(--bsb-mute); }
.bsb_tile > .bi { font-size: 20px; color: var(--bsb-teal); width: 34px; height: 34px; border-radius: 10px; background: #e6f2f2; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bsb_tile_warn > .bi { background: #fdecec; color: var(--bsb-bad); }
.bsb_tile_warn b { color: var(--bsb-bad); }
.bsb_ring { position: relative; display: inline-block; flex: none; }
.bsb_ring svg { transform: rotate(-90deg); display: block; }
.bsb_ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--bsb-teal-d); }
/* the legend */
.bsb_legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.bsb_lbl { font-size: 11px; font-weight: 700; color: var(--bsb-mute); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.bsb_sw { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px 3px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--bsb-line); cursor: default; color: #1f2f33; }
.bsb_sw i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.bsb_sw small { font-weight: 500; color: var(--bsb-mute); font-size: 11px; }
.bsb_sw:hover { background: #eaf4f4; border-color: #9fc9cb; }
.bsb_hint { margin-left: auto; font-size: 12px; color: var(--bsb-mute); display: inline-flex; gap: 12px; flex-wrap: wrap; }
.bsb_k { display: inline-flex; align-items: center; gap: 4px; }
.bsb_chip_xs { padding: 2px 7px !important; font-size: 10.5px !important; min-width: 0 !important; }
/* the chips */
.bsb_chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: .02em; border-radius: 7px; padding: 5px 9px; white-space: nowrap; border: 1.5px solid transparent; transition: transform .15s, opacity .15s; }
.bsb_chip .bi { font-size: 11px; }
.bsb_set { color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.bsb_set .bi-check { color: rgba(255, 255, 255, .95); }
.bsb_set .bi-star-fill, .bsb_set .bi-arrow-left-right { color: #ffd85e; }
.bsb_ghost { background: #fff; border-style: dashed; opacity: .85; }
.bsb_ghost .bi-star-fill { color: var(--bsb-star); }
.bsb_cell:hover .bsb_ghost { opacity: 1; transform: scale(1.04); }
.bsb_landing .bsb_chip { transform: scale(.9); opacity: .6; }
.bsb_dash { color: #c3cfd2; font-size: 16px; }
.bsb_ask { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; margin-top: 2px; line-height: 1; text-transform: uppercase; }
.bsb_ask .bi { font-size: 8px; }
/* the table */
.bsb_board { overflow: auto; max-height: calc(100vh - 250px); border: 1px solid var(--bsb-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(11, 61, 64, .08); }
.bsb_table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.bsb_table th, .bsb_table td { border-bottom: 1px solid var(--bsb-line-2); border-right: 1px solid #eef3f3; padding: 0; vertical-align: middle; text-align: center; }
.bsb_table thead th { position: sticky; top: 0; background: #f7fbfb; z-index: 3; height: 64px; }
.bsb_table th.bsb_name, .bsb_table td.bsb_name { position: sticky; left: 0; background: #fff; z-index: 2; text-align: left; min-width: 210px; max-width: 210px; padding: 8px 12px; }
.bsb_table thead th.bsb_name { z-index: 4; background: #f7fbfb; font-weight: 700; color: var(--bsb-teal-d); }
.bsb_bh { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; padding: 6px 4px 4px; position: relative; text-decoration: none; color: inherit; }
.bsb_bh:hover { text-decoration: none; }
.bsb_bh:hover b { text-decoration: underline; color: var(--bsb-teal); }
.bsb_bh b { font-size: 13px; color: var(--bsb-teal-d); }
.bsb_bh > span { font-size: 10.5px; color: var(--bsb-mute); font-weight: 500; }
.bsb_gauge { display: flex; gap: 1px; height: 5px; width: 66px; border-radius: 3px; overflow: hidden; background: #e6eeef; margin-top: 2px; }
.bsb_gauge i { display: block; height: 100%; }
.bsb_over { position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--bsb-bad); box-shadow: 0 0 0 2px #fff; }
.bsb_grp td { background: #f7fbfb; border-right: 0; padding: 5px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--bsb-teal-d); text-align: left; position: sticky; left: 0; }
.bsb_grp_n { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--bsb-mute); margin-left: 6px; }
.bsb_p { display: flex; align-items: center; gap: 10px; }
.bsb_av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; color: #fff; flex: none; letter-spacing: .02em; }
.bsb_who { min-width: 0; flex: 1; }
.bsb_nm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsb_p .bsb_ring b { font-size: 9.5px; }
.bsb_noans td.bsb_name .bsb_nm { color: #7c8b90; }
.bsb_noans td.bsb_cell { background: repeating-linear-gradient(135deg, #fff, #fff 6px, #fafcfc 6px, #fafcfc 12px); }
td.bsb_cell { width: 88px; min-width: 88px; height: 58px; cursor: pointer; position: relative; transition: background .15s; }
td.bsb_cell:hover { background: #eaf4f4; }
td.bsb_cell.bsb_dim .bsb_chip, td.bsb_cell.bsb_dim .bsb_dash, td.bsb_cell.bsb_dim .bsb_ask { opacity: .18; }
td.bsb_cell_over::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--bsb-bad); }
.bsb_table tfoot td { position: sticky; bottom: 0; background: #f7fbfb; z-index: 3; padding: 6px 4px; white-space: normal; font-size: 10.5px; line-height: 1.35; }
.bsb_table tfoot td.bsb_foot_l { z-index: 4; font-weight: 800; color: var(--bsb-teal-d); font-size: 12px; }
.bsb_ld { display: inline-block; margin: 1px 2px; font-weight: 700; color: #4b5b62; }
.bsb_ld_over { color: var(--bsb-bad); font-weight: 800; }
.bsb_note { font-size: 12px; color: var(--bsb-mute); margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; }
.bsb_note .bi { color: var(--bsb-teal); }
/* the synopsis */
.bsb_syn { background: #fff; border: 1px solid var(--bsb-line); border-radius: 14px; padding: 14px 18px; margin: 0 0 14px; box-shadow: 0 1px 3px rgba(11, 61, 64, .08); }
.bsb_syn_t { font-size: 15px; font-weight: 800; color: var(--bsb-teal-d); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bsb_syn_t .bi { color: var(--bsb-teal); }
.bsb_syn_stage { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; padding: 9px 0; border-top: 1px solid var(--bsb-line-2); font-size: 13px; line-height: 1.5; }
.bsb_syn_stage:first-of-type { border-top: 0; }
.bsb_syn_h { font-weight: 800; color: var(--bsb-teal-d); }
.bsb_syn_h small { display: block; font-weight: 600; color: var(--bsb-mute); font-size: 11.5px; }
.bsb_syn_stage ul { margin: 4px 0 0; padding-left: 18px; }
.bsb_syn_stage li { margin: 2px 0; }
.bsb_syn_stage .bsb_who { font-weight: 700; flex: none; }
.bsb_conf { background: #fff8e6; border: 1px solid #f1dfa8; border-radius: 10px; padding: 9px 12px; margin: 6px 0; display: flex; gap: 10px; align-items: flex-start; }
.bsb_conf > .bi { color: var(--bsb-star); margin-top: 2px; }
.bsb_conf_t { flex: 1; }
.bsb_conf_t b { display: block; }
.bsb_conf_sug { margin-top: 3px; color: #3d4d52; }
.bsb_conf .btn { padding: 5px 10px; font-size: 12px; flex: none; color: var(--bsb-teal); font-weight: 700; border-color: var(--bsb-line); }
.bsb_conf_done { background: #eef8f1; border-color: #bfe3cb; }
.bsb_conf_done > .bi { color: var(--bsb-ok); }
.bsb_why { margin-top: 8px; padding: 10px 12px; background: #f2f8f8; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.bsb_why > b { color: var(--bsb-teal-d); }
.bsb_why ul { margin: 4px 0 0; padding-left: 18px; }
.bsb_score { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 2px; }
.bsb_score div b { display: block; font-size: 19px; color: var(--bsb-teal-d); }
.bsb_score div span { font-size: 11.5px; color: var(--bsb-mute); }
/* the tutorial fold */
.bsb_tut { margin-top: 22px; }
.bsb_tut_toggle { font-size: 13px; font-weight: 700; color: var(--bsb-teal); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.bsb_tut_toggle:hover { text-decoration: none; color: var(--bsb-teal-d); }
.bsb_tut_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.bsb_tut_grid.hide_me { display: none; }
.bsb_tut_card { background: #fff; border: 1px solid var(--bsb-line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(11, 61, 64, .05); }
.bsb_tut_ex { min-height: 40px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px; background: #f7fbfb; border-radius: 8px; border: 1px dashed var(--bsb-line); }
.bsb_tut_card > b { display: block; font-size: 14px; margin-bottom: 4px; }
.bsb_tut_card p { margin: 0; font-size: 13px; line-height: 1.5; color: #3d4d52; }
/* the phone: hidden on the desktop */
.bsb_phone { display: none; }

@media (max-width: 767px)
{
  .bsb_board, .bsb_note, .bsb_legend, .bsb_top { display: none; }
  .bsb_top_m { display: block; font-size: 13px; color: var(--bsb-mute); margin: 0 0 10px; }
  .bsb_top_m a { color: var(--bsb-teal); font-weight: 700; text-decoration: none; }
  .employer_tool_drawer_blocks .bsb_top_m { display: block; }
  .bsb_tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bsb_tile { padding: 10px 12px; gap: 10px; }
  .bsb_tile b { font-size: 16px; }
  .bsb_tile span { font-size: 11px; }
  .bsb_syn_stage { grid-template-columns: 1fr; gap: 2px; }
  .bsb_conf { flex-wrap: wrap; }
  .bsb_conf .btn { width: 100%; padding: 9px 10px; font-size: 13px; }
  .bsb_score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
  .bsb_phone { display: block; }
  /* the rail */
  .bsb_rail { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
  .bsb_rail::-webkit-scrollbar { display: none; }
  .bsb_rail_grp { flex: none; display: flex; flex-direction: column; align-items: center; padding-right: 8px; margin-right: 2px; border-right: 1px solid var(--bsb-line); }
  .bsb_rail_grp:last-child { border-right: 0; }
  .bsb_rail_grp small { font-size: 9.5px; font-weight: 800; color: var(--bsb-teal-d); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; white-space: nowrap; }
  .bsb_rail_grp > div { display: flex; gap: 6px; }
  .bsb_avw { position: relative; width: 44px; height: 44px; flex: none; opacity: .55; transition: .15s; display: block; }
  .bsb_avw .bsb_ring { position: absolute; inset: 0; }
  .bsb_avw .bsb_av { position: absolute; inset: 5px; width: auto; height: auto; font-size: 12px; }
  .bsb_avw_on { opacity: 1; transform: scale(1.08); }
  /* the card */
  .bsb_card { display: none; background: #fff; border: 1px solid var(--bsb-line); border-radius: 16px; box-shadow: 0 1px 3px rgba(11, 61, 64, .08); overflow: hidden; }
  .bsb_card_on { display: block; }
  .bsb_ph { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--bsb-line-2); }
  .bsb_av_lg { width: 42px; height: 42px; font-size: 14px; }
  .bsb_ph .bsb_nm { font-size: 17px; font-weight: 800; }
  .bsb_st { font-size: 12.5px; color: var(--bsb-mute); margin-top: 2px; }
  .bsb_nav { display: flex; gap: 4px; flex: none; }
  .bsb_nav button { width: 34px; height: 34px; border: 1px solid var(--bsb-line); background: #fff; border-radius: 9px; color: var(--bsb-teal); font-size: 15px; padding: 0; }
  .bsb_nav button:disabled { opacity: .3; }
  .bsb_row { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; min-height: 58px; border-bottom: 1px solid var(--bsb-line-2); cursor: pointer; }
  .bsb_row:last-child { border-bottom: 0; }
  .bsb_row:active { background: #eaf4f4; }
  .bsb_row_no { min-width: 28px; height: 28px; border-radius: 8px; background: #f0f6f6; color: var(--bsb-teal-d); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0 6px; }
  .bsb_row_t { flex: 1; min-width: 0; }
  .bsb_row_t b { display: block; font-size: 13.5px; }
  .bsb_seat { display: inline-block; font-size: 11px; font-weight: 700; color: var(--bsb-mute); }
  .bsb_seat_over { color: var(--bsb-bad); }
  .bsb_row_r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
  .bsb_row_r .bsb_chip { font-size: 13px; padding: 7px 11px; min-width: 78px; justify-content: center; }
  .bsb_row_r .bsb_dash { display: inline-flex; min-width: 78px; justify-content: center; padding: 7px 11px; border: 1.5px dashed #e4eeee; border-radius: 8px; }
  .bsb_car { color: #c3cfd2; font-size: 14px; flex: none; }
  .bsb_hint_m { font-size: 12px; color: var(--bsb-mute); padding: 10px 2px 0; display: flex; gap: 8px; }
  .bsb_hint_m .bi { color: var(--bsb-teal); }
  /* the bar sits on the bottom of the drawer's scroll */
  .bsb_page { display: flex; flex-direction: column; }
  .bsb_page > * { order: 1; }
  .bsb_page > .bsb_actions { position: sticky; bottom: 0; z-index: 5; background: #eef3f3; margin: 0 -18px 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bsb-line); order: 99; }
  .bsb_page > .bs_page_tail { order: 100; height: 8px; }
  .bsb_tile .bsb_ring b { font-size: 10px; }
  /* the synopsis folds to its title until a step runs or it is tapped */
  .bsb_syn:not(.bsb_syn_open) > *:not(.bsb_syn_t) { display: none; }
  .bsb_syn_t { cursor: pointer; margin-bottom: 0; }
  .bsb_syn_open .bsb_syn_t { margin-bottom: 8px; }
  .bsb_syn_t::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; font-size: 13px; color: var(--bsb-mute); }
  .bsb_syn_open .bsb_syn_t::after { content: "\F286"; }
  .bsb_stages { flex: 1; display: flex; }
  .bsb_stage { flex: 1; flex-direction: column; gap: 4px; padding: 7px 4px; font-size: 11.5px; line-height: 1.1; text-align: center; }
  .bsb_btn { padding: 7px 10px; font-size: 12px; }
  .bsb_btn.bsb_primary { flex: none; margin-left: 0; }
  .bsb_long { display: none; }
  .bsb_undo { padding: 7px 8px; }
  .bsb_tut_grid { grid-template-columns: 1fr; }
}

/* the board as a drawer (display_board_drawer): the steps fill the footer, the tiles go 2×2 */
.bsb_container .bs_foot .bsb_stages { flex: 1; display: flex; border-radius: 12px; }
.bsb_container .bs_foot .bsb_stage { flex: 1; flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 12px; line-height: 1.1; text-align: center; justify-content: center; }
.bsb_container .bs_foot .bsb_stage .bsb_no { width: 20px; height: 20px; }
.bsb_in_drawer .bsb_tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bsb_in_drawer .bsb_board { max-height: none; }
.bsb_in_drawer .bsb_top_m { display: none; }
.bsb_container .bs_bd_sub { white-space: normal; }
@media (max-width: 767px) { .bsb_in_drawer .bsb_syn_stage { grid-template-columns: 1fr; } }

/* a step armed by its first tap; the ⋮'s Publish the same */
.bsb_stage.bsb_armed { background: #fff4de; color: #9a6400; }
.bsb_stage.bsb_armed .bsb_no { background: #e0a500; color: #fff; }
.bs_tools .dropdown-menu > li > a.bsb_armed { background: #fff4de; color: #9a6400; }