/* Shared look for the interactive lesson companions. Each tool may add its own styles in its script. */
.tk-app{margin-top:6px}
.tk-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tk-tabs::-webkit-scrollbar{display:none}
.tk-tab{flex:none;display:flex;align-items:center;gap:8px;font:600 15px var(--sans);color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .2s}
.tk-tab:hover{color:var(--ink);border-color:var(--sage)}
.tk-tab.on{background:var(--sage);border-color:var(--sage);color:#fff}
.tk-tabi{font-size:18px;line-height:1}
.tk-panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 10px 30px rgba(30,40,35,.06)}
.tk-in{animation:tkin .35s ease both}
@keyframes tkin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tk-panel h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.2;margin-bottom:6px}
.tk-panel h3{font-size:19px;margin:22px 0 8px}
.tk-sub{color:var(--muted);margin-bottom:18px}
.tk-btn{font:600 16px var(--sans);border:0;border-radius:999px;padding:12px 22px;cursor:pointer;background:var(--sage);color:#fff;transition:transform .15s,box-shadow .15s}
.tk-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(79,122,102,.25)}
.tk-btn.soft{background:var(--sage-soft);color:var(--ink)}
.tk-btn.lav{background:var(--lav);color:#fff}
.tk-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.tk-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.tk-chip{font:500 15px var(--sans);border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;transition:all .15s}
.tk-chip:hover{border-color:var(--sage)}
.tk-chip.on{background:var(--sage-soft);border-color:var(--sage);font-weight:600}
.tk-input,.tk-panel textarea,.tk-panel input[type=text],.tk-panel input[type=tel],.tk-panel input[type=email],.tk-panel input[type=number],.tk-panel input[type=time],.tk-panel input[type=date]{font:17px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.tk-panel textarea{min-height:90px;resize:vertical}
.tk-panel input[type=range]{width:100%;accent-color:var(--sage)}
.tk-panel label{display:block;font-weight:600;margin:14px 0 6px}
.tk-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:18px}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tk-empty{color:var(--muted);text-align:center;padding:24px;border:1px dashed var(--line);border-radius:18px}
.tk-hist{margin-top:22px}
.tk-hist .tk-card{margin-top:10px}
.tk-del{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px}
.tk-saved{font-size:14px;color:var(--muted);margin-top:18px;text-align:center}
.tk-saved a{color:var(--sage)}
.tk-lesson{display:inline-block;margin-top:16px;font-size:15px;color:var(--sage);font-weight:600}
.tk-chart{width:100%;height:auto;display:block;margin-top:10px}
.tk-chartl{font:13px var(--sans);fill:var(--muted)}
.tk-burst{position:absolute;z-index:90;pointer-events:none;color:var(--c);font-size:18px;animation:tkb 1.2s ease-out forwards}
@keyframes tkb{to{transform:translate(var(--dx),var(--dy)) rotate(200deg);opacity:0}}
.tk-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:15px;z-index:95;transition:all .3s;pointer-events:none}
.tk-toast.on{transform:translate(-50%,0);opacity:1}
@media (max-width:620px){.tk-panel{padding:20px 16px;border-radius:20px}.tk-panel h2{font-size:25px}}
@media print{.tk-tabs,.tk-btn,.tk-del,.tk-saved{display:none!important}.tk-panel{border:0;box-shadow:none;padding:0}}
@media (prefers-reduced-motion:reduce){.tk-in{animation:none}}

/* dark mode: light sage buttons need dark text */
@media (prefers-color-scheme:dark){.tk-btn,.tk-tab.on{color:#15171c}.tk-btn.lav{color:#15171c}}
/* celebration sparkles must never widen the page */
body{overflow-x:clip}