/* * Lazerfocus — hand-rolled stylesheet, no build step. * * Identity: Todoist-style branding — warm white ground, cream sidebar, * warm gray neutrals, and Todoist red for primary actions, links, and * selection. Data keeps its own colors: green means done/on-track, teal * for timeboxed tasks, lavender for personal, blue for Google events. */ :root { color-scheme: light; /* ground + surfaces (warm, Todoist-style) */ --paper: #ffffff; --paper-2: #fcfaf8; --surface: #ffffff; --well: #f5f2ef; --border: #ece9e6; --border-strong: #dcd8d3; /* ink — softened warm grays (Sunsama-style), no near-black */ --ink: #45423e; --ink-2: #7a756e; --ink-3: #aba69f; /* primary — Todoist red, for actions, links, selection */ --accent: #dc4c3e; --accent-strong: #b03a2e; --accent-soft: #fdebe7; --accent-border: #f6cfc7; --accent-text: #b03a2e; /* success — done / on track only */ --green: #2e9e63; --green-strong: #23824f; --green-soft: #e4f3ea; --green-text: #257a4c; /* north star shares the brand red */ --brass: #dc4c3e; --brass-soft: #fdebe7; --brass-border: #f6cfc7; --brass-text: #b03a2e; /* timebox blocks */ --teal-soft: #dcf1ed; --teal-border: #b8e0d9; --teal-text: #22766c; /* personal / priority tint */ --violet-soft: #eee9f9; --violet-border: #dbd0f1; --violet-text: #6a51b2; /* status */ --amber: #d99a2b; --amber-soft: #faf0da; --amber-text: #8a5a0b; --red: #c14434; --red-soft: #f9e6e2; --red-text: #a4382b; /* mix base for tinted chips (channel tags) */ --chip-mix: #ffffff; /* subtle ink-tinted hover wash */ --hover-wash: rgba(55, 53, 47, .05); --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 2px 8px rgba(24, 24, 27, .04); --shadow-card: 0 1px 2px rgba(24, 24, 27, .06), 0 1px 4px rgba(24, 24, 27, .04); --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sidebar-w: clamp(168px, 10vw, 188px); } /* * Dark theme. Applied via data-theme="dark" on : an inline script in * the page head picks it from a saved toggle choice or, absent one, from the * machine's prefers-color-scheme setting (light is the fallback default). * Same warm identity — near-black warm grays, brighter red accent, and the * soft/tint pairs rebuilt as deep washes so data colors keep their meaning. */ :root[data-theme="dark"] { color-scheme: dark; /* ground + surfaces */ --paper: #1e1d1b; --paper-2: #232220; --surface: #262523; --well: #2e2d2a; --border: #3a3835; --border-strong: #4b4844; /* ink — softened for dark ground too */ --ink: #d9d6d1; --ink-2: #a19c95; --ink-3: #797570; /* primary — Todoist red, lifted for dark ground */ --accent: #e35d4f; --accent-strong: #ec7668; --accent-soft: #3d2723; --accent-border: #5c352e; --accent-text: #f28b7e; /* success */ --green: #3fae72; --green-strong: #56c188; --green-soft: #21352a; --green-text: #7ecda1; /* north star shares the brand red */ --brass: #e35d4f; --brass-soft: #3d2723; --brass-border: #5c352e; --brass-text: #f28b7e; /* timebox blocks */ --teal-soft: #1e3431; --teal-border: #2f534d; --teal-text: #74c9bc; /* personal / priority tint */ --violet-soft: #2c2839; --violet-border: #463b60; --violet-text: #b6a4e8; /* status */ --amber: #d99a2b; --amber-soft: #392e18; --amber-text: #e4b76a; --red: #e0644f; --red-soft: #3d2520; --red-text: #ef9184; --chip-mix: #262523; --hover-wash: rgba(255, 255, 255, .06); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25); --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .25); } /* Fixed light-only colors that the variables above can't reach */ :root[data-theme="dark"] .flash { border-color: #2f4d3b; } :root[data-theme="dark"] .errors-box { border-color: #5c352e; } :root[data-theme="dark"] .tb-block .tb-x:hover { background: rgba(0, 0, 0, .35); } :root[data-theme="dark"] .panel-backdrop { background: rgba(0, 0, 0, .55); } :root[data-theme="dark"] .composer-backdrop { background: rgba(0, 0, 0, .45); } :root[data-theme="dark"] .tb-event { background: #22303f; border-color: #35496a; border-left-color: #5c85b8; color: #a3bddd; } :root[data-theme="dark"] .tb-allday-pill { background: #22303f; border-color: #35496a; color: #a3bddd; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 14px; line-height: 1.55; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3 { margin: 0; line-height: 1.25; font-family: var(--font-display); font-weight: 500; letter-spacing: -.005em; } h1 { font-size: 23px; } h2 { font-size: 16.5px; } h3 { font-size: 14.5px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- App shell ---------- */ .shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--paper-2); border-right: 1px solid var(--border); color: var(--ink-2); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 9px; padding: 16px 14px 12px; color: var(--ink); } .sidebar-brand:hover { text-decoration: none; } .sidebar-brand .star { color: var(--brass); flex-shrink: 0; } .sidebar-brand .wordmark { font-family: var(--font-display); font-size: 14.5px; font-weight: 550; line-height: 1.15; } .sidebar-brand .brand-sub { display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; margin-top: 2px; } .sidebar-section { padding: 11px 14px 4px; font-size: 10px; font-weight: 550; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); } .sidebar-nav { display: flex; flex-direction: column; padding: 0 7px; gap: 1px; } .sidebar-nav a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: 12.5px; font-weight: 450; } .sidebar-nav a svg { flex-shrink: 0; opacity: .75; } .sidebar-nav a:hover { background: var(--hover-wash); color: var(--ink); text-decoration: none; } .sidebar-nav a.active { background: var(--accent-soft); color: var(--accent-text); } .sidebar-nav a.active svg { opacity: 1; } .ritual-anchor { scroll-margin-top: 18px; } /* North Star reminder pinned above the footer */ .sidebar-ns { display: flex; align-items: flex-start; gap: 8px; margin: auto 7px 10px; padding: 10px 11px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 10px; } .sidebar-ns:hover { text-decoration: none; border-color: var(--accent); } .sidebar-ns .ns-star { color: var(--accent); flex-shrink: 0; margin-top: 2px; } .sidebar-ns .ns-label { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); } .sidebar-ns .ns-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 500; line-height: 1.35; margin-top: 2px; color: var(--ink); } .topbar .sidebar-ns { margin: 8px 0 2px; } .topbar .sidebar-ns .ns-title { -webkit-line-clamp: 1; } .sidebar-footer { margin-top: auto; padding: 11px 14px 13px; border-top: 1px solid var(--border); font-size: 13px; } /* Without a North Star strip to take up the slack, pin the footer to the bottom */ .sidebar:not(:has(.sidebar-ns)) .sidebar-footer { margin-top: auto; } .sidebar-footer .who { color: var(--ink); font-weight: 500; } .sidebar-footer .biz { color: var(--ink-3); font-size: 12px; } .sidebar-footer form { margin-top: 9px; } .main { flex: 1; min-width: 0; padding: 28px 34px 64px; } .main:has(.home-root) { height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 14px 12px 0 16px; } .main:has(.home-root) .page-head { margin-bottom: 10px; } /* Mobile top bar */ .topbar { display: none; } @media (max-width: 860px) { .shell { flex-direction: column; } .sidebar { display: none; } .topbar { display: block; background: var(--paper-2); border-bottom: 1px solid var(--border); padding: 10px 16px 8px; position: sticky; top: 0; z-index: 30; } .topbar-row { display: flex; align-items: center; justify-content: space-between; } .topbar-brand { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 7px; } .topbar-brand .star { color: var(--brass); } .topbar-brand:hover { text-decoration: none; } /* Pages that carry their own North Star banner don't need the header's echo of it — one goal, stated once, on a screen this narrow. */ .shell:has(.northstar-banner) > .topbar .sidebar-ns { display: none; } /* Room for the floating tab bar and the home indicator below it. */ .main { padding: 18px 14px calc(104px + env(safe-area-inset-bottom, 0px)); } .ritual-anchor { scroll-margin-top: 74px; } } /* ---------- Page head & cards ---------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .page-head .sub { color: var(--ink-2); font-size: 13px; margin-top: 5px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; } .card-head .hint { color: var(--ink-3); font-size: 12px; font-weight: 400; font-family: var(--font-ui); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .grid-main-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } @media (max-width: 1020px) { .grid-2, .grid-main-side { grid-template-columns: 1fr; } } /* ---------- North Star band ---------- */ .northstar-banner { background: var(--brass-soft); border: 1px solid var(--brass-border); border-radius: var(--radius); padding: 13px 18px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .northstar-banner .label { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .northstar-banner .label svg { color: var(--brass); } .northstar-banner .goal { font-family: var(--font-display); color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; } .northstar-banner .meta { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } .northstar-banner a.edit { color: var(--brass-text); font-size: 12.5px; font-weight: 550; white-space: nowrap; } /* ---------- Buttons & forms ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, border-color .12s; } .btn:hover { background: var(--well); text-decoration: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn-sm { padding: 4px 10px; font-size: 12.5px; } .btn-icon { padding: 5px; justify-content: center; color: var(--ink-2); } .btn-icon:hover { color: var(--ink); } .btn-icon svg { display: block; } .btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--well); color: var(--ink); } .btn-danger-ghost { border-color: transparent; background: transparent; color: var(--ink-3); } .btn-danger-ghost:hover { background: var(--red-soft); color: var(--red); } label.field-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin: 15px 0 5px; } label.field-label:first-child { margin-top: 0; } label.field-label .optional { color: var(--ink-3); font-weight: 400; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], textarea, select { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 11px; } textarea { resize: vertical; min-height: 74px; } input::placeholder, textarea::placeholder { color: var(--ink-3); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } select.inline-select { width: auto; font-size: 12px; padding: 3px 6px; border-radius: 6px; color: var(--ink-2); background: var(--well); border-color: var(--border); } .field-error { color: var(--red-text); font-size: 12.5px; margin-top: 4px; } .flash { background: var(--green-soft); border: 1px solid #c6e5d3; color: var(--green-text); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; } .errors-box { background: var(--red-soft); border: 1px solid #ecc7c0; color: var(--red-text); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; } .errors-box ul { margin: 0; padding-left: 18px; } /* ---------- Pills & scores ---------- */ .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; } .pill-ok { background: var(--green-soft); color: var(--green-text); } .pill-warn { background: var(--amber-soft); color: var(--amber-text); } .pill-danger { background: var(--red-soft); color: var(--red-text); } .pill-achieved { background: var(--brass-soft); color: var(--brass-text); } .pill-muted { background: var(--well); color: var(--ink-3); } .score-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; } .score-full { background: var(--green-soft); color: var(--green-text); } .score-mid { background: var(--amber-soft); color: var(--amber-text); } .score-low { background: var(--red-soft); color: var(--red-text); } .score-none { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); } .progress-track { background: var(--paper-2); border-radius: 999px; height: 7px; overflow: hidden; flex: 1; } .progress-fill { height: 100%; border-radius: 999px; background: var(--brass); transition: width .25s ease; } .progress-fill.fill-full { background: var(--green); } .progress-row { display: flex; align-items: center; gap: 12px; } .progress-row .pct { font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Task list (Today) ---------- */ .task-list { list-style: none; margin: 0; padding: 0; } .task-row { display: flex; align-items: flex-start; gap: 9px; padding: 10px 2px; border-bottom: 1px solid var(--border); } .task-row:last-child { border-bottom: none; } .task-check { margin-top: 1px; } .task-check button { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: transparent; padding: 0; transition: border-color .12s, background .12s; } .task-check button:hover { border-color: var(--green); } .task-check button.done { background: var(--green); border-color: var(--green); color: #fff; } .task-body { flex: 1; min-width: 0; } .task-title { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; } .task-title.done { color: var(--ink-3); text-decoration: line-through; } .task-notes { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; white-space: pre-line; overflow-wrap: anywhere; } .task-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .12s; } .task-row:hover .task-actions, .task-row:focus-within .task-actions { opacity: 1; } .task-empty { color: var(--ink-3); font-size: 13.5px; padding: 16px 4px; text-align: center; font-style: italic; } .quick-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .quick-add input[type="text"] { flex: 1; min-width: 180px; } .quick-add select { width: auto; } /* ---------- Commitments (big actions / priorities) ---------- */ .commit-list { list-style: none; margin: 0; padding: 0; } .commit-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .commit-row:last-child { border-bottom: none; } .commit-num { flex-shrink: 0; width: 21px; height: 21px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; font-variant-numeric: tabular-nums; } .commit-text { flex: 1; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; } /* Narrow side panels: keep priority text readable; the status control wraps onto its own line instead of squeezing the text. */ .week-side .commit-row { flex-wrap: wrap; } .week-side .commit-text { min-width: 150px; overflow-wrap: break-word; } .week-side .commit-row .inline-select, .week-side .commit-row .pill { margin-left: auto; } .horizon { flex-shrink: 0; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; font-variant-numeric: tabular-nums; } .commit-text.empty { color: var(--ink-3); font-style: italic; } .commit-row form { flex-shrink: 0; } .revenue-line { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; background: var(--brass-soft); border: 1px solid var(--brass-border); border-radius: var(--radius-sm); font-size: 13px; color: var(--brass-text); margin-top: 12px; } .revenue-line .rev-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; } .revenue-line .rev-value { font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; } /* ---------- Week board ---------- */ /* Home owns both the planning board and every calendar density. */ .home-root { flex: 1; min-height: 0; display: flex; flex-direction: column; } .home-toolbar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 10px; flex-shrink: 0; } .home-date-nav, .home-toolbar-actions { display: flex; align-items: center; gap: 6px; min-width: 0; } .home-date-nav .btn-icon { width: 28px; height: 28px; padding: 0; justify-content: center; font-size: 19px; line-height: 1; } .home-today-btn { min-width: 50px; justify-content: center; } .home-range-label { color: var(--ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 2px; } .home-week-score { color: var(--ink-3); font-size: 10.5px; white-space: nowrap; } .home-week-score .score-badge { font-size: 9px; padding: 1px 6px; min-width: 0; } .home-view-menu { position: relative; } .home-view-menu summary { list-style: none; } .home-view-menu summary::-webkit-details-marker { display: none; } .home-view-summary { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .home-view-summary > span { color: var(--ink-3); font-size: 10px; margin-left: 2px; } .home-view-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; width: 252px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); box-shadow: 0 12px 34px rgba(35, 33, 29, .18); } .home-view-kicker { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px 7px; } .home-view-kicker span { font-weight: 400; letter-spacing: 0; text-transform: none; } .home-view-panel > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: none; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 13px; padding: 7px 9px; cursor: pointer; text-align: left; } .home-view-panel > button:hover { background: var(--well); } .home-view-panel > button.active { color: var(--accent-text); background: var(--accent-soft); } .home-view-panel > button strong { font-weight: 600; } /* Shared calendar shell */ .home-calendar { flex: 1; min-height: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); overflow: auto; } .home-calendar-canvas { height: 100%; display: flex; flex-direction: column; } .home-cal-head-grid, .home-cal-time-grid { display: grid; grid-template-columns: 54px repeat(var(--cal-days), minmax(0, 1fr)); } .home-cal-head-grid { flex-shrink: 0; min-height: 92px; border-bottom: 1px solid var(--border); background: var(--paper-2); } .home-cal-corner { display: flex; align-items: flex-end; justify-content: center; padding: 0 3px 8px; color: var(--ink-3); font-size: 8.5px; border-right: 1px solid var(--border); } .home-cal-day-head { min-width: 0; padding: 7px 7px 6px; border-right: 1px solid var(--border); } .home-cal-day-head:last-child { border-right: 0; } .home-cal-day-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; } .home-cal-day-title a { display: flex; flex-direction: column; color: var(--ink-2); line-height: 1; } .home-cal-day-title a:hover { text-decoration: none; color: var(--accent-text); } .home-cal-day-title span { font-size: 8.5px; letter-spacing: .07em; font-weight: 600; } .home-cal-day-title strong { color: var(--ink); font-size: 16px; font-weight: 450; margin-top: 3px; } .home-cal-day-head.is-today .home-cal-day-title span, .home-cal-day-head.is-today .home-cal-day-title strong { color: var(--accent-text); } .home-cal-day-title button { width: 21px; height: 21px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-3); font: inherit; cursor: pointer; } .home-cal-day-title button:hover { background: var(--well); color: var(--ink); } .home-cal-all-day { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; min-width: 0; } .home-cal-chip { display: block; width: 100%; border: 1px solid var(--teal-border); border-radius: 4px; background: var(--teal-soft); color: var(--teal-text); font: inherit; font-size: 9px; line-height: 1.3; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer; } .home-cal-chip.is-event { border-color: #bcd8ee; background: #e7f2fb; color: #3e739d; } :root[data-theme="dark"] .home-cal-chip.is-event { border-color: #35496a; background: #22303f; color: #a3bddd; } .home-cal-chip.done { opacity: .58; text-decoration: line-through; } .home-cal-more { font-size: 8.5px; color: var(--ink-3); padding-left: 3px; } .home-cal-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .home-cal-time-grid { position: relative; } .home-cal-axis { position: relative; border-right: 1px solid var(--border); } .home-cal-axis span { position: absolute; right: 7px; color: var(--ink-3); font-size: 8.5px; line-height: 16px; white-space: nowrap; } .home-cal-day-body { position: relative; min-width: 0; border-right: 1px solid var(--border); cursor: copy; } .home-cal-day-body:last-child { border-right: 0; } .home-cal-day-body.is-today { background: color-mix(in srgb, var(--accent-soft) 28%, transparent); } .home-cal-day-body.drop-hover { background: var(--green-soft); } .home-cal-day-body > i { position: absolute; left: 0; right: 0; height: 1px; border-top: 1px solid var(--border); pointer-events: none; } /* Range being swept out with the pointer, before the composer opens. */ .home-cal-draft { position: absolute; left: 3px; right: 3px; z-index: 3; border-radius: 5px; background: color-mix(in srgb, var(--teal-text) 26%, transparent); border: 1px solid var(--teal-border); padding: 2px 5px; pointer-events: none; overflow: hidden; } .home-cal-draft span { font-size: 9px; font-weight: 600; color: var(--teal-text); white-space: nowrap; } .composer-until { color: var(--ink-3); font-size: 12px; white-space: nowrap; } /* left/width/z-index come from the overlap layout, which splits the column into as many lanes as the busiest moment needs and stacks them rightward. */ .home-cal-block { position: absolute; z-index: 2; box-shadow: -1px 0 0 var(--surface); display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; overflow: hidden; border: 1px solid var(--teal-border); border-left: 3px solid var(--event-color, var(--teal-text)); border-radius: 5px; background: var(--teal-soft); color: var(--teal-text); padding: 3px 5px; font: inherit; font-size: 10px; line-height: 1.25; text-align: left; cursor: pointer; } .home-cal-block.is-task { cursor: grab; } /* A block mid-move rides above its neighbours and casts a lifted shadow. */ .home-cal-block.is-moving { cursor: grabbing; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); opacity: .95; } /* Grab strips along a task block's edges: drag either one to retime it. */ .cal-resize { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; touch-action: none; } .cal-resize.is-top { top: -1px; } .cal-resize.is-bottom { bottom: -1px; } .cal-resize::after { content: ''; position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .12s; } .cal-resize.is-top::after { top: 1px; } .cal-resize.is-bottom::after { bottom: 1px; } .home-cal-block:hover .cal-resize::after { opacity: .45; } .home-cal-block.is-event { border-color: #bcd8ee; border-left-color: #6ba5cf; background: #e7f2fb; color: #3e739d; } :root[data-theme="dark"] .home-cal-block.is-event { border-color: #35496a; border-left-color: #5c85b8; background: #22303f; color: #a3bddd; } .home-cal-block.is-personal { border-color: var(--violet-border); border-left-color: var(--violet-text); background: var(--violet-soft); color: var(--violet-text); } .home-cal-block.done { opacity: .58; text-decoration: line-through; } .home-cal-block-time { font-size: 8.5px; font-weight: 600; opacity: .8; white-space: nowrap; } /* Month density */ .home-month-calendar { display: flex; flex-direction: column; overflow: hidden; } .home-month-dows { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); flex-shrink: 0; background: var(--paper-2); border-bottom: 1px solid var(--border); } .home-month-dows span { padding: 7px 9px; border-right: 1px solid var(--border); color: var(--ink-3); font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } .home-month-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); grid-auto-rows: minmax(92px, 1fr); overflow: auto; } .home-month-day { min-width: 0; padding: 6px 6px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); } .home-month-day.is-out { background: var(--well); opacity: .7; } .home-month-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); } .home-month-day.drop-hover { background: var(--green-soft); } .home-month-num { display: block; width: fit-content; color: var(--ink-2); font-size: 10px; font-weight: 500; margin: 0 0 4px 2px; } .home-month-day.is-today .home-month-num { color: var(--accent-text); } .home-month-item { width: 100%; display: flex; align-items: center; gap: 3px; min-width: 0; border: 0; border-radius: 3px; background: transparent; color: var(--ink-2); padding: 2px 3px; font: inherit; font-size: 9px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; text-align: left; } .home-month-item:hover { background: var(--well); color: var(--ink); } .home-month-item > i { width: 5px; height: 5px; border-radius: 50%; background: var(--event-color, var(--teal-text)); flex-shrink: 0; } .home-month-item.is-event > i { background: #6ba5cf; } .home-month-item > span { color: var(--ink-3); font-size: 8px; flex-shrink: 0; } .home-month-item.done { color: var(--ink-3); text-decoration: line-through; } .home-month-more { display: block; color: var(--ink-3); font-size: 8.5px; padding: 2px 5px; } @media (max-width: 720px) { .main:has(.home-root) { height: auto; min-height: calc(100vh - 110px); overflow: visible; padding: 12px 10px 30px; } .home-root { min-height: 720px; } .home-toolbar { align-items: flex-start; flex-wrap: wrap; } .home-date-nav { flex: 1 1 100%; } .home-toolbar-actions { margin-left: auto; } .home-week-score { display: none; } .home-range-label { flex: 1; } .home-view-panel { position: fixed; right: 10px; top: 116px; } .home-calendar { min-height: 620px; } } .week-page-head { align-items: center; flex-wrap: nowrap; min-height: 40px; } .week-page-head h1 { font-size: 18px; } .week-page-head .sub { margin-top: 2px; font-size: 11.5px; } .week-page-head .btn { padding: 5px 10px; font-size: 12px; } .week-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(216px, 11vw, 244px) 38px; gap: 8px; align-items: stretch; flex: 1; min-height: 0; } .week-layout.side-hidden { grid-template-columns: minmax(0, 1fr) 38px; } @media (max-width: 1020px) { .week-layout { grid-template-columns: 1fr; } } .week-side { min-width: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; } .side-cards { height: 100%; overflow-y: auto; padding: 2px 2px 18px; scrollbar-width: thin; } /* Full-height day calendar pane (Sunsama-style right panel) */ .daycal { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .daycal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 9px 11px 8px; border-bottom: 1px solid var(--border); } .daycal-date { display: flex; flex-direction: column; line-height: 1.05; } .dc-dow { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--ink-2); } .dc-num { font-size: 20px; font-weight: 450; color: var(--ink); font-variant-numeric: tabular-nums; } .dc-num.is-today { color: var(--accent-text); } .dc-hint { font-size: 10px; color: var(--ink-3); padding-bottom: 3px; text-align: right; } .timebox-scroll { flex: 1; overflow-y: auto; padding: 6px 7px 16px 4px; scrollbar-width: thin; } /* Icon rail hugging the right edge */ .side-rail { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0 12px; border-left: 1px solid var(--border); } .side-rail .panel-toggle { margin-bottom: 6px; background: transparent; border-color: transparent; } .side-rail .panel-toggle:hover { background: var(--hover-wash); } .side-rail [data-tip]::after { content: attr(data-tip); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #26251f; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 4px 10px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(55, 53, 47, .25); opacity: 0; pointer-events: none; transition: opacity .12s ease .05s; z-index: 80; } .side-rail [data-tip]:hover::after { opacity: 1; } .board-scroll { overflow-x: auto; overflow-y: hidden; height: 100%; padding-bottom: 8px; -webkit-overflow-scrolling: touch; /* No scroll-snap: it would rubber-band the board back to a column edge after a hold-click drag, undoing short drags on release. */ /* We compensate scrollLeft manually when prepending days; the browser's own scroll anchoring would double the correction and jump the view. */ overflow-anchor: none; cursor: grab; } .board-scroll.is-panning { cursor: ew-resize; user-select: none; } .board-scroll.is-panning * { cursor: ew-resize; } .week-strip { display: flex; gap: 6px; height: 100%; } .day-col { background: transparent; border-right: 1px solid var(--border); padding: 0 8px 8px 0; margin-right: 8px; display: flex; flex-direction: column; min-height: 320px; height: 100%; width: clamp(184px, 9.5vw, 196px); flex-shrink: 0; overflow: hidden; } .day-col:last-child { border-right: none; margin-right: 0; } @media (max-width: 720px) { .day-col { width: 220px; } } .day-col.is-past { filter: grayscale(1); opacity: .55; } .day-col.is-past .dh-name, .day-col.is-past .dh-date { color: var(--ink-3); } .day-head { margin-bottom: 7px; } .dh-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 500; color: var(--ink); display: block; line-height: 1.2; } .dh-name:hover { text-decoration: none; color: var(--accent-text); } .dh-date { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 1px; } .day-col.is-today .dh-name { color: var(--accent-text); } .dh-bar { margin-top: 6px; height: 3px; } .col-add-row { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); padding: 2px 5px 2px 2px; } .col-add-btn { flex: 1; min-width: 0; text-align: left; font: inherit; font-size: 11.5px; color: var(--ink-2); padding: 5px 7px; border-radius: 6px; border: none; background: none; cursor: pointer; } .col-add-btn:hover { background: var(--well); color: var(--ink); } .day-planned { flex-shrink: 0; font-size: 9.5px; font-weight: 600; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 5px; font-variant-numeric: tabular-nums; } .day-planned:empty { display: none; } /* On the board only the selected day's badge is colored; the rest stay gray and only pick up the color while their column is hovered. */ .day-col .day-planned { color: var(--ink-2); background: var(--well); border-color: var(--border); transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .day-col:hover .day-planned, .day-col.is-active .day-planned { color: #fff; background: var(--accent); border-color: var(--accent); } .col-cards { list-style: none; margin: 0; padding: 2px 2px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 60px; overflow-y: auto; scrollbar-width: thin; } /* While a card drags over the column: soft wash on the list plus an insertion bar at the exact slot the drop will land in. */ .col-cards.is-drop-target { background: var(--accent-soft); border-radius: 8px; } .drop-slot { height: 3px; border-radius: 2px; background: var(--accent); margin: 0 2px; flex: none; pointer-events: none; } .task-card.is-dragging { opacity: 0.35; } /* Sunsama-style card: time top-left, planned top-right, title, footer with check circle, comment chip, and channel tag. */ .task-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); padding: 10px 12px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; cursor: grab; font-size: 12.5px; line-height: 1.4; /* Floor the card so a bare task (no time, no subtasks) still reads as a card instead of collapsing to a title strip. */ min-width: 168px; min-height: 84px; } .week-layout .task-card { border-radius: 8px; padding: 7px 8px 6px; gap: 4px; font-size: 11px; line-height: 1.32; /* Board columns are 184px wide, so the compact variant floors lower. */ min-width: 152px; min-height: 70px; } .week-layout .tc-top { min-height: 13px; } .week-layout .tc-top .time-chip { font-size: 9.5px; } .week-layout .task-card .task-title { font-size: 12px; } .week-layout .tc-foot { gap: 4px; margin-top: auto; padding-top: 2px; } .week-layout .tc-foot .task-check button { width: 15px; height: 15px; font-size: 9px; } .week-layout .channel-tag, .week-layout .subtask-chip, .week-layout .comment-chip, .week-layout .type-chip { font-size: 9px; padding: 0 5px; } .week-layout .time-summary { font-size: 9px; padding: 0 5px; } .task-card:active { cursor: grabbing; } .task-card:hover { border-color: var(--border-strong); } .tc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 16px; } .tc-top .time-chip { background: transparent; border: none; padding: 0; color: var(--ink-2); font-size: 11px; font-weight: 450; text-transform: lowercase; } .task-card .task-title { overflow-wrap: anywhere; font-weight: 400; font-size: 13px; color: var(--ink); } .task-card .task-title.done { color: var(--ink-3); text-decoration: line-through; } /* auto keeps the footer on the baseline when min-height leaves slack. */ .tc-foot { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 3px; } .tc-foot .task-check button { width: 17px; height: 17px; font-size: 10px; } .tc-foot-right { margin-left: auto; display: flex; gap: 5px; min-width: 0; } .task-card .subtask-chip, .task-card .comment-chip { min-width: 17px; min-height: 17px; justify-content: center; color: var(--ink-3); background: transparent; border: none; padding: 1px; } .task-card .subtask-chip:hover, .task-card .comment-chip:hover { color: var(--accent-text); border-color: transparent; } .task-card .channel-tag { color: var(--ch, var(--ink-3)); background: transparent; border-color: transparent; padding: 1px 2px; } .channel-tag-empty { color: var(--ink-3); background: transparent; border-color: transparent; } .channel-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 500; color: var(--ch, var(--ink-2)); background: color-mix(in srgb, var(--ch, var(--ink-2)) 10%, var(--chip-mix)); border: 1px solid color-mix(in srgb, var(--ch, var(--ink-2)) 25%, var(--chip-mix)); border-radius: 999px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Channel filter dropdown */ .filter-menu { position: relative; } .filter-menu summary { list-style: none; } .filter-menu summary::-webkit-details-marker { display: none; } .filter-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 32px rgba(55, 53, 47, .16); padding: 10px; min-width: 220px; display: flex; flex-direction: column; gap: 2px; } .filter-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); padding: 2px 8px 6px; } .filter-option { display: flex; align-items: center; gap: 7px; border: none; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; } .filter-option:hover { background: var(--well); } .filter-option.active { background: var(--green-soft); color: var(--green-text); font-weight: 550; } .filter-option .ch-hash { color: var(--ch, var(--ink-3)); font-weight: 600; } .channel-create-form { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; } .channel-create-form input { font-size: 12.5px; padding: 6px 8px; } .task-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 3px; } /* Planned / actual time editor */ .time-menu { position: relative; display: inline-block; } .time-menu summary { list-style: none; } .time-menu summary::-webkit-details-marker { display: none; } .time-summary { display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); background: transparent; border: 1px dashed var(--border-strong); border-radius: 5px; padding: 1px 6px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; } .time-summary:hover { color: var(--ink-2); border-color: var(--ink-3); } .time-summary.has-time { color: var(--brass-text); background: var(--brass-soft); border: 1px solid var(--brass-border); text-transform: none; } .time-menu[open] .time-summary { border-color: var(--accent); color: var(--accent-text); } .time-panel { position: absolute; top: calc(100% + 5px); left: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(55, 53, 47, .16); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 172px; } .time-panel label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); } .time-panel select { width: 92px; font-size: 12.5px; padding: 4px 6px; } /* On board cards the chip sits at the top-right, so open the panel leftwards to keep it inside the 292px column. */ .task-card .time-panel { left: auto; right: 0; } .task-card .time-summary.has-time { color: var(--ink-2); background: var(--well); border-color: var(--border); text-transform: none; } /* Daily-priority flag and picker */ .priority-menu { display: inline-flex; } .priority-trigger { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; color: var(--ink-3); border-radius: 4px; cursor: pointer; } .priority-trigger:hover { background: var(--well); } .priority-menu-card .menu-pop { top: calc(100% + 5px); right: auto; left: -10px; } .priority-menu-label .menu-pop { left: 0; right: auto; } .priority-pop { z-index: 80; min-width: 166px; padding: 5px; } .priority-pop .menu-label { padding-top: 4px; } .priority-option { gap: 9px; padding: 6px 9px; } .priority-option.active { background: var(--well); } .priority-option .priority-shortcut { margin-left: auto; color: var(--ink-3); font-size: 12px; } .priority-menu .priority-flag-1 { color: #ef6d54; } .priority-menu .priority-flag-2 { color: #8b6de9; } .priority-menu .priority-flag-3 { color: var(--ink-2); } .priority-menu .priority-flag-4 { color: var(--ink-3); } .time-totals { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); } .time-totals strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 550; } .day-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .type-chip, .time-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; letter-spacing: .03em; color: var(--ink-2); background: var(--well); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; white-space: nowrap; text-transform: uppercase; } .time-chip { color: #fff; background: var(--accent); border-color: var(--accent); font-variant-numeric: tabular-nums; } .type-chip { color: var(--violet-text); background: var(--violet-soft); border-color: var(--violet-border); } /* ---------- Drag & drop states ---------- */ .dragging { opacity: .45; } .drag-grip { color: var(--border-strong); font-size: 13px; cursor: grab; user-select: none; margin-top: 2px; } .task-row[draggable="true"] { cursor: grab; } .task-row[draggable="true"]:active, .drag-grip:active { cursor: grabbing; } .drop-hover { outline: 2px dashed var(--accent) !important; outline-offset: -2px; background: var(--accent-soft) !important; } .cal-task[draggable="true"] { cursor: grab; } /* ---------- Mini calendar ---------- */ .mini-cal-card { padding: 14px 14px 10px; } .mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .mini-cal-head a { font-size: 15px; color: var(--ink-3); padding: 0 7px; border-radius: 6px; line-height: 1.4; } .mini-cal-head a:hover { background: var(--well); color: var(--ink); text-decoration: none; } .mini-cal-head .mc-month { font-family: var(--font-display); font-size: 13.5px; font-weight: 500; color: var(--ink); } .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .mc-dow { font-size: 9.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; padding: 2px 0; letter-spacing: .05em; } .mc-day { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 7px; font-size: 11.5px; font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; } .mc-day:hover { background: var(--well); text-decoration: none; } .mc-day.out { color: var(--ink-3); font-weight: 400; } .mc-day.now { box-shadow: inset 0 0 0 1.5px var(--accent); } .mc-day.sel { background: var(--accent); color: #fff; } .mc-day.sel:hover { background: var(--accent-strong); } .mc-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 999px; } .mc-dot.score-full { background: var(--green); } .mc-dot.score-mid { background: var(--amber); } .mc-dot.score-low { background: var(--red); } .mc-day.sel .mc-dot { background: #fff; } .mc-hint { margin: 9px 0 0; text-align: center; } /* ---------- Timebox (day timeline) ---------- */ .timebox-card { padding-bottom: 12px; } .timebox { position: relative; } .tb-row { position: absolute; left: 0; right: 0; display: flex; } .tb-label { width: 46px; flex-shrink: 0; font-size: 9.5px; font-weight: 550; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; transform: translateY(-6px); text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; } .tb-slot { flex: 1; border-top: 1px solid var(--border); border-radius: 4px; } .tb-slot.drop-hover { border-top-color: transparent; } .tb-block { position: absolute; right: 2px; background: var(--teal-soft); border: 1px solid var(--teal-border); border-radius: 6px; padding: 3px 20px 3px 8px; font-size: 11.5px; line-height: 1.3; overflow: hidden; cursor: grab; box-shadow: var(--shadow-card); } .tb-block:active { cursor: grabbing; } /* A block mid-move rides above its neighbours and casts a lifted shadow. */ .tb-block.is-moving { cursor: grabbing; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); z-index: 30; } .tb-block:hover .cal-resize::after { opacity: .45; } /* Sweep-out range while planning a new task on empty timeline space. */ .tb-draft { position: absolute; left: 52px; right: 2px; z-index: 5; border-radius: 5px; background: color-mix(in srgb, var(--teal-text) 26%, transparent); border: 1px solid var(--teal-border); padding: 1px 5px; pointer-events: none; overflow: hidden; } .tb-draft span { font-size: 9px; font-weight: 600; color: var(--teal-text); white-space: nowrap; } .tb-block .tb-time { font-weight: 600; color: var(--teal-text); margin-right: 5px; font-size: 10.5px; font-variant-numeric: tabular-nums; } .tb-block .task-title { font-weight: 450; font-size: 11.5px; } .tb-block .task-title.done { color: var(--ink-3); text-decoration: line-through; } .tb-block.is-personal { background: var(--violet-soft); border-color: var(--violet-border); } .tb-block.is-personal .tb-time { color: var(--violet-text); } .tb-block .tb-x { position: absolute; top: 2px; right: 3px; border: none; background: transparent; color: var(--ink-3); font-size: 10px; cursor: pointer; padding: 2px 3px; border-radius: 4px; } .tb-block .tb-x:hover { color: var(--red); background: rgba(255, 255, 255, .7); } /* Where the day actually is right now — drawn only on today. */ .tb-now { position: absolute; left: 46px; right: 0; height: 0; border-top: 1.5px solid var(--accent); z-index: 6; pointer-events: none; } .tb-now::before { content: ''; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); } /* ---------- Month calendar ---------- */ .cal { width: 100%; border-collapse: collapse; table-layout: fixed; } .cal th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; padding: 6px; text-align: left; border-bottom: 1px solid var(--border); } .cal td { vertical-align: top; border: 1px solid var(--border); padding: 6px 7px; height: 96px; background: var(--surface); } .cal td.out { background: var(--well); } .cal td.today-cell { outline: 2px solid var(--accent); outline-offset: -2px; } .cal .daynum { font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .cal td.out .daynum { color: var(--ink-3); font-weight: 400; } .cal .day-link { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .cal .day-link:hover { text-decoration: none; } .cal .cal-task { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal .cal-task.done { color: var(--ink-3); text-decoration: line-through; } .cal .cal-more { font-size: 11px; color: var(--ink-3); } .cal .score-badge { min-width: 0; padding: 1px 6px; font-size: 10px; } @media (max-width: 720px) { .cal td { height: 64px; padding: 4px; } .cal .cal-task, .cal .cal-more { display: none; } } /* ---------- Review Q&A ---------- */ .qa-label { display: block; font-size: 13.5px; font-weight: 500; margin: 18px 0 6px; } .qa-label:first-child { margin-top: 0; } .qa-label .q-hint { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-2); margin-top: 1px; } .prev-answer { background: var(--well); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; white-space: pre-line; } .prev-answer .src { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: 3px; } /* ---------- Weekly ritual steps ---------- */ .step-tabs { display: flex; gap: 6px; margin-bottom: 14px; } .step-tab { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px 6px 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; } .step-tab:hover { background: var(--hover-wash); } .step-tab.active { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); } .step-tab .st-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--well); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .step-tab.active .st-num { background: var(--surface); color: var(--accent-text); } /* Review step: recap rail on the left, the week's own columns beside it, both filling the viewport the way the week board does. */ .main:has(.review-layout) { height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; } .main:has(.review-layout) .page-head { margin-bottom: 14px; } .review-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: stretch; flex: 1; min-height: 0; } .review-rail { height: 100%; overflow-y: auto; padding-right: 2px; padding-bottom: 18px; scrollbar-width: thin; } .review-board { height: 100%; overflow: auto; min-width: 0; max-width: 100%; padding-bottom: 4px; scrollbar-width: thin; } .review-board .week-strip { width: max-content; height: 100%; } .review-board .day-col { height: 100%; min-height: 0; } .col-empty { font-size: 12.5px; color: var(--ink-3); padding: 2px; } @media (max-width: 1020px) { .review-layout { grid-template-columns: 1fr; } .main:has(.review-layout) { height: auto; overflow: visible; display: block; } .review-rail, .review-board, .review-board .week-strip, .review-board .day-col { height: auto; overflow: visible; } .review-board { overflow-x: auto; } .review-board .day-col { min-height: 200px; } } .task-card.is-static { cursor: default; } .tc-logged { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .static-check { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 999px; border: 1.5px solid var(--border-strong); color: transparent; font-size: 10px; flex-shrink: 0; } .static-check.done { background: var(--green); border-color: var(--green); color: #fff; } /* Visually hidden without positioning — an absolute one would escape the scrolled board. */ .sr-status { display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Week recap figures ---------- */ .recap-summary { font-size: 13.5px; color: var(--ink-2); margin: 0 0 20px; } .recap-summary strong { color: var(--ink); font-weight: 550; } .chart-block { margin-bottom: 22px; } .chart-block:last-of-type { margin-bottom: 0; } .chart-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; } .day-bars { display: flex; align-items: flex-end; gap: 8px; position: relative; padding-top: 14px; } .db-cap { position: absolute; top: 0; left: 0; font-size: 10.5px; color: var(--ink-3); } .db-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .db-plot { width: 100%; height: 96px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border); } .db-bar { width: 22px; min-height: 3px; background: var(--accent); border-radius: 4px 4px 0 0; } .db-label { font-size: 11px; color: var(--ink-3); } .split-list { list-style: none; margin: 0; padding: 0; } .split-list li { margin-bottom: 10px; } .split-list li:last-child { margin-bottom: 0; } .sp-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 4px; } .sp-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-value { color: var(--ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; } .sp-track { height: 8px; background: var(--well); border-radius: 999px; overflow: hidden; } .sp-fill { height: 100%; border-radius: 999px; background: var(--ch); min-width: 3px; } /* ---------- Last week recap (weekly review sidebar) ---------- */ .recap-line { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); margin: 10px 0; white-space: nowrap; } .recap-sub { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin: 14px 0 6px; } .win-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--ink-2); } .win-list li { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; } .win-list .tick { color: var(--green); font-size: 11px; } .win-list .win-more { color: var(--ink-3); font-size: 11.5px; padding-left: 17px; } .win-list .win-day { color: var(--ink-3); font-size: 11px; width: 26px; flex-shrink: 0; } .win-list .win-title { color: var(--ink); overflow-wrap: anywhere; } .win-list .channel-tag { margin-left: auto; } .recap-link { display: inline-block; margin-top: 14px; } /* Narrow card: the priority text wraps, the status pill keeps its own line height. */ .recap-card .commit-text { overflow-wrap: break-word; } .recap-card .commit-row .pill { flex-shrink: 0; margin-left: auto; } /* ---------- Scoreboard ---------- */ .board-table { width: 100%; border-collapse: collapse; } .board-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .board-table td { padding: 13px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .board-table tr:last-child td { border-bottom: none; } .board-table .member { font-weight: 500; font-size: 14px; } .board-table .member .biz { display: block; font-size: 12px; color: var(--ink-2); font-weight: 400; } .board-table .ns { font-size: 12.5px; color: var(--ink-2); max-width: 260px; } .board-rank { color: var(--ink-3); font-family: var(--font-display); font-weight: 500; font-size: 15px; width: 28px; font-variant-numeric: tabular-nums; } tr:first-child .board-rank { color: var(--brass); } .board-actions { list-style: none; margin: 0; padding: 0; font-size: 12.5px; } .board-actions li { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; } .board-actions .n { color: var(--ink-3); font-weight: 600; font-size: 10.5px; font-variant-numeric: tabular-nums; } .table-scroll { overflow-x: auto; } /* ---------- Auth ---------- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--paper); } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 40px rgba(55, 53, 47, .12); width: 100%; max-width: 420px; padding: 34px 34px 28px; } .auth-brand { text-align: center; margin-bottom: 22px; } .auth-brand .star { color: var(--brass); } .auth-brand h1 { font-size: 21px; margin-top: 10px; text-wrap: balance; } .auth-brand p { color: var(--ink-2); font-size: 13px; margin: 6px 0 0; } .auth-card .btn { width: 100%; justify-content: center; padding: 10px; margin-top: 20px; font-size: 14px; } .auth-alt { text-align: center; font-size: 13px; color: var(--ink-2); margin-top: 18px; } /* ---------- Task panel (drawer) & comments ---------- */ .panel-backdrop { position: fixed; inset: 0; background: rgba(55, 53, 47, .35); z-index: 90; } .task-panel { position: fixed; top: 6vh; left: 50%; transform: translateX(-50%); width: min(680px, 94vw); max-height: 86vh; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 28px 80px rgba(55, 53, 47, .28); z-index: 100; padding: 18px 26px 26px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 720px) { .task-panel { top: 0; left: 0; transform: none; width: 100vw; max-height: 100vh; border-radius: 0; } } body.panel-open { overflow: hidden; } .panel-title-input { font-family: var(--font-display); font-size: 19px; font-weight: 500; border: none; padding: 4px 0 8px; background: transparent; } .panel-title-input:focus { outline: none; border-bottom: 2px solid var(--accent); } /* Start/stop timer chip next to the Actual / Planned columns */ .timer-chip { display: inline-flex; align-items: center; gap: 6px; align-self: center; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; background: transparent; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .timer-chip:hover { border-color: var(--accent); color: var(--accent-text); } .timer-chip.running { background: var(--accent); border-color: var(--accent); color: #fff; font-variant-numeric: tabular-nums; } /* Per-subtask timing: play button appears on hover, times sit right-aligned */ .sub-timer-start { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; opacity: 0; flex-shrink: 0; } .subtask:hover .sub-timer-start, .sub-timer-start:focus-visible { opacity: 1; } .sub-timer-start:hover { border-color: var(--accent); color: var(--accent-text); } .timer-chip.sub-timer { padding: 2px 9px; font-size: 12px; } .sub-time-cols { display: flex; gap: 14px; flex-shrink: 0; padding-left: 4px; } .sub-time summary { font-size: 12.5px; color: var(--ink-2); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; } .sub-time summary .empty { color: var(--ink-3); } .sub-time summary:hover, .sub-time summary:hover .empty { color: var(--accent-text); } .sub-time .menu-pop { max-height: 250px; overflow-y: auto; min-width: 110px; } .sub-time-static { font-size: 12px; color: var(--ink-3); flex-shrink: 0; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .panel-head-actions { display: flex; align-items: center; gap: 2px; } /* Sunsama-style "other actions" popover in the panel header */ .panel-more { position: relative; } .panel-more summary { list-style: none; cursor: pointer; font-size: 16px; line-height: 1; letter-spacing: .05em; } .panel-more summary::-webkit-details-marker { display: none; } .menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(55, 53, 47, .16); padding: 6px; } .menu-label { font-size: 12px; color: var(--ink-3); padding: 5px 9px 6px; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); padding: 7px 9px; border-radius: 7px; cursor: pointer; } .menu-item svg { color: var(--ink-3); flex-shrink: 0; } .menu-item:hover { background: var(--well); } .menu-item:hover svg { color: var(--red); } .panel-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; } @media (max-width: 560px) { .panel-grid { grid-template-columns: 1fr 1fr; } } .panel-title-static { font-size: 18px; margin-bottom: 6px; } .panel-saved { color: var(--green-text); font-weight: 500; align-self: center; } .panel-comments { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; } .panel-comments h3 { margin-bottom: 10px; } .comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .comment { background: var(--well); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 11px; } .comment-head { display: flex; align-items: baseline; gap: 8px; } .comment-author { font-weight: 550; font-size: 12.5px; } .comment-time { color: var(--ink-3); font-size: 11px; flex: 1; } .comment-delete { padding: 0 4px; font-size: 10px; } .comment-body { margin: 3px 0 0; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; } .panel-activity { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; } .panel-activity h3 { margin-bottom: 12px; } .activity-timeline { display: flex; flex-direction: column; } .activity-item { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; min-height: 34px; color: var(--ink-2); font-size: 12px; line-height: 1.45; } .activity-rail { position: relative; display: flex; justify-content: center; padding-top: 5px; } .activity-dot { position: relative; z-index: 1; width: 7px; height: 7px; border-radius: 999px; background: var(--border-strong); border: 2px solid var(--surface); box-sizing: content-box; } .activity-line { position: absolute; top: 14px; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); background: var(--border); } .activity-copy { min-width: 0; padding-bottom: 10px; overflow-wrap: anywhere; } .activity-actor { color: var(--ink); font-weight: 550; } .activity-time { margin-left: 7px; color: var(--ink-3); white-space: nowrap; font-size: 11px; } .activity-empty { margin: 0; } .task-title[data-open-task] { cursor: pointer; } .task-title[data-open-task]:hover { text-decoration: underline dotted; text-underline-offset: 3px; } /* Quick-add composer (Sunsama-style) */ .composer-backdrop { background: rgba(55, 53, 47, .22); } .composer { position: fixed; top: 16vh; left: 50%; transform: translateX(-50%); width: min(620px, 94vw); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(55, 53, 47, .3); z-index: 120; padding: 22px 24px 14px; } .composer-input { width: 100%; border: none !important; background: transparent !important; font-size: 20px !important; font-weight: 450; padding: 0 0 22px !important; color: var(--ink); } .composer-input:focus { outline: none !important; } .composer-input::placeholder { color: var(--ink-3); } .composer-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; } .composer-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; } .composer-chip:hover { background: var(--well); } .composer-chip .ch-hash { color: var(--ink-3); font-weight: 600; } .composer-chip input, .composer-chip select { border: none !important; background: transparent !important; padding: 0 !important; width: auto !important; font-size: 13px !important; color: var(--ink-2); cursor: pointer; } .composer-chip input:focus, .composer-chip select:focus { outline: none !important; } .composer-chip input[type="date"] { max-width: 118px; } .composer-chip input[type="time"] { max-width: 74px; } .composer-submit { margin-left: 8px; } /* Subtasks */ .panel-subtasks { margin: 2px 0 10px; } .panel-title-row { display: flex; align-items: center; gap: 11px; } .panel-title-row .panel-title-input { flex: 1; } .panel-check button { width: 22px; height: 22px; font-size: 12px; } .subtask .task-check button { width: 18px; height: 18px; font-size: 10px; } .subtask.add-row { padding: 4px 0; } .subtask-plus { width: 18px; height: 18px; border-radius: 999px; border: 1.5px dashed var(--border-strong); color: var(--ink-3); font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .subtask.add-row:focus-within .subtask-plus { border-color: var(--accent); color: var(--accent); border-style: solid; } .subtasks-list { display: flex; flex-direction: column; } .subtask { display: flex; align-items: center; gap: 9px; padding: 5px 0; } .subtask .task-title { font-size: 13.5px; flex: 1; overflow-wrap: anywhere; } .subtask-delete { opacity: 0; padding: 0 5px; font-size: 10px; } .subtask:hover .subtask-delete { opacity: 1; } .subtask-dot { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--border-strong); color: transparent; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .subtask-dot.done { background: var(--green); border-color: var(--green); color: #fff; } .subtask-add-input { border: none !important; background: transparent !important; padding: 2px 0 !important; font-size: 13.5px !important; color: var(--ink); flex: 1; width: auto !important; } .subtask-add-input:focus { outline: none !important; } .subtask-add-input::placeholder { color: var(--ink-3); } .tc-subs { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .tc-sub { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35; } .tc-sub .task-check button { width: 13px; height: 13px; font-size: 8px; margin-top: 2px; } .tc-sub .task-title { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; } .tc-sub-more { font-size: 11px; color: var(--ink-3); padding-left: 19px; } .subtask-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: var(--well); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; } .subtask-chip:hover { color: var(--accent-text); border-color: var(--accent); } .comment-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--ink-2); background: var(--well); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; } .comment-chip:hover { color: var(--accent-text); border-color: var(--accent); } .comment-action { padding: 0 5px; font-size: 10.5px; } .comment-edit-form { margin-top: 4px; } .comment-edit-form textarea { min-height: 54px; font-size: 13px; } .comment-edit-form .actions-end { margin-top: 6px; } /* Scoreboard: members' rocks for today, openable by anyone */ .board-rocks { list-style: none; margin: 8px 0 0; padding: 0; font-weight: 400; } .board-rocks li { display: flex; align-items: center; gap: 6px; padding: 2px 0; } .rock-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; border: 1.5px solid var(--border-strong); background: var(--surface); } .rock-dot.done { background: var(--green); border-color: var(--green); } .rock-link { border: none; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-align: left; overflow-wrap: anywhere; } .rock-link:hover { color: var(--green-text); text-decoration: underline dotted; text-underline-offset: 3px; } /* ---------- Misc ---------- */ .nav-arrows { display: flex; align-items: center; gap: 6px; } .nav-arrows .btn { padding: 6px 11px; } .muted { color: var(--ink-2); font-size: 13px; } .small-muted { color: var(--ink-3); font-size: 12px; } .mt-0 { margin-top: 0; } .stat-row { display: flex; gap: 26px; flex-wrap: wrap; } .stat .stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 600; } .stat .stat-value { font-family: var(--font-display); font-size: 21px; font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; } .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .actions-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* ---------- Undo toast ---------- */ .undo-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 26px; background: #26251f; color: #fff; border-radius: 10px; padding: 12px 16px 12px 20px; box-shadow: 0 10px 32px rgba(55, 53, 47, .35); animation: toast-in .18s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } .undo-toast .undo-label { font-weight: 600; font-size: 14.5px; } .undo-toast .undo-btn { display: flex; align-items: center; gap: 6px; border: none; background: none; color: rgba(255, 255, 255, .75); font: inherit; font-weight: 600; font-size: 13.5px; letter-spacing: .04em; cursor: pointer; padding: 0; } .undo-toast .undo-btn:hover { color: #fff; } .undo-toast kbd { font-family: var(--font-ui); font-size: 12px; background: rgba(255, 255, 255, .16); color: #fff; border-radius: 5px; padding: 2px 7px; line-height: 1.4; } /* ---------- iOS install hint ---------- */ .ios-install-hint { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(92vw, 440px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 11px 12px 11px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); font-size: 13.5px; color: var(--ink); } .ios-install-hint .ios-hint-share { flex-shrink: 0; color: var(--accent); } .ios-install-hint .ios-hint-text strong { font-weight: 600; } .ios-install-hint .ios-hint-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; border-radius: 7px; color: var(--ink-3); cursor: pointer; padding: 0; } .ios-install-hint .ios-hint-close:hover { background: var(--well); color: var(--ink); } /* ---------- Collapsible panels ---------- */ .panel-toggle { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink-2); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 0 2px; } .panel-toggle:hover { color: var(--ink); border-color: var(--border-strong); } .sidebar-top { display: flex; align-items: flex-start; justify-content: space-between; padding-right: 12px; } .sidebar-top .panel-toggle { margin-top: 22px; background: transparent; border-color: transparent; } .sidebar-top .panel-toggle:hover { background: var(--hover-wash); } /* Collapsed sidebar: narrow icon rail with hover tooltips */ .sidebar.is-collapsed { width: 58px; overflow: visible; align-items: center; } .rail-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 12px; } .rail-nav { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; } .rail-link { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; border-radius: 8px; border: none; background: none; color: var(--ink-2); cursor: pointer; padding: 0; } .rail-link:hover { background: var(--hover-wash); color: var(--ink); text-decoration: none; } .rail-link.active { background: var(--accent-soft); color: var(--accent-text); } .rail-brand { color: var(--brass); } .rail-brand:hover { color: var(--brass); } .rail-footer { margin-top: auto; padding: 10px 0 14px; } .sidebar.is-collapsed [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #26251f; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 4px 10px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(55, 53, 47, .25); opacity: 0; pointer-events: none; transition: opacity .12s ease .05s; z-index: 80; } .sidebar.is-collapsed [data-tip]:hover::after { opacity: 1; } @media (max-width: 860px) { .main:has(.week-layout) { height: auto; overflow: visible; } } @media (max-width: 1020px) { .side-rail { display: none; } .week-layout { grid-template-columns: 1fr; } .board-scroll, .week-side, .day-col, .week-strip { height: auto; } .day-col { overflow: visible; } .col-cards { overflow-y: visible; } .main:has(.week-layout) { height: auto; overflow: visible; display: block; } } /* ---------- Organizations (super admin) ---------- */ .org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .org-card { display: block; color: var(--ink); } .org-card:hover { text-decoration: none; border-color: var(--accent); } .org-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .org-meta { color: var(--ink-2); font-size: 13px; margin-top: 6px; } .org-names { color: var(--ink-3); } .org-open { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--accent-text); } .field-hint { color: var(--ink-3); font-size: 12px; margin: 4px 0 0; } .org-domain { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* ---------- Google Calendar events in the timebox ---------- */ .tb-event { position: absolute; left: 52px; right: 2px; z-index: 0; background: #eaf0f8; border: 1px solid #cddcee; border-left: 3px solid #6d94c4; border-radius: 6px; padding: 2px 8px; font-size: 11px; line-height: 1.3; color: #3e5c82; overflow: hidden; } .tb-event .tb-time { font-weight: 600; font-size: 10px; margin-right: 5px; font-variant-numeric: tabular-nums; } .tb-event .tb-ev-title { font-weight: 500; } .tb-block { z-index: 1; } .tb-allday { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px 4px; } .tb-allday-pill { font-size: 11px; font-weight: 600; color: #3e5c82; background: #eaf0f8; border: 1px solid #cddcee; border-radius: 5px; padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gcal-connect { display: block; margin: 8px 10px 0; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; font-size: 12px; color: var(--ink-2); text-align: center; } .gcal-connect:hover { text-decoration: none; color: var(--accent-text); border-color: var(--accent); } .gcal-row { display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; font-size: 11.5px; color: var(--ink-3); } .gcal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .gcal-disconnect { border: none; background: none; font: inherit; color: var(--ink-3); cursor: pointer; text-decoration: underline; padding: 0; margin-left: auto; } .gcal-disconnect:hover { color: var(--red); } /* ---------- Google sign-in ---------- */ .auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--ink-3); font-size: 12px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .btn-google { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--surface); font-weight: 600; } .btn-google:hover { text-decoration: none; border-color: var(--border-strong); background: var(--well); } /* ---------- Yesterday in review ---------- */ .review-card { border-left: 3px solid var(--accent); } .review-actions { display: flex; align-items: center; gap: 6px; } .review-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 720px) { .review-cols { grid-template-columns: 1fr; } } .review-col-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .review-item { display: flex; align-items: center; gap: 9px; min-height: 26px; } .review-title { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; } .review-title.done { color: var(--ink-2); text-decoration: line-through; } .review-carry { flex-shrink: 0; opacity: 0; transition: opacity .12s; } .review-item:hover .review-carry { opacity: 1; } @media (hover: none) { .review-carry { opacity: 1; } } .review-carried { flex-shrink: 0; font-size: 12px; color: var(--green-text); font-weight: 500; } /* ---------- Clean task modal (Sunsama-style) ---------- */ .panel-toolbar { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; } .toolbar-spacer { flex: 1; } .p-chip { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 5px 9px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .p-chip:hover { background: var(--well); color: var(--ink); } .p-chip .chip-empty { color: var(--ink-3); } .p-chip svg { color: var(--ink-3); } .pop-pick { position: relative; } .pop-pick summary { list-style: none; cursor: pointer; } .pop-pick summary::-webkit-details-marker { display: none; } .chan-pick .menu-pop { left: 0; right: auto; min-width: 210px; max-height: 280px; overflow-y: auto; } .menu-check { margin-left: auto; color: var(--ink-2); } .chan-pop .menu-item .ch-hash { font-weight: 600; } .task-date-picker { position: relative; } .task-date-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 238px; padding: 7px 0 9px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 7px; box-shadow: 0 10px 26px rgba(32, 32, 32, .18); color: var(--ink); } .date-pop-label { padding: 3px 13px 5px; font-size: 11.5px; color: var(--ink-3); } .date-quick { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 5px 13px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .date-quick span { flex: 1; } .date-quick:hover, .date-quick:focus-visible { background: var(--well); outline: none; } .date-quick kbd { border: 0; background: transparent; box-shadow: none; padding: 0; color: var(--ink-3); font: inherit; font-size: 11px; } .date-pop-calendar { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); } .date-month-nav { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; padding: 0 7px 5px; } .date-month-nav strong { text-align: center; font-size: 13px; font-weight: 600; } .date-month-nav button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; } .date-month-nav button:hover, .date-month-nav button:focus-visible { background: var(--well); color: var(--ink); outline: none; } .date-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 1px; padding: 0 9px; } .date-calendar-grid .date-weekday { display: grid; place-items: center; height: 22px; color: var(--ink-3); font-size: 10px; font-weight: 500; } .date-calendar-grid button { display: grid; place-items: center; justify-self: center; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; } .date-calendar-grid button.outside { color: var(--ink-3); } .date-calendar-grid button:hover, .date-calendar-grid button:focus-visible { background: var(--well); outline: none; } .date-calendar-grid button.selected { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .date-calendar-grid button.today { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-text); font-weight: 600; } .date-calendar-grid button.today.selected { background: var(--accent); color: #fff; box-shadow: none; } @media (max-width: 560px) { .task-date-popover { position: fixed; top: 58px; right: 12px; width: min(238px, calc(100vw - 24px)); } } .panel-title-row { align-items: flex-start; } input[type="text"].panel-title-input { font-size: 19px; font-weight: 500; line-height: 1.3; border: none; background: transparent; padding: 0; } input[type="text"].panel-title-input:focus { outline: none; border: none; box-shadow: none; } .time-cols { display: flex; gap: 18px; margin-left: auto; padding-left: 14px; flex-shrink: 0; padding-top: 2px; } .time-col summary { text-align: right; } .tcol-label { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .tcol-value { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 1px; } .tcol-value.empty { color: var(--ink-3); } .time-col .menu-pop { right: 0; left: auto; min-width: 110px; max-height: 250px; overflow-y: auto; } .panel-notes { width: 100%; border: none; background: transparent; padding: 0; margin-top: 16px; min-height: 64px; font: inherit; font-size: 14px; color: var(--ink); resize: vertical; } .panel-notes:focus { outline: none; box-shadow: none; border: none; } .panel-notes::placeholder { color: var(--ink-3); } .panel-toolbar .panel-saved { font-size: 12px; color: var(--green-text); margin-right: 4px; } /* ---------- Focus mode ---------- */ .focus-wrap { max-width: 860px; margin: 0 auto; } .focus-timer-pane { text-align: center; padding: 30px 0 34px; } .focus-modes { display: inline-flex; gap: 4px; background: var(--well); border-radius: 999px; padding: 4px; } .focus-mode { border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 6px 14px; border-radius: 999px; cursor: pointer; } .focus-mode.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); } .focus-clock { font-size: 88px; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 18px 0 4px; color: var(--ink); } .focus-clock.running { color: var(--accent); } .focus-task-line { color: var(--ink-2); font-size: 14px; min-height: 22px; } .focus-task-link { border: none; background: none; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; padding: 0; } .focus-task-link:hover { color: var(--accent-text); } .focus-controls { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .focus-start { min-width: 120px; justify-content: center; } .focus-sessions { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; } .session-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border-strong); } .session-dot.filled { background: var(--accent); border-color: var(--accent); } .session-count { font-size: 12px; color: var(--ink-3); margin-left: 6px; } .focus-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .focus-task { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); border-radius: 8px; } .focus-task:last-child { border-bottom: none; } .focus-task.is-active { background: var(--accent-soft); border-bottom-color: transparent; } .focus-task-title { flex: 1; min-width: 0; text-align: left; border: none; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; padding: 0; overflow-wrap: anywhere; } .focus-task-title.done { color: var(--ink-3); text-decoration: line-through; } .focus-actual { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; } .focus-badge { flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); background: var(--surface); border: 1px solid var(--accent-border); border-radius: 999px; padding: 2px 8px; } .focus-logged { color: var(--green-text); font-weight: 500; } /* ---------- Daily planning ritual ---------- */ .plan-wizard { display: flex; gap: 28px; align-items: flex-start; } .plan-side { width: 300px; flex-shrink: 0; position: sticky; top: 28px; } .plan-col { width: 292px; flex-shrink: 0; } .plan-col.plan-cal { width: auto; flex: 1; min-width: 280px; max-width: 420px; } @media (max-width: 1020px) { .plan-wizard { flex-wrap: wrap; } .plan-side { position: static; width: 100%; } .plan-col, .plan-col.plan-cal { width: 100%; max-width: none; flex: none; } } .plan-step-count { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .plan-title { font-size: 21px; line-height: 1.25; } .plan-sub { color: var(--ink-2); font-size: 13.5px; margin: 8px 0 16px; } .plan-warning { border-left: 3px solid var(--red); } .plan-warning h3 { color: var(--red-text); } .plan-ok { border-left: 3px solid var(--green); } .plan-ok h3 { color: var(--green-text); } .plan-nav { display: flex; gap: 8px; margin-top: 16px; } .plan-next { flex: 1; justify-content: center; } .plan-col-title { font-size: 20px; } .plan-col-sub { color: var(--ink-2); font-size: 13px; margin: 3px 0 12px; font-style: italic; } .plan-add-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .plan-add-btn { flex: 1; justify-content: flex-start; padding: 9px 12px; color: var(--ink-2); } .plan-add-btn:hover { color: var(--ink); } .day-planned.over { background: var(--red); border-color: var(--red); } .plan-cal .timebox-card { position: sticky; top: 28px; } .plan-card-wrap { display: flex; flex-direction: column; gap: 4px; } .plan-card-actions { display: flex; gap: 4px; justify-content: flex-end; } .plan-card-actions .btn-sm { padding: 3px 9px; font-size: 11.5px; } /* The wizard page scrolls normally — visible overflow so card popovers (time editor) aren't clipped by the list. */ .plan-cards { min-height: 120px; border-radius: 10px; padding: 4px; overflow: visible; } .shutdown-pick { margin-top: 10px; } .shutdown-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; justify-content: space-between; font-variant-numeric: tabular-nums; } .shutdown-pop { left: 0; right: auto; min-width: 130px; max-height: 240px; overflow-y: auto; } /* ---------- Settings — channel manager ---------- */ .settings-card { max-width: 680px; } .channel-list { list-style: none; margin: 0 0 4px; padding: 0; } .channel-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); } .channel-row .channel-tag { width: 110px; flex-shrink: 0; } .channel-name-input { flex: 1; min-width: 110px; } input[type="text"].channel-name-input, .channel-create input[type="text"] { font-size: 13px; padding: 6px 9px; } .channel-count { color: var(--ink-3); font-size: 12px; white-space: nowrap; } .channel-delete { color: var(--ink-2); } .channel-delete:hover { color: var(--red-text); border-color: var(--red); } .swatch-row { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; } .swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); cursor: pointer; padding: 0; flex-shrink: 0; } .swatch:hover { transform: scale(1.15); } .swatch.is-active { border-color: var(--ink); } .swatch-custom { position: relative; background: conic-gradient(#e96c4a, #d99a2b, #2e9e63, #4a7db8, #7a5fbf, #e96c4a); } .swatch-custom.is-active { background: var(--sw); } .swatch-custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: none; } .channel-create { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .channel-create input[type="text"] { flex: 1; min-width: 160px; } @media (max-width: 640px) { .channel-row { flex-wrap: wrap; gap: 8px; } .channel-row .channel-tag { width: auto; } } /* ---------- Mobile app shell ---------- */ /* * Phone-shaped navigation: a floating tab bar over the content, a quick-add * FAB beside it, and the full nav as a bottom sheet behind "More". Rendered on * every viewport by React and revealed here only where the sidebar is gone, * so the two chromes never show at once. */ .tabbar { display: none; } .nav-sheet, .sheet-backdrop { display: none; } @media (max-width: 860px) { .tabbar { display: flex; align-items: center; gap: 10px; position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); } .tabbar-pill { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .tabbar-tab { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 44px; border: none; background: none; border-radius: 999px; color: var(--ink-2); cursor: pointer; padding: 0; transition: background .12s, color .12s; } /* The shared nav icons are drawn at sidebar size; the tab bar wants them a size up, and their 20-unit viewBox scales cleanly. */ .tabbar-tab svg { width: 20px; height: 20px; } .tabbar-tab:hover { text-decoration: none; color: var(--ink); } .tabbar-tab.active { background: var(--accent-soft); color: var(--accent-text); } .tabbar-fab { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 999px; border: none; background: var(--accent); color: #fff; cursor: pointer; padding: 0; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); } .tabbar-fab:active { background: var(--accent-strong); } .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 100; background: rgba(55, 53, 47, .38); animation: sheet-fade .16s ease-out; } .nav-sheet { display: flex; flex-direction: column; position: fixed; z-index: 101; left: 0; right: 0; bottom: 0; max-height: 84vh; background: var(--surface); border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .22); padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheet-up .2s cubic-bezier(.2, .8, .3, 1); } .sheet-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 9px auto 2px; flex-shrink: 0; } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px 10px; flex-shrink: 0; } .sheet-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 16px; } .sheet-brand:hover { text-decoration: none; } .sheet-brand .star { color: var(--brass); } .sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 10px 10px; overscroll-behavior: contain; } .sheet-group + .sheet-group { margin-top: 6px; } .sheet-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 10px 12px 4px; } .sheet-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px; border-radius: 10px; color: var(--ink-2); font-size: 15px; font-weight: 500; } .sheet-link svg { flex-shrink: 0; opacity: .75; } .sheet-link:hover { text-decoration: none; color: var(--ink); } .sheet-link.active { background: var(--accent-soft); color: var(--accent-text); } .sheet-link.active svg { opacity: 1; } .sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding: 12px 16px; flex-shrink: 0; } .sheet-who { font-size: 13px; color: var(--ink); min-width: 0; } .sheet-who span { display: block; color: var(--ink-3); font-size: 12px; } /* Transient overlays clear the tab bar rather than sitting behind it. */ .undo-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .ios-install-hint { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } @keyframes sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } } :root[data-theme="dark"] .sheet-backdrop { background: rgba(0, 0, 0, .55); } /* ---------- Touch targets ---------- */ /* * On a touch screen there is no hover to reveal row actions and no cursor to * aim with, so the controls stay visible and grow to a thumb-sized minimum. */ @media (hover: none) { .task-actions { opacity: 1; } .drag-grip { display: none; } /* * Calendar block resize handles. On a mouse these are 7px strips whose grip * fades in on hover — neither works with a finger: nothing reveals the grip, * and 7px is far under a fingertip, so a near-miss lands on the block (a * move) or the slot behind it (a new task) instead of resizing. * * Show the grip, and grow the target to 22px. It has to grow inward: the * blocks clip to their own box, so anything hanging past the edge is * painted away and catches nothing. `max-height` keeps each handle under * two fifths of the block, so the two can never meet and a middle is always * left to press — on the week calendar that middle is what opens the task. */ .cal-resize { height: 22px; max-height: 40%; } .cal-resize.is-top { top: 0; } .cal-resize.is-bottom { bottom: 0; } .cal-resize::after { opacity: .5; width: 26px; height: 3px; margin-left: -13px; } /* Dragging a block is a press-and-hold here, not a plain drag. */ .hint-pointer { display: none; } .hint-touch { display: inline; } } .hint-touch { display: none; } @media (hover: none) and (max-width: 860px) { .task-row { padding: 12px 2px; gap: 11px; } .task-check button { width: 26px; height: 26px; font-size: 14px; } .task-row .task-title { font-size: 15px; } .task-actions .btn { min-height: 34px; } /* Two always-visible buttons squeeze the title into a three-line column on a phone. Rescheduling keeps its home in the task modal's date picker ("Tomorrow" is the first quick action there); only delete stays inline. */ .task-defer { display: none; } .quick-add .btn { min-height: 40px; } /* A 24-hour day scrolls inside its card instead of burying what follows. */ .timebox-pane { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; } }