/* our.twofold.to (ported from ss4portal) theme layer. Injected after each page's own <style>, so equal-specificity
   rules here win. Font sizes are handled by portal-theme.js (it remaps the px values pages set).
   Off switch: portal_config ui_theme = 'off', or ?theme=off on any URL. */
:root{
  --pt-navy:#1a3f7a; --pt-navy-2:#234b8c; --pt-ink:#1d2433; --pt-ink-2:#4a5568;
  --pt-bg:#f3f5f9; --pt-card:#fff; --pt-line:#e3e8f0; --pt-radius:12px;
  --pt-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:var(--pt-font);line-height:1.45;
     -webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;}

/* ---- Cards ---- */
.card{border-radius:var(--pt-radius);box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
      border:1px solid var(--pt-line);}
.card-header{border-bottom-color:var(--pt-line);}
.card-header h2{letter-spacing:-.01em;}

/* ---- Buttons and form controls ---- */
.btn{border-radius:8px;}
input[type=text],input[type=search],input[type=email],input[type=tel],input[type=date],input[type=time],
input[type=number],input:not([type]),select,textarea{border-radius:8px;}

/* ---- Header ---- */
.portal-brand{letter-spacing:.08em;}

/* ======================= Phones ======================= */
@media (max-width:768px){
  body{line-height:1.5;}
  /* Inputs at 16px+ stop iOS zooming in when a field is tapped */
  input,select,textarea{font-size:16px !important;}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;}
  /* Comfortable tap targets */
  .btn,button.btn,#addBtn{min-height:40px;padding-left:14px;padding-right:14px;}
  .btn-sm{min-height:34px;}
  .card-header{padding:14px 16px;}
  .card-body{padding:14px 16px;}
  /* Header: the long page descriptions don't fit next to the title on a phone */
  #topBar h1 + div[style],#topBar .subtitle,#liveInd{display:none !important;}
  #topBar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto !important;min-width:0;}
  #topBar{gap:8px;}
  #searchBox{min-width:56px;width:auto !important;flex:1 1 0;max-width:180px;margin-left:auto;}
  /* Brand bar: ward name left, "Sign Out" right; the user's name is dropped on phones (it collided) */
  .portal-brand{justify-content:center !important;font-size:13px !important;}
  #brandUserName{display:none !important;}
  #brandAuthLink{font-size:13px !important;}
  /* Card headers: a long description goes on its own line under the title */
  .card-header{flex-wrap:wrap;row-gap:2px;}
  .card-header > h2{flex:1 1 auto;}
  .card-header > h2 + div:not(:has(button,select,input)){order:9;flex:1 1 100%;margin-top:0 !important;}
  /* Bottom nav labels */
  .bnav-item{gap:3px;padding:6px 6px;}
  #bottomNav{padding-bottom:env(safe-area-inset-bottom,6px) !important;}
  /* Floating buttons sit above the bottom nav instead of on top of it */
  body:has(#bottomNav) #siteFab,body:has(.bnav-items) #siteFab{bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;right:14px !important;}
  body:has(#bottomNav) #orionFabBtn{bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;left:14px !important;}
  #main{padding-bottom:150px !important;}
}

/* Notification bell: was a half-transparent circle floating over page content.
   Park it in the header bar, top right, fully opaque. */
#notifBell{top:36px !important;right:10px !important;left:auto !important;bottom:auto !important;
           opacity:1 !important;width:32px !important;height:32px !important;z-index:260 !important;
           background:rgba(255,255,255,.16) !important;box-shadow:none !important;}
#notifPanel{top:82px !important;right:8px !important;left:auto !important;}
#topBar{padding-right:52px !important;}

/* The header clock overlapped page subtitles and duplicated the phone's own clock */
#sharedClock{display:none !important;}
#addBtn{white-space:nowrap;}

/* ---- Dark mode (toggled by #ptDarkBtn, see portal-theme.js) ---- */
#ptDarkBtn{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:5;
  width:28px;height:28px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:16px;line-height:28px;text-align:center;
  font-family:"Segoe UI Symbol","Apple Symbols",var(--pt-font);}
#ptDarkBtn:hover{background:rgba(255,255,255,.26);}
#ptDarkBtn.pt-dark-float{position:fixed;left:auto;right:10px;top:calc(8px + env(safe-area-inset-top,0px));transform:none;
  background:#1a3f7a;z-index:300;box-shadow:0 1px 4px rgba(0,0,0,.25);}
@media (max-width:768px){ .portal-brand{padding-left:60px !important;padding-right:60px !important;letter-spacing:.02em !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} }
@media (max-width:768px){ #portalBrand{padding-left:42px !important;padding-right:74px !important;font-size:13px !important;white-space:nowrap;overflow:hidden;} }

html.pt-dark{filter:invert(1) hue-rotate(180deg);background:#fff;}
/* Flip back things that should keep their real colours */
html.pt-dark :is(img,video,canvas,iframe,picture,.leaflet-tile-pane,.leaflet-marker-pane,[style*="background-image"]),
html.pt-dark :is(.portal-brand,#portalBrand,#topBar,#bottomNav,#notifBell,#siteFab,#orionFabBtn,.mbnav,#mobileBottom,#sharedBottomNav,.pt-dark-float){
  filter:invert(1) hue-rotate(180deg);}
/* ...but not twice for images inside those bars */
html.pt-dark :is(.portal-brand,#portalBrand,#topBar,#bottomNav,#notifBell,#siteFab,#orionFabBtn,.mbnav,#mobileBottom,#sharedBottomNav) :is(img,video,canvas,iframe,picture,[style*="background-image"]){filter:none;}