/* Shared softened-rectangle controls; retain WordWise's theme tokens. */
:root{--control-radius:8px;--control-motion:140ms}
.ww-segmented,.density-tabs{display:inline-flex;flex-wrap:wrap;gap:3px;padding:4px;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--card)}
.ww-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 0 6px}
.ww-segmented button,.density-tabs button,.ww-tabs button,.ww-chip,.ww-quiet,.text-button,.functional-actions>button:not(.button),.audio-cues button{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:.85rem;font-weight:600;padding:8px 12px;min-height:36px;border-radius:6px;cursor:pointer;transition:background var(--control-motion),color var(--control-motion),transform var(--control-motion)}
.ww-tabs button{padding:10px 18px;border-bottom-width:2px;border-radius:6px 6px 0 0}
.ww-segmented button[aria-pressed=true],.density-tabs button[aria-pressed=true],.ww-tabs button[aria-pressed=true],.ww-chip[aria-pressed=true]{color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--card));border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
.ww-tabs button[aria-pressed=true]{border-bottom-color:var(--green)}
button:hover:not(:disabled),.ww-disclosure summary:hover{background-color:color-mix(in srgb,var(--green) 8%,var(--card))}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:3px}
button:disabled{cursor:default;opacity:.5}
.ww-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.chart-data,.ww-disclosure{margin-top:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.chart-data summary,.ww-disclosure summary{padding:12px 14px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--ink)}
.chart-data[open] summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--green) 5%,var(--card))}
.ww-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:7px;margin-top:14px}
.ww-bucket{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:10px 12px;color:var(--muted);text-align:left;font:inherit;font-size:.8rem;cursor:pointer}
.ww-bucket b{color:var(--ink);font-size:1rem;font-variant-numeric:tabular-nums}
.ww-bucket:disabled{opacity:.65}
.ww-nav-lock{margin-left:auto;width:13px;height:13px;opacity:.65;flex-shrink:0}.nav-link[aria-disabled=true]{color:var(--muted)}
.ww-hero{background:linear-gradient(125deg,color-mix(in srgb,var(--green) 12%,var(--card)),var(--card));border-left:3px solid var(--green);padding:22px;border-radius:10px;margin-bottom:20px}
.ww-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:14px}
.ww-item{padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}.ww-item h3,.ww-item p{margin:0}.ww-item .functional-actions{margin-top:auto}
.ww-art{display:grid;place-items:center;width:70px;height:70px;border:2px solid var(--line);border-radius:14px;font-size:28px;color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--card))}
.ww-item small{color:var(--muted)}.ww-item.equipped{border-color:var(--green)}
.ww-profile{display:grid;gap:14px}.ww-profile h3{margin:0}.ww-profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ww-profile-stats div{padding:12px;border:1px solid var(--line);border-radius:8px}.ww-profile-stats small{display:block;color:var(--muted)}
.ww-social-name{border:0;background:transparent;color:var(--ink);text-align:left;font:inherit;font-weight:650;cursor:pointer;padding:5px 0}
.ww-messages{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:14px;min-height:420px}.ww-conversations{display:flex;flex-direction:column;gap:8px}.ww-conversation{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:12px;text-align:left;color:var(--ink)}
.ww-chat{border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;min-width:0;padding:16px}.ww-chat-log{display:flex;flex-direction:column;gap:9px;height:330px;overflow:auto;padding:12px 0}.ww-message{max-width:85%;align-self:flex-start;border-radius:8px;background:var(--paper);padding:10px 13px;border:1px solid var(--line);overflow-wrap:anywhere;white-space:pre-wrap}.ww-message.mine{align-self:flex-end;background:color-mix(in srgb,var(--green) 10%,var(--card))}.ww-message small{display:block;color:var(--muted);font-size:.7rem;margin-top:5px}.ww-message button{padding:3px;font-size:.7rem}
.ww-compose{display:flex;gap:8px}.ww-compose textarea{min-width:0;flex:1}.ww-privacy-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.ww-privacy-row select{max-width:180px}
.ww-series{padding:18px;margin-bottom:12px}.ww-series-track{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.ww-series-step{padding:7px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:.8rem}.ww-series-step.complete{color:var(--green)}.ww-series-step.current{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--card));color:var(--ink)}
.ww-leaderboard-self{position:fixed;z-index:15;left:max(270px,calc((100vw - 1100px)/2));right:24px;padding:12px 18px;background:var(--card);border:1px solid var(--green);border-radius:8px;box-shadow:0 4px 20px #0002;display:flex;align-items:center;gap:18px}.ww-leaderboard-self[hidden]{display:none}.ww-leaderboard-self[data-position=top]{top:85px}.ww-leaderboard-self[data-position=bottom]{bottom:16px}
.leaderboard-row[data-placement=gold]{--placement:#b68a34}.leaderboard-row[data-placement=silver]{--placement:#8898a5}.leaderboard-row[data-placement=bronze]{--placement:#b17851}.leaderboard-row[data-placement=amethyst]{--placement:#8c6db5}.leaderboard-row[data-placement=sapphire]{--placement:#528cc2}.leaderboard-row[data-placement]:not([data-placement=""]){border-left:3px solid var(--placement);background:color-mix(in srgb,var(--placement) 5%,var(--card))}.leaderboard-row[data-placement]:not([data-placement=""]) .leaderboard-rank{border:1px solid var(--placement);border-radius:6px;padding:5px;color:var(--ink)}
.ww-season-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0}.ww-status{color:var(--muted);font-size:.85rem}.ww-error{color:var(--ink);padding:14px;border:1px solid var(--line);border-radius:8px}
@media(max-width:900px){.ww-leaderboard-self{left:24px}.ww-messages{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:600px){.ww-messages{grid-template-columns:minmax(0,1fr)}.ww-conversations{max-height:160px;overflow:auto}.ww-privacy-row{align-items:flex-start;flex-direction:column}.ww-privacy-row select{width:100%;max-width:none}.ww-leaderboard-self{left:12px;right:12px;font-size:.8rem}.ww-segmented,.density-tabs{max-width:100%}.ww-chat{padding:12px}.ww-buckets{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-compose{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{--control-motion:0ms}}

.ww-compose{align-items:flex-end}.ww-compose button{min-height:44px}.ww-compose textarea{height:76px}.chart-empty{min-height:90px}.ww-series meter{width:100%;accent-color:var(--green)}
.social-item:has(.ww-art){display:flex;align-items:center;flex-wrap:wrap}.social-item>.ww-art{width:48px;height:48px;flex-shrink:0;font-size:21px}.social-item .functional-actions{margin-left:auto}.ww-art.name-amethyst{color:#b395dd}.ww-art.name-sapphire{color:#65a3dc}.ww-art.name-forest{color:var(--green)}.ww-art.season-0-badge,.ww-art.season-0-frame{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--card));color:var(--gold)}
.ww-item small,.ww-status{overflow-wrap:anywhere}

.ww-avatar-button{position:relative;padding:4px;cursor:pointer;flex-shrink:0}.ww-avatar-button .avatar-art{width:100%;height:100%}.ww-avatar-button small{position:absolute;right:-5px;bottom:-5px;border-radius:4px;background:var(--card);color:var(--green);padding:2px 4px}.ww-avatar-button.accent-forest{background:color-mix(in srgb,var(--green) 20%,var(--card))}.leaderboard-learner>.ww-avatar-button{width:42px;height:42px}

.ww-cosmetic-preview{margin:14px 0;padding:18px;border:2px solid var(--line);border-radius:10px;background:var(--card);font-weight:650}.ww-cosmetic-preview small{display:block}.ww-cosmetic-preview.season-0-frame{border-color:var(--gold)}

.home-dashboard[hidden],.global-profile-copy small[hidden],.global-xp-track[hidden]{display:none}.ww-season-dates{width:100%}

/* Soft red unread tile; shared by the desktop and mobile sidebar. */
:is(.nav-link,.nav-group>summary) .ww-unread{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-width:23px;height:22px;padding:0 6px;border-radius:6px;background:#f7dedd;border:1px solid #e9bcb9;color:#8b3438;font:700 11px var(--sans);font-variant-numeric:tabular-nums;line-height:1;flex-shrink:0}:is(.nav-link,.nav-group>summary) .ww-unread[hidden]{display:none}
:root[data-appearance=dark] :is(.nav-link,.nav-group>summary) .ww-unread{background:#533033;border-color:#78474c;color:#ffdad8}

/* Shared control polish and bounds for profile media. */
:where(button){appearance:none;font:600 13px var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 14px;cursor:pointer;transition:background-color 120ms,border-color 120ms}
:where(button):hover:not(:disabled){border-color:color-mix(in srgb,var(--green) 50%,var(--line));background:color-mix(in srgb,var(--green) 9%,var(--card))}
:where(button):focus-visible{outline:2px solid var(--green);outline-offset:3px}:where(button):disabled{cursor:default;opacity:.55}
input[type="checkbox"]::before{transform:translateY(-1px) rotate(-45deg)}
.resolved-avatar.set-creator-avatar{width:36px;height:36px;max-width:36px;max-height:36px;vertical-align:middle}
.resolved-avatar :is(img,svg){display:block;width:100%;height:100%;max-width:100%;object-fit:cover}
.ww-avatar-button .resolved-avatar{width:56px;height:56px}.ww-profile .ww-avatar-button{width:76px;height:76px}.ww-profile .ww-avatar-button .resolved-avatar{width:64px;height:64px}
.ww-coin-balance{display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border:1px solid color-mix(in srgb,var(--gold) 25%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--gold) 8%,var(--card));font-variant-numeric:tabular-nums}.ww-coin-balance>span{color:var(--gold);font-size:22px}.ww-coin-balance strong{font-size:22px;letter-spacing:-.5px}.ww-coin-balance small{color:var(--muted)}
.ww-conversation{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;padding:15px 16px!important;border-radius:14px!important;background:var(--card);border:1px solid var(--line)!important;margin-bottom:10px}.ww-conversation[aria-pressed=true]{border-color:var(--green)!important;background:color-mix(in srgb,var(--green) 12%,var(--card))}.ww-conversation-top{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.ww-conversation-top strong{overflow-wrap:anywhere}.ww-chat-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:color-mix(in srgb,var(--green) 14%,var(--card));color:var(--green);font-size:11px;flex:none}.ww-conversation-status{font-size:11px;color:var(--muted)}.ww-message{border-radius:15px!important;display:flex;flex-direction:column;gap:6px}.ww-conversations{min-width:0}.ww-group-picker{display:grid;gap:8px;max-height:300px;overflow:auto}.ww-group-picker label{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px}.ww-group-picker small{color:var(--muted)}
.rc-study-tasks{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px!important;background:transparent!important;padding:0!important;border:0!important;margin-bottom:20px}.rc-study-tasks[hidden]{display:none!important}.rc-study-tasks .ww-daily-card{display:grid;grid-template-columns:1fr auto;gap:9px;padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--card)}.ww-daily-card>.eyebrow,.ww-daily-card>meter,.ww-daily-card>small{grid-column:1/-1}.ww-daily-card>strong{font-size:14px}.ww-daily-card>small{color:var(--muted);font-size:11px}.ww-daily-card meter{width:100%;height:10px}.ww-daily-card>button{grid-column:1/-1}
.ww-reward-line{display:grid;gap:5px;border:1px solid var(--line);border-radius:9px;padding:12px;background:color-mix(in srgb,var(--gold) 7%,var(--card));margin:12px 0}.ww-reward-line small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px}.ww-reward-line strong{font-size:13px}.density-metric strong{overflow-wrap:anywhere}.density-metric:has(strong:not(:empty)){min-width:0}
#page-settings .setting-row,#social-privacy-form .ww-privacy-row{gap:20px;padding:20px 0}#page-settings .custom-select{min-width:180px;max-width:100%}#page-settings .select-trigger{border-radius:10px;min-height:44px}.select-options{border-radius:12px;box-shadow:0 12px 34px #0003}.select-options button{border-radius:7px}.sidebar-refresh{display:flex;align-items:center;justify-content:center;gap:9px;margin:8px 16px;width:calc(100% - 32px);background:color-mix(in srgb,var(--green) 8%,var(--card));border-radius:10px}
@media(max-width:600px){.rc-study-tasks{grid-template-columns:1fr}.ww-coin-balance strong{font-size:19px}#page-settings .setting-row{flex-wrap:wrap}#page-settings .custom-select{min-width:0;width:100%}.ww-conversation{padding:12px!important}}

.button{border-radius:9px}.text-button,.ww-quiet{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:color-mix(in srgb,var(--green) 5%,var(--card));text-decoration:none;font-weight:600}.text-button:hover,.ww-quiet:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--card));text-decoration:none}.ww-message .ww-quiet{padding:3px 7px;font-size:10px}.ww-social-name{border:0;background:transparent;padding:0}.density-metric strong:has(+small){font-size:clamp(17px,2vw,29px)}

.functional-actions>button:not(.button){border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--green) 5%,var(--card));padding:8px 12px}.functional-actions>button:not(.button):hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--card))}
