/* Toolwoven Habits — a quiet journal page on a soft lilac-grey desk; indigo ink, the chart colour does the talking. */
:root{
  --ink:#24224a;--ink2:#47456b;--muted:#5f5d7d;--line:#d9d8e6;--line2:#ebeaf3;
  --bg:#f3f2f8;--paper:#fff;--wash:#f7f6fb;
  --accent:#5b57c9;--accent-dk:#45419f;--accent-wash:#ebeafb;
  --focus:#2563eb;--err:#b42318;--err-wash:#fdecea;
  --c-sage:#5f9a78;--c-blue:#2f5fa7;--c-clay:#c0694a;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --head:"Seravek","Gill Sans Nova","Gill Sans","Segoe UI",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans)}
a{color:var(--accent-dk)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:30;border-radius:8px}
.skip:focus{top:10px}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(24px,calc((100vw - 1320px)/2))}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo-name{font:600 20px/1 var(--head);letter-spacing:.005em}
.top nav{display:flex;gap:2px;flex-wrap:wrap}
.top nav a{color:var(--ink2);text-decoration:none;font-size:15px;padding:10px 12px;border-radius:8px}
.top nav a:hover{background:var(--paper);color:var(--ink)}

main{max-width:1320px;margin:0 auto;padding:0 24px}
.intro{padding:14px 0 18px;max-width:820px}
h1{font:600 38px/1.1 var(--head);margin:0;letter-spacing:-.01em}
.intro p{margin:8px 0 0;font-size:17px;color:var(--ink2)}

.tracker-wrap{background:var(--paper);border-radius:18px;padding:18px 22px 22px;box-shadow:0 1px 0 var(--line)}
.toolbar{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-bottom:12px}
.views{display:flex;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:3px}
.views label{position:relative;display:flex}
.views input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.views span{display:flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9px;font-weight:600;font-size:15px;color:var(--ink2);cursor:pointer}
.views input:checked+span{background:var(--ink);color:#fff}
.views input:focus-visible+span{outline:3px solid var(--focus);outline-offset:1px}
.nav-period{display:flex;align-items:center;gap:6px}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--ink)}
.icon-btn:hover{border-color:var(--ink2)}
.period-label{min-width:190px;text-align:center;font:600 19px/1.2 var(--head)}
.btn-soft{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--wash);font-weight:600;font-size:14.5px}
.btn-soft:hover{border-color:var(--ink2)}
.tool-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.mini{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink2)}
.mini select,.mini input{height:40px;border:1px solid #bcbad0;border-radius:9px;padding:0 10px;background:#fff;max-width:220px;font-size:15px}
.views i{font-style:normal}
/* view-specific toolbar controls: data-view is on <html> before the app script runs (from saved settings), then on #tracker */
.year-only,.chal-only{display:none}
[data-view=year] .year-only,[data-view=challenge] .chal-only{display:flex}
[data-view=year] .not-year{display:none}
[data-view=week] .sheet{min-width:640px}
.mini-check{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;min-height:40px;cursor:pointer}
.mini-check input{width:19px;height:19px;accent-color:var(--accent)}
.own #sampleBar{display:none}
.sample-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--accent-wash);border:1px solid #cfcdf2;border-radius:12px;padding:8px 8px 8px 14px;margin-bottom:12px;font-size:15px}

.sheet-scroll{overflow-x:auto;padding-bottom:4px}
/* room for the chart before the app script fills it; --hrows (habit rows + add row + mood) comes from the <head> script */
#grid:empty{min-height:calc(80px + var(--hrows,6) * 38px)}
[data-view=year] #grid:empty{min-height:520px}
[data-view=week] #grid:empty{min-height:calc(80px + var(--hrows,6) * 55px)}
.sheet{--mk:var(--c-sage);min-width:900px}
.sheet.color-blue{--mk:var(--c-blue)}.sheet.color-clay{--mk:var(--c-clay)}
.sheet.view-week{min-width:640px}
.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 2px 10px;border-bottom:2px solid var(--ink)}
.sheet-head h2{font:600 26px/1.15 var(--head);margin:0}
.sheet-head p{margin:0;color:var(--muted);font-size:14.5px}
.tracker{border-collapse:separate;border-spacing:3px;width:100%;table-layout:fixed;margin-top:6px}
.tracker th,.tracker td{padding:0;text-align:center}
.tracker thead th{font-size:12px;color:var(--muted);font-weight:600;padding:4px 0 2px;vertical-align:bottom}
.h-name{width:210px;text-align:left!important;font-size:12.5px!important;text-transform:uppercase;letter-spacing:.06em}
.view-week .h-name{width:240px}
.h-day .wd{display:block;font-size:12px;font-weight:500}
.h-day .dn{display:block;font-size:14px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.h-day.today .dn{color:#fff;background:var(--accent);border-radius:999px;display:inline-block;min-width:24px;padding:0 4px}
.h-stat{width:58px;font-size:12px!important;text-transform:uppercase;letter-spacing:.05em}
.name-cell{position:relative;text-align:left!important;font-weight:600;font-size:15px;padding-right:4px!important}
.name-in{width:100%;height:36px;border:1px solid transparent;border-radius:8px;background:transparent;padding:0 26px 0 6px;font-size:15px;font-weight:600;color:var(--ink);text-overflow:ellipsis}
.name-in:hover{border-color:var(--line)}
.name-in:focus{border-color:var(--ink2);background:#fff}
.add-in{font-weight:500;color:var(--accent-dk)}
.add-in::placeholder{color:var(--accent-dk);opacity:.85}
.del{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:6px;background:none;color:var(--muted);display:grid;place-items:center;opacity:0}
.name-cell:hover .del,.del:focus-visible{opacity:1}
.del:hover{color:var(--err);background:var(--err-wash)}
.mood-name{padding-left:6px!important;color:var(--ink2)}
.mini-stat{display:none}
.cell{display:block;width:100%;aspect-ratio:1;min-height:22px;max-height:40px;border:1.5px solid #cfcde0;border-radius:6px;background:#fff;padding:0;position:relative}
.view-week .cell{max-height:56px;min-height:40px;border-radius:9px}
.cell:hover{border-color:var(--mk)}
.cell.future{background:#fbfbfd;border-style:dashed}
.cell.today{box-shadow:0 0 0 2px var(--accent)}
.style-square .cell.done{background:var(--mk);border-color:var(--mk)}
.style-square .cell.done::after{content:"";position:absolute;left:50%;top:46%;width:30%;height:16%;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translate(-50%,-50%) rotate(-45deg)}
.style-dot .cell.done::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--mk)}
.cell.mood{border-radius:50%}
.cell.mood[class*="mood-"]{background:var(--mc);border-color:color-mix(in srgb,var(--mc) 70%,#000)}
.cell:focus-visible{outline:3px solid var(--focus);outline-offset:1px;z-index:1}
.stat{font-size:14px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.streak.hot{color:var(--mk)}
.add-fill{border-bottom:1px dashed var(--line)}
td.void{background:repeating-linear-gradient(45deg,transparent 0 3px,var(--line2) 3px 4px);border-radius:4px}
.year .cell{min-height:18px;border-radius:4px}
.year .h-name{width:70px}
.year .month{font-size:13.5px;font-weight:700;padding-left:4px!important}
.year thead th{font-size:11.5px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13.5px;color:var(--ink2)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border-radius:50%;display:block}
.sheet-foot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.grid-help{font-size:13.5px;color:var(--muted);margin:10px 0 0}
.field-error{color:var(--err);font-weight:650;font-size:14.5px;margin:6px 0 0}
[aria-invalid="true"]{border-color:var(--err)!important;background:var(--err-wash)!important}

.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.panel h2{font:600 18px/1.2 var(--head);margin:0 0 10px}
.panel{display:flex;flex-direction:column;gap:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--ink2);min-width:0}
.f select{height:42px;border:1px solid #bcbad0;border-radius:9px;padding:0 10px;background:#fff;font-size:15px;font-weight:400;color:var(--ink);width:100%}
.btn-main{min-height:46px;border:0;border-radius:11px;background:var(--ink);color:#fff;font-weight:700;font-size:16px}
.btn-main:hover{background:#15133a}
.data-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-line{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:42px;padding:4px 10px;border:1px solid #bcbad0;border-radius:9px;background:#fff;font-weight:600;font-size:14px;line-height:1.25;cursor:pointer}
.btn-line:hover{border-color:var(--ink2)}
.btn-line.danger{color:var(--err)}
#restoreFile:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.status{margin:0;font-size:14px;color:var(--ink2)}

.lower{padding:44px 0 56px}
.lower h2{font:600 28px/1.15 var(--head);margin:0 0 16px}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:16px}
.how-grid article{background:var(--paper);border-radius:14px;padding:16px 18px}
.how-grid h3{margin:0 0 6px;font:600 17.5px/1.25 var(--head)}
.how-grid p{margin:0;color:var(--ink2);font-size:15.5px}
.guide-link{margin:0 0 40px}
.faq{max-width:880px;background:var(--paper);border-radius:14px;padding:4px 20px}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:15px 34px 15px 0;font-weight:650;font-size:17px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:11px;font-size:24px;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--ink2)}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:20px max(24px,calc((100vw - 1320px)/2));border-top:1px solid var(--line);color:var(--ink2);font-size:15px}
.foot b{font:600 16px/1 var(--head);color:var(--ink)}
.foot nav{margin-left:auto;display:flex;gap:4px}
.foot a{color:var(--ink);padding:10px 8px}

@media (max-width:1100px){.panels{grid-template-columns:1fr 1fr}.how-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
  .top{padding:10px 16px}
  .top nav a:not([href="/about"]){display:none}
  main{padding:0 12px}
  h1{font-size:29px}
  .intro{padding:8px 4px 14px}
  .intro p{font-size:16px}
  .tracker-wrap{padding:14px 12px 16px;border-radius:14px}
  .views{width:100%}
  .views label{flex:1}
  .views span{width:100%;justify-content:center;padding:0 6px;font-size:14.5px}
  .views i{display:none}
  #grid:empty{min-height:calc(80px + var(--hrows,6) * 41px)}
  .nav-period{width:100%}
  .period-label{flex:1;min-width:0;font-size:17px}
  .tool-right{margin-left:0;width:100%}
  .sheet{min-width:1120px}
  .sheet.view-year{min-width:1000px}
  .h-name{width:150px}
  .name-cell,.tracker thead .h-name{position:sticky;left:0;z-index:2;background:#fff}
  .sheet.view-week,[data-view=week] .sheet{min-width:0}
  .view-week .tracker,.view-week .tracker thead,.view-week .tracker tbody{display:block}
  .view-week .tracker tr{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
  .view-week .tracker thead th.h-name,.view-week .h-stat,.view-week .stat,.view-week .add-fill{display:none}
  .view-week .name-cell{grid-column:1/-1;position:static;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
  .view-week .name-in{width:auto;flex:1 1 auto;min-width:0;height:40px}
  .name-in{height:40px}
  .view-week .mini-stat{display:block;font-size:13px;font-weight:600;color:var(--muted);flex:0 0 auto;padding-right:30px}
  .view-week .del{opacity:1}
  .view-week .cell{min-height:42px;max-height:none;aspect-ratio:auto;height:44px}
  .view-week .cell.mood{border-radius:12px}
  .sheet-scroll::before{content:"Swipe sideways to see every day →";display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
  .sheet-scroll:has(.view-week)::before,[data-view=week] .sheet-scroll::before{display:none}
  [data-view=week] #grid:empty{min-height:calc(var(--hrows,6) * 96px)}
  .panels{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .lower h2{font-size:24px}
  .foot{padding:18px 16px}.foot nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media print{
  html,body{margin:0!important;background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top,.intro,.toolbar,.sample-bar,.grid-help,.field-error,.panels,.lower,.foot,.skip{display:none!important}
  main{max-width:none!important;padding:0!important}
  .tracker-wrap{padding:0!important;box-shadow:none!important;border-radius:0}
  .sheet-scroll{overflow:visible!important}
  .sheet-scroll::before{display:none!important}
  .sheet{min-width:0!important;width:100%}
  .add-row,.del{display:none!important}
  .name-in{border:0!important;padding:0!important;height:auto;font-size:11pt}
  .cell{max-height:none!important;aspect-ratio:auto!important;height:12mm}
  .view-week .cell{height:18mm}
  .year .cell{height:9.5mm;min-height:0}
  .cell:focus,.cell:focus-visible{outline:none!important}
  .cell.today{box-shadow:none}
  .cell.future{background:#fff;border-style:solid}
  .print-blank .cell{background:#fff!important;border-color:#bbb!important}
  .print-blank .cell::after{display:none!important}
  .print-blank .stat{color:transparent!important}
  .print-blank #progress{visibility:hidden}
}

/* about / privacy / guide */
.doc{max-width:760px;margin:0 auto;padding:30px 24px 60px}
.doc h1{font-size:36px;margin-bottom:14px}
.doc h2{font:600 22px/1.2 var(--head);margin:30px 0 8px}
.doc p,.doc li{color:var(--ink2);font-size:16.5px}
.doc .lead{font-size:18.5px;color:var(--ink)}
.doc .small{font-size:14px;color:var(--muted)}
.doc code{font:15px ui-monospace,Menlo,Consolas,monospace;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.doc .table-scroll{overflow-x:auto;background:#fff;border-radius:12px;border:1px solid var(--line)}
.doc table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}
.doc th,.doc td{padding:10px 12px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
.doc thead th{background:var(--wash);border-bottom:2px solid var(--ink)}
.doc .back{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:11px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700}
.doc .btn-line{text-decoration:none;color:var(--ink)}
@media (max-width:700px){.doc{padding:20px 16px 44px}.doc h1{font-size:30px}.doc-page .top nav a{display:inline-block!important}}