/* NABD source presentation styles; external image URLs omitted for the standalone demo. */

:root{--g:#b8872e;--p:#fbf7ee;--bg:#f6f5f2;--line:#e6e1d8;--text:#252525;--muted:#777}
*{box-sizing:border-box}
body{margin:0;padding:18px;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial;color:var(--text)}
.app{max-width:1400px;margin:auto}
header{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
h1{margin:0;font:30px Georgia;color:#422e17}
.tag{color:var(--muted);margin-top:4px;font-size:14px}
#clock{font:34px Georgia;color:#6e4a10;text-align:right}
#date{color:var(--muted);font-size:13px;text-align:right}
#status{padding:12px 15px;background:#fff6df;border:1px solid #ead5a6;border-radius:12px;margin-bottom:15px;color:#72511a}
.nabdLoading .grid{display:none}
.nabdRetry{margin-left:12px;min-height:44px;padding:8px 18px;border:1px solid var(--g);border-radius:12px;background:#fff;color:#72511a;font:inherit;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:19px;min-height:190px;box-shadow:0 3px 14px #00000008;cursor:pointer}
.card:active{transform:scale(.99)}
.head{display:flex;justify-content:space-between;margin-bottom:14px}
.title{font-size:18px;font-weight:700}
.sub{font-size:12px;color:var(--muted);margin-top:3px}
.arrow{font-size:26px;color:var(--g)}
.row{padding:9px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;gap:10px;font-size:14px}
.row:last-child{border:0}
.meta{font-size:12px;color:var(--muted)}
.bar{height:8px;background:#eee9df;border-radius:20px;overflow:hidden;margin-top:5px}
.fill{height:100%;background:var(--g)}
.person{margin-bottom:12px}
.top{display:flex;justify-content:space-between;font-size:13px}
.star{color:var(--g);font-weight:bold}
.people{display:flex;gap:12px;flex-wrap:wrap}
.avatar{width:43px;height:43px;border-radius:50%;background:var(--p);color:#805b19;display:flex;align-items:center;justify-content:center;font-weight:bold;margin:auto}
.name{text-align:center;font-size:11px;color:var(--muted);margin-top:5px}
.empty{color:var(--muted);padding:15px 0}
#panel{display:none;position:fixed;inset:0;background:var(--bg);z-index:10;overflow:auto;padding:18px}
#panel.open{display:block}
.panelInner{max-width:900px;margin:auto}
.panelHead{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:14px;position:sticky;top:0}
.back{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--g);font-size:25px}
.panelTitle{font-size:22px;font-weight:bold}
.panelCard{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px;margin-bottom:10px}
.bigrow{min-height:62px;border-bottom:1px solid #eee;padding:11px 2px}
.bigrow:last-child{border:0}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){body{padding:10px}.grid{grid-template-columns:1fr}#clock,#date{display:none}h1{font-size:23px}}
/* =========================================================
   NABD BOTTOM SHEET
   ========================================================= */

.nabdSheetOverlay{
  position:fixed;
  inset:0;
  z-index:3000;
  background:rgba(32,29,24,.28);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:none;
  align-items:flex-end;
  justify-content:center;
}

.nabdSheetOverlay.open{
  display:flex;
}

.nabdSheet{
  width:min(680px,100%);
  max-height:90vh;
  overflow-y:auto;

  background:#fffdf9;

  border:1px solid #ded3bf;
  border-bottom:0;

  border-radius:28px 28px 0 0;

  padding:
    14px
    22px
    calc(28px + env(safe-area-inset-bottom));

  box-shadow:
    0 -18px 60px rgba(48,39,25,.14);

  animation:nabdSheetUp .22s ease-out;
}

@keyframes nabdSheetUp{
  from{
    transform:translateY(35px);
    opacity:0;
  }

  to{
    transform:translateY(0);
    opacity:1;
  }
}

.sheetHandle{
  width:44px;
  height:5px;
  border-radius:999px;
  background:#d9d2c6;
  margin:0 auto 20px;
}

.sheetTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}

.sheetTitle{
  font-family:Georgia,serif;
  font-size:27px;
  color:#352b20;
  line-height:1.15;
}

.sheetSubtitle{
  color:#817a70;
  font-size:13px;
  margin-top:6px;
}

.sheetClose{
  width:42px;
  height:42px;
  flex:0 0 42px;

  border:1px solid #e2dbcf;
  border-radius:50%;

  background:#fff;
  color:#6e6252;

  font-size:22px;
}

.nabdField{
  margin-bottom:18px;
}

.nabdLabel{
  display:block;
  margin-bottom:8px;

  color:#5c544a;
  font-size:13px;
  font-weight:650;
}

.nabdInput,
.nabdSelect{
  width:100%;
  min-height:56px;

  border:1px solid #ddd5c8;
  border-radius:15px;

  background:#fff;
  color:#292622;

  padding:0 16px;

  font-size:16px;
  outline:none;
}

.nabdInput:focus,
.nabdSelect:focus{
  border-color:#b8872e;

  box-shadow:
    0 0 0 3px rgba(184,135,46,.09);
}

.nabdChoiceGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.nabdChoice{
  min-height:48px;

  border:1px solid #ded7cb;
  border-radius:13px;

  background:#fff;
  color:#575047;

  padding:8px 10px;
}

.nabdChoice.selected{
  background:#f7f0e2;
  border-color:#b8872e;
  color:#765319;
  font-weight:650;
}

.quantityControl{
  display:grid;
  grid-template-columns:56px 1fr 56px;
  gap:10px;
  align-items:center;
}

.quantityButton{
  height:56px;

  border:1px solid #ddd5c8;
  border-radius:15px;

  background:#fff;
  color:#806022;

  font-size:25px;
}

.quantityInput{
  text-align:center;
}

.sheetSave{
  width:100%;
  min-height:57px;

  margin-top:8px;

  border:0;
  border-radius:15px;

  background:#aa7c2c;
  color:white;

  font-size:16px;
  font-weight:700;

  box-shadow:
    0 5px 15px rgba(170,124,44,.15);
}

.sheetSave:active{
  transform:scale(.99);
}

.sheetCancel{
  width:100%;
  min-height:48px;

  margin-top:8px;

  border:0;
  background:transparent;

  color:#817a70;
}

@media(min-width:800px){

  .nabdSheetOverlay{
    align-items:center;
    padding:30px;
  }

  .nabdSheet{
    border-bottom:1px solid #ded3bf;
    border-radius:28px;

    padding:
      16px
      28px
      28px;
  }
}
/* =========================================================
   NABD STARTUP SPLASH
   ========================================================= */

#nabdSplash{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#f8f6f1;

  opacity:1;
  visibility:visible;

  transition:
    opacity .55s ease,
    visibility .55s ease;
}


#nabdSplash.nabdSplashOut{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}


.nabdSplashContent{
  width:min(360px,82vw);

  text-align:center;

  transform:translateY(8px);

  animation:
    nabdSplashContentIn
    .7s
    cubic-bezier(.2,.8,.2,1)
    forwards;
}


@keyframes nabdSplashContentIn{

  from{
    opacity:0;
    transform:
      translateY(22px)
      scale(.97);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}


/* NABD ARCH */

.nabdSplashArch{
  width:82px;
  height:94px;

  margin:
    0
    auto
    20px;

  position:relative;

  opacity:0;

  animation:
    nabdArchAppear
    .7s
    .12s
    cubic-bezier(.2,.8,.2,1)
    forwards;
}


@keyframes nabdArchAppear{

  from{
    opacity:0;
    transform:
      translateY(8px)
      scale(.9);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}


.nabdArchOuter{
  position:absolute;

  left:7px;
  right:7px;
  top:5px;
  bottom:0;

  background:#aeb7a3;

  clip-path:polygon(
    50% 0%,
    100% 37%,
    100% 100%,
    77% 100%,
    77% 47%,
    50% 27%,
    23% 47%,
    23% 100%,
    0% 100%,
    0% 37%
  );
}


.nabdArchInner{
  position:absolute;

  left:22px;
  right:22px;
  top:40px;
  bottom:0;

  background:#eee5d6;

  clip-path:polygon(
    50% 0%,
    100% 35%,
    100% 100%,
    0% 100%,
    0% 35%
  );
}


.nabdArchDoor{
  position:absolute;

  width:15px;
  height:28px;

  left:50%;
  bottom:0;

  transform:
    translateX(-50%);

  background:#c79b50;

  border-radius:
    10px
    10px
    0
    0;
}


/* BRAND */

.nabdSplashBrand{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:44px;
  line-height:1;

  letter-spacing:.12em;

  color:#392e22;

  opacity:0;

  animation:
    nabdBrandIn
    .65s
    .35s
    ease
    forwards;
}


@keyframes nabdBrandIn{

  from{
    opacity:0;
    letter-spacing:.2em;
    transform:
      translateY(7px);
  }

  to{
    opacity:1;
    letter-spacing:.12em;
    transform:
      translateY(0);
  }
}


.nabdSplashDisplay{
  margin-top:9px;

  font-size:10px;
  font-weight:600;

  letter-spacing:.48em;

  padding-left:.48em;

  color:#a77a2c;

  opacity:0;

  animation:
    nabdDisplayIn
    .6s
    .62s
    ease
    forwards;
}


@keyframes nabdDisplayIn{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}


.nabdSplashTagline{
  margin-top:28px;

  color:#8a8277;

  font-size:13px;

  letter-spacing:.02em;

  opacity:0;

  animation:
    nabdTaglineIn
    .5s
    .85s
    ease
    forwards;
}


@keyframes nabdTaglineIn{

  from{
    opacity:0;
    transform:
      translateY(4px);
  }

  to{
    opacity:1;
    transform:
      translateY(0);
  }
}


/* THREE SUBTLE LOADING DOTS */

.nabdSplashLoader{
  display:flex;
  justify-content:center;
  gap:6px;

  margin-top:17px;

  opacity:0;

  animation:
    nabdLoaderIn
    .4s
    1s
    ease
    forwards;
}


@keyframes nabdLoaderIn{

  to{
    opacity:1;
  }
}


.nabdSplashLoader span{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#b8872e;

  opacity:.25;

  animation:
    nabdDot
    1.05s
    infinite
    ease-in-out;
}


.nabdSplashLoader span:nth-child(2){
  animation-delay:.15s;
}


.nabdSplashLoader span:nth-child(3){
  animation-delay:.3s;
}


@keyframes nabdDot{

  0%,
  60%,
  100%{
    opacity:.2;
    transform:scale(.8);
  }

  30%{
    opacity:1;
    transform:scale(1);
  }
}
/* =========================================================
   NABD DISPLAY V1.5
   PREMIUM DASHBOARD REDESIGN
   ========================================================= */

:root{
  --nabd-bg:#f8f7f3;
  --nabd-surface:#fffefa;
  --nabd-gold:#b18432;
  --nabd-gold-soft:#d9c79f;
  --nabd-gold-pale:#f5efe2;
  --nabd-ink:#29261f;
  --nabd-muted:#817b70;
  --nabd-green:#4f5e52;
  --nabd-border:#e3dac9;
}


/* PAGE */

html,
body{
  background:var(--nabd-bg);
}

body{
  padding:18px 22px 28px;
}

.app{
  width:100%;
  max-width:1500px;
  margin:0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

header,
.header{
  min-height:96px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:18px 24px;

  margin-bottom:16px;

  background:var(--nabd-surface);

  border:
    1px solid
    var(--nabd-border);

  border-radius:22px;

  box-shadow:
    0 3px 16px
    rgba(65,52,30,.035);
}


header h1,
.header h1{
  margin:0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:30px;
  line-height:1;

  font-weight:500;

  letter-spacing:.035em;

  color:#382d20;
}


header .tag,
.header .tag{
  margin-top:7px;

  font-size:13px;

  color:var(--nabd-muted);
}


#date{
  margin-bottom:3px;

  text-align:right;

  color:var(--nabd-muted);

  font-size:12px;
}


#clock{
  text-align:right;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:31px;

  color:#392f23;
}


/* =========================================================
   LOADING MESSAGE
   ========================================================= */

#status{
  min-height:0;

  padding:7px 4px 12px;

  margin:0;

  background:transparent;

  border:0;

  color:var(--nabd-muted);

  font-size:12px;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


/* =========================================================
   DASHBOARD CARDS
   ========================================================= */

.card{
  position:relative;

  min-height:205px;

  padding:20px;

  overflow:hidden;

  background:
    var(--nabd-surface);

  border:
    1px solid
    var(--nabd-border);

  border-radius:20px;

  box-shadow:
    0 4px 18px
    rgba(59,47,27,.03);

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}


.card:hover{
  border-color:#d4c39f;

  box-shadow:
    0 8px 25px
    rgba(59,47,27,.055);
}


.card:active{
  transform:scale(.988);
}


/* Remove old oversized spans on tablet */

.span4,
.span6{
  grid-column:span 1;
}


/* =========================================================
   CARD HEADINGS
   ========================================================= */

.head,
.titleRow{
  display:flex;

  justify-content:space-between;
  align-items:flex-start;

  gap:12px;

  margin-bottom:15px;
}


.title{
  display:flex;

  align-items:center;

  font-size:17px;

  font-weight:650;

  line-height:1.2;

  color:var(--nabd-ink);
}


.sub,
.subtitle{
  margin-top:5px;

  font-size:11px;

  line-height:1.35;

  color:var(--nabd-muted);
}


.arrow{
  display:flex;

  align-items:center;
  justify-content:center;

  width:27px;
  height:27px;

  flex:0 0 27px;

  color:var(--nabd-gold);

  font-size:22px;
  font-weight:300;

  line-height:1;
}


/* =========================================================
   EXISTING ICONS
   ========================================================= */

.icon{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  margin-right:10px;

  border-radius:50%;

  background:var(--nabd-gold-pale);

  color:#5c6258;

  font-size:16px;
}


/* =========================================================
   SUMMARY ROWS
   ========================================================= */

.row{
  min-height:34px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:7px 0;

  border-bottom:
    1px solid
    #efebe3;

  font-size:13px;
}


.row:last-child{
  border-bottom:0;
}


.meta{
  color:var(--nabd-muted);

  font-size:11px;
  line-height:1.35;
}


.empty{
  padding:18px 0;

  color:#999185;

  font-size:12px;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.person{
  margin-bottom:11px;
}


.person:last-child{
  margin-bottom:0;
}


.top,
.progressTop{
  display:flex;

  justify-content:space-between;

  gap:12px;

  margin-bottom:5px;

  font-size:12px;
}


.bar,
.track{
  height:6px;

  overflow:hidden;

  background:#ece8df;

  border-radius:999px;
}


.fill{
  height:100%;

  background:
    linear-gradient(
      90deg,
      #aeb7a3,
      #b18432
    );

  border-radius:999px;
}


.star{
  color:var(--nabd-gold);

  font-weight:650;
}


/* =========================================================
   FAMILY LOCATIONS
   ========================================================= */

.people{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:8px;

  margin-top:8px;
}


.avatar{
  width:38px;
  height:38px;

  display:flex;

  align-items:center;
  justify-content:center;

  margin:0 auto;

  border-radius:50%;

  background:var(--nabd-gold-pale);

  border:
    1px solid
    #e6dcc9;

  color:#795c24;

  font-size:13px;
  font-weight:650;
}


.name,
.personName{
  margin-top:5px;

  text-align:center;

  color:var(--nabd-muted);

  font-size:9px;
}


/* =========================================================
   FULL-SCREEN PANEL
   ========================================================= */

#panel{
  background:var(--nabd-bg);

  padding:20px;
}


.panelInner{
  width:100%;
  max-width:1050px;

  margin:0 auto;
}


.panelHead,
.panelHeader{
  min-height:78px;

  display:flex;

  align-items:center;

  gap:14px;

  padding:14px 17px;

  margin-bottom:14px;

  background:var(--nabd-surface);

  border:
    1px solid
    var(--nabd-border);

  border-radius:20px;

  box-shadow:
    0 4px 18px
    rgba(59,47,27,.035);
}


.back{
  width:46px;
  height:46px;

  flex:0 0 46px;

  border:
    1px solid
    var(--nabd-border);

  border-radius:50%;

  background:#fff;

  color:var(--nabd-gold);

  font-size:26px;
}


.panelTitle{
  color:var(--nabd-ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:24px;

  font-weight:500;
}


.panelCard{
  padding:16px 18px;

  margin-bottom:10px;

  background:var(--nabd-surface);

  border:
    1px solid
    var(--nabd-border);

  border-radius:17px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.goldButton,
.sheetSave{
  border:0;

  background:var(--nabd-gold);

  color:#fff;

  font-weight:650;
}


.goldButton{
  min-height:45px;

  padding:0 16px;

  border-radius:13px;
}


.outlineButton{
  border:
    1px solid
    var(--nabd-border);

  background:#fff;

  color:#65563d;

  border-radius:12px;
}


.deleteButton{
  border:
    1px solid
    #eadbd5;

  background:#fffafa;

  color:#a56858;

  border-radius:11px;
}


/* =========================================================
   WALL TABLET
   Main NABD Display experience
   ========================================================= */

@media
(min-width:800px)
and
(orientation:landscape){

  body{
    padding:
      18px
      24px
      24px;
  }


  header,
  .header{
    min-height:90px;

    padding:
      16px
      22px;
  }


  header h1,
  .header h1{
    font-size:29px;
  }


  #clock{
    font-size:30px;
  }


  .grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:13px;
  }


  .card{
    min-height:190px;

    padding:18px;
  }


  .title{
    font-size:16px;
  }


  .row{
    min-height:30px;

    padding:5px 0;

    font-size:12px;
  }

}


/* =========================================================
   LARGE WALL DISPLAY
   ========================================================= */

@media(min-width:1200px){

  .app{
    max-width:1450px;
  }


  .grid{
    gap:15px;
  }


  .card{
    min-height:200px;
  }

}


/* =========================================================
   PHONE
   Keep usable for setup/admin
   ========================================================= */

@media(max-width:699px){

  body{
    padding:10px;
  }


  header,
  .header{
    min-height:92px;

    padding:17px 18px;

    border-radius:20px;
  }


  header h1,
  .header h1{
    font-size:27px;
  }


  #clock,
  #date{
    display:none;
  }


  .grid{
    grid-template-columns:1fr;

    gap:12px;
  }


  .span4,
  .span6{
    grid-column:span 1;
  }


  .card{
    min-height:0;

    padding:18px;

    border-radius:19px;
  }


  .head,
  .titleRow{
    margin-bottom:12px;
  }


  .title{
    font-size:17px;
  }


  .people{
    grid-template-columns:
      repeat(5,1fr);
  }

}
/* =========================================================
   NABD DISPLAY V1.5.1
   DASHBOARD POLISH
   ========================================================= */

/* ---------- HEADER ---------- */

header{
  position:relative;
  min-height:86px;
  padding:16px 22px;
}

header h1{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:29px;
}

header .tag{
  margin-top:7px;
  font-size:12px;
}

/* Small NABD arch beside branding */

header > div:first-child{
  position:relative;
  padding-left:52px;
}

header > div:first-child::before{
  content:"";
  position:absolute;

  left:0;
  top:50%;

  width:34px;
  height:39px;

  transform:translateY(-50%);

  background:#aeb7a3;

  clip-path:polygon(
    50% 0%,
    100% 37%,
    100% 100%,
    72% 100%,
    72% 48%,
    50% 31%,
    28% 48%,
    28% 100%,
    0% 100%,
    0% 37%
  );
}

header > div:first-child::after{
  content:"";

  position:absolute;

  left:15px;
  top:50%;

  width:10px;
  height:18px;

  transform:translateY(-18%);

  background:#c59a4d;

  border-radius:7px 7px 0 0;
}


/* ---------- CARDS ---------- */

.card{
  min-height:185px;
  padding:18px 20px;
  border-radius:19px;
}

.head,
.titleRow{
  margin-bottom:12px;
}

.title{
  font-size:16px;
  letter-spacing:-.01em;
}

.sub,
.subtitle{
  margin-top:4px;
  font-size:10.5px;
}


/* ---------- ARROWS ---------- */

.arrow{
  width:24px;
  height:24px;
  flex-basis:24px;

  font-size:19px;

  transition:
    transform .15s ease,
    color .15s ease;
}

.card:active .arrow{
  transform:translateX(2px);
}


/* ---------- ROWS ---------- */

.row{
  min-height:29px;
  padding:5px 0;
  font-size:12px;
}

.meta{
  font-size:10.5px;
}


/* ---------- EMPTY STATES ---------- */

.empty{
  padding:15px 0;
  font-size:11.5px;
  color:#9b958b;
}


/* ---------- PROGRESS ---------- */

.person{
  margin-bottom:8px;
}

.top,
.progressTop{
  margin-bottom:4px;
  font-size:11px;
}

.bar,
.track{
  height:5px;
  background:#ebe7df;
}

.fill{
  background:#b18432;
}


/* ---------- LOCATION AVATARS ---------- */

.avatar{
  width:34px;
  height:34px;

  font-size:12px;

  background:#f6f0e5;

  border-color:#e4d7be;
}

.name,
.personName{
  font-size:8.5px;
}


/* ---------- REFINED CARD ACCENT ---------- */

.card::after{
  content:"";

  position:absolute;

  left:20px;
  right:20px;
  bottom:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(177,132,50,.15),
      transparent
    );
}


/* ---------- TABLET ---------- */

@media
(min-width:800px)
and
(orientation:landscape){

  .grid{
    gap:12px;
  }

  .card{
    min-height:180px;
  }

}


/* ---------- PHONE ---------- */

@media(max-width:699px){

  header > div:first-child{
    padding-left:45px;
  }

  header > div:first-child::before{
    width:29px;
    height:34px;
  }

  header > div:first-child::after{
    left:13px;
    width:9px;
    height:16px;
  }

  .card{
    min-height:0;
  }

}/* =========================================================
   NABD REWARD CELEBRATIONS
   ========================================================= */

#nabdCelebrationLayer{
  position:fixed;
  inset:0;
  z-index:999999;
  pointer-events:none;
  overflow:hidden;
}

.nabdConfetti{
  position:absolute;
  top:-30px;
  width:8px;
  height:15px;
  border-radius:3px;
  opacity:0;

  animation:
    nabdConfettiFall
    var(--fall-time, 1800ms)
    cubic-bezier(.18,.72,.35,1)
    forwards;
}

@keyframes nabdConfettiFall{

  0%{
    opacity:0;

    transform:
      translate3d(
        0,
        -20px,
        0
      )
      rotate(0deg);
  }

  10%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      translate3d(
        var(--drift,0px),
        105vh,
        0
      )
      rotate(
        var(--spin,540deg)
      );
  }
}


/* SMALL GOAL-REACHED CELEBRATION */

.nabdGoalReached{
  position:fixed;

  left:50%;
  top:18%;

  transform:
    translate(-50%,-8px)
    scale(.96);

  z-index:1000000;

  min-width:260px;
  max-width:86vw;

  padding:18px 24px;

  text-align:center;

  background:
    rgba(255,254,250,.96);

  border:
    1px solid #dbc99e;

  border-radius:22px;

  box-shadow:
    0 18px 55px
    rgba(63,48,22,.15);

  opacity:0;

  pointer-events:none;

  animation:
    nabdGoalMessage
    1700ms
    ease
    forwards;
}

.nabdGoalReachedStar{
  color:#b18432;
  font-size:27px;
  margin-bottom:4px;
}

.nabdGoalReachedTitle{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color:#392e22;
  font-size:23px;
}

.nabdGoalReachedName{
  margin-top:5px;
  color:#817b70;
  font-size:12px;
}

@keyframes nabdGoalMessage{

  0%{
    opacity:0;

    transform:
      translate(-50%,4px)
      scale(.96);
  }

  15%{
    opacity:1;

    transform:
      translate(-50%,0)
      scale(1);
  }

  78%{
    opacity:1;

    transform:
      translate(-50%,0)
      scale(1);
  }

  100%{
    opacity:0;

    transform:
      translate(-50%,-8px)
      scale(.98);
  }
}


/* BIG REWARD-REDEMPTION CELEBRATION */

.nabdRewardCelebration{
  position:fixed;
  inset:0;

  z-index:999998;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:30px;

  background:
    rgba(248,246,241,.94);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  opacity:0;

  pointer-events:none;

  animation:
    nabdBigCelebration
    3200ms
    ease
    forwards;
}

.nabdRewardCelebrationContent{
  text-align:center;
  max-width:600px;

  animation:
    nabdCelebrationContent
    3200ms
    cubic-bezier(.2,.8,.2,1)
    forwards;
}

.nabdRewardBigStar{
  color:#b18432;

  font-size:62px;
  line-height:1;

  margin-bottom:18px;
}

.nabdRewardCelebrationTitle{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      34px,
      6vw,
      54px
    );

  color:#392e22;
}

.nabdRewardCelebrationReward{
  margin-top:12px;

  color:#9a7229;

  font-size:18px;
  font-weight:650;
}

@keyframes nabdBigCelebration{

  0%{
    opacity:0;
  }

  10%{
    opacity:1;
  }

  82%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}

@keyframes nabdCelebrationContent{

  0%{
    opacity:0;

    transform:
      translateY(15px)
      scale(.94);
  }

  16%{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

  75%{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

  100%{
    opacity:0;

    transform:
      translateY(-8px)
      scale(.98);
  }
}
/* =========================================
   NABD ICON SYSTEM
   ========================================= */

.nabdIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-right:11px;
  flex:0 0 26px;
  color:#2f2b25;
  vertical-align:middle;
}

.nabdIcon svg{
  display:block;
  width:26px;
  height:26px;
}

.title .nabdIcon{
  position:relative;
  top:1px;
}

.title{
  display:flex;
  align-items:center;
}
/* Meal Planner uses the existing NABD panel and bottom-sheet surfaces. */
.mealIntro{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mealPanelHeading{font-family:Georgia,serif;font-size:26px;margin-bottom:6px}
.mealPlanRow{display:flex;width:100%;align-items:center;justify-content:space-between;gap:18px;text-align:left;color:var(--ink,#29261f);font:inherit;cursor:pointer;min-height:104px}
.mealDetails{display:flex;flex-direction:column;gap:6px;min-width:0}
.mealDay{color:#8b6b32;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.mealName{font-size:20px;font-weight:600;overflow-wrap:anywhere}
.mealEditLabel{color:#8b7e69;font-size:14px;white-space:nowrap}
.mealFields{border:0;padding:0;margin:0;min-width:0}
.mealDeleteLink{color:#9a473d;margin-top:18px}
.mealDeleteButton{background:#9a473d}
.mealPlanRow:focus-visible{outline:2px solid #b18432;outline-offset:3px}
.householdRow{display:flex;align-items:center;justify-content:space-between;gap:16px}.householdRow>div{min-width:0}.householdHeading{font-family:Georgia,serif;font-size:25px;font-weight:500;margin:0 0 7px;overflow-wrap:anywhere}.householdSection{font-size:14px;font-weight:600;color:var(--muted);margin:24px 4px 12px}.householdMember,.householdLink{display:flex;align-items:center;gap:14px;width:100%;text-align:left;color:var(--text);font:inherit;cursor:pointer}.householdMemberText,.householdLink>span:not(.nabdIcon){flex:1;min-width:0}.householdMember strong,.householdLink strong{display:block;font-size:17px;overflow-wrap:anywhere}.householdMember .meta,.householdLink .meta{display:block;margin-top:5px}.householdRow button{min-height:44px;flex-shrink:0}.householdMember:focus-visible,.householdLink:focus-visible{outline:2px solid var(--g);outline-offset:3px}.householdMember .avatar{flex-shrink:0;margin:0}.householdMember .nabdIcon,.householdLink .nabdIcon{color:var(--g)}
.householdSectionTitle{font:inherit;margin:0}.householdHint{line-height:1.6;margin:0 0 16px}.householdLifecycle{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;display:flex;flex-direction:column;gap:14px}.householdLifecycle button{min-height:46px}.householdSection .goldButton{min-height:44px;margin:0}

/* Routines keep large completion controls separate from schedule editing. */
.routineHeading{font-family:Georgia,serif;font-size:26px;font-weight:500;margin:0 0 6px}
.routineTabs{display:flex;gap:10px;margin:18px 0}.routineTabs button{min-height:48px;padding:10px 20px;border:1px solid var(--line);border-radius:24px;background:#fffdf8;color:var(--text);font:inherit;cursor:pointer}.routineTabs button[aria-pressed="true"]{background:#f3ead8;border-color:#c6a36b;color:#715321}
.routineRow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:100px}.routineDetails{display:flex;flex-direction:column;gap:7px;min-width:0}.routineDetails strong,.routineName{font-size:20px;overflow-wrap:anywhere}.routineComplete{display:flex;align-items:center;justify-content:center;gap:8px;min-width:128px;min-height:52px;flex-shrink:0;background:#fffdf8;border:1px solid #c6a36b;border-radius:14px;color:#80622f;font:inherit;cursor:pointer}.routineComplete .nabdIcon{margin:0;width:24px;height:24px}.routineComplete[aria-pressed="true"]{background:#eef1e9;border-color:#b3bea5;color:#4c634b}.routineDone .routineDetails{color:#5d6658}
.routineDayGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 20px}.routineDayGrid label{position:relative;cursor:pointer}.routineDayGrid input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.routineDayGrid span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fffdf8}.routineDayGrid input:checked+span{background:#f3ead8;border-color:#c6a36b;color:#715321}.routineDayGrid input:focus-visible+span{outline:2px solid var(--g);outline-offset:2px}.routineComplete:focus-visible,.routineTabs button:focus-visible{outline:2px solid var(--g);outline-offset:3px}#routineMessage{color:#8a5b45;line-height:1.5;margin-bottom:12px}#routineDays[hidden]{display:none}
@media(max-width:480px){.routineRow{gap:12px;padding:18px 14px}.routineComplete{min-width:102px;padding:10px 8px}.routineDetails strong{font-size:18px}.routineTabs button{padding:10px 16px}}


.nabdAccountPending .app,.nabdAccountPending #panel{display:none!important}
.outlineButton{min-height:48px;padding:12px 16px;font:inherit;font-size:14px;line-height:1.4;cursor:pointer}.panelCard>.outlineButton{margin:8px 8px 0 0}.outlineButton:focus-visible{outline:2px solid var(--g);outline-offset:3px}.people>.empty{width:100%;max-width:none;flex-basis:100%}
.calendarSelection{border:0;padding:0;margin:20px 0}.calendarSelection label{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:10px}.calendarSelection input{width:24px;height:24px;flex-shrink:0;accent-color:var(--g)}.calendarSelection span{min-width:0;overflow-wrap:anywhere}
#nabdAccount{min-height:100dvh;padding:32px 20px;background:var(--bg)}
.accountCard{max-width:640px;margin:20px auto;padding:30px;background:#fffdf8;border:1px solid var(--line);border-radius:24px}
.accountCard h1{font-size:36px;margin:24px 0 12px;line-height:1.1}.accountCard h2{font:24px Georgia;margin:24px 0 16px}
.accountCard p{line-height:1.6}.accountCard button{min-height:48px;margin:18px 12px 0 0}.accountCard input,.accountCard select{margin:8px 0 18px}
.accountLogo{font:32px Georgia;letter-spacing:.1em}.accountLogo span{display:block;font:11px Arial;letter-spacing:.2em;color:var(--g);margin-top:8px}
.accountConsent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;margin-top:25px}.accountConsent input{min-width:24px;min-height:24px;margin:0}
.displayLinkCode{font:clamp(32px,7vw,56px) monospace;letter-spacing:.12em;text-align:center;background:var(--bg);border-radius:16px;padding:24px 8px}.displayDevice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.accountError{color:#8d3629;min-height:1.5em}.accountExisting,.setupMember{border:1px solid var(--line);border-radius:16px;padding:18px;margin:20px 0}
@media(max-width:500px){#nabdAccount{padding:18px 12px}.accountCard{padding:22px 18px}.accountCard h1{font-size:30px}.accountCard button{width:100%;margin-right:0}}


/* Three household looks share the same components and touch targets. */
:root[data-theme=family]{--bg:#faf7f2;--text:#283c3c;--muted:#626c6b;--line:#dfdfd7;--g:#835821;--p:#fff3df}
[data-theme=family] .grid>.card{border-radius:26px;border:1px solid #fff;box-shadow:0 4px 16px #34493909}
[data-theme=family] [data-nabd-module=calendar]{background:#e8edfb}[data-theme=family] [data-nabd-module=tasks]{background:#fff0d7}[data-theme=family] [data-nabd-module=shopping]{background:#e5f1e6}[data-theme=family] [data-nabd-module=meals]{background:#fbe5dd}[data-theme=family] [data-nabd-module=routines]{background:#eee6f7}[data-theme=family] [data-nabd-module=hifdh]{background:#e0f0ec}[data-theme=family] [data-nabd-module=rewards]{background:#f9e6ee}[data-theme=family] [data-nabd-module=notes]{background:#fff1ce}[data-theme=family] [data-nabd-module=prayer]{background:#e8eee1}
[data-theme=family] .title{font-size:20px;line-height:1.35}[data-theme=family] .card .sub{font-size:13px}[data-theme=family] .card .nabdIcon{padding:8px;box-sizing:content-box;background:#ffffff85;border-radius:14px}[data-theme=family] .row{border-color:#ffffff90}[data-theme=family] .routineRow{background:#f1eafa}[data-theme=family] .routineDone{background:#e4f0e4}[data-theme=family] .routineRow button{min-height:52px;min-width:52px}[data-theme=family] .familyRewardRow{background:var(--person-colour);border:0;padding:10px 12px;border-radius:12px;margin-top:6px}[data-theme=family] .panelCard{border-radius:24px}
.familyPeople{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.familyPerson{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:6px 14px 6px 6px;font-size:13px;font-weight:600}.familyInitial{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--person-colour);color:#324243;font-weight:700}
:root[data-theme=calm]{--bg:#edf1ec;--text:#2f433a;--muted:#5c6d62;--line:#d8e0d7;--g:#52705e;--p:#eaf0e7}[data-theme=calm] .card,[data-theme=calm] header,[data-theme=calm] .panelCard{background:#f9fbf7;box-shadow:none}[data-theme=calm] h1,[data-theme=calm] #clock{color:#34513f}[data-theme=calm] .goldButton,[data-theme=calm] .sheetSave{background:#52705e}
.themeChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.themeChoice{min-height:130px;border:2px solid var(--line);border-radius:18px;background:#fffdf8;padding:16px;text-align:left;color:var(--text);cursor:pointer;font:inherit}.themeChoice strong,.themeChoice>span:last-child{display:block;margin-top:8px}.themeChoice>span:last-child{font-size:12px;line-height:1.5;color:var(--muted)}.themeChoice[aria-pressed=true]{border-color:var(--g);box-shadow:0 0 0 2px #b8872e15}.themeChoice:disabled{cursor:default;opacity:.8}.themeSwatches{display:flex;gap:5px}.themeSwatches i{width:24px;height:24px;border:1px solid #0000000a;border-radius:50%;background:#f6f1e8}.themeSwatches i:nth-child(2){background:#e3d3b3}.themeSwatches i:nth-child(3){background:#b8872e}.theme-family i{background:#e8edfb}.theme-family i:nth-child(2){background:#f9e1e9}.theme-family i:nth-child(3){background:#e2efdf}.theme-calm i{background:#eaf0e7}.theme-calm i:nth-child(2){background:#c9d8c6}.theme-calm i:nth-child(3){background:#52705e}
.prayerNext{display:flex;justify-content:space-between;gap:12px;font-size:21px;margin:12px 0 18px}.prayerTimes{display:flex;justify-content:space-between;gap:8px}.prayerTimes>div{display:grid;gap:6px}.prayerTimes span{font-size:12px;color:var(--muted)}.prayerTimes strong{font-size:15px}.prayerCoordinates{display:grid;grid-template-columns:1fr 1fr;gap:12px}#prayerLocationStatus{font-size:13px;line-height:1.5}#nabdSheetBody details{margin:12px 0 24px}#nabdSheetBody summary{cursor:pointer;min-height:44px;padding:12px 0}
@media(max-width:600px){.themeChoices{grid-template-columns:1fr}.themeChoice{min-height:100px}.familyPeople{gap:7px}.familyPerson{font-size:12px}.familyInitial{width:28px;height:28px}.prayerTimes{gap:5px}.prayerTimes strong{font-size:14px}}

/* The page follows the finger while the network request uses the shared refresh. */
html,#panel{overscroll-behavior-y:contain}.nabdPullSurface{transform:translate3d(0,var(--nabd-pull-distance,0px),0);transition:transform .22s ease}.nabdPullDragging{transition:none;user-select:none}.nabdPullIndicator{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:25;display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid #dfddd3;border-radius:30px;background:#fffdf8;color:#8a6a35;box-shadow:0 4px 18px #5343200d;font:13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;pointer-events:none}.nabdPullIndicator svg{width:20px;height:20px;transition:transform .15s}.nabdPullReady svg{transform:rotate(180deg)}.nabdPullBusy svg{animation:nabdRefreshSpin .8s linear infinite}.nabdRefreshBusy [data-nabd-refresh]{opacity:.6;pointer-events:none}.customerRefreshButton{min-height:48px;margin-bottom:14px}@keyframes nabdRefreshSpin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.nabdPullSurface,.nabdPullIndicator svg{transition:none}.nabdPullBusy svg{animation:none}}


[hidden]{display:none!important}header > div:first-child::before{background:none center/contain no-repeat;clip-path:none;width:40px;height:46px}header > div:first-child::after{content:none}.nabdArchOuter{inset:0;clip-path:none;background:none center/contain no-repeat}.nabdArchInner{display:none}.accountLogo{padding-left:50px;position:relative}.accountLogo::before{content:"";position:absolute;left:0;top:0;width:38px;height:46px;background:none center/contain no-repeat}