/* --------------------------------------------------------------------------- Simple PMF Board — single-layer design system. Dark-first (very dark), pink accent, quiet surfaces, one radius scale. Theme is set on before first paint. --------------------------------------------------------------------------- */ :root { /* Type + shape */ --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; --radius: 10px; --radius-sm: 7px; --radius-xs: 5px; /* Accent + state colors (shared across themes) */ --accent: #ff2d96; --accent-strong: #e01180; --accent-soft: rgba(255, 45, 150, 0.14); --green: #2fbf71; --yellow: #d9a514; --red: #ef4747; --purple: #a06bfa; --cyan: #26b6d4; --blue: #3b82f6; --orange: #f97316; /* Dark theme (default) — very dark, near-black */ color-scheme: dark; --bg: #050507; --rail-bg: #08080b; --surface: #0d0e13; --surface-2: #13151c; --surface-3: #1a1d26; --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.14); --ink: #eceff5; --muted: #9aa3b5; --faint: #626b7d; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --card-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.5); --drawer-shadow: -24px 0 60px rgba(0, 0, 0, 0.6); --tone-chip-alpha: 18%; } :root[data-theme="light"] { color-scheme: light; --bg: #f2f4f8; --rail-bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --surface-3: #f2f4f8; --line: rgba(18, 27, 46, 0.1); --line-strong: rgba(18, 27, 46, 0.2); --ink: #171e2c; --muted: #5d6778; --faint: #98a1b3; --card-shadow: 0 1px 2px rgba(18, 27, 46, 0.07); --card-shadow-hover: 0 8px 22px rgba(18, 27, 46, 0.12); --drawer-shadow: -24px 0 60px rgba(18, 27, 46, 0.18); --tone-chip-alpha: 12%; } /* ------------------------------------------------------------------ base */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { height: 100%; } body { background: var(--bg); color: var(--ink); display: grid; font-family: var(--font); font-size: 14px; grid-template-columns: 216px minmax(0, 1fr); line-height: 1.45; margin: 0; min-height: 100vh; } h1, h2, h3, p { margin: 0; } button, input, select, textarea { font: inherit; } ::selection { background: var(--accent-soft); } :is(button, input, select, textarea, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --------------------------------------------------------------- login */ body.auth-pending > .rail, body.auth-pending > .main { visibility: hidden; } body.login-required { display: block; overflow: hidden; } body.login-required > .rail, body.login-required > .main { display: none; } .login-splash { align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.16) 70%), url("/assets/gsd-splash.png") center / cover no-repeat; color: #fff; display: flex; inset: 0; min-height: 100vh; padding: 48px; position: fixed; z-index: 100; } .login-splash-panel { display: grid; gap: 24px; width: min(390px, 100%); } .splash-logo { display: block; height: auto; width: 280px; } .login-kicker { color: rgba(255, 255, 255, 0.58); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 7px; text-transform: uppercase; } .splash-title { color: #fff; font-size: 56px; font-weight: 800; letter-spacing: 0; line-height: 0.96; } .login-splash-panel form { display: grid; gap: 13px; } .login-splash-panel label { color: rgba(255, 255, 255, 0.72); } .login-splash-panel input { background: rgba(5, 5, 8, 0.88); border-color: rgba(255, 255, 255, 0.2); color: #fff; min-height: 44px; } .login-splash-panel input:focus { border-color: var(--accent); } .login-submit { box-shadow: 0 10px 28px rgba(255, 45, 150, 0.24); min-height: 44px; } .login-error { color: #ff8bbd; font-size: 12px; min-height: 18px; } .session-identity { color: var(--faint); font-size: 10.5px; overflow-wrap: anywhere; } /* ------------------------------------------------------------- controls */ button { align-items: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; display: inline-flex; font-weight: 550; gap: 8px; justify-content: center; min-height: 34px; padding: 0 13px; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } button.primary { background: var(--accent); color: #fff; } button.primary:hover { background: var(--accent-strong); } button.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); } button.ghost:hover { border-color: var(--line-strong); color: var(--ink); } button.ghost.subtle { border-color: transparent; color: var(--faint); } button.ghost.subtle:hover { color: var(--muted); } button.danger { background: transparent; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); } button.danger:hover, button.danger.arm { background: var(--red); border-color: var(--red); color: #fff; } button.icon { border-radius: var(--radius-sm); color: var(--muted); font-size: 20px; height: 32px; min-height: 32px; padding: 0; width: 32px; } button.icon:hover { background: var(--surface-3); color: var(--ink); } button kbd { background: rgba(255, 255, 255, 0.16); border-radius: 4px; font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 5px; } input, select, textarea { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); min-height: 34px; padding: 6px 10px; transition: border-color 140ms ease; width: 100%; } input::placeholder, textarea::placeholder { color: var(--faint); } input:hover, select:hover, textarea:hover { border-color: var(--line-strong); } textarea { line-height: 1.5; resize: vertical; } label { color: var(--muted); display: grid; font-size: 12px; font-weight: 550; gap: 5px; } .eyebrow { color: var(--accent); font-size: 10.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; } /* ----------------------------------------------------------------- rail */ .rail { background: var(--rail-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { align-items: center; border-radius: var(--radius-sm); color: var(--ink); display: flex; gap: 10px; padding: 4px 6px; text-decoration: none; transition: background 140ms ease; } .brand:hover, .brand:focus-visible { background: var(--surface-2); outline: none; } .brand-mark { display: block; flex: 0 0 30px; height: 34px; overflow: hidden; position: relative; width: 30px; } .brand-mark img { display: block; height: 34px; max-width: none; width: auto; } .brand-kicker { color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .brand-name { font-size: 16px; font-weight: 650; line-height: 1.15; } .rail-nav { display: grid; gap: 2px; } .rail-ticket-button { border-radius: var(--radius); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 28%, transparent); font-size: 14px; justify-content: space-between; min-height: 46px; padding: 0 14px; } .rail-ticket-button.active { background: var(--accent-strong); } .rail-nav a { border-radius: var(--radius-sm); color: var(--muted); font-size: 13.5px; font-weight: 550; padding: 8px 12px; text-decoration: none; transition: background 140ms ease, color 140ms ease; } .rail-nav a:hover { background: var(--surface-2); color: var(--ink); } .rail-nav a.active { background: var(--accent-soft); color: var(--accent); } .rail-footer { display: grid; gap: 8px; margin-top: auto; } .rail-role { border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; margin-top: 6px; padding-top: 12px; } .sync-state { color: var(--faint); font-size: 11px; min-height: 15px; padding: 0 2px; } .sync-state.live { color: var(--green); } /* ----------------------------------------------------------------- main */ .main { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 18px 20px 24px; } .view-panel { display: none; } .view-panel.active { display: grid; align-content: start; gap: 14px; } .section-heading h2 { font-size: 17px; font-weight: 650; } .section-heading p { color: var(--faint); font-size: 12.5px; margin-top: 2px; } .intake-shell, .settings-shell { align-content: start; display: grid; gap: 16px; max-width: 1180px; width: 100%; } .intake-heading { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; } .intake-heading h2 { font-size: 26px; letter-spacing: 0; line-height: 1.1; } /* --------------------------------------------------------------- intake */ .intake-workspace { align-items: stretch; display: grid; gap: 14px; grid-template-columns: minmax(420px, 1.15fr) minmax(320px, 0.85fr); min-height: min(680px, calc(100vh - 180px)); } .intake { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 12px; grid-template-rows: auto minmax(220px, 1fr) auto auto; padding: 14px; transition: border-color 140ms ease, box-shadow 140ms ease; } .intake:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); } .intake-topline { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 8px; } .intake-topline strong { color: var(--ink); font-size: 13px; font-weight: 650; } .intake-agent-dot { background: var(--green); border-radius: 999px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); height: 8px; width: 8px; } .intake-log { display: grid; gap: 12px; max-height: none; min-height: 220px; overflow-y: auto; padding: 4px 4px 8px 0; scrollbar-width: thin; } .intake-message { display: flex; gap: 9px; max-width: 88%; } .intake-message.user { justify-self: end; justify-content: flex-end; } .intake-avatar { align-items: center; background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; color: var(--faint); display: inline-flex; flex: none; font-size: 10px; font-weight: 750; height: 30px; justify-content: center; letter-spacing: 0.04em; text-transform: uppercase; width: 36px; } .intake-message.user .intake-avatar { order: 2; } .intake-bubble { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; border-top-left-radius: 5px; color: var(--muted); display: block; font-size: 14px; line-height: 1.48; padding: 11px 13px; } .intake-message.user .intake-bubble { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 16px; border-top-right-radius: 5px; color: var(--ink); } .intake-prompts { display: flex; flex-wrap: wrap; gap: 7px; } .intake-prompts button { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 12px; min-height: 30px; padding: 0 10px; } .intake-prompts button:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); } .intake-composer { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; } .intake-composer textarea { background: var(--surface-2); border-radius: 14px; min-height: 78px; padding: 12px 13px; resize: vertical; } .intake-composer button { border-radius: 14px; min-height: 78px; min-width: 88px; } .intake-draft { align-content: start; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 12px; padding: 14px; } .intake-draft-main { align-items: start; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; } .intake-draft h2 { font-size: 20px; font-weight: 650; line-height: 1.2; margin-top: 4px; } .intake-draft p { color: var(--muted); font-size: 13px; margin-top: 5px; } .intake-draft .intake-note { border-top: 1px solid var(--line); color: var(--muted); padding-top: 9px; } .intake-draft-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; } .intake-draft-actions button:disabled { cursor: not-allowed; opacity: 0.48; } .intake-checks { display: flex; flex-wrap: wrap; gap: 6px; } .intake-checks span { background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11.5px; padding: 4px 8px; } .draft-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); min-height: 180px; padding: 18px; } .draft-rules, .draft-missing { display: flex; flex-wrap: wrap; gap: 7px; } .draft-rules span, .draft-missing span { background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 5px 9px; } .draft-missing { border-top: 1px solid var(--line); padding-top: 12px; } .draft-missing strong { color: var(--accent); font-size: 11px; letter-spacing: 0.06em; line-height: 26px; text-transform: uppercase; } /* -------------------------------------------------------------- settings */ .settings-add { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 8px; grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) auto; padding: 10px; } .settings-list { display: grid; gap: 8px; } .settings-owner { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px; } .settings-owner.archived { opacity: 0.72; } .settings-owner strong { display: block; font-size: 13.5px; font-weight: 650; } .settings-owner small { color: var(--faint); display: block; font-size: 11.5px; } .settings-owner button:disabled { cursor: default; opacity: 0.52; } .settings-subhead { color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: 0.06em; margin-top: 6px; text-transform: uppercase; } .capture-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; min-height: 22px; padding: 0 2px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips span { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 11.5px; gap: 6px; padding: 3px 9px; } .chips strong { color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } .stats { display: flex; flex-wrap: wrap; gap: 4px; } .stats span { align-items: baseline; border-radius: var(--radius-xs); color: var(--faint); display: inline-flex; font-size: 11.5px; gap: 5px; padding: 3px 7px; } .stats strong { color: var(--ink); font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 650; } .stats span.zero strong { color: var(--faint); } .stats span.alert strong { color: var(--red); } /* ------------------------------------------------------------ attention */ .attention { display: grid; gap: 8px; } .attention-toggle { color: var(--muted); font-size: 12px; font-weight: 600; gap: 8px; justify-content: flex-start; letter-spacing: 0.05em; min-height: 26px; padding: 0 2px; text-transform: uppercase; width: max-content; } .attention-count { background: var(--accent-soft); border-radius: 999px; color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1; padding: 4px 8px; } .attention-caret { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--faint); transition: transform 160ms ease; } .attention-toggle[aria-expanded="false"] .attention-caret { transform: rotate(-90deg); } .attention-track { display: grid; gap: 8px; grid-auto-columns: minmax(230px, 280px); grid-auto-flow: column; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .attention.collapsed .attention-track { display: none; } .review-item { align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--tone, var(--green)); color: var(--ink); display: grid; gap: 3px; justify-content: stretch; justify-items: start; padding: 10px 12px; text-align: left; } .review-item:hover { border-color: var(--line-strong); } .review-item strong { font-size: 13px; font-weight: 600; line-height: 1.3; } .review-item small { color: var(--faint); font-size: 11.5px; } .review-item .review-meta { align-items: center; color: var(--muted); display: inline-flex; font-size: 10.5px; font-weight: 600; gap: 6px; letter-spacing: 0.04em; text-transform: uppercase; } .review-item .review-meta b { color: var(--tone, var(--green)); font-weight: 700; } .empty-small { color: var(--faint); font-size: 12px; } /* -------------------------------------------------------------- toolbar */ .toolbar { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(170px, 1fr) repeat(4, minmax(110px, 150px)) auto; } .toolbar input, .toolbar select { background: var(--surface); } .segmented { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); display: inline-flex; padding: 2px; } .segmented button { border-radius: 5px; color: var(--muted); font-size: 12.5px; min-height: 28px; padding: 0 11px; } .segmented button.active { background: var(--surface-3); color: var(--ink); } /* ---------------------------------------------------------------- board */ .board { display: flex; gap: 10px; min-height: calc(100vh - 240px); overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; } .lane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; flex: 0 0 244px; grid-template-rows: auto 1fr; max-height: calc(100vh - 200px); min-width: 244px; } .lane-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; padding: 10px 12px; } .lane-title { align-items: center; display: flex; gap: 8px; min-width: 0; } .lane-dot { background: var(--owner, var(--faint)); border-radius: 999px; flex: none; height: 8px; width: 8px; } .lane-header h2 { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lane-count { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; } .lane-add { border-radius: 6px; color: var(--faint); font-size: 16px; height: 26px; min-height: 26px; padding: 0; width: 26px; } .lane-add:hover { background: var(--surface-3); color: var(--ink); } .lane-drop { align-content: start; display: grid; gap: 8px; overflow-y: auto; padding: 10px; scrollbar-width: thin; } .lane-drop.drag-over { background: var(--accent-soft); } .empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--faint); font-size: 12px; padding: 16px 10px; text-align: center; } /* ---------------------------------------------------------- ticket card */ .ticket-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--tone, var(--green)), var(--card-shadow); cursor: grab; display: grid; gap: 7px; padding: 10px 12px; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .ticket-card:hover { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--tone, var(--green)), var(--card-shadow-hover); transform: translateY(-1px); } .ticket-card:active { cursor: grabbing; } .ticket-card.drag-over { box-shadow: inset 3px 0 0 var(--tone, var(--green)), 0 -2px 0 0 var(--accent); } .ticket-card h3 { font-size: 13.5px; font-weight: 600; line-height: 1.35; } .card-top { align-items: center; display: flex; gap: 6px; } .tag { border-radius: var(--radius-xs); font-size: 10.5px; font-weight: 650; letter-spacing: 0.03em; line-height: 1; padding: 4px 6px; } .tag.priority { background: color-mix(in srgb, var(--tone, var(--green)) var(--tone-chip-alpha), transparent); color: var(--tone, var(--green)); } .tag.status { background: var(--surface-3); color: var(--muted); } .tag.status.status-blocked { background: color-mix(in srgb, var(--red) var(--tone-chip-alpha), transparent); color: var(--red); } .tag.status.status-review { background: color-mix(in srgb, var(--purple) var(--tone-chip-alpha), transparent); color: var(--purple); } .tag.status.status-done { background: color-mix(in srgb, var(--green) var(--tone-chip-alpha), transparent); color: var(--green); } .tag.verify { background: color-mix(in srgb, var(--cyan) var(--tone-chip-alpha), transparent); color: var(--cyan); margin-left: auto; } .card-meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 11.5px; gap: 5px 10px; } .card-meta .owner-chip { align-items: center; display: inline-flex; gap: 5px; } .owner-dot { background: var(--owner, var(--faint)); border-radius: 999px; flex: none; height: 7px; width: 7px; } .card-client { color: var(--faint); font-size: 12px; } .card-origin { color: var(--faint); display: flex; flex-wrap: wrap; font-size: 10.5px; gap: 4px 8px; } .card-checks { align-items: center; color: var(--muted); display: flex; font-size: 11px; font-variant-numeric: tabular-nums; gap: 8px; } .check-bar { background: var(--surface-3); border-radius: 999px; flex: 1; height: 3px; overflow: hidden; } .check-bar i { background: var(--green); border-radius: 999px; display: block; height: 100%; transition: width 200ms ease; } /* Quick status controls: revealed on hover / keyboard focus */ .quick-status-controls { display: flex; gap: 4px; height: 0; opacity: 0; overflow: hidden; transition: height 140ms ease, opacity 140ms ease, margin 140ms ease; } .ticket-card:hover .quick-status-controls, .ticket-card:focus-within .quick-status-controls { height: 26px; opacity: 1; } @media (hover: none) { .quick-status-controls { height: 26px; opacity: 1; } } .status-action { background: var(--surface-3); border-radius: var(--radius-xs); color: var(--muted); flex: 1; font-size: 10.5px; font-weight: 600; min-height: 24px; padding: 0 4px; } .status-action:hover { color: var(--ink); } .status-action.active, .status-action:disabled { background: var(--ink); color: var(--bg); cursor: default; } /* ------------------------------------------------- schedule / week / month */ .schedule-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(180px, 1fr)); } .week-grid { display: grid; gap: 10px; grid-template-columns: repeat(7, minmax(140px, 1fr)); overflow-x: auto; } .schedule-column, .week-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; align-content: start; gap: 8px; min-height: 180px; padding: 10px; } .schedule-column.drag-over, .week-day.drag-over, .schedule-list.drag-over, .week-list.drag-over { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); } .week-day.is-today { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .schedule-column header, .week-day header { align-items: center; display: flex; justify-content: space-between; } .schedule-column h3, .week-day h3 { font-size: 13px; font-weight: 600; } .week-day header p { color: var(--faint); font-size: 11px; margin-top: 1px; } .count-pill { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; } .count-pill.has-items { color: var(--accent); font-weight: 650; } .schedule-list, .week-list, .month-list { display: grid; gap: 6px; } .schedule-item, .week-item, .month-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--tone, var(--green)); color: var(--ink); cursor: pointer; display: grid; gap: 2px; justify-items: start; padding: 8px 10px; text-align: left; transition: border-color 140ms ease; } .schedule-item[draggable="true"], .week-item[draggable="true"] { cursor: grab; } .schedule-item[draggable="true"]:active, .week-item[draggable="true"]:active { cursor: grabbing; } .schedule-item:hover, .week-item:hover, .month-item:hover { border-color: var(--line-strong); } .schedule-item strong, .week-item strong, .month-item strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; } .schedule-item small, .week-item small, .month-item small { color: var(--faint); font-size: 11px; } .item-tag { color: var(--tone, var(--green)); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .item-recurrence { color: var(--purple); font-size: 10px; font-style: normal; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; } .month-summary { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(130px, 1fr)); } .month-summary span { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 1px; padding: 9px 11px; } .month-summary strong { font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 650; } .month-summary em { color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 550; } .month-summary small { color: var(--faint); font-size: 10.5px; } .month-grid { display: grid; gap: 6px; grid-template-columns: repeat(7, minmax(118px, 1fr)); overflow-x: auto; } .month-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; align-content: start; gap: 6px; min-height: 96px; padding: 8px; } .month-day.muted-day { background: transparent; opacity: 0.45; } .month-day.is-today { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .month-day header { align-items: center; display: flex; justify-content: space-between; } .month-day header span { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 600; } .month-day header strong { color: var(--accent); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ------------------------------------------------ website maintenance */ .maintenance-heading, .maintenance-toolbar, .maintenance-week-header, .maintenance-roster > header, .maintenance-unscheduled > header { align-items: center; display: flex; gap: 12px; justify-content: space-between; } .maintenance-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; } .maintenance-actions .icon { min-height: 34px; width: 34px; } .maintenance-actions input[type="month"] { width: 148px; } .maintenance-summary { display: grid; gap: 8px; grid-template-columns: repeat(6, minmax(108px, 1fr)); } .maintenance-summary span { border-left: 2px solid var(--line-strong); display: grid; gap: 2px; min-width: 0; padding: 4px 10px; } .maintenance-summary span:nth-child(3) { border-color: var(--green); } .maintenance-summary span:nth-child(4) { border-color: var(--orange); } .maintenance-summary span:nth-child(5) { border-color: var(--blue); } .maintenance-summary span:nth-child(6) { border-color: var(--purple); } .maintenance-summary strong { font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 650; } .maintenance-summary small, .maintenance-sync { color: var(--faint); font-size: 11px; } .maintenance-toolbar { border-bottom: 1px solid var(--line); padding-bottom: 10px; } .maintenance-cycle { display: grid; gap: 14px; } .maintenance-week { display: grid; gap: 7px; } .maintenance-week-header h3, .maintenance-roster h3, .maintenance-unscheduled h3 { font-size: 13px; font-weight: 650; } .maintenance-week-header span, .maintenance-roster > header > span, .maintenance-unscheduled > header > span { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; } .maintenance-week-days { display: grid; gap: 7px; grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; } .maintenance-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 116px; padding: 8px; transition: background 140ms ease, border-color 140ms ease; } .maintenance-day.drag-over { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .maintenance-day.is-today { border-color: color-mix(in srgb, var(--accent) 44%, transparent); } .maintenance-day > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 7px; } .maintenance-day > header div { align-items: baseline; display: flex; gap: 5px; } .maintenance-day > header strong { font-size: 11.5px; font-weight: 650; } .maintenance-day > header span, .maintenance-day > header em { color: var(--faint); font-size: 10.5px; font-style: normal; } .maintenance-day-list { display: grid; gap: 6px; } .maintenance-card { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); color: var(--ink); cursor: grab; display: grid; gap: 3px; min-width: 0; padding: 8px; text-align: left; width: 100%; } .maintenance-card:hover { border-color: var(--line-strong); border-left-color: var(--blue); } .maintenance-card.status-complete { border-left-color: var(--green); opacity: 0.72; } .maintenance-card.status-needs-attention, .maintenance-card.result-watch { border-left-color: var(--orange); } .maintenance-card.result-blocked { border-left-color: var(--red); } .maintenance-card-topline { align-items: center; display: flex; justify-content: space-between; } .maintenance-card-topline em, .maintenance-card-topline i { color: var(--faint); font-size: 9px; font-style: normal; font-weight: 650; text-transform: uppercase; } .maintenance-card strong { font-size: 11.5px; line-height: 1.25; overflow-wrap: anywhere; } .maintenance-card small { color: var(--faint); font-size: 10px; } .maintenance-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); display: grid; gap: 7px; justify-items: start; padding: 24px; } .maintenance-empty p, .maintenance-roster p { color: var(--faint); font-size: 12px; } .maintenance-roster, .maintenance-unscheduled { display: grid; gap: 10px; } .maintenance-roster-grid { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .maintenance-project-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--purple); border-radius: var(--radius-sm); color: var(--ink); display: grid; overflow: hidden; padding: 0; text-align: left; } .maintenance-project-card:hover { border-color: var(--line-strong); border-left-color: var(--purple); } .maintenance-project-card.lane-active-build { border-left-color: var(--blue); } .maintenance-project-card.lane-hosting { border-left-color: var(--cyan); } .maintenance-project-card.lane-excluded { border-left-color: var(--faint); opacity: 0.65; } .maintenance-project-card.is-removed { border-left-color: var(--orange); } .maintenance-project-card.lane-active-build:hover { border-left-color: var(--blue); } .maintenance-project-card.lane-hosting:hover { border-left-color: var(--cyan); } .maintenance-project-card.lane-excluded:hover { border-left-color: var(--faint); } .maintenance-project-card.is-removed:hover { border-left-color: var(--orange); } .maintenance-project-card.missing { border-left-color: var(--orange); gap: 4px; padding: 11px; } .maintenance-project-card-main { background: transparent; border: 0; border-radius: 0; color: inherit; display: grid; gap: 4px; min-height: 0; padding: 11px; text-align: left; width: 100%; } .maintenance-project-card-main:hover { background: var(--surface-2); } .maintenance-project-card .maintenance-project-restore { background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--line); color: var(--accent); font-size: 10.5px; justify-content: flex-start; min-height: 34px; padding: 7px 11px; width: 100%; } .maintenance-project-card .maintenance-project-restore:hover { background: var(--accent-soft); color: var(--accent-strong); } .maintenance-review-groups { display: grid; gap: 16px; } .maintenance-project-card span { color: var(--faint); font-size: 9.5px; font-weight: 650; text-transform: uppercase; } .maintenance-project-card strong { font-size: 12.5px; } .maintenance-project-card small { color: var(--faint); font-size: 10.5px; overflow-wrap: anywhere; } .maintenance-links { display: flex; gap: 8px; } .maintenance-links a { color: var(--accent); font-size: 11.5px; font-weight: 600; } .maintenance-removal-note { border-left: 2px solid var(--line-strong); color: var(--faint); font-size: 10.5px; line-height: 1.5; padding-left: 9px; } .form-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .maintenance-checklist-section { display: grid; gap: 6px; } .maintenance-checklist { border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 1px; padding: 6px 10px; } .maintenance-checklist label { align-items: center; color: var(--ink); cursor: pointer; display: grid; font-size: 12px; font-weight: 450; gap: 8px; grid-template-columns: 16px 1fr; padding: 6px 0; } .maintenance-checklist input { accent-color: var(--green); min-height: 0; width: 15px; } .project-dialog { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--drawer-shadow); color: var(--ink); padding: 0; width: min(520px, calc(100vw - 24px)); } .project-dialog::backdrop { backdrop-filter: blur(2px); background: rgba(2, 2, 4, 0.62); } .project-dialog form { display: grid; } .dialog-heading, .dialog-actions { align-items: center; display: flex; justify-content: space-between; padding: 16px 18px; } .dialog-heading { border-bottom: 1px solid var(--line); } .dialog-heading h2 { font-size: 17px; margin-top: 2px; } .dialog-body { display: grid; gap: 12px; padding: 18px; } .dialog-actions { border-top: 1px solid var(--line); justify-content: flex-end; gap: 8px; } .dialog-spacer { flex: 1; } /* --------------------------------------------------------------- drawer */ .drawer { inset: 0; pointer-events: none; position: fixed; z-index: 10; } .drawer.open { pointer-events: auto; } .drawer-backdrop { backdrop-filter: blur(2px); background: rgba(2, 2, 4, 0.55); inset: 0; opacity: 0; position: absolute; transition: opacity 180ms ease; } .drawer.open .drawer-backdrop { opacity: 1; } .drawer-panel { background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--drawer-shadow); display: flex; flex-direction: column; gap: 14px; height: 100%; margin-left: auto; overflow-y: auto; padding: 18px 20px 0; position: relative; transform: translateX(24px); opacity: 0; transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease; width: min(520px, 100%); } .drawer.open .drawer-panel { opacity: 1; transform: translateX(0); } .drawer-header { align-items: start; display: flex; gap: 10px; justify-content: space-between; } .drawer-header h2 { font-size: 17px; font-weight: 650; line-height: 1.25; margin-top: 2px; } .field-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .drawer-field { display: grid; gap: 5px; } .drawer-field-label { color: var(--muted); font-size: 12px; font-weight: 550; } .checklist { border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 8px; min-height: 40px; padding: 10px 12px; } .check-item { align-items: center; color: var(--ink); cursor: pointer; display: grid; font-size: 13px; font-weight: 450; gap: 9px; grid-template-columns: 15px 1fr; line-height: 1.35; } .check-item input { accent-color: var(--accent); height: 15px; margin: 0; min-height: 0; width: 15px; } .check-item.done { color: var(--faint); text-decoration: line-through; } .advanced-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .advanced-panel summary { color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; } .advanced-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 12px; } .advanced-grid label:last-child { grid-column: 1 / -1; } .api-preview { background: #050507; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 6px; margin-top: 12px; padding: 12px; } .api-preview code { color: #cdd6e4; display: block; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; overflow-x: auto; white-space: pre; } .drawer-actions { align-items: center; background: var(--surface); border-top: 1px solid var(--line); bottom: 0; display: flex; gap: 8px; justify-content: space-between; margin: auto -20px 0; padding: 12px 20px; position: sticky; } .drawer-actions .primary { min-width: 110px; } /* ----------------------------------------------------------- scrollbars */ ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------------------ responsive */ @media (max-width: 920px) { .login-splash { align-items: flex-end; padding: 24px; } .splash-logo { width: 220px; } .splash-title { font-size: 40px; } body { display: block; } .rail { border-bottom: 1px solid var(--line); border-right: 0; height: auto; position: static; gap: 14px; } .rail-nav { grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr); overflow-x: auto; } .rail-footer { margin-top: 0; } .main { padding: 12px; } .intake-composer, .intake-draft-main, .intake-workspace, .settings-add { grid-template-columns: 1fr; } .intake-workspace { min-height: 0; } .intake-message { max-width: 100%; } .intake-composer button { min-height: 42px; } .intake-draft-actions { justify-content: flex-start; } .toolbar { grid-template-columns: 1fr 1fr; } .toolbar input[type="search"] { grid-column: 1 / -1; } .schedule-grid, .week-grid, .month-summary { grid-template-columns: 1fr; } .maintenance-heading, .maintenance-toolbar { align-items: stretch; flex-direction: column; } .maintenance-actions { display: grid; grid-template-columns: 34px minmax(130px, 1fr) 34px; } .maintenance-actions .ghost, .maintenance-actions .primary { grid-column: span 3; } .maintenance-actions input[type="month"] { width: 100%; } .maintenance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maintenance-week-days { grid-template-columns: repeat(5, minmax(170px, 1fr)); } .form-grid { grid-template-columns: 1fr; } .month-grid { grid-template-columns: repeat(7, minmax(96px, 1fr)); } .lane { flex-basis: min(244px, 84vw); } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }