/* ============================================================
   OKELIS portfolio review app
   Chrome only. The page styles themselves come from okelis.css.
   ============================================================ */

:root{
  --rv-bar:#0C1A33;
  --rv-line:#DDE1E8;
  --rv-accent:#E1330F;
  --rv-navy:#021849;
}

body.rv{
  margin:0;padding:0;
  background:#6F747D;
  font-family:"SF Pro Text",-apple-system,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- top bar ---------------- */
.rv-bar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:10px 18px;background:var(--rv-bar);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.28);
}
.rv-brand{display:flex;align-items:center;gap:14px;min-width:0}
.rv-brand img{height:26px;filter:brightness(0) invert(1)}
.rv-tag{
  font-size:11.5px;color:#8FA3C4;letter-spacing:.01em;white-space:nowrap;
}
.rv-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.rv-field{display:flex;align-items:center;gap:7px}
.rv-field > span{font-size:11px;color:#8FA3C4}
.rv-field select{
  appearance:none;
  background:#16274A;color:#fff;border:1px solid #2A3D66;border-radius:6px;
  font:inherit;font-size:12px;padding:6px 26px 6px 10px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' stroke='%238FA3C4' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
}
.rv-field select:hover{border-color:#3E568A}

.rv-sep{width:1px;height:22px;background:#2A3D66}

.rv-btn{
  background:#16274A;color:#DCE4F0;border:1px solid #2A3D66;border-radius:6px;
  font:inherit;font-size:12px;padding:7px 12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
}
.rv-btn:hover{background:#1D3157;color:#fff}
.rv-btn b{color:#fff;font-weight:600}
.rv-btn-solid{background:var(--rv-accent);border-color:var(--rv-accent);color:#fff}
.rv-btn-solid:hover{background:#c72c0c;border-color:#c72c0c}
.rv-btn-quiet{background:transparent;color:#9AA5B6}
.rv-btn-quiet:hover{background:rgba(255,255,255,.06);color:#fff}
.rv-dot{width:8px;height:8px;border-radius:50%;background:#5A6478}
.rv-btn-on .rv-dot{background:var(--rv-accent);box-shadow:0 0 0 3px rgba(225,51,15,.22)}

/* ---------------- hint ---------------- */
.rv-hint{
  position:sticky;top:52px;z-index:55;
  margin:0 auto;width:max-content;max-width:92vw;
  display:flex;align-items:center;gap:14px;
  background:#fff;color:#43506B;font-size:12.5px;
  padding:9px 12px 9px 16px;border-radius:8px;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transform:translateY(14px);
}
.rv-hint b{color:var(--rv-navy)}
.rv-hint button{
  background:var(--rv-navy);color:#fff;border:0;border-radius:5px;
  font:inherit;font-size:11.5px;padding:5px 10px;cursor:pointer;
}
.rv-hint[hidden]{display:none}

/* ---------------- stage ---------------- */
.rv-stage{padding:36px 0 80px;overflow-x:auto}
.rv-scaler{transform-origin:top center;width:210mm;margin:0 auto}
.rv-pages{display:flex;flex-direction:column;align-items:center;gap:14mm}
.rv-loading{color:#fff;padding:60px;font-size:14px}

/* every portfolio page becomes an annotation target */
.rv-pages .page{
  box-shadow:0 4mm 14mm rgba(0,0,0,.34);
  position:relative;
  flex:none;
}
.rv-pages .page.rv-hidden{display:none}

.rv-num{
  position:absolute;top:0;left:-16mm;width:12mm;text-align:right;
  font-size:9pt;color:rgba(255,255,255,.75);
  font-family:"SF Pro Display",sans-serif;
}

/* annotation capture layer */
.rv-layer{
  position:absolute;inset:0;z-index:20;
}
body.rv-on .rv-layer{cursor:crosshair}
body:not(.rv-on) .rv-layer{pointer-events:none}

/* markers */
.rv-pin{
  position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50% 50% 50% 2px;
  background:var(--rv-accent);color:#fff;
  font-size:11px;font-weight:600;line-height:22px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  cursor:pointer;z-index:30;pointer-events:auto;
  transform:rotate(-45deg);
}
.rv-pin span{display:block;transform:rotate(45deg)}
.rv-pin:hover{background:#fff;color:var(--rv-accent);outline:2px solid var(--rv-accent)}
.rv-pin.done{background:#5A6478}

.rv-rect{
  position:absolute;border:2px solid var(--rv-accent);
  background:rgba(225,51,15,.10);
  cursor:pointer;z-index:29;pointer-events:auto;
}
.rv-rect.done{border-color:#5A6478;background:rgba(90,100,120,.10)}
.rv-rect > i{
  position:absolute;top:-11px;left:-11px;
  width:22px;height:22px;border-radius:50% 50% 50% 2px;
  background:var(--rv-accent);color:#fff;font-style:normal;
  font-size:11px;font-weight:600;line-height:22px;text-align:center;
  transform:rotate(-45deg);
}
.rv-rect > i b{display:block;transform:rotate(45deg);font-weight:600}
.rv-rect.done > i{background:#5A6478}
.rv-drag{
  position:absolute;border:2px dashed var(--rv-accent);
  background:rgba(225,51,15,.08);z-index:28;pointer-events:none;
}

/* ---------------- composer ---------------- */
.rv-pop{
  position:absolute;z-index:80;width:300px;
  background:#fff;border-radius:10px;
  box-shadow:0 14px 44px rgba(0,0,0,.34);
  padding:12px;
}
.rv-pop[hidden]{display:none}
.rv-pop-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;color:#8590A6;margin-bottom:8px;
}
.rv-pop-head button{
  background:none;border:0;font-size:19px;line-height:1;color:#AEB6C4;cursor:pointer;padding:0 2px;
}
.rv-pop textarea{
  width:100%;border:1px solid var(--rv-line);border-radius:7px;
  font:inherit;font-size:13px;line-height:1.45;padding:9px 10px;resize:vertical;
  color:#0C1A33;box-sizing:border-box;
}
.rv-pop textarea:focus{outline:2px solid rgba(225,51,15,.35);border-color:var(--rv-accent)}
.rv-pop-row{display:flex;align-items:center;gap:8px;margin-top:9px}
.rv-pop-row input{
  flex:1;min-width:0;border:1px solid var(--rv-line);border-radius:7px;
  font:inherit;font-size:12px;padding:7px 9px;color:#0C1A33;box-sizing:border-box;
}
.rv-pop-actions{display:flex;gap:6px}
.rv-pop .rv-btn{background:#F2F4F7;border-color:var(--rv-line);color:#43506B}
.rv-pop .rv-btn:hover{background:#E7EAF0;color:#0C1A33}
.rv-pop .rv-btn-solid{background:var(--rv-accent);border-color:var(--rv-accent);color:#fff}
.rv-pop .rv-btn-solid:hover{background:#c72c0c;color:#fff}

/* ---------------- panel ---------------- */
.rv-panel{
  position:fixed;top:52px;right:0;bottom:0;width:340px;z-index:70;
  background:#fff;display:flex;flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,.24);
}
.rv-panel[hidden]{display:none}
.rv-panel-head,.rv-panel-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--rv-line);
}
.rv-panel-foot{border-bottom:0;border-top:1px solid var(--rv-line)}
.rv-panel-head strong{font-size:13px;color:#0C1A33}
.rv-panel-head button{background:none;border:0;font-size:20px;color:#AEB6C4;cursor:pointer}
.rv-panel-body{flex:1;overflow:auto;padding:6px 0}
.rv-panel-foot .rv-btn{background:#F2F4F7;border-color:var(--rv-line);color:#43506B;font-size:11.5px}

.rv-item{
  display:flex;gap:10px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid #F0F2F6;
}
.rv-item:hover{background:#F7F8FA}
.rv-item .n{
  flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--rv-accent);color:#fff;
  font-size:10.5px;font-weight:600;line-height:20px;text-align:center;
}
.rv-item.done .n{background:#5A6478}
.rv-item .b{min-width:0;flex:1}
.rv-item .m{font-size:10.5px;color:#8590A6;margin-bottom:2px}
.rv-item .t{font-size:12.5px;color:#0C1A33;line-height:1.4;word-wrap:break-word}
.rv-item.done .t{text-decoration:line-through;color:#8590A6}
.rv-empty{padding:26px 16px;font-size:12.5px;color:#8590A6;text-align:center}

/* ---------------- font switching ----------------
   The page CSS reads --display and --text, so swapping them here
   restyles all 28 pages at once. Faces must be installed locally. */
body[data-font="nhg"]{
  --display:"Neue Haas Grotesk Display Pro","SF Pro Display",sans-serif;
  --text:"Neue Haas Grotesk Text Pro","SF Pro Text",sans-serif;
}
body[data-font="pair"]{
  --display:"Neue Haas Grotesk Display Pro","SF Pro Display",sans-serif;
  --text:"SF Pro Text",sans-serif;
}
body[data-font="beatrice"]{
  --display:"Beatrice","SF Pro Display",sans-serif;
  --text:"SF Pro Text",sans-serif;
}
body[data-font="hn"]{
  --display:"Helvetica Neue",sans-serif;
  --text:"Helvetica Neue",sans-serif;
}

@media print{
  .rv-bar,.rv-hint,.rv-panel,.rv-pop{display:none !important}
  .rv-stage{padding:0}
  .rv-scaler{transform:none !important}
}