/* The raise strip. One component on two grounds: it takes whichever token family the page it is
   mounted on defines -- the console's --surface/--green/--ui, or the world room's --g-1/--held/
   --disp -- and keeps the product's shapes on both.

   One line and one bar. The bar is a canvas milled in the house pixel set by raise-bar.js -- same
   unit, same dithered green ramp and pressed shadow as the Behavior graph -- so the only thing this
   file gives it is a box to fill. Every cell it lights is derived from rows done, never from
   the clock: a real build always stalls late, and a fill driven by elapsed time runs ahead of the
   work and then sits still exactly where it matters. strip.test.mjs asserts that. */

/* No box. The strip sat in a bordered card inside the room's own panel, so the customer read two
   nested frames around one bar; it belongs to the surface it is on. */
.rstrip{display:block;color:var(--ink);margin:0 0 18px;font-family:var(--ui,var(--disp))}
/* Before either call has answered there is no build to report, so there is no bar. A dimmed empty
   shape is a picture of a bar, and it popped into life when the first event landed. It enters when
   it has a number to show, and from then on it fills in place and never blinks again. */
.rstrip[data-skeleton]{display:none}
.rstrip .rtop{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.rtitle{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* Edge to edge under the line, the way the journey's rail sits under its segments: progress starts
   where the strip starts. The canvas mills itself at the width this box gives it. */
.rrail{display:block}
.rbar{display:block;width:100%;height:18px;image-rendering:pixelated}

/* Why this step exists: under the title on hover or focus, drawn from the page. */
.rstrip .rtop{position:relative;flex-wrap:wrap}
.rtitle{cursor:default;outline:none}
.rtitle:focus-visible{box-shadow:0 2px 0 var(--green,var(--held))}
.rtime{font-size:12px;color:var(--ink-3)}
.rtip{font-size:12px;color:var(--ink-2)}
/* What is done and what is on now, under the bar. */
.rdone{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:90ch}

.rghost{appearance:none;border:0;background:none;padding:0;margin:0 0 10px;font:inherit;font-size:12.5px;color:var(--ink-3);cursor:pointer}
.rghost:hover{color:var(--ink)}

/* A world that came up stops taking the room. */
.rstrip[data-shut]{display:none}

.rnote{font-size:13px;color:var(--ink)}
.rnote p{margin:8px 0 0}

/* Terminal. It keeps every finished row on the page and leads with them, so the work that was real
   still reads as real. No error styling: a red panel is a verdict on the customer's repository. */
.rterm{margin:11px 0 0;border-top:1px solid var(--line);padding:11px 0 0}
.rdid{margin:0 0 5px;font-size:12.5px;color:var(--ink-2)}
.rwhy{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink)}
.rfix{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:11px}
.rfix label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-3);min-width:220px;flex:1}
.rfix input{border:1px solid var(--line-2);background:var(--page,var(--g-2));color:var(--ink);
            padding:7px 9px;font:inherit;font-size:13px;outline:none}
.rfix input:focus{border-color:var(--green,var(--held))}
.racts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rgo{border:0;background:var(--green,var(--held));color:#FFFFFF;font-weight:600;
     font-size:12.5px;padding:8px 13px;cursor:pointer}
.rgo:disabled{background:var(--line-2);cursor:default}
.rlog{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);cursor:pointer}
.rlog:hover{color:var(--ink)}
.rlines{margin:10px 0 0;padding:9px 10px;background:var(--raised,var(--g-2));font-family:var(--mono);
        font-size:11px;line-height:1.6;color:var(--ink-2);max-height:220px;overflow:auto;white-space:pre-wrap}
.rerr{margin:8px 0 0;font-size:12.5px;color:var(--red,var(--broke))}
.rfound{margin:9px 0 0;font-size:12.5px;color:var(--ink-3)}
.rfound a{color:var(--green-d,var(--held));font-weight:500}
.rfound a:hover{text-decoration:underline}

@media(max-width:640px){.rstrip{margin-bottom:12px}}
/* The start field inside the failure card: the connect step's own component, one press to accept. */
.rfix .startfield{border-top:0;padding-top:0}
.rfix .startrow input{font:500 12px var(--mono);color:var(--ink);background:var(--page,var(--g-2));border:1px solid var(--line-2);border-radius:6px;padding:7px 9px}
.rfix .startcmd{flex:1 1 240px;min-width:0}.rfix .startdir{flex:0 1 160px;min-width:0}
.rfix .startin,.rfix .startfrom,.rfix .startalt-lbl{font-size:11.5px;color:var(--ink-3)}.rfix .startfrom{margin:0}
.rfix .startalts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rfix .startalt{appearance:none;font:500 11.5px var(--mono);color:var(--ink-2);background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer}
.rfix .startfoot{display:flex;align-items:center;gap:10px}