/* discovery.css — the pass view.

   A WINDOW over the page while a discovery runs, not a takeover of it. Two reasons it stops
   where it stops: the spectrum behind it is still being written during the measuring half, and
   a screen that swallows everything makes STOP feel further away than it is. So the page stays
   there, readable around it, and nothing behind is dimmed — a scrim would say "you may not
   touch this", and the whole point is that you may.

   Nothing here is a new look. The page already has one floating surface, the context menu, and
   this takes its recipe exactly: a hairline edge, the same radius, the same shadow. Figures are
   mono with tabular figures like every other reading on the page, labels are the 10px uppercase
   of `.cap`, the buttons are `.btn` at the size the header gives them, and the scale under the
   picture is the 8px of `.ruler`. A window that invented its own type and its own greys would
   read as another program's.

   The fill is barely translucent, in the page's own range — `.osd` sits at .92, the time graph's
   note at .85. There is deliberately NO backdrop blur. A blurred backdrop over a 1040 px window
   makes the compositor re-blur everything beneath it on every frame that moves beneath it, and
   what moves beneath it is the spectrum being written during the measuring half: the cost lands
   exactly where the page is busiest. `DESIGN.md` principle 8 spends a cycle only where movement
   carries information, and a blur spends one to REMOVE information. It would also be invisible
   to any profiling of the script, being pure paint.

   What a blur was reaching for — seeing the receiver work — is answered properly below: the
   window steps aside from the band picture instead of frosting it, so the trace stays sharp and
   costs nothing. */
.dview{position:fixed; z-index:60; display:none;
       left:50%; top:50%; transform:translate(-50%, -50%);
       width:min(1040px, 88vw); max-height:84vh;
       background:rgba(16,23,30,.92); border:1px solid var(--edge); border-radius:7px;
       box-shadow:0 8px 24px rgba(0,0,0,.5);
       padding:14px 18px 12px;
       flex-direction:column; gap:11px;}

/* Placed off the band picture rather than over it. Which half that is cannot be assumed: the
   page has a wide slot above the middle row and another below it, and which one carries the
   spectrum is the operator's choice — so the window asks the document where the trace actually
   is and takes the other side. With no trace on the page at all it simply centres, which is the
   arrangement it was cut for. */
.dview.low{top:auto; bottom:16px; transform:translateX(-50%); max-height:62vh;}
.dview.high{top:16px; bottom:auto; transform:translateX(-50%); max-height:62vh;}
.dview.on{display:flex;}

/* The line that names the pass, and the two things one does with it. The name is a caption of
   the page's kind; the phase is the same type in the colour of what is live. */
.dvtop{display:flex; align-items:center; gap:12px;}
.dvname{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);}
.dvphase{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal);}
.dvspace{flex:1 1 auto;}
.dvtop .btn{padding:4px 10px; font-size:10px; letter-spacing:.1em;}
/* Same manners as the panel corner toggles, which are the page's other small dismissals. */
.dvhide{color:var(--dim2); cursor:pointer; font-size:15px; line-height:1;
        padding:1px 4px; border-radius:4px; user-select:none;}
.dvhide:hover{color:var(--ink); background:#172530;}

/* The band. One column per channel of the plan, so nothing is scaled and nothing is smoothed:
   it is a map of the band at the only resolution the band has. */
.dview #dvBand{display:block; width:100%; height:78px;}
.dvaxis{display:flex; justify-content:space-between; margin-top:-6px;
        font-family:var(--mono); font-size:8px; color:var(--dim2);
        font-variant-numeric:tabular-nums;}

/* The counts, stated the way the header states a running pass: the figure carries the reading
   and the word only says which reading it is. */
.dvnums{display:flex; align-items:baseline; gap:30px; padding-top:1px;}
.dvnums > span{display:flex; align-items:baseline; gap:7px;}
.dvnums b{font-family:var(--mono); font-size:19px; font-weight:400; color:var(--ink);
          font-variant-numeric:tabular-nums; letter-spacing:.02em;}
.dvnums i{font-style:normal; font-size:10px; letter-spacing:.14em;
          color:var(--dim); text-transform:uppercase;}
.dvnums #dvTargets{color:var(--dim);}

/* The give-up budget. It takes the page's groove — the recessed well a meter is drawn in — but
   fills it FLAT and in one colour, because it is not a level. `.track` carries a gradient and a
   peak marker precisely to say "this is a measurement of a signal"; a budget counting down is a
   different animal and must not borrow that language. Amber at a third left is the pass saying
   it is about to stop: a state, not an alarm. */
.dvgauge{position:relative; display:inline-block; width:104px; height:9px; overflow:hidden;
         border-radius:2px; background:#0b1116; border:1px solid #182430;
         box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}
.dvgauge > span{position:absolute; top:0; left:0; height:100%; width:100%; background:var(--teal);}
.dvbudget.low .dvgauge > span{background:var(--amber);}

/* What has been caught, newest first, laid out as BLOCKS that wrap rather than as rows. A catch
   is four short fields, and a row spent the whole width of the window on one of them; packed,
   the same room holds three to four times as many, and the shape it makes as it fills is the
   harvest itself. The columns are auto-filled from a minimum rather than counted, so the window
   may be any width and a narrow one simply wraps sooner.
   A tail, not the list: the list is behind this window and holds everything, and what this
   answers is whether anything is still arriving. */
.dvcatch{flex:1 1 auto; min-height:70px; overflow:hidden;
         border-top:1px solid var(--edge); padding-top:9px;
         display:grid; align-content:start;
         grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
         gap:7px 14px;}
/* A hairline on the leading edge is what makes a block a block: a box around each would be more
   ink than the readings it holds, and sixty of them would read as a grid of frames rather than
   as a harvest. */
.dvline{display:grid; grid-template-columns:auto 1fr; gap:0 7px; align-content:start;
        border-left:2px solid var(--teal); padding:0 0 0 8px; min-height:29px;}
.dvline b{grid-column:1; font-family:var(--mono); font-weight:400; font-size:13px;
          color:var(--teal); font-variant-numeric:tabular-nums; letter-spacing:.02em;}
.dvline i{grid-column:2; justify-self:start; align-self:baseline; font-style:normal;
          font-family:var(--mono); font-size:10px; color:var(--dim);
          font-variant-numeric:tabular-nums; letter-spacing:.06em;}
/* The name spans both columns under them: it is the longest field and the one the block is read
   for, so it gets the width rather than a column of its own. */
.dvline u{grid-column:1 / -1; text-decoration:none; font-size:11px; color:var(--ink);
          letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* The way back in, once the window has been put aside. The header already names what is
   running; while a pass is on and hidden, it also becomes the door. */
.mode.reopen{cursor:pointer; text-decoration:underline; text-underline-offset:3px;
             text-decoration-color:var(--teal);}