/* チーム戦の参加ガイド (Help/TeamContest.html) 用。
   画面を再現した図に、手順の番号を赤丸で重ねる。 */

.tg-toc {
    margin: 16px 0 24px;
    padding: 10px 14px;
    border-left: 4px solid #6aa;
    background: rgba(102, 170, 170, 0.08);
}
.tg-toc a {
    display: inline-block;
    margin-right: 18px;
    white-space: nowrap;
}

.tg-step {
    margin: 24px 0 32px;
}

.tg-head {
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 8px;
}

/* 手順の通し番号 */
.tg-num {
    display: inline-block;
    min-width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    margin-right: 8px;
    border-radius: 50%;
    background: #d9534f;
    color: #fff;
    text-align: center;
    font-size: 0.9em;
}

/* 画面の再現 */
.tg-fig {
    margin: 12px 0;
    max-width: 760px;
}
.tg-cap {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 4px;
}
.tg-shot {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 14px 16px;
    background: #fff;
    /* 図の中は実画面に近い見え方にしたいので、本文の色設定を持ち込まない */
    color: #333;
    overflow-x: auto;
}

.tg-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}
.tg-dim { opacity: 0.55; }

.tg-input {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #fff;
    font-family: monospace;
    min-width: 8em;
}
.tg-input.tg-url {
    min-width: 0;
    max-width: 30em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tg-input.tg-narrow { min-width: 6em; }
.tg-input.tg-ph { color: #999; }

.tg-btn {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #adadad;
    border-radius: 3px;
    background: linear-gradient(#fff, #eee);
    white-space: nowrap;
}
.tg-btn.tg-primary {
    border-color: #2e6da4;
    background: linear-gradient(#428bca, #3071a9);
    color: #fff;
}
.tg-btn.tg-small { padding: 0 6px; font-size: 0.8em; }

.tg-link { color: #337ab7; text-decoration: underline; }

.tg-alert {
    padding: 10px 14px;
    background: #d9edf7;
    border: 1px solid #bce8f1;
    border-radius: 4px;
    color: #31708f;
    line-height: 1.7;
}

.tg-myteam {
    border: 2px solid #6aa;
    padding: 10px 14px;
}
.tg-sub { margin-top: 8px; }

.tg-invite {
    border: 1px solid #ddd;
    padding: 12px 16px;
    max-width: 560px;
}
.tg-invite-title { font-size: 1.1em; margin-bottom: 8px; }

.tg-table {
    border-collapse: collapse;
    width: 100%;
}
.tg-table th,
.tg-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}
.tg-table th { border-bottom-width: 2px; border-bottom-color: #ddd; }
.tg-user { display: inline-block; margin-right: 10px; white-space: nowrap; }

.tg-muted { color: #777; font-size: 0.9em; }
.tg-note { color: #666; font-size: 0.9em; line-height: 1.7; }

.tg-warn {
    margin: 14px 0;
    padding: 10px 14px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    line-height: 1.7;
}

.tg-rules {
    border-collapse: collapse;
    margin: 12px 0;
    max-width: 760px;
}
.tg-rules th,
.tg-rules td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}
.tg-rules th { width: 12em; white-space: nowrap; background: rgba(0, 0, 0, 0.03); }

.tg-faq dt { font-weight: bold; margin-top: 14px; }
.tg-faq dd { margin: 4px 0 0 1.2em; line-height: 1.8; }

/* ---- 赤丸の注記 ----
   注目してほしい要素を赤い枠で囲み、右上に番号を出す。
   data-mark の値がそのまま番号になる。 */
.tg-mark {
    position: relative;
    outline: 2px solid #d9534f;
    outline-offset: 3px;
    border-radius: 999px;
}
.tg-mark::after {
    content: attr(data-mark);
    position: absolute;
    top: -12px;
    right: -14px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #d9534f;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    /* 図の他の要素より前に出す */
    z-index: 2;
}

/* 角の丸い枠だと四角い入力欄が不自然なので、入力欄と表のボタンは角丸を抑える */
.tg-input.tg-mark,
.tg-table .tg-mark { border-radius: 4px; }

@media (max-width: 700px) {
    .tg-toc a { display: block; margin: 4px 0; }
    .tg-rules th { width: auto; }
}

/* 順位表の図。実画面(contest_row_display / table-beta.ts)の見せ方に合わせて
   チーム名を大きく、その下にメンバーのアイコンだけ並べる。
   図なので実際のアイコン画像は使わず、同じ大きさの四角で形だけ示す。 */
.tg-rank th,
.tg-rank td { white-space: nowrap; }
.tg-teamname { display: block; font-weight: bold; font-size: 1.15em; }
.tg-members {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}
.tg-membericon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: #c9c9c9;
}
.tg-miss { color: #d9534f; }
/* 自分が入っているチームの行は実画面でも強調される */
.tg-mine { background: #fffbe6; }

/* 提出一覧の図に置くチェックボックス風の表示。実物の input は使わない
   (押せてしまうと、ヘルプの図が操作できるように見える) */
.tg-check {
    margin-left: 12px;
    color: #555;
}