/* Family tasks replace the content area and retain the chosen child. */
.shell-app.is-family-portal .family-workspace { display: grid; gap: .8rem; margin: 0 auto; max-width: 1080px; min-width: 0; width: 100%; }
.family-workspace *, .family-workspace *::before, .family-workspace *::after { box-sizing: border-box; }
.family-workspace h2, .family-workspace h3 { color: #073b63; margin: 0 0 .5rem; }
.family-workspace h2 { font-size: 1.08rem; }
.family-workspace h3 { font-size: 1rem; }
.family-workspace p { line-height: 1.5; margin: .35rem 0 .7rem; }
.family-workspace .portal-panel { min-width: 0; padding: 1rem; }
.family-help { color: #50687c; font-size: .82rem; }
.family-children, .family-overview { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.family-workspace .family-child, .family-workspace .family-summary { background: linear-gradient(145deg, #fff, #f1f8fd); border: 1px solid #c6ddec; border-radius: .75rem; color: #073b63; cursor: pointer; display: grid; font: inherit; gap: .65rem; min-width: 0; padding: .9rem; text-align: left; }
.family-workspace .family-child > span:last-child { color: #086da7; font-size: .8rem; }
.family-workspace .family-child .portal-person__copy strong { font-size: .9rem; }
.family-workspace .family-summary { gap: .45rem; }
.family-summary > span { color: #45637b; font-size: .88rem; }
.family-summary > small { color: #086da7; font-size: .78rem; }
.family-workspace .family-context, .family-heading, .family-pagination, .family-attendance-title { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; }
.family-context > div { display: grid; gap: .35rem; min-width: 0; }
.family-context > div > small { color: #50687c; font-size: .74rem; }
.family-context .portal-person__copy strong { font-size: .96rem; }
.family-workspace .family-pagination { border-top: 1px solid #d9e7f2; color: #50687c; font-size: .78rem; margin-top: .7rem; padding-top: .7rem; }
.family-pagination > div { display: flex; gap: .5rem; }
.family-workspace button.button-secondary { flex: 0 0 auto; font-size: .8rem; min-height: 36px; padding: .4rem .65rem; width: auto; }
.family-workspace button:disabled { cursor: default; opacity: .55; }
.family-workspace :focus-visible { outline: 3px solid #1688bc; outline-offset: 3px; }
.family-attendance-list, .family-excuse-records { display: grid; gap: .5rem; }
.family-attendance-row { align-items: center; background: #f4f9fd; border: 1px solid #d5e5f1; border-radius: .65rem; display: grid; gap: .6rem; grid-template-columns: 22px minmax(0, 1fr) auto; padding: .75rem; }
.family-attendance-row > div { display: grid; gap: .35rem; min-width: 0; }
.family-attendance-row strong, .family-excuse-records strong { color: #134c70; font-size: .86rem; }
.family-attendance-title time, .family-attendance-title > span, .family-attendance-row small, .family-excuse-records small { color: #50687c; font-size: .77rem; overflow-wrap: anywhere; }
.family-status { color: #895e16; font-size: .8rem; }
.family-status.is-approved { color: #23654b; }
.family-date-check { align-items: center; display: flex; min-height: 36px; }
.family-date-check input { accent-color: #086da7; height: 18px; width: 18px; }
.family-excuse-records > article { background: #f4f9fd; border: 1px solid #d5e5f1; border-radius: .65rem; padding: .75rem; }
.family-workspace .portal-compact-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; }
.family-workspace .portal-compact-actions > details { color: #07517d; font-size: .82rem; }
.family-workspace .portal-compact-actions summary { cursor: pointer; padding: .5rem 0; }
.family-workspace .portal-recovery-options { display: flex; flex-wrap: wrap; gap: .5rem; padding: .4rem 0; }
.family-workspace .portal-recovery-options > button { flex: 0 1 auto; min-height: 36px; width: auto; }
.family-workspace .teacher-planner-form input, .family-workspace .teacher-planner-form select, .family-workspace .teacher-planner-form textarea { max-width: 100%; min-width: 0; }
.family-workspace .teacher-planner-form select { appearance: auto; }
.family-excuse-dates { color: #45637b; font-size: .82rem; grid-column: 1 / -1; line-height: 1.5; }
@media (max-width: 700px) {
    .family-children, .family-overview { grid-template-columns: minmax(0, 1fr); }
    .family-workspace .portal-panel { padding: .8rem; }
    .family-workspace .family-context { align-items: start; }
    .family-attendance-row { grid-template-columns: 22px minmax(0, 1fr); }
    .family-attendance-row > button { grid-column: 2; justify-self: start; }
    .family-workspace .teacher-planner-form { grid-template-columns: minmax(0, 1fr); }
    .family-workspace .workspace-shell__actions { flex-wrap: wrap; }
}

.family-workspace .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.family-workspace .family-attendance-title { justify-content: flex-start; gap: 1rem; }
.family-workspace .family-attendance, .family-workspace .portal-stack--excusas, .family-workspace .portal-subject-workspace { margin-inline: auto; max-width: 940px; width: 100%; }
.family-workspace [data-portal-excuse-form] { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.family-workspace [data-portal-excuse-form] > .teacher-planner-form__wide, .family-workspace [data-portal-excuse-form] > .workspace-shell__actions { grid-column: 1 / -1; }
.family-workspace [data-portal-excuse-form] .workspace-shell__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; }
.family-workspace [data-portal-excuse-form] .inline-check { align-items: center; display: inline-flex; flex: 0 1 auto; gap: .4rem; width: auto; }
.family-workspace [data-portal-excuse-form] .inline-check input { height: 18px; margin: 0; width: 18px; }
@media (max-width: 700px) { .family-workspace [data-portal-excuse-form] { grid-template-columns: minmax(0, 1fr); } }

/* The date editor updates locally: changing dates never replaces the support file or reason. */
.family-excuse-editor { border: 1px solid #caddf0; border-radius: .65rem; grid-column: 1 / -1; margin: 0; min-width: 0; padding: .8rem; background: #f5faff; }
.family-excuse-editor legend { color: #07517d; font-size: .87rem; font-weight: 600; padding: 0 .35rem; }
.family-excuse-modes, .family-excuse-choice { display: flex; flex-wrap: wrap; gap: .75rem; }
.family-excuse-modes label, .family-excuse-choice label { align-items: center; display: inline-flex; gap: .35rem; }
.family-excuse-modes input, .family-excuse-choice input { accent-color: #086da7; height: 16px; width: 16px; }
.family-excuse-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.family-excuse-range[hidden], .family-excuse-editor [hidden] { display: none; }
.family-excuse-date-control { display: flex; align-items: stretch; min-width: 0; gap: .35rem; }
.family-excuse-date-control input { flex: 1 1 0; min-width: 0; width: 100%; }
.family-excuse-date-control input::-webkit-calendar-picker-indicator { display: none; }
.family-excuse-date-control button { align-items: center; display: inline-flex; justify-content: center; min-width: 38px; }
.family-excuse-days { display: grid; gap: .5rem; margin-bottom: .6rem; }
.family-excuse-day { display: grid; align-items: end; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; max-width: 460px; }
.family-excuse-coverage { color: #07517d; font-size: .83rem; overflow-wrap: anywhere; }
.family-excuse-error { color: #a33521; font-size: .83rem; }
.family-excuse-error:empty { display: none; }
.family-excuse-editor details { font-size: .8rem; color: #45637b; }
.family-excuse-editor details summary { cursor: pointer; padding: .35rem 0; }
.family-excuse-editor details p { border-top: 1px solid #dce9f4; margin: .4rem 0; padding-top: .4rem; }
@media (max-width: 460px) { .family-excuse-range { grid-template-columns: minmax(0, 1fr); } }

.family-excuse-signature { grid-column: 1 / -1; border: 1px solid #caddf0; border-radius: .65rem; margin: 0; min-width: 0; padding: .8rem; background: #f8fbfe; }
.family-excuse-signature legend { color: #07517d; font-size: .87rem; font-weight: 600; padding: 0 .35rem; }
.family-excuse-signer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .75rem; }
.family-excuse-signer input { min-width: 0; width: 100%; }
.family-excuse-signature p { font-size: .85rem; line-height: 1.45; }
.family-excuse-signature canvas { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 10 / 3; border: 1px solid #a9cbe8; border-radius: .5rem; background: white; cursor: crosshair; touch-action: none; margin: .5rem 0; }
.family-workspace [data-portal-excuse-form] .family-excuse-consent { display: flex; margin-top: .75rem; }
.family-excuse-signature-status { color: #07517d; }
.family-excuse-signature-status:empty { display: none; }
.family-excuse-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: .85rem; padding-top: .65rem; border-top: 1px solid #dce9f4; }
.family-excuse-receipt { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; text-decoration: none; white-space: normal; text-align: center; }
.family-excuse-declaration { border-left: 3px solid #9fc9e9; padding: .5rem .65rem; background: #eef6fc; color: #34566e; }
.family-excuse-review h3 { color: #134c70; font-size: .9rem; }
.family-excuse-review dl { display: grid; gap: .4rem; margin: .5rem 0; }
.family-excuse-review dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .65rem; }
.family-excuse-review dt { color: #50687c; }
.family-excuse-review dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .family-excuse-actions { justify-content: flex-start; } }
@media (max-width: 460px) { .family-excuse-signer { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 700px) { .family-excuse-signature canvas { min-height: 160px; } }

.family-excuse-comparison { display: grid; gap: .5rem; }
.family-excuse-comparison section { border: 1px solid #dce9f4; border-radius: .45rem; padding: .5rem .65rem; overflow-wrap: anywhere; }
.family-excuse-comparison section > strong { color: #134c70; font-size: .85rem; }
.family-excuse-comparison section p { margin: .25rem 0; font-size: .82rem; }