/* The shared frame for the free tools (Report Generator, Studio, Teacher Timer): one header, the site's colours and type.
   Visual overhaul checkpoint 5, 2026-10-22 (spec: CORRECTED BY CHATGPT\CP5-TOOLS-SPEC-2026-10-22.md). Only the frame and
   colours live here; every tool keeps its own controls, IDs and layout. */
.tt-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;min-height:56px;padding:8px 16px;background:#fffaf2;border-bottom:1px solid #e7e2d9;font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;color:#17324d;box-sizing:border-box}
.tt-toolbar a{color:#17324d;text-decoration:none}
.tt-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.tt-brand img{width:32px;height:32px;object-fit:contain}
.tt-toolname{font-size:16px;font-weight:750;padding-left:14px;border-left:2px solid #e7e2d9}
.tt-toollinks{display:flex;flex-wrap:wrap;gap:4px 16px;margin-left:auto;font-size:14px;font-weight:700}
.tt-toollinks a{display:inline-flex;align-items:center;min-height:36px;color:#176d64}
.tt-toollinks a:hover{text-decoration:underline}
.tt-toollinks a.tt-signin{border:2px solid #d9d2c5;border-radius:10px;padding:0 12px;color:#17324d}
.tt-toolbar a:focus-visible,.tt-tool button:focus-visible,.tt-tool a:focus-visible{outline:2px solid #17324d;outline-offset:2px}
@media(max-width:600px){.tt-toolname{padding-left:0;border-left:0;flex-basis:100%}.tt-toollinks{margin-left:0;flex-basis:100%}}

/* ---- Report & Sentence Generator Lite (body.tt-tool.tt-gen) ---- */
.tt-gen{background:#fffaf2;padding:0;font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif}
.tt-gen .app{margin:20px auto 28px;border:1px solid #e7e2d9;border-radius:16px;box-shadow:0 8px 24px rgba(23,50,77,.06)}
.tt-gen .intro{padding:22px 24px 6px}
.tt-gen .intro h1{margin:0;font-size:28px;font-weight:800;color:#17324d;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tt-gen .intro .free{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:#e5f5ef;color:#18735f;border-radius:999px;padding:4px 10px}
.tt-gen .intro p{margin:6px 0 0;color:#44566b;font-size:16px}.tt-gen .intro .guide{color:#5b6b7e;font-size:14px}
.tt-gen .student{background:#fff;border-bottom:1px solid #efebe3}
.tt-gen .field label,.tt-gen .rating label{text-transform:none;font-size:14px;color:#17324d;letter-spacing:0}
.tt-gen .field input,.tt-gen .field select,.tt-gen .rating select{min-height:44px;border-color:#e7e2d9}
.tt-gen .title{color:#17324d}
.tt-gen .rating{background:#fbf8f2;border:1px solid #e7e2d9}
.tt-gen .chip{background:#fff;border:2px solid #d9d2c5;color:#17324d;min-height:40px}
.tt-gen .teaser{background:#fffaf2;border:1px solid #e7e2d9;border-left:4px solid #f4b942;color:#44566b;font-size:14px}
.tt-gen .upgrade-grid{gap:8px 18px}
.tt-gen .upgrade-grid>div{background:none;border:0;padding:0;font-size:14px}
.tt-gen .upgrade-grid b{color:#17324d}.tt-gen .upgrade-grid span{color:#5b6b7e}
.tt-gen .upgrade-btn{background:#f4f1ea;color:#5b6b7e;opacity:1!important}
.tt-gen .btn{min-height:44px;border-radius:10px}
.tt-gen .primary{background:#e76f51;color:#fff}
.tt-gen .success,.tt-gen .outline{background:#fff;color:#17324d;border:2px solid #17324d}
.tt-gen .gray{background:#fff;color:#5b6b7e;border:2px solid #d9d2c5}
.tt-gen .report{background:#fbf8f2;border-color:#e7e2d9}
.tt-gen .report textarea{border-color:#e7e2d9;font-family:inherit}
.tt-gen .locked-report textarea{opacity:1;background:#f4f1ea}
.tt-gen .locked-field label span{color:#7a5600}
.tt-gen .foot{border-top:1px solid #e7e2d9;font-size:13px}
@media(max-width:600px){.tt-gen .app{margin:0;border-radius:0;border-left:0;border-right:0}.tt-gen .intro{padding:18px 16px 4px}.tt-gen .intro h1{font-size:24px}.tt-gen .main,.tt-gen .student{padding-left:16px;padding-right:16px}}