/* TFH · breathing-room pass · 2026-10-23
   Scoped to the experimental resident UI. All flows and data are untouched. */
.resident-shell{
  --tf-card-gutter:clamp(18px,4.3vw,24px);
  --tf-card-gap:clamp(12px,2.4vw,18px);
  --tf-section-gap:clamp(22px,4vw,34px);
}
.resident-shell :is(.resident-event-card,.resident-notification,.resident-support-link,.resident-journal-entry,.resident-journey-item,.resident-learn-card,.resident-group-card,.resident-collection,.resident-progress-card,.resident-showcase-settings,.guidance-tutorial-card,.resident-qr-card,.resident-action-needed,.resident-privacy-panel,.resident-about-card,.resident-support-card,.guidance-feature,.guidance-moving-callout,.guidance-video){
  box-sizing:border-box!important;
  min-width:0;
}
/* Every event is a raised card, including agenda, month day, profile and journey variants.
   Original agenda stylesheet set horizontal padding to zero after adding the card surface. */
.resident-shell .resident-event-card,
.resident-shell .resident-calendar-day .resident-event-card,
.resident-shell .resident-day-agenda .resident-event-card,
.resident-shell .hub-next .resident-event-card,
.resident-shell .resident-journey .resident-event-card{
  padding:clamp(16px,3vw,22px) var(--tf-card-gutter)!important;
  column-gap:clamp(10px,2.8vw,16px)!important;
  row-gap:10px!important;
  border-radius:22px!important;
  width:100%;
  max-width:100%;
  text-decoration:none;
}
.resident-shell .resident-event-card .resident-event-body{
  min-width:0!important;flex:1 1 auto!important;
  padding-inline:0!important;row-gap:7px!important;
}
.resident-shell .resident-event-card>.icon{flex-shrink:0!important;margin-left:auto!important;}
.resident-shell .resident-calendar-day .resident-tag{padding:5px 11px!important;border:1px solid #d5e7ee!important}
.resident-shell .resident-calendar-day{display:grid;gap:12px;}
.resident-shell .resident-calendar-day h2{margin:20px 0 2px!important;}
.resident-shell .resident-calendar-day:first-child h2{margin-top:6px!important;}
.resident-shell .resident-day-agenda{padding-block:8px 10px!important;}
.resident-shell .resident-day-agenda h2{margin-bottom:15px!important}
.resident-shell .resident-calendar-panel{padding-bottom:15px!important;}
/* Notifications had the same 0px inline padding issue. */
.resident-shell .resident-notification{
  padding:clamp(17px,3vw,22px) var(--tf-card-gutter)!important;
  gap:clamp(10px,2.4vw,16px)!important;
  border-radius:22px!important;
  margin-block:12px!important;
}
.resident-shell .resident-notification>span:nth-child(2){min-width:0!important;}
.resident-shell .resident-notification>.icon{margin-left:auto!important;flex-shrink:0!important}
.resident-shell .resident-action-needed{
  padding:clamp(19px,3vw,24px) var(--tf-card-gutter)!important;
}
.resident-shell .resident-notifications-panel{padding-inline:clamp(12px,3vw,24px)!important;}
/* Raised FAQ and Moving On blocks must inset the actual text, not only their outer wrappers. */
.resident-shell .guidance-question>summary,
.resident-shell .guidance-move-step>summary{
  padding:18px var(--tf-card-gutter)!important;
  line-height:1.55!important;
}
.resident-shell .guidance-question>.guidance-answer,
.resident-shell .guidance-pathway>li .guidance-answer{
  padding:2px var(--tf-card-gutter) 22px!important;
  max-width:none;
}
.resident-shell .guidance-question>.resident-text-link{
  margin-inline:var(--tf-card-gutter)!important;
  margin-bottom:18px!important;
}
.resident-shell .guidance-question,.resident-shell .guidance-pathway>li{
  overflow:visible!important;
  margin-block:11px!important;
}
.resident-shell .guidance-pathway{
  gap:12px!important;
  border-top:0!important;
}
.resident-shell .guidance-question[open],
.resident-shell .guidance-pathway>li:has(details[open]){
  box-shadow:var(--tf-elevate)!important;
}
.resident-shell .guidance-tutorial-card,
.resident-shell .guidance-feature,
.resident-shell .guidance-moving-callout,
.resident-shell .guidance-video{
  padding:var(--tf-card-gutter)!important;
}
/* Profile, collection and progress surfaces. */
.resident-shell .resident-progress-categories section{
  min-width:0!important;
  padding:20px var(--tf-card-gutter)!important;
  border-radius:20px!important;
  border:1px solid #e4f5fa!important;
  background:linear-gradient(140deg,#d7e9f0,#bbd7e1)!important;
  box-shadow:var(--tf-elevate)!important;
}
.resident-shell .hub-quick-actions a{
  padding:13px 16px!important;min-height:50px!important;
  justify-content:flex-start!important;column-gap:11px!important;
}
.resident-shell .hub-profile-stats a{
  padding:15px 12px!important;
}
.resident-shell .hub-summary,
.resident-shell .hub-next{
  padding:clamp(18px,3vw,24px)!important;
}
.resident-shell .resident-journey-item,
.resident-shell .resident-journal-entry{
  padding:var(--tf-card-gutter)!important;
}
.resident-shell .resident-group-card-body{
  padding:var(--tf-card-gutter)!important;
}
.resident-shell .resident-learn-card,
.resident-shell .resident-collection{
  padding:var(--tf-card-gutter)!important;
}
.resident-shell .resident-support-link,
.resident-shell .resident-note-cta{
  padding:18px var(--tf-card-gutter)!important;
}
/* These were given sculpted card backgrounds but kept zero inline padding. */
.resident-shell .resident-showcase-settings{
  padding:22px var(--tf-card-gutter)!important;
  margin-block:22px!important;
}
.resident-shell .resident-qr-card{
  padding:24px var(--tf-card-gutter)!important;
  overflow:hidden;
}
.resident-shell .resident-qr-card img{
  width:min(100%,260px)!important;height:auto!important;
}
.resident-shell .resident-confirmation{
  padding:30px var(--tf-card-gutter)!important;
}
.resident-shell .resident-accent-preview,
.resident-shell .resident-accent-picker-row{
  padding:16px var(--tf-card-gutter)!important;
}
.resident-shell .resident-settings .resident-toggle-row,
.resident-shell .resident-note-form .resident-toggle-row{
  padding:14px 12px!important;min-width:0;
}
.resident-shell .resident-settings fieldset,
.resident-shell .resident-note-form fieldset{min-width:0;}
.resident-shell .resident-category-list label>span{
  padding:15px 16px!important;gap:14px!important;
}
/* Keep text within its own surface even when a resident selects larger text. */
.resident-shell :is(.resident-event-body,.resident-notification>span:nth-child(2),.resident-support-link>span:nth-child(2),.resident-group-card-body,.resident-learn-card>div,.guidance-tutorial-card>span:nth-child(2)){min-width:0!important;overflow-wrap:anywhere}
.resident-shell :is(.resident-event-card,.resident-notification,.guidance-question,.guidance-pathway>li,.resident-qr-card,.resident-showcase-settings) :is(h2,h3,p,strong,small){max-width:100%;}
.resident-shell .resident-section{margin-block:var(--tf-section-gap)!important;}
@media(min-width:700px){
  .resident-shell .resident-calendar-day{gap:14px}
  .resident-shell .resident-event-card,.resident-shell .resident-calendar-day .resident-event-card{padding:22px 26px!important}
}
@media(max-width:400px){
  .resident-shell{--tf-card-gutter:18px}
  .resident-shell .resident-notifications-panel{padding-inline:8px!important}
  .resident-shell .resident-event-card{column-gap:9px!important}
  .resident-shell .resident-event-card .resident-event-date{flex-basis:37px!important;width:37px!important}
  .resident-shell .resident-event-card .resident-event-body>span:last-child{font-size:.83rem!important}
}
@media(prefers-reduced-motion:reduce){
  .resident-shell :is(.resident-event-card,.resident-notification,.guidance-question,.guidance-pathway>li){transition:none!important}
}