/* ===========================================================
   Family portal — accounts, scheduling, and billing screens.
   Uses the site design tokens from styles.css.
   =========================================================== */

.portal-shell{padding:52px 0 90px;background:linear-gradient(180deg,var(--ice),var(--white) 420px);min-height:70vh}
.portal-head{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.portal-head h1{margin:8px 0 6px;font-size:clamp(30px,4vw,42px);line-height:1.05;letter-spacing:-.05em}
.portal-head p{margin:0;color:var(--muted);max-width:56ch}
.portal-identity{display:flex;align-items:center;gap:12px}
.portal-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;letter-spacing:.02em}
.portal-identity strong{display:block;font-size:15px}
.portal-identity small{color:var(--muted);font-size:12.5px;text-transform:capitalize}

.portal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;padding:6px;background:var(--white);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm);width:max-content;max-width:100%}
.portal-tab{appearance:none;border:0;background:transparent;padding:11px 20px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.18s}
.portal-tab:hover{color:var(--navy)}
.portal-tab[aria-selected="true"]{background:var(--navy);color:#fff}

.portal-grid{display:grid;gap:22px}
.portal-grid.two{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.portal-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.portal-grid.two,.portal-grid.three{grid-template-columns:1fr}}

.portal-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm)}
.portal-card>h2{margin:0 0 6px;font-size:22px;letter-spacing:-.03em}
.portal-card>h2+p{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.portal-card.dark{background:radial-gradient(circle at 100% 0,rgba(25,198,214,.26),transparent 42%),var(--navy);border-color:transparent;color:#fff}
.portal-card.dark h2,.portal-card.dark strong{color:#fff}
.portal-card.dark p{color:rgba(255,255,255,.74)}

.credit-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:640px){.credit-row{grid-template-columns:1fr}}
.credit-chip{border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);padding:16px 18px;background:rgba(255,255,255,.06)}
.credit-chip strong{display:block;font-size:30px;line-height:1;letter-spacing:-.04em}
.credit-chip span{display:block;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.09em}

.session-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.session-item{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--white)}
.session-item.is-cancelled{opacity:.62;background:var(--ice)}
.session-when{display:flex;flex-direction:column;gap:3px;min-width:190px}
.session-when strong{font-size:16px;letter-spacing:-.02em}
.session-when span{color:var(--muted);font-size:13.5px}
.session-meta{flex:1 1 220px;min-width:0}
.session-meta strong{display:block;font-size:15px}
.session-meta span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.session-actions{display:flex;gap:8px;flex-wrap:wrap}

.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.tag.scheduled{background:rgba(20,87,217,.1);color:var(--blue)}
.tag.completed{background:rgba(25,198,214,.16);color:#0d7d88}
.tag.cancelled{background:rgba(214,66,66,.12);color:#b03b3b}
.tag.paid{background:rgba(25,198,214,.16);color:#0d7d88}
.tag.pending{background:rgba(215,168,63,.18);color:#8a6512}

.mini-button{appearance:none;border:1px solid var(--line);background:var(--white);color:var(--navy);border-radius:999px;padding:9px 16px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s}
.mini-button:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.mini-button.danger:hover{background:#b03b3b;border-color:#b03b3b}
.mini-button:disabled{opacity:.5;cursor:not-allowed}

.portal-form{display:grid;gap:14px}
.portal-form label{display:grid;gap:7px;font-size:13.5px;font-weight:600;color:var(--navy)}
.portal-form input,.portal-form select,.portal-form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:15px;font-weight:400;color:var(--ink);background:var(--white)}
.portal-form input:focus,.portal-form select:focus,.portal-form textarea:focus{outline:2px solid rgba(20,87,217,.35);outline-offset:1px;border-color:var(--blue)}
.portal-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.portal-form .row{grid-template-columns:1fr}}
.portal-form small{color:var(--muted);font-weight:400;font-size:12.5px}

.slot-day{margin-bottom:18px}
.slot-day h3{margin:0 0 10px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.slot-grid{display:flex;flex-wrap:wrap;gap:8px}
.slot-button{appearance:none;border:1px solid var(--line);background:var(--white);border-radius:var(--radius-sm);padding:11px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;transition:.16s;text-align:left}
.slot-button small{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.slot-button:hover{border-color:var(--blue);box-shadow:0 10px 24px rgba(20,87,217,.14);transform:translateY(-1px)}
.slot-button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.slot-button[aria-pressed="true"] small{color:rgba(255,255,255,.7)}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.plan-card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;background:var(--white)}
.plan-card.featured{border-color:var(--navy);box-shadow:var(--shadow-sm)}
.plan-card h3{margin:0;font-size:17px;letter-spacing:-.02em}
.plan-price{font-size:30px;font-weight:700;letter-spacing:-.045em;color:var(--navy)}
.plan-price em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);margin-left:6px}
.plan-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;display:grid;gap:6px}
.plan-card .plan-note{font-size:12px;color:var(--muted);margin:0}
.plan-card .mini-button{margin-top:auto;align-self:flex-start}

.portal-table{width:100%;border-collapse:collapse;font-size:14px}
.portal-table th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 12px 10px;border-bottom:1px solid var(--line)}
.portal-table td{padding:14px 12px;border-bottom:1px solid var(--soft);vertical-align:middle}
.portal-table tr:last-child td{border-bottom:0}

.availability-day{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--soft)}
.availability-day:last-of-type{border-bottom:0}
.availability-day strong{font-size:14.5px}
.availability-blocks{display:flex;flex-wrap:wrap;gap:8px}
.availability-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--soft);font-size:13px;font-weight:600;color:var(--navy)}
.availability-pill button{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0}
.availability-pill button:hover{color:#b03b3b}
@media(max-width:640px){.availability-day{grid-template-columns:1fr}}

.portal-note{margin:0;padding:14px 16px;border-radius:var(--radius-sm);background:var(--soft);color:var(--navy);font-size:13.5px}
.portal-alert{margin:0 0 18px;padding:14px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600}
.portal-alert.error{background:rgba(214,66,66,.1);color:#95302f}
.portal-alert.success{background:rgba(25,198,214,.16);color:#0b6d77}
.portal-alert[hidden]{display:none}

.portal-empty{padding:30px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-md);font-size:14.5px}
.portal-loading{padding:40px;text-align:center;color:var(--muted)}

/* Sign in / sign up */
.auth-shell{padding:70px 0 100px;background:linear-gradient(180deg,var(--ice),var(--white) 380px)}
.auth-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:32px;align-items:start}
@media(max-width:900px){.auth-grid{grid-template-columns:1fr}}
.auth-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-sm)}
.auth-card h1{margin:10px 0 8px;font-size:clamp(28px,4vw,38px);line-height:1.06;letter-spacing:-.05em}
.auth-card>p{margin:0 0 22px;color:var(--muted)}
.auth-switch{margin:18px 0 0;font-size:14px;color:var(--muted)}
.auth-switch a{font-weight:600;color:var(--blue)}
.role-toggle{display:flex;gap:8px;margin-bottom:20px;padding:5px;background:var(--soft);border-radius:999px;width:max-content;max-width:100%}
.role-toggle button{appearance:none;border:0;background:transparent;padding:10px 18px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.role-toggle button[aria-pressed="true"]{background:var(--white);color:var(--navy);box-shadow:var(--shadow-sm)}
.auth-aside ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.auth-aside li{position:relative;padding-left:26px;color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.6}
.auth-aside li:before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:50%;border:2px solid var(--teal)}