/* PSA Advertising Sponsorships — public pages.
   Standalone rather than an extension of style.css: this section is on the open
   internet, and a change made for a staff screen should not be able to alter what an
   applicant sees mid-application. */

:root {
    --coa-blue:  #0f4b99;
    --coa-dark:  #0d3a70;
    --ink:       #2b2b2b;
    --ink-2:     #555;
    --ink-3:     #777;
    --rule:      #ddd;
    --rule-soft: #ececec;
    --bg:        #f4f5f7;
    --card:      #fff;
    --good:      #1c7c47;
    --warn:      #8a5a00;
    --bad:       #a32020;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- header ---------------------------------------------------------- */

.psa-header { background: var(--coa-blue); }
.psa-header-in {
    max-width: 1060px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.psa-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.psa-brand img { height: 34px; width: auto; display: block; background: #fff;
    padding: 4px 8px; border-radius: 4px; }
.psa-brand span { color: #fff; font-weight: 700; font-size: 17px; }
.psa-who { color: #cfe0f5; font-size: 13px; display: flex; align-items: center; gap: 14px; }
.psa-who a { color: #fff; text-decoration: none; border-bottom: 1px solid #ffffff66; }
.psa-who a:hover { border-bottom-color: #fff; }

/* ---- shell ----------------------------------------------------------- */

.psa-main { max-width: 1060px; margin: 0 auto; padding: 26px 20px 50px; }
.psa-main.is-narrow { max-width: 460px; }

.psa-footer {
    max-width: 1060px; margin: 0 auto; padding: 0 20px 40px;
    color: var(--ink-3); font-size: 13px;
}
.psa-footer p { margin: 4px 0; }
.psa-footer a { color: var(--coa-blue); }
.psa-fine { font-size: 12px; }

h1 { font-size: 25px; line-height: 1.25; margin: 0 0 6px; color: var(--coa-dark); }
h2 { font-size: 19px; margin: 0 0 4px; color: var(--coa-dark); }
.psa-sub { color: var(--ink-2); margin: 0 0 22px; }

.psa-welcome {
    background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
    padding: 18px 20px; margin-bottom: 22px;
}
.psa-welcome p { margin: 0 0 10px; }
.psa-welcome p:last-child { margin-bottom: 0; }
.psa-sig { font-weight: 700; color: var(--coa-dark); }

/* ---- cards ----------------------------------------------------------- */

.psa-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
    padding: 20px; margin-bottom: 18px;
}
.psa-card > h2 { margin-bottom: 2px; }
.psa-card-intro { color: var(--ink-2); font-size: 14px; margin: 0 0 16px; }

/* ---- notes ----------------------------------------------------------- */

.psa-note {
    border: 1px solid var(--rule); border-left-width: 4px; border-radius: 4px;
    padding: 12px 14px; margin-bottom: 18px; background: var(--card); font-size: 14px;
}
.psa-note.is-good  { border-left-color: var(--good); }
.psa-note.is-warn  { border-left-color: var(--warn); }
.psa-note.is-error { border-left-color: var(--bad); }
.psa-note.is-info  { border-left-color: var(--coa-blue); }
.psa-note p:first-child { margin-top: 0; }
.psa-note p:last-child  { margin-bottom: 0; }

/* ---- forms ----------------------------------------------------------- */

.psa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
.psa-grid.is-thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.psa-field.is-wide { grid-column: 1 / -1; }

.psa-field { display: flex; flex-direction: column; min-width: 0; }
.psa-field label { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.psa-req { color: var(--bad); margin-left: 2px; }
/* Hints sit BELOW their control, not above it. Above, a field with a hint pushed its
   input down while the field beside it had none, and the two boxes never lined up —
   worse once an error message appeared under one of them and made it taller still.
   Below, every input follows its label directly and they align on their own. */
.psa-help { color: var(--ink-3); font-size: 12.5px; margin: 5px 0 0; }

.psa-field input[type="text"],
.psa-field input[type="email"],
.psa-field input[type="tel"],
.psa-field input[type="password"],
.psa-field input[type="date"],
.psa-field input[type="file"],
.psa-field textarea {
    font: inherit; color: inherit;
    padding: 9px 10px; border: 1px solid #c4c4c4; border-radius: 4px; background: #fff;
    width: 100%; max-width: 100%;
}
.psa-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.psa-field input:focus, .psa-field textarea:focus {
    outline: 2px solid var(--coa-blue); outline-offset: -1px; border-color: var(--coa-blue);
}
.psa-field.has-error input, .psa-field.has-error textarea { border-color: var(--bad); }
.psa-error { color: var(--bad); font-size: 12.5px; margin: 5px 0 0; }

/* A box holding something that will not save. Colour alone would say nothing to anyone
   who cannot see it, so the message in .psa-error carries the meaning and this only
   points at which box it belongs to. */
.psa-field input.is-invalid,
.psa-field textarea.is-invalid {
    border-color: var(--bad);
    background: #fffafa;
}

/* Money and percent inputs carry their symbol in the box rather than in the label, so
   nobody has to guess whether to type it. */
/* The selectors below repeat .psa-field and name the attribute on purpose. The general
   rule above is `.psa-field input[type="text"]` with a `padding` shorthand, which
   outranks a bare `.psa-affix input` — so the room being made for the symbol was
   silently discarded and whatever was typed landed on top of it. */
.psa-affix { position: relative; display: block; }
.psa-field .psa-affix input[type="text"] { padding-left: 24px; }
.psa-affix::before {
    content: "$"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); font-size: 14px; pointer-events: none;
}
.psa-field .psa-affix.is-percent input[type="text"] { padding-left: 10px; padding-right: 26px; }
.psa-affix.is-percent::before { content: ""; }
.psa-affix.is-percent::after {
    content: "%"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); font-size: 14px; pointer-events: none;
}

/* ---- buttons --------------------------------------------------------- */

.psa-btn {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 10px 20px; border-radius: 4px; border: 1px solid var(--coa-blue);
    background: var(--coa-blue); color: #fff; text-decoration: none; display: inline-block;
}
.psa-btn:hover { background: var(--coa-dark); border-color: var(--coa-dark); }
.psa-btn[disabled] { opacity: .5; cursor: not-allowed; }
.psa-btn.is-ghost { background: #fff; color: var(--coa-blue); }
.psa-btn.is-ghost:hover { background: #f0f5fc; }
.psa-btn.is-quiet { background: #fff; color: var(--ink-2); border-color: #c4c4c4; }
.psa-btn.is-quiet:hover { background: #f4f4f4; }
.psa-btn.is-danger { background: #fff; color: var(--bad); border-color: #d9b0b0; }
.psa-btn.is-danger:hover { background: #fdf3f3; }
.psa-btn.is-small { padding: 6px 13px; font-size: 13px; }

.psa-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* ---- status pills ----------------------------------------------------- */

.psa-pill {
    display: inline-block; padding: 3px 10px; border-radius: 11px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.psa-pill.is-draft     { background: #f0f0f0; color: #5a5a5a; border-color: #ddd; }
.psa-pill.is-ready     { background: #e8f1fb; color: #14508f; border-color: #c3dbf5; }
.psa-pill.is-submitted { background: #fff6dd; color: #7a5800; border-color: #ecd9a2; }
.psa-pill.is-approved  { background: #e6f4ec; color: #14622f; border-color: #b6ddc5; }
.psa-pill.is-declined  { background: #fbecec; color: #8f2020; border-color: #e3bcbc; }

/* ---- tables ----------------------------------------------------------- */

.psa-table-wrap { overflow-x: auto; }
.psa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.psa-table th, .psa-table td {
    text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}
.psa-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); border-bottom-color: var(--rule); }
.psa-table tr:last-child td { border-bottom: 0; }
.psa-table a { color: var(--coa-blue); font-weight: 600; }

.psa-empty { color: var(--ink-3); padding: 18px 0; margin: 0; }

/* ---- repeating rows (events, files) ----------------------------------- */

.psa-row {
    border: 1px solid var(--rule); border-radius: 5px; padding: 16px;
    margin-bottom: 12px; background: #fcfcfd;
}
.psa-row-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 12px;
}
.psa-row-head h3 { margin: 0; font-size: 14px; color: var(--ink-2);
    text-transform: uppercase; letter-spacing: .05em; }

/* ---- save indicator ---------------------------------------------------- */

.psa-savebar {
    position: sticky; bottom: 0; z-index: 5;
    background: #fff; border-top: 1px solid var(--rule);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 0 -20px -50px; display: flex; align-items: center;
    justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.psa-saved { font-size: 13px; color: var(--ink-3); }
.psa-saved.is-saving { color: var(--warn); }
.psa-saved.is-error  { color: var(--bad); font-weight: 600; }

/* ---- checklist --------------------------------------------------------- */

.psa-checklist { margin: 10px 0 0; padding-left: 20px; }
.psa-checklist li { margin-bottom: 4px; }

.psa-terms { margin: 0 0 14px; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.psa-terms li { margin-bottom: 8px; }

.psa-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.psa-agree input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }

/* ---- read-only answers -------------------------------------------------- */

.psa-answers { margin: 0; }
.psa-answer { padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.psa-answer:last-child { border-bottom: 0; }
.psa-answer dt { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.psa-answer dd { margin: 0; color: var(--ink-2); white-space: pre-wrap; }
.psa-answer dd.is-blank { color: var(--ink-3); font-style: italic; }

@media (max-width: 720px) {
    .psa-grid, .psa-grid.is-thirds { grid-template-columns: 1fr; }
    .psa-brand span { font-size: 15px; }
    h1 { font-size: 21px; }
}

/* Column headers that exist for a screen reader but would be noise on screen —
   the actions column, and the duplicate label on a bar chart's value cell. */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The description on a file's row, edited after the upload because choosing a file now
   sends it immediately.
   This was borderless and transparent to begin with — "quiet until you touch it" — and
   read as plain text, so Dave could not tell it was editable at all. Looking like a box
   you can type in was the only job the styling had. It matches the other fields now. */
.psa-filedesc {
    font: inherit; font-size: 13.5px; color: inherit;
    width: 100%; min-width: 150px; padding: 7px 9px;
    border: 1px solid #c4c4c4; border-radius: 4px; background: #fff;
}
.psa-filedesc:focus {
    outline: 2px solid var(--coa-blue); outline-offset: -1px; border-color: var(--coa-blue);
}
.psa-filedesc::placeholder { color: #999; }

/* Landing from an upload redirect. Without this the Documents heading sits flush
   against the top edge of the window, which reads as the page having been cut off rather
   than scrolled to.
   No scroll-behavior: smooth. This arrives as a fresh page load, so a jump is what anyone
   expects, and animating it would make where you end up depend on the render loop keeping
   up. */
#documents { scroll-margin-top: 18px; }