*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f4f8fb;color:#12344d}header{height:68px;background:#fff;border-bottom:1px solid #dbe7ef;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:3}.brand{font-size:28px;text-decoration:none;color:#1685a6}.brand b{color:#135b96}.brand small{font-size:12px;color:#78909e}nav a{margin-left:25px;text-decoration:none;color:#31536b;font-weight:600}main{max-width:1240px;margin:35px auto;padding:0 22px}.hero{text-align:center;padding:90px 20px}.hero h1{font-size:58px;margin:0;color:#136c98}.hero p{font-size:21px;color:#5c7484}.choices{display:flex;justify-content:center;gap:20px;margin-top:38px}.big,.button,button{background:#147ba4;color:#fff;border:0;border-radius:8px;padding:11px 16px;text-decoration:none;font-weight:700;cursor:pointer}.big{font-size:20px;padding:20px 38px}.secondary,.green{background:#319969}.red{background:#c94c4c}.small{padding:7px 10px;font-size:13px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:25px 0}.cards.five{grid-template-columns:repeat(5,1fr)}.cards div,.panel,.formcard{background:#fff;border:1px solid #dce8ef;border-radius:12px;padding:18px;box-shadow:0 2px 7px #1231}.cards b{font-size:29px;display:block;color:#147ba4}.cards span{color:#6b7e8b}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #e7eef3;vertical-align:top}th{color:#587184;font-size:13px}.status,.cover{padding:5px 9px;border-radius:14px;font-size:12px;font-weight:700;display:inline-block}.draft{background:#fff0ce;color:#946200}.submitted{background:#dfefff;color:#17639a}.approved{background:#dcf4e5;color:#257449}.returned{background:#ffe1e1;color:#9a3030}.cover{background:#fff0ce;color:#8a5a00}.muted,.hint{color:#6d8190}.hint{font-size:13px}.notice{background:#dcf4e5;padding:12px;border-radius:8px;margin-bottom:15px}.formcard{max-width:720px}label{display:block;font-weight:700;margin:14px 0 6px}input,select,textarea{width:100%;padding:11px;border:1px solid #bdd0dc;border-radius:7px;background:#fff}.row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}textarea{min-height:90px}.wide{width:100%;margin-top:18px}.selector{max-width:320px;margin-bottom:20px}.actions{display:flex;gap:7px;align-items:flex-start}.actions form{display:flex;gap:5px}.reason{width:145px;padding:8px}.returnreason{font-size:12px;color:#9a3030;margin-top:5px}.checklist{display:grid;gap:8px}.check{display:flex;align-items:center;gap:12px;border:1px solid #dce8ef;border-radius:8px;padding:12px;margin:0}.check input{width:auto}.check span{display:flex;flex-direction:column}.check small{color:#78909e}footer{text-align:center;color:#78909e;padding:35px}.returnbox{max-width:720px;background:#ffeaea;border-left:4px solid #c94c4c;padding:14px 16px;border-radius:8px;margin:12px 0 18px}.actions .button{white-space:nowrap}

/* v0.13.2 navigation */
header{gap:18px;justify-content:flex-start;padding:0 4%;min-height:68px;height:auto}
.brand{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap}
.brand img{height:52px;width:auto;margin-right:8px}
nav{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex:1;min-width:0}
nav a{margin-left:0;white-space:nowrap;font-size:17px}

/* v0.13.2 Settings */
.settings-card{max-width:760px}
.setting-option{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;margin:0;padding:16px 0;cursor:pointer}
.setting-option input[type=checkbox]{width:22px;height:22px;margin:2px 0 0;padding:0}
.setting-option span{display:flex;flex-direction:column;gap:5px;min-width:0}
.setting-option span b{display:block;line-height:1.25}
.setting-option span small{display:block;color:#6d8190;font-weight:400;line-height:1.4}
.settings-divider{border-top:1px solid #d6e1e8;margin:6px 0}
.mileage-rate{display:flex;flex-direction:column;gap:8px;margin:12px 0 6px}
.mileage-rate input{width:100%}

@media(max-width:1100px){header{padding:8px 2%;gap:12px}.brand{font-size:25px}.brand img{height:46px}nav{gap:12px}nav a{font-size:15px}}
@media(max-width:850px){header{align-items:flex-start}.brand{padding-top:4px}nav{flex-wrap:wrap;row-gap:6px;justify-content:flex-end}nav a{font-size:14px}}
@media(max-width:800px){header nav{display:none}.cards,.cards.five{grid-template-columns:1fr 1fr}.choices{flex-direction:column}.row{grid-template-columns:1fr}.hero{padding:50px 10px}.hero h1{font-size:44px}th,td{padding:9px 6px;font-size:13px}}
@media(max-width:640px){.setting-option{grid-template-columns:24px minmax(0,1fr);gap:11px;padding:14px 0}.setting-option input[type=checkbox]{width:20px;height:20px}}


/* v0.47.60-pilot-test — compact CareSync header
   Pilot-only visual tidy-up. No navigation destinations or permissions changed. */
header{
  min-height:56px;
  padding:5px 2%;
  gap:10px;
}
.brand{
  font-size:22px;
}
.brand img{
  height:40px;
  margin-right:6px;
}
.brand small{
  font-size:10px;
}
header nav{
  gap:10px;
}
header nav a{
  font-size:14px;
}
.session-user{
  margin-left:auto;
  white-space:nowrap;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:5px;
}
.session-user button{
  padding:7px 10px;
  font-size:12px;
}

/* Give the Office header enough room without making it tall. */
@media (max-width:1100px) and (min-width:801px){
  header{
    align-items:center;
    padding:5px 1.5%;
  }
  .brand{
    font-size:20px;
  }
  .brand img{
    height:36px;
  }
  header nav{
    gap:8px;
    flex-wrap:wrap;
    row-gap:3px;
  }
  header nav a{
    font-size:13px;
  }
  .session-user{
    font-size:12px;
  }
}

/* Compact phone header for Carer accounts.
   The dedicated bottom/mobile navigation remains controlled by the existing
   Carer mobile styles. */
@media (max-width:800px){
  header{
    min-height:52px;
    padding:5px 10px;
    align-items:center;
  }
  .brand{
    padding-top:0;
    font-size:20px;
  }
  .brand img{
    height:36px;
  }
  .brand small{
    display:none;
  }
  .session-user{
    margin-left:auto;
    font-size:0;
    gap:4px;
  }
  .session-user strong{
    font-size:12px;
  }
  .session-user form{
    font-size:12px;
  }
  .session-user button{
    padding:6px 9px;
    font-size:12px;
  }
}