body.wto-learning-shell { overflow-x: hidden; }
.wto-leaderboards-page, .wto-profile-page { width: 100%; max-width: 100%; overflow-x: clip; }
body.wto-learning-shell .wto-leaderboards-page main, body.wto-learning-shell .wto-profile-page main { min-width: 0; }
.wto-leaderboard-filters { display: grid; gap: .7rem; margin: 0 auto 1.25rem; text-align: center; }
.wto-leaderboard-filters div { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.wto-leaderboard-filters a { padding: .5rem .75rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 55%, transparent); border-radius: 999px; color: var(--wto-muted); font-size: .85rem; text-decoration: none; }
.wto-leaderboard-filters a:hover, .wto-leaderboard-filters a.is-active { border-color: var(--wto-accent); color: var(--wto-bg); background: var(--wto-accent); }
.wto-leaderboard-list { display: grid; width: calc(100% - 2rem); max-width: 920px; min-width: 0; margin-right: auto; margin-left: auto; gap: .6rem; }
body.wto-learning-shell .wto-leaderboard-list article { width: 100% !important; max-width: 100% !important; flex: 0 1 auto !important; }
.wto-leaderboard-list article { position: relative !important; display: flex; width: 100%; min-width: 0; box-sizing: border-box; align-items: center; gap: 1rem; padding: .95rem 6.4rem .95rem 1.1rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 55%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--wto-bg) 84%, #000); }
.wto-leaderboard-list article:nth-child(1) { border-color: color-mix(in srgb, var(--wto-accent) 85%, transparent); }
.wto-rank { color: var(--wto-accent); font-size: 1.15rem; font-weight: 800; }
.wto-leaderboard-list article > div { flex: 1 1 auto; min-width: 0; }
.wto-leaderboard-list a { overflow-wrap: anywhere; color: var(--wto-text); font-weight: 700; text-decoration: none; }
.wto-leaderboard-list small { display: block; margin-top: .2rem; color: var(--wto-muted); }
.wto-leaderboard-list article > strong { position: absolute !important; top: 50% !important; right: 1.1rem !important; z-index: 20 !important; display: block !important; transform: translateY(-50%) !important; color: var(--wto-accent) !important; font-size: 1rem !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; white-space: nowrap !important; }
.wto-empty-leaderboard { margin: 0; padding: 1.4rem; border: 1px dashed color-mix(in srgb, var(--wto-muted) 60%, transparent); border-radius: .8rem; color: var(--wto-muted); text-align: center; }
.wto-public-profile-card, .wto-public-profile-summary, .wto-public-community, .wto-public-achievements { width: calc(100% - 2rem); max-width: 980px; box-sizing: border-box; margin-right: auto; margin-left: auto; }
.wto-public-community { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.1rem; margin-bottom: 1.1rem; }
.wto-account-page .wto-dashboard-community { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 100%; margin: .2rem 0 1.5rem; }
.wto-dashboard-community h2 { grid-column: 1 / -1; margin: 0; color: var(--wto-text); font-size: 1rem; text-align: left; }
.wto-dashboard-community div { min-height: 5.5rem; display: flex; flex-direction: column; justify-content: center; }
.wto-public-community div, .wto-public-achievements { padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 55%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--wto-bg) 84%, #000); }
.wto-public-achievements { width: calc(100% - 2rem); max-width: 980px; min-width: 0; box-sizing: border-box; overflow: hidden; }
.wto-public-community span { display: block; color: var(--wto-muted); font-size: .83rem; }
.wto-public-community strong { display: block; margin-top: .3rem; color: var(--wto-accent); font-size: 1.2rem; }
.wto-public-achievements h2 { margin: 0 0 .85rem; font-size: 1.05rem; }
.wto-public-achievements > div { display: grid; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .65rem; }
.wto-achievement-card { display: grid; min-width: 0; gap: .3rem; padding: .75rem; border-radius: .6rem; color: inherit; background: color-mix(in srgb, var(--wto-accent) 9%, transparent); text-decoration: none; transition: transform .15s ease, background .15s ease; }
body.wto-learning-shell .wto-public-achievements .wto-achievement-card { width: auto !important; max-width: 100% !important; flex: initial !important; }
.wto-achievement-card:hover, .wto-achievement-card:focus-visible { background: color-mix(in srgb, var(--wto-accent) 18%, transparent); transform: translateY(-2px); outline: none; }
.wto-achievement-card strong, .wto-achievement-card em, .wto-achievement-cta a { color: var(--wto-accent); }
.wto-achievement-card span, .wto-public-achievements p { overflow-wrap: anywhere; color: var(--wto-muted); font-size: .86rem; }
.wto-achievement-card em { margin-top: .25rem; font-size: .74rem; font-style: normal; font-weight: 700; }
.wto-achievement-cta { margin: .9rem 0 0; text-align: center; }
.wto-achievement-cta a { font-size: .84rem; font-weight: 700; text-decoration: none; }
.wto-achievement-cta a:hover, .wto-achievement-cta a:focus-visible { text-decoration: underline; }
@media (max-width: 760px) { .wto-account-page .wto-dashboard-community { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wto-leaderboard-list article { flex-wrap: wrap; gap: .55rem .75rem; padding-right: 5.3rem; } .wto-leaderboard-list article > div { min-width: calc(100% - 3.6rem); } .wto-leaderboard-list strong { right: .8rem; } .wto-public-community, .wto-account-page .wto-dashboard-community { grid-template-columns: 1fr; } }

/* Compact rankings table: semantic HTML, no images or third-party UI dependencies. */
.wto-leaderboards-page main { width: min(calc(100% - 2rem), 1200px) !important; margin: 0 auto; }
.wto-rankings-panel { box-sizing: border-box; width: min(calc(100% - 2rem), 74rem); margin: 2.25rem auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wto-muted) 46%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 86%, #000); }
.wto-rankings-hero { max-width: 62rem; margin: clamp(2.5rem, 7vw, 5.5rem) auto 2.75rem; text-align: center; }
.wto-rankings-hero h1 { margin: 0; color: var(--wto-text); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; }
.wto-rankings-eyebrow { margin: 0 0 .75rem; color: var(--wto-accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wto-rankings-breadcrumb { display: flex; justify-content: center; gap: .65rem; margin: 1rem 0 0; color: var(--wto-muted); font-size: .84rem; }
.wto-rankings-breadcrumb a { color: var(--wto-accent); text-decoration: none; }
.wto-rankings-description { max-width: 48rem; margin: 2rem auto 0; color: var(--wto-muted); font-size: 1rem; line-height: 1.7; }
.wto-rankings-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; padding: .85rem 1.4rem; border-bottom: 1px solid color-mix(in srgb, var(--wto-muted) 38%, transparent); color: var(--wto-muted); font-size: .82rem; }
.wto-rankings-toolbar button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.15rem; padding: .45rem .72rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 45%, transparent); border-radius: .5rem; color: var(--wto-text); background: color-mix(in srgb, var(--wto-bg) 80%, #000); font: inherit; cursor: pointer; }
.wto-rankings-toolbar button:hover { color: var(--wto-bg); border-color: var(--wto-accent); background: var(--wto-accent); }
.wto-rankings-toolbar button[disabled] { opacity: .65; cursor: wait; }
.wto-rankings-panel .wto-leaderboard-filters { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .95rem 1.4rem; border-bottom: 1px solid color-mix(in srgb, var(--wto-muted) 32%, transparent); text-align: left; }
.wto-rankings-panel .wto-leaderboard-filters div { justify-content: flex-start; }
.wto-rankings-panel .wto-leaderboard-filters a { padding: .48rem .68rem; border: 0; border-radius: .42rem; }
.wto-rankings-panel .wto-board-periods a.is-active { color: var(--wto-bg); background: var(--wto-accent); }
.wto-rankings-panel .wto-board-metrics a.is-active { border: 1px solid var(--wto-accent); color: var(--wto-accent); background: transparent; }
.wto-leaderboard-table { width: 100%; box-sizing: border-box; padding: 0 1.4rem 1.25rem; }
.wto-board-row { display: grid; width: 100% !important; max-width: 100% !important; box-sizing: border-box; grid-template-columns: 70px minmax(0, 1fr) 150px 120px 160px 64px; align-items: center; column-gap: 0; min-width: 0; }
.wto-board-columns { padding: .8rem .65rem .65rem; color: var(--wto-muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.wto-board-columns > span { justify-self: start; text-align: left !important; }
.wto-board-columns > span:nth-child(n+3) { justify-self: center; text-align: center !important; }
.wto-board-entry { min-height: 4.4rem; padding: .55rem .65rem; border-top: 1px solid color-mix(in srgb, var(--wto-muted) 30%, transparent); }
.wto-board-entry:hover { background: color-mix(in srgb, var(--wto-accent) 7%, transparent); }
.wto-board-top-1 { border-left: 3px solid #e4b900; background: color-mix(in srgb, #e4b900 8%, transparent); }
.wto-board-top-2 { border-left: 3px solid #9aa7b0; background: color-mix(in srgb, #9aa7b0 7%, transparent); }
.wto-board-top-3 { border-left: 3px solid #c97938; background: color-mix(in srgb, #c97938 7%, transparent); }
.wto-board-entry .wto-rank { display: flex; align-items: center; gap: .35rem; color: var(--wto-text); font-size: 1rem; }
.wto-board-entry .wto-rank i { color: var(--wto-accent); font-size: .78rem; font-style: normal; }
.wto-board-member { display: flex; align-items: center; min-width: 0; gap: .7rem; }
.wto-board-member > i { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--wto-bg); background: var(--wto-accent); font-size: .8rem; font-style: normal; font-weight: 800; }
.wto-board-member > span { display: grid; min-width: 0; gap: .14rem; }
.wto-board-member a { overflow: hidden; color: var(--wto-text); font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.wto-board-member a:hover { color: var(--wto-accent); }
.wto-board-member small, .wto-board-entry time, .wto-board-entry > span[role="cell"] { color: var(--wto-muted); font-size: .82rem; }
.wto-board-entry strong { color: var(--wto-text); font-size: 1rem; }
.wto-board-entry strong small { color: var(--wto-muted); font-size: .8rem; }
.wto-board-profile { display: grid; min-height: 2rem; place-items: center; border-radius: .45rem; color: var(--wto-muted); font-size: .78rem; text-decoration: none; }
.wto-board-profile:hover { color: var(--wto-bg); background: var(--wto-accent); }
.wto-rankings-panel .wto-empty-leaderboard { margin: 1rem 0; }
@media (max-width: 780px) { .wto-rankings-panel .wto-leaderboard-filters { align-items: flex-start; flex-direction: column; } .wto-board-row { grid-template-columns: 54px minmax(130px, 1fr) minmax(78px, auto) 38px; } .wto-board-columns span:nth-child(4), .wto-board-columns span:nth-child(5), .wto-board-entry > span[role="cell"], .wto-board-entry time { display: none; } .wto-board-profile { font-size: 0; } .wto-board-profile::after { content: '↗'; font-size: 1rem; } .wto-leaderboard-table { padding-right: .8rem; padding-left: .8rem; } }
@media (max-width: 480px) { .wto-leaderboards-page main { width: calc(100% - 1rem) !important; } .wto-rankings-hero { margin-top: 2.5rem; } .wto-rankings-panel { margin-top: 1rem; } .wto-rankings-toolbar, .wto-rankings-panel .wto-leaderboard-filters { padding-right: .9rem; padding-left: .9rem; } .wto-board-row { column-gap: .45rem; grid-template-columns: 43px minmax(0, 1fr) auto 32px; } .wto-board-entry { padding-right: .25rem; padding-left: .25rem; } .wto-board-member { gap: .45rem; } .wto-board-member > i { width: 1.8rem; height: 1.8rem; } }

/* Account dashboard: fewer surfaces, clearer visual grouping. */
.wto-account-page .wto-account-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 1.25rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wto-muted) 48%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 84%, #000); }
.wto-account-page .wto-account-summary div { min-width: 0; padding: 1.35rem 1rem; border: 0; border-right: 1px solid color-mix(in srgb, var(--wto-muted) 34%, transparent); border-radius: 0; background: transparent; text-align: center; }
.wto-account-page .wto-account-summary div:last-child { border-right: 0; }
.wto-account-page .wto-account-summary span { font-size: .76rem; letter-spacing: .035em; text-transform: uppercase; }
.wto-account-page .wto-account-summary strong { margin-top: .45rem; font-size: clamp(1.45rem, 3vw, 1.9rem); }
.wto-account-page .wto-dashboard-community { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; max-width: none; margin: 0 0 1.7rem; padding: 1.1rem 0 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wto-muted) 44%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 88%, #000); }
.wto-account-page .wto-dashboard-community h2 { grid-column: 1 / -1; margin: 0 1.2rem 1rem; color: var(--wto-text); font-size: 1rem; }
.wto-account-page .wto-dashboard-community div { min-height: 4.9rem; padding: .8rem 1rem 1.1rem; border: 0; border-top: 1px solid color-mix(in srgb, var(--wto-muted) 31%, transparent); border-right: 1px solid color-mix(in srgb, var(--wto-muted) 31%, transparent); border-radius: 0; background: transparent; text-align: center; }
.wto-account-page .wto-dashboard-community div:last-child { border-right: 0; }
.wto-account-page .wto-dashboard-community span { font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
.wto-account-page .wto-dashboard-community strong { font-size: 1.28rem; }
.wto-account-page .wto-account-results { border-radius: 1rem; }
.wto-account-page .wto-account-public-link { margin-top: 1.25rem; border-color: color-mix(in srgb, var(--wto-accent) 42%, transparent); background: transparent; }
@media (max-width: 760px) { .wto-account-page .wto-account-summary, .wto-account-page .wto-dashboard-community { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wto-account-page .wto-account-summary div:nth-child(2), .wto-account-page .wto-dashboard-community div:nth-of-type(2) { border-right: 0; } .wto-account-page .wto-account-summary div:nth-child(n+3), .wto-account-page .wto-dashboard-community div:nth-of-type(n+3) { border-top: 1px solid color-mix(in srgb, var(--wto-muted) 31%, transparent); } }
@media (max-width: 480px) { .wto-account-page .wto-account-summary, .wto-account-page .wto-dashboard-community { grid-template-columns: 1fr; } .wto-account-page .wto-account-summary div, .wto-account-page .wto-dashboard-community div { border-right: 0; } }

/* Prevent WordPress full-width article rules from changing the ranking row grid. */
body.wto-learning-shell .wto-leaderboard-table .wto-board-entry { display: grid !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; flex: initial !important; margin: 0 !important; padding: .55rem .65rem !important; overflow: hidden !important; }

/* Compact profile controls into one purposeful account-management panel. */
.wto-account-page .wto-account-profile-tools { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); align-items: stretch; margin-top: 1.25rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wto-muted) 45%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 86%, #000); }
.wto-account-page .wto-account-profile-tools .wto-account-public-link { display: grid; align-content: center; justify-items: start; gap: .45rem; margin: 0; padding: 1rem 1.15rem; border: 0; border-right: 1px solid color-mix(in srgb, var(--wto-muted) 34%, transparent); border-radius: 0; background: color-mix(in srgb, var(--wto-accent) 7%, transparent); }
.wto-account-page .wto-account-public-link span { color: var(--wto-muted); font-size: .82rem; white-space: nowrap; }
.wto-account-page .wto-account-public-link a { width: fit-content; padding: .42rem .65rem; border-radius: .45rem; background: color-mix(in srgb, var(--wto-accent) 13%, transparent); white-space: nowrap; }
.wto-account-page .wto-account-profile-settings { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem; align-content: center; margin: 0; padding: 1.05rem 1.25rem; border: 0; border-radius: 0; background: transparent; }
.wto-account-page .wto-account-profile-settings h2 { font-size: .98rem; }
.wto-account-page .wto-account-profile-settings p { font-size: .78rem; line-height: 1.45; }
.wto-account-page .wto-account-profile-settings label { margin: 0; }
.wto-account-page .wto-account-profile-settings button { min-width: 7rem; }
@media (max-width: 700px) { .wto-account-page .wto-account-profile-tools { grid-template-columns: 1fr; } .wto-account-page .wto-account-profile-tools .wto-account-public-link { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--wto-muted) 34%, transparent); } }
@media (max-width: 480px) { .wto-account-page .wto-account-profile-settings { grid-template-columns: 1fr; } .wto-account-page .wto-account-profile-settings button { width: 100%; } }

/* Public profile panels use the same comfortable desktop canvas as the other community pages. */
.wto-profile-page .wto-public-profile-card, .wto-profile-page .wto-public-profile-summary, .wto-profile-page .wto-public-community, .wto-profile-page .wto-public-achievements { width: calc(100% - 2rem); max-width: none; }
.wto-profile-avatar { overflow: hidden; }
.wto-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wto-profile-bio { max-width: 60ch; }
.wto-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.wto-profile-meta p { margin: 0; }
.wto-profile-social-icons { display: inline-flex; align-items: center; gap: .55rem; }
.wto-profile-social-icons a { display: inline-grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid color-mix(in srgb, var(--wto-muted) 55%, transparent); border-radius: 50%; color: var(--wto-accent); background: color-mix(in srgb, var(--wto-bg) 80%, #000); font-size: 1.3rem; font-weight: 800; line-height: 1; text-decoration: none; transition: transform .15s ease, color .15s ease, background .15s ease; }
.wto-profile-social-icons a:hover, .wto-profile-social-icons a:focus-visible { color: var(--wto-bg); background: var(--wto-accent); transform: translateY(-1px); outline: none; }
.wto-profile-social-icons .wto-social-linkedin { font-size: 1rem; }
/* Actual vector marks for approved public-profile links. */
.wto-profile-social-icons a span { display: none; }
.wto-profile-social-icons a::after { content: ""; display: block; width: 1.12rem; height: 1.12rem; background: currentColor; -webkit-mask: var(--wto-profile-icon) center / contain no-repeat; mask: var(--wto-profile-icon) center / contain no-repeat; }
.wto-profile-social-icons .wto-social-website { --wto-profile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.4 3.6 5.2 3.6 8.5S14.4 18.1 12 20.5C9.6 18.1 8.4 15.3 8.4 12S9.6 5.9 12 3.5Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wto-profile-social-icons .wto-social-facebook { --wto-profile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.7 21v-8h2.7l.4-3.1h-3.1V8c0-.9.3-1.5 1.6-1.5H17V3.7c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4V9.9H8.2V13h2.6v8h2.9Z'/%3E%3C/svg%3E"); }
.wto-profile-social-icons .wto-social-instagram { --wto-profile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.1' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.4' cy='6.7' r='1.25'/%3E%3C/svg%3E"); }
.wto-profile-social-icons .wto-social-twitter { --wto-profile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h3.7l4.7 6.3L17.7 3H20l-6.5 7.6L21 21h-3.7l-5.3-7.1L5.8 21H3.5l7.4-8.6L4 3Zm4.7 2L17.8 19h1.1L9.8 5H8.7Z'/%3E%3C/svg%3E"); }
.wto-profile-social-icons .wto-social-linkedin { --wto-profile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 8.1A1.8 1.8 0 1 0 5.2 4.5a1.8 1.8 0 0 0 0 3.6ZM3.6 20h3.2V9.8H3.6V20Zm5.2 0H12v-5.7c0-1.5.3-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3V20H19v-6.3c0-3.1-.7-5.5-4.3-5.5-1.7 0-2.9.9-3.4 1.9h-.1V9.8H8.8V20Z'/%3E%3C/svg%3E"); }
.wto-profile-social-icons .wto-social-pinterest { --wto-profile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-3.6 19.3c-.1-1.6 0-3.5.4-5l1.1-4.6s-.3-.7-.3-1.8c0-1.7 1-3 2.2-3 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.2 0 3.6-2.8 3.6-6.1 0-2.5-1.7-4.9-5.2-4.9-3.8 0-6.2 2.8-6.2 6 0 1.1.3 2 .9 2.7.2.2.2.3.1.6l-.3 1.2c-.1.4-.4.5-.8.4-2.1-.9-3.1-3.3-3.1-5.9 0-3.5 2.9-7.7 8.7-7.7 4.6 0 7.6 3.3 7.6 6.9 0 4.7-2.6 8.3-6.5 8.3-1.3 0-2.5-.7-2.9-1.5l-.8 3.1c-.3 1.3-1 2.9-1.5 3.8.8.2 1.7.3 2.6.3A10 10 0 0 0 12 2Z'/%3E%3C/svg%3E"); }
/* Familiar social badges inside the existing circular profile buttons. */
.wto-profile-social-icons :is(.wto-social-facebook, .wto-social-twitter, .wto-social-linkedin)::after { display: grid; width: 1.08rem; height: 1.08rem; place-items: center; border-radius: .24rem; background: var(--wto-accent); color: var(--wto-bg); -webkit-mask: none; mask: none; font-family: Arial, sans-serif; font-size: .76rem; font-weight: 800; line-height: 1; }
.wto-profile-social-icons .wto-social-facebook::after { content: "f"; font-size: .9rem; }
.wto-profile-social-icons .wto-social-twitter::after { content: "X"; font-size: .7rem; }
.wto-profile-social-icons .wto-social-linkedin::after { content: "in"; font-size: .66rem; }
.wto-profile-social-icons .wto-social-pinterest { position: relative; }
.wto-profile-social-icons .wto-social-pinterest::after { content: ""; display: block; width: 1.08rem; height: 1.08rem; border-radius: .24rem; background: var(--wto-accent); -webkit-mask: none; mask: none; }
.wto-profile-social-icons .wto-social-pinterest span { position: absolute; z-index: 1; inset: 0; display: block; width: .78rem; height: .78rem; margin: auto; background: var(--wto-bg); font-size: 0; -webkit-mask: url("../images/pinterest-mark.png") center / contain no-repeat; mask: url("../images/pinterest-mark.png") center / contain no-repeat; }
.wto-profile-facts-card { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin: .75rem 0 0; }
.wto-profile-facts-card div { display: inline-flex; align-items: baseline; gap: .35rem; min-width: 0; }
.wto-profile-facts-card dt { color: var(--wto-muted); font-size: .72rem; }
.wto-profile-facts-card dt::after { content: ":"; }
.wto-profile-facts-card dd { margin: 0; color: var(--wto-text); font-size: .82rem; }

/* Editable profile data stays compact and excludes external-link fields. */
.wto-account-page .wto-account-details { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: end; margin-top: 1.25rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 45%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 86%, #000); }
.wto-account-details > div:first-child { grid-column: 1 / 2; align-self: start; }
.wto-account-details .wto-eyebrow { margin: 0 0 .35rem; }
.wto-account-details h2 { margin: 0 0 .35rem; color: var(--wto-text); font-size: 1.05rem; }
.wto-account-details p:not(.wto-eyebrow) { margin: 0; color: var(--wto-muted); font-size: .82rem; line-height: 1.5; }
.wto-account-details label { display: grid; gap: .35rem; color: var(--wto-muted); font-size: .82rem; }
.wto-account-details input[type="text"], .wto-account-details textarea { width: 100%; box-sizing: border-box; min-height: 4.75rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 60%, transparent); border-radius: .55rem; color: var(--wto-text); background: color-mix(in srgb, var(--wto-bg) 72%, #000); font: inherit; outline: none; }
.wto-account-details input[type="text"]:focus, .wto-account-details textarea:focus { border-color: var(--wto-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wto-accent) 15%, transparent); }
.wto-account-details textarea { height: 4.75rem; resize: vertical; }
.wto-account-details > label { grid-column: 1 / 2; }
.wto-account-details .wto-account-bio { grid-column: 3 / 4; grid-row: 1 / span 2; }
.wto-account-details button { grid-column: 1 / 2; width: fit-content; min-height: 2.55rem; padding: .5rem .9rem; border: 0; border-radius: .55rem; color: var(--wto-bg); background: var(--wto-accent); font: inherit; font-weight: 700; cursor: pointer; }
.wto-account-avatar-upload { display: grid; justify-items: center; gap: .45rem; }
.wto-account-avatar-upload img, .wto-account-avatar-upload > span { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 50%; color: var(--wto-bg); background: var(--wto-accent); object-fit: cover; font-size: 1.3rem; font-weight: 800; }
.wto-account-avatar-upload label { position: relative; display: inline-flex; max-width: 190px; min-height: 2.3rem; align-items: center; justify-content: center; padding: 0 .75rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--wto-accent) 58%, transparent); border-radius: .55rem; color: var(--wto-accent); background: color-mix(in srgb, var(--wto-accent) 9%, transparent); font-size: .76rem; font-weight: 700; cursor: pointer; text-align: center; }
.wto-account-avatar-upload label:hover { color: var(--wto-bg); background: var(--wto-accent); }
.wto-account-avatar-upload label.is-uploading { pointer-events: none; opacity: .65; }
.wto-account-avatar-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wto-avatar-upload-status { max-width: 190px; color: var(--wto-muted); font-size: .7rem; line-height: 1.35; text-align: center; }
.wto-avatar-upload-status.is-error { color: #d8645a; }
@media (max-width: 760px) { .wto-account-page .wto-account-details { grid-template-columns: 1fr; } .wto-account-details > div:first-child, .wto-account-details > label, .wto-account-details .wto-account-bio, .wto-account-details button { grid-column: 1; grid-row: auto; } .wto-account-avatar-upload { justify-items: start; } }

.wto-account-page .wto-account-more-details { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; margin-top: 1.25rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 45%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--wto-bg) 86%, #000); }
.wto-account-more-details h2 { margin: 0 0 .35rem; color: var(--wto-text); font-size: 1.05rem; }
.wto-account-more-details p:not(.wto-eyebrow) { margin: 0; color: var(--wto-muted); font-size: .8rem; line-height: 1.5; }
.wto-profile-field-grid, .wto-profile-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.wto-profile-field-grid label, .wto-profile-link-grid label { display: grid; gap: .3rem; color: var(--wto-muted); font-size: .78rem; }
.wto-profile-field-grid input, .wto-profile-link-grid input { width: 100%; min-height: 2.45rem; box-sizing: border-box; padding: .45rem .6rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 60%, transparent); border-radius: .5rem; color: var(--wto-text); background: color-mix(in srgb, var(--wto-bg) 72%, #000); font: inherit; }
.wto-account-more-details button { grid-column: 2 / 4; justify-self: start; min-height: 2.5rem; padding: .5rem .85rem; border: 0; border-radius: .55rem; color: var(--wto-bg); background: var(--wto-accent); font: inherit; font-weight: 700; cursor: pointer; }
.wto-public-profile-details { display: grid; width: calc(100% - 2rem); max-width: none; gap: .75rem; box-sizing: border-box; margin: 0 auto 1.1rem; }
.wto-profile-facts { display: flex; flex-wrap: wrap; gap: .65rem; }
.wto-profile-facts span, .wto-profile-links a { padding: .55rem .75rem; border: 1px solid color-mix(in srgb, var(--wto-muted) 45%, transparent); border-radius: .55rem; color: var(--wto-muted); background: color-mix(in srgb, var(--wto-bg) 86%, #000); font-size: .84rem; }
.wto-profile-facts b { margin-right: .35rem; color: var(--wto-text); }
.wto-profile-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.wto-profile-links a { color: var(--wto-accent); font-weight: 700; text-decoration: none; }
@media (max-width: 860px) { .wto-account-page .wto-account-more-details { grid-template-columns: 1fr; } .wto-account-more-details button { grid-column: 1; } }
@media (max-width: 480px) { .wto-profile-field-grid, .wto-profile-link-grid { grid-template-columns: 1fr; } }