/* ---------------------------------------------------------------------------
   Copy review layer for KOTOHASHI.

   Loaded ONLY by the generated index-review.html, never by the live page. It
   does not touch a single one of the site's own rules: everything here is
   either its own element or a [data-rv] attribute selector, so the page under
   it still looks exactly like the page that ships. That matters, because the
   reviewer is judging Japanese in its real setting, including where the lines
   break.
   --------------------------------------------------------------------------- */

:root{
  --rv-new:#C9CFDA;        /* not looked at yet */
  --rv-edit:#C77A12;       /* text was changed */
  --rv-ok:#2A6B4B;         /* read, correct as it stands */
  --rv-note:#3C63B0;       /* comment, no change */
  --rv-panel:#1B1F29;
  --rv-ink:#D7DCE7;
}

/* ---------- the blocks ---------- */
[data-rv]{
  position:relative;
  outline:1.5px dashed rgba(97,115,184,.42);
  outline-offset:3px;
  border-radius:3px;
  cursor:text;
  transition:outline-color .15s,background .15s;
}
[data-rv]:hover{outline-color:var(--rv-note);background:rgba(97,115,184,.07)}
[data-rv][data-st="edited"]{outline:2px solid var(--rv-edit);background:rgba(199,122,18,.08)}
[data-rv][data-st="ok"]{outline:2px solid var(--rv-ok);background:rgba(42,107,75,.07)}
[data-rv][data-st="note"]{outline:2px solid var(--rv-note);background:rgba(60,99,176,.07)}
[data-rv][contenteditable="true"]{
  outline:2px solid var(--rv-note);background:#fff;
  box-shadow:0 6px 26px rgba(28,31,38,.16);cursor:text;
}
[data-rv].rv-target{animation:rvFlash 1.1s ease-out}
@keyframes rvFlash{0%{background:rgba(60,99,176,.30)}100%{background:transparent}}

/* the small status dot riding the top-left corner of a reviewed block */
[data-rv][data-st]::before{
  content:"";position:absolute;left:-11px;top:-11px;width:13px;height:13px;
  border-radius:50%;border:2px solid #fff;z-index:9;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
[data-rv][data-st="edited"]::before{background:var(--rv-edit)}
[data-rv][data-st="ok"]::before{background:var(--rv-ok)}
[data-rv][data-st="note"]::before{background:var(--rv-note)}

/* ---------- the floating toolbar over the block being edited ---------- */
#rvBar{
  position:absolute;z-index:10000;display:none;gap:6px;padding:7px;
  background:var(--rv-panel);border-radius:11px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}
#rvBar.on{display:flex}
#rvBar button{
  border:1px solid #333B4B;background:none;color:var(--rv-ink);
  border-radius:8px;padding:7px 12px;font:inherit;font-size:13px;
  cursor:pointer;white-space:nowrap;transition:.15s;
}
#rvBar button:hover{border-color:#6173B8;color:#fff}
#rvBar button.pri{background:#6173B8;border-color:#6173B8;color:#fff}
#rvBar button.ok{background:var(--rv-ok);border-color:var(--rv-ok);color:#fff}
#rvBar .sep{width:1px;background:#333B4B;margin:2px 3px}

/* ---------- the side panel ---------- */
#rvPanel{
  position:fixed;right:0;top:0;bottom:0;width:340px;z-index:9999;
  background:var(--rv-panel);color:var(--rv-ink);display:flex;flex-direction:column;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:-14px 0 40px rgba(0,0,0,.26);
}
body.rv-open #rvPanel{transform:none}
body.rv-open{padding-right:340px}

#rvToggle{
  position:fixed;right:16px;top:16px;z-index:10001;
  background:var(--rv-panel);color:var(--rv-ink);border:none;border-radius:11px;
  padding:11px 16px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
body.rv-open #rvToggle{right:356px}

#rvPanel header{padding:22px 22px 16px;border-bottom:1px solid #2A3140}
#rvPanel h2{font-size:15px;font-weight:700;letter-spacing:.04em;color:#fff;margin:0 0 4px}
#rvPanel .sub{font-size:12px;color:#7E879C;line-height:1.6}

.rv-prog{padding:18px 22px;border-bottom:1px solid #2A3140}
.rv-prog .big{font-size:30px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.rv-prog .big small{font-size:15px;color:#7E879C;font-weight:400}
.rv-track{height:6px;border-radius:3px;background:#2A3140;margin-top:10px;overflow:hidden;display:flex}
.rv-track i{display:block;height:100%}
.rv-track i.e{background:var(--rv-edit)}
.rv-track i.o{background:var(--rv-ok)}
.rv-track i.n{background:var(--rv-note)}
.rv-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:11.5px;color:#9AA3B7}
.rv-legend span{display:flex;align-items:center;gap:5px}
.rv-legend i{width:9px;height:9px;border-radius:50%;display:block}

.rv-acts{padding:16px 22px;display:grid;gap:8px;border-bottom:1px solid #2A3140}
.rv-acts button{
  width:100%;padding:11px 14px;border-radius:10px;cursor:pointer;font:inherit;
  font-size:13.5px;background:none;border:1px solid #333B4B;color:var(--rv-ink);
  transition:.15s;text-align:left;
}
.rv-acts button:hover{border-color:#6173B8;color:#fff}
.rv-acts button.pri{background:#6173B8;border-color:#6173B8;color:#fff;font-weight:700}
.rv-acts button.danger:hover{border-color:#B4232A;color:#FF9C9C}

.rv-list{flex:1;overflow:auto;padding:10px 12px 20px}
.rv-list h3{font-size:11px;letter-spacing:.14em;color:#6E7791;margin:12px 10px 8px;font-weight:700}
.rv-item{
  width:100%;text-align:left;background:none;border:none;color:#AAB2C4;
  font:inherit;font-size:12.5px;line-height:1.55;padding:9px 10px;border-radius:8px;
  cursor:pointer;display:grid;grid-template-columns:10px 1fr;gap:9px;align-items:start;
}
.rv-item:hover{background:#242A37;color:#fff}
.rv-item i{width:8px;height:8px;border-radius:50%;margin-top:6px;display:block}
.rv-item .t{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
            -webkit-line-clamp:2;-webkit-box-orient:vertical}
.rv-item .was{display:block;color:#6E7791;text-decoration:line-through;font-size:11.5px;margin-top:2px}

#rvPanel footer{padding:14px 22px;border-top:1px solid #2A3140;font-size:11px;color:#5E6779;line-height:1.6}

/* ---------- the comment box ---------- */
#rvNote{
  position:absolute;z-index:10000;display:none;width:320px;padding:12px;
  background:var(--rv-panel);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.34);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}
#rvNote.on{display:block}
#rvNote textarea{
  width:100%;height:86px;resize:vertical;border-radius:8px;padding:9px;
  border:1px solid #333B4B;background:#12151C;color:var(--rv-ink);
  font:inherit;font-size:13px;line-height:1.6;
}
#rvNote .row{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
#rvNote button{
  border:1px solid #333B4B;background:none;color:var(--rv-ink);border-radius:8px;
  padding:7px 13px;font:inherit;font-size:13px;cursor:pointer;
}
#rvNote button.pri{background:#3C63B0;border-color:#3C63B0;color:#fff}

/* ---------- toast: the only channel for "your work may not be saving" ------
   It has to be impossible to miss and impossible to dismiss by accident, so
   the bad variant is sticky and sits above everything else on the page. */
#rvToast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);
  z-index:10002;max-width:620px;padding:14px 20px;border-radius:12px;
  background:#1B1F29;color:#D7DCE7;font-size:14px;line-height:1.7;
  box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;transition:.28s;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
}
#rvToast.on{opacity:1;transform:translate(-50%,0)}
#rvToast.ok{background:#1E4634;color:#CDEBD9}
#rvToast.bad{background:#5B1A1E;color:#FFD9D9;font-weight:700}

/* a block whose source text changed since she saved work on it */
[data-rv][data-stale]{outline-style:dotted;outline-color:#B4232A}

/* the review layer must never reach the printer or a screenshot */
@media print{#rvPanel,#rvToggle,#rvBar,#rvNote,#rvToast{display:none!important}
  body.rv-open{padding-right:0}
  [data-rv]{outline:none!important;background:none!important}
  [data-rv]::before{display:none!important}}