/* ==========================================================================
   Histriphy 21.3.10 · Media Export + Image Fill + Effects + Media Workspace
   Loaded after studio.css and formats.css, inside the Studio page only.
   Inherits the 21.2.1 universal viewport contract: the dialog is bounded by the
   DYNAMIC viewport (100dvh), scrolls internally, and never pushes the page
   sideways at any of the tested widths.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Live preview overlay
   Sits in Leaflet's overlayPane so panning is a pane translation rather than a
   re-serialisation of a 50,000 vertex path.
   -------------------------------------------------------------------------- */
.histriphy-media-overlay{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}

/* 21.3.2 · OVERLAY IMMUNITY.
   Leaflet ships `.leaflet-container .leaflet-overlay-pane svg{max-width:none!important}`
   precisely because host pages declare blanket `img,svg{max-width:100%}` rules.
   That protection is scoped to the OVERLAY pane, so the media pane introduced in
   21.3.1 fell outside it and Histriphy's own
   `.site-shell :where(img,svg,…){max-width:100%}` collapsed the oversized media
   overlay to 0×0 — the whole 21.3.1 "image never appears" bug.
   The real fix is the inline style media-image-fill.js sets on the element; this
   rule covers any future media SVG that is added without it. */
.leaflet-container .leaflet-histriphyMedia-pane svg,
.leaflet-container svg.histriphy-media-overlay,
.site-shell svg.histriphy-media-overlay{
  max-width:none!important;
  max-height:none!important;
}
/* Image Fill is a true fill replacement: preserve Leaflet's exact selection/
   edit stroke while the uploaded pixels occupy the interior. The class is
   applied directly to the current rendered path and disappears as soon as the
   media state is removed. */
.leaflet-interactive.histriphy-media-source-has-fill{fill-opacity:0!important;stroke-opacity:0!important}
.histriphy-studio-react.is-media-positioning .histriphy-media-overlay{pointer-events:auto;cursor:grab}
.histriphy-studio-react.is-media-positioning .histriphy-media-overlay:active{cursor:grabbing}

/* --------------------------------------------------------------------------
   Map-side launcher
   A dock beside the canvas, not another icon on the editing toolrail.
   -------------------------------------------------------------------------- */
.histriphy-media-dock{position:absolute;z-index:12;left:14px;bottom:58px;display:flex;gap:8px}
.histriphy-media-dock-button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid color-mix(in srgb, var(--gold-4, #f4b63f) 34%, transparent);border-radius:9px;background:color-mix(in srgb, var(--n3, #17150f) 92%, transparent);backdrop-filter:blur(8px);color:var(--n20, #ece7dd);font:inherit;font-size:.68rem;font-weight:800;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.histriphy-media-dock-button:hover{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 62%, transparent);color:var(--gold-4, #f4b63f)}
.histriphy-media-dock-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   Image Fill panel
   Bounded by the dynamic viewport and independently scrollable, so a long
   control list can never push the workspace or escape a short screen.
   -------------------------------------------------------------------------- */
.histriphy-media-panel{position:absolute;z-index:16;left:14px;bottom:104px;box-sizing:border-box;width:min(304px,calc(100% - 28px));max-height:min(560px,calc(100dvh - 190px));display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 20%, transparent);border-radius:12px;background:color-mix(in srgb, var(--n2, #100e0a) 96%, transparent);backdrop-filter:blur(10px);box-shadow:0 22px 60px rgba(0,0,0,.46);color:var(--n21, #f0ece3)}
.histriphy-media-panel[hidden]{display:none}
.histriphy-media-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid color-mix(in srgb, var(--n15, #8d8578) 15%, transparent)}
.histriphy-media-panel-head span{display:block;color:var(--gold-4, #f4b63f);font-size:.52rem;font-weight:900;letter-spacing:.14em}
.histriphy-media-panel-head strong{display:block;margin-top:2px;font-size:.84rem}
.histriphy-media-panel-head button{width:28px;height:28px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 20%, transparent);border-radius:7px;background:transparent;color:inherit;font-size:1rem;line-height:1;cursor:pointer}
.histriphy-media-panel-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:11px}

.histriphy-media-target{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 14%, transparent);border-radius:8px;background:color-mix(in srgb, var(--n4, #1d1a13) 60%, transparent)}
.histriphy-media-target strong{font-size:.76rem;overflow-wrap:anywhere}
.histriphy-media-target span{color:var(--n12, #a09889);font-size:.58rem}
.histriphy-media-asset{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.histriphy-media-asset span{min-width:0;font-size:.68rem;overflow-wrap:anywhere}
.histriphy-media-asset small{flex:none;color:var(--n12, #a09889);font-size:.56rem}

.histriphy-media-empty,.histriphy-media-hint{margin:0;color:var(--n12, #a09889);font-size:.6rem;line-height:1.5}
.histriphy-media-field{display:flex;flex-direction:column;gap:6px}
.histriphy-media-field>label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--n14, #b6ad9c);font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.histriphy-media-readout{color:var(--n19, #e2ddd2);font-size:.6rem;font-weight:700;letter-spacing:0;text-transform:none}
.histriphy-media-field input[type="range"]{width:100%;accent-color:var(--gold-4, #f4b63f)}

.histriphy-media-row{display:flex;flex-wrap:wrap;gap:6px}
.histriphy-media-row button{flex:1 1 auto;min-width:0;min-height:32px;padding:0 10px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 18%, transparent);border-radius:7px;background:color-mix(in srgb, var(--n4, #1d1a13) 55%, transparent);color:var(--n19, #e2ddd2);font:inherit;font-size:.62rem;font-weight:700;cursor:pointer}
.histriphy-media-row button:hover:not(:disabled){border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 46%, transparent)}
.histriphy-media-row button.is-active{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 58%, transparent);background:color-mix(in srgb, var(--gold-4, #f4b63f) 12%, transparent);color:var(--gold-4, #f4b63f)}
.histriphy-media-row button:disabled{opacity:.4;cursor:not-allowed}
.histriphy-media-row button.is-danger:hover{border-color:color-mix(in srgb, #e2564a 55%, transparent);color:#f0847a}

.histriphy-media-primary{width:100%;min-height:38px;padding:0 12px;border:1px solid var(--gold-4, #f4b63f);border-radius:8px;background:linear-gradient(180deg,var(--gold-4, #f4b63f),var(--gold-3, #d89a31));color:var(--n2, #100e0a);font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
.histriphy-media-primary.is-active{background:transparent;color:var(--gold-4, #f4b63f)}
.histriphy-media-primary:disabled{opacity:.45;cursor:progress}
.histriphy-media-secondary{width:100%;min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 24%, transparent);border-radius:8px;background:transparent;color:var(--n20, #ece7dd);font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
.histriphy-media-secondary:disabled{opacity:.45;cursor:progress}

/* --------------------------------------------------------------------------
   Export Center: GIS | Media tabs
   -------------------------------------------------------------------------- */
.histriphy-export-tabs{display:flex;gap:6px;padding:14px 22px 0}
.histriphy-export-tabs button{min-height:32px;padding:0 14px;border:1px solid var(--line,rgba(255,255,255,.11));border-radius:8px;background:transparent;color:var(--muted,#98938c);font:inherit;font-size:.63rem;font-weight:800;letter-spacing:.06em;cursor:pointer}
.histriphy-export-tabs button.is-active{border-color:rgba(244,182,63,.44);background:rgba(244,182,63,.08);color:var(--text,#f5f2eb)}
.histriphy-export-panel[hidden]{display:none}

.histriphy-export-media-panel{display:flex;flex-direction:column;gap:14px;padding:16px 22px 20px}
.histriphy-media-export-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.histriphy-media-export-field>label{color:var(--text,#f5f2eb);font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.histriphy-media-export-field>small{color:var(--muted,#98938c);font-size:.6rem;line-height:1.45}

.histriphy-media-chips,.histriphy-media-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:8px}
.histriphy-media-chips button,.histriphy-media-presets button{display:grid;gap:3px;min-width:0;padding:10px 11px;text-align:left;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:9px;background:rgba(255,255,255,.025);color:inherit;font:inherit;cursor:pointer}
.histriphy-media-chips button:hover,.histriphy-media-presets button:hover{border-color:rgba(244,182,63,.44);background:rgba(244,182,63,.05)}
.histriphy-media-chips button.is-active{border-color:rgba(244,182,63,.58);background:rgba(244,182,63,.1)}
.histriphy-media-chips strong,.histriphy-media-presets strong{font-size:.72rem}
.histriphy-media-chips small,.histriphy-media-presets small{color:var(--muted,#98938c);font-size:.58rem;line-height:1.35;overflow-wrap:anywhere}

.histriphy-media-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.histriphy-media-inline input[type="number"]{width:104px;min-height:34px;padding:0 9px}
.histriphy-media-inline input[type="color"]{width:44px;height:34px;padding:2px;cursor:pointer}
.histriphy-media-inline span{color:var(--muted,#98938c);font-size:.63rem}
.histriphy-media-export-field input[type="text"],.histriphy-media-export-field input[type="number"]{box-sizing:border-box;min-height:34px;padding:0 10px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:7px;background:rgba(255,255,255,.03);color:inherit;font:inherit;font-size:.7rem}

.histriphy-media-summary{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:9px;background:rgba(255,255,255,.02)}
.histriphy-media-summary strong{font-size:.86rem}
.histriphy-media-summary span,.histriphy-media-summary small{color:var(--muted,#98938c);font-size:.6rem;line-height:1.45;overflow-wrap:anywhere}

.histriphy-media-export-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}
.histriphy-media-export-status{min-height:16px;color:var(--muted,#98938c);font-size:.61rem;line-height:1.45;overflow-wrap:anywhere}
.histriphy-media-export-status.is-ok{color:#6fd39a}
.histriphy-media-export-status.is-error{color:#f0847a}

/* Light theme mirrors the Export Center's existing light overrides. */
html[data-theme="light"] .histriphy-media-chips button,
html[data-theme="light"] .histriphy-media-presets button,
html[data-theme="light"] .histriphy-media-summary{background:#fbfaf8;border-color:rgba(26,24,20,.11)}
html[data-theme="light"] .histriphy-media-chips button.is-active{background:rgba(177,123,25,.08);border-color:rgba(177,123,25,.46)}
html[data-theme="light"] .histriphy-export-tabs button.is-active{background:rgba(177,123,25,.08);border-color:rgba(177,123,25,.44);color:#1a1814}

/* --------------------------------------------------------------------------
   UNIVERSAL VIEWPORT — Media dialog
   The Export Center gained a second, taller panel. Re-state the 21.2.1 contract
   against the dialog so the media controls scroll INSIDE it instead of growing
   it past a 720p notebook or a 390×844 phone.
   -------------------------------------------------------------------------- */
.histriphy-universal-export-modal{
  box-sizing:border-box;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:
    max(12px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
}
.histriphy-universal-export-dialog{
  box-sizing:border-box;
  width:min(700px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* The header, tab row and footer stay put; only the panel scrolls, so the
   Export button is always reachable without scrolling the whole dialog. */
.histriphy-universal-export-dialog>header,
.histriphy-export-tabs,
.histriphy-universal-export-dialog>footer{flex:none}
.histriphy-export-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.histriphy-universal-export-dialog :where(button,input,select){max-width:100%}

@media (max-height:820px){
  .histriphy-universal-export-modal{padding:10px}
  .histriphy-universal-export-dialog{max-height:calc(100dvh - 20px)}
  .histriphy-universal-export-dialog header{padding:16px 20px}
  .histriphy-universal-export-dialog h2{font-size:19px}
  .histriphy-export-tabs{padding:11px 20px 0}
  .histriphy-export-media-panel{gap:11px;padding:13px 20px 16px}
  .histriphy-media-chips,.histriphy-media-presets{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:7px}
  .histriphy-media-chips button,.histriphy-media-presets button{padding:8px 9px}
}

@media (max-width:820px){
  .histriphy-export-tabs{padding-left:16px;padding-right:16px}
  .histriphy-export-media-panel{padding-left:16px;padding-right:16px}
  .histriphy-media-dock{left:10px;bottom:52px}
  .histriphy-media-panel{left:10px;right:10px;width:auto;max-height:min(52dvh,440px)}
}

@media (max-width:699px){
  /* Phones: the Export Center becomes a bottom sheet with a sticky action row,
     matching the 21.2.1 download dialog rather than inventing a second pattern. */
  .histriphy-universal-export-modal{align-items:flex-end;padding:0}
  .histriphy-universal-export-dialog{width:100%;max-width:100%;max-height:92dvh;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .histriphy-media-chips,.histriphy-media-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .histriphy-media-export-actions{grid-template-columns:1fr}
  .histriphy-media-panel{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-height:62dvh}
  .histriphy-media-dock{bottom:auto;top:10px;left:10px}
}

/* ==========================================================================
   21.3.3 · PROFESSIONAL MEDIA INSPECTOR
   Compact property rows, right-aligned numeric values, consistent labels.
   The number is the control. Sliders were removed rather than demoted: a slider
   sitting next to a field invites the user back to the imprecise one, and the
   whole point of this release is that typing 1 gives exactly 1.000.
   ========================================================================== */

/* --- tabs ----------------------------------------------------------------- */
.histriphy-media-tabs{flex:none;display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid color-mix(in srgb, var(--n15, #8d8578) 14%, transparent)}
.histriphy-media-tabs button{flex:1 1 auto;min-height:28px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--n12, #a09889);font:inherit;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.histriphy-media-tabs button:hover{color:var(--n19, #e2ddd2)}
.histriphy-media-tabs button.is-active{color:var(--gold-4, #f4b63f);border-bottom-color:var(--gold-4, #f4b63f)}
.histriphy-media-tabs button:focus-visible{outline:2px solid var(--gold-4, #f4b63f);outline-offset:-2px;border-radius:4px}

/* --- property rows -------------------------------------------------------- */
.histriphy-prop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,132px);align-items:center;gap:8px;min-height:26px}
.histriphy-prop-wide{grid-template-columns:minmax(0,1fr)}
.histriphy-prop-wide>.histriphy-prop-label{margin-bottom:2px}
.histriphy-prop-label{min-width:0;color:var(--n13, #ada494);font-size:.63rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:ew-resize;user-select:none}
.histriphy-prop-label:hover{color:var(--n19, #e2ddd2)}
.histriphy-prop.is-scrubbing .histriphy-prop-label{color:var(--gold-4, #f4b63f)}
.histriphy-prop.is-modified>.histriphy-prop-label::after{content:"";display:inline-block;width:4px;height:4px;margin-left:5px;border-radius:50%;background:var(--gold-4, #f4b63f);vertical-align:middle}

.histriphy-prop-control{display:flex;align-items:center;gap:4px;min-width:0}
.histriphy-prop-input{min-width:0;flex:1 1 auto;width:100%;height:24px!important;min-height:24px!important;padding:0 6px!important;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 20%, transparent)!important;border-radius:5px!important;background:color-mix(in srgb, var(--n2, #100e0a) 70%, transparent)!important;color:var(--n21, #f0ece3)!important;font:inherit!important;font-size:.68rem!important;font-variant-numeric:tabular-nums;text-align:right;outline:none}
.histriphy-prop-input:hover{border-color:color-mix(in srgb, var(--n15, #8d8578) 38%, transparent)!important}
.histriphy-prop-input:focus{border-color:var(--gold-4, #f4b63f)!important;box-shadow:0 0 0 2px color-mix(in srgb, var(--gold-4, #f4b63f) 18%, transparent)}
.histriphy-prop-unit{flex:none;color:var(--n11, #8f887a);font-size:.6rem;font-variant-numeric:tabular-nums}
.histriphy-prop-reset{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--n11, #8f887a);cursor:pointer;opacity:0;transition:opacity .12s ease}
.histriphy-prop:hover .histriphy-prop-reset,.histriphy-prop.is-modified .histriphy-prop-reset,.histriphy-prop-reset:focus-visible{opacity:1}
.histriphy-prop-reset:hover{color:var(--gold-4, #f4b63f);background:color-mix(in srgb, var(--gold-4, #f4b63f) 12%, transparent)}
.histriphy-prop-reset svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.histriphy-prop-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.histriphy-prop-vector{grid-template-columns:minmax(0,1fr) minmax(0,196px)}
.histriphy-prop-axis{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px;min-height:24px}
.histriphy-prop-axis>.histriphy-prop-label{font-size:.58rem;text-align:center}
.histriphy-prop-axis .histriphy-prop-reset{display:none}

.histriphy-prop-select{width:100%;height:24px;min-height:24px;padding:0 4px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 20%, transparent);border-radius:5px;background:color-mix(in srgb, var(--n2, #100e0a) 70%, transparent);color:var(--n21, #f0ece3);font:inherit;font-size:.66rem;cursor:pointer}
.histriphy-prop-toggle{width:100%;height:24px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 20%, transparent);border-radius:5px;background:transparent;color:var(--n12, #a09889);font:inherit;font-size:.63rem;font-weight:700;cursor:pointer}
.histriphy-prop-toggle.is-on{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 58%, transparent);background:color-mix(in srgb, var(--gold-4, #f4b63f) 13%, transparent);color:var(--gold-4, #f4b63f)}

.histriphy-seg{display:flex;gap:4px;min-width:0}
.histriphy-seg button{flex:1 1 0;min-width:0;min-height:26px;padding:0 8px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 18%, transparent);border-radius:6px;background:color-mix(in srgb, var(--n4, #1d1a13) 55%, transparent);color:var(--n18, #d8d2c6);font:inherit;font-size:.62rem;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histriphy-seg button:hover{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 46%, transparent)}
.histriphy-seg button.is-active{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 58%, transparent);background:color-mix(in srgb, var(--gold-4, #f4b63f) 12%, transparent);color:var(--gold-4, #f4b63f)}

.histriphy-prop-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding-top:8px;border-top:1px solid color-mix(in srgb, var(--n15, #8d8578) 12%, transparent);color:var(--n11, #8f887a);font-size:.55rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

.histriphy-media-linked{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:5px}
.histriphy-media-link{display:inline-flex;align-items:center;justify-content:center;color:var(--gold-4, #f4b63f);opacity:.8}
.histriphy-media-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

.histriphy-media-nudge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.histriphy-media-nudge button{min-height:24px;padding:0;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 18%, transparent);border-radius:5px;background:color-mix(in srgb, var(--n4, #1d1a13) 55%, transparent);color:var(--n18, #d8d2c6);font:inherit;font-size:.6rem;cursor:pointer}
.histriphy-media-nudge button:hover{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 46%, transparent);color:var(--gold-4, #f4b63f)}

/* --- effect cards --------------------------------------------------------- */
.histriphy-media-add-effect{flex:1 1 auto}
.histriphy-effect{display:flex;flex-direction:column;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 16%, transparent);border-radius:9px;background:color-mix(in srgb, var(--n4, #1d1a13) 42%, transparent);overflow:hidden}
.histriphy-effect.is-disabled{opacity:.5}
.histriphy-effect-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 8px 7px 6px;border-bottom:1px solid color-mix(in srgb, var(--n15, #8d8578) 12%, transparent)}
.histriphy-effect.is-collapsed .histriphy-effect-head{border-bottom:0}
.histriphy-effect.is-collapsed .histriphy-effect-params{display:none}
.histriphy-effect-title{display:flex;align-items:center;gap:5px;min-width:0;padding:0;border:0;background:transparent;color:var(--n20, #ece7dd);font:inherit;font-size:.72rem;cursor:pointer}
.histriphy-effect-caret{color:var(--n11, #8f887a);font-size:.6rem}
.histriphy-effect.is-collapsed .histriphy-effect-caret{transform:rotate(-90deg)}
.histriphy-effect-tools{display:flex;align-items:center;gap:2px;flex:none}
.histriphy-effect-tool{width:22px;height:22px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--n12, #a09889);font:inherit;font-size:.72rem;line-height:1;cursor:pointer}
.histriphy-effect-tool:hover:not(:disabled){background:color-mix(in srgb, var(--n15, #8d8578) 16%, transparent);color:var(--n21, #f0ece3)}
.histriphy-effect-tool:disabled{opacity:.3;cursor:not-allowed}
.histriphy-effect-tool.is-on{color:var(--gold-4, #f4b63f)}
.histriphy-effect-tool.is-danger:hover{color:#f0847a}
.histriphy-effect-params{display:flex;flex-direction:column;gap:7px;padding:9px 9px 11px}
.histriphy-effect-texture{display:flex;flex-direction:column;gap:6px;margin-top:2px;padding-top:9px;border-top:1px solid color-mix(in srgb, var(--n15, #8d8578) 12%, transparent)}
.histriphy-effect-texture-name{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.histriphy-effect-texture-name span{flex:none;color:var(--n11, #8f887a);font-size:.55rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.histriphy-effect-texture-name strong{min-width:0;font-size:.65rem;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1100px){
  .histriphy-prop{grid-template-columns:minmax(0,1fr) minmax(0,116px)}
  .histriphy-prop-vector{grid-template-columns:minmax(0,1fr) minmax(0,168px)}
}
@media (max-width:880px){
  /* Below this a two-column row starts truncating labels, so properties stack
     instead of clipping. No control is ever cut off at any tested width. */
  .histriphy-prop,.histriphy-prop-vector{grid-template-columns:minmax(0,1fr);gap:3px}
  .histriphy-prop-label{white-space:normal}
  .histriphy-prop-control{width:100%}
  .histriphy-prop-axis{grid-template-columns:12px minmax(0,1fr)}
}

/* Light theme keeps the same structure with the theme's own surfaces. */
html[data-theme="light"] .histriphy-prop-input,
html[data-theme="light"] .histriphy-prop-select{background:#fff!important;color:#1a1814!important;border-color:rgba(26,24,20,.16)!important}
html[data-theme="light"] .histriphy-effect{background:#fbfaf8;border-color:rgba(26,24,20,.11)}

/* ==========================================================================
   21.3.4 · PROFESSIONAL MEDIA WORKSPACE

   Media stops being a floating window over the map and becomes a mode of the
   panel Studio already has. Two rules govern everything below:

   1. NOTHING IS RESTRUCTURED. The React sidebar keeps its markup, its state and
      its tab; media hides it with a class and appends one flex child. Removing
      the class restores Studio exactly, which is why closing media cannot lose
      a selection or a tab.
   2. FLAT SURFACES, REAL SEPARATORS, ONE ACCENT. Gold means active or selected
      and nothing else. No glass, no gradients on controls, no glow, no pills
      around numbers, no cards inside cards.
   ========================================================================== */

/* --- the workspace shell -------------------------------------------------- */

/* The sidebar is already a column flex container at every width, so the
   workspace is simply the child that fills it. No absolute positioning, which
   means the tablet drawer and the phone sheet keep their own behaviour without
   a single media-specific override. */
.histriphy-media-workspace{
  position:relative;flex:1 1 auto;min-height:0;min-width:0;
  display:flex;flex-direction:column;
  background:var(--n3, #17150f);color:var(--n21, #f0ece3)
}
.histriphy-media-workspace[hidden]{display:none}

/* While media is open the React tabs and panels are hidden, not unmounted. */
.histriphy-studio-react.histriphy-media-wide .geo-builder-tabs,
.histriphy-studio-react.histriphy-media-wide .geo-builder-tab-panel{display:none!important}
/* Studio's separator clamps to its own 280–380 range and does not resize at all
   above 1100px, so media brings its own handle and hides Studio's until close. */
.histriphy-studio-react.histriphy-media-wide .geo-builder-sidebar-resizer{display:none!important}

/* THE WIDTH.
   --side is set inline by React on this exact element, so an ancestor rule
   could never win however specific it was: custom properties resolve from the
   nearest ancestor that declares them. Declaring it here, with !important,
   beats the inline value on the same element — and removing the class hands the
   width straight back to React with nothing to undo. */
@media (min-width:821px){
  .histriphy-studio-react.histriphy-media-wide{--side:var(--histriphy-media-side, 400px)!important}
}

.histriphy-media-resizer{
  position:absolute;left:0;top:0;bottom:0;width:9px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:transparent;cursor:ew-resize;touch-action:none
}
.histriphy-media-resizer span{width:1px;height:26px;border-radius:1px;background:color-mix(in srgb, var(--n15, #8d8578) 30%, transparent)}
.histriphy-media-resizer:hover span,.histriphy-media-resizer.is-dragging span{background:var(--gold-4, #f4b63f);height:44px}
.histriphy-media-resizer:focus-visible{outline:2px solid var(--gold-4, #f4b63f);outline-offset:-2px}
@media (max-width:820px){ .histriphy-media-resizer{display:none} }

.histriphy-media-ws-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px 11px;border-bottom:1px solid color-mix(in srgb, var(--n15, #8d8578) 14%, transparent)
}
.histriphy-media-ws-head span{display:block;color:var(--gold-4, #f4b63f);font-size:.52rem;font-weight:900;letter-spacing:.14em}
.histriphy-media-ws-head strong{display:block;margin-top:2px;font-size:.82rem;font-weight:700}
.histriphy-media-ws-head button[data-close]{
  flex:none;width:26px;height:26px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 20%, transparent);
  border-radius:6px;background:transparent;color:var(--n13, #ada494);font-size:1rem;line-height:1;cursor:pointer
}
.histriphy-media-ws-head button[data-close]:hover{color:var(--n21, #f0ece3);border-color:color-mix(in srgb, var(--n15, #8d8578) 40%, transparent)}

.histriphy-media-ws-tabs{flex:none;display:flex;gap:2px;padding:0 12px;border-bottom:1px solid color-mix(in srgb, var(--n15, #8d8578) 14%, transparent)}
.histriphy-media-ws-tabs button{
  flex:1 1 auto;min-height:32px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;
  color:var(--n12, #a09889);font:inherit;font-size:.63rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer
}
.histriphy-media-ws-tabs button:hover{color:var(--n19, #e2ddd2)}
.histriphy-media-ws-tabs button.is-active{color:var(--gold-4, #f4b63f);border-bottom-color:var(--gold-4, #f4b63f)}
.histriphy-media-ws-tabs button:focus-visible{outline:2px solid var(--gold-4, #f4b63f);outline-offset:-3px;border-radius:4px}

.histriphy-media-ws-body{
  min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  padding:12px 14px 18px;display:flex;flex-direction:column;gap:9px
}

/* A column flex container shrinks its children when they overflow, which on a
   seven-effect stack silently ate the bottom of every card. Nothing inside a
   scrolling panel should ever be compressed: the panel scrolls instead. */
.histriphy-media-ws-body>*,
.histriphy-effect-params>*,
.histriphy-group-body>*{flex:0 0 auto}

/* --- Image row ------------------------------------------------------------ */
.histriphy-media-asset-identity{display:flex;flex-direction:column;gap:1px;min-width:0}
.histriphy-media-asset-identity strong{min-width:0;font-size:.7rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.histriphy-media-asset-identity small{color:var(--n11, #8f887a);font-size:.56rem;font-variant-numeric:tabular-nums}
.histriphy-media-asset{align-items:center}
.histriphy-media-inline-action{
  flex:none;min-height:24px;padding:0 10px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 20%, transparent);
  border-radius:5px;background:transparent;color:var(--n18, #d8d2c6);font:inherit;font-size:.62rem;font-weight:700;cursor:pointer
}
.histriphy-media-inline-action:hover{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 50%, transparent);color:var(--gold-4, #f4b63f)}

/* The uniform-scale indicator sits inside the label so the property row stays
   a two-column grid like every other row. */
.histriphy-prop-label .histriphy-media-link{margin-left:5px;vertical-align:middle}
.histriphy-prop-label .histriphy-media-link svg{width:11px;height:11px}

/* --- collapsible groups --------------------------------------------------- */
.histriphy-group{display:flex;flex-direction:column;border-top:1px solid color-mix(in srgb, var(--n15, #8d8578) 12%, transparent);padding-top:2px}
.histriphy-group-head{
  display:flex;align-items:center;gap:6px;width:100%;min-height:26px;padding:0;border:0;background:transparent;
  color:var(--n11, #8f887a);font:inherit;font-size:.55rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;text-align:left
}
.histriphy-group-head:hover{color:var(--n17, #cbc4b6)}
.histriphy-group-head:focus-visible{outline:2px solid var(--gold-4, #f4b63f);outline-offset:2px;border-radius:3px}
.histriphy-group-caret{font-size:.6rem;letter-spacing:0;transition:transform .12s ease}
.histriphy-group.is-collapsed .histriphy-group-caret{transform:rotate(-90deg)}
.histriphy-group-label{flex:1 1 auto;min-width:0}
.histriphy-group-tools{flex:none;display:flex;gap:4px}
.histriphy-group-body{display:flex;flex-direction:column;gap:7px;padding:6px 0 4px}
.histriphy-group.is-collapsed .histriphy-group-body{display:none}

/* --- colour property ------------------------------------------------------ */
.histriphy-prop-color .histriphy-prop-label{cursor:default}
.histriphy-prop-swatch{
  flex:none;width:26px;height:24px;padding:2px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 24%, transparent);
  border-radius:5px;background:color-mix(in srgb, var(--n2, #100e0a) 70%, transparent);cursor:pointer
}
.histriphy-prop-swatch::-webkit-color-swatch-wrapper{padding:0}
.histriphy-prop-swatch::-webkit-color-swatch{border:0;border-radius:3px}
.histriphy-prop-hex{text-align:left!important;text-transform:lowercase}

/* --- parameter sub-groups ------------------------------------------------- */
.histriphy-param-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
.histriphy-param-group .histriphy-prop{grid-template-columns:minmax(0,1fr) minmax(0,64px);gap:6px}
.histriphy-param-group .histriphy-prop-reset{display:none}

/* --- effect presets ------------------------------------------------------- */
.histriphy-preset-row{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.histriphy-preset-row button{
  min-height:24px;padding:0 8px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 18%, transparent);
  border-radius:5px;background:transparent;color:var(--n17, #cbc4b6);font:inherit;font-size:.6rem;font-weight:700;cursor:pointer
}
.histriphy-preset-row button:hover{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 50%, transparent);color:var(--gold-4, #f4b63f)}
.histriphy-effect-heavy{
  justify-self:start;min-height:24px;padding:0 12px;border:1px solid color-mix(in srgb, var(--gold-4, #f4b63f) 40%, transparent);
  border-radius:5px;background:transparent;color:var(--gold-4, #f4b63f);font:inherit;font-size:.6rem;font-weight:800;letter-spacing:.05em;cursor:pointer
}
.histriphy-effect-heavy:hover{background:color-mix(in srgb, var(--gold-4, #f4b63f) 12%, transparent)}

/* --- effect overflow menu ------------------------------------------------- */
.histriphy-effect-menu{position:relative;display:inline-flex}
/* The normal card clips its body for rounded corners. While an overflow menu
   is open, let that one card escape the clip so collapsed cards can show it. */
.histriphy-effect.is-menu-open{position:relative;z-index:24;overflow:visible}
.histriphy-effect-menu-list{
  position:absolute;z-index:20;top:calc(100% + 4px);right:0;min-width:118px;display:flex;flex-direction:column;padding:4px;
  border:1px solid color-mix(in srgb, var(--n15, #8d8578) 24%, transparent);border-radius:7px;
  background:var(--n2, #100e0a);box-shadow:0 12px 30px rgba(0,0,0,.44)
}
.histriphy-effect-menu-list[hidden]{display:none}
.histriphy-effect-menu-list button{
  min-height:26px;padding:0 9px;border:0;border-radius:4px;background:transparent;color:var(--n18, #d8d2c6);
  font:inherit;font-size:.63rem;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap
}
.histriphy-effect-menu-list button:hover{background:color-mix(in srgb, var(--n15, #8d8578) 16%, transparent);color:var(--n21, #f0ece3)}
.histriphy-effect-menu-list button.is-danger:hover{color:#f0847a}

/* --- effect browser -------------------------------------------------------
   A popover under the button, not a modal and not a marketplace. No thumbnails:
   a picture of "Levels" tells a professional nothing the word does not, and a
   grid of them would take four times the room to say less. */
.histriphy-fx-add-wrap{position:relative;display:block}
.histriphy-fx-browser{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;
  display:flex;flex-direction:column;max-height:min(52dvh,420px);overflow:hidden;
  border:1px solid color-mix(in srgb, var(--n15, #8d8578) 26%, transparent);border-radius:9px;
  background:var(--n2, #100e0a);box-shadow:0 18px 44px rgba(0,0,0,.5)
}
.histriphy-fx-browser-head{flex:none;display:flex;align-items:center;gap:6px;padding:7px 7px 6px;border-bottom:1px solid color-mix(in srgb, var(--n15, #8d8578) 16%, transparent)}
.histriphy-fx-browser-search{
  flex:1 1 auto;min-width:0;height:26px;padding:0 8px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 22%, transparent);
  border-radius:5px;background:color-mix(in srgb, var(--n4, #1d1a13) 60%, transparent);color:var(--n21, #f0ece3);font:inherit;font-size:.66rem;outline:none
}
.histriphy-fx-browser-search:focus{border-color:var(--gold-4, #f4b63f)}
.histriphy-fx-browser-close{flex:none;width:24px;height:24px;border:0;border-radius:5px;background:transparent;color:var(--n12, #a09889);font-size:.95rem;line-height:1;cursor:pointer}
.histriphy-fx-browser-close:hover{color:var(--n21, #f0ece3)}
.histriphy-fx-browser-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px}
.histriphy-fx-browser-group+.histriphy-fx-browser-group{margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb, var(--n15, #8d8578) 12%, transparent)}
.histriphy-fx-browser-group h4{margin:0 0 4px;padding:0 4px;color:var(--n11, #8f887a);font-size:.53rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.histriphy-fx-browser-item{
  display:flex;flex-direction:column;gap:1px;width:100%;padding:6px 8px;border:0;border-radius:6px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer
}
.histriphy-fx-browser-item:hover,.histriphy-fx-browser-item:focus-visible{background:color-mix(in srgb, var(--gold-4, #f4b63f) 11%, transparent);outline:none}
.histriphy-fx-browser-item strong{font-size:.68rem;font-weight:600}
.histriphy-fx-browser-item span{color:var(--n11, #8f887a);font-size:.57rem;line-height:1.35}

/* --- nudge cluster, secondary to the numeric fields ----------------------- */
.histriphy-media-nudge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.histriphy-media-nudge button{
  min-height:24px;border:1px solid color-mix(in srgb, var(--n15, #8d8578) 16%, transparent);border-radius:5px;
  background:transparent;color:var(--n12, #a09889);font:inherit;font-size:.6rem;cursor:pointer
}
.histriphy-media-nudge button:hover{border-color:color-mix(in srgb, var(--gold-4, #f4b63f) 45%, transparent);color:var(--gold-4, #f4b63f)}

/* --- 21.3.4 responsive ---------------------------------------------------- */
@media (max-width:820px){
  /* Tablet and phone keep Studio's existing stabilised drawer/sheet: media does
     not redefine what the right panel is, it only changes what is inside it. */
  .histriphy-media-ws-body{padding:11px 13px 22px}
}

/* Light theme: same structure, the theme's own surfaces. */
html[data-theme="light"] .histriphy-media-workspace{background:var(--bg-deep,#fbfaf8);color:#1a1814}
html[data-theme="light"] .histriphy-fx-browser,
html[data-theme="light"] .histriphy-effect-menu-list{background:#fff;border-color:rgba(26,24,20,.14)}
html[data-theme="light"] .histriphy-fx-browser-search{background:#fff;color:#1a1814}
html[data-theme="light"] .histriphy-prop-swatch{background:#fff}

/* ========================================================================== 
   Histriphy 21.3.6 · Media workflow refinement
   Cleaner Basic inspector, simple-first export, map-stage effects.
   ========================================================================== */

/* Workspace history belongs in the header, not in the property stack. */
.histriphy-media-ws-head-actions{display:flex;align-items:center;gap:4px;flex:none}
.histriphy-media-ws-head-actions button{
  width:26px;height:26px;padding:0;border:1px solid color-mix(in srgb,var(--n15,#8d8578) 18%,transparent);
  border-radius:5px;background:transparent;color:var(--n12,#a09889);font:inherit;font-size:.78rem;line-height:1;cursor:pointer
}
.histriphy-media-ws-head-actions button:hover:not(:disabled){color:var(--n20,#ece7dd);border-color:color-mix(in srgb,var(--n15,#8d8578) 38%,transparent)}
.histriphy-media-ws-head-actions button:disabled{opacity:.28;cursor:not-allowed}
.histriphy-media-ws-head-actions button[data-close]{font-size:1rem}

/* Uniform scaling is the only scale mode today. Do not show a mysterious chain
   icon until separate X/Y scaling actually exists. */
.histriphy-media-link{display:none!important}

/* Direct X/Y and on-map drag are primary; nudge buttons no longer occupy a row. */
.histriphy-media-nudge{display:none!important}
.histriphy-media-position-button{
  width:100%;min-height:30px;padding:0 10px;border:1px solid color-mix(in srgb,var(--n15,#8d8578) 22%,transparent);
  border-radius:6px;background:transparent;color:var(--n18,#d8d2c6);font:inherit;font-size:.62rem;font-weight:700;cursor:pointer
}
.histriphy-media-position-button:hover,.histriphy-media-position-button.is-active{
  border-color:color-mix(in srgb,var(--gold-4,#f4b63f) 48%,transparent);color:var(--gold-4,#f4b63f);background:color-mix(in srgb,var(--gold-4,#f4b63f) 6%,transparent)
}

/* The X/Y row should read as a deliberate pair instead of two squeezed fields. */
.histriphy-vector{grid-template-columns:minmax(0,1fr) minmax(0,168px)!important}
.histriphy-vector-controls{gap:5px!important}
.histriphy-vector-axis{min-width:0}
.histriphy-vector-axis>span{width:14px;text-align:center;color:var(--n11,#8f887a);font-size:.58rem}

/* Effects are now explicitly staged. */
.histriphy-media-ws-body>.histriphy-section-heading{margin-top:4px}
.histriphy-media-ws-body>.histriphy-section-heading+ .histriphy-effect{margin-top:0}
.histriphy-effect[data-effect="drop-shadow"] .histriphy-effect-title strong::after{
  content:"Map";display:inline-block;margin-left:7px;padding:1px 5px;border-radius:3px;
  background:color-mix(in srgb,var(--gold-4,#f4b63f) 8%,transparent);color:var(--n11,#8f887a);
  font-size:.46rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px
}

/* --------------------------------------------------------------------------
   Export: simple-first. The normal path is Format → Size → Canvas → Background
   → Export. Everything else stays available inside Advanced settings.
   -------------------------------------------------------------------------- */
.histriphy-export-media-panel{gap:11px!important}
.histriphy-export-media-panel .histriphy-media-export-field{gap:6px}
.histriphy-export-media-panel .histriphy-media-export-field>label{font-size:.58rem;letter-spacing:.055em}
.histriphy-export-media-panel .histriphy-media-export-field>small{font-size:.56rem;line-height:1.35}
.histriphy-export-media-panel .histriphy-media-chips{
  display:flex;flex-wrap:wrap;gap:6px!important;grid-template-columns:none!important
}
.histriphy-export-media-panel .histriphy-media-chips button{
  flex:1 1 92px;display:flex;align-items:center;justify-content:center;min-height:34px;padding:7px 9px!important;
  text-align:center;border-radius:6px!important
}
.histriphy-export-media-panel .histriphy-media-chips button strong{font-size:.66rem}
.histriphy-export-media-panel .histriphy-media-chips button small{display:none}
.histriphy-media-bg-row{min-height:30px}
.histriphy-media-bg-row input[type="color"]{width:34px;height:28px;padding:2px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:5px;background:transparent}
.histriphy-media-bg-row span{font-size:.62rem;color:var(--muted,#98938c);font-variant-numeric:tabular-nums}
.histriphy-media-summary-compact{padding:8px 10px!important;gap:2px!important}
.histriphy-media-summary-compact strong{font-size:.68rem!important}
.histriphy-media-summary-compact span{font-size:.56rem!important}
.histriphy-media-export-main{min-height:42px!important;font-size:.72rem!important;margin-top:1px}
.histriphy-media-advanced{
  margin-top:2px;border-top:1px solid var(--line,rgba(255,255,255,.09));padding-top:4px
}
.histriphy-media-advanced>summary{
  min-height:32px;display:flex;align-items:center;cursor:pointer;color:var(--muted,#98938c);
  font-size:.61rem;font-weight:700;list-style:none
}
.histriphy-media-advanced>summary::-webkit-details-marker{display:none}
.histriphy-media-advanced>summary::before{content:"›";margin-right:7px;font-size:.8rem;transform:rotate(0deg);transition:transform .12s ease}
.histriphy-media-advanced[open]>summary::before{transform:rotate(90deg)}
.histriphy-media-advanced-body{display:flex;flex-direction:column;gap:11px;padding:7px 0 2px}

/* Old destination preset grid is intentionally no longer part of the default
   export surface. Keep its CSS harmless for backwards-compatible markup. */
.histriphy-export-media-panel>.histriphy-media-presets{display:none!important}

@media (max-width:900px){
  .histriphy-export-media-panel .histriphy-media-chips button{flex-basis:78px}
  .histriphy-vector{grid-template-columns:minmax(0,1fr) minmax(0,154px)!important}
}

/* ==========================================================================
   HISTRIPHY 21.3.7 · PROFESSIONAL MEDIA SURFACE

   WHY THIS SECTION EXISTS

   Everything above styles the media interface with raw ramp steps —
   var(--n11), var(--n15), var(--n21) — chosen while looking at dark mode. The
   ramp INVERTS in light mode (n1 is the darkest surface in dark and the
   lightest in light), so a rule that means "dim ink" in dark means "very pale
   grey" in light. That single mistake, repeated a hundred times, is the entire
   reason light mode read as washed out and half-disabled.

   So 21.3.7 introduces one semantic token layer for media, declared once per
   theme, and re-expresses every media surface in terms of it. There is no
   "light mode patch" any more: there is one set of rules and two sets of
   values.

   THE RULES OF THIS SURFACE

   · Flat. No glass, no gradients on controls, no glow, no decorative pills.
   · One accent. Gold means active, selected or focused, and nothing else.
   · Real separators, not floating cards inside cards.
   · Numbers are tabular and right aligned, because they are read in columns.
   · Anything interactive looks interactive in BOTH themes.
   ========================================================================== */

:root,
:root[data-theme="dark"]{
  --hm-ink:var(--n24);
  --hm-ink-2:var(--n20);
  --hm-ink-3:var(--n17);
  --hm-line:var(--n11);
  --hm-line-strong:var(--n13);
  --hm-field:var(--n5);
  --hm-field-border:var(--n13);
  --hm-field-hover-border:var(--n15);
  --hm-raised:color-mix(in srgb, var(--n7) 62%, transparent);
  --hm-pop:var(--n6);
  --hm-pop-border:var(--n13);
  --hm-accent:var(--gold-4);
  --hm-accent-ink:#1a1409;
  --hm-accent-weak:color-mix(in srgb, var(--gold-4) 15%, transparent);
  --hm-accent-line:color-mix(in srgb, var(--gold-4) 58%, transparent);
  --hm-danger:var(--bad-1);
  --hm-shadow:0 18px 44px rgba(0,0,0,.55);
  --hm-checker-a:#26241f;
  --hm-checker-b:#1a1815;
  --hm-stage:var(--n2);
}

:root[data-theme="light"]{
  /* Light mode carries its own contrast budget. Every value here was measured
     against the surface it actually sits on, not guessed by inverting dark. */
  --hm-ink:var(--n24);
  --hm-ink-2:var(--n21);
  --hm-ink-3:var(--n19);
  --hm-line:var(--n12);
  --hm-line-strong:var(--n14);
  --hm-field:#ffffff;
  --hm-field-border:var(--n13);
  --hm-field-hover-border:var(--n15);
  --hm-raised:#ffffff;
  --hm-pop:#ffffff;
  --hm-pop-border:var(--n13);
  /* gold-3 on white is 4.3:1 — legal for large text and thin for a 10px
     uppercase label, which is most of what the accent is used on here. The
     deeper gold reads as the same brand colour and clears 6:1. */
  --hm-accent:#8a5f12;
  --hm-accent-ink:#ffffff;
  --hm-accent-weak:color-mix(in srgb, #b47d1b 15%, transparent);
  --hm-accent-line:color-mix(in srgb, #b47d1b 66%, transparent);
  --hm-danger:var(--bad-1);
  --hm-shadow:0 14px 34px rgba(26,24,20,.18);
  --hm-checker-a:#ffffff;
  --hm-checker-b:#e7e3da;
  --hm-stage:var(--n8);
}

/* --------------------------------------------------------------------------
   Media is a Studio tab now, so the sidebar carries four tabs, and the media
   host is simply the panel body.
   -------------------------------------------------------------------------- */
.histriphy-studio-react .geo-builder-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.histriphy-studio-react .geo-builder-tab-panel[data-builder-panel="media"]{padding:0!important;min-height:0}
.histriphy-studio-react .geo-builder-tab-panel[data-builder-panel="media"].is-active{display:flex!important;flex-direction:column;overflow:hidden!important}
.geo-builder-media-host{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

/* The 21.3.4 borrowed-panel mechanics are gone. The .histriphy-media-wide
   rules above are now unreachable because the class is never applied, so they
   are left inert rather than counter-declared: a display:revert here would
   override builder.css's own display:none and unhide every panel at once. */

/* --------------------------------------------------------------------------
   Workspace shell
   -------------------------------------------------------------------------- */
.histriphy-media-workspace{
  position:relative;flex:1 1 auto;min-height:0;min-width:0;
  display:flex;flex-direction:column;
  background:transparent;color:var(--hm-ink)
}

.histriphy-media-ws-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px 10px;border-bottom:1px solid var(--hm-line)
}
.histriphy-media-ws-identity{min-width:0}
.histriphy-media-ws-head span{display:block;color:var(--hm-accent);font-size:.52rem;font-weight:900;letter-spacing:.15em}
.histriphy-media-ws-head strong{display:block;margin-top:1px;color:var(--hm-ink);font-size:.82rem;font-weight:700;letter-spacing:-.01em}
.histriphy-media-ws-head-actions{flex:none;display:flex;gap:3px}
.histriphy-media-ws-head-actions button{
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:1px solid var(--hm-line);border-radius:5px;background:transparent;
  color:var(--hm-ink-2);cursor:pointer
}
.histriphy-media-ws-head-actions button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.histriphy-media-ws-head-actions button:hover:not(:disabled){color:var(--hm-ink);border-color:var(--hm-line-strong)}
.histriphy-media-ws-head-actions button:disabled{opacity:.34;cursor:default}
.histriphy-media-ws-head-actions button:focus-visible{outline:2px solid var(--hm-accent);outline-offset:1px}

.histriphy-media-ws-tabs{flex:none;display:flex;gap:0;padding:0 12px;border-bottom:1px solid var(--hm-line);background:transparent}
.histriphy-media-ws-tabs[hidden]{display:none}
.histriphy-media-ws-tabs button{
  flex:1 1 auto;min-height:33px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;
  color:var(--hm-ink-3);font:inherit;font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer
}
.histriphy-media-ws-tabs button:hover{color:var(--hm-ink)}
.histriphy-media-ws-tabs button.is-active{color:var(--hm-accent);border-bottom-color:var(--hm-accent)}
.histriphy-media-ws-tabs button:focus-visible{outline:2px solid var(--hm-accent);outline-offset:-3px;border-radius:3px}

.histriphy-media-ws-body{
  min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  padding:11px 13px 20px;display:flex;flex-direction:column;gap:8px
}

/* --------------------------------------------------------------------------
   Target, empty states and the start card
   -------------------------------------------------------------------------- */
.histriphy-media-target{
  display:flex;flex-direction:column;gap:2px;padding:9px 10px;
  border:1px solid var(--hm-line);border-radius:6px;background:var(--hm-raised)
}
.histriphy-media-target strong{color:var(--hm-ink);font-size:.78rem;font-weight:700;letter-spacing:-.01em}
.histriphy-media-target span{color:var(--hm-ink-3);font-size:.6rem;font-variant-numeric:tabular-nums}

.histriphy-media-empty{
  display:flex;flex-direction:column;gap:4px;margin:0;padding:22px 14px;text-align:center;
  border:1px dashed var(--hm-line-strong);border-radius:7px;background:transparent
}
.histriphy-media-empty strong{color:var(--hm-ink);font-size:.74rem;font-weight:700}
.histriphy-media-empty span{color:var(--hm-ink-3);font-size:.63rem;line-height:1.45}

.histriphy-media-start{display:flex;flex-direction:column;gap:7px;padding:14px 12px 13px;border:1px solid var(--hm-line);border-radius:7px;background:var(--hm-raised)}
.histriphy-media-start strong{color:var(--hm-ink);font-size:.76rem;font-weight:700}
.histriphy-media-start p{margin:0;color:var(--hm-ink-3);font-size:.63rem;line-height:1.45}
.histriphy-media-start small{color:var(--hm-ink-3);font-size:.56rem;letter-spacing:.02em}

.histriphy-media-hint{margin:0;color:var(--hm-ink-3);font-size:.6rem;line-height:1.45}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.histriphy-media-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
  min-height:32px;padding:0 12px;border:1px solid var(--hm-accent);border-radius:6px;
  background:var(--hm-accent);color:var(--hm-accent-ink);
  font:inherit;font-size:.68rem;font-weight:800;letter-spacing:.02em;cursor:pointer
}
.histriphy-media-primary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.histriphy-media-primary:hover{filter:brightness(1.06)}
.histriphy-media-primary:focus-visible{outline:2px solid var(--hm-accent);outline-offset:2px}
.histriphy-media-primary:disabled{opacity:.45;cursor:default;filter:none}

.histriphy-media-secondary,
.histriphy-media-row button,
.histriphy-media-actions button{
  min-height:28px;padding:0 11px;border:1px solid var(--hm-line-strong);border-radius:6px;
  background:transparent;color:var(--hm-ink-2);font:inherit;font-size:.64rem;font-weight:700;cursor:pointer
}
.histriphy-media-secondary:hover,
.histriphy-media-row button:hover:not(:disabled),
.histriphy-media-actions button:hover:not(:disabled){color:var(--hm-ink);border-color:var(--hm-accent-line)}
.histriphy-media-row button:disabled{opacity:.4;cursor:default}
.histriphy-media-actions button.is-danger{color:var(--hm-danger);border-color:color-mix(in srgb, var(--bad-1) 40%, transparent)}
.histriphy-media-actions button.is-danger:hover{border-color:var(--bad-1)}
.histriphy-media-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}

.histriphy-media-inline-action{
  flex:none;min-height:25px;padding:0 10px;border:1px solid var(--hm-line-strong);
  border-radius:5px;background:transparent;color:var(--hm-ink-2);font:inherit;font-size:.62rem;font-weight:700;cursor:pointer
}
.histriphy-media-inline-action:hover{border-color:var(--hm-accent-line);color:var(--hm-accent)}

.histriphy-media-position-button{
  width:100%;min-height:29px;padding:0 12px;border:1px solid var(--hm-line-strong);border-radius:6px;
  background:transparent;color:var(--hm-ink-2);font:inherit;font-size:.64rem;font-weight:700;cursor:pointer
}
.histriphy-media-position-button:hover{color:var(--hm-ink);border-color:var(--hm-accent-line)}
.histriphy-media-position-button.is-active{border-color:var(--hm-accent);background:var(--hm-accent-weak);color:var(--hm-accent)}

/* --------------------------------------------------------------------------
   Property rows — the heart of the inspector
   -------------------------------------------------------------------------- */
.histriphy-prop-heading{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:6px;padding-top:9px;border-top:1px solid var(--hm-line);
  color:var(--hm-ink-3);font-size:.55rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase
}
.histriphy-media-ws-body>.histriphy-prop-heading:first-of-type{margin-top:2px}

.histriphy-prop-label{color:var(--hm-ink-2);font-size:.64rem;font-weight:600}
.histriphy-prop-label:hover{color:var(--hm-ink)}
.histriphy-prop.is-scrubbing .histriphy-prop-label{color:var(--hm-accent)}
.histriphy-prop.is-modified>.histriphy-prop-label::after{background:var(--hm-accent)}

.histriphy-prop-input{
  height:25px!important;min-height:25px!important;padding:0 7px!important;
  border:1px solid var(--hm-field-border)!important;border-radius:5px!important;
  background:var(--hm-field)!important;color:var(--hm-ink)!important;
  font-size:.68rem!important;font-variant-numeric:tabular-nums;text-align:right
}
.histriphy-prop-input:hover{border-color:var(--hm-field-hover-border)!important}
.histriphy-prop-input:focus{border-color:var(--hm-accent)!important;box-shadow:0 0 0 2px var(--hm-accent-weak)}
.histriphy-prop-unit{color:var(--hm-ink-3);font-size:.6rem}
.histriphy-prop-reset{color:var(--hm-ink-3)}
.histriphy-prop-reset:hover{color:var(--hm-accent);background:var(--hm-accent-weak)}

.histriphy-prop-select{
  height:25px;min-height:25px;padding:0 5px;border:1px solid var(--hm-field-border);border-radius:5px;
  background:var(--hm-field);color:var(--hm-ink);font-size:.66rem
}
.histriphy-prop-select:hover{border-color:var(--hm-field-hover-border)}
.histriphy-prop-select:focus{border-color:var(--hm-accent);outline:none;box-shadow:0 0 0 2px var(--hm-accent-weak)}

.histriphy-prop-toggle{
  height:25px;border:1px solid var(--hm-field-border);border-radius:5px;background:var(--hm-field);
  color:var(--hm-ink-2);font-size:.63rem;font-weight:700
}
.histriphy-prop-toggle:hover{border-color:var(--hm-field-hover-border);color:var(--hm-ink)}
.histriphy-prop-toggle.is-on{border-color:var(--hm-accent);background:var(--hm-accent-weak);color:var(--hm-accent)}
.histriphy-prop-toggle:focus-visible{outline:2px solid var(--hm-accent);outline-offset:1px}

.histriphy-seg button{
  min-height:26px;border:1px solid var(--hm-field-border);border-radius:5px;
  background:var(--hm-field);color:var(--hm-ink-2);font-size:.62rem;font-weight:700
}
.histriphy-seg button:hover{border-color:var(--hm-field-hover-border);color:var(--hm-ink)}
.histriphy-seg button.is-active{border-color:var(--hm-accent);background:var(--hm-accent-weak);color:var(--hm-accent)}
.histriphy-seg button:focus-visible{outline:2px solid var(--hm-accent);outline-offset:1px}

.histriphy-prop-swatch{
  width:27px;height:25px;border:1px solid var(--hm-field-border);border-radius:5px;background:var(--hm-field)
}
.histriphy-prop-swatch:hover{border-color:var(--hm-field-hover-border)}
.histriphy-prop-hex{text-align:left!important;text-transform:lowercase}

.histriphy-group{border-top:1px solid var(--hm-line)}
.histriphy-group-head{color:var(--hm-ink-3);font-size:.55rem;font-weight:800;letter-spacing:.14em}
.histriphy-group-head:hover{color:var(--hm-ink)}

.histriphy-media-asset{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 9px;border:1px solid var(--hm-line);border-radius:6px;background:var(--hm-raised)
}
.histriphy-media-asset-identity strong{color:var(--hm-ink);font-size:.7rem}
.histriphy-media-asset-identity small{color:var(--hm-ink-3);font-size:.56rem;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   Effects — two stages, shown as two stages
   -------------------------------------------------------------------------- */
/* The primary action in Effects is quieter than the one in an empty Media tab:
   there, adding an image is the only thing to do; here it sits above a stack a
   user is already working in, and a solid gold slab would shout over it. */
.histriphy-fx-add{
  width:100%;border:1px solid var(--hm-accent-line);background:transparent;color:var(--hm-accent)
}
.histriphy-fx-add:hover{background:var(--hm-accent-weak);filter:none}
.histriphy-fx-stage-head{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:9px;border-top:1px solid var(--hm-line)}
.histriphy-fx-stage-head h3{margin:0;color:var(--hm-ink-3);font-size:.55rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.histriphy-fx-stage-head p{margin:0;color:var(--hm-ink-3);font-size:.58rem;line-height:1.4}

/* The matte is the one hard boundary in the whole pipeline, so it is drawn as
   one: a labelled rule the effect cards sit either side of. */
.histriphy-fx-matte-rule{
  display:flex;align-items:center;gap:8px;margin:9px 0 3px;color:var(--hm-accent);
  font-size:.52rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase
}
.histriphy-fx-matte-rule::before,
.histriphy-fx-matte-rule::after{content:"";flex:1 1 auto;height:1px;background:var(--hm-accent-line)}

.histriphy-fx-blank{
  display:flex;flex-direction:column;gap:4px;padding:20px 14px;text-align:center;
  border:1px dashed var(--hm-line-strong);border-radius:7px
}
.histriphy-fx-blank strong{color:var(--hm-ink);font-size:.72rem;font-weight:700}
.histriphy-fx-blank p{margin:0;color:var(--hm-ink-3);font-size:.61rem;line-height:1.45}

.histriphy-fx-mark{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.histriphy-fx-browser-item .histriphy-fx-mark{width:17px;height:17px;color:var(--hm-accent);opacity:1}
.histriphy-effect-title .histriphy-fx-mark{color:var(--hm-accent)}

.histriphy-effect{
  border:1px solid var(--hm-line);border-radius:7px;background:var(--hm-raised)
}
.histriphy-effect.is-disabled{opacity:.52}
.histriphy-effect-head{border-bottom:1px solid var(--hm-line);padding:6px 7px 6px 5px}
.histriphy-effect-title{color:var(--hm-ink);font-size:.71rem;font-weight:650}
.histriphy-effect-caret{color:var(--hm-ink-3)}
.histriphy-effect-tool{
  width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;color:var(--hm-ink-3)
}
.histriphy-effect-tool svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.histriphy-effect-tool svg circle{fill:currentColor;stroke:none}
.histriphy-effect-tool:hover:not(:disabled){background:var(--hm-accent-weak);color:var(--hm-ink)}
.histriphy-effect-tool.is-on{color:var(--hm-accent)}
.histriphy-effect-tool:focus-visible{outline:2px solid var(--hm-accent);outline-offset:1px}
.histriphy-effect-texture{border-top:1px solid var(--hm-line)}
.histriphy-effect-texture-name span{color:var(--hm-ink-3)}
.histriphy-effect-texture-name strong{color:var(--hm-ink)}

.histriphy-preset-row button{border:1px solid var(--hm-line-strong);background:var(--hm-field);color:var(--hm-ink-2)}
.histriphy-preset-row button:hover{border-color:var(--hm-accent-line);color:var(--hm-accent)}
.histriphy-effect-heavy{border:1px solid var(--hm-accent-line);background:transparent;color:var(--hm-accent)}
.histriphy-effect-heavy:hover{background:var(--hm-accent-weak)}

.histriphy-effect-menu-list{background:var(--hm-pop);border:1px solid var(--hm-pop-border);box-shadow:var(--hm-shadow)}
.histriphy-effect-menu-list button{color:var(--hm-ink-2)}
.histriphy-effect-menu-list button:hover{background:var(--hm-accent-weak);color:var(--hm-ink)}
.histriphy-effect-menu-list button.is-danger:hover{color:var(--hm-danger)}

/* --------------------------------------------------------------------------
   Effect browser
   -------------------------------------------------------------------------- */
.histriphy-fx-browser{
  border:1px solid var(--hm-pop-border);border-radius:8px;background:var(--hm-pop);box-shadow:var(--hm-shadow);
  max-height:min(56dvh,440px)
}
.histriphy-fx-browser-head{border-bottom:1px solid var(--hm-line);padding:7px}
.histriphy-fx-browser-search{
  height:27px;border:1px solid var(--hm-field-border);border-radius:5px;
  background:var(--hm-field);color:var(--hm-ink);font-size:.67rem
}
.histriphy-fx-browser-search::placeholder{color:var(--hm-ink-3)}
.histriphy-fx-browser-search:focus{border-color:var(--hm-accent);box-shadow:0 0 0 2px var(--hm-accent-weak)}
.histriphy-fx-browser-close{
  width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;color:var(--hm-ink-3)
}
.histriphy-fx-browser-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.histriphy-fx-browser-close:hover{color:var(--hm-ink);background:var(--hm-accent-weak)}
.histriphy-fx-browser-group+.histriphy-fx-browser-group{border-top:1px solid var(--hm-line)}
.histriphy-fx-browser-group h4{color:var(--hm-ink-3)}

.histriphy-fx-browser-item{
  display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:center;gap:9px;
  padding:7px 8px;border-radius:6px
}
.histriphy-fx-browser-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.histriphy-fx-browser-item strong{color:var(--hm-ink);font-size:.68rem;font-weight:650}
.histriphy-fx-browser-item span{color:var(--hm-ink-3);font-size:.575rem;line-height:1.35}
.histriphy-fx-browser-stage{
  flex:none;align-self:center;padding:1px 5px;border:1px solid var(--hm-line-strong);border-radius:3px;
  color:var(--hm-ink-3)!important;font-size:.48rem!important;font-weight:800;letter-spacing:.09em;text-transform:uppercase
}
.histriphy-fx-browser-item.is-highlighted,
.histriphy-fx-browser-item:hover{background:var(--hm-accent-weak);outline:none}
.histriphy-fx-browser-item.is-highlighted strong{color:var(--hm-accent)}
.histriphy-fx-browser-none{display:flex;flex-direction:column;gap:3px;padding:16px 10px;text-align:center}
.histriphy-fx-browser-none strong{color:var(--hm-ink);font-size:.66rem}
.histriphy-fx-browser-none span{color:var(--hm-ink-3);font-size:.59rem}
.histriphy-fx-browser-foot{
  flex:none;display:flex;gap:12px;padding:6px 9px;border-top:1px solid var(--hm-line);
  color:var(--hm-ink-3);font-size:.53rem
}
.histriphy-fx-browser-foot kbd{
  display:inline-block;margin-right:3px;padding:0 4px;border:1px solid var(--hm-line-strong);border-radius:3px;
  background:var(--hm-field);color:var(--hm-ink-2);font:inherit;font-size:.52rem;line-height:1.5
}

/* --------------------------------------------------------------------------
   EXPORT CENTER — professional output workspace
   -------------------------------------------------------------------------- */
/* Media gets room for a proper composition preview and grouped settings. GIS
   keeps the original width because the class is removed when its tab is active. */
.histriphy-universal-export-dialog.is-media{width:min(1080px,calc(100vw - 32px))}

/* GIS / Media is a mode switch, not two unrelated buttons. */
.histriphy-export-tabs{
  display:inline-flex;align-self:flex-start;gap:3px;margin:14px 22px 0;padding:3px;
  border:1px solid var(--hm-line);border-radius:10px;background:var(--hm-field)
}
.histriphy-export-tabs button{
  min-height:30px;padding:0 13px;border:1px solid transparent;border-radius:7px;background:transparent;
  color:var(--hm-ink-3);font:inherit;font-size:.62rem;font-weight:800;letter-spacing:.04em;cursor:pointer
}
.histriphy-export-tabs button:hover{color:var(--hm-ink)}
.histriphy-export-tabs button.is-active{
  color:var(--hm-accent);border-color:var(--hm-accent-line);background:var(--hm-accent-weak);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hm-accent) 8%,transparent)
}

.histriphy-mx{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:22px;align-items:start}
.histriphy-mx-preview{
  display:flex;flex-direction:column;gap:0;min-width:0;position:sticky;top:0;overflow:hidden;
  border:1px solid var(--hm-line);border-radius:12px;background:var(--hm-raised)
}
.histriphy-mx-preview-head{
  min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;
  border-bottom:1px solid var(--hm-line);background:color-mix(in srgb,var(--hm-raised) 74%,var(--hm-field))
}
.histriphy-mx-preview-identity{display:flex;flex-direction:column;gap:2px;min-width:0}
.histriphy-mx-preview-identity span,.histriphy-mx-card-head span{
  color:var(--hm-accent);font-size:.5rem;font-weight:900;letter-spacing:.15em
}
.histriphy-mx-preview-identity strong,.histriphy-mx-card-head strong{color:var(--hm-ink);font-size:.72rem;font-weight:760}
.histriphy-mx-preview-badge{
  flex:none;padding:4px 7px;border:1px solid var(--hm-line-strong);border-radius:999px;background:var(--hm-field);
  color:var(--hm-ink-3);font-size:.52rem;font-weight:700
}
.histriphy-mx-stage{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:310px;padding:18px;
  border:0;border-radius:0;background:var(--hm-stage)
}
.histriphy-mx-canvas{
  display:block;max-width:100%;max-height:390px;width:auto;height:auto;border-radius:3px;opacity:0;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.18));transition:opacity .14s ease
}
.histriphy-mx-stage.is-ready .histriphy-mx-canvas{opacity:1}
.histriphy-mx-stage.is-busy::after{
  content:"Rendering preview…";position:absolute;left:0;right:0;bottom:10px;text-align:center;
  color:var(--hm-ink-3);font-size:.56rem;letter-spacing:.04em
}
.histriphy-mx-stage-note{
  position:absolute;left:10px;right:10px;top:9px;text-align:center;color:var(--hm-ink-3);font-size:.55rem;line-height:1.4
}
.histriphy-mx-readout{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-top:1px solid var(--hm-line)}
.histriphy-mx-readout strong{color:var(--hm-ink);font-size:.92rem;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.histriphy-mx-readout span{color:var(--hm-ink-3);font-size:.6rem;line-height:1.45}

.histriphy-mx-settings{display:flex;flex-direction:column;gap:10px;min-width:0}
.histriphy-mx-card{
  display:flex;flex-direction:column;gap:11px;padding:12px;border:1px solid var(--hm-line);border-radius:10px;background:var(--hm-raised)
}
.histriphy-mx-card-head{display:flex;flex-direction:column;gap:2px;padding-bottom:2px}
.histriphy-mx-settings .histriphy-media-export-field{display:flex;flex-direction:column;gap:5px}
.histriphy-mx-settings .histriphy-media-export-field>label{
  color:var(--hm-ink-3);font-size:.52rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase
}
.histriphy-mx-settings .histriphy-media-export-field>small{color:var(--hm-ink-3);font-size:.57rem;line-height:1.45}
.histriphy-mx-settings .histriphy-media-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:5px}
.histriphy-mx-settings .histriphy-media-chips button{
  min-width:0;min-height:32px;padding:0 8px;border:1px solid var(--hm-field-border);border-radius:7px;background:var(--hm-field);
  color:var(--hm-ink-2);font:inherit;cursor:pointer;text-align:center;transition:border-color .12s ease,background .12s ease,color .12s ease
}
.histriphy-mx-settings .histriphy-media-chips button strong{display:block;font-size:.63rem;font-weight:720}
.histriphy-mx-settings .histriphy-media-chips button small{display:block;color:var(--hm-ink-3);font-size:.52rem;line-height:1.3}
.histriphy-mx-settings .histriphy-media-chips button:hover{border-color:var(--hm-field-hover-border);background:color-mix(in srgb,var(--hm-field) 72%,var(--hm-raised));color:var(--hm-ink)}
.histriphy-mx-settings .histriphy-media-chips button.is-active{
  border-color:var(--hm-accent-line);background:var(--hm-accent-weak);color:var(--hm-accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hm-accent) 7%,transparent)
}
.histriphy-mx-settings .histriphy-media-chips button.is-active strong{color:var(--hm-accent)}
.histriphy-mx-settings .histriphy-media-chips button:focus-visible{outline:2px solid var(--hm-accent);outline-offset:1px}
.histriphy-mx-settings .histriphy-media-inline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.histriphy-mx-settings .histriphy-media-inline input[type="number"],
.histriphy-mx-settings .histriphy-media-inline input[type="text"]{
  min-width:0;width:88px;height:30px;padding:0 8px;border:1px solid var(--hm-field-border);border-radius:6px;
  background:var(--hm-field);color:var(--hm-ink);font:inherit;font-size:.65rem;font-variant-numeric:tabular-nums
}
.histriphy-mx-settings .histriphy-media-inline input[type="color"]{
  width:34px;height:30px;padding:2px;border:1px solid var(--hm-field-border);border-radius:6px;background:var(--hm-field);cursor:pointer
}
.histriphy-mx-settings .histriphy-media-inline span{color:var(--hm-ink-3);font-size:.61rem}

.histriphy-mx-actions{
  overflow:hidden;border:1px solid var(--hm-accent-line);border-radius:10px;background:var(--hm-accent-weak)
}
.histriphy-mx-settings .histriphy-media-export-main{
  width:100%;min-height:52px;margin:0;padding:0 13px;display:flex;align-items:center;gap:10px;border:0;border-radius:0;
  font-size:.7rem;text-align:left
}
.histriphy-mx-export-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:rgba(0,0,0,.12)}
.histriphy-mx-export-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.histriphy-mx-export-copy{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:1px}
.histriphy-mx-export-copy strong{font-size:.7rem;font-weight:850}
.histriphy-mx-export-copy small{font-size:.53rem;font-weight:600;opacity:.68}
.histriphy-mx-export-arrow{font-size:1rem;font-weight:500}
.histriphy-mx-settings .histriphy-media-export-status{display:block;min-height:0;padding:0 12px;color:var(--hm-ink-3);font-size:.58rem;line-height:1.45}
.histriphy-mx-settings .histriphy-media-export-status:not(:empty){padding-top:7px;padding-bottom:8px;border-top:1px solid color-mix(in srgb,var(--hm-accent) 18%,transparent)}
.histriphy-mx-settings .histriphy-media-export-status.is-ok{color:var(--ok-1)}
.histriphy-mx-settings .histriphy-media-export-status.is-error{color:var(--hm-danger)}

.histriphy-media-advanced{
  overflow:hidden;border:1px solid var(--hm-line);border-radius:9px;background:var(--hm-raised);padding:0
}
.histriphy-media-advanced>summary{
  min-height:38px;display:flex;align-items:center;gap:7px;padding:0 11px;cursor:pointer;color:var(--hm-ink-2);
  font-size:.61rem;font-weight:720;letter-spacing:.01em;list-style:none
}
.histriphy-media-advanced>summary::-webkit-details-marker{display:none}
.histriphy-media-advanced>summary::before{content:"›";color:var(--hm-ink-3);font-size:.9rem;transform-origin:center;transition:transform .12s ease}
.histriphy-media-advanced[open]>summary::before{transform:rotate(90deg)}
.histriphy-media-advanced>summary:hover{color:var(--hm-ink)}
.histriphy-media-advanced-body{display:flex;flex-direction:column;gap:11px;padding:11px;border-top:1px solid var(--hm-line)}

/* Effect overflow state must return to neutral when closed. */
.histriphy-effect-tool.is-open{background:var(--hm-accent-weak);color:var(--hm-accent)}

/* --------------------------------------------------------------------------
   Map-corner shortcut
   -------------------------------------------------------------------------- */
.histriphy-media-dock-button{
  display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px;
  border:1px solid var(--hm-line-strong);border-radius:7px;background:var(--hm-pop);
  color:var(--hm-ink-2);font:inherit;font-size:.63rem;font-weight:700;cursor:pointer;box-shadow:var(--hm-shadow)
}
.histriphy-media-dock-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.histriphy-media-dock-button:hover{color:var(--hm-accent);border-color:var(--hm-accent-line)}

/* --------------------------------------------------------------------------
   Responsive — no overflow, no viewport escape, internal scroll only
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .histriphy-mx{grid-template-columns:minmax(0,1fr);gap:14px}
  .histriphy-mx-preview{position:static}
  .histriphy-mx-stage{min-height:240px}
  .histriphy-mx-canvas{max-height:300px}
}
@media (max-width:820px){
  .histriphy-media-ws-body{padding:10px 12px 22px}
  .histriphy-mx-stage{min-height:190px;padding:10px}
  .histriphy-export-tabs{margin-left:16px;margin-right:16px}
}
@media (max-height:760px){
  .histriphy-mx-canvas{max-height:250px}
}