/* postkeep additions to the designer's app.css, kept separate so app.css can be replaced as delivered. */

/* The picker offers every configured server (iCloud Mail, Fastmail, Yahoo Mail, a custom server),
   not just iCloud and "Other IMAP": any choice other than iCloud shows the generic app-password guide. */
.signin:has(.picker__input:checked:not(#provider-icloud)) .guide--imap { display: revert !important; }
.signin:has(.picker__input:checked:not(#provider-icloud)) .guide--icloud { display: none !important; }
.signin:has(.picker__input:checked:not(#provider-icloud)) .guide__body > .guide--imap { display: grid !important; }
.signin:has(.picker__input:checked:not(#provider-icloud)) .guide__title.guide--imap { display: block !important; }
.picker__hint { margin-top: 8px; }
.guide .step__action { margin-right: 8px; }

/* Failed test events and delivery problems on the account page. */
.result--bad .i { color: var(--pk-ui-error); flex: none; }
.result--warn .i { color: var(--pk-ui-warning); flex: none; }
.badge--warning { background: color-mix(in srgb, var(--pk-ui-warning) 16%, transparent); color: var(--pk-ui-warning); }
.result code { overflow-wrap: anywhere; }
.sec__body > .result { margin-bottom: 16px; }

/* Filter rules in New-mail alerts: patterns wrap instead of truncating, and a redirect to #filters clears the sticky header. */
.filters { scroll-margin-top: 80px; }
.row__title--wrap { white-space: normal; overflow-wrap: anywhere; }
.badge--muted { background: var(--pk-ui-surface-sunken); color: var(--pk-ui-text-muted); }
/* On a phone the pattern takes its own line, with the badge and buttons under it. */
@media (max-width: 480px) { .filters .row { flex-wrap: wrap; } .filters .row__main { flex-basis: 100%; } }
/* The rule form's lists stay readable in dark mode. */
select.input option { background: var(--input-bg); color: var(--pk-ui-text); }
/* An escaped character in a pattern: boxed, so a typed \u{…} doesn't look the same. */
.esc { border: 1px dashed currentColor; border-radius: var(--pk-radius-xs); padding: 0 0.2em; color: var(--pk-ui-text-muted); white-space: nowrap; }

/* MB Hosting identity */
:root { --pk-ui-bg:#f3f4f7; --pk-ui-bg-subtle:#f8f9fc; --pk-ui-surface:#fff; --pk-ui-surface-sunken:#f0effa; --pk-ui-border:#e3e5eb; --pk-ui-border-strong:#cdd1dd; --pk-ui-text:#191d27; --pk-ui-text-muted:#535b69; --pk-ui-accent:#4e38dd; --pk-ui-accent-hover:#3d28bb; --pk-ui-accent-text:#4930c4; --pk-ui-on-accent:#fff; --pk-ui-accent-soft:#eeebff; --pk-ui-focus:#4e38dd; --pk-ui-mark:#191d27; --pk-ui-dot:#4e38dd; color-scheme:light; --input-bg:#fff; --tile-bg:#fff; --tile-border:#e3e5eb; --grid-line:transparent; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --pk-ui-bg:#f3f4f7; --pk-ui-bg-subtle:#f8f9fc; --pk-ui-surface:#fff; --pk-ui-surface-sunken:#f0effa; --pk-ui-border:#e3e5eb; --pk-ui-border-strong:#cdd1dd; --pk-ui-text:#191d27; --pk-ui-text-muted:#535b69; --pk-ui-accent:#4e38dd; --pk-ui-accent-hover:#3d28bb; --pk-ui-accent-text:#4930c4; --pk-ui-on-accent:#fff; --pk-ui-accent-soft:#eeebff; --pk-ui-focus:#4e38dd; --pk-ui-mark:#191d27; --pk-ui-dot:#4e38dd; color-scheme:light; --input-bg:#fff; --tile-bg:#fff; --tile-border:#e3e5eb; --grid-line:transparent; } }
.site-header { background:#fff; backdrop-filter:none; }
.mb-mark { display:inline-grid; place-items:center; width:38px; height:38px; flex:none; border-radius:10px; background:linear-gradient(135deg,#5428c8,#3e62ea); color:white; font-size:15px; font-weight:800; letter-spacing:-.04em; }
.mb-mark--small { width:40px; height:40px; }
.mb-wordmark { display:grid; gap:1px; line-height:1.1; }
.mb-wordmark strong { font-size:16px; font-weight:800; }
.mb-wordmark small { color:#737b88; font-size:10px; font-weight:700; letter-spacing:.09em; }
.btn--primary { background:linear-gradient(110deg,#5428c8,#3e62ea); border-color:transparent; color:#fff; }
::selection { background:#d9d3ff; color:#191d27; }