:root {

    --navy: #071b2b;

    --navy-light: #123a53;

    --teal: #009ca6;

    --surface: #f4f7f9;

    --white: #ffffff;

    --text: #1d2a33;

    --muted: #6b7a86;

    --border: #dbe4e9;

    --danger-soft: #fde5e5;

    --danger: #982f2f;

    --success-soft: #dff5e9;

    --success: #176b48;

}



* {

    box-sizing: border-box;

}



body {

    min-height: 100vh;

    margin: 0;



    font-family:

        Inter,

        system-ui,

        -apple-system,

        "Segoe UI",

        sans-serif;



    color: var(--text);



    background:

        radial-gradient(

            circle at top right,

            rgba(0, 156, 166, 0.18),

            transparent 32%

        ),

        linear-gradient(

            145deg,

            var(--navy),

            var(--navy-light)

        );

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

select {

    font: inherit;

}



.resident-auth-page {

    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 30px;

}



.resident-auth-panel {

    width: min(100%, 920px);

    padding: 38px;



    border-radius: 26px;



    background: var(--white);



    box-shadow:

        0 30px 80px

        rgba(0, 0, 0, 0.28);

}



.resident-auth-brand {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 30px;

}



.resident-auth-brand > span {

    width: 48px;

    height: 48px;



    display: grid;

    place-items: center;



    border-radius: 14px;



    color: var(--white);

    font-weight: 900;



    background: var(--teal);

}



.resident-auth-brand strong,

.resident-auth-brand small {

    display: block;

}



.resident-auth-brand strong {

    color: var(--navy);

    letter-spacing: 0.05em;

}



.resident-auth-brand small {

    margin-top: 3px;

    color: var(--muted);

}



.resident-auth-heading h1,

.resident-success-card h1 {

    margin: 0;

    color: var(--navy);

    font-size: clamp(2rem, 5vw, 3rem);

}



.resident-auth-heading p,

.resident-success-card p {

    margin: 10px 0 28px;

    color: var(--muted);

    line-height: 1.65;

}



.resident-form-alert {

    margin-bottom: 22px;

    padding: 14px 16px;

    border-radius: 12px;

    color: var(--danger);

    background: var(--danger-soft);

}



.resident-form-grid {

    display: grid;

    grid-template-columns:

        repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.resident-form-field label {

    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-size: 0.85rem;

    font-weight: 800;

}



.resident-form-field input,

.resident-form-field select {

    width: 100%;

    min-height: 48px;

    padding: 0 14px;



    border: 1px solid var(--border);

    border-radius: 11px;



    color: var(--text);

    background: var(--white);



    outline: none;

}



.resident-form-field input:focus,

.resident-form-field select:focus {

    border-color: var(--teal);



    box-shadow:

        0 0 0 4px

        rgba(0, 156, 166, 0.12);

}



.resident-form-error {

    display: block;

    margin-top: 6px;

    color: var(--danger);

    font-size: 0.76rem;

}



.resident-submit-button {

    width: 100%;

    min-height: 52px;

    margin-top: 24px;



    border: 0;

    border-radius: 12px;



    color: var(--white);

    font-weight: 850;

    cursor: pointer;



    background: var(--navy);

}



.resident-submit-button:hover {

    background: var(--navy-light);

}



.resident-auth-footer {

    margin: 24px 0 0;

    color: var(--muted);

    text-align: center;

}



.resident-auth-footer a {

    color: var(--teal);

    font-weight: 850;

}



.resident-success-card {

    padding: 30px;

    border-radius: 18px;

    text-align: center;

    background: var(--success-soft);

}



.resident-success-icon {

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    margin: 0 auto 18px;

    border-radius: 50%;

    color: var(--white);

    font-size: 1.4rem;

    font-weight: 900;

    background: var(--success);

}



.resident-success-card a {

    display: inline-flex;

    padding: 12px 18px;

    border-radius: 11px;

    color: var(--white);

    font-weight: 850;

    background: var(--navy);

}



@media (max-width: 700px) {

    .resident-auth-page {

        padding: 16px;

    }



    .resident-auth-panel {

        padding: 24px;

    }



    .resident-form-grid {

        grid-template-columns: 1fr;

    }



    .resident-form-grid > div[aria-hidden="true"] {

        display: none;

    }

}



/* ------------------------------------------------------------

   Resident login and dashboard

------------------------------------------------------------ */



.resident-login-panel {

    width: min(100%, 470px);

}



.resident-login-password {

    margin-top: 18px;

}



.resident-portal-body {

    min-height: 100vh;

    background: var(--surface);

}



.resident-portal-header {

    color: var(--white);

    background: var(--navy);

}



.resident-portal-header-inner {

    width: min(1180px, calc(100% - 32px));

    min-height: 76px;



    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;



    margin-inline: auto;

}



.resident-portal-logo {

    display: flex;

    align-items: center;

    gap: 12px;

}



.resident-portal-logo > span {

    width: 42px;

    height: 42px;



    display: grid;

    place-items: center;



    border-radius: 13px;



    color: var(--white);

    font-weight: 900;



    background: var(--teal);

}



.resident-portal-logo strong,

.resident-portal-logo small {

    display: block;

}



.resident-portal-logo small {

    margin-top: 2px;

    color: #9eb5c2;

}



.resident-portal-user {

    display: flex;

    align-items: center;

    gap: 18px;

}



.resident-portal-user strong,

.resident-portal-user span {

    display: block;

    text-align: right;

}



.resident-portal-user span {

    margin-top: 2px;

    color: #9eb5c2;

    font-size: 0.76rem;

}



.resident-portal-user a {

    padding: 9px 13px;

    border-radius: 10px;

    color: var(--navy);

    font-weight: 850;

    background: var(--white);

}



.resident-portal-content {

    width: min(1180px, calc(100% - 32px));

    margin-inline: auto;

    padding-block: 40px;

}



.resident-welcome-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;



    padding: 32px;



    border: 1px solid var(--border);

    border-radius: 22px;



    background: var(--white);



    box-shadow:

        0 14px 34px

        rgba(7, 27, 43, 0.08);

}



.resident-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--teal);

    font-size: 0.78rem;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.resident-welcome-card h1 {

    margin: 0;

    color: var(--navy);

    font-size: clamp(2rem, 5vw, 3.2rem);

}



.resident-welcome-card p {

    margin: 10px 0 0;

    color: var(--muted);

    line-height: 1.6;

}



.resident-account-summary {

    min-width: 180px;

    padding: 20px;

    border-radius: 16px;

    background: var(--surface);

}



.resident-account-summary span,

.resident-account-summary strong {

    display: block;

}



.resident-account-summary span {

    color: var(--muted);

    font-size: 0.76rem;

    font-weight: 800;

    text-transform: uppercase;

}



.resident-account-summary strong {

    margin-top: 8px;

    color: var(--navy);

}



.resident-portal-grid {

    display: grid;

    grid-template-columns:

        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 20px;

}



.resident-portal-card {

    display: flex;

    align-items: flex-start;

    gap: 18px;



    padding: 24px;



    border: 1px solid var(--border);

    border-radius: 18px;



    background: var(--white);



    box-shadow:

        0 10px 26px

        rgba(7, 27, 43, 0.06);

}



.resident-portal-card:hover {

    transform: translateY(-2px);

}



.resident-primary-card {

    color: var(--white);



    background:

        linear-gradient(

            135deg,

            var(--navy),

            var(--navy-light)

        );

}



.resident-card-icon {

    width: 44px;

    height: 44px;



    display: grid;

    place-items: center;

    flex: 0 0 auto;



    border-radius: 13px;



    color: var(--white);

    font-weight: 900;



    background: var(--teal);

}



.resident-portal-card h2 {

    margin: 0;

    font-size: 1.1rem;

}



.resident-portal-card p {

    margin: 8px 0 0;

    color: var(--muted);

    line-height: 1.5;

}



.resident-primary-card p {

    color: #cbd8df;

}



@media (max-width: 720px) {

    .resident-portal-header-inner {

        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        padding-block: 18px;

    }



    .resident-portal-user {

        width: 100%;

        justify-content: space-between;

    }



    .resident-portal-user strong,

    .resident-portal-user span {

        text-align: left;

    }



    .resident-welcome-card {

        align-items: flex-start;

        flex-direction: column;

    }



    .resident-account-summary {

        width: 100%;

    }



    .resident-portal-grid {

        grid-template-columns: 1fr;

    }

}



/* ------------------------------------------------------------

   Resident issue report

------------------------------------------------------------ */



.resident-back-link {

    padding: 9px 13px;

    border-radius: 10px;

    color: var(--navy);

    font-weight: 850;

    background: var(--white);

}



.resident-report-heading {

    margin-bottom: 24px;

}



.resident-report-heading h1 {

    margin: 0;

    color: var(--navy);

    font-size: clamp(2rem, 5vw, 3rem);

}



.resident-report-heading p {

    max-width: 720px;

    margin: 10px 0 0;

    color: var(--muted);

    line-height: 1.65;

}



.resident-report-form {

    display: grid;

    gap: 18px;

}



.resident-report-card {

    padding: 26px;

    border: 1px solid var(--border);

    border-radius: 20px;

    background: var(--white);

    box-shadow:

        0 12px 30px

        rgba(7, 27, 43, 0.07);

}



.resident-report-section-heading {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 22px;

}



.resident-report-section-heading > span {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 10px;

    color: var(--white);

    font-weight: 900;

    background: var(--teal);

}



.resident-report-section-heading h2 {

    margin: 0;

    color: var(--navy);

    font-size: 1.1rem;

}



.resident-report-section-heading p {

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.5;

}



.resident-form-span {

    grid-column: 1 / -1;

}



.resident-form-field textarea {

    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--border);

    border-radius: 11px;

    color: var(--text);

    background: var(--white);

    resize: vertical;

    outline: none;

}



.resident-form-field textarea:focus {

    border-color: var(--teal);

    box-shadow:

        0 0 0 4px

        rgba(0, 156, 166, 0.12);

}



.resident-danger-field {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 16px;

    border: 1px solid #f0d7a3;

    border-radius: 13px;

    background: #fff8e8;

}



.resident-danger-field input {

    margin-top: 4px;

}



.resident-danger-field strong,

.resident-danger-field small {

    display: block;

}



.resident-danger-field strong {

    color: #7e5200;

}



.resident-danger-field small {

    margin-top: 5px;

    color: #8b6b2a;

    line-height: 1.45;

}



.report-success-card {

    width: min(100%, 720px);

    margin-inline: auto;

}



.submission-result-reference {

    margin: 24px 0;

    padding: 18px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.7);

}



.submission-result-reference span,

.submission-result-reference strong {

    display: block;

}



.submission-result-reference span {

    color: var(--muted);

    font-size: 0.75rem;

    font-weight: 850;

    text-transform: uppercase;

}



.submission-result-reference strong {

    margin-top: 7px;

    color: var(--navy);

    font-size: 1.3rem;

}



.report-success-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

}



.report-success-actions a {

    display: inline-flex;

    padding: 11px 16px;

    border-radius: 11px;

    color: var(--white);

    font-weight: 850;

    background: var(--navy);

}



@media (max-width: 700px) {

    .resident-report-card {

        padding: 20px;

    }



    .resident-back-link {

        width: 100%;

        text-align: center;

    }

}



/* ------------------------------------------------------------

   Automatic geolocation

------------------------------------------------------------ */



.resident-location-panel {

    padding: 20px;



    border: 1px solid var(--border);

    border-radius: 16px;



    background: #f8fbfc;

}



.resident-location-copy {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}



.resident-location-icon {

    width: 42px;

    height: 42px;



    display: grid;

    place-items: center;

    flex: 0 0 auto;



    border-radius: 13px;



    color: var(--white);



    font-size: 1.2rem;

    font-weight: 900;



    background: var(--teal);

}



.resident-location-copy strong {

    display: block;



    color: var(--navy);



    font-size: 0.95rem;

}



.resident-location-copy p {

    max-width: 650px;



    margin: 6px 0 0;



    color: var(--muted);



    font-size: 0.84rem;

    line-height: 1.5;

}



.resident-location-button {

    min-height: 46px;



    margin-top: 18px;

    padding: 0 18px;



    border: 0;

    border-radius: 11px;



    color: var(--white);



    font-weight: 850;

    cursor: pointer;



    background: var(--navy);

}



.resident-location-button:hover {

    background: var(--navy-light);

}



.resident-location-button:disabled {

    opacity: 0.65;

    cursor: wait;

}



.resident-location-status {

    margin-top: 14px;

    padding: 12px 14px;



    border-radius: 11px;



    color: var(--muted);



    font-size: 0.82rem;

    line-height: 1.45;



    background: var(--white);

}



.resident-location-status.location-status-loading {

    color: #755300;

    background: #fff4d6;

}



.resident-location-status.location-status-success {

    color: var(--success);

    background: var(--success-soft);

}



.resident-location-status.location-status-error {

    color: var(--danger);

    background: var(--danger-soft);

}



.resident-location-details {

    display: grid;



    grid-template-columns:

        repeat(3, minmax(0, 1fr));



    gap: 10px;

    margin-top: 14px;

}



.resident-location-details[hidden] {

    display: none;

}



.resident-location-details > div {

    padding: 12px;



    border: 1px solid var(--border);

    border-radius: 11px;



    background: var(--white);

}



.resident-location-details span,

.resident-location-details strong {

    display: block;

}



.resident-location-details span {

    color: var(--muted);



    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}



.resident-location-details strong {

    margin-top: 5px;



    color: var(--navy);



    font-size: 0.82rem;

    overflow-wrap: anywhere;

}



.resident-location-clear {

    margin-top: 12px;



    padding: 0;



    border: 0;



    color: var(--danger);



    font-size: 0.8rem;

    font-weight: 800;

    cursor: pointer;



    background: transparent;

}



.resident-location-clear[hidden] {

    display: none;

}



.resident-location-clear:hover {

    text-decoration: underline;

}



@media (max-width: 700px) {

    .resident-location-button {

        width: 100%;

    }



    .resident-location-details {

        grid-template-columns: 1fr;

    }

}



/* ------------------------------------------------------------

   Resident submissions

------------------------------------------------------------ */



.resident-submission-metrics {

    display: grid;

    grid-template-columns:

        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 20px;

}



.resident-submission-metric {

    padding: 20px;

    border: 1px solid var(--border);

    border-radius: 16px;

    background: var(--white);

}



.resident-submission-metric span,

.resident-submission-metric strong {

    display: block;

}



.resident-submission-metric span {

    color: var(--muted);

    font-size: 0.72rem;

    font-weight: 850;

    text-transform: uppercase;

}



.resident-submission-metric strong {

    margin-top: 8px;

    color: var(--navy);

    font-size: 1.8rem;

}



.resident-submission-toolbar {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;

    padding: 18px;

    border: 1px solid var(--border);

    border-radius: 16px;

    background: var(--white);

}



.resident-submission-toolbar label {

    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-size: 0.78rem;

    font-weight: 850;

}



.resident-submission-toolbar select {

    min-width: 260px;

    min-height: 44px;

    padding: 0 12px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--white);

}



.resident-new-submission-button {

    display: inline-flex;

    min-height: 44px;

    align-items: center;

    padding: 0 16px;

    border-radius: 10px;

    color: var(--white);

    font-weight: 850;

    background: var(--navy);

}



.resident-submission-list {

    display: grid;

    gap: 16px;

}



.resident-submission-card {

    padding: 24px;

    border: 1px solid var(--border);

    border-radius: 18px;

    background: var(--white);

    box-shadow:

        0 10px 26px

        rgba(7, 27, 43, 0.06);

}



.resident-submission-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

}



.resident-submission-reference {

    display: block;

    margin-bottom: 7px;

    color: var(--teal);

    font-size: 0.76rem;

    font-weight: 900;

    letter-spacing: 0.05em;

}



.resident-submission-card h2 {

    margin: 0;

    color: var(--navy);

    font-size: 1.15rem;

}



.resident-submission-status {

    display: inline-flex;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 0.72rem;

    font-weight: 850;

    white-space: nowrap;

}



.submission-status-success {

    color: var(--success);

    background: var(--success-soft);

}



.submission-status-pending {

    color: #755300;

    background: #fff4d6;

}



.submission-status-information {

    color: #205f89;

    background: #e4f2fb;

}



.submission-status-danger {

    color: var(--danger);

    background: var(--danger-soft);

}



.submission-status-neutral {

    color: var(--muted);

    background: var(--surface);

}



.resident-submission-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 24px;

    margin-top: 18px;

    color: var(--muted);

    font-size: 0.82rem;

}



.resident-submission-location,

.resident-submission-message {

    margin-top: 18px;

    padding: 14px;

    border-radius: 12px;

    background: var(--surface);

}



.resident-submission-location strong,

.resident-submission-location span {

    display: block;

}



.resident-submission-location strong,

.resident-submission-message strong {

    color: var(--navy);

    font-size: 0.76rem;

}



.resident-submission-location span,

.resident-submission-message p {

    margin: 6px 0 0;

    color: var(--muted);

    line-height: 1.5;

}



.resident-submission-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-top: 20px;

    padding-top: 16px;

    border-top: 1px solid var(--border);

}



.resident-submission-card-footer span {

    color: var(--muted);

    font-size: 0.78rem;

}



.resident-submission-card-footer a {

    color: var(--teal);

    font-size: 0.82rem;

    font-weight: 850;

}



.resident-submission-empty {

    padding: 40px 20px;

    text-align: center;

}



.resident-submission-empty > span {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    margin: 0 auto 16px;

    border-radius: 15px;

    color: var(--white);

    font-size: 1.4rem;

    background: var(--teal);

}



.resident-submission-empty h2 {

    margin: 0;

    color: var(--navy);

}



.resident-submission-empty p {

    margin: 9px 0 20px;

    color: var(--muted);

}



.resident-submission-empty a {

    display: inline-flex;

    padding: 11px 16px;

    border-radius: 10px;

    color: var(--white);

    font-weight: 850;

    background: var(--navy);

}



@media (max-width: 820px) {

    .resident-submission-metrics {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 620px) {

    .resident-submission-metrics {

        grid-template-columns: 1fr;

    }



    .resident-submission-toolbar,

    .resident-submission-card-header,

    .resident-submission-card-footer {

        align-items: stretch;

        flex-direction: column;

    }



    .resident-submission-toolbar select,

    .resident-new-submission-button {

        width: 100%;

    }



    .resident-new-submission-button {

        justify-content: center;

    }



    .resident-submission-status {

        align-self: flex-start;

    }

}



/* ==========================================================

   SMARTLOCAL-AI

   Resident Portal Photo Upload Styles

   Version: 1.0.0

   ========================================================== */



.resident-photo-status{

    padding:12px 16px;

    border:1px solid #d9e2ec;

    border-radius:8px;

    background:#f8fafc;

    color:#334155;

    font-size:.95rem;

}



.resident-photo-preview{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

    gap:16px;

    margin-top:8px;

}



.resident-photo-preview-item{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:1px solid #d9e2ec;

    border-radius:12px;

    background:#fff;

    box-shadow:0 2px 6px rgba(0,0,0,.06);

}



.resident-photo-preview-item img{

    width:100%;

    height:160px;

    object-fit:cover;

    display:block;

}



.resident-photo-preview-details{

    padding:12px;

    display:flex;

    flex-direction:column;

    gap:4px;

}



.resident-photo-preview-details strong{

    font-size:.9rem;

    color:#1e293b;

    word-break:break-word;

}



.resident-photo-preview-details span{

    font-size:.8rem;

    color:#64748b;

}



input[type="file"]{

    width:100%;

    padding:12px;

    border:1px dashed #94a3b8;

    border-radius:10px;

    background:#f8fafc;

    cursor:pointer;

}



input[type="file"]:hover{

    background:#eef6ff;

}



.resident-form-field small{

    display:block;

    margin-top:8px;

    color:#64748b;

    font-size:.85rem;

}



@media (max-width:768px){

    .resident-photo-preview{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }



    .resident-photo-preview-item img{

        height:140px;

    }

}



@media (max-width:480px){

    .resident-photo-preview{

        grid-template-columns:1fr;

    }



    .resident-photo-preview-item img{

        height:220px;

    }

}



/* ==========================================================

   Resident Submission Details Layout

========================================================== */



.resident-submission-layout {

    display: grid;

    grid-template-columns: minmax(0, 2fr) 340px;

    gap: 24px;

    align-items: start;

    margin-top: 24px;

}



.resident-submission-main {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.resident-submission-sidebar {

    display: flex;

    flex-direction: column;

    gap: 20px;

    position: sticky;

    top: 24px;

}



/* ==========================================================

   Submission Status

========================================================== */



.resident-submission-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    padding: 8px 18px;



    border-radius: 999px;



    font-size: .82rem;

    font-weight: 700;



    letter-spacing: .04em;

    text-transform: uppercase;

}



.resident-submission-status-valid {

    background: #d1fae5;

    color: #065f46;

}



.resident-submission-status-pending {

    background: #fef3c7;

    color: #92400e;

}



.resident-submission-status-information {

    background: #dbeafe;

    color: #1e40af;

}



.resident-submission-status-escalated {

    background: #ede9fe;

    color: #5b21b6;

}



.resident-submission-status-closed {

    background: #fee2e2;

    color: #991b1b;

}



.resident-submission-status-neutral {

    background: #e5e7eb;

    color: #374151;

}



/* ==========================================================

   Submission Photos

========================================================== */



.resident-submission-photo-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));

    gap: 18px;

}



.resident-submission-photo-item {

    display: block;



    overflow: hidden;



    background: #ffffff;



    border: 1px solid #e5e7eb;

    border-radius: 14px;



    text-decoration: none;



    transition: .18s ease;

}



.resident-submission-photo-item:hover {

    transform: translateY(-2px);



    box-shadow: 0 8px 18px rgba(0,0,0,.10);

}



.resident-submission-photo-item img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    display: block;

}



.resident-submission-photo-item div {

    padding: 12px;

}



.resident-submission-photo-item strong {

    display: block;

    color: #1f2937;

    font-size: .90rem;

}



.resident-submission-photo-item span {

    display: block;

    margin-top: 4px;

    color: #6b7280;

    font-size: .80rem;

}



/* ==========================================================

   Submission Timeline

========================================================== */



.resident-submission-timeline {

    position: relative;

    margin-left: 14px;

}



.resident-submission-timeline::before {

    content: "";



    position: absolute;



    left: 8px;

    top: 0;

    bottom: 0;



    width: 2px;



    background: #d1d5db;

}



.resident-submission-timeline-item {

    position: relative;



    display: flex;



    gap: 18px;



    margin-bottom: 28px;

}



.resident-submission-timeline-dot {

    width: 18px;

    height: 18px;



    border-radius: 50%;



    background: #0f766e;



    border: 4px solid #ffffff;



    box-shadow: 0 0 0 2px #0f766e;



    flex-shrink: 0;

}



.resident-submission-timeline-item strong {

    display: block;

    color: #1f2937;

}



.resident-submission-timeline-item small {

    display: block;

    margin-top: 4px;

    color: #6b7280;

}



.resident-submission-timeline-item p {

    margin-top: 10px;

    line-height: 1.6;

}



/* ==========================================================

   Council Message

========================================================== */



.resident-council-message-card {

    border-left: 5px solid #0f766e;

}



.resident-council-message {

    padding: 18px;



    background: #f0fdfa;



    border-radius: 12px;



    line-height: 1.8;



    color: #164e63;

}



/* ==========================================================

   Responsive

========================================================== */



@media (max-width: 992px) {



    .resident-submission-layout {

        grid-template-columns: 1fr;

    }



    .resident-submission-sidebar {

        position: static;

    }



}



@media (max-width: 640px) {



    .resident-submission-photo-grid {

        grid-template-columns: 1fr;

    }



    .resident-submission-photo-item img {

        height: 240px;

    }



}



.resident-submission-view-button {

    display: inline-flex;

    min-height: 42px;

    align-items: center;

    justify-content: center;

    padding: 0 16px;

    border-radius: 10px;

    color: #ffffff;

    font-size: 0.84rem;

    font-weight: 800;

    text-decoration: none;

    background: #0f766e;

    transition:

        background 160ms ease,

        transform 160ms ease;

}



.resident-submission-view-button:hover {

    background: #115e59;

    transform: translateY(-1px);

}



/* ==========================================================

   Resident submission details

========================================================== */



.resident-submission-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;

}



.resident-submission-heading h1 {

    margin: 6px 0 8px;

    color: #102c42;

    font-size: clamp(1.8rem, 3vw, 2.5rem);

}



.resident-submission-heading p {

    margin: 0;

    color: #667987;

}



.resident-submission-card-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 20px;

}



.resident-submission-card-heading h2 {

    margin: 7px 0 0;

    color: #102c42;

    font-size: 1.45rem;

}



.resident-submission-reference {

    display: block;

    color: #009ca6;

    font-size: 0.78rem;

    font-weight: 900;

    letter-spacing: 0.06em;

}



.resident-submission-danger {

    display: inline-flex;

    align-items: center;

    padding: 7px 11px;

    border-radius: 999px;

    color: #9f2d2d;

    font-size: 0.74rem;

    font-weight: 800;

    background: #fdeaea;

}



.resident-submission-summary-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-top: 18px;

}



.resident-submission-summary-grid > div {

    padding: 14px;

    border-radius: 12px;

    background: #f4f7f9;

}



.resident-submission-summary-grid span,

.resident-submission-summary-grid strong {

    display: block;

}



.resident-submission-summary-grid span {

    color: #718491;

    font-size: 0.7rem;

    font-weight: 800;

    text-transform: uppercase;

}



.resident-submission-summary-grid strong {

    margin-top: 5px;

    color: #102c42;

    font-size: 0.88rem;

}



.resident-submission-description {

    margin-top: 20px;

    color: #243746;

    line-height: 1.75;

}



.resident-submission-section-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;

}



.resident-submission-section-heading > div {

    display: flex;

    align-items: flex-start;

    gap: 13px;

}



.resident-submission-section-heading h2 {

    margin: 0;

    color: #102c42;

    font-size: 1.18rem;

}



.resident-submission-section-heading p {

    margin: 5px 0 0;

    color: #718491;

    font-size: 0.86rem;

}



.resident-submission-section-icon {

    width: 38px;

    height: 38px;

    display: grid;

    flex: 0 0 38px;

    place-items: center;

    border-radius: 11px;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 900;

    background: #009ca6;

}



.resident-submission-location {

    margin-bottom: 16px;

    padding: 16px;

    border-radius: 13px;

    background: #f4f7f9;

}



.resident-submission-location strong,

.resident-submission-location span {

    display: block;

}



.resident-submission-location strong {

    color: #102c42;

    line-height: 1.5;

}



.resident-submission-location span {

    margin-top: 6px;

    color: #718491;

}



.resident-submission-details-list {

    margin: 0;

}



.resident-submission-details-list > div {

    display: grid;

    grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.1fr);

    gap: 14px;

    padding: 13px 0;

    border-bottom: 1px solid #e1e9ed;

}



.resident-submission-details-list > div:last-child {

    border-bottom: 0;

}



.resident-submission-details-list dt {

    color: #718491;

    font-size: 0.8rem;

    font-weight: 750;

}



.resident-submission-details-list dd {

    margin: 0;

    color: #102c42;

    font-weight: 750;

    text-align: right;

    overflow-wrap: anywhere;

}



.resident-submission-secondary-button {

    display: inline-flex;

    min-height: 42px;

    align-items: center;

    justify-content: center;

    margin-top: 16px;

    padding: 0 15px;

    border-radius: 10px;

    color: #ffffff;

    font-size: 0.82rem;

    font-weight: 800;

    text-decoration: none;

    background: #0f766e;

}



.resident-submission-secondary-button:hover {

    background: #115e59;

}



.resident-submission-empty-state {

    padding: 28px 18px;

    border: 1px dashed #c9d7de;

    border-radius: 12px;

    color: #718491;

    text-align: center;

    background: #f8fafb;

}



.resident-photo-count {

    display: inline-flex;

    min-width: 34px;

    height: 34px;

    align-items: center;

    justify-content: center;

    padding: 0 10px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.8rem;

    font-weight: 900;

    background: #009ca6;

}



.resident-duplicate-card {

    border-left: 5px solid #d58b18;

}



.resident-duplicate-reference {

    margin-top: 15px;

    padding: 14px;

    border-radius: 12px;

    background: #fff8e8;

}



.resident-duplicate-reference span,

.resident-duplicate-reference strong {

    display: block;

}



.resident-duplicate-reference span {

    color: #8a6a2c;

    font-size: 0.72rem;

    font-weight: 800;

    text-transform: uppercase;

}



.resident-duplicate-reference strong {

    margin-top: 5px;

    color: #7a4b00;

}



/* ==========================================================

   New Report Button

========================================================== */



.resident-submission-new-report {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 100%;

    min-height: 52px;



    padding: 0 20px;



    border: none;

    border-radius: 14px;



    background: linear-gradient(

        135deg,

        #009ca6 0%,

        #007b84 100%

    );



    color: #ffffff;



    font-size: 0.95rem;

    font-weight: 700;



    text-decoration: none;



    cursor: pointer;



    transition:

        transform .18s ease,

        box-shadow .18s ease,

        background .18s ease;

}



.resident-submission-new-report:hover {

    transform: translateY(-2px);



    background: linear-gradient(

        135deg,

        #00adb8 0%,

        #008791 100%

    );



    box-shadow:

        0 10px 24px rgba(0, 156, 166, .25);

}



.resident-submission-new-report:active {

    transform: translateY(0);

}



.resident-submission-new-report:focus-visible {

    outline: 3px solid rgba(0, 156, 166, .35);

    outline-offset: 3px;

}



/* Improve existing two-column layout */



.resident-submission-layout {

    display: grid;

    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.65fr);

    gap: 24px;

    align-items: start;

}



.resident-submission-main,

.resident-submission-sidebar {

    display: grid;

    gap: 22px;

}



.resident-submission-sidebar {

    position: sticky;

    top: 24px;

}



/* ==========================================================

   Responsive resident submission details

========================================================== */



@media (max-width: 980px) {

    .resident-submission-layout {

        grid-template-columns: 1fr;

    }



    .resident-submission-sidebar {

        position: static;

    }



    .resident-submission-summary-grid {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 640px) {

    .resident-submission-heading,

    .resident-submission-card-heading {

        align-items: stretch;

        flex-direction: column;

    }



    .resident-submission-status {

        align-self: flex-start;

    }



    .resident-submission-summary-grid {

        grid-template-columns: 1fr;

    }



    .resident-submission-details-list > div {

        grid-template-columns: 1fr;

        gap: 5px;

    }



    .resident-submission-details-list dd {

        text-align: left;

    }

}



.resident-photo-actions {

    display: grid;

    grid-template-columns:

        repeat(2, minmax(0, 1fr));

    gap: 16px;

}



.resident-photo-action {

    padding: 18px;

    border: 1px solid #d7e2e8;

    border-radius: 14px;

    background: #f8fafb;

}



.resident-photo-action label {

    display: block;

    margin-bottom: 10px;

    color: #102c42;

    font-weight: 800;

}



.resident-photo-action small {

    display: block;

    margin-top: 9px;

    color: #718491;

    line-height: 1.5;

}



@media (max-width: 640px) {

    .resident-photo-actions {

        grid-template-columns: 1fr;

    }

}



/* ==========================================================

   Resident Profile

========================================================== */



.resident-profile-heading {

    margin-bottom: 28px;

}



.resident-profile-heading h1 {

    margin: 8px 0;

    color: #102c42;

    font-size: clamp(2rem, 3vw, 2.6rem);

}



.resident-profile-heading p {

    margin: 0;

    color: #667987;

    max-width: 760px;

    line-height: 1.7;

}



.resident-eyebrow {

    display: inline-block;

    color: #009ca6;

    font-size: .78rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.resident-profile-summary-card {

    display: flex;

    align-items: center;

    gap: 22px;



    margin-bottom: 28px;



    padding: 24px;



    background: #ffffff;



    border: 1px solid #dbe7ec;

    border-radius: 18px;



    box-shadow: 0 8px 18px rgba(15,23,42,.05);

}



.resident-profile-avatar {

    width: 78px;

    height: 78px;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background: linear-gradient(

        135deg,

        #009ca6,

        #0f766e

    );



    color: #ffffff;



    font-size: 1.7rem;

    font-weight: 800;



    flex-shrink: 0;

}



.resident-profile-summary-copy {

    flex: 1;

}



.resident-profile-summary-copy span {

    display: block;

    color: #009ca6;

    font-size: .75rem;

    font-weight: 800;

    text-transform: uppercase;

}



.resident-profile-summary-copy h2 {

    margin: 6px 0;

    color: #102c42;

}



.resident-profile-summary-copy p {

    margin: 0;

    color: #718491;

}



.resident-profile-summary-status {

    text-align: right;

}



.resident-profile-summary-status span {

    display: block;

    color: #718491;

    font-size: .75rem;

    text-transform: uppercase;

}



.resident-profile-summary-status strong {

    color: #0f766e;

    font-size: 1rem;

}



.resident-profile-layout {

    display: grid;

    grid-template-columns: minmax(0,2fr) 340px;

    gap: 28px;

    align-items: start;

}



.resident-profile-main,

.resident-profile-sidebar {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.resident-profile-sidebar {

    position: sticky;

    top: 24px;

}



.resident-profile-section-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 22px;

}



.resident-profile-section-heading > div {

    display: flex;

    gap: 14px;

}



.resident-profile-section-icon {

    width: 42px;

    height: 42px;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 12px;



    background: #009ca6;

    color: #ffffff;



    font-size: .95rem;

    font-weight: 800;



    flex-shrink: 0;

}



.resident-profile-section-heading h2 {

    margin: 0;

    color: #102c42;

}



.resident-profile-section-heading p {

    margin: 5px 0 0;

    color: #718491;

    line-height: 1.6;

}



.resident-profile-readonly-grid {

    display: grid;

    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 18px;

}



.resident-profile-readonly-grid > div {

    padding: 18px;



    background: #f6f9fb;



    border-radius: 14px;



    border: 1px solid #e5edf1;

}



.resident-profile-readonly-grid span {

    display: block;

    color: #718491;

    font-size: .74rem;

    font-weight: 700;

    text-transform: uppercase;

}



.resident-profile-readonly-grid strong {

    display: block;

    margin-top: 6px;

    color: #102c42;

    font-size: .94rem;

    line-height: 1.5;

}



.resident-profile-monospace {

    font-family:

        Consolas,

        Monaco,

        monospace;



    font-size: .82rem;

    word-break: break-all;

}



.resident-profile-identity-note {

    margin-top: 24px;



    padding: 18px;



    background: #eefafc;



    border-left: 5px solid #009ca6;



    border-radius: 12px;

}



.resident-profile-identity-note strong {

    display: block;

    color: #102c42;

    margin-bottom: 8px;

}



.resident-profile-identity-note p {

    margin: 0;

    color: #4d6470;

    line-height: 1.7;

}



.resident-profile-form {

    display: flex;

    flex-direction: column;

    gap: 22px;

}



.resident-profile-submit {

    align-self: flex-start;



    min-width: 220px;



    padding: 14px 26px;



    border: none;

    border-radius: 12px;



    background: linear-gradient(

        135deg,

        #009ca6,

        #0f766e

    );



    color: #ffffff;



    font-size: .95rem;

    font-weight: 700;



    cursor: pointer;



    transition:

        transform .18s ease,

        box-shadow .18s ease;

}



.resident-profile-submit:hover {

    transform: translateY(-2px);



    box-shadow:

        0 12px 24px rgba(0,156,166,.22);

}



.resident-profile-alert {

    margin-bottom: 22px;



    padding: 18px;



    border-radius: 12px;



    font-weight: 600;

}



.resident-profile-alert-success {

    color: #166534;

    background: #dcfce7;

    border-left: 5px solid #22c55e;

}



.resident-profile-alert-error {

    color: #991b1b;

    background: #fee2e2;

    border-left: 5px solid #ef4444;

}



.resident-profile-sidebar-copy {

    color: #667987;

    line-height: 1.8;

}



@media (max-width:992px){



    .resident-profile-layout{

        grid-template-columns:1fr;

    }



    .resident-profile-sidebar{

        position:static;

    }



}



@media (max-width:700px){



    .resident-profile-summary-card{

        flex-direction:column;

        text-align:center;

    }



    .resident-profile-summary-status{

        text-align:center;

    }



    .resident-profile-readonly-grid{

        grid-template-columns:1fr;

    }



    .resident-profile-submit{

        width:100%;

    }



}



/* ==========================================================

   Transparency Centre

========================================================== */



.transparency-hero {

    margin-bottom: 32px;

}



.transparency-hero h1 {

    margin: 10px 0;

    color: #102c42;

    font-size: clamp(2.2rem, 3vw, 3rem);

}



.transparency-hero p {

    max-width: 760px;

    color: #667987;

    line-height: 1.8;

}



.transparency-hero-status {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-top: 28px;

}



.transparency-hero-status > div {

    padding: 20px;

    background: #ffffff;

    border: 1px solid #dbe7ec;

    border-radius: 16px;

    box-shadow: 0 6px 14px rgba(15,23,42,.05);

}



.transparency-hero-status span {

    display: block;

    color: #718491;

    font-size: .75rem;

    font-weight: 700;

    text-transform: uppercase;

}



.transparency-hero-status strong {

    display: block;

    margin-top: 8px;

    color: #102c42;

    font-size: 1.05rem;

}



.transparency-intro-card {

    margin-bottom: 28px;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #dbe7ec;

    border-radius: 18px;

    box-shadow: 0 8px 18px rgba(15,23,42,.05);

}



.transparency-intro-card h2 {

    margin-top: 0;

    color: #102c42;

}



.transparency-intro-card p {

    margin-bottom: 0;

    color: #667987;

    line-height: 1.8;

}



.transparency-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));

    gap: 24px;

    margin-bottom: 32px;

}



.transparency-card {

    background: #ffffff;

    border: 1px solid #dbe7ec;

    border-radius: 18px;

    padding: 28px;

    box-shadow: 0 8px 18px rgba(15,23,42,.05);

}



.transparency-card-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 14px;

    background: linear-gradient(

        135deg,

        #009ca6,

        #0f766e

    );

    color: #ffffff;

    font-weight: 800;

    font-size: 1rem;

}



.transparency-card h2 {

    margin: 0 0 16px;

    color: #102c42;

    font-size: 1.3rem;

}



.transparency-card p {

    color: #667987;

    line-height: 1.8;

}



.transparency-card ul,

.transparency-card ol {

    margin: 16px 0 0;

    padding-left: 22px;

}



.transparency-card li {

    margin-bottom: 10px;

    color: #4d6470;

    line-height: 1.7;

}



.transparency-status-badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    margin-bottom: 18px;

    border-radius: 999px;

    background: #fef3c7;

    color: #92400e;

    font-weight: 700;

    font-size: .82rem;

    text-transform: uppercase;

}



.transparency-flow {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: 20px 0;

}



.transparency-flow span {

    position: relative;

    padding: 14px 18px;

    background: #f7fafb;

    border: 1px solid #dce7ec;

    border-radius: 12px;

    font-weight: 600;

    color: #102c42;

}



.transparency-flow span:not(:last-child)::after {

    content: "↓";

    position: absolute;

    left: 50%;

    bottom: -24px;

    transform: translateX(-50%);

    color: #009ca6;

    font-weight: 700;

}



.transparency-steps {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 20px 0 0;

    padding-left: 0;

    list-style: none;

    counter-reset: transparency-step;

}



.transparency-steps li {

    counter-increment: transparency-step;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 18px;

    background: #f7fafb;

    border: 1px solid #dce7ec;

    border-radius: 12px;

}



.transparency-steps li::before {

    content: counter(transparency-step);

    width: 32px;

    height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #009ca6;

    color: #ffffff;

    font-weight: 700;

    flex-shrink: 0;

}



.transparency-compliance-card,

.transparency-platform-card {

    background: #ffffff;

    border: 1px solid #dbe7ec;

    border-radius: 18px;

    padding: 28px;

    margin-bottom: 28px;

    box-shadow: 0 8px 18px rgba(15,23,42,.05);

}



.transparency-compliance-card h2,

.transparency-platform-card strong {

    color: #102c42;

}



.transparency-compliance-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));

    gap: 14px;

    margin-top: 24px;

}



.transparency-compliance-grid span {

    padding: 14px;

    background: #eefafc;

    border-left: 4px solid #009ca6;

    border-radius: 10px;

    font-weight: 600;

    color: #0f4b5d;

}



.transparency-platform-card {

    display: grid;

    grid-template-columns: repeat(3,minmax(0,1fr));

    gap: 24px;

}



.transparency-platform-card span {

    display: block;

    color: #718491;

    font-size: .75rem;

    text-transform: uppercase;

}



.transparency-platform-card strong {

    display: block;

    margin-top: 8px;

    font-size: 1rem;

}



.transparency-footer {

    padding: 40px 20px;

    text-align: center;

    color: #718491;

    font-size: .9rem;

}



@media (max-width:992px){



    .transparency-hero-status{

        grid-template-columns:1fr;

    }



    .transparency-platform-card{

        grid-template-columns:1fr;

    }



}



@media (max-width:640px){



    .transparency-grid{

        grid-template-columns:1fr;

    }



    .transparency-card{

        padding:22px;

    }



}



/* ==========================================================

   Trust and Transparency

========================================================== */



.resident-transparency-section {

    margin-top: 28px;

    padding: 24px;

    border: 1px solid #d9e5ea;

    border-radius: 18px;

    background: #ffffff;

    box-shadow: 0 10px 30px rgba(15, 35, 50, 0.06);

}



.resident-transparency-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: #008c95;

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.resident-transparency-section h2 {

    margin: 0;

    color: #102f45;

    font-size: 1.35rem;

    line-height: 1.35;

}



.resident-transparency-section p {

    max-width: 850px;

    margin: 12px 0 0;

    color: #637985;

    line-height: 1.65;

}



.resident-transparency-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 18px;
    padding: 10px 15px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    background: #008c95;
    transition:
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}



.resident-transparency-action:hover {

    color: #ffffff;

    background: #00747c;

    box-shadow: 0 8px 20px rgba(0, 140, 149, 0.2);

    transform: translateY(-1px);

}

/* ==========================================================
   SMARTLOCAL-AI
   Resident submission photo actions
   Version: 1.0.5
   Date: 2026-09-28
   ========================================================== */

.resident-submission-photo-item > div {
    min-width: 0;
}

.resident-submission-photo-item strong {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.resident-submission-photo-delete-form {
    margin: 0;
    padding: 0 12px 12px;
}

.resident-submission-photo-delete-button {
    width: 100%;
    min-height: 38px;
    margin-top: 0;
    padding: 0 12px;

    border: 1px solid var(--danger);
    border-radius: 9px;

    color: var(--danger);
    background: var(--white);

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.resident-submission-photo-delete-button:hover {
    color: var(--white);
    border-color: var(--danger);
    background: var(--danger);
}

.resident-submission-photo-delete-button:focus-visible {
    outline: 3px solid rgba(152, 47, 47, 0.22);
    outline-offset: 2px;
}

.resident-submission-photo-delete-button:active {
    transform: translateY(1px);
}

.resident-submission-photo-upload {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.resident-submission-photo-upload h3 {
    margin: 0;
    color: var(--navy);
}

.resident-submission-photo-upload > p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.resident-submission-photo-upload-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.resident-submission-photo-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resident-submission-photo-source-actions .resident-submission-secondary-button {
    margin-top: 0;
}

.resident-submission-photo-selection-summary {
    color: var(--muted);
    font-size: 0.84rem;
}

.resident-submission-photo-upload-form > small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

#resident-upload-photographs-button {
    justify-self: start;
    margin-top: 0;
}

#resident-upload-photographs-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #7f9595;
    transform: none;
    box-shadow: none;
}

@media (max-width: 640px) {
    .resident-submission-photo-source-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .resident-submission-photo-source-actions .resident-submission-secondary-button,
    #resident-upload-photographs-button {
        width: 100%;
    }
}