/* The v2 profile pages (Phase 014, step 7): my profile (Profile/state.htm), and the passport,
   levels and moderation pages. */

.profile-page { padding-bottom: 48px; }
.profile-head { display: flex; gap: 20px; align-items: center; padding-block: 36px 24px; }
.profile-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--c-surface-2); flex: none; }
.profile-head .h1 { margin: 0; }
.profile-head .eyebrow { margin: 0; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.profile-grid .h3 { margin: 0 0 4px; }
.profile-rows { margin: 0; }
.profile-rows > div { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-top: 1px solid var(--c-outline); min-height: 52px; }
.profile-rows > div:first-child { border-top: 0; }
.profile-rows dt { width: 38%; flex: none; color: var(--c-text-2); font-size: 14px; }
.profile-rows dd { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.profile-picture { width: 120px; height: 120px; border-radius: var(--r-m); object-fit: cover; background: var(--c-surface-2); }
.profile-danger { border-color: color-mix(in srgb, var(--c-lvl3-fg) 30%, var(--c-outline)); }
.profile-page .notice { margin: 0; }
form.is-done .field, form.is-done [type=submit] { display: none; }

@media (max-width: 820px) {
	.profile-grid { grid-template-columns: minmax(0, 1fr); }
	.profile-head { padding-block: 24px 16px; gap: 14px; align-items: flex-start; }
	.profile-avatar { width: 64px; height: 64px; }
	.profile-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
	.profile-rows dt { width: auto; grid-column: 1; }
	.profile-rows dd { grid-column: 1; }
	.profile-rows .btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- the passport (Profile/publicprofile.htm) ---- */
.passport { padding-block: 24px 56px; display: flex; flex-direction: column; gap: 24px; }
.passport .h1 { margin: 0; }
.pp-manage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; }
.pp-manage-toggles { display: flex; flex-direction: column; gap: 6px; }
.pp-manage-actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.pp-manage-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 14px; border-top: 1px solid var(--c-outline); }
.pp-manage-foot .muted { margin-right: auto; }
.pp-manage-short { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }

.pp-hero { background: var(--c-surface); border: 1px solid var(--c-outline); border-radius: var(--r-l); overflow: hidden; }
.pp-cover { position: relative; aspect-ratio: 4 / 1; min-height: 150px; background: var(--c-primary-container) center / cover no-repeat; }
.pp-title { position: absolute; left: 16px; top: 16px; background: color-mix(in srgb, var(--c-surface) 88%, transparent); border-color: transparent; font-weight: 700; }
.pp-cover-edit { position: absolute; right: 16px; top: 16px; }
.pp-id { display: flex; gap: 24px; padding: 0 28px 24px; align-items: flex-start; }
.pp-avatar-wrap { position: relative; flex: none; margin-top: -66px; }
.pp-avatar { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 4px solid var(--c-surface); background: var(--c-surface-2); display: block; }
.pp-avatar-edit { position: absolute; right: 2px; bottom: 2px; }
.pp-id-text { flex: 1; min-width: 0; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.pp-id-text .h1 { display: flex; gap: 8px; align-items: center; }
.pp-intro { margin: 0; color: var(--c-text-2); max-width: 70ch; }
.pp-social { gap: 6px; }
.btn.is-disabled { opacity: .5; pointer-events: none; }
.pp-section-title { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }

.pp-bar { height: 8px; border-radius: 4px; background: var(--c-surface-2); overflow: hidden; }
.pp-bar div { height: 100%; background: var(--c-accent); border-radius: 4px; }
.pp-quests { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pp-quest { color: var(--c-text); overflow: hidden; }
.pp-quest:hover { box-shadow: var(--shadow-2); }
.pp-quest-cover { position: relative; height: 120px; background: var(--c-primary) center / cover no-repeat; }
.pp-quest-cover .badge { position: absolute; left: 10px; bottom: 10px; }
.pp-quest .card-body { display: flex; flex-direction: column; gap: 8px; }
.pp-quest-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-quest.is-done .pp-bar div { background: var(--c-primary); }
.pp-quest-meta { display: flex; justify-content: space-between; }

/* the history: a line down the left, a year on it, a card per record */
.pp-timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 52px; }
.pp-timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--c-outline); }
.pp-year { position: relative; margin: 14px 0 0 -52px; font: 700 15px/1 var(--font-ui); }
.pp-year span { display: inline-block; padding: 8px 12px; border-radius: 999px; background: var(--c-primary); color: var(--c-on-primary); position: relative; }
.pp-entry { position: relative; scroll-margin-top: calc(var(--header-h) + 16px); }
.pp-dot { position: absolute; left: -52px; top: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); border: 2px solid var(--c-outline); color: var(--c-text-2); }
.pp-dot.is-confirmed { border-color: var(--c-primary); color: var(--c-primary); }
.pp-entry:target .pp-card { box-shadow: 0 0 0 2px var(--c-accent); }
.pp-card { display: flex; flex-direction: column; gap: 10px; }
.pp-card-head { display: flex; gap: 12px; align-items: flex-start; }
.pp-kind { margin: 0 0 4px; font-weight: 600; color: var(--c-text-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-kind span { display: inline-flex; gap: 4px; align-items: center; font-weight: 500; }
.pp-card-title { margin: 0; }
.pp-card-title a { color: var(--c-text); }
.pp-card-title a:hover { color: var(--c-primary); }
.pp-alt { font: 500 15px var(--font-ui); }
.pp-tools { display: flex; gap: 4px; }
.pp-confirmed { display: inline-flex; gap: 4px; align-items: center; color: var(--c-primary); font-weight: 700; }
.pp-comment { margin: 0; white-space: pre-line; }
.pp-sub { margin: 0; }
.pp-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pp-points li { display: inline-flex; gap: 6px; align-items: center; }
.pp-points .icon { color: var(--c-primary); }
.pp-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-photo { position: relative; }
.pp-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-s); display: block; }
.pp-photo-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; }
.pp-photo-add { width: 96px; height: 96px; border-radius: var(--r-s); border: 2px dashed var(--c-outline); background: none; color: var(--c-text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; line-height: 1.2; }
.pp-photo-add:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pp-foot { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; }
.pp-foot p { margin: 0; }

/* the edit dialogs */
.pp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--c-outline); border-radius: var(--r-m); text-align: center; cursor: pointer; color: var(--c-text-2); }
.pp-drop.is-over, .pp-drop:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pp-history-item { display: inline-flex; gap: 8px; align-items: center; color: var(--c-text); }
.pp-when, .pp-places { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-when legend, .pp-places legend { margin-bottom: 8px; padding: 0; }
.pp-when-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--c-outline); border-radius: var(--r-m); }
.pp-when-row.is-off { opacity: .6; }
.pp-when-row:not(.is-off) { border-color: var(--c-primary); }
.pp-when-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-when-pair .field { gap: 4px; }
.pp-place { cursor: pointer; }
.pp-place input { accent-color: var(--c-primary); margin: 0; }
.pp-place:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-container); }

/* ---- the level card and the levels pages ---- */
.pl-card { display: flex; flex-direction: column; gap: 12px; }
.pl-head { display: flex; gap: 16px; align-items: center; }
.pl-badge { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary); color: var(--c-on-primary); font: 700 26px/1 var(--font-serif); }
.pl-badge.is-zero { background: var(--c-surface-2); color: var(--c-text-2); }
.pl-caption { margin: 0 0 2px; display: flex; gap: 6px; align-items: center; }
.pl-caption a { color: inherit; display: inline-flex; }
.pl-name { font: 700 22px/1.2 var(--font-serif); }
.pl-head p { margin: 2px 0 0; }
.pl-top { margin: 0; color: var(--c-primary); font-weight: 700; display: flex; gap: 8px; align-items: center; }
.pl-next { display: flex; justify-content: space-between; gap: 12px; }
.pl-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--c-text-2); }
.pl-s { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.pl-s b { color: var(--c-text); }
.pl-s.is-done, .pl-s.is-done b { color: var(--c-primary); }
.pl-open { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-outline); vertical-align: -1px; }
.pl-details { font-weight: 700; display: inline-flex; gap: 4px; align-items: center; align-self: flex-start; }
.pl-reqs { list-style: none; margin: 0; padding: 0; }
.pl-reqs > li { padding-block: 10px; border-top: 1px solid var(--c-outline); display: flex; flex-direction: column; gap: 8px; }
.pl-req { display: flex; justify-content: space-between; gap: 12px; }
.pl-req > span { display: inline-flex; gap: 8px; align-items: center; }
.pl-req b { white-space: nowrap; }
.pl-ok { color: var(--c-primary); }
.pl-places { padding-left: 26px; }
.pl-openlist { padding-left: 26px; color: var(--c-text-2); }
.pl-openlist summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-openlist[open] summary { white-space: normal; }
.pl-page { max-width: 820px; }
.pl-page .page-head { padding-bottom: 0; }
.lg-level.is-current { box-shadow: 0 0 0 2px var(--c-primary); }
.lg-me { margin: 0; }

/* ---- the routes and places pickers (Routes/list_selector.htm, Browse/list_selector.htm) ---- */
.picker { padding-bottom: 48px; }
.picker-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.picker-filters .select, .picker-filters .input { width: auto; flex: 1 1 180px; }
.picker-list { display: flex; flex-direction: column; gap: 10px; }
.picker-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px; }
.picker-row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-s); background: var(--c-surface-2); }
.picker-row b a { color: var(--c-text); }
.picker-row p { margin: 4px 0 0; }
.picker-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 820px) {
	.pp-manage { grid-template-columns: minmax(0, 1fr); }
	.pp-id { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 18px 20px; }
	.pp-avatar-wrap { margin-top: -50px; }
	.pp-avatar { width: 100px; height: 100px; }
	.pp-cover { aspect-ratio: 5 / 2; min-height: 0; }
	.pp-timeline { padding-left: 0; }
	.pp-timeline::before, .pp-dot { display: none; }
	.pp-year { margin-left: 0; }
	.pp-photo img, .pp-photo-add { width: 84px; height: 84px; }
	.picker-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
	.picker-row img { width: 56px; height: 56px; }
}
@media (max-width: 480px) {
	.pp-when-pair { grid-template-columns: 1fr; }
}