/* A small note passed into the board: handwritten prompts, typed entries,
   warm shared post-its, and lined paper. Form behavior lives in suggest.js. */
:root { color-scheme:light; }
* { box-sizing:border-box; }
[hidden], .suggest-trap { display:none !important; }
body { margin:0; min-width:280px; background:var(--su-bg); color:var(--su-ink); font-family:var(--su-body); line-height:1.55; }
a { color:var(--su-ink); text-decoration-color:var(--su-orange); text-underline-offset:.2em; }
button, input, textarea { font:inherit; }
button, a, input, textarea, summary { -webkit-tap-highlight-color:rgba(194,85,47,.12); }
:focus-visible { outline:3px solid var(--su-orange); outline-offset:4px; }
.suggest-wrap { width:min(100%,760px); margin:0 auto; padding:16px 16px 28px; }
.suggest-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; }
.suggest-brand { display:inline-flex; align-items:center; gap:5px; min-height:44px; color:var(--su-ink); font-family:var(--su-hand); font-size:19px; line-height:1.2; text-decoration:none; overflow-wrap:anywhere; }
.suggest-brand::before { content:'★'; color:var(--su-orange); font-size:18px; }
.suggest-back { flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; font-family:var(--su-hand); font-size:17px; gap:5px; }
.suggest-paper { position:relative; isolation:isolate; padding:27px 20px 24px 28px; }
.suggest-paper::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,transparent 15px,rgba(194,85,47,.25) 15px,rgba(194,85,47,.25) 16px,transparent 16px),repeating-linear-gradient(180deg,transparent 0 27px,rgba(99,133,169,.13) 27px 28px),var(--su-paper); clip-path:polygon(.3% .3%,99.5% 0,100% 99.5%,.1% 100%); box-shadow:3px 6px 18px rgba(42,33,24,.13); }
.suggest-paper::before { content:''; position:absolute; width:106px; height:25px; top:-11px; left:calc(50% - 53px); background:var(--su-tape); transform:rotate(-4deg); clip-path:polygon(2% 0,100% 5%,98% 100%,0 94%); pointer-events:none; }
.suggest-kicker { font-family:var(--su-hand); font-size:20px; color:var(--su-muted); margin:0 0 3px; }
h1 { font-family:var(--su-hand); font-size:clamp(40px,10vw,56px); font-weight:400; line-height:1.1; letter-spacing:-.025em; margin:0 0 16px; }
.suggest-intro { font-size:16px; margin:0 0 28px; max-width:53ch; }
.suggest-field { margin-bottom:23px; }
.suggest-field label { display:block; font-family:var(--su-hand); font-size:24px; line-height:1.2; font-weight:400; margin:0 0 9px; }
.suggest-optional { display:inline-block; color:var(--su-muted); font-family:var(--su-body); font-size:12px; font-weight:400; margin-left:5px; }
.suggest-hint { color:var(--su-muted); font-size:13px; line-height:1.5; margin:6px 0 10px; }
.suggest-field input, .suggest-field textarea { display:block; width:100%; min-height:48px; padding:11px 12px; color:var(--su-ink); background:var(--su-paper); border:1px solid var(--su-muted); border-bottom-width:2px; border-radius:1px; font-family:var(--su-body); font-size:16px; }
.suggest-field textarea { resize:vertical; min-height:104px; line-height:1.6; }
.suggest-field input::placeholder { color:var(--su-muted); opacity:1; }
.suggest-field [aria-invalid='true'] { border-color:var(--su-orange); }
.suggest-privacy { color:var(--su-muted); font-size:13px; margin:0 0 20px; }
.suggest-submit { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:48px; padding:10px 20px; border:0; border-radius:1px; background:var(--su-yellow-paper); color:var(--su-ink); cursor:pointer; text-decoration:none; font-family:var(--su-hand); font-size:23px; font-weight:400; box-shadow:2px 4px 8px rgba(42,33,24,.18); transform:rotate(-1deg); transition:transform .15s,box-shadow .15s; }
.suggest-submit:hover:not(:disabled) { transform:rotate(0) translateY(-2px); box-shadow:3px 6px 12px rgba(42,33,24,.2); }
.suggest-submit:active:not(:disabled) { transform:rotate(0) translateY(1px); }
.suggest-submit:disabled { cursor:not-allowed; opacity:1; }
.suggest-status { margin:16px 0 0; font-size:14px; color:var(--su-muted); }
.suggest-status[data-state='error'] { color:var(--su-ink); border-left:3px solid var(--su-orange); padding-left:10px; }
.suggest-status:empty { display:none; }
.suggest-checks { margin-top:28px; padding-top:14px; border-top:1px dashed var(--su-muted); color:var(--su-muted); font-size:14px; }
.suggest-checks summary { cursor:pointer; min-height:44px; padding:8px 0; font-family:var(--su-hand); font-size:21px; color:var(--su-ink); }
.suggest-checks p { margin:8px 0 0; }
.suggest-receipt h2 { margin:0 0 16px; font-family:var(--su-hand); font-weight:400; font-size:34px; line-height:1.2; }
.suggest-receipt p { max-width:52ch; }
.suggest-receipt-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:25px 0; }
.suggest-text-button { min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--su-ink); font-family:var(--su-hand); font-size:20px; text-decoration:underline; text-decoration-color:var(--su-orange); text-underline-offset:.2em; cursor:pointer; }
.suggest-footer { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:16px; color:var(--su-muted); font-family:var(--su-hand); font-size:17px; }
.suggest-footer a { display:inline-flex; align-items:center; min-height:44px; }
@media(min-width:640px) { .suggest-wrap { padding:24px 32px 40px; } .suggest-header { margin-bottom:32px; } .suggest-brand { font-size:25px; } .suggest-back { font-size:20px; } .suggest-paper { padding:34px 40px 28px 48px; } .suggest-paper::after { background-position:16px 0,0 0,0 0; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }