/* Abbeymead light theme only */
:root{
  --bg:#fffdf7;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#496179;
  --border:#e6e9f0;
  --brand:#ffb703;    /* sunny amber */
  --brand-2:#00c2b2;  /* seafoam */
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;
  --maxw:1100px;
  --input-bg:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #fff3bf55, transparent),
    linear-gradient(180deg,#fff8e1,#e7f7ff);
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none}
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(10px);
  background:rgba(255,255,255,.75); border-bottom:1px solid var(--border);
}
.nav-top{margin:0 auto; max-width:var(--maxw); display:flex; align-items:center; gap:14px; padding:10px 18px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand .logo{width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow)}
.brand small{display:block; color:var(--muted); font-weight:600; font-size:.7rem; letter-spacing:.3px}
.userbar{margin-left:auto; display:flex; align-items:center; gap:8px}
.nav-bottom{border-top:1px solid var(--border); background:rgba(255,255,255,.85)}
.nav-bottom nav{margin:0 auto; max-width:var(--maxw); display:flex; align-items:center; gap:4px; padding:6px 10px; overflow:auto hidden; -webkit-overflow-scrolling:touch}
.nav-bottom nav::-webkit-scrollbar{height:6px}
.nav-bottom nav::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:999px}
.nav-bottom nav a{padding:8px 12px; border-radius:999px; color:var(--muted); border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.nav-bottom nav a .material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24}
.nav-bottom nav a.active, .nav-bottom nav a:hover{color:#0f172a; border-color:var(--border); background:#ffffff}
main{max-width:var(--maxw); margin:20px auto; padding:0 18px 60px; flex:1}
.hero{display:grid; gap:18px; grid-template-columns:1.4fr .9fr; align-items:stretch}
.hero-card, .card{background:#ffffff; border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.hero .title{font-size:2rem; font-weight:800}
.muted{color:var(--muted)}
.grid{display:grid; gap:16px}
.grid.cols-1{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:#fff}
/* Buttons: ensure readable on light */
.btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid var(--border); background:#ffffff; color:#0f172a; cursor:pointer; transition:background .15s, box-shadow .15s}
.btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-color:transparent; color:#08323a; text-shadow:0 1px 0 rgba(255,255,255,.4); font-weight:700}
.btn.primary:focus-visible{outline:2px solid #0ea5a5; outline-offset:2px}
.btn.warn{background:linear-gradient(135deg,var(--warn),#f37335); color:#1a1a1a; border-color:transparent; font-weight:700}
.btn:disabled{opacity:.6; cursor:not-allowed}
.list{display:grid; gap:12px}
.item{display:flex; gap:12px; padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff; flex-wrap:wrap}
.item .meta{color:var(--muted); font-size:.9rem; overflow-wrap:anywhere}
.tag{padding:4px 8px; border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:.8rem; background:#fff}
.field{display:grid; gap:8px}
.field input,.field select,.field textarea{background:var(--input-bg); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:10px 12px; outline:none}
.field input::placeholder,.field textarea::placeholder{color:#8193a6}
.wrap{display:flex; gap:8px; flex-wrap:wrap}
.right{margin-left:auto}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cards{display:grid; gap:14px; grid-template-columns:repeat(4,1fr)}
.kpi{padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff; display:grid; gap:4px}
.kpi .val{font-size:1.4rem; font-weight:800}
.weather-big{display:grid; gap:6px}
.wx-row{display:flex; gap:8px; align-items:center; color:var(--muted)}
.forecast{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.forecast .day{border:1px solid var(--border); border-radius:12px; padding:10px; display:grid; gap:8px; place-items:center; background:#fff}
.empty{color:var(--muted); padding:18px; border:1px dashed var(--border); border-radius:12px; text-align:center; background:#fff}
footer{border-top:1px solid var(--border); color:var(--muted); padding:24px 18px}
.sharebar{display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding-bottom:6px}
.share-btn{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--muted); font-size:.9rem}
.share-btn .material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; font-size:18px}
.share-btn:hover{box-shadow:none; background:#fff}
.toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:10px 12px; border-radius:10px; border:1px solid #374151; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}

/* Directory: modern card layout */
.dir-list{grid-template-columns:1fr}
.dir-card{display:grid; grid-template-columns:120px 1fr; gap:14px; padding:16px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg,#ffffff,#f9fbff); box-shadow:var(--shadow); align-items:center}
.dir-media{width:120px; height:90px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#f3f4f6; display:grid; place-items:center}
.dir-media img{width:100%; height:100%; object-fit:cover; display:block}
.dir-avatar{width:100%; height:100%; display:grid; place-items:center; font-weight:800; color:#0f172a; background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.dir-body{display:grid; gap:8px}
.dir-title{display:flex; align-items:center; gap:8px}
.dir-name{font-weight:800; font-size:1.05rem}
.dir-contact{margin-left:auto; overflow-wrap:anywhere}
.dir-details{color:var(--muted)}
.dir-actions{display:flex; gap:8px; flex-wrap:wrap}
.btn.sm{padding:8px 10px; border-radius:10px; font-size:.9rem}
.dir-card:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.10)}

/* Responsive */
@media (max-width: 920px){
  .hero{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .forecast{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 560px){
  .nav-bottom nav{gap:4px}
  .nav-bottom nav a{padding:6px 10px}
  .cards{grid-template-columns:1fr}
  .forecast{grid-template-columns:repeat(2,1fr)}
  .dir-card{grid-template-columns:1fr; padding:14px}
  .dir-media{width:100%; height:160px}
  .dir-title{flex-direction:column; align-items:flex-start; gap:4px}
  .dir-contact{margin-left:0}
  /* Share: icons only on very small screens */
  .share-btn span:not(.material-symbols-outlined){display:none}
  .share-btn{padding:6px}
}