style: sharpen buildpulse mobile edges

package.json

@@ -1,7 +1,7 @@
 {
   "name": "buildpulse",
   "private": true,
-  "version": "0.4.4",
+  "version": "0.4.5",
   "type": "module",
   "scripts": {
     "api": "node --env-file=../.env server/index.mjs",

src/App.tsx

@@ -1580,7 +1580,7 @@ function App() {
     <div className="app-shell">
       <header className="mobile-shell-header card">
         <div>
-          <p className="eyebrow">BuildPulse v0.4.4</p>
+          <p className="eyebrow">BuildPulse v0.4.5</p>
           <h1>BuildPulse</h1>
           <p className="hero-goal compact-goal">
             <strong>Current goal:</strong> {appState.project.current_goal || 'Classify new ideas before they become work.'}

src/index.css

@@ -2870,3 +2870,242 @@ select {
     width: 100%;
   }
 }
+
+/* v0.4.5 — sharper, uneven mobile surfaces. Kill the capsule SaaS softness. */
+:root {
+  --edge-cut-sm: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
+  --edge-cut-md: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
+  --edge-snag-left: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
+  --edge-snag-right: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
+}
+
+.card,
+.hero-card,
+.focus-panel,
+.item-card,
+.markdown-card,
+.editor-sheet,
+.triage-modal,
+.top-status-row,
+.tab-bar,
+.tab,
+.primary-triage-button,
+button.primary,
+button:not(.ghost):not(.tab),
+button.ghost,
+.import-label,
+input,
+textarea,
+select,
+.today-command-drawer,
+.drawer-command,
+.result-progress-strip {
+  border-radius: 2px;
+}
+
+.pill,
+.tap-chip {
+  border-radius: 1px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.card,
+.focus-panel,
+.item-card,
+.editor-sheet,
+.triage-modal,
+.today-command-drawer,
+.result-progress-strip {
+  clip-path: var(--edge-cut-sm);
+}
+
+.item-card:nth-child(2n),
+.feature-column-details:nth-child(2n),
+.focus-panel:nth-child(2n) {
+  clip-path: var(--edge-snag-left);
+}
+
+.item-card:nth-child(3n),
+.feature-column-details:nth-child(3n),
+.focus-panel:nth-child(3n) {
+  clip-path: var(--edge-snag-right);
+}
+
+.primary-triage-button,
+button.primary,
+.drawer-command.primary {
+  clip-path: var(--edge-cut-md);
+  background: linear-gradient(135deg, #f8fbff 0%, #bfdbfe 72%, #7dd3fc 100%);
+}
+
+button.ghost,
+.drawer-command {
+  clip-path: var(--edge-cut-sm);
+}
+
+.tab-bar {
+  clip-path: none;
+}
+
+.tab.active {
+  clip-path: var(--edge-cut-sm);
+}
+
+@media (max-width: 760px) {
+  body {
+    background:
+      linear-gradient(180deg, rgba(12, 16, 27, 0.9), rgba(4, 7, 13, 1) 38%),
+      #04070d;
+  }
+
+  .mobile-shell-header.card,
+  .today-card.card {
+    clip-path: none;
+  }
+
+  .top-status-row,
+  .today-command-bar button,
+  .today-command-drawer,
+  .today-focus-card,
+  .today-release-card,
+  .today-decision-card,
+  .feature-column-details.card,
+  .item-card,
+  .editor-sheet,
+  .triage-modal,
+  .result-progress-strip {
+    border-radius: 0;
+  }
+
+  .top-status-row,
+  .today-command-drawer,
+  .item-card,
+  .result-progress-strip {
+    clip-path: var(--edge-cut-sm);
+  }
+
+  .today-primary-command {
+    clip-path: var(--edge-cut-md);
+  }
+
+  .today-drawer-toggle {
+    clip-path: var(--edge-snag-right);
+  }
+
+  .feature-column-details.card {
+    padding-block: 0.48rem;
+  }
+
+  .feature-column-details:not([open]) {
+    min-height: 0;
+    padding: 0.48rem 0.15rem;
+  }
+
+  .feature-column-details:not([open]) .column-header {
+    min-height: 2.35rem;
+  }
+
+  .feature-column-details[open] {
+    border-left: 2px solid rgba(125, 211, 252, 0.42);
+    padding-left: 0.45rem;
+  }
+
+  .item-card {
+    background: rgba(18, 25, 42, 0.92);
+    border-color: rgba(203, 213, 225, 0.18);
+  }
+
+  .section-heading p,
+  .item-card p,
+  .focus-panel p,
+  .tap-hint,
+  small {
+    color: #b7c4d8;
+  }
+
+  .feature-signal-row span:last-child {
+    color: #dbeafe;
+    text-decoration: underline;
+    text-underline-offset: 0.18em;
+  }
+}
+
+/* v0.4.5a — contrast repair after the angular pass. Edgy should not mean illegible. */
+@media (max-width: 760px) {
+  .simplified-feature-card,
+  .compact-feature-card {
+    color: #edf5ff;
+  }
+
+  .simplified-feature-card .item-card-header strong,
+  .compact-feature-card .item-card-header strong {
+    color: #ffffff;
+  }
+
+  .simplified-feature-card .pill,
+  .compact-feature-card .pill,
+  .focus-badges .pill {
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    background: rgba(15, 23, 42, 0.86);
+    color: #eef6ff;
+  }
+
+  .simplified-feature-card .pill.must,
+  .compact-feature-card .pill.must {
+    border-color: rgba(125, 211, 252, 0.52);
+    background: rgba(14, 165, 233, 0.2);
+    color: #e0f7ff;
+  }
+
+  .feature-signal-row,
+  .simplified-feature-card .feature-signal-row {
+    color: #cbd7e8;
+  }
+
+  .feature-signal-row span:last-child {
+    color: #ffffff;
+    font-weight: 900;
+  }
+}
+
+/* v0.4.5b — force readable ink on the bright active feature slab. */
+@media (max-width: 760px) {
+  .item-card.simplified-feature-card,
+  .item-card.compact-feature-card {
+    background: rgba(8, 13, 24, 0.96);
+    border-color: rgba(125, 211, 252, 0.34);
+  }
+
+  .item-card.simplified-feature-card p,
+  .item-card.compact-feature-card p,
+  .item-card.simplified-feature-card small,
+  .item-card.compact-feature-card small {
+    color: #d8e4f4;
+  }
+
+  .item-card.simplified-feature-card .feature-signal-row,
+  .item-card.compact-feature-card .feature-signal-row {
+    color: #d8e4f4;
+  }
+
+  .item-card.simplified-feature-card .feature-signal-row span,
+  .item-card.compact-feature-card .feature-signal-row span {
+    color: #d8e4f4;
+  }
+
+  .item-card.simplified-feature-card .feature-signal-row span:last-child,
+  .item-card.compact-feature-card .feature-signal-row span:last-child {
+    color: #ffffff;
+  }
+}
+
+/* v0.4.5c — beat the global button skin on tappable feature cards. */
+@media (max-width: 760px) {
+  button.item-card.simplified-feature-card,
+  button.item-card.compact-feature-card {
+    background: rgba(8, 13, 24, 0.96);
+    color: #edf5ff;
+    border: 1px solid rgba(125, 211, 252, 0.34);
+  }
+}