/* Styles for src/features/* (parent tabs, profile forms, reports) and layout-stability fixes. Loaded after style.css. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.print-only{display:none}
.table-scroll{position:relative}/* contains .sr-only cells so they cannot widen the page */
.center{text-align:center;margin-top:14px}
kbd{font:inherit;font-weight:800;background:#f3ecfa;border:1px solid #dccbed;border-radius:5px;padding:0 5px}

/* ---- stable layouts ---- */
/* PIN gate: the create, confirm and unlock screens reserve the same space so the keypad never moves. */
.pin-gate .pin-title{min-height:2.5em;display:flex;align-items:center;justify-content:center;font-size:30px;margin:12px 0 4px}
.pin-gate .pin-help{min-height:4.9em}
.pin-gate .pin-dots{height:70px;min-height:70px;padding:0;display:flex;align-items:center;justify-content:center}
.pin-gate .keypad{margin:6px auto 12px}
.pin-gate .error-message{min-height:44px;margin:0 0 4px;display:flex;align-items:center;justify-content:center}
/* Practice: the button / feedback area keeps its height whichever one is showing, so the keypad above and the hint panel below stay put. */
.action-zone{min-height:250px}
.action-zone .feedback{margin-top:9px;animation:none}
.action-zone .help-buttons{margin-top:12px}
.keypad.fraction button[data-key="."],.keypad.fraction button[data-key="−"],.keypad.fraction button[data-key="space"]{visibility:hidden}
.keypad.fraction button[data-key="/"]{background:#e6d6f9;border-bottom-color:#c9aee8}
@media(max-width:650px){.action-zone{min-height:330px}.pin-gate .pin-title{font-size:26px}}

/* ---- parent space tabs ---- */
.parent-tabs{position:sticky;top:0;z-index:30;background:var(--paper);margin:0 -8px 6px;padding:8px;border-bottom:1px solid #e6d9ef}
.tab-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}
.ptab{min-height:44px;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:12px;background:#fff;border:1.5px solid #e1d6ec;color:#5b4373;font-weight:700;font-size:14px;white-space:nowrap}
.ptab .symbol{font-size:16px;color:#8453bf}
.heading-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.form-ok{margin:0;align-self:center;color:#1f6b3a;font-weight:700;font-size:14px}.form-ok:empty{display:none}
.ptab.on{background:var(--accent);border-color:var(--accent);color:#fff}.ptab.on .symbol{color:#fff}
.parent-panel{outline:none}
.parent-panel>.parent-section:first-child{margin-top:16px}

/* ---- profile forms ---- */
.person-main{display:flex;flex-direction:column;flex:1;min-width:150px}
.person-edit{flex-basis:100%;border-top:1px dashed #d9c8ea;padding-top:14px}
.parent-section form.profile-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 16px;align-items:start;margin:14px 0}
.pfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.pfield.wide,.form-actions.wide{grid-column:1/-1}
.pfield>label,.pfield .label-text{font-size:12px;color:#6f4f87;font-weight:700}
.parent-section .pfield input,.parent-section .pfield select,.parent-section .pfield textarea{width:100%}
.parent-section .pfield input[type=color]{width:64px;padding:2px;min-height:44px}
.pfield [aria-invalid=true]{border-color:#b3324f!important;background:#fff6f8}
.field-error{color:#a11c45;font-size:12px;font-weight:700}
.field-help{color:#7c6590;font-size:11px}
.color-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pfield .check{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:#5b4373;font-weight:600}
.pfield .check input{width:22px;height:22px;min-height:0}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.account-actions{margin-top:8px}

/* ---- reports ---- */
.reports .report-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.reports .report-head h2{margin:0}
.report-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.parent-section .report-controls label.report-kid{flex:0 0 auto;min-width:150px}
.report-kid select{min-height:44px}
.segmented.range{grid-template-columns:repeat(3,auto);min-width:240px}
.segmented.range .segment{padding:0 14px}
.report-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:8px 0 22px}
.report-card{background:#faf7fe;border:1px solid #eadff3;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px}
.report-card strong{font-size:28px;color:#5b2fa8;letter-spacing:-.5px;line-height:1.1}
.report-card span{font-size:13px;color:#4f3a66;font-weight:600}
.report-card small{font-size:11px;color:#6f5a84}
.report-block{margin-top:26px}
.report-block h3{margin:0 0 10px;font-size:18px}
.trend-figure{margin:0;background:#fff;border:1px solid #eadff3;border-radius:14px;padding:12px}
.trend-chart{width:100%;height:auto;max-height:340px}
.trend-chart .grid{stroke:#e8dff2;stroke-width:1}
.trend-chart .base{stroke:#8a76a0;stroke-width:1.5}
.trend-chart .axis{font-size:11px;fill:#5e4a74}
.trend-chart .axis-title{font-weight:700;fill:#4f3a66}
.trend-chart .bar{fill:#cdb8ee;stroke:#a98bd8;stroke-width:1}
.trend-chart .line{fill:none;stroke:#5b2fa8;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.trend-chart .dot{fill:#5b2fa8;stroke:#fff;stroke-width:1.5}
.trend-figure figcaption{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#4f3a66;margin-top:6px}
.legend .key{color:#5b2fa8;font-weight:900;margin-right:3px}.legend .key-bar{color:#a98bd8}
.chart-summary{font-size:13px;color:#4f3a66;margin:8px 0}
.chart-table summary,.skill-detail summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;font-size:13px;color:var(--accent)}
.report-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.report-split h3{margin-top:0}
.skill-list,.session-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.skill-card{background:#fff;border:1px solid #e8deef;border-radius:12px;padding:14px;display:grid;gap:10px}
.skill-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.skill-top strong{font-size:14px;color:#3d2a52;flex:1;min-width:140px}
.skill-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;margin:0}
.skill-facts dt{font-size:11px;color:#6f5a84;font-weight:700}
.skill-facts dd{margin:0;font-size:13px;color:#3d2a52;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.status-chip{display:inline-flex;gap:5px;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;white-space:nowrap;border:1.5px solid currentColor}
.status-strong{background:#e7f6d6;color:#2d5a12}
.status-developing{background:#efe8fa;color:#553381}
.status-weak{background:#fde7ef;color:#8a1b49}
.status-new{background:#eef1f6;color:#44536a}
.delta{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:700}
.delta-up{color:#2d5a12}.delta-down{color:#8a1b49}.delta-flat,.delta-none{color:#5e4a74}
button.small{min-height:44px;padding:8px 14px;font-size:13px}
.reports table th[scope=row]{text-align:left;font-weight:600}
.reports th,.reports td{padding:9px 10px;border-bottom:1px solid #f0e8f6;text-align:left;vertical-align:middle}
.reports th[scope=col]{font-size:11px;color:#6f5a84;white-space:nowrap}
.reports td .status-chip{font-size:11px}
.family-table tr.selected{background:#f5effc}
.session-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:1px solid #e8deef;border-radius:10px;padding:12px 14px;flex-wrap:wrap}
.session-list li>div{display:flex;flex-direction:column;gap:2px}
.session-score{text-align:right}.session-score strong{font-size:18px;color:#5b2fa8}
.empty-state{text-align:center;padding:36px 18px;background:#faf7fe;border:1px dashed #d9c8ea;border-radius:16px;display:grid;gap:10px;justify-items:center}
.empty-state>span{font-size:38px;color:#9266b6}
.empty-state p{max-width:460px;color:#4f3a66}
.report-loading{display:flex;align-items:center;gap:12px;justify-content:center;padding:44px 10px;color:#4f3a66;font-weight:700}
.report-error{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fde7ef;border:1px solid #f1bccf;color:#7a1741;border-radius:12px;padding:16px}
@media(max-width:930px){.report-split{grid-template-columns:1fr}}
@media(max-width:650px){
  .parent-tabs{margin:0 -16px 6px;padding:8px 16px}
  .tab-scroll{flex-wrap:wrap;overflow:visible}.ptab{flex:1 1 auto;justify-content:center;padding:8px 10px}
  .segmented.range{min-width:0;width:100%}.report-controls{width:100%}.parent-section .report-controls label.report-kid{flex:1 1 100%}
  .report-card strong{font-size:23px}.trend-chart .axis{font-size:12px}
  .skill-facts{grid-template-columns:1fr 1fr}
  .session-score{text-align:left}
}

/* ---- print: reports and the TEKS table print cleanly on paper ---- */
@media print{
  .sidebar,.topbar,.main-footer,.parent-tabs,.report-controls,.skip,.toast,.sync-chip,.heading-actions,.page-heading>.secondary,.skill-card button,.reports td button,.reports .center,.family-table td:last-child,.family-table th:last-child,#toast{display:none!important}
  .main-wrap{margin:0!important}main{padding:0!important;max-width:none!important}
  body{background:#fff!important;color:#000}
  .print-only{display:block!important;font-size:12pt;margin:0 0 10pt}
  .parent-section{border:0!important;padding:0!important;margin:0!important}
  .report-card,.skill-card,.trend-figure,.session-list li{break-inside:avoid}
  details>*{display:revert}details:not([open])>*:not(summary){display:block}
  .chart-table summary,.skill-detail summary{font-size:11pt}
  a{color:#000}
}
.parent-section .pfield label.check{flex-direction:row;align-items:center;flex:0 0 auto;min-width:0;font-size:13px}

.update-bar{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;background:#29183f;color:#fff;box-shadow:0 8px 24px rgba(41,24,63,.35)}.update-bar button{min-height:44px}
