/* ==========================================================================
   Shubham Gaur — shared styles
   Used by index.html, publications.html, cv.html, blog.html, misc.html
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

:root {
    --bg-color: #ffffff;
    --secondary-bg: #f5f5f7;
    --card-hover-bg: #ffffff;
    --card-border: transparent;
    --nav-bg: rgba(255, 255, 255, 0.8);
    --nav-border: rgba(0, 0, 0, 0.1);
    --text-main: #1d1d1f;
    --text-secondary: #86868b;
    --accent-blue: #0071e3;
    --accent-soft: rgba(0, 113, 227, 0.08);
    --border-color: #d2d2d7;
    --figure-bg: #ffffff;
    --btn-fill: #0071e3;
    --btn-text: #ffffff;
    --btn-hover-fill: #1d1d1f;
    --btn-hover-text: #ffffff;

    /* Research-theme accents. Each entry carries a primary label; hovering its
       card brings that theme's colour forward, so the colour encodes the
       taxonomy instead of just reacting to the cursor. Light and dark carry
       separate values because both have to clear WCAG AA against their own
       surfaces. */
    --theme-agents: #4f46e5;
    --theme-eval: #0f766e;
    --theme-human: #be185d;
    --theme-safety: #b45309;
    --theme-training: #15803d;
    --theme-vision: #7e22ce;
    --on-accent: #ffffff;
    --accent-tint: 8%;
    --accent-edge: 40%;
    --scroll-thumb: #c2c2c8;
    --scroll-thumb-hover: #9a9aa2;

    --radius-card: 18px;
    --radius-pill: 20px;
    --radius-chip: 7px;
    color-scheme: light;
}

/* Dark theme. Applied when the visitor picks it, or when they have no stored
   preference and their system asks for dark. Cards and chips keep a lifted
   background plus a visible border so they stay legible against the page. */
:root[data-theme="dark"] {
    --bg-color: #0a0a0c;
    --secondary-bg: #232329;
    --card-hover-bg: #2e2e36;
    --card-border: #3a3a42;
    --nav-bg: rgba(10, 10, 12, 0.82);
    --nav-border: rgba(255, 255, 255, 0.12);
    --text-main: #f2f2f4;
    --text-secondary: #9d9da5;
    --accent-blue: #4ea3ff;
    --accent-soft: rgba(78, 163, 255, 0.14);
    --border-color: #35353c;
    --figure-bg: #f7f7f8;
    --btn-fill: #4ea3ff;
    --btn-text: #0a0a0c;
    --btn-hover-fill: #ffffff;
    --btn-hover-text: #0a0a0c;

    /* Lighter, desaturated variants: the dark surfaces need the accent to come
       from above, not below. */
    --theme-agents: #a5b4fc;
    --theme-eval: #5eead4;
    --theme-human: #f9a8d4;
    --theme-safety: #fcd34d;
    --theme-training: #86efac;
    --theme-vision: #d8b4fe;
    --on-accent: #0a0a0c;
    --accent-tint: 14%;
    --accent-edge: 55%;
    --scroll-thumb: #51515c;
    --scroll-thumb-hover: #6e6e7c;

    color-scheme: dark;
}

body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
    color: var(--text-main);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Navigation --------------------------------------------------------- */

nav {
    position: sticky;
    top: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid var(--nav-border);
}

.nav-content {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
}

.nav-brand {
    font-weight: 600;
    font-size: 21px;
}

.nav-brand a {
    color: inherit;
    text-decoration: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    margin-left: 20px;
    opacity: 0.8;
    transition: opacity 0.3s, color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    opacity: 1;
    color: var(--accent-blue);
    text-decoration: none;
}

/* --- Layouts ------------------------------------------------------------ */

/* Homepage: sticky profile rail beside the content. */
.layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    padding: 56px 0 0;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 84px;
}

/* Every other page: single column, no rail. */
.page {
    padding: 48px 0 0;
}

.profile-img {
    width: 100%;
    height: auto;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    object-fit: cover;
    object-position: top center;
    background-color: var(--secondary-bg);
    display: block;
    margin-bottom: 20px;
}

.sidebar h1 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.003em;
    margin: 0 0 8px;
}

.sidebar-role {
    font-size: 15px;
    color: var(--text-main);
    margin: 0 0 6px;
    line-height: 1.4;
}

.sidebar-meta {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px;
    line-height: 1.45;
}

.social-links {
    display: flex;
    gap: 18px;
    margin: 18px 0 20px;
}

.social-links a {
    font-size: 20px;
    color: var(--text-main);
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--accent-blue);
    text-decoration: none;
}

.sidebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Headings ----------------------------------------------------------- */

h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.003em;
    /* sections own the space between them, so headings only space downwards */
    margin: 0 0 14px;
}

.content section {
    margin-bottom: 56px;
}

.content section:last-of-type {
    margin-bottom: 0;
}

/* a trailing card's own margin would otherwise widen the gap unevenly */
.content section > *:last-child {
    margin-bottom: 0;
}

h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 28px 0 12px;
}

.section-note {
    font-size: 14px;
    color: var(--text-secondary);
    margin: -6px 0 16px;
}

.prose {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-main);
}

/* --- Tags --------------------------------------------------------------- */

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    /* page background, not card background, so tags read against both */
    background: var(--bg-color);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    white-space: nowrap;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.tag-accent {
    background: rgba(0, 113, 227, 0.08);
    border-color: rgba(0, 113, 227, 0.25);
    color: var(--accent-blue);
}

/* --- News --------------------------------------------------------------- */

/* The feed scrolls in place so ten entries don't push the rest of the page
   down. The border sits on the wrapper, not the list, so it stays put while
   the entries move under it. */
.news-scroll {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--border-color);
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--secondary-bg);
}

.news-scroll:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 4px;
    border-radius: 4px;
}

.news-scroll::-webkit-scrollbar {
    width: 9px;
}

.news-scroll::-webkit-scrollbar-track {
    background: var(--secondary-bg);
    border-radius: 5px;
}

.news-scroll::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 5px;
}

.news-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}

.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-list li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    line-height: 1.5;
}

.news-date {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Cards (publications, experience, research themes) ------------------ */

.accent-agents { --card-accent: var(--theme-agents); }
.accent-eval { --card-accent: var(--theme-eval); }
.accent-human { --card-accent: var(--theme-human); }
.accent-safety { --card-accent: var(--theme-safety); }
.accent-training { --card-accent: var(--theme-training); }
.accent-vision { --card-accent: var(--theme-vision); }

.pub-card {
    background: var(--secondary-bg);
    border: 1px solid var(--card-border);
    margin-bottom: 20px;
    padding: 22px 24px;
    border-radius: var(--radius-card);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pub-card:hover {
    background: color-mix(in srgb, var(--card-accent, var(--accent-blue)) var(--accent-tint), var(--card-hover-bg));
    border-color: color-mix(in srgb, var(--card-accent, var(--accent-blue)) var(--accent-edge), var(--border-color));
    box-shadow: inset 3px 0 0 var(--card-accent, var(--accent-blue));
}

/* each label lights in its own theme colour, so a hovered row reads as a key */
.pub-card:hover .tag-row .tag {
    background: var(--card-accent, var(--accent-blue));
    border-color: var(--card-accent, var(--accent-blue));
    color: var(--on-accent);
}

.pub-container {
    display: flex;
    gap: 26px;
    align-items: flex-start;
}

.pub-figure {
    flex: 0 0 180px;
}

.pub-figure img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--figure-bg);
    display: block;
}

/* Teaser figure from the paper itself, in a left column beside the entry.
   Sized as a share of the card so it stays large on the full-width
   publications page. Clicking opens the full-resolution file. */
.pub-teaser {
    flex: 0 0 38%;
    min-width: 0;
    align-self: flex-start;
}

.layout .pub-teaser {
    flex-basis: 42%;
}

.pub-teaser img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--figure-bg);
    padding: 8px;
    transition: border-color 0.2s ease;
}

a.pub-teaser:hover img {
    border-color: var(--accent-blue);
}

a.pub-teaser {
    text-decoration: none;
}

.pub-details {
    flex: 1;
    min-width: 0;
}

.pub-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.pub-title {
    font-size: 19px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    line-height: 1.3;
}

.pub-authors {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
    line-height: 1.5;
}

/* the author's own name in a byline */
.me {
    color: var(--text-main);
    font-weight: 600;
}

.pub-authors a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--text-secondary);
}

.pub-venue {
    color: var(--accent-blue);
    font-weight: 500;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 10px;
}

/* the one-line takeaway under each paper */
.pub-highlight {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-main);
    border-left: 3px solid var(--accent-blue);
    padding-left: 14px;
    margin: 12px 0 2px;
}

.pub-meta {
    text-align: right;
    color: var(--text-secondary);
    font-size: 14px;
    min-width: 140px;
    line-height: 1.4;
    white-space: nowrap;
}

/* --- Buttons and link chips --------------------------------------------- */

.btn-group {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--btn-fill);
    color: var(--btn-text);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.25s ease, color 0.25s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn:hover {
    background: var(--btn-hover-fill);
    color: var(--btn-hover-text);
    text-decoration: none;
}

.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
}

.btn-ghost {
    background: transparent;
    color: var(--accent-blue);
    border: 1px solid var(--border-color);
}

.btn-ghost:hover {
    background: var(--accent-soft);
    color: var(--accent-blue);
}

/* Squared link boxes on publication entries: [arXiv] [Code] [OpenReview] */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--radius-chip);
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--accent-blue);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--btn-text);
    text-decoration: none;
}

.chip i {
    font-size: 11px;
    opacity: 0.85;
}

/* --- Theme toggle ------------------------------------------------------- */

.theme-toggle {
    margin-left: 20px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    vertical-align: middle;
}

.theme-toggle:hover {
    background: var(--secondary-bg);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* swap which glyph shows; the other is hidden in each theme */
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }

/* --- Compact list rows (education, teaching, awards, service) ----------- */

.edu-entry {
    margin-bottom: 12px;
    padding: 16px 20px;
    background: var(--secondary-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.edu-entry:hover {
    background: var(--card-hover-bg);
    border-color: var(--border-color);
}

.edu-info strong {
    font-size: 17px;
}

.edu-date {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
}

.list-compact {
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.65;
}

.list-compact li {
    margin-bottom: 7px;
}

.exp-list {
    padding-left: 20px;
    margin: 10px 0 0;
    color: var(--text-main);
    font-size: 15px;
    list-style-type: disc;
}

.exp-list li {
    margin-bottom: 6px;
}

/* --- Card grid ---------------------------------------------------------- */

.honors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.honor-card {
    background: var(--secondary-bg);
    border: 1px solid var(--card-border);
    padding: 22px 24px;
    border-radius: var(--radius-card);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.honor-card:hover {
    background: var(--card-hover-bg);
    border-color: var(--border-color);
}

.honor-icon {
    font-size: 22px;
    color: var(--accent-blue);
    margin-top: 2px;
}

.honor-content strong {
    display: block;
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.25;
}

.honor-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* --- Footer ------------------------------------------------------------- */

footer {
    margin: 72px 0 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 36px;
    }

    .page {
        padding-top: 32px;
    }

    .sidebar {
        position: static;
    }

    .profile-img {
        max-width: 140px;
        margin-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .nav-links a {
        margin-left: 14px;
        font-size: 15px;
    }

    .nav-brand {
        font-size: 18px;
    }

    .pub-container {
        flex-direction: column;
    }

    .pub-figure,
    .pub-teaser {
        flex: 1 1 auto;
        width: 100%;
    }

    .pub-head,
    .edu-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pub-meta,
    .edu-date {
        text-align: left;
        min-width: 0;
    }

    .news-list li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* --- Blog cards --------------------------------------------------------- */

.blog-card {
    background: var(--secondary-bg);
    border: 1px solid var(--card-border);
    margin-bottom: 20px;
    padding: 22px 24px;
    border-radius: var(--radius-card);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}

.blog-card:hover {
    background: color-mix(in srgb, var(--card-accent, var(--accent-blue)) var(--accent-tint), var(--card-hover-bg));
    border-color: color-mix(in srgb, var(--card-accent, var(--accent-blue)) var(--accent-edge), var(--border-color));
    box-shadow: inset 3px 0 0 var(--card-accent, var(--accent-blue));
    text-decoration: none;
}

.blog-source {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.blog-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 8px;
    display: block;
    line-height: 1.3;
}

.blog-desc {
    font-size: 15px;
    color: var(--text-main);
    line-height: 1.5;
    display: block;
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}