/* Tools, Undo and Clear on one row; the key beside them when it fits, under them
 * when it does not. Two rows at most for a usual key, so the map keeps its room. */
.me-mark-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
}

.me-mark-tools,
.me-mark-toolset,
.me-mark-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.me-mark-toolset { margin-right: .5rem; }

.me-tool,
.me-key-chip,
.me-key-add,
.me-mark-btn,
.me-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .25rem .8rem;
    border: 2px solid var(--maths-border);
    border-radius: 10px;
    background: #fff;
    color: var(--see-ink);
    font-family: 'Nunito', sans-serif;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    touch-action: manipulation;
}

.me-tool[aria-checked="true"],
.me-panel-btn.is-primary {
    background: var(--see-accent);
    border-color: var(--see-accent);
    color: #fff;
}

.me-key-chip[aria-checked="true"] {
    border-color: var(--see-ink);
    box-shadow: inset 0 0 0 2px var(--see-ink);
}

.me-key-swatch {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, .25);
}

.me-key-add {
    border-style: dashed;
    color: var(--maths-ink-muted);
}

.me-mark-btn:disabled {
    opacity: .45;
    cursor: default;
}

.me-tool:focus-visible,
.me-key-chip:focus-visible,
.me-key-add:focus-visible,
.me-mark-btn:focus-visible,
.me-panel-btn:focus-visible,
.me-mk-pin:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

/* What is being drawn and what to do next. It floats over the top of the map, so
 * the map never moves under a finger halfway through a line. */
.me-mark-panel {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: max-content;
    max-width: calc(100% - 36px);
    padding: .35rem .5rem;
    border: 2px solid var(--see-bright);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* Only its controls take a tap; the rest of it lets taps through to the map. */
.me-mark-panel { pointer-events: none; }
.me-mark-panel button,
.me-mark-panel input { pointer-events: auto; }

.me-mark-panel.is-low {
    top: auto;
    bottom: 18px;
}

.me-panel-text {
    padding: 0 .3rem;
    font-weight: 800;
    color: var(--see-ink);
}

.me-mark-panel input {
    width: 15em;
    max-width: 60vw;
    min-height: 44px;
    padding: .2rem .6rem;
    border: 2px solid var(--maths-border);
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    color: var(--maths-ink);
}

/* Lines and areas, in the image's own 0-100 frame. Widths are screen pixels at
 * every zoom: --see-inv undoes the map's scale, the way it keeps a pin 44px. */
.me-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.me-ink polyline,
.me-ink polygon {
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.me-ink .ink-halo { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: calc(10px * var(--see-inv, 1)); }
.me-ink .ink-line { fill: none; stroke-width: calc(5px * var(--see-inv, 1)); }
.me-ink .ink-area { fill-opacity: .3; stroke-width: calc(3px * var(--see-inv, 1)); }
.me-ink .is-draft { stroke-dasharray: calc(10px * var(--see-inv, 1)) calc(6px * var(--see-inv, 1)); }
.me-ink .ink-hit { fill: none; stroke: transparent; stroke-width: calc(30px * var(--see-inv, 1)); }
.me-ink .is-sel { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)); }

/* Select: a tap on a line or inside an area picks it. Every other tool lets the
 * tap through to the map, so a pin can go inside a shaded area. */
body.me-tool-select .me-ink .ink-hit { pointer-events: stroke; }
body.me-tool-select .me-ink .ink-area[data-mark] { pointer-events: fill; }

/* A class's pin. The dot sits exactly where the finger went down and the name
 * hangs below it; 44px to tap or drag. */
.me-mark-layer > .me-mk-pin {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    cursor: grab;
    touch-action: none;
}

.me-mk-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mk, #7c5228);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .4);
}

/* While a line or an area is being drawn, the class's pins let the tap through to
 * the map: a walk route passes the finds the class has already pinned. */
body.me-tool-lines .me-mark-layer > .me-mk-pin,
body.me-tool-areas .me-mark-layer > .me-mk-pin { pointer-events: none; }

.me-mk-pin.is-sel .me-mk-dot {
    box-shadow: 0 0 0 3px var(--see-ink), 0 0 0 6px #fff, 0 1px 6px rgba(0, 0, 0, .5);
}

.me-mk-label,
.me-mark-layer > .me-ink-label {
    max-width: 230px;
    overflow: hidden;
    padding: .05rem .4rem;
    border-radius: 6px;
    border: 2px solid var(--mk, var(--maths-border));
    background: rgba(255, 255, 255, .94);
    color: var(--see-ink);
    font-family: 'Nunito', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.me-mk-label {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
}

/* A point of the selected line or area: drag it to move it. While drawing, the
 * first point is big and solid: tap it to join the line up or finish the area. */
.me-mark-layer > .me-vx {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    cursor: grab;
    touch-action: none;
}

.me-vx::after {
    content: '';
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 4px solid var(--mk, #7c5228);
    background: #fff;
}

.me-vx.is-first::after {
    width: 26px;
    height: 26px;
    border-color: #fff;
    background: var(--mk, #7c5228);
    box-shadow: 0 0 0 2px var(--mk, #7c5228);
}

.me-mark-layer > .me-vx.is-passive { pointer-events: none; }


.me-ink ellipse { fill:none;stroke-width:calc(5px * var(--see-inv,1));vector-effect:non-scaling-stroke; }
body.me-tool-select .me-ink ellipse[data-mark] {pointer-events:stroke;}
.me-map-panes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;min-height:0;flex:1;}
.me-map-panes>.me-stage {min-width:0;min-height:320px;}
.me-map-panes .me-mark-panel {position:absolute;}
.me-common-actions {display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.tn-panels {position:relative;}
.tn-markup-tools.me-mark-bar {position:static;flex-wrap:wrap;}
.tn-credits-footer>details>summary,.me-credits-link {font-size:.75rem;color:#666;cursor:pointer;}
.me-mark-help {font-size:.8rem;flex-basis:100%;}

/* New adapter must remain visible even with cached legacy locality-pair.css. */
.tn-container.tn-shared-marking .tn-markup-tools.me-mark-bar {display:flex;}
.tn-provider-attribution,.me-attribution {font-size:.72rem;line-height:1.4;color:#666;}
.tn-provider-attribution {display:flex;flex-wrap:wrap;gap:.25rem .6rem;}
.me-style-error {font-size:.8rem;color:#8b1020;flex-basis:100%;}

/* Maps-only category selector. Legacy chip rules above remain for cached engines. */
.me-mark-key.me-category-menu {flex-wrap:nowrap;min-width:0;}
.me-category-label {font-size:.8rem;font-weight:700;}
.me-key-current {display:inline-block;}
.me-key-select {min-height:44px;min-width:9rem;max-width:22rem;border:2px solid var(--maths-border,#ccd3db);border-radius:10px;background:#fff;color:var(--see-ink,#123);padding:.25rem .5rem;font:inherit;font-weight:800;}
.me-key-select:focus-visible {outline:3px solid var(--maths-focus-ring,#155eef);outline-offset:2px;}
.me-key-select:disabled,.me-key-add:disabled {opacity:.5;cursor:default;}
/* Allocate a flexible map row at ordinary lesson widths too. No credit truncation. */
body.me-activity.me-marking .me-container {height:100vh;height:100dvh;min-height:0;box-sizing:border-box;overflow:visible;}
body.me-activity.me-marking .activity-header,body.me-activity.me-marking .me-mark-bar,body.me-activity.me-marking .me-foot,body.me-activity.me-marking .me-note {flex:0 0 auto;}
body.me-activity.me-marking .me-map-panes {flex:1 1 0;min-height:160px;}
body.me-activity.me-marking .me-map-panes>.me-stage {min-height:0;max-height:none;}
body.me-activity.me-marking .me-stage .sv-viewport {min-height:0;}
body.me-activity.me-marking .me-stage>.me-detail {position:absolute;left:.75rem;right:.75rem;bottom:.75rem;max-height:calc(100% - 1.5rem);overflow:auto;}
body.me-activity .me-credit {min-width:0;flex-wrap:wrap;justify-content:flex-end;}
body.me-activity .me-attribution {min-width:0;overflow-wrap:anywhere;}
/* A bordered/padded stage must not give its viewport a SECOND full stage height. */
body .tn-locality-pair .tn-panels {grid-template-rows:auto;align-items:start;}
body .tn-locality-pair .tn-stage .sv-viewport {height:100% !important;min-height:0 !important;max-height:none !important;box-sizing:border-box;}
.tn-panel>.tn-provider-attribution {position:static;display:block;flex:0 0 auto;margin-top:.3rem;padding:.25rem .2rem;line-height:1.45;overflow-wrap:anywhere;}
.tn-provider-attribution .tn-credit-visible {display:block;line-height:1.45;}
/* Cached V3 host has not moved the toast into its map: reserve a row instead. */
body.me-activity.me-marking .me-container>.me-detail {position:static;flex:0 0 auto;margin:0;}

/* V7 maps-only style picker. Swatch and name live INSIDE one compact trigger. */
.me-visually-hidden {position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.me-style-picker {position:relative;max-width:100%;}
.me-style-trigger {min-height:44px;box-sizing:border-box;max-width:240px;padding:.35rem .7rem;gap:.5rem;border:2px solid var(--maths-border,#cfc5b5);border-radius:12px;background:#fff;color:var(--see-ink,#302719);font:inherit;font-weight:800;cursor:pointer;list-style:none;}
.me-style-trigger::-webkit-details-marker {display:none;}
.me-style-trigger .me-key-current {width:24px !important;height:24px !important;border-radius:7px;}
.me-style-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.me-style-trigger[aria-disabled="true"] {opacity:.5;cursor:default;}
.me-style-popover {position:absolute;top:calc(100% + .35rem);left:0;z-index:30;display:grid;gap:.65rem;width:280px;max-width:calc(100vw - 3rem);max-height:45dvh;overflow:auto;padding:.8rem;border:1px solid var(--maths-border,#cec4b5);border-radius:14px;background:#fff;box-shadow:0 8px 28px #30271926;box-sizing:border-box;}
.me-style-popover .me-key-select {width:100%;min-width:0;max-width:100%;}
.me-colour-palette {display:flex;flex-wrap:wrap;gap:.35rem;}
.me-colour-choice {min-width:36px;min-height:36px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #bbb;cursor:pointer;}
.me-colour-choice[aria-pressed="true"] {box-shadow:0 0 0 3px var(--see-ink,#302719);}
.me-colour-choice:focus-visible,.me-style-trigger:focus-visible,.me-colour-input:focus-visible {outline:3px solid var(--maths-focus-ring,#155eef);outline-offset:3px;}
.me-custom-colour {display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.9rem;font-weight:700;}
.me-colour-input {width:54px;min-height:36px;border:1px solid #bbb;border-radius:6px;background:white;cursor:pointer;}
.me-style-popover .me-key-add {justify-content:center;white-space:nowrap;}
.me-style-popover .me-key-add::before {content:'+';font-size:1.2em;}
.me-drawing-hint {font-size:.85rem;line-height:1.35;}
.me-mark-bar {gap:.4rem .65rem;}
.me-mark-tools {gap:.25rem;}
.me-mark-tools .me-tool,.me-mark-btn {padding:.3rem .65rem;}

.me-vx.is-last {width:18px;height:18px;outline:2px dashed #fff;box-shadow:0 0 0 3px var(--mk,#7c5228);cursor:pointer;}