/* ===== Home Dashboard — shared light theme ===== */
:root{
  --bg:#f6f7f9;            /* page background */
  --surface:#ffffff;       /* cards / tiles */
  --surface2:#eef2f7;      /* subtle panels, table headers */
  --line:#e2e8f0;          /* borders */
  --text:#1f2733;          /* primary text */
  --muted:#5a6573;         /* secondary text */
  --accent:#2563eb;        /* primary accent (blue) */
  --accent2:#d97706;       /* secondary accent (amber) */
  --green:#15803d;
  --red:#c0392b;
  --blue:#1d6fb8;
  --pink:#c2417a;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;padding:0 0 60px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- header / footer / nav ---- */
header{text-align:center;padding:30px 18px 22px;border-bottom:1px solid var(--line);background:var(--surface)}
header h1{font-size:2rem;font-weight:700;letter-spacing:.2px}
header .date,header .sub{color:var(--muted);font-size:.92rem;margin-top:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.back{display:inline-block;margin:18px 0 0;color:var(--accent);text-decoration:none;font-size:.85rem}
.back:hover{text-decoration:underline}
footer{text-align:center;color:var(--muted);font-size:.78rem;margin-top:34px;padding:0 18px;line-height:1.6}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}
.updated{color:var(--accent2)}

/* ---- generic section / cards ---- */
.section{margin-top:30px}
.section h2,.group h2{font-size:1.3rem;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.sectiontitle{margin:34px 0 14px;font-size:1.3rem;border-bottom:1px solid var(--line);padding-bottom:8px;display:flex;align-items:center;gap:10px}
.tag{font-size:.7rem;color:#fff;background:var(--accent);border-radius:20px;padding:3px 10px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.badge{font-size:.7rem;color:#fff;background:var(--accent2);border-radius:20px;padding:3px 10px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.group{margin-top:32px}
.group .note{color:var(--muted);font-size:.82rem;margin:0 0 14px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:22px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card h3{font-size:1.1rem;margin-bottom:10px;color:var(--text)}
.card ul{list-style:none}
.card li{padding:7px 0 7px 22px;position:relative;font-size:.9rem;border-bottom:1px dashed var(--line);color:var(--muted)}
.card li:before{content:"▸";position:absolute;left:2px;color:var(--accent)}
.card li:last-child{border-bottom:none}
.card p{color:var(--muted);font-size:.9rem;margin-bottom:10px}
.card .level{font-size:.72rem;color:var(--muted);margin-top:10px}
.grid .card{display:flex;flex-direction:column}

/* ---- tiles (finance / investing) ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.tile .label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
.tile .val{font-size:1.5rem;font-weight:700;margin:6px 0 2px;color:var(--text)}
.tile .chg{font-size:.85rem;font-weight:600}
.tile .src{font-size:.7rem;color:var(--muted);margin-top:6px}
.tile a{color:var(--accent);text-decoration:none}
.up{color:var(--green)} .down{color:var(--red)} .flat{color:var(--muted)}

/* ---- link rows (source buttons) ---- */
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.links a{font-size:.82rem;color:var(--text);text-decoration:none;background:var(--surface2);border:1px solid var(--line);padding:7px 12px;border-radius:8px;transition:border-color .15s,color .15s}
.links a:hover{border-color:var(--accent);color:var(--accent)}
.card .links{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.card .links a{font-size:.76rem;color:var(--text);text-decoration:none;background:var(--surface2);border:1px solid var(--line);padding:5px 10px;border-radius:7px;transition:border-color .15s,color .15s}
.card .links a:hover{border-color:var(--accent);color:var(--accent)}

/* ---- news columns ---- */
.src{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.src h2{font-size:1.1rem;margin-bottom:4px;border-bottom:1px solid var(--line);padding-bottom:10px}
.src .tag{font-size:.72rem;color:var(--accent2);margin-bottom:12px}
.src ol{list-style:none;counter-reset:h}
.src li{counter-increment:h;padding:9px 0 9px 26px;position:relative;border-bottom:1px dashed var(--line);font-size:.88rem;line-height:1.4;color:var(--muted)}
.src li:before{content:counter(h);position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;background:var(--surface2);color:var(--accent);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.src li:last-child{border-bottom:none}
.src a{color:var(--text);text-decoration:none}
.src a:hover{color:var(--accent)}
.src .visit{margin-top:auto;padding-top:14px}
.src .visit a{color:var(--accent);font-size:.82rem;text-decoration:none}

/* ---- feed / headlines ---- */
.feed{list-style:none}
.feed li{padding:12px 0;border-bottom:1px dashed var(--line);font-size:.92rem;line-height:1.45;color:var(--muted)}
.feed li .meta{color:var(--accent2);font-size:.74rem;display:block;margin-top:3px}
.feed a{color:var(--text);text-decoration:none}
.feed a:hover{color:var(--accent)}
.head{margin-top:28px}
.head h2{font-size:1.2rem;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.head ul{list-style:none}
.head li{padding:11px 0;border-bottom:1px dashed var(--line);font-size:.92rem;line-height:1.45;color:var(--muted)}
.head li .meta{color:var(--accent2);font-size:.76rem;display:block;margin-top:2px}
.head a{color:var(--text);text-decoration:none}
.head a:hover{color:var(--accent)}

/* ---- daily / quiz ---- */
.block{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow)}
.block h3{font-size:1.05rem;margin-bottom:12px;color:var(--text)}
.q{margin:14px 0;padding:12px 14px;background:var(--surface2);border:1px solid var(--line);border-radius:10px}
.q .ask{font-weight:600;margin-bottom:8px;color:var(--text)}
.q .tag{font-size:.7rem;color:#fff;background:var(--accent2);border-radius:20px;padding:2px 9px;margin-left:8px}
.q label{display:block;font-size:.9rem;padding:4px 0;cursor:pointer;color:var(--text);border-radius:6px}
.q label:hover{color:var(--accent)}
.q input{margin-right:8px;accent-color:var(--accent)}
.q label.correct{color:var(--green);font-weight:600}
.q label.wrong{color:var(--red)}
.checkbtn{display:block;margin:18px auto 0;background:var(--accent);color:#fff;font-weight:700;border:none;padding:12px 26px;border-radius:30px;font-size:.95rem;cursor:pointer;transition:transform .12s,background .12s}
.checkbtn:hover{transform:translateY(-2px);background:var(--accent2)}
.score{text-align:center;font-size:1.15rem;font-weight:700;margin-top:16px;color:var(--accent2);min-height:1.4em}
.joke{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:16px;font-size:.95rem;line-height:1.7;color:var(--text)}
.joke b{color:var(--accent2)}
.riddle .ans{margin-top:10px;color:var(--green)}
.riddle details summary{cursor:pointer;color:var(--accent);font-size:.85rem}
.riddle details[open] .ans{display:block}
.riddle .ans{display:none}

/* ---- weather day cells ---- */
.grid > .day{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;text-align:center;transition:border-color .15s,transform .15s;box-shadow:var(--shadow)}
.grid > .day:hover{border-color:var(--accent);transform:translateY(-2px)}
.grid > .day .dname{font-weight:700;font-size:.95rem;color:var(--text)}
.grid > .day .cond{font-size:.78rem;color:var(--muted);min-height:32px;display:flex;align-items:center;justify-content:center}
.grid > .day .hi{color:var(--red);font-weight:700;font-size:1.1rem}
.grid > .day .lo{color:var(--blue);font-size:.9rem}
.grid > .day .wind{font-size:.72rem;color:var(--muted)}
.summary{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:20px;color:var(--muted);font-size:.9rem;line-height:1.6}
.summary b{color:var(--text)}

/* ---- holiday itinerary day blocks ---- */
.wrap > .day{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow)}
.wrap > .day .head{background:var(--surface2);padding:14px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.wrap > .day .head .d{font-weight:700;font-size:1.05rem;color:var(--text)}
.wrap > .day .head .w{margin-left:auto;font-size:.85rem;color:var(--muted)}
.wrap > .day .body{padding:14px 18px}
.wrap > .day .body .item{padding:5px 0 5px 18px;position:relative;font-size:.9rem;color:var(--muted)}
.wrap > .day .body .item:before{content:"•";position:absolute;left:2px;color:var(--accent)}
.wrap > .day .body .item b{color:var(--accent2)}
.wrap > .day .body .item .milo{color:var(--green);font-weight:600}
.kv{font-size:.9rem;line-height:1.8;color:var(--muted)}
.kv b{color:var(--accent2)}
a.link{color:var(--accent);text-decoration:none}
a.link:hover{text-decoration:underline}
table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:4px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;color:var(--muted)}
th{background:var(--surface2);color:var(--accent);font-weight:600}
tr:nth-child(even) td{background:var(--surface2)}
.cond-sun{color:var(--accent2)} .cond-driz{color:var(--blue)}
.rest{font-size:.88rem;color:var(--muted)}
.tip{background:rgba(21,128,61,.08);border:1px solid rgba(21,128,61,.3);border-left:3px solid var(--green);border-radius:8px;padding:12px 14px;font-size:.88rem;margin:6px 0;line-height:1.6;color:var(--text)}
.warn{background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.3);border-left:3px solid var(--red)}

/* ---- kids chips ---- */
.who{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.chip{background:var(--surface2);border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-size:.9rem;display:flex;align-items:center;gap:8px;color:var(--text)}
.chip b{color:var(--accent2)}
.math h3{color:var(--blue)}
.wood h3{color:var(--accent2)}

/* ---- birthdays ---- */
.card .bar{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.card .who{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.card .who .emoji{font-size:2.4rem}
.card .who h2{font-size:1.4rem;color:var(--text)}
.card .who .dob{color:var(--muted);font-size:.82rem;margin-top:2px}
.count{font-size:2.6rem;font-weight:800;line-height:1;color:var(--text)}
.count small{font-size:.95rem;font-weight:600;color:var(--muted)}
.count.soon{color:var(--accent2)}
.count.today{color:var(--pink)}
.meta{margin-top:12px;font-size:.9rem;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.meta b{color:var(--text);font-weight:600}
.agebar{height:8px;background:var(--surface2);border-radius:6px;margin-top:12px;overflow:hidden}
.agebar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.note{margin-top:26px;font-size:.84rem;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;line-height:1.55}

/* ---- equities card internals ---- */
.top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.top h3{font-size:1.2rem;color:var(--text)}
.tic{font-size:.74rem;color:#fff;background:var(--accent2);border-radius:20px;padding:2px 9px;white-space:nowrap;font-weight:700}
.price{font-size:.9rem;color:var(--muted);margin-bottom:12px}
.price b{color:var(--text)}
.blk{margin-bottom:12px}
.blk .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:5px}
.blk.today .lbl{color:var(--red)}
.blk.month .lbl{color:var(--blue)}
.blk p{font-size:.88rem;line-height:1.5;color:var(--muted)}
.blk p b{color:var(--text)}
.themes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.themes span{font-size:.72rem;background:var(--surface2);border:1px solid var(--line);border-radius:20px;padding:3px 9px;color:var(--muted)}

/* ---- sports cards ---- */
.sports .card{padding:0;overflow:hidden}
.legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:22px auto 4px;font-size:.85rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%}
.dot.live{background:var(--green)}
.dot.rest{background:var(--muted)}
.dot.soon{background:var(--accent2)}
.dot.up{background:var(--blue)}
.card .top{padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:var(--surface2)}
.badge.live{background:rgba(21,128,61,.15);color:var(--green);border:1px solid rgba(21,128,61,.4)}
.badge.rest{background:rgba(90,101,115,.1);color:var(--muted);border:1px solid rgba(90,101,115,.3)}
.badge.soon{background:rgba(217,119,6,.14);color:var(--accent2);border:1px solid rgba(217,119,6,.4)}
.badge.up{background:rgba(29,111,184,.14);color:var(--blue);border:1px solid rgba(29,111,184,.4)}
.card .top h2{font-size:1.15rem;color:var(--text)}
.card .top .emoji{font-size:1.5rem}
.card .body{padding:16px 18px;flex:1}
.card .body p{color:var(--muted);font-size:.92rem;margin-bottom:12px}
.hl{list-style:none;margin:10px 0 14px}
.hl li{padding:7px 0 7px 22px;position:relative;font-size:.9rem;border-bottom:1px dashed var(--line);color:var(--muted)}
.hl li:before{content:"▸";position:absolute;left:2px;color:var(--accent)}
.hl li strong{color:var(--text)}
.when{font-size:.82rem;color:var(--accent2);font-weight:600;margin-bottom:8px;display:inline-block}
.times{background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;margin:4px 0 14px;font-size:.84rem;line-height:1.7;color:var(--muted)}
.times b{color:var(--accent);font-weight:600}
.times .end{color:var(--accent2)}
.card .links{margin-top:auto;padding:12px 18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.card .links a{font-size:.82rem;color:var(--text);text-decoration:none;background:var(--surface2);border:1px solid var(--line);padding:6px 11px;border-radius:8px;transition:border-color .15s,color .15s}
.card .links a:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}

/* ---- index landing ---- */
body.index{display:flex;flex-direction:column;align-items:center;padding:48px 18px 60px}
body.index header{border-bottom:none;background:transparent}
.index .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:920px;width:100%}
a.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 22px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:10px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s;box-shadow:var(--shadow)}
a.tile:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 6px 18px rgba(37,99,235,.12)}
a.tile .emoji{font-size:2.2rem}
a.tile h2{font-size:1.25rem;color:var(--text)}
a.tile p{color:var(--muted);font-size:.88rem}
a.tile .num{margin-left:auto;font-size:.7rem;color:var(--accent2);border:1px solid rgba(217,119,6,.4);border-radius:20px;padding:2px 9px;align-self:flex-start}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}