/* Tessera. One column. The mosaic bed is the interface: each habit is its whole
   run laid out as sockets in mortar, seven to a row with the day number cut
   into each, and today's socket is the button. Words sit above each bed,
   actions behind a small menu, editing in a sheet. */

@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/familjen-grotesk-latin.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin.woff2) format('woff2')}

:root{
  /* muted, good, warn and bad all clear 4.5:1 on --ground */
  --ground:#E7E5E0; --surface:#F6F5F2; --bed:#D7D3CB; --socket:#C4BFB4; --socket-soft:#CDC9C0; --ink:#1D1C19; --muted:#5D5A52; --line:#CFCBC2;
  --accent:#2448C8; --on-accent:#FFFFFF; --good:#176B48; --warn:#8A5306; --bad:#A3351F;
  --scrim:rgba(29,28,25,.45); --shade:rgba(0,0,0,.22); --gleam:rgba(255,255,255,.55); --hatch:rgba(0,0,0,.09);
  --lapis:#2448C8; --lapis-on:#FFFFFF; --mala:#0F8A62; --mala-on:#FFFFFF; --gold:#D99A1E; --gold-on:#2A1B00; --porph:#7B2F6E; --porph-on:#FFFFFF; --cinna:#CF4A2E; --cinna-on:#FFFFFF;
  --font-display:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#13161C; --surface:#1B1F27; --bed:#0D1014; --socket:#262B35; --socket-soft:#1C2129; --ink:#ECEDF0; --muted:#9AA0AB; --line:#2B313C;
    --accent:#6F93FF; --on-accent:#0B1226; --good:#45C68F; --warn:#E6AC45; --bad:#F27B6A;
    --scrim:rgba(0,0,0,.62); --shade:rgba(0,0,0,.6); --gleam:rgba(255,255,255,.3); --hatch:rgba(255,255,255,.07);
    --lapis:#5B82FF; --lapis-on:#0A1230; --mala:#35C294; --mala-on:#06261A; --gold:#F0B744; --gold-on:#2A1B00; --porph:#D277C4; --porph-on:#2A0A26; --cinna:#FF7A5C; --cinna-on:#2E0C04;
    color-scheme:dark;
  }
}

/* each habit has a glaze: --c is the glass colour, --on is the ink that reads on it */
.g-lapis{--c:var(--lapis); --on:var(--lapis-on)}
.g-mala{--c:var(--mala); --on:var(--mala-on)}
.g-gold{--c:var(--gold); --on:var(--gold-on)}
.g-porph{--c:var(--porph); --on:var(--porph-on)}
.g-cinna{--c:var(--cinna); --on:var(--cinna-on)}
:root{--c:var(--lapis); --on:var(--lapis-on)}

*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:calc(18px + env(safe-area-inset-top, 0px)) calc(60px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color:transparent;
}
[hidden]{display:none !important}
.wrap{max-width:520px; margin:0 auto; display:grid; gap:26px}
h1,h2,h3,p,dl,dd{margin:0}
button{font:inherit; color:inherit; touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hint{font-size:13px; color:var(--muted)}

/* header */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px}
.mark{display:grid; grid-template-columns:repeat(2,9px); gap:2px; padding:3px; background:var(--bed); border-radius:4px}
.mark i{display:block; width:9px; height:9px; border-radius:2px; background:linear-gradient(145deg, color-mix(in srgb, var(--c) 62%, white), var(--c) 55%, color-mix(in srgb, var(--c) 72%, black))}
h1{font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.01em; line-height:1}
.today{display:grid; gap:12px}
.date{font-size:16px}
.date b{font-weight:600}
.date span{color:var(--muted)}
.strip{display:flex; gap:12px; flex-wrap:wrap}
.strip:empty{display:none}
.ts{display:grid; justify-items:center; gap:5px; width:78px; background:none; border:0; padding:0; cursor:pointer; border-radius:8px}
.ts .c{width:30px}
.ts span{font-size:11px; color:var(--muted); max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2}
.note{font-size:13px; color:var(--warn); font-weight:500}
.note:empty{display:none}

/* buttons */
.btn{padding:10px 16px; border:1px solid var(--line); background:var(--surface); border-radius:10px; cursor:pointer; font-weight:600; line-height:1.3}
.btn.primary{background:var(--accent); border-color:transparent; color:var(--on-accent)}
.btn.danger{background:var(--bad); border-color:transparent; color:#fff}
.btn:disabled{opacity:.6; cursor:default}
.ghost{background:none; border:0; padding:6px 2px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:14px}
.ghost:hover{color:var(--ink)}
.more{width:36px; height:36px; flex:none; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--muted)}
.more[aria-expanded="true"], .more:hover{color:var(--ink); border-color:var(--muted)}
.more svg{width:18px; height:18px}

/* habit */
.list{display:grid; gap:30px}
.list:empty{display:none}
.hab{display:grid; gap:12px}
.hab + .hab{border-top:1px solid var(--line); padding-top:24px}
.hd{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.hd-text{min-width:0; display:grid; gap:3px}
.name{font-family:var(--font-display); font-weight:700; font-size:23px; line-height:1.15; letter-spacing:-.01em; overflow-wrap:anywhere; text-wrap:balance}
.status{font-size:14px; color:var(--muted); text-wrap:pretty}
.status b{color:var(--ink); font-weight:600}
.pace.good{color:var(--good); font-weight:500} .pace.warn{color:var(--warn); font-weight:500} .pace.bad{color:var(--bad); font-weight:500} .pace.muted{color:var(--muted)}
.menu{display:grid; gap:8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.facts{font-size:13px; color:var(--muted)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row:empty{display:none}
.menu .row{margin-top:2px}

/* the bed: mortar with recessed sockets, seven to a week */
.bed{
  --grout:4px; --pad:10px; --cell:60px;
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:var(--grout); padding:var(--pad);
  width:100%; max-width:calc(7 * var(--cell) + 6 * var(--grout) + 2 * var(--pad));
  background-color:var(--bed);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius:12px; box-shadow:inset 0 1px 0 var(--gleam), inset 0 0 0 1px rgba(0,0,0,.05);
}
.bed.pw{grid-template-columns:repeat(7, minmax(0,1fr)) 2.8em; max-width:calc(7 * var(--cell) + 7 * var(--grout) + 2 * var(--pad) + 2.8em)}
.bed.mid{--cell:44px}
.bed.small{--cell:34px}
.bed.mini{--cell:26px; --grout:3px; --pad:6px; border-radius:8px}
.wd{font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted); text-align:center; line-height:1.3; padding-bottom:1px}
.wd.now{color:var(--c)}
.bed.mini .wd{font-size:9px}
.wt{display:grid; place-items:center; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--muted)}
.wt.hit{color:var(--good); font-weight:600} .wt.current{color:var(--ink); font-weight:600} .wt.future{opacity:.55}
.bed.mini .wt{font-size:9px}

.c{position:relative; display:block; width:100%; aspect-ratio:1; border:0; padding:0; margin:0; background:none; border-radius:4px; cursor:default}
.c::before{content:""; position:absolute; inset:0; border-radius:4px; background:var(--socket); box-shadow:inset 0 1.5px 2px var(--shade), inset 0 -1px 0 var(--gleam)}
.c.future::before{background:var(--socket-soft); box-shadow:inset 0 1px 1.5px rgba(0,0,0,.12)}
.c.miss::before{background-image:repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 4px)}
.c.rest::before{background:none; box-shadow:none}
.c.void{visibility:hidden}
.c.done::after{
  content:""; position:absolute; inset:1px; border-radius:3px; z-index:1;
  background:radial-gradient(70% 50% at 28% 22%, rgba(255,255,255,.42), transparent 70%), linear-gradient(145deg, color-mix(in srgb, var(--c) 62%, white) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 72%, black) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 1.5px var(--shade);
  transform:translate(var(--dx,0px), var(--dy,0px)) rotate(var(--r,0deg));
}
.c.bonus::after{inset:24%; border-radius:2px}
.c.today::before{box-shadow:inset 0 0 0 2px var(--c), inset 0 1.5px 2px var(--shade)}
.c.due::before{animation:beckon 2.6s ease-in-out infinite}
@keyframes beckon{0%,100%{box-shadow:inset 0 0 0 2px var(--c), inset 0 1.5px 2px var(--shade), 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent)} 50%{box-shadow:inset 0 0 0 2px var(--c), inset 0 1.5px 2px var(--shade), 0 0 0 6px color-mix(in srgb, var(--c) 0%, transparent)}}
/* the cut-in day number: ink at reduced opacity reads on the socket in both themes */
.c .n{position:absolute; right:4px; bottom:2px; z-index:2; font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; color:var(--ink); opacity:.72; pointer-events:none}
.c.done .n{color:var(--on); opacity:.9}
.c.due .n{color:var(--c); opacity:1; font-weight:700}
.c.rest .n, .c.future .n{opacity:.45}
.c .tl{position:absolute; left:4px; top:3px; z-index:2; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c); line-height:1; pointer-events:none}
.c.done .tl{color:var(--on); opacity:.85}
.bed.small .tl, .bed.mini .tl, .ts .tl{display:none}
.bed.small .n{font-size:9px; right:3px}
button.c{cursor:pointer}
button.c:hover::before{filter:brightness(.95)}
button.c:active::before{filter:brightness(.9)}
.c.lay::after{animation:lay .45s cubic-bezier(.22,1.25,.36,1)}
@keyframes lay{from{transform:translate(var(--dx,0px), var(--dy,0px)) rotate(calc(var(--r,0deg) - 12deg)) scale(1.4); opacity:.4} to{transform:translate(var(--dx,0px), var(--dy,0px)) rotate(var(--r,0deg)) scale(1); opacity:1}}
@media (prefers-reduced-motion: reduce){ .c.due::before{animation:none} .c.lay::after{animation:none} }

/* empty state */
.empty{display:grid; gap:16px}
.lead{font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1.15; letter-spacing:-.01em; text-wrap:balance}
.copy{max-width:46ch; text-wrap:pretty}
.eg{display:grid; gap:8px}
.starts{display:grid; gap:8px}
.start{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer}
.start:hover{border-color:var(--muted)}
.start .c{width:30px}
.start b{display:block; font-weight:600}
.start span{display:block; font-size:13px; color:var(--muted)}

/* archived */
details summary{cursor:pointer; color:var(--muted); font-size:14px}
.arch{display:flex; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line)}
.arch span{flex:1; min-width:0; overflow-wrap:anywhere}

/* footer */
.foot{display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--line)}

/* sheets: the editor, the account, the sign-in */
.sheet{border:0; padding:0; background:var(--surface); color:var(--ink); width:100%; max-width:100%; max-height:calc(100dvh - 20px); margin:auto 0 0 0; border-radius:18px 18px 0 0; box-shadow:0 -10px 40px var(--shade)}
.sheet::backdrop{background:var(--scrim)}
@media (min-width:640px){ .sheet{margin:auto; max-width:540px; border-radius:16px; max-height:calc(100dvh - 48px)} }
.sheet form, .sheet .acct, .sheet .step{display:grid; gap:18px}
.sheet form, .sheet .acct{padding:18px max(18px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px))}
.sheet form[hidden], .sheet form:has(> .step[hidden]){display:none}
.sh-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sh-head h2{font-family:var(--font-display); font-weight:700; font-size:22px}
.x{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none; cursor:pointer; font-size:20px; line-height:1; color:var(--muted); display:grid; place-items:center}
.field{display:grid; gap:6px}
.field > span, legend{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:0}
fieldset{border:0; padding:0; margin:0; display:grid; gap:8px; min-width:0}
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"]{font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--ground); color:var(--ink); width:100%}
input[type="text"]{font-family:var(--font-display); font-size:20px; font-weight:600}
input[type="email"]{font-size:17px}
input.code{font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:.28em; text-align:center; font-variant-numeric:tabular-nums}
input[type="number"]{width:7ch}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{padding:8px 13px; border:1px solid var(--line); background:transparent; border-radius:999px; cursor:pointer; line-height:1.3}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.chips.days .chip{width:42px; padding-inline:0; text-align:center}
.stepper{display:flex; align-items:center; gap:10px}
.stepper button{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:18px; line-height:1}
.stepper output{font-size:20px; font-weight:600; min-width:2ch; text-align:center; font-variant-numeric:tabular-nums}
.custom{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.swatches{display:flex; gap:8px}
.sw{width:32px; height:32px; border-radius:8px; border:0; cursor:pointer; background:linear-gradient(145deg, color-mix(in srgb, var(--c) 62%, white), var(--c) 50%, color-mix(in srgb, var(--c) 72%, black)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.25)}
.sw[aria-pressed="true"]{outline:2px solid var(--ink); outline-offset:2px}
.preview{display:grid; gap:8px}
.acct .copy b{overflow-wrap:anywhere}

/* toast, with an optional Undo */
#toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--ink); color:var(--ground); padding:10px 14px; border-radius:10px; font-size:14px; max-width:calc(100% - 32px); z-index:30; display:flex; gap:14px; align-items:center}
#toast button{background:none; border:0; padding:0; color:var(--ground); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer}