Drop UI strokes: shapes come from fill and stipple

- No pen line on the text box, buttons, banner or toast; no dashed
  lines anywhere
- Focus: the stipple shadow deepens; buttons also underline their
  label on keyboard focus
- Secondary button sits on a paper-tone fill

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UQnSw4RRWp8uqpj3nsnnXF

ui/src/style.css

@@ -33,7 +33,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; }
    ::before is the paper and the pen line; ::after is the dot shading. */
 .inked { position: relative; isolation: isolate; background: none; border: 0; }
 .inked::before, .inked::after { content: ""; position: absolute; border-radius: var(--corner); pointer-events: none; }
-.inked::before { inset: 0; z-index: -1; background: var(--card); border: var(--pen); }
+.inked::before { inset: 0; z-index: -1; background: var(--card); } /* no pen line: shape comes from fill and stipple */
 .inked::after {
   inset: 7px -7px -7px 7px; z-index: -2; background: var(--stipple);
   -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 90%);
@@ -51,7 +51,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; }
   margin-left: 6px; width: 140px; padding: 2px 4px; font: 500 18px var(--body); color: var(--ink);
   background: transparent; border: 0; border-bottom: var(--pen);
 }
-.who input:focus { outline: none; border-bottom-style: dashed; }
+.who input:focus { outline: none; border-bottom-width: 3px; }
 
 /* ---------- buttons ---------- */
 .btn {
@@ -62,12 +62,14 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; }
 .btn:active:not(:disabled) { transform: translate(4px, 4px); }
 .btn:active:not(:disabled)::after { opacity: 0; }
 .btn:disabled { cursor: default; color: var(--muted); }
-.btn:disabled::before { background: linear-gradient(rgb(249 245 234 / 0.72), rgb(249 245 234 / 0.72)), var(--stipple-tile) 0 0 / 64px 64px, var(--stipple-tile) 23px 11px / 47px 47px, var(--card); border-style: dashed; }
+.btn:disabled::before { background: linear-gradient(rgb(249 245 234 / 0.72), rgb(249 245 234 / 0.72)), var(--stipple-tile) 0 0 / 64px 64px, var(--stipple-tile) 23px 11px / 47px 47px, var(--card); }
 .btn:disabled::after { opacity: 0; }
-.btn:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 6px; }
+.btn:focus-visible { outline: none; text-decoration: underline 2px; text-underline-offset: 5px; }
+.btn:focus-visible::after, .composer .field:focus-within::after { -webkit-mask-image: none; mask-image: none; }
 .btn-go { color: var(--paper); }
 .btn-go::before { background: var(--ink); }
 .btn-no { color: var(--red); }
+.btn-no::before { background: var(--paper); }
 
 /* ---------- composer ---------- */
 .composer { display: grid; gap: 10px; margin: 8px 0 28px; }
@@ -78,7 +80,6 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; }
   resize: vertical; background: transparent; border: 0;
 }
 .composer textarea:focus { outline: none; }
-.composer .field:focus-within::before { border-style: dashed; }
 
 /* ---------- the perch: an inked branch with stippled underside ---------- */
 .perch {
@@ -173,7 +174,7 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; }
 .card[data-state="asking"] .dot { background: var(--ink); animation: pop 1.2s infinite; }
 .card[data-state="asking"]::after { height: 85%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%); }
 .card[data-state="done"] .dot { background: var(--ink); }
-.card[data-state="rejected"] .dot, .card[data-state="skipped"] .dot { border-style: dashed; }
+.card[data-state="rejected"] .dot, .card[data-state="skipped"] .dot { background: none; }
 .card[data-state="skipped"] .text { text-decoration: line-through; color: var(--muted); }
 
 .chips { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 0 24px; }