.size-4 {
    width: 1rem;
    height: 1rem;
}

.size-6 {
    width: 1.5rem;
    height: 1.5rem;
}

.tabs {
    margin-bottom: var(--pico-spacing);
}

.tabs > ul {
    padding-left: 1rem;
}

.tabs > ul > li {
    border-bottom: 3px solid transparent;
    padding: var(--pico-nav-element-spacing-vertical) calc(var(--pico-nav-element-spacing-horizontal) * 2.5)
}

.tabs > ul > li > a {
    text-decoration: none;
}

.tabs > ul > li.active {
    border-bottom: 3px solid var(--pico-primary-underline);
    font-weight: bold;
}

article.applicant-comment,
.card.applicant-comment-form {
    border: 2px solid var(--pico-color-grey-100);
    border-radius: 2px;
}

.applicant-comment-form-container {
    padding: 1rem;
}

.applicant-comment-header {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2rem;
    justify-content: start;
}

.candidate-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pico-spacing);
}

.candidate-switcher > form {
    margin: 0;
    display: flex;
    align-items: center;
}

.candidate-switcher > form > button {
    margin: 0;
}

.candidate-switcher__index {
    font-weight: bold;
}

/* 検索結果の該当件数。一覧テーブルの直上に置く。 */
.search-result-count {
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--pico-color-zinc-600);
}

/* 見出し（h1）の中に置くセレクト。Pico のセレクト風の枠と背景はそのまま活かしつつ、
   文字サイズだけ見出しに合わせる。 */
details.dropdown.heading-dropdown {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0.3em;
    vertical-align: baseline;
}

/* Pico の summary:not([role]) は height / padding が rem 固定で、
   見出しの文字サイズだと収まらないので em 基準に置き換える。 */
details.dropdown.heading-dropdown > summary {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.1em 0.4em;
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-form-element-background-color);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* キャレットも 1rem 固定なので、見出しの文字サイズに合わせて拡大・中央寄せする。 */
details.dropdown.heading-dropdown > summary::after {
    width: 1em;
    height: 1em;
    background-position: right center;
    background-size: 0.7em auto;
}

/* --pico-font-size / --pico-line-height は h1 側で再定義されており、
   var() で参照すると見出しサイズを引き継いでしまうのでリテラルで指定する。 */
details.dropdown.heading-dropdown > ul {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
}

/* 受験者検索。サイドメニューで左 18rem を使っているので、検索条件は
   左カラムではなくカード内に横並びで置く。
   キーワード欄はラベルと入力欄を直に置いており、幅も下の余白も Pico の既定
   （input は width: 100% / margin-bottom: var(--pico-spacing)）で足りるため
   専用の指定を持たない。 */

/* 検索の実行ボタンはカードの右下に置く。条件を上から順に埋めて最後に押す並びにする。 */
.examinee-search__actions {
    display: flex;
    justify-content: flex-end;
    /* flex の既定 align-items: stretch だと、背の高い方に合わせて他方が引き伸ばされる。
       引き伸ばされた側は padding が上下均等のままなので、文字が上に寄って崩れて見える。 */
    align-items: center;
    gap: calc(var(--pico-spacing) * 0.5);
    margin-top: var(--pico-spacing);
}

/* 送信ボタンの下マージンを消す。Pico の
   `input:not([type=checkbox],[type=radio])` は :not() の引数が属性セレクタなので
   詳細度 (0,1,1) になり、`.examinee-search__actions > *` (0,1,0) では負ける。
   属性セレクタを足して (0,2,1) にして打ち消す。 */
.examinee-search__actions > *,
.examinee-search__actions > input[type="submit"] {
    margin-bottom: 0;
}

.examinee-search__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pico-spacing);
}

.examinee-search__grid > fieldset {
    margin-bottom: 0;
}

.examinee-search__advanced {
    margin-top: var(--pico-spacing);
    padding-top: var(--pico-spacing);
    border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
}

/* 幅は Pico の `details summary[role=button]{width:100%}` に任せて全幅のバーにする。
   下に開く中身と同じ幅なので、開閉の対象が一目で分かる。 */
.examinee-search__advanced > summary {
    margin-bottom: 0;
}

.examinee-search__advanced[open] > summary {
    margin-bottom: var(--pico-spacing);
}

/* 件数と表示範囲の行。上下の余白を、素の状態（上はカードの padding、下は p の
   margin-bottom）の2倍に広げて、検索カードと結果テーブルの間で詰まって見えないようにする。
   余白はこの行が持ち、中の p 側は 0 にする（.mb-* ユーティリティは !important なので
   ここで打ち消すのではなく、ビュー側で付けない）。 */
.examinee-search__summary {
    margin-top: var(--pico-spacing);
    margin-bottom: var(--pico-spacing);
}

.examinee-search__summary > p {
    margin-bottom: 0;
}

.examinee-search__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--pico-spacing) * 0.5);
    padding: calc(var(--pico-spacing) * 4) var(--pico-spacing);
    border: var(--pico-border-width) dashed var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-code-background-color);
}

.examinee-search__empty p {
    margin-bottom: 0;
}