/* Plan 8: /signin, /auth/*, /account, /unsubscribe, /privacy. Square corners, thin rules, the site's fonts. */
.acct{max-width:760px}
.acct-sec{border-top:1px solid var(--rule);padding:20px 0}
.acct .prose h2{font:600 20px/1.3 var(--serif);margin:26px 0 8px}
.acct-sec h2{font:600 20px/1.3 var(--serif);margin:0 0 10px}
.acct-form{display:grid;gap:8px;max-width:420px;margin:12px 0}
.acct-form label{font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.acct-form input[type=email],.acct-form input[type=url],.acct-form input[type=text],.acct-form select{font:15px/1.4 var(--sans);padding:9px 10px;border:1px solid var(--rule-2);border-radius:0;background:var(--surface);color:var(--ink)}
.acct-form .btn{justify-self:start}
.acct-or{margin:16px 0}
.btn-mark{width:16px;height:16px;flex:none} /* the GitHub mark takes the button's text colour, so it flips with the theme */
.acct-note{color:var(--ink-3)}
.acct-msg{border-left:3px solid var(--accent);padding:8px 12px;background:var(--fill)}
.acct-err{border-left:3px solid var(--brk);padding:8px 12px;background:var(--fill)}
.acct form.inline{display:inline-block;margin:0 8px 8px 0}
.acct .feed-row{display:flex;gap:8px;align-items:center}
.acct .feed-row input{flex:1;min-width:0;font:13px/1.4 var(--mono);padding:6px 8px;border:1px solid var(--rule);border-radius:0;background:var(--fill);color:var(--ink)}
.acct-dests{width:100%;border-collapse:collapse;margin:8px 0 16px}
.acct-dests th,.acct-dests td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule);vertical-align:top;font:14px/1.4 var(--sans)}
.acct-dests .off{color:var(--ink-3)}
.acct-secret{font:13px/1.5 var(--mono);padding:10px;border:1px solid var(--rule-2);background:var(--fill);word-break:break-all}
.acct pre{font:12px/1.5 var(--mono);padding:10px;border:1px solid var(--rule);background:var(--fill);overflow-x:auto}
.acct .prose p,.acct .prose li{font:16px/1.6 var(--serif)}
/* Phones: each destination becomes a block, every cell on its own line, so the status, the error and "Turn back on" stay visible. */
@media (max-width:600px){
.acct-dests,.acct-dests tbody,.acct-dests tr,.acct-dests td{display:block;width:100%}
.acct-dests thead{position:absolute;left:-9999px}
.acct-dests tr{border-bottom:1px solid var(--rule-2);padding:6px 0}
.acct-dests td{border-bottom:0;padding:6px 0}
.acct-dests td[data-label]::before{content:attr(data-label);display:block;font:600 12px/1.3 var(--sans);color:var(--ink-3);margin-bottom:2px}
}
/* Plan 16: the "Pro" mark beside a switch a free account can't use, and the /pro page (it reuses .acct for width and prose). */
.pro-tag{display:inline-block;font:600 10.5px/1.5 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-2);padding:0 4px;margin-left:6px;vertical-align:1px}
.acct-dests select{font:13px/1.3 var(--sans);padding:3px 4px;border:1px solid var(--rule-2);border-radius:0;background:var(--surface);color:var(--ink)}
.acct-dests label:has(input:disabled),.acct-dests select:disabled{color:var(--ink-3)}
.pro-get{padding:4px 0 20px}
.pro-get p{margin:0 0 10px}
.pro-cmp td{white-space:normal;vertical-align:top}
.pro-cmp td.c-key{width:38%}
.pro .prose h3{font:600 17px/1.3 var(--serif);margin:20px 0 6px}
.pro .prose h3:first-of-type{margin-top:4px}
.pro .prose p + p{margin-top:10px}
.pro .prose a,.pro .fine a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}