@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Karla:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{--paper:#FBFBF8;--card:#FFF;--blue:#8FC1EA;--blue-deep:#3D7CB0;--ink:#1B2A33;--muted:#6E7F8A;
  --rule:#DFE6EB;--accent:#DD7A38;--accent-soft:#FBEADC;--green:#2E7D5B;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);}
body{font-family:'Karla',system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-text-size-adjust:100%;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;color:inherit;font-size:16px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.app{min-height:100vh;padding:0 0 3rem;padding-bottom:calc(3rem + env(safe-area-inset-bottom));}
.loading{padding:4rem;text-align:center;color:var(--muted);font-family:'Jost',sans-serif;letter-spacing:.04em;}

.banner{display:flex;gap:.8rem;align-items:center;justify-content:space-between;background:var(--accent-soft);
  color:#8A4A17;padding:.6rem 1.2rem;font-size:.85rem;line-height:1.4;}
.banner button{border:none;background:none;font-size:1.2rem;color:inherit;line-height:1;padding:0 .3rem;}

.top{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;
  padding:1.6rem 1.5rem 1rem;padding-top:calc(1.6rem + env(safe-area-inset-top));border-bottom:1px solid var(--rule);}
.brand{font-family:'Jost',sans-serif;font-weight:300;font-size:1.75rem;margin:0;line-height:1;}
.tagline{margin:.35rem 0 0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.views{display:flex;gap:.25rem;}
.vbtn{border:1px solid var(--rule);background:var(--card);padding:.45rem .9rem;border-radius:2px;font-size:.85rem;color:var(--muted);}
.vbtn.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}
.vbtn-icon{padding:.45rem .6rem;}

.datebar{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.5rem;border-bottom:1px solid var(--rule);
  background:var(--card);position:sticky;top:0;z-index:5;}
.nav{width:2rem;height:2rem;border:1px solid var(--rule);background:#fff;border-radius:50%;font-size:1.1rem;line-height:1;color:var(--ink);}
.nav:disabled{opacity:.3;cursor:default;}
.datebar-mid{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;}
.date-full{font-family:'Jost',sans-serif;font-size:1.05rem;}
.dows{display:flex;gap:.28rem;}
.dows i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted);border:1px solid var(--rule);padding:.1rem .28rem;border-radius:2px;}
.dows i.on{background:var(--blue);border-color:var(--blue);color:#fff;}
.today-btn{border:none;background:var(--accent-soft);color:var(--accent);padding:.3rem .7rem;border-radius:2px;font-size:.78rem;}
.saved{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);opacity:0;transition:opacity .3s;}
.saved-saving,.saved-saved{opacity:1;}

.grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1rem;padding:1.25rem 1.5rem;align-items:start;}
.weekview,.histview,.planview{padding:1.25rem 1.5rem;max-width:880px;}
.col{display:flex;flex-direction:column;gap:1rem;}

.panel{background:var(--card);border:1px solid var(--rule);border-radius:3px;overflow:visible;}
.panel-head{background:var(--blue);color:#fff;padding:.5rem .8rem;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;}
.panel-head span{font-family:'Jost',sans-serif;font-weight:300;font-size:1.25rem;line-height:1.1;}
.panel-note{font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;white-space:nowrap;}
.panel-body{padding:.7rem .8rem .9rem;}
.lineage{margin:0 0 .6rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;line-height:1.5;color:var(--muted);
  background:#F4F8FB;border-left:2px solid var(--blue);padding:.4rem .55rem;}

.task{display:flex;align-items:center;gap:.5rem;padding:.28rem 0;border-bottom:1px solid var(--rule);position:relative;}
.task-num{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--muted);width:.9rem;flex:0 0 auto;}
.task-input{flex:1;border:none;background:transparent;padding:.15rem 0;font-size:.92rem;min-width:0;}
.task-input:focus{outline:none;}
.task-done .task-input{color:var(--muted);text-decoration:line-through;}
.x{border:none;background:none;color:var(--rule);font-size:1.1rem;line-height:1;padding:0 .2rem;flex:0 0 auto;}
.task:hover .x{color:var(--muted);}
.carried{font-family:'IBM Plex Mono',monospace;font-size:.65rem;padding:.1rem .3rem;border-radius:2px;background:#EEF3F7;color:var(--muted);white-space:nowrap;}
.carried-hot{background:var(--accent-soft);color:var(--accent);}
.add{border:none;background:none;color:var(--blue-deep);font-size:.8rem;padding:.45rem 0 0;}
.empty-hint{margin:.4rem 0 0;font-size:.78rem;color:var(--muted);}

.linkwrap{position:relative;display:inline-flex;flex:0 0 auto;}
.linkbtn{width:1.15rem;height:1.15rem;border:1px dashed var(--rule);background:#fff;border-radius:2px;font-size:.7rem;line-height:1;color:var(--muted);padding:0;}
.chip{border:none;background:#EEF3F7;color:var(--blue-deep);font-size:.65rem;padding:.14rem .4rem;border-radius:2px;white-space:nowrap;max-width:7rem;overflow:hidden;text-overflow:ellipsis;}
.linkpop{position:absolute;right:0;top:1.6rem;z-index:30;background:#fff;border:1px solid var(--rule);border-radius:3px;
  padding:.5rem;width:15rem;display:flex;flex-direction:column;gap:.2rem;box-shadow:0 6px 20px rgba(27,42,51,.14);}
.linkpop strong{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:.1rem .2rem .3rem;}
.popitem{text-align:left;border:none;background:none;font-size:.83rem;padding:.35rem .4rem;border-radius:2px;color:var(--ink);}
.popitem:hover{background:#F2F6F9;}
.popitem.on{background:var(--blue-deep);color:#fff;}
.popitem-none{color:var(--muted);font-size:.76rem;border-top:1px solid var(--rule);margin-top:.2rem;padding-top:.4rem;}

.check{width:1.15rem;height:1.15rem;flex:0 0 auto;border:1px solid #B9C6CF;border-radius:2px;background:#fff;padding:0;display:grid;place-items:center;}
.check svg{width:.85rem;height:.85rem;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.check-on{background:var(--blue-deep);border-color:var(--blue-deep);}
.check-on svg{opacity:1;}

.values{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;}
.value-box{border:1px solid var(--rule);border-radius:2px;padding:.7rem .5rem;font-size:.85rem;text-align:center;background:#fff;}
.rblock{margin-bottom:.9rem;}
.rblock h4{margin:0 0 .1rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.habits{display:flex;flex-direction:column;gap:.15rem;}
.hrow{display:flex;align-items:center;gap:.55rem;padding:.35rem 0;font-size:.9rem;cursor:pointer;}
.water{display:flex;gap:.2rem;margin-top:.7rem;}
.glass{border:none;background:none;padding:0;width:1.8rem;}
.glass svg{width:100%;display:block;}
.glass-line{fill:none;stroke:var(--accent);stroke-width:1.3;}
.glass-fill{fill:var(--accent);opacity:0;transition:opacity .18s;}
.glass-full .glass-fill{opacity:.85;}

.line-input{width:100%;border:none;border-bottom:1px solid var(--rule);padding:.3rem 0;font-size:.9rem;background:transparent;}
.line-input:focus{outline:none;border-color:var(--blue-deep);}
.line-input.big{font-family:'Jost',sans-serif;font-size:1.3rem;font-weight:300;}
.line-input.num{max-width:6rem;font-family:'IBM Plex Mono',monospace;}
.area{width:100%;min-height:7rem;border:none;resize:vertical;font-size:.9rem;line-height:1.9;
  background:repeating-linear-gradient(transparent,transparent 1.7rem,var(--rule) 1.7rem,var(--rule) calc(1.7rem + 1px));background-attachment:local;}
.area-sm{min-height:3.6rem;}
.area:focus{outline:none;}
.margin-note{font-size:.75rem;color:var(--muted);font-style:italic;line-height:1.6;padding:0 .2rem;}
.read{margin:.9rem 0 0;font-size:.85rem;line-height:1.6;color:var(--muted);}
.subhead{margin:1.2rem 0 .3rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.fld{display:block;margin-bottom:.6rem;}
.fld > span{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.1rem;}

.plan{display:flex;flex-direction:column;gap:1rem;}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.6rem;}
.gcard{text-align:left;border:1px solid var(--rule);border-radius:3px;padding:.7rem .75rem;background:#fff;display:flex;flex-direction:column;gap:.3rem;}
.gcard:hover{border-color:var(--blue-deep);}
.gcard h4{margin:0;font-family:'Jost',sans-serif;font-weight:400;font-size:1.02rem;line-height:1.25;}
.gtype{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.gtrack{height:.35rem;background:#F2F6F9;border-radius:99px;overflow:hidden;margin-top:.2rem;}
.gfill{display:block;height:100%;background:var(--blue-deep);}
.gnum{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted);}
.gpace{font-family:'IBM Plex Mono',monospace;font-size:.68rem;}
.gpace.ok{color:var(--green);} .gpace.behind{color:var(--accent);}
.gfrogs{font-size:.68rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:.3rem;margin-top:.1rem;}
.gcard-parked{opacity:.75;border-style:dashed;}
.gcard-done{background:#F6FAF8;border-color:#CBE3D8;}
.gcard-stages .gfill{background:var(--accent);}
.gcard-practice .gfill{background:var(--green);}

.metric{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0;}
.metric label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:.2rem;}
.suggest{width:100%;border:1px dashed var(--blue-deep);background:#F4F8FB;color:var(--blue-deep);padding:.55rem;border-radius:2px;font-size:.82rem;margin-bottom:.7rem;}
.mrows{display:flex;flex-direction:column;}
.mrow{display:grid;grid-template-columns:2.2rem 4.2rem 4.2rem 1fr 5rem;gap:.5rem;align-items:center;padding:.3rem 0;border-bottom:1px solid var(--rule);}
.mrow-now{background:#FEFAF6;}
.mname{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted);}
.mnum{border:1px solid var(--rule);border-radius:2px;padding:.22rem .35rem;font-size:.8rem;background:#fff;min-width:0;font-family:'IBM Plex Mono',monospace;}
.mnum:focus{outline:none;border-color:var(--blue-deep);}
.mtrack{position:relative;height:.4rem;background:#F2F6F9;border-radius:99px;}
.mfill{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:99px;}
.mexpect{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;background:var(--accent);}
.mpace{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--muted);text-align:right;}
.mpace.ok{color:var(--green);} .mpace.behind{color:var(--accent);}
.mon-sel{border:1px solid var(--rule);border-radius:2px;font-size:.72rem;padding:.15rem .2rem;background:#fff;color:var(--muted);}
.pcount{margin:.6rem 0 0;font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--muted);}
.pcount strong{font-family:'Jost',sans-serif;font-size:1.6rem;font-weight:300;color:var(--ink);}
.typebar{display:flex;gap:.3rem;margin-top:.8rem;flex-wrap:wrap;}
.typehint{margin:.45rem 0 0;font-size:.8rem;color:var(--muted);}

.hist{display:flex;flex-direction:column;gap:1rem;}
.hist-empty{padding:3rem 1rem;text-align:center;color:var(--muted);}
.hist-empty h2{font-family:'Jost',sans-serif;font-weight:300;color:var(--ink);}
.hist-empty p{max-width:34rem;margin:.5rem auto 0;line-height:1.6;font-size:.9rem;}
.stat-row{display:flex;gap:1rem;flex-wrap:wrap;}
.stat{flex:1;min-width:8rem;background:var(--card);border:1px solid var(--rule);padding:.9rem 1rem;border-radius:3px;}
.stat-n{display:block;font-family:'Jost',sans-serif;font-size:2rem;font-weight:300;line-height:1;}
.stat-l{display:block;margin-top:.3rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.mini-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:.35rem;}
.mini{position:relative;aspect-ratio:3/4;border:1px solid var(--rule);background:#fff;border-radius:2px;padding:0;overflow:hidden;display:block;}
.mini-blank{background:repeating-linear-gradient(45deg,#F7F9FA,#F7F9FA 3px,#fff 3px,#fff 6px);}
.mini-today{border-color:var(--accent);border-width:1.5px;}
.mini-bar{position:absolute;left:0;right:0;bottom:0;background:var(--blue);opacity:.75;}
.mini-dots{position:absolute;top:2px;left:0;right:0;display:flex;justify-content:center;gap:1px;}
.mini-dots i{width:2px;height:2px;border-radius:50%;background:var(--rule);}
.mini-dots i.on{background:var(--accent);}
.mini-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.7rem;font-size:.7rem;color:var(--muted);}
.dow{display:flex;gap:.5rem;align-items:flex-end;}
.dow-col{flex:1;text-align:center;}
.dow-track{height:5rem;background:#F2F6F9;border-radius:2px;display:flex;align-items:flex-end;}
.dow-fill{width:100%;background:var(--blue);border-radius:2px;}
.dow-best{background:var(--accent);}
.dow-l{display:block;margin-top:.35rem;font-size:.72rem;color:var(--muted);}
.dow-v{display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;}
.habits-stat{display:flex;flex-direction:column;gap:.5rem;}
.hs-row{display:flex;align-items:center;gap:.6rem;font-size:.85rem;}
.hs-l{flex:0 0 10rem;}
.hs-track{flex:1;height:.45rem;background:#F2F6F9;border-radius:99px;overflow:hidden;}
.hs-fill{display:block;height:100%;background:var(--blue-deep);}
.hs-v{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted);width:2.5rem;text-align:right;}

.sheet-wrap{position:fixed;inset:0;background:rgba(27,42,51,.45);display:grid;place-items:center;padding:1rem;z-index:50;}
.sheet{background:#fff;border-radius:4px;max-width:600px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;}
.sheet-wide{max-width:720px;}
.sheet-head{padding:1.3rem 1.4rem .9rem;border-bottom:1px solid var(--rule);}
.sheet-head h2{margin:0;font-family:'Jost',sans-serif;font-weight:300;font-size:1.35rem;}
.sheet-head p{margin:.5rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.55;}
.sheet-list{overflow-y:auto;padding:.8rem 1.4rem;-webkit-overflow-scrolling:touch;}
.sheet-row{padding:.85rem 0;border-bottom:1px solid var(--rule);}
.sheet-text{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.92rem;margin-bottom:.5rem;}
.sheet-where{font-family:'IBM Plex Mono',monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--blue);padding:.12rem .35rem;border-radius:2px;}
.segbtns{display:flex;gap:.3rem;}
.seg{border:1px solid var(--rule);background:#fff;padding:.4rem .8rem;border-radius:2px;font-size:.8rem;color:var(--muted);}
.seg.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}
.seg.on.seg-drop{background:var(--accent);border-color:var(--accent);}
.sheet-foot{display:flex;justify-content:space-between;gap:.6rem;padding:1rem 1.4rem;border-top:1px solid var(--rule);}
.sheet-foot-wide .foot-left,.sheet-foot-wide .foot-right{display:flex;gap:.4rem;}
.ghost{border:1px solid var(--rule);background:#fff;padding:.55rem 1rem;border-radius:2px;font-size:.85rem;color:var(--muted);text-decoration:none;display:inline-block;}
.primary{border:none;background:var(--blue-deep);color:#fff;padding:.55rem 1.2rem;border-radius:2px;font-size:.85rem;}
.wide{width:100%;margin-top:.5rem;}
.center{text-align:center;}
.drow{display:flex;justify-content:space-between;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.85rem;color:var(--muted);}
.drow strong{color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:.85rem;font-weight:500;}
.ver{margin:1rem 0 0;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--muted);}
.foot{text-align:center;font-size:.7rem;color:var(--muted);padding:2rem 1rem 0;letter-spacing:.04em;}

@media (max-width:900px){
  .grid{grid-template-columns:1fr;padding:1rem;}
  .top{padding:1.1rem 1rem .8rem;padding-top:calc(1.1rem + env(safe-area-inset-top));}
  .brand{font-size:1.4rem;}
  .datebar{padding:.7rem 1rem;}
  .weekview,.histview,.planview{padding:1rem;}
  .mini-grid{grid-template-columns:repeat(7,1fr);}
  .hs-l{flex:0 0 7rem;}
  .mrow{grid-template-columns:2rem 3.4rem 3.4rem 1fr 4.4rem;}
  .sheet{max-height:92vh;}
  .sheet-foot{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}