/* ============================================================
   Round the County competitor portal
   Earth-tone palette to match the 2026 RTC pages:
     spruce  #2F4A3E  (header, primary actions)
     sand    #EFE9DC  (page background)
     parch   #FBF9F3  (panels)
     bark    #37332C  (body text)
     moss    #4E7A46  (confirmed / signed)
     clay    #A8552E  (provisional / danger)
     brass   #8A6D3B  (accents, pending)
   ============================================================ */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #EFE9DC;
    color: #37332C;
    font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- masthead ---------- */
.masthead {
    background: #2F4A3E;
    color: #F4EFE3;
    border-bottom: 4px solid #8A6D3B;
}
.masthead-inner { max-width: 900px; margin: 0 auto; padding: 22px 16px 16px; }
.masthead-race {
    font-family: "Iowan Old Style", Palatino, Georgia, serif;
    font-size: 1.9em; letter-spacing: .02em;
}
.masthead-sub { font-size: .85em; text-transform: uppercase; letter-spacing: .25em; opacity: .75; }
.masthead-boat {
    margin-top: 10px;
    font-family: "Iowan Old Style", Palatino, Georgia, serif;
    font-size: 1.25em; color: #E8D9A8;
}
.masthead-badges { margin-top: 6px; }
.masthead-inner { position: relative; }
.masthead-logout {
    position: absolute; top: 22px; right: 16px;
    color: #E8D9A8; font-size: .85em; text-decoration: underline;
}
.masthead-logout:hover { color: #FFFFFF; }

/* ---------- layout ---------- */
main { max-width: 900px; margin: 0 auto; padding: 0 12px; }
.panel {
    background: #FBF9F3;
    border: 1px solid #D8CFBB;
    border-radius: 8px;
    padding: 20px 22px 26px;
    margin: 18px auto;
}
#gate { max-width: 460px; }

h2, h3, h4 {
    font-family: "Iowan Old Style", Palatino, Georgia, serif;
    color: #2F4A3E; font-weight: 600;
}
h3 { margin: 22px 0 8px; border-bottom: 1px solid #E2DAC8; padding-bottom: 4px; }
h4 { margin: 0 0 8px; }
.mt { margin-top: 34px; }
.muted { color: #7A7264; }
.small { font-size: .88em; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* Recapture horizontal space on small screens - the desktop padding/margin
   values above are generous enough to visibly eat into content width on a
   phone (crew table wrapping, the NOR iframe, etc). */
@media (max-width: 640px) {
    main { padding: 0 6px; }
    .masthead-inner { padding: 16px 10px 12px; }
    .masthead-logout { top: 16px; right: 10px; }
    .panel { padding: 12px 12px 16px; margin: 10px auto; border-radius: 6px; }
    h3 { margin: 16px 0 6px; }
    .mt { margin-top: 22px; }
    .tab { padding: 8px 10px; font-size: .9em; }
}

.row { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- forms ---------- */
label { display: block; margin: 12px 0 3px; font-size: .88em; font-weight: 600; color: #5A5348; }
label.radio { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 1em; margin: 6px 0; }
input {
    width: 100%; padding: 9px 10px;
    border: 1px solid #C9BFA8; border-radius: 5px;
    background: #FFFFFF; color: #37332C; font-size: 1em;
}
input[type="radio"], input[type="checkbox"] { width: auto; }
input:focus { outline: 2px solid #2F4A3E; outline-offset: 1px; }
input.field-error { border-color: #A8552E; background: #FBF0E9; }

/* Live required-field indicator (distinct from .field-error, which is a
   one-shot scroll-to highlight after a failed submit) - added 2026-09-05.
   Red while a required field (or required group - e.g. "at least one
   phone", "PHRF or ORC") is unsatisfied, back to plain white the moment
   it is; a field with no requirement at all never gets this class, so it
   stays white regardless of content. */
input.field-needed { background: #FBE1D8; border-color: #C97456; }

/* ---------- buttons ---------- */
.btn {
    display: inline-block; margin-top: 14px;
    padding: 10px 18px; font-size: 1em; cursor: pointer;
    border: 1px solid #2F4A3E; border-radius: 5px;
    background: #FBF9F3; color: #2F4A3E;
}
.btn:hover { background: #EFE9DC; }
.btn-primary { background: #2F4A3E; color: #F4EFE3; }
.btn-primary:hover { background: #3C5C4E; }
.btn-danger { border-color: #A8552E; color: #A8552E; }
.btn-danger:hover { background: #F5E3D8; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* .btn's own `display` otherwise beats the browser's default [hidden]
   rule, so el.hidden=true on a button silently does nothing - same
   problem .modal[hidden] below was already added to fix. Added
   2026-09-07 after submitBtn stayed visible post-payment. */
.btn[hidden] { display: none; }
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- tabs ---------- */
.tabs {
    display: flex; gap: 4px; margin-top: 18px;
    border-bottom: 2px solid #2F4A3E; flex-wrap: wrap;
}
.tab {
    padding: 10px 16px; font-size: 1em; cursor: pointer;
    background: #E4DCC9; color: #5A5348;
    border: 1px solid #D8CFBB; border-bottom: none;
    border-radius: 7px 7px 0 0;
}
.tab.active { background: #2F4A3E; color: #F4EFE3; border-color: #2F4A3E; }
.tab:focus-visible { outline: 2px solid #8A6D3B; }
.tabpane { margin-top: 0; border-top: none; border-radius: 0 0 8px 8px; }

/* ---------- pills & badges ---------- */
.pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: .78em; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; vertical-align: middle;
}
.pill-ok      { background: #DCE9D6; color: #2F5A28; }
.pill-warn    { background: #F2E3C8; color: #7A5A1E; }
.pill-bad     { background: #F5DDCE; color: #8A3E1C; }
.pill-neutral { background: #E4DCC9; color: #5A5348; }
.vbadge { margin-left: 8px; }

/* ---------- alerts ---------- */
.alert { margin: 14px 0 0; padding: 10px 14px; border-radius: 6px; font-size: .95em; }
.alert-ok   { background: #DCE9D6; color: #2F5A28; border: 1px solid #B7D0AC; }
.alert-ok-prominent {
    background: #DCE9D6; color: #2F5A28; border: 1px solid #B7D0AC;
    border-left: 5px solid #4E7A46; font-size: 1.02em; padding: 12px 16px;
}
.alert-warn { background: #F2E3C8; color: #6E5119; border: 1px solid #DFC793; }
.alert-bad  { background: #F5DDCE; color: #7C3818; border: 1px solid #E0B79E; }

/* ---------- crew table ---------- */
.crewtable { width: 100%; border-collapse: collapse; margin-top: 10px; }
.crewtable th, .crewtable td {
    text-align: left; padding: 8px 6px;
    border-bottom: 1px solid #E2DAC8; font-size: .95em;
}
.crewtable th { font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: #7A7264; }
.crew-email { word-break: break-all; }
.crew-remove {
    padding: 4px 10px; font-size: .85em; cursor: pointer;
    background: none; border: 1px solid #A8552E; border-radius: 4px; color: #A8552E;
}
.crew-add {
    padding: 4px 10px; font-size: .85em; cursor: pointer;
    background: none; border: 1px solid #4E7A46; border-radius: 4px; color: #4E7A46;
}
.crew-add:hover { background: #DCE9D6; }
.crew-add:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 640px) {
    .crewtable { font-size: .85em; }
    .crewtable th, .crewtable td { padding: 6px 4px; }
    .crew-email { font-size: .8em; }
}

/* ---------- misc components ---------- */
.feebar {
    margin-top: 22px; padding: 12px 16px;
    background: #EFE9DC; border-left: 4px solid #8A6D3B; border-radius: 4px;
    font-size: 1.1em;
}
.waiverline { margin-top: 16px; padding: 6px 8px; border-radius: 5px; }
/* Added 2026-09-12 per Bob (Marda Phelps/Maverick case): submitting without
   checking the waiver used to fail with only a text line below the button -
   easy to miss since the checkbox itself looked no different. Same visual
   language as input.field-error, applied to the whole line since the
   checkbox control itself is too small to be a noticeable target. */
.waiverline.field-error {
    border: 1px solid #A8552E; background: #FBF0E9;
}
.daycard {
    border: 1px solid #D8CFBB; border-radius: 8px;
    background: #FFFFFF; padding: 16px 18px; margin-top: 12px;
}
.daycard .time-big { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.4em; }
.hw-input { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }

/* ---------- halfway position photos ---------- */
.photogrid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.photothumb { position: relative; width: 84px; height: 84px; }
.photothumb img {
    width: 84px; height: 84px; object-fit: cover;
    border: 1px solid #D8CFBB; border-radius: 6px; display: block;
}
.photo-remove {
    position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px; line-height: 20px; text-align: center;
    border-radius: 50%; border: 1px solid #A8552E; background: #FBF9F3;
    color: #A8552E; font-size: 1em; cursor: pointer; padding: 0;
}
.photo-remove:hover { background: #F5E3D8; }
.photo-add-btn { display: inline-block; margin-top: 10px; cursor: pointer; }
.photo-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.photo-upload-status { margin-top: 6px; min-height: 1.2em; }

/* ---------- modal ---------- */
.modal {
    position: fixed; inset: 0; background: rgba(43, 40, 33, .55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    z-index: 50;
}
.modal[hidden] { display: none; }
.modal-box {
    background: #FBF9F3; border-radius: 8px;
    max-width: 720px; max-height: 86vh; overflow-y: auto;
    padding: 24px 28px;
}

/* ---------- Notice of Race tab ---------- */
.nor-frame {
    display: block;
    width: 100%;
    height: 75vh;
    min-height: 420px;
    max-height: 900px;
    margin-top: 10px;
    border: 1px solid #D8CFBB;
    border-radius: 8px;
    background: #FFFFFF;
}
.nor-print-note { display: none; }
@media print {
    .nor-frame { display: none; }
    .nor-print-note {
        display: block; margin-top: 14px; padding: 10px 14px;
        border: 1px solid #A8552E; border-radius: 6px; color: #7C3818;
    }
}