/* The "Delete my account" dialog (app/js/account-delete.js), the same on the app and on the companies page: its own colours, light and dark, so it reads
   the same on both pages. A sheet from the bottom on a phone, a centred card on a wide screen. Contrast: text #0A2540 on #FFFFFF, red #A33B2B on white
   about 6:1; in dark, #F5F5F7 on #1C1C1E, #FF8A78 on #1C1C1E about 7:1. */
.ad-scrim{ --ad-card:#FFFFFF; --ad-ink:#0A2540; --ad-muted:#586374; --ad-line:#DCE1E8; --ad-fill:#EEF1F5; --ad-red:#A33B2B; --ad-red-ink:#FFFFFF; --ad-note:#E4EFEA; --ad-note-ink:#14503D; --ad-warn:#F6E5E1;
  position:fixed; inset:0; z-index:1000; background:rgba(5,18,34,.45); display:flex; align-items:flex-end; justify-content:center;
  padding:max(12px, env(safe-area-inset-top, 0px)) 0 0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif }
@media(prefers-color-scheme:dark){ .ad-scrim{ --ad-card:#1C1C1E; --ad-ink:#F5F5F7; --ad-muted:#A1A1A8; --ad-line:#3A3A3C; --ad-fill:#2C2C2E; --ad-red:#FF8A78; --ad-red-ink:#1C1C1E; --ad-note:#163A2E; --ad-note-ink:#9BE7CB; --ad-warn:#3A2420 } }
html[data-company-dark="true"] .ad-scrim{ --ad-card:#1C1C1E; --ad-ink:#F5F5F7; --ad-muted:#A1A1A8; --ad-line:#3A3A3C; --ad-fill:#2C2C2E; --ad-red:#FF8A78; --ad-red-ink:#1C1C1E; --ad-note:#163A2E; --ad-note-ink:#9BE7CB; --ad-warn:#3A2420 }
.ad-card{ width:100%; max-width:560px; max-height:calc(100dvh - 24px); overflow:auto; -webkit-overflow-scrolling:touch; background:var(--ad-card); color:var(--ad-ink);
  border-radius:20px 20px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -10px 40px rgba(0,0,0,.25); font-size:calc(15px * var(--dt,1)); line-height:1.55; text-align:start }
@media(min-width:640px){ .ad-scrim{ align-items:center; padding:24px } .ad-card{ border-radius:20px; padding:22px 24px } }
.ad-head{ display:flex; align-items:center; justify-content:flex-start; gap:12px; position:sticky; top:-18px; z-index:1; margin:-18px -16px 4px; padding:18px 16px 8px; background:var(--ad-card) }   /* the title and the close button stay while the steps scroll */
@media(min-width:640px){ .ad-head{ top:-22px; margin:-22px -24px 4px; padding:22px 24px 8px } }
.ad-head h2{ margin:0; font-size:calc(20px * var(--dt-cap,1)); font-weight:700; letter-spacing:-.01em; outline:none }
.ad-x{ flex:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--ad-fill); color:var(--ad-ink); font-size:calc(24px * var(--dt-cap,1)); line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 }
.ad-x svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round }   /* first in the header: the top-leading corner, as on every sheet */
.ad-msg{ min-height:0; margin:0 0 6px; font-size:calc(14px * var(--dt,1)); color:var(--ad-note-ink) } .ad-msg:empty{ display:none } .ad-msg.err{ color:var(--ad-red) }
.ad-details{ margin-top:4px; font-size:calc(12.5px * var(--dt,1)); color:var(--ad-note-ink) } .ad-details summary{ cursor:pointer; min-height:28px; line-height:28px } .ad-details code{ display:block; word-break:break-all; font-size:calc(12px * var(--dt,1)) }   /* the raw answer under a fold, the sentence above stays plain */
.ad-lead{ margin:4px 0 12px; font-weight:600 }
.ad-sec{ border-top:1px solid var(--ad-line); padding:12px 0 6px }
.ad-sec h3{ margin:4px 0 6px; font-size:calc(16px * var(--dt,1)); font-weight:700 } .ad-sec p{ margin:0 0 10px }
.ad-list{ margin:0 0 10px; padding-inline-start:20px } .ad-list li{ margin:4px 0 }
.ad-muted{ color:var(--ad-muted); font-size:calc(13.5px * var(--dt,1)) }
.ad-note{ background:var(--ad-note); color:var(--ad-note-ink); border-radius:12px; padding:10px 12px; font-size:calc(14px * var(--dt,1)) }
.ad-warn{ background:var(--ad-warn); border-radius:12px; padding:10px 12px; font-size:calc(14px * var(--dt,1)) }
.ad-err{ color:var(--ad-red) } .ad-card bdi{ overflow-wrap:anywhere } .ad-card bdi.ad-nowrap{ white-space:nowrap }   /* a long address or name may wrap; a date never breaks in the other direction */
.ad-co{ border:1px solid var(--ad-line); border-radius:14px; padding:12px; margin:0 0 10px; display:flex; flex-direction:column; gap:8px }
.ad-co p{ margin:0 }
.ad-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:calc(46px * var(--dt,1)); padding:0 18px; border-radius:999px; border:1px solid var(--ad-line); background:var(--ad-fill);
  color:var(--ad-ink); font:inherit; font-weight:700; font-size:calc(15px * var(--dt,1)); cursor:pointer; max-width:100%; text-align:center; white-space:normal; line-height:1.3 }
.ad-btn:disabled{ opacity:.45; cursor:not-allowed } .ad-btn.ghost{ background:transparent; text-decoration:underline }
.ad-btn.danger{ width:100%; background:var(--ad-red); border-color:var(--ad-red); color:var(--ad-red-ink); margin-top:10px }
.ad-input{ width:100%; min-height:calc(46px * var(--dt,1)); padding:10px 12px; border-radius:12px; border:1px solid var(--ad-line); background:var(--ad-fill); color:var(--ad-ink); font:inherit; font-size:calc(16px * var(--dt,1)); box-sizing:border-box }
textarea.ad-input{ min-height:calc(64px * var(--dt,1)); resize:vertical }
#adPassword{ direction:ltr } [dir=rtl] #adPassword{ text-align:right }
.ad-sec label{ display:block; margin:6px 0 6px; font-weight:600; font-size:calc(14px * var(--dt,1)) }
.ad-sec label.ad-check{ display:flex; align-items:center; gap:10px; font-weight:500; min-height:calc(44px * var(--dt,1)); margin:8px 0 0 } .ad-check input{ width:22px; height:22px; margin:0; flex:none; accent-color:var(--ad-red) }
.ad-btn:focus-visible,.ad-x:focus-visible,.ad-input:focus-visible,.ad-check input:focus-visible{ outline:3px solid #00A990; outline-offset:2px }
@media(prefers-reduced-motion:no-preference){ .ad-card{ animation:ad-up .22s ease-out } @keyframes ad-up{ from{ transform:translateY(24px); opacity:.6 } to{ transform:none; opacity:1 } } }
/* the companies page: the small link under the cards (a person with no company, or choosing one) */
.account-slot{ text-align:center; margin:18px 0 0 } .account-slot .btn.ghost{ color:rgba(255,255,255,.8); font-size:calc(14px * var(--dt,1)) }