/* Cadence 2.0 display face — self-hosted, headings & big numbers only. */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 600 900;
font-display: swap;
src: url(/fonts/nunito.woff2) format("woff2");
}
:root {
--bg: #f4f3f8;
--card: #ffffff;
--ink: #16161d;
--muted: #6b6b78;
--line: #e6e6ec;
--accent: #514ae0;
--accent-soft: #e9e7fb;
--border-accent: #d3d0f5;
--display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--green: #12915a;
--green-soft: #e2f5ec;
--amber: #b7791f;
--amber-soft: #fdf3df;
--red: #d1364a;
--red-soft: #fde7ea;
--blue: #1d64d8;
--blue-soft: #e6effc;
--frost: rgba(255, 255, 255, 0.92); /* frosted tabbar/sidebar backdrop */
--radius: 14px;
--tap: 58px;
--pad: 18px;
--shadow: 0 1px 2px rgba(20, 20, 45, 0.05), 0 2px 8px rgba(20, 20, 45, 0.04);
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* Dark ("night") theme — set on . Only colour tokens
change; every surface/text/border reads from these variables. */
/* Per-app identity: the Admissions mini-app runs teal on a mint-tinted ground.
Set via body[data-app] by the router; vars inherit to everything inside. */
body[data-app="adm"] {
--bg: #f0f6f4;
--accent: #0f8a7a;
--accent-soft: #dfeeea;
--border-accent: #b8dcd3;
--frost: rgba(240, 246, 244, 0.92);
}
[data-theme="dark"] {
--bg: #0f1017;
--card: #1a1b24;
--ink: #e9e9f1;
--muted: #9a9bad;
--line: #2b2d3a;
--accent: #8f88ff;
--accent-soft: #262445;
--border-accent: #3a3767;
--green: #34d399;
--green-soft: #123024;
--amber: #fbbf24;
--amber-soft: #322611;
--red: #fb7185;
--red-soft: #37171d;
--blue: #7fb2ff;
--blue-soft: #16273f;
--frost: rgba(18, 19, 27, 0.9);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4);
color-scheme: dark;
}
[data-theme="dark"] body[data-app="adm"] {
--bg: #0d1412;
--accent: #3fc0ad;
--accent-soft: #102c26;
--border-accent: #1d4a41;
--frost: rgba(13, 20, 18, 0.9);
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* 2.0 density: 16px base (down from 18) — roughly a third more content per
screen. The "A+ Bigger text" toggle still bumps it back up. */
font-size: 16px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: none;
}
/* Display face on headings and big numbers — body text stays system. */
h1,
h2,
h3,
.stat b,
.score-points,
.stats-foot,
.tabbar button {
font-family: var(--display);
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
input,
textarea,
select {
font-family: inherit;
font-size: 18px;
/* Themed defaults so any input reads correctly in dark mode. */
background: var(--card);
color: var(--ink);
}
/* ---- Layout ------------------------------------------------------------ */
#app {
min-height: 100vh;
padding-bottom: calc(96px + var(--safe-bottom));
}
.screen {
max-width: 640px;
margin: 0 auto;
padding: 0 var(--pad);
}
.topbar {
position: sticky;
top: 0;
z-index: 5;
background: var(--bg);
padding: calc(var(--safe-top) + 16px) var(--pad) 12px;
max-width: 640px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 12px;
}
.topbar h1 {
font-size: 26px;
font-weight: 800;
margin: 0;
letter-spacing: -0.3px;
flex: 1;
min-width: 0;
}
.topbar .sub {
font-size: 15px;
color: var(--muted);
font-weight: 600;
}
.back-btn {
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--card);
box-shadow: var(--shadow);
font-size: 24px;
display: grid;
place-items: center;
flex: none;
}
/* ---- Cards ------------------------------------------------------------- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: var(--pad);
margin-bottom: 12px;
}
.card.tappable:active {
transform: scale(0.99);
}
.card.tappable {
transition: transform 0.08s ease, border-color 0.12s ease;
}
/* Colour marker that replaces the old thick accent bar */
.goal-head-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.gdot {
width: 12px;
height: 12px;
border-radius: 4px;
flex: none;
background: var(--accent);
}
.gdot.lg {
width: 14px;
height: 14px;
border-radius: 5px;
}
/* task colour dot (inherits the goal's colour) */
.tdot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 3px;
margin-right: 9px;
vertical-align: middle;
flex: none;
}
.goal-card {
display: block;
width: 100%;
text-align: left;
}
.goal-card h2 {
font-size: 22px;
font-weight: 800;
margin: 0;
letter-spacing: -0.3px;
}
.goal-card .desc {
color: var(--muted);
font-size: 16px;
margin: 0 0 14px;
}
.progress {
height: 12px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.progress > span {
display: block;
height: 100%;
background: var(--green);
border-radius: 999px;
transition: width 0.3s ease;
}
.progress-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
}
.progress-row .count {
font-size: 15px;
font-weight: 700;
color: var(--muted);
white-space: nowrap;
}
/* ---- Task rows --------------------------------------------------------- */
.task {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 15px var(--pad);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 10px;
}
/* ---- 2.0 density: grouped divider ROWS, not card-per-task -------------- */
/* A .rowcard holds one group (a date bucket, a goal, starred, pinned…) as a
single card of compact rows — the hybrid design's biggest visible change. */
.rowcard {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 14px;
}
.rowcard .task {
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 9px 13px;
gap: 11px;
align-items: center;
min-height: 52px;
}
.rowcard > .task:last-child,
.rowcard > .pin-wrap:last-child .task {
border-bottom: 0;
}
.rowcard .checkbox {
width: 26px;
height: 26px;
border-width: 2px;
border-radius: 8px;
font-size: 15px;
margin-top: 0;
}
.rowcard .task-title {
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: normal;
}
.rowcard .chips {
gap: 5px;
margin-top: 3px;
}
.rowcard .chip {
font-size: 11px;
padding: 2px 8px;
border-radius: 7px;
gap: 4px;
}
.rowcard .chip .ic {
width: 12px;
height: 12px;
}
.rowcard .avatar.sm {
width: 18px;
height: 18px;
font-size: 9px;
}
.rowcard .star-mark .ic {
width: 13px;
height: 13px;
}
.rowcard .sgc-foot,
.rowcard .task-foot {
font-size: 11.5px;
margin-top: 3px;
}
.rowcard .pin-wrap .pin-toggle {
top: 50%;
transform: translateY(-50%);
right: 6px;
}
.rowcard .task.is-starred {
border-left: 3px solid var(--amber);
}
.checkbox {
flex: none;
width: 38px;
height: 38px;
border-radius: 12px;
border: 3px solid var(--line);
background: var(--card);
display: grid;
place-items: center;
font-size: 22px;
color: transparent;
margin-top: 2px;
}
.checkbox.done {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.checkbox.doing {
border-color: var(--amber);
color: var(--amber);
}
.task-body {
flex: 1;
min-width: 0;
}
.task-title {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.2px;
word-break: break-word;
}
.task.is-done .task-title {
color: var(--muted);
text-decoration: line-through;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.chip {
font-size: 14px;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
background: var(--line);
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.chip.owner {
background: var(--accent-soft);
color: var(--accent);
}
.chip.due {
background: var(--blue-soft);
color: var(--blue);
}
.chip.due-soon {
background: var(--amber-soft);
color: var(--amber);
}
.chip.overdue {
background: var(--red-soft);
color: var(--red);
}
.chip.sub {
background: var(--green-soft);
color: var(--green);
}
.avatar {
width: 26px;
height: 26px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 800;
display: inline-grid;
place-items: center;
flex: none;
}
.avatar.sm {
width: 22px;
height: 22px;
font-size: 11px;
}
/* ---- Section headers --------------------------------------------------- */
.section-head {
display: flex;
align-items: baseline;
gap: 10px;
margin: 26px 2px 12px;
}
.section-head h3 {
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
margin: 0;
}
.section-head .n {
font-size: 14px;
font-weight: 700;
color: var(--muted);
}
/* ---- Buttons ----------------------------------------------------------- */
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: var(--tap);
border-radius: 12px;
background: var(--accent);
color: #fff;
font-size: 19px;
font-weight: 800;
padding: 0 18px;
}
.btn:active {
filter: brightness(0.94);
}
.btn.secondary {
background: var(--card);
color: var(--ink);
box-shadow: var(--shadow);
}
.btn.ghost {
background: var(--accent-soft);
color: var(--accent);
}
.btn.danger {
background: var(--red-soft);
color: var(--red);
}
.btn.sm {
min-height: 48px;
font-size: 16px;
width: auto;
padding: 0 16px;
}
.add-btn {
border: 2px dashed var(--line);
background: transparent;
color: var(--accent);
min-height: 56px;
border-radius: 12px;
font-weight: 800;
font-size: 18px;
width: 100%;
margin-bottom: 12px;
}
/* ---- Bottom nav -------------------------------------------------------- */
.tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
background: var(--frost);
backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--line);
display: flex;
padding: 8px 8px calc(8px + var(--safe-bottom));
max-width: 640px;
margin: 0 auto;
}
.tabbar button {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
border-radius: 14px;
}
.tabbar button .ico {
font-size: 24px;
}
.tabbar button.active {
color: var(--accent);
}
/* ---- Login ------------------------------------------------------------- */
.login {
max-width: 480px;
margin: 0 auto;
padding: calc(var(--safe-top) + 40px) 22px 40px;
text-align: center;
}
.login .logo {
width: 84px;
height: 84px;
margin: 0 auto 18px;
}
.login h1 {
font-size: 34px;
font-weight: 800;
margin: 0 0 6px;
letter-spacing: -0.5px;
}
.login p.tag {
color: var(--muted);
font-size: 17px;
margin: 0 0 30px;
}
.name-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.name-btn {
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow);
border-radius: 14px;
padding: 22px 14px;
font-size: 20px;
font-weight: 800;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.name-btn .avatar {
width: 48px;
height: 48px;
font-size: 20px;
}
.name-btn.admin::after {
content: "ADMIN";
font-size: 11px;
font-weight: 800;
color: var(--accent);
background: var(--accent-soft);
padding: 3px 8px;
border-radius: 999px;
}
/* PIN pad */
.pin-dots {
display: flex;
justify-content: center;
gap: 16px;
margin: 24px 0 28px;
}
.pin-dots .dot {
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--line);
}
.pin-dots .dot.on {
background: var(--accent);
}
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 320px;
margin: 0 auto;
}
.key {
height: 72px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow);
font-size: 30px;
font-weight: 700;
}
.key.blank {
background: transparent;
box-shadow: none;
}
.key:active {
background: var(--accent-soft);
}
/* ---- Modal / forms ----------------------------------------------------- */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(10, 10, 25, 0.4);
display: flex;
align-items: flex-end;
justify-content: center;
}
.sheet {
position: relative;
background: var(--bg);
width: 100%;
max-width: 640px;
border-radius: 20px 20px 0 0;
padding: 10px 20px calc(24px + var(--safe-bottom));
max-height: 92vh;
overflow-y: auto;
animation: slideup 0.22s ease;
}
.sheet-close {
position: absolute;
top: 12px;
right: 14px;
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--line);
color: var(--muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.sheet-close:hover {
color: var(--ink);
}
@keyframes slideup {
from {
transform: translateY(30px);
opacity: 0.4;
}
}
.sheet .grabber {
width: 44px;
height: 5px;
border-radius: 999px;
background: var(--line);
margin: 6px auto 16px;
}
/* ---- 2.0 profile menu (avatar → sheet) --------------------------------- */
.who-btn {
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.who-btn .avatar {
box-shadow: 0 0 0 2px var(--accent);
}
.prof-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.prof-head b {
font-family: var(--display);
font-size: 17px;
display: block;
}
.prof-head .muted-note {
display: block;
font-size: 13px;
}
.prof-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
margin: 14px 2px 8px;
}
.prof-app {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
background: var(--card);
border: 1.5px solid var(--line);
border-radius: 14px;
padding: 10px 12px;
margin-bottom: 8px;
}
.prof-app.here {
border-color: var(--accent);
background: var(--accent-soft);
}
.prof-app-ico {
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.prof-app-ico .ic {
width: 20px;
height: 20px;
}
.prof-app-tx b {
font-family: var(--display);
font-size: 15px;
display: block;
}
.prof-app-tx span {
font-size: 12px;
color: var(--muted);
}
.prof-here {
margin-left: auto;
font-size: 11px;
font-weight: 800;
color: var(--accent);
background: var(--card);
border-radius: 99px;
padding: 3px 10px;
white-space: nowrap;
}
.prof-out {
color: var(--red);
}
.sheet h2 {
font-size: 24px;
font-weight: 800;
margin: 0 0 18px;
padding-right: 40px;
}
.field {
margin-bottom: 18px;
}
.field label {
display: block;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
width: 100%;
border: 2px solid var(--line);
border-radius: 14px;
padding: 14px 16px;
background: var(--card);
color: var(--ink);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
outline: none;
border-color: var(--accent);
}
/* Modern dropdown: hide the native chrome and draw our own chevron. */
.field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding-right: 44px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
}
.field select:hover {
border-color: var(--border-accent);
}
.field select:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.field select option {
color: var(--ink);
background: var(--card);
}
.field textarea {
min-height: 90px;
resize: vertical;
}
.seg {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.seg button {
flex: 1;
min-width: 72px;
min-height: 52px;
border-radius: 14px;
background: var(--card);
border: 2px solid var(--line);
font-weight: 700;
font-size: 16px;
color: var(--muted);
}
.seg button.on {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.people-pick {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pill {
padding: 10px 16px;
border-radius: 999px;
background: var(--card);
border: 2px solid var(--line);
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.pill.on {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}
.sheet-actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
.sheet-actions .btn {
flex: 1;
}
/* ---- Misc -------------------------------------------------------------- */
.empty {
text-align: center;
color: var(--muted);
padding: 50px 20px;
font-size: 17px;
}
.empty .big {
font-size: 46px;
margin-bottom: 10px;
}
.status-picker {
display: flex;
gap: 8px;
margin-top: 6px;
}
.status-picker button {
flex: 1;
min-height: 36px;
border-radius: 999px;
font-weight: 800;
font-size: 13.5px;
border: 1.5px solid var(--line);
background: var(--card);
color: var(--muted);
padding: 6px 10px;
}
.status-picker button.on[data-s="todo"] {
background: var(--line);
color: var(--ink);
border-color: var(--muted);
}
.status-picker button.on[data-s="doing"] {
background: var(--amber-soft);
color: var(--amber);
border-color: var(--amber);
}
.status-picker button.on[data-s="done"] {
background: var(--green-soft);
color: var(--green);
border-color: var(--green);
}
.meta-row {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
font-size: 17px;
}
.meta-row .k {
color: var(--muted);
font-weight: 700;
width: 96px;
flex: none;
}
.toast {
position: fixed;
left: 50%;
bottom: calc(110px + var(--safe-bottom));
transform: translateX(-50%);
background: var(--ink);
color: var(--card);
padding: 12px 20px;
border-radius: 999px;
font-weight: 700;
font-size: 16px;
z-index: 100;
box-shadow: var(--shadow);
animation: fadein 0.2s ease;
}
@keyframes fadein {
from {
opacity: 0;
transform: translate(-50%, 8px);
}
}
.spinner {
text-align: center;
padding: 60px;
color: var(--muted);
font-weight: 700;
}
/* ---- Icons ------------------------------------------------------------- */
.ic {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: -5px;
flex: none;
}
.ic.sm {
width: 15px;
height: 15px;
vertical-align: -3px;
}
.ic.lg {
width: 48px;
height: 48px;
vertical-align: middle;
}
.tabbar .ico .ic {
width: 25px;
height: 25px;
vertical-align: middle;
}
.nav-link {
display: flex;
align-items: center;
gap: 11px;
}
.nav-link .ic {
width: 20px;
height: 20px;
vertical-align: middle;
color: var(--muted);
}
.nav-link.on .ic {
color: var(--accent);
}
.nav-link.nav-plain {
padding-left: 45px;
}
.back-btn .ic {
width: 22px;
height: 22px;
vertical-align: middle;
}
.chip .ic,
.comment-chip .ic {
vertical-align: -3px;
}
.empty .big {
color: var(--muted);
opacity: 0.55;
}
/* ---- Shared additions -------------------------------------------------- */
.muted-note {
color: var(--muted);
font-size: 14px;
font-weight: 600;
}
.login .blurb {
margin: 34px auto 0;
max-width: 420px;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.hint {
background: var(--accent-soft);
color: var(--accent);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
padding: 10px 14px;
border-radius: 12px;
margin: 0 0 16px;
}
.tip {
display: flex;
align-items: center;
gap: 10px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 16px;
font-size: 15px;
font-weight: 600;
line-height: 1.45;
}
.tip .tip-ico {
flex: none;
font-size: 18px;
}
.tip .tip-text {
flex: 1;
}
/* Measure block (goal metric) */
.measure {
background: var(--accent-soft);
border-radius: 14px;
padding: 12px 14px;
margin: 4px 0 12px;
}
.measure-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.measure-label {
font-size: 14px;
font-weight: 800;
color: var(--accent);
}
.measure-val {
font-size: 15px;
font-weight: 800;
color: var(--ink);
white-space: nowrap;
}
.measure-bar {
background: var(--card);
}
.measure-bar > span {
background: var(--accent);
}
.bar-label {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
margin-bottom: 6px;
}
.field-row {
display: flex;
gap: 12px;
}
.field-row .field {
flex: 1;
}
.notes {
color: var(--muted);
margin: 12px 0 0;
white-space: pre-wrap;
}
.chip.recur {
background: var(--green-soft);
color: var(--green);
}
.chip.doing {
background: var(--amber-soft);
color: var(--amber);
}
/* Due today/tomorrow: bright, solid — stands out from softer chips */
.chip.due-now {
background: var(--amber);
color: #fff;
}
/* Comment count: bright when unread for this user, subdued once read */
.chip.comment-chip {
border: none;
cursor: pointer;
}
.chip.comment-chip.read {
background: var(--line);
color: var(--muted);
}
.chip.comment-chip.unread {
background: var(--accent);
color: #fff;
}
.chip.todo {
background: var(--line);
color: var(--muted);
}
/* Mobile text-size levels: "big" (default) and "small" (one step down).
zoom must NEVER sit on a container of position:fixed elements — WebKit
anchors them to the zoomed box instead of the viewport, so a fixed bar
scrolls up with the page and parks mid-screen. The tabbar is therefore
PORTALED to #tabbar-root under (see mountTabbar in app.js) where
no zoomed ancestor can ever contain it; the full-screen meeting dashboard
and modal backdrops likewise stay unzoomed. */
body[data-mode="mobile"][data-font="small"] #app > :not(.tabbar):not(.mtg-dash),
body[data-mode="mobile"][data-font="small"] .modal-backdrop > * {
zoom: 0.88;
}
.checkbox.sm {
width: 28px;
height: 28px;
border-width: 2px;
border-radius: 9px;
font-size: 16px;
margin-top: 0;
}
/* Non-owner: checkbox is a static indicator, not tappable */
.checkbox.locked {
cursor: default;
opacity: 0.55;
}
.status-readonly {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 6px;
}
/* Activity feed */
.act-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.act-row {
display: flex;
gap: 12px;
width: 100%;
text-align: left;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 14px var(--pad);
align-items: flex-start;
}
.act-row:active {
transform: scale(0.995);
}
.act-row.unread {
border-color: var(--border-accent);
background: var(--accent-soft);
}
.act-body {
flex: 1;
min-width: 0;
}
.act-top {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
margin-bottom: 4px;
}
.act-who {
font-weight: 800;
}
.act-kind {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
}
.act-time {
margin-left: auto;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.act-text {
font-size: 16px;
white-space: pre-wrap;
}
.act-task {
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}
.dotnew {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--accent);
margin-right: 6px;
vertical-align: middle;
}
.xbtn {
color: var(--muted);
font-size: 15px;
font-weight: 800;
padding: 4px 8px;
border-radius: 8px;
flex: none;
}
.xbtn:active {
background: var(--line);
}
.xbtn.big {
font-size: 20px;
}
/* Recurring toggle */
.toggle {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
padding: 14px 16px;
border: 2px solid var(--line);
border-radius: 14px;
background: var(--card);
font-size: 15px;
font-weight: 700;
color: var(--muted);
}
.toggle .knob {
width: 46px;
height: 28px;
border-radius: 999px;
background: var(--line);
position: relative;
flex: none;
transition: background 0.15s ease;
}
.toggle .knob::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--card);
box-shadow: var(--shadow);
transition: transform 0.15s ease;
}
.toggle.on {
border-color: var(--green);
color: var(--green);
}
.toggle.on .knob {
background: var(--green);
}
.toggle.on .knob::after {
transform: translateX(18px);
}
/* Lists */
.list-card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 14px var(--pad);
margin-bottom: 12px;
}
.list-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 17px;
}
.list-head strong {
flex: 1;
}
.list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
}
.list-item .li-text {
flex: 1;
font-size: 16px;
}
.list-item.done .li-text {
color: var(--muted);
text-decoration: line-through;
}
.add-item {
display: flex;
gap: 8px;
margin-top: 8px;
}
.add-item input {
flex: 1;
border: 2px solid var(--line);
border-radius: 12px;
padding: 10px 14px;
background: var(--card);
color: var(--ink);
}
.add-item input:focus {
outline: none;
border-color: var(--accent);
}
.add-item .btn.sm {
flex: none;
}
/* Links */
.link-row {
display: flex;
align-items: center;
gap: 8px;
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 12px var(--pad);
margin-bottom: 10px;
}
.link-a {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
text-decoration: none;
color: inherit;
}
.link-ico {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent);
}
.link-main {
min-width: 0;
display: flex;
flex-direction: column;
}
.link-title {
font-size: 16px;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.link-url {
font-size: 13px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.link-a:hover .link-title {
text-decoration: underline;
}
/* Comments / updates */
.comments {
display: flex;
flex-direction: column;
gap: 10px;
}
.comment {
background: var(--card);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 12px 16px;
}
.comment.is-update {
background: var(--accent-soft);
border: 1px solid var(--accent);
}
.comment-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 14px;
}
.comment-head .cname {
font-weight: 800;
}
.comment-head .ctime {
color: var(--muted);
font-size: 12px;
font-weight: 600;
margin-left: auto;
}
.badge-update {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent);
background: var(--card);
padding: 3px 8px;
border-radius: 999px;
}
.comment-body {
font-size: 16px;
white-space: pre-wrap;
}
.composer {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.composer-box {
display: flex;
flex-direction: column;
gap: 8px;
}
.composer-box.update textarea {
border-color: var(--accent);
}
.composer textarea {
width: 100%;
min-height: 60px;
border: 2px solid var(--line);
border-radius: 14px;
padding: 12px 14px;
background: var(--card);
color: var(--ink);
resize: vertical;
}
.composer textarea:focus {
outline: none;
border-color: var(--accent);
}
.composer .btn.sm {
align-self: flex-start;
}
/* ---- DESKTOP layout ---------------------------------------------------- */
body[data-mode="desktop"] #app {
padding-bottom: 0;
}
.dsk {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 264px;
flex: none;
background: var(--card);
border-right: 1px solid var(--line);
padding: 20px 14px;
display: flex;
flex-direction: column;
gap: 4px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 800;
padding: 4px 8px 16px;
}
.brand img {
width: 32px;
height: 32px;
}
.nav-link {
display: block;
width: 100%;
text-align: left;
padding: 12px 14px;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.nav-link:hover {
background: var(--bg);
}
.nav-link.on {
background: var(--accent-soft);
color: var(--accent);
}
.nav-section {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
padding: 18px 14px 6px;
}
.nav-goals {
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
}
.nav-goal {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
padding-left: calc(14px + var(--nind, 0) * 16px);
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
text-align: left;
}
/* Depth ≥1 rows are quieter and slightly smaller than their group header */
.nav-goal[style*="--nind:1"],
.nav-goal[style*="--nind:2"],
.nav-goal[style*="--nind:3"],
.nav-goal[style*="--nind:4"] {
font-size: 14px;
padding-top: 7px;
padding-bottom: 7px;
}
/* Each school-goal group starts with a little air above it */
.nav-goal.nav-school {
margin-top: 6px;
}
.nav-goal.nav-school:first-child {
margin-top: 0;
}
.nav-subsec {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
padding: 12px 14px 4px;
}
/* Date buckets INSIDE a Tasks area read as sub-headers of it: smaller,
quieter, indented under the TASKS header instead of rivalling it. */
.section-head.bucket-head {
margin: 12px 2px 8px 12px;
}
.section-head.bucket-head h3 {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.6px;
}
.section-head.bucket-head .n {
font-size: 11px;
}
.nav-goal:hover {
background: var(--bg);
}
.nav-goal.on {
background: var(--bg);
font-weight: 800;
}
.nav-goal .dot {
width: 12px;
height: 12px;
border-radius: 999px;
flex: none;
}
.nav-goal-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-foot {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-foot .who {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 12px;
font-weight: 700;
width: 100%;
background: none;
border: none;
text-align: left;
cursor: pointer;
color: inherit;
font-size: 16px;
}
.sidebar-foot .who:hover {
color: var(--accent);
}
.sidebar-foot .who .who-edit {
margin-left: auto;
font-size: 12px;
font-weight: 700;
color: var(--accent);
opacity: 0.85;
}
/* Parent-goal link inside a task */
.goal-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 999px;
background: var(--accent-soft);
border: 1px solid var(--border-accent);
color: var(--accent);
font-weight: 800;
font-size: 15px;
cursor: pointer;
max-width: 100%;
}
.goal-link .gdot {
flex: 0 0 auto;
}
.goal-link > span:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-link .chev {
font-size: 18px;
opacity: 0.7;
}
.content {
flex: 1;
min-width: 0;
padding: 30px 36px 60px;
max-width: 1200px;
}
.content-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.content-head h1 {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.5px;
margin: 0;
}
.content-head .btn.sm {
flex: none;
}
.goal-head {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 22px 24px;
align-items: center;
}
.narrow {
max-width: 720px;
}
.mine-list .task:hover,
.narrow .card.tappable:hover {
transform: translateY(-1px);
cursor: pointer;
}
/* Goal tiles (desktop dashboard) */
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.tile {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
text-align: left;
transition: transform 0.1s ease, border-color 0.12s ease;
/* Tiles are