/* Habit Tracker · app skin, 9-oct-2026 (landing demo).
   Loads after tracker.css and only restyles: no class names or behavior change.
   Sarah's Brand Board: black #1C1C1C, white, beige #E5DBC9, taupe #BFB1A6, gold #E5C55D (black text on gold),
   cream #F4EFE6 for the app background, brick #B33A1C only for "went quiet".
   Taupe text uses a deeper taupe (#7A6E64) so small labels stay readable on cream.
   To undo: remove the <link> to this file. */

.dt{
  --ink:#1C1C1C;--ink-2:#2A2A2A;--cream:#F4EFE6;--beige:#E5DBC9;--taupe:#BFB1A6;--taupe-ink:#7A6E64;
  --gold:#E5C55D;--gold-2:#DDBB4C;--brick:#B33A1C;--brick-tint:#F6E1DA;--gold-tint:#FBF0CF;
  --muted:#675E57;--light:#8A7F76;--sunk:#ECE4D6;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --lift:0 0 0 1px rgba(28,28,28,.035),0 1px 2px rgba(28,28,28,.05),0 6px 16px -8px rgba(28,28,28,.16);
  --ease:cubic-bezier(.23,1,.32,1);
  background:var(--cream);color:var(--ink-2);font-size:14.5px;
  font-variant-numeric:lining-nums;   /* Playfair defaults to old-style figures: "Day 4" needs a full-height 4 */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.dt ::selection{background:var(--gold);color:var(--ink)}

/* ---------- header: date in small caps, title in Playfair, the week as a gold disc ---------- */

.dt .dt-bar{background:transparent;color:var(--ink);padding:6px 20px 16px;align-items:center;gap:14px}
.dt .dt-bar > div:first-child{min-width:0}
.dt .dt-bar small{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe-ink);margin:0 0 5px}
.dt .dt-bar b{display:block;font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.dt .dt-bar .dt-score{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:66px;height:66px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,#EDD27A 0%,var(--gold) 55%,#DDB948 100%);color:var(--ink);text-align:center;
  box-shadow:inset 0 0 0 1px rgba(28,28,28,.06),0 10px 20px -10px rgba(150,112,16,.65)}
.dt .dt-bar .dt-score span{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.dt .dt-bar .dt-score small{margin:4px 0 0;font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(28,28,28,.72)}

/* ---------- body, text, notes ---------- */

.dt .dt-body{padding:2px 16px 28px}
.dt .dt-lead{font-size:15px;line-height:1.5;color:var(--ink-2);margin:4px 2px 18px}
.dt .dt-flabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe-ink);margin:0 4px 8px}
.dt .dt-foot{font-size:12.5px;line-height:1.5;color:var(--muted);margin:12px 4px 0}
.dt .dt-hint{font-size:12.5px;line-height:1.45;color:var(--muted)}
.dt .dt-wait-t{color:var(--taupe-ink)}
.dt .dt-saved{font-size:12px;color:var(--taupe-ink);margin:4px 0 14px}
.dt .dt-note{background:rgba(28,28,28,.05);color:var(--ink);border-radius:14px;padding:11px 14px;font-size:13.5px;margin:0 0 14px}
.dt .dt-backmsg{background:var(--gold-tint);color:#4F3B00;border-radius:14px;padding:12px 14px;font-size:13.5px;font-weight:600;margin:0 0 14px;
  box-shadow:inset 0 0 0 1px rgba(229,197,93,.55)}
.dt .dt-link{color:var(--ink-2);font-size:13px;text-decoration-color:var(--taupe);text-underline-offset:3px}
.dt .dt-link:hover{text-decoration-color:var(--ink)}
.dt a{color:var(--ink);text-decoration-color:var(--taupe);text-underline-offset:3px}
.dt .dt-demo{margin-top:18px;border:1px dashed rgba(122,110,100,.5);border-radius:14px;padding:12px 14px;background:rgba(229,219,201,.45);
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.dt .dt-demo b{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--taupe-ink);margin-bottom:5px}

/* ---------- Today / Yesterday ---------- */

.dt .dt-seg{background:rgba(28,28,28,.06);border-radius:14px;padding:3px;margin:0 0 16px}
.dt .dt-seg button{border-radius:11px;font-size:13.5px;font-weight:600;color:var(--muted);transition:color 200ms var(--ease)}
.dt .dt-seg button.on{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(28,28,28,.08),0 3px 10px -4px rgba(28,28,28,.2)}

/* ---------- his identity statement: the hero card ---------- */

.dt .dt-app .dt-stmt{position:relative;margin:2px 0 4px;padding:42px 20px 8px;border:0;border-radius:22px;
  background:radial-gradient(140% 110% at 100% 0%,rgba(229,197,93,.2) 0%,rgba(229,197,93,0) 52%),var(--ink);
  color:var(--cream);font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;line-height:1.32;letter-spacing:-.005em;
  box-shadow:0 18px 32px -20px rgba(28,28,28,.7)}
.dt .dt-app .dt-stmt::before{content:"Identity statement";position:absolute;top:18px;left:20px;
  font:700 10px/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.dt .dt-app .dt-stmt ol{margin:12px 0 4px;padding-left:18px;font-family:var(--sans);font-style:normal;font-size:13px;line-height:1.45;color:rgba(244,239,230,.82)}
.dt .dt-app .dt-stmt ol li{margin:5px 0}
.dt .dt-app .dt-stmt .dt-more{display:inline-flex;align-items:center;margin:0;font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:500;
  color:var(--beige);text-decoration-color:rgba(229,197,93,.75);text-underline-offset:4px}
.dt .dt-app .dt-stmt .dt-more:hover{color:var(--white)}

/* ---------- section headers and sections ---------- */

.dt .dt-app .dt-card:not(.dt-prompt){background:transparent;box-shadow:none;margin-bottom:26px}
.dt .dt-app .dt-label{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 2px 4px}
.dt .dt-app .dt-hint{margin:0 2px 10px}
.dt .dt-sec-h{align-items:baseline;margin:0}
.dt .dt-sec-n{font-size:12px;font-weight:600;color:var(--taupe-ink)}
.dt .dt-app .dt-sub{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe-ink);margin:24px 4px 2px}
.dt .dt-app .dt-sub small{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:4px}
.dt .dt-app .dt-label + .dt-sub,.dt .dt-app .dt-sec-h + .dt-sub{margin-top:10px}

/* ---------- habit rows: what's left is a raised white card; done sinks back with a gold disc ---------- */

.dt .dt-row,.dt .dt-app .dt-row{gap:12px;min-height:54px;margin-top:8px;padding:12px 14px 12px 16px;border:0;border-radius:16px;
  background:var(--white);box-shadow:var(--lift);
  font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.005em;color:var(--ink);
  transition:transform 140ms var(--ease),box-shadow 200ms var(--ease)}
.dt .dt-row:hover{box-shadow:0 0 0 1px rgba(28,28,28,.06),0 1px 2px rgba(28,28,28,.06),0 10px 22px -10px rgba(28,28,28,.22)}
.dt .dt-row:active{transform:scale(.985)}
.dt .dt-row .dt-rl{order:1}
.dt .dt-row .dt-tag{order:2}
.dt .dt-row .dt-ck{order:3;position:relative;width:26px;height:26px;border:1.5px solid var(--taupe);background:transparent;
  transition:border-color 200ms var(--ease)}
.dt .dt-row:hover .dt-ck{border-color:var(--taupe-ink)}

.dt .dt-row.on{background:var(--sunk);box-shadow:none;color:var(--taupe-ink)}
.dt .dt-row.on .dt-ck{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px rgba(229,197,93,.28),0 3px 8px -2px rgba(150,112,16,.55)}
.dt .dt-row.on .dt-ck::after,.dt .dt-brk.on .dt-ck::after{content:"";display:block;width:14px;height:14px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/contain no-repeat}

/* Habits to break: untouched means held, so the row stays flat and says so. A slip is marked in black, not red. */
.dt .dt-brk:not(.on){background:transparent;box-shadow:inset 0 0 0 1px rgba(28,28,28,.1);color:var(--ink-2)}
.dt .dt-brk:not(.on):hover{box-shadow:inset 0 0 0 1px rgba(28,28,28,.22)}
.dt .dt-brk:not(.on) .dt-ck{display:none}
.dt .dt-row .dt-tag{margin-left:auto;padding:5px 10px;border-radius:999px;background:rgba(28,28,28,.05);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe-ink)}
.dt .dt-brk.on{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink),0 6px 16px -8px rgba(28,28,28,.2);color:var(--ink)}
.dt .dt-brk.on .dt-ck{background:var(--ink);border-color:var(--ink);box-shadow:none}
.dt .dt-brk.on .dt-ck::after{background:var(--cream);
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'><path d='M12 5.5v8'/><path d='M12 18.6v.1'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'><path d='M12 5.5v8'/><path d='M12 18.6v.1'/></svg>")}
.dt .dt-brk.on .dt-tag{background:var(--beige);color:var(--ink)}
.dt.dt-busy .dt-row{opacity:.6}

/* ---------- inputs and buttons ---------- */

.dt input,.dt textarea{border:0;border-radius:14px;padding:14px;background:var(--white);color:var(--ink);
  box-shadow:0 0 0 1px rgba(28,28,28,.09),0 4px 12px -8px rgba(28,28,28,.16);transition:box-shadow 160ms var(--ease)}
.dt input:focus,.dt textarea:focus{outline:0;border-color:transparent;box-shadow:0 0 0 1.5px var(--ink),0 4px 12px -8px rgba(28,28,28,.16)}
.dt input::placeholder,.dt textarea::placeholder{color:#968B82}
.dt .dt-save{min-height:52px;border-radius:16px;background:var(--gold);color:var(--ink)!important;font-size:15.5px;font-weight:700;letter-spacing:-.005em;
  box-shadow:inset 0 -1px 0 rgba(28,28,28,.12),0 10px 20px -12px rgba(150,112,16,.8);transition:background-color 200ms var(--ease),transform 140ms var(--ease)}
.dt .dt-save:hover{background:var(--gold-2)}
.dt .dt-save:active{transform:scale(.985)}
.dt .dt-save.done{background:var(--ink);color:var(--cream)!important;box-shadow:none}
.dt .dt-copy{background:var(--beige);border:0;border-radius:999px;padding:0 18px;font-weight:600;color:var(--ink)}
.dt .dt-btn2{border:1.5px solid var(--ink);border-radius:14px;color:var(--ink)}
.dt .dt-ghost{background:transparent;border:1.5px dashed var(--taupe);border-radius:14px;color:var(--ink)}
.dt .dt-plus{background:var(--beige);border:0;color:var(--ink);font-weight:700}
.dt .dt-chipb{background:var(--white);border:0;box-shadow:0 0 0 1px rgba(28,28,28,.1);padding:0 14px;color:var(--ink-2);font-weight:500}
.dt .dt-chipb.on{background:var(--ink);color:var(--cream);box-shadow:none}
.dt .dt-val{background:var(--beige);color:var(--ink)}
.dt .dt-x2{border:0;box-shadow:0 0 0 1px rgba(28,28,28,.1);border-radius:12px}

/* ---------- cards outside his daily tabs: Sarah's screen, setup ---------- */

.dt .dt-card{border:0;border-radius:20px;background:var(--white);padding:16px;margin-bottom:14px;box-shadow:var(--lift)}
.dt .dt-card .dt-label{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.dt .dt-prompt,.dt .dt-app .dt-prompt{background:var(--white);border:0;border-radius:20px;padding:18px 16px 16px;margin-bottom:18px;box-shadow:var(--lift)}
.dt .dt-prompt .dt-save{margin-top:12px}

/* ---------- the tab bar: frosted cream, black when active, a gold dot ---------- */

.dt .dt-nav{background:rgba(244,239,230,.84);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
  border-top:1px solid rgba(28,28,28,.07);padding:7px 8px 8px}
.dt .dt-nav button{position:relative;gap:3px;padding:6px 0 11px;color:var(--light);font-size:10.5px;font-weight:600;letter-spacing:.01em;
  transition:color 200ms var(--ease)}
.dt .dt-nav button:hover{color:var(--ink-2)}
.dt .dt-nav svg{width:24px;height:24px;stroke-width:1.7}
.dt .dt-nav button.on,.dt .dt-nav button.on svg{color:var(--ink)}
.dt .dt-nav button.on svg{stroke-width:2}
.dt .dt-nav button.on::after{content:"";position:absolute;left:50%;bottom:1px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 1px rgba(150,112,16,.25)}

/* ---------- his week: a 7-day dot strip, gold where he showed up ---------- */

.dt .dt-wk{grid-template-columns:minmax(0,1fr) repeat(7,15px) 36px;gap:11px 5px;margin-top:10px;padding:14px 12px 13px 14px;
  background:var(--white);border-radius:18px;box-shadow:var(--lift);font-size:12.5px}
.dt .dt-wk .h{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--taupe-ink)}
.dt .dt-wk .nm{color:var(--ink-2);font-weight:500}
.dt .dt-dot{width:15px;height:15px;border:0;background:#EEE7DA}
.dt .dt-dot.n{background:transparent;box-shadow:inset 0 0 0 1.5px var(--taupe)}
.dt .dt-dot.f{background:#EEE7DA;box-shadow:none}
.dt .dt-dot.y{background:var(--gold);box-shadow:inset 0 0 0 1px rgba(150,112,16,.22)}
.dt .dt-dot.t{box-shadow:0 0 0 1.5px var(--white),0 0 0 2.5px rgba(28,28,28,.55)}
.dt .dt-dot.n.t{box-shadow:inset 0 0 0 1.5px var(--taupe),0 0 0 1.5px var(--white),0 0 0 2.5px rgba(28,28,28,.55)}
.dt .dt-dot.y.t{background:var(--gold);box-shadow:inset 0 0 0 1px rgba(150,112,16,.22),0 0 0 1.5px var(--white),0 0 0 2.5px rgba(28,28,28,.55)}
.dt .dt-cnt{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dt .dt-slips{font-size:12.5px;color:var(--muted);margin:12px 4px 0}
.dt .dt-bar2{background:#EEE7DA}
.dt .dt-bar2 span{background:var(--gold)}
.dt .dt-hist{color:var(--ink-2)}
.dt .dt-hist b{color:var(--ink);font-variant-numeric:tabular-nums}
.dt .dt-wins li{border-top-color:rgba(28,28,28,.07)}
.dt .dt-wins small{color:var(--taupe-ink)}
.dt .dt-read{border:0;border-radius:16px;background:var(--white);padding:14px;box-shadow:var(--lift)}
.dt .dt-app .dt-read .dt-sub{margin:0}
.dt .dt-book{border-top-color:rgba(28,28,28,.07)}
.dt .dt-book p{color:var(--ink)}

/* ---------- vision ---------- */

.dt .dt-vs{border-radius:20px;padding:10px;margin:8px 0 4px;background:var(--ink);box-shadow:0 16px 30px -18px rgba(28,28,28,.7)}
.dt .dt-vs-row{gap:5px}
.dt .dt-vs-row .dt-tile{border-radius:10px}
.dt .dt-app .dt-vs-north{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;line-height:1.35;color:var(--cream);margin:10px 6px 2px}
.dt .dt-vs-cta{color:var(--gold);font-weight:600;margin:4px 6px 4px}
.dt .dt-board{gap:5px}
.dt .dt-cell{border-radius:12px;background:#EEE7DA}
.dt .dt-empty{border-color:var(--taupe);border-radius:12px;color:var(--taupe-ink)}
.dt .dt-app .dt-north{font-family:var(--serif);font-style:italic;font-weight:500;font-size:18px;color:var(--ink)}
.dt .dt-future{background:var(--white);border-radius:14px;box-shadow:var(--lift)}
.dt .dt-sheet-in{border-radius:24px 24px 0 0;background:var(--cream)}
.dt .dt-lib button{border-radius:12px}

/* ---------- first-time steps ---------- */

.dt .dt-steps span{border-top:3px solid var(--beige);color:var(--taupe-ink)}
.dt .dt-steps span.on{border-color:var(--gold);color:var(--ink)}
.dt .dt-steps span.done{border-color:var(--ink);color:var(--muted)}

/* ---------- Sarah's screen ---------- */

.dt .dt-metrics{gap:8px;margin:0 0 14px}
.dt .dt-m{background:var(--white);border-radius:16px;padding:12px 12px 11px;box-shadow:var(--lift)}
.dt .dt-m b{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.05;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums}
.dt .dt-m span{display:block;margin-top:5px;font-size:11px;line-height:1.3;color:var(--muted)}
.dt .dt-m.k{background:var(--ink);box-shadow:0 14px 26px -16px rgba(28,28,28,.7)}
.dt .dt-m.k b{color:var(--gold)}
.dt .dt-m.k span{color:rgba(244,239,230,.78)}

.dt .dt-list{padding:2px 14px}
.dt .dt-tap{margin:12px 0 2px;font-size:12px;color:var(--taupe-ink)}
/* Each client: initials circle, name and status on one line, the detail under it. */
.dt .dt-cl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;
  padding:14px 0 14px 52px;border-top:1px solid rgba(28,28,28,.07)}
.dt .dt-cl:first-child,.dt .dt-tap + .dt-cl{border-top:0}
.dt .dt-cl > div,.dt .dt-cl > div > p{display:contents}
.dt .dt-cl p{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.dt .dt-cl > .dt-chip{grid-column:2;grid-row:1}
.dt .dt-cl small{grid-column:1 / -1;font-size:12.5px;line-height:1.4;color:var(--muted);font-weight:400}
.dt .dt-cl .dt-act,.dt .dt-cl .dt-actnote{grid-column:1 / -1;justify-self:start}
.dt .lp-av{position:absolute;left:0;top:13px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--beige);color:var(--ink);font:600 14px/1 var(--serif);letter-spacing:.03em}
.dt .dt-cl:has(.dt-chip.quiet) .lp-av{background:var(--brick-tint);color:#8E2D15}
.dt .dt-cl:has(.dt-chip.back) .lp-av{background:var(--gold);color:var(--ink)}
.dt .dt-cl:has(.dt-chip.new) .lp-av,.dt .dt-cl:has(.dt-chip.setup) .lp-av{background:transparent;box-shadow:inset 0 0 0 1px var(--taupe);color:var(--taupe-ink)}

.dt .dt-chip{padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.01em}
.dt .dt-chip.quiet{background:var(--brick-tint);color:var(--brick)}
.dt .dt-chip.back{background:var(--gold);color:var(--ink)}
.dt .dt-chip.ok{background:var(--beige);color:var(--ink-2)}
.dt .dt-chip.new,.dt .dt-chip.setup{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--taupe)}

.dt .dt-act,.dt button.dt-act{position:relative;min-height:32px;margin-top:8px;padding:0 13px;border-radius:999px;
  background:var(--brick-tint);color:var(--brick);font-size:12.5px;font-weight:600;text-decoration:none}
.dt .dt-act::before{content:"";position:absolute;inset:-6px 0}
.dt .dt-act.g,.dt button.dt-act.g{background:var(--gold-tint);color:#5C4600;box-shadow:inset 0 0 0 1px rgba(229,197,93,.6)}
.dt .dt-actnote{display:block;margin-top:6px;font-size:12px;color:var(--taupe-ink)}

.dt .dt-det{margin:0 0 12px 52px;padding:8px 12px;border-radius:14px;background:var(--cream);font-size:12.5px;color:var(--ink-2)}
.dt .dt-det div{padding:5px 0;border-top:1px solid rgba(28,28,28,.06)}
.dt .dt-det div:first-child{border-top:0}
.dt .dt-det div b{color:var(--ink);font-variant-numeric:tabular-nums}
.dt .dt-det .dt-win{font-family:var(--serif);font-size:13.5px;color:var(--ink);margin-top:6px}
.dt .dt-fri{background:var(--cream);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .dt .dt-row,.dt .dt-save,.dt .dt-nav button,.dt .dt-seg button{transition:none}
  .dt .dt-row:active,.dt .dt-save:active{transform:none}
}