/* Drawing extract and photo editor. Outline buttons throughout; only the
   selected tool and Done in Annotate (the main action, .primary-btn) are
   filled (docs/design-rules.md 1). */
.guided-extract-editor { display: grid; gap: .85rem; min-width: 0; }
.guided-extract-editor [hidden] { display: none !important; }
.guided-extract-message { margin: 0; color: var(--muted, #526070); }
.guided-extract-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.guided-extract-toolbar .shape-choice { display: inline-flex; flex-wrap: wrap; max-width: 100%;
  border: 1px solid var(--line2, #c9cfd4); border-radius: 8px; overflow: hidden; background: transparent; }
.guided-extract-toolbar .shape-choice button,
.guided-extract-toolbar .guided-extract-undo { min-height: 42px; padding: 0 .85rem; }
.guided-extract-toolbar .shape-choice button { border: 0; border-radius: 0; background: transparent;
  color: var(--ink2, #3b4652); }
.guided-extract-toolbar .shape-choice button + button { border-left: 1px solid var(--line2, #c9cfd4); }
.guided-extract-toolbar .shape-choice button[aria-pressed="true"] { background: var(--accent);
  color: var(--btn-ink, #1c1f19); font-weight: 600; }
.guided-extract-toolbar .guided-extract-undo { min-height: 44px; }
.guided-extract-layers { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0;
  border: 1px solid var(--line, #dfe3e6); border-radius: .5rem; padding: .7rem; }
.guided-extract-layers legend { padding: 0 .3rem; font-weight: 600; }
.guided-extract-layers p { margin: 0; }
.guided-extract-layer { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
/* The locator is small and the crop is large: the locator takes a quarter of
   the width, the crop the rest. Their tops are on one line (no headings; each
   canvas has its own accessible name). The crop is shown as large as its
   space allows in its own shape (--extract-ratio, set from the crop's
   pixels), with its height capped. Annotate sits below the crop. Only the
   display follows the screen; the marks and the frozen image never do.
   Every box from the panel down may shrink (min-width 0) and the crop never
   grows past its column (max-width 100%), so a long drawing name, a wide
   picture or a long thin crop can never push it past the panel's edge. */
.guided-extract-views { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: .8rem;
  align-items: start; min-width: 0; }
.guided-extract-view { min-width: 0; max-width: 100%; }
.guided-extract-view-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.guided-extract-markup-open { min-height: 44px; font-weight: 600; }
.guided-extract-editor canvas { display: block; border: 1px solid var(--line2, #9cabb8);
  background: #fff; touch-action: none; box-sizing: border-box; }
.guided-extract-locator { width: auto; height: auto; max-width: 100%; max-height: 60vh; }
.guided-extract-stage { --extract-max-height: min(70vh, 760px); position: relative; display: block;
  width: min(100%, calc(var(--extract-max-height) * var(--extract-ratio, 1.5))); max-width: 100%;
  aspect-ratio: var(--extract-ratio, 1.5); box-sizing: border-box; }
.guided-extract-stage .guided-extract-detail { width: 100%; height: 100%; max-width: 100%; }
.guided-extract-bin { position: absolute; z-index: 2; width: 44px; height: 44px; min-height: 44px; padding: 0;
  transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--line2, #9cabb8);
  background: var(--card, #fff); color: var(--chip-fail-ink, #b3261e); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
/* Weighted by the stage so the app's "dialog input" rule cannot restyle the
   label field while Mark up is open. */
.guided-extract-stage .guided-extract-text { position: absolute; z-index: 3; width: min(14rem, 70%); min-height: 44px;
  transform: translateY(-50%); font-size: 16px; font-weight: 400; padding: .3rem .5rem; border: 2px solid #157ac4;
  border-radius: 6px; background: #fff; color: #d20d29; box-sizing: border-box; }

/* Annotate: the crop over the whole screen, the tool bar along the top edge. */
.guided-extract-editor .guided-extract-markup { position: fixed; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--page, #f6f6f6); color: var(--ink, #1c1f19); -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: none; overscroll-behavior: contain; }
.guided-extract-editor .guided-extract-markup[open] { display: flex; flex-direction: column; }
.guided-extract-markup::backdrop { background: var(--page, #f6f6f6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.guided-extract-markup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem max(.75rem, env(safe-area-inset-right)) .6rem max(.75rem, env(safe-area-inset-left));
  padding-top: max(.6rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--line2, #c9cfd4);
  background: var(--card, #fff); min-width: 0; }
.guided-extract-markup-bar .guided-extract-toolbar { flex: 1 1 auto; min-width: 0; }
.guided-extract-markup-done { min-height: 44px; min-width: 6rem; margin-left: auto; font-weight: 600; }
.guided-extract-markup > .guided-extract-message { padding: .5rem .75rem 0; }
.guided-extract-markup-frame { flex: 1 1 auto; min-height: 0; display: grid; place-items: center;
  padding: .75rem max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom))
  max(.75rem, env(safe-area-inset-left)); container-type: size; min-width: 0; overflow: hidden; }
.guided-extract-markup-frame .guided-extract-stage {
  width: min(100cqw, calc(100cqh * var(--extract-ratio, 1.5))); max-width: 100%; max-height: 100%; }

/* The pointer follows the tool, for a mouse only (a finger has no pointer).
   Pen and Eraser are small pictures with the hot spot at the tip; Text is the
   text bar; Circle, Rectangle and Arrow are a crosshair; Select is the arrow, and the
   move pointer over the selected mark. Each picture has a standard keyword
   after it, for a browser that cannot show it. */
@media (hover: hover) and (pointer: fine) {
  .guided-extract-locator { cursor: crosshair; }
  .guided-extract-editor[data-mode="annotate"] .guided-extract-detail { cursor: crosshair; }
  .guided-extract-editor[data-mode="annotate"][data-tool="select"] .guided-extract-detail { cursor: default; }
  .guided-extract-editor[data-mode="annotate"][data-tool="select"][data-over-selected="true"] .guided-extract-detail { cursor: move; }
  .guided-extract-editor[data-mode="annotate"][data-tool="text"] .guided-extract-detail { cursor: text; }
  .guided-extract-editor[data-mode="annotate"][data-tool="pen"] .guided-extract-detail {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 22l1.8-6.2L15.5 4.1a2 2 0 0 1 2.8 0l1.6 1.6a2 2 0 0 1 0 2.8L8.2 20.2z' fill='%23fff' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M2 22l1.8-6.2 4.4 4.4z' fill='%23111'/%3E%3Cpath d='M13.6 6l4.4 4.4' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") 2 22, crosshair; }
  .guided-extract-editor[data-mode="annotate"][data-tool="eraser"] .guided-extract-detail {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 3l8 8-10 10-8-8z' fill='%23fff' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6.5 9.5l8 8L11 21l-8-8z' fill='%23e8a0aa' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 7 17, cell; }
}

@media (max-width: 760px) {
  .guided-extract-views { grid-template-columns: 1fr; }
  .guided-extract-locator { max-height: 32vh; margin: 0 auto; }
  .guided-extract-stage { --extract-max-height: 60vh; }
  /* Annotate on a phone: Undo and Done share the first row and the tools sit
     under them, so the crop keeps most of the screen. */
  .guided-extract-markup-bar { gap: .4rem; padding-top: max(.4rem, env(safe-area-inset-top)); padding-bottom: .4rem; }
  .guided-extract-markup-bar .guided-extract-toolbar { display: contents; }
  .guided-extract-markup-bar .guided-extract-undo { order: 1; }
  .guided-extract-markup-bar .guided-extract-markup-done { order: 2; min-width: 4.5rem; margin-left: auto; }
  .guided-extract-markup-bar .guided-extract-tools { order: 3; width: 100%; }
  .guided-extract-view-actions .guided-extract-markup-open { flex: 1 1 auto; }
  .guided-extract-markup > .guided-extract-message { padding: .35rem .75rem 0; font-size: .9rem; }
  .guided-extract-toolbar .shape-choice button,
  .guided-extract-toolbar .guided-extract-undo { min-height: 44px; }
  .guided-extract-toolbar .shape-choice { width: 100%; }
  .guided-extract-toolbar .shape-choice button { flex: 1 1 0; padding: 0 .4rem; }
  /* Seven tools in two rows: four, then three with the last one wide, so the
     control stays a closed block. */
  .guided-extract-tools { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guided-extract-tools button:nth-child(4n + 1) { border-left: 0 !important; }
  .guided-extract-tools button:nth-child(n + 5) { border-top: 1px solid var(--line2, #c9cfd4); }
  .guided-extract-tools button:last-child { grid-column: span 2; }
}