/* Skiliograph Family — Family Corner page and the picker / PIN / code boxes apps open. Scoped to .skf.skfr so the theme can't bleed in. */
.skf.skfr{--page:#fdeec8;--card:#fff7e6;--ink:#2b2d42;--ink2:#5d607a;--line:#ead6a8;--line2:#d9c08a;--mintInk:#1d6b3e;--sun:#ffd23f;--sunEdge:#d9a600;
 --teal:#2a9fa8;--tealSoft:#cfeff2;--tealInk:#1b6f76;--rose:#c2416b;
 --disp:"Baloo 2","Trebuchet MS",system-ui,sans-serif;--body:"Nunito","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
 --r:1.125rem;color-scheme:light;color:var(--ink);font:var(--r)/1.5 var(--body);text-align:left}
.skf.skfr *,.skf.skfr *::before,.skf.skfr *::after{box-sizing:border-box}
.skf.skfr button{font:inherit;color:inherit;background:none;border:0;border-radius:0;box-shadow:none;text-transform:none;letter-spacing:normal;line-height:inherit;padding:0;margin:0;min-height:0;width:auto;cursor:pointer}
.skf.skfr button:disabled{opacity:.45;cursor:not-allowed}
.skf.skfr input{margin:0;box-shadow:none;max-width:100%;height:auto;line-height:1.3}
.skf.skfr p{margin:0}.skf.skfr a{color:var(--tealInk)}
.skf.skfr :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}
.skf.skfr h1,.skf.skfr h2{font-family:var(--disp);line-height:1.15;margin:0;color:inherit;text-transform:none;letter-spacing:normal;text-wrap:balance}
.skf.skfr h1{font-size:clamp(calc(1.6*var(--r)),4.5vw,calc(2.1*var(--r)));font-weight:800}
.skf.skfr h2{font-size:calc(1.25*var(--r));font-weight:700}
.skf.skfr .eyebrow{font:700 calc(.78*var(--r))/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--tealInk)}
.skf.skfr .lead{color:var(--ink2)}
.skf.skfr .small{font-size:calc(.88*var(--r));color:var(--ink2)}
.skf.skfr .blk{display:block}
.skf.skfr .mono{font-family:var(--mono);font-size:.9em;letter-spacing:.02em;word-break:break-all}
.skf.skfr .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.skf.skfr .row.between{justify-content:space-between}.skf.skfr .row.end{justify-content:flex-end}
.skf.skfr .pri,.skf.skfr .ghost{display:inline-block;border-radius:11px;padding:calc(.42*var(--r)) calc(.75*var(--r));font:700 var(--r)/1.1 var(--disp);border:0;text-decoration:none;transition:transform .12s}
.skf.skfr .pri{background:var(--teal);color:#fff;box-shadow:0 3px 0 var(--tealInk)}
.skf.skfr .pri:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tealInk)}
.skf.skfr .ghost{background:var(--card);border:2px solid var(--line2);color:var(--ink)}
.skf.skfr .ghost:hover{background:#fff}
.skf.skfr .link{background:none;border:0;color:var(--tealInk);font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
.skf.skfr .link.danger{color:var(--rose)}
.skf.skfr .fl{font-weight:800;font-size:calc(.9*var(--r));display:block}
.skf.skfr .txt{font:600 var(--r) var(--body);padding:10px 12px;border-radius:12px;border:2px solid var(--line2);background:#fff;min-width:0;flex:1 1 200px;color:var(--ink);width:100%}
.skf.skfr .row .txt{width:auto}
.skf.skfr .txt.pin{flex:0 0 110px;width:110px;letter-spacing:.3em;text-align:center}
.skf.skfr .err{color:var(--rose);font-weight:700;font-size:calc(.9*var(--r))}
.skf.skfr .okmsg{color:var(--mintInk);font-weight:700}
.skf.skfr .ednote{font-size:calc(.85*var(--r));background:var(--tealSoft);border-radius:12px;padding:8px 12px}
.skf.skfr .panel{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:22px clamp(16px,4vw,32px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:900px;margin:0 auto 24px}
.skf.skfr .pc{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:14px;border-top:2px solid var(--line)}
.skf.skfr .pcrow,.skf.skfr .subj{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:8px 12px}
.skf.skfr .subj small{display:block;font-size:calc(.85*var(--r));color:var(--ink2)}
.skf.skfr .kname{display:flex;align-items:center;gap:10px}
.skf.skfr .kdot{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:calc(1.3*var(--r))}
.skf.skfr .kedit{display:grid;gap:10px;background:#fff;border-radius:14px;padding:12px}
.skf.skfr .seg{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:3px;justify-self:start}
.skf.skfr .seg button{padding:6px 14px;border-radius:999px;font-weight:700}
.skf.skfr .seg button.on{background:var(--ink);color:#fff}
.skf.skfr .kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.skf.skfr .kid{display:grid;gap:2px;justify-items:center;padding:14px 10px;border-radius:18px;border:2px solid var(--line);background:var(--kc,#fff);text-align:center}
.skf.skfr .kid .ki{font-size:calc(2.2*var(--r));line-height:1.2}
.skf.skfr .kid b{font:800 calc(1.1*var(--r))/1.1 var(--disp);overflow-wrap:anywhere}
.skf.skfr .kid.add{background:#fff;border-style:dashed}
.skf.skfr .kid.add .ki{color:var(--tealInk);font-weight:800}
.skf.skfr .icons{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;max-width:440px}
.skf.skfr .ib{font-size:calc(1.4*var(--r));padding:6px 0;border-radius:12px;border:2px solid transparent;background:#fff}
.skf.skfr .ib.on{border-color:var(--teal);background:var(--tealSoft)}
.skf.skfr .swatches{display:flex;gap:10px;flex-wrap:wrap}
.skf.skfr .sw{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line2)}
.skf.skfr .sw.on{box-shadow:0 0 0 3px var(--teal)}
.skf.skfr .privacy{border-top:2px solid var(--line);padding-top:12px}
/* boxes opened by apps */
.skf.skfr.skf-ov{position:fixed;inset:0;z-index:100002;display:grid;place-items:center;padding:16px;background:rgba(43,45,66,.45);overflow:auto}
.skf.skfr .skf-modal{background:var(--card);border-radius:22px;padding:22px;max-width:520px;width:100%;display:grid;gap:14px;border:2px solid var(--line);box-shadow:0 18px 40px rgba(43,45,66,.25);max-height:calc(100vh - 32px);overflow:auto}
.skf.skfr .skf-modal .foot{margin-top:4px}
@media (max-width:600px){.skf.skfr .icons{grid-template-columns:repeat(4,minmax(0,1fr))}.skf.skfr .kids{grid-template-columns:repeat(2,minmax(0,1fr))}.skf.skfr .skf-modal{padding:18px}}
@media print{.skf.skfr.skf-ov{display:none}}