/* frame.css — the new BLE frame (step 3)
   - the sticky Now bar on every page (nowbar.js)
   - the right sidebar retired (its calendar/schedule cards now live on Time › Home)
   - the new Today page (today.js), same board look as My Board and Routine */

/* ---------- right sidebar: retired ---------- */
.site-rail { display: none !important; }

/* Page headers stick just under the Now bar. */
@media (min-width: 760px) {
  .view__header { top: var(--now-h, 0px); }
}

/* ---------- Now bar ---------- */
.nowbar { position: sticky; top: 0; z-index: 20; background: rgba(251, 249, 244, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border, #e7e2d8); font-family: 'Kalam', cursive; color: #23201b; }
.nb-in { position: relative; max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.nb-who { display: flex; flex-direction: column; min-width: 170px; }
.nb-greet { font-family: 'Caveat', cursive; font-size: 24px; font-weight: 700; line-height: 1.05; }
.nb-when { font-size: 13.5px; color: #6f6a60; }
.nb-when b { color: #23201b; font-weight: 700; }
.nb-rails { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; min-width: 0; }
.nb-rail { display: flex; flex-direction: column; gap: 3px; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; }
button.nb-rail { cursor: pointer; border-radius: 6px; }
button.nb-rail:hover .nb-rail__sub { color: #a85338; }
.nb-rail__top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 13px; }
.nb-rail__top span { color: #6f6a60; }
.nb-rail__top b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-bar { position: relative; height: 7px; border-radius: 4px; background: #ece7de; }
.nb-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.nb-bar i { position: absolute; top: -3px; width: 2px; height: 13px; background: #23201b; border-radius: 1px; }
.nb-rail--day .nb-bar span { background: #2f5d8a; }
.nb-rail--awake .nb-bar span { background: #2c6342; }
.nb-rail--month .nb-bar span { background: #a85338; }
.nb-rail__sub { font-size: 12px; color: #6f6a60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-next { font-size: 14px; max-width: 220px; line-height: 1.3; }
.nb-next span { display: block; font-size: 12px; color: #6f6a60; }
.nb-talk { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 0; background: #c2634a; color: #fff; font: inherit; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.nb-talk:hover { background: #a85338; }
.nb-pop { position: absolute; right: 24px; top: calc(100% + 4px); width: 300px; background: #fffdfa; border-radius: 8px; box-shadow: 0 12px 32px rgba(35, 32, 27, .16); padding: 14px; z-index: 30; }
.nb-pop__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
.nb-ic { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 18px; cursor: pointer; color: #a85338; }
.nb-ic:hover { background: #f8e9e3; }
.nb-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; font-size: 13px; }
.nb-cal > span { font-size: 11px; color: #8b8478; padding-bottom: 2px; }
.nb-cal__d { position: relative; min-height: 32px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; color: #23201b; }
.nb-cal__d:hover { background: #efebe3; }
.nb-cal__d.is-past { color: #b5ada0; }
.nb-cal__d.is-today { background: #c2634a; color: #fff; }
.nb-cal__d i { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #a85338; }
.nb-cal__d.is-today i { background: #fff; }
.nb-pop__foot { margin: 8px 0 0; font-size: 11.5px; color: #6f6a60; }
@media (max-width: 720px) {
  .nb-in { padding: 8px 16px; gap: 8px 14px; }
  .nb-greet { display: none; }
  .nb-who { min-width: 0; }
  .nb-next { display: none; }
  .nb-rails { flex-basis: 100%; order: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .nb-rail__sub { display: none; }
  .nb-talk { margin-left: auto; min-height: 38px; padding: 0 12px; }
  .nb-pop { left: 16px; right: 16px; width: auto; }
}

/* ---------- Today ---------- */
#view-day .view__header { display: none; }
.td { font-family: 'Kalam', cursive; color: #23201b; background-color: #fbf9f4; background-image: radial-gradient(#e4ddd1 1px, transparent 1.2px); background-size: 24px 24px; border-radius: 6px; }
.td *, .td *::before, .td *::after { box-sizing: border-box; }
.td-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 28px 80px; display: flex; flex-direction: column; gap: 36px; }
.td-hand { font-family: 'Caveat', cursive; }
.td-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.td-lbl { font-size: 13px; color: #6f6a60; letter-spacing: .02em; }
.td-muted { margin: 0; font-size: 15px; color: #6f6a60; }
.td .c-mind { --c: #a85338; } .td .c-goal { --c: #2c6342; } .td .c-date { --c: #2f5d8a; } .td .c-appt { --c: #6b4a86; }
.td .ink { color: var(--c); }
.td-head { display: flex; flex-direction: column; gap: 2px; }
.td-h1 { margin: 0; font-size: 60px; font-weight: 700; line-height: .95; }
.td-date { margin: 4px 0 0; font-size: 18px; color: #6f6a60; font-weight: 300; }
.td-h2 { margin: 0; font-size: 34px; font-weight: 700; line-height: 1; }
.td-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.td-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.td-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 6px; background: #efebe3; font-size: 15px; cursor: pointer; }
.td-chk input { width: 18px; height: 18px; accent-color: #c2634a; }
.td-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px 28px; }
.td-w { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.td-w h3 { margin: 0 0 2px; font-family: 'Caveat', cursive; font-size: 26px; font-weight: 700; }
.td-wl { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; padding: 3px 0; border-bottom: 1px dashed #e7e2d8; }
.td-wl span:last-child { color: #6f6a60; white-space: nowrap; }
.td-wl a { color: inherit; text-decoration: none; }
.td-wl a:hover { color: #a85338; text-decoration: underline; }
.td-wl em { font-style: normal; font-size: 12.5px; }
.td-wl em.up { color: #2c6342; } .td-wl em.dn { color: #a8382e; }
.td-cols { display: flex; flex-wrap: wrap; gap: 36px 44px; align-items: flex-start; }
.td-zuly { flex: 999 1 440px; min-width: 0; background: rgba(255, 253, 250, .94); border-radius: 6px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.td-zuly__head { display: flex; align-items: center; gap: 12px; }
.td-zuly__head > div { display: flex; flex-direction: column; }
.td-zav { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2b8a2, #c2634a 70%); flex: none; }
.td-zname { font-size: 30px; font-weight: 700; line-height: 1; }
.td-say { margin: 0; font-size: 18px; line-height: 1.5; }
.td-awake { min-height: 110px; width: 100%; border: 0; border-radius: 6px; background: #f8e9e3; color: #8f3f26; font-family: 'Caveat', cursive; font-size: 42px; font-weight: 700; cursor: pointer; }
.td-awake:hover { background: #f3dccf; }
.td-count-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.td-count { font-family: 'Caveat', cursive; font-size: 60px; font-weight: 700; line-height: 1; color: #a85338; }
.td-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.td-dump { width: 100%; min-height: 150px; border: 0; background-color: transparent; background-image: linear-gradient(transparent 29px, #efeae1 29px); background-size: 100% 30px; line-height: 30px; font: inherit; font-size: 17px; color: #23201b; resize: vertical; padding: 0 2px; }
.td-dump:focus { outline: none; }
.td-ask { display: flex; gap: 8px; align-items: center; border-top: 1px solid #ece7de; padding-top: 12px; margin-top: 4px; }
.td-ask input { flex: 1; min-width: 0; border: 0; border-bottom: 1.5px solid #e2dbcf; background: transparent; font: inherit; font-size: 16px; padding: 8px 2px; }
.td-ask input:focus { outline: none; border-bottom-color: #c2634a; }
.td-mic { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #efebe3; color: #a85338; display: grid; place-items: center; cursor: pointer; flex: none; }
.td-side { flex: 1 1 300px; min-width: 0; max-width: 380px; display: flex; flex-direction: column; gap: 26px; }
/* compact month calendar — about the size of BLE's old one */
.td-mcal { max-width: 270px; }
.td-mcal__bar { font-size: 15px; margin-bottom: 4px; }
.td-mcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; font-size: 13px; }
.td-dow { font-size: 11px; color: #8b8478; padding-bottom: 2px; }
.td-d { display: flex; flex-direction: column; align-items: center; min-height: 30px; padding: 3px 0 1px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; color: #23201b; cursor: pointer; }
.td-d:hover { background: #efebe3; }
.td-d i { font-style: normal; font-size: 8px; line-height: 1; letter-spacing: 1px; color: #a85338; min-height: 8px; }
.td-d.is-past { color: #b5ada0; }
.td-d.is-wk { background: #f6efe4; }
.td-d.is-today { background: #c2634a; color: #fff; }
.td-d.is-today i { color: #fff; }
.td-mcal__key { margin: 6px 0 0; font-size: 11.5px; color: #6f6a60; }
.td-top { display: flex; flex-direction: column; gap: 2px; }
.td-t3 { display: flex; align-items: center; gap: 10px; }
.td-t3__n { width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; font-family: 'Caveat', cursive; font-size: 26px; font-weight: 700; color: #a85338; cursor: pointer; flex: none; }
.td-t3__n:hover { background: #f8e9e3; }
.td-t3__in { flex: 1; min-width: 0; border: 0; border-bottom: 1.5px dashed #e2dbcf; background: transparent; font: inherit; font-size: 16.5px; padding: 6px 2px; color: #23201b; }
.td-t3__in:focus { outline: none; border-bottom-color: #c2634a; border-bottom-style: solid; }
.td-t3.is-done .td-t3__in { color: #8b8478; text-decoration: line-through; }
.td-t3.is-done .td-t3__n { color: #2c6342; }
.td-any { display: flex; flex-direction: column; margin-bottom: 8px; }
.td-sched { display: flex; flex-direction: column; }
.td-blk { display: grid; grid-template-columns: 70px 12px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; }
.td-blk__t { font-size: 13px; color: #6f6a60; text-align: right; padding-top: 2px; white-space: nowrap; }
.td-blk__dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; background: #23201b; }
.td-blk__s { font-size: 16px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.td-blk__m { display: block; font-size: 12.5px; color: #6f6a60; }
.td-k-work .td-blk__dot, .td-k-commute .td-blk__dot { background: #23201b; }
.td-k-gym .td-blk__dot { background: #2c6342; }
.td-k-meal .td-blk__dot { background: transparent; border: 2px solid #d9a35a; }
.td-k-protect .td-blk__dot { background: transparent; border: 2px dashed #2c6342; }
.td-k-wind .td-blk__dot, .td-k-sleep .td-blk__dot { background: transparent; border: 2px dashed #8b9bb4; }
.td-k-wake .td-blk__dot { background: #d9a35a; }
.td-k-item .td-blk__dot { background: #a85338; }
.td-blk.is-past { opacity: .45; }
.td-blk.is-now .td-blk__s { color: #a85338; font-weight: 700; }
.td-blk.is-done .td-blk__s { text-decoration: line-through; color: #8b8478; }
.td-nowline { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; margin: 2px 0; }
.td-nowline span:first-child { font-size: 12.5px; color: #c2634a; text-align: right; }
.td-nowline span:last-child { height: 2px; background: #c2634a; border-radius: 1px; }
@media (max-width: 720px) {
  .td-wrap { padding: 20px 16px 64px; gap: 28px; }
  .td-h1 { font-size: 46px; }
  .td-zuly { padding: 20px 16px; }
  .td-side { max-width: none; }
}

/* My Board and Calendar are top-level menu items now — no duplicates under Time. */
.nav-sub[data-section="time"] .nav-subitem[data-sub="board"],
.nav-sub[data-section="time"] .nav-subitem[data-sub="calendar"] { display: none; }