/* TITI Planner v8.14: avoid double top status-bar clearance on iPhone PWA.
   The real safe-area inset already protects the Dynamic Island and status bar. */
:root{--folio-cover:#f1efec;--folio-page:#faf9f7;--ios-fade-clearance:0px;--ios-foot-reserve:max(8px, calc(env(safe-area-inset-bottom, 0px) - 12px));}
html,body{width:100%!important;height:100%!important;max-height:100%!important;overflow:hidden!important;margin:0!important;padding:0!important;background:var(--folio-cover)!important;overscroll-behavior:none!important}
body::before{display:none!important;content:none!important}
.app-shell{
  width:100%!important;max-width:430px!important;margin:0 auto!important;
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  height:100dvh!important;max-height:100dvh!important;min-height:0!important;
  overflow:hidden!important;
  padding:calc(env(safe-area-inset-top, 0px) + var(--ios-fade-clearance)) 0 0!important;
  background:linear-gradient(to bottom,var(--folio-cover) 0,var(--folio-cover) calc(env(safe-area-inset-top, 0px) + var(--ios-fade-clearance)),var(--folio-page) calc(env(safe-area-inset-top, 0px) + var(--ios-fade-clearance)),var(--folio-page) 100%)!important;
}
/* Header begins immediately below iOS safe area; do not add a second spacer. */
.folio-top{
  flex:0 0 76px!important;height:76px!important;min-height:76px!important;
  box-sizing:border-box!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;
  margin:0 12px!important;padding:0!important;
  background:var(--folio-page)!important;
  position:relative!important;z-index:3!important;
  filter:none!important;opacity:1!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.folio-top .app-header{
  position:relative!important;display:flex!important;flex:0 0 34px!important;
  height:34px!important;min-height:34px!important;width:auto!important;
  background:var(--folio-page)!important;
  padding:2px 11px 1px!important;margin:0!important;
  border:0!important;align-items:center!important;
  justify-content:space-between!important;gap:9px!important;
  filter:none!important;opacity:1!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.folio-top .branding,.folio-top .brand-name{font-size:10px!important;color:#55534e!important;font-weight:600!important;white-space:nowrap!important;filter:none!important;opacity:1!important;text-shadow:none!important}
.folio-top .header-controls{position:static!important;display:flex!important;flex-direction:row!important;justify-content:flex-end!important;align-items:center!important;flex:0 0 auto!important;width:auto!important;height:30px!important;gap:4px!important}
.folio-top .header-controls button,.folio-top #chatBtn{
  position:static!important;flex:0 0 29px!important;width:29px!important;height:29px!important;
  min-width:29px!important;min-height:29px!important;max-width:29px!important;max-height:29px!important;
  padding:0!important;background:var(--folio-page)!important;color:#46443f!important;
  border:1px solid #d7d5cf!important;border-radius:50%!important;box-shadow:none!important;
  filter:none!important;opacity:1!important;overflow:hidden!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.folio-top #settingsBtn{background:#34332f!important;border-color:#34332f!important;color:#fff!important}
.folio-top .header-controls button svg,.folio-top #chatBtn svg{display:block!important;width:17px!important;height:17px!important;stroke:currentColor!important;stroke-width:1.8!important}
.folio-top #settingsBtn svg{width:18px!important;height:18px!important}
.folio-top .page-heading{
  position:relative!important;display:flex!important;flex:0 0 42px!important;
  height:42px!important;min-height:42px!important;
  box-sizing:border-box!important;margin:0!important;width:100%!important;
  padding:6px 12px 7px!important;background:var(--folio-page)!important;
  align-items:center!important;gap:7px!important;justify-content:space-between!important;
  filter:none!important;opacity:1!important;border:0!important;
}
.folio-top .page-heading::after{position:absolute!important;bottom:0!important;left:12px!important;right:12px!important;background:#bbb7b0!important}
.folio-top .heading-copy{display:flex!important;align-items:baseline!important;min-width:0!important;gap:5px!important}
.folio-top .page-heading h1{font-size:22px!important;line-height:1.05!important;letter-spacing:-.55px!important;white-space:nowrap!important}
.folio-top .page-heading .subtext{font-size:9px!important;line-height:1!important}
.folio-top .heading-actions{padding:0!important;align-items:center!important;flex-shrink:0!important}
.folio-top .date-navigation{height:26px!important;min-height:26px!important;gap:8px!important}
.folio-top .nav-arrow{height:26px!important;min-height:26px!important;font-size:9px!important;letter-spacing:.15px!important}
.main-view{
  flex:1 1 0%!important;min-height:0!important;max-height:none!important;height:auto!important;
  overflow:hidden!important;margin:0 12px!important;padding:0!important;
  display:flex!important;flex-direction:column!important;background:var(--folio-page)!important;
}
.day-view,.timeline-shell{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;flex:1 1 0%!important}
.timeline-scroll{flex:1 1 0%!important;min-height:0!important;max-height:none!important;height:auto!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch}
.month-folio-scroll,.pin-wrap{flex:1 1 0%!important;min-height:0!important;max-height:100%!important}
.tab-bar{
  position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  flex:0 0 calc(38px + var(--ios-foot-reserve))!important;
  height:calc(38px + var(--ios-foot-reserve))!important;
  min-height:calc(38px + var(--ios-foot-reserve))!important;
  width:auto!important;margin:0 12px!important;padding:4px 8px var(--ios-foot-reserve)!important;
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;
  border-top:1px solid #ddd9d3!important;background:var(--folio-page)!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.tab-bar .tab{height:29px!important;min-height:29px!important;font-size:9px!important;flex:0 1 auto!important}
.tab-bar .tab-add{height:29px!important;width:29px!important;min-width:29px!important;flex:0 0 29px!important}
@media(max-width:370px){
 .folio-top{margin:0 9px!important}
 .main-view,.tab-bar{margin-left:9px!important;margin-right:9px!important}
 .folio-top .app-header{padding-left:7px!important;padding-right:7px!important}
 .folio-top .header-controls{gap:2px!important}
 .folio-top .header-controls button,.folio-top #chatBtn{flex-basis:27px!important;min-width:27px!important;max-width:27px!important;width:27px!important;height:27px!important;min-height:27px!important}
 .folio-top .page-heading{padding-inline:8px!important}
 .folio-top .page-heading h1{font-size:19px!important}
 .folio-top .date-navigation{gap:5px!important}
}
/* Help diagnose rare iOS 26/27 viewport inconsistencies without altering user data. */
#viewportInfo{display:block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.6;color:#55534e}
@supports not(height:100dvh){.app-shell{height:100vh!important;max-height:100vh!important}}