/* Ultimate Goal: a calm, Apple-like interface in the "Justin | Main" colours.
   Warm paper and ink; green means progress; the orange spark only marks "now". */

:root {
  color-scheme: light;
  --bg: #F3EEE5;          /* paper */
  --card: #FFFFFF;
  --fill: #ECE5D9;        /* between paper and sand */
  --sand: #E4DBCB;
  --ink: #1A1A18;
  --mute: #55514A;        /* graphite, a touch darker so small text stays easy to read */
  --faint: #A39C8F;
  --hair: rgba(26, 26, 24, .08);
  --edge: #CFC6B6;
  --green: #1FA35C;       /* green-signal */
  --green-text: #14713F;  /* green-deep */
  --on-green: #FFFFFF;
  --spark: #FF5A1F;
  --glass: rgba(243, 238, 229, .74);
  --lift: 0 0 0 1px rgba(26, 26, 24, .05), 0 1px 2px rgba(26, 26, 24, .03), 0 18px 40px -26px rgba(26, 26, 24, .22);
  --lift-hi: 0 0 0 1px var(--hair), 0 2px 4px rgba(26, 26, 24, .04), 0 22px 44px -20px rgba(26, 26, 24, .34);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Helvetica Neue", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Helvetica Neue", system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #141413;
    --card: #1F1E1C;
    --fill: #2A2926;
    --sand: #33312D;
    --ink: #F3EEE5;
    --mute: #B8B0A2;
    --faint: #7A746A;
    --hair: rgba(255, 255, 255, .08);
    --edge: #3A3833;
    --green: #3DD47F;
    --green-text: #3DD47F;
    --on-green: #0E1A12;
    --spark: #FF7A45;
    --glass: rgba(20, 20, 19, .72);
    --lift: 0 0 0 1px var(--hair), 0 12px 30px -18px rgba(0, 0, 0, .6);
    --lift-hi: 0 0 0 1px var(--hair), 0 22px 44px -20px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
/* a faint wash of the category colours behind everything, so the paper has some depth; text sits on cards, never on the colour */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 44% at 8% 0%, var(--glow-a), transparent 70%), radial-gradient(44% 40% at 96% 12%, var(--glow-b), transparent 70%), radial-gradient(54% 46% at 70% 104%, var(--glow-c), transparent 72%);
}
:root { --glow-a: rgba(31, 163, 92, .07); --glow-b: rgba(46, 127, 134, .07); --glow-c: rgba(109, 78, 148, .05); }
@media (prefers-color-scheme: dark) { :root { --glow-a: rgba(61, 212, 127, .06); --glow-b: rgba(46, 127, 134, .1); --glow-c: rgba(109, 78, 148, .08); } }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- shared marks ---------- */
.label { font-size: 13px; font-weight: 500; color: var(--mute); }
.ld { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.cd { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sub { color: var(--mute); }
.now-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-size: 12px; font-weight: 600; color: var(--ink); vertical-align: 1px; }
.now-tag i, .sp { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); }
.sp { margin-left: 6px; vertical-align: 1px; }
/* learning status: an empty ring, the spark while you're on it, green once it's learned */
.st { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
.st.doing { background: var(--spark); box-shadow: none; }
.st.done { background: var(--green); box-shadow: none; }

/* ---------- buttons ---------- */
.primary { flex: none; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; transition: transform .3s var(--spring), opacity .2s; }
.primary:hover { transform: scale(1.03); }
.primary:active { transform: scale(.97); }
.primary:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.ghost { height: 44px; padding: 0 20px; border-radius: 999px; background: var(--fill); font-weight: 600; }
.ghost:hover { background: var(--sand); }
.danger { height: 44px; padding: 0 10px; color: var(--mute); font-weight: 500; }
.danger:hover { color: var(--spark); }
.chip { height: 34px; padding: 0 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--mute); transition: background .2s, color .2s; }
.chip:hover { background: var(--hair); color: var(--ink); }
.noting .n-btn { background: var(--ink); color: var(--bg); }
.close { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--mute); font-size: 18px; line-height: 1; transition: background .2s, color .2s; }
.close:hover { background: var(--sand); color: var(--ink); }
.add { height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--green-text); transition: background .2s; }
.add:hover { background: color-mix(in srgb, var(--green) 12%, transparent); }

/* ---------- top bar: frosted glass ---------- */
.bar {
  position: sticky; top: 0; z-index: 40; height: 64px; padding: 0 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  box-shadow: 0 1px 0 var(--hair);
}
/* the blur lives on a layer behind, so the phone tab bar inside can still be fixed to the screen */
.bar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.brand img { display: block; height: 30px; width: auto; }
.ob .brand img { height: 44px; }
/* tabs as a segmented control */
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hair); }
.tabs a { display: flex; align-items: center; gap: 6px; height: 32px; white-space: nowrap; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mute); transition: background .3s var(--ease), color .2s, box-shadow .3s; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(26, 26, 24, .12), 0 0 0 .5px var(--hair); }
.tabs span { font-size: 12px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.bar-r { display: flex; justify-content: flex-end; gap: 4px; }

/* ---------- page frame ---------- */
.main { max-width: 1120px; margin: 0 auto; padding: 56px 48px 120px; transition: padding .55s var(--ease); }
.identity {
  display: block; width: 100%; max-width: 20ch; margin-top: 12px; padding: 0 0 .1em; border: 0; background: none; resize: none; outline: none; overflow: hidden;
  field-sizing: content; min-height: 2lh;
  font: 700 54px/1.06 var(--display); letter-spacing: -.035em; color: var(--ink);
}
.identity::placeholder { color: var(--faint); }

.sec { margin-top: 56px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; margin: 56px 0 14px; }
.sec .sec-h { margin-top: 0; }
.sec-h h2 { font: 700 24px/1.25 var(--display); letter-spacing: -.025em; }
.sec-h p { color: var(--mute); }
.more { font-size: 14px; font-weight: 600; color: var(--green-text); }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; margin-top: 14px; }
.tile { display: grid; gap: 2px; padding: 14px 15px 15px; border-radius: 16px; background: var(--card); box-shadow: var(--lift); transition: transform .4s var(--spring), box-shadow .3s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); }
.tile.now { box-shadow: 0 0 0 2px var(--ink), 0 12px 30px -18px rgba(26, 26, 24, .3); }
.tile b { font: 700 21px/1.15 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile .label { font-size: 12px; }
.dots { display: flex; flex-wrap: wrap; gap: 4px; min-height: 7px; margin-top: 8px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); }
.dots i.on { background: var(--c); }

/* ---------- period pages ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--mute); }
.crumbs > * + *::before { content: '›'; margin-right: 8px; color: var(--faint); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--ink); }
.head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
.head.period { display: block; margin: 28px 0 0; }
.head h1 { margin-top: 10px; font: 700 64px/1.02 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.head .sub { margin-top: 6px; }
.step { display: flex; gap: 8px; margin-top: 16px; }
.step a { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-size: 13.5px; font-weight: 600; transition: background .2s; }
.step a:hover { background: var(--fill); }

.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 36px 20px; }
.cat { display: flex; flex-direction: column; gap: 12px; }
.cat h3 { display: flex; align-items: center; gap: 9px; padding: 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.cat h3 span { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--faint); }
.slot { height: 56px; border-radius: 16px; border: 1.5px dashed var(--edge); color: var(--mute); font-size: 24px; font-weight: 300; text-align: center; transition: border-color .2s, color .2s, background .2s; }
.slot:hover { border-color: var(--green); color: var(--green-text); background: color-mix(in srgb, var(--green) 6%, transparent); }

/* goal card */
.g { overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: var(--lift); cursor: pointer; transition: transform .45s var(--spring), box-shadow .3s; }
.g:hover { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.g-img { height: 150px; background: center / cover; }
.g-b { padding: 18px 20px 16px; }
.g-top { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.g h4 { font: 650 17px/1.3 var(--display); letter-spacing: -.02em; }
.g.done h4 { color: var(--mute); }
.g-m { margin-top: 12px; font-size: 14.5px; }
.g-m .label { display: block; margin-bottom: 1px; font-size: 12px; }
.g-why { margin-top: 6px; font-size: 13.5px; color: var(--mute); }
.g-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--mute); }
.g-foot:empty { display: none; }
.g-foot > * { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border-radius: 999px; background: var(--fill); }
.g-foot .ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-text); font-weight: 600; }
.g-up:hover { color: var(--ink); }
.g-miss { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--mute); }
.g-miss::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); }
.g-ready { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 8px 8px 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green-text); font-size: 13.5px; font-weight: 600; }
.g-ready button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--green); color: var(--on-green); font-size: 13px; font-weight: 600; }
.g-sub { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hair); }
.sub-h { display: flex; align-items: center; justify-content: space-between; margin-right: -10px; }
.sub-h .label { font-size: 12.5px; font-weight: 600; }
.g-sub ul { margin-top: 4px; }
.lr { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 10px; padding: 5px 0; }
.lr button { font-size: 14px; }
.lr button:hover { color: var(--green-text); }
.lr .label { font-size: 12px; font-weight: 400; color: var(--faint); }

/* checkboxes: a circle that fills green, like Reminders */
.check { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--edge); transition: background .2s, box-shadow .2s, transform .35s var(--spring); }
.check:hover { box-shadow: inset 0 0 0 1.6px var(--green); }
.check:active { transform: scale(.85); }
.check[aria-pressed="true"] { background: var(--green); box-shadow: none; }
.check[aria-pressed="true"]::after { content: ''; position: absolute; left: 50%; top: 45%; width: 5px; height: 9px; border: solid var(--on-green); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }

/* to-do rows */

/* ---------- to-dos page ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.ty { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-size: 13.5px; font-weight: 500; color: var(--mute); transition: background .2s, color .2s, box-shadow .2s; }
.ty span { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ty:hover { color: var(--ink); }
.ty.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.ty.on span { color: inherit; opacity: .6; }
.empty { color: var(--mute); }

/* ---------- learning board ---------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.col { padding: 14px; border-radius: 24px; background: color-mix(in srgb, var(--sand) 45%, transparent); }
.col h3 { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.col h3 span { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--faint); }
.col .empty { padding: 18px 6px 22px; font-size: 13.5px; }
.lc { padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: var(--lift); cursor: pointer; transition: transform .45s var(--spring), box-shadow .3s; }
.lc + .lc { margin-top: 10px; }
.lc:hover { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.lc .label { font-size: 12px; }
.lc h4 { margin-top: 3px; font: 650 17px/1.3 var(--display); letter-spacing: -.02em; }
.lc-how { margin-top: 3px; font-size: 13.5px; color: var(--mute); }
.lc-g { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 9px; border-radius: 999px; background: var(--fill); font-size: 12.5px; color: var(--mute); }
.lc-g:hover { color: var(--ink); }
.lc-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px -6px 0 -10px; }
.mini { height: 30px; padding: 0 14px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 600; transition: background .2s, color .2s; }
.mini:hover { background: var(--sand); }

/* ---------- sheets ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(20, 20, 19, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .3s both; }
.sheet { width: min(560px, 100%); max-height: calc(100dvh - 48px); overflow: auto; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), 0 40px 90px -30px rgba(0, 0, 0, .45); animation: rise .5s var(--ease) both; }
.sheet-bg.out { animation: fade .24s reverse both; }
.sheet-bg.out .sheet { animation: rise .24s reverse both; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.sh-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px 24px; background: var(--card); }
.sh-h .label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sh-f { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px 20px 24px; background: var(--card); }
.sh-f button { white-space: nowrap; }
/* a narrow sheet: Delete and Skip on one line, Cancel and Save below */
@media (max-width: 520px) { .sh-f:has(.danger) .grow { flex-basis: 100%; height: 0; margin: -4px 0; } .sh-f:has(.danger) .grow ~ button { flex: 1; } }
.grow { flex: 1; }

.form { display: grid; gap: 18px; padding: 8px 24px 20px; }
.big { width: 100%; padding: 4px 0 8px; border: 0; background: none; outline: none; font: 700 26px/1.25 var(--display); letter-spacing: -.03em; }
.big::placeholder { color: var(--faint); }
.lbl { margin: 0 0 -10px 2px; font-size: 13px; font-weight: 600; color: var(--mute); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > span { margin-left: 2px; font-size: 13px; font-weight: 600; color: var(--mute); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--fill); outline: none; font-size: 15px; transition: box-shadow .2s; }
.fld input:focus, .fld select:focus, .fld textarea:focus { box-shadow: 0 0 0 2px var(--green); }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
/* segmented control */
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fill); }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 8px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--mute); white-space: nowrap; transition: background .3s var(--ease), color .2s, box-shadow .3s; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(26, 26, 24, .14), 0 0 0 .5px var(--hair); }

/* SMART goal sheet */
.vis { position: relative; display: grid; height: 120px; margin: 4px 24px 0; border-radius: 18px; background: var(--fill) center / cover; transition: background-color .2s; }
.vis:hover { background-color: var(--sand); }
.vis.has { height: 220px; }
.vis label { display: grid; place-content: center; gap: 2px; padding: 16px; text-align: center; cursor: pointer; color: var(--mute); font-size: 14px; font-weight: 500; }
.vis small { font-size: 12.5px; font-weight: 400; color: var(--faint); }
.vis-x { position: absolute; right: 10px; bottom: 10px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13px; font-weight: 600; }
.smart { padding: 6px 24px 10px; }
.sm { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 0 14px; padding: 12px 0; }
.sm + .sm::before { content: ''; position: absolute; top: 0; left: 46px; right: 0; height: 1px; background: var(--hair); }
.sm b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fill); font-size: 14px; font-weight: 700; color: var(--faint); transition: background .3s, color .3s, transform .4s var(--spring); }
.sm.on b { background: var(--green); color: var(--on-green); }
.sm:focus-within b { transform: scale(1.08); }
.sm label { display: grid; gap: 0; }
.sm label span { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.sm input { width: 100%; height: 28px; padding: 0; border: 0; background: none; outline: none; font-size: 15.5px; }
.sm input::placeholder, .notes textarea::placeholder { color: var(--faint); }
.ups { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ups p { width: 100%; font-size: 12.5px; font-weight: 600; color: var(--mute); }
.ups .ups-h { margin-bottom: 4px; font-size: 13.5px; font-weight: 400; }
.up { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 12px; border-radius: 999px; background: var(--fill); font-size: 13px; text-align: left; transition: background .2s, color .2s; }
.up:hover { background: var(--sand); }
.up.on { background: var(--ink); color: var(--bg); }

/* ---------- settings panel ---------- */
.panel {
  position: fixed; z-index: 60; top: 76px; right: 12px; bottom: 12px; width: 340px; overflow: auto;
  padding: 0 22px 22px; border-radius: 26px; background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -24px rgba(0, 0, 0, .3);
  transform: translateX(calc(100% + 24px)); visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s .55s;
}
.panel.open { transform: none; visibility: visible; transition: transform .55s var(--ease); }
.p-h { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 16px; }
.p-h .label, .n-h .label { font: 700 20px/1 var(--display); letter-spacing: -.025em; color: var(--ink); }
.panel .fld input { background: var(--card); }
.panel h3 { margin: 26px 0 10px 2px; font-size: 13px; font-weight: 600; color: var(--mute); }
.panel .sub { margin-top: 18px; font-size: 12.5px; color: var(--faint); }
.stack { display: grid; gap: 6px; }
.wide { display: block; width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-size: 14px; font-weight: 600; line-height: 42px; text-align: center; cursor: pointer; transition: background .2s; }
.wide:hover { background: var(--fill); }
.wide.danger { color: var(--spark); }
.x { width: 28px; height: 28px; border-radius: 50%; color: var(--faint); font-size: 17px; text-align: center; transition: background .2s, color .2s; }
.x:hover { background: var(--fill); color: var(--ink); }

/* ---------- notes ---------- */
.notes {
  position: fixed; z-index: 50; top: 76px; left: 12px; bottom: 12px; width: 340px;
  display: flex; flex-direction: column; padding: 0 22px 18px; border-radius: 26px; background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -24px rgba(0, 0, 0, .3);
  transform: translateX(calc(-100% - 24px)); visibility: hidden;
  --grow: top .45s var(--ease), left .45s var(--ease), bottom .45s var(--ease), width .45s var(--ease), height .45s var(--ease), padding .45s var(--ease), border-radius .45s var(--ease), background .45s;
  transition: transform .55s var(--ease), visibility 0s .55s, var(--grow);
}
.notes.open { transform: none; visibility: visible; transition: transform .55s var(--ease), var(--grow); }
.n-h { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 6px; }
.notes textarea { flex: 1; width: 100%; padding: 10px 0; border: 0; background: none; outline: none; resize: none; font-size: 15px; line-height: 1.65; }
.n-f { font-size: 12px; color: var(--faint); }
.n-mode { align-self: flex-start; margin: 4px 0 2px; }
.n-mode button { height: 30px; padding: 0 14px; font-size: 13px; }
.n-draw { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 10px; padding: 10px 0; }
.notes.draw .n-draw { display: flex; }
.notes.draw textarea { display: none; }
.n-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.n-t, .n-c { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill); }
.n-t button, .n-c button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--mute); transition: background .2s, color .2s, box-shadow .2s; }
.n-t button:hover { color: var(--ink); }
.n-t button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.n-t svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.n-c i { width: 15px; height: 15px; border-radius: 50%; background: var(--c); transition: scale .25s var(--spring); }
.n-c button:hover i { scale: 1.12; }
.n-c button.on i { box-shadow: 0 0 0 2px var(--fill), 0 0 0 3.5px var(--c); }
.n-u { display: flex; gap: 2px; margin-left: auto; }
.n-u button { height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mute); transition: background .2s, color .2s; }
.n-u button:hover { background: var(--fill); color: var(--ink); }
.n-pad { position: relative; flex: 1; min-height: 0; border-radius: 16px; background: var(--card) radial-gradient(var(--hair) 1.2px, transparent 1.3px) 0 0 / 18px 18px; box-shadow: 0 0 0 1px var(--hair); overflow: hidden; }
.n-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.n-svg :is(path, rect, ellipse, polygon) { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.n-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13.5px; color: var(--faint); pointer-events: none; }
.n-empty[hidden] { display: none; }
.n-acts { display: flex; gap: 8px; }
.n-full .shrink, .notes.full .n-full .grow { display: none; }
.notes.full .n-full .shrink { display: inline; }
.notes.full {
  z-index: 70; top: 0; left: 0; bottom: 0; width: 100%; border-radius: 0; background: var(--bg); box-shadow: none;
  padding: env(safe-area-inset-top) max(22px, calc(50% - 360px)) calc(18px + env(safe-area-inset-bottom));
}
.notes.full textarea { font-size: 17px; }
@media (min-width: 1100px) { .noting .main { padding-left: 400px; max-width: 1468px; } .noting .main.on-wide { max-width: 2040px; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: 95; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
  padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .4);
  transform: translate(-50%, 20px) scale(.96); opacity: 0; visibility: hidden;
  transition: transform .5s var(--spring), opacity .3s, visibility 0s .5s;
}
.toast:not(:has(button)) { padding-right: 20px; min-height: 44px; }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .5s var(--spring), opacity .3s; }
.toast button { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--green); color: var(--on-green); font-size: 13px; font-weight: 600; }

/* ---------- onboarding ---------- */
.ob { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.ob-card { display: grid; gap: 16px; width: min(440px, 100%); padding: 36px; border-radius: 28px; background: var(--card); box-shadow: var(--lift-hi); animation: rise .7s var(--ease) both; }
.ob .brand { margin-bottom: 18px; }
.ob h1 { font: 700 36px/1.08 var(--display); letter-spacing: -.035em; }
.ob .sub { margin: -4px 0 8px; }
.ob .fld input, .ob .fld textarea { resize: none; }
.ob .primary { height: 50px; display: grid; place-items: center; }
.link { height: 40px; color: var(--green-text); font-weight: 600; text-align: center; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.onboard .bar, .onboard .main, .onboard .notes { display: none; }

/* ---------- glow: the kite's orange, only for a moment when you finish something ---------- */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes turn { to { --a: 360deg; } }
:root { --siri: conic-gradient(from var(--a), #FF5A1F, #FFA27A, #FF7A45, #FF5A1F); }
.orb { flex: none; display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--spark); }
.c-btn { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- months ---------- */
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mc { display: flex; flex-direction: column; gap: 10px; min-height: 126px; padding: 15px 16px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--lift); transition: transform .4s var(--spring), box-shadow .3s; }
.mc:hover { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.mc.now { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, transparent), 0 12px 30px -18px rgba(26, 26, 24, .3); }
.mc.past { background: color-mix(in srgb, var(--card) 55%, transparent); box-shadow: 0 0 0 1px var(--hair); }
.mc-h { display: flex; align-items: center; gap: 7px; }
.mc-h b { font: 700 18px/1.2 var(--display); letter-spacing: -.025em; }
.mc-h .label { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.mc ul { display: grid; gap: 6px; }
.mc li { display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.3; }
.mc li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mc li.done span { color: var(--faint); text-decoration: line-through; }
.mc .ph { font-size: 13.5px; color: var(--faint); }

/* ---------- gantt ---------- */
.gantt { overflow-x: auto; border-radius: 20px; background: var(--card); box-shadow: var(--lift); }
.gt { --lw: 230px; --pad: 18px; position: relative; min-width: 760px; padding: 4px var(--pad) 14px; }
.gt-grid { position: absolute; top: 0; bottom: 0; left: calc(var(--pad) + var(--lw)); right: var(--pad); display: grid; grid-template-columns: var(--cols); pointer-events: none; }
.gt-grid i { border-left: 1px solid var(--hair); }
.gt-grid i.now { background: color-mix(in srgb, var(--spark) 5%, transparent); }
.gt-grid .gt-today { position: absolute; top: 34px; bottom: 8px; width: 2px; margin-left: -1px; border: 0; border-radius: 2px; background: var(--spark); box-shadow: 0 0 8px var(--spark), 0 0 18px rgba(255, 90, 31, .45); }
.gt-today::before { content: ''; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 10px var(--spark); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 90, 31, .12), 0 0 14px var(--spark); } }
.gt-row { position: relative; display: grid; grid-template-columns: var(--lw) 1fr; align-items: center; min-height: 40px; }
.gt-row + .gt-row:not(.sub) { box-shadow: 0 -1px 0 var(--hair); }
.gt-head { min-height: 38px; }
.gt-cols { display: grid; grid-template-columns: var(--cols); }
.gt-cols > * { padding-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.gt-cols a:hover { color: var(--ink); }
.gt-cols .now { color: var(--spark); }
.gt-l { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 16px; font-size: 14px; font-weight: 500; }
.gt-l span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gt-l:hover span { color: var(--green-text); }
.gt-row.sub { min-height: 32px; }
.gt-row.sub .gt-l { padding-left: 17px; font-size: 13px; font-weight: 400; color: var(--mute); }
.gt-row.sub .gt-l .cd { width: 6px; height: 6px; }
.gt-track { position: relative; height: 100%; min-height: inherit; }
.gt-bar { position: absolute; top: 50%; height: 18px; translate: 0 -50%; border-radius: 999px; background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.gt-row.sub .gt-bar { height: 12px; background: color-mix(in srgb, var(--c) 32%, transparent); }
.gt-bar.done { background: color-mix(in srgb, var(--green) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 50%, transparent); }
.gt-bar.ghost { background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.gt-ms { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; rotate: 45deg; border-radius: 2px; background: var(--c); }
.gt-empty { padding: 14px 0 6px; color: var(--mute); font-size: 14px; }

/* ---------- coach ---------- */
.panel.coach { width: 420px; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
.panel .p-h .label { display: inline-flex; align-items: center; gap: 10px; }
.panel .p-h .orb { width: 16px; height: 16px; }
.p-hr { display: flex; align-items: center; gap: 6px; }
.chat { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 14px; margin: 0 -22px; padding: 4px 22px 16px; scrollbar-width: thin; }
.msg { font-size: 14.5px; line-height: 1.55; }
.msg.u { align-self: flex-end; max-width: 86%; padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--bg); white-space: pre-wrap; }
.msg.a p + p, .msg.a p + ul, .msg.a p + ol, .msg.a ul + p, .msg.a ol + p { margin-top: 8px; }
.msg.a ul, .msg.a ol { padding-left: 20px; }
.msg.a ul { list-style: disc; }
.msg.a ol { list-style: decimal; }
.msg.a li + li { margin-top: 3px; }
.msg.a .h { font-weight: 700; }
.msg code { padding: 1px 5px; border-radius: 6px; background: var(--fill); font-size: .92em; }
.think { width: max-content; background: linear-gradient(90deg, var(--faint) 30%, var(--ink) 50%, var(--faint) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.c-hi { margin-top: 8px; }
.c-hi h3, .c-intro h3 { font: 700 22px/1.2 var(--display); letter-spacing: -.025em; }
.c-hi p { margin-top: 4px; color: var(--mute); font-size: 14px; }
.sugg { display: grid; gap: 8px; }
.sugg button { padding: 12px 15px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-size: 14px; font-weight: 500; transition: background .2s, transform .35s var(--spring); }
.sugg button:hover { background: var(--fill); }
.sugg button:active { transform: scale(.98); }
.c-intro { display: grid; gap: 14px; padding-top: 6px; font-size: 14.5px; }
.c-intro p { color: var(--mute); }
.c-intro .fld input { background: var(--card); }
.c-intro .fine { font-size: 12.5px; color: var(--faint); }
.c-intro a { color: var(--green-text); font-weight: 600; }
.c-err { padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--spark) 10%, transparent); font-size: 13.5px; }
.c-err button { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ask { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), 0 8px 24px -16px rgba(0, 0, 0, .3); }
.ask textarea { flex: 1; min-height: 1lh; max-height: 9lh; padding: 7px 0; border: 0; background: none; outline: none; resize: none; field-sizing: content; font-size: 14.5px; line-height: 1.45; }
.ask textarea::placeholder { color: var(--faint); }
.send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 17px; font-weight: 700; transition: transform .3s var(--spring), opacity .2s; }
.send:hover { transform: scale(1.06); }
.send:disabled { opacity: .3; transform: none; }
.prop { padding: 16px; border-radius: 18px; background: var(--card); box-shadow: var(--lift); }
.prop-t { font-weight: 700; letter-spacing: -.015em; }
.prop > ul { display: grid; gap: 10px; margin: 12px 0 14px; }
.prop > ul > li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.prop b { font-weight: 600; }
.prop small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--mute); }
.prop ol { margin-top: 6px; padding-left: 18px; list-style: decimal; font-size: 13px; color: var(--mute); }
.pk { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--fill); font-size: 11.5px; font-weight: 600; color: var(--mute); }
.pk.goal { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-text); }
.pk.learn { background: color-mix(in srgb, #2E7F86 14%, transparent); color: #2E7F86; }
.prop .primary { width: 100%; height: 40px; }
.prop-ok { color: var(--green-text); font-size: 13.5px; font-weight: 600; }
/* while the coach is thinking, the panel's edge glows */
.panel.coach::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--siri); pointer-events: none; opacity: 0; transition: opacity .5s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(2px); animation: turn 3s linear infinite; }
.panel.coach.busy::after { opacity: 1; }

/* ---------- who I'm becoming: a capsule edged in slow light, brighter while you write ---------- */
.idcap { position: relative; display: block; margin-top: 16px; padding: 18px 26px 20px; border-radius: 30px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); cursor: text; }
.idcap::before, .idcap::after { content: ''; position: absolute; border-radius: inherit; background: var(--spark); pointer-events: none; }
.idcap::before { inset: 0; padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; }
.idcap::after { display: none; }
.idcap:focus-within::before { opacity: .8; }
.idcap .label { font-size: 12.5px; font-weight: 600; color: var(--faint); }
.idcap .identity { max-width: none; min-height: 0; field-sizing: fixed; font-size: clamp(30px, 3.8vw, 46px); caret-color: var(--spark); }
.idcap .identity::placeholder { color: inherit; }

/* ---------- home ---------- */
.main.on-home { max-width: 1280px; padding-top: 28px; }
/* the timetable is the page: let it use the screen */
.main.on-wide { max-width: 1640px; padding-left: clamp(18px, 3vw, 40px); padding-right: clamp(18px, 3vw, 40px); padding-top: 32px; }
.main.on-home > :first-child { margin-top: 0; }
.main.on-home .stage { margin-top: 20px; }
/* the stage stays dark in both themes: the one dramatic thing on the page */
.stage {
  --card: #1F1E1C; --fill: #2A2926; --ink: #F3EEE5; --mute: #B8B0A2; --faint: #8A8478; --hair: rgba(255, 255, 255, .09); --spark: #FF7A45;
  position: relative; isolation: isolate; overflow: hidden; padding: 36px 44px 30px; border-radius: 34px; background: #141413; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 34px 70px -38px rgba(0, 0, 0, .6);
}
.stage::before {
  content: ''; position: absolute; inset: -30% -10% -20%; z-index: -1; filter: blur(18px);
  background: radial-gradient(32% 42% at 18% 28%, rgba(255, 90, 31, .09), transparent 70%), radial-gradient(30% 40% at 82% 18%, rgba(46, 127, 134, .1), transparent 70%), radial-gradient(34% 44% at 58% 88%, rgba(109, 78, 148, .08), transparent 70%);
}
/* your own photo, blurred and dimmed so the words on top stay easy to read */
.st-pic { position: absolute; inset: -60px; z-index: -2; background: center / cover; filter: blur(30px) saturate(.85); opacity: .6; }
.st-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 19, .5), rgba(20, 20, 19, .82)); }
.st-date { font-size: 13.5px; font-weight: 500; color: var(--mute); }
.stage .idcap { background: rgba(31, 30, 28, .72); }

/* the life line: a light runs from the start of this decade to you */
.line { margin-top: 56px; }
.rail { position: relative; height: 4px; margin: 0 1.5%; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.rail .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--f) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(255, 122, 69, .1), var(--spark)); transform-origin: left; }
.rail .comet { position: absolute; top: -1px; left: 0; width: 70px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, #FFD9C9); filter: drop-shadow(0 0 4px var(--spark)) drop-shadow(0 0 10px rgba(255, 90, 31, .7)); opacity: 0; }
.stage.intro .comet { animation: travel 2s cubic-bezier(.45, 0, .55, 1) .3s both; }
@keyframes travel { from { left: -70px; opacity: 0; } 20%, 80% { opacity: 1; } to { left: calc(var(--f) * 100% - 70px); opacity: 0; } }
.rail i { font-style: normal; }
.rail .you { position: absolute; top: 50%; left: calc(var(--f) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 4px #141413, 0 0 0 5.5px rgba(255, 122, 69, .45); }
.rail .you span { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; white-space: nowrap; }
.stns { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; margin-top: 16px; }
.stn { display: grid; gap: 2px; padding: 12px 16px 14px; border-radius: 20px; transition: background .3s, box-shadow .3s; }
.stn:hover { background: rgba(255, 255, 255, .05); }
.stn.on { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--hair); }
.stn b { font: 700 26px/1.1 var(--display); letter-spacing: -.035em; }
.stn .label { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stage.intro .fill { animation: grow 1.3s var(--ease) .2s both; }
.stage.intro .you { animation: pop .6s var(--spring) 1.9s both; }
.stage.intro .stn { animation: rise .7s var(--ease) both; animation-delay: calc(.3s + var(--i) * 60ms); }
.stage.intro .idcap { animation: rise .8s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes pop { from { scale: 0; } }

/* periods like folders, in one piece: the period you pick becomes a tab that opens onto the next column */
.browse-h { margin: 48px 0 14px; font: 700 24px/1.25 var(--display); letter-spacing: -.025em; }
.cols {
  --z0: color-mix(in srgb, var(--sand) 86%, var(--card)); --z1: color-mix(in srgb, var(--sand) 62%, var(--card));
  --z2: color-mix(in srgb, var(--sand) 40%, var(--card)); --z3: color-mix(in srgb, var(--sand) 19%, var(--card));
  display: flex; overflow-x: auto; border-radius: 28px; box-shadow: var(--lift); scrollbar-width: none;
}
/* counted from the right, so the open period is always the brightest */
.cols > :nth-last-child(5) { --me: var(--z0); --next: var(--z1); }
.cols > :nth-last-child(4) { --me: var(--z1); --next: var(--z2); }
.cols > :nth-last-child(3) { --me: var(--z2); --next: var(--z3); }
.cols > :nth-last-child(2) { --me: var(--z3); --next: var(--card); }
.cols > :last-child { --me: var(--card); }
.fc { flex: none; display: flex; flex-direction: column; gap: 2px; width: 156px; padding: 16px 0 16px 10px; background: var(--me); }
.fc.in, .pv.in { animation: colin .5s var(--ease) both; }
@keyframes colin { from { opacity: 0; } }
.cr { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-height: 40px; margin-right: 10px; padding: 5px 12px; border-radius: 14px; transition: background .2s; }
.cr:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cr b { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.cr.now b::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--spark); vertical-align: 2px; }
.cr small { display: block; white-space: nowrap; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.cr .dots { justify-content: flex-end; max-width: 48px; min-height: 0; margin: 0; gap: 3px; }
.cr .dots i { width: 6px; height: 6px; }
/* the tab: flush with the next column, with curved corners where they meet */
.cr.on { margin-right: 0; border-radius: 14px 0 0 14px; background: var(--next); }
.cr.on b { font-weight: 700; }
.cr.on::before, .cr.on::after { content: ''; position: absolute; right: 0; width: 14px; height: 14px; pointer-events: none; }
.cr.on::before { bottom: 100%; background: radial-gradient(circle at 0 0, transparent 13.5px, var(--next) 14px); }
.cr.on::after { top: 100%; background: radial-gradient(circle at 0 100%, transparent 13.5px, var(--next) 14px); }
.pv { flex: 1 0 280px; display: flex; flex-direction: column; gap: 16px; padding: 26px 28px; background: var(--me); }
.pv h3 { font: 700 26px/1.15 var(--display); letter-spacing: -.03em; }
.pv ul { display: grid; gap: 10px; }
.pv li, .mc li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.3; }
.pv li small, .mc li small { font-size: 12px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.pv li.done span { color: var(--faint); text-decoration: line-through; }
/* no goals yet: an empty ring for each category */
.pv-c { interpolate-size: allow-keywords; }
.pv-c::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.pv-c[open]::details-content { block-size: auto; }
.pv-c summary { display: flex; align-items: center; gap: 10px; margin: -4px -8px; padding: 4px 8px; border-radius: 10px; font-size: 14.5px; cursor: pointer; list-style: none; transition: background .25s var(--ease); }
.pv-c summary::-webkit-details-marker { display: none; }
.pv-c summary:hover { background: var(--fill); }
.pv-c summary b { font-weight: 650; }
.pv-c summary small { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.pv-c summary::after { content: ''; width: 7px; height: 7px; margin: -3px 4px 0 auto; border: solid var(--mute); border-width: 0 1.5px 1.5px 0; rotate: 45deg; transition: rotate .3s var(--ease), margin .3s var(--ease); }
.pv-c:not([open]) summary::after { rotate: -45deg; margin-top: 0; }
.pv-c ul { padding: 10px 0 2px 18px; }
.pv-c li { grid-template-columns: 1fr auto; }
.pv-e { display: flex; gap: 8px; }
.pv-e i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c); opacity: .75; }
.pv .primary { align-self: flex-start; display: inline-flex; align-items: center; margin-top: 6px; }

/* ---------- life ---------- */
.frame { display: grid; gap: 4px; margin-top: 14px; }
.frame label { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 12px; cursor: text; }
.frame span { font-size: 14px; font-weight: 600; color: var(--faint); }
.frame textarea { width: 100%; min-height: 38px; padding: 6px 0; border: 0; background: none; outline: none; resize: none; field-sizing: content; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.frame textarea::placeholder { color: var(--faint); opacity: .55; }
/* a door to each list, drawn instead of described */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.door { display: grid; justify-items: center; gap: 16px; padding: 30px 20px 24px; border-radius: 26px; background: var(--card); box-shadow: var(--lift); text-align: center; transition: transform .45s var(--spring), box-shadow .3s; }
.door:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); }
.door > b { font: 700 19px/1.2 var(--display); letter-spacing: -.02em; }
.door-a { display: grid; place-items: center; height: 124px; }
.ring { display: block; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 7; stroke: var(--fill); }
.ring circle + circle { stroke: var(--green); stroke-linecap: round; stroke-dasharray: var(--p) 1; opacity: clamp(0, calc(var(--p) * 1000), 1); transition: stroke-dasharray .8s var(--ease); }
.dial, .orbit { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.dial .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial b, .orbit b { font: 700 32px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dial small { font-size: 16px; color: var(--mute); }
.orbit::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--fill); }
.orbit i { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--green); transform: rotate(var(--r)) translateY(-50px); transition: transform .9s var(--ease); }
.door:hover .orbit i { transform: rotate(calc(var(--r) + .1turn)) translateY(-50px); }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 156px; height: 120px; }
.mosaic i { border-radius: 12px; background: var(--fill) center / cover; }

/* life in weeks: 90 rows, 48 weeks each; lived weeks are ink, now glows, goal weeks take their colour */
.lw { columns: 2; column-gap: 40px; padding: 26px 26px 22px; border-radius: 26px; background: var(--card); box-shadow: var(--lift); }
.lw-y { position: relative; display: block; padding: 1px 0 1px 26px; break-inside: avoid; border-radius: 4px; }
.lw-y b { position: absolute; left: 0; top: -1px; font-size: 10.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.lw-y > span { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.lw-y > span > span { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.lw-y i { aspect-ratio: 1; border-radius: 2px; background: var(--fill); }
.lw-y i.p { background: color-mix(in srgb, var(--ink) 34%, var(--card)); }
.lw-y i.mg { background: color-mix(in srgb, var(--c) 55%, var(--fill)); }
.lw-y i.g { background: var(--c); }
.lw-y i.now { background: var(--spark); box-shadow: 0 0 0 2px var(--card), 0 0 12px 4px rgba(255, 90, 31, .55); animation: pulse 2.4s ease-in-out infinite; scale: 2.2; border-radius: 50%; position: relative; z-index: 1; }
.lw-y:nth-child(10n+1):not(:first-child) { margin-top: 8px; }
.lw-y:hover i:not(.now) { filter: brightness(.9); }

/* a list's own page */
.lp { max-width: 820px; margin-top: 28px; }
.lp-own { max-width: none; }
.ll { overflow: hidden; border-radius: 22px; background: var(--card); box-shadow: var(--lift); }
.ll li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px 8px 16px; }
.ll li + li::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--hair); }
.ll li > span { flex: 1; font-size: 16px; }
.ll small { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.ll .fx-rep { min-width: 74px; }
.ll-add::after { content: '+'; position: absolute; left: 22px; font-size: 22px; font-weight: 300; color: var(--faint); }
.life-in { flex: 1; width: 100%; height: 42px; padding-left: 36px; border: 0; background: none; outline: none; font-size: 16px; }
.life-in::placeholder { color: var(--faint); }
.age { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 2px 0 10px; border-radius: 999px; background: var(--fill); font-size: 12.5px; font-weight: 600; color: var(--mute); cursor: text; transition: opacity .2s; }
.age input { width: 40px; border: 0; background: none; outline: none; font: inherit; color: var(--ink); -moz-appearance: textfield; }
.age input::-webkit-inner-spin-button, .age input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (hover: hover) {
  :is(.ll li, .card):not(:hover) .age:not(.on, :focus-within) { opacity: 0; }
  :is(.ll li, .card):not(:hover) > .x { opacity: 0; }
}
/* habits: a grid of circles, hold one to mark it (Streaks-style) */
.hbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.hb { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 22px 14px 16px; border-radius: 26px; background: var(--card); box-shadow: var(--lift); text-align: center; }
.hb > span { font: 600 15px/1.3 var(--display); letter-spacing: -.01em; }
.hb > .x { position: absolute; top: 8px; right: 8px; }
.hold { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: scale .25s var(--spring); }
.hold .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hold b { display: grid; font: 700 34px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--faint); }
.hold small { margin-top: 2px; font: 600 11.5px var(--sans); letter-spacing: 0; color: var(--faint); }
.hb.on .hold { background: color-mix(in srgb, var(--green) 10%, transparent); }
.hb.on .hold b { color: var(--green-text); }
/* holding fills the ring (or drains it when you're undoing) */
.hold.holding { scale: .94; }
.hold.holding .ring circle + circle { opacity: 1; stroke-dasharray: 1 1; transition: stroke-dasharray .65s linear; }
.hb.on .hold.holding .ring circle + circle { stroke-dasharray: 0 1; }
.hold.glow::before { content: ''; position: absolute; inset: -8px; z-index: -1; border-radius: 50%; background: var(--siri); filter: blur(10px); animation: turn 1s linear, burst 1.1s var(--ease) both; pointer-events: none; }
.hold.glow { z-index: 0; }
.hb-add { place-items: center; min-height: 200px; padding: 14px; background: color-mix(in srgb, var(--fill) 55%, transparent); box-shadow: none; }
.hb-add .life-in { padding: 0 8px; text-align: center; }
@media (hover: hover) { .hb:not(:hover) > .x { opacity: 0; } }

.bk-h { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.bk-h .ring { width: 64px; height: 64px; }
.bk-h p { font-size: 16px; color: var(--mute); }
.bk-h b { font: 700 32px var(--display); letter-spacing: -.03em; color: var(--ink); }
/* a photo card: done bucket-list moments, and what you'll have */
.mem, .vb { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mem { margin-top: 28px; }
.card { position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden; border-radius: 22px; background: var(--card); box-shadow: var(--lift); }
.card .ph { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--fill) center / cover; color: var(--faint); font-size: 30px; font-weight: 300; cursor: pointer; }
.card figcaption { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; }
.card figcaption > span { flex: 1; display: grid; font-weight: 600; line-height: 1.3; }
.card figcaption small { font-size: 12.5px; font-weight: 500; color: var(--mute); }
.card > .x { position: absolute; top: 8px; right: 8px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .2s; }
.card.got .ph { box-shadow: inset 0 0 0 3px var(--green); }
.vb-add { display: grid; place-items: center; min-height: 200px; padding: 18px; border-radius: 22px; border: 1.5px dashed var(--edge); }
.vb-add .life-in { padding: 0; text-align: center; }

/* ---------- period pages ---------- */
.step > span { display: inline-flex; align-items: center; height: 32px; margin-left: 6px; font-size: 13.5px; color: var(--mute); }
.serves { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 13.5px; color: var(--mute); }
.serves a, .need a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); color: var(--ink); font-weight: 500; }
.need { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 10px 10px 16px; border-radius: 16px; background: color-mix(in srgb, var(--spark) 9%, transparent); font-size: 14px; }
.g.small .g-b { padding: 15px 18px 14px; }
.g.small h4 { font-size: 15.5px; }
.g-foot:not(:has(*)) { display: none; }
/* an amount to track: the fill is how far along you are */
.qty { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px; overflow: hidden; border-radius: 14px; background: var(--fill); }
.qty i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: color-mix(in srgb, var(--green) 20%, transparent); transition: width .5s var(--ease); }
.qty > :not(i) { position: relative; }
.qty span { flex: 1; font-size: 13.5px; color: var(--mute); text-align: center; font-variant-numeric: tabular-nums; }
.qty b { color: var(--ink); }
.qty button { width: 28px; height: 28px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-weight: 600; text-align: center; transition: transform .3s var(--spring); }
.qty button:active { transform: scale(.88); }
.gt-bar { overflow: hidden; }
.gt-bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: color-mix(in srgb, var(--c) 45%, transparent); }
.weeks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm-note { margin: 14px 24px 0; font-size: 13px; color: var(--mute); }
.amt { display: grid; }
.amt > span { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.amt p { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 14px; }
.amt input { width: 64px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--fill); outline: none; font-size: 15px; }
.amt input:last-child { flex: 1; width: auto; }
.amt input:focus { box-shadow: 0 0 0 2px var(--green); }
.ups.need { display: block; margin-top: 8px; font-size: 13px; }

/* achieving something: a short burst of light from the check */
.check.glow::before { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 50%; background: var(--siri); filter: blur(6px); animation: turn 1s linear, burst 1.1s var(--ease) both; pointer-events: none; }
@keyframes burst { 0% { opacity: 0; scale: .6; } 30% { opacity: .9; } 100% { opacity: 0; scale: 1.8; } }
.check.glow { z-index: 0; }

/* ---------- fixed: things you have to do anyway ---------- */
.fx-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--fill); font-size: 11.5px; font-style: normal; font-weight: 700; color: var(--mute); }
.fx-h { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mute); }
.fx-h input { width: 64px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--fill); outline: none; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.fx-h input:focus { box-shadow: 0 0 0 2px var(--green); }
.lb { overflow: hidden; border-radius: 18px; background: var(--card); box-shadow: var(--lift); }
.lb li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px 6px 18px; }
.lb li + li::before { content: ''; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--hair); }
.lb li > span { flex: 1; font-size: 15.5px; }
.lb .x { flex: none; opacity: .5; }
.lb li:hover .x { opacity: 1; }
.lb-add input { flex: 1; height: 38px; border: 0; background: none; outline: none; font-size: 15px; }
.lb-add input::placeholder { color: var(--faint); }

/* what your life is for sits right under who you're becoming */
/* life goals: a quiet row of categories, each showing one goal at a time (6s each), not a wall of pills */
.ug { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 22px; margin-top: 18px; }
@media (max-width: 600px) { .ug { grid-template-columns: 1fr 1fr; gap: 4px 16px; } }
.ug-c { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 4px; border-top: 2px solid color-mix(in srgb, var(--c) 70%, transparent); min-width: 0; }
.ug-c small { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--c); filter: brightness(1.25); }
.ug-t { display: grid; }
.ug-t span { grid-area: 1 / 1; font-size: 14px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  animation: ug calc(var(--n) * 6s) var(--ease) calc((var(--i) - var(--n)) * 6s) infinite; }
.ug-t span.done { color: var(--mute); text-decoration: line-through; }
.ug-c[style*="--n:1"] .ug-t span { animation: none; }
.ug-d { display: flex; gap: 4px; }
.ug-d i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); animation: ug-d calc(var(--n) * 6s) linear calc((var(--i) - var(--n)) * 6s) infinite; }
.ug-c:hover * { animation-play-state: paused; }
.ug-c:hover .ug-t span { color: var(--ink); }
/* a span is shown for 1/n of the loop: 2 goals → 50%, 3 → 33% */
@keyframes ug { 0% { opacity: 0; transform: translateY(5px); } 4%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes ug-d { 0%, 33% { opacity: 1; } 33.01%, 100% { opacity: .25; } }
.ug-c[style*="--n:2"] .ug-t span { animation-name: ug2; }
.ug-c[style*="--n:2"] .ug-d i { animation-name: ug-d2; }
@keyframes ug2 { 0% { opacity: 0; transform: translateY(5px); } 3%, 45% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes ug-d2 { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: .25; } }
.ug .ug-add { grid-column: 1 / -1; justify-self: start; padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--mute); font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
  .ug-t span, .ug-d i { animation: none !important; }
  .ug-t span:not([style*="--i:0"]) { visibility: hidden; }
  .ug-d i:not([style*="--i:0"]) { opacity: .25; }
}

/* ---------- this week ---------- */
.tw { margin-top: 20px; padding: 24px 26px 16px; border-radius: 28px; background: var(--card); box-shadow: var(--lift); }
.tw-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tw-h h2 { font: 700 24px/1.2 var(--display); letter-spacing: -.025em; }
.tw-h .primary, .tw-h .ghost { display: inline-flex; align-items: center; height: 40px; }
.tw-s { margin-top: 10px; font-size: 15px; color: var(--mute); }
.tw-s b { color: var(--ink); }
.tw-g { margin-top: 6px; }
.tw-g li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; }
.tw-g li + li::before { content: ''; position: absolute; top: 0; left: 34px; right: 0; height: 1px; background: var(--hair); }
.tw-t { flex: 1; display: grid; gap: 1px; min-width: 0; }
.tw-t b { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.tw-t a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); }
.tw-g li.done .tw-t b { color: var(--faint); text-decoration: line-through; }
.tw-n { position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; overflow: hidden; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-n i { position: absolute; z-index: -1; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: color-mix(in srgb, var(--green) 22%, transparent); transition: width .5s var(--ease); }
.tw-n button { width: 24px; height: 24px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-weight: 600; transition: transform .3s var(--spring); }
.tw-n button:active { transform: scale(.85); }
.tw-fx { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tw-fx span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--fill); font-size: 13.5px; }
.tw-fx .fx-tag { background: var(--card); }
.tw-fx small { color: var(--mute); }
.tw-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--mute); }
.tw-f > span { display: flex; flex-wrap: wrap; gap: 4px 0; }

/* ---------- review: three steps, top to bottom ---------- */
.rv-lede { margin-top: 14px; max-width: 60ch; font-size: 17px; color: var(--mute); }
.rv { counter-reset: rv; margin: 0; padding: 0; list-style: none; }
.rv > li { counter-increment: rv; }
.rv > li:not(.on) { display: none; }
.rv-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rv-q { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.rv-q textarea { resize: vertical; font: inherit; line-height: 1.45; }
.rv-score { margin: 18px 0 12px; font-size: 16px; color: var(--mute); }
.rv-score b { margin-right: 2px; font: 700 44px/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.rv-card { margin-top: 0; padding: 6px 22px; border-radius: 24px; background: var(--card); box-shadow: var(--lift); }
.rv-n { flex: none; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rv-call { display: grid; gap: 12px; margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: var(--fill); }
.rv-call .label { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; }
.rv-ago { margin-top: 16px; }
.gchips.rv-lv { flex-wrap: wrap; margin-bottom: 10px; -webkit-mask-image: none; mask-image: none; }
.rv-more { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 14px; font-weight: 500; }
.rv-next { margin-top: 8px; font-size: 15px; font-weight: 500; }
.rv-a { display: inline-flex; align-items: center; }
.rv-fin-a { flex-wrap: wrap; margin-top: 28px; }
.rf-wk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.rf-wk i { width: 14px; height: 14px; border-radius: 50%; background: var(--fill); }
.rf-wk i.on { background: var(--green); }
.rf-wk i.now { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.rf-list { display: grid; gap: 12px; margin-top: 28px; }
.rf-e { display: grid; gap: 10px; padding: 18px 22px; border-radius: 22px; background: var(--card); box-shadow: var(--lift); }
.rf-e header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rf-e header span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rf-e .label { display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 600; }
.rf-none { margin-top: 20px; }
.tw-due { margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--spark) 12%, transparent); font-size: 14.5px; }
.tw-due b { font-weight: 700; }
.tw-f > span:last-child { display: inline-flex; align-items: center; gap: 2px; }
.rf-link { display: inline-flex; align-items: center; }
.rv-up { overflow: hidden; border-radius: 18px; background: var(--card); box-shadow: var(--lift); }
.rv-up li { position: relative; display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px 8px 20px; }
.rv-up li + li::before { content: ''; position: absolute; top: 0; left: 40px; right: 0; height: 1px; background: var(--hair); }
.rv-up li > span { display: grid; }
.rv-up b { font-weight: 600; letter-spacing: -.015em; }
.rv-up small { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rv-up .ok { color: var(--green-text); font-weight: 600; }
.rv-up li.done b { color: var(--faint); text-decoration: line-through; }
.rv .lb.fx { margin-top: 14px; }
.rv-end { display: flex; align-items: center; gap: 12px; margin-top: 44px; }
.rv-dots { display: flex; gap: 8px; margin-right: auto; order: -1; }
.rv-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; background: var(--edge); transition: width .45s var(--spring), background .3s; }
.rv-dots .past { background: var(--green); }
.rv-dots .on { width: 30px; background: var(--ink); }
.lk { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lk p { padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: var(--lift); }
.lk .label { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; }
.fx-rep { flex: none; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--fill); font-size: 12px; font-weight: 600; color: var(--mute); transition: background .2s, color .2s; }
.fx-rep:hover { color: var(--ink); }
.fx-rep.on { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-text); }

/* ---------- hover light: a soft warm light inside the card, under the words, where the pointer is ---------- */
:is(.g, .lc, .tile, .mc, .door, .hb, .card, .gcat, .tw) { position: relative; isolation: isolate; }
:is(.g, .lc, .tile, .mc, .door, .hb, .card, .gcat, .tw)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 90, 31, .1), rgba(255, 90, 31, .03) 45%, transparent 70%);
}
/* and the edge nearest the pointer catches a thin line of the same light */
:is(.g, .lc, .tile, .mc, .door, .hb, .card, .gcat, .tw)::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 90, 31, .45), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
:is(.g, .lc, .tile, .mc, .door, .hb, .card, .gcat, .tw):hover::before { opacity: 1; }
:is(.g, .lc, .tile, .mc, .door, .hb, .card, .gcat, .tw):hover::after { opacity: 1; }
:is(.g, .lc, .tile, .mc, .door):active { transform: scale(.985); transition-duration: .15s; }
@media (prefers-color-scheme: dark) {
  :is(.g, .lc, .tile, .mc, .door, .hb, .card, .gcat, .tw)::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .055), transparent 70%); }
  :is(.g, .lc, .tile, .mc, .door, .hb, .card, .gcat, .tw)::before { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 70%); }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .hbs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lw { columns: 1; padding: 18px 14px; }
  .lw-y > span { gap: 2px; } .lw-y > span > span { gap: 1px; }
  .hold { width: 96px; height: 96px; }
  .bar { grid-template-columns: 1fr auto; padding: 0 16px; height: 56px; }
  .tabs {
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%);
    background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 0 0 1px var(--hair), 0 12px 30px -12px rgba(0, 0, 0, .3);
  }
  .tabs a { height: 40px; padding: 0 16px; }
  .main { padding: 28px 18px 120px; }
  .identity { font-size: 36px; }
  .head h1 { font-size: 48px; }
  .cats { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; gap: 16px; }
  .row { grid-template-columns: 1fr; }
  .sheet-bg { place-items: end stretch; padding: 0; }
  .sheet { width: 100%; max-height: 92dvh; border-radius: 28px 28px 0 0; }
  .panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 78dvh; transform: translateY(110%); }
  .notes { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 60vh; transform: translateY(110%); }
  .notes.full { top: auto; height: 100dvh; }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .bar-r { gap: 0; }
  .bar-r .chip { padding: 0 10px; }
  .tabs a { padding: 0 14px; }
  .gt { --lw: 150px; --pad: 14px; }
  .months { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel.coach { width: auto; }
  .tabs a { padding: 0 11px; font-size: 13px; }
  .tabs span { display: none; }
  .stage { margin: 0 -6px; padding: 26px 20px 22px; border-radius: 28px; }
  .stns { gap: 4px; }
  .stn { padding: 10px 8px 12px; }
  .stn b { font-size: 24px; }
  .cols { margin: 0 -6px; border-radius: 24px; scroll-snap-type: x mandatory; }
  .fc, .pv { scroll-snap-align: start; }
  .fc { width: 132px; }
  .pv { flex-basis: 260px; padding: 22px; }
  .stn { padding: 8px 0 10px; text-align: center; }
  .stn b { font-size: 16px; }
  .stn .label, .stn .dots { display: none; }
  .frame label { grid-template-columns: 1fr; gap: 0; }
  .doors { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
  .door { grid-template-columns: 104px 1fr; justify-items: start; align-items: center; padding: 14px 18px 14px 10px; text-align: left; }
  .door-a { height: 96px; width: 104px; }
  .door-a > :not(.mosaic) { scale: .78; }
  .mosaic { width: 92px; height: 76px; gap: 4px; }
  .mosaic i { border-radius: 8px; }
  .mem, .vb { grid-template-columns: 1fr 1fr; gap: 10px; }
  .weeks { grid-template-columns: 1fr 1fr; }
  .hr { grid-template-columns: 8px 92px 1fr 48px; gap: 10px; }
  .tw { margin: 16px -6px 0; padding: 20px 18px 14px; border-radius: 24px; }
  .rv-q, .lk { grid-template-columns: 1fr; }
  .rv-up li { grid-template-columns: 8px 1fr auto; padding-left: 16px; }
  .rv-up li > small.ok { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* goal sheet: the goal first, everything else folded */
.g-main { padding: 8px 24px 4px; }
.g-main .big { font-size: 28px; }
.g-main .big::placeholder { color: var(--faint); opacity: .6; }
.g-main .ups { margin-top: 10px; }
.more { margin: 10px 0 0; border-top: 1px solid var(--hair); }
.more summary { display: flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 14px; font-weight: 600; color: var(--mute); cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fill); font-size: 16px; font-weight: 400; transition: rotate .3s var(--ease); }
.more[open] summary::before { rotate: 45deg; }
.more summary:hover { color: var(--ink); }
.more .vis { height: 96px; margin-top: 0; }

/* Start here: four stops joined by a line, green when set, the next one glowing */
.st-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); margin: 22px 0 6px; padding: 0; list-style: none; }
.st-steps li { position: relative; }
.st-steps li + li::before { content: ''; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: var(--fill); }
.st-steps li.done + li::before { background: var(--green); }
.st-steps a { position: relative; display: grid; justify-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--mute); }
.st-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--edge); }
.st-steps .done i { background: var(--green); box-shadow: none; }
.st-steps .done i::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; }
.st-steps .on a { color: var(--ink); }
.st-steps .on i { box-shadow: inset 0 0 0 2px var(--spark), 0 0 0 5px color-mix(in srgb, var(--spark) 16%, transparent); animation: pulse 2.4s ease-in-out infinite; }

/* ---------- premium pass: quieter chrome, more air, type does the work ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip span { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.main { padding-top: 72px; }
.head h1 { font-weight: 650; letter-spacing: -.05em; }
.sec-h h2, .browse-h { font-weight: 650; }
@media (min-width: 761px) {
  .bar { height: 76px; padding: 0 44px; box-shadow: none; }
  /* text tabs; the page you're on gets a small ink dot underneath */
  .tabs { gap: 34px; padding: 0; background: none; }
  .tabs a { position: relative; height: 76px; padding: 0; border-radius: 0; font-size: 15px; font-weight: 500; }
  .tabs a.on { background: none; box-shadow: none; font-weight: 600; }
  .tabs a::after { content: ''; position: absolute; left: 50%; bottom: 20px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); scale: 0; transition: scale .35s var(--spring); }
  .tabs a.on::after { scale: 1; }
  .tabs span { display: none; }
}

/* segmented control */
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--fill); }
.seg button { height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mute); transition: background .3s var(--ease), color .2s, box-shadow .3s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(26, 26, 24, .1); }

/* goals by category */
.gcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 28px; }
.gcat { padding: 24px 28px 18px; border-radius: 26px; background: var(--card); box-shadow: var(--lift); animation: rise .6s var(--ease) both; }
.gcat:nth-child(2) { animation-delay: 50ms; } .gcat:nth-child(3) { animation-delay: 100ms; } .gcat:nth-child(n+4) { animation-delay: 150ms; }
.gcat header { display: grid; grid-template-columns: auto minmax(90px, 1fr); align-items: center; gap: 18px; margin-bottom: 8px; }
.gcat h2 { font: 650 21px/1.2 var(--display); letter-spacing: -.025em; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the glowing line, in the category's colour */
.gline { position: relative; height: 3px; border-radius: 2px; background: var(--sand); }
.gline i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); transform-origin: left; animation: grow 1.1s var(--ease) .15s both; }
.gline i::after { content: ''; position: absolute; right: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 0 10px var(--c); }
.gcat li { padding: 11px 0; font-size: 16.5px; line-height: 1.35; letter-spacing: -.012em; cursor: pointer; border-radius: 10px; transition: color .2s, padding .3s var(--ease); }
.gcat li + li { box-shadow: 0 -1px 0 var(--hair); }
.gcat li:hover { color: var(--c); padding-left: 6px; }
.gcat li.done { color: var(--faint); text-decoration: line-through; }
.g-empty { display: inline-flex; align-items: center; margin-top: 8px; }
a.ghost { display: inline-flex; align-items: center; }
.brand, .bar-r .chip { white-space: nowrap; }
@media (max-width: 480px) {
  .bar-r .chip { padding: 0 7px; font-size: 13px; }
  .bar-r .c-btn { font-size: 0; gap: 0; } /* the orb alone stands for the Coach */
  .gcat { padding: 20px 20px 12px; }
  .seg { display: flex; }
  .seg button { flex: 1; padding: 0; }
}

/* ---------- polish: facts read as quiet text, not a row of pills ---------- */
.g-foot { gap: 4px 14px; }
.g-foot > *, .lc-g { padding: 0; background: none; border-radius: 0; }
.g-foot .ok { background: none; }
.lc-g { font-size: 12.5px; color: var(--mute); }
/* an empty slot is one quiet line, not a box per category */
.slot { height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--faint); font-size: 14px; font-weight: 500; text-align: left; }
.slot:hover { background: var(--fill); color: var(--ink); }
/* the plan columns and the life line show where you are, not a dot per goal */
.cr .dots, .stn .dots { display: none; }
.cr { grid-template-columns: 1fr; }
@media (prefers-color-scheme: dark) {
  .gcat h2 { color: color-mix(in srgb, var(--c) 62%, #F3EEE5); }
  .gcat li:hover { color: color-mix(in srgb, var(--c) 62%, #F3EEE5); }
}
.step { flex-wrap: wrap; } .step a { white-space: nowrap; }

/* ---------- how much of your life is lived: one big number, one line, the spark is you now ---------- */
.lived { margin: 26px 0 8px; }
.lv-n { font: 700 104px/.95 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--faint); }
.lv-n b { color: var(--ink); font-weight: inherit; }
.lv-t { margin-top: 8px; font-size: 17px; color: var(--mute); }
.lv-line { position: relative; height: 4px; margin-top: 22px; border-radius: 2px; background: var(--sand); }
.lv-line i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--ink); transform-origin: left; animation: grow 1.4s var(--ease) .1s both; }
.lv-line i::after { content: ''; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 3px var(--bg), 0 0 14px rgba(255, 90, 31, .5); }
.lv-f { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13.5px; color: var(--mute); }
.lv-f span + span { margin-left: auto; }
.lv-f a { color: var(--green-text); font-weight: 600; }
.lived + .idcap { margin-top: 48px; }

/* ---------- me: your profile, a quiet settings page ---------- */
.me-btn { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 6px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 700; transition: transform .3s var(--spring), box-shadow .2s; }
.me-btn { overflow: hidden; }
.me-btn img { width: 100%; height: 100%; object-fit: cover; }
.me-btn:hover { transform: scale(1.06); }
.me-btn.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.fine { font-size: 12.5px; color: var(--faint); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills button { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--fill); font-size: 14px; font-weight: 600; color: var(--mute); transition: background .2s, color .2s, transform .3s var(--spring); }
.pills button:hover { color: var(--ink); }
.pills button:active { transform: scale(.96); }
.pills button.on { background: var(--ink); color: var(--bg); }

/* ---------- sign up and log in ---------- */
.ob-card { gap: 18px; width: min(480px, 100%); padding: 40px; }
.ob h1 { font-size: 34px; }
.au-welcome h1 { font-size: 44px; line-height: 1.04; }
.ob .ghost { height: 50px; display: grid; place-items: center; }
.au-top { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.au-back { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); font-size: 22px; line-height: 1; color: var(--ink); transition: background .2s; }
.au-back:hover { background: var(--sand); }
.au-login .au-back { margin-bottom: 6px; }
.au-prog { flex: 1; height: 4px; border-radius: 2px; background: var(--sand); }
.au-prog i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--ink); transition: width .5s var(--ease); }
.au-str { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: -8px; }
.au-str i { height: 4px; border-radius: 2px; background: var(--sand); transition: background .3s; }
.au-str[data-s="1"] i:nth-child(-n+1) { background: var(--spark); }
.au-str[data-s="2"] i:nth-child(-n+2), .au-str[data-s="3"] i { background: var(--green); }
.au-err { margin-top: -6px; font-size: 13.5px; font-weight: 600; color: var(--spark); }
.au-note { padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: 13.5px; color: var(--mute); }
.ob .g-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.g-btn svg { flex: none; width: 18px; height: 18px; }
.au-or { margin: -4px 0 -6px; text-align: center; font-size: 13.5px; color: var(--mute); }
.au-lived { min-height: 118px; padding: 20px 22px; border-radius: 20px; background: var(--fill); }
.au-lived .lv-n { font-size: 52px; }
.au-lived .fine { margin-top: 6px; font-size: 13.5px; color: var(--mute); }
.au-lived .lv-line { margin-top: 16px; }
.au-lived .lv-line i::after { box-shadow: 0 0 0 3px var(--fill), 0 0 14px rgba(255, 90, 31, .5); }
@media (max-width: 760px) {
  .lv-n { font-size: 76px; }
  .ob-card { padding: 28px 22px; }
  .au-welcome h1 { font-size: 36px; }
}

/* ---------- stare mode: the whole life, one decade at a time, in a dark room ---------- */
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-stare { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mute); background: rgba(255, 255, 255, .06); transition: background .3s var(--ease), color .3s var(--ease); }
.st-stare:hover { background: rgba(255, 255, 255, .11); color: var(--ink); }
.st-stare i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .7; box-shadow: 0 0 8px rgba(243, 238, 229, .6); }

.stare {
  --ink: #F3EEE5; --mute: #B8B0A2; --faint: #7A746A; --spark: #FF7A45; --ms: 9s;
  position: fixed; inset: 0; z-index: 120; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; padding: 0 clamp(20px, 7vw, 120px) clamp(28px, 6vh, 64px);
  background: #141413; color: var(--ink); animation: fade .9s var(--ease) both;
}
body.staring { overflow: hidden; }
.stare {
  --ink: #F3EEE5; --mute: #B8B0A2; --faint: #7A746A; --spark: #FF7A45; --cell: #1C1B19;
  position: fixed; inset: 0; z-index: 120; isolation: isolate; overflow: auto; overscroll-behavior: contain;
  background: #141413; color: var(--ink); animation: fade .9s var(--ease) both;
}
.stare.bye { animation: fade .45s var(--ease) reverse both; }
.stare::before {
  content: ''; position: fixed; inset: -30%; z-index: -1; filter: blur(30px); pointer-events: none;
  background: radial-gradient(28% 34% at 50% 12%, rgba(243, 238, 229, .07), transparent 70%), radial-gradient(30% 36% at 20% 60%, rgba(255, 90, 31, .05), transparent 70%), radial-gradient(34% 40% at 80% 80%, rgba(31, 163, 92, .04), transparent 70%);
}
.sr-x { position: fixed; z-index: 2; top: max(20px, env(safe-area-inset-top)); right: clamp(16px, 3vw, 32px); display: flex; gap: 8px; }
.sr-x button { height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--mute); background: rgba(40, 39, 36, .8); backdrop-filter: blur(12px); transition: background .3s var(--ease), color .3s var(--ease); }
.sr-x button:hover { background: rgba(70, 68, 63, .9); color: var(--ink); }

/* the pyramid: each row a little wider than the one above it */
.sr-board { position: relative; display: grid; justify-items: center; gap: 56px; min-height: 100%; padding: 60px clamp(16px, 3vw, 40px) 64px; align-content: safe center; }
.sr-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sr-web path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sr-draw 1.6s var(--ease) forwards; animation-delay: calc(.5s + var(--l) * .45s); transition: opacity .4s var(--ease), stroke-width .4s var(--ease); }
.sr-web.drawn path { animation: none; stroke-dashoffset: 0; }
.sr-web .br { stroke: rgba(243, 238, 229, .1); stroke-width: 1; }
.sr-web .th { stroke-width: 1.5; opacity: .6; }
@keyframes sr-draw { to { stroke-dashoffset: 0; } }
.sr-row { position: relative; width: 100%; max-width: var(--w); display: grid; grid-template-columns: var(--cols); align-items: start; gap: 10px; animation: fade 1.2s var(--ease) both; animation-delay: calc(var(--i) * .2s); }
.sr-row:nth-of-type(1) { max-width: min(var(--w), 1320px); }
.stare.seen .sr-life, .stare.seen .sr-row { animation-duration: .35s; animation-delay: 0s; }
.stare.seen .sr-web path { animation-duration: .5s; animation-delay: 0s; }

.sr-c { position: relative; min-width: 0; padding: 12px 12px 14px; border-radius: 18px; background: var(--cell); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); transition: opacity .4s var(--ease); }
.sr-board .sr-c { cursor: grab; }
.sr-c.drag { z-index: 3; cursor: grabbing; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px -16px rgba(0, 0, 0, .8); }
.sr-row:has(.drag) { z-index: 3; }
.sr-c.home { transition: translate .7s var(--ease); }
.sr-c.now { background: #23211E; box-shadow: 0 0 0 1px rgba(255, 122, 69, .22), 0 0 34px -10px rgba(255, 122, 69, .35); }
.sr-c > p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.sr-c b { font: 650 15px/1.2 var(--display); letter-spacing: -.02em; }
.sr-c small { font-size: 11.5px; color: var(--faint); }
.sr-c .sp { margin: 0; align-self: center; box-shadow: 0 0 10px var(--spark); }
.sr-c ul { display: grid; gap: 6px; margin-top: 8px; }
.sr-c ul:empty { display: none; }
.sr-c li { display: grid; grid-template-columns: 7px 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.35; color: rgba(243, 238, 229, .86); cursor: inherit; transition: opacity .4s var(--ease), color .4s var(--ease); }
.sr-c li .sr-g { display: -webkit-box; padding: 0; border-radius: 4px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.sr-c li .sr-g:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(243, 238, 229, .3); text-underline-offset: 3px; }
.sr-c li .sr-g { overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sr-c li .cd { width: 7px; height: 7px; transform: translateY(-1px); box-shadow: 0 0 8px var(--c); }
.sr-c.dense ul { gap: 4px; }
.sr-c.dense li { font-size: 12px; }
.sr-c.dense li .sr-g { -webkit-line-clamp: 1; }
.sr-c li.done .sr-g { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(243, 238, 229, .25); }

.sr-life { max-width: 720px; padding: 18px 28px 20px; border-radius: 28px; text-align: center; animation: fade 1.2s var(--ease) both; }
.sr-k { display: block !important; font-size: 13px; color: var(--mute); }
.sr-life h2 { margin-top: 4px; font: 700 clamp(34px, 5vw, 56px)/1 var(--display); letter-spacing: -.045em; }
.sr-life ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 16px; }
.sr-life li { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; }

/* one category at a time: pills across the top */
.sr-f { position: fixed; z-index: 2; top: max(20px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(40, 39, 36, .8); backdrop-filter: blur(12px); max-width: calc(100vw - 260px); overflow-x: auto; scrollbar-width: none; }
.sr-f button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mute); transition: background .3s var(--ease), color .3s var(--ease); }
.sr-f button i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sr-f button:hover { color: var(--ink); }
.sr-f button[aria-pressed="true"] { color: var(--ink); background: rgba(243, 238, 229, .12); }
.sr-f button[aria-pressed="true"] i { box-shadow: 0 0 10px var(--c); }
.sr-c > p button { display: inline-flex; align-items: baseline; gap: 8px; margin: -4px -6px; padding: 4px 6px; border-radius: 8px; color: inherit; cursor: pointer; transition: background .3s var(--ease); }
.sr-c > p button:hover { background: rgba(243, 238, 229, .08); }
.sr-c.on { box-shadow: 0 0 0 1px rgba(243, 238, 229, .35), 0 0 34px -10px rgba(243, 238, 229, .3); }
.sr-row .sr-c:not(.has) { opacity: .55; }

@media (max-width: 760px) {
  .sr-board { gap: 48px; padding-top: 120px; }
  .sr-f { top: calc(max(20px, env(safe-area-inset-top)) + 46px); max-width: calc(100vw - 32px); }
  .sr-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .sr-c { flex: 1 1 64px; padding: 9px 10px; border-radius: 14px; }
  .sr-c.has { flex-basis: 100%; }
  .sr-c:not(.has) small { display: none; }
}

/* ---------- focus: a few words to lean into this year and this month ---------- */
.focus { margin-top: 20px; padding: 22px 26px 18px; border-radius: 28px; background: var(--card); box-shadow: var(--lift); }
.focus h2 { font: 700 24px/1.2 var(--display); letter-spacing: -.025em; }
.fo-r { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; }
.fo-r + .fo-r { border-top: 1px solid var(--hair); }
.fo-l { font-size: 13.5px; font-weight: 600; color: var(--mute); }
.fo-w { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.fo-x { position: relative; font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--display); letter-spacing: -.035em; }
.fo-r:first-child .fo-x, .focus h2 + .fo-r .fo-x { font-size: clamp(26px, 3.2vw, 38px); }
.fo-x button { position: absolute; top: -6px; right: -16px; width: 20px; height: 20px; border-radius: 50%; font: 500 14px/20px var(--sans); text-align: center; color: var(--mute); background: var(--fill); opacity: 0; transition: opacity .2s var(--ease); }
.fo-x:hover button, .fo-x button:focus-visible { opacity: 1; }
.fo-in { min-width: 0; width: 13ch; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fill); outline: none; font-size: 14px; align-self: center; }
.fo-in::placeholder { color: var(--faint); }
.fo-in:focus { width: 18ch; }
@media (hover: none) { .fo-x button { opacity: .7; } }
@media (max-width: 760px) {
  .focus { padding: 20px 20px 14px; }
  .fo-r { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- import: bring goals in from ChatGPT, Claude or notes ---------- */
.head-r { display: flex; gap: 8px; }
.head-r .ghost { display: grid; place-items: center; }
.im.im-check { width: min(560px, 100%); }
.im-o { display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--fill); text-align: left; transition: background .25s var(--ease), transform .3s var(--spring); }
.im-o:hover { background: var(--sand); }
.im-o:active { transform: scale(.98); }
.im-o b { font: 650 17px/1.2 var(--display); letter-spacing: -.02em; }
.im-o span { font-size: 14px; color: var(--mute); }
.im-steps { display: grid; gap: 18px; counter-reset: im; }
.im-steps li { position: relative; display: grid; gap: 8px; padding-left: 36px; font-size: 14.5px; color: var(--mute); counter-increment: im; }
.im-steps li::before { content: counter(im); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 700; }
.im-steps b { color: var(--ink); font-weight: 600; }
.im-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ob .im-btns .ghost { height: 38px; padding: 0 16px; font-size: 14px; }
.im-in { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--fill); outline: none; resize: vertical; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); transition: box-shadow .2s; }
.im-in:focus { box-shadow: 0 0 0 2px var(--green); }
.im-found { min-height: 20px; margin: -6px 0 -4px; font-size: 13.5px; font-weight: 600; color: var(--green-text); }
.im-list { display: grid; gap: 18px; max-height: min(46vh, 460px); overflow: auto; margin: 0 -8px; padding: 4px 8px; }
.im-list h3 { margin-bottom: 6px; font: 650 15px/1.2 var(--display); letter-spacing: -.02em; }
.im-list ul { display: grid; gap: 2px; }
.im-list li { display: grid; grid-template-columns: 8px 1fr 28px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; transition: background .2s; }
.im-list li:hover { background: var(--fill); }
.im-list li button { width: 28px; height: 28px; border-radius: 50%; font-size: 17px; color: var(--mute); opacity: 0; transition: opacity .2s, background .2s; }
.im-list li:hover button, .im-list li button:focus-visible { opacity: 1; }
.im-list li button:hover { background: var(--sand); color: var(--ink); }
@media (hover: none) { .im-list li button { opacity: 1; } }
.im-skip { font-size: 13.5px; color: var(--mute); }
.im-skip summary { cursor: pointer; font-weight: 600; }
.im-skip ul { display: grid; gap: 6px; margin-top: 8px; }
.im-skip li { display: grid; }
.im-skip small { font-size: 12.5px; color: var(--faint, var(--mute)); }

/* ---------- goals: step through periods, a month's four weeks, tick goals off ---------- */
.gpick { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.gar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); font-size: 20px; line-height: 1; color: var(--ink); transition: background .2s, transform .3s var(--spring), opacity .2s; }
.gar:hover:not(:disabled) { background: var(--sand); }
.gar:active:not(:disabled) { transform: scale(.9); }
.gar:disabled { opacity: .3; cursor: default; }
.gchips { display: flex; gap: 2px; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.gchips::-webkit-scrollbar { display: none; }
.gchip { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; transition: background .25s var(--ease), color .2s; }
.gchip:hover { color: var(--ink); background: var(--fill); }
.gchip.on { background: var(--ink); color: var(--bg); }
.gchip .sp { margin-left: 7px; vertical-align: 0; }
.gchip.on .sp { box-shadow: 0 0 8px var(--spark); }

/* one goal: a ring to tick, tinted with its category; ticking draws a line through it */
:is(.gcat, .gwk) .gi { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; margin: 0 -6px; padding: 12px 6px; border-radius: 12px; font-size: 16.5px; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); cursor: pointer; transition: background .2s; }
:is(.gcat, .gwk) .gi:hover { padding-left: 6px; color: var(--ink); }
:is(.gcat, .gwk) .gi.done { text-decoration: none; }
.gi .check { box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--c) 55%, var(--edge)); }
.gi .check:hover { box-shadow: inset 0 0 0 1.6px var(--green); }
.gi .check[aria-pressed="true"] { box-shadow: none; }
.gi p { transition: color .35s var(--ease), transform .3s var(--ease); }
.gi:hover p { transform: translateX(3px); }
.gi p span { background: linear-gradient(currentColor, currentColor) 0 58% / 0 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gi.done p { color: var(--faint); }
.gi.done p span { background-size: 100% 1.5px; }
.gi.just p { animation: g-fade .6s var(--ease) both; }
.gi.just p span { animation: g-strike .55s var(--ease) .08s both; }
@keyframes g-strike { from { background-size: 0 1.5px; } }
@keyframes g-fade { from { color: var(--ink); } }

/* the month's four weeks; the one you're in glows with the "now" colour */
.gwks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 28px; }
.gwk { padding: 22px 26px 14px; border-radius: 26px; background: var(--card); box-shadow: var(--lift); animation: rise .6s var(--ease) both; transition: box-shadow .3s; }
.gwk:nth-child(2) { animation-delay: 50ms; } .gwk:nth-child(3) { animation-delay: 100ms; } .gwk:nth-child(4) { animation-delay: 150ms; }
.gwk header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gwk header a { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.gwk h2 { font: 650 21px/1.2 var(--display); letter-spacing: -.025em; }
.gwk header a span { font-size: 13.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.gwk header a:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.gwk .now-tag { margin: 0; }
.gwk.now { background: color-mix(in srgb, var(--spark) 6%, var(--card)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--spark) 50%, transparent), 0 20px 44px -20px color-mix(in srgb, var(--spark) 55%, transparent); }
.gwk.now h2 { color: color-mix(in srgb, var(--spark) 80%, var(--ink)); }
.gwk .gi { font-size: 15.5px; }
.gwk-e { display: inline-block; padding: 10px 0 12px; font-size: 14.5px; font-weight: 600; color: var(--mute); }
.gwk-e:hover { color: var(--ink); }
@media (max-width: 480px) {
  .gwk { padding: 18px 20px 10px; }
  .gpick { margin-right: -4px; }
}

/* ---------- design your week: goals and lists beside a Monday-to-Sunday timetable ---------- */
.head.period.wp-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.wp-h h1 { font-size: 52px; }
.wp-nav { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wp-wk button { display: grid; justify-items: center; height: auto; padding: 6px 16px; line-height: 1.2; }
.wp-wk small { font-size: 11.5px; font-weight: 500; color: var(--faint); }
.wp-wk button.on small { color: var(--mute); }
.wp-nav .chip { white-space: nowrap; }
.wp-nav .chip.on { background: var(--ink); color: var(--bg); }
.wp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; }
.wp-bar .seg button { height: 32px; padding: 0 14px; font-size: 13.5px; }
.wp-bar .primary, .wp-bar .ghost { height: 38px; padding: 0 16px; font-size: 14px; }
.wp-sp { flex: 1; }
.wp-hrs { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--mute); }
.wp-hrs select { height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--fill); font-size: 13.5px; font-weight: 600; }
.wp { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
.wp-side { position: sticky; top: 84px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-height: calc(100dvh - 100px); overflow: auto; padding: 2px 2px 8px; }
.wp-s { padding: 16px 16px 14px; border-radius: 22px; background: var(--card); box-shadow: var(--lift); }
.wp-s h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--mute); }
.wp-s h3 small { font-size: 12px; font-weight: 500; color: var(--faint); }
.wp-s h3:not(:first-child) { margin-top: 14px; }
.wp-g li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; line-height: 1.3; }
.wp-g li.done span { color: var(--faint); text-decoration: line-through; }
.wp-g span { flex: 1; min-width: 0; }
.wp-g small { flex: none; font-size: 12px; color: var(--green-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wp-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-cats button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 600; color: var(--mute); }
.wp-cats button::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.wp-cats button.on { background: var(--ink); color: var(--bg); }
.wp-cats.sm { gap: 8px; }
.wp-cats.sm button { width: 24px; height: 24px; padding: 0; justify-content: center; background: none; }
.wp-cats.sm button::before { width: 14px; height: 14px; }
.wp-cats.sm button.on { background: none; box-shadow: 0 0 0 2px var(--c); }
.wp-in { width: 100%; height: 40px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--fill); outline: none; font-size: 14.5px; }
.wp-in:focus { box-shadow: 0 0 0 2px var(--green); }
.wp-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.wp-chips li { display: flex; align-items: center; gap: 2px; }
.wp-chip { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 38px; padding: 6px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, var(--card)); box-shadow: inset 3px 0 0 var(--c); font-size: 14px; font-weight: 600; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.wp-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-chip small { flex: none; font-size: 12px; font-weight: 500; color: var(--mute); }
.wp-chip.on { box-shadow: inset 3px 0 0 var(--c), 0 0 0 2px var(--ink); }
.wp-hint { font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.wp-hint a { color: var(--green-text); font-weight: 600; }
.wp-side > .wp-hint { padding: 0 6px; }
.wp-ghost { position: fixed; z-index: 90; max-width: 200px; padding: 8px 12px; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--c) 22%, var(--card)); box-shadow: inset 3px 0 0 var(--c), var(--lift-hi); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transform: translate(-50%, -50%); }
.wp-when { grid-template-columns: 1.3fr 1fr 1fr; }
.wp-when.two { grid-template-columns: 1fr 1fr; }

.wt { overflow-x: auto; border-radius: 22px; background: var(--card); box-shadow: var(--lift); user-select: none; -webkit-user-select: none; }
.wt-in { min-width: 560px; }
.wt-hd, .wt-body { display: grid; grid-template-columns: 52px repeat(var(--n, 7), minmax(0, 1fr)); }
.wt.one .wt-in { min-width: 0; }
.wd .wt { scroll-margin-top: 76px; } /* stays clear of the sticky step bar */
.wt-hd b { display: grid; justify-items: center; padding: 12px 0 10px; font-size: 12px; font-weight: 600; color: var(--mute); }
.wt-hd b small { font: 700 20px/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.wt-hd b.now, .wt-hd b.now small { color: var(--spark); }
.wt-body { position: relative; border-top: 1px solid var(--hair); }
.wt-time { position: relative; }
.wt-time span { position: absolute; right: 8px; margin-top: 3px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt-d { position: relative; border-left: 1px solid var(--hair); cursor: crosshair;
  background: repeating-linear-gradient(to bottom, var(--hair) 0 1px, transparent 1px var(--hr)),
              repeating-linear-gradient(to bottom, color-mix(in srgb, var(--hair) 45%, transparent) 0 1px, transparent 1px var(--u)); }
.wt-d.now { background-color: color-mix(in srgb, var(--spark) 4%, transparent); }
.wt.arm .wt-d { cursor: copy; }
.wt.arm .wt-d:hover { background-color: color-mix(in srgb, var(--green) 8%, transparent); }
.wt-b { position: absolute; display: flex; flex-direction: column; align-items: flex-start; padding: 3px 7px; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--c) 16%, var(--card)); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--card); font-size: 12.5px; line-height: 1.25; cursor: grab; touch-action: none; transition: box-shadow .2s; }
.wt-b:hover { box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--card), 0 6px 16px -8px rgba(0, 0, 0, .3); }
.wt-b b { max-width: 100%; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wt-b small { font-size: 11px; color: var(--mute); white-space: nowrap; }
.wt-b.fixed { background: color-mix(in srgb, var(--c) 28%, var(--card)); }
.wt-b.drag { z-index: 5; left: 1px !important; width: calc(100% - 2px) !important; opacity: .9; pointer-events: none; box-shadow: inset 3px 0 0 var(--c), var(--lift-hi); }
.wt-rs { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.wt-new { position: absolute; left: 3px; right: 3px; border: 1.5px dashed var(--edge); border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); pointer-events: none; }
.wt-now { position: absolute; z-index: 3; left: 0; right: 0; height: 2px; background: var(--spark); pointer-events: none; }
.wt-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--spark); }
@media (max-width: 900px) {
  .wp { grid-template-columns: 1fr; }
  .wp-side { position: static; max-height: none; overflow: visible; }
  .wp-h h1 { font-size: 40px; }
}

/* ---------- learning lists: type a name to make your own ---------- */
.lk-in { width: 120px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--fill) 60%, transparent); outline: none; font-size: 13.5px; font-weight: 600; transition: width .3s var(--ease); }
.lk-in:focus { width: 180px; outline: 2px solid var(--green); }
.lk-in::placeholder { color: var(--mute); }

/* ---------- habits: tonight's check, and when each sits on the timetable ---------- */
.hc { margin-bottom: 24px; padding: 20px 22px 10px; border-radius: 26px; background: var(--card); box-shadow: var(--lift); }
.hc header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.hc h2 { font: 700 24px/1.2 var(--display); letter-spacing: -.025em; }
.hc header p { font-size: 14px; color: var(--mute); }
.hc ul { margin-top: 8px; }
.hc li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; }
.hc li + li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hair); }
.hc-t { flex: 1; display: grid; min-width: 160px; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.hc-t small { font-size: 12.5px; font-weight: 500; color: var(--mute); }
.hc li.on .hc-t { color: var(--faint); }
.hc-a { display: inline-flex; gap: 6px; }
.hc-a button { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--fill); font-size: 13.5px; font-weight: 600; color: var(--mute); transition: background .2s, color .2s, transform .3s var(--spring); }
.hc-a button:hover { color: var(--ink); }
.hc-a button:active { transform: scale(.95); }
.hc-a button.on:first-child { background: var(--green); color: var(--on-green); }
.hc-a button.on:last-child { background: color-mix(in srgb, var(--spark) 18%, var(--fill)); color: var(--ink); }
.hc-in { flex-basis: 100%; height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill); outline: none; font-size: 14.5px; }
.hc-in:focus { box-shadow: 0 0 0 2px var(--green); }
.hb-when { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hb-when input, .hb-when select { height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--fill); font-size: 13px; font-weight: 600; color: var(--mute); }
.hb-when input:focus, .hb-when select:focus { outline: none; box-shadow: 0 0 0 2px var(--green); }
.hb-note { max-width: 100%; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--spark) 9%, transparent); font-size: 12.5px; line-height: 1.35; color: var(--mute); }

/* ---------- goal counts: free, but honest ---------- */
.cnote { margin: -4px 0 18px; font-size: 13.5px; color: var(--mute); }
.cnote.over { display: inline-block; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--spark) 12%, transparent); color: var(--ink); }
.gpick + .cnote { margin-top: 18px; }

/* ---------- exploring the example plan ---------- */
.xbar { position: fixed; z-index: 70; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px); padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--lift-hi); font-size: 14px; color: var(--mute); transform: translateX(-50%); animation: rise .5s var(--ease) both; }
.xbar b { margin-right: 6px; color: var(--spark); font-weight: 700; }
.xbar .primary { height: 38px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
body.exploring .main { padding-bottom: 160px; }
@media (max-width: 760px) {
  .xbar { bottom: calc(84px + env(safe-area-inset-bottom)); border-radius: 22px; font-size: 13px; line-height: 1.35; }
  .xbar .xl { display: none; }
  .tw-f .add { white-space: nowrap; }
  /* the timetable first on a phone: the lists are what you drag from, and they can come after */
  .wt { order: -1; }
}

/* ---------- design your week: time from a goal, and the week's balance ---------- */
.wp-g li { position: relative; }
.wp-add { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fill); font-size: 15px; line-height: 1; color: var(--mute); opacity: .55; transition: opacity .2s, background .2s, color .2s; }
.wp-g li:hover .wp-add, .wp-add:focus-visible { opacity: 1; }
.wp-add:hover { background: var(--ink); color: var(--bg); }
@media (hover: none) { .wp-add { opacity: 1; } }
.wp-bal { margin-top: 16px; }
.wp-bal-l { display: flex; gap: 3px; height: 10px; overflow: hidden; border-radius: 999px; }
.wp-bal-l i { min-width: 6px; border-radius: 999px; background: var(--c); transition: flex .5s var(--ease); }
.wp-bal p { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 13px; color: var(--mute); }
.wp-bal span { display: inline-flex; align-items: center; gap: 6px; }
.wp-bal span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.wp-bal b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wp-bal .none { color: var(--spark); font-weight: 600; }

/* ---------- reflections: weeks and habit notes ---------- */
.rf-tabs { margin-top: 24px; }
.rf-tabs span { margin-left: 6px; font-size: 12px; color: var(--faint); }
.rf-e > p { font-size: 15px; line-height: 1.5; }
.hc header p .add { margin-left: 6px; }

/* ---------- ticking a goal: an orange thread runs up through the goals above it ---------- */
.climb { position: fixed; z-index: 96; right: 24px; bottom: 28px; width: min(320px, calc(100% - 32px)); padding: 16px 18px 14px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), 0 24px 50px -20px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transition: opacity .3s, transform .5s var(--spring), visibility 0s .5s; }
.climb.on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .5s var(--spring); }
.climb ol { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.climb ol::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--spark); transform-origin: bottom; transform: scaleY(0); }
.climb.on ol::before { animation: cl-up .9s var(--ease) .1s both; }
@keyframes cl-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.climb li { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.climb li > i { flex: none; position: relative; z-index: 1; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--edge); }
.climb.on li > i { animation: cl-on .35s var(--spring) calc(.1s + var(--i) * .26s) both; }
@keyframes cl-on { to { background: var(--spark); box-shadow: 0 0 0 3px var(--card); scale: 1.2; } }
.climb li > span { display: grid; min-width: 0; }
.climb small { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.climb b { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.climb li:last-child b { color: var(--mute); }
.cl-bar { display: block; height: 4px; margin: 7px 0 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.cl-bar em { display: block; height: 100%; width: calc(var(--b) * 100%); border-radius: inherit; background: var(--spark); }
.climb.on .cl-bar em { animation: cl-fill .8s var(--ease) .45s both; }
@keyframes cl-fill { from { width: calc(var(--a) * 100%); } }
@media (max-width: 720px) { .climb { right: 16px; bottom: calc(136px + env(safe-area-inset-bottom)); } }

/* ---------- the streak counts up when a reflection is done ---------- */
@property --cu { syntax: '<integer>'; inherits: false; initial-value: 0; }
.cu { --cu: var(--to); display: inline-block; counter-reset: n var(--cu); font-variant-numeric: tabular-nums; animation: cu 1s var(--ease) .25s both, cu-pop .5s var(--spring) 1.2s both; }
.cu::after { content: counter(n); }
@keyframes cu { from { --cu: 0; } }
@keyframes cu-pop { 40% { scale: 1.2; color: var(--spark); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- me: who you are on the left, settings as plain lists on the right ---------- */
.me { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; max-width: 960px; margin: 12px auto 0; align-items: start; }
.me-id { position: sticky; top: 96px; display: grid; justify-items: start; }
.me-ph { position: relative; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--bg); font: 700 50px/1 var(--display); cursor: pointer; }
.me-ph img { width: 100%; height: 100%; object-fit: cover; }
.me-ph em { position: absolute; inset: auto 0 0; padding: 18px 0 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff; font: 600 12.5px var(--sans); font-style: normal; text-align: center; opacity: 0; transition: opacity .2s; }
.me-ph:hover em, .me-ph:focus-within em { opacity: 1; }
@media (hover: none) { .me-ph em { opacity: 1; } }
.me-rm { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--mute); }
.me-rm:hover { color: var(--ink); }
.me-id h1 { margin-top: 22px; font: 700 32px/1.1 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.me-sub { margin-top: 4px; font-size: 16px; color: var(--mute); }
.me-mail { margin-top: 2px; font-size: 13.5px; color: var(--faint); overflow-wrap: anywhere; }
.me-st { display: flex; gap: 26px; margin: 28px 0 0; }
.me-st dt { font-size: 12.5px; color: var(--mute); }
.me-st dd { margin: 3px 0 0; font: 700 26px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.me-left { margin-top: 18px; font-size: 13.5px; line-height: 1.4; color: var(--mute); }
.me-g + .me-g, .me-end { margin-top: 32px; }
.me-g h2 { margin: 0 0 8px 4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.me-g .fine { margin: 8px 4px 0; line-height: 1.4; }
.me-list { border-radius: 20px; background: var(--card); box-shadow: var(--lift); overflow: hidden; }
.me-list.pad { padding: 14px; }
.me-list.pad .pills button { height: 32px; padding: 0 13px; font-size: 13px; }
.me-r { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 54px; padding: 0 12px 0 18px; font-size: 15px; text-align: left; cursor: pointer; transition: background .2s; }
.me-r + .me-r::before { content: ''; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--hair); }
.me-r > span { flex: none; font-weight: 500; }
.me-r input, .me-r select { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--mute); font-size: 15px; text-align: right; outline: none; transition: background .2s, color .2s; }
.me-r select { appearance: none; text-align-last: right; cursor: pointer; }
.me-r input::-webkit-outer-spin-button, .me-r input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.me-r input[type=number] { -moz-appearance: textfield; }
.me-r input:hover, .me-r select:hover { color: var(--ink); }
.me-r input:focus, .me-r select:focus { background: var(--fill); color: var(--ink); }
button.me-r:hover, label.me-r.go:hover { background: var(--fill); }
.me-r.go > span { flex: 1; }
.me-r.go::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 6px; border: solid var(--faint); border-width: 1.6px 1.6px 0 0; rotate: 45deg; }
.me-r.bad > span { color: var(--spark); }
@media (max-width: 860px) {
  .me { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .me-id { position: static; justify-items: center; text-align: center; }
  .me-st { justify-content: center; }
}

/* ---------- Week tab: the week's goals with a To-do button each, then "Start designing" ---------- */
.wd-goals { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 24px; }
.wd-card { padding: 22px 24px 14px; border-radius: 22px; background: var(--card); box-shadow: var(--lift); }
.wd-card h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; font: 700 24px/1.2 var(--display); letter-spacing: -.025em; }
.wd-card h2 small { font: 500 13px/1.3 var(--font, inherit); letter-spacing: 0; color: var(--mute); }
.wd-mo h2 { font-size: 19px; color: var(--mute); }
.wd-gl li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--hair); }
.wd-gl li:first-child { border-top: 0; }
.wd-gt { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.wd-mo .wd-gt, .wp-side .wd-gt { font-size: 14px; }
.wd-g.done .wd-gt { color: var(--faint); text-decoration: line-through; }
.wd-n { flex: none; font-size: 12px; font-weight: 600; color: var(--green-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wd-mk { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, transform .15s; }
.wd-mk:hover { background: var(--ink); color: var(--bg); }
.wd-mk:active { transform: scale(.96); }
.wp-side .wd-g { flex-wrap: wrap; gap: 4px 8px; padding: 9px 0; }
.wp-side .wd-gt { flex-basis: calc(100% - 26px); }
.wp-side .wd-n { margin-left: 18px; }
.wp-side .wd-mk { margin-left: auto; height: 28px; }
.wd-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 24px; }
/* the one thing to press on this page */
.wd-go .wd-start { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 30px 0 34px; border-radius: 999px; background: var(--spark); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--spark) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); transition: transform .25s var(--spring, var(--ease)), box-shadow .25s; }
.wd-go .wd-start::after { content: '→'; font-size: 18px; transition: transform .25s var(--ease); }
.wd-go .wd-start:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px color-mix(in srgb, var(--spark) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); }
.wd-go .wd-start:hover::after { transform: translateX(3px); }
.wd-go .wd-start:active { transform: scale(.97); }
.wd-go p { flex-basis: 100%; font-size: 14px; color: var(--mute); }
.wd-prev { display: block; width: 100%; margin-top: 20px; padding: 0; border-radius: 22px; text-align: left; transition: transform .3s var(--ease), box-shadow .3s; }
.wd-prev .wt { pointer-events: none; }
.wd-prev:hover { transform: translateY(-2px); }
@media (max-width: 900px) { .wd-goals { grid-template-columns: minmax(0, 1fr); } }

/* ---------- design mode: no nav, a step bar on top, the board below ---------- */
body.designing .bar { display: none; }
body.designing .main.on-wide { max-width: none; padding-top: 0; }
.wd-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px 18px; margin: 0 calc(-1 * clamp(18px, 3vw, 40px)); padding: 12px clamp(18px, 3vw, 40px); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.wd-title { display: grid; min-width: 0; }
.wd-title b { font: 700 18px/1.15 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.wd-title small { font-size: 12.5px; color: var(--mute); }
.wd-steps { flex: 1; display: flex; justify-content: center; gap: 4px; }
.wd-steps li { display: flex; align-items: center; }
.wd-steps li + li::before { content: ''; width: 22px; height: 1.5px; margin-right: 4px; border-radius: 2px; background: var(--edge); }
.wd-steps li.ok + li::before, .wd-steps li.ok::before { background: var(--spark); }
.wd-steps button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mute); transition: background .25s, color .25s; }
.wd-steps i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--edge); font-size: 12px; font-style: normal; transition: background .3s, box-shadow .3s; }
.wd-steps .on button { background: var(--fill); color: var(--ink); }
.wd-steps .on i { background: var(--spark); box-shadow: none; color: #fff; }
.wd-steps .ok i { background: var(--ink); box-shadow: none; color: var(--bg); }
.wd-x { flex: none; height: 38px; margin-left: auto; padding: 0 16px; }
.wd .wp { margin-top: 6px; }
.wd .wp-side { top: 74px; max-height: calc(100dvh - 90px); animation: wd-in .45s var(--ease) both; }
@keyframes wd-in { from { opacity: 0; transform: translateX(-10px); } }
.wd-intro { background: none; box-shadow: none; padding: 6px 6px 2px; }
.wd-k { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--spark); }
.wd-intro h2 { margin: 4px 0 6px; font: 700 26px/1.12 var(--display); letter-spacing: -.03em; }
.wd-intro > p:last-child { font-size: 14px; line-height: 1.45; color: var(--mute); }
.wd-next { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 2px 2px; background: linear-gradient(transparent, var(--bg) 30%); }
.wd-next button { height: 46px; padding: 0 18px; font-size: 15px; }
.wd-next .primary { flex: 1; }
.wd-next.col { flex-direction: column; }
.wd-next.col .primary { flex: none; }
/* designing is full screen like the hidden nav, so the Example bar steps aside until Exit */
body.designing .xbar { display: none; }
.wd-fx li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 9px 0; border-top: 1px solid var(--hair); }
.wd-fx li:first-child { border-top: 0; }
.wd-fx li > span:first-child { display: grid; min-width: 0; }
.wd-fx b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-fx small { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.wd-fx .dd { display: flex; flex-wrap: wrap; gap: 3px; }
.wd-fx .dd button { height: 24px; padding: 0 7px; border-radius: 999px; background: var(--fill); font-size: 11.5px; font-weight: 600; }
.wd-fx .dd button:hover { background: var(--ink); color: var(--bg); }
.wd-add { width: 100%; height: 40px; margin-top: 10px; border: 1.5px dashed var(--edge); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--mute); transition: border-color .2s, color .2s; }
.wd-add:hover { border-color: var(--ink); color: var(--ink); }
.wd-add + .wp-hint { margin-top: 6px; text-align: center; }
.wp-side .wp-hrs { display: flex; margin-bottom: 10px; }
.wd-bar { height: 8px; margin: 2px 0 10px; overflow: hidden; border-radius: 999px; background: var(--fill); }
.wd-bar i { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: inherit; background: var(--spark); transition: width .6s var(--ease); }
.wd[data-s="fixed"] .wt-b:not(.fixed) { opacity: .18; pointer-events: none; }
.wd[data-s="fixed"] .wt-b.fixed { box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--card), 0 0 0 2.5px color-mix(in srgb, var(--c) 40%, transparent); }
.wd[data-s="done"] .wt-b { animation: pop .5s var(--ease) both; animation-delay: calc(var(--k) * 45ms); }
.wt-b.pop { animation: pop .45s var(--ease) both; }
@keyframes pop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.05); } 100% { transform: none; } }
.wd-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 6px; }
.wd-st span { display: grid; gap: 2px; font-size: 12px; line-height: 1.3; color: var(--mute); }
.wd-st b { white-space: nowrap; font: 700 26px/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wd-done .wp-bal { margin-top: 12px; }
.wd-done .wp-bal .none { display: none; } /* the week goals with no time are listed just below */
.mk-g { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--mute); }
.wd-days { display: flex; }
.wd-days button { flex: 1; min-width: 0; padding: 0 6px; }
.wd-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: -4px; }
/* the main action of a step: big, filled, easy to hit */
.wd-big { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border-radius: 18px; background: var(--ink); color: var(--bg); font-size: 15.5px; font-weight: 700; box-shadow: var(--lift); transition: transform .2s var(--ease), box-shadow .2s; }
.wd-big b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--spark); color: #fff; font-size: 18px; line-height: 1; }
.wd-big:hover { transform: translateY(-1px); }
.wd-big:active { transform: scale(.98); }
/* a fixed thing being placed: the days it lands on light up */
.wt.arm-fx .wt-d.hit { background: color-mix(in srgb, var(--spark) 9%, transparent); }
.wt.arm-fx .wt-d:not(.hit) { opacity: .5; }
@media (min-width: 901px) { .wd .wp { grid-template-columns: 340px minmax(0, 1fr); gap: 24px; } }
/* brain dump: a plain list; big things get "Give it time", the rest is cleared when done */
.wd-dump { margin-top: 6px; }
.wd-dump li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); animation: wd-in .3s var(--ease) both; }
.wd-dump li:first-child { border-top: 0; }
.wd-dump li > span { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.wd-dump li > span small { margin-left: 6px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.wd-dump .ck { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--edge); transition: background .2s, box-shadow .2s; }
.wd-dump .ck:hover { background: var(--green); box-shadow: none; }
.wp-side .wd-dump .wd-mk { height: 28px; }
.wd-set { padding-top: 12px; padding-bottom: 12px; }
.wd-set summary { font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; list-style: none; }
.wd-set summary::-webkit-details-marker { display: none; }
.wd-set summary::after { content: ' +'; }
.wd-set[open] summary::after { content: ' –'; }
.wd-set[open] summary { margin-bottom: 10px; }
.wd-more { margin-top: 10px; }
.wd-more summary { padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; list-style: none; }
.wd-more summary::-webkit-details-marker { display: none; }
.wd-more summary::after { content: ' +'; }
.wd-more[open] summary::after { content: ' –'; }
.wd-dump li.added > span { color: var(--mute); }
.wd-ok { flex: none; font-size: 12px; font-weight: 600; color: var(--green-text); white-space: nowrap; }
.wd-q { height: 28px; padding-left: 10px; font-size: 12.5px; }
.wd-q button { width: 22px; height: 22px; }
.wd-q:not(:has(button)) { padding-right: 10px; }
.wd-ready li > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.wd-ready .x { flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--mute); font-size: 16px; }
.wd-ready .x:hover { background: var(--fill); color: var(--ink); }
.wd-next .ghost { flex: none; }
.wd-today .wp { grid-template-columns: minmax(0, 380px) minmax(0, 560px); justify-content: center; }
.wd-today .wp-side .wd-gt { flex-basis: auto; }
.wd-today .wp-side .wd-n { margin-left: 0; }
.wt.one .wt-b { flex-direction: row; align-items: baseline; gap: 8px; padding: 2px 10px; font-size: 13.5px; }
@media (max-width: 900px) {
  .wd-today .wp { grid-template-columns: minmax(0, 1fr); }
  .wd .wt { order: 0; } /* on a phone the step comes first, the week below; a new block scrolls you down to it */
  .wd-today .wd-steps { display: none; }
  .wd-today .wd-title { flex: 1; }
  .wd-top { flex-wrap: wrap; }
  .wd-steps { order: 3; flex-basis: 100%; }
  .wd .wp-side { max-height: none; animation: none; } /* one column: the list grows, the page scrolls */
}
@media (max-width: 520px) { .wd-steps span { display: none; } .wd-steps button { padding: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .wt-b.pop, .wd[data-s="done"] .wt-b, .wd .wp-side, .wd-dump li { animation: none; } }

/* how long: one slider in the week's time step, the length read out big beside the label */
.wd-len > span { display: flex; align-items: baseline; justify-content: space-between; }
.wd-len > span b { font: 700 20px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wd-len input[type="range"] { width: 100%; height: 28px; margin-top: 6px; background: none; accent-color: var(--spark); cursor: pointer; }

/* ---------- 2026-11-12: from the survey ---------- */
/* stare mode: a + in every box, and sheets above the dark board */
.sr-add { display: grid; place-items: center; width: 26px; height: 26px; margin: 8px 0 -4px -3px; border-radius: 50%; color: var(--faint); font-size: 17px; line-height: 1; opacity: 0; transition: opacity .25s var(--ease), background .2s, color .2s; }
.sr-c:hover > .sr-add, .sr-add:focus-visible { opacity: 1; }
.sr-add:hover { background: rgba(243, 238, 229, .1); color: var(--ink); }
@media (hover: none) { .sr-add { opacity: .7; } }
.staring .sheet-bg { z-index: 130; }
.staring .toast { z-index: 140; }

/* goals in pencil: what a far goal used to say */
.was { grid-column: 2; display: grid; gap: 2px; margin-top: 10px; font-size: 12.5px; color: var(--faint); }

/* period page: the share card button sits with the links */
.step button { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--hair); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.step button:hover { background: var(--fill); }

/* where the time went: Home and the look back */
.tw-bal { margin-top: 4px; }
.tw-bal .wp-bal { margin-top: 12px; }
.tw-bal > p, .rv-time > p { margin-top: 8px; font-size: 13.5px; color: var(--mute); }
.rv-time { padding: 18px 20px; border-radius: 20px; background: var(--card); box-shadow: var(--lift); }
.rv-time .wp-bal { margin-top: 0; }

/* start small: one question up at a time */
.grow .gr-g { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 650 19px/1.3 var(--display); letter-spacing: -.02em; }
.grow .gr-g .cd { flex: none; }
.grow .gr-q { margin-top: 6px; font-size: 15px; color: var(--mute); }
.gr-ups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.gr-in { display: flex; gap: 8px; margin-top: 12px; }
.gr-in input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--fill); outline: none; font-size: 15px; }
.gr-in input:focus { box-shadow: 0 0 0 2px var(--green); }
.gr-in .primary { flex: none; height: 44px; }
.gr-f { display: flex; justify-content: flex-end; gap: 18px; margin-top: 10px; }
.gr-f .link { height: 32px; font-size: 13.5px; color: var(--mute); font-weight: 500; }
.gr-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 20px; padding: 14px 20px; border-radius: 20px; background: var(--card); box-shadow: var(--lift); font-size: 14.5px; color: var(--mute); }
.gr-wait .link { height: 30px; font-size: 14px; }
.yr { background: var(--ink); color: var(--bg); }
.yr .label { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.yr .primary { background: var(--spark); color: #fff; }

/* on your mind: a small goal pill under each item */
.dp-g { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin-top: 4px; padding: 0 8px; border-radius: 999px; background: var(--fill); font-size: 12px; color: var(--mute); transition: background .2s; }
.dp-g:hover { background: var(--sand); }
.dp-g i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.dp-g:not(.on) i { box-shadow: inset 0 0 0 1.5px var(--c); background: none; }
.dp-g > span { min-width: 0; height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the real select sits invisibly on top, so the pill is only as wide as the goal's name */
.dp-g select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.dp-g:focus-within { box-shadow: 0 0 0 2px var(--green); }
.dp-g.on { color: var(--ink); }
.wd-dump > li > span { display: grid; }
.wd-dump .x { flex: none; width: 26px; height: 26px; margin-left: -4px; border-radius: 50%; color: var(--faint); font-size: 16px; }
.wd-dump .x:hover { background: var(--fill); color: var(--ink); }

/* share card */
.sheet:has(.cdk) { width: min(720px, 100%); }
.cdk { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; padding: 8px 24px 4px; }
.cd-img { width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; box-shadow: var(--lift-hi); background: var(--fill); }
.cd-h { font-size: 14px; color: var(--mute); }
.cd-list { display: grid; gap: 2px; max-height: 360px; overflow: auto; margin-top: 10px; }
.cd-list label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.cd-list label:hover { background: var(--fill); }
.cd-list input { flex: none; width: 18px; height: 18px; accent-color: var(--green); }
.cd-list .cd { flex: none; }
.cd-list input:not(:checked) ~ span { color: var(--faint); text-decoration: line-through; }
@media (max-width: 640px) { .cdk { grid-template-columns: 1fr; } .cd-img { width: 62%; justify-self: center; } }

/* first run: start with this week */
.im-wk-o { background: var(--ink); color: var(--bg); }
.im-wk-o:hover { background: #2B2A27; }
.im-wk-o span { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.im-wk { display: grid; gap: 10px; }
.im-wr { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; border-radius: 16px; background: var(--fill); box-shadow: inset 3px 0 0 var(--c); transition: box-shadow .25s; }
.im-wr:focus-within { box-shadow: inset 3px 0 0 var(--c), 0 0 0 2px var(--green); }
.im-wr input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; outline: none; font-size: 15.5px; }
.im-wr select { flex: none; height: 34px; max-width: 132px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--card); color: var(--c); font-size: 13px; font-weight: 600; outline: none; cursor: pointer; }

/* a friend's view of the week */
.fr { width: min(520px, 100%); }
.fr h1 { font: 700 30px/1.15 var(--display); letter-spacing: -.03em; }
.fr .sub { color: var(--mute); }
.fr-g li { gap: 12px; }
.fr-g .cd { flex: none; }
.fr .primary { justify-self: start; display: inline-flex; align-items: center; height: 44px; }
.tw-bal .wp-bal-l { height: 6px; }
.me-r > span { flex-shrink: 1; min-width: 0; }
.me-r input[type=time] { flex: none; min-width: 7.5em; }

/* ---------- sharing Stare mode ---------- */
.sr-x b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--spark); color: #fff; font-size: 11.5px; font-weight: 700; }
.sr-own { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #141413; font-size: 14px; font-weight: 650; }
.sr-who { position: fixed; left: clamp(16px, 3vw, 32px); bottom: 20px; z-index: 5; display: grid; gap: 2px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 16px; background: rgba(28, 27, 25, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 650 15px/1.3 var(--display); color: var(--ink); }
.sr-who small { font: 500 12.5px/1.4 var(--sans); color: var(--mute); }
.sr-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: rgba(255, 122, 69, .2); color: #FF9D73; font: 700 10.5px/1 var(--sans); font-style: normal; vertical-align: 1px; }
.shr { display: grid; gap: 16px; padding: 4px 24px 24px; }
.shr-l { font-size: 14.5px; color: var(--mute); line-height: 1.5; }
.shr .wp-cats button.on { background: var(--c); color: #fff; }
.shr-link { display: flex; gap: 8px; }
.shr-link input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--fill); font-size: 13.5px; color: var(--ink); outline: none; }
.shr-link .primary, .shr-go { height: 44px; }
.shr-go { justify-self: start; }
.shr-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.shr-acts .ghost { height: 38px; }
.shr .fine { margin-top: -8px; }
.shr-h { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font: 650 17px/1.2 var(--display); }
.shr-h small { font-size: 13px; color: var(--mute); font-weight: 500; }
.cm-list { display: grid; gap: 2px; }
.cm-list li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14.5px; line-height: 1.45; }
.cm-list li:first-child { border-top: 0; }
.cm-list li > p:first-child { display: flex; align-items: baseline; gap: 8px; }
.cm-list small { font-size: 12px; color: var(--faint); }
.cm-list li.hid > p { opacity: .45; }
.cm-list .link { justify-self: start; height: 26px; font-size: 13px; }
.cm-about { font-size: 12.5px; color: var(--mute); }
.cm-about .link { height: 24px; margin-left: 6px; font-size: 12.5px; }
/* the comment panel on a shared plan sits over the dark board */
.cm {
  --ink: #F3EEE5; --mute: #B8B0A2; --faint: #7A746A; --fill: #2A2926; --hair: rgba(255, 255, 255, .08); --card: #1F1E1C;
  position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 135; display: flex; flex-direction: column; gap: 12px; width: min(380px, calc(100vw - 24px));
  padding: 18px 20px 20px; border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 30px 80px -20px rgba(0, 0, 0, .7); animation: rise .4s var(--ease) both;
}
.cm header { display: flex; align-items: center; justify-content: space-between; }
.cm h2 { font: 700 20px/1.2 var(--display); }
.cm .cm-list { flex: 1; overflow: auto; align-content: start; }
.cm .empty { flex: 1; color: var(--mute); font-size: 14px; }
.cm-f { display: grid; gap: 8px; }
.cm-f input, .cm-f textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); font: 14.5px/1.4 var(--sans); outline: none; resize: none; }
.cm-f input:focus, .cm-f textarea:focus { box-shadow: 0 0 0 2px var(--green); }
.cm-f .primary { justify-self: end; height: 40px; }
@media (max-width: 640px) { .cm { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 78dvh; } .sr-who { bottom: 12px; } }

/* sign-up: what Kite should do for you, as big tiles you can tick */
.au-want { display: grid; gap: 8px; }
.au-want .im-o { position: relative; padding: 14px 48px 14px 18px; border-radius: 18px; }
.au-want .im-o b { font-size: 15.5px; }
.au-want .im-o span { font-size: 13px; }
.au-want .im-o::after { content: ''; position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--edge); transition: background .2s, box-shadow .2s; }
.au-want .im-o.on { background: color-mix(in srgb, var(--green) 14%, var(--fill)); }
.au-want .im-o.on::after { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.ob-card:has(.au-want) { width: min(520px, 100%); }
.au-hint { margin-top: -6px; font-size: 13.5px; font-weight: 600; color: var(--green-text); }
.sr-x button, .sr-x a { white-space: nowrap; }
@media (max-width: 640px) { .sr-x [data-act="stareAlign"] { display: none; } .sr-own { height: 32px; padding: 0 12px; font-size: 13px; } }
/* sharing this week's goals */
.shr-wk { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--fill); cursor: pointer; }
.shr-wk input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.shr-wk span { display: grid; gap: 2px; }
.shr-wk b { font-size: 14.5px; font-weight: 600; }
.shr-wk small { font-size: 13px; color: var(--mute); }
.cm header .cm-about { margin-top: 2px; }
.cm-score { font-size: 14px; color: var(--mute); }
.cm .cm-wk { flex: 1; overflow: auto; margin-top: 0; }
.cm-wk li { gap: 10px; min-height: 52px; }
.cm-wk li + li::before { left: 18px; }
.cm-wk .tw-t { flex: 1; min-width: 0; }
.cm-wk .tw-t b { font-size: 14.5px; }
.cm-wk .tw-n { height: 28px; padding: 0 10px; font-size: 12.5px; }
.cm-wk .wd-mk { height: 28px; }