/* English Grammar Genie — only what the Genie stylesheet does not already give.
   Everything structural (.wrap, .mg-top, .mg-btn, .mg-foot) comes from
   math-genie/assets/genie.css; this file is the parts that are specific to a
   sentence being taken apart. */

.gg { --line:#dbe3ee; --ink:#11243b; --muted:#5a6b80; --navy:#001f3f; --red:#cc0000; }

/* ---- the box you type in ---- */
.gg-ask { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem;
          box-shadow:0 2px 20px rgba(0,31,63,.06); }
.gg-ask label { display:block; font-weight:700; margin-bottom:.45rem; }
.gg-ask label span { display:block; font-weight:400; font-size:.86rem; color:var(--muted); margin-top:.15rem; }
.gg-in { width:100%; box-sizing:border-box; padding:.85rem 1rem; border:1.5px solid var(--line);
         border-radius:10px; font:1.08rem/1.5 inherit; color:var(--ink); }
.gg-in:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,31,63,.09); }
.gg-row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.85rem; }
.gg-row .mg-btn { padding:.72rem 1.4rem; }

/* The examples. Not decoration: most people do not know what to type into an
   empty box, and a blank result teaches nothing. */
.gg-eg { margin-top:.9rem; font-size:.87rem; color:var(--muted); }
.gg-eg b { color:var(--ink); font-weight:600; }
.gg-eg button { background:#f3f6fa; border:1px solid var(--line); border-radius:999px;
                padding:.3rem .78rem; margin:.25rem .3rem 0 0; font:inherit; font-size:.85rem;
                color:var(--ink); cursor:pointer; }
.gg-eg button:hover { border-color:var(--navy); background:#fff; }

/* ---- a message instead of an answer ---- */
.gg-say { margin-top:1.2rem; border-radius:11px; padding:1rem 1.15rem; font-size:.95rem; line-height:1.65; }
.gg-say.ask  { background:#fff8e8; border:1px solid #ecd3a0; color:#7a5406; }
.gg-say.note { background:#eef4fb; border:1px solid #c4d7ee; color:#1d3c5f; }

/* ---- corrections ---- */
.gg-fix { margin-top:1.4rem; }
.gg-fix h2, .gg-tense h2 { font:700 1.18rem/1.3 inherit; margin:0 0 .2rem; }
.gg-fix > p.lede, .gg-tense > p.lede { color:var(--muted); margin:0 0 .9rem; font-size:.93rem; }

.gg-clean { background:#eefaf1; border:1px solid #abdfbd; border-radius:11px; padding:1rem 1.15rem;
            font-size:.97rem; color:#17703a; }
.gg-clean b { color:#10542a; }

.gg-card { background:#fff; border:1px solid var(--line); border-left:4px solid var(--red);
           border-radius:10px; padding:.95rem 1.1rem; margin-bottom:.7rem; }
.gg-card .gg-rule { display:inline-block; font:700 .7rem/1 ui-monospace,Menlo,monospace;
                    letter-spacing:.08em; background:var(--navy); color:#fff;
                    border-radius:.3rem; padding:.28rem .45rem; vertical-align:.1em; margin-right:.5rem; }
.gg-card .gg-title { font-weight:700; }
.gg-card .gg-swap { margin:.6rem 0 .5rem; font-size:1rem; }
.gg-card .gg-no { color:#9a1c1c; text-decoration:line-through; text-decoration-thickness:1.5px; }
.gg-card .gg-yes { color:#17703a; font-weight:700; }
.gg-card .gg-why { font-size:.91rem; color:var(--muted); line-height:1.65; margin:0; }

.gg-rewrite { margin-top:1rem; background:#f7faff; border:1px solid #c9dcf3; border-radius:11px;
              padding:1rem 1.15rem; }
.gg-rewrite span { display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
                   color:var(--muted); margin-bottom:.35rem; }
.gg-rewrite b { font-size:1.06rem; color:var(--ink); }

/* ---- the twelve ---- */
.gg-tense { margin-top:2rem; }
.gg-about { display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-bottom:1rem; font-size:.86rem; }
.gg-about i { font-style:normal; background:#f3f6fa; border:1px solid var(--line); border-radius:999px;
              padding:.28rem .7rem; color:var(--muted); }
.gg-about i b { color:var(--ink); font-weight:600; }

.gg-forms { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; font-size:.88rem; }
.gg-forms div { background:#fff; border:1px solid var(--line); border-radius:9px; padding:.5rem .8rem; }
.gg-forms div span { display:block; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
                     color:var(--muted); }
.gg-forms div b { font-family:ui-monospace,Menlo,monospace; font-size:.98rem; }

.gg-time { margin:1.4rem 0 .6rem; font:700 .78rem/1 inherit; letter-spacing:.13em;
           text-transform:uppercase; color:var(--red); }

.gg-t { background:#fff; border:1px solid var(--line); border-radius:11px; padding:1rem 1.15rem;
        margin-bottom:.7rem; }
.gg-t h3 { font:700 1rem/1.3 inherit; margin:0 0 .15rem; }
.gg-t .gg-use { font-size:.88rem; color:var(--muted); margin:0 0 .7rem; }
.gg-t dl { display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; margin:0; font-size:.98rem; }
.gg-t dt { font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
           padding-top:.18rem; }
.gg-t dd { margin:0; }
.gg-t dd.pos { font-weight:600; }
.gg-t .gg-caution { margin:.75rem 0 0; font-size:.87rem; line-height:1.6; color:#8a5d06;
                    background:#fff8e8; border:1px solid #ecd3a0; border-radius:8px; padding:.55rem .7rem; }

/* ---- what it does and does not check ---- */
.gg-limits { display:grid; gap:1.2rem; margin-top:2.2rem; }
@media (min-width:820px) { .gg-limits { grid-template-columns:1fr 1fr; } }
.gg-limits > div { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.25rem; }
.gg-limits h3 { font:700 .98rem/1.3 inherit; margin:0 0 .5rem; }
.gg-limits ul { margin:0; padding-left:1.05rem; font-size:.9rem; line-height:1.7; color:var(--muted); }
.gg-limits .gg-cant { border-color:#ecd3a0; background:#fffdf7; }
.gg-limits .gg-cant h3 { color:#8a5d06; }

.gg-grid { display:grid; gap:1.6rem; align-items:start; }
@media (min-width:1000px) { .gg-grid { grid-template-columns:minmax(0,1fr) 320px; } }
.gg-side { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.25rem;
           margin-bottom:1rem; }
.gg-side h2 { font:700 1rem/1.3 inherit; margin:0 0 .45rem; }
.gg-side p, .gg-side ol { font-size:.9rem; line-height:1.68; color:var(--muted); margin:0; }
.gg-side ol { padding-left:1.1rem; }

@media print { .gg-ask, .gg-eg, .gg-side, .mg-top, #site-header, .mg-foot { display:none !important; } }