/* =====================================================================
   CodeCampus v3.2.63 · Editor gutter alignment + mobile line numbers
   =====================================================================

   Two defects this file corrects, both reported by students on phones:

   1) "I type on line 4 and it appears on line 5."

      .java-line-numbers and .java-code-editor were given DIFFERENT font
      sizes, and therefore different computed line heights:

          desktop : gutter 13px/21.06px   editor 14px/22.68px
          <=820px : gutter 12px/19.44px   editor 13px/21.06px

      That is 1.62px of drift per line, every line, in both cases. The
      gutter number for line 20 sat a full line and a half above the code
      it labelled. java_ide's syncEditorScroll() copies editor.scrollTop
      to the gutter verbatim, so scrolling widened the gap instead of
      hiding it — which is why students only noticed it further down a
      file, and why it looked like the text had moved.

      The gutter must therefore share the editor's exact vertical rhythm:
      same line-height, same top padding, same box sizing. Only its
      font-size may differ, so the digits can stay visually smaller — the
      line BOX is what has to match, not the glyphs.

   2) "There are no line numbers on mobile."

      app.css hid the gutter outright below 421px, and the v2945 mobile
      workspace repeated that in fullscreen. Line numbers matter most on
      a phone, where compiler errors ("error at line 12") are the main way
      a student navigates code they cannot see all of.

   Loaded after app.css, java_syntax_v294.css and the mobile workspace
   sheets so it settles the cascade; !important is used only where the
   rules being corrected are themselves !important.
   ===================================================================== */

/* ---------------------------------------------------------------
   1 · One source of truth for the editor's vertical rhythm.
   Both the gutter and the code inherit these, so the two can never
   drift apart again the way they did across five stylesheets.
   --------------------------------------------------------------- */
.java-editor-shell{
  --cc-editor-line-height:1.62;
  --cc-editor-font-size:14px;
  --cc-editor-padding-top:13px;
}

/*
 * All three layers take the SAME resolved line box, expressed the same way.
 * Chrome rounds a unitless line-height (1.62) and an explicit length
 * (21.06px) to subtly different used values -- 21.0469 vs 21.0625 -- and a
 * 0.0156px difference per line still accumulates over a long file. Feeding
 * every layer the identical calc() removes that last source of drift.
 */
.java-code-editor,
.java-syntax-layer-v294{
  font-size:var(--cc-editor-font-size);
  line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height));
  padding-top:var(--cc-editor-padding-top);
}

/* The gutter matches the LINE BOX exactly. font-size is deliberately
   left free below; line-height is unitless so it scales from the
   editor's font-size, not the gutter's smaller one. */
.java-line-numbers{
  font-size:var(--cc-editor-font-size);
  line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height));
  padding-top:var(--cc-editor-padding-top);
  padding-bottom:40px;      /* same as the editor, so the last line can scroll level */
  box-sizing:border-box;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------
   2 · Tablets and phones. app.css shrinks the editor here; the gutter
   has to follow the same numbers rather than its own.
   --------------------------------------------------------------- */
@media (max-width:820px){
  .java-editor-shell{
    --cc-editor-font-size:13px;
    --cc-editor-padding-top:13px;
  }
  .java-line-numbers{
    font-size:var(--cc-editor-font-size);
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height));
    padding-right:7px;
  }
}

/* ---------------------------------------------------------------
   3 · Narrow phones: restore the line numbers app.css removed.
   Kept deliberately narrow so the code still gets the width it needs.
   --------------------------------------------------------------- */
@media (max-width:420px){
  .java-editor-shell{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
  }
  .java-line-numbers{
    display:block;
    width:30px;
    min-width:30px;
    max-width:30px;
    padding-left:0;
    padding-right:5px;
    overflow:hidden;
    /* Smaller digits, but the LINE BOX must stay the editor's. A unitless
       line-height would recompute from 11px and reintroduce the drift, so
       this is pinned in px: 13px x 1.62. */
    font-size:11px;
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height));
  }
  .java-code-stage-v294{
    /* Deliberately NOT grid-column:2. java_workspace_ux_v2926.css collapses
       this grid to a single track inside its container query; pinning the
       stage to column 2 then invents an empty ~152px first column, which is
       the wide blank margin students saw on their phones. Auto-placement puts
       the stage after the gutter when there is one, and first when there
       is not. */
    min-width:0;
  }
}

/* Very small phones: a touch narrower again, never hidden. */
@media (max-width:340px){
  .java-editor-shell{grid-template-columns:26px minmax(0,1fr);}
  .java-line-numbers{
    width:26px;min-width:26px;max-width:26px;padding-right:4px;
    font-size:10px;
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height));
  }
}

/* ---------------------------------------------------------------
   4 · The v2945 mobile fullscreen workspace.
   Those rules set the editor to 16px/1.55 with 12px padding and hid the
   gutter below 420px. Match the gutter to them and bring it back.
   --------------------------------------------------------------- */
@media (max-width:820px){
  .cc-java-mobile-fullscreen-v2945 .java-editor-shell{
    --cc-editor-font-size:16px;
    --cc-editor-line-height:1.55;
    --cc-editor-padding-top:12px;
  }
  .cc-java-mobile-fullscreen-v2945 .java-line-numbers{
    display:block!important;
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height))!important;
    padding-top:12px!important;
    padding-bottom:24px!important;
    box-sizing:border-box!important;
    font-variant-numeric:tabular-nums;
  }
}

@media (max-width:420px){
  .cc-java-mobile-fullscreen-v2945 .java-editor-shell{
    grid-template-columns:30px minmax(0,1fr)!important;
  }
  .cc-java-mobile-fullscreen-v2945 .java-line-numbers{
    display:block!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    padding-inline:0 4px!important;
    /* v2945 fullscreen runs the editor at 16px/1.55; take the box from the
       same variables so the two can never round differently. */
    font-size:11px!important;
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height))!important;
  }
  .cc-java-mobile-fullscreen-v2945 .java-code-stage-v294{
    /* Auto-placement, for the same reason as above. */
    min-width:0!important;
  }
}

/* ---------------------------------------------------------------
   6 · The mobile anti-zoom rule, applied consistently.

   mobile_foundation_v2941.css sets

       input,select,textarea{font-size:16px!important}

   below 820px so iOS does not zoom when a field is focused. That is
   correct and worth keeping -- but .java-code-editor IS a textarea while
   the highlight overlay is a <pre>, so only the editor grew. The result on
   every phone:

       editor (invisible text, holds the caret) : 16px -> 9.60px per char
       overlay (the coloured text you SEE)      : 13px -> 7.80px per char

   1.8px of horizontal slip per character. By column 20 the text a student
   sees sits almost 4 characters away from the caret that edits it, so
   deleting "the character I am pointing at" removes a different one. This
   is why the corruption was reported on phones and not on desktop.

   The fix keeps the 16px (the zoom guard still works) and gives the SAME
   16px to the overlay, so all three layers share one grid again.
   --------------------------------------------------------------- */
@media (max-width:820px){
  .java-editor-shell{
    --cc-editor-font-size:16px;
  }
  /* Match the editor exactly, and beat the !important rules that created
     the mismatch in the first place. */
  .java-code-editor,
  .java-syntax-layer-v294{
    font-size:var(--cc-editor-font-size)!important;
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height))!important;
    padding-top:var(--cc-editor-padding-top)!important;
    letter-spacing:normal!important;
    font-family:"Cascadia Code","JetBrains Mono",Consolas,monospace!important;
    tab-size:4!important;
  }
  .java-line-numbers{
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height))!important;
    padding-top:var(--cc-editor-padding-top)!important;
  }
}

/* =====================================================================
   7 · The container query that actually hid the gutter (v3.2.65)
   =====================================================================

   .java-ide declares `container-type:inline-size; container-name:java-workspace`
   in java_workspace_ux_v2926.css, and that file then hides the line numbers:

       @container java-workspace (max-width: 430px){
         .java-editor-shell{ grid-template-columns:1fr!important; }
         .java-line-numbers{ display:none!important; }
       }

   A container query is not a media query, so none of the @media rules above
   ever competed with it, and a plain `display:block` loses to `!important`
   regardless. On a real phone the workspace container is under 430px, so the
   gutter stayed hidden on the live site even after v3263 — exactly what the
   student's screenshot showed.

   The blank margin beside the code had a second cause. With the grid collapsed
   to a single track by the rule above, the stage's `grid-column:2` (mine, in
   section 3) forced an implicit second column, and the browser sized the empty
   first one at ~152px. That pin is now gone, and this block restores both the
   gutter and a real two-track grid at the same breakpoint.
   ===================================================================== */
@container java-workspace (max-width: 430px){
  .java-editor-shell{
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
  }
  .java-line-numbers{
    display:block!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    padding-left:0!important;
    padding-right:5px!important;
    font-size:11px!important;
    line-height:calc(var(--cc-editor-font-size) * var(--cc-editor-line-height))!important;
    padding-top:var(--cc-editor-padding-top)!important;
    overflow:hidden!important;
  }
  .java-code-stage-v294{
    min-width:0!important;
  }
}

/* Very small phones: narrower digits, still never hidden. */
@container java-workspace (max-width: 340px){
  .java-editor-shell{grid-template-columns:26px minmax(0,1fr)!important;}
  .java-line-numbers{
    width:26px!important;min-width:26px!important;max-width:26px!important;
    padding-right:4px!important;font-size:10px!important;
  }
}

/* ---------------------------------------------------------------
   5 · A hidden gutter must never leave the code stranded in a column
   that no longer exists. If any other sheet hides it, the code takes
   the full width instead of the 30px track.
   --------------------------------------------------------------- */
.java-line-numbers[hidden],
.java-line-numbers[style*="display: none"]{display:none!important;}
.java-editor-shell:has(> .java-line-numbers[hidden]){grid-template-columns:minmax(0,1fr);}