/* UNLOOK dashboard: Website (website.js, 3 Nov 2026). The editor is a tool, so quiet lists and few words: the parts on the
   left, the real page in the middle, the chosen part's fields on the right. Without a site from us: a reading page. */
#website .ws-wait{padding:16px}

/* ---- no website from us yet */
#website .ws-ask{display:grid;gap:16px}
#website .ws-ask-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:24px;padding:32px;overflow:hidden}
#website .ws-ask-copy h2{font-size:var(--fs-display,28px);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
#website .ws-ask-copy p{margin-top:10px;max-width:44ch;color:var(--ink-2);font-size:var(--fs-body);line-height:1.55;text-wrap:pretty}
#website .ws-ask-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px;font-size:var(--fs-sm)}
/* a laptop and a phone drawn in the page's own colours: a website, without pretending to be one */
#website .ws-ask-art{position:relative;height:200px}
#website .ws-art-laptop{position:absolute;inset:8px 56px 22px 0;display:grid;grid-template-rows:38% 10px 10px 1fr;gap:8px;padding:14px;border-radius:12px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}
#website .ws-art-laptop i,#website .ws-art-phone i{display:block;border-radius:6px;background:var(--line-2)}
#website .ws-art-laptop i:nth-child(2){width:62%}
#website .ws-art-laptop i:nth-child(3){width:40%}
#website .ws-art-laptop b,#website .ws-art-phone b{display:block;width:84px;height:22px;border-radius:var(--r-pill);background:var(--lime)}
#website .ws-art-laptop::after{content:"";position:absolute;left:-12px;right:-12px;bottom:-12px;height:8px;border-radius:0 0 10px 10px;background:var(--line-2)}
#website .ws-art-phone{position:absolute;right:0;bottom:0;width:96px;height:176px;display:grid;grid-template-rows:42% 8px 8px 1fr;gap:7px;align-content:start;padding:10px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-pop)}
#website .ws-art-phone i:nth-child(3){width:70%}
#website .ws-art-phone b{width:56px;height:18px;align-self:end}
#website .ws-gets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1180px){#website .ws-gets{grid-template-columns:repeat(2,minmax(0,1fr))}}
#website .ws-gets li{display:grid;gap:4px;align-content:start;padding:18px}
#website .ws-gets-ic{display:grid;place-items:center;width:32px;height:32px;margin-bottom:6px;border-radius:var(--r-btn);background:var(--raise);color:var(--ink-2)}
#website .ws-gets-ic svg.i{width:16px;height:16px}
#website .ws-gets b{font-size:var(--fs-body);font-weight:500}
#website .ws-gets p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.ws-ask-form{display:grid;gap:16px}
.ws-ask-form textarea.input{height:auto;padding:8px 10px;resize:vertical;line-height:1.5}
.ws-ask-form .btn{justify-self:start}

/* ---- the editor: design A ("Three panes", 3 Nov). One panel with its own header row; the parts, the page and the
   fields are panes in it, split by hairlines; the page sits in a darker well, a sheet that runs off the bottom. The
   panel stops above the Ask UNLOOK button that floats in the corner. */
#website .ws{--ws-well:#070707;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:max(600px,calc(100dvh - 176px));border-radius:14px;background:var(--panel);box-shadow:var(--edge),0 0 0 1px var(--card-line);overflow:hidden}
:root[data-theme="light"] #website .ws{--ws-well:#E6EDEA}
#website .ws-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
#website .ws-who{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto}
#website .ws-site{min-width:0;height:28px;padding:0 8px;border-radius:6px;background:var(--hover);color:var(--ink-2);font-size:13px;font-weight:400;line-height:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#website .ws-live{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13px;color:var(--ink-2);white-space:nowrap}
#website .ws-live i{width:7px;height:7px;border-radius:50%;background:var(--live)}
#website .ws-live i.off{background:var(--ink-4)}
#website .ws-dim{color:var(--ink-3)}
#website .ws-live:has(.ws-addr){flex:0 1 auto;min-width:0}
#website .ws-addr{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--ink-3);text-decoration:none;border-radius:4px}
#website .ws-addr-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#website .ws-addr svg.i{flex:none;width:13px;height:13px}
#website .ws-addr:hover{color:var(--ink)}
#website .ws-addr:hover .ws-addr-t{text-decoration:underline;text-underline-offset:2px}
#website .ws-addr:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#website .ws-acts{display:flex;align-items:center;gap:8px}
#website .ws-state{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);white-space:nowrap}
#website .ws-state:empty{display:none}
#website .ws-state.is-you{color:var(--you-ink)}
#website .ws-state.is-you::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--you-dot)}
#website .ws-bad{display:inline-flex;align-items:center;gap:6px;color:var(--err-ink);white-space:normal}
#website .ws-bad svg{width:14px;height:14px;flex:none}
#website .ws-note{font-size:13px;color:var(--ink-2)}
#website .ws-note:empty{display:none}
/* nothing to publish: "Published" reads as done, not as a button to press */
#website #ws-pub:disabled{background:var(--btn);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2);opacity:1}
#website .ws-body{display:grid;grid-template-columns:240px minmax(0,1fr) 336px;min-height:0}

/* left: pages and parts */
#website .ws-parts{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;padding:12px 8px;border-right:1px solid var(--line)}
#website .ws-h{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 0 0 8px;font-size:12px;color:var(--ink-3)}
#website .ws-h .icon-btn{width:28px;height:28px;color:var(--ink-3)}
#website .ws-h .icon-btn svg.i{width:16px;height:16px}
#website .ws-list+.ws-h{margin-top:20px}
#website .ws-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#website .ws-list li{position:relative;display:flex;align-items:center;border-radius:8px}
#website .ws-row{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;color:var(--ink-2);font-size:14px;text-align:left;transition:background-color var(--duration-quick,120ms) var(--ease-out),color var(--duration-quick,120ms) var(--ease-out)}
#website .ws-plist .ws-row{padding-left:2px}
#website .ws-row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#website span.ws-row.on,#website .ws-row[aria-current]{background:var(--select);color:var(--ink)}
#website .ws-plist li:has(.ws-row[aria-current]){background:var(--select)}
#website .ws-plist .ws-row[aria-current]{background:none}
@media (hover:hover){#website button.ws-row:hover{background:var(--hover);color:var(--ink)}#website .ws-plist li:has(.ws-row:hover){background:var(--hover)}#website .ws-plist .ws-row:hover{background:none}}
#website .is-hidden .ws-row{color:var(--ink-3)}
#website .ws-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--you-dot)}
#website .ws-hid{flex:none;font-size:12px;color:var(--ink-3)}
/* the handle: drag it, or focus it and use the arrow keys */
#website .ws-grip{flex:none;display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;border-radius:6px;background:none;color:var(--ink-4);cursor:grab;touch-action:none}
#website .ws-grip svg.i{width:14px;height:14px}
@media (hover:hover){#website .ws-grip:hover{color:var(--ink-2)}}
#website .ws-grip-sp{flex:none;width:24px}
#website .is-dragging{opacity:.45}
#website .drop-before::before,#website .drop-after::after{content:"";position:absolute;left:6px;right:6px;height:2px;border-radius:2px;background:var(--lime);pointer-events:none}
#website .drop-before::before{top:-2px}
#website .drop-after::after{bottom:-2px}

/* middle: the page itself, in a well */
#website .ws-stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ws-well)}
#website .ws-stage-bar{display:flex;align-items:center;gap:12px;padding:10px 16px}
#website .ws-stage-bar p{margin-right:auto;min-width:0;font-size:12px;color:var(--ink-3)}
#website .ws-size .t-tab svg.i{width:16px;height:16px}
#website .ws-prev svg.i{width:14px;height:14px}
#website .ws-view{position:relative;flex:1;min-height:0;margin:4px 28px 0;border-radius:10px 10px 0 0;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
#website .ws[data-size="phone"] .ws-view{background:transparent;box-shadow:none}
#website .ws-frame{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:0 0}
#website .ws[data-size="phone"] .ws-frame{border-radius:14px 14px 0 0;box-shadow:0 1px 2px rgba(0,0,0,.2)}

/* right: the chosen part */
#website .ws-panel{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--panel)}
#website .ws-ph{display:flex;align-items:center;gap:2px;padding:12px 12px 12px 16px}
#website .ws-ph .grow{min-width:0;margin-right:auto}
#website .ws-ph h2{font-size:16px;font-weight:500;line-height:1.3}
#website .ws-ph p{font-size:12px;color:var(--ink-3)}
#website .ws-ph .icon-btn{color:var(--ink-3)}
#website .ws-close{display:none}
#website .ws-menu{position:relative}
#website .ws-menu-pop{position:absolute;z-index:20;top:calc(100% + 4px);right:0;min-width:220px;display:grid;padding:4px;border-radius:10px;background:var(--card);box-shadow:var(--shadow-pop)}
#website .ws-menu-pop[hidden]{display:none}
#website .ws-menu-pop button{white-space:nowrap;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--ink);font-size:14px;text-align:left}
#website .ws-menu-pop button svg.i{width:16px;height:16px;color:var(--ink-3)}
#website .ws-menu-pop button[disabled]{color:var(--ink-4);cursor:default}
@media (hover:hover){#website .ws-menu-pop button:not([disabled]):hover{background:var(--hover)}}
#website .ws-fields{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 20px;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start}
#website .ws-f{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
#website .ws-l{font-size:12px;color:var(--ink-3)}
#website .ws-l small{color:var(--ink-4)}
#website .ws-l2{margin-top:4px}
#website .ws-fields .input{height:36px;border-radius:8px}
#website .ws-f textarea.input{height:auto;min-height:76px;padding:8px 10px;resize:none;field-sizing:content;line-height:1.5;overflow:hidden}
#website .ws-count{position:absolute;top:0;right:0;font-size:var(--fs-xs,11px);color:var(--ink-3)}
#website .ws-count.over{color:var(--err-ink)}
#website .input.t-err{border-color:var(--err-line);box-shadow:0 0 0 3px var(--err-bg)}
#website .ws-err{font-size:var(--fs-sm);line-height:1.45;color:var(--err-ink)}
/* the layout picker: a small drawing of each, the chosen one ringed */
#website .ws-lays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#website .ws-lay{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--ink-2);font-size:12px;text-align:left}
#website .ws-lay[aria-pressed="true"]{color:var(--ink)}
#website .ws-lay-pic{display:grid;gap:4px;width:100%;height:52px;box-sizing:border-box;padding:9px;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);transition:box-shadow var(--duration-quick,120ms) var(--ease-out)}
@media (hover:hover){#website .ws-lay:hover .ws-lay-pic{box-shadow:inset 0 0 0 1px var(--line-strong)}}
#website .ws-lay[aria-pressed="true"] .ws-lay-pic{box-shadow:inset 0 0 0 2px var(--lime)}
#website .ws-lay-pic i{display:block;min-height:0;border-radius:2px;background:var(--ink-4)}
#website .ws-shape-bigfirst{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr 1fr}
#website .ws-shape-bigfirst .wide{grid-column:span 2;grid-row:span 2}
#website .ws-shape-grid3,#website .ws-shape-grid3big{grid-template-columns:repeat(3,minmax(0,1fr))}
#website .ws-shape-grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
#website .ws-shape-rows2{grid-template-columns:1fr 1fr;align-content:space-between;padding:12px 9px}
#website .ws-shape-rows2 .line{height:3px}
#website .ws-shape-cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
#website .ws-shape-cards3 .card{background:none;box-shadow:inset 0 0 0 1px var(--ink-4);border-radius:3px}
#website .ws-shape-words{display:flex;flex-wrap:wrap;align-content:center;gap:4px}
#website .ws-shape-words i{height:8px}
#website .ws-shape-words .w1{width:46%}#website .ws-shape-words .w2{width:30%}#website .ws-shape-words .w3{width:38%}
#website .ws-shape-list{grid-template-columns:1fr 1fr;align-content:center;gap:5px 8px}
#website .ws-shape-list .dotline{height:3px}
#website .ws-photo{display:grid;gap:8px}
#website .ws-photo img,#website .ws-photo-none{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:8px;object-fit:cover;outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
:root[data-theme="light"] #website .ws-photo img{outline-color:rgba(0,0,0,.1)}
#website .ws-photo-none{display:grid;place-items:center;align-content:center;gap:4px;background:var(--card);color:var(--ink-3);outline:0;box-shadow:inset 0 0 0 1px var(--card-line)}
#website .ws-photo-none svg.i{width:20px;height:20px}
#website .ws-photo-none small{font-size:12px}
#website .ws-photo-acts{display:flex;flex-wrap:wrap;gap:8px}
#website .ws-photo-acts svg.i{width:14px;height:14px}
#website .ws-strs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#website .ws-strs li{display:flex;align-items:flex-start;gap:4px}
#website .ws-strs li>.input{flex:1;min-width:0}
#website .ws-mini{display:flex;flex:none}
#website .ws-mini .icon-btn{color:var(--ink-3)}
/* one row per short line, the buttons in a column of their own so every box is the same width */
#website .ws-strs:not(.is-long) .ws-mini{width:64px;justify-content:flex-end}
/* a paragraph: its number and buttons on one quiet line, the box below at full width */
#website .ws-strs.is-long{gap:14px}
#website .ws-strs.is-long li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
#website .ws-str-h{display:flex;align-items:center;gap:8px;min-height:28px}
#website .ws-str-n{flex:1;min-width:0;font-size:12px;color:var(--ink-3)}
#website .ws-str-h .ws-count{position:static}
#website .ws-str-h .ws-mini .icon-btn{width:28px;height:28px}
#website .ws-str-h .ws-mini svg.i{width:16px;height:16px}
/* a list (people, reviews, services): one card, a row per item with its photo and a second line; a row opens in place */
#website .ws-items{list-style:none;margin:0;padding:0;border-radius:10px;background:var(--card);box-shadow:var(--edge),inset 0 0 0 1px var(--card-line)}
#website .ws-items>li{position:relative}
#website .ws-items>li+li{border-top:1px solid var(--line)}
#website .ws-items>li:first-child .ws-item,#website .ws-items>li:first-child summary{border-radius:10px 10px 0 0}
#website .ws-items>li:last-child .ws-item:not([open]),#website .ws-items>li:last-child .ws-item:not([open]) summary{border-radius:0 0 10px 10px}
#website .ws-items>li:only-child .ws-item:not([open]) summary{border-radius:10px}
#website .ws-item summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 4px 8px 8px;cursor:pointer;list-style:none;font-size:14px}
#website .ws-item summary::-webkit-details-marker{display:none}
#website .ws-item[open] summary{background:var(--select)}
@media (hover:hover){#website .ws-item:not([open]) summary:hover{background:var(--hover)}}
#website .ws-thumb{flex:none;width:40px;height:40px;border-radius:6px;background:var(--raise);overflow:hidden}
#website .ws-thumb img{display:block;width:100%;height:100%;object-fit:cover}
#website .ws-item-tt{display:flex;flex-direction:column;min-width:0}
#website .ws-item-t,#website .ws-item-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#website .ws-item-s{font-size:12px;color:var(--ink-3)}
#website .ws-item summary .ws-grip{margin-left:auto;width:28px;height:32px}
#website .ws-item-b{display:grid;gap:12px;padding:12px 10px}
#website .ws-item-acts{display:flex;flex-wrap:wrap;gap:4px}
#website .ws-item-acts svg.i{width:14px;height:14px}
#website .ws-del{color:var(--err-ink)}
#website .ws-add{justify-self:start;margin-top:2px}
#website .ws-add svg.i{width:16px;height:16px}
/* the Ask box at the foot of the fields: a change the editor can't make, sent to us */
#website .ws-askwrap{padding:12px 16px 16px;border-top:1px solid var(--line)}
#website .ws-askbox{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line)}
#website .ws-askbox:focus-within{box-shadow:inset 0 0 0 1px var(--line-strong)}
#website .ws-askdots{display:flex;gap:3px;flex:none}
#website .ws-askdots i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
#website .ws-ask-in{flex:1;min-width:0;height:32px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;outline:none}
#website .ws-ask-in::placeholder{color:var(--ink-3)}
#website .ws-ask-send{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:var(--lime);color:var(--night)}
#website .ws-ask-send svg.i{width:16px;height:16px}
#website .ws-ask-send:disabled{opacity:.5}
/* earlier versions (a drawer, outside #website) */
.ws-vers .btn{justify-self:start}
.ws-vlist{list-style:none;margin:0;padding:0;display:grid}
.ws-vlist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ws-vlist li:first-child{border-top:0}
.ws-vlist .grow{flex:1;min-width:0;display:grid;gap:2px}
.ws-vlist b{font-weight:500}
.ws-vlist small{font-size:var(--fs-sm)}
.ws-vers{display:flex;flex-direction:column;gap:12px}
.ws-vt{display:flex;align-items:center;gap:8px}

@media (max-width:1280px){#website .ws-body{grid-template-columns:208px minmax(0,1fr) 300px}#website .ws-view{margin-inline:16px}}
/* phones and small tablets: no panel around it; the parts are a row of chips, the page fills the width, a part's fields
   open as a sheet */
@media (max-width:900px){
  #website .ws-ask-hero{grid-template-columns:1fr;padding:24px}
  #website .ws-ask-art{height:170px}
  #website .ws-gets{grid-template-columns:1fr 1fr}
  #website .ws{gap:12px;height:auto;border-radius:0;background:none;box-shadow:none;overflow:visible}
  /* one row on top: the menu button (the part you're on) and Publish; the rest is in the sheet it opens (the owner, 3 Nov:
     the three rows took a third of the phone) */
  #website .ws-top{flex-wrap:nowrap;gap:8px;padding:0;border:0}
  #website .ws-who,#website .ws-top .ws-state,#website .ws-note,#website #ws-undo,#website .ws-top [data-ws-versions]{display:none}
  #website .ws-mbar{display:flex;flex:1;min-width:0;align-items:center;gap:8px;height:var(--h-touch);padding:0 12px 0 10px;border:0;border-radius:var(--r-pill);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
  #website .ws-mbar-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
  #website .ws-mbar .i{flex:none;width:18px;height:18px;color:var(--ink-2)}
  #website .ws-mdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--you-dot)}
  #website .ws-mdot[hidden]{display:none}
  #website .ws-acts{flex:none}
  #website #ws-pub{height:var(--h-touch)}
  #website .ws-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;height:max(440px,calc(100dvh - 150px))}
  /* the sheet: pages and parts with their dots, the site's status on top, Undo and Earlier versions below */
  #website .ws-parts{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:min(80dvh,640px);overflow:auto;padding:8px 12px calc(16px + env(safe-area-inset-bottom));border:0;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--card);box-shadow:var(--shadow-pop);
    transform:translateY(100%);visibility:hidden;transition:transform 260ms cubic-bezier(0.2,0,0,1),visibility 0s linear 260ms}
  #website .ws.parts-open .ws-parts{transform:none;visibility:visible;transition:transform 260ms cubic-bezier(0.2,0,0,1),visibility 0s}
  #website .ws-parts::before{content:"";display:block;width:40px;height:4px;margin:0 auto 8px;border-radius:2px;background:var(--line-strong)}
  #website .ws.parts-open .ws-scrim{display:block;position:fixed;inset:0;z-index:59;background:var(--scrim)}
  #website .ws-sh-top{display:flex;align-items:flex-start;gap:8px;padding:4px 4px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  #website .ws-sh-top .grow{flex:1;min-width:0;display:grid;gap:2px}
  #website .ws-sh-top b{font-weight:600;font-size:var(--fs-body)}
  #website .ws-sh-live{font-size:13px;color:var(--ink-3)}
  #website .ws-sh-state{font-size:13px;color:var(--ink-2)}
  #website .ws-sh-state.is-you{color:var(--you-ink)}
  #website .ws-sh-top .icon-btn{width:var(--h-touch);height:var(--h-touch);margin:-6px -6px 0 0}
  #website .ws-plist .ws-row,#website .ws-parts .ws-list .ws-row{min-height:var(--h-touch)}
  #website .ws-plist .ws-grip,#website .ws-plist .ws-grip-sp{display:none}
  #website .ws-plist .ws-row{padding-left:10px}
  #website .ws-sh-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;margin-top:8px;border-top:1px solid var(--line)}
  #website .ws-sh-acts .btn{flex:1 1 140px;min-height:var(--h-touch)}
  #website .ws-stage{background:none}
  #website .ws-stage-bar{display:none}
  #website .ws-view{margin:0;border-radius:var(--r-card);box-shadow:none}
  #website .ws-panel{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:min(78dvh,640px);border:0;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--card);box-shadow:var(--shadow-pop);padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(100%);visibility:hidden;transition:transform 260ms cubic-bezier(0.2,0,0,1),visibility 0s linear 260ms}
  #website .ws.panel-open .ws-panel{transform:none;visibility:visible;transition:transform 260ms cubic-bezier(0.2,0,0,1),visibility 0s}
  #website .ws-close{display:grid}
  #website .ws-item summary .ws-grip{display:none}
  #website .ws-fields .input,#website .ws-ask-in{height:var(--h-touch);font-size:15px}
  #website .ws-fields textarea.input{height:auto;font-size:15px;line-height:1.45;padding:10px 12px}
  #website .ws-mini .icon-btn,#website .ws-ph .icon-btn{width:var(--h-touch);height:var(--h-touch)}
  #website .ws-l,#website .ws-str-n{font-size:13px}
  #website .ws-strs:not(.is-long) .ws-mini{width:88px}
  #website .ws-str-h .ws-mini{margin-block:-8px}
  #website .ws-str-h .ws-mini .icon-btn{width:var(--h-touch);height:var(--h-touch)}
  #website .ws-ask-send{width:var(--h-touch);height:var(--h-touch)}
}
@media (max-width:560px){#website .ws-gets{grid-template-columns:1fr}#website .ws-ask-art{display:none}}
@media (prefers-reduced-motion:reduce){#website .ws-panel{transition:none!important}}

/* The editor takes the whole screen: the dashboard's top bar (Ask UNLOOK, Answering, account) is hidden while the editor is open,
   and so is the round Ask UNLOOK button, since the editor has its own Ask box (the owner, 3 Nov) */
body[data-view="website"]:has(#website .ws-body) .dock-fab{display:none}
@media (min-width:901px){
  body[data-view="website"]:has(#website .ws-body) .head{display:none}
  body[data-view="website"]:has(#website .ws-body) .content{padding-top:12px;padding-bottom:12px}
  body[data-view="website"] #website .ws{height:max(600px,calc(100dvh - 26px))}
}
@media (max-width:900px){
  body[data-view="website"]:has(#website .ws-body) .head :is(.ask,.tools){display:none}
}

/* before Publish: what goes live, a row per part (a row opens that part) */
.ws-review{display:flex;flex-direction:column;gap:16px}
.ws-rlist{list-style:none;margin:0;padding:0;display:grid}
.ws-rlist li{border-top:1px solid var(--line)}
.ws-rlist li:first-child{border-top:0}
.ws-rrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 4px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.ws-rrow:hover{background:var(--hover)}}
.ws-rrow:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ws-rrow .grow{flex:1;min-width:0;display:grid;gap:2px}
.ws-rrow b{font-weight:500}
.ws-rrow small{font-size:var(--fs-sm)}
.ws-rrow .i{color:var(--ink-3)}
.ws-racts{display:flex;justify-content:flex-end;gap:8px}
/* Redo is Undo's arrow, turned round */
#website .ws-redo .i{scale:-1 1}
#website #ws-undo:disabled,#website #ws-redo:disabled{opacity:.4}
@media (max-width:900px){#website .ws-redo{display:none}}
/* on a phone the handles are hidden, so an item moves with its own Move up / Move down: thumb-sized there */
@media (max-width:900px),(pointer:coarse){#website .ws-item-acts{gap:8px}#website .ws-item-acts .btn{min-height:44px;padding-inline:12px}}
/* the phone's menu bar and the parts sheet's own top and foot exist only on a phone */
#website .ws-mbar,#website .ws-scrim,#website .ws-sh-top,#website .ws-sh-acts{display:none}
@media (max-width:900px){#website .ws-mbar,#website .ws-sh-top,#website .ws-sh-acts{display:flex}}
@media (max-width:359px){#website .ws-pw{display:none}}
@media (prefers-reduced-motion:reduce){#website .ws-parts{transition:none!important}}