/* ====== MPad — one stylesheet, no framework ====== Two themes, one set of custom property names. Nothing below the theme blocks ever branches on theme — it reads tokens. Dark — charcoal black, gold accent. Light — the cream and ink brown from Abdu Rahman Afia's site, with the gold dropped to bronze because bright gold on cream is close to invisible (about 1.8:1 against text-size copy). Resolution order: an explicit data-theme on always wins; with no attribute set the system preference decides. */ :root { /* -- dark, and the default before any preference is known -- */ --bg: #1b1b1d; --bg-elev: #232326; --bg-elev-2: #2b2b2f; --bg-input: #171719; --border: #35353a; --border-soft: #292930; --text: #edebe6; --text-dim: #a6a29b; /* Faint still has to clear 4.5:1 — it is small metadata, not decoration. */ --text-faint: #8c877f; --accent: #e8b04b; --accent-dim: #b8873a; --accent-ink: #1b1b1d; /* Buttons resolve through their own tokens so the primary fill can change hue between themes without touching a single rule. */ --btn-primary-bg: var(--accent); --btn-primary-hover: #f0bd60; --btn-primary-ink: #1b1b1d; --ok: #8fbf6f; --warn: #e0a340; --danger: #e08472; --info: #7fa8d9; --shadow-modal: 0 24px 70px rgba(0, 0, 0, .55); --shadow-card: none; --radius: 12px; --radius-sm: 8px; --sidebar-w: 232px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* The light palette, written once as a group and applied from the two places that can select it. */ :root[data-theme="light"] { --bg: #fdf9eb; --bg-elev: #fffdf6; --bg-elev-2: #f4efdd; --bg-input: #ffffff; --border: #e3d9bf; --border-soft: #efe8d3; --text: #403232; --text-dim: #6b5b52; --text-faint: #7a6c62; --accent: #8a5a18; --accent-dim: #a87a32; --accent-ink: #fdf9eb; --btn-primary-bg: #8a5a18; --btn-primary-hover: #744b12; --btn-primary-ink: #fdf9eb; --ok: #4f6b3a; --warn: #8a5a18; --danger: #a63d2e; --info: #2f5a8c; --shadow-modal: 0 24px 70px rgba(64, 50, 50, .18); --shadow-card: 0 1px 2px rgba(64, 50, 50, .06); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #fdf9eb; --bg-elev: #fffdf6; --bg-elev-2: #f4efdd; --bg-input: #ffffff; --border: #e3d9bf; --border-soft: #efe8d3; --text: #403232; --text-dim: #6b5b52; --text-faint: #7a6c62; --accent: #8a5a18; --accent-dim: #a87a32; --accent-ink: #fdf9eb; --btn-primary-bg: #8a5a18; --btn-primary-hover: #744b12; --btn-primary-ink: #fdf9eb; --ok: #4f6b3a; --warn: #8a5a18; --danger: #a63d2e; --info: #2f5a8c; --shadow-modal: 0 24px 70px rgba(64, 50, 50, .18); --shadow-card: 0 1px 2px rgba(64, 50, 50, .06); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior: none; } [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } /* ====== Login ====== */ .login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1000px 500px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg); text-align: center; } .login-card > *:not(.login-logo) { text-align: left; } .login-card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow-modal); } .login-logo { width: 168px; height: auto; margin: 0 auto 22px; } .login-card h1 { font-size: 22px; } .login-sub { margin: 6px 0 22px; color: var(--text-dim); font-size: 14px; } .login-btn { width: 100%; margin-top: 6px; } .login-error { margin: 0 0 12px; color: var(--danger); font-size: 13px; } .login-hint { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 12px; line-height: 1.7; } .login-hint code { font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: var(--bg-input); padding: 2px 6px; border-radius: 5px; } /* ====== Shell ====== */ .app { display: flex; height: 100dvh; overflow: hidden; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--bg-elev); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding-top: var(--safe-t); } .brand { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 16px; } /* ====== Brand mark ====== The stamp exists as two flat artworks — black ink and white ink — so the theme picks the one that has contrast rather than trying to recolour a raster. */ .brand-logo { display: block; width: 122px; height: auto; /* The artwork is a wide oval; this keeps the sidebar header compact. */ max-width: 100%; } .logo-on-dark { display: block; } .logo-on-light { display: none; } :root[data-theme="light"] .logo-on-dark { display: none; } :root[data-theme="light"] .logo-on-light { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .logo-on-dark { display: none; } :root:not([data-theme]) .logo-on-light { display: block; } } .sidebar-close { display: none; } /* ====== Theme picker (Settings) ====== */ .theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .theme-card { font: inherit; text-align: left; padding: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .12s, background .12s; } .theme-card:hover { border-color: var(--accent-dim); } .theme-card.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-input)); } .theme-card-name { font-size: 13.5px; font-weight: 600; color: var(--text); } .theme-card.is-active .theme-card-name { color: var(--accent); } .theme-card-note { font-size: 11.5px; color: var(--text-faint); } .nav { flex: 1; overflow-y: auto; padding: 4px 10px; display: flex; flex-direction: column; gap: 1px; } .nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; transition: background .12s, color .12s; } .nav-link:hover { background: var(--bg-elev-2); color: var(--text); } .nav-link.is-active { background: var(--bg-elev-2); color: var(--text); font-weight: 500; } .nav-link.is-active .nav-icon { color: var(--accent); } .nav-icon { width: 16px; text-align: center; font-size: 12px; color: var(--text-faint); flex: none; } .sidebar-foot { border-top: 1px solid var(--border-soft); padding: 10px; padding-bottom: calc(10px + var(--safe-b)); } .who { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px 4px; } .who-name { font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .topbar { display: flex; align-items: center; gap: 12px; padding: 14px 22px; padding-top: calc(14px + var(--safe-t)); border-bottom: 1px solid var(--border); background: var(--bg); flex: none; } .menu-btn { display: none; } .page-title { font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { display: flex; gap: 8px; align-items: center; flex: none; } .view { flex: 1; overflow-y: auto; padding: 22px; padding-bottom: calc(48px + var(--safe-b)); -webkit-overflow-scrolling: touch; } .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 40; } /* ====== Buttons and form controls ====== */ .primary-btn, .ghost-btn, .danger-btn { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; white-space: nowrap; } /* One solid button per screen, and it is the only saturated fill in the interface. Everything else is a hairline, which is what keeps a gold and cream palette from turning into a fairground. */ .primary-btn { background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-color: var(--btn-primary-bg); } .primary-btn:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); } .ghost-btn { background: transparent; color: var(--text); border-color: var(--border); } .ghost-btn:hover { background: var(--bg-elev-2); border-color: var(--accent-dim); } /* Destructive actions never carry a red fill at rest — the colour only arrives once the pointer is actually on them. */ .danger-btn { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); } .danger-btn:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); } .primary-btn:focus-visible, .ghost-btn:focus-visible, .danger-btn:focus-visible, .icon-btn:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .primary-btn:disabled, .ghost-btn:disabled { opacity: .5; cursor: default; } .icon-btn { font: inherit; background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); line-height: 1; } .icon-btn:hover { background: var(--bg-elev-2); color: var(--text); } .link-btn { font: inherit; font-size: 13px; background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; } .link-btn:hover { text-decoration: underline; } .link-btn.subtle { color: var(--text-faint); font-size: 12px; } .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; } input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=tel], select, textarea, .modal-input { width: 100%; font: inherit; /* Below 16px iOS zooms the page when a field takes focus. */ font-size: 16px; padding: 9px 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); transition: border-color .12s; } textarea { resize: vertical; min-height: 90px; line-height: 1.55; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-dim); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; } .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; } @media (min-width: 1024px) { input, select, textarea { font-size: 14px; } } /* ====== Cards, grids, generic layout ====== */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-head h2, .card-head h3 { font-size: 14px; } .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); font-weight: 600; margin: 0 0 12px; } .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .stack { display: flex; flex-direction: column; gap: 14px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row.tight { gap: 6px; } .spacer { flex: 1; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); font-size: 13px; } .empty-state { padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 14px; border: 1px dashed var(--border); border-radius: var(--radius); } .empty-state p { margin: 0 0 14px; } /* ====== Stat tiles ====== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; } .stat-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .stat-label { font-size: 12px; color: var(--text-faint); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.06em; } .stat.is-alert .stat-value { color: var(--danger); } .stat.is-good .stat-value { color: var(--ok); } .stat.is-wide { border-color: var(--accent-dim); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg-elev)), var(--bg-elev)); } .stat.is-wide .stat-value { color: var(--accent); } .stat-foot { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; } /* ====== Lists ====== */ .list { display: flex; flex-direction: column; gap: 1px; } .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .12s; } .list-item:hover { border-color: var(--accent-dim); } .list-main { flex: 1; min-width: 0; } .list-title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-actions { display: flex; gap: 4px; flex: none; } /* ====== Badges ====== */ .badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-elev-2); color: var(--text-dim); white-space: nowrap; } /* Tinted from the same tokens, so a badge follows the theme instead of staying a dark-mode colour on a cream page. */ .badge.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .badge.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); } .badge.danger { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } .badge.info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); } .badge.accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } /* ====== Artist cards ====== */ .artist-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .12s, transform .12s; } .artist-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); } .artist-top { display: flex; align-items: center; gap: 12px; } .avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; } .avatar.lg { width: 60px; height: 60px; font-size: 21px; } .artist-name { font-size: 15px; font-weight: 600; } .artist-meta { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; } .artist-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border-soft); padding-top: 10px; } .artist-stats b { color: var(--text); font-weight: 600; } /* ====== Social quick links ====== */ .socials { display: flex; flex-wrap: wrap; gap: 7px; } .social-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); transition: border-color .12s, color .12s; } .social-btn:hover { border-color: var(--accent); color: var(--accent); } /* ====== Duty lists ====== */ .duty-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .duty-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; } .duty-item:last-child { border-bottom: none; } .duty-item input[type=checkbox] { margin: 3px 0 0; accent-color: var(--accent); flex: none; width: 15px; height: 15px; } .duty-body { flex: 1; min-width: 0; } .duty-item.is-done .duty-body { opacity: .45; text-decoration: line-through; } .duty-cadence { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; } /* ====== Tabs ====== */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { font: inherit; font-size: 13.5px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-faint); padding: 9px 13px; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s; } .tab:hover { color: var(--text); } .tab.is-active { color: var(--text); border-bottom-color: var(--accent); } /* ====== Tables ====== */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; } table.data th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } table.data tr:last-child td { border-bottom: none; } table.data td.num, table.data th.num { text-align: right; } table.data tr.is-total td { font-weight: 600; border-top: 1px solid var(--border); border-bottom: none; } /* ====== Calendar ====== */ .cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .cal-month { font-size: 16px; font-weight: 600; min-width: 180px; } .cal-grid { display: grid; /* minmax(0, 1fr), not 1fr: a plain fr track floors at min-content, so a day holding a long chip would steal width from the empty days. */ grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .cal-dow { background: var(--bg-elev-2); padding: 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); text-align: center; font-weight: 600; } .cal-cell { background: var(--bg-elev); min-height: 104px; padding: 6px; display: flex; flex-direction: column; gap: 3px; } .cal-cell.is-outside { background: var(--bg); opacity: .45; } .cal-cell.is-today .cal-date { background: var(--accent); color: var(--accent-ink); font-weight: 700; } .cal-date { font-size: 11.5px; color: var(--text-dim); width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; flex: none; } .cal-chip { font-size: 11px; padding: 3px 6px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border-left: 2px solid var(--accent); } .cal-chip.is-task { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); border-left-color: var(--info); } .cal-chip.is-overdue { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-left-color: var(--danger); } .cal-more { font-size: 10.5px; color: var(--text-faint); padding-left: 6px; } /* ====== Tasks ====== */ .task-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); } .task-item input[type=checkbox] { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--accent); flex: none; cursor: pointer; } .task-item.is-done .task-title { opacity: .45; text-decoration: line-through; } .task-item.is-overdue { border-left: 2px solid var(--danger); } .task-title { font-size: 14px; } .task-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-faint); margin-top: 4px; } .task-meta .is-late { color: var(--danger); font-weight: 500; } /* ====== Notes ====== */ .note-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .12s; } .note-card:hover { border-color: var(--accent-dim); } .note-card-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); } .note-title { font-size: 14.5px; font-weight: 600; } .note-body { font-size: 13.5px; color: var(--text-dim); white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; line-clamp: 5; } .note-body.full { -webkit-line-clamp: unset; line-clamp: unset; display: block; color: var(--text); } .note-card.is-idea { border-left: 2px solid var(--accent); } .copy-btn { font-size: 13px; opacity: .55; transition: opacity .12s; } .note-card:hover .copy-btn { opacity: 1; } .copy-btn:hover { opacity: 1; color: var(--accent); } /* ====== Bullets ====== */ .bullets { margin: 0; padding-left: 17px; font-size: 13.5px; color: var(--text-dim); line-height: 1.65; } .bullets li { margin-bottom: 4px; } .bullets li::marker { color: var(--accent); } .bullets li.faint::marker { color: var(--text-faint); } .comment { border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 10px; font-size: 13.5px; } .comment-who { font-size: 11.5px; color: var(--text-faint); margin-bottom: 3px; } /* ====== Folder tree ====== */ .folder { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; } .folder-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: var(--bg-elev-2); cursor: pointer; font-size: 13.5px; font-weight: 500; } .folder-head:hover { background: var(--border-soft); } .folder-count { color: var(--text-faint); font-size: 12px; font-weight: 400; } .folder-body { padding: 6px 13px 11px; background: var(--bg-elev); } .file-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border-soft); } .file-row:last-child { border-bottom: none; } .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-size { font-size: 11.5px; color: var(--text-faint); flex: none; } .drop-zone { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-faint); margin-top: 8px; transition: border-color .12s, color .12s; } .drop-zone.is-over { border-color: var(--accent); color: var(--accent); } /* ====== Report bars ====== */ .bars { display: flex; align-items: flex-end; gap: 4px; height: 168px; padding: 12px 0 0; overflow-x: auto; } .bar-col { flex: 1; min-width: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .bar-stack { width: 100%; max-width: 40px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; flex: 1; } .bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); min-height: 2px; transition: opacity .12s; } /* Late has to read as clearly different from on-time at a glance, so it shifts hue to orange rather than sitting one step off the gold. */ .bar.late { background: #d97706; border-radius: 0; } .bar.overdue { background: var(--danger); border-radius: 0; } .swatch.late { background: #d97706; } .bar-label { font-size: 10px; color: var(--text-faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 14px; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* ====== Drag to reorder ====== */ .drag-handle { cursor: grab; color: var(--text-faint); font-size: 11px; letter-spacing: -3px; padding: 0 6px 0 0; flex: none; user-select: none; line-height: 1; } .drag-handle:active { cursor: grabbing; } .is-dragging { opacity: .4; } .is-drop-target { outline: 1px dashed var(--accent); outline-offset: -1px; } /* ====== Responsibility table ====== */ .resp-table td { vertical-align: middle; } .resp-select { font-size: 12.5px; padding: 5px 8px; width: 100%; background: var(--bg-input); } /* An undecided owner is the thing most worth chasing, so it is loud. */ .resp-select.party-unassigned { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); } .resp-amount { font-size: 12.5px; padding: 5px 8px; text-align: right; width: 100%; } /* ====== Planning checklist ====== */ .check-table td { vertical-align: middle; padding: 7px 8px; } .check-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; display: block; } .check-table .is-struck { opacity: .45; text-decoration: line-through; } /* A line already handed to its owner is settled — dim it so attention falls on the ones still sitting on the event. */ .check-table tr.is-sent td:nth-child(3) { color: var(--text-dim); } /* ====== Custom fields ====== */ .custom-list { display: flex; flex-direction: column; } .custom-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; } .custom-row:last-child { border-bottom: none; } .custom-label { flex: 0 0 34%; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; } .custom-value { flex: 1; min-width: 0; word-break: break-word; } /* ====== Cost bars ====== */ .cost-bars { display: flex; flex-direction: column; gap: 9px; } .cost-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .cost-bar-label { flex: 0 0 34%; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cost-bar-track { flex: 1; height: 8px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; } .cost-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .cost-bar-value { flex: none; font-variant-numeric: tabular-nums; } /* ====== Modal ====== */ .modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.6); overflow-y: auto; } .modal { width: 100%; max-width: 520px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; } .modal.wide { max-width: 720px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--border-soft); flex: none; } .modal-head h3 { font-size: 15px; } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 6px; flex-wrap: wrap; } /* ====== Toasts ====== */ .toasts { position: fixed; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(440px, calc(100vw - 32px)); } .toast { pointer-events: auto; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 15px; font-size: 13.5px; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); display: flex; align-items: center; gap: 14px; width: 100%; animation: rise .16s ease-out; } .toast-text { flex: 1; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ====== Responsive ====== */ @media (max-width: 899px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform .18s ease; } body.sidebar-open .sidebar { transform: none; } .sidebar-close { display: block; } .menu-btn { display: block; } .view { padding: 16px; } .topbar { padding-left: 14px; padding-right: 14px; } .field-row { grid-template-columns: 1fr; } .cal-cell { min-height: 68px; padding: 4px; } .cal-chip { font-size: 10px; padding: 2px 4px; } } @media (min-width: 900px) { .scrim { display: none !important; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001s !important; transition-duration: .001s !important; } } /* ====== Theme-dependent surfaces ====== */ /* Cards need a hairline shadow on cream to lift off the page, and none on charcoal where a shadow would just be a smudge. Both come from one token so this rule is written once. */ .login-card, .card, .stat, .list-item, .artist-card, .note-card, .task-item, .toast { box-shadow: var(--shadow-card); } .modal { box-shadow: var(--shadow-modal); }