/* NEMCC Technology Support — approved compact visual design */
.ts-shell{max-width:980px;margin:24px auto;padding:22px 20px;border:1px solid #e2e2e2;border-radius:20px;background:#fff;color:#171717;font:14px/1.45 Arial,Helvetica,sans-serif;box-sizing:border-box}
.ts-shell *{box-sizing:border-box}.ts-hero{margin-bottom:20px}.ts-eyebrow{font-size:11px;font-weight:700;letter-spacing:.025em;color:#666}.ts-hero h1{font-size:26px;line-height:1.2;margin:5px 0}.ts-hero p{color:#666;margin:3px 0 0;font-size:15px}.ts-shell h2{font-size:17px;font-weight:700;margin:19px 0 10px}.ts-shell h3{font-size:15px;margin:24px 0 10px;font-weight:700}.ts-hint{font-size:13px;color:#555;margin:-4px 0 12px}.ts-grid{display:grid;gap:10px}.ts-audiences{grid-template-columns:repeat(3,minmax(0,1fr))}.ts-topics{grid-template-columns:repeat(3,minmax(0,1fr))}.ts-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-choice{border:1px solid #ddd;border-radius:13px;background:white;min-height:83px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:13px;font-weight:600;color:#161616;padding:10px}.ts-choice .ts-icon{color:#c4a84d;font-size:21px;line-height:1}.ts-choice:hover,.ts-choice:focus-visible{border-color:#bba04a}.ts-choice.selected{border:2px solid #cbb677;background:#f7f6f0}.ts-content{padding-top:3px}.ts-form{margin-top:5px}.ts-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ts-field{margin:0 0 12px}.ts-field label{display:block;font-size:13px;font-weight:500;margin:0 0 5px}.ts-field input,.ts-field select,.ts-field textarea{display:block;width:100%;font:14px Arial,Helvetica,sans-serif;border:1px solid #c9c9c9;border-radius:7px;padding:10px 11px;background:white;color:#161616;min-height:39px}.ts-field textarea{min-height:100px;resize:vertical}.ts-small{color:#777;font-size:12px}.ts-required{color:#a12b2b}.ts-radio-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}.ts-radio-row label{display:flex;align-items:center;gap:5px;border:1px solid #ddd;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:400;cursor:pointer}.ts-radio-row input{accent-color:#b99b3e}.ts-submit{background:#171717;color:white;border:0;border-radius:8px;padding:11px 18px;font-weight:600;cursor:pointer}.ts-submit:disabled{opacity:.5}.ts-message{padding:12px;border-radius:7px;margin:12px 0;background:#f6f2e5}.ts-info{background:#f9f8f4;border:1px solid #e6e1d0;border-radius:9px;padding:14px;margin-top:15px}.ts-info p{margin:6px 0}.ts-chart-row{display:grid;grid-template-columns:180px 1fr 32px;gap:10px;align-items:center;margin:8px 0;font-size:13px}.ts-bar{height:14px;background:#f3f3f3;border-radius:5px;overflow:hidden}.ts-bar>span{display:block;height:100%;background:#cbb677}.ts-public-stats{border-top:1px solid #eee;margin-top:30px;padding-top:5px}.ts-public-stats button{background:none;border:0;text-align:left;cursor:pointer;color:#171717;font:inherit;padding:0}.ts-public-stats button:hover{text-decoration:underline}.ts-shell .legacy-student{max-width:none;margin:0;padding:0;border:0}.ts-shell .legacy-student .support-hero,.ts-shell .legacy-student .support-panel:first-of-type{display:none!important}.ts-shell .legacy-student .support-heading .support-step{display:none}.ts-shell .legacy-student .support-panel{border:0;box-shadow:none;padding:0}.ts-shell .legacy-student .support-heading{margin-top:18px}.ts-shell .legacy-student .support-heading h3{font-size:15px}.ts-shell .legacy-student .support-resolution{font-size:13px}.ts-shell .legacy-student .support-choice-grid{display:none!important}
@media(max-width:680px){.ts-shell{padding:15px 12px;border-radius:10px}.ts-topics{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-audiences{gap:6px}.ts-choice{font-size:12px;min-height:77px}.ts-row{grid-template-columns:1fr;gap:0}.ts-chart-row{grid-template-columns:115px 1fr 24px}}

.ts-shell .legacy-student select.support-resolution{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.ts-resolution-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.ts-resolution-button{font:13px Arial,sans-serif;border:1px solid #ccc;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}.ts-resolution-button.selected{background:#f7f6f0;border:2px solid #cbb677}.ts-resolution-button:disabled{opacity:.5}

/* Version 4 layout adjustments */

/* Full-width page and form */
.ts-page {
    width: 100%;
    max-width: none;
    margin: 0;
    font-family: proxima-nova, sans-serif;
}

.ts-page .ts-shell {
    width: 100%;
    max-width: none;
    margin: 24px 0;
}

/* Main page heading outside the form */
.ts-page > .ts-hero {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 26px;
    margin-bottom: 28px;
}

.ts-page > .ts-hero .ts-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 8px;
}

.ts-page > .ts-hero h1 {
    font-family: proxima-nova, sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: -1.2px;
    margin: 0 0 40px;
}

/* Gold accent only beneath Technology Support */
.ts-page > .ts-hero h1::after {
    content: "";
    display: block;
    width: 65px;
    height: 4px;
    background: #CBB677;
    margin-top: 14px;
}

.ts-page > .ts-hero p {
    font-size: 16px;
    line-height: 1.65;
    color: #444;
    max-width: 850px;
    margin: 0;
}

/* Remove decorative bars from other headings */
.ts-page .ts-shell h2::before,
.ts-page .ts-shell h2::after,
.ts-page .ts-shell h3::before,
.ts-page .ts-shell h3::after {
    content: none;
    display: none;
}


/* Compact instructions beneath section headings */
.ts-shell h2 + .ts-hint {
    font-size: 12px;
    line-height: 1.4;
    margin: -7px 0 12px;
    color: #666;
}

/* Font Awesome icons for Version 4 selection buttons */
.ts-shell .ts-choice .ts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #CBB677;
    font-size: 22px;
    line-height: 1;
}

.ts-shell .ts-choice .ts-icon i {
    font-size: inherit;
    color: inherit;
}


/* Compact severity selection */
.ts-shell .ts-radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin: 8px 0 20px;
}

.ts-shell .ts-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.ts-shell .ts-radio-row input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 16px;
    accent-color: #CBB677;
}


/* Compact severity selection */
.ts-shell .ts-radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin: 8px 0 20px;
}

.ts-shell .ts-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.ts-shell .ts-radio-row input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 16px;
    accent-color: #CBB677;
}

.ts-hint {
    font-size: 13px !important;
    color: #555;
    margin: -20px 0 12px 5px;
}

/* Technology Support Breadcrumb */
.ts-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    font-size: 14px;
}

.ts-breadcrumb[hidden] {
    display: none !important;
}

.ts-breadcrumb button {
    appearance: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #555;
    font: inherit;
    cursor: pointer;
}

.ts-breadcrumb button:hover {
    color: #000;
    text-decoration: underline;
}

.ts-breadcrumb button[aria-current="page"] {
    color: #B49A4C;
    font-weight: 700;
}

.ts-breadcrumb span {
    color: #999;
    font-size: 17px;
}

/* Tighten Technology Support header spacing */
.ts-hero h1 {
    margin-bottom: 8px !important;
}

.ts-hero h1::after {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.ts-hero p {
    margin-top: 12px !important;
}


/* Refined Technology Support header spacing */
.ts-page > .ts-hero h1 {
    margin: 0 0 16px !important;
}

.ts-page > .ts-hero h1::after {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.ts-page > .ts-hero p {
    margin-top: 0 !important;
}

/* Reduce empty space at top of selection container */
.ts-page .ts-shell {
    padding-top: 12px;
}

.ts-page .ts-shell > h2:first-of-type {
    margin-top: 4px;
}

/* Final compact header spacing */
.ts-page > .ts-hero h1 {
    margin-bottom: 8px !important;
}

.ts-page > .ts-hero h1::after {
    margin-top: 0 !important;
}

.ts-page > .ts-hero {
    margin-bottom: 14px !important;
}

.ts-page .ts-shell {
    margin-top: 12px;
    padding-top: 8px;
}

.ts-page .ts-shell > h2:first-of-type {
    margin-top: 0;
}

/* Remove outer support container border */
.ts-page .ts-shell {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 8px 26px !important;
    margin-top: 12px !important;
}

/* Tighten spacing between breadcrumb and request form */
.ts-page .ts-breadcrumb {
    margin-bottom:20px !important;
}

.ts-page .ts-content {
    padding-top: 0 !important;
}

.ts-page .ts-content h3:first-child {
    margin-top: 8px !important;
}

/* Match NEMCC website typography */
.ts-page,
.ts-page .ts-shell,
.ts-page button,
.ts-page input,
.ts-page select,
.ts-page textarea,
.ts-page label {
    font-family: proxima-nova, sans-serif !important;
}

/* Match NEMCC website heading typography */
.ts-page > .ts-hero h1 {
    font-family: proxima-nova, sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    line-height: 3rem !important;
    text-transform: unset !important;
    letter-spacing: -1.2px !important;
    margin: 0 0 8px !important;
}

/* Match NEMCC website gold accent */
.ts-page > .ts-hero h1::after {
    content: "";
    display: block;
    background: repeating-linear-gradient(
        90deg,
        var(--brand-alt-gold, #CBB677),
        var(--brand-alt-gold, #CBB677) 5px
    );
    width: 50px;
    max-width: 100%;
    height: 5px;
    border-radius: 50px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Match employee confirmation to student confirmation */
.ts-page .ts-message {
    margin-top: 16px;
    padding: 15px 18px;
    border: 1px solid #b9d9c3;
    border-radius: 6px;
    background: #f0f9f2;
    color: #245c38;
    font-size: 16px;
    line-height: 1.5;
}

/* Standardize employee confirmation typography */
.ts-page .ts-message {
    font-family: proxima-nova, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.ts-page .ts-message h3 {
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 0 0 8px !important;
}

.ts-page .ts-message p {
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
}

.ts-page .ts-message strong {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.ts-audiences.ts-employee-hidden {
    display: none !important;
}

/* Navigation between student and employee support portals */
.ts-portal-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 22px;
    padding: 13px 16px;
    background: #f7f7f7;
    border-left: 4px solid #cbb677;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 1.5;
}

.ts-portal-switch a {
    color: #80600b;
    font-weight: 700;
    text-decoration: none;
}

.ts-portal-switch a:hover,
.ts-portal-switch a:focus {
    text-decoration: underline;
}

/* Employee screenshot upload */
.ts-shell .ts-field input[type="file"] {
    padding: 9px 11px;
    height: auto;
}

.ts-shell .ts-field input[type="file"] + .ts-hint {
    margin: 6px 0 0 0 !important;
    font-size: 12px !important;
    color: #666;
    line-height: 1.4;
}


/* Priority radio buttons - clean gold center */
.ts-shell .ts-radio-row input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 1.5px solid #777;
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    outline: none;
    position: relative;
    cursor: pointer;
}

.ts-shell .ts-radio-row input[type="radio"]:checked {
    border-color: #555;
    background: #fff;
    box-shadow: none;
}

.ts-shell .ts-radio-row input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #CBB677;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ts-shell .ts-radio-row input[type="radio"]:focus-visible {
    outline: 2px solid #555;
    outline-offset: 3px;
}


/* Responsive support portal navigation */
.ts-shell .ts-portal-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0;
}

.ts-shell .ts-portal-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ts-shell .ts-portal-link + .ts-portal-link {
    border-left: 1px solid #ccc;
    padding-left: 24px;
    margin-left: 12px;
}

.ts-shell .ts-portal-link a {
    color: #80600b;
    font-weight: 700;
    text-decoration: none;
}

.ts-shell .ts-portal-link a:hover,
.ts-shell .ts-portal-link a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .ts-shell .ts-portal-switch {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ts-shell .ts-portal-link + .ts-portal-link {
        border-left: none;
        border-top: 1px solid #ddd;
        padding-left: 0;
        padding-top: 12px;
        margin-left: 0;
    }
}