/* Impostazioni (settings.js), a window in the manner of Wispr Flow (mock approved by Ale, 6 Nov), and the sheets of mail.js. */
:root{--p-bg:#161618;--p-card:#1f1f22;--p-ctl:#2e2e32;--p-ctl-h:#38383d;--p-on:rgb(255 255 255 / .08);--p-line:rgb(255 255 255 / .07);--p-edge:0 0 0 1px rgb(255 255 255 / .08),0 40px 90px -30px rgb(0 0 0 / .8)}
:root[data-theme="light"]{--p-bg:#fff;--p-card:#f5f6f7;--p-ctl:#fff;--p-ctl-h:#f0f1f3;--p-on:rgb(17 18 20 / .06);--p-line:rgb(17 18 20 / .08);--p-edge:0 0 0 1px rgb(17 18 20 / .08),0 40px 90px -30px rgb(17 18 20 / .35)}


/* the panel */
.sx-scrim{position:fixed;inset:0;z-index:35;display:grid;place-items:center;padding:24px;background:rgb(0 0 0 / .5);animation:sx-in .18s ease-out}
:root[data-theme="light"] .sx-scrim{background:rgb(17 18 20 / .32)}
@keyframes sx-in{from{opacity:0}}
.sx{position:relative;display:grid;grid-template-columns:232px minmax(0,1fr);width:min(960px,100%);height:min(640px,100%);border-radius:16px;overflow:hidden;background:var(--p-bg);box-shadow:var(--p-edge);animation:sx-up .26s var(--out)}
@keyframes sx-up{from{opacity:0;transform:translateY(8px) scale(.985)}}
.sx-nav{display:flex;flex-direction:column;min-height:0;padding:20px 12px 16px;border-right:1px solid var(--p-line);overflow-y:auto}
.sx-lab{margin:0 0 8px 8px;font-size:11.5px;font-weight:550;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sx-nav button.it{display:flex;align-items:center;gap:11px;width:100%;height:36px;padding:0 10px;border-radius:9px;margin-bottom:0;font-size:14.5px;color:var(--ink-2);text-align:left;transition:background .15s,color .15s}
.sx-nav button.it+button.it{margin-top:2px}
.sx-nav button.it:hover{background:var(--fill);color:var(--ink)}
.sx-nav button.it.on{background:var(--p-on);color:var(--ink);font-weight:500}
.sx-rule{height:1px;margin:14px 0 18px;background:var(--p-line)}
.sx-nav-foot{margin-top:auto;padding-top:12px}
.sx-ver{padding:10px 8px 0;font-size:12.5px;color:var(--ink-3)}

.sx-pane{position:relative;min-width:0;min-height:0;padding:44px 48px 40px;overflow-y:auto}
.sx-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--ink-3)}
.sx-x:hover{background:var(--fill);color:var(--ink)}
.sx-back{display:none}
.sx-pane h2{margin:0 0 30px;font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.15;letter-spacing:-.015em}
.sx-card{padding:0 20px;border-radius:14px;background:var(--p-card)}
.sx-row{display:flex;align-items:center;gap:24px;min-height:84px;padding:14px 0;border-bottom:1px solid var(--p-line)}
.sx-row:last-child{border-bottom:0}
.sx-t{flex:1;min-width:0;overflow-wrap:anywhere}
.sx-t b{display:block;font-size:14.5px;font-weight:500;line-height:1.35}
.sx-t span{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.sx-row.danger .sx-t b{color:var(--coral)}
.sx-c{flex:none;display:flex;align-items:center;gap:8px}
.sx-b{display:inline-flex;align-items:center;justify-content:center;min-width:150px;white-space:nowrap;height:36px;padding:0 14px;border-radius:9px;background:var(--p-ctl);font-size:14px;font-weight:500;transition:background .15s}
:root[data-theme="light"] .sx-b,:root[data-theme="light"] .sx-pick{box-shadow:inset 0 0 0 1px rgb(17 18 20 / .1)}
.sx-b:hover{background:var(--p-ctl-h)}
.sx-b.danger{color:var(--coral)}
.sx-b:disabled{opacity:.45;cursor:default}
.sx-note{margin:14px 20px 0;font-size:13px;line-height:1.45;color:var(--ink-3)}

/* a choice: the box of Wispr's Language and Theme */
.sx-sel{position:relative;width:150px}
.sx-pick{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 10px 0 12px;border-radius:9px;background:transparent;box-shadow:inset 0 0 0 1px var(--p-line);font-size:14px;transition:background .15s}
.sx-pick:hover,.sx-sel.open .sx-pick{background:var(--fill)}
.sx-pick span{flex:1;text-align:left}
.sx-pick>svg:last-child{color:var(--ink-3);transition:transform .15s}
.sx-sel.open .sx-pick>svg:last-child{transform:rotate(180deg)}
.sx-menu{position:absolute;z-index:3;top:calc(100% + 6px);right:0;width:100%;padding:4px;border-radius:11px;background:var(--p-card);box-shadow:var(--p-edge);animation:sx-up .14s var(--out)}
.sx-menu button{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 8px;border-radius:7px;font-size:14px;text-align:left}
.sx-menu button:hover{background:var(--fill)}
.sx-menu button span{flex:1}
.sx-menu button>svg:last-child:not(:first-child){color:var(--blue)}

/* a switch */
.sx-sw{position:relative;width:42px;height:25px;border-radius:999px;background:var(--fill-2);transition:background .2s}
.sx-sw[disabled]{opacity:.5}
.sx-sw i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .3);transition:transform .22s var(--out)}
.sx-sw[aria-checked="true"]{background:var(--btn)}
.sx-sw[aria-checked="true"] i{transform:translateX(17px)}

/* the name, typed in place */
.sx-in{width:220px;height:42px;padding:0 13px;border:0;border-radius:10px;outline:0;background:var(--p-bg);box-shadow:inset 0 0 0 1px var(--p-line);font-size:14.5px;transition:box-shadow .15s}
.sx-in:focus{box-shadow:inset 0 0 0 1px var(--blue)}
.sx-row.sx-wide .sx-t{flex:none}
.sx-row.sx-wide .sx-c{flex:0 1 auto;min-width:0;margin-left:auto;gap:14px}
.sx-val{min-width:0;font-size:14.5px;color:var(--ink-2);text-align:right;overflow-wrap:anywhere}
.sx-lnk{flex:none;font-size:14px;font-weight:500;color:var(--ink-3);transition:color .15s}
.sx-lnk:hover{color:var(--ink)}
.sx-av{width:44px;height:44px;font-size:17px}
.sx-more{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;margin-right:8px}
.sx-more:hover{color:var(--blue)}

/* under the card of the account: leave on the left, keep on the right */
.sx-foot{display:flex;align-items:center;gap:22px;margin-top:26px}
.sx-foot .sx-b{min-width:0;padding:0 18px}
.sx-foot .sx-b.go{margin-left:auto;min-height:36px;background:var(--btn);border-radius:9px;font-size:14px;font-weight:500;box-shadow:none;transform:none}
.sx-foot .sx-b.go:disabled{background:var(--fill-2);color:var(--ink-3);opacity:1}
.sx-plain{font-size:14px;font-weight:500;color:var(--ink-2);transition:color .15s}
.sx-plain:hover{color:var(--coral)}
.sx-meter{width:150px;height:6px;border-radius:6px;background:var(--fill-2);overflow:hidden}
.sx-meter i{display:block;height:100%;border-radius:6px;background:var(--btn)}


/* the sheets: the email, the exit, the delete, Scrivici. Above the window, in its look */
.overlay:has(.st-sheet) { grid-template-columns: minmax(0, 420px); background: rgb(0 0 0 / .42); }
.st-sheet { gap: 12px; padding: 24px; border-radius: 14px; background: var(--p-bg); box-shadow: var(--p-edge); }
.st-sheet .sheet-x { display: none; }
.st-sheet h2 { font-size: 23px; letter-spacing: -.01em; }
.st-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.st-fine { margin: 0; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.st-err { color: var(--coral); font-size: 13.5px; }
.st-warn { margin: 0; padding: 10px 14px; border-radius: 9px; background: var(--coral-f); color: var(--coral); font-size: 13.5px; }
.st-sheet .ss-input { height: 40px; padding: 9px 12px; border: 0; border-radius: 9px; outline: 0; background: var(--p-card); box-shadow: inset 0 0 0 1px var(--p-line); font-size: 14px; }
.st-sheet .ss-input:focus { box-shadow: inset 0 0 0 1px var(--blue); }
.st-code { text-align: center; font-size: 22px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.st-sheet .st-code { font-size: 20px; }
.st-sheet .st-textarea { height: auto; min-height: 110px; resize: vertical; line-height: 1.5; }
.st-links { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-3); flex-wrap: wrap; }
.st-links .lnk[disabled] { opacity: .5; pointer-events: none; }
.st-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.st-sheet .st-actions .btn { min-width: 96px; min-height: 36px; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 500; box-shadow: none; }
.st-sheet .st-actions .btn.ghost { background: var(--p-card); color: var(--ink); }
.st-sheet .st-actions .st-danger { background: var(--coral); }
.st-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.st-topics button { height: 32px; padding: 0 12px; border-radius: 8px; background: var(--p-card); font-size: 13.5px; color: var(--ink-2); }
.st-topics button.on { background: var(--blue-f); color: var(--blue); }
.side .me .av, .side .me .me-n { cursor: pointer; }
.side .me .me-n:hover { color: var(--blue); }

/* a phone: the list first, then one section at a time */
@media(max-width:760px){
  .sx-scrim{padding:0}
  .sx{grid-template-columns:minmax(0,1fr);width:100%;height:100%;border-radius:0}
  .sx-nav{border-right:0;padding:56px 16px 20px}
  .sx-nav button.it{height:46px;font-size:16px}
  .sx-pane{display:none;padding:58px 16px 28px}
  .sx.in .sx-nav{display:none}.sx.in .sx-pane{display:block}
  .sx-back{display:flex;position:absolute;top:14px;left:10px;align-items:center;gap:4px;height:32px;padding:0 8px 0 2px;color:var(--ink-2);font-size:15px}
  .sx-x{z-index:2}
  .sx-pane h2{font-size:26px;margin-bottom:20px}
  .sx-card{padding:0 14px}
  .sx-row{flex-wrap:wrap;gap:10px 12px;min-height:0}
  .sx-t{flex-basis:100%}
  .sx-row.tight{flex-wrap:nowrap}.sx-row.tight .sx-t{flex-basis:0}
  .sx-c,.sx-sel,.sx-b,.sx-in,.sx-meter{width:100%}
  .sx-row.tight .sx-c{width:auto}
  .sx-row.sx-wide{flex-wrap:nowrap}.sx-row.sx-wide .sx-c{width:auto;flex:1}.sx-row.sx-wide .sx-t{flex-basis:auto}
  .sx-val{flex:1}
  .sx-foot{gap:18px;flex-wrap:wrap}.sx-foot .sx-b{width:auto}
}

/* the picture of the account */
.av { overflow: hidden; }
.av img { display: block; width: 100%; height: 100%; object-fit: cover; }
button.sx-av { cursor: pointer; transition: opacity .15s; }
button.sx-av:hover { opacity: .85; }
button.sx-av:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sx-row .sx-c:has(.sx-av) { gap: 14px; }