/* NouvelAge & ZAT — 90-Day Content Challenge portal
   Palette and card design carried over from the original Video Log page. */

:root{
  --espresso:#58382C; --deep:#3F2C1D; --caramel:#9E6E4A; --taupe:#C3A494;
  --cream:#FCF5F0; --peach:#FFD4B4; --ink:#2B1D13; --bone:#E9E0DB;
  --line:rgba(195,164,148,.34); --ok:#3F7A5A; --warn:#B4472F; --amber:#B07A25;
  --head:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'DM Sans','Inter Tight',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap.wide{max-width:1440px}
a{color:var(--espresso)}

/* ---------------------------------------------------------------- header */
header{background:var(--deep);color:var(--cream);padding:28px 0 24px}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);font-weight:700}
h1{font-family:var(--head);font-weight:600;font-size:clamp(28px,5vw,44px);
  line-height:1.05;margin:11px 0 6px;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--peach)}
.dek{color:rgba(252,245,240,.7);font-size:14.5px;max-width:62ch}
.htop{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.hact{display:flex;gap:8px;align-items:center;flex-shrink:0;padding-top:4px}

/* identity strip — read-only account details */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin-top:22px}
.who .f{background:rgba(252,245,240,.07);border:1px solid rgba(195,164,148,.3);
  border-radius:5px;padding:9px 12px}
.who label{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--taupe);font-weight:700;margin-bottom:3px}
.who .val{font-size:14.5px;color:var(--cream);word-break:break-word}
.who .val.empty{color:rgba(252,245,240,.35)}
.who input,.who select{width:100%;font:inherit;font-size:14.5px;color:var(--cream);
  background:rgba(252,245,240,.08);border:1px solid rgba(195,164,148,.4);
  border-radius:5px;padding:10px 12px}
.who input:focus{outline:none;border-color:var(--peach);background:rgba(252,245,240,.14)}

/* ------------------------------------------------------------- stat bar */
.statbar{position:sticky;top:0;z-index:20;background:var(--espresso);color:var(--cream);
  border-bottom:1px solid rgba(252,245,240,.14);box-shadow:0 2px 14px -8px rgba(0,0,0,.5)}
.stats{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:11px 0}
.st{flex:1;min-width:104px;padding:2px 10px;border-right:1px solid rgba(252,245,240,.16)}
.st:last-of-type{border-right:none}
.st .l{font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--taupe);font-weight:700}
.st .v{font-family:var(--head);font-size:19px;line-height:1.2;margin-top:1px}
.st .v small{font-size:11px;color:rgba(252,245,240,.55);font-family:var(--body)}
.v.good{color:#9FD9B4} .v.bad{color:#FFB5A1} .v.warn{color:#FFD9A1}
.pbar{height:4px;background:rgba(252,245,240,.16)}
.pbar div{height:100%;background:var(--peach);width:0;transition:width .25s}

/* -------------------------------------------------------------- controls */
.tools{display:flex;gap:9px;flex-wrap:wrap;padding:16px 0 4px;align-items:center}
button,.btn{font:inherit;font-size:14px;font-weight:600;border:0;border-radius:5px;
  padding:11px 18px;cursor:pointer;transition:background .15s,transform .07s;
  text-decoration:none;display:inline-block;line-height:1.2}
button:active,.btn:active{transform:translateY(1px)}
.b1{background:var(--espresso);color:var(--cream)}
.b1:hover{background:var(--deep)}
.b2{background:#fff;color:var(--espresso);border:1px solid var(--line)}
.b2:hover{background:#FDF9F6}
.b3{background:transparent;color:var(--cream);border:1px solid rgba(195,164,148,.5)}
.b3:hover{background:rgba(252,245,240,.1)}
.bsm{font-size:12.5px;padding:7px 12px}
.bdanger{background:#fff;color:var(--warn);border:1px solid rgba(180,71,47,.4)}
.bdanger:hover{background:#FEF5F3}
.hint{font-size:12.5px;color:#7A6252;padding:8px 0 0;max-width:80ch}
.hint b{color:var(--espresso)}

input[type=text],input[type=url],input[type=tel],input[type=email],
input[type=password],input[type=date],input[type=search],select,textarea{
  font:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:5px;padding:9px 11px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--espresso);
  box-shadow:0 0 0 3px rgba(195,164,148,.25)}
label.fld{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--caramel);font-weight:700;margin-bottom:5px}

/* ---------------------------------------------------------------- layout */
section{padding:14px 0 30px}
.mh{font-family:var(--head);font-size:20px;color:var(--espresso);font-weight:600;
  margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.mh span{font-family:var(--body);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--taupe);font-weight:700;margin-left:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.card + .card{margin-top:14px}
.card h2{font-family:var(--head);font-size:19px;color:var(--espresso);
  font-weight:600;margin-bottom:4px}
.card .sub{font-size:13px;color:#7A6252;margin-bottom:14px}

/* ------------------------------------------------------------- day cards */
.day{background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:11px 12px 10px;transition:border-color .15s,box-shadow .15s}
.day.filled{border-color:var(--ok);box-shadow:0 0 0 1px rgba(63,122,90,.18)}
.day.skipped{background:#FBF6F3;border-style:dashed;opacity:.75}
.day.future{background:#FBF7F4;opacity:.55}
.day.unlocked{border-color:var(--amber);box-shadow:0 0 0 1px rgba(176,122,37,.25)}
.dtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.dn{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--espresso);font-weight:700}
.dd{font-size:11.5px;color:#9A8579}
.lnk{width:100%;font:inherit;font-size:13px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:4px;padding:8px 9px}
.lnk::placeholder{color:#BCA898}
.lnk:focus{outline:none;border-color:var(--espresso);background:#fff;
  box-shadow:0 0 0 3px rgba(195,164,148,.25)}
.drow{display:flex;gap:5px;margin-top:7px}
.pick{flex:1;position:relative}
.pick input{position:absolute;inset:0;opacity:0;pointer-events:none}
.pick span{display:block;text-align:center;font-size:10.5px;font-weight:600;
  letter-spacing:.02em;padding:5px 2px;border:1px solid var(--line);border-radius:4px;
  color:#8A7261;cursor:pointer;user-select:none}
.pick input:checked + span{background:var(--espresso);border-color:var(--espresso);
  color:var(--cream)}
.pick.skip input:checked + span{background:#9A8579;border-color:#9A8579}
.pick input:focus-visible + span{outline:2px solid var(--espresso);outline-offset:2px}
.daysave{width:100%;margin-top:7px;font-size:12px;padding:7px 10px}

/* locked day */
.dlive{display:block;font-size:12.5px;color:var(--espresso);word-break:break-all;
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
  padding:7px 9px;text-decoration:none;line-height:1.35}
.dlive:hover{background:#fff;border-color:var(--espresso)}
.dmeta{display:flex;justify-content:space-between;align-items:center;gap:6px;
  margin-top:7px;font-size:11px;color:#9A8579}
.badge{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;padding:3px 7px;border-radius:3px;background:var(--bone);color:var(--espresso)}
.badge.derm{background:var(--espresso);color:var(--cream)}
.badge.life{background:var(--taupe);color:var(--deep)}
.badge.skip{background:#EDE4DE;color:#8A7261}
.badge.ok{background:rgba(63,122,90,.15);color:var(--ok)}
.badge.bad{background:rgba(180,71,47,.13);color:var(--warn)}
.badge.amber{background:rgba(176,122,37,.15);color:var(--amber)}
.dold{margin-top:6px;font-size:11px;color:#9A8579;line-height:1.5}
.dold a{color:#9A8579;text-decoration:line-through;word-break:break-all}
.dold .why{color:#B07A25;font-style:italic}
.replace{margin-top:7px}
.replace summary{font-size:11.5px;color:var(--caramel);cursor:pointer;
  font-weight:600;list-style:none;user-select:none}
.replace summary::-webkit-details-marker{display:none}
.replace summary:hover{color:var(--espresso)}
.replace input,.replace textarea{width:100%;font-size:12.5px;padding:7px 9px;margin-top:6px}
.replace textarea{resize:vertical;min-height:52px}

/* ------------------------------------------------------------- admin nav */
.anav{background:var(--espresso);color:var(--cream);border-bottom:1px solid rgba(252,245,240,.14)}
.anav .wrap{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding-top:0;padding-bottom:0}
.anav a{color:rgba(252,245,240,.72);text-decoration:none;font-size:13.5px;font-weight:600;
  padding:13px 14px;border-bottom:2px solid transparent}
.anav a:hover{color:var(--cream)}
.anav a.on{color:var(--peach);border-bottom-color:var(--peach)}
.anav .spacer{flex:1}
.anav .sync{font-size:11.5px;color:rgba(252,245,240,.5);padding-right:10px}
.anav .sync.err{color:#FFB5A1}

/* --------------------------------------------------------------- tables */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:middle;white-space:nowrap}
th{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--caramel);
  font-weight:700;background:#FBF6F3;position:sticky;top:0;z-index:2}
th a{color:inherit;text-decoration:none}
th a:hover{color:var(--espresso)}
th a.on{color:var(--espresso)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FDFAF8}
td.num{font-variant-numeric:tabular-nums}
/* Free-text cells wrap, but never collapse so narrow that long URLs break
   one character per line. The .tblwrap scrolls horizontally instead. */
td.wrap-cell{white-space:normal;min-width:240px;max-width:380px;overflow-wrap:anywhere}
table.wide-table{min-width:940px}
td.muted,.muted{color:#9A8579}
tr.inactive td{opacity:.5}
.tblnote{font-size:12px;color:#7A6252;padding:10px 2px}
.namecell{font-weight:600}
.namecell a{text-decoration:none}
.namecell a:hover{text-decoration:underline}

/* mini progress bar inside a table cell */
.mini{width:78px;height:6px;background:var(--bone);border-radius:3px;overflow:hidden;display:inline-block;
  vertical-align:middle;margin-right:7px}
.mini i{display:block;height:100%;background:var(--caramel)}
.mini i.done{background:var(--ok)}

/* --------------------------------------------------------------- notices */
.flash{background:rgba(63,122,90,.1);border:1px solid rgba(63,122,90,.35);
  color:#2E5C43;border-radius:6px;padding:11px 14px;font-size:13.5px;margin:16px 0}
.flash.err{background:rgba(180,71,47,.09);border-color:rgba(180,71,47,.35);color:#8C3524}
.flash.warn{background:rgba(176,122,37,.1);border-color:rgba(176,122,37,.35);color:#7A5316}
.creds{background:#FBF6F3;border:1px dashed var(--caramel);border-radius:6px;
  padding:14px 16px;margin:16px 0}
.creds h3{font-family:var(--head);font-size:16px;color:var(--espresso);margin-bottom:8px}
.creds code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:2px 6px}

/* ----------------------------------------------------------------- login */
.authpage{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  background:var(--deep);padding:24px}
.authbox{width:100%;max-width:390px;margin:auto 0;background:var(--cream);border-radius:10px;
  padding:32px 30px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.authpage footer{width:100%;background:transparent;flex-shrink:0;padding-bottom:0}
.authbox .eyebrow{color:var(--caramel);text-align:center}
.authbox h1{font-size:27px;color:var(--espresso);text-align:center;margin:8px 0 4px}
.authbox .dek{color:#7A6252;text-align:center;font-size:13px;margin-bottom:22px}
.authbox label.fld{margin-top:14px}
.authbox input{width:100%}
.authbox button{width:100%;margin-top:20px}
.authfoot{text-align:center;font-size:11.5px;color:#9A8579;margin-top:18px}

/* --------------------------------------------------------------- filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:16px 0 12px}
.filters .f{display:flex;flex-direction:column}
.filters .f label{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--caramel);font-weight:700;margin-bottom:4px}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;
  padding:16px 0;font-size:13px;color:#7A6252}

footer{background:var(--deep);color:rgba(252,245,240,.55);padding:22px 0;
  font-size:12px;text-align:center}

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .st{min-width:88px}
  .htop{flex-direction:column}
}
@media print{
  .tools,.statbar,.anav,.hact{position:static}
  button,.btn{display:none}
}