/*! Copyright (c) 2026 Mark T. Fulwider. All rights reserved. */
/* CLASS RULES FOR AI (class-rules.js, class-page.js, study-assignment.js): the class link page, the rule cards,
   the assignment bar in Study Hall, the Turn in page and the report the teacher reads. Plain, calm, readable. */

/* ---------- Rule cards ---------- */
.rule-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:10px 0 6px}
.rule-card{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 16px 14px;border:2px solid #d6dee0;border-top:6px solid var(--rule);border-radius:6px;background:#fff;color:#14262d;text-align:left}
label.rule-card{cursor:pointer}
label.rule-card:hover{border-color:var(--rule);border-top-color:var(--rule)}
label.rule-card input{position:absolute;opacity:0;pointer-events:none}
label.rule-card:focus-within{outline:3px solid #1d6f86;outline-offset:2px}
.rule-card.is-chosen{border-color:var(--rule);box-shadow:0 0 0 2px var(--rule) inset;background:#fffdf7}
.rule-card.is-chosen::after{content:"✓ Chosen";position:absolute;top:8px;right:10px;padding:2px 8px;border-radius:10px;background:var(--rule);color:#fff;font:700 12px/1.4 Arial,sans-serif}
.rule-icon{flex:0 0 auto;display:block;width:48px;height:48px}
.rule-icon svg{display:block;width:100%;height:100%}
.rule-words{display:flex;flex-direction:column;gap:3px;min-width:0}
.rule-step{font:700 11px/1.2 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6a7d84}
.rule-title{font:700 20px/1.2 Georgia,'Times New Roman',serif;color:var(--rule)}
.rule-line{font:16px/1.4 Georgia,'Times New Roman',serif;color:#14262d}
.rule-lists{display:block;margin-top:8px}
.rule-head{display:block;margin-top:6px;font:700 12px/1.3 Arial,sans-serif;color:#3d5059}
.rule-list{list-style:none;margin:3px 0 0;padding:0;font:14px/1.45 Arial,sans-serif;color:#24363d}
.rule-list li{display:flex;gap:6px}
.rule-may span{color:#2e7a3c;font-weight:700}
.rule-not span{color:#a12f2f;font-weight:700}
.rule-card.is-small{padding:10px 12px;border-top-width:5px;align-items:center}
.rule-card.is-small .rule-icon{width:38px;height:38px}
.rule-card.is-small .rule-title{font-size:18px}

/* ---------- Will see / never see ---------- */
.see-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:12px 0}
.see-two section{padding:14px 16px;border-radius:6px;border:2px solid}
.see-yes{border-color:#9fc8a7;background:#f3faf4}
.see-no{border-color:#e1b4b4;background:#fdf5f5}
.see-two h3{margin:0 0 6px;font:700 19px/1.3 Georgia,'Times New Roman',serif;color:#14262d}
.see-two ul{list-style:none;margin:6px 0;padding:0;font:16px/1.5 Georgia,'Times New Roman',serif;color:#14262d}
.see-two li{display:flex;gap:8px;padding:3px 0}
.see-yes li span{color:#2e7a3c;font-weight:700}
.see-no li span{color:#a12f2f;font-weight:700}
.see-when{margin:4px 0;font:14px/1.45 Arial,sans-serif;color:#3d5059}

/* ---------- How it works (three steps) ---------- */
.class-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 18px;counter-reset:step}
.class-step{position:relative;padding:14px 14px 12px 58px;border:1px solid #d6dee0;border-radius:6px;background:#fff;font:15px/1.45 Georgia,'Times New Roman',serif;color:#14262d}
.class-step::before{counter-increment:step;content:counter(step);position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;background:#dbba8b;color:#0c1418;font:700 18px/34px Georgia,serif;text-align:center}
.class-step strong{display:block;margin-bottom:3px;font-size:17px}
.class-step:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:1;color:#bc8d41;font:700 20px/1 Arial,sans-serif}
@media (max-width:760px){.class-steps{grid-template-columns:1fr}.class-step:not(:last-child)::after{content:"↓";right:auto;left:22px;top:auto;bottom:-16px;transform:none}}

/* ---------- The class link page and the invitation ---------- */
.class-page h2{margin:22px 0 6px;font:700 22px/1.25 Georgia,'Times New Roman',serif;color:#14262d}
.class-page .class-lead{font:17px/1.55 Georgia,'Times New Roman',serif;color:#22343b}
.class-form{display:grid;gap:12px}
.class-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 16px}
.class-fields label,.class-form>label{display:block;font:600 14px/1.3 Arial,sans-serif;color:#26393f}
.class-fields input,.class-form textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px}
.class-fields input,.class-form textarea,.turnin-form textarea,.turnin-form select,.turnin-form input[type=text]{padding:9px 10px;border:1px solid #9fbcc4;border-radius:4px;background:#fff;font:16px/1.4 Georgia,'Times New Roman',serif;color:#111}
.class-fields .optional,.class-form .optional{font-weight:400;color:#6a7d84}
.class-checks{display:grid;gap:8px;padding:10px 12px;border:1px solid #d6dee0;border-radius:6px;background:#fbfcfc}
.class-checks label{display:flex;gap:10px;align-items:flex-start;font:16px/1.4 Georgia,'Times New Roman',serif;color:#14262d;cursor:pointer}
.class-checks input{width:18px;height:18px;margin-top:2px}
.class-big{min-height:52px;padding:12px 28px;border:2px solid #9d7434;border-radius:5px;background:#dbba8b;color:#0c1418;font:700 19px/1.2 Georgia,'Times New Roman',serif;box-shadow:0 2px 0 rgba(0,0,0,.25);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.class-big:hover{background:#efd1a5}
.class-big:focus-visible{outline:3px solid #1d6f86;outline-offset:3px}
.class-quiet{min-height:44px;padding:9px 18px;border:1px solid #9fbcc4;border-radius:5px;background:#fff;color:#14262d;font:600 16px/1.2 Georgia,'Times New Roman',serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.class-quiet:hover{border-color:#bc8d41;background:#fbf6e9}
.class-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.class-linkbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border:2px solid #9fc8a7;border-radius:6px;background:#f3faf4}
.class-linkbox input{flex:1 1 320px;min-width:0;padding:9px 10px;border:1px solid #9fbcc4;border-radius:4px;font:14px/1.3 ui-monospace,Menlo,Consolas,monospace}
.class-status{min-height:1.4em;font:15px/1.4 Arial,sans-serif;color:#2e7a3c}
.class-status.is-bad{color:#a12f2f}
.invite{padding:18px 20px;border:2px solid #dbba8b;border-radius:8px;background:#fffdf7}
.invite-kicker{margin:0;font:700 12px/1.3 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a6a2e}
.invite h2{margin:4px 0 2px;font:700 28px/1.2 Georgia,'Times New Roman',serif}
.invite-who{margin:0 0 10px;font:17px/1.4 Georgia,'Times New Roman',serif;color:#22343b}
.invite-note{margin:10px 0;padding:10px 14px;border-left:4px solid #dbba8b;background:#fff;font:16px/1.5 Georgia,'Times New Roman',serif;white-space:pre-wrap}
.invite-promise{margin:12px 0 0;font:16px/1.5 Georgia,'Times New Roman',serif;color:#14262d}

/* ---------- The assignment bar in Study Hall ---------- */
.assignment-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;padding:8px 12px;border:1px solid #d6dee0;border-left:6px solid var(--rule);border-radius:5px;background:#fffdf7;color:#14262d;font:15px/1.35 Georgia,'Times New Roman',serif}
.assignment-bar .rule-icon{width:30px;height:30px;color:var(--rule)}
.assignment-bar .bar-words{flex:1 1 260px;min-width:0}
.assignment-bar .bar-words strong{color:var(--rule)}
.assignment-bar .bar-who{display:block;font-size:13px;color:#56707a}
.assignment-bar a{white-space:nowrap}
.assignment-bar .class-big{min-height:38px;padding:6px 16px;font-size:16px}
.assignment-bar .class-quiet{min-height:38px;padding:6px 12px;font-size:15px}
html:is(.split-half,.pane-window) .assignment-bar .bar-who{display:none}

/* ---------- Turn in ---------- */
.turnin-page{max-width:980px}
.turnin-form{display:grid;gap:12px;margin:12px 0}
.turnin-form label{display:block;font:600 15px/1.3 Arial,sans-serif;color:#26393f}
.turnin-form label.turnin-check{flex-direction:row;gap:10px;align-items:flex-start;font:16px/1.4 Georgia,'Times New Roman',serif;color:#14262d}
.turnin-form label.turnin-check input{width:18px;height:18px;margin-top:2px}
.turnin-done{padding:16px 18px;border:2px solid #9fc8a7;border-radius:8px;background:#f3faf4}
.turnin-done h2{margin:0 0 6px}
.turnin-history{margin:10px 0;padding:0;list-style:none;font:15px/1.5 Georgia,'Times New Roman',serif}
.turnin-history li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #e1e7e8}
.turnin-preview{margin-top:18px;padding:6px;border:3px dashed #dbba8b;border-radius:8px;background:#fff}

/* ---------- The report ---------- */
.class-report{color:#14262d;font:16px/1.55 Georgia,'Times New Roman',serif}
.class-report h3{margin:18px 0 8px;font:700 19px/1.3 Georgia,'Times New Roman',serif}
.rep-head h2{margin:2px 0;font:700 28px/1.2 Georgia,'Times New Roman',serif}
.rep-kicker{margin:0;font:700 12px/1.3 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a6a2e}
.class-report.is-preview .rep-kicker{color:#1d6f86}
.rep-who{margin:2px 0;color:#3d5059}
.rep-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.rep-tile{padding:10px 12px;border:1px solid #d6dee0;border-radius:6px;background:#fff}
.rep-tile strong{display:block;font:700 26px/1.1 Georgia,'Times New Roman',serif}
.rep-tile span{display:block;margin-top:3px;font:13px/1.35 Arial,sans-serif;color:#3d5059}
.rep-tile.is-look{border-color:#e0c27f;background:#fff8e6}
.rep-tile.is-fine{border-color:#b9d9bf}
.rep-paper-text{padding:14px 16px;border:1px solid #d6dee0;border-radius:6px;background:#fff;white-space:pre-wrap;font:17px/1.7 'Times New Roman',Times,serif}
mark.rep-match{background:#ffe7a3;color:inherit;border-bottom:2px solid #d39b1f;padding:0 1px}
.rep-legend{margin:0 0 8px;font:14px/1.4 Arial,sans-serif;color:#3d5059}
.rep-chat{margin:6px 0;padding:6px 10px;border:1px solid #d6dee0;border-radius:6px;background:#fff}
.rep-chat summary{cursor:pointer;padding:4px 0}
.rep-chat summary span{font:13px Arial,sans-serif;color:#56707a}
.rep-turn{margin:6px 0;padding:6px 10px;border-radius:5px;white-space:pre-wrap}
.rep-turn.is-student{background:#eef5f7}
.rep-turn.is-ai{background:#f6f3ec}
.rep-turn b{margin-right:6px}
.rep-reflect blockquote{margin:0;padding:10px 14px;border-left:4px solid #1d6f86;background:#fff;white-space:pre-wrap}
.rep-sources ul{margin:0;padding-left:20px}
.rep-url{font:13px ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.rep-none{color:#6a7d84;font-style:italic}
.rep-fine{margin:16px 0 0;padding:10px 12px;border-top:1px solid #d6dee0;font:14px/1.5 Arial,sans-serif;color:#3d5059}

/* ---------- A short message ---------- */
#class-rule-say{position:fixed;left:50%;bottom:24px;z-index:2147483000;max-width:min(560px,calc(100vw - 32px));padding:12px 18px;border-radius:6px;background:#14262d;color:#fff;font:16px/1.4 Georgia,'Times New Roman',serif;box-shadow:0 8px 24px rgba(0,0,0,.3);transform:translate(-50%,140%);opacity:0;transition:transform .25s,opacity .25s;pointer-events:none}
#class-rule-say.is-on{transform:translate(-50%,0);opacity:1}

.turnin-form select,.turnin-form textarea,.turnin-form input[type=text]{display:block;width:100%;box-sizing:border-box;margin-top:5px}
/* Inside a sheet, keep the tick boxes beside their words and "(optional)" on the same line. */
.class-page .class-checks label{display:flex}
.class-page .class-checks label input,.turnin-form label.turnin-check input{display:inline-block;flex:0 0 auto;width:18px;height:18px;margin:3px 0 0}
.class-page label .optional{display:inline}
/* Links that are buttons keep the button look inside a sheet. */
.class-page a.class-big,.assignment-bar a.class-big,.class-page a.class-big:visited{color:#0c1418!important;text-decoration:none!important}
.class-page a.class-quiet,.class-page a.class-quiet:visited{color:#14262d;text-decoration:none}
/* Check the AI rule (Mark, 28 October 2026): one press, the teacher's own AI. */
.class-report .rep-check{margin:18px 0;padding:16px 18px;border:1px solid #d1a56a;border-left:4px solid #d1a56a;background:#fffaf1;border-radius:4px}
.class-report .rep-check h3{margin:0 0 6px}
.class-report .rep-check p{margin:0 0 10px}
.class-report .rep-check-row{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 10px}
.class-report .rep-check-ai{padding:9px 18px;border:1px solid #1c3340;border-radius:4px;background:#1c3340;color:#fff;font:600 15px/1.2 Georgia,'Times New Roman',serif;cursor:pointer}
.class-report .rep-check-ai:hover{background:#2b4b5c}
.class-report .rep-check-say{font-weight:600;color:#1c3340}
.class-report .rep-check-say:empty{display:none}
.class-report .rep-check-text{width:100%;min-height:140px;font:13px/1.4 ui-monospace,Consolas,monospace}