/* Owner corrections, 2026-10-30. Existing native spacing and brand colors. */
/* The actual V3.3 shell owns the viewport; only its workspace moves. */
body:has(#app > .app) { height:100dvh; min-height:0; overflow:hidden; }
.app { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.app > .product-header { position:relative; top:auto; flex:0 0 auto; }
.app > .shell { flex:1 1 0; min-height:0; overflow:hidden; }
.app .rail { position:static; height:auto; min-height:0; overflow:hidden; }
.app .rail > .product-name { flex:0 0 auto; padding-bottom:4px; }
.app .rail-scroll { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:14px; }
.app .rail-bottom { flex:0 0 auto; margin-top:0; }
.app .workspace { min-height:0; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:12px 24px; }
.app .workspace:focus-visible { outline:3px solid var(--blue); outline-offset:-3px; }
.app .canvas { padding-bottom:24px; }
.app .card[data-sticky-card] { isolation:isolate; }
.app .card > .fwo-sticky-header {
  position:sticky; top:12px; z-index:2; background:var(--panel,#fff);
  box-shadow:0 -12px 0 var(--panel,#fff),0 8px 0 var(--panel,#fff);
}
@media(max-width:980px) {
  .app > .mobile-nav { position:relative; inset:auto; flex:0 0 auto; }
}
.app { --fwo-action-ink:#314daf; --fwo-action-text:#2845a6; --theralab-chrome-footer-height:0px; }
#modal { --fwo-action-ink:#314daf; --fwo-action-text:#2845a6; }
.app .canvas { max-width:1280px; width:100%; margin-inline:auto; box-sizing:border-box; }
.app .rail .nav button,#modal .nav button { font-size:15px; font-weight:650; line-height:1.4; }
.app .rail .navlabel { font-size:12px; letter-spacing:.09em; }
.app .rail-secondary { font-size:14px; }
.app :is(.btn,.header-account-button),#modal :is(.btn,.modal-close) {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; max-width:100%; min-height:44px; line-height:1.4;
  text-align:center; white-space:normal; overflow-wrap:anywhere;
  color:var(--fwo-action-text); border-color:var(--blue,#4e72ff);
}
.app .btn.primary,#modal .btn.primary {
  /* Existing native blue ink gives small white labels sufficient contrast. */
  background:var(--fwo-action-ink); border-color:var(--fwo-action-ink); color:#fff;
}
.app .btn.soft,#modal .btn.soft { background:var(--blue-soft); color:var(--fwo-action-text); }
.app .btn.danger,#modal .btn.danger { background:#fff; color:var(--fwo-action-text); border-color:var(--blue); }
.app :is(.btn,.header-account-button):hover:not(:disabled),#modal :is(.btn,.modal-close):hover:not(:disabled) { border-color:var(--fwo-action-ink); }
.app .btn:not(.primary):hover:not(:disabled),#modal .btn:not(.primary):hover:not(:disabled) { background:var(--blue-soft); }
.app :is(.actions,.page-actions,.item-actions,.focus-actions,.activity-actions),#modal :is(.actions,.form-actions,.item-actions) {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.app .card > .actions,.app .card > .btn,.app .card > p + .item-actions { margin-top:16px; }
.app .card > .helper { margin:8px 0 0; }
.app .card > .section-head { align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.app .item { gap:16px; }
.app .item > div:first-child { min-width:0; }
.app .card > .item-list,.app .card > .field { margin-top:16px; }
.app .canvas > .card + .card { margin-top:16px; }
.app .support-card .actions { margin-top:16px; }
#modal .form-actions { margin-top:12px; padding-top:4px; }
#modal .picker-trigger { min-width:0; }
#modal .picker-trigger > span:first-child { min-width:0; overflow-wrap:anywhere; }
.app .picker-list button,#modal .picker-list button { min-height:44px; }
.picker-hint { flex-shrink:0; font-size:12px; font-weight:650; color:var(--fwo-action-ink,#314daf); }
.app details > summary,#modal details > summary {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:44px; cursor:pointer; list-style:none; color:var(--fwo-action-text);
}
.app details > summary::marker,#modal details > summary::marker { content:''; }
.app details > summary::-webkit-details-marker,#modal details > summary::-webkit-details-marker { display:none; }
.disclosure-state { flex-shrink:0; font-size:13px; font-weight:650; color:var(--fwo-action-ink); }
.app details[open] > summary,#modal details[open] > summary { margin-bottom:16px; }
.app :is(button,a,summary,input,textarea):focus-visible,#modal :is(button,a,summary,input,textarea):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.learning-content { display:grid; gap:16px; }
.learning-content > * { min-width:0; margin-block:0; }
.learning-content .daily-learning + .card { margin-top:0; }
.learning-views { align-items:stretch; gap:10px; margin-bottom:16px; }
.learning-pace { gap:10px; margin:0 0 16px; }
.preparation-list { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:0; margin:0; }
.preparation-list h3 { font-size:14px; font-weight:650; line-height:1.4; margin:0 0 6px; }
.preparation-list p { font-size:14px; line-height:1.5; color:var(--muted); margin:0; max-width:45ch; }
.app .preparation-card > .preparation-next { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); max-width:none; }
.today-grid .preparation-list { grid-template-columns:minmax(0,1fr); gap:16px; }
.activity-panel,.clinical-panel { max-width:none; }
.activity-story,.activity-panel > p,.clinical-panel > p { max-width:75ch; }
.clinical-transfer { border-left:0; padding-left:0; }
.clinical-panel :is(button,summary,textarea):focus-visible { outline-color:var(--blue); }
@media(max-width:768px) {
  .preparation-list { grid-template-columns:minmax(0,1fr); gap:16px; }
  .app .section-head .btn { flex-shrink:0; }
  .app .item { flex-wrap:wrap; }
}
@media(max-width:620px) {
  .learning-views .btn { flex:1 1 130px; min-width:0; }
  .app .item-actions { justify-content:flex-start; }
  .app .page-actions { width:100%; }
  #modal .form-actions .btn { flex:1 1 100px; }
  .app .card > .actions .btn { flex:0 1 auto; }
}

/* Today owns planning; short cards follow their content instead of stretching. */
.app .today-grid,.app .rotation-columns { align-items:start; }
.app .today-grid > .stack { align-content:start; min-width:0; }
.app .today-agenda,.app .daily-reflection { min-height:0; }
.app .today-agenda h2,.app .daily-reflection h2,.app .reflection-history h2 { font-size:20px; line-height:1.35; margin:0; }
.app .agenda-group { margin-top:20px; }
.app .agenda-group > h3 { font-size:14px; line-height:1.45; font-weight:650; margin:0 0 10px; }
.app .agenda-count { color:var(--muted); margin-left:4px; font-weight:400; }
.app .agenda-group > .helper { margin:0; }
.app .agenda-overflow,.app .agenda-later { margin-top:12px; }
.app .agenda-later { border-top:1px solid var(--line); padding-top:8px; }
.app .agenda-item { grid-template-columns:minmax(0,1fr) auto; gap:16px; }
.app .agenda-item h4 { overflow-wrap:anywhere; }
.app .agenda-item .item-actions { max-width:250px; }
.app .daily-reflection > p { margin:0; font-size:14px; line-height:1.55; color:var(--muted); }
.app .daily-reflection > ul { margin:12px 0 0; padding-left:20px; font-size:14px; line-height:1.65; }
.app .rotation-columns > .card { min-width:0; align-self:start; }
.app .milestone-item { grid-template-columns:minmax(0,1fr); gap:12px; }
.app .milestone-item h4,.app .milestone-item p { overflow-wrap:anywhere; }
.app .milestone-item time { white-space:nowrap; }
.app .milestone-item .item-actions { width:100%; justify-content:flex-start; gap:8px; }
.app .milestone-item .btn { flex:0 1 auto; }
.app .reflection-entry { border:1px solid var(--line); border-radius:12px; padding:8px 14px; }
.app .reflection-answer { margin:14px 0; }
.app .reflection-answer h3 { font-size:14px; line-height:1.45; margin:0 0 6px; }
.app .reflection-answer p { font-size:14px; line-height:1.55; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
#modal #milestone-form .checkrow { min-height:0; margin:0; align-items:center; font-size:14px; }
#modal #milestone-form .checkrow input { margin:0; }
#modal #milestone-form .form-actions { margin-top:8px; }
#modal #daily-reflection-form textarea { min-height:82px; }
#modal #journal-error { margin:0; }
@media(max-width:1200px) {
  .app .agenda-item { grid-template-columns:minmax(0,1fr); }
  .app .agenda-item .item-actions { max-width:none; justify-content:flex-start; }
}
@media(max-width:620px) {
  .app .today-agenda h2,.app .daily-reflection h2,.app .reflection-history h2 { font-size:18px; }
  .app .milestone-item .item-actions { gap:8px; }
  .app .agenda-group { margin-top:16px; }
}

/* Preserve native hidden state even when button display styles apply. */
.form [hidden] { display: none !important; }

/* Canonical outer chrome is outside the product rail and scrollable workspace. */
#app>.app>[data-theralab-header]{flex:0 0 var(--theralab-chrome-header-height)}
#app>.app>.shell{min-height:0;isolation:isolate;max-height:calc(100dvh - var(--theralab-chrome-header-height))}
#app>.app>.mobile-nav{position:relative;z-index:20}
#app>.fieldworkos-auth-frame>.auth-shell{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 auto;padding-block:28px 36px;max-height:calc(100dvh - var(--theralab-chrome-header-height))}
.fieldworkos-product-label{margin:0 0 18px;font-size:22px;line-height:1.3;font-weight:700}
body:has(#app>.app)>.toast-region{bottom:18px}
@media(max-width:980px){body:has(#app>.app:not(.fieldworkos-auth-frame))>.toast-region{bottom:84px}}

/* Approved shared sidebar theme; the common TheraLab header stays unchanged. */
.app .rail { background:#f8faff; border-right-color:#dfe5ef; }
.app .rail > .product-name {
  display:flex; align-items:center; gap:11px; min-height:55px;
  padding:0 9px; margin:0 0 16px; color:#17233e;
  font-size:21px; font-weight:770; letter-spacing:-.55px;
}
.app .rail > .product-name img { flex:0 0 28px; width:28px; height:28px; object-fit:contain; }
.app .rail .nav { gap:5px; }
.app .rail .navlabel { color:#5c6f8e; font-weight:740; }
.app .rail .nav button,.app .rail-secondary {
  display:flex; align-items:center; gap:12px; min-height:44px;
  padding:12px; border-radius:9px; color:#405679;
  font-size:15px; font-weight:650; line-height:1.3;
}
.app .rail .nav button.active,.app .rail-secondary.active { background:#e9efff; color:#315aee; font-weight:750; }
.app .rail-bottom { padding-top:13px; }
.app .rail-secondary svg { flex:none; width:19px; height:19px; }