/* Members on Daylight Lab: the account menu, the sign-up gate for a like or save, the like/save bar under a
   standalone Original and the request form's subscribe step. Tokens come from daylight.css (inlined on tool
   pages); the fallbacks keep a page readable without it. */

/* ---------- Account menu ---------- */
.account{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap}
.account-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:6px 2px;border:0;background:none;color:var(--dl-ink,#151A2D);font:600 15px/1.2 var(--dl-body,'DM Sans',Arial,sans-serif);white-space:nowrap;cursor:pointer}
.account-toggle:hover{color:var(--dl-cobalt,#2D55F2)}
.account-toggle[disabled]{opacity:.6;cursor:default}
.account-toggle:focus-visible{outline:3px solid var(--dl-cobalt,#2D55F2);outline-offset:3px;border-radius:999px}
.account-mark{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--dl-sand,#E7E1D4);color:var(--dl-ink,#151A2D);font:700 14px/1 var(--dl-display,'Space Grotesk',Arial,sans-serif)}
.account-mark svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.account-mark.is-member{background:var(--dl-cobalt,#2D55F2);color:#fff}
.account-toggle[aria-expanded=true] .account-mark{box-shadow:0 0 0 3px var(--dl-cobalt-soft,#E6EBFF)}
.account-panel{position:absolute;z-index:60;top:calc(100% + 10px);right:0;box-sizing:border-box;width:min(320px,calc(100vw - 24px));padding:18px;border:1px solid var(--dl-line,#DED8CC);border-radius:18px;background:#fff;color:var(--dl-ink,#151A2D);box-shadow:0 22px 50px rgba(21,26,45,.16);text-align:left;white-space:normal;font-family:var(--dl-body,'DM Sans',Arial,sans-serif)}
.account-panel[hidden]{display:none}
.account-lead,.account-who{margin:0;font-size:15px;line-height:1.5;color:var(--dl-ink-2,#3A4157)}
.account-who strong{color:var(--dl-ink,#151A2D);overflow-wrap:anywhere}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.account-actions .dl-btn{flex:1 1 auto;min-height:44px;padding:10px 16px;font-size:15px}
.account-actions .dl-btn[disabled]{opacity:.55;cursor:wait}
.account-secondary{min-height:44px;margin:0;padding:8px 14px;border:1.5px solid var(--dl-line-2,#CFC8BA);border-radius:999px;background:#fff;color:var(--dl-ink,#151A2D);font:600 14px/1.2 var(--dl-body,'DM Sans',Arial,sans-serif);cursor:pointer}
.account-secondary:hover{border-color:var(--dl-ink,#151A2D)}
.account-secondary[disabled]{opacity:.6;cursor:wait}
.account-links{display:grid;gap:2px;margin:12px 0 0;padding:0;list-style:none}
.account-links li{margin:0}
.account-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 10px;border-radius:12px;color:var(--dl-ink,#151A2D);font-weight:600;text-decoration:none}
.account-links a:hover{background:var(--dl-paper,#F6F3EC);color:var(--dl-cobalt-deep,#1B36B5)}
.account-count{min-width:24px;padding:2px 8px;border-radius:999px;background:var(--dl-sand,#E7E1D4);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.account-fine{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--dl-muted,#5C6378)}
.account-status{margin:10px 0 0;font-size:14px;font-weight:600;line-height:1.45;color:var(--dl-cobalt-deep,#1B36B5)}
.account-status:empty{display:none}
.account-status.is-error{color:var(--dl-coral-ink,#B83A1F)}
/* Lower in a tool page the inline panel opens in the page; the top action bar overrides it below. */
.account.is-inline .account-panel{position:static;width:100%;max-width:420px;margin-top:8px;box-shadow:none}

/* Editorial header: the account sits after the navigation. */
.editorial-header>.account{flex:none}
@media(min-width:701px){.editorial-header{justify-content:flex-start}.editorial-header nav{margin-left:auto}}
/* Seven links already fill the header below about 1000px (1280px in the catalog, which also has Submit); there
   the account shows its mark alone and keeps its name for assistive technology. */
@media(min-width:701px) and (max-width:1280px){.site-header .account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.site-header .account-toggle{min-width:44px;justify-content:center}}
@media(min-width:701px) and (max-width:1000px){.editorial-header .account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.editorial-header .account-toggle{min-width:44px;justify-content:center}}
@media(max-width:700px){
 .editorial-header{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
 .editorial-header>.account{grid-column:2;grid-row:1}
 .editorial-header>.menu-toggle{grid-column:3}
 .account:not(.is-inline) .account-toggle{min-width:44px;justify-content:center;padding:0}
 .account:not(.is-inline) .account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .account:not(.is-inline) .account-mark{width:36px;height:36px}
 /* Under a phone header the panel spans the screen, just below the button that opened it. */
 .account:not(.is-inline) .account-panel{position:fixed;top:var(--account-top,76px);left:12px;right:12px;width:auto}
}
@media(max-width:430px){
 .editorial-header{padding-left:16px;padding-right:16px}
 .editorial-header .menu-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .editorial-header>.menu-toggle{min-width:44px;min-height:44px;justify-content:center}
}
@media(max-width:360px){.editorial-header>.dl-wordmark{font-size:18px}}

/* ---------- Sign-up gate for a like or save ---------- */
dialog.member-gate{box-sizing:border-box;width:min(460px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:var(--dl-r,22px);background:#fff;color:var(--dl-ink,#151A2D);box-shadow:0 30px 90px rgba(21,26,45,.28);overflow:auto;font-family:var(--dl-body,'DM Sans',Arial,sans-serif)}
dialog.member-gate::backdrop{background:rgba(21,26,45,.55)}
.member-gate-body{padding:26px 26px 18px}
.member-gate .dl-eyebrow{margin:0}
.member-gate h2{margin:8px 0 0;font:700 25px/1.15 var(--dl-display,'Space Grotesk',Arial,sans-serif);letter-spacing:-.035em;color:var(--dl-ink,#151A2D);overflow-wrap:anywhere}
.member-gate-body>p{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--dl-ink-2,#3A4157)}
.member-gate-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.member-gate-actions .dl-btn{flex:1 1 170px}
.member-gate-body>p.member-gate-fine{font-size:13px;color:var(--dl-muted,#5C6378)}
.member-gate-status:empty{display:none}
.member-gate-body>p.member-gate-status.is-error{color:var(--dl-coral-ink,#B83A1F);font-weight:600}
.member-gate-close{display:block;min-height:44px;margin:12px auto 0;padding:8px 16px;border:0;background:none;color:var(--dl-ink-2,#3A4157);font:600 15px/1.2 var(--dl-body,'DM Sans',Arial,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.member-gate-close:hover{color:var(--dl-ink,#151A2D)}
.member-gate button:focus-visible{outline:3px solid var(--dl-cobalt,#2D55F2);outline-offset:3px}
@media(max-width:640px){
 dialog.member-gate{width:100%;max-height:calc(100dvh - 24px);margin:auto 0 0;border-radius:var(--dl-r,22px) var(--dl-r,22px) 0 0}
 .member-gate-body{padding:22px 20px calc(16px + env(safe-area-inset-bottom,0px))}
 .member-gate h2{font-size:23px}
}

/* ---------- Like and save on catalog cards, creator works and standalone tools ---------- */
.action-button[aria-disabled=true]{opacity:.55;cursor:wait}
.creator-rich .work-member{display:inline-flex;align-items:center;gap:6px}
.creator-rich .work-member .action-button{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:6px 12px;border:1.5px solid var(--line-2,#CFC8BA);border-radius:999px;background:#fff;color:var(--ink-2,#3A4157);font:600 13px/1.2 var(--body,'DM Sans',Arial,sans-serif);cursor:pointer}
.creator-rich .work-member .action-button:hover{border-color:var(--ink,#151A2D);color:var(--ink,#151A2D)}
.creator-rich .work-member .action-button[aria-pressed=true]{border-color:var(--cobalt,#2D55F2);background:var(--cobalt-soft,#E6EBFF);color:var(--cobalt-deep,#1B36B5)}
.creator-rich .work-member .action-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.creator-rich .work-member .action-button[aria-pressed=true] svg{fill:#C9D3FF}
.et-share-tool.et-member-bar{flex-wrap:wrap;align-items:center;gap:10px}
.et-member-action{display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;margin:0;padding:8px 14px;border:1.5px solid var(--dl-line-2,#CFC8BA);border-radius:999px;background:#fff;color:var(--dl-ink,#151A2D);font:600 14px/1.2 var(--dl-body,'DM Sans',Arial,sans-serif);white-space:nowrap;cursor:pointer}
.et-member-action:hover{border-color:var(--dl-ink,#151A2D)}
.et-member-action:focus-visible{outline:3px solid var(--dl-cobalt,#2D55F2);outline-offset:3px}
.et-member-action svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.et-member-action[aria-pressed=true]{border-color:var(--dl-cobalt,#2D55F2);background:var(--dl-cobalt-soft,#E6EBFF);color:var(--dl-cobalt-deep,#1B36B5)}
.et-member-action[aria-pressed=true] svg{fill:#C9D3FF}
.et-member-action:disabled{opacity:.6;cursor:wait}
.et-member-action[hidden]{display:none}
.et-member-count{font-variant-numeric:tabular-nums;color:var(--dl-muted,#5C6378)}
.et-member-action[aria-pressed=true] .et-member-count{color:inherit}
.et-member-account{flex-basis:100%;min-width:0}
.et-member-account:empty{display:none}
.et-member-status{flex-basis:100%;margin:0;font-size:14px;font-weight:600;line-height:1.45;color:var(--dl-cobalt-deep,#1B36B5)}
.et-member-status:empty{display:none}
.et-member-status.is-error{color:var(--dl-coral-ink,#B83A1F)}

/* At the top of a tool page the bar is one row, with the account's mark at its end. Its panel drops over the page
   there, so opening it never pushes the stage down or past a v2 phone screen. */
:is(.tl-head,.et-head)>.et-share-tool.et-member-bar{gap:8px}
:is(.tl-head,.et-head)>.et-member-bar .et-member-account{flex:none;margin-left:auto}
:is(.tl-head,.et-head)>.et-member-bar .account.is-inline .account-panel{position:absolute;top:calc(100% + 8px);right:0;width:min(320px,calc(100vw - 24px));max-width:none;margin:0;box-shadow:0 22px 50px rgba(21,26,45,.16)}
@media(max-width:700px){
 :is(.tl-head,.et-head)>.et-share-tool.et-member-bar{gap:6px}
 :is(.tl-head,.et-head)>.et-member-bar .et-member-action{gap:5px;padding:0 11px;font-size:13px}
 :is(.tl-head,.et-head)>.et-member-bar .et-member-action svg{width:17px;height:17px}
 :is(.tl-head,.et-head)>.et-member-bar .account-toggle{min-width:44px;justify-content:center;padding:0}
 :is(.tl-head,.et-head)>.et-member-bar .account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 :is(.tl-head,.et-head)>.et-member-bar .account-mark{width:36px;height:36px}
}
/* Under 360px Like keeps its heart, count and pressed state; its word stays in the accessible name. */
@media(max-width:359px){
 :is(.tl-head,.et-head)>.et-member-bar .et-member-action{padding:0 10px}
 :is(.tl-head,.et-head)>.et-member-bar [data-member-action=like] .et-member-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- Request form: the subscribe step ---------- */
#request-form .request-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start}
#request-form .request-check[hidden]{display:none}
#request-form .request-check input{width:22px;height:22px;margin:1px 0 0;padding:0;border:0;border-radius:4px;accent-color:var(--dl-cobalt,#2D55F2);cursor:pointer}
#request-form .request-check input:disabled{cursor:default}
#request-form .request-check label{font-size:15px;font-weight:600;line-height:1.4;color:var(--dl-ink,#151A2D);cursor:pointer}
#request-form .request-check-note{grid-column:2;margin:0;font-size:13px;line-height:1.45;color:var(--dl-muted,#5C6378)}
#request-form [aria-invalid=true]{border-color:var(--dl-coral,#F2603F)}
#request-form .request-check input[aria-invalid=true]{outline:2px solid var(--dl-coral,#F2603F);outline-offset:2px}
#request-form .form-note a{color:var(--dl-cobalt-deep,#1B36B5);text-decoration:underline;text-underline-offset:3px}
.request-error{margin:0;font-weight:600;line-height:1.45;color:var(--dl-coral-ink,#B83A1F)}
.request-error:empty{display:none}
.request-email-result{margin:0;line-height:1.5;color:var(--dl-ink-2,#3A4157)}
.request-email-result:empty{display:none}
.request-email-result.is-error{font-weight:600;color:var(--dl-coral-ink,#B83A1F)}
.request-email-result:focus{outline:none}
.request-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#request-form .request-buttons .dl-btn{align-self:auto;margin-top:2px}

@media(forced-colors:active){
 .account-mark,.et-member-action,.account-secondary,dialog.member-gate,.account-panel{border:1px solid ButtonText}
 .et-member-action[aria-pressed=true],.creator-rich .work-member .action-button[aria-pressed=true]{outline:2px solid Highlight}
}
@media(prefers-reduced-motion:reduce){.account-panel,dialog.member-gate{animation:none;transition:none}}