/* The Profile Hub.
 *
 * Loads after /styles.css, which supplies the palette, the top bar and the
 * signed-in chrome. Everything here is the hub's own layout. */

.profile-main {
    max-width: 1020px;
    margin: 0 auto;
    padding: clamp(12px, 3vw, 28px) 24px 80px;
}

.topline-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* ----- Who this is --------------------------------------------------------- */

.hub-head {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.hub-avatar {
    border-radius: 50%;
    border: 2px solid var(--panel-border);
    flex-shrink: 0;
}

.hub-who { min-width: 0; }
.hub-who h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 4vw, 2.1rem); }

.hub-sub { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.hub-rsn { color: var(--muted); font-size: 0.95rem; }

/* The rank Jagex has for them, not a Discord role somebody forgot to update. */
.hub-rank {
    padding: 2px 10px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hub-figures { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }

.figure { text-align: right; }
.figure b {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--accent-bright);
}
.figure span { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }

.stats-note {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.85rem;
}

/* ----- The panels ---------------------------------------------------------- */

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.hub-panel { padding: 20px 22px; }
.hub-panel > h2 { margin: 0 0 14px; font-size: 1.05rem; }

.hub-sub-head {
    margin: 16px 0 8px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.hub-sub-head:first-of-type { margin-top: 0; }

/* ----- Skills -------------------------------------------------------------- */

.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 14px; }

.skill {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid rgba(59, 66, 82, 0.5);
    font-size: 0.84rem;
}
.skill-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-level { font-weight: 700; }
.skill-xp { color: var(--muted); font-size: 0.75rem; min-width: 46px; text-align: right; }

/* ----- Goals --------------------------------------------------------------- */

.goals { display: grid; gap: 4px; }

.goal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.9rem;
    cursor: pointer;
}
.goal.is-done span { color: var(--muted); text-decoration: line-through; }
.goal span { flex: 1; }
.goal input { accent-color: var(--accent); }

.goal-remove {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.goal-remove:hover { color: var(--danger); }

.goal-add { display: flex; gap: 8px; margin-top: 12px; }
.goal-add input { flex: 1; }

/* ----- Events and activity ------------------------------------------------- */

.event-list, .activity { display: grid; gap: 2px; }

.event-row, .activity-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(59, 66, 82, 0.5);
    font-size: 0.86rem;
}
.event-row:last-child, .activity-row:last-child { border-bottom: 0; }

.event-title, .activity-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.event-when, .activity-date {
    color: var(--muted);
    font-size: 0.76rem;
    flex-shrink: 0;
}

/* ----- Your details -------------------------------------------------------- */

/* The settings tab, which is a panel like the others rather than a section
   bolted to the bottom of the page. */
[data-panel="settings"] { display: grid; gap: 14px; }
[data-panel="settings"] label { display: grid; gap: 6px; font-size: 0.9rem; }
[data-panel="settings"] .editor-actions { align-items: center; }

/* ----- Tabs ---------------------------------------------------------------
   Added when the hub outgrew one screen. The header stays put and only the
   panel under it changes, so the numbers people came for never scroll away. */

.tabs {
    display: flex;
    gap: 4px;
    margin: 18px 0 0;
    border-bottom: 1px solid var(--panel-border);
    flex-wrap: wrap;
}

.tab {
    padding: 9px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-here { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* The stats note belongs to the skills tab. Hidden rather than removed so it
   does not shift the panel about as the tabs change. */
.stats-note.is-off { display: none; }

/* Two columns of events side by side, which is what makes the tab fit. */
.events-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* More columns now the skills have a tab to themselves. */
.skills { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.bio-label { display: grid; gap: 6px; margin-top: 14px; font-size: 0.9rem; }

/* Emoji in an event title or a goal, sized to the line it sits on. */
.event-title .emoji, .goal .emoji {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}
.event-title .mention, .goal .mention {
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(217, 164, 65, 0.14);
    color: var(--accent-bright);
}
.event-title .mention-unknown, .goal .mention-unknown { background: none; color: var(--muted); }