/* ============================================================
   profile.css — profile page specific styles
   ============================================================ */

body {
    padding: 20px;
}

.header {
    max-width: 1000px;
}

.nav-button.primary {
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-mid) 100%);
    color: white;
}

.nav-button.primary:hover {
    opacity: 0.9;
}

.nav-button.neutral {
    background: var(--green-pale);
    color: var(--green-text);
    border: 1px solid var(--green-border);
}

.nav-button.neutral:hover {
    background: var(--green-hover);
}

.nav-actions {
    gap: 10px;
}

.container {
    max-width: 1000px;
    padding: 30px;
}

h1 {
    margin-bottom: 24px;
}

/* Profile summary */
.profile-summary {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid var(--green-border);
    border-radius: 8px;
    background: var(--green-pale);
}

.profile-summary h2 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--green-dark);
    font-family: 'Fraunces', serif;
}

.profile-summary p {
    color: var(--green-text);
    margin-bottom: 6px;
    font-size: 14px;
}

/* Family section */
.family-section {
    margin-top: 8px;
}

.family-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--green-border);
}

.family-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--green-dark);
    margin: 0;
    font-family: 'Fraunces', serif;
}

.family-info-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.family-info-btn {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--green-border);
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    transform: none;
    box-shadow: none;
    transition: color 0.15s;
}

.family-info-btn:hover {
    color: var(--green-mid);
    transform: none;
    box-shadow: none;
}

.family-intro {
    display: none;
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid var(--green-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--green-text);
    line-height: 1.6;
    width: 280px;
    box-shadow: 0 4px 16px rgba(45, 74, 62, 0.1);
    z-index: 10;
    white-space: normal;
    margin: 0;
}

.family-info-wrap:hover .family-intro {
    display: block;
}

.family-intro.visible {
    display: block;
}

.family-subsection {
    margin-bottom: 36px;
}

.subsection-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.subsection-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--green-text);
    margin: 0;
}

.add-member-btn {
    border: none;
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-mid) 100%);
    color: white;
    width: auto;
    margin-top: 0;
}

.add-member-btn:hover {
    opacity: 0.9;
}

/* Member form */
.member-form-container {
    display: none;
}

.member-form-container.visible {
    display: block;
}

.member-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
    margin-bottom: 20px;
}

.member-form-narrow {
    grid-template-columns: repeat(2, minmax(180px, 300px));
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full {
    grid-column: 1 / -1;
}

label {
    color: var(--green-text);
    font-weight: 500;
    font-size: 14px;
}

input,
select {
    width: 100%;
    padding: 11px;
    border: 2px solid var(--green-border);
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(30, 102, 68, 0.08);
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.actions button {
    border: none;
    border-radius: 5px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.btn-save {
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-mid) 100%);
    color: white;
}

.btn-save:hover {
    opacity: 0.9;
}

.btn-cancel {
    background: var(--green-pale);
    color: var(--green-text);
    border: 1px solid var(--green-border);
    display: none;
}

.btn-cancel:hover {
    background: var(--green-hover);
}

/* Messages */
.message {
    margin-top: 12px;
    padding: 12px;
    border-radius: 5px;
    font-size: 13px;
    display: none;
}

.message.success {
    background: var(--green-light);
    border: 1px solid var(--green-border);
    color: var(--green-mid);
}

.message.error {
    background: #fee;
    border: 1px solid #fcc;
    color: #c33;
}

/* Members list */
.members-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.member-card {
    background: var(--green-pale);
    border: 1px solid var(--green-border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.member-card h3 {
    color: var(--green-dark);
    margin-bottom: 8px;
    font-size: 16px;
    font-family: 'Fraunces', serif;
}

.member-card p {
    color: var(--green-text);
    font-size: 13px;
    margin-bottom: 6px;
}

.member-card button {
    margin-top: 8px;
    border: 1px solid #fcc;
    color: #c33;
    background: #fee;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
}

.member-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.member-card-actions .edit-btn {
    border: 1px solid var(--green-border);
    background: var(--green-light);
    color: var(--green-mid);
}

.member-card-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

.child-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.child-card-actions .edit-btn {
    border: 1px solid var(--green-border);
    background: var(--green-light);
    color: var(--green-mid);
}

/* Children grid: wider, shorter cards (avatar floated left so info wraps beside it) */
#childrenGrid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

#childrenGrid .member-card {
    padding: 12px 14px;
}

#childrenGrid .child-card-avatar {
    width: 128px;
    height: 128px;
    margin: 0 16px 4px 0;
    float: left;
    /* Circular wrapper with a soft background so the inset image reads as
       a portrait inside a frame — same treatment as .kids-switcher-avatar
       in kids mode. */
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--green-border);
    overflow: hidden;
}

#childrenGrid .child-card-avatar svg,
#childrenGrid .child-card-avatar img {
    width: 84%;
    height: 84%;
}

#childrenGrid .member-card h3 {
    margin-bottom: 4px;
    font-size: 15px;
}

#childrenGrid .member-card p {
    margin-bottom: 3px;
    font-size: 12.5px;
    line-height: 1.4;
}

#childrenGrid .member-card-actions {
    clear: both;
    padding-top: 10px;
}

/* Carousel when more than 3 children — show 3 at a time, scroll for the rest.
   Native scrollbar is hidden; .children-shelf-nav arrow buttons (rendered by
   profile.html and toggled by JS) are the only scroll affordance. */
#childrenGrid.is-carousel {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 8px;
}
#childrenGrid.is-carousel::-webkit-scrollbar { display: none; }

.children-shelf-carousel { position: relative; }
.children-shelf-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--green-border);
    background: #fff;
    color: var(--green-dark);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    padding: 0;
}
/* Re-state translateY(-50%) so a global button:hover rule (or any other
   transform-touching hover) doesn't wipe out the vertical centering and
   drop the arrow down. Same trick we use on .kids-shelf-nav:hover. */
.children-shelf-nav:hover { background: var(--green-mid); color: #fff; transform: translateY(-50%); box-shadow: 0 4px 12px rgba(30,102,68,0.25); }
.children-shelf-nav[disabled] { opacity: 0.35; cursor: not-allowed; }
.children-shelf-prev { left: -16px; }
.children-shelf-next { right: -16px; }

#childrenGrid.is-carousel .member-card {
    flex: 0 0 calc((100% - 28px) / 3);
    min-width: 240px;
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    #childrenGrid.is-carousel .member-card {
        flex: 0 0 calc((100% - 14px) / 2);
    }
}

@media (max-width: 520px) {
    #childrenGrid.is-carousel .member-card {
        flex: 0 0 88%;
        min-width: 0;
    }
}

/* Saved characters: same compact card style as children, always-on carousel showing 4 per row */
#savedCharsList {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
}

#savedCharsList .member-card {
    padding: 12px 14px;
    flex: 0 0 calc((100% - 42px) / 4);
    min-width: 200px;
    scroll-snap-align: start;
}

#savedCharsList .member-card-icon {
    width: 128px;
    height: 128px;
    margin: 0 16px 4px 0;
    float: left;
    font-size: 88px;
    line-height: 128px;
    text-align: center;
}

#savedCharsList .member-card h3 {
    margin-bottom: 4px;
    font-size: 15px;
}

#savedCharsList .member-card p {
    margin-bottom: 3px;
    font-size: 12.5px;
    line-height: 1.4;
}

#savedCharsList .member-card-actions {
    clear: both;
    padding-top: 10px;
}

@media (max-width: 768px) {
    #savedCharsList .member-card {
        flex: 0 0 calc((100% - 28px) / 3);
    }
}

@media (max-width: 520px) {
    #savedCharsList .member-card {
        flex: 0 0 calc((100% - 14px) / 2);
    }
}

/* Empty state */
.empty-state {
    margin-top: 16px;
    color: var(--green-muted);
    font-size: 14px;
}

/* Child stories within card */
.child-stories {
    margin-top: 10px;
    border-top: 1px solid var(--green-border);
    padding-top: 8px;
}

.child-stories p {
    font-weight: 600;
    font-size: 12px;
    color: var(--green-text);
    margin-bottom: 4px;
}

.child-stories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.child-stories ul li {
    font-size: 12px;
    color: var(--green-text);
    padding: 2px 0;
    border-bottom: 1px solid var(--green-border);
}

.child-stories ul li:last-child {
    border-bottom: none;
}

.child-stories ul li a {
    color: var(--green-mid);
    text-decoration: none;
}

.child-stories ul li a:hover {
    text-decoration: underline;
}

.child-stories .no-stories,
.no-stories {
    font-size: 12px;
    color: var(--green-muted);
    font-style: italic;
    margin: 6px 0 0 0;
    padding: 8px 10px;
    background: var(--green-pale);
    border: 1px dashed var(--green-border);
    border-radius: 6px;
}

/* Child tab bar */
.child-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

.child-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--green-border);
    background: var(--green-pale);
    color: var(--green-text);
    border-radius: 24px;
    padding: 5px 14px 5px 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    margin: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.child-tab-btn:hover {
    border-color: var(--green-mid);
    color: var(--green-mid);
    transform: none;
    box-shadow: none;
}

.child-tab-btn.active {
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-mid) 100%);
    border-color: var(--green-primary);
    color: white;
}

.child-tab-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-light);
    flex-shrink: 0;
}

.child-tab-avatar svg,
.child-tab-avatar img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.child-tab-btn.active .child-tab-avatar {
    background: rgba(255,255,255,0.2);
}

.child-tab-add-btn {
    border: 2px dashed var(--green-border);
    background: transparent;
    color: var(--green-muted);
    border-radius: 24px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    margin: 0;
    transition: border-color 0.15s, color 0.15s;
}

.child-tab-add-btn:hover:not(:disabled) {
    border-color: var(--green-mid);
    color: var(--green-mid);
    transform: none;
    box-shadow: none;
}

.child-tab-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Child panel */
.child-panel {
    background: var(--green-pale);
    border: 1px solid var(--green-border);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 16px;
}

.child-panel-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--green-border);
}

.child-panel-details {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
    font-size: 14px;
    color: var(--green-text);
    padding-top: 4px;
}

.child-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.child-panel-actions button {
    border: 1px solid #fcc;
    color: #c33;
    background: #fee;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    margin: 0;
}

.child-panel-actions .edit-btn {
    border: 1px solid var(--green-border);
    background: var(--green-light);
    color: var(--green-mid);
}

.child-creations-row {
    display: flex;
    gap: 24px;
    overflow-x: auto;
}

.child-creation-col {
    flex: 1;
    min-width: 160px;
}

.child-creation-label {
    font-weight: 700;
    font-size: 13px;
    color: var(--green-text);
    margin-bottom: 6px;
    margin-top: 0;
}

.child-creation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.child-creation-list li {
    font-size: 12px;
    color: var(--green-text);
    padding: 3px 0;
    border-bottom: 1px solid var(--green-border);
}

.child-creation-list li:last-child {
    border-bottom: none;
}

.child-creation-list li a {
    color: var(--green-mid);
    text-decoration: none;
}

.child-creation-list li a:hover {
    text-decoration: underline;
}

.child-creation-sublabel {
    font-weight: 600;
    font-size: 11px;
    color: var(--green-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 10px 0 4px;
}

.child-creation-sublabel:first-child {
    margin-top: 4px;
}

/* Untagged content section */
.untagged-content {
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--green-pale);
    border: 1px solid var(--green-border);
    border-radius: 10px;
}

.untagged-content-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--green-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px 0;
}

.rating-btn {
    cursor: default;
    pointer-events: none;
}

.btn-edit-profile {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 18px;
    background: var(--green-light);
    color: var(--green-primary);
    border: 1px solid var(--green-border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-edit-profile:hover {
    background: var(--green-hover);
}

.billing-link,
.billing-link:link,
.billing-link:visited {
    display: inline-block;
    margin-top: 10px;
    margin-left: 8px;
    padding: 8px 18px;
    background: var(--accent-warm);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.billing-link:hover {
    opacity: 0.88;
    color: #fff;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 10px;
    }

    .container {
        padding: 20px;
    }

    .member-form,
    .member-form-narrow {
        grid-template-columns: 1fr;
    }

    .child-panel-info {
        flex-wrap: wrap;
        gap: 12px;
    }

    .child-creations-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .child-creation-col {
        min-width: 140px;
    }
}

@media (max-width: 520px) {
    body {
        padding: 8px;
    }

    .container {
        padding: 14px;
    }

    .profile-summary {
        padding: 14px;
    }

    /* Two-column child/pet card grid on phones */
    .members-list {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .member-card {
        padding: 10px;
    }

    /* Dashboard: stack child panel info vertically */
    .child-panel-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .child-panel-details {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .child-panel-actions {
        flex-direction: row;
    }

    /* Dashboard: stack content columns vertically */
    .child-creations-row {
        flex-direction: column;
        gap: 12px;
        overflow-x: visible;
    }

    .child-creation-col {
        min-width: 0;
    }

    /* Keep tooltip from going off-screen on narrow phones */
    .family-intro {
        left: 0;
        right: auto;
        top: 30px;
        transform: none;
        width: min(280px, 80vw);
    }

    .subsection-header {
        gap: 8px;
    }

    .family-title {
        font-size: 18px;
    }
}