/* RunFair operator console + runner/brand account flow. */
.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ops-grid label{display:grid;gap:6px;font-size:12px;color:#5f6a61}
.ops-grid input,.ops-grid select{width:100%;border:1px solid #dce2dc;border-radius:8px;background:#fff;padding:11px;font:inherit;color:#26332a}
.ops-form textarea{min-height:92px;resize:vertical;width:100%;border:1px solid #dce2dc;border-radius:8px;background:#fff;padding:11px;font:inherit;color:#26332a}
/* Fields outside .ops-grid are bare <label> children; without this they fall back
   to the UA input and render much shorter than their neighbours. */
.ops-form>label input,.ops-form>label select{width:100%;min-height:40px;border:1px solid #dce2dc;border-radius:8px;background:#fff;padding:11px;font:inherit;color:#26332a}
.ops-form>label{margin-top:13px;display:grid;gap:8px;font-size:12px;color:#5f6a61}
.ops-form .btn.primary{margin-top:20px}
.ops-races{border:1px solid #dfe5de;border-radius:11px;padding:14px 16px 10px;margin:16px 0 0}
.ops-races legend{font-size:12px;color:#5f6a61;padding:0 6px}
/* style.css sets `.review-form label{display:grid}`, which stacks a checkbox above
   its label text. These option labels must keep the higher specificity to stay a
   single flex row. This affects the register form and the operator brand form. */
.ops-races .ops-race,.ops-form .ops-race{display:inline-flex;align-items:center;gap:7px;font-size:13px;margin:0 20px 8px 0;color:#2c3a31;line-height:1.5}
.ops-race input[type="checkbox"]{width:16px;height:16px;min-height:0;flex:0 0 auto;margin:0;accent-color:#174f37}
.ops-reset{display:flex;gap:6px;align-items:center;min-width:220px}
.ops-reset input{flex:1;min-width:0;border:1px solid #dce2dc;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px}
.btn.small{padding:8px 12px;font-size:12px;white-space:nowrap}
.ops-hint{font-size:12px;color:#7c867e;margin:10px 0 0}
.ops-hint--quiet{margin-top:16px;padding-top:12px;border-top:1px solid #edf0ed}
.ops-hint--quiet a{color:#9aa39b;text-decoration:none;font-size:11px}
.ops-hint--quiet a:hover{color:#54715e;text-decoration:underline}

/* Application dialog. Reuses the post-race review dialog shell (pr-dialog) so the
   demo has one modal component; only the body layout is new here. */
.ap-dialog{width:min(620px,94vw)}
.ap-eligibility{padding:14px 16px;background:#f6f9f5;border:1px solid #e2e9df;border-radius:9px;margin-bottom:16px}
.ap-eligibility strong{font-size:13px;color:#233027}
.ap-eligibility dl{display:grid;grid-template-columns:88px 1fr;gap:0;margin:11px 0 0}
.ap-eligibility dt{color:#78827a;font-size:12px;padding:5px 0;border-top:1px solid #e8ede5}
.ap-eligibility dd{margin:0;padding:5px 0;font-size:13px;color:#25332a;border-top:1px solid #e8ede5;word-break:break-word}
.ap-eligibility__note{margin:11px 0 0;font-size:11px;color:#7c867e;line-height:1.6}
.ap-revision{padding:13px 15px;background:#fff7e8;border:1px solid #f0dfbe;border-radius:9px;margin-bottom:16px}
.ap-revision strong{font-size:13px;color:#8a5f10}
.ap-revision p{margin:7px 0 0;font-size:13px;color:#6b5423;line-height:1.6}
.ap-form{display:grid;gap:12px}
.ap-field{display:grid;gap:5px;font-size:12px;color:#5f6a61}
.ap-field--full{grid-column:1/-1}
.ap-field input,.ap-field textarea{width:100%;padding:10px;border:1px solid #cdd8ce;border-radius:7px;background:#fff;font:inherit;color:#26332a}
.ap-field textarea{min-height:110px;resize:vertical}
.ap-field small{font-size:11px;color:#8b948c}
.ap-error{grid-column:1/-1;margin:0;min-height:18px;color:#9d4536;font-size:12px}
.ap-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end;align-items:center}
.ap-actions .btn{width:auto;margin:0}
.ap-actions .btn:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:600px){
  .ap-dialog{padding:16px}
  .ap-eligibility dl{grid-template-columns:76px 1fr}
  .ap-actions{flex-direction:column-reverse;align-items:stretch}
  .ap-actions .btn{width:100%}
}
.runner-open-list{display:grid;gap:12px}
.runner-open{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid #e6ebe5;border-radius:12px;padding:16px 18px}
.runner-open h3{margin:0 0 4px;font-size:16px}
.runner-open p{margin:0;color:#6d776f;font-size:12px}
.runner-open .rf-btn{flex-shrink:0}
.runner-open .btn,.runner-open .rf-btn{min-height:44px}
.runner-open[data-state="applied"]{background:#f7f9f6;border-color:#e2e8e1}
.runner-open[data-state="revision"]{background:#fff8ec;border-color:#ecd9ae}
.runner-revision-note{margin:8px 0 0;padding:11px 13px;border-left:3px solid #d99b3a;background:#fff;border-radius:0 8px 8px 0;font-size:13px;color:#6b5423}
.runner-revision-note strong{display:block;margin-bottom:3px;color:#8a5f14}
.b-revision{background:#fff4df;color:#9b6811}

/* Self-service registration: three role cards each own a radio; the script under the
   form reveals the chosen role's fields and marks the card. With scripting off the
   default field set stays visible and the page still submits, so nothing depends
   on JS to register. */
.reg-login{max-width:900px}
.reg-role-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 4px}
.reg-role{display:grid;gap:5px;padding:15px 16px;border:1px solid #dfe5de;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.reg-role input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.reg-role__name{font-size:15px;font-weight:750;color:#233027}
.reg-role small{font-size:11px;color:#748078;line-height:1.5}
.reg-role.is-on{border-color:#174f37;box-shadow:0 0 0 2px #174f3722;background:#f6faf7}
.reg-role__tick{display:none;justify-self:start;margin-top:2px;padding:2px 9px;border-radius:999px;background:#174f37;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em}
.reg-role.is-on .reg-role__tick{display:inline-block}
.reg-role:focus-within{outline:3px solid #94c4a0;outline-offset:2px}
.reg-fields{margin-top:18px}
.reg-fields[hidden]{display:none}
.reg-fields-brand{margin-top:18px}
.reg-fields-runner{margin-top:6px}
.reg-form textarea{min-height:88px;resize:vertical;width:100%;border:1px solid #dce2dc;border-radius:8px;background:#fff;padding:11px;font:inherit;color:#26332a}
.reg-form>label{margin-top:13px;display:grid;gap:8px;font-size:12px;color:#5f6a61}
/* every field in the register form uses the same control styling, including the
   ones declared outside .ops-grid. Checkboxes are excluded: the generic rule would
   stretch them to the full column width and push the option text onto its own line. */
.reg-form input:not([type="radio"]):not([type="checkbox"]),.reg-form select{width:100%;min-height:40px;border:1px solid #dce2dc;border-radius:8px;background:#fff;padding:11px;font:inherit;color:#26332a}
@media(max-width:680px){.reg-role-cards{grid-template-columns:1fr;gap:9px}.reg-role{padding:13px 14px}}
.profile-form{display:grid;gap:0}
.profile-form .ops-grid{margin-bottom:4px}
/* 390px: the application table has six columns; stack the cells instead of letting
   long codes wrap mid-token. The table itself sets min-width:730px, so the mobile
   rules have to reset it or every row still scrolls sideways. */
@media(max-width:520px){
 .runner-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 /* style.css gives every table min-width:730px, which is what makes the six-column
    application list scroll sideways on a phone. Reset it on this table and its wrapper. */
 .runner-table-wrap{overflow-x:visible}
 .runner-table-wrap table.runner-table,table.runner-table{min-width:0;width:100%}
 .runner-table tbody tr{display:block;border-bottom:1px solid #e6ebe5;padding:6px 0}
 .runner-table tbody td{display:flex;justify-content:space-between;gap:14px;border:0;padding:7px 15px;text-align:right;width:auto}
 .runner-table tbody td::before{content:attr(data-label);color:#7d867f;font-size:11px;text-align:left;flex:0 0 auto}
 .runner-table tbody td small{text-align:right}
}
.runner-account-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.runner-account-head .runner-code{font-size:12px;color:#6f7a71;background:#eef3ee;padding:5px 10px;border-radius:20px}
.timeline .rev{padding-left:12px;border-left:3px solid #d99b3a}
/* Runner application summary strip */
.ap-eligibility__intro{margin:6px 0 0;font-size:12px;line-height:1.55;color:#66736a}
.runner-applications-head{align-items:end}
.runner-applications-head h2{margin-bottom:4px}
.runner-applications-head p{margin:0;color:#78827a;font-size:12px}
.runner-application-summary{margin:-7px 0 12px;font-size:12px;color:#5d6b60}
@media(max-width:520px){.runner-applications-head{align-items:start}.runner-applications-head .btn{width:auto}}
/* 注册页：窄卡片，账号与密码上下排列（只留账号、密码、确认密码） */
.reg-login{max-width:380px;margin:40px auto;padding:26px 24px 22px}
.reg-shared{grid-template-columns:minmax(0,1fr);gap:12px}
.reg-shared > span{display:none}
.reg-shared label{display:flex;flex-direction:column;gap:5px}
.reg-login .review-form{gap:12px}

/* 赛事管理 / 品牌新增赛事 */
.head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.races-new{margin:14px 0 4px;padding:14px 16px;border:1px dashed #b9c5bb;border-radius:11px;background:#fafcf9}
.races-new label{display:block;font-size:13px;color:#2c3a31}
.races-new input{display:block;width:100%;max-width:420px;margin-top:8px;border:1px solid #dce2dc;border-radius:8px;padding:10px 12px;font:inherit;font-size:14px}
.races-new small{display:block;margin-top:8px;color:#5f6a61;font-size:12px}
td .ops-reset{min-width:260px}
@media(max-width:600px){.head-actions{width:100%}.head-actions .btn{flex:1;text-align:center}.races-new input{max-width:none}td .ops-reset{min-width:0}}

.races-fixed{padding:12px 14px;border:1px solid #dfe5de;border-radius:11px;background:#f6f8f5}
.races-fixed strong{display:block;font-size:14px}
.races-fixed small{display:block;margin-top:6px;color:#5f6a61;font-size:12px;line-height:1.5}
.ops-race input[type="radio"]{width:16px;height:16px;min-height:0;flex:0 0 auto;margin:0;accent-color:#174f37}

/* 招募说明 */
.terms-hint{margin:2px 0 10px;color:#5f6a61;font-size:13px}
.review-form textarea[name=requirements],.review-form textarea[name=benefits],.review-form textarea[name=deposit_terms],.review-form textarea[name=postrace_requirements],.review-form textarea[name=other_notes]{width:100%;min-height:96px;resize:vertical;line-height:1.55}
.program-terms{margin:14px 0;padding:14px 16px;border:1px solid #dfe5de;border-radius:11px;background:#f9fbf8}
.program-terms>strong{display:block;margin-bottom:8px;font-size:14px}
.program-terms dl{margin:0}
.program-terms dt{margin-top:10px;font-size:12px;color:#5f6a61}
.program-terms dd{margin:3px 0 0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.brand-req{display:block;margin-top:6px;white-space:normal;overflow-wrap:anywhere}

/* ops AI review */
.ai-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ai-filter a{padding:6px 13px;border:1px solid #cfd8cf;border-radius:999px;background:#fff;color:#35523f;font-size:13px;text-decoration:none}
.ai-filter a.on{background:#174f37;border-color:#174f37;color:#fff}
.table-wrap td ul{margin:6px 0 0;padding-left:18px}

.metrics a.metric-link{display:block;padding:19px;background:#fff;border:1px solid #e8ece7;border-radius:13px;box-shadow:0 2px 8px #17251a05;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.metrics a.metric-link:hover{border-color:#7c9c83;transform:translateY(-2px)}
.metrics a.metric-link small,.metrics a.metric-link span{display:block;color:#768078;font-size:12px}
.metrics a.metric-link strong{display:block;font-size:32px;line-height:1.25;margin:10px 0 6px;letter-spacing:-.04em;color:#18201c}
.metrics a.metric-link span{color:#225e41;font-weight:600}
@media(max-width:800px){.metrics a.metric-link{padding:14px}.metrics a.metric-link strong{font-size:26px}}