.demo-parent-entry{border-top:1px solid var(--theme-line,#e2e9df);margin-top:14px;padding-top:13px}.demo-parent-entry>span{display:block;font-size:var(--text-caption);letter-spacing:.13em;font-weight:600;color:var(--theme-muted,#98a78c);margin-bottom:8px}.demo-parent-entry>button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 0;text-align:left;line-height:1.5;font-size:var(--text-caption);color:var(--theme-text,#4e7740)}.demo-parent-entry>button>span{flex:1}.demo-parent-entry .icon{width:17px;height:17px}.demo-parent-entry .icon:last-child{width:13px;height:13px}.demo-parent-entry>button:hover{color:var(--theme-accent,#236b53)}.parent-preview-banner{display:flex;gap:13px;align-items:center;margin-bottom:24px;padding:16px 19px;border:1px solid var(--theme-line,#dbe6d3);border-radius:12px;background:var(--theme-surface-muted,#f0f5ea)}.preview-eye{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;background:var(--theme-surface,white);border-radius:10px;color:var(--theme-muted,#668c50)}.parent-preview-banner>div{flex:1;min-width:0}.parent-preview-banner strong{font-size:var(--text-body);color:var(--theme-text,#456639);font-weight:600}.parent-preview-banner p{margin-top:3px;font-size:var(--text-caption);color:var(--theme-muted,#889c79)}.parent-preview-banner .button{font-size:var(--text-small);min-height:39px;padding:10px 14px;white-space:nowrap}.parent-preview-banner .button>.icon{width:17px;height:17px}.parent-context{display:flex;align-items:center;gap:12px;padding:0 0 21px;margin-bottom:26px;border-bottom:1px solid var(--theme-line,#e3e9de)}.parent-context .avatar{width:41px;height:41px;font-size:var(--text-small)}.parent-context>div{min-width:0}.parent-context-label{display:block;font-size:var(--text-caption);font-weight:600;letter-spacing:.14em;color:var(--theme-muted,#9ba88d);margin-bottom:5px}.parent-context strong{display:block;font-size:var(--text-body);font-weight:600;color:var(--theme-text,#526c42)}.parent-context strong>span{color:var(--theme-muted,#93a185);font-size:var(--text-small);font-weight:400;white-space:nowrap}.parent-context-note{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--theme-muted,#97a48b);font-size:var(--text-caption)}.parent-context-note>.icon{width:14px;height:14px}.parent-preview-banner~.overview-heading{margin-top:0}
@media(max-width:760px){.parent-preview-banner{padding:14px;gap:10px;flex-wrap:wrap;margin-bottom:19px}.parent-preview-banner strong{font-size:var(--text-small)}.parent-preview-banner p{font-size:var(--text-caption)}.parent-preview-banner>.button{width:100%;justify-content:center;font-size:var(--text-caption)}.parent-context{gap:10px;margin-bottom:23px;padding-bottom:18px}.parent-context-note{display:none}.parent-context strong{font-size:var(--text-small)}.parent-context-label{font-size:var(--text-caption)}.parent-context strong>span{font-size:var(--text-small)}}
.demo-role-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 15px;margin-bottom:25px;border:1px solid var(--theme-line,#dce7df);border-radius:14px;background:var(--theme-surface-muted,#edf4ef)}.demo-role-caption{display:flex;align-items:center;gap:10px;min-width:0}.demo-role-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--theme-surface,#fff);color:var(--theme-muted,#47775a);flex-shrink:0}.demo-role-caption strong{display:block;font-size:var(--text-small);color:var(--theme-text,#325e44)}.demo-role-caption small{display:block;margin-top:3px;font-size:var(--text-caption);color:var(--theme-muted,#708273)}.demo-role-switch{display:flex;gap:4px;border:1px solid var(--theme-line,#e0e9df);border-radius:10px;background:var(--theme-surface,#fff);padding:4px;flex-shrink:0}.demo-role-switch button{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:7px;font-size:var(--text-small);color:var(--theme-muted,#6b7c70);min-height:36px;transition:background .15s}.demo-role-switch .icon{width:16px;height:16px}.demo-role-switch button:hover{background:var(--theme-hover,#f0f5f0);color:var(--theme-accent,#285d41)}.demo-role-switch button[aria-pressed=true]{background:var(--theme-accent,#27684e);color:var(--theme-on-accent,#fff);opacity:1;cursor:default}.demo-role-switch button:focus-visible{outline:2px solid var(--theme-accent-border,#367a55);outline-offset:2px}.demo-role-bar+.parent-context{padding-bottom:14px;margin-bottom:22px}
@media(max-width:850px){.demo-role-bar{flex-wrap:wrap;gap:12px}.demo-role-switch{flex:1;min-width:285px}.demo-role-switch button{flex:1;padding:9px 10px}.demo-role-caption small{font-size:var(--text-caption)}}
@media(max-width:420px){.demo-role-bar{padding:12px;margin-bottom:20px}.demo-role-switch{min-width:0;width:100%}.demo-role-switch button{font-size:var(--text-caption);padding:9px 8px;gap:5px}}
.family-context{display:block;padding:0 0 20px}.family-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.family-heading .parent-context-label{font-size:var(--text-caption);letter-spacing:.12em;margin:0}.family-children{display:flex;flex-wrap:wrap;gap:10px}.family-child{display:flex;align-items:center;gap:11px;min-width:220px;max-width:100%;padding:12px 14px;border:1px solid var(--theme-line,#e0e6df);border-radius:13px;background:var(--theme-surface,#fff);text-align:left;color:var(--theme-text,#284d3d);transition:border-color .15s,background .15s}.family-child:hover{border-color:var(--theme-accent-border,#6d967b);background:var(--theme-surface-muted,#f3f7f0)}.family-child[aria-pressed=true]{border-color:var(--theme-accent-border,#6d967b);background:var(--theme-surface-muted,#eef5ee);box-shadow:inset 0 0 0 1px var(--theme-accent-border,#6d967b)}.family-child:focus-visible{outline:2px solid var(--theme-accent-border,#367a55);outline-offset:3px}.family-child-name{flex:1;min-width:0}.family-child-name strong{font-size:var(--text-body);line-height:1.4;overflow-wrap:anywhere}.family-child-name small{display:block;font-size:var(--text-small);color:var(--theme-muted,#687d71);margin-top:3px}.family-selected{width:18px;height:18px;color:var(--theme-accent,#347757);opacity:0}.family-selected .icon{width:18px;height:18px}.family-child[aria-pressed=true] .family-selected{opacity:1}.family-unread{min-width:21px;height:21px;padding:2px 5px;display:grid;place-items:center;border-radius:7px;background:var(--theme-surface-muted,#e9f1e8);color:var(--theme-text,#3c6448);font-size:var(--text-caption);font-weight:600}.family-hint{font-size:var(--text-small);line-height:1.5;color:var(--theme-muted,#708176);margin:10px 0 0}.notification-child{display:block;color:var(--theme-accent,#347757);font-size:var(--text-small);font-weight:600;margin-bottom:5px}
@media(max-width:580px){.family-child{min-width:0;flex:1 1 190px;padding:10px 12px}.family-child-name strong{font-size:var(--text-small)}.family-context .avatar{width:36px;height:36px;flex-shrink:0}.family-heading .parent-context-note{display:none}.family-context{margin-bottom:20px}.family-hint{font-size:var(--text-caption)}}