/* Screenshot-reported responsive and palette repairs. Presentation only.
   Scoped selectors preserve timer, room, task and sharing behavior. */

/* Explore: keep each feature's action and sign-in note WITHIN its card.
   The card must grow with translated labels, large text and narrow widths. */
html[data-theme] body.group-timer-page .st-explore-dialog,
html[data-theme] body.group-timer-page .st-explore-dialog .st-explore-feature{
  color:var(--sc-text);
  border-color:var(--sc-border);
}
html[data-theme] body.group-timer-page .st-explore-dialog{
  background:var(--sc-surface)!important;
  max-width:min(840px,calc(100vw - 24px));
}
html[data-theme] body.group-timer-page #stExploreResults{
  align-content:start;
  align-items:stretch;
  padding-bottom:24px;
  overflow-x:hidden;
}
html[data-theme] body.group-timer-page #stExploreResults .st-explore-feature{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  min-width:0;
  min-height:152px;
  height:auto!important;
  overflow:visible;
  padding:16px;
  background:var(--sc-surface-raised)!important;
  border:1px solid var(--sc-border)!important;
}
html[data-theme] body.group-timer-page #stExploreResults .st-explore-feature-body{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  gap:0;
}
html[data-theme] body.group-timer-page #stExploreResults .st-explore-feature :is(h3,p){
  position:static!important;
  width:100%;
  height:auto!important;
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
}
html[data-theme] body.group-timer-page #stExploreResults .st-explore-feature h3{
  margin:0 0 4px!important;
  font-size:clamp(14px,1.2vw,16px)!important;
  line-height:1.35!important;
}
html[data-theme] body.group-timer-page #stExploreResults .st-explore-feature p{
  margin:0 0 11px!important;
  font-size:13px!important;
  line-height:1.45!important;
  color:var(--sc-muted)!important;
}
html[data-theme] body.group-timer-page #stExploreResults .st-explore-feature-link{
  position:static!important;
  display:inline-flex!important;
  flex:0 0 auto;
  align-self:flex-start;
  justify-content:center;
  align-items:center;
  width:auto!important;
  height:auto!important;
  min-width:0;
  min-height:36px!important;
  max-width:100%;
  margin:0!important;
  padding:7px 13px!important;
  box-sizing:border-box!important;
  border:1px solid var(--sc-button-border)!important;
  border-radius:9px!important;
  background:var(--sc-button-bg)!important;
  color:var(--sc-button-text)!important;
  font-size:13px!important;
  line-height:1.25!important;
  text-decoration:none!important;
  white-space:normal!important;
}
html[data-theme] body.group-timer-page #stExploreResults .st-explore-note{
  display:block!important;
  position:static!important;
  width:100%;
  max-width:100%;
  margin:7px 0 0!important;
  font-size:12px!important;
  line-height:1.4!important;
  color:var(--sc-muted)!important;
  overflow-wrap:anywhere;
}
@media(max-width:700px){
 html[data-theme] body.group-timer-page .st-explore-dialog{
   width:100%;max-width:100%;margin:auto 0 0;
 }
 html[data-theme] body.group-timer-page #stExploreResults .st-explore-feature{
   min-height:0;padding:13px;
 }
}

/* Timetable start date: consistent grid sizing and a non-overlapping divider. */
html[data-theme] body#studyTickApp .schedule-date-card{
  box-sizing:border-box;min-width:0;overflow:visible;
  background:var(--sc-surface)!important;
  border:1px solid var(--sc-border)!important;
}
html[data-theme] body#studyTickApp .schedule-date-card .date{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"label action" "input action"!important;
  align-items:center!important;
  gap:8px 15px!important;
  min-width:0;min-height:0;height:auto!important;
  margin:0!important;padding:0 0 18px!important;
  overflow:visible!important;
  border:0!important;
  border-bottom:1px solid var(--sc-border)!important;
  border-radius:0!important;
}
html[data-theme] body#studyTickApp .schedule-date-card .date label{
  grid-area:label!important;
  min-width:0;
  margin:0!important;
  color:var(--sc-muted)!important;
}
html[data-theme] body#studyTickApp .schedule-date-card .date input{
  box-sizing:border-box!important;
  grid-area:input!important;
  width:min(100%,250px)!important;
  min-width:0!important;
  height:auto!important;
  min-height:46px!important;
  margin:0!important;
  padding:9px 12px!important;
  border:1px solid var(--sc-control-border)!important;
  border-radius:10px!important;
  background:var(--sc-surface-raised)!important;
  color:var(--sc-text)!important;
}
html[data-theme] body#studyTickApp .schedule-date-card .date #today{
  grid-area:action!important;
  align-self:center!important;
  justify-self:end!important;
  min-height:44px!important;
  max-width:100%;
  width:auto!important;
  margin:0!important;
  padding:9px 15px!important;
  background:var(--sc-button-bg)!important;
  border:1px solid var(--sc-button-border)!important;
  color:var(--sc-button-text)!important;
  white-space:normal;
}
@media(max-width:540px){
 html[data-theme] body#studyTickApp .schedule-date-card .date{
   grid-template-columns:minmax(0,1fr) auto!important;
   grid-template-areas:"label label" "input action"!important;
 }
 html[data-theme] body#studyTickApp .schedule-date-card .date #today{
   padding-inline:10px!important;
 }
}
@media(max-width:360px){
 html[data-theme] body#studyTickApp .schedule-date-card .date{
   grid-template-columns:minmax(0,1fr)!important;
   grid-template-areas:"label" "input" "action"!important;
 }
 html[data-theme] body#studyTickApp .schedule-date-card .date input,
 html[data-theme] body#studyTickApp .schedule-date-card .date #today{
   width:100%!important;justify-self:stretch!important;
 }
}

/* Today timeline: status and completion buttons must stay in the row.
   Preserve semantic statuses, original task order and finish()/undo actions. */
html[data-theme] body#studyTickApp .today-timeline-list{
  min-width:0;max-width:100%;
}
html[data-theme] body#studyTickApp .today-timeline-item{
  display:grid;
  grid-template-columns:minmax(62px,82px) 16px minmax(0,1fr) minmax(116px,142px);
  align-items:start;
  gap:8px;
  min-width:0;
  max-width:100%;
  height:auto;
}
html[data-theme] body#studyTickApp .today-timeline-item .today-timeline-body{
  min-width:0;
  max-width:100%;
  margin-bottom:8px;
}
html[data-theme] body#studyTickApp .today-timeline-item .today-timeline-actions{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:flex-start;
  gap:6px!important;
  grid-column:4;
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  margin:0 0 8px!important;
}
html[data-theme] body#studyTickApp .today-timeline-item :is(.today-complete-btn,.today-undo-btn){
  box-sizing:border-box;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:auto;
  min-width:0;
  max-width:100%!important;
  min-height:36px;
  margin:0!important;
  padding:7px 10px!important;
  border:1px solid var(--sc-button-border)!important;
  border-radius:9px!important;
  background:var(--sc-button-bg)!important;
  color:var(--sc-button-text)!important;
  font-size:12px!important;
  line-height:1.3!important;
  white-space:normal!important;
  text-align:center!important;
  overflow-wrap:anywhere;
}
html[data-theme] body#studyTickApp .today-timeline-item .today-timeline-status{
  display:inline-block;
  width:max-content;
  max-width:100%;
  margin:0!important;
  text-align:center;
  white-space:normal;
}
@media(max-width:950px){
 html[data-theme] body#studyTickApp .today-timeline-item{
  grid-template-columns:70px 16px minmax(0,1fr);
  gap:7px;
 }
 html[data-theme] body#studyTickApp .today-timeline-item .today-timeline-actions{
  grid-column:3!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  width:100%!important;
  margin:0 0 13px!important;
 }
 html[data-theme] body#studyTickApp .today-timeline-item .today-timeline-body{
  grid-column:3;
  margin:0!important;
 }
}
@media(max-width:480px){
 html[data-theme] body#studyTickApp .today-timeline-item{
   grid-template-columns:54px 14px minmax(0,1fr);
   gap:6px;
 }
 html[data-theme] body#studyTickApp .today-timeline-item .today-timeline-actions{
  justify-content:flex-start!important;
 }
}

/* Group Timer main navigation: no memorandum button clipping and no
   mismatched active-state colors in any selected palette. */
html[data-theme] body.group-timer-page .group-social-actions{
  min-width:0;max-width:100%;flex-wrap:wrap;
}
html[data-theme] body.group-timer-page .group-social-actions .group-social-nav-btn{
  box-sizing:border-box;
  flex:0 1 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;max-width:100%;
  min-height:44px;
  padding:7px 12px 7px 7px;
  background:var(--sc-button-bg)!important;
  color:var(--sc-button-text)!important;
  border:1px solid var(--sc-button-border)!important;
  box-shadow:none!important;
  white-space:normal;
}
html[data-theme] body.group-timer-page .group-social-actions .group-social-nav-label{
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.3;
  text-align:start;
}
html[data-theme] body.group-timer-page .group-social-actions .group-social-icon-badge{
  flex:0 0 32px;
  width:32px;height:32px;
  background:var(--sc-accent-soft)!important;
  color:var(--sc-accent-strong)!important;
  border:1px solid var(--sc-border)!important;
}
html[data-theme] body.group-timer-page .group-social-actions .group-social-nav-btn:hover{
  background:var(--sc-button-bg-hover)!important;
  border-color:var(--sc-accent-strong)!important;
}
@media(max-width:640px){
 html[data-theme] body.group-timer-page .group-page-intro-row{
  grid-template-columns:minmax(0,1fr)!important;
 }
 html[data-theme] body.group-timer-page .group-social-actions{
  width:100%;justify-content:flex-start;gap:8px;
 }
 html[data-theme] body.group-timer-page .group-social-actions .group-social-nav-btn{
  flex:1 1 150px;justify-content:flex-start;
 }
}

/* Invite people: fit the full link input beside a copy action on wide screens,
   gracefully stack on phones, and use the currently selected theme's surfaces. */
html[data-theme] body.group-timer-page .group-invite-card,
html[data-theme] body.group-timer-page .group-invite-content{
  min-width:0;max-width:100%;
}
html[data-theme] body.group-timer-page .group-invite-content :is(.group-copy,.group-share-actions){
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:8px;
  min-width:0;
  max-width:100%;
}
/* A full-width read-only link avoids the cropped URL shown beside a wide
   Copy button in narrow invitation panels. The copy action remains available. */
html[data-theme] body.group-timer-page .group-invite-content .group-copy{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:stretch;
  align-items:start;
}
html[data-theme] body.group-timer-page .group-invite-content .group-copy button{
  justify-self:start;
}
html[data-theme] body.group-timer-page .group-invite-content .group-copy input{
  box-sizing:border-box;
  flex:1 1 180px;
  width:100%;min-width:0;
  max-width:100%;
  min-height:44px;
  margin:0!important;
  padding:10px 11px;
  border:1px solid var(--sc-control-border)!important;
  background:var(--sc-surface-raised)!important;
  color:var(--sc-text)!important;
  font-size:12px;
}
html[data-theme] body.group-timer-page .group-invite-content #groupInvitationMessage{
  box-sizing:border-box;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:176px;
  margin:0 0 12px!important;
  padding:12px 13px!important;
  border:1px solid var(--sc-control-border)!important;
  border-radius:10px;
  background:var(--sc-surface-raised)!important;
  color:var(--sc-text)!important;
  font:400 13px/1.55 Inter,system-ui,sans-serif!important;
  overflow:auto;
  resize:vertical;
  scrollbar-width:thin;
}
html[data-theme] body.group-timer-page .group-invite-content :is(
 #groupCopy,#groupShare,#groupCopyMessage,#groupShowCode,#groupCopyCode
){
  box-sizing:border-box;
  flex:0 1 auto;
  max-width:100%;
  min-height:44px;
  padding:9px 13px!important;
  border:1px solid var(--sc-button-border)!important;
  border-radius:10px!important;
  background:var(--sc-button-bg)!important;
  color:var(--sc-button-text)!important;
  font-size:13px!important;
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}
html[data-theme] body.group-timer-page .group-invite-content #groupShare{
  display:block;width:100%;margin:10px 0 14px!important;
}
html[data-theme] body.group-timer-page .group-invite-content :is(
 #groupCopy,#groupShare,#groupCopyMessage,#groupShowCode,#groupCopyCode
):hover:not(:disabled){
  background:var(--sc-button-bg-hover)!important;
}
html[data-theme] body.group-timer-page .group-invite-content label{
  color:var(--sc-text)!important;
}
@media(max-width:580px){
 html[data-theme] body.group-timer-page .group-invite-content .group-copy{
  flex-direction:column;
 }
 html[data-theme] body.group-timer-page .group-invite-content .group-copy input{
  flex:0 0 auto;width:100%;
 }
 html[data-theme] body.group-timer-page .group-invite-content .group-copy button{
  width:100%;
 }
 html[data-theme] body.group-timer-page .group-invite-content .group-share-actions button{
  flex:1 1 100%;
 }
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.group-timer-page .st-explore-dialog *,
 html[data-theme] body#studyTickApp .today-timeline-actions *{
  animation:none!important;
  transition:none!important;
 }
}


/* Named color palettes supersede fixed category greens/purples. Keep separate
   subtle task and break surfaces while leaving status semantics intact. */
html[data-color-palette] body#studyTickApp .today-timeline-item[class*="kind-"] .today-timeline-body{
  background:var(--sc-surface-raised)!important;
  border-color:var(--sc-border)!important;
  border-inline-start:3px solid var(--sc-accent-strong)!important;
  color:var(--sc-text)!important;
}
html[data-color-palette] body#studyTickApp .today-timeline-item.kind-break .today-timeline-body{
  background:var(--sc-surface-soft)!important;
  border-inline-start-color:var(--sc-control-border)!important;
}
html[data-color-palette] body#studyTickApp .today-timeline-item[class*="kind-"] .today-timeline-status{
  background:var(--sc-accent-soft)!important;
  color:var(--sc-accent-strong)!important;
}
html[data-color-palette] body#studyTickApp .today-timeline-item.is-overdue:not(.is-current) .today-timeline-status{
  background:var(--sc-surface-soft)!important;
  color:var(--sc-muted)!important;
}
html[data-color-palette] body#studyTickApp .today-timeline-item .today-timeline-task{
  color:var(--sc-text)!important;
}
html[data-color-palette] body#studyTickApp .today-timeline-item .today-timeline-target{
  color:var(--sc-muted)!important;
}