/* ============================================================
   SessionSubmission -- app-owned styles.
   First app-owned stylesheet for this app (created 2026-05-20).

   Unified button treatment. The shared meeting CSS styles
   a.button and input buttons with mismatched padding / font-size
   / min-width (input buttons carry min-width:200px and a smaller
   font; anchor buttons carry neither), so an <a> button and an
   <input> button render at different sizes when placed side by
   side. These rules override both to one consistent, smaller
   button. Scoped under .content so they win over the meeting CSS
   regardless of stylesheet load order.
   ============================================================ */
.content a.button,
.content a.button:visited,
.content input.button,
.content input[type="submit"],
.content input[type="reset"] {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    /* absolute size, not em -- buttons sit in varied contexts (h4
       headings, p blocks); em would render them at different sizes. */
    font-size: 13px;
    min-width: 0;
    padding: 7px 18px;
    border: none;
    border-radius: 5px;
    background: #22a5d8;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4;
    cursor: pointer;
}
.content a.button:hover,
.content a.button:active,
.content input.button:hover,
.content input[type="submit"]:hover,
.content input[type="reset"]:hover {
    background: #26b9e4;
    color: #ececec;
    text-decoration: none;
}

/* Disabled action buttons look disabled (step-gate pattern -- prefer
   disabling Next over reporting a form-level error). */
.content a.button:disabled,
.content input.button:disabled,
.content input[type="submit"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ============================================================
   Soft Glow validation -- installed by skill 2026-05-20.
   Fixed accent (JSM teal #4d9faa); error rose #b24a56.
   See ~/.claude/skills/soft-glow/REFERENCE.md for design rationale.
   ============================================================ */

/* Force every form control to inherit the page font instead of falling
   through to the user-agent default (Arial on Windows). Without this,
   radios, checkboxes, and unstyled buttons render in Arial because the
   explicit Soft Glow rules below only enumerate text-like input types. */
form input,
form select,
form textarea,
form button {
    font-family: inherit;
}

/* Required-field labels are bold and inherit the page text color.
   .required / .Required / .RequiredField are legacy framework classes
   often painted red elsewhere; inside forms we normalize them to the
   same treatment as .required-label so the app is visually consistent. */
form label.question,
form .required-label,
form .required,
form .Required,
form .RequiredField {
    font-weight: bold;
    color: inherit;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="number"],
form input[type="password"],
form input[type="search"],
form input:not([type]),
form select,
form textarea {
    padding: 9px 11px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    color: #1c2026;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form input[type="url"]:focus,
form input[type="number"]:focus,
form input[type="password"]:focus,
form input[type="search"]:focus,
form input:not([type]):focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--sg-accent, #4d9faa);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-accent, #4d9faa) 18%, transparent);
}

/* Error state must beat the :focus rule above. `.has-error input:focus`
   has specificity (0,0,2,2), which outranks `input[type="text"]:focus`
   at (0,0,2,1) -- so a focused invalid field paints rose, not the accent. */
form .has-error input,
form .has-error input:focus,
form .has-error select,
form .has-error select:focus,
form .has-error textarea,
form .has-error textarea:focus {
    border-color: #b24a56;
    box-shadow: 0 0 0 3px rgba(178, 74, 86, 0.14);
}

form .required-note { display: none; }

form .field-error {
    display: block;
    margin: 4px 0 0;
    color: #b24a56;
    font-size: 12px;
    font-style: italic;
    line-height: 1.3;
}

/* Optional: section heading used to split long single-column forms
   into scannable groups. Harmless if unused. */
form .reg-section {
    font-size: 13px;
    font-weight: 600;
    color: var(--sg-accent, #4d9faa);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 28px 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
form .reg-section:first-of-type { margin-top: 8px; }

/* App-specific: form controls inside a grid .row fill their column
   (capped so they don't sprawl on wide viewports). flexboxgrid columns
   are block-level but inputs/selects do not auto-fill. */
.content form .row input[type="text"],
.content form .row input[type="email"],
.content form .row input[type="tel"],
.content form .row input[type="url"],
.content form .row input[type="password"],
.content form .row select,
.content form .row textarea {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
}
/* The <p> wrapper around each input exists only so the validator can
   place its .field-error after it -- zero its default browser margins
   (~1em top + bottom) so it contributes no vertical space. */
.content form .row p {
    margin: 0;
}
/* Modest, single gap between stacked field rows. */
.content form .row {
    margin-bottom: 6px;
}