Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916:root { --bg: #ffffff; --bg-soft: #f6f7fb; --surface: #ffffff; --ink: #0b0e14; --ink-soft: #1f2330; --muted: #6b7280; --muted-soft: #9ca3af; --border: #ebedf2; --border-strong: #d6d9e0;
--coral: #ff4f3e; --coral-deep: #e7321f; --coral-tint: #ffe7e3;
--emerald: #10b981; --emerald-deep: #047857; --emerald-tint: #d1fae5;
--indigo: #5b6cff; --indigo-deep: #3a4ae2; --indigo-tint: #e3e7ff;
--amber: #f59e0b; --amber-deep: #b45309; --amber-tint: #fef3c7;
--rose: #ec4899; --rose-deep: #be185d; --rose-tint: #fce7f3;
--shadow-card: 0 1px 1px rgba(11, 14, 20, 0.04), 0 3px 10px rgba(11, 14, 20, 0.04); --shadow-lift: 0 2px 6px rgba(11, 14, 20, 0.06), 0 16px 40px rgba(11, 14, 20, 0.08);
--font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--radius-card: 16px; --radius-pill: 999px; --radius-chip: 6px;
color-scheme: light;}
* { box-sizing: border-box;}
html,body,#root { margin: 0; padding: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}
button { font-family: inherit;}
a { color: var(--coral-deep);}
::selection { background: var(--coral-tint);}
/* ─────── shell ─────── */
.shell { max-width: 720px; margin: 0 auto; padding: max(env(safe-area-inset-top), 10px) 12px max(env(safe-area-inset-bottom), 16px); display: flex; flex-direction: column; gap: 10px;}
/* ─────── topbar ─────── */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0; min-height: 32px;}.brand { display: flex; align-items: center; gap: 8px;}.brand-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--coral); color: white; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 18px; font-style: italic; letter-spacing: -0.04em; line-height: 1; padding-bottom: 2px; box-shadow: 0 3px 10px -2px rgba(255, 79, 62, 0.4);}.brand-name { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.02em; color: var(--ink);}.topbar-logout { background: transparent; border: 1px solid transparent; font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer; min-height: 28px; font-weight: 500; transition: all 0.15s ease;}.topbar-logout:hover { color: var(--ink-soft); border-color: var(--border-strong); background: var(--bg-soft);}
/* ─────── now (hero) ─────── */
.now { background: var(--surface); border-radius: var(--radius-card); padding: 14px 16px 12px; box-shadow: var(--shadow-card); border: 1px solid var(--border); position: relative; overflow: hidden;}.now::before { content: ""; position: absolute; top: -80px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, var(--coral-tint), transparent 60%); pointer-events: none; z-index: 0;}.now > * { position: relative; z-index: 1;}
/* time + date inline */.now-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px;}.now-time { font-family: var(--font-display); font-size: clamp(40px, 13vw, 56px); font-weight: 400; font-variation-settings: "opsz" 144; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); font-feature-settings: "tnum", "ss01";}.now--loading .now-time { color: var(--muted-soft);}.now-date { font-family: var(--font-display); font-style: italic; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0.005em; text-align: right; line-height: 1.2;}
/* empty (no anchor) */.now-empty { padding: 8px 0 4px; border-top: 1px dashed var(--border-strong); font-size: 14px;}.now-empty-line { font-family: var(--font-display); font-style: italic; color: var(--ink-soft);}.now-empty-sub { color: var(--muted);}
/* anchor — compact */.now-anchor { border-top: 1px dashed var(--border-strong); padding-top: 8px; margin-bottom: 8px;}.now-anchor-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;}.now-anchor-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--coral);}.now-anchor-remaining { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--coral-deep); font-feature-settings: "tnum";}.now-anchor-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.15; color: var(--ink); margin: 2px 0 4px; letter-spacing: -0.02em;}.now-anchor-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px;}.now-anchor-time { font-feature-settings: "tnum"; font-weight: 600; color: var(--ink-soft);}.now-anchor-loc { color: var(--muted);}.now-anchor-virtual { font-size: 10px; background: var(--indigo-tint); color: var(--indigo-deep); padding: 1px 8px; border-radius: var(--radius-pill); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;}
/* travel — compact rows */.now-travel { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 8px;}.travel-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 7px 12px; background: var(--surface); font-size: 13px; min-height: 32px;}.travel-row--default { background: var(--emerald-tint);}.travel-row--rescue { background: var(--coral-tint);}.travel-mode { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft);}.travel-row--default .travel-mode { color: var(--emerald-deep);}.travel-row--rescue .travel-mode { color: var(--coral-deep);}.travel-minutes { font-feature-settings: "tnum"; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--ink); letter-spacing: -0.01em;}.travel-leaveby { font-size: 12px; color: var(--muted); font-feature-settings: "tnum"; white-space: nowrap;}
.now-travel-missing { font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 8px; padding: 6px 10px; background: var(--bg-soft); border-radius: 8px;}
/* prep — single inline row */.now-prep { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; background: var(--amber-tint); border-radius: 10px; border: 1px solid var(--amber); font-size: 13px;}.now-prep-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--amber-deep);}.now-prep-time { font-family: var(--font-display); font-weight: 500; font-size: 15px; font-feature-settings: "tnum"; color: var(--ink); letter-spacing: -0.01em;}.now-prep-mins { font-size: 12px; color: var(--amber-deep); font-feature-settings: "tnum"; font-weight: 500;}
/* ─────── body pills — compact ─────── */
.body-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-strong);}.pill { border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; font-family: inherit;}.pill:hover { border-color: var(--ink-soft);}.pill:active { transform: scale(0.94);}.pill-mins { font-size: 10px; color: var(--muted); font-feature-settings: "tnum"; font-weight: 600;}.pill--done { background: var(--emerald-tint); border-color: var(--emerald); color: var(--emerald-deep); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--emerald); text-underline-offset: 2px;}.pill--done .pill-mins { color: var(--emerald);}.pill--alert-on { background: var(--rose-tint); border-color: var(--rose); color: var(--rose-deep);}
/* ─────── sections ─────── */
.section { background: var(--surface); border-radius: var(--radius-card); padding: 12px 14px 12px; box-shadow: var(--shadow-card); border: 1px solid var(--border);}.section-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 10px;}.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}.section-head .section-title { margin: 0;}.section-open { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); background: transparent; border: 1px solid var(--border); text-decoration: none; transition: all 0.15s ease; -webkit-tap-highlight-color: transparent;}.section-open:hover { color: var(--coral); background: var(--coral-tint); border-color: var(--coral-tint);}.section-open:active { transform: scale(0.94);}
/* task list */.task-group { margin-bottom: 10px;}.task-group:last-child { margin-bottom: 0;}.task-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: 0 0 6px;}.task-group-label .num { font-feature-settings: "tnum"; color: var(--ink-soft);}.task-group--overdue .task-group-label { color: var(--rose);}
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;}.task { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px;}.task:last-child { border-bottom: none; padding-bottom: 2px;}.task:first-child { padding-top: 2px;}
/* clickable check */.task-check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; padding: 0; display: grid; place-items: center; transition: all 0.15s ease; position: relative;}.task-check:hover { border-color: var(--emerald); background: var(--emerald-tint);}.task-check:hover::after { content: ""; width: 8px; height: 5px; border-left: 2px solid var(--emerald-deep); border-bottom: 2px solid var(--emerald-deep); transform: translate(0, -1px) rotate(-45deg); position: absolute;}.task-check:active { transform: scale(0.9);}.task-check[data-priority="2"] { border-color: var(--indigo);}.task-check[data-priority="3"] { border-color: var(--coral);}.task-check[data-priority="4"] { border-color: var(--rose); background: var(--rose-tint);}.task-check[data-completing="true"] { border-color: var(--emerald); background: var(--emerald);}.task-check[data-completing="true"]::after { content: ""; width: 8px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: translate(0, -1px) rotate(-45deg); position: absolute;}
.task-body { flex: 1; min-width: 0;}.task-content { color: var(--ink-soft); word-wrap: break-word; line-height: 1.35;}.task--completing .task-content { color: var(--muted-soft); text-decoration: line-through;}.task-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;}.label-chip { font-size: 10px; background: var(--bg-soft); color: var(--muted); padding: 1px 6px; border-radius: var(--radius-chip); font-weight: 500;}
/* events */.day-group { margin-bottom: 10px;}.day-group:last-child { margin-bottom: 0;}.day-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: 0 0 6px;}.day-label .num { font-feature-settings: "tnum"; color: var(--ink-soft);}.day-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; padding: 6px 0; margin: 0; cursor: pointer; font-family: inherit; min-height: 32px;}.day-toggle .day-label { margin: 0;}.day-toggle-icon { color: var(--muted); font-size: 14px; line-height: 1; transition: transform 0.18s ease;}.day-toggle-icon--open { transform: rotate(180deg);}.day-toggle:hover .day-toggle-icon { color: var(--ink-soft);}.day-empty { font-size: 12px; color: var(--muted); font-style: italic; margin: 0; padding: 4px 0;}.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;}.event { display: grid; grid-template-columns: 46px 1fr; gap: 1px 12px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 14px; align-items: start;}.event:last-child { border-bottom: none;}.event-time { font-feature-settings: "tnum"; font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--ink-soft); white-space: nowrap; padding-top: 1px;}.event-title { color: var(--ink-soft); word-wrap: break-word; line-height: 1.3; grid-column: 2;}.event-loc { font-size: 11px; color: var(--muted); grid-column: 2; word-wrap: break-word;}.event-open { grid-column: 3; grid-row: 1 / span 2; align-self: center;}
/* open-in-app button on tasks + events */.row-open { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted-soft); background: transparent; border: none; cursor: pointer; text-decoration: none; flex-shrink: 0; transition: all 0.15s ease; -webkit-tap-highlight-color: transparent;}.row-open:hover { color: var(--coral); background: var(--coral-tint);}.row-open:active { transform: scale(0.92);}.task .row-open { margin-top: -2px;}
/* ─────── signin ─────── */
.signin { min-height: 100dvh; display: grid; place-items: center; padding: 24px;}.signin-card { background: var(--surface); padding: 40px 28px; border-radius: 20px; box-shadow: var(--shadow-lift); text-align: center; max-width: 400px; width: 100%; border: 1px solid var(--border); position: relative; overflow: hidden;}.signin-card::before { content: ""; position: absolute; top: -100px; left: -80px; width: 240px; height: 240px; background: radial-gradient(circle, var(--coral-tint), transparent 65%); pointer-events: none;}.signin-card::after { content: ""; position: absolute; bottom: -100px; right: -80px; width: 260px; height: 260px; background: radial-gradient(circle, var(--indigo-tint), transparent 65%); pointer-events: none;}.signin-card > * { position: relative; z-index: 1;}.signin-mark { width: 64px; height: 64px; border-radius: 16px; background: var(--coral); color: white; display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 48px; margin: 0 auto 16px; letter-spacing: -0.04em; line-height: 1; padding-bottom: 6px; box-shadow: 0 10px 30px -8px rgba(255, 79, 62, 0.5);}.signin-title { font-family: var(--font-display); font-size: 40px; font-weight: 500; letter-spacing: -0.03em; margin: 0 0 4px;}.signin-tag { color: var(--muted); margin: 0 0 28px; font-size: 14px; font-family: var(--font-display); font-style: italic;}.signin-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: white; padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; font-size: 15px; min-height: 48px; line-height: 1.2; transition: background 0.18s ease, transform 0.12s ease;}.signin-cta:hover { background: var(--coral);}.signin-cta:active { transform: scale(0.97);}
/* ─────── loading / error ─────── */
.loading-screen { min-height: 100dvh; display: grid; place-items: center;}.loading-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); animation: pulse 1.2s ease-in-out infinite;}@keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); }}
.error-screen, .error-toast { color: var(--coral-deep); background: var(--coral-tint); padding: 10px 14px; font-size: 12px; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, monospace; border: 1px solid var(--coral);}.error-screen { min-height: 100dvh; display: grid; place-items: center;}
/* ─────── animations ─────── */
@media (prefers-reduced-motion: no-preference) { .shell > * { animation: rise 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .shell > *:nth-child(1) { animation-delay: 0s; } .shell > *:nth-child(2) { animation-delay: 0.04s; } .shell > *:nth-child(3) { animation-delay: 0.08s; } .shell > *:nth-child(4) { animation-delay: 0.12s; } .shell > *:nth-child(5) { animation-delay: 0.16s; }}@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}
/* ─────── responsive ─────── */
@media (min-width: 720px) { .shell { padding-top: 20px; padding-bottom: 24px; gap: 12px; } .now { padding: 20px 22px 16px; } .section { padding: 16px 18px; } .now-anchor-title { font-size: 22px; } .section-title { font-size: 20px; }}