/* Accounts and the panel's places (account.js, wiki/pages/panel-structure.md): the panel's first
   line (you, or "Log in"), the account menu, the places that slide in over the map panel (Your
   maps, Tickets, Settings, Passkeys) and the sheet for tasks. In the panel's own type and inks; one
   filled claret button at most on a screen; red only for deleting. */

/* The panel's first line: you on the left, on the same line as the hide arrow (top right,
   desktop). Kept from the first frame (index.html) so nothing below it moves */
.map-overlay .account-bar { display: flex; justify-content: flex-start; align-items: center; min-height: 26px; margin: -6px 0 8px -2px; }
.map-overlay .account-bar.is-off { display: none; }
@media (min-width: 769px) { .map-overlay .account-bar { padding-right: 34px; } #account-bar-m { display: none !important; } }
@media (max-width: 768px) {
    #account-bar { display: none !important; }
    .map-overlay .mobile-header { position: relative; }
    .map-overlay .mobile-header #account-bar-m { position: absolute; left: 18px; top: 10px; margin: 0; padding: 0; min-height: 30px; }
    .map-overlay:not(.expanded) .mobile-header #account-bar-m { display: none; }
    .map-overlay .mobile-header #account-bar-m .account-me, .map-overlay .mobile-header #account-bar-m .account-signin { font-size: 14px; }
}
.map-overlay .account-skel { width: 74px; height: 22px; border-radius: 999px; }
.map-overlay .account-signin { height: 24px; padding: 0 11px; border: 1px solid var(--panel-rule); border-radius: 999px; background: none;
    font: 500 12.5px 'Inter', sans-serif; color: var(--panel-ink); cursor: pointer; }
.map-overlay .account-signin:hover { border-color: rgba(153, 15, 61, 0.45); color: var(--panel-claret); }
/* Sign up first, in the claret ink (not filled: one filled claret button at most on a screen) */
.map-overlay .account-signin + .account-signin { margin-left: 6px; }
.map-overlay .account-signup { color: var(--panel-claret); border-color: rgba(153, 15, 61, 0.35); }
.map-overlay .account-me { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 26px; padding: 0 9px 0 2px; border: 0; border-radius: 999px;
    background: rgba(153, 15, 61, 0.07); color: var(--panel-ink); font: 500 12.5px 'Inter', sans-serif; cursor: pointer; }
.map-overlay .account-me:hover, .map-overlay .account-me[aria-expanded="true"] { background: rgba(153, 15, 61, 0.12); }
.map-overlay .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.map-overlay .account-chev { width: 6px; height: 6px; margin: -3px 0 0 1px; border: solid var(--panel-soft); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .3s var(--spring, ease), margin .3s ease; }
.map-overlay .account-me[aria-expanded="true"] .account-chev { transform: rotate(-135deg); margin-top: 3px; }
.map-overlay.dark-theme .account-me { background: rgba(242, 157, 184, 0.12); }
.account-initial { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--panel-claret, #990f3d); color: #fff; font: 600 11px/1 'Inter', sans-serif; }

/* The account menu (a popover): who you are, three places, log out. It grows from its button */
.account-menu { position: fixed; inset: auto; margin: 0; width: 236px; box-sizing: border-box; padding: 6px; border: 1px solid rgba(43, 38, 32, 0.12); border-radius: 12px;
    background: #fbf9f4; color: #2b2620; box-shadow: 0 18px 44px -12px rgba(30, 20, 12, 0.35), 0 2px 6px rgba(30, 20, 12, 0.08);
    font: 400 13.5px/1.35 'Inter', sans-serif; transform-origin: 20px 0; }
.account-menu:not([popover]):not(.is-open) { display: none; }
.account-menu .am-who { display: grid; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(43, 38, 32, 0.1); }
.account-menu .am-who b { font: 400 16px/1.2 'Source Serif 4', Georgia, serif; overflow-wrap: anywhere; }
.account-menu .am-who span { font-size: 12px; color: #6f675c; overflow-wrap: anywhere; }
.account-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
    background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.account-menu button:hover, .account-menu button:focus-visible { background: rgba(153, 15, 61, 0.07); outline: none; }
.account-menu button em { font-style: normal; color: #9a9184; font-variant-numeric: tabular-nums; }
.account-menu hr { border: 0; border-top: 1px solid rgba(43, 38, 32, 0.1); margin: 4px 0; }
.account-menu { transition: opacity .15s ease, transform .3s var(--spring, ease), overlay .3s allow-discrete, display .3s allow-discrete; }
.account-menu[popover]:not(:popover-open) { opacity: 0; transform: translateY(-4px) scale(.96); }
@starting-style { .account-menu:popover-open { opacity: 0; transform: translateY(-4px) scale(.96); } }

/* The places: in place of the map panel (the overlay gets .account-mode), sliding in from the right */
.map-overlay.account-mode #map-panel-content, .map-overlay.account-mode .panel-actions { display: none !important; }
.map-overlay:not(.account-mode) #account-panel { display: none; }
.map-overlay .account-panel .pl-bar { display: flex; align-items: center; min-height: 26px; margin: -6px 0 8px -2px; }
@media (min-width: 769px) { .map-overlay .account-panel .pl-bar { padding-right: 34px; } }
.map-overlay .account-panel .pl-back { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px 3px 2px; border: 0; border-radius: 7px;
    background: none; font: 500 13px 'Inter', sans-serif; color: var(--panel-claret); cursor: pointer; }
.map-overlay .account-panel .pl-back span { font-size: 17px; line-height: 0; margin-right: 2px; position: relative; top: 1px; }
.map-overlay .account-panel .pl-back:hover { background: rgba(153, 15, 61, 0.06); }
.map-overlay .account-panel .pl-title { margin: 0 0 6px; font: 400 26px/1.15 'Source Serif 4', Georgia, serif; color: var(--panel-ink); text-wrap: balance; }
.map-overlay .account-panel .pl-lede { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--panel-soft); }
.map-overlay .account-panel .pl-group { margin-top: 20px; }
.map-overlay .account-panel .pl-label { margin: 0 0 6px 2px; font: 600 10.5px/1.3 'Inter', sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--panel-faint); }
.map-overlay .account-panel .pl-rows { border: 1px solid var(--panel-rule); border-radius: 12px; background: var(--panel-field); overflow: hidden; }
.map-overlay .account-panel .pl-row { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px;
    border: 0; border-top: 1px solid var(--panel-rule); background: none; font: 400 14px/1.35 'Inter', sans-serif; color: var(--panel-ink); text-align: left; }
.map-overlay .account-panel .pl-rows > .pl-row:first-child { border-top: 0; }
.map-overlay .account-panel button.pl-row, .map-overlay .account-panel label.pl-row { cursor: pointer; }
.map-overlay .account-panel button.pl-row:hover, .map-overlay .account-panel label.pl-row:hover { background: rgba(153, 15, 61, 0.04); }
.map-overlay .account-panel .pl-k { flex: 1; min-width: 0; }
.map-overlay .account-panel .pl-v { min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--panel-soft); }
.map-overlay .account-panel .pl-v i { font-style: normal; color: var(--panel-faint); }
.map-overlay .account-panel .pl-chev { flex: none; margin-left: -4px; font-size: 17px; line-height: 1; color: var(--panel-faint); }
.map-overlay .account-panel .pl-act { flex: none; padding: 4px 6px; margin: -4px -6px -4px 0; border: 0; border-radius: 6px; background: none;
    font: 500 13px 'Inter', sans-serif; color: var(--panel-claret); cursor: pointer; }
.map-overlay .account-panel .pl-act + .pl-act { margin-left: 2px; }
.map-overlay .account-panel .pl-act:hover { background: rgba(153, 15, 61, 0.07); }
.map-overlay .account-panel .pl-row.is-danger .pl-k { color: #8f1d1d; }
.map-overlay.dark-theme .account-panel .pl-row.is-danger .pl-k { color: #f0a090; }
.map-overlay .account-panel .pl-passkey .pl-k b { display: block; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-overlay .account-panel .pl-passkey .pl-k small { display: block; font-size: 11.5px; color: var(--panel-soft); }
.map-overlay .account-panel .pl-inline-form { display: flex; gap: 6px; padding: 6px; }
.map-overlay .account-panel .pl-inline-form input { flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--panel-rule); border-radius: 8px;
    background: var(--panel-paper, #fff); font: 400 15px 'Inter', sans-serif; color: var(--panel-ink); }
.map-overlay .account-panel .pl-inline-form input:focus { border-color: rgba(153, 15, 61, 0.45); box-shadow: 0 0 0 3px rgba(153, 15, 61, 0.1); outline: none; }
.map-overlay .account-panel .pl-inline-form button { flex: none; border: 0; border-radius: 8px; padding: 0 13px; background: var(--panel-claret); color: #fff; font: 600 13px 'Inter', sans-serif; cursor: pointer; }
/* a switch for yes/no settings */
.map-overlay .account-panel .pl-toggle input { flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 36px; height: 21px; margin: 0; border-radius: 99px;
    background: rgba(43, 38, 32, 0.18); cursor: pointer; transition: background-color .2s ease; }
.map-overlay .account-panel .pl-toggle input::after { content: ''; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform .3s var(--spring, ease); }
.map-overlay .account-panel .pl-toggle input:checked { background: var(--panel-claret); }
.map-overlay .account-panel .pl-toggle input:checked::after { transform: translateX(15px); }
.map-overlay .account-panel .pl-toggle input:focus-visible { outline: 2px solid var(--panel-claret); outline-offset: 2px; }
.map-overlay .account-panel .pl-foot { margin: 16px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--panel-soft); }
.map-overlay .account-panel .pl-inline { padding: 0; border: 0; background: none; font: 500 12.5px 'Inter', sans-serif; color: var(--panel-claret); cursor: pointer; }
.map-overlay .account-panel .pl-inline:hover { text-decoration: underline; }
.map-overlay .account-panel .pl-empty { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--panel-soft); }
.map-overlay .account-panel .pl-new { display: block; width: 100%; margin: 10px 0 12px; padding: 9px; border: 1px solid var(--panel-rule); border-radius: 10px; background: none;
    font: 600 13px 'Inter', sans-serif; color: var(--panel-claret); cursor: pointer; }
.map-overlay .account-panel .pl-new:hover { border-color: rgba(153, 15, 61, 0.4); background: rgba(153, 15, 61, 0.04); }
.map-overlay .account-panel .pl-cta { display: block; width: 100%; margin-top: 14px; }
.map-overlay .account-panel .account-cta { border: 0; border-radius: 10px; padding: 10px; background: var(--panel-claret); color: #fff; font: 600 13.5px 'Inter', sans-serif; cursor: pointer; }
.map-overlay .account-panel .account-error { margin: 8px 0 4px; padding: 9px 11px; border-radius: 9px; background: #fbeef1; color: #7d0c32; font-size: 13px; }
.map-overlay .account-panel .account-note { margin: 8px 0 4px; padding: 9px 11px; border-radius: 9px; background: #eef3ec; color: #2f5130; font-size: 13px; }
.map-overlay.dark-theme .account-panel .account-error { background: rgba(242, 157, 184, 0.12); color: #f29db8; }
.map-overlay.dark-theme .account-panel .account-note { background: rgba(160, 210, 160, 0.12); color: #bfe0bf; }

/* A map's card in Your maps: a poster badge, and a ⋯ that opens its actions under it (Make a
   poster, Remove…; Remove asks first) */
.map-cards .map-card { position: relative; }
.map-cards .map-badge { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px; vertical-align: 2px; background: rgba(153, 15, 61, 0.08);
    font: 600 9.5px/1.4 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-claret); }
.map-cards .card-more { flex: none; width: 30px; height: 30px; margin-right: 6px; border: 0; border-radius: 7px; background: none; font-size: 17px; line-height: 1;
    color: var(--panel-faint); cursor: pointer; }
.map-cards .card-more:hover, .map-cards .card-more[aria-expanded="true"] { background: rgba(153, 15, 61, 0.07); color: var(--panel-claret); }
.map-cards .card-menu { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 8px; padding: 6px 0 8px;
    border-top: 1px solid var(--panel-rule); }
.map-cards .card-menu[hidden] { display: none; }
.map-cards .card-menu button { padding: 6px 10px; border: 1px solid var(--panel-rule); border-radius: 8px; background: none;
    font: 500 12.5px 'Inter', sans-serif; color: var(--panel-ink); cursor: pointer; }
.map-cards .card-menu button:hover { border-color: rgba(153, 15, 61, 0.4); color: var(--panel-claret); }
.map-cards .card-menu .danger { color: #8f1d1d; }
.map-cards .card-menu .danger:hover { border-color: rgba(143, 29, 29, 0.5); color: #8f1d1d; }
.map-cards .card-menu p { flex-basis: 100%; margin: 0 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--panel-soft); }
.map-cards .card-menu { transition: opacity .2s ease, transform .3s var(--spring, ease), display .3s allow-discrete; }
@starting-style { .map-cards .card-menu:not([hidden]) { opacity: 0; transform: translateY(-3px); } }

.account-sheet .account-switch { margin: 16px 0 0; font-size: 13.5px; color: var(--soft); text-align: center; }
.account-sheet .account-switch .account-link { font-size: 13.5px; padding: 0; }
.account-sheet {
    --ink: #2b2620; --soft: #6f675c; --faint: #9a9184; --rule: rgba(43, 38, 32, 0.12); --claret: #990f3d; --paper: #faf7f0;
    width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-sizing: border-box; overflow: auto;
    padding: 26px 24px 20px; border: 0; border-radius: 18px; background: var(--paper); color: var(--ink);
    font: 400 14px/1.5 'Inter', sans-serif; box-shadow: 0 24px 60px rgba(20, 15, 10, 0.3); }
.account-sheet::backdrop { background: rgba(30, 24, 18, 0.45); }
.account-sheet h2 { font: 400 28px/1.15 'Source Serif 4', Georgia, serif; color: var(--claret); margin: 0 30px 10px 0; }
.account-sheet h3 { font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); margin: 20px 0 8px; }
.account-sheet .account-lede { color: var(--soft); margin: 0 0 18px; }
.account-sheet .account-lede b { color: var(--ink); font-weight: 600; }
.account-sheet .account-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 8px;
    background: none; color: var(--faint); font-size: 22px; cursor: pointer; }
.account-sheet .account-close:hover { background: rgba(43, 38, 32, 0.06); color: var(--ink); }
.account-sheet .account-form { display: grid; gap: 8px; }
.account-sheet label[for] { font: 600 12.5px 'Inter', sans-serif; color: var(--soft); }
.account-sheet input[type=email], .account-sheet .account-rename input {
    width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 10px; background: #fff;
    font: 400 16px 'Inter', sans-serif; color: var(--ink); }
.account-sheet input:focus { border-color: rgba(153, 15, 61, 0.45); box-shadow: 0 0 0 3px rgba(153, 15, 61, 0.1); outline: none; }
.account-sheet .account-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); margin: 6px 0 8px; cursor: pointer; }
.account-sheet .account-check input { accent-color: var(--claret); width: 16px; height: 16px; }
.account-sheet .account-cta { display: block; width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--claret); color: #fff;
    font: 600 15px 'Inter', sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none; }
.account-sheet .account-cta:hover:not(:disabled) { background: #7d0c32; }
.account-sheet .account-link { background: none; border: 0; padding: 2px 0; color: var(--claret); font: 600 14px 'Inter', sans-serif; cursor: pointer;
    -webkit-appearance: none; appearance: none; }
.account-sheet .account-link:hover { text-decoration: underline; }
/* the sheet opens with focus on its heading, so nothing shows a focus ring until someone uses the keyboard */
.account-sheet h2:focus { outline: none; }
.account-sheet button:focus { outline: none; }
.account-sheet button:focus-visible { outline: 2px solid var(--claret); outline-offset: 2px; }
.account-sheet .account-cta:disabled, .account-sheet button:disabled { opacity: 0.55; cursor: default; }
.account-sheet .account-secondary { width: 100%; padding: 11px; border: 1.5px solid var(--claret); border-radius: 11px; background: #fff;
    color: var(--claret); font: 600 14px 'Inter', sans-serif; cursor: pointer; }
.account-sheet .account-secondary:hover:not(:disabled) { background: #fff6f8; }
/* two choices side by side (Download your routes: CSV, GeoJSON) */
.account-sheet .account-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.account-sheet .account-pair .account-secondary { padding: 13px; }
.account-sheet .account-or { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; color: var(--faint); font-size: 12.5px; }
.account-sheet .account-or::before, .account-sheet .account-or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.account-sheet .account-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fbeef1; color: #7d0c32; font-size: 13.5px; }
.account-sheet .account-small { margin: 18px 0 0; font-size: 12px; color: var(--faint); }
.account-sheet .account-small a { color: var(--soft); }
/* a link in a sentence of small print (the code screen's "make an account with a passkey") */
.account-sheet .account-textlink { padding: 0; border: 0; background: none; font: inherit; color: var(--soft); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.account-sheet .account-passkeys { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.account-sheet .account-passkeys li { display: flex; align-items: center; gap: 6px; padding: 9px 10px 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.account-sheet .account-passkeys li > div { flex: 1; min-width: 0; }
.account-sheet .account-passkeys b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sheet .account-passkeys span { display: block; font-size: 12px; color: var(--soft); }
.account-sheet .account-mini { flex: none; border: 0; background: none; color: var(--soft); font: 500 12.5px 'Inter', sans-serif; padding: 6px 6px; border-radius: 6px; cursor: pointer; }
.account-sheet .account-mini:hover { background: rgba(153, 15, 61, 0.06); color: var(--claret); }
.account-sheet .account-rename { display: flex; gap: 6px; flex: 1; }
.account-sheet .account-rename input { padding: 7px 10px; font-size: 15px; }
.account-sheet .account-rename button { border: 0; border-radius: 8px; background: var(--claret); color: #fff; font: 600 13px 'Inter', sans-serif; padding: 0 12px; cursor: pointer; }
.account-sheet .account-row-buttons { display: flex; gap: 8px; margin-top: 6px; }
.account-sheet .account-row-buttons > * { flex: 1; }
.account-sheet .account-danger { padding: 11px; border: 0; border-radius: 11px; background: #8f1d1d; color: #fff; font: 600 14px 'Inter', sans-serif; cursor: pointer; }
.account-sheet .account-foot { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.account-sheet .account-link.danger { color: #8f1d1d; font-weight: 500; }
.account-sheet .account-stack { display: grid; gap: 10px; }
.account-sheet .account-alt { display: block; margin: 16px auto 0; font-weight: 500; font-size: 13.5px; }
.account-sheet .account-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #eef3ec; color: #2f5130; font-size: 13.5px; }
.account-sheet .account-box { display: grid; gap: 6px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid rgba(153, 15, 61, 0.22); border-radius: 12px; background: #fff; }
.account-sheet .account-box b { font-weight: 600; }
.account-sheet .account-box span { font-size: 13px; color: var(--soft); }
.account-sheet .account-box .account-cta { margin-top: 4px; }
.account-sheet .account-inline { display: flex; gap: 6px; flex: 1; margin-top: 4px; }
.account-sheet .account-inline input { flex: 1; min-width: 0; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 9px; background: #fff;
    font: 400 16px 'Inter', sans-serif; color: var(--ink); }
.account-sheet .account-inline button { border: 0; border-radius: 9px; background: var(--claret); color: #fff; font: 600 13.5px 'Inter', sans-serif; padding: 0 14px; cursor: pointer; }
.account-sheet .account-code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.account-sheet input.account-code#account-code { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; font: 500 22px 'Inter', sans-serif; text-align: center; }

/* Optional fields in the sign-up sheet */
.account-sheet .account-optional { font-weight: 400; color: var(--faint); margin-left: 4px; }
.account-sheet .account-form input[type=text], .account-sheet .account-form input:not([type]) {
    width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 10px; background: #fff;
    font: 400 16px 'Inter', sans-serif; color: var(--ink); }
.account-sheet .account-form label + input { margin-bottom: 6px; }
.account-sheet .account-hint { margin: -4px 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--soft); }
.account-sheet .account-form .account-cta { margin-top: 6px; }

/* Motion (styles.css, motion.js): the sheet rises in over a dimming map and sinks away; its steps
   (sign up, log in, the code) fade into each other while it changes size (a View Transition) */
.account-sheet { view-transition-name: account-sheet;
    transition: opacity .2s ease, transform .45s var(--spring), overlay .45s allow-discrete, display .45s allow-discrete; }
.account-sheet:not([open]) { opacity: 0; transform: translateY(14px) scale(.97); transition-duration: .18s, .25s, .25s, .25s; }
@starting-style { .account-sheet[open] { opacity: 0; transform: translateY(14px) scale(.97); } }
.account-sheet::backdrop { background-color: rgba(30, 24, 18, 0); transition: background-color .3s ease, overlay .3s allow-discrete, display .3s allow-discrete; }
.account-sheet[open]::backdrop { background-color: rgba(30, 24, 18, 0.45); }
@starting-style { .account-sheet[open]::backdrop { background-color: rgba(30, 24, 18, 0); } }
::view-transition-group(account-sheet) { animation-duration: .4s; animation-timing-function: var(--glide); }
::view-transition-old(account-sheet) { animation-duration: .16s; }
::view-transition-new(account-sheet) { animation-duration: .3s; animation-delay: .04s; }
@media (prefers-reduced-motion: reduce) {
    .account-sheet, .account-sheet::backdrop { transition-duration: 0s !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* The member's ticket (site/ticket/), in the sheet after signing up and from the panel */
.account-sheet .account-ticket { position: relative; height: 230px; margin: 4px -24px 6px; cursor: grab; touch-action: pan-y; }
.account-sheet .account-ticket:active { cursor: grabbing; }
.account-sheet .account-ticket .ticket-canvas { position: absolute; inset: 0; display: block; }
.account-sheet .account-ticket-lede { text-align: center; margin: 0 0 16px; }

/* The ticket collection (account.js): tickets as small pictures, a little askew, like a pile kept in a
   drawer; straight when you point at one. Grouped by map, in Tickets. */
.map-overlay .account-panel .ticket-grid, .map-overlay .account-panel .ticket-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 12px; }
.map-overlay .account-panel .ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.map-overlay .account-panel .ticket-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 8px; }
.map-overlay .account-panel .ticket-strip .ticket-caption { display: none; }
.map-overlay .account-panel .ticket-item { min-width: 0; display: grid; justify-items: center; gap: 6px; }
.map-overlay .account-panel .ticket-item.is-member { grid-column: 1 / -1; }
.map-overlay .account-panel .ticket-thumb { display: grid; place-items: end center; width: 100%; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; }
.map-overlay .account-panel .ticket-strip .ticket-thumb { height: 58px; }
.map-overlay .account-panel .ticket-item.is-member .ticket-thumb { height: 120px; }
.map-overlay .account-panel .ticket-thumb img { display: block; max-width: 100%; max-height: 100%; border-radius: 3px; background: rgba(43, 38, 32, 0.06);
  min-width: 40px; min-height: 30px; box-shadow: 0 1px 2px rgba(20, 15, 10, 0.25), 0 6px 14px rgba(20, 15, 10, 0.16);
  transform: rotate(var(--tilt, -1.5deg)); transition: transform .35s var(--spring, ease), box-shadow .25s ease; }
.map-overlay .account-panel .ticket-item:nth-child(3n+2) .ticket-thumb img { --tilt: 1.8deg; }
.map-overlay .account-panel .ticket-item:nth-child(3n) .ticket-thumb img { --tilt: -0.6deg; }
.map-overlay .account-panel .ticket-thumb:hover img, .map-overlay .account-panel .ticket-thumb:focus-visible img { transform: rotate(0) translateY(-3px) scale(1.03);
  box-shadow: 0 2px 4px rgba(20, 15, 10, 0.25), 0 12px 24px rgba(20, 15, 10, 0.2); }
.map-overlay .account-panel .ticket-thumb img:not([src]) { width: 100%; height: 70%; }
.map-overlay .account-panel .ticket-caption { max-width: 100%; font: 500 11.5px/1.3 'Inter', sans-serif; color: var(--panel-soft); text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.account-sheet .account-ticket-title { font-size: 22px; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .map-overlay .account-panel .ticket-thumb img { transition: none; } }

/* A returning visitor's nudge: one line under the map's status, quieter than the routes */
.map-overlay .account-nudge { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t x" "b x"; column-gap: 8px; row-gap: 6px;
    margin: 10px 0 2px; padding: 10px 6px 10px 12px; border-radius: 10px; background: rgba(153, 15, 61, 0.06);
    font: 400 13px/1.45 'Inter', sans-serif; color: var(--panel-soft); }
.map-overlay .account-nudge > span { grid-area: t; }
.map-overlay .account-nudge b { font-weight: 600; color: var(--panel-ink); }
.map-overlay .account-nudge-go { grid-area: b; justify-self: start; padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 13px 'Inter', sans-serif; color: var(--panel-claret); }
.map-overlay .account-nudge-go:hover { text-decoration: underline; }
.map-overlay .account-nudge-x { grid-area: x; align-self: start; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; cursor: pointer;
    font: 400 18px/1 'Inter', sans-serif; color: var(--panel-faint); }
.map-overlay .account-nudge-x:hover { background: rgba(43, 38, 32, 0.07); color: var(--panel-ink); }
.map-overlay.dark-theme .account-nudge { background: rgba(255, 255, 255, 0.06); }
/* it arrives softly and fades by itself (account.js, renderNudge) */
.map-overlay .account-nudge { transition: opacity .4s ease, transform .4s var(--spring, ease); }
@starting-style { .map-overlay .account-nudge { opacity: 0; transform: translateY(-4px); } }
.map-overlay .account-nudge.is-leaving { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .map-overlay .account-nudge { transition: opacity .2s linear; transform: none !important; } }