/*
 * 北大移行点ナビのレイアウト
 * 色・文字・余白・角丸は Shoelace（https://shoelace.style）の既定の値を使い、独自の装飾は足さない
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sl-font-sans);
    font-size: var(--sl-font-size-medium);
    line-height: var(--sl-line-height-normal);
    color: var(--sl-color-neutral-900);
    background: var(--sl-color-neutral-50);
}

/* Shoelace の部品が読み込まれるまで隠し、形が崩れて見えるのを防ぐ */
:not(:defined) {
    visibility: hidden;
}

a {
    color: var(--sl-color-primary-600);
}

h1,
h2,
h3 {
    line-height: var(--sl-line-height-dense);
    font-weight: var(--sl-font-weight-semibold);
}

h2 {
    font-size: var(--sl-font-size-large);
    margin: 0 0 var(--sl-spacing-medium);
}

h3 {
    font-size: var(--sl-font-size-medium);
    margin: var(--sl-spacing-large) 0 var(--sl-spacing-x-small);
}

p {
    margin: 0 0 var(--sl-spacing-small);
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--sl-spacing-large);
}

/* ===== ヘッダー・フッター ===== */
header {
    background: var(--sl-color-neutral-0);
    border-bottom: 1px solid var(--sl-color-neutral-200);
}

header .container {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-medium);
    min-height: 56px;
}

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

header h1 {
    margin: 0;
    font-size: var(--sl-font-size-medium);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-x-small);
    margin-left: auto;
}

.site-nav > a {
    color: var(--sl-color-neutral-600);
    text-decoration: none;
    font-size: var(--sl-font-size-small);
    padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
    border-radius: var(--sl-border-radius-medium);
}

.site-nav > a:hover,
.site-nav > a[aria-current='page'] {
    color: var(--sl-color-neutral-900);
    background: var(--sl-color-neutral-100);
}

.header-right:empty {
    display: none;
}

footer {
    border-top: 1px solid var(--sl-color-neutral-200);
    color: var(--sl-color-neutral-500);
    font-size: var(--sl-font-size-small);
    padding: var(--sl-spacing-large) 0 var(--sl-spacing-3x-large);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-spacing-x-small) var(--sl-spacing-large);
    margin-bottom: var(--sl-spacing-x-small);
}

.footer-links a {
    color: inherit;
}

/* .container の左右の余白を残したまま、上下の余白を付ける */
main.container {
    padding-top: var(--sl-spacing-3x-large);
    padding-bottom: var(--sl-spacing-4x-large);
}

/* ===== 区画（sl-card と同じ見た目の section） ===== */
.panel {
    background: var(--sl-color-neutral-0);
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-large);
    box-shadow: var(--sl-shadow-x-small);
    padding: var(--sl-spacing-large);
    margin-bottom: var(--sl-spacing-large);
}

.muted,
.helper-text {
    color: var(--sl-color-neutral-500);
    font-size: var(--sl-font-size-small);
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sl-spacing-small);
}

/* ===== 絞り込みの下段（年度と、自分の移行点との比較） ===== */

/* ===== 選択チップ（学部・学科・年度） ===== */
.year-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-spacing-x-small);
}

.year-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--sl-spacing-small);
    border: 1px solid var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-pill);
    background: var(--sl-color-neutral-0);
    color: var(--sl-color-neutral-700);
    font-size: var(--sl-font-size-small);
    cursor: pointer;
    user-select: none;
}

.year-toggle:hover {
    border-color: var(--sl-color-primary-500);
}

.year-toggle:has(input:checked) {
    background: var(--sl-color-primary-50);
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-primary-700);
}

.year-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.year-toggle:focus-within {
    outline: var(--sl-focus-ring);
    outline-offset: var(--sl-focus-ring-offset);
}

/* ===== 表 ===== */
.table-container {
    overflow: auto;
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sl-font-size-small);
}

th,
td {
    padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
    border-bottom: 1px solid var(--sl-color-neutral-200);
    text-align: left;
    white-space: nowrap;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sl-color-neutral-50);
    color: var(--sl-color-neutral-600);
    font-weight: var(--sl-font-weight-semibold);
}

td {
    font-variant-numeric: tabular-nums;
}

tbody tr:last-child td {
    border-bottom: 0;
}

td.tentative {
    color: var(--sl-color-neutral-500);
}

/* ===== グラフ ===== */
.chart-container {
    position: relative;
    height: 420px;
}

#chart-limit-notice {
    position: absolute;
    top: 0;
    right: 0;
    font-size: var(--sl-font-size-x-small);
    color: var(--sl-color-neutral-500);
}

/* ===== 読み込み・エラー表示（data-api.js が作る） ===== */
.app-loading-container,
.data-loading-overlay,
.data-error-overlay {
    display: grid;
    place-items: center;
    padding: var(--sl-spacing-4x-large) 0;
    text-align: center;
    color: var(--sl-color-neutral-600);
}

.data-loading-overlay,
.data-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgb(255 255 255 / 80%);
}

.data-error-content {
    max-width: 420px;
}

.app-loading-spinner,
.data-loading-spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto var(--sl-spacing-small);
    border: 3px solid var(--sl-color-neutral-200);
    border-top-color: var(--sl-color-primary-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.initial-loading-bar {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-spinner,
    .data-loading-spinner {
        animation: none;
    }
}

/* ===== ログイン前の画面 ===== */
.auth-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--sl-spacing-4x-large) var(--sl-spacing-large) var(--sl-spacing-3x-large);
}

.landing-hero {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.landing-hero h2 {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: var(--sl-spacing-medium) 0;
}

.landing-lead {
    font-size: var(--sl-font-size-large);
    line-height: var(--sl-line-height-loose);
    color: var(--sl-color-neutral-700);
}

.google-login-slot {
    display: flex;
    justify-content: center;
    min-height: 44px;
    margin: var(--sl-spacing-x-large) 0 var(--sl-spacing-small);
}

.landing-hero sl-alert {
    margin-top: var(--sl-spacing-medium);
    text-align: left;
}

.landing-shot {
    margin: var(--sl-spacing-3x-large) 0 0;
}

.landing-shot img,
.feature img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-x-large);
    box-shadow: var(--sl-shadow-large);
    background: var(--sl-color-neutral-0);
}

.landing-features {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-4x-large);
    margin-top: var(--sl-spacing-4x-large);
}

.feature {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: var(--sl-spacing-3x-large);
}

.feature:nth-child(even) img {
    order: 2;
}

.feature img {
    box-shadow: var(--sl-shadow-medium);
}

.feature h3 {
    font-size: var(--sl-font-size-x-large);
    margin: 0 0 var(--sl-spacing-small);
}

.feature p {
    color: var(--sl-color-neutral-700);
    line-height: var(--sl-line-height-loose);
}

.feature-text {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.landing-cta {
    margin-top: var(--sl-spacing-4x-large);
    padding-top: var(--sl-spacing-3x-large);
    border-top: 1px solid var(--sl-color-neutral-200);
    text-align: center;
}

.landing-cta p:first-child {
    font-size: var(--sl-font-size-large);
    font-weight: var(--sl-font-weight-semibold);
}

@media (max-width: 760px) {
    .auth-container {
        padding-top: var(--sl-spacing-2x-large);
    }
    .feature {
        grid-template-columns: 1fr;
        gap: var(--sl-spacing-large);
    }
    .feature:nth-child(even) img {
        order: 0;
    }
    .landing-features {
        gap: var(--sl-spacing-3x-large);
    }
}

/* ===== ヘッダーのユーザー表示 ===== */
.user-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sl-spacing-x-small);
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-700);
    padding: var(--sl-spacing-2x-small);
    border-radius: var(--sl-border-radius-pill);
}

.user-trigger:focus-visible {
    outline: var(--sl-focus-ring);
}

@media (max-width: 640px) {
    .container {
        padding: 0 var(--sl-spacing-medium);
    }
    .panel {
        padding: var(--sl-spacing-medium);
    }
    .site-nav > a {
        padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
    }
    .user-trigger .user-name {
        display: none;
    }
    .chart-container {
        height: 320px;
    }
}

/* ===== 本文だけのページ ===== */
.prose {
    max-width: 760px;
}

.prose h2 {
    font-size: var(--sl-font-size-x-large);
}

.prose ul {
    padding-left: 1.2em;
    margin: 0 0 var(--sl-spacing-medium);
}

.prose li + li {
    margin-top: var(--sl-spacing-2x-small);
}

.prose dt {
    font-weight: var(--sl-font-weight-semibold);
    margin-top: var(--sl-spacing-small);
}

.prose dd {
    margin: 0;
    color: var(--sl-color-neutral-700);
}

.prose sl-alert {
    margin-top: var(--sl-spacing-x-large);
}

.prose .figure,
.prose figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-large);
}

.prose .figure {
    margin: var(--sl-spacing-large) 0;
}

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sl-spacing-medium);
    margin: var(--sl-spacing-medium) 0;
}

.figures figure {
    margin: 0;
}

.figures figcaption {
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-neutral-500);
    margin-top: var(--sl-spacing-2x-small);
}

.embed iframe {
    width: 100%;
    height: 900px;
    border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-large);
    background: var(--sl-color-neutral-0);
    margin: var(--sl-spacing-medium) 0;
}

/* 日本語の見出しを語の途中で折り返さない */
h1,
h2,
h3 {
    text-wrap: balance;
    word-break: auto-phrase;
}

/* データ画面の上部のお知らせ */
.contribute-notice {
    margin-bottom: var(--sl-spacing-large);
}

/* スマホでは、ヘッダーを 2 段にする（1 段目: サイト名とアカウント / 2 段目: ページの切り替え） */
@media (max-width: 640px) {
    header .container {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        align-items: center;
        gap: 0 var(--sl-spacing-x-small);
        min-height: 0;
        padding-top: var(--sl-spacing-small);
        padding-bottom: 0;
    }
    header .brand {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .site-nav {
        display: contents;
    }
    .site-nav > a {
        grid-row: 2;
        text-align: center;
        white-space: nowrap;
        border-radius: 0;
        padding: var(--sl-spacing-small) 0;
        margin-top: var(--sl-spacing-x-small);
        border-bottom: 2px solid transparent;
    }
    .site-nav > a:hover,
    .site-nav > a[aria-current='page'] {
        background: none;
        border-bottom-color: var(--sl-color-primary-600);
        color: var(--sl-color-primary-700);
    }
    .site-nav > a:nth-of-type(1) {
        grid-column: 1;
    }
    .site-nav > a:nth-of-type(2) {
        grid-column: 2 / 4;
    }
    .site-nav > a:nth-of-type(3) {
        display: none;
    }
    .header-right {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}