/* Website to HTML result (public/website-to-html.js, 2026-10-28), new look like Clone prompt: the
   page's picture in a white card beside what was copied and the actions, then the preview (the
   copy in a frame, scaled to fit) and the code in mono wells with the site's code colours. */
.wh-result{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;scroll-margin-top:84px}
.wh-result>*{min-width:0}
.wh-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:center;padding:20px;border:.8px solid var(--ui-line);border-radius:20px;background:var(--ui-card)}
.wh-shot{display:block;padding:6px;border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-well);overflow:hidden}
.wh-shot img{display:block;width:100%;height:auto;border-radius:11px}
.wh-shot-empty{display:grid;place-items:center;aspect-ratio:16/10;font:500 13px var(--ui-mono);color:var(--ui-faint)}
.wh-kicker{margin:0 0 10px;font:400 12px/1.4 var(--ui-mono);color:var(--ui-faint)}
.wh-info h2{margin:0 0 8px;font-size:30px;line-height:1.15;font-weight:500;letter-spacing:-.03em;overflow-wrap:anywhere}
.wh-facts{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--ui-dim)}
.wh-actions{display:flex;flex-wrap:wrap;gap:8px}
.wh-actions .ft-btn svg{width:16px;height:16px}
/* Check again is a round icon pill (with its tooltip), so the four actions keep one row. */
.wh-actions .wh-round{flex:none;width:40px;padding:0}
.wh-zip-note{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--ui-accent-soft);font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.wh-small{margin:14px 0 0;padding:12px 0 0;border-top:.8px solid var(--ui-line);font-size:13.5px;line-height:1.55;color:var(--ui-dim)}
/* Preview and code: the same grey well with a bar on top, like the prompt on Clone prompt. */
.wh-box{position:relative;padding:6px;border:.8px solid var(--ui-line);border-radius:20px;background:var(--ui-well)}
.wh-bar{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px 0 12px}
.wh-file{font:500 12.5px var(--ui-mono);color:var(--ui-text)}
.wh-count{margin-right:auto;font:400 12px var(--ui-mono);color:var(--ui-faint)}
.wh-bar .ft-btn svg{width:14px;height:14px}
.wh-bar .ft-seg{flex:none}
.wh-stage{position:relative;aspect-ratio:16/10;border:.8px solid var(--ui-line);border-radius:14px;background:#fff;overflow:hidden}
.wh-stage.is-phone{background:var(--ui-card)}
.wh-stage iframe{position:absolute;top:0;left:0;display:block;border:0;background:#fff;transform-origin:0 0}
.wh-stage.is-phone iframe{border-right:.8px solid var(--ui-line);border-left:.8px solid var(--ui-line)}
/* Files as tabs: the open one is lavender with a purple edge, like a chosen tool. */
.wh-tabs{display:flex;gap:6px;margin-right:auto}
.wh-tabs button{box-sizing:border-box;height:32px;margin:0;padding:0 12px;border:.8px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-dim);font:500 12.5px/1 var(--ui-mono);cursor:pointer;transition:border-color .15s,color .15s}
.wh-tabs button:hover{color:var(--ui-text);border-color:var(--ui-btn2-line)}
.wh-tabs button[aria-selected=true]{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-link)}
.wh-tabs button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.wh-code .wh-count{margin-right:0}
.wh-text{max-height:600px;margin:0;padding:18px 22px;border:.8px solid var(--ui-line);border-radius:14px;background:var(--ui-card);overflow:auto;font:400 12.5px/1.7 var(--ui-mono);white-space:pre;tab-size:2;overscroll-behavior:contain}
.wh-text:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.wh-cut{margin:10px 8px 4px;font:400 12px/1.5 var(--ui-mono);color:var(--ui-faint)}
@media (max-width:860px){.wh-head{grid-template-columns:minmax(0,1fr);gap:20px;padding:14px}}
@media (max-width:600px){
  .wh-info h2{font-size:24px}
  .wh-actions{flex-wrap:nowrap}
  .wh-actions .ft-btn-primary{flex:1 1 auto;min-width:0}
  .wh-actions .ft-btn:not(.ft-btn-primary){flex:none;width:40px;padding:0}
  /* Phones: Download ZIP and Check again; each file's Copy is on the code panel (two copy icons read the same). */
  .wh-actions [data-copy]{display:none}
  .wh-sm-hide{display:none}
  .wh-preview .wh-count{display:none}
  .wh-bar{gap:8px;padding:0 2px 0 6px}
  .wh-preview .wh-bar{justify-content:space-between}
  .wh-code .wh-count{display:none}
  .wh-stage{aspect-ratio:3/4}
  .wh-text{max-height:420px;padding:14px;font-size:11.5px}
}