/* grid_editor_view.css -- the page grid editor's look (workspace W4).
 * Moved out of grid_core_view.html. Every rule is scoped under .ge, the editor's root
 * element, so the editor can sit inside the batch workspace without styling its tabs and
 * strip; the standalone page's html/body rule stays in that page.
 *
 * D1: this was the other half of the warm -> COOL -> warm walk. The sidebar was #24272e, the
 * buttons #39414d, the active state Tailwind's #1d4ed8, the headings #9ad, the primary a green
 * #15803d, and the status dots #4ade80/#fbbf24/#f87171 -- not one of them a token, not one of
 * them warm. All of it is tokens.css now, and the sidebar headings have the serif.
 *
 * D4 matters most HERE, because this is the one screen where a pilot is ASKED to check
 * something: a grid whose line count disagrees with the template used to shout in red
 * (#counts.bad, 2px #e33) while the review step -- where checking is the entire task -- stayed
 * calm orange. A count that does not match is the pilot's cue to look, not a failure, so it is
 * --check. The ONE thing in this file that stays red is #savestat.err, "SAVE FAILED -- nothing
 * was written", because that is a pilot who is genuinely stopped.
 */
 .ge{display:flex;height:100%}
 .ge #side{width:250px;background:var(--panel);padding:10px;box-sizing:border-box;overflow:auto;flex:none}
 .ge #stage{flex:1;position:relative;min-width:0;min-height:0}
 .ge #cv{position:absolute;inset:0;width:100%;height:100%;background:var(--stagebg);cursor:crosshair}
 .ge h3{margin:8px 0 4px;font-family:var(--serif);font-size:var(--t-help);font-weight:600;color:var(--text2)}
 .ge .row{margin:3px 0}.ge small{color:var(--muted)}
 .ge .k{display:inline-block;background:var(--panel2);border-radius:3px;padding:1px 5px;margin-right:4px;color:var(--check);font-family:var(--mono)}
 .ge #msg{margin-top:6px;color:var(--ok);min-height:16px}
 .ge #sel{background:var(--panel2);border:1px solid var(--border);border-radius:5px;padding:6px;margin-top:6px;font-family:var(--mono);font-size:12px}
 .ge #hud{padding:4px 6px;border-radius:4px;background:var(--stagebg);text-align:center;font-family:var(--mono);margin-top:4px}
 .ge #info{background:var(--panel2);border:1px solid var(--border);border-radius:5px;padding:7px;margin-top:6px;font-family:var(--mono);font-size:12px;line-height:1.5}
 .ge .warn{color:var(--check)}
 /* A3: the count guard. One block, two states -- it is the first thing in the sidebar and it
    is never absent, so 'no banner' can't be confused with 'not checked yet'. */
 .ge #livecounts{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--text);margin:6px 0 2px;letter-spacing:.2px}
 .ge #counts{border-radius:5px;padding:7px;margin-top:6px;font-family:var(--mono);font-size:12px;line-height:1.5}
 .ge #counts.ok{background:oklch(0.26 0.04 155 / 0.45);border:1px solid var(--ok);color:var(--text)}
 /* D4: "these numbers disagree with your template" is a LOOK AT THIS, not a failure. */
 .ge #counts.bad{background:var(--checkbg);border:2px solid var(--check);color:var(--text)}
 .ge #counts.idle{background:var(--panel2);border:1px solid var(--border);color:var(--muted)}
 .ge #counts .hd{display:block;font-weight:bold;font-size:12px;margin-bottom:3px}
 .ge #counts.bad .hd{color:var(--check)}
 .ge #counts b.bad{color:var(--check)}
 .ge #counts b.good{color:var(--ok)}
 /* :not(.primary) so the sidebar's generic paint does not repaint a shared component
    dropped into it -- `.ge button` is (0,1,1), the same as `button.primary`, and this
    file is linked after tokens.css, so source order alone would hand it the sidebar's
    grey. The width and margin still apply to every button, primary included. */
 .ge button:not(.primary){background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:var(--r-ctl);padding:5px 8px;cursor:pointer}
 .ge button{margin:2px 0;width:100%}
 .ge button:not(.primary):hover{background:var(--panel2);border-color:var(--text)}
 .ge button.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
 .ge .tbar{display:grid;grid-template-columns:1fr 1fr;gap:0 4px;margin:4px 0}
 .ge .backbook{display:block;color:var(--accent);text-decoration:none;margin:2px 0 6px;font-size:var(--t-body)}
 .ge .tbar button{margin:2px 0}
 .ge .fixbar button{margin:2px 0;font-size:12px;text-align:left}
 .ge button:disabled{background:var(--panel);color:var(--disabled);border-color:var(--border);cursor:not-allowed}
 .ge button:disabled:hover{background:var(--panel)}
 /* B1: auth + the step button. #auth is ALWAYS rendered -- an absent sign-in row and a signed-in
    one must not look the same. #whyoff states the reason the button is off, so a disabled
    button is never a dead end the user has to guess at. */
 .ge #auth{background:var(--panel2);border:1px solid var(--border);border-radius:5px;padding:7px;margin-top:6px;font-size:12px}
 .ge #auth input{width:100%;box-sizing:border-box;margin:2px 0;padding:4px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:3px}
 .ge #who{color:var(--ok);font-family:var(--mono);word-break:break-all}
 /* "Looks right ->": every page gets a grid check, so this is the one big button, and it is
    the app's one primary -- cream on dark, not a green of its own (D1, D2). */
 /* THE SHARED .primary CARRIES THE COLOUR (class in grid_editor_markup.html). What is
    left is the sidebar's own geometry: it is the tall one at the bottom of the rail. */
 .ge #bconfirm{font-weight:bold;margin-top:6px;padding:12px 8px;font-size:15px;height:auto}
 .ge #whyoff{font-size:var(--t-label);color:var(--check);min-height:14px;margin-top:2px}
 /* round-4 test, item 1: a grid that does not match stops the step -- the button says so before
    it is pressed, and pressing it puts the reason and the counts here. D4: that is a check, so
    the button wears --check rather than the old brown-orange of its own. */
 .ge #bconfirm.stop{background:var(--check);color:var(--bg);border-color:var(--check)}
 .ge #bconfirm.stop:hover:enabled{background:oklch(0.84 0.13 75)}
 .ge #stopmsg{margin-top:6px;padding:7px;border-radius:5px;background:var(--checkbg);border:2px solid var(--check);color:var(--text);font-size:12px;line-height:1.45}
 .ge #stopmsg[hidden]{display:none}
 .ge #stopmsg small{color:var(--text2)}
 .ge #counts{transition:box-shadow .25s ease-out}
 .ge #counts.flash{box-shadow:0 0 0 5px var(--checkbg)}
 /* round-4 test, item 2: the page the pilot just chose, at once, while its grid loads */
 .ge #gloading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
   background:var(--stagebg) center/contain no-repeat;pointer-events:none}
 .ge #gloading[hidden]{display:none}
 .ge #gloading .gl-in{background:var(--overlaybg);border:1px solid var(--border);border-radius:var(--r-ctl);padding:12px 18px;text-align:center}
 .ge #gloading .gl-t{font-family:var(--serif);font-size:15px;color:var(--text);font-weight:600}
 .ge #gloading .gl-s{font-size:12px;color:var(--muted);margin-top:3px}
 /* B2: the save outcome. FAILURE IS LOUD -- and it is the ONE red left in this file, because a
    save that did not happen is the one thing here that stops the pilot (D4). A silent failure
    would leave them believing a row exists. */
 .ge #savestat{font-size:12px;min-height:16px;margin-top:4px;padding:0;border-radius:4px}
 .ge #savestat.ok{color:var(--ok);background:oklch(0.26 0.04 155 / 0.45);border:1px solid var(--ok);padding:5px}
 .ge #savestat.err{color:var(--text);background:var(--redbg);border:2px solid var(--red);padding:5px;font-weight:bold}
 .ge #savestat.busy{color:var(--text2);padding:5px}
 .ge .lg{display:inline-block;width:22px;height:3px;vertical-align:middle;margin-right:6px}
 .ge #nopersist{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:5px;margin:5px 0;font-size:var(--t-label);color:var(--text2)}

/* ==========================================================================================
 * #31 -- THE PHONE LAYOUT. This file had no @media rule at all, and neither did workspace.css,
 * workspace.html, editor.html or review.html. At 375px `#side {width:250px}` took two thirds of
 * the screen and the canvas was an unusable black sliver: the grid check, the one step every
 * page must pass through, could not be completed on a phone. The audit calls this the only item
 * that blocks a pilot outright.
 *
 * The sidebar becomes a BOTTOM SHEET: collapsed to a peek that still carries the handle and the
 * one primary, so "look at the lines, press Looks right" needs no opening at all, and sliding up
 * to 64vh with everything else when it is wanted. The canvas owns the rest of the screen.
 * ========================================================================================== */
/* Above 760px the sidebar is a sidebar and there is nothing to open, so the handle does not
 * exist. THIS RULE MUST PRECEDE THE MEDIA QUERY: it has the same specificity as the one inside
 * it, so written afterwards it wins on source order and the sheet can never be opened -- which
 * is exactly what happened the first time, leaving sign-in and Fix photo unreachable on a
 * phone while the measurements all looked right.  */
.ge #sheet { display: none; }

@media (max-width: 760px) {
  .ge { flex-direction: column; padding-bottom: var(--ge-peek); box-sizing: border-box; }
  .ge #stage { flex: 1 1 auto; width: 100%; }
  .ge #side {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    width: auto; max-height: 64vh; padding: 8px 12px 12px;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--panel); border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0,0,0,.45);
    transform: translateY(calc(100% - var(--ge-peek)));
    transition: transform .22s ease-out;
    overflow: hidden;
  }
  .ge #side.open { transform: translateY(0); overflow: auto; }
  /* the two things that live in the peek, in this order */
  .ge #sheet { order: -3; }
  /* SIGNED OUT, THE SIGN-IN IS THE POINT OF THE SHEET. Opening it is not enough on its own:
     #auth sits below the back link, the heading, the save notice and the counts, which on a
     phone is well past the fold of a 64vh sheet. When it is what the pilot needs, it comes
     second -- under the handle, above everything else. */
  .ge #side.needauth #auth { order: -2; margin-top: 0; }
  .ge #bconfirm { order: -1; margin: 0 0 6px; padding: 10px 8px; }
  /* the handle: a full-width grab bar that says what it opens */
  .ge #sheet {
    display: block; width: 100%; min-height: 32px; margin: 0 0 6px;
    background: transparent; border: 0; color: var(--text2);
    font-family: var(--sans); font-size: var(--t-help); cursor: pointer;
  }
  .ge #sheet::before {
    content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 6px;
    border-radius: var(--r-pill); background: var(--border);
  }
  .ge #sheet[aria-expanded="true"]::after { content: " \2193"; }
  .ge #sheet[aria-expanded="false"]::after { content: " \2191"; }
}