/* THE TUTORIAL (js/tutorial.js, design/77). The dim is four blocks around a hole, so the region itself stays live
   and the pointer is blocked everywhere else. Nothing here animates unless the person allows motion. */
#tut{display:none;position:fixed;inset:0;z-index:250;pointer-events:none;}
#tut.on{display:block;}
#tut .tut-block{position:fixed;background:rgba(27,29,25,.62);pointer-events:auto;}
#tut .tut-hole{position:fixed;box-sizing:border-box;border:1px solid var(--gold);pointer-events:none;
  box-shadow:0 0 0 2px rgba(201,162,39,.35);}
#tut .tut-card{display:flex;flex-direction:column;max-height:calc(100vh - 16px);overflow-y:auto;position:fixed;box-sizing:border-box;pointer-events:auto;background:var(--chrome);color:var(--ink);
  padding:10px 12px 11px;border-top:1px solid var(--chrome-lt);border-left:1px solid var(--chrome-lt);
  border-bottom:1px solid var(--chrome-dkr);border-right:1px solid var(--chrome-dkr);
  box-shadow:0 6px 22px rgba(0,0,0,.45);}
#tut .tut-body:focus-visible,#tut .tut-card:focus-visible{outline:1px dotted var(--ink);outline-offset:2px;}
#tut .tut-who{flex-shrink:0;font-family:var(--f-ui);font-size:11px;color:var(--ink-soft);margin-bottom:2px;}
#tut .tut-who:empty{display:none;}
#tut h3{flex-shrink:0;font-family:var(--f-ui);font-size:14px;margin:0 0 5px;}
#tut .tut-body{min-height:0;overflow-y:auto;font-family:var(--f-read);font-size:13px;line-height:1.5;margin:0 0 10px;}
#tut .tut-btns{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
#tut .tut-btns .mbtn{width:auto;max-width:none;}
#tut .tut-skip{font-family:var(--f-ui);font-size:11px;background:none;border:0;color:var(--ink-soft);
  text-decoration:underline;cursor:pointer;padding:2px;}
#tut .tut-skip:hover{color:var(--ink);}
@media (prefers-reduced-motion:no-preference){#tut.on .tut-card{animation:tutIn .18s ease-out;}}
@keyframes tutIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* Discovery stays distinct from the red obligation count. Review reuses the campaign's lesson text. */
.tab:has(.tut-tab-hint){position:relative;}
.tab .tut-tab-hint{position:absolute;top:0;left:0;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:11px;height:11px;border:1px solid var(--gold);border-radius:50%;
  color:var(--ink);font-size:8.5px;line-height:1;letter-spacing:0;font-weight:bold;}
@media(prefers-reduced-motion:no-preference){.tut-tab-hint{animation:tutHintPulse .8s ease-in-out 2;}}
@keyframes tutHintPulse{50%{background:var(--gold-lt);box-shadow:0 0 0 2px var(--gold-lt);}}
#tb-optpanel{max-height:calc(100vh - 80px);max-width:calc(100vw - 16px);overflow-y:auto;}
.tut-review{margin:8px 0;font-family:var(--f-ui);font-size:12px;}
.tut-review summary{cursor:pointer;}
.tut-review-lesson{margin-top:7px;padding:6px 0;border-top:1px solid var(--chrome-dk);}
.tut-review-lesson summary{line-height:1.5;}
.tut-review-status{margin-left:7px;color:var(--ink-soft);font-size:11px;}
.tut-review-lesson p{font-family:var(--f-read);font-size:13px;line-height:1.5;margin:7px 0 2px;overflow-wrap:anywhere;}
.tut-review summary:focus-visible{outline:1px dotted var(--ink);outline-offset:2px;}
/* Sitting discovery stays in the existing scrolling brief. */
#sit-tutorial { margin: 10px 0; }
#sit-tutorial summary { cursor: pointer; margin: 5px 0; }
.tut-lesson-link { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; padding: 5px 7px; margin: 3px 0; font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule, #777); cursor: pointer; }
.tut-lesson-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }