/* home-request.css — styles for home-request.js and hammer.js (SESSIONS-IN-PORTAL, lane L6). * * THIS FILE IS PUBLIC. It carries no internal names, paths or client detail. * * WHY A SEPARATE FILE RATHER THAN shopfront.css. shopfront.css is a shared file this lane may * not edit (L6's brief walls it off, the same reason page-boot.js and flow.css are walled) — * every other lane building against the same brief owns its own slice of the page without * touching another lane's files. This sheet owns exactly the two components this lane owns: * the Home request box (home-request.js) and THE HAMMER's "Sharpened" card (hammer.js, also * mountable from the Sessions composer, lane L5 — its styles live here rather than being * duplicated wherever it is mounted next). * * NO RAW HEX, NO RAW FONT-SIZE WHERE A TOKEN EXISTS (design-tokens.css / theme.css). Every value * below is one of those tokens, chosen to MATCH the values shopfront.css already uses for the * page's own (inert) ask box and dashed drop panel — same border, same radius, same shadow, * same 40px square icon buttons — so this box reads as the same design system, not a second one * beside it. Measured against `lanes/engine/platform-design/00-home.png` and * `09-hammer-interaction.png`. * * NAMING (added at grading, 14/09/2026): every class here is prefixed sf-hr- rather than hr-, so * scripts/test-css-classes-declared.js — which only resolves `sf-*` selectors — actually covers * these two files. See that check's own header for why an undeclared class is a silent fault, * not a build error: the exact failure this prefix change exists to make checkable. */ /* ---------- the request box (home-request.js) ---------- Same shape as shopfront.css's .sf-askbox: 1.5px blue-edge border, 18px radius, the ask-ring shadow. A second, working ask box needs to look like the first one, not invent its own frame. */ .sf-hr-request{max-width:1040px;margin:0 auto 24px} .sf-hr-composer{background:var(--surface);border:1.5px solid var(--sf-blue-edge); border-radius:18px;padding:22px 22px 18px;box-shadow:var(--sf-ask-ring)} .sf-hr-text{display:block;width:100%;resize:vertical;min-height:64px;border:0;outline:0; background:transparent;font:inherit;font-size:var(--sf-fs-page-sub);color:var(--ink); padding:0 0 16px;font-family:var(--sf-font)} .sf-hr-text::placeholder{color:var(--sf-ink-4)} /* pickers: repo / branch / model / mode / effort. Plain selects and a text input, styled as one row of equal, quiet controls — the composer's own words are the loud element on the box, not the settings around them. */ .sf-hr-picker-row{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px; border-bottom:1px solid var(--sf-line-2);margin-bottom:14px} .sf-hr-select{appearance:none;-webkit-appearance:none;border:1px solid var(--border); border-radius:9px;background:var(--surface-2);color:var(--sf-ink-2); font:inherit;font-size:var(--sf-fs-meta);font-weight:600;padding:7px 11px; min-width:0;flex:1 1 130px;transition:border-color var(--sf-t) var(--sf-ease), color var(--sf-t) var(--sf-ease)} .sf-hr-select:hover{border-color:var(--sf-line-strong)} .sf-hr-select:focus-visible{outline:2px solid var(--sf-blue-ring);outline-offset:1px} .sf-hr-select:disabled{color:var(--sf-ink-off);cursor:not-allowed} .sf-hr-attachments{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px} .sf-hr-attachments li{border:1px solid var(--border);border-radius:8px;background:var(--surface-2); color:var(--sf-ink-2);font-size:var(--sf-fs-meta-sm);padding:4px 9px} /* the square icon row: same 40x40 / 11px-radius control shopfront.css already defines for the page's own (inert) ask box — sf-hr-sq mirrors .sf-sq's numbers rather than re-deriving them. */ .sf-hr-composer-foot{display:flex;align-items:center;gap:10px} .sf-hr-sq{width:40px;height:40px;border-radius:11px;border:1px solid var(--border); background:var(--surface);display:flex;align-items:center;justify-content:center; font-size:16px;line-height:1;color:var(--sf-ink-2);flex:none;cursor:pointer; transition:border-color var(--sf-t) var(--sf-ease),background var(--sf-t) var(--sf-ease)} .sf-hr-sq:hover{border-color:var(--sf-line-strong);background:var(--surface-2)} .sf-hr-sq-hammer{margin-left:auto;border-color:var(--sf-blue-edge);color:var(--sf-blue-ink)} .sf-hr-sq-send{background:var(--sf-blue);border-color:var(--sf-blue);color:var(--sf-on-blue)} .sf-hr-sq-send:hover{background:var(--sf-blue);opacity:.92} /* Example prompts (SESSIONS-PRESET-PROMPTS): a wrapping row of quiet chips above the composer. */ .sf-hr-presets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px} .sf-hr-preset{border:1px solid var(--border);background:var(--surface);color:var(--sf-ink-2); border-radius:999px;padding:6px 12px;font-size:13px;line-height:1.2;cursor:pointer; transition:border-color var(--sf-t) var(--sf-ease),background var(--sf-t) var(--sf-ease)} .sf-hr-preset:hover{border-color:var(--sf-blue-edge);color:var(--sf-blue-ink)} .sf-hr-preset[disabled]{opacity:.5;cursor:not-allowed} .sf-hr-note{margin:14px 0 0;text-align:center;color:var(--sf-ink-4);font-size:var(--sf-fs-meta); font-weight:500} /* ---------- R8: the drop zone, without the model step ---------- Same dashed-panel language as shopfront.css's .sf-dashed, so a second drop zone (this one with no "I'll help you find the right home" model step) does not read as a different control. */ .sf-hr-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;text-align:center;border:1.5px dashed var(--sf-line-dashed); border-radius:13px;padding:22px 14px;background:var(--surface)} .sf-hr-dropzone-title{margin:0;font-weight:700;font-size:var(--sf-fs-meta);color:var(--sf-navy)} .sf-hr-dropzone-sub{margin:0;font-size:var(--sf-fs-label);color:var(--mut)} /* ---------- THE HAMMER's "Sharpened" card (hammer.js) ---------- A separate card BELOW the composer, per 09-hammer-interaction.png: white surface, the standard card shadow and radius, a heading, the rewrite, one pale-blue question bubble, two choice pills, and the Keep mine / Use this pair bottom-right. */ .sf-hr-hammer-card{margin-top:14px;max-width:1040px;margin-left:auto;margin-right:auto; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--sf-card-shadow); padding:20px 22px} .sf-hr-hammer-wait{margin:0;color:var(--sf-ink-2);font-size:var(--sf-fs-body);font-weight:600} .sf-hr-hammer-heading{margin:0 0 10px;font-size:var(--sf-fs-title-sm);font-weight:800; letter-spacing:-.01em;color:var(--sf-navy)} .sf-hr-hammer-heading::before{content:"🔨";margin-right:8px} .sf-hr-hammer-rewrite{margin:0 0 14px;color:var(--ink);font-size:var(--sf-fs-body-lg); line-height:1.55} .sf-hr-hammer-question{background:var(--sf-blue-tint);border-radius:12px;padding:12px 14px; margin-bottom:14px} .sf-hr-hammer-question-text{margin:0 0 10px;color:var(--sf-blue-ink);font-size:var(--sf-fs-body); font-weight:600} .sf-hr-hammer-options{display:flex;flex-wrap:wrap;gap:8px} .sf-hr-hammer-option{border:1px solid var(--sf-blue-line);border-radius:9px;background:var(--surface); color:var(--sf-blue-ink);font:inherit;font-size:var(--sf-fs-meta); font-weight:700;padding:7px 13px;cursor:pointer; transition:background var(--sf-t) var(--sf-ease)} .sf-hr-hammer-option:hover{background:var(--sf-blue-soft)} .sf-hr-hammer-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px} .sf-hr-hammer-keep{background:none;border:0;padding:0;color:var(--sf-blue);font:inherit; font-size:var(--sf-fs-body);font-weight:700;cursor:pointer} .sf-hr-hammer-keep:hover{text-decoration:underline} .sf-hr-hammer-use{border:1px solid var(--sf-blue);border-radius:10px;background:var(--sf-blue); color:var(--sf-on-blue);font:inherit;font-size:var(--sf-fs-body); font-weight:700;padding:9px 18px;cursor:pointer; transition:opacity var(--sf-t) var(--sf-ease)} .sf-hr-hammer-use:hover{opacity:.92} @media (max-width:640px){ .sf-hr-composer{padding:16px 16px 14px} .sf-hr-select{flex:1 1 100%} .sf-hr-sq-hammer{margin-left:0} }