/* Build 1243 — Next Gen Reports shell. Author: Gildas Guefack.
   One reading and typing experience for every report module (End of Well Report, BSEE, SWP, HAZOP close out, Fluid
   Rollover, Trip): the report header locks under the app bar while the page scrolls, a section rail shows which part
   of the step is on screen, tables track the row and column under the hand, and small cells open an edit pad with the
   value large, its label, unit and place. Everything reads from the theme tokens; nothing here names a colour. */

/* ---------------------------------------------------------------- locked report header */
.ngr-stick{position:sticky;top:var(--mc-head-h,var(--nav-h,64px));z-index:24;margin:0 -16px;padding:10px 16px 0;
  background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  border-bottom:1px solid transparent;transition:box-shadow .22s,border-color .22s,padding .22s;}
.ngr-stick.is-stuck{border-bottom-color:color-mix(in srgb,var(--line) 85%,transparent);
  box-shadow:0 10px 30px -18px color-mix(in srgb,var(--ink) 35%,transparent);}
.ngr-stick>*{margin-left:0!important;margin-right:0!important;}
/* compact once it is stuck: the title shrinks, the meta line and the caption give way to the current section */
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head{margin-bottom:8px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .eow-ttl{font-size:15px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .eow-back{padding:5px 9px;font-size:12px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .mod-badge{display:inline-block;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-meta{display:none;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-steps{margin-top:0;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-rail{padding-bottom:6px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-chip{padding:6px 11px;font-size:12px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-chip .cn{width:19px;height:19px;font-size:10.5px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick .eow-cap{margin-bottom:10px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-cap{margin-bottom:8px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .toprow{margin-bottom:8px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .toprow h2{font-size:16px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .steps{margin-bottom:8px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .steps .s{padding:7px 10px;min-width:0;font-size:12.5px;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick .xfer-bar,.ngr-stick #draftBar,.ngr-stick #tripDraftBar{display:none!important;}
/* where you are inside the step: shown in the caption line, strongest once the header is stuck */
.ngr-where{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--muted);}
.ngr-where:before{content:"›";opacity:.6;}
.ngr-where b{color:var(--ink);font-weight:700;}
.ngr-where:empty{display:none;}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-cap .eow-pct{display:none;}
@media(max-width:640px){
  .ngr-stick{margin:0 -16px;padding:8px 16px 0;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head{gap:6px 8px;margin-bottom:6px;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .mod-badge,:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .eow-back~.eow-back{display:none;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-steps .eow-rail{padding-bottom:4px;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-cap{margin-bottom:6px;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .eow-back{font-size:0;padding:6px 9px;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .eow-back:before{content:"‹";font-size:15px;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-head .eow-ttl{font-size:14px;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-chip .cl{display:none;}
  :is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .eow-chip.active .cl{display:inline;}
}
/* a scroll the page asks for (jump to a section, the next field) lands below the locked header */
html.ngr-on{scroll-padding-top:calc(var(--mc-head-h,64px) + var(--ngr-stick-h,0px) + 12px)!important;}

/* ---------------------------------------------------------------- section rail (scroll spy) */
.ngr-rail{position:fixed;right:max(10px,calc((100vw - 1180px) / 2 - 170px));top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-height:60vh;overflow:hidden;padding:6px 0;pointer-events:none;}
.ngr-rail button{pointer-events:auto;display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:9px;border:0;background:transparent;color:var(--muted);
  font:600 11.5px var(--font,inherit);letter-spacing:.01em;padding:5px 6px;border-radius:9px;cursor:pointer;text-align:right;max-width:230px;margin-left:auto;
  transition:color .15s,background .15s;}
.ngr-rail button i{flex:none;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--line) 80%,var(--muted));transition:.18s;}
.ngr-rail button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateX(4px);transition:.18s;padding:3px 8px;border-radius:7px;background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--shadow-sm,0 4px 14px -8px rgba(0,0,0,.3));}
.ngr-rail:hover button span,.ngr-rail button.on span{opacity:1;transform:none;}
.ngr-rail button.on{color:var(--ink);}
.ngr-rail button.on i{background:var(--blue);width:9px;height:9px;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent);}
.ngr-rail button:hover{background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--ink);}
@media(max-width:1280px){.ngr-rail{display:none;}}

/* ---------------------------------------------------------------- cards: know which block you are in */
.ngr-screen .card{scroll-margin-top:calc(var(--mc-head-h,64px) + var(--ngr-stick-h,0px) + 14px);transition:border-color .2s,box-shadow .2s;}
.ngr-screen .card.ngr-cur{border-color:color-mix(in srgb,var(--blue) 38%,var(--line));}
.ngr-screen .card:focus-within{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 22%,transparent),var(--shadow-sm,0 6px 20px -14px rgba(0,0,0,.25));}
.ngr-screen .field:focus-within label,.ngr-screen .bs-f:focus-within label{color:var(--blue);}
.ngr-screen .bs-sec:focus-within{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));}

/* ---------------------------------------------------------------- tables: row and column tracking */
.ngr-screen .ngr-tbl{border-collapse:separate;border-spacing:0;}
.ngr-screen .ngr-tbl th,.ngr-screen .ngr-tbl td{position:relative;}
.ngr-screen .ngr-tbl tr:nth-child(even)>td{background:color-mix(in srgb,var(--ink) 2.5%,transparent);}
.ngr-screen .ngr-tbl td.ngr-col-on,.ngr-screen .ngr-tbl th.ngr-col-on{background:color-mix(in srgb,var(--blue) 6%,transparent);}
.ngr-screen .ngr-tbl tr.ngr-row-on>td{background:color-mix(in srgb,var(--blue) 7%,transparent);}
.ngr-screen .ngr-tbl tr.ngr-row-on>td.ngr-col-on{background:color-mix(in srgb,var(--blue) 14%,transparent);}
.ngr-screen .ngr-tbl th.ngr-col-on{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue);}
.ngr-screen .ngr-tbl tr.ngr-row-on>td:first-child{box-shadow:inset 3px 0 0 var(--blue);}
/* the first column (depth, action number, item) stays while the rest scrolls sideways */
.ngr-screen .ngr-tbl.ngr-pin th:first-child,.ngr-screen .ngr-tbl.ngr-pin td:first-child{position:sticky;left:0;z-index:2;
  background:var(--card);box-shadow:inset -1px 0 0 color-mix(in srgb,var(--line) 70%,transparent);}
.ngr-screen .ngr-tbl.ngr-pin tr.ngr-row-on>td:first-child{background:color-mix(in srgb,var(--blue) 9%,var(--card));box-shadow:inset 3px 0 0 var(--blue),inset -1px 0 0 color-mix(in srgb,var(--line) 70%,transparent);}
.ngr-screen .ngr-tbl td.ngr-editing input,.ngr-screen .ngr-tbl td.ngr-editing textarea{border-color:var(--blue)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)!important;}
/* numbers read as numbers */
.ngr-screen .ngr-tbl input{font-variant-numeric:tabular-nums;}
.ngr-screen .ngr-tbl input.ngr-num{text-align:right;}
/* a cell the hand can find: nothing under 40px tall on touch */
@media(pointer:coarse){
  .ngr-screen .ngr-tbl input,.ngr-screen .ngr-tbl textarea,.ngr-screen .ngr-tbl select{min-height:44px;font-size:16px;}
  .ngr-screen .ngr-tbl input{min-width:96px;}
  .ngr-screen .field input,.ngr-screen .field select,.ngr-screen .field textarea,.ngr-screen .bs-f input,.ngr-screen .bs-f select{min-height:46px;font-size:16px;}
  .ngr-screen .eow-chip,.ngr-screen .steps .s{min-height:40px;}
  .ngr-screen .btn,.ngr-screen .bs-btn{min-height:44px;}
  .ngr-screen .bs-chip{min-height:40px;padding:8px 14px;}
}

/* ---------------------------------------------------------------- edit pad: the value, large, with its place */
#ngrPad{position:fixed;z-index:9000;width:min(380px,calc(100vw - 24px));background:color-mix(in srgb,var(--card) 96%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:16px;
  box-shadow:0 24px 60px -24px color-mix(in srgb,var(--ink) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--blue) 10%,transparent);
  padding:12px 14px 12px;display:none;color:var(--ink);font-family:var(--font,inherit);}
#ngrPad.on{display:block;animation:ngrPop .16s cubic-bezier(.22,.68,.36,.98);}
@keyframes ngrPop{from{opacity:0;transform:translateY(6px) scale(.985);}to{opacity:1;transform:none;}}
#ngrPad .np-eye{display:flex;align-items:center;gap:8px;font:750 10.5px var(--font,inherit);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);min-width:0;}
#ngrPad .np-eye b{color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#ngrPad .np-eye .np-x{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px;}
#ngrPad .np-eye .np-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);}
#ngrPad .np-lbl{font-size:14px;font-weight:700;color:var(--ink);margin:6px 0 8px;letter-spacing:-.01em;line-height:1.3;}
#ngrPad .np-lbl small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px;}
#ngrPad .np-in{position:relative;display:flex;align-items:center;}
#ngrPad .np-in input,#ngrPad .np-in textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);
  padding:12px 14px;font:600 24px 'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.01em;font-variant-numeric:tabular-nums;outline:none;}
#ngrPad .np-in textarea{font:500 16px/1.45 var(--font,inherit);min-height:110px;resize:vertical;}
#ngrPad .np-in input:focus,#ngrPad .np-in textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent);}
#ngrPad .np-in .np-u{position:absolute;right:14px;font:600 13px 'Geist Mono',ui-monospace,monospace;color:var(--muted);pointer-events:none;}
#ngrPad .np-in input.has-u{padding-right:64px;}
#ngrPad .np-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
#ngrPad .np-row .btn{min-height:40px;padding:8px 13px;font-size:13px;}
#ngrPad .np-row .np-hint{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;}
@media(pointer:coarse){#ngrPad .np-row .np-hint{display:none;}#ngrPad .np-row .btn{min-height:44px;flex:1 1 auto;justify-content:center;}}
#ngrPad.wide{width:min(560px,calc(100vw - 24px));}
#ngrPad .np-neighbors{display:flex;gap:6px;margin-top:10px;overflow:hidden;}
#ngrPad .np-neighbors span{flex:1 1 0;min-width:0;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:9px;padding:5px 8px;
  font:500 11px var(--font,inherit);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#ngrPad .np-neighbors span b{display:block;font:600 12.5px 'Geist Mono',ui-monospace,monospace;color:var(--ink);font-variant-numeric:tabular-nums;}
#ngrPad .np-neighbors span.me{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));background:color-mix(in srgb,var(--blue) 8%,transparent);}
#ngrPad .np-arrow{position:absolute;width:14px;height:14px;background:inherit;border-left:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-top:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));transform:rotate(45deg);top:-8px;left:28px;}
#ngrPad.below-anchor .np-arrow{display:block;}
#ngrPad.above-anchor .np-arrow{top:auto;bottom:-8px;transform:rotate(225deg);}
#ngrPad.sheet{left:0!important;right:0;bottom:0!important;top:auto!important;width:auto;border-radius:18px 18px 0 0;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
#ngrPad.sheet .np-arrow{display:none;}
#ngrPad.sheet .np-in input{font-size:28px;}

/* ---------------------------------------------------------------- lists in the reports workspace: a steadier read */
.rpx-table tbody tr:hover>td{background:color-mix(in srgb,var(--blue) 6%,transparent);}

/* reduced motion */
@media(prefers-reduced-motion:reduce){#ngrPad.on{animation:none;}.ngr-stick,.ngr-rail button,.ngr-rail button i,.ngr-rail button span{transition:none;}}
/* rollover / trip: the caption line their headers did not have */
.ngr-capline{display:flex;align-items:center;gap:8px;min-height:18px;margin:-8px 0 10px;font-size:12.5px;color:var(--muted);}
:is(#eowr,#bsee,#module,#trip) .ngr-stick.is-stuck .ngr-capline{margin-top:-4px;}