/* Coach Ritchie: the side tab and its panel. ONE file, linked (with ?v=) from
   every page that mounts the tab: the four week pages, index.html and
   portal.html. Added 16 Sep 2026. Until then these rules lived only in
   course.css, which index.html and portal.html do not load, so on those two
   pages the tab and panel rendered unstyled at the foot of the page. Also:
   - the phone rule now comes AFTER the tab's own rule. In course.css it came
     first, lost to `top:46%`, and stretched the tab from mid-screen to 88px
     above the bottom (about 370px tall on a phone);
   - `font:13.5px/1.45 inherit` is not valid CSS (inherit cannot sit inside the
     shorthand), so browsers dropped the whole declaration; it is spelled out.
   Checked by tools/layout-check.py. */
@media print { #cr-tab, #cr-panel { display:none !important; } }

/* Ask Coach Ritchie — side tab + panel */
#cr-tab { position:fixed; right:0; top:46%; z-index:60; background:#021937; color:#fff; border:2px solid #fc2b03; border-right:0; border-radius:8px 0 0 8px; padding:10px 9px; font:800 11px/1.25 'Segoe UI',Arial,sans-serif; text-align:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.25); }
#cr-tab span { color:#fc2b03; display:block; }
#cr-tab small { display:block; color:#9fb0c8; font-weight:600; font-size:9.5px; letter-spacing:.08em; margin-top:3px; }
#cr-panel { position:fixed; right:14px; bottom:14px; z-index:61; width:min(380px,calc(100vw - 28px)); max-height:78vh; overflow:auto; background:#fff; border:1px solid #dfe4ea; border-top:4px solid #fc2b03; border-radius:10px; box-shadow:0 10px 40px rgba(2,25,55,.3); font:14px/1.55 'Segoe UI',Arial,sans-serif; color:#555; }
#cr-panel .crh { display:flex; align-items:center; gap:10px; background:#021937; color:#fff; padding:12px 14px; }
#cr-panel .crh img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
#cr-panel .crh b { display:block; font-size:14px; } #cr-panel .crh small { color:#9fb0c8; font-size:11.5px; }
#cr-panel .crx { margin-left:auto; background:none; border:0; color:#fff; font-size:22px; cursor:pointer; line-height:1; }
#cr-panel .crb { padding:14px 16px; }
#cr-panel .crb p { margin-bottom:10px; font-size:13.5px; }
#cr-panel ol { margin:0 0 10px 18px; font-size:13.5px; } #cr-panel li { margin-bottom:5px; }
#cr-panel b { color:#021937; }

/* The chat itself, added 12 Sep 2026. Before this the panel held only the
   static advice and there was nothing to type into, which is why it was
   reported as "not active". The advice is still underneath; the conversation
   sits above it because that is what the tab promises. */
#cr-panel .crlog { max-height:38vh; overflow-y:auto; margin:0 0 10px; }
#cr-panel .crlog:empty { display:none; }
#cr-panel .crmsg { margin:0 0 8px; padding:9px 11px; border-radius:9px; font-size:13.5px; line-height:1.5;
                   white-space:pre-wrap; word-wrap:break-word; }
/* pre-wrap is safe HERE — this is a live web page, not an email. It is banned
   in the letters because Outlook renders with Word, which ignores it and melts
   a whole letter into one paragraph. */
#cr-panel .cr-you { background:#eaf0f7; color:#123; margin-left:22px; }
#cr-panel .cr-cr  { background:#f6f7f9; color:#333; border-left:3px solid #fc2b03; }
#cr-panel .cr-sys { background:none; color:#8a97a8; font-size:12.5px; padding:2px 2px 6px; }
#cr-panel .crform { display:flex; gap:6px; align-items:flex-end; margin:0 0 12px; }
#cr-panel .crform textarea { flex:1; resize:vertical; min-height:40px; border:1px solid #c8d2de;
                             border-radius:8px; padding:8px 10px; font-size:13.5px; line-height:1.45; font-family:inherit; color:#123; }
#cr-panel .crform button { border:0; background:#fc2b03; color:#fff; border-radius:8px;
                           padding:10px 14px; font-weight:700; font-size:13px; line-height:1; font-family:inherit; cursor:pointer; }
#cr-panel .crform button[disabled] { opacity:.5; cursor:default; }

@media (max-width:640px) { #cr-tab { top:auto; bottom:88px; padding:8px 7px; font-size:10px; } }