/* 50-annotate.css — see 00-contract.css for the rules this file obeys.
   Every rule below is inside a max-width or pointer:coarse media query.

   Owns the image annotator (notes/annotate.html + annotate.css): the
   .ann-hero header, the .ann-toolbar (tools, colour, rotate, zoom) and the
   .ann-layout grid (the checkerboard .ann-stage on the left, the .ann-side
   control column on the right, already stacking to one column at 68rem —
   a start, nowhere near enough on its own at 375px).

   Jeremy's ask, verbatim: "borders have to go to use the already narrow
   full width (… also sequence and image editing)" and "menubars with too
   many items have to render using submenus." Both live here. */

/* ============================================================
   A. Full-bleed the hero and body — same reasoning as 30-sheet.css's
      section A, but .sheet--annotate is explicitly EXCLUDED from that
      file's generic .sheet rule (it is already `max-width: none; padding:
      0`, a full-bleed viewer, not a prose/table sheet) so the annotator's
      OWN chrome is this file's job. At 375px the desktop rules spend:
        .ann-hero   padding: 1.4rem 2rem 1rem   -> 2rem   (32px) each side
        .ann-body   padding: 1.2rem 2rem 2.4rem -> 2rem   (32px) each side
      Two nested 32px margins for the same edge — collapsed to the one
      --gutter-compact token below, same as every other surface.
   ============================================================ */

@media (max-width: 900px) {
  .ann-hero { padding: 1rem var(--gutter-compact) 0.7rem; }
  .ann-body { padding: 0.8rem var(--gutter-compact) 1.4rem; }

  /* The stage is the thing that must get bigger; everything else yields to
     it — its own 1rem of padding on every side is another 32px of a 375px
     screen not spent on the image, and 72vh of stage height leaves too
     little room to scroll down to the side panel's sliders on a phone
     where .ann-layout has already stacked to one column. */
  .ann-stage { padding: 0.6rem; min-height: 14rem; max-height: 62vh; }

  /* Vertical rhythm can afford to be tighter once the two columns have
     stacked — there is no horizontal gap left to preserve. */
  .ann-layout { gap: 0.9rem; }
}

@media (max-width: 600px) {
  .ann-stage { padding: 0.4rem; max-height: 56vh; }

  /* Drop each side panel's own card chrome so its controls run edge to
     edge with the (already collapsed) .ann-body gutter, instead of being
     boxed in a second time inside it. A bottom rule replaces the border as
     the only remaining separator between stacked panels — removing the
     border outright with nothing in its place would run "Image",
     "Selected" and "Scale calibration" together with no seam at all. */
  .ann-side .ann-panel {
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .ann-side .ann-panel:last-child { border-bottom: none; }
}

/* ============================================================
   B. The toolbar's secondary controls into a disclosure — annotate.css's
      unconditional `.ann-more, .ann-more__panel { display: contents }` and
      `.ann-more__summary { display: none }` are what keep the desktop
      toolbar exactly as it always was; the rules below are what turn that
      inert wrapper into a real, working <details> panel once the compact
      tier makes room for it. Below 900px the toolbar would otherwise be
      the 8 drawing tools AND 9 colour swatches AND the output size AND a
      zoom slider, all wrapping across several rows above an already-small
      stage — Jeremy's "menubars with too many items have to render using
      submenus," applied literally. Only .ann-tools (select, label, arrow,
      line, rect, ellipse, scalebar, crop) stays on the always-visible row:
      those are the one-tap actions; everything else is one tap deeper.
   ============================================================ */

@media (max-width: 900px) {
  .ann-more {
    display: block;
    position: relative;
    flex: none;
  }
  /* Strip the browser's own disclosure-triangle chrome, same as
     app.css's .docbar__menu > summary — this menu follows that idiom, not
     a bespoke one. */
  .ann-more__summary {
    display: inline-flex;
    list-style: none;
    cursor: pointer;
  }
  .ann-more__summary::-webkit-details-marker { display: none; }
  .ann-more__summary::marker { content: ""; }
  .ann-more[open] > .ann-more__summary {
    background: var(--surface-2);
    color: var(--ink);
  }

  /* Anchored to its own right edge for the same reason .docbar__menu-panel
     is: this trigger sits at the right-hand end of the toolbar, so a
     left-anchored panel would open outwards past the edge of the window. */
  .ann-more__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 60;
    max-width: calc(100vw - 2 * var(--gutter-compact));
    padding: 0.7rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
  }
  /* Each group (colour / rotate / zoom) wraps within the panel on its own
     row rather than the panel growing wider than the viewport allows. */
  .ann-more__panel .ann-swatches,
  .ann-more__panel .ann-rotate,
  .ann-more__panel .ann-zoom { flex-wrap: wrap; }
}

/* ============================================================
   C. Touch — hit areas only, never layout (00-contract.css's rule for this
      query): an iPad in landscape matches `pointer: coarse` at 1024px,
      well above the 900px tier, and must keep the desktop grid/toolbar
      layout while still getting fingertip-sized controls.

      .ann-tool and .ann-swatch are bespoke controls, not .btn/.icon-btn,
      so they are NOT already covered by 30-sheet.css's `.sheet .icon-btn` /
      `.btn` rules (which do reach the header's undo/redo, the rotate
      buttons and the "More" toggle for free, since all three sit inside
      .sheet--annotate and use the shared classes — nothing to repeat here).
   ============================================================ */

@media (pointer: coarse) {
  /* flex-wrap is a defensive net, not the point of this query: raising 8
     tool buttons or 10 colour swatches to a 44px box can genuinely no
     longer fit one row on a 375px phone (8 × 44px alone is 352px, before
     gaps, in a toolbar with roughly 300px to spend) — letting the row wrap
     instead of overflow is what keeps the page-level "never scroll
     horizontally" invariant true once the buttons are this much bigger. On
     an iPad landscape toolbar, which has the width to spare, nothing here
     ever actually wraps. */
  .ann-tools,
  .ann-swatches,
  .ann-rotate { flex-wrap: wrap; }

  .ann-tool {
    width: var(--tap);
    height: var(--tap);
  }
  .ann-tool svg { width: 1.3rem; height: 1.3rem; }

  .ann-swatch {
    width: var(--tap);
    height: var(--tap);
  }

  /* The layer list is how an object with no visible handles at the current
     zoom (or one hidden under another shape) gets selected on a device
     with no hover and no right-click — each row needs a genuine tap
     target, not just enough line-height to read the name. */
  .ann-layer { min-height: var(--tap); }

  /* The zoom slider is 6rem/96px of track carrying the one drag gesture in
     the whole toolbar that ISN'T on the stage itself — a bare native thumb
     on that short a track is a fingertip's worth of imprecision away from
     missing entirely. Re-skinned only under coarse pointers; the desktop
     mouse gets the plain native control it always has. Declared once per
     vendor prefix rather than combined into one selector list: an engine
     that does not recognise ::-moz-range-thumb historically drops the
     WHOLE rule a comma-separated selector appears in, not just its own
     branch, which would silently take the ::-webkit-slider-thumb rule down
     with it. */
  #ann-zoom {
    width: 8rem;
    height: var(--tap);
    /* WebKit/Blink and Firefox both need the native track/thumb chrome
       switched off before a custom thumb size takes effect at all. */
    appearance: none;
    -webkit-appearance: none;
    background: none;
  }
  #ann-zoom::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--rule);
  }
  #ann-zoom::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-pop);
    /* WebKit centres a ::-webkit-slider-thumb on the track using the
       thumb's own height and the track's, not automatically — half the
       difference between the two is the standard centering offset. */
    margin-top: calc((4px - 1.7rem) / 2);
  }
  #ann-zoom::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--rule);
  }
  #ann-zoom::-moz-range-thumb {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-pop);
  }
}