/* Account pages, the header's account button, the Favorite button and the
   accounts card (account.js). Pages reuse the fund page's layout and panels
   from index.html; these rules only add what those pages lack, in the same
   colors, type scale and shapes. */

/* ---------- header ---------- */
.acct-hdr{position:relative;flex:none}
.acct-hdr-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 13px;color:var(--mt);background:transparent;border:1px solid var(--bd2);border-radius:4px;font:inherit;font-size:var(--fs-body);font-weight:600;cursor:pointer;text-decoration:none}
.acct-hdr-button:hover{color:var(--ac);border-color:var(--ac);text-decoration:none}
.acct-hdr-button[aria-expanded="true"]{border-color:var(--ac);background:var(--sf)}
.acct-hdr-label{color:var(--tx)}
.acct-hdr-button:hover .acct-hdr-label{color:var(--ac)}
button.acct-hdr-button{padding:0}
.acct-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ac);color:var(--cd);font-family:var(--serif);font-size:15px;font-weight:600;line-height:1}
@media(min-width:769px){
  /* The search box, theme button and account button together span the
     summary column: 108px is two 44px buttons and two 10px gaps. */
  .hdr.has-account>.gsearch-wrap{width:calc(var(--side-w) - 108px)}
  .hdr.has-account .gsearch-results{right:-108px}
  .acct-hdr{margin-left:-8px}
}
@media(max-width:480px){
  .acct-hdr-label{display:none}
  .acct-hdr-button{padding:0}
}
/* The narrowest phones fit the logo and three 44px buttons on one line. */
@media(max-width:359px){.hdr.has-account{column-gap:4px}}
.acct-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:101;width:260px;overflow:hidden;background:var(--cd);border:1px solid var(--bd2);border-radius:4px;box-shadow:0 14px 34px rgba(50,43,34,.14)}
.acct-menu[hidden]{display:none}
.acct-menu-who{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--sf)}
.acct-menu-email{min-width:0;overflow:hidden;color:var(--mt);font-size:var(--fs-meta);text-overflow:ellipsis;white-space:nowrap}
.acct-menu>a,.acct-menu>button{display:block;width:100%;padding:11px 14px;color:var(--tx);background:none;border:0;border-top:1px solid var(--bd);font:inherit;font-size:var(--fs-body);text-align:left;cursor:pointer}
.acct-menu>a:hover,.acct-menu>button:hover{background:var(--warm-hover);color:var(--ac);text-decoration:none}
.acct-plan-tag,.acct-preview-tag,.acct-soon,.acct-unconfirmed{padding:3px 7px;border:1px solid var(--bd2);border-radius:6px;background:var(--cd);color:var(--mt);font-size:var(--fs-tag);font-weight:600;letter-spacing:.06em}

/* ---------- Favorite button ---------- */
/* Gold, so the button stands apart from the green ticker, tags and links
   beside the page's name: an outlined star until pressed, then a gold fill
   and a solid star. Its text keeps at least 6.5:1 contrast in both themes. */
.acct-fav{display:inline-flex;align-items:center;gap:6px;height:30px;margin-left:auto;padding:0 11px;color:var(--gd);background:#fbf4e4;border:1px solid #b07a17;border-radius:4px;font:inherit;font-size:var(--fs-meta);font-weight:600;cursor:pointer}
.acct-fav:hover{background:#f6e7c6;border-color:#9a6410}
.acct-fav .acct-star{color:#b07a17;fill:none}
.acct-fav[aria-pressed="true"]{color:#5e3b0d;background:#f6e0a8;border-color:#b07a17}
.acct-fav[aria-pressed="true"]:hover{background:#f2d58e;border-color:#9a6410}
.acct-fav[aria-pressed="true"] .acct-star{color:#9a6410;fill:#e4a823}
:root[data-theme="dark"] .acct-fav{background:#231e15;border-color:#9c7a42}
:root[data-theme="dark"] .acct-fav:hover{background:#2e2618;border-color:#c99a4a}
:root[data-theme="dark"] .acct-fav .acct-star{color:#e8b85c}
:root[data-theme="dark"] .acct-fav[aria-pressed="true"]{color:#f6dca8;background:#4a3818;border-color:#e0b25e}
:root[data-theme="dark"] .acct-fav[aria-pressed="true"]:hover{background:#56411c;border-color:#ebc070}
:root[data-theme="dark"] .acct-fav[aria-pressed="true"] .acct-star{color:#f5c04e;fill:currentColor}
@media(max-width:768px){.acct-fav{height:36px}}

/* ---------- page layout ---------- */
.acct-head{margin-bottom:24px}
.acct-head h1{max-width:1100px;margin:0 0 10px;font-size:var(--fs-page);font-weight:600;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.acct-lede{max-width:640px;margin:0;color:var(--mt);font-size:var(--fs-ui);line-height:1.6}
.acct-layout .fund-main>.fund-panel,.acct-layout form>.fund-panel{margin-bottom:16px}
.acct-panel-body{padding:18px 20px 20px}
.acct-panel-body>p{max-width:680px;margin:0 0 12px;line-height:1.6}
.acct-panel-body>:last-child{margin-bottom:0}
.acct-nav a{display:block;padding:7px 0;color:var(--tx);font-size:var(--fs-body)}
.acct-nav a:hover{color:var(--ac);text-decoration:none}
.acct-nav a[aria-current="page"]{color:var(--ac);font-weight:700}
.acct-nav .summary-line{margin:10px 0}
/* Phones and tablets: the sections as a row of tabs, like the latest
   filing changes card, instead of the sidebar (the footer keeps its links). */
.acct-tabs{display:none}
@media(max-width:768px){
  .acct-head h1{font-size:30px;line-height:1.12}
  .acct-head{margin-bottom:16px}
  .acct-layout .fund-sidebar{display:none}
  .acct-panel-body{padding:16px}
  .acct-tabs{display:flex;gap:6px;margin:0 -16px 16px;padding:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .acct-tabs::-webkit-scrollbar{display:none}
  .acct-tab{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border:1px solid var(--bd2);border-radius:999px;color:var(--tx);font-size:var(--fs-meta);font-weight:600;white-space:nowrap}
  .acct-tab:hover{border-color:var(--ac);text-decoration:none}
  .acct-tab[aria-current="page"]{background:var(--ac);border-color:var(--ac);color:#fff}
  :root[data-theme="dark"] .acct-tab[aria-current="page"]{color:#10130f}
}

.acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 0;border-top:1px solid var(--bd)}
.acct-row:first-child{padding-top:0;border-top:0}
.acct-row:last-child{padding-bottom:0}
.acct-row p{margin:2px 0 0;color:var(--mt);font-size:var(--fs-meta);line-height:1.5}
.acct-row strong{font-weight:600}
.acct-row .acct-button{flex:none}
@media(max-width:480px){.acct-row{flex-wrap:wrap}}
.acct-facts{margin:0}
.acct-facts>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--bd)}
.acct-facts>div:first-child{padding-top:0;border-top:0}
.acct-facts dt{color:var(--mt);font-size:var(--fs-meta);font-weight:600}
.acct-facts dd{margin:0;overflow-wrap:anywhere}
.acct-facts dd a{margin-left:10px;font-size:var(--fs-meta);font-weight:600}
.acct-unconfirmed{margin-left:8px;color:var(--gd);border-color:#dfc9a3;background:#f4ead8;vertical-align:1px}
:root[data-theme="dark"] .acct-unconfirmed{border-color:#54432a;background:#3a2e1d}
@media(max-width:480px){.acct-facts>div{grid-template-columns:1fr;gap:2px}}

/* ---------- buttons and fields ---------- */
.acct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.acct-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:0 16px;color:var(--tx);background:transparent;border:1px solid var(--bd2);border-radius:4px;font:inherit;font-size:var(--fs-body);font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none}
.acct-button:hover{color:var(--ac);border-color:var(--ac);text-decoration:none}
.acct-primary{color:#fff;background:var(--ac);border-color:var(--ac)}
.acct-primary:hover{color:#fff;background:#005a43;border-color:#005a43}
:root[data-theme="dark"] .acct-primary{color:#10201a}
:root[data-theme="dark"] .acct-primary:hover{color:#10201a;background:#7fd3b6;border-color:#7fd3b6}
.acct-danger{color:var(--rd)}
.acct-danger:hover{color:var(--rd);background:var(--rd-soft);border-color:var(--rd)}
.acct-wide{width:100%}
.acct-google{background:var(--cd)}
.acct-text-button{padding:0;color:var(--ac);background:none;border:0;font:inherit;cursor:pointer;text-underline-offset:3px}
.acct-text-button:hover{text-decoration:underline}
.acct-form{margin:0}
.acct-label{display:block;margin:0 0 6px;color:var(--tx);font-size:var(--fs-meta);font-weight:600}
.acct-input.gsearch-input{display:block;width:100%;margin-bottom:12px;padding:10px 14px}
.acct-fine,.acct-panel-body>.acct-fine{margin:16px 0 0;color:var(--mt);font-size:var(--fs-fine);line-height:1.55}
.acct-note{color:var(--mt);font-size:var(--fs-meta)}
.acct-empty{color:var(--mt)}
.acct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* A checkbox drawn as a switch. */
.acct-switch{display:inline-flex;align-items:center;gap:9px;color:var(--mt);font-size:var(--fs-meta);cursor:pointer}
.acct-switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:36px;height:20px;margin:0;border-radius:999px;background:var(--bd2);cursor:pointer;transition:background .15s}
.acct-switch input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--cd);transition:transform .15s}
.acct-switch input:checked{background:var(--ac)}
.acct-switch input:checked:after{transform:translateX(16px)}
.acct-switch-main{margin-bottom:12px;color:var(--tx);font-size:var(--fs-ui);font-weight:600}
.acct-options{margin:0 0 6px;padding:0;border:0}
.acct-check{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--bd);cursor:pointer}
.acct-check:first-of-type{padding-top:0;border-top:0}
.acct-check input{width:16px;height:16px;margin:3px 0 0;accent-color:var(--ac)}
.acct-check strong{display:block;font-weight:600}
.acct-check-detail{color:var(--mt);font-size:var(--fs-meta)}
/* An alert not built yet: in line with the boxes, with nothing to choose. */
.acct-check-soon{padding-left:26px;cursor:default}
.acct-check-soon .acct-soon{margin-left:6px;vertical-align:1px}
.acct-limit{margin:0 0 14px}

/* ---------- favorites ---------- */
.acct-favs{margin:0;padding:0;list-style:none}
.acct-favs li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:11px 0;border-top:1px solid var(--bd)}
.acct-favs li:first-child{padding-top:0;border-top:0}
.acct-fav-name{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){
  .acct-favs li{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px}
  .acct-favs .acct-switch{grid-row:2}
}

/* ---------- plans ---------- */
.acct-checks{margin:0 0 4px;padding:0;list-style:none}
.acct-checks li{position:relative;padding:5px 0 5px 24px;line-height:1.5}
.acct-checks li:before{content:"";position:absolute;left:3px;top:11px;width:10px;height:5px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg)}
.acct-soon{margin-left:6px;vertical-align:1px;text-transform:uppercase}
.acct-price{margin:4px 0 14px;font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.02em}
.acct-panel-body .acct-price{font-size:var(--fs-panel)}
.acct-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:900px;margin:0 0 20px}
.acct-plan{padding:24px;background:var(--cd);border:1px solid var(--bd);border-radius:4px}
.acct-plan h2{margin:0;font-size:var(--fs-panel)}
.acct-plan-pro{border-color:var(--ac);box-shadow:inset 0 3px 0 var(--ac)}
.acct-plan .acct-actions{margin-top:20px}
.acct-current{color:var(--mt);font-size:var(--fs-meta);font-weight:600}
.acct-pricing>.acct-fine{max-width:900px}
@media(max-width:768px){.acct-plans{grid-template-columns:1fr;gap:16px}}

/* ---------- sign-in ---------- */
.acct-signin{max-width:480px;margin:0 auto}
.acct-signin .acct-lede{margin-bottom:18px}
.acct-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mt);font-size:var(--fs-meta)}
.acct-or:before,.acct-or:after{content:"";flex:1;height:1px;background:var(--bd)}
/* The label row holds "Forgot password?"; the Show button sits inside the box. */
.acct-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.acct-label-row .acct-text-button{margin-bottom:6px;font-size:var(--fs-meta);font-weight:600}
.acct-password{position:relative;margin-bottom:12px}
.acct-password .acct-input.gsearch-input{margin-bottom:0;padding-right:68px}
.acct-reveal{position:absolute;top:0;right:0;bottom:0;padding:0 14px;font-size:var(--fs-meta);font-weight:600}
.acct-hint{margin:-6px 0 12px;color:var(--mt);font-size:var(--fs-fine)}
.acct-error,.acct-notice{margin:0 0 12px;padding:10px 12px;border:1px solid;border-radius:4px;font-size:var(--fs-meta);line-height:1.5}
.acct-error{color:var(--rd);background:var(--rd-soft);border-color:var(--rd)}
.acct-notice{color:var(--tx);background:var(--ac-soft);border-color:var(--ac)}
.acct-panel-body>.acct-swap{max-width:none;margin:18px 0 0;color:var(--mt);font-size:var(--fs-meta);text-align:center}
.acct-swap .acct-text-button{font-weight:600}

/* ---------- policy pages ---------- */
.policy{max-width:760px}
.policy>p,.policy li{font-size:16px;line-height:1.7}
.policy>p{margin:0 0 14px}
.policy h2{margin:36px 0 10px;font-size:24px}
.policy h3{margin:22px 0 6px;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0}
.policy ul{margin:0 0 14px;padding-left:22px}
.policy li{margin-bottom:6px}
.policy-effective{margin:4px 0 0;color:var(--mt);font-size:var(--fs-meta)}
.policy-summary{margin:20px 0 8px;padding:18px 22px;background:var(--cd);border:1px solid var(--bd);border-radius:4px}
.policy-summary h2{margin:0 0 8px;font-size:var(--fs-panel)}
.policy-summary ul{margin:0}

/* ---------- footer, preview bar, messages ---------- */
.site-footer .acct-footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.acct-footer-links a{color:var(--mt);font-weight:600}
.acct-footer-links a:hover{color:var(--ac)}
body.has-acct-preview{padding-bottom:88px}
.acct-preview{position:fixed;left:50%;bottom:16px;z-index:150;display:flex;align-items:center;gap:10px 14px;width:max-content;max-width:calc(100% - 32px);padding:9px 10px 9px 14px;transform:translateX(-50%);background:var(--cd);border:1px solid var(--bd2);border-radius:10px;box-shadow:0 14px 34px rgba(50,43,34,.14);color:var(--mt);font-size:var(--fs-fine);line-height:1.4}
.acct-preview-tag{flex:none;color:var(--gd);border-color:#dfc9a3;background:#f4ead8;text-transform:uppercase}
:root[data-theme="dark"] .acct-preview-tag{border-color:#54432a;background:#3a2e1d}
.acct-preview-note{max-width:330px}
.acct-preview-modes{display:inline-flex;flex:none}
.acct-preview-modes button{min-height:32px;padding:0 11px;color:var(--tx);background:transparent;border:1px solid var(--bd2);font:inherit;font-size:var(--fs-fine);font-weight:600;cursor:pointer}
.acct-preview-modes button+button{margin-left:-1px}
.acct-preview-modes button:first-child{border-radius:4px 0 0 4px}
.acct-preview-modes button:last-child{border-radius:0 4px 4px 0}
.acct-preview-modes button[aria-pressed="true"]{position:relative;color:#fff;background:var(--ac);border-color:var(--ac)}
:root[data-theme="dark"] .acct-preview-modes button[aria-pressed="true"]{color:#10201a}
@media(max-width:640px){.acct-preview-note{display:none}}
.acct-toast{position:fixed;left:50%;bottom:24px;z-index:160;max-width:calc(100% - 32px);padding:11px 16px;transform:translate(-50%,12px);border-radius:4px;background:var(--tx);color:var(--bg);font-size:var(--fs-body);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.acct-toast.open{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.acct-toast a,.acct-toast .acct-text-button{margin-left:6px;color:inherit;font-weight:700;text-decoration:underline}
body.has-acct-preview .acct-toast{bottom:84px}
.acct-dialog{margin:auto;width:calc(100% - 32px);max-width:440px;padding:24px;color:var(--tx);background:var(--cd);border:1px solid var(--bd2);border-radius:4px;box-shadow:0 14px 34px rgba(50,43,34,.2)}
.acct-dialog::backdrop{background:rgba(32,31,27,.38)}
.acct-dialog h2{margin:0 0 8px;font-size:var(--fs-panel)}
.acct-dialog p{margin:0;color:var(--mt);line-height:1.6}

/* ---------- accounts card ---------- */
/* A first visit's card about free accounts (account.js showIntro): in the
   bottom corner, lined up with the header's buttons, or across the bottom on
   phones. Above the preview bar on staging, below messages and dialogs. */
.acct-intro{position:fixed;right:max(var(--page-gutter),calc((100% - var(--page-max))/2 + var(--page-gutter)));bottom:24px;z-index:140;width:340px;max-width:calc(100% - 32px);padding:16px 20px 20px;color:var(--tx);background:var(--cd);border:1px solid var(--bd2);border-radius:4px;box-shadow:0 14px 34px rgba(50,43,34,.16);animation:acct-intro-in .25s ease-out}
@keyframes acct-intro-in{from{opacity:0;transform:translateY(12px)}}
.acct-intro-kicker{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:var(--gd);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* The pressed Favorite button's gold star. */
.acct-intro-kicker .acct-star{flex:none;color:#9a6410;fill:#e4a823}
.acct-intro h2{margin:0 0 8px;padding-right:28px;font-size:var(--fs-panel);line-height:1.2}
.acct-intro .acct-checks li{padding:3px 0 3px 24px;font-size:var(--fs-ui)}
.acct-intro .acct-checks li:before{top:9px}
.acct-intro .acct-actions{margin-top:14px}
.acct-intro-close{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--mt);background:none;border:0;border-radius:4px;cursor:pointer}
.acct-intro-close:hover{color:var(--tx);background:var(--warm-hover)}
:root[data-theme="dark"] .acct-intro{box-shadow:0 14px 34px rgba(0,0,0,.5)}
:root[data-theme="dark"] .acct-intro-kicker .acct-star{color:#f5c04e;fill:#f5c04e}
body.has-acct-preview .acct-intro{bottom:84px}
@media(max-width:768px){
  .acct-intro{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto;max-width:none;padding:14px 16px 16px}
  .acct-intro .acct-button{min-height:44px}
  .acct-intro-close{top:4px;right:4px;width:44px;height:44px}
  body.has-acct-preview .acct-intro{bottom:calc(76px + env(safe-area-inset-bottom))}
}
/* The phone's full-screen search covers the page, and the card too. */
body:has(.home-hero.is-searching) .acct-intro{display:none}