/*
    Discord yetkili ekip başvurusu (views/page/yetkili-basvuru.tpl).
    Theme tokens only (--hh-*), so light and dark follow the site. Touch targets are at least 44px.
*/

/* Positions */
.yb-roles{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:768px){.yb-roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.yb-role{display:flex;flex-direction:column;gap:.5rem;min-width:0;padding:1.5rem;border:1px solid var(--hh-border-color);border-radius:var(--hh-radius);background-color:var(--hh-surface-bg)}
.yb-role-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:2.75rem;block-size:2.75rem;border-radius:var(--hh-radius);background-color:var(--hh-primary-subtle);color:var(--hh-primary-text);font-size:1.35rem}
.yb-role-title{margin:0;font-size:1.125rem;font-weight:700;color:var(--hh-heading-color)}
.yb-role-text{margin:0;color:var(--hh-muted-color)}

.yb-steps-title{margin:2.5rem 0 1rem;font-size:1.125rem;font-weight:700;color:var(--hh-heading-color)}
.yb-steps{display:grid;gap:.75rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media (min-width:992px){.yb-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.yb-steps li{display:flex;align-items:flex-start;gap:.75rem;min-width:0;color:var(--hh-body-color)}
.yb-step-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:1.75rem;block-size:1.75rem;border-radius:50%;background-color:var(--hh-primary);color:var(--hh-on-primary);font-size:.875rem;font-weight:700;font-variant-numeric:tabular-nums}

/* Form shell */
.yb-wrap{max-width:52rem;margin-inline:auto}
.yb-form .card-body{padding:1.25rem}
@media (min-width:768px){.yb-form .card-body{padding:2rem}}
.yb-sec{min-width:0;margin:0 0 2rem;padding:0;border:0}
.yb-sec:last-of-type{margin-bottom:1.5rem}
.yb-sec-title{display:flex;align-items:center;gap:.6rem;float:none;inline-size:100%;margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--hh-border-color);font-size:1rem;font-weight:700;color:var(--hh-heading-color)}
.yb-sec-title>span{display:inline-flex;align-items:center;justify-content:center;inline-size:1.6rem;block-size:1.6rem;border-radius:50%;background-color:var(--hh-primary-subtle);color:var(--hh-primary-text);font-size:.8125rem;font-variant-numeric:tabular-nums}
.yb-field>.form-label{display:block}
.yb-field+.row{margin-top:1rem}

/* Position cards */
.yb-choice-grid{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:576px){.yb-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.yb-choice{position:relative;display:block;min-width:0;cursor:pointer}
.yb-choice input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.yb-choice-body{display:flex;align-items:center;gap:.75rem;min-block-size:3.5rem;padding:.75rem 1rem;border:1px solid var(--hh-border-color);border-radius:var(--hh-radius);background-color:var(--hh-surface-bg);color:var(--hh-body-color);transition:border-color .2s var(--hh-ease,ease),box-shadow .2s var(--hh-ease,ease),background-color .2s var(--hh-ease,ease)}
.yb-choice-body i{font-size:1.25rem;color:var(--hh-primary-text)}
.yb-choice:hover .yb-choice-body{border-color:var(--hh-primary)}
.yb-choice input:focus-visible+.yb-choice-body{box-shadow:var(--hh-focus-ring)}
.yb-choice input:checked+.yb-choice-body{border-color:var(--hh-primary);background-color:var(--hh-primary-subtle);box-shadow:inset 0 0 0 1px var(--hh-primary)}

/* Pills: yes/no and skills */
.yb-skill-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.yb-pill{position:relative;display:inline-flex;cursor:pointer}
.yb-pill input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.yb-pill span{display:inline-flex;align-items:center;min-block-size:2.75rem;padding:.45rem 1rem;border:1px solid var(--hh-border-color);border-radius:999px;background-color:var(--hh-surface-bg);color:var(--hh-body-color);transition:border-color .2s var(--hh-ease,ease),background-color .2s var(--hh-ease,ease)}
.yb-pill:hover span{border-color:var(--hh-primary)}
.yb-pill input:focus-visible+span{box-shadow:var(--hh-focus-ring)}
.yb-pill input:checked+span{border-color:var(--hh-primary);background-color:var(--hh-primary-subtle);color:var(--hh-primary-text);font-weight:600}

/* Group errors (radio, checkbox groups): the field wrapper carries .is-invalid */
.yb-field.is-invalid>.invalid-feedback,.yb-field.is-invalid .form-check>.invalid-feedback{display:block}
.yb-field.is-invalid .yb-choice-body,.yb-field.is-invalid .yb-pill span{border-color:var(--bs-danger)}
.yb-check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem;min-block-size:2.75rem;padding-left:0}
.yb-check .form-check-input{flex:0 0 auto;inline-size:1.25rem;block-size:1.25rem;margin:.1rem 0 0;float:none}
.yb-check .invalid-feedback{flex-basis:100%}
.yb-check .form-check-label{flex:1 1 0;min-width:0}

.yb-alert{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:1.25rem;padding:.75rem 1rem;border-radius:var(--hh-radius);background-color:var(--bs-danger-bg-subtle);color:var(--bs-danger-text-emphasis)}
.yb-alert.is-warning{background-color:var(--bs-warning-bg-subtle);color:var(--bs-warning-text-emphasis)}
.yb-alert i{margin-top:.15rem}

.yb-submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--hh-border-color)}
.yb-submit .btn{min-block-size:2.75rem;margin-inline-start:auto}
@media (max-width:575.98px){.yb-submit .btn{inline-size:100%;margin-inline-start:0}}

/* Guest / open application / done */
.yb-state .card-body{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 1.25rem;text-align:center}
@media (min-width:768px){.yb-state .card-body{padding:3rem 2rem}}
.yb-state-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:4rem;block-size:4rem;border-radius:50%;background-color:var(--hh-primary-subtle);color:var(--hh-primary-text);font-size:1.9rem;line-height:1}
.yb-state-wait{background-color:var(--bs-warning-bg-subtle);color:var(--bs-warning-text-emphasis)}
.yb-state-ok{background-color:var(--bs-success-bg-subtle);color:var(--bs-success-text-emphasis)}
.yb-state-title{margin:0;font-size:1.25rem;font-weight:700;color:var(--hh-heading-color)}
.yb-state-text{max-width:36rem;margin:0;color:var(--hh-muted-color)}
.yb-state-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;margin:.25rem 0 .5rem}
.yb-state-meta div{display:flex;flex-direction:column;align-items:center}
.yb-state-meta dt{font-size:.8125rem;font-weight:500;color:var(--hh-muted-color)}
.yb-state-meta dd{margin:0;font-weight:700;color:var(--hh-heading-color)}
.yb-state .btn{min-block-size:2.75rem}