/* Kind Words, the builder. A dense
   dark panel of small labels and hairlines on the left, the section on a plain white page as the one bright
   thing on screen. Soft corners, round switches and handles, the same as the Kind Words panel. Aqua marks only what is
   picked, and Copy code is the one solid white button. Flat, no shadows. */
@font-face{font-family:'Satoshi';src:url(fonts/satoshi-500.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Satoshi';src:url(fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Satoshi';src:url(fonts/satoshi-900.woff2) format('woff2');font-weight:900;font-display:block}
:root{--bg:#0E0E0E;--panel:#121212;--field:#1B1B1B;--line:#242424;--line2:#333;--text:#EDEDEA;--dim:#8E8E8A;--faint:#5E5E5B;--aqua:#2EDBCF;--ink:#0D0D0D;--out:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:500 13px/1.4 'Satoshi',system-ui,sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden;color-scheme:dark}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--aqua);outline-offset:1px}

/* ---------- top ---------- */
.top{flex:none;height:52px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 12px 0 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.lead{justify-self:start;display:flex;align-items:center;gap:24px;min-width:0}
.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
/* the way out of the builder, to the Kind Words home page and its support page */
.links{display:flex;align-items:center;gap:18px}
.links a{color:var(--dim);text-decoration:none;font:500 13px/1 'Satoshi';white-space:nowrap;transition:color .15s}
.links a:hover{color:var(--text)}
.brand[href]:hover .wm{text-decoration:underline;text-underline-offset:3px}
.mk{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--aqua);color:var(--ink);font:900 11.5px/1 'Satoshi';letter-spacing:-.06em}
.wm{font:700 14px/1 'Satoshi';letter-spacing:-.01em}
.device{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.device button{width:34px;height:28px;display:grid;place-items:center;color:var(--faint);transition:color .15s,background-color .15s}
.device button+button{border-left:1px solid var(--line2)}
.device button:hover{color:var(--text)}
.device button[aria-checked="true"]{background:var(--line2);color:var(--text)}
.device svg{width:16px;height:16px;fill:currentColor}
.acts{justify-self:end;display:flex;align-items:center;gap:8px}
.ic{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--dim);transition:color .15s,background-color .15s}
.ic:hover{color:var(--text);background:var(--field)}
.ic:disabled{color:var(--faint);opacity:.45;pointer-events:none}
.ic svg{width:16px;height:16px;fill:currentColor}
.sep{width:1px;height:20px;background:var(--line2);margin:0 4px}
.btn{height:32px;padding:0 14px;text-align:center;border-radius:8px;background:#fff;color:var(--ink);font:500 13px/1 'Satoshi';white-space:nowrap;transition:background-color .15s}
.btn:hover{background:#E4E4E0}
.btn.alt{background:none;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.alt:hover{background:var(--field)}
.btn[aria-busy="true"]{opacity:.55;pointer-events:none}
.btn:disabled{opacity:.4;pointer-events:none}

/* ---------- panel ---------- */
.work{flex:1;min-height:0;display:flex}
.panel{flex:none;width:312px;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line)}
.tabs{flex:none;display:grid;grid-template-columns:1fr 1.7fr;border-bottom:1px solid var(--line)}
.tabs .count{white-space:nowrap}
.tabs button{height:42px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--dim);font:500 13px/1 'Satoshi';box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--aqua)}
.pane{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333 transparent}
.panel section{padding:16px;border-bottom:1px solid var(--line)}
.panel h2{font:700 12.5px/1.2 'Satoshi';letter-spacing:0;color:var(--text);margin-bottom:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row h2{margin-bottom:0}
.note{margin-top:10px;font-size:12px;line-height:1.45;color:var(--dim)}
.note.lead{margin:0 0 12px}
#who .note.lead{margin:16px 16px 4px}

/* the fine settings under each group. Each sits on its own row and is only there where it changes something */
.more{display:grid;gap:14px}
.more:not(:empty){margin-top:16px}
.ctl[hidden]{display:none}
.lb{color:var(--text)}
.sl{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:8px;cursor:pointer}
.sl output{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.sl input{grid-column:1/-1}
input[type=range]{--p:0%;appearance:none;-webkit-appearance:none;width:100%;height:16px;margin:0;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--aqua) var(--p),var(--line2) var(--p))}
input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--aqua) var(--p),var(--line2) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;background:var(--text);border:0;transition:transform .15s var(--out)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--text);border:0;border-radius:50%}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
input[type=range]:focus-visible{outline:1px solid var(--aqua);outline-offset:3px}
.ctl>.lb{display:block;margin-bottom:8px}
.seg{display:flex;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2)}
.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0}
.seg button{flex:1;height:28px;color:var(--dim);font:500 12.5px/1 'Satoshi';transition:color .15s,box-shadow .15s}
.seg button+button{box-shadow:inset 1px 0 0 var(--line2)}
.seg button:hover{color:var(--text)}
.seg button[aria-checked="true"]{color:var(--text);box-shadow:inset 0 0 0 1px var(--aqua)}
.ctl .color{margin-top:0}
.ctl:has(>.color){display:flex;align-items:center;justify-content:space-between;gap:12px}
.tf{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* layouts and cards, a small drawing of each with its name */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:6px 6px 8px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);font:500 12px/1 'Satoshi';text-align:center;transition:box-shadow .15s,color .15s}
.tile:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.tile svg{display:block;width:100%;height:auto;border-radius:6px;background:var(--field)}
.tile svg .a{fill:#3A3A38}.tile svg .b{fill:#5A5A57}.tile svg .l{fill:none;stroke:#3A3A38;stroke-width:1}
.tile[aria-checked="true"]{color:var(--text);box-shadow:inset 0 0 0 1px var(--aqua)}
.tile[aria-checked="true"] svg .a{fill:#8E8E8A}.tile[aria-checked="true"] svg .b{fill:var(--aqua)}.tile[aria-checked="true"] svg .l{stroke:#8E8E8A}

/* brand color, a swatch and its hex in one field */
.color{display:flex;height:28px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line2);background:var(--field)}
.well{position:relative;flex:none;width:28px;height:28px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.well input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.hex{width:84px;padding:0 10px;border:0;background:none;font:500 12.5px/1 ui-monospace,'SF Mono',Menlo,monospace;text-transform:uppercase;color:var(--text)}
.hex:focus{outline:0}
.color:focus-within{box-shadow:inset 0 0 0 1px var(--aqua)}
.hex[aria-invalid="true"]{color:#FF7A5C}

/* the same six colors the website offers, one press each */
.sws{display:flex;gap:6px;margin-top:10px}
.sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);outline:1px solid transparent;outline-offset:2px;transition:outline-color .15s}
.sw:hover{outline-color:var(--line2)}
.sw[aria-checked="true"]{outline-color:var(--aqua)}

/* on and off, a small round switch */
.toggles{display:grid;gap:2px}
.tg{display:flex;align-items:center;justify-content:space-between;gap:12px;height:30px;color:var(--text);cursor:pointer}
.tg input{appearance:none;flex:none;width:28px;height:16px;border-radius:8px;background:var(--line2);position:relative;cursor:pointer;transition:background-color .15s}
.tg input:after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--dim);transition:transform .2s var(--out),background-color .15s}
.tg input:checked{background:var(--aqua)}
.tg input:checked:after{transform:translateX(12px);background:var(--ink)}
.field{width:150px;height:28px;padding:0 10px;border:0;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2);background:var(--field);font:500 12.5px/1 'Satoshi'}
.field:focus{outline:0;box-shadow:inset 0 0 0 1px var(--aqua)}

/* who is in it. Drag the handle to reorder, the eye to leave someone out */
.count{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.people{list-style:none;margin:8px 8px 24px}
.person{display:flex;align-items:center;gap:8px;height:44px;padding:0 4px 0 2px;border-radius:8px;background:var(--panel);transition:background-color .12s}
.person:hover{background:var(--field)}
.grip{flex:none;width:18px;height:28px;display:grid;place-items:center;color:var(--faint);cursor:grab;touch-action:none;opacity:0;transition:opacity .12s}
.person:hover .grip,.grip:focus-visible{opacity:1}
.grip svg{width:14px;height:14px;fill:currentColor}
.person img,.person .ph{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 22%;background:var(--line2);filter:grayscale(1)}
.person .ph{display:grid;place-items:center;font:700 12px/1 'Satoshi';color:var(--dim)}
.person span{flex:1;min-width:0}
.person b{display:block;font:500 13px/1.25 'Satoshi';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person small{display:block;font-size:11.5px;line-height:1.3;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eye{flex:none;width:28px;height:28px;display:grid;place-items:center;color:var(--faint);transition:color .12s}
.eye:hover{color:var(--text)}
.eye svg{width:15px;height:15px;fill:currentColor}
.person.off b,.person.off small,.person.off img,.person.off .ph{opacity:.35}
.person.off .eye{color:var(--dim)}
.person.lift{position:relative;z-index:2;background:var(--field);box-shadow:inset 0 0 0 1px var(--aqua);cursor:grabbing}
.person.lift .grip{opacity:1;cursor:grabbing}
.people.dragging .person:not(.lift){transition:transform .18s var(--out)}

/* ---------- stage, the section on a plain white page ---------- */
.stage{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:14px 28px 12px;gap:8px;overflow:hidden;background:var(--bg)}
.size{flex:none;align-self:stretch;max-width:100%;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.frame{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#fff;transition:max-width .35s var(--out),background-color .25s}
.frame.desktop{max-width:1200px}.frame.tablet{max-width:820px}.frame.mobile{max-width:390px}
.stage:has(.frame.desktop) .size,.frame.desktop~.hint{max-width:1200px}
.stage:has(.frame.tablet) .size,.frame.tablet~.hint{max-width:820px}
.frame.mobile~.hint,.stage:has(.frame.mobile) .size{max-width:390px}
.frame-view{flex:1;min-height:0;position:relative;overflow:hidden}
.frame-view iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.hint{flex:none;font-size:12px;color:var(--dim);text-align:center;min-height:1.4em}

.empty{flex:1;display:grid;place-content:center;text-align:center;gap:10px;padding:40px}
.empty h1{font:700 22px/1.2 'Satoshi';letter-spacing:-.02em}
.empty p{color:var(--dim);font-size:14px}

/* a narrow window, and the website on a phone, stack the preview over the settings */
@media (max-width:760px){
  .top{grid-template-columns:auto 1fr;height:auto;min-height:52px;padding:8px 12px;row-gap:8px}
  .device{display:none}
  .wm{display:none}
  .work{flex-direction:column}
  .stage{order:-1;flex:none;height:46vh;min-height:280px;padding:10px 12px 8px}
  .panel{width:auto;flex:1;min-height:0;border-right:0;border-top:1px solid var(--line)}
  .hint{display:none}
}
/* too narrow for both on one row, the way out goes on top and the actions under it */
@media (max-width:520px){.top:has(#links:not([hidden])) :is(.lead,.acts){grid-column:1/-1}}

/* the line over the preview when the people in it are samples */
.sampled{flex:none;align-self:stretch;margin:0 0 10px;padding:9px 12px;border-radius:8px;background:rgba(46,219,207,.12);color:var(--text);font:500 13px/1.4 'Satoshi'}