/* Baseline Lifestyle — canonical shared My Routine geometry v12.

   VISUAL OWNERSHIP CONTRACT
   -------------------------
   Skincare and Fitness supply palette tokens and system-specific surfaces.
   This file owns common component geometry/interaction only. It does not own
   either system's palette and contains no page-scroll or runtime-override rules.
*/

/* Enhanced sitewide selects intentionally retain their native select for value,
   sizing and accessibility. Only the themed button is painted. This final My
   Routine rule must outrank system rules such as Fitness opacity:1!important,
   otherwise refresh can expose the native select and make one control look like
   two duplicate dropdown boxes. */
:where(#routine,#my-plan) .bl-select[data-bl-enhanced="1"]>select{
  opacity:0!important;
  pointer-events:none!important;
}
:where(#routine,#my-plan) .bl-routine-summary-filter>.bl-select{
  width:100%!important;
  max-width:100%!important;
}

/* One shared native-select geometry and one centred chevron. */
:where(#routine,#my-plan) select:not(.routine-action-native){
  -webkit-appearance:none!important;
  appearance:none!important;
  min-height:50px!important;
  max-width:100%;
  box-sizing:border-box;
  padding:10px 44px 10px 12px!important;
  border-radius:14px!important;
  font:inherit!important;
  font-size:18px!important;
  line-height:1.25!important;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--bl-routine-text,currentColor) 50%),
    linear-gradient(135deg,var(--bl-routine-text,currentColor) 50%,transparent 50%)!important;
  background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px)!important;
  background-size:6px 6px,6px 6px!important;
  background-repeat:no-repeat!important;
}
:where(#routine,#my-plan) select:not(.routine-action-native)::-ms-expand{display:none}

/* Searchable pickers use one fixed-width toggle. Its surface comes from the
   active system palette and its chevron is absolutely centred, so inherited
   button typography cannot push the arrow towards the top of the control. */
:where(#routine,#my-plan) :is(.routine-action-input-wrap,.fitness-activity-combobox,.ex-picker-control){
  position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 50px!important;align-items:stretch!important;min-width:0!important;
}
:where(#routine,#my-plan) .routine-action-input-wrap>input,
:where(#routine,#my-plan) .fitness-activity-combobox>[data-activity-search],
:where(#routine,#my-plan) .ex-picker-control>.ex-search-input{
  min-width:0!important;min-height:50px!important;border-radius:14px 0 0 14px!important;border-right:0!important;box-sizing:border-box!important;
}
:where(#routine,#my-plan) :is(.routine-action-toggle,[data-activity-toggle],.ex-picker-toggle){
  position:relative!important;
  display:block!important;
  width:50px!important;
  min-width:50px!important;
  min-height:50px!important;
  padding:0!important;
  border:1px solid var(--bl-routine-accent,var(--accent,currentColor))!important;
  border-radius:0 14px 14px 0!important;
  background:var(--bl-routine-accent,var(--accent,var(--bl-routine-surface-strong)))!important;
  color:var(--accent-contrast,var(--bl-routine-text,currentColor))!important;
  font-size:0!important;
  line-height:0!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}
:where(#routine,#my-plan) :is(.routine-action-toggle,[data-activity-toggle],.ex-picker-toggle)::before{
  content:"";
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:10px!important;
  height:10px!important;
  border-right:2px solid currentColor!important;
  border-bottom:2px solid currentColor!important;
  transform:translate(-50%,-65%) rotate(45deg)!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
:where(#routine,#my-plan) :is(.routine-action-toggle,[data-activity-toggle],.ex-picker-toggle):hover,
:where(#routine,#my-plan) :is(.routine-action-toggle,[data-activity-toggle],.ex-picker-toggle):focus-visible{
  filter:brightness(.94);
}
:where(#routine,#my-plan) :is(.routine-action-menu,.fitness-activity-menu,.ex-picker-menu,[role="listbox"]){
  z-index:2147483000!important;opacity:1!important;pointer-events:auto!important;background-color:var(--bl-routine-menu,var(--card-bg,var(--filter-bg,Canvas)))!important;color:var(--bl-routine-menu-text,var(--ink,currentColor))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;
}

/* Week / Month always has room for the complete 18px labels. */
:where(#routine,#my-plan) :is(.routine-calendar-view-tabs,.fitness-calendar-view-tabs,.bl-routine-calendar-view-tabs){
  display:grid!important;grid-template-columns:repeat(2,minmax(96px,1fr))!important;width:204px!important;min-width:204px!important;max-width:204px!important;gap:4px!important;align-items:stretch!important;overflow:visible!important;
}
:where(#routine,#my-plan) :is(.routine-calendar-view-tabs,.fitness-calendar-view-tabs,.bl-routine-calendar-view-tabs)>button{
  box-sizing:border-box!important;width:100%!important;min-width:96px!important;max-width:none!important;height:auto!important;min-height:46px!important;padding:9px 14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;overflow:visible!important;line-height:1.2!important;border-radius:999px!important;font-size:18px!important;
}
:where(#routine,#my-plan) :is(.routine-calendar-controls,.fitness-calendar-controls,.bl-routine-calendar-controls){min-width:0!important}

/* Calendar cells contain only the number marker. Caption appears on hover/focus. */
:where(#routine,#my-plan) .bl-routine-calendar-markers{
  display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;margin-top:7px!important;position:relative!important;z-index:6!important;pointer-events:auto!important;
}
:where(#routine,#my-plan) .bl-routine-calendar-marker{
  appearance:none!important;-webkit-appearance:none!important;display:inline-grid!important;place-items:center!important;width:auto!important;min-width:34px!important;height:34px!important;padding:0 6px!important;border:1px solid var(--bl-routine-border,var(--border,currentColor))!important;border-radius:999px!important;background:var(--bl-routine-accent,var(--accent,currentColor))!important;color:var(--accent-contrast,var(--bl-routine-text,currentColor))!important;font:inherit!important;font-size:13px!important;font-weight:950!important;line-height:1!important;cursor:pointer!important;position:relative!important;
}
:where(#routine,#my-plan) .bl-routine-calendar-marker::after{
  content:attr(data-caption);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(340px,78vw);padding:8px 11px;border:1px solid var(--bl-routine-border,var(--border,currentColor));border-radius:10px;background:var(--bl-routine-menu,var(--card-bg,var(--filter-bg,Canvas)));color:var(--bl-routine-menu-text,var(--ink,currentColor));box-shadow:var(--shadow);font-size:15px;font-weight:750;line-height:1.35;white-space:pre-line;text-align:left;opacity:0;visibility:hidden;pointer-events:none;z-index:2147483001;
}
:where(#routine,#my-plan) .bl-routine-calendar-marker:hover::after,
:where(#routine,#my-plan) .bl-routine-calendar-marker:focus-visible::after{opacity:1;visibility:visible}
:where(#routine,#my-plan) .bl-routine-calendar-marker:hover,
:where(#routine,#my-plan) .bl-routine-calendar-marker:focus-visible{outline:none!important;box-shadow:0 0 0 4px var(--bl-routine-focus,var(--ring,transparent))!important}

/* Shared Log Date wording/spacing. */
:where(#routine,#my-plan) .bl-routine-log-date{
  display:grid!important;grid-template-columns:auto minmax(170px,220px)!important;align-items:center!important;gap:12px!important;margin:0!important;
}
:where(#routine,#my-plan) .bl-routine-log-date>span{white-space:nowrap!important;font-weight:850!important;margin:0!important}
:where(#routine,#my-plan) .bl-routine-log-date>input{width:100%!important;min-width:0!important;margin:0!important}

/* Skincare group completion. */
#routine .routine-log-group-head{display:flex!important;align-items:center!important;gap:12px!important}
#routine .routine-log-group-head>h3{margin:0!important;flex:1 1 auto!important}
#routine .bl-routine-group-complete{display:inline-grid!important;place-items:center!important;flex:0 0 auto!important;margin-left:auto!important;padding:0!important}
#routine .bl-routine-group-complete input{width:24px!important;height:24px!important;margin:0!important;cursor:pointer!important}

/* Shared Routine Plan row contract: title | count | actions. Counts cannot drift. */
:where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.bl-routine-entry-head){
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(92px,auto) auto!important;align-items:center!important;gap:14px!important;min-width:0!important;
}
:where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.bl-routine-entry-head)>:first-child{min-width:0!important}
:where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.bl-routine-entry-head)>:nth-last-child(2):not(:first-child){justify-self:end!important;text-align:right!important}
:where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.bl-routine-entry-head)>:last-child{justify-self:end!important}
:where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.fitness-activity-item-head,.bl-routine-entry-head) :is(h2,h3,h4,p,strong,span,label,button){margin-top:0!important;margin-bottom:0!important;align-self:center}
:where(#routine,#my-plan) :is(.routine-plan-group-body,.fitness-routine-plan-panel,.fitness-activity-list){min-width:0!important}
:where(#routine,#my-plan) .bl-routine-entry-actions{display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;margin-left:auto!important}
:where(#routine,#my-plan) .bl-fitness-remove-confirm{display:inline-flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important}

/* Skincare comprehensive Summary is the shared Summary silhouette. */
:where(#routine,#my-plan) :is(.routine-summary-group,.fitness-summary-group){display:grid!important;gap:13px!important;min-width:0!important}
:where(#routine,#my-plan) :is(.routine-summary-item,.fitness-exercise-summary-item){display:grid!important;gap:14px!important;min-width:0!important}
:where(#routine,#my-plan) .bl-routine-summary-grid{display:grid!important;grid-template-columns:minmax(250px,.8fr) minmax(0,1.4fr)!important;gap:14px!important;align-items:stretch!important}
:where(#routine,#my-plan) .bl-routine-summary-section{min-width:0!important}

/* Summary filters. */
:where(#routine,#my-plan) .bl-routine-summary-filter,
#my-plan [data-fitness-routine-panel="summary"] label:has(#fitnessSummaryGroupFilter){
  display:grid!important;grid-template-columns:minmax(220px,620px)!important;gap:7px!important;width:100%!important;margin:0 0 16px!important;
}

/* One themed visibility control in the Public Routines header. */
:where(#routine,#my-plan) .bl-routine-visibility-control{
  display:grid!important;grid-template-columns:auto minmax(150px,210px)!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;margin:0 0 0 auto!important;padding:0!important;border:0!important;background:transparent!important;
}
:where(#routine,#my-plan) .bl-routine-visibility-control>span{font-weight:850!important;white-space:nowrap!important}

/* Public Routine reuses owner-facing My Routine classes in View Only mode. */
:where(#routine,#my-plan) .bl-public-routine-viewonly{display:grid!important;gap:16px!important;margin-top:16px!important;min-width:0!important}
:where(#routine,#my-plan) .bl-public-routine-viewonly-nav{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
:where(#routine,#my-plan) .bl-public-routine-viewonly-panel{display:grid!important;gap:16px!important;min-width:0!important}
:where(#routine,#my-plan) .bl-public-profile-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:end!important}
:where(#routine,#my-plan) .bl-public-readonly-check input[type="checkbox"]{opacity:1!important;pointer-events:none!important;cursor:default!important}
:where(#routine,#my-plan) .bl-public-readonly-field :is(input,textarea,select){pointer-events:none!important}

#my-plan .bl-routine-preserved-log{display:grid;gap:10px}

/* Fitness Number Of Days optional range. */
#my-plan .fitness-frequency-grid{display:grid!important;grid-template-columns:minmax(88px,130px) 22px minmax(130px,180px)!important;align-items:end!important;justify-content:start!important;gap:8px!important}
#my-plan .fitness-frequency-grid>.field-stack{min-width:0!important;margin:0!important}
#my-plan .fitness-frequency-grid .field-stack:has(#frequencyRangeMax)>span{display:none!important}
#my-plan .fitness-frequency-grid .bl-frequency-range-dash{display:grid!important;place-items:center!important;min-height:50px!important;font-size:20px!important;font-weight:850!important}
#my-plan .fitness-frequency-grid select{width:100%!important}

/* Fitness Routine Groups use shared surfaces and the Fitness palette. */
#my-plan .bl-v4-group-card{display:grid!important;gap:12px!important;width:100%!important;min-width:0!important;margin:0 0 14px!important;padding:14px!important;border:1px solid var(--bl-routine-border,var(--border,currentColor))!important;border-radius:16px!important;background:var(--bl-routine-surface,var(--filter-bg,transparent))!important;color:var(--bl-routine-text,var(--ink,currentColor))!important;box-sizing:border-box!important}
#my-plan .bl-v4-group-card>div:first-child{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important}
#my-plan .bl-v4-group-card>div:first-child :is(h2,h3,h4,p){margin:0!important}
#my-plan .bl-v4-group-create{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:end!important}
#my-plan .bl-v4-group-list,#my-plan .bl-v4-assignment-list{display:grid!important;gap:8px!important}
#my-plan .bl-v4-group-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;padding:9px 10px!important;border:1px solid var(--bl-routine-border,var(--border,currentColor))!important;border-radius:13px!important;background:var(--bl-routine-surface-strong,var(--card-bg,transparent))!important}
#my-plan .bl-v4-assignment-row{padding:8px 0!important}

@media(max-width:820px){
  :where(#routine,#my-plan) .bl-routine-summary-grid{grid-template-columns:1fr!important}
  :where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.bl-routine-entry-head){grid-template-columns:minmax(0,1fr) auto!important}
  :where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.bl-routine-entry-head)>:nth-child(2){grid-column:1;justify-self:start!important;text-align:left!important}
  :where(#routine,#my-plan) :is(.routine-plan-group-head,.routine-group-row-head,.fitness-routine-group-bar,.bl-routine-entry-head)>:last-child{grid-column:2;grid-row:1 / span 2}
}
@media(max-width:760px){
  :where(#routine,#my-plan) .bl-routine-visibility-control{grid-template-columns:1fr!important;margin-left:0!important;width:100%!important}
  :where(#routine,#my-plan) .bl-public-profile-row{grid-template-columns:1fr!important}
  :where(#routine,#my-plan) .bl-routine-log-date{grid-template-columns:1fr!important;gap:6px!important}
}
@media(max-width:700px){#my-plan .bl-v4-group-create{grid-template-columns:1fr!important}}
@media(max-width:520px){
  :where(#routine,#my-plan) :is(.routine-calendar-view-tabs,.fitness-calendar-view-tabs,.bl-routine-calendar-view-tabs){width:190px!important;min-width:190px!important;max-width:190px!important;grid-template-columns:repeat(2,minmax(89px,1fr))!important}
  :where(#routine,#my-plan) :is(.routine-calendar-view-tabs,.fitness-calendar-view-tabs,.bl-routine-calendar-view-tabs)>button{min-width:89px!important;padding-inline:10px!important}
  #my-plan .fitness-frequency-grid{grid-template-columns:minmax(82px,1fr) 18px minmax(120px,1.35fr)!important}
}